diff --git a/docs/sources/developers/plugins.md b/docs/sources/developers/plugins.md new file mode 100644 index 00000000000..e1c628e84d8 --- /dev/null +++ b/docs/sources/developers/plugins.md @@ -0,0 +1,71 @@ ++++ +title = "Build a plugin" +type = "docs" +[menu.docs] +parent = "developers" +identifier = "plugins" +weight = 3 ++++ + +# Build a plugin + +For more information on the types of plugins you can build, refer to the [Plugin Overview]({{< relref "../plugins/_index.md" >}}). + +## Get started + +The easiest way to start developing Grafana plugins is to use the [Grafana Toolkit](https://www.npmjs.com/package/@grafana/toolkit). + +Open the terminal, and run the following command in your [plugin directory]({{< relref "../installation/configuration/_index.md#plugins" >}}): + +```bash +npx @grafana/toolkit plugin:create my-grafana-plugin +``` + +If you want a more guided introduction to plugin development, check out our tutorials: + +- [Build a panel plugin]({{< relref "../../../../tutorials/build-a-panel-plugin.md" >}}) +- [Build a data source plugin]({{< relref "../../../../tutorials/build-a-data-source-plugin.md" >}}) + +## Go further + +Learn more about specific areas of plugin development. + +### Concepts + +Deepen your knowledge through a series of high-level overviews of plugin concepts. + +- [Data frames]({{< relref "../plugins/developing/dataframe.md" >}}) +- [Authentication for data source plugins]({{< relref "../plugins/developing/auth-for-datasources.md" >}}) + +### UI library + +Explore the many UI components in our [Grafana UI library](https://developers.grafana.com/ui). + +### Tutorials + +If you're looking to build your first plugin, check out these introductory tutorials: + +- [Build a panel plugin]({{< relref "../../../../tutorials/build-a-panel-plugin.md" >}}) +- [Build a data source plugin]({{< relref "../../../../tutorials/build-a-data-source-plugin.md" >}}) + +Ready to learn more? Check out our other tutorials: + +- [Build a panel plugin with D3.js]({{< relref "../../../../tutorials/build-a-panel-plugin-with-d3.md" >}}) + +### API reference + +Learn more about Grafana options and packages. + +#### Metadata + +- [Plugin metadata]({{< relref "../plugins/developing/plugin.json.md" >}}) + +#### Typescript + +- [Grafana Data]({{< relref "../packages_api/data/_index.md" >}}) +- [Grafana Runtime]({{< relref "../packages_api/runtime/_index.md" >}}) +- [Grafana UI]({{< relref "../packages_api/ui/_index.md" >}}) + +#### Go + +- [Grafana Plugin SDK](https://pkg.go.dev/mod/github.com/grafana/grafana-plugin-sdk-go?tab=overview) diff --git a/docs/sources/menu.yaml b/docs/sources/menu.yaml index cea3f97f4a9..1a657b6a546 100644 --- a/docs/sources/menu.yaml +++ b/docs/sources/menu.yaml @@ -282,6 +282,8 @@ - name: Plugins link: /plugins/ children: + - name: Overview + link: /plugins/ - name: Install plugins link: /plugins/installation/ - name: Develop plugins @@ -365,6 +367,8 @@ children: - name: Developer resources link: /developers/developer-resources/ + - link: /developers/plugins/ + name: Plugins - name: Packages reference link: /packages_api/ - name: Contributor License Agreement (CLA) diff --git a/docs/sources/plugins/_index.md b/docs/sources/plugins/_index.md index c5fde4dc863..82a31d0544e 100644 --- a/docs/sources/plugins/_index.md +++ b/docs/sources/plugins/_index.md @@ -4,5 +4,44 @@ type = "docs" [menu.docs] name = "Plugins" identifier = "plugins" -weight = 8 +weight = 1 +++ + +# Plugins + +Besides the wide range of visualizations and data sources that are available immediately after you install Grafana, you can extend your Grafana experience with _plugins_. + +You can [install]({{< relref "./installation.md" >}}) one of the plugins built by the Grafana community, or [build one yourself]({{< relref "./developing/development.md" >}}). + +Grafana supports three types of plugins: [panels](https://grafana.com/grafana/plugins?type=panel), [data sources](https://grafana.com/grafana/plugins?type=datasource), and [apps](https://grafana.com/grafana/plugins?type=app). + +## Panel plugins + +Add new visualizations to your dashboard with panel plugins, such as the [Worldmap Panel](https://grafana.com/grafana/plugins/grafana-worldmap-panel), [Clock](https://grafana.com/grafana/plugins/grafana-clock-panel), and [Pie Chart](https://grafana.com/grafana/plugins/grafana-piechart-panel). + +Use panel plugins when you want to: + +- Visualize data returned by data source queries. +- Navigate between dashboards. +- Control external systems, such as smart home devices. + +## Data source plugins + +Data source plugins add support for new databases, such as [Google BigQuery](https://grafana.com/grafana/plugins/doitintl-bigquery-datasource). + +Data source plugins communicate with external sources of data and return the data in a format that Grafana understands. By adding a data source plugin, you can immediately use the data in any of your existing dashboards. + +Use data source plugins when you want to import data from external systems. + +## App plugins + +Applications, or _app plugins_, bundle data sources and panels to provide a cohesive experience, such as the [Zabbix](https://grafana.com/grafana/plugins/alexanderzobnin-zabbix-app) and [Kubernetes](https://grafana.com/grafana/plugins/grafana-kubernetes-app) apps. + +Apps can also add custom pages for things like control panels. + +Use app plugins when you want to create an custom out-of-the-box monitoring experience. + +## Learn more + +- [Install plugins]({{< relref "./installation.md" >}}) +- Browse the available [Plugins](https://grafana.com/grafana/plugins)