Improve stop button for replication (#14346)

Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
Will Sun 2021-03-04 12:04:52 +08:00 committed by GitHub
parent 5cae2d5d9a
commit afd29280ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 28 deletions

View File

@ -2,37 +2,35 @@
<section class="overview-section">
<div class="title-wrapper">
<div>
<a (click)="onBack()" class="onback"><{{'PROJECT_DETAIL.REPLICATION'|
translate}}</a>
</div>
<div class="title-block">
<div>
<a (click)="onBack()" class="onback"><{{'PROJECT_DETAIL.REPLICATION'|
translate}}</a>
<h2 class="custom-h2 h2-style">{{'REPLICATION.REPLICATION_EXECUTION'|
translate}}</h2>
<span class="id-divider"></span>
<h2 class="custom-h2 h2-style">{{executionId}}</h2>
</div>
<div class="title-block">
<div>
<h2 class="custom-h2 h2-style">{{'REPLICATION.REPLICATION_EXECUTION'|
translate}}</h2>
<span class="id-divider"></span>
<h2 class="custom-h2 h2-style">{{executionId}}</h2>
<div class="margin-top-16px">
<div class="status-progress" *ngIf="execution && execution['status'] === 'InProgress'">
<span class="spinner spinner-inline"></span>
<span>{{'REPLICATION.IN_PROGRESS'| translate}}</span>
</div>
<div>
<div class="status-progress" *ngIf="execution && execution['status'] === 'InProgress'">
<span class="spinner spinner-inline"></span>
<span>{{'REPLICATION.IN_PROGRESS'| translate}}</span>
</div>
<div class="status-success" *ngIf="execution && execution['status'] === 'Succeed'">
<clr-icon size="18" shape="success-standard" class="color-green"></clr-icon>
<span>{{'REPLICATION.SUCCESS'| translate}}</span>
</div>
<div class="status-failed" *ngIf="execution && execution['status'] === 'Failed'">
<clr-icon size="18" shape="error-standard" class="color-red"></clr-icon>
<span>{{'REPLICATION.FAILURE'| translate}}</span>
</div>
<div class="status-success" *ngIf="execution && execution['status'] === 'Succeed'">
<clr-icon size="18" shape="success-standard" class="color-green"></clr-icon>
<span>{{'REPLICATION.SUCCESS'| translate}}</span>
</div>
<div>
<button class="btn btn-primary " (click)="stopJob()"
[disabled]="stopOnGoing">{{'REPLICATION.STOPJOB' | translate}}</button>
<span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
<div class="status-failed" *ngIf="execution && execution['status'] === 'Failed'">
<clr-icon size="18" shape="error-standard" class="color-red"></clr-icon>
<span>{{'REPLICATION.FAILURE'| translate}}</span>
</div>
</div>
<div class="margin-top-16px">
<button class="btn btn-primary " (click)="stopJob()"
[disabled]="stopOnGoing || !canStop()">{{'REPLICATION.STOPJOB' | translate}}</button>
<span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
</div>
</div>
</div>

View File

@ -13,7 +13,7 @@
width: 250px;
}
>div:nth-child(2) {
width: 140px;
width: 150px;
span {
color: #007cbb;
font-size: 12px;
@ -25,7 +25,7 @@
height: 25px;
width: 2px;
background-color: #cccccc;
margin: 0 20px;
margin: 0 20px -2px 20px;
}
.h2-style {
display: inline-block;
@ -110,3 +110,6 @@
}
}
}
.margin-top-16px {
margin-top: 16px;
}

View File

@ -230,4 +230,8 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
return status;
}
canStop() {
return this.execution && this.execution.status === 'InProgress';
}
}

View File

@ -47,7 +47,7 @@
<clr-datagrid [(clrDgSelected)]="selectedRow" [clrDgLoading]="jobsLoading" (clrDgRefresh)="clrLoadJobs($event)">
<clr-dg-action-bar>
<div class="btn-group">
<button type="button" class="btn btn-secondary" *ngIf="isSystemAdmin" [disabled]="!(jobs && jobs.length>0) || isStopOnGoing || !selectedRow.length"
<button type="button" class="btn btn-secondary" *ngIf="isSystemAdmin" [disabled]="!canStop() || !(jobs && jobs.length>0) || isStopOnGoing || !selectedRow.length"
(click)="openStopExecutionsDialog(selectedRow)">{{'REPLICATION.STOPJOB' | translate}}</button>
</div>
</clr-dg-action-bar>

View File

@ -401,6 +401,10 @@ export class ReplicationComponent implements OnInit, OnDestroy {
);
this.StopConfirmDialog.open(StopExecutionsMessage);
}
canStop() {
return this.selectedRow && this.selectedRow[0]
&& this.selectedRow[0].status === 'InProgress';
}
confirmStop(message: ConfirmationAcknowledgement) {
if (