Apply PR suggested changes

coder · BrunoQuaresma · Nov 1, 2024 · Oct 25, 2024 · Oct 25, 2024 · Oct 29, 2024
commit 91be0dc89b7fb3cc267335f51c673add104123cc
diff --git a/site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx b/site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx
@@ -98,11 +98,11 @@ export const StagesChart: FC<StagesChartProps> = ({
 							<YAxisSection key={section}>
 								<YAxisHeader>{section}</YAxisHeader>
 								<YAxisLabels>
-									{stages.map((s) => (
-										<YAxisLabel key={s.name} id={encodeURIComponent(s.name)}>
+									{stages.map((stage) => (
+										<YAxisLabel key={stage.name} id={encodeURIComponent(stage.name)}>
 											<span css={styles.stageLabel}>
-												{s.label}
-												<Tooltip {...s.tooltip}>
+												{stage.label}
+												<Tooltip {...stage.tooltip}>
 													<InfoOutlined css={styles.info} />
 												</Tooltip>
 											</span>

diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx
@@ -97,7 +97,7 @@ export const NavigateToStartStage: Story = {
 		const user = userEvent.setup();
 		const canvas = within(canvasElement);
 		const detailsButton = canvas.getByRole("button", {
-			name: "View start details",
+			name: "View run startup scripts details",
 		});
 		await user.click(detailsButton);
 		await canvas.findByText("Startup Script");

diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
@@ -50,24 +50,23 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 	const [isOpen, setIsOpen] = useState(defaultIsOpen);
 	const isLoading = timings.length === 0;
 
+	// All stages
+	const agentStageLabels = Array.from(
+		new Set(
+			agentConnectionTimings.map((t) => `agent (${t.workspace_agent_name})`),
+		),
+	);
+	const stages = [
+		...provisioningStages,
+		...agentStageLabels.flatMap((a) => agentStages(a)),
+	];
+
 	const displayProvisioningTime = () => {
 		const totalRange = mergeTimeRanges(timings.map(toTimeRange));
 		const totalDuration = calcDuration(totalRange);
 		return humanizeDuration(totalDuration);
 	};
 
-	const stages = () => {
-		const agentStageLabels = Array.from(
-			new Set(
-				agentConnectionTimings.map((t) => `agent (${t.workspace_agent_name})`),
-			),
-		);
-		return [
-			...provisioningStages,
-			...agentStageLabels.flatMap((a) => agentStages(a)),
-		];
-	};
-
 	return (
 		<div css={styles.collapse}>
 			<Button
@@ -100,7 +99,7 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 					<div css={styles.collapseBody}>
 						{view.name === "default" && (
 							<StagesChart
-								timings={stages().map((s) => {
+								timings={stages.map((s) => {
 									const stageTimings = timings.filter(
 										(t) => t.stage === s.name,
 									);
@@ -137,45 +136,45 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 							/>
 						)}
 
-						{view.name === "detailed" &&
-							view.stage.section === "provisioning" && (
-								<ResourcesChart
-									timings={provisionerTimings
-										.filter((t) => t.stage === view.stage.name)
-										.map((t) => {
-											return {
+						{view.name === "detailed" && (
+							<>
+								{view.stage.section === "provisioning" && (
+									<ResourcesChart
+										timings={provisionerTimings
+											.filter((t) => t.stage === view.stage.name)
+											.map((t) => ({
 												range: toTimeRange(t),
 												name: t.resource,
 												source: t.source,
 												action: t.action,
-											};
-										})}
-									stage={view.stage}
-									onBack={() => {
-										setView({ name: "default" });
-									}}
-								/>
-							)}
-
-						{view.name === "detailed" &&
-							view.stage.section !== "provisioning" && (
-								<ScriptsChart
-									timings={agentScriptTimings
-										.filter((t) => t.stage === view.stage.name)
-										.map((t) => {
-											return {
-												range: toTimeRange(t),
-												name: t.display_name,
-												status: t.status,
-												exitCode: t.exit_code,
-											};
-										})}
-									stage={view.stage}
-									onBack={() => {
-										setView({ name: "default" });
-									}}
-								/>
-							)}
+											}))}
+										stage={view.stage}
+										onBack={() => {
+											setView({ name: "default" });
+										}}
+									/>
+								)}
+
+								{view.stage.section !== "run startup scripts" && (
+									<ScriptsChart
+										timings={agentScriptTimings
+											.filter((t) => t.stage === view.stage.name)
+											.map((t) => {
+												return {
+													range: toTimeRange(t),
+													name: t.display_name,
+													status: t.status,
+													exitCode: t.exit_code,
+												};
+											})}
+										stage={view.stage}
+										onBack={() => {
+											setView({ name: "default" });
+										}}
+									/>
+								)}
+							</>
+						)}
 					</div>
 				</Collapse>
 			)}