Ceph » mgr » Dashboard

The data table (ngx-datatable) used in the dashboard is very slow in Firefox. Hovering columns takes some time (<1s) to highlight the row that's hovered. When trying to navigate such a table using the page navigation, I need to wait some time (<1s) to be able to click the button for the next page. Although the browser has the data, loading a 10 rows page takes more than a second. Summarized, the performance and hence, the user experience with Firefox is pretty bad.

This problem is not noticable using Chrome.

Before fix:¶

Performance graphs:

After fix (one line removal):¶

Performance graphs:

The changes:¶

Index: src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts    (date 1567608360000)
+++ src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts    (date 1567676724112)
@@ -179,7 +179,6 @@
   ngOnInit() {
     // ngx-datatable triggers calculations each time mouse enters a row,
     // this will prevent that.
-    window.addEventListener('mouseenter', (event) => event.stopPropagation(), true);
     this._addTemplates();
     if (!this.sorts) {
       // Check whether the specified identifier exists.

https://github.com/ceph/ceph/blob/master/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts#L182

As the fix is basically the removal of another fix, I'd like to discuss the issue here first.

Relates to¶

- https://github.com/swimlane/ngx-datatable/issues/1513
- https://github.com/ceph/ceph/pull/28118
- https://github.com/swimlane/ngx-datatable/issues/1513