From 2d44bd74a9f3f621532542775ba42c3149e54101 Mon Sep 17 00:00:00 2001 From: cyuamber Date: Thu, 6 Feb 2020 21:37:44 +0800 Subject: feat: add Activate & Terminate & progress of CSMF Slicing page Change-Id: I2f0db61addd34cd90978b5f9e41793b1d1b4f63e Issue-ID: USECASEUI-368 Signed-off-by: cyuamber --- .../src/app/core/services/slicingTaskServices.ts | 22 +++ .../src/app/mock/json/csmfActivate.json | 9 ++ .../src/app/mock/json/csmfSlicingProgress.json | 11 ++ .../src/app/mock/json/csmfTerminate.json | 9 ++ usecaseui-portal/src/app/mock/routes.js | 3 + usecaseui-portal/src/app/mock/server.js | 15 ++ .../csmf-slicing-business-management.component.ts | 177 +++++++++++++++++++-- 7 files changed, 229 insertions(+), 17 deletions(-) create mode 100644 usecaseui-portal/src/app/mock/json/csmfActivate.json create mode 100644 usecaseui-portal/src/app/mock/json/csmfSlicingProgress.json create mode 100644 usecaseui-portal/src/app/mock/json/csmfTerminate.json (limited to 'usecaseui-portal') 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(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(url, paramsObj); + } + // terminate CSMF slicing business + csmfTerminate(paramsObj) { + const url = this.url.csmfTerminate.replace('{serviceId}', paramsObj.serviceId); + return this.http.delete(url); + } + // query CSMF slicing business progress + csmfSlicingProgress(paramsObj) { + let url = this.url.csmfGetProgress.replace("{serviceId}", paramsObj.serviceId); + return this.http.get(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: 'Are you sure you want to perform this task?', + nzContent: 'Name:' + slicing.service_name + '', + 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: 'Name: ' + 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(); + }) } } -- cgit 1.2.3-korg