diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services')
13 files changed, 219 insertions, 185 deletions
diff --git a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less index 000d68d2..9b5ce8e8 100644 --- a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less +++ b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less @@ -3,7 +3,7 @@ width:100%; max-width:400px; height:170px; - background:url("/assets/images/servicelist-e2e.png") no-repeat; + background:url("../../../../../assets/images/servicelist-e2e.png") no-repeat; background-size: 100% 100%; border-radius:2px; .round{ 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 index e4a5ef19..3b6debb9 100644 --- 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 @@ -1,7 +1,6 @@ <nz-spin nzTip='Loading...' [nzSpinning]="isSpinning"> - <nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()" - (nzOnOk)="handleOk()" - nzWidth="900px"> + <nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzWidth="900px"> <div class="subnet_params_container"> <form nz-form> <nz-form-item *ngFor="let item of comunicationFormItems; let i = index"> @@ -9,28 +8,18 @@ {{ item.title }} </nz-form-label> <nz-form-control [nzSpan]="15"> - <input nz-input nz-tooltip - [id]="item.key" - [name]="item.key" + <input nz-input nz-tooltip [id]="item.key" [name]="item.key" [(ngModel)]="slicing_order_info[item.key]" [ngClass]="{'error-input-border':validateRules[i] === true}" *ngIf=" item.title === 'Slicing Business Name' " - (blur)="validator(item.key,slicing_order_info[item.key],i)" - /> - <nz-tooltip - [nzTitle]="tooltipText" - [nzPlacement]="'right'" - [nzTrigger]="'focus'" - > - <input nz-input nz-tooltip - [id]="item.key" - [name]="item.key" + (blur)="validator(item,slicing_order_info[item.key],i)"/> + <nz-tooltip [nzTitle]="tooltipText" [nzPlacement]="'right'" [nzTrigger]="'focus'"> + <input nz-input nz-tooltip [id]="item.key" [name]="item.key" [(ngModel)]="slicing_order_info[item.key]" [ngClass]="{'error-input-border':validateRules[i] === true}" *ngIf=" item.title !== 'Slicing Business Name' && item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' " - (blur)="validator(item.key,slicing_order_info[item.key],i)" - (focus)="changeTooltipText(item.title)" - /> + (blur)="validator(item,slicing_order_info[item.key],i)" + (focus)="changeTooltipText(item.title)"/> </nz-tooltip> <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]" *ngIf="item.title === 'Resource Sharing Level'"> @@ -52,8 +41,7 @@ <div *ngIf="item.key === 'coverageArea'"> <div *ngFor="let area of areaList; let i = index"> <nz-form-control [nzSpan]="!ind ? 3 : 4" [nzOffset]="i && !ind ? 6 : 0" - class="subnet_params_area" - *ngFor="let item of area; let ind = index"> + class="subnet_params_area" *ngFor="let item of area; let ind = index"> <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind" (nzOpenChange)="handleChange(area, item)" (ngModelChange)=" handleChangeSelected(area, item) "> @@ -63,8 +51,7 @@ </nz-form-control> <nz-form-control [nzSpan]="1" [nzOffset]="1"> <button nz-button nzType="primary" nzSize="small" class="subnet_params_button" - *ngIf="!i" - (click)="creatAreaList()"> + *ngIf="!i" (click)="creatAreaList()"> <i nz-icon class="anticon anticon-plus subnet_params_icon"></i> </button> <button nz-button nzType="primary" nzSize="small" class="subnet_params_button" *ngIf="i" 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 index 7db003ff..a07edce2 100644 --- 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 @@ -179,19 +179,19 @@ export class BusinessOrderComponent implements OnInit { return this.rulesText[index] = words + title }; - validator(key, val, i) { + validator(item, val, i) { if (val === null || val.replace(/\s*/g, '').length <= 0) { this.validateRules[i] = true; - this.getRulesText('Please enter', key, val, i,); + this.getRulesText('Please enter ', item.title, val, i,); return false } else { this.validateRules[i] = false; } - if (key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && isNaN(val)) { + if (item.key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && isNaN(val)) { this.validateRules[i] = true; this.getRulesText('Only numbers can be entered', '', '', i); return false - } else if (key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && !isNaN(val)) { + } else if (item.key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && !isNaN(val)) { console.log("-----maxNumberofUEs") this.validateRules[i] = true; this.getRulesText('Scope: 1-100000', '', '', i); @@ -199,22 +199,22 @@ export class BusinessOrderComponent implements OnInit { } else { this.validateRules[i] = false; } - if ((key === 'expDataRateDL' || key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && isNaN(val)) { + if ((item.key === 'expDataRateDL' || item.key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && isNaN(val)) { this.validateRules[i] = true; this.getRulesText('Only numbers can be entered', '', '', i); return false - } else if ((key === 'expDataRateDL' || key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && !isNaN(val)) { + } else if ((item.key === 'expDataRateDL' || item.key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && !isNaN(val)) { this.validateRules[i] = true; this.getRulesText('Scope: 100-3000', '', '', i); return false } else { this.validateRules[i] = false; } - if (key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && isNaN(val)) { + if (item.key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && isNaN(val)) { this.validateRules[i] = true; this.getRulesText('Only numbers can be entered', '', '', i); return false - } else if (key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && !isNaN(val)) { + } else if (item.key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && !isNaN(val)) { this.validateRules[i] = true; this.getRulesText('Scope: 10-200', '', '', i); return false @@ -224,9 +224,9 @@ export class BusinessOrderComponent implements OnInit { } handleOk(): void { - Object.keys(this.slicing_order_info).forEach((item, index) => { - if (item !== 'resourceSharingLevel' && item !== 'uEMobilityLevel' && item !== 'coverageArea') { - this.validator(item, this.slicing_order_info[item], index) + COMMUNICATION_FORM_ITEMS.forEach((item, index) => { + if (item.key !== 'resourceSharingLevel' && item.key !== 'uEMobilityLevel' && item.key !== 'coverageArea') { + this.validator(item, this.slicing_order_info[item.key], index) } }); if (this.validateRules.indexOf(true) > -1) { @@ -234,7 +234,7 @@ export class BusinessOrderComponent implements OnInit { } const coverage_list: string[] = []; this.areaList.forEach(item => { - let str: string = ''; + let str = ''; item.forEach(area => { str += area.selected + ';'; }); 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 4d5ab79f..0c3983dd 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 @@ -3,7 +3,7 @@ <div nz-col nzSpan="12" class="task_status"> <span>Status : </span> <nz-select nzShowSearch nzPlaceHolder="Select a processing status" [(ngModel)]="selectedValue" - (ngModelChange)="getListOfProcessingStatus()"> + (ngModelChange)="getListOfProcessingStatus()"> <nz-option *ngFor="let item of statusOptions" [nzLabel]="item" [nzValue]="item"></nz-option> </nz-select> </div> @@ -11,60 +11,60 @@ </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)"> + [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' + [nzLoading]="loading" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)"> <thead> - <tr> - <th width=100>No</th> - <th width=280>Service Instance Id</th> - <th width=200>Service Instance Name</th> - <th width=200>Created Time</th> - <!--<th width=110>Service Type</th>--> - <th width=110>S-NSSAI</th> - <th width=110>Status</th> - <th width=120>Activate</th> - <th width=130>Terminate</th> - </tr> + <tr> + <th width=100>No</th> + <th width=280>Service Instance Id</th> + <th width=200>Service Instance Name</th> + <th width=200>Created Time</th> + <!--<th width=110>Service Type</th>--> + <th width=110>S-NSSAI</th> + <th width=110>Status</th> + <th width=120>Activate</th> + <th width=130>Terminate</th> + </tr> </thead> <tbody> - <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index"> - <tr> - <td>{{i+1}}</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"> - {{data.order_status}} - </span> - <br> - </td> - <td> - <div class="action-icon"> - <nz-switch [ngModel]="data.order_status==='activated'?true:false" - [nzDisabled]="data.order_status === 'processing'|| (data.order_status !== 'processing' && 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]="true" nzStatus="active"> - </nz-progress> - </div> - </td> + <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index"> + <tr> + <td>{{i+1}}</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> - <div class="action-icon"> - <i [ngClass]="{'cannotclick':data.order_status === 'processing' || ( data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type === 'DELETE' || data.last_operation_type === 'activated'))}" - nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff" - (click)="terminate(data,i)"></i> - <nz-progress - *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart[i]" - [nzPercent]="data.last_operation_progress" [nzShowInfo]="true" nzStatus="active"> - </nz-progress> - </div> + <span class="marginLeft10"> + {{data.order_status}} + </span> + <br> </td> - </tr> - </ng-template> + <td> + <div class="action-icon"> + <nz-switch [ngModel]="data.order_status==='activated'?true:false" + [nzDisabled]="data.order_status === 'processing'|| (data.order_status !== 'processing' && 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]="true" nzStatus="active"> + </nz-progress> + </div> + </td> + <td> + <div class="action-icon"> + <i [ngClass]="{'cannotclick':data.order_status === 'processing' || ( data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type === 'DELETE' || data.last_operation_type === 'activated'))}" + nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff" + (click)="terminate(data,i)"></i> + <nz-progress + *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart[i]" + [nzPercent]="data.last_operation_progress" [nzShowInfo]="true" nzStatus="active"> + </nz-progress> + </div> + </td> + </tr> + </ng-template> </tbody> </nz-table> </div> 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 f52f4ad2..f66d3ad4 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 @@ -1,31 +1,38 @@ nz-select { width: 200px; } -.task_status{ + +.task_status { margin-bottom: 20px; - span{ + + span { margin-right: 5%; } } -.action-icon{ + +.action-icon { display: inline-block; vertical-align: top; } + i.anticon { cursor: pointer; font-size: 18px; padding: 2px 15px; - vertical-align: inherit!important; - &:hover{ + vertical-align: inherit !important; + + &:hover { color: #147dc2; } } + .cannotclick { pointer-events: none; color: #aaa; opacity: 0.6; } -.buy-button{ + +.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 272a84af..36a089cd 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,4 +1,4 @@ -import { Component, OnInit } 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'; @@ -16,17 +16,21 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit { private message: NzMessageService ) { } + @Input() currentTabTitle; - ngOnInit() { - this.getCSMFBusinessList() - } - ngOnDestroy() { - 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() {} + selectedValue: string = BUSINESS_STATUS[0]; listOfData: any[] = []; pageIndex: number = 1; 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 6d55ea1c..5a1dd3f0 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,17 +1,11 @@ <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> + <app-csmf-slicing-business-management [currentTabTitle]="currentTab"></app-csmf-slicing-business-management> + </nz-tab> + <nz-tab nzTitle="Slicing Task Management"> + <app-slicing-task-management [currentTabTitle]="currentTab"></app-slicing-task-management> + </nz-tab> + <nz-tab nzTitle="Slicing Resource Management"> + <app-slicing-resource-management [currentTabTitle]="currentTab"></app-slicing-resource-management> </nz-tab> - <nz-tab nzTitle="Slicing Task Management"> - <app-slicing-task-management - *ngIf="currentTab ==='Slicing Task Management'" - ></app-slicing-task-management> - </nz-tab> - <nz-tab nzTitle="Slicing Resource Management" > - <app-slicing-resource-management - *ngIf="currentTab ==='Slicing Resource Management'" - ></app-slicing-resource-management> - </nz-tab> </nz-tabset>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts index 6ac29417..3c08463d 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts @@ -1,12 +1,13 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, Input, OnInit,SimpleChanges} from '@angular/core'; import {BUSINESS_STATUS} from '../../../../../../../constants/constants'; import {SlicingTaskServices} from "../../../../../../core/services/slicingTaskServices"; import {NsiModelComponent} from "../nsi-model/nsi-model.component"; -import { NzModalService } from 'ng-zorro-antd'; +import {NzModalService} from 'ng-zorro-antd'; + @Component({ - selector: 'app-nsi-table', - templateUrl: './nsi-table.component.html', - styleUrls: ['./nsi-table.component.less'] + selector: 'app-nsi-table', + templateUrl: './nsi-table.component.html', + styleUrls: ['./nsi-table.component.less'] }) export class NsiTableComponent implements OnInit { @@ -16,10 +17,16 @@ export class NsiTableComponent implements OnInit { ) { } - ngOnInit() { - this.getNsiList() - } - selectedValue:string = BUSINESS_STATUS[0]; + @Input() currentTabName; + + ngOnChanges(changes: SimpleChanges) { + if (changes.currentTabName.currentValue === 'Slicing Instance Management') { + this.getNsiList() + } + } + ngOnInit() {} + + selectedValue: string = BUSINESS_STATUS[0]; listOfData: any[] = []; pageIndex: number = 1; pageSize: number = 10; @@ -28,7 +35,7 @@ export class NsiTableComponent implements OnInit { isSelect: boolean = false; statusOptions: any[] = BUSINESS_STATUS; - getNsiList (): void{ + getNsiList(): void { this.loading = true; this.isSelect = false; this.listOfData = []; @@ -36,17 +43,17 @@ export class NsiTableComponent implements OnInit { pageNo: this.pageIndex, pageSize: this.pageSize }; - if(this.selectedValue !== BUSINESS_STATUS[0]){ + if (this.selectedValue !== BUSINESS_STATUS[0]) { paramsObj["instanceStatus"] = this.selectedValue.toLocaleLowerCase(); this.isSelect = true; } - this.myhttp.getSlicingNsiList(paramsObj,this.isSelect).subscribe (res => { - const { result_header: { result_code }, result_body: { nsi_service_instances,record_number } } = res; + this.myhttp.getSlicingNsiList(paramsObj, this.isSelect).subscribe(res => { + const {result_header: {result_code}, result_body: {nsi_service_instances, record_number}} = res; this.loading = false; if (+result_code === 200) { this.total = record_number; this.loading = false; - if(nsi_service_instances !== null && nsi_service_instances.length >0) { + if (nsi_service_instances !== null && nsi_service_instances.length > 0) { this.listOfData = nsi_service_instances; } } @@ -55,23 +62,26 @@ export class NsiTableComponent implements OnInit { console.error(res); }) } - getListOfProcessingStatus(){ + + getListOfProcessingStatus() { this.pageIndex = 1; this.pageSize = 10; this.getNsiList(); } + searchData(reset: boolean = false) { this.getNsiList(); } + showdetail(data) { const nsiModal = this.modalService.create({ - nzTitle:"Detail", + nzTitle: "Detail", nzContent: NsiModelComponent, - nzWidth:"70%", + nzWidth: "70%", nzOkText: null, nzCancelText: null, - nzComponentParams:{ - nsiId:data.service_instance_id + nzComponentParams: { + nsiId: data.service_instance_id } }) } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts index 5e90bcee..6dec5c72 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts @@ -1,12 +1,13 @@ -import { Component, OnInit } 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 } from 'ng-zorro-antd'; +import {NzModalService} from 'ng-zorro-antd'; import {NssiModelComponent} from "../nssi-model/nssi-model.component"; + @Component({ - selector: 'app-nssi-table', - templateUrl: './nssi-table.component.html', - styleUrls: ['./nssi-table.component.less'] + selector: 'app-nssi-table', + templateUrl: './nssi-table.component.html', + styleUrls: ['./nssi-table.component.less'] }) export class NssiTableComponent implements OnInit { @@ -16,10 +17,16 @@ export class NssiTableComponent implements OnInit { ) { } - ngOnInit() { - this.getNssiList() - } - selectedValue:string = BUSINESS_STATUS[0]; + @Input() currentTabName; + + ngOnChanges(changes: SimpleChanges) { + if (changes.currentTabName.currentValue === 'Slicing Subnet Instance Management') { + this.getNssiList() + } + } + ngOnInit() {} + + selectedValue: string = BUSINESS_STATUS[0]; listOfData: any[] = []; pageIndex: number = 1; pageSize: number = 10; @@ -28,7 +35,7 @@ export class NssiTableComponent implements OnInit { isSelect: boolean = false; statusOptions: any[] = BUSINESS_STATUS; - getNssiList (): void{ + getNssiList(): void { this.loading = true; this.isSelect = false; this.listOfData = []; @@ -36,42 +43,45 @@ export class NssiTableComponent implements OnInit { pageNo: this.pageIndex, pageSize: this.pageSize }; - if(this.selectedValue !== BUSINESS_STATUS[0]){ + if (this.selectedValue !== BUSINESS_STATUS[0]) { paramsObj["instanceStatus"] = this.selectedValue.toLocaleLowerCase(); this.isSelect = true; } - this.myhttp.getSlicingNssiList(paramsObj,this.isSelect).subscribe (res => { - const { result_header: { result_code }, result_body: { nssi_service_instances,record_number } } = res; + this.myhttp.getSlicingNssiList(paramsObj, this.isSelect).subscribe(res => { + const {result_header: {result_code}, result_body: {nssi_service_instances, record_number}} = res; this.loading = false; if (+result_code === 200) { this.total = record_number; this.loading = false; - if(nssi_service_instances !== null && nssi_service_instances.length >0) { + if (nssi_service_instances !== null && nssi_service_instances.length > 0) { this.listOfData = nssi_service_instances; } } - },(res) => { + }, (res) => { this.loading = false; console.error(res); }) } - getListOfProcessingStatus(){ + + getListOfProcessingStatus() { this.pageIndex = 1; this.pageSize = 10; this.getNssiList(); } + searchData(reset: boolean = false) { this.getNssiList(); } + showdetail(data) { const nssiModal = this.modalService.create({ - nzTitle:"Detail", + nzTitle: "Detail", nzContent: NssiModelComponent, - nzWidth:"70%", + nzWidth: "70%", nzOkText: null, nzCancelText: null, - nzComponentParams:{ - nssiId:data.service_instance_id + nzComponentParams: { + nssiId: data.service_instance_id } }) } 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 fc07efc9..fbce729f 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,4 +1,4 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +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'; @@ -17,14 +17,20 @@ export class SlicingBusinessTableComponent implements OnInit { ) { } - ngOnInit() { - this.getBusinessList() + @Input() currentTabName; + + ngOnChanges(changes: SimpleChanges) { + if(changes.currentTabName.currentValue === 'Slicing Business Management'){ + this.getBusinessList() + }else { + this.progressingTimer.forEach((item) => { + clearInterval(item.timer); + }); + this.progressingTimer = []; + } } - ngOnDestroy() { - this.progressingTimer.forEach((item) => { - clearInterval(item.timer); - }) - this.progressingTimer = []; + ngOnInit() { + } selectedValue: string = BUSINESS_STATUS[0]; listOfData: any[] = []; diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html index eed187ea..adbe769f 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html @@ -1,11 +1,11 @@ -<nz-tabset class="slicing-resource_tab" (nzSelectChange)="handleTabChange($event)"> - <nz-tab nzTitle="Slicing Business Management"> - <app-slicing-business-table *ngIf="currentTab ==='Slicing Business Management'"></app-slicing-business-table> - </nz-tab> - <nz-tab nzTitle="Slicing Instance Management"> - <app-nsi-table *ngIf="currentTab ==='Slicing Instance Management'"></app-nsi-table> - </nz-tab> - <nz-tab nzTitle="Slicing Subnet Instance Management"> - <app-nssi-table *ngIf="currentTab ==='Slicing Subnet Instance Management'"></app-nssi-table> - </nz-tab> +<nz-tabset class="slicing-resource_tab" (nzSelectChange)="handleTabChange($event)"> + <nz-tab nzTitle="Slicing Business Management"> + <app-slicing-business-table [currentTabName]="currentTab"></app-slicing-business-table> + </nz-tab> + <nz-tab nzTitle="Slicing Instance Management"> + <app-nsi-table [currentTabName]="currentTab"></app-nsi-table> + </nz-tab> + <nz-tab nzTitle="Slicing Subnet Instance Management"> + <app-nssi-table [currentTabName]="currentTab"></app-nssi-table> + </nz-tab> </nz-tabset>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts index b88b9073..a2a0aaf7 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts @@ -1,19 +1,29 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, Input, OnInit, SimpleChanges} from '@angular/core'; @Component({ - selector: 'app-slicing-resource-management', - templateUrl: './slicing-resource-management.component.html', - styleUrls: ['./slicing-resource-management.component.less'] + selector: 'app-slicing-resource-management', + templateUrl: './slicing-resource-management.component.html', + styleUrls: ['./slicing-resource-management.component.less'] }) export class SlicingResourceManagementComponent implements OnInit { - constructor() { } + constructor() {} + + @Input() currentTabTitle; + + ngOnChanges(changes: SimpleChanges) { + if (changes.currentTabTitle.currentValue === 'Slicing Resource Management') { + this.currentTab = 'Slicing Business Management' + }else { + this.currentTab = '' + } + } + + ngOnInit() {} + + currentTab = ''; - ngOnInit() { - } - currentTab = 'Slicing Business Management'; handleTabChange($event): void { - console.log($event,"$event"); - this.currentTab = $event.tab._title; + this.currentTab = $event.tab._title; } } 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 05f06e3c..39e5f1d2 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,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit, Input, SimpleChanges} from '@angular/core'; import { NzMessageService } from 'ng-zorro-antd'; import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices'; import { TASK_PROCESSING_STATUS } from '../../../../../constants/constants'; @@ -12,6 +12,8 @@ export class SlicingTaskManagementComponent implements OnInit { constructor(private myhttp: SlicingTaskServices, private message: NzMessageService) { } + @Input() currentTabTitle; + showDetail: boolean = false; showProcess: boolean = false; selectedValue = 'all'; @@ -25,9 +27,13 @@ export class SlicingTaskManagementComponent implements OnInit { pageSize: string = '10'; pageNum: string = '1'; - ngOnInit() { - this.getTaskList(); - } + ngOnChanges(changes: SimpleChanges) { + if(changes.currentTabTitle.currentValue === 'Slicing Task Management'){ + this.getTaskList(); + } + } + + ngOnInit() {} getTaskList(): void { const { pageNum, pageSize } = this; |