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 d55b2270c2948a40819ee895575d7934a4009ec3..3b54a12242a99765fcf194abf725ecc6a2e86078 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
@@ -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 74dac5b774d07ff1dab8aa3012b8350feea1d924..04b0c0d4f75ad3ec0ececfe399a083b7ab9e2859 100644 (file)
--- 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 9b6290f424293ab2e851c7f18fe438f38170426d..66b2932b2619e4eacfe0bb8e32120fda7335978a 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
@@ -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) {