feat: add Activate & Terminate & progress of CSMF Slicing page

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

7 files changed, 229 insertions, 17 deletions

diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
index 7902f0d1..1c348a7f 100644
--- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
+++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
@@ -49,6 +49,10 @@ export class SlicingTaskServices {
         slicingNssiDetail: this.baseUrl + "/resource/nssi/{nssiId}/details",

         //csmf

         csmfSlicingBusinessList:"/api/usecaseui/csmf/5gSlicing/services/status/{status}/pageNo/{pageNo}/pageSize/{pageSize}",

+        csmfActivate:"/api/usecaseui/csmf/5gSlicing/service/{serviceId}/activate",

+        csmfDeactivate:"/api/usecaseui/csmf/5gSlicing/service/{serviceId}/deactivate",

+        csmfTerminate:"/api/usecaseui/csmf/5gSlicing/service/{serviceId}",

+        csmfGetProgress:"/api/usecaseui/csmf/5gSlicing/service/{serviceId}/progress",

         //monitor 5G

         fetchTraffic: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/trafficData",

         fetchOnlineusers: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/onlineUsers",

@@ -175,6 +179,24 @@ export class SlicingTaskServices {
             .replace("{pageSize}", paramsObj.pageSize);

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

     }

+    // change CSMF slicing business activate status

+    csmfChangeActivate(paramsObj, activate: boolean) {

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

+        if (!activate) {

+            url = this.url.csmfDeactivate.replace("{serviceId}", paramsObj.serviceId)

+        }

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

+    }

+    // terminate CSMF slicing business

+    csmfTerminate(paramsObj) {

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

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

+    }

+    // query CSMF slicing business progress

+    csmfSlicingProgress(paramsObj) {

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

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

+    }

 

     //monitor 5G

     getFetchTraffic(service_list, time) {

diff --git a/usecaseui-portal/src/app/mock/json/csmfActivate.json b/usecaseui-portal/src/app/mock/json/csmfActivate.json
new file mode 100644
index 00000000..7b9810a4
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/csmfActivate.json
@@ -0,0 +1,9 @@
+{
+  "result_header": {
+    "result_code": "200",
+    "result_message": "Activate slicing service processing succeeded."
+  },
+  "result_body": {
+    "operation_id": "3b74758c-4a23-4c44-88bf-e5ed3baa395f"
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/json/csmfSlicingProgress.json b/usecaseui-portal/src/app/mock/json/csmfSlicingProgress.json
new file mode 100644
index 00000000..d9370a42
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/csmfSlicingProgress.json
@@ -0,0 +1,11 @@
+{
+  "result_header": {
+    "result_code": "200",
+    "result_message": "Query operation process processing succeeded."
+  },
+  "result_body": {
+    "operation_id": "3b74758c-4a23-4c44-88bf-e5ed3baa395f",
+    "operation_type": "activation",
+    "operation_progress": 66
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/json/csmfTerminate.json b/usecaseui-portal/src/app/mock/json/csmfTerminate.json
new file mode 100644
index 00000000..5c6d3e2a
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/csmfTerminate.json
@@ -0,0 +1,9 @@
+{
+  "result_header": {
+    "result_code": "200",
+    "result_message": "Terminate slicing service processing succeeded."
+  },
+  "result_body": {
+    "operation_id": "e227846c-daca-487a-9750-5d0ddb8a95d0"
+  }
+}
\ 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 420f017c..c454d5ba 100644
--- a/usecaseui-portal/src/app/mock/routes.js
+++ b/usecaseui-portal/src/app/mock/routes.js
@@ -121,6 +121,9 @@ module.exports =
         "/uui-slicing/nsmf/resource/nssi/:nssiId/details":"/getSlicingNssiDetail",
         ///////<-------------CSMF slicing_business--------->/////
         "/5gSlicing/services/status/:status/pageNo/:pageNo/pageSize/:pageSize": "/csmf_slicing_businessData",
+        "/PUT/usecaseui/csmf/5gSlicing/service/:serviceId/activate": "/csmfActivate",
+        "/DELETE/usecaseui/csmf/5gSlicing/service/:serviceId": "/csmfTerminate",
+        "/5gSlicing/service/:serviceId/progress": "/csmfSlicingProgress",
         ///////<-------------monitor 5G--------->/////
         "/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/trafficData": "/fetchTrafficData",
         "/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/onlineUsers": "/fetchOnlineusersData",
diff --git a/usecaseui-portal/src/app/mock/server.js b/usecaseui-portal/src/app/mock/server.js
index 3c49777d..6dc00815 100644
--- a/usecaseui-portal/src/app/mock/server.js
+++ b/usecaseui-portal/src/app/mock/server.js
@@ -119,6 +119,21 @@ server.delete(`${nsmfBaseUrl}/*`, (req, res, next) => {
     req.url = '/DELETE'+req.url;
     next();
 })
+server.put(`${csmfBaseUrl}/*`, (req, res, next) => {
+    req.method = 'GET';
+    req.url = '/PUT'+req.url;
+    next();
+})
+server.post(`${csmfBaseUrl}/*`, (req, res, next) => {
+    req.method = 'GET';
+    req.url = '/POST'+req.url;
+    next();
+})
+server.delete(`${csmfBaseUrl}/*`, (req, res, next) => {
+    req.method = 'GET';
+    req.url = '/DELETE'+req.url;
+    next();
+})
 
 server.listen(3002, () => {
     console.log('Mock Server is successfully running on port 3002 😁')
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
index 8b844f5f..e1b37054 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
@@ -1,48 +1,68 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {BUSINESS_STATUS} from "../../../../../constants/constants";
-import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices';
+import {SlicingTaskServices} from '.././../../../core/services/slicingTaskServices';
+import { NzModalService, NzMessageService } from 'ng-zorro-antd';
 @Component({
-  selector: 'app-csmf-slicing-business-management',
-  templateUrl: './csmf-slicing-business-management.component.html',
-  styleUrls: ['./csmf-slicing-business-management.component.less']
+    selector: 'app-csmf-slicing-business-management',
+    templateUrl: './csmf-slicing-business-management.component.html',
+    styleUrls: ['./csmf-slicing-business-management.component.less']
 })
 export class CsmfSlicingBusinessManagementComponent implements OnInit {
 
     constructor(
-        private myhttp: SlicingTaskServices
+        private myhttp: SlicingTaskServices,
+        private modalService: NzModalService,
+        private message: NzMessageService
     ) {
     }
-  ngOnInit() {
-      this.getCSMFBusinessList()
-  }
+
+    ngOnInit() {
+        this.getCSMFBusinessList()
+    }
+    ngOnDestroy() {
+        this.progressingTimer.forEach((item) => {
+            clearInterval(item.timer);
+        });
+        this.progressingTimer = [];
+    }
+
     selectedValue: string = BUSINESS_STATUS[0];
     listOfData: any[] = [];
     pageIndex: number = 1;
     pageSize: number = 10;
     total: number = 0;
     loading = false;
-    isSelect: boolean = false;
     statusOptions: any[] = BUSINESS_STATUS;
+    progressingTimer: any[] = [];
     terminateStart: boolean = false;
 
-    getCSMFBusinessList(){
+    getCSMFBusinessList() {
         this.loading = true;
         this.listOfData = [];
         let paramsObj = {
-            status:this.selectedValue,
+            status: this.selectedValue,
             pageNo: this.pageIndex,
             pageSize: this.pageSize
         };
         this.myhttp.getCSMFSlicingBusinessList(paramsObj).subscribe(res => {
-            const { result_header: { result_code }, result_body: { slicing_service_list, record_number } } = res;
+            const {result_header: {result_code}, result_body: {slicing_service_list, record_number}} = res;
             this.loading = false;
             if (+result_code === 200) {
                 this.total = record_number;
-                if(slicing_service_list !==null && slicing_service_list.length >0){
+                if (slicing_service_list !== null && slicing_service_list.length > 0) {
                     this.listOfData = slicing_service_list.map((item, index) => {
                         if (item.last_operation_process && item.last_operation_type && Number(item.last_operation_process) < 100) {
-
+                            let updata = (prodata: { operation_progress: string }) => {
+                                item.last_operation_process = prodata.operation_progress || item.last_operation_process;
+                            };
+                            let obj = {
+                                serviceId: item.service_instance_id
+                            };
                             if (item.last_operation_type === 'DELETE') this.terminateStart = true;
+                            this.queryProgress(obj, index, updata).then((res) => {
+                                item.last_operation_process = '100';
+                                this.getCSMFBusinessList();
+                            })
                         }
                         return item
                     });
@@ -54,16 +74,139 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
     getListOfProcessingStatus() {
         this.pageIndex = 1;
         this.pageSize = 10;
+        this.progressingTimer.forEach((item) => {
+            clearInterval(item.timer);
+        });
+        this.progressingTimer = [];
         this.getCSMFBusinessList();
     }
+
     searchData(reset: boolean = false) {
+        this.progressingTimer.forEach((item) => {
+            clearInterval(item.timer);
+        });
+        this.progressingTimer = [];
         this.getCSMFBusinessList();
     }
 
     switchChange(slicing, i) {
-      console.log(slicing,i,"slicing")
+        console.log(slicing, i, "slicing");
+        this.modalService.confirm({
+            nzTitle: '<i>Are you sure you want to perform this task?</i>',
+            nzContent: '<b>Name:' + slicing.service_name + '</b>',
+            nzOnOk: () => {
+                let paramsObj = {
+                    serviceId: slicing.service_id
+                };
+                if (slicing.service_status === 'activated') {
+                    this.changeActivate(paramsObj, false, slicing, "deactivate", "deactivated", i)
+                } else {
+                    this.changeActivate(paramsObj, true, slicing, "activate", "activated", i);
+                }
+            },
+            nzCancelText: 'No',
+            nzOnCancel: () => {
+                let singleSlicing = Object.assign({}, this.listOfData[i]);
+                this.listOfData[i] = singleSlicing;
+                this.listOfData = [...this.listOfData];
+            }
+        });
+    }
+    changeActivate(paramsObj, isActivate, slicing, activateValue, finished, index) {
+        this.loading = true;
+        this.myhttp.csmfChangeActivate(paramsObj, isActivate).subscribe(res => {
+            const { result_header: { result_code, result_message }, result_body: { operation_id } } = res;
+            this.loading = false;
+            if (+result_code === 200) {
+                this.getCSMFBusinessList();
+            } else {
+                let singleSlicing = Object.assign({}, this.listOfData[index]);
+                this.listOfData[index] = singleSlicing;
+                this.listOfData = [...this.listOfData];
+                this.getCSMFBusinessList();
+            }
+            this.getCSMFBusinessList();
+        }, () => {
+            this.loading = false;
+            let singleSlicing = Object.assign({}, this.listOfData[index]);
+            this.listOfData[index] = singleSlicing;
+            this.listOfData = [...this.listOfData];
+            this.getCSMFBusinessList();
+        })
     }
+
     terminate(slicing) {
-        console.log(slicing,"slicing")
+        console.log(slicing, "slicing");
+        this.modalService.confirm({
+            nzTitle: 'Are you sure you want to terminate this task?',
+            nzContent: '<b>Name:&nbsp;</b>' + slicing.service_name,
+            nzOnOk: () => {
+                let paramsObj = { serviceId: slicing.service_id };
+                this.terminateStart = true;
+                this.loading = true;
+                this.myhttp.csmfTerminate(paramsObj).subscribe(res => {
+                    const { result_header: { result_code, result_message }, result_body: { operation_id } } = res;
+                    this.loading = false;
+                    if (+result_code === 200) {
+                        this.getCSMFBusinessList();
+                    } else {
+                        this.terminateStart = false;
+                    }
+                }, () => {
+                    this.loading = false;
+                    this.terminateStart = false;
+                })
+            },
+            nzCancelText: 'No',
+            nzOnCancel: () => {
+                console.info('Cancel termination')
+            }
+        });
+    }
+    queryProgress(obj, index, callback) {
+        return new Promise(res => {
+            let requery = () => {
+                this.myhttp.csmfSlicingProgress(obj)
+                    .subscribe((data) => {
+                        const { result_header: { result_code, result_message }, result_body: { operation_id } } = data;
+                        if (+result_code === 200) {
+                            if (data.result_body.operation_progress && Number(data.result_body.operation_progress) < 100) {
+                                callback(data.result_body);
+                                let progressSetTimeOut = setTimeout(() => {
+                                    requery();
+                                }, 5000);
+                                this.progressingTimer.push({
+                                    id: obj.serviceId,
+                                    timer: progressSetTimeOut
+                                })
+                            } else {
+                                this.progressingTimer.forEach((item) => {
+                                    if (item.serviceId === obj.serviceId) {
+                                        clearInterval(item.timer);
+                                    }
+                                });
+                                res(data.result_body);
+                            }
+                        } else {
+                            this.progressingTimer.forEach((item) => {
+                                if (item.serviceId === obj.serviceId) {
+                                    clearInterval(item.timer);
+                                }
+                            });
+                            this.getCSMFBusinessList();
+                            this.message.error(result_message);
+                        }
+                    }, (err) => {
+                        this.progressingTimer.forEach((item) => {
+                            if (item.serviceId === obj.serviceId) {
+                                clearInterval(item.timer);
+                            }
+                        });
+                        this.getCSMFBusinessList();
+                        this.message.error(err);
+                    })
+            };
+            requery();
+        })
     }
 }