From: 胡玮文 <huww98@outlook.com>
Date: Sun, 6 Dec 2020 08:06:32 +0000 (+0800)
Subject: mgr/dashboard: Fix CRUSH map viewer VirtualScroll
X-Git-Tag: v15.2.9~91^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=b60177975d2bbdee15adbbf9849d0e1116aec38a;p=ceph.git

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 d56a8e37eb9..e01d3480ee0 100644
--- 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 629646246db..e581024fd5c 100644
--- 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 1f0bab4cd43..bcf72ae4bb4 100644
--- 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)