etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +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>
{/* 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) && (
<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 && (
<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
className={
ramPct > 85
@@ -350,37 +360,40 @@ function NodeCard({ node, providerName, realtime, onAction, isLoading }: NodeCar
</span>
</span>
)}
{loadAvg && (
<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>
</div>
)}
<span className="flex items-center gap-2">
<span className="flex items-center gap-0.5">
<DownloadIcon className="h-3 w-3 text-success-400/70" />
{/* Row 2 — Traffic: down / up speeds (2 fixed columns so a wide value
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)}
</span>
<span className="flex items-center gap-0.5">
<UploadIcon className="h-3 w-3 text-accent-400/70" />
<span className="flex items-center gap-1">
<UploadIcon className="h-3 w-3 shrink-0 text-accent-400/70" />
{formatSpeed(tx)}
</span>
</span>
</div>
)}
{/* Row 3 — Versions: remnanode + xray core */}
{(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 && (
<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}
</span>
)}
{node.versions?.xray && (
<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}
</span>
)}
</span>
</div>
)}
</div>
)}