coder · BrunoQuaresma · Feb 18, 2025 · Feb 18, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -376,6 +376,10 @@ export type GetJFrogXRayScanParams = {
 	agentId: string;
 };
 
+export type GetProvisionerJobsParams = {
+	ids?: string[];
+};
+
 export class MissingBuildParameters extends Error {
 	parameters: TypesGen.TemplateVersionParameter[] = [];
 	versionId: string;
@@ -2316,9 +2320,18 @@ class ApiMethods {
 		return res.data;
 	};
 
-	getProvisionerJobs = async (orgId: string) => {
+	getProvisionerJobs = async (
+		orgId: string,
+		params?: GetProvisionerJobsParams,
+	) => {
+		const urlParams = new URLSearchParams();
+
+		if (params?.ids) {
+			urlParams.set("ids", params.ids.join(","));
+		}
+
 		const res = await this.axios.get<TypesGen.ProvisionerJob[]>(
-			`/api/v2/organizations/${orgId}/provisionerjobs`,
+			`/api/v2/organizations/${orgId}/provisionerjobs?${urlParams}`,
 		);
 		return res.data;
 	};

diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -1,4 +1,4 @@
-import { API } from "api/api";
+import { API, type GetProvisionerJobsParams } from "api/api";
 import type {
 	AuthorizationResponse,
 	CreateOrganizationRequest,
@@ -244,16 +244,18 @@ export const organizationPermissions = (organizationId: string | undefined) => {
 	};
 };
 
-export const provisionerJobQueryKey = (orgId: string) => [
-	"organization",
-	orgId,
-	"provisionerjobs",
-];
+export const provisionerJobQueryKey = (
+	orgId: string,
+	params?: GetProvisionerJobsParams,
+) => ["organization", orgId, "provisionerjobs", params];
 
-export const provisionerJobs = (orgId: string) => {
+export const provisionerJobs = (
+	orgId: string,
+	params?: GetProvisionerJobsParams,
+) => {
 	return {
-		queryKey: provisionerJobQueryKey(orgId),
-		queryFn: () => API.getProvisionerJobs(orgId),
+		queryKey: provisionerJobQueryKey(orgId, params),
+		queryFn: () => API.getProvisionerJobs(orgId, params),
 	};
 };
 

diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx
@@ -10,7 +10,7 @@ import { cn } from "utils/cn";
 export const buttonVariants = cva(
 	`inline-flex items-center justify-center gap-1 whitespace-nowrap
 	border-solid rounded-md transition-colors
-	text-sm font-semibold font-medium cursor-pointer no-underline
+	text-sm font-semibold font-medium cursor-pointer no-underline hover:no-underline
 	focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
 	disabled:pointer-events-none disabled:text-content-disabled
 	[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:p-0.5`,
@@ -30,6 +30,7 @@ export const buttonVariants = cva(
 			size: {
 				lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg",
 				sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm",
+				xs: "h-[22px] text-2xs py-1 px-2",
 				icon: "size-8 px-1.5 [&_svg]:size-icon-sm",
 			},
 		},

diff --git a/site/src/pages/OrganizationSettingsPage/ProvisionersPage/DataGrid.tsx b/site/src/pages/OrganizationSettingsPage/ProvisionersPage/DataGrid.tsx
@@ -10,7 +10,7 @@ export const DataGrid: FC<HTMLProps<HTMLDListElement>> = ({
 			{...props}
 			className={cn([
 				"m-0 grid grid-cols-[auto_1fr] gap-x-4 items-center",
-				"[&_dt]:text-content-primary [&_dt]:font-mono [&_dt]:leading-[22px]",
+				"[&_dd]:text-content-primary [&_dd]:font-mono [&_dd]:leading-[22px]",
 				className,
 			])}
 		/>

diff --git a/site/src/pages/OrganizationSettingsPage/ProvisionersPage/JobStatusIndicator.tsx b/site/src/pages/OrganizationSettingsPage/ProvisionersPage/JobStatusIndicator.tsx
@@ -3,13 +3,15 @@ import type {
 	ProvisionerJob,
 	ProvisionerJobStatus,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import {
 	StatusIndicator,
 	StatusIndicatorDot,
 	type StatusIndicatorProps,
 } from "components/StatusIndicator/StatusIndicator";
 import { TriangleAlertIcon } from "lucide-react";
 import type { FC } from "react";
+import { Link as RouterLink } from "react-router-dom";
 
 const variantByStatus: Record<
 	ProvisionerJobStatus,
@@ -55,6 +57,9 @@ export const DaemonJobStatusIndicator: FC<DaemonJobStatusIndicatorProps> = ({
 			{job.status === "failed" && (
 				<TriangleAlertIcon className="size-icon-xs p-[1px]" />
 			)}
+			<Button size="xs" variant="outline" asChild>
+				<RouterLink to={`?id=${job.id}`}>View job</RouterLink>
+			</Button>
 		</StatusIndicator>
 	);
 };
diff --git a/site/src/pages/OrganizationSettingsPage/ProvisionersPage/ProvisionerDaemonsPage.tsx b/site/src/pages/OrganizationSettingsPage/ProvisionersPage/ProvisionerDaemonsPage.tsx
@@ -121,7 +121,7 @@ const DaemonRow: FC<DaemonRowProps> = ({ daemon }) => {
 	return (
 		<>
 			<TableRow key={daemon.id}>
-				<TableCell>
+				<TableCell className="w-52">
 					<button
 						className={cn([
 							"flex items-center gap-1 p-0 bg-transparent border-0 text-inherit text-xs cursor-pointer",

diff --git a/site/src/pages/OrganizationSettingsPage/ProvisionersPage/ProvisionerJobsPage.tsx b/site/src/pages/OrganizationSettingsPage/ProvisionersPage/ProvisionerJobsPage.tsx
@@ -1,5 +1,5 @@
 import { provisionerJobs } from "api/queries/organizations";
-import type { Organization, ProvisionerJob } from "api/typesGenerated";
+import type { ProvisionerJob } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Badge } from "components/Badge/Badge";
 import { Button } from "components/Button/Button";
@@ -14,6 +14,8 @@ import {
 	TableHeader,
 	TableRow,
 } from "components/Table/Table";
+import { useDebouncedValue } from "hooks/debounce";
+import { useSearchParamsKey } from "hooks/useSearchParamsKey";
 import {
 	ChevronDownIcon,
 	ChevronRightIcon,
@@ -27,6 +29,7 @@ import { relativeTime } from "utils/time";
 import { CancelJobButton } from "./CancelJobButton";
 import { DataGrid } from "./DataGrid";
 import { JobStatusIndicator } from "./JobStatusIndicator";
+import { SearchInput } from "./SearchInput";
 import { Tag, Tags, TruncateTags } from "./Tags";
 
 type ProvisionerJobsPageProps = {
@@ -36,22 +39,37 @@ type ProvisionerJobsPageProps = {
 export const ProvisionerJobsPage: FC<ProvisionerJobsPageProps> = ({
 	orgId,
 }) => {
+	const id = useSearchParamsKey({
+		key: "id",
+		defaultValue: "",
+	});
+	const debouncedId = useDebouncedValue(id.value, 500);
 	const {
 		data: jobs,
 		isLoadingError,
 		refetch,
-	} = useQuery(provisionerJobs(orgId));
+	} = useQuery(provisionerJobs(orgId, { ids: [debouncedId] }));
 
 	return (
-		<section className="flex flex-col gap-8">
+		<section className="flex flex-col">
 			<h2 className="sr-only">Provisioner jobs</h2>
 			<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>
+			<div className="mt-8">
+				<SearchInput
+					placeholder="Search provisioner jobs..."
+					value={id.value}
+					onChange={(e) => {
+						id.setValue(e.currentTarget.value);
+					}}
+				/>
+			</div>
+
+			<Table className="mt-6">
 				<TableHeader>
 					<TableRow>
 						<TableHead>Created</TableHead>
@@ -106,7 +124,7 @@ const JobRow: FC<JobRowProps> = ({ job }) => {
 	return (
 		<>
 			<TableRow key={job.id}>
-				<TableCell>
+				<TableCell className="w-52">
 					<button
 						className={cn([
 							"flex items-center gap-1 p-0 bg-transparent border-0 text-inherit text-xs cursor-pointer",

diff --git a/site/src/pages/OrganizationSettingsPage/ProvisionersPage/SearchInput.stories.tsx b/site/src/pages/OrganizationSettingsPage/ProvisionersPage/SearchInput.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SearchInput } from "./SearchInput";
+
+const meta: Meta<typeof SearchInput> = {
+	title: "pages/OrganizationSettingsPage/ProvisionersPage/SearchInput",
+	component: SearchInput,
+	args: {
+		placeholder: "Search provisioner jobs...",
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+
+export const Default: Story = {};
diff --git a/site/src/pages/OrganizationSettingsPage/ProvisionersPage/SearchInput.tsx b/site/src/pages/OrganizationSettingsPage/ProvisionersPage/SearchInput.tsx
@@ -0,0 +1,22 @@
+import { Input } from "components/Input/Input";
+import { SearchIcon } from "lucide-react";
+import type { FC, HTMLProps } from "react";
+import { cn } from "utils/cn";
+
+export const SearchInput: FC<HTMLProps<HTMLInputElement>> = ({
+	className,
+	...props
+}) => {
+	return (
+		<div className="relative w-[400px]">
+			<Input
+				{...props}
+				className={cn([
+					"pl-[34px] pr-2 h-[30px] text-xs md:text-xs rounded-md text-content-primary",
+					className,
+				])}
+			/>
+			<SearchIcon className="left-2 top-1.5 absolute size-icon-sm text-content-secondary p-0.5" />
+		</div>
+	);
+};
diff --git a/site/src/pages/OrganizationSettingsPage/ProvisionersPage/Tags.tsx b/site/src/pages/OrganizationSettingsPage/ProvisionersPage/Tags.tsx
@@ -28,11 +28,11 @@ export const Tag: FC<TagProps> = ({ label, value }) => {
 	);
 };
 
-type TagsProps = {
+type TruncateTagsProps = {
 	tags: Record<string, string>;
 };
 
-export const TruncateTags: FC<TagsProps> = ({ tags }) => {
+export const TruncateTags: FC<TruncateTagsProps> = ({ tags }) => {
 	const keys = Object.keys(tags);
 
 	if (keys.length === 0) {