summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
blob: baf43f43ff4eb64352f7379acfc6d9d503f7d130 (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
<div>
    <div nz-row>
        <div nz-col nzSpan="12" class="monitorDate">
            <nz-date-picker
                    nzShowTime
                    [nzShowToday]="false"
                    nzFormat="yyyy-MM-dd HH:mm:ss"
                    nzPlaceHolder="Select Time"
                    ngModel
                    (ngModelChange)="onDateChange($event)"
                    (nzOnOk)="onDateOk($event)"
            ></nz-date-picker>
        </div>
    </div>
    <div nz-row nzType="flex" nzGutter="16" class="charts">
        <div nz-col nzSpan="6" class="gutter-row col-boxshadow">
            <h4>Slicing Use Traffic</h4>
            <app-pie [initData]="trafficChartInit" [chartData]="trafficChartData"></app-pie>
        </div>
        <div nz-col nzSpan="9" class="gutter-row col-boxshadow">
            col-9
        </div>
        <div nz-col nzSpan="9" class="gutter-row col-boxshadow">
            col-9
        </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>