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

2026-03-18 23:18:26 -04:00
parent 791af2d58f
commit 7a7ed2185a
8 changed files with 270 additions and 51 deletions
@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% block title %}Ping Monitor — FabledNetMon{% endblock %}
+{% block content %}
+<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
+  <h1 style="color:#c0c0ff;">Ping Monitor</h1>
+  <span style="color:#505070;font-size:0.85rem;">polling every {{ poll_interval }}s</span>
+</div>
+
+{# ── Threshold settings ─────────────────────────────────────────────────── #}
+<div class="card" style="margin-bottom:1.25rem;">
+  <h2 style="color:#8080ff;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:1rem;">Latency Thresholds</h2>
+  <form method="post" action="/ping/settings"
+        style="display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;">
+    <div class="form-group" style="margin:0;">
+      <label style="font-size:0.8rem;">
+        <span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#1a6632;vertical-align:middle;margin-right:4px;"></span>
+        Good below (ms)
+      </label>
+      <input type="number" name="good_ms" value="{{ good_ms }}" min="1" max="9999"
+             style="width:100px;padding:0.4rem 0.6rem;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;">
+    </div>
+    <div class="form-group" style="margin:0;">
+      <label style="font-size:0.8rem;">
+        <span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#6b5c00;vertical-align:middle;margin-right:4px;"></span>
+        Warn above (ms)
+      </label>
+      <input type="number" name="warn_ms" value="{{ warn_ms }}" min="1" max="9999"
+             style="width:100px;padding:0.4rem 0.6rem;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;">
+    </div>
+    <button type="submit" class="btn" style="padding:0.4rem 1rem;">Save</button>
+    <span style="color:#505070;font-size:0.8rem;align-self:center;">
+      Above warn = <span style="color:#c06020;">■</span> orange&nbsp;&nbsp;|&nbsp;&nbsp;No response = <span style="color:#c03030;">■</span> red
+    </span>
+  </form>
+</div>
+
+{# ── Live host rows ─────────────────────────────────────────────────────── #}
+<div class="card ping-card">
+  <div id="ping-rows"
+       hx-get="/ping/rows"
+       hx-trigger="every {{ poll_interval }}s"
+       hx-swap="innerHTML">
+    {% include "ping/rows.html" %}
+  </div>
+</div>
+{% endblock %}