53 lines
1.7 KiB
HTML
53 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>Prometheus dashboard</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Prometheus dashboard</h1>
|
|
<div>
|
|
<label>Metric: <input id="metric" value="{{ default_metric }}"/></label>
|
|
<button id="reload">Reload</button>
|
|
<a id="pdfLink" href="/report/pdf/?metric={{ default_metric }}" target="_blank">Download PDF</a>
|
|
</div>
|
|
|
|
<canvas id="chart" width="900" height="400"></canvas>
|
|
|
|
<script>
|
|
const ctx = document.getElementById('chart').getContext('2d');
|
|
let chart = null;
|
|
async function loadData() {
|
|
const metric = document.getElementById('metric').value;
|
|
const res = await fetch(`/api/metrics/?metric=${encodeURIComponent(metric)}`);
|
|
const payload = await res.json();
|
|
const labels = (payload.labels || []).map(ts => new Date(ts));
|
|
const datasets = (payload.datasets || []).map((d, i) => ({
|
|
label: d.label,
|
|
data: d.data.map((v, idx) => ({x: labels[idx], y: v})),
|
|
fill: false,
|
|
// Chart.js will auto pick colors
|
|
}));
|
|
if (chart) chart.destroy();
|
|
chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: { datasets },
|
|
options: {
|
|
parsing: false,
|
|
scales: {
|
|
x: { type: 'time', time: { unit: 'minute' } },
|
|
y: { beginAtZero: true }
|
|
}
|
|
}
|
|
});
|
|
// update PDF link
|
|
document.getElementById('pdfLink').href = `/report/pdf/?metric=${encodeURIComponent(metric)}`;
|
|
}
|
|
|
|
document.getElementById('reload').addEventListener('click', loadData);
|
|
loadData();
|
|
</script>
|
|
</body>
|
|
</html>
|