chartjs-plugin-datasource-prometheus 展示prometheus 数据

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

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

posted on 2020-05-01 23:05  荣锋亮  阅读(779)  评论(0)  编辑  收藏  举报

导航