From 411c423410db9f95f530f3af9618f730a1fe1456 Mon Sep 17 00:00:00 2001
From: guodan1 <guodan1@lenovo.com>
Date: Fri, 25 Jan 2019 19:12:22 +0800
Subject: [PATCH] mgr/dashboard: CRUSH map viewer RFE

Fixes: http://tracker.ceph.com/issues/37794

Signed-off-by: familyuu <guodan1@lenovo.com>
---
 .../cluster/crushmap/crushmap.component.html   | 11 +++++------
 .../cluster/crushmap/crushmap.component.scss   | 18 ++++++++++++++++++
 .../cluster/crushmap/crushmap.component.ts     |  5 ++++-
 3 files changed, 27 insertions(+), 7 deletions(-)

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 973ddbd598c0d..a9394aeed978d 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
@@ -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 7bd19fca1671d..65c94d5050ae3 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,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 945b1ed5fb432..d7a6f5e4fbd5f 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
@@ -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 + ')';
   }
 }
-- 
2.39.5