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>
59 lines
2.7 KiB
HTML
59 lines
2.7 KiB
HTML
{% extends "base.html" %}
|
|
{% from "monitors/_fields.html" import type_fields, toggle_script %}
|
|
{% block title %}Monitors — Steward{% endblock %}
|
|
{% block content %}
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap;">
|
|
<div style="display:flex;align-items:baseline;gap:1rem;">
|
|
<h1 class="page-title" style="margin-bottom:0;">Monitors</h1>
|
|
<span style="color:var(--text-muted);font-size:0.85rem;">polling every {{ poll_interval }}s</span>
|
|
</div>
|
|
{% include "_time_range.html" %}
|
|
</div>
|
|
|
|
|
|
{# ── Add monitor ──────────────────────────────────────────────────────────── #}
|
|
<div class="card" style="margin-bottom:1.25rem;">
|
|
<div class="section-title" style="margin-bottom:0.75rem;">Add Monitor</div>
|
|
<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 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 class="field-label">Name</label>
|
|
<input type="text" name="name" placeholder="optional" autocomplete="off" class="input">
|
|
</div>
|
|
<div>
|
|
<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 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>
|
|
<div><button type="submit" class="btn btn-sm">Add Monitor</button></div>
|
|
</form>
|
|
</div>
|
|
|
|
{# ── Live monitor rows ────────────────────────────────────────────────────── #}
|
|
<div class="card ping-card">
|
|
<div id="monitor-rows"
|
|
hx-get="/monitors/rows"
|
|
hx-trigger="load, every {{ poll_interval }}s, rangeChange from:body"
|
|
hx-include="#time-range"
|
|
hx-swap="innerHTML">
|
|
<div style="color:var(--text-muted);font-size:0.9rem;padding:2rem;">Loading…</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{ toggle_script() }}
|
|
<script>mtoggle(document.getElementById('mtype').value);</script>
|
|
{% endblock %}
|