Add historical sparklines to host cards
CI / web (push) Successful in 17s
CI / api (push) Successful in 24s

24h of snapshots were already being retained but never read. Adds a
windowed query (last ~40 samples/host, one query total via
ROW_NUMBER() OVER PARTITION BY, not N+1) embedded in the existing
/api/hosts response, rendered as small hand-rolled SVG sparklines
(cpu/mem/disk overlaid) -- no charting library needed at this scale.

Closes #10.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-12 21:32:36 -06:00
parent ce232c5a53
commit f3ee4c2424
6 changed files with 102 additions and 3 deletions
+2
View File
@@ -1,4 +1,5 @@
import type { HostSummary } from "../api";
import { Sparkline } from "./Sparkline";
function Bar({ label, pct }: { label: string; pct: number | null }) {
const value = pct ?? 0;
@@ -34,6 +35,7 @@ export function HostCard({ host }: { host: HostSummary }) {
<Bar label="CPU" pct={host.cpuPct} />
<Bar label="Mem" pct={host.memPct} />
<Bar label="Disk" pct={host.diskPct} />
<Sparkline history={host.history} />
{(host.cpuPressurePct !== null || host.memPressurePct !== null) && (
<div className="pressure-row">
{host.cpuPressurePct !== null && <span>CPU pressure {host.cpuPressurePct.toFixed(1)}%</span>}