Additional KPIs in the slicing monitor screen 06/130506/2
authordeepikasatheesh <deepika.s84@wipro.com>
Tue, 30 Aug 2022 09:23:47 +0000 (09:23 +0000)
committerKeguang He <hekeguang@chinamobile.com>
Thu, 1 Sep 2022 01:51:43 +0000 (01:51 +0000)
Issue-ID: USECASEUI-715
Change-Id: I3e18f661d1b80c3bbd6d4872a787cb7b83f75441
Signed-off-by: deepikasatheesh <deepika.s84@wipro.com>
usecaseui-portal/package-lock.json
usecaseui-portal/package.json
usecaseui-portal/src/app/app.module.ts
usecaseui-portal/src/app/core/services/slicingTaskServices.ts
usecaseui-portal/src/app/mock/json/fetchPDUSessionEstSRData.json [new file with mode: 0644]
usecaseui-portal/src/app/mock/routes.js
usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts

index 3cdd1bc..384fc12 100644 (file)
       "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",
index 27dda82..4149df6 100644 (file)
@@ -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",
index 3e0c46e..69839d2 100644 (file)
@@ -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,
index 292d9bd..cccf7e8 100644 (file)
-/*\r
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.\r
-\r
-    Licensed under the Apache License, Version 2.0 (the "License");\r
-    you may not use this file except in compliance with the License.\r
-    You may obtain a copy of the License at\r
-\r
-            http://www.apache.org/licenses/LICENSE-2.0\r
-\r
-    Unless required by applicable law or agreed to in writing, software\r
-    distributed under the License is distributed on an "AS IS" BASIS,\r
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
-    See the License for the specific language governing permissions and\r
-    limitations under the License.\r
-*/\r
-import {\r
-  HttpClient\r
-} from "@angular/common/http";\r
-import { Injectable } from "@angular/core";\r
-import { Http } from "../../shared/utils/http";\r
-@Injectable()\r
-export class SlicingTaskServices {\r
-       constructor(private http: HttpClient, private Http: Http) {}\r
-       baseUrl: string = "/api/usecaseui-server/v1/uui-slicing/nsmf";\r
-       url = {\r
-               slicingTaskList:\r
-                       this.baseUrl + "/task/business/pageNo/{pageNo}/pageSize/{pageSize}",\r
-               taskProcessingStatus:\r
-                       this.baseUrl +\r
-                       "/task/{processingStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}",\r
-               auditInfo: this.baseUrl + "/task/{taskId}/auditInfo",\r
-               slicingInstance:\r
-                       this.baseUrl +\r
-                       "/resource/nsi/instances/pageNo/{pageNo}/pageSize/{pageSize}",\r
-               slicingSubnetInstance:\r
-                       this.baseUrl + "/resource/nsi/{nsiId}/nssiInstances",\r
-               subnetInContext:\r
-                       this.baseUrl +\r
-                       "/resource/nssi/environmentContext/{environmentContext}/instances/pageNo/{pageNo}/pageSize/{pageSize}",\r
-               submitSlicing: this.baseUrl + "/task/auditInfo",\r
-               slicingBasicInfo: this.baseUrl + "/task/{taskId}/taskCreationInfo",\r
-               slicingCreateProgress:\r
-                       this.baseUrl + "/task/{taskId}/taskCreationProgress",\r
-               //slicing-business-management\r
-               slicingBusinessList:\r
-                       this.baseUrl +\r
-                       "/resource/business/pageNo/{pageNo}/pageSize/{pageSize}",\r
-               slicingBusinesQueryOfStatus:\r
-                       this.baseUrl +\r
-                       "/resource/{businessStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}",\r
-               activateSlicingService: this.baseUrl + "/resource/{serviceId}/activate",\r
-               deactivateSlicingService:\r
-                       this.baseUrl + "/resource/{serviceId}/deactivate",\r
-               terminateSlicingService: this.baseUrl + "/resource/{serviceId}",\r
-               queryOperationProgress: this.baseUrl + "/resource/{serviceId}/progress",\r
-               slicingBusinessDetail:\r
-                       this.baseUrl + "/resource/business/{businessId}/details",\r
-               //slicing-nsi-management\r
-               slicingNsiList:\r
-                       this.baseUrl +\r
-                       "/resource/nsi/instances/pageNo/{pageNo}/pageSize/{pageSize}",\r
-               slicingNsiQueryOfStatus:\r
-                       this.baseUrl +\r
-                       "/resource/nsi/{instanceStatus}/instances/pageNo/{pageNo}/pageSize/{pageSize}",\r
-               slicingNsiDetail: this.baseUrl + "/resource/nsi/{nsiId}/details",\r
-               //slicing-nssi-management\r
-               slicingNssiList:\r
-                       this.baseUrl +\r
-                       "/resource/nssi/instances/pageNo/{pageNo}/pageSize/{pageSize}",\r
-               slicingNssiQueryOfStatus:\r
-                       this.baseUrl +\r
-                       "/resource/nssi/instanceStatus/{instanceStatus}/instances/pageNo/{pageNo}/pageSize/{pageSize}",\r
-               slicingNssiDetail: this.baseUrl + "/resource/nssi/{nssiId}/details",\r
-               //csmf\r
-               csmfSlicingBusinessList:\r
-                       "/api/usecaseui-server/v1/uui-slicing/csmf/5gSlicing/orders/status/{status}/pageNo/{pageNo}/pageSize/{pageSize}",\r
-               csmfActivate:\r
-                       "/api/usecaseui/csmf/5gSlicing/service/{serviceId}/activate",\r
-               csmfDeactivate:\r
-                       "/api/usecaseui/csmf/5gSlicing/service/{serviceId}/deactivate",\r
-               csmfTerminate: "/api/usecaseui/csmf/5gSlicing/service/{serviceId}",\r
-               csmfGetProgress:\r
-                       "/api/usecaseui/csmf/5gSlicing/service/{serviceId}/progress",\r
-               csmfPurchase: "/api/usecaseui-server/v1/uui-slicing/csmf/5gSlicing",\r
-    csmfPurchaseWithContent: '/api/usecaseui-server/v1/intent/csmf/5gSlicing',\r
-               //monitor 5G\r
-               fetchTraffic:\r
-                       this.baseUrl +\r
-                       "/monitoring/queryTimestamp/{queryTimestamp}/trafficData",\r
-               fetchOnlineusers:\r
-                       this.baseUrl +\r
-                       "/monitoring/queryTimestamp/{queryTimestamp}/onlineUsers",\r
-               fetchBandwidth:\r
-                       this.baseUrl +\r
-                       "/monitoring/queryTimestamp/{queryTimestamp}/bandwidth",\r
-               getConnectionLinkTable:\r
-                       "/api/usecaseui-server/v1/uui-slicing/nsmf/task/connectionLinks/pageNo/{pageNo}/pageSize/{pageSize}", // :todo\r
-       };\r
-\r
-       // Get slicing order task list\r
-       getSlicingTaskList(pageNo: string, pageSize: string, failedCallback?: any) {\r
-               const url = this.url.slicingTaskList\r
-                       .replace("{pageNo}", pageNo)\r
-                       .replace("{pageSize}", pageSize);\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       // Get list based on task processing status\r
-       getTaskProcessingStatus(\r
-               processingStatus: string,\r
-               pageNo: string,\r
-               pageSize: string,\r
-               failedCallback?: any\r
-       ) {\r
-               const url = this.url.taskProcessingStatus\r
-                       .replace("{processingStatus}", processingStatus)\r
-                       .replace("{pageNo}", pageNo)\r
-                       .replace("{pageSize}", pageSize);\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       // Get\r
-       getAuditInfo(taskId: string, failedCallback?: any) {\r
-               const url = this.url.auditInfo.replace("{taskId}", taskId);\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       getSlicingInstance(pageNo: string, pageSize: string, failedCallback?: any) {\r
-               const url = this.url.slicingInstance\r
-                       .replace("{pageNo}", pageNo)\r
-                       .replace("{pageSize}", pageSize);\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       getSlicingSubnetInstance(nsiId: string, failedCallback?: any) {\r
-               const url = this.url.slicingSubnetInstance.replace("{nsiId}", nsiId);\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       getSubnetInContext(\r
-               context: string,\r
-               pageNo: string,\r
-               pageSize: string,\r
-               failedCallback?: any\r
-       ) {\r
-               const url = this.url.subnetInContext\r
-                       .replace("{environmentContext}", context)\r
-                       .replace("{pageNo}", pageNo)\r
-                       .replace("{pageSize}", pageSize);\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       submitSlicing(reqbody, failedCallback?: any) {\r
-               return this.Http.httpAxios(\r
-                       "put",\r
-                       this.url.submitSlicing,\r
-                       reqbody,\r
-                       failedCallback\r
-               );\r
-       }\r
-       getSlicingBasicInfo(taskId: string, failedCallback?: any) {\r
-               const url = this.url.slicingBasicInfo.replace("{taskId}", taskId);\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       getSlicingCreateProgress(taskId: string, failedCallback?: any) {\r
-               const url = this.url.slicingCreateProgress.replace("{taskId}", taskId);\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-\r
-       // Get slicing business list\r
-       getSlicingBusinessList(\r
-               paramsObj: any,\r
-               isSelect: boolean,\r
-               failedCallback?: any\r
-       ) {\r
-               let url = this.url.slicingBusinessList\r
-                       .replace("{pageNo}", paramsObj.pageNo)\r
-                       .replace("{pageSize}", paramsObj.pageSize);\r
-               if (isSelect) {\r
-                       url = this.url.slicingBusinesQueryOfStatus\r
-                               .replace("{businessStatus}", paramsObj.businessStatus)\r
-                               .replace("{pageNo}", paramsObj.pageNo)\r
-                               .replace("{pageSize}", paramsObj.pageSize);\r
-               }\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       // change slicing business activate status\r
-       changeActivateSlicingService(\r
-               paramsObj: any,\r
-               activate: boolean,\r
-               failedCallback?: any\r
-       ) {\r
-               let url = this.url.activateSlicingService.replace(\r
-                       "{serviceId}",\r
-                       paramsObj.serviceId\r
-               );\r
-               if (!activate) {\r
-                       url = this.url.deactivateSlicingService.replace(\r
-                               "{serviceId}",\r
-                               paramsObj.serviceId\r
-                       );\r
-               }\r
-               return this.Http.httpAxios("put", url, paramsObj, failedCallback);\r
-       }\r
-       // terminate slicing business\r
-       terminateSlicingService(paramsObj: any, failedCallback?: any) {\r
-               const url = this.url.terminateSlicingService.replace(\r
-                       "{serviceId}",\r
-                       paramsObj.serviceId\r
-               );\r
-               return this.Http.httpAxios("delete", url, null, failedCallback);\r
-       }\r
-       // query slicing business progress\r
-       getSlicingBusinessProgress(paramsObj: any, failedCallback?: any) {\r
-               let url = this.url.queryOperationProgress.replace(\r
-                       "{serviceId}",\r
-                       paramsObj.serviceId\r
-               );\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       //get slicingBusinessDetail\r
-       getSlicingBusinessDetail(businessId: string) {\r
-               let url = this.url.slicingBusinessDetail.replace(\r
-                       "{businessId}",\r
-                       businessId\r
-               );\r
-               return this.Http.httpAxios("get", url);\r
-       }\r
-       // Get slicing nsi list\r
-       getSlicingNsiList(paramsObj, isSelect: boolean, failedCallback?: any) {\r
-               let url = this.url.slicingNsiList\r
-                       .replace("{pageNo}", paramsObj.pageNo)\r
-                       .replace("{pageSize}", paramsObj.pageSize);\r
-               if (isSelect) {\r
-                       url = this.url.slicingNsiQueryOfStatus\r
-                               .replace("{instanceStatus}", paramsObj.instanceStatus)\r
-                               .replace("{pageNo}", paramsObj.pageNo)\r
-                               .replace("{pageSize}", paramsObj.pageSize);\r
-               }\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       //get slicingNsiDetail\r
-       getSlicingNsiDetail(nsiId: string) {\r
-               let url = this.url.slicingNsiDetail.replace("{nsiId}", nsiId);\r
-               return this.Http.httpAxios("get", url);\r
-       }\r
-       // Get slicing nssi list\r
-       getSlicingNssiList(paramsObj, isSelect: boolean, failedCallback?: any) {\r
-               let url = this.url.slicingNssiList\r
-                       .replace("{pageNo}", paramsObj.pageNo)\r
-                       .replace("{pageSize}", paramsObj.pageSize);\r
-               if (isSelect) {\r
-                       url = this.url.slicingNssiQueryOfStatus\r
-                               .replace("{instanceStatus}", paramsObj.instanceStatus)\r
-                               .replace("{pageNo}", paramsObj.pageNo)\r
-                               .replace("{pageSize}", paramsObj.pageSize);\r
-               }\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       //get slicingNssiDetail\r
-       getSlicingNssiDetail(nssiId: string) {\r
-               let url = this.url.slicingNssiDetail.replace("{nssiId}", nssiId);\r
-               return this.Http.httpAxios("get", url);\r
-       }\r
-       // Get CSMF slicing business list\r
-       getCSMFSlicingBusinessList(paramsObj: any, failedCallback?: any) {\r
-               let url = this.url.csmfSlicingBusinessList\r
-                       .replace("{status}", paramsObj.status)\r
-                       .replace("{pageNo}", paramsObj.pageNo)\r
-                       .replace("{pageSize}", paramsObj.pageSize);\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-       // change CSMF slicing business activate status\r
-       csmfChangeActivate(paramsObj, activate: boolean, failedCallback?: any) {\r
-               let url = this.url.csmfActivate.replace(\r
-                       "{serviceId}",\r
-                       paramsObj.serviceId\r
-               );\r
-               if (!activate) {\r
-                       url = this.url.csmfDeactivate.replace(\r
-                               "{serviceId}",\r
-                               paramsObj.serviceId\r
-                       );\r
-               }\r
-               return this.Http.httpAxios("put", url, paramsObj, failedCallback);\r
-       }\r
-       // terminate CSMF slicing business\r
-       // csmfTerminate(paramsObj) {\r
-       //     const url = this.url.csmfTerminate.replace('{serviceId}', paramsObj.serviceId);\r
-       //     return this.http.delete<any>(url);\r
-       // }\r
-       // // query CSMF slicing business progress\r
-       // csmfSlicingProgress(paramsObj) {\r
-       //     let url = this.url.csmfGetProgress.replace("{serviceId}", paramsObj.serviceId);\r
-       //     return this.http.get<any>(url);\r
-       // }\r
-       csmfSlicingPurchase(paramsObj: any, failedCallback?: any) {\r
-               let url = this.url.csmfPurchase;\r
-               return this.Http.httpAxios("post", url, paramsObj, failedCallback);\r
-       }\r
-  csmfSlicingPurchaseWithContent(paramsObj: any, failedCallback?: any) {\r
-               let url = this.url.csmfPurchaseWithContent;\r
-               return this.Http.httpAxios("post", url, paramsObj, failedCallback);\r
-       }\r
-       //monitor 5G\r
-       getFetchTraffic(service_list, time, failedCallback?: any) {\r
-               let url = this.url.fetchTraffic.replace("{queryTimestamp}", time);\r
-               return this.Http.httpAxios("post", url, service_list, failedCallback);\r
-       }\r
-       getFetchOnlineusers(service_list, time, failedCallback?: any) {\r
-               let url = this.url.fetchOnlineusers.replace("{queryTimestamp}", time);\r
-               return this.Http.httpAxios("post", url, service_list, failedCallback);\r
-       }\r
-       getFetchBandwidth(service_list, time, failedCallback?: any) {\r
-               let url = this.url.fetchBandwidth.replace("{queryTimestamp}", time);\r
-               return this.Http.httpAxios("post", url, service_list, failedCallback);\r
-       }\r
-       // get the detail information of connection links\r
-       getConnectionLinkTable(paramsObj: any, failedCallback?: any) {\r
-               // :todo\r
-               let url = this.url.getConnectionLinkTable\r
-                       .replace("{pageNo}", paramsObj.pageNo)\r
-                       .replace("{pageSize}", paramsObj.pageSize);\r
-               return this.Http.httpAxios("get", url, null, failedCallback);\r
-       }\r
-}\r
+/*
+    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 (file)
index 0000000..4d5134c
--- /dev/null
@@ -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"
+            }
+          ]
+        }
+      ]
+    }
+  }
index 4908616..4c425e1 100644 (file)
@@ -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",
index ea68cd9..4843665 100644 (file)
@@ -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"
                     (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">
             </nz-table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
index 2c76390..04516e5 100644 (file)
@@ -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) => {