diff --git a/examples/datasource-basic/README.md b/examples/datasource-basic/README.md index a598fe37d..e10b1c433 100644 --- a/examples/datasource-basic/README.md +++ b/examples/datasource-basic/README.md @@ -1,16 +1,17 @@ -# Grafana Basic Data Source Plugin example +# Basic Data Source Plugin for Grafana [](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 example provides a template for how to build a simple backend data source plugin. +## Overview -## What is a Grafana data source plugin? +The Basic Data Source Plugin offers a streamlined starting point for developers to understand the essential structure and functionality required for adding their own data sources to 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. +Grafana supports a wide range of data sources, including Prometheus, MySQL, and 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. ## Get started -A data source backend plugin consists of both frontend and backend components. +Data source plugins may consist of a frontend or a backend component. This example shows a data source plugin with a backend component. Install this component with the following CLI commands. ### Frontend @@ -34,7 +35,7 @@ A data source backend plugin consists of both frontend and backend components. ### Backend -1. Update [Grafana plugin SDK for Go](https://grafana.com/developers/plugin-tools/introduction/grafana-plugin-sdk-for-go) dependency to the latest minor version: +1. Update [Grafana Plugin SDK for Go](https://grafana.com/developers/plugin-tools/introduction/grafana-plugin-sdk-for-go) dependency to the latest minor version: ```bash go get -u github.com/grafana/grafana-plugin-sdk-go @@ -56,5 +57,6 @@ A data source backend plugin consists of both frontend and backend components. ## Learn more - [Grafana plugins documentation](https://grafana.com/developers/plugin-tools/) +- [Grafana UI components documentation](https://developers.grafana.com/ui/latest/index.html) - [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 +- [Grafana documentation](https://grafana.com/docs/) diff --git a/examples/datasource-http-backend/README.md b/examples/datasource-http-backend/README.md index fc18c6a95..a673dbc1f 100644 --- a/examples/datasource-http-backend/README.md +++ b/examples/datasource-http-backend/README.md @@ -1,14 +1,20 @@ -# Grafana Data Source HTTP Backend Plugin example +# Data Source HTTP Backend Plugin for Grafana + +This repository contains a backend data source plugin that queries data from an HTTP API. + +## Overview + +The Data Source HTTP Backend Plugin showcases the integration of a backend HTTP service as a custom data source within Grafana. This plugin serves as a reference implementation for developers aiming to incorporate HTTP-based data sources into their Grafana dashboards. 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 data source HTTP proxy. +This plugin 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 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](https://pkg.go.dev/github.com/grafana/grafana-plugin-sdk-go/backend/httpclient) +- Using the `httpclient` provided by the [Grafana Plugin SDK for Go](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 (`/server`). Refer to the section below on how to build and run it. @@ -26,10 +32,17 @@ The plugin expects the following JSON from a remote HTTP API: } ``` +An example HTTP server that returns dummy data in this format is included in `cmd/server`. + +## Get started + +Data source plugins consist of both frontend and backend components. Install these components with the following CLI commands. ## Building ### Frontend +Install dependencies and build: + ```bash $ npm install $ npm run build @@ -37,15 +50,34 @@ $ npm run build ### Backend +Build backend plugin binaries for Linux, Windows and Darwin: + ```bash $ mage -v ``` -### Example server +### Set up a server +1. Set up a backend server to return data: + + +```bash +$ mage server +$ ./cmd/server/server :10000 +2022/10/28 15:43:16 listening on :10000 +``` + +2. Add a new data source in Grafana and use the following URL: The mockserver required for testing has been included in the Docker Compose file Add a new data source in Grafana using the following URL: ``` http://host.docker.internal:10000/metrics ``` + +## Learn more + +- [Grafana plugins documentation](https://grafana.com/developers/plugin-tools/) +- [Grafana UI components documentation](https://developers.grafana.com/ui/latest/index.html) +- [Build a data source plugin tutorial](https://grafana.com/developers/plugin-tools/tutorials/build-a-data-source-plugin) +- [Grafana documentation](https://grafana.com/docs/) \ No newline at end of file diff --git a/examples/datasource-http/README.md b/examples/datasource-http/README.md index 363029e77..4dcb85981 100644 --- a/examples/datasource-http/README.md +++ b/examples/datasource-http/README.md @@ -1,3 +1,41 @@ -# Grafana Data Source Plugin HTTP example +# Data Source HTTP Plugin for Grafana -This example queries data from an HTTP API. +This repository contains a data source plugin that uses HTTP through Grafana's data source HTTP proxy. +## Overview + +The Grafana HTTP Data Source Plugin shows the integration of a backend HTTP service as a custom data source within Grafana. This plugin serves as a reference implementation for developers seeking to incorporate HTTP-based data sources into their Grafana dashboards. + +Grafana supports a wide range of data sources, including Prometheus, MySQL, and 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. + +This plugin differs from the `datasource-http-backend` example because the data fetching happens through Grafana's data source HTTP proxy rather than going through the plugin backend. + +## Get started + +Data source plugins consist of a frontend component. Install this component with the following CLI commands. + +### Frontend + +1. Install dependencies: + + ```bash + npm install + ``` + +2. Build plugin in development mode or run in watch mode: + + ```bash + npm run dev + ``` + +3. Build plugin in production mode: + + ```bash + npm run build + ``` + +## Learn more + +- [Grafana plugins documentation](https://grafana.com/developers/plugin-tools/) +- [Grafana UI components documentation](https://developers.grafana.com/ui/latest/index.html) +- [Build a data source plugin tutorial](https://grafana.com/developers/plugin-tools/tutorials/build-a-data-source-plugin) +- [Grafana documentation](https://grafana.com/docs/) \ No newline at end of file diff --git a/examples/datasource-logs/README.md b/examples/datasource-logs/README.md index 24466369c..f799f35bc 100644 --- a/examples/datasource-logs/README.md +++ b/examples/datasource-logs/README.md @@ -1,3 +1,29 @@ -# Grafana Data Source Plugin with Logs example +# Logs Data Source Plugin for Grafana -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 +This repository contains a data source plugin for logs. + +## Overview + +The Logs Data Source Plugin demonstrates the integration of log data sources into Grafana dashboards. This plugin serves as an example for developers who want to incorporate log data from various sources into their Grafana visualizations. + +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). + +## Get started + +Data source plugins may include both frontend and backend components. This example shows a frontend data source plugin. Install this component with the following CLI commands. + +### Frontend + +Install dependencies and build: + +```bash +$ npm install +$ npm run build +``` + +## Learn more + +- [Grafana plugins documentation](https://grafana.com/developers/plugin-tools/) +- [Grafana UI components documentation](https://developers.grafana.com/ui/latest/index.html) +- [Build a data source plugin tutorial](https://grafana.com/developers/plugin-tools/tutorials/build-a-data-source-plugin) +- [Grafana documentation](https://grafana.com/docs/) \ 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 98b7319c1..9a8c18652 100644 --- a/examples/datasource-streaming-backend-websocket/README.md +++ b/examples/datasource-streaming-backend-websocket/README.md @@ -1,12 +1,17 @@ -# Grafana Data Source Streaming Backend Plugin example +# Streaming WebSocket Backend Data Source Plugin for Grafana -This is an example of how to implement a Grafana data source plugin with streaming backend support. +This backend data source plugin shows how to stream data from a WebSocket. +## Overview -The plugin connects to the backend through a streaming connection and the backend establishes a connection to an external websocket server. +The Streaming WebSocket Backend Data Source Plugin serves as a reference implementation for developers seeking to incorporate WebSocket-based services into their Grafana dashboards for streaming data scenarios. -## Build +The plugin connects to the backend through a streaming connection and the backend establishes a connection to an external WebSocket server. -Build the data source plugin +The example server sends random numbers controlled by a query parameter. + +## Get started + +1. Build the data source plugin: ```sh cd streaming-backend-websocket-plugin @@ -15,7 +20,7 @@ npm install npm run build ``` -and run the Grafana and the example websocket server with Docker compose: +2. Run the Grafana and the example WebSocket server with Docker compose: ```sh cd streaming-backend-websocket-plugin @@ -26,8 +31,6 @@ The server can be accessed by the Grafana backend in `ws://websocket-server:8080 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. - ## Packages ### `streaming-backend-websocket-plugin` @@ -37,3 +40,10 @@ This package contains a Grafana data source plugin that establishes a connection ### `websocket-server` This package contains a WebSocket server that returns random values at random intervals. + +## Learn more + +- [Grafana plugins documentation](https://grafana.com/developers/plugin-tools/) +- [Grafana UI components documentation](https://developers.grafana.com/ui/latest/index.html) +- [Build a data source plugin tutorial](https://grafana.com/developers/plugin-tools/tutorials/build-a-data-source-plugin) +- [Grafana documentation](https://grafana.com/docs/) \ No newline at end of file diff --git a/examples/datasource-streaming-websocket/README.md b/examples/datasource-streaming-websocket/README.md index c579cd76b..123e9307d 100644 --- a/examples/datasource-streaming-websocket/README.md +++ b/examples/datasource-streaming-websocket/README.md @@ -1,8 +1,14 @@ -# Grafana Streaming Data Source WebSocket Plugin example +# Streaming WebSocket Data Source Plugin for Grafana -This is an example of how to implement a Grafana data source plugin with streaming support. +This repository provides an example of how to implement a Grafana data source plugin with streaming support. -## Build +## Overview + +The Streaming WebSocket Data Source Plugin illustrates the integration of WebSocket-based data sources into Grafana dashboards. This plugin serves as a reference implementation for developers aiming to incorporate real-time streaming data into their Grafana visualizations. + +This server returns random numeric values at random intervals. + +## Get started - Start the WebSocket server: @@ -27,3 +33,10 @@ This package contains a Grafana data source plugin that establishes a connection ### `websocket-server` This package contains a WebSocket server that returns random values at random intervals. + +## Learn more + +- [Grafana plugins documentation](https://grafana.com/developers/plugin-tools/) +- [Grafana UI components documentation](https://developers.grafana.com/ui/latest/index.html) +- [Build a data source plugin tutorial](https://grafana.com/developers/plugin-tools/tutorials/build-a-data-source-plugin) +- [Grafana documentation](https://grafana.com/docs/) diff --git a/examples/panel-basic/README.md b/examples/panel-basic/README.md index e44555fea..373b0b42c 100644 --- a/examples/panel-basic/README.md +++ b/examples/panel-basic/README.md @@ -47,4 +47,5 @@ Use panel plugins when you want to do things like visualize data returned by dat - [Grafana developer portal](https://grafana.com/developers) - [Build a panel plugin tutorial](https://grafana.com/tutorials/build-a-panel-plugin/) - [Grafana documentation](https://grafana.com/docs/) +- [Grafana UI components documentation](https://developers.grafana.com/ui/latest/index.html) - [Grafana tutorials](https://grafana.com/tutorials/) diff --git a/examples/panel-datalinks/README.md b/examples/panel-datalinks/README.md index 9a09db2cb..5f269ce76 100644 --- a/examples/panel-datalinks/README.md +++ b/examples/panel-datalinks/README.md @@ -10,6 +10,8 @@ Use panel plugins when you want to do things like visualize data returned by dat ## Get started +A data source backend plugin consists of both frontend and backend components. Install these with the following CLI commands. + ### Frontend 1. Install dependencies: