feat:opmizite of slicing business page & 5G slicing monitor page

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

11 files changed, 84 insertions, 40 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 ca3c1eff..921e5edb 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
@@ -1,4 +1,4 @@
-<div>
+<div class="monitor-content">
     <h1>Slicing business Monitor</h1>
     <div nz-row>
         <div nz-col nzSpan="12" class="monitorDate">
@@ -13,7 +13,7 @@
             ></nz-date-picker>
         </div>
     </div>
-    <div nz-row nzType="flex" nzGutter="16" class="charts">
+    <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>
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 a100638b..f740102b 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
@@ -1,20 +1,25 @@
-.monitorDate{
-  //margin-left: 2%;
-  margin-top: 30px;
-}
-.businessmonitor_imagecontainer {
-  width: 100%;
-  margin-bottom: 20px;
-}
-.charts{
-  margin: 30px 0 10px 0;
-}
-.col-boxshadow{
-  padding: 25px;
-  margin: 0 10px;
-  border-radius: 5px;
-  box-shadow: #a9a9a92e 0px 0px 15px 10px;
-  h4{
-    font-size: 18px;
+.monitor-content {
+  h1{
+    padding: 20px;
+  }
+  .monitorDate {
+    margin-left: 20px;
+    margin-top: 30px;
+  }
+  .businessmonitor_imagecontainer {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .charts {
+    margin: 30px 0 10px 10px !important;
+  }
+  .col-boxshadow {
+    padding: 25px;
+    margin: 0 1%;
+    border-radius: 5px;
+    box-shadow: #a9a9a92e 0px 0px 15px 10px;
+    h4 {
+      font-size: 18px;
+    }
   }
 }
\ 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 e1eee188..0ad68c55 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
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { SlicingTaskServices } from '.././../../core/services/slicingTaskServices';
 import { pieChartconfig, lineChartconfig } from './monitorEchartsConfig';
+import *as moment from 'moment';
 @Component({
     selector: 'app-monitor-5g',
     templateUrl: './monitor-5g.component.html',
@@ -90,6 +91,8 @@ export class Monitor5gComponent implements OnInit {
         this.myhttp.getFetchTraffic(service_list, time).subscribe(res => {
             const { result_header: { result_code }, result_body: { slicing_usage_traffic_list } } = res;
             if (+result_code === 200 && slicing_usage_traffic_list.length > 0) {
+                this.trafficData = [];
+                this.trafficLegend = [];
                 slicing_usage_traffic_list.forEach((item) => {
                     this.trafficData.push({
                         name: item.service_id,
@@ -120,8 +123,12 @@ export class Monitor5gComponent implements OnInit {
         this.myhttp.getFetchOnlineusers(service_list, time).subscribe(res => {
             const { result_header: { result_code }, result_body: { slicing_online_user_list } } = res;
             if (+result_code === 200) {
+                this.onlineuserXAxis = [];
+                this.onlineusersData = [];
+                this.onlineuserLegend = [];
                 slicing_online_user_list[0].online_user_list.map((key) => {
-                    this.onlineuserXAxis.push(key.timestamp)
+                    let date = moment(Number(key.timestamp)).format('YYYY-MM-DD/HH:mm').split("/")[1];
+                    this.onlineuserXAxis.push(date)
                 });
                 slicing_online_user_list.forEach((item) => {
                     this.onlineuserLegend.push(item.service_id);
@@ -148,8 +155,12 @@ export class Monitor5gComponent implements OnInit {
         this.myhttp.getFetchBandwidth(service_list, time).subscribe(res => {
             const { result_header: { result_code }, result_body: { slicing_total_bandwidth_list } } = res;
             if (+result_code === 200) {
+                this.bandwidthXAxis = [];
+                this.bandwidthData = [];
+                this.bandwidthLegend = [];
                 slicing_total_bandwidth_list[0].total_bandwidth_list.map((key) => {
-                    this.bandwidthXAxis.push(key.timestamp)
+                    let date = moment(Number(key.timestamp)).format('YYYY-MM-DD/HH:mm').split("/")[1];
+                    this.bandwidthXAxis.push(date)
                 });
                 slicing_total_bandwidth_list.forEach((item) => {
                     this.bandwidthLegend.push(item.service_id);
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
index 47bd9e59..c6f41171 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
@@ -1,15 +1,18 @@
+<nz-spin [nzSpinning]="isSpinning">
 <nz-list class="taskmodel_list"  nzBordered [nzHeader]="'Carry Slicing Businress List ：'" [nzFooter]="null">
   <nz-table
           #businessTable
           [nzData]="businessList"
           [nzShowPagination]="false"
           nzHideOnSinglePage
+                class="model-table-padding"
   >
     <thead>
     <tr>
       <th>Service Instance Id</th>
       <th>Service Instance Name</th>
       <th>Service Type</th>
+                <th>S-NSSAI</th>
       <th>Status</th>
       <th width="100px">Detail</th>
     </tr>
@@ -36,12 +39,14 @@
           [nzData]="nssiList"
           [nzShowPagination]="false"
           nzHideOnSinglePage
+                class="model-table-padding"
   >
     <thead>
     <tr>
       <th>Service Instance Id</th>
       <th>Service Instance Name</th>
       <th>Service Type</th>
+                <th>Environment Context</th>
       <th>Status</th>
       <th width="100px">Detail</th>
     </tr>
@@ -61,4 +66,5 @@
     </ng-template>
     </tbody>
   </nz-table>
-</nz-list>
\ No newline at end of file
+</nz-list>
+</nz-spin>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts
index 070a483f..c34787d9 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts
@@ -18,6 +18,7 @@ export class NsiModelComponent implements OnInit {
     @Input() nsiId;
     businessList: any[];
     nssiList: any[];
+    isSpinning: boolean = true;
   ngOnInit() {
       this.getNsiDetail()
   }
@@ -25,6 +26,7 @@ export class NsiModelComponent implements OnInit {
         this.myhttp.getSlicingNsiDetail(this.nsiId).subscribe(res => {
             const {result_header: {result_code}, result_body: {hosted_business_list,included_nssi_list} } = res;
             if (+result_code === 200) {
+                this.isSpinning = false;
                 this.businessList = hosted_business_list;
                 this.nssiList = included_nssi_list;
             }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html
index 6be39ea0..a5da344e 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html
@@ -1,9 +1,11 @@
-<nz-list class="taskmodel_list"  nzBordered [nzHeader]="'Carry Slicing Nsi List £º'" [nzFooter]="null">
+<nz-spin [nzSpinning]="isSpinning">
+    <nz-list class="taskmodel_list" nzBordered [nzHeader]="'Carry Slicing Nsi List :'" [nzFooter]="null">
   <nz-table
           #nssiTable
           [nzData]="nsiList"
           [nzShowPagination]="false"
           nzHideOnSinglePage
+                class="model-table-padding"
   >
     <thead>
     <tr>
@@ -28,4 +30,5 @@
     </ng-template>
     </tbody>
   </nz-table>
-</nz-list>
\ No newline at end of file
+</nz-list>
+</nz-spin>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts
index 52e0f23d..d1af5457 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts
@@ -16,6 +16,7 @@ export class NssiModelComponent implements OnInit {
     }
     @Input() nssiId;
     nsiList: any[];
+    isSpinning: boolean = true;
   ngOnInit() {
       this.getNssiDetail()
   }
@@ -23,6 +24,7 @@ export class NssiModelComponent implements OnInit {
         this.myhttp.getSlicingNssiDetail(this.nssiId).subscribe(res => {
             const {result_header: {result_code}, result_body: {hosted_nsi_list} } = res;
             if (+result_code === 200) {
+                this.isSpinning = false;
                 this.nsiList = hosted_nsi_list;
             }
         })
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
index 9ece597e..5a11ab1d 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
@@ -1,15 +1,17 @@
+<nz-spin [nzSpinning]="isSpinning">
 <app-basic-info
         [businessRequirement]="businessRequirement"
         [NSTinfo]="NSTinfo"
         [taskModel]="taskModel"
 >
 </app-basic-info>
-<nz-list class="taskmodel_list"  nzBordered [nzHeader]="'Slicing NSI £º'" [nzFooter]="null">
+    <nz-list class="taskmodel_list" nzBordered [nzHeader]="'Slicing NSI :'" [nzFooter]="null">
     <nz-table
             #basicTable
             [nzData]="nsiInfo"
             [nzShowPagination]="false"
             nzHideOnSinglePage
+                class="model-table-padding"
     >
         <thead>
         <tr>
@@ -34,4 +36,5 @@
         </ng-template>
         </tbody>
     </nz-table>
-</nz-list>
\ No newline at end of file
+</nz-list>
+</nz-spin>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
index 6e097cd8..8b137891 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
@@ -1,3 +1 @@
-.taskmodel_list{
-  margin-bottom: 20px;
-}
\ No newline at end of file
+
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
index 8115a79b..253e1c32 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
@@ -18,9 +18,10 @@ export class SlicingBusinessModelComponent implements OnInit {
 
     @Input() businessId;
     businessRequirement: any[];
-    NSTinfo: any[];
-    nsiInfo: any[];
+    NSTinfo: any[] = [];
+    nsiInfo: any[] = [];
     taskModel: boolean = false;
+    isSpinning: boolean = true;
     ngOnInit() {
         console.log(this.businessId, "id");
         this.getDetail()
@@ -28,11 +29,14 @@ export class SlicingBusinessModelComponent implements OnInit {
 
     getDetail() {
         this.myhttp.getSlicingBusinessDetail(this.businessId).subscribe(res => {
-            const {result_header: {result_code}, result_body: {business_demand_info,nst_info,nsi_info} } = res;
+            const { result_body, result_header: { result_code } } = res;
             if (+result_code === 200) {
-                // business_demand_info.coverage_area_ta_list.map((item)=>{
-                //     item.replace(";","   ")
-                // });
+                this.isSpinning = false;
+                const {business_demand_info,business_demand_info: { coverage_area_ta_list },nst_info,nsi_info}  = result_body;
+                business_demand_info.area = coverage_area_ta_list.map(item => {
+                    item = item.split(';').join('-');
+                    return item
+                });
                 this.businessRequirement = [business_demand_info];
                 this.NSTinfo = [nst_info];
                 this.nsiInfo = [nsi_info];
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 515a4d3d..a524b8bb 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
@@ -20,7 +20,9 @@ export class SlicingBusinessTableComponent implements OnInit {
         this.getBusinessList()
     }
     ngOnDestroy() {
-        clearInterval(this.progressingTimer);
+        this.progressingTimer.forEach((item) => {
+            clearInterval(item.timer);
+        })
     }
     selectedValue:string = BUSINESS_STATUS[0];
     listOfData: any[] = [];
@@ -30,7 +32,7 @@ export class SlicingBusinessTableComponent implements OnInit {
     loading = false;
     isSelect: boolean = false;
     statusOptions: any[] = BUSINESS_STATUS;
-    progressingTimer :any;
+    progressingTimer :any[] = [];
 
 
     getBusinessList (): void{
@@ -175,11 +177,19 @@ export class SlicingBusinessTableComponent implements OnInit {
                     .subscribe((data) => {
                         if (data.result_body.operation_progress < 100) {
                             callback(data.result_body);
-                            this.progressingTimer = setTimeout(()=>{
+                            let progressSetTimeOut = setTimeout(() => {
                                 requery();
                             },5000);
+                            this.progressingTimer.push({
+                                id:obj.serviceId,
+                                timer:progressSetTimeOut
+                            })
                         } else {
-                            clearInterval(this.progressingTimer);
+                            this.progressingTimer.forEach((item) => {
+                                if(item.serviceId === obj.serviceId){
+                                    clearInterval(item.timer);
+                                }
+                            });
                             res(data.result_body);
                         }
                     })