feat(site): add workspace health badge to workspace list

mafredri · mafredri · commit 597da97f27fb · 2023-07-10T10:53:30.000Z
Fixes #6461
diff --git a/site/src/components/WorkspaceHealthBadge/WorkspaceHealthBadge.stories.tsx b/site/src/components/WorkspaceHealthBadge/WorkspaceHealthBadge.stories.tsx
@@ -0,0 +1,99 @@
+import { Story } from "@storybook/react"
+import {
+  MockCanceledWorkspace,
+  MockCancelingWorkspace,
+  MockDeletedWorkspace,
+  MockDeletingWorkspace,
+  MockFailedWorkspace,
+  MockPendingWorkspace,
+  MockStartingWorkspace,
+  MockStoppedWorkspace,
+  MockStoppingWorkspace,
+  MockWorkspace,
+  MockBuildInfo,
+  MockEntitlementsWithScheduling,
+  MockExperiments,
+  MockAppearance,
+} from "testHelpers/entities"
+import {
+  WorkspaceHealthBadge,
+  WorkspaceHealthBadgeProps,
+} from "./WorkspaceHealthBadge"
+import { DashboardProviderContext } from "components/Dashboard/DashboardProvider"
+
+export default {
+  title: "components/WorkspaceHealthBadge",
+  component: WorkspaceHealthBadge,
+}
+
+const MockedAppearance = {
+  config: MockAppearance,
+  preview: false,
+  setPreview: () => null,
+  save: () => null,
+}
+
+const Template: Story<WorkspaceHealthBadgeProps> = (args) => (
+  <DashboardProviderContext.Provider
+    value={{
+      buildInfo: MockBuildInfo,
+      entitlements: MockEntitlementsWithScheduling,
+      experiments: MockExperiments,
+      appearance: MockedAppearance,
+    }}
+  >
+    <WorkspaceHealthBadge {...args} />
+  </DashboardProviderContext.Provider>
+)
+
+export const Running = Template.bind({})
+Running.args = {
+  workspace: MockWorkspace,
+}
+
+// TODO(mafredri): Healthyness mocks.
+
+export const Starting = Template.bind({})
+Starting.args = {
+  workspace: MockStartingWorkspace,
+}
+
+export const Stopped = Template.bind({})
+Stopped.args = {
+  workspace: MockStoppedWorkspace,
+}
+
+export const Stopping = Template.bind({})
+Stopping.args = {
+  workspace: MockStoppingWorkspace,
+}
+
+export const Deleting = Template.bind({})
+Deleting.args = {
+  workspace: MockDeletingWorkspace,
+}
+
+export const Deleted = Template.bind({})
+Deleted.args = {
+  workspace: MockDeletedWorkspace,
+}
+
+export const Canceling = Template.bind({})
+Canceling.args = {
+  workspace: MockCancelingWorkspace,
+}
+
+export const Canceled = Template.bind({})
+Canceled.args = {
+  workspace: MockCanceledWorkspace,
+}
+
+export const Failed = Template.bind({})
+Failed.args = {
+  workspace: MockFailedWorkspace,
+}
+
+export const Pending = Template.bind({})
+Pending.args = {
+  workspace: MockPendingWorkspace,
+}
diff --git a/site/src/components/WorkspaceHealthBadge/WorkspaceHealthBadge.tsx b/site/src/components/WorkspaceHealthBadge/WorkspaceHealthBadge.tsx
@@ -0,0 +1,30 @@
+import { Workspace } from "api/typesGenerated"
+import { Pill } from "components/Pill/Pill"
+import { FC, PropsWithChildren } from "react"
+import { ErrorIcon } from "components/Icons/ErrorIcon"
+import FavoriteIcon from "@mui/icons-material/Favorite"
+import { Maybe } from "components/Conditionals/Maybe"
+
+export type WorkspaceHealthBadgeProps = {
+  workspace: Workspace
+  className?: string
+}
+
+export const WorkspaceHealthBadge: FC<
+  PropsWithChildren<WorkspaceHealthBadgeProps>
+> = ({ workspace, className }) => {
+  return (
+    <Maybe
+      condition={["starting", "running", "stopping"].includes(
+        workspace.latest_build.status,
+      )}
+    >
+      <Pill
+        className={className}
+        icon={workspace.health.healthy ? <FavoriteIcon /> : <ErrorIcon />}
+        text={workspace.health.healthy ? "Healthy" : "Unhealthy"}
+        type={workspace.health.healthy ? "success" : "warning"}
+      />
+    </Maybe>
+  )
+}
diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx
@@ -13,6 +13,7 @@ import { OutdatedHelpTooltip } from "components/Tooltips/OutdatedHelpTooltip"
 import { Avatar } from "components/Avatar/Avatar"
 import { Stack } from "components/Stack/Stack"
 import { useClickableTableRow } from "hooks/useClickableTableRow"
+import { WorkspaceHealthBadge } from "components/WorkspaceHealthBadge/WorkspaceHealthBadge"
 
 export const WorkspacesRow: FC<{
   workspace: Workspace
@@ -65,6 +66,10 @@ export const WorkspacesRow: FC<{
         <WorkspaceStatusBadge workspace={workspace} />
       </TableCell>
 
+      <TableCell>
+        <WorkspaceHealthBadge workspace={workspace} />
+      </TableCell>
+
       <TableCell>
         <div className={styles.arrowCell}>
           <KeyboardArrowRight className={styles.arrowRight} />
diff --git a/site/src/components/WorkspacesTable/WorkspacesTable.tsx b/site/src/components/WorkspacesTable/WorkspacesTable.tsx
@@ -13,6 +13,7 @@ const Language = {
   template: "Template",
   lastUsed: "Last Used",
   status: "Status",
+  health: "Health",
 }
 
 export interface WorkspacesTableProps {
@@ -37,6 +38,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
             <TableCell width="25%">{Language.template}</TableCell>
             <TableCell width="20%">{Language.lastUsed}</TableCell>
             <TableCell width="15%">{Language.status}</TableCell>
+            <TableCell width="15%">{Language.health}</TableCell>
             <TableCell width="1%" />
           </TableRow>
         </TableHead>
