feat(phase-23): add Threat Actor profiles with MITRE CTI import, API, heatmap and gap analysis (T-208 to T-212)
This commit is contained in:
246
frontend/src/pages/ThreatActorsPage.tsx
Normal file
246
frontend/src/pages/ThreatActorsPage.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
Search,
|
||||
Users,
|
||||
Shield,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Globe,
|
||||
Target,
|
||||
Crosshair,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
getThreatActors,
|
||||
type ThreatActorSummary,
|
||||
type ListThreatActorsParams,
|
||||
} from "../api/threat-actors";
|
||||
|
||||
/** Coverage colour based on percentage. */
|
||||
function coverageColor(pct: number) {
|
||||
if (pct >= 80) return "text-green-400";
|
||||
if (pct >= 50) return "text-yellow-400";
|
||||
if (pct >= 20) return "text-orange-400";
|
||||
return "text-red-400";
|
||||
}
|
||||
|
||||
function coverageBg(pct: number) {
|
||||
if (pct >= 80) return "bg-green-500";
|
||||
if (pct >= 50) return "bg-yellow-500";
|
||||
if (pct >= 20) return "bg-orange-500";
|
||||
return "bg-red-500";
|
||||
}
|
||||
|
||||
/** Motivation badge colour. */
|
||||
function motivationColor(m: string | null) {
|
||||
switch (m?.toLowerCase()) {
|
||||
case "espionage":
|
||||
return "border-purple-500/30 bg-purple-900/50 text-purple-400";
|
||||
case "financial":
|
||||
return "border-yellow-500/30 bg-yellow-900/50 text-yellow-400";
|
||||
case "destruction":
|
||||
return "border-red-500/30 bg-red-900/50 text-red-400";
|
||||
case "hacktivism":
|
||||
return "border-cyan-500/30 bg-cyan-900/50 text-cyan-400";
|
||||
default:
|
||||
return "border-gray-600/30 bg-gray-800/50 text-gray-400";
|
||||
}
|
||||
}
|
||||
|
||||
export default function ThreatActorsPage() {
|
||||
const navigate = useNavigate();
|
||||
const [search, setSearch] = useState("");
|
||||
const [motivation, setMotivation] = useState("");
|
||||
const [page, setPage] = useState(0);
|
||||
const limit = 24;
|
||||
|
||||
const params: ListThreatActorsParams = {
|
||||
offset: page * limit,
|
||||
limit,
|
||||
...(search ? { search } : {}),
|
||||
...(motivation ? { motivation } : {}),
|
||||
};
|
||||
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ["threat-actors", params],
|
||||
queryFn: () => getThreatActors(params),
|
||||
});
|
||||
|
||||
const totalPages = data ? Math.ceil(data.total / limit) : 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white flex items-center gap-2">
|
||||
<Users className="h-7 w-7 text-purple-400" />
|
||||
Threat Actors
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
APT groups and threat actor profiles from MITRE ATT&CK with coverage analysis
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{/* Search */}
|
||||
<div className="relative flex-1 min-w-[200px] max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search actors, aliases..."
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(0); }}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 py-2 pl-10 pr-4 text-sm text-gray-300 placeholder-gray-500 focus:border-cyan-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Motivation filter */}
|
||||
<select
|
||||
value={motivation}
|
||||
onChange={(e) => { setMotivation(e.target.value); setPage(0); }}
|
||||
className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 focus:border-cyan-500 focus:outline-none"
|
||||
>
|
||||
<option value="">All Motivations</option>
|
||||
<option value="espionage">Espionage</option>
|
||||
<option value="financial">Financial</option>
|
||||
<option value="destruction">Destruction</option>
|
||||
<option value="hacktivism">Hacktivism</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Loading */}
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="rounded-xl border border-red-500/30 bg-red-900/20 p-6 text-center">
|
||||
<AlertCircle className="mx-auto h-8 w-8 text-red-400" />
|
||||
<p className="mt-2 text-sm text-red-400">
|
||||
Failed to load threat actors: {(error as Error)?.message}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Grid */}
|
||||
{data && data.items.length > 0 && (
|
||||
<>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{data.items.map((actor: ThreatActorSummary) => (
|
||||
<button
|
||||
key={actor.id}
|
||||
onClick={() => navigate(`/threat-actors/${actor.id}`)}
|
||||
className="group rounded-xl border border-gray-800 bg-gray-900 p-5 text-left transition-all hover:border-purple-500/40 hover:bg-gray-900/80"
|
||||
>
|
||||
{/* Name + ID */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0">
|
||||
<h3 className="truncate text-base font-semibold text-gray-200 group-hover:text-white">
|
||||
{actor.name}
|
||||
</h3>
|
||||
{actor.mitre_id && (
|
||||
<span className="text-xs font-mono text-purple-400">{actor.mitre_id}</span>
|
||||
)}
|
||||
</div>
|
||||
<Crosshair className="h-5 w-5 shrink-0 text-gray-600 group-hover:text-purple-400 transition-colors" />
|
||||
</div>
|
||||
|
||||
{/* Country + Motivation */}
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
{actor.country && (
|
||||
<span className="inline-flex items-center gap-1 rounded-full border border-gray-700 bg-gray-800 px-2 py-0.5 text-[11px] text-gray-400">
|
||||
<Globe className="h-3 w-3" />
|
||||
{actor.country}
|
||||
</span>
|
||||
)}
|
||||
{actor.motivation && (
|
||||
<span className={`inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium ${motivationColor(actor.motivation)}`}>
|
||||
{actor.motivation}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sectors */}
|
||||
{actor.target_sectors && actor.target_sectors.length > 0 && (
|
||||
<div className="mt-2 flex items-center gap-1.5">
|
||||
<Target className="h-3 w-3 text-gray-600 shrink-0" />
|
||||
<span className="truncate text-[11px] text-gray-500">
|
||||
{actor.target_sectors.slice(0, 3).join(", ")}
|
||||
{actor.target_sectors.length > 3 && ` +${actor.target_sectors.length - 3}`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats */}
|
||||
<div className="mt-4 flex items-center justify-between border-t border-gray-800 pt-3">
|
||||
<div className="flex items-center gap-1.5 text-xs text-gray-400">
|
||||
<Shield className="h-3.5 w-3.5" />
|
||||
{actor.technique_count} techniques
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-1.5 w-16 overflow-hidden rounded-full bg-gray-800">
|
||||
<div
|
||||
className={`h-full rounded-full ${coverageBg(actor.coverage_pct)}`}
|
||||
style={{ width: `${Math.min(actor.coverage_pct, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className={`text-xs font-medium ${coverageColor(actor.coverage_pct)}`}>
|
||||
{actor.coverage_pct}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-400">
|
||||
Showing {page * limit + 1}–{Math.min((page + 1) * limit, data.total)} of{" "}
|
||||
{data.total}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setPage(Math.max(0, page - 1))}
|
||||
disabled={page === 0}
|
||||
className="rounded-lg border border-gray-700 bg-gray-800 p-2 text-gray-400 hover:text-white disabled:opacity-40"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<span className="text-sm text-gray-400">
|
||||
Page {page + 1} of {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPage(Math.min(totalPages - 1, page + 1))}
|
||||
disabled={page >= totalPages - 1}
|
||||
className="rounded-lg border border-gray-700 bg-gray-800 p-2 text-gray-400 hover:text-white disabled:opacity-40"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Empty */}
|
||||
{data && data.items.length === 0 && (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-12 text-center">
|
||||
<Users className="mx-auto h-12 w-12 text-gray-600" />
|
||||
<h3 className="mt-4 text-lg font-medium text-gray-300">No Threat Actors Found</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Import threat actors from MITRE CTI via the Data Sources panel.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user