fix: D3FEND expandable cards, System page cleanup, and multi-source improvements
- Make D3FEND defense cards clickable with expandable details and external link - Fix D3FEND URLs to use PascalCase technique names matching the ontology - Remove duplicate Import Atomic Red Team from System page (use Data Sources) - Add bulk Activate All / Deactivate All buttons with confirmation modal - Fix template admin list to show both active and inactive templates - Add PATCH /test-templates/bulk-activate backend endpoint - Auto-seed data sources on container startup via entrypoint.sh - Fix SigmaHQ, CALDERA, GTFOBins import issues - Register D3FEND sync handler in data sources router - Add CIS Controls v8 compliance framework import - Expand Test Catalog source filters (CALDERA, LOLBAS, GTFOBins) - Campaign Generate from Threat Actor now opens actor selector modal - Add coverage snapshot creation button to Comparison page - Update README with accurate data source and feature documentation
This commit is contained in:
@@ -16,6 +16,8 @@ import {
|
||||
AlertTriangle,
|
||||
BookOpen,
|
||||
FlaskConical,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
import { getTechniqueByMitreId, markTechniqueReviewed } from "../api/techniques";
|
||||
import { getTemplatesByTechnique } from "../api/test-templates";
|
||||
@@ -410,76 +412,7 @@ export default function TechniqueDetailPage() {
|
||||
|
||||
{/* Recommended Defenses (D3FEND) */}
|
||||
{technique.d3fend_defenses && technique.d3fend_defenses.length > 0 && (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Shield className="h-5 w-5 text-emerald-400" />
|
||||
Recommended Defenses (D3FEND)
|
||||
</h2>
|
||||
<span className="rounded-full bg-emerald-900/50 border border-emerald-500/30 px-2.5 py-0.5 text-xs font-medium text-emerald-400">
|
||||
{technique.d3fend_defenses.length} countermeasure{technique.d3fend_defenses.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Group by tactic */}
|
||||
{(() => {
|
||||
const grouped: Record<string, typeof technique.d3fend_defenses> = {};
|
||||
for (const def of technique.d3fend_defenses!) {
|
||||
const tactic = def.tactic || "Other";
|
||||
if (!grouped[tactic]) grouped[tactic] = [];
|
||||
grouped[tactic].push(def);
|
||||
}
|
||||
const tacticColors: Record<string, string> = {
|
||||
Detect: "border-blue-500/30 bg-blue-900/20 text-blue-400",
|
||||
Harden: "border-emerald-500/30 bg-emerald-900/20 text-emerald-400",
|
||||
Isolate: "border-purple-500/30 bg-purple-900/20 text-purple-400",
|
||||
Deceive: "border-amber-500/30 bg-amber-900/20 text-amber-400",
|
||||
Evict: "border-red-500/30 bg-red-900/20 text-red-400",
|
||||
Model: "border-cyan-500/30 bg-cyan-900/20 text-cyan-400",
|
||||
};
|
||||
|
||||
return Object.entries(grouped).map(([tactic, defenses]) => (
|
||||
<div key={tactic} className="mb-4 last:mb-0">
|
||||
<h3 className="mb-2 text-sm font-medium text-gray-400 uppercase tracking-wide">
|
||||
{tactic}
|
||||
</h3>
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{defenses!.map((def) => (
|
||||
<div
|
||||
key={def.id}
|
||||
className={`rounded-lg border p-3 transition-colors hover:border-gray-600 ${
|
||||
tacticColors[tactic] || "border-gray-700 bg-gray-800/30 text-gray-300"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-gray-200">
|
||||
<span className="font-mono text-xs text-gray-500 mr-1.5">{def.d3fend_id}</span>
|
||||
{def.name}
|
||||
</p>
|
||||
{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>
|
||||
</div>
|
||||
));
|
||||
})()}
|
||||
</div>
|
||||
<D3FENDSection defenses={technique.d3fend_defenses} />
|
||||
)}
|
||||
|
||||
{/* Intel Items Section */}
|
||||
@@ -525,3 +458,124 @@ export default function TechniqueDetailPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── D3FEND Section ────────────────────────────────────────────────────
|
||||
|
||||
function D3FENDSection({ defenses }: { defenses: Array<{
|
||||
id: string;
|
||||
d3fend_id: string;
|
||||
name: string;
|
||||
description?: string | null;
|
||||
tactic?: string | null;
|
||||
d3fend_url?: string | null;
|
||||
}> }) {
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
|
||||
const grouped: Record<string, typeof defenses> = {};
|
||||
for (const def of defenses) {
|
||||
const tactic = def.tactic || "Other";
|
||||
if (!grouped[tactic]) grouped[tactic] = [];
|
||||
grouped[tactic].push(def);
|
||||
}
|
||||
|
||||
const tacticColors: Record<string, string> = {
|
||||
Detect: "border-blue-500/30 bg-blue-900/20 text-blue-400",
|
||||
Harden: "border-emerald-500/30 bg-emerald-900/20 text-emerald-400",
|
||||
Isolate: "border-purple-500/30 bg-purple-900/20 text-purple-400",
|
||||
Deceive: "border-amber-500/30 bg-amber-900/20 text-amber-400",
|
||||
Evict: "border-red-500/30 bg-red-900/20 text-red-400",
|
||||
Model: "border-cyan-500/30 bg-cyan-900/20 text-cyan-400",
|
||||
};
|
||||
|
||||
const tacticDescriptions: Record<string, string> = {
|
||||
Detect: "Techniques for identifying adversary activity through monitoring and analysis.",
|
||||
Harden: "Techniques for strengthening systems to reduce the attack surface.",
|
||||
Isolate: "Techniques for containing threats by limiting communication and access.",
|
||||
Deceive: "Techniques that use deception to mislead adversaries.",
|
||||
Evict: "Techniques for removing adversary presence from systems.",
|
||||
Model: "Techniques for understanding and mapping the environment.",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Shield className="h-5 w-5 text-emerald-400" />
|
||||
Recommended Defenses (D3FEND)
|
||||
</h2>
|
||||
<span className="rounded-full bg-emerald-900/50 border border-emerald-500/30 px-2.5 py-0.5 text-xs font-medium text-emerald-400">
|
||||
{defenses.length} countermeasure{defenses.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{Object.entries(grouped).map(([tactic, defs]) => (
|
||||
<div key={tactic} className="mb-4 last:mb-0">
|
||||
<h3 className="mb-1 text-sm font-medium text-gray-400 uppercase tracking-wide">
|
||||
{tactic}
|
||||
</h3>
|
||||
{tacticDescriptions[tactic] && (
|
||||
<p className="mb-2 text-xs text-gray-500">{tacticDescriptions[tactic]}</p>
|
||||
)}
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{defs.map((def) => {
|
||||
const isExpanded = expandedId === def.id;
|
||||
return (
|
||||
<div
|
||||
key={def.id}
|
||||
className={`rounded-lg border p-3 transition-all cursor-pointer ${
|
||||
isExpanded ? "ring-1 ring-gray-600" : ""
|
||||
} ${tacticColors[tactic] || "border-gray-700 bg-gray-800/30 text-gray-300"}`}
|
||||
onClick={() => setExpandedId(isExpanded ? null : def.id)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-gray-200 flex items-center gap-1.5">
|
||||
<span className="font-mono text-xs text-gray-500">{def.d3fend_id}</span>
|
||||
{def.name}
|
||||
</p>
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="ml-2 h-4 w-4 shrink-0 text-gray-500" />
|
||||
) : (
|
||||
<ChevronDown className="ml-2 h-4 w-4 shrink-0 text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="mt-3 space-y-2 border-t border-gray-700/50 pt-3">
|
||||
{def.description ? (
|
||||
<p className="text-xs text-gray-300 leading-relaxed">{def.description}</p>
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 italic">No description available.</p>
|
||||
)}
|
||||
<div className="flex items-center gap-3 pt-1">
|
||||
<span className="rounded bg-gray-800 px-2 py-0.5 text-[10px] font-medium text-gray-400 border border-gray-700">
|
||||
Tactic: {def.tactic || "Unknown"}
|
||||
</span>
|
||||
<span className="rounded bg-gray-800 px-2 py-0.5 text-[10px] font-medium text-gray-400 border border-gray-700">
|
||||
ID: {def.d3fend_id}
|
||||
</span>
|
||||
</div>
|
||||
{def.d3fend_url && (
|
||||
<a
|
||||
href={def.d3fend_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="inline-flex items-center gap-1.5 text-xs text-cyan-400 hover:text-cyan-300 hover:underline mt-1"
|
||||
>
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
View on MITRE D3FEND
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user