]>
Commit | Line | Data |
---|---|---|
11fdf7f2 TL |
1 | import { Component, Input, OnChanges, OnInit } from '@angular/core'; |
2 | import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; | |
3 | ||
f67539c2 TL |
4 | import { SettingsService } from '~/app/shared/api/settings.service'; |
5 | import { Icons } from '~/app/shared/enum/icons.enum'; | |
11fdf7f2 TL |
6 | |
7 | @Component({ | |
8 | selector: 'cd-grafana', | |
9 | templateUrl: './grafana.component.html', | |
10 | styleUrls: ['./grafana.component.scss'] | |
11 | }) | |
12 | export class GrafanaComponent implements OnInit, OnChanges { | |
13 | grafanaSrc: SafeUrl; | |
14 | url: string; | |
15 | protocol: string; | |
16 | host: string; | |
17 | port: number; | |
18 | baseUrl: any; | |
19 | panelStyle: any; | |
20 | grafanaExist = false; | |
21 | mode = '&kiosk'; | |
b3b6e05e | 22 | datasource = 'Dashboard1'; |
11fdf7f2 | 23 | loading = true; |
9f95a23c | 24 | styles: Record<string, string> = {}; |
11fdf7f2 TL |
25 | dashboardExist = true; |
26 | time: string; | |
27 | grafanaTimes: any; | |
9f95a23c | 28 | icons = Icons; |
11fdf7f2 TL |
29 | readonly DEFAULT_TIME: string = 'from=now-1h&to=now'; |
30 | ||
31 | @Input() | |
32 | grafanaPath: string; | |
33 | @Input() | |
34 | grafanaStyle: string; | |
35 | @Input() | |
36 | uid: string; | |
37 | ||
f67539c2 | 38 | constructor(private sanitizer: DomSanitizer, private settingsService: SettingsService) { |
11fdf7f2 TL |
39 | this.grafanaTimes = [ |
40 | { | |
f67539c2 | 41 | name: $localize`Last 5 minutes`, |
11fdf7f2 TL |
42 | value: 'from=now-5m&to=now' |
43 | }, | |
44 | { | |
f67539c2 | 45 | name: $localize`Last 15 minutes`, |
11fdf7f2 TL |
46 | value: 'from=now-15m&to=now' |
47 | }, | |
48 | { | |
f67539c2 | 49 | name: $localize`Last 30 minutes`, |
11fdf7f2 TL |
50 | value: 'from=now-30m&to=now' |
51 | }, | |
52 | { | |
f67539c2 | 53 | name: $localize`Last 1 hour (Default)`, |
11fdf7f2 TL |
54 | value: 'from=now-1h&to=now' |
55 | }, | |
56 | { | |
f67539c2 | 57 | name: $localize`Last 3 hours`, |
11fdf7f2 TL |
58 | value: 'from=now-3h&to=now' |
59 | }, | |
60 | { | |
f67539c2 | 61 | name: $localize`Last 6 hours`, |
11fdf7f2 TL |
62 | value: 'from=now-6h&to=now' |
63 | }, | |
64 | { | |
f67539c2 | 65 | name: $localize`Last 12 hours`, |
11fdf7f2 TL |
66 | value: 'from=now-12h&to=now' |
67 | }, | |
68 | { | |
f67539c2 | 69 | name: $localize`Last 24 hours`, |
11fdf7f2 TL |
70 | value: 'from=now-24h&to=now' |
71 | }, | |
72 | { | |
f67539c2 | 73 | name: $localize`Yesterday`, |
11fdf7f2 TL |
74 | value: 'from=now-1d%2Fd&to=now-1d%2Fd' |
75 | }, | |
11fdf7f2 | 76 | { |
f67539c2 | 77 | name: $localize`Today so far`, |
11fdf7f2 TL |
78 | value: 'from=now%2Fd&to=now' |
79 | }, | |
80 | { | |
f67539c2 | 81 | name: $localize`Day before yesterday`, |
11fdf7f2 TL |
82 | value: 'from=now-2d%2Fd&to=now-2d%2Fd' |
83 | }, | |
84 | { | |
f67539c2 | 85 | name: $localize`Last 2 days`, |
11fdf7f2 TL |
86 | value: 'from=now-2d&to=now' |
87 | }, | |
88 | { | |
f67539c2 | 89 | name: $localize`This day last week`, |
11fdf7f2 TL |
90 | value: 'from=now-7d%2Fd&to=now-7d%2Fd' |
91 | }, | |
92 | { | |
f67539c2 | 93 | name: $localize`Previous week`, |
11fdf7f2 TL |
94 | value: 'from=now-1w%2Fw&to=now-1w%2Fw' |
95 | }, | |
11fdf7f2 | 96 | { |
f67539c2 | 97 | name: $localize`This week so far`, |
11fdf7f2 TL |
98 | value: 'from=now%2Fw&to=now' |
99 | }, | |
100 | { | |
f67539c2 | 101 | name: $localize`Last 7 days`, |
11fdf7f2 TL |
102 | value: 'from=now-7d&to=now' |
103 | }, | |
104 | { | |
f67539c2 | 105 | name: $localize`Previous month`, |
11fdf7f2 TL |
106 | value: 'from=now-1M%2FM&to=now-1M%2FM' |
107 | }, | |
11fdf7f2 | 108 | { |
f67539c2 | 109 | name: $localize`This month so far`, |
11fdf7f2 TL |
110 | value: 'from=now%2FM&to=now' |
111 | }, | |
112 | { | |
f67539c2 | 113 | name: $localize`Last 30 days`, |
11fdf7f2 TL |
114 | value: 'from=now-30d&to=now' |
115 | }, | |
116 | { | |
f67539c2 | 117 | name: $localize`Last 90 days`, |
11fdf7f2 TL |
118 | value: 'from=now-90d&to=now' |
119 | }, | |
120 | { | |
f67539c2 | 121 | name: $localize`Last 6 months`, |
11fdf7f2 TL |
122 | value: 'from=now-6M&to=now' |
123 | }, | |
124 | { | |
f67539c2 | 125 | name: $localize`Last 1 year`, |
11fdf7f2 TL |
126 | value: 'from=now-1y&to=now' |
127 | }, | |
128 | { | |
f67539c2 | 129 | name: $localize`Previous year`, |
11fdf7f2 TL |
130 | value: 'from=now-1y%2Fy&to=now-1y%2Fy' |
131 | }, | |
11fdf7f2 | 132 | { |
f67539c2 | 133 | name: $localize`This year so far`, |
11fdf7f2 TL |
134 | value: 'from=now%2Fy&to=now' |
135 | }, | |
136 | { | |
f67539c2 | 137 | name: $localize`Last 2 years`, |
11fdf7f2 TL |
138 | value: 'from=now-2y&to=now' |
139 | }, | |
140 | { | |
f67539c2 | 141 | name: $localize`Last 5 years`, |
11fdf7f2 TL |
142 | value: 'from=now-5y&to=now' |
143 | } | |
144 | ]; | |
145 | } | |
146 | ||
147 | ngOnInit() { | |
148 | this.time = this.DEFAULT_TIME; | |
149 | this.styles = { | |
150 | one: 'grafana_one', | |
151 | two: 'grafana_two', | |
f91f0fd5 TL |
152 | three: 'grafana_three', |
153 | four: 'grafana_four' | |
11fdf7f2 TL |
154 | }; |
155 | ||
11fdf7f2 TL |
156 | this.settingsService.ifSettingConfigured('api/grafana/url', (url) => { |
157 | this.grafanaExist = true; | |
158 | this.loading = false; | |
159 | this.baseUrl = url + '/d/'; | |
160 | this.getFrame(); | |
161 | }); | |
162 | this.panelStyle = this.styles[this.grafanaStyle]; | |
163 | } | |
164 | ||
165 | getFrame() { | |
166 | this.settingsService | |
167 | .validateGrafanaDashboardUrl(this.uid) | |
168 | .subscribe((data: any) => (this.dashboardExist = data === 200)); | |
169 | this.url = | |
170 | this.baseUrl + | |
171 | this.uid + | |
172 | '/' + | |
173 | this.grafanaPath + | |
174 | '&refresh=2s' + | |
b3b6e05e | 175 | `&var-datasource=${this.datasource}` + |
11fdf7f2 TL |
176 | this.mode + |
177 | '&' + | |
178 | this.time; | |
179 | this.grafanaSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.url); | |
180 | } | |
181 | ||
182 | onTimepickerChange() { | |
183 | if (this.grafanaExist) { | |
184 | this.getFrame(); | |
185 | } | |
186 | } | |
187 | ||
188 | reset() { | |
189 | this.time = this.DEFAULT_TIME; | |
190 | if (this.grafanaExist) { | |
191 | this.getFrame(); | |
192 | } | |
193 | } | |
194 | ||
195 | ngOnChanges() { | |
196 | if (this.grafanaExist) { | |
197 | this.getFrame(); | |
198 | } | |
199 | } | |
200 | } |