bvandeusen
165a202ba4
- Replace base.html style block with full CSS design system using custom properties (dark theme, cards, tables, badges, dots, widgets) - Add DNS blueprint (fablednetmon/dns/) with /dns/ and /dns/rows routes + templates - Add Traefik /widget route and widget.html fragment for dashboard - Update dashboard: DNS + Traefik widgets, traefik_enabled config detection - Update all templates to use new CSS classes (page-title, section-title, card-flush, table, badge-*, dot-*, btn-*) - Register dns_bp in app.py Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
84 lines
3.6 KiB
HTML
84 lines
3.6 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Dashboard — FabledNetMon{% endblock %}
|
|
{% block content %}
|
|
<h1 class="page-title">Dashboard</h1>
|
|
|
|
{# ── 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 ─────────────────────────────────────────────────────────── #}
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:1rem;">
|
|
|
|
{# Ping widget #}
|
|
<div class="card ping-card" style="margin-bottom:0;">
|
|
<div class="widget-header">
|
|
<span class="widget-title">Ping — last 30 probes</span>
|
|
<a href="/ping/" class="widget-link">Details & settings →</a>
|
|
</div>
|
|
<div id="ping-widget"
|
|
hx-get="/ping/rows"
|
|
hx-trigger="load, every {{ poll_interval }}s"
|
|
hx-swap="innerHTML">
|
|
</div>
|
|
</div>
|
|
|
|
{# DNS widget #}
|
|
<div class="card ping-card" style="margin-bottom:0;">
|
|
<div class="widget-header">
|
|
<span class="widget-title">DNS</span>
|
|
<a href="/dns/" class="widget-link">Details →</a>
|
|
</div>
|
|
<div id="dns-widget"
|
|
hx-get="/dns/rows"
|
|
hx-trigger="load, every {{ poll_interval }}s"
|
|
hx-swap="innerHTML">
|
|
</div>
|
|
</div>
|
|
|
|
{# Traefik widget — only if plugin enabled #}
|
|
{% if traefik_enabled %}
|
|
<div class="card ping-card" style="margin-bottom:0;">
|
|
<div class="widget-header">
|
|
<span class="widget-title">Traefik</span>
|
|
<a href="/plugins/traefik/" class="widget-link">Details →</a>
|
|
</div>
|
|
<div id="traefik-widget"
|
|
hx-get="/plugins/traefik/widget"
|
|
hx-trigger="load, every {{ poll_interval }}s"
|
|
hx-swap="innerHTML">
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
{% endblock %}
|