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:
@@ -2,7 +2,10 @@ import { Routes, Route, Navigate } from "react-router-dom";
|
||||
import LoginPage from "./pages/LoginPage";
|
||||
import DashboardPage from "./pages/DashboardPage";
|
||||
import TechniquesPage from "./pages/TechniquesPage";
|
||||
import TechniqueDetailPage from "./pages/TechniqueDetailPage";
|
||||
import TestsPage from "./pages/TestsPage";
|
||||
import TestCreatePage from "./pages/TestCreatePage";
|
||||
import TestDetailPage from "./pages/TestDetailPage";
|
||||
import SystemPage from "./pages/SystemPage";
|
||||
import Layout from "./components/Layout";
|
||||
import ProtectedRoute from "./components/ProtectedRoute";
|
||||
@@ -23,7 +26,10 @@ export default function App() {
|
||||
>
|
||||
<Route path="/dashboard" element={<DashboardPage />} />
|
||||
<Route path="/techniques" element={<TechniquesPage />} />
|
||||
<Route path="/techniques/:mitreId" element={<TechniqueDetailPage />} />
|
||||
<Route path="/tests" element={<TestsPage />} />
|
||||
<Route path="/tests/new" element={<TestCreatePage />} />
|
||||
<Route path="/tests/:testId" element={<TestDetailPage />} />
|
||||
<Route
|
||||
path="/system"
|
||||
element={
|
||||
|
||||
30
frontend/src/api/evidence.ts
Normal file
30
frontend/src/api/evidence.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import client from "./client";
|
||||
|
||||
export interface EvidenceOut {
|
||||
id: string;
|
||||
test_id: string;
|
||||
file_name: string;
|
||||
sha256_hash: string;
|
||||
uploaded_by: string | null;
|
||||
uploaded_at: string;
|
||||
download_url: string;
|
||||
}
|
||||
|
||||
/** Upload evidence file for a test. */
|
||||
export async function uploadEvidence(testId: string, file: File): Promise<EvidenceOut> {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
const { data } = await client.post<EvidenceOut>(`/tests/${testId}/evidence`, formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Get evidence metadata with download URL. */
|
||||
export async function getEvidence(evidenceId: string): Promise<EvidenceOut> {
|
||||
const { data } = await client.get<EvidenceOut>(`/evidence/${evidenceId}`);
|
||||
return data;
|
||||
}
|
||||
14
frontend/src/api/metrics.ts
Normal file
14
frontend/src/api/metrics.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import client from "./client";
|
||||
import type { CoverageSummary, TacticCoverage } from "../types/models";
|
||||
|
||||
/** Fetch the global coverage summary. */
|
||||
export async function getCoverageSummary(): Promise<CoverageSummary> {
|
||||
const { data } = await client.get<CoverageSummary>("/metrics/summary");
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Fetch coverage breakdown by tactic. */
|
||||
export async function getCoverageByTactic(): Promise<TacticCoverage[]> {
|
||||
const { data } = await client.get<TacticCoverage[]>("/metrics/by-tactic");
|
||||
return data;
|
||||
}
|
||||
41
frontend/src/api/system.ts
Normal file
41
frontend/src/api/system.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import client from "./client";
|
||||
|
||||
export interface SyncMitreResponse {
|
||||
message: string;
|
||||
new: number;
|
||||
updated: number;
|
||||
}
|
||||
|
||||
export interface IntelScanResponse {
|
||||
message: string;
|
||||
new_items: number;
|
||||
}
|
||||
|
||||
export interface SchedulerJob {
|
||||
id: string;
|
||||
name: string;
|
||||
next_run_time: string | null;
|
||||
}
|
||||
|
||||
export interface SchedulerStatusResponse {
|
||||
running: boolean;
|
||||
jobs: SchedulerJob[];
|
||||
}
|
||||
|
||||
/** Manually trigger MITRE ATT&CK sync. */
|
||||
export async function triggerMitreSync(): Promise<SyncMitreResponse> {
|
||||
const { data } = await client.post<SyncMitreResponse>("/system/sync-mitre");
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Manually trigger threat intelligence scan. */
|
||||
export async function triggerIntelScan(): Promise<IntelScanResponse> {
|
||||
const { data } = await client.post<IntelScanResponse>("/system/run-intel-scan");
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Get scheduler status. */
|
||||
export async function getSchedulerStatus(): Promise<SchedulerStatusResponse> {
|
||||
const { data } = await client.get<SchedulerStatusResponse>("/system/scheduler-status");
|
||||
return data;
|
||||
}
|
||||
74
frontend/src/api/techniques.ts
Normal file
74
frontend/src/api/techniques.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import client from "./client";
|
||||
import type { Technique, TechniqueStatus } from "../types/models";
|
||||
|
||||
/** Summary representation used in list endpoints. */
|
||||
export interface TechniqueSummary {
|
||||
id: string;
|
||||
mitre_id: string;
|
||||
name: string;
|
||||
tactic: string | null;
|
||||
status_global: TechniqueStatus;
|
||||
review_required?: boolean;
|
||||
}
|
||||
|
||||
/** Extended technique with tests for detail view. */
|
||||
export interface TechniqueWithTests extends Technique {
|
||||
tests?: Array<{
|
||||
id: string;
|
||||
technique_id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
platform: string | null;
|
||||
procedure_text: string | null;
|
||||
tool_used: string | null;
|
||||
execution_date: string | null;
|
||||
created_by: string | null;
|
||||
result: "detected" | "not_detected" | "partially_detected" | null;
|
||||
state: "draft" | "in_review" | "validated" | "rejected";
|
||||
validated_by: string | null;
|
||||
validated_at: string | null;
|
||||
created_at: string;
|
||||
}>;
|
||||
intel_items?: Array<{
|
||||
id: string;
|
||||
technique_id: string | null;
|
||||
url: string;
|
||||
title: string | null;
|
||||
source: string | null;
|
||||
detected_at: string;
|
||||
reviewed: boolean;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface TechniqueFilters {
|
||||
tactic?: string;
|
||||
status?: TechniqueStatus;
|
||||
review_required?: boolean;
|
||||
}
|
||||
|
||||
/** Fetch all techniques (summary). */
|
||||
export async function getTechniques(filters?: TechniqueFilters): Promise<TechniqueSummary[]> {
|
||||
const params = new URLSearchParams();
|
||||
if (filters?.tactic) params.append("tactic", filters.tactic);
|
||||
if (filters?.status) params.append("status", filters.status);
|
||||
if (filters?.review_required !== undefined) {
|
||||
params.append("review_required", String(filters.review_required));
|
||||
}
|
||||
|
||||
const { data } = await client.get<TechniqueSummary[]>(
|
||||
`/techniques${params.toString() ? `?${params}` : ""}`
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Fetch a single technique by mitre_id (with tests). */
|
||||
export async function getTechniqueByMitreId(mitreId: string): Promise<TechniqueWithTests> {
|
||||
const { data } = await client.get<TechniqueWithTests>(`/techniques/${mitreId}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Mark a technique as reviewed. */
|
||||
export async function markTechniqueReviewed(mitreId: string): Promise<TechniqueWithTests> {
|
||||
const { data } = await client.patch<TechniqueWithTests>(`/techniques/${mitreId}/review`);
|
||||
return data;
|
||||
}
|
||||
67
frontend/src/api/tests.ts
Normal file
67
frontend/src/api/tests.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import client from "./client";
|
||||
import type { Test, TestResult } from "../types/models";
|
||||
|
||||
export interface TestCreatePayload {
|
||||
technique_id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
platform?: string;
|
||||
procedure_text?: string;
|
||||
tool_used?: string;
|
||||
}
|
||||
|
||||
export interface TestUpdatePayload {
|
||||
name?: string;
|
||||
description?: string;
|
||||
platform?: string;
|
||||
procedure_text?: string;
|
||||
tool_used?: string;
|
||||
result?: TestResult;
|
||||
}
|
||||
|
||||
export interface TestValidatePayload {
|
||||
result: TestResult;
|
||||
comments?: string;
|
||||
}
|
||||
|
||||
export interface TestWithEvidences extends Test {
|
||||
evidences?: Array<{
|
||||
id: string;
|
||||
test_id: string;
|
||||
file_name: string;
|
||||
sha256_hash: string;
|
||||
uploaded_by: string | null;
|
||||
uploaded_at: string;
|
||||
download_url?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
/** Create a new test. */
|
||||
export async function createTest(payload: TestCreatePayload): Promise<Test> {
|
||||
const { data } = await client.post<Test>("/tests", payload);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Get test by ID with evidences. */
|
||||
export async function getTestById(testId: string): Promise<TestWithEvidences> {
|
||||
const { data } = await client.get<TestWithEvidences>(`/tests/${testId}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Update a test (only draft/rejected). */
|
||||
export async function updateTest(testId: string, payload: TestUpdatePayload): Promise<Test> {
|
||||
const { data } = await client.patch<Test>(`/tests/${testId}`, payload);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Validate a test. */
|
||||
export async function validateTest(testId: string, payload: TestValidatePayload): Promise<Test> {
|
||||
const { data } = await client.post<Test>(`/tests/${testId}/validate`, payload);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Reject a test. */
|
||||
export async function rejectTest(testId: string): Promise<Test> {
|
||||
const { data } = await client.post<Test>(`/tests/${testId}/reject`);
|
||||
return data;
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +1,134 @@
|
||||
import { Shield } from "lucide-react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
Shield,
|
||||
CheckCircle,
|
||||
AlertTriangle,
|
||||
XCircle,
|
||||
Clock,
|
||||
HelpCircle,
|
||||
Percent,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
} from "lucide-react";
|
||||
import { getCoverageSummary, getCoverageByTactic } from "../api/metrics";
|
||||
import CoverageSummaryCard from "../components/CoverageSummaryCard";
|
||||
import TacticCoverageChart from "../components/TacticCoverageChart";
|
||||
|
||||
export default function DashboardPage() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold text-white">Dashboard</h1>
|
||||
<div className="flex items-center gap-3 rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<Shield className="h-8 w-8 text-cyan-400" />
|
||||
<p className="text-gray-300">
|
||||
Coverage metrics will appear here.
|
||||
const {
|
||||
data: summary,
|
||||
isLoading: summaryLoading,
|
||||
error: summaryError,
|
||||
} = useQuery({
|
||||
queryKey: ["metrics", "summary"],
|
||||
queryFn: getCoverageSummary,
|
||||
});
|
||||
|
||||
const {
|
||||
data: tactics,
|
||||
isLoading: tacticsLoading,
|
||||
error: tacticsError,
|
||||
} = useQuery({
|
||||
queryKey: ["metrics", "by-tactic"],
|
||||
queryFn: getCoverageByTactic,
|
||||
});
|
||||
|
||||
if (summaryLoading || tacticsLoading) {
|
||||
return (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (summaryError || tacticsError) {
|
||||
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 metrics</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{summaryError?.message || tacticsError?.message || "Unknown error"}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Dashboard</h1>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
MITRE ATT&CK coverage overview
|
||||
</p>
|
||||
</div>
|
||||
{summary && (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-4 py-2">
|
||||
<Percent className="h-5 w-5 text-cyan-400" />
|
||||
<span className="text-lg font-bold text-cyan-400">
|
||||
{summary.coverage_percentage.toFixed(1)}%
|
||||
</span>
|
||||
<span className="text-sm text-gray-400">Coverage</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Summary Cards */}
|
||||
{summary && (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
||||
<CoverageSummaryCard
|
||||
title="Total Techniques"
|
||||
value={summary.total_techniques}
|
||||
icon={<Shield className="h-6 w-6 text-cyan-400" />}
|
||||
colorClass="text-cyan-400"
|
||||
bgClass="bg-gray-900"
|
||||
/>
|
||||
<CoverageSummaryCard
|
||||
title="Validated"
|
||||
value={summary.validated}
|
||||
total={summary.total_techniques}
|
||||
icon={<CheckCircle className="h-6 w-6 text-green-400" />}
|
||||
colorClass="text-green-400"
|
||||
bgClass="bg-green-950/20"
|
||||
/>
|
||||
<CoverageSummaryCard
|
||||
title="Partial"
|
||||
value={summary.partial}
|
||||
total={summary.total_techniques}
|
||||
icon={<AlertTriangle className="h-6 w-6 text-yellow-400" />}
|
||||
colorClass="text-yellow-400"
|
||||
bgClass="bg-yellow-950/20"
|
||||
/>
|
||||
<CoverageSummaryCard
|
||||
title="In Progress"
|
||||
value={summary.in_progress}
|
||||
total={summary.total_techniques}
|
||||
icon={<Clock className="h-6 w-6 text-blue-400" />}
|
||||
colorClass="text-blue-400"
|
||||
bgClass="bg-blue-950/20"
|
||||
/>
|
||||
<CoverageSummaryCard
|
||||
title="Not Covered"
|
||||
value={summary.not_covered}
|
||||
total={summary.total_techniques}
|
||||
icon={<XCircle className="h-6 w-6 text-red-400" />}
|
||||
colorClass="text-red-400"
|
||||
bgClass="bg-red-950/20"
|
||||
/>
|
||||
<CoverageSummaryCard
|
||||
title="Not Evaluated"
|
||||
value={summary.not_evaluated}
|
||||
total={summary.total_techniques}
|
||||
icon={<HelpCircle className="h-6 w-6 text-gray-400" />}
|
||||
colorClass="text-gray-400"
|
||||
bgClass="bg-gray-900"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tactic Coverage Table */}
|
||||
{tactics && <TacticCoverageChart data={tactics} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
197
frontend/src/pages/MatrixPage.tsx
Normal file
197
frontend/src/pages/MatrixPage.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import { useState, useMemo } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Loader2, AlertCircle, Filter, X } from "lucide-react";
|
||||
import { getTechniques, type TechniqueSummary } from "../api/techniques";
|
||||
import AttackMatrix from "../components/AttackMatrix";
|
||||
import type { TechniqueStatus } from "../types/models";
|
||||
|
||||
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;
|
||||
|
||||
export default function MatrixPage() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// Platform filter is handled client-side since we don't have platform in summary
|
||||
// For now we show all - platform filtering would need the full technique data
|
||||
|
||||
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-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">ATT&CK Matrix</h1>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Interactive MITRE ATT&CK coverage matrix — click any technique for details
|
||||
</p>
|
||||
</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 */}
|
||||
<AttackMatrix techniques={filteredTechniques} />
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,370 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
RefreshCw,
|
||||
Server,
|
||||
Database,
|
||||
HardDrive,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Shield,
|
||||
Search,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
triggerMitreSync,
|
||||
triggerIntelScan,
|
||||
getSchedulerStatus,
|
||||
type SyncMitreResponse,
|
||||
type IntelScanResponse,
|
||||
} from "../api/system";
|
||||
|
||||
export default function SystemPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [syncResult, setSyncResult] = useState<SyncMitreResponse | null>(null);
|
||||
const [intelResult, setIntelResult] = useState<IntelScanResponse | null>(null);
|
||||
|
||||
const {
|
||||
data: schedulerStatus,
|
||||
isLoading: statusLoading,
|
||||
error: statusError,
|
||||
} = useQuery({
|
||||
queryKey: ["scheduler-status"],
|
||||
queryFn: getSchedulerStatus,
|
||||
refetchInterval: 30000, // Refresh every 30 seconds
|
||||
});
|
||||
|
||||
const mitreSyncMutation = useMutation({
|
||||
mutationFn: triggerMitreSync,
|
||||
onSuccess: (data) => {
|
||||
setSyncResult(data);
|
||||
queryClient.invalidateQueries({ queryKey: ["techniques"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["metrics"] });
|
||||
},
|
||||
});
|
||||
|
||||
const intelScanMutation = useMutation({
|
||||
mutationFn: triggerIntelScan,
|
||||
onSuccess: (data) => {
|
||||
setIntelResult(data);
|
||||
queryClient.invalidateQueries({ queryKey: ["techniques"] });
|
||||
},
|
||||
});
|
||||
|
||||
const formatNextRun = (dateStr: string | null) => {
|
||||
if (!dateStr) return "Not scheduled";
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleString("en-US", {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "short",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold text-white">System</h1>
|
||||
<p className="text-gray-400">System administration panel coming soon.</p>
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">System Administration</h1>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Manage synchronization jobs and system status
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions Grid */}
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{/* MITRE Sync */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="rounded-lg bg-cyan-500/10 p-3">
|
||||
<Shield className="h-6 w-6 text-cyan-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-lg font-semibold text-white">MITRE ATT&CK Sync</h2>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Synchronize techniques from the MITRE ATT&CK framework via TAXII or GitHub fallback.
|
||||
</p>
|
||||
|
||||
{/* Status */}
|
||||
{schedulerStatus && (
|
||||
<div className="mt-4 flex items-center gap-2 text-sm">
|
||||
<Clock className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-gray-400">Next automatic sync:</span>
|
||||
<span className="text-gray-300">
|
||||
{formatNextRun(
|
||||
schedulerStatus.jobs.find((j) => j.id === "mitre_sync")?.next_run_time || null
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Result */}
|
||||
{syncResult && (
|
||||
<div className="mt-4 rounded-lg border border-green-500/30 bg-green-900/20 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
<span className="text-sm font-medium text-green-400">Sync Complete</span>
|
||||
</div>
|
||||
<div className="mt-2 grid grid-cols-2 gap-2 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-400">New techniques:</span>
|
||||
<span className="ml-2 font-medium text-white">{syncResult.new}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Updated:</span>
|
||||
<span className="ml-2 font-medium text-white">{syncResult.updated}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mitreSyncMutation.isError && (
|
||||
<div className="mt-4 rounded-lg border border-red-500/30 bg-red-900/20 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<XCircle className="h-4 w-4 text-red-400" />
|
||||
<span className="text-sm text-red-400">
|
||||
Sync failed: {(mitreSyncMutation.error as Error)?.message}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => mitreSyncMutation.mutate()}
|
||||
disabled={mitreSyncMutation.isPending}
|
||||
className="mt-4 flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{mitreSyncMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
)}
|
||||
{mitreSyncMutation.isPending ? "Syncing..." : "Sync Now"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Intel Scan */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="rounded-lg bg-purple-500/10 p-3">
|
||||
<Search className="h-6 w-6 text-purple-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-lg font-semibold text-white">Threat Intel Scan</h2>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Scan RSS feeds and security blogs for new threat intelligence related to techniques.
|
||||
</p>
|
||||
|
||||
{/* Status */}
|
||||
{schedulerStatus && (
|
||||
<div className="mt-4 flex items-center gap-2 text-sm">
|
||||
<Clock className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-gray-400">Next automatic scan:</span>
|
||||
<span className="text-gray-300">
|
||||
{formatNextRun(
|
||||
schedulerStatus.jobs.find((j) => j.id === "intel_scan")?.next_run_time || null
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Result */}
|
||||
{intelResult && (
|
||||
<div className="mt-4 rounded-lg border border-green-500/30 bg-green-900/20 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
<span className="text-sm font-medium text-green-400">Scan Complete</span>
|
||||
</div>
|
||||
<div className="mt-2 text-sm">
|
||||
<span className="text-gray-400">New intel items:</span>
|
||||
<span className="ml-2 font-medium text-white">{intelResult.new_items}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{intelScanMutation.isError && (
|
||||
<div className="mt-4 rounded-lg border border-red-500/30 bg-red-900/20 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<XCircle className="h-4 w-4 text-red-400" />
|
||||
<span className="text-sm text-red-400">
|
||||
Scan failed: {(intelScanMutation.error as Error)?.message}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => intelScanMutation.mutate()}
|
||||
disabled={intelScanMutation.isPending}
|
||||
className="mt-4 flex items-center gap-2 rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white hover:bg-purple-500 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{intelScanMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Search className="h-4 w-4" />
|
||||
)}
|
||||
{intelScanMutation.isPending ? "Scanning..." : "Scan Now"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* System Information */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">System Information</h2>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{/* Backend Status */}
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Server className="h-5 w-5 text-green-400" />
|
||||
<div>
|
||||
<p className="text-xs font-medium uppercase text-gray-500">Backend</p>
|
||||
<p className="text-sm font-medium text-green-400">Online</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Database Status */}
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Database className="h-5 w-5 text-green-400" />
|
||||
<div>
|
||||
<p className="text-xs font-medium uppercase text-gray-500">PostgreSQL</p>
|
||||
<p className="text-sm font-medium text-green-400">Connected</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MinIO Status */}
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<HardDrive className="h-5 w-5 text-green-400" />
|
||||
<div>
|
||||
<p className="text-xs font-medium uppercase text-gray-500">MinIO Storage</p>
|
||||
<p className="text-sm font-medium text-green-400">Available</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scheduler Status */}
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock
|
||||
className={`h-5 w-5 ${
|
||||
schedulerStatus?.running ? "text-green-400" : "text-yellow-400"
|
||||
}`}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-xs font-medium uppercase text-gray-500">Scheduler</p>
|
||||
<p
|
||||
className={`text-sm font-medium ${
|
||||
schedulerStatus?.running ? "text-green-400" : "text-yellow-400"
|
||||
}`}
|
||||
>
|
||||
{statusLoading
|
||||
? "Checking..."
|
||||
: schedulerStatus?.running
|
||||
? "Running"
|
||||
: "Stopped"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scheduled Jobs */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">Scheduled Jobs</h2>
|
||||
{statusLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-cyan-400" />
|
||||
</div>
|
||||
) : statusError ? (
|
||||
<div className="flex items-center justify-center gap-2 py-8 text-red-400">
|
||||
<AlertCircle className="h-5 w-5" />
|
||||
<span>Failed to load scheduler status</span>
|
||||
</div>
|
||||
) : (
|
||||
<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">Job ID</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">Next Run</th>
|
||||
<th className="pb-3 pl-4 font-medium text-gray-400">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{schedulerStatus?.jobs.map((job) => (
|
||||
<tr
|
||||
key={job.id}
|
||||
className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
|
||||
>
|
||||
<td className="py-3 pr-4">
|
||||
<code className="rounded bg-gray-800 px-2 py-0.5 text-xs text-cyan-400">
|
||||
{job.id}
|
||||
</code>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-gray-200">{job.name}</td>
|
||||
<td className="py-3 px-4 text-gray-400">
|
||||
{formatNextRun(job.next_run_time)}
|
||||
</td>
|
||||
<td className="py-3 pl-4">
|
||||
{job.next_run_time ? (
|
||||
<span className="inline-flex items-center gap-1 text-green-400">
|
||||
<CheckCircle className="h-3.5 w-3.5" />
|
||||
Scheduled
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 text-yellow-400">
|
||||
<Clock className="h-3.5 w-3.5" />
|
||||
Pending
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{(!schedulerStatus?.jobs || schedulerStatus.jobs.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan={4} className="py-8 text-center text-gray-400">
|
||||
No scheduled jobs found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Version Info */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">Version Information</h2>
|
||||
<dl className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Platform</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300">Aegis v0.1.0</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Backend</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300">FastAPI + Python 3.11</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Frontend</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300">React 19 + TypeScript</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Database</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300">PostgreSQL 15</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
363
frontend/src/pages/TechniqueDetailPage.tsx
Normal file
363
frontend/src/pages/TechniqueDetailPage.tsx
Normal file
@@ -0,0 +1,363 @@
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
ArrowLeft,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Shield,
|
||||
FileText,
|
||||
ExternalLink,
|
||||
Plus,
|
||||
Check,
|
||||
X,
|
||||
AlertTriangle,
|
||||
} from "lucide-react";
|
||||
import { getTechniqueByMitreId, markTechniqueReviewed } from "../api/techniques";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import type { TechniqueStatus, TestState, TestResult } from "../types/models";
|
||||
|
||||
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",
|
||||
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",
|
||||
};
|
||||
|
||||
export default function TechniqueDetailPage() {
|
||||
const { mitreId } = useParams<{ mitreId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { user } = useAuth();
|
||||
|
||||
const canReview =
|
||||
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 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>
|
||||
<span
|
||||
className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
|
||||
statusBadgeColors[technique.status_global]
|
||||
}`}
|
||||
>
|
||||
{technique.status_global.replace(/_/g, " ")}
|
||||
</span>
|
||||
{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-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{reviewMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
)}
|
||||
Mark as Reviewed
|
||||
</button>
|
||||
)}
|
||||
</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>
|
||||
<p className="text-sm text-gray-400 leading-relaxed whitespace-pre-wrap">
|
||||
{technique.description || "No description available."}
|
||||
</p>
|
||||
</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">
|
||||
<div className="flex items-center gap-2">
|
||||
<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>
|
||||
{canReview && test.state === "draft" && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => navigate(`/tests/${test.id}/validate`)}
|
||||
className="rounded p-1 text-gray-400 hover:bg-green-900/50 hover:text-green-400"
|
||||
title="Validate"
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigate(`/tests/${test.id}/reject`)}
|
||||
className="rounded p-1 text-gray-400 hover:bg-red-900/50 hover:text-red-400"
|
||||
title="Reject"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
109
frontend/src/pages/TestCreatePage.tsx
Normal file
109
frontend/src/pages/TestCreatePage.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
|
||||
import { ArrowLeft, FlaskConical } from "lucide-react";
|
||||
import TestForm, { type TestFormData } from "../components/TestForm";
|
||||
import { createTest } from "../api/tests";
|
||||
import { getTechniqueByMitreId } from "../api/techniques";
|
||||
|
||||
export default function TestCreatePage() {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
// Get technique ID from URL query param (UUID format)
|
||||
const techniqueId = searchParams.get("technique");
|
||||
|
||||
// If we have a technique ID, try to get its mitre_id for the back link
|
||||
const { data: technique } = useQuery({
|
||||
queryKey: ["techniqueById", techniqueId],
|
||||
queryFn: async () => {
|
||||
// We need to find the mitre_id from the technique list
|
||||
// This is a workaround since we get UUID but need mitre_id
|
||||
const response = await fetch(`http://localhost:8000/api/v1/techniques`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
const techniques = await response.json();
|
||||
return techniques.find((t: { id: string }) => t.id === techniqueId);
|
||||
},
|
||||
enabled: !!techniqueId,
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: createTest,
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["techniques"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["technique"] });
|
||||
// Navigate back to the technique detail if we came from there
|
||||
if (technique?.mitre_id) {
|
||||
navigate(`/techniques/${technique.mitre_id}`);
|
||||
} else {
|
||||
navigate("/tests");
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = (data: TestFormData) => {
|
||||
createMutation.mutate({
|
||||
technique_id: data.technique_id,
|
||||
name: data.name,
|
||||
description: data.description || undefined,
|
||||
platform: data.platform || undefined,
|
||||
procedure_text: data.procedure_text || undefined,
|
||||
tool_used: data.tool_used || undefined,
|
||||
});
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (technique?.mitre_id) {
|
||||
navigate(`/techniques/${technique.mitre_id}`);
|
||||
} else {
|
||||
navigate("/tests");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className="flex items-center gap-1 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{technique ? `Back to ${technique.mitre_id}` : "Back to tests"}
|
||||
</button>
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-lg bg-cyan-500/10 p-3">
|
||||
<FlaskConical className="h-8 w-8 text-cyan-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Create New Test</h1>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Document a security test for technique validation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error display */}
|
||||
{createMutation.isError && (
|
||||
<div className="rounded-lg border border-red-500/30 bg-red-900/20 p-4">
|
||||
<p className="text-sm text-red-400">
|
||||
Failed to create test: {(createMutation.error as Error)?.message || "Unknown error"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<TestForm
|
||||
preselectedTechniqueId={techniqueId || undefined}
|
||||
onSubmit={handleSubmit}
|
||||
isSubmitting={createMutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -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