Micha/homelab-infra
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: update stats renderer for new IDs and docker stats

Browse Source
This commit is contained in:
Micha
2026-04-06 07:36:22 +00:00
parent 0bc30c34fb
commit a809b7e353
1 changed files with 43 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/assets/js/renderers/stats.js
+44 -60
View File
@@ -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);
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");
// 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");
}