mgr/dashboard: improve the logic on the alert viewer

only fetch the alerts when you toggle the alert viewer. don't fetch it
every 5 second cause its going to cause a heavy toll on the api.

Fixes: https://tracker.ceph.com/issues/58867
Signed-off-by: Nizamudeen A <nia@redhat.com>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html

@@ -27,7 +27,7 @@
               i18n>Cluster</span>
       </div>
       <section class="border-top mt-5"
-               *ngIf="isAlertmanagerConfigured && (crticialActiveAlerts || warningActiveAlerts)">
+               *ngIf="isAlertmanagerConfigured && (prometheusAlertService.activeCriticalAlerts || prometheusAlertService.activeWarningAlerts)">
         <div class="d-flex flex-wrap ms-4 me-4">
           <span class="pt-2"
                 i18n>Alerts</span>
@@ -38,9 +38,9 @@
                   (click)="toggleAlertsWindow('danger')"
                   id="dangerAlerts"
                   i18n-title
-                  *ngIf="crticialActiveAlerts">
+                  *ngIf="prometheusAlertService?.activeCriticalAlerts > 0">
             <i [ngClass]="[icons.danger]"></i>
-            <span>{{ crticialActiveAlerts }}</span>
+            <span>{{ prometheusAlertService.activeCriticalAlerts }}</span>
           </button>
 
           <button class="btn btn-outline-warning rounded-pill ms-2"
@@ -49,9 +49,9 @@
                   (click)="toggleAlertsWindow('warning')"
                   id="warningAlerts"
                   i18n-title
-                  *ngIf="warningActiveAlerts">
+                  *ngIf="prometheusAlertService?.activeWarningAlerts > 0">
             <i [ngClass]="[icons.infoCircle]"></i>
-            <span>{{ warningActiveAlerts }}</span>
+            <span>{{ prometheusAlertService.activeWarningAlerts }}</span>
           </button>
 
           <div class="pt-0 position-right">

src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts

@@ -15,6 +15,7 @@ import { PrometheusService } from '~/app/shared/api/prometheus.service';
 import { CssHelper } from '~/app/shared/classes/css-helper';
 import { AlertmanagerAlert } from '~/app/shared/models/prometheus-alerts';
 import { FeatureTogglesService } from '~/app/shared/services/feature-toggles.service';
+import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service';
 import { SummaryService } from '~/app/shared/services/summary.service';
 import { SharedModule } from '~/app/shared/shared.module';
 import { configureTestBed } from '~/testing/unit-test-helper';
@@ -161,6 +162,13 @@ describe('Dashbord Component', () => {
     schemas: [NO_ERRORS_SCHEMA],
     providers: [
       { provide: SummaryService, useClass: SummaryServiceMock },
+      {
+        provide: PrometheusAlertService,
+        useValue: {
+          activeCriticalAlerts: 2,
+          activeWarningAlerts: 1
+        }
+      },
       CssHelper,
       PgCategoryService
     ]
@@ -244,12 +252,12 @@ describe('Dashbord Component', () => {
   it('should show the actual alert count on each alerts pill', () => {
     fixture.detectChanges();
 
-    const successNotification = fixture.debugElement.query(By.css('button[id=warningAlerts] span'));
+    const warningAlerts = fixture.debugElement.query(By.css('button[id=warningAlerts] span'));
 
-    const dangerNotification = fixture.debugElement.query(By.css('button[id=dangerAlerts] span'));
+    const dangerAlerts = fixture.debugElement.query(By.css('button[id=dangerAlerts] span'));
 
-    expect(successNotification.nativeElement.textContent).toBe('1');
-    expect(dangerNotification.nativeElement.textContent).toBe('2');
+    expect(warningAlerts.nativeElement.textContent).toBe('1');
+    expect(dangerAlerts.nativeElement.textContent).toBe('2');
   });
 
   it('should show the critical alerts window and its content', () => {
@@ -275,15 +283,16 @@ describe('Dashbord Component', () => {
   });
 
   it('should only show the pills when the alerts are not empty', () => {
-    getAlertsSpy.and.returnValue(of({}));
+    spyOn(TestBed.inject(PrometheusAlertService), 'activeCriticalAlerts').and.returnValue(0);
+    spyOn(TestBed.inject(PrometheusAlertService), 'activeWarningAlerts').and.returnValue(0);
     fixture.detectChanges();
 
-    const successNotification = fixture.debugElement.query(By.css('button[id=warningAlerts]'));
+    const warningAlerts = fixture.debugElement.query(By.css('button[id=warningAlerts]'));
 
-    const dangerNotification = fixture.debugElement.query(By.css('button[id=dangerAlerts]'));
+    const dangerAlerts = fixture.debugElement.query(By.css('button[id=dangerAlerts]'));
 
-    expect(successNotification).toBe(null);
-    expect(dangerNotification).toBe(null);
+    expect(warningAlerts).toBe(null);
+    expect(dangerAlerts).toBe(null);
   });
 
   describe('features disabled', () => {

src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts

@@ -24,6 +24,7 @@ import {
 import { RefreshIntervalService } from '~/app/shared/services/refresh-interval.service';
 import { SummaryService } from '~/app/shared/services/summary.service';
 import { PrometheusListHelper } from '~/app/shared/helpers/prometheus-list-helper';
+import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service';
 
 @Component({
   selector: 'cd-dashboard',
@@ -53,8 +54,6 @@ export class DashboardComponent extends PrometheusListHelper implements OnInit,
   borderClass: string;
   alertType: string;
   alerts: AlertmanagerAlert[];
-  crticialActiveAlerts: number;
-  warningActiveAlerts: number;
   healthData: any;
   categoryPgAmount: Record<string, number> = {};
   totalPgs = 0;
@@ -86,7 +85,8 @@ export class DashboardComponent extends PrometheusListHelper implements OnInit,
     private featureToggles: FeatureTogglesService,
     private healthService: HealthService,
     public prometheusService: PrometheusService,
-    private refreshIntervalService: RefreshIntervalService
+    private refreshIntervalService: RefreshIntervalService,
+    public prometheusAlertService: PrometheusAlertService
   ) {
     super(prometheusService);
     this.permissions = this.authStorageService.getPermissions();
@@ -97,7 +97,6 @@ export class DashboardComponent extends PrometheusListHelper implements OnInit,
     super.ngOnInit();
     this.interval = this.refreshIntervalService.intervalData$.subscribe(() => {
       this.getHealth();
-      this.triggerPrometheusAlerts();
       this.getCapacityCardData();
     });
     this.getPrometheusData(this.lastHourDateObject);
@@ -115,6 +114,7 @@ export class DashboardComponent extends PrometheusListHelper implements OnInit,
   }
 
   toggleAlertsWindow(type: string, isToggleButton: boolean = false) {
+    this.triggerPrometheusAlerts();
     if (isToggleButton) {
       this.showAlerts = !this.showAlerts;
       this.flexHeight = !this.flexHeight;
@@ -163,14 +163,6 @@ export class DashboardComponent extends PrometheusListHelper implements OnInit,
     this.prometheusService.ifAlertmanagerConfigured(() => {
       this.prometheusService.getAlerts().subscribe((alerts) => {
         this.alerts = alerts;
-        this.crticialActiveAlerts = alerts.filter(
-          (alert: AlertmanagerAlert) =>
-            alert.status.state === 'active' && alert.labels.severity === 'critical'
-        ).length;
-        this.warningActiveAlerts = alerts.filter(
-          (alert: AlertmanagerAlert) =>
-            alert.status.state === 'active' && alert.labels.severity === 'warning'
-        ).length;
       });
     });
   }