mgr/dashboard: New Landing Page: Milestone 2

Fix: cluster status popover on top (it was under another card).

CSS adjustments.

Fixes: https://tracker.ceph.com/issues/27050

Signed-off-by: Alfonso Martínez <almartin@redhat.com>

src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html

@@ -21,14 +21,14 @@
           </li>
         </ul>
       </ng-template>
-      <div class="health-popover-wrapper">
-        <div [ngStyle]="contentData.health.status | healthColor"
-             [popover]="contentData.health.checks.length > 0 ? healthChecks : ''"
-             triggers=""
-             #healthChecksTarget="bs-popover"
-             placement="bottom">
-          {{ contentData.health.status }}
-        </div>
+      <div [ngStyle]="contentData.health.status | healthColor"
+           [popover]="contentData.health.checks.length > 0 ? healthChecks : ''"
+           triggers=""
+           #healthChecksTarget="bs-popover"
+           placement="bottom"
+           container="body"
+           containerClass="info-card-popover-cluster-status">
+        {{ contentData.health.status }}
       </div>
     </cd-info-card>
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss

@@ -1,7 +1,5 @@
 @import '../../../../defaults';
 
-$popover-text-font-size: 10px;
-
 .cd-container-flex {
   margin: 0;
   padding: 0;
@@ -50,34 +48,6 @@ cd-info-card {
   padding: 0 0.5vw 0 0.5vw;
 }
 
-::ng-deep .health-popover-wrapper {
-  position: relative;
-
-  .popover {
-    position: absolute;
-    width: 112%;
-    max-height: 16vh;
-    min-width: unset !important;
-    max-width: unset !important;
-
-    .popover-body {
-      max-width: 100%;
-      max-height: 16vh;
-      font-size: $popover-text-font-size;
-    }
-  }
-
-  @media (max-width: 1399px) {
-    .popover {
-      width: 118%;
-
-      .popover-body {
-        max-width: 100%;
-      }
-    }
-  }
-}
-
 ::ng-deep .pg-status-popover-wrapper {
   position: relative;
 
@@ -90,8 +60,8 @@ cd-info-card {
 
     .popover-body {
       max-width: 100%;
-      max-height: 20vh;
-      font-size: $popover-text-font-size;
+      max-height: 19vh;
+      font-size: 12px;
     }
   }
 }

src/pybind/mgr/dashboard/frontend/src/styles.scss

@@ -300,3 +300,31 @@ uib-accordion .panel-title,
 .nav-tabs {
   margin-bottom: 15px;
 }
+
+.info-card-popover-cluster-status {
+  max-width: 23vw;
+  max-height: 20vh;
+
+  .popover-body {
+    max-width: 100%;
+    max-height: 19vh;
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 1199px) {
+  .info-card-popover-cluster-status {
+    max-width: 31vw;
+  }
+}
+
+@media (max-width: 991px) {
+  .info-card-popover-cluster-status {
+    max-width: 46vw;
+  }
+}
+@media (max-width: 767px) {
+  .info-card-popover-cluster-status {
+    max-width: 83vw;
+  }
+}