use matched_provisioners instead of a second api call

coder · SasSwart · Nov 28, 2024 · Nov 19, 2024 · Nov 19, 2024 · Nov 20, 2024
commit 0cab76825ff6c334dc9f52d7cf84a4bbaddbd4a3
@@ -691,7 +691,7 @@ class ApiMethods {
 		const params = new URLSearchParams();
 
 		if (tags) {
-			params.append('tags', encodeURIComponent(JSON.stringify(tags)));
+			params.append('tags', JSON.stringify(tags));
 		}
 
 		const response = await this.axios.get<TypesGen.ProvisionerDaemon[]>(

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
+import { MockTemplateVersion } from "testHelpers/entities";
+import { ProvisionerAlert } from "./ProvisionerAlert";
+
+const meta: Meta<typeof ProvisionerAlert> = {
+	title: "modules/provisioners/ProvisionerAlert",
+	parameters: {
+		chromatic,
+		layout: "centered",
+	},
+	component: ProvisionerAlert,
+	args: {
+		matchingProvisioners: 0,
+		availableProvisioners: 0,
+		tags: MockTemplateVersion.job.tags,
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof ProvisionerAlert>;
+
+export const HealthyProvisioners: Story = {
+	args: {
+		matchingProvisioners: 1,
+		availableProvisioners: 1,
+	}
+};
+
+export const NoMatchingProvisioners: Story = {
+	args: {
+		matchingProvisioners: 0,
+	}
+};
+
+export const NoAvailableProvisioners: Story = {
+	args: {
+		matchingProvisioners: 1,
+		availableProvisioners: 0,
+	}
+};
@@ -1,33 +1,100 @@
-import { Theme } from "@mui/material";
-import Alert from "@mui/material/Alert";
+import Alert, { AlertColor } from "@mui/material/Alert";
 import AlertTitle from "@mui/material/AlertTitle";
-import type { AlertColor } from "@mui/material/Alert";
+import { Stack } from "components/Stack/Stack";
 import { AlertDetail } from "components/Alert/Alert";
-import type { FC } from "react";
+import { type FC } from "react";
+import { ProvisionerTag } from "modules/provisioners/ProvisionerTag";
 
-type ProvisionerAlertProps = {
-	title: string,
-	detail: string,
-	severity: AlertColor,
+interface ProvisionerAlertProps {
+	matchingProvisioners: number | undefined,
+	availableProvisioners: number | undefined,
+	tags: Record<string, string>
 }
 
 export const ProvisionerAlert : FC<ProvisionerAlertProps> = ({
+	matchingProvisioners,
+	availableProvisioners,
+	tags
+}) => {
+	let title, detail: string;
+	switch (true) {
+		case (matchingProvisioners === 0):
+			title="Provisioning Cannot Proceed"
+			detail="There are no provisioners that accept the required tags. Please contact your administrator. Once a compatible provisioner becomes available, provisioning will continue."
+			break;
+		case (availableProvisioners === 0):
+			title="Provisioning Delayed"
+			detail="Provisioners that accept the required tags are currently anavailable. This may delay your build. Please contact your administrator if your build does not complete."
+			break;
+		default:
+			return null;
+	}
+
+	return (
+		<Alert
+			severity="warning"
+			css={(theme) => ({
+				borderRadius: 0,
+				border: 0,
+				borderBottom: `1px solid ${theme.palette.divider}`,
+				borderLeft: `2px solid ${theme.palette.error.main}`,
+			})}
+		>
+			<AlertTitle>{title}</AlertTitle>
+			<AlertDetail>
+				<div>{detail}</div>
+				<Stack direction="row" spacing={1} wrap="wrap">
+					{Object.entries(tags)
+						.filter(([key]) => key !== "owner")
+						.map(([key, value]) => (
+							<ProvisionerTag
+								tagName={key}
+								tagValue={value}
+							/>
+						))}
+				</Stack>
+			</AlertDetail>
+		</Alert>
+	);
+};
+
+interface ProvisionerJobErrorProps {
+	title: string
+	detail: string
+	severity: AlertColor
+	tags: Record<string, string>
+}
+
+export const ProvisionerJobAlert : FC<ProvisionerJobErrorProps> = ({
 	title,
 	detail,
 	severity,
+	tags,
 }) => {
 	return (
 		<Alert
 			severity={severity}
-			css={(theme: Theme) => ({
+			css={(theme) => ({
 				borderRadius: 0,
 				border: 0,
 				borderBottom: `1px solid ${theme.palette.divider}`,
 				borderLeft: `2px solid ${theme.palette.error.main}`,
 			})}
 		>
 			<AlertTitle>{title}</AlertTitle>
-			<AlertDetail>{detail}</AlertDetail>
+			<AlertDetail>
+				<div>{detail}</div>
+				<Stack direction="row" spacing={1} wrap="wrap">
+					{Object.entries(tags)
+						.filter(([key]) => key !== "owner")
+						.map(([key, value]) => (
+							<ProvisionerTag
+								tagName={key}
+								tagValue={value}
+							/>
+						))}
+				</Stack>
+			</AlertDetail>
 		</Alert>
 	);
 };
diff --git a/site/src/modules/provisioners/useCompatibleProvisioners.ts b/site/src/modules/provisioners/useCompatibleProvisioners.ts
@@ -5,7 +5,7 @@ import {
 	MockTemplateVersion,
 	MockWorkspaceBuildLogs,
 } from "testHelpers/entities";
-import { withProvisioners, withWebSocket } from "testHelpers/storybook";
+import { withWebSocket } from "testHelpers/storybook";
 import { BuildLogsDrawer } from "./BuildLogsDrawer";
 
 const meta: Meta<typeof BuildLogsDrawer> = {
@@ -36,46 +36,39 @@ export const MissingVariables: Story = {
 
 export const NoProvisioners: Story = {
 	args: {
-		templateVersion: {...MockTemplateVersion, organization_id: "org-id"},
+		templateVersion: {
+			...MockTemplateVersion,
+			matched_provisioners: {
+				count: 0,
+				available: 0,
+			}
+		},
 	},
-	decorators: [withProvisioners],
-	parameters: {
-		organization_id: "org-id",
-		tags: MockTemplateVersion.job.tags,
-		provisioners: [],
-	}
 };
 
 export const ProvisionersUnhealthy: Story = {
 	args: {
-		templateVersion: {...MockTemplateVersion, organization_id: "org-id"},
+		templateVersion: {
+			...MockTemplateVersion,
+			matched_provisioners: {
+				count: 1,
+				available: 0,
+			}
+		},
 	},
-	decorators: [withProvisioners],
-	parameters: {
-		organization_id: "org-id",
-		tags: MockTemplateVersion.job.tags,
-		provisioners: [
-			{
-				last_seen_at: new Date(new Date().getTime() - 5 * 60 * 1000).toISOString()
-			},
-		],
-	}
 };
 
 export const ProvisionersHealthy: Story = {
 	args: {
-		templateVersion: {...MockTemplateVersion, organization_id: "org-id"},
+		templateVersion: {
+			...MockTemplateVersion,
+			organization_id: "org-id",
+			matched_provisioners: {
+				count: 1,
+				available: 1,
+			}
+		},
 	},
-	decorators: [withProvisioners],
-	parameters: {
-		organization_id: "org-id",
-		tags: MockTemplateVersion.job.tags,
-		provisioners: [
-			{
-				last_seen_at: new Date()
-			},
-		],
-	}
 };
 
 

@@ -12,9 +12,6 @@ import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
 import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs";
 import { type FC, useLayoutEffect, useRef } from "react";
 import { navHeight } from "theme/constants";
-import { provisionersUnhealthy } from "modules/provisioners/useCompatibleProvisioners";
-import { useQuery } from "react-query";
-import { provisionerDaemons } from "api/queries/organizations";
 import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
 
 type BuildLogsDrawerProps = {
@@ -31,15 +28,8 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 	variablesSectionRef,
 	...drawerProps
 }) => {
-	const org = templateVersion?.organization_id
-	const {
-		data: compatibleProvisioners,
-		isLoading: provisionerDaemonsLoading,
-		isError: couldntGetProvisioners,
-	}  = useQuery(
-		org ? provisionerDaemons(org, templateVersion?.job.tags) : { enabled: false}
-	);
-	const compatibleProvisionersUnhealthy = !compatibleProvisioners || provisionersUnhealthy(compatibleProvisioners);
+	const matchingProvisioners = templateVersion?.matched_provisioners?.count
+	const availableProvisioners = templateVersion?.matched_provisioners?.available
 
 	const logs = useWatchVersionLogs(templateVersion);
 	const logsContainer = useRef<HTMLDivElement>(null);
@@ -79,26 +69,12 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 					</IconButton>
 				</header>
 
-				{  !logs && !provisionerDaemonsLoading && (
-					couldntGetProvisioners ? (
-						<ProvisionerAlert
-							severity="warning"
-							title="Something went wrong"
-							detail="Could not determine provisioner status. Your template build may fail. If your template does not build, please contact your administrator"
-						/>
-					) : (!compatibleProvisioners || compatibleProvisioners.length === 0) ? (
-						<ProvisionerAlert
-							severity="warning"
-							title="Template Creation Stuck"
-							detail="This organization does not have any provisioners to process this template. Configure a provisioner."
-						/>
-					) : compatibleProvisionersUnhealthy && (
-						<ProvisionerAlert
-							severity="warning"
-							title="Template Creation Delayed"
-							detail="Provisioners are currently unresponsive. This may delay your template creation. Please contact your administrator for support."
-						/>
-					)
+				{  !logs && (
+					<ProvisionerAlert
+						matchingProvisioners={matchingProvisioners}
+						availableProvisioners={availableProvisioners}
+						tags={templateVersion?.job.tags ?? {}}
+					/>
 				)}
 
 				{isMissingVariables ? (