Oct 23, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 20, 2024 · Sep 23, 2024
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 { css } from "@emotion/css";
 import { useTheme, type Interpolation, type Theme } from "@emotion/react";
 import Tooltip from "@mui/material/Tooltip";
 import { forwardRef, type HTMLProps, type ReactNode } from "react";

 export type BarColor = {
 * The X position of the bar component.
 */
 x?: number;
 /**
 * The tooltip content for the bar.
 */
 tooltip?: ReactNode;
 };

 export const Bar = forwardRef<HTMLDivElement, BarProps>(
 ({ color, width, afterLabel, children, x, ...htmlProps }, ref) => {
 return (
 ({ color, width, afterLabel, children, x, tooltip, ...htmlProps }, ref) => {
 const theme = useTheme();
 const row = (
 <div
 ref={ref}
 css={[styles.root, { transform: `translateX(${x}px)` }]}
 css={[styles.row, { transform: `translateX(${x}px)` }]}
 {...htmlProps}
 >
 <button
 type="button"
 css={[
 styles.bar,
 { width, backgroundColor: color?.fill, borderColor: color?.border },
 {
 width,
 backgroundColor: color?.fill,
 borderColor: color?.border,
 },
 ]}
 disabled={htmlProps.disabled}
 aria-labelledby={htmlProps["aria-labelledby"]}
 {afterLabel}
 </div>
 );

 if (tooltip) {
 return (
 <Tooltip
 placement="top-start"
 classes={{
 tooltip: css({
 backgroundColor: theme.palette.background.default,
 border: `1px solid ${theme.palette.divider}`,
 width: 220,
 }),
 }}
 title={tooltip}
 >
 {row}
 </Tooltip>
 );
 }

 return row;
 },
 );

 const styles = {
 root: {
 row: {
 // Stack children horizontally for adjacent labels
 display: "flex",
 alignItems: "center",
 width: "fit-content",
 gap: 8,
 cursor: "pointer",
 },
 bar: (theme) => ({
 border: "1px solid",
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx
 import type { Interpolation, Theme } from "@emotion/react";
 import { XGrid } from "./XGrid";
 import { XAxis } from "./XAxis";
 import type { FC } from "react";
 import type { FC, ReactNode } from "react";
 import { TimingBlocks } from "./TimingBlocks";
 import {
 YAxis,
 */
 visible?: boolean;
 color?: BarColor;
 tooltip?: ReactNode;
 };

 // Extracts the 'startedAt' and 'endedAt' date fields from the main Timing type.
 const size = calcSize(durationTime(t));
 return (
 <Bar
 tooltip={t.tooltip}
 color={t.color}
 key={t.label}
 x={calcSize(offset)}
diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
 import ChevronRight from "@mui/icons-material/ChevronRight";
 import { YAxisSidePadding, YAxisWidth } from "./Chart/YAxis";
 import { SearchField } from "components/SearchField/SearchField";
 import { Link } from "react-router-dom";
 import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";

 // TODO: Export provisioning stages from the BE to the generated types.
 const provisioningStages = ["init", "plan", "graph", "apply"];
 visible: !isCoderResource,
 // Resource timings don't have inner timings
 childrenCount: 0,
 tooltip: <ProvisionerTooltip timing={t} />,
 ...extractDuration(t),
 } as Timing;
 });
 }
 };

 const ProvisionerTooltip: FC<{ timing: ProvisionerTiming }> = ({ timing }) => {
 return (
 <div css={styles.tooltip}>
 <span>{timing.source}</span>
 <span css={styles.tooltipResource}>{timing.resource}</span>
 <Link to="" css={styles.tooltipLink}>
 <OpenInNewOutlined />
 view template
 </Link>
 </div>
 );
 };

 const styles = {
 panelBody: {
 display: "flex",
 border: `1px solid ${theme.palette.divider}`,
 backgroundColor: theme.palette.background.default,
 }),
 tooltip: (theme) => ({
 display: "flex",
 flexDirection: "column",
 fontWeight: 500,
 fontSize: 12,
 color: theme.palette.text.secondary,
 }),
 tooltipResource: (theme) => ({
 color: theme.palette.text.primary,
 fontWeight: 600,
 marginTop: 4,
 display: "block",
 maxWidth: "100%",
 overflow: "hidden",
 textOverflow: "ellipsis",
 whiteSpace: "nowrap",
 }),
 tooltipLink: (theme) => ({
 color: "inherit",
 textDecoration: "none",
 display: "flex",
 alignItems: "center",
 gap: 4,
 marginTop: 8,

 "&:hover": {
 color: theme.palette.text.primary,
 },

 "& svg": {
 width: 12,
 height: 12,
 },
 }),
 } satisfies Record<string, Interpolation<Theme>>;
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,6 @@
		import type { Interpolation, Theme } from "@emotion/react";
		import { css } from "@emotion/css";
		import { useTheme, type Interpolation, type Theme } from "@emotion/react";
		import Tooltip from "@mui/material/Tooltip";
		import { forwardRef, type HTMLProps, type ReactNode } from "react";

		export type BarColor = {
Expand All		@@ -22,21 +24,30 @@ type BarProps = Omit<HTMLProps<HTMLDivElement>, "size" \| "color"> & {
		* The X position of the bar component.
		*/
		x?: number;
		/**
		* The tooltip content for the bar.
		*/
		tooltip?: ReactNode;
		};

		export const Bar = forwardRef<HTMLDivElement, BarProps>(
		({ color, width, afterLabel, children, x, ...htmlProps }, ref) => {
		return (
		({ color, width, afterLabel, children, x, tooltip, ...htmlProps }, ref) => {
		const theme = useTheme();
		const row = (
		<div
		ref={ref}
		css={[styles.root, { transform: `translateX(${x}px)` }]}
		css={[styles.row, { transform: `translateX(${x}px)` }]}
		{...htmlProps}
		>
		<button
		type="button"
		css={[
		styles.bar,
		{ width, backgroundColor: color?.fill, borderColor: color?.border },
		{
		width,
		backgroundColor: color?.fill,
		borderColor: color?.border,
		},
		]}
		disabled={htmlProps.disabled}
		aria-labelledby={htmlProps["aria-labelledby"]}
Expand All		@@ -46,16 +57,37 @@ export const Bar = forwardRef<HTMLDivElement, BarProps>(
		{afterLabel}
		</div>
		);

		if (tooltip) {
		return (
		<Tooltip
		placement="top-start"
		classes={{
		tooltip: css({
		backgroundColor: theme.palette.background.default,
		border: `1px solid ${theme.palette.divider}`,
		width: 220,
		}),
		}}
		title={tooltip}
		>
		{row}
		</Tooltip>
		);
		}

		return row;
		},
		);

		const styles = {
		root: {
		row: {
		// Stack children horizontally for adjacent labels
		display: "flex",
		alignItems: "center",
		width: "fit-content",
		gap: 8,
		cursor: "pointer",
		},
		bar: (theme) => ({
		border: "1px solid",
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import type { Interpolation, Theme } from "@emotion/react";
		import { XGrid } from "./XGrid";
		import { XAxis } from "./XAxis";
		import type { FC } from "react";
		import type { FC, ReactNode } from "react";
		import { TimingBlocks } from "./TimingBlocks";
		import {
		YAxis,
Expand DownExpand Up		@@ -40,6 +40,7 @@ export type Timing = Duration & {
		*/
		visible?: boolean;
		color?: BarColor;
		tooltip?: ReactNode;
		};

		// Extracts the 'startedAt' and 'endedAt' date fields from the main Timing type.
Expand DownExpand Up		@@ -128,6 +129,7 @@ export const Chart: FC<ChartProps> = ({ data, onBarClick }) => {
		const size = calcSize(durationTime(t));
		return (
		<Bar
		tooltip={t.tooltip}
		color={t.color}
		key={t.label}
		x={calcSize(offset)}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,6 +10,8 @@ import type { Interpolation, Theme } from "@emotion/react";
		import ChevronRight from "@mui/icons-material/ChevronRight";
		import { YAxisSidePadding, YAxisWidth } from "./Chart/YAxis";
		import { SearchField } from "components/SearchField/SearchField";
		import { Link } from "react-router-dom";
		import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";

		// TODO: Export provisioning stages from the BE to the generated types.
		const provisioningStages = ["init", "plan", "graph", "apply"];
Expand DownExpand Up		@@ -194,6 +196,7 @@ export const selectChartData = (
		visible: !isCoderResource,
		// Resource timings don't have inner timings
		childrenCount: 0,
		tooltip: <ProvisionerTooltip timing={t} />,
		...extractDuration(t),
		} as Timing;
		});
Expand All		@@ -208,6 +211,19 @@ export const selectChartData = (
		}
		};

		const ProvisionerTooltip: FC<{ timing: ProvisionerTiming }> = ({ timing }) => {
		return (
		<div css={styles.tooltip}>
		<span>{timing.source}</span>
		<span css={styles.tooltipResource}>{timing.resource}</span>
		<Link to="" css={styles.tooltipLink}>
		<OpenInNewOutlined />
		view template
		</Link>
		</div>
		);
		};

		const styles = {
		panelBody: {
		display: "flex",
Expand DownExpand Up		@@ -305,4 +321,38 @@ const styles = {
		border: `1px solid ${theme.palette.divider}`,
		backgroundColor: theme.palette.background.default,
		}),
		tooltip: (theme) => ({
		display: "flex",
		flexDirection: "column",
		fontWeight: 500,
		fontSize: 12,
		color: theme.palette.text.secondary,
		}),
		tooltipResource: (theme) => ({
		color: theme.palette.text.primary,
		fontWeight: 600,
		marginTop: 4,
		display: "block",
		maxWidth: "100%",
		overflow: "hidden",
		textOverflow: "ellipsis",
		whiteSpace: "nowrap",
		}),
		tooltipLink: (theme) => ({
		color: "inherit",
		textDecoration: "none",
		display: "flex",
		alignItems: "center",
		gap: 4,
		marginTop: 8,

		"&:hover": {
		color: theme.palette.text.primary,
		},

		"& svg": {
		width: 12,
		height: 12,
		},
		}),
		} satisfies Record<string, Interpolation<Theme>>;