古寒飞

# 人工语音插件：Grafana-X


作者平时也得工作和干活~，尽量在有空的时候不断的去更新该插件...

如果有相关问题或反馈，可以加作者微信（微信号：SPE3SRU3STAY）

# 插件作用

    这是一个Chrome插件，在Chrome浏览器（或其它支持Chrome插件的浏览器）上安装好该插件之后；打开grafana页面稍微完成几个简单的设置，就可以跟踪当前grafana页面上的图表变化，在适当的时候发送出人工语音报警提醒。

master分支只兼容grafana7.x版，git仓库内的grafana-6.x分支可以支持和兼容早期的grafana站点，grafana-6.x分支的代码由辛鑫同学原创实现的。

# 安装教程

新建一个空的目录用来存放我们的插件

mkdir -p ~/MyChrome

进入该目录，并把插件代码拉取到本地

cd ~/MyChrome/

git clone https://gitee.com/tay3223/grafana-x.git       # 国内拉取这个地址非常快（二选一）
git clone https://github.com/tay3223/grafana-x.git      # 国外拉取这个地址比较快（二选一）

代码拉取到本地之后的目录结构是

~/MyChrome/
└── grafana-x
    ├── README.md
    ├── background.html
    ├── grafanax-static
    ├── icon.png
    ├── manifest.json
    └── popup.html

打开我们电脑上的Chrome浏览器，依次点击右上角的三个点-->更多工具-->扩展程序最后打开扩展程序界面，如下图所示：

image-20210815172521633

接着打开右上角的开发者模式，然后选择左侧的加载已解压的扩展程序，然后选择刚才我们拉取到本地的grafana-x目录，如下图所示：

image-20210815173034060

此时就可以看到我们的grafana-x插件安装好了，出现在了插件列表中，同时右上角的插件图表中也出现了我们插件的图表，如下图所示：

image-20210815173300002

到此为止，就代表咱们的Grafana-X插件安装成功了！

# 使用教程

  • 首先打开一个grafana的地址，作者这里打开的地址是 grafana.guhanfei.work 这是作者自己部署的grafana-7.5.5版本的服务，您也可以直接打开您自己部署的grafana服务。

  • 然后点击已经安装好的插件小图标，会看到如下界面：

image-20210815173713316

然后点击初始化监控按钮，会看到一个设置面板：

image-20210815173932977

  • 刷新时间：指的是插件多久时间采集一次页面数据
  • 报警边界：指的是触发报警多少次才发出一次语音报警提醒
  • 人工语音开关：如果不勾选，就不会有声音播报出来，避免抄到别人
  • 数字4、数字5、数字6那三行的解释如下：
    • 目前该插件还没兼容到所有的图表类型，只有Table类型的图表才会被监控到，因此插件会去遍历当前页面上所有的Table类型的图表，然后获取到他的title信息和报警颜色设定信息。
    • 数字5那一行的意思是：获取到一个表格名称为接口延时的图表，它的报警阈值是如果出现红色的单元格时就触发一次报警。其中( 230, x, x )就是RPG颜色数字表，代表红色的意思，我们只要判断0下标位置上的数字大于230时，就代表红色的颜色浓度已经出现了，就代表有单元格变红红色了，然后就可以触发报警了。

插件的初始化运行时，遍历出来当前页面上有2个Table类型的表格，因此便自动生成了数字5和数字6那两行的监触发信息，grafana页面上的情况如下：

image-20210815175250016

可以看到，整个页面上只有两个Table类型的图表，全都被Grafna-X插件识别出来了，遍历出来之后生成的监控序列结果就是：

image-20210815181252548

监控序列自动生成之后，插件帮您默认设置为：

  • 如果图表中出现了红色的单元格，就触发一次报警。
  • 下标0位置上的数字就代表红色，红色的浓度可以随意设置，作者这里默认为230

到此为止，Grafana-X的简单实用就算介绍万了，感谢您的使用和反馈！

# 吐槽点

请各大佬高抬贵手，千万不要吐槽哈~~

~

虽然怎么会有人用数字来表达颜色，这么反人类的点子是怎么想出来的这个槽点，确实让人很无语！！！

~

作者正在夜以继日的修改和重构代码，这一版的上线只是为了应对快速投产、快速使用的小众需求，请给作者一些时间，请相信作者一定会更新和设计出更加友好的颜色识别与报警机制。

# 特别鸣谢

    本插件是在辛鑫同学原创的基础上，进行了针对Grafana7.x与Grafana8.x版本的重新开发，在此感谢辛鑫同学的个人付出与贡献。

← cdn_refresh →