fix(dashboard): add taskError event + small ui tweaks

I accidentally removed the taskError type in a previous commit.
garden-io · Apr 30, 2019 · d308b89 · d308b89
1 parent b8bd507
commit d308b89
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 19 deletions.
diff --git a/dashboard/src/components/graph/graph.scss b/dashboard/src/components/graph/graph.scss
@@ -38,10 +38,6 @@
     cursor: pointer;
   }
 
-  .label-container {
-    cursor: pointer;
-  }
-
   div.node-container {
     text-align: center;
     padding: 1rem;

diff --git a/dashboard/src/components/graph/index.tsx b/dashboard/src/components/graph/index.tsx
@@ -9,7 +9,7 @@
 import cls from "classnames"
 import { css } from "emotion/macro"
 import React, { Component, ChangeEvent } from "react"
-import styled from "@emotion/styled/macro"
+import styled from "@emotion/styled"
 import { capitalize, uniq } from "lodash"
 import * as d3 from "d3"
 import dagreD3 from "dagre-d3"
@@ -18,13 +18,12 @@ import Card from "../card"
 
 import "./graph.scss"
 import { colors, fontMedium } from "../../styles/variables"
-import Spinner from "../spinner"
+import Spinner, { SpinnerProps } from "../spinner"
 import CheckBox from "../checkbox"
 import { SelectGraphNode } from "../../context/ui"
 import {
   WsEventMessage,
   SupportedEventName,
-  supportedEventNames,
 } from "../../context/events"
 import { Events } from "garden-cli/src/events"
 import { Extends } from "garden-cli/src/util/util"
@@ -50,14 +49,16 @@ export interface Graph {
 }
 
 // FIXME: We shouldn't repeat the keys for both the type and the set below
-type TaskNodeEventName = Extends<SupportedEventName, "taskPending" | "taskProcessing" | "taskComplete">
+type TaskNodeEventName = Extends<SupportedEventName, "taskPending" | "taskProcessing" | "taskComplete" | "taskError">
 
 type WsTaskNodeMessage = WsEventMessage & {
   name: TaskNodeEventName,
   payload: Events[TaskNodeEventName],
 }
 
-const taskNodeEventNames: Set<TaskNodeEventName> = new Set(["taskPending", "taskProcessing", "taskComplete"])
+const taskNodeEventNames: Set<TaskNodeEventName> = new Set(
+  ["taskPending", "taskProcessing", "taskComplete", "taskError"],
+)
 
 /**
  * Type guard to check whether WsEventMessage is of type WsTaskNodeMessage
@@ -205,7 +206,7 @@ const Status = styled.p`
   colors: grey;
 `
 
-const ProcessSpinner = styled(Spinner)`
+const ProcessSpinner = styled<any, SpinnerProps>(Spinner)`
   margin: 16px 0 0 20px;
 `
 
@@ -321,7 +322,7 @@ class Chart extends Component<Props, State> {
 
   clearClasses(el: HTMLElement) {
     // we use the event name as the class name
-    for (const name of supportedEventNames) {
+    for (const name of taskNodeEventNames) {
       el.classList.remove(name)
     }
   }
@@ -336,7 +337,7 @@ class Chart extends Component<Props, State> {
         const nodeEl = document.getElementById(node.id)
         if (nodeEl) {
           this.clearClasses(nodeEl)
-          if (supportedEventNames.has(message.name)) {
+          if (taskNodeEventNames.has(message.name)) {
             nodeEl.classList.add(message.name) // we use the event name as the class name
           }
         }
@@ -354,7 +355,7 @@ class Chart extends Component<Props, State> {
     if (message && message.name !== "taskGraphComplete") {
       status = "Processing..."
       spinner = (
-        <ProcessSpinner background={colors.gardenWhite} fontSize="2px" />
+        <ProcessSpinner background={colors.gardenWhite} size="2rem" />
       )
     }
 

diff --git a/dashboard/src/components/spinner.tsx b/dashboard/src/components/spinner.tsx
@@ -6,17 +6,23 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import styled from "@emotion/styled/macro"
+import styled from "@emotion/styled"
 
 import { colors } from "../styles/variables"
 
+export interface SpinnerProps {
+  fontSize?: string
+  size?: string
+  background?: string
+}
+
 // From https://projects.lukehaas.me/css-loaders/
-export default styled.div`
+const Spinner = styled<any, SpinnerProps>("div")`
   font-size: ${props => props.fontSize || "6px"};
   margin: 50px auto;
   text-indent: -9999em;
-  width: 11em;
-  height: 11em;
+  width: ${props => props.size || "4.5rem"};
+  height: ${props => props.size || "4.5rem"};
   border-radius: 50%;
   background: ${colors.gardenPink};
   background: linear-gradient(to right, ${colors.gardenPink} 10%, ${colors.gardenPinkRgba} 42%);
@@ -70,3 +76,5 @@ export default styled.div`
     }
   }
 `
+
+export default Spinner
diff --git a/dashboard/src/containers/test-result-node-info.tsx b/dashboard/src/containers/test-result-node-info.tsx
@@ -33,6 +33,7 @@ const Term = styled.div`
   padding: 1rem;
 `
 const Code = styled.code`
+  font-size: 0.8rem;
   word-break: break-word;
 `
 

diff --git a/dashboard/src/context/events.tsx b/dashboard/src/context/events.tsx
@@ -17,11 +17,11 @@ import { Extends } from "garden-cli/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"
+  EventName, "taskPending" | "taskProcessing" | "taskComplete" | "taskGraphComplete" | "taskError"
 >
 
 export const supportedEventNames: Set<SupportedEventName> = new Set(
-  ["taskPending", "taskProcessing", "taskComplete", "taskGraphComplete"],
+  ["taskPending", "taskProcessing", "taskComplete", "taskGraphComplete", "taskError"],
 )
 
 export type WsEventMessage = ServerWebsocketMessage & {