feat: add column based filters UI components

Author: rushk014

pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml

@@ -123,11 +123,6 @@ imageScanner:
       cve:
         allCves: All identified CVEs
         affectingCvesOnly: Affecting CVEs only
-      imageList:
-        image: Image
-        severity: severity
-        repository: repository
-        registry: Registry
     buttons:
       downloadCustomReport: Download custom report
       downloadSbom: Download SBOM
@@ -142,6 +137,14 @@ imageScanner:
         repository: Repository
         registry: Registry
         vulnerabilities: vulnerabilities
+      filters:
+        placeholder:
+          image: Search by name
+        label:
+          image: Image
+          severity: Severity
+          repository: Repository
+          registry: Registry
   imageDetails:
     status: Status
     vulnerabilities: Vulnerabilities

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue

@@ -40,9 +40,54 @@
       <TopRiskyImagesChart v-if="preprocessedDataset.topRiskyImages" :topRiskyImages="preprocessedDataset.topRiskyImages"/>
       <ImageRiskAssessment v-if="preprocessedDataset.chartData" :chartData="preprocessedDataset.chartData" :filterFn="filterBySeverity"/>
     </div> -->
+    <div class="search-filters">
+      <div class="filter-row">
+        <div class="filter-item">
+          <label>{{ t('imageScanner.images.listTable.filters.label.image')}}</label>
+          <div class="filter-input-wrapper">
+            <input 
+              v-model="filters.imageSearch"
+              type="text" 
+              :placeholder="t('imageScanner.images.listTable.filters.placeholder.image')"
+              class="filter-input"
+            />
+            <i class="icon icon-search" style="color: #6C6C76; margin-left: 8px;"></i>
+          </div>
+        </div>
+        <div class="filter-item">
+          <label>{{ t('imageScanner.images.listTable.filters.label.severity') }}</label>
+          <LabeledSelect
+            v-model:value="filters.severitySearch"
+            :options="severityOptions"
+            :close-on-select="true"
+            :multiple="false"
+          />
+        </div>
+        <div class="filter-item">
+          <label>{{ t('imageScanner.images.listTable.filters.label.repository') }}</label>
+          <LabeledSelect
+            v-model:value="filters.repositorySearch"
+            :options="repositoryOptions"
+            :close-on-select="true"
+            :multiple="false"
+          />
+        </div>
+        <div class="filter-item">
+          <label>{{ t('imageScanner.images.listTable.filters.label.registry') }}</label>
+          <LabeledSelect
+            v-model:value="filters.registrySearch"
+            :options="registryOptions"
+            :close-on-select="true"
+            :multiple="false"
+          />
+        </div>
+      </div>
+    </div>
     <SortableTable
       :headers="isGrouped ? REPO_BASED_TABLE : IMAGE_LIST_TABLE"
       :namespaced="false"
+      :search="false"
+      :paging="true"
       :row-actions="!isGrouped"
       :table-actions="true"
       :sub-expandable="isGrouped"
@@ -158,10 +203,12 @@
         filterImageOptions,
         selectedCveFilter: filterCveOptions[0],
         selectedImageFilter: filterImageOptions[0],
-        selectedImage: "",
-        selectedSeverity: "",
-        selectedRepository: "Any",
-        selectedRegistry: "Any",
+        filters: {
+          imageSearch: '',
+          severitySearch: 'any',
+          repositorySearch: 'any',
+          registrySearch: 'any',
+        },
       }
     },
     computed: {
@@ -399,4 +446,82 @@
     }
   }
 
+  .filter-row {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 20px;
+  }
+
+  .filter-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+  }
+
+  .filter-item label {
+    font-weight: 400;
+    color: #6C6C76;
+    font-size: 14px;
+  }
+
+  .filter-input-wrapper {
+    display: flex;
+    align-items: center;
+    border: 1px solid #DCDEE7;
+    border-radius: 6px;
+    padding: 0 12px;
+    background: #FFF;
+  }
+
+  .filter-input {
+    flex: 1;
+    padding: 10px 0;
+    border: none;
+    outline: none;
+    font-size: 14px;
+    line-height: 19px;
+    background: transparent;
+  }
+
+  .score-input {
+    color: #BEC1D2;
+  }
+
+  .score-input::placeholder {
+    color: #BEC1D2;
+  }
+
+  .filter-input:focus {
+    outline: none;
+  }
+
+  .filter-input-wrapper:focus-within {
+    border-color: #007cba;
+    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1);
+  }
+
+  .filter-select {
+    padding: 10px 14px;
+    border: 1px solid #DCDEE7;
+    border-radius: 6px;
+    font-size: 14px;
+    background: #FFF;
+    outline: none;
+  }
+
+  .filter-select:focus {
+    border-color: #007cba;
+    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1);
+  }
+
+  .filter-actions {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    padding-top: 16px;
+    border-top: 1px solid #DCDEE7;
+  }
+
 </style>