improvement(dashboard): add taskCancelled support to stack graph page

garden-io · Jul 10, 2019 · 76c154b · 76c154b
1 parent b6d8846
commit 76c154b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/dashboard/src/components/graph/graph.scss b/dashboard/src/components/graph/graph.scss
@@ -19,6 +19,10 @@
     stroke: #02f2b4;
   }
 
+  g.taskCancelled > rect {
+    stroke: #BBB;
+  }
+
   g.taskError > rect {
     stroke: red;
   }

diff --git a/dashboard/src/components/graph/index.tsx b/dashboard/src/components/graph/index.tsx
@@ -384,7 +384,7 @@ class Chart extends Component<Props, ChartState> {
             <Span>
               <span
                 className={css`
-                    color: ${colors.gardenGreen};
+                    color: ${colors.taskState.ready};
                   `}
               >
                 —{" "}
@@ -394,7 +394,7 @@ class Chart extends Component<Props, ChartState> {
             <Span>
               <span
                 className={css`
-                    color: ${colors.gardenPink};
+                    color: ${colors.taskState.pending};
                   `}
               >
                 —{" "}
@@ -404,7 +404,7 @@ class Chart extends Component<Props, ChartState> {
             <Span>
               <span
                 className={css`
-                    color: ${colors.gardenPink};
+                    color: ${colors.taskState.processing};
                   `}
               >
                 --{" "}
@@ -414,7 +414,17 @@ class Chart extends Component<Props, ChartState> {
             <Span>
               <span
                 className={css`
-                    color: red;
+                 color: ${colors.taskState.cancelled};
+                  `}
+              >
+                —{" "}
+              </span>
+              Cancelled
+              </Span>
+            <Span>
+              <span
+                className={css`
+                 color: ${colors.taskState.error};
                   `}
               >
                 —{" "}

diff --git a/dashboard/src/context/events.tsx b/dashboard/src/context/events.tsx
@@ -17,11 +17,11 @@ import { Extends } from "garden-service/build/src/util/util"
 
 // FIXME: We shouldn't repeat the keys for both the type and the set below
 export type SupportedEventName = Extends<
-  EventName, "taskPending" | "taskProcessing" | "taskComplete" | "taskGraphComplete" | "taskError"
+  EventName, "taskPending" | "taskProcessing" | "taskComplete" | "taskGraphComplete" | "taskError" | "taskCancelled"
 >
 
 export const supportedEventNames: Set<SupportedEventName> = new Set(
-  ["taskPending", "taskProcessing", "taskComplete", "taskGraphComplete", "taskError"],
+  ["taskPending", "taskProcessing", "taskComplete", "taskGraphComplete", "taskError", "taskCancelled"],
 )
 
 export type WsEventMessage = ServerWebsocketMessage & {

diff --git a/dashboard/src/styles/variables.ts b/dashboard/src/styles/variables.ts
@@ -94,4 +94,11 @@ export const colors = {
       },
     },
   },
+  taskState: {
+    cancelled: "#BBB",
+    pending: "#ed83cc",
+    processing: "#ed83cc",
+    ready: "#66ffcc",
+    error: "red",
+  },
 }