feat:Optimize monitoring interface chart loading of slicing monitor page

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

3 files changed, 29 insertions, 7 deletions

diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
index 921e5edb..3f51dbc9 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
@@ -15,16 +15,25 @@
     </div>
     <div nz-row nzType="flex" class="charts">
         <div nz-col nzSpan="6" class="gutter-row col-boxshadow">
-            <h4>Slicing Use Traffic</h4>
-            <app-pie [initData]="trafficChartInit" [chartData]="trafficChartData"></app-pie>
+            <nz-spin [nzSpinning]="isSpinningTraffic">
+                <h4>Slicing Use Traffic</h4>
+                <app-pie [initData]="trafficChartInit" [chartData]="trafficChartData"></app-pie>
+                <div *ngIf="!isSpinningTraffic && trafficData.length === 0" class="nodata">NO Data</div>
+            </nz-spin>
         </div>
         <div nz-col nzSpan="8" class="gutter-row col-boxshadow">
-            <h4>Number Of Online Users</h4>
-            <app-line [initData]="onlineuserChartInit" [chartData]="onlineuserChartData"></app-line>
+            <nz-spin [nzSpinning]="isSpinningOnlineuser">
+                <h4>Number Of Online Users</h4>
+                <app-line [initData]="onlineuserChartInit" [chartData]="onlineuserChartData"></app-line>
+                <div *ngIf="!isSpinningOnlineuser && onlineusersData.length === 0" class="nodata">NO Data</div>
+            </nz-spin>
         </div>
         <div nz-col nzSpan="8" class="gutter-row col-boxshadow">
-            <h4>Slicing Total Bandwidth</h4>
-            <app-line [initData]="bandwidthChartInit" [chartData]="bandwidthChartData"></app-line>
+            <nz-spin [nzSpinning]="isSpinningBandwidth">
+                <h4>Slicing Total Bandwidth</h4>
+                <app-line [initData]="bandwidthChartInit" [chartData]="bandwidthChartData"></app-line>
+                <div *ngIf="!isSpinningBandwidth && bandwidthData.length === 0" class="nodata">NO Data</div>
+            </nz-spin>
         </div>
     </div>
     <div class="slicing-resource-table">
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less
index f740102b..1445978f 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less
@@ -15,11 +15,18 @@
   }
   .col-boxshadow {
     padding: 25px;
+    position: relative;
     margin: 0 1%;
     border-radius: 5px;
     box-shadow: #a9a9a92e 0px 0px 15px 10px;
     h4 {
       font-size: 18px;
     }
+    .nodata{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
   }
 }
\ No newline at end of file
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 21132892..bfee94f4 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
@@ -19,6 +19,9 @@ export class Monitor5gComponent implements OnInit {
     total: number = 0;
     loading = false;
     selectDate: number = 0;
+    isSpinningTraffic: boolean =true;
+    isSpinningOnlineuser: boolean =true;
+    isSpinningBandwidth: boolean =true;
 
     trafficData: any[] = [];
     trafficLegend: any[] = [];
@@ -83,7 +86,7 @@ export class Monitor5gComponent implements OnInit {
             service_list:[]
         };
         this.listOfData.forEach(item => {
-            requestBody.service_list.push({ service_id: item.service_instance_id });
+            requestBody.service_list.push({ service_id: item.service_snssai });
         });
         this.fetchTrafficData(requestBody, time);
         this.fetchOnlineusersData(requestBody, time);
@@ -91,6 +94,7 @@ export class Monitor5gComponent implements OnInit {
     }
     fetchTrafficData(service_list, time) {
         this.myhttp.getFetchTraffic(service_list, time).subscribe(res => {
+            this.isSpinningTraffic = false;
             const { result_header: { result_code }, result_body: { slicing_usage_traffic_list } } = res;
             if (+result_code === 200 && slicing_usage_traffic_list.length > 0) {
                 this.trafficData = [];
@@ -123,6 +127,7 @@ export class Monitor5gComponent implements OnInit {
     }
     fetchOnlineusersData(service_list, time) {
         this.myhttp.getFetchOnlineusers(service_list, time).subscribe(res => {
+            this.isSpinningOnlineuser = false;
             const { result_header: { result_code }, result_body: { slicing_online_user_list } } = res;
             if (+result_code === 200) {
                 this.onlineuserXAxis = [];
@@ -155,6 +160,7 @@ export class Monitor5gComponent implements OnInit {
     }
     fetchBandwidthData(service_list, time) {
         this.myhttp.getFetchBandwidth(service_list, time).subscribe(res => {
+            this.isSpinningBandwidth = false;
             const { result_header: { result_code }, result_body: { slicing_total_bandwidth_list } } = res;
             if (+result_code === 200) {
                 this.bandwidthXAxis = [];