Apr 23, 2025 · Apr 22, 2025 · Apr 22, 2025 · Apr 22, 2025
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/utils.ts b/site/src/modules/workspaces/WorkspaceTiming/Chart/utils.ts
 // data in 200ms intervals. However, if the total time is 1 minute, we should
 // display the data in 5 seconds intervals. To achieve this, we define the
 // dimensions object that contains the time intervals for the chart.
 const scales = [5_000, 500, 100];
 const second = 1_000;
 const minute = 60 * second;
 const hour = 60 * minute;
 const day = 24 * hour;
 const scales = [
 day,
 hour,
 5 * minute,
 minute,
 10 * second,
 5 * second,
 500,
 100,
 ];

 const pickScale = (totalTime: number): number => {
 for (const s of scales) {
 };

 export const formatTime = (time: number): string => {
 return `${time.toLocaleString()}ms`;
 const seconds = Math.floor(time / 1000);
 const minutes = Math.floor(seconds / 60);
 const hours = Math.floor(minutes / 60);
 const days = Math.floor(hours / 24);

 const parts: string[] = [];
 if (days > 0) {
 parts.push(`${days}d`);
 }
 if (hours > 0) {
 parts.push(`${hours % 24}h`);
 }
 if (minutes > 0) {
 parts.push(`${minutes % 60}m`);
 }
 if (seconds > 0) {
 parts.push(`${seconds % 60}s`);
 }
 if (time % 1000 > 0) {
 parts.push(`${time % 1000}ms`);
 }

 return parts.join(" ");
 };

 export const calcOffset = (range: TimeRange, baseRange: TimeRange): number => {
diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx
 agentScriptTimings: undefined,
 },
 };

 export const LongTimeRange = {
 args: {
 provisionerTimings: [
 {
 ...WorkspaceTimingsResponse.provisioner_timings[0],
 started_at: "2021-09-01T00:00:00Z",
 ended_at: "2021-09-01T00:10:00Z",
 },
 ],
 agentConnectionTimings: [
 {
 ...WorkspaceTimingsResponse.agent_connection_timings[0],
 started_at: "2021-09-01T00:10:00Z",
 ended_at: "2021-09-01T00:35:00Z",
 },
 ],
 agentScriptTimings: [
 {
 ...WorkspaceTimingsResponse.agent_script_timings[0],
 started_at: "2021-09-01T00:35:00Z",
 ended_at: "2021-09-01T01:00:00Z",
 },
 ],
 },
 };
diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
 import { type FC, useState } from "react";
 import { type TimeRange, calcDuration, mergeTimeRanges } from "./Chart/utils";
 import {
 type TimeRange,
 calcDuration,
 formatTime,
 mergeTimeRanges,
 } from "./Chart/utils";
 import { ResourcesChart, isCoderResource } from "./ResourcesChart";
 import { ScriptsChart } from "./ScriptsChart";
 import {
 const displayProvisioningTime = () => {
 const totalRange = mergeTimeRanges(timings.map(toTimeRange));
 const totalDuration = calcDuration(totalRange);
 returnhumanizeDuration(totalDuration);
 returnformatTime(totalDuration);
 };

 return (
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,7 +29,20 @@ export const calcDuration = (range: TimeRange): number => {
		// data in 200ms intervals. However, if the total time is 1 minute, we should
		// display the data in 5 seconds intervals. To achieve this, we define the
		// dimensions object that contains the time intervals for the chart.
		const scales = [5_000, 500, 100];
		const second = 1_000;
		const minute = 60 * second;
		const hour = 60 * minute;
		const day = 24 * hour;
		const scales = [
		day,
		hour,
		5 * minute,
		minute,
		10 * second,
		5 * second,
		500,
		100,
		];

		const pickScale = (totalTime: number): number => {
		for (const s of scales) {
Expand All		@@ -48,7 +61,29 @@ export const makeTicks = (time: number) => {
		};

		export const formatTime = (time: number): string => {
		return `${time.toLocaleString()}ms`;
		const seconds = Math.floor(time / 1000);
		const minutes = Math.floor(seconds / 60);
		const hours = Math.floor(minutes / 60);
		const days = Math.floor(hours / 24);

		const parts: string[] = [];
		if (days > 0) {
		parts.push(`${days}d`);
		}
		if (hours > 0) {
		parts.push(`${hours % 24}h`);
		}
		if (minutes > 0) {
		parts.push(`${minutes % 60}m`);
		}
		if (seconds > 0) {
		parts.push(`${seconds % 60}s`);
		}
		if (time % 1000 > 0) {
		parts.push(`${time % 1000}ms`);
		}

		return parts.join(" ");
		};

		export const calcOffset = (range: TimeRange, baseRange: TimeRange): number => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -126,3 +126,29 @@ export const LoadingWhenAgentScriptTimingsAreEmpty: Story = {
		agentScriptTimings: undefined,
		},
		};

		export const LongTimeRange = {
		args: {
		provisionerTimings: [
		{
		...WorkspaceTimingsResponse.provisioner_timings[0],
		started_at: "2021-09-01T00:00:00Z",
		ended_at: "2021-09-01T00:10:00Z",
		},
		],
		agentConnectionTimings: [
		{
		...WorkspaceTimingsResponse.agent_connection_timings[0],
		started_at: "2021-09-01T00:10:00Z",
		ended_at: "2021-09-01T00:35:00Z",
		},
		],
		agentScriptTimings: [
		{
		...WorkspaceTimingsResponse.agent_script_timings[0],
		started_at: "2021-09-01T00:35:00Z",
		ended_at: "2021-09-01T01:00:00Z",
		},
		],
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,7 +12,12 @@ import type {
		import sortBy from "lodash/sortBy";
		import uniqBy from "lodash/uniqBy";
		import { type FC, useState } from "react";
		import { type TimeRange, calcDuration, mergeTimeRanges } from "./Chart/utils";
		import {
		type TimeRange,
		calcDuration,
		formatTime,
		mergeTimeRanges,
		} from "./Chart/utils";
		import { ResourcesChart, isCoderResource } from "./ResourcesChart";
		import { ScriptsChart } from "./ScriptsChart";
		import {
Expand DownExpand Up		@@ -85,7 +90,7 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
		const displayProvisioningTime = () => {
		const totalRange = mergeTimeRanges(timings.map(toTimeRange));
		const totalDuration = calcDuration(totalRange);
		returnhumanizeDuration(totalDuration);
		returnformatTime(totalDuration);
		};

		return (
Expand Down