Question

我已经开发了react Grafana插件。我可以在插件中获取查询结果并执行我的过程。不幸的是，我无法更改插件内的查询参数（React和Typescript）。我想知道是否有办法。是否可以使用模板变量？还是我应该尝试其他东西？

我曾经尝试使用QueryEditorProps来执行此操作，但是很遗憾，我找不到它的文档。

Answer 1

这肯定花了一些时间/研究才能解决，这是我如何解决的：

我的仪表板变量名为“ location_id”
该变量用于查询“从locationid = $ location_id的位置中选择location_name”
当用户单击弹出窗口时，我需要更新变量，以便可以刷新其他可视组件的数据。

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”

通过React Panel插件更新模板变量

1 个答案: