Refactor ASN scoring logic and entity routes; add new frontend utilities

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

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { BrowserRouter, Routes, Route, Link, Navigate, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState } from 'react';
 import { DetectionsList } from './components/DetectionsList';
 import { DetailsView } from './components/DetailsView';
 import { InvestigationView } from './components/InvestigationView';
@@ -21,6 +21,7 @@ import { HeaderFingerprintView } from './components/HeaderFingerprintView';
 import { MLFeaturesView } from './components/MLFeaturesView';
 import ClusteringView from './components/ClusteringView';
 import { useTheme } from './ThemeContext';
+import { useMetrics } from './hooks/useMetrics';
 import { Tooltip } from './components/ui/Tooltip';
 import { TIPS } from './components/ui/tooltips';
 
@@ -403,31 +404,16 @@ function MainContent({ counts: _counts }: { counts: AlertCounts | null }) {
 // ─── App ──────────────────────────────────────────────────────────────────────
 
 export default function App() {
-  const [counts, setCounts] = useState<AlertCounts | null>(null);
+  const { data: metricsData } = useMetrics();
 
-  const fetchCounts = useCallback(async () => {
-    try {
-      const res = await fetch('/api/metrics');
-      if (res.ok) {
-        const data = await res.json();
-        const s = data.summary;
-        setCounts({
-          critical: s.critical_count ?? 0,
-          high: s.high_count ?? 0,
-          medium: s.medium_count ?? 0,
-          total: s.total_detections ?? 0,
-        });
+  const counts = metricsData
+    ? {
+        critical: metricsData.summary.critical_count ?? 0,
+        high: metricsData.summary.high_count ?? 0,
+        medium: metricsData.summary.medium_count ?? 0,
+        total: metricsData.summary.total_detections ?? 0,
       }
-    } catch {
-      // silently ignore — metrics are informational
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchCounts();
-    const id = setInterval(fetchCounts, 30_000);
-    return () => clearInterval(id);
-  }, [fetchCounts]);
+    : null;
 
   return (
     <BrowserRouter>

frontend/src/api/client.ts

@@ -147,11 +147,6 @@ export const detectionsApi = {
 };
 
 export const variabilityApi = {
-  getVariability: (type: string, value: string) => 
+  getVariability: (type: string, value: string) =>
     api.get<VariabilityResponse>(`/variability/${type}/${encodeURIComponent(value)}`),
 };
-
-export const attributesApi = {
-  getAttributes: (type: string, limit?: number) =>
-    api.get<AttributeListResponse>(`/attributes/${type}`, { params: { limit } }),
-};

frontend/src/components/BotnetMapView.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { formatNumber } from '../utils/dateUtils';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -29,9 +30,6 @@ type SortField = 'unique_ips' | 'unique_countries' | 'targeted_hosts';
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-function formatNumber(n: number): string {
-  return n.toLocaleString(navigator.language || undefined);
-}
 
 function getCountryFlag(code: string): string {
   if (!code || code.length !== 2) return '🌐';

frontend/src/components/BruteForceView.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import DataTable, { Column } from './ui/DataTable';
 import { InfoTip } from './ui/Tooltip';
 import { TIPS } from './ui/tooltips';
+import { formatNumber } from '../utils/dateUtils';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -33,9 +34,6 @@ type ActiveTab = 'targets' | 'attackers' | 'timeline';
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-function formatNumber(n: number): string {
-  return n.toLocaleString(navigator.language || undefined);
-}
 
 // ─── Sub-components ───────────────────────────────────────────────────────────
 

frontend/src/components/HeaderFingerprintView.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import DataTable, { Column } from './ui/DataTable';
 import { TIPS } from './ui/tooltips';
+import { formatNumber } from '../utils/dateUtils';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -27,9 +28,6 @@ interface ClusterIP {
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-function formatNumber(n: number): string {
-  return n.toLocaleString(navigator.language || undefined);
-}
 
 function mismatchColor(pct: number): string {
   if (pct > 50) return 'text-threat-critical';

frontend/src/components/HeatmapView.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { formatNumber } from '../utils/dateUtils';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -24,9 +25,6 @@ interface HeatmapMatrix {
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-function formatNumber(n: number): string {
-  return n.toLocaleString(navigator.language || undefined);
-}
 
 function heatmapCellStyle(value: number, maxValue: number): React.CSSProperties {
   if (maxValue === 0 || value === 0) return { backgroundColor: 'transparent' };

frontend/src/components/MLFeaturesView.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import DataTable, { Column } from './ui/DataTable';
 import { TIPS } from './ui/tooltips';
+import { formatNumber } from '../utils/dateUtils';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -47,9 +48,6 @@ interface ScatterPoint {
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-function formatNumber(n: number): string {
-  return n.toLocaleString(navigator.language || undefined);
-}
 
 function attackTypeEmoji(type: string): string {
   switch (type) {

frontend/src/components/RotationView.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { formatDateShort } from '../utils/dateUtils';
+import { formatDateShort } { formatNumber; } from '../utils/dateUtils'
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -51,9 +51,6 @@ type ActiveTab = 'rotators' | 'persistent' | 'sophistication' | 'hunt';
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-function formatNumber(n: number): string {
-  return n.toLocaleString(navigator.language || undefined);
-}
 
 function formatDate(iso: string): string {
   if (!iso) return '—';

frontend/src/components/TcpSpoofingView.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import DataTable, { Column } from './ui/DataTable';
 import { TIPS } from './ui/tooltips';
+import { formatNumber } from '../utils/dateUtils';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -51,9 +52,6 @@ type ActiveTab = 'detections' | 'matrix';
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-function formatNumber(n: number): string {
-  return n.toLocaleString(navigator.language || undefined);
-}
 
 function confidenceBar(conf: number): JSX.Element {
   const pct = Math.round(conf * 100);

frontend/src/components/ui/Feedback.tsx

@@ -0,0 +1,26 @@
+/**
+ * Composants UI réutilisables pour les états de chargement et d'erreur.
+ * Utiliser ces composants plutôt que de re-déclarer des versions locales.
+ */
+
+/** Spinner centré — affiché pendant le chargement d'une section. */
+export function LoadingSpinner() {
+  return (
+    <div className="flex items-center justify-center py-12">
+      <div className="w-8 h-8 border-2 border-accent-primary border-t-transparent rounded-full animate-spin" />
+    </div>
+  );
+}
+
+interface ErrorMessageProps {
+  message: string;
+}
+
+/** Bandeau d'erreur rouge — affiché quand une requête échoue. */
+export function ErrorMessage({ message }: ErrorMessageProps) {
+  return (
+    <div className="bg-threat-critical/10 border border-threat-critical/30 rounded-lg p-4 text-threat-critical">
+      ⚠️ {message}
+    </div>
+  );
+}

frontend/src/config.ts

@@ -16,23 +16,9 @@ export const CONFIG = {
   /** Clé localStorage pour la préférence de thème */
   THEME_STORAGE_KEY: 'soc_theme',
 
-  // ── Pagination ────────────────────────────────────────────────────────────
-  /** Taille de page par défaut pour les listes */
-  DEFAULT_PAGE_SIZE: 50,
-
-  /** Tailles de page disponibles */
-  PAGE_SIZES: [25, 50, 100, 250] as const,
-
   // ── Rafraîchissement ──────────────────────────────────────────────────────
-  /** Intervalle de rafraîchissement automatique des métriques (ms). 0 = désactivé */
-  METRICS_REFRESH_MS: 0,
-
-  // ── Détections ────────────────────────────────────────────────────────────
-  /** Score d'anomalie en-dessous duquel une IP est considérée critique */
-  CRITICAL_THRESHOLD: -0.5,
-
-  /** Score d'anomalie en-dessous duquel une IP est considérée HIGH */
-  HIGH_THRESHOLD: -0.3,
+  /** Intervalle de rafraîchissement automatique des métriques (ms). */
+  METRICS_REFRESH_MS: 30_000,
 
   // ── Anubis ────────────────────────────────────────────────────────────────
   /**
@@ -49,8 +35,5 @@ export const CONFIG = {
    *   WEIGH  → trafic suspect — scoré par l'IsolationForest avec signal anubis_is_flagged=1
    */
   ANUBIS_RULES_URL: 'https://github.com/TecharoHQ/anubis/tree/main/data',
-
-  // ── Application ───────────────────────────────────────────────────────────
-  APP_NAME: 'JA4 SOC Dashboard',
-  APP_VERSION: '12',
 } as const;
+

frontend/src/hooks/useFetch.ts

@@ -0,0 +1,57 @@
+import { useState, useEffect } from 'react';
+
+interface FetchState<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * Hook générique pour les appels fetch avec gestion loading/error.
+ * Annule automatiquement la requête si le composant est démonté
+ * ou si l'URL change avant que la réponse arrive.
+ *
+ * @param url  URL relative ou absolue à appeler (typiquement "/api/...")
+ * @param deps Dépendances supplémentaires qui déclenchent un re-fetch
+ *             (en plus de url). Équivalent au tableau de deps de useEffect.
+ *
+ * @example
+ * const { data, loading, error } = useFetch<MyType>('/api/metrics');
+ */
+export function useFetch<T>(url: string, deps: unknown[] = []): FetchState<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    setLoading(true);
+    setError(null);
+
+    fetch(url)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        return res.json() as Promise<T>;
+      })
+      .then((json) => {
+        if (!cancelled) {
+          setData(json);
+          setLoading(false);
+        }
+      })
+      .catch((err: unknown) => {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'Erreur inconnue');
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url, ...deps]);
+
+  return { data, loading, error };
+}

frontend/src/hooks/useMetrics.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { metricsApi, MetricsResponse } from '../api/client';
+import { CONFIG } from '../config';
 
 export function useMetrics() {
   const [data, setData] = useState<MetricsResponse | null>(null);
@@ -19,9 +20,7 @@ export function useMetrics() {
     };
 
     fetchMetrics();
-    
-    // Rafraîchissement automatique toutes les 30 secondes
-    const interval = setInterval(fetchMetrics, 30000);
+    const interval = setInterval(fetchMetrics, CONFIG.METRICS_REFRESH_MS);
     return () => clearInterval(interval);
   }, []);
 

frontend/src/utils/countryUtils.ts

@@ -0,0 +1,11 @@
+/**
+ * Convertit un code pays ISO 3166-1 alpha-2 en emoji drapeau.
+ * Utilise les Regional Indicator Symbols Unicode (U+1F1E6…U+1F1FF).
+ * Retourne 🌐 pour les codes invalides ou vides.
+ */
+export function getCountryFlag(code: string): string {
+  if (!code || code.length !== 2) return '🌐';
+  return code
+    .toUpperCase()
+    .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397));
+}