feat(phase-15): add Test Catalog page, template instantiation, and auto-migration entrypoint (T-119, T-120, T-121)
T-119: TestCatalogPage with search, filters (source/platform/severity), template cards grid, and pagination T-120: TestFromTemplateForm modal with pre-filled fields from template, required field validation, and redirect on creation T-121: Integrate Available Test Templates section in TechniqueDetailPage with Run This Test buttons; fix missing testStateBadgeColors for new states Also: add backend entrypoint.sh for automatic Alembic migrations + seed on container startup, add curl to Dockerfile for healthcheck
This commit is contained in:
@@ -3,6 +3,7 @@ import {
|
||||
LayoutDashboard,
|
||||
Shield,
|
||||
FlaskConical,
|
||||
BookOpen,
|
||||
Settings,
|
||||
Users,
|
||||
FileText,
|
||||
@@ -13,6 +14,7 @@ const baseLinks = [
|
||||
{ to: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
|
||||
{ to: "/techniques", label: "Techniques", icon: Shield },
|
||||
{ to: "/tests", label: "Tests", icon: FlaskConical },
|
||||
{ to: "/test-catalog", label: "Test Catalog", icon: BookOpen },
|
||||
];
|
||||
|
||||
const adminLinks = [
|
||||
|
||||
250
frontend/src/components/TestFromTemplateForm.tsx
Normal file
250
frontend/src/components/TestFromTemplateForm.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import {
|
||||
Loader2,
|
||||
FlaskConical,
|
||||
X,
|
||||
AlertCircle,
|
||||
BookOpen,
|
||||
} from "lucide-react";
|
||||
import { getTemplateById } from "../api/test-templates";
|
||||
import { createTestFromTemplate } from "../api/tests";
|
||||
import type { TestTemplate } from "../types/models";
|
||||
|
||||
// ── Props ──────────────────────────────────────────────────────────
|
||||
|
||||
interface TestFromTemplateFormProps {
|
||||
templateId: string;
|
||||
/** If provided, pre-selects the technique (from TechniqueDetailPage). */
|
||||
techniqueId?: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
// ── Component ──────────────────────────────────────────────────────
|
||||
|
||||
export default function TestFromTemplateForm({
|
||||
templateId,
|
||||
techniqueId: propTechniqueId,
|
||||
onClose,
|
||||
}: TestFromTemplateFormProps) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// ── Load template details ──────────────────────────────────────
|
||||
|
||||
const {
|
||||
data: template,
|
||||
isLoading,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ["test-template", templateId],
|
||||
queryFn: () => getTemplateById(templateId),
|
||||
enabled: !!templateId,
|
||||
});
|
||||
|
||||
// ── Form state (pre-filled from template) ──────────────────────
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [technique, setTechnique] = useState(propTechniqueId || "");
|
||||
const [platform, setPlatform] = useState("");
|
||||
const [procedureText, setProcedureText] = useState("");
|
||||
const [toolUsed, setToolUsed] = useState("");
|
||||
const [expectedDetection, setExpectedDetection] = useState("");
|
||||
|
||||
// Hydrate form when template loads
|
||||
useEffect(() => {
|
||||
if (template) {
|
||||
setName(template.name || "");
|
||||
setDescription(template.description || "");
|
||||
setTechnique(propTechniqueId || template.mitre_technique_id || "");
|
||||
setPlatform(template.platform || "");
|
||||
setProcedureText(template.attack_procedure || "");
|
||||
setToolUsed(template.tool_suggested || "");
|
||||
setExpectedDetection(template.expected_detection || "");
|
||||
}
|
||||
}, [template, propTechniqueId]);
|
||||
|
||||
// ── Submit ─────────────────────────────────────────────────────
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: () => createTestFromTemplate(templateId, technique),
|
||||
onSuccess: (test) => {
|
||||
navigate(`/tests/${test.id}`);
|
||||
},
|
||||
});
|
||||
|
||||
const canSubmit = name.trim().length > 0 && technique.trim().length > 0;
|
||||
|
||||
// ── Render ─────────────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-xl border border-gray-800 bg-gray-900 shadow-xl">
|
||||
{/* Header */}
|
||||
<div className="sticky top-0 z-10 flex items-center justify-between border-b border-gray-800 bg-gray-900 px-6 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<BookOpen className="h-5 w-5 text-cyan-400" />
|
||||
<h3 className="text-lg font-semibold text-white">Create Test from Template</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-white"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex flex-col items-center justify-center py-16">
|
||||
<AlertCircle className="h-10 w-10 text-red-400" />
|
||||
<p className="mt-2 text-sm text-red-400">Failed to load template</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-5 px-6 py-5">
|
||||
{/* Template info banner */}
|
||||
<div className="rounded-lg border border-cyan-500/20 bg-cyan-900/10 p-3">
|
||||
<p className="text-xs text-cyan-400">
|
||||
Pre-filled from template: <strong>{template?.name}</strong>
|
||||
{template?.source && (
|
||||
<span className="ml-2 rounded-full border border-gray-600/30 bg-gray-800/50 px-2 py-0.5 text-[10px] text-gray-400">
|
||||
{template.source}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-300">
|
||||
Test Name <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
|
||||
placeholder="Test name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-300">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
|
||||
placeholder="Test description..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Technique ID */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-300">
|
||||
MITRE Technique ID <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
value={technique}
|
||||
onChange={(e) => setTechnique(e.target.value)}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
|
||||
placeholder="e.g. T1059.001"
|
||||
readOnly={!!propTechniqueId}
|
||||
/>
|
||||
{propTechniqueId && (
|
||||
<p className="mt-1 text-xs text-gray-500">Pre-selected from technique page</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Platform */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-300">Platform</label>
|
||||
<input
|
||||
value={platform}
|
||||
onChange={(e) => setPlatform(e.target.value)}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
|
||||
placeholder="e.g. windows, linux, macos"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Attack Procedure */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-300">
|
||||
Suggested Attack Procedure
|
||||
</label>
|
||||
<textarea
|
||||
value={procedureText}
|
||||
onChange={(e) => setProcedureText(e.target.value)}
|
||||
rows={5}
|
||||
className="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:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
|
||||
placeholder="Attack procedure..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tool Suggested */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-300">
|
||||
Suggested Tool
|
||||
</label>
|
||||
<input
|
||||
value={toolUsed}
|
||||
onChange={(e) => setToolUsed(e.target.value)}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
|
||||
placeholder="e.g. Atomic Red Team, Cobalt Strike"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Expected Detection (read-only reference for Blue Team) */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-300">
|
||||
Expected Detection
|
||||
<span className="ml-2 text-xs text-gray-500">(read-only reference for Blue Team)</span>
|
||||
</label>
|
||||
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-3">
|
||||
<p className="whitespace-pre-wrap font-mono text-sm text-gray-400">
|
||||
{expectedDetection || "No detection guidance provided in template."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{createMutation.isError && (
|
||||
<div className="rounded-lg border border-red-500/30 bg-red-900/20 p-3 text-sm text-red-400">
|
||||
{(createMutation.error as Error)?.message || "Failed to create test"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="sticky bottom-0 flex justify-end gap-3 border-t border-gray-800 bg-gray-900 px-6 py-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-400 hover:bg-gray-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => createMutation.mutate()}
|
||||
disabled={!canSubmit || createMutation.isPending}
|
||||
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 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{createMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<FlaskConical className="h-4 w-4" />
|
||||
)}
|
||||
Create Test
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user