OpsGuard - Simulations-Dashboard 🖥️
Dies ist das Frontend-UI für OpsGuard. Es dient als visuelles „Gehirn“, um den autonomen SRE-Agenten in Aktion zu demonstrieren.
Da OpsGuard ein backend-zentrierter Agent ist, wurde dieses Dashboard entwickelt, um eine Produktionsumgebung zu simulieren und den unsichtbaren Workflow des Agenten (Ingest → Analyse → Fix) für Demos und Überwachung zu visualisieren.
🌟 Funktionen
- Cyberpunk/SRE-Ästhetik: Dunkelmodus, Scanlines und filmische Glüheffekte, die sich wie ein „Mission Control“-Zentrum anfühlen.
- Live-Simulationssteuerung:
- CRASH: Löst manuell einen kritischen Vorfall (z. B. Memory Leak) über die API aus.
- RESET: Stellt das System in einen sauberen Zustand zurück.
- Echtzeitprotokolle: Ein terminalähnlicher Feed, der die „Gedanken“ des Agenten anzeigt (KI-Analyse, Ursachenfindung, Ausführung von Befehlen).
- Pipeline-Visualizer: Ein Fortschrittsindikator, der genau anzeigt, wo sich der Vorfall im Lebenszyklus befindet (Ingest → Diagnose → Warten → Ausführen → Gelöst).
- Metrik-Simulation: Visualisiert CPU-/Memory-Spitzen, wenn das System in einen
"Critical"-Zustand eintritt.
🛠️ Einrichtung
Voraussetzungen
- Stellen Sie sicher, dass das OpsGuard-Backend unter
http://localhost:3000 läuft.
1. Abhängigkeiten installieren
2. Umgebung konfigurieren
Erstellen Sie eine .env-Datei (oder verwenden Sie die Standardeinstellung):
VITE_BACKEND_URL=http://localhost:3000
3. Entwicklungsserver starten
Öffnen Sie http://localhost:5173 in Ihrem Browser.
🎮 So führen Sie die Demo aus
- Starten Sie das Backend und dieses Frontend.
- Öffnen Sie das Dashboard. Der Systemstatus sollte OPERATIONAL (Grün) sein.
- Klicken Sie auf die CRASH-Schaltfläche (oben rechts).
- Beobachten Sie:
- Der Status wechselt zu CRITICAL (Rot).
- KI-Protokolle erscheinen im Terminal.
- Der Schritt „Diagnose“ wird aktiviert.
- Handeln Sie:
- Warten Sie, bis die Schaltfläche AUTHORIZE AUTO-FIX erscheint.
- Klicken Sie darauf.
- Beheben Sie:
- Beobachten Sie den Fortschrittsbalken, während er
"Executing Fix" anzeigt.
- Das System kehrt zu OPERATIONAL zurück.
🎨 Anpassung
- Styles: Erstellt mit TailwindCSS v4.
- Icons: Verwendung von
lucide-react.
- Effekte: CSS-Animationen für das „atmende“ Glühen und die Scanlines befinden sich in
App.tsx und index.css.
📄 Lizenz
MIT