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

   1 import { Component, OnDestroy, OnInit } from '@angular/core';
   2
   3 import _ from 'lodash';
   4 import { Observable, ReplaySubject, Subscription, of } from 'rxjs';
   5
   6 import { Permissions } from '~/app/shared/models/permissions';
   7 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
   8 import { RefreshIntervalService } from '~/app/shared/services/refresh-interval.service';
   9 import { RgwDaemonService } from '~/app/shared/api/rgw-daemon.service';
  10 import { RgwRealmService } from '~/app/shared/api/rgw-realm.service';
  11 import { RgwZoneService } from '~/app/shared/api/rgw-zone.service';
  12 import { RgwZonegroupService } from '~/app/shared/api/rgw-zonegroup.service';
  13 import { RgwBucketService } from '~/app/shared/api/rgw-bucket.service';
  14 import { PrometheusService } from '~/app/shared/api/prometheus.service';
  15
  16 import { RgwPromqls as queries } from '~/app/shared/enum/dashboard-promqls.enum';
  17 import { HealthService } from '~/app/shared/api/health.service';
  18 import { Icons } from '~/app/shared/enum/icons.enum';
  19 import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service';
  20 import { catchError, shareReplay, switchMap, tap } from 'rxjs/operators';
  21
  22 @Component({
  23   selector: 'cd-rgw-overview-dashboard',
  24   templateUrl: './rgw-overview-dashboard.component.html',
  25   styleUrls: ['./rgw-overview-dashboard.component.scss']
  26 })
  27 export class RgwOverviewDashboardComponent implements OnInit, OnDestroy {
  28   icons = Icons;
  29
  30   interval = new Subscription();
  31   permissions: Permissions;
  32   rgwDaemonCount = 0;
  33   rgwRealmCount = 0;
  34   rgwZonegroupCount = 0;
  35   rgwZoneCount = 0;
  36   rgwBucketCount = 0;
  37   objectCount = 0;
  38   UserCount = 0;
  39   totalPoolUsedBytes = 0;
  40   averageObjectSize = 0;
  41   realmData: any;
  42   daemonSub: Subscription;
  43   realmSub: Subscription;
  44   multisiteInfo: object[] = [];
  45   ZonegroupSub: Subscription;
  46   ZoneSUb: Subscription;
  47   HealthSub: Subscription;
  48   BucketSub: Subscription;
  49   queriesResults: any = {
  50     RGW_REQUEST_PER_SECOND: '',
  51     BANDWIDTH: '',
  52     AVG_GET_LATENCY: '',
  53     AVG_PUT_LATENCY: ''
  54   };
  55   timerGetPrometheusDataSub: Subscription;
  56   chartTitles = ['Metadata Sync', 'Data Sync'];
  57   realm: string;
  58   zonegroup: string;
  59   zone: string;
  60   metadataSyncInfo: string;
  61   replicaZonesInfo: any = [];
  62   metadataSyncData: {};
  63   showMultisiteCard = true;
  64   loading = true;
  65   multisiteSyncStatus$: Observable<any>;
  66   subject = new ReplaySubject<any>();
  67   syncCardLoading = true;
  68
  69   constructor(
  70     private authStorageService: AuthStorageService,
  71     private healthService: HealthService,
  72     private refreshIntervalService: RefreshIntervalService,
  73     private rgwDaemonService: RgwDaemonService,
  74     private rgwRealmService: RgwRealmService,
  75     private rgwZonegroupService: RgwZonegroupService,
  76     private rgwZoneService: RgwZoneService,
  77     private rgwBucketService: RgwBucketService,
  78     private prometheusService: PrometheusService,
  79     private rgwMultisiteService: RgwMultisiteService
  80   ) {
  81     this.permissions = this.authStorageService.getPermissions();
  82   }
  83
  84   ngOnInit() {
  85     this.interval = this.refreshIntervalService.intervalData$.subscribe(() => {
  86       this.daemonSub = this.rgwDaemonService.list().subscribe((data: any) => {
  87         this.rgwDaemonCount = data.length;
  88       });
  89       this.HealthSub = this.healthService.getClusterCapacity().subscribe((data: any) => {
  90         this.objectCount = data['total_objects'];
  91         this.totalPoolUsedBytes = data['total_pool_bytes_used'];
  92         this.averageObjectSize = data['average_object_size'];
  93       });
  94       this.getSyncStatus();
  95     });
  96     this.BucketSub = this.rgwBucketService
  97       .getTotalBucketsAndUsersLength()
  98       .subscribe((data: any) => {
  99         this.rgwBucketCount = data['buckets_count'];
 100         this.UserCount = data['users_count'];
 101       });
 102     this.realmSub = this.rgwRealmService.list().subscribe((data: any) => {
 103       this.rgwRealmCount = data['realms'].length;
 104     });
 105     this.ZonegroupSub = this.rgwZonegroupService.list().subscribe((data: any) => {
 106       this.rgwZonegroupCount = data['zonegroups'].length;
 107     });
 108     this.ZoneSUb = this.rgwZoneService.list().subscribe((data: any) => {
 109       this.rgwZoneCount = data['zones'].length;
 110     });
 111     this.getPrometheusData(this.prometheusService.lastHourDateObject);
 112     this.multisiteSyncStatus$ = this.subject.pipe(
 113       switchMap(() =>
 114         this.rgwMultisiteService.getSyncStatus().pipe(
 115           tap((data: any) => {
 116             this.loading = false;
 117             this.replicaZonesInfo = data['dataSyncInfo'];
 118             this.metadataSyncInfo = data['metadataSyncInfo'];
 119             if (this.replicaZonesInfo.length === 0) {
 120               this.showMultisiteCard = false;
 121               this.syncCardLoading = false;
 122               this.loading = false;
 123             }
 124             [this.realm, this.zonegroup, this.zone] = data['primaryZoneData'];
 125           }),
 126           catchError((err) => {
 127             this.showMultisiteCard = false;
 128             this.syncCardLoading = false;
 129             this.loading = false;
 130             err.preventDefault();
 131             return of(true);
 132           })
 133         )
 134       ),
 135       shareReplay(1)
 136     );
 137   }
 138
 139   ngOnDestroy() {
 140     this.interval.unsubscribe();
 141     this.daemonSub.unsubscribe();
 142     this.realmSub.unsubscribe();
 143     this.ZonegroupSub.unsubscribe();
 144     this.ZoneSUb.unsubscribe();
 145     this.BucketSub.unsubscribe();
 146     this.HealthSub.unsubscribe();
 147     this.prometheusService.unsubscribe();
 148   }
 149
 150   getPrometheusData(selectedTime: any) {
 151     this.queriesResults = this.prometheusService.getPrometheusQueriesData(
 152       selectedTime,
 153       queries,
 154       this.queriesResults,
 155       true
 156     );
 157   }
 158
 159   getSyncStatus() {
 160     this.subject.next();
 161   }
 162
 163   trackByFn(zone: any) {
 164     return zone;
 165   }
 166 }