Remove color from Timespan (the size of the highlighted bar is enough)

nokia · Mar 14, 2018 · 2a2b657 · 2a2b657
1 parent a9866cd
commit 2a2b657
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 89 deletions.
diff --git a/src/app/executions/execution/execution-header/execution-header.component.scss b/src/app/executions/execution/execution-header/execution-header.component.scss
@@ -38,45 +38,6 @@
   .execution-header-icon {
     width: 100px;
     text-align: center;
-
-    i.fa:before {
-      font-family: 'FontAwesome';
-    }
-
-    i.fa.SUCCESS:before {
-      content: '\f058';
-      color: $entity-success;
-    }
-
-    i.fa.ERROR:before {
-      content: '\f06a';
-      color: $entity-error;
-    }
-
-    i.fa.RUNNING:before {
-      content: '\f01d';
-      color: $entity-running;
-    }
-
-    i.fa.IDLE:before {
-      content: "\f017";
-      color: $text-muted2;
-    }
-
-    i.fa.WAITING:before {
-      content: "\f251";
-      color: $text-muted2;
-    }
-
-    i.fa.CANCELLED:before {
-      content: "\f05e";
-      color: $text-muted2;
-    }
-
-    i.fa.PAUSED:before {
-      content: "\f28c";
-      color: $text-muted2;
-    }
   }
 
   .execution-header-content {

diff --git a/src/app/executions/tasks-runtime/tasks-runtime.component.html b/src/app/executions/tasks-runtime/tasks-runtime.component.html
@@ -15,6 +15,7 @@
     <tr *ngFor="let task of graphModel | search:filter:'name,id'; trackBy: trackByTaskId">
 
       <td class="task-name">
+        <i class="fa" [ngClass]="task.state"></i>
         <a [routerLink]="['tasks', task.id]" class="text-ellipsis"
            [title]="task.name + ' (' + task.id + ')'">{{task.name}}</a>
       </td>
@@ -26,10 +27,8 @@
             Percent: {{task.duration_sec === 0 ? '< ' : ''}}{{task.barWidth | number}}%</ng-template>
 
           <div class="inner">
-
             <div class="prehighlight" [style.width.%]="task.preBarWidth"></div>
-
-            <div class="highlight" [style.width.%]="task.barWidth" [style.backgroundColor]="task.backgroundColor"></div>
+            <div class="highlight" [style.width.%]="task.barWidth"></div>
           </div>
         </div>
       </td>

diff --git a/src/app/executions/tasks-runtime/tasks-runtime.component.scss b/src/app/executions/tasks-runtime/tasks-runtime.component.scss
@@ -1,4 +1,5 @@
 // Copyright (C) 2018 Nokia
+@import "../../../styles/colors";
 
 .stackedBarChart {
   width: 100%;
@@ -14,6 +15,7 @@
     .highlight {
       border-radius: 2px;
       transition: filter .3s ease-in-out;
+      background-color: $entity-completed;
 
       &:hover {
         filter: brightness(1.1);
@@ -36,7 +38,7 @@ table {
   }
   td.task-name a {
     width: 150px;
-    display: block;
+    color: #666;
   }
   th input.form-control-sm {
     padding: .1rem;

diff --git a/src/app/executions/tasks-runtime/tasks-runtime.component.ts b/src/app/executions/tasks-runtime/tasks-runtime.component.ts
@@ -1,7 +1,7 @@
 // Copyright (C) 2018 Nokia
 
 import {Component, Input, OnInit} from '@angular/core';
-import {Execution, TaskExec} from "../../shared/models";
+import {Execution, TaskExec, ExecutionState} from "../../shared/models";
 import * as moment from 'moment';
 
 interface TaskProgress {
@@ -13,46 +13,8 @@ interface TaskProgress {
     duration_sec: number;
     barWidth: number;
     preBarWidth: number;
-    backgroundColor: string;
     duration: string;
-}
-
-function getMixedColor({color1 = '#e74c3c', color2 = '#2ecc71', weight = 0.5}) {
-    // https://gist.github.com/jedfoster/7939513
-    const d2h = (d) => d.toString(16);
-    const h2d = (h) => parseInt(h, 16);
-    const strip = (hexColor) => hexColor.substr(hexColor.indexOf("#") + 1);
-
-    color1 = strip(color1);
-    color2 = strip(color2);
-
-    let color = "";
-
-    for (let i = 0; i <= 5; i += 2) { // loop through each of the 3 hex pairsred, green, and blue
-        const v1 = h2d(color1.substr(i, 2)), // extract the current pairs
-            v2 = h2d(color2.substr(i, 2));
-
-        // combine the current pairs from each source color, according to the specified weight
-        let val = d2h(Math.floor(v2 + (v1 - v2) * weight));
-
-        // prepend a '0' if val results in a single digit
-        val = val.padStart(2, "0");
-
-        color += val; // concatenate val to our new color string
-    }
-
-    return "#" + color;
-}
-
-function noramlize(arr): number[] {
-    const max = Math.max(...arr),
-        min = Math.min(...arr),
-        len = arr.length;
-    if (max === min) {
-        return Array(len).fill(1 / len);
-    } else {
-        return arr.map(i => (i - min) / (max - min));
-    }
+    state: ExecutionState;
 }
 
 function timeDiff(t1: string, t2: string, diffUnit: moment.unitOfTime.Diff = "seconds") {
@@ -98,7 +60,7 @@ export class TasksRuntimeComponent implements OnInit {
                 duration: task.taskDuration.duration,
                 barWidth: 0,
                 preBarWidth: 0,
-                backgroundColor: 'fff'
+                state: task.state
             };
         }).sort((t1, t2) => t1.created_at_relative - t2.created_at_relative);
     }
@@ -120,12 +82,7 @@ export class TasksRuntimeComponent implements OnInit {
 
         this.graphModel = this.createGraphModel(tasks, workflowStarted);
 
-        // normalize the run times to values in [0..1]. This will help to mix the colors (green -> red)
-        const normalized = noramlize(this.graphModel.map(t => t.duration_sec));
-
         this.graphModel.forEach((t, index) => {
-            // set the graph's background color
-            t.backgroundColor = getMixedColor({weight: normalized[index]});
 
             // set the graph's width
             const barWidth = (t.duration_sec / workflowDurationSec) * 100;

diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts
@@ -6,4 +6,6 @@ export * from './taskExec';
 export * from './execution';
 export * from './action';
 
+export {ExecutionState} from './common';
+
 export type SubWorkflowExecution = Execution;
diff --git a/src/styles/_badges.scss b/src/styles/_badges.scss
@@ -28,4 +28,46 @@
 
 .badge-flex {
   flex: 0 1 15%;
+}
+
+/***********************
+*** Standalone Icons ***
+************************/
+i.fa:before {
+  font-family: 'FontAwesome';
+}
+
+i.fa.SUCCESS:before {
+  content: '\f058';
+  color: $entity-success;
+}
+
+i.fa.ERROR:before {
+  content: '\f06a';
+  color: $entity-error;
+}
+
+i.fa.RUNNING:before {
+  content: '\f01d';
+  color: $entity-running;
+}
+
+i.fa.IDLE:before {
+  content: "\f017";
+  color: $text-muted2;
+}
+
+i.fa.WAITING:before {
+  content: "\f251";
+  color: $text-muted2;
+}
+
+i.fa.CANCELLED:before {
+  content: "\f05e";
+  color: $text-muted2;
+}
+
+i.fa.PAUSED:before {
+  content: "\f28c";
+  color: $text-muted2;
 }