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
|
/* Icinga Web 2 | (c) 2022 Icinga GmbH | GPLv2+ */
(function(Icinga) {
"use strict";
class Graphite extends Icinga.EventListener {
constructor(icinga) {
super(icinga);
this._colorParams = null;
this._resizeTimer = null;
this._onResizeBound = this.onResize.bind(this);
this._onModeChangeBound = this.onModeChange.bind(this);
this._mediaQueryList = window.matchMedia('(prefers-color-scheme: light)');
this.on('css-reloaded', 'head', this.onCssReloaded, this);
this.on('rendered', '#main > .container', this.onRendered, this);
window.addEventListener('resize', this._onResizeBound, { passive: true });
this._mediaQueryList.addEventListener('change', this._onModeChangeBound, { passive: true });
}
get colorParams() {
if (this._colorParams === null) {
let colorRegistry = document.querySelector('.graphite-graph-color-registry');
let registryStyle = window.getComputedStyle(colorRegistry);
this._colorParams = {
bgcolor: this.rgbToHex(registryStyle.backgroundColor, 'black'),
fgcolor: this.rgbToHex(registryStyle.color, 'white'),
majorGridLineColor: this.rgbToHex(registryStyle.borderTopColor, '0000003F'),
minorGridLineColor: this.rgbToHex(registryStyle.borderBottomColor, 'black')
};
}
return this._colorParams;
}
unbind(emitter) {
super.unbind(emitter);
window.removeEventListener('resize', this._onResizeBound);
this._mediaQueryList.removeEventListener('change', this._onModeChangeBound);
this._onResizeBound = null;
this._onModeChangeBound = null;
this._mediaQueryList = null;
}
onCssReloaded(event) {
let _this = event.data.self;
_this._colorParams = null;
_this.updateImages(document);
}
onRendered(event, autorefresh, scripted, autosubmit) {
let _this = event.data.self;
let container = event.target;
_this.updateImages(container);
}
onResize() {
// Images are not updated instantly, the user might not yet be finished resizing the window
if (this._resizeTimer !== null) {
clearTimeout(this._resizeTimer);
}
this._resizeTimer = setTimeout(() => this.updateImages(document), 200);
}
onModeChange() {
this._colorParams = null;
this.updateImages(document);
}
updateImages(container) {
container.querySelectorAll('img.graphiteImg[data-actualimageurl]').forEach(img => {
let params = { ...this.colorParams }; // Theming ftw!
params.r = (new Date()).getTime(); // To bypass the browser cache
params.width = img.scrollWidth; // It's either fixed or dependent on parent width
img.src = this.icinga.utils.addUrlParams(img.dataset.actualimageurl, params);
});
}
rgbToHex(rgb, def) {
if (! rgb) {
return def;
}
let match = rgb.match(/rgba?\((\d+), (\d+), (\d+)(?:, ([\d.]+))?\)/);
if (match === null) {
return def;
}
let alpha = '';
if (typeof match[4] !== 'undefined') {
alpha = Math.round(parseFloat(match[4]) * 255).toString(16);
}
return parseInt(match[1], 10).toString(16).padStart(2, '0')
+ parseInt(match[2], 10).toString(16).padStart(2, '0')
+ parseInt(match[3], 10).toString(16).padStart(2, '0')
+ alpha;
}
}
Icinga.Behaviors.Graphite = Graphite;
})(Icinga);
|
