etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-29 18:13:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(admin-remnawave): lay node metrics in 3 fixed rows (processor/traffic/versions)

Browse Source 
The metrics sat in one flex-wrap, so when realtime speeds change width (Kb/s<->Mb/s, large values) elements reflowed and jumped between lines, and the card height shifted. Split into 3 fixed rows: processor (CPU load + RAM), traffic (down/up), versions (remnanode + xray). Traffic uses a 2-column grid so a wide value never pushes its sibling; tabular-nums keeps digit widths constant.
This commit is contained in:
c0mrade
2026-06-01 14:52:28 +03:00
parent 1b1046bb5c
commit 43acb70ab9
1 changed files with 55 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/AdminRemnawave.tsx
View File

@@ -325,12 +325,22 @@ function NodeCard({ node, providerName, realtime, onAction, isLoading }: NodeCar
)} )}
</div> </div>
{/* Live metrics: RAM · load · speeds · versions */} {/* Live metrics in 3 fixed rows (processor · traffic · versions) so the
changing speed/value widths never reflow or jump between lines. */}
{(ramPct !== null || loadAvg || rx > 0 || tx > 0 || node.versions) && ( {(ramPct !== null || loadAvg || rx > 0 || tx > 0 || node.versions) && (
<div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-dark-700/60 pt-2 font-mono text-[10.5px] text-dark-500"> <div className="mt-2 space-y-1 border-t border-dark-700/60 pt-2 font-mono text-[10.5px] tabular-nums text-dark-500">
{/* Row 1 — Processor: CPU load + RAM */}
{(loadAvg || ramPct !== null) && (
<div className="flex items-center gap-3">
{loadAvg && (
<span className="flex items-center gap-1" title="load average 1 / 5 / 15 min">
<CpuIcon className="h-3 w-3 shrink-0 text-dark-500" />
{loadAvg}
</span>
)}
{ramPct !== null && ( {ramPct !== null && (
<span className="flex items-center gap-1.5" title="RAM"> <span className="flex items-center gap-1.5" title="RAM">
<MemoryIcon className="h-3 w-3 text-dark-500" /> <MemoryIcon className="h-3 w-3 shrink-0 text-dark-500" />
<span <span
className={ className={
ramPct > 85 ramPct > 85
@@ -350,37 +360,40 @@ function NodeCard({ node, providerName, realtime, onAction, isLoading }: NodeCar
</span> </span>
</span> </span>
)} )}
{loadAvg && ( </div>
<span className="flex items-center gap-1" title="load average 1 / 5 / 15 min">
<CpuIcon className="h-3 w-3 text-dark-500" />
{loadAvg}
</span>
)} )}
<span className="flex items-center gap-2">
<span className="flex items-center gap-0.5"> {/* Row 2 — Traffic: down / up speeds (2 fixed columns so a wide value
<DownloadIcon className="h-3 w-3 text-success-400/70" /> never pushes the other) */}
{(rx > 0 || tx > 0) && (
<div className="grid grid-cols-2 gap-3">
<span className="flex items-center gap-1">
<DownloadIcon className="h-3 w-3 shrink-0 text-success-400/70" />
{formatSpeed(rx)} {formatSpeed(rx)}
</span> </span>
<span className="flex items-center gap-0.5"> <span className="flex items-center gap-1">
<UploadIcon className="h-3 w-3 text-accent-400/70" /> <UploadIcon className="h-3 w-3 shrink-0 text-accent-400/70" />
{formatSpeed(tx)} {formatSpeed(tx)}
</span> </span>
</span> </div>
)}
{/* Row 3 — Versions: remnanode + xray core */}
{(node.versions?.node || node.versions?.xray) && ( {(node.versions?.node || node.versions?.xray) && (
<span className="flex w-full items-center gap-2.5 text-dark-600 sm:ml-auto sm:w-auto"> <div className="flex items-center gap-3 text-dark-600">
{node.versions?.node && ( {node.versions?.node && (
<span className="flex items-center gap-1" title="remnanode"> <span className="flex items-center gap-1" title="remnanode">
<RemnawaveIcon className="h-3 w-3" /> <RemnawaveIcon className="h-3 w-3 shrink-0" />
{node.versions.node} {node.versions.node}
</span> </span>
)} )}
{node.versions?.xray && ( {node.versions?.xray && (
<span className="flex items-center gap-1" title="xray core"> <span className="flex items-center gap-1" title="xray core">
<XrayIcon className="h-3 w-3" /> <XrayIcon className="h-3 w-3 shrink-0" />
{node.versions.xray} {node.versions.xray}
</span> </span>
)} )}
</span> </div>
)} )}
</div> </div>
)} )}