mgr/dashboard: Add filtering of alerts via route

- when user click on alerts of particular severity only those alerts should be shown

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

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

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.ts
index 3dd5ac7ece164c163bc46eb671e0197e32d3a6fa..2930710b55bb1a56e484b58ef369660e6c735fe2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.ts
@@ -1,4 +1,5 @@
 import { Component, Inject, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 import { PrometheusService } from '~/app/shared/api/prometheus.service';
 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
@@ -15,6 +16,12 @@ import { URLBuilderService } from '~/app/shared/services/url-builder.service';
 
 const BASE_URL = 'silences'; // as only silence actions can be used
 
+const SeverityMap = {
+  critical: $localize`Critical`,
+  warning: $localize`Warning`,
+  all: $localize`All`
+};
+
 @Component({
   selector: 'cd-active-alert-list',
   providers: [{ provide: URLBuilderService, useValue: new URLBuilderService(BASE_URL) }],
@@ -46,6 +53,18 @@ export class ActiveAlertListComponent extends PrometheusListHelper implements On
         if (value === 'All') return true;
         return false;
       }
+    },
+    {
+      name: $localize`Severity`,
+      prop: 'labels.severity',
+      filterOptions: [SeverityMap['all'], SeverityMap['warning'], SeverityMap['critical']],
+      filterInitValue: SeverityMap['all'],
+      filterPredicate: (row, value) => {
+        if (value === SeverityMap['critical']) return row.labels?.severity === 'critical';
+        else if (value === SeverityMap['warning']) return row.labels?.severity === 'warning';
+        if (value === SeverityMap['all']) return true;
+        return false;
+      }
     }
   ];
 
@@ -54,6 +73,7 @@ export class ActiveAlertListComponent extends PrometheusListHelper implements On
     private authStorageService: AuthStorageService,
     public prometheusAlertService: PrometheusAlertService,
     private urlBuilder: URLBuilderService,
+    private route: ActivatedRoute,
     @Inject(PrometheusService) prometheusService: PrometheusService
   ) {
     super(prometheusService);
@@ -139,6 +159,10 @@ export class ActiveAlertListComponent extends PrometheusListHelper implements On
       }
     ];
     this.prometheusAlertService.getGroupedAlerts(true);
+    this.route.queryParams.subscribe((params) => {
+      const severity = params['severity'];
+      this.filters[1].filterInitValue = SeverityMap[severity];
+    });
   }
 
   setExpandedInnerRow(row: any) {

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 1c8cd405111f5ce76ab782a5b2ef03e0b1745f91..7018f7fdaf82756e9537a5126ae6b0b12366d6a9 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
@@ -36,17 +36,18 @@
         class="overview-alerts-card-badge"
         [class.overview-alerts-card-badge-with-border--right]="!last && compact"
         [class.overview-alerts-card-badge-with-border--bottom]="!compact">
-        <cd-icon [type]="b.icon"></cd-icon>
         <a
           cdsLink
-          class="cds-ml-3"
           [routerLink]="['/monitoring/active-alerts']"
           [queryParams]="{ severity: b.key }">
+          <cd-icon [type]="b.icon"></cd-icon>
+          <span class="cds-ml-3">
           @if(compact) {
           {{ b.count }}
           } @else {
            {{b.key | upperFirst}} ({{ b.count }})
           }
+          </span>
         </a>
       </span>
       }