Add historical sparklines to host cards
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:
@@ -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>}
|
||||
|
||||
Reference in New Issue
Block a user