coder · aslilac · Sep 4, 2024 · Aug 30, 2024 · Sep 3, 2024 · Sep 3, 2024
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -223,6 +223,13 @@ export const organizationsPermissions = (
 					},
 					action: "create",
 				},
+				viewProvisioners: {
+					object: {
+						resource_type: "provisioner_daemon",
+						organization_id: organizationId,
+					},
+					action: "read",
+				},
 			});
 
 			// The endpoint takes a flat array, so to avoid collisions prepend each

diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
@@ -14,6 +14,7 @@ import type { ThemeRole } from "theme/roles";
 export type PillProps = HTMLAttributes<HTMLDivElement> & {
 	icon?: ReactNode;
 	type?: ThemeRole;
+	size?: "md" | "lg";
 };
 
 const themeStyles = (type: ThemeRole) => (theme: Theme) => {
@@ -30,13 +31,25 @@ const PILL_ICON_SPACING = (PILL_HEIGHT - PILL_ICON_SIZE) / 2;
 
 export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
 	(props, ref) => {
-		const { icon, type = "inactive", children, ...divProps } = props;
+		const {
+			icon,
+			type = "inactive",
+			children,
+			size = "md",
+			...divProps
+		} = props;
 		const typeStyles = useMemo(() => themeStyles(type), [type]);
 
 		return (
 			<div
 				ref={ref}
-				css={[styles.pill, icon && styles.pillWithIcon, typeStyles]}
+				css={[
+					styles.pill,
+					icon && size === "md" && styles.pillWithIcon,
+					size === "lg" && styles.pillLg,
+					icon && size === "lg" && styles.pillLgWithIcon,
+					typeStyles,
+				]}
 				{...divProps}
 			>
 				{icon}
@@ -80,6 +93,15 @@ const styles = {
 		paddingLeft: PILL_ICON_SPACING,
 	},
 
+	pillLg: {
+		gap: PILL_ICON_SPACING * 2,
+		padding: "14px 16px",
+	},
+
+	pillLgWithIcon: {
+		paddingLeft: PILL_ICON_SPACING * 2,
+	},
+
 	spinner: (theme) => ({
 		color: theme.experimental.l1.text,
 		// It is necessary to align it with the MUI Icons internal padding

diff --git a/site/src/modules/provisioners/Provisioner.tsx b/site/src/modules/provisioners/Provisioner.tsx
@@ -0,0 +1,117 @@
+import { useTheme } from "@emotion/react";
+import Business from "@mui/icons-material/Business";
+import Person from "@mui/icons-material/Person";
+import Tooltip from "@mui/material/Tooltip";
+import type { HealthMessage, ProvisionerDaemon } from "api/typesGenerated";
+import { Pill } from "components/Pill/Pill";
+import type { FC } from "react";
+import { createDayString } from "utils/createDayString";
+import { ProvisionerTag } from "./ProvisionerTag";
+
+interface ProvisionerProps {
+	readonly provisioner: ProvisionerDaemon;
+	readonly warnings?: readonly HealthMessage[];
+}
+
+export const Provisioner: FC<ProvisionerProps> = ({
+	provisioner,
+	warnings,
+}) => {
+	const theme = useTheme();
+	const daemonScope = provisioner.tags.scope || "organization";
+	const iconScope = daemonScope === "organization" ? <Business /> : <Person />;
+
+	const extraTags = Object.entries(provisioner.tags).filter(
+		([key]) => key !== "scope" && key !== "owner",
+	);
+	const isWarning = warnings && warnings.length > 0;
+	return (
+		<div
+			key={provisioner.name}
+			css={[
+				{
+					borderRadius: 8,
+					border: `1px solid ${theme.palette.divider}`,
+					fontSize: 14,
+				},
+				isWarning && { borderColor: theme.palette.warning.light },
+			]}
+		>
+			<header
+				css={{
+					padding: 24,
+					display: "flex",
+					alignItems: "center",
+					justifyContenxt: "space-between",
+					gap: 24,
+				}}
+			>
+				<div
+					css={{
+						display: "flex",
+						alignItems: "center",
+						gap: 24,
+						objectFit: "fill",
+					}}
+				>
+					<div css={{ lineHeight: "160%" }}>
+						<h4 css={{ fontWeight: 500, margin: 0 }}>{provisioner.name}</h4>
+						<span css={{ color: theme.palette.text.secondary }}>
+							<code>{provisioner.version}</code>
+						</span>
+					</div>
+				</div>
+				<div
+					css={{
+						marginLeft: "auto",
+						display: "flex",
+						flexWrap: "wrap",
+						gap: 12,
+					}}
+				>
+					<Tooltip title="Scope">
+						<Pill size="lg" icon={iconScope}>
+							<span
+								css={{
+									":first-letter": { textTransform: "uppercase" },
+								}}
+							>
+								{daemonScope}
+							</span>
+						</Pill>
+					</Tooltip>
+					{extraTags.map(([key, value]) => (
+						<ProvisionerTag key={key} tagName={key} tagValue={value} />
+					))}
+				</div>
+			</header>
+
+			<div
+				css={{
+					borderTop: `1px solid ${theme.palette.divider}`,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					padding: "8px 24px",
+					fontSize: 12,
+					color: theme.palette.text.secondary,
+				}}
+			>
+				{warnings && warnings.length > 0 ? (
+					<div css={{ display: "flex", flexDirection: "column" }}>
+						{warnings.map((warning) => (
+							<span key={warning.code}>{warning.message}</span>
+						))}
+					</div>
+				) : (
+					<span>No warnings</span>
+				)}
+				{provisioner.last_seen_at && (
+					<span css={{ color: theme.roles.info.text }} data-chromatic="ignore">
+						Last seen {createDayString(provisioner.last_seen_at)}
+					</span>
+				)}
+			</div>
+		</div>
+	);
+};
diff --git a/site/src/modules/provisioners/ProvisionerTag.tsx b/site/src/modules/provisioners/ProvisionerTag.tsx
@@ -0,0 +1,105 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
+import CloseIcon from "@mui/icons-material/Close";
+import DoNotDisturbOnOutlined from "@mui/icons-material/DoNotDisturbOnOutlined";
+import Sell from "@mui/icons-material/Sell";
+import IconButton from "@mui/material/IconButton";
+import { Pill } from "components/Pill/Pill";
+import type { ComponentProps, FC } from "react";
+
+const parseBool = (s: string): { valid: boolean; value: boolean } => {
+	switch (s.toLowerCase()) {
+		case "true":
+		case "yes":
+		case "1":
+			return { valid: true, value: true };
+		case "false":
+		case "no":
+		case "0":
+		case "":
+			return { valid: true, value: false };
+		default:
+			return { valid: false, value: false };
+	}
+};
+
+interface ProvisionerTagProps {
+	tagName: string;
+	tagValue: string;
+	/** Only used in the TemplateVersionEditor */
+	onDelete?: (tagName: string) => void;
+}
+
+export const ProvisionerTag: FC<ProvisionerTagProps> = ({
+	tagName,
+	tagValue,
+	onDelete,
+}) => {
+	const { valid, value: boolValue } = parseBool(tagValue);
+	const kv = (
+		<>
+			<span css={{ fontWeight: 600 }}>{tagName}</span> <span>{tagValue}</span>
+		</>
+	);
+	const content = onDelete ? (
+		<>
+			{kv}
+			<IconButton
+				aria-label={`delete-${tagName}`}
+				size="small"
+				color="secondary"
+				onClick={() => {
+					onDelete(tagName);
+				}}
+			>
+				<CloseIcon fontSize="inherit" css={{ width: 14, height: 14 }} />
+			</IconButton>
+		</>
+	) : (
+		kv
+	);
+	if (valid) {
+		return <BooleanPill value={boolValue}>{content}</BooleanPill>;
+	}
+	return (
+		<Pill size="lg" icon={<Sell />}>
+			{content}
+		</Pill>
+	);
+};
+
+type BooleanPillProps = Omit<ComponentProps<typeof Pill>, "icon" | "value"> & {
+	value: boolean;
+};
+
+export const BooleanPill: FC<BooleanPillProps> = ({
+	value,
+	children,
+	...divProps
+}) => {
+	return (
+		<Pill
+			type={value ? "active" : "danger"}
+			size="lg"
+			icon={
+				value ? (
+					<CheckCircleOutlined css={styles.truePill} />
+				) : (
+					<DoNotDisturbOnOutlined css={styles.falsePill} />
+				)
+			}
+			{...divProps}
+		>
+			{children}
+		</Pill>
+	);
+};
+
+const styles = {
+	truePill: (theme) => ({
+		color: theme.roles.active.outline,
+	}),
+	falsePill: (theme) => ({
+		color: theme.roles.danger.outline,
+	}),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
@@ -195,7 +195,7 @@ export const BooleanPill: FC<BooleanPillProps> = ({
 	...divProps
 }) => {
 	const theme = useTheme();
-	const color = value ? theme.palette.success.light : theme.palette.error.light;
+	const color = value ? theme.roles.success.outline : theme.roles.error.outline;
 
 	return (
 		<Pill