mgr/dashboard: 'destroyed' view in CRUSH map viewer

Fixes: https://tracker.ceph.com/issues/44198
Signed-off-by: Avan Thakkar <athakkar@redhat.com>
(cherry picked from commit cbb4c62b9b918823594f506488fc6c0ab4ee2300)

 Conflicts:
 src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html
 div class changed from panel to card

Adjusted the test to seek for card-header element

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 5642543073906efd17836b710cb44672e49b0b5f..a3961e433a9132f43b01459a4220c6b35cd4e514 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
@@ -1,27 +1,31 @@
 <div class="row">
   <div class="col-sm-12 col-lg-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h3 class="panel-title">
-          <span i18n>CRUSH map viewer</span>
-        </h3>
-      </div>
-      <div class="panel-body">
-        <div class="col-sm-6 col-lg-6">
-          <tree [tree]="tree"
-                [settings]="{rootIsVisible: false}"
-                (nodeSelected)="onNodeSelected($event)">
-            <ng-template let-node>
-              <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" *ngIf="metadata">
-          <legend>{{ metadataTitle }}</legend>
-          <cd-table-key-value [data]="metadata"></cd-table-key-value>
+    <div class="card">
+      <div class="card-header"
+           i18n>CRUSH map viewer</div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-sm-6 col-lg-6">
+            <tree [tree]="tree"
+                  [settings]="{rootIsVisible: false}"
+                  (nodeSelected)="onNodeSelected($event)">
+              <ng-template let-node>
+                <span class="badge"
+                      [ngClass]="{'badge-success': ['in', 'up'].includes(node.status), 'badge-danger': ['down', 'out', 'destroyed'].includes(node.status)}">
+                  {{ node.status }}
+                </span>
+                <span>&nbsp;</span>
+                <span class="node-name"
+                      [ngClass]="{'type-osd': node.type === 'osd'}"
+                      [innerHTML]="node.value"></span>
+              </ng-template>
+            </tree>
+          </div>
+          <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>
     </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 2e6e458a202f5de025238d36b6f52ab0035eff42..297aa4410ccef7732c021e5200c0140dda7f8c64 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
@@ -33,8 +33,8 @@ describe('CrushmapComponent', () => {
 
   it('should display right title', () => {
     fixture.detectChanges();
-    const span = debugElement.nativeElement.querySelector('span');
-    expect(span.textContent).toBe('CRUSH map viewer');
+    const card = debugElement.nativeElement.querySelector('.card-header');
+    expect(card.textContent).toBe('CRUSH map viewer');
   });
 
   describe('test tree', () => {