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

test: change status page look

This commit is contained in:
nate 2026-04-09 20:23:20 +04:00
parent c8715bb9aa
commit 3e8c13b712
2 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,8 +41,9 @@ h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
.json-link:hover { color: #60a5fa; } .json-link:hover { color: #60a5fa; }
.rss-link:hover { color: #f59e0b; } .rss-link:hover { color: #f59e0b; }
.muted { color: var(--muted); font-size: 0.875rem; } .muted { color: var(--muted); font-size: 0.875rem; }
.overall { padding: 1rem 1.25rem; border-radius: 10px; color: var(--overall-fg); font-weight: 600; font-size: 1rem; margin: 1.5rem 0 2rem; display: flex; align-items: center; gap: 0.75rem; } .overall { padding: 1rem 1.25rem; border-radius: 10px; font-weight: 600; font-size: 1rem; margin: 1.5rem 0 2rem; display: flex; align-items: center; gap: 0.75rem; border: 1px solid; }
.overall .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--overall-fg); opacity: 0.9; } .overall .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.group-title { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 2rem 0 0.75rem; } .group-title { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 2rem 0 0.75rem; }
.monitors { display: flex; flex-direction: column; gap: 0.5rem; } .monitors { display: flex; flex-direction: column; gap: 0.5rem; }
/* All monitors share one structure: a clickable header row + a collapsible /* All monitors share one structure: a clickable header row + a collapsible
@ -54,6 +55,10 @@ h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
.monitor-name .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .monitor-name .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-meta { display: flex; gap: 1rem; align-items: center; font-size: 0.85rem; color: var(--muted); } .monitor-meta { display: flex; gap: 1rem; align-items: center; font-size: 0.85rem; color: var(--muted); }
.uptime-pct { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg); } .uptime-pct { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg); }
.uptime-pct.good { color: var(--bar-up); }
.uptime-pct.warn { color: var(--bar-partial); }
.uptime-pct.bad { color: var(--bar-down); }
.uptime-pct.empty { color: var(--muted); }
.maintenance-pill { .maintenance-pill {
display: inline-flex; align-items: center; gap: 0.3rem; display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.15rem 0.55rem; border-radius: 999px; padding: 0.15rem 0.55rem; border-radius: 999px;

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

@ -73,9 +73,21 @@
if (paused_count > 0) { if (paused_count > 0) {
overallText += ' — ' + paused_count + (paused_count === 1 ? ' service' : ' services') + ' under maintenance'; overallText += ' — ' + paused_count + (paused_count === 1 ? ' service' : ' services') + ' under maintenance';
} }
const overallColor = overall === 'up' ? 'var(--bar-up)' const overallBg = overall === 'up' ? 'rgba(16,185,129,0.1)'
: overall === 'degraded' ? 'rgba(245,158,11,0.1)'
: 'rgba(239,68,68,0.1)';
const overallBorder = overall === 'up' ? 'rgba(16,185,129,0.25)'
: overall === 'degraded' ? 'rgba(245,158,11,0.25)'
: 'rgba(239,68,68,0.25)';
const overallFg = overall === 'up' ? 'var(--bar-up)'
: overall === 'degraded' ? 'var(--bar-partial)' : overall === 'degraded' ? 'var(--bar-partial)'
: 'var(--bar-down)'; : 'var(--bar-down)';
const dotColor = overall === 'up' ? '#10b981'
: overall === 'degraded' ? '#f59e0b'
: '#ef4444';
const dotGlow = overall === 'up' ? 'rgba(16,185,129,0.4)'
: overall === 'degraded' ? 'rgba(245,158,11,0.4)'
: 'rgba(239,68,68,0.4)';
%><!DOCTYPE html> %><!DOCTYPE html>
<html lang="en" class="<%= themeClass %>"> <html lang="en" class="<%= themeClass %>">
<head> <head>
@ -116,8 +128,8 @@
</div> </div>
<% if (page.description) { %><div class="muted"><%= page.description %></div><% } %> <% if (page.description) { %><div class="muted"><%= page.description %></div><% } %>
<div class="overall" style="background: <%= overallColor %>;"> <div class="overall" style="background: <%= overallBg %>; border-color: <%= overallBorder %>; color: <%= overallFg %>;">
<span class="dot"></span> <span class="dot" style="background: <%= dotColor %>; box-shadow: 0 0 8px <%= dotGlow %>;"></span>
<span><%= overallText %></span> <span><%= overallText %></span>
</div> </div>
@ -189,7 +201,8 @@
<span class="maintenance-pill" title="This service is paused for maintenance — checks are not running.">Maintenance</span> <span class="maintenance-pill" title="This service is paused for maintenance — checks are not running.">Maintenance</span>
<% } else { %> <% } else { %>
<% if (page.show_response_time && m.avg_latency != null) { %><span><%= m.avg_latency %>ms</span><% } %> <% if (page.show_response_time && m.avg_latency != null) { %><span><%= m.avg_latency %>ms</span><% } %>
<span class="uptime-pct"><%= fmtUptime(u[page.default_window === '24h' ? 'd24' : page.default_window === '7d' ? 'd7' : page.default_window === '30d' ? 'd30' : 'd90']) %></span> <% const winKey = page.default_window === '24h' ? 'd24' : page.default_window === '7d' ? 'd7' : page.default_window === '30d' ? 'd30' : 'd90'; %>
<span class="uptime-pct <%= uptimeBand(u[winKey]) %>"><%= fmtUptime(u[winKey]) %></span>
<% } %> <% } %>
<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> <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> </div>