blob: 4843665a6ec846e7f706392187384863f890c759 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<div class="monitor-content">
<h1>Slicing business Monitor</h1>
<div nz-row>
<div nz-col nzSpan="10" class="monitorDate">
<nz-date-picker
nzShowTime
[nzShowToday]="false"
[nzDisabledDate]="disabledDate"
nzFormat="yyyy-MM-dd HH:mm:ss"
nzPlaceHolder="Select Time"
[(ngModel)]="dateValue"
(ngModelChange)="onDateChange($event)"
(nzOnOk)="onDateOk($event)"
(nzOnOpenChange)="onOpenChange($event)"
></nz-date-picker>
</div>
<div nz-col nzSpan="3" class="charts">
<h3><nz-form-label class= "colm-s-1 lblCls">Supported KPIs</nz-form-label></h3>
</div>
<div nz-col nzSpan="8" class="charts">
<div class="drop-container">
<ng-multiselect-dropdown
[placeholder]="'Select KPIs'"
[settings]="dropdownSettings"
[data]="dropdownList"
(onSelect)="onItemSelect($event)"
(onDeSelect)="onItemDeSelect()"
[(ngModel)]="selectedItems">
</ng-multiselect-dropdown>
</div>
</div>
</div>
<div nz-row>
<div nz-col nzType="flex" class="charts" *ngFor="let data of selectedItems" [ngSwitch]="data.item_text">
<div nz-col nzSpan="6" class="gutter-row col-boxshadow" *ngSwitchCase="'SlicingUseTraffic'">
<nz-spin [nzSpinning]="isSpinningTraffic">
<h4>Slicing Use Traffic</h4>
<app-pie [initData]="trafficChartInit" [chartData]="trafficChartData"></app-pie>
<div *ngIf="!isSpinningTraffic && trafficData.length === 0" class="nodata">NO Data</div>
</nz-spin>
</div>
<div nz-col nzSpan="7" class="gutter-row col-boxshadow" *ngSwitchCase="'NumberOfOnlineUsers'">
<nz-spin [nzSpinning]="isSpinningOnlineuser">
<h4>Number Of Online Users</h4>
<app-line [initData]="onlineuserChartInit" [chartData]="onlineuserChartData"></app-line>
<div *ngIf="!isSpinningOnlineuser && onlineusersData.length === 0" class="nodata">NO Data</div>
</nz-spin>
</div>
<div nz-col nzSpan="7" class="gutter-row col-boxshadow" *ngSwitchCase="'SlicingTotalBandwidth'">
<nz-spin [nzSpinning]="isSpinningBandwidth">
<h4>Slicing Total Bandwidth</h4>
<app-line [initData]="bandwidthChartInit" [chartData]="bandwidthChartData"></app-line>
<div *ngIf="!isSpinningBandwidth && bandwidthData.length === 0" class="nodata">NO Data</div>
</nz-spin>
</div>
<div nz-col nzSpan="7" class="gutter-row col-boxshadow" *ngSwitchCase="'PDUSessionEstSR'">
<nz-spin [nzSpinning]="isSpinningPDUSessionEstSR">
<h4>PDUSessionEstSR</h4>
<app-line [initData]="pDUSessionEstSRChartInit" [chartData]="pDUSessionEstSRChartData"></app-line>
<div *ngIf="!isSpinningPDUSessionEstSR && pDUSessionEstSRData.length === 0" class="nodata">NO Data</div>
</nz-spin>
</div>
</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>
|
