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>
89 lines
3.7 KiB
HTML
89 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
|
{% from "_macros.html" import crumbs %}
|
|
{% block title %}New Maintenance Window — Steward{% endblock %}
|
|
{% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("Maintenance", "/alerts/maintenance"), ("New window", "")]) }}{% endblock %}
|
|
{% block content %}
|
|
<div style="max-width:560px;margin:2rem auto;">
|
|
<h1 class="page-title">New Maintenance Window</h1>
|
|
<div class="card">
|
|
<form method="post" action="/alerts/maintenance">{{ csrf_field() }}
|
|
|
|
<div class="form-group">
|
|
<label>Window Name</label>
|
|
<input type="text" name="name" required autofocus
|
|
placeholder="e.g. Weekly reboot — homelab">
|
|
</div>
|
|
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
|
|
<div class="form-group">
|
|
<label>Start (UTC)</label>
|
|
<input type="datetime-local" name="start_at" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>End (UTC)</label>
|
|
<input type="datetime-local" name="end_at" required>
|
|
</div>
|
|
</div>
|
|
|
|
{# ── Scope ─────────────────────────────────────────────────────────────── #}
|
|
<div class="form-group">
|
|
<label>Scope</label>
|
|
<select name="_scope_type" id="scope-type" onchange="updateScope()">
|
|
<option value="all">All alerts</option>
|
|
<option value="source">By source module</option>
|
|
<option value="resource">By source + resource</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="scope-source-row" style="display:none;" class="form-group">
|
|
<label>Source Module</label>
|
|
<select name="scope_source" id="scope-source">
|
|
<option value="">— select —</option>
|
|
{% for src in source_modules %}
|
|
<option value="{{ src }}">{{ src }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div id="scope-resource-row" style="display:none;" class="form-group">
|
|
<label>Resource Name</label>
|
|
<input type="text" name="scope_resource" id="scope-resource"
|
|
placeholder="Exact resource name (e.g. my-server)">
|
|
<p class="field-hint">
|
|
Leave blank to mute all resources within the selected source.
|
|
</p>
|
|
</div>
|
|
|
|
<div style="display:flex;gap:1rem;margin-top:1.5rem;">
|
|
<button type="submit" class="btn">Create Window</button>
|
|
<a href="/alerts/maintenance" class="btn btn-ghost">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card" style="margin-top:1rem;">
|
|
<div class="section-title" style="margin-bottom:0.5rem;">How scope works</div>
|
|
<div style="display:grid;gap:0.4rem;font-size:0.82rem;color:var(--text-muted);">
|
|
<div><strong style="color:var(--text);">All alerts</strong> — every alert rule's notifications are muted</div>
|
|
<div><strong style="color:var(--text);">By source</strong> — e.g. source=icmp mutes all ping alerts</div>
|
|
<div><strong style="color:var(--text);">By source + resource</strong> — e.g. icmp/my-server mutes only that host's ping alerts</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function updateScope() {
|
|
var t = document.getElementById('scope-type').value;
|
|
document.getElementById('scope-source-row').style.display = t === 'all' ? 'none' : '';
|
|
document.getElementById('scope-resource-row').style.display = t === 'resource' ? '' : 'none';
|
|
if (t === 'all') {
|
|
document.getElementById('scope-source').value = '';
|
|
document.getElementById('scope-resource').value = '';
|
|
}
|
|
if (t === 'source') {
|
|
document.getElementById('scope-resource').value = '';
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|