fix gc ui issues

Signed-off-by: Meina Zhou <meinaz@vmware.com>
This commit is contained in:
Meina Zhou 2018-10-18 10:36:59 +08:00
parent 7c43420cfd
commit c6aaea869f
8 changed files with 65 additions and 63 deletions

View File

@ -2,23 +2,27 @@
<div> <div>
<div class="row flex-items-xs-between rightPos"> <div class="row flex-items-xs-between rightPos">
<div class="flex-xs-middle option-right"> <div class="flex-xs-middle option-right">
<hbr-filter [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filterEvt)="doSearchRules($event)" [currentValue]="search.ruleName"></hbr-filter> <hbr-filter [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filterEvt)="doSearchRules($event)"
[currentValue]="search.ruleName"></hbr-filter>
<span class="refresh-btn" (click)="refreshRules()"> <span class="refresh-btn" (click)="refreshRules()">
<clr-icon shape="refresh"></clr-icon> <clr-icon shape="refresh"></clr-icon>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<hbr-list-replication-rule #listReplicationRule [projectId]="projectId" [isSystemAdmin]="isSystemAdmin" (replicateManual)=replicateManualRule($event) (selectOne)="selectOneRule($event)" (hideJobs)="hideJobs()" (openNewRule)="openModal()" (editOne)="openEditRule($event)" (reload)="reloadRules($event)" [loading]="loading" [withReplicationJob]="withReplicationJob" (redirect)="customRedirect($event)"></hbr-list-replication-rule> <hbr-list-replication-rule #listReplicationRule [projectId]="projectId" [isSystemAdmin]="isSystemAdmin" (replicateManual)=replicateManualRule($event)
</div> (selectOne)="selectOneRule($event)" (hideJobs)="hideJobs()" (openNewRule)="openModal()" (editOne)="openEditRule($event)"
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px;" [hidden]='hiddenJobList'> (reload)="reloadRules($event)" [loading]="loading" [withReplicationJob]="withReplicationJob" (redirect)="customRedirect($event)"></hbr-list-replication-rule>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px;" [hidden]='hiddenJobList'>
<div *ngIf="withReplicationJob" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div *ngIf="withReplicationJob" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row flex-items-xs-between" style="height:60px;"> <div class="row flex-items-xs-between" style="height:60px;">
<h5 class="flex-items-xs-bottom option-left-down" style="margin-left: 14px;">{{'REPLICATION.REPLICATION_JOBS' | translate}}</h5> <h5 class="flex-items-xs-bottom option-left-down" style="margin-left: 14px;">{{'REPLICATION.REPLICATION_JOBS' | translate}}</h5>
<div class="flex-items-xs-bottom option-right-down"> <div class="flex-items-xs-bottom option-right-down">
<button class="btn btn-link" (click)="toggleSearchJobOptionalName(currentJobSearchOption)">{{toggleJobSearchOption[currentJobSearchOption] | translate}}</button> <button class="btn btn-link" (click)="toggleSearchJobOptionalName(currentJobSearchOption)">{{toggleJobSearchOption[currentJobSearchOption] | translate}}</button>
<hbr-filter [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_JOBS_PLACEHOLDER" | translate}}' (filterEvt)="doSearchJobs($event)" [currentValue]="search.repoName" ></hbr-filter> <hbr-filter [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_JOBS_PLACEHOLDER" | translate}}' (filterEvt)="doSearchJobs($event)"
[currentValue]="search.repoName"></hbr-filter>
<span class="refresh-btn" (click)="refreshJobs()"> <span class="refresh-btn" (click)="refreshJobs()">
<clr-icon shape="refresh"></clr-icon> <clr-icon shape="refresh"></clr-icon>
</span> </span>
@ -27,20 +31,22 @@
<div class="row flex-items-xs-right option-right" [hidden]="currentJobSearchOption === 0"> <div class="row flex-items-xs-right option-right" [hidden]="currentJobSearchOption === 0">
<div class="select" style="float: left;"> <div class="select" style="float: left;">
<select (change)="doFilterJobStatus($event)"> <select (change)="doFilterJobStatus($event)">
<option *ngFor="let j of jobStatus" value="{{j.key}}" [selected]="currentJobStatus.key === j.key">{{j.description | translate}}</option> <option *ngFor="let j of jobStatus" value="{{j.key}}" [selected]="currentJobStatus.key === j.key">{{j.description | translate}}</option>
</select> </select>
</div> </div>
<div class="flex-items-xs-middle"> <div class="flex-items-xs-middle">
<hbr-datetime [dateInput]="search.startTime" (search)="doJobSearchByStartTime($event)"></hbr-datetime> <hbr-datetime [dateInput]="search.startTime" (search)="doJobSearchByStartTime($event)"></hbr-datetime>
<hbr-datetime [dateInput]="search.endTime" [oneDayOffset]="true" (search)="doJobSearchByEndTime($event)"></hbr-datetime> <hbr-datetime [dateInput]="search.endTime" [oneDayOffset]="true" (search)="doJobSearchByEndTime($event)"></hbr-datetime>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="withReplicationJob" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div *ngIf="withReplicationJob" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<clr-datagrid [clrDgLoading]="jobsLoading" (clrDgRefresh)="clrLoadJobs($event)"><clr-dg-action-bar> <clr-datagrid [clrDgLoading]="jobsLoading" (clrDgRefresh)="clrLoadJobs($event)">
<div class="btn-group"> <clr-dg-action-bar>
<button type="button" class="btn btn-sm btn-secondary" *ngIf="isSystemAdmin" [disabled]="!(jobs && jobs.length>0) || isStopOnGoing" (click)="stopJobs()">{{'REPLICATION.STOPJOB' | translate}}</button> <div class="btn-group">
</div> <button type="button" class="btn btn-sm btn-secondary" *ngIf="isSystemAdmin" [disabled]="!(jobs && jobs.length>0) || isStopOnGoing"
(click)="stopJobs()">{{'REPLICATION.STOPJOB' | translate}}</button>
</div>
</clr-dg-action-bar> </clr-dg-action-bar>
<clr-dg-column [clrDgField]="'repository'">{{'REPLICATION.NAME' | translate}}</clr-dg-column> <clr-dg-column [clrDgField]="'repository'">{{'REPLICATION.NAME' | translate}}</clr-dg-column>
<clr-dg-column [clrDgField]="'status'">{{'REPLICATION.STATUS' | translate}}</clr-dg-column> <clr-dg-column [clrDgField]="'status'">{{'REPLICATION.STATUS' | translate}}</clr-dg-column>
@ -50,29 +56,29 @@
<clr-dg-column>{{'REPLICATION.LOGS' | translate}}</clr-dg-column> <clr-dg-column>{{'REPLICATION.LOGS' | translate}}</clr-dg-column>
<clr-dg-placeholder>{{'REPLICATION.JOB_PLACEHOLDER' | translate }}</clr-dg-placeholder> <clr-dg-placeholder>{{'REPLICATION.JOB_PLACEHOLDER' | translate }}</clr-dg-placeholder>
<clr-dg-row *ngFor="let j of jobs"> <clr-dg-row *ngFor="let j of jobs">
<clr-dg-cell>{{j.repository}}</clr-dg-cell> <clr-dg-cell>{{j.repository}}</clr-dg-cell>
<clr-dg-cell>{{j.status}}</clr-dg-cell> <clr-dg-cell>{{j.status}}</clr-dg-cell>
<clr-dg-cell>{{j.operation}}</clr-dg-cell> <clr-dg-cell>{{j.operation}}</clr-dg-cell>
<clr-dg-cell>{{j.creation_time | date: 'short'}}</clr-dg-cell> <clr-dg-cell>{{j.creation_time | date: 'short'}}</clr-dg-cell>
<clr-dg-cell>{{j.update_time | date: 'short'}}</clr-dg-cell> <clr-dg-cell>{{j.update_time | date: 'short'}}</clr-dg-cell>
<clr-dg-cell> <clr-dg-cell>
<span *ngIf="j.status=='pending'; else elseBlock" class="label">{{'REPLICATION.NO_LOGS' | translate}}</span> <span *ngIf="j.status=='pending'; else elseBlock" class="label">{{'REPLICATION.NO_LOGS' | translate}}</span>
<ng-template #elseBlock> <ng-template #elseBlock>
<a href="javascript:void(0);" (click)="viewLog(j.id)"> <a target="_blank" [href]="viewLog(j.id)">
<clr-icon shape="clipboard"></clr-icon> <clr-icon shape="list"></clr-icon>
</a></ng-template> </a>
</clr-dg-cell> </ng-template>
</clr-dg-cell>
</clr-dg-row> </clr-dg-row>
<clr-dg-footer> <clr-dg-footer>
<span *ngIf="showPaginationIndex">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPLICATION.OF' | translate}}</span> <span *ngIf="showPaginationIndex">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPLICATION.OF' | translate}}</span>
{{pagination.totalItems}} {{'REPLICATION.ITEMS' | translate}} {{pagination.totalItems}} {{'REPLICATION.ITEMS' | translate}}
<clr-dg-pagination #pagination [(clrDgPage)]="currentPage" [clrDgPageSize]="pageSize" [clrDgTotalItems]="totalCount"></clr-dg-pagination> <clr-dg-pagination #pagination [(clrDgPage)]="currentPage" [clrDgPageSize]="pageSize" [clrDgTotalItems]="totalCount"></clr-dg-pagination>
</clr-dg-footer> </clr-dg-footer>
</clr-datagrid> </clr-datagrid>
</div> </div>
</div> </div>
<job-log-viewer #replicationLogViewer></job-log-viewer> <hbr-create-edit-rule *ngIf="isSystemAdmin" [withAdmiral]="withAdmiral" [projectId]="projectId" [projectName]="projectName"
<hbr-create-edit-rule *ngIf="isSystemAdmin" [withAdmiral]="withAdmiral" [projectId]="projectId" [projectName]="projectName" (goToRegistry)="goRegistry()" (reload)="reloadRules($event)"></hbr-create-edit-rule> (goToRegistry)="goRegistry()" (reload)="reloadRules($event)"></hbr-create-edit-rule>
<confirmation-dialog #replicationConfirmDialog (confirmAction)="confirmReplication($event)"></confirmation-dialog> <confirmation-dialog #replicationConfirmDialog (confirmAction)="confirmReplication($event)"></confirmation-dialog>
</div> </div>

View File

@ -47,8 +47,6 @@ import {
calculatePage calculatePage
} from "../utils"; } from "../utils";
import { JobLogViewerComponent } from "../job-log-viewer/index";
import { import {
ConfirmationTargets, ConfirmationTargets,
ConfirmationButtons, ConfirmationButtons,
@ -138,8 +136,6 @@ export class ReplicationComponent implements OnInit, OnDestroy {
@ViewChild(CreateEditRuleComponent) @ViewChild(CreateEditRuleComponent)
createEditPolicyComponent: CreateEditRuleComponent; createEditPolicyComponent: CreateEditRuleComponent;
@ViewChild("replicationLogViewer")
replicationLogViewer: JobLogViewerComponent;
@ViewChild("replicationConfirmDialog") @ViewChild("replicationConfirmDialog")
replicationConfirmDialog: ConfirmationDialogComponent; replicationConfirmDialog: ConfirmationDialogComponent;
@ -454,9 +450,7 @@ export class ReplicationComponent implements OnInit, OnDestroy {
this.loadFirstPage(); this.loadFirstPage();
} }
viewLog(jobId: number | string): void { viewLog(jobId: number | string): string {
if (this.replicationLogViewer) { return this.replicationService.getJobBaseUrl() + "/" + jobId + "/log";
this.replicationLogViewer.open(jobId);
}
} }
} }

View File

@ -166,6 +166,8 @@ export abstract class ReplicationService {
abstract stopJobs( abstract stopJobs(
jobId: number | string jobId: number | string
): Observable<string> | Promise<string> | string; ): Observable<string> | Promise<string> | string;
abstract getJobBaseUrl(): string;
} }
/** /**
@ -209,6 +211,10 @@ export class ReplicationDefaultService extends ReplicationService {
); );
} }
public getJobBaseUrl() {
return this._jobBaseUrl;
}
public getReplicationRules( public getReplicationRules(
projectId?: number | string, projectId?: number | string,
ruleName?: string, ruleName?: string,

View File

@ -30,14 +30,14 @@
<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-primary btn-sm gc-start-btn" (click)="gcNow()" [disabled]="disableGC">{{'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 font-style">{{'GC.JOB_LIST' | translate}}</div> <div class="job-header font-style">{{'GC.JOB_HISTORY' | 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>
<clr-dg-column>{{'GC.TRIGGER_TYPE' | translate}}</clr-dg-column> <clr-dg-column>{{'GC.TRIGGER_TYPE' | translate}}</clr-dg-column>
<clr-dg-column>{{'STATUS' | translate}}</clr-dg-column> <clr-dg-column>{{'STATUS' | translate}}</clr-dg-column>
<clr-dg-column>{{'START_TIME' | translate}}</clr-dg-column> <clr-dg-column>{{'START_TIME' | translate}}</clr-dg-column>
<clr-dg-column>{{'END_TIME' | translate}}</clr-dg-column> <clr-dg-column>{{'UPDATE_TIME' | translate}}</clr-dg-column>
<clr-dg-column>{{'DETAILS' | translate}}</clr-dg-column> <clr-dg-column>{{'LOGS' | 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>{{(job.type ? 'SCHEDULE.'+ job.type.toUpperCase() : '') | translate }}</clr-dg-cell> <clr-dg-cell>{{(job.type ? 'SCHEDULE.'+ job.type.toUpperCase() : '') | translate }}</clr-dg-cell>
@ -45,7 +45,7 @@
<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 *ngIf="job.status.toLowerCase() === 'finished' || job.status.toLowerCase() === 'error'" 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"><clr-icon shape="list"></clr-icon></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

@ -818,8 +818,8 @@
"UNKNOWN": "n/a", "UNKNOWN": "n/a",
"STATUS":"Status", "STATUS":"Status",
"START_TIME": "Start Time", "START_TIME": "Start Time",
"END_TIME": "End Time", "UPDATE_TIME": "Update Time",
"DETAILS":"Details", "LOGS":"Logs",
"PENDING":"Pending", "PENDING":"Pending",
"FINISHED":"Finished", "FINISHED":"Finished",
"STOPPED":"Stopped", "STOPPED":"Stopped",
@ -836,11 +836,10 @@
"GC": { "GC": {
"CURRENT_SCHEDULE": "Current Schedule", "CURRENT_SCHEDULE": "Current Schedule",
"GC_NOW": "GC NOW", "GC_NOW": "GC NOW",
"JOB_LIST":"GC Jobs List", "JOB_HISTORY":"GC Jobs History",
"JOB_ID":"Job ID", "JOB_ID":"Job ID",
"TRIGGER_TYPE": "Trigger Type", "TRIGGER_TYPE": "Trigger Type",
"LATEST_JOBS": "Latest {{param}} Jobs", "LATEST_JOBS": "Latest {{param}} Jobs",
"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"

View File

@ -815,8 +815,8 @@
"UNKNOWN": "n/a", "UNKNOWN": "n/a",
"STATUS":"Status", "STATUS":"Status",
"START_TIME": "Start Time", "START_TIME": "Start Time",
"END_TIME": "End Time", "UPDATE_TIME": "Update Time",
"DETAILS":"Details", "LOGS":"Logs",
"PENDING":"Pending", "PENDING":"Pending",
"FINISHED":"Finished", "FINISHED":"Finished",
"STOPPED":"Stopped", "STOPPED":"Stopped",
@ -833,11 +833,10 @@
"GC": { "GC": {
"CURRENT_SCHEDULE": "Current Schedule", "CURRENT_SCHEDULE": "Current Schedule",
"GC_NOW": "GC NOW", "GC_NOW": "GC NOW",
"JOB_LIST":"GC Jobs List", "JOB_HISTORY":"GC Jobs History",
"JOB_ID":"Job ID", "JOB_ID":"Job ID",
"TRIGGER_TYPE": "Trigger Type", "TRIGGER_TYPE": "Trigger Type",
"LATEST_JOBS": "Latest {{param}} Jobs", "LATEST_JOBS": "Latest {{param}} Jobs",
"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"

View File

@ -778,8 +778,8 @@
"UNKNOWN": "n. d.", "UNKNOWN": "n. d.",
"STATUS":"Status", "STATUS":"Status",
"START_TIME": "Start Time", "START_TIME": "Start Time",
"END_TIME": "End Time", "UPDATE_TIME": "Update Time",
"DETAILS":"Details", "LOGS":"Logs",
"PENDING":"Pending", "PENDING":"Pending",
"FINISHED":"Finished", "FINISHED":"Finished",
"STOPPED":"Stopped", "STOPPED":"Stopped",
@ -796,11 +796,10 @@
"GC": { "GC": {
"CURRENT_SCHEDULE": "Current Schedule", "CURRENT_SCHEDULE": "Current Schedule",
"GC_NOW": "GC NOW", "GC_NOW": "GC NOW",
"JOB_LIST":"GC Jobs List", "JOB_HISTORY":"GC Jobs History",
"JOB_ID":"Job ID", "JOB_ID":"Job ID",
"TRIGGER_TYPE": "Trigger Type", "TRIGGER_TYPE": "Trigger Type",
"LATEST_JOBS": "Latest {{param}} Jobs", "LATEST_JOBS": "Latest {{param}} Jobs",
"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"

View File

@ -813,9 +813,9 @@
"INCONRRECT_OLD_PWD": "旧密码不正确。", "INCONRRECT_OLD_PWD": "旧密码不正确。",
"UNKNOWN": "未知", "UNKNOWN": "未知",
"STATUS":"状态", "STATUS":"状态",
"START_TIME": "开始时间", "START_TIME": "创建时间",
"END_TIME": "结束时间", "UPDATE_TIME": "更新时间",
"DETAILS":"详情", "LOGS":"日志",
"PENDING":"未开始", "PENDING":"未开始",
"FINISHED":"已完成", "FINISHED":"已完成",
"STOPPED":"已停止", "STOPPED":"已停止",
@ -832,11 +832,10 @@
"GC": { "GC": {
"CURRENT_SCHEDULE": "当前定时任务", "CURRENT_SCHEDULE": "当前定时任务",
"GC_NOW": "立即清理垃圾", "GC_NOW": "立即清理垃圾",
"JOB_LIST":"任务列表", "JOB_HISTORY":"历史任务",
"JOB_ID":"任务ID", "JOB_ID":"任务ID",
"TRIGGER_TYPE": "触发类型", "TRIGGER_TYPE": "触发类型",
"LATEST_JOBS": "最新的 {{param}} 个任务", "LATEST_JOBS": "最新的 {{param}} 个任务",
"LOG_DETAIL":"日志详情",
"MSG_SUCCESS":"垃圾回收成功", "MSG_SUCCESS":"垃圾回收成功",
"MSG_SCHEDULE_SET":"垃圾回收定时任务设置成功", "MSG_SCHEDULE_SET":"垃圾回收定时任务设置成功",
"MSG_SCHEDULE_RESET":"垃圾回收定时任务已被重置" "MSG_SCHEDULE_RESET":"垃圾回收定时任务已被重置"