时间戳

首页 > 解决方案 > 从反应面板插件更新模板变量

reactjs - 从反应面板插件更新模板变量

问题描述

我开发了一个反应 Grafana 插件。我可以在插件中获取查询结果并执行我的过程。不幸的是，我无法在插件（React 和 Typescript）中更改查询参数。我想知道是否有办法这样做。是否可以使用模板变量？还是我应该尝试别的？

我曾尝试使用 QueryEditorProps 这样做，但不幸的是我找不到它的文档。

标签： reactjspluginsgrafana

解决方案

这肯定需要一些认真的时间/研究来解决，这就是我解决它的方法：

  1. 我的仪表板变量名为“location_id”
  2. 该变量用于查询“从 locationid=$location_id 的位置选择 location_name”
  3. 当用户单击弹出窗口时，我需要更新变量，以便我可以刷新其他可视组件的数据。
import { DataSourceApi } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';

    handleOnPopup =  (e:any, locationId:number ) => {
        let dataSource:DataSourceApi = getDataSourceSrv() as unknown as DataSourceApi;    
        let variable = _.find(dataSource.templateSrv.variables, {'name':'location_id'});
        this.locationSelectedId = locationId;
        variable.query = locationId.toString(); //make string even if its a number

        variable.variableSrv.updateOptions(variable).then(() => {
            variable.variableSrv.variableUpdated(variable, true);
        });
    }

render(){
//check the data state and get your updated data          
if(data.state == "Done" && data.series[2] && data.series[2].length > 0 && data.series[2]["fields"][0]["values"].buffer[0] == this.locationSelectedId){

                this.locationDevices = data.series[2];

            }
}

其他上下文：自定义 Grafana React 插件 Grafana 版本：6.4.4 NPM 包：-“@grafana/runtime”：“^6.6.0”-“@grafana/data”：“^6.5.1”

推荐阅读