Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edit data dource and panel READMEs #230

Merged
merged 3 commits into from
Jan 8, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions examples/datasource-basic/README.md
josmperez marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# 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.

Expand Down Expand Up @@ -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
15 changes: 7 additions & 8 deletions examples/datasource-http-backend/README.md
Original file line number Diff line number Diff line change
@@ -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
- Tracing, for better instrumentation of your plugin
josmperez marked this conversation as resolved.
Show resolved Hide resolved

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

Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion examples/datasource-http/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# Grafana Data Source Plugin Template
# Grafana Data Source Plugin HTTP example

This example queries data from an HTTP API.
4 changes: 2 additions & 2 deletions examples/datasource-logs/README.md
Original file line number Diff line number Diff line change
@@ -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/.
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).
6 changes: 3 additions & 3 deletions examples/datasource-streaming-backend-websocket/README.md
josmperez marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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
Expand All @@ -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.

Expand Down
4 changes: 2 additions & 2 deletions examples/datasource-streaming-websocket/README.md
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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
Expand Down
17 changes: 8 additions & 9 deletions examples/panel-basic/README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
# 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.

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

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
Expand All @@ -26,21 +26,20 @@ 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
```

## 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
22 changes: 11 additions & 11 deletions examples/panel-datalinks/README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
# 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?

Panel plugins allow you to add new types of visualizations to your dashboard, such as maps, clocks, pie charts, lists, and more.

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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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/)
2 changes: 1 addition & 1 deletion examples/panel-flot/README.md
Original file line number Diff line number Diff line change
@@ -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.

Expand Down
4 changes: 2 additions & 2 deletions examples/panel-frame-select/README.md
Original file line number Diff line number Diff line change
@@ -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.
4 changes: 2 additions & 2 deletions examples/panel-plotly/README.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 2 additions & 2 deletions examples/panel-scatterplot/README.md
Original file line number Diff line number Diff line change
@@ -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/).
6 changes: 3 additions & 3 deletions examples/panel-visx/README.md
Original file line number Diff line number Diff line change
@@ -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)
Loading