db208b9f5c
Some checks failed
Aegis CI / lint-and-test (push) Has been cancelled
- New shared MarkdownText component (react-markdown + remark-gfm) that renders links, bold, italic, lists, code, blockquotes. External links open in a new tab with rel=noopener. - Applied to: technique description, threat actor description, test description, campaign description, detection rule descriptions, D3FEND defense descriptions, red/blue summaries and validation notes. - procedure_text (code/commands) stays in <pre> — not processed as MD. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
742 lines
31 KiB
TypeScript
742 lines
31 KiB
TypeScript
import { useState } from "react";
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
import MarkdownText from "../components/MarkdownText";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
Loader2,
|
|
AlertCircle,
|
|
ArrowLeft,
|
|
CheckCircle,
|
|
Clock,
|
|
Shield,
|
|
FileText,
|
|
ExternalLink,
|
|
Plus,
|
|
Check,
|
|
X,
|
|
AlertTriangle,
|
|
BookOpen,
|
|
FlaskConical,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Radar,
|
|
} from "lucide-react";
|
|
import { getTechniqueByMitreId, markTechniqueReviewed } from "../api/techniques";
|
|
import { getTemplatesByTechnique } from "../api/test-templates";
|
|
import { useAuth } from "../context/AuthContext";
|
|
import TestFromTemplateForm from "../components/TestFromTemplateForm";
|
|
import JiraLinkPanel from "../components/JiraLinkPanel";
|
|
import type { TechniqueStatus, TestState, TestResult } from "../types/models";
|
|
|
|
const statusBadgeColors: Record<TechniqueStatus, string> = {
|
|
validated: "bg-green-900/50 text-green-400 border-green-500/30",
|
|
partial: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
|
|
in_progress: "bg-blue-900/50 text-blue-400 border-blue-500/30",
|
|
not_covered: "bg-red-900/50 text-red-400 border-red-500/30",
|
|
not_evaluated: "bg-gray-800/50 text-gray-400 border-gray-600/30",
|
|
review_required: "bg-orange-900/50 text-orange-400 border-orange-500/30",
|
|
};
|
|
|
|
const testStateBadgeColors: Record<TestState, string> = {
|
|
draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
|
|
red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
|
|
blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
|
|
in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
|
|
validated: "bg-green-900/50 text-green-400 border-green-500/30",
|
|
rejected: "bg-red-900/50 text-red-400 border-red-500/30",
|
|
};
|
|
|
|
const testResultBadgeColors: Record<TestResult, string> = {
|
|
detected: "bg-green-900/50 text-green-400 border-green-500/30",
|
|
not_detected: "bg-red-900/50 text-red-400 border-red-500/30",
|
|
partially_detected: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
|
|
};
|
|
|
|
export default function TechniqueDetailPage() {
|
|
const { mitreId } = useParams<{ mitreId: string }>();
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
const { user } = useAuth();
|
|
|
|
const [templateFormId, setTemplateFormId] = useState<string | null>(null);
|
|
|
|
const canReview =
|
|
user?.role === "admin" || user?.role === "red_lead" || user?.role === "blue_lead";
|
|
|
|
const {
|
|
data: technique,
|
|
isLoading,
|
|
error,
|
|
} = useQuery({
|
|
queryKey: ["technique", mitreId],
|
|
queryFn: () => getTechniqueByMitreId(mitreId!),
|
|
enabled: !!mitreId,
|
|
});
|
|
|
|
const { data: templates = [], isLoading: isTemplatesLoading } = useQuery({
|
|
queryKey: ["templates-for-technique", mitreId],
|
|
queryFn: () => getTemplatesByTechnique(mitreId!),
|
|
enabled: !!mitreId,
|
|
});
|
|
|
|
const reviewMutation = useMutation({
|
|
mutationFn: () => markTechniqueReviewed(mitreId!),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["technique", mitreId] });
|
|
queryClient.invalidateQueries({ queryKey: ["techniques"] });
|
|
},
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex h-64 items-center justify-center">
|
|
<Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !technique) {
|
|
return (
|
|
<div className="flex h-64 flex-col items-center justify-center gap-2">
|
|
<AlertCircle className="h-10 w-10 text-red-400" />
|
|
<p className="text-red-400">Failed to load technique</p>
|
|
<button
|
|
onClick={() => navigate("/techniques")}
|
|
className="mt-2 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Back to techniques
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const formatDate = (dateStr: string | null) => {
|
|
if (!dateStr) return "—";
|
|
return new Date(dateStr).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Back button */}
|
|
<button
|
|
onClick={() => navigate("/techniques")}
|
|
className="flex items-center gap-1 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Back to techniques
|
|
</button>
|
|
|
|
{/* Header */}
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-start gap-4">
|
|
<div className="rounded-lg bg-cyan-500/10 p-3">
|
|
<Shield className="h-8 w-8 text-cyan-400" />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-3">
|
|
<h1 className="text-2xl font-bold text-white">{technique.mitre_id}</h1>
|
|
<span
|
|
className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
|
|
statusBadgeColors[technique.status_global]
|
|
}`}
|
|
>
|
|
{technique.status_global.replace(/_/g, " ")}
|
|
</span>
|
|
{technique.review_required && (
|
|
<span className="inline-flex items-center gap-1 rounded-full border border-orange-500/30 bg-orange-900/50 px-2.5 py-0.5 text-xs font-medium text-orange-400">
|
|
<AlertTriangle className="h-3 w-3" />
|
|
Review Required
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="mt-1 text-lg text-gray-300">{technique.name}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{canReview && technique.review_required && (
|
|
<button
|
|
onClick={() => reviewMutation.mutate()}
|
|
disabled={reviewMutation.isPending}
|
|
className="flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
|
|
>
|
|
{reviewMutation.isPending ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<CheckCircle className="h-4 w-4" />
|
|
)}
|
|
Mark as Reviewed
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Info Section */}
|
|
<div className="grid gap-6 lg:grid-cols-3">
|
|
{/* Description */}
|
|
<div className="lg:col-span-2 rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<h2 className="mb-3 text-lg font-semibold text-white">Description</h2>
|
|
<MarkdownText
|
|
content={technique.description || "No description available."}
|
|
className="text-sm text-gray-400 leading-relaxed"
|
|
/>
|
|
</div>
|
|
|
|
{/* Metadata */}
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<h2 className="mb-4 text-lg font-semibold text-white">Details</h2>
|
|
<dl className="space-y-4">
|
|
<div>
|
|
<dt className="text-xs font-medium uppercase text-gray-500">Tactic</dt>
|
|
<dd className="mt-1 text-sm text-gray-300 capitalize">
|
|
{technique.tactic?.replace(/-/g, " ") || "—"}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs font-medium uppercase text-gray-500">Platforms</dt>
|
|
<dd className="mt-1 flex flex-wrap gap-1">
|
|
{technique.platforms && technique.platforms.length > 0 ? (
|
|
technique.platforms.map((p) => (
|
|
<span
|
|
key={p}
|
|
className="rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-300"
|
|
>
|
|
{p}
|
|
</span>
|
|
))
|
|
) : (
|
|
<span className="text-sm text-gray-500">—</span>
|
|
)}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs font-medium uppercase text-gray-500">Subtechnique</dt>
|
|
<dd className="mt-1 text-sm text-gray-300">
|
|
{technique.is_subtechnique ? `Yes (${technique.parent_mitre_id})` : "No"}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs font-medium uppercase text-gray-500">Last Review</dt>
|
|
<dd className="mt-1 text-sm text-gray-300">
|
|
{formatDate(technique.last_review_date)}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs font-medium uppercase text-gray-500">MITRE Version</dt>
|
|
<dd className="mt-1 text-sm text-gray-300">{technique.mitre_version || "—"}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tests Section */}
|
|
<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">Associated Tests</h2>
|
|
<button
|
|
onClick={() => navigate(`/tests/new?technique=${technique.id}`)}
|
|
className="flex items-center gap-1.5 rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-3 py-1.5 text-sm font-medium text-cyan-400 hover:bg-cyan-500/20 transition-colors"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
New Test
|
|
</button>
|
|
</div>
|
|
|
|
{technique.tests && technique.tests.length > 0 ? (
|
|
<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">Name</th>
|
|
<th className="pb-3 px-4 font-medium text-gray-400">State</th>
|
|
<th className="pb-3 px-4 font-medium text-gray-400">Result</th>
|
|
<th className="pb-3 px-4 font-medium text-gray-400">Platform</th>
|
|
<th className="pb-3 px-4 font-medium text-gray-400">Created</th>
|
|
<th className="pb-3 pl-4 font-medium text-gray-400">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{technique.tests.map((test) => (
|
|
<tr
|
|
key={test.id}
|
|
className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
|
|
>
|
|
<td className="py-3 pr-4">
|
|
<span className="font-medium text-gray-200">{test.name}</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span
|
|
className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
|
|
testStateBadgeColors[test.state]
|
|
}`}
|
|
>
|
|
{test.state.replace(/_/g, " ")}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
{test.result ? (
|
|
<span
|
|
className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
|
|
testResultBadgeColors[test.result]
|
|
}`}
|
|
>
|
|
{test.result.replace(/_/g, " ")}
|
|
</span>
|
|
) : (
|
|
<span className="text-gray-600">—</span>
|
|
)}
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className="text-gray-400 capitalize">{test.platform || "—"}</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className="text-gray-400">{formatDate(test.created_at)}</span>
|
|
</td>
|
|
<td className="py-3 pl-4">
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => navigate(`/tests/${test.id}`)}
|
|
className="rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-cyan-400"
|
|
title="View Details"
|
|
>
|
|
<FileText className="h-4 w-4" />
|
|
</button>
|
|
{canReview && test.state === "draft" && (
|
|
<>
|
|
<button
|
|
onClick={() => navigate(`/tests/${test.id}/validate`)}
|
|
className="rounded p-1 text-gray-400 hover:bg-green-900/50 hover:text-green-400"
|
|
title="Validate"
|
|
>
|
|
<Check className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => navigate(`/tests/${test.id}/reject`)}
|
|
className="rounded p-1 text-gray-400 hover:bg-red-900/50 hover:text-red-400"
|
|
title="Reject"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center py-8 text-gray-400">
|
|
<Clock className="mb-2 h-8 w-8" />
|
|
<p>No tests have been created for this technique yet.</p>
|
|
<button
|
|
onClick={() => navigate(`/tests/new?technique=${technique.id}`)}
|
|
className="mt-3 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Create the first test
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Detection Rules Section */}
|
|
<DetectionRulesSection rules={(technique as any).detection_rules ?? []} />
|
|
|
|
{/* Available Test Templates Section */}
|
|
<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">Available Test Templates</h2>
|
|
<button
|
|
onClick={() => navigate("/test-catalog")}
|
|
className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
|
|
>
|
|
<BookOpen className="h-4 w-4" />
|
|
Browse Full Catalog
|
|
</button>
|
|
</div>
|
|
|
|
{isTemplatesLoading ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-gray-500" />
|
|
</div>
|
|
) : templates.length > 0 ? (
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
{templates.map((tpl) => (
|
|
<div
|
|
key={tpl.id}
|
|
className="flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/30 p-4 transition-colors hover:border-gray-700"
|
|
>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium text-gray-200">{tpl.name}</p>
|
|
<div className="mt-1 flex flex-wrap gap-1">
|
|
<span className="inline-flex rounded-full border border-gray-600/30 bg-gray-800/50 px-2 py-0.5 text-[10px] text-gray-400">
|
|
{tpl.source === "atomic_red_team" ? "Atomic" : tpl.source}
|
|
</span>
|
|
{tpl.platform && (
|
|
<span className="inline-flex rounded-full border border-gray-600/30 bg-gray-800/50 px-2 py-0.5 text-[10px] capitalize text-gray-400">
|
|
{tpl.platform}
|
|
</span>
|
|
)}
|
|
{tpl.severity && (
|
|
<span className="inline-flex rounded-full border border-gray-600/30 bg-gray-800/50 px-2 py-0.5 text-[10px] capitalize text-gray-400">
|
|
{tpl.severity}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setTemplateFormId(tpl.id)}
|
|
className="ml-3 flex shrink-0 items-center gap-1 rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-3 py-1.5 text-xs font-medium text-cyan-400 hover:bg-cyan-500/20 transition-colors"
|
|
>
|
|
<FlaskConical className="h-3.5 w-3.5" />
|
|
Run This Test
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center py-8 text-gray-400">
|
|
<BookOpen className="mb-2 h-8 w-8 text-gray-600" />
|
|
<p className="text-sm">No test templates available for this technique.</p>
|
|
<button
|
|
onClick={() => navigate("/test-catalog")}
|
|
className="mt-3 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
|
|
>
|
|
Browse the full test catalog
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Recommended Defenses (D3FEND) */}
|
|
{technique.d3fend_defenses && technique.d3fend_defenses.length > 0 && (
|
|
<D3FENDSection defenses={technique.d3fend_defenses} />
|
|
)}
|
|
|
|
{/* Intel Items Section */}
|
|
{technique.intel_items && technique.intel_items.length > 0 && (
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<h2 className="mb-4 text-lg font-semibold text-white">Threat Intelligence</h2>
|
|
<div className="space-y-3">
|
|
{technique.intel_items.map((intel) => (
|
|
<div
|
|
key={intel.id}
|
|
className="flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/30 p-4"
|
|
>
|
|
<div>
|
|
<p className="font-medium text-gray-200">{intel.title || intel.url}</p>
|
|
<p className="mt-0.5 text-xs text-gray-500">
|
|
{intel.source && <span>{intel.source} • </span>}
|
|
Detected {formatDate(intel.detected_at)}
|
|
</p>
|
|
</div>
|
|
<a
|
|
href={intel.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-1 text-sm text-cyan-400 hover:underline"
|
|
>
|
|
View
|
|
<ExternalLink className="h-3.5 w-3.5" />
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Jira Integration */}
|
|
{technique && (
|
|
<JiraLinkPanel entityType="technique" entityId={technique.id} />
|
|
)}
|
|
|
|
{/* Template instantiation modal */}
|
|
{templateFormId && technique && (
|
|
<TestFromTemplateForm
|
|
templateId={templateFormId}
|
|
techniqueId={technique.id}
|
|
onClose={() => setTemplateFormId(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Detection Rules Section ───────────────────────────────────────────
|
|
|
|
interface DetectionRule {
|
|
id: string;
|
|
title: string;
|
|
description: string | null;
|
|
source: string;
|
|
source_id: string | null;
|
|
source_url: string | null;
|
|
rule_format: string;
|
|
severity: string | null;
|
|
platforms: string[];
|
|
false_positive_rate: string | null;
|
|
}
|
|
|
|
const severityColors: Record<string, string> = {
|
|
critical: "bg-red-900/40 text-red-400 border-red-500/30",
|
|
high: "bg-orange-900/40 text-orange-400 border-orange-500/30",
|
|
medium: "bg-yellow-900/40 text-yellow-400 border-yellow-500/30",
|
|
low: "bg-blue-900/40 text-blue-400 border-blue-500/30",
|
|
informational: "bg-gray-800/60 text-gray-400 border-gray-600/30",
|
|
};
|
|
|
|
const sourceColors: Record<string, string> = {
|
|
sigma: "bg-purple-900/40 text-purple-400 border-purple-500/30",
|
|
elastic: "bg-blue-900/40 text-blue-400 border-blue-500/30",
|
|
splunk: "bg-orange-900/40 text-orange-400 border-orange-500/30",
|
|
custom: "bg-cyan-900/40 text-cyan-400 border-cyan-500/30",
|
|
};
|
|
|
|
function DetectionRulesSection({ rules }: { rules: DetectionRule[] }) {
|
|
const [expandedId, setExpandedId] = useState<string | null>(null);
|
|
|
|
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="flex items-center gap-2 text-lg font-semibold text-white">
|
|
<Radar className="h-5 w-5 text-cyan-400" />
|
|
Detection Rules
|
|
</h2>
|
|
<span
|
|
className={`rounded-full border px-2.5 py-0.5 text-xs font-medium ${
|
|
rules.length > 0
|
|
? "border-cyan-500/30 bg-cyan-900/40 text-cyan-400"
|
|
: "border-gray-600/30 bg-gray-800/50 text-gray-500"
|
|
}`}
|
|
>
|
|
{rules.length} rule{rules.length !== 1 ? "s" : ""}
|
|
</span>
|
|
</div>
|
|
|
|
{rules.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-8 text-gray-500">
|
|
<Radar className="mb-2 h-8 w-8 text-gray-700" />
|
|
<p className="text-sm">No detection rules linked to this technique.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{rules.map((rule) => {
|
|
const isExpanded = expandedId === rule.id;
|
|
const sevColor = severityColors[rule.severity ?? ""] ?? severityColors.informational;
|
|
const srcColor = sourceColors[rule.source] ?? sourceColors.custom;
|
|
return (
|
|
<div
|
|
key={rule.id}
|
|
className="rounded-lg border border-gray-800 bg-gray-800/30 transition-colors hover:border-gray-700 cursor-pointer"
|
|
onClick={() => setExpandedId(isExpanded ? null : rule.id)}
|
|
>
|
|
<div className="flex items-center gap-3 p-3">
|
|
{/* Severity dot */}
|
|
<div
|
|
className={`h-2 w-2 shrink-0 rounded-full ${
|
|
rule.severity === "critical" ? "bg-red-400"
|
|
: rule.severity === "high" ? "bg-orange-400"
|
|
: rule.severity === "medium" ? "bg-yellow-400"
|
|
: rule.severity === "low" ? "bg-blue-400"
|
|
: "bg-gray-600"
|
|
}`}
|
|
/>
|
|
{/* Title */}
|
|
<span className="flex-1 min-w-0 truncate text-sm font-medium text-gray-200">
|
|
{rule.title}
|
|
</span>
|
|
{/* Badges */}
|
|
<div className="flex shrink-0 items-center gap-1.5">
|
|
{rule.severity && (
|
|
<span className={`rounded border px-1.5 py-0.5 text-[10px] font-semibold uppercase ${sevColor}`}>
|
|
{rule.severity}
|
|
</span>
|
|
)}
|
|
<span className={`rounded border px-1.5 py-0.5 text-[10px] font-medium uppercase ${srcColor}`}>
|
|
{rule.source}
|
|
</span>
|
|
<span className="rounded border border-gray-700 bg-gray-800 px-1.5 py-0.5 text-[10px] text-gray-500">
|
|
{rule.rule_format.replace("_yaml", "").toUpperCase()}
|
|
</span>
|
|
{isExpanded ? (
|
|
<ChevronUp className="h-3.5 w-3.5 text-gray-500" />
|
|
) : (
|
|
<ChevronDown className="h-3.5 w-3.5 text-gray-500" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{isExpanded && (
|
|
<div
|
|
className="border-t border-gray-700/50 px-4 py-3 space-y-2"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{rule.description && (
|
|
<MarkdownText content={rule.description} className="text-xs text-gray-400 leading-relaxed" />
|
|
)}
|
|
<div className="flex flex-wrap gap-3 text-xs text-gray-500">
|
|
{rule.rule_format && (
|
|
<span>Format: <span className="text-gray-300">{rule.rule_format}</span></span>
|
|
)}
|
|
{rule.false_positive_rate && (
|
|
<span>False positives: <span className="text-gray-300 capitalize">{rule.false_positive_rate}</span></span>
|
|
)}
|
|
{rule.platforms && rule.platforms.length > 0 && (
|
|
<span>Platforms: <span className="text-gray-300">{rule.platforms.join(", ")}</span></span>
|
|
)}
|
|
{rule.source_id && (
|
|
<span>Source ID: <span className="font-mono text-gray-300">{rule.source_id}</span></span>
|
|
)}
|
|
</div>
|
|
{rule.source_url && (
|
|
<a
|
|
href={rule.source_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 text-xs text-cyan-400 hover:underline"
|
|
>
|
|
<ExternalLink className="h-3 w-3" />
|
|
View source rule
|
|
</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</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 ? (
|
|
<MarkdownText content={def.description} className="text-xs text-gray-300 leading-relaxed" />
|
|
) : (
|
|
<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>
|
|
);
|
|
}
|