Merge "update code to latest"

2 files changed, 47 insertions, 60 deletions

diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html
index 8cea741..99ab321 100644
--- a/public/src/app/home/home.component.html
+++ b/public/src/app/home/home.component.html
@@ -5,7 +5,7 @@
     <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;
@@ -13,7 +13,7 @@
                   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,20 +29,16 @@
       </div>
     </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)"
+    <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-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">
+          <div data-tests-id="tableItemsMonitoringConfiguration" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
+               [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}">
             <span> {{value}} </span>
           </div>
-          <div data-tests-id="tableItemsMonitoringConfigurationNotOwner" [hidden]="!checkTableItemHoverCondition(row)">
-            <span>{{value}} </span>
-          </div>
         </ng-template>
 
       </ngx-datatable-column>
@@ -57,22 +53,22 @@
       </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 >
+      <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
+          <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>
             </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>
+              <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>
 
@@ -100,10 +96,10 @@
         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()">
+        <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 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>
diff --git a/public/src/app/home/home.component.ts b/public/src/app/home/home.component.ts
index 349a031..aa783d4 100644
--- a/public/src/app/home/home.component.ts
+++ b/public/src/app/home/home.component.ts
@@ -5,7 +5,8 @@ import { ToastrService } from 'ngx-toastr';
 import { RestApiService } from '../api/rest-api.service';
 import { HostService } from '../host/host.service';
 import { ConfirmPopupComponent } from '../rule-engine/confirm-popup/confirm-popup.component';
-import { PluginPubSub } from '../sdc/plugin-pubsub';
+// import { PluginPubSub } from '../sdc/plugin-pubsub';
+import { PluginPubSub } from 'sdc-pubsub';
 import { Store } from '../store/store';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
@@ -120,33 +121,25 @@ export class HomeComponent {
   }
 
   checkCanCreate() {
-    if (
+    return (
       JSON.parse(this.store.sdcParmas.isOwner) &&
       this.store.sdcParmas.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'
-    ) {
-      return false;
-    } else {
-      return true;
-    }
+    );
   }
 
   // Monitoring Table logic
 
   checkTableItemHoverCondition(item: any): boolean {
-    if (
-      this.store.sdcParmas !== undefined &&
-      this.store.sdcParmas.userId === item.lastUpdaterUserId &&
-      this.store.sdcParmas.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'
-    ) {
-      return false;
-    } else {
-      return true;
-    }
+    return (
+      this.checkCanCreate() &&
+      (this.store.sdcParmas.userId === item.lastUpdaterUserId ||
+        item['lifecycleState'] !== 'NOT_CERTIFIED_CHECKOUT')
+    );
   }
 
   onTableActivate(event: any): void {
     this.hoveredIndex = this.monitoringComponents.findIndex(
-      s => s == event.row
+      s => s === event.row
     );
     console.log('selected : ');
   }
@@ -161,18 +154,6 @@ export class HomeComponent {
     console.log('selected : ', item);
   }
 
-  deleteEnable(item: any): boolean {
-    console.log(
-      'delete enable: ',
-      item.isOwner && item.Lifecycle === 'NOT_CERTIFIED_CHECKOUT'
-    );
-    const { userId, lifecycleState } = this.store.sdcParmas;
-    return (
-      item.lastUpdaterUserId === userId &&
-      lifecycleState === 'NOT_CERTIFIED_CHECKOUT'
-    );
-  }
-
   deleteTableItem(item: any, index: any): void {
     this.deleteRow = index;
     this.dialogRef = this.dialog.open(ConfirmPopupComponent, {
@@ -183,6 +164,7 @@ export class HomeComponent {
       // if the user want to delete
       if (result) {
         if (item.status === 'Submitted') {
+          this.store.loader = true;
           this._restApi
             .deleteMonitoringComponentWithBlueprint(
               this.store.sdcParmas,
@@ -192,18 +174,24 @@ export class HomeComponent {
             )
             .subscribe(
               response => {
-                this.itemDeletedRemoveAndNotify(this.deleteRow);
+                this.itemDeletedRemoveAndNotify(item.uuid, this.deleteRow);
+                this.store.loader = false;
               },
               error => {
-                if (error.messageId === 'SVC6118') {
-                  this.monitoringComponents.splice(this.deleteRow, 1);
-                  this.changeDetectorRef.detectChanges();
-                }
                 const errorMsg = Object.values(error.requestError) as any;
+                if (errorMsg[0].messageId === 'SVC6118') {
+                  this.monitoringComponents = this.monitoringComponents.filter(
+                    comp => {
+                      return comp.uuid !== item.uuid;
+                    }
+                  );
+                }
+                this.store.loader = false;
                 this.toastr.error('', errorMsg[0].formattedErrorMessage);
               }
             );
         } else {
+          this.store.loader = true;
           this._restApi
             .deleteMonitoringComponent(
               this.store.sdcParmas,
@@ -212,10 +200,12 @@ export class HomeComponent {
             )
             .subscribe(
               response => {
-                this.itemDeletedRemoveAndNotify(this.deleteRow);
+                this.itemDeletedRemoveAndNotify(item.uuid, this.deleteRow);
+                this.store.loader = false;
               },
               error => {
                 const errorMsg = Object.values(error.requestError) as any;
+                this.store.loader = false;
                 this.toastr.error('', errorMsg[0]);
               }
             );
@@ -224,9 +214,10 @@ export class HomeComponent {
     });
   }
 
-  itemDeletedRemoveAndNotify(deletedRow: number): void {
-    this.monitoringComponents.splice(deletedRow, 1);
-    this.changeDetectorRef.detectChanges();
+  itemDeletedRemoveAndNotify(uuid, deletedRow: number): void {
+    this.monitoringComponents = this.monitoringComponents.filter(comp => {
+      return comp.uuid !== uuid;
+    });
     this.toastr.success(
       '',
       'Monitoring Configuration was successfully deleted'