ceph/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts

   1 import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
   2
   3 import { Subscription } from 'rxjs';
   4
   5 import { Icons } from '~/app/shared/enum/icons.enum';
   6 import { Permissions } from '~/app/shared/models/permissions';
   7 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
   8 import {
   9   FeatureTogglesMap$,
  10   FeatureTogglesService
  11 } from '~/app/shared/services/feature-toggles.service';
  12 import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service';
  13 import { SummaryService } from '~/app/shared/services/summary.service';
  14 import { TelemetryNotificationService } from '~/app/shared/services/telemetry-notification.service';
  15
  16 @Component({
  17   selector: 'cd-navigation',
  18   templateUrl: './navigation.component.html',
  19   styleUrls: ['./navigation.component.scss']
  20 })
  21 export class NavigationComponent implements OnInit, OnDestroy {
  22   notifications: string[] = [];
  23   @HostBinding('class') get class(): string {
  24     return 'top-notification-' + this.notifications.length;
  25   }
  26
  27   permissions: Permissions;
  28   enabledFeature$: FeatureTogglesMap$;
  29   summaryData: any;
  30   icons = Icons;
  31
  32   rightSidebarOpen = false; // rightSidebar only opens when width is less than 768px
  33   showMenuSidebar = true;
  34   displayedSubMenu = '';
  35
  36   simplebar = {
  37     autoHide: false
  38   };
  39   private subs = new Subscription();
  40
  41   constructor(
  42     private authStorageService: AuthStorageService,
  43     private summaryService: SummaryService,
  44     private featureToggles: FeatureTogglesService,
  45     private telemetryNotificationService: TelemetryNotificationService,
  46     public prometheusAlertService: PrometheusAlertService
  47   ) {
  48     this.permissions = this.authStorageService.getPermissions();
  49     this.enabledFeature$ = this.featureToggles.get();
  50   }
  51
  52   ngOnInit() {
  53     this.subs.add(
  54       this.summaryService.subscribe((summary) => {
  55         this.summaryData = summary;
  56       })
  57     );
  58     /*
  59      Note: If you're going to add more top notifications please do not forget to increase
  60      the number of generated css-classes in section topNotification settings in the scss
  61      file.
  62      */
  63     this.subs.add(
  64       this.authStorageService.isPwdDisplayed$.subscribe((isDisplayed) => {
  65         this.showTopNotification('isPwdDisplayed', isDisplayed);
  66       })
  67     );
  68     this.subs.add(
  69       this.telemetryNotificationService.update.subscribe((visible: boolean) => {
  70         this.showTopNotification('telemetryNotificationEnabled', visible);
  71       })
  72     );
  73   }
  74
  75   ngOnDestroy(): void {
  76     this.subs.unsubscribe();
  77   }
  78
  79   blockHealthColor() {
  80     if (this.summaryData && this.summaryData.rbd_mirroring) {
  81       if (this.summaryData.rbd_mirroring.errors > 0) {
  82         return { color: '#d9534f' };
  83       } else if (this.summaryData.rbd_mirroring.warnings > 0) {
  84         return { color: '#f0ad4e' };
  85       }
  86     }
  87
  88     return undefined;
  89   }
  90
  91   toggleSubMenu(menu: string) {
  92     if (this.displayedSubMenu === menu) {
  93       this.displayedSubMenu = '';
  94     } else {
  95       this.displayedSubMenu = menu;
  96     }
  97   }
  98
  99   toggleRightSidebar() {
 100     this.rightSidebarOpen = !this.rightSidebarOpen;
 101   }
 102
 103   showTopNotification(name: string, isDisplayed: boolean) {
 104     if (isDisplayed) {
 105       if (!this.notifications.includes(name)) {
 106         this.notifications.push(name);
 107       }
 108     } else {
 109       const index = this.notifications.indexOf(name);
 110       if (index >= 0) {
 111         this.notifications.splice(index, 1);
 112       }
 113     }
 114   }
 115 }