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: 胡玮文 <huww98@outlook.com>

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 478ac776408fdf4d6a2b43afb041840c0f26e881..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 cd-crushmap 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 cd069c7ac6c00882333e6f159a391cbe9881fd18..58b78f2014980d74b6f61e12400f53e81dc9022d 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)