feat: Enhance dashboard with live overview panel and control features

2026-06-01 12:20:28 +02:00
parent 0c232b7aee
commit cde181f343
8 changed files with 612 additions and 2 deletions
@@ -68,19 +68,62 @@
        gap: 12px;
        flex-wrap: wrap;
      }
+      .toolbar form {
+        margin: 0;
+      }
      .button {
        display: inline-flex;
        align-items: center;
+        justify-content: center;
+        border: 0;
+        cursor: pointer;
        padding: 10px 14px;
        border-radius: 999px;
        background: #2d6cdf;
        color: white;
        text-decoration: none;
+        font: inherit;
      }
      .button.secondary {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.14);
      }
+      .button.danger {
+        background: #ba3d4f;
+      }
+      .form-grid {
+        display: grid;
+        gap: 12px;
+      }
+      .field {
+        display: grid;
+        gap: 6px;
+        color: #9fb2d0;
+        font-size: 0.9rem;
+      }
+      .field input {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px 12px;
+        border-radius: 10px;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        background: rgba(255, 255, 255, 0.04);
+        color: #e5eefb;
+        font: inherit;
+      }
+      .field.checkbox {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .field.checkbox input {
+        width: auto;
+      }
+      .control-actions {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
    </style>
  </head>
  <body>
@@ -113,6 +156,26 @@
        {% include "partials/metrics.html" %}
      </section>

+      <section
+        id="overview-shell"
+        hx-get="{{ overview_endpoint }}"
+        hx-target="this"
+        hx-trigger="load, every 10s"
+        hx-swap="outerHTML"
+      >
+        {% include "partials/overview.html" %}
+      </section>
+
+      <section
+        id="controls-shell"
+        hx-get="{{ controls_endpoint }}"
+        hx-target="this"
+        hx-trigger="load, every 20s"
+        hx-swap="outerHTML"
+      >
+        {% include "partials/controls.html" %}
+      </section>
+
      <script>
        const stream = new EventSource("{{ stream_endpoint }}");
        stream.addEventListener("metrics", (event) => {
@@ -121,6 +184,15 @@
            panel.outerHTML = JSON.parse(event.data);
          }
        });
+        const overviewStream = new EventSource(
+          "{{ overview_stream_endpoint }}",
+        );
+        overviewStream.addEventListener("overview", (event) => {
+          const panel = document.getElementById("overview-panel");
+          if (panel) {
+            panel.outerHTML = JSON.parse(event.data);
+          }
+        });
      </script>
    </main>
  </body>