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. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,8 +1,280 @@
|
||||
import { useState, useMemo } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Loader2, AlertCircle, Filter, X, Grid3X3, List } from "lucide-react";
|
||||
import { getTechniques, type TechniqueSummary } from "../api/techniques";
|
||||
import AttackMatrix from "../components/AttackMatrix";
|
||||
import type { TechniqueStatus } from "../types/models";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const STATUS_OPTIONS: { value: TechniqueStatus | "all"; label: string; color: string }[] = [
|
||||
{ value: "all", label: "All Statuses", color: "text-gray-400" },
|
||||
{ value: "validated", label: "Validated", color: "text-green-400" },
|
||||
{ value: "partial", label: "Partial", color: "text-yellow-400" },
|
||||
{ value: "in_progress", label: "In Progress", color: "text-blue-400" },
|
||||
{ value: "not_covered", label: "Not Covered", color: "text-red-400" },
|
||||
{ value: "not_evaluated", label: "Not Evaluated", color: "text-gray-400" },
|
||||
];
|
||||
|
||||
const PLATFORM_OPTIONS = ["all", "windows", "linux", "macos", "cloud", "network"] as const;
|
||||
|
||||
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",
|
||||
};
|
||||
|
||||
export default function TechniquesPage() {
|
||||
const navigate = useNavigate();
|
||||
const [viewMode, setViewMode] = useState<"matrix" | "list">("matrix");
|
||||
const [statusFilter, setStatusFilter] = useState<TechniqueStatus | "all">("all");
|
||||
const [platformFilter, setPlatformFilter] = useState<string>("all");
|
||||
const [tacticFilter, setTacticFilter] = useState<string>("all");
|
||||
|
||||
const {
|
||||
data: techniques,
|
||||
isLoading,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ["techniques"],
|
||||
queryFn: () => getTechniques(),
|
||||
});
|
||||
|
||||
// Extract unique tactics from techniques
|
||||
const availableTactics = useMemo(() => {
|
||||
if (!techniques) return [];
|
||||
const tactics = new Set<string>();
|
||||
for (const tech of techniques) {
|
||||
if (tech.tactic) {
|
||||
tech.tactic.split(",").forEach((t) => tactics.add(t.trim().toLowerCase()));
|
||||
}
|
||||
}
|
||||
return Array.from(tactics).sort();
|
||||
}, [techniques]);
|
||||
|
||||
// Apply filters
|
||||
const filteredTechniques = useMemo(() => {
|
||||
if (!techniques) return [];
|
||||
|
||||
return techniques.filter((tech: TechniqueSummary) => {
|
||||
// Status filter
|
||||
if (statusFilter !== "all" && tech.status_global !== statusFilter) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Tactic filter
|
||||
if (tacticFilter !== "all") {
|
||||
const techTactics = tech.tactic?.split(",").map((t) => t.trim().toLowerCase()) || [];
|
||||
if (!techTactics.includes(tacticFilter)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}, [techniques, statusFilter, tacticFilter]);
|
||||
|
||||
const hasActiveFilters = statusFilter !== "all" || tacticFilter !== "all" || platformFilter !== "all";
|
||||
|
||||
const clearFilters = () => {
|
||||
setStatusFilter("all");
|
||||
setPlatformFilter("all");
|
||||
setTacticFilter("all");
|
||||
};
|
||||
|
||||
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 techniques</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold text-white">Techniques</h1>
|
||||
<p className="text-gray-400">MITRE ATT&CK technique listing 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">ATT&CK Techniques</h1>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
MITRE ATT&CK coverage matrix — click any technique for details
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800 p-1">
|
||||
<button
|
||||
onClick={() => setViewMode("matrix")}
|
||||
className={`flex items-center gap-1.5 rounded px-3 py-1.5 text-sm transition-colors ${
|
||||
viewMode === "matrix"
|
||||
? "bg-cyan-500/20 text-cyan-400"
|
||||
: "text-gray-400 hover:text-gray-200"
|
||||
}`}
|
||||
>
|
||||
<Grid3X3 className="h-4 w-4" />
|
||||
Matrix
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode("list")}
|
||||
className={`flex items-center gap-1.5 rounded px-3 py-1.5 text-sm transition-colors ${
|
||||
viewMode === "list"
|
||||
? "bg-cyan-500/20 text-cyan-400"
|
||||
: "text-gray-400 hover:text-gray-200"
|
||||
}`}
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
List
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap items-center gap-4 rounded-xl border border-gray-800 bg-gray-900 p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-sm font-medium text-gray-400">Filters:</span>
|
||||
</div>
|
||||
|
||||
{/* Status filter */}
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value as TechniqueStatus | "all")}
|
||||
className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
|
||||
>
|
||||
{STATUS_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Tactic filter */}
|
||||
<select
|
||||
value={tacticFilter}
|
||||
onChange={(e) => setTacticFilter(e.target.value)}
|
||||
className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
|
||||
>
|
||||
<option value="all">All Tactics</option>
|
||||
{availableTactics.map((tactic) => (
|
||||
<option key={tactic} value={tactic}>
|
||||
{tactic
|
||||
.split("-")
|
||||
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
|
||||
.join(" ")}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Platform filter */}
|
||||
<select
|
||||
value={platformFilter}
|
||||
onChange={(e) => setPlatformFilter(e.target.value)}
|
||||
className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
|
||||
>
|
||||
{PLATFORM_OPTIONS.map((platform) => (
|
||||
<option key={platform} value={platform}>
|
||||
{platform === "all" ? "All Platforms" : platform.charAt(0).toUpperCase() + platform.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="flex items-center gap-1 rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-400 hover:border-red-500/50 hover:text-red-400"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="ml-auto text-sm text-gray-500">
|
||||
Showing {filteredTechniques.length} of {techniques?.length || 0} techniques
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Matrix or List View */}
|
||||
{viewMode === "matrix" ? (
|
||||
<AttackMatrix techniques={filteredTechniques} />
|
||||
) : (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-800">
|
||||
<th className="px-4 py-3 font-medium text-gray-400">MITRE ID</th>
|
||||
<th className="px-4 py-3 font-medium text-gray-400">Name</th>
|
||||
<th className="px-4 py-3 font-medium text-gray-400">Tactic</th>
|
||||
<th className="px-4 py-3 font-medium text-gray-400">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredTechniques.map((tech) => (
|
||||
<tr
|
||||
key={tech.id}
|
||||
onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
|
||||
className="cursor-pointer border-b border-gray-800/50 hover:bg-gray-800/50 transition-colors"
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<span className="font-mono text-cyan-400">{tech.mitre_id}</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-200">{tech.name}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-gray-400 capitalize">
|
||||
{tech.tactic?.replace(/-/g, " ") || "—"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
|
||||
statusBadgeColors[tech.status_global]
|
||||
}`}
|
||||
>
|
||||
{tech.status_global.replace(/_/g, " ")}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{filteredTechniques.length === 0 && (
|
||||
<div className="p-8 text-center text-gray-400">
|
||||
No techniques found matching your filters
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex flex-wrap items-center gap-4 rounded-xl border border-gray-800 bg-gray-900 p-4">
|
||||
<span className="text-sm font-medium text-gray-400">Legend:</span>
|
||||
{STATUS_OPTIONS.filter((s) => s.value !== "all").map((status) => (
|
||||
<div key={status.value} className="flex items-center gap-2">
|
||||
<div
|
||||
className={`h-3 w-3 rounded ${
|
||||
status.value === "validated"
|
||||
? "bg-green-500"
|
||||
: status.value === "partial"
|
||||
? "bg-yellow-500"
|
||||
: status.value === "in_progress"
|
||||
? "bg-blue-500"
|
||||
: status.value === "not_covered"
|
||||
? "bg-red-500"
|
||||
: "bg-gray-600"
|
||||
}`}
|
||||
/>
|
||||
<span className="text-xs text-gray-400">{status.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user