From 67e32a3411851851185bdc22320687c317ea35bf Mon Sep 17 00:00:00 2001 From: cyuamber Date: Wed, 5 Feb 2020 19:57:54 +0800 Subject: feat: add CSMF slice task management interface page code Change-Id: I88acbf7d23aed9910f4dfb3ee6e79aa4b51d9ba6 Issue-ID: USECASEUI-368 Signed-off-by: cyuamber --- .../src/app/core/services/slicingTaskServices.ts | 9 +++ .../app/mock/json/csmf_slicing_businessData.json | 91 ++++++++++++++++++++++ usecaseui-portal/src/app/mock/routes.js | 4 + usecaseui-portal/src/app/mock/server.js | 1 + ...csmf-slicing-business-management.component.html | 72 ++++++++++++++++- ...csmf-slicing-business-management.component.less | 30 +++++++ .../csmf-slicing-business-management.component.ts | 60 +++++++++++++- .../slicing-management.component.html | 7 +- 8 files changed, 267 insertions(+), 7 deletions(-) create mode 100644 usecaseui-portal/src/app/mock/json/csmf_slicing_businessData.json diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts index 686673d6..7902f0d1 100644 --- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts +++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts @@ -47,6 +47,8 @@ export class SlicingTaskServices { slicingNssiList: this.baseUrl + "/resource/nssi/instances/pageNo/{pageNo}/pageSize/{pageSize}", slicingNssiQueryOfStatus: this.baseUrl + "/resource/nssi/instanceStatus/{instanceStatus}/instances/pageNo/{pageNo}/pageSize/{pageSize}", slicingNssiDetail: this.baseUrl + "/resource/nssi/{nssiId}/details", + //csmf + csmfSlicingBusinessList:"/api/usecaseui/csmf/5gSlicing/services/status/{status}/pageNo/{pageNo}/pageSize/{pageSize}", //monitor 5G fetchTraffic: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/trafficData", fetchOnlineusers: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/onlineUsers", @@ -167,6 +169,13 @@ export class SlicingTaskServices { let url = this.url.slicingNssiDetail.replace("{nssiId}", nssiId); return this.http.get(url); } + // Get CSMF slicing business list + getCSMFSlicingBusinessList(paramsObj) { + let url = this.url.csmfSlicingBusinessList.replace("{status}", paramsObj.status).replace("{pageNo}", paramsObj.pageNo) + .replace("{pageSize}", paramsObj.pageSize); + return this.http.get(url); + } + //monitor 5G getFetchTraffic(service_list, time) { let url = this.url.fetchTraffic.replace("{queryTimestamp}", time); diff --git a/usecaseui-portal/src/app/mock/json/csmf_slicing_businessData.json b/usecaseui-portal/src/app/mock/json/csmf_slicing_businessData.json new file mode 100644 index 00000000..4ec93450 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/csmf_slicing_businessData.json @@ -0,0 +1,91 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "Query all slicing services processing succeeded." + }, + "result_body": { + "record_number": 8, + "slicing_service_list": [ + { + "service_id": "5G-777", + "service_name": "eMBB_e2e_Slice_Service_5GCustomer", + "service_type": "embb", + "service_snssai": "01-010101", + "service_status": "activated", + "last_operation_id": "8401c767-4fe9-43c3-82b5-707c1aaf5caf", + "last_operation_type": "activation", + "last_operation_process": 100 + }, + { + "service_id": "8c681037-75c9-444c-a665-34a66372e13e", + "service_name": "test_0203", + "service_type": "embb", + "service_snssai": "01-1370889D", + "service_status": "deactivated", + "last_operation_id": null, + "last_operation_type": null, + "last_operation_process": null + }, + { + "service_id": "dfa76a2f-6416-4070-9024-355d0d210234", + "service_name": "CSMFService", + "service_type": "embb", + "service_snssai": "01-485C16B6", + "service_status": "deactivated", + "last_operation_id": "06258836-8152-43ad-9c8e-e2a1783b1996", + "last_operation_type": "activation", + "last_operation_process": 0 + }, + { + "service_id": "1e6a6a4b-8efb-4211-b583-b2e8567c5950", + "service_name": "CSMFService", + "service_type": "embb", + "service_snssai": "01-6C572676", + "service_status": "deactivated", + "last_operation_id": null, + "last_operation_type": null, + "last_operation_process": null + }, + { + "service_id": "9941305e-311f-4a88-bd9e-431252a46337", + "service_name": "CSMFService", + "service_type": "embb", + "service_snssai": "01-D38E2F0", + "service_status": "deactivated", + "last_operation_id": null, + "last_operation_type": null, + "last_operation_process": null + }, + { + "service_id": "4876265d-e4bb-4240-bcda-7b4b00481e4a", + "service_name": "test_0205", + "service_type": "embb", + "service_snssai": "01-6A345C48", + "service_status": "deactivated", + "last_operation_id": null, + "last_operation_type": null, + "last_operation_process": null + }, + { + "service_id": "6c52086a-e9b6-4f31-bc7a-7b34d66c69c0", + "service_name": "test_0204", + "service_type": "embb", + "service_snssai": "01-774F54FC", + "service_status": "deactivated", + "last_operation_id": null, + "last_operation_type": null, + "last_operation_process": null + }, + { + "service_id": "1cab507a-3422-46f8-8520-9b46c95b7f9d", + "service_name": "aaa", + "service_type": "embb", + "service_snssai": "01-44AA4085", + "service_status": "deactivated", + "last_operation_id": "012c888a-a46f-4ebc-bcde-7f7c769769b7", + "last_operation_type": "DELETE", + "last_operation_process": 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 fdd29ff3..420f017c 100644 --- a/usecaseui-portal/src/app/mock/routes.js +++ b/usecaseui-portal/src/app/mock/routes.js @@ -20,6 +20,8 @@ module.exports = ///////<-------------api proxy--------->///// "/usecaseui-server/v1/*": "/$1", "/usecaseui-server/v1/*?:param": "/$1", + "/usecaseui/csmf/*": "/$1", + "/usecaseui/csmf/*?:param": "/$1", /////////////// //text interface @@ -117,6 +119,8 @@ module.exports = "/uui-slicing/nsmf/resource/nssi/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nssi_list", "/uui-slicing/nsmf/resource/nssi/instanceStatus/:instanceStatus/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nssi_list_activated", "/uui-slicing/nsmf/resource/nssi/:nssiId/details":"/getSlicingNssiDetail", + ///////<-------------CSMF slicing_business--------->///// + "/5gSlicing/services/status/:status/pageNo/:pageNo/pageSize/:pageSize": "/csmf_slicing_businessData", ///////<-------------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 930f500b..3c49777d 100644 --- a/usecaseui-portal/src/app/mock/server.js +++ b/usecaseui-portal/src/app/mock/server.js @@ -20,6 +20,7 @@ const middlewares = jsonServer.defaults(); const customersRouters = require('./routes'); const baseUrl = "/usecaseui-server/v1"; const nsmfBaseUrl = "/uui-slicing/nsmf"; +const csmfBaseUrl = "/usecaseui/csmf"; // Set default middlewares (logger, static, cors and no-cache) server.use(middlewares); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html index aaf5d959..c3f2d631 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html @@ -1,3 +1,69 @@ -

- csmf-slicing-business-management works! -

+
+
+
+ Status : + + + +
+
+
+ + + + No + Service Instance Id + Service Instance Name + Service Type + S-NSSAI + Status + Aciton + + + + + + {{i+1}} + {{ data.service_id }} + {{ data.service_name }} + {{ data.service_type?data.service_type:'--' }} + {{ data.service_snssai }} + + + + {{data.last_operation_process+'%'}} + +
+ {{data.service_status}} + +
+ + +
+ + + +
+
+ + + +
+ + + + + +
+
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less index e69de29b..b813e966 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less @@ -0,0 +1,30 @@ +nz-select { + width: 200px; +} +.task_status{ + margin-bottom: 20px; + span{ + margin-right: 5%; + } +} +.action-icon{ + display: inline-block; + vertical-align: top; +} +i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px 15px; + vertical-align: inherit!important; + &:hover{ + color: #147dc2; + } +} +.cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} +.slicing-resource-table{ + margin: 0 0 0 60px!important; +} \ No newline at end of file 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 dddbacf7..8b844f5f 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,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; - +import {BUSINESS_STATUS} from "../../../../../constants/constants"; +import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices'; @Component({ selector: 'app-csmf-slicing-business-management', templateUrl: './csmf-slicing-business-management.component.html', @@ -7,9 +8,62 @@ import { Component, OnInit } from '@angular/core'; }) export class CsmfSlicingBusinessManagementComponent implements OnInit { - constructor() { } - + constructor( + private myhttp: SlicingTaskServices + ) { + } ngOnInit() { + this.getCSMFBusinessList() } + 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; + terminateStart: boolean = false; + + getCSMFBusinessList(){ + this.loading = true; + this.listOfData = []; + let paramsObj = { + 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; + this.loading = false; + if (+result_code === 200) { + this.total = record_number; + 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) { + + if (item.last_operation_type === 'DELETE') this.terminateStart = true; + } + return item + }); + } + } + }) + } + + getListOfProcessingStatus() { + this.pageIndex = 1; + this.pageSize = 10; + this.getCSMFBusinessList(); + } + searchData(reset: boolean = false) { + this.getCSMFBusinessList(); + } + switchChange(slicing, i) { + console.log(slicing,i,"slicing") + } + terminate(slicing) { + console.log(slicing,"slicing") + } } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html index 2c8db58d..965dca6a 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html @@ -1,4 +1,4 @@ - + + + + \ No newline at end of file -- cgit 1.2.3-korg