feat(ui): status_badge, status_dot, stat_tile, empty_state, page_header, icon_button and form classes (#5094)
#5094 "Status and layout macros, and form classes". - formatting.STATES: one state -> (tone, label) map for up, down, stale, firing, pending, acknowledged, no_data, ok, warn, crit, resolved and inactive; status_info() reads it (an unmapped state is drawn dim under its own name). required() lets a macro refuse a missing argument. - _macros.html: status_badge and status_dot (a dot always carries its label, sr-only unless shown), stat_tile, empty_state, page_header (actions via a call block) and icon_button, which raises without a label. - steward.css: tone classes (badge-/dot-/stat- ok, warn, crit, info, dim), .sr-only, .page-header, .stat-tile, .empty-state, .btn-icon and the form classes .field, .field-label, .field-hint and .input. Info text is a 40% mix (--blue): the house --fs-info-fg falls to 4.18:1 on its tint over a hovered row, 40% holds 5.09:1. - First users: the Alerts list, history and maintenance pages (headers, state badges, empty states) and the alert forms' hints; the inline inp/lbl style sets on the monitor and host forms become .input / .field-label. - tests/core/test_macros.py renders each macro through the app environment. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -1,6 +1,5 @@
|
||||
{# alerts/_history_rows.html — the history table; swapped in on a range or rule change #}
|
||||
{% set state_badge = {"firing": "badge-red", "pending": "badge-yellow", "acknowledged": "badge-gold",
|
||||
"resolved": "badge-green", "inactive": "badge-dim"} %}
|
||||
{% from "_macros.html" import status_badge, empty_state %}
|
||||
{% if events %}
|
||||
<div class="card-flush" style="overflow-x:auto;">
|
||||
<table class="table">
|
||||
@@ -25,9 +24,9 @@
|
||||
<div style="font-size:0.78rem;color:var(--text-dim);">{{ ev.rule.source_module }}/{{ ev.rule.resource_name }}</div>
|
||||
</td>
|
||||
<td style="white-space:nowrap;">
|
||||
<span class="badge {{ state_badge.get(ev.from_state, 'badge-dim') }}">{{ ev.from_state }}</span>
|
||||
{{ status_badge(ev.from_state) }}
|
||||
<span style="color:var(--text-dim);">→</span>
|
||||
<span class="badge {{ state_badge.get(ev.to_state, 'badge-dim') }}">{{ ev.to_state }}</span>
|
||||
{{ status_badge(ev.to_state) }}
|
||||
{% for n in ev.notes %}
|
||||
<div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;white-space:normal;">{{ n }}</div>
|
||||
{% endfor %}
|
||||
@@ -69,7 +68,5 @@
|
||||
</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p style="color:var(--text-muted);">
|
||||
No alert changed state in the last {{ current_range }}{% if chosen %} for {{ chosen.name }}{% endif %}.
|
||||
</p>
|
||||
<div class="card">{{ empty_state("No alert changed state in the last " ~ current_range ~ ((" for " ~ chosen.name) if chosen else "") ~ ".") }}</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<select name="resource_name" required disabled>
|
||||
<option value="">No data yet — run monitors first</option>
|
||||
</select>
|
||||
<p style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">
|
||||
<p class="field-hint">
|
||||
Resource names populate from live metric data. Start the scheduler and try again.
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
{% extends "base.html" %}
|
||||
{% from "_macros.html" import crumbs %}
|
||||
{% from "_macros.html" import crumbs, page_header %}
|
||||
{% block title %}Alert History — Steward{% endblock %}
|
||||
{% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("History", "")]) }}{% endblock %}
|
||||
{% block content %}
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.25rem;">
|
||||
<h1 class="page-title" style="margin-bottom:0;">Alert History</h1>
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
|
||||
<select id="history-rule" name="rule" aria-label="Rule"
|
||||
{% call page_header("Alert history", "Every change of state, newest first: the value against the rule's condition, whether the email and webhook went out, and the Ansible run an action started.") %}
|
||||
<select id="history-rule" name="rule" aria-label="Rule" class="input" style="width:auto;"
|
||||
hx-get="/alerts/history" hx-target="#history-rows" hx-include="#time-range"
|
||||
hx-trigger="change" hx-push-url="false"
|
||||
onchange="var u=new URL(window.location); this.value ? u.searchParams.set('rule', this.value) : u.searchParams.delete('rule'); history.replaceState({}, '', u);">
|
||||
@@ -16,13 +14,7 @@
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% include "_time_range.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="color:var(--text-muted);font-size:0.88rem;margin-bottom:1.25rem;">
|
||||
Every change of state, newest first: what the value was against the rule's condition, whether
|
||||
the email and webhook went out, and the Ansible run an action started.
|
||||
</p>
|
||||
{% endcall %}
|
||||
|
||||
<div id="history-rows"
|
||||
hx-get="/alerts/history" hx-trigger="rangeChange from:body"
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Alerts — Steward{% endblock %}
|
||||
{% from "_macros.html" import page_header, status_badge, empty_state %}
|
||||
{% block content %}
|
||||
<h1 class="page-title">Alerts</h1>
|
||||
{% call page_header("Alerts") %}
|
||||
<a class="btn btn-ghost" href="/alerts/history">History</a>
|
||||
<a class="btn btn-ghost" href="/alerts/maintenance">Maintenance</a>
|
||||
<a class="btn" href="/alerts/rules/new">New rule</a>
|
||||
{% endcall %}
|
||||
|
||||
{% if active %}
|
||||
<h2 class="section-title" style="margin-bottom:1rem;">Active</h2>
|
||||
@@ -20,18 +25,11 @@
|
||||
{% for state, rule in active %}
|
||||
<tr>
|
||||
<td>
|
||||
{% if state.state.value == 'firing' %}
|
||||
<span class="badge badge-red">FIRING</span>
|
||||
{% elif state.state.value == 'acknowledged' %}
|
||||
<span class="badge badge-yellow">ACK</span>
|
||||
{% elif state.state.value == 'pending' %}
|
||||
<span class="badge badge-dim">PENDING</span>
|
||||
{% endif %}
|
||||
{{ status_badge(state.state) }}
|
||||
{% if state.no_data_since %}
|
||||
<span class="badge badge-yellow"
|
||||
title="No sample since {{ state.last_sample_at.strftime('%Y-%m-%d %H:%M UTC') if state.last_sample_at else 'the rule started watching' }}">NO DATA</span>
|
||||
{{ status_badge('no_data', title="No sample since " ~ (state.last_sample_at.strftime('%Y-%m-%d %H:%M UTC') if state.last_sample_at else 'the rule started watching')) }}
|
||||
<div style="font-size:0.72rem;color:var(--text-dim);margin-top:0.2rem;">
|
||||
since {{ state.no_data_since.strftime("%Y-%m-%d %H:%M") }} UTC
|
||||
since {{ state.no_data_since|ago }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
@@ -51,17 +49,10 @@
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p style="color:var(--text-muted);margin-bottom:2rem;">No active alerts.</p>
|
||||
<div class="card" style="margin-bottom:2rem;">{{ empty_state("No active alerts. Every rule is quiet.") }}</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
|
||||
<h2 class="section-title">Rules</h2>
|
||||
<div style="display:flex;gap:0.5rem;">
|
||||
<a class="btn btn-ghost" href="/alerts/history">History</a>
|
||||
<a class="btn btn-ghost" href="/alerts/maintenance">Maintenance</a>
|
||||
<a class="btn" href="/alerts/rules/new">New Rule</a>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="section-title" style="margin-bottom:1rem;">Rules</h2>
|
||||
{% if rules %}
|
||||
<div class="card-flush">
|
||||
<table class="table">
|
||||
@@ -108,6 +99,6 @@
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p style="color:var(--text-muted);">No alert rules configured.</p>
|
||||
<div class="card">{{ empty_state("No alert rules yet.", "New rule", "/alerts/rules/new") }}</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,20 +1,11 @@
|
||||
{% extends "base.html" %}
|
||||
{% from "_macros.html" import crumbs %}
|
||||
{% from "_macros.html" import crumbs, page_header, status_badge, empty_state %}
|
||||
{% block title %}Maintenance Windows — Steward{% endblock %}
|
||||
{% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("Maintenance", "")]) }}{% 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;">Maintenance Windows</h1>
|
||||
<div style="display:flex;gap:0.5rem;">
|
||||
<a class="btn" href="/alerts/maintenance/new">New Window</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="color:var(--text-muted);font-size:0.88rem;margin-bottom:1.5rem;">
|
||||
During an active window, alerts in its scope still change state and show on the Alerts page,
|
||||
but send no notifications and run no Ansible actions. Each event a window mutes says so in
|
||||
the alert's history. An alert that is still firing when the window ends notifies then, and runs its action.
|
||||
</p>
|
||||
{% call page_header("Maintenance windows", "During an active window, alerts in its scope still change state and show on the Alerts page, but send no notifications and run no Ansible actions. Each event a window mutes says so in the alert's history. An alert that is still firing when the window ends notifies then, and runs its action.") %}
|
||||
<a class="btn" href="/alerts/maintenance/new">New window</a>
|
||||
{% endcall %}
|
||||
|
||||
{% if windows %}
|
||||
<div class="card-flush">
|
||||
@@ -51,13 +42,9 @@
|
||||
{{ w.end_at.strftime("%Y-%m-%d %H:%M") }} UTC
|
||||
</td>
|
||||
<td style="text-align:center;">
|
||||
{% if is_active %}
|
||||
<span class="badge badge-yellow">active</span>
|
||||
{% elif is_upcoming %}
|
||||
<span class="badge badge-dim">upcoming</span>
|
||||
{% else %}
|
||||
<span style="color:var(--text-dim);font-size:0.8rem;">expired</span>
|
||||
{% endif %}
|
||||
{% if is_active %}{{ status_badge('warn', 'Active') }}
|
||||
{% elif is_upcoming %}{{ status_badge('pending', 'Upcoming') }}
|
||||
{% else %}{{ status_badge('inactive', 'Expired') }}{% endif %}
|
||||
</td>
|
||||
<td class="td-actions">
|
||||
<form method="post" action="/alerts/maintenance/{{ w.id }}/delete" style="display:inline;">{{ csrf_field() }}
|
||||
@@ -71,8 +58,6 @@
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card" style="text-align:center;padding:3rem;">
|
||||
<p style="color:var(--text-muted);">No maintenance windows configured.</p>
|
||||
</div>
|
||||
<div class="card">{{ empty_state("No maintenance windows yet.", "New window", "/alerts/maintenance/new") }}</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
<label>Resource Name</label>
|
||||
<input type="text" name="scope_resource" id="scope-resource"
|
||||
placeholder="Exact resource name (e.g. my-server)">
|
||||
<p style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">
|
||||
<p class="field-hint">
|
||||
Leave blank to mute all resources within the selected source.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
<select name="resource_name" required disabled>
|
||||
<option value="">No data yet — run monitors first</option>
|
||||
</select>
|
||||
<p style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">
|
||||
<p class="field-hint">
|
||||
Resource names populate from live metric data. Start the scheduler and try again.
|
||||
</p>
|
||||
{% endif %}
|
||||
@@ -94,7 +94,7 @@
|
||||
<label>Consecutive OK checks before it clears</label>
|
||||
<input type="number" name="consecutive_ok_required" min="1"
|
||||
value="{{ rule.consecutive_ok_required if rule else 1 }}">
|
||||
<p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">
|
||||
<p class="field-hint">
|
||||
A firing or acknowledged alert resolves only after this many checks in a row are back
|
||||
within the threshold. An acknowledgement holds until then.</p>
|
||||
</div>
|
||||
@@ -105,7 +105,7 @@
|
||||
{% if not rule or rule.notify_no_data %}checked{% endif %}>
|
||||
Notify when this metric stops reporting
|
||||
</label>
|
||||
<p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">
|
||||
<p class="field-hint">
|
||||
Silence is always shown as NO DATA on the Alerts page: no sample for three of the
|
||||
metric's usual gaps (at least 5 minutes). This also sends a notification when it starts
|
||||
and when data resumes. A firing alert that goes silent stays firing.</p>
|
||||
@@ -147,7 +147,7 @@
|
||||
} %}
|
||||
{% for src, pairs in descs.items() %}
|
||||
<div>
|
||||
<div style="font-size:0.78rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.2rem;">{{ src }}</div>
|
||||
<div style="font-size:0.78rem;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.2rem;">{{ src }}</div>
|
||||
{% for metric, desc in pairs %}
|
||||
<div style="display:grid;grid-template-columns:160px 1fr;gap:0.5rem;font-size:0.78rem;padding:0.15rem 0;">
|
||||
<code>{{ metric }}</code>
|
||||
@@ -163,7 +163,7 @@
|
||||
{% if session.get("user_role") == "admin" %}
|
||||
{% set act = rule.ansible_action if rule and rule.ansible_action else None %}
|
||||
<div style="margin:1.25rem 0;padding:1rem;border:1px solid var(--border-mid);border-radius:6px;background:var(--bg-elevated);">
|
||||
<label style="display:flex;align-items:center;gap:0.5rem;font-weight:600;">
|
||||
<label style="display:flex;align-items:center;gap:0.5rem;font-weight:500;">
|
||||
<input type="checkbox" name="ansible_enabled" {% if act %}checked{% endif %}>
|
||||
On firing → run an Ansible playbook
|
||||
</label>
|
||||
|
||||
Reference in New Issue
Block a user