overlord/Overlord-Server/public/metrics.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Metrics - Overlord</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/assets/tailwind.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flag-icons@6.15.0/css/flag-icons.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/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 src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script src="/assets/toast.js"></script>
    <script 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 src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
    <script type="module" src="/assets/metrics.js"></script>
  </body>
</html>