From f88fb46d680127963c0d04b797b5742ada6024b4 Mon Sep 17 00:00:00 2001
From: Volker Theile <vtheile@suse.com>
Date: Fri, 24 Apr 2020 12:18:25 +0200
Subject: [PATCH] mgr/dashboard: monitoring menu entry should indicate firing
 alerts

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

Signed-off-by: Volker Theile <vtheile@suse.com>
---
 .../core/navigation/navigation/navigation.component.html    | 6 +++++-
 .../core/navigation/navigation/navigation.component.scss    | 4 ++++
 .../core/navigation/navigation/navigation.component.spec.ts | 4 +++-
 .../app/core/navigation/navigation/navigation.component.ts  | 4 +++-
 4 files changed, 15 insertions(+), 3 deletions(-)

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 d05e2669925f..5a3d4ccb8911 100644
--- 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 b1d8e0e25d8d..0000dd3337ed 100644
--- 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 fe4dec40e2b9..8fa84bf65ae7 100644
--- 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 b8310fb7351f..e21c9eeb0887 100644
--- 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();
-- 
2.47.3