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

support no-script on status page

This commit is contained in:
nate 2026-04-10 01:59:41 +04:00
parent 060b79fef4
commit dc8bb323ca
3 changed files with 11 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/status/src/static/app.css
View File

@ -87,13 +87,14 @@ h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
.uptime-cell.warn .value { color: var(--bar-partial); }
.uptime-cell.bad .value { color: var(--bar-down); }
.uptime-cell.empty .value { color: var(--muted); }
/* Header row is always clickable; detail panel collapses/expands. */
/* Header row is always clickable; detail panel collapses/expands via hidden checkbox. */
.monitor-toggle { display: none; }
.monitor-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; background: transparent; border: none; color: inherit; width: 100%; text-align: left; font-family: inherit; font-size: inherit; }
.monitor-row:hover { background: rgba(255,255,255,0.02); }
.monitor-row .chev { color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }
.monitor.expanded-state .monitor-row .chev { transform: rotate(90deg); }
.monitor-toggle:checked ~ .monitor-row .chev { transform: rotate(90deg); }
.monitor-detail { padding: 0 1.25rem 1rem; border-top: 1px solid var(--border); display: none; }
.monitor.expanded-state .monitor-detail { display: block; padding-top: 1rem; }
.monitor-toggle:checked ~ .monitor-detail { display: block; padding-top: 1rem; }
.regions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.75rem; }
.region { padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); }
.region.up { color: var(--green); border-color: rgba(16,185,129,0.3); }

19
apps/status/src/static/expand.js
View File

@ -1,24 +1,11 @@
// Public status page client JS:
// 1. Click any monitor row to collapse/expand its detail panel.
// 2. Hover any heartbeat bar to see the bucket time range and uptime breakdown.
// All monitor detail HTML is server-rendered; this script only toggles a CSS
// class on click. Reads its config from window.PINGQL_PAGE.
// Bar tooltips - hover any heartbeat bar to see the bucket time range and uptime breakdown.
// Expand/collapse is pure CSS (hidden checkbox + :checked sibling selector), no JS needed.
// Reads its config from window.PINGQL_PAGE.
(function () {
var cfg = window.PINGQL_PAGE || {};
var barFrequency = cfg.bar_frequency || "daily";
// ── Click to expand/collapse ──────────────────────────────────────────
var rows = document.querySelectorAll(".monitor .monitor-row");
for (var r = 0; r < rows.length; r++) {
(function (row) {
var card = row.parentElement;
row.addEventListener("click", function () {
var isOpen = card.classList.toggle("expanded-state");
row.setAttribute("aria-expanded", isOpen ? "true" : "false");
});
})(rows[r]);
}
// ── Bar tooltips ──────────────────────────────────────────────────────
var tooltip = document.getElementById("bar-tooltip");
if (!tooltip) return;

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

@ -196,8 +196,9 @@
// whether the detail panel starts expanded or collapsed.
const startsOpen = m.display_mode !== 'compact';
%>
<div class="monitor<%= startsOpen ? ' expanded-state' : '' %>" data-monitor-id="<%= m.id %>">
<button type="button" class="monitor-row" aria-expanded="<%= startsOpen ? 'true' : 'false' %>">
<div class="monitor" data-monitor-id="<%= m.id %>">
<input type="checkbox" class="monitor-toggle" id="m-<%= m.id %>" <%= startsOpen ? 'checked' : '' %>>
<label class="monitor-row" for="m-<%= m.id %>">
<div class="monitor-name">
<span class="dot" style="background: <%= statusColor(m.current_state) %>;"></span>
<span class="name"><%= m.display_name %></span>
@ -211,7 +212,7 @@
<% } %>
<svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</button>
</label>
<div class="monitor-detail">
<div class="bars" aria-label="<%= statusLabel(m.current_state) %>">
<% buckets.forEach(function(b) { %>