1 import { Component, Input, OnChanges, OnInit } from '@angular/core';
2 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
4 import { I18n } from '@ngx-translate/i18n-polyfill';
6 import { CephReleaseNamePipe } from '../../../shared/pipes/ceph-release-name.pipe';
7 import { SummaryService } from '../../../shared/services/summary.service';
8 import { SettingsService } from '../../api/settings.service';
11 selector: 'cd-grafana',
12 templateUrl: './grafana.component.html',
13 styleUrls: ['./grafana.component.scss']
15 export class GrafanaComponent implements OnInit, OnChanges {
27 dashboardExist = true;
30 readonly DEFAULT_TIME: string = 'from=now-1h&to=now';
42 private summaryService: SummaryService,
43 private sanitizer: DomSanitizer,
44 private settingsService: SettingsService,
45 private cephReleaseNamePipe: CephReleaseNamePipe,
50 name: this.i18n('Last 5 minutes'),
51 value: 'from=now-5m&to=now'
54 name: this.i18n('Last 15 minutes'),
55 value: 'from=now-15m&to=now'
58 name: this.i18n('Last 30 minutes'),
59 value: 'from=now-30m&to=now'
62 name: this.i18n('Last 1 hour (Default)'),
63 value: 'from=now-1h&to=now'
66 name: this.i18n('Last 3 hours'),
67 value: 'from=now-3h&to=now'
70 name: this.i18n('Last 6 hours'),
71 value: 'from=now-6h&to=now'
74 name: this.i18n('Last 12 hours'),
75 value: 'from=now-12h&to=now'
78 name: this.i18n('Last 24 hours'),
79 value: 'from=now-24h&to=now'
82 name: this.i18n('Yesterday'),
83 value: 'from=now-1d%2Fd&to=now-1d%2Fd'
86 name: this.i18n('Today'),
87 value: 'from=now%2Fd&to=now%2Fd'
90 name: this.i18n('Today so far'),
91 value: 'from=now%2Fd&to=now'
94 name: this.i18n('Day before yesterday'),
95 value: 'from=now-2d%2Fd&to=now-2d%2Fd'
98 name: this.i18n('Last 2 days'),
99 value: 'from=now-2d&to=now'
102 name: this.i18n('This day last week'),
103 value: 'from=now-7d%2Fd&to=now-7d%2Fd'
106 name: this.i18n('Previous week'),
107 value: 'from=now-1w%2Fw&to=now-1w%2Fw'
110 name: this.i18n('This week'),
111 value: 'from=now%2Fw&to=now%2Fw'
114 name: this.i18n('This week so far'),
115 value: 'from=now%2Fw&to=now'
118 name: this.i18n('Last 7 days'),
119 value: 'from=now-7d&to=now'
122 name: this.i18n('Previous month'),
123 value: 'from=now-1M%2FM&to=now-1M%2FM'
126 name: this.i18n('This month'),
127 value: 'from=now%2FM&to=now%2FM'
130 name: this.i18n('This month so far'),
131 value: 'from=now%2FM&to=now'
134 name: this.i18n('Last 30 days'),
135 value: 'from=now-30d&to=now'
138 name: this.i18n('Last 90 days'),
139 value: 'from=now-90d&to=now'
142 name: this.i18n('Last 6 months'),
143 value: 'from=now-6M&to=now'
146 name: this.i18n('Last 1 year'),
147 value: 'from=now-1y&to=now'
150 name: this.i18n('Previous year'),
151 value: 'from=now-1y%2Fy&to=now-1y%2Fy'
154 name: this.i18n('This year'),
155 value: 'from=now%2Fy&to=now%2Fy'
158 name: this.i18n('This year so far'),
159 value: 'from=now%2Fy&to=now'
162 name: this.i18n('Last 2 years'),
163 value: 'from=now-2y&to=now'
166 name: this.i18n('Last 5 years'),
167 value: 'from=now-5y&to=now'
173 this.time = this.DEFAULT_TIME;
177 three: 'grafana_three'
180 const subs = this.summaryService.subscribe((summary: any) => {
185 const releaseName = this.cephReleaseNamePipe.transform(summary.version);
187 `http://docs.ceph.com/docs/${releaseName}/mgr/dashboard/` +
188 `#enabling-the-embedding-of-grafana-dashboards`;
194 this.settingsService.ifSettingConfigured('api/grafana/url', (url) => {
195 this.grafanaExist = true;
196 this.loading = false;
197 this.baseUrl = url + '/d/';
200 this.panelStyle = this.styles[this.grafanaStyle];
205 .validateGrafanaDashboardUrl(this.uid)
206 .subscribe((data: any) => (this.dashboardExist = data === 200));
216 this.grafanaSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
219 onTimepickerChange() {
220 if (this.grafanaExist) {
226 this.time = this.DEFAULT_TIME;
227 if (this.grafanaExist) {
233 if (this.grafanaExist) {