如何在Grafana中获取当前URL的域名部分存入变量？

核心思路 #

Grafana没有内置直接暴露浏览器window.location的全局变量，但可以通过自定义脚本结合Grafana的变量API实现需求，完美适配你使用的Button Panel插件场景。

方案1：直接在Button Panel中用自定义脚本设置变量 #

1. 先创建Grafana变量：
   • 进入仪表板设置 → 变量 → 新建变量
   • 名称设为currentDomain，类型选自定义，初始值可留空或填默认域名
2. 配置Button Panel：
   • 在按钮的On Click设置里，选择Custom JavaScript
   • 填入以下脚本，自动获取当前浏览器域名并更新变量：

     // 获取完整域名（协议+主机+端口，如https://localhost:3000）
     const currentOrigin = window.location.origin;
     // 若只需主机+端口，改用window.location.host
     
     // 触发变量更新，让Grafana同步值
     grafana.appEvents.publish('refresh-variable', {
       variable: 'currentDomain',
       value: currentOrigin
     });
     
     // 执行POST请求，直接引用变量
     fetch(`${currentOrigin}/your-web-server-endpoint`, {
       method: 'POST',
       // 按需添加请求体、headers等配置
     });
     

3. 在Button Panel的POST URL配置中，直接用变量：${currentDomain}/your-endpoint

方案2：用隐藏文本面板自动初始化变量 #

如果需要页面加载时就自动设置域名变量（无需点击按钮触发），可添加隐藏面板：

1. 新建一个Text Panel
2. 编辑面板内容，切换到HTML模式，插入脚本：

   <script>
     // 等待Grafana完全加载
     window.grafanaBootstrapped.then(() => {
       const variableService = window.grafana.getService('variableSrv');
       // 找到预先创建的currentDomain变量
       const domainVar = variableService.variables.find(v => v.name === 'currentDomain');
       if (domainVar) {
         // 设置变量为当前浏览器域名
         domainVar.setValue(window.location.origin);
       }
     });
   </script>
   

3. 在面板Options中勾选Hide panel，让它不显示在仪表板上
4. 之后Button Panel的POST URL直接引用${currentDomain}即可

注意事项 #

• 确保Grafana内容安全策略（CSP）允许自定义脚本，默认配置下内部脚本是允许的；若为严格模式，需调整grafana.ini中content_security_policy相关配置
• 变量名称要和脚本里的完全一致，注意大小写
• window.location.origin返回完整协议+主机+端口，若只需主机+端口，改用window.location.host

内容的提问来源于stack exchange，提问作者Chris.B