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>
(cherry picked from commit 08a5ab12ce17de2b4e54d6990e930fa4973d6ee2)

# Conflicts:
#	src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts

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 fa29c91094a36831b741d87c901a4c7813e61d9c..4ce9237760c665c8c64b623f19687ba3ba3792a7 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
@@ -323,7 +323,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();
+      // 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();
     }
   }