coder · SasSwart · Dec 11, 2024 · Nov 29, 2024 · Dec 3, 2024 · Dec 4, 2024
diff --git a/site/src/modules/provisioners/ProvisionerAlert.stories.tsx b/site/src/modules/provisioners/ProvisionerAlert.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { chromatic } from "testHelpers/chromatic";
-import { ProvisionerAlert } from "./ProvisionerAlert";
+import { AlertVariant, ProvisionerAlert } from "./ProvisionerAlert";
 
 const meta: Meta<typeof ProvisionerAlert> = {
 	title: "modules/provisioners/ProvisionerAlert",
@@ -21,6 +21,26 @@ export default meta;
 type Story = StoryObj<typeof ProvisionerAlert>;
 
 export const Info: Story = {};
+
+export const InfoStyledForLogs: Story = {
+	args: {
+		variant: AlertVariant.Inline,
+	},
+};
+
+export const Warning: Story = {
+	args: {
+		severity: "warning",
+	},
+};
+
+export const WarningStyledForLogs: Story = {
+	args: {
+		severity: "warning",
+		variant: AlertVariant.Inline,
+	},
+};
+
 export const NullTags: Story = {
 	args: {
 		tags: undefined,

diff --git a/site/src/modules/provisioners/ProvisionerAlert.tsx b/site/src/modules/provisioners/ProvisionerAlert.tsx
@@ -4,31 +4,51 @@ import { AlertDetail } from "components/Alert/Alert";
 import { Stack } from "components/Stack/Stack";
 import { ProvisionerTag } from "modules/provisioners/ProvisionerTag";
 import type { FC } from "react";
+import type { Theme } from "@emotion/react";
+
+export enum AlertVariant {
+	// Alerts are usually styled with a full rounded border and meant to use as a visually distinct element of the page.
+	// The Standalone variant conforms to this styling.
+	Standalone = "Standalone",
+	// We show these same alerts in environments such as log drawers where we stream the logs from builds.
+	// In this case the full border is incongruent with the surroundings of the component.
+	// The Inline variant replaces the full rounded border with a left border and a divider so that it complements the surroundings.
+	Inline = "Inline",
+}
+
 interface ProvisionerAlertProps {
 	title: string;
 	detail: string;
 	severity: AlertColor;
 	tags: Record<string, string>;
+	variant?: AlertVariant;
 }
 
+const getAlertStyles = (variant: AlertVariant, severity: AlertColor) => {
+	switch (variant) {
+		case AlertVariant.Inline:
+			return {
+				css: (theme: Theme) => ({
+					borderRadius: 0,
+					border: 0,
+					borderBottom: `1px solid ${theme.palette.divider}`,
+					borderLeft: `2px solid ${theme.palette[severity].main}`,
+				}),
+			};
+		default:
+			return {};
+	}
+};
+
 export const ProvisionerAlert: FC<ProvisionerAlertProps> = ({
 	title,
 	detail,
 	severity,
 	tags,
+	variant = AlertVariant.Standalone,
 }) => {
 	return (
-		<Alert
-			severity={severity}
-			css={(theme) => {
-				return {
-					borderRadius: 0,
-					border: 0,
-					borderBottom: `1px solid ${theme.palette.divider}`,
-					borderLeft: `2px solid ${theme.palette[severity].main}`,
-				};
-			}}
-		>
+		<Alert severity={severity} {...getAlertStyles(variant, severity)}>
 			<AlertTitle>{title}</AlertTitle>
 			<AlertDetail>
 				<div>{detail}</div>

diff --git a/site/src/modules/provisioners/ProvisionerStatusAlert.stories.tsx b/site/src/modules/provisioners/ProvisionerStatusAlert.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { chromatic } from "testHelpers/chromatic";
 import { MockTemplateVersion } from "testHelpers/entities";
+import { AlertVariant } from "./ProvisionerAlert";
 import { ProvisionerStatusAlert } from "./ProvisionerStatusAlert";
 
 const meta: Meta<typeof ProvisionerStatusAlert> = {
@@ -47,9 +48,24 @@ export const NoMatchingProvisioners: Story = {
 	},
 };
 
+export const NoMatchingProvisionersInLogs: Story = {
+	args: {
+		matchingProvisioners: 0,
+		variant: AlertVariant.Inline,
+	},
+};
+
 export const NoAvailableProvisioners: Story = {
 	args: {
 		matchingProvisioners: 1,
 		availableProvisioners: 0,
 	},
 };
+
+export const NoAvailableProvisionersInLogs: Story = {
+	args: {
+		matchingProvisioners: 1,
+		availableProvisioners: 0,
+		variant: AlertVariant.Inline,
+	},
+};
diff --git a/site/src/modules/provisioners/ProvisionerStatusAlert.tsx b/site/src/modules/provisioners/ProvisionerStatusAlert.tsx
@@ -1,17 +1,19 @@
 import type { AlertColor } from "components/Alert/Alert";
 import type { FC } from "react";
-import { ProvisionerAlert } from "./ProvisionerAlert";
+import { AlertVariant, ProvisionerAlert } from "./ProvisionerAlert";
 
 interface ProvisionerStatusAlertProps {
 	matchingProvisioners: number | undefined;
 	availableProvisioners: number | undefined;
 	tags: Record<string, string>;
+	variant?: AlertVariant;
 }
 
 export const ProvisionerStatusAlert: FC<ProvisionerStatusAlertProps> = ({
 	matchingProvisioners,
 	availableProvisioners,
 	tags,
+	variant = AlertVariant.Standalone,
 }) => {
 	let title: string;
 	let detail: string;
@@ -42,6 +44,7 @@ export const ProvisionerStatusAlert: FC<ProvisionerStatusAlertProps> = ({
 			detail={detail}
 			severity={severity}
 			tags={tags}
+			variant={variant}
 		/>
 	);
 };
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 { AlertVariant } from "modules/provisioners/ProvisionerAlert";
 import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
 import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
 import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs";
@@ -94,6 +95,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 							matchingProvisioners={matchingProvisioners}
 							availableProvisioners={availableProvisioners}
 							tags={templateVersion?.job.tags ?? {}}
+							variant={AlertVariant.Inline}
 						/>
 						<Loader />
 					</>

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -29,6 +29,7 @@ import {
 import { Loader } from "components/Loader/Loader";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
+import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
 import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
 import { TemplateFileTree } from "modules/templates/TemplateFiles/TemplateFileTree";
 import { isBinaryData } from "modules/templates/TemplateFiles/isBinaryData";
@@ -593,6 +594,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 												detail={templateVersion.job.error}
 												severity="error"
 												tags={templateVersion.job.tags}
+												variant={AlertVariant.Inline}
 											/>
 										</div>
 									) : (
@@ -602,6 +604,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 													matchingProvisioners={matchingProvisioners}
 													availableProvisioners={availableProvisioners}
 													tags={templateVersion.job.tags}
+													variant={AlertVariant.Inline}
 												/>
 												<Loader css={{ height: "100%" }} />
 											</>

diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx
@@ -95,6 +95,51 @@ export const PendingInQueue: Story = {
 	},
 };
 
+export const PendingWithNoProvisioners: Story = {
+	args: {
+		...Running.args,
+		workspace: {
+			...Mocks.MockPendingWorkspace,
+			latest_build: {
+				...Mocks.MockPendingWorkspace.latest_build,
+				matched_provisioners: {
+					count: 0,
+					available: 0,
+				},
+			},
+		},
+	},
+};
+
+export const PendingWithNoAvailableProvisioners: Story = {
+	args: {
+		...Running.args,
+		workspace: {
+			...Mocks.MockPendingWorkspace,
+			latest_build: {
+				...Mocks.MockPendingWorkspace.latest_build,
+				matched_provisioners: {
+					count: 1,
+					available: 0,
+				},
+			},
+		},
+	},
+};
+
+export const PendingWithUndefinedProvisioners: Story = {
+	args: {
+		...Running.args,
+		workspace: {
+			...Mocks.MockPendingWorkspace,
+			latest_build: {
+				...Mocks.MockPendingWorkspace.latest_build,
+				matched_provisioners: undefined,
+			},
+		},
+	},
+};
+
 export const Starting: Story = {
 	args: {
 		...Running.args,

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -7,6 +7,7 @@ import type * as TypesGen from "api/typesGenerated";
 import { Alert, AlertDetail } from "components/Alert/Alert";
 import { SidebarIconButton } from "components/FullPageLayout/Sidebar";
 import { useSearchParamsKey } from "hooks/useSearchParamsKey";
+import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
 import { AgentRow } from "modules/resources/AgentRow";
 import { WorkspaceTimings } from "modules/workspaces/WorkspaceTiming/WorkspaceTimings";
 import type { FC } from "react";
@@ -108,6 +109,13 @@ export const Workspace: FC<WorkspaceProps> = ({
 		(r) => resourceOptionValue(r) === resourcesNav.value,
 	);
 
+	const provisionersHealthy =
+		(workspace.latest_build.matched_provisioners?.available ?? 0) > 0;
+	const shouldShowProvisionerAlert =
+		workspace.latest_build.status === "pending" &&
+		!provisionersHealthy &&
+		!buildLogs;
+
 	return (
 		<div
 			css={{
@@ -208,6 +216,18 @@ export const Workspace: FC<WorkspaceProps> = ({
 						/>
 					)}
 
+					{shouldShowProvisionerAlert && (
+						<ProvisionerStatusAlert
+							matchingProvisioners={
+								workspace.latest_build.matched_provisioners?.count
+							}
+							availableProvisioners={
+								workspace.latest_build.matched_provisioners?.available ?? 0
+							}
+							tags={workspace.latest_build.job.tags}
+						/>
+					)}
+
 					{workspace.latest_build.job.error && (
 						<Alert severity="error">
 							<AlertTitle>Workspace build failed</AlertTitle>

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -1199,6 +1199,10 @@ export const MockWorkspaceBuild: TypesGen.WorkspaceBuild = {
 	resources: [MockWorkspaceResource],
 	status: "running",
 	daily_cost: 20,
+	matched_provisioners: {
+		count: 1,
+		available: 1,
+	},
 };
 
 export const MockWorkspaceBuildAutostart: TypesGen.WorkspaceBuild = {