mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-11 19:26:56 +00:00
feat: add dedicated Security page and policy-pack foundation (#1362)
* feat: add dedicated Security page and policy-pack foundation Bring vulnerability scanning, scan history, suppressions, Compose risks, secrets, policy packs, and scanner setup into one node-scoped Security command center instead of scattering them across Resources and Settings. - New top-level Security view with Overview, Images, Compose risks, Secrets, Policies, Suppressions, History, and Scanner setup tabs (status masthead + signal rail; controlled tabs with deep-link support). - Backend: GET /security/overview rollup and GET /security/policy-packs static catalog (auth-only, Community). DatabaseService gains an uncapped scan-status count and a node-eligible block-policy count, and getImageScanSummaries now projects secret and misconfig counts. - Reuse existing surfaces: the scan-history sheet, the control-governed suppression and acknowledgement panels, and the scan-detail sheet (now with an initial-tab prop so it opens on the matching finding type). - Extract a shared SeverityBadge (from Resources) and a TrivyManager (from Settings) so both surfaces render identical controls. - Resources "Scan history" now links into the Security page History tab. - Docs for the new Security surface and tests for the new endpoints, helpers, nav wiring, and tabs. * refactor: consolidate scanner and policy management onto the Security page Remove the Settings "Vulnerability Scanning" section now that the Security page covers the same ground, with every option preserved: - Scanner install / update / uninstall / auto-update live on the Scanner setup tab (TrivyManager). - Scan policies, the honor-suppressions toggle, and the replica managed-by-control / demote controls move into a new ScanPolicyManager on the Policies tab (paid; Community sees only the policy-pack catalog). - CVE suppressions and acknowledgements remain on the Suppressions tab. Wiring removed: the registry section and the now-empty Security settings group, the SectionId, the SettingsSectionContent case and the isPaid prop it was the sole consumer of, and SecuritySection itself. The dashboard configuration-status "Vulnerability scanning" row now navigates to the Security page Policies tab. Docs that pointed at "Settings -> Security -> Vulnerability Scanning" are swept to the relevant Security page tabs. * fix: harden Security page scanner refresh, policy-load errors, and secret-only badges Address independent-review findings on the Security page: - Scanner setup now refreshes Trivy state when the active node changes, so the displayed scanner status matches the node TrivyManager's actions target (both follow x-node-id). Previously, switching nodes on the tab left stale state. - ScanPolicyManager surfaces an explicit error state on a failed policy fetch instead of falling through to a false "No scan policies configured". - The shared SeverityBadge and the Images findings column no longer label a scan "clean" when it has secrets or misconfigurations but no CVE severity (highest_severity is derived from vulnerabilities only); they show a "Findings" state and the secret/misconfig counts instead. - The Overview enforcement note points to the Policies tab, not the removed Settings section. - The History tab auto-opens the scan-history sheet only on a deep-link (mount with the History tab active), not on every manual tab selection. Adds tests for the badge secret/misconfig state and the policy-load error state.
This commit is contained in:
Anso
@@ -0,0 +1,82 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { CursorProvider, CursorContainer, Cursor, CursorFollow } from '@/components/animate-ui/primitives/animate/cursor';
|
||||
import { SEVERITY_BADGE_CLASSES, SEVERITY_DOT_CLASSES } from '@/lib/severityStyles';
|
||||
import type { ScanSummary, VulnSeverity } from '@/types/security';
|
||||
|
||||
/**
|
||||
* Severity pill for a scanned image's latest summary. Shows the highest
|
||||
* severity (or "Clean") with a state dot and a cursor-follow tooltip carrying
|
||||
* the last-scanned time and a severity breakdown. Shared by the Resources view
|
||||
* and the Security page so the badge stays identical everywhere.
|
||||
*/
|
||||
export function SeverityBadge({ summary, onClick }: { summary: ScanSummary; onClick: () => void }) {
|
||||
// highest_severity is derived from vulnerabilities only, so a scan with
|
||||
// secrets or misconfigurations but zero CVEs would otherwise read "Clean".
|
||||
// Treat those as a non-clean "Findings" state.
|
||||
const hasNonVulnFindings = (summary.secret_count ?? 0) > 0 || (summary.misconfig_count ?? 0) > 0;
|
||||
const key: VulnSeverity | 'CLEAN' | 'FINDINGS' =
|
||||
summary.highest_severity ?? (hasNonVulnFindings ? 'FINDINGS' : 'CLEAN');
|
||||
const label = key === 'CLEAN' ? 'Clean' : key === 'FINDINGS' ? 'Findings' : key;
|
||||
const [relative, setRelative] = useState<string>('');
|
||||
useEffect(() => {
|
||||
const compute = () => {
|
||||
const scanAge = Math.round((Date.now() - summary.scanned_at) / 60000);
|
||||
setRelative(
|
||||
scanAge < 1 ? 'just now'
|
||||
: scanAge < 60 ? `${scanAge}m ago`
|
||||
: scanAge < 1440 ? `${Math.round(scanAge / 60)}h ago`
|
||||
: `${Math.round(scanAge / 1440)}d ago`,
|
||||
);
|
||||
};
|
||||
compute();
|
||||
const id = setInterval(compute, 60000);
|
||||
return () => clearInterval(id);
|
||||
}, [summary.scanned_at]);
|
||||
|
||||
return (
|
||||
<CursorProvider>
|
||||
<CursorContainer className="inline-flex">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 px-1.5 py-0.5 rounded border text-[10px] font-medium cursor-pointer hover:brightness-110 transition',
|
||||
SEVERITY_BADGE_CLASSES[key],
|
||||
)}
|
||||
>
|
||||
<span className={cn('w-1.5 h-1.5 rounded-full shrink-0', SEVERITY_DOT_CLASSES[key])} />
|
||||
{label}
|
||||
</button>
|
||||
</CursorContainer>
|
||||
<Cursor>
|
||||
<div className="h-2 w-2 rounded-full bg-brand" />
|
||||
</Cursor>
|
||||
<CursorFollow side="bottom" align="end" sideOffset={8}>
|
||||
<div className="bg-popover/95 backdrop-blur-[10px] backdrop-saturate-[1.15] border border-card-border shadow-md rounded-md px-3 py-2">
|
||||
<div className="font-mono tabular-nums text-xs space-y-1">
|
||||
<div className="text-stat-subtitle uppercase tracking-wide">Last scanned</div>
|
||||
<div className="text-stat-value">{relative}</div>
|
||||
{summary.total > 0 && (
|
||||
<div className="flex gap-3 mt-1">
|
||||
{summary.critical > 0 && <span className="text-destructive">{summary.critical}C</span>}
|
||||
{summary.high > 0 && <span className="text-warning">{summary.high}H</span>}
|
||||
{summary.medium > 0 && <span className="text-warning">{summary.medium}M</span>}
|
||||
{summary.low > 0 && <span className="text-muted-foreground">{summary.low}L</span>}
|
||||
</div>
|
||||
)}
|
||||
{summary.total === 0 && hasNonVulnFindings && (
|
||||
<div className="flex gap-3 mt-1 text-warning">
|
||||
{(summary.secret_count ?? 0) > 0 && <span>{summary.secret_count} secret</span>}
|
||||
{(summary.misconfig_count ?? 0) > 0 && <span>{summary.misconfig_count} misconfig</span>}
|
||||
</div>
|
||||
)}
|
||||
{summary.total === 0 && !hasNonVulnFindings && (
|
||||
<div className="text-success">No findings</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CursorFollow>
|
||||
</CursorProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* The severity badge was extracted from ResourcesView into a shared component so
|
||||
* Resources and the Security page render an identical pill. Lock its label
|
||||
* mapping (highest severity, or "Clean" when there are no findings).
|
||||
*/
|
||||
import { it, expect, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { SeverityBadge } from '../SeverityBadge';
|
||||
import type { ScanSummary } from '@/types/security';
|
||||
|
||||
function summary(overrides: Partial<ScanSummary>): ScanSummary {
|
||||
return {
|
||||
image_ref: 'nginx:1',
|
||||
highest_severity: 'CRITICAL',
|
||||
scanned_at: 1,
|
||||
scan_id: 1,
|
||||
total: 0,
|
||||
critical: 0,
|
||||
high: 0,
|
||||
medium: 0,
|
||||
low: 0,
|
||||
unknown: 0,
|
||||
fixable: 0,
|
||||
secret_count: 0,
|
||||
misconfig_count: 0,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
it('renders the highest severity and fires onClick', async () => {
|
||||
const onClick = vi.fn();
|
||||
render(<SeverityBadge summary={summary({ highest_severity: 'CRITICAL', total: 5, critical: 5 })} onClick={onClick} />);
|
||||
const btn = screen.getByRole('button', { name: /CRITICAL/ });
|
||||
await userEvent.click(btn);
|
||||
expect(onClick).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it('renders "Clean" when there are no findings of any kind', () => {
|
||||
render(<SeverityBadge summary={summary({ highest_severity: null })} onClick={() => {}} />);
|
||||
expect(screen.getByRole('button', { name: /Clean/ })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders "Findings" (not "Clean") for a secret-only scan with no CVE severity', () => {
|
||||
render(<SeverityBadge summary={summary({ highest_severity: null, secret_count: 2 })} onClick={() => {}} />);
|
||||
expect(screen.getByRole('button', { name: /Findings/ })).toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: /Clean/ })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders "Findings" for a misconfig-only scan', () => {
|
||||
render(<SeverityBadge summary={summary({ highest_severity: null, misconfig_count: 3 })} onClick={() => {}} />);
|
||||
expect(screen.getByRole('button', { name: /Findings/ })).toBeInTheDocument();
|
||||
});
|
||||
Reference in New Issue
Block a user