如何在Grafana中实现依赖变量的变量值过滤？

架构老林

2026-7-30

实现Process与Hostname的联动变量限制

针对可视化工具（以Grafana为例）

1. 创建Process变量

进入仪表盘设置 → 变量 → 新增变量
类型选择「自定义」，选项填入 processA,processB，变量名设为 Process 后保存

2. 创建联动的Hostname变量

新增变量，命名为 Hostname，类型根据数据源选择：
- 自定义选项场景：在「选项」栏使用条件表达式生成对应选项：
```
${Process} == 'processA' ? 'host1' : 'host2,host3'
```
- 数据源查询场景（如Prometheus、InfluxDB）：编写带变量过滤的查询语句，自动匹配对应Hostname：
  - Prometheus示例：label_values(your_metric{process="${Process}"}, hostname)
  - InfluxDB示例：SHOW TAG VALUES FROM your_measurement WITH KEY = "hostname" WHERE process = '${Process}'

针对自定义Web开发场景

1. 预设映射规则

先定义Process与Hostname的对应关系：

const processHostMapping = {
  processA: ['host1'],
  processB: ['host2', 'host3']
};

2. 监听选择事件并更新选项

给Process下拉框添加监听，切换时动态更新Hostname下拉框的可选值：

const processSelect = document.getElementById('process-select');
const hostnameSelect = document.getElementById('hostname-select');

// 监听Process选择变化
processSelect.addEventListener('change', () => {
  const selectedProcess = processSelect.value;
  const availableHosts = processHostMapping[selectedProcess];
  
  // 清空原有选项
  hostnameSelect.innerHTML = '';
  // 插入新选项
  availableHosts.forEach(host => {
    const option = document.createElement('option');
    option.value = host;
    option.textContent = host;
    hostnameSelect.appendChild(option);
  });
  
  // 触发图表更新（根据你的图表逻辑调整）
  refreshChart(selectedProcess, hostnameSelect.value);
});

// 初始化时加载默认选项
processSelect.dispatchEvent(new Event('change'));