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