feat: Enhance LiveLogViewer with Security Mode and related tests

- Updated LiveLogViewer to support a new security mode, allowing for the display of security logs.
- Implemented mock functions for connecting to security logs in tests.
- Added tests for rendering, filtering, and displaying security log entries, including blocked requests and source filtering.
- Modified Security page to utilize the new security mode in LiveLogViewer.
- Updated Security page tests to reflect changes in log viewer and ensure proper rendering of security-related components.
- Introduced a new script for CrowdSec startup testing, ensuring proper configuration and parser installation.
- Added pre-flight checks in the CrowdSec integration script to verify successful startup and configuration.

frontend/src/api/logs.ts

@@ -80,6 +80,39 @@ export interface LiveLogFilter {
   source?: string;
 }
 
+/**
+ * SecurityLogEntry represents a security-relevant log entry from Cerberus.
+ * This matches the backend SecurityLogEntry struct from /api/v1/cerberus/logs/ws
+ */
+export interface SecurityLogEntry {
+  timestamp: string;
+  level: string;
+  logger: string;
+  client_ip: string;
+  method: string;
+  uri: string;
+  status: number;
+  duration: number;
+  size: number;
+  user_agent: string;
+  host: string;
+  source: 'waf' | 'crowdsec' | 'ratelimit' | 'acl' | 'normal';
+  blocked: boolean;
+  block_reason?: string;
+  details?: Record<string, unknown>;
+}
+
+/**
+ * Filters for the Cerberus security logs WebSocket endpoint.
+ */
+export interface SecurityLogFilter {
+  source?: string;       // Filter by security module: waf, crowdsec, ratelimit, acl, normal
+  level?: string;        // Filter by log level: info, warn, error
+  ip?: string;           // Filter by client IP (partial match)
+  host?: string;         // Filter by host (partial match)
+  blocked_only?: boolean; // Only show blocked requests
+}
+
 /**
  * Connects to the live logs WebSocket endpoint.
  * Returns a function to close the connection.
@@ -131,3 +164,65 @@ export const connectLiveLogs = (
     }
   };
 };
+
+/**
+ * Connects to the Cerberus security logs WebSocket endpoint.
+ * This streams parsed Caddy access logs with security event annotations.
+ *
+ * @param filters - Optional filters for source, level, IP, host, and blocked_only
+ * @param onMessage - Callback for each received SecurityLogEntry
+ * @param onOpen - Callback when connection is established
+ * @param onError - Callback on connection error
+ * @param onClose - Callback when connection closes
+ * @returns A function to close the WebSocket connection
+ */
+export const connectSecurityLogs = (
+  filters: SecurityLogFilter,
+  onMessage: (log: SecurityLogEntry) => void,
+  onOpen?: () => void,
+  onError?: (error: Event) => void,
+  onClose?: () => void
+): (() => void) => {
+  const params = new URLSearchParams();
+  if (filters.source) params.append('source', filters.source);
+  if (filters.level) params.append('level', filters.level);
+  if (filters.ip) params.append('ip', filters.ip);
+  if (filters.host) params.append('host', filters.host);
+  if (filters.blocked_only) params.append('blocked_only', 'true');
+
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsUrl = `${protocol}//${window.location.host}/api/v1/cerberus/logs/ws?${params.toString()}`;
+
+  console.log('Connecting to Cerberus logs WebSocket:', wsUrl);
+  const ws = new WebSocket(wsUrl);
+
+  ws.onopen = () => {
+    console.log('Cerberus logs WebSocket connection established');
+    onOpen?.();
+  };
+
+  ws.onmessage = (event: MessageEvent) => {
+    try {
+      const log = JSON.parse(event.data) as SecurityLogEntry;
+      onMessage(log);
+    } catch (err) {
+      console.error('Failed to parse security log message:', err);
+    }
+  };
+
+  ws.onerror = (error: Event) => {
+    console.error('Cerberus logs WebSocket error:', error);
+    onError?.(error);
+  };
+
+  ws.onclose = (event: CloseEvent) => {
+    console.log('Cerberus logs WebSocket closed', { code: event.code, reason: event.reason, wasClean: event.wasClean });
+    onClose?.();
+  };
+
+  return () => {
+    if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
+      ws.close();
+    }
+  };
+};