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
| <div class="container">
<form id="refresh-form">
<input type="text" id="endpoint" placeholder="Prometheus endpoint">
<input type="text" id="query" placeholder="Prometheus query">
<!-- <input type="text" id="startval" placeholder="Start time"> -->
<select id="startval" >
<option value=-1000 >1s</option>
<option value=-10000 >10s</option>
<option value=-30000 >30s</option>
<option value=-300000 >5min</option>
<option value=-3600000 select="selected">1hr</option>
<option value=-86400000 >1j</option>
</select>
<button>Refresh</button>
</form>
</div>
<div id="myChart">
<canvas></canvas>
</div>
<br></br>
<script>
const form = document.querySelector('form#refresh-form');
const endpointInput = document.querySelector('form#refresh-form input#endpoint');
const queryInput = document.querySelector('form#refresh-form input#query');
const startInput = Number(document.querySelector('form#refresh-form input#startval'));
const test = document.querySelector('form#refresh-form select#startval');
const ctx = document.querySelector('#myChart canvas').getContext('2d');
alert("test = " + test);
endpointInput.value = 'http://192.168.1.80:9090/';
queryInput.value = 'sum by (job) (memory_usage_p)';
//startInput.value = '-10000';
const start = -1 * 60 * 60 * 100; //
const end = 0; // now
const step = 3;
const myChart = new Chart(ctx, {
type: 'line',
plugins: [ChartDatasourcePrometheusPlugin],
options: {
animation: {
duration: 0,
},
scales: {
y: {
suggestedMin: 0,
suggestedMax: 100
}
},
legend: {
display: true,
labels: {
color: 'rgb(255, 99, 132)',
}
},
plugins: {
subtitle: {
display: false,
text: 'Title of the Graph',
color: 'rgb(255, 99, 132)',
},
'datasource-prometheus': {
prometheus: {
endpoint: endpointInput.value,
},
//query: ['node_load1', 'node_load5', 'node_load15'],
query: queryInput.value,
timeRange: {
type: 'relative',
start: startInput,
end: end,
step: step,
msUpdateInterval: 10000,
},
drawActiveElementsOnTop: false,
tension: 0, // Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
fill: {
target: 'origin', // coloration under the line
above: 'rgb(255, 182, 182)', // Area will be red above the origin
below: 'rgb(0, 0, 0)', // And blue below the origin
},
},
},
},
});
var elt = document.querySelector('select');
elt.addEventListener('change', function () {
console.log('value => '+this.value);
myChart.options.plugins['datasource-prometheus'].timeRange.start = + this.value;
myChart.update();
})
form.addEventListener('submit', (event) => {
event.preventDefault();
myChart.options.plugins['datasource-prometheus'].prometheus.endpoint = endpointInput.value;
myChart.options.plugins['datasource-prometheus'].query = queryInput.value;
//myChart.options.plugins['datasource-prometheus'].timeRange.start = startInput;
alert(startInput);
myChart.update();
});
</script> |
