feat(webapp): paginate the concurrency-keys table, removing the 50-key cap (TRI-12438)

Author: samejr

.server-changes/paginate-concurrency-keys-table.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+The concurrency keys table on a queue's page is now paginated, so queues with thousands of keys can page through all of them instead of only showing the top 50.

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

@@ -1,6 +1,6 @@
 import { type MetaFunction } from "@remix-run/react";
 import { type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { useMemo, type ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import type { QueueItem } from "@trigger.dev/core/v3/schemas";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
@@ -49,6 +49,12 @@ import { SearchInput } from "~/components/primitives/SearchInput";
 import { engine } from "~/v3/runEngine.server";
 import { TimeFilter } from "~/components/runs/v3/SharedFilters";
 import { useSearchParams } from "~/hooks/useSearchParam";
+import { useInterval } from "~/hooks/useInterval";
+import { PaginationControls } from "~/components/primitives/Pagination";
+import type {
+  ConcurrencyKeyRow,
+  ConcurrencyKeysResponse,
+} from "~/routes/resources.queues.concurrency-keys";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { canAccessQueueMetricsUi } from "~/v3/canAccessQueueMetricsUi.server";
 import { requireUserId } from "~/services/session.server";
@@ -270,7 +276,7 @@ export default function Page() {
           </div>
           <div className="flex items-center gap-1.5">
             {view === "keys" && hasKeys ? (
-              <SearchInput placeholder="Search keys…" paramName="query" resetParams={["key"]} />
+              <SearchInput placeholder="Search keys…" paramName="query" resetParams={["key", "page"]} />
             ) : null}
             <TimeFilter
               defaultPeriod={QUEUE_METRICS_DEFAULT_PERIOD}
@@ -329,13 +335,7 @@ export default function Page() {
         {view === "keys" && hasKeys ? (
           <>
             <MetricsLayout.Content>
-              <KeyStatsTable
-                breakdown={ckBreakdown}
-                loadedAt={loadedAt}
-                ids={ids}
-                timeRange={timeRange}
-                queueName={fullName}
-              />
+              <KeyStatsTable ids={ids} timeRange={timeRange} queueName={fullName} />
             </MetricsLayout.Content>
             {selectedKey ? (
               <MetricsLayout.Content inset>
@@ -756,117 +756,171 @@ function GroupedKeySeries({
   );
 }
 
-type KeyRangeStats = { started: number; peakBacklog: number; meanWaitMs: number };
+// One page of the paginated per-key table. The ClickHouse tier is the authority (ranked by peak
+// backlog over the window, with the total on every row so page + count are a single scan); each
+// page's keys are enriched with live "now" counts from Redis server-side. Fetched per page rather
+// than capped at 50, so high-cardinality queues (tens of thousands of keys) page through instead
+// of silently truncating. See resources.queues.concurrency-keys.
+function useConcurrencyKeys(opts: {
+  ids: Ids;
+  timeRange: TimeRangeParams;
+  queueName: string;
+  search: string;
+  page: number;
+}) {
+  const { ids, timeRange, queueName, search, page } = opts;
+  const [data, setData] = useState<ConcurrencyKeysResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const body = useMemo(
+    () =>
+      JSON.stringify({
+        organizationId: ids.organizationId,
+        projectId: ids.projectId,
+        environmentId: ids.environmentId,
+        queueName,
+        period: timeRange.period,
+        from: timeRange.from,
+        to: timeRange.to,
+        search,
+        page,
+      }),
+    [
+      ids.organizationId,
+      ids.projectId,
+      ids.environmentId,
+      queueName,
+      timeRange.period,
+      timeRange.from,
+      timeRange.to,
+      search,
+      page,
+    ]
+  );
+
+  const load = useCallback(() => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setIsLoading(true);
+    fetch("/resources/queues/concurrency-keys", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body,
+      signal: controller.signal,
+    })
+      .then((res) => res.json() as Promise<ConcurrencyKeysResponse>)
+      .then((res) => {
+        if (controller.signal.aborted) return;
+        setData(res);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        if (error instanceof DOMException && error.name === "AbortError") return;
+        if (!controller.signal.aborted) {
+          setData({ success: false, error: error?.message ?? "Network error" });
+          setIsLoading(false);
+        }
+      });
+  }, [body]);
+
+  useEffect(() => {
+    load();
+    return () => abortRef.current?.abort();
+  }, [load]);
 
-// Live breakdown (queued/running now, oldest wait) merged with per-key range stats from
-// the history tier; keys with history but no live backlog still appear. Clicking a key
-// pins the drill-down charts via the `key` search param.
+  // Keep the live "now" counts fresh without a manual reload.
+  useInterval({
+    interval: 30_000,
+    onLoad: false,
+    onFocus: true,
+    pauseWhenHidden: true,
+    callback: load,
+  });
+
+  return { data, isLoading };
+}
+
+// Paginated per-key table: which keys hold the backlog / do the work. Clicking a key pins the
+// drill-down charts via the `key` search param.
 function KeyStatsTable({
-  breakdown,
-  loadedAt,
   ids,
   timeRange,
   queueName,
 }: {
-  breakdown: CkBreakdown;
-  loadedAt: number;
   ids: Ids;
   timeRange: TimeRangeParams;
   queueName: string;
 }) {
   const { value, replace, del } = useSearchParams();
   const selectedKey = value("key");
+  const search = value("query")?.trim() ?? "";
+  const page = Math.max(1, Number(value("page")) || 1);
 
-  const { rows, showLoading } = useQueueMetric(
-    `SELECT concurrency_key,\n  deltaSumTimestampMerge(started_delta) AS started,\n  max(max_queued) AS peak_backlog,\n  if(sum(wait_ms_count) > 0, round(sum(wait_ms_sum) / sum(wait_ms_count)), 0) AS mean_wait\nFROM queue_metrics_by_key\nGROUP BY concurrency_key\nORDER BY peak_backlog DESC\nLIMIT 50`,
-    { ids, timeRange, queueName }
-  );
+  const { data, isLoading } = useConcurrencyKeys({ ids, timeRange, queueName, search, page });
 
-  const merged = useMemo(() => {
-    const range = new Map<string, KeyRangeStats>();
-    for (const r of rows) {
-      range.set(String(r.concurrency_key), {
-        started: toNumber(r.started),
-        peakBacklog: toNumber(r.peak_backlog),
-        meanWaitMs: toNumber(r.mean_wait),
-      });
-    }
-    const liveKeys = new Set(breakdown.keys.map((k) => k.concurrencyKey));
-    const live = breakdown.keys.map((k) => ({
-      key: k.concurrencyKey,
-      queued: k.queued,
-      running: k.running,
-      oldestWaitMs: Math.max(0, loadedAt - k.oldestEnqueuedAt),
-      range: range.get(k.concurrencyKey),
-    }));
-    const historyOnly = [...range.entries()]
-      .filter(([key]) => !liveKeys.has(key))
-      .map(([key, stats]) => ({
-        key,
-        queued: 0,
-        running: 0,
-        oldestWaitMs: null as number | null,
-        range: stats,
-      }));
-    return [...live, ...historyOnly].slice(0, 50);
-  }, [rows, breakdown, loadedAt]);
-
-  // The top-bar search filters the key list by substring (case-insensitive), the same idea as the
-  // Queues page search over queue names.
-  const query = value("query")?.trim().toLowerCase();
-  const filtered = useMemo(
-    () => (query ? merged.filter((r) => r.key.toLowerCase().includes(query)) : merged),
-    [merged, query]
-  );
-
-  if (merged.length === 0) return null;
+  const rows: ConcurrencyKeyRow[] = data?.success ? data.rows : [];
+  const total = data?.success ? data.total : 0;
+  const perPage = data?.success ? data.perPage : 50;
+  const totalPages = Math.max(1, Math.ceil(total / perPage));
+  // Only show a skeleton before the first response; keep prior rows visible while revalidating.
+  const showLoading = isLoading && !data;
 
   return (
-    // Full-bleed, edge-to-edge like the Queues list table: a top border, no rounded side box.
-    <Table containerClassName="border-t">
-      <TableHeader>
-        <TableRow>
-          <TableHeaderCell>Key</TableHeaderCell>
-          <TableHeaderCell alignment="right">Queued now</TableHeaderCell>
-          <TableHeaderCell alignment="right">Running now</TableHeaderCell>
-          <TableHeaderCell alignment="right">Oldest wait</TableHeaderCell>
-          <TableHeaderCell alignment="right">Started</TableHeaderCell>
-          <TableHeaderCell alignment="right">Peak backlog</TableHeaderCell>
-          <TableHeaderCell alignment="right">Mean delay</TableHeaderCell>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {filtered.length === 0 ? (
-          <TableBlankRow colSpan={7} className="text-text-dimmed">
-            No keys match “{query}”
-          </TableBlankRow>
-        ) : null}
-        {filtered.map((row) => (
-          <TableRow
-            key={row.key}
-            isSelected={selectedKey === row.key}
-            className="cursor-pointer"
-            onClick={() => (selectedKey === row.key ? del("key") : replace({ key: row.key }))}
-          >
-            <TableCell>{row.key}</TableCell>
-            <TableCell alignment="right">{row.queued.toLocaleString()}</TableCell>
-            <TableCell alignment="right">{row.running.toLocaleString()}</TableCell>
-            <TableCell alignment="right">
-              {row.oldestWaitMs === null ? "–" : formatWaitMs(row.oldestWaitMs)}
-            </TableCell>
-            <TableCell alignment="right">
-              {row.range ? row.range.started.toLocaleString() : showLoading ? "…" : "–"}
-            </TableCell>
-            <TableCell alignment="right">
-              {row.range ? row.range.peakBacklog.toLocaleString() : showLoading ? "…" : "–"}
-            </TableCell>
-            <TableCell alignment="right">
-              {row.range && row.range.meanWaitMs > 0 ? formatWaitMs(row.range.meanWaitMs) : "–"}
-            </TableCell>
+    <div className="flex flex-col">
+      {/* Full-bleed, edge-to-edge like the Queues list table: a top border, no rounded side box. */}
+      <Table containerClassName="border-t">
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell>Key</TableHeaderCell>
+            <TableHeaderCell alignment="right">Queued now</TableHeaderCell>
+            <TableHeaderCell alignment="right">Running now</TableHeaderCell>
+            <TableHeaderCell alignment="right">Oldest wait</TableHeaderCell>
+            <TableHeaderCell alignment="right">Started</TableHeaderCell>
+            <TableHeaderCell alignment="right">Peak backlog</TableHeaderCell>
+            <TableHeaderCell alignment="right">Mean delay</TableHeaderCell>
           </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+        </TableHeader>
+        <TableBody>
+          {showLoading ? (
+            <TableBlankRow colSpan={7} className="text-text-dimmed">
+              Loading…
+            </TableBlankRow>
+          ) : rows.length === 0 ? (
+            <TableBlankRow colSpan={7} className="text-text-dimmed">
+              {search ? `No keys match “${search}”` : "No concurrency keys"}
+            </TableBlankRow>
+          ) : (
+            rows.map((row) => (
+              <TableRow
+                key={row.key}
+                isSelected={selectedKey === row.key}
+                className="cursor-pointer"
+                onClick={() => (selectedKey === row.key ? del("key") : replace({ key: row.key }))}
+              >
+                <TableCell>{row.key}</TableCell>
+                <TableCell alignment="right">{row.queued.toLocaleString()}</TableCell>
+                <TableCell alignment="right">{row.running.toLocaleString()}</TableCell>
+                <TableCell alignment="right">
+                  {row.oldestWaitMs === null ? "–" : formatWaitMs(row.oldestWaitMs)}
+                </TableCell>
+                <TableCell alignment="right">{row.started.toLocaleString()}</TableCell>
+                <TableCell alignment="right">{row.peakBacklog.toLocaleString()}</TableCell>
+                <TableCell alignment="right">
+                  {row.meanWaitMs > 0 ? formatWaitMs(row.meanWaitMs) : "–"}
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+      {totalPages > 1 ? (
+        <div className="flex justify-end px-3 py-2">
+          <PaginationControls currentPage={page} totalPages={totalPages} />
+        </div>
+      ) : null}
+    </div>
   );
 }