Nov 28, 2024 · Nov 19, 2024 · Nov 19, 2024 · Nov 20, 2024 · Nov 21, 2024 · Nov 21, 2024
diff --git a/site/src/api/api.ts b/site/src/api/api.ts

 /**
 * @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
 };
 };

 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
 import MuiAlert, {
 type AlertColor as MuiAlertColor,
 type AlertProps as MuiAlertProps,
 // biome-ignore lint/nursery/noRestrictedImports: Used as base component
 } from "@mui/material/Alert";
 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
 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
 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
 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
 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
 },
 };

 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
 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";
 variablesSectionRef,
 ...drawerProps
 }) => {
 const matchingProvisioners = templateVersion?.matched_provisioners?.count;
 const availableProvisioners =
 templateVersion?.matched_provisioners?.available;

 const logs = useWatchVersionLogs(templateVersion);
 const logsContainer = useRef<HTMLDivElement>(null);

 </IconButton>
 </header>

 {}

 {isMissingVariables ? (
 <MissingVariablesBanner
 onFillVariables={() => {
 <WorkspaceBuildLogs logs={logs} css={{ border: 0 }} />
 </section>
 ) : (
 <Loader />
 <>
 <ProvisionerStatusAlert
 matchingProvisioners={matchingProvisioners}
 availableProvisioners={availableProvisioners}
 tags={templateVersion?.job.tags ?? {}}
 />
 <Loader />
 </>
 )}
 </div>
 </Drawer>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
		};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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),
		};
		};

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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";
Expand All		@@ -11,6 +12,8 @@ import {
		useState,
		} from "react";

		export type AlertColor = MuiAlertColor;

		export type AlertProps = MuiAlertProps & {
		actions?: ReactNode;
		dismissible?: boolean;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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,
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -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>
		);
		};
Original file line number	Diff line number	Diff line change
		@@ -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,
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -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}
		/>
		);
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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: {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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";
Expand All		@@ -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);

Expand DownExpand Up		@@ -65,6 +70,8 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
		</IconButton>
		</header>

		{}

		{isMissingVariables ? (
		<MissingVariablesBanner
		onFillVariables={() => {
Expand All		@@ -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>
Expand Down