Skip to content

Commit

Permalink
Merge pull request #30 from nokia/tasks-runtimes
Browse files Browse the repository at this point in the history
Tasks runtimes
  • Loading branch information
GuyShaanan authored Feb 19, 2018
2 parents ccc9a90 + 68d2e3c commit c4b28d1
Show file tree
Hide file tree
Showing 20 changed files with 722 additions and 446 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
*.iml
node_modules
npm-debug.log
.npmrc
dist/
coverage
src/assets/auth.json
30 changes: 15 additions & 15 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "CloudFlow",
"version": "0.4.0",
"version": "0.5.0",
"license": "Apache-2.0",
"scripts": {
"ng": "ng",
Expand All @@ -15,18 +15,18 @@
},
"private": true,
"dependencies": {
"@angular/animations": "5.2.2",
"@angular/common": "5.2.2",
"@angular/compiler": "5.2.2",
"@angular/core": "5.2.2",
"@angular/forms": "5.2.2",
"@angular/http": "5.2.2",
"@angular/platform-browser": "5.2.2",
"@angular/platform-browser-dynamic": "5.2.2",
"@angular/router": "5.2.2",
"@angular/animations": "5.2.5",
"@angular/common": "5.2.5",
"@angular/compiler": "5.2.5",
"@angular/core": "5.2.5",
"@angular/forms": "5.2.5",
"@angular/http": "5.2.5",
"@angular/platform-browser": "5.2.5",
"@angular/platform-browser-dynamic": "5.2.5",
"@angular/router": "5.2.5",
"@ng-bootstrap/ng-bootstrap": "1.0.0",
"angular-oauth2-oidc": "^3.0.0",
"angular-split": "1.0.0-rc.1",
"angular-split": "1.0.0-rc.3",
"awesome-bootstrap-checkbox": "^1.0.0",
"bootstrap": "4.0.0",
"clipboard": "^1.7.1",
Expand All @@ -38,16 +38,16 @@
"js-yaml": "^3.9.1",
"jsplumb": "2.6.3",
"moment": "^2.18.1",
"ngx-clipboard": "~9.1.1",
"ngx-clipboard": "~10.0.0",
"open-sans-fontface": "^1.4.0",
"rxjs": "^5.5.0",
"sweetalert2": "^6.11.1",
"zone.js": "^0.8.16"
},
"devDependencies": {
"@angular/cli": "1.6.6",
"@angular/compiler-cli": "5.2.2",
"@angular/language-service": "5.2.2",
"@angular/cli": "1.6.8",
"@angular/compiler-cli": "5.2.5",
"@angular/language-service": "5.2.5",
"@types/codemirror": "^0.0.55",
"@types/dagre": "0.7.39",
"@types/jasmine": "~2.5.53",
Expand Down
4 changes: 2 additions & 2 deletions src/app/about/about.component.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="modal-header">
<h4 class="modal-title">
<img src="assets/icon256.svg" height="32" width="32" class="mr-2" />
CloudFlow <small class="text-muted">v0.4.0</small>
CloudFlow <small class="text-muted">v0.5.0</small>
</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('')">
<span aria-hidden="true">&times;</span>
Expand All @@ -12,7 +12,7 @@ <h4 class="modal-title">
Workflow visualization tool for <a href="https://github.com/openstack/mistral" target="_blank">OpenStack Mistral</a>
</p>
<p>
<small>Copyright (C) 2017 Nokia</small>
<small>Copyright (C) 2017-2018 Nokia</small>
<a href="http://github.com/nokia/CloudFlow" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</p>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,6 @@
<span>Up</span>
</div>

<div class="execution-header-content header-item d-flex flex-column justify-content-between">
<h4>{{execution.workflow_name}}</h4>
<div class="d-flex flex-row align-items-baseline extra">
<span class="text-muted" [title]="'Created At: ' + execution.created_at">
<i class="fa fa-clock-o"></i> {{execution.created_at}}
</span>
<cf-countdown class="ml-3 flex-center" *ngIf="!execution.done" (done)="autoReloadEnd()"></cf-countdown>
</div>
</div>

<div *ngIf="!workflowDef?.isEmpty"
class="execution-header-definition header-item flex-center d-flex flex-column pointer"
ngbTooltip="Show workflow definition" placement="bottom"
Expand All @@ -36,4 +26,24 @@ <h4>{{execution.workflow_name}}</h4>
<span>Definition</span>
</div>

<div class="header-item flex-center d-flex flex-column"
ngbTooltip="Show tasks runtimes" placement="bottom"
[class.disabled]="!tasksRuntimeEnabled"
[class.pointer]="tasksRuntimeEnabled"
[class.active]="tasksRuntimeActive"
(click)="tasksRuntimeEnabled && showTasksRuntime()">
<i class="fa fa-signal fa-rotate-90 fa-2x"></i>
<span>Runtimes</span>
</div>

<div class="execution-header-content header-item d-flex flex-column justify-content-between">
<h4>{{execution.workflow_name}}</h4>
<div class="d-flex flex-row align-items-baseline extra">
<span class="text-muted" [title]="'Created At: ' + execution.created_at">
<i class="fa fa-clock-o"></i> {{execution.created_at}}
</span>
<cf-countdown class="ml-3 flex-center" *ngIf="!execution.done" (done)="autoReloadEnd()"></cf-countdown>
</div>
</div>

</div>
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,18 @@
}
}

&.active {
background: rgba(158, 158, 158, 0.2);
}

&:not(:last-of-type) {
border-right: 1px solid #e0e0e0;
}

&.disabled {
opacity: .3;
cursor: not-allowed;
}
}

.execution-header-icon {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import {CountdownComponent} from "../../../shared/components/countdown/countdown
export class ExecutionHeaderComponent {
@Input() workflowDef: WorkflowDef;
@Input() execution: Execution;
@Output() autoReloadDone = new EventEmitter<any>();
@Input() tasksRuntimeActive: boolean;
@Output() autoReloadDone = new EventEmitter<null>();
@Output() tasksRuntimeClicked = new EventEmitter<null>();
@ViewChild(CountdownComponent) countdown: CountdownComponent;

constructor(public readonly codeMirrorService: CodeMirrorModalService) {}
Expand All @@ -31,4 +33,11 @@ export class ExecutionHeaderComponent {
this.codeMirrorService.open(workflowDef.definition, {mode: 'yaml', readonly: true}, `Workflow Definition`);
}

showTasksRuntime() {
this.tasksRuntimeClicked.emit();
}

get tasksRuntimeEnabled() {
return this.execution.done;
}
}
12 changes: 9 additions & 3 deletions src/app/executions/execution/execution.component.html
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
<cf-execution-header
[execution]="execution"
[workflowDef]="workflowDef"
(autoReloadDone)="autoReloadEnd()"></cf-execution-header>
[tasksRuntimeActive]="tasksRuntimeOpen"
(autoReloadDone)="autoReloadEnd()"
(tasksRuntimeClicked)="tasksRunimeToggle()"></cf-execution-header>

<div class="execution-content">

<split direction="horizontal">

<split-area [size]="75" class="graph-container-overflow">
<split-area [size]="25" class="task-runtimes bg-white" *ngIf="tasks && tasks.length" [order]="0" [visible]="tasksRuntimeOpen">
<cf-tasks-runtime [tasks]="tasks" [execution]="execution"></cf-tasks-runtime>
</split-area>

<split-area [size]="tasksRuntimeOpen ? 50 : 75" class="graph-container-overflow" [order]="1">
<cf-workflow-graph class="h-100" [tasks]="tasks" *ngIf="tasks && tasks.length"></cf-workflow-graph>
</split-area>

<split-area [size]="25" class="bg-white">
<split-area [size]="25" class="bg-white" [order]="2">
<div class="bg-white h-0">
<router-outlet></router-outlet>
</div>
Expand Down
3 changes: 1 addition & 2 deletions src/app/executions/execution/execution.component.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// Copyright (C) 2017 Nokia
@import "../../../styles/colors";

:host {
display: flex;
Expand All @@ -18,7 +17,7 @@

/deep/.info-panel-header {
height: 35px;
background-color: $background-color;
background-color: #ececec;
padding: 10px;
border-radius: 50px;;
line-height: 15px;
Expand Down
6 changes: 6 additions & 0 deletions src/app/executions/execution/execution.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,18 @@ export class ExecutionComponent implements AfterViewInit, OnDestroy {
execution: Execution = null;
tasks: TaskExec[] = [];
workflowDef: WorkflowDef = null;
tasksRuntimeOpen = false;

constructor(protected readonly service: MistralService,
protected readonly route: ActivatedRoute,
protected readonly router: Router,
protected readonly alerts: AlertsService) {
}

tasksRunimeToggle() {
this.tasksRuntimeOpen = !this.tasksRuntimeOpen;
}

/**
* Observe changes to task ID that happened due to navigation events (Back/Forward) or when directly
* opening a link with task ID in it.
Expand Down Expand Up @@ -84,6 +89,7 @@ export class ExecutionComponent implements AfterViewInit, OnDestroy {
async load(executionId: string) {
this.tasks = [];
this.executionId = executionId;
this.tasksRuntimeOpen = false;

try {
this.execution = await this.service.execution(this.executionId).toPromise();
Expand Down
2 changes: 2 additions & 0 deletions src/app/executions/executions.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {InfoItemComponent} from "./info-item/info-item.component";
import {ActionExecutionsInfoComponent} from "./task-info/action-executions-info/action-executions-info.component";
import {SubworkflowExecutionsInfoComponent} from "./task-info/subworkflow-executions-info/subworkflow-executions-info.component";
import {ExecutionHeaderComponent} from "./execution/execution-header/execution-header.component";
import {TasksRuntimeComponent} from './tasks-runtime/tasks-runtime.component';

@NgModule({
imports: [
Expand All @@ -32,6 +33,7 @@ import {ExecutionHeaderComponent} from "./execution/execution-header/execution-h
ActionExecutionsInfoComponent,
SubworkflowExecutionsInfoComponent,
ExecutionHeaderComponent,
TasksRuntimeComponent,
],
exports: [
ExecutionsComponent
Expand Down
33 changes: 33 additions & 0 deletions src/app/executions/tasks-runtime/tasks-runtime.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<div class="p-2 mb-1">

<div class="d-flex justify-content-center align-items-baseline info-panel-header">
<span>Task Runtimes</span>
</div>

<table class="table table-sm table-striped table-hover table-bordered">
<thead>
<tr>
<th>Task</th>
<th>Relative Runtime</th>
<th>Runtime</th>
</tr>
</thead>
<tr *ngFor="let task of graphModel; trackBy: trackByTaskId">
<td class="task-name">
<a [routerLink]="['tasks', task.id]" class="text-ellipsis" [title]="task.name + ' (' + task.id + ')'">{{task.name}}</a>
</td>
<td>
<div class="stackedBarChart">
<div class="inner">
<div class="prehighlight" [style.width.%]="task.preBarWidth"></div>
<div class="highlight" [style.width.%]="task.barWidth"
[style.backgroundColor]="task.backgroundColor"></div>
</div>
</div>
</td>
<td class="text-muted" [title]="task.created_at + ' - ' + task.updated_at">
{{task.duration}}
</td>
</tr>
</table>
</div>
40 changes: 40 additions & 0 deletions src/app/executions/tasks-runtime/tasks-runtime.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
// Copyright (C) 2018 Nokia

.stackedBarChart {
width: 100%;
height: 10px;
font-size: 0;

.inner {
width: 100%;
height: 100%;
font-size: 0;

.highlight {
border-radius: 2px;
transition: filter .3s ease-in-out;

&:hover {
filter: brightness(1.1);
}
}

div {
height: 100%;
display: inline-block;
font-size: 0;
}
}
}

table {
line-height: 1.3;
td {
padding: 1px;
vertical-align: middle;
}
td.task-name a {
width: 150px;
display: block;
}
}
Loading

0 comments on commit c4b28d1

Please sign in to comment.