Additional KPIs in the slicing monitor screen

Issue-ID: USECASEUI-715
Change-Id: I3e18f661d1b80c3bbd6d4872a787cb7b83f75441
Signed-off-by: deepikasatheesh <deepika.s84@wipro.com>

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) => {