diff options
Diffstat (limited to 'usecaseui-portal/src/app')
3 files changed, 104 insertions, 6 deletions
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html index 951eb5e7..74a88dc7 100644 --- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html @@ -1,3 +1,54 @@ -<p> - monitor-5g works! -</p> +<div> + <div nz-row> + <div nz-col nzSpan="12" class="monitorDate"> + <nz-date-picker + nzShowTime + nzFormat="yyyy-MM-dd HH:mm:ss" + nzPlaceHolder="Select Time" + ngModel + (ngModelChange)="onDateChange($event)" + (nzOnOk)="onDateOk($event)" + ></nz-date-picker> + </div> + </div> + <div class="slicing-resource-table"> + <div class="slicing-resource-table-list"> + <nz-table + #basicTable + [nzData]="listOfData" + [nzFrontPagination]="false" + nzShowSizeChanger + [nzPageSizeOptions]="[6,8,10]" + [nzTotal]='total' + [(nzPageSize)]="pageSize" + [(nzPageIndex)]='pageIndex' + [nzLoading]="loading" + (nzPageIndexChange)="searchData()" + (nzPageSizeChange)="searchData(true)" + > + <thead> + <tr> + <th>Service Instance Id</th> + <th>Service Instance Name</th> + <th>Service Type</th> + <th>S-NSSAI</th> + <th>Status</th> + </tr> + </thead> + <tbody> + <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index"> + <tr> + <td>{{ data.service_instance_id }}</td> + <td>{{ data.service_instance_name }}</td> + <td>{{ data.service_type }}</td> + <td>{{ data.service_snssai }}</td> + <td> + {{ data.orchestration_status }} + </td> + </tr> + </ng-template> + </tbody> + </nz-table> + </div> + </div> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less index e69de29b..cad2aeaa 100644 --- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less @@ -0,0 +1,4 @@ +.monitorDate{ + margin-left: 2%; + margin-top: 30px; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts index 128f1ba4..ac7cc905 100644 --- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; - +import {SlicingTaskServices} from '.././../../core/services/slicingTaskServices'; @Component({ selector: 'app-monitor-5g', templateUrl: './monitor-5g.component.html', @@ -7,9 +7,52 @@ import { Component, OnInit } from '@angular/core'; }) export class Monitor5gComponent implements OnInit { - constructor() { } - + constructor( + private myhttp: SlicingTaskServices + ) { + } + listOfData: any[] = []; + pageIndex: number = 1; + pageSize: number = 10; + total: number = 0; + loading = false; ngOnInit() { + this.getBusinessList() } + getBusinessList (): void{ + this.loading = true; + let paramsObj = { + pageNo: this.pageIndex, + pageSize: this.pageSize + }; + this.myhttp.getSlicingBusinessList(paramsObj,false).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 = [].concat(slicing_business_list) + } + }) + } + searchData(reset: boolean = false) { + this.getBusinessList(); + } + onDateChange(result: Date): void { + console.log('Selected Time: ', result); + } + + onDateOk(result: Date): void { + console.log('onOk', result); + } + getChartsData = (time = new Date().getTime()) => { + if (!this.listOfData.length) { + return false; + } + const service_list = []; + this.listOfData.forEach(item => { + service_list.push({service_id: item.service_instance_id}); + }); + } + } |