You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何利用Grafana行重复功能根据变量值显示/隐藏服务专属行?

实现Grafana根据变量值显示/隐藏服务对应行的可行方案

我刚好有过类似的实践经验,给你几个切实可行的方案来达成需求——毕竟官方确实没做原生的行隐藏功能,得绕个小弯来实现效果:

方案1:多值变量+行Repeat+Filter(最推荐)

这是最直接且优雅的方式,利用Grafana的行重复功能精准控制显示的行:

  • 第一步:创建一个多值选择变量(比如命名为selected_services),选项就是你的Apache、Oracle等服务名称,允许用户多选或单选。
  • 第二步:给每个服务对应的行配置重复规则:
    1. 点击行标题右侧的设置图标,进入行配置界面。
    2. 找到「Repeat」选项,选择刚才创建的selected_services变量,重复方向设为「Vertical」。
    3. 关键的过滤设置:在「Repeat」的「Filter」输入框中,写入匹配当前行服务的表达式,比如Apache行就写$__value == 'Apache',Oracle行写$__value == 'Oracle'
  • 效果:当用户在变量中选中某个/某几个服务时,只有匹配的行会被渲染出来,未选中的服务对应的行直接不会生成,完美实现“显示/隐藏”的需求。

方案2:空数据自动隐藏行

如果你的场景更适合单值变量,或者不想用重复功能,可以结合「隐藏空行」的逻辑:

  • 先创建单值变量target_service,选项为各服务名称。
  • 给每行的所有面板添加变量匹配的查询条件:比如Apache行的HTTP状态码查询,要加上仅当$target_service == 'Apache'时才返回数据的逻辑(不同数据源语法不同:SQL用CASE WHEN,PromQL用unless或条件过滤,Oracle可以用WHERE子句匹配变量)。
  • 开启行的「隐藏空行」功能:在行配置的「Options」里找到「Hide empty rows」并勾选(不同Grafana版本位置可能略有不同)。
  • 效果:当变量选中的服务与当前行不匹配时,该行所有面板返回空数据,整行就会自动隐藏。

方案3:CSS自定义隐藏(进阶,不推荐生产用)

如果上面的方案都不满足,还可以用自定义CSS来强制隐藏行,但这个方法依赖Grafana的DOM结构,版本更新可能失效:

  • 给每个服务行添加唯一的「Row ID」(行配置里的「ID」字段),比如Apache行设为row-apache,Oracle行设为row-oracle
  • 在仪表盘的「Settings」→「JSON Model」里,找到styles字段,添加自定义CSS:
    #row-apache { display: none !important; }
    
  • 结合变量的「On Change」事件,用Grafana的API动态修改CSS规则(需要写点JavaScript),但这个方法复杂度高,维护成本大,只适合特殊场景。

注意事项

  • 确保变量和行的匹配逻辑准确,避免出现选中服务但对应行不显示的情况。
  • 部分数据源(比如Oracle)的变量引用要注意语法,比如用'$target_service'而不是$target_service来避免SQL注入或语法错误。
  • 测试时多切换变量值,验证行的显示/隐藏是否符合预期。

内容的提问来源于stack exchange,提问作者shiva2492

火山引擎 最新活动