Roll findings up per package and image, expandable to their CVEs

The findings table listed every CVE, which is thousands of rows on a real
host. It now shows one row per affected package (host) or image
(containers) with its severity split, how many findings it has and how
many of them have a fix. Clicking a row loads and shows the CVEs of that
group; collapsing keeps them cached.

The rollup is a GROUP BY in SQLite behind a new groups endpoint, so the
page loads a few dozen rows instead of the full finding list, and the
flat list gained a package filter to expand one group.

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

frontend/e2e/vuln-groups.spec.ts

@@ -15,7 +15,7 @@ test('packages and images are one row each and expand to their CVEs', async ({ p
   await scan(page)
 
   // host: a row per package, no CVE ids until a row is opened
-  const zlib = page.getByRole('row', { name: /^zlib1g/ })
+  const zlib = page.getByRole('row', { name: /zlib1g/ })
   await expect(zlib).toBeVisible()
   await expect(page.getByRole('row', { name: /CVE-2023-45853/ })).toHaveCount(0)
 

frontend/e2e/vuln-scopes.spec.ts

@@ -19,19 +19,18 @@ test('host and container findings are separated into two categories', async ({ p
   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
+  // host is selected first and lists host packages with their 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.getByRole('row', { name: /zlib1g/ })).toBeVisible()
+  await expect(page.getByRole('row', { name: /gitea\/gitea/ })).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.getByRole('row', { name: /gitea\/gitea/ }).first()).toBeVisible()
+  await expect(page.getByRole('row', { name: /zlib1g/ })).toHaveCount(0)
+  await expect(page.getByTestId('findings-scroll')).toContainText('Image')
 
   // the filter is labelled per category and only offers targets of that category
   const images = await page.getByLabel('Image', { exact: true }).locator('option').allTextContents()

frontend/e2e/vulnerabilities.spec.ts

@@ -9,13 +9,15 @@ test('admin runs a scan, filters findings and acknowledges one', async ({ page }
 
   await page.getByRole('button', { name: 'Scan now' }).click()
   await expect(page.getByTestId('scope-host-critical')).not.toHaveText('0', { timeout: 20_000 })
+  await page.getByRole('row', { name: /zlib1g/ }).click()
   await expect(page.getByRole('row', { name: /CVE-2023-45853/ })).toBeVisible()
 
   await page.getByLabel('Minimum severity').selectOption('critical')
-  await expect(page.getByRole('row', { name: /CVE-2011-3374/ })).toHaveCount(0)
+  await expect(page.getByRole('row', { name: /apt/ })).toHaveCount(0)
   await page.getByLabel('Minimum severity').selectOption('low')
-  await expect(page.getByRole('row', { name: /CVE-2011-3374/ })).toBeVisible()
+  await expect(page.getByRole('row', { name: /apt/ })).toBeVisible()
 
+  await page.getByRole('row', { name: /zlib1g/ }).click()
   const row = page.getByRole('row', { name: /CVE-2023-45853/ })
   await row.getByRole('button', { name: 'Acknowledge' }).click()
   await expect(row).toContainText('acknowledged')

frontend/src/components/FindingGroups.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Finding, FindingGroup, FindingScope, SeverityCounts } from '../api/types'
+import FindingTable from './FindingTable.vue'
+
+const props = defineProps<{
+  groups: FindingGroup[]
+  scope: FindingScope
+  canAct: boolean
+  /** Loads the findings of one group; called once per group and cached. */
+  load: (group: FindingGroup) => Promise<Finding[]>
+}>()
+const emit = defineEmits<{
+  status: [f: Finding, status: 'open' | 'acknowledged']
+  select: [f: Finding]
+}>()
+
+const open = ref<Set<string>>(new Set())
+const loaded = ref<Record<string, Finding[]>>({})
+const loading = ref<Set<string>>(new Set())
+
+async function toggle(g: FindingGroup) {
+  if (open.value.has(g.key)) {
+    open.value.delete(g.key)
+    return
+  }
+  open.value.add(g.key)
+  if (loaded.value[g.key]) return
+  loading.value.add(g.key)
+  try {
+    loaded.value[g.key] = await props.load(g)
+  } finally {
+    loading.value.delete(g.key)
+  }
+}
+
+/** Drop cached findings so the next expansion reloads them. */
+function reset() {
+  loaded.value = {}
+  open.value.clear()
+}
+defineExpose({ reset })
+
+const chips = [
+  { key: 'critical' as const, cls: 'bg-red-600 text-white' },
+  { key: 'high' as const, cls: 'bg-orange-500 text-white' },
+  { key: 'medium' as const, cls: 'bg-amber-300 text-amber-900' },
+  { key: 'low' as const, cls: 'bg-gray-200 text-gray-700' },
+  { key: 'unknown' as const, cls: 'bg-gray-100 text-gray-500' },
+]
+const shown = (c: SeverityCounts) => chips.filter((s) => c[s.key] > 0)
+</script>
+
+<template>
+  <div data-testid="findings-scroll" class="overflow-x-auto">
+    <table class="w-full text-left text-sm">
+      <thead class="border-b border-gray-200 text-gray-500">
+        <tr>
+          <th class="w-6"></th>
+          <th class="py-2">{{ scope === 'host' ? 'Package' : 'Image' }}</th>
+          <th>{{ scope === 'host' ? 'Source' : 'Packages' }}</th>
+          <th>{{ scope === 'host' ? 'Installed' : '' }}</th>
+          <th>Findings</th>
+          <th>Severity</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="g in groups" :key="g.key">
+          <tr
+            class="cursor-pointer border-b border-gray-100 hover:bg-gray-50"
+            :class="open.has(g.key) ? 'bg-gray-50' : ''"
+            :aria-expanded="open.has(g.key)"
+            @click="toggle(g)"
+          >
+            <td class="py-2 text-gray-400">{{ open.has(g.key) ? '▾' : '▸' }}</td>
+            <td class="max-w-[24rem] truncate font-mono font-medium" :title="g.key">{{ g.key }}</td>
+            <td class="text-xs text-gray-600">
+              <span v-if="scope === 'host'" class="rounded bg-gray-100 px-1.5 py-0.5 font-mono">{{
+                g.source || 'unknown'
+              }}</span>
+              <span v-else>{{ g.packages }} packages</span>
+            </td>
+            <td class="max-w-[12rem] truncate font-mono text-xs text-gray-600" :title="g.installed">
+              {{ g.installed }}
+            </td>
+            <td class="whitespace-nowrap">
+              {{ g.total }}
+              <span v-if="g.fixable" class="ml-1 text-xs text-green-700"
+                >{{ g.fixable }} fixable</span
+              >
+            </td>
+            <td>
+              <span class="flex flex-wrap gap-1">
+                <span
+                  v-for="s in shown(g.counts)"
+                  :key="s.key"
+                  class="rounded-full px-1.5 py-0.5 text-xs font-medium"
+                  :class="s.cls"
+                  :title="s.key"
+                >
+                  {{ g.counts[s.key] }}
+                </span>
+              </span>
+            </td>
+          </tr>
+          <!-- layout row: the nested table carries the semantics -->
+          <tr v-if="open.has(g.key)" :key="`${g.key}-detail`" role="presentation">
+            <td
+              role="presentation"
+              colspan="6"
+              class="border-b border-gray-100 bg-gray-50 px-6 py-3"
+            >
+              <p v-if="loading.has(g.key)" class="text-sm text-gray-500">Loading findings…</p>
+              <p v-else-if="!loaded[g.key]?.length" class="text-sm text-gray-500">
+                No findings in this group.
+              </p>
+              <FindingTable
+                v-else
+                :findings="loaded[g.key]"
+                :scope="scope"
+                :can-act="canAct"
+                context="group"
+                @status="(f, s) => emit('status', f, s)"
+                @select="(f) => emit('select', f)"
+              />
+            </td>
+          </tr>
+        </template>
+        <tr v-if="groups.length === 0">
+          <td colspan="6" class="py-6 text-center text-gray-500">No findings.</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

frontend/src/components/FindingTable.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import type { Finding, FindingScope } from '../api/types'
 
-defineProps<{ findings: Finding[]; canAct: boolean; scope: FindingScope }>()
+const props = defineProps<{
+  findings: Finding[]
+  canAct: boolean
+  scope: FindingScope
+  /** 'group' hides the column that the surrounding group row already names. */
+  context?: 'flat' | 'group'
+}>()
+
+const inGroup = () => props.context === 'group'
 defineEmits<{ status: [f: Finding, status: 'open' | 'acknowledged']; select: [f: Finding] }>()
 
 const sev: Record<string, string> = {
@@ -20,10 +28,10 @@ const sev: Record<string, string> = {
         <tr>
           <th class="py-2">Severity</th>
           <th>CVE</th>
-          <th>Package</th>
+          <th v-if="!(inGroup() && scope === 'host')">Package</th>
           <th>Installed</th>
           <th>Fixed in</th>
-          <th>{{ scope === 'host' ? 'Source' : 'Image' }}</th>
+          <th v-if="!inGroup()">{{ scope === 'host' ? 'Source' : 'Image' }}</th>
           <th>Status</th>
           <th></th>
         </tr>
@@ -41,7 +49,13 @@ const sev: Record<string, string> = {
             }}</span>
           </td>
           <td class="whitespace-nowrap font-mono">{{ f.cve_id }}</td>
-          <td class="max-w-[14rem] truncate font-mono" :title="f.package">{{ f.package }}</td>
+          <td
+            v-if="!(inGroup() && scope === 'host')"
+            class="max-w-[14rem] truncate font-mono"
+            :title="f.package"
+          >
+            {{ f.package }}
+          </td>
           <td class="max-w-[12rem] truncate font-mono text-xs" :title="f.installed_version">
             {{ f.installed_version }}
           </td>

frontend/src/pages/VulnerabilitiesPage.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { api, ApiError } from '../api/client'
 import type {
   Finding,
+  FindingGroup,
   FindingScope,
   JobRun,
   Severity,
@@ -11,13 +12,14 @@ import type {
 } from '../api/types'
 import { useAuthStore } from '../stores/auth'
 import { useToastStore } from '../stores/toast'
-import FindingTable from '../components/FindingTable.vue'
+import FindingGroups from '../components/FindingGroups.vue'
 import ScopeTabs from '../components/ScopeTabs.vue'
 
 const auth = useAuthStore()
 const toast = useToastStore()
 const summary = ref<VulnSummary | null>(null)
-const findings = ref<Finding[]>([])
+const groups = ref<FindingGroup[]>([])
+const groupsRef = ref<InstanceType<typeof FindingGroups> | null>(null)
 const targets = ref<TargetSummary[]>([])
 const scope = ref<FindingScope>('host')
 const minSeverity = ref<Severity>('low')
@@ -36,14 +38,26 @@ async function load() {
   q.set('min_severity', minSeverity.value)
   if (target.value) q.set('target', target.value)
   if (status.value) q.set('status', status.value)
-  const [s, f, t] = await Promise.all([
+  const [s, g, t] = await Promise.all([
     api.get<VulnSummary>('/api/vulnerabilities/summary'),
-    api.get<Finding[]>(`/api/vulnerabilities?${q}`),
+    api.get<FindingGroup[]>(`/api/vulnerabilities/groups?${q}`),
     api.get<TargetSummary[]>('/api/vulnerabilities/targets'),
   ])
   summary.value = s
-  findings.value = f
+  groups.value = g
   targets.value = t
+  groupsRef.value?.reset()
+}
+
+/** Findings of one group, loaded when its row is expanded. */
+async function loadGroup(group: FindingGroup): Promise<Finding[]> {
+  const q = new URLSearchParams()
+  q.set('scope', scope.value)
+  q.set('min_severity', minSeverity.value)
+  if (status.value) q.set('status', status.value)
+  if (group.kind === 'image') q.set('target', group.key)
+  else q.set('package', group.key)
+  return api.get<Finding[]>(`/api/vulnerabilities?${q}`)
 }
 
 /// Targets of the selected category, for the filter dropdown.
@@ -85,7 +99,8 @@ async function scan() {
 async function setStatus(f: Finding, s: 'open' | 'acknowledged') {
   try {
     await api.post(`/api/vulnerabilities/${f.id}/status`, { status: s })
-    await load()
+    f.status = s
+    if (status.value) await load()
   } catch (e) {
     fail(e)
   }
@@ -172,15 +187,18 @@ async function setStatus(f: Finding, s: 'open' | 'acknowledged') {
       </select>
     </div>
     <span class="pb-2 text-sm text-gray-500">
-      {{ findings.length }} {{ scope === 'host' ? 'host' : 'container' }} findings
+      {{ groups.length }} {{ scope === 'host' ? 'packages' : 'images' }} ·
+      {{ groups.reduce((n: number, g: FindingGroup) => n + g.total, 0) }} findings
     </span>
   </div>
 
-  <FindingTable
+  <FindingGroups
+    ref="groupsRef"
     class="mt-4"
-    :findings="findings"
+    :groups="groups"
     :scope="scope"
     :can-act="auth.isAdmin"
+    :load="loadGroup"
     @status="setStatus"
     @select="selected = $event"
   />