feat: add slicing nssi page basic business code

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

1 files changed, 51 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.html
new file mode 100644
index 00000000..c2408a81
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.html
@@ -0,0 +1,51 @@
+<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"
+                 (ngModelChange)="getListOfProcessingStatus()">
+        <nz-option *ngFor="let item of statusOptions" [nzLabel]="item" [nzValue]="item"></nz-option>
+      </nz-select>
+    </div>
+  </div>
+  <div class="slicing-resource-table-list">
+    <nz-table
+            #nsiTable
+            [nzData]="listOfData"
+            [nzFrontPagination]="false"
+            nzShowSizeChanger
+            [nzPageSizeOptions]="[5,10,15,20]"
+            [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>Context</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.environment_context}}</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