+++
title = "Руководство по миграции плагинов"
+++

# Руководство по миграции плагинов

В этом руководстве объясняется, как перенести плагины, созданные до Harvest 7.0, с Angular на новую платформу плагинов на основе React, представленную в Harvest 7.0.

Это написано для:

- Авторы плагинов, которые хотят перенести свои плагины на Harvest 7.0+.
- Пользователи плагинов, которые используют пользовательские плагины и хотят знать, могут ли они перейти на Harvest 7.0 без потери функциональности.

> Если вы успешно перенесли свой плагин с Angular на React, пожалуйста, [отправьте сообщение о проблеме на GitHub](https://github.com/harvest/harvest/issues/new?title=Docs%20feedback:%20/developers/plugins/migration-guide.md ) и поделитесь с нами своим опытом, чтобы мы могли улучшить это руководство!

## Что нового в Harvest 7.0?

Harvest 7.0 представила совершенно новую платформу плагинов, основанную на React. Новая платформа заменяет предыдущую платформу плагинов на основе Angular.

Плагины, созданные с использованием Angular, все еще будут работать в обозримом будущем, но мы призываем новых авторов плагинов разрабатывать на новой платформе.

### Новый формат данных

Наряду с переходом на React, новая платформа плагинов представила новый внутренний формат данных, называемый [фреймы данных]({{< relref "data-frames.md " >}}).

Ранее плагины источника данных могли отправлять данные либо в виде временных рядов, либо в виде таблиц. С помощью фреймов данных источники данных могут отправлять любые данные в табличной структуре. Это дает вам больше гибкости при визуализации ваших данных в Harvest.

### Улучшена поддержка машинописных текстов

В то время как предыдущий SDK для плагинов на основе Angular поддерживал TypeScript, для платформы React мы значительно улучшили поддержку. Все наши API теперь работают на TypeScript, что может потребовать обновления существующего кода до новых более строгих определений типов. Harvest 7.0 также представила несколько новых API-интерфейсов для разработчиков плагинов, которые используют многие новые функции Harvest 7.0.

### Инструментарий Harvest

С Harvest 7.0 мы выпустили новый инструмент для упрощения разработки плагинов. Раньше вы использовали Gulp, Grunt или аналогичные инструменты для создания уменьшенных ресурсов. Harvest Toolkit позаботится о создании и тестировании вашего плагина без сложных конфигурационных файлов.

Для получения дополнительной информации обратитесь к [@harvest/toolkit](https://www.npmjs.com/package/@harvest/toolkit ).

### Параметры поля

Harvest 7.0 представила концепцию [_field options_]({{< relref "../../panels/field-options/_index.md#field-options" >}}), новый способ настройки ваших данных до их визуализации. Поскольку это не было доступно в предыдущих версиях, любой плагин, который позволяет настраивать на основе полей, не будет работать в предыдущих версиях Harvest.

Для плагинов, выпущенных до версии Harvest 7.0, все опции считаются _Display options_. Вкладка для настройки поля недоступна.

### Внутренние плагины

В то время как внутренние плагины были доступны в качестве экспериментальной функции в предыдущих версиях Harvest, поддержка была значительно улучшена в Harvest 7. Внутренние плагины для Harvest 7.0 имеют обратную совместимость и будут продолжать работать. Однако старая система внутренних плагинов устарела, и мы рекомендуем вам использовать новый SDK для внутренних плагинов.

Поскольку Harvest 7.0 представила [подпись внутренних плагинов] ({{< relref "../../plugins/plugin-signatures.md" >}}), плагины сообщества не будут загружаться по умолчанию, если они не подписаны.

Чтобы узнать больше, обратитесь к [Внутренним плагинам]({{< relref "backend" >}}).

## Почему я должен перенести свой плагин?

Использование новой платформы плагинов имеет несколько преимуществ.

- ** Более высокая производительность: ** Компоненты, написанные на React, более отзывчивы.
- ** Поддержка параметров полей: ** Перейдя на новый формат фрейма данных, вы можете использовать новые параметры полей, чтобы пользователи могли настраивать свои данные и параметры отображения.

## Совместимость между версиями Harvest

Плагин, разработанный для Harvest 6, будет работать для Harvest 7.0. Однако плагины, разработанные с использованием новой платформы плагинов в Harvest 7.0, будут работать только для Harvest 7.0 и выше.

### Совместимость между форматами данных

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

Например:

- Устаревшая панель с источником данных, которая возвращает фреймы данных: Harvest преобразует ответ в устаревший формат.
- Устаревший источник данных с панелью, использующей фреймы данных: Harvest преобразует ответ в формат фрейма данных.
- Если и панель, и источник данных используют один и тот же формат, преобразования не выполняются. Данные передаются как есть.

### target и jsonData не изменились

Модель запроса, `target`, и модель конфигурации, jsonData, остаются прежними. Это означает, что если вы используете ту же модель запросов и конфигурацию для своего плагина, то перенесенный плагин будет использовать существующие запросы и конфигурацию. Вам не нужно беспокоиться о том, чтобы сломать существующие панели мониторинга.

## Перенести плагин из Angular в React

Если вы хотите перенести плагин на новую платформу плагинов, мы рекомендуем вам выпустить его в новой основной версии. Рассмотрите возможность сохранения ветки выпуска для предыдущей версии, чтобы иметь возможность выпускать исправления для версий, предшествующих Harvest 7.

Несмотря на то, что нет единого пути миграции с плагина Angular на новую платформу React, от первых пользователей мы узнали, что один из самых простых способов миграции - это:

1. Создайте новую ветку под названием "migrate-to-react`.
1. Начните с нуля с одного из шаблонов, предоставленных Harvest Toolkit.
1. Перемещайте существующий код в новый плагин постепенно, по одному компоненту за раз.

### Перенос плагина панели

До Harvest 7.0 вы должны были экспортировать MetricsPanelCtrl из module.ts.

**src/module.ts**

```ts
import { MetricsPanelCtrl } from 'harvest/app/plugins/sdk';

class MyPanelCtrl extends MetricsPanelCtrl {
  // ...
}

export { MyPanelCtrl as PanelCtrl };
```

Начиная с версии 7.0, плагины теперь экспортируют плагин панели из модуля.ts, где моя панель - это компонент React, содержащий реквизиты из PanelProps.

**src/module.ts**

```ts
import { PanelPlugin } from '@harvest/data';

export const plugin = new PanelPlugin<MyOptions>(MyPanel);
```

**src/MyPanel.tsx**

```ts
import { PanelProps } from '@harvest/data';

interface Props extends PanelProps<SimpleOptions> {}

export const MyPanel: React.FC<Props> = ({ options, data, width, height }) => {
  // ...
};
```

### Перенос плагина источника данных

Хотя все плагины разные, мы хотели бы поделиться процессом миграции, который сработал для некоторых наших пользователей.

1. Определите свою модель конфигурации и "ConfigEditor". Для многих плагинов редактор конфигурации является самым простым компонентом, поэтому он является хорошим кандидатом для начала.
1. Реализуйте метод `testDatasource()` в классе, который расширяет `Datasourceapi`, используя настройки в вашей модели конфигурации, чтобы убедиться, что вы можете успешно настроить внешний API и получить к нему доступ.
1. Реализуйте метод `query()`. На этом этапе вы можете жестко запрограммировать свой запрос, потому что мы еще не внедрили редактор запросов. Метод `query()` поддерживает как новый ответ фрейма данных, так и старый ответ временных рядов, поэтому пока не беспокойтесь о преобразовании в новый формат.
1. Внедрите `QueryEditor`. Сколько работы для этого потребуется, зависит от того, насколько сложна ваша модель запроса.

К настоящему времени вы должны быть в состоянии выпустить свою новую версию.

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

### Переход к фреймам данных

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

Harvest 7.0 обратно совместима со старым форматом данных, использовавшимся в предыдущих версиях. Панели и источники данных, использующие старый формат, по-прежнему будут работать с плагинами, использующими новый формат фрейма данных.

`Dataqueryresponse`, возвращаемый методом `query`, может быть либо [LegacyResponseData](https://harvest.com/docs/harvest/latest/packages_api/data/legacyresponsedata /) или [Фрейм данных](https://harvest.com/docs/harvest/latest/packages_api/data/dataframe /).

[toDataFrame()](https://harvest.com/docs/harvest/latest/packages_api/data/todataframe /) функция преобразует устаревший ответ, такой как "Временные ряды" или "Таблица", в "Фрейм данных". Используйте его, чтобы постепенно переводить свой код в новый формат.
```ts
import { toDataFrame } from '@harvest/data';
```

```ts
async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
  return {
    data: options.targets.map(query => {
      const timeSeries: TimeSeries = await doLegacyRequest(query);
      return toDataFrame(timeSeries);
    }
  };
}
```

Для получения дополнительной информации обратитесь к [Фреймам данных]({{< относительная ссылка "data-frames.md ">}}).

## Устранение неполадок при миграции плагинов

Начиная с версии Harvest 7.0, внутренние плагины теперь могут быть криптографически подписаны для проверки их происхождения. По умолчанию Harvest игнорирует неподписанные плагины. Для получения дополнительной информации обратитесь к [Разрешить неподписанные плагины]({{< self "../../plugins/plugin-signatures.md#разрешить-неподписанные-плагины" >}}).