mgr/dashboard: fix prometheus api error on landing page v3

When no prometheus is configured in the cluster, it gives out error
while polling to the prometheus endpoint. so a proper check needs to be
added there.

Also some improvements to the exisiting behaviour

Fixes: https://tracker.ceph.com/issues/58867
Signed-off-by: Nizamudeen A <nia@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.ts
index 1a4854327a04069fc2b4fff78547cb3566bb1a22..de027bfec50756412d0abd949cf9b1e81b4aad58 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.ts
@@ -3,6 +3,7 @@ import { Component, Inject, OnInit, TemplateRef, ViewChild } from '@angular/core
 import { PrometheusService } from '~/app/shared/api/prometheus.service';
 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
 import { Icons } from '~/app/shared/enum/icons.enum';
+import { PrometheusListHelper } from '~/app/shared/helpers/prometheus-list-helper';
 import { CdTableAction } from '~/app/shared/models/cd-table-action';
 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
@@ -10,7 +11,6 @@ import { Permission } from '~/app/shared/models/permissions';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
 import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service';
 import { URLBuilderService } from '~/app/shared/services/url-builder.service';
-import { PrometheusListHelper } from '../prometheus-list-helper';
 
 const BASE_URL = 'silences'; // as only silence actions can be used
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-list-helper.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-list-helper.ts
deleted file mode 100644 (file)
index c1a5949..0000000
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-list-helper.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Directive, OnInit } from '@angular/core';
-
-import { PrometheusService } from '~/app/shared/api/prometheus.service';
-import { ListWithDetails } from '~/app/shared/classes/list-with-details.class';
-
-@Directive()
-// tslint:disable-next-line: directive-class-suffix
-export class PrometheusListHelper extends ListWithDetails implements OnInit {
-  public isPrometheusConfigured = false;
-  public isAlertmanagerConfigured = false;
-
-  constructor(protected prometheusService: PrometheusService) {
-    super();
-  }
-
-  ngOnInit() {
-    this.prometheusService.ifAlertmanagerConfigured(() => {
-      this.isAlertmanagerConfigured = true;
-    });
-    this.prometheusService.ifPrometheusConfigured(() => {
-      this.isPrometheusConfigured = true;
-    });
-  }
-}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/rules-list/rules-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/rules-list/rules-list.component.ts
index e033729da3f3db69227f4b6d873d2873a03feffc..bdca7a1b70242338fa62ddd91966398bd8bfcb00 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/rules-list/rules-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/rules-list/rules-list.component.ts
@@ -4,12 +4,12 @@ import _ from 'lodash';
 
 import { PrometheusService } from '~/app/shared/api/prometheus.service';
 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
+import { PrometheusListHelper } from '~/app/shared/helpers/prometheus-list-helper';
 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
 import { PrometheusRule } from '~/app/shared/models/prometheus-alerts';
 import { DurationPipe } from '~/app/shared/pipes/duration.pipe';
 import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service';
-import { PrometheusListHelper } from '../prometheus-list-helper';
 
 @Component({
   selector: 'cd-rules-list',

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-list/silence-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-list/silence-list.component.ts
index 29af2bd2ae891c33865fb9750cb12c302a5b0f27..d5612a0949c05f1b6967743c1bc1e6ff89cc1f59 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-list/silence-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-list/silence-list.component.ts
@@ -4,7 +4,7 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { SortDirection, SortPropDir } from '@swimlane/ngx-datatable';
 import { Observable, Subscriber } from 'rxjs';
 
-import { PrometheusListHelper } from '~/app/ceph/cluster/prometheus/prometheus-list-helper';
+import { PrometheusListHelper } from '~/app/shared/helpers/prometheus-list-helper';
 import { SilenceFormComponent } from '~/app/ceph/cluster/prometheus/silence-form/silence-form.component';
 import { PrometheusService } from '~/app/shared/api/prometheus.service';
 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts
index e19cac146358e93c482a36af7855daa47d0eb528..df4d8775d5b74a090ff8a9ba9b53e4a0759427df 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts
@@ -23,13 +23,14 @@ import {
 } from '~/app/shared/services/feature-toggles.service';
 import { RefreshIntervalService } from '~/app/shared/services/refresh-interval.service';
 import { SummaryService } from '~/app/shared/services/summary.service';
+import { PrometheusListHelper } from '~/app/shared/helpers/prometheus-list-helper';
 
 @Component({
   selector: 'cd-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
-export class DashboardComponent implements OnInit, OnDestroy {
+export class DashboardComponent extends PrometheusListHelper implements OnInit, OnDestroy {
   detailsCardData: DashboardDetails = {};
   osdSettingsService: any;
   osdSettings: any;
@@ -42,7 +43,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
   healthData$: Observable<Object>;
   prometheusAlerts$: Observable<AlertmanagerAlert[]>;
 
-  isAlertmanagerConfigured = false;
   icons = Icons;
   showAlerts = false;
   flexHeight = true;
@@ -88,11 +88,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
     public prometheusService: PrometheusService,
     private refreshIntervalService: RefreshIntervalService
   ) {
+    super(prometheusService);
     this.permissions = this.authStorageService.getPermissions();
     this.enabledFeature$ = this.featureToggles.get();
   }
 
   ngOnInit() {
+    super.ngOnInit();
     this.interval = this.refreshIntervalService.intervalData$.subscribe(() => {
       this.getHealth();
       this.triggerPrometheusAlerts();
@@ -159,8 +161,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
   triggerPrometheusAlerts() {
     this.prometheusService.ifAlertmanagerConfigured(() => {
-      this.isAlertmanagerConfigured = true;
-
       this.prometheusService.getAlerts().subscribe((alerts) => {
         this.alerts = alerts;
         this.crticialActiveAlerts = alerts.filter(
@@ -176,39 +176,41 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   getPrometheusData(selectedTime: any) {
-    if (this.timerGetPrometheusDataSub) {
-      this.timerGetPrometheusDataSub.unsubscribe();
-    }
-    this.timerGetPrometheusDataSub = timer(0, this.timerTime).subscribe(() => {
-      selectedTime = this.updateTimeStamp(selectedTime);
-
-      for (const queryName in queries) {
-        if (queries.hasOwnProperty(queryName)) {
-          const query = queries[queryName];
-          let interval = selectedTime.step;
-
-          if (query.includes('rate') && selectedTime.step < 20) {
-            interval = 20;
-          } else if (query.includes('rate')) {
-            interval = selectedTime.step * 2;
+    this.prometheusService.ifPrometheusConfigured(() => {
+      if (this.timerGetPrometheusDataSub) {
+        this.timerGetPrometheusDataSub.unsubscribe();
+      }
+      this.timerGetPrometheusDataSub = timer(0, this.timerTime).subscribe(() => {
+        selectedTime = this.updateTimeStamp(selectedTime);
+
+        for (const queryName in queries) {
+          if (queries.hasOwnProperty(queryName)) {
+            const query = queries[queryName];
+            let interval = selectedTime.step;
+
+            if (query.includes('rate') && selectedTime.step < 20) {
+              interval = 20;
+            } else if (query.includes('rate')) {
+              interval = selectedTime.step * 2;
+            }
+
+            const intervalAdjustedQuery = query.replace(/\[(.*?)\]/g, `[${interval}s]`);
+
+            this.prometheusService
+              .getPrometheusData({
+                params: intervalAdjustedQuery,
+                start: selectedTime['start'],
+                end: selectedTime['end'],
+                step: selectedTime['step']
+              })
+              .subscribe((data: any) => {
+                if (data.result.length) {
+                  this.queriesResults[queryName] = data.result[0].values;
+                }
+              });
           }
-
-          const intervalAdjustedQuery = query.replace(/\[(.*?)\]/g, `[${interval}s]`);
-
-          this.prometheusService
-            .getPrometheusData({
-              params: intervalAdjustedQuery,
-              start: selectedTime['start'],
-              end: selectedTime['end'],
-              step: selectedTime['step']
-            })
-            .subscribe((data: any) => {
-              if (data.result.length) {
-                this.queriesResults[queryName] = data.result[0].values;
-              }
-            });
         }
-      }
+      });
     });
   }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/helpers/helpers.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/helpers/helpers.module.ts
new file mode 100644 (file)
index 0000000..7f9b7d2
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/helpers/helpers.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule]
+})
+export class HelpersModule {}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/helpers/prometheus-list-helper.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/helpers/prometheus-list-helper.ts
new file mode 100644 (file)
index 0000000..c1a5949
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/helpers/prometheus-list-helper.ts
@@ -0,0 +1,24 @@
+import { Directive, OnInit } from '@angular/core';
+
+import { PrometheusService } from '~/app/shared/api/prometheus.service';
+import { ListWithDetails } from '~/app/shared/classes/list-with-details.class';
+
+@Directive()
+// tslint:disable-next-line: directive-class-suffix
+export class PrometheusListHelper extends ListWithDetails implements OnInit {
+  public isPrometheusConfigured = false;
+  public isAlertmanagerConfigured = false;
+
+  constructor(protected prometheusService: PrometheusService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.prometheusService.ifAlertmanagerConfigured(() => {
+      this.isAlertmanagerConfigured = true;
+    });
+    this.prometheusService.ifPrometheusConfigured(() => {
+      this.isPrometheusConfigured = true;
+    });
+  }
+}