feat: Add performance metrics dashboard and metrics calculator

2026-06-01 12:06:04 +02:00
parent 93f4f62d42
commit 0c232b7aee
10 changed files with 623 additions and 22 deletions
@@ -0,0 +1,127 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{ title }}</title>
+    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+    <style>
+      body {
+        margin: 0;
+        font-family: Arial, sans-serif;
+        background: #0b1220;
+        color: #e5eefb;
+      }
+      .shell {
+        max-width: 1120px;
+        margin: 0 auto;
+        padding: 32px 20px 48px;
+      }
+      .hero {
+        display: flex;
+        justify-content: space-between;
+        gap: 24px;
+        align-items: end;
+        margin-bottom: 24px;
+      }
+      .title {
+        font-size: 2rem;
+        margin: 0 0 8px;
+      }
+      .subtitle {
+        margin: 0;
+        color: #9fb2d0;
+      }
+      .panel {
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 16px;
+        padding: 20px;
+      }
+      .grid {
+        display: grid;
+        gap: 16px;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      }
+      .card {
+        background: rgba(255, 255, 255, 0.04);
+        border-radius: 14px;
+        padding: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+      }
+      .label {
+        color: #9fb2d0;
+        font-size: 0.85rem;
+        margin-bottom: 8px;
+      }
+      .value {
+        font-size: 1.4rem;
+        font-weight: 700;
+      }
+      .meta {
+        margin-top: 18px;
+        color: #7f95b7;
+        font-size: 0.85rem;
+      }
+      .toolbar {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .button {
+        display: inline-flex;
+        align-items: center;
+        padding: 10px 14px;
+        border-radius: 999px;
+        background: #2d6cdf;
+        color: white;
+        text-decoration: none;
+      }
+      .button.secondary {
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+      }
+    </style>
+  </head>
+  <body>
+    <main class="shell">
+      <section class="hero">
+        <div>
+          <h1 class="title">Arbitrade Dashboard</h1>
+          <p class="subtitle">Live execution, P&amp;L, and system state.</p>
+        </div>
+        <div class="toolbar">
+          <a
+            class="button"
+            href="{{ metrics_endpoint }}"
+            hx-get="{{ metrics_endpoint }}"
+            hx-target="#metrics-panel"
+            hx-swap="outerHTML"
+            >Refresh metrics</a
+          >
+          <a class="button secondary" href="/health">Health</a>
+        </div>
+      </section>
+
+      <section
+        id="metrics-shell"
+        hx-get="{{ metrics_endpoint }}"
+        hx-target="this"
+        hx-trigger="load, every 15s"
+        hx-swap="outerHTML"
+      >
+        {% include "partials/metrics.html" %}
+      </section>
+
+      <script>
+        const stream = new EventSource("{{ stream_endpoint }}");
+        stream.addEventListener("metrics", (event) => {
+          const panel = document.getElementById("metrics-panel");
+          if (panel) {
+            panel.outerHTML = JSON.parse(event.data);
+          }
+        });
+      </script>
+    </main>
+  </body>
+</html>