Failing tests for splitting vulnerabilities into host and container scopes

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/e2e/vuln-scopes.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect, type Page } from '@playwright/test'
+
+async function scan(page: Page) {
+  await page.goto('/login')
+  await page.getByLabel('Email').fill('admin@example.com')
+  await page.getByLabel('Password').fill('admin-password-123')
+  await page.getByRole('button', { name: 'Sign in' }).click()
+  await page.goto('/vulnerabilities')
+  await page.getByRole('button', { name: 'Scan now' }).click()
+  await expect(page.getByTestId('scope-host-critical')).not.toHaveText('0', { timeout: 20_000 })
+}
+
+test('host and container findings are separated into two categories', async ({ page }) => {
+  await scan(page)
+
+  // both categories are visible with their own numbers
+  await expect(page.getByTestId('scope-host')).toContainText('OS, packages and applications')
+  await expect(page.getByTestId('scope-container')).toContainText('images')
+  await expect(page.getByTestId('scope-container-critical')).not.toHaveText('0')
+
+  // host is selected first and shows only host findings, with the package source
+  await expect(page.getByTestId('scope-host')).toHaveAttribute('aria-pressed', 'true')
+  await expect(page.getByRole('row', { name: /CVE-2023-45853/ })).toBeVisible()
+  await expect(page.getByRole('row', { name: /CVE-2024-24790/ })).toHaveCount(0)
+  await expect(page.getByTestId('findings-scroll')).toContainText('Source')
+
+  // switching to containers swaps the table
+  await page.getByTestId('scope-container').click()
+  await expect(page.getByTestId('scope-container')).toHaveAttribute('aria-pressed', 'true')
+  await expect(page.getByRole('row', { name: /CVE-2024-24790/ })).toBeVisible()
+  await expect(page.getByRole('row', { name: /CVE-2023-45853/ })).toHaveCount(0)
+  await expect(page.getByTestId('findings-scroll')).toContainText('Image')
+  await expect(page.getByText('gitea')).toBeVisible()
+
+  // the target filter only offers targets of the selected category
+  const options = await page.getByLabel('Target').locator('option').allTextContents()
+  expect(options.some((o) => o.includes('gitea'))).toBe(true)
+  expect(options).not.toContain('os')
+})

frontend/src/api/types.ts

@@ -132,10 +132,13 @@ export interface ClusterOverview {
 export type Severity = 'critical' | 'high' | 'medium' | 'low' | 'unknown'
 export type FindingStatus = 'open' | 'acknowledged' | 'fixed'
 
+export type FindingScope = 'host' | 'container'
+
 export interface Finding {
   id: string
   target_kind: 'os' | 'image'
   target: string
+  source: string
   cve_id: string
   severity: Severity
   package: string
@@ -148,6 +151,12 @@ export interface Finding {
   last_seen: string
 }
 
+export interface TargetSummary {
+  target: string
+  kind: 'os' | 'image'
+  open: number
+}
+
 export interface SeverityCounts {
   critical: number
   high: number

frontend/src/components/FindingTable.test.ts

@@ -13,6 +13,7 @@ const f = (over: Partial<Finding>): Finding => ({
   fixed_version: null,
   title: 'title',
   url: 'https://x',
+  source: 'debian',
   status: 'open',
   first_seen: '2026-09-01T00:00:00Z',
   last_seen: '2026-09-02T00:00:00Z',
@@ -32,7 +33,7 @@ const findings = [
 
 describe('FindingTable', () => {
   it('renders severity, target, fix version and status', () => {
-    const w = mount(FindingTable, { props: { findings, canAct: true } })
+    const w = mount(FindingTable, { props: { findings, canAct: true, scope: 'host' } })
     const rows = w.findAll('tbody tr')
     expect(rows).toHaveLength(2)
     expect(rows[0].text()).toContain('critical')
@@ -42,7 +43,7 @@ describe('FindingTable', () => {
   })
 
   it('emits acknowledge/reopen and opens details', async () => {
-    const w = mount(FindingTable, { props: { findings, canAct: true } })
+    const w = mount(FindingTable, { props: { findings, canAct: true, scope: 'host' } })
     await w.findAll('button[name=ack]')[0].trigger('click')
     expect(w.emitted('status')![0]).toEqual([findings[0], 'acknowledged'])
     await w.findAll('button[name=ack]')[1].trigger('click')
@@ -52,14 +53,14 @@ describe('FindingTable', () => {
   })
 
   it('hides actions for viewers', () => {
-    const w = mount(FindingTable, { props: { findings, canAct: false } })
+    const w = mount(FindingTable, { props: { findings, canAct: false, scope: 'host' } })
     expect(w.findAll('button[name=ack]')).toHaveLength(0)
   })
 })
 
 describe('FindingTable layout', () => {
   it('keeps the table in a horizontal scroll container and the CVE on one line', () => {
-    const w = mount(FindingTable, { props: { findings, canAct: true } })
+    const w = mount(FindingTable, { props: { findings, canAct: true, scope: 'host' } })
     const wrapper = w.find('[data-testid=findings-scroll]')
     expect(wrapper.exists()).toBe(true)
     expect(wrapper.classes()).toContain('overflow-x-auto')
@@ -68,3 +69,29 @@ describe('FindingTable layout', () => {
     expect(cve.classes()).toContain('whitespace-nowrap')
   })
 })
+
+describe('FindingTable per scope', () => {
+  it('shows the package source instead of the target for host findings', () => {
+    const hostFindings = [
+      f({ cve_id: 'CVE-1', severity: 'high', source: 'debian' }),
+      f({ cve_id: 'CVE-2', source: 'gobinary' }),
+    ]
+    const w = mount(FindingTable, {
+      props: { findings: hostFindings, canAct: true, scope: 'host' },
+    })
+    expect(w.find('thead').text()).toContain('Source')
+    expect(w.find('thead').text()).not.toContain('Target')
+    const row = w.findAll('tbody tr')[0]
+    expect(row.text()).toContain('debian')
+    expect(w.findAll('tbody tr')[1].text()).toContain('gobinary')
+  })
+
+  it('shows the image for container findings', () => {
+    const images = [
+      f({ cve_id: 'CVE-9', target_kind: 'image', target: 'gitea/gitea:1.22', source: 'gobinary' }),
+    ]
+    const w = mount(FindingTable, { props: { findings: images, canAct: true, scope: 'container' } })
+    expect(w.find('thead').text()).toContain('Image')
+    expect(w.findAll('tbody tr')[0].text()).toContain('gitea/gitea:1.22')
+  })
+})

frontend/src/components/ScopeTabs.test.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import ScopeTabs from './ScopeTabs.vue'
+import type { SeverityCounts } from '../api/types'
+
+const host: SeverityCounts = { critical: 3, high: 12, medium: 20, low: 5, unknown: 1 }
+const container: SeverityCounts = { critical: 7, high: 30, medium: 40, low: 2, unknown: 0 }
+
+const props = { modelValue: 'host' as const, host, container, hostTargets: 1, containerTargets: 12 }
+
+describe('ScopeTabs', () => {
+  it('names both categories and what they cover', () => {
+    const w = mount(ScopeTabs, { props })
+    const text = w.text()
+    expect(text).toContain('Host')
+    expect(text).toContain('OS, packages and applications')
+    expect(text).toContain('Containers')
+    expect(text).toContain('images')
+  })
+
+  it('shows the severity split and the number of scanned targets per category', () => {
+    const w = mount(ScopeTabs, { props })
+    const hostCard = w.get('[data-testid=scope-host]')
+    expect(hostCard.get('[data-testid=scope-host-critical]').text()).toBe('3')
+    expect(hostCard.text()).toContain('12')
+    expect(hostCard.text()).toContain('41 open')
+    const containerCard = w.get('[data-testid=scope-container]')
+    expect(containerCard.get('[data-testid=scope-container-critical]').text()).toBe('7')
+    expect(containerCard.text()).toContain('12 images')
+  })
+
+  it('marks the selected category and emits the other one on click', async () => {
+    const w = mount(ScopeTabs, { props })
+    expect(w.get('[data-testid=scope-host]').attributes('aria-pressed')).toBe('true')
+    expect(w.get('[data-testid=scope-container]').attributes('aria-pressed')).toBe('false')
+    await w.get('[data-testid=scope-container]').trigger('click')
+    expect(w.emitted('update:modelValue')![0]).toEqual(['container'])
+  })
+})