chartjs-plugin-datasource-prometheus 展示prometheus 数据
2021-03-13 23:29
标签：html file roo export out head doc 参考资料 view chartjs-plugin-datasource-prometheus 是一个chartjs 的扩展，目前比较简单，只支持line图表，但是理念上好多可以借鉴 mian.js chartjs-plugin-datasource-prometheus 功能很简单，但是对于数据展示是一个不错的借鉴，同时grafana 也是很强大的，我们 https://github.com/samber/chartjs-plugin-datasource-prometheus chartjs-plugin-datasource-prometheus 展示prometheus 数据 标签：html file roo export out head doc 参考资料 view 原文地址：https://www.cnblogs.com/rongfengliang/p/12815293.html环境准备
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
prometheus.yml 文件scrape_configs:
- job_name: mysql
metrics_path: /metrics
scrape_interval: 10s
scrape_timeout: 10s
static_configs:
- targets: [‘mysql-exporter:9104‘]
index.htmlDOCTYPE 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/chart.js@2.9.3/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>
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
说明
可以参考此扩展基于prometheus 的metrics展示，实际上一种比较好的实现是基于graphql2chartjs实现展示（api 是graphql）
对于api 我们可以使用swagger2graphql 以及graphql mesh 集成rest api，然后就可以实现更强大的数据展示了参考资料
文章标题：chartjs-plugin-datasource-prometheus 展示prometheus 数据
文章链接：http://soscw.com/index.php/essay/64318.html