Dec 3, 2024 · Dec 2, 2024 · Dec 2, 2024 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024
diff --git a/site/src/api/queries/workspaceBuilds.ts b/site/src/api/queries/workspaceBuilds.ts
 };

 // We use readyAgentsCount to invalidate the query when an agent connects
 exportconstworkspaceBuildTimings=(
 workspaceBuildId:string,
 readyAgentsCount:number,
 )=>{
 exportconstworkspaceBuildTimings=(workspaceBuildId:string)=>{
 return{
 queryKey:[
 "workspaceBuilds",
 workspaceBuildId,
 "timings",
 { readyAgentsCount},
 ],
 queryKey:["workspaceBuilds",workspaceBuildId,"timings"],
 queryFn:()=>API.workspaceBuildTimings(workspaceBuildId),
 };
 };
diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx
 ],
 },
 };

 // Loading when agent script timings are empty
 // Test case for https://github.com/coder/coder/issues/15273
 export const LoadingWhenAgentScriptTimingsAreEmpty: Story = {
 args: {
 agentScriptTimings: undefined,
 },
 };
diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
 ].sort((a, b) => {
 return new Date(a.started_at).getTime() - new Date(b.started_at).getTime();
 });

 const [isOpen, setIsOpen] = useState(defaultIsOpen);
 const isLoading = timings.length === 0;

 // All stages
 // If any of the timings are empty, we are still loading the data. They can be
 // filled in different moments.
 const isLoading = [
 provisionerTimings,
 agentScriptTimings,
 agentConnectionTimings,
 ].some((t) => t.length === 0);

 // Each agent connection timing is a stage in the timeline to make it easier
 // to users to see the timing for connection and the other scripts.
 const agentStageLabels = Array.from(
 new Set(
 agentConnectionTimings.map((t) => `agent (${t.workspace_agent_name})`),
 ),
 );

 const stages = [
 ...provisioningStages,
 ...agentStageLabels.flatMap((a) => agentStages(a)),
 : mergeTimeRanges(stageTimings.map(toTimeRange));

 // Prevent users from inspecting internal coder resources in
 // provisioner timings.
 // provisioner timings because they were not useful to the
 // user and would add noise.
 const visibleResources = stageTimings.filter((t) => {
 const isProvisionerTiming = "resource" in t;
 return isProvisionerTiming
diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
 // Cancel build
 const cancelBuildMutation = useMutation(cancelBuild(workspace, queryClient));

 // Build Timings. Fetch build timings only when the build job is completed.
 const readyAgents = workspace.latest_build.resources
 .flatMap((r) => r.agents)
 .filter((a) => a && a.lifecycle_state !== "starting");
 // Workspace Timings.
 const timingsQuery = useQuery({
 ...workspaceBuildTimings(workspace.latest_build.id, readyAgents.length),
 ...workspaceBuildTimings(workspace.latest_build.id),

 // Fetch build timings only when the build job is completed.
 enabled: Boolean(workspace.latest_build.job.completed_at),

 // Sometimes, the timings can be fetched before the agent script timings are
 // done or saved in the database so we need to conditionally refetch the
 // timings. To refetch the timings, I found the best way was to compare the
 // expected amount of script timings with the current amount of script
 // timings returned in the response.
 refetchInterval: (data) => {
 const expectedScriptTimingsCount = workspace.latest_build.resources
 .flatMap((r) => r.agents)
 .flatMap((a) => a?.scripts ?? []).length;
 const currentScriptTimingsCount = data?.agent_script_timings?.length ?? 0;
 return expectedScriptTimingsCount === currentScriptTimingsCount
 ? false
 : 1_000;
 },
 });

 const runLastBuild = (
Original file line number	Diff line number	Diff line change
Expand Up		@@ -58,17 +58,9 @@ export const infiniteWorkspaceBuilds = (
		};

		// We use readyAgentsCount to invalidate the query when an agent connects
		exportconstworkspaceBuildTimings=(
		workspaceBuildId:string,
		readyAgentsCount:number,
		)=>{
		exportconstworkspaceBuildTimings=(workspaceBuildId:string)=>{
		return{
		queryKey:[
		"workspaceBuilds",
		workspaceBuildId,
		"timings",
		{ readyAgentsCount},
Copy link Contributor buenos-nachosDec 3, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. What was the`readyAgentCount` value doing before? I see that we were only using it for the query key, and now it's gone BrunoQuaresma reacted with thumbs up emoji Copy link ContributorAuthor BrunoQuaresmaDec 3, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. It was to refetch the query when a new agent was marked as ready but it was very buggy and a bad decision on my end. The current refetch logic makes more sense and it is easier to follow.
		],
		queryKey:["workspaceBuilds",workspaceBuildId,"timings"],
		queryFn:()=>API.workspaceBuildTimings(workspaceBuildId),
		};
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -118,3 +118,11 @@ export const DuplicatedScriptTiming: Story = {
		],
		},
		};

		// Loading when agent script timings are empty
		// Test case for https://github.com/coder/coder/issues/15273
		export const LoadingWhenAgentScriptTimingsAreEmpty: Story = {
		args: {
		agentScriptTimings: undefined,
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -58,15 +58,25 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
		].sort((a, b) => {
		return new Date(a.started_at).getTime() - new Date(b.started_at).getTime();
		});

		const [isOpen, setIsOpen] = useState(defaultIsOpen);
		const isLoading = timings.length === 0;

		// All stages
		// If any of the timings are empty, we are still loading the data. They can be
		// filled in different moments.
		const isLoading = [
		provisionerTimings,
		agentScriptTimings,
		agentConnectionTimings,
		].some((t) => t.length === 0);

		// Each agent connection timing is a stage in the timeline to make it easier
		// to users to see the timing for connection and the other scripts.
		const agentStageLabels = Array.from(
		new Set(
		agentConnectionTimings.map((t) => `agent (${t.workspace_agent_name})`),
		),
		);

		const stages = [
		...provisioningStages,
		...agentStageLabels.flatMap((a) => agentStages(a)),
Expand DownExpand Up		@@ -120,7 +130,8 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
		: mergeTimeRanges(stageTimings.map(toTimeRange));

		// Prevent users from inspecting internal coder resources in
		// provisioner timings.
		// provisioner timings because they were not useful to the
		// user and would add noise.
		const visibleResources = stageTimings.filter((t) => {
		const isProvisionerTiming = "resource" in t;
		return isProvisionerTiming
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -157,13 +157,27 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
		// Cancel build
		const cancelBuildMutation = useMutation(cancelBuild(workspace, queryClient));

		// Build Timings. Fetch build timings only when the build job is completed.
		const readyAgents = workspace.latest_build.resources
		.flatMap((r) => r.agents)
		.filter((a) => a && a.lifecycle_state !== "starting");
		// Workspace Timings.
		const timingsQuery = useQuery({
		...workspaceBuildTimings(workspace.latest_build.id, readyAgents.length),
		...workspaceBuildTimings(workspace.latest_build.id),

		// Fetch build timings only when the build job is completed.
		enabled: Boolean(workspace.latest_build.job.completed_at),

		// Sometimes, the timings can be fetched before the agent script timings are
		// done or saved in the database so we need to conditionally refetch the
		// timings. To refetch the timings, I found the best way was to compare the
		// expected amount of script timings with the current amount of script
		// timings returned in the response.
		refetchInterval: (data) => {
		const expectedScriptTimingsCount = workspace.latest_build.resources
		.flatMap((r) => r.agents)
		.flatMap((a) => a?.scripts ?? []).length;
		const currentScriptTimingsCount = data?.agent_script_timings?.length ?? 0;
		return expectedScriptTimingsCount === currentScriptTimingsCount
		? false
		: 1_000;
		},
		});

		const runLastBuild = (
Expand Down