[WIP]: Load data and display them in the table

coder · BrunoQuaresma · Feb 18, 2025 · Feb 5, 2025 · Feb 7, 2025 · Feb 7, 2025
commit 643c3626ea522c584bd4f40bd86d14d42acbdbee
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -9,5 +9,14 @@
 		}
 	},
 	// SYS_PTRACE to enable go debugging
-	"runArgs": ["--cap-add=SYS_PTRACE"]
+	"runArgs": [
+		"--cap-add=SYS_PTRACE"
+	],
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"biomejs.biome"
+			]
+		}
+	}
 }
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -2295,6 +2295,13 @@ class ApiMethods {
 		);
 		return res.data;
 	};
+
+	getProvisionerJobs = async (orgId: string) => {
+		const res = await this.axios.get<TypesGen.ProvisionerJob[]>(
+			`/api/v2/organizations/${orgId}/provisionerjobs`,
+		);
+		return res.data;
+	};
 }
 
 // This is a hard coded CSRF token/cookie pair for local development. In prod,

diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -244,6 +244,13 @@ export const organizationPermissions = (organizationId: string | undefined) => {
 	};
 };
 
+export const provisionerJobs = (orgId: string) => {
+	return {
+		queryKey: ["organization", orgId, "provisionerjobs"],
+		queryFn: () => API.getProvisionerJobs(orgId),
+	};
+};
+
 /**
  * Fetch permissions for all provided organizations.
  *

diff --git a/site/src/pages/DeploymentSettingsPage/ProvisionersPage/ProvisionersPage.tsx b/site/src/pages/DeploymentSettingsPage/ProvisionersPage/ProvisionersPage.tsx
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage.tsx
@@ -1,25 +1,52 @@
 import { buildInfo } from "api/queries/buildInfo";
-import { provisionerDaemonGroups } from "api/queries/organizations";
+import {
+	provisionerDaemonGroups,
+	provisionerJobs,
+} from "api/queries/organizations";
+import type { Organization } from "api/typesGenerated";
+import { Avatar } from "components/Avatar/Avatar";
+import { Badge } from "components/Badge/Badge";
+import { Button } from "components/Button/Button";
 import { EmptyState } from "components/EmptyState/EmptyState";
+import { Link } from "components/Link/Link";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "components/Table/Table";
+import { TableEmpty } from "components/TableEmpty/TableEmpty";
+import { TableLoader } from "components/TableLoader/TableLoader";
+import { TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
+import { BanIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { useParams } from "react-router-dom";
+import { docs } from "utils/docs";
 import { pageTitle } from "utils/page";
-import { OrganizationProvisionersPageView } from "./OrganizationProvisionersPageView";
+import { relativeTime } from "utils/time";
 
 const OrganizationProvisionersPage: FC = () => {
-	const { organization: organizationName } = useParams() as {
-		organization: string;
-	};
+	// const { organization: organizationName } = useParams() as {
+	// 	organization: string;
+	// };
 	const { organization } = useOrganizationSettings();
-	const { entitlements } = useDashboard();
-	const { metadata } = useEmbeddedMetadata();
-	const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
-	const provisionersQuery = useQuery(provisionerDaemonGroups(organizationName));
+	// const { entitlements } = useDashboard();
+	// const { metadata } = useEmbeddedMetadata();
+	// const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
+	// const provisionersQuery = useQuery(provisionerDaemonGroups(organizationName));
 
 	if (!organization) {
 		return <EmptyState message="Organization not found" />;
@@ -35,14 +62,124 @@ const OrganizationProvisionersPage: FC = () => {
 					)}
 				</title>
 			</Helmet>
-			<OrganizationProvisionersPageView
-				showPaywall={!entitlements.features.multiple_organizations.enabled}
-				error={provisionersQuery.error}
-				buildInfo={buildInfoQuery.data}
-				provisioners={provisionersQuery.data}
-			/>
+
+			<div className="flex flex-col gap-12">
+				<header className="flex flex-row items-baseline justify-between">
+					<div className="flex flex-col gap-2">
+						<h1 className="text-3xl m-0">Provisioners</h1>
+					</div>
+				</header>
+
+				<main>
+					<Tabs active="jobs">
+						<TabsList>
+							<TabLink value="jobs" to="?tab=jobs">
+								Jobs
+							</TabLink>
+							<TabLink value="daemons" to="?tab=daemons">
+								Daemons
+							</TabLink>
+						</TabsList>
+					</Tabs>
+
+					<div className="mt-6">
+						<JobsTabContent org={organization} />
+					</div>
+				</main>
+			</div>
 		</>
 	);
 };
 
+type JobsTabContentProps = {
+	org: Organization;
+};
+
+const JobsTabContent: FC<JobsTabContentProps> = ({ org }) => {
+	const { organization } = useOrganizationSettings();
+	const { data: jobs, isLoadingError } = useQuery(provisionerJobs(org.id));
+
+	return (
+		<section className="flex flex-col gap-8">
+			<p className="text-sm text-content-secondary m-0 mt-2">
+				Provisioner Jobs are the individual tasks assigned to Provisioners when
+				the workspaces are being built.{" "}
+				<Link href={docs("/admin/provisioners")}>View docs</Link>
+			</p>
+
+			<Table>
+				<TableHeader>
+					<TableRow>
+						<TableHead>Last seen</TableHead>
+						<TableHead>Type</TableHead>
+						<TableHead>Template</TableHead>
+						<TableHead>Tags</TableHead>
+						<TableHead>Status</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{jobs ? (
+						jobs.length > 0 ? (
+							jobs.map(({ metadata, ...job }) => {
+								if (!metadata) {
+									throw new Error(
+										`Metadata is required but it is missing in the job ${job.id}`,
+									);
+								}
+								return (
+									<TableRow key={job.id}>
+										<TableCell className="[&:first-letter]:uppercase">
+											{relativeTime(new Date(job.created_at))}
+										</TableCell>
+										<TableCell>
+											<Badge size="sm">{job.type}</Badge>
+										</TableCell>
+										<TableCell>
+											<div className="flex items-center gap-1">
+												<Avatar
+													variant="icon"
+													src={metadata.template_icon.icon}
+													fallback={template.display_name || template.name}
+												/>
+												{metadata.template_display_name ??
+													metadata.template_name}
+											</div>
+										</TableCell>
+										<TableCell>
+											<Badge size="sm">[foo=bar]</Badge>
+										</TableCell>
+										<TableCell>Completed</TableCell>
+										<TableCell className="text-right">
+											<TooltipProvider>
+												<Tooltip>
+													<TooltipTrigger asChild>
+														<Button
+															aria-label="Cancel job"
+															size="icon"
+															variant="outline"
+														>
+															<BanIcon />
+														</Button>
+													</TooltipTrigger>
+													<TooltipContent>Cancel job</TooltipContent>
+												</Tooltip>
+											</TooltipProvider>
+										</TableCell>
+									</TableRow>
+								);
+							})
+						) : (
+							<TableEmpty message="No provisioner jobs found" />
+						)
+					) : isLoadingError ? (
+						<TableEmpty message="Error loading the provisioner jobs" />
+					) : (
+						<TableLoader />
+					)}
+				</TableBody>
+			</Table>
+		</section>
+	);
+};
+
 export default OrganizationProvisionersPage;