51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
 
|
import type { JobRun } from "../api/types";
|
||
|
|
import { count, runPillClass, RUN_STATUS_LABEL, TRIGGER_LABEL } from "../lib/feed";
|
||
|
|
import { fmtTime } from "../lib/format";
|
||
|
|
|
||
|
|
/** The last runs of the VISUAL feed as a small table. `attached` maps a run id to the drawings attached after it. */
|
||
|
|
export function RunsTable({ runs, attached, label = "Last runs" }: { runs: JobRun[]; attached?: Map<number, number>; label?: string }) {
|
||
|
|
if (!runs.length) return <div className="empty slim">No runs yet.</div>;
|
||
|
|
return (
|
||
|
|
<div className="tw">
|
||
|
|
<table aria-label={label}>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>When</th>
|
||
|
|
<th>Trigger</th>
|
||
|
|
<th>Status</th>
|
||
|
|
<th className="num">New</th>
|
||
|
|
<th className="num">Updated</th>
|
||
|
|
<th className="num">Change orders</th>
|
||
|
|
<th className="num">Drawings attached</th>
|
||
|
|
<th>Errors</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{runs.map((r) => (
|
||
|
|
<tr key={r.id}>
|
||
|
|
<td className="small mono nowrap">{fmtTime(r.started_at)}</td>
|
||
|
|
<td className="small">{TRIGGER_LABEL[r.trigger] ?? r.trigger}</td>
|
||
|
|
<td>
|
||
|
|
<span className={runPillClass(r.status)}>{RUN_STATUS_LABEL[r.status] ?? r.status}</span>
|
||
|
|
</td>
|
||
|
|
<td className="num">{count(r, "new_drafts")}</td>
|
||
|
|
<td className="num">{count(r, "drafts_updated")}</td>
|
||
|
|
<td className="num">{count(r, "cos_opened") + count(r, "cos_reaimed")}</td>
|
||
|
|
<td className="num">{attached?.get(r.id) ?? count(r, "attached")}</td>
|
||
|
|
<td className="small">
|
||
|
|
{r.errors.length ? (
|
||
|
|
<span className="due over" title={r.errors.join("\n")}>
|
||
|
|
{r.errors.length === 1 ? r.errors[0] : `${r.errors.length} errors: ${r.errors[0] ?? ""}`}
|
||
|
|
</span>
|
||
|
|
) : (
|
||
|
|
<span className="muted">None</span>
|
||
|
|
)}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|