gandalf/templates/suppressions.html

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

{% block content %}

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

        <div class="form-row form-row-align">
          <div class="lt-form-group">
            <label class="lt-label">Duration</label>
            <div class="duration-pills">
              <button type="button" class="pill" data-duration="30">30 min</button>
              <button type="button" class="pill" data-duration="60">1 hr</button>
              <button type="button" class="pill" data-duration="240">4 hr</button>
              <button type="button" class="pill" data-duration="480">8 hr</button>
              <button type="button" class="pill pill-manual active" data-duration="">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-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 }}">Remove</button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <p class="empty-state" id="no-active-msg">No active suppressions.</p>
  {% 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-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>
  {% else %}
  <p class="empty-state">No suppression history yet.</p>
  {% 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="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>
</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';
    document.getElementById('s-name').required = (t!=='all');
  }

  function setDur(mins, el) {
    document.getElementById('s-expires').value = mins || '';
    document.querySelectorAll('.duration-pills .pill').forEach(p => p.classList.remove('active'));
    if (el) el.classList.add('active');
    const hint = document.getElementById('s-dur-hint');
    if (mins) {
      const h = Math.floor(mins/60), m = mins%60;
      hint.textContent = `Expires in ${h?h+'h ':''}${m?m+'m':''}`.trim()+'.';
    } else {
      hint.textContent = 'Persists until manually removed.';
    }
  }

  function renderActiveRows(rows) {
    const wrap = document.getElementById('active-sup-wrap');
    const badge = document.getElementById('active-sup-badge');
    if (!rows || !rows.length) {
      wrap.innerHTML = '<p class="empty-state" id="no-active-msg">No active suppressions.</p>';
      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}">Remove</button></td>
      </tr>`).join('');
    wrap.innerHTML = `
      <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>`;
  }

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

  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();
      document.querySelectorAll('.duration-pills .pill').forEach(p => p.classList.remove('active'));
      document.querySelector('.duration-pills .pill-manual')?.classList.add('active');
      document.getElementById('s-dur-hint').textContent = 'Persists until manually removed.';
      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 =
          '<p class="empty-state" id="no-active-msg">No active suppressions.</p>';
        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 %}