1 files changed, 123 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
new file mode 100644
index 000000000..512feecef
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
@@ -0,0 +1,123 @@
+import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
+
+import * as _ from 'lodash';
+import { Subscription } from 'rxjs';
+
+import { Icons } from '~/app/shared/enum/icons.enum';
+import { Permissions } from '~/app/shared/models/permissions';
+import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
+import {
+  FeatureTogglesMap$,
+  FeatureTogglesService
+} from '~/app/shared/services/feature-toggles.service';
+import { MotdNotificationService } from '~/app/shared/services/motd-notification.service';
+import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service';
+import { SummaryService } from '~/app/shared/services/summary.service';
+import { TelemetryNotificationService } from '~/app/shared/services/telemetry-notification.service';
+
+@Component({
+  selector: 'cd-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss']
+})
+export class NavigationComponent implements OnInit, OnDestroy {
+  notifications: string[] = [];
+  @HostBinding('class') get class(): string {
+    return 'top-notification-' + this.notifications.length;
+  }
+
+  permissions: Permissions;
+  enabledFeature$: FeatureTogglesMap$;
+  summaryData: any;
+  icons = Icons;
+
+  rightSidebarOpen = false; // rightSidebar only opens when width is less than 768px
+  showMenuSidebar = true;
+  displayedSubMenu = '';
+
+  simplebar = {
+    autoHide: false
+  };
+  private subs = new Subscription();
+
+  constructor(
+    private authStorageService: AuthStorageService,
+    private summaryService: SummaryService,
+    private featureToggles: FeatureTogglesService,
+    private telemetryNotificationService: TelemetryNotificationService,
+    public prometheusAlertService: PrometheusAlertService,
+    private motdNotificationService: MotdNotificationService
+  ) {
+    this.permissions = this.authStorageService.getPermissions();
+    this.enabledFeature$ = this.featureToggles.get();
+  }
+
+  ngOnInit() {
+    this.subs.add(
+      this.summaryService.subscribe((summary) => {
+        this.summaryData = summary;
+      })
+    );
+    /*
+     Note: If you're going to add more top notifications please do not forget to increase
+     the number of generated css-classes in section topNotification settings in the scss
+     file.
+     */
+    this.subs.add(
+      this.authStorageService.isPwdDisplayed$.subscribe((isDisplayed) => {
+        this.showTopNotification('isPwdDisplayed', isDisplayed);
+      })
+    );
+    this.subs.add(
+      this.telemetryNotificationService.update.subscribe((visible: boolean) => {
+        this.showTopNotification('telemetryNotificationEnabled', visible);
+      })
+    );
+    this.subs.add(
+      this.motdNotificationService.motd$.subscribe((motd: any) => {
+        this.showTopNotification('motdNotificationEnabled', _.isPlainObject(motd));
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subs.unsubscribe();
+  }
+
+  blockHealthColor() {
+    if (this.summaryData && this.summaryData.rbd_mirroring) {
+      if (this.summaryData.rbd_mirroring.errors > 0) {
+        return { color: '#d9534f' };
+      } else if (this.summaryData.rbd_mirroring.warnings > 0) {
+        return { color: '#f0ad4e' };
+      }
+    }
+
+    return undefined;
+  }
+
+  toggleSubMenu(menu: string) {
+    if (this.displayedSubMenu === menu) {
+      this.displayedSubMenu = '';
+    } else {
+      this.displayedSubMenu = menu;
+    }
+  }
+
+  toggleRightSidebar() {
+    this.rightSidebarOpen = !this.rightSidebarOpen;
+  }
+
+  showTopNotification(name: string, isDisplayed: boolean) {
+    if (isDisplayed) {
+      if (!this.notifications.includes(name)) {
+        this.notifications.push(name);
+      }
+    } else {
+      const index = this.notifications.indexOf(name);
+      if (index >= 0) {
+        this.notifications.splice(index, 1);
+      }
+    }
+  }
+}