From de369a26154bcc127cefe5df99d7927f53ef6211 Mon Sep 17 00:00:00 2001 From: wangyuerg Date: Wed, 3 Mar 2021 15:13:37 +0800 Subject: refactor: add a variable to control the frequency of polling uniformly Signed-off-by: wangyuerg Change-Id: I80d7b50d3158d4fbd1ac714ded9ba7372068087b Issue-ID: USECASEUI-527 --- .../views/services/slicing-management/constant.ts | 3 + .../csmf-slicing-business-management.component.ts | 412 +++++++++------- .../slicing-business-table.component.ts | 533 +++++++++++++-------- .../slicing-task-management.component.ts | 4 +- 4 files changed, 552 insertions(+), 400 deletions(-) create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/constant.ts (limited to 'usecaseui-portal/src/app/views') 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: 'Are you sure you want to perform this task?', - nzContent: 'Name:' + slicing.order_name + '', - 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: "Are you sure you want to perform this task?", + nzContent: "Name:" + slicing.order_name + "", + 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: 'Name: ' + 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: "Name: " + 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: 'Do you Want to ' + (slicing.orchestration_status === 'activated' ? 'deactivate' : 'activate') + ' slicing business?', - nzContent: 'Name:' + slicing.service_instance_name + '', - 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: 'Name: ' + 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: + "Do you Want to " + + (slicing.orchestration_status === "activated" + ? "deactivate" + : "activate") + + " slicing business?", + nzContent: "Name:" + slicing.service_instance_name + "", + 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: "Name: " + 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); } } } -- cgit 1.2.3-korg