better dashboard

This commit is contained in:
KingKDot
2026-05-31 15:53:50 -05:00
parent b31901e62a
commit a8b8b6369a
4 changed files with 465 additions and 51 deletions
+28 -25
View File
@@ -25,32 +25,25 @@
<header id="top-nav"></header>
<main class="px-5 py-6">
<div id="clients-shell" class="w-full flex flex-col gap-5">
<div class="flex items-center justify-between gap-3 flex-wrap">
<div>
<h1 class="text-2xl font-semibold">Clients</h1>
<p class="text-slate-400">KDOT wants YOU to have a good day!</p>
<p id="server-version-text" class="text-xs text-slate-500 mt-1">
Server version: loading...
</p>
</div>
<span
class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800/70 text-slate-300 border border-slate-600/60"
id="total-pill"
>0 online</span
>
</div>
<span id="total-pill" class="hidden">0 online</span>
<section id="dashboard-stats" class="dashboard-stats-shell" aria-label="Dashboard status">
<div class="dashboard-stats-bar">
<div class="dashboard-stats-title">
<i class="fa-solid fa-chart-simple"></i>
<span>Status overview</span>
<span id="server-version-text" class="dashboard-version-text">Server version: loading...</span>
</div>
<div class="dashboard-stats-controls" aria-label="Status overview controls">
<button id="dashboard-stats-reset" class="dashboard-stats-toggle" type="button" title="Reset status overview">
<i class="fa-solid fa-arrow-rotate-left"></i>
</button>
<button id="dashboard-stats-toggle" class="dashboard-stats-toggle" type="button" aria-expanded="true" title="Hide status overview">
<i class="fa-solid fa-eye-slash"></i>
</button>
</div>
<button id="dashboard-stats-toggle" class="dashboard-stats-toggle" type="button" aria-expanded="true" title="Hide status overview">
<i class="fa-solid fa-eye-slash"></i>
</button>
</div>
<div id="dashboard-stats-content" class="dashboard-stats-content">
<div class="dashboard-stat-card dashboard-stat-card--online">
<div class="dashboard-stat-card dashboard-stat-card--online" data-dashboard-card="online" draggable="true">
<div class="dashboard-stat-topline">
<span class="dashboard-live-dot is-live"></span>
<span>Online</span>
@@ -61,7 +54,7 @@
<span id="dash-online-ratio">0%</span>
</div>
</div>
<div class="dashboard-stat-card dashboard-stat-card--sessions">
<div class="dashboard-stat-card dashboard-stat-card--sessions" data-dashboard-card="sessions" draggable="true">
<div class="dashboard-stat-topline">
<i class="fa-solid fa-wave-square"></i>
<span>Sessions</span>
@@ -72,7 +65,7 @@
<span id="dash-http-errors">0 errors</span>
</div>
</div>
<div class="dashboard-chart-card">
<div class="dashboard-chart-card" data-dashboard-card="trend" draggable="true">
<div class="dashboard-chart-head">
<div>
<span class="dashboard-chart-kicker">Past Week</span>
@@ -84,7 +77,7 @@
<canvas id="dash-online-chart"></canvas>
</div>
</div>
<div class="dashboard-chart-card">
<div class="dashboard-chart-card" data-dashboard-card="fleet" draggable="true">
<div class="dashboard-chart-head">
<div>
<span class="dashboard-chart-kicker">Fleet Mix</span>
@@ -96,7 +89,7 @@
<canvas id="dash-os-chart"></canvas>
</div>
</div>
<div class="dashboard-health-card">
<div class="dashboard-health-card" data-dashboard-card="pulse" draggable="true">
<div class="dashboard-chart-head">
<div>
<span class="dashboard-chart-kicker">Status</span>
@@ -105,17 +98,17 @@
<span id="dash-last-refresh" class="dashboard-chart-pill">Waiting</span>
</div>
<div class="dashboard-health-list">
<div class="dashboard-health-row">
<div class="dashboard-health-row" data-pulse-row="api" draggable="true">
<span class="dashboard-live-dot is-live"></span>
<span>API</span>
<strong id="dash-api-status">Live</strong>
</div>
<div class="dashboard-health-row">
<div class="dashboard-health-row" data-pulse-row="memory" draggable="true">
<span id="dash-memory-dot" class="dashboard-live-dot is-live"></span>
<span>Memory</span>
<strong id="dash-memory-status">0%</strong>
</div>
<div class="dashboard-health-row">
<div class="dashboard-health-row" data-pulse-row="ping" draggable="true">
<span id="dash-ping-dot" class="dashboard-live-dot is-muted"></span>
<span>Ping Avg</span>
<strong id="dash-ping-status">-</strong>
@@ -123,6 +116,16 @@
</div>
</div>
</div>
<div
id="dashboard-stats-resizer"
class="dashboard-stats-resizer"
role="separator"
aria-orientation="horizontal"
tabindex="0"
title="Drag to resize status overview"
>
<span></span>
</div>
</section>
<div class="dashboard-toolbar">
<label