summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2020-02-06 21:37:44 +0800
committercyuamber <xuranyjy@chinamobile.com>2020-02-06 21:37:54 +0800
commit2d44bd74a9f3f621532542775ba42c3149e54101 (patch)
tree7f0bb6120303c969c08ad735749e890616231de7 /usecaseui-portal
parent67e32a3411851851185bdc22320687c317ea35bf (diff)
feat: add Activate & Terminate & progress of CSMF Slicing page
Change-Id: I2f0db61addd34cd90978b5f9e41793b1d1b4f63e Issue-ID: USECASEUI-368 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal')
-rw-r--r--usecaseui-portal/src/app/core/services/slicingTaskServices.ts22
-rw-r--r--usecaseui-portal/src/app/mock/json/csmfActivate.json9
-rw-r--r--usecaseui-portal/src/app/mock/json/csmfSlicingProgress.json11
-rw-r--r--usecaseui-portal/src/app/mock/json/csmfTerminate.json9
-rw-r--r--usecaseui-portal/src/app/mock/routes.js3
-rw-r--r--usecaseui-portal/src/app/mock/server.js15
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts177
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();
+ })
}
}