feat(activity): one Activity page — runs, admin actions, server log and quota under one filter bar

The audit log, the server log and the admin quota view were three pages (the quota one a Stats tab), each with its own filters, and the background runs had no list at all. Now one page ("Napló" / "Activity") reads all four, each still its own table on the server: a shared bar (text, a period of 1 h to 90 days defaulting to 7, an account) and each tab's own filters, the whole view in the URL. The old page ids open their tab. Server side: the audit log and the new run list (`/api/admin/runs`) filter and page like the server log, through one keyset helper (`routes/_keyset`) the log now shares; an audit row keeps the request it was made in (migration 0111), so its log lines are a pivot away, as a run's are (`lrun`). The quota breakdown takes since/until and one account. The Scheduler rows get a history button to their job's runs. Also fixed on the way: re-saving the value in force on the Configuration page staged its override without committing it (the commit sat inside the audit branch), so the save was lost.
2026-10-18 03:45:18 +02:00
parent d13483a593
commit 24448e7c6f
66 changed files with 2723 additions and 1119 deletions
@@ -0,0 +1,208 @@
+// @vitest-environment jsdom
+//
+// The activity page around its run and audit lists (the server-log tab has its own file): the view
+// is the URL — a link narrows the runs to one job, a status chip narrows them further; a run opens
+// to its log lines and an admin action to its request's, each a new history entry that Back undoes;
+// a link to the retired audit page opens the admin tab; the account filter reaches the quota tab; a
+// failed read is an error with a retry, never an empty list.
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import type { AuditQuery, AuditRow, HistoryPage, LogQuery, RunQuery, RunRow } from "../lib/api";
+
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return {
+    ...actual,
+    useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
+  };
+});
+
+const runsMock = vi.fn<(q: RunQuery, before: string | null) => Promise<HistoryPage<RunRow>>>();
+const auditMock = vi.fn<(q: AuditQuery, before: string | null) => Promise<HistoryPage<AuditRow>>>();
+const logsMock = vi.fn<(q: LogQuery, before: string | null) => Promise<unknown>>();
+const quotaMock = vi.fn<(since: string, user: string | null) => Promise<unknown>>();
+vi.mock("../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../lib/api")>();
+  return {
+    ...actual,
+    api: {
+      ...actual.api,
+      adminRuns: (q: RunQuery, before: string | null) => runsMock(q, before),
+      adminRunFacets: () => Promise.resolve({ jobs: [], statuses: [], total: 0 }),
+      adminAudit: (q: AuditQuery, before: string | null) => auditMock(q, before),
+      adminAuditFacets: () => Promise.resolve({ actions: [] }),
+      adminLogs: (q: LogQuery, before: string | null) => logsMock(q, before),
+      adminLogFacets: () =>
+        Promise.resolve({ levels: [], sources: [], events: [], users: [], accounts: {}, total: 0 }),
+      adminUsers: () => Promise.resolve([{ id: 1, email: "admin@example.com" }]),
+      adminQuota: (since: string, user: string | null) => quotaMock(since, user),
+    },
+  };
+});
+
+import Activity from "./Activity";
+import { PageToolbarSlot } from "./ui/pageToolbarSlot";
+
+// The filter bar lives in the toolbar, which portals into the shell's band: give it one.
+const slot = document.body.appendChild(document.createElement("div"));
+
+const RUN: RunRow = {
+  id: 41,
+  job: "backfill",
+  trigger: "manual",
+  actor_id: 1,
+  target: null,
+  target_title: null,
+  status: "error",
+  started_at: "2026-10-18T02:31:04Z",
+  finished_at: "2026-10-18T02:31:45Z",
+  summary: null,
+  result: null,
+  error: "quotaExceeded",
+  failure: null,
+  quota_units: 212,
+  log_lines: 9,
+};
+
+const ACTION: AuditRow = {
+  id: 5,
+  created_at: "2026-10-18T02:27:00Z",
+  actor_id: 1,
+  action: "scheduler_interval",
+  target_type: "job",
+  target_id: "rss_poll",
+  summary: "rss_poll → 25 min/run",
+  before: null,
+  after: { interval_minutes: 25 },
+  request_id: "0efdd960c9ad1977",
+};
+
+const page = <T,>(items: T[]): HistoryPage<T> => ({
+  items,
+  accounts: { "1": "admin@example.com" },
+  next_cursor: null,
+});
+
+function renderPage() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <PageToolbarSlot.Provider value={slot}>
+        <Activity />
+      </PageToolbarSlot.Provider>
+    </QueryClientProvider>,
+  );
+}
+
+const url = () => new URLSearchParams(window.location.search);
+const rowButton = (text: RegExp) =>
+  screen
+    .getAllByRole("button")
+    .find((b) => b.hasAttribute("aria-expanded") && text.test(b.textContent ?? ""))!;
+
+beforeEach(() => {
+  runsMock.mockResolvedValue(page([RUN]));
+  auditMock.mockResolvedValue(page([ACTION]));
+  logsMock.mockResolvedValue({ items: [], accounts: {}, next_cursor: null });
+  quotaMock.mockResolvedValue({ rows: [], daily: [] });
+});
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("Activity", () => {
+  it("a link narrows the runs to one job, and a status chip narrows them further", async () => {
+    window.history.replaceState(null, "", "/?page=activity&rjob=backfill");
+    renderPage();
+    await waitFor(() =>
+      expect(runsMock).toHaveBeenCalledWith(
+        expect.objectContaining({ job: "backfill", status: undefined, since: expect.any(String) }),
+        null,
+      ),
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /activity\.runs\.status\.error/ }));
+
+    await waitFor(() =>
+      expect(runsMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ job: "backfill", status: "error" }),
+        null,
+      ),
+    );
+    expect([url().get("rjob"), url().get("rst")]).toEqual(["backfill", "error"]);
+  });
+
+  it("a run opens to its log lines, and Back returns to the runs", async () => {
+    window.history.replaceState({ sfPage: "activity" }, "", "/?page=activity&aw=24h&aq=quota");
+    renderPage();
+    await waitFor(() => expect(screen.getByText("quotaExceeded")).toBeTruthy());
+    fireEvent.click(rowButton(/quotaExceeded/));
+    fireEvent.click(screen.getByRole("button", { name: "activity.runs.logLines" }));
+
+    await waitFor(() =>
+      expect(logsMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ run_id: 41, q: undefined }),
+        null,
+      ),
+    );
+    // Every other filter is off, and the range is the log's whole retention.
+    expect([url().get("at"), url().get("lrun"), url().get("aw"), url().get("aq")]).toEqual([
+      "logs",
+      "41",
+      "90d",
+      null,
+    ]);
+
+    await act(async () => {
+      const landed = new Promise((resolve) =>
+        window.addEventListener("popstate", resolve, { once: true }),
+      );
+      window.history.back();
+      await landed;
+    });
+    await waitFor(() => expect(url().get("at")).toBeNull());
+    expect([url().get("aw"), url().get("aq"), url().get("lrun")]).toEqual(["24h", "quota", null]);
+    expect(screen.getByText("quotaExceeded")).toBeTruthy();
+  });
+
+  it("a link to the retired audit page opens the admin tab, and an action opens its request's lines", async () => {
+    window.history.replaceState(null, "", "/?page=audit");
+    renderPage();
+    await waitFor(() => expect(screen.getByText("auditActions.scheduler_interval")).toBeTruthy());
+    expect(url().get("page")).toBe("activity");
+    expect(runsMock).not.toHaveBeenCalled();
+
+    fireEvent.click(rowButton(/auditActions\.scheduler_interval/));
+    fireEvent.click(screen.getByRole("button", { name: "activity.audit.requestLines" }));
+
+    await waitFor(() =>
+      expect(logsMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ request_id: "0efdd960c9ad1977" }),
+        null,
+      ),
+    );
+    expect(url().get("lreq")).toBe("0efdd960c9ad1977");
+  });
+
+  it("the account filter reaches the quota tab, over the page's range", async () => {
+    window.history.replaceState(null, "", "/?page=activity&at=quota&au=none&aw=30d");
+    renderPage();
+    await waitFor(() => expect(quotaMock).toHaveBeenCalled());
+    const [since, user] = quotaMock.mock.calls[0]!;
+    expect(user).toBe("none");
+    const days = (Date.now() - new Date(since).getTime()) / 86_400_000;
+    expect(Math.round(days)).toBe(30);
+  });
+
+  it("a failed read is an error with a retry, not an empty list", async () => {
+    window.history.replaceState(null, "", "/?page=activity");
+    runsMock.mockRejectedValue(new Error("502"));
+    renderPage();
+
+    expect(await screen.findByRole("alert")).toBeTruthy();
+    expect(screen.queryByText("activity.runs.empty")).toBeNull();
+  });
+});