278b5e47a3
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>
262 lines
8.6 KiB
Vue
262 lines
8.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
import { api, ApiError } from '../api/client'
|
|
import type {
|
|
Finding,
|
|
FindingGroup,
|
|
FindingScope,
|
|
JobRun,
|
|
Severity,
|
|
TargetSummary,
|
|
VulnSummary,
|
|
} from '../api/types'
|
|
import { useAuthStore } from '../stores/auth'
|
|
import { useToastStore } from '../stores/toast'
|
|
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 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')
|
|
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('scope', scope.value)
|
|
q.set('min_severity', minSeverity.value)
|
|
if (target.value) q.set('target', target.value)
|
|
if (status.value) q.set('status', status.value)
|
|
const [s, g, t] = await Promise.all([
|
|
api.get<VulnSummary>('/api/vulnerabilities/summary'),
|
|
api.get<FindingGroup[]>(`/api/vulnerabilities/groups?${q}`),
|
|
api.get<TargetSummary[]>('/api/vulnerabilities/targets'),
|
|
])
|
|
summary.value = s
|
|
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.
|
|
const scopeTargets = computed(() =>
|
|
targets.value.filter((t) => (scope.value === 'host' ? t.kind === 'os' : t.kind === 'image')),
|
|
)
|
|
|
|
function selectScope(next: FindingScope) {
|
|
if (next === scope.value) return
|
|
scope.value = next
|
|
target.value = ''
|
|
}
|
|
onMounted(() => load().catch(fail))
|
|
onUnmounted(() => clearInterval(timer))
|
|
watch([scope, 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 })
|
|
f.status = s
|
|
if (status.value) await load()
|
|
} catch (e) {
|
|
fail(e)
|
|
}
|
|
}
|
|
</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>
|
|
|
|
<ScopeTabs
|
|
v-if="summary"
|
|
class="mt-6"
|
|
:model-value="scope"
|
|
:host="summary.os"
|
|
:container="summary.images"
|
|
:host-targets="targets.filter((t) => t.kind === 'os').length"
|
|
:container-targets="targets.filter((t) => t.kind === 'image').length"
|
|
@update:model-value="selectScope"
|
|
/>
|
|
|
|
<p v-if="summary" class="mt-3 text-sm text-gray-500">
|
|
Last scan {{ summary.last_scan ? new Date(summary.last_scan).toLocaleString() : 'never' }} ·
|
|
scanner
|
|
{{ summary.scanner }}
|
|
</p>
|
|
|
|
<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">{{
|
|
scope === 'host' ? 'Target' : 'Image'
|
|
}}</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="">{{ scope === 'host' ? 'All targets' : 'All images' }}</option>
|
|
<option v-for="t in scopeTargets" :key="t.target" :value="t.target">
|
|
{{ t.target }} ({{ t.open }})
|
|
</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">
|
|
{{ groups.length }} {{ scope === 'host' ? 'packages' : 'images' }} ·
|
|
{{ groups.reduce((n: number, g: FindingGroup) => n + g.total, 0) }} findings
|
|
</span>
|
|
</div>
|
|
|
|
<FindingGroups
|
|
ref="groupsRef"
|
|
class="mt-4"
|
|
:groups="groups"
|
|
:scope="scope"
|
|
:can-act="auth.isAdmin"
|
|
:load="loadGroup"
|
|
@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">{{ selected.target_kind === 'os' ? 'Found on' : 'Image' }}</dt>
|
|
<dd class="col-span-2 font-mono break-all">
|
|
{{ selected.target_kind === 'os' ? 'Debian host' : selected.target }}
|
|
<span v-if="selected.source" class="ml-1 rounded bg-gray-100 px-1.5 py-0.5 text-xs">{{
|
|
selected.source
|
|
}}</span>
|
|
</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>
|