opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-27 23:02:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Docs: Plugin migration guide - chunk 9 (#69420)

Browse Source 
* Initial commit

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Prettier fixes

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Fixes from doc review

---------

Signed-off-by: Joe Perez <joseph.perez@grafana.com>
This commit is contained in:
Joseph Perez
2023-06-05 14:21:35 -07:00
committed by GitHub
parent a0dd981f85
commit 1a9bc9ca1a
8 changed files with 142 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/sources/developers/plugins/migration-guide/angular-react/_index.md
View File

@ -6,7 +6,7 @@ keywords:
- migration
- plugin
- documentation
title: Migrating plugins from AngularJS to React
title: Migrate plugins from AngularJS to React
menutitle: Angular to React
weight: 1000
---
@ -18,7 +18,7 @@ If you want to migrate a plugin to Grafana's React-based plugin platform, then w
While there's no standard migration path from an Angular plugin to the new React platform, we’ve learned that one of the easiest ways to migrate is to:
1. Create a new branch called `migrate-to-react`.
1. Start from scratch with one of the templates provided by the [Create-plugin](https://www.npmjs.com/package/@grafana/create-plugin) tool.
1. Start from scratch with one of the templates provided by the [`create-plugin`](https://www.npmjs.com/package/@grafana/create-plugin) tool.
1. Move the existing code into the new plugin incrementally, one component at a time.
## Migrate a panel plugin
@ -49,7 +49,7 @@ export function MyPanel({ options, data, width, height }: Props) {
While all plugins are different, we'd like to share a migration process that has worked for some of our users.
1. Define your configuration model and `ConfigEditor`. For many plugins, the configuration editor is the simplest component so it's a good candidate to start with.
1. Define your configuration model and `ConfigEditor`. For many plugins, the configuration editor is the simplest component, so it's a good candidate to start with.
1. Implement the `testDatasource()` method on the class that extends `DataSourceApi`. Use the settings in your configuration model to make sure that you can successfully configure and access the external API.
1. Implement the `query()` method. At this point, you can hard-code your query, because we haven’t yet implemented the query editor. The `query()` method supports both the new data frame response and the old `TimeSeries` response, so don’t worry about converting to the new format just yet.
1. Implement the `QueryEditor`. How much work this requires depends on how complex your query model is.