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:
@@ -1,8 +1,229 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Loader2, AlertCircle, FlaskConical, Plus } from "lucide-react";
|
||||
import { getTechniques, type TechniqueSummary } from "../api/techniques";
|
||||
import type { TestState, TestResult } from "../types/models";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
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",
|
||||
};
|
||||
|
||||
interface TestSummary {
|
||||
id: string;
|
||||
technique_id: string;
|
||||
technique_mitre_id: string;
|
||||
technique_name: string;
|
||||
name: string;
|
||||
state: TestState;
|
||||
result: TestResult | null;
|
||||
platform: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export default function TestsPage() {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
|
||||
const canCreate =
|
||||
user?.role === "admin" || user?.role === "red_tech" || user?.role === "blue_tech";
|
||||
|
||||
// For now, we'll fetch techniques to get their tests
|
||||
// In a production app, you'd want a dedicated /tests endpoint
|
||||
const {
|
||||
data: techniques,
|
||||
isLoading,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ["techniques"],
|
||||
queryFn: () => getTechniques(),
|
||||
});
|
||||
|
||||
// Note: Since we don't have a direct /tests list endpoint, we're showing
|
||||
// a message to navigate through techniques. In a full implementation,
|
||||
// you'd add a /tests endpoint to the backend.
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
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) {
|
||||
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 data</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold text-white">Tests</h1>
|
||||
<p className="text-gray-400">Security test management coming soon.</p>
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Tests</h1>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Security tests for technique validation
|
||||
</p>
|
||||
</div>
|
||||
{canCreate && (
|
||||
<button
|
||||
onClick={() => navigate("/tests/new")}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 transition-colors"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
New Test
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info Card */}
|
||||
<div className="rounded-xl border border-cyan-500/30 bg-cyan-500/10 p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="rounded-lg bg-cyan-500/20 p-3">
|
||||
<FlaskConical className="h-6 w-6 text-cyan-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">Browse Tests by Technique</h2>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Tests are organized by MITRE ATT&CK technique. Navigate to a technique from the{" "}
|
||||
<button
|
||||
onClick={() => navigate("/techniques")}
|
||||
className="text-cyan-400 hover:underline"
|
||||
>
|
||||
Techniques page
|
||||
</button>{" "}
|
||||
to view and manage its associated tests.
|
||||
</p>
|
||||
<div className="mt-4 flex flex-wrap gap-3">
|
||||
<button
|
||||
onClick={() => navigate("/techniques")}
|
||||
className="rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-4 py-2 text-sm font-medium text-cyan-400 hover:bg-cyan-500/20 transition-colors"
|
||||
>
|
||||
Browse Techniques Matrix
|
||||
</button>
|
||||
{canCreate && (
|
||||
<button
|
||||
onClick={() => navigate("/tests/new")}
|
||||
className="rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-sm font-medium text-gray-300 hover:border-gray-600 hover:text-white transition-colors"
|
||||
>
|
||||
Create Standalone Test
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
|
||||
<p className="text-sm text-gray-400">Techniques with Tests</p>
|
||||
<p className="mt-1 text-2xl font-bold text-cyan-400">
|
||||
{techniques?.filter((t: TechniqueSummary) => t.status_global !== "not_evaluated").length || 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
|
||||
<p className="text-sm text-gray-400">Validated</p>
|
||||
<p className="mt-1 text-2xl font-bold text-green-400">
|
||||
{techniques?.filter((t: TechniqueSummary) => t.status_global === "validated").length || 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
|
||||
<p className="text-sm text-gray-400">In Progress</p>
|
||||
<p className="mt-1 text-2xl font-bold text-blue-400">
|
||||
{techniques?.filter((t: TechniqueSummary) => t.status_global === "in_progress").length || 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
|
||||
<p className="text-sm text-gray-400">Pending Evaluation</p>
|
||||
<p className="mt-1 text-2xl font-bold text-gray-400">
|
||||
{techniques?.filter((t: TechniqueSummary) => t.status_global === "not_evaluated").length || 0}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Techniques with Recent Activity */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">Techniques Being Tested</h2>
|
||||
<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">Technique</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Name</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Status</th>
|
||||
<th className="pb-3 pl-4 font-medium text-gray-400">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{techniques
|
||||
?.filter((t: TechniqueSummary) => t.status_global !== "not_evaluated")
|
||||
.slice(0, 10)
|
||||
.map((tech: TechniqueSummary) => (
|
||||
<tr
|
||||
key={tech.id}
|
||||
className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
|
||||
>
|
||||
<td className="py-3 pr-4">
|
||||
<span className="font-mono text-cyan-400">{tech.mitre_id}</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-gray-200">{tech.name}</td>
|
||||
<td className="py-3 px-4">
|
||||
<span
|
||||
className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
|
||||
tech.status_global === "validated"
|
||||
? testStateBadgeColors.validated
|
||||
: tech.status_global === "in_progress"
|
||||
? testStateBadgeColors.in_review
|
||||
: tech.status_global === "partial"
|
||||
? "bg-yellow-900/50 text-yellow-400 border-yellow-500/30"
|
||||
: testStateBadgeColors.draft
|
||||
}`}
|
||||
>
|
||||
{tech.status_global.replace(/_/g, " ")}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 pl-4">
|
||||
<button
|
||||
onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
|
||||
className="text-sm text-cyan-400 hover:underline"
|
||||
>
|
||||
View Tests
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{techniques?.filter((t: TechniqueSummary) => t.status_global !== "not_evaluated").length === 0 && (
|
||||
<div className="py-8 text-center text-gray-400">
|
||||
No techniques have been tested yet. Create your first test to get started.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user