Merge "refactor: add a variable to control the frequency of polling uniformly"

4 files changed, 552 insertions, 400 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/constant.ts b/usecaseui-portal/src/app/views/services/slicing-management/constant.ts
new file mode 100644
index 00000000..2cdf6cbe
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/constant.ts
@@ -0,0 +1,3 @@
+// The polling interval of this module is set here uniformly
+// communication service, sclcing resouce management--slicing business management,
+export const INTERVAL_TIME = 5000;
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
index 288ad2c2..a0a96b3f 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
@@ -1,201 +1,241 @@
-import {Component, Input, OnInit, SimpleChanges} from '@angular/core';
+import { Component, Input, OnInit, SimpleChanges } from "@angular/core";
 import { BUSINESS_STATUS } from "../../../../../constants/constants";
-import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices';
-import { NzModalService, NzMessageService } from 'ng-zorro-antd';
-import * as moment from 'moment';
+import { SlicingTaskServices } from ".././../../../core/services/slicingTaskServices";
+import { NzModalService, NzMessageService } from "ng-zorro-antd";
+import * as moment from "moment";
+import { INTERVAL_TIME } from "../constant";
 @Component({
-    selector: 'app-csmf-slicing-business-management',
-    templateUrl: './csmf-slicing-business-management.component.html',
-    styleUrls: ['./csmf-slicing-business-management.component.less']
+	selector: "app-csmf-slicing-business-management",
+	templateUrl: "./csmf-slicing-business-management.component.html",
+	styleUrls: ["./csmf-slicing-business-management.component.less"],
 })
 export class CsmfSlicingBusinessManagementComponent implements OnInit {
+	constructor(
+		private myhttp: SlicingTaskServices,
+		private modalService: NzModalService,
+		private message: NzMessageService
+	) {}
+	@Input() currentTabTitle;
 
-    constructor(
-        private myhttp: SlicingTaskServices,
-        private modalService: NzModalService,
-        private message: NzMessageService
-    ) {
-    }
-    @Input() currentTabTitle;
+	intervalTime: number = INTERVAL_TIME;
 
-    ngOnChanges(changes: SimpleChanges) {
-        if(changes.currentTabTitle.currentValue === 'Communication Service'){
-            this.getCSMFBusinessList()
-        }else {
-            this.progressingTimer.forEach((item) => {
-                clearInterval(item.timer);
-            });
-            this.progressingTimer = [];
-        }
-    }
+	ngOnChanges(changes: SimpleChanges) {
+		if (changes.currentTabTitle.currentValue === "Communication Service") {
+			this.getCSMFBusinessList();
+		} else {
+			this.progressingTimer.forEach((item) => {
+				clearInterval(item.timer);
+			});
+			this.progressingTimer = [];
+		}
+	}
 
-    ngOnInit() {}
+	ngOnInit() {}
 
-    ngOnDestroy() {
-        this.progressingTimer.forEach((item) => {
-            clearInterval(item.timer)
-        })
-    }
+	ngOnDestroy() {
+		this.progressingTimer.forEach((item) => {
+			clearInterval(item.timer);
+		});
+	}
 
-    selectedValue: string = BUSINESS_STATUS[0];
-    listOfData: any[] = [];
-    pageIndex: number = 1;
-    pageSize: number = 10;
-    total: number = 0;
-    loading = false;
-    statusOptions: any[] = BUSINESS_STATUS;
-    progressingTimer: any[] = [];
-    terminateStart: any[] = [];
-    businessOrderShow: boolean = false;
-    getCSMFBusinessList(): void {
-        this.loading = true;
-        // this.listOfData = []; //solve the problem of blank screen after each operation
-        const paramsObj = {
-            status: this.selectedValue.toLocaleLowerCase(),
-            pageNo: this.pageIndex,
-            pageSize: this.pageSize
-        };
-        const getCSMFSlicingBusinessListFailedCallback  = () => {
-            this.loading = false;
-        }
-        this.myhttp.getCSMFSlicingBusinessList(paramsObj, getCSMFSlicingBusinessListFailedCallback).then(res => {
-            const { result_body: { slicing_order_list, record_number } } = res;
-            this.loading = false;
-            this.total = record_number;
-            if (slicing_order_list !== null && slicing_order_list.length > 0) {
-                this.listOfData = slicing_order_list.map((item, index) => {
-                    item.order_creation_time = moment(Number(item.order_creation_time)).format('YYYY-MM-DD HH:mm:ss');
-                    if (item.last_operation_progress && item.last_operation_type && Number(item.last_operation_progress) < 100) {
-                        const updata = (prodata: { operation_progress: string }) => {
-                            item.last_operation_progress = prodata.operation_progress || item.last_operation_progress;
-                        };
-                        const obj = { serviceId: item.order_id };
-                        if (item.last_operation_type.toUpperCase() === 'DELETE') this.terminateStart[index] = true
-                        else this.terminateStart[index] = false;
-                        this.queryProgress(obj, index, updata).then(() => {
-                            item.last_operation_progress = '100';
-                            this.getCSMFBusinessList();
-                        })
-                    }
-                    return item
-                });
-            }   
-        })
-    }
+	selectedValue: string = BUSINESS_STATUS[0];
+	listOfData: any[] = [];
+	pageIndex: number = 1;
+	pageSize: number = 10;
+	total: number = 0;
+	loading = false;
+	statusOptions: any[] = BUSINESS_STATUS;
+	progressingTimer: any[] = [];
+	terminateStart: any[] = [];
+	businessOrderShow: boolean = false;
+	getCSMFBusinessList(): void {
+		this.loading = true;
+		// this.listOfData = []; //solve the problem of blank screen after each operation
+		const paramsObj = {
+			status: this.selectedValue.toLocaleLowerCase(),
+			pageNo: this.pageIndex,
+			pageSize: this.pageSize,
+		};
+		const getCSMFSlicingBusinessListFailedCallback = () => {
+			this.loading = false;
+		};
+		this.myhttp
+			.getCSMFSlicingBusinessList(
+				paramsObj,
+				getCSMFSlicingBusinessListFailedCallback
+			)
+			.then((res) => {
+				const {
+					result_body: { slicing_order_list, record_number },
+				} = res;
+				this.loading = false;
+				this.total = record_number;
+				if (
+					slicing_order_list !== null &&
+					slicing_order_list.length > 0
+				) {
+					this.listOfData = slicing_order_list.map((item, index) => {
+						item.order_creation_time = moment(
+							Number(item.order_creation_time)
+						).format("YYYY-MM-DD HH:mm:ss");
+						if (
+							item.last_operation_progress &&
+							item.last_operation_type &&
+							Number(item.last_operation_progress) < 100
+						) {
+							const updata = (prodata: {
+								operation_progress: string;
+							}) => {
+								item.last_operation_progress =
+									prodata.operation_progress ||
+									item.last_operation_progress;
+							};
+							const obj = { serviceId: item.order_id };
+							if (
+								item.last_operation_type.toUpperCase() ===
+								"DELETE"
+							)
+								this.terminateStart[index] = true;
+							else this.terminateStart[index] = false;
+							this.queryProgress(obj, index, updata).then(() => {
+								item.last_operation_progress = "100";
+								this.getCSMFBusinessList();
+							});
+						}
+						return item;
+					});
+				}
+			});
+	}
 
-    getListOfProcessingStatus(): void {
-        this.pageIndex = 1;
-        this.pageSize = 10;
-        this.progressingTimer.forEach((item) => {
-            clearInterval(item.timer);
-        });
-        this.progressingTimer = [];
-        this.getCSMFBusinessList();
-    }
+	getListOfProcessingStatus(): void {
+		this.pageIndex = 1;
+		this.pageSize = 10;
+		this.progressingTimer.forEach((item) => {
+			clearInterval(item.timer);
+		});
+		this.progressingTimer = [];
+		this.getCSMFBusinessList();
+	}
 
-    searchData(): void {
-        this.progressingTimer.forEach((item) => {
-            clearInterval(item.timer);
-        });
-        this.progressingTimer = [];
-        this.getCSMFBusinessList();
-    }
+	searchData(): void {
+		this.progressingTimer.forEach((item) => {
+			clearInterval(item.timer);
+		});
+		this.progressingTimer = [];
+		this.getCSMFBusinessList();
+	}
 
-    switchChange(slicing:any, i:number): void {
-        this.modalService.confirm({
-            nzTitle: '<i>Are you sure you want to perform this task?</i>',
-            nzContent: '<b>Name:' + slicing.order_name + '</b>',
-            nzOnOk: () => {
-                let paramsObj = {
-                    serviceId: slicing.order_id
-                };
-                if (slicing.order_status === 'activated') {
-                    this.changeActivate(paramsObj, false, i)
-                } else {
-                    this.changeActivate(paramsObj, true, i);
-                }
-            },
-            nzCancelText: 'No',
-            nzOnCancel: () => {
-                const singleSlicing = Object.assign({}, this.listOfData[i]);
-                this.listOfData[i] = singleSlicing;
-                this.listOfData = [...this.listOfData];
-            }
-        });
-    }
-    changeActivate(paramsObj: any, isActivate: boolean, index: number): void {
-        const changeActivateFailedCallback = () => {
-            const singleSlicing = Object.assign({}, this.listOfData[index]);
-            this.listOfData[index] = singleSlicing;
-            this.listOfData = [...this.listOfData];
-            this.getCSMFBusinessList();
-        }
-        this.myhttp.changeActivateSlicingService(paramsObj, isActivate, changeActivateFailedCallback).then((res) => {
-            this.getCSMFBusinessList();
-        })
-    }
+	switchChange(slicing: any, i: number): void {
+		this.modalService.confirm({
+			nzTitle: "<i>Are you sure you want to perform this task?</i>",
+			nzContent: "<b>Name:" + slicing.order_name + "</b>",
+			nzOnOk: () => {
+				let paramsObj = {
+					serviceId: slicing.order_id,
+				};
+				if (slicing.order_status === "activated") {
+					this.changeActivate(paramsObj, false, i);
+				} else {
+					this.changeActivate(paramsObj, true, i);
+				}
+			},
+			nzCancelText: "No",
+			nzOnCancel: () => {
+				const singleSlicing = Object.assign({}, this.listOfData[i]);
+				this.listOfData[i] = singleSlicing;
+				this.listOfData = [...this.listOfData];
+			},
+		});
+	}
+	changeActivate(paramsObj: any, isActivate: boolean, index: number): void {
+		const changeActivateFailedCallback = () => {
+			const singleSlicing = Object.assign({}, this.listOfData[index]);
+			this.listOfData[index] = singleSlicing;
+			this.listOfData = [...this.listOfData];
+			this.getCSMFBusinessList();
+		};
+		this.myhttp
+			.changeActivateSlicingService(
+				paramsObj,
+				isActivate,
+				changeActivateFailedCallback
+			)
+			.then((res) => {
+				this.getCSMFBusinessList();
+			});
+	}
 
-    terminate(slicing: any, index: number): void {
-        this.modalService.confirm({
-            nzTitle: 'Are you sure you want to terminate this task?',
-            nzContent: '<b>Name:&nbsp;</b>' + slicing.order_name,
-            nzOnOk: () => {
-                const paramsObj = { serviceId: slicing.order_id };
-                this.terminateStart[index] = true;
-                const terminateFailedCallback  = () => {
-                    this.terminateStart[index] = false;
-                }
-                this.myhttp.terminateSlicingService(paramsObj, terminateFailedCallback).then(res => {
-                    this.getCSMFBusinessList();
-                })
-            },
-            nzCancelText: 'No',
-            nzOnCancel: () => {
-                console.info('Cancel termination')
-            }
-        });
-    }
-    queryProgress(obj:any, index:number, callback:any) {
-        return new Promise(res => {
-            const requery = () => {
-                const queryProgressFailedCallback  = () => {
-                    this.progressingTimer.forEach((item) => {
-                        if (item.serviceId === obj.serviceId) {
-                            clearInterval(item.timer);
-                        }
-                    });
-                    this.getCSMFBusinessList();
-                }
-                this.myhttp.getSlicingBusinessProgress(obj, queryProgressFailedCallback)
-                    .then((data) => {
-                        if (data.result_body.operation_progress && Number(data.result_body.operation_progress) < 100) {
-                            callback(data.result_body);
-                            let progressSetTimeOut = setTimeout(() => {
-                                requery();
-                            }, 5000);
-                            this.progressingTimer.push({
-                                id: obj.serviceId,
-                                timer: progressSetTimeOut
-                            })
-                        } else {
-                            this.progressingTimer.forEach((item) => {
-                                if (item.serviceId === obj.serviceId) {
-                                    clearInterval(item.timer);
-                                }
-                            });
-                            res(data.result_body);
-                        }
-                    })
-            };
-            requery();
-        })
-    }
+	terminate(slicing: any, index: number): void {
+		this.modalService.confirm({
+			nzTitle: "Are you sure you want to terminate this task?",
+			nzContent: "<b>Name:&nbsp;</b>" + slicing.order_name,
+			nzOnOk: () => {
+				const paramsObj = { serviceId: slicing.order_id };
+				this.terminateStart[index] = true;
+				const terminateFailedCallback = () => {
+					this.terminateStart[index] = false;
+				};
+				this.myhttp
+					.terminateSlicingService(paramsObj, terminateFailedCallback)
+					.then((res) => {
+						this.getCSMFBusinessList();
+					});
+			},
+			nzCancelText: "No",
+			nzOnCancel: () => {
+				console.info("Cancel termination");
+			},
+		});
+	}
+	queryProgress(obj: any, index: number, callback: any) {
+		return new Promise((res) => {
+			const requery = () => {
+				const queryProgressFailedCallback = () => {
+					this.progressingTimer.forEach((item) => {
+						if (item.serviceId === obj.serviceId) {
+							clearInterval(item.timer);
+						}
+					});
+					this.getCSMFBusinessList();
+				};
+				this.myhttp
+					.getSlicingBusinessProgress(
+						obj,
+						queryProgressFailedCallback
+					)
+					.then((data) => {
+						if (
+							data.result_body.operation_progress &&
+							Number(data.result_body.operation_progress) < 100
+						) {
+							callback(data.result_body);
+							let progressSetTimeOut = setTimeout(() => {
+								requery();
+							}, this.intervalTime);
+							this.progressingTimer.push({
+								id: obj.serviceId,
+								timer: progressSetTimeOut,
+							});
+						} else {
+							this.progressingTimer.forEach((item) => {
+								if (item.serviceId === obj.serviceId) {
+									clearInterval(item.timer);
+								}
+							});
+							res(data.result_body);
+						}
+					});
+			};
+			requery();
+		});
+	}
 
-    OrderModelShow(): void {
-        this.businessOrderShow = true;
-    }
-    orderModelClose($event: any): void {
-        this.businessOrderShow = $event;
-        this.getCSMFBusinessList();
-    }
+	OrderModelShow(): void {
+		this.businessOrderShow = true;
+	}
+	orderModelClose($event: any): void {
+		this.businessOrderShow = $event;
+		this.getCSMFBusinessList();
+	}
 }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
index a5409926..60cfea7b 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
@@ -1,221 +1,328 @@
-import {Component, Input, OnInit, ViewChild,SimpleChanges} from '@angular/core';
-import { SlicingTaskServices } from '.././../../../../../core/services/slicingTaskServices';
-import { BUSINESS_STATUS } from '../../../../../../../constants/constants';
-import { NzModalService, NzMessageService } from 'ng-zorro-antd';
-import { SlicingBusinessModelComponent } from '../slicing-business-model/slicing-business-model.component';
+import {
+	Component,
+	Input,
+	OnInit,
+	ViewChild,
+	SimpleChanges,
+} from "@angular/core";
+import { SlicingTaskServices } from ".././../../../../../core/services/slicingTaskServices";
+import { BUSINESS_STATUS } from "../../../../../../../constants/constants";
+import { NzModalService, NzMessageService } from "ng-zorro-antd";
+import { SlicingBusinessModelComponent } from "../slicing-business-model/slicing-business-model.component";
+import { INTERVAL_TIME } from "../../../constant";
 @Component({
-    selector: 'app-slicing-business-table',
-    templateUrl: './slicing-business-table.component.html',
-    styleUrls: ['./slicing-business-table.component.less']
+	selector: "app-slicing-business-table",
+	templateUrl: "./slicing-business-table.component.html",
+	styleUrls: ["./slicing-business-table.component.less"],
 })
 export class SlicingBusinessTableComponent implements OnInit {
+	constructor(
+		private myhttp: SlicingTaskServices,
+		private modalService: NzModalService,
+		private message: NzMessageService
+	) {}
 
-    constructor(
-        private myhttp: SlicingTaskServices,
-        private modalService: NzModalService,
-        private message: NzMessageService
-    ) {
-    }
+	@Input() currentTabName;
 
-    @Input() currentTabName;
+	intervalTime: number = INTERVAL_TIME;
 
-    ngOnChanges(changes: SimpleChanges) {
-        if(changes.currentTabName.currentValue === 'Slicing Business Management'){
-            this.getBusinessList()
-        }else {
-            this.progressingTimer.forEach((item) => {
-                clearInterval(item.timer);
-            });
-            this.progressingTimer = [];
-        }
-    }
-    ngOnInit() {
+	ngOnChanges(changes: SimpleChanges) {
+		if (
+			changes.currentTabName.currentValue ===
+			"Slicing Business Management"
+		) {
+			this.getBusinessList();
+		} else {
+			this.progressingTimer.forEach((item) => {
+				clearInterval(item.timer);
+			});
+			this.progressingTimer = [];
+		}
+	}
+	ngOnInit() {}
+	ngOnDestroy() {
+		this.progressingTimer.forEach((item) => {
+			clearInterval(item.timer);
+		});
+	}
+	selectedValue: string = BUSINESS_STATUS[0];
+	listOfData: any[] = [];
+	pageIndex: number = 1;
+	pageSize: number = 10;
+	total: number = 0;
+	loading = false;
+	isSelect: boolean = false;
+	statusOptions: any[] = BUSINESS_STATUS;
+	progressingTimer: any[] = [];
+	terminateStart: any[] = [];
+	@ViewChild("notification") notification1: any;
 
-    }
-    ngOnDestroy() {
-        this.progressingTimer.forEach((item) => {
-            clearInterval(item.timer)
-        })
-    }
-    selectedValue: string = BUSINESS_STATUS[0];
-    listOfData: any[] = [];
-    pageIndex: number = 1;
-    pageSize: number = 10;
-    total: number = 0;
-    loading = false;
-    isSelect: boolean = false;
-    statusOptions: any[] = BUSINESS_STATUS;
-    progressingTimer: any[] = [];
-    terminateStart: any[] = [];
-    @ViewChild('notification') notification1: any;
-
-    getBusinessList(): void {
-        this.loading = true;
-        this.isSelect = false;
-        this.listOfData = [];
-        let paramsObj = {
-            pageNo: this.pageIndex,
-            pageSize: this.pageSize
-        };
-        if (this.selectedValue !== BUSINESS_STATUS[0]) {
-            paramsObj["businessStatus"] = this.selectedValue.toLocaleLowerCase();
-            this.isSelect = true;
-        }
-        let getSlicingBusinessListFailedCallback =  () => {
-            this.loading = false;
-        }
-        this.myhttp.getSlicingBusinessList(paramsObj, this.isSelect, getSlicingBusinessListFailedCallback).then(res => {
-            const { result_body: { slicing_business_list, record_number } } = res;
-            this.loading = false;
-            this.total = record_number;
-                if(slicing_business_list !==null && slicing_business_list.length >0){
-                    this.listOfData = slicing_business_list.map((item, index) => {
-                        if (item.last_operation_progress && item.last_operation_type && Number(item.last_operation_progress) < 100) {
-                            let updata = (prodata: { operation_progress: string })   => {
-                                item.last_operation_progress = prodata.operation_progress || item.last_operation_progress;
-                            };
-                            let obj = {
-                                serviceId: item.service_instance_id
-                            };
-                            if (item.last_operation_type.toUpperCase() === 'DELETE') this.terminateStart[index] = true
-                            else this.terminateStart[index] = false;
-                            this.queryProgress(obj, item.orchestration_status, index, updata).then((res) => {
-                                item.last_operation_progress = '100';
-                                this.getBusinessList();
-                            })
-                        }
-                        return item
-                    });
-                }
-        })
-    }
-    getListOfProcessingStatus() {
-        this.pageIndex = 1;
-        this.pageSize = 10;
-        this.progressingTimer.forEach((item) => {
-            clearInterval(item.timer);
-        });
-        this.progressingTimer = [];
-        this.getBusinessList();
-    }
-    searchData(reset: boolean = false) {
-        this.progressingTimer.forEach((item) => {
-            clearInterval(item.timer);
-        });
-        this.progressingTimer = [];
-        this.getBusinessList();
-    }
-    switchChange(slicing, i) {
-        this.modalService.confirm({
-            nzTitle: '<i>Do you Want to ' + (slicing.orchestration_status === 'activated' ? 'deactivate' : 'activate') + ' slicing business?</i>',
-            nzContent: '<b>Name:' + slicing.service_instance_name + '</b>',
-            nzOnOk: () => {
-                this.notification1.notificationStart('slicing business', slicing.orchestration_status === 'activated' ? 'deactivate' : 'activate', slicing.service_instance_id);
-                let paramsObj = {
-                    serviceId: slicing.service_instance_id
-                };
-                if (slicing.orchestration_status === 'activated') {
-                    this.changeActivate(paramsObj, false, slicing, "deactivate", "deactivated", i)
-                } else {
-                    this.changeActivate(paramsObj, true, slicing, "activate", "activated", i);
-                }
-            },
-            nzCancelText: 'No',
-            nzOnCancel: () => {
-                let singleSlicing = Object.assign({}, this.listOfData[i]);
-                this.listOfData[i] = singleSlicing;
-                this.listOfData = [...this.listOfData];
-            }
-        });
-    }
-    changeActivate(paramsObj, isActivate, slicing, activateValue, finished, index) {
-        this.loading = true;
-        let changeActivateFailedCallback = () => {
-            this.loading = false;
-            let singleSlicing = Object.assign({}, this.listOfData[index]);
-            this.listOfData[index] = singleSlicing;
-            this.listOfData = [...this.listOfData];
-            this.notification1.notificationFailed('slicing business', finished, slicing.service_instance_id);
-            this.getBusinessList();
-        }
-        this.myhttp.changeActivateSlicingService(paramsObj, isActivate, changeActivateFailedCallback).then(res => {
-            this.loading = false;
-            this.notification1.notificationSuccess('slicing business', finished, slicing.service_instance_id);
-            this.getBusinessList();
-        })
-    }
-    terminate(slicing,index) {
-        this.modalService.confirm({
-            nzTitle: 'Do you Want to terminate slicing business?',
-            nzContent: '<b>Name:&nbsp;</b>' + slicing.service_instance_name,
-            nzOnOk: () => {
-                this.notification1.notificationStart('slicing business', 'terminate', slicing.service_instance_id);
-                let paramsObj = { serviceId: slicing.service_instance_id };
-                this.terminateStart[index] = true;
-                this.loading = true;
-                let terminateFailedCallback  = () => {
-                    this.loading = false;
-                    this.notification1.notificationFailed('slicing business', 'terminate', slicing.service_instance_id);
-                    this.terminateStart[index] = false;
-                }
-                this.myhttp.terminateSlicingService(paramsObj, terminateFailedCallback).then(res => {
-                    this.loading = false;
-                    this.notification1.notificationSuccess('slicing business', 'terminate', slicing.service_instance_id);
-                    this.getBusinessList();
-                })
-            },
-            nzCancelText: 'No',
-            nzOnCancel: () => {
-                console.info('Cancel termination')
-            }
-        });
-    }
-    showdetail(data) {
-        const BusinessModal = this.modalService.create({
-            nzTitle: "Detail",
-            nzContent: SlicingBusinessModelComponent,
-            nzWidth: "70%",
-            nzOkText: null,
-            nzCancelText: null,
-            nzComponentParams: {
-                businessId: data.service_instance_id,
-                outerData:data
-            }
-        })
-    }
-    queryProgress(obj, action, index, callback) {
-        return new Promise(res => {
-            let requery = () => {
-                let queryProgressFailedCallback  = () => {
-                    this.progressingTimer.forEach((item) => {
-                        if (item.serviceId === obj.serviceId) {
-                            clearInterval(item.timer);
-                        }
-                    });
-                    this.getBusinessList();
-                }
-                this.myhttp.getSlicingBusinessProgress(obj, queryProgressFailedCallback)
-                    .then((data) => {
-                        if (data.result_body.operation_progress && Number(data.result_body.operation_progress) < 100) {
-                            callback(data.result_body);
-                            let progressSetTimeOut = setTimeout(() => {
-                                requery();
-                            }, 5000);
-                            this.progressingTimer.push({
-                                id: obj.serviceId,
-                                timer: progressSetTimeOut
-                            })
-                        } else {
-                            this.progressingTimer.forEach((item) => {
-                                if (item.serviceId === obj.serviceId) {
-                                    clearInterval(item.timer);
-                                }
-                            });
-                            res(data.result_body);
-                        }
-                    })
-            };
-            requery();
-        })
-    }
+	getBusinessList(): void {
+		this.loading = true;
+		this.isSelect = false;
+		this.listOfData = [];
+		let paramsObj = {
+			pageNo: this.pageIndex,
+			pageSize: this.pageSize,
+		};
+		if (this.selectedValue !== BUSINESS_STATUS[0]) {
+			paramsObj[
+				"businessStatus"
+			] = this.selectedValue.toLocaleLowerCase();
+			this.isSelect = true;
+		}
+		let getSlicingBusinessListFailedCallback = () => {
+			this.loading = false;
+		};
+		this.myhttp
+			.getSlicingBusinessList(
+				paramsObj,
+				this.isSelect,
+				getSlicingBusinessListFailedCallback
+			)
+			.then((res) => {
+				const {
+					result_body: { slicing_business_list, record_number },
+				} = res;
+				this.loading = false;
+				this.total = record_number;
+				if (
+					slicing_business_list !== null &&
+					slicing_business_list.length > 0
+				) {
+					this.listOfData = slicing_business_list.map(
+						(item, index) => {
+							if (
+								item.last_operation_progress &&
+								item.last_operation_type &&
+								Number(item.last_operation_progress) < 100
+							) {
+								let updata = (prodata: {
+									operation_progress: string;
+								}) => {
+									item.last_operation_progress =
+										prodata.operation_progress ||
+										item.last_operation_progress;
+								};
+								let obj = {
+									serviceId: item.service_instance_id,
+								};
+								if (
+									item.last_operation_type.toUpperCase() ===
+									"DELETE"
+								)
+									this.terminateStart[index] = true;
+								else this.terminateStart[index] = false;
+								this.queryProgress(
+									obj,
+									item.orchestration_status,
+									index,
+									updata
+								).then((res) => {
+									item.last_operation_progress = "100";
+									this.getBusinessList();
+								});
+							}
+							return item;
+						}
+					);
+				}
+			});
+	}
+	getListOfProcessingStatus() {
+		this.pageIndex = 1;
+		this.pageSize = 10;
+		this.progressingTimer.forEach((item) => {
+			clearInterval(item.timer);
+		});
+		this.progressingTimer = [];
+		this.getBusinessList();
+	}
+	searchData(reset: boolean = false) {
+		this.progressingTimer.forEach((item) => {
+			clearInterval(item.timer);
+		});
+		this.progressingTimer = [];
+		this.getBusinessList();
+	}
+	switchChange(slicing, i) {
+		this.modalService.confirm({
+			nzTitle:
+				"<i>Do you Want to " +
+				(slicing.orchestration_status === "activated"
+					? "deactivate"
+					: "activate") +
+				" slicing business?</i>",
+			nzContent: "<b>Name:" + slicing.service_instance_name + "</b>",
+			nzOnOk: () => {
+				this.notification1.notificationStart(
+					"slicing business",
+					slicing.orchestration_status === "activated"
+						? "deactivate"
+						: "activate",
+					slicing.service_instance_id
+				);
+				let paramsObj = {
+					serviceId: slicing.service_instance_id,
+				};
+				if (slicing.orchestration_status === "activated") {
+					this.changeActivate(
+						paramsObj,
+						false,
+						slicing,
+						"deactivate",
+						"deactivated",
+						i
+					);
+				} else {
+					this.changeActivate(
+						paramsObj,
+						true,
+						slicing,
+						"activate",
+						"activated",
+						i
+					);
+				}
+			},
+			nzCancelText: "No",
+			nzOnCancel: () => {
+				let singleSlicing = Object.assign({}, this.listOfData[i]);
+				this.listOfData[i] = singleSlicing;
+				this.listOfData = [...this.listOfData];
+			},
+		});
+	}
+	changeActivate(
+		paramsObj,
+		isActivate,
+		slicing,
+		activateValue,
+		finished,
+		index
+	) {
+		this.loading = true;
+		let changeActivateFailedCallback = () => {
+			this.loading = false;
+			let singleSlicing = Object.assign({}, this.listOfData[index]);
+			this.listOfData[index] = singleSlicing;
+			this.listOfData = [...this.listOfData];
+			this.notification1.notificationFailed(
+				"slicing business",
+				finished,
+				slicing.service_instance_id
+			);
+			this.getBusinessList();
+		};
+		this.myhttp
+			.changeActivateSlicingService(
+				paramsObj,
+				isActivate,
+				changeActivateFailedCallback
+			)
+			.then((res) => {
+				this.loading = false;
+				this.notification1.notificationSuccess(
+					"slicing business",
+					finished,
+					slicing.service_instance_id
+				);
+				this.getBusinessList();
+			});
+	}
+	terminate(slicing, index) {
+		this.modalService.confirm({
+			nzTitle: "Do you Want to terminate slicing business?",
+			nzContent: "<b>Name:&nbsp;</b>" + slicing.service_instance_name,
+			nzOnOk: () => {
+				this.notification1.notificationStart(
+					"slicing business",
+					"terminate",
+					slicing.service_instance_id
+				);
+				let paramsObj = { serviceId: slicing.service_instance_id };
+				this.terminateStart[index] = true;
+				this.loading = true;
+				let terminateFailedCallback = () => {
+					this.loading = false;
+					this.notification1.notificationFailed(
+						"slicing business",
+						"terminate",
+						slicing.service_instance_id
+					);
+					this.terminateStart[index] = false;
+				};
+				this.myhttp
+					.terminateSlicingService(paramsObj, terminateFailedCallback)
+					.then((res) => {
+						this.loading = false;
+						this.notification1.notificationSuccess(
+							"slicing business",
+							"terminate",
+							slicing.service_instance_id
+						);
+						this.getBusinessList();
+					});
+			},
+			nzCancelText: "No",
+			nzOnCancel: () => {
+				console.info("Cancel termination");
+			},
+		});
+	}
+	showdetail(data) {
+		const BusinessModal = this.modalService.create({
+			nzTitle: "Detail",
+			nzContent: SlicingBusinessModelComponent,
+			nzWidth: "70%",
+			nzOkText: null,
+			nzCancelText: null,
+			nzComponentParams: {
+				businessId: data.service_instance_id,
+				outerData: data,
+			},
+		});
+	}
+	queryProgress(obj, action, index, callback) {
+		return new Promise((res) => {
+			let requery = () => {
+				let queryProgressFailedCallback = () => {
+					this.progressingTimer.forEach((item) => {
+						if (item.serviceId === obj.serviceId) {
+							clearInterval(item.timer);
+						}
+					});
+					this.getBusinessList();
+				};
+				this.myhttp
+					.getSlicingBusinessProgress(
+						obj,
+						queryProgressFailedCallback
+					)
+					.then((data) => {
+						if (
+							data.result_body.operation_progress &&
+							Number(data.result_body.operation_progress) < 100
+						) {
+							callback(data.result_body);
+							let progressSetTimeOut = setTimeout(() => {
+								requery();
+							}, this.intervalTime);
+							this.progressingTimer.push({
+								id: obj.serviceId,
+								timer: progressSetTimeOut,
+							});
+						} else {
+							this.progressingTimer.forEach((item) => {
+								if (item.serviceId === obj.serviceId) {
+									clearInterval(item.timer);
+								}
+							});
+							res(data.result_body);
+						}
+					});
+			};
+			requery();
+		});
+	}
 }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
index 0ddc759a..908d30c7 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, SimpleChanges } from "@angular/core";
 import { SlicingTaskServices } from "@src/app/core/services/slicingTaskServices";
 import { TASK_PROCESSING_STATUS } from "./constants";
+import { INTERVAL_TIME } from "../constant";
 
 @Component({
 	selector: "app-slicing-task-management",
@@ -24,6 +25,7 @@ export class SlicingTaskManagementComponent implements OnInit {
 	total: number = 1;
 	pageSize: string = "10";
 	pageNum: string = "1";
+	intervalTime: number = INTERVAL_TIME;
 
 	ngOnChanges(changes: SimpleChanges) {
 		if (
@@ -161,7 +163,7 @@ export class SlicingTaskManagementComponent implements OnInit {
 				this.loading = true;
 				setTimeout(() => {
 					this.getTaskList();
-				}, 5000);
+				}, this.intervalTime);
 			}
 		}
 	}