492 lines
20 KiB
TypeScript
492 lines
20 KiB
TypeScript
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>
|
|
);
|
|
}
|