summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorTao Shen <shentao@chinamobile.com>2019-12-09 02:43:00 +0000
committerGerrit Code Review <gerrit@onap.org>2019-12-09 02:43:00 +0000
commit776d3ae59e486d2152589ebe6c33267b63efc5fc (patch)
treef4859e75a6f45795102dd36dc5e5403106597dd9
parenta0e23263ff319da6b34b122bcde42a810599df4c (diff)
parent6f9ea798f25f2d91f1be14300027d64ee664c178 (diff)
Merge "feat: Added loading and error prompts for dialog components"
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html70
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts22
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html185
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts7
4 files changed, 155 insertions, 129 deletions
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html
index 07599bfb..ebe1e15b 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html
@@ -5,39 +5,39 @@
(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>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts
index 77a36a06..4656c32e 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
import { SlicingTaskServices } from '../../../../../core/services/slicingTaskServices'
@Component({
@@ -14,7 +15,7 @@ export class CheckProcessModelComponent implements OnInit {
@Output() cancel = new EventEmitter<boolean>();
- constructor(private http: SlicingTaskServices) { }
+ constructor(private http: SlicingTaskServices, private message: NzMessageService) { }
checkDetail: any[];
businessRequirement: any[];
@@ -22,20 +23,29 @@ export class CheckProcessModelComponent implements OnInit {
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 {
@@ -53,12 +63,20 @@ export class CheckProcessModelComponent implements OnInit {
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 = [];
@@ -85,6 +103,8 @@ export class CheckProcessModelComponent implements OnInit {
this.getProgress()
}, 5000)
}
+ } else {
+ this.message.error('Failed to get progress')
}
})
}
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
index 666fa16b..62b01134 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
@@ -1,100 +1,101 @@
<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
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
index ff64dfe1..b55844bc 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
@@ -71,13 +71,15 @@ export class SlicingTaskModelComponent implements OnInit {
isShowParams: boolean;
paramsTitle: string;
params: any;
-
+ // 获取数据loading
+ isSpinning: boolean = false;
ngOnInit() { }
ngOnChanges() {
if (this.showDetail) {
+ this.isSpinning = true;
this.getautidInfo();
} else {
this.isDisabled = true;
@@ -87,6 +89,7 @@ export class SlicingTaskModelComponent implements OnInit {
getautidInfo(): void {
this.http.getAuditInfo(this.taskId).subscribe( res => {
const { result_header: { result_code } } = res;
+ this.isSpinning = false;
if (+result_code === 200) {
const {
task_id,
@@ -159,6 +162,8 @@ export class SlicingTaskModelComponent implements OnInit {
cn_area_traffic_cap_dl,
cn_area_traffic_cap_ul
};
+ } else {
+ this.message.error('Failed to get data')
}
})
}