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>

backend/routes/entities.py

@@ -147,6 +147,128 @@ def get_array_values(entity_type: str, entity_value: str, array_field: str, hour
     ]
 
 
+@router.get("/subnet/{subnet:path}")
+async def get_subnet_investigation(
+    subnet: str,
+    hours: int = Query(default=24, ge=1, le=720)
+):
+    """
+    Récupère toutes les IPs d'un subnet /24 avec leurs statistiques
+    Utilise les vues view_dashboard_entities et view_dashboard_user_agents
+    """
+    try:
+        # Extraire l'IP de base du subnet (ex: 192.168.1.0/24 -> 192.168.1.0)
+        subnet_ip = subnet.replace('/24', '').replace('/16', '').replace('/8', '')
+        
+        # Extraire les 3 premiers octets pour le filtre (ex: 141.98.11)
+        subnet_parts = subnet_ip.split('.')[:3]
+        subnet_prefix = subnet_parts[0]
+        subnet_mask = subnet_parts[1]
+        subnet_third = subnet_parts[2]
+        
+        # Stats globales du subnet - utilise view_dashboard_entities
+        stats_query = """
+        SELECT
+            %(subnet)s AS subnet,
+            uniq(src_ip) AS total_ips,
+            sum(requests) AS total_detections,
+            uniq(ja4) AS unique_ja4,
+            uniq(arrayJoin(user_agents)) AS unique_ua,
+            uniq(host) AS unique_hosts,
+            argMax(arrayJoin(countries), log_date) AS primary_country,
+            argMax(arrayJoin(asns), log_date) AS primary_asn,
+            min(log_date) AS first_seen,
+            max(log_date) AS last_seen
+        FROM view_dashboard_entities
+        WHERE entity_type = 'ip'
+          AND splitByChar('.', toString(src_ip))[1] = %(subnet_prefix)s
+          AND splitByChar('.', toString(src_ip))[2] = %(subnet_mask)s
+          AND splitByChar('.', toString(src_ip))[3] = %(subnet_third)s
+          AND log_date >= today() - INTERVAL %(hours)s HOUR
+        """
+        
+        stats_result = db.query(stats_query, {
+            "subnet": subnet,
+            "subnet_prefix": subnet_prefix,
+            "subnet_mask": subnet_mask,
+            "subnet_third": subnet_third,
+            "hours": hours
+        })
+        
+        if not stats_result.result_rows or stats_result.result_rows[0][1] == 0:
+            raise HTTPException(status_code=404, detail="Subnet non trouvé")
+        
+        stats_row = stats_result.result_rows[0]
+        stats = {
+            "subnet": subnet,
+            "total_ips": stats_row[1] or 0,
+            "total_detections": stats_row[2] or 0,
+            "unique_ja4": stats_row[3] or 0,
+            "unique_ua": stats_row[4] or 0,
+            "unique_hosts": stats_row[5] or 0,
+            "primary_country": stats_row[6] or "XX",
+            "primary_asn": str(stats_row[7]) if stats_row[7] else "?",
+            "first_seen": stats_row[8].isoformat() if stats_row[8] else "",
+            "last_seen": stats_row[9].isoformat() if stats_row[9] else ""
+        }
+        
+        # Liste des IPs avec détails - utilise view_dashboard_entities
+        ips_query = """
+        SELECT
+            src_ip AS ip,
+            sum(requests) AS total_detections,
+            uniq(ja4) AS unique_ja4,
+            uniq(arrayJoin(user_agents)) AS unique_ua,
+            argMax(arrayJoin(countries), log_date) AS primary_country,
+            argMax(arrayJoin(asns), log_date) AS primary_asn,
+            'MEDIUM' AS threat_level,
+            0.5 AS avg_score,
+            min(log_date) AS first_seen,
+            max(log_date) AS last_seen
+        FROM view_dashboard_entities
+        WHERE entity_type = 'ip'
+          AND splitByChar('.', toString(src_ip))[1] = %(subnet_prefix)s
+          AND splitByChar('.', toString(src_ip))[2] = %(subnet_mask)s
+          AND splitByChar('.', toString(src_ip))[3] = %(subnet_third)s
+          AND log_date >= today() - INTERVAL %(hours)s HOUR
+        GROUP BY src_ip
+        ORDER BY total_detections DESC
+        LIMIT 100
+        """
+        
+        ips_result = db.query(ips_query, {
+            "subnet_prefix": subnet_prefix,
+            "subnet_mask": subnet_mask,
+            "subnet_third": subnet_third,
+            "hours": hours
+        })
+        
+        ips = []
+        for row in ips_result.result_rows:
+            ips.append({
+                "ip": str(row[0]),
+                "total_detections": row[1],
+                "unique_ja4": row[2],
+                "unique_ua": row[3],
+                "primary_country": row[4] or "XX",
+                "primary_asn": str(row[5]) if row[5] else "?",
+                "threat_level": row[6] or "LOW",
+                "avg_score": abs(row[7] or 0),
+                "first_seen": row[8].isoformat() if row[8] else "",
+                "last_seen": row[9].isoformat() if row[9] else ""
+            })
+        
+        return {
+            "stats": stats,
+            "ips": ips
+        }
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Erreur: {str(e)}")
+
+
 @router.get("/{entity_type}/{entity_value:path}", response_model=EntityInvestigation)
 async def get_entity_investigation(
     entity_type: str,
@@ -329,9 +451,9 @@ async def get_entity_types():
             "ip": "Adresse IP source",
             "ja4": "Fingerprint JA4 TLS",
             "user_agent": "User-Agent HTTP",
-            "client_header": "Client Header HTTP",
+            "client_header": "Client Header",
             "host": "Host HTTP",
             "path": "Path URL",
-            "query_param": "Paramètres de query (noms concaténés)"
+            "query_param": "Query Param"
         }
     }

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>
+  );
+}