diff --git a/examples/datasource-basic/README.md b/examples/datasource-basic/README.md index dbe7d0092..7c7904f4e 100644 --- a/examples/datasource-basic/README.md +++ b/examples/datasource-basic/README.md @@ -1,26 +1,26 @@ -# Grafana Data Source Plugin Template +# Grafana Basic Data Source Plugin example [![Build](https://github.com/grafana/grafana-starter-datasource/workflows/CI/badge.svg)](https://github.com/grafana/grafana-starter-datasource/actions?query=workflow%3A%22CI%22) -This template is a starting point for building Grafana Data Source Plugins +This template is a starting point for building Grafana data source plugins. -## What is Grafana Data Source Plugin? +## What is a Grafana data source plugin? -Grafana supports a wide range of data sources, including Prometheus, MySQL, and even Datadog. There’s a good chance you can already visualize metrics from the systems you have set up. In some cases, though, you already have an in-house metrics solution that you’d like to add to your Grafana dashboards. Grafana Data Source Plugins enables integrating such solutions with Grafana. +Grafana supports a wide range of data sources, including Prometheus, MySQL, and even Datadog. There’s a good chance you can already visualize metrics from the systems you have set up. In some cases, though, you already have an in-house metrics solution that you’d like to add to your Grafana dashboards. Grafana data source plugins enable you to integrate such solutions with Grafana. -## Getting started +## Get started A data source backend plugin consists of both frontend and backend components. ### Frontend -1. Install dependencies +1. Install dependencies: ```bash yarn install ``` -2. Build plugin in development mode or run in watch mode +2. Build plugin in development mode or run in watch mode: ```bash yarn dev @@ -32,7 +32,7 @@ A data source backend plugin consists of both frontend and backend components. yarn watch ``` -3. Build plugin in production mode +3. Build plugin in production mode: ```bash yarn build @@ -62,7 +62,6 @@ A data source backend plugin consists of both frontend and backend components. ## Learn more -- [Build a data source plugin tutorial](https://grafana.com/tutorials/build-a-data-source-plugin) -- [Grafana documentation](https://grafana.com/docs/) -- [Grafana Tutorials](https://grafana.com/tutorials/) - Grafana Tutorials are step-by-step guides that help you make the most of Grafana +- [Grafana plugins documentation](https://grafana.com/developers/plugin-tools/) +- [Build a data source plugin tutorial](https://grafana.com/developers/plugin-tools/tutorials/build-a-data-source-plugin) - [Grafana UI Library](https://developers.grafana.com/ui) - UI components to help you build interfaces using Grafana Design System diff --git a/examples/datasource-http-backend/README.md b/examples/datasource-http-backend/README.md index 5ea839940..13c5854d0 100644 --- a/examples/datasource-http-backend/README.md +++ b/examples/datasource-http-backend/README.md @@ -1,18 +1,17 @@ -# Grafana Data Source Plugin Template +# Grafana Data Source HTTP Backend Plugin example -This example queries data from an HTTP API, which returns data in JSON format and then it's converted to data frames. +This example queries data from an HTTP API. The HTTP API returns data in JSON format, which is then converted to data frames. -This differs from the datasource-http example, because the data fetching happens in the plugin backend rather than going through Grafana's datasource HTTP proxy. +This differs from the `datasource-http` example because the data fetching happens in the plugin backend rather than going through Grafana's data source HTTP proxy. -This allows to use the data source for alerting as well, as the query are executed on the backend. +This allows the plugin to use the data source for alerting as well, as the queries are executed on the backend. This plugin example also showcases other features and best-practices of backend plugins: -- Using the httpclient provided by the Grafana Plugins SDK +- Using the `httpclient` provided by the [Grafana plugins SDK](https://pkg.go.dev/github.com/grafana/grafana-plugin-sdk-go/backend/httpclient) - Tracing, for better instrumentation of your plugin -This plugin example also includes an example server returning data in the format expected by this plugin (`cmd/server`). -Refer to the section below on how to build and run it. +This plugin example also includes an example server returning data in the format expected by this plugin (`cmd/server`). Refer to the section below on how to build and run it. ## External service @@ -52,7 +51,7 @@ $ ./cmd/server/server :10000 2022/10/28 15:43:16 listening on :10000 ``` -Then, add a new data source in Grafana and use the following url: +Then, add a new data source in Grafana and use the following URL: ``` http://127.0.0.1:10000/metrics diff --git a/examples/datasource-http/README.md b/examples/datasource-http/README.md index 775e9987b..363029e77 100644 --- a/examples/datasource-http/README.md +++ b/examples/datasource-http/README.md @@ -1,3 +1,3 @@ -# Grafana Data Source Plugin Template +# Grafana Data Source Plugin HTTP example This example queries data from an HTTP API. diff --git a/examples/datasource-logs/README.md b/examples/datasource-logs/README.md index de2e1d8c2..24466369c 100644 --- a/examples/datasource-logs/README.md +++ b/examples/datasource-logs/README.md @@ -1,3 +1,3 @@ -# Example of Grafana data source plugin with logs feature +# Grafana Data Source Plugin with Logs example -Example of a data source plugin that implements logging features. You can find more in https://grafana.com/docs/grafana/next/developers/plugins/create-a-grafana-plugin/develop-a-plugin/build-a-logs-data-source-plugin/. \ No newline at end of file +This is an example of a data source plugin that implements logging features. You can learn more in our [documentation](https://grafana.com/developers/plugin-tools/tutorials/build-a-logs-data-source-plugin). \ No newline at end of file diff --git a/examples/datasource-streaming-backend-websocket/README.md b/examples/datasource-streaming-backend-websocket/README.md index 28c7ac0b2..46a6c397c 100644 --- a/examples/datasource-streaming-backend-websocket/README.md +++ b/examples/datasource-streaming-backend-websocket/README.md @@ -1,4 +1,4 @@ -# Datasource Streaming Backend example +# Grafana Data Source Streaming Backend Plugin example This is an example of how to implement a Grafana data source plugin with streaming backend support. @@ -15,7 +15,7 @@ yarn install yarn build ``` -and run the grafana and the example websocket server with docker compose: +and run the Grafana and the example websocket server with Docker compose: ```sh cd streaming-backend-websocket-plugin @@ -24,7 +24,7 @@ docker compose up -d # or docker-compse up -d for old docker versions The server can be accessed by the Grafana backend in `ws://websocket-server:8080`. -Check the [`docker-compose.yaml`](./streaming-backend-websocket-plugin/docker-compose.yaml) for more details. +Refer to the [`docker-compose.yaml`](./streaming-backend-websocket-plugin/docker-compose.yaml) for more details. The example server sends random numbers controlled by a query parameter. diff --git a/examples/datasource-streaming-websocket/README.md b/examples/datasource-streaming-websocket/README.md index c3eb11f86..047e31000 100644 --- a/examples/datasource-streaming-websocket/README.md +++ b/examples/datasource-streaming-websocket/README.md @@ -1,4 +1,4 @@ -# Streaming example +# Grafana Streaming Data Source WebSocket Plugin example This is an example of how to implement a Grafana data source plugin with streaming support. @@ -11,7 +11,7 @@ This is an example of how to implement a Grafana data source plugin with streami yarn dev ``` -- Build the data source plugin +- Build the data source plugin: ``` cd streaming-plugin diff --git a/examples/panel-basic/README.md b/examples/panel-basic/README.md index ac005a3b5..2c38216cd 100644 --- a/examples/panel-basic/README.md +++ b/examples/panel-basic/README.md @@ -1,8 +1,8 @@ -# Grafana Panel Plugin Template +# Grafana Basic Panel Plugin example This is an example on how to build a basic panel plugin. -## What is Grafana Panel Plugin? +## What is a Grafana panel plugin? Panel plugins allow you to add new types of visualizations to your dashboard, such as maps, clocks, pie charts, lists, and more. @@ -10,13 +10,13 @@ Use panel plugins when you want to do things like visualize data returned by dat ## Getting started -1. Install dependencies +1. Install dependencies: ```bash yarn install ``` -2. Build plugin in development mode and run inside Grafana using Docker +2. Build plugin in development mode and run inside Grafana using Docker: ```bash # Start watching for changes @@ -26,13 +26,13 @@ Use panel plugins when you want to do things like visualize data returned by dat docker-compose up ``` -3. Build plugin in production mode +3. Build plugin in production mode: ```bash yarn build ``` -4. Run e2e tests +4. Run e2e tests: ```bash yarn e2e @@ -40,7 +40,6 @@ Use panel plugins when you want to do things like visualize data returned by dat ## Learn more -- [Build a panel plugin tutorial](https://grafana.com/tutorials/build-a-panel-plugin/) -- [Grafana documentation](https://grafana.com/docs/) -- [Grafana Tutorials](https://grafana.com/tutorials/) - Grafana Tutorials are step-by-step guides that help you make the most of Grafana +- [Build a panel plugin tutorial](https://grafana.com/developers/plugin-tools/tutorials/build-a-panel-plugin) +- [Grafana plugins documentation](https://grafana.com/developers/plugin-tools/) - [Grafana UI Library](https://developers.grafana.com/ui) - UI components to help you build interfaces using Grafana Design System diff --git a/examples/panel-datalinks/README.md b/examples/panel-datalinks/README.md index 06b955765..95d37719d 100644 --- a/examples/panel-datalinks/README.md +++ b/examples/panel-datalinks/README.md @@ -1,6 +1,6 @@ -# Grafana Panel Plugin Template +# Grafana Panel Plugin with Datalinks example -This template is a starting point for building a panel plugin for Grafana. +This template is a starting point for building a panel plugin with data links for Grafana. ## What are Grafana panel plugins? @@ -8,17 +8,17 @@ Panel plugins allow you to add new types of visualizations to your dashboard, su Use panel plugins when you want to do things like visualize data returned by data source queries, navigate between dashboards, or control external systems (such as smart home devices). -## Getting started +## Get started ### Frontend -1. Install dependencies +1. Install dependencies: ```bash yarn install ``` -2. Build plugin in development mode or run in watch mode +2. Build plugin in development mode or run in watch mode: ```bash yarn dev @@ -28,13 +28,13 @@ Use panel plugins when you want to do things like visualize data returned by dat yarn watch ``` -3. Build plugin in production mode +3. Build plugin in production mode: ```bash yarn build ``` -4. Run the tests (using Jest) +4. Run the tests (using Jest): ```bash # Runs the tests and watches for changes @@ -44,13 +44,13 @@ Use panel plugins when you want to do things like visualize data returned by dat yarn lint:ci ``` -5. Spin up a Grafana instance and run the plugin inside it (using Docker) +5. Spin up a Grafana instance and run the plugin inside it (using Docker): ```bash yarn server ``` -6. Run the E2E tests (using Cypress) +6. Run the E2E tests (using Cypress): ```bash # Spin up a Grafana instance first that we tests against @@ -60,7 +60,7 @@ Use panel plugins when you want to do things like visualize data returned by dat yarn e2e ``` -7. Run the linter +7. Run the linter: ```bash yarn lint @@ -76,4 +76,4 @@ Below you can find source code for existing app plugins and other related docume - [Basic panel plugin example](https://github.com/grafana/grafana-plugin-examples/tree/master/examples/panel-basic#readme) - [Plugin.json documentation](https://grafana.com/developers/plugin-tools/reference-plugin-json) -- [How to sign a plugin?](https://grafana.com/developers/plugin-tools/publish-a-plugin/sign-a-plugin/) +- [Sign a plugin](https://grafana.com/developers/plugin-tools/publish-a-plugin/sign-a-plugin/) diff --git a/examples/panel-flot/README.md b/examples/panel-flot/README.md index ed9fd554e..111869d92 100644 --- a/examples/panel-flot/README.md +++ b/examples/panel-flot/README.md @@ -1,4 +1,4 @@ -# Grafana panel plugin template +# Grafana Panel Plugin with Flot example This example uses the [Flot](https://www.flotcharts.org) library to plot graphs. diff --git a/examples/panel-frame-select/README.md b/examples/panel-frame-select/README.md index 20f0fc90b..f0ea926dd 100644 --- a/examples/panel-frame-select/README.md +++ b/examples/panel-frame-select/README.md @@ -1,5 +1,5 @@ -# Grafana Panel Plugin Template +# Grafana Panel Plugin with Frame Select example This example shows how you can set panel options based on the response from a data query. -Using the `onOptionsChange` prop from `PanelProps`, you can update the value of panel options. +You can use the `onOptionsChange` prop from `PanelProps` to update the value of panel options. diff --git a/examples/panel-plotly/README.md b/examples/panel-plotly/README.md index 4be0586ba..564e743f0 100644 --- a/examples/panel-plotly/README.md +++ b/examples/panel-plotly/README.md @@ -1,10 +1,10 @@ -# Grafana Panel Plugin Template +# Grafana Panel Plugin with Plotly example This example uses the [Plotly](https://plotly.com/) library to plot graphs. ## Dependencies -To add Plotly to a plugin, install the following dependencies. +To add Plotly to a plugin, install the following dependencies: ``` yarn add react-plotly.js plotly.js diff --git a/examples/panel-scatterplot/README.md b/examples/panel-scatterplot/README.md index 70dbb72eb..2999ed9d0 100644 --- a/examples/panel-scatterplot/README.md +++ b/examples/panel-scatterplot/README.md @@ -1,3 +1,3 @@ -# Grafana Panel Plugin Template +# Grafana Panel Plugin with Scatterplot example -This is an example of visualizing a scatterplot using SVG and [D3.js](https://d3js.org/). +This is a plugin example of visualizing a scatterplot using SVG and [D3.js](https://d3js.org/). diff --git a/examples/panel-visx/README.md b/examples/panel-visx/README.md index 77e3cfb7c..3ec357279 100644 --- a/examples/panel-visx/README.md +++ b/examples/panel-visx/README.md @@ -1,7 +1,7 @@ -# Grafana Panel Plugin Template +# Grafana Panel Plugin with Visx example -This example uses visx to render an SVG graph. +This plugin example uses visx to render an SVG graph. -## Read more +## Learn more [visx](https://github.com/airbnb/visx)