summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal
diff options
context:
space:
mode:
authordeepikasatheesh <deepika.s84@wipro.com>2022-08-30 09:23:47 +0000
committerKeguang He <hekeguang@chinamobile.com>2022-09-01 01:51:43 +0000
commit3fcc20be1927fdd4d20e9c687ac8f99d0c1efc9b (patch)
tree5fc840c88f91d85e72e67cb98afc357c89edf9a0 /usecaseui-portal
parente402fb86ae1ecaac22b9fe34afc94eb6cf1774e4 (diff)
Additional KPIs in the slicing monitor screen
Issue-ID: USECASEUI-715 Change-Id: I3e18f661d1b80c3bbd6d4872a787cb7b83f75441 Signed-off-by: deepikasatheesh <deepika.s84@wipro.com>
Diffstat (limited to 'usecaseui-portal')
-rw-r--r--usecaseui-portal/package-lock.json8
-rw-r--r--usecaseui-portal/package.json1
-rw-r--r--usecaseui-portal/src/app/app.module.ts2
-rw-r--r--usecaseui-portal/src/app/core/services/slicingTaskServices.ts647
-rw-r--r--usecaseui-portal/src/app/mock/json/fetchPDUSessionEstSRData.json49
-rw-r--r--usecaseui-portal/src/app/mock/routes.js2
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html36
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts106
8 files changed, 524 insertions, 327 deletions
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<any>(url);
- // }
- // // query CSMF slicing business progress
- // csmfSlicingProgress(paramsObj) {
- // let url = this.url.csmfGetProgress.replace("{serviceId}", paramsObj.serviceId);
- // return this.http.get<any>(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<any>(url);
+ // }
+ // // query CSMF slicing business progress
+ // csmfSlicingProgress(paramsObj) {
+ // let url = this.url.csmfGetProgress.replace("{serviceId}", paramsObj.serviceId);
+ // return this.http.get<any>(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 @@
<div class="monitor-content">
<h1>Slicing business Monitor</h1>
<div nz-row>
- <div nz-col nzSpan="12" class="monitorDate">
+ <div nz-col nzSpan="10" class="monitorDate">
<nz-date-picker
nzShowTime
[nzShowToday]="false"
@@ -14,29 +14,53 @@
(nzOnOpenChange)="onOpenChange($event)"
></nz-date-picker>
</div>
+ <div nz-col nzSpan="3" class="charts">
+ <h3><nz-form-label class= "colm-s-1 lblCls">Supported KPIs</nz-form-label></h3>
+ </div>
+ <div nz-col nzSpan="8" class="charts">
+ <div class="drop-container">
+ <ng-multiselect-dropdown
+ [placeholder]="'Select KPIs'"
+ [settings]="dropdownSettings"
+ [data]="dropdownList"
+ (onSelect)="onItemSelect($event)"
+ (onDeSelect)="onItemDeSelect()"
+ [(ngModel)]="selectedItems">
+ </ng-multiselect-dropdown>
+ </div>
+ </div>
</div>
- <div nz-row nzType="flex" class="charts">
- <div nz-col nzSpan="6" class="gutter-row col-boxshadow">
+ <div nz-row>
+ <div nz-col nzType="flex" class="charts" *ngFor="let data of selectedItems" [ngSwitch]="data.item_text">
+ <div nz-col nzSpan="6" class="gutter-row col-boxshadow" *ngSwitchCase="'SlicingUseTraffic'">
<nz-spin [nzSpinning]="isSpinningTraffic">
<h4>Slicing Use Traffic</h4>
<app-pie [initData]="trafficChartInit" [chartData]="trafficChartData"></app-pie>
<div *ngIf="!isSpinningTraffic && trafficData.length === 0" class="nodata">NO Data</div>
</nz-spin>
</div>
- <div nz-col nzSpan="8" class="gutter-row col-boxshadow">
+ <div nz-col nzSpan="7" class="gutter-row col-boxshadow" *ngSwitchCase="'NumberOfOnlineUsers'">
<nz-spin [nzSpinning]="isSpinningOnlineuser">
<h4>Number Of Online Users</h4>
<app-line [initData]="onlineuserChartInit" [chartData]="onlineuserChartData"></app-line>
<div *ngIf="!isSpinningOnlineuser && onlineusersData.length === 0" class="nodata">NO Data</div>
</nz-spin>
</div>
- <div nz-col nzSpan="8" class="gutter-row col-boxshadow">
+ <div nz-col nzSpan="7" class="gutter-row col-boxshadow" *ngSwitchCase="'SlicingTotalBandwidth'">
<nz-spin [nzSpinning]="isSpinningBandwidth">
<h4>Slicing Total Bandwidth</h4>
<app-line [initData]="bandwidthChartInit" [chartData]="bandwidthChartData"></app-line>
<div *ngIf="!isSpinningBandwidth && bandwidthData.length === 0" class="nodata">NO Data</div>
</nz-spin>
</div>
+ <div nz-col nzSpan="7" class="gutter-row col-boxshadow" *ngSwitchCase="'PDUSessionEstSR'">
+ <nz-spin [nzSpinning]="isSpinningPDUSessionEstSR">
+ <h4>PDUSessionEstSR</h4>
+ <app-line [initData]="pDUSessionEstSRChartInit" [chartData]="pDUSessionEstSRChartData"></app-line>
+ <div *ngIf="!isSpinningPDUSessionEstSR && pDUSessionEstSRData.length === 0" class="nodata">NO Data</div>
+ </nz-spin>
+ </div>
+ </div>
</div>
<div class="slicing-resource-table">
<div class="slicing-resource-table-list">
@@ -78,4 +102,4 @@
</nz-table>
</div>
</div>
-</div> \ No newline at end of file
+</div>
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<any>{
+ 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) => {