(nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()"
>
- <app-basic-info
- [checkDetail]="checkDetail"
- [businessRequirement]="businessRequirement"
- [NSTinfo]="NSTinfo"
- >
- </app-basic-info>
- <nz-list [nzDataSource]="data" nzBordered nzHeader="任务详情:" [nzFooter]="null" [nzRenderItem]="defaultItem" >
- <ng-template #defaultItem let-item>
- <nz-list-item nz-row nzType="flex" nzJustify="center" >
- <nz-steps
- nzType="navigation"
- [nzCurrent]="item.currentProgress"
- nz-col
- nzSpan="20"
- nzSize="small"
- *ngFor="let item of data[0]; let i = index" class="task_progress"
- [ngStyle]="{paddingBottom: i === data[0].length -1 ? '30px': '0px'}"
- >
- <nz-step [nzTitle]="item.title"></nz-step>
- <nz-step
- [nzTitle]="item.currentProgress > 1 ? null : 'in progress'"
- [nzStatus]="item.status" nzIcon="anticon anticon-spin anticon-loading"
- > </nz-step>
- <nz-step
- [nzTitle]="item.status === 'finish' ? 'success' : null"
- [nzStatus]="item.status === 'finish' ? 'finish' : 'wait'"
- nzIcon='loading'
- ></nz-step>
- </nz-steps>
-
- </nz-list-item>
- </ng-template>
- </nz-list>
-
-
+ <nz-spin [nzSpinning]="isSpinning">
+ <app-basic-info
+ [checkDetail]="checkDetail"
+ [businessRequirement]="businessRequirement"
+ [NSTinfo]="NSTinfo"
+ >
+ </app-basic-info>
+ <nz-list [nzDataSource]="data" nzBordered nzHeader="任务详情:" [nzFooter]="null" [nzRenderItem]="defaultItem" >
+ <ng-template #defaultItem let-item>
+ <nz-list-item nz-row nzType="flex" nzJustify="center" >
+ <nz-steps
+ nzType="navigation"
+ [nzCurrent]="item.currentProgress"
+ nz-col
+ nzSpan="20"
+ nzSize="small"
+ *ngFor="let item of data[0]; let i = index" class="task_progress"
+ [ngStyle]="{paddingBottom: i === data[0].length -1 ? '30px': '0px'}"
+ >
+ <nz-step [nzTitle]="item.title"></nz-step>
+ <nz-step
+ [nzTitle]="item.currentProgress > 1 ? null : 'in progress'"
+ [nzStatus]="item.status" nzIcon="anticon anticon-spin anticon-loading"
+ > </nz-step>
+ <nz-step
+ [nzTitle]="item.status === 'finish' ? 'success' : null"
+ [nzStatus]="item.status === 'finish' ? 'finish' : 'wait'"
+ nzIcon='loading'
+ ></nz-step>
+ </nz-steps>
+
+ </nz-list-item>
+ </ng-template>
+ </nz-list>
+ </nz-spin>
</nz-modal>
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
import { SlicingTaskServices } from '../../../../../core/services/slicingTaskServices'
@Component({
@Output() cancel = new EventEmitter<boolean>();
- constructor(private http: SlicingTaskServices) { }
+ constructor(private http: SlicingTaskServices, private message: NzMessageService) { }
checkDetail: any[];
businessRequirement: any[];
data: any[];
currentProgress: number = 1;
timer: any = null;
+ isSpinning: boolean = false;
+ isGetData: boolean = false;
ngOnInit() { }
ngOnChanges() {
if (this.showProcess) {
+ this.isSpinning = true;
this.getInfo();
this.getProgress();
}else {
clearTimeout(this.timer);
+ this.isGetData = false;
}
}
getInfo(): void {
this.http.getSlicingBasicInfo(this.taskId).subscribe(res => {
+ if (this.isGetData) {
+ this.isSpinning = false;
+ } else {
+ this.isGetData = true;
+ }
const { result_body, result_header: { result_code } } = res;
if (+result_code === 200) {
const {
this.businessRequirement = [business_demand_info];
// 匹配NST信息
this.NSTinfo = [nst_info];
+ } else {
+ const errorMessage = this.moduleTitle === '切片创建中' ? 'Failed to get data' : 'Viewing results failed';
+ this.message.error(errorMessage)
}
})
}
getProgress(): void {
this.http.getSlicingCreateProgress(this.taskId).subscribe(res => {
+ if (this.isGetData) {
+ this.isSpinning = false;
+ } else {
+ this.isGetData = true;
+ }
const { result_body, result_header: {result_code } } = res;
if (+result_code === 200) {
this.data = [];
this.getProgress()
}, 5000)
}
+ } else {
+ this.message.error('Failed to get progress')
}
})
}
<nz-modal [nzVisible]="showDetail" nzWidth="85%" [nzTitle]="moduleTitle" (nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()">
- <app-basic-info
- [checkDetail]="checkDetail"
- [businessRequirement]="businessRequirement"
- [NSTinfo]="NSTinfo"
- >
- </app-basic-info>
-
- <div>
- <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null" *ngIf="slicingInstances">
- <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
- <div nz-col nzSpan="12">
- 切片实例 ID：
- <nz-select
- nzShowSearch
- [(ngModel)]="selectedServiceId"
- (nzOpenChange)="openSlicingInstance($event)"
- (nzScrollToBottom)="getNextPageData()"
- (ngModelChange)="slicingInstanceChange()"
- >
- <nz-option
- nzCustomContent
- *ngFor="let item of slicingInstances.list"
- [nzValue]="item.service_instance_id"
- [nzLabel]="item.service_instance_id"
+ <nz-spin [nzSpinning]="isSpinning">
+ <app-basic-info
+ [checkDetail]="checkDetail"
+ [businessRequirement]="businessRequirement"
+ [NSTinfo]="NSTinfo"
+ >
+ </app-basic-info>
+ <div>
+ <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null" *ngIf="slicingInstances">
+ <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+ <div nz-col nzSpan="12">
+ 切片实例 ID：
+ <nz-select
+ nzShowSearch
+ [(ngModel)]="selectedServiceId"
+ (nzOpenChange)="openSlicingInstance($event)"
+ (nzScrollToBottom)="getNextPageData()"
+ (ngModelChange)="slicingInstanceChange()"
>
- <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}}
- </nz-option>
- <nz-option *ngIf="slicingInstances.isLoading" nzDisabled nzCustomContent>
- <i class="anticon anticon-loading anticon-spin loading-icon"></i>
- Loading Data...
- </nz-option>
- </nz-select>
- </div>
- <div nz-col nzSpan="8">
- 切片实例名称：{{ selectedServiceName }}
- </div>
- <div nz-col nzSpan="4">
- <button nz-button nzType="primary" (click)="resetSlicingInstance()">
- <i nz-icon class="anticon anticon-delete"></i>
- </button>
- </div>
- </nz-list-item>
- <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
- <p class="listitem_subtitle" nz-col nzSpan="24">匹配的共享切片子网实例：</p>
- <nz-card *ngFor="let item of slicingSubnet" nzType="inner" nz-col nzSpan="24" [nzTitle]="item.title">
- <div nz-row [nzGutter]="8">
- <div nz-col nzSpan="12">
- 切片子网实例 ID：
- <nz-select
- nzShowSearch
- [nzDisabled]="isDisabled"
- [(ngModel)]="item.slicingId"
- (ngModelChange)="slicingSubnetChange(item)"
- (nzOpenChange)="openSubnetInstances($event, item)"
- (nzScrollToBottom)="getNextPageSubnet(item)"
+ <nz-option
+ nzCustomContent
+ *ngFor="let item of slicingInstances.list"
+ [nzValue]="item.service_instance_id"
+ [nzLabel]="item.service_instance_id"
>
- <nz-option
- nzCustomContent
- *ngFor="let item of item.instances"
- [nzValue]="item.service_instance_id"
- [nzLabel]="item.service_instance_id"
+ <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}}
+ </nz-option>
+ <nz-option *ngIf="slicingInstances.isLoading" nzDisabled nzCustomContent>
+ <i class="anticon anticon-loading anticon-spin loading-icon"></i>
+ Loading Data...
+ </nz-option>
+ </nz-select>
+ </div>
+ <div nz-col nzSpan="8">
+ 切片实例名称：{{ selectedServiceName }}
+ </div>
+ <div nz-col nzSpan="4">
+ <button nz-button nzType="primary" (click)="resetSlicingInstance()">
+ <i nz-icon class="anticon anticon-delete"></i>
+ </button>
+ </div>
+ </nz-list-item>
+ <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+ <p class="listitem_subtitle" nz-col nzSpan="24">匹配的共享切片子网实例：</p>
+ <nz-card *ngFor="let item of slicingSubnet" nzType="inner" nz-col nzSpan="24" [nzTitle]="item.title">
+ <div nz-row [nzGutter]="8">
+ <div nz-col nzSpan="12">
+ 切片子网实例 ID：
+ <nz-select
+ nzShowSearch
+ [nzDisabled]="isDisabled"
+ [(ngModel)]="item.slicingId"
+ (ngModelChange)="slicingSubnetChange(item)"
+ (nzOpenChange)="openSubnetInstances($event, item)"
+ (nzScrollToBottom)="getNextPageSubnet(item)"
>
- <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}}
- </nz-option>
- <nz-option *ngIf="item.isLoading" nzDisabled nzCustomContent>
- <i class="anticon anticon-loading anticon-spin loading-icon"></i>
- Loading Data...
- </nz-option>
- </nz-select>
+ <nz-option
+ nzCustomContent
+ *ngFor="let item of item.instances"
+ [nzValue]="item.service_instance_id"
+ [nzLabel]="item.service_instance_id"
+ >
+ <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}}
+ </nz-option>
+ <nz-option *ngIf="item.isLoading" nzDisabled nzCustomContent>
+ <i class="anticon anticon-loading anticon-spin loading-icon"></i>
+ Loading Data...
+ </nz-option>
+ </nz-select>
+ </div>
+ <div nz-col nzSpan="8">
+ 切片子网实例名称：{{item.slicingName}}
+ </div>
+ <div nz-col nzSpan="4">
+ <button nz-button nzType="primary" (click)="restSubnetInstance(item)" [disabled]='isDisabled'
+ [attr.disabled]='isDisabled?true:undefined'>
+ <i nz-icon class="anticon anticon-delete"></i>
+ </button>
+ <button nz-button nzType="primary" (click)="showParamsModel(item)">
+ <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i>
+ </button>
+ </div>
</div>
- <div nz-col nzSpan="8">
- 切片子网实例名称：{{item.slicingName}}
- </div>
- <div nz-col nzSpan="4">
- <button nz-button nzType="primary" (click)="restSubnetInstance(item)" [disabled]='isDisabled'
- [attr.disabled]='isDisabled?true:undefined'>
- <i nz-icon class="anticon anticon-delete"></i>
- </button>
- <button nz-button nzType="primary" (click)="showParamsModel(item)">
- <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i>
- </button>
- </div>
- </div>
- </nz-card>
- </nz-list-item>
- </nz-list>
- </div>
- <app-subnet-params-model
- [showModel]="isShowParams"
- [detailData]="params"
- [title]="paramsTitle"
- (cancel)="isShowParams=$event"
- (paramsDataChange)="changeParams($event)"
- >
- </app-subnet-params-model>
-
+ </nz-card>
+ </nz-list-item>
+ </nz-list>
+ </div>
+
+ </nz-spin>
</nz-modal>
+<app-subnet-params-model
+ [showModel]="isShowParams"
+ [detailData]="params"
+ [title]="paramsTitle"
+ (cancel)="isShowParams=$event"
+ (paramsDataChange)="changeParams($event)"
+>
+</app-subnet-params-model>
<app-notification #notification [isServicesList]="false" [parentComponent]="'slicing'"></app-notification>
\ No newline at end of file
Code Review / usecase-ui.git / commitdiff