From e4d7166dc4cbcbfb296aed82d11f51f914c44b22 Mon Sep 17 00:00:00 2001
From: lsongsuse <long.song@suse.com>
Date: Thu, 28 May 2026 23:06:03 -0700
Subject: [PATCH 1/2] #2388 Add an option to filter vulnerabilities based on
 the image base OS

---
 .../scala/com/neu/model/Vulnerability.scala   |   2 +
 .../neu/model/VulnerabilityJsonProtocol.scala |   2 +-
 .../types/vulnerabilities/vulnerabilities.ts  |   2 +
 ...rability-items-table-filter.component.html | 186 +++++++-----------
 ...nerability-items-table-filter.component.ts |   8 +
 .../webapp/websrc/assets/i18n/en-common.json  |   8 +
 .../websrc/assets/i18n/zh_cn-common.json      |   8 +
 7 files changed, 101 insertions(+), 115 deletions(-)

diff --git a/admin/src/main/scala/com/neu/model/Vulnerability.scala b/admin/src/main/scala/com/neu/model/Vulnerability.scala
index 0547d06c..eaf0ad98 100644
--- a/admin/src/main/scala/com/neu/model/Vulnerability.scala
+++ b/admin/src/main/scala/com/neu/model/Vulnerability.scala
@@ -16,6 +16,8 @@ case class VulnerabilityQuery(
   matchTypeImage: Option[String],
   imageName: Option[String],
   matchTypeNode: Option[String],
+  imageBaseOS: Option[String],
+  matchTypeImageBaseOS: Option[String],
   nodeName: Option[String],
   matchTypeContainer: Option[String],
   containerName: Option[String],
diff --git a/admin/src/main/scala/com/neu/model/VulnerabilityJsonProtocol.scala b/admin/src/main/scala/com/neu/model/VulnerabilityJsonProtocol.scala
index c741881a..774ca043 100644
--- a/admin/src/main/scala/com/neu/model/VulnerabilityJsonProtocol.scala
+++ b/admin/src/main/scala/com/neu/model/VulnerabilityJsonProtocol.scala
@@ -3,7 +3,7 @@ package com.neu.model
 import spray.json.*
 
 object VulnerabilityJsonProtocol extends DefaultJsonProtocol {
-  given vulnerabilityQueryFormat: RootJsonFormat[VulnerabilityQuery]                         = jsonFormat19(
+  given vulnerabilityQueryFormat: RootJsonFormat[VulnerabilityQuery]                         = jsonFormat21(
     VulnerabilityQuery.apply
   )
   given vulnerabilityProfileEntryFormat: RootJsonFormat[VulnerabilityProfileEntry]           =
diff --git a/admin/webapp/websrc/app/common/types/vulnerabilities/vulnerabilities.ts b/admin/webapp/websrc/app/common/types/vulnerabilities/vulnerabilities.ts
index 374c814e..35ff1b03 100644
--- a/admin/webapp/websrc/app/common/types/vulnerabilities/vulnerabilities.ts
+++ b/admin/webapp/websrc/app/common/types/vulnerabilities/vulnerabilities.ts
@@ -77,6 +77,8 @@ export interface VulnerabilityQuery {
   containerName?: string;
   viewType: VulnerabilityView;
   showAccepted?: boolean;
+  matchTypeImageBaseOS?: MatchTypeOption;
+  imageBaseOS?: string;
 }
 
 export interface VulnerabilitiesQuerySessionData {
diff --git a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html
index af210971..f2ee385f 100644
--- a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html
+++ b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html
@@ -218,144 +218,102 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
           <span>{{ 'admissionControl.names.CONTAINER' | translate }}</span>
         </button>
       </mat-menu>
-      <ng-container [ngSwitch]="view">
-        <div class="row col align-items-center">
-          <ng-container *ngSwitchCase="FilterView.SERVICE">
-            <label class="sr-only" for="serviceName">{{
-              'admissionControl.names.SERVICE' | translate
-            }}</label>
-            <label class="sr-only" for="serviceMatch">Match</label>
-            <mat-form-field class="col-2 pe-0 match">
-              <select
-                matNativeControl
-                formControlName="matchTypeService"
-                id="serviceMatch">
-                <option
-                  *ngFor="let matchType of matchTypes"
-                  [value]="matchType.id">
-                  {{ matchType.name }}
-                </option>
-              </select>
-            </mat-form-field>
-            <mat-form-field class="col">
-              <input formControlName="serviceName" id="serviceName" matInput />
-            </mat-form-field>
-          </ng-container>
-          <ng-container *ngSwitchCase="FilterView.IMAGE">
-            <label class="sr-only" for="imageName">{{
-              'admissionControl.names.IMAGE' | translate
-            }}</label>
-            <label class="sr-only" for="imageMatch">Match</label>
-            <mat-form-field class="col-2 pe-0 match">
-              <select
-                matNativeControl
-                formControlName="matchTypeImage"
-                id="imageMatch">
-                <option
-                  *ngFor="let matchType of matchTypes"
-                  [value]="matchType.id">
-                  {{ matchType.name }}
-                </option>
-              </select>
-            </mat-form-field>
-            <mat-form-field class="col">
-              <input formControlName="imageName" id="imageName" matInput />
-            </mat-form-field>
-          </ng-container>
-          <ng-container *ngSwitchCase="FilterView.NODE">
-            <label class="sr-only" for="nodeName">{{
-              'admissionControl.names.NODE' | translate
-            }}</label>
-            <label class="sr-only" for="nodeMatch">Match</label>
-            <mat-form-field class="col-2 pe-0 match">
-              <select
-                matNativeControl
-                formControlName="matchTypeNode"
-                id="nodeMatch">
-                <option
-                  *ngFor="let matchType of matchTypes"
-                  [value]="matchType.id">
-                  {{ matchType.name }}
-                </option>
-              </select>
-            </mat-form-field>
-            <mat-form-field class="col">
-              <input formControlName="nodeName" id="nodeName" matInput />
-            </mat-form-field>
-          </ng-container>
-          <ng-container *ngSwitchCase="FilterView.CONTAINER">
-            <label class="sr-only" for="containerName">{{
-              'admissionControl.names.CONTAINER' | translate
-            }}</label>
-            <label class="sr-only" for="containerMatch">Match</label>
-            <mat-form-field class="col-2 pe-0 match">
-              <select
-                matNativeControl
-                formControlName="matchTypeContainer"
-                id="containerMatch">
-                <option
-                  *ngFor="let matchType of matchTypes"
-                  [value]="matchType.id">
-                  {{ matchType.name }}
-                </option>
-              </select>
-            </mat-form-field>
-            <mat-form-field class="col">
-              <input
-                formControlName="containerName"
-                id="containerName"
-                matInput />
-            </mat-form-field>
-          </ng-container>
-        </div>
-      </ng-container>
+
+      <mat-form-field class="col-2 match">
+        <ng-container [ngSwitch]="view">
+          <select *ngSwitchCase="FilterView.SERVICE" matNativeControl formControlName="matchTypeService" id="serviceMatch">
+            <option *ngFor="let matchType of matchTypes" [value]="matchType.id">{{ matchType.name }}</option>
+          </select>
+          <select *ngSwitchCase="FilterView.IMAGE" matNativeControl formControlName="matchTypeImage" id="imageMatch">
+            <option *ngFor="let matchType of matchTypes" [value]="matchType.id">{{ matchType.name }}</option>
+          </select>
+          <select *ngSwitchCase="FilterView.NODE" matNativeControl formControlName="matchTypeNode" id="nodeMatch">
+            <option *ngFor="let matchType of matchTypes" [value]="matchType.id">{{ matchType.name }}</option>
+          </select>
+          <select *ngSwitchCase="FilterView.CONTAINER" matNativeControl formControlName="matchTypeContainer" id="containerMatch">
+            <option *ngFor="let matchType of matchTypes" [value]="matchType.id">{{ matchType.name }}</option>
+          </select>
+        </ng-container>
+      </mat-form-field>
+
+      <mat-form-field class="col">
+        <ng-container [ngSwitch]="view">
+          <input *ngSwitchCase="FilterView.SERVICE" formControlName="serviceName" id="serviceName" matInput />
+          <input *ngSwitchCase="FilterView.IMAGE" formControlName="imageName" id="imageName" matInput placeholder="Image Name" />
+          <input *ngSwitchCase="FilterView.NODE" formControlName="nodeName" id="nodeName" matInput />
+          <input *ngSwitchCase="FilterView.CONTAINER" formControlName="containerName" id="containerName" matInput />
+        </ng-container>
+      </mat-form-field>
+    </section>
+
+    <section class="row mx-0 align-items-center" *ngIf="view === FilterView.IMAGE">
+      <label class="col-2 font-weight-normal">
+        {{ 'vulnerability.advanced_filter.image_base_os.label' | translate }}
+      </label>
+      <mat-form-field class="col-2 match">
+        <select matNativeControl formControlName="matchTypeImageBaseOS" id="imageBaseOSMatch">
+          <option *ngFor="let matchType of matchTypes" [value]="matchType.id">
+            {{ matchType.name }}
+          </option>
+        </select>
+      </mat-form-field>
+      <mat-form-field class="col">
+        <input formControlName="imageBaseOS" id="imageBaseOS" matInput [placeholder]="'vulnerability.advanced_filter.image_base_os.placeholder' | translate" />
+      </mat-form-field>
     </section>
   </form>
 </div>
-<div>
+
+<div class="mt-3">
   <ng-container *ngIf="form.controls.serviceName.value">
-    <span
-      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
-      >Service
+    <span class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center">
+      Service
       {{ form.get('matchTypeService')?.value === 'equals' ? '=' : '~' }}
       {{ form.controls.serviceName.value }}
       <button (click)="clear(FilterView.SERVICE)" class="remove-button">
         <i class="eos-icons">close</i>
-      </button></span
-    >
+      </button>
+    </span>
   </ng-container>
   <ng-container *ngIf="form.controls.imageName.value">
-    <span
-      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
-      >Image
+    <span class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center">
+      Image
       {{ form.get('matchTypeImage')?.value === 'equals' ? '=' : '~' }}
       {{ form.controls.imageName.value }}
       <button (click)="clear(FilterView.IMAGE)" class="remove-button">
         <i class="eos-icons">close</i>
-      </button></span
-    >
+      </button>
+    </span>
   </ng-container>
   <ng-container *ngIf="form.controls.nodeName.value">
-    <span
-      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
-      >Node
+    <span class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center">
+      Node
       {{ form.get('matchTypeNode')?.value === 'equals' ? '=' : '~' }}
       {{ form.controls.nodeName.value }}
       <button (click)="clear(FilterView.NODE)" class="remove-button">
         <i class="eos-icons">close</i>
-      </button></span
-    >
+      </button>
+    </span>
   </ng-container>
   <ng-container *ngIf="form.controls.containerName.value">
-    <span
-      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
-      >Container
+    <span class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center">
+      Container
       {{ form.get('matchTypeContainer')?.value === 'equals' ? '=' : '~' }}
       {{ form.controls.containerName.value }}
       <button (click)="clear(FilterView.CONTAINER)" class="remove-button">
         <i class="eos-icons">close</i>
-      </button></span
-    >
+      </button>
+    </span>
+  </ng-container>
+  <ng-container *ngIf="form.controls.imageBaseOS?.value">
+    <span class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center">
+      {{ 'vulnerability.advanced_filter.image_base_os.label' | translate }}
+      {{ form.get('matchTypeImageBaseOS')?.value === 'equals' ? '=' : '~' }}
+      {{ form.controls.imageBaseOS.value }}
+      <button (click)="clear(FilterView.IMAGE_BASE_OS)" class="remove-button">
+        <i class="eos-icons">close</i>
+      </button>
+    </span>
   </ng-container>
   <ng-container
     [ngTemplateOutletContext]="{
@@ -397,6 +355,6 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
       (click)="clear(type === 'V2' ? FilterView.V2 : FilterView.V3)"
       class="remove-button">
       <i class="eos-icons">close</i>
-    </button></span
-  >
+    </button>
+  </span>
 </ng-template>
diff --git a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.ts b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.ts
index 96459635..30af229d 100644
--- a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.ts
+++ b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.ts
@@ -28,6 +28,7 @@ enum FilterView {
   CONTAINER = 3,
   V2 = 5,
   V3 = 4,
+  IMAGE_BASE_OS = 6,
 }
 
 const today = new Date();
@@ -102,6 +103,11 @@ export class VulnerabilityItemsTableFilterComponent implements OnInit {
         this.form.get('matchTypeImage')?.setValue(this.matchTypes[0].id);
         break;
       }
+      case FilterView.IMAGE_BASE_OS: {
+        this.form.controls.imageBaseOS.reset();
+        this.form.get('matchTypeImageBaseOS')?.setValue(this.matchTypes[0].id);
+        break;
+      }
       case FilterView.NODE: {
         this.form.controls.nodeName.reset();
         this.form.get('matchTypeNode')?.setValue(this.matchTypes[0].id);
@@ -180,6 +186,8 @@ export class VulnerabilityItemsTableFilterComponent implements OnInit {
       serviceName: new FormControl(filter.serviceName),
       matchTypeImage: new FormControl(filter.matchTypeImage),
       imageName: new FormControl(filter.imageName),
+      matchTypeImageBaseOS: new FormControl(filter.matchTypeImageBaseOS || this.matchTypes[0].id),
+      imageBaseOS: new FormControl(filter.imageBaseOS || ''),
       matchTypeNode: new FormControl(filter.matchTypeNode),
       nodeName: new FormControl(filter.nodeName),
       matchTypeContainer: new FormControl(filter.matchTypeContainer),
diff --git a/admin/webapp/websrc/assets/i18n/en-common.json b/admin/webapp/websrc/assets/i18n/en-common.json
index 35e79711..0ad9886b 100644
--- a/admin/webapp/websrc/assets/i18n/en-common.json
+++ b/admin/webapp/websrc/assets/i18n/en-common.json
@@ -3537,6 +3537,14 @@
       "REMOVE_VERIFIER_NG": "Error happens when removing verifier!"
     }
   },
+  "vulnerability": {
+    "advanced_filter": {
+      "image_base_os": {
+        "label": "Image Base OS",
+        "placeholder": "e.g alpine, ubuntu, redhat"
+      }
+    }
+  },
   "just_now": "just now",
   "seconds_ago": "{{time}} seconds ago",
   "a_minute_ago": "a minute ago",
diff --git a/admin/webapp/websrc/assets/i18n/zh_cn-common.json b/admin/webapp/websrc/assets/i18n/zh_cn-common.json
index dd482e71..a520c40a 100644
--- a/admin/webapp/websrc/assets/i18n/zh_cn-common.json
+++ b/admin/webapp/websrc/assets/i18n/zh_cn-common.json
@@ -3531,6 +3531,14 @@
       "REMOVE_VERIFIER_NG": "检测器删除时发生错误!"
     }
   },
+  "vulnerability": {
+    "advanced_filter": {
+      "image_base_os": {
+        "label": "镜像基础操作系统",
+        "placeholder": "例如 alpine, ubuntu, redhat"
+      }
+    }
+  },
   "just_now": "刚才",
   "seconds_ago": "{{time}}秒前",
   "a_minute_ago": "1分钟前",

From ea057383d54c2e055e1dc9cafa6755521aaaf596 Mon Sep 17 00:00:00 2001
From: lsongsuse <long.song@suse.com>
Date: Tue, 2 Jun 2026 10:22:34 -0700
Subject: [PATCH 2/2] leave out placeholder value for consistency

---
 .../vulnerability-items-table-filter.component.html             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html
index f2ee385f..8e441032 100644
--- a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html
+++ b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html
@@ -239,7 +239,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
       <mat-form-field class="col">
         <ng-container [ngSwitch]="view">
           <input *ngSwitchCase="FilterView.SERVICE" formControlName="serviceName" id="serviceName" matInput />
-          <input *ngSwitchCase="FilterView.IMAGE" formControlName="imageName" id="imageName" matInput placeholder="Image Name" />
+          <input *ngSwitchCase="FilterView.IMAGE" formControlName="imageName" id="imageName" matInput />
           <input *ngSwitchCase="FilterView.NODE" formControlName="nodeName" id="nodeName" matInput />
           <input *ngSwitchCase="FilterView.CONTAINER" formControlName="containerName" id="containerName" matInput />
         </ng-container>