feat: Change to back end paging

Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Change-Id: Ib1e1982c37d33945d0a0593eb4f250dabc5cfc5c
Issue-ID: USECASEUI-527

5 files changed, 514 insertions, 346 deletions

diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
index e5f55253..77b02ba9 100644
--- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
+++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
@@ -13,217 +13,307 @@
     See the License for the specific language governing permissions and

     limitations under the License.

 */

-import { Injectable } from '@angular/core';

-import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';

-import { Http } from '../../shared/utils/http';

+import { Injectable } from "@angular/core";

+import {

+	HttpClient,

+	HttpHeaders,

+	HttpParams,

+	HttpResponse,

+} from "@angular/common/http";

+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",

-        //monitor 5G

-        fetchTraffic: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/trafficData",

-        fetchOnlineusers: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/onlineUsers",

-        fetchBandwidth: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/bandwidth",

-        getConnectionLinkTable: this.baseUrl + "/connectionlinktable" // :todo

-    }

+	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",

+		//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/csmf/5gSlicing/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);

+	}

 

-    // 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);

-    }

-

-    //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);

-    }

-    getConnectionLinkTable( failedCallback?:any ) { // :todo

-        let url = this.url.getConnectionLinkTable;

-        return this.Http.httpAxios("get", url, null, 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);

+	}

 }

-

-

diff --git a/usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json b/usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json
index 613b8072..fcdc39f0 100644
--- a/usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json
+++ b/usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json
@@ -4,7 +4,7 @@
         "result_message": "5Gslicingorderqueryresult."
     },
     "result_body": {
-        "record_number": 2,
+        "record_number": 11,
         "connection_links_list": [{
                 "linkId": "233errt4545",
                 "anInfo": {
@@ -46,25 +46,6 @@
                     "maxBandwidth": "2002",
                     "resourceSharingLevel": "shared2"
                 }
-            },
-            {
-                "linkId": "233errt4547",
-                "anInfo": {
-                    "ipAddress": "2.2.2.23",
-                    "logicId": "dff3444423",
-                    "nextHop": "sddsweedffsdsssss23"
-                },
-                "cnInfo": {
-                    "ipAddress": "1.1.1.123",
-                    "logicId": "dff3444423",
-                    "nextHop": "sddsweedffsdsssss23"
-                },
-                "properties": {
-                    "latency": "2023",
-                    "jitter": "",
-                    "maxBandwidth": "20023",
-                    "resourceSharingLevel": "shared23"
-                }
             }
         ]
     }
diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js
index cc8ab96f..64aa5ab6 100644
--- a/usecaseui-portal/src/app/mock/routes.js
+++ b/usecaseui-portal/src/app/mock/routes.js
@@ -15,123 +15,164 @@
 */
 
 // proxy routers setting
-module.exports =
-    {
-        ///////<-------------api proxy--------->/////
-        "/usecaseui-server/v1/*": "/$1",
-        "/usecaseui-server/v1/*?:param": "/$1",
-        ///////////////
+module.exports = {
+	///////<-------------api proxy--------->/////
+	"/usecaseui-server/v1/*": "/$1",
+	"/usecaseui-server/v1/*?:param": "/$1",
+	///////////////
 
-        //text interface
-        "/user/login/:user/test": "/user/login?user=:user",
-        "/pnf/:cloudnode/p-interfaces/p-interface/:interface-name/createTerminationPoint":
-            "/status",
-        "/alarm/form/data": "/alarm_form_data",
-        "/upload/:url_upId": "/status",
-        ///////////////
+	//text interface
+	"/user/login/:user/test": "/user/login?user=:user",
+	"/pnf/:cloudnode/p-interfaces/p-interface/:interface-name/createTerminationPoint":
+		"/status",
+	"/alarm/form/data": "/alarm_form_data",
+	"/upload/:url_upId": "/status",
+	///////////////
 
-        ///////<-------------home services--------->/////
-        "/portal-auxapi/languageSetting/user/:currentloginId": "/language",
-        /////////////////////////
+	///////<-------------home services--------->/////
+	"/portal-auxapi/languageSetting/user/:currentloginId": "/language",
+	/////////////////////////
 
-        ///////<-------------managemence services--------->/////
-        "/uui-lcm/customers/:customer/service-subscriptions": "/serviceType",
-        "/uui-lcm/serviceNumByServiceType/:customer": "/CustomersColumn",
-        "/PUT/uui-lcm/customers/:customer": "/PUT_uui-lcm_customers",
-        "/PUT/uui-lcm/customers/:name/service-subscriptions/:id": "/PUT_uui-lcm_customers_service-subscriptions",
-        "/uui-lcm/customers/:customer": "/getCustomerresourceVersion",
-        "/DELETE/uui-lcm/customers?customerId=:customerId&resourceVersion=:resourceVersion": "/DELETE_uui-lcm_customers",
-        "/uui-lcm/customers/:customer/service-subscriptions/:id": "/getServiceTypeResourceVersion",
-        "/DELETE/uui-lcm/customers/:customer/service-subscriptions/:id": "/DELETE_uui-lcm_customers_service-subscriptions",
-        /////////////////////////
+	///////<-------------managemence services--------->/////
+	"/uui-lcm/customers/:customer/service-subscriptions": "/serviceType",
+	"/uui-lcm/serviceNumByServiceType/:customer": "/CustomersColumn",
+	"/PUT/uui-lcm/customers/:customer": "/PUT_uui-lcm_customers",
+	"/PUT/uui-lcm/customers/:name/service-subscriptions/:id":
+		"/PUT_uui-lcm_customers_service-subscriptions",
+	"/uui-lcm/customers/:customer": "/getCustomerresourceVersion",
+	"/DELETE/uui-lcm/customers?customerId=:customerId&resourceVersion=:resourceVersion":
+		"/DELETE_uui-lcm_customers",
+	"/uui-lcm/customers/:customer/service-subscriptions/:id":
+		"/getServiceTypeResourceVersion",
+	"/DELETE/uui-lcm/customers/:customer/service-subscriptions/:id":
+		"/DELETE_uui-lcm_customers_service-subscriptions",
+	/////////////////////////
 
-        ///////<-------------myhttp services--------->/////
-        "/uui-lcm/services/:serviceId/operations/:operations":"/uui-lcm_services_progress",
-        "/POST/uui-lcm/fetchCCVPNTemplateData/:uuid":"/uui-lcm_fetchCCVPNTemplateData",
-        "/POST/uui-lcm/service-templates/:uuid":"/uui-lcm_e2e_service-templates",
-        "/POST/uui-lcm/fetchNsTemplateData":"/uui-lcm_fetchNsTemplateData",
-        "/DELETE/uui-lcm/services/:serviceInstanceId":"/uui-lcm_delete_services",
-        "/uui-lcm/VnfInfo/:id":"/uui-lcm_VnfInfo",
-        "/uui-lcm/jobs/getNsLcmJobStatus/:jobId":"/uui-lcm_jobs_getNsLcmJobStatus",
-        "/services/scaleServices/:id":"/services_scaleServices",
-        "/PUT/uui-lcm/services/updateService/:id":"/uui-lcm_services_updateService",
-        "/uui-sotn/getPnfInfo/:name":"/uui-sotn_getPnfInfo",
-        "/uui-sotn/getConnectivityInfo/:id":"/uui-sotn_getConnectivityInfo",
-        "/uui-sotn/getPinterfaceByVpnId/:id":"/uui-sotn_getPinterfaceByVpnId",
-        "/POST/uui-lcm/healNetworkServiceInstance?ns_instance_id=:ns_instance_id":"/uui-lcm_healNetworkServiceInstance",
-        "/POST/uui-lcm/services?customerId=:customerId&serviceType=:serviceType&serviceDomain=:serviceDomain":"/uui-lcm_services",
-        "/POST/uui-lcm/createNetworkServiceInstance":"/uui-lcm_createNetworkServiceInstance",
-        "/POST/uui-lcm/instantiateNetworkServiceInstance?ns_instance_id=:ns_instance_id&customerId=:customerId&serviceType=:serviceType&serviceDomain=:serviceDomain&parentServiceInstanceId=":"/uui-lcm_instantiateNetworkServiceInstance",
-        "/POST/uui-lcm/terminateNetworkServiceInstance?ns_instance_id=:ns_instance_id":"/uui-lcm_terminateNetworkServiceInstance",
-        "/DELETE/uui-lcm/deleteNetworkServiceInstance?ns_instance_id=:ns_instance_id":"/uui-lcm_deleteNetworkServiceInstance",
-        /////////////////////////
+	///////<-------------myhttp services--------->/////
+	"/uui-lcm/services/:serviceId/operations/:operations":
+		"/uui-lcm_services_progress",
+	"/POST/uui-lcm/fetchCCVPNTemplateData/:uuid":
+		"/uui-lcm_fetchCCVPNTemplateData",
+	"/POST/uui-lcm/service-templates/:uuid": "/uui-lcm_e2e_service-templates",
+	"/POST/uui-lcm/fetchNsTemplateData": "/uui-lcm_fetchNsTemplateData",
+	"/DELETE/uui-lcm/services/:serviceInstanceId": "/uui-lcm_delete_services",
+	"/uui-lcm/VnfInfo/:id": "/uui-lcm_VnfInfo",
+	"/uui-lcm/jobs/getNsLcmJobStatus/:jobId": "/uui-lcm_jobs_getNsLcmJobStatus",
+	"/services/scaleServices/:id": "/services_scaleServices",
+	"/PUT/uui-lcm/services/updateService/:id":
+		"/uui-lcm_services_updateService",
+	"/uui-sotn/getPnfInfo/:name": "/uui-sotn_getPnfInfo",
+	"/uui-sotn/getConnectivityInfo/:id": "/uui-sotn_getConnectivityInfo",
+	"/uui-sotn/getPinterfaceByVpnId/:id": "/uui-sotn_getPinterfaceByVpnId",
+	"/POST/uui-lcm/healNetworkServiceInstance?ns_instance_id=:ns_instance_id":
+		"/uui-lcm_healNetworkServiceInstance",
+	"/POST/uui-lcm/services?customerId=:customerId&serviceType=:serviceType&serviceDomain=:serviceDomain":
+		"/uui-lcm_services",
+	"/POST/uui-lcm/createNetworkServiceInstance":
+		"/uui-lcm_createNetworkServiceInstance",
+	"/POST/uui-lcm/instantiateNetworkServiceInstance?ns_instance_id=:ns_instance_id&customerId=:customerId&serviceType=:serviceType&serviceDomain=:serviceDomain&parentServiceInstanceId=":
+		"/uui-lcm_instantiateNetworkServiceInstance",
+	"/POST/uui-lcm/terminateNetworkServiceInstance?ns_instance_id=:ns_instance_id":
+		"/uui-lcm_terminateNetworkServiceInstance",
+	"/DELETE/uui-lcm/deleteNetworkServiceInstance?ns_instance_id=:ns_instance_id":
+		"/uui-lcm_deleteNetworkServiceInstance",
+	/////////////////////////
 
-        ///////<-------------networkhttp services--------->/////
-        "/DELETE/uui-sotn/deleteExtNetWork": "/status",
-        "/uui-sotn/getPinterfaceByPnfName/:pnfName": "/uui-sotn_getPinterfaceByPnfName",
-        "/PUT/uui-sotn/createLink/:linkName": "/status",
-        "/uui-sotn/getSpecificLogicalLink/:linkName": "/uui-sotn_getSpecificLogicalLink",
-        "/uui-sotn/getHostUrl/:aaiId": "/uui-sotn_getHostUrl",
-        "/uui-sotn/getExtAaiId/:aaiId": "/uui-sotn_getExtAaiId",
-        "/PUT/uui-sotn/createTopoNetwork/:networkId": "/status",
-        "/PUT/uui-sotn/createPnf/:nodeName": "/status",
-        "/PUT/uui-sotn/pnf/:nodeName/p-interfaces/p-interface/:interfaceName/createTerminationPoint": "/status",
-        "/PUT/uui-sotn/createHostUrl/:aaiId": "/status",
-        /////////////////////////
+	///////<-------------networkhttp services--------->/////
+	"/DELETE/uui-sotn/deleteExtNetWork": "/status",
+	"/uui-sotn/getPinterfaceByPnfName/:pnfName":
+		"/uui-sotn_getPinterfaceByPnfName",
+	"/PUT/uui-sotn/createLink/:linkName": "/status",
+	"/uui-sotn/getSpecificLogicalLink/:linkName":
+		"/uui-sotn_getSpecificLogicalLink",
+	"/uui-sotn/getHostUrl/:aaiId": "/uui-sotn_getHostUrl",
+	"/uui-sotn/getExtAaiId/:aaiId": "/uui-sotn_getExtAaiId",
+	"/PUT/uui-sotn/createTopoNetwork/:networkId": "/status",
+	"/PUT/uui-sotn/createPnf/:nodeName": "/status",
+	"/PUT/uui-sotn/pnf/:nodeName/p-interfaces/p-interface/:interfaceName/createTerminationPoint":
+		"/status",
+	"/PUT/uui-sotn/createHostUrl/:aaiId": "/status",
+	/////////////////////////
 
-        ///////<-------------onboard services--------->/////
-        "/nsd/v1/ns_descriptors/:nsdInfoId/nsd_content": "/nsd_content",
-        "/vnfpkgm/v1/vnf_packages/:vnfPkgId/package_content": "/nsd_content",
-        "/nsd/v1/pnf_descriptors/:pnfdInfoId/pnfd_content": "/nsd_content",
-        "/uui-lcm/jobs/:_jobId": "/uui-lcm_jobs_progress",
-        "/DELETE/uui-lcm/deleteNsdPackage?nsdInfoId:id": "/DELETE_uui-lcm_deleteNsdPackage",
-        "/DELETE/uui-lcm/deleteVnfPackage?vnfPkgId:id": "/DELETE_uui-lcm_deleteVnfPackage",
-        "/DELETE/uui-lcm/deletePnfPackage?pnfdInfoId:id": "/DELETE_uui-lcm_deletePnfPackage",
-        "/POST/uui-lcm/ns-packages": "/POST_uui-lcm_ns-packages",
-        "/POST/uui-lcm/vf-packages": "/POST_uui-lcm_vf-packages",
-        "/POST/uui-lcm/:jsonData": "/POST_uui-lcm_create",
+	///////<-------------onboard services--------->/////
+	"/nsd/v1/ns_descriptors/:nsdInfoId/nsd_content": "/nsd_content",
+	"/vnfpkgm/v1/vnf_packages/:vnfPkgId/package_content": "/nsd_content",
+	"/nsd/v1/pnf_descriptors/:pnfdInfoId/pnfd_content": "/nsd_content",
+	"/uui-lcm/jobs/:_jobId": "/uui-lcm_jobs_progress",
+	"/DELETE/uui-lcm/deleteNsdPackage?nsdInfoId:id":
+		"/DELETE_uui-lcm_deleteNsdPackage",
+	"/DELETE/uui-lcm/deleteVnfPackage?vnfPkgId:id":
+		"/DELETE_uui-lcm_deleteVnfPackage",
+	"/DELETE/uui-lcm/deletePnfPackage?pnfdInfoId:id":
+		"/DELETE_uui-lcm_deletePnfPackage",
+	"/POST/uui-lcm/ns-packages": "/POST_uui-lcm_ns-packages",
+	"/POST/uui-lcm/vf-packages": "/POST_uui-lcm_vf-packages",
+	"/POST/uui-lcm/:jsonData": "/POST_uui-lcm_create",
 
-        ///////<-------------slicing--------->/////
-        "/uui-slicing/nsmf/task/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_task_list",
-        "/uui-slicing/nsmf/task/:processingStatus/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_task_processing_status",
-        "/uui-slicing/nsmf/task/:taskId/auditInfo": "/slicing_task_auditInfo",
-        "/uui-slicing/nsmf/resource/nsi/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nsi_list",
-        "/uui-slicing/nsmf/resource/nsi/:nsiId/nssiInstances": "/slicing_subnet_instance",
-        "/uui-slicing/nsmf/resource/nssi/environmentContext/:environmentContext/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_subnet_context",
-        "/uui-slicing/nsmf/task/:taskId/taskCreationInfo": "/slicing_taskCreationInfo",
-        "/uui-slicing/nsmf/task/:taskId/taskCreationProgress": "/slicing_taskCreationProgress",
-        "/PUT/uui-slicing/nsmf/task/auditInfo": "/PUT_task_auditInfo",
+	///////<-------------slicing--------->/////
+	"/uui-slicing/nsmf/task/business/pageNo/:pageNo/pageSize/:pageSize":
+		"/slicing_task_list",
+	"/uui-slicing/nsmf/task/:processingStatus/business/pageNo/:pageNo/pageSize/:pageSize":
+		"/slicing_task_processing_status",
+	"/uui-slicing/nsmf/task/:taskId/auditInfo": "/slicing_task_auditInfo",
+	"/uui-slicing/nsmf/resource/nsi/instances/pageNo/:pageNo/pageSize/:pageSize":
+		"/slicing_nsi_list",
+	"/uui-slicing/nsmf/resource/nsi/:nsiId/nssiInstances":
+		"/slicing_subnet_instance",
+	"/uui-slicing/nsmf/resource/nssi/environmentContext/:environmentContext/instances/pageNo/:pageNo/pageSize/:pageSize":
+		"/slicing_subnet_context",
+	"/uui-slicing/nsmf/task/:taskId/taskCreationInfo":
+		"/slicing_taskCreationInfo",
+	"/uui-slicing/nsmf/task/:taskId/taskCreationProgress":
+		"/slicing_taskCreationProgress",
+	"/PUT/uui-slicing/nsmf/task/auditInfo": "/PUT_task_auditInfo",
 
-        ///////<-------------slicing_business--------->/////
-        "/uui-slicing/nsmf/resource/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_business_list",
-        "/uui-slicing/nsmf/resource/:businessStatus/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_business_list_activated",
-        "/PUT/uui-slicing/nsmf/resource/:serviceId/activate": "/slicing_business_activate",
-        "/PUT/uui-slicing/nsmf/resource/:serviceId/deactivate": "/slicing_business_activate",
-        "/DELETE/uui-slicing/nsmf/resource/:serviceId": "/slicing_business_activate",
-        "/uui-slicing/nsmf/resource/:serviceId/progress":"/getSlicingBusinessProgress",
-        "/uui-slicing/nsmf/resource/business/:businessId/details":"/getSlicingBusinessDetail",
-        ///////<-------------slicing_nsi--------->/////
-        "/uui-slicing/nsmf/resource/nsi/:instanceStatus/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nsi_list_activated",
-        "/uui-slicing/nsmf/resource/nsi/:nsiId/details":"/getSlicingNsiDetail",
-        ///////<-------------slicing_nssi--------->/////
-        "/uui-slicing/nsmf/resource/nssi/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nssi_list",
-        "/uui-slicing/nsmf/resource/nssi/instanceStatus/:instanceStatus/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nssi_list_activated",
-        "/uui-slicing/nsmf/resource/nssi/:nssiId/details":"/getSlicingNssiDetail",
-        "/uui-slicing/nsmf/connectionlinktable": "/tn_connectionLinkTable", // :todo
-        ///////<-------------CSMF slicing_business--------->/////
-        "/uui-slicing/csmf/5gSlicing/orders/status/:status/pageNo/:pageNo/pageSize/:pageSize": "/csmf_slicing_businessData",
-        "/POST/uui-slicing/csmf/5gSlicing": "/csmf_slicing_purchase",
-        "/PUT/usecaseui/csmf/5gSlicing/service/:serviceId/activate": "/csmfActivate",
-        "/DELETE/usecaseui/csmf/5gSlicing/service/:serviceId": "/csmfTerminate",
-        "/5gSlicing/service/:serviceId/progress": "/csmfSlicingProgress",
-        ///////<-------------monitor 5G--------->/////
-        "/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/trafficData": "/fetchTrafficData",
-        "/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/onlineUsers": "/fetchOnlineusersData",
-        "/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/bandwidth": "/fetchBandwidthData",
-        ///////<-------------general interface--------->/////
-        "/api/*": "/$1",
-        "/*/*": "/$1_$2",
-        "/*/*/*": "/$1_$2_$3",
-        "/*/*/*/*": "/$1_$2_$3_$4",
-        /////////////////////////
-    }
+	///////<-------------slicing_business--------->/////
+	"/uui-slicing/nsmf/resource/business/pageNo/:pageNo/pageSize/:pageSize":
+		"/slicing_business_list",
+	"/uui-slicing/nsmf/resource/:businessStatus/business/pageNo/:pageNo/pageSize/:pageSize":
+		"/slicing_business_list_activated",
+	"/PUT/uui-slicing/nsmf/resource/:serviceId/activate":
+		"/slicing_business_activate",
+	"/PUT/uui-slicing/nsmf/resource/:serviceId/deactivate":
+		"/slicing_business_activate",
+	"/DELETE/uui-slicing/nsmf/resource/:serviceId":
+		"/slicing_business_activate",
+	"/uui-slicing/nsmf/resource/:serviceId/progress":
+		"/getSlicingBusinessProgress",
+	"/uui-slicing/nsmf/resource/business/:businessId/details":
+		"/getSlicingBusinessDetail",
+	///////<-------------slicing_nsi--------->/////
+	"/uui-slicing/nsmf/resource/nsi/:instanceStatus/instances/pageNo/:pageNo/pageSize/:pageSize":
+		"/slicing_nsi_list_activated",
+	"/uui-slicing/nsmf/resource/nsi/:nsiId/details": "/getSlicingNsiDetail",
+	///////<-------------slicing_nssi--------->/////
+	"/uui-slicing/nsmf/resource/nssi/instances/pageNo/:pageNo/pageSize/:pageSize":
+		"/slicing_nssi_list",
+	"/uui-slicing/nsmf/resource/nssi/instanceStatus/:instanceStatus/instances/pageNo/:pageNo/pageSize/:pageSize":
+		"/slicing_nssi_list_activated",
+	"/uui-slicing/nsmf/resource/nssi/:nssiId/details": "/getSlicingNssiDetail",
+	"/uui-slicing/csmf/5gSlicing/connectionLinks/pageNo/:pageNo/pageSize/:pageSize":
+		"/tn_connectionLinkTable", // :todo
+	///////<-------------CSMF slicing_business--------->/////
+	"/uui-slicing/csmf/5gSlicing/orders/status/:status/pageNo/:pageNo/pageSize/:pageSize":
+		"/csmf_slicing_businessData",
+	"/POST/uui-slicing/csmf/5gSlicing": "/csmf_slicing_purchase",
+	"/PUT/usecaseui/csmf/5gSlicing/service/:serviceId/activate":
+		"/csmfActivate",
+	"/DELETE/usecaseui/csmf/5gSlicing/service/:serviceId": "/csmfTerminate",
+	"/5gSlicing/service/:serviceId/progress": "/csmfSlicingProgress",
+	///////<-------------monitor 5G--------->/////
+	"/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/trafficData":
+		"/fetchTrafficData",
+	"/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/onlineUsers":
+		"/fetchOnlineusersData",
+	"/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/bandwidth":
+		"/fetchBandwidthData",
+	///////<-------------general interface--------->/////
+	"/api/*": "/$1",
+	"/*/*": "/$1_$2",
+	"/*/*/*": "/$1_$2_$3",
+	"/*/*/*/*": "/$1_$2_$3_$4",
+	/////////////////////////
+};
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
index a84fe335..37e5db5b 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
@@ -57,7 +57,8 @@
 					</nz-input-group>
 					<!-- connection links table -->
 					<div *ngIf="item.type==='table-radio'">
-						<nz-table #basicTable [nzData]="connectionLinkTable" nzShowPagination="true" nzPageSize="2">
+						<nz-table #basicTable [nzData]="connectionLinkTable" nzShowPagination="true"
+							[nzPageSize]="pageSize" (nzPageIndexChange)="pageIndexChange($event)">
 							<thead>
 								<tr>
 									<th *ngFor="let val of connectionTableHeader" class="subnet_td">{{val}}</th>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
index 96d31b3c..636fd9e6 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
@@ -47,6 +47,9 @@ export class SubnetParamsModelComponent implements OnInit {
 	notPassPara: string[] = ["tn_connection_links"];
 	connectionLinkTable: any[] = [];
 	connectionTableHeader: string[] = [];
+	pageSize: number = 2;
+	recordNum: number = 0;
+	hasPageNo: number[] = [];
 	objectKeys = Object.keys;
 	//  Comment: Above code
 
@@ -69,7 +72,9 @@ export class SubnetParamsModelComponent implements OnInit {
 						? CORE_FORM_ITEMS.Cn
 						: [];
 			} else if (this.title === "Tn") {
-				this.getConnectionLinkTable();
+				const pageNo = 1; // start from page 1
+				const pageSize = this.pageSize;
+				this.getConnectionLinkTable(pageNo, pageSize);
 				this.ANkeyList = this.transferFormItems
 					.find((item) => {
 						return item.title === "AN Endpoint";
@@ -149,12 +154,56 @@ export class SubnetParamsModelComponent implements OnInit {
 		}
 	}
 
-	getConnectionLinkTable(): void {
+	getConnectionLinkTable(pageNo, pageSize): void {
+		const pageObj = {
+			pageNo: pageNo,
+			pageSize: pageSize,
+		};
 		this.http
-			.getConnectionLinkTable(this.getConnetionFailed)
+			.getConnectionLinkTable(pageObj, this.getConnetionFailed)
 			.then((res) => {
-				this.connectionLinkTable =
-					res.result_body.connection_links_list;
+				if (pageNo === 1) {
+					// the first page
+					this.connectionLinkTable =
+						res.result_body.connection_links_list;
+					this.recordNum = res.result_body.record_number;
+					// Use default value to occupy
+					let defaultItem: object = {};
+					if (this.connectionLinkTable.length !== 0) {
+						defaultItem = JSON.parse(
+							JSON.stringify(this.connectionLinkTable[0])
+						);
+						for (let key in defaultItem) {
+							if (!this.isObject(defaultItem[key])) {
+								defaultItem[key] = "";
+							}
+							// else {
+							// 	for (let i in defaultItem[key]) {
+							// 		defaultItem[key][i] = "";
+							// 	}
+							// }
+						}
+						for (let i = pageSize; i < this.recordNum; i++) {
+							this.connectionLinkTable.push(defaultItem);
+						}
+					}
+					this.hasPageNo = [1];
+				} else if (pageNo > 1) {
+					// delete the default page of the page and add the actual data of the page
+					const startIndex = pageSize * (pageNo - 1);
+					const endIndex = startIndex + pageSize - 1;
+					this.connectionLinkTable.splice(startIndex, pageSize);
+					const frontArr = this.connectionLinkTable.slice(
+						0,
+						startIndex
+					);
+					const backArr = this.connectionLinkTable.slice(startIndex);
+					this.connectionLinkTable = frontArr.concat(
+						res.result_body.connection_links_list,
+						backArr
+					);
+				}
+				this.hasPageNo.push(pageNo);
 				this.addCheckStatus(); // add init check status for connection link table
 				this.judgeTn(); // init judge
 				this.getTableHeader();
@@ -197,6 +246,12 @@ export class SubnetParamsModelComponent implements OnInit {
 		});
 	}
 
+	pageIndexChange(e) {
+		// judge whether there is data of the page, if not, request it from the back end
+		if (this.hasPageNo.indexOf(e) === -1) {
+			this.getConnectionLinkTable(e, this.pageSize);
+		}
+	}
 	getConnetionFailed() {
 		console.log("failed");
 	}