refactor: support unhealthy on workspace status indicator

BrunoQuaresma · BrunoQuaresma · commit adb120ee06b8 · 2025-05-20T21:12:30.000Z
diff --git a/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.stories.tsx b/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.stories.tsx
@@ -27,6 +27,18 @@ export const Running: Story = {
 	},
 };
 
+export const Unhealthy: Story = {
+	args: {
+		workspace: {
+			...createWorkspaceWithStatus("running"),
+			health: {
+				healthy: false,
+				failing_agents: [],
+			},
+		},
+	},
+};
+
 export const Stopped: Story = {
 	args: {
 		workspace: createWorkspaceWithStatus("stopped"),
diff --git a/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx b/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx
@@ -4,6 +4,12 @@ import {
 	StatusIndicatorDot,
 	type StatusIndicatorProps,
 } from "components/StatusIndicator/StatusIndicator";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import type { FC } from "react";
 import type React from "react";
 import {
@@ -32,18 +38,41 @@ export const WorkspaceStatusIndicator: FC<WorkspaceStatusIndicatorProps> = ({
 	workspace,
 	children,
 }) => {
-	const { text, type } = getDisplayWorkspaceStatus(
+	let { text, type } = getDisplayWorkspaceStatus(
 		workspace.latest_build.status,
 		workspace.latest_build.job,
 	);
 
-	return (
+	if (!workspace.health.healthy) {
+		type = "warning";
+	}
+
+	const statusIndicator = (
 		<StatusIndicator variant={variantByStatusType[type]}>
 			<StatusIndicatorDot />
-			<span>
-				<span className="sr-only">Workspace status:</span> {text}
-			</span>
+			<span className="sr-only">Workspace status:</span> {text}
 			{children}
 		</StatusIndicator>
 	);
+
+	if (workspace.health.healthy) {
+		return statusIndicator;
+	}
+
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<StatusIndicator variant={variantByStatusType[type]}>
+						<StatusIndicatorDot />
+						<span className="sr-only">Workspace status:</span> {text}
+						{children}
+					</StatusIndicator>
+				</TooltipTrigger>
+				<TooltipContent>
+					Your workspace is running but some agents are unhealthy.
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	);
 };
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -290,6 +290,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 							</TableCell>
 
 							<WorkspaceStatusCell workspace={workspace} />
+
 							<WorkspaceActionsCell
 								workspace={workspace}
 								onActionSuccess={onActionSuccess}
@@ -395,14 +396,6 @@ const WorkspaceStatusCell: FC<WorkspaceStatusCellProps> = ({ workspace }) => {
 		<TableCell>
 			<div className="flex flex-col">
 				<WorkspaceStatusIndicator workspace={workspace}>
-					{workspace.latest_build.status === "running" &&
-						!workspace.health.healthy && (
-							<InfoTooltip
-								type="warning"
-								title="Workspace is unhealthy"
-								message="Your workspace is running but some agents are unhealthy."
-							/>
-						)}
 					{workspace.dormant_at && (
 						<WorkspaceDormantBadge workspace={workspace} />
 					)}
