OpsGuard - Tableau de bord de simulation 🖥️
Ceci est l'interface utilisateur Frontend pour OpsGuard. Elle sert de "cerveau" visuel pour démontrer l'agent SRE autonome en action.
Étant donné qu'OpsGuard est un agent orienté backend, ce tableau de bord est conçu pour simuler un environnement de production et visualiser le flux de travail invisible de l'agent (Ingérer → Analyser → Réparer) pour des démos et de la surveillance.
🌟 Fonctionnalités
- Esthétique Cyberpunk/SRE : Mode sombre, lignes de balayage et effets lumineux cinématographiques pour une sensation de "centre de contrôle de mission".
- Contrôles de simulation en direct :
- CRASH : Déclenche manuellement un incident critique (ex. : fuite mémoire) via l'API.
- RESET : Restaure le système à un état propre.
- Journaux en temps réel : Un flux de type terminal montrant les "pensées" de l'agent (analyse IA, recherche des causes racines, exécution de commandes).
- Visualisateur de pipeline : Un indicateur de progression montrant exactement où se trouve l'incident dans le cycle de vie (Ingérer → Diagnostiquer → En attente → Exécuter → Résolu).
- Simulation de métriques : Visualise les pics CPU/Mémoire lorsque le système entre dans un état "Critique".
🛠️ Configuration
Prérequis
- Assurez-vous que le backend OpsGuard est en cours d'exécution sur
http://localhost:3000.
1. Installer les dépendances
npm install
Créez un fichier .env (ou utilisez les valeurs par défaut) :
VITE_BACKEND_URL=http://localhost:3000
3. Lancer le serveur de développement
npm run dev
Ouvrez http://localhost:5173 dans votre navigateur.
- Démarrez le backend et ce frontend.
- Ouvrez le tableau de bord. Le statut du système doit être OPÉRATIONNEL (Vert).
- Cliquez sur le bouton CRASH (en haut à droite).
- Observez :
- Le statut passe à CRITIQUE (Rouge).
- Les journaux IA apparaissent dans le terminal.
- L'étape "Diagnostic" s'active.
- Agissez :
- Attendez l'apparition du bouton AUTORISER LA CORRECTION AUTOMATIQUE.
- Cliquez dessus.
- Résolvez :
- Observez la barre de progression pendant "Exécution de la correction".
- Le système revient à OPÉRATIONNEL.
🎨 Personnalisation
- Styles : Construit avec TailwindCSS v4.
- Icônes : Utilisation de
lucide-react.
- Effets : Animations CSS pour la lueur "respirante" et les lignes de balayage dans
App.tsx et index.css.
📄 Licence
MIT