ux(overview): slim the System card to 3 compact rows

Drop the OS row and compact Memory/Uptime so the System card matches
the density of its sibling cards. Full detail stays on the deep system
stats page.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-28 19:28:17 +01:00
parent f792cf55f6
commit 89a2b300b8

View File

@ -149,9 +149,10 @@ class AdminOverview {
'System',
sysKind,
this.line('Disk', disk.text || `${diskPct}%`)
+ this.line('Memory', mem.text || '—')
+ this.line('Uptime', (info.uptime || '—').replace(/^up /, ''))
+ this.line('OS', info.os || '—'),
+ this.line('Memory', mem.total
? `${this.gb(mem.used)} / ${this.gb(mem.total)} (${Math.round(mem.percent) || 0}%)`
: (mem.text || '—'))
+ this.line('Uptime', this.shortUptime(info.uptime)),
`<button type="button" class="backup-secondary-btn" data-admin-go="system">View system stats →</button>`
);
@ -180,6 +181,22 @@ class AdminOverview {
while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
return `${n.toFixed(i ? 1 : 0)} ${u[i]}`;
}
// Compact gigabytes, e.g. 2030043136 → "1.9G", matching the Disk row's style.
gb(n) {
return `${((parseInt(n) || 0) / 1073741824).toFixed(1)}G`;
}
// "up 1 hour, 11 minutes" → "1h 11m".
shortUptime(u) {
return (u || '—')
.replace(/^up\s+/, '')
.replace(/\s*weeks?/g, 'w')
.replace(/\s*days?/g, 'd')
.replace(/\s*hours?/g, 'h')
.replace(/\s*minutes?/g, 'm')
.replace(/,/g, '');
}
}
window.AdminOverview = AdminOverview;