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

support no-script on status page

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/status/src/static/app.css
+4 -3
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); }
apps/status/src/static/expand.js
+3 -16
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;