diff --git a/apps/dashboard/assets/js/renderers/network-health.js b/apps/dashboard/assets/js/renderers/network-health.js
index c69bd7c..4c17602 100644
--- a/apps/dashboard/assets/js/renderers/network-health.js
+++ b/apps/dashboard/assets/js/renderers/network-health.js
@@ -1,84 +1,69 @@
export function renderNetworkHealth(state) {
- _renderAdGuard(state.adguard || {});
- _renderScrutiny(state.scrutiny || {});
+ renderAdGuard(state.adguard || {});
+ renderScrutiny(state.scrutiny || {});
}
-function _renderAdGuard(d) {
- const online = d.source_status === "online";
+function renderAdGuard(data) {
+ const online = data.source_status === "online";
+ setPill("adguard-pill", online ? "ONLINE" : "OFFLINE", online ? "pill-online" : "pill-offline");
- const pill = document.getElementById("adguard-pill");
- if (pill) {
- pill.textContent = online ? "ONLINE" : "OFFLINE";
- pill.className = "status-pill " + (online ? "pill-online" : "pill-offline");
- }
+ setText("adguard-total", online ? fmtCompact(data.total_queries) : "\u2014");
+ setText("adguard-blocked", online ? fmtCompact(data.blocked_queries) : "\u2014");
+ setText("adguard-blocked-pct", online ? `${Math.round(data.blocked_percent ?? 0)}%` : "\u2014");
+ setText("adguard-latency", online ? `${Math.round(data.avg_processing_ms ?? 0)}ms` : "\u2014");
- const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
-
- if (online) {
- set("adguard-total", fmtK(d.total_queries));
- set("adguard-blocked", fmtK(d.blocked_queries));
- set("adguard-blocked-pct", `${d.blocked_percent ?? 0}%`);
- set("adguard-latency", `${d.avg_processing_ms ?? 0}ms`);
-
- const bar = document.getElementById("adguard-bar-fill");
- if (bar) bar.style.width = `${Math.min(d.blocked_percent ?? 0, 100)}%`;
- } else {
- ["adguard-total", "adguard-blocked", "adguard-blocked-pct", "adguard-latency"].forEach(id => set(id, "—"));
- const bar = document.getElementById("adguard-bar-fill");
- if (bar) bar.style.width = "0%";
+ const fill = document.getElementById("adguard-bar-fill");
+ if (fill) {
+ fill.style.width = `${online ? Math.min(data.blocked_percent ?? 0, 100) : 0}%`;
}
}
-function _renderScrutiny(d) {
- const online = d.source_status === "online";
+function renderScrutiny(data) {
+ const online = data.source_status === "online";
+ setPill("scrutiny-pill", online ? "ONLINE" : "OFFLINE", online ? "pill-online" : "pill-offline");
- const pill = document.getElementById("scrutiny-pill");
- if (pill) {
- pill.textContent = online ? "ONLINE" : "OFFLINE";
- pill.className = "status-pill " + (online ? "pill-online" : "pill-offline");
- }
+ const total = data.total_count ?? 0;
+ const failed = data.failed_count ?? 0;
+ const passed = Math.max(total - failed, 0);
- // stat blocks
- const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
- if (online) {
- set("scrutiny-total", d.total_count ?? 0);
- set("scrutiny-failed", d.failed_count ?? 0);
- const passedEl = document.getElementById("scrutiny-passed");
- if (passedEl) {
- passedEl.textContent = (d.total_count ?? 0) - (d.failed_count ?? 0);
- }
- } else {
- set("scrutiny-total", "—");
- set("scrutiny-failed", "—");
- set("scrutiny-passed", "—");
- }
+ setText("scrutiny-total", online ? total : "\u2014");
+ setText("scrutiny-passed", online ? passed : "\u2014");
+ setText("scrutiny-failed", online ? failed : "\u2014");
- // disk list
const list = document.getElementById("scrutiny-list");
if (!list) return;
- if (!online || !d.devices || d.devices.length === 0) {
- list.innerHTML = `— ${online ? "no devices" : "offline"}
`;
+ const devices = Array.isArray(data.devices) ? data.devices.slice(0, 3) : [];
+ if (!online || devices.length === 0) {
+ list.innerHTML = `\u2014 ${online ? "no disks" : "offline"}
`;
return;
}
- list.innerHTML = d.devices.map(dev => {
- const ok = dev.status === "passed";
- const icon = ok ? "✓" : dev.status === "failed" ? "✗" : "?";
- const cls = ok ? "disk-ok" : dev.status === "failed" ? "disk-fail" : "disk-unk";
- const temp = dev.temperature != null ? `${dev.temperature}°C` : "";
- return `
-
- ${icon}
- ${dev.name}
- ${dev.model}
- ${temp}
-
`;
- }).join("");
+ list.innerHTML = `${devices.map((device) => {
+ const status = device.status || "unknown";
+ const cls = status === "passed" ? "ok" : status === "failed" ? "fail" : "unk";
+ const token = status === "passed" ? "OK" : status === "failed" ? "ER" : "--";
+ const name = device.name || device.device || "disk";
+
+ return `${token}${name}`;
+ }).join("")}
`;
}
-function fmtK(n) {
- if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
- if (n >= 1_000) return (n / 1_000).toFixed(0) + "K";
- return String(n ?? 0);
+function setText(id, value) {
+ const el = document.getElementById(id);
+ if (el) el.textContent = value;
+}
+
+function setPill(id, label, cls) {
+ const el = document.getElementById(id);
+ if (!el) return;
+ el.textContent = label;
+ el.className = `status-pill ${cls}`;
+}
+
+function fmtCompact(value) {
+ const num = Number(value ?? 0);
+ if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`;
+ if (num >= 1_000) return `${Math.round(num / 1_000)}K`;
+ return `${num}`;
}
diff --git a/apps/dashboard/assets/js/renderers/storage.js b/apps/dashboard/assets/js/renderers/storage.js
index 3cc07b9..ee77a51 100644
--- a/apps/dashboard/assets/js/renderers/storage.js
+++ b/apps/dashboard/assets/js/renderers/storage.js
@@ -3,26 +3,84 @@ export function renderStorage(state) {
const grid = document.getElementById("storage-grid");
if (!grid) return;
+ const root = storage.root || storage.disks?.[0] || null;
const disks = storage.disks || [];
- if (!disks.length) {
- grid.innerHTML = 'No disk data
';
- return;
- }
+ const rootPct = root?.usage_percent ?? 0;
+ const rootTone = pickTone(rootPct);
+ const warningCount = disks.filter((disk) => between(disk.usage_percent, 70, 85)).length;
+ const criticalCount = disks.filter((disk) => (disk.usage_percent ?? 0) > 85).length;
+ const highest = disks.length
+ ? disks.reduce((current, disk) => ((disk.usage_percent ?? 0) > (current.usage_percent ?? 0) ? disk : current), disks[0])
+ : null;
+ const matrixPill = criticalCount > 0 ? "pill-offline" : warningCount > 0 ? "pill-degraded" : "pill-online";
+ const strip = disks.length
+ ? disks.slice(0, 4).map((disk) => {
+ const pct = disk.usage_percent ?? 0;
+ return `${disk.name || disk.mount} ${pct.toFixed(0)}%`;
+ }).join("")
+ : 'No disk data';
- grid.innerHTML = disks.map(disk => {
- const pct = disk.usage_percent ?? 0;
- const fillClass = pct > 85 ? "danger" : pct > 70 ? "warn" : "";
- const statusColor = disk.status === "critical" ? "var(--red)" : disk.status === "warning" ? "var(--yellow)" : "var(--teal)";
- return `
-
-