From aa7a6b303819808dac78804efebb45f77c50f35b Mon Sep 17 00:00:00 2001 From: Joseph Perez <45749060+josmperez@users.noreply.github.com> Date: Fri, 17 Nov 2023 13:43:54 -0800 Subject: [PATCH] Docs: Add plugin examples folder (#542) Co-authored-by: Giuseppe Guerra --- .../docs/plugin-examples/_category_.json | 6 +++ docusaurus/docs/plugin-examples/index.md | 37 +++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 docusaurus/docs/plugin-examples/_category_.json create mode 100644 docusaurus/docs/plugin-examples/index.md diff --git a/docusaurus/docs/plugin-examples/_category_.json b/docusaurus/docs/plugin-examples/_category_.json new file mode 100644 index 000000000..c5ba6b418 --- /dev/null +++ b/docusaurus/docs/plugin-examples/_category_.json @@ -0,0 +1,6 @@ +{ + "position": 55, + "label": "Plugin examples", + "collapsible": true, + "collapsed": true +} diff --git a/docusaurus/docs/plugin-examples/index.md b/docusaurus/docs/plugin-examples/index.md new file mode 100644 index 000000000..81675ab77 --- /dev/null +++ b/docusaurus/docs/plugin-examples/index.md @@ -0,0 +1,37 @@ +--- +id: plugin-examples +title: Grafana plugin examples +description: Sample plugins on GitHub for reference when building your own plugins. +keywords: + - grafana + - plugins + - plugin + - samples + - examples +--- + +Sample plugins give you insights into the structure, features, and implementation details of [several types](../introduction/plugin-types-usage.md) of Grafana plugins. These are real-world code examples that you can study and even reuse in your projects. + +The following lists describe some of our popular plugins. For a complete list, see the [README](https://github.com/grafana/grafana-plugin-examples/tree/main#readme). + +## Panel plugins + +- [**panel-basic:**](https://github.com/grafana/grafana-plugin-examples/tree/main/examples/panel-basic) This is a good starting point for creating a simple panel plugin to visualize data, navigate dashboards, or control devices. +- [**panel-frame-select:**](https://github.com/grafana/grafana-plugin-examples/tree/main/examples/panel-frame-select) This example shows how to update panel options with values from a data query response. + +## Data source plugins + +- [**datasource-basic:**](https://github.com/grafana/grafana-plugin-examples/tree/main/examples/datasource-basic) This app shows how to integrate a new data source including in-house metrics applications into a data source plugin. +- [**datasource-http-backend:**](https://github.com/grafana/grafana-plugin-examples/tree/main/examples/datasource-http-backend) This app demonstrates how to query data from HTTP-based APIs, where the HTTP calls happen on the backend. Supports alerting. +- [**datasource-logs:**](https://github.com/grafana/grafana-plugin-examples/tree/main/examples/datasource-logs) This app shows how to create a data source plugin with logging features. +- [**datasource-streaming:**](https://github.com/grafana/grafana-plugin-examples/tree/main/examples/datasource-streaming-websocket) Update visualizations in real time using RxJS and WebSockets. + +## App plugins + +- [**app-basic:**](https://github.com/grafana/grafana-plugin-examples/blob/main/examples/app-basic/) This app plugin shows how to add fundamental features such as navigation, routing, styling, and configuration. +- [**app-with-backend:**](https://github.com/grafana/grafana-plugin-examples/tree/main/examples/app-with-backend) This app plugin adds support for a backend including handling incoming HTTP requests. +- [**app-with-dashboards:**](https://github.com/grafana/grafana-plugin-examples/tree/main/examples/app-with-dashboards) This example shows how to include pre-built dashboards with your app plugin. +- [**app-with-extension-point:**](https://github.com/grafana/grafana-plugin-examples/tree/main/examples/app-with-extension-point) This example shows how to add a plugin extension point that can be extended by other plugins. +- [**app-with-scenes:**](https://github.com/grafana/grafana-plugin-examples/tree/main/examples/app-with-scenes) Build a basic app plugin using the @grafana/scenes framework. This example shows examples of custom pages, nested data sources, and panel plugins. + +Refer to the Grafana plugin examples [README](https://github.com/grafana/grafana-plugin-examples/tree/main#readme) for more information on usage, testing, and API compatibility.