mgr/dashboard: Add skeleton states for alerts card

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

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 6b2e703292c6f4e7c103a2676b055826492594be..1c8cd405111f5ce76ab782a5b2ef03e0b1745f91 100644 (file)
--- 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
@@ -16,6 +16,7 @@
     </button>
   </ng-template>
   <!-- TOTAL COUNT -->
+  @if (vm?.total) {
   <div>
     <span class="cds--type-heading-07">{{ vm.total }}</span>
     <cd-icon [type]="vm.icon"></cd-icon>
@@ -26,7 +27,6 @@
     i18n>
     {{ vm.statusText }}
   </small>
-
   <!-- SUB TOTAL COUNTS -->
   <div class="cds-mt-6">
   @if (vm.badges.length) {
@@ -53,5 +53,11 @@
     </div>
   }
   </div>
+  }@else {
+  <cds-skeleton-placeholder></cds-skeleton-placeholder>
+  <div class="cds-mt-3">
+    <cds-skeleton-text [lines]="1"></cds-skeleton-text>
+  </div>
+  }
 }
 </cd-productive-card>

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 bfd11fb5addb1eaad7b84a1faef42c1cebac680c..4200b2f2b2e4bd71639e4e61294265e9d4a2fcca 100644 (file)
--- 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
@@ -15,6 +15,7 @@ import {
   GridModule,
   LayoutModule,
   LinkModule,
+  SkeletonModule,
   TilesModule
 } from 'carbon-components-angular';
 import { RouterModule } from '@angular/router';
@@ -42,7 +43,8 @@ const AlertIcon = {
     ButtonModule,
     LinkModule,
     LayoutModule,
-    PipesModule
+    PipesModule,
+    SkeletonModule
   ],
   templateUrl: './overview-alerts-card.component.html',
   styleUrl: './overview-alerts-card.component.scss',
@@ -58,11 +60,11 @@ export class OverviewAlertsCardComponent implements OnInit {
   }
 
   readonly vm$ = combineLatest([
-    this.prometheusAlertService.totalAlerts$.pipe(startWith(0)),
     this.prometheusAlertService.criticalAlerts$.pipe(startWith(0)),
     this.prometheusAlertService.warningAlerts$.pipe(startWith(0))
   ]).pipe(
-    map(([total, critical, warning]) => {
+    map(([critical, warning]) => {
+      const total = (critical ?? 0) + (warning ?? 0);
       const hasAlerts = total > 0;
       const hasCritical = critical > 0;
       const hasWarning = warning > 0;