70 lines
2.5 KiB
JavaScript
70 lines
2.5 KiB
JavaScript
export function renderNetworkHealth(state) {
|
|
renderAdGuard(state.adguard || {});
|
|
renderScrutiny(state.scrutiny || {});
|
|
}
|
|
|
|
function renderAdGuard(data) {
|
|
const online = data.source_status === "online";
|
|
setPill("adguard-pill", online ? "ONLINE" : "OFFLINE", 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 fill = document.getElementById("adguard-bar-fill");
|
|
if (fill) {
|
|
fill.style.width = `${online ? Math.min(data.blocked_percent ?? 0, 100) : 0}%`;
|
|
}
|
|
}
|
|
|
|
function renderScrutiny(data) {
|
|
const online = data.source_status === "online";
|
|
setPill("scrutiny-pill", online ? "ONLINE" : "OFFLINE", online ? "pill-online" : "pill-offline");
|
|
|
|
const total = data.total_count ?? 0;
|
|
const failed = data.failed_count ?? 0;
|
|
const passed = Math.max(total - failed, 0);
|
|
|
|
setText("scrutiny-total", online ? total : "\u2014");
|
|
setText("scrutiny-passed", online ? passed : "\u2014");
|
|
setText("scrutiny-failed", online ? failed : "\u2014");
|
|
|
|
const list = document.getElementById("scrutiny-list");
|
|
if (!list) return;
|
|
|
|
const devices = Array.isArray(data.devices) ? data.devices.slice(0, 3) : [];
|
|
if (!online || devices.length === 0) {
|
|
list.innerHTML = `<div class="scrutiny-offline">\u2014 ${online ? "no disks" : "offline"}</div>`;
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = `<div class="scrutiny-strip">${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 `<span class="scrutiny-chip ${cls}"><strong>${token}</strong>${name}</span>`;
|
|
}).join("")}</div>`;
|
|
}
|
|
|
|
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}`;
|
|
}
|