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

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

8 files changed, 46 insertions, 18 deletions

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