mgr/dashboard: fix backport #33764

Backport https://github.com/ceph/ceph/pull/33764/ resulted in the mixing
of Bootstrap 4 classes into Nautilus dashboard, which is Bootstrap 3
based.

This fix reverts most of those unintended changes (see cbb4c62b9b918823594f506488fc6c0ab4ee2300
for understanding the original extent of changes).

Fixes: https://tracker.ceph.com/issues/44198
Signed-off-by: Ernesto Puerta <epuertat@redhat.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 a3961e433a9132f43b01459a4220c6b35cd4e514..4de89afb914069913bca5c3acefc9f90f140b4a4 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,31 +1,27 @@
 <div class="row">
   <div class="col-sm-12 col-lg-12">
-    <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 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', 'destroyed'].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>
       </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 297aa4410ccef7732c021e5200c0140dda7f8c64..2e6e458a202f5de025238d36b6f52ab0035eff42 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 card = debugElement.nativeElement.querySelector('.card-header');
-    expect(card.textContent).toBe('CRUSH map viewer');
+    const span = debugElement.nativeElement.querySelector('span');
+    expect(span.textContent).toBe('CRUSH map viewer');
   });
 
   describe('test tree', () => {