<%= page.description %>
<% } %>
<%= overallText %>
<% if (incidents.active.length > 0) { %>
<% incidents.active.forEach(function(i) { %>
<% }); %>
<% } %>
<%
// Per-monitor mode now lives on each MonitorRow.display_mode (already
// resolved against the page-level fallback by the data layer). The
// page-level isCompact is kept only as a hint for whether to emit the
// expand JS at all.
const anyCompact = monitors.some(m => m.display_mode === 'compact');
const windowLabel = page.bar_frequency === 'hourly'
? ('Last ' + page.bar_count + ' hour' + (page.bar_count === 1 ? '' : 's'))
: ('Last ' + page.bar_count + ' day' + (page.bar_count === 1 ? '' : 's'));
function fmtTimestamp(iso) {
const d = new Date(iso);
return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
}
%>
<% groupOrder.forEach(function(gid, gi) {
const list = grouped[gid];
if (!list || list.length === 0) return;
const groupName = gid ? (groups.find(g => g.id === gid)?.name || '') : '';
// Aggregate status for the group header
const activeInGroup = list.filter(m => m.current_state !== 'paused');
const downInGroup = activeInGroup.filter(m => m.current_state === 'down').length;
const groupStatus = activeInGroup.length === 0 ? 'unknown' : downInGroup === activeInGroup.length ? 'down' : downInGroup > 0 ? 'degraded' : 'up';
const groupStatusLabel = groupStatus === 'up' ? 'Operational' : groupStatus === 'degraded' ? 'Degraded' : groupStatus === 'down' ? 'Down' : '';
const groupStatusColor = groupStatus === 'up' ? 'var(--bar-up)' : groupStatus === 'degraded' ? 'var(--bar-partial)' : groupStatus === 'down' ? 'var(--bar-down)' : 'var(--muted)';
%>
<% if (groupName) {
// Aggregate buckets across all monitors in the group (weighted average)
const aggBuckets = [];
const firstWithBuckets = list.find(m => m.buckets && m.buckets.length > 0);
if (firstWithBuckets) {
for (let bi = 0; bi < firstWithBuckets.buckets.length; bi++) {
let t = 0, u = 0, latSum = 0, latN = 0;
for (const m of list) {
if (!m.buckets || !m.buckets[bi]) continue;
t += m.buckets[bi].total;
u += m.buckets[bi].up;
if (m.buckets[bi].avg_latency != null) { latSum += m.buckets[bi].avg_latency * m.buckets[bi].total; latN += m.buckets[bi].total; }
}
aggBuckets.push({ start: firstWithBuckets.buckets[bi].start, total: t, up: u, avg_latency: latN > 0 ? Math.round(latSum / latN) : null });
}
}
const aggTotal = aggBuckets.reduce((a, b) => a + b.total, 0);
const aggUp = aggBuckets.reduce((a, b) => a + b.up, 0);
const aggPct = aggTotal > 0 ? (100 * aggUp / aggTotal) : null;
%>
<%= i.title %>
<% if (i.updates && i.updates.length > 0) { %>
<% i.updates.forEach(function(u) { %>
<% }); %>
<% } %>
<%= u.status %>
<%= fmtTimestamp(u.created_at) %>
<%~ u.body_html %>
<% } %>
<% list.forEach(function(m) {
const buckets = m.buckets || [];
const hasData = buckets.some(b => b.total > 0);
const u = m.uptime || { d24: null, d7: null, d30: null, d90: null };
// Every monitor renders with the same DOM. display_mode just sets
// whether the detail panel starts expanded or collapsed.
const startsOpen = m.display_mode !== 'compact';
%>
<% if (groupName) { %>
>
<% }); %>
24h
<%= fmtUptime(u.d24) %>
7d
<%= fmtUptime(u.d7) %>
30d
<%= fmtUptime(u.d30) %>
90d
<%= fmtUptime(u.d90) %>
Past incidents
<% pastOrder.forEach(function(k) { var day = pastByDate[k]; var dateLabel = day.date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }); %><%= dateLabel %>
<% day.items.forEach(function(i) { %><%= i.title %>
<% if (i.updates && i.updates.length > 0) { %>
<% i.updates.forEach(function(u) { %>
<%= u.status %>
- <%~ u.body_html %>
<% }); %>
<% } %>
<%= fmtTimestamp(u.created_at) %>