feat:Add progress interface query of slicing business page

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

9 files changed, 201 insertions, 96 deletions

diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
index 9d2d1280..fffa5801 100644
--- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
+++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
@@ -78,11 +78,15 @@ export class SlicingTaskServices {
     }

 

     // Get slicing business list

-    getSlicingBusinessList (paramsObj) {

-        const url = this.url.slicingBusinessList

-            .replace("{pageNo}", paramsObj.pageNo)

+    getSlicingBusinessList (paramsObj,isSelect: boolean) {

+        let url = this.url.slicingBusinessList .replace("{pageNo}", paramsObj.pageNo)

             .replace("{pageSize}", paramsObj.pageSize);

-        return this.http.get<any>(url);

+        if(isSelect){

+            url = this.url.slicingBusinesQueryOfStatus.replace("{businessStatus}", paramsObj.businessStatus).replace("{pageNo}", paramsObj.pageNo)

+                .replace("{pageSize}", paramsObj.pageSize);

+        }

+        let params = new HttpParams({ fromObject: paramsObj });

+        return this.http.get<any>(url,{params});

     }

     changeActivateSlicingService(paramsObj, activate: boolean){

         let url = this.url.activateSlicingService.replace("{serviceId}", paramsObj.serviceId);

@@ -91,6 +95,15 @@ export class SlicingTaskServices {
         }

         return this.http.put<any>(url,paramsObj);

     }

+    terminateSlicingService(paramsObj){

+        const url = this.url.terminateSlicingService.replace('{serviceId}', paramsObj.serviceId);

+        return this.http.delete<any>(url);

+    }

+    getSlicingBusinessProgress(paramsObj) {

+        let params = new HttpParams({ fromObject: paramsObj });

+        let url = this.url.queryOperationProgress.replace("{serviceId}", paramsObj.serviceId);

+        return this.http.get<any>(url,{params});

+    }

 }

 

 

diff --git a/usecaseui-portal/src/app/mock/json/getSlicingBusinessProgress.json b/usecaseui-portal/src/app/mock/json/getSlicingBusinessProgress.json
new file mode 100644
index 00000000..b14111fe
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/getSlicingBusinessProgress.json
@@ -0,0 +1,10 @@
+{
+  "result_header": {
+    "result_code": "200",
+    "result_message": "5G slicing service operation progress."
+  },
+  "result_body": {
+    "operation_type": "activate",
+    "operation_progress": 99
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/json/slicing_business_activate.json b/usecaseui-portal/src/app/mock/json/slicing_business_activate.json
new file mode 100644
index 00000000..988577bf
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/slicing_business_activate.json
@@ -0,0 +1,9 @@
+{
+  "result_header": {
+    "result_code": "200",
+    "result_message": "5G slicing service has been activated."
+  },
+  "result_body": {
+    "operation_id": "123456"
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/json/slicing_business_list.json b/usecaseui-portal/src/app/mock/json/slicing_business_list.json
index 45fa0260..8291efbf 100644
--- a/usecaseui-portal/src/app/mock/json/slicing_business_list.json
+++ b/usecaseui-portal/src/app/mock/json/slicing_business_list.json
@@ -7,51 +7,6 @@
     "record_number": 2,
     "slicing_business_list": [
       {
-        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9269",
-        "service_instance_name": "slicing-01-eMBB",
-        "service_type": "eMMB",
-        "service_snssai": "1-010101",
-        "orchestration_status": "activated",
-        "last_operation_type": "activate",
-        "last_operation_progress": 10
-      },
-      {
-        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9261",
-        "service_instance_name": "slicing-01-eMBB",
-        "service_type": "eMMB",
-        "service_snssai": "1-010101",
-        "orchestration_status": "activated",
-        "last_operation_type": "activate",
-        "last_operation_progress": 20
-      },
-      {
-        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9262",
-        "service_instance_name": "slicing-01-eMBB",
-        "service_type": "eMMB",
-        "service_snssai": "1-010101",
-        "orchestration_status": "activated",
-        "last_operation_type": "activate",
-        "last_operation_progress": 30
-      },
-      {
-        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9263",
-        "service_instance_name": "slicing-01-eMBB",
-        "service_type": "eMMB",
-        "service_snssai": "1-010101",
-        "orchestration_status": "activated",
-        "last_operation_type": "activate",
-        "last_operation_progress": 50
-      },
-      {
-        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9264",
-        "service_instance_name": "slicing-01-eMBB",
-        "service_type": "eMMB",
-        "service_snssai": "1-010101",
-        "orchestration_status": "activated",
-        "last_operation_type": "activate",
-        "last_operation_progress": 70
-      },
-      {
         "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9265",
         "service_instance_name": "slicing-01-eMBB",
         "service_type": "eMMB",
@@ -79,15 +34,6 @@
         "last_operation_progress": 100
       },
       {
-        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9268",
-        "service_instance_name": "slicing-01-eMBB",
-        "service_type": "eMMB",
-        "service_snssai": "1-010101",
-        "orchestration_status": "activated",
-        "last_operation_type": "activate",
-        "last_operation_progress": 100
-      },
-      {
         "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9270",
         "service_instance_name": "slicing-01-eMBB",
         "service_type": "eMMB",
diff --git a/usecaseui-portal/src/app/mock/json/slicing_business_list_activated.json b/usecaseui-portal/src/app/mock/json/slicing_business_list_activated.json
new file mode 100644
index 00000000..bc3172af
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/slicing_business_list_activated.json
@@ -0,0 +1,38 @@
+{
+  "result_header": {
+    "result_code": "200",
+    "result_message": "5G slicing service instances query based on status result ."
+  },
+  "result_body": {
+    "record_number": 2,
+    "slicing_business_list": [
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9260",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 10
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9272",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 70
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9273",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 100
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js
index dbc9fec3..5bc81fbd 100644
--- a/usecaseui-portal/src/app/mock/routes.js
+++ b/usecaseui-portal/src/app/mock/routes.js
@@ -100,6 +100,11 @@ module.exports =
         "/uui-slicing/nsmf/resource/nssi/:environmentContext/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_subnet_context",
         ///////<-------------slicing_business--------->/////
         "/uui-slicing/nsmf/resource/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_business_list",
+        "/uui-slicing/nsmf/resource/:businessStatus/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_business_list_activated",
+        "/PUT/uui-slicing/nsmf/resource/:serviceId/activate": "/slicing_business_activate",
+        "/PUT/uui-slicing/nsmf/resource/:serviceId/deactivate": "/slicing_business_activate",
+        "/DELETE/uui-slicing/nsmf/resource/:serviceId": "/slicing_business_activate",
+        "/uui-slicing/nsmf/resource/:serviceId/progress":"/getSlicingBusinessProgress",
         ///////<-------------general interface--------->/////
         "/api/*": "/$1",
         "/*/*": "/$1_$2",
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
index fde155a5..07bdc07e 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
@@ -28,8 +28,8 @@
                 <th>Service_type</th>
                 <th>S-NSSAI</th>
                 <th>Orchestration_status</th>
-                <th>Aciton</th>
-                <th>Detail</th>
+                <th width="130px">Aciton</th>
+                <th width="100px">Detail</th>
             </tr>
             </thead>
             <tbody>
@@ -42,14 +42,14 @@
                     <td>
 
                         <span  class="marginLeft10">
-                                 {{ data.last_operation_progress!==100?data.last_operation_type+'&nbsp;&nbsp;&nbsp;'+data.last_operation_progress+'%':data.orchestration_status }}
+                                 {{ data.last_operation_progress !== 100?data.last_operation_type+'&nbsp;&nbsp;&nbsp;'+data.last_operation_progress+'%':data.orchestration_status }}
                         </span>
                         <nz-progress *ngIf="data.last_operation_progress !== 100"
                                      [nzPercent]="data.last_operation_progress"
                                      [nzShowInfo]="false" nzStatus="active"></nz-progress>
                     </td>
                     <td>
-                        <nz-switch [ngModel]="switchStatusAll[i]==='activated'?true:false"
+                        <nz-switch [ngModel]="data.orchestration_status==='activated'?true:false"
                                    [nzDisabled]="data.last_operation_progress !== 100"
                                    (ngModelChange)="switchChange(data,i)"
                         ></nz-switch>
@@ -57,6 +57,7 @@
                            nz-icon
                            nzType="poweroff"
                            nzTheme="outline"
+                           class="anticon anticon-poweroff"
                            (click)="terminate(data)"
                         ></i>
                     </td>
@@ -65,7 +66,7 @@
                            <!--class="anticon anticon-bars"-->
                            <!--(click)="showdetail(data)">-->
                         <!--</i>-->
-                        <i (click)="showdetail(data)" [ngClass]="{'cannotclick':data.last_operation_progress !== 100}">Detail</i>
+                        <a (click)="showdetail(data)" [ngClass]="{'cannotclick':data.last_operation_progress !== 100}">detail</a>
                     </td>
                 </tr>
             </ng-template>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less
index b95d55e0..e13747ee 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less
@@ -10,7 +10,8 @@ nz-select {
 i.anticon {
   cursor: pointer;
   font-size: 18px;
-  padding: 2px;
+  padding: 2px 15px;
+  vertical-align: inherit!important;
   &:hover{
     color: #147dc2;
   }
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 0397de9c..884a3be4 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,77 +20,159 @@ export class SlicingBusinessTableComponent implements OnInit {
         this.getBusinessList()
     }
 
-    selectedValue = null;
-    switchStatusAll: any[] = [];
+    selectedValue:string = BUSINESS_STATUS[0];
     listOfData: any[] = [];
     pageIndex: number = 1;
     pageSize: number = 10;
     total: number = 100;
     loading = false;
+    isSelect: boolean = false;
     statusOptions: any[] = BUSINESS_STATUS;
+    progressingTimer :any;
 
 
     getBusinessList (): void{
         this.loading = true;
+        this.isSelect = false;
         let paramsObj = {
             pageNo: this.pageIndex,
             pageSize: this.pageSize
         };
-        this.myhttp.getSlicingBusinessList(paramsObj).subscribe (res => {
+        if(this.selectedValue !== BUSINESS_STATUS[0]){
+            paramsObj["businessStatus"] = this.selectedValue;
+            this.isSelect = true;
+        }
+        this.myhttp.getSlicingBusinessList(paramsObj,this.isSelect).subscribe (res => {
             const { result_header: { result_code }, result_body: { slicing_business_list } } = res;
             if (+result_code === 200) {
-                this.listOfData = slicing_business_list;
                 this.total = slicing_business_list.length;
-                this.switchStatusAll = slicing_business_list.map((item)=>{
-                    return item.orchestration_status
-                });
                 this.loading = false;
+                this.listOfData = slicing_business_list.map((item)=>{
+                    if(item.last_operation_progress < 100){
+                        let updata = (prodata) => {
+                            item.last_operation_progress = prodata.operation_progress || item.last_operation_progress;
+                        };
+                        let obj = {
+                            serviceId: item.service_instance_id
+                        };
+                        this.queryProgress(obj, updata).then((res) => {
+                            item.last_operation_progress = 100;
+                            item.orchestration_status = item.last_operation_type === 'activate'?'activated':item.last_operation_type === 'deactivated'?'deactivated':'terminated';
+                        })
+                    }
+                    return item
+                });
             }
         })
     }
+    getListOfProcessingStatus(){
+        this.pageIndex = 1;
+        this.pageSize = 10;
+        this.getBusinessList();
+    }
     searchData(reset: boolean = false) {
         this.getBusinessList();
     }
-    switchChange(data,i){
-        console.log(data,i,"----- switchChange");
+    switchChange(slicing,i){
         this.modalService.confirm({
-            nzTitle: '<i>Do you Want to'+(data.orchestration_status === 'activated'?'deactivated':'activated')+ 'slicing business?</i>',
-            nzContent: '<b>service_instance_id:'+data.service_instance_id+'</b>',
+            nzTitle: '<i>Do you Want to'+(slicing.orchestration_status === 'activated'?'deactivated':'activated')+ 'slicing business?</i>',
+            nzContent: '<b>service_instance_id:'+slicing.service_instance_id+'</b>',
             nzOnOk: () => {
                 let paramsObj = {
-                    serviceId:data.service_instance_id
+                    serviceId:slicing.service_instance_id
                 };
-                if(data.orchestration_status === 'activated'){
-                    this.myhttp.changeActivateSlicingService(paramsObj,false).subscribe (res => {
-                        const { result_header: { result_code }, result_body: { operation_id } } = res;
-                        if (+result_code === 200) {
-                            this.switchStatusAll[i] = 'deactivated';
-                            console.log(operation_id,"operation_id")
-                        }
-                    })
+                if(slicing.orchestration_status === 'activated'){
+                    this.changeActivate(paramsObj,false,slicing,"deactivate","deactivated")
                 }else {
-                    this.myhttp.changeActivateSlicingService(paramsObj,true).subscribe (res => {
-                        const { result_header: { result_code, result_message }} = res;
-                        if (+result_code === 200) {
-                            this.switchStatusAll[i] = 'activated';
-                            console.log(result_message,"result_message")
-                        }
-                    })
+                    this.changeActivate(paramsObj,true,slicing,"activate","activated");
                 }
             },
             nzCancelText: 'No',
             nzOnCancel: () => {
-                this.switchStatusAll[i] = data.orchestration_status
+                let singleSlicing = Object.assign({},this.listOfData[i]);
+                this.listOfData[i] = singleSlicing;
+                this.listOfData = [...this.listOfData];
             }
         });
     }
-    terminate(data){
-
+    changeActivate(paramsObj,isActivate,slicing,activateValue,finished){
+        this.myhttp.changeActivateSlicingService(paramsObj,isActivate).subscribe (res => {
+            const { result_header: { result_code, result_message }, result_body: { operation_id } } = res;
+            if (+result_code === 200) {
+                slicing.last_operation_progress = 0;
+                slicing.orchestration_status = activateValue;
+                console.log(operation_id,"operation_id");
+                let obj = {
+                    serviceId: slicing.service_instance_id
+                }
+                let updata = (prodata) => {
+                    slicing.last_operation_progress = prodata.progress;
+                    slicing.orchestration_status = prodata.operation_type;
+                    this.queryProgress(obj, updata).then(() => {
+                        slicing.last_operation_progress = 100;
+                        slicing.orchestration_status = finished;
+                    })
+                }
+            }else {
+                console.error(result_message)
+            }
+        })
+    }
+    terminate(slicing){
+        this.modalService.confirm({
+            nzTitle: 'Do you Want to Terminate slicing business?',
+            nzContent: '<b>service_instance_id:&nbsp;</b>'+slicing.service_instance_id,
+            nzOnOk: () => {
+                let paramsObj = {
+                    serviceId:slicing.service_instance_id
+                };
+                this.myhttp.terminateSlicingService(paramsObj).subscribe (res => {
+                    const { result_header: { result_code, result_message }, result_body: { operation_id } } = res;
+                    if (+result_code === 200) {
+                        slicing.last_operation_progress = 0;
+                        slicing.orchestration_status = 'deactivate';
+                        console.log(operation_id,"operation_id");
+                        let obj = {
+                            serviceId: slicing.service_instance_id
+                        };
+                        let updata = (prodata) => {
+                            slicing.last_operation_progress = prodata.progress;
+                            slicing.orchestration_status = prodata.operation_type;
+                            this.queryProgress(obj, updata).then(() => {
+                                slicing.last_operation_progress = 100;
+                                slicing.orchestration_status = "terminated";
+                            })
+                        }
+                    }else {
+                        console.error(result_message)
+                    }
+                })
+            },
+            nzCancelText: 'No',
+            nzOnCancel: () => {
+                console.info('Cancel termination')
+            }
+        });
     }
     showdetail(data){
 
     }
-    getListOfProcessingStatus(){
-
+    queryProgress(obj, callback) {
+        return new Promise( res => {
+            let requery = () => {
+                this.myhttp.getSlicingBusinessProgress(obj)
+                    .subscribe((data) => {
+                        if (data.result_body.operation_progress < 100) {
+                            callback(data.result_body);
+                            this.progressingTimer = setTimeout(()=>{
+                                requery();
+                            },5000);
+                        } else {
+                            res(data.result_body);
+                        }
+                    })
+            };
+            requery();
+        })
     }
 }