perf(webapp): skip queue search count

Skip the count query when filtering queues and paginate search results with hasMore instead.

Author: kathiekiwi

.server-changes/fix-queue-search-performance.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Speed up queue search by skipping count on filtered queries and using hasMore pagination

apps/webapp/app/components/primitives/Pagination.tsx

@@ -7,14 +7,23 @@ import { LinkButton } from "./Buttons";
 export function PaginationControls({
   currentPage,
   totalPages,
+  hasNextPage,
   showPageNumbers = true,
 }: {
   currentPage: number;
   totalPages: number;
+  /** When set, Next/visibility use this instead of totalPages (filtered lists without a total count). */
+  hasNextPage?: boolean;
   showPageNumbers?: boolean;
 }) {
   const location = useLocation();
-  if (totalPages <= 1) {
+  const isFilteredMode = hasNextPage !== undefined;
+  const showPagination = isFilteredMode
+    ? currentPage > 1 || hasNextPage
+    : totalPages > 1;
+  const nextDisabled = isFilteredMode ? !hasNextPage : currentPage === totalPages;
+
+  if (!showPagination) {
     return null;
   }
 
@@ -42,8 +51,8 @@ export function PaginationControls({
             TrailingIcon={ChevronRightIcon}
             shortcut={{ key: "k" }}
             tooltip="Next"
-            disabled={currentPage === totalPages}
-            className={cn("px-2", currentPage !== totalPages ? "group" : "")}
+            disabled={nextDisabled}
+            className={cn("px-2", !nextDisabled ? "group" : "")}
           />
         </>
       ) : (
@@ -66,23 +75,21 @@ export function PaginationControls({
           <div
             className={cn(
               "order-2 h-6 w-px bg-charcoal-600 transition-colors peer-hover/next:bg-charcoal-550 peer-hover/prev:bg-charcoal-550",
-              currentPage === 1 && currentPage === totalPages && "opacity-30"
+              currentPage === 1 && nextDisabled && "opacity-30"
             )}
           />
 
-          <div
-            className={cn("peer/next order-3", currentPage === totalPages && "pointer-events-none")}
-          >
+          <div className={cn("peer/next order-3", nextDisabled && "pointer-events-none")}>
             <LinkButton
               to={pageUrl(location, currentPage + 1)}
               variant="secondary/small"
               TrailingIcon={ChevronRightIcon}
               shortcut={{ key: "k" }}
               tooltip="Next"
-              disabled={currentPage === totalPages}
+              disabled={nextDisabled}
               className={cn(
                 "flex items-center rounded-l-none border-l-0 pl-[0.5625rem] pr-2",
-                currentPage === totalPages && "cursor-not-allowed opacity-50"
+                nextDisabled && "cursor-not-allowed opacity-50"
               )}
             />
           </div>

apps/webapp/app/presenters/v3/QueueListPresenter.server.ts

@@ -1,10 +1,14 @@
-import { TaskQueueType } from "@trigger.dev/database";
+import type { RunEngine } from "@internal/run-engine";
+import { Prisma, TaskQueueType } from "@trigger.dev/database";
+import { type PrismaClientOrTransaction } from "~/db.server";
 import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { determineEngineVersion } from "~/v3/engineVersion.server";
 import { engine } from "~/v3/runEngine.server";
 import { BasePresenter } from "./basePresenter.server";
 import { toQueueItem } from "./QueueRetrievePresenter.server";
 
+type QueueListEngine = Pick<RunEngine, "lengthOfQueues" | "currentConcurrencyOfQueues">;
+
 const DEFAULT_ITEMS_PER_PAGE = 25;
 const MAX_ITEMS_PER_PAGE = 100;
 
@@ -13,12 +17,54 @@ const typeToDBQueueType: Record<"task" | "custom", TaskQueueType> = {
   custom: TaskQueueType.NAMED,
 };
 
+export type QueueListFilteredPagination = {
+  mode: "filtered";
+  currentPage: number;
+  hasMore: boolean;
+};
+
+export type QueueListUnfilteredPagination = {
+  mode: "unfiltered";
+  currentPage: number;
+  totalPages: number;
+  count: number;
+};
+
+export type QueueListPagination = QueueListFilteredPagination | QueueListUnfilteredPagination;
+
+function buildQueueListWhere(
+  environmentId: string,
+  query: string | undefined,
+  type: "task" | "custom" | undefined
+): Prisma.TaskQueueWhereInput {
+  const trimmedQuery = query?.trim();
+
+  return {
+    runtimeEnvironmentId: environmentId,
+    version: "V2",
+    name: trimmedQuery
+      ? {
+          contains: trimmedQuery,
+          mode: "insensitive",
+        }
+      : undefined,
+    type: type ? typeToDBQueueType[type] : undefined,
+  };
+}
+
 export class QueueListPresenter extends BasePresenter {
   private readonly perPage: number;
+  private readonly engineClient: QueueListEngine;
 
-  constructor(perPage: number = DEFAULT_ITEMS_PER_PAGE) {
-    super();
+  constructor(
+    perPage: number = DEFAULT_ITEMS_PER_PAGE,
+    prismaClient?: PrismaClientOrTransaction,
+    replicaClient?: PrismaClientOrTransaction,
+    engineClient: QueueListEngine = engine
+  ) {
+    super(prismaClient, replicaClient);
     this.perPage = Math.min(perPage, MAX_ITEMS_PER_PAGE);
+    this.engineClient = engineClient;
   }
 
   public async call({
@@ -33,26 +79,14 @@ export class QueueListPresenter extends BasePresenter {
     perPage?: number;
     type?: "task" | "custom";
   }) {
-    const hasFilters = (query !== undefined && query.length > 0) || type !== undefined;
+    const hasFilters = Boolean(query?.trim()) || type !== undefined;
 
-    // Get total count for pagination
-    const totalQueues = await this._replica.taskQueue.count({
-      where: {
-        runtimeEnvironmentId: environment.id,
-        version: "V2",
-        name: query
-          ? {
-              contains: query,
-              mode: "insensitive",
-            }
-          : undefined,
-        type: type ? typeToDBQueueType[type] : undefined,
-      },
-    });
-
-    //check the engine is the correct version
     const engineVersion = await determineEngineVersion({ environment });
     if (engineVersion === "V1") {
+      const totalQueues = await this._replica.taskQueue.count({
+        where: buildQueueListWhere(environment.id, query, type),
+      });
+
       if (totalQueues === 0) {
         const oldQueue = await this._replica.taskQueue.findFirst({
           where: {
@@ -78,10 +112,30 @@ export class QueueListPresenter extends BasePresenter {
       };
     }
 
+    if (hasFilters) {
+      const { queues, hasMore } = await this.getFilteredQueues(environment, query, page, type);
+
+      return {
+        success: true as const,
+        queues,
+        pagination: {
+          mode: "filtered" as const,
+          currentPage: page,
+          hasMore,
+        },
+        hasFilters,
+      };
+    }
+
+    const totalQueues = await this._replica.taskQueue.count({
+      where: buildQueueListWhere(environment.id, query, type),
+    });
+
     return {
       success: true as const,
-      queues: await this.getQueuesWithPagination(environment, query, page, type),
+      queues: await this.getUnfilteredQueues(environment, page, type),
       pagination: {
+        mode: "unfiltered" as const,
         currentPage: page,
         totalPages: Math.ceil(totalQueues / this.perPage),
         count: totalQueues,
@@ -91,24 +145,47 @@ export class QueueListPresenter extends BasePresenter {
     };
   }
 
-  private async getQueuesWithPagination(
+  private async getFilteredQueues(
     environment: AuthenticatedEnvironment,
     query: string | undefined,
     page: number,
     type: "task" | "custom" | undefined
   ) {
     const queues = await this._replica.taskQueue.findMany({
-      where: {
-        runtimeEnvironmentId: environment.id,
-        version: "V2",
-        name: query
-          ? {
-              contains: query,
-              mode: "insensitive",
-            }
-          : undefined,
-        type: type ? typeToDBQueueType[type] : undefined,
+      where: buildQueueListWhere(environment.id, query, type),
+      select: {
+        friendlyId: true,
+        name: true,
+        orderableName: true,
+        concurrencyLimit: true,
+        concurrencyLimitBase: true,
+        concurrencyLimitOverriddenAt: true,
+        concurrencyLimitOverriddenBy: true,
+        type: true,
+        paused: true,
+      },
+      orderBy: {
+        orderableName: "asc",
       },
+      skip: (page - 1) * this.perPage,
+      take: this.perPage + 1,
+    });
+
+    const hasMore = queues.length > this.perPage;
+
+    return {
+      queues: await this.enrichQueues(environment, queues.slice(0, this.perPage)),
+      hasMore,
+    };
+  }
+
+  private async getUnfilteredQueues(
+    environment: AuthenticatedEnvironment,
+    page: number,
+    type: "task" | "custom" | undefined
+  ) {
+    const queues = await this._replica.taskQueue.findMany({
+      where: buildQueueListWhere(environment.id, undefined, type),
       select: {
         friendlyId: true,
         name: true,
@@ -127,12 +204,29 @@ export class QueueListPresenter extends BasePresenter {
       take: this.perPage,
     });
 
+    return this.enrichQueues(environment, queues);
+  }
+
+  private async enrichQueues(
+    environment: AuthenticatedEnvironment,
+    queues: {
+      friendlyId: string;
+      name: string;
+      orderableName: string | null;
+      concurrencyLimit: number | null;
+      concurrencyLimitBase: number | null;
+      concurrencyLimitOverriddenAt: Date | null;
+      concurrencyLimitOverriddenBy: string | null;
+      type: TaskQueueType;
+      paused: boolean;
+    }[]
+  ) {
     const results = await Promise.all([
-      engine.lengthOfQueues(
+      this.engineClient.lengthOfQueues(
         environment,
         queues.map((q) => q.name)
       ),
-      engine.currentConcurrencyOfQueues(
+      this.engineClient.currentConcurrencyOfQueues(
         environment,
         queues.map((q) => q.name)
       ),
@@ -149,7 +243,6 @@ export class QueueListPresenter extends BasePresenter {
 
     const overriddenByMap = new Map(overriddenByUsers.map((u) => [u.id, u]));
 
-    // Transform queues to include running and queued counts
     return queues.map((queue) =>
       toQueueItem({
         friendlyId: queue.friendlyId,

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx

@@ -440,7 +440,10 @@ export default function Page() {
                 <QueueFilters />
                 <PaginationControls
                   currentPage={pagination.currentPage}
-                  totalPages={pagination.totalPages}
+                  totalPages={pagination.mode === "unfiltered" ? pagination.totalPages : 1}
+                  hasNextPage={
+                    pagination.mode === "filtered" ? pagination.hasMore : undefined
+                  }
                   showPageNumbers={false}
                 />
               </div>

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues.ts

@@ -64,7 +64,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       paused: queue.paused,
     })),
     currentPage: result.pagination.currentPage,
-    hasMore: result.pagination.currentPage < result.pagination.totalPages,
+    hasMore: result.pagination.mode === "filtered" ? result.pagination.hasMore : false,
     hasFilters: result.hasFilters,
   };
 }