bvandeusen
525f6eedbd
Milestone 72 phase B — Grafana-style drag-resize grid for dashboard widgets: - DashboardWidget: replace `position` with a 12-col grid placement (grid_x/grid_y/grid_w/grid_h). Migration 0021 backfills the old position order into a 3-up grid (4 cols x 4 cells each) and drops position. - View + share render a static CSS grid from x/y/w/h: fixed cell height (h * 70px) with the body scrolling, so the arranged layout is what's shown; collapses to a single column under 820px. - Edit view: Gridstack.js 12.6.0 (vanilla, CDN, pinned) — drag the title bar to move, drag a corner/edge to resize; every change autosaves to a new /d/<id>/edit/layout endpoint. Replaces the SortableJS position reorder. - add_widget appends at the bottom-left; remove no longer renumbers. _get_widgets now orders by grid position (drives DOM + mobile fallback order). Note: Gridstack drag-resize is browser-only, so CI can't exercise it — needs an operator visual check of the edit experience. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
91 lines
4.7 KiB
HTML
91 lines
4.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ dashboard.name }} — Steward{% 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 %}
|
|
<a href="/d/{{ dashboard.id }}/edit" class="btn btn-ghost btn-sm">Edit</a>
|
|
<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 %} <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 %} <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 ───────────────────────────────────────────────────────────── #}
|
|
{% if widgets %}
|
|
<div class="dash-grid">
|
|
{% for item in widgets %}
|
|
{% set gw = item.db %}
|
|
<div class="card dash-cell"
|
|
style="grid-column:{{ gw.grid_x + 1 }} / span {{ gw.grid_w }};grid-row:{{ gw.grid_y + 1 }} / span {{ gw.grid_h }};">
|
|
<div class="widget-header">
|
|
<span class="widget-title" title="{{ item.title }}">{{ item.title }}</span>
|
|
<a href="{{ item.defn.detail_url }}" class="widget-link">Details →</a>
|
|
</div>
|
|
<div class="dash-cell-body" id="widget-{{ gw.id }}"
|
|
hx-get="{{ item.hx_url }}"
|
|
hx-trigger="load{% if item.defn.poll %}, every {{ poll_interval }}s{% endif %}"
|
|
hx-swap="innerHTML">
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div 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 %}
|
|
<a href="/d/{{ dashboard.id }}/edit" class="btn">Add Widgets</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|