From: Tiago Melo <tmelo@suse.com>
Date: Tue, 7 May 2019 15:53:02 +0000 (+0000)
Subject: mgr/dashboard: Set changeDetection to Push on Table Component
X-Git-Tag: v14.2.2~70^2~1
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=d8fb099afb0a262aa0152e129fa9dceb3940283b;p=ceph.git

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 ecf7fca50fe..1d4ddeaef23 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
@@ -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 cb6dd0e993f..64a2c33e647 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)
@@ -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.