50 lines
2.0 KiB
JavaScript
50 lines
2.0 KiB
JavaScript
export function renderStats(state) {
|
|
const sys = state.system || {};
|
|
const overview = state.overview || {};
|
|
const cpu = sys.cpu || {};
|
|
const mem = sys.memory || {};
|
|
const net = sys.network || {};
|
|
const host = sys.host || {};
|
|
const docker = overview.docker || state.services?.docker || {};
|
|
|
|
const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
|
|
|
|
// CPU
|
|
set("cpu-percent", cpu.usage_percent != null ? `${cpu.usage_percent.toFixed(1)}%` : "—");
|
|
set("cpu-cores", cpu.cores ?? "—");
|
|
set("cpu-load", cpu.load_5 != null ? cpu.load_5.toFixed(2) : "—");
|
|
|
|
// Colour CPU
|
|
const cpuEl = document.getElementById("cpu-percent");
|
|
if (cpuEl && cpu.usage_percent != null) {
|
|
cpuEl.className = "stat-num" + (cpu.usage_percent > 85 ? " danger" : cpu.usage_percent > 65 ? " warn" : "");
|
|
}
|
|
|
|
// Memory
|
|
set("ram-percent", mem.usage_percent != null ? `${mem.usage_percent.toFixed(1)}%` : "—");
|
|
set("ram-used", mem.used_gb != null ? mem.used_gb.toFixed(1) : "—");
|
|
set("ram-total", mem.total_gb != null ? mem.total_gb.toFixed(0) : "—");
|
|
|
|
const ramEl = document.getElementById("ram-percent");
|
|
if (ramEl && mem.usage_percent != null) {
|
|
ramEl.className = "stat-num" + (mem.usage_percent > 85 ? " danger" : mem.usage_percent > 65 ? " warn" : "");
|
|
}
|
|
|
|
// Network
|
|
set("net-rx", net.rx_mbps != null ? net.rx_mbps.toFixed(1) : "—");
|
|
set("net-tx", net.tx_mbps != null ? net.tx_mbps.toFixed(1) : "—");
|
|
|
|
// Host
|
|
const upDays = host.uptime_seconds != null ? Math.floor(host.uptime_seconds / 86400) : null;
|
|
set("uptime-days", upDays != null ? upDays : "—");
|
|
set("host-platform", host.platform ? host.platform.slice(0, 5).toUpperCase() : "—");
|
|
|
|
// Docker
|
|
set("docker-running", docker.running ?? "—");
|
|
set("docker-stopped", docker.stopped ?? "—");
|
|
set("docker-total", docker.total ?? "—");
|
|
|
|
const stoppedEl = document.getElementById("docker-stopped");
|
|
if (stoppedEl) stoppedEl.className = "stat-num" + ((docker.stopped ?? 0) > 0 ? " warn" : " dim");
|
|
}
|