From 571bff4512e064d3e00bfd734d214a66addbe075 Mon Sep 17 00:00:00 2001 From: SOC Analyst Date: Sat, 14 Mar 2026 22:11:52 +0100 Subject: [PATCH] refactor: Dashboard SOC - Refonte totale sans conneries MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🎯 NOUVEAU DASHBOARD PROFESSIONNEL CHANGEMENTS PRINCIPAUX: • Page d'accueil: / (ex-/incidents) - Vue incidents clusterisés • Navigation simplifiée: Incidents + Threat Intel uniquement • Supprimé: Dashboard inutile, /detections (remplacé par incidents) FONCTIONNALITÉS CLÉS: • Incidents clusterisés par subnet/JA4/pattern • Sélection multiple avec checkboxes • Actions en masse: Classifier, Export, Blacklist • Scores de risque visibles (0-100) • Tendances (↑ ↓ →) avec pourcentages • Top menaces actives en tableau ACTIONS DIRECTES DEPUIS LE DASHBOARD: • Investiguer → Ouvre /investigation/:ip • Classifier → Ouvre bulk classification • Export STIX → Télécharge bundle STIX 2.1 • Voir détails → Ouvre /entities/:type/:value METRICS AFFICHÉES: • CRITICAL / HIGH / MEDIUM / TOTAL • Tendances vs période précédente • IPs uniques • Hits/s par incident UI/UX: • Zéro icône inutile • Code couleur: Rouge (CRITICAL) → Orange → Jaune → Vert • Tableaux de données brutes • Sélection multiple visible avec barre d'actions • Navigation minimale et efficace PERFORMANCES: • Refresh auto: 60 secondes • Build: 495 KB (148 KB gzippé) • Container: healthy ✅ Build Docker: SUCCESS ✅ API: Fonctionnelle ✅ Navigation: Simplifiée Co-authored-by: Qwen-Coder --- frontend/src/App.tsx | 211 +--------- frontend/src/components/IncidentsView.tsx | 452 +++++++++++----------- 2 files changed, 232 insertions(+), 431 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1f718bf..9cc1d1d 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,5 +1,4 @@ import { BrowserRouter, Routes, Route, Link, useLocation } from 'react-router-dom'; -import { useMetrics } from './hooks/useMetrics'; import { DetectionsList } from './components/DetectionsList'; import { DetailsView } from './components/DetailsView'; import { InvestigationView } from './components/InvestigationView'; @@ -11,221 +10,20 @@ import { ThreatIntelView } from './components/ThreatIntelView'; import { CorrelationGraph } from './components/CorrelationGraph'; import { InteractiveTimeline } from './components/InteractiveTimeline'; -// Composant Dashboard -function Dashboard() { - const { data, loading, error } = useMetrics(); - - if (loading) { - return ( -
-
Chargement...
-
- ); - } - - if (error) { - return ( -
-

Erreur: {error.message}

-
- ); - } - - if (!data) return null; - - const { summary } = data; - - return ( -
- {/* Métriques */} -
- - - - -
- - {/* Répartition par menace */} -
-

Répartition par Menace

-
- - - - -
-
- - {/* Série temporelle */} -
-

Évolution (24h)

- -
- - {/* Accès rapide */} -
-

Accès Rapide

-
- -

Voir les détections

-

Explorer toutes les détections

- - -

Menaces Critiques

-

{summary.critical_count} détections

- - -

Modèle Complet

-

Avec données TCP/TLS

- -
-
-
- ); -} - -// Composant MetricCard -function MetricCard({ title, value, subtitle, color }: { - title: string; - value: string | number; - subtitle: string; - color: string; -}) { - return ( -
-

{title}

-

{value}

-

{subtitle}

-
- ); -} - -// Composant ThreatBar -function ThreatBar({ level, count, total, color }: { - level: string; - count: number; - total: number; - color: string; -}) { - const percentage = total > 0 ? ((count / total) * 100).toFixed(1) : '0'; - - const colors: Record = { - CRITICAL: 'bg-threat-critical', - HIGH: 'bg-threat-high', - MEDIUM: 'bg-threat-medium', - LOW: 'bg-threat-low', - }; - - return ( -
-
- {level} - {count} ({percentage}%) -
-
-
-
-
- ); -} - -// Composant TimeSeriesChart (simplifié) -function TimeSeriesChart({ data }: { data: { hour: string; total: number }[] }) { - if (!data || data.length === 0) return null; - - const maxVal = Math.max(...data.map(d => d.total), 1); - - return ( -
- {data.map((point, i) => { - const height = (point.total / maxVal) * 100; - const hour = new Date(point.hour).getHours(); - - return ( -
-
- {i % 4 === 0 && ( - {hour}h - )} -
- ); - })} -
- ); -} - // Navigation function Navigation() { const location = useLocation(); const links = [ - { path: '/incidents', label: '🚨 Incidents' }, - { path: '/', label: '📊 Dashboard' }, - { path: '/detections', label: '📋 Détections' }, - { path: '/threat-intel', label: '📚 Threat Intel' }, + { path: '/', label: 'Incidents' }, + { path: '/threat-intel', label: 'Threat Intel' }, ]; return (