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

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

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