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

321次阅读

共计 2749 个字符，预计需要花费 7 分钟才能阅读完成。

Grafana 版本：v7.1.3 (5723d951af)

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

咱闲话少说，先看实战演示效果：

最近在忙着把 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 的面板：

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

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

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

首先，你如果用的是老版本的 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&amp;refresh=5m permanent;}

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

你的 url 一定要带上 scheme 哦，也即是 ”http(s)://”，否则 grafana 会认为你提供的 url 是一个 uri，然后在跳转的时候会变成比如说“https://play.grafana.org/10.213.200.9/pushgateway”
再一个当你把这个 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 的。

正文完