diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services')
11 files changed, 257 insertions, 42 deletions
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html new file mode 100644 index 00000000..d4914dd1 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html @@ -0,0 +1,3 @@ +<nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" + nzWidth="900px"> +</nz-modal> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.spec.ts new file mode 100644 index 00000000..1d7a756d --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BusinessOrderComponent } from './business-order.component'; + +describe('BusinessOrderComponent', () => { + let component: BusinessOrderComponent; + let fixture: ComponentFixture<BusinessOrderComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BusinessOrderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BusinessOrderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts new file mode 100644 index 00000000..0647b76d --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts @@ -0,0 +1,24 @@ +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {COMMUNICATION_FORM_ITEMS} from "../../../../../../constants/constants"; +@Component({ + selector: 'app-business-order', + templateUrl: './business-order.component.html', + styleUrls: ['./business-order.component.less'] +}) +export class BusinessOrderComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + @Input() showModel: boolean; + @Output() cancel = new EventEmitter<boolean>(); + + handleCancel() { + this.showModel = false; + this.cancel.emit(this.showModel) + } + handleOk() { + console.log(1) + } +} diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html index c3f2d631..818fc136 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html @@ -1,4 +1,4 @@ -<div class="slicing-resource-table slicing-resource_tab"> +<div> <div nz-row> <div nz-col nzSpan="12" class="task_status"> <span>Status : </span> @@ -7,6 +7,7 @@ <nz-option *ngFor="let item of statusOptions" [nzLabel]="item" [nzValue]="item"></nz-option> </nz-select> </div> + <button nz-button nzType="primary" class="buy-button" (click)="OrderModelShow()">Purchase</button> </div> <div class="slicing-resource-table-list"> <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" nzShowSizeChanger @@ -17,6 +18,7 @@ <th width=100>No</th> <th width=280>Service Instance Id</th> <th width=200>Service Instance Name</th> + <th width=200>Creation Time</th> <th width=110>Service Type</th> <th width=110>S-NSSAI</th> <th width=110>Status</th> @@ -27,37 +29,38 @@ <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index"> <tr> <td>{{i+1}}</td> - <td>{{ data.service_id }}</td> - <td>{{ data.service_name }}</td> + <td>{{ data.order_id }}</td> + <td>{{ data.order_name }}</td> + <td>{{ data.order_creation_time }}</td> <td>{{ data.service_type?data.service_type:'--' }}</td> <td>{{ data.service_snssai }}</td> <td> <span class="marginLeft10"> - <span *ngIf="data.last_operation_process && data.last_operation_process !== '100'"> - {{data.last_operation_process+'%'}} + <span *ngIf="data.last_operation_progress && data.last_operation_progress !== '100'"> + {{data.last_operation_progress+'%'}} </span> <br> - {{data.service_status}} + {{data.order_status}} </span> <br> </td> <td> <div class="action-icon"> - <nz-switch [ngModel]="data.service_status==='activated'?true:false" - [nzDisabled]="data.last_operation_type && data.last_operation_process && data.last_operation_process !== '100'" + <nz-switch [ngModel]="data.order_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_process && data.last_operation_process !== '100' && data.last_operation_type !== 'DELETE'" - [nzPercent]="data.last_operation_process" [nzShowInfo]="false" nzStatus="active"> + *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_process && data.last_operation_process !== '100' && (data.last_operation_type !== 'DELETE' || data.service_status==='activated')}" + <i [ngClass]="{'cannotclick': data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type !== 'DELETE' || data.order_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_process && data.last_operation_process !== '100' && terminateStart" - [nzPercent]="data.last_operation_process" [nzShowInfo]="false" nzStatus="active"> + *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> @@ -66,4 +69,5 @@ </tbody> </nz-table> </div> + <app-business-order [showModel]="businessOrderShow" (cancel)="businessOrderShow=$event"></app-business-order> </div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less index b813e966..f52f4ad2 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less @@ -25,6 +25,7 @@ i.anticon { color: #aaa; opacity: 0.6; } -.slicing-resource-table{ - margin: 0 0 0 60px!important; +.buy-button{ + float: right; + margin-right: 2%; }
\ No newline at end of file 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 8b844f5f..76f0bcdf 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,48 +1,76 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {BUSINESS_STATUS} from "../../../../../constants/constants"; -import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices'; +import {SlicingTaskServices} from '.././../../../core/services/slicingTaskServices'; +import { NzModalService, NzMessageService } from 'ng-zorro-antd'; +import *as moment from 'moment'; @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 myhttp: SlicingTaskServices, + private modalService: NzModalService, + private message: NzMessageService ) { } - ngOnInit() { - this.getCSMFBusinessList() - } + + ngOnInit() { + this.getCSMFBusinessList() + } + ngOnDestroy() { + this.progressingTimer.forEach((item) => { + clearInterval(item.timer); + }); + this.progressingTimer = []; + } + 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; + // isSelect: boolean = false; + progressingTimer: any[] = []; terminateStart: boolean = false; - - getCSMFBusinessList(){ + businessOrderShow: boolean = false; + getCSMFBusinessList() { this.loading = true; + // this.isSelect = false; this.listOfData = []; let paramsObj = { - status:this.selectedValue, + status: this.selectedValue, pageNo: this.pageIndex, pageSize: this.pageSize }; + // if (this.selectedValue !== BUSINESS_STATUS[0]) { + // paramsObj["businessStatus"] = this.selectedValue; + // this.isSelect = true; + // } this.myhttp.getCSMFSlicingBusinessList(paramsObj).subscribe(res => { - const { result_header: { result_code }, result_body: { slicing_service_list, record_number } } = res; + const {result_header: {result_code}, result_body: {slicing_order_list, record_number}} = res; this.loading = false; if (+result_code === 200) { this.total = record_number; - if(slicing_service_list !==null && slicing_service_list.length >0){ - this.listOfData = slicing_service_list.map((item, index) => { - if (item.last_operation_process && item.last_operation_type && Number(item.last_operation_process) < 100) { - + 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'); + 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.order_id + }; if (item.last_operation_type === 'DELETE') this.terminateStart = true; + this.queryProgress(obj, index, updata).then((res) => { + item.last_operation_progress = '100'; + this.getCSMFBusinessList(); + }) } return item }); @@ -54,16 +82,143 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit { getListOfProcessingStatus() { this.pageIndex = 1; this.pageSize = 10; + this.progressingTimer.forEach((item) => { + clearInterval(item.timer); + }); + this.progressingTimer = []; this.getCSMFBusinessList(); } + searchData(reset: boolean = false) { + this.progressingTimer.forEach((item) => { + clearInterval(item.timer); + }); + this.progressingTimer = []; this.getCSMFBusinessList(); } switchChange(slicing, i) { - console.log(slicing,i,"slicing") + console.log(slicing, i, "slicing"); + 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, 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; + this.myhttp.changeActivateSlicingService(paramsObj, isActivate).subscribe(res => { + const { result_header: { result_code, result_message }, result_body: { operation_id } } = res; + this.loading = false; + if (+result_code === 200) { + this.getCSMFBusinessList(); + } else { + let singleSlicing = Object.assign({}, this.listOfData[index]); + this.listOfData[index] = singleSlicing; + this.listOfData = [...this.listOfData]; + this.getCSMFBusinessList(); + } + this.getCSMFBusinessList(); + }, () => { + this.loading = false; + let singleSlicing = Object.assign({}, this.listOfData[index]); + this.listOfData[index] = singleSlicing; + this.listOfData = [...this.listOfData]; + this.getCSMFBusinessList(); + }) + } + terminate(slicing) { - console.log(slicing,"slicing") + console.log(slicing, "slicing"); + this.modalService.confirm({ + nzTitle: 'Are you sure you want to terminate this task?', + nzContent: '<b>Name: </b>' + slicing.order_name, + nzOnOk: () => { + let paramsObj = { serviceId: slicing.order_id }; + this.terminateStart = true; + this.loading = true; + this.myhttp.terminateSlicingService(paramsObj).subscribe(res => { + const { result_header: { result_code, result_message }, result_body: { operation_id } } = res; + this.loading = false; + if (+result_code === 200) { + this.getCSMFBusinessList(); + } else { + this.terminateStart = false; + } + }, () => { + this.loading = false; + this.terminateStart = false; + }) + }, + nzCancelText: 'No', + nzOnCancel: () => { + console.info('Cancel termination') + } + }); + } + queryProgress(obj, 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 && 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); + } + } else { + this.progressingTimer.forEach((item) => { + if (item.serviceId === obj.serviceId) { + clearInterval(item.timer); + } + }); + this.getCSMFBusinessList(); + this.message.error(result_message); + } + }, (err) => { + this.progressingTimer.forEach((item) => { + if (item.serviceId === obj.serviceId) { + clearInterval(item.timer); + } + }); + this.getCSMFBusinessList(); + this.message.error(err); + }) + }; + requery(); + }) + } + + OrderModelShow(){ + this.businessOrderShow = true; } } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html index 965dca6a..1de13788 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html @@ -1,4 +1,9 @@ <nz-tabset (nzSelectChange)="handleTabChange($event)" class="slicing"> + <nz-tab nzTitle="communication Service"> + <app-csmf-slicing-business-management + *ngIf="currentTab ==='communication Service'" + ></app-csmf-slicing-business-management> + </nz-tab> <nz-tab nzTitle="Slicing Task Management"> <app-slicing-task-management *ngIf="currentTab ==='Slicing Task Management'" @@ -9,9 +14,4 @@ *ngIf="currentTab ==='Slicing Resource Management'" ></app-slicing-resource-management> </nz-tab> - <nz-tab nzTitle="CSMF Slicing Business Management"> - <app-csmf-slicing-business-management - *ngIf="currentTab ==='CSMF Slicing Business Management'" - ></app-csmf-slicing-business-management> - </nz-tab> </nz-tabset>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts index e2ca18e2..597e4ee9 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts @@ -15,7 +15,7 @@ export class SlicingManagementComponent implements OnInit { ngOnInit() { } - currentTab = 'Slicing Task Management'; + currentTab = 'communication Service'; handleTabChange($event): void { console.log($event,"$event"); this.currentTab = $event.tab._title; diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html index d7cb2f8d..415f5241 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html @@ -1,4 +1,4 @@ -<div> +<div class="slicing-task-resource-table"> <div nz-row> <div nz-col nzSpan="12" class="task_status"> <span>Status : </span> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less index 78ae9c6e..17951f40 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less @@ -21,4 +21,7 @@ nz-select { .task_operation_disabled { color: #A2ABCE; cursor: default; +} +.slicing-task-resource-table{ + margin: 0 0 0 50px!important; }
\ No newline at end of file |