297 lines
12 KiB
HTML
297 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="/assets/nav-prelude.js"></script>
|
|
<link rel="modulepreload" href="/assets/nav.js" />
|
|
<title>Metrics - Overlord</title>
|
|
<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="/vendor/fontawesome/css/all.min.css" />
|
|
<link rel="stylesheet" href="/vendor/flag-icons/css/flag-icons.min.css" />
|
|
<link rel="stylesheet" href="/vendor/leaflet/leaflet.css" />
|
|
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
|
|
<link rel="stylesheet" href="/assets/main.css" />
|
|
<link rel="stylesheet" href="/assets/custom.css" />
|
|
<style>
|
|
#top-nav {
|
|
position: relative;
|
|
z-index: 50;
|
|
}
|
|
#country-map,
|
|
.leaflet-container,
|
|
.leaflet-pane,
|
|
.leaflet-map-pane,
|
|
.leaflet-tile-pane,
|
|
.leaflet-overlay-pane,
|
|
.leaflet-shadow-pane,
|
|
.leaflet-marker-pane {
|
|
z-index: 0;
|
|
}
|
|
.leaflet-control {
|
|
z-index: 2;
|
|
}
|
|
</style>
|
|
<script defer src="/vendor/chart.js/chart.umd.js"></script>
|
|
<script defer src="/assets/toast.js"></script>
|
|
<script defer src="/assets/ripple.js"></script>
|
|
</head>
|
|
<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">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between gap-3 flex-wrap">
|
|
<div>
|
|
<h1 class="text-2xl font-semibold">Metrics Dashboard</h1>
|
|
<p class="text-slate-400">
|
|
Real-time server statistics and performance
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<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"
|
|
>
|
|
<i class="fa-solid fa-circle-check"></i>
|
|
<span id="status-text">Live</span>
|
|
</span>
|
|
<span class="text-sm text-slate-400"
|
|
>Updated: <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="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>
|
|
</div>
|
|
<div class="text-3xl font-bold" 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="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>
|
|
</div>
|
|
<div class="text-3xl font-bold" 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="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>
|
|
</div>
|
|
<div class="text-3xl font-bold" 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
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bandwidth -->
|
|
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
|
|
<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>
|
|
</div>
|
|
<div class="text-3xl font-bold" 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>
|
|
</div>
|
|
</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">
|
|
<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
|
|
</h3>
|
|
<div class="h-64">
|
|
<canvas id="clients-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Commands Timeline -->
|
|
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
|
|
<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
|
|
</h3>
|
|
<div class="h-64">
|
|
<canvas id="commands-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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">
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
|
|
<i class="fa-solid fa-server text-green-400"></i>
|
|
Server
|
|
</h3>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Uptime:</span>
|
|
<span id="server-uptime">0s</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Heap Used:</span>
|
|
<span id="server-memory">0 MB</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">RSS:</span>
|
|
<span id="server-rss">0 MB</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">System Memory:</span>
|
|
<span id="server-system-memory">0 MB</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">CPU Load:</span>
|
|
<span id="server-cpu-load">0.00 / 0.00 / 0.00</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Total Connections:</span>
|
|
<span id="total-connections">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ping Stats -->
|
|
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
|
|
<i class="fa-solid fa-signal text-blue-400"></i>
|
|
Ping Statistics
|
|
</h3>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Average:</span>
|
|
<span id="ping-avg">-</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Min / Max:</span>
|
|
<span
|
|
><span id="ping-min">-</span> /
|
|
<span id="ping-max">-</span></span
|
|
>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Samples:</span>
|
|
<span id="ping-count">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HTTP & Event Loop -->
|
|
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
|
|
<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 & Event Loop
|
|
</h3>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Requests/min:</span>
|
|
<span id="http-requests-minute">0</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Errors/min:</span>
|
|
<span id="http-errors-minute">0</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Latency avg/p95:</span>
|
|
<span>
|
|
<span id="http-latency-avg">0</span> /
|
|
<span id="http-latency-p95">0</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Loop lag avg/p95:</span>
|
|
<span>
|
|
<span id="event-loop-avg">0</span> /
|
|
<span id="event-loop-p95">0</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Loop lag max:</span>
|
|
<span id="event-loop-max">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Client Distribution -->
|
|
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
|
|
<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
|
|
</h3>
|
|
<div id="clients-by-os" class="space-y-2 text-sm">
|
|
<div class="text-slate-500">No data</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Country Map -->
|
|
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
|
|
<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>
|
|
Client Geography Map
|
|
</h3>
|
|
<div class="text-xs text-slate-500">Darker = more clients</div>
|
|
</div>
|
|
<div class="rounded-lg border border-slate-800 overflow-hidden">
|
|
<div id="country-map" class="h-96 bg-slate-950"></div>
|
|
</div>
|
|
<div class="text-xs text-slate-500 mt-2">
|
|
Data is based on IP geo lookup and client-reported country.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Command Types Breakdown -->
|
|
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
|
|
<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
|
|
</h3>
|
|
<div
|
|
id="command-types"
|
|
class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3"
|
|
>
|
|
<div class="text-slate-500 col-span-full text-center py-4">
|
|
No commands executed yet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script type="module" src="/assets/nav.js"></script>
|
|
<script defer src="/vendor/leaflet/leaflet.js"></script>
|
|
<script type="module" src="/assets/metrics.js"></script>
|
|
</body>
|
|
</html>
|