From fffa7d94bded36676a922fac5b6244c6e9cf7ff8 Mon Sep 17 00:00:00 2001
From: Jamie Banks <jamie@jdbnet.co.uk>
Date: Fri, 17 Jul 2026 09:08:25 +0100
Subject: [PATCH] feat: add severity filtering and search functionality to
 FindingsInspector

---
 frontend/src/components/FindingsInspector.vue | 68 ++++++++++++++++---
 1 file changed, 59 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/FindingsInspector.vue b/frontend/src/components/FindingsInspector.vue
index f48d21e..b835ea4 100644
--- a/frontend/src/components/FindingsInspector.vue
+++ b/frontend/src/components/FindingsInspector.vue
@@ -9,9 +9,32 @@
     </div>
 
     <div class="bg-surface rounded-xl overflow-hidden shadow-lg border border-border-subtle">
-      <div class="px-6 py-4 border-b border-border-subtle flex justify-between items-center">
-        <h3 class="text-lg font-medium text-heading">All Findings ({{ findings.length }})</h3>
-        <button @click="loadFindings" class="text-body hover:text-heading transition-colors hover:cursor-pointer">Refresh</button>
+      <div class="px-6 py-4 border-b border-border-subtle flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+        <h3 class="text-lg font-medium text-heading whitespace-nowrap">
+          Findings ({{ filteredFindings.length }} / {{ findings.length }})
+        </h3>
+        
+        <div class="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto">
+          <!-- Severity Filters -->
+          <div class="flex flex-wrap items-center gap-3 text-sm">
+            <label v-for="sev in ['critical', 'high', 'medium', 'low', 'info']" :key="sev" class="flex items-center space-x-1 cursor-pointer">
+              <input type="checkbox" v-model="selectedSeverities" :value="sev" class="rounded border-border-subtle bg-bg text-accent focus:ring-accent">
+              <span class="capitalize text-body">{{ sev }}</span>
+            </label>
+          </div>
+          
+          <!-- Search Box -->
+          <div class="relative w-full md:w-64">
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <svg class="h-4 w-4 text-body" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+            </div>
+            <input v-model="searchQuery" type="text" placeholder="Search findings..." class="w-full bg-bg border border-border-subtle rounded-lg pl-9 pr-4 py-2 text-sm text-heading focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-all">
+          </div>
+          
+          <button @click="loadFindings" class="text-body hover:text-heading transition-colors hover:cursor-pointer p-2 bg-bg rounded-lg border border-border-subtle" title="Refresh">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
+          </button>
+        </div>
       </div>
       
       <div class="overflow-x-auto">
@@ -25,7 +48,7 @@
             </tr>
           </thead>
           <tbody class="divide-y divide-border-subtle">
-            <tr v-for="finding in findings" :key="finding.id" class="hover:bg-border-subtle/30 transition-colors">
+            <tr v-for="finding in filteredFindings" :key="finding.id" class="hover:bg-border-subtle/30 transition-colors">
               <td class="px-6 py-4">
                 <span :class="severityClass(finding.severity)" class="px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wider border">
                   {{ finding.severity }}
@@ -41,13 +64,13 @@
               <td class="px-6 py-4 text-body font-mono text-xs">{{ finding.host }}</td>
               <td class="px-6 py-4 text-body text-xs break-all max-w-xs">{{ finding.matched_at }}</td>
             </tr>
-            <tr v-if="findings.length === 0">
+            <tr v-if="filteredFindings.length === 0">
               <td colspan="4" class="px-6 py-12 text-center">
                 <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-bg mb-4 border border-border-subtle">
-                  <svg class="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                  <svg class="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                 </div>
-                <h3 class="text-lg font-medium text-heading mb-1">No Findings</h3>
-                <p class="text-body">This scan completed cleanly without any detected vulnerabilities.</p>
+                <h3 class="text-lg font-medium text-heading mb-1">No matches found</h3>
+                <p class="text-body">Try adjusting your search query or severity filters.</p>
               </td>
             </tr>
           </tbody>
@@ -58,13 +81,40 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 const props = defineProps({
   id: { type: String, required: true }
 })
 
 const findings = ref([])
+const searchQuery = ref('')
+const selectedSeverities = ref(['critical', 'high', 'medium', 'low', 'info'])
+
+const filteredFindings = computed(() => {
+  let result = findings.value
+  
+  // Filter by severity
+  if (selectedSeverities.value.length > 0) {
+    result = result.filter(f => selectedSeverities.value.includes(f.severity.toLowerCase()))
+  } else {
+    // If no severities are selected, show none
+    return []
+  }
+
+  // Filter by search query
+  if (searchQuery.value.trim()) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter(f => {
+      return (f.name && f.name.toLowerCase().includes(query)) ||
+             (f.template_id && f.template_id.toLowerCase().includes(query)) ||
+             (f.host && f.host.toLowerCase().includes(query)) ||
+             (f.description && f.description.toLowerCase().includes(query))
+    })
+  }
+  
+  return result
+})
 
 const loadFindings = async () => {
   try {