bvandeusen/FabledSteward
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: live ping pill widget (dashboard + /ping/ page with threshold settings)

Browse Source
This commit is contained in:
Bryan Van Deusen
2026-03-18 23:18:26 -04:00
parent 791af2d58f
commit 7a7ed2185a
8 changed files with 270 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fablednetmon/templates/dashboard/index.html
+46 -51
View File
@@ -2,60 +2,55 @@
{% block title %}Dashboard — FabledNetMon{% endblock %}
{% block content %}
<h1 style="margin-bottom:1.5rem;color:#c0c0ff;">Dashboard</h1>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;">
<div class="card">
<h3 style="color:#8080ff;margin-bottom:0.75rem;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.05em;">Ping</h3>
{% if ping_up + ping_down == 0 %}
<p style="color:#606080;font-size:0.9rem;"><a href="/hosts/" style="color:#a0a0ff;">Add hosts</a> to begin monitoring.</p>
{% else %}
<div style="display:flex;gap:1.5rem;align-items:baseline;">
<div>
<span style="font-size:2rem;font-weight:bold;color:#40c040;">{{ ping_up }}</span>
<span style="color:#606080;font-size:0.85rem;margin-left:0.25rem;">up</span>
</div>
{% if ping_down > 0 %}
<div>
<span style="font-size:2rem;font-weight:bold;color:#c04040;">{{ ping_down }}</span>
<span style="color:#606080;font-size:0.85rem;margin-left:0.25rem;">down</span>
</div>
{% endif %}
</div>
<p style="color:#404060;font-size:0.8rem;margin-top:0.5rem;">every {{ poll_interval }}s — <a href="/hosts/" style="color:#6060a0;">view all</a></p>
{% endif %}
{# ── Summary row ──────────────────────────────────────────────────────────── #}
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem;">
<div class="card">
<h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">Hosts</h3>
<span style="font-size:1.8rem;font-weight:bold;color:#c0c0e0;">{{ total_hosts }}</span>
<span style="color:#505070;font-size:0.8rem;margin-left:0.3rem;">configured</span>
<p style="margin-top:0.4rem;"><a href="/hosts/" style="color:#6060a0;font-size:0.8rem;">Manage →</a></p>
</div>
<div class="card">
<h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">Ping</h3>
{% if ping_up + ping_down == 0 %}
<p style="color:#505070;font-size:0.85rem;"><a href="/hosts/" style="color:#a0a0ff;">Enable ping</a> on a host.</p>
{% else %}
<div style="display:flex;gap:1rem;align-items:baseline;">
<div><span style="font-size:1.8rem;font-weight:bold;color:#40c040;">{{ ping_up }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">up</span></div>
{% if ping_down %}<div><span style="font-size:1.8rem;font-weight:bold;color:#c04040;">{{ ping_down }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">down</span></div>{% endif %}
</div>
<div class="card">
<h3 style="color:#8080ff;margin-bottom:0.75rem;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.05em;">DNS</h3>
{% if dns_ok + dns_fail == 0 %}
<p style="color:#606080;font-size:0.9rem;">Enable DNS monitoring on a <a href="/hosts/" style="color:#a0a0ff;">host</a>.</p>
{% else %}
<div style="display:flex;gap:1.5rem;align-items:baseline;">
<div>
<span style="font-size:2rem;font-weight:bold;color:#40c040;">{{ dns_ok }}</span>
<span style="color:#606080;font-size:0.85rem;margin-left:0.25rem;">ok</span>
</div>
{% if dns_fail > 0 %}
<div>
<span style="font-size:2rem;font-weight:bold;color:#c04040;">{{ dns_fail }}</span>
<span style="color:#606080;font-size:0.85rem;margin-left:0.25rem;">failed</span>
</div>
{% endif %}
</div>
{% endif %}
</div>
<div class="card">
<h3 style="color:#8080ff;margin-bottom:0.75rem;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.05em;">Hosts</h3>
<span style="font-size:2rem;font-weight:bold;color:#c0c0e0;">{{ total_hosts }}</span>
<span style="color:#606080;font-size:0.85rem;margin-left:0.25rem;">configured</span>
<p style="margin-top:0.5rem;"><a href="/hosts/" style="color:#6060a0;font-size:0.85rem;">Manage →</a></p>
</div>
<div class="card">
<h3 style="color:#8080ff;margin-bottom:0.75rem;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.05em;">Alerts</h3>
<p style="color:#606080;font-size:0.9rem;"><a href="/alerts/" style="color:#a0a0ff;">Configure alert rules</a> against any metric.</p>
{% endif %}
</div>
<div class="card">
<h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">DNS</h3>
{% if dns_ok + dns_fail == 0 %}
<p style="color:#505070;font-size:0.85rem;"><a href="/hosts/" style="color:#a0a0ff;">Enable DNS</a> on a host.</p>
{% else %}
<div style="display:flex;gap:1rem;align-items:baseline;">
<div><span style="font-size:1.8rem;font-weight:bold;color:#40c040;">{{ dns_ok }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">ok</span></div>
{% if dns_fail %}<div><span style="font-size:1.8rem;font-weight:bold;color:#c04040;">{{ dns_fail }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">failed</span></div>{% endif %}
</div>
{% endif %}
</div>
<div class="card">
<h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">Alerts</h3>
<p style="color:#505070;font-size:0.85rem;"><a href="/alerts/" style="color:#a0a0ff;">Configure rules →</a></p>
</div>
</div>
{# ── Live ping widget ─────────────────────────────────────────────────────── #}
<div class="card ping-card">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;">
<h2 style="color:#8080ff;font-size:0.9rem;text-transform:uppercase;letter-spacing:.05em;">
Ping — last 30 probes
</h2>
<a href="/ping/" style="color:#6060a0;font-size:0.8rem;">Details &amp; settings →</a>
</div>
<div id="ping-widget"
hx-get="/ping/rows"
hx-trigger="load, every {{ poll_interval }}s"
hx-swap="innerHTML">
</div>
</div>
{% endblock %}