WP-20/21: vulnerability management with Trivy and mail notifications

Trivy scanner adapter (rootfs + image JSON, parsed and deduplicated),
findings repository, scan diff that keeps first_seen, marks disappeared
findings fixed and skips failed targets, vulnerability_scan job (daily by
default), digest mail for new findings at or above a configurable severity,
/api/vulnerabilities routes, Vulnerabilities page with severity tiles,
filters, details and acknowledge, notification threshold in settings.
Deploy script installs Trivy from the Aqua apt repository.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/components/FindingTable.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { Finding } from '../api/types'
+
+defineProps<{ findings: Finding[]; canAct: boolean }>()
+defineEmits<{ status: [f: Finding, status: 'open' | 'acknowledged']; select: [f: Finding] }>()
+
+const sev: Record<string, string> = {
+  critical: 'bg-red-600 text-white',
+  high: 'bg-orange-500 text-white',
+  medium: 'bg-amber-300 text-amber-900',
+  low: 'bg-gray-200 text-gray-700',
+  unknown: 'bg-gray-100 text-gray-500',
+}
+</script>
+
+<template>
+  <table class="w-full text-left text-sm">
+    <thead class="border-b border-gray-200 text-gray-500">
+      <tr>
+        <th class="py-2">Severity</th>
+        <th>CVE</th>
+        <th>Package</th>
+        <th>Installed</th>
+        <th>Fixed in</th>
+        <th>Target</th>
+        <th>Status</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="f in findings"
+        :key="f.id"
+        class="border-b border-gray-100"
+        :class="f.status === 'acknowledged' ? 'text-gray-500' : ''"
+      >
+        <td class="py-1.5">
+          <span class="rounded-full px-2 py-0.5 text-xs font-medium" :class="sev[f.severity]">{{
+            f.severity
+          }}</span>
+        </td>
+        <td class="font-mono">{{ f.cve_id }}</td>
+        <td class="font-mono">{{ f.package }}</td>
+        <td class="font-mono text-xs">{{ f.installed_version }}</td>
+        <td class="font-mono text-xs" :class="f.fixed_version ? 'text-green-700' : 'text-gray-400'">
+          {{ f.fixed_version ?? '–' }}
+        </td>
+        <td class="max-w-xs truncate font-mono text-xs" :title="f.target">{{ f.target }}</td>
+        <td>{{ f.status }}</td>
+        <td class="space-x-3 whitespace-nowrap text-right">
+          <button name="details" class="text-blue-600 hover:underline" @click="$emit('select', f)">
+            Details
+          </button>
+          <button
+            v-if="canAct"
+            name="ack"
+            class="text-blue-600 hover:underline"
+            @click="$emit('status', f, f.status === 'acknowledged' ? 'open' : 'acknowledged')"
+          >
+            {{ f.status === 'acknowledged' ? 'Reopen' : 'Acknowledge' }}
+          </button>
+        </td>
+      </tr>
+      <tr v-if="findings.length === 0">
+        <td colspan="8" class="py-6 text-center text-gray-500">No findings.</td>
+      </tr>
+    </tbody>
+  </table>
+</template>

frontend/src/pages/SettingsPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { api, ApiError } from '../api/client'
-import type { ScheduleView, SmtpPayload, SmtpView } from '../api/types'
+import type { ScheduleView, Severity, SmtpPayload, SmtpView } from '../api/types'
 import { useAuthStore } from '../stores/auth'
 import { useToastStore } from '../stores/toast'
 import SmtpForm from '../components/SmtpForm.vue'
@@ -14,6 +14,7 @@ const busy = ref(false)
 const testTo = ref('')
 const schedules = ref<ScheduleView[]>([])
 const cronInputs = ref<Record<string, string>>({})
+const minSeverity = ref<Severity>('high')
 
 const labels: Record<string, string> = {
   package_refresh: 'Package refresh',
@@ -29,6 +30,9 @@ async function load() {
   smtp.value = res.smtp
   schedules.value = await api.get<ScheduleView[]>('/api/settings/schedules')
   cronInputs.value = Object.fromEntries(schedules.value.map((s) => [s.kind, s.cron ?? '']))
+  minSeverity.value = (
+    await api.get<{ min_severity: Severity }>('/api/settings/notifications')
+  ).min_severity
   loaded.value = true
 }
 onMounted(() => load().catch(fail))
@@ -58,6 +62,18 @@ async function sendTest() {
   }
 }
 
+async function saveNotifications() {
+  busy.value = true
+  try {
+    await api.put('/api/settings/notifications', { min_severity: minSeverity.value })
+    toast.success('Notification settings saved')
+  } catch (e) {
+    fail(e)
+  } finally {
+    busy.value = false
+  }
+}
+
 async function saveSchedules() {
   busy.value = true
   try {
@@ -113,6 +129,38 @@ async function saveSchedules() {
     </form>
   </section>
 
+  <section class="mt-10">
+    <h2 class="text-lg font-medium">Vulnerability notifications</h2>
+    <p class="mb-4 text-sm text-gray-600">
+      A mail is sent to the notification recipients when a scan finds new vulnerabilities at or
+      above this severity.
+    </p>
+    <form class="flex max-w-xl items-end gap-2" @submit.prevent="saveNotifications">
+      <div>
+        <label for="notify-sev" class="block text-sm font-medium">Notify from severity</label>
+        <select
+          id="notify-sev"
+          v-model="minSeverity"
+          :disabled="!auth.isAdmin"
+          class="mt-1 rounded-md border border-gray-300 px-3 py-2"
+        >
+          <option value="critical">Critical</option>
+          <option value="high">High</option>
+          <option value="medium">Medium</option>
+          <option value="low">Low</option>
+        </select>
+      </div>
+      <button
+        v-if="auth.isAdmin"
+        type="submit"
+        :disabled="busy"
+        class="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+      >
+        Save notifications
+      </button>
+    </form>
+  </section>
+
   <section class="mt-10">
     <h2 class="text-lg font-medium">Schedules</h2>
     <p class="mb-4 text-sm text-gray-600">

frontend/src/pages/VulnerabilitiesPage.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { api, ApiError } from '../api/client'
+import type { Finding, JobRun, Severity, VulnSummary } from '../api/types'
+import { useAuthStore } from '../stores/auth'
+import { useToastStore } from '../stores/toast'
+import FindingTable from '../components/FindingTable.vue'
+
+const auth = useAuthStore()
+const toast = useToastStore()
+const summary = ref<VulnSummary | null>(null)
+const findings = ref<Finding[]>([])
+const targets = ref<string[]>([])
+const minSeverity = ref<Severity>('low')
+const target = ref('')
+const status = ref('')
+const scanning = ref(false)
+const scanRun = ref<JobRun | null>(null)
+const selected = ref<Finding | null>(null)
+let timer: ReturnType<typeof setInterval> | undefined
+
+const fail = (e: unknown) => toast.error(e instanceof ApiError ? e.message : 'Request failed')
+
+async function load() {
+  const q = new URLSearchParams()
+  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([
+    api.get<VulnSummary>('/api/vulnerabilities/summary'),
+    api.get<Finding[]>(`/api/vulnerabilities?${q}`),
+    api.get<string[]>('/api/vulnerabilities/targets'),
+  ])
+  summary.value = s
+  findings.value = f
+  targets.value = t
+}
+onMounted(() => load().catch(fail))
+onUnmounted(() => clearInterval(timer))
+watch([minSeverity, target, status], () => load().catch(fail))
+
+async function scan() {
+  scanning.value = true
+  try {
+    scanRun.value = await api.post<JobRun>('/api/jobs/run', { kind: 'vulnerability_scan' })
+    timer = setInterval(async () => {
+      if (!scanRun.value) return
+      const r = await api.get<JobRun>(`/api/jobs/${scanRun.value.id}`)
+      scanRun.value = r
+      if (r.status !== 'running') {
+        clearInterval(timer)
+        scanning.value = false
+        if (r.status === 'success') toast.success('Scan finished')
+        else toast.error('Scan failed, see the log')
+        await load()
+      }
+    }, 1500)
+  } catch (e) {
+    scanning.value = false
+    fail(e)
+  }
+}
+
+async function setStatus(f: Finding, s: 'open' | 'acknowledged') {
+  try {
+    await api.post(`/api/vulnerabilities/${f.id}/status`, { status: s })
+    await load()
+  } catch (e) {
+    fail(e)
+  }
+}
+
+const tiles: { key: keyof VulnSummary['total']; label: string; cls: string }[] = [
+  { key: 'critical', label: 'Critical', cls: 'text-red-700' },
+  { key: 'high', label: 'High', cls: 'text-orange-600' },
+  { key: 'medium', label: 'Medium', cls: 'text-amber-600' },
+  { key: 'low', label: 'Low', cls: 'text-gray-600' },
+]
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <h1 class="text-2xl font-semibold">Vulnerabilities</h1>
+    <button
+      v-if="auth.isAdmin"
+      :disabled="scanning"
+      class="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+      @click="scan"
+    >
+      {{ scanning ? 'Scanning…' : 'Scan now' }}
+    </button>
+  </div>
+
+  <div v-if="summary" class="mt-6 grid gap-4 md:grid-cols-5">
+    <div v-for="t in tiles" :key="t.key" class="rounded-lg border border-gray-200 bg-white p-4">
+      <div class="text-xs uppercase text-gray-500">{{ t.label }}</div>
+      <div :data-testid="`count-${t.key}`" class="mt-1 text-2xl font-semibold" :class="t.cls">
+        {{ summary.total[t.key] }}
+      </div>
+      <div class="text-xs text-gray-500">
+        OS {{ summary.os[t.key] }} · images {{ summary.images[t.key] }}
+      </div>
+    </div>
+    <div class="rounded-lg border border-gray-200 bg-white p-4">
+      <div class="text-xs uppercase text-gray-500">Last scan</div>
+      <div class="mt-1 text-sm font-medium">
+        {{ summary.last_scan ? new Date(summary.last_scan).toLocaleString() : 'never' }}
+      </div>
+      <div class="text-xs text-gray-500">scanner {{ summary.scanner }}</div>
+    </div>
+  </div>
+
+  <div
+    v-if="scanRun && scanRun.status === 'running'"
+    class="mt-4 rounded-md border border-gray-200 bg-white"
+  >
+    <pre class="max-h-40 overflow-auto p-3 text-xs">{{ scanRun.log || '(starting)' }}</pre>
+  </div>
+
+  <div class="mt-8 flex flex-wrap items-end gap-4">
+    <div>
+      <label for="f-sev" class="block text-sm font-medium">Minimum severity</label>
+      <select
+        id="f-sev"
+        v-model="minSeverity"
+        class="mt-1 rounded-md border border-gray-300 px-3 py-2"
+      >
+        <option value="critical">Critical</option>
+        <option value="high">High</option>
+        <option value="medium">Medium</option>
+        <option value="low">Low</option>
+        <option value="unknown">All</option>
+      </select>
+    </div>
+    <div>
+      <label for="f-target" class="block text-sm font-medium">Target</label>
+      <select
+        id="f-target"
+        v-model="target"
+        class="mt-1 max-w-xs rounded-md border border-gray-300 px-3 py-2"
+      >
+        <option value="">All targets</option>
+        <option v-for="t in targets" :key="t" :value="t">{{ t }}</option>
+      </select>
+    </div>
+    <div>
+      <label for="f-status" class="block text-sm font-medium">Status</label>
+      <select
+        id="f-status"
+        v-model="status"
+        class="mt-1 rounded-md border border-gray-300 px-3 py-2"
+      >
+        <option value="">Open + acknowledged</option>
+        <option value="open">Open</option>
+        <option value="acknowledged">Acknowledged</option>
+      </select>
+    </div>
+    <span class="pb-2 text-sm text-gray-500">{{ findings.length }} findings</span>
+  </div>
+
+  <FindingTable
+    class="mt-4"
+    :findings="findings"
+    :can-act="auth.isAdmin"
+    @status="setStatus"
+    @select="selected = $event"
+  />
+
+  <div
+    v-if="selected"
+    class="fixed inset-0 flex items-center justify-center bg-black/30"
+    @click.self="selected = null"
+  >
+    <div class="w-full max-w-lg rounded-lg bg-white p-6 shadow-lg" role="dialog">
+      <h2 class="font-mono text-lg font-semibold">{{ selected.cve_id }}</h2>
+      <p class="mt-2 text-sm">{{ selected.title }}</p>
+      <dl class="mt-4 grid grid-cols-3 gap-y-2 text-sm">
+        <dt class="text-gray-500">Severity</dt>
+        <dd class="col-span-2">{{ selected.severity }}</dd>
+        <dt class="text-gray-500">Package</dt>
+        <dd class="col-span-2 font-mono">
+          {{ selected.package }} {{ selected.installed_version }}
+        </dd>
+        <dt class="text-gray-500">Fixed in</dt>
+        <dd class="col-span-2 font-mono">{{ selected.fixed_version ?? 'no fix available' }}</dd>
+        <dt class="text-gray-500">Target</dt>
+        <dd class="col-span-2 font-mono break-all">{{ selected.target }}</dd>
+        <dt class="text-gray-500">First seen</dt>
+        <dd class="col-span-2">{{ new Date(selected.first_seen).toLocaleString() }}</dd>
+        <dt class="text-gray-500">Last seen</dt>
+        <dd class="col-span-2">{{ new Date(selected.last_seen).toLocaleString() }}</dd>
+      </dl>
+      <div class="mt-6 flex items-center justify-between">
+        <a
+          :href="selected.url"
+          target="_blank"
+          rel="noopener"
+          class="text-sm text-blue-600 hover:underline"
+          >Advisory</a
+        >
+        <div class="flex gap-2">
+          <RouterLink
+            v-if="selected.target_kind === 'os' && selected.fixed_version"
+            to="/updates"
+            class="rounded-md border border-gray-300 px-4 py-2 text-sm"
+          >
+            Go to updates
+          </RouterLink>
+          <button
+            class="rounded-md bg-blue-600 px-4 py-2 text-sm text-white"
+            @click="selected = null"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/router.ts

@@ -10,6 +10,7 @@ import SettingsPage from './pages/SettingsPage.vue'
 import JobsPage from './pages/JobsPage.vue'
 import UpdatesPage from './pages/UpdatesPage.vue'
 import ClusterPage from './pages/ClusterPage.vue'
+import VulnerabilitiesPage from './pages/VulnerabilitiesPage.vue'
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -22,11 +23,7 @@ export const router = createRouter({
         { path: '', name: 'dashboard', component: DashboardPage },
         { path: 'updates', component: UpdatesPage },
         { path: 'cluster', component: ClusterPage },
-        {
-          path: 'vulnerabilities',
-          component: PlaceholderPage,
-          props: { title: 'Vulnerabilities' },
-        },
+        { path: 'vulnerabilities', component: VulnerabilitiesPage },
         { path: 'backups', component: PlaceholderPage, props: { title: 'Backups' } },
         { path: 'users', component: UsersPage, meta: { admin: true } },
         { path: 'jobs', component: JobsPage },