Merge status checking from workspace page

kylecarbs · kylecarbs · commit fccacfef8656 · 2022-05-16T20:30:25.000Z
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
 import * as TypesGen from "../../api/typesGenerated"
-import { WorkspaceStatus } from "../../pages/WorkspacePage/WorkspacePage"
+import { WorkspaceStatus } from "../../util/workspace"
 import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import { WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"
diff --git a/site/src/components/WorkspaceStatusBar/WorkspaceStatusBar.tsx b/site/src/components/WorkspaceStatusBar/WorkspaceStatusBar.tsx
@@ -21,6 +21,8 @@ export const Language = {
   stopped: "Stopped",
   starting: "Building",
   stopping: "Stopping",
+  canceled: "Canceled",
+  queued: "Queued",
   error: "Build Failed",
   loading: "Loading Status",
   deleting: "Deleting",
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -7,19 +7,8 @@ import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { Workspace } from "../../components/Workspace/Workspace"
 import { firstOrItem } from "../../util/array"
+import { getWorkspaceStatus } from "../../util/workspace"
 import { XServiceContext } from "../../xServices/StateContext"
-import { selectWorkspaceStatus } from "../../xServices/workspace/workspaceSelectors"
-
-export type WorkspaceStatus =
-  | "started"
-  | "starting"
-  | "stopped"
-  | "stopping"
-  | "error"
-  | "loading"
-  | "deleting"
-  | "deleted"
-  | "canceling"
 
 export const WorkspacePage: React.FC = () => {
   const { workspace: workspaceQueryParam } = useParams()
@@ -29,7 +18,9 @@ export const WorkspacePage: React.FC = () => {
   const [workspaceState, workspaceSend] = useActor(xServices.workspaceXService)
   const { workspace, template, organization, getWorkspaceError, getTemplateError, getOrganizationError } =
     workspaceState.context
-  const workspaceStatus = useSelector(xServices.workspaceXService, selectWorkspaceStatus)
+  const workspaceStatus = useSelector(xServices.workspaceXService, (state) => {
+    return getWorkspaceStatus(state.context.workspace?.latest_build)
+  })
 
   /**
    * Get workspace, template, and organization on mount and whenever workspaceId changes.
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -18,6 +18,7 @@ import { WorkspaceBuild } from "../../api/typesGenerated"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { firstLetter } from "../../util/firstLetter"
+import { getWorkspaceStatus } from "../../util/workspace"
 
 dayjs.extend(relativeTime)
 
@@ -106,42 +107,50 @@ export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) =>
 const getStatus = (theme: Theme, build: WorkspaceBuild): JSX.Element => {
   let status = ""
   let color = ""
-  const inProgress = build.job.status === "running"
-  switch (build.job.status) {
-    case "running":
-    case "succeeded":
-      switch (build.transition) {
-        case "start":
-          color = theme.palette.success.main
-          status = inProgress ? "⦿ Starting" : "⦿ Running"
-          break
-        case "stop":
-          color = theme.palette.text.secondary
-          status = inProgress ? "◍ Stopping" : "◍ Stopped"
-          break
-        case "delete":
-          color = theme.palette.text.secondary
-          status = inProgress ? "⦸ Deleting" : "⦸ Deleted"
-          break
-      }
+
+  switch (getWorkspaceStatus(build)) {
+    case "started":
+      color = theme.palette.success.main
+      status = "⦿ Running"
       break
-    case "canceled":
+    case "starting":
+      color = theme.palette.success.main
+      status = "⦿ Starting"
+      break
+    case "stopping":
       color = theme.palette.text.secondary
-      status = "◍ Canceled"
+      status = "◍ Stopping"
+      break
+    case "stopped":
+      color = theme.palette.text.secondary
+      status = "◍ Stopped"
+      break
+    case "deleting":
+      color = theme.palette.text.secondary
+      status = "⦸ Deleting"
+      break
+    case "deleted":
+      color = theme.palette.text.secondary
+      status = "⦸ Deleted"
       break
     case "canceling":
-      color = theme.palette.warning.main
+      color = theme.palette.warning.light
       status = "◍ Canceling"
       break
-    case "failed":
+    case "canceled":
+      color = theme.palette.text.secondary
+      status = "◍ Canceled"
+      break
+    case "error":
       color = theme.palette.error.main
       status = "ⓧ Failed"
       break
-    case "pending":
+    case "queued":
       color = theme.palette.text.secondary
       status = "◍ Queued"
       break
   }
+
   return <span style={{ color: color }}>{status}</span>
 }
 
diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts
@@ -1,7 +1,18 @@
-import { State } from "xstate"
-import { WorkspaceBuildTransition } from "../../api/types"
-import { WorkspaceStatus } from "../../pages/WorkspacePage/WorkspacePage"
-import { WorkspaceContext, WorkspaceEvent } from "./workspaceXService"
+import { WorkspaceBuildTransition } from "../api/types"
+import { WorkspaceBuild } from "../api/typesGenerated"
+
+export type WorkspaceStatus =
+  | "queued"
+  | "started"
+  | "starting"
+  | "stopped"
+  | "stopping"
+  | "error"
+  | "loading"
+  | "deleting"
+  | "deleted"
+  | "canceled"
+  | "canceling"
 
 const inProgressToStatus: Record<WorkspaceBuildTransition, WorkspaceStatus> = {
   start: "starting",
@@ -15,22 +26,23 @@ const succeededToStatus: Record<WorkspaceBuildTransition, WorkspaceStatus> = {
   delete: "deleted",
 }
 
-export const selectWorkspaceStatus = (state: State<WorkspaceContext, WorkspaceEvent>): WorkspaceStatus => {
-  const transition = state.context.workspace?.latest_build.transition as WorkspaceBuildTransition
-  const jobStatus = state.context.workspace?.latest_build.job.status
+// Converts a workspaces status to a human-readable form.
+export const getWorkspaceStatus = (workspaceBuild?: WorkspaceBuild): WorkspaceStatus => {
+  const transition = workspaceBuild?.transition as WorkspaceBuildTransition
+  const jobStatus = workspaceBuild?.job.status
   switch (jobStatus) {
     case undefined:
       return "loading"
     case "succeeded":
       return succeededToStatus[transition]
     case "pending":
-      return inProgressToStatus[transition]
+      return "queued"
     case "running":
       return inProgressToStatus[transition]
     case "canceling":
       return "canceling"
     case "canceled":
-      return "error"
+      return "canceled"
     case "failed":
       return "error"
   }
