kitos/Aegis
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(phase-33): final polish V3 - navigation, performance, and documentation (T-238 to T-240)

Browse Source
This commit is contained in:
Kitos
2026-02-10 09:21:35 +01:00
parent 35983de67e
commit 14f8485f06
14 changed files with 1446 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
frontend/src/App.tsx
View File

@@ -1,28 +1,34 @@
import React, { Suspense } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import LoginPage from "./pages/LoginPage";
import DashboardPage from "./pages/DashboardPage";
import TechniquesPage from "./pages/TechniquesPage";
import MatrixPage from "./pages/MatrixPage";
import ExecutiveDashboardPage from "./pages/ExecutiveDashboardPage";
import CompliancePage from "./pages/CompliancePage";
import TechniqueDetailPage from "./pages/TechniqueDetailPage";
import TestsPage from "./pages/TestsPage";
import TestCreatePage from "./pages/TestCreatePage";
import TestDetailPage from "./pages/TestDetailPage";
import TestCatalogPage from "./pages/TestCatalogPage";
import ReportsPage from "./pages/ReportsPage";
import SystemPage from "./pages/SystemPage";
import UsersPage from "./pages/UsersPage";
import AuditLogPage from "./pages/AuditLogPage";
import DataSourcesPage from "./pages/DataSourcesPage";
import ThreatActorsPage from "./pages/ThreatActorsPage";
import ThreatActorDetailPage from "./pages/ThreatActorDetailPage";
import CampaignsPage from "./pages/CampaignsPage";
import CampaignDetailPage from "./pages/CampaignDetailPage";
import ComparisonPage from "./pages/ComparisonPage";
import LoadingSpinner from "./components/LoadingSpinner";
import Layout from "./components/Layout";
import ProtectedRoute from "./components/ProtectedRoute";
/* ── Eagerly loaded (core pages) ──────────────────────────────────── */
import LoginPage from "./pages/LoginPage";
import DashboardPage from "./pages/DashboardPage";
/* ── Lazy loaded (V1-V3 pages) ────────────────────────────────────── */
const TechniquesPage = React.lazy(() => import("./pages/TechniquesPage"));
const MatrixPage = React.lazy(() => import("./pages/MatrixPage"));
const ExecutiveDashboardPage = React.lazy(() => import("./pages/ExecutiveDashboardPage"));
const CompliancePage = React.lazy(() => import("./pages/CompliancePage"));
const TechniqueDetailPage = React.lazy(() => import("./pages/TechniqueDetailPage"));
const TestsPage = React.lazy(() => import("./pages/TestsPage"));
const TestCreatePage = React.lazy(() => import("./pages/TestCreatePage"));
const TestDetailPage = React.lazy(() => import("./pages/TestDetailPage"));
const TestCatalogPage = React.lazy(() => import("./pages/TestCatalogPage"));
const ReportsPage = React.lazy(() => import("./pages/ReportsPage"));
const SystemPage = React.lazy(() => import("./pages/SystemPage"));
const UsersPage = React.lazy(() => import("./pages/UsersPage"));
const AuditLogPage = React.lazy(() => import("./pages/AuditLogPage"));
const DataSourcesPage = React.lazy(() => import("./pages/DataSourcesPage"));
const ThreatActorsPage = React.lazy(() => import("./pages/ThreatActorsPage"));
const ThreatActorDetailPage = React.lazy(() => import("./pages/ThreatActorDetailPage"));
const CampaignsPage = React.lazy(() => import("./pages/CampaignsPage"));
const CampaignDetailPage = React.lazy(() => import("./pages/CampaignDetailPage"));
const ComparisonPage = React.lazy(() => import("./pages/ComparisonPage"));
export default function App() {
return (
<Routes>
@@ -37,35 +43,61 @@ export default function App() {
</ProtectedRoute>
}
>
{/* ── Core ─────────────────────────────────────────────── */}
<Route path="/dashboard" element={<DashboardPage />} />
<Route path="/techniques" element={<TechniquesPage />} />
<Route path="/matrix" element={<MatrixPage />} />
<Route path="/techniques" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><TechniquesPage /></Suspense>} />
<Route path="/techniques/:mitreId" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><TechniqueDetailPage /></Suspense>} />
<Route path="/matrix" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><MatrixPage /></Suspense>} />
{/* ── Executive Dashboard (leads + admin) ──────────────── */}
<Route
path="/executive-dashboard"
element={
<ProtectedRoute roles={["admin", "red_lead", "blue_lead"]}>
<ExecutiveDashboardPage />
<Suspense fallback={<LoadingSpinner text="Loading…" />}><ExecutiveDashboardPage /></Suspense>
</ProtectedRoute>
}
/>
<Route path="/techniques/:mitreId" element={<TechniqueDetailPage />} />
<Route path="/tests" element={<TestsPage />} />
<Route path="/tests/new" element={<TestCreatePage />} />
<Route path="/tests/:testId" element={<TestDetailPage />} />
<Route path="/test-catalog" element={<TestCatalogPage />} />
<Route path="/test-catalog/:templateId/use" element={<TestCatalogPage />} />
<Route path="/reports" element={<ReportsPage />} />
<Route path="/threat-actors" element={<ThreatActorsPage />} />
<Route path="/threat-actors/:actorId" element={<ThreatActorDetailPage />} />
<Route path="/campaigns" element={<CampaignsPage />} />
<Route path="/campaigns/:campaignId" element={<CampaignDetailPage />} />
<Route path="/comparison" element={<ComparisonPage />} />
<Route path="/compliance" element={<CompliancePage />} />
{/* ── Tests ────────────────────────────────────────────── */}
<Route path="/tests" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><TestsPage /></Suspense>} />
<Route path="/tests/new" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><TestCreatePage /></Suspense>} />
<Route path="/tests/:testId" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><TestDetailPage /></Suspense>} />
<Route path="/test-catalog" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><TestCatalogPage /></Suspense>} />
<Route path="/test-catalog/:templateId/use" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><TestCatalogPage /></Suspense>} />
{/* ── Campaigns ────────────────────────────────────────── */}
<Route path="/campaigns" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><CampaignsPage /></Suspense>} />
<Route path="/campaigns/:campaignId" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><CampaignDetailPage /></Suspense>} />
{/* ── Threat Actors ────────────────────────────────────── */}
<Route path="/threat-actors" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><ThreatActorsPage /></Suspense>} />
<Route path="/threat-actors/:actorId" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><ThreatActorDetailPage /></Suspense>} />
{/* ── Compliance ───────────────────────────────────────── */}
<Route path="/compliance" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><CompliancePage /></Suspense>} />
{/* ── Comparison (leads + admin) ───────────────────────── */}
<Route
path="/comparison"
element={
<ProtectedRoute roles={["admin", "red_lead", "blue_lead"]}>
<Suspense fallback={<LoadingSpinner text="Loading…" />}><ComparisonPage /></Suspense>
</ProtectedRoute>
}
/>
{/* ── Reports ──────────────────────────────────────────── */}
<Route path="/reports" element={<Suspense fallback={<LoadingSpinner text="Loading…" />}><ReportsPage /></Suspense>} />
{/* ── System (admin only) ──────────────────────────────── */}
<Route
path="/system"
element={
<ProtectedRoute roles={["admin"]}>
<SystemPage />
<Suspense fallback={<LoadingSpinner text="Loading…" />}><SystemPage /></Suspense>
</ProtectedRoute>
}
/>
@@ -73,7 +105,7 @@ export default function App() {
path="/users"
element={
<ProtectedRoute roles={["admin"]}>
<UsersPage />
<Suspense fallback={<LoadingSpinner text="Loading…" />}><UsersPage /></Suspense>
</ProtectedRoute>
}
/>
@@ -81,7 +113,7 @@ export default function App() {
path="/audit"
element={
<ProtectedRoute roles={["admin"]}>
<AuditLogPage />
<Suspense fallback={<LoadingSpinner text="Loading…" />}><AuditLogPage /></Suspense>
</ProtectedRoute>
}
/>
@@ -89,7 +121,7 @@ export default function App() {
path="/data-sources"
element={
<ProtectedRoute roles={["admin"]}>
<DataSourcesPage />
<Suspense fallback={<LoadingSpinner text="Loading…" />}><DataSourcesPage /></Suspense>
</ProtectedRoute>
}
/>

42
frontend/src/components/Sidebar.tsx
View File

@@ -19,6 +19,7 @@ import {
Gauge,
ShieldCheck,
GitCompareArrows,
ScrollText,
} from "lucide-react";
import { useAuth } from "../context/AuthContext";
@@ -26,13 +27,15 @@ interface NavItem {
to: string;
label: string;
icon: React.FC<{ className?: string }>;
/** Roles allowed to see this item. undefined = everyone. */
roles?: string[];
children?: NavItem[];
}
const mainLinks: NavItem[] = [
{ to: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
{ to: "/techniques", label: "ATT&CK Matrix", icon: Shield },
{ to: "/matrix", label: "Advanced Heatmap", icon: Grid3X3 },
{ to: "/executive-dashboard", label: "Executive Dashboard", icon: Gauge, roles: ["admin", "red_lead", "blue_lead"] },
{ to: "/matrix", label: "ATT&CK Matrix", icon: Grid3X3 },
{
to: "/tests",
label: "Tests",
@@ -43,19 +46,18 @@ const mainLinks: NavItem[] = [
{ to: "/test-catalog", label: "Test Catalog", icon: BookOpen },
],
},
{ to: "/executive-dashboard", label: "Executive Dashboard", icon: Gauge },
{ to: "/reports", label: "Reports", icon: BarChart3 },
{ to: "/threat-actors", label: "Threat Actors", icon: Crosshair },
{ to: "/campaigns", label: "Campaigns", icon: Zap },
{ to: "/comparison", label: "Comparison", icon: GitCompareArrows },
{ to: "/threat-actors", label: "Threat Actors", icon: Crosshair },
{ to: "/compliance", label: "Compliance", icon: ShieldCheck },
{ to: "/comparison", label: "Comparison", icon: GitCompareArrows, roles: ["admin", "red_lead", "blue_lead"] },
{ to: "/reports", label: "Reports", icon: BarChart3 },
];
const adminLinks: NavItem[] = [
const systemLinks: NavItem[] = [
{ to: "/data-sources", label: "Data Sources", icon: Database },
{ to: "/system", label: "MITRE Sync", icon: ScrollText },
{ to: "/users", label: "Users", icon: Users },
{ to: "/audit", label: "Audit Log", icon: FileText },
{ to: "/data-sources", label: "Data Sources", icon: Database },
{ to: "/system", label: "System", icon: Settings },
];
function SidebarLink({ item }: { item: NavItem }) {
@@ -117,7 +119,15 @@ function SidebarLink({ item }: { item: NavItem }) {
export default function Sidebar() {
const { user } = useAuth();
const isAdmin = user?.role === "admin";
const role = user?.role ?? "";
const isAdmin = role === "admin";
/** Returns true when the current user is allowed to see `item`. */
const canSee = (item: NavItem) => {
if (!item.roles) return true; // no restriction
if (isAdmin) return true; // admin sees everything
return item.roles.includes(role);
};
return (
<aside className="flex h-screen w-60 flex-col border-r border-gray-800 bg-gray-900">
@@ -130,19 +140,19 @@ export default function Sidebar() {
</div>
{/* Main nav */}
<nav className="flex-1 space-y-1 px-3 py-4">
{mainLinks.map((item) => (
<nav className="flex-1 space-y-1 overflow-y-auto px-3 py-4">
{mainLinks.filter(canSee).map((item) => (
<SidebarLink key={item.to + item.label} item={item} />
))}
{/* Admin section */}
{/* System / Administration section — admin only */}
{isAdmin && (
<>
<div className="my-3 border-t border-gray-800" />
<p className="mb-2 px-3 text-[10px] font-semibold uppercase tracking-widest text-gray-600">
Administration
System
</p>
{adminLinks.map((item) => (
{systemLinks.map((item) => (
<SidebarLink key={item.to} item={item} />
))}
</>
@@ -152,7 +162,7 @@ export default function Sidebar() {
{/* Footer */}
<div className="border-t border-gray-800 px-5 py-4">
<p className="truncate text-xs text-gray-500">
{user?.role ?? "—"}
{user?.username ?? "—"} · {role || "—"}
</p>
</div>
</aside>

40
frontend/src/components/heatmap/HeatmapCell.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from "react";
import React, { useState, useMemo, useCallback } from "react";
import type { HeatmapTechnique } from "../../api/heatmap";
import HeatmapTooltip from "./HeatmapTooltip";
@@ -8,7 +8,12 @@ interface HeatmapCellProps {
onClick: (techniqueId: string) => void;
}
export default function HeatmapCell({ technique, size, onClick }: HeatmapCellProps) {
/**
* Memoized heatmap cell — this component renders 3000+ times in the
* full ATT&CK matrix, so React.memo prevents unnecessary re-renders
* when only sibling cells change.
*/
const HeatmapCell = React.memo(function HeatmapCell({ technique, size, onClick }: HeatmapCellProps) {
const [showTooltip, setShowTooltip] = useState(false);
const sizeClasses = {
@@ -20,21 +25,28 @@ export default function HeatmapCell({ technique, size, onClick }: HeatmapCellPro
const bgColor = technique.enabled ? technique.color : "transparent";
const isDisabled = !technique.enabled;
// Determine text color based on background brightness
const getTextColor = (hex: string): string => {
// Memoize text color (derived from background hex)
const textColor = useMemo(() => {
const hex = bgColor;
if (!hex || hex === "transparent" || hex === "") return "text-gray-600";
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness > 128 ? "text-gray-900" : "text-white";
};
}, [bgColor]);
// Status indicators
const hasTests = technique.metadata.find((m) => m.name === "tests_count");
const testsCount = hasTests ? parseInt(hasTests.value, 10) : 0;
const reviewRequired = technique.comment?.toLowerCase().includes("review");
const isValidated = technique.score >= 100;
// Status indicators — memoized
const { testsCount, reviewRequired, isValidated } = useMemo(() => {
const hasTests = technique.metadata.find((m) => m.name === "tests_count");
return {
testsCount: hasTests ? parseInt(hasTests.value, 10) : 0,
reviewRequired: technique.comment?.toLowerCase().includes("review") ?? false,
isValidated: technique.score >= 100,
};
}, [technique.metadata, technique.comment, technique.score]);
const handleClick = useCallback(() => onClick(technique.techniqueID), [onClick, technique.techniqueID]);
return (
<div
@@ -43,7 +55,7 @@ export default function HeatmapCell({ technique, size, onClick }: HeatmapCellPro
onMouseLeave={() => setShowTooltip(false)}
>
<button
onClick={() => onClick(technique.techniqueID)}
onClick={handleClick}
disabled={isDisabled}
className={`
w-full rounded border transition-all duration-150
@@ -59,7 +71,7 @@ export default function HeatmapCell({ technique, size, onClick }: HeatmapCellPro
backgroundColor: isDisabled ? undefined : bgColor,
}}
>
<span className={`truncate font-mono font-medium leading-tight ${getTextColor(bgColor)}`}>
<span className={`truncate font-mono font-medium leading-tight ${textColor}`}>
{technique.techniqueID}
</span>
{size !== "compact" && !isDisabled && (
@@ -78,4 +90,6 @@ export default function HeatmapCell({ technique, size, onClick }: HeatmapCellPro
)}
</div>
);
}
});
export default HeatmapCell;

24
frontend/src/hooks/useDebounce.ts Normal file
View File

@@ -0,0 +1,24 @@
import { useState, useEffect } from "react";
/**
* Debounce a value — useful for search inputs that trigger API calls.
*
* @param value The raw value to debounce.
* @param delay Delay in milliseconds (default 300ms).
* @returns The debounced value that updates only after `delay` ms of inactivity.
*
* @example
* const [search, setSearch] = useState("");
* const debouncedSearch = useDebounce(search, 300);
* // use `debouncedSearch` in a TanStack Query key
*/
export function useDebounce<T>(value: T, delay = 300): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}