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:
112
frontend/src/components/AttackMatrix.tsx
Normal file
112
frontend/src/components/AttackMatrix.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { useMemo } from "react";
|
||||
import TechniqueCell from "./TechniqueCell";
|
||||
import type { TechniqueSummary } from "../api/techniques";
|
||||
|
||||
interface AttackMatrixProps {
|
||||
techniques: TechniqueSummary[];
|
||||
}
|
||||
|
||||
// MITRE ATT&CK Enterprise Tactics in order
|
||||
const TACTIC_ORDER = [
|
||||
"reconnaissance",
|
||||
"resource-development",
|
||||
"initial-access",
|
||||
"execution",
|
||||
"persistence",
|
||||
"privilege-escalation",
|
||||
"defense-evasion",
|
||||
"credential-access",
|
||||
"discovery",
|
||||
"lateral-movement",
|
||||
"collection",
|
||||
"command-and-control",
|
||||
"exfiltration",
|
||||
"impact",
|
||||
];
|
||||
|
||||
const formatTacticName = (tactic: string): string => {
|
||||
return tactic
|
||||
.split("-")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(" ");
|
||||
};
|
||||
|
||||
export default function AttackMatrix({ techniques }: AttackMatrixProps) {
|
||||
// Group techniques by tactic
|
||||
const groupedByTactic = useMemo(() => {
|
||||
const groups: Record<string, TechniqueSummary[]> = {};
|
||||
|
||||
for (const tech of techniques) {
|
||||
// A technique can belong to multiple tactics (comma-separated)
|
||||
const tactics = tech.tactic
|
||||
? tech.tactic.split(",").map((t) => t.trim().toLowerCase())
|
||||
: ["unknown"];
|
||||
|
||||
for (const tactic of tactics) {
|
||||
if (!groups[tactic]) {
|
||||
groups[tactic] = [];
|
||||
}
|
||||
groups[tactic].push(tech);
|
||||
}
|
||||
}
|
||||
|
||||
// Sort techniques within each tactic by mitre_id
|
||||
for (const tactic of Object.keys(groups)) {
|
||||
groups[tactic].sort((a, b) => a.mitre_id.localeCompare(b.mitre_id));
|
||||
}
|
||||
|
||||
return groups;
|
||||
}, [techniques]);
|
||||
|
||||
// Get ordered tactics that have techniques
|
||||
const orderedTactics = useMemo(() => {
|
||||
const tacticSet = new Set(Object.keys(groupedByTactic));
|
||||
const ordered = TACTIC_ORDER.filter((t) => tacticSet.has(t));
|
||||
// Add any unknown tactics at the end
|
||||
const remaining = Array.from(tacticSet).filter((t) => !TACTIC_ORDER.includes(t));
|
||||
return [...ordered, ...remaining];
|
||||
}, [groupedByTactic]);
|
||||
|
||||
if (techniques.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-8 text-center">
|
||||
<p className="text-gray-400">No techniques found matching your filters</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto rounded-xl border border-gray-800 bg-gray-900">
|
||||
<div className="min-w-max p-4">
|
||||
<div className="flex gap-3">
|
||||
{orderedTactics.map((tactic) => (
|
||||
<div key={tactic} className="w-48 flex-shrink-0">
|
||||
{/* Tactic header */}
|
||||
<div className="mb-3 rounded-lg bg-gray-800 px-3 py-2">
|
||||
<h3 className="text-center text-sm font-semibold text-cyan-400">
|
||||
{formatTacticName(tactic)}
|
||||
</h3>
|
||||
<p className="mt-0.5 text-center text-xs text-gray-500">
|
||||
{groupedByTactic[tactic]?.length || 0} techniques
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Technique cells */}
|
||||
<div className="space-y-2">
|
||||
{groupedByTactic[tactic]?.map((tech) => (
|
||||
<TechniqueCell
|
||||
key={`${tactic}-${tech.mitre_id}`}
|
||||
mitreId={tech.mitre_id}
|
||||
name={tech.name}
|
||||
status={tech.status_global}
|
||||
reviewRequired={tech.review_required}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
frontend/src/components/CoverageSummaryCard.tsx
Normal file
38
frontend/src/components/CoverageSummaryCard.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface CoverageSummaryCardProps {
|
||||
title: string;
|
||||
value: number;
|
||||
total?: number;
|
||||
icon: ReactNode;
|
||||
colorClass: string;
|
||||
bgClass: string;
|
||||
}
|
||||
|
||||
export default function CoverageSummaryCard({
|
||||
title,
|
||||
value,
|
||||
total,
|
||||
icon,
|
||||
colorClass,
|
||||
bgClass,
|
||||
}: CoverageSummaryCardProps) {
|
||||
const percentage = total && total > 0 ? ((value / total) * 100).toFixed(1) : null;
|
||||
|
||||
return (
|
||||
<div className={`rounded-xl border border-gray-800 ${bgClass} p-5`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-400">{title}</p>
|
||||
<p className={`mt-1 text-3xl font-bold ${colorClass}`}>{value}</p>
|
||||
{percentage !== null && (
|
||||
<p className="mt-1 text-xs text-gray-500">{percentage}% of total</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`rounded-lg p-3 ${bgClass} border border-gray-700`}>
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
97
frontend/src/components/EvidenceList.tsx
Normal file
97
frontend/src/components/EvidenceList.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import { FileIcon, Download, ExternalLink, Copy, Check } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
interface Evidence {
|
||||
id: string;
|
||||
test_id: string;
|
||||
file_name: string;
|
||||
sha256_hash: string;
|
||||
uploaded_by: string | null;
|
||||
uploaded_at: string;
|
||||
download_url?: string;
|
||||
}
|
||||
|
||||
interface EvidenceListProps {
|
||||
evidences: Evidence[];
|
||||
onDownload: (evidenceId: string) => void;
|
||||
}
|
||||
|
||||
export default function EvidenceList({ evidences, onDownload }: EvidenceListProps) {
|
||||
const [copiedHash, setCopiedHash] = useState<string | null>(null);
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
const copyHash = async (hash: string) => {
|
||||
await navigator.clipboard.writeText(hash);
|
||||
setCopiedHash(hash);
|
||||
setTimeout(() => setCopiedHash(null), 2000);
|
||||
};
|
||||
|
||||
if (evidences.length === 0) {
|
||||
return (
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-800/30 p-6 text-center">
|
||||
<FileIcon className="mx-auto h-10 w-10 text-gray-600" />
|
||||
<p className="mt-2 text-sm text-gray-400">No evidence files uploaded yet</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{evidences.map((evidence) => (
|
||||
<div
|
||||
key={evidence.id}
|
||||
className="rounded-lg border border-gray-800 bg-gray-800/30 p-4 transition-colors hover:bg-gray-800/50"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="rounded-lg bg-gray-700 p-2">
|
||||
<FileIcon className="h-5 w-5 text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-200">{evidence.file_name}</p>
|
||||
<p className="mt-0.5 text-xs text-gray-500">
|
||||
Uploaded {formatDate(evidence.uploaded_at)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onDownload(evidence.id)}
|
||||
className="flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-300 hover:border-cyan-500/50 hover:text-cyan-400 transition-colors"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* SHA256 Hash */}
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<span className="text-xs font-medium text-gray-500">SHA256:</span>
|
||||
<code className="flex-1 truncate rounded bg-gray-900 px-2 py-1 font-mono text-xs text-gray-400">
|
||||
{evidence.sha256_hash}
|
||||
</code>
|
||||
<button
|
||||
onClick={() => copyHash(evidence.sha256_hash)}
|
||||
className="rounded p-1 text-gray-500 hover:bg-gray-700 hover:text-gray-300"
|
||||
title="Copy hash"
|
||||
>
|
||||
{copiedHash === evidence.sha256_hash ? (
|
||||
<Check className="h-4 w-4 text-green-400" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
140
frontend/src/components/EvidenceUpload.tsx
Normal file
140
frontend/src/components/EvidenceUpload.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import { useState, useCallback, useRef } from "react";
|
||||
import { Upload, Loader2, X, FileIcon } from "lucide-react";
|
||||
|
||||
interface EvidenceUploadProps {
|
||||
onUpload: (file: File) => Promise<void>;
|
||||
isUploading: boolean;
|
||||
}
|
||||
|
||||
export default function EvidenceUpload({ onUpload, isUploading }: EvidenceUploadProps) {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file) {
|
||||
setSelectedFile(file);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setSelectedFile(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (selectedFile) {
|
||||
await onUpload(selectedFile);
|
||||
setSelectedFile(null);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const clearSelection = () => {
|
||||
setSelectedFile(null);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes < 1024) return bytes + " B";
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Drop zone */}
|
||||
<div
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={`cursor-pointer rounded-lg border-2 border-dashed p-8 text-center transition-colors ${
|
||||
isDragging
|
||||
? "border-cyan-500 bg-cyan-500/10"
|
||||
: "border-gray-700 bg-gray-800/50 hover:border-gray-600 hover:bg-gray-800"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
/>
|
||||
<Upload
|
||||
className={`mx-auto h-10 w-10 ${isDragging ? "text-cyan-400" : "text-gray-500"}`}
|
||||
/>
|
||||
<p className="mt-2 text-sm text-gray-400">
|
||||
{isDragging ? (
|
||||
"Drop file here"
|
||||
) : (
|
||||
<>
|
||||
Drag and drop a file, or <span className="text-cyan-400">browse</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Screenshots, logs, pcap files, etc.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Selected file preview */}
|
||||
{selectedFile && (
|
||||
<div className="flex items-center justify-between rounded-lg border border-gray-700 bg-gray-800 p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<FileIcon className="h-8 w-8 text-gray-400" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-200">{selectedFile.name}</p>
|
||||
<p className="text-xs text-gray-500">{formatFileSize(selectedFile.size)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={clearSelection}
|
||||
disabled={isUploading}
|
||||
className="rounded p-1 text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={isUploading}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-cyan-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50"
|
||||
>
|
||||
{isUploading ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Uploading...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload className="h-4 w-4" />
|
||||
Upload
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
97
frontend/src/components/TacticCoverageChart.tsx
Normal file
97
frontend/src/components/TacticCoverageChart.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import type { TacticCoverage } from "../types/models";
|
||||
|
||||
interface TacticCoverageChartProps {
|
||||
data: TacticCoverage[];
|
||||
}
|
||||
|
||||
export default function TacticCoverageChart({ data }: TacticCoverageChartProps) {
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<p className="text-center text-gray-400">No tactic data available</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">Coverage by Tactic</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">Tactic</th>
|
||||
<th className="pb-3 px-4 text-center font-medium text-gray-400">Total</th>
|
||||
<th className="pb-3 px-4 text-center font-medium text-green-400">Validated</th>
|
||||
<th className="pb-3 px-4 text-center font-medium text-yellow-400">Partial</th>
|
||||
<th className="pb-3 px-4 text-center font-medium text-blue-400">In Progress</th>
|
||||
<th className="pb-3 px-4 text-center font-medium text-red-400">Not Covered</th>
|
||||
<th className="pb-3 px-4 text-center font-medium text-gray-500">Not Evaluated</th>
|
||||
<th className="pb-3 pl-4 font-medium text-gray-400">Coverage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((tactic) => {
|
||||
const coveragePercent =
|
||||
tactic.total > 0
|
||||
? ((tactic.validated + tactic.partial) / tactic.total) * 100
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={tactic.tactic}
|
||||
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-white capitalize">
|
||||
{tactic.tactic.replace(/-/g, " ")}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center text-gray-300">{tactic.total}</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<span className={tactic.validated > 0 ? "text-green-400 font-medium" : "text-gray-600"}>
|
||||
{tactic.validated}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<span className={tactic.partial > 0 ? "text-yellow-400 font-medium" : "text-gray-600"}>
|
||||
{tactic.partial}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<span className={tactic.in_progress > 0 ? "text-blue-400 font-medium" : "text-gray-600"}>
|
||||
{tactic.in_progress}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<span className={tactic.not_covered > 0 ? "text-red-400 font-medium" : "text-gray-600"}>
|
||||
{tactic.not_covered}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<span className={tactic.not_evaluated > 0 ? "text-gray-400" : "text-gray-600"}>
|
||||
{tactic.not_evaluated}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 pl-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-2 w-24 overflow-hidden rounded-full bg-gray-700">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-green-500 to-green-400"
|
||||
style={{ width: `${coveragePercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-gray-400 w-12">
|
||||
{coveragePercent.toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
78
frontend/src/components/TechniqueCell.tsx
Normal file
78
frontend/src/components/TechniqueCell.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import type { TechniqueStatus } from "../types/models";
|
||||
|
||||
interface TechniqueCellProps {
|
||||
mitreId: string;
|
||||
name: string;
|
||||
status: TechniqueStatus;
|
||||
reviewRequired?: boolean;
|
||||
}
|
||||
|
||||
const statusColors: Record<TechniqueStatus, { bg: string; border: string; text: string }> = {
|
||||
validated: {
|
||||
bg: "bg-green-900/40",
|
||||
border: "border-green-500/50",
|
||||
text: "text-green-400",
|
||||
},
|
||||
partial: {
|
||||
bg: "bg-yellow-900/40",
|
||||
border: "border-yellow-500/50",
|
||||
text: "text-yellow-400",
|
||||
},
|
||||
in_progress: {
|
||||
bg: "bg-blue-900/40",
|
||||
border: "border-blue-500/50",
|
||||
text: "text-blue-400",
|
||||
},
|
||||
not_covered: {
|
||||
bg: "bg-red-900/40",
|
||||
border: "border-red-500/50",
|
||||
text: "text-red-400",
|
||||
},
|
||||
not_evaluated: {
|
||||
bg: "bg-gray-800/40",
|
||||
border: "border-gray-600/50",
|
||||
text: "text-gray-400",
|
||||
},
|
||||
review_required: {
|
||||
bg: "bg-yellow-900/40",
|
||||
border: "border-yellow-500/50",
|
||||
text: "text-yellow-400",
|
||||
},
|
||||
};
|
||||
|
||||
export default function TechniqueCell({
|
||||
mitreId,
|
||||
name,
|
||||
status,
|
||||
reviewRequired = false,
|
||||
}: TechniqueCellProps) {
|
||||
const navigate = useNavigate();
|
||||
const colors = statusColors[status] || statusColors.not_evaluated;
|
||||
|
||||
const handleClick = () => {
|
||||
navigate(`/techniques/${mitreId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className={`
|
||||
relative w-full rounded-md border p-2 text-left transition-all
|
||||
hover:scale-[1.02] hover:shadow-lg hover:z-10
|
||||
${colors.bg} ${colors.border}
|
||||
`}
|
||||
>
|
||||
{reviewRequired && (
|
||||
<div className="absolute -right-1 -top-1 rounded-full bg-orange-500 p-0.5">
|
||||
<AlertTriangle className="h-3 w-3 text-white" />
|
||||
</div>
|
||||
)}
|
||||
<p className={`text-xs font-semibold ${colors.text}`}>{mitreId}</p>
|
||||
<p className="mt-0.5 truncate text-xs text-gray-300" title={name}>
|
||||
{name}
|
||||
</p>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
258
frontend/src/components/TestForm.tsx
Normal file
258
frontend/src/components/TestForm.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { getTechniques, type TechniqueSummary } from "../api/techniques";
|
||||
import type { TestResult } from "../types/models";
|
||||
|
||||
export interface TestFormData {
|
||||
technique_id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
platform: string;
|
||||
procedure_text: string;
|
||||
tool_used: string;
|
||||
result?: TestResult;
|
||||
}
|
||||
|
||||
interface TestFormProps {
|
||||
initialData?: Partial<TestFormData>;
|
||||
preselectedTechniqueId?: string;
|
||||
onSubmit: (data: TestFormData) => void;
|
||||
isSubmitting: boolean;
|
||||
showResult?: boolean;
|
||||
}
|
||||
|
||||
const PLATFORMS = [
|
||||
{ value: "", label: "Select platform" },
|
||||
{ value: "windows", label: "Windows" },
|
||||
{ value: "linux", label: "Linux" },
|
||||
{ value: "macos", label: "macOS" },
|
||||
{ value: "cloud", label: "Cloud" },
|
||||
{ value: "network", label: "Network" },
|
||||
];
|
||||
|
||||
const RESULTS: { value: TestResult | ""; label: string }[] = [
|
||||
{ value: "", label: "Select result (optional)" },
|
||||
{ value: "detected", label: "Detected" },
|
||||
{ value: "not_detected", label: "Not Detected" },
|
||||
{ value: "partially_detected", label: "Partially Detected" },
|
||||
];
|
||||
|
||||
export default function TestForm({
|
||||
initialData,
|
||||
preselectedTechniqueId,
|
||||
onSubmit,
|
||||
isSubmitting,
|
||||
showResult = false,
|
||||
}: TestFormProps) {
|
||||
const [formData, setFormData] = useState<TestFormData>({
|
||||
technique_id: preselectedTechniqueId || initialData?.technique_id || "",
|
||||
name: initialData?.name || "",
|
||||
description: initialData?.description || "",
|
||||
platform: initialData?.platform || "",
|
||||
procedure_text: initialData?.procedure_text || "",
|
||||
tool_used: initialData?.tool_used || "",
|
||||
result: initialData?.result,
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
const { data: techniques, isLoading: techniquesLoading } = useQuery({
|
||||
queryKey: ["techniques"],
|
||||
queryFn: () => getTechniques(),
|
||||
});
|
||||
|
||||
// Update technique_id when preselected changes
|
||||
useEffect(() => {
|
||||
if (preselectedTechniqueId) {
|
||||
setFormData((prev) => ({ ...prev, technique_id: preselectedTechniqueId }));
|
||||
}
|
||||
}, [preselectedTechniqueId]);
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
// Clear error when user starts typing
|
||||
if (errors[name]) {
|
||||
setErrors((prev) => ({ ...prev, [name]: "" }));
|
||||
}
|
||||
};
|
||||
|
||||
const validate = (): boolean => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.technique_id) {
|
||||
newErrors.technique_id = "Technique is required";
|
||||
}
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = "Name is required";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (validate()) {
|
||||
onSubmit({
|
||||
...formData,
|
||||
result: formData.result || undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Technique Selector */}
|
||||
<div>
|
||||
<label htmlFor="technique_id" className="block text-sm font-medium text-gray-300">
|
||||
Technique *
|
||||
</label>
|
||||
<select
|
||||
id="technique_id"
|
||||
name="technique_id"
|
||||
value={formData.technique_id}
|
||||
onChange={handleChange}
|
||||
disabled={!!preselectedTechniqueId || techniquesLoading}
|
||||
className={`mt-1 block w-full rounded-lg border bg-gray-800 px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500 ${
|
||||
errors.technique_id ? "border-red-500" : "border-gray-700"
|
||||
} ${preselectedTechniqueId ? "opacity-70" : ""}`}
|
||||
>
|
||||
<option value="">Select a technique</option>
|
||||
{techniques?.map((tech: TechniqueSummary) => (
|
||||
<option key={tech.id} value={tech.id}>
|
||||
{tech.mitre_id} - {tech.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.technique_id && (
|
||||
<p className="mt-1 text-sm text-red-400">{errors.technique_id}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-300">
|
||||
Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="Enter test name"
|
||||
className={`mt-1 block w-full rounded-lg border bg-gray-800 px-3 py-2 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 ${
|
||||
errors.name ? "border-red-500" : "border-gray-700"
|
||||
}`}
|
||||
/>
|
||||
{errors.name && <p className="mt-1 text-sm text-red-400">{errors.name}</p>}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label htmlFor="description" className="block text-sm font-medium text-gray-300">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
placeholder="Describe the test objective and scope"
|
||||
className="mt-1 block w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Platform */}
|
||||
<div>
|
||||
<label htmlFor="platform" className="block text-sm font-medium text-gray-300">
|
||||
Platform
|
||||
</label>
|
||||
<select
|
||||
id="platform"
|
||||
name="platform"
|
||||
value={formData.platform}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500"
|
||||
>
|
||||
{PLATFORMS.map((p) => (
|
||||
<option key={p.value} value={p.value}>
|
||||
{p.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Procedure */}
|
||||
<div>
|
||||
<label htmlFor="procedure_text" className="block text-sm font-medium text-gray-300">
|
||||
Procedure
|
||||
</label>
|
||||
<textarea
|
||||
id="procedure_text"
|
||||
name="procedure_text"
|
||||
value={formData.procedure_text}
|
||||
onChange={handleChange}
|
||||
rows={5}
|
||||
placeholder="Step-by-step procedure for executing this test"
|
||||
className="mt-1 block w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 font-mono text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tool Used */}
|
||||
<div>
|
||||
<label htmlFor="tool_used" className="block text-sm font-medium text-gray-300">
|
||||
Tool Used
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="tool_used"
|
||||
name="tool_used"
|
||||
value={formData.tool_used}
|
||||
onChange={handleChange}
|
||||
placeholder="e.g., Atomic Red Team, Cobalt Strike, etc."
|
||||
className="mt-1 block w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Result (optional, for editing) */}
|
||||
{showResult && (
|
||||
<div>
|
||||
<label htmlFor="result" className="block text-sm font-medium text-gray-300">
|
||||
Result
|
||||
</label>
|
||||
<select
|
||||
id="result"
|
||||
name="result"
|
||||
value={formData.result || ""}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500"
|
||||
>
|
||||
{RESULTS.map((r) => (
|
||||
<option key={r.value} value={r.value}>
|
||||
{r.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex items-center gap-2 rounded-lg bg-cyan-600 px-6 py-2.5 font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
{isSubmitting ? "Creating..." : "Create Test"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user