From a809b7e353a7fd63d30c12ea6ee40bc01043ac83 Mon Sep 17 00:00:00 2001 From: Micha Date: Mon, 6 Apr 2026 07:36:22 +0000 Subject: [PATCH] feat: update stats renderer for new IDs and docker stats --- apps/dashboard/assets/js/renderers/stats.js | 102 +++++++++----------- 1 file changed, 43 insertions(+), 59 deletions(-) diff --git a/apps/dashboard/assets/js/renderers/stats.js b/apps/dashboard/assets/js/renderers/stats.js index 170622e..5e42252 100644 --- a/apps/dashboard/assets/js/renderers/stats.js +++ b/apps/dashboard/assets/js/renderers/stats.js @@ -1,65 +1,49 @@ -function pct(value) { - return `${Math.round(value)}%`; -} - -function gb(value) { - return `${Number(value).toFixed(1)} GB`; -} - -function toneForPercent(value) { - if (value >= 85) return "danger"; - if (value >= 60) return "warning"; - return "online"; -} - -function setSignal(id, tone) { - const node = document.getElementById(id); - node.className = `signal ${tone === "danger" ? "offline" : tone === "warning" ? "warning" : tone === "info" ? "info" : "online"}`; -} - -function setBar(id, fillId, percent, tone) { - const bar = document.getElementById(id); - const fill = document.getElementById(fillId); - bar.className = `metric-bar${tone === "online" ? "" : ` ${tone === "danger" ? "danger" : tone}`}`; - fill.style.width = `${Math.max(0, Math.min(percent, 100))}%`; -} - export function renderStats(state) { - const { system } = state.data; - const cpuTone = toneForPercent(system.cpu.usage_percent); - const ramTone = toneForPercent(system.memory.usage_percent); - const networkTone = "info"; - const uptimeTone = system.source.status === "online" ? "online" : "danger"; + 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 || {}; - setSignal("cpu-signal", cpuTone); - document.getElementById("cpu-value").textContent = pct(system.cpu.usage_percent); - document.getElementById("cpu-value").className = `card-value value-${cpuTone}`; - document.getElementById("cpu-cores").textContent = `${system.cpu.cores} CORES`; - document.getElementById("cpu-cores").className = `metric-accent ${cpuTone === "danger" ? "warning" : "online"}`; - document.getElementById("cpu-load").textContent = system.cpu.load_1.toFixed(2); - setBar("cpu-bar", "cpu-bar-fill", system.cpu.usage_percent, cpuTone); + const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; }; - setSignal("ram-signal", ramTone); - document.getElementById("ram-value").textContent = pct(system.memory.usage_percent); - document.getElementById("ram-value").className = `card-value value-${ramTone}`; - document.getElementById("ram-used").textContent = gb(system.memory.used_gb); - document.getElementById("ram-used").className = `metric-accent ${ramTone}`; - document.getElementById("ram-free").textContent = gb(system.memory.available_gb); - document.getElementById("ram-free").className = "metric-accent info"; - setBar("ram-bar", "ram-bar-fill", system.memory.usage_percent, ramTone); + // 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) : "—"); - setSignal("network-signal", networkTone); - document.getElementById("network-value").textContent = system.network.rx_mbps.toFixed(1); - document.getElementById("network-value").className = "card-value value-info"; - document.getElementById("network-tx").textContent = `${system.network.tx_mbps.toFixed(1)} MBPS`; - setBar("network-bar", "network-bar-fill", Math.min(system.network.rx_mbps * 4, 100), networkTone); + // 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" : ""); + } - const uptimeDays = Math.max(0, Math.floor(system.host.uptime_seconds / 86400)); - const uptimeHours = Math.max(0, Math.floor(system.host.uptime_seconds / 3600)); - setSignal("uptime-signal", uptimeTone); - document.getElementById("uptime-value").textContent = `${uptimeDays}D`; - document.getElementById("uptime-value").className = `card-value value-${uptimeTone === "danger" ? "danger" : "online"}`; - document.getElementById("uptime-host").textContent = system.source.host_name.toUpperCase(); - document.getElementById("uptime-hours").textContent = String(uptimeHours); - setBar("uptime-bar", "uptime-bar-fill", system.source.status === "online" ? 84 : 10, uptimeTone === "danger" ? "danger" : "online"); + // 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"); }