Handle empty search

BrunoQuaresma · BrunoQuaresma · commit 54d13c862236 · 2024-09-23T20:24:43.000Z
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx
@@ -64,7 +64,7 @@ export type ChartProps = {
 };
 
 export const Chart: FC<ChartProps> = ({ data, onBarClick }) => {
-	const totalDuration = duration(data.flatMap((d) => d.timings));
+	const totalDuration = combineDurations(data.flatMap((d) => d.timings));
 	const totalTime = durationTime(totalDuration);
 
 	// XAxis ticks
@@ -205,7 +205,14 @@ const durationTime = (duration: Duration): number => {
 
 // Combine multiple durations into a single duration by using the initial start
 // time and the final end time.
-export const duration = (durations: readonly Duration[]): Duration => {
+export const combineDurations = (durations: readonly Duration[]): Duration => {
+	// If there are no durations, return a duration with the same start and end
+	// times. This prevents the chart from breaking when calculating the start and
+	// end times from an empty array.
+	if (durations.length === 0) {
+		return { startedAt: new Date(), endedAt: new Date() };
+	}
+
 	const sortedDurations = durations
 		.slice()
 		.sort((a, b) => a.startedAt.getTime() - b.startedAt.getTime());
diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
@@ -1,5 +1,10 @@
 import type { ProvisionerTiming } from "api/typesGenerated";
-import { Chart, type Duration, type Timing, duration } from "./Chart/Chart";
+import {
+	Chart,
+	type Duration,
+	type Timing,
+	combineDurations,
+} from "./Chart/Chart";
 import { useState, type FC } from "react";
 import type { Interpolation, Theme } from "@emotion/react";
 import ChevronRight from "@mui/icons-material/ChevronRight";
@@ -101,17 +106,33 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 				</div>
 			)}
 
-			<Chart
-				data={data}
-				onBarClick={(stage, section) => {
-					setView({
-						name: "advanced",
-						selectedStage: stage,
-						parentSection: section,
-						filter: "",
-					});
-				}}
-			/>
+			{data.flatMap((section) => section.timings).length > 0 ? (
+				<Chart
+					data={data}
+					onBarClick={(stage, section) => {
+						setView({
+							name: "advanced",
+							selectedStage: stage,
+							parentSection: section,
+							filter: "",
+						});
+					}}
+				/>
+			) : (
+				<div
+					css={{
+						width: "100%",
+						height: "100%",
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					{view.name === "basic"
+						? "No data found"
+						: `No resource found for "${view.filter}"`}
+				</div>
+			)}
 		</div>
 	);
 };
@@ -137,7 +158,7 @@ export const selectChartData = (
 				const durations = timings
 					.filter((t) => t.stage === stage)
 					.map(extractDuration);
-				const stageDuration = duration(durations);
+				const stageDuration = combineDurations(durations);
 				const stageTiming: Timing = {
 					label: stage,
 					childrenCount: durations.length,
