You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|[app-basic](examples/app-basic)|demonstrates how to build a basic app plugin that uses custom routing.|
10
-
|[app-with-dashboards](examples/app-with-dashboards)|demonstrates how to include pre-built dashboards in an app plugin.|
11
-
|[app-with-backend](examples/app-with-backend)|demonstrates how to build an app plugin with its own backend.|
12
-
|[app-with-extensions](examples/app-with-extensions)|demonstrates how to build an app plugin that extends the Grafana core ui.|
13
-
|[app-with-extension-point](examples/app-with-extension-point)|demonstrates how to add an extension point in the plugin UI that can be extended by other plugins |
14
-
|[app-with-scenes](examples/app-with-scenes)|demonstrates how to build a basic app with [@grafana/scenes](https://github.com/grafana/scenes/)|
9
+
|[app-basic](examples/app-basic)|Shows how to build a basic app plugin that uses custom routing |
10
+
|[app-with-dashboards](examples/app-with-dashboards)|Shows how to include pre-built dashboards in an app plugin |
11
+
|[app-with-backend](examples/app-with-backend)|Shows how to build an app plugin with its own backend |
12
+
|[app-with-extensions](examples/app-with-extensions)|Shows how to build an app plugin that extends the Grafana core UI|
13
+
|[app-with-extension-point](examples/app-with-extension-point)|Shows how to add an extension point in the plugin UI that can be extended by other plugins |
14
+
|[app-with-scenes](examples/app-with-scenes)|Shows how to build a basic app with [@grafana/scenes](https://github.com/grafana/scenes/)|
|[panel-flot](examples/panel-flot)|demonstrates how to use the [Flot](http://www.flotcharts.org) plotting library in a panel plugin. |
21
-
|[panel-frame-select](examples/panel-frame-select)|demonstrates how to update panel options with values from a data query response. |
22
-
|[panel-plotly](examples/panel-plotly)|demonstrates how to use the [Plotly](https://plotly.com/javascript/) graphing library in a panel plugin. |
23
-
|[panel-scatterplot](examples/panel-scatterplot)|demonstrates how to use D3 and SVG to create a scatter plot panel. |
24
-
|[panel-visx](examples/panel-visx)|demonstrates how to use [visx](https://github.com/airbnb/visx) to create a time series graph. |
25
-
|[panel-basic](examples/panel-basic)|demonstrates how to build a panel plugin that uses the time series graph from `@grafana/ui` to read and update the dashboard time range. |
26
-
|[panel-datalinks](examples/panel-datalinks)|demonstrates how to build a panel plugin that uses the datalinks functionality of Grafana. |
20
+
|[panel-flot](examples/panel-flot)|Shows how to use the [Flot](http://www.flotcharts.org) plotting library in a panel plugin. |
21
+
|[panel-frame-select](examples/panel-frame-select)|Shows how to update panel options with values from a data query response. |
22
+
|[panel-plotly](examples/panel-plotly)|Shows how to use the [Plotly](https://plotly.com/javascript/) graphing library in a panel plugin. |
23
+
|[panel-scatterplot](examples/panel-scatterplot)|Shows how to use D3 and SVG to create a scatter plot panel. |
24
+
|[panel-visx](examples/panel-visx)|Shows how to use [visx](https://github.com/airbnb/visx) to create a time series graph. |
25
+
|[panel-basic](examples/panel-basic)|Shows how to build a panel plugin that uses the time series graph from `@grafana/ui` to read and update the dashboard time range. |
26
+
|[panel-datalinks](examples/panel-datalinks)|Shows how to build a panel plugin that uses the datalinks functionality of Grafana. |
|[datasource-http](examples/datasource-http)|demonstrates how to query data from HTTP-based APIs. The HTTP call happens on the frontend. |
33
-
|[datasource-http-backend](examples/datasource-http-backend)|demonstrates how to query data from HTTP-based APIs, where the HTTP calls happens on the backend. Supports alerting. |
34
-
|[datasource-streaming-websocket](examples/datasource-streaming-websocket)|demonstrates how to create an event-based data source plugin using RxJS and web sockets. |
35
-
|[datasource-streaming-backend-websocket](examples/datasource-streaming-backend-websocket)|demonstrates how to create an event-based data source plugin using backend streams. |
36
-
|[datasource-basic](examples/datasource-basic)|demonstrates how to build a basic data source plugin. |
32
+
|[datasource-http](examples/datasource-http)|Shows how to query data from HTTP-based APIs. The HTTP call happens on the frontend. |
33
+
|[datasource-http-backend](examples/datasource-http-backend)|Shows how to query data from HTTP-based APIs, where the HTTP calls happens on the backend. Supports alerting. |
34
+
|[datasource-streaming-websocket](examples/datasource-streaming-websocket)|Shows how to create an event-based data source plugin using RxJS and WebSockets. |
35
+
|[datasource-streaming-backend-websocket](examples/datasource-streaming-backend-websocket)|Shows how to create an event-based data source plugin using backend streams. |
36
+
|[datasource-basic](examples/datasource-basic)|Shows how to build a basic data source plugin. |
37
37
38
38
## Integration tests
39
39
@@ -45,7 +45,7 @@ Some of the examples in this repository contain integration tests that make use
45
45
46
46
### Testing against latest versions of Grafana
47
47
48
-
There is a github workflow `.github/workflows/integration-tests.yml`which finds all plugin examples identified by the existence of `src/plugin.json`. For every example plugin build scripts will be run to confirm the plugins can be built against intended and canary npm packages. Any example plugin that has a cypress directory defined it will run the following:
48
+
The GitHub workflow `.github/workflows/integration-tests.yml` finds all plugin examples identified by the existence of `src/plugin.json`. For every example plugin build scripts will be run to confirm the plugins can be built against intended and canary NPM packages. Any example plugin that has a cypress directory defined will run the following:
49
49
50
50
1. Build the plugin with the provided version of Grafana packages and test against the provided version of Grafana
51
51
-_asserting the plugin works with its expected versions_
@@ -58,29 +58,29 @@ There is a github workflow `.github/workflows/integration-tests.yml` which finds
58
58
59
59
All of the examples use [grafana/create-plugin](https://grafana.com/developers/plugin-tools) instead of `@grafana/toolkit`.
60
60
61
-
You can read more about customizing and extending the base configuration [here](https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations)
61
+
You can read more about customizing and extending the base configuration in our [documentation](https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations).
62
62
63
63
## API Compatibility
64
64
65
-
If your plugin uses typescript you can use [`@grafana/levitate`](https://github.com/grafana/levitate/) to test if the Grafana APIs your plugin is using are compatible with a certain version of Grafana.
65
+
If your plugin uses TypeScript, then you can use [`@grafana/levitate`](https://github.com/grafana/levitate/) to test if the Grafana APIs your plugin is using are compatible with a certain version of Grafana.
66
66
67
-
e.g. to see a compatibility report of your plugin code and the latest release of the grafana APIs
67
+
For example, to see a compatibility report of your plugin code and the latest release of the grafana APIs, use:
The following github workflow example can be used in your project to keep an eye on the compatibility of your plugin and the grafana API.
81
+
The following GitHub workflow example can be used in your project to keep an eye on the compatibility of your plugin and the grafana API.
82
82
83
-
If you host your project in GitHub and want to use [GitHub Actions](https://docs.github.com/en/actions). You could create a new file in your project in `.github/workflows/levitate.yml` and put the following content:
83
+
If you host your project in GitHub and want to use [GitHub Actions](https://docs.github.com/en/actions), then you could create a new file in your project in `.github/workflows/levitate.yml` and add the following content:
84
84
85
85
```yaml
86
86
name: Compatibility check
@@ -106,6 +106,6 @@ jobs:
106
106
fail-if-incompatible: "no"
107
107
```
108
108
109
-
This will run a compatibility check for the latest release of grafana plugins API in your project everytime a new push or pull request is open. If it reports an error you will see a message indicating you have an incompatibility.
109
+
This runs a compatibility check for the latest release of Grafana plugins API in your project every time a new push or pull request is open. If it finds an error you will see a message indicating you have an incompatibility.
110
110
111
-
Sometimes incompatibilities are minor. e.g. a type changed but this doesn't affect your plugin. We advice you to upgrade your grafana dependencies if this is the case so you always use the latest API.
111
+
Sometimes incompatibilities are minor. For example, a type changed but this doesn't affect your plugin. We recommend that you upgrade your Grafana dependencies if this is the case so you always use the latest API.
Copy file name to clipboardExpand all lines: examples/app-with-backend/README.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
-
# Grafana App with Backend Plugin Template
1
+
# Grafana App with Backend Plugin example
2
2
3
3
This template is a starting point for building an app plugin for Grafana. It includes a backend component.
4
4
5
5
## What are Grafana app plugins?
6
6
7
-
App plugins can let you create a custom out-of-the-box monitoring experience by custom pages, nested datasources and panel plugins. A backend allows it to perform a variety of additional tasks, like handling incoming HTTP requests.
7
+
App plugins can let you create a custom out-of-the-box monitoring experience by including custom pages, nested data sources, and panel plugins. A backend allows it to perform a variety of additional tasks, like handling incoming HTTP requests.
8
8
9
-
## Getting started
9
+
## Get started
10
10
11
11
### Frontend
12
12
@@ -95,4 +95,4 @@ Below you can find source code for existing app plugins and other related docume
# Grafana App Plugin which adds a plugin UI extension point
1
+
# Grafana App Plugin with UI extension point example
2
2
3
3
This example demonstrates how to add a plugin extension point that can be extended by other plugins. It works by bundling three different app plugins within the same bundle. First we have the `myorg-extensionpoint-app` that creates an extension point. Then we have the `src/plugins/myorg-a-app` and `src/plugins/myorg-b-app` that extends the `myorg-extensionpoint-app` UI with links.
4
4
@@ -8,27 +8,27 @@ This example demonstrates how to add a plugin extension point that can be extend
The first thing you need to do is to define a id for your extension point. Each extension point needs an unique identifier that other plugins can reference when adding extensions. It should be in the following format: `plugins/<your-plugin-id>/<extension-name>`, where:
17
+
1. Define an ID for your extension point. Each extension point needs an unique identifier that other plugins can reference when adding extensions. It should be in the following format: `plugins/<your-plugin-id>/<extension-name>`, where:
18
18
19
-
-`<your-plugin-id>` is the full ID of your plugin, e.g. `"myorg-b-app"`
20
-
-`<extension-name>` is an identifier for the extension point, unique inside your plugin, e.g. `"header"`
19
+
-`<your-plugin-id>` is the full ID of your plugin, e.g.,`"myorg-b-app"`
20
+
-`<extension-name>` is an identifier for the extension point, unique inside your plugin, e.g. `"header"`
21
21
22
-
The next thing you need to do is to call`getPluginExtensions` with the defined `pluginExtensionId` and Grafana will return all extensions added for that placement.
22
+
2. Call`getPluginExtensions` with the defined `pluginExtensionId` and Grafana will return all extensions added for that placement.
> Note! This feature is available in Grafana 9.5 and above
3
+
> Note: This feature is available in Grafana 9.5 and later versions.
4
4
5
-
This example demonstrates how to extend the core Grafana UI with plugin extensions. The only thing you need to do is to configure your extension points in your app. See`src/module.tsx` for a full example.
5
+
This example demonstrates how to extend the core Grafana UI with plugin extensions. The only thing you need to do is to configure your extension points in your app. Refer to`src/module.tsx` for a full example.
0 commit comments