feat: Added loading and error prompts for dialog components

Change-Id: Ibd1a086c30a7147a7224c65daf1606a089c87c49
Issue-ID: USECASEUI-368
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

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')
       }
     })
   }