mgr/dashboard: CRUSH map viewer RFE

Fixes: http://tracker.ceph.com/issues/37794
Signed-off-by: familyuu <guodan1@lenovo.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 973ddbd598c0da05e185f0f0aa8f48c7b08e43e2..a9394aeed978db31ff62adfd0b65e855df24e049 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
@@ -11,17 +11,16 @@
           <tree [tree]="tree"
                 (nodeSelected)="onNodeSelected($event)">
             <ng-template let-node>
-              <span class="node-name" [innerHTML]="node.value"></span>
-              <span>&nbsp;</span>
               <span class="label"
                     [ngClass]="{'label-success': ['in', 'up'].includes(node.status), 'label-danger': ['down', 'out'].includes(node.status)}">{{ node.status }}</span>
+              <span>&nbsp;</span>
+              <span class="node-name" [innerHTML]="node.value"></span>
             </ng-template>
           </tree>
         </div>
-        <div class="col-sm-6 col-lg-6 metadata">
-          <cd-table-key-value *ngIf="metadata"
-                              [data]="metadata">
-          </cd-table-key-value>
+        <div class="col-sm-6 col-lg-6 metadata" *ngIf="metadata">
+          <legend>{{ metadataTitle }}</legend>
+          <cd-table-key-value [data]="metadata"></cd-table-key-value>
         </div>
       </div>
     </div>

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 7bd19fca1671d887cc8d127038bcf097e44986df..65c94d5050ae38c6b4899268eaabd5516462bca0 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,3 +1,21 @@
 ::ng-deep tree-internal .tree li {
   cursor: pointer;
 }
+
+::ng-deep tree-internal .tree .node-value {
+  color: #2b99a8;
+  border-radius: 5px;
+}
+
+::ng-deep tree-internal .tree .node-selected {
+  background-color: #d9edf7;
+  color: #212121;
+}
+
+::ng-deep tree-internal .tree .node-value:hover {
+  color: #212121;
+}
+
+::ng-deep tree-internal .tree .node-value:after {
+  height: 0;
+}

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 945b1ed5fb4320a362d44c8da206c008e4789139..d7a6f5e4fbd5f8d1b5c1975a4bdc57440cbf173f 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
@@ -12,6 +12,7 @@ import { HealthService } from '../../../shared/api/health.service';
 export class CrushmapComponent implements OnInit {
   tree: TreeModel;
   metadata: any;
+  metadataTitle: string;
   metadataKeyMap: { [key: number]: number } = {};
 
   constructor(private healthService: HealthService) {}
@@ -62,6 +63,8 @@ export class CrushmapComponent implements OnInit {
   }
 
   onNodeSelected(e: NodeEvent) {
-    this.metadata = this.metadataKeyMap[e.node.id];
+    const { name, type, status, ...remain } = this.metadataKeyMap[e.node.id];
+    this.metadata = remain;
+    this.metadataTitle = name + ' (' + type + ')';
   }
 }