feat: add BullMQ job queue with admin monitoring UI
- Add BullMQ to backend; mail jobs (verification, password reset) now enqueued instead of sent inline - Mail worker processes jobs with 3-attempt exponential backoff retry - Admin GraphQL resolvers: adminQueues, adminQueueJobs, adminRetryJob, adminRemoveJob, adminPauseQueue, adminResumeQueue - Admin frontend page at /admin/queues: queue cards with counts, job table with status filter, retry/remove/pause actions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,11 @@
|
||||
href: "/admin/recordings",
|
||||
icon: "icon-[ri--record-circle-line]",
|
||||
},
|
||||
{
|
||||
name: $_("admin.nav.queues"),
|
||||
href: "/admin/queues",
|
||||
icon: "icon-[ri--stack-line]",
|
||||
},
|
||||
]);
|
||||
|
||||
function isActive(href: string) {
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import { getAdminQueues } from "$lib/services";
|
||||
|
||||
export async function load({ fetch, cookies }) {
|
||||
const token = cookies.get("session_token") || "";
|
||||
const queues = await getAdminQueues(fetch, token).catch(() => []);
|
||||
return { queues };
|
||||
}
|
||||
298
packages/frontend/src/routes/admin/queues/+page.svelte
Normal file
298
packages/frontend/src/routes/admin/queues/+page.svelte
Normal file
@@ -0,0 +1,298 @@
|
||||
<script lang="ts">
|
||||
import { invalidateAll } from "$app/navigation";
|
||||
import { toast } from "svelte-sonner";
|
||||
import { _ } from "svelte-i18n";
|
||||
import {
|
||||
getAdminQueueJobs,
|
||||
adminRetryJob,
|
||||
adminRemoveJob,
|
||||
adminPauseQueue,
|
||||
adminResumeQueue,
|
||||
} from "$lib/services";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Badge } from "$lib/components/ui/badge";
|
||||
import type { Job, QueueInfo } from "$lib/services";
|
||||
|
||||
const { data } = $props();
|
||||
|
||||
const queues = $derived(data.queues);
|
||||
let selectedQueue = $state<string | null>(data.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 = [
|
||||
{ value: null, label: $_("admin.queues.status_all") },
|
||||
{ value: "waiting", label: $_("admin.queues.status_waiting") },
|
||||
{ value: "active", label: $_("admin.queues.status_active") },
|
||||
{ value: "completed", label: $_("admin.queues.status_completed") },
|
||||
{ value: "failed", label: $_("admin.queues.status_failed") },
|
||||
{ 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;
|
||||
}
|
||||
}
|
||||
|
||||
async function selectQueue(name: string) {
|
||||
selectedQueue = name;
|
||||
selectedStatus = null;
|
||||
await loadJobs();
|
||||
}
|
||||
|
||||
async function selectStatus(status: string | null) {
|
||||
selectedStatus = status;
|
||||
await loadJobs();
|
||||
}
|
||||
|
||||
async function retryJob(job: Job) {
|
||||
try {
|
||||
await adminRetryJob(job.queue, job.id);
|
||||
toast.success($_("admin.queues.retry_success"));
|
||||
await loadJobs();
|
||||
await refreshCounts();
|
||||
} catch {
|
||||
toast.error($_("admin.queues.retry_error"));
|
||||
}
|
||||
}
|
||||
|
||||
async function removeJob(job: Job) {
|
||||
try {
|
||||
await adminRemoveJob(job.queue, job.id);
|
||||
toast.success($_("admin.queues.remove_success"));
|
||||
jobs = jobs.filter((j) => j.id !== job.id);
|
||||
await refreshCounts();
|
||||
} catch {
|
||||
toast.error($_("admin.queues.remove_error"));
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleQueue(queueName: string, isPaused: boolean) {
|
||||
togglingQueue = queueName;
|
||||
try {
|
||||
if (isPaused) {
|
||||
await adminResumeQueue(queueName);
|
||||
toast.success($_("admin.queues.resume_success"));
|
||||
} else {
|
||||
await adminPauseQueue(queueName);
|
||||
toast.success($_("admin.queues.pause_success"));
|
||||
}
|
||||
await refreshCounts();
|
||||
} catch {
|
||||
toast.error(isPaused ? $_("admin.queues.resume_error") : $_("admin.queues.pause_error"));
|
||||
} finally {
|
||||
togglingQueue = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshCounts() {
|
||||
await invalidateAll();
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (selectedQueue) loadJobs();
|
||||
});
|
||||
|
||||
function statusColor(status: string): string {
|
||||
switch (status) {
|
||||
case "active":
|
||||
return "text-blue-500 border-blue-500/30 bg-blue-500/10";
|
||||
case "completed":
|
||||
return "text-green-500 border-green-500/30 bg-green-500/10";
|
||||
case "failed":
|
||||
return "text-destructive border-destructive/30 bg-destructive/10";
|
||||
case "delayed":
|
||||
return "text-yellow-500 border-yellow-500/30 bg-yellow-500/10";
|
||||
default:
|
||||
return "text-muted-foreground border-border/40 bg-muted/20";
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(iso: string | null): string {
|
||||
if (!iso) return "—";
|
||||
return new Date(iso).toLocaleString();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="py-3 sm:py-6 sm:pl-6">
|
||||
<div class="flex items-center justify-between mb-6 px-3 sm:px-0">
|
||||
<h1 class="text-2xl font-bold">{$_("admin.queues.title")}</h1>
|
||||
</div>
|
||||
|
||||
<!-- Queue cards -->
|
||||
<div class="flex flex-wrap gap-3 mb-6 px-3 sm:px-0">
|
||||
{#each queues as queue (queue.name)}
|
||||
{@const isSelected = selectedQueue === queue.name}
|
||||
<button
|
||||
class={`flex-1 min-w-48 rounded-lg border p-4 text-left transition-colors cursor-pointer ${
|
||||
isSelected
|
||||
? "border-primary/50 bg-primary/5"
|
||||
: "border-border/40 bg-card hover:border-border/70"
|
||||
}`}
|
||||
onclick={() => selectQueue(queue.name)}
|
||||
aria-pressed={isSelected}
|
||||
>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="font-semibold capitalize">{queue.name}</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
{#if queue.isPaused}
|
||||
<Badge variant="outline" class="text-yellow-600 border-yellow-500/40 bg-yellow-500/10"
|
||||
>{$_("admin.queues.paused_badge")}</Badge
|
||||
>
|
||||
{/if}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
class="h-6 px-2 text-xs"
|
||||
disabled={togglingQueue === queue.name}
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleQueue(queue.name, queue.isPaused);
|
||||
}}
|
||||
>
|
||||
{queue.isPaused ? $_("admin.queues.resume") : $_("admin.queues.pause")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 text-xs">
|
||||
{#if queue.counts.waiting > 0}
|
||||
<span class="text-muted-foreground">{queue.counts.waiting} waiting</span>
|
||||
{/if}
|
||||
{#if queue.counts.active > 0}
|
||||
<span class="text-blue-500">{queue.counts.active} active</span>
|
||||
{/if}
|
||||
{#if queue.counts.completed > 0}
|
||||
<span class="text-green-500">{queue.counts.completed} completed</span>
|
||||
{/if}
|
||||
{#if queue.counts.failed > 0}
|
||||
<span class="text-destructive font-medium">{queue.counts.failed} failed</span>
|
||||
{/if}
|
||||
{#if queue.counts.delayed > 0}
|
||||
<span class="text-yellow-500">{queue.counts.delayed} delayed</span>
|
||||
{/if}
|
||||
{#if Object.values(queue.counts).every((v) => v === 0)}
|
||||
<span class="text-muted-foreground">empty</span>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if selectedQueue}
|
||||
<!-- Status filter tabs -->
|
||||
<div class="flex gap-1 mb-4 px-3 sm:px-0 flex-wrap">
|
||||
{#each STATUS_FILTERS as f (f.value ?? "all")}
|
||||
<Button
|
||||
size="sm"
|
||||
variant={selectedStatus === f.value ? "default" : "outline"}
|
||||
onclick={() => selectStatus(f.value)}
|
||||
>
|
||||
{f.label}
|
||||
</Button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Jobs table -->
|
||||
<div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-muted/30">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground"
|
||||
>{$_("admin.queues.col_id")}</th
|
||||
>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground"
|
||||
>{$_("admin.queues.col_name")}</th
|
||||
>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground"
|
||||
>{$_("admin.queues.col_status")}</th
|
||||
>
|
||||
<th
|
||||
class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell"
|
||||
>
|
||||
{$_("admin.queues.col_attempts")}
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-3 text-left font-medium text-muted-foreground hidden lg:table-cell"
|
||||
>
|
||||
{$_("admin.queues.col_created")}
|
||||
</th>
|
||||
<th class="px-4 py-3 text-right font-medium text-muted-foreground"
|
||||
>{$_("admin.queues.col_actions")}</th
|
||||
>
|
||||
</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
|
||||
>
|
||||
</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}
|
||||
<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 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}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user