ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.ts

   1 import { Component, OnDestroy, OnInit } from '@angular/core';
   2
   3 import _ from 'lodash';
   4 import { Observable, Subscription } from 'rxjs';
   5 import { take } from 'rxjs/operators';
   6
   7 import { HealthService } from '~/app/shared/api/health.service';
   8 import { OsdService } from '~/app/shared/api/osd.service';
   9 import { PrometheusService } from '~/app/shared/api/prometheus.service';
  10 import { Promqls as queries } from '~/app/shared/enum/dashboard-promqls.enum';
  11 import { Icons } from '~/app/shared/enum/icons.enum';
  12 import { DashboardDetails } from '~/app/shared/models/cd-details';
  13 import { Permissions } from '~/app/shared/models/permissions';
  14 import { AlertmanagerAlert } from '~/app/shared/models/prometheus-alerts';
  15 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
  16 import {
  17   FeatureTogglesMap$,
  18   FeatureTogglesService
  19 } from '~/app/shared/services/feature-toggles.service';
  20 import { RefreshIntervalService } from '~/app/shared/services/refresh-interval.service';
  21 import { SummaryService } from '~/app/shared/services/summary.service';
  22 import { PrometheusListHelper } from '~/app/shared/helpers/prometheus-list-helper';
  23 import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service';
  24 import { OrchestratorService } from '~/app/shared/api/orchestrator.service';
  25 import { MgrModuleService } from '~/app/shared/api/mgr-module.service';
  26 import { AlertClass } from '~/app/shared/enum/health-icon.enum';
  27
  28 @Component({
  29   selector: 'cd-dashboard-v3',
  30   templateUrl: './dashboard-v3.component.html',
  31   styleUrls: ['./dashboard-v3.component.scss']
  32 })
  33 export class DashboardV3Component extends PrometheusListHelper implements OnInit, OnDestroy {
  34   detailsCardData: DashboardDetails = {};
  35   osdSettingsService: any;
  36   osdSettings: any;
  37   interval = new Subscription();
  38   permissions: Permissions;
  39   enabledFeature$: FeatureTogglesMap$;
  40   color: string;
  41   capacityService: any;
  42   capacity: any;
  43   healthData$: Observable<Object>;
  44   prometheusAlerts$: Observable<AlertmanagerAlert[]>;
  45
  46   icons = Icons;
  47   flexHeight = true;
  48   simplebar = {
  49     autoHide: true
  50   };
  51   borderClass: string;
  52   alertType: string;
  53   alertClass = AlertClass;
  54   healthData: any;
  55   categoryPgAmount: Record<string, number> = {};
  56   totalPgs = 0;
  57   queriesResults: any = {
  58     USEDCAPACITY: '',
  59     IPS: '',
  60     OPS: '',
  61     READLATENCY: '',
  62     WRITELATENCY: '',
  63     READCLIENTTHROUGHPUT: '',
  64     WRITECLIENTTHROUGHPUT: '',
  65     RECOVERYBYTES: ''
  66   };
  67   telemetryEnabled: boolean;
  68   telemetryURL = 'https://telemetry-public.ceph.com/';
  69   origin = window.location.origin;
  70
  71   constructor(
  72     private summaryService: SummaryService,
  73     private orchestratorService: OrchestratorService,
  74     private osdService: OsdService,
  75     private authStorageService: AuthStorageService,
  76     private featureToggles: FeatureTogglesService,
  77     private healthService: HealthService,
  78     public prometheusService: PrometheusService,
  79     private mgrModuleService: MgrModuleService,
  80     private refreshIntervalService: RefreshIntervalService,
  81     public prometheusAlertService: PrometheusAlertService
  82   ) {
  83     super(prometheusService);
  84     this.permissions = this.authStorageService.getPermissions();
  85     this.enabledFeature$ = this.featureToggles.get();
  86   }
  87
  88   ngOnInit() {
  89     super.ngOnInit();
  90     this.interval = this.refreshIntervalService.intervalData$.subscribe(() => {
  91       this.getHealth();
  92       this.getCapacityCardData();
  93     });
  94     this.getPrometheusData(this.prometheusService.lastHourDateObject);
  95     this.getDetailsCardData();
  96     this.getTelemetryReport();
  97   }
  98
  99   getTelemetryText(): string {
 100     return this.telemetryEnabled
 101       ? 'Cluster telemetry is active'
 102       : 'Cluster telemetry is inactive. To Activate the Telemetry, \
 103        click settings icon on top navigation bar and select \
 104        Telemetry configration.';
 105   }
 106   ngOnDestroy() {
 107     this.interval.unsubscribe();
 108     this.prometheusService.unsubscribe();
 109   }
 110
 111   getHealth() {
 112     this.healthService.getMinimalHealth().subscribe((data: any) => {
 113       this.healthData = data;
 114     });
 115   }
 116
 117   toggleAlertsWindow(type: AlertClass) {
 118     this.alertType === type ? (this.alertType = null) : (this.alertType = type);
 119   }
 120
 121   getDetailsCardData() {
 122     this.healthService.getClusterFsid().subscribe((data: string) => {
 123       this.detailsCardData.fsid = data;
 124     });
 125     this.orchestratorService.getName().subscribe((data: string) => {
 126       this.detailsCardData.orchestrator = data;
 127     });
 128     this.summaryService.subscribe((summary) => {
 129       const version = summary.version.replace('ceph version ', '').split(' ');
 130       this.detailsCardData.cephVersion =
 131         version[0] + ' ' + version.slice(2, version.length).join(' ');
 132     });
 133   }
 134
 135   getCapacityCardData() {
 136     this.osdSettingsService = this.osdService
 137       .getOsdSettings()
 138       .pipe(take(1))
 139       .subscribe((data: any) => {
 140         this.osdSettings = data;
 141       });
 142     this.capacityService = this.healthService.getClusterCapacity().subscribe((data: any) => {
 143       this.capacity = data;
 144     });
 145   }
 146
 147   public getPrometheusData(selectedTime: any) {
 148     this.queriesResults = this.prometheusService.getPrometheusQueriesData(
 149       selectedTime,
 150       queries,
 151       this.queriesResults
 152     );
 153   }
 154
 155   private getTelemetryReport() {
 156     this.mgrModuleService.getConfig('telemetry').subscribe((resp: any) => {
 157       this.telemetryEnabled = resp?.enabled;
 158     });
 159   }
 160
 161   trackByFn(index: any) {
 162     return index;
 163   }
 164 }