bvandeusen
3b6e005ed8
Adds a Kuma-style "is everything up?" surface that aggregates heterogeneous monitor types via a status-source registry (steward/core/status.py): each type registers an async source(db) -> [StatusEntry]. Core registers ping/DNS; the http plugin registers its own from setup() so core never imports plugin tables. Per entry: current up/down, last-30 heartbeat bar, uptime % (24h/7d/30d), latest latency + response sparkline, and TLS expiry countdown (HTTP). New /status page (live htmx refresh) + a status_overview dashboard widget + nav link. Pure-function unit tests for registry + sparkline. First deliverable of milestone #68 (task #866). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
97 lines
6.1 KiB
HTML
97 lines
6.1 KiB
HTML
{# status/rows.html — unified monitor list + summary, refreshed on poll #}
|
|
{% macro uptime_cell(pct) %}
|
|
{%- if pct is none -%}<span style="color:var(--text-dim);">—</span>
|
|
{%- elif pct >= 99.9 -%}<span style="color:var(--green);">{{ "%.2f"|format(pct) }}%</span>
|
|
{%- elif pct >= 99 -%}<span style="color:var(--yellow);">{{ "%.2f"|format(pct) }}%</span>
|
|
{%- elif pct >= 95 -%}<span style="color:var(--orange);">{{ "%.2f"|format(pct) }}%</span>
|
|
{%- else -%}<span style="color:var(--red);">{{ "%.2f"|format(pct) }}%</span>
|
|
{%- endif -%}
|
|
{% endmacro %}
|
|
|
|
{# ── Summary ─────────────────────────────────────────────────────────────── #}
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:0.75rem;margin-bottom:1rem;">
|
|
<div class="card" style="margin-bottom:0;">
|
|
<div class="section-title" style="margin-bottom:0.3rem;">Up</div>
|
|
<span class="stat-val" style="color:var(--green);">{{ up }}</span>
|
|
</div>
|
|
<div class="card" style="margin-bottom:0;">
|
|
<div class="section-title" style="margin-bottom:0.3rem;">Down</div>
|
|
<span class="stat-val" style="color:{% if down %}var(--red){% else %}var(--text-dim){% endif %};">{{ down }}</span>
|
|
</div>
|
|
<div class="card" style="margin-bottom:0;">
|
|
<div class="section-title" style="margin-bottom:0.3rem;">Pending</div>
|
|
<span class="stat-val" style="color:{% if pending %}var(--yellow){% else %}var(--text-dim){% endif %};">{{ pending }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{% if not entries %}
|
|
<div class="card empty">
|
|
No monitors configured yet. Add <a href="/hosts/">hosts</a> (ping / DNS) or HTTP monitors to populate the board.
|
|
</div>
|
|
{% else %}
|
|
<div class="card-flush">
|
|
{# header row #}
|
|
<div style="display:flex;align-items:center;gap:1rem;padding:0.55rem 1rem;border-bottom:1px solid var(--border-mid);font-size:0.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.04em;">
|
|
<span style="width:130px;flex-shrink:0;">Monitor</span>
|
|
<span style="flex:1;min-width:0;">Recent checks</span>
|
|
<span style="width:92px;text-align:right;flex-shrink:0;">Latest</span>
|
|
<span style="width:54px;text-align:center;flex-shrink:0;">24h</span>
|
|
<span style="width:54px;text-align:center;flex-shrink:0;">7d</span>
|
|
<span style="width:54px;text-align:center;flex-shrink:0;">30d</span>
|
|
<span style="width:64px;text-align:right;flex-shrink:0;">TLS</span>
|
|
</div>
|
|
|
|
{% for e in entries %}
|
|
<div style="display:flex;align-items:center;gap:1rem;padding:0.55rem 1rem;border-bottom:1px solid var(--border);">
|
|
{# name + kind #}
|
|
<div style="width:130px;flex-shrink:0;overflow:hidden;">
|
|
<div style="display:flex;align-items:center;gap:0.4rem;">
|
|
<span class="dot {% if e.status == 'up' %}dot-up{% elif e.status == 'down' %}dot-down{% else %}dot-dim{% endif %}"></span>
|
|
{% if e.detail_url %}<a href="{{ e.detail_url }}" style="font-size:0.85rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ e.name }}</a>
|
|
{% else %}<span style="font-size:0.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ e.name }}</span>{% endif %}
|
|
</div>
|
|
<div style="color:var(--text-dim);font-size:0.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:0.85rem;">
|
|
<span style="text-transform:uppercase;letter-spacing:0.04em;">{{ e.kind }}</span> · {{ e.target }}
|
|
</div>
|
|
</div>
|
|
|
|
{# heartbeat bar #}
|
|
<div style="flex:1;min-width:0;display:flex;gap:2px;align-items:center;overflow:hidden;">
|
|
{% set pad = 30 - e.heartbeat|length %}
|
|
{% if pad > 0 %}{% for _ in range(pad) %}<span class="pill pill-empty" title="No data"></span>{% endfor %}{% endif %}
|
|
{% for hb in e.heartbeat %}
|
|
<span class="pill" style="background:{% if hb.state == 'down' %}#6a1515{% else %}#1a6632{% endif %};" title="{{ hb.title }}"></span>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{# latest latency + sparkline #}
|
|
<div style="width:92px;text-align:right;flex-shrink:0;font-size:0.8rem;font-variant-numeric:tabular-nums;">
|
|
{% if e.status == 'down' %}<span style="color:var(--red);font-weight:bold;">DOWN</span>
|
|
{% elif e.latency_ms is not none %}
|
|
{% if e.spark_svg %}<span style="opacity:0.8;">{{ e.spark_svg|safe }}</span><br>{% endif %}
|
|
<span style="color:var(--text-muted);">{{ "%.0f"|format(e.latency_ms) }} ms</span>
|
|
{% elif e.status == 'up' %}<span style="color:var(--green);">UP</span>
|
|
{% else %}<span style="color:var(--text-dim);">—</span>{% endif %}
|
|
</div>
|
|
|
|
{# uptime windows #}
|
|
<span style="width:54px;text-align:center;flex-shrink:0;font-size:0.8rem;font-family:ui-monospace,monospace;">{{ uptime_cell(e.uptime.get('24h')) }}</span>
|
|
<span style="width:54px;text-align:center;flex-shrink:0;font-size:0.8rem;font-family:ui-monospace,monospace;">{{ uptime_cell(e.uptime.get('7d')) }}</span>
|
|
<span style="width:54px;text-align:center;flex-shrink:0;font-size:0.8rem;font-family:ui-monospace,monospace;">{{ uptime_cell(e.uptime.get('30d')) }}</span>
|
|
|
|
{# TLS expiry countdown #}
|
|
<span style="width:64px;text-align:right;flex-shrink:0;font-size:0.78rem;font-variant-numeric:tabular-nums;">
|
|
{% if e.tls_days is none %}<span style="color:var(--text-dim);">—</span>
|
|
{% elif e.tls_days < 0 %}<span style="color:var(--red);font-weight:bold;" title="Certificate expired">expired</span>
|
|
{% elif e.tls_days < 14 %}<span style="color:var(--red);" title="TLS certificate expiry">{{ e.tls_days|round|int }}d</span>
|
|
{% elif e.tls_days < 30 %}<span style="color:var(--yellow);" title="TLS certificate expiry">{{ e.tls_days|round|int }}d</span>
|
|
{% else %}<span style="color:var(--text-muted);" title="TLS certificate expiry">{{ e.tls_days|round|int }}d</span>{% endif %}
|
|
</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<p style="color:var(--text-dim);font-size:0.74rem;margin-top:0.75rem;">
|
|
Heartbeat shows the last 30 checks (newest on the right). Uptime % is over the rolling window. TLS countdown applies to HTTPS monitors.
|
|
</p>
|
|
{% endif %}
|