Feature/job graphs download csv (#686)

* Download job graphs data as csv * remove console.log * added specs * Fix specs
Azure · Sep 22, 2017 · e5a668b · e5a668b
1 parent 39f4e45
commit e5a668b
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 3 deletions.
diff --git a/app/components/job/graphs/job-graphs-home/helpers.ts b/app/components/job/graphs/job-graphs-home/helpers.ts
@@ -0,0 +1,29 @@
+import { Task } from "app/models";
+import { List } from "immutable";
+
+export function tasksToCsv(tasks: List<Task>) {
+    const data = tasks.map(taskToCsvRow).join("\n");
+    return `${taskCsvHeader()}\n${data}\n`;
+}
+
+export function taskCsvHeader() {
+    return [
+        "Task id",
+        "Exit code",
+        "Start time",
+        "End time",
+        "Node id",
+        "Running time(ms)",
+    ];
+}
+
+export function taskToCsvRow(task: Task) {
+    return [
+        task.id,
+        task.executionInfo.exitCode,
+        task.executionInfo.startTime,
+        task.executionInfo.endTime,
+        task.nodeInfo.nodeId,
+        task.executionInfo.runningTime.asMilliseconds(),
+    ].join(",");
+}
diff --git a/app/components/job/graphs/job-graphs-home/job-graphs-home.component.ts b/app/components/job/graphs/job-graphs-home/job-graphs-home.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { List } from "immutable";
+import * as path from "path";
 import { Observable } from "rxjs";
 
+import { tasksToCsv } from "app/components/job/graphs/job-graphs-home/helpers";
 import { Job, Task, TaskState } from "app/models";
-import { CacheDataService, JobParams, JobService, TaskService } from "app/services";
+import { CacheDataService, ElectronShell, FileSystemService, JobParams, JobService, TaskService } from "app/services";
 import { RxEntityProxy } from "app/services/core";
 import { log } from "app/utils";
 import { FilterBuilder } from "app/utils/filter-builder";
@@ -39,6 +41,8 @@ export class JobGraphsComponent implements OnInit, OnDestroy {
         private taskService: TaskService,
         private jobService: JobService,
         private cacheDataService: CacheDataService,
+        private shell: ElectronShell,
+        private fs: FileSystemService,
     ) {
 
         this._data = this.jobService.get(null, {});
@@ -100,6 +104,16 @@ export class JobGraphsComponent implements OnInit, OnDestroy {
         return this.updateTasks(true);
     }
 
+    @autobind()
+    public downloadCsv() {
+        const csv = tasksToCsv(this.tasks);
+
+        const dest = path.join(this.fs.commonFolders.downloads, `${this.jobId}.csv`);
+        return Observable.fromPromise(this.fs.saveFile(dest, csv).then(() => {
+            this.shell.showItemInFolder(dest);
+        }));
+    }
+
     private _updateDescription() {
         switch (this.currentGraph) {
             case AvailableGraph.runningTime:

diff --git a/app/components/job/graphs/job-graphs-home/job-graphs-home.html b/app/components/job/graphs/job-graphs-home/job-graphs-home.html
@@ -5,8 +5,10 @@ <h1>
         </h1>
         <span class="description">{{description}}</span>
     </div>
-
-    <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
+    <div class="actions">
+        <bl-download-button [action]="downloadCsv"></bl-download-button>
+        <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
+    </div>
     <div class="buttons">
         <div class="btn" (click)="updateGraph(AvailableGraph.runningTime)" [class.active]="currentGraph === AvailableGraph.runningTime">
             Tasks running time

diff --git a/app/components/job/graphs/job-graphs-home/job-graphs-home.scss b/app/components/job/graphs/job-graphs-home/job-graphs-home.scss
@@ -33,6 +33,11 @@ bl-job-graphs-home {
             font-style: italic;
         }
 
+        .actions {
+            > * {
+                margin: 0 3px;
+            }
+        }
         .buttons {
             display: flex;
 

diff --git a/test/app/components/job/graphs/job-graphs-home/helpers.spec.ts b/test/app/components/job/graphs/job-graphs-home/helpers.spec.ts
@@ -0,0 +1,50 @@
+import { List } from "immutable";
+
+import { tasksToCsv } from "app/components/job/graphs/job-graphs-home/helpers";
+import { Task } from "app/models";
+
+const startDate1 = new Date(2017, 9, 9, 10, 23, 59);
+const endDate1 = new Date(2017, 9, 9, 11, 23, 59);
+
+const startDate2 = new Date(2017, 9, 9, 10, 22, 59);
+const endDate2 = new Date(2017, 9, 9, 11, 22, 23);
+describe("JobGraphsHome Helpers", () => {
+    it("should convert to csv correctly", () => {
+        const tasks = List([
+            new Task({
+                id: "001", nodeInfo: { nodeId: "node-1" },
+                executionInfo: {
+                    startTime: startDate1,
+                    endTime: endDate1,
+                    exitCode: 0,
+                },
+            } as any),
+            new Task({
+                id: "002", nodeInfo: { nodeId: "node-1" },
+                executionInfo: {
+                    startTime: startDate2,
+                    endTime: endDate2,
+                    exitCode: 0,
+                },
+            } as any),
+            new Task({
+                id: "003", nodeInfo: { nodeId: "node-1" },
+                executionInfo: {
+                    startTime: startDate1,
+                    endTime: endDate1,
+                    exitCode: 1,
+                },
+            } as any),
+        ]);
+        const csv = tasksToCsv(tasks);
+
+        const expecetedCsv = [
+            "Task id,Exit code,Start time,End time,Node id,Running time(ms)",
+            `001,0,${startDate1.toString()},${endDate1.toString()},node-1,3600000`,
+            `002,0,${startDate2.toString()},${endDate2.toString()},node-1,3564000`,
+            `003,1,${startDate1.toString()},${endDate1.toString()},node-1,3600000`,
+        ].join("\n") + "\n";
+
+        expect(csv).toEqual(expecetedCsv);
+    });
+});