mirror of
https://github.com/grafana/grafana.git
synced 2025-07-28 18:02:22 +08:00
Docs: Plugins doc reorganization, part 1 (#69864)
* Initial commit * Prettier fixes * Doc-validator fixes part 1 * Doc-validator fixes part 2 * More doc-validator fixes * More doc-validator fixes * Test * link test * Linnk test * Link test * More fixes * More fixes * Doc-validator fixes * Doc-validator fixes * fix broken link * Fix * Testing * Doc fixes * Link fixes * Fix links * Update docs/sources/developers/plugins/create-a-grafana-plugin/_index.md Co-authored-by: David Harris <david.harris@grafana.com> * Testing * Testing * Testing * Testing * Doc-validator fixes * Doc-validator fixes * Doc-validator fixes * Fix broken links for plugins reorganization project * Prettier fixes * Prettier fixes * Incorporate reviewer feedback * Link fixes * Link fixes * Link fixes * Link fix * Deleted space * Codeowners fix * Change grafana.com links to absolute URLs for Hugo --------- Co-authored-by: David Harris <david.harris@grafana.com>
This commit is contained in:
Joseph Perez
@ -1,18 +1,20 @@
|
||||
---
|
||||
title: Work with legacy plugins
|
||||
aliases:
|
||||
- ../../plugins/development/
|
||||
- /docs/grafana/next/plugins/apps/
|
||||
- /docs/grafana/next/plugins/datasources/
|
||||
- /docs/grafana/next/plugins/developing/development/
|
||||
- /docs/grafana/next/plugins/panels/
|
||||
title: Legacy plugins
|
||||
description: Deprecated guide for Angular plugin development.
|
||||
weight: 600
|
||||
---
|
||||
|
||||
# Legacy plugins
|
||||
# Work with legacy plugins
|
||||
|
||||
> **Note:** Since Grafana 7.0, writing plugins using Angular is no longer recommended. If you're looking to build a new plugin, refer to [Plugins]({{< relref "../" >}}).
|
||||
> **Note:** Since Grafana 7.0, writing plugins using Angular is no longer recommended. If you're looking to build a new plugin, refer to our [Plugins]({{< relref "../../plugins" >}}) documentation.
|
||||
|
||||
You can extend Grafana by writing your own plugins and then share them with other users in [our plugin repository](https://grafana.com/plugins).
|
||||
You can extend Grafana by writing your own plugins and then share them with other users in [our plugin repository](/plugins/).
|
||||
|
||||
Grafana already has a strong community of contributors and plugin developers. By making it easier to develop and install plugins with resources such as this guide, we hope that the community can grow even stronger and develop new plugins that we would never think about.
|
||||
|
||||
@ -32,7 +34,7 @@ Example plugins
|
||||
|
||||
You might also be interested in the available tutorials around authoring a plugin.
|
||||
|
||||
- [Grafana Tutorials](https://grafana.com/tutorials/)
|
||||
- [Grafana Tutorials]({{< relref "../create-a-grafana-plugin/develop-a-plugin" >}})
|
||||
|
||||
## What languages?
|
||||
|
||||
@ -40,29 +42,29 @@ Since everything turns into JavaScript, it's up to you to choose which language
|
||||
|
||||
## Buildscript
|
||||
|
||||
You can use any build system that supports systemjs. All the built content should end up in a folder named `dist` and be committed to the repository. By committing the dist folder, the person who installs your plugin does not have to run any build script. All of our example plugins have a build script configured.
|
||||
You can use any build system that supports `systemjs`. All the built content should end up in a folder named `dist` and be committed to the repository. By committing the dist folder, the person who installs your plugin does not have to run any build script. All of our example plugins have a build script configured.
|
||||
|
||||
## Keep your plugin up to date
|
||||
|
||||
New versions of Grafana can sometimes cause plugins to break. See our [documentation](https://grafana.com/docs/grafana/latest/developers/plugins/migration-guide/) for changes in
|
||||
New versions of Grafana can sometimes cause plugins to break. See our [documentation]({{< relref "../migration-guide" >}}) for changes in
|
||||
Grafana that can impact your plugin.
|
||||
|
||||
## Metadata
|
||||
|
||||
See the [coding styleguide]({{< relref "style-guide/" >}}) for details on the metadata.
|
||||
See the [coding styleguide]({{< relref "./style-guide.md" >}}) for details on the metadata.
|
||||
|
||||
## module.(js|ts)
|
||||
|
||||
This is the entry point for every plugin. This is the place where you should export
|
||||
your plugin implementation. Depending on what kind of plugin you are developing you
|
||||
will be expected to export different things. You can find what's expected for [datasource]({{< relref "data-sources/" >}}), [panels]({{< relref "panels/" >}})
|
||||
and [apps]({{< relref "apps/" >}}) plugins in the documentation.
|
||||
will be expected to export different things. You can find what's expected for [datasource]({{< relref "./data-sources.md" >}}), [panels]({{< relref "./panels.md" >}})
|
||||
and [apps]({{< relref "./apps.md" >}}) plugins in the documentation.
|
||||
|
||||
The Grafana SDK is quite small so far and can be found here:
|
||||
|
||||
- [SDK file in Grafana](https://github.com/grafana/grafana/blob/main/public/app/plugins/sdk.ts)
|
||||
|
||||
The SDK contains three different plugin classes: PanelCtrl, MetricsPanelCtrl and QueryCtrl. For plugins of the panel type, the module.js file should export one of these. There are some extra classes for [data sources]({{< relref "data-sources/" >}}).
|
||||
The SDK contains three different plugin classes: PanelCtrl, MetricsPanelCtrl and QueryCtrl. For plugins of the panel type, the module.js file should export one of these. There are some extra classes for [data sources]({{< relref "./data-sources.md" >}}).
|
||||
|
||||
Example:
|
||||
|
||||
@ -91,7 +93,7 @@ export { WorldmapCtrl as PanelCtrl };
|
||||
There are three ways that you can start developing a Grafana plugin.
|
||||
|
||||
1. Set up a Grafana development environment. [(described here)](https://github.com/grafana/grafana/blob/main/contribute/developer-guide.md) and place your plugin in the `data/plugins` folder.
|
||||
1. Install Grafana and place your plugin in the plugins directory which is set in your [config file](/administration/configuration). By default this is `/var/lib/grafana/plugins` on Linux systems.
|
||||
1. Install Grafana and place your plugin in the plugins directory which is set in your config file. By default this is `/var/lib/grafana/plugins` on Linux systems.
|
||||
1. Place your plugin directory anywhere you like and specify it grafana.ini.
|
||||
|
||||
We encourage people to set up the full Grafana environment so that you can get inspiration from the rest of the Grafana code base.
|
||||
@ -110,7 +112,7 @@ There are a number of Grafana events that a plugin can hook into:
|
||||
- `data-snapshot-load` is an event triggered to load data when in snapshot mode.
|
||||
- `data-error` is used to handle errors on dashboard refresh.
|
||||
|
||||
If a panel receives data and hooks into the `data-received` event then it should handle snapshot mode too. Otherwise the panel will not work if saved as a snapshot. [Getting Plugins to work in Snapshot Mode]({{< relref "snapshot-mode/" >}}) describes how to add support for this.
|
||||
If a panel receives data and hooks into the `data-received` event then it should handle snapshot mode too. Otherwise the panel will not work if saved as a snapshot. [Getting Plugins to work in Snapshot Mode]({{< relref "./snapshot-mode" >}}) describes how to add support for this.
|
||||
|
||||
## Examples
|
||||
|
||||
@ -124,9 +126,9 @@ We have three different examples that you can fork/download to get started devel
|
||||
|
||||
## Other Articles
|
||||
|
||||
- [Getting Plugins to work in Snapshot Mode]({{< relref "snapshot-mode/" >}})
|
||||
- [Plugin Defaults and Editor Mode]({{< relref "defaults-and-editor-mode/" >}})
|
||||
- [Grafana Plugin Code Styleguide]({{< relref "style-guide/" >}})
|
||||
- [Grafana Apps]({{< relref "apps/" >}})
|
||||
- [Grafana Data Sources]({{< relref "data-sources/" >}})
|
||||
- [plugin.json Schema]({{< relref "../metadata/" >}})
|
||||
- [Getting Plugins to work in Snapshot Mode]({{< relref "./snapshot-mode.md" >}})
|
||||
- [Plugin Defaults and Editor Mode]({{< relref "./defaults-and-editor-mode.md" >}})
|
||||
- [Grafana Plugin Code Styleguide]({{< relref "./style-guide.md" >}})
|
||||
- [Grafana Apps]({{< relref "./apps.md" >}})
|
||||
- [Grafana Data Sources]({{< relref "./data-sources.md" >}})
|
||||
- [plugin.json Schema]({{< relref "../metadata.md" >}})
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
---
|
||||
title: Legacy app plugins
|
||||
aliases:
|
||||
- ../../../plugins/developing/apps/
|
||||
keywords:
|
||||
- grafana
|
||||
- plugins
|
||||
- documentation
|
||||
title: Legacy app plugins
|
||||
description: Deprecated guide for Angular plugin development.
|
||||
---
|
||||
|
||||
# Legacy app plugins
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
---
|
||||
title: Legacy data source plugins
|
||||
aliases:
|
||||
- ../../../plugins/developing/datasources/
|
||||
keywords:
|
||||
- grafana
|
||||
- plugins
|
||||
- documentation
|
||||
title: Legacy data source plugins
|
||||
description: Deprecated guide for Angular plugin development.
|
||||
---
|
||||
|
||||
# Legacy data source plugins
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Legacy defaults and editor mode
|
||||
aliases:
|
||||
- ../../../plugins/developing/defaults-and-editor-mode/
|
||||
title: Legacy defaults and editor mode
|
||||
description: Deprecated guide for Angular plugin development.
|
||||
---
|
||||
|
||||
# Legacy defaults and editor mode
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Legacy panel plugins
|
||||
aliases:
|
||||
- ../../../plugins/developing/panels/
|
||||
keywords:
|
||||
@ -6,7 +7,7 @@ keywords:
|
||||
- plugins
|
||||
- panel
|
||||
- documentation
|
||||
title: Legacy panel plugins
|
||||
description: Deprecated guide for Angular plugin development.
|
||||
---
|
||||
|
||||
# Legacy panel plugins
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Legacy review guidelines
|
||||
aliases:
|
||||
- ../../../plugins/developing/plugin-review-guidelines/
|
||||
title: Legacy review guidelines
|
||||
description: Deprecated guide for Angular plugin development.
|
||||
---
|
||||
|
||||
# Legacy review guidelines
|
||||
@ -10,7 +11,7 @@ The Grafana team reviews all plugins that are published on Grafana.com. There ar
|
||||
|
||||
## Metadata
|
||||
|
||||
The plugin metadata consists of a `plugin.json` file and the README.md file. The `plugin.json` file is used by Grafana to load the plugin, and the README.md file is shown in the plugins section of Grafana and the plugins section of https://grafana.com.
|
||||
The plugin metadata consists of a `plugin.json` file and the README.md file. The `plugin.json` file is used by Grafana to load the plugin, and the README.md file is shown in the [plugins catalog](/plugins).
|
||||
|
||||
### README.md
|
||||
|
||||
@ -161,7 +162,7 @@ For more information about data sources, refer to the [basic guide for data sour
|
||||
|
||||
If possible, any passwords or secrets should be saved in the `secureJsonData` blob. To encrypt sensitive data, the Grafana server's proxy feature must be used. The Grafana server has support for token authentication (OAuth) and HTTP Header authentication. If the calls have to be sent directly from the browser to a third-party API, this will not be possible and sensitive data will not be encrypted.
|
||||
|
||||
Read more here about how [authentication for data sources]({{< relref "../add-authentication-for-data-source-plugins/" >}}) works.
|
||||
Read more here about how [authentication for data sources]({{< relref "../create-a-grafana-plugin/extend-a-plugin/add-authentication-for-data-source-plugins" >}}) works.
|
||||
|
||||
If using the proxy feature, the Configuration page should use the `secureJsonData` blob like this:
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Legacy snapshot mode
|
||||
aliases:
|
||||
- ../../../plugins/developing/snapshot-mode/
|
||||
title: Legacy snapshot mode
|
||||
description: Deprecated guide for Angular plugin development.
|
||||
---
|
||||
|
||||
# Legacy snapshot mode
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Legacy code style guide
|
||||
aliases:
|
||||
- ../../../plugins/developing/code-styleguide/
|
||||
title: Legacy code style guide
|
||||
description: Deprecated guide for Angular plugin development.
|
||||
---
|
||||
|
||||
# Legacy code style guide
|
||||
@ -27,7 +28,7 @@ grafana-piechart-panel
|
||||
mtanda-histogram-panel
|
||||
```
|
||||
|
||||
For more information about the file format for `plugin.json` file, refer to [metadata]({{< relref "../metadata/" >}}).
|
||||
For more information about the file format for `plugin.json` file, refer to [metadata]({{< relref "../metadata.md" >}}).
|
||||
|
||||
Minimal plugin.json:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user