From: Volker Theile <vtheile@suse.com>
Date: Mon, 5 Nov 2018 15:39:13 +0000 (+0100)
Subject: mgr/dashboard: Improve CRUSH map viewer
X-Git-Tag: v14.1.0~957^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F24934%2Fhead;p=ceph.git

mgr/dashboard: Improve CRUSH map viewer

Display the OSD state using a label.

Signed-off-by: Volker Theile <vtheile@suse.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 d55b2270c294..3b54a12242a9 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
@@ -9,7 +9,14 @@
       <div class="panel-body">
         <div class="col-sm-6 col-lg-6">
           <tree [tree]="tree"
-                (nodeSelected)="onNodeSelected($event)"></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>
+            </ng-template>
+          </tree>
         </div>
         <div class="col-sm-6 col-lg-6 metadata">
           <cd-table-key-value *ngIf="metadata"
@@ -19,4 +26,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.spec.ts
index 74dac5b774d0..04b0c0d4f75a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.spec.ts
@@ -79,9 +79,9 @@ describe('CrushmapComponent', () => {
       });
 
       it('should have 3 osds in orderd', () => {
-        expect(component.tree.children[0].children[0].value).toBe('osd.0 (osd)--up');
-        expect(component.tree.children[0].children[1].value).toBe('osd.1 (osd)--down');
-        expect(component.tree.children[0].children[2].value).toBe('osd.2 (osd)--up');
+        expect(component.tree.children[0].children[0].value).toBe('osd.0 (osd)');
+        expect(component.tree.children[0].children[1].value).toBe('osd.1 (osd)');
+        expect(component.tree.children[0].children[2].value).toBe('osd.2 (osd)');
       });
     });
   });
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 9b6290f42429..66b2932b2619 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
@@ -49,10 +49,8 @@ export class CrushmapComponent implements OnInit {
     this.metadataKeyMap[id] = node;
     const settings = { static: true };
 
-    let value: string = node.name + ' (' + node.type + ')';
-    if (node.status) {
-      value += '--' + node.status;
-    }
+    const value: string = node.name + ' (' + node.type + ')';
+    const status: string = node.status;
 
     const children: any[] = [];
     if (node.children) {
@@ -60,10 +58,10 @@ export class CrushmapComponent implements OnInit {
         children.push(treeNodeMap[childId]);
       });
 
-      return { value, settings, id, children };
+      return { value, status, settings, id, children };
     }
 
-    return { value, settings, id };
+    return { value, status, settings, id };
   }
 
   onNodeSelected(e: NodeEvent) {