mgr/dashboard: Improve workaround to redraw datatables

The current approach to workaround this issue is to fire a 'resize' event to force the datatable to redraw the grid with correct column widths. This approach is like using a sledgehammer to crack a nut. The new approach simply uses Angular's change-detection mechanism. The datatable is marked as changed and Angular will do the rest for us. This should also finally solve the error that variables have been changed after Angular's change-detection has been done.

Fixes: https://tracker.ceph.com/issues/41787
Signed-off-by: Volker Theile <vtheile@suse.com>

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 1d025c6a6ef94904dcab6658d79252a3fe6257ab..347d663501555707e3e891a93988dd10d1b7f1e2 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
@@ -324,10 +324,14 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
     // https://github.com/swimlane/ngx-datatable/issues/193#issuecomment-329144543
     if (this.table && this.table.element.clientWidth !== this.currentWidth) {
       this.currentWidth = this.table.element.clientWidth;
+      // Recalculate the sizes of the grid.
       this.table.recalculate();
-      setTimeout(() => {
-        window.dispatchEvent(new Event('resize'));
-      });
+      // Mark the datatable as changed, Angular's change-detection will
+      // do the rest for us => the grid will be redrawn.
+      // Note, the ChangeDetectorRef variable is private, so we need to
+      // use this workaround to access it and make TypeScript happy.
+      const cdRef = _.get(this.table, 'cd');
+      cdRef.markForCheck();
     }
   }