使用Grafana的JSON DataSource插件完成对实时监控数据的可视化展示

使用Grafana的JSON DataSource插件完成对实时监控数据的可视化展示

Grafana的JSON DataSource插件

Grafana可以制作更具科技感的dashboard，支持的数据源也越来越丰富，如Elasticsearch、MySQL、Prometheus等等。

尽管如此，在大数据时代依旧有很多的数据存储在非常见的数据源中，这些数据无法直接对接Grafana进行可视化展示，但是我们又对Grafana的性能以及制作的酷炫图表爱不释手，JSON数据源插件的出现很大程度上缓解了这个窘境。利用JSON数据源插件，无论数据存储在什么数据源中，只需要实现相应的接口，并在接口中实现将数据转换为Grafana的JSON插件所支持的数据格式，就可以实现无缝对接。

JSON DataSource插件安装

使用grafana的自带工具grafana-cli可以快速完成simple-json-datasource插件的安装，以windows系统为例：

• 打开 ./Grafana/grafana/bin 文件夹，在此处打开命令行窗口
• 输入命令：

grafana-cli plugins install simpod-json-datasource

如果有安装成功的提示，代表插件安装成功，需要重启grafana服务使新插件生效：
windows命令行中输入：

net stop grafana

net start grafana

如果没有安装成功，很可能是因为网络连接问题导致相应的插件资源下载失败，此时可以尝试为命令行工具配置上网代理：

• 右键我的电脑 → 属性 → 高级 → 环境变量 → 系统变量
• 新建参数命名为 HTTP_proxy
• 相应的路径名为 http://yourproxy.ip:yourproxy.port/

JSON DataSource接口实现

接下来需要实现实现相应的WebAPI接口，在接口中完成 源数据格式 - JSON插件所支持数据格式 的转换。

• /
  / 是第一个需要实现的接口，该接口用于对数据源进行测试，请求方式是 GET ，无需返回有意义的实体，调用状态码为200即可，例如返回实体可以为：

  {"status":"success"}
  

  实现了此接口后，即可在grafana中完成对JSON数据源的配置：
  
  输入 / 接口的url → Save & Test，即可完成JSON数据源的配置。

• /search
  /search 接口用于在编辑图表query时选择相应的metric，即
  /search 接口的请求方式是 POST ，请求体类似于

  { "target": "upper_50" }
  

  /search 接口的返回结果可以是array格式：

  ["upper_25","upper_50","upper_75","upper_90","upper_95"]
  

  也可以是map格式：

  [ { "text" :"upper_25", "value": 1}, { "text" :"upper_75", "value": 2} ]
  

  /search 接口实现后，Metric的下拉框内就出现了相应的可选内容；

• /query
  /query 接口用于返回query所请求的数据。
  /query 接口的请求方式是 POST ，请求体类似于：

  {
  	"panelId": 1,
  	"range": {
  		"from": "2016-10-31T06:33:44.866Z",
  		"to": "2016-10-31T12:33:44.866Z",
  		"raw": {
  			"from": "now-6h",
  			"to": "now"
  		}
  	},
  	"rangeRaw": {
  		"from": "now-6h",
  		"to": "now"
  	},
  	"interval": "30s",
  	"intervalMs": 30000,
  	"maxDataPoints": 550,
  	"targets": [{
  			"target": "upper_50",
  			"refId": "A",
  			"type": "timeseries",
  			"data": {
  				"additional": "optional json"
  			}
  		},
  		{
  			"target": "upper_75",
  			"refId": "B",
  			"type": "timeseries"
  		}
  	],
  	"adhocFilters": [{
  		"key": "City",
  		"operator": "=",
  		"value": "Berlin"
  	}]
  }
  

  /query 接口的返回结果格式类似：

  	[{
  		"target": "upper_75", //The field being queried for
  		"datapoints": [
  			[622, 1450754160000], //Metric value as float, timestamp in milliseconds
  			[365, 1450754220000]
  		]
  	},
  	{
  		"target": "upper_90",
  		"datapoints": [
  			[861, 1450754160000],
  			[767, 1450754220000]
  		]
  	}
  ]
  

  /query 接口实现后，就可以对query获取的数据进行图表绘制了。

• /annotations
  /annotations 接口用于返回注释，请求方式是 POST ，请求体类似于：

  {
  	"range": {
  		"from": "2016-04-15T13:44:39.070Z",
  		"to": "2016-04-15T14:44:39.070Z"
  	},
  	"rangeRaw": {
  		"from": "now-1h",
  		"to": "now"
  	},
  	"annotation": {
  		"name": "deploy",
  		"datasource": "JSON Datasource",
  		"iconColor": "rgba(255, 96, 96, 1)",
  		"enable": true,
  		"query": "#deploy",
  	},
  	"variables" []
  }
  

  /annotations 接口的返回结果格式类似于：

  [{
  	"text": "text shown in body" // Text for the annotation. (required)
  	"title": "Annotation Title", // The title for the annotation tooltip. (optional)
  	"isRegion": true, // Whether is region.
  	"time": "timestamp", // Time since UNIX Epoch in milliseconds. (required)
  	"timeEnd": "timestamp", // Time in milliseconds (required if `isRegion` is true )
  	"tags": ["tag1"], // Tags for the annotation. (optional)
  }]
  

  我按照官方文档的格式实现了 /annotations 接口，但是却没发现何时触发该接口，所以没有理解该接口实现的功能，希望知道的朋友在下方留言，不胜感激。

Demo — 使用SNMP + Grafana对物理机的各项指标进行实时监控与可视化展示

接下来结合一个demo对Grafana的JSON数据源插件的使用以及相应接口的实现做详细介绍。源数据为通过SNMP协议采集的物理机的各项指标，包括CPU利用率、物理内存的利用率、虚拟内存的利用率、磁盘信息等。

整体架构

整体架构如下图所示：
我们的主要工作在于上图中的第二个模块和第三个模块：

• 解析JSON插件发来的http请求
• 向目标主机发送snmp请求获取目标主机的目标参数
• 获取snmp响应中目标主机的各项参数
• 将snmp响应结果封装成JSON插件支持的数据格式并作为结果返回

编码实现

监控的每个目标需要实现一个相应的 controller ，结构如下：

public interface BaseController {
	@RequestMapping(value = "/", method = {RequestMethod.GET})
	@ResponseBody String test();
	
	@RequestMapping(value = "/query", method = {RequestMethod.POST})
	@ResponseBody String query(@RequestBody String requestBody);
	
	@RequestMapping(value = "/search", method = {RequestMethod.POST})
	@ResponseBody String search(@RequestBody String requestBody);
	
	@RequestMapping(value = "/annotations", method = {RequestMethod.POST})
	@ResponseBody String annotations(@RequestBody String requestBody);
}

controller 通过调用相应的 service 获取目标主机的各项参数：

public abstract class BaseService {

	protected String STATUS = "status";
	protected String SUCCESS = "success";
	protected String ANNOTATIONS = "annotations";
	public String TARGET = "target";
	public String DATA_POINTS = "datapoints";
	
	public JSONObject testConnection() {
		JSONObject connection = new JSONObject();
		connection.put(STATUS, SUCCESS);
		return connection;
	}
	
	public abstract JSONArray getQueryResult();
	
	public abstract JSONArray getSearchResult();
	
	public JSONObject getAnnotationResult() {
		JSONObject annotationResult = new JSONObject();
		annotationResult.put(ANNOTATIONS, "result");
		return annotationResult;
	}
}

最后附上完整的Demo源码链接https://download.csdn.net/download/lanshanzhuyao/11350549

效果演示