Set visible action buttons on the monitoring dashboard.

Change css in the home component to setup the action buttons visible from the beginning.
Fixed select event (change selected event this event don't exist to select event).
Changed to one array initialization.

Issue-ID: SDC-2363
Signed-off-by: Krystian Kedron <k.kedron@partner.samsung.com>
Change-Id: I87481002e0c8586aaafb6bad18479ad0715f61c7

3 files changed, 17 insertions, 13 deletions

diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html
index a742696..fe20ab6 100644
--- a/public/src/app/home/home.component.html
+++ b/public/src/app/home/home.component.html
@@ -32,9 +32,18 @@
       </div>
     </div>
 
-    <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 data-tests-id="monitoringComponentTable" class="material"
+                   [rows]="store.monitoringComponents"
+                   [loadingIndicator]="loadingIndicator"
+                   [columnMode]="'flex'"
+                   [headerHeight]="40"
+                   [footerHeight]="40"
+                   [limit]="12"
+                   [rowHeight]="45"
+                   (select)="onTableSelectItem()"
+                   [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>
@@ -60,7 +69,7 @@
         <ng-template let-row="row" let-rowIndex="rowIndex"  ngx-datatable-cell-template>
 
           <div class="activeBtnWrapper">
-            <div class="activeBtn" *ngIf="hoveredIndex == rowIndex">
+            <div class="activeBtn">
 
               <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">
diff --git a/public/src/app/home/home.component.scss b/public/src/app/home/home.component.scss
index 523fc3b..63d0544 100644
--- a/public/src/app/home/home.component.scss
+++ b/public/src/app/home/home.component.scss
@@ -74,17 +74,13 @@
 }
 
 .activeBtnWrapper .activeBtn {
-  opacity: 0;
+  opacity: 1;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   margin-top: -5px;
 }
 
-.activeBtnWrapper:hover .activeBtn {
-  opacity: 1;
-}
-
 // .ngx-datatable.fixed-row
 //   .datatable-scroll
 //   .datatable-body-row
diff --git a/public/src/app/home/home.component.ts b/public/src/app/home/home.component.ts
index ef29043..3b863b0 100644
--- a/public/src/app/home/home.component.ts
+++ b/public/src/app/home/home.component.ts
@@ -22,7 +22,7 @@ export class HomeComponent {
   linkToMain: string;
   showTable = true;
   selectedLine = [];
-  unavailableMonitoringComponents = new Array();
+  unavailableMonitoringComponents = [];
   hoveredIndex = 1;
   dialogRef;
   deleteRow: number;
@@ -173,9 +173,8 @@ export class HomeComponent {
     this.route.navigate([this.linkToMain + '/' + item.uuid]);
   }
 
-  onTableSelectItem(item: any): void {
-    this.selectedLine = item;
-    console.log('selected : ', item);
+  onTableSelectItem(): void {
+    console.log('selected', this.selectedLine);
   }
 
   deleteTableItem(item: any, index: any): void {