feat(phase-33): final polish V3 - navigation, performance, and documentation (T-238 to T-240)
This commit is contained in:
@@ -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>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
24
frontend/src/hooks/useDebounce.ts
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user