feat(events): add pagination, filters, sort, and page size

Extend GET /api/runs with offset/total, date and trigger filters, and configurable column sort. Rebuild Events page with URL-driven state matching the KV page pagination pattern. Co-authored-by: Nasyarobby Putra <nasyarobby@gmail.com>
2026-08-20 23:28:35 +00:00
parent 14a08c700c
commit 20654b0682
6 changed files with 343 additions and 79 deletions
@@ -0,0 +1,28 @@
+import * as store from "../../store.js";
+
+/**
+ * @param {Record<string, string | undefined>} q
+ */
+export function parseRunQueryParams(q) {
+  const limit = q.limit != null ? Number(q.limit) : undefined;
+  const offset = q.offset != null ? Number(q.offset) : undefined;
+  return {
+    owner: q.owner || undefined,
+    workflow: q.workflow || undefined,
+    status: q.status || undefined,
+    trigger_type: q.trigger || undefined,
+    after: q.after || undefined,
+    before: q.before || undefined,
+    limit: Number.isFinite(limit) ? limit : undefined,
+    offset: Number.isFinite(offset) ? offset : undefined,
+    sort: q.sort || undefined,
+    order: q.order || undefined,
+  };
+}
+
+/**
+ * @param {Record<string, string | undefined>} q
+ */
+export async function queryRunsFromRequest(q) {
+  return store.queryRuns(parseRunQueryParams(q));
+}
@@ -1,20 +1,12 @@
 import * as store from "../../store.js";
+import { queryRunsFromRequest } from "./run-query.js";

 /**
 * @param {import("fastify").FastifyInstance} fastify
 */
 export default async function runsPlugin(fastify) {
  fastify.get("/runs", async (req) => {
-    const q = /** @type {Record<string, string | undefined>} */ (req.query ?? {});
-    const limit = q.limit ? Number(q.limit) : undefined;
-    const runs = await store.listRuns({
-      owner: q.owner,
-      workflow: q.workflow,
-      status: q.status,
-      limit: Number.isFinite(limit) ? limit : undefined,
-      before: q.before,
-    });
-    return { runs };
+    return queryRunsFromRequest(/** @type {Record<string, string | undefined>} */ (req.query ?? {}));
  });

  fastify.get("/consecutive-failures", async (req) => {
@@ -14,6 +14,7 @@ import usersPlugin from "./src/api/users.js";
 import scriptsPluginFactory from "./src/api/scripts.js";
 import workflowsPluginFactory from "./src/api/workflows.js";
 import runsPlugin from "./src/api/runs.js";
+import { queryRunsFromRequest } from "./src/api/run-query.js";
 import dashboardPluginFactory from "./src/api/dashboard.js";
 import secretsPlugin from "./src/api/secrets.js";
 import kvPlugin from "./src/api/kv.js";
@@ -198,16 +199,8 @@ export async function startApp(opts = {}) {
      "/admin/runs",
      { onRequest: [server.authenticate] },
      async (req, reply) => {
-        const q = /** @type {Record<string, string | undefined>} */ (req.query);
-        const limit = q.limit ? Number(q.limit) : undefined;
-        const runs = await store.listRuns({
-          owner: q.owner,
-          workflow: q.workflow,
-          status: q.status,
-          limit: Number.isFinite(limit) ? limit : undefined,
-          before: q.before,
-        });
-        return reply.send({ runs });
+        const q = /** @type {Record<string, string | undefined>} */ (req.query ?? {});
+        return reply.send(await queryRunsFromRequest(q));
      },
    );

@@ -222,19 +222,29 @@ export async function insertLogs(rows) {
  );
 }

+/** @type {Record<string, string>} */
+const RUN_SORT_COLUMNS = {
+  status: "status",
+  workflow: "workflow_name",
+  revision: "workflow_revision",
+  trigger: "trigger_type",
+  started_at: "started_at",
+  duration: "duration_ms",
+};
+
 /**
+ * @param {import("knex").Knex.QueryBuilder} q
 * @param {{
 *   owner?: string,
 *   workflow?: string,
 *   status?: string | string[],
- *   limit?: number,
+ *   trigger_type?: string,
+ *   after?: string,
 *   before?: string,
- * }} [filters]
+ * }} filters
 */
-export async function listRuns(filters = {}) {
-  const limit = Math.min(Math.max(filters.limit ?? 50, 1), 200);
-  let q = db("workflow_runs").select("*").orderBy("started_at", "desc");
-  if (filters.owner) q = q.where("owner", filters.owner);
+function applyRunFilters(q, filters) {
+  if (filters.owner) q.where("owner", filters.owner);
  if (filters.workflow) {
    const key = String(filters.workflow);
    if (key.includes("*")) {
@@ -243,25 +253,102 @@ export async function listRuns(filters = {}) {
        .replaceAll("%", "\\%")
        .replaceAll("_", "\\_")
        .replaceAll("*", "%");
-      q = q.whereRaw("workflow LIKE ? ESCAPE '\\'", [pattern]);
+      q.whereRaw("workflow LIKE ? ESCAPE '\\'", [pattern]);
    } else {
-      q = q.where("workflow", key);
+      q.where("workflow", key);
    }
  }
  if (filters.status) {
    if (Array.isArray(filters.status)) {
-      q = q.whereIn("status", filters.status);
+      q.whereIn("status", filters.status);
    } else {
-      q = q.where("status", filters.status);
+      q.where("status", filters.status);
    }
  }
-  if (filters.before) q = q.where("started_at", "<", filters.before);
-  const rows = await q.limit(limit);
-  return rows.map((row) => ({
+  if (filters.trigger_type) q.where("trigger_type", filters.trigger_type);
+  if (filters.after) q.where("started_at", ">=", filters.after);
+  if (filters.before) q.where("started_at", "<", filters.before);
+  return q;
+}
+
+/**
+ * @param {import("knex").Knex.QueryBuilder} q
+ * @param {string | undefined} sort
+ * @param {string | undefined} order
+ */
+function applyRunSort(q, sort, order) {
+  const column = RUN_SORT_COLUMNS[sort ?? ""] ?? "started_at";
+  const direction = order === "asc" ? "asc" : "desc";
+  q.orderBy(column, direction);
+  if (column !== "started_at") q.orderBy("started_at", "desc");
+  return q;
+}
+
+/**
+ * @param {Record<string, unknown>} row
+ */
+function mapRunRow(row) {
+  return {
    ...row,
    input: deserialize(row.input),
    output: deserialize(row.output),
-  }));
+  };
+}
+
+/**
+ * @param {{
+ *   owner?: string,
+ *   workflow?: string,
+ *   status?: string | string[],
+ *   trigger_type?: string,
+ *   after?: string,
+ *   before?: string,
+ *   limit?: number,
+ *   offset?: number,
+ *   sort?: string,
+ *   order?: string,
+ * }} [filters]
+ */
+export async function queryRuns(filters = {}) {
+  const limit = Math.min(Math.max(filters.limit ?? 50, 1), 200);
+  const offset = Math.max(Number(filters.offset) || 0, 0);
+
+  let q = db("workflow_runs");
+  q = applyRunFilters(q, filters);
+
+  const countRow = await q.clone().count({ count: "*" }).first();
+  const total = Number(countRow?.count ?? 0);
+
+  let rowsQ = q.clone().select("*");
+  rowsQ = applyRunSort(rowsQ, filters.sort, filters.order);
+  const rows = await rowsQ.limit(limit).offset(offset);
+
+  return {
+    runs: rows.map(mapRunRow),
+    total,
+    limit,
+    offset,
+  };
+}
+
+/**
+ * @param {{
+ *   owner?: string,
+ *   workflow?: string,
+ *   status?: string | string[],
+ *   trigger_type?: string,
+ *   after?: string,
+ *   before?: string,
+ *   limit?: number,
+ * }} [filters]
+ */
+export async function listRuns(filters = {}) {
+  const limit = Math.min(Math.max(filters.limit ?? 50, 1), 200);
+  let q = db("workflow_runs").select("*");
+  q = applyRunFilters(q, filters);
+  q = applyRunSort(q, "started_at", "desc");
+  const rows = await q.limit(limit);
+  return rows.map(mapRunRow);
 }

 /**
@@ -298,16 +298,22 @@ export function useReregisterWorkflows() {
 }

 export function useRuns(filters = {}) {
-  const { owner, workflow, status, limit } = filters;
+  const { owner, workflow, status, trigger, after, before, limit, offset, sort, order } = filters;
  return useQuery({
-    queryKey: ["runs", { owner, workflow, status, limit }],
+    queryKey: ["runs", { owner, workflow, status, trigger, after, before, limit, offset, sort, order }],
    queryFn: async () => {
      const params = {};
      if (owner) params.owner = owner;
      if (workflow) params.workflow = workflow;
      if (status) params.status = status;
-      if (limit) params.limit = limit;
-      return (await api.get("/runs", { params })).data.runs;
+      if (trigger) params.trigger = trigger;
+      if (after) params.after = after;
+      if (before) params.before = before;
+      if (limit != null) params.limit = limit;
+      if (offset != null) params.offset = offset;
+      if (sort) params.sort = sort;
+      if (order) params.order = order;
+      return (await api.get("/runs", { params })).data;
    },
  });
 }
@@ -1,28 +1,103 @@
 import { Link, useSearchParams } from "react-router-dom";
-import { useRuns } from "../api/hooks.js";
+import { useOwners, useRuns } from "../api/hooks.js";
 import { formatTime, StatusBadge } from "../lib/format.jsx";

+const PAGE_SIZES = [25, 50, 100];
+const DEFAULT_LIMIT = 50;
+const TRIGGER_TYPES = ["HTTP", "cron", "manual"];
+
+const SORT_COLUMNS = [
+  { key: "status", label: "Status" },
+  { key: "workflow", label: "Workflow" },
+  { key: "revision", label: "Revision" },
+  { key: "trigger", label: "Trigger" },
+  { key: "started_at", label: "Started" },
+  { key: "duration", label: "Duration" },
+];
+
+function dateToAfterIso(date) {
+  if (!date) return undefined;
+  return `${date}T00:00:00.000Z`;
+}
+
+function dateToBeforeIso(date) {
+  if (!date) return undefined;
+  const d = new Date(`${date}T00:00:00.000Z`);
+  d.setUTCDate(d.getUTCDate() + 1);
+  return d.toISOString();
+}
+
+function SortHeader({ column, label, sort, order, onSort }) {
+  const active = sort === column;
+  return (
+    <th>
+      <button
+        type="button"
+        className={`font-semibold hover:underline ${active ? "" : "opacity-80"}`}
+        onClick={() => onSort(column)}
+      >
+        {label}
+        {active ? (order === "asc" ? " ↑" : " ↓") : ""}
+      </button>
+    </th>
+  );
+}
+
 export function EventsPage() {
  const [params, setParams] = useSearchParams();
  const workflow = params.get("workflow") || "";
  const status = params.get("status") || "";
-  const { data: runs = [], isLoading } = useRuns({
+  const owner = params.get("owner") || "";
+  const trigger = params.get("trigger") || "";
+  const afterDate = params.get("after") || "";
+  const beforeDate = params.get("before") || "";
+  const offset = Math.max(Number(params.get("offset")) || 0, 0);
+  const limitParam = Number(params.get("limit"));
+  const limit = PAGE_SIZES.includes(limitParam) ? limitParam : DEFAULT_LIMIT;
+  const sort = params.get("sort") || "started_at";
+  const order = params.get("order") === "asc" ? "asc" : "desc";
+
+  const { data: owners = [] } = useOwners();
+  const { data, isLoading } = useRuns({
    workflow: workflow || undefined,
    status: status || undefined,
-    limit: 100,
+    owner: owner || undefined,
+    trigger: trigger || undefined,
+    after: dateToAfterIso(afterDate),
+    before: dateToBeforeIso(beforeDate),
+    limit,
+    offset,
+    sort,
+    order,
  });

-  function update(key, value) {
+  const runs = data?.runs ?? [];
+  const total = data?.total ?? 0;
+
+  function update(key, value, resetOffset = true) {
    const next = new URLSearchParams(params);
    if (value) next.set(key, value);
    else next.delete(key);
+    if (resetOffset && key !== "offset") next.delete("offset");
+    setParams(next);
+  }
+
+  function setSort(column) {
+    const next = new URLSearchParams(params);
+    if (sort === column) {
+      next.set("order", order === "asc" ? "desc" : "asc");
+    } else {
+      next.set("sort", column);
+      next.set("order", "desc");
+    }
+    next.delete("offset");
    setParams(next);
  }

  return (
    <div className="space-y-4">
      <h1 className="text-xl font-semibold">{status === "failed" ? "Failed events" : "Events"}</h1>
-      <div className="flex flex-col sm:flex-row gap-2">
+      <div className="flex flex-col sm:flex-row flex-wrap gap-2">
        <input
          className="input input-sm w-full sm:max-w-sm"
          placeholder="workflow key (* wildcard)"
@@ -35,25 +110,86 @@ export function EventsPage() {
          onChange={(e) => update("status", e.target.value)}
        >
          <option value="">all statuses</option>
+          <option value="queued">queued</option>
          <option value="running">running</option>
          <option value="success">success</option>
          <option value="failed">failed</option>
          <option value="skipped">skipped</option>
        </select>
+        <select
+          className="select select-sm w-full sm:max-w-xs"
+          value={owner}
+          onChange={(e) => update("owner", e.target.value)}
+        >
+          <option value="">all owners</option>
+          {owners.map((o) => (
+            <option key={o} value={o}>
+              {o}
+            </option>
+          ))}
+        </select>
+        <select
+          className="select select-sm w-full sm:max-w-xs"
+          value={trigger}
+          onChange={(e) => update("trigger", e.target.value)}
+        >
+          <option value="">all triggers</option>
+          {TRIGGER_TYPES.map((t) => (
+            <option key={t} value={t}>
+              {t}
+            </option>
+          ))}
+        </select>
+        <label className="flex items-center gap-1 text-sm">
+          <span className="opacity-70 whitespace-nowrap">from</span>
+          <input
+            type="date"
+            className="input input-sm"
+            value={afterDate}
+            onChange={(e) => update("after", e.target.value)}
+          />
+        </label>
+        <label className="flex items-center gap-1 text-sm">
+          <span className="opacity-70 whitespace-nowrap">to</span>
+          <input
+            type="date"
+            className="input input-sm"
+            value={beforeDate}
+            onChange={(e) => update("before", e.target.value)}
+          />
+        </label>
+        <select
+          className="select select-sm w-full sm:max-w-[8rem]"
+          value={String(limit)}
+          onChange={(e) => update("limit", e.target.value)}
+        >
+          {PAGE_SIZES.map((size) => (
+            <option key={size} value={size}>
+              {size} / page
+            </option>
+          ))}
+        </select>
      </div>
      {isLoading ? (
        <span className="loading loading-spinner" />
+      ) : runs.length === 0 ? (
+        <p className="text-sm opacity-60">No events match these filters.</p>
      ) : (
+        <>
          <div className="overflow-x-auto">
            <table className="table table-sm">
              <thead>
                <tr>
-                <th>Status</th>
-                <th>Workflow</th>
-                <th>Revision</th>
-                <th>Trigger</th>
-                <th>Started</th>
-                <th>Duration</th>
+                  {SORT_COLUMNS.map(({ key, label }) => (
+                    <SortHeader
+                      key={key}
+                      column={key}
+                      label={label}
+                      sort={sort}
+                      order={order}
+                      onSort={setSort}
+                    />
+                  ))}
                </tr>
              </thead>
              <tbody>
@@ -81,6 +217,28 @@ export function EventsPage() {
              </tbody>
            </table>
          </div>
+          <div className="flex items-center gap-2 text-sm">
+            <button
+              type="button"
+              className="btn btn-sm"
+              disabled={offset <= 0}
+              onClick={() => update("offset", String(Math.max(offset - limit, 0)), false)}
+            >
+              Prev
+            </button>
+            <button
+              type="button"
+              className="btn btn-sm"
+              disabled={offset + runs.length >= total}
+              onClick={() => update("offset", String(offset + limit), false)}
+            >
+              Next
+            </button>
+            <span className="opacity-60">
+              {total === 0 ? "0" : `${offset + 1}–${offset + runs.length}`} of {total}
+            </span>
+          </div>
+        </>
      )}
    </div>
  );