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>
(cherry picked from commit 460f7bb3272c6536c9a5fc0919071d7c17e9aa5a)

Conflicts:
  src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/monitoring-list/monitoring-list.component.html
  src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/monitoring-list/monitoring-list.component.ts
  src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
  src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts

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..3b9aef25dfbe2ce1b6fd5f214beede13dccfe514 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,33 @@
        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-info-panel 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-info-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-info-panel *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-info-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-info-panel *ngIf="!isAlertmanagerConfigured"
+                   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-info-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 efc30190faed4205c126cc3cb34a61c7b19d6044..2b85d386f5d89a193e78631ae0db3c09657878e4 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')
-  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')
+  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 309214d72afb29196dd550cb589f118cb8f707cd..562e75355f4a0d5537e7560c9bb63a917b2b838e 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
@@ -100,7 +100,7 @@
           </li>
           <li routerLinkActive="active"
               class="tc_submenuitem tc_submenuitem_monitoring"
-              *ngIf="prometheusConfigured && permissions.prometheus.read">
+              *ngIf="(isAlertmanagerConfigured || isPrometheusConfigured) && permissions.prometheus.read">
             <a i18n
                routerLink="/monitoring">Monitoring</a>
           </li>

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 b5ecd68fd55f9ef5d25c6aa79c5fad704b0e29d2..0fc85e8da7587d152b52d1cf572cb6399c8e6131 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,7 +19,8 @@ export class NavigationComponent implements OnInit {
   summaryData: any;
 
   isCollapsed = true;
-  prometheusConfigured = false;
+  isAlertmanagerConfigured = false;
+  isPrometheusConfigured = false;
   enabledFeature$: FeatureTogglesMap$;
 
   constructor(
@@ -41,7 +42,10 @@ export class NavigationComponent implements OnInit {
     });
     if (this.permissions.configOpt.read) {
       this.prometheusService.ifAlertmanagerConfigured(() => {
-        this.prometheusConfigured = true;
+        this.isAlertmanagerConfigured = true;
+      });
+      this.prometheusService.ifPrometheusConfigured(() => {
+        this.isPrometheusConfigured = true;
       });
     }
   }