feat(phase-19): add remediation fields and reports system (T-130, T-131)
This commit is contained in:
491
frontend/src/pages/ReportsPage.tsx
Normal file
491
frontend/src/pages/ReportsPage.tsx
Normal file
@@ -0,0 +1,491 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
FileText,
|
||||
Download,
|
||||
BarChart3,
|
||||
Shield,
|
||||
Wrench,
|
||||
Loader2,
|
||||
Filter,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
getCoverageSummary,
|
||||
getTestResults,
|
||||
getRemediationStatus,
|
||||
type CoverageReport,
|
||||
type TestResultsReport,
|
||||
type RemediationReport,
|
||||
type ReportFilters,
|
||||
} from "../api/reports";
|
||||
|
||||
type ReportType = "coverage" | "test-results" | "remediation";
|
||||
|
||||
const reportTypes: { id: ReportType; label: string; icon: React.ReactNode; desc: string }[] = [
|
||||
{
|
||||
id: "coverage",
|
||||
label: "Coverage Summary",
|
||||
icon: <Shield className="h-5 w-5" />,
|
||||
desc: "Technique coverage status across the MITRE ATT&CK framework",
|
||||
},
|
||||
{
|
||||
id: "test-results",
|
||||
label: "Test Results",
|
||||
icon: <BarChart3 className="h-5 w-5" />,
|
||||
desc: "Detailed test execution results with state and detection breakdowns",
|
||||
},
|
||||
{
|
||||
id: "remediation",
|
||||
label: "Remediation Status",
|
||||
icon: <Wrench className="h-5 w-5" />,
|
||||
desc: "Remediation progress across all tests with assigned steps",
|
||||
},
|
||||
];
|
||||
|
||||
export default function ReportsPage() {
|
||||
const [selectedType, setSelectedType] = useState<ReportType>("coverage");
|
||||
const [filters, setFilters] = useState<ReportFilters>({});
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
const coverageQuery = useQuery({
|
||||
queryKey: ["reports", "coverage", filters],
|
||||
queryFn: () => getCoverageSummary(filters),
|
||||
enabled: selectedType === "coverage",
|
||||
});
|
||||
|
||||
const testResultsQuery = useQuery({
|
||||
queryKey: ["reports", "test-results", filters],
|
||||
queryFn: () => getTestResults(filters),
|
||||
enabled: selectedType === "test-results",
|
||||
});
|
||||
|
||||
const remediationQuery = useQuery({
|
||||
queryKey: ["reports", "remediation", filters],
|
||||
queryFn: () => getRemediationStatus(filters),
|
||||
enabled: selectedType === "remediation",
|
||||
});
|
||||
|
||||
const isLoading =
|
||||
(selectedType === "coverage" && coverageQuery.isLoading) ||
|
||||
(selectedType === "test-results" && testResultsQuery.isLoading) ||
|
||||
(selectedType === "remediation" && remediationQuery.isLoading);
|
||||
|
||||
const handleDownloadJson = () => {
|
||||
let data: CoverageReport | TestResultsReport | RemediationReport | undefined;
|
||||
if (selectedType === "coverage") data = coverageQuery.data;
|
||||
if (selectedType === "test-results") data = testResultsQuery.data;
|
||||
if (selectedType === "remediation") data = remediationQuery.data;
|
||||
if (!data) return;
|
||||
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `aegis_${selectedType}_${new Date().toISOString().slice(0, 10)}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleDownloadCsv = () => {
|
||||
const token = localStorage.getItem("token");
|
||||
const params = new URLSearchParams();
|
||||
if (filters.tactic) params.set("tactic", filters.tactic);
|
||||
if (filters.platform) params.set("platform", filters.platform);
|
||||
window.open(
|
||||
`/api/v1/reports/coverage-csv?${params.toString()}${token ? `&token=${token}` : ""}`,
|
||||
"_blank",
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Reports</h1>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Generate and download coverage, test results, and remediation reports
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleDownloadJson}
|
||||
disabled={isLoading}
|
||||
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 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
Download JSON
|
||||
</button>
|
||||
{selectedType === "coverage" && (
|
||||
<button
|
||||
onClick={handleDownloadCsv}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-2 rounded-lg bg-gray-700 px-4 py-2 text-sm font-medium text-white hover:bg-gray-600 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<FileText className="h-4 w-4" />
|
||||
Download CSV
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Report type selector */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
{reportTypes.map((rt) => (
|
||||
<button
|
||||
key={rt.id}
|
||||
onClick={() => {
|
||||
setSelectedType(rt.id);
|
||||
setFilters({});
|
||||
}}
|
||||
className={`flex items-start gap-3 rounded-xl border p-4 text-left transition-all ${
|
||||
selectedType === rt.id
|
||||
? "border-cyan-500/50 bg-cyan-500/10"
|
||||
: "border-gray-800 bg-gray-900 hover:border-gray-700"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`rounded-lg p-2 ${
|
||||
selectedType === rt.id ? "bg-cyan-500/20 text-cyan-400" : "bg-gray-800 text-gray-400"
|
||||
}`}
|
||||
>
|
||||
{rt.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-sm font-medium ${selectedType === rt.id ? "text-cyan-400" : "text-white"}`}>
|
||||
{rt.label}
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs text-gray-500">{rt.desc}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900">
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<Filter className="h-4 w-4" />
|
||||
Filters
|
||||
</span>
|
||||
<ChevronDown className={`h-4 w-4 transition-transform ${showFilters ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
{showFilters && (
|
||||
<div className="border-t border-gray-800 px-4 py-4">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
{(selectedType === "coverage" || selectedType === "test-results") && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">Tactic</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. execution"
|
||||
value={filters.tactic || ""}
|
||||
onChange={(e) => setFilters({ ...filters, tactic: e.target.value || undefined })}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">Platform</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. windows"
|
||||
value={filters.platform || ""}
|
||||
onChange={(e) => setFilters({ ...filters, platform: e.target.value || undefined })}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{selectedType === "test-results" && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">State</label>
|
||||
<select
|
||||
value={filters.state || ""}
|
||||
onChange={(e) => setFilters({ ...filters, state: e.target.value || undefined })}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
|
||||
>
|
||||
<option value="">All states</option>
|
||||
<option value="draft">Draft</option>
|
||||
<option value="red_executing">Red Executing</option>
|
||||
<option value="blue_evaluating">Blue Evaluating</option>
|
||||
<option value="in_review">In Review</option>
|
||||
<option value="validated">Validated</option>
|
||||
<option value="rejected">Rejected</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">Date From</label>
|
||||
<input
|
||||
type="date"
|
||||
value={filters.date_from || ""}
|
||||
onChange={(e) => setFilters({ ...filters, date_from: e.target.value || undefined })}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">Date To</label>
|
||||
<input
|
||||
type="date"
|
||||
value={filters.date_to || ""}
|
||||
onChange={(e) => setFilters({ ...filters, date_to: e.target.value || undefined })}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{selectedType === "remediation" && (
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">Remediation Status</label>
|
||||
<select
|
||||
value={filters.status || ""}
|
||||
onChange={(e) => setFilters({ ...filters, status: e.target.value || undefined })}
|
||||
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
|
||||
>
|
||||
<option value="">All</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="completed">Completed</option>
|
||||
<option value="not_applicable">Not Applicable</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Report content */}
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{selectedType === "coverage" && coverageQuery.data && (
|
||||
<CoverageReportView report={coverageQuery.data} />
|
||||
)}
|
||||
{selectedType === "test-results" && testResultsQuery.data && (
|
||||
<TestResultsView report={testResultsQuery.data} />
|
||||
)}
|
||||
{selectedType === "remediation" && remediationQuery.data && (
|
||||
<RemediationView report={remediationQuery.data} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Sub-views ──────────────────────────────────────────────────────
|
||||
|
||||
function CoverageReportView({ report }: { report: CoverageReport }) {
|
||||
const s = report.summary;
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Summary cards */}
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-6">
|
||||
<StatCard label="Total" value={s.total_techniques} />
|
||||
<StatCard label="Validated" value={s.validated} color="text-green-400" />
|
||||
<StatCard label="Partial" value={s.partial} color="text-yellow-400" />
|
||||
<StatCard label="In Progress" value={s.in_progress} color="text-blue-400" />
|
||||
<StatCard label="Not Covered" value={s.not_covered} color="text-red-400" />
|
||||
<StatCard label="Coverage" value={`${s.coverage_percentage}%`} color="text-cyan-400" />
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-hidden rounded-xl border border-gray-800">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-900/50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">MITRE ID</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Name</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Tactic</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Status</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-medium text-gray-400">Tests</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-800">
|
||||
{report.techniques.map((t) => (
|
||||
<tr key={t.mitre_id} className="hover:bg-gray-900/30">
|
||||
<td className="px-4 py-2.5 font-mono text-cyan-400">{t.mitre_id}</td>
|
||||
<td className="px-4 py-2.5 text-white">{t.name}</td>
|
||||
<td className="px-4 py-2.5 text-gray-400">{t.tactic}</td>
|
||||
<td className="px-4 py-2.5">
|
||||
<StatusBadge status={t.status_global} />
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-right text-gray-300">{t.total_tests}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TestResultsView({ report }: { report: TestResultsReport }) {
|
||||
const s = report.summary;
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
<StatCard label="Total Tests" value={s.total_tests} />
|
||||
<StatCard label="Validated" value={s.by_state.validated ?? 0} color="text-green-400" />
|
||||
<StatCard label="In Review" value={s.by_state.in_review ?? 0} color="text-yellow-400" />
|
||||
<StatCard label="Rejected" value={s.by_state.rejected ?? 0} color="text-red-400" />
|
||||
</div>
|
||||
|
||||
{/* Detection results breakdown */}
|
||||
{Object.keys(s.by_detection_result).length > 0 && (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Detection Results</h3>
|
||||
<div className="flex gap-4">
|
||||
{Object.entries(s.by_detection_result).map(([key, val]) => (
|
||||
<div key={key} className="text-center">
|
||||
<p className="text-xl font-bold text-white">{val}</p>
|
||||
<p className="text-xs text-gray-400">{key.replace(/_/g, " ")}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-hidden rounded-xl border border-gray-800">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-900/50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Name</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">State</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Platform</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Detection</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Red Val.</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Blue Val.</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-800">
|
||||
{report.tests.map((t) => (
|
||||
<tr key={t.id} className="hover:bg-gray-900/30">
|
||||
<td className="px-4 py-2.5 text-white">{t.name}</td>
|
||||
<td className="px-4 py-2.5"><StatusBadge status={t.state} /></td>
|
||||
<td className="px-4 py-2.5 text-gray-400">{t.platform || "—"}</td>
|
||||
<td className="px-4 py-2.5 text-gray-300">{t.detection_result?.replace(/_/g, " ") || "—"}</td>
|
||||
<td className="px-4 py-2.5"><ValidationBadge status={t.red_validation_status} /></td>
|
||||
<td className="px-4 py-2.5"><ValidationBadge status={t.blue_validation_status} /></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RemediationView({ report }: { report: RemediationReport }) {
|
||||
const s = report.summary;
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
<StatCard label="Total w/ Remediation" value={s.total_with_remediation} />
|
||||
<StatCard label="Pending" value={s.by_status.pending ?? 0} color="text-yellow-400" />
|
||||
<StatCard label="In Progress" value={s.by_status.in_progress ?? 0} color="text-blue-400" />
|
||||
<StatCard label="Completed" value={s.by_status.completed ?? 0} color="text-green-400" />
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-xl border border-gray-800">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-900/50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Name</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Test State</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Remediation Status</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Steps</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-800">
|
||||
{report.tests.map((t) => (
|
||||
<tr key={t.id} className="hover:bg-gray-900/30">
|
||||
<td className="px-4 py-2.5 text-white">{t.name}</td>
|
||||
<td className="px-4 py-2.5"><StatusBadge status={t.state} /></td>
|
||||
<td className="px-4 py-2.5"><RemediationBadge status={t.remediation_status} /></td>
|
||||
<td className="px-4 py-2.5 max-w-xs truncate text-gray-400">
|
||||
{t.remediation_steps || "—"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Shared components ──────────────────────────────────────────────
|
||||
|
||||
function StatCard({
|
||||
label,
|
||||
value,
|
||||
color = "text-white",
|
||||
}: {
|
||||
label: string;
|
||||
value: number | string;
|
||||
color?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-4">
|
||||
<p className="text-xs text-gray-500">{label}</p>
|
||||
<p className={`text-2xl font-bold ${color}`}>{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
validated: "bg-green-500/10 text-green-400 border-green-500/30",
|
||||
partial: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
|
||||
in_progress: "bg-blue-500/10 text-blue-400 border-blue-500/30",
|
||||
not_covered: "bg-red-500/10 text-red-400 border-red-500/30",
|
||||
not_evaluated: "bg-gray-500/10 text-gray-400 border-gray-500/30",
|
||||
draft: "bg-gray-500/10 text-gray-400 border-gray-500/30",
|
||||
red_executing: "bg-orange-500/10 text-orange-400 border-orange-500/30",
|
||||
blue_evaluating: "bg-indigo-500/10 text-indigo-400 border-indigo-500/30",
|
||||
in_review: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
|
||||
rejected: "bg-red-500/10 text-red-400 border-red-500/30",
|
||||
};
|
||||
|
||||
function StatusBadge({ status }: { status: string }) {
|
||||
return (
|
||||
<span className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${statusColors[status] || statusColors.not_evaluated}`}>
|
||||
{status.replace(/_/g, " ")}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function ValidationBadge({ status }: { status: string | null }) {
|
||||
if (!status) return <span className="text-gray-600 text-xs">—</span>;
|
||||
const colors: Record<string, string> = {
|
||||
approved: "text-green-400",
|
||||
rejected: "text-red-400",
|
||||
pending: "text-yellow-400",
|
||||
};
|
||||
return <span className={`text-xs font-medium ${colors[status] || "text-gray-400"}`}>{status}</span>;
|
||||
}
|
||||
|
||||
function RemediationBadge({ status }: { status: string | null }) {
|
||||
if (!status) return <span className="text-gray-600 text-xs">—</span>;
|
||||
const colors: Record<string, string> = {
|
||||
pending: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
|
||||
in_progress: "bg-blue-500/10 text-blue-400 border-blue-500/30",
|
||||
completed: "bg-green-500/10 text-green-400 border-green-500/30",
|
||||
not_applicable: "bg-gray-500/10 text-gray-400 border-gray-500/30",
|
||||
};
|
||||
return (
|
||||
<span className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${colors[status] || colors.pending}`}>
|
||||
{status.replace(/_/g, " ")}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user