Fix bugs for scanner UI testing round 2

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

Fix bugs for scanner UI testing round 2

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

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

@@ -10,11 +10,13 @@ export class ConfigScannerService {
 
     constructor( private http: HttpClient) {}
     getScannersByName(name: string): Observable<Scanner[]> {
+        name = encodeURIComponent(name);
             return this.http.get(`/api/scanners?ex_name=${name}`)
                 .pipe(catchError(error => observableThrowError(error)))
                 .pipe(map(response => response as Scanner[]));
     }
     getScannersByEndpointUrl(endpointUrl: string): Observable<Scanner[]> {
+        endpointUrl = encodeURIComponent(endpointUrl);
         return this.http.get(`/api/scanners?ex_url=${endpointUrl}`)
             .pipe(catchError(error => observableThrowError(error)))
             .pipe(map(response => response as Scanner[]));

src/portal/src/app/config/scanner/new-scanner-form/new-scanner-form.component.html

@@ -112,7 +112,7 @@
                            type="checkbox" id="scanner-skipCertVerify">
                     <label for="scanner-skipCertVerify">{{"SCANNER.SKIP" | translate}}
                         <clr-tooltip>
-                            <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
+                            <clr-icon class="color-57"  clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
                             <clr-tooltip-content  clrPosition="top-left" clrSize="md" *clrIfOpen>
                                 {{'SCANNER.SKIP_CERT_VERIFY' | translate}}
                             </clr-tooltip-content>
@@ -124,7 +124,7 @@
                            type="checkbox" id="scanner-use-inner">
                     <label for="scanner-use-inner">{{"SCANNER.USE_INNER" | translate}}
                         <clr-tooltip>
-                            <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
+                            <clr-icon class="color-57"  clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
                             <clr-tooltip-content clrPosition="top-left" clrSize="md" *clrIfOpen>
                                 {{"SCANNER.USE_INNER_TIP" | translate}}
                             </clr-tooltip-content>

src/portal/src/app/config/scanner/new-scanner-form/new-scanner-form.component.scss

@@ -1,6 +1,9 @@
 .width-280 {
   width: 280px;
 }
+.color-57{
+  color: #575757;
+}
 .padding-top-3 {
   padding-top: 3px;
 }

src/portal/src/app/config/scanner/new-scanner-form/new-scanner-form.component.ts

@@ -54,14 +54,14 @@ export class NewScannerFormComponent implements  OnInit, AfterViewInit, OnDestro
         if (!this.checkNameSubscribe) {
             this.checkNameSubscribe = fromEvent(this.scannerName.nativeElement, 'input').pipe(
                 map((e: any) => e.target.value),
+                debounceTime(500),
+                distinctUntilChanged(),
                 filter(name => {
                     if (this.isEdit && this.originValue && this.originValue.name === name) {
                         return false;
                     }
                     return this.newScannerForm.get('name').valid && name.length > 0;
                 }),
-                debounceTime(500),
-                distinctUntilChanged(),
                 switchMap((name) => {
                     this.isNameExisting = false;
                     this.checkOnGoing = true;
@@ -83,14 +83,14 @@ export class NewScannerFormComponent implements  OnInit, AfterViewInit, OnDestro
         if (!this.checkEndpointUrlSubscribe) {
             this.checkEndpointUrlSubscribe = fromEvent(this.scannerEndpointUrl.nativeElement, 'input').pipe(
                 map((e: any) => e.target.value),
+                debounceTime(800),
+                distinctUntilChanged(),
                 filter(endpointUrl => {
                     if (this.isEdit && this.originValue && this.originValue.url === endpointUrl) {
                         return false;
                     }
                     return this.newScannerForm.get('url').valid && endpointUrl.length > 6;
                 }),
-                debounceTime(800),
-                distinctUntilChanged(),
                 switchMap((endpointUrl) => {
                     this.isEndpointUrlExisting = false;
                     this.checkEndpointOnGoing = true;

src/portal/src/app/project/scanner/scanner.component.html

@@ -7,6 +7,7 @@
         <div class="clr-control-container">
             <button *ngIf="(!scanner) && hasCreatePermission && scanners && scanners.length > 0" id="edit-scanner-copy" class="btn btn-primary btn-sm" (click)="open()">{{'SCANNER.EDIT' | translate}}</button>
             <label *ngIf="(!scanner) && hasCreatePermission && !(scanners && scanners.length > 0)" class="name">{{'SCANNER.NOT_AVAILABLE' | translate}}</label>
+            <label *ngIf="(!scanner) && !hasCreatePermission" class="name">{{'SCANNER.NO_PROJECT_SCANNER' | translate}}</label>
         </div>
     </div>
     <ng-container *ngIf="scanner">

src/portal/src/app/project/scanner/scanner.component.ts

@@ -20,6 +20,7 @@ import { ActivatedRoute } from "@angular/router";
 import { ClrLoadingState } from "@clr/angular";
 import { InlineAlertComponent } from "../../shared/inline-alert/inline-alert.component";
 import { finalize } from "rxjs/operators";
+import { TranslateService } from "@ngx-translate/core";
 
 
 @Component({
@@ -43,6 +44,7 @@ export class ScannerComponent implements OnInit {
                  private errorHandler: ErrorHandler,
                  private route: ActivatedRoute,
                  private userPermissionService: UserPermissionService,
+                 private translate: TranslateService
     ) {
     }
     ngOnInit() {
@@ -65,13 +67,20 @@ export class ScannerComponent implements OnInit {
     init() {
         this.getScanner();
     }
-    getScanner() {
+    getScanner(isCheckHealth?: boolean) {
         this.loading = true;
         this.configScannerService.getProjectScanner(this.projectId)
             .pipe(finalize(() => this.loading = false))
             .subscribe(response => {
                 if (response && "{}" !== JSON.stringify(response)) {
                     this.scanner = response;
+                    if (isCheckHealth && this.scanner.health !== 'healthy') {
+                        this.translate.get("SCANNER.SET_UNHEALTHY_SCANNER", {name: this.scanner.name})
+                            .subscribe(res => {
+                                 this.errorHandler.warning(res);
+                            }
+                        );
+                    }
                 }
             }, error => {
                 this.errorHandler.error(error);
@@ -112,7 +121,7 @@ export class ScannerComponent implements OnInit {
             .subscribe(response => {
                 this.close();
                 this.msgHandler.showSuccess('Update Success');
-                this.getScanner();
+                this.getScanner(true);
                 this.saveBtnState = ClrLoadingState.SUCCESS;
             }, error => {
                 this.inlineAlert.showInlineError(error);

src/portal/src/i18n/lang/en-us-lang.json

@@ -1340,6 +1340,8 @@
         "USE_INNER": "Use internal registry address",
         "USE_INNER_TIP": "If the option is checked, the scanner will be forced to use the internal registry address to access the related contents.",
         "VULNERABILITY_SEVERITY": "Vulnerability severity:",
-        "CONFIRM_DELETION": "Confirm Scanner deletion"
+        "CONFIRM_DELETION": "Confirm Scanner deletion",
+        "NO_PROJECT_SCANNER": "No Scanner",
+        "SET_UNHEALTHY_SCANNER": "Selected scanner:{{name}} is unhealthy"
     }
 }

src/portal/src/i18n/lang/es-es-lang.json

@@ -1337,6 +1337,8 @@
         "USE_INNER": "Use internal registry address",
         "USE_INNER_TIP": "If the option is checked, the scanner will be forced to use the internal registry address to access the related contents.",
         "VULNERABILITY_SEVERITY": "Vulnerability severity:",
-        "CONFIRM_DELETION": "Confirm Scanner deletion"
+        "CONFIRM_DELETION": "Confirm Scanner deletion",
+        "NO_PROJECT_SCANNER": "No Scanner",
+        "SET_UNHEALTHY_SCANNER": "Selected scanner:{{name}} is unhealthy"
     }
 }

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -1309,6 +1309,8 @@
         "USE_INNER": "Use internal registry address",
         "USE_INNER_TIP": "If the option is checked, the scanner will be forced to use the internal registry address to access the related contents.",
         "VULNERABILITY_SEVERITY": "Vulnerability severity:",
-        "CONFIRM_DELETION": "Confirm Scanner deletion"
+        "CONFIRM_DELETION": "Confirm Scanner deletion",
+        "NO_PROJECT_SCANNER": "No Scanner",
+        "SET_UNHEALTHY_SCANNER": "Selected scanner:{{name}} is unhealthy"
     }
 }

src/portal/src/i18n/lang/pt-br-lang.json

@@ -1334,7 +1334,9 @@
         "USE_INNER": "Use internal registry address",
         "USE_INNER_TIP": "If the option is checked, the scanner will be forced to use the internal registry address to access the related contents.",
         "VULNERABILITY_SEVERITY": "Vulnerability severity:",
-        "CONFIRM_DELETION": "Confirm Scanner deletion"
+        "CONFIRM_DELETION": "Confirm Scanner deletion",
+        "NO_PROJECT_SCANNER": "No Scanner",
+        "SET_UNHEALTHY_SCANNER": "Selected scanner:{{name}} is unhealthy"
     }
 
 }

src/portal/src/i18n/lang/tr-tr-lang.json

@@ -1339,6 +1339,8 @@
         "USE_INNER": "Use internal registry address",
         "USE_INNER_TIP": "If the option is checked, the scanner will be forced to use the internal registry address to access the related contents.",
         "VULNERABILITY_SEVERITY": "Vulnerability severity:",
-        "CONFIRM_DELETION": "Confirm Scanner deletion"
+        "CONFIRM_DELETION": "Confirm Scanner deletion",
+        "NO_PROJECT_SCANNER": "No Scanner",
+        "SET_UNHEALTHY_SCANNER": "Selected scanner:{{name}} is unhealthy"
     }
 }

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -1336,6 +1336,8 @@
         "USE_INNER": "使用仓库内部地址",
         "USE_INNER_TIP": "选中此项，扫描器将使用仓库内部地址访问其相关内容",
         "VULNERABILITY_SEVERITY": "漏洞严重度：",
-        "CONFIRM_DELETION": "删除扫描器确认"
+        "CONFIRM_DELETION": "删除扫描器确认",
+        "NO_PROJECT_SCANNER": "无扫描器",
+        "SET_UNHEALTHY_SCANNER": "选择的扫描器:{{name}}是不健康的"
     }
 }