vxaboveground/overlord
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improve file browser and metrics UI.

Browse Source
This commit is contained in:
KingKDot
2026-07-14 00:25:36 -05:00
parent a9bf923e7a
commit 172703c33b
4 changed files with 130 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Overlord-Server/public/metrics.html
+54 -49
View File
@@ -9,7 +9,7 @@
<link rel="stylesheet" href="/vendor/inter/400.css" />
<link rel="stylesheet" href="/vendor/inter/600.css" />
<link rel="stylesheet" href="/vendor/inter/700.css" />
<link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="/vendor/flag-icons/css/flag-icons.min.css" />
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
@@ -82,62 +82,59 @@
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
<main class="px-5 py-6">
<div class="max-w-7xl mx-auto flex flex-col gap-6">
<main class="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex flex-col gap-6">
<!-- Header -->
<div class="flex items-center justify-between gap-3 flex-wrap">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
<div>
<h1 class="text-2xl font-semibold">Metrics Dashboard</h1>
<p class="text-slate-400">
Real-time server statistics and performance
</p>
<h1 class="text-2xl font-bold">Metrics Dashboard</h1>
<p class="text-sm text-slate-400 mt-1">Live infrastructure health, traffic, and runtime performance.</p>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 text-xs">
<span
class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-green-900/40 text-green-100 border border-green-700/60"
id="metrics-status"
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 text-emerald-300 border border-emerald-500/30 font-medium"
>
<i class="fa-solid fa-circle-check"></i>
<span class="relative flex h-2 w-2"><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60"></span><span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-400"></span></span>
<span id="status-text">Live</span>
</span>
<span class="text-sm text-slate-400"
>Updated: <span id="last-update">Never</span></span
>
<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-slate-800 bg-slate-900/60 text-slate-400"><i class="fa-solid fa-clock-rotate-left text-slate-500"></i><span id="last-update">Never</span></span>
</div>
</div>
<!-- Key Metrics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Clients Online -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
<div class="flex items-center justify-between mb-2">
<span class="text-slate-400 text-sm">Clients Online</span>
<i class="fa-solid fa-desktop text-blue-400"></i>
<span class="text-slate-400 text-sm font-medium">Clients Online</span>
<span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-sky-500/10 border border-sky-500/20"><i class="fa-solid fa-desktop text-sky-400"></i></span>
</div>
<div class="text-3xl font-bold" id="clients-online">0</div>
<div class="text-3xl font-bold tracking-tight" id="clients-online">0</div>
<div class="text-xs text-slate-500 mt-1">
<span id="clients-total">0</span> total
</div>
</div>
<!-- Active Sessions -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
<div class="flex items-center justify-between mb-2">
<span class="text-slate-400 text-sm">Active Sessions</span>
<i class="fa-solid fa-plug text-green-400"></i>
<span class="text-slate-400 text-sm font-medium">Active Sessions</span>
<span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-500/10 border border-emerald-500/20"><i class="fa-solid fa-plug text-emerald-400"></i></span>
</div>
<div class="text-3xl font-bold" id="active-sessions">0</div>
<div class="text-3xl font-bold tracking-tight" id="active-sessions">0</div>
<div class="text-xs text-slate-500 mt-1">
Console, RD, Files, Processes
</div>
</div>
<!-- Commands (Last Hour) -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
<div class="flex items-center justify-between mb-2">
<span class="text-slate-400 text-sm">Commands/Hour</span>
<i class="fa-solid fa-terminal text-purple-400"></i>
<span class="text-slate-400 text-sm font-medium">Commands/Hour</span>
<span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-violet-500/10 border border-violet-500/20"><i class="fa-solid fa-terminal text-violet-400"></i></span>
</div>
<div class="text-3xl font-bold" id="commands-hour">0</div>
<div class="text-3xl font-bold tracking-tight" id="commands-hour">0</div>
<div class="text-xs text-slate-500 mt-1">
<span id="commands-minute">0</span>/min •
<span id="commands-total">0</span> total
@@ -145,14 +142,12 @@
</div>
<!-- Bandwidth -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
<div class="flex items-center justify-between mb-2">
<span class="text-slate-400 text-sm">Bandwidth</span>
<i
class="fa-solid fa-arrow-up-right-from-square text-orange-400"
></i>
<span class="text-slate-400 text-sm font-medium">Bandwidth</span>
<span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-orange-500/10 border border-orange-500/20"><i class="fa-solid fa-arrow-right-arrow-left text-orange-400"></i></span>
</div>
<div class="text-3xl font-bold" id="bandwidth-rate">0 KB/s</div>
<div class="text-3xl font-bold tracking-tight" id="bandwidth-rate">0 KB/s</div>
<div class="text-xs text-slate-500 mt-1">
↑ <span id="bandwidth-sent">0 MB</span> • ↓
<span id="bandwidth-received">0 MB</span>
@@ -160,10 +155,15 @@
</div>
</div>
<div class="flex items-center gap-3 pt-1">
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-500/10 border border-indigo-500/20"><i class="fa-solid fa-chart-line text-indigo-400"></i></div>
<div><h2 class="font-semibold">Traffic and activity</h2><p class="text-xs text-slate-500">Live client and command volume.</p></div>
</div>
<!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<!-- Clients Timeline -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-chart-area text-blue-400"></i>
Clients Over Time
@@ -174,7 +174,7 @@
</div>
<!-- Commands Timeline -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-chart-line text-purple-400"></i>
Commands Per Minute
@@ -185,9 +185,14 @@
</div>
</div>
<div class="flex items-center gap-3 pt-2">
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-500/10 border border-rose-500/20"><i class="fa-solid fa-gauge-high text-rose-400"></i></div>
<div><h2 class="font-semibold">Operational pressure</h2><p class="text-xs text-slate-500">Throughput, latency, memory, and event-loop health.</p></div>
</div>
<!-- Operational Pressure Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-network-wired text-orange-400"></i>
Network Throughput
@@ -197,7 +202,7 @@
</div>
</div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-arrow-right-arrow-left text-emerald-400"></i>
HTTP Requests
@@ -207,7 +212,7 @@
</div>
</div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-gauge-high text-rose-400"></i>
HTTP Latency
@@ -217,7 +222,7 @@
</div>
</div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-memory text-cyan-400"></i>
Runtime Memory
@@ -227,7 +232,7 @@
</div>
</div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-stopwatch text-amber-400"></i>
Event Loop Lag
@@ -239,7 +244,7 @@
</div>
<!-- Slow HTTP Routes -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<div class="flex items-center justify-between gap-3 flex-wrap mb-3">
<h3 class="text-lg font-semibold flex items-center gap-2">
<i class="fa-solid fa-route text-rose-400"></i>
@@ -258,7 +263,7 @@
</div>
<!-- Slow Internal Jobs -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<div class="flex items-center justify-between gap-3 flex-wrap mb-3">
<h3 class="text-lg font-semibold flex items-center gap-2">
<i class="fa-solid fa-gears text-cyan-400"></i>
@@ -277,7 +282,7 @@
</div>
<!-- Retained Runtime State -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<div class="flex items-center justify-between gap-3 flex-wrap mb-3">
<h3 class="text-lg font-semibold flex items-center gap-2">
<i class="fa-solid fa-box-archive text-violet-400"></i>
@@ -297,7 +302,7 @@
<!-- Mix Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-plug text-emerald-400"></i>
Session Mix
@@ -307,7 +312,7 @@
</div>
</div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-brands fa-windows text-cyan-400"></i>
Operating Systems
@@ -321,7 +326,7 @@
<!-- Additional Stats -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Server Stats -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
<i class="fa-solid fa-server text-green-400"></i>
Server
@@ -355,7 +360,7 @@
</div>
<!-- Clients by OS -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
<i class="fa-brands fa-windows text-cyan-400"></i>
Clients by OS
@@ -366,7 +371,7 @@
</div>
<!-- HTTP, Ping & Event Loop -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
<i class="fa-solid fa-wave-square text-amber-400"></i>
HTTP, Ping & Event Loop
@@ -419,7 +424,7 @@
</div>
<!-- Country Globe -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<div class="flex items-center justify-between gap-3 flex-wrap mb-3">
<h3 class="text-lg font-semibold flex items-center gap-2">
<i class="fa-solid fa-globe text-emerald-400"></i>
@@ -461,7 +466,7 @@
</div>
<!-- Command Types Breakdown -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
<i class="fa-solid fa-list text-indigo-400"></i>
Command Types