bvandeusen
389002fc6f
Adds a breadcrumb trail to nested views for orientation. Mechanism: a
{% block breadcrumb %} slot in base.html (+ styling) and a shared crumbs()
macro in templates/_macros.html; each nested page fills the block with its
trail (root→current, last item is the current page). Pages without the block
render no bar, so top-level nav roots stay clean.
Applied to: Ansible (browse, schedules, playbook editor, run detail) +
inventory (targets/groups + detail), host_agent (fleet, host detail,
settings), hosts form, settings tabs (ansible/auth/notifications/plugins/
reports + plugin detail), dashboard (list, edit), and alerts (rule form,
maintenance + new). Dynamic labels (host/target/run/dashboard names) come
from the page context — no route changes. All 60 templates Jinja-compile.
Task #873.
Co-Authored-By: Claude Opus 4.8 (1M context) <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">
|
|
|
|
<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 style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">
|
|
Leave blank to suppress 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 is suppressed</div>
|
|
<div><strong style="color:var(--text);">By source</strong> — e.g. source=ping suppresses all ping alerts</div>
|
|
<div><strong style="color:var(--text);">By source + resource</strong> — e.g. ping/my-server suppresses 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 %}
|