From f574888b41dbf6d465973899c0265c4baa251f7f Mon Sep 17 00:00:00 2001 From: cyuamber Date: Sat, 28 Dec 2019 09:04:06 +0800 Subject: feat:Optimize loading of slicing page Change-Id: I7bebe12f9e62268ce40142b518e592a9335040f5 Issue-ID: USECASEUI-369 Signed-off-by: cyuamber --- .../views/fcaps/monitor-5g/monitor-5g.component.ts | 21 +++++++++++++++++++++ .../services-list/services-list.component.html | 2 +- .../nsi-management/nsi-table/nsi-table.component.ts | 4 ++++ .../nssi-table/nssi-table.component.ts | 4 ++++ .../slicing-business-table.component.ts | 6 +++++- 5 files changed, 35 insertions(+), 2 deletions(-) (limited to 'usecaseui-portal') diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts index 39c684af..3ed3fe61 100644 --- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts @@ -54,12 +54,24 @@ export class Monitor5gComponent implements OnInit { }; this.myhttp.getSlicingBusinessList(paramsObj, false).subscribe(res => { const { result_header: { result_code }, result_body: { slicing_business_list, record_number } } = res; + this.loading = false; if (+result_code === 200) { this.total = record_number; this.loading = false; this.listOfData = [].concat(slicing_business_list); this.getChartsData(); + }else { + console.log("getBusinessList false"); + this.isSpinningTraffic = false; + this.isSpinningOnlineuser = false; + this.isSpinningBandwidth = false; } + },(res) => { + this.loading = false; + this.isSpinningTraffic = false; + this.isSpinningOnlineuser = false; + this.isSpinningBandwidth = false; + console.error(res); }) } disabledDate = (current: Date): boolean => { @@ -139,6 +151,9 @@ export class Monitor5gComponent implements OnInit { }] }; } + },(res) => { + this.isSpinningTraffic = false; + console.error(res); }) } fetchOnlineusersData(service_list, time) { @@ -175,6 +190,9 @@ export class Monitor5gComponent implements OnInit { series: this.onlineusersData }; } + },(res) => { + this.isSpinningOnlineuser = false; + console.error(res); }) } fetchBandwidthData(service_list, time) { @@ -212,6 +230,9 @@ export class Monitor5gComponent implements OnInit { series: this.bandwidthData }; } + },(res) => { + this.isSpinningBandwidth = false; + console.error(res); }) } getOnlineuserSeriesData(item) { diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html index 856253a2..1092b332 100644 --- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html @@ -130,7 +130,7 @@ - + {{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}} diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts index 22cc3eec..8a85f91c 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts @@ -41,11 +41,15 @@ export class NsiTableComponent implements OnInit { } this.myhttp.getSlicingNsiList(paramsObj,this.isSelect).subscribe (res => { const { result_header: { result_code }, result_body: { nsi_service_instances,record_number } } = res; + this.loading = false; if (+result_code === 200) { this.total = record_number; this.loading = false; this.listOfData = nsi_service_instances; } + }, (res) => { + this.loading = false; + console.error(res); }) } getListOfProcessingStatus(){ diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts index 034b9a5e..7536a831 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts @@ -41,11 +41,15 @@ export class NssiTableComponent implements OnInit { } this.myhttp.getSlicingNssiList(paramsObj,this.isSelect).subscribe (res => { const { result_header: { result_code }, result_body: { nssi_service_instances,record_number } } = res; + this.loading = false; if (+result_code === 200) { this.total = record_number; this.loading = false; this.listOfData = nssi_service_instances; } + },(res) => { + this.loading = false; + console.error(res); }) } getListOfProcessingStatus(){ diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts index f81f94e1..92973d58 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts @@ -51,9 +51,9 @@ export class SlicingBusinessTableComponent implements OnInit { } this.myhttp.getSlicingBusinessList(paramsObj, this.isSelect).subscribe(res => { const { result_header: { result_code }, result_body: { slicing_business_list, record_number } } = res; + this.loading = false; if (+result_code === 200) { this.total = record_number; - this.loading = false; this.listOfData = slicing_business_list.map((item, index) => { if (item.last_operation_progress && item.last_operation_type && item.last_operation_progress < 100) { let updata = (prodata: { operation_progress: string }) => { @@ -115,6 +115,7 @@ export class SlicingBusinessTableComponent implements OnInit { this.loading = true; this.myhttp.changeActivateSlicingService(paramsObj, isActivate).subscribe(res => { const { result_header: { result_code, result_message }, result_body: { operation_id } } = res; + this.loading = false; if (+result_code === 200) { this.notification1.notificationSuccess('slicing business', finished, slicing.service_instance_id); this.getBusinessList(); @@ -127,6 +128,7 @@ export class SlicingBusinessTableComponent implements OnInit { } this.getBusinessList(); }, () => { + this.loading = false; let singleSlicing = Object.assign({}, this.listOfData[index]); this.listOfData[index] = singleSlicing; this.listOfData = [...this.listOfData]; @@ -145,6 +147,7 @@ export class SlicingBusinessTableComponent implements OnInit { this.loading = true; this.myhttp.terminateSlicingService(paramsObj).subscribe(res => { const { result_header: { result_code, result_message }, result_body: { operation_id } } = res; + this.loading = false; if (+result_code === 200) { this.notification1.notificationSuccess('slicing business', 'terminate', slicing.service_instance_id); this.getBusinessList(); @@ -153,6 +156,7 @@ export class SlicingBusinessTableComponent implements OnInit { this.terminateStart = false; } }, () => { + this.loading = false; this.notification1.notificationFailed('slicing business', 'terminate', slicing.service_instance_id); this.terminateStart = false; }) -- cgit 1.2.3-korg