Update ui to fix some issues (#19101)

1. Add digest filter for vulnerability search, for #19023
2. Fixes #19104

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/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) {
+    searchRepo(artifact: DangerousArtifact) {
-        this.vulnerabilityFilterComponent.selectedOptions = [OptionType.REPO];
+        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}`,
+        ]);
     }
 }

src/portal/src/app/base/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 {

src/portal/src/app/base/left-side-nav/interrogation-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 = {};

src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.html

@@ -88,7 +88,7 @@
                     {{ 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 @@
                         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

src/portal/src/app/base/left-side-nav/interrogation-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) {
+    searchRepoClick(artifact: DangerousArtifact) {
-        this.searchRepo.emit(repoName);
+        this.searchRepo.emit(artifact);
     }
 
     getColorByTheme(): string {

src/portal/src/app/services/app-config.service.ts

@@ -37,8 +37,18 @@ export class AppConfigService {
     // Store the application configuration
     configurations: AppConfig = new AppConfig();
 
+    private _bannerMessageClosed: boolean = false;
+
     constructor(private http: HttpClient, private cookie: CookieService) {}
 
+    setBannerMessageClosed(v: boolean) {
+        this._bannerMessageClosed = v;
+    }
+
+    getBannerMessageClosed(): boolean {
+        return this._bannerMessageClosed;
+    }
+
     public load(): Observable<AppConfig> {
         return this.http.get(systemInfoEndpoint, HTTP_GET_OPTIONS).pipe(
             map(response => {

src/portal/src/app/shared/components/app-level-alerts/app-level-alerts.component.html

@@ -3,6 +3,7 @@
         *ngIf="hasValidBannerMessage()"
         [clrAlertType]="getBannerMessageType()"
         [clrAlertAppLevel]="true"
+        [(clrAlertClosed)]="bannerMessageClosed"
         [clrAlertClosable]="getBannerMessageClosable()">
         <clr-alert-item>
             <span class="alert-text banner-message">{{

src/portal/src/app/shared/components/app-level-alerts/app-level-alerts.component.ts

@@ -39,6 +39,15 @@ export class AppLevelAlertsComponent implements OnInit, OnDestroy {
         private jobServiceDashboardHealthCheckService: JobServiceDashboardHealthCheckService,
         private appConfigService: AppConfigService
     ) {}
+
+    get bannerMessageClosed(): boolean {
+        return this.appConfigService.getBannerMessageClosed();
+    }
+
+    set bannerMessageClosed(v: boolean) {
+        this.appConfigService.setBannerMessageClosed(v);
+    }
+
     ngOnInit() {
         if (
             !(