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> |
Partager