-
-
Notifications
You must be signed in to change notification settings - Fork 14
/
main.js
73 lines (64 loc) 路 2.65 KB
/
main.js
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
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 btn = document.querySelector('form#refresh-form button');
const ctx = document.querySelector('#myChart canvas').getContext('2d');
endpointInput.value = 'http://demo.robustperception.io:9090/';
queryInput.value = 'sum by (job) (go_gc_duration_seconds)';
// queryInput.value = 'go_memstats_heap_objects';
// queryInput.value = 'node_load1';
// // absolute
// const start = new Date(new Date().getTime() - (60 * 60 * 1000));
// const end = new Date();
// relative
const start = -1 * 60 * 60 * 1000;
const end = 0; // now
const myChart = new Chart(ctx, {
type: 'line',
plugins: [ChartDatasourcePrometheusPlugin],
options: {
animation: {
duration: 0,
},
scales: {},
plugins: {
'datasource-prometheus': {
prometheus: {
endpoint: getEndpoint(),
},
// query: ['node_load1', 'node_load5', 'node_load15'],
query: queryInput.value,
// query: customReq,
timeRange: {
type: 'relative',
start: start,
end: end,
// msUpdateInterval: 2000,
},
},
},
},
});
function customReq(start, end, step) {
const url = `http://demo.robustperception.io:9090/api/v1/query_range?query=${encodeURIComponent(queryInput.value)}&start=${start.getTime() / 1000}&end=${end.getTime() / 1000}&step=${step}`;
const proxiedUrl = `https://cors-anywhere-chartjs-demo.herokuapp.com/${url}`;
return fetch(proxiedUrl)
.then(response => response.json())
.then(response => response['data']);
}
function getEndpoint() {
// demo.robustperception.io does not support HTTPS
// but Github Pages use HTTPS
// then we need this bullshit to prevent requests to insecure endpoint
// https://github.com/RobustPerception/demo_prometheus_ansible/issues/5
if (endpointInput.value == 'http://demo.robustperception.io:9090/')
return 'https://cors-anywhere-chartjs-demo.herokuapp.com/' + endpointInput.value;
// return 'https://cors-anywhere.herokuapp.com/' + endpointInput.value;
return endpointInput.value;
}
form.addEventListener('submit', (event) => {
event.preventDefault();
myChart.options.plugins['datasource-prometheus'].prometheus.endpoint = getEndpoint();
myChart.options.plugins['datasource-prometheus'].query = queryInput.value;
myChart.update();
});