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
@@ -140,6 +140,9 @@ def create_app(
|
||||
app.jinja_env.globals["status_class"] = (
|
||||
lambda value, kind: _fmt.status_class(value, kind, app.config.get("THRESHOLDS", {}))
|
||||
)
|
||||
# The status and layout macros in _macros.html read these.
|
||||
app.jinja_env.globals["status_info"] = _fmt.status_info
|
||||
app.jinja_env.globals["required"] = _fmt.required
|
||||
|
||||
# Forged-request protection: every POST form renders csrf_field(), HTMX and
|
||||
# fetch() send csrf_token() as X-CSRF-Token, and one check refuses any
|
||||
|
||||
@@ -95,3 +95,37 @@ def status_class(value: Any, kind: str, thresholds: dict) -> str:
|
||||
if th.get("dir", "high") == "low":
|
||||
return "crit" if value < crit else "warn" if value < warn else "ok"
|
||||
return "crit" if value >= crit else "warn" if value >= warn else "ok"
|
||||
|
||||
|
||||
# Every state a page shows, and the tone it is drawn in: ok (green), warn
|
||||
# (amber), crit (red), info (blue) or dim. The status_badge and status_dot
|
||||
# macros read this, so one state looks the same on every page.
|
||||
STATES: dict[str, tuple[str, str]] = {
|
||||
"up": ("ok", "Up"),
|
||||
"ok": ("ok", "OK"),
|
||||
"resolved": ("ok", "Resolved"),
|
||||
"down": ("crit", "Down"),
|
||||
"firing": ("crit", "Firing"),
|
||||
"crit": ("crit", "Critical"),
|
||||
"warn": ("warn", "Warning"),
|
||||
"pending": ("warn", "Pending"),
|
||||
"stale": ("warn", "Stale"),
|
||||
"no_data": ("warn", "No data"),
|
||||
"acknowledged": ("info", "Acknowledged"),
|
||||
"inactive": ("dim", "Inactive"),
|
||||
"unknown": ("dim", "Unknown"),
|
||||
}
|
||||
|
||||
|
||||
def status_info(state: Any) -> tuple[str, str]:
|
||||
"""(tone, label) for a state name or enum. A state the map doesn't know
|
||||
is drawn dim under its own name rather than breaking the page."""
|
||||
key = str(getattr(state, "value", state) or "unknown").lower()
|
||||
return STATES.get(key, ("dim", key.replace("_", " ").capitalize()))
|
||||
|
||||
|
||||
def required(value: Any, what: str) -> Any:
|
||||
"""For a macro argument that must be given: raise if it is empty."""
|
||||
if value is None or not str(value).strip():
|
||||
raise ValueError(f"{what} is required")
|
||||
return value
|
||||
|
||||
@@ -31,6 +31,10 @@
|
||||
--orange-dim: color-mix(in srgb, var(--fs-warning) 20%, transparent);
|
||||
--red: var(--fs-error-fg);
|
||||
--red-dim: color-mix(in srgb, var(--fs-error) 20%, transparent);
|
||||
/* Info (acknowledged): lighter than the house --fs-info-fg (50%), which falls
|
||||
to 4.18:1 on its tint over a hovered row; 40% holds 5.09:1 there. */
|
||||
--blue: color-mix(in srgb, var(--fs-info) 40%, var(--fs-text-primary));
|
||||
--blue-dim: color-mix(in srgb, var(--fs-info) 20%, transparent);
|
||||
--font-serif: var(--fs-font-display);
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
@@ -172,11 +176,19 @@ input[type=text], input[type=email], input[type=password], input[type=number], i
|
||||
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
|
||||
select { cursor: pointer; }
|
||||
textarea { resize: vertical; }
|
||||
/* Form fields: .field wraps a .field-label, the .input and an optional .field-hint. */
|
||||
.field { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.9rem; }
|
||||
.field-label { display: block; margin-bottom: 0; font-size: 0.75rem; color: var(--text-muted); }
|
||||
.field-hint { font-size: 0.75rem; color: var(--text-dim); }
|
||||
.input { width: 100%; padding: 0.4rem 0.65rem; background: var(--bg); border: 1px solid var(--border-mid); border-radius: var(--fs-radius-sm); color: var(--text); font-size: 0.88rem; font-family: inherit; }
|
||||
.input:focus { outline: none; border-color: var(--accent); }
|
||||
.input:disabled { opacity: var(--fs-disabled-opacity); }
|
||||
|
||||
/* Buttons */
|
||||
.btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 1rem; background: var(--accent); color: var(--fs-surface-page); border: none; border-radius: 5px; cursor: pointer; font-size: 0.875rem; font-family: inherit; font-weight: 500; transition: background .15s; text-decoration: none; }
|
||||
.btn:hover { background: var(--accent-hover); color: var(--fs-surface-page); }
|
||||
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
|
||||
.btn-icon { padding: 0.3rem 0.5rem; line-height: 1; }
|
||||
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border-mid); }
|
||||
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text); }
|
||||
.btn-danger { background: var(--fs-action-destructive); color: var(--fs-text-on-action); }
|
||||
@@ -197,9 +209,38 @@ textarea { resize: vertical; }
|
||||
.dot-down { background: var(--red); }
|
||||
.dot-warn { background: var(--yellow); }
|
||||
.dot-dim { background: var(--text-dim); }
|
||||
/* Tones the status_badge / status_dot macros draw (formatting.STATES). */
|
||||
.badge-ok { background: var(--green-dim); color: var(--green); }
|
||||
.badge-warn { background: var(--yellow-dim); color: var(--yellow); }
|
||||
.badge-crit { background: var(--red-dim); color: var(--red); }
|
||||
.badge-info { background: var(--blue-dim); color: var(--blue); }
|
||||
.dot-ok { background: var(--green); }
|
||||
.dot-crit { background: var(--red); }
|
||||
.dot-info { background: var(--blue); }
|
||||
.dot-label { margin-left: 0.35rem; font-size: 0.85rem; }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
||||
|
||||
/* Empty state */
|
||||
.empty { color: var(--text-muted); font-size: 0.9rem; padding: 2rem; text-align: center; }
|
||||
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.9rem; padding: 2rem 1rem; text-align: center; }
|
||||
|
||||
/* Page header: title on the left, its actions on the right (page_header macro). */
|
||||
.page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
|
||||
.page-header .page-title { margin-bottom: 0; }
|
||||
.page-subtitle { margin-top: 0.3rem; color: var(--text-muted); font-size: 0.9rem; }
|
||||
.page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
|
||||
|
||||
/* Stat tile (stat_tile macro): a label over one headline number. */
|
||||
.stat-tile { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--fs-radius-md); color: var(--text); min-width: 8rem; }
|
||||
a.stat-tile:hover { border-color: var(--border-mid); background: var(--bg-elevated); color: var(--text); }
|
||||
.stat-tile-label { font-size: var(--fs-size-tiny); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--fs-tracking-tiny); }
|
||||
.stat-tile-value { font-size: 1.6rem; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
|
||||
.stat-tile-hint { font-size: 0.78rem; color: var(--text-dim); }
|
||||
.stat-ok .stat-tile-value { color: var(--green); }
|
||||
.stat-warn .stat-tile-value { color: var(--yellow); }
|
||||
.stat-crit .stat-tile-value { color: var(--red); }
|
||||
.stat-info .stat-tile-value { color: var(--blue); }
|
||||
.stat-dim .stat-tile-value { color: var(--text-dim); }
|
||||
|
||||
/* Breadcrumbs */
|
||||
/* Breadcrumb renders as a kicker line tucked directly above the page header
|
||||
|
||||
@@ -17,6 +17,70 @@
|
||||
</nav>
|
||||
{%- endmacro %}
|
||||
|
||||
{# Metric threshold coloring moved to the `threshold_style(value, kind)` jinja
|
||||
global (steward/core/settings.py + app.py), which reads operator-configurable
|
||||
cutoffs from Settings → Thresholds. Call it as threshold_style(v, 'cpu'). #}
|
||||
{# A state as a labelled badge: up, down, stale, firing, pending, acknowledged,
|
||||
no_data, ok, warn, crit, resolved, inactive (formatting.STATES). `state` may
|
||||
be a string or an enum; `label` replaces the standard wording. #}
|
||||
{% macro status_badge(state, label=none, title=none) -%}
|
||||
{%- set tone, text = status_info(state) -%}
|
||||
<span class="badge badge-{{ tone }}"{% if title %} title="{{ title }}"{% endif %}>{{ label or text }}</span>
|
||||
{%- endmacro %}
|
||||
|
||||
{# A state as a coloured dot. The dot is never the only signal: its label is
|
||||
read out to a screen reader, and shown beside it when `show_label`. #}
|
||||
{% macro status_dot(state, label=none, show_label=false) -%}
|
||||
{%- set tone, text = status_info(state) -%}
|
||||
<span class="dot dot-{{ tone }}" aria-hidden="true" title="{{ label or text }}"></span>
|
||||
{%- if show_label %}<span class="dot-label">{{ label or text }}</span>{% else %}<span class="sr-only">{{ label or text }}</span>{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
{# Threshold colouring: `threshold_style(value, kind)` (an inline style) and
|
||||
`status_class(value, kind)` ('ok' / 'warn' / 'crit' / 'unknown') are jinja
|
||||
globals reading the cutoffs from Settings → Thresholds. #}
|
||||
|
||||
{# One headline number. `state` (a STATES name, or a status_class result)
|
||||
colours the value; `href` makes the whole tile a link. #}
|
||||
{% macro stat_tile(label, value, state=none, hint=none, href=none) -%}
|
||||
{%- set tone = status_info(state)[0] if state else none -%}
|
||||
{%- set body -%}
|
||||
<span class="stat-tile-label">{{ label }}</span>
|
||||
<span class="stat-tile-value">{{ value }}</span>
|
||||
{%- if hint %}<span class="stat-tile-hint">{{ hint }}</span>{% endif %}
|
||||
{%- endset -%}
|
||||
{%- if href -%}
|
||||
<a href="{{ href }}" class="stat-tile{% if tone %} stat-{{ tone }}{% endif %}">{{ body }}</a>
|
||||
{%- else -%}
|
||||
<div class="stat-tile{% if tone %} stat-{{ tone }}{% endif %}">{{ body }}</div>
|
||||
{%- endif -%}
|
||||
{%- endmacro %}
|
||||
|
||||
{# What a list shows when it has nothing in it, with an optional next step. #}
|
||||
{% macro empty_state(message, action_label=none, action_href=none) -%}
|
||||
<div class="empty-state">
|
||||
<p>{{ message }}</p>
|
||||
{%- if action_label and action_href %}<a class="btn btn-ghost btn-sm" href="{{ action_href }}">{{ action_label }}</a>{% endif %}
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
||||
{# The page's <h1>, with its actions to the right:
|
||||
{% call page_header("Alerts") %}<a class="btn" href="…">New rule</a>{% endcall %} #}
|
||||
{% macro page_header(title, subtitle=none) -%}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">{{ title }}</h1>
|
||||
{%- if subtitle %}<p class="page-subtitle">{{ subtitle }}</p>{% endif %}
|
||||
</div>
|
||||
{%- if caller is defined %}<div class="page-actions">{{ caller() }}</div>{% endif %}
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
||||
{# A button that shows only an icon. The label is required: it is the button's
|
||||
accessible name and its tooltip, and rendering one without it raises. #}
|
||||
{% macro icon_button(icon, label, href=none, cls="btn-ghost") -%}
|
||||
{%- set name = required(label, "icon_button label") -%}
|
||||
{%- if href -%}
|
||||
<a class="btn btn-sm btn-icon {{ cls }}" href="{{ href }}" aria-label="{{ name }}" title="{{ name }}">{{ icon }}</a>
|
||||
{%- else -%}
|
||||
<button type="{{ kwargs.get('type', 'button') }}" class="btn btn-sm btn-icon {{ cls }}" aria-label="{{ name }}" title="{{ name }}"
|
||||
{%- if kwargs.get('confirm') %} data-confirm="{{ kwargs.confirm }}"{% endif %}>{{ icon }}</button>
|
||||
{%- endif -%}
|
||||
{%- endmacro %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -23,8 +23,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% set inp = "width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;" %}
|
||||
{% set lbl = "font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;" %}
|
||||
|
||||
{# ── Live vitals strip (host_agent fragment) — full width on top, polled ────── #}
|
||||
<div id="hv-strip"
|
||||
@@ -98,24 +96,24 @@
|
||||
<input type="hidden" name="host_id" value="{{ host.id }}">
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.6rem;align-items:end;">
|
||||
<div>
|
||||
<label style="{{ lbl }}">Type</label>
|
||||
<select name="type" id="mtype" onchange="mtoggle(this.value)" style="{{ inp }}">
|
||||
<label class="field-label">Type</label>
|
||||
<select name="type" id="mtype" onchange="mtoggle(this.value)" class="input">
|
||||
{% for t in monitor_types %}
|
||||
<option value="{{ t.value }}" {% if t.value == 'icmp' %}selected{% endif %}>{{ t.value | upper }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style="{{ lbl }}">Name</label>
|
||||
<input type="text" name="name" placeholder="optional" autocomplete="off" style="{{ inp }}">
|
||||
<label class="field-label">Name</label>
|
||||
<input type="text" name="name" placeholder="optional" autocomplete="off" class="input">
|
||||
</div>
|
||||
<div>
|
||||
<label style="{{ lbl }}">Target</label>
|
||||
<input type="text" name="target" value="{{ host.address }}" autocomplete="off" required style="{{ inp }}">
|
||||
<label class="field-label">Target</label>
|
||||
<input type="text" name="target" value="{{ host.address }}" autocomplete="off" required class="input">
|
||||
</div>
|
||||
<div>
|
||||
<label style="{{ lbl }}">Interval (s, 0=global)</label>
|
||||
<input type="number" name="check_interval_seconds" value="0" min="0" style="{{ inp }}">
|
||||
<label class="field-label">Interval (s, 0=global)</label>
|
||||
<input type="number" name="check_interval_seconds" value="0" min="0" class="input">
|
||||
</div>
|
||||
{{ type_fields() }}
|
||||
</div>
|
||||
|
||||
@@ -1,45 +1,43 @@
|
||||
{# Shared type-specific monitor form fields. Every field is rendered; a tiny
|
||||
script (mtoggle) shows only the ones relevant to the selected type. #}
|
||||
{% macro type_fields(config={}) %}
|
||||
{% set inp = "width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;" %}
|
||||
{% set lbl = "font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;" %}
|
||||
|
||||
{# tcp #}
|
||||
<div class="mfield" data-types="tcp">
|
||||
<label style="{{ lbl }}">Port</label>
|
||||
<input type="number" name="port" value="{{ config.get('port', 80) }}" min="1" max="65535" style="{{ inp }}">
|
||||
<label class="field-label">Port</label>
|
||||
<input type="number" name="port" value="{{ config.get('port', 80) }}" min="1" max="65535" class="input">
|
||||
</div>
|
||||
|
||||
{# dns #}
|
||||
<div class="mfield" data-types="dns">
|
||||
<label style="{{ lbl }}">Expected IP <span style="color:var(--text-dim);">(optional)</span></label>
|
||||
<label class="field-label">Expected IP <span style="color:var(--text-dim);">(optional)</span></label>
|
||||
<input type="text" name="expected_ip" value="{{ config.get('expected_ip') or '' }}"
|
||||
placeholder="e.g. 192.0.2.10" autocomplete="off" style="{{ inp }}">
|
||||
placeholder="e.g. 192.0.2.10" autocomplete="off" class="input">
|
||||
</div>
|
||||
|
||||
{# http #}
|
||||
<div class="mfield" data-types="http">
|
||||
<label style="{{ lbl }}">Method</label>
|
||||
<select name="method" style="{{ inp }}">
|
||||
<label class="field-label">Method</label>
|
||||
<select name="method" class="input">
|
||||
{% for opt in ["GET", "HEAD", "POST"] %}
|
||||
<option value="{{ opt }}" {% if config.get('method', 'GET') == opt %}selected{% endif %}>{{ opt }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mfield" data-types="http">
|
||||
<label style="{{ lbl }}">Expected status</label>
|
||||
<label class="field-label">Expected status</label>
|
||||
<input type="number" name="expected_status" value="{{ config.get('expected_status', 200) }}"
|
||||
min="100" max="599" style="{{ inp }}">
|
||||
min="100" max="599" class="input">
|
||||
</div>
|
||||
<div class="mfield" data-types="http">
|
||||
<label style="{{ lbl }}">Timeout (s)</label>
|
||||
<label class="field-label">Timeout (s)</label>
|
||||
<input type="number" name="timeout_seconds" value="{{ config.get('timeout_seconds', 10) }}"
|
||||
min="1" max="60" style="{{ inp }}">
|
||||
min="1" max="60" class="input">
|
||||
</div>
|
||||
<div class="mfield" data-types="http">
|
||||
<label style="{{ lbl }}">Content match <span style="color:var(--text-dim);">(substring)</span></label>
|
||||
<label class="field-label">Content match <span style="color:var(--text-dim);">(substring)</span></label>
|
||||
<input type="text" name="content_match" value="{{ config.get('content_match', '') }}"
|
||||
placeholder="optional" autocomplete="off" style="{{ inp }}">
|
||||
placeholder="optional" autocomplete="off" class="input">
|
||||
</div>
|
||||
<div class="mfield" data-types="http" style="display:flex;flex-direction:column;gap:0.3rem;justify-content:flex-end;">
|
||||
<label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;cursor:pointer;">
|
||||
|
||||
@@ -8,27 +8,25 @@
|
||||
<h1 class="page-title" style="margin-bottom:0;">Edit Monitor</h1>
|
||||
</div>
|
||||
|
||||
{% set inp = "width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;" %}
|
||||
{% set lbl = "font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;" %}
|
||||
|
||||
<div class="card" style="max-width:760px;">
|
||||
<form method="post" action="/monitors/{{ monitor.id }}/edit" style="display:grid;gap:0.6rem;">{{ csrf_field() }}
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.6rem;align-items:end;">
|
||||
<div>
|
||||
<label style="{{ lbl }}">Type</label>
|
||||
<input type="text" value="{{ monitor.type | upper }}" disabled style="{{ inp }}opacity:0.7;">
|
||||
<label class="field-label">Type</label>
|
||||
<input type="text" value="{{ monitor.type | upper }}" disabled class="input">
|
||||
</div>
|
||||
<div>
|
||||
<label style="{{ lbl }}">Name</label>
|
||||
<input type="text" name="name" value="{{ monitor.name }}" autocomplete="off" style="{{ inp }}">
|
||||
<label class="field-label">Name</label>
|
||||
<input type="text" name="name" value="{{ monitor.name }}" autocomplete="off" class="input">
|
||||
</div>
|
||||
<div>
|
||||
<label style="{{ lbl }}">Target <span style="color:var(--red);">*</span></label>
|
||||
<input type="text" name="target" value="{{ monitor.target }}" autocomplete="off" required style="{{ inp }}">
|
||||
<label class="field-label">Target <span style="color:var(--red);">*</span></label>
|
||||
<input type="text" name="target" value="{{ monitor.target }}" autocomplete="off" required class="input">
|
||||
</div>
|
||||
<div>
|
||||
<label style="{{ lbl }}">Interval (s, 0=global)</label>
|
||||
<input type="number" name="check_interval_seconds" value="{{ monitor.check_interval_seconds }}" min="0" style="{{ inp }}">
|
||||
<label class="field-label">Interval (s, 0=global)</label>
|
||||
<input type="number" name="check_interval_seconds" value="{{ monitor.check_interval_seconds }}" min="0" class="input">
|
||||
</div>
|
||||
{{ type_fields(config) }}
|
||||
</div>
|
||||
|
||||
@@ -10,8 +10,6 @@
|
||||
{% include "_time_range.html" %}
|
||||
</div>
|
||||
|
||||
{% set inp = "width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;" %}
|
||||
{% set lbl = "font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;" %}
|
||||
|
||||
{# ── Add monitor ──────────────────────────────────────────────────────────── #}
|
||||
<div class="card" style="margin-bottom:1.25rem;">
|
||||
@@ -19,24 +17,24 @@
|
||||
<form method="post" action="/monitors/add" style="display:grid;gap:0.6rem;">{{ csrf_field() }}
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.6rem;align-items:end;">
|
||||
<div>
|
||||
<label style="{{ lbl }}">Type</label>
|
||||
<select name="type" id="mtype" onchange="mtoggle(this.value)" style="{{ inp }}">
|
||||
<label class="field-label">Type</label>
|
||||
<select name="type" id="mtype" onchange="mtoggle(this.value)" class="input">
|
||||
{% for t in types %}
|
||||
<option value="{{ t.value }}" {% if t.value == 'icmp' %}selected{% endif %}>{{ t.value | upper }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style="{{ lbl }}">Name</label>
|
||||
<input type="text" name="name" placeholder="optional" autocomplete="off" style="{{ inp }}">
|
||||
<label class="field-label">Name</label>
|
||||
<input type="text" name="name" placeholder="optional" autocomplete="off" class="input">
|
||||
</div>
|
||||
<div>
|
||||
<label style="{{ lbl }}">Target <span style="color:var(--red);">*</span></label>
|
||||
<input type="text" name="target" placeholder="host, IP, or URL" autocomplete="off" required style="{{ inp }}">
|
||||
<label class="field-label">Target <span style="color:var(--red);">*</span></label>
|
||||
<input type="text" name="target" placeholder="host, IP, or URL" autocomplete="off" required class="input">
|
||||
</div>
|
||||
<div>
|
||||
<label style="{{ lbl }}">Interval (s, 0=global)</label>
|
||||
<input type="number" name="check_interval_seconds" value="0" min="0" style="{{ inp }}">
|
||||
<label class="field-label">Interval (s, 0=global)</label>
|
||||
<input type="number" name="check_interval_seconds" value="0" min="0" class="input">
|
||||
</div>
|
||||
{{ type_fields() }}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
"""The status and layout macros in _macros.html (#5094), rendered through the
|
||||
app's own Jinja environment so its globals (status_info, required) are the
|
||||
real ones."""
|
||||
import enum
|
||||
|
||||
import pytest
|
||||
|
||||
from steward.core.formatting import STATES, status_info
|
||||
|
||||
|
||||
async def _render(app, source: str, **ctx) -> str:
|
||||
async with app.app_context():
|
||||
tpl = app.jinja_env.from_string('{% from "_macros.html" import status_badge, status_dot, '
|
||||
'stat_tile, empty_state, page_header, icon_button %}' + source)
|
||||
out = await tpl.render_async(**ctx) if app.jinja_env.is_async else tpl.render(**ctx)
|
||||
return " ".join(out.split())
|
||||
|
||||
|
||||
def test_every_state_a_page_shows_has_a_tone_and_a_label():
|
||||
named = ["up", "down", "stale", "firing", "pending", "acknowledged", "no_data", "ok", "warn", "crit"]
|
||||
assert set(named) <= set(STATES)
|
||||
assert {tone for tone, _ in STATES.values()} == {"ok", "warn", "crit", "info", "dim"}
|
||||
assert status_info("down")[0] == status_info("firing")[0] == "crit"
|
||||
|
||||
|
||||
class _State(enum.Enum):
|
||||
firing = "firing"
|
||||
|
||||
|
||||
@pytest.mark.parametrize("state, tone, label", [
|
||||
("firing", "crit", "Firing"), (_State.firing, "crit", "Firing"), ("UP", "ok", "Up"),
|
||||
("no_data", "warn", "No data"), ("acknowledged", "info", "Acknowledged"),
|
||||
(None, "dim", "Unknown"), ("half_open", "dim", "Half open"), # unmapped: dim, its own name
|
||||
])
|
||||
def test_status_info(state, tone, label):
|
||||
assert status_info(state) == (tone, label)
|
||||
|
||||
|
||||
async def test_status_badge(app):
|
||||
assert await _render(app, "{{ status_badge('firing') }}") == '<span class="badge badge-crit">Firing</span>'
|
||||
out = await _render(app, "{{ status_badge(s, 'Muted', title=t) }}", s=_State.firing, t='a "b"')
|
||||
assert out == '<span class="badge badge-crit" title="a "b"">Muted</span>'
|
||||
|
||||
|
||||
async def test_a_status_dot_always_carries_its_label(app):
|
||||
out = await _render(app, "{{ status_dot('down') }}")
|
||||
assert 'class="dot dot-crit" aria-hidden="true"' in out and '<span class="sr-only">Down</span>' in out
|
||||
out = await _render(app, "{{ status_dot('up', show_label=true) }}")
|
||||
assert '<span class="dot-label">Up</span>' in out and "sr-only" not in out
|
||||
|
||||
|
||||
async def test_stat_tile(app):
|
||||
out = await _render(app, "{{ stat_tile('Firing', 3, state='crit', href='/alerts/?a=1&b=2') }}")
|
||||
assert out.startswith('<a href="/alerts/?a=1&b=2" class="stat-tile stat-crit">')
|
||||
assert '<span class="stat-tile-value">3</span>' in out and out.endswith("</a>")
|
||||
out = await _render(app, "{{ stat_tile('<Hosts>', 12, hint='2 stale') }}")
|
||||
assert out.startswith('<div class="stat-tile">') and "<Hosts>" in out and "2 stale" in out
|
||||
|
||||
|
||||
async def test_empty_state(app):
|
||||
out = await _render(app, "{{ empty_state('No rules yet.', 'New rule', '/alerts/rules/new') }}")
|
||||
assert "<p>No rules yet.</p>" in out and 'href="/alerts/rules/new">New rule</a>' in out
|
||||
assert "<a" not in await _render(app, "{{ empty_state('Nothing.') }}")
|
||||
|
||||
|
||||
async def test_page_header_with_and_without_actions(app):
|
||||
out = await _render(app, "{% call page_header('Alerts', 'All rules') %}<a class=\"btn\">New</a>{% endcall %}")
|
||||
assert '<h1 class="page-title">Alerts</h1>' in out and '<p class="page-subtitle">All rules</p>' in out
|
||||
assert '<div class="page-actions"><a class="btn">New</a></div>' in out
|
||||
assert "page-actions" not in await _render(app, "{{ page_header('Alerts') }}")
|
||||
|
||||
|
||||
async def test_icon_button_names_itself_and_refuses_to_render_without_a_label(app):
|
||||
out = await _render(app, "{{ icon_button('×', 'Delete rule web01', type='submit', cls='btn-danger', confirm='Delete?') }}")
|
||||
assert 'type="submit"' in out and 'aria-label="Delete rule web01"' in out and 'data-confirm="Delete?"' in out
|
||||
out = await _render(app, "{{ icon_button('✎', 'Edit', href='/x') }}")
|
||||
assert out.startswith('<a class="btn btn-sm btn-icon btn-ghost" href="/x" aria-label="Edit"')
|
||||
for source in ("{{ icon_button('×') }}", "{{ icon_button('×', '') }}", "{{ icon_button('×', ' ') }}"):
|
||||
with pytest.raises(ValueError, match="icon_button label is required"):
|
||||
await _render(app, source)
|
||||
Reference in New Issue
Block a user