85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
export function renderNetworkHealth(state) {
|
|
_renderAdGuard(state.adguard || {});
|
|
_renderScrutiny(state.scrutiny || {});
|
|
}
|
|
|
|
function _renderAdGuard(d) {
|
|
const online = d.source_status === "online";
|
|
|
|
const pill = document.getElementById("adguard-pill");
|
|
if (pill) {
|
|
pill.textContent = online ? "ONLINE" : "OFFLINE";
|
|
pill.className = "status-pill " + (online ? "pill-online" : "pill-offline");
|
|
}
|
|
|
|
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%";
|
|
}
|
|
}
|
|
|
|
function _renderScrutiny(d) {
|
|
const online = d.source_status === "online";
|
|
|
|
const pill = document.getElementById("scrutiny-pill");
|
|
if (pill) {
|
|
pill.textContent = online ? "ONLINE" : "OFFLINE";
|
|
pill.className = "status-pill " + (online ? "pill-online" : "pill-offline");
|
|
}
|
|
|
|
// 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", "—");
|
|
}
|
|
|
|
// disk list
|
|
const list = document.getElementById("scrutiny-list");
|
|
if (!list) return;
|
|
|
|
if (!online || !d.devices || d.devices.length === 0) {
|
|
list.innerHTML = `<div class="scrutiny-offline">— ${online ? "no devices" : "offline"}</div>`;
|
|
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 ? `<span class="disk-temp">${dev.temperature}°C</span>` : "";
|
|
return `
|
|
<div class="scrutiny-row">
|
|
<span class="disk-icon ${cls}">${icon}</span>
|
|
<span class="disk-name">${dev.name}</span>
|
|
<span class="disk-model">${dev.model}</span>
|
|
${temp}
|
|
</div>`;
|
|
}).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);
|
|
}
|