coder · SasSwart · Nov 28, 2024 · Nov 19, 2024 · Nov 19, 2024 · Nov 20, 2024
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -682,12 +682,20 @@ class ApiMethods {
 
 	/**
 	 * @param organization Can be the organization's ID or name
+	 * @param tags to filter provisioner daemons by.
 	 */
 	getProvisionerDaemonsByOrganization = async (
 		organization: string,
+		tags?: Record<string, string>,
 	): Promise<TypesGen.ProvisionerDaemon[]> => {
+		const params = new URLSearchParams();
+
+		if (tags) {
+			params.append("tags", JSON.stringify(tags));
+		}
+
 		const response = await this.axios.get<TypesGen.ProvisionerDaemon[]>(
-			`/api/v2/organizations/${organization}/provisionerdaemons`,
+			`/api/v2/organizations/${organization}/provisionerdaemons?${params.toString()}`,
 		);
 		return response.data;
 	};

diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -115,16 +115,18 @@ export const organizations = () => {
 	};
 };
 
-export const getProvisionerDaemonsKey = (organization: string) => [
-	"organization",
-	organization,
-	"provisionerDaemons",
-];
+export const getProvisionerDaemonsKey = (
+	organization: string,
+	tags?: Record<string, string>,
+) => ["organization", organization, tags, "provisionerDaemons"];
 
-export const provisionerDaemons = (organization: string) => {
+export const provisionerDaemons = (
+	organization: string,
+	tags?: Record<string, string>,
+) => {
 	return {
-		queryKey: getProvisionerDaemonsKey(organization),
-		queryFn: () => API.getProvisionerDaemonsByOrganization(organization),
+		queryKey: getProvisionerDaemonsKey(organization, tags),
+		queryFn: () => API.getProvisionerDaemonsByOrganization(organization, tags),
 	};
 };
 

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
@@ -1,4 +1,5 @@
 import MuiAlert, {
+	type AlertColor as MuiAlertColor,
 	type AlertProps as MuiAlertProps,
 	// biome-ignore lint/nursery/noRestrictedImports: Used as base component
 } from "@mui/material/Alert";
@@ -11,6 +12,8 @@ import {
 	useState,
 } from "react";
 
+export type AlertColor = MuiAlertColor;
+
 export type AlertProps = MuiAlertProps & {
 	actions?: ReactNode;
 	dismissible?: boolean;

diff --git a/site/src/modules/provisioners/ProvisionerAlert.stories.tsx b/site/src/modules/provisioners/ProvisionerAlert.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
+import { ProvisionerAlert } from "./ProvisionerAlert";
+
+const meta: Meta<typeof ProvisionerAlert> = {
+	title: "modules/provisioners/ProvisionerAlert",
+	parameters: {
+		chromatic,
+		layout: "centered",
+	},
+	component: ProvisionerAlert,
+	args: {
+		title: "Title",
+		detail: "Detail",
+		severity: "info",
+		tags: { tag: "tagValue" },
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof ProvisionerAlert>;
+
+export const Info: Story = {};
+export const NullTags: Story = {
+	args: {
+		tags: undefined,
+	},
+};
diff --git a/site/src/modules/provisioners/ProvisionerAlert.tsx b/site/src/modules/provisioners/ProvisionerAlert.tsx
@@ -0,0 +1,45 @@
+import AlertTitle from "@mui/material/AlertTitle";
+import { Alert, type AlertColor } from "components/Alert/Alert";
+import { AlertDetail } from "components/Alert/Alert";
+import { Stack } from "components/Stack/Stack";
+import { ProvisionerTag } from "modules/provisioners/ProvisionerTag";
+import type { FC } from "react";
+interface ProvisionerAlertProps {
+	title: string;
+	detail: string;
+	severity: AlertColor;
+	tags: Record<string, string>;
+}
+
+export const ProvisionerAlert: FC<ProvisionerAlertProps> = ({
+	title,
+	detail,
+	severity,
+	tags,
+}) => {
+	return (
+		<Alert
+			severity={severity}
+			css={(theme) => {
+				return {
+					borderRadius: 0,
+					border: 0,
+					borderBottom: `1px solid ${theme.palette.divider}`,
+					borderLeft: `2px solid ${theme.palette[severity].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 key={key} tagName={key} tagValue={value} />
+						))}
+				</Stack>
+			</AlertDetail>
+		</Alert>
+	);
+};
diff --git a/site/src/modules/provisioners/ProvisionerStatusAlert.stories.tsx b/site/src/modules/provisioners/ProvisionerStatusAlert.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
+import { MockTemplateVersion } from "testHelpers/entities";
+import { ProvisionerStatusAlert } from "./ProvisionerStatusAlert";
+
+const meta: Meta<typeof ProvisionerStatusAlert> = {
+	title: "modules/provisioners/ProvisionerStatusAlert",
+	parameters: {
+		chromatic,
+		layout: "centered",
+	},
+	component: ProvisionerStatusAlert,
+	args: {
+		matchingProvisioners: 0,
+		availableProvisioners: 0,
+		tags: MockTemplateVersion.job.tags,
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof ProvisionerStatusAlert>;
+
+export const HealthyProvisioners: Story = {
+	args: {
+		matchingProvisioners: 1,
+		availableProvisioners: 1,
+	},
+};
+
+export const UndefinedMatchingProvisioners: Story = {
+	args: {
+		matchingProvisioners: undefined,
+		availableProvisioners: undefined,
+	},
+};
+
+export const UndefinedAvailableProvisioners: Story = {
+	args: {
+		matchingProvisioners: 1,
+		availableProvisioners: undefined,
+	},
+};
+
+export const NoMatchingProvisioners: Story = {
+	args: {
+		matchingProvisioners: 0,
+	},
+};
+
+export const NoAvailableProvisioners: Story = {
+	args: {
+		matchingProvisioners: 1,
+		availableProvisioners: 0,
+	},
+};
diff --git a/site/src/modules/provisioners/ProvisionerStatusAlert.tsx b/site/src/modules/provisioners/ProvisionerStatusAlert.tsx
@@ -0,0 +1,47 @@
+import type { AlertColor } from "components/Alert/Alert";
+import type { FC } from "react";
+import { ProvisionerAlert } from "./ProvisionerAlert";
+
+interface ProvisionerStatusAlertProps {
+	matchingProvisioners: number | undefined;
+	availableProvisioners: number | undefined;
+	tags: Record<string, string>;
+}
+
+export const ProvisionerStatusAlert: FC<ProvisionerStatusAlertProps> = ({
+	matchingProvisioners,
+	availableProvisioners,
+	tags,
+}) => {
+	let title: string;
+	let detail: string;
+	let severity: AlertColor;
+	switch (true) {
+		case matchingProvisioners === 0:
+			title = "Build pending provisioner deployment";
+			detail =
+				"Your build has been enqueued, but there are no provisioners that accept the required tags. Once a compatible provisioner becomes available, your build will continue. Please contact your administrator.";
+			severity = "warning";
+			break;
+		case availableProvisioners === 0:
+			title = "Build delayed";
+			detail =
+				"Provisioners that accept the required tags have not responded for longer than expected. This may delay your build. Please contact your administrator if your build does not complete.";
+			severity = "warning";
+			break;
+		default:
+			title = "Build enqueued";
+			detail =
+				"Your build has been enqueued and will begin once a provisioner becomes available to process it.";
+			severity = "info";
+	}
+
+	return (
+		<ProvisionerAlert
+			title={title}
+			detail={detail}
+			severity={severity}
+			tags={tags}
+		/>
+	);
+};
diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.stories.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.stories.tsx
@@ -34,6 +34,42 @@ export const MissingVariables: Story = {
 	},
 };
 
+export const NoProvisioners: Story = {
+	args: {
+		templateVersion: {
+			...MockTemplateVersion,
+			matched_provisioners: {
+				count: 0,
+				available: 0,
+			},
+		},
+	},
+};
+
+export const ProvisionersUnhealthy: Story = {
+	args: {
+		templateVersion: {
+			...MockTemplateVersion,
+			matched_provisioners: {
+				count: 1,
+				available: 0,
+			},
+		},
+	},
+};
+
+export const ProvisionersHealthy: Story = {
+	args: {
+		templateVersion: {
+			...MockTemplateVersion,
+			matched_provisioners: {
+				count: 1,
+				available: 1,
+			},
+		},
+	},
+};
+
 export const Logs: Story = {
 	args: {
 		templateVersion: {

diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
@@ -8,6 +8,7 @@ import { visuallyHidden } from "@mui/utils";
 import { JobError } from "api/queries/templates";
 import type { TemplateVersion } from "api/typesGenerated";
 import { Loader } from "components/Loader/Loader";
+import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
 import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
 import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs";
 import { type FC, useLayoutEffect, useRef } from "react";
@@ -27,6 +28,10 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 	variablesSectionRef,
 	...drawerProps
 }) => {
+	const matchingProvisioners = templateVersion?.matched_provisioners?.count;
+	const availableProvisioners =
+		templateVersion?.matched_provisioners?.available;
+
 	const logs = useWatchVersionLogs(templateVersion);
 	const logsContainer = useRef<HTMLDivElement>(null);
 
@@ -65,6 +70,8 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 					</IconButton>
 				</header>
 
+				{}
+
 				{isMissingVariables ? (
 					<MissingVariablesBanner
 						onFillVariables={() => {
@@ -82,7 +89,14 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 						<WorkspaceBuildLogs logs={logs} css={{ border: 0 }} />
 					</section>
 				) : (
-					<Loader />
+					<>
+						<ProvisionerStatusAlert
+							matchingProvisioners={matchingProvisioners}
+							availableProvisioners={availableProvisioners}
+							tags={templateVersion?.job.tags ?? {}}
+						/>
+						<Loader />
+					</>
 				)}
 			</div>
 		</Drawer>