feat: Phase 8 - Frontend main views (T-026 to T-031)
Implement all main frontend views for the MITRE ATT&CK coverage platform: - T-026: Dashboard with coverage summary cards and tactic breakdown table - T-027: Interactive ATT&CK matrix with filtering by status, tactic, platform - T-028: Technique detail page with tests, intel items, and review actions - T-029: Test creation form with technique selector and validation - T-030: Test detail page with drag and drop evidence upload and download - T-031: System admin panel with MITRE sync and intel scan controls New components: CoverageSummaryCard, TacticCoverageChart, AttackMatrix, TechniqueCell, TestForm, EvidenceUpload, EvidenceList New API modules: metrics.ts, techniques.ts, tests.ts, evidence.ts, system.ts All views use TanStack Query for data fetching with proper loading and error states. Role-based UI controls for admin/lead actions.
This commit is contained in:
355
frontend/src/pages/TestDetailPage.tsx
Normal file
355
frontend/src/pages/TestDetailPage.tsx
Normal file
@@ -0,0 +1,355 @@
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
ArrowLeft,
|
||||
FlaskConical,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Clock,
|
||||
FileText,
|
||||
} from "lucide-react";
|
||||
import { getTestById, validateTest, rejectTest } from "../api/tests";
|
||||
import { uploadEvidence, getEvidence } from "../api/evidence";
|
||||
import EvidenceUpload from "../components/EvidenceUpload";
|
||||
import EvidenceList from "../components/EvidenceList";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import type { TestState, TestResult } from "../types/models";
|
||||
import { useState } from "react";
|
||||
|
||||
const testStateBadgeColors: Record<TestState, string> = {
|
||||
draft: "bg-gray-800/50 text-gray-400 border-gray-600/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",
|
||||
};
|
||||
|
||||
const RESULTS: { value: TestResult; label: string }[] = [
|
||||
{ value: "detected", label: "Detected" },
|
||||
{ value: "not_detected", label: "Not Detected" },
|
||||
{ value: "partially_detected", label: "Partially Detected" },
|
||||
];
|
||||
|
||||
export default function TestDetailPage() {
|
||||
const { testId } = useParams<{ testId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { user } = useAuth();
|
||||
|
||||
const [showValidateModal, setShowValidateModal] = useState(false);
|
||||
const [selectedResult, setSelectedResult] = useState<TestResult>("detected");
|
||||
|
||||
const canValidate =
|
||||
user?.role === "admin" || user?.role === "red_lead" || user?.role === "blue_lead";
|
||||
|
||||
const {
|
||||
data: test,
|
||||
isLoading,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ["test", testId],
|
||||
queryFn: () => getTestById(testId!),
|
||||
enabled: !!testId,
|
||||
});
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: (file: File) => uploadEvidence(testId!, file),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["test", testId] });
|
||||
},
|
||||
});
|
||||
|
||||
const validateMutation = useMutation({
|
||||
mutationFn: () => validateTest(testId!, { result: selectedResult }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["test", testId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["techniques"] });
|
||||
setShowValidateModal(false);
|
||||
},
|
||||
});
|
||||
|
||||
const rejectMutation = useMutation({
|
||||
mutationFn: () => rejectTest(testId!),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["test", testId] });
|
||||
},
|
||||
});
|
||||
|
||||
const handleDownload = async (evidenceId: string) => {
|
||||
try {
|
||||
const evidence = await getEvidence(evidenceId);
|
||||
if (evidence.download_url) {
|
||||
window.open(evidence.download_url, "_blank");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to get download URL:", err);
|
||||
}
|
||||
};
|
||||
|
||||
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 || !test) {
|
||||
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 test</p>
|
||||
<button
|
||||
onClick={() => navigate("/tests")}
|
||||
className="mt-2 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to tests
|
||||
</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",
|
||||
});
|
||||
};
|
||||
|
||||
const canEdit = test.state === "draft" || test.state === "rejected";
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="flex items-center gap-1 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back
|
||||
</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">
|
||||
<FlaskConical 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">{test.name}</h1>
|
||||
<span
|
||||
className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
|
||||
testStateBadgeColors[test.state]
|
||||
}`}
|
||||
>
|
||||
{test.state.replace(/_/g, " ")}
|
||||
</span>
|
||||
{test.result && (
|
||||
<span
|
||||
className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
|
||||
testResultBadgeColors[test.result]
|
||||
}`}
|
||||
>
|
||||
{test.result.replace(/_/g, " ")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Created {formatDate(test.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
{canValidate && canEdit && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowValidateModal(true)}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-500 transition-colors"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
Validate
|
||||
</button>
|
||||
<button
|
||||
onClick={() => rejectMutation.mutate()}
|
||||
disabled={rejectMutation.isPending}
|
||||
className="flex items-center gap-1.5 rounded-lg border border-red-500/30 bg-red-900/20 px-4 py-2 text-sm font-medium text-red-400 hover:bg-red-900/40 transition-colors"
|
||||
>
|
||||
{rejectMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<XCircle className="h-4 w-4" />
|
||||
)}
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Grid */}
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Description */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-3 text-lg font-semibold text-white">Description</h2>
|
||||
<p className="text-sm text-gray-400 leading-relaxed">
|
||||
{test.description || "No description provided."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Procedure */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-3 text-lg font-semibold text-white">Procedure</h2>
|
||||
{test.procedure_text ? (
|
||||
<pre className="whitespace-pre-wrap rounded-lg bg-gray-800 p-4 font-mono text-sm text-gray-300">
|
||||
{test.procedure_text}
|
||||
</pre>
|
||||
) : (
|
||||
<p className="text-sm text-gray-500">No procedure documented.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Evidence Section */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">Evidence</h2>
|
||||
|
||||
{/* Upload */}
|
||||
<EvidenceUpload
|
||||
onUpload={async (file) => {
|
||||
await uploadMutation.mutateAsync(file);
|
||||
}}
|
||||
isUploading={uploadMutation.isPending}
|
||||
/>
|
||||
|
||||
{uploadMutation.isError && (
|
||||
<div className="mt-3 rounded-lg border border-red-500/30 bg-red-900/20 p-3">
|
||||
<p className="text-sm text-red-400">
|
||||
Upload failed: {(uploadMutation.error as Error)?.message}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Evidence List */}
|
||||
<div className="mt-6">
|
||||
<EvidenceList
|
||||
evidences={test.evidences || []}
|
||||
onDownload={handleDownload}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* 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">Platform</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300 capitalize">
|
||||
{test.platform || "—"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Tool Used</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300">{test.tool_used || "—"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Execution Date</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300">
|
||||
{formatDate(test.execution_date)}
|
||||
</dd>
|
||||
</div>
|
||||
{test.validated_at && (
|
||||
<div>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Validated</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300">
|
||||
{formatDate(test.validated_at)}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Validate Modal */}
|
||||
{showValidateModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="w-full max-w-md rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h3 className="text-lg font-semibold text-white">Validate Test</h3>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Select the detection result for this test.
|
||||
</p>
|
||||
|
||||
<div className="mt-4 space-y-2">
|
||||
{RESULTS.map((r) => (
|
||||
<label
|
||||
key={r.value}
|
||||
className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
|
||||
selectedResult === r.value
|
||||
? "border-cyan-500 bg-cyan-500/10"
|
||||
: "border-gray-700 bg-gray-800 hover:border-gray-600"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="result"
|
||||
value={r.value}
|
||||
checked={selectedResult === r.value}
|
||||
onChange={(e) => setSelectedResult(e.target.value as TestResult)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div
|
||||
className={`h-4 w-4 rounded-full border-2 ${
|
||||
selectedResult === r.value
|
||||
? "border-cyan-500 bg-cyan-500"
|
||||
: "border-gray-600"
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm text-gray-200">{r.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => setShowValidateModal(false)}
|
||||
className="rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-400 hover:bg-gray-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => validateMutation.mutate()}
|
||||
disabled={validateMutation.isPending}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-500 disabled:opacity-50"
|
||||
>
|
||||
{validateMutation.isPending && (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
)}
|
||||
Confirm Validation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user