在插件中添加对变量的支持

变量是值的占位符，可以用来创建模板化查询和仪表板或面板链接之类的东西。有关变量的更多信息，请参阅模板和变量．

本指南解释了如何在面板插件和数据源插件中利用模板变量。

我们将看到如何像这样旋转字符串:

SELECT * FROM services WHERE id = "$service"

成

SELECT * FROM services WHERE id = "auth-api"

Grafana提供了几个辅助函数来在字符串模板中插入变量。让我们看看如何在插件中使用它们。

在面板插件中插入变量

有关面板，请参阅replaceVariables函数在PanelProps中可用。

添加replaceVariables参数列表，并传递给它一个用户定义的模板字符串。

导出函数SimplePanel({选项，数据，宽度，高度，replaceVariables}: Props) {const query = replaceVariables('现在显示$service');查询返回< div > {} < / div >;｝

在数据源插件中插入变量

对于数据源，您需要使用getTemplateSrv，它返回TemplateSrv的一个实例。

进口getTemplateSrv从运行时包中。

import {getTemplateSrv} from '@grafana/runtime';

在你的查询方法，调用取代使用用户定义的模板字符串。

async查询(选项:DataQueryRequest): Promise {const query = getTemplateSrv()。替换('SELECT * FROM services WHERE id = "$service"'， options.scopedVars);const data = makeDbQuery(查询);返回{data};｝

格式化多值变量

当用户为变量选择多个值时，插值变量的值取决于变量的格式．

当没有指定格式时，数据源可以通过向插值函数添加第三个参数来定义默认格式选项。

让我们修改SQL查询默认使用CSV格式:

getTemplateSrv()。取代('SELECT * FROM services WHERE id IN ($service)', options.scopedVars, 'csv');

现在，当用户写美元服务，查询如下所示:

SELECT * FROM services WHERE id IN (admin,auth,billing)

有关可用变量格式的更多信息，请参见高级可变格式选项．

从插件中设置一个变量

你不仅可以读取变量的值，还可以从插件中更新变量。使用locationService。部分(查询、替换)．

下面的示例展示了如何更新名为服务．

查询包含要更新的查询参数。控制变量的查询参数前缀为var -．
替换:真告诉Grafana更新当前URL状态，而不是创建一个新的历史记录条目。

import {locationService} from '@grafana/runtime';

locationService。Partial ({'var-service': 'billing'}， true);

注意:每当您更新一个变量时，Grafana都会查询您的数据源。对变量的过度更新会降低Grafana的速度，并导致糟糕的用户体验。

向数据源添加对查询变量的支持

查询变量是一种变量类型，它允许您查询数据源中的值。通过在数据源插件中添加对查询变量的支持，用户可以基于数据源中的数据创建动态仪表板。

让我们首先为变量查询定义一个查询模型。

导出接口MyVariableQuery{命名空间:字符串;rawQuery:字符串;｝

数据源若要支持查询变量，必须重写metricFindQuery在你的DataSourceApi类。metricFindQuery返回一个数组。MetricFindValue它只有一个性质，文本：

async metricFindQuery(查询MyVariableQuery，选项?:任何){ // Retrieve DataQueryResponse based on query. const response = await this.fetchMetricNames(query.namespace, query.rawQuery); // Convert query results to a MetricFindValue[] const values = response.data.map(frame => ({ text: frame.name })); return values; }

注意:默认情况下，Grafana为简单的文本查询提供了默认的查询模型和编辑器。如果这就是您所需要的，那么您可以将查询类型保留为字符串．
async metricFindQuery(查询:字符串，选项?):任何)

让我们创建一个自定义查询编辑器，以允许用户编辑查询模型。

创建一个VariableQueryEditor组件。

import React， {useState} from ' React ';import {MyVariableQuery} from './types';interface VariableQueryProps{查询:MyVariableQuery;onChange:(查询:MyVariableQuery，定义:string) => void;} export const VariableQueryEditor: React。FC = ({onChange, query}) => {const [state, setState] = useState(query);const saveQuery = () => {onChange(状态，' ${状态。查询}($ {state.namespace}) ');};const handleChange = (event: React.FormEvent) => setState({…state， [event.currentTarget.name]: event.currentTarget。价值,});return (<>  Namespace  
 Query  
 ); };

每当某个文本字段失去焦点时，Grafana就保存查询模型(元素失去焦点时)，然后预览返回的值metricFindQuery．

第二个参数onChange允许您设置查询的文本表示形式，该查询将出现在变量列表中的变量名旁边。

最后，配置您的插件以使用查询编辑器。

import {VariableQueryEditor} from './VariableQueryEditor';export const plugin = new DataSourcePlugin(DataSource) .setQueryEditor(QueryEditor) .setVariableQueryEditor(VariableQueryEditor);

就是这样!您现在可以通过添加查询变量到你的仪表盘。