gandalf/templates/suppressions.html

{% extends "base.html" %}
{% block title %}Suppressions – GANDALF{% endblock %}

{% block content %}

<div class="lt-page-header">
  <div>
    <h1 class="lt-page-title">Alert Suppressions</h1>
    <p class="g-page-sub">Manage maintenance windows and per-target alert suppression rules.</p>
  </div>
</div>

<!-- ── Create suppression ─────────────────────────────────────────── -->
<section class="g-section">
  <div class="g-section-header">
    <h2 class="g-section-title">Create Suppression</h2>
  </div>
  <div class="lt-card">
    <div class="lt-card-body">
      <form id="create-suppression-form">
        <div class="form-row">
          <div class="lt-form-group">
            <label class="lt-label" for="s-type">Target Type <span class="required">*</span></label>
            <select class="lt-select" id="s-type" name="target_type">
              <option value="host">Host (all interfaces)</option>
              <option value="interface">Specific Interface</option>
              <option value="unifi_device">UniFi Device</option>
              <option value="all">Global (suppress everything)</option>
            </select>
          </div>
          <div class="lt-form-group" id="name-group">
            <label class="lt-label" for="s-name">Target Name <span class="required">*</span></label>
            <input type="text" class="lt-input" id="s-name" name="target_name"
                   placeholder="hostname or device name" autocomplete="off"
                   required aria-required="true" list="target-name-list">
            <datalist id="target-name-list">
              {% for name in snapshot.hosts.keys() | sort %}
              <option value="{{ name }}">
              {% endfor %}
            </datalist>
          </div>
          <div class="lt-form-group" id="detail-group" style="display:none">
            <label class="lt-label" for="s-detail">Interface Name</label>
            <input type="text" class="lt-input" id="s-detail" name="target_detail"
                   placeholder="e.g. enp35s0 or bond0" autocomplete="off">
          </div>
        </div>

        <div class="form-row">
          <div class="lt-form-group form-group-wide">
            <label class="lt-label" for="s-reason">Reason <span class="required">*</span></label>
            <input type="text" class="lt-input" id="s-reason" name="reason"
                   placeholder="e.g. Planned switch maintenance, replacing SFP on large1/enp43s0"
                   required aria-required="true">
          </div>
        </div>

        <div class="form-row form-row-align">
          <div class="lt-form-group">
            <label class="lt-label">Duration</label>
            <div class="duration-pills" role="group" aria-label="Select suppression duration">
              <button type="button" class="pill" data-duration="30" aria-pressed="false" aria-label="30 minutes">30 min</button>
              <button type="button" class="pill" data-duration="60" aria-pressed="false" aria-label="1 hour">1 hr</button>
              <button type="button" class="pill" data-duration="240" aria-pressed="false" aria-label="4 hours">4 hr</button>
              <button type="button" class="pill" data-duration="480" aria-pressed="false" aria-label="8 hours">8 hr</button>
              <button type="button" class="pill pill-manual active" data-duration="" aria-pressed="true" aria-label="Manual, no expiry">Manual ∞</button>
            </div>
            <input type="hidden" id="s-expires" name="expires_minutes" value="">
            <div class="lt-field-hint" id="s-dur-hint">Persists until manually removed.</div>
          </div>
          <div class="lt-form-group form-group-submit">
            <button type="submit" class="lt-btn lt-btn-primary lt-btn-lg">🔕 Apply Suppression</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

<!-- ── Active suppressions ────────────────────────────────────────── -->
<section class="g-section" id="active-sup-section">
  <div class="g-section-header">
    <h2 class="g-section-title">Active Suppressions</h2>
    <span class="g-section-badge" id="active-sup-badge">{{ active | length }}</span>
  </div>
  <div id="active-sup-wrap">
  {% if active %}
  <div class="lt-frame">
    <span class="lt-frame-bl">&#x255A;</span>
    <span class="lt-frame-br">&#x255D;</span>
    <div class="lt-section-header">Active Rules</div>
    <div class="lt-table-wrap">
      <table class="lt-table" id="active-sup-table">
        <caption class="lt-sr-only">Active suppression rules</caption>
        <thead>
          <tr>
            <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
            <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for s in active %}
          <tr id="sup-row-{{ s.id }}">
            {%- set _sup_badge = {'host':'badge-warning','interface':'badge-info','unifi_device':'badge-purple','all':'badge-critical'} -%}
            <td><span class="lt-badge {{ _sup_badge.get(s.target_type, 'badge-neutral') }}">{{ s.target_type }}</span></td>
            <td>{{ s.target_name or 'all' }}</td>
            <td>{{ s.target_detail or '–' }}</td>
            <td>{{ s.reason }}</td>
            <td>{{ s.suppressed_by }}</td>
            <td class="ts-cell">{{ s.created_at }}</td>
            <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
            <td>
              <button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="{{ s.id }}"
                      aria-label="Remove suppression for {{ s.target_name or 'global' }}">Remove</button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <div class="lt-empty-state lt-empty-state--sm" id="no-active-msg">
    <div class="lt-empty-state-icon">🔕</div>
    <div class="lt-empty-state-title">No active suppressions</div>
    <div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div>
  </div>
  {% endif %}
  </div>
</section>

<!-- ── Suppression history ────────────────────────────────────────── -->
<section class="g-section">
  <div class="g-section-header">
    <h2 class="g-section-title">History</h2>
    <span class="g-section-badge">{{ history | length }}</span>
  </div>
  {% if history %}
  <div class="lt-frame">
    <span class="lt-frame-bl">&#x255A;</span>
    <span class="lt-frame-br">&#x255D;</span>
    <div class="lt-section-header">Suppression Log</div>
    <div class="lt-table-wrap">
      <table class="lt-table lt-table-sm">
        <caption class="lt-sr-only">Suppression history</caption>
        <thead>
          <tr>
            <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
            <th>By</th><th>Created</th><th>Expires</th><th>Active</th>
          </tr>
        </thead>
        <tbody>
          {% for s in history %}
          <tr class="{% if not s.active %}row-resolved{% endif %}">
            <td>{{ s.target_type }}</td>
            <td>{{ s.target_name or 'all' }}</td>
            <td>{{ s.target_detail or '–' }}</td>
            <td>{{ s.reason }}</td>
            <td>{{ s.suppressed_by }}</td>
            <td class="ts-cell">{{ s.created_at }}</td>
            <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
            <td>
              {% if s.active %}
              <span class="lt-badge badge-ok">Yes</span>
              {% else %}
              <span class="lt-badge badge-neutral">No</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <div class="lt-empty-state lt-empty-state--sm">
    <div class="lt-empty-state-icon">📋</div>
    <div class="lt-empty-state-title">No suppression history yet</div>
  </div>
  {% endif %}
</section>

<!-- ── Available targets reference ───────────────────────────────── -->
<section class="g-section">
  <div class="g-section-header">
    <h2 class="g-section-title">Available Targets</h2>
  </div>
  <div class="lt-frame">
    <span class="lt-frame-bl">&#x255A;</span>
    <span class="lt-frame-br">&#x255D;</span>
    <div class="lt-section-header">Host &amp; Interface Reference</div>
    <div class="lt-section-body">
      <div class="targets-grid">
        {% for name, host in snapshot.hosts.items() %}
        <div class="target-card">
          <div class="target-name">{{ name }}</div>
          <div class="target-type">{{ 'Proxmox Host (prometheus)' if host.source == 'prometheus' else 'Ping-only host' }}</div>
          {% if host.interfaces %}
          <div class="target-ifaces">
            {% for iface in host.interfaces.keys() | sort %}
            <code class="iface-chip">{{ iface }}</code>
            {% endfor %}
          </div>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>

{% endblock %}

{% block scripts %}
<script>
  function onTypeChange() {
    const t = document.getElementById('s-type').value;
    document.getElementById('name-group').style.display = (t==='all') ? 'none' : '';
    document.getElementById('detail-group').style.display = (t==='interface') ? '' : 'none';
    const nameInput = document.getElementById('s-name');
    if (nameInput) {
      const req = (t !== 'all');
      nameInput.required = req;
      nameInput.setAttribute('aria-required', String(req));
    }
  }

  function setDur(mins, el) {
    setDuration(mins, el, { expiresId: 's-expires', pillSel: '#create-suppression-form .pill', hintId: 's-dur-hint' });
  }

  function renderActiveRows(rows) {
    const wrap = document.getElementById('active-sup-wrap');
    const badge = document.getElementById('active-sup-badge');
    if (!rows || !rows.length) {
      wrap.innerHTML = '<div class="lt-empty-state lt-empty-state--sm" id="no-active-msg"><div class="lt-empty-state-icon">🔕</div><div class="lt-empty-state-title">No active suppressions</div><div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div></div>';
      if (badge) badge.textContent = '0';
      return;
    }
    if (badge) badge.textContent = rows.length;
    const SUP_BADGE = {host:'badge-warning', interface:'badge-info', unifi_device:'badge-purple', all:'badge-critical'};
    const tbody = rows.map(s => `
      <tr id="sup-row-${s.id}">
        <td><span class="lt-badge ${SUP_BADGE[s.target_type] || 'badge-neutral'}">${lt.escHtml(s.target_type)}</span></td>
        <td>${lt.escHtml(s.target_name || 'all')}</td>
        <td>${lt.escHtml(s.target_detail || '–')}</td>
        <td>${lt.escHtml(s.reason)}</td>
        <td>${lt.escHtml(s.suppressed_by)}</td>
        <td class="ts-cell">${lt.escHtml(s.created_at || '')}</td>
        <td class="ts-cell">${s.expires_at ? lt.escHtml(s.expires_at) : '<em>manual</em>'}</td>
        <td><button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="${s.id}"
            aria-label="Remove suppression for ${lt.escHtml(s.target_name || 'global')}">Remove</button></td>
      </tr>`).join('');
    wrap.innerHTML = `
      <div class="lt-frame">
        <span class="lt-frame-bl">&#x255A;</span>
        <span class="lt-frame-br">&#x255D;</span>
        <div class="lt-section-header">Active Rules</div>
        <div class="lt-table-wrap">
          <table class="lt-table" id="active-sup-table">
            <caption class="lt-sr-only">Active suppression rules</caption>
            <thead><tr>
              <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
              <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
            </tr></thead>
            <tbody>${tbody}</tbody>
          </table>
        </div>
      </div>`;
  }

  async function refreshActive() {
    try {
      const rows = await lt.api.get('/api/suppressions');
      renderActiveRows(rows);
    } catch (err) {
      showToast('Failed to refresh suppressions', 'warning');
    }
  }

  async function createSuppression(e) {
    e.preventDefault();
    const form = e.target;
    const btn = form.querySelector('[type="submit"]');
    btn.classList.add('is-loading');
    const payload = {
      target_type:     form.target_type.value,
      target_name:     form.target_name ? form.target_name.value : '',
      target_detail:   document.getElementById('s-detail').value,
      reason:          form.reason.value,
      expires_minutes: form.expires_minutes.value ? parseInt(form.expires_minutes.value) : null,
    };
    try {
      await lt.api.post('/api/suppressions', payload);
      showToast('Suppression applied', 'success');
      form.reset();
      onTypeChange();
      setDur(null, document.querySelector('#create-suppression-form .pill-manual'));
      await refreshActive();
    } catch (err) {
      showToast(err.message || 'Error', 'error');
    } finally {
      btn.classList.remove('is-loading');
    }
  }

  async function removeSuppression(id) {
    if (!confirm('Remove this suppression?')) return;
    try {
      await lt.api.delete(`/api/suppressions/${id}`);
      document.getElementById(`sup-row-${id}`)?.remove();
      const badge = document.getElementById('active-sup-badge');
      if (badge) badge.textContent = Math.max(0, parseInt(badge.textContent || '0') - 1);
      const tbody = document.querySelector('#active-sup-table tbody');
      if (tbody && !tbody.children.length) {
        document.getElementById('active-sup-wrap').innerHTML =
          '<div class="lt-empty-state lt-empty-state--sm" id="no-active-msg"><div class="lt-empty-state-icon">🔕</div><div class="lt-empty-state-title">No active suppressions</div><div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div></div>';
        if (badge) badge.textContent = '0';
      }
      showToast('Suppression removed', 'success');
    } catch (err) {
      showToast(err.message || 'Failed to remove suppression', 'error');
    }
  }

  document.getElementById('s-type')?.addEventListener('change', onTypeChange);
  document.getElementById('create-suppression-form')?.addEventListener('submit', createSuppression);

  document.addEventListener('click', e => {
    const pill = e.target.closest('#create-suppression-form .pill[data-duration]');
    if (pill) {
      const val = pill.dataset.duration;
      setDur(val ? parseInt(val) : null, pill);
      return;
    }
    const removeBtn = e.target.closest('[data-action="remove-sup"]');
    if (removeBtn) removeSuppression(parseInt(removeBtn.dataset.supId));
  });
</script>
{% endblock %}