diff options
Diffstat (limited to 'src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts')
-rw-r--r-- | src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts | 201 |
1 files changed, 201 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts new file mode 100644 index 000000000..2815160ab --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts @@ -0,0 +1,201 @@ +import { Component, Input, OnChanges, OnInit } from '@angular/core'; +import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; + +import { SettingsService } from '~/app/shared/api/settings.service'; +import { Icons } from '~/app/shared/enum/icons.enum'; + +@Component({ + selector: 'cd-grafana', + templateUrl: './grafana.component.html', + styleUrls: ['./grafana.component.scss'] +}) +export class GrafanaComponent implements OnInit, OnChanges { + grafanaSrc: SafeUrl; + url: string; + protocol: string; + host: string; + port: number; + baseUrl: any; + panelStyle: any; + grafanaExist = false; + mode = '&kiosk'; + datasource = 'Dashboard1'; + loading = true; + styles: Record<string, string> = {}; + dashboardExist = true; + showMessage = false; + time: string; + grafanaTimes: any; + icons = Icons; + readonly DEFAULT_TIME: string = 'from=now-1h&to=now'; + + @Input() + grafanaPath: string; + @Input() + grafanaStyle: string; + @Input() + uid: string; + + constructor(private sanitizer: DomSanitizer, private settingsService: SettingsService) { + this.grafanaTimes = [ + { + name: $localize`Last 5 minutes`, + value: 'from=now-5m&to=now' + }, + { + name: $localize`Last 15 minutes`, + value: 'from=now-15m&to=now' + }, + { + name: $localize`Last 30 minutes`, + value: 'from=now-30m&to=now' + }, + { + name: $localize`Last 1 hour (Default)`, + value: 'from=now-1h&to=now' + }, + { + name: $localize`Last 3 hours`, + value: 'from=now-3h&to=now' + }, + { + name: $localize`Last 6 hours`, + value: 'from=now-6h&to=now' + }, + { + name: $localize`Last 12 hours`, + value: 'from=now-12h&to=now' + }, + { + name: $localize`Last 24 hours`, + value: 'from=now-24h&to=now' + }, + { + name: $localize`Yesterday`, + value: 'from=now-1d%2Fd&to=now-1d%2Fd' + }, + { + name: $localize`Today so far`, + value: 'from=now%2Fd&to=now' + }, + { + name: $localize`Day before yesterday`, + value: 'from=now-2d%2Fd&to=now-2d%2Fd' + }, + { + name: $localize`Last 2 days`, + value: 'from=now-2d&to=now' + }, + { + name: $localize`This day last week`, + value: 'from=now-7d%2Fd&to=now-7d%2Fd' + }, + { + name: $localize`Previous week`, + value: 'from=now-1w%2Fw&to=now-1w%2Fw' + }, + { + name: $localize`This week so far`, + value: 'from=now%2Fw&to=now' + }, + { + name: $localize`Last 7 days`, + value: 'from=now-7d&to=now' + }, + { + name: $localize`Previous month`, + value: 'from=now-1M%2FM&to=now-1M%2FM' + }, + { + name: $localize`This month so far`, + value: 'from=now%2FM&to=now' + }, + { + name: $localize`Last 30 days`, + value: 'from=now-30d&to=now' + }, + { + name: $localize`Last 90 days`, + value: 'from=now-90d&to=now' + }, + { + name: $localize`Last 6 months`, + value: 'from=now-6M&to=now' + }, + { + name: $localize`Last 1 year`, + value: 'from=now-1y&to=now' + }, + { + name: $localize`Previous year`, + value: 'from=now-1y%2Fy&to=now-1y%2Fy' + }, + { + name: $localize`This year so far`, + value: 'from=now%2Fy&to=now' + }, + { + name: $localize`Last 2 years`, + value: 'from=now-2y&to=now' + }, + { + name: $localize`Last 5 years`, + value: 'from=now-5y&to=now' + } + ]; + } + + ngOnInit() { + this.time = this.DEFAULT_TIME; + this.styles = { + one: 'grafana_one', + two: 'grafana_two', + three: 'grafana_three', + four: 'grafana_four' + }; + + this.settingsService.ifSettingConfigured('api/grafana/url', (url) => { + this.grafanaExist = true; + this.loading = false; + this.baseUrl = url + '/d/'; + this.getFrame(); + }); + this.panelStyle = this.styles[this.grafanaStyle]; + } + + getFrame() { + this.settingsService + .validateGrafanaDashboardUrl(this.uid) + .subscribe((data: any) => (this.dashboardExist = data === 200)); + this.url = + this.baseUrl + + this.uid + + '/' + + this.grafanaPath + + '&refresh=2s' + + `&var-datasource=${this.datasource}` + + this.mode + + '&' + + this.time; + this.grafanaSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.url); + } + + onTimepickerChange() { + if (this.grafanaExist) { + this.getFrame(); + } + } + + reset() { + this.time = this.DEFAULT_TIME; + if (this.grafanaExist) { + this.getFrame(); + } + } + + ngOnChanges() { + if (this.grafanaExist) { + this.getFrame(); + } + } +} |