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

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

　　

　　在运维过程中，无论是监控还是报表，都会有一些通过邮件发送图表的需求，由于开源的 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（开发工具协议）感兴趣，可以参考:

　　准备环境环境版本

　　centos

　　7.6

　　node

　　14.3.0

　　cnpm

　　6.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.xz<br />vi /etc/profile#set for nodejsexport NODE_HOME=/opt/node-v14.3.0-linux-x64export PATH=$NODE_HOME/bin:$PATH<br />source /etc/profile<br />npm config set registry=http://registry.npm.taobao.orgnpm install -g cnpm --registry=https://registry.npm.taobao.org<br /># 截图存放位置mkdir /tmp/png/<br /># 项目位置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<br />*/<br />const nodemailer = require('nodemailer');<br />//定义您的邮件推送服务器let transporter = nodemailer.createTransport({ // 您的邮箱服务器地址 host: 'mail.exchangehost.com', port: 587, secure: false, auth: { user: 'yourEmail', //您的邮箱的账号 pass: 'yourPassword'//您的邮箱的密码 }, tls: { rejectUnauthorized: false }, });<br />function sendMymail(who,subject,title){ let mailOptions = { from: '"autoreport" ', //邮件来源 to: who, //邮件发送到哪里，多个邮箱使用逗号隔开 subject: subject, // 邮件主题 html: `${title}

报表1

cid:001

报表2

cid:002`, // html类型的邮件正文 attachments: [{ filename: '001.png',//附件名称 path: '/tmp/png/001.png', //附件的位置 cid: '001', //为附件添加一个引用名称 },{ filename: '002.png',//附件名称 path: '/tmp/png/002.png', //附件的位置 cid: '002', //为附件添加一个引用名称 }] };<br /> transporter.sendMail(mailOptions, (error, info) => { if (error) { return console.log(error); } console.log('Message %s sent: %s', info.messageId, info.response); });}<br />//测试用//sendMymail('zuoguocai@126.com','每周报表','OpenStack 运营报表')<br />// 自定义发邮件模块，供引入exports.sendMymail = sendMymail;<br />// 作为引入模块使用//const sendModule = require('./mailPush.js');//sendModule.sendMymail('zuoguocai@126.com','每周报表','OpenStack 运营报表');

　　puppeteer 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具，很适合在Linux 字符终端使用，不需要在Linux 上安装桌面工具。但需要在 Linux 中安装中文字体，如仿宋字体，避免在截图中出现乱码。说到字体，中文字体其实有很多，比如方正的徐静蕾体，adoble 思源字体。字体大家可以从网络上下载，阿里免费的可商用普惠字体，下载链接

　　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/usr/local/share/fonts/chinese<br />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*/<br />// 发送函数function sendPicture(){ // 引入自定义发邮件模块 const sendModule = require('./mailPush.js'); // 同时发送到多个邮箱,用逗号隔开 sendModule.sendMymail('guocai.zuo@gmail.com,zuoguocai@126.com','每周报表','^_^ OpenStack 监控报表');}<br />// 截图函数function getPicture(){<br /> const puppeteer = require('puppeteer'); //模拟登陆，grafana 登陆的用户名和密码 const account = `zuoguocai`; const password = `xxxxxx`;<br /> (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' });<br /> //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'});<br /> // 替换为您的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'});<br /> await browser.close();<br /> //调用发送函数 await sendPicture();})();}<br />// 调用定位并截图函数getPicture()

　　源码地址:

　　测试发送效果

　　node getPicture.js

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

　　关于定时发送和 grafana 时间范围选取时间选取范围直接可以拼接到grafana的url里，这块比较简单。定时任务调度需要自己写，或者使用 gocron 的定时任务来做。gocron 项目地址：如图3

　　

　　不止于此puppeteer 很强大，可以用于前端自动化测试，并且不局限于生成截图，还有pdf等，这里只是很小一部分内容，大家可以去探索，我这里只是一种思路，代码写的并不好，大家可以进行扩展，比如截取kibana等的图表，增加异常处理，对图片cid进行再次封装，放到对象存储里，工具集成到运维管理平台里，供业务相关方订阅。作者简介：左国才，VIPKID运维工程师，笔名icai，主要研究Linux操作系统，数据库，云计算领域相关技术, 热爱开源技术，平时喜欢阅读高效运维公众号。近期好文：“高效运维”公众号诚邀广大技术人员投稿，