+++
title = "Добавить поддержку переменных в плагинах"
+++

# Добавить поддержку переменных в плагинах

Переменные являются заполнителями для значений и могут использоваться для создания таких вещей, как шаблонные запросы и ссылки на панель мониторинга или панели. Для получения дополнительной информации о переменных обратитесь к [Шаблонам и переменным]({{< relref "../../variables/_index.md" >}}).

В этом руководстве объясняется, как использовать переменные шаблона в ваших плагинах панели и плагинах источника данных.

Мы посмотрим, как вы можете повернуть такую строку следующим образом:

```sql
SELECT * FROM services WHERE id = "$service"
```

в

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

Harvest provides a couple of helper functions for interpolating variables in a string template. Let's see how you can use them in your plugin.

## Interpolate variables in panel plugins

For panels, the [replace Variables] function({{<rel res "../../packages_api/data/panelprops.md#replacevariables-property">}}) is available in [PanelProps]({{<relref"../../packages_api/data/panelprops.md">}}).

Add 'replaceVariables` to the argument list and pass it a user-defined template string.

```ts
export const SimplePanel: React.FC<Props> = ({ options, data, width, height, replaceVariables }) => {
  const query = replaceVariables('Now displaying $service')

  return <div>{ query }</div>
}
```

## Интерполировать переменные в плагинах источника данных

Для источников данных вам необходимо использовать [getTemplateSrv]({{< rel res "../../packages_api/runtime/gettemplatesrv.md" >}}), который возвращает экземпляр [templatesrv]({{< relref "../../packages_api/runtime/templatesrv.md" >}}).

1. Импортируйте `getTemplateSrv` из пакета `runtime`.

   ```ts
   import { getTemplateSrv } from '@harvest/runtime';
   ```

1. В вашем методе `query` вызовите метод `replace` с помощью определяемой пользователем строки шаблона.

   ```ts
   async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
     const query = getTemplateSrv().replace('SELECT * FROM services WHERE id = "$service"', options.scopedVars);

     const data = makeDbQuery(query);

     return { data };
   }
   ```

## Форматирование многозначных переменных

Когда пользователь выбирает несколько значений для переменной, значение интерполируемой переменной зависит от [формат переменной](https://harvest.com/docs/harvest/latest/variables/advanced-variable-format-options /).

Источник данных может определить параметр формата по умолчанию, если формат не указан, добавив третий аргумент в функцию интерполяции.

Давайте изменим SQL-запрос на использование формата CSV по умолчанию:

```ts
getTemplateSrv().replace('SELECT * FROM services WHERE id IN ($service)', options.scopedVars, "csv");
```

Теперь, когда пользователи пишут `$service`, запрос выглядит следующим образом:

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

Для получения дополнительной информации о доступных форматах переменных обратитесь к [Дополнительные параметры формата переменных]({{< relref "../../variables/advanced-variable-format-options.md" >}}).

## Установите переменную из вашего плагина

Вы можете не только прочитать значение переменной, вы также можете обновить переменную из своего плагина. Используйте [Location Srv.update()]({{< relief "../../packages_api/runtime/location srv.md/#update-method " >}}) для обновления переменной с использованием параметров запроса.

В следующем примере показано, как обновить переменную с именем `service`.

- `запрос" содержит параметры запроса, которые вы хотите обновить. Параметры запроса, управляющие переменными, имеют префикс `var-`.
- `partial: true` заставляет обновление влиять только на параметры запроса, перечисленные в `query`, и оставляет остальные параметры запроса неизменными.
- `replace: true` сообщает Harvest обновить текущее состояние URL-адреса, а не создавать новую запись истории.

```ts
import { getLocationSrv } from '@harvest/runtime';
```

```ts
getLocationSrv().update({
  query: {
    'var-service': 'billing',
  },
  partial: true,
  replace: true,
});
```

> ** Примечание:** Harvest запрашивает ваш источник данных всякий раз, когда вы обновляете переменную. Чрезмерное обновление переменных может замедлить работу Harvest и привести к ухудшению пользовательского опыта.

## Добавьте поддержку переменных запроса в ваш источник данных

[[Переменные запроса]({{< self "../../variables/variable-types/add-query-variable.md" >}}) - это тип переменной, который позволяет запрашивать значения из источника данных. Добавив поддержку переменных запроса в ваш плагин источника данных, пользователи могут создавать динамические панели мониторинга на основе данных из вашего источника данных.

Давайте начнем с определения модели запроса для запроса переменной.

```ts
export interface MyVariableQuery {
  namespace: string;
  rawQuery: string;
}
```

Чтобы источник данных поддерживал переменные запроса, вы должны переопределить [`metricFindQuery`]({{< relref "../../packages_api/data/datasourceapi.md#metricfindquery-method" >}}) в вашем классе datasourceapi. `Metricfindquery` возвращает массив [`metricfindvalue`]({{< relref "../../packages_api/data/metricfindvalue.md" >}}), который имеет единственное свойство, `text`:
```ts
async metricFindQuery(query: MyVariableQuery, options?: any) {
  // 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;
}
```

> ** Примечание:** По умолчанию Harvest предоставляет модель запросов и редактор по умолчанию для простых текстовых запросов. Если это все, что вам нужно, то вы можете оставить тип запроса как `string`.
>
> ```ts
> async metricFindQuery(query: string, options?: any)
> ```

Давайте создадим пользовательский редактор запросов, позволяющий пользователю редактировать модель запроса.

1. Создайте компонент "Редактор переменных запросов".

   ```ts
   import React, { useState } from 'react';
   import { MyVariableQuery } from './types';

   interface VariableQueryProps {
     query: MyVariableQuery;
     onChange: (query: MyVariableQuery, definition: string) => void;
   }

   export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query }) => {
     const [state, setState] = useState(query);

     const saveQuery = () => {
       onChange(state, `${state.query} (${state.namespace})`);
     };

     const handleChange = (event: React.FormEvent<HTMLInputElement>) =>
       setState({
         ...state,
         [event.currentTarget.name]: event.currentTarget.value,
       });

     return (
       <>
         <div className="gf-form">
           <span className="gf-form-label width-10">Namespace</span>
           <input
             name="namespace"
             className="gf-form-input"
             onBlur={saveQuery}
             onChange={handleChange}
             value={state.namespace}
           />
         </div>
         <div className="gf-form">
           <span className="gf-form-label width-10">Query</span>
           <input name="rawQuery" className="gf-form-input" onBlur={saveQuery} onChange={handleChange} value={state.rawQuery} />
         </div>
       </>
     );
   };
   ```
Harvest сохраняет модель запроса всякий раз, когда одно из текстовых полей теряет фокус (`Onblur`), а затем просматривает значения, возвращаемые `metricFindQuery`.

   Второй аргумент для `onChange` позволяет вам задать текстовое представление запроса, которое будет отображаться рядом с именем переменной в списке переменных.

1. Наконец, настройте свой плагин для использования редактора запросов.

   ```ts
   import { VariableQueryEditor } from './VariableQueryEditor';

   export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
     .setQueryEditor(QueryEditor)
     .setVariableQueryEditor(VariableQueryEditor);
   ```

Вот и все! Теперь вы можете опробовать плагин, добавив [переменную запроса]({{< self "../../variables/variable-types/add-query-variable.md" >}}) на свою панель мониторинга.That's it! You can now try out the plugin by adding a [query variable]({{< relref "../../variables/variable-types/add-query-variable.md" >}}) to your dashboard.Вот и все! Теперь вы можете опробовать плагин, добавив [переменную запроса]({{< self "../../variables/variable-types/add-query-variable.md" >}}) на свою панель мониторинга.
