bvandeusenandClaude Opus 5.5
477b05b9d0
#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>
105 lines
4.7 KiB
HTML
105 lines
4.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Alerts — Steward{% endblock %}
|
|
{% from "_macros.html" import page_header, status_badge, empty_state %}
|
|
{% block content %}
|
|
{% 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>
|
|
<div class="card-flush" style="margin-bottom:2rem;">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>State</th>
|
|
<th>Rule</th>
|
|
<th>Resource</th>
|
|
<th>Metric</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for state, rule in active %}
|
|
<tr>
|
|
<td>
|
|
{{ status_badge(state.state) }}
|
|
{% if state.no_data_since %}
|
|
{{ 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|ago }}
|
|
</div>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ rule.name }}</td>
|
|
<td style="color:var(--text-muted);">{{ rule.resource_name }}</td>
|
|
<td style="color:var(--text-muted);">{{ rule.metric_name }} {{ rule.operator.value }} {{ rule.threshold }}</td>
|
|
<td class="td-actions">
|
|
{% if state.state.value == 'firing' %}
|
|
<form method="post" action="/alerts/{{ rule.id }}/acknowledge" style="display:inline;">{{ csrf_field() }}
|
|
<button type="submit" class="btn btn-sm btn-warn">Acknowledge</button>
|
|
</form>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="card" style="margin-bottom:2rem;">{{ empty_state("No active alerts. Every rule is quiet.") }}</div>
|
|
{% endif %}
|
|
|
|
<h2 class="section-title" style="margin-bottom:1rem;">Rules</h2>
|
|
{% if rules %}
|
|
<div class="card-flush">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Condition</th>
|
|
<th style="text-align:center;" title="Checks in a row to fire / to clear">Fire / clear</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for rule in rules %}
|
|
<tr {% if not rule.enabled %}style="opacity:0.55;"{% endif %}>
|
|
<td>
|
|
{{ rule.name }}
|
|
{% if not rule.enabled %}
|
|
<span style="font-size:0.72rem;color:var(--text-dim);margin-left:0.35rem;">disabled</span>
|
|
{% endif %}
|
|
</td>
|
|
<td style="color:var(--text-muted);font-size:0.85rem;">
|
|
<span style="color:var(--text-dim);">{{ rule.source_module }}/</span>{{ rule.resource_name }}
|
|
<span style="font-family:ui-monospace,monospace;font-size:0.8rem;">
|
|
:{{ rule.metric_name }} {{ rule.operator.value }} {{ rule.threshold }}
|
|
</span>
|
|
</td>
|
|
<td style="color:var(--text-muted);text-align:center;">{{ rule.consecutive_failures_required }} / {{ rule.consecutive_ok_required }}</td>
|
|
<td class="td-actions">
|
|
<a href="/alerts/history?rule={{ rule.id }}" class="btn btn-sm btn-ghost">History</a>
|
|
<a href="/alerts/rules/{{ rule.id }}/edit" class="btn btn-sm btn-ghost">Edit</a>
|
|
<form method="post" action="/alerts/rules/{{ rule.id }}/toggle" style="display:inline;">{{ csrf_field() }}
|
|
<button type="submit" class="btn btn-sm btn-ghost">
|
|
{% if rule.enabled %}Disable{% else %}Enable{% endif %}
|
|
</button>
|
|
</form>
|
|
<form method="post" action="/alerts/rules/{{ rule.id }}/delete" style="display:inline;">{{ csrf_field() }}
|
|
<button type="submit" class="btn btn-sm btn-danger"
|
|
data-confirm="Delete rule {{ rule.name }}?">Delete</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="card">{{ empty_state("No alert rules yet.", "New rule", "/alerts/rules/new") }}</div>
|
|
{% endif %}
|
|
{% endblock %}
|