feat: add slicing nsi basic business code of nsi page

Change-Id: I85ceaad153cf4dd9b9c3d4e6db9d9ce4cf6af4bf
Issue-ID: USECASEUI-369
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

1 files changed, 45 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.html
new file mode 100644
index 00000000..5bcdbb6a
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.html
@@ -0,0 +1,45 @@
+<div class="slicing-resource-table">
+    <div nz-row>
+        <div nz-col nzSpan="12" class="task_status">
+            <span>Status : </span>
+            <nz-select nzShowSearch nzPlaceHolder="Select a processing status" [(ngModel)]="selectedValue">
+                <nz-option *ngFor="let item of statusOptions" [nzLabel]="item" [nzValue]="item"></nz-option>
+            </nz-select>
+        </div>
+    </div>
+    <div>
+        <nz-table
+                #nsiTable
+                [nzData]="listOfData"
+                [nzFrontPagination]="false"
+                [nzPageSizeOptions]="[5,10,15,20]"
+                [nzTotal]='total'
+                [(nzPageSize)]="pageSize"
+                [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading"
+        >
+            <thead>
+            <tr>
+                <th>Service Instance Id</th>
+                <th>Service Instance Name</th>
+                <th>Service Type</th>
+                <th>Status</th>
+                <th width="140px">Detail</th>
+            </tr>
+            </thead>
+            <tbody>
+            <ng-template ngFor let-data [ngForOf]="nsiTable.data" let-i="index">
+                <tr>
+                    <td>{{ data.service_instance_id }}</td>
+                    <td>{{ data.service_instance_name }}</td>
+                    <td>{{ data.service_type }}</td>
+                    <td>{{data.orchestration_status}}</td>
+                    <td>
+                        <a (click)="showdetail(data)">detail</a>
+                    </td>
+                </tr>
+            </ng-template>
+            </tbody>
+        </nz-table>
+    </div>
+</div>
\ No newline at end of file