From 9ec0513837c28336ab2170e5a9e1094f7b2d1ea7 Mon Sep 17 00:00:00 2001
From: Volker Theile <vtheile@suse.com>
Date: Thu, 2 Apr 2020 12:45:26 +0200
Subject: [PATCH] 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
---
 .../monitoring-list.component.html            | 21 ++++++++--
 .../monitoring-list.component.ts              | 38 +++++++++++++++++--
 .../navigation/navigation.component.html      |  2 +-
 .../navigation/navigation.component.ts        |  8 +++-
 4 files changed, 59 insertions(+), 10 deletions(-)

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 55f571d8427a..3b9aef25dfbe 100644
--- 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 efc30190faed..2b85d386f5d8 100644
--- 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 309214d72afb..562e75355f4a 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
@@ -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 b5ecd68fd55f..0fc85e8da758 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
@@ -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;
       });
     }
   }
-- 
2.47.3