mgr/dashboard: monitoring menu entry should indicate firing alerts

Fixes: https://tracker.ceph.com/issues/43081
Signed-off-by: Volker Theile <vtheile@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index d05e2669925f551134b09ff869e004834db45cd9..5a3d4ccb8911952d482a230bb2fc29e56352470c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
@@ -156,7 +156,11 @@
             class="tc_submenuitem tc_submenuitem_monitoring"
             *ngIf="permissions.prometheus.read">
           <a i18n
-             routerLink="/monitoring">Monitoring</a>
+             routerLink="/monitoring">
+            <ng-container i18n>Monitoring</ng-container>
+            <small *ngIf="prometheusAlertService.alerts.length > 0"
+                   class="badge badge-danger">{{ prometheusAlertService.alerts.length }}</small>
+          </a>
         </li>
       </ul>
     </li>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index b1d8e0e25d8de95111d547af1fce3db07e495c10..0000dd3337edefed0ed907a6e1f896bdf107ef7c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@@ -190,6 +190,10 @@ $sidebar-width: 200px;
           background: $color-primary;
         }
 
+        & > .badge {
+          margin-left: 5px;
+        }
+
         text-decoration: none;
       }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts
index fe4dec40e2b982f5cbfd45734f3811df6c61a93b..8fa84bf65ae7dc65a65bdf77ff2b3d131925ed07 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts
@@ -12,6 +12,7 @@ import {
   FeatureTogglesMap,
   FeatureTogglesService
 } from '../../../shared/services/feature-toggles.service';
+import { PrometheusAlertService } from '../../../shared/services/prometheus-alert.service';
 import { SummaryService } from '../../../shared/services/summary.service';
 import { NavigationModule } from '../navigation.module';
 import { NavigationComponent } from './navigation.component';
@@ -61,7 +62,8 @@ describe('NavigationComponent', () => {
           }
         },
         { provide: SummaryService, useValue: { subscribe: jest.fn() } },
-        { provide: FeatureTogglesService, useValue: { get: jest.fn() } }
+        { provide: FeatureTogglesService, useValue: { get: jest.fn() } },
+        { provide: PrometheusAlertService, useValue: { alerts: [] } }
       ]
     });
   });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
index b8310fb7351f70e39a95713abfc65a9abb775657..e21c9eeb0887c1c5304aca834eb8a8724366760f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
@@ -9,6 +9,7 @@ import {
   FeatureTogglesMap$,
   FeatureTogglesService
 } from '../../../shared/services/feature-toggles.service';
+import { PrometheusAlertService } from '../../../shared/services/prometheus-alert.service';
 import { SummaryService } from '../../../shared/services/summary.service';
 
 @Component({
@@ -36,7 +37,8 @@ export class NavigationComponent implements OnInit, OnDestroy {
   constructor(
     private authStorageService: AuthStorageService,
     private summaryService: SummaryService,
-    private featureToggles: FeatureTogglesService
+    private featureToggles: FeatureTogglesService,
+    public prometheusAlertService: PrometheusAlertService
   ) {
     this.permissions = this.authStorageService.getPermissions();
     this.enabledFeature$ = this.featureToggles.get();