ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/monitoring-list/monitoring-list.component.ts

   1 import { Component, OnInit, ViewChild } from '@angular/core';
   2 import { ActivatedRoute, Router } from '@angular/router';
   3
   4 import { TabDirective, TabsetComponent } from 'ngx-bootstrap/tabs';
   5
   6 import { PrometheusService } from '../../../../shared/api/prometheus.service';
   7 import { CephReleaseNamePipe } from '../../../../shared/pipes/ceph-release-name.pipe';
   8 import { PrometheusAlertService } from '../../../../shared/services/prometheus-alert.service';
   9 import { SummaryService } from '../../../../shared/services/summary.service';
  10
  11 @Component({
  12   selector: 'cd-monitoring-list',
  13   templateUrl: './monitoring-list.component.html',
  14   styleUrls: ['./monitoring-list.component.scss']
  15 })
  16 export class MonitoringListComponent implements OnInit {
  17   constructor(
  18     public prometheusAlertService: PrometheusAlertService,
  19     private prometheusService: PrometheusService,
  20     private route: ActivatedRoute,
  21     private router: Router,
  22     private summaryService: SummaryService,
  23     private cephReleaseNamePipe: CephReleaseNamePipe
  24   ) {}
  25   @ViewChild('tabs', { static: true })
  26   tabs: TabsetComponent;
  27
  28   isPrometheusConfigured = false;
  29   isAlertmanagerConfigured = false;
  30
  31   docsUrl = '';
  32
  33   ngOnInit() {
  34     this.prometheusService.ifAlertmanagerConfigured(() => {
  35       this.isAlertmanagerConfigured = true;
  36     });
  37     this.prometheusService.ifPrometheusConfigured(() => {
  38       this.isPrometheusConfigured = true;
  39     });
  40
  41     const subs = this.summaryService.subscribe((summary: any) => {
  42       if (!summary) {
  43         return;
  44       }
  45
  46       const releaseName = this.cephReleaseNamePipe.transform(summary.version);
  47       this.docsUrl = `https://docs.ceph.com/docs/${releaseName}/mgr/dashboard/#enabling-prometheus-alerting`;
  48
  49       setTimeout(() => {
  50         subs.unsubscribe();
  51       }, 0);
  52     });
  53
  54     // Activate tab according to given fragment
  55     if (this.route.snapshot.fragment) {
  56       const tab = this.tabs.tabs.find(
  57         (t) => t.elementRef.nativeElement.id === this.route.snapshot.fragment
  58       );
  59       if (tab) {
  60         tab.active = true;
  61       }
  62       // Ensure fragment is not removed, so page can always be reloaded with the same tab open.
  63       this.router.navigate([], { fragment: this.route.snapshot.fragment });
  64     }
  65   }
  66
  67   setFragment(element: TabDirective) {
  68     this.router.navigate([], { fragment: element.id });
  69   }
  70 }