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/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -0,0 +1,132 @@
+import { AlertTriangle, BriefcaseBusiness, Clock3, RotateCcw } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Link } 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 { StatCard } from "../components/StatCard";
+import { StatusBadge } from "../components/StatusBadge";
+import { StatusIcon } from "../components/StatusIcon";
+import type { Health, Job, JobEvent, JobStats } from "../types";
+
+const emptyStats: JobStats = {
+  total: 0,
+  by_status: { queued: 0, running: 0, succeeded: 0, failed: 0 },
+  overdue_running: 0,
+  retries_pending: 0,
+  oldest_queued_at: null
+};
+
+export function DashboardPage() {
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [events, setEvents] = useState<JobEvent[]>([]);
+  const [stats, setStats] = useState<JobStats>(emptyStats);
+  const [health, setHealth] = useState<Health | null>(null);
+
+  const refresh = useCallback(async () => {
+    const [jobsData, statsData, eventsData, healthData] = await Promise.all([
+      api.listJobs(),
+      api.getStats(),
+      api.listEvents({ limit: 8 }),
+      api.health()
+    ]);
+    setJobs(jobsData);
+    setStats({ ...emptyStats, ...statsData, by_status: { ...emptyStats.by_status, ...statsData.by_status } });
+    setEvents(eventsData);
+    setHealth(healthData);
+  }, []);
+
+  useEffect(() => {
+    void refresh().catch((caught) => toast.error(caught instanceof Error ? caught.message : String(caught)));
+    const id = window.setInterval(() => void refresh().catch(() => undefined), 2000);
+    return () => window.clearInterval(id);
+  }, [refresh]);
+
+  const recentJobs = useMemo(() => jobs.slice(0, 6), [jobs]);
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <span className="eyebrow">Overview</span>
+          <h2>Dashboard</h2>
+        </div>
+        <span className={`connection ${health?.ok ? "open" : "closed"}`}>DB {health?.database ?? "unknown"}</span>
+      </header>
+
+      <section className="stats-grid">
+        <StatCard label="Total jobs" value={stats.total} icon={<BriefcaseBusiness size={16} />} />
+        <StatCard label="Queued" value={stats.by_status.queued} tone="queued" icon={<StatusIcon status="queued" />} />
+        <StatCard label="Running" value={stats.by_status.running} tone="running" icon={<StatusIcon status="running" />} />
+        <StatCard label="Succeeded" value={stats.by_status.succeeded} tone="succeeded" icon={<StatusIcon status="succeeded" />} />
+        <StatCard label="Failed" value={stats.by_status.failed} tone="failed" icon={<StatusIcon status="failed" />} />
+        <StatCard label="Overdue locks" value={stats.overdue_running} tone="failed" icon={<AlertTriangle size={16} />} />
+      </section>
+
+      <section className="dashboard-grid">
+        <section className="panel">
+          <div className="section-title">
+            <h3>Recent Jobs</h3>
+            <Link className="secondary-button" to="/jobs">
+              View jobs
+            </Link>
+          </div>
+          <div className="compact-list">
+            {recentJobs.map((job) => (
+              <Link className="compact-row" key={job.id} to={`/jobs/${job.id}`}>
+                <StatusBadge status={job.status} />
+                <span>{job.type}</span>
+                <DateTime value={job.created_at} />
+              </Link>
+            ))}
+            {!recentJobs.length && <EmptyState title="No jobs yet" />}
+          </div>
+        </section>
+
+        <section className="panel">
+          <div className="section-title">
+            <h3>Queue Pressure</h3>
+            <Clock3 size={16} />
+          </div>
+          <div className="compact-list">
+            <div className="compact-row">
+              <strong>Retries pending</strong>
+              <span>{stats.retries_pending}</span>
+              <span className="muted-text">backoff</span>
+            </div>
+            <div className="compact-row">
+              <strong>Oldest queued</strong>
+              <span>{stats.oldest_queued_at ? "waiting" : "none"}</span>
+              <DateTime value={stats.oldest_queued_at} />
+            </div>
+            <div className="compact-row">
+              <strong>Failed jobs</strong>
+              <span>{stats.by_status.failed}</span>
+              <span className="muted-text">retryable</span>
+            </div>
+          </div>
+        </section>
+
+        <section className="panel">
+          <div className="section-title">
+            <h3>Recent Events</h3>
+            <RotateCcw size={16} />
+          </div>
+          <div className="compact-list">
+            {events.map((event) => (
+              <Link className="compact-row" key={event.id} to={`/jobs/${event.job}`}>
+                <strong>{eventTitle(event.type)}</strong>
+                <span>{event.attempt ? `attempt ${event.attempt}` : "new"}</span>
+                <DateTime value={event.created_at} />
+              </Link>
+            ))}
+            {!events.length && <EmptyState title="No events yet" />}
+          </div>
+        </section>
+      </section>
+    </div>
+  );
+}