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 --- .../csmf-slicing-business-management.component.ts | 412 +++++++++++---------- 1 file changed, 226 insertions(+), 186 deletions(-) (limited to 'usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management') 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(); + } } -- cgit 1.2.3-korg