feat: Compact vitals
This commit is contained in:
@@ -26,18 +26,31 @@ function Meter({ pct }: { pct: number }) {
|
||||
);
|
||||
}
|
||||
|
||||
/** The phone strip: four readings on one line, no sub-lines and no byte
|
||||
* totals. A percentage is the reading; "70.9 GB / 100.0 GB · NTFS" is the
|
||||
* working, and the working belongs on the Overview tab, which is one scroll
|
||||
* away. Memory is shown as a percentage here for the same reason — it is the
|
||||
* only form that fits a quarter of a phone without wrapping. */
|
||||
function CompactVital({ label, value, pct }: { label: string; value: string; pct?: number }) {
|
||||
return (
|
||||
<div className="min-w-0 bg-surface px-2 py-1.5">
|
||||
<div className="truncate font-mono text-[0.55rem] uppercase tracking-[0.1em] text-text-secondary">{label}</div>
|
||||
<div className="truncate font-mono text-[0.8rem] font-semibold tabular-nums leading-tight text-text-primary">{value}</div>
|
||||
{pct !== undefined ? <Meter pct={pct} /> : <div className="mt-1.5 h-[3px] w-full rounded-full bg-well" />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Vital({ label, value, pct, sub }: { label: string; value: string; pct?: number; sub?: string }) {
|
||||
return (
|
||||
// Label over value below sm: on a phone the two side by side wrap the
|
||||
// value onto a second line, and four cells each a line taller is the
|
||||
// whole viewport gone before the tabs.
|
||||
<div className="min-w-0 bg-surface px-3 py-2.5 sm:px-4 sm:py-3">
|
||||
<div className="flex flex-col gap-0.5 sm:flex-row sm:items-baseline sm:justify-between sm:gap-3">
|
||||
<span className="truncate font-mono text-[0.58rem] uppercase tracking-[0.14em] text-text-secondary sm:text-[0.62rem] sm:tracking-[0.16em]">{label}</span>
|
||||
<span className="truncate font-mono text-[0.8rem] font-semibold tabular-nums text-text-primary sm:text-sm">{value}</span>
|
||||
// sm and up only — the phone gets CompactVital instead.
|
||||
<div className="min-w-0 bg-surface px-4 py-3">
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<span className="truncate font-mono text-[0.62rem] uppercase tracking-[0.16em] text-text-secondary">{label}</span>
|
||||
<span className="truncate font-mono text-sm font-semibold tabular-nums text-text-primary">{value}</span>
|
||||
</div>
|
||||
{pct !== undefined ? <Meter pct={pct} /> : <div className="mt-1.5 h-[3px] w-full rounded-full bg-well sm:mt-2" />}
|
||||
{sub && <p className="mt-1 truncate text-[0.68rem] text-text-tertiary sm:mt-1.5 sm:text-xs">{sub}</p>}
|
||||
{pct !== undefined ? <Meter pct={pct} /> : <div className="mt-2 h-[3px] w-full rounded-full bg-well" />}
|
||||
{sub && <p className="mt-1.5 truncate text-xs text-text-tertiary">{sub}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -70,38 +83,61 @@ export function VitalsRail({ server, agentUpToDate }: { server: Server; agentUpT
|
||||
const agentSub = server.agent_version ? `agent v${server.agent_version}${agentUpToDate === undefined ? "" : agentUpToDate ? " · up to date" : " · update available"}` : "agent version unknown";
|
||||
|
||||
return (
|
||||
// One hairline grid rather than four cards: these are readings off one
|
||||
// machine, and four bordered panels would read as four subjects.
|
||||
<div className="mt-3 grid grid-cols-2 gap-px sm:mt-4 overflow-hidden rounded border border-border-soft bg-border-soft lg:grid-cols-4">
|
||||
{inv ? (
|
||||
<>
|
||||
<Vital
|
||||
label="CPU"
|
||||
value={`${inv.cpu.usage_pct.toFixed(0)}%`}
|
||||
pct={inv.cpu.usage_pct}
|
||||
sub={[inv.cpu.cores ? `${inv.cpu.cores} cores` : null, inv.cpu.load1 !== undefined ? `load ${inv.cpu.load1.toFixed(2)}` : null].filter(Boolean).join(" · ") || inv.cpu.model}
|
||||
/>
|
||||
<Vital
|
||||
label="Memory"
|
||||
value={pair(inv.memory.used_bytes, inv.memory.total_bytes)}
|
||||
pct={memPct}
|
||||
sub={inv.swap_total_bytes > 0 ? `swap ${pair(inv.swap_used_bytes, inv.swap_total_bytes)}` : "no swap"}
|
||||
/>
|
||||
<Vital
|
||||
label={disk ? `Disk ${disk.mountpoint}` : "Disk"}
|
||||
value={disk ? `${diskPct.toFixed(0)}%` : "—"}
|
||||
pct={disk ? diskPct : undefined}
|
||||
sub={disk ? `${pair(disk.used_bytes, disk.total_bytes)}${disk.fstype ? ` · ${disk.fstype}` : ""}` : "no partitions reported"}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Vital label="CPU" value="—" sub="no metrics reported" />
|
||||
<Vital label="Memory" value="—" sub="no metrics reported" />
|
||||
<Vital label="Disk" value="—" sub="no metrics reported" />
|
||||
</>
|
||||
)}
|
||||
<Vital label="Last seen" value={relativeAge(server.last_seen)} pct={server.status === "active" ? 100 : 0} sub={agentSub} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<>
|
||||
{/* Two renderings of the same four readings. Below sm the strip is
|
||||
one line: label, number, hairline. At sm and up it is the grid
|
||||
it always was, sub-lines included. */}
|
||||
<div className="mt-3 grid grid-cols-4 gap-px overflow-hidden rounded border border-border-soft bg-border-soft sm:hidden">
|
||||
{inv ? (
|
||||
<>
|
||||
<CompactVital label="CPU" value={`${inv.cpu.usage_pct.toFixed(0)}%`} pct={inv.cpu.usage_pct} />
|
||||
<CompactVital label="Mem" value={`${memPct.toFixed(0)}%`} pct={memPct} />
|
||||
<CompactVital label="Disk" value={disk ? `${diskPct.toFixed(0)}%` : "\u2014"} pct={disk ? diskPct : undefined} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CompactVital label="CPU" value="\u2014" />
|
||||
<CompactVital label="Mem" value="\u2014" />
|
||||
<CompactVital label="Disk" value="\u2014" />
|
||||
</>
|
||||
)}
|
||||
<CompactVital label="Seen" value={relativeAge(server.last_seen)} pct={server.status === "active" ? 100 : 0} />
|
||||
</div>
|
||||
|
||||
{/* One hairline grid rather than four cards: these are readings off
|
||||
one machine, and four bordered panels would read as four
|
||||
subjects. */}
|
||||
<div className="mt-3 hidden grid-cols-2 gap-px overflow-hidden rounded border border-border-soft bg-border-soft sm:mt-4 sm:grid lg:grid-cols-4">
|
||||
{inv ? (
|
||||
<>
|
||||
<Vital
|
||||
label="CPU"
|
||||
value={`${inv.cpu.usage_pct.toFixed(0)}%`}
|
||||
pct={inv.cpu.usage_pct}
|
||||
sub={[inv.cpu.cores ? `${inv.cpu.cores} cores` : null, inv.cpu.load1 !== undefined ? `load ${inv.cpu.load1.toFixed(2)}` : null].filter(Boolean).join(" · ") || inv.cpu.model}
|
||||
/>
|
||||
<Vital
|
||||
label="Memory"
|
||||
value={pair(inv.memory.used_bytes, inv.memory.total_bytes)}
|
||||
pct={memPct}
|
||||
sub={inv.swap_total_bytes > 0 ? `swap ${pair(inv.swap_used_bytes, inv.swap_total_bytes)}` : "no swap"}
|
||||
/>
|
||||
<Vital
|
||||
label={disk ? `Disk ${disk.mountpoint}` : "Disk"}
|
||||
value={disk ? `${diskPct.toFixed(0)}%` : "—"}
|
||||
pct={disk ? diskPct : undefined}
|
||||
sub={disk ? `${pair(disk.used_bytes, disk.total_bytes)}${disk.fstype ? ` · ${disk.fstype}` : ""}` : "no partitions reported"}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Vital label="CPU" value="—" sub="no metrics reported" />
|
||||
<Vital label="Memory" value="—" sub="no metrics reported" />
|
||||
<Vital label="Disk" value="—" sub="no metrics reported" />
|
||||
</>
|
||||
)}
|
||||
<Vital label="Last seen" value={relativeAge(server.last_seen)} pct={server.status === "active" ? 100 : 0} sub={agentSub} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user