61e6037e97
Some checks failed
Aegis CI / lint-and-test (push) Has been cancelled
1. New 'disputed' state — one lead approved, the other rejected:
- Both approved → validated (unchanged)
- Both rejected → rejected (unchanged)
- One approves + one rejects → disputed (new)
- DB: ALTER TYPE teststate ADD VALUE 'disputed'
- Notification sent to the approving lead explaining the conflict
with the rejection notes
2. Disputed UI in TestDetailHeader:
- Amber banner showing conflict + rejection reason from notes
- 'Change Vote to Rejected' button for the lead who approved
- Validation indicators shown for disputed state too
3. Fix timestamps on reopen (rejected → draft):
- Keep red_started_at, blue_started_at etc. as historical record
- Only clear paused_at defensively
- Timestamps naturally update when test is re-executed
4. disputed badge (amber) added to all badge color maps
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
940 lines
40 KiB
TypeScript
940 lines
40 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,
|
|
AlertTriangle,
|
|
BookOpen,
|
|
FlaskConical,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Radar,
|
|
} from "lucide-react";
|
|
import { getTechniqueByMitreId, markTechniqueReviewed } from "../api/techniques";
|
|
import { getTemplatesByTechnique } from "../api/test-templates";
|
|
import { listJiraLinks, type JiraLink } from "../api/jira";
|
|
import { getJiraConfig } from "../api/settings";
|
|
import { useAuth } from "../context/AuthContext";
|
|
import TestFromTemplateForm from "../components/TestFromTemplateForm";
|
|
import type { TechniqueStatus, TestState, TestResult } from "../types/models";
|
|
|
|
import StatusBadge from "../components/StatusBadge";
|
|
|
|
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",
|
|
disputed: "bg-amber-900/50 text-amber-400 border-amber-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",
|
|
};
|
|
|
|
/* ── TechniqueJiraSection ─────────────────────────────────────────────
|
|
Techniques don't have their own Jira tickets — tickets live on tests.
|
|
This component fetches all test-linked Jira tickets for this technique
|
|
in a single batched request and shows them read-only.
|
|
─────────────────────────────────────────────────────────────────── */
|
|
function TechniqueJiraSection({ technique }: { technique: ReturnType<typeof Object.create> }) {
|
|
const tests: { id: string; name: string }[] = (technique as any).tests ?? [];
|
|
|
|
const testIds = tests.map((t) => t.id);
|
|
|
|
const { data: links = [], isLoading } = useQuery({
|
|
queryKey: ["jira-links-technique", testIds],
|
|
queryFn: () =>
|
|
listJiraLinks({ entity_type: "test", entity_ids: testIds }),
|
|
enabled: testIds.length > 0,
|
|
staleTime: 60_000,
|
|
});
|
|
|
|
const { data: jiraConfig } = useQuery({
|
|
queryKey: ["jira-config"],
|
|
queryFn: getJiraConfig,
|
|
staleTime: 5 * 60 * 1000,
|
|
});
|
|
|
|
const jiraBase = jiraConfig?.url?.replace(/\/$/, "") ?? "https://jira.atlassian.com";
|
|
|
|
const statusColors: Record<string, string> = {
|
|
"To Do": "bg-gray-700 text-gray-300",
|
|
"In Progress": "bg-blue-900/50 text-blue-400",
|
|
"Done": "bg-green-900/50 text-green-400",
|
|
};
|
|
|
|
// Build a map entity_id → test name
|
|
const testById = Object.fromEntries(tests.map((t) => [t.id, t.name]));
|
|
|
|
// Only render if there's something to show (or we're loading)
|
|
if (!isLoading && links.length === 0) return null;
|
|
|
|
return (
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
|
<h2 className="mb-4 flex items-center gap-2 text-lg font-semibold text-white">
|
|
<ExternalLink className="h-5 w-5 text-blue-400" />
|
|
Jira Tickets
|
|
</h2>
|
|
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-4">
|
|
<Loader2 className="h-5 w-5 animate-spin text-gray-500" />
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{links.map((link: JiraLink) => (
|
|
<div
|
|
key={link.id}
|
|
className="flex items-center justify-between rounded-lg border border-gray-700 bg-gray-800/30 px-4 py-3"
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
{/* Test name */}
|
|
<p className="text-xs text-gray-500 truncate mb-1">
|
|
{testById[link.entity_id] ?? "Test"}
|
|
</p>
|
|
{/* Jira ticket info */}
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="font-mono text-sm font-medium text-blue-400">
|
|
{link.jira_issue_key}
|
|
</span>
|
|
{link.jira_status && (
|
|
<span className={`rounded px-1.5 py-0.5 text-xs ${statusColors[link.jira_status] ?? "bg-gray-700 text-gray-300"}`}>
|
|
{link.jira_status}
|
|
</span>
|
|
)}
|
|
{link.jira_priority && (
|
|
<span className="text-xs text-gray-500">{link.jira_priority}</span>
|
|
)}
|
|
{link.jira_assignee && (
|
|
<span className="text-xs text-gray-500">→ {link.jira_assignee}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<a
|
|
href={`${jiraBase}/browse/${link.jira_issue_key}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="ml-3 shrink-0 rounded p-1.5 text-gray-500 hover:bg-gray-700 hover:text-blue-400 transition-colors"
|
|
title="Open in Jira"
|
|
>
|
|
<ExternalLink className="h-4 w-4" />
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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";
|
|
|
|
// Same roles that can create tests (mirrors backend POST /tests/from-template)
|
|
const canRunTemplate =
|
|
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>
|
|
<StatusBadge status={technique.status_global as TechniqueStatus} />
|
|
{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-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-500 disabled:opacity-50 transition-colors shrink-0"
|
|
>
|
|
{reviewMutation.isPending ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<CheckCircle className="h-4 w-4" />
|
|
)}
|
|
Mark as Reviewed
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Review required banner — only shown to users who can act on it */}
|
|
{technique.review_required && canReview && (
|
|
<div className="flex items-start gap-3 rounded-xl border border-amber-500/30 bg-amber-500/5 p-4">
|
|
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-400" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-amber-300">
|
|
This technique has been updated in MITRE ATT&CK
|
|
</p>
|
|
<p className="mt-0.5 text-xs text-amber-400/70">
|
|
The MITRE ATT&CK sync detected changes to this technique.
|
|
{technique.mitre_last_modified && (
|
|
<> Last modified in ATT&CK: <span className="font-mono">{technique.mitre_last_modified.slice(0, 10)}</span>.</>
|
|
)}
|
|
{" "}Click{" "}
|
|
<span className="font-semibold">Mark as Reviewed</span> to acknowledge the changes.
|
|
</p>
|
|
</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">
|
|
<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>
|
|
</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) => {
|
|
// ── Derive test status for this technique ──────────────
|
|
const allTests = (technique as any).tests ?? [];
|
|
|
|
// Any test currently in a non-terminal state
|
|
const ACTIVE_STATES: TestState[] = [
|
|
"draft", "red_executing", "blue_evaluating", "in_review",
|
|
];
|
|
const activeTest = allTests.find(
|
|
(t: { state: TestState }) => ACTIVE_STATES.includes(t.state)
|
|
) ?? null;
|
|
|
|
// Most recent validated test
|
|
const latestValidated: {
|
|
id: string;
|
|
detection_result: TestResult | null;
|
|
updated_at: string | null;
|
|
created_at: string;
|
|
} | null =
|
|
[...allTests]
|
|
.filter((t: { state: TestState }) => t.state === "validated")
|
|
.sort((a: { updated_at: string | null; created_at: string }, b: { updated_at: string | null; created_at: string }) =>
|
|
(b.updated_at || b.created_at).localeCompare(a.updated_at || a.created_at)
|
|
)[0] ?? null;
|
|
|
|
// Coverage is stale if the sync job raised the review flag
|
|
// (only meaningful when we already have a validated test)
|
|
const isStale = technique.review_required && !!latestValidated;
|
|
|
|
// ── Helpers ────────────────────────────────────────────
|
|
const ACTIVE_LABEL: Partial<Record<TestState, string>> = {
|
|
draft: "Draft",
|
|
red_executing: "Executing",
|
|
blue_evaluating: "Evaluating",
|
|
in_review: "In Review",
|
|
};
|
|
|
|
const detResult = latestValidated?.detection_result;
|
|
const detBadgeStyle =
|
|
detResult === "detected"
|
|
? "border-green-500/30 bg-green-500/10 text-green-400"
|
|
: detResult === "partially_detected"
|
|
? "border-yellow-500/30 bg-yellow-500/10 text-yellow-400"
|
|
: detResult === "not_detected"
|
|
? "border-red-500/30 bg-red-500/10 text-red-400"
|
|
: "border-gray-600/30 bg-gray-800/50 text-gray-400";
|
|
|
|
const detLabel =
|
|
detResult === "detected" ? "Detected"
|
|
: detResult === "partially_detected" ? "Partial"
|
|
: detResult === "not_detected" ? "Not detected"
|
|
: "Validated";
|
|
|
|
const needsReRun =
|
|
!activeTest &&
|
|
latestValidated &&
|
|
(detResult !== "detected" || isStale);
|
|
|
|
return (
|
|
<div
|
|
key={tpl.id}
|
|
className="flex items-start justify-between rounded-lg border border-gray-800 bg-gray-800/30 p-4 transition-colors hover:border-gray-700"
|
|
>
|
|
{/* Left: template info */}
|
|
<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>
|
|
|
|
{/* Right: status + action */}
|
|
<div className="ml-3 flex shrink-0 flex-col items-end gap-2">
|
|
{/* ── Status badge ── */}
|
|
{activeTest && (
|
|
<span className="inline-flex items-center gap-1 rounded-full border border-blue-500/30 bg-blue-500/10 px-2 py-0.5 text-[10px] font-medium text-blue-400">
|
|
<Clock className="h-2.5 w-2.5" />
|
|
{ACTIVE_LABEL[activeTest.state as TestState] ?? activeTest.state.replace(/_/g, " ")}
|
|
</span>
|
|
)}
|
|
|
|
{!activeTest && latestValidated && (
|
|
<div className="flex flex-col items-end gap-0.5">
|
|
<span className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium ${detBadgeStyle}`}>
|
|
{detResult === "detected"
|
|
? <CheckCircle className="h-2.5 w-2.5" />
|
|
: <AlertTriangle className="h-2.5 w-2.5" />
|
|
}
|
|
{detLabel}
|
|
</span>
|
|
{isStale && (
|
|
<span className="text-[9px] font-medium text-amber-400">
|
|
⚠ Coverage may be stale
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Action button ── */}
|
|
{activeTest ? (
|
|
<button
|
|
onClick={() => navigate(`/tests/${activeTest.id}`)}
|
|
className="flex items-center gap-1 rounded-lg border border-blue-500/30 bg-blue-500/10 px-3 py-1.5 text-xs font-medium text-blue-400 hover:bg-blue-500/20 transition-colors"
|
|
>
|
|
<ExternalLink className="h-3.5 w-3.5" />
|
|
View test
|
|
</button>
|
|
) : canRunTemplate ? (
|
|
<button
|
|
onClick={() => setTemplateFormId(tpl.id)}
|
|
className={`flex items-center gap-1 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${
|
|
latestValidated && detResult === "detected" && !isStale
|
|
? "border-gray-600/30 bg-gray-800/50 text-gray-400 hover:border-gray-600 hover:text-gray-300"
|
|
: "border-cyan-500/30 bg-cyan-500/10 text-cyan-400 hover:bg-cyan-500/20"
|
|
}`}
|
|
>
|
|
<FlaskConical className="h-3.5 w-3.5" />
|
|
{needsReRun ? "Run This Test" : latestValidated ? "Re-run" : "Run This Test"}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</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 — shows tickets linked to tests of this technique */}
|
|
{technique && <TechniqueJiraSection technique={technique} />}
|
|
|
|
{/* 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 items-start">
|
|
{defs.map((def) => {
|
|
const isExpanded = expandedId === def.d3fend_id;
|
|
return (
|
|
<div
|
|
key={def.d3fend_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.d3fend_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>
|
|
);
|
|
}
|