使用 Grafana + simpod-json-datasource 快速搭建数据看板

数据看板在很多时候都有使用，比如运维可视化监控，交易数据的实时展示，人流量的展示等，都需要有数据看板。

这里教大家使用 Grafana+simpod-json-datasource 快速搭建数据看板。

Grafana 是一个跨平台的开源的度量分析和可视化工具，可以通过将采集的数据查询然后可视化的展示，并及时通知。它主要有以下六大特点：

1、展示方式：快速灵活的客户端图表，面板插件有许多不同方式的可视化指标和日志，官方库中具有丰富的仪表盘插件，比如热图、折线图、图表等多种展示方式；

2、数据源：Graphite，InfluxDB，OpenTSDB，Prometheus，Elasticsearch，CloudWatch 和 KairosDB 等；

3、通知提醒：以可视方式定义最重要指标的警报规则，Grafana 将不断计算并发送通知，在数据达到阈值时通过 Slack、PagerDuty 等获得通知；

4、混合展示：在同一图表中混合使用不同的数据源，可以基于每个查询指定数据源，甚至自定义数据源；

5、注释：使用来自不同数据源的丰富事件注释图表，将鼠标悬停在事件上会显示完整的事件元数据和标记；

6、过滤器：Ad-hoc 过滤器允许动态创建新的键/值过滤器，这些过滤器会自动应用于使用该数据源的所有查询。

一、安装 grafana

官网下载地址：https://grafana.com/grafana/download

mac 安装

wuxiaolong:~ macuser$ /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"  #使用brewwuxiaolong:~ macuser$ brew updatewuxiaolong:~ macuser$ brew install grafana        # 安装grafanawuxiaolong:~ macuser$ brew services start grafana # 启动grafanawuxiaolong:~ macuser$ brew services restart grafana # 重启grafana
# grafana的配置文件所在位置：/usr/local/etc/grafana/grafana.ini 

centos、redhat 安装

[root@iZuf61pdvb2o7cf4mu9ccyZ ~] wget https://dl.grafana.com/oss/release/grafana-7.2.0.linux-amd64.tar.gz[root@iZuf61pdvb2o7cf4mu9ccyZ ~] tar -zxvf grafana-7.2.0.linux-amd64.tar.gz[root@iZuf61pdvb2o7cf4mu9ccyZ ~] ./grafana-7.2.0/bin/grafana-server          # 前台启动[root@iZuf61pdvb2o7cf4mu9ccyZ ~] nohup ./grafana-7.2.0/bin/grafana-server &  # 后台启动
# grafana的配置文件所在位置：./grafana-7.1.5/conf/defaults.ini 

启动后的默认端口：3000，默认的用户名密码：admin/admin

二、安装 simpod-json-datasource 插件

安装

[root@iZuf61pdvb2o7cf4mu9ccyZ ~] grafana-cli plugins install simpod-json-datasource  #安装这个simpod-json-datasource数据源

重新启动 grafana 就可以看到新的数据源插件了。

安装插件是需要注意的是：

mac 安装直接执行上面的命令后，重启即可。

centos、redhat 安装后，执行上面的插件安装命令重启后，看不到新的数据源。因为这个插件安装后的默认位置是 /var/lib/grafana/plugins，需要手动将这个插件复制到./grafana-7.2.0/data/plugins 目录下，因为 defaults.ini 配置文件中指定了插件读取的位置。或将配置文件中的位置修改为/var/lib/grafana/plugins。

# Directory where grafana will automatically scan and look for pluginsplugins = data/plugins

后端项目要求

官方文档：https://grafana.com/grafana/plugins/simpod-json-datasource

方法提供的默认 http 服务数据源项目（node.js）：https://github.com/bergquist/fake-simple-json-datasource

这个是我测试时使用 java 实现的数据源项目：https://gitee.com/wuxiaolongah/grafana-backend

实现 simpod-json-datasource 插件要求的数据源时，需要关注的几个问题：

1.需要实现四个接口: / /annotations /search /query

2.接口返回的数据个格式固定

比如/query 接口要求返回的数据格式：

配置数据源

写好后端接口，部署完成后，在 url 中填入项目的地址，点击测试，测试通过即可

三、新建 dashboard 面板

新建一个 dashboard，然后可以建多个 panel 仪表盘。比如交易数据就是一个仪表盘。

进入这个仪表盘，选择 stat 的展示方式，使用 default 的数据源（就是从上面配置的项目调用接口获得数据）。

Query inspector 可以查看 http 请求获得数据的请求报文和响应结果。

Metric 就是度量指标，可以通过调用数据源的 http post /search 接口获得的数据，可以查看我的项目。

Additional JSON Data 可以给 http post /query 请求动态的添加参数，后端动态响应。$orgnization_code 和 $pt_date 就是两个变量，每次查询都会动态的填充参数。

这两个参数的值可以从很多地方获取，比如这个 panel 提前定义的变量，或者 url 中获取。后面再说。

后端可以获取这两个变量的值，进行相应的数据返回，后端可以从 targets 对象中获得变量值：

四、动态传参

上面说的变量就是动态传参的结果。使用动态传参需要注意一下几点。

定义变量

点击 panel 右上角设置：

新建变量：

这里定义的变量名称 orgnization_code，引用时使用 $orgnization_code。类型 type 有很多，这里使用自定义，可以给多个默认值，使用逗号分隔。最后一定要注意 save dashboard。

定义完成后，就可以使用了，当 dashboard 加载时，变量会自动从这里的默认值获取对应的值，传递给后端的/query 接口。

使用 url 传参

上面定义完成后，如果 url 中有这个变量，就会使用 url 中这个变量的值动态获取后端数据。

https://XXXXXXXX.com/d/EybWfmKGz/ri-jiao-yi-bao-biao?orgId=1&kiosk&var-organization_code=00304&var-p_date=20200917

url 中变量传参的格式为var-{变量名}={变量值}

五、改变展示方式

使用 grafana 一般做大屏展示数据，在 dashboard 的右上角可以改变展示的方式，选择全屏或 tv 等模式。

点击后可以发现浏览器的 url 中多了一个参数 kiosk，这就是展示的控制。

六、URL 加上公共 path

通常访问 grafana 可以直接使用https://XXXXXXXX.com/d/EybWfmKGz/ri-jiao-yi-bao-biao?orgId=1&kiosk&var-organization_code=00304&var-p_date=20200917，如果需要在https://XXXXXXXX.com/后面加一段公共的 path 路径做转发，可以修改配置文件：

修改 rooturl 和 servefrom_sub_path

这样就可以使用https://XXXXXXXX.com/mdashboard/d/EybWfmKGz/ri-jiao-yi-bao-biao?orgId=1&kiosk&var-organization_code=00304&var-p_date=20200917访问了。

使用 nginx 做代理转发时，很有用。

关注公众号，输入“java-summary”即可获得源码。

完成，收工！

【传播知识，共享价值】，感谢小伙伴们的关注和支持，我是【诸葛小猿】，一个彷徨中奋斗的互联网民工。