Update code to latest

Change-Id: I76b37c2d6d333204899c9bc87f310e5b607a5e73
Issue-ID: DCAEGEN2-836
Signed-off-by: Manor, Yanir (ym903w) <ym903w@intl.att.com>

1 files changed, 38 insertions, 20 deletions

diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html
index 99ab321..3c23385 100644
--- a/public/src/app/home/home.component.html
+++ b/public/src/app/home/home.component.html
@@ -5,15 +5,18 @@
     <div style="font-size: 22px; display: flex; align-items: center;">Monitoring</div>
 
     <div style="display: flex;">
-      <button mat-icon-button [disabled]="!checkCanCreate()" style="margin-right: 10px;" data-tests-id="btn-import-mc" (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:20"></span>
+                  align-items: center;"
+          [innerHTML]="'download' | feather:20"></span>
       </button>
 
-      <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" class="btn-create" [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>
@@ -29,14 +32,14 @@
       </div>
     </div>
 
-    <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="monitoringComponents" [loadingIndicator]="loadingIndicator"
-      [columnMode]="'flex'" [headerHeight]="40" [footerHeight]="40" [limit]="12" [rowHeight]="40" (selected)="onTableSelectItem($event)"
-      [selectionType]="'single'" [selected]="selectedLine" (activate)="onTableActivate($event)">
+    <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="store.monitoringComponents"
+      [loadingIndicator]="loadingIndicator" [columnMode]="'flex'" [headerHeight]="40" [footerHeight]="40" [limit]="12"
+      [rowHeight]="45" (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" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
-               [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}">
+          <div>
             <span> {{value}} </span>
           </div>
         </ng-template>
@@ -54,21 +57,34 @@
       <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>
+      <ngx-datatable-column name="Actions" sortable="false" prop="id" [flexGrow]="2">
+        <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="checkCanCreate(); 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>
+          <div *ngIf="hoveredIndex == rowIndex" style="margin-top:-5px; display: flex; justify-content: flex-start; align-items: center;">
+
+            <button mat-icon-button *ngIf="row.submittedUuid" pTooltip="View submitted" tooltipPosition="top" (click)="viewSubmitted(row)" data-tests-id="viewSubmitted">
+              <img src="{{imgBase}}/icon_submitted.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_submitted">
+            </button>
+
+            <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="editMC" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
+              [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}" pTooltip="Edit"
+              tooltipPosition="top">
+              <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
+                [innerHTML]="'edit-3' | feather:18"></span>
             </button>
 
-            <ng-template #elseBtnBlock>
+            <div *ngIf="checkCanCreate();">
+            <button mat-icon-button *ngIf="row.submittedUuid != null && checkReverted(row)" pTooltip="Revert" data-tests-id="revertMC"
+              tooltipPosition="top" (click)="checkTableItemHoverCondition(row) && revertMcDialog(row)">
+              <img src="{{imgBase}}/icon_revert.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_revert">
+            </button>
+          </div>
 
-              <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>
+            <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="tableItemsButtonDelete"
+              pTooltip="Delete" tooltipPosition="top" (click)="deleteTableItem(row, rowIndex)">
+              <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
+                [innerHTML]="'trash-2' | feather:18"></span>
+            </button>
 
           </div>
 
@@ -99,7 +115,9 @@
         <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: 10px; font-size: 14px; " [style.color]="!checkCanCreate() ? '#ebebe4' : '#009FDB'">Add First MC</span>
+        <span style="margin-top: 10px; font-size: 14px; " [style.color]="!checkCanCreate() ? '#ebebe4' : '#009FDB'">
+          <p data-tests-id="btn-span-create-mc">Add First MC</p>
+        </span>
       </div>
     </div>
   </ng-template>