mgr/dashboard: Fix CRUSH map viewer VirtualScroll

As stated in https://angular2-tree.readme.io/docs/large-trees:
To use this (virtual scroll) option, one must supply the height of the
container, and the height of each node in the tree.

Current CRUSH map viewer can only show 13 out of 19 OSDs in our cluster,
and I can only get the rest of OSDs shown by fold some subtree, which is
very confusing. This PR follows the doc of "@circlon/angular-tree-component",
and set the suitable height.

Fixes: https://tracker.ceph.com/issues/45873
Signed-off-by: Avan Thakkar <athakkar@redhat.com>
(cherry picked from commit be141cdcdbf4f052198bb2701f61f4c5ad75be75)

 Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.scss
   -Adopted the changes of the master branch.

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html
index d56a8e37eb9860c63a337f2a2082029af88de3d1..e01d3480ee079f4f1e500563dd4eb65f6459fc59 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html
@@ -5,7 +5,7 @@
            i18n>CRUSH map viewer</div>
       <div class="card-body">
         <div class="row">
-          <div class="col-sm-6 col-lg-6">
+          <div class="col-sm-6 col-lg-6 tree-container">
             <i *ngIf="loadingIndicator"
                [ngClass]="[icons.large, icons.spinner, icons.spin]"></i>
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.scss
index 629646246dbebba602a08ce664ed353598605932..e581024fd5cde8e8c2946d8d4e6321637d770f4f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.scss
@@ -1,7 +1,3 @@
-::ng-deep tree-root {
-  tree-viewport {
-    div:first-child {
-      height: unset !important;
-    }
-  }
+.tree-container {
+  height: calc(100vh - 200px);
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.ts
index 1f0bab4cd433ec18c40e01432e831e0958ac9189..bcf72ae4bb4103d1e39c06878084ddbd82baad15 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.ts
@@ -24,6 +24,7 @@ export class CrushmapComponent implements OnInit {
   nodes: any[] = [];
   treeOptions: ITreeOptions = {
     useVirtualScroll: true,
+    nodeHeight: 22,
     actionMapping: {
       mouse: {
         click: this.onNodeSelected.bind(this)