Developing Datasource Plugin in React

danielle9897 · September 22, 2019, 12:15pm

I need to develop a Datasource plugin.

Does Grafana already provide full support for React data-sources plugins ?
Is there some example repository for a react datasource plugin anywhere ?

Any help is appreciated

marcusolsson · September 22, 2019, 2:08pm

There is support for React plugins!

We certainly want to do more to help people getting started with plugins. Here are a few resources that might help:

A bare bones example that will eventually be used as the template we will use to create new plugins, is available here:

I’m also working on another example here:

I’ve also started writing a guide on writing data source plugins, which you can find here:

github.com

marcusolsson/grafana-csv-datasource/blob/master/docs/getting-started-datasource-plugin.md

# Writing your first data source plugin for Grafana

Grafana has support for a wide range of data sources, like Prometheus, MySQL, or even Datadog. This means that it’s very likely that you can already visualize metrics from the systems you've already set up. In some cases though, you might already have an in-house metrics solution that you’d like to add to your Grafana dashboards. Luckily, Grafana supports _data source_ plugins, which lets you build a custom integration for your specific source of data.

In this guide, you’ll learn how to build a data source plugin for visualizing CSV files. At the end of this guide, you'll have a working example of a data source plugin, and understand how you can extend it to support the specific use-case you have in mind.

## Preparations

First of all, we'll create a project directory for our plugin.

### Requirements

- NodeJS
- yarn

### Directory structure

Create a new directory and initialize your module. Also, go ahead and create a `src` directory within your module, to hold our source code. 

```

This file has been truncated. show original

github.com

marcusolsson/grafana-csv-datasource/blob/master/docs/adding-datasource-backend.md

# Adding a backend to a Grafana Data Source

In the previous part of this guide, we looked at how to get started with writing data source plugins for Grafana. For many data sources, integrating a custom data source can be done completely in the Grafana browser client. For others, you might want the plugin to be able to continue running even after closing your browser window, such as alerting, or authentication.

Luckily, Grafana has support for _backend plugins_, which lets your data source plugin communicate with a process running on the server.

Last time, we started writing a data source plugin that would read CSV files. Let's see how a backend plugin lets you read a file on the server and return the data back to the client.

## Requirements

- Go

## Creating the backend plugin

Create another directory `backend` in your project root directory, containing a `main.go` file. The Grafana backend plugin system uses the [go-plugin](https://github.com/hashicorp/go-plugin) library from [Hashicorp](https://www.hashicorp.com/), and while communication happens over gRPC, here we'll use a Go client library that wraps the boilerplate for you.

```go
// backend/main.go
package main

This file has been truncated. show original

The guide still needs some more work, but I hope it still might be useful.

If you get stuck, I’d love to know where, so I can improve the guide!

/Marcus

danielle9897 · September 22, 2019, 5:06pm

Thank you very much, we shall try using this!

danielle9897 · September 23, 2019, 8:52am

Following the csv example docs - I am trying to run: grafana-toolkit plugin:build

Suggesting to change the docs to say: yarn grafana-toolkit plugin:build
Should the plugin directory (grafana-csv-datasource) be placed under the grafana/data/plugin folder ?
The build command fails with:
=> Cannot read property 'name' of null
(after the previous steps were successful - Cleaning,Preparing,Prettier check,Linting,Tests)

It fails from somewhere inside the following code in bundle.js:

    compiler = webpack(webpack_plugin_config_1.getWebpackConfig({
        watch: watch,
        production: production,
    }));

marcusolsson · September 23, 2019, 2:00pm

You can either place the plugin directory inside data/plugins, symlink it there, or configure the path to the plugin in the config file.

Hm, I’m thinking it could be related to your dependencies. Can you make sure you have the latest versions? Something like this:

"devDependencies": {
    "@grafana/data": "latest",
    "@grafana/runtime": "latest",
    "@grafana/toolkit": "next",
    "@grafana/ui": "latest",
    "@types/grafana": "github:CorpGlory/types-grafana.git"
  }

danielle9897 · September 23, 2019, 3:17pm

I have found the problem
Since I am working in Windows, I had to change the following in your file webpack.plugin.config.js

var idx = id.indexOf('/src/');
=>
var idx = id.indexOf('\\src\\');

Are there more places like this to fix ?

danielle9897 · September 24, 2019, 11:31am

Is the ‘backend plugin’ mandatory in order to communicate with the server from which the data is fetched ?
-or- can any code be executed in the query method in DataSource.ts ?
Must the backend plugin be written in GO ?
The plugin build command worked for me and the dist folder was created -
but after executing yarn add @grafana/runtime --dev then it no longer compiles -
error on the lodash import statement.
To solve that I added:
"noImplicitAny": false, under “compilerOptions” in tsconfig.json

Now the build is successful - but Grafana server fails to init the plugin:

=>

C:\\Grafana\\grafana-6.4.0-beta1\\data\\plugins\\csv-datasource\\dist/csv-
datasource_windows_amd64.exe": file does not exist

Seems that again the separating character should be changed.
What file is responsible for that ? where should I change ?
This .exe file does exist on disk.

danielle9897 · September 26, 2019, 7:41am

question is also here

Topic		Replies	Views
Writing a new Plugin Grafana Plugin Development	3	470	September 25, 2019
Need a beginner guideline for development of datasource plugin Grafana Plugin Development	10	3842	December 10, 2021
Working Backend Plugin Example Grafana Plugin Development	9	3205	December 16, 2020
Video tutorial about how you can make your own plugin-panel Grafana Plugin Development	3	822	June 12, 2018
How to make Grafana's datasource plugin compliant with Query Inspector? Grafana Plugin Development	3	1398	May 6, 2020

Developing Datasource Plugin in React

Related topics