From: Nizamudeen A Date: Wed, 22 Feb 2023 07:33:34 +0000 (+0530) Subject: mgr/dashboard: fix prometheus api error on landing page v3 X-Git-Tag: v18.1.0~234^2~1 X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=0c6ab8be77890ab73cd86970c20269f8444e6acd;p=ceph-ci.git 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 (cherry picked from commit 2d80e57dd4a60cbf52074d982ba3ebd4471a14ca) --- 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 1a4854327a0..de027bfec50 100644 --- 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 index c1a594908c5..00000000000 --- 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 e033729da3f..bdca7a1b702 100644 --- 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 29af2bd2ae8..d5612a0949c 100644 --- 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 e19cac14635..df4d8775d5b 100644 --- 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; prometheusAlerts$: Observable; - 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 index 00000000000..7f9b7d21efd --- /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 index 00000000000..c1a594908c5 --- /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; + }); + } +}