Load 100 jobs

BrunoQuaresma · BrunoQuaresma · commit 6f426b3b98ea · 2025-04-02T13:02:18.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -397,6 +397,11 @@ export class MissingBuildParameters extends Error {
 	}
 }
 
+export type GetProvisionerJobsParams = {
+	status?: TypesGen.ProvisionerJobStatus;
+	limit?: number;
+};
+
 /**
  * This is the container for all API methods. It's split off to make it more
  * clear where API methods should go, but it is eventually merged into the Api
@@ -2394,14 +2399,11 @@ class ApiMethods {
 
 	getProvisionerJobs = async (
 		orgId: string,
-		status?: TypesGen.ProvisionerJobStatus,
+		params: GetProvisionerJobsParams = {},
 	) => {
-		const params = new URLSearchParams();
-		if (status) {
-			params.append("status", status);
-		}
 		const res = await this.axios.get<TypesGen.ProvisionerJob[]>(
-			`/api/v2/organizations/${orgId}/provisionerjobs?${params.toString()}`,
+			`/api/v2/organizations/${orgId}/provisionerjobs`,
+			{ params },
 		);
 		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 {
 	CreateOrganizationRequest,
 	GroupSyncSettings,
@@ -237,20 +237,18 @@ export const patchRoleSyncSettings = (
 	};
 };
 
-export const provisionerJobsQueryKey = (orgId: string, status?: string) => [
-	"organization",
-	orgId,
-	"provisionerjobs",
-	status,
-];
+export const provisionerJobsQueryKey = (
+	orgId: string,
+	params: GetProvisionerJobsParams = {},
+) => ["organization", orgId, "provisionerjobs", params];
 
 export const provisionerJobs = (
 	orgId: string,
-	status?: ProvisionerJobStatus,
+	params: GetProvisionerJobsParams = {},
 ) => {
 	return {
-		queryKey: provisionerJobsQueryKey(orgId, status),
-		queryFn: () => API.getProvisionerJobs(orgId, status),
+		queryKey: provisionerJobsQueryKey(orgId, params),
+		queryFn: () => API.getProvisionerJobs(orgId, params),
 	};
 };
 
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPage.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPage.tsx
@@ -5,22 +5,24 @@ import type { FC } from "react";
 import { useQuery } from "react-query";
 import { useSearchParams } from "react-router-dom";
 import OrganizationProvisionerJobsPageView from "./OrganizationProvisionerJobsPageView";
+import type { GetProvisionerJobsParams } from "api/api";
 
 const OrganizationProvisionerJobsPage: FC = () => {
 	const { organization } = useOrganizationSettings();
-	const [params, setParams] = useSearchParams();
+	const [searchParams, setSearchParams] = useSearchParams();
 	const filter = {
-		status: params.get("status") || "",
+		status: searchParams.get("status") || "",
 	};
+	const queryParams = {
+		...filter,
+		limit: 100,
+	} as GetProvisionerJobsParams;
 	const {
 		data: jobs,
 		isLoadingError,
 		refetch,
 	} = useQuery({
-		...provisionerJobs(
-			organization?.id || "",
-			filter.status as ProvisionerJobStatus,
-		),
+		...provisionerJobs(organization?.id || "", queryParams),
 		enabled: organization !== undefined,
 	});
 
@@ -31,7 +33,7 @@ const OrganizationProvisionerJobsPage: FC = () => {
 			organization={organization}
 			error={isLoadingError}
 			onRetry={refetch}
-			onFilterChange={setParams}
+			onFilterChange={setSearchParams}
 		/>
 	);
 };
