Files
FabledSteward/steward/templates/monitors/edit.html
T
bvandeusenandClaude Opus 5.5 477b05b9d0 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>
2026-10-06 14:34:21 -04:00

48 lines
2.0 KiB
HTML

{% extends "base.html" %}
{% from "_macros.html" import crumbs %}
{% from "monitors/_fields.html" import type_fields, toggle_script %}
{% block title %}Edit Monitor — Steward{% endblock %}
{% block breadcrumb %}{{ crumbs([("Monitors", "/monitors/"), ("Edit monitor", "")]) }}{% endblock %}
{% block content %}
<div style="margin-bottom:1.25rem;">
<h1 class="page-title" style="margin-bottom:0;">Edit Monitor</h1>
</div>
<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 class="field-label">Type</label>
<input type="text" value="{{ monitor.type | upper }}" disabled class="input">
</div>
<div>
<label class="field-label">Name</label>
<input type="text" name="name" value="{{ monitor.name }}" autocomplete="off" class="input">
</div>
<div>
<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 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>
{% if monitor.host_id %}
<p style="font-size:0.78rem;color:var(--text-dim);margin:0;">
Linked to <a href="/hosts/{{ monitor.host_id }}" style="color:var(--accent);">its host</a>.
</p>
{% endif %}
<div style="display:flex;gap:0.5rem;">
<button type="submit" class="btn btn-sm">Save</button>
<a href="/monitors/" class="btn btn-sm" style="background:transparent;border:1px solid var(--border-mid);">Cancel</a>
</div>
</form>
</div>
{{ toggle_script() }}
<script>mtoggle({{ monitor.type | tojson }});</script>
{% endblock %}