百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

运维的报表之路,用 node.js 轻松发送 grafana 报表

liuian 2025-05-05 17:01 32 浏览



在运维过程中,无论是监控还是报表,都会有一些通过邮件发送图表的需求,由于开源的 zabbix,grafana 和 kibana 等并不完全具有“想发送哪儿就发送哪儿”的图片生成功能,在 grafana 中我们也考虑了一些其他方法,比如 grafana webdav 和 grafana-image-renderer 的方案,但并不能满足我们的需求。

我们通过 nodejs 的模块 puppeteer + nodemailer 实现了grafana pannel 图表的邮件报表功能,基本满足了我们在自动化报表这块的需求。

原理

Puppeteer 是一个提供了高级 API ,通过DevTools Protocol(开发工具协议)控制headless chrome 或 chromium 的 Node.js 库,默认的运行模式是无头的,但是可以配置成非无头的模式。

无头浏览器是一种没有操作界面的浏览器,诸如selenium、PhantomJS、Puppeteer 等,常用于网页自动化测试,利用其提供的API,可以自动执行操作指令,它是测试利器,也是爬虫神器 。

Puppeteer 是其中比较优秀的一个。

Puppeteer 通过程序化地操作浏览器,与其进行模拟交互(例如点击、打字、导航等等)来控制要抓取的网页,通常也能获取网页的 DOM 或 HTML,因此也可以获取网页数据,对于一些动态网站来说,像 grafana 图表,JS 动态渲染的数据通常不能轻松获取,而自动化测试工具Puppeteer则可以轻松的做到,因为它是将 HTML 输入浏览器里运行的。

如果大家对 DevTools Protocol(开发工具协议)感兴趣,可以参考:
https://chromedevtools.github.io/devtools-protocol/

准备环境

环境版本
centos7.6node14.3.0cnpm6.1.1























cd /optwget https://cdn.npm.taobao.org/dist/node/v14.3.0/node-v14.3.0-linux-x64.tar.xztar -xf node-v14.3.0-linux-x64.tar.xzvi /etc/profile#set for nodejsexport NODE_HOME=/opt/node-v14.3.0-linux-x64export PATH=$NODE_HOME/bin:$PATHsource /etc/profilenpm config set registry=http://registry.npm.taobao.orgnpm install -g cnpm --registry=https://registry.npm.taobao.org# 截图存放位置mkdir  /tmp/png/# 项目位置mkdir  /opt/GrafanaSnapProjectcd /opt/GrafanaSnapProjectcnpm i --save puppeteercnpm i --save nodemailer

源码逻辑

为了使逻辑更清晰,我把发邮件和获取截图分成两个模块 mailPush.js 和 getPicture.js

发邮件模块 mailPush.js 这块需要注意为每一个附件添加一个引用名称,便于把截图引用到正文里。

在nodejs 里使用${str1}${str2} hello进行字符串拼接。


























































/*function: send pictures in mail's  html content via nodejsauthor: zuoguocai@126.com*/const nodemailer = require('nodemailer');//定义您的邮件推送服务器let transporter = nodemailer.createTransport({        // 您的邮箱服务器地址        host: 'mail.exchangehost.com',        port: 587,        secure: false,        auth: {        user: 'yourEmail', //您的邮箱的账号        pass: 'yourPassword'//您的邮箱的密码        },        tls: {             rejectUnauthorized: false        },    });function sendMymail(who,subject,title){        let mailOptions = {            from: '"autoreport" <report@exchangehost.com>', //邮件来源            to: who, //邮件发送到哪里,多个邮箱使用逗号隔开            subject: subject, // 邮件主题            html: `<h2 align="center" style="color:red;font-size:24px">${title}</h2><br> <h5 align="center" style="color:green;font-size:20px">报表1</h5><br> <img src="cid:001"/>  <br><h5 align="center" style="color:green;font-size:20px">报表2</h5> <br> <img src="cid:002"/>`, // html类型的邮件正文            attachments: [{                filename: '001.png',//附件名称                path: '/tmp/png/001.png', //附件的位置                cid: '001', //为附件添加一个引用名称            },{                filename: '002.png',//附件名称                path: '/tmp/png/002.png', //附件的位置                cid: '002', //为附件添加一个引用名称            }]        };        transporter.sendMail(mailOptions, (error, info) => {            if (error) {                 return console.log(error);            }            console.log('Message %s sent: %s', info.messageId, info.response);        });}//测试用//sendMymail('zuoguocai@126.com','每周报表','OpenStack 运营报表')// 自定义发邮件模块,供引入exports.sendMymail = sendMymail;// 作为引入模块使用//const sendModule = require('./mailPush.js');//sendModule.sendMymail('zuoguocai@126.com','每周报表','OpenStack 运营报表');

puppeteer 是 Google Chrome 团队官方的无界面(Headless)Chrome 工具,很适合在Linux 字符终端使用,不需要在Linux 上安装桌面工具。

但需要在 Linux 中安装中文字体,如仿宋字体,避免在截图中出现乱码。

说到字体,中文字体其实有很多,比如方正的徐静蕾体,adoble 思源字体。

字体大家可以从网络上下载,阿里免费的可商用普惠字体,下载链接
https://alibabafont.taobao.com/

Linux 中安装中文字体

















yum -y install fontconfigcd /usr/share/fontsmkdir chinesecd chinese/使用lrzsz 上传字体,如仿宋体chmod -R 775 /usr/share/fonts/chineseyum -y install ttmkfdirttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dirvi /etc/fonts/fonts.conf<!-- Font directory list --><dir>/usr/local/share/fonts/chinese</dir>fc-list :lang=zh/usr/share/fonts/bitmap/fangsongti24.pcf.gz: Fangsong ti:style=Regular/usr/share/fonts/chinese/simfang.ttf: FangSong_GB2312:style=Regular/usr/share/fonts/bitmap/fangsongti16.pcf.gz: Fangsong ti:style=Regular

getPicture.js 模块主要用来模拟登陆,模拟操作。这里需要对用户名和密码参数化,在写这块逻辑时大家可以参考网络上 puppeteer 文档和一些案例。

定位按钮和点击按钮这块比较繁琐和复杂,大家可以借助工具 puppeteer recorder 插件来辅助生成代码。

本机电脑 chrome 扩展程序里安装 puppeteer recorder 插件,这里我们主要通过使用chrome 插件 puppeteer recorder 对 grafana 前端 CSS 选择器定位,模拟点击,确定元素位置,生成一些辅助代码。使用习惯跟 JMeter,LoadRunner 很像。

如图1


我们分析一下 grafana 某个 dashboard ,都是有好多 pannel 组成的,点击某个 pannel 的下拉菜单,点击 view 可以预览这个 pannel 的图表情况。这样我们就可以使用工具单独录制这段操作的代码,放到我们整个项目里。

如图2




































































/*function:  snapshot  grafana pannel pictures via puppeteerauthor: zuoguocai@126.com*///  发送函数function sendPicture(){        // 引入自定义发邮件模块        const sendModule = require('./mailPush.js');        // 同时发送到多个邮箱,用逗号隔开        sendModule.sendMymail('guocai.zuo@gmail.com,zuoguocai@126.com','每周报表','^_^ OpenStack 监控报表');}// 截图函数function getPicture(){        const puppeteer = require('puppeteer');        //模拟登陆,grafana 登陆的用户名和密码        const account = `zuoguocai`;        const password = `xxxxxx`;    (async () => {      const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});      const page = await browser.newPage();      await page.setViewport({width:1827, height:979});      await page.goto('https://yourgrafana.com');      await page.type('input[type="text"]', account);      await page.type('#inputPassword', password);      await page.click('button[type="submit"]');      await page.waitForNavigation({        waitUntil: 'load'      });      //await page.waitFor(1000);    // 替换为您的grafana dashboard的 url      await page.goto('https://yourgrafana.com/d/-a3b-ddWz/hu-lian-wang-chu-kou-hui-zong?refresh=30s&orgId=1');      await page.waitFor(1000);    // 替换为您的grafana dashboard  panel 的编号,我这里是19      await page.waitForSelector('#panel-19 > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-editor-container:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-container:nth-child(1) .panel-menu-container:nth-child(3) > .fa:nth-child(1)')      // 替换为您的grafana dashboard  panel 的编号,我这里是19        await page.click('#panel-19 > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-editor-container:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-container:nth-child(1) .panel-menu-container:nth-child(3) > .fa:nth-child(1)')      await page.waitForSelector('.open > .dropdown-menu > li:nth-child(1) > a > .dropdown-item-text')      await page.click('.open > .dropdown-menu > li:nth-child(1) > a > .dropdown-item-text')      await page.waitFor(1000);      await page.screenshot({path: '/tmp/png/001.png'});     // 替换为您的grafana dashboard的 url      await page.goto('https://yourgrafana.com/d/-a3b-ddWz/hu-lian-wang-chu-kou-hui-zong?refresh=30s&orgId=1');      await page.waitFor(1000);     // 替换为您的grafana dashboard  panel 的编号,我这里是2      await page.waitForSelector('#panel-2 > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-editor-container:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-container:nth-child(1) .panel-menu-container:nth-child(3) > .fa:nth-child(1)')     // 替换为您的grafana dashboard  panel 的编号,我这里是2        await page.click('#panel-2 > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-editor-container:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-height-helper:nth-child(1) > .panel-container:nth-child(1) .panel-menu-container:nth-child(3) > .fa:nth-child(1)')      await page.waitForSelector('.open > .dropdown-menu > li:nth-child(1) > a > .dropdown-item-text')      await page.click('.open > .dropdown-menu > li:nth-child(1) > a > .dropdown-item-text')      await page.waitFor(1000);      await page.screenshot({path: '/tmp/png/002.png'});      await browser.close();      //调用发送函数      await sendPicture();})();}// 调用定位并截图函数getPicture()

源码地址:

https://github.com/ZuoGuocai/GrafanaSnapProject

测试发送效果

node getPicture.js

打开邮件客户端,查看是否收到邮件报表。

关于定时发送和 grafana 时间范围选取

时间选取范围直接可以拼接到grafana的url里,这块比较简单。定时任务调度需要自己写,或者使用 gocron 的定时任务来做。

gocron 项目地址:

https://github.com/ouqiang/gocron

如图3

不止于此

puppeteer 很强大,可以用于前端自动化测试,并且不局限于生成截图,还有pdf等,这里只是很小一部分内容,大家可以去探索,我这里只是一种思路,代码写的并不好,大家可以进行扩展,比如截取kibana等的图表,增加异常处理,对图片cid进行再次封装,放到对象存储里,工具集成到运维管理平台里,供业务相关方订阅。

作者简介:左国才,VIPKID运维工程师,笔名icai,主要研究Linux操作系统,数据库,云计算领域相关技术, 热爱开源技术,平时喜欢阅读高效运维公众号。

相关推荐

eino v0.4.5版本深度解析:接口类型处理优化与错误机制全面升级

近日,eino框架发布了v0.4.5版本,该版本在错误处理、类型安全、流处理机制以及代理配置注释等方面进行了多项优化与修复。本次更新共包含6个提交,涉及10个文件的修改,由2位贡献者共同完成。本文将详...

SpringBoot异常处理_springboot异常注解

在SpringBoot中,异常处理是构建健壮、可维护Web应用的关键部分。良好的异常处理机制可以统一返回格式、提升用户体验、便于调试和监控。以下是SpringBoot中处理异常的完整指...

Jenkins运维之路(Jenkins流水线改造Day02-1-容器项目)

这回对线上容器服务器的流水线进行了一定的改造来满足目前线上的需求,还是会将所有的自动化脚本都放置到代码库中统一管理,我感觉一章不一定写的完,所以先给标题加了个-1,话不多说开干1.本次流水线的流程设计...

告别宕机!零基础搭建服务器监控告警系统!小白也能学会!

前言本文将带你从零开始,一步步搭建一个完整的服务器指标监控与邮件告警系统,使用的技术栈均为业界主流、稳定可靠的开源工具:Prometheus:云原生时代的监控王者,擅长指标采集与告警规则定义Node_...

httprunner实战接口测试笔记,拿走不谢

每天进步一点点,关注我们哦,每天分享测试技术文章本文章出自【码同学软件测试】码同学公众号:自动化软件测试码同学抖音号:小码哥聊软件测试01开始安装跟创建项目pipinstallhttprunne...

基于JMeter的性能压测平台实现_jmeter压测方案

这篇文章已经是两年前写的,短短两年时间,JMeter开源应用技术的发展已经是翻天覆地,最初由github开源项目zyanycall/stressTestPlatform形成的这款测试工具也开始慢...

12K+ Star!新一代的开源持续测试工具!

大家好,我是Java陈序员。在企业软件研发的持续交付流程中,测试环节往往是影响效率的关键瓶颈,用例管理混乱、接口调试复杂、团队协作不畅、与DevOps流程脱节等问题都能影响软件交付。今天,给大家...

Spring Boot3 中分库分表之后如何合并查询

在当今互联网应用飞速发展的时代,数据量呈爆发式增长。对于互联网软件开发人员而言,如何高效管理和查询海量数据成为了一项关键挑战。分库分表技术应运而生,它能有效缓解单库单表数据量过大带来的性能瓶颈。而在...

离线在docker镜像方式部署ragflow0.17.2

经常项目上会出现不能连外网的情况,要怎么使用ragflow镜像部署呢,这里提供详细的步骤。1、下载基础镜像根据docker-compose-base.yml及docker-compose.yml中的i...

看,教你手写一个最简单的SpringBoot Starter

何为Starter?想必大家都使用过SpringBoot,在SpringBoot项目中,使用最多的无非就是各种各样的Starter了。那何为Starter呢?你可以理解为一个可拔插式...

《群星stellaris》军事基地跳出怎么办?解决方法一览

《群星stellaris》军事基地跳出情况有些小伙伴出现过这种情况,究竟该怎么解决呢?玩家“gmjdadk”分享的自己的解决方法,看看能不能解决。我用英文原版、德语、法语和俄语四个版本对比了一下,结果...

数据开发工具dbt手拉手教程-03.定义数据源模型

本章节介绍在dbt项目中,如何定义数据源模型。定义并引入数据源通过Extract和Load方式加载到仓库中的数据,可以使用dbt中的sources组件进行定义和描述。通过在dbt中将这些数据集(表)声...

docker compose 常用命令手册_docker-compose init

以下是DockerCompose常用命令手册,按生命周期管理、服务运维、构建配置、扩缩容、调试工具分类,附带参数解析、示例和关键说明,覆盖多容器编排核心场景:一、生命周期管理(核心命令...

RagFlow与DeepSeek R1本地知识库搭建详细步骤及代码实现

一、环境准备硬件要求独立显卡(建议NVIDIAGPU,8GB显存以上)内存16GB以上,推荐32GB(处理大规模文档时更高效)SSD硬盘(加速文档解析与检索)软件安装bash#必装组件Docker...

Docker Compose 配置更新指南_docker-compose配置

高效管理容器配置变更的最佳实践方法重启范围保留数据卷适用场景docker-composeup-d变更的服务常规配置更新--force-recreate指定/所有服务强制重建down→up流程...