From 817390e74ff1aefebc1d5ed5853d9d95ff283a99 Mon Sep 17 00:00:00 2001
From: cyuamber <xuranyjy@chinamobile.com>
Date: Mon, 9 Dec 2019 16:02:57 +0800
Subject: feat:add slicing business tableList of monitor 5g page

Change-Id: I28bf171c279dfb2e109f4a7a1b72cda4fbc6c959
Issue-ID: USECASEUI-370
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
---
 .../fcaps/monitor-5g/monitor-5g.component.html     | 57 ++++++++++++++++++++--
 1 file changed, 54 insertions(+), 3 deletions(-)

(limited to 'usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html')

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
-- 
cgit 1.2.3-korg