Grafana动态刷新图片方案

引言

原生Grafana不能动态刷新面板中的图片,因此需要使用新的方案来实现。


原由

原生的Grafana能用于显示图片的面板为text,可以在这个面板里面使用markdown或者html来访问图片链接,进而显示图片。但是面板里面的内容不会随着时间刷新,因此需要替代方案。

原理

主要要用到的就是Grafana中的一个插件,可以在这里找到。

这个插件其实和原生的text有点像,但是这个插件可以添加cs和js。其中的js有两种,一种是在页面刷新的时候执行一次,一种是在每次面板刷新(也就是右上角的刷新时间)的时候执行一次。同时js中还可以直接设置面板内html的内容。

因此整体的原理就是,使用html访问图片链接,然后在随着时间刷新的js中设置面板内html,这样每设置一次,就会访问一次图片链接,实现动态更新。

其中要注意的是,图片链接后面要加一个时间戳参数,这样可以避免浏览器缓存导致图片不会刷新。

实现

具体实现的话,就是在这个插件的面板里面,找到onHandleMetric的js块,在里面可以写:

1
htmlnode.innerHTML = '<img src="图片链接' + new Date().getTime() + '"/>'

如果要添加cs,可以在上面的cs块里面添加。