mgr/dashboard: Add data resileincy card

-  shows data resiliency status
- shows active-clean PGs donut chart
- shows reasons for missing active+clean PGs

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

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

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 70b5853016a1da9663e6db099e436c1393c2bc9f..1673b3f7fb3495465fccc3569acb8d676e995a88 100644 (file)
--- 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
@@ -158,6 +158,32 @@
       </cds-tooltip-definition>
     </div>
   }
+  <!-- RESILIENCY TAB -->
+   @if(vm?.overallSystemSev) {
+    <div class="overview-health-card-tab"
+         [class.overview-health-card-tab-selected]="activeSection === 'resiliency'">
+      <div class="cds-mb-1"><cd-icon
+        [type]="vm?.overallSystemSev"></cd-icon></div>
+      <cds-tooltip-definition
+        [highContrast]="true"
+        [openOnHover]="true"
+        [dropShadow]="true"
+        class="cds-ml-2"
+        [caret]="true"
+        (click)="toggleSection('resiliency')"
+        description=""
+        i18n-description>
+        <span
+          class="cds-mr-1"
+          [class.cds--type-heading-compact-01]="activeSection === 'resiliency'"
+          i18n>
+          Data resiliency
+        </span>
+      </cds-tooltip-definition>
+    </div>
+  } @else {
+  <cds-skeleton-text [lines]="1"></cds-skeleton-text>
+  }
   </div>
 
   <!-- TAB CONTENT -->
@@ -229,7 +255,20 @@
         }
       </div>
     </ng-container>
-
+    <!-- RESILIENCY TAB CONTENT -->
+    <ng-container *ngSwitchCase="'resiliency'">
+      <div class="overview-health-card-tab-content">
+        <span class="overview-health-card-icon-and-text">
+          <cd-icon type="warningAltFilled"></cd-icon>
+          <span class="cds--type-body-compact-01">
+            Status unavailable for some data
+          </span>
+        </span>
+        <p
+          class="overview-health-card-secondary-text cds--type-label-01"
+          i18n>Ceph cannot reliably determine the current state of some data. Availability may be affected.</p>
+      </div>
+    </ng-container>
     <ng-container *ngSwitchDefault></ng-container>
   </div>
 </cd-productive-card>

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 2e5ad7e0504ce9d9775d0b2d49e5bd4da4963e81..e044b5efd85077295fbabde623fff0e565d0aab2 100644 (file)
--- 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
@@ -54,6 +54,34 @@ type HwRowVM = {
   error: number;
 };
 
+const DATA_RESILIENCY = {
+  ok: {
+    icon: 'success',
+    title: $localize`Data is fully replicated and available.`,
+    description: $localize`All replicas are in place and I/O is operating normally. No action is required.`
+  },
+  progress: {
+    icon: 'sync',
+    title: $localize`Data integrity checks in progress`,
+    description: $localize`Ceph is running routine consistency checks on stored data and metadata to ensure data integrity. Data remains safe and accessible.`
+  },
+  warn: {
+    icon: 'warning',
+    title: $localize`Restoring data redundancy`,
+    description: $localize`Some data replicas are missing or not yet in their final location. Ceph is actively rebalancing data to return to a healthy state.`
+  },
+  warnDataLoss: {
+    icon: 'warning',
+    title: $localize`Status unavailable for some data`,
+    description: $localize`Ceph cannot reliably determine the current state of some data. Availability may be affected.`
+  },
+  error: {
+    icon: 'error',
+    title: $localize`Data unavailable or inconsistent, manual intervention required`,
+    description: $localize`Some data is currently unavailable or inconsistent. Ceph could not automatically restore these resources, and manual intervention is required to restore data availability and consistency.`
+  }
+};
+
 @Component({
   selector: 'cd-overview-health-card',
   imports: [
@@ -88,6 +116,7 @@ export class OverviewHealthCardComponent {
   @Output() activeSectionChange = new EventEmitter<HealthCardTabSection | null>();
 
   activeSection: HealthCardTabSection | null = null;
+  data = DATA_RESILIENCY;
 
   healthItems: HealthItemConfig[] = [
     { key: 'mon', label: $localize`Monitor` },