Azure · timotheeguerin · Sep 7, 2017 · Aug 18, 2017 · Sep 7, 2017 · Sep 7, 2017
@@ -23,7 +23,7 @@
         "NODE_ENV": "development",
         "HOT": "1"
       },
-      "console": "integratedTerminal",
+      "console": "internalConsole",
       "sourceMaps": true,
       "outFiles": [
         "${workspaceRoot}/build/**/*.js"

@@ -2,9 +2,9 @@ import { GaugeLabel, GaugeLabels } from "./gauge-config";
 
 export const presetSizes = {
     xsmall: 100,
-    small: 200,
-    medium: 300,
-    large: 400,
+    small: 150,
+    medium: 200,
+    large: 300,
 };
 
 export function percToDeg(perc) {

@@ -44,49 +44,3 @@ bl-job-details {
         }
     }
 }
-bl-job-progress-status {
-    display: block;
-    padding-top: 5px;
-
-    .running-task-status {
-        display: flex;
-    }
-
-    .running {
-        width: 220px;
-        height: 130px;
-    }
-
-    .queued, .completed {
-        text-align: center;
-        margin: 98px 10px 0;
-
-        > .value {
-            font-size: 20px;
-        }
-
-        > .label {
-            color: $alto;
-        }
-    }
-
-    bl-gauge {
-        margin: 0 10px;
-    }
-
-    .toggle-job-pool-tasks {
-        margin: 0 10px;
-        display: flex;
-        font-size: 12px;
-        justify-content: space-between;
-
-        > .option {
-            cursor: pointer;
-
-            &.active {
-                color: map-get($primary, 600);
-                font-weight: bold;
-            }
-        }
-    }
-}
@@ -3,11 +3,12 @@ import { List } from "immutable";
 import { Subscription } from "rxjs";
 
 import { GaugeConfig } from "app/components/base/graphs/gauge";
-import { Job, Node, Pool, TaskState } from "app/models";
-import { NodeListParams, NodeService, PoolParams, PoolService, TaskService } from "app/services";
+import { Job, JobTaskCounts, Node, Pool } from "app/models";
+import { JobService, NodeListParams, NodeService, PoolParams, PoolService } from "app/services";
 import { PollObservable, PollService, RxEntityProxy, RxListProxy } from "app/services/core";
 
 const refreshRate = 5000;
+import "./job-progress-status.scss";
 
 @Component({
     selector: "bl-job-progress-status",
@@ -25,20 +26,24 @@ export class JobProgressStatusComponent implements OnChanges, OnDestroy {
 
     public showAllPoolTasks = false;
     public runningTasksCount = 0;
+    public queuedTaskCount: string = "-";
+    public succeededTaskCount: string = "-";
+    public failedTaskCount: string = "-";
     public maxRunningTasks = 0;
     public gaugeOptions: GaugeConfig;
+    public jobTaskCounts: JobTaskCounts = new JobTaskCounts();
+    public progress = null;
 
     private data: RxListProxy<NodeListParams, Node>;
     private poolData: RxEntityProxy<PoolParams, Pool>;
 
     private _polls: PollObservable[] = [];
     private _subs: Subscription[] = [];
-    private _runningTaskCountForJob: number = 0;
 
     constructor(
         poolService: PoolService,
         nodeService: NodeService,
-        private taskService: TaskService,
+        private jobService: JobService,
         pollService: PollService,
     ) {
         this.poolData = poolService.get(null);
@@ -92,8 +97,14 @@ export class JobProgressStatusComponent implements OnChanges, OnDestroy {
         if (this.showAllPoolTasks) {
             const taskCountPerNode = this.nodes.map(x => x.runningTasksCount);
             this.runningTasksCount = taskCountPerNode.reduce((a, b) => a + b, 0);
+            this.queuedTaskCount = "-";
+            this.failedTaskCount = "-";
+            this.succeededTaskCount = "-";
         } else {
-            this.runningTasksCount = this._runningTaskCountForJob;
+            this.runningTasksCount = this.jobTaskCounts.running;
+            this.queuedTaskCount = this.jobTaskCounts.active.toString();
+            this.failedTaskCount = this.jobTaskCounts.failed.toString();
+            this.succeededTaskCount = this.jobTaskCounts.succeeded.toString();
         }
     }
 
@@ -117,12 +128,26 @@ export class JobProgressStatusComponent implements OnChanges, OnDestroy {
     }
 
     private _updateJobRunningTasks() {
-        const obs = this.taskService.countTasks(this.job.id, TaskState.running);
+        const obs = this.jobService.getTaskCounts(this.job.id);
 
         obs.subscribe((x) => {
-            this._runningTaskCountForJob = x;
+            this.jobTaskCounts = x;
             this.countRunningTasks();
+            this._computeProgress();
         });
         return obs;
     }
+
+    private _computeProgress() {
+        if (this.jobTaskCounts.total === 0) {
+            this.progress = null;
+        } else {
+            const total = this.jobTaskCounts.total;
+            this.progress = {
+                completed: (this.jobTaskCounts.completed / total * 100).toFixed(2),
+                buffer: ((this.jobTaskCounts.completed + this.jobTaskCounts.running) / total * 100).toFixed(2),
+            };
+        }
+    }
+
 }
@@ -1,17 +1,28 @@
 <div class="running-task-status">
-    <!--<div class="queued">
-        <div class="value">309</div>
+    <div class="queued">
+        <div class="value">{{queuedTaskCount}}</div>
         <div class="label">Queued</div>
-    </div>-->
+    </div>
     <div class="running">
         <div class="toggle-job-pool-tasks">
             <div class="option" [class.active]="!showAllPoolTasks" (click)="updateShowAllPoolTasks(false)">Only Job</div>
             <div class="option" [class.active]="showAllPoolTasks" (click)="updateShowAllPoolTasks(true)">Pool</div>
         </div>
-        <bl-gauge [value]="runningTasksCount" [options]="gaugeOptions"></bl-gauge>
+        <bl-gauge [value]="runningTasksCount" [options]="gaugeOptions" [size]="170"></bl-gauge>
     </div>
-    <!--<div class="completed">
-        <div class="value">124</div>
-        <div  class="label">Completed</div>
-    </div>-->
+    <div class="completed">
+        <div class="succeeded">
+            <div class="value">{{succeededTaskCount}}</div>
+            <div class="label">Succeeded</div>
+        </div>
+        <div class="failed">
+            <div class="value">{{failedTaskCount}}</div>
+            <div class="label">Failed</div>
+        </div>
+    </div>
+</div>
+<div class="progress" *ngIf="progress" title="Job completition progress">
+    <md-progress-bar class="progress-bar" color="primary" mode="buffer" [value]="progress.completed" [bufferValue]="progress.buffer">
+    </md-progress-bar>
+    <span class="progress-label">{{progress.completed}}%</span>
 </div>
@@ -0,0 +1,78 @@
+@import "app/styles/variables";
+
+bl-job-progress-status {
+    display: block;
+    padding-top: 5px;
+
+    .running-task-status {
+        display: flex;
+    }
+
+    .running {
+        width: 180px;
+        height: 170px;
+    }
+
+    .queued, .completed {
+        text-align: center;
+        .value {
+            font-size: 20px;
+        }
+
+        .label {
+            color: $alto;
+        }
+    }
+
+    .queued {
+        margin: 82px 10px 0;
+    }
+
+    .completed {
+        margin: 58px 10px 0;
+
+        > .succeeded {
+            color: map-get($success, 500);
+            margin-bottom: 20px;
+        }
+
+        > .failed {
+            color: map-get($danger, 500);
+        }
+    }
+
+    bl-gauge {
+        margin: 0 10px;
+    }
+
+    .toggle-job-pool-tasks {
+        margin: 0 10px;
+        display: flex;
+        font-size: 12px;
+        justify-content: space-between;
+
+        > .option {
+            cursor: pointer;
+
+            &.active {
+                color: map-get($primary, 600);
+                font-weight: bold;
+            }
+        }
+    }
+
+    .progress {
+        margin: 0 10px;
+        display: flex;
+        align-items: center;
+
+        > .progress-bar {
+            flex: 1;
+        }
+
+        > .progress-label {
+            margin-left: 10px;
+            color: $mineshaft-grey;
+        }
+    }
+}
@@ -49,7 +49,7 @@ export class TaskCreateBasicDialogComponent extends DynamicForm<Task, TaskCreate
                 Validators.pattern(validation.regex.id),
             ]],
             displayName: ["", Validators.maxLength(validation.maxLength.displayName)],
-            commandLine: ["blabla", Validators.required],
+            commandLine: ["", Validators.required],
             constraints: this.constraintsGroup,
             userIdentity: [null],
             fileGroups: [[]],

@@ -32,6 +32,7 @@ export * from "./job-manager-task";
 export * from "./job-preparation-task";
 export * from "./job-release-task";
 export * from "./job-stats";
+export * from "./job-task-counts";
 export * from "./key-bindings";
 export * from "./list-result";
 export * from "./metadata";

@@ -0,0 +1,31 @@
+import { Model, Prop, Record } from "app/core";
+
+export enum JobTaskCountsValidationStatus {
+    validated = "validated",
+    unvalidated = "unvalidated ",
+}
+export interface JobTaskCountsAttributes {
+    active?: number;
+    running?: number;
+    completed?: number;
+    succeeded?: number;
+    failed?: number;
+    validationStatus?: JobTaskCountsValidationStatus;
+}
+
+@Model()
+export class JobTaskCounts extends Record<JobTaskCountsAttributes> {
+    @Prop() public active: number = 0;
+    @Prop() public running: number = 0;
+    @Prop() public completed: number = 0;
+    @Prop() public succeeded: number = 0;
+    @Prop() public failed: number = 0;
+    @Prop() public validationStatus: JobTaskCountsValidationStatus;
+
+    public total: number;
+
+    constructor(data: JobTaskCountsAttributes = {}) {
+        super(data);
+        this.total = this.active + this.running + this.completed;
+    }
+}
@@ -1,7 +1,7 @@
 import { Injectable } from "@angular/core";
 import { Observable, Subject } from "rxjs";
 
-import { Job } from "app/models";
+import { Job, JobTaskCounts } from "app/models";
 import { JobCreateDto, JobPatchDto } from "app/models/dtos";
 import { Constants, ModelUtils, log } from "app/utils";
 import { List } from "immutable";
@@ -102,4 +102,10 @@ export class JobService extends ServiceBase {
         });
         return this.patch(job.id, attributes);
     }
+
+    public getTaskCounts(jobId: string): Observable<JobTaskCounts> {
+        return this.callBatchClient((client) => client.job.getTaskCounts(jobId), (error) => {
+            log.error(`Error getting job task counts: ${jobId}`, error);
+        }).map(data => new JobTaskCounts(data));
+    }
 }
@@ -83,6 +83,10 @@ export default class JobProxy {
         return this.client.job.patch(jobId, attributes, wrapOptions(options));
     }
 
+    public getTaskCounts(jobId: string): Promise<any> {
+        return this.client.job.getTaskCounts(jobId, wrapOptions({}));
+    }
+
     /**
      */
     public listHookTasks(jobId: string, options?: models.JobListPreparationAndReleaseTaskStatusNextOptions) {

@@ -41,8 +41,8 @@ describe("GaugeComponent", () => {
         testComponent.size = "medium";
         fixture.detectChanges();
 
-        expect(component.dimensions.outerWidth).toBe(300);
-        expect(component.dimensions.outerHeight).toBe(300);
+        expect(component.dimensions.outerWidth).toBe(200);
+        expect(component.dimensions.outerHeight).toBe(200);
     });
 
     it("should compute the right dimensions when size is a number", () => {
@@ -55,14 +55,14 @@ describe("GaugeComponent", () => {
 
     it("should have created a svg with the right size", () => {
         expect(svg.empty()).toBeFalsy("There should be a svg");
-        expect(svg.attr("width")).toBe("200");
-        expect(svg.attr("height")).toBe("200");
+        expect(svg.attr("width")).toBe("150");
+        expect(svg.attr("height")).toBe("150");
     });
 
     it("svg contains a chart should be centered and a square", () => {
         const chart = svg.select("g");
         expect(chart.empty()).toBe(false);
-        expect(chart.attr("transform")).toBe("translate(100, 100)");
+        expect(chart.attr("transform")).toBe("translate(75, 75)");
     });
 
     describe("Labels", () => {