feat(phase-26): add Campaign models, endpoints, service with kill chain timeline UI (T-217 to T-220)
This commit is contained in:
416
frontend/src/pages/CampaignDetailPage.tsx
Normal file
416
frontend/src/pages/CampaignDetailPage.tsx
Normal file
@@ -0,0 +1,416 @@
|
||||
import { useState } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
ArrowLeft,
|
||||
Play,
|
||||
CheckCircle,
|
||||
Target,
|
||||
Plus,
|
||||
Trash2,
|
||||
Zap,
|
||||
Calendar,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
getCampaign,
|
||||
activateCampaign,
|
||||
completeCampaign,
|
||||
removeTestFromCampaign,
|
||||
type Campaign,
|
||||
} from "../api/campaigns";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import CampaignTimeline from "../components/CampaignTimeline";
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
|
||||
active: "bg-cyan-900/50 text-cyan-400 border-cyan-500/30",
|
||||
completed: "bg-green-900/50 text-green-400 border-green-500/30",
|
||||
archived: "bg-gray-800/50 text-gray-500 border-gray-700/30",
|
||||
};
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
custom: "Custom",
|
||||
apt_emulation: "APT Emulation",
|
||||
kill_chain: "Kill Chain",
|
||||
compliance: "Compliance",
|
||||
};
|
||||
|
||||
const testStateColors: Record<string, string> = {
|
||||
draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
|
||||
red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
|
||||
blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/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",
|
||||
};
|
||||
|
||||
export default function CampaignDetailPage() {
|
||||
const { campaignId } = useParams<{ campaignId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { user } = useAuth();
|
||||
|
||||
const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
|
||||
|
||||
const showToast = (message: string, type: "success" | "error") => {
|
||||
setToast({ message, type });
|
||||
setTimeout(() => setToast(null), 5000);
|
||||
};
|
||||
|
||||
const role = user?.role ?? "";
|
||||
const canManage = role === "admin" || role === "red_tech";
|
||||
const canComplete = role === "admin" || role === "red_lead";
|
||||
|
||||
const {
|
||||
data: campaign,
|
||||
isLoading,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ["campaign", campaignId],
|
||||
queryFn: () => getCampaign(campaignId!),
|
||||
enabled: !!campaignId,
|
||||
});
|
||||
|
||||
const activateMutation = useMutation({
|
||||
mutationFn: () => activateCampaign(campaignId!),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["campaign", campaignId] });
|
||||
showToast("Campaign activated", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
const completeMutation = useMutation({
|
||||
mutationFn: () => completeCampaign(campaignId!),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["campaign", campaignId] });
|
||||
showToast("Campaign completed", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
const removeMutation = useMutation({
|
||||
mutationFn: (campaignTestId: string) => removeTestFromCampaign(campaignId!, campaignTestId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["campaign", campaignId] });
|
||||
showToast("Test removed from campaign", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
const formatDate = (dateStr: string | null) => {
|
||||
if (!dateStr) return "\u2014";
|
||||
return new Date(dateStr).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
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 || !campaign) {
|
||||
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 campaign</p>
|
||||
<button
|
||||
onClick={() => navigate("/campaigns")}
|
||||
className="mt-2 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to campaigns
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const progress = campaign.progress;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={() => navigate("/campaigns")}
|
||||
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 campaigns
|
||||
</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">
|
||||
<Zap 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">{campaign.name}</h1>
|
||||
<span
|
||||
className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
|
||||
statusColors[campaign.status] || statusColors.draft
|
||||
}`}
|
||||
>
|
||||
{campaign.status}
|
||||
</span>
|
||||
<span className="inline-flex rounded-full border border-gray-600/30 bg-gray-800/50 px-2.5 py-0.5 text-xs font-medium text-gray-400">
|
||||
{typeLabels[campaign.type] || campaign.type}
|
||||
</span>
|
||||
</div>
|
||||
{campaign.description && (
|
||||
<p className="mt-1 text-sm text-gray-400">{campaign.description}</p>
|
||||
)}
|
||||
<div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-gray-500">
|
||||
{campaign.threat_actor_name && (
|
||||
<button
|
||||
onClick={() => navigate(`/threat-actors/${campaign.threat_actor_id}`)}
|
||||
className="flex items-center gap-1 text-red-400 hover:underline"
|
||||
>
|
||||
<Target className="h-3.5 w-3.5" />
|
||||
{campaign.threat_actor_name}
|
||||
</button>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="h-3.5 w-3.5" />
|
||||
Created {formatDate(campaign.created_at)}
|
||||
</span>
|
||||
{campaign.completed_at && (
|
||||
<span className="flex items-center gap-1 text-green-400">
|
||||
<CheckCircle className="h-3.5 w-3.5" />
|
||||
Completed {formatDate(campaign.completed_at)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
{canManage && campaign.status === "draft" && (
|
||||
<button
|
||||
onClick={() => activateMutation.mutate()}
|
||||
disabled={activateMutation.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"
|
||||
>
|
||||
{activateMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Play className="h-4 w-4" />
|
||||
)}
|
||||
Activate
|
||||
</button>
|
||||
)}
|
||||
{canComplete && campaign.status === "active" && (
|
||||
<button
|
||||
onClick={() => completeMutation.mutate()}
|
||||
disabled={completeMutation.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 transition-colors"
|
||||
>
|
||||
{completeMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
)}
|
||||
Mark Completed
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Panel */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">Progress</h2>
|
||||
<div className="flex items-center gap-6 mb-4">
|
||||
<div>
|
||||
<span className="text-3xl font-bold text-white">{progress.completion_pct}%</span>
|
||||
<span className="ml-1 text-sm text-gray-400">complete</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="h-3 w-full rounded-full bg-gray-800 overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all ${
|
||||
progress.completion_pct === 100 ? "bg-green-500" : "bg-cyan-500"
|
||||
}`}
|
||||
style={{ width: `${progress.completion_pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm text-gray-400">
|
||||
{progress.by_state?.validated || 0} / {progress.total} tests
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* State breakdown */}
|
||||
{progress.total > 0 && (
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{Object.entries(progress.by_state || {}).map(([state, count]) => (
|
||||
<div
|
||||
key={state}
|
||||
className={`rounded-lg border px-3 py-1.5 text-xs font-medium ${
|
||||
testStateColors[state] || testStateColors.draft
|
||||
}`}
|
||||
>
|
||||
{state.replace(/_/g, " ")}: {count}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Kill Chain Timeline */}
|
||||
<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">Kill Chain Timeline</h2>
|
||||
{campaign.tags && campaign.tags.length > 0 && (
|
||||
<div className="flex gap-1">
|
||||
{campaign.tags.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="rounded-full bg-gray-800 border border-gray-700 px-2 py-0.5 text-[10px] text-gray-400"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<CampaignTimeline tests={campaign.tests} />
|
||||
</div>
|
||||
|
||||
{/* Tests Table */}
|
||||
<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">
|
||||
Tests ({campaign.tests.length})
|
||||
</h2>
|
||||
{canManage && campaign.status === "draft" && (
|
||||
<button
|
||||
onClick={() => navigate(`/tests?campaign=${campaignId}`)}
|
||||
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" />
|
||||
Add Test
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{campaign.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">#</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Technique</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Test Name</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Phase</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">Platform</th>
|
||||
<th className="pb-3 pl-4 font-medium text-gray-400">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{campaign.tests
|
||||
.sort((a, b) => a.order_index - b.order_index)
|
||||
.map((ct) => (
|
||||
<tr
|
||||
key={ct.id}
|
||||
className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
|
||||
>
|
||||
<td className="py-3 pr-4">
|
||||
<span className="text-xs text-gray-500">{ct.order_index + 1}</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="font-mono text-xs text-cyan-400">
|
||||
{ct.technique_mitre_id || "\u2014"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<button
|
||||
onClick={() => navigate(`/tests/${ct.test_id}`)}
|
||||
className="text-sm font-medium text-gray-200 hover:text-cyan-400 transition-colors"
|
||||
>
|
||||
{ct.test_name || "Unnamed test"}
|
||||
</button>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="text-xs text-gray-400 capitalize">
|
||||
{ct.phase?.replace(/_/g, " ") || "\u2014"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span
|
||||
className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
|
||||
testStateColors[ct.test_state || "draft"] || testStateColors.draft
|
||||
}`}
|
||||
>
|
||||
{(ct.test_state || "draft").replace(/_/g, " ")}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="text-xs text-gray-400 capitalize">
|
||||
{ct.platform || "\u2014"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 pl-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => navigate(`/tests/${ct.test_id}`)}
|
||||
className="rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-cyan-400"
|
||||
title="View Test"
|
||||
>
|
||||
<Clock className="h-4 w-4" />
|
||||
</button>
|
||||
{canManage && (campaign.status === "draft" || campaign.status === "active") && (
|
||||
<button
|
||||
onClick={() => removeMutation.mutate(ct.id)}
|
||||
disabled={removeMutation.isPending}
|
||||
className="rounded p-1 text-gray-400 hover:bg-red-900/50 hover:text-red-400"
|
||||
title="Remove from campaign"
|
||||
>
|
||||
<Trash2 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">
|
||||
<Zap className="mb-2 h-8 w-8 text-gray-600" />
|
||||
<p>No tests in this campaign yet.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Toast notification */}
|
||||
{toast && (
|
||||
<div
|
||||
className={`fixed bottom-6 right-6 z-50 rounded-lg border px-4 py-3 text-sm shadow-lg backdrop-blur transition-all ${
|
||||
toast.type === "success"
|
||||
? "border-green-500/30 bg-green-900/90 text-green-300"
|
||||
: "border-red-500/30 bg-red-900/90 text-red-300"
|
||||
}`}
|
||||
>
|
||||
{toast.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user