{teams.map(team => {
const on = active === team;
return (
);
})}
);
}
/* ── VariantPill ─────────────────────────────────────────────────
The compliance % pill that lives inside MetricHealthCard. One per
priority/variant within a metric family. Dot only shown when the
variant isn't already meeting target — green pills stay quiet. */
function VariantPill({ status, pct, label }) {
const color = statusColor(status);
const isOk = status === 'Meets/Exceeds Target';
return (
{!isOk && (
)}
{label && {label}}
{pctDisplay(pct)}
);
}
/* ── StatusRibbon ────────────────────────────────────────────────
The lozenge at the bottom of MetricHealthCard. "OK" when meeting,
abbreviated status text otherwise. */
function StatusRibbon({ status }) {
const color = statusColor(status);
const isOk = status === 'Meets/Exceeds Target';
return (
{isOk ? 'OK' : status.replace(' of Target', '')}
);
}
/* ── MetricHealthCard ────────────────────────────────────────────
The big clickable cards in the metric strip. Click to filter the
device table; click the info "i" to open the metric definition
panel. Border + ID color shift when active. */
function MetricHealthCard({ family, active, onClick, onInfoClick, onHover, onLeave }) {
const [h, setH] = useCompState(false);
const color = statusColor(family.worstStatus);
return (
);
}
/* ── MetricBadge ─────────────────────────────────────────────────
Compact category-tinted ID chip used in device-row "Failing Metrics"
columns and inside detail panels. */
function MetricBadge({ metricId, category }) {
const color = CATEGORY_COLORS[category] || C_COLORS.slate;
return (
{metricId}
);
}
/* ── SeenBadge ───────────────────────────────────────────────────
"1×" / "3×" / "5×" — how many cycles a host has been failing the
same set of metrics. Color escalates: slate → amber → red. */
function SeenBadge({ count }) {
const color = count > 3 ? C_COLORS.red : count > 1 ? C_COLORS.amber : C_COLORS.slate;
return (
{count}×
);
}
/* ── DeviceTable + DeviceRow ─────────────────────────────────────
The non-compliant host list. Toolbar has Active/Resolved tabs +
hostname search. Rows show hostname, IP, type, failing metric
badges, seen count, and a notes indicator. */
function DeviceTable({ children }) {
return (
);
}
/* ── EmptyState — for table body when there's nothing to show. ── */
function CompEmpty({ children }) {
return (
{children}
);
}
/* ── ChartCard — wrapper around any of the 6 charts on the page. ── */
function ChartCard({ title, subtitle, children, height = 240 }) {
return (
{title}
{subtitle && (
{subtitle}
)}
{children}
);
}
/* ── ChartLegend — shared legend row used at the top of stacked charts. ── */
function ChartLegend({ items }) {
return (
{items.map(it => (
{it.label}
))}
);
}
/* ── DefinitionTooltip ───────────────────────────────────────────
The hover popover that surfaces a metric's title + business
justification + data sources. */
function DefinitionTooltip({ title, justification, sources }) {
return (
{title}
{justification && (
{justification}
)}
{sources && (
Sources: {sources}
)}
);
}
/* ── RollbackDialog ──────────────────────────────────────────────
Centered modal w/ red identity. "Reverses the most recent upload"
message + danger confirm. */
function RollbackDialog({ reportLabel, onCancel, onConfirm, loading }) {
return (
Rollback Upload
This will reverse the most recent upload:
File: {reportLabel}
New items will be deleted, resolved items will be reactivated, and the upload record will be removed.
Cancel
);
}
/* ── RollbackToast — bottom-right confirmation/error toast. ── */
function RollbackToast({ tone = 'success', message, detail, onDismiss }) {
const c = tone === 'error' ? C_COLORS.red : C_COLORS.green;
return (
{message}
{detail &&
{detail}
}
);
}
/* ── CompIcon — every icon used by the compliance page. ── */
function CompIcon({ name, size = 16, color = 'currentColor' }) {
const p = {
width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
stroke: color, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round',
style: { display: 'inline-block', verticalAlign: 'middle' },
};
switch (name) {
case 'upload': return ;
case 'refresh': return ;
case 'rotate': return ;
case 'message': return ;
case 'info': return ;
case 'alert': return ;
case 'check': return ;
case 'loader': return ;
case 'x': return ;
default: return ;
}
}
window.COMP = {
COLORS: C_COLORS, STATUS_COLOR, CATEGORY_COLORS,
statusColor, pctDisplay, cAlpha,
CompPageHeader, CompButton, CompIconButton, TeamTabs,
VariantPill, StatusRibbon, MetricHealthCard, MetricBadge, SeenBadge,
DeviceTable, DeviceTableToolbar, DeviceTableHeader, DeviceRow, CompSearchInput, CompEmpty,
ChartCard, ChartLegend,
DefinitionTooltip, RollbackDialog, RollbackToast,
CompIcon,
};