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:
@@ -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