ico
/
pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve incidents

This commit is contained in:
nate 2026-04-09 01:09:06 +04:00
parent 0e009dc684
commit ae5a8f4597
1 changed files with 52 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
apps/status/src/views/page.ejs
View File

@ -180,6 +180,24 @@
.incident-update .body code { background: var(--bg); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.85em; } .incident-update .body code { background: var(--bg); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.85em; }
.past-incidents { margin-top: 3rem; } .past-incidents { margin-top: 3rem; }
.past-incidents h2 { font-size: 1.1rem; margin-bottom: 1rem; } .past-incidents h2 { font-size: 1.1rem; margin-bottom: 1rem; }
/* Past incidents — Atlassian-style: grouped by date with light typography. */
.past-day { margin-bottom: 2rem; }
.past-day-header { font-size: 0.95rem; font-weight: 600; color: var(--fg); padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); margin: 0 0 1rem; }
.past-day-empty { font-size: 0.85rem; color: var(--muted); margin: 0.25rem 0 0; }
.past-item { margin-bottom: 1.25rem; }
.past-item:last-child { margin-bottom: 0; }
.past-item-title { font-size: 0.95rem; font-weight: 600; color: var(--fg); margin: 0 0 0.5rem; }
.past-update { font-size: 0.8rem; line-height: 1.55; color: var(--fg); padding-left: 0.75rem; border-left: 2px solid var(--border); margin-bottom: 0.5rem; }
.past-update:last-child { margin-bottom: 0; }
.past-update-status { font-weight: 600; text-transform: capitalize; }
.past-update-status.investigating { color: var(--bar-partial); }
.past-update-status.identified { color: var(--bar-partial); }
.past-update-status.monitoring { color: var(--accent); }
.past-update-status.resolved { color: var(--bar-up); }
.past-update-body { color: var(--fg); }
.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-time { color: var(--muted); font-size: 0.7rem; margin-top: 0.15rem; }
footer { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; text-align: center; } footer { margin-top: 4rem; 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; }
@ -313,29 +331,44 @@
<% }); %> <% }); %>
<% if (incidents.recent.length > 0) { %> <% if (incidents.recent.length > 0) { %>
<%
// Group past incidents by their started_at date (Y-M-D in local time).
// Atlassian-style: each date is its own section, incidents listed below.
var pastByDate = {};
var pastOrder = [];
for (var pi = 0; pi < incidents.recent.length; pi++) {
var inc = incidents.recent[pi];
var d = new Date(inc.started_at);
var key = d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate();
if (!pastByDate[key]) {
pastByDate[key] = { date: d, items: [] };
pastOrder.push(key);
}
pastByDate[key].items.push(inc);
}
%>
<div class="past-incidents"> <div class="past-incidents">
<h2>Past incidents</h2> <h2>Past incidents</h2>
<% incidents.recent.forEach(function(i) { %> <% pastOrder.forEach(function(k) {
<div id="incident-<%= i.id %>" class="incident <%= i.severity %><%= i.resolved_at ? ' resolved' : '' %>"> var day = pastByDate[k];
<div class="incident-title"><%= i.title %></div> var dateLabel = day.date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' });
<div class="incident-meta"> %>
<span class="pill <%= i.status %>"><%= i.status %></span> <div class="past-day">
Started <%= fmtTimestamp(i.started_at) %> <h3 class="past-day-header"><%= dateLabel %></h3>
<% if (i.resolved_at) { %> · Resolved <%= fmtTimestamp(i.resolved_at) %><% } %> <% day.items.forEach(function(i) { %>
</div> <div id="incident-<%= i.id %>" class="past-item">
<% if (i.updates && i.updates.length > 0) { %> <div class="past-item-title"><%= i.title %></div>
<div class="incident-timeline"> <% if (i.updates && i.updates.length > 0) { %>
<% i.updates.forEach(function(u) { %> <% i.updates.forEach(function(u) { %>
<div class="incident-update"> <div class="past-update">
<div class="head"> <span class="past-update-status <%= u.status %>"><%= u.status %></span>
<span class="status <%= u.status %>"><%= u.status %></span> <span class="past-update-body"> - <%~ u.body_html %></span>
<span><%= fmtTimestamp(u.created_at) %></span> <div class="past-update-time"><%= fmtTimestamp(u.created_at) %></div>
</div> </div>
<div class="body"><%~ u.body_html %></div> <% }); %>
</div> <% } %>
<% }); %>
</div> </div>
<% } %> <% }); %>
</div> </div>
<% }); %> <% }); %>
</div> </div>