From 7867c700a634f91fb579c1fbabd5d38452628591 Mon Sep 17 00:00:00 2001
From: Tiago Melo <tmelo@suse.com>
Date: Tue, 7 May 2019 15:53:02 +0000
Subject: [PATCH] mgr/dashboard: Set changeDetection to Push on Table Component

This will limit the number of times angular checks for changes to only once
when a new data object is pushed to the table component.

It will also remove the event of rendering the table when we hover a row.

Fixes: http://tracker.ceph.com/issues/39944

Signed-off-by: Tiago Melo <tmelo@suse.com>
---
 .../shared/datatable/table/table.component.spec.ts |  7 +++++++
 .../app/shared/datatable/table/table.component.ts  | 14 +++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
index 43e1bc25f7f..aa86e5de32d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
@@ -79,6 +79,13 @@ describe('TableComponent', () => {
     expect(component.userConfig.limit).toBe(1);
   });
 
+  it('should prevent propagation of mouseenter event', (done) => {
+    fixture.detectChanges();
+    const mouseEvent = new MouseEvent('mouseenter');
+    mouseEvent.stopPropagation = () => done();
+    fixture.debugElement.nativeElement.dispatchEvent(mouseEvent);
+  });
+
   describe('test search', () => {
     const expectSearch = (keyword: string, expectedResult: object[]) => {
       component.search = keyword;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
index 2a942f38644..8d6295f3b42 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
@@ -1,5 +1,6 @@
 import {
   AfterContentChecked,
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   EventEmitter,
@@ -31,7 +32,8 @@ import { CdUserConfig } from '../../models/cd-user-config';
 @Component({
   selector: 'cd-table',
   templateUrl: './table.component.html',
-  styleUrls: ['./table.component.scss']
+  styleUrls: ['./table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TableComponent implements AfterContentChecked, OnInit, OnChanges, OnDestroy {
   @ViewChild(DatatableComponent)
@@ -173,6 +175,16 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
   }
 
   ngOnInit() {
+    // ngx-datatable triggers calculations each time mouse enters a row,
+    // this will prevent that.
+    window.addEventListener(
+      'mouseenter',
+      function(event) {
+        event.stopPropagation();
+      },
+      true
+    );
+
     this._addTemplates();
     if (!this.sorts) {
       // Check whether the specified identifier exists.
-- 
2.39.5