Automatically refresh the list when the status of gc history is pending or running

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

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

@@ -1,12 +1,11 @@
-@import '../../../mixin';
 .history-header {
     color: #000;
     margin:20px 0 6px 0;
+    display: inline-block;
+    width: 97%;
 }
 
 .refresh-btn {
-    @include grid-right-top-pos;
-    margin-top: -30px;
     cursor: pointer;
     &:hover {
         color: #007CBB;

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

@@ -1,17 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { GcRepoService } from "../gc.service";
 import { GcJobViewModel } from "../gcLog";
 import { GcViewModelFactory } from "../gc.viewmodel.factory";
 import { ErrorHandler } from "../../../error-handler/index";
-
+import { Subscription, timer } from "rxjs";
+const JOB_STATUS = {
+  PENDING: "pending",
+  RUNNING: "running"
+};
 @Component({
   selector: 'gc-history',
   templateUrl: './gc-history.component.html',
   styleUrls: ['./gc-history.component.scss']
 })
-export class GcHistoryComponent implements OnInit {
+export class GcHistoryComponent implements OnInit, OnDestroy {
   jobs: Array<GcJobViewModel> = [];
   loading: boolean;
+  timerDelay: Subscription;
   constructor(
     private gcRepoService: GcRepoService,
     private gcViewModelFactory: GcViewModelFactory,
@@ -27,12 +32,38 @@ export class GcHistoryComponent implements OnInit {
     this.gcRepoService.getJobs().subscribe(jobs => {
       this.jobs = this.gcViewModelFactory.createJobViewModel(jobs);
       this.loading = false;
+      // to avoid some jobs not finished.
+      if (!this.timerDelay) {
+        this.timerDelay = timer(3000, 3000).subscribe(() => {
+          let count: number = 0;
+          this.jobs.forEach(job => {
+            if (
+              job['status'] === JOB_STATUS.PENDING ||
+              job['status'] === JOB_STATUS.RUNNING
+            ) {
+              count++;
+            }
+          });
+          if (count > 0) {
+            this.getJobs();
+          } else {
+            this.timerDelay.unsubscribe();
+            this.timerDelay = null;
+          }
+        });
+      }
     }, error => {
         this.errorHandler.error(error);
         this.loading = false;
     });
   }
 
+  ngOnDestroy() {
+    if (this.timerDelay) {
+      this.timerDelay.unsubscribe();
+    }
+  }
+
   getLogLink(id): string {
     return this.gcRepoService.getLogLink(id);
   }

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

@@ -88,10 +88,6 @@ export class GcComponent implements OnInit {
         this.translate.get("GC.MSG_SUCCESS").subscribe((res: string) => {
           this.errorHandler.info(res);
         });
-        this.getJobs();
-        setTimeout(() => {
-          this.getJobs();
-        }, THREE_SECONDS); // to avoid some jobs not finished.
       },
       error => {
         this.errorHandler.error(error);