update: monitor display

This commit is contained in:
nate 2026-04-10 02:43:52 +04:00
parent 496ba0f9fb
commit 43c3443e3f
3 changed files with 28 additions and 11 deletions

View File

@ -635,10 +635,10 @@ function redactGroupsAndMonitors(
name: g.name, name: g.name,
position: g.position, position: g.position,
})); }));
const publicMonitors = monitors.map((m) => ({ const publicMonitors = monitors.map((m) => {
...m, const { uptime, ...rest } = m;
group_id: m.group_id ? (idMap.get(m.group_id) ?? null) : null, return { ...rest, group_id: m.group_id ? (idMap.get(m.group_id) ?? null) : null };
})); });
return { groups: publicGroups, monitors: publicMonitors }; return { groups: publicGroups, monitors: publicMonitors };
} }

View File

@ -165,6 +165,7 @@ h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
.past-update-body p { display: inline; margin: 0; } .past-update-body p { display: inline; margin: 0; }
.past-update-body code { background: var(--bg); padding: 0.05em 0.3em; border-radius: 3px; font-size: 0.85em; } .past-update-body code { background: var(--bg); padding: 0.05em 0.3em; border-radius: 3px; font-size: 0.85em; }
.past-update-time { color: var(--muted); font-size: 0.7rem; margin-top: 0.15rem; } .past-update-time { color: var(--muted); font-size: 0.7rem; margin-top: 0.15rem; }
.page-uptime { margin-top: 2rem; }
footer { padding-top: 2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; text-align: center; } footer { padding-top: 2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; text-align: center; }
a { color: var(--accent); text-decoration: none; } a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; } a:hover { text-decoration: underline; }

View File

@ -94,6 +94,20 @@
const dotGlow = overall === 'up' ? 'rgba(16,185,129,0.4)' const dotGlow = overall === 'up' ? 'rgba(16,185,129,0.4)'
: overall === 'degraded' ? 'rgba(245,158,11,0.4)' : overall === 'degraded' ? 'rgba(245,158,11,0.4)'
: 'rgba(239,68,68,0.4)'; : 'rgba(239,68,68,0.4)';
// Page-wide aggregate uptime - average across active monitors
const pageUptimeAcc = { d24: { sum: 0, n: 0 }, d7: { sum: 0, n: 0 }, d30: { sum: 0, n: 0 }, d90: { sum: 0, n: 0 } };
for (const m of monitors) {
if (m.current_state === 'paused') continue;
const u = m.uptime || {};
for (const key of ['d24', 'd7', 'd30', 'd90']) {
if (u[key] != null) { pageUptimeAcc[key].sum += u[key]; pageUptimeAcc[key].n++; }
}
}
function pageUptimePct(key) {
const a = pageUptimeAcc[key];
return a.n > 0 ? (a.sum / a.n) : null;
}
%><!DOCTYPE html> %><!DOCTYPE html>
<html lang="en" class="<%= themeClass %>"> <html lang="en" class="<%= themeClass %>">
<head> <head>
@ -239,7 +253,6 @@
<% list.forEach(function(m) { <% list.forEach(function(m) {
const buckets = m.buckets || []; const buckets = m.buckets || [];
const hasData = buckets.some(b => b.total > 0); const hasData = buckets.some(b => b.total > 0);
const u = m.uptime || { d24: null, d7: null, d30: null, d90: null };
const startsOpen = m.display_mode !== 'compact'; const startsOpen = m.display_mode !== 'compact';
%> %>
<% if (inGroup) { %> <% if (inGroup) { %>
@ -292,12 +305,6 @@
<span><%= windowLabel %></span> <span><%= windowLabel %></span>
<span><%= hasData ? 'uptime over window' : 'awaiting data' %></span> <span><%= hasData ? 'uptime over window' : 'awaiting data' %></span>
</div> </div>
<div class="uptime-row">
<div class="uptime-cell <%= uptimeBand(u.d24) %>"><div class="label">24h</div><div class="value"><%= fmtUptime(u.d24) %></div></div>
<div class="uptime-cell <%= uptimeBand(u.d7) %>"><div class="label">7d</div><div class="value"><%= fmtUptime(u.d7) %></div></div>
<div class="uptime-cell <%= uptimeBand(u.d30) %>"><div class="label">30d</div><div class="value"><%= fmtUptime(u.d30) %></div></div>
<div class="uptime-cell <%= uptimeBand(u.d90) %>"><div class="label">90d</div><div class="value"><%= fmtUptime(u.d90) %></div></div>
</div>
</div> </div>
</div> </div>
<% } %> <% } %>
@ -354,6 +361,15 @@
</div> </div>
<% } %> <% } %>
<div class="page-uptime">
<div class="uptime-row">
<div class="uptime-cell <%= uptimeBand(pageUptimePct('d24')) %>"><div class="label">24h</div><div class="value"><%= fmtUptime(pageUptimePct('d24')) %></div></div>
<div class="uptime-cell <%= uptimeBand(pageUptimePct('d7')) %>"><div class="label">7d</div><div class="value"><%= fmtUptime(pageUptimePct('d7')) %></div></div>
<div class="uptime-cell <%= uptimeBand(pageUptimePct('d30')) %>"><div class="label">30d</div><div class="value"><%= fmtUptime(pageUptimePct('d30')) %></div></div>
<div class="uptime-cell <%= uptimeBand(pageUptimePct('d90')) %>"><div class="label">90d</div><div class="value"><%= fmtUptime(pageUptimePct('d90')) %></div></div>
</div>
</div>
<footer> <footer>
<% if (page.footer_text) { %><div><%= page.footer_text %></div><% } %> <% if (page.footer_text) { %><div><%= page.footer_text %></div><% } %>
<% if (page.show_powered_by) { %><div>Status powered by <a href="https://pingql.com">PingQL</a></div><% } %> <% if (page.show_powered_by) { %><div>Status powered by <a href="https://pingql.com">PingQL</a></div><% } %>