feat(dashboard): added taskProcessing state

Added a taskProcessing state & event to the stack graph & task graph.

Now, pending task nodes are shown with a solid red/pink border, while
in-progress task nodes are shown with the spinning, dashed red/pink
border. This gives a clearer overview of the current state of the task
graph.

dashboard/src/api/types.ts

@@ -114,7 +114,8 @@ export interface WsPayload {
   version: any
 }
 
-export type NodeTask = "taskPending" | "taskComplete" | "taskError"
+export type NodeTask = "taskPending" | "taskProcessing" | "taskComplete" | "taskError"
+export const nodeTaskTypes: NodeTask[] = ["taskPending", "taskProcessing", "taskComplete", "taskError"]
 
 export interface WsMessage {
   type: "event" | "error" | "commandResult"

dashboard/src/components/graph/graph.scss

@@ -1,6 +1,10 @@
 #chart {
   g.taskPending > rect {
     stroke: #f17fcd;
+  }
+
+  g.taskProcessing > rect {
+    stroke: #f17fcd;
     stroke-dasharray: 8;
     animation: dash 15s linear infinite;
   }

dashboard/src/components/graph/index.tsx

@@ -18,7 +18,7 @@ import {
   FetchConfigResponse,
   FetchGraphResponse,
   WsMessage,
-  NodeTask,
+  nodeTaskTypes,
 } from "../../api/types"
 import Card from "../card"
 
@@ -268,8 +268,7 @@ class Chart extends Component<Props, State> {
   }
 
   clearClasses(el: HTMLElement) {
-    const classList: NodeTask[] = ["taskComplete", "taskPending", "taskError"]
-    for (const className of classList) {
+    for (const className of nodeTaskTypes) {
       el.classList.remove(className)
     }
   }
@@ -280,12 +279,8 @@ class Chart extends Component<Props, State> {
       if (message.payload.key && node.id === getIdFromTaskKey(message.payload.key)) {
         const nodeEl = document.getElementById(node.id)
         this.clearClasses(nodeEl)
-        if (message.name === "taskPending") {
-          nodeEl.classList.add("taskPending")
-        } else if (message.name === "taskError") {
-          nodeEl.classList.add("taskError")
-        } else if (message.name === "taskComplete") {
-          nodeEl.classList.add("taskComplete")
+        if (nodeTaskTypes.find(t => t === message.name)) {
+          nodeEl.classList.add(message.name) // message.name is of type NodeTask
         }
       }
     }

garden-service/src/events.ts

@@ -80,6 +80,11 @@ export interface Events {
     key: string,
     version: ModuleVersion,
   },
+  taskProcessing: {
+    startedAt: Date,
+    key: string,
+    version: ModuleVersion,
+  },
   taskComplete: TaskResult,
   taskError: TaskResult,
   taskGraphProcessing: {

garden-service/src/task-graph.ts

@@ -179,6 +179,11 @@ export class TaskGraph {
             pick(results, dependencyBaseKeys))
 
           try {
+            this.garden.events.emit("taskProcessing", {
+              startedAt: new Date(),
+              key: task.getKey(),
+              version: task.version,
+            })
             result = await node.process(dependencyResults)
             this.garden.events.emit("taskComplete", result)
           } catch (error) {

garden-service/test/unit/src/task-graph.ts

@@ -130,6 +130,7 @@ describe("task-graph", () => {
       expect(garden.events.eventLog).to.eql([
         { name: "taskPending", payload: { addedAt: now, key: task.getKey(), version: task.version } },
         { name: "taskGraphProcessing", payload: { startedAt: now } },
+        { name: "taskProcessing", payload: { startedAt: now, key: task.getKey(), version: task.version } },
         { name: "taskComplete", payload: result["a"] },
         { name: "taskGraphComplete", payload: { completedAt: now } },
       ])
@@ -168,6 +169,7 @@ describe("task-graph", () => {
       expect(garden.events.eventLog).to.eql([
         { name: "taskPending", payload: { addedAt: now, key: task.getKey(), version: task.version } },
         { name: "taskGraphProcessing", payload: { startedAt: now } },
+        { name: "taskProcessing", payload: { startedAt: now, key: task.getKey(), version: task.version } },
         { name: "taskError", payload: result["a"] },
         { name: "taskGraphComplete", payload: { completedAt: now } },
       ])