merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

1 files changed, 75 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.html b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.html
new file mode 100644
index 000000000..3a29ed824
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.html
@@ -0,0 +1,75 @@
+<div class="table-header">
+  <div class="left-header">
+    <span class="title-header">{{description}}</span>
+    <div class="sub-title-header">
+      <span class="vnf-match-your-criteria" class="total" [attr.data-tests-id]="'total-amount'" style="margin-right: 5px;"><span
+        [attr.data-tests-id]="'numberOfNotHideVnfMembers'">{{membersTableService.numberOfNotHideVnfMembers}}</span> VNFs match your criteria</span>
+      <span class="vnf-selected" class="total" [attr.data-tests-id]="'total-selected'"><span
+        [attr.data-tests-id]="'numberOfSelectedVnfMembers'">{{membersTableService.numberOfSelectedVnfMembers}}</span> VNF{{membersTableService.numberOfSelectedVnfMembers>1?'s':'' }} selected</span>
+    </div>
+  </div>
+
+  <div class="search-container">
+    <sdc-filter-bar
+      [placeHolder]="'Search...'"
+      [debounceTime]="250"
+      [testId]="'vnf-members-search'"
+      (valueChange)="search($event)">
+    </sdc-filter-bar>
+  </div>
+</div>
+<table id="member-table" class="table table-bordered" *ngIf="data?.length > 0">
+  <thead class="thead-dark">
+  <tr>
+    <th class="allCheckboxAreSelected" style="position: relative;">
+      <sdc-checkbox
+        [(checked)]="membersTableService.allCheckboxAreSelected"
+        [testId]="'all-checkbox-selected'"
+        (checkedChange)="changeAllCheckboxStatus($event)"
+      ></sdc-checkbox>
+    </th>
+    <th class="header-title" *ngFor="let header of headers">{{header.displayName}}</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr class="member-table-row" *ngFor="let vnf of membersTableService.filteredMembers">
+    <td class="sdcCheckboxMember" style="position: relative;" [attr.data-tests-id]="vnf?.instanceId">
+      <sdc-checkbox
+        [checked]="membersTableService.allMemberStatusMap[vnf.instanceId]?.isSelected"
+        [testId]="vnf?.instanceId"
+        (checkedChange)="changeCheckboxStatus(vnf.instanceId)"
+      ></sdc-checkbox></td>
+    <td id="vnfName">
+      <custom-ellipsis [id]="vnf?.instanceName" [value]="vnf?.instanceName"
+                       [hightlight]="filterValue"></custom-ellipsis>
+      <custom-ellipsis class="second-line" [id]="vnf?.instanceId" [value]="'UUID: '+ vnf?.instanceId"
+                       [hightlight]="filterValue"></custom-ellipsis>
+    </td>
+    <td id="version">
+      <custom-ellipsis [id]="vnf?.modelInfo?.modelVersion" [value]="vnf?.modelInfo?.modelVersion" [hightlight]="filterValue"></custom-ellipsis>
+    </td>
+    <td id="modelName">
+      <custom-ellipsis [id]="vnf?.modelInfo?.modelName" [value]="vnf?.modelInfo?.modelName" [hightlight]="filterValue"></custom-ellipsis>
+    </td>
+    <td id="provStatus">
+      <custom-ellipsis [id]="vnf?.provStatus" [value]="vnf?.provStatus" [hightlight]="filterValue"></custom-ellipsis>
+    </td>
+    <td id="serviceInstance">
+      <custom-ellipsis [id]="vnf?.serviceInstanceName" [value]="vnf?.serviceInstanceName"
+                       [hightlight]="filterValue"></custom-ellipsis>
+      <custom-ellipsis class="second-line" [id]="vnf?.serviceInstanceId" [value]="'UUID: '+ vnf?.serviceInstanceId"
+                       [hightlight]="filterValue"></custom-ellipsis>
+    </td>
+    <td id="cloudRegion">
+      <custom-ellipsis [id]="vnf?.lcpCloudRegionId" [value]="vnf?.lcpCloudRegionId" [hightlight]="filterValue"></custom-ellipsis>
+    </td>
+    <td id="tenantName">
+      <custom-ellipsis [id]="vnf?.tenantName" [value]="vnf?.tenantName" [hightlight]="filterValue"></custom-ellipsis>
+    </td>
+  </tr>
+
+  </tbody>
+</table>
+<div class="no-result" *ngIf="data?.length == 0">No VNFs were found that can belong to this group.</div>
+
+