Jul 12, 2023 · Jul 11, 2023 · Jul 11, 2023 · Jul 12, 2023
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
  },
 }

 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 [
    {
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
        >
          {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"}>
diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx
 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
      </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>
  )
 }

 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,
    display: "flex",
    paddingLeft: theme.spacing(2),
  },

  unhealthyIcon: {
    color: colors.yellow[5],
  },

  unhealthyButton: {
    opacity: 1,

    "&:hover": {
      opacity: 1,
    },
  },
 }))
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
  },
 }

 export const UnhealthyWorkspace: Story = {
  args: {
    workspaces: [
      {
        ...createWorkspace("running"),
        health: {
          healthy: false,
          failing_agents: [],
        },
      },
    ],
  },
 }

 export const Error: Story = {
  args: {
    error: mockApiError({ message: "Something went wrong" }),
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 [
		{
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"}>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand DownExpand Up		@@ -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>
Expand All		@@ -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,
Expand All		@@ -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,
		},
		},
		}))
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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" }),
Expand Down