feat: Vue subnet /24 avec liste des IPs

- Nouveau endpoint API GET /api/entities/subnet/:subnet
  - Utilise view_dashboard_entities (données agrégées)
  - Retourne stats globales + liste détaillée des IPs
  - Filtre par les 3 premiers octets du subnet

- Nouveau composant frontend SubnetInvestigation.tsx
  - Affiche toutes les IPs d'un subnet /24
  - Tableau avec: IP, détections, JA4, UA, pays, ASN, menace, score
  - Boutons 'Investiguer' et 'Détails' par IP

- URL simplifiée: /entities/subnet/x.x.x.x_24 (_ au lieu de /)
  - Évite les problèmes d'encodage URL
  - Conversion automatique _ → / côté frontend

- Correction route ordering dans App.tsx
  - /entities/subnet/:subnet avant /entities/:type/:value

- Routes backend réordonnées
  - /api/entities/subnet/:subnet avant les routes génériques

Testé avec 141.98.11.0/24 → 6 IPs trouvées, 1677 détections

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

frontend/src/App.tsx

@@ -9,6 +9,7 @@ import { QuickSearch } from './components/QuickSearch';
 import { ThreatIntelView } from './components/ThreatIntelView';
 import { CorrelationGraph } from './components/CorrelationGraph';
 import { InteractiveTimeline } from './components/InteractiveTimeline';
+import { SubnetInvestigation } from './components/SubnetInvestigation';
 
 // Navigation
 function Navigation() {
@@ -62,6 +63,7 @@ export default function App() {
             <Route path="/detections/:type/:value" element={<DetailsView />} />
             <Route path="/investigation/:ip" element={<InvestigationView />} />
             <Route path="/investigation/ja4/:ja4" element={<JA4InvestigationView />} />
+            <Route path="/entities/subnet/:subnet" element={<SubnetInvestigation />} />
             <Route path="/entities/:type/:value" element={<EntityInvestigationView />} />
             <Route path="/tools/correlation-graph/:ip" element={<CorrelationGraph ip={window.location.pathname.split('/').pop() || ''} height="600px" />} />
             <Route path="/tools/timeline/:ip?" element={<InteractiveTimeline ip={window.location.pathname.split('/').pop()} height="400px" />} />

frontend/src/components/IncidentsView.tsx

@@ -310,7 +310,7 @@ export function IncidentsView() {
                       Investiguer
                     </button>
                     <button
-                      onClick={() => navigate(`/entities/ip/${cluster.sample_ip || cluster.subnet?.split('/')[0] || ''}`)}
+                      onClick={() => navigate(`/entities/subnet/${encodeURIComponent((cluster.subnet || '').replace('/', '_'))}`)}
                       className="px-3 py-1.5 bg-background-card text-text-primary rounded text-sm hover:bg-background-card/80 transition-colors"
                     >
                       Voir détails

frontend/src/components/SubnetInvestigation.tsx

@@ -0,0 +1,271 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { QuickSearch } from './QuickSearch';
+
+interface SubnetIP {
+  ip: string;
+  total_detections: number;
+  unique_ja4: number;
+  unique_ua: number;
+  primary_country: string;
+  primary_asn: string;
+  threat_level: string;
+  avg_score: number;
+  first_seen: string;
+  last_seen: string;
+}
+
+interface SubnetStats {
+  subnet: string;
+  total_ips: number;
+  total_detections: number;
+  unique_ja4: number;
+  unique_ua: number;
+  unique_hosts: number;
+  primary_country: string;
+  primary_asn: string;
+  first_seen: string;
+  last_seen: string;
+}
+
+export function SubnetInvestigation() {
+  const { subnet } = useParams<{ subnet: string }>();
+  const navigate = useNavigate();
+  const [stats, setStats] = useState<SubnetStats | null>(null);
+  const [ips, setIps] = useState<SubnetIP[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Convertir le format d'URL (ex: 192.168.1.0_24 -> 192.168.1.0/24)
+  const formattedSubnet = subnet ? subnet.replace('_', '/') : null;
+
+  useEffect(() => {
+    const fetchSubnet = async () => {
+      if (!formattedSubnet) return;
+      
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/entities/subnet/${encodeURIComponent(formattedSubnet)}`);
+        if (response.ok) {
+          const data = await response.json();
+          setStats(data.stats);
+          setIps(data.ips || []);
+        }
+      } catch (error) {
+        console.error('Error fetching subnet:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSubnet();
+  }, [formattedSubnet]);
+
+  const getCountryFlag = (code: string) => {
+    return code.toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397));
+  };
+
+  const getThreatLevelColor = (level: string) => {
+    switch (level) {
+      case 'CRITICAL': return 'text-red-500 bg-red-500/10';
+      case 'HIGH': return 'text-orange-500 bg-orange-500/10';
+      case 'MEDIUM': return 'text-yellow-500 bg-yellow-500/10';
+      case 'LOW': return 'text-green-500 bg-green-500/10';
+      default: return 'text-gray-500 bg-gray-500/10';
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    return date.toLocaleDateString('fr-FR', { 
+      day: '2-digit', 
+      month: '2-digit', 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-text-secondary">Chargement...</div>
+      </div>
+    );
+  }
+
+  if (!stats) {
+    return (
+      <div className="p-6">
+        <button
+          onClick={() => navigate('/')}
+          className="mb-4 px-4 py-2 bg-accent-primary text-white rounded hover:bg-accent-primary/80"
+        >
+          ← Retour
+        </button>
+        <div className="text-red-500">
+          Sous-réseau non trouvé: {subnet}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 animate-fade-in">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <div className="flex items-center gap-4">
+          <button
+            onClick={() => navigate('/')}
+            className="px-4 py-2 bg-background-card text-text-primary rounded hover:bg-background-card/80 transition-colors"
+          >
+            ← Retour
+          </button>
+          <div>
+            <h1 className="text-2xl font-bold text-text-primary">
+              Investigation: Sous-réseau
+            </h1>
+            <p className="font-mono text-text-secondary">{subnet}</p>
+          </div>
+        </div>
+        <div className="w-full md:w-auto">
+          <QuickSearch />
+        </div>
+      </div>
+
+      {/* Stats Summary */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="bg-background-card rounded-lg p-4">
+          <div className="text-sm text-text-secondary mb-1">Total IPs</div>
+          <div className="text-2xl font-bold text-text-primary">{stats.total_ips}</div>
+        </div>
+        <div className="bg-background-card rounded-lg p-4">
+          <div className="text-sm text-text-secondary mb-1">Total Détections</div>
+          <div className="text-2xl font-bold text-text-primary">{stats.total_detections.toLocaleString()}</div>
+        </div>
+        <div className="bg-background-card rounded-lg p-4">
+          <div className="text-sm text-text-secondary mb-1">JA4 Uniques</div>
+          <div className="text-2xl font-bold text-text-primary">{stats.unique_ja4}</div>
+        </div>
+        <div className="bg-background-card rounded-lg p-4">
+          <div className="text-sm text-text-secondary mb-1">User-Agents Uniques</div>
+          <div className="text-2xl font-bold text-text-primary">{stats.unique_ua}</div>
+        </div>
+        <div className="bg-background-card rounded-lg p-4">
+          <div className="text-sm text-text-secondary mb-1">Hosts Uniques</div>
+          <div className="text-2xl font-bold text-text-primary">{stats.unique_hosts}</div>
+        </div>
+        <div className="bg-background-card rounded-lg p-4">
+          <div className="text-sm text-text-secondary mb-1">Pays Principal</div>
+          <div className="text-2xl font-bold text-text-primary">
+            {getCountryFlag(stats.primary_country)} {stats.primary_country}
+          </div>
+        </div>
+        <div className="bg-background-card rounded-lg p-4">
+          <div className="text-sm text-text-secondary mb-1">ASN Principal</div>
+          <div className="text-2xl font-bold text-text-primary">AS{stats.primary_asn}</div>
+        </div>
+        <div className="bg-background-card rounded-lg p-4">
+          <div className="text-sm text-text-secondary mb-1">Période</div>
+          <div className="text-sm text-text-primary">
+            {formatDate(stats.first_seen)} - {formatDate(stats.last_seen)}
+          </div>
+        </div>
+      </div>
+
+      {/* IPs Table */}
+      <div className="bg-background-secondary rounded-lg p-6">
+        <h2 className="text-xl font-semibold text-text-primary mb-4">
+          IPs du Sous-réseau ({ips.length})
+        </h2>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-background-card">
+              <tr>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">IP</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Détections</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">JA4</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">UA</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Pays</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">ASN</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Menace</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Score</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-background-card">
+              {ips.map((ipData) => (
+                <tr
+                  key={ipData.ip}
+                  className="hover:bg-background-card/50 transition-colors"
+                >
+                  <td className="px-4 py-3 font-mono text-sm text-text-primary">
+                    {ipData.ip}
+                  </td>
+                  <td className="px-4 py-3 text-text-primary">
+                    {ipData.total_detections}
+                  </td>
+                  <td className="px-4 py-3 text-text-primary">
+                    {ipData.unique_ja4}
+                  </td>
+                  <td className="px-4 py-3 text-text-primary">
+                    {ipData.unique_ua}
+                  </td>
+                  <td className="px-4 py-3 text-text-primary">
+                    {getCountryFlag(ipData.primary_country)} {ipData.primary_country}
+                  </td>
+                  <td className="px-4 py-3 text-text-primary">
+                    AS{ipData.primary_asn}
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className={`px-2 py-1 rounded text-xs font-medium ${getThreatLevelColor(ipData.threat_level)}`}>
+                      {ipData.threat_level}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <div className="w-24 bg-background-secondary rounded-full h-2">
+                        <div
+                          className={`h-2 rounded-full ${
+                            ipData.avg_score >= 80 ? 'bg-red-500' :
+                            ipData.avg_score >= 60 ? 'bg-orange-500' :
+                            ipData.avg_score >= 40 ? 'bg-yellow-500' :
+                            'bg-green-500'
+                          }`}
+                          style={{ width: `${Math.min(100, ipData.avg_score * 100)}%` }}
+                        />
+                      </div>
+                      <span className="text-sm text-text-primary">{Math.round(ipData.avg_score * 100)}</span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => navigate(`/investigation/${ipData.ip}`)}
+                        className="px-2 py-1 bg-accent-primary text-white rounded text-xs hover:bg-accent-primary/80"
+                      >
+                        Investiguer
+                      </button>
+                      <button
+                        onClick={() => navigate(`/entities/ip/${ipData.ip}`)}
+                        className="px-2 py-1 bg-background-card text-text-primary rounded text-xs hover:bg-background-card/80"
+                      >
+                        Détails
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+              {ips.length === 0 && (
+                <tr>
+                  <td colSpan={9} className="px-4 py-12 text-center text-text-secondary">
+                    Aucune IP trouvée dans ce sous-réseau
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}