legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 09:31:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

add realtime upload/download host stats

Browse Source
This commit is contained in:
legop3
2026-07-19 20:52:50 -04:00
parent cacd125fcb
commit eba4b1dc1d
10 changed files with 363 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/PiHostStatsCard/index.jsx
+26 -7
View File
@@ -35,6 +35,8 @@ const PLACEHOLDER_STATS = Object.freeze({
qualityMax: 70,
rxBitrateMbit: 72.2,
txBitrateMbit: 58.5,
downloadMbps: 12.4,
uploadMbps: 3.7,
rxBytes: 12400000,
txBytes: 2300000,
rxPackets: 12640,
@@ -304,14 +306,22 @@ export default function PiHostStatsCard() {
<section className="min-w-0 space-y-0.5">
<ColumnTitle label="WiFi" />
<div className="surface grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-1">
<div className="min-w-0">
<div className="truncate text-base leading-tight text-slate-100">SSID: {valueOrDash(wifi.ssidSample)}</div>
<div className="text-xs text-slate-400">{formatFrequency(wifi.frequencyMhz)}</div>
<div className="grid min-w-0 grid-cols-2 gap-0.5">
<div className="surface grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-1">
<div className="min-w-0">
<div className="truncate text-base leading-tight text-slate-100">SSID: {valueOrDash(wifi.ssidSample)}</div>
<div className="text-xs text-slate-400">{formatFrequency(wifi.frequencyMhz)}</div>
</div>
<div className="text-right">
<div className={`font-semibold leading-tight ${toneTextClass(currentSignalTone)}`}>{formatDbm(wifi.signalDbm)}</div>
<SignalBars bars={bars} tone={currentSignalTone} />
</div>
</div>
<div className="text-right">
<div className={`font-semibold leading-tight ${toneTextClass(currentSignalTone)}`}>{formatDbm(wifi.signalDbm)}</div>
<SignalBars bars={bars} tone={currentSignalTone} />
<div className="surface flex min-w-0 flex-col justify-center gap-0.5 text-xs">
{/* Actual traffic belongs beside connection identity and signal,
while negotiated link rates remain in their existing rows. */}
<ThroughputRow label="Download" value={formatBitrate(wifi.downloadMbps)} />
<ThroughputRow label="Upload" value={formatBitrate(wifi.uploadMbps)} />
</div>
</div>
<BarRow
@@ -347,6 +357,15 @@ function StatRow({ label, value, compact = false, valueClassName = 'text-slate-1
);
}
function ThroughputRow({ label, value }) {
return (
<div className="flex min-w-0 items-center justify-between gap-1">
<span className="shrink-0 text-slate-400">{label}</span>
<span className="min-w-0 truncate text-right text-slate-100">{value}</span>
</div>
);
}
function BarRow({ label, value, detail = null, percent, tone = 'neutral' }) {
return (
<div className="surface">