Display all daemon data from server

coder · BrunoQuaresma · Feb 18, 2025 · Feb 5, 2025 · Feb 7, 2025 · Feb 7, 2025
commit d66141e74b7d3404466e2754b7fb2cce22534f11
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -3,6 +3,7 @@ import type {
 	AuthorizationResponse,
 	CreateOrganizationRequest,
 	GroupSyncSettings,
+	ProvisionerDaemon,
 	RoleSyncSettings,
 	UpdateOrganizationRequest,
 } from "api/typesGenerated";

diff --git a/site/src/pages/OrganizationSettingsPage/ProvisionersPage/DataGrid.tsx b/site/src/pages/OrganizationSettingsPage/ProvisionersPage/DataGrid.tsx
@@ -0,0 +1,28 @@
+import type { FC, HTMLProps } from "react";
+import { cn } from "utils/cn";
+
+export const DataGrid: FC<HTMLProps<HTMLDivElement>> = ({
+	className,
+	...props
+}) => {
+	return (
+		<div
+			{...props}
+			className={cn([
+				"grid grid-cols-[auto_1fr] gap-x-4 items-center",
+				"[&_span:nth-of-type(even)]:text-content-primary [&_span:nth-of-type(even)]:font-mono",
+				"[&_span:nth-of-type(even)]:leading-[22px]",
+				className,
+			])}
+		/>
+	);
+};
+
+export const DataGridSpace: FC<HTMLProps<HTMLDivElement>> = ({
+	className,
+	...props
+}) => {
+	return (
+		<div aria-hidden {...props} className={cn(["h-6 col-span-2", className])} />
+	);
+};
diff --git a/site/src/pages/OrganizationSettingsPage/ProvisionersPage/ProvisionerDaemonsPage.tsx b/site/src/pages/OrganizationSettingsPage/ProvisionersPage/ProvisionerDaemonsPage.tsx
@@ -1,10 +1,5 @@
 import { provisionerDaemons } from "api/queries/organizations";
-import type {
-	Organization,
-	ProvisionerDaemon,
-	ProvisionerDaemonStatus,
-} from "api/typesGenerated";
-import { Badge } from "components/Badge/Badge";
+import type { Organization, ProvisionerDaemon } from "api/typesGenerated";
 import { Link } from "components/Link/Link";
 import {
 	StatusIndicator,
@@ -20,14 +15,18 @@ import {
 	TableRow,
 } from "components/Table/Table";
 import { TableEmpty } from "components/TableEmpty/TableEmpty";
-import { TableLoader } from "components/TableLoader/TableLoader";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { useState, type FC } from "react";
 import { useQuery } from "react-query";
 import { cn } from "utils/cn";
 import { docs } from "utils/docs";
 import { relativeTime } from "utils/time";
 import { JobStatusIndicator } from "./JobStatusIndicator";
+import { Avatar } from "components/Avatar/Avatar";
+import { DataGrid, DataGridSpace } from "./DataGrid";
+import { ShrinkTags, Tag, Tags } from "./Tags";
+import { Loader } from "components/Loader/Loader";
+import { EmptyState } from "components/EmptyState/EmptyState";
 
 type ProvisionerDaemonsPageProps = {
 	org: Organization;
@@ -36,9 +35,18 @@ type ProvisionerDaemonsPageProps = {
 export const ProvisionerDaemonsPage: FC<ProvisionerDaemonsPageProps> = ({
 	org,
 }) => {
-	const { data: daemons, isLoadingError } = useQuery(
-		provisionerDaemons(org.id),
-	);
+	const { data: daemons, isLoadingError } = useQuery({
+		...provisionerDaemons(org.id),
+		select: (data) =>
+			data.toSorted((a, b) => {
+				if (!a.last_seen_at) return 1;
+				if (!b.last_seen_at) return -1;
+				return (
+					new Date(b.last_seen_at).getTime() -
+					new Date(a.last_seen_at).getTime()
+				);
+			}),
+	});
 
 	return (
 		<section className="flex flex-col gap-8">
@@ -69,12 +77,24 @@ export const ProvisionerDaemonsPage: FC<ProvisionerDaemonsPageProps> = ({
 						daemons.length > 0 ? (
 							daemons.map((d) => <DaemonRow key={d.id} daemon={d} />)
 						) : (
-							<TableEmpty message="No provisioner daemons found" />
+							<TableRow>
+								<TableCell colSpan={999}>
+									<EmptyState message="No provisioner daemons found" />
+								</TableCell>
+							</TableRow>
 						)
 					) : isLoadingError ? (
-						<TableEmpty message="Error loading the provisioner daemons" />
+						<TableRow>
+							<TableCell colSpan={999}>
+								<EmptyState message="Error loading the provisioner daemons" />
+							</TableCell>
+						</TableRow>
 					) : (
-						<TableLoader />
+						<TableRow>
+							<TableCell colSpan={999}>
+								<Loader />
+							</TableCell>
+						</TableRow>
 					)}
 				</TableBody>
 			</Table>
@@ -116,39 +136,46 @@ const DaemonRow: FC<DaemonRowProps> = ({ daemon }) => {
 						</span>
 					</button>
 				</TableCell>
-				<TableCell>{daemon.name}</TableCell>
-				<TableCell>Template</TableCell>
 				<TableCell>
-					<div className="flex items-center gap-1 flex-wrap">
-						{Object.entries(daemon.tags).map(([k, v]) => (
-							<Badge size="sm" key={k} className="whitespace-nowrap">
-								[{k}
-								{v && `=${v}`}]
-							</Badge>
-						))}
-					</div>
+					<span className="block whitespace-nowrap text-ellipsis overflow-hidden">
+						{daemon.name}
+					</span>
 				</TableCell>
 				<TableCell>
-					<StatusIndicator
-						size="sm"
-						variant={statusIndicatorVariant(daemon.status)}
-					>
+					{daemon.current_job ? (
+						<div className="flex items-center gap-1 whitespace-nowrap">
+							<Avatar
+								variant="icon"
+								src={daemon.current_job.template_icon}
+								fallback={
+									daemon.current_job.template_display_name ||
+									daemon.current_job.template_name
+								}
+							/>
+							{daemon.current_job.template_display_name ??
+								daemon.current_job.template_name}
+						</div>
+					) : (
+						<span className="whitespace-nowrap">Not linked</span>
+					)}
+				</TableCell>
+				<TableCell>
+					<ShrinkTags tags={daemon.tags} />
+				</TableCell>
+				<TableCell>
+					<StatusIndicator size="sm" variant={statusIndicatorVariant(daemon)}>
 						<StatusIndicatorDot />
-						<span className="[&:first-letter]:uppercase">{daemon.status}</span>
+						<span className="[&:first-letter]:uppercase">
+							{statusLabel(daemon)}
+						</span>
 					</StatusIndicator>
 				</TableCell>
 			</TableRow>
 
 			{isOpen && (
 				<TableRow>
 					<TableCell colSpan={999} className="p-4 border-t-0">
-						<div
-							className={cn([
-								"grid grid-cols-[auto_1fr] gap-x-4 items-center",
-								"[&_span:nth-child(even)]:text-content-primary [&_span:nth-child(even)]:font-mono",
-								"[&_span:nth-child(even)]:leading-[22px]",
-							])}
-						>
+						<DataGrid>
 							<span>Last seen:</span>
 							<span>{daemon.last_seen_at}</span>
 
@@ -158,8 +185,19 @@ const DaemonRow: FC<DaemonRowProps> = ({ daemon }) => {
 							<span>Version:</span>
 							<span>{daemon.version}</span>
 
+							<span>Tags:</span>
+							<span>
+								<Tags>
+									{Object.entries(daemon.tags).map(([key, value]) => (
+										<Tag key={key} label={key} value={value} />
+									))}
+								</Tags>
+							</span>
+
 							{daemon.current_job && (
 								<>
+									<DataGridSpace />
+
 									<span>Last job:</span>
 									<span>{daemon.current_job.id}</span>
 
@@ -172,6 +210,8 @@ const DaemonRow: FC<DaemonRowProps> = ({ daemon }) => {
 
 							{daemon.previous_job && (
 								<>
+									<DataGridSpace />
+
 									<span>Previous job:</span>
 									<span>{daemon.previous_job.id}</span>
 
@@ -181,7 +221,7 @@ const DaemonRow: FC<DaemonRowProps> = ({ daemon }) => {
 									</span>
 								</>
 							)}
-						</div>
+						</DataGrid>
 					</TableCell>
 				</TableRow>
 			)}
@@ -190,9 +230,13 @@ const DaemonRow: FC<DaemonRowProps> = ({ daemon }) => {
 };
 
 function statusIndicatorVariant(
-	status: ProvisionerDaemonStatus | null,
+	daemon: ProvisionerDaemon,
 ): StatusIndicatorProps["variant"] {
-	switch (status) {
+	if (daemon.previous_job && daemon.previous_job.status === "failed") {
+		return "failed";
+	}
+
+	switch (daemon.status) {
 		case "idle":
 			return "success";
 		case "busy":
@@ -202,3 +246,20 @@ function statusIndicatorVariant(
 			return "inactive";
 	}
 }
+
+function statusLabel(daemon: ProvisionerDaemon) {
+	if (daemon.previous_job && daemon.previous_job.status === "failed") {
+		return "Last job failed";
+	}
+
+	switch (daemon.status) {
+		case "idle":
+			return "Idle";
+		case "busy":
+			return "Busy...";
+		case "offline":
+			return "Disconnected";
+		case null:
+			return "Unknown";
+	}
+}
diff --git a/site/src/pages/OrganizationSettingsPage/ProvisionersPage/ProvisionerJobsPage.tsx b/site/src/pages/OrganizationSettingsPage/ProvisionersPage/ProvisionerJobsPage.tsx
@@ -13,7 +13,6 @@ import {
 	TableRow,
 } from "components/Table/Table";
 import { TableEmpty } from "components/TableEmpty/TableEmpty";
-import { TableLoader } from "components/TableLoader/TableLoader";
 import {
 	Tooltip,
 	TooltipContent,
@@ -32,6 +31,10 @@ import { cn } from "utils/cn";
 import { docs } from "utils/docs";
 import { relativeTime } from "utils/time";
 import { JobStatusIndicator } from "./JobStatusIndicator";
+import { DataGrid } from "./DataGrid";
+import { ShrinkTags, Tag, Tags } from "./Tags";
+import { Loader } from "components/Loader/Loader";
+import { EmptyState } from "components/EmptyState/EmptyState";
 
 type ProvisionerJobsPageProps = {
 	org: Organization;
@@ -64,12 +67,24 @@ export const ProvisionerJobsPage: FC<ProvisionerJobsPageProps> = ({ org }) => {
 						jobs.length > 0 ? (
 							jobs.map((j) => <JobRow key={j.id} job={j} />)
 						) : (
-							<TableEmpty message="No provisioner jobs found" />
+							<TableRow>
+								<TableCell colSpan={999}>
+									<EmptyState message="No provisioner jobs found" />
+								</TableCell>
+							</TableRow>
 						)
 					) : isLoadingError ? (
-						<TableEmpty message="Error loading the provisioner jobs" />
+						<TableRow>
+							<TableCell colSpan={999}>
+								<EmptyState message="Error loading the provisioner jobs" />
+							</TableCell>
+						</TableRow>
 					) : (
-						<TableLoader />
+						<TableRow>
+							<TableCell colSpan={999}>
+								<Loader />
+							</TableCell>
+						</TableRow>
 					)}
 				</TableBody>
 			</Table>
@@ -127,18 +142,11 @@ const JobRow: FC<JobRowProps> = ({ job }) => {
 							{metadata.template_display_name ?? metadata.template_name}
 						</div>
 					) : (
-						"Not linked to any template"
+						<span className="whitespace-nowrap">Not linked</span>
 					)}
 				</TableCell>
 				<TableCell>
-					<div className="flex items-center gap-1 flex-wrap">
-						{Object.entries(job.tags).map(([k, v]) => (
-							<Badge size="sm" key={k} className="whitespace-nowrap">
-								[{k}
-								{v && `=${v}`}]
-							</Badge>
-						))}
-					</div>
+					<ShrinkTags tags={job.tags} />
 				</TableCell>
 				<TableCell>
 					<JobStatusIndicator job={job} />
@@ -176,13 +184,7 @@ const JobRow: FC<JobRowProps> = ({ job }) => {
 								<span className="[&:first-letter]:uppercase">{job.error}</span>
 							</div>
 						)}
-						<div
-							className={cn([
-								"grid grid-cols-[auto_1fr] gap-x-4 items-center",
-								"[&_span:nth-child(even)]:text-content-primary [&_span:nth-child(even)]:font-mono",
-								"[&_span:nth-child(even)]:leading-[22px]",
-							])}
-						>
+						<DataGrid>
 							<span>Job ID:</span>
 							<span>{job.id}</span>
 
@@ -206,7 +208,16 @@ const JobRow: FC<JobRowProps> = ({ job }) => {
 							<span>
 								{job.queue_position}/{job.queue_size}
 							</span>
-						</div>
+
+							<span>Tags:</span>
+							<span>
+								<Tags>
+									{Object.entries(job.tags).map(([key, value]) => (
+										<Tag key={key} label={key} value={value} />
+									))}
+								</Tags>
+							</span>
+						</DataGrid>
 					</TableCell>
 				</TableRow>
 			)}