From: Volker Theile <vtheile@suse.com>
Date: Thu, 12 Sep 2019 11:37:03 +0000 (+0200)
Subject: mgr/dashboard: Improve workaround to redraw datatables
X-Git-Tag: v14.2.10~95^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F34413%2Fhead;p=ceph.git

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 fa29c91094a3..4ce9237760c6 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
@@ -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();
     }
   }