summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/fcaps
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-12-09 16:02:57 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-12-09 16:03:01 +0800
commit817390e74ff1aefebc1d5ed5853d9d95ff283a99 (patch)
tree5a209276944c6dfb4a438b25abcff52b994509aa /usecaseui-portal/src/app/views/fcaps
parent99770660d5b35c75e6127c14c4e362720b200747 (diff)
feat:add slicing business tableList of monitor 5g page
Change-Id: I28bf171c279dfb2e109f4a7a1b72cda4fbc6c959 Issue-ID: USECASEUI-370 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/fcaps')
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html57
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less4
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts49
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});
+ });
+ }
+
}