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

fix

This commit is contained in:
nate 2026-04-08 16:51:26 +04:00
parent 84e609c48f
commit 697513a5cf
1 changed files with 46 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -185,42 +185,31 @@
<span><%= overallText %></span> <span><%= overallText %></span>
</div> </div>
<%
// Shared timeline render — used for both active (top of page) and past
// (bottom) incidents. Standard status-page pattern: every update from
// every status the incident has been in, newest first.
function renderIncident(i) {
const klass = i.resolved_at ? `incident ${i.severity} resolved` : `incident ${i.severity}`;
const startedFmt = fmtTimestamp(i.started_at);
const resolvedFmt = i.resolved_at ? fmtTimestamp(i.resolved_at) : null;
let html = `<div id="incident-${i.id}" class="${klass}">`;
html += `<div class="incident-title">${escapeHtmlSSR(i.title)}</div>`;
html += `<div class="incident-meta"><span class="pill ${i.status}">${i.status}</span>`;
html += `Started ${startedFmt}`;
if (resolvedFmt) html += ` · Resolved ${resolvedFmt}`;
html += `</div>`;
if (i.updates && i.updates.length > 0) {
html += `<div class="incident-timeline">`;
for (const u of i.updates) {
html += `<div class="incident-update">`;
html += `<div class="head"><span class="status ${u.status}">${u.status}</span><span>${fmtTimestamp(u.created_at)}</span></div>`;
html += `<div class="body">${u.body_html}</div>`;
html += `</div>`;
}
html += `</div>`;
}
html += `</div>`;
return html;
}
// Eta doesn't have a built-in HTML escape helper exposed at template
// scope, so define a tiny one inline. Only used for incident titles.
function escapeHtmlSSR(s) {
return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}
%>
<% if (incidents.active.length > 0) { %> <% if (incidents.active.length > 0) { %>
<div class="incidents"> <div class="incidents">
<% incidents.active.forEach(function(i) { %><%~ renderIncident(i) %><% }); %> <% incidents.active.forEach(function(i) { %>
<div id="incident-<%= i.id %>" class="incident <%= i.severity %><%= i.resolved_at ? ' resolved' : '' %>">
<div class="incident-title"><%= i.title %></div>
<div class="incident-meta">
<span class="pill <%= i.status %>"><%= i.status %></span>
Started <%= fmtTimestamp(i.started_at) %>
<% if (i.resolved_at) { %> · Resolved <%= fmtTimestamp(i.resolved_at) %><% } %>
</div>
<% if (i.updates && i.updates.length > 0) { %>
<div class="incident-timeline">
<% i.updates.forEach(function(u) { %>
<div class="incident-update">
<div class="head">
<span class="status <%= u.status %>"><%= u.status %></span>
<span><%= fmtTimestamp(u.created_at) %></span>
</div>
<div class="body"><%~ u.body_html %></div>
</div>
<% }); %>
</div>
<% } %>
</div>
<% }); %>
</div> </div>
<% } %> <% } %>
@ -311,7 +300,29 @@
<% if (incidents.recent.length > 0) { %> <% if (incidents.recent.length > 0) { %>
<div class="past-incidents"> <div class="past-incidents">
<h2>Past incidents</h2> <h2>Past incidents</h2>
<% incidents.recent.forEach(function(i) { %><%~ renderIncident(i) %><% }); %> <% incidents.recent.forEach(function(i) { %>
<div id="incident-<%= i.id %>" class="incident <%= i.severity %><%= i.resolved_at ? ' resolved' : '' %>">
<div class="incident-title"><%= i.title %></div>
<div class="incident-meta">
<span class="pill <%= i.status %>"><%= i.status %></span>
Started <%= fmtTimestamp(i.started_at) %>
<% if (i.resolved_at) { %> · Resolved <%= fmtTimestamp(i.resolved_at) %><% } %>
</div>
<% if (i.updates && i.updates.length > 0) { %>
<div class="incident-timeline">
<% i.updates.forEach(function(u) { %>
<div class="incident-update">
<div class="head">
<span class="status <%= u.status %>"><%= u.status %></span>
<span><%= fmtTimestamp(u.created_at) %></span>
</div>
<div class="body"><%~ u.body_html %></div>
</div>
<% }); %>
</div>
<% } %>
</div>
<% }); %>
</div> </div>
<% } %> <% } %>