FabledSteward/steward/templates/monitors/_fields.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={}) %}

{# What each type checks, shown under the row for the selected type. #}
<p class="field-hint mfield" data-types="icmp" style="grid-column:1/-1;margin:0;">
  <strong>Ping</strong> sends an ICMP echo to the target, a hostname or IP. Up when it answers; the round trip is the latency.</p>
<p class="field-hint mfield" data-types="tcp" style="grid-column:1/-1;margin:0;">
  <strong>TCP</strong> opens a connection to the target on the port below (22 for SSH, 443 for HTTPS, …). Up when the port accepts; the connect time is the latency. Nothing is sent.</p>
<p class="field-hint mfield" data-types="http" style="grid-column:1/-1;margin:0;">
  <strong>HTTP</strong> requests the target URL (http:// or https://). Up when the status matches, and the page contains the text below if you set one. For https, the certificate's expiry is tracked too.</p>
<p class="field-hint mfield" data-types="dns" style="grid-column:1/-1;margin:0;">
  <strong>DNS</strong> looks the target name up (google.com, nas.lan, …) through the resolver Steward's container uses. Up when it resolves, and to the expected IP if you set one. No response time is recorded.</p>

{# 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 %}