Feat: Column base filters out of table on Image details page

Author: NickChungSUSE

pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue

@@ -137,8 +137,8 @@
       </div>
     </div>
 
-    <!-- Search Filters - Disabled for MVP version -->
-    <!-- <div class="search-filters">
+    <!-- Search Filters -->
+    <div class="search-filters">
       <div class="filter-row">
         <div class="filter-item">
           <label>CVE</label>
@@ -154,14 +154,27 @@
         </div>
         <div class="filter-item">
           <label>{{ t('imageScanner.imageDetails.score') }}</label>
-          <div class="filter-input-wrapper">
+          <div class="filter-input-wrapper score-range-wrapper">
             <input 
-              v-model="filters.score" 
-              type="text" 
-              placeholder="0 - 9.9"
+              v-model="filters.scoreMin" 
+              type="number" 
+              min="0" 
+              max="10" 
+              step="0.1"
+              placeholder="0"
+              class="filter-input score-input"
+            />
+            <span class="score-separator">-</span>
+            <input 
+              v-model="filters.scoreMax" 
+              type="number" 
+              min="0" 
+              max="10" 
+              step="0.1"
+              placeholder="9.9"
               class="filter-input score-input"
             />
-            <i class="icon icon-filter" style="color: #6C6C76; margin-left: 8px;"></i>
+            <i class="icon icon-filter_alt" style="color: #6C6C76; margin-left: 8px;"></i>
           </div>
         </div>
         <div class="filter-item">
@@ -207,7 +220,7 @@
           </select>
         </div>
       </div>
-    </div> -->
+    </div>
 
     <!-- Vulnerability Table -->
     <SortableTable
@@ -216,7 +229,7 @@
       :has-advanced-filtering="false"
       :namespaced="false"
       :row-actions="false"
-      :search="true"
+      :search="false"
       :key-field="'cveId'"
       @selection="onSelectionChange"
     >
@@ -271,7 +284,8 @@ export default {
       showAllProperties: false,
       filters: {
         cveSearch: '',
-        score: '',
+        scoreMin: '',
+        scoreMax: '',
         packageSearch: '',
         fixAvailable: 'any',
         severity: 'any',
@@ -352,11 +366,12 @@ export default {
         );
       }
 
-      if (this.filters.score) {
-        const score = parseFloat(this.filters.score);
+      if (this.filters.scoreMin || this.filters.scoreMax) {
         filtered = filtered.filter(v => {
-          const vulnScore = parseFloat(v.score.split(' ')[0]);
-          return vulnScore >= score;
+          const vulnScore = parseFloat(v.score.split(' ')[0]) || 0;
+          const minScore = this.filters.scoreMin ? parseFloat(this.filters.scoreMin) : 0;
+          const maxScore = this.filters.scoreMax ? parseFloat(this.filters.scoreMax) : 10;
+          return vulnScore >= minScore && vulnScore <= maxScore;
         });
       }
 
@@ -796,14 +811,35 @@ export default {
   background: transparent;
 }
 
+.score-range-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .score-input {
+  flex: 1;
+  min-width: 60px;
+  text-align: center;
   color: #BEC1D2;
 }
 
 .score-input::placeholder {
   color: #BEC1D2;
 }
 
+.score-separator {
+  color: #6C6C76;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.score-filter-icon {
+  color: #6C6C76;
+  margin-left: 8px;
+  font-size: 16px;
+}
+
 .filter-input:focus {
   outline: none;
 }