Add failed icon

coder · BrunoQuaresma · Oct 23, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024
commit 8cc7eef74fea73280a0d2bd60338f9ab1b24d3bc
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx
@@ -79,7 +79,7 @@ const styles = {
 		// The bar should fill the row height.
 		height: "inherit",
 		display: "flex",
-		padding: 0,
+		padding: 7,
 		minWidth: 8,
 	}),
 	clickable: {

diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/BarBlocks.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/BarBlocks.tsx
@@ -1,8 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import MoreHorizOutlined from "@mui/icons-material/MoreHorizOutlined";
-import { type FC, useEffect, useRef, useState } from "react";
+import { type FC, useLayoutEffect, useRef, useState } from "react";
 
-const sidePadding = 8;
 const spaceBetweenBlocks = 4;
 const moreIconSize = 18;
 const blockSize = 20;
@@ -12,26 +11,21 @@ type BarBlocksProps = {
 };
 
 export const BarBlocks: FC<BarBlocksProps> = ({ count }) => {
-	const [parentWidth, setParentWidth] = useState<number>();
+	const [availableWidth, setAvailableWidth] = useState<number>(0);
 	const blocksRef = useRef<HTMLDivElement>(null);
 
-	useEffect(() => {
-		if (!blocksRef.current || parentWidth) {
+	useLayoutEffect(() => {
+		if (availableWidth || !blocksRef.current) {
 			return;
 		}
-		const parentEl = blocksRef.current.parentElement;
-		if (!parentEl) {
-			throw new Error("BarBlocks must be a child of a Bar");
-		}
-		setParentWidth(parentEl.clientWidth);
-	}, [parentWidth]);
+		setAvailableWidth(blocksRef.current.clientWidth);
+	}, [availableWidth]);
 
 	const totalSpaceBetweenBlocks = (count - 1) * spaceBetweenBlocks;
-	const freeSize = parentWidth ? parentWidth - sidePadding * 2 : 0;
 	const necessarySize = blockSize * count + totalSpaceBetweenBlocks;
-	const hasSpacing = necessarySize <= freeSize;
+	const hasSpacing = necessarySize <= availableWidth;
 	const nOfPossibleBlocks = Math.floor(
-		(freeSize - moreIconSize) / (blockSize + spaceBetweenBlocks),
+		(availableWidth - moreIconSize) / (blockSize + spaceBetweenBlocks),
 	);
 	const nOfBlocks = hasSpacing ? count : nOfPossibleBlocks;
 
@@ -54,13 +48,12 @@ const styles = {
 		display: "flex",
 		width: "100%",
 		height: "100%",
-		padding: sidePadding,
 		gap: spaceBetweenBlocks,
 		alignItems: "center",
 	},
 	block: {
 		borderRadius: 4,
-		height: 16,
+		height: 18,
 		backgroundColor: "#082F49",
 		border: "1px solid #38BDF8",
 		flexShrink: 0,

diff --git a/site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx b/site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx
@@ -22,6 +22,7 @@ import {
 	mergeTimeRanges,
 	type TimeRange,
 } from "./Chart/utils";
+import { ErrorSharp } from "@mui/icons-material";
 
 export type StageCategory = {
 	name: string;
@@ -111,6 +112,11 @@ type StageTiming = {
 	 * be undefined if a stage has no timing data.
 	 */
 	range: TimeRange | undefined;
+	/**
+	 * Display an error icon within the bar to indicate when a stage has failed.
+	 * This is used in the agent scripts stage.
+	 */
+	error?: boolean;
 };
 
 export type StagesChartProps = {
@@ -196,6 +202,15 @@ export const StagesChart: FC<StagesChartProps> = ({
 														onSelectStage(t, category);
 													}}
 												>
+													{t.error && (
+														<ErrorSharp
+															css={{
+																fontSize: 18,
+																color: "#F87171",
+																marginRight: 4,
+															}}
+														/>
+													)}
 													<BarBlocks count={t.resources} />
 												</ClickableBar>
 											) : (

diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx
@@ -32,3 +32,10 @@ export default meta;
 type Story = StoryObj<typeof WorkspaceTimings>;
 
 export const Default: Story = {};
+
+const [first, ...others] = WorkspaceTimingsResponse.agent_script_timings;
+export const FailedScript: Story = {
+	args: {
+		agentScriptTimings: [{ ...first, status: "exit_failure" }, ...others],
+	},
+};
diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
@@ -42,6 +42,9 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 							name: s.name,
 							categoryID: s.categoryID,
 							resources: stageTimings.length,
+							error: stageTimings.some(
+								(t) => "status" in t && t.status === "exit_failure",
+							),
 						};
 					})}
 					onSelectStage={(t, category) => {