feat(phase-24): integrate MITRE D3FEND defensive techniques with ATT&CK mapping (T-213, T-214)

This commit is contained in:
2026-02-09 16:38:59 +01:00
parent 2fc0e2cafd
commit cd124b655b
12 changed files with 1141 additions and 4 deletions

View File

@@ -1,4 +1,5 @@
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import {
Shield,
ShieldCheck,
@@ -10,6 +11,7 @@ import {
XCircle,
AlertTriangle,
Trash2,
ExternalLink,
} from "lucide-react";
import type {
Test,
@@ -18,8 +20,10 @@ import type {
Evidence,
TestTimelineEntry,
User,
DefensiveTechnique,
} from "../../types/models";
import { RED_EDITABLE_STATES, BLUE_EDITABLE_STATES } from "../../types/models";
import { getDefensesForTechnique } from "../../api/d3fend";
import EvidenceUpload from "../EvidenceUpload";
import EvidenceList from "../EvidenceList";
@@ -105,6 +109,13 @@ export default function TeamTabs({
const [activeTab, setActiveTab] = useState<TabKey>("red");
const role = user?.role ?? "";
// Fetch D3FEND defenses for the test's technique
const { data: d3fendData } = useQuery({
queryKey: ["d3fend-defenses", test.technique_mitre_id],
queryFn: () => getDefensesForTechnique(test.technique_mitre_id!),
enabled: !!test.technique_mitre_id,
});
const canEditRed =
RED_EDITABLE_STATES.includes(test.state) &&
(role === "red_tech" || role === "admin");
@@ -326,6 +337,55 @@ export default function TeamTabs({
/>
</div>
{/* Recommended Detection Approaches (D3FEND) */}
{d3fendData && d3fendData.defenses.length > 0 && (
<div className="rounded-lg border border-emerald-500/20 bg-emerald-900/10 p-4">
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-emerald-400">
<Shield className="h-4 w-4" />
Recommended Detection Approaches
<span className="ml-auto rounded-full bg-emerald-900/50 border border-emerald-500/30 px-2 py-0.5 text-[10px] font-medium text-emerald-400">
{d3fendData.defenses.length} countermeasure{d3fendData.defenses.length !== 1 ? "s" : ""}
</span>
</h3>
<div className="space-y-2 max-h-64 overflow-y-auto pr-1">
{d3fendData.defenses.map((def) => (
<div
key={def.id}
className="flex items-start justify-between rounded-lg border border-gray-700 bg-gray-800/50 p-3"
>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="shrink-0 rounded bg-emerald-900/50 border border-emerald-500/30 px-1.5 py-0.5 font-mono text-[10px] text-emerald-400">
{def.d3fend_id}
</span>
<span className="text-sm font-medium text-gray-200">{def.name}</span>
{def.tactic && (
<span className="shrink-0 rounded-full bg-gray-800 border border-gray-700 px-1.5 py-0.5 text-[10px] text-gray-400">
{def.tactic}
</span>
)}
</div>
{def.description && (
<p className="mt-1 text-xs text-gray-400 line-clamp-2">{def.description}</p>
)}
</div>
{def.d3fend_url && (
<a
href={def.d3fend_url}
target="_blank"
rel="noopener noreferrer"
className="ml-2 shrink-0 text-gray-500 hover:text-cyan-400"
title="View in D3FEND"
>
<ExternalLink className="h-3.5 w-3.5" />
</a>
)}
</div>
))}
</div>
</div>
)}
{/* Blue validation status if applicable */}
{test.blue_validation_status && (
<div