Modify some small issues in gc ui

Signed-off-by: Meina Zhou <meinaz@vmware.com>

src/portal/src/app/config/gc/gc.component.html

@@ -3,7 +3,7 @@
   <span>{{(originScheduleType ? 'SCHEDULE.'+ originScheduleType.toUpperCase(): "") | translate}}</span>
   <span [hidden]="originScheduleType!==SCHEDULE_TYPE.WEEKLY">{{'GC.ON' | translate}} {{originWeekDay.text | translate}}</span>
   <span [hidden]="originScheduleType===SCHEDULE_TYPE.NONE">{{'GC.AT' | translate}} {{originOffTime.text}}</span>
-  <button class="btn btn-outline"  (click)="editSchedule()">{{'BUTTON.EDIT' | translate}}</button>
+  <button class="btn btn-outline btn-sm"  (click)="editSchedule()">{{'BUTTON.EDIT' | translate}}</button>
 </div>
 <div class="setting-wrapper flex-layout" *ngIf="isEditMode">
   <label for="gcPolicy">{{'CONFIG.GC' | translate}}</label>
@@ -27,7 +27,7 @@
   <button class="btn btn-primary btn-sm" (click)="scheduleGc()">{{'BUTTON.SAVE' | translate}}</button>
   <button class="btn btn-primary btn-sm" (click)="isEditMode = false" >{{'BUTTON.CANCEL' | translate}}</button>
 </div>
-<button class="btn btn-success btn-sm gc-start-btn" (click)="gcNow()">{{'GC.GC_NOW' | translate}}</button>
+<button class="btn btn-primary btn-sm gc-start-btn" (click)="gcNow()" [disabled]="disableGC">{{'GC.GC_NOW' | translate}}</button>
 <div class="job-header">{{'GC.JOB_LIST' | translate}}</div>
 <clr-datagrid>
   <clr-dg-column>{{'GC.JOB_ID' | translate}}</clr-dg-column>
@@ -38,12 +38,12 @@
   <clr-dg-column>{{'DETAILS' | translate}}</clr-dg-column>
   <clr-dg-row *ngFor="let job of jobs" [clrDgItem]='job'>
     <clr-dg-cell>{{job.id }}</clr-dg-cell>
-    <clr-dg-cell>{{'SCHEDULE.'+ job.type.toUpperCase() | translate }}</clr-dg-cell>
+    <clr-dg-cell>{{(job.type ? 'SCHEDULE.'+ job.type.toUpperCase() : '') | translate }}</clr-dg-cell>
     <clr-dg-cell>{{job.status.toUpperCase() | translate}}</clr-dg-cell>
     <clr-dg-cell>{{job.createTime | date:'medium'}}</clr-dg-cell>
     <clr-dg-cell>{{job.updateTime | date:'medium'}}</clr-dg-cell>
     <clr-dg-cell>
-      <a target="_blank" href="/api/system/gc/{{job.id}}/log">{{'GC.LOG_DETAIL' | translate}}</a>
+      <a *ngIf="job.status.toLowerCase() === 'finished' || job.status.toLowerCase() === 'error'" target="_blank" href="/api/system/gc/{{job.id}}/log">{{'GC.LOG_DETAIL' | translate}}</a>
     </clr-dg-cell>
   </clr-dg-row>
   <clr-dg-footer>{{'GC.LATEST_JOBS' | translate :{param: jobs.length} }}</clr-dg-footer>

src/portal/src/app/config/gc/gc.component.scss

@@ -2,11 +2,20 @@
     display: flex;
     align-items: center;
     margin:20px 0;
+}
+
+.setting-wrapper {
     > * {
         margin-right:35px;
     }
 }
 
+.normal-wrapper {
+    > * {
+        margin-right: 90px;
+    }
+}
+
 .gc-start-btn {
     width:150px;
 }

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

@@ -3,9 +3,10 @@ import { TranslateService } from '@ngx-translate/core';
 import { GcJobViewModel, WeekDay } from "./gcLog";
 import { GcViewModelFactory } from "./gc.viewmodel.factory";
 import { GcRepoService } from "./gc.service";
-import { WEEKDAYS, SCHEDULE_TYPE } from './gc.const';
+import { WEEKDAYS, SCHEDULE_TYPE, ONE_MINITUE} from './gc.const';
 import { GcUtility } from './gc.utility';
 import { ErrorHandler } from '@harbor/ui';
+
 @Component({
   selector: 'gc-config',
   templateUrl: './gc.component.html',
@@ -23,6 +24,7 @@ export class GcComponent implements OnInit {
   SCHEDULE_TYPE = SCHEDULE_TYPE;
   weekDay: WeekDay = WEEKDAYS[0];
   dailyTime: string;
+  disableGC: boolean = false;
 
   constructor(private gcRepoService: GcRepoService,
     private gcViewModelFactory: GcViewModelFactory,
@@ -80,6 +82,9 @@ export class GcComponent implements OnInit {
   }
 
   gcNow(): void {
+    this.disableGC = true;
+    setTimeout(() => {this.enableGc(); }, ONE_MINITUE);
+
     this.gcRepoService.manualGc().subscribe(response => {
       this.translate.get('GC.MSG_SUCCESS').subscribe((res: string) => {
         this.errorHandler.info(res);
@@ -90,6 +95,10 @@ export class GcComponent implements OnInit {
     });
   }
 
+  private enableGc () {
+    this.disableGC = false;
+  }
+
   scheduleGc(): void {
     let offTime = this.gcUtility.getOffTime(this.dailyTime);
     if (this.schedule) {
@@ -103,9 +112,7 @@ export class GcComponent implements OnInit {
         this.isEditMode = false;
         this.getJobs();
       }, error => {
-        this.translate.get('GC.MSG_ERROR').subscribe((res: string) => {
+        this.errorHandler.error(error);
-          this.errorHandler.info(res);
-        });
       });
     } else {
       this.gcRepoService.postScheduleGc(this.scheduleType, offTime, this.weekDay.value).subscribe(response => {
@@ -125,9 +132,7 @@ export class GcComponent implements OnInit {
         this.isEditMode = false;
         this.getJobs();
       }, error => {
-        this.translate.get('GC.MSG_ERROR').subscribe((res: string) => {
+        this.errorHandler.error(error);
-          this.errorHandler.info(res);
-        });
       });
     }
   }

src/portal/src/app/config/gc/gc.const.ts

@@ -14,6 +14,8 @@ export const SCHEDULE_TYPE = {
     WEEKLY: "Weekly"
 };
 
+export const ONE_MINITUE = 60000;
+
 
 
 

src/portal/src/app/config/gc/gc.viewmodel.factory.ts

@@ -11,7 +11,7 @@ export class GcViewModelFactory {
             let updateTime = new Date(job.update_time);
             gcViewModels.push({
                 id: job.id,
-                type: job.schedule.type,
+                type: job.schedule ? job.schedule.type : null,
                 status: job.job_status,
                 createTime: createTime,
                 updateTime: updateTime,

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

@@ -818,6 +818,8 @@
     "DETAILS":"Details",
     "PENDING":"Pending",
     "FINISHED":"Finished",
+    "STOPPED":"Stopped",
+    "ERROR":"Error",
     "SCHEDULE": {
         "NONE": "None",
         "DAILY": "Daily",
@@ -836,8 +838,7 @@
         "LOG_DETAIL":"Log Details",
         "MSG_SUCCESS":"Garbage Collection Successful",
         "MSG_SCHEDULE_SET":"Garbage Collection schedule has been set",
-        "MSG_SCHEDULE_RESET":"Garbage Collection schedule has been reset",
+        "MSG_SCHEDULE_RESET":"Garbage Collection schedule has been reset"
-        "MSG_ERROR":"Can not do Garbase Collection too often,please try again later."
     }
     
 }

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

@@ -815,6 +815,8 @@
     "DETAILS":"Details",
     "PENDING":"Pending",
     "FINISHED":"Finished",
+    "STOPPED":"Stopped",
+    "ERROR":"Error",
     "SCHEDULE": {
         "NONE": "None",
         "DAILY": "Daily",
@@ -833,7 +835,6 @@
         "LOG_DETAIL":"Log Details",
         "MSG_SUCCESS":"Garbage Collection Successful",
         "MSG_SCHEDULE_SET":"Garbage Collection schedule has been set",
-        "MSG_SCHEDULE_RESET":"Garbage Collection schedule has been reset",
+        "MSG_SCHEDULE_RESET":"Garbage Collection schedule has been reset"
-        "MSG_ERROR":"Can not do Garbase Collection too often,please try again later."
     }
 }

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

@@ -778,6 +778,8 @@
     "DETAILS":"Details",
     "PENDING":"Pending",
     "FINISHED":"Finished",
+    "STOPPED":"Stopped",
+    "ERROR":"Error",
     "SCHEDULE": {
         "NONE": "None",
         "DAILY": "Daily",
@@ -796,7 +798,6 @@
         "LOG_DETAIL":"Log Details",
         "MSG_SUCCESS":"Garbage Collection Successful",
         "MSG_SCHEDULE_SET":"Garbage Collection schedule has been set",
-        "MSG_SCHEDULE_RESET":"Garbage Collection schedule has been reset",
+        "MSG_SCHEDULE_RESET":"Garbage Collection schedule has been reset"
-        "MSG_ERROR":"Can not do Garbase Collection too often,please try again later."
     }
 }

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

@@ -814,6 +814,8 @@
     "DETAILS":"详情",
     "PENDING":"未开始",
     "FINISHED":"已完成",
+    "STOPPED":"已停止",
+    "ERROR":"错误",
     "SCHEDULE": {
         "NONE": "无",
         "DAILY": "每天",
@@ -832,7 +834,6 @@
         "LOG_DETAIL":"日志详情",
         "MSG_SUCCESS":"垃圾回收成功",
         "MSG_SCHEDULE_SET":"垃圾回收定时任务设置成功",
-        "MSG_SCHEDULE_RESET":"垃圾回收定时任务已被重置",
+        "MSG_SCHEDULE_RESET":"垃圾回收定时任务已被重置"
-        "MSG_ERROR":"您的垃圾回收请求提交过于频繁，请稍候重试"
     }
 }