feat:Add progress interface query of slicing business page

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

3 files changed, 122 insertions, 38 deletions

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