k8s-av 1.0.0

package/ui/src/components/graph/GraphCanvas.tsx

@@ -0,0 +1,174 @@
+import { useMemo, useCallback } from 'react';
+import {
+  ReactFlow, Background, Controls, MiniMap,
+  useNodesState, useEdgesState,
+  type Node, type Edge,
+  BackgroundVariant, MarkerType,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import dagre from '@dagrejs/dagre';
+
+import { CustomNode, type K8sNodeData } from './CustomNode';
+import { useAppStore } from '../../store/useAppStore';
+import type { GraphNode, GraphEdge } from '../../lib/api';
+
+const NODE_W = 180;
+const NODE_H = 54;
+const nodeTypes = { k8s: CustomNode };
+
+// ─── Dagre layout ─────────────────────────────────────────────────────────────
+function applyLayout(nodes: Node[], edges: Edge[]): Node[] {
+  const g = new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: 'LR', nodesep: 60, ranksep: 130 });
+  nodes.forEach((n) => g.setNode(n.id, { width: NODE_W, height: NODE_H }));
+  edges.forEach((e) => g.setEdge(e.source, e.target));
+  dagre.layout(g);
+  return nodes.map((n) => {
+    const pos = g.node(n.id);
+    return { ...n, position: { x: pos.x - NODE_W / 2, y: pos.y - NODE_H / 2 } };
+  });
+}
+
+// ─── Transform backend data → React Flow ─────────────────────────────────────
+function buildFlowGraph(
+  rawNodes: GraphNode[],
+  rawEdges: GraphEdge[],
+  selectedNodeId: string | null,
+  highlightedNodeIds: Set<string>,
+  highlightedEdgeIds: Set<string>,
+  criticalNodeId: string | null,
+  vulnMap: Map<string, number>,
+): { nodes: Node[]; edges: Edge[] } {
+  const hasHighlight = highlightedNodeIds.size > 0;
+
+  const nodes: Node[] = rawNodes.map((n) => ({
+    id: n.id,
+    type: 'k8s',
+    position: { x: 0, y: 0 },
+    data: {
+      label:        n.name || n.id,
+      nodeType:     n.type,
+      riskScore:    n.riskScore,
+      isEntryPoint: n.isEntryPoint,
+      isCrownJewel: n.isCrownJewel,
+      hasCve:       (n.cve?.length ?? 0) > 0,
+      highlighted:  highlightedNodeIds.has(n.id),
+      dimmed:       hasHighlight && !highlightedNodeIds.has(n.id) && n.id !== selectedNodeId,
+      isCritical:   n.id === criticalNodeId,
+      vuln:         vulnMap.get(n.id) ?? null,
+    } satisfies K8sNodeData,
+  }));
+
+  const edges: Edge[] = rawEdges.map((e, i) => {
+    const edgeId = `${e.from}-${e.to}-${i}`;
+    const isHighlighted = highlightedEdgeIds.has(edgeId) || highlightedEdgeIds.has(`${e.from}-${e.to}`);
+    return {
+      id: edgeId,
+      source: e.from,
+      target: e.to,
+      label: e.type,
+      animated: isHighlighted,
+      style: {
+        stroke: isHighlighted ? '#FF6A00' : '#2a2a2a',
+        strokeWidth: isHighlighted ? 2 : 1,
+        opacity: hasHighlight && !isHighlighted ? 0.1 : 0.6,
+        strokeDasharray: isHighlighted ? '6 3' : undefined,
+      },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: isHighlighted ? '#FF6A00' : '#2a2a2a',
+      },
+      labelStyle: { fill: '#555555', fontSize: 9 },
+      labelBgStyle: { fill: '#0B0B0B' },
+    };
+  });
+
+  return { nodes: applyLayout(nodes, edges), edges };
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+interface Props {
+  highlightedNodeIds?: Set<string>;
+  highlightedEdgeKeys?: Set<string>;
+  criticalNodeId?: string | null;
+}
+
+export function GraphCanvas({
+  highlightedNodeIds = new Set(),
+  highlightedEdgeKeys = new Set(),
+  criticalNodeId = null,
+}: Props) {
+  const { graphNodes, graphEdges, selectedNodeId, vulnerabilities, selectNode } = useAppStore();
+
+  const vulnMap = useMemo(() => {
+    const m = new Map<string, number>();
+    vulnerabilities.forEach((v) => m.set(v.nodeId, v.riskScore));
+    return m;
+  }, [vulnerabilities]);
+
+  const { nodes: initialNodes, edges: initialEdges } = useMemo(
+    () => buildFlowGraph(graphNodes, graphEdges, selectedNodeId, highlightedNodeIds, highlightedEdgeKeys, criticalNodeId, vulnMap),
+    [graphNodes, graphEdges, selectedNodeId, highlightedNodeIds, highlightedEdgeKeys, criticalNodeId, vulnMap],
+  );
+
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, , onEdgesChange] = useEdgesState(initialEdges);
+
+  const syncedNodes = useMemo(() => {
+    return initialNodes.map((n) => {
+      const existing = nodes.find((en) => en.id === n.id);
+      return existing ? { ...n, position: existing.position } : n;
+    });
+  }, [initialNodes]); // eslint-disable-line
+
+  const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
+    selectNode(node.id);
+  }, [selectNode]);
+
+  const onPaneClick = useCallback(() => {
+    selectNode(null);
+  }, [selectNode]);
+
+  if (graphNodes.length === 0) {
+    return (
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{ fontSize: 13, color: '#555555' }}>No cluster data loaded.</div>
+          <div style={{ fontSize: 11, color: '#333333', marginTop: 6 }}>
+            Run: <span style={{ fontFamily: 'monospace', color: '#FF6A00' }}>npm run ingest</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ flex: 1, minHeight: 0, borderRadius: 12, overflow: 'hidden' }}>
+      <ReactFlow
+        nodes={syncedNodes}
+        edges={initialEdges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={onNodeClick}
+        onPaneClick={onPaneClick}
+        nodeTypes={nodeTypes}
+        fitView
+        fitViewOptions={{ padding: 0.12 }}
+        minZoom={0.08}
+        maxZoom={2}
+        attributionPosition={undefined}
+      >
+        <Background variant={BackgroundVariant.Dots} color="#1F1F1F" gap={28} size={1} />
+        <Controls showInteractive={false} />
+        <MiniMap
+          nodeColor={(n) => {
+            const d = n.data as K8sNodeData;
+            return d.riskScore >= 8 ? '#FF3B3B' : d.riskScore >= 5 ? '#FFA726' : '#3B82F6';
+          }}
+          maskColor="#0B0B0BCC"
+        />
+      </ReactFlow>
+    </div>
+  );
+}

package/ui/src/index.css

@@ -0,0 +1,48 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body, #root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: #0B0B0B;
+  color: #EAEAEA;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+}
+
+/* React Flow */
+.react-flow__attribution  { display: none !important; }
+.react-flow__background   { background: #0B0B0B; }
+.react-flow__minimap      { background: #121212 !important; border: 1px solid #1F1F1F; border-radius: 8px; }
+.react-flow__controls     { background: #121212 !important; border: 1px solid #1F1F1F; border-radius: 8px; }
+.react-flow__controls-button {
+  background: #121212 !important;
+  border-bottom: 1px solid #1F1F1F !important;
+  color: #888888 !important;
+  fill: #888888 !important;
+}
+.react-flow__controls-button:hover {
+  background: #1F1F1F !important;
+  fill: #EAEAEA !important;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar         { width: 4px; height: 4px; }
+::-webkit-scrollbar-track   { background: transparent; }
+::-webkit-scrollbar-thumb   { background: #1F1F1F; border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: #2a2a2a; }
+
+/* Pulse animation for skeleton loaders */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+
+/* Orange glow utility */
+.glow-orange {
+  box-shadow: 0 0 0 1px #FF6A0040, 0 0 12px #FF6A0020;
+}

package/ui/src/lib/api.ts

@@ -0,0 +1,161 @@
+// All paths are relative — Vite proxies /api/* → http://localhost:3001
+
+async function get<T>(path: string): Promise<T> {
+  const res = await fetch(path);
+  if (!res.ok) {
+    const text = await res.text().catch(() => res.statusText);
+    throw new Error(`GET ${path} → ${res.status}: ${text}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+async function post<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(path, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => res.statusText);
+    throw new Error(`POST ${path} → ${res.status}: ${text}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+// ─── Domain types (match actual backend responses) ───────────────────────────
+
+export interface GraphNode {
+  id: string;
+  type: string;
+  name: string;
+  namespace: string;
+  riskScore: number;
+  isEntryPoint: boolean;
+  isCrownJewel: boolean;
+  image: string | null;
+  cve: string[];
+}
+
+export interface GraphEdge {
+  from: string;
+  to: string;
+  type: string;
+  weight: number;
+  verbs: string[];
+  resources: string[];
+}
+
+export interface GraphResponse {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+  metadata: {
+    totalNodes: number;
+    totalEdges: number;
+    entryPoints: number;
+    crownJewels: number;
+    retrievedAt: string;
+  };
+}
+
+export interface Vulnerability {
+  nodeId: string;
+  type: string;
+  namespace: string;
+  riskScore: number;
+  isEntryPoint: boolean;
+  isCrownJewel: boolean;
+  cves: string[];
+  reason: string;
+  explanation: string;
+  connections: { out: number; in: number };
+}
+
+export interface VulnsResponse {
+  vulnerabilities: Vulnerability[];
+  summary: {
+    total: number;
+    critical: number;
+    high: number;
+    medium: number;
+    entryPoints: number;
+    crownJewels: number;
+    withCves: number;
+  };
+}
+
+export interface AttackPath {
+  nodes: string[];
+  riskScore: number;
+  entryPoint: string;
+  crownJewel: string;
+  hops: number;
+  totalWeight: number;
+  description: string;
+}
+
+export interface PathsResponse {
+  paths: AttackPath[];
+  summary: {
+    total: number;
+    critical: number;
+    uniqueEntryPoints: number;
+    uniqueCrownJewels: number;
+    avgHops: number;
+  };
+}
+
+export interface CriticalNodeResult {
+  nodeId: string;
+  name: string;
+  type: string;
+  namespace: string;
+  betweennessScore: number;
+  isEntryPoint: boolean;
+  isCrownJewel: boolean;
+  riskScore: number;
+}
+
+export interface CriticalResponse {
+  criticalNodes: CriticalNodeResult[];
+  pathElimination: {
+    nodeId: string;
+    totalPaths: number;
+    pathsEliminated: number;
+    pathsRemaining: number;
+    reductionPercent: number;
+    note: string;
+  } | null;
+}
+
+export interface SimulateResponse {
+  simulation: {
+    nodeId: string;
+    maxHops: number;
+    graphMutated: boolean;
+    durationMs: number;
+  };
+  results: {
+    baselinePathCount: number;
+    filteredPathCount: number;
+    pathsEliminated: number;
+    reductionPercent: number;
+    verdict: string;
+  };
+}
+
+export interface ReportResponse {
+  report: unknown;
+  formatted: string;
+}
+
+// ─── API surface ─────────────────────────────────────────────────────────────
+
+export const api = {
+  getGraph:           () => get<GraphResponse>('/api/graph'),
+  getVulnerabilities: () => get<VulnsResponse>('/api/vulnerabilities'),
+  getPaths:           () => get<PathsResponse>('/api/paths'),
+  getCriticalNode:    () => get<CriticalResponse>('/api/critical-node'),
+  getReport:          () => get<ReportResponse>('/api/report'),
+  simulate:           (nodeId: string) =>
+    post<SimulateResponse>('/api/simulate', { nodeId }),
+};

package/ui/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/ui/src/store/useAppStore.ts

@@ -0,0 +1,168 @@
+import { create } from 'zustand';
+import {
+  api,
+  GraphNode, GraphEdge,
+  Vulnerability, AttackPath,
+  CriticalResponse, SimulateResponse, ReportResponse,
+} from '../lib/api';
+
+type View = 'overview' | 'paths' | 'vulnerabilities' | 'critical' | 'report';
+
+interface AppState {
+  // ── Data ──────────────────────────────────────────────────────────────────
+  graphNodes:       GraphNode[];
+  graphEdges:       GraphEdge[];
+  graphMeta:        { totalNodes: number; totalEdges: number; entryPoints: number; crownJewels: number } | null;
+  vulnerabilities:  Vulnerability[];
+  vulnSummary:      { total: number; critical: number; high: number; medium: number } | null;
+  paths:            AttackPath[];
+  pathsSummary:     { total: number; critical: number } | null;
+  criticalData:     CriticalResponse | null;
+  simulateResult:   SimulateResponse | null;
+  reportData:       ReportResponse | null;
+
+  // ── UI state ──────────────────────────────────────────────────────────────
+  activeView:       View;
+  selectedNodeId:   string | null;
+  selectedPathIdx:  number | null;
+  loading:          Record<string, boolean>;
+  errors:           Record<string, string | null>;
+
+  // ── Actions ───────────────────────────────────────────────────────────────
+  setView:          (v: View) => void;
+  selectNode:       (id: string | null) => void;
+  selectPath:       (idx: number | null) => void;
+  clearSimulate:    () => void;
+
+  fetchGraph:           () => Promise<void>;
+  fetchVulnerabilities: () => Promise<void>;
+  fetchPaths:           () => Promise<void>;
+  fetchCritical:        () => Promise<void>;
+  fetchReport:          () => Promise<void>;
+  simulate:             (nodeId: string) => Promise<void>;
+}
+
+function setLoading(set: (fn: (s: AppState) => Partial<AppState>) => void, key: string, val: boolean) {
+  set((s) => ({ loading: { ...s.loading, [key]: val } }));
+}
+function setError(set: (fn: (s: AppState) => Partial<AppState>) => void, key: string, msg: string | null) {
+  set((s) => ({ errors: { ...s.errors, [key]: msg } }));
+}
+
+export const useAppStore = create<AppState>((set, get) => ({
+  // ── Initial state ─────────────────────────────────────────────────────────
+  graphNodes:      [],
+  graphEdges:      [],
+  graphMeta:       null,
+  vulnerabilities: [],
+  vulnSummary:     null,
+  paths:           [],
+  pathsSummary:    null,
+  criticalData:    null,
+  simulateResult:  null,
+  reportData:      null,
+
+  activeView:      'overview',
+  selectedNodeId:  null,
+  selectedPathIdx: null,
+  loading:         {},
+  errors:          {},
+
+  // ── UI actions ─────────────────────────────────────────────────────────────
+  setView: (v) => {
+    set({ activeView: v, selectedPathIdx: null });
+    // Lazy-fetch on first activation
+    const s = get();
+    if (v === 'paths'          && s.paths.length === 0)        s.fetchPaths();
+    if (v === 'vulnerabilities' && s.vulnerabilities.length === 0) s.fetchVulnerabilities();
+    if (v === 'critical'       && !s.criticalData)             s.fetchCritical();
+    if (v === 'report'         && !s.reportData)               s.fetchReport();
+  },
+
+  selectNode:    (id)  => set({ selectedNodeId: id, simulateResult: null }),
+  selectPath:    (idx) => set({ selectedPathIdx: idx }),
+  clearSimulate: ()    => set({ simulateResult: null }),
+
+  // ── Fetch actions ──────────────────────────────────────────────────────────
+  fetchGraph: async () => {
+    setLoading(set, 'graph', true);
+    setError(set, 'graph', null);
+    try {
+      const data = await api.getGraph();
+      set({
+        graphNodes: data.nodes,
+        graphEdges: data.edges,
+        graphMeta:  data.metadata,
+      });
+    } catch (e) {
+      setError(set, 'graph', (e as Error).message);
+    } finally {
+      setLoading(set, 'graph', false);
+    }
+  },
+
+  fetchVulnerabilities: async () => {
+    setLoading(set, 'vulns', true);
+    setError(set, 'vulns', null);
+    try {
+      const data = await api.getVulnerabilities();
+      set({ vulnerabilities: data.vulnerabilities, vulnSummary: data.summary });
+    } catch (e) {
+      setError(set, 'vulns', (e as Error).message);
+    } finally {
+      setLoading(set, 'vulns', false);
+    }
+  },
+
+  fetchPaths: async () => {
+    setLoading(set, 'paths', true);
+    setError(set, 'paths', null);
+    try {
+      const data = await api.getPaths();
+      set({ paths: data.paths, pathsSummary: data.summary });
+    } catch (e) {
+      setError(set, 'paths', (e as Error).message);
+    } finally {
+      setLoading(set, 'paths', false);
+    }
+  },
+
+  fetchCritical: async () => {
+    setLoading(set, 'critical', true);
+    setError(set, 'critical', null);
+    try {
+      const data = await api.getCriticalNode();
+      set({ criticalData: data });
+    } catch (e) {
+      setError(set, 'critical', (e as Error).message);
+    } finally {
+      setLoading(set, 'critical', false);
+    }
+  },
+
+  fetchReport: async () => {
+    setLoading(set, 'report', true);
+    setError(set, 'report', null);
+    try {
+      const data = await api.getReport();
+      set({ reportData: data });
+    } catch (e) {
+      setError(set, 'report', (e as Error).message);
+    } finally {
+      setLoading(set, 'report', false);
+    }
+  },
+
+  simulate: async (nodeId: string) => {
+    setLoading(set, 'simulate', true);
+    setError(set, 'simulate', null);
+    try {
+      const data = await api.simulate(nodeId);
+      set({ simulateResult: data });
+    } catch (e) {
+      setError(set, 'simulate', (e as Error).message);
+    } finally {
+      setLoading(set, 'simulate', false);
+    }
+  },
+}));