572 lines
23 KiB
TypeScript
572 lines
23 KiB
TypeScript
import { useParams, useNavigate } from "react-router-dom";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import {
|
|
Loader2,
|
|
AlertCircle,
|
|
ArrowLeft,
|
|
Globe,
|
|
Target,
|
|
Shield,
|
|
ExternalLink,
|
|
BookOpen,
|
|
AlertTriangle,
|
|
CheckCircle,
|
|
XCircle,
|
|
Clock,
|
|
Crosshair,
|
|
FlaskConical,
|
|
} from "lucide-react";
|
|
import {
|
|
getThreatActor,
|
|
getThreatActorCoverage,
|
|
getThreatActorGaps,
|
|
type ThreatActorTechnique,
|
|
type GapItem,
|
|
} from "../api/threat-actors";
|
|
|
|
// ── MITRE ATT&CK Tactics in kill chain order ──────────────────────
|
|
const TACTICS_ORDER = [
|
|
"reconnaissance",
|
|
"resource-development",
|
|
"initial-access",
|
|
"execution",
|
|
"persistence",
|
|
"privilege-escalation",
|
|
"defense-evasion",
|
|
"credential-access",
|
|
"discovery",
|
|
"lateral-movement",
|
|
"collection",
|
|
"command-and-control",
|
|
"exfiltration",
|
|
"impact",
|
|
];
|
|
|
|
/** Status → cell colour. */
|
|
function statusCellColor(status: string | null) {
|
|
switch (status) {
|
|
case "validated":
|
|
return "bg-green-500/80 border-green-400/40";
|
|
case "partial":
|
|
return "bg-yellow-500/80 border-yellow-400/40";
|
|
case "in_progress":
|
|
return "bg-blue-500/60 border-blue-400/40";
|
|
case "not_covered":
|
|
return "bg-red-500/70 border-red-400/40";
|
|
case "not_evaluated":
|
|
default:
|
|
return "bg-gray-700/50 border-gray-600/40";
|
|
}
|
|
}
|
|
|
|
function statusLabel(status: string | null) {
|
|
switch (status) {
|
|
case "validated":
|
|
return "Validated";
|
|
case "partial":
|
|
return "Partial";
|
|
case "in_progress":
|
|
return "In Progress";
|
|
case "not_covered":
|
|
return "Not Covered";
|
|
case "review_required":
|
|
return "Review Required";
|
|
case "not_evaluated":
|
|
default:
|
|
return "Not Evaluated";
|
|
}
|
|
}
|
|
|
|
function statusIcon(status: string | null) {
|
|
switch (status) {
|
|
case "validated":
|
|
return <CheckCircle className="h-3.5 w-3.5 text-green-400" />;
|
|
case "partial":
|
|
return <AlertTriangle className="h-3.5 w-3.5 text-yellow-400" />;
|
|
case "in_progress":
|
|
return <Clock className="h-3.5 w-3.5 text-blue-400" />;
|
|
case "not_covered":
|
|
return <XCircle className="h-3.5 w-3.5 text-red-400" />;
|
|
default:
|
|
return <Shield className="h-3.5 w-3.5 text-gray-500" />;
|
|
}
|
|
}
|
|
|
|
export default function ThreatActorDetailPage() {
|
|
const { actorId } = useParams();
|
|
const navigate = useNavigate();
|
|
|
|
// ── Queries ─────────────────────────────────────────────────────
|
|
const { data: actor, isLoading, error } = useQuery({
|
|
queryKey: ["threat-actor", actorId],
|
|
queryFn: () => getThreatActor(actorId!),
|
|
enabled: !!actorId,
|
|
});
|
|
|
|
const { data: coverage } = useQuery({
|
|
queryKey: ["threat-actor-coverage", actorId],
|
|
queryFn: () => getThreatActorCoverage(actorId!),
|
|
enabled: !!actorId,
|
|
});
|
|
|
|
const { data: gaps } = useQuery({
|
|
queryKey: ["threat-actor-gaps", actorId],
|
|
queryFn: () => getThreatActorGaps(actorId!),
|
|
enabled: !!actorId,
|
|
});
|
|
|
|
// ── Loading / Error ─────────────────────────────────────────────
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-24">
|
|
<Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !actor) {
|
|
return (
|
|
<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">
|
|
{error ? (error as Error)?.message : "Threat actor not found"}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Organise techniques by tactic for heatmap ───────────────────
|
|
const techniquesByTactic: Record<string, ThreatActorTechnique[]> = {};
|
|
for (const tech of actor.techniques) {
|
|
const tactic = tech.tactic || "unknown";
|
|
// A technique's tactic field may be comma-separated
|
|
const tactics = tactic.split(",").map((t) => t.trim().toLowerCase().replace(/\s+/g, "-"));
|
|
for (const t of tactics) {
|
|
if (!techniquesByTactic[t]) techniquesByTactic[t] = [];
|
|
techniquesByTactic[t].push(tech);
|
|
}
|
|
}
|
|
|
|
// Sort tactics by kill chain order
|
|
const orderedTactics = TACTICS_ORDER.filter((t) => techniquesByTactic[t]);
|
|
const unknownTactics = Object.keys(techniquesByTactic).filter(
|
|
(t) => !TACTICS_ORDER.includes(t)
|
|
);
|
|
const allTactics = [...orderedTactics, ...unknownTactics];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Back Button */}
|
|
<button
|
|
onClick={() => navigate("/threat-actors")}
|
|
className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-white transition-colors"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Back to Threat Actors
|
|
</button>
|
|
|
|
{/* ── SECTION 1: Header ──────────────────────────────────────── */}
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<div className="flex items-center gap-3">
|
|
<Crosshair className="h-7 w-7 text-purple-400" />
|
|
<h1 className="text-2xl font-bold text-white">{actor.name}</h1>
|
|
{actor.mitre_id && (
|
|
<span className="rounded-full border border-purple-500/30 bg-purple-900/50 px-2.5 py-0.5 text-xs font-mono text-purple-400">
|
|
{actor.mitre_id}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Aliases */}
|
|
{actor.aliases && actor.aliases.length > 0 && (
|
|
<div className="mt-2 flex flex-wrap gap-1.5">
|
|
{actor.aliases.map((alias, i) => (
|
|
<span
|
|
key={i}
|
|
className="rounded-full border border-gray-700 bg-gray-800 px-2 py-0.5 text-xs text-gray-400"
|
|
>
|
|
{alias}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* MITRE link */}
|
|
{actor.mitre_url && (
|
|
<a
|
|
href={actor.mitre_url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-400 hover:text-white transition-colors"
|
|
>
|
|
<ExternalLink className="h-3.5 w-3.5" />
|
|
MITRE ATT&CK
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
{/* Meta badges */}
|
|
<div className="mt-4 flex flex-wrap items-center gap-3">
|
|
{actor.country && (
|
|
<span className="inline-flex items-center gap-1.5 rounded-full border border-gray-700 bg-gray-800 px-3 py-1 text-xs text-gray-300">
|
|
<Globe className="h-3.5 w-3.5 text-gray-500" />
|
|
{actor.country}
|
|
</span>
|
|
)}
|
|
{actor.motivation && (
|
|
<span className="inline-flex items-center gap-1.5 rounded-full border border-purple-500/30 bg-purple-900/50 px-3 py-1 text-xs text-purple-400">
|
|
<Target className="h-3.5 w-3.5" />
|
|
{actor.motivation}
|
|
</span>
|
|
)}
|
|
{actor.sophistication && (
|
|
<span className="inline-flex items-center gap-1.5 rounded-full border border-cyan-500/30 bg-cyan-900/50 px-3 py-1 text-xs text-cyan-400">
|
|
{actor.sophistication}
|
|
</span>
|
|
)}
|
|
{actor.first_seen && (
|
|
<span className="text-xs text-gray-500">
|
|
First seen: {actor.first_seen}
|
|
</span>
|
|
)}
|
|
{actor.last_seen && (
|
|
<span className="text-xs text-gray-500">
|
|
Last seen: {actor.last_seen}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Target sectors */}
|
|
{actor.target_sectors && actor.target_sectors.length > 0 && (
|
|
<div className="mt-3 flex items-center gap-2">
|
|
<Target className="h-4 w-4 text-gray-600 shrink-0" />
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{actor.target_sectors.map((s, i) => (
|
|
<span
|
|
key={i}
|
|
className="rounded-full border border-gray-700 bg-gray-800 px-2 py-0.5 text-[11px] text-gray-400"
|
|
>
|
|
{s}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── SECTION 2: Description ─────────────────────────────────── */}
|
|
{actor.description && (
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
|
Description
|
|
</h2>
|
|
<p className="text-sm leading-relaxed text-gray-300 whitespace-pre-line">
|
|
{actor.description}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── SECTION 3: Coverage Overview ───────────────────────────── */}
|
|
{coverage && (
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
|
Coverage Overview
|
|
</h2>
|
|
<div className="grid gap-4 sm:grid-cols-4">
|
|
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
|
|
<p className="text-3xl font-bold text-white">{coverage.total_techniques}</p>
|
|
<p className="text-xs text-gray-400">Total Techniques</p>
|
|
</div>
|
|
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
|
|
<p className="text-3xl font-bold text-green-400">{coverage.covered}</p>
|
|
<p className="text-xs text-gray-400">Covered</p>
|
|
</div>
|
|
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
|
|
<p className="text-3xl font-bold text-red-400">
|
|
{coverage.total_techniques - coverage.covered}
|
|
</p>
|
|
<p className="text-xs text-gray-400">Gaps</p>
|
|
</div>
|
|
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
|
|
<p className={`text-3xl font-bold ${
|
|
coverage.coverage_pct >= 80 ? "text-green-400" :
|
|
coverage.coverage_pct >= 50 ? "text-yellow-400" : "text-red-400"
|
|
}`}>
|
|
{coverage.coverage_pct}%
|
|
</p>
|
|
<p className="text-xs text-gray-400">Coverage</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Breakdown bar */}
|
|
{coverage.total_techniques > 0 && (
|
|
<div className="mt-4">
|
|
<div className="flex h-3 overflow-hidden rounded-full bg-gray-800">
|
|
{coverage.breakdown.validated && (
|
|
<div
|
|
className="bg-green-500 transition-all"
|
|
style={{
|
|
width: `${(coverage.breakdown.validated / coverage.total_techniques) * 100}%`,
|
|
}}
|
|
title={`Validated: ${coverage.breakdown.validated}`}
|
|
/>
|
|
)}
|
|
{coverage.breakdown.partial && (
|
|
<div
|
|
className="bg-yellow-500 transition-all"
|
|
style={{
|
|
width: `${(coverage.breakdown.partial / coverage.total_techniques) * 100}%`,
|
|
}}
|
|
title={`Partial: ${coverage.breakdown.partial}`}
|
|
/>
|
|
)}
|
|
{coverage.breakdown.in_progress && (
|
|
<div
|
|
className="bg-blue-500 transition-all"
|
|
style={{
|
|
width: `${(coverage.breakdown.in_progress / coverage.total_techniques) * 100}%`,
|
|
}}
|
|
title={`In Progress: ${coverage.breakdown.in_progress}`}
|
|
/>
|
|
)}
|
|
{coverage.breakdown.not_covered && (
|
|
<div
|
|
className="bg-red-500/70 transition-all"
|
|
style={{
|
|
width: `${(coverage.breakdown.not_covered / coverage.total_techniques) * 100}%`,
|
|
}}
|
|
title={`Not Covered: ${coverage.breakdown.not_covered}`}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap gap-4 text-xs text-gray-400">
|
|
{Object.entries(coverage.breakdown).map(([status, count]) => (
|
|
<span key={status} className="flex items-center gap-1.5">
|
|
{statusIcon(status)}
|
|
{statusLabel(status)}: {count}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── SECTION 4: Technique Heatmap ───────────────────────────── */}
|
|
{allTactics.length > 0 && (
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
|
Technique Heatmap
|
|
</h2>
|
|
|
|
{/* Legend */}
|
|
<div className="mb-4 flex flex-wrap gap-3 text-xs">
|
|
<span className="flex items-center gap-1.5">
|
|
<span className="h-3 w-3 rounded bg-green-500/80" /> Validated
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<span className="h-3 w-3 rounded bg-yellow-500/80" /> Partial
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<span className="h-3 w-3 rounded bg-blue-500/60" /> In Progress
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<span className="h-3 w-3 rounded bg-red-500/70" /> Not Covered
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<span className="h-3 w-3 rounded bg-gray-700/50" /> Not Evaluated
|
|
</span>
|
|
</div>
|
|
|
|
{/* Heatmap grid — one column per tactic */}
|
|
<div className="overflow-x-auto">
|
|
<div className="inline-flex gap-2 min-w-max">
|
|
{allTactics.map((tactic) => {
|
|
const techs = techniquesByTactic[tactic] || [];
|
|
return (
|
|
<div key={tactic} className="flex flex-col gap-1" style={{ minWidth: 120 }}>
|
|
{/* Tactic header */}
|
|
<div className="rounded bg-gray-800 px-2 py-1.5 text-center">
|
|
<span className="text-[10px] font-semibold uppercase tracking-wide text-gray-400">
|
|
{tactic.replace(/-/g, " ")}
|
|
</span>
|
|
<span className="ml-1 text-[10px] text-gray-600">({techs.length})</span>
|
|
</div>
|
|
|
|
{/* Technique cells */}
|
|
{techs.map((tech) => (
|
|
<button
|
|
key={tech.technique_id}
|
|
onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
|
|
className={`rounded border p-1.5 text-left transition-all hover:opacity-80 ${statusCellColor(tech.status_global)}`}
|
|
title={`${tech.mitre_id}: ${tech.name} (${statusLabel(tech.status_global)})`}
|
|
>
|
|
<span className="block truncate text-[10px] font-mono text-white/90">
|
|
{tech.mitre_id}
|
|
</span>
|
|
<span className="block truncate text-[9px] text-white/60">
|
|
{tech.name}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── SECTION 5: Gap Analysis ────────────────────────────────── */}
|
|
{gaps && gaps.gaps.length > 0 && (
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<h2 className="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
|
<AlertTriangle className="h-4 w-4 text-orange-400" />
|
|
Coverage Gap Analysis ({gaps.total_gaps} gaps)
|
|
</h2>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-800">
|
|
<th className="pb-3 pr-4 font-medium text-gray-400">Technique</th>
|
|
<th className="pb-3 px-4 font-medium text-gray-400">Tactic</th>
|
|
<th className="pb-3 px-4 font-medium text-gray-400">Status</th>
|
|
<th className="pb-3 px-4 font-medium text-gray-400">Templates</th>
|
|
<th className="pb-3 px-4 font-medium text-gray-400">Tests</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{gaps.gaps.map((gap: GapItem) => (
|
|
<tr
|
|
key={gap.technique_id}
|
|
className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors cursor-pointer"
|
|
onClick={() => navigate(`/techniques/${gap.mitre_id}`)}
|
|
>
|
|
<td className="py-2.5 pr-4">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-mono text-xs text-cyan-400">{gap.mitre_id}</span>
|
|
<span className="truncate text-gray-300 text-xs max-w-[200px]">
|
|
{gap.name}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-2.5 px-4 text-xs text-gray-400">
|
|
{gap.tactic || "-"}
|
|
</td>
|
|
<td className="py-2.5 px-4">
|
|
<span className="flex items-center gap-1.5 text-xs">
|
|
{statusIcon(gap.status_global)}
|
|
{statusLabel(gap.status_global)}
|
|
</span>
|
|
</td>
|
|
<td className="py-2.5 px-4">
|
|
{gap.has_templates ? (
|
|
<span className="inline-flex items-center gap-1 text-xs text-green-400">
|
|
<BookOpen className="h-3.5 w-3.5" />
|
|
{gap.available_templates}
|
|
</span>
|
|
) : (
|
|
<span className="text-xs text-gray-600">0</span>
|
|
)}
|
|
</td>
|
|
<td className="py-2.5 px-4">
|
|
{gap.existing_tests > 0 ? (
|
|
<span className="inline-flex items-center gap-1 text-xs text-blue-400">
|
|
<FlaskConical className="h-3.5 w-3.5" />
|
|
{gap.existing_tests}
|
|
</span>
|
|
) : (
|
|
<span className="text-xs text-gray-600">0</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── SECTION 6: All Techniques List ─────────────────────────── */}
|
|
{actor.techniques.length > 0 && (
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
|
All Techniques ({actor.techniques.length})
|
|
</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-800">
|
|
<th className="pb-3 pr-4 font-medium text-gray-400">ID</th>
|
|
<th className="pb-3 px-4 font-medium text-gray-400">Name</th>
|
|
<th className="pb-3 px-4 font-medium text-gray-400">Tactic</th>
|
|
<th className="pb-3 px-4 font-medium text-gray-400">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{actor.techniques.map((tech: ThreatActorTechnique) => (
|
|
<tr
|
|
key={tech.technique_id}
|
|
className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors cursor-pointer"
|
|
onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
|
|
>
|
|
<td className="py-2.5 pr-4 font-mono text-xs text-cyan-400">
|
|
{tech.mitre_id}
|
|
</td>
|
|
<td className="py-2.5 px-4 text-xs text-gray-300 truncate max-w-[250px]">
|
|
{tech.name}
|
|
</td>
|
|
<td className="py-2.5 px-4 text-xs text-gray-400">
|
|
{tech.tactic || "-"}
|
|
</td>
|
|
<td className="py-2.5 px-4">
|
|
<span className="flex items-center gap-1.5 text-xs">
|
|
{statusIcon(tech.status_global)}
|
|
{statusLabel(tech.status_global)}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── References ─────────────────────────────────────────────── */}
|
|
{actor.references && actor.references.length > 0 && (
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
|
References
|
|
</h2>
|
|
<ul className="space-y-1.5">
|
|
{actor.references.map((ref, i) => (
|
|
<li key={i} className="text-xs">
|
|
{ref.url ? (
|
|
<a
|
|
href={ref.url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-cyan-400 hover:text-cyan-300 hover:underline"
|
|
>
|
|
{ref.source || ref.url}
|
|
</a>
|
|
) : (
|
|
<span className="text-gray-400">{ref.source}</span>
|
|
)}
|
|
{ref.description && (
|
|
<span className="ml-2 text-gray-500">{ref.description}</span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|