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>
(cherry picked from commit 7867c700a634f91fb579c1fbabd5d38452628591)

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 ecf7fca50fe00186eab9626b5812e281968d71f1..1d4ddeaef23cb6c8e7a7a7edaaa47a751acfe5a6 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
@@ -87,6 +87,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);
+    });
+
     it('should force an identifier', () => {
       clearLocalStorage();
       component.identifier = 'x';

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 cb6dd0e993f528c302945d0c1eb0c8adcbf9e0a1..64a2c33e647e6a4ff330dc8391f8c14db4d0fe48 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)
@@ -163,6 +165,16 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
   constructor(private ngZone: NgZone, private cdRef: ChangeDetectorRef) {}
 
   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.