环境

Grafana版本:v7.1.3 (5723d951af)

备注:上面这个版本是在写本篇博客的当天打开这个Grafana的官方在线演示demo 时页脚显示的版本号,但彼时官方最新的版本已经是v7.1.4了,不过我想说的是本篇博客最早实战成功的时候所基于的Grafana版本应该也是不高的,所以你不用太担心你的版本与本文不符怎么办,其实只要你的Grafana版本不是实在太低就行哈!

效果演示

咱闲话少说,先看实战演示效果:全网首发实战Grafana图表数据向下钻取(支持跳转到不同的对应面板)</a />

碎碎念

最近在忙着把Prometheus上的指标添加到Grafana上展示,以及更重要的是预研在一个Annotations & Alerts的面板上实现点击应用名或服务名就能跳转到对应的面板上,而且还要求跳转时自动切换到对应的application。如上面的GIF动图所示,本人预研成功,前述要求我已经完美实现了哈,上面是Grafana官方提供的在线演示demo,官方demo面板中没有设置application这个面板变量,所以无法演示跳转时自动切换到对应的application哈,其实主要是我懒得在我本地搭建Prometheus和Grafana了呢,不过在我付费内容中会告诉你怎么实现哈!

由于Prometheus的job名一般在实践中可以设置为服务名或应用名,而且会把它挪到grafana面板table类型的panel的第一列且把column header设置为“应用服务名”这样的字面量,上面的演示中由于是官方demo不方便把它这样设置哈~

实战

这一节的实战是付费阅读的哦,😘~

实战环节首先简述了一下思路,如果你对grafana的panel edit设置比较熟的话相信你看完简述马上就知道怎么做了,当然如果你对grafana不太熟的话,我也准备了丰富的图文实操步骤,而且更重要的是还分享了两个我踩的坑,都是经历过惨痛教训后得出来的。

[$]

在具体开始实战之前先简单总结一下整个思路,就是grafana提供的“render value as link”功能中的link url支持把一个叫${__cell}的变量在打开生成的url时解析为对应的value,当我们拿到了这个value时事情就好办了,我们把这个${__cell}的变量放在url的path部分的第一级,也即是如:http://127.0.0.1/${__cell},

这时当看到了127你会想到什么,是不是大名鼎鼎的Nginx呀,如果你能想到Nginx那接下来就好办了,相信聪明的你已经知道怎么操作了,也就是把Nginx配置中的location后面的pattern设置为{__cell}变量实际解析出来的值是不,这个{__cell}变量解析出来的值一般就是application名或service名,这不就是我们想要的数据向下钻取嘛,然后再到location的body中加个重定向语句就行了,

而重定向语句中url就可以设置为你想跳转到的面板url了。如果你对grafana的panel edit设置和Nginx设置比较熟的话相信你看到这里已经知道具体该怎么实操了,下面的就不用看了哈~

下面是grafana官方demo中的一个visualization为table的面板

全网首发实战Grafana图表数据向下钻取(支持跳转到不同的对应面板)</a />

由于Prometheus的job名一般在实践中可以设置为服务名或应用名,而且会把它挪到表格的第一列且把column header设置为“应用服务名”这样的字面量,至于怎么操作这个实践我在这就不赘述了哈。

下面到关键的地方了,在点击了panel的edit后我们定位到column style这个部分中的options,如下:

全网首发实战Grafana图表数据向下钻取(支持跳转到不同的对应面板)

上面这张截图信息量有点大哈,我慢慢来解释,

首先,你如果用的是老版本的grafana,这个column style设置会在页面下半部分中左侧的第二个或第三个选项中,自己多随便点点哈,另外,你要想看到Link部分和下面的url输入框,需要先把上面的“render value as link”选项打开哈,

其次你可能还会有疑问说column style设置中会有多个options,我该怎么定位到是哪一个呀,这个根据name pattern这个后面的字面量来判断,而且还有个小技巧如果你发现当你打开了“render value as link”选项后table panel中的部分列的值下面像网页上的超链接一样多了下划线,那就说明你找到了正确的options设置。

设置完了上图中的值后保存面板,然后你要做的就是在你当前用的这个grafana所在的服务器上搭建一个Nginx并启动,怎么搭建Nginx我就不详细讲了,我把Nginx的location部分的示例贴到下面供你参考一下:

location /pushgateway {
    rewrite ^/(.*) https://play.grafana.org/d/000000029/prometheus-demo-dashboard?orgId=1&refresh=5m permanent;}
     

这里说一下要注意的两个点:

  1. 你的url一定要带上scheme哦,也即是”http(s)://”,否则grafana会认为你提供的url是一个uri,然后在跳转的时候会变成比如说“https://play.grafana.org/10.213.200.9/pushgateway”
  2. 再一个当你把这个grafana从你本地的开发环境交付出去给别人用时,你不要因为grafana和Nginx部署在同一个机子上就在url输入框中填上127.0.0.1哦,我上面之所以提到http://127.0.0.1/${__cell},是为了带出用Nginx这个思路。

最后我们来谈最后一个问题,如何实现跳转时自动切换到对应的application,其实当你勾选了application后grafana的面板url中会多出一个叫var-application的查询参数,application这部分取决于你的模板变量名哦,发现了这个后接下来就好办了,在你的Nginx rewrite重定向语句中的url中加上这样的查询参数就行啦!

[/$]

最后

当你看完付费内容后会心想我靠原来这么简单呀,白瞎了我的钱了。

可你要知道当初我走了多少弯路么,由于大家都知道grafana的模板url中包含了随机生成的dashboard id,而这个id又没有提供对应的默认变量,所以我一开始就一直执着于新建一个mapping match的模板变量来干这个事,事实证明即使忙活到了零点所做的一切也只是徒劳,另外我甚至考虑过写一个Django服务来你懂的。。

另外,你可能可以实现数据向下钻取跳转时跳转到同一个面板,但是要想实现不同的应用跳转到不同的面板的话还是怎么说呢,非常tricky的。