chartjs-plugin-datasource-prometheus 是一个chartjs 的扩展，目前比较简单，只支持line图表，但是理念上好多可以借鉴
环境准备
- docker-compose 文件
version: "3"
services:
prometheus:
image: prom/prometheus
volumes:
- "./prometheus.yml:/etc/prometheus/prometheus.yml"
command:
- --config.file=/etc/prometheus/prometheus.yml
- --storage.tsdb.path=/prometheus
- --web.console.libraries=/usr/share/prometheus/console_libraries
- --web.console.templates=/usr/share/prometheus/consoles
- --web.cors.origin=.*
ports:
- "9090:9090"
mysql-exporter:
image: prom/mysqld-exporter
ports:
- "9104:9104"
environment:
- "DATA_SOURCE_NAME=root:dalongrong@(mysql:3306)/"
grafana:
image: grafana/grafana
ports:
- "3000:3000"
gogs:
image: gogs/gogs
ports:
- "10022:22"
- "10080:3000"
mysql:
image: mysql:5.7.16
ports:
- 3306:3306
command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
environment:
MYSQL_ROOT_PASSWORD: dalongrong
MYSQL_DATABASE: gogs
MYSQL_USER: gogs
MYSQL_PASSWORD: dalongrong
TZ: Asia/Shanghai
- promethues 配置
prometheus.yml 文件
scrape_configs:
- job_name: mysql
metrics_path: /metrics
scrape_interval: 10s
scrape_timeout: 10s
static_configs:
- targets: ['mysql-exporter:9104']
- web
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="updateBtn">Update</button>
<div style="width: 500px; height: 400px;">
<canvas id="myChart"></canvas>
<canvas id="myChart2"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource-prometheus/dist/chartjs-plugin-datasource-prometheus.umd.min.js"></script>
<script src="main.js"></script>
</body>
</html>
mian.js
var ctx = document.getElementById('myChart').getContext('2d');
var ctx2 = document.getElementById('myChart2').getContext('2d');
const query = 'sum by (job) (mysql_global_status_buffer_pool_pages)';
const query2 = 'sum by (job,state) (mysql_global_status_buffer_pool_pages)';
// const query = 'node_load1';
// // absolute
// const start = new Date(new Date().getTime() - (60 * 60 * 1000));
// const end = new Date();
// relative
const start = -30 * 60 * 1000;
const end = 0; // now
var myChart = new Chart(ctx, {
type: 'line',
data: {},
options: {
scales: {},
plugins: {
'datasource-prometheus': {
prometheus: {
endpoint: "http://localhost:9090/",
},
query: query,
timeRange: {
type: 'relative',
start: start,
end: end,
msUpdateInterval: 5 * 1000,
},
},
},
},
plugins: [
ChartDatasourcePrometheusPlugin,
],
});
var myChart2 = new Chart(ctx2, {
type: 'line',
data: {},
options: {
scales: {},
plugins: {
'datasource-prometheus': {
prometheus: {
endpoint: "http://localhost:9090/",
},
query: query2,
timeRange: {
type: 'relative',
start: start,
end: end,
msUpdateInterval: 5 * 1000,
},
},
},
},
plugins: [
ChartDatasourcePrometheusPlugin,
],
});
document.getElementById('updateBtn').addEventListener('click', () => {
myChart.update();
});
启动&&效果
- 启动
docker-compose up -d
- 效果
说明
chartjs-plugin-datasource-prometheus 功能很简单，但是对于数据展示是一个不错的借鉴，同时grafana 也是很强大的，我们
可以参考此扩展基于prometheus 的metrics展示，实际上一种比较好的实现是基于graphql2chartjs实现展示（api 是graphql）
对于api 我们可以使用swagger2graphql 以及graphql mesh 集成rest api，然后就可以实现更强大的数据展示了
参考资料
https://github.com/samber/chartjs-plugin-datasource-prometheus