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', encodeURIComponent(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/modules/provisioners/useCompatibleProvisioners.ts b/site/src/modules/provisioners/useCompatibleProvisioners.ts
@@ -0,0 +1,52 @@
+import { API } from "api/api";
+import { ProvisionerDaemon } from "api/typesGenerated";
+import { useEffect, useState } from "react";
+
+export const useCompatibleProvisioners = (organization: string | undefined, tags: Record<string, string> | undefined) => {
+	const [compatibleProvisioners, setCompatibleProvisioners] = useState<ProvisionerDaemon[]>([])
+
+	useEffect(() => {
+		(async () => {
+			if (!organization) {
+				setCompatibleProvisioners([])
+				return
+			}
+
+			try {
+				const provisioners = await API.getProvisionerDaemonsByOrganization(
+					organization,
+					tags,
+				);
+
+				setCompatibleProvisioners(provisioners);
+			} catch (error) {
+				setCompatibleProvisioners([])
+			}
+		})();
+	}, [organization, tags])
+
+	return compatibleProvisioners
+}
+
+export const provisionersUnhealthy = (provisioners : ProvisionerDaemon[]) => {
+	return provisioners.reduce((allUnhealthy, provisioner) => {
+		if (!allUnhealthy) {
+			// If we've found one healthy provisioner, then we don't need to look at the rest
+			return allUnhealthy;
+		}
+		// Otherwise, all provisioners so far have been unhealthy, so we check the next one
+
+		// If a provisioner has no last_seen_at value, then it's considered unhealthy
+		if (!provisioner.last_seen_at) {
+			return allUnhealthy;
+		}
+
+		// If a provisioner has not been seen within the last 60 seconds, then it's considered unhealthy
+		const lastSeen = new Date(provisioner.last_seen_at);
+		const oneMinuteAgo = new Date(Date.now() - 60000);
+		const unhealthy = lastSeen < oneMinuteAgo;
+
+
+		return allUnhealthy && unhealthy;
+	}, true);
+}
diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
@@ -12,6 +12,9 @@ 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, useCompatibleProvisioners } from "modules/provisioners/useCompatibleProvisioners";
+import { Alert, AlertTitle } from "@mui/material";
+import { AlertDetail } from "components/Alert/Alert";
 
 type BuildLogsDrawerProps = {
 	error: unknown;
@@ -27,6 +30,12 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 	variablesSectionRef,
 	...drawerProps
 }) => {
+	const compatibleProvisioners = useCompatibleProvisioners(
+		templateVersion?.organization_id,
+		templateVersion?.job.tags
+	);
+	const compatibleProvisionersUnhealthy = provisionersUnhealthy(compatibleProvisioners);
+
 	const logs = useWatchVersionLogs(templateVersion);
 	const logsContainer = useRef<HTMLDivElement>(null);
 
@@ -65,6 +74,37 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 					</IconButton>
 				</header>
 
+				{ !compatibleProvisioners && !logs ? (
+					// If there are no compatible provisioners, warn that this job may be stuck
+					<Alert
+						severity="warning"
+						css={{
+							borderRadius: 0,
+							border: 0,
+							// borderBottom: `1px solid ${theme.palette.divider}`,
+							// borderLeft: `2px solid ${theme.palette.error.main}`,
+						}}
+					>
+						<AlertTitle>Build stuck</AlertTitle>
+						<AlertDetail>No Compatible Provisioner Daemons have been configured</AlertDetail>
+					</Alert>
+				) : compatibleProvisionersUnhealthy && !logs && (
+					// If there are compatible provisioners in the db, but they have not reported recent health checks,
+					// warn that the job might be stuck
+					<Alert
+						severity="warning"
+						css={{
+							borderRadius: 0,
+							border: 0,
+							// borderBottom: `1px solid ${theme.palette.divider}`,
+							// borderLeft: `2px solid ${theme.palette.error.main}`,
+						}}
+					>
+						<AlertTitle>Build may be delayed</AlertTitle>
+						<AlertDetail>Compatible Provisioner Daemons have been silent for a while. This may result in a delayed build</AlertDetail>
+					</Alert>
+				)}
+
 				{isMissingVariables ? (
 					<MissingVariablesBanner
 						onFillVariables={() => {

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -60,6 +60,7 @@ import { MonacoEditor } from "./MonacoEditor";
 import { ProvisionerTagsPopover } from "./ProvisionerTagsPopover";
 import { PublishTemplateVersionDialog } from "./PublishTemplateVersionDialog";
 import { TemplateVersionStatusBadge } from "./TemplateVersionStatusBadge";
+import { provisionersUnhealthy, useCompatibleProvisioners } from "modules/provisioners/useCompatibleProvisioners";
 
 type Tab = "logs" | "resources" | undefined; // Undefined is to hide the tab
 
@@ -127,6 +128,12 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 	const [renameFileOpen, setRenameFileOpen] = useState<string>();
 	const [dirty, setDirty] = useState(false);
 
+	const compatibleProvisioners = useCompatibleProvisioners(
+		templateVersion?.organization_id,
+		templateVersion?.job.tags
+	);
+	const compatibleProvisionersUnhealthy = provisionersUnhealthy(compatibleProvisioners);
+
 	const triggerPreview = useCallback(async () => {
 		await onPreview(fileTree);
 		setSelectedTab("logs");
@@ -581,7 +588,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 									css={[styles.logs, styles.tabContent]}
 									ref={logsContentRef}
 								>
-									{templateVersion.job.error && (
+									{templateVersion.job.error ? (
 										<div>
 											<Alert
 												severity="error"
@@ -596,6 +603,34 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 												<AlertDetail>{templateVersion.job.error}</AlertDetail>
 											</Alert>
 										</div>
+									) : !compatibleProvisioners ? (
+											<Alert
+												severity="warning"
+												css={{
+													borderRadius: 0,
+													border: 0,
+													borderBottom: `1px solid ${theme.palette.divider}`,
+													borderLeft: `2px solid ${theme.palette.error.main}`,
+												}}
+											>
+												<AlertTitle>Build stuck</AlertTitle>
+												<AlertDetail>No Compatible Provisioner Daemons have been configured</AlertDetail>
+											</Alert>
+									) : compatibleProvisionersUnhealthy && (
+										<div>
+											<Alert
+												severity="warning"
+												css={{
+													borderRadius: 0,
+													border: 0,
+													borderBottom: `1px solid ${theme.palette.divider}`,
+													borderLeft: `2px solid ${theme.palette.error.main}`,
+												}}
+											>
+												<AlertTitle>Build may be delayed</AlertTitle>
+												<AlertDetail>Compatible Provisioner Daemons have been silent for a while. This may result in a delayed build</AlertDetail>
+											</Alert>
+										</div>
 									)}
 
 									{buildLogs && buildLogs.length > 0 ? (