Add loading to the vulnerability page and the gc page

Signed-off-by: FangyuanCheng <fangyuanc@vmware.com>

src/portal/lib/src/config/gc/gc-history/gc-history.component.html

@@ -1,5 +1,5 @@
 <h5 class="history-header" id="history-header">{{'GC.JOB_HISTORY' | translate}}</h5>
-<clr-datagrid>
+<clr-datagrid [clrDgLoading]="loading">
   <clr-dg-column>{{'GC.JOB_ID' | translate}}</clr-dg-column>
   <clr-dg-column>{{'GC.TRIGGER_TYPE' | translate}}</clr-dg-column>
   <clr-dg-column>{{'STATUS' | translate}}</clr-dg-column>

src/portal/lib/src/config/gc/gc-history/gc-history.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { GcRepoService } from "../gc.service";
 import { GcJobViewModel } from "../gcLog";
 import { GcViewModelFactory } from "../gc.viewmodel.factory";
+import { ErrorHandler } from "../../../error-handler/index";
 
 @Component({
   selector: 'gc-history',
@@ -10,18 +11,25 @@ import { GcViewModelFactory } from "../gc.viewmodel.factory";
 })
 export class GcHistoryComponent implements OnInit {
   jobs: Array<GcJobViewModel> = [];
+  loading: boolean;
   constructor(
     private gcRepoService: GcRepoService,
     private gcViewModelFactory: GcViewModelFactory,
-    ) { }
+    private errorHandler: ErrorHandler
+    ) {}
 
   ngOnInit() {
     this.getJobs();
   }
 
   getJobs() {
+    this.loading = true;
     this.gcRepoService.getJobs().subscribe(jobs => {
       this.jobs = this.gcViewModelFactory.createJobViewModel(jobs);
+      this.loading = false;
+    }, error => {
+        this.errorHandler.error(error);
+        this.loading = false;
     });
   }
 

src/portal/lib/src/config/gc/gc.component.ts

@@ -31,6 +31,7 @@ export class GcComponent implements OnInit {
   disableGC: boolean = false;
   getText = 'CONFIG.GC';
   getLabelCurrent = 'GC.CURRENT_SCHEDULE';
+  @Output() loadingGcStatus = new EventEmitter<boolean>();
   @ViewChild(CronScheduleComponent)
   CronScheduleComponent: CronScheduleComponent;
   constructor(
@@ -48,8 +49,10 @@ export class GcComponent implements OnInit {
   }
 
   getCurrentSchedule() {
+    this.loadingGcStatus.emit(true);
     this.gcRepoService.getSchedule().subscribe(schedule => {
       this.initSchedule(schedule);
+      this.loadingGcStatus.emit(false);
     });
   }
 

src/portal/lib/src/config/vulnerability/vulnerability-config.component.ts

@@ -25,6 +25,7 @@ const SCHEDULE_TYPE_NONE = "None";
     styleUrls: ['./vulnerability-config.component.scss', '../registry-config.component.scss']
 })
 export class VulnerabilityConfigComponent implements OnInit {
+    onGoing: boolean;
     _localTime: Date = new Date();
     originCron: OriginCron;
     schedule: any;
@@ -40,6 +41,7 @@ export class VulnerabilityConfigComponent implements OnInit {
 
     @Input() showSubTitle: boolean = false;
     @Input() showScanningNamespaces: boolean = false;
+    @Output() loadingStatus = new EventEmitter<boolean>();
     systemInfo: SystemInfo;
 
     constructor(
@@ -83,8 +85,11 @@ export class VulnerabilityConfigComponent implements OnInit {
     }
 
     getSchedule() {
+        this.onGoing = true;
         this.scanningService.getSchedule().subscribe(schedule => {
           this.initSchedule(schedule);
+          this.onGoing = false;
+          this.loadingStatus.emit(this.onGoing);
         });
       }
 

src/portal/src/app/gc-page/gc-page.component.html

@@ -1,12 +1,13 @@
 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <h2 class="custom-h2 gc-title">{{'CONFIG.GC' | translate }}</h2>
+        <span class="spinner spinner-inline" [hidden]="!inProgress"></span>
         <clr-tabs>
             <clr-tab *ngIf="hasAdminRole">
                 <button id="config-gc" clrTabLink>{{'CONFIG.GC' | translate }}</button>
                 <ng-template [(clrIfActive)]="gcActive">
                     <clr-tab-content id="gc" *ngIf="hasAdminRole">
-                        <gc-config></gc-config>
+                        <gc-config (loadingGcStatus)="getGcStatus($event)"></gc-config>
                     </clr-tab-content>
                 </ng-template>
             </clr-tab>

src/portal/src/app/gc-page/gc-page.component.ts

@@ -7,6 +7,7 @@ import { SessionService } from "../shared/session.service";
   styleUrls: ["./gc-page.component.scss"]
 })
 export class GcPageComponent implements OnInit {
+  inProgress: boolean;
   constructor(private session: SessionService) {}
 
   ngOnInit() {}
@@ -16,4 +17,8 @@ export class GcPageComponent implements OnInit {
       this.session.getCurrentUser().has_admin_role
     );
   }
+
+  getGcStatus(status: boolean) {
+    this.inProgress = status;
+  }
 }

src/portal/src/app/vulnerability-page/vulnerability-page.component.html

@@ -1,14 +1,13 @@
 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <h2 class="custom-h2 vul-title">{{'VULNERABILITY.SINGULAR' | translate }}</h2>
+        <span class="spinner spinner-inline" [hidden]="!inProgress"></span>
         <clr-tabs>
-            <clr-tab *ngIf="withClair">
+            <clr-tab>
                 <button id="config-vulnerability" clrTabLink>{{'CONFIG.VULNERABILITY' | translate }}</button>
-                <ng-template [(clrIfActive)]="vulnerabilityActive">
+                    <clr-tab-content id="vulnerability">
-                    <clr-tab-content id="vulnerability" *ngIf="withClair">
+                        <vulnerability-config (loadingStatus)="getStatus($event)"></vulnerability-config>
-                        <vulnerability-config></vulnerability-config>
                     </clr-tab-content>
-                </ng-template>
             </clr-tab>
         </clr-tabs>
     </div>

src/portal/src/app/vulnerability-page/vulnerability-page.component.ts

@@ -7,11 +7,12 @@ import { AppConfigService } from "../app-config.service";
   styleUrls: ["./vulnerability-page.component.scss"]
 })
 export class VulnerabilityPageComponent implements OnInit {
+  inProgress: boolean = true;
   constructor(private appConfigService: AppConfigService) {}
 
   ngOnInit() {}
 
-  public get withClair(): boolean {
+  getStatus(status: boolean) {
-    return this.appConfigService.getConfig().with_clair;
+    this.inProgress = false;
   }
 }