89 lines
4.6 KiB
HTML
89 lines
4.6 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ dashboard.name }} — Fabled Scryer{% 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 style="column-width:380px;column-count:3;column-gap:1rem;">
|
|
{% for item in widgets %}
|
|
<div class="card ping-card" style="break-inside:avoid;margin-bottom:1rem;">
|
|
<div class="widget-header">
|
|
<span class="widget-title">{{ item.title }}</span>
|
|
<a href="{{ item.defn.detail_url }}" class="widget-link">Details →</a>
|
|
</div>
|
|
<div id="widget-{{ item.db.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 %}
|