coder · BrunoQuaresma · Oct 23, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -2179,6 +2179,13 @@ class ApiMethods {
 	) => {
 		await this.axios.post<void>("/api/v2/users/otp/change-password", req);
 	};
+
+	workspaceBuildTimings = async (workspaceBuildId: string) => {
+		const res = await this.axios.get<TypesGen.WorkspaceBuildTimings>(
+			`/api/v2/workspacebuilds/${workspaceBuildId}/timings`,
+		);
+		return res.data;
+	};
 }
 
 // This is a hard coded CSRF token/cookie pair for local development. In prod,

diff --git a/site/src/api/queries/workspaceBuilds.ts b/site/src/api/queries/workspaceBuilds.ts
@@ -56,3 +56,10 @@ export const infiniteWorkspaceBuilds = (
 		},
 	};
 };
+
+export const workspaceBuildTimings = (workspaceBuildId: string) => {
+	return {
+		queryKey: ["workspaceBuilds", workspaceBuildId, "timings"],
+		queryFn: () => API.workspaceBuildTimings(workspaceBuildId),
+	};
+};
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx
@@ -0,0 +1,105 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import { type ButtonHTMLAttributes, type HTMLProps, forwardRef } from "react";
+
+export type BarColors = {
+	stroke: string;
+	fill: string;
+};
+
+type BaseBarProps<T> = Omit<T, "size" | "color"> & {
+	/**
+	 * Scale used to determine the width based on the given value.
+	 */
+	scale: number;
+	value: number;
+	/**
+	 * The X position of the bar component.
+	 */
+	offset: number;
+	/**
+	 * Color scheme for the bar. If not passed the default gray color will be
+	 * used.
+	 */
+	colors?: BarColors;
+};
+
+type BarProps = BaseBarProps<HTMLProps<HTMLDivElement>>;
+
+export const Bar = forwardRef<HTMLDivElement, BarProps>(
+	({ colors, scale, value, offset, ...htmlProps }, ref) => {
+		return (
+			<div
+				css={barCSS({ colors, scale, value, offset })}
+				{...htmlProps}
+				ref={ref}
+			/>
+		);
+	},
+);
+
+type ClickableBarProps = BaseBarProps<ButtonHTMLAttributes<HTMLButtonElement>>;
+
+export const ClickableBar = forwardRef<HTMLButtonElement, ClickableBarProps>(
+	({ colors, scale, value, offset, ...htmlProps }, ref) => {
+		return (
+			<button
+				type="button"
+				css={[...barCSS({ colors, scale, value, offset }), styles.clickable]}
+				{...htmlProps}
+				ref={ref}
+			/>
+		);
+	},
+);
+
+export const barCSS = ({
+	scale,
+	value,
+	colors,
+	offset,
+}: BaseBarProps<unknown>) => {
+	return [
+		styles.bar,
+		{
+			width: `calc((var(--x-axis-width) * ${value}) / ${scale})`,
+			backgroundColor: colors?.fill,
+			borderColor: colors?.stroke,
+			marginLeft: `calc((var(--x-axis-width) * ${offset}) / ${scale})`,
+		},
+	];
+};
+
+const styles = {
+	bar: (theme) => ({
+		border: "1px solid",
+		borderColor: theme.palette.divider,
+		backgroundColor: theme.palette.background.default,
+		borderRadius: 8,
+		// The bar should fill the row height.
+		height: "inherit",
+		display: "flex",
+		padding: 7,
+		minWidth: 24,
+		// Increase hover area
+		position: "relative",
+		"&::after": {
+			content: '""',
+			position: "absolute",
+			top: -2,
+			right: -8,
+			bottom: -2,
+			left: -8,
+		},
+	}),
+	clickable: {
+		cursor: "pointer",
+		// We need to make the bar width at least 34px to allow the "..." icons to be displayed.
+		// The calculation is border * 1 + side paddings * 2 + icon width (which is 18px)
+		minWidth: 34,
+
+		"&:focus, &:hover, &:active": {
+			outline: "none",
+			borderColor: "#38BDF8",
+		},
+	},
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx
@@ -0,0 +1,73 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import MoreHorizOutlined from "@mui/icons-material/MoreHorizOutlined";
+import { type FC, useEffect, useRef, useState } from "react";
+
+const spaceBetweenBlocks = 4;
+const moreIconSize = 18;
+const blockSize = 20;
+
+type BlocksProps = {
+	count: number;
+};
+
+export const Blocks: FC<BlocksProps> = ({ count }) => {
+	const [availableWidth, setAvailableWidth] = useState<number>(0);
+	const blocksRef = useRef<HTMLDivElement>(null);
+
+	// Fix: When using useLayoutEffect, Chromatic fails to calculate the right width.
+	useEffect(() => {
+		if (availableWidth || !blocksRef.current) {
+			return;
+		}
+		setAvailableWidth(blocksRef.current.clientWidth);
+	}, [availableWidth]);
+
+	const totalSpaceBetweenBlocks = (count - 1) * spaceBetweenBlocks;
+	const necessarySize = blockSize * count + totalSpaceBetweenBlocks;
+	const hasSpacing = necessarySize <= availableWidth;
+	const nOfPossibleBlocks = Math.floor(
+		(availableWidth - moreIconSize) / (blockSize + spaceBetweenBlocks),
+	);
+	const nOfBlocks = hasSpacing ? count : nOfPossibleBlocks;
+
+	return (
+		<div ref={blocksRef} css={styles.blocks}>
+			{Array.from({ length: nOfBlocks }, (_, i) => i + 1).map((n) => (
+				<div key={n} css={styles.block} style={{ minWidth: blockSize }} />
+			))}
+			{!hasSpacing && (
+				<div css={styles.more}>
+					<MoreHorizOutlined />
+				</div>
+			)}
+		</div>
+	);
+};
+
+const styles = {
+	blocks: {
+		display: "flex",
+		width: "100%",
+		height: "100%",
+		gap: spaceBetweenBlocks,
+		alignItems: "center",
+	},
+	block: {
+		borderRadius: 4,
+		height: 18,
+		backgroundColor: "#082F49",
+		border: "1px solid #38BDF8",
+		flexShrink: 0,
+		flex: 1,
+	},
+	more: {
+		color: "#38BDF8",
+		lineHeight: 0,
+		flexShrink: 0,
+		flex: 1,
+
+		"& svg": {
+			fontSize: moreIconSize,
+		},
+	},
+} satisfies Record<string, Interpolation<Theme>>;