Oct 23, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 20, 2024 · Sep 23, 2024
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 ) => {
 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
 },
 };
 };

 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
 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
 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>>;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -56,3 +56,10 @@ export const infiniteWorkspaceBuilds = (
		},
		};
		};

		export const workspaceBuildTimings = (workspaceBuildId: string) => {
		return {
		queryKey: ["workspaceBuilds", workspaceBuildId, "timings"],
		queryFn: () => API.workspaceBuildTimings(workspaceBuildId),
		};
		};
Original file line number	Diff line number	Diff line change
		@@ -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.
Comment on lines +20 to +21 Copy link Member code-asherOct 18, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I kept thinking the gray box was a checkbox 😆 I wonder if we could change the shape or default color a bit, but then again I might be the only one dumb enough not to realize it was the legend color. Copy link CollaboratorAuthor BrunoQuaresmaOct 21, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. lol,@chrifro wdyt? Copy link chrifroOct 23, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. You are referring to the "state refresh" color right? We could totally change that color. Either to orange if we also want to draw more attention to the "state refresh" orange-bg: #431407 orange-stroke: #FDBA74 (we use the same color already on different views) or if we want to keep it more subtle to grey grey-bg: #18181B grey-stroke: #71717A something to keep in mind: the colors will likely slightly change as part of#14780. Then the difference between the newly introduced grey colors and the bg will be more obvious (see screenshot). Copy link Member code-asherOct 29, 2024• edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Sorry for the late reply, yes that is what I meant! When there are two or more, it is pretty obvious they are a legend, but with just one I thought it was supposed to be a checkbox, in particular the dark or grey ones. This might just be me being dumb though.
		*/
		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": {
Copy link Member code-asherOct 18, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Neat trick! BrunoQuaresma reacted with heart emoji
		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>>;
Original file line number	Diff line number	Diff line change
		@@ -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 }} />
		))}
Comment on lines +35 to +37 Copy link Member code-asherOct 18, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Hopefully this is the right spot, but one thing that threw me off is that my template has five resources, and I saw five blue blocks, but only three of them show up in the chart when I click into the bar.Edit: I think because we filter Coder resources in the sub-chart but not the top-level chart. It was also a little surprising that the blue blocks were all even width instead of matching up with their timings. Copy link CollaboratorAuthor BrunoQuaresmaOct 21, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Fixed!
		{!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>>;