Add digest filter for vulnerability search

1. UI changes for #19023 Signed-off-by: AllForNothing <sshijun@vmware.com>
goharbor · Aug 7, 2023 · ad6fef3 · ad6fef3
1 parent 0e92eae
commit ad6fef3
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/...ase/left-side-nav/interrogation-services/vulnerability-database/security-hub.component.ts b/...ase/left-side-nav/interrogation-services/vulnerability-database/security-hub.component.ts
@@ -19,6 +19,7 @@ import {
 } from './security-hub.interface';
 import { ProjectService } from '../../../../../../ng-swagger-gen/services/project.service';
 import { VulnerabilityFilterComponent } from './vulnerability-filter/vulnerability-filter.component';
+import { DangerousArtifact } from '../../../../../../ng-swagger-gen/models/dangerous-artifact';
 
 @Component({
     selector: 'app-security-hub',
@@ -174,8 +175,11 @@ export class SecurityHubComponent {
         this.currentPage = 1;
         this.clrDgRefresh(this.state, [`${OptionType.CVE_ID}=${cveId}`]);
     }
-    searchRepo(repoName: string) {
-        this.vulnerabilityFilterComponent.selectedOptions = [OptionType.REPO];
+    searchRepo(artifact: DangerousArtifact) {
+        this.vulnerabilityFilterComponent.selectedOptions = [
+            OptionType.REPO,
+            OptionType.DIGEST,
+        ];
         this.vulnerabilityFilterComponent.candidates = [
             OptionType.CVE_ID,
             OptionType.SEVERITY,
@@ -185,8 +189,14 @@ export class SecurityHubComponent {
             OptionType.TAG,
         ];
         this.vulnerabilityFilterComponent.valueMap = {};
-        this.vulnerabilityFilterComponent.valueMap[OptionType.REPO] = repoName;
+        this.vulnerabilityFilterComponent.valueMap[OptionType.REPO] =
+            artifact?.repository_name;
+        this.vulnerabilityFilterComponent.valueMap[OptionType.DIGEST] =
+            artifact?.digest;
         this.currentPage = 1;
-        this.clrDgRefresh(this.state, [`${OptionType.REPO}=${repoName}`]);
+        this.clrDgRefresh(this.state, [
+            `${OptionType.REPO}=${artifact?.repository_name}`,
+            `${OptionType.DIGEST}=${artifact?.digest}`,
+        ]);
     }
 }
diff --git a/...ase/left-side-nav/interrogation-services/vulnerability-database/security-hub.interface.ts b/...ase/left-side-nav/interrogation-services/vulnerability-database/security-hub.interface.ts
@@ -21,6 +21,7 @@ export enum OptionType {
     PACKAGE = 'package',
     TAG = 'tag',
     PROJECT_ID = 'project_id',
+    DIGEST = 'digest',
 }
 
 export const OptionType_I18n_Map = {
@@ -32,6 +33,7 @@ export const OptionType_I18n_Map = {
     [OptionType.PACKAGE]: 'VULNERABILITY.GRID.COLUMN_PACKAGE',
     [OptionType.TAG]: 'REPLICATION.TAG',
     [OptionType.PROJECT_ID]: 'SECURITY_HUB.OPTION_PROJECT_ID_NAME',
+    [OptionType.DIGEST]: 'P2P_PROVIDER.DIGEST',
 };
 
 export interface OptionTypeValueMap {

diff --git a/...on-services/vulnerability-database/vulnerability-filter/vulnerability-filter.component.ts b/...on-services/vulnerability-database/vulnerability-filter/vulnerability-filter.component.ts
@@ -24,6 +24,7 @@ export class VulnerabilityFilterComponent {
         OptionType.REPO,
         OptionType.PACKAGE,
         OptionType.TAG,
+        OptionType.DIGEST,
     ];
     allOptions: string[] = [
         OptionType.CVE_ID,
@@ -33,6 +34,7 @@ export class VulnerabilityFilterComponent {
         OptionType.REPO,
         OptionType.PACKAGE,
         OptionType.TAG,
+        OptionType.DIGEST,
     ];
 
     valueMap: OptionTypeValueMap = {};

diff --git a/...ervices/vulnerability-database/vulnerability-summary/vulnerability-summary.component.html b/...ervices/vulnerability-database/vulnerability-summary/vulnerability-summary.component.html
@@ -88,7 +88,7 @@ <h2>
                     {{ securitySummary?.none_cnt || 0 }}
                 </div>
             </div>
-            <div class="clr-row">
+            <div class="clr-row" [hidden]="!securitySummary">
                 <div class="placeholder">
                     <div class="pie-chart" id="pie-chart"></div>
                 </div>
@@ -121,7 +121,7 @@ <h2>
                         class="search"
                         href="javascript:void(0)"
                         appScrollAnchor="{{ vulId }}"
-                        (click)="searchRepoClick(item?.repository_name)"
+                        (click)="searchRepoClick(item)"
                         title="{{ item.repository_name }}">
                         <span class="ellipsis">
                             <clr-icon shape="search"></clr-icon

diff --git a/...-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.ts b/...-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.ts
@@ -18,6 +18,7 @@ import {
     HarborEvent,
 } from '../../../../../services/event-service/event.service';
 import { TranslateService } from '@ngx-translate/core';
+import { DangerousArtifact } from '../../../../../../../ng-swagger-gen/models/dangerous-artifact';
 highchartsAccessibility(Highcharts);
 
 @Component({
@@ -29,7 +30,7 @@ export class VulnerabilitySummaryComponent implements OnInit, OnDestroy {
     @Output()
     searchCVE = new EventEmitter<string>();
     @Output()
-    searchRepo = new EventEmitter<string>();
+    searchRepo = new EventEmitter<DangerousArtifact>();
     securitySummary: SecuritySummary;
     readonly vulId: string = VUL_ID;
     readonly severityText = severityText;
@@ -175,8 +176,8 @@ export class VulnerabilitySummaryComponent implements OnInit, OnDestroy {
         this.searchCVE.emit(cveId);
     }
 
-    searchRepoClick(repoName: string) {
-        this.searchRepo.emit(repoName);
+    searchRepoClick(artifact: DangerousArtifact) {
+        this.searchRepo.emit(artifact);
     }
 
     getColorByTheme(): string {