feat(site): add warning for unhealthy workspace (#8422)

site/src/components/Workspace/Workspace.stories.tsx

@@ -234,6 +234,20 @@ export const CancellationError: Story = {
   },
 }
 
+export const Unhealthy: Story = {
+  args: {
+    ...Running.args,
+    workspace: {
+      ...Mocks.MockWorkspace,
+      latest_build: { ...Mocks.MockWorkspace.latest_build, status: "running" },
+      health: {
+        healthy: false,
+        failing_agents: [],
+      },
+    },
+  },
+}
+
 function makeFailedBuildLogs(): ProvisionerJobLog[] {
   return [
     {

site/src/components/Workspace/Workspace.tsx

@@ -225,6 +225,19 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
         >
           {buildError}
           {cancellationError}
+          {workspace.latest_build.status === "running" &&
+            !workspace.health.healthy && (
+              <Alert severity="warning">
+                <AlertTitle>Workspace is unhealthy</AlertTitle>
+                <AlertDetail>
+                  Your workspace is running but{" "}
+                  {workspace.health.failing_agents.length > 1
+                    ? `${workspace.health.failing_agents.length} agents are unhealthy`
+                    : `1 agent is unhealthy`}
+                  .
+                </AlertDetail>
+              </Alert>
+            )}
 
           <ChooseOne>
             <Cond condition={workspace.latest_build.status === "deleted"}>

site/src/components/WorkspacesTable/WorkspacesRow.tsx

@@ -13,6 +13,14 @@ import { OutdatedHelpTooltip } from "components/Tooltips/OutdatedHelpTooltip"
 import { Avatar } from "components/Avatar/Avatar"
 import { Stack } from "components/Stack/Stack"
 import { useClickableTableRow } from "hooks/useClickableTableRow"
+import {
+  HelpTooltip,
+  HelpTooltipText,
+  HelpTooltipTitle,
+} from "components/Tooltips/HelpTooltip"
+import InfoIcon from "@mui/icons-material/InfoOutlined"
+import { colors } from "theme/colors"
+import Box from "@mui/material/Box"
 
 export const WorkspacesRow: FC<{
   workspace: Workspace
@@ -62,7 +70,11 @@ export const WorkspacesRow: FC<{
       </TableCell>
 
       <TableCell>
-        <WorkspaceStatusBadge workspace={workspace} />
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <WorkspaceStatusBadge workspace={workspace} />
+          {workspace.latest_build.status === "running" &&
+            !workspace.health.healthy && <UnhealthyTooltip />}
+        </Box>
       </TableCell>
 
       <TableCell>
@@ -74,6 +86,25 @@ export const WorkspacesRow: FC<{
   )
 }
 
+export const UnhealthyTooltip = () => {
+  const styles = useStyles()
+
+  return (
+    <HelpTooltip
+      size="small"
+      icon={InfoIcon}
+      iconClassName={styles.unhealthyIcon}
+      buttonClassName={styles.unhealthyButton}
+    >
+      <HelpTooltipTitle>Workspace is unhealthy</HelpTooltipTitle>
+      <HelpTooltipText>
+        Your workspace is running but some agents had failed during
+        initialization.
+      </HelpTooltipText>
+    </HelpTooltip>
+  )
+}
+
 const useStyles = makeStyles((theme) => ({
   arrowRight: {
     color: theme.palette.text.secondary,
@@ -85,4 +116,16 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     paddingLeft: theme.spacing(2),
   },
+
+  unhealthyIcon: {
+    color: colors.yellow[5],
+  },
+
+  unhealthyButton: {
+    opacity: 1,
+
+    "&:hover": {
+      opacity: 1,
+    },
+  },
 }))

site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx

@@ -145,6 +145,20 @@ export const NoSearchResults: Story = {
   },
 }
 
+export const UnhealthyWorkspace: Story = {
+  args: {
+    workspaces: [
+      {
+        ...createWorkspace("running"),
+        health: {
+          healthy: false,
+          failing_agents: [],
+        },
+      },
+    ],
+  },
+}
+
 export const Error: Story = {
   args: {
     error: mockApiError({ message: "Something went wrong" }),