1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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);
}
}
}
}
|
