Bug #41667
Updated by Patrick Seidensal over 4 years ago
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 more than a seconds*. Summarized, the performance and hence, the user experience with Firefox is pretty bad. seconds. This problem is not noticable using Chrome. h3. Before fix: !firefox-now.gif! Performance graphs: !firefox-perf-now.png! h3. After fix (one line removal): !firefox-after-line-removal.gif! Performance graphs: !firefox-perf-fixed.png! h3. The changes: <pre><code class="diff"> 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. </code></pre> 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. h3. 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