Update code to latest

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

3 files changed, 103 insertions, 29 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>
diff --git a/public/src/app/home/home.component.scss b/public/src/app/home/home.component.scss
index 2217b7d..fb2f5e4 100644
--- a/public/src/app/home/home.component.scss
+++ b/public/src/app/home/home.component.scss
@@ -73,6 +73,16 @@
   color: #5a5a5a;
 }
 
+// .ngx-datatable.fixed-row
+//   .datatable-scroll
+//   .datatable-body-row
+//   .datatable-body-cell {
+//       padding: 3px;
+// display: flex;
+// align-items: center;
+// padding-left: 7px;
+// }
+
 .ngx-datatable.material {
   box-shadow: none;
 }
diff --git a/public/src/app/home/home.component.ts b/public/src/app/home/home.component.ts
index aa783d4..ad970f6 100644
--- a/public/src/app/home/home.component.ts
+++ b/public/src/app/home/home.component.ts
@@ -9,6 +9,7 @@ import { ConfirmPopupComponent } from '../rule-engine/confirm-popup/confirm-popu
 import { PluginPubSub } from 'sdc-pubsub';
 import { Store } from '../store/store';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { environment } from '../../environments/environment';
 
 @Component({
   selector: 'app-home',
@@ -20,11 +21,11 @@ export class HomeComponent {
   linkToMain: string;
   showTable = true;
   selectedLine = [];
-  monitoringComponents = new Array();
   unavailableMonitoringComponents = new Array();
   hoveredIndex = 1;
   dialogRef;
   deleteRow: number;
+  imgBase = environment.imagePath;
 
   loadingIndicator = true;
 
@@ -38,6 +39,8 @@ export class HomeComponent {
     private changeDetectorRef: ChangeDetectorRef
   ) {
     this.store.loader = true;
+    this.store.viewOnly = false;
+    this.store.mcName = '';
     this.activeRoute.queryParams.subscribe(params => {
       console.log('params: %o', params);
       this.store.sdcParmas = params;
@@ -91,13 +94,13 @@ export class HomeComponent {
         response => {
           console.log('response:  ', response);
           if (response.hasOwnProperty('monitoringComponents')) {
-            this.monitoringComponents = response.monitoringComponents;
+            this.store.monitoringComponents = response.monitoringComponents;
             this.loadingIndicator = false;
           }
           if (response.hasOwnProperty('unavailable')) {
             this.unavailableMonitoringComponents = response.unavailable;
           }
-          this.showTable = this.monitoringComponents.length > 0;
+          this.showTable = this.store.monitoringComponents.length > 0;
           this.store.loader = false;
         },
         response => {
@@ -138,12 +141,30 @@ export class HomeComponent {
   }
 
   onTableActivate(event: any): void {
-    this.hoveredIndex = this.monitoringComponents.findIndex(
+    this.hoveredIndex = this.store.monitoringComponents.findIndex(
       s => s === event.row
     );
     console.log('selected : ');
   }
 
+  revertMcDialog(item) {
+    this.store.submittedMcUuid = item.submittedUuid;
+    this.store.mcUuid = item.uuid;
+    this.store.vfiName = item.vfiName;
+    this.store.displayRevertDialog = true;
+  }
+
+  checkReverted(item: any) {
+    return !item.uuid.includes(item.submittedUuid);
+  }
+
+  viewSubmitted(item: any): void {
+    this.store.vfiName = item.vfiName;
+    console.log('item.submittedUuid', item.submittedUuid);
+    this.store.viewOnly = true;
+    this.route.navigate([this.linkToMain + '/' + item.submittedUuid]);
+  }
+
   editTableItem(item: any): void {
     this.store.vfiName = item.vfiName;
     this.route.navigate([this.linkToMain + '/' + item.uuid]);
@@ -165,12 +186,16 @@ export class HomeComponent {
       if (result) {
         if (item.status === 'Submitted') {
           this.store.loader = true;
+          const submittedUuid = !item.uuid.includes(item.submittedUuid)
+            ? item.submittedUuid
+            : '';
           this._restApi
             .deleteMonitoringComponentWithBlueprint(
               this.store.sdcParmas,
               item.name,
               item.uuid,
-              item.vfiName
+              item.vfiName,
+              submittedUuid
             )
             .subscribe(
               response => {
@@ -180,7 +205,7 @@ export class HomeComponent {
               error => {
                 const errorMsg = Object.values(error.requestError) as any;
                 if (errorMsg[0].messageId === 'SVC6118') {
-                  this.monitoringComponents = this.monitoringComponents.filter(
+                  this.store.monitoringComponents = this.store.monitoringComponents.filter(
                     comp => {
                       return comp.uuid !== item.uuid;
                     }
@@ -215,12 +240,33 @@ export class HomeComponent {
   }
 
   itemDeletedRemoveAndNotify(uuid, deletedRow: number): void {
-    this.monitoringComponents = this.monitoringComponents.filter(comp => {
-      return comp.uuid !== uuid;
-    });
+    this.store.monitoringComponents = this.store.monitoringComponents.filter(
+      comp => {
+        return comp.uuid !== uuid;
+      }
+    );
     this.toastr.success(
       '',
       'Monitoring Configuration was successfully deleted'
     );
   }
+
+  test() {
+    const path = location.href;
+    console.log('path', path);
+
+    const newUrl = this.updateQueryStringParameter(path, 'userId', 'dror');
+    console.log('newUrl', newUrl);
+    window.location.href = newUrl;
+  }
+
+  updateQueryStringParameter(uri, key, value) {
+    const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+    const separator = uri.indexOf('?') !== -1 ? '&' : '?';
+    if (uri.match(re)) {
+      return uri.replace(re, '$1' + key + '=' + value + '$2');
+    } else {
+      return uri + separator + key + '=' + value;
+    }
+  }
 }