FabledSteward/steward/templates/dashboard/index.html

{% extends "base.html" %}
{% block title %}{{ dashboard.name }} — Steward{% endblock %}
{% block head %}
{# Gridstack renders the grid for everyone (static for viewers); editors also get
   the in-place drag-resize + bottom drawer. #}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@12.6.0/dist/gridstack.min.css">
{% endblock %}
{% block content %}

{# ── Header ────────────────────────────────────────────────────────────────── #}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap;">
  <div style="display:flex;align-items:center;gap:0.75rem;">
    <h1 class="page-title" style="margin-bottom:0;">{{ dashboard.name }}</h1>
    {% if dashboard.is_default %}
    <span class="badge badge-gold" style="font-size:0.7rem;">Default</span>
    {% endif %}
  </div>
  <div style="display:flex;align-items:center;gap:0.75rem;">
    {# Dashboard switcher — shown when more than one dashboard exists #}
    {% if all_dashboards | length > 1 %}
    <select onchange="window.location='/d/'+this.value"
            style="font-size:0.82rem;padding:0.3rem 0.6rem;background:var(--bg-card);border:1px solid var(--border-mid);border-radius:5px;color:var(--text);cursor:pointer;">
      {% for d in all_dashboards %}
      <option value="{{ d.id }}" {% if d.id == dashboard.id %}selected{% endif %}>{{ d.name }}</option>
      {% endfor %}
    </select>
    {% endif %}
    {% if can_edit %}
    <button type="button" id="dash-edit-toggle" class="btn btn-ghost btn-sm">Edit</button>
    <a href="/d/{{ dashboard.id }}/share" class="btn btn-ghost btn-sm">Share</a>
    {% endif %}
    <a href="/dashboards/" class="btn btn-ghost btn-sm">Dashboards</a>
  </div>
</div>

{# ── Summary strip ─────────────────────────────────────────────────────────── #}
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.75rem;margin-bottom:1.5rem;">
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.5rem;">Hosts</div>
    <span class="stat-val">{{ total_hosts }}</span>
    <span class="stat-label">total</span>
    <div style="margin-top:0.5rem;"><a href="/hosts/" style="font-size:0.8rem;">Manage →</a></div>
  </div>
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.5rem;">Ping</div>
    {% if ping_up + ping_down == 0 %}
      <span style="color:var(--text-muted);font-size:0.85rem;">No hosts</span>
    {% else %}
      <span class="stat-val" style="color:var(--green);">{{ ping_up }}</span><span class="stat-label">up</span>
      {% if ping_down %}&nbsp;<span class="stat-val" style="color:var(--red);">{{ ping_down }}</span><span class="stat-label">down</span>{% endif %}
    {% endif %}
  </div>
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.5rem;">DNS</div>
    {% if dns_ok + dns_fail == 0 %}
      <span style="color:var(--text-muted);font-size:0.85rem;">No hosts</span>
    {% else %}
      <span class="stat-val" style="color:var(--green);">{{ dns_ok }}</span><span class="stat-label">ok</span>
      {% if dns_fail %}&nbsp;<span class="stat-val" style="color:var(--red);">{{ dns_fail }}</span><span class="stat-label">failed</span>{% endif %}
    {% endif %}
  </div>
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.5rem;">Alerts</div>
    <a href="/alerts/" style="font-size:0.85rem;">View rules →</a>
  </div>
</div>

{# ── Widget grid (Gridstack; static until Edit is toggled) ──────────────────── #}
{% if not widgets %}
<div id="dash-empty" class="card" style="text-align:center;padding:3rem;">
  <div style="font-size:1.1rem;color:var(--text-muted);margin-bottom:1rem;">No widgets on this dashboard yet.</div>
  {% if can_edit %}
  <button type="button" class="btn" onclick="document.getElementById('dash-edit-toggle').click()">Add Widgets</button>
  {% endif %}
</div>
{% endif %}
<div class="grid-stack" data-dash-id="{{ dashboard.id }}" data-can-edit="{{ '1' if can_edit else '0' }}">
  {% for item in widgets %}
  {% include "dashboard/_grid_item.html" %}
  {% endfor %}
</div>

{% if can_edit %}{% include "dashboard/_widget_drawer.html" %}{% endif %}
{% endblock %}

{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/gridstack@12.6.0/dist/gridstack-all.min.js"></script>
<script>
(function () {
  var gridEl = document.querySelector('.grid-stack');
  if (!gridEl || typeof GridStack === 'undefined') return;
  var dashId = gridEl.dataset.dashId;
  var canEdit = gridEl.dataset.canEdit === '1';
  var editing = false;

  var grid = GridStack.init({
    column: 12, cellHeight: 70, margin: 8, float: false,
    staticGrid: true,                          // view mode: positioned but inert
    handle: '.panel-drag',
    resizable: { handles: 'e, se, s' },
    columnOpts: { breakpointForWindow: true, breakpoints: [{ w: 700, c: 1 }] },
  }, gridEl);

  if (!canEdit) return;                         // viewers get the static grid only

  function saveLayout() {
    var items = grid.save(false).map(function (n) {
      return { id: parseInt(n.id, 10), x: n.x, y: n.y, w: n.w, h: n.h };
    });
    fetch('/d/' + dashId + '/edit/layout', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items: items }),
    });
  }
  grid.on('change', function () { if (editing) saveLayout(); });

  function setEditing(on) {
    editing = on;
    grid.setStatic(!on);
    document.body.classList.toggle('dash-editing', on);
    var btn = document.getElementById('dash-edit-toggle');
    if (btn) btn.textContent = on ? 'Done' : 'Edit';
  }
  var toggle = document.getElementById('dash-edit-toggle');
  if (toggle) toggle.addEventListener('click', function () { setEditing(!editing); });
  var done = document.getElementById('dash-edit-done');
  if (done) done.addEventListener('click', function () { setEditing(false); });

  // Add widget — POST the form, insert the returned grid item in place.
  document.querySelectorAll('.add-widget-form').forEach(function (form) {
    form.addEventListener('submit', function (ev) {
      ev.preventDefault();
      fetch(form.action, { method: 'POST', body: new FormData(form) })
        .then(function (r) { return r.status === 204 ? '' : r.text(); })
        .then(function (html) {
          if (!html) return;
          var tmp = document.createElement('div');
          tmp.innerHTML = html.trim();
          var el = tmp.firstElementChild;
          if (!el) return;
          gridEl.appendChild(el);
          grid.makeWidget(el);
          if (window.htmx) window.htmx.process(el);   // load its live data
          var empty = document.getElementById('dash-empty');
          if (empty) empty.style.display = 'none';
          var det = form.closest('details');
          if (det) det.open = false;
        });
    });
  });

  // Remove widget — delegated; POST then drop the grid item.
  gridEl.addEventListener('click', function (ev) {
    var rm = ev.target.closest('[data-remove]');
    if (!rm) return;
    ev.preventDefault();
    var item = rm.closest('.grid-stack-item');
    fetch('/d/' + dashId + '/edit/remove/' + rm.dataset.remove, { method: 'POST' })
      .then(function () { if (item) grid.removeWidget(item); });
  });

  // Deep link: /d/<id>?edit=1 opens straight into edit mode (new dashboards do this).
  if (new URLSearchParams(window.location.search).get('edit') === '1') setEditing(true);
})();
</script>
{% endblock %}