From 3fcc20be1927fdd4d20e9c687ac8f99d0c1efc9b Mon Sep 17 00:00:00 2001 From: deepikasatheesh Date: Tue, 30 Aug 2022 09:23:47 +0000 Subject: Additional KPIs in the slicing monitor screen Issue-ID: USECASEUI-715 Change-Id: I3e18f661d1b80c3bbd6d4872a787cb7b83f75441 Signed-off-by: deepikasatheesh --- usecaseui-portal/package-lock.json | 8 + usecaseui-portal/package.json | 1 + usecaseui-portal/src/app/app.module.ts | 2 + .../src/app/core/services/slicingTaskServices.ts | 647 +++++++++++---------- .../app/mock/json/fetchPDUSessionEstSRData.json | 49 ++ usecaseui-portal/src/app/mock/routes.js | 2 + .../fcaps/monitor-5g/monitor-5g.component.html | 36 +- .../views/fcaps/monitor-5g/monitor-5g.component.ts | 106 +++- 8 files changed, 524 insertions(+), 327 deletions(-) create mode 100644 usecaseui-portal/src/app/mock/json/fetchPDUSessionEstSRData.json diff --git a/usecaseui-portal/package-lock.json b/usecaseui-portal/package-lock.json index 3cdd1bc9..384fc12d 100644 --- a/usecaseui-portal/package-lock.json +++ b/usecaseui-portal/package-lock.json @@ -7764,6 +7764,14 @@ "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, + "ng-multiselect-dropdown": { + "version": "0.2.14", + "resolved": "https://registry.npmjs.org/ng-multiselect-dropdown/-/ng-multiselect-dropdown-0.2.14.tgz", + "integrity": "sha512-S+dPT/Xskh5fJVQMAb0qUVSwoE+VJ8C9XUDe6C4/3/Cd43o2F3SHHHOXfOhcQfqkZYkGeJOmzRfc57aOohr4dA==", + "requires": { + "tslib": "1.14.1" + } + }, "ng-zorro-antd": { "version": "0.7.1", "resolved": "https://registry.npm.taobao.org/ng-zorro-antd/download/ng-zorro-antd-0.7.1.tgz", diff --git a/usecaseui-portal/package.json b/usecaseui-portal/package.json index 27dda82d..4149df61 100644 --- a/usecaseui-portal/package.json +++ b/usecaseui-portal/package.json @@ -29,6 +29,7 @@ "@ngx-translate/core": "^9.1.1", "@ngx-translate/http-loader": "^2.0.1", "@types/resize-observer-browser": "^0.1.6", + "ng-multiselect-dropdown": "^0.2.14", "axios": "^0.19.0", "core-js": "^2.4.1", "d3": "^3.5.17", diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index 3e0c46e9..69839d2c 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -107,6 +107,7 @@ import { ManageServiceComponent } from "./views/services/sotn-management/manage- import { MonitorServiceComponent } from "./views/services/sotn-management/monitor-service/monitor-service.component"; import { OrderServiceComponent } from "./views/services/sotn-management/order-service/order-service.component"; import { SotnManagementComponent } from "./views/services/sotn-management/sotn-management.component"; +import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json"); @@ -211,6 +212,7 @@ registerLocaleData(en); FormsModule, ReactiveFormsModule, HttpClientModule, + NgMultiSelectDropDownModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts index 292d9bdd..cccf7e86 100644 --- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts +++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts @@ -1,320 +1,327 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { - HttpClient -} from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Http } from "../../shared/utils/http"; -@Injectable() -export class SlicingTaskServices { - constructor(private http: HttpClient, private Http: Http) {} - baseUrl: string = "/api/usecaseui-server/v1/uui-slicing/nsmf"; - url = { - slicingTaskList: - this.baseUrl + "/task/business/pageNo/{pageNo}/pageSize/{pageSize}", - taskProcessingStatus: - this.baseUrl + - "/task/{processingStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}", - auditInfo: this.baseUrl + "/task/{taskId}/auditInfo", - slicingInstance: - this.baseUrl + - "/resource/nsi/instances/pageNo/{pageNo}/pageSize/{pageSize}", - slicingSubnetInstance: - this.baseUrl + "/resource/nsi/{nsiId}/nssiInstances", - subnetInContext: - this.baseUrl + - "/resource/nssi/environmentContext/{environmentContext}/instances/pageNo/{pageNo}/pageSize/{pageSize}", - submitSlicing: this.baseUrl + "/task/auditInfo", - slicingBasicInfo: this.baseUrl + "/task/{taskId}/taskCreationInfo", - slicingCreateProgress: - this.baseUrl + "/task/{taskId}/taskCreationProgress", - //slicing-business-management - slicingBusinessList: - this.baseUrl + - "/resource/business/pageNo/{pageNo}/pageSize/{pageSize}", - slicingBusinesQueryOfStatus: - this.baseUrl + - "/resource/{businessStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}", - activateSlicingService: this.baseUrl + "/resource/{serviceId}/activate", - deactivateSlicingService: - this.baseUrl + "/resource/{serviceId}/deactivate", - terminateSlicingService: this.baseUrl + "/resource/{serviceId}", - queryOperationProgress: this.baseUrl + "/resource/{serviceId}/progress", - slicingBusinessDetail: - this.baseUrl + "/resource/business/{businessId}/details", - //slicing-nsi-management - slicingNsiList: - this.baseUrl + - "/resource/nsi/instances/pageNo/{pageNo}/pageSize/{pageSize}", - slicingNsiQueryOfStatus: - this.baseUrl + - "/resource/nsi/{instanceStatus}/instances/pageNo/{pageNo}/pageSize/{pageSize}", - slicingNsiDetail: this.baseUrl + "/resource/nsi/{nsiId}/details", - //slicing-nssi-management - 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-server/v1/uui-slicing/csmf/5gSlicing/orders/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", - csmfPurchase: "/api/usecaseui-server/v1/uui-slicing/csmf/5gSlicing", - csmfPurchaseWithContent: '/api/usecaseui-server/v1/intent/csmf/5gSlicing', - //monitor 5G - fetchTraffic: - this.baseUrl + - "/monitoring/queryTimestamp/{queryTimestamp}/trafficData", - fetchOnlineusers: - this.baseUrl + - "/monitoring/queryTimestamp/{queryTimestamp}/onlineUsers", - fetchBandwidth: - this.baseUrl + - "/monitoring/queryTimestamp/{queryTimestamp}/bandwidth", - getConnectionLinkTable: - "/api/usecaseui-server/v1/uui-slicing/nsmf/task/connectionLinks/pageNo/{pageNo}/pageSize/{pageSize}", // :todo - }; - - // Get slicing order task list - getSlicingTaskList(pageNo: string, pageSize: string, failedCallback?: any) { - const url = this.url.slicingTaskList - .replace("{pageNo}", pageNo) - .replace("{pageSize}", pageSize); - return this.Http.httpAxios("get", url, null, failedCallback); - } - // Get list based on task processing status - getTaskProcessingStatus( - processingStatus: string, - pageNo: string, - pageSize: string, - failedCallback?: any - ) { - const url = this.url.taskProcessingStatus - .replace("{processingStatus}", processingStatus) - .replace("{pageNo}", pageNo) - .replace("{pageSize}", pageSize); - return this.Http.httpAxios("get", url, null, failedCallback); - } - // Get - getAuditInfo(taskId: string, failedCallback?: any) { - const url = this.url.auditInfo.replace("{taskId}", taskId); - return this.Http.httpAxios("get", url, null, failedCallback); - } - getSlicingInstance(pageNo: string, pageSize: string, failedCallback?: any) { - const url = this.url.slicingInstance - .replace("{pageNo}", pageNo) - .replace("{pageSize}", pageSize); - return this.Http.httpAxios("get", url, null, failedCallback); - } - getSlicingSubnetInstance(nsiId: string, failedCallback?: any) { - const url = this.url.slicingSubnetInstance.replace("{nsiId}", nsiId); - return this.Http.httpAxios("get", url, null, failedCallback); - } - getSubnetInContext( - context: string, - pageNo: string, - pageSize: string, - failedCallback?: any - ) { - const url = this.url.subnetInContext - .replace("{environmentContext}", context) - .replace("{pageNo}", pageNo) - .replace("{pageSize}", pageSize); - return this.Http.httpAxios("get", url, null, failedCallback); - } - submitSlicing(reqbody, failedCallback?: any) { - return this.Http.httpAxios( - "put", - this.url.submitSlicing, - reqbody, - failedCallback - ); - } - getSlicingBasicInfo(taskId: string, failedCallback?: any) { - const url = this.url.slicingBasicInfo.replace("{taskId}", taskId); - return this.Http.httpAxios("get", url, null, failedCallback); - } - getSlicingCreateProgress(taskId: string, failedCallback?: any) { - const url = this.url.slicingCreateProgress.replace("{taskId}", taskId); - return this.Http.httpAxios("get", url, null, failedCallback); - } - - // Get slicing business list - getSlicingBusinessList( - paramsObj: any, - isSelect: boolean, - failedCallback?: any - ) { - let url = this.url.slicingBusinessList - .replace("{pageNo}", paramsObj.pageNo) - .replace("{pageSize}", paramsObj.pageSize); - if (isSelect) { - url = this.url.slicingBusinesQueryOfStatus - .replace("{businessStatus}", paramsObj.businessStatus) - .replace("{pageNo}", paramsObj.pageNo) - .replace("{pageSize}", paramsObj.pageSize); - } - return this.Http.httpAxios("get", url, null, failedCallback); - } - // change slicing business activate status - changeActivateSlicingService( - paramsObj: any, - activate: boolean, - failedCallback?: any - ) { - let url = this.url.activateSlicingService.replace( - "{serviceId}", - paramsObj.serviceId - ); - if (!activate) { - url = this.url.deactivateSlicingService.replace( - "{serviceId}", - paramsObj.serviceId - ); - } - return this.Http.httpAxios("put", url, paramsObj, failedCallback); - } - // terminate slicing business - terminateSlicingService(paramsObj: any, failedCallback?: any) { - const url = this.url.terminateSlicingService.replace( - "{serviceId}", - paramsObj.serviceId - ); - return this.Http.httpAxios("delete", url, null, failedCallback); - } - // query slicing business progress - getSlicingBusinessProgress(paramsObj: any, failedCallback?: any) { - let url = this.url.queryOperationProgress.replace( - "{serviceId}", - paramsObj.serviceId - ); - return this.Http.httpAxios("get", url, null, failedCallback); - } - //get slicingBusinessDetail - getSlicingBusinessDetail(businessId: string) { - let url = this.url.slicingBusinessDetail.replace( - "{businessId}", - businessId - ); - return this.Http.httpAxios("get", url); - } - // Get slicing nsi list - getSlicingNsiList(paramsObj, isSelect: boolean, failedCallback?: any) { - let url = this.url.slicingNsiList - .replace("{pageNo}", paramsObj.pageNo) - .replace("{pageSize}", paramsObj.pageSize); - if (isSelect) { - url = this.url.slicingNsiQueryOfStatus - .replace("{instanceStatus}", paramsObj.instanceStatus) - .replace("{pageNo}", paramsObj.pageNo) - .replace("{pageSize}", paramsObj.pageSize); - } - return this.Http.httpAxios("get", url, null, failedCallback); - } - //get slicingNsiDetail - getSlicingNsiDetail(nsiId: string) { - let url = this.url.slicingNsiDetail.replace("{nsiId}", nsiId); - return this.Http.httpAxios("get", url); - } - // Get slicing nssi list - getSlicingNssiList(paramsObj, isSelect: boolean, failedCallback?: any) { - let url = this.url.slicingNssiList - .replace("{pageNo}", paramsObj.pageNo) - .replace("{pageSize}", paramsObj.pageSize); - if (isSelect) { - url = this.url.slicingNssiQueryOfStatus - .replace("{instanceStatus}", paramsObj.instanceStatus) - .replace("{pageNo}", paramsObj.pageNo) - .replace("{pageSize}", paramsObj.pageSize); - } - return this.Http.httpAxios("get", url, null, failedCallback); - } - //get slicingNssiDetail - getSlicingNssiDetail(nssiId: string) { - let url = this.url.slicingNssiDetail.replace("{nssiId}", nssiId); - return this.Http.httpAxios("get", url); - } - // Get CSMF slicing business list - getCSMFSlicingBusinessList(paramsObj: any, failedCallback?: any) { - let url = this.url.csmfSlicingBusinessList - .replace("{status}", paramsObj.status) - .replace("{pageNo}", paramsObj.pageNo) - .replace("{pageSize}", paramsObj.pageSize); - return this.Http.httpAxios("get", url, null, failedCallback); - } - // change CSMF slicing business activate status - csmfChangeActivate(paramsObj, activate: boolean, failedCallback?: any) { - let url = this.url.csmfActivate.replace( - "{serviceId}", - paramsObj.serviceId - ); - if (!activate) { - url = this.url.csmfDeactivate.replace( - "{serviceId}", - paramsObj.serviceId - ); - } - return this.Http.httpAxios("put", url, paramsObj, failedCallback); - } - // 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); - // } - csmfSlicingPurchase(paramsObj: any, failedCallback?: any) { - let url = this.url.csmfPurchase; - return this.Http.httpAxios("post", url, paramsObj, failedCallback); - } - csmfSlicingPurchaseWithContent(paramsObj: any, failedCallback?: any) { - let url = this.url.csmfPurchaseWithContent; - return this.Http.httpAxios("post", url, paramsObj, failedCallback); - } - //monitor 5G - getFetchTraffic(service_list, time, failedCallback?: any) { - let url = this.url.fetchTraffic.replace("{queryTimestamp}", time); - return this.Http.httpAxios("post", url, service_list, failedCallback); - } - getFetchOnlineusers(service_list, time, failedCallback?: any) { - let url = this.url.fetchOnlineusers.replace("{queryTimestamp}", time); - return this.Http.httpAxios("post", url, service_list, failedCallback); - } - getFetchBandwidth(service_list, time, failedCallback?: any) { - let url = this.url.fetchBandwidth.replace("{queryTimestamp}", time); - return this.Http.httpAxios("post", url, service_list, failedCallback); - } - // get the detail information of connection links - getConnectionLinkTable(paramsObj: any, failedCallback?: any) { - // :todo - let url = this.url.getConnectionLinkTable - .replace("{pageNo}", paramsObj.pageNo) - .replace("{pageSize}", paramsObj.pageSize); - return this.Http.httpAxios("get", url, null, failedCallback); - } -} +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { + HttpClient +} from "@angular/common/http"; +import { Injectable } from "@angular/core"; +import { Http } from "../../shared/utils/http"; +@Injectable() +export class SlicingTaskServices { + constructor(private http: HttpClient, private Http: Http) {} + baseUrl: string = "/api/usecaseui-server/v1/uui-slicing/nsmf"; + url = { + slicingTaskList: + this.baseUrl + "/task/business/pageNo/{pageNo}/pageSize/{pageSize}", + taskProcessingStatus: + this.baseUrl + + "/task/{processingStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}", + auditInfo: this.baseUrl + "/task/{taskId}/auditInfo", + slicingInstance: + this.baseUrl + + "/resource/nsi/instances/pageNo/{pageNo}/pageSize/{pageSize}", + slicingSubnetInstance: + this.baseUrl + "/resource/nsi/{nsiId}/nssiInstances", + subnetInContext: + this.baseUrl + + "/resource/nssi/environmentContext/{environmentContext}/instances/pageNo/{pageNo}/pageSize/{pageSize}", + submitSlicing: this.baseUrl + "/task/auditInfo", + slicingBasicInfo: this.baseUrl + "/task/{taskId}/taskCreationInfo", + slicingCreateProgress: + this.baseUrl + "/task/{taskId}/taskCreationProgress", + //slicing-business-management + slicingBusinessList: + this.baseUrl + + "/resource/business/pageNo/{pageNo}/pageSize/{pageSize}", + slicingBusinesQueryOfStatus: + this.baseUrl + + "/resource/{businessStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}", + activateSlicingService: this.baseUrl + "/resource/{serviceId}/activate", + deactivateSlicingService: + this.baseUrl + "/resource/{serviceId}/deactivate", + terminateSlicingService: this.baseUrl + "/resource/{serviceId}", + queryOperationProgress: this.baseUrl + "/resource/{serviceId}/progress", + slicingBusinessDetail: + this.baseUrl + "/resource/business/{businessId}/details", + //slicing-nsi-management + slicingNsiList: + this.baseUrl + + "/resource/nsi/instances/pageNo/{pageNo}/pageSize/{pageSize}", + slicingNsiQueryOfStatus: + this.baseUrl + + "/resource/nsi/{instanceStatus}/instances/pageNo/{pageNo}/pageSize/{pageSize}", + slicingNsiDetail: this.baseUrl + "/resource/nsi/{nsiId}/details", + //slicing-nssi-management + 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-server/v1/uui-slicing/csmf/5gSlicing/orders/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", + csmfPurchase: "/api/usecaseui-server/v1/uui-slicing/csmf/5gSlicing", + csmfPurchaseWithContent: '/api/usecaseui-server/v1/intent/csmf/5gSlicing', + //monitor 5G + fetchTraffic: + this.baseUrl + + "/monitoring/queryTimestamp/{queryTimestamp}/trafficData", + fetchOnlineusers: + this.baseUrl + + "/monitoring/queryTimestamp/{queryTimestamp}/onlineUsers", + fetchBandwidth: + this.baseUrl + + "/monitoring/queryTimestamp/{queryTimestamp}/bandwidth", + fetchPDUSessionEstSR: + this.baseUrl + + "/monitoring/queryTimestamp/{queryTimestamp}/pDUSessionEstSR", + getConnectionLinkTable: + "/api/usecaseui-server/v1/uui-slicing/nsmf/task/connectionLinks/pageNo/{pageNo}/pageSize/{pageSize}", // :todo + }; + + // Get slicing order task list + getSlicingTaskList(pageNo: string, pageSize: string, failedCallback?: any) { + const url = this.url.slicingTaskList + .replace("{pageNo}", pageNo) + .replace("{pageSize}", pageSize); + return this.Http.httpAxios("get", url, null, failedCallback); + } + // Get list based on task processing status + getTaskProcessingStatus( + processingStatus: string, + pageNo: string, + pageSize: string, + failedCallback?: any + ) { + const url = this.url.taskProcessingStatus + .replace("{processingStatus}", processingStatus) + .replace("{pageNo}", pageNo) + .replace("{pageSize}", pageSize); + return this.Http.httpAxios("get", url, null, failedCallback); + } + // Get + getAuditInfo(taskId: string, failedCallback?: any) { + const url = this.url.auditInfo.replace("{taskId}", taskId); + return this.Http.httpAxios("get", url, null, failedCallback); + } + getSlicingInstance(pageNo: string, pageSize: string, failedCallback?: any) { + const url = this.url.slicingInstance + .replace("{pageNo}", pageNo) + .replace("{pageSize}", pageSize); + return this.Http.httpAxios("get", url, null, failedCallback); + } + getSlicingSubnetInstance(nsiId: string, failedCallback?: any) { + const url = this.url.slicingSubnetInstance.replace("{nsiId}", nsiId); + return this.Http.httpAxios("get", url, null, failedCallback); + } + getSubnetInContext( + context: string, + pageNo: string, + pageSize: string, + failedCallback?: any + ) { + const url = this.url.subnetInContext + .replace("{environmentContext}", context) + .replace("{pageNo}", pageNo) + .replace("{pageSize}", pageSize); + return this.Http.httpAxios("get", url, null, failedCallback); + } + submitSlicing(reqbody, failedCallback?: any) { + return this.Http.httpAxios( + "put", + this.url.submitSlicing, + reqbody, + failedCallback + ); + } + getSlicingBasicInfo(taskId: string, failedCallback?: any) { + const url = this.url.slicingBasicInfo.replace("{taskId}", taskId); + return this.Http.httpAxios("get", url, null, failedCallback); + } + getSlicingCreateProgress(taskId: string, failedCallback?: any) { + const url = this.url.slicingCreateProgress.replace("{taskId}", taskId); + return this.Http.httpAxios("get", url, null, failedCallback); + } + + // Get slicing business list + getSlicingBusinessList( + paramsObj: any, + isSelect: boolean, + failedCallback?: any + ) { + let url = this.url.slicingBusinessList + .replace("{pageNo}", paramsObj.pageNo) + .replace("{pageSize}", paramsObj.pageSize); + if (isSelect) { + url = this.url.slicingBusinesQueryOfStatus + .replace("{businessStatus}", paramsObj.businessStatus) + .replace("{pageNo}", paramsObj.pageNo) + .replace("{pageSize}", paramsObj.pageSize); + } + return this.Http.httpAxios("get", url, null, failedCallback); + } + // change slicing business activate status + changeActivateSlicingService( + paramsObj: any, + activate: boolean, + failedCallback?: any + ) { + let url = this.url.activateSlicingService.replace( + "{serviceId}", + paramsObj.serviceId + ); + if (!activate) { + url = this.url.deactivateSlicingService.replace( + "{serviceId}", + paramsObj.serviceId + ); + } + return this.Http.httpAxios("put", url, paramsObj, failedCallback); + } + // terminate slicing business + terminateSlicingService(paramsObj: any, failedCallback?: any) { + const url = this.url.terminateSlicingService.replace( + "{serviceId}", + paramsObj.serviceId + ); + return this.Http.httpAxios("delete", url, null, failedCallback); + } + // query slicing business progress + getSlicingBusinessProgress(paramsObj: any, failedCallback?: any) { + let url = this.url.queryOperationProgress.replace( + "{serviceId}", + paramsObj.serviceId + ); + return this.Http.httpAxios("get", url, null, failedCallback); + } + //get slicingBusinessDetail + getSlicingBusinessDetail(businessId: string) { + let url = this.url.slicingBusinessDetail.replace( + "{businessId}", + businessId + ); + return this.Http.httpAxios("get", url); + } + // Get slicing nsi list + getSlicingNsiList(paramsObj, isSelect: boolean, failedCallback?: any) { + let url = this.url.slicingNsiList + .replace("{pageNo}", paramsObj.pageNo) + .replace("{pageSize}", paramsObj.pageSize); + if (isSelect) { + url = this.url.slicingNsiQueryOfStatus + .replace("{instanceStatus}", paramsObj.instanceStatus) + .replace("{pageNo}", paramsObj.pageNo) + .replace("{pageSize}", paramsObj.pageSize); + } + return this.Http.httpAxios("get", url, null, failedCallback); + } + //get slicingNsiDetail + getSlicingNsiDetail(nsiId: string) { + let url = this.url.slicingNsiDetail.replace("{nsiId}", nsiId); + return this.Http.httpAxios("get", url); + } + // Get slicing nssi list + getSlicingNssiList(paramsObj, isSelect: boolean, failedCallback?: any) { + let url = this.url.slicingNssiList + .replace("{pageNo}", paramsObj.pageNo) + .replace("{pageSize}", paramsObj.pageSize); + if (isSelect) { + url = this.url.slicingNssiQueryOfStatus + .replace("{instanceStatus}", paramsObj.instanceStatus) + .replace("{pageNo}", paramsObj.pageNo) + .replace("{pageSize}", paramsObj.pageSize); + } + return this.Http.httpAxios("get", url, null, failedCallback); + } + //get slicingNssiDetail + getSlicingNssiDetail(nssiId: string) { + let url = this.url.slicingNssiDetail.replace("{nssiId}", nssiId); + return this.Http.httpAxios("get", url); + } + // Get CSMF slicing business list + getCSMFSlicingBusinessList(paramsObj: any, failedCallback?: any) { + let url = this.url.csmfSlicingBusinessList + .replace("{status}", paramsObj.status) + .replace("{pageNo}", paramsObj.pageNo) + .replace("{pageSize}", paramsObj.pageSize); + return this.Http.httpAxios("get", url, null, failedCallback); + } + // change CSMF slicing business activate status + csmfChangeActivate(paramsObj, activate: boolean, failedCallback?: any) { + let url = this.url.csmfActivate.replace( + "{serviceId}", + paramsObj.serviceId + ); + if (!activate) { + url = this.url.csmfDeactivate.replace( + "{serviceId}", + paramsObj.serviceId + ); + } + return this.Http.httpAxios("put", url, paramsObj, failedCallback); + } + // 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); + // } + csmfSlicingPurchase(paramsObj: any, failedCallback?: any) { + let url = this.url.csmfPurchase; + return this.Http.httpAxios("post", url, paramsObj, failedCallback); + } + csmfSlicingPurchaseWithContent(paramsObj: any, failedCallback?: any) { + let url = this.url.csmfPurchaseWithContent; + return this.Http.httpAxios("post", url, paramsObj, failedCallback); + } + //monitor 5G + getFetchTraffic(service_list, time, failedCallback?: any) { + let url = this.url.fetchTraffic.replace("{queryTimestamp}", time); + return this.Http.httpAxios("post", url, service_list, failedCallback); + } + getFetchOnlineusers(service_list, time, failedCallback?: any) { + let url = this.url.fetchOnlineusers.replace("{queryTimestamp}", time); + return this.Http.httpAxios("post", url, service_list, failedCallback); + } + getFetchBandwidth(service_list, time, failedCallback?: any) { + let url = this.url.fetchBandwidth.replace("{queryTimestamp}", time); + return this.Http.httpAxios("post", url, service_list, failedCallback); + } + getFetchPDUSessionEstSR(service_list, time, failedCallback?: any) { + let url = this.url.fetchPDUSessionEstSR.replace("{queryTimestamp}", time); + return this.Http.httpAxios("post", url, service_list, failedCallback); + } + // get the detail information of connection links + getConnectionLinkTable(paramsObj: any, failedCallback?: any) { + // :todo + let url = this.url.getConnectionLinkTable + .replace("{pageNo}", paramsObj.pageNo) + .replace("{pageSize}", paramsObj.pageSize); + return this.Http.httpAxios("get", url, null, failedCallback); + } +} diff --git a/usecaseui-portal/src/app/mock/json/fetchPDUSessionEstSRData.json b/usecaseui-portal/src/app/mock/json/fetchPDUSessionEstSRData.json new file mode 100644 index 00000000..4d5134cd --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/fetchPDUSessionEstSRData.json @@ -0,0 +1,49 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "5G slicing service PDUSessionEstSR query result." + }, + "result_body": { + "slicing_pDUSessionEstSR_list": [ + { + "service_id": "service1", + "pdusessionEstSRInfoList": [ + { + "timestamp": "1454171446000", + "pduSessionEstSR": "120" + }, + { + "timestamp": "1454172447000", + "pduSessionEstSR": "200" + } + ] + }, + { + "service_id": "service2", + "pdusessionEstSRInfoList": [ + { + "timestamp": "1454171446000", + "pduSessionEstSR": "88" + }, + { + "timestamp": "1454173447000", + "pduSessionEstSR": "144" + } + ] + }, + { + "service_id": "service3", + "pdusessionEstSRInfoList": [ + { + "timestamp": "1454171446000", + "pduSessionEstSR": "163" + }, + { + "timestamp": "1454173447000", + "pduSessionEstSR": "85" + } + ] + } + ] + } + } diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js index 49086165..4c425e18 100644 --- a/usecaseui-portal/src/app/mock/routes.js +++ b/usecaseui-portal/src/app/mock/routes.js @@ -172,6 +172,8 @@ module.exports = { "/fetchOnlineusersData", "/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/bandwidth": "/fetchBandwidthData", + "/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/pDUSessionEstSR": + "/fetchPDUSessionEstSRData", ///////<-------------general interface--------->///// "/api/*": "/$1", "/*/*": "/$1_$2", diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html index ea68cd92..4843665a 100644 --- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html @@ -1,7 +1,7 @@

Slicing business Monitor

-
+
+
+

Supported KPIs

+
+
+
+ + +
+
-
-
+
+
+

Slicing Use Traffic

NO Data
-
+

Number Of Online Users

NO Data
-
+

Slicing Total Bandwidth

NO Data
+
+ +

PDUSessionEstSR

+ +
NO Data
+ +
+
@@ -78,4 +102,4 @@
-
\ No newline at end of file +
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts index 2c763909..04516e52 100644 --- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts @@ -3,6 +3,7 @@ import { SlicingTaskServices } from '.././../../core/services/slicingTaskService import { pieChartconfig, lineChartconfig } from './monitorEchartsConfig'; import *as moment from 'moment'; import * as differenceInDays from 'date-fns/difference_in_days'; +import { NzMessageService } from 'ng-zorro-antd'; @Component({ selector: 'app-monitor-5g', templateUrl: './monitor-5g.component.html', @@ -11,7 +12,8 @@ import * as differenceInDays from 'date-fns/difference_in_days'; export class Monitor5gComponent implements OnInit { constructor( - private myhttp: SlicingTaskServices + private myhttp: SlicingTaskServices, + private msg: NzMessageService ) { } today = new Date(); @@ -25,6 +27,7 @@ export class Monitor5gComponent implements OnInit { isSpinningTraffic: boolean =true; isSpinningOnlineuser: boolean =true; isSpinningBandwidth: boolean =true; + isSpinningPDUSessionEstSR: boolean =true; trafficData: any[] = []; trafficLegend: any[] = []; @@ -42,10 +45,65 @@ export class Monitor5gComponent implements OnInit { bandwidthLegend: any[] = []; bandwidthChartInit: Object = lineChartconfig; bandwidthChartData: Object; + + pDUSessionEstSRData: any[] = []; + pDUSessionEstSRXAxis: any[] = []; + pDUSessionEstSRLegend: any[] = []; + pDUSessionEstSRChartInit: Object = lineChartconfig; + pDUSessionEstSRChartData: Object; + + dropdownList; + dropdownSettings; + selectedItems = []; ngOnInit() { this.getBusinessList() + + this.dropdownList = this.getData(); + + this.dropdownSettings = { + singleSelection: false, + idField: 'item_id', + textField: 'item_text', + selectAllText: 'Select All', + unSelectAllText: 'UnSelect All', + enableCheckAll: false + }; } + onItemSelect($event){ + let data = this.getData(); + let selectedItem = data.filter(item => item.item_id == $event.item_id); + this.dropdownList = data.map(item => { + if(this.selectedItems.length >= 3){ + item.isDisabled = true; + } else { + item.isDisabled = false; + } + return item; + }) + if(this.selectedItems.length >= 3){ + this.msg.warning(`More than 3 KPIs cannot be selected at a time`); + } + } + + onItemDeSelect(){ + if(this.selectedItems && this.selectedItems.length < 3){ + this.dropdownList = this.dropdownList.map(item => { + item.isDisabled = false; + return item; + }) + } + } + + getData() : Array{ + return [ + { item_id: 1, item_text: 'SlicingUseTraffic' }, + { item_id: 2, item_text: 'NumberOfOnlineUsers'}, + { item_id: 3, item_text: 'SlicingTotalBandwidth'}, + { item_id: 4, item_text: 'PDUSessionEstSR' } + ]; + } + getBusinessList(): void { this.loading = true; let paramsObj = { @@ -109,6 +167,7 @@ export class Monitor5gComponent implements OnInit { this.fetchTrafficData(requestBody, time); this.fetchOnlineusersData(requestBody, time); this.fetchBandwidthData(requestBody, time); + this.fetchPDUSessionEstSRData(requestBody, time); } fetchTrafficData(service_list, time) { let getFetchTrafficFailedCallback = () => { @@ -186,6 +245,44 @@ export class Monitor5gComponent implements OnInit { }; }) } + fetchPDUSessionEstSRData(service_list, time) { + let getFetchPDUSessionEstSRFailedCallback = () => { + this.isSpinningPDUSessionEstSR = false; + } + this.myhttp.getFetchPDUSessionEstSR(service_list, time, getFetchPDUSessionEstSRFailedCallback).then(res => { + this.isSpinningPDUSessionEstSR = false; + const { result_body: { slicing_pDUSessionEstSR_list } } = res; + this.pDUSessionEstSRXAxis = []; + this.pDUSessionEstSRData = []; + this.pDUSessionEstSRLegend = []; + let filterList = []; + filterList = this.filterData(slicing_pDUSessionEstSR_list); + console.log(filterList,"filterList----slicing_pDUSessionEstSR"); + filterList[0].pdusessionEstSRInfoList.map((key) => { + let date = moment(Number(key.timestamp)).format('YYYY-MM-DD/HH:mm').split("/")[1]; + this.pDUSessionEstSRXAxis.push(date) + }); + filterList.forEach((item) => { + this.pDUSessionEstSRLegend.push(item.service_id); + this.pDUSessionEstSRData.push({ + name: item.service_id, + type: 'line', + data: this.getPDUSessionEstSRSeriesData(item) + }) + }); + this.pDUSessionEstSRChartData = { + legend: { + bottom: '0px', + type: 'scroll', + data: this.pDUSessionEstSRLegend + }, + xAxis: { + data: this.pDUSessionEstSRXAxis + }, + series: this.pDUSessionEstSRData + }; + }) + } fetchBandwidthData(service_list, time) { let getFetchBandwidthFailedCallback = () => { this.isSpinningBandwidth = false; @@ -238,6 +335,13 @@ export class Monitor5gComponent implements OnInit { }) return datas } + getPDUSessionEstSRSeriesData(item) { + let datas = []; + item.pdusessionEstSRInfoList.forEach((keys) => { + datas.push(keys.pduSessionEstSR) + }) + return datas + } filterData(data){ let filter = []; data.map((item,index) => { -- cgit 1.2.3-korg