Merge pull request #17 from nasyarobby/cursor/events-pagination-32d6
feat(events): add pagination, filters, sort, and page size
This commit is contained in:
@@ -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));
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
+101
-14
@@ -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,52 +110,135 @@ 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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{runs.map((r) => (
|
||||
<tr key={r.id} className="hover">
|
||||
<td>
|
||||
<StatusBadge status={r.status} />
|
||||
</td>
|
||||
<td>
|
||||
<Link className="link" to={`/events/${r.id}`}>
|
||||
{r.workflow_name || r.workflow}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="text-xs opacity-70">
|
||||
{r.workflow_revision != null ? `#${r.workflow_revision}` : "unknown"}
|
||||
</td>
|
||||
<td className="text-xs">
|
||||
{r.trigger_type}
|
||||
{r.trigger_detail ? ` · ${r.trigger_detail}` : ""}
|
||||
</td>
|
||||
<td className="whitespace-nowrap">{formatTime(r.started_at)}</td>
|
||||
<td>{r.duration_ms != null ? `${r.duration_ms}ms` : "—"}</td>
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
{SORT_COLUMNS.map(({ key, label }) => (
|
||||
<SortHeader
|
||||
key={key}
|
||||
column={key}
|
||||
label={label}
|
||||
sort={sort}
|
||||
order={order}
|
||||
onSort={setSort}
|
||||
/>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
{runs.map((r) => (
|
||||
<tr key={r.id} className="hover">
|
||||
<td>
|
||||
<StatusBadge status={r.status} />
|
||||
</td>
|
||||
<td>
|
||||
<Link className="link" to={`/events/${r.id}`}>
|
||||
{r.workflow_name || r.workflow}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="text-xs opacity-70">
|
||||
{r.workflow_revision != null ? `#${r.workflow_revision}` : "unknown"}
|
||||
</td>
|
||||
<td className="text-xs">
|
||||
{r.trigger_type}
|
||||
{r.trigger_detail ? ` · ${r.trigger_detail}` : ""}
|
||||
</td>
|
||||
<td className="whitespace-nowrap">{formatTime(r.started_at)}</td>
|
||||
<td>{r.duration_ms != null ? `${r.duration_ms}ms` : "—"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user