diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services')
2 files changed, 86 insertions, 98 deletions
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html index 535ee012..804fd65b 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html @@ -9,19 +9,9 @@ </div> </div> <div class="slicing-resource-table-list"> - <nz-table - #basicTable - [nzData]="listOfData" - [nzFrontPagination]="false" - nzShowSizeChanger - [nzPageSizeOptions]="[5,10,15,20]" - [nzTotal]='total' - [(nzPageSize)]="pageSize" - [(nzPageIndex)]='pageIndex' - [nzLoading]="loading" - (nzPageIndexChange)="searchData()" - (nzPageSizeChange)="searchData(true)" - > + <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" nzShowSizeChanger + [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' + [nzLoading]="loading" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)"> <thead> <tr> <th>Service Instance Id</th> @@ -29,7 +19,7 @@ <th>Service Type</th> <th width="90px">S-NSSAI</th> <th width="110px">Status</th> - <th width="140px">Aciton</th> + <th width="140px">Aciton</th> <th width="110px">Detail</th> </tr> </thead> @@ -41,42 +31,39 @@ <td>{{ data.service_type }}</td> <td>{{ data.service_snssai }}</td> <td> - - <span class="marginLeft10"> - <span *ngIf="data.last_operation_progress !== 100"> - {{data.last_operation_progress+'%'}} + <span class="marginLeft10"> + <span *ngIf="data.last_operation_progress && data.last_operation_progress !== 100"> + {{data.last_operation_progress+'%'}} + </span> + <br> + {{data.orchestration_status}} </span> <br> - {{data.orchestration_status}} - </span> - <br> - </td> - <td> - <div class="action-icon"> - <nz-switch [ngModel]="data.orchestration_status==='activated'?true:false" - [nzDisabled]="data.last_operation_progress !== 100" - (ngModelChange)="switchChange(data,i)" - ></nz-switch> - <nz-progress *ngIf="data.last_operation_progress !== 100 && data.last_operation_type !== 'delete'" - [nzPercent]="data.last_operation_progress" - [nzShowInfo]="false" nzStatus="active"></nz-progress> - </div> - <div class="action-icon"> - <i [ngClass]="{'cannotclick':(data.last_operation_progress !== 100 && data.last_operation_type !== 'delete') || data.orchestration_status==='activated'}" - nz-icon - nzType="poweroff" - nzTheme="outline" - class="anticon anticon-poweroff" - (click)="terminate(data)" - ></i> - <nz-progress *ngIf="data.last_operation_progress !== 100 && terminateStart" - [nzPercent]="data.last_operation_progress" - [nzShowInfo]="false" nzStatus="active"></nz-progress> - </div> - </td> - <td> + </td> + <td> + <div class="action-icon"> + <nz-switch [ngModel]="data.orchestration_status==='activated'?true:false" + [nzDisabled]="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== 100" + (ngModelChange)="switchChange(data,i)"></nz-switch> + <nz-progress + *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== 100 && data.last_operation_type !== 'delete'" + [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active"> + </nz-progress> + </div> + <div class="action-icon"> + <i [ngClass]="{'cannotclick': data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== 100 && (data.last_operation_type !== 'delete' || data.orchestration_status==='activated')}" + nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff" + (click)="terminate(data)"></i> + <nz-progress + *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== 100 && terminateStart" + [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active"> + </nz-progress> + </div> + </td> + <td> <a (click)="showdetail(data)" - [ngClass]="{'cannotclick':data.last_operation_progress !== 100}">View Detail</a> + [ngClass]="{'cannotclick':data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== 100}">View + Detail</a> </td> </tr> </ng-template> 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 2dd1f0c8..bba63540 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,7 +1,7 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; -import {SlicingTaskServices} from '.././../../../../../core/services/slicingTaskServices'; -import {BUSINESS_STATUS} from '../../../../../../../constants/constants'; -import { NzModalService,NzMessageService } from 'ng-zorro-antd'; +import { Component, OnInit, ViewChild } 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'; @Component({ selector: 'app-slicing-business-table', @@ -14,7 +14,7 @@ export class SlicingBusinessTableComponent implements OnInit { private myhttp: SlicingTaskServices, private modalService: NzModalService, private message: NzMessageService - ) { + ) { } ngOnInit() { @@ -26,7 +26,7 @@ export class SlicingBusinessTableComponent implements OnInit { }) this.progressingTimer = []; } - selectedValue:string = BUSINESS_STATUS[0]; + selectedValue: string = BUSINESS_STATUS[0]; listOfData: any[] = []; pageIndex: number = 1; pageSize: number = 10; @@ -34,36 +34,36 @@ export class SlicingBusinessTableComponent implements OnInit { loading = false; isSelect: boolean = false; statusOptions: any[] = BUSINESS_STATUS; - progressingTimer :any[] = []; - terminateStart :boolean = false; + progressingTimer: any[] = []; + terminateStart: boolean = false; @ViewChild('notification') notification1: any; - getBusinessList (): void{ + getBusinessList(): void { this.loading = true; this.isSelect = false; let paramsObj = { pageNo: this.pageIndex, pageSize: this.pageSize }; - if(this.selectedValue !== BUSINESS_STATUS[0]){ + if (this.selectedValue !== BUSINESS_STATUS[0]) { paramsObj["businessStatus"] = this.selectedValue; this.isSelect = true; } - this.myhttp.getSlicingBusinessList(paramsObj,this.isSelect).subscribe (res => { - const { result_header: { result_code }, result_body: { slicing_business_list,record_number } } = res; + this.myhttp.getSlicingBusinessList(paramsObj, this.isSelect).subscribe(res => { + const { result_header: { result_code }, result_body: { slicing_business_list, record_number } } = res; if (+result_code === 200) { this.total = record_number; this.loading = false; - this.listOfData = slicing_business_list.map((item,index)=>{ - if(item.last_operation_progress!==null && item.last_operation_progress < 100 && item.last_operation_type!==null){ + this.listOfData = slicing_business_list.map((item, index) => { + if (item.last_operation_progress !== null && item.last_operation_progress < 100 && item.last_operation_type !== null) { let updata = (prodata) => { item.last_operation_progress = prodata.operation_progress || item.last_operation_progress; }; let obj = { serviceId: item.service_instance_id }; - if(item.last_operation_type === 'delete')this.terminateStart = true; - this.queryProgress(obj,item.orchestration_status,index, updata).then((res) => { + if (item.last_operation_type === 'delete') this.terminateStart = true; + this.queryProgress(obj, item.orchestration_status, index, updata).then((res) => { item.last_operation_progress = 100; }) } @@ -72,7 +72,7 @@ export class SlicingBusinessTableComponent implements OnInit { } }) } - getListOfProcessingStatus(){ + getListOfProcessingStatus() { this.pageIndex = 1; this.pageSize = 10; this.progressingTimer.forEach((item) => { @@ -88,70 +88,71 @@ export class SlicingBusinessTableComponent implements OnInit { this.progressingTimer = []; this.getBusinessList(); } - switchChange(slicing,i){ + switchChange(slicing, i) { this.modalService.confirm({ - nzTitle: '<i>Do you Want to'+(slicing.orchestration_status === 'activated'?'deactivated':'activated')+ 'slicing business?</i>', - nzContent: '<b>Name:'+slicing.service_instance_name+'</b>', + 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':'activated', slicing.service_instance_id); + this.notification1.notificationStart('slicing business', slicing.orchestration_status === 'activated' ? 'deactivate' : 'activate', slicing.service_instance_id); let paramsObj = { - serviceId:slicing.service_instance_id + 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); + 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]); + let singleSlicing = Object.assign({}, this.listOfData[i]); this.listOfData[i] = singleSlicing; this.listOfData = [...this.listOfData]; } }); } - changeActivate(paramsObj,isActivate,slicing,activateValue,finished,index){ - this.myhttp.changeActivateSlicingService(paramsObj,isActivate).subscribe (res => { + changeActivate(paramsObj, isActivate, slicing, activateValue, finished, index) { + this.loading = true; + this.myhttp.changeActivateSlicingService(paramsObj, isActivate).subscribe(res => { const { result_header: { result_code, result_message }, result_body: { operation_id } } = res; if (+result_code === 200) { this.notification1.notificationSuccess('slicing business', finished, slicing.service_instance_id); this.getBusinessList(); - }else { - let singleSlicing = Object.assign({},this.listOfData[index]); + } else { + 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.getBusinessList(); - },() => { - let singleSlicing = Object.assign({},this.listOfData[index]); + }, () => { + 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(); }) } - terminate(slicing){ + terminate(slicing) { this.modalService.confirm({ - nzTitle: 'Do you Want to Terminate slicing business?', - nzContent: '<b>Name: </b>'+slicing.service_instance_name, + nzTitle: 'Do you Want to terminate slicing business?', + nzContent: '<b>Name: </b>' + slicing.service_instance_name, nzOnOk: () => { this.notification1.notificationStart('slicing business', 'terminate', slicing.service_instance_id); - let paramsObj = { - serviceId:slicing.service_instance_id - }; + let paramsObj = { serviceId: slicing.service_instance_id }; this.terminateStart = true; - this.myhttp.terminateSlicingService(paramsObj).subscribe (res => { + this.loading = true; + this.myhttp.terminateSlicingService(paramsObj).subscribe(res => { const { result_header: { result_code, result_message }, result_body: { operation_id } } = res; if (+result_code === 200) { + this.notification1.notificationSuccess('slicing business', 'terminate', slicing.service_instance_id); this.getBusinessList(); - }else { + } else { this.notification1.notificationFailed('slicing business', 'terminate', slicing.service_instance_id); this.terminateStart = false; } - },() => { + }, () => { this.notification1.notificationFailed('slicing business', 'terminate', slicing.service_instance_id); this.terminateStart = false; }) @@ -164,24 +165,24 @@ export class SlicingBusinessTableComponent implements OnInit { } showdetail(data) { const BusinessModal = this.modalService.create({ - nzTitle:"Detail", + nzTitle: "Detail", nzContent: SlicingBusinessModelComponent, - nzWidth:"70%", + nzWidth: "70%", nzOkText: null, nzCancelText: null, - nzComponentParams:{ - businessId:data.service_instance_id + nzComponentParams: { + businessId: data.service_instance_id } }) } - queryProgress(obj,action,index,callback) { - return new Promise( res => { + queryProgress(obj, action, index, callback) { + return new Promise(res => { let requery = () => { this.myhttp.getSlicingBusinessProgress(obj) .subscribe((data) => { const { result_header: { result_code, result_message }, result_body: { operation_id } } = data; if (+result_code === 200) { - if (data.result_body.operation_progress < 100) { + if (data.result_body.operation_progress && data.result_body.operation_progress < 100) { callback(data.result_body); let progressSetTimeOut = setTimeout(() => { requery(); @@ -198,7 +199,7 @@ export class SlicingBusinessTableComponent implements OnInit { }); res(data.result_body); } - }else { + } else { this.progressingTimer.forEach((item) => { if (item.serviceId === obj.serviceId) { clearInterval(item.timer); @@ -207,7 +208,7 @@ export class SlicingBusinessTableComponent implements OnInit { this.getBusinessList(); this.message.error(result_message); } - },(err) => { + }, (err) => { this.progressingTimer.forEach((item) => { if (item.serviceId === obj.serviceId) { clearInterval(item.timer); |