Files
homelab-infra/apps/dashboard/assets/js/renderers/uptime-kuma.js
T

54 lines
2.0 KiB
JavaScript

export function renderUptimeKuma(state) {
const d = state.uptime_kuma || {};
const online = d.source_status === "online";
const pill = document.getElementById("uk-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; };
set("uk-up", online ? (d.monitors_up ?? 0) : "—");
set("uk-down", online ? (d.monitors_down ?? 0) : "—");
const total = (d.monitors_up ?? 0) + (d.monitors_down ?? 0);
const pct = total > 0 ? Math.round((d.monitors_up / total) * 100) : (online ? 100 : 0);
set("uk-uptime", online ? `${pct}%` : "—");
// down monitors list
const downList = document.getElementById("uk-down-list");
if (downList) {
const downs = (d.monitors || []).filter(m => m.status === "offline");
if (!online || downs.length === 0) {
downList.innerHTML = "";
} else {
downList.innerHTML = downs.map(m =>
`<span class="uk-down-name">▼ ${m.name}</span>`
).join("");
}
}
// uptime bars per monitor (top 6 by name)
const barsContainer = document.getElementById("uk-bars");
if (barsContainer) {
const monitors = (d.monitors || []).slice(0, 6);
if (!online || monitors.length === 0) {
barsContainer.innerHTML = '<span class="widget-offline-msg">—</span>';
} else {
barsContainer.innerHTML = monitors.map(m => {
const beats = m.heartbeats && m.heartbeats.length
? m.heartbeats
: (m.status === "online" ? Array(20).fill(1) : Array(20).fill(0));
const segments = beats.slice(-20).map(b =>
`<span class="hb-seg ${b ? "hb-up" : "hb-down"}"></span>`
).join("");
return `
<div class="uk-monitor-row">
<span class="uk-monitor-name">${m.name}</span>
<span class="uk-bar">${segments}</span>
</div>`;
}).join("");
}
}
}