From fbd2efa994292e0f4e15d0ab4c5df718f529c933 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 10 Mar 2026 11:49:50 +0100
Subject: [PATCH] feat: server-side pagination and filtering for admin queues
 page

- Move queue, status, and offset to URL search params (?queue=&status=&offset=)
- Load jobs server-side in +page.server.ts with auth token (matches other admin pages)
- Derive total from adminQueues counts (waiting+active+completed+failed+delayed)
  so pagination knows total without an extra query
- Add fetchFn/token params to getAdminQueueJobs for server-side use
- Retry/remove/pause/resume actions now use invalidateAll() instead of local state

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/frontend/src/lib/services.ts         |  13 +-
 .../src/routes/admin/queues/+page.server.ts   |  34 ++-
 .../src/routes/admin/queues/+page.svelte      | 207 +++++++++---------
 3 files changed, 145 insertions(+), 109 deletions(-)

diff --git a/packages/frontend/src/lib/services.ts b/packages/frontend/src/lib/services.ts
index 66125c3..5fbe506 100644
--- a/packages/frontend/src/lib/services.ts
+++ b/packages/frontend/src/lib/services.ts
@@ -1981,12 +1981,17 @@ export async function getAdminQueueJobs(
   status?: string,
   limit?: number,
   offset?: number,
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
 ): Promise<Job[]> {
   return loggedApiCall("getAdminQueueJobs", async () => {
-    const data = await getGraphQLClient().request<{ adminQueueJobs: Job[] }>(
-      ADMIN_QUEUE_JOBS_QUERY,
-      { queue, status, limit, offset },
-    );
+    const client = token ? getAuthClient(token, fetchFn) : getGraphQLClient(fetchFn);
+    const data = await client.request<{ adminQueueJobs: Job[] }>(ADMIN_QUEUE_JOBS_QUERY, {
+      queue,
+      status,
+      limit,
+      offset,
+    });
     return data.adminQueueJobs;
   });
 }
diff --git a/packages/frontend/src/routes/admin/queues/+page.server.ts b/packages/frontend/src/routes/admin/queues/+page.server.ts
index b214bbd..b8d3432 100644
--- a/packages/frontend/src/routes/admin/queues/+page.server.ts
+++ b/packages/frontend/src/routes/admin/queues/+page.server.ts
@@ -1,7 +1,35 @@
-import { getAdminQueues } from "$lib/services";
+import { getAdminQueues, getAdminQueueJobs } from "$lib/services";
 
-export async function load({ fetch, cookies }) {
+const LIMIT = 25;
+
+export async function load({ fetch, cookies, url }) {
   const token = cookies.get("session_token") || "";
   const queues = await getAdminQueues(fetch, token).catch(() => []);
-  return { queues };
+
+  const queueParam = url.searchParams.get("queue") ?? queues[0]?.name ?? null;
+  const status = url.searchParams.get("status") ?? null;
+  const offset = parseInt(url.searchParams.get("offset") ?? "0") || 0;
+
+  let jobs: Awaited<ReturnType<typeof getAdminQueueJobs>> = [];
+  let total = 0;
+
+  if (queueParam) {
+    jobs = await getAdminQueueJobs(
+      queueParam,
+      status ?? undefined,
+      LIMIT,
+      offset,
+      fetch,
+      token,
+    ).catch(() => []);
+
+    const queueInfo = queues.find((q) => q.name === queueParam);
+    if (queueInfo) {
+      const { waiting, active, completed, failed, delayed } = queueInfo.counts;
+      const counts: Record<string, number> = { waiting, active, completed, failed, delayed };
+      total = status ? (counts[status] ?? 0) : Object.values(counts).reduce((a, b) => a + b, 0);
+    }
+  }
+
+  return { queues, queue: queueParam, status, jobs, total, offset, limit: LIMIT };
 }
diff --git a/packages/frontend/src/routes/admin/queues/+page.svelte b/packages/frontend/src/routes/admin/queues/+page.svelte
index 6b408af..7ac55c2 100644
--- a/packages/frontend/src/routes/admin/queues/+page.svelte
+++ b/packages/frontend/src/routes/admin/queues/+page.svelte
@@ -1,14 +1,10 @@
 <script lang="ts">
-  import { invalidateAll } from "$app/navigation";
+  import { goto, invalidateAll } from "$app/navigation";
+  import { page } from "$app/state";
+  import { SvelteURLSearchParams } from "svelte/reactivity";
   import { toast } from "svelte-sonner";
   import { _ } from "svelte-i18n";
-  import {
-    getAdminQueueJobs,
-    adminRetryJob,
-    adminRemoveJob,
-    adminPauseQueue,
-    adminResumeQueue,
-  } from "$lib/services";
+  import { adminRetryJob, adminRemoveJob, adminPauseQueue, adminResumeQueue } from "$lib/services";
   import { Button } from "$lib/components/ui/button";
   import { Badge } from "$lib/components/ui/badge";
   import type { Job } from "$lib/services";
@@ -16,14 +12,6 @@
 
   const { data } = $props();
 
-  const queues = $derived(data.queues);
-
-  // null means "user hasn't picked yet" — fall back to first queue
-  let selectedQueueOverride = $state<string | null>(null);
-  const selectedQueue = $derived(selectedQueueOverride ?? queues[0]?.name ?? null);
-  let selectedStatus = $state<string | null>(null);
-  let jobs = $state<Job[]>([]);
-  let loadingJobs = $state(false);
   let togglingQueue = $state<string | null>(null);
 
   const STATUS_FILTERS = [
@@ -35,33 +23,28 @@
     { value: "delayed", label: $_("admin.queues.status_delayed") },
   ];
 
-  async function loadJobs() {
-    if (!selectedQueue) return;
-    loadingJobs = true;
-    try {
-      jobs = await getAdminQueueJobs(selectedQueue, selectedStatus ?? undefined, 50, 0);
-    } finally {
-      loadingJobs = false;
+  function navigate(overrides: Record<string, string | null>) {
+    const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+    for (const [k, v] of Object.entries(overrides)) {
+      if (v === null) params.delete(k);
+      else params.set(k, v);
     }
+    goto(`?${params.toString()}`);
   }
 
-  async function selectQueue(name: string) {
-    selectedQueueOverride = name;
-    selectedStatus = null;
-    await loadJobs();
+  function selectQueue(name: string) {
+    navigate({ queue: name, status: null, offset: null });
   }
 
-  async function selectStatus(status: string | null) {
-    selectedStatus = status;
-    await loadJobs();
+  function selectStatus(status: string | null) {
+    navigate({ status, offset: null });
   }
 
   async function retryJob(job: Job) {
     try {
       await adminRetryJob(job.queue, job.id);
       toast.success($_("admin.queues.retry_success"));
-      await loadJobs();
-      await refreshCounts();
+      await invalidateAll();
     } catch {
       toast.error($_("admin.queues.retry_error"));
     }
@@ -71,8 +54,7 @@
     try {
       await adminRemoveJob(job.queue, job.id);
       toast.success($_("admin.queues.remove_success"));
-      jobs = jobs.filter((j) => j.id !== job.id);
-      await refreshCounts();
+      await invalidateAll();
     } catch {
       toast.error($_("admin.queues.remove_error"));
     }
@@ -88,7 +70,7 @@
         await adminPauseQueue(queueName);
         toast.success($_("admin.queues.pause_success"));
       }
-      await refreshCounts();
+      await invalidateAll();
     } catch {
       toast.error(isPaused ? $_("admin.queues.resume_error") : $_("admin.queues.pause_error"));
     } finally {
@@ -96,14 +78,6 @@
     }
   }
 
-  async function refreshCounts() {
-    await invalidateAll();
-  }
-
-  $effect(() => {
-    if (selectedQueue) loadJobs();
-  });
-
   function statusColor(status: string): string {
     switch (status) {
       case "active":
@@ -130,12 +104,17 @@
 <div class="py-3 sm:py-6 lg:pl-6">
   <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.queues.title")}</h1>
+    {#if data.queue && data.total > 0}
+      <span class="text-sm text-muted-foreground">
+        {$_("admin.users.total", { values: { total: data.total } })}
+      </span>
+    {/if}
   </div>
 
   <!-- Queue cards -->
   <div class="flex flex-wrap gap-3 mb-6">
-    {#each queues as queue (queue.name)}
-      {@const isSelected = selectedQueue === queue.name}
+    {#each data.queues as queue (queue.name)}
+      {@const isSelected = data.queue === queue.name}
       <div
         role="button"
         tabindex="0"
@@ -194,12 +173,12 @@
     {/each}
   </div>
 
-  {#if selectedQueue}
+  {#if data.queue}
     <!-- Status filter tabs -->
     <div class="flex gap-1 mb-4 flex-wrap">
       {#each STATUS_FILTERS as f (f.value ?? "all")}
         <Button
-          variant={selectedStatus === f.value ? "default" : "outline"}
+          variant={data.status === f.value ? "default" : "outline"}
           onclick={() => selectStatus(f.value)}
         >
           {f.label}
@@ -233,70 +212,94 @@
           </tr>
         </thead>
         <tbody class="divide-y divide-border/30">
-          {#if loadingJobs}
-            <tr>
-              <td colspan="6" class="px-4 py-8 text-center text-muted-foreground"
-                >{$_("common.loading")}</td
+          {#each data.jobs as job (job.id)}
+            <tr class="hover:bg-muted/10 transition-colors">
+              <td class="px-4 py-3 font-mono text-xs text-muted-foreground">{job.id}</td>
+              <td class="px-4 py-3">
+                <div>
+                  <p class="font-medium">{job.name}</p>
+                  {#if job.failedReason}
+                    <p class="text-xs text-destructive mt-0.5 max-w-xs truncate">
+                      {$_("admin.queues.failed_reason", { values: { reason: job.failedReason } })}
+                    </p>
+                  {/if}
+                </div>
+              </td>
+              <td class="px-4 py-3">
+                <Badge variant="outline" class={statusColor(job.status)}>{job.status}</Badge>
+              </td>
+              <td class="px-4 py-3 text-muted-foreground hidden md:table-cell"
+                >{job.attemptsMade}</td
               >
-            </tr>
-          {:else}
-            {#each jobs as job (job.id)}
-              <tr class="hover:bg-muted/10 transition-colors">
-                <td class="px-4 py-3 font-mono text-xs text-muted-foreground">{job.id}</td>
-                <td class="px-4 py-3">
-                  <div>
-                    <p class="font-medium">{job.name}</p>
-                    {#if job.failedReason}
-                      <p class="text-xs text-destructive mt-0.5 max-w-xs truncate">
-                        {$_("admin.queues.failed_reason", { values: { reason: job.failedReason } })}
-                      </p>
-                    {/if}
-                  </div>
-                </td>
-                <td class="px-4 py-3">
-                  <Badge variant="outline" class={statusColor(job.status)}>{job.status}</Badge>
-                </td>
-                <td class="px-4 py-3 text-muted-foreground hidden md:table-cell"
-                  >{job.attemptsMade}</td
-                >
-                <td class="px-4 py-3 text-muted-foreground hidden lg:table-cell text-xs"
-                  >{formatDate(job.createdAt)}</td
-                >
-                <td class="px-4 py-3 text-right">
-                  <div class="flex items-center justify-end gap-1">
-                    {#if job.status === "failed"}
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        aria-label={$_("admin.queues.retry")}
-                        onclick={() => retryJob(job)}
-                      >
-                        <span class="icon-[ri--restart-line] h-4 w-4"></span>
-                      </Button>
-                    {/if}
+              <td class="px-4 py-3 text-muted-foreground hidden lg:table-cell text-xs"
+                >{formatDate(job.createdAt)}</td
+              >
+              <td class="px-4 py-3 text-right">
+                <div class="flex items-center justify-end gap-1">
+                  {#if job.status === "failed"}
                     <Button
                       size="sm"
                       variant="ghost"
-                      aria-label={$_("admin.queues.remove")}
-                      class="text-destructive hover:text-destructive hover:bg-destructive/10"
-                      onclick={() => removeJob(job)}
+                      aria-label={$_("admin.queues.retry")}
+                      onclick={() => retryJob(job)}
                     >
-                      <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
+                      <span class="icon-[ri--restart-line] h-4 w-4"></span>
                     </Button>
-                  </div>
-                </td>
-              </tr>
-            {/each}
-            {#if jobs.length === 0}
-              <tr>
-                <td colspan="6" class="px-4 py-8 text-center text-muted-foreground"
-                  >{$_("admin.queues.no_jobs")}</td
-                >
-              </tr>
-            {/if}
+                  {/if}
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    aria-label={$_("admin.queues.remove")}
+                    class="text-destructive hover:text-destructive hover:bg-destructive/10"
+                    onclick={() => removeJob(job)}
+                  >
+                    <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
+                  </Button>
+                </div>
+              </td>
+            </tr>
+          {/each}
+          {#if data.jobs.length === 0}
+            <tr>
+              <td colspan="6" class="px-4 py-8 text-center text-muted-foreground"
+                >{$_("admin.queues.no_jobs")}</td
+              >
+            </tr>
           {/if}
         </tbody>
       </table>
     </div>
+
+    {#if data.total > data.limit}
+      <div class="flex items-center justify-between mt-4">
+        <span class="text-sm text-muted-foreground">
+          {$_("admin.users.showing", {
+            values: {
+              start: data.offset + 1,
+              end: Math.min(data.offset + data.limit, data.total),
+              total: data.total,
+            },
+          })}
+        </span>
+        <div class="flex gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={data.offset === 0}
+            onclick={() => navigate({ offset: String(Math.max(0, data.offset - data.limit)) })}
+          >
+            {$_("common.previous")}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={data.offset + data.limit >= data.total}
+            onclick={() => navigate({ offset: String(data.offset + data.limit) })}
+          >
+            {$_("common.next")}
+          </Button>
+        </div>
+      </div>
+    {/if}
   {/if}
 </div>