feat(frontend): add polling job queue ui

2026-06-21 01:39:49 +03:30
parent 24a025587e
commit ac91428d49
36 changed files with 5674 additions and 0 deletions
--- a/frontend/src/pages/JobDetailPage.tsx
+++ b/frontend/src/pages/JobDetailPage.tsx
@@ -0,0 +1,154 @@
+import { RotateCcw } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { toast } from "sonner";
+
+import { api } from "../api";
+import { eventTitle } from "../constants";
+import { DateTime } from "../components/DateTime";
+import { EmptyState } from "../components/EmptyState";
+import { StatusBadge } from "../components/StatusBadge";
+import type { Job, JobEvent } from "../types";
+
+export function JobDetailPage() {
+  const { jobId } = useParams();
+  const [job, setJob] = useState<Job | null>(null);
+  const [events, setEvents] = useState<JobEvent[]>([]);
+
+  const refresh = useCallback(async () => {
+    if (!jobId) return;
+    const [jobData, eventData] = await Promise.all([api.getJob(jobId), api.listJobEvents(jobId)]);
+    setJob(jobData);
+    setEvents(eventData);
+  }, [jobId]);
+
+  useEffect(() => {
+    void refresh().catch((caught) => toast.error(caught instanceof Error ? caught.message : String(caught)));
+    const id = window.setInterval(() => void refresh().catch(() => undefined), 1000);
+    return () => window.clearInterval(id);
+  }, [refresh]);
+
+  const sortedEvents = useMemo(() => [...events].sort((a, b) => b.id - a.id), [events]);
+
+  async function retry() {
+    if (!job) return;
+    try {
+      await api.retryJob(job.id);
+      await refresh();
+      toast.success("Job returned to the queue.");
+    } catch (caught) {
+      toast.error(caught instanceof Error ? caught.message : String(caught));
+    }
+  }
+
+  if (!job) {
+    return (
+      <div className="page">
+        <EmptyState title="Loading job" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <span className="eyebrow">Job detail</span>
+          <h2>{job.type}</h2>
+        </div>
+        <div className="row-actions">
+          <Link className="secondary-button" to="/jobs">
+            Back
+          </Link>
+          <button type="button" disabled={job.status !== "failed"} onClick={() => void retry()}>
+            <RotateCcw size={16} /> Retry
+          </button>
+        </div>
+      </header>
+
+      <section className="stats-grid">
+        <div className="stat-card">
+          <span>Status</span>
+          <StatusBadge status={job.status} />
+        </div>
+        <div className="stat-card">
+          <span>Priority</span>
+          <strong>{job.priority}</strong>
+        </div>
+        <div className="stat-card">
+          <span>Attempts</span>
+          <strong>
+            {job.attempts}/{job.max_attempts}
+          </strong>
+        </div>
+        <div className="stat-card">
+          <span>Locked by</span>
+          <code>{job.locked_by ?? "-"}</code>
+        </div>
+      </section>
+
+      <section className="dashboard-grid">
+        <section className="panel">
+          <div className="section-title">
+            <h3>Metadata</h3>
+          </div>
+          <div className="compact-list">
+            <div className="compact-row">
+              <strong>ID</strong>
+              <code>{job.id}</code>
+              <span />
+            </div>
+            <div className="compact-row">
+              <strong>Available</strong>
+              <span />
+              <DateTime value={job.available_at} />
+            </div>
+            <div className="compact-row">
+              <strong>Locked until</strong>
+              <span />
+              <DateTime value={job.locked_until} />
+            </div>
+            <div className="compact-row">
+              <strong>Finished</strong>
+              <span />
+              <DateTime value={job.finished_at} />
+            </div>
+            <div className="compact-row">
+              <strong>Idempotency</strong>
+              <code>{job.idempotency_key ?? "-"}</code>
+              <span />
+            </div>
+          </div>
+        </section>
+
+        <section className="panel">
+          <div className="section-title">
+            <h3>Payload</h3>
+          </div>
+          <pre>{JSON.stringify(job.payload, null, 2)}</pre>
+          <div className="section-title result-title">
+            <h3>Result</h3>
+          </div>
+          <pre>{JSON.stringify(job.result ?? null, null, 2)}</pre>
+          {job.last_error && <p className="error">{job.last_error}</p>}
+        </section>
+
+        <section className="panel">
+          <div className="section-title">
+            <h3>Event Timeline</h3>
+          </div>
+          <div className="compact-list">
+            {sortedEvents.map((event) => (
+              <div className="compact-row" key={event.id}>
+                <strong>{eventTitle(event.type)}</strong>
+                <span>{event.worker_id ?? `attempt ${event.attempt}`}</span>
+                <DateTime value={event.created_at} />
+              </div>
+            ))}
+            {!sortedEvents.length && <EmptyState title="No events for this job" />}
+          </div>
+        </section>
+      </section>
+    </div>
+  );
+}