运维的报表之路，用 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（开发工具协议）感兴趣，可以参考:
https://chromedevtools.github.io/devtools-protocol/

准备环境

环境	版本
centos	7.6
node	14.3.0
cnpm	6.1.1

cd /opt
wget https://cdn.npm.taobao.org/dist/node/v14.3.0/node-v14.3.0-linux-x64.tar.xz
tar -xf node-v14.3.0-linux-x64.tar.xz

vi /etc/profile
#set for nodejs
export NODE_HOME=/opt/node-v14.3.0-linux-x64
export PATH=$NODE_HOME/bin:$PATH

source /etc/profile

npm config set registry=http://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 截图存放位置
mkdir  /tmp/png/

# 项目位置
mkdir  /opt/GrafanaSnapProject
cd /opt/GrafanaSnapProject
cnpm i --save puppeteer
cnpm i --save nodemailer

源码逻辑

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

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

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

/*
function: send pictures in mail's  html content via nodejs
author: [e-mail]

*/

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" <[e-mail]>', //邮件来源
            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('[e-mail]','每周报表','OpenStack 运营报表')

// 自定义发邮件模块，供引入
exports.sendMymail = sendMymail;

// 作为引入模块使用
//const sendModule = require('./mailPush.js');
//sendModule.sendMymail('[e-mail]','每周报表','OpenStack 运营报表');

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

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

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

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

Linux 中安装中文字体

yum -y install fontconfig
cd /usr/share/fonts
mkdir chinese
cd chinese/
使用lrzsz 上传字体，如仿宋体
chmod -R 775 /usr/share/fonts/chinese
yum -y install ttmkfdir
ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir
vi /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 puppeteer
author: [e-mail]
*/

//  发送函数
function sendPicture(){
        // 引入自定义发邮件模块
        const sendModule = require('./mailPush.js');
        // 同时发送到多个邮箱,用逗号隔开
        sendModule.sendMymail('[e-mail],[e-mail]','每周报表','^_^ 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操作系统，数据库，云计算领域相关技术, 热爱开源技术，平时喜欢阅读高效运维公众号。

- END -

敬请关注「Nodejs技术栈」微信公众号，获取优质文章，如需投稿可在后台留言与我取得联系。

▼

往期精彩回顾

▼