feat: chart-led Security overview with sortable Images and History tables (#1364)

* feat: chart-led Security overview with sortable Images and History tables

Refine the Security page around the existing design system and add the
data the dashboard needs.

- Overview leads with four charts (30-day risk trend, severity donut, top
  exposed images, findings by type); the signal-rail counts become a
  secondary summary, and the scanner and deploy-enforcement posture follow.
- Images becomes a recessed table with search, a severity filter, sortable
  columns, a last-scan column, and inline scan actions; the findings cell is
  clickable into the scan sheet, and the per-row cursor tooltip is dropped
  where the columns already carry that information.
- Policies puts deploy-enforcement first, collapses the policy packs into an
  accordion, and uses the standard primary button for Add policy.
- Suppressions and acknowledgements move their titles and Add buttons outside
  the cards, matching the Fleet tab layout.
- History switches from the detail sheet to an inline table (search, sortable
  columns, two-scan compare, pagination); the now-unreachable scan-history
  overlay is removed.
- Add GET /api/security/overview/trend, a node-scoped daily critical/high
  rollup backing the risk-trend chart.
- Extract the shared image-scan hook and the severity classifier, and harden
  the overview data fetch so a malformed non-critical response can never read
  as a clean security state.

* fix: treat malformed Security responses as errors, not empty or clean states

Address an independent review of the data-fetch paths so a 200 with an
unexpected shape can never read as a benign "no findings" view.

- SecurityView: validate that the image-summaries body is a scan-summary map; an
  unexpected shape now sets the error state instead of an empty map. Isolate the
  trend fetch in its own self-catching promise so a transport failure on the
  non-critical chart can no longer poison the overview or summaries error state.
- useImageScan: only a "completed" poll counts as success (a malformed or unknown
  status now throws), and a failed post-scan summaries refresh is logged instead
  of silently dropped.
- HistoryTab: a 200 whose body lacks an items array is treated as an error, not
  an empty "no completed scans" list.
This commit is contained in:
Anso
2026-06-12 14:35:03 -04:00
committed by GitHub
parent 1b96f3b980
commit 3d39d856a3
31 changed files with 1570 additions and 931 deletions
@@ -58,6 +58,40 @@ function seedFailed(imageRef: string): void {
});
}
/** Midnight (UTC) `daysAgo` days back, so seeded times stay within one calendar day. */
function dayStartMs(daysAgo: number): number {
const d = new Date(Date.now() - daysAgo * 24 * 60 * 60 * 1000);
d.setUTCHours(0, 0, 0, 0);
return d.getTime();
}
function seedCompleted(o: { imageRef: string; scannedAt: number; critical: number; high: number; nodeId?: number; status?: 'completed' | 'failed' }): void {
db().createVulnerabilityScan({
node_id: o.nodeId ?? 1,
image_ref: o.imageRef,
image_digest: `sha256:${o.imageRef}-${Math.random().toString(16).slice(2)}`,
scanned_at: o.scannedAt,
total_vulnerabilities: o.critical + o.high,
critical_count: o.critical,
high_count: o.high,
medium_count: 0,
low_count: 0,
unknown_count: 0,
fixable_count: 0,
secret_count: 0,
misconfig_count: 0,
scanners_used: 'vuln',
highest_severity: o.critical > 0 ? 'CRITICAL' : o.high > 0 ? 'HIGH' : null,
os_info: null,
trivy_version: null,
scan_duration_ms: null,
triggered_by: 'manual',
status: o.status ?? 'completed',
error: o.status === 'failed' ? 'boom' : null,
stack_context: null,
});
}
function seedPolicy(overrides: Partial<Omit<ScanPolicy, 'id' | 'created_at' | 'updated_at'>>): void {
db().createScanPolicy({
name: overrides.name ?? 'p',
@@ -116,3 +150,33 @@ describe('countEligibleBlockPolicies (replica)', () => {
expect(db().countEligibleBlockPolicies(1, 'replica', 'self-id')).toBe(1);
});
});
describe('getDailyRiskTrend', () => {
it('sums latest-per-image critical/high per day and orders days ascending', () => {
const day1 = dayStartMs(3);
const day2 = dayStartMs(2);
// Day 1: imageA scanned twice; the later scan replaces the earlier one.
seedCompleted({ imageRef: 'a:1', scannedAt: day1 + 3_600_000, critical: 5, high: 2 });
seedCompleted({ imageRef: 'a:1', scannedAt: day1 + 7_200_000, critical: 3, high: 1 });
seedCompleted({ imageRef: 'b:1', scannedAt: day1 + 3_600_000, critical: 1, high: 1 });
// Day 2: a single image.
seedCompleted({ imageRef: 'a:1', scannedAt: day2 + 3_600_000, critical: 0, high: 4 });
const trend = db().getDailyRiskTrend(1, 30);
expect(trend).toHaveLength(2);
expect(trend[0]).toMatchObject({ critical: 4, high: 2 }); // latest a (3,1) + b (1,1)
expect(trend[1]).toMatchObject({ critical: 0, high: 4 });
expect(trend[0].date < trend[1].date).toBe(true);
});
it('excludes other nodes and non-completed scans', () => {
const day = dayStartMs(1);
seedCompleted({ imageRef: 'a:1', scannedAt: day + 3_600_000, critical: 2, high: 1 });
seedCompleted({ imageRef: 'other:1', scannedAt: day + 3_600_000, critical: 9, high: 9, nodeId: 2 });
seedCompleted({ imageRef: 'failed:1', scannedAt: day + 3_600_000, critical: 7, high: 7, status: 'failed' });
const trend = db().getDailyRiskTrend(1, 30);
expect(trend).toHaveLength(1);
expect(trend[0]).toMatchObject({ critical: 2, high: 1 });
});
});