bvandeusen
88091936c5
The page-top chrome was inconsistent: most nested views used the breadcrumb
kicker + page-title pattern, but plugin sub-pages used ad-hoc "← back" links,
~11 pages stacked a breadcrumb AND a redundant ancestor back button, and two
(monitors/edit, hosts/uptime) had a back button but no breadcrumb. The
settings/plugin_detail page stacked all of it at once.
Unify on the breadcrumb-led model:
- settings/_tabs.html: drop the hardcoded "Settings" h1; the breadcrumb
("Settings › …") plus the tab strip is the header.
- settings/plugin_detail: drop the "← Plugins" back button.
- docker container_detail/swarm/disk + snmp/device: replace ad-hoc back links
with the standard crumbs() breadcrumb.
- host_agent, ansible/*, alerts/maintenance: remove redundant ancestor back
buttons (the breadcrumb's parent crumbs already link there); keep lateral
shortcuts (Inventory/Schedules/Browse/Targets/Groups/New).
- monitors/edit, hosts/uptime: add the missing breadcrumb, drop the back link.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016Jg27rgypiW2efULXJDtMC
99 lines
4.4 KiB
HTML
99 lines
4.4 KiB
HTML
{% extends "base.html" %}
|
|
{% from "_macros.html" import crumbs %}
|
|
{% block title %}Uptime / SLA — Steward{% endblock %}
|
|
{% block breadcrumb %}{{ crumbs([("Hosts", "/hosts/"), ("Uptime / SLA", "")]) }}{% endblock %}
|
|
{% block content %}
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
|
|
<h1 class="page-title" style="margin-bottom:0;">Uptime / SLA</h1>
|
|
</div>
|
|
|
|
{# ── Summary pills ──────────────────────────────────────────────────────────── #}
|
|
{% set total = hosts | length %}
|
|
{% if total %}
|
|
{% set healthy = namespace(count=0) %}
|
|
{% for h in hosts %}
|
|
{% set pct = uptime.get(h.id, {}).get("30d") %}
|
|
{% if pct is not none and pct >= 99 %}{% set healthy.count = healthy.count + 1 %}{% endif %}
|
|
{% endfor %}
|
|
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.75rem;margin-bottom:1.5rem;">
|
|
<div class="card" style="margin-bottom:0;">
|
|
<div class="section-title" style="margin-bottom:0.3rem;">Hosts monitored</div>
|
|
<span class="stat-val">{{ total }}</span>
|
|
</div>
|
|
<div class="card" style="margin-bottom:0;">
|
|
<div class="section-title" style="margin-bottom:0.3rem;">≥ 99% (30d)</div>
|
|
<span class="stat-val" style="color:{% if healthy.count == total %}var(--green){% else %}var(--orange){% endif %};">
|
|
{{ healthy.count }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# ── SLA table ──────────────────────────────────────────────────────────────── #}
|
|
{% if hosts %}
|
|
<div class="card-flush">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Host</th>
|
|
<th>Address</th>
|
|
<th style="text-align:center;min-width:80px;" title="Uptime last 24 hours">24 h</th>
|
|
<th style="text-align:center;min-width:80px;" title="Uptime last 7 days">7 d</th>
|
|
<th style="text-align:center;min-width:80px;" title="Uptime last 30 days">30 d</th>
|
|
<th style="min-width:160px;">30-day bar</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for host in hosts %}
|
|
{% set ut = uptime.get(host.id, {}) %}
|
|
<tr>
|
|
<td style="font-weight:500;"><a href="/hosts/{{ host.id }}" style="color:inherit;">{{ host.name }}</a></td>
|
|
<td style="color:var(--text-muted);font-size:0.85rem;">{{ host.address }}</td>
|
|
|
|
{% for window in ["24h", "7d", "30d"] %}
|
|
{% set pct = ut.get(window) %}
|
|
<td style="text-align:center;font-size:0.88rem;font-family:ui-monospace,monospace;">
|
|
{% if pct is none %}
|
|
<span style="color:var(--text-muted);" title="No data yet">—</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 %}
|
|
</td>
|
|
{% endfor %}
|
|
|
|
{# 30-day visual bar #}
|
|
{% set pct30 = ut.get("30d") %}
|
|
<td>
|
|
{% if pct30 is none %}
|
|
<span style="color:var(--text-muted);font-size:0.8rem;">no data</span>
|
|
{% else %}
|
|
<div style="display:flex;align-items:center;gap:0.5rem;">
|
|
<div style="flex:1;height:8px;background:var(--bg-elevated);border-radius:4px;overflow:hidden;border:1px solid var(--border);">
|
|
<div style="height:100%;width:{{ pct30 | round(1) }}%;background:{% if pct30 >= 99.9 %}var(--green){% elif pct30 >= 99 %}var(--yellow){% elif pct30 >= 95 %}var(--orange){% else %}var(--red){% endif %};border-radius:4px;transition:width 0.3s;"></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="card" style="text-align:center;padding:3rem;">
|
|
<p style="color:var(--text-muted);">No hosts under watch. <a href="/hosts/new">Summon one to the table.</a></p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<p style="color:var(--text-dim);font-size:0.78rem;margin-top:1rem;">
|
|
Uptime aggregates every monitor attached to a host. Hosts with no monitors show —.
|
|
</p>
|
|
{% endblock %}
|