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>
63 lines
2.7 KiB
HTML
63 lines
2.7 KiB
HTML
{# 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={}) %}
|
|
|
|
{# tcp #}
|
|
<div class="mfield" data-types="tcp">
|
|
<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 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" class="input">
|
|
</div>
|
|
|
|
{# http #}
|
|
<div class="mfield" data-types="http">
|
|
<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 class="field-label">Expected status</label>
|
|
<input type="number" name="expected_status" value="{{ config.get('expected_status', 200) }}"
|
|
min="100" max="599" class="input">
|
|
</div>
|
|
<div class="mfield" data-types="http">
|
|
<label class="field-label">Timeout (s)</label>
|
|
<input type="number" name="timeout_seconds" value="{{ config.get('timeout_seconds', 10) }}"
|
|
min="1" max="60" class="input">
|
|
</div>
|
|
<div class="mfield" data-types="http">
|
|
<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" 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;">
|
|
<input type="checkbox" name="follow_redirects" {% if config.get('follow_redirects', True) %}checked{% endif %}> Follow redirects
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;cursor:pointer;">
|
|
<input type="checkbox" name="verify_ssl" {% if config.get('verify_ssl', True) %}checked{% endif %}> Verify SSL
|
|
</label>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{# Show only the fields whose data-types matches the active monitor type. #}
|
|
{% macro toggle_script() %}
|
|
<script>
|
|
function mtoggle(t) {
|
|
document.querySelectorAll('.mfield').forEach(function (el) {
|
|
var types = (el.getAttribute('data-types') || '').split(',');
|
|
el.style.display = types.indexOf(t) !== -1 ? '' : 'none';
|
|
});
|
|
}
|
|
</script>
|
|
{% endmacro %}
|