kitos/Aegis
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(compliance): fix broken table layout and expand caused by nested tbody elements
Some checks failed
Aegis CI / lint-and-test (push) Has been cancelled
Details

Browse Source 
Rewrote ControlsTable with React fragments instead of nested <tbody> tags,
added ScoreBar component, improved status badges, filter header strip,
and grid layout for expanded technique cards.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
kitos
2026-05-28 16:45:47 +02:00
parent b248c2816e
commit 8b035b5c5c
1 changed files with 140 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
frontend/src/components/compliance/ControlsTable.tsx
View File

@@ -1,17 +1,17 @@
import { useState } from "react"; import { useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { ChevronDown, ChevronRight, Search, Filter } from "lucide-react"; import { ChevronDown, ChevronRight, Search, Filter, ExternalLink } from "lucide-react";
import type { ComplianceControlStatus } from "../../api/compliance"; import type { ComplianceControlStatus } from "../../api/compliance";
interface ControlsTableProps { interface ControlsTableProps {
controls: ComplianceControlStatus[]; controls: ComplianceControlStatus[];
} }
const STATUS_COLORS: Record<string, { bg: string; text: string; dot: string }> = { const STATUS_COLORS: Record<string, { bg: string; text: string; dot: string; border: string }> = {
covered: { bg: "bg-green-500/10", text: "text-green-400", dot: "bg-green-500" }, covered: { bg: "bg-green-500/10", text: "text-green-400", dot: "bg-green-500", border: "border-green-500/20" },
partially_covered: { bg: "bg-yellow-500/10", text: "text-yellow-400", dot: "bg-yellow-500" }, partially_covered:{ bg: "bg-yellow-500/10", text: "text-yellow-400", dot: "bg-yellow-500", border: "border-yellow-500/20" },
not_covered: { bg: "bg-red-500/10", text: "text-red-400", dot: "bg-red-500" }, not_covered: { bg: "bg-red-500/10", text: "text-red-400", dot: "bg-red-500", border: "border-red-500/20" },
not_evaluated: { bg: "bg-gray-500/10", text: "text-gray-400", dot: "bg-gray-500" }, not_evaluated: { bg: "bg-gray-500/10", text: "text-gray-400", dot: "bg-gray-500", border: "border-gray-600/20" },
}; };
const STATUS_LABELS: Record<string, string> = { const STATUS_LABELS: Record<string, string> = {
@@ -21,6 +21,22 @@ const STATUS_LABELS: Record<string, string> = {
not_evaluated: "Not Evaluated", not_evaluated: "Not Evaluated",
}; };
function ScoreBar({ score }: { score: number }) {
const color =
score >= 70 ? "bg-green-500"
: score >= 30 ? "bg-yellow-500"
: score > 0 ? "bg-red-500"
: "bg-gray-700";
return (
<div className="flex items-center gap-2">
<div className="h-1.5 w-16 rounded-full bg-gray-800 overflow-hidden">
<div className={`h-full rounded-full ${color} transition-all`} style={{ width: `${score}%` }} />
</div>
<span className="text-xs font-medium text-gray-300 tabular-nums w-8">{score.toFixed(0)}</span>
</div>
);
}
export default function ControlsTable({ controls }: ControlsTableProps) { export default function ControlsTable({ controls }: ControlsTableProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const [expandedId, setExpandedId] = useState<string | null>(null); const [expandedId, setExpandedId] = useState<string | null>(null);
@@ -28,10 +44,8 @@ export default function ControlsTable({ controls }: ControlsTableProps) {
const [categoryFilter, setCategoryFilter] = useState<string>("all"); const [categoryFilter, setCategoryFilter] = useState<string>("all");
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
// Extract unique categories
const categories = [...new Set(controls.map((c) => c.category).filter(Boolean))] as string[]; const categories = [...new Set(controls.map((c) => c.category).filter(Boolean))] as string[];
// Apply filters
const filteredControls = controls.filter((c) => { const filteredControls = controls.filter((c) => {
if (statusFilter !== "all" && c.status !== statusFilter) return false; if (statusFilter !== "all" && c.status !== statusFilter) return false;
if (categoryFilter !== "all" && c.category !== categoryFilter) return false; if (categoryFilter !== "all" && c.category !== categoryFilter) return false;
@@ -39,23 +53,20 @@ export default function ControlsTable({ controls }: ControlsTableProps) {
const q = search.toLowerCase(); const q = search.toLowerCase();
return ( return (
c.control_id.toLowerCase().includes(q) || c.control_id.toLowerCase().includes(q) ||
c.title.toLowerCase().includes(q) c.title.toLowerCase().includes(q) ||
(c.category || "").toLowerCase().includes(q)
); );
} }
return true; return true;
}); });
const toggleExpand = (controlId: string) => { const toggleExpand = (id: string) => setExpandedId(expandedId === id ? null : id);
setExpandedId(expandedId === controlId ? null : controlId);
};
return ( return (
<div> <div className="rounded-xl border border-gray-800 bg-gray-900">
{/* Filters row */} {/* Filters */}
<div className="mb-4 flex flex-wrap items-center gap-3"> <div className="flex flex-wrap items-center gap-3 border-b border-gray-800 px-4 py-3">
<div className="flex items-center gap-2"> <Filter className="h-3.5 w-3.5 shrink-0 text-gray-500" />
<Filter className="h-4 w-4 text-gray-400" />
</div>
<select <select
value={statusFilter} value={statusFilter}
@@ -69,6 +80,7 @@ export default function ControlsTable({ controls }: ControlsTableProps) {
<option value="not_evaluated">Not Evaluated</option> <option value="not_evaluated">Not Evaluated</option>
</select> </select>
{categories.length > 0 && (
<select <select
value={categoryFilter} value={categoryFilter}
onChange={(e) => setCategoryFilter(e.target.value)} onChange={(e) => setCategoryFilter(e.target.value)}
@@ -76,136 +88,151 @@ export default function ControlsTable({ controls }: ControlsTableProps) {
> >
<option value="all">All Categories</option> <option value="all">All Categories</option>
{categories.map((cat) => ( {categories.map((cat) => (
<option key={cat} value={cat}> <option key={cat} value={cat}>{cat}</option>
{cat}
</option>
))} ))}
</select> </select>
)}
<div className="relative flex-1 max-w-xs"> <div className="relative max-w-xs flex-1">
<Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-gray-500" /> <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-gray-500" />
<input <input
type="text" type="text"
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
placeholder="Search by ID or title..." placeholder="Search ID or title…"
className="w-full rounded-lg border border-gray-700 bg-gray-800 py-1.5 pl-8 pr-3 text-xs text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none" className="w-full rounded-lg border border-gray-700 bg-gray-800 py-1.5 pl-8 pr-3 text-xs text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none"
/> />
</div> </div>
<span className="ml-auto text-xs text-gray-500"> <span className="ml-auto text-xs text-gray-500">
{filteredControls.length} of {controls.length} controls {filteredControls.length} / {controls.length}
</span> </span>
</div> </div>
{/* Table */} {/* Table */}
<div className="overflow-hidden rounded-xl border border-gray-800"> <div className="overflow-x-auto">
<table className="w-full"> <table className="w-full text-sm">
<thead> <thead>
<tr className="bg-gray-800/50 text-left text-xs text-gray-500 uppercase tracking-wider"> <tr className="border-b border-gray-800 text-left text-xs text-gray-500 uppercase tracking-wider">
<th className="w-8 px-3 py-2.5" /> <th className="w-8 px-4 py-3" />
<th className="px-3 py-2.5">Control</th> <th className="px-4 py-3 whitespace-nowrap">Control ID</th>
<th className="px-3 py-2.5">Title</th> <th className="px-4 py-3">Title</th>
<th className="px-3 py-2.5 hidden lg:table-cell">Category</th> <th className="hidden px-4 py-3 lg:table-cell whitespace-nowrap">Category</th>
<th className="px-3 py-2.5">Status</th> <th className="px-4 py-3">Status</th>
<th className="px-3 py-2.5">Score</th> <th className="px-4 py-3 whitespace-nowrap">Score</th>
<th className="px-3 py-2.5">Techniques</th> <th className="px-4 py-3 whitespace-nowrap">Techniques</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-800/50"> <tbody className="divide-y divide-gray-800/50">
{filteredControls.length === 0 && (
<tr>
<td colSpan={7} className="px-4 py-10 text-center text-sm text-gray-500">
No controls match the current filters.
</td>
</tr>
)}
{filteredControls.map((control) => { {filteredControls.map((control) => {
const isExpanded = expandedId === control.control_id; const isExpanded = expandedId === control.control_id;
const statusStyle = STATUS_COLORS[control.status] || STATUS_COLORS.not_evaluated; const statusStyle = STATUS_COLORS[control.status] || STATUS_COLORS.not_evaluated;
return ( return (
<tbody key={control.control_id}> <>
{/* Main row */}
<tr <tr
className="cursor-pointer transition-colors hover:bg-gray-800/30" key={control.control_id}
className={`cursor-pointer transition-colors hover:bg-gray-800/40 ${
isExpanded ? "bg-gray-800/20" : ""
}`}
onClick={() => toggleExpand(control.control_id)} onClick={() => toggleExpand(control.control_id)}
> >
<td className="px-3 py-2.5"> <td className="px-4 py-3">
{isExpanded ? ( {isExpanded
<ChevronDown className="h-3.5 w-3.5 text-gray-400" /> ? <ChevronDown className="h-4 w-4 text-cyan-400" />
) : ( : <ChevronRight className="h-4 w-4 text-gray-500" />
<ChevronRight className="h-3.5 w-3.5 text-gray-400" /> }
)}
</td> </td>
<td className="px-3 py-2.5 font-mono text-xs font-medium text-cyan-400"> <td className="px-4 py-3 font-mono text-xs font-semibold text-cyan-400 whitespace-nowrap">
{control.control_id} {control.control_id}
</td> </td>
<td className="px-3 py-2.5 text-sm text-gray-200 truncate max-w-[200px]"> <td className="px-4 py-3 text-sm text-gray-200 max-w-[260px]">
{control.title} <span className="line-clamp-2">{control.title}</span>
</td> </td>
<td className="px-3 py-2.5 text-xs text-gray-500 hidden lg:table-cell"> <td className="hidden px-4 py-3 text-xs text-gray-400 lg:table-cell">
{control.category} {control.category || "—"}
</td> </td>
<td className="px-3 py-2.5"> <td className="px-4 py-3">
<span <span
className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-medium ${statusStyle.bg} ${statusStyle.text}`} className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[10px] font-medium ${statusStyle.bg} ${statusStyle.text} ${statusStyle.border}`}
> >
<span className={`h-1.5 w-1.5 rounded-full ${statusStyle.dot}`} /> <span className={`h-1.5 w-1.5 rounded-full ${statusStyle.dot}`} />
{STATUS_LABELS[control.status]} {STATUS_LABELS[control.status] ?? control.status}
</span> </span>
</td> </td>
<td className="px-3 py-2.5 text-sm font-medium text-gray-300"> <td className="px-4 py-3">
{control.score.toFixed(1)} <ScoreBar score={control.score} />
</td> </td>
<td className="px-3 py-2.5 text-xs text-gray-400"> <td className="px-4 py-3 text-xs text-gray-400 whitespace-nowrap">
{control.techniques_covered}/{control.techniques_count} <span className={control.techniques_covered > 0 ? "text-gray-200" : "text-gray-600"}>
{control.techniques_covered}
</span>
<span className="text-gray-600"> / {control.techniques_count}</span>
</td> </td>
</tr> </tr>
{/* Expanded row: technique details */} {/* Expanded detail row */}
{isExpanded && control.techniques.length > 0 && ( {isExpanded && (
<tr> <tr key={`${control.control_id}-expanded`} className="bg-gray-800/10">
<td colSpan={7} className="bg-gray-800/20 px-6 py-3"> <td colSpan={7} className="px-6 pb-4 pt-2">
<div className="space-y-1"> {control.techniques.length === 0 ? (
<p className="text-xs text-gray-500 italic">No techniques mapped to this control.</p>
) : (
<div>
<p className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500"> <p className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
Mapped Techniques Mapped Techniques ({control.techniques.length})
</p> </p>
<div className="grid gap-1.5 sm:grid-cols-2 lg:grid-cols-3">
{control.techniques.map((tech) => { {control.techniques.map((tech) => {
const techStatusColor = const techStyle =
tech.score >= 70 tech.score >= 70 ? "border-green-500/20 bg-green-500/5 text-green-400"
? "text-green-400" : tech.score >= 30 ? "border-yellow-500/20 bg-yellow-500/5 text-yellow-400"
: tech.score >= 30 : tech.score > 0 ? "border-red-500/20 bg-red-500/5 text-red-400"
? "text-yellow-400" : "border-gray-700 bg-gray-800/30 text-gray-500";
: tech.score > 0
? "text-red-400"
: "text-gray-500";
return ( return (
<div <div
key={tech.mitre_id} key={tech.mitre_id}
className="flex items-center justify-between rounded-lg bg-gray-900/50 px-3 py-1.5 cursor-pointer hover:bg-gray-900" className={`flex items-center justify-between rounded-lg border px-3 py-2 cursor-pointer hover:brightness-125 transition-all ${techStyle}`}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
navigate(`/techniques/${tech.mitre_id}`); navigate(`/techniques/${tech.mitre_id}`);
}} }}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 min-w-0">
<span className="font-mono text-xs text-cyan-400"> <span className="shrink-0 font-mono text-xs font-semibold text-cyan-400">
{tech.mitre_id} {tech.mitre_id}
</span> </span>
<span className="text-xs text-gray-300"> <span className="truncate text-xs text-gray-300">
{tech.name} {tech.name}
</span> </span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex shrink-0 items-center gap-2 pl-2">
<span className="text-[10px] text-gray-500"> <span className="text-[10px] text-gray-500 capitalize hidden sm:block">
{tech.status.replace(/_/g, " ")} {tech.status.replace(/_/g, " ")}
</span> </span>
<span className={`text-xs font-medium ${techStatusColor}`}> <ExternalLink className="h-3 w-3 text-gray-600" />
{tech.score.toFixed(1)}
</span>
</div> </div>
</div> </div>
); );
})} })}
</div> </div>
</div>
)}
</td> </td>
</tr> </tr>
)} )}
</tbody> </>
); );
})} })}
</tbody> </tbody>