From: Afreen Misbah <afreen@ibm.com>
Date: Mon, 23 Feb 2026 19:33:15 +0000 (+0530)
Subject: mgr/dashboard: Css fixes for health card and alerts card
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=0abb6837ace384c2004c73a56f2f105aa953a632;p=ceph.git

mgr/dashboard: Css fixes for health card and alerts card

Signed-off-by: Afreen Misbah <afreen@ibm.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html
index 58d0451d12b..f500e96e45a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html
@@ -1,4 +1,4 @@
-<cd-productive-card>
+<cd-productive-card class="overview-alerts-card">
 @if (vm$ | async; as vm) {
   <ng-template #header>
     <h2 class="cds--type-heading-compact-02"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss
index 2eee4ca88cd..62b4b62aaee 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss
@@ -1,4 +1,5 @@
 .overview-alerts-card {
+  // height: 100%;
   &-badges {
     display: flex;
     align-items: center;
@@ -19,4 +20,9 @@
     margin-top: var(--cds-spacing-02);
     color: var(--cds-text-secondary);
   }
+
+  .cds--tile {
+    min-block-size: 0;
+    height: 100%;
+  }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.ts
index 07cf4614e57..78c6e2d1939 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.ts
@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  ViewEncapsulation,
+  inject
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { combineLatest } from 'rxjs';
 
@@ -30,7 +36,8 @@ const AlertIcon = {
   ],
   templateUrl: './overview-alerts-card.component.html',
   styleUrl: './overview-alerts-card.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
 })
 export class OverviewAlertsCardComponent implements OnInit {
   private readonly prometheusAlertService = inject(PrometheusAlertService);
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.html
index df65726d9df..876e1f436f8 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.html
@@ -104,7 +104,7 @@
   <!-- SYSTEM TAB -->
   @if(vm?.overallSystemSev) {
     <div class="overview-health-card-tab"
-         [ngClass]="{'overview-health-card-tab-selected': activeSection === 'system'}">
+         [class.overview-health-card-tab-selected]="activeSection === 'system'">
       <div class="cds-mb-1"><cd-icon
         [type]="vm?.overallSystemSev"></cd-icon></div>
       <cds-tooltip-definition
@@ -118,7 +118,7 @@
         i18n-description>
         <span
           class="cds-mr-1"
-          [ngClass]="{'cds--type-heading-compact-01': activeSection === 'system'}"
+          [class.cds--type-heading-compact-01]="activeSection === 'system'"
           i18n>
           Systems
         </span>
@@ -137,35 +137,20 @@
            i18n>Some cluster components are degraded and may require attention.</p>
         <div cdsStack="horizontal"
              [gap]="8">
-          <div class="overview-health-card-tab-content-item cds-pr-8">
-            <span>
-              <cd-icon [type]="vm?.mon?.severity"></cd-icon>
-              <span class="cds--type-body-compact-01 cds-ml-3">Monitor</span>
+          @for (item of healthItems; track item.key; let isLast = $last) {
+          <div class="cds-pr-8"
+               [class.overview-health-card-tab-content-item]="!isLast">
+            <span class="overview-health-card-icon-and-text">
+              <cd-icon [type]="vm?.[item.key]?.severity"></cd-icon>
+              <span class="cds--type-body-compact-01">
+                {{ item.label }}
+              </span>
             </span>
-            <p class="cds--type-label-01 cds-mt-3 cds-mb-0 overview-health-card-secondary-text">Quorum: {{vm?.mon?.value}}</p>
-          </div>
-          <div class="overview-health-card-tab-content-item cds-pr-8">
-            <span>
-              <cd-icon [type]="vm?.mgr?.severity"></cd-icon>
-              <span class="cds--type-body-compact-01 cds-ml-3">Manager</span>
-            </span>
-            <p class="cds--type-label-01 cds-mt-3 cds-mb-0 overview-health-card-secondary-text">{{vm?.mgr?.value}}</p>
-          </div>
-          <div class="overview-health-card-tab-content-item cds-pr-8">
-            <span>
-              <cd-icon [type]="vm?.osd?.severity"></cd-icon>
-              <span class="cds--type-body-compact-01 cds-ml-3"
-                    i18n>OSD</span>
-            </span>
-            <p class="cds--type-label-01 cds-mt-3 cds-mb-0 overview-health-card-secondary-text">{{vm?.osd?.value}}</p>
-          </div>
-          <div>
-            <span>
-              <cd-icon [type]="vm?.hosts?.severity"></cd-icon>
-              <span class="cds--type-body-compact-01 cds-ml-3">Nodes</span>
-            </span>
-            <p class="cds--type-label-01 cds-mt-3 cds-mb-0 overview-health-card-secondary-text">{{vm?.hosts?.value}}</p>
+            <p class="cds--type-label-01 cds-mt-3 cds-mb-0 overview-health-card-secondary-text">
+              {{ vm?.[item.key]?.value }}
+            </p>
           </div>
+          }
         </div>
       </div>
     </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.scss
index 2357bba13b1..2d6309aeaeb 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.scss
@@ -42,6 +42,12 @@
     max-block-size: fit-content;
   }
 
+  &-icon-and-text {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cds-spacing-03);
+  }
+
   // Overrides
   .clipboard-btn {
     padding: var(--cds-spacing-02);
@@ -63,4 +69,8 @@
     color: var(--cds-link-primary);
     border-block-end: 1px dotted var(--cds-link-primary);
   }
+
+  &-icon-and-text cd-icon svg {
+    display: block;
+  }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.ts
index 6f4c74fa652..49372345ae1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.ts
@@ -35,6 +35,13 @@ type OverviewHealthData = {
 
 type TabSection = 'system' | 'hardware' | 'resiliency';
 
+interface HealthItemConfig {
+  key: 'mon' | 'mgr' | 'osd' | 'hosts';
+  label: string;
+  prefix?: string;
+  i18n?: boolean;
+}
+
 @Component({
   selector: 'cd-overview-health-card',
   imports: [
@@ -64,6 +71,12 @@ export class OverviewHealthCardComponent {
   @Output() viewIncidents = new EventEmitter<void>();
 
   activeSection: TabSection | null = null;
+  healthItems: HealthItemConfig[] = [
+    { key: 'mon', label: $localize`Monitor` },
+    { key: 'mgr', label: $localize`Manager` },
+    { key: 'osd', label: $localize`OSD` },
+    { key: 'hosts', label: $localize`Nodes` }
+  ];
 
   toggleSection(section: TabSection) {
     this.activeSection = this.activeSection === section ? null : section;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html
index aa451678508..1e7f9864170 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html
@@ -2,6 +2,7 @@
 @let health = (healthCardVm$ | async);
 <div cdsGrid
      [fullWidth]="true"
+     [narrow]="true"
      class="cds-mt-5 cds-mb-5">
   <div cdsRow>
     <div cdsCol
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts
index ba2612c6489..1e7cb7da1d1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts
@@ -100,11 +100,14 @@ export function buildHealthCardVM(d: HealthSnapshotMap): HealthCardVM {
 
     health: healthDisplay,
 
-    mon: { value: `${monQuorum}/${monTotal}`, severity: SeverityIconMap[monSev] },
-    mgr: { value: `${mgrActive} active, ${mgrStandby} standby`, severity: SeverityIconMap[mgrSev] },
-    osd: { value: `${osdUp}/${osdTotal} in/up`, severity: SeverityIconMap[osdSev] },
+    mon: { value: $localize`Quorum: ${monQuorum}/${monTotal}`, severity: SeverityIconMap[monSev] },
+    mgr: {
+      value: $localize`${mgrActive} active, ${mgrStandby} standby`,
+      severity: SeverityIconMap[mgrSev]
+    },
+    osd: { value: $localize`${osdUp}/${osdTotal} in/up`, severity: SeverityIconMap[osdSev] },
     hosts: {
-      value: `${hostsAvailable} / ${hostsTotal} available`,
+      value: $localize`${hostsAvailable} / ${hostsTotal} available`,
       severity: SeverityIconMap[hostsSev]
     }
   };