diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services')
4 files changed, 162 insertions, 7 deletions
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 aaf5d959..c3f2d631 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,3 +1,69 @@ -<p> - csmf-slicing-business-management works! -</p> +<div class="slicing-resource-table slicing-resource_tab"> + <div nz-row> + <div nz-col nzSpan="12" class="task_status"> + <span>Status : </span> + <nz-select nzShowSearch nzPlaceHolder="Select a processing status" [(ngModel)]="selectedValue" + (ngModelChange)="getListOfProcessingStatus()"> + <nz-option *ngFor="let item of statusOptions" [nzLabel]="item" [nzValue]="item"></nz-option> + </nz-select> + </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)"> + <thead> + <tr> + <th width=100>No</th> + <th width=280>Service Instance Id</th> + <th width=200>Service Instance Name</th> + <th width=110>Service Type</th> + <th width=110>S-NSSAI</th> + <th width=110>Status</th> + <th width=180>Aciton</th> + </tr> + </thead> + <tbody> + <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.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> + <br> + {{data.service_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'" + (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"> + </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')}" + 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"> + </nz-progress> + </div> + </td> + </tr> + </ng-template> + </tbody> + </nz-table> + </div> +</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 e69de29b..b813e966 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 @@ -0,0 +1,30 @@ +nz-select { + width: 200px; +} +.task_status{ + margin-bottom: 20px; + span{ + margin-right: 5%; + } +} +.action-icon{ + display: inline-block; + vertical-align: top; +} +i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px 15px; + vertical-align: inherit!important; + &:hover{ + color: #147dc2; + } +} +.cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} +.slicing-resource-table{ + margin: 0 0 0 60px!important; +}
\ 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 dddbacf7..8b844f5f 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,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; - +import {BUSINESS_STATUS} from "../../../../../constants/constants"; +import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices'; @Component({ selector: 'app-csmf-slicing-business-management', templateUrl: './csmf-slicing-business-management.component.html', @@ -7,9 +8,62 @@ import { Component, OnInit } from '@angular/core'; }) export class CsmfSlicingBusinessManagementComponent implements OnInit { - constructor() { } - + constructor( + private myhttp: SlicingTaskServices + ) { + } ngOnInit() { + this.getCSMFBusinessList() } + 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; + terminateStart: boolean = false; + + getCSMFBusinessList(){ + this.loading = true; + this.listOfData = []; + let paramsObj = { + status:this.selectedValue, + pageNo: this.pageIndex, + pageSize: this.pageSize + }; + this.myhttp.getCSMFSlicingBusinessList(paramsObj).subscribe(res => { + const { result_header: { result_code }, result_body: { slicing_service_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 (item.last_operation_type === 'DELETE') this.terminateStart = true; + } + return item + }); + } + } + }) + } + + getListOfProcessingStatus() { + this.pageIndex = 1; + this.pageSize = 10; + this.getCSMFBusinessList(); + } + searchData(reset: boolean = false) { + this.getCSMFBusinessList(); + } + switchChange(slicing, i) { + console.log(slicing,i,"slicing") + } + terminate(slicing) { + console.log(slicing,"slicing") + } } 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 2c8db58d..965dca6a 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,4 @@ -<nz-tabset (nzSelectChange)="handleTabChange($event)"> +<nz-tabset (nzSelectChange)="handleTabChange($event)" class="slicing"> <nz-tab nzTitle="Slicing Task Management"> <app-slicing-task-management *ngIf="currentTab ==='Slicing Task Management'" @@ -9,4 +9,9 @@ *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 |