Modify some small issues in gc ui

Signed-off-by: Meina Zhou <meinaz@vmware.com>
This commit is contained in:
Meina Zhou 2018-09-21 08:39:19 +08:00
parent 6c84a3dc4f
commit d8b917c097
9 changed files with 40 additions and 20 deletions

View File

@ -3,7 +3,7 @@
<span>{{(originScheduleType ? 'SCHEDULE.'+ originScheduleType.toUpperCase(): "") | translate}}</span> <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.WEEKLY">{{'GC.ON' | translate}} {{originWeekDay.text | translate}}</span>
<span [hidden]="originScheduleType===SCHEDULE_TYPE.NONE">{{'GC.AT' | translate}} {{originOffTime.text}}</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>
<div class="setting-wrapper flex-layout" *ngIf="isEditMode"> <div class="setting-wrapper flex-layout" *ngIf="isEditMode">
<label for="gcPolicy">{{'CONFIG.GC' | translate}}</label> <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)="scheduleGc()">{{'BUTTON.SAVE' | translate}}</button>
<button class="btn btn-primary btn-sm" (click)="isEditMode = false" >{{'BUTTON.CANCEL' | translate}}</button> <button class="btn btn-primary btn-sm" (click)="isEditMode = false" >{{'BUTTON.CANCEL' | translate}}</button>
</div> </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> <div class="job-header">{{'GC.JOB_LIST' | translate}}</div>
<clr-datagrid> <clr-datagrid>
<clr-dg-column>{{'GC.JOB_ID' | translate}}</clr-dg-column> <clr-dg-column>{{'GC.JOB_ID' | translate}}</clr-dg-column>
@ -38,12 +38,12 @@
<clr-dg-column>{{'DETAILS' | translate}}</clr-dg-column> <clr-dg-column>{{'DETAILS' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let job of jobs" [clrDgItem]='job'> <clr-dg-row *ngFor="let job of jobs" [clrDgItem]='job'>
<clr-dg-cell>{{job.id }}</clr-dg-cell> <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.status.toUpperCase() | translate}}</clr-dg-cell>
<clr-dg-cell>{{job.createTime | date:'medium'}}</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>{{job.updateTime | date:'medium'}}</clr-dg-cell>
<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-cell>
</clr-dg-row> </clr-dg-row>
<clr-dg-footer>{{'GC.LATEST_JOBS' | translate :{param: jobs.length} }}</clr-dg-footer> <clr-dg-footer>{{'GC.LATEST_JOBS' | translate :{param: jobs.length} }}</clr-dg-footer>

View File

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

View File

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

View File

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

View File

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

View File

@ -818,6 +818,8 @@
"DETAILS":"Details", "DETAILS":"Details",
"PENDING":"Pending", "PENDING":"Pending",
"FINISHED":"Finished", "FINISHED":"Finished",
"STOPPED":"Stopped",
"ERROR":"Error",
"SCHEDULE": { "SCHEDULE": {
"NONE": "None", "NONE": "None",
"DAILY": "Daily", "DAILY": "Daily",
@ -836,8 +838,7 @@
"LOG_DETAIL":"Log Details", "LOG_DETAIL":"Log Details",
"MSG_SUCCESS":"Garbage Collection Successful", "MSG_SUCCESS":"Garbage Collection Successful",
"MSG_SCHEDULE_SET":"Garbage Collection schedule has been set", "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."
} }
} }

View File

@ -815,6 +815,8 @@
"DETAILS":"Details", "DETAILS":"Details",
"PENDING":"Pending", "PENDING":"Pending",
"FINISHED":"Finished", "FINISHED":"Finished",
"STOPPED":"Stopped",
"ERROR":"Error",
"SCHEDULE": { "SCHEDULE": {
"NONE": "None", "NONE": "None",
"DAILY": "Daily", "DAILY": "Daily",
@ -833,7 +835,6 @@
"LOG_DETAIL":"Log Details", "LOG_DETAIL":"Log Details",
"MSG_SUCCESS":"Garbage Collection Successful", "MSG_SUCCESS":"Garbage Collection Successful",
"MSG_SCHEDULE_SET":"Garbage Collection schedule has been set", "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."
} }
} }

View File

@ -778,6 +778,8 @@
"DETAILS":"Details", "DETAILS":"Details",
"PENDING":"Pending", "PENDING":"Pending",
"FINISHED":"Finished", "FINISHED":"Finished",
"STOPPED":"Stopped",
"ERROR":"Error",
"SCHEDULE": { "SCHEDULE": {
"NONE": "None", "NONE": "None",
"DAILY": "Daily", "DAILY": "Daily",
@ -796,7 +798,6 @@
"LOG_DETAIL":"Log Details", "LOG_DETAIL":"Log Details",
"MSG_SUCCESS":"Garbage Collection Successful", "MSG_SUCCESS":"Garbage Collection Successful",
"MSG_SCHEDULE_SET":"Garbage Collection schedule has been set", "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."
} }
} }

View File

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