Update FE project

Update FE to latest version so that fe can run on docker

Change-Id: I9c5dee756b567dbe64fac6d3d6fd89362813bdcc
Issue-ID: SDC-1359
Signed-off-by: Stone, Avi (as206k) <as206k@att.com>

1 files changed, 68 insertions, 64 deletions

diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html
index 90e82d3..8cea741 100644
--- a/public/src/app/home/home.component.html
+++ b/public/src/app/home/home.component.html
@@ -1,18 +1,19 @@
-<div class="container">
+<div class="home-container">
   <div style="display: flex;
+    padding-bottom:7px;
     justify-content: space-between;">
-    <div style="font-size: 1.7em; display: flex; align-items: center;">Monitoring</div>
+    <div style="font-size: 22px; display: flex; align-items: center;">Monitoring</div>
 
     <div style="display: flex;">
-      <button mat-icon-button [disabled]="checkCanCreate()" (click)="importScreen()">
+      <button mat-icon-button [disabled]="checkCanCreate()" style="margin-right: 10px;" data-tests-id="btn-import-mc" (click)="importScreen()">
         <span style="width: 100%;
                   height: 100%;
                   display: flex;
                   justify-content: center;
-                  align-items: center;" [innerHTML]="'download' | feather:22"></span>
+                  align-items: center;" [innerHTML]="'download' | feather:20"></span>
       </button>
 
-      <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" [disabled]="checkCanCreate()">
+      <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" class="btn-create" [disabled]="checkCanCreate()">
         Create New MC
       </button>
     </div>
@@ -21,62 +22,66 @@
   <div *ngIf="showTable===true; then thenBlock else elseBlock"></div>
 
   <ng-template #thenBlock>
-    <!-- Table -->
-    <div class="table-wrapper">
-      <div *ngIf="unavailableMonitoringComponents.length > 0" data-tests-id="unavailableArea" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold; margin: 1em 0;">
-        <div *ngFor="let item of unavailableMonitoringComponents">
-          {{item.uuid}}
-        </div>
+
+    <div *ngIf="unavailableMonitoringComponents.length > 0" data-tests-id="unavailableArea" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold; margin: 1em 0;">
+      <div *ngFor="let item of unavailableMonitoringComponents">
+        {{item.uuid}}
       </div>
-      <table class="mcTable">
-        <thead>
-          <tr data-tests-id="monitoringComponentTableHeaders">
-            <th>Monitoring Configuration</th>
-            <th>VNFI Name</th>
-            <th style="width:90px;">Version</th>
-            <th style="width:140px;">Status</th>
-            <th style="width:140px;">Last Updated by</th>
-            <th style="width:96px;">Action</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let item of monitoringComponents; let i = index" on-mouseleave="hoveredIndex=null" (click)="onSelect(i)" [class.active]="i == selectedLine"
-            data-tests-id="monitoringComponentTableItems" on-mouseover="hoveredIndex=i">
-            <td color="blue">
-              <div [hidden]="checkHoverCondition(item)" data-tests-id="tableItemsMonitoringConfiguration" class="table-Monitoring-Component" (click)="editItem(item)">
-                {{item.name}}
-              </div>
-            </td>
-            <td>
-              <span pTooltip="{{item.vfiName}}" tooltipPosition="bottom" style="padding:5px;">{{item.vfiName}}</span>
-            </td>
-            <td style="width:90px;">{{item.version}}</td>
-            <td style="width:140px;">{{item.status}}</td>
-            <td style="width:140px;">{{item.lastUpdaterUserId}}</td>
-            <td style="width:80px;">
-              <div *ngIf="i==hoveredIndex" [hidden]="checkHoverCondition(item)">
-                <button mat-icon-button data-tests-id="tableItemsButtonDelete" (click)="deleteItem(item)" style="width:30px; height: 30px;">
-                  <span style="width: 100%;
-                              height: 100%;
-                              display: flex;
-                              justify-content: center;
-                              align-items: center;" [innerHTML]="'trash-2' | feather:18"></span>
-                </button>
-              </div>
-              <div *ngIf="i==hoveredIndex" [hidden]="!checkHoverCondition(item)">
-                <button mat-icon-button data-tests-id="tableItemsButtonInfo" style="width:30px; height: 30px;">
-                  <span style="width: 100%;
-                              height: 100%;
-                              display: flex;
-                              justify-content: center;
-                              align-items: center;" [innerHTML]="'info' | feather:18"></span>
-                </button>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
     </div>
+
+    <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="monitoringComponents" [loadingIndicator]="loadingIndicator" [columnMode]="'flex'"
+      [headerHeight]="40" [footerHeight]="40" [limit]="10" [rowHeight]="40"(selected)="onTableSelectItem($event)"
+      [selectionType]="'single'" [selected]="selectedLine" (activate)="onTableActivate($event)">
+
+      <ngx-datatable-column name="Monitoring Configuration" prop="name" [flexGrow]="3">
+        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+
+          <div data-tests-id="tableItemsMonitoringConfiguration" [hidden]="checkTableItemHoverCondition(row)" (click)="editTableItem(row)"
+            class="ngx-datatable-monitoring-name">
+            <span> {{value}} </span>
+          </div>
+          <div data-tests-id="tableItemsMonitoringConfigurationNotOwner" [hidden]="!checkTableItemHoverCondition(row)">
+            <span>{{value}} </span>
+          </div>
+        </ng-template>
+
+      </ngx-datatable-column>
+      <ngx-datatable-column name="VNFI Name" prop="vfiName" [flexGrow]="3">
+        <ng-template let-value="value" ngx-datatable-cell-template>
+
+          <div pTooltip="{{value}}" tooltipPosition="bottom">{{value}}</div>
+
+        </ng-template>
+
+
+      </ngx-datatable-column>
+      <ngx-datatable-column name="Version" prop="version" [flexGrow]="1"></ngx-datatable-column>
+      <ngx-datatable-column name="Status" prop="status" [flexGrow]="2"></ngx-datatable-column>
+      <ngx-datatable-column name="Last Updated by"  prop="lastUpdaterUserId" [flexGrow]="2"></ngx-datatable-column>
+      <ngx-datatable-column name="Actions" sortable="false" prop="id"  [flexGrow]="1">
+        <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template >
+
+          <div *ngIf="hoveredIndex == rowIndex" style="margin-top:-5px;" >
+            <button data-tests-id="tableItemsButtonDelete" *ngIf="!checkTableItemHoverCondition(row); else elseBtnBlock" mat-icon-button
+              data-tests-id="tableItemsButtonDelete" (click)="deleteTableItem(row, rowIndex)" style="width:30px; height: 30px;">
+              <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;" [innerHTML]="'trash-2' | feather:18"></span>
+            </button>
+             
+            <ng-template #elseBtnBlock>
+
+                <button data-tests-id="tableItemsButtonInfo" mat-icon-button data-tests-id="tableItemsButtonInfo" style="width:30px; height: 30px;">
+                  <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;" [innerHTML]="'info' | feather:18"></span>
+                </button>
+              </ng-template>
+
+          </div>
+
+        </ng-template>
+      </ngx-datatable-column>
+
+    </ngx-datatable>
+
+
   </ng-template>
 
   <ng-template #elseBlock>
@@ -85,22 +90,21 @@
   justify-content: center;
   align-items: center;
   flex:1;">
-      <div style="font-size: 1.5em;">
+      <div style="font-size: 18px;">
         Monitoring Configuration does not Exist
       </div>
-      <div style="padding: 0.5em; padding-top: 1em;" data-tests-id="new-monitoring-title">
+      <div style="padding: 0.5em; padding-top: 1em; font-size: 13px;" data-tests-id="new-monitoring-title">
         A Monitoring Configuration (MC) was not yet created
       </div>
-      <div>
+      <div style="font-size: 13px;">
         Please create a new MC to monitor the service
       </div>
       <div class="wrapper-btn-add-mc">
         <button mat-mini-fab color="primary" (click)="createScreen()" data-tests-id="btn-fab-create-mc" [disabled]="checkCanCreate()">
           <span [innerHTML]="'plus' | feather:24"></span>
         </button>
-        <span data-tests-id="btn-span-create-mc" style="margin-top: 1rem; font-size: 1.2em; font-weight: 400;" [style.color]="checkCanCreate() ? '#ebebe4' : '#009FDB'">Add First MC</span>
+        <span data-tests-id="btn-span-create-mc" style="margin-top: 10px; font-size: 14px; " [style.color]="checkCanCreate() ? '#ebebe4' : '#009FDB'">Add First MC</span>
       </div>
     </div>
   </ng-template>
 </div>
-