From: Volker Theile <vtheile@suse.com>
Date: Fri, 24 Apr 2020 10:18:25 +0000 (+0200)
Subject: mgr/dashboard: monitoring menu entry should indicate firing alerts
X-Git-Tag: wip-pdonnell-testing-20200918.022351~1414^2
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=f88fb46d680127963c0d04b797b5742ada6024b4;p=ceph-ci.git

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 d05e2669925..5a3d4ccb891 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 b1d8e0e25d8..0000dd3337e 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 fe4dec40e2b..8fa84bf65ae 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 b8310fb7351..e21c9eeb088 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();