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>

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 43e1bc25f7feb7e9c38f7f9e41a67323251cd7d4..aa86e5de32d6aaf5af4e22aab5ee7a738e1389b4 100644 (file)
--- 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 2a942f3864465e0cbfd48c94acb456dfc1ec091e..8d6295f3b427489374bea6cfc4025c8b58610cb3 100644 (file)
--- 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.