mgr/dashboard: show alert panel if prometheus/alertmanager is unconfigured

If the tabs under the "Monitoring" page aren't properly configured, a
notification is shown which explains the user which setting needs to be
enabled and also provides a link to the corresponding documentation.

Fixes: https://tracker.ceph.com/issues/42877
Signed-off-by: Patrick Seidensal <pseidensal@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/monitoring-list/monitoring-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/monitoring-list/monitoring-list.component.html
index 55f571d8427aa0fd3dae2e94144c428c838d8535..f54c1fe515f554ead4338402f8f7e35dc26cab61 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/monitoring-list/monitoring-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/monitoring-list/monitoring-list.component.html
@@ -3,18 +3,36 @@
        heading="Active Alerts"
        (selectTab)="setFragment($event)"
        i18n-heading>
-    <cd-active-alert-list></cd-active-alert-list>
+    <cd-active-alert-list *ngIf="isAlertmanagerConfigured"></cd-active-alert-list>
+    <cd-alert-panel type="info"
+                    i18n
+                    *ngIf="!isAlertmanagerConfigured">To see all active Prometheus alerts, please
+      provide the URL to the API of Prometheus' Alertmanager as described in the
+  <a href="{{docsUrl}}"
+     target="_blank">documentation</a>.</cd-alert-panel>
   </tab>
   <tab id="all-alerts"
        heading="All Alerts"
        (selectTab)="setFragment($event)"
        i18n-heading>
-    <cd-rules-list [data]="prometheusAlertService.rules"></cd-rules-list>
+    <cd-rules-list *ngIf="isPrometheusConfigured"
+                   [data]="prometheusAlertService.rules"></cd-rules-list>
+    <cd-alert-panel type="info"
+                    *ngIf="!isPrometheusConfigured">To see all configured Prometheus alerts, please provide the URL to
+      the API of Prometheus as described in the
+  <a href="{{docsUrl}}"
+     target="_blank">documentation</a>.</cd-alert-panel>
   </tab>
   <tab id="silences"
        heading="Silences"
        (selectTab)="setFragment($event)"
        i18n-heading>
-    <cd-silences-list></cd-silences-list>
+    <cd-silences-list *ngIf="isAlertmanagerConfigured"></cd-silences-list>
+    <cd-alert-panel *ngIf="!isAlertmanagerConfigured"
+                    type="info"
+                    i18n>To enable Silences, please provide the URL to the API of the Prometheus' Alertmanager as
+      described in the
+  <a href="{{docsUrl}}"
+     target="_blank">documentation</a>.</cd-alert-panel>
   </tab>
 </tabset>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/monitoring-list/monitoring-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/monitoring-list/monitoring-list.component.ts
index f6f57a9b37661c2fb8cb054587b4b86948555e91..5e96d126fdda2bd7bccbf8fd50ab9cb0ba9f7b0a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/monitoring-list/monitoring-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/monitoring-list/monitoring-list.component.ts
@@ -3,7 +3,10 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { TabDirective, TabsetComponent } from 'ngx-bootstrap/tabs';
 
+import { PrometheusService } from '../../../../shared/api/prometheus.service';
+import { CephReleaseNamePipe } from '../../../../shared/pipes/ceph-release-name.pipe';
 import { PrometheusAlertService } from '../../../../shared/services/prometheus-alert.service';
+import { SummaryService } from '../../../../shared/services/summary.service';
 
 @Component({
   selector: 'cd-monitoring-list',
@@ -11,16 +14,43 @@ import { PrometheusAlertService } from '../../../../shared/services/prometheus-a
   styleUrls: ['./monitoring-list.component.scss']
 })
 export class MonitoringListComponent implements OnInit {
-  @ViewChild('tabs', { static: true })
-  tabs: TabsetComponent;
-
   constructor(
     public prometheusAlertService: PrometheusAlertService,
+    private prometheusService: PrometheusService,
     private route: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private summaryService: SummaryService,
+    private cephReleaseNamePipe: CephReleaseNamePipe
   ) {}
+  @ViewChild('tabs', { static: true })
+  tabs: TabsetComponent;
+
+  isPrometheusConfigured = false;
+  isAlertmanagerConfigured = false;
+
+  docsUrl = '';
 
   ngOnInit() {
+    this.prometheusService.ifAlertmanagerConfigured(() => {
+      this.isAlertmanagerConfigured = true;
+    });
+    this.prometheusService.ifPrometheusConfigured(() => {
+      this.isPrometheusConfigured = true;
+    });
+
+    const subs = this.summaryService.subscribe((summary: any) => {
+      if (!summary) {
+        return;
+      }
+
+      const releaseName = this.cephReleaseNamePipe.transform(summary.version);
+      this.docsUrl = `https://docs.ceph.com/docs/${releaseName}/mgr/dashboard/#enabling-prometheus-alerting`;
+
+      setTimeout(() => {
+        subs.unsubscribe();
+      }, 0);
+    });
+
     // Activate tab according to given fragment
     if (this.route.snapshot.fragment) {
       const tab = this.tabs.tabs.find(

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 77b30500847e8aba30f766eb11e948f7e36b632b..21360dd11a53c28e0a41e1312264993d4c81e01d 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
@@ -147,7 +147,7 @@
       </li>
       <li routerLinkActive="active"
           class="tc_submenuitem tc_submenuitem_monitoring"
-          *ngIf="prometheusConfigured && permissions.prometheus.read">
+          *ngIf="(isAlertmanagerConfigured || isPrometheusConfigured) && permissions.prometheus.read">
         <a i18n
            class="dropdown-item"
            routerLink="/monitoring">Monitoring</a>

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 94313d5a5615938058db6acf8742019928f83bef..83c8690f4b9c6795039281344e210f629289f56e 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
@@ -19,9 +19,9 @@ export class NavigationComponent implements OnInit {
   permissions: Permissions;
   summaryData: any;
   icons = Icons;
-
   isCollapsed = true;
-  prometheusConfigured = false;
+  isAlertmanagerConfigured = false;
+  isPrometheusConfigured = false;
   enabledFeature$: FeatureTogglesMap$;
 
   constructor(
@@ -42,7 +42,10 @@ export class NavigationComponent implements OnInit {
       this.summaryData = data;
     });
     this.prometheusService.ifAlertmanagerConfigured(() => {
-      this.prometheusConfigured = true;
+      this.isAlertmanagerConfigured = true;
+    });
+    this.prometheusService.ifPrometheusConfigured(() => {
+      this.isPrometheusConfigured = true;
     });
   }