82 lines
3.4 KiB
TypeScript
82 lines
3.4 KiB
TypeScript
// RunHistory scene: cross-scenario timeline.
|
|
import { useMemo, useState } from "react";
|
|
import { useApp } from "../state/store";
|
|
import { Clock, HistoryIcon } from "../components/icons";
|
|
|
|
const STATUS_FILTERS = ["all", "running", "completed", "errored", "queued"] as const;
|
|
type Status = (typeof STATUS_FILTERS)[number];
|
|
|
|
const STATUS_COLOR: Record<string, string> = {
|
|
running: "var(--run)",
|
|
completed: "var(--ok)",
|
|
done: "var(--ok)",
|
|
errored: "var(--block)",
|
|
failed: "var(--block)",
|
|
queued: "var(--queue)",
|
|
};
|
|
|
|
export default function RunHistory() {
|
|
const [filter, setFilter] = useState<Status>("all");
|
|
const scenarios = useApp((s) => s.scenarios);
|
|
|
|
const rows = useMemo(() => {
|
|
const out: Array<{ scenarioId: string; scenarioLabel: string; accent: string; live: boolean; run: (typeof scenarios)[number]["runs"][number] }> = [];
|
|
for (const s of scenarios) {
|
|
for (const r of s.runs) {
|
|
if (filter !== "all" && r.status !== filter && !(filter === "completed" && r.status === "done")) continue;
|
|
out.push({ scenarioId: s.id, scenarioLabel: s.family.label, accent: s.family.accent, live: s.live, run: r });
|
|
}
|
|
}
|
|
return out.sort((a, b) => (b.run.startedAt || "").localeCompare(a.run.startedAt || ""));
|
|
}, [filter]);
|
|
|
|
const maxDuration = useMemo(() => Math.max(60, ...rows.map((r) => r.run.durationSec)), [rows]);
|
|
|
|
return (
|
|
<div className="rh">
|
|
<header className="rh-head">
|
|
<div>
|
|
<span className="mc-hero-eyebrow"><HistoryIcon size={12} /> Run history</span>
|
|
<h2 className="mc-hero-title">All scenarios · all runs</h2>
|
|
</div>
|
|
<nav className="rh-filters">
|
|
{STATUS_FILTERS.map((f) => (
|
|
<button key={f} className={`rh-chip${filter === f ? " rh-chip-sel" : ""}`} onClick={() => setFilter(f)}>
|
|
{f}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</header>
|
|
|
|
<div className="rh-list">
|
|
{rows.length === 0 && <div className="empty">No runs match the current filter.</div>}
|
|
{rows.map((row) => (
|
|
<div className="rh-row" key={`${row.scenarioId}-${row.run.id}`}>
|
|
<div className="rh-row-id">
|
|
<span className="rh-dot" style={{ background: row.accent }} />
|
|
<span className="mono">{row.run.shortId}</span>
|
|
<span className={`tag ${row.live ? "tag-live" : "tag-syn"}`}>{row.live ? "live" : "bp"}</span>
|
|
</div>
|
|
<div className="rh-row-scenario">{row.scenarioLabel}</div>
|
|
<div className="rh-row-step">{row.run.activeStep ?? "—"}</div>
|
|
<div className="rh-row-bar">
|
|
<div
|
|
className="rh-bar-fill"
|
|
style={{
|
|
width: `${Math.max(2, (row.run.durationSec / maxDuration) * 100)}%`,
|
|
background: STATUS_COLOR[row.run.status] ?? "var(--border-strong)",
|
|
}}
|
|
title={`${Math.round(row.run.durationSec / 60)}m`}
|
|
/>
|
|
</div>
|
|
<div className="rh-row-meta">
|
|
<span className="mono"><Clock size={11} /> {Math.round(row.run.durationSec / 60)}m</span>
|
|
<span className={`pill pill-${row.run.status === "completed" || row.run.status === "done" ? "done" : row.run.status === "running" ? "running" : row.run.status === "errored" || row.run.status === "failed" ? "errored" : "queued"}`}>{row.run.status}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|