refactor: Update status for build logs (#2087)

site/src/components/BuildsTable/BuildsTable.tsx

@@ -9,7 +9,7 @@ import useTheme from "@material-ui/styles/useTheme"
 import { FC } from "react"
 import { useNavigate } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
-import { displayWorkspaceBuildDuration, getDisplayStatus } from "../../util/workspace"
+import { displayWorkspaceBuildDuration, getDisplayWorkspaceBuildStatus } from "../../util/workspace"
 import { EmptyState } from "../EmptyState/EmptyState"
 import { TableLoader } from "../TableLoader/TableLoader"
 
@@ -47,7 +47,7 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
         {isLoading && <TableLoader />}
         {builds &&
           builds.map((build) => {
-            const status = getDisplayStatus(theme, build)
+            const status = getDisplayWorkspaceBuildStatus(theme, build)
 
             const navigateToBuildPage = () => {
               navigate(`/builds/${build.id}`)

site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx

@@ -5,7 +5,7 @@ import { Link as RouterLink } from "react-router-dom"
 import { WorkspaceBuild } from "../../api/typesGenerated"
 import { CardRadius, MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
-import { displayWorkspaceBuildDuration, getDisplayStatus } from "../../util/workspace"
+import { displayWorkspaceBuildDuration, getDisplayWorkspaceBuildStatus } from "../../util/workspace"
 
 export interface WorkspaceBuildStatsProps {
   build: WorkspaceBuild
@@ -14,7 +14,7 @@ export interface WorkspaceBuildStatsProps {
 export const WorkspaceBuildStats: FC<WorkspaceBuildStatsProps> = ({ build }) => {
   const styles = useStyles()
   const theme = useTheme()
-  const status = getDisplayStatus(theme, build)
+  const status = getDisplayWorkspaceBuildStatus(theme, build)
 
   return (
     <div className={styles.stats}>

site/src/util/workspace.ts

@@ -136,6 +136,56 @@ export const getDisplayStatus = (
   throw new Error("unknown status " + status)
 }
 
+export const DisplayWorkspaceBuildStatusLanguage = {
+  succeeded: "Succeeded",
+  pending: "Pending",
+  running: "Running",
+  canceling: "Canceling",
+  canceled: "Canceled",
+  failed: "Failed",
+}
+
+export const getDisplayWorkspaceBuildStatus = (
+  theme: Theme,
+  build: TypesGen.WorkspaceBuild,
+): {
+  color: string
+  status: string
+} => {
+  switch (build.job.status) {
+    case "succeeded":
+      return {
+        color: theme.palette.success.main,
+        status: `⦿ ${DisplayWorkspaceBuildStatusLanguage.succeeded}`,
+      }
+    case "pending":
+      return {
+        color: theme.palette.text.secondary,
+        status: `⦿ ${DisplayWorkspaceBuildStatusLanguage.pending}`,
+      }
+    case "running":
+      return {
+        color: theme.palette.primary.main,
+        status: `⦿ ${DisplayWorkspaceBuildStatusLanguage.running}`,
+      }
+    case "failed":
+      return {
+        color: theme.palette.text.secondary,
+        status: `⦸ ${DisplayWorkspaceBuildStatusLanguage.failed}`,
+      }
+    case "canceling":
+      return {
+        color: theme.palette.warning.light,
+        status: `◍ ${DisplayWorkspaceBuildStatusLanguage.canceling}`,
+      }
+    case "canceled":
+      return {
+        color: theme.palette.text.secondary,
+        status: `◍ ${DisplayWorkspaceBuildStatusLanguage.canceled}`,
+      }
+  }
+}
+
 export const getWorkspaceBuildDurationInSeconds = (build: TypesGen.WorkspaceBuild): number | undefined => {
   const isCompleted = build.job.started_at && build.job.completed_at