Grafana Plugins

December 19, 2019

Table of contents

1. Introduction

2. Datasource plugins

          2.1 QueryCtrl

          2.2 ConfigCtrl

          2.3 Datasource

3. Backend plugins

4. Panel plugins

5. App plugins

6. Exporting your plugin

1. Introduction

Grafana is a tool that allows developers and SREs alike to view data produced by their applications in a clean manner. It provides a multitude of options for the developers to decide how they want to ingest their data be it from Graphite, Prometheus or any other common data store tool. And most importantly it also allows them to specify how that data is then rendered back, with a plethora of options available there too. However, sometimes a user might want to use a slightly unusual data source or visualize their data in a novel way. This is where plugins come in. Plugins fill the gaps in what Grafana supplies and what the user wants. In this blog entry we will investigate what makes up a plugin and look through a worked example.

Grafana plugins come in 4 main flavours. These are datasource, backend, panel and app. Each is designed with its own benefits and limitations. Here is a brief overview of each and what they achieve:

Datasource: These plugins allow you to enable interactions with any database that can communicate over HTTP.

Backend: Wrap a datasource on the backend to enable alerting on the data. 

Panel: Provide a custom way of rendering data on the frontend.

App: Allow the user to create entire new styles of pages, wrap panels and data-sources together and provide a whole different experience of the system.


Here’s a pretty picture to save me 1000 words.


Let’s take a look at the actual requirements of the various different plugins and what we might need to do to implement each. Also, make sure to check out MetricFire's free trial where you can try setting up plugins.

2. Datasource plugins

This is one of the simpler plugins to implement. All we need to do is create a typescript library that exports the following objects implementing these functions/attributes as well:

2.1 QueryCtrl

<p>CODE:https://gist.github.com/denshirenji/0d7a51989a920bd330d6d23fae7841dc.js</p>

2.2 ConfigCtrl

<p>CODE:https://gist.github.com/denshirenji/0c514a912200046c7b3ae189c0cfe390.js</p>

2.3 Datasource

<p>CODE:https://gist.github.com/denshirenji/6d3c5dca1cd0d6d3cb285db6c0cd1d4e.js</p>


PS: You can find the type for the query options parameter here Link.


3. Backend plugins

Backend plugins are pretty similar to datasource plugins in that they need to execute queries to a remote service. However these are written in any language that supports gRPC calls. Alternatively you can implement the Go interface directly.

Here is the protobuf definition to be implemented:


<p>CODE:https://gist.github.com/denshirenji/c56a043a1246386c7e1358e61490c503.js</p>

You can find the further definitions of the protobuf in this repo.

Therefore in order to implement a custom datasource we need only implement the Query function! Thereafter all alerts should be able to be triggered based on metrics in your datasource.

4. Panel plugins

Panel plugins are created by implementing one of PanelCtrl, MetricsPanelCtrl and QueryCtrl. PanelCtrl just allows you to display in a panel box with little to know restriction on what you do with that space. MetricsPanelCtrl extends on PanelCtrl and adds hooks for receiving updates from the environment. Here are the most important functions/attributes we need to override in each:


4.1 PanelCtrl

<p>CODE:https://gist.github.com/denshirenji/a9e050e8d158b6b09173850bcc325889.js</p>

4.2 MetricsPanelCtrl

<p>CODE:https://gist.github.com/denshirenji/e32d5e49d222aedeb435ba4b413c45a2.js</p>

5. App plugins

Apps are a bundling together of panels and datasources. They can be defined by exporting a ConfigCtrl.


Here’s what we need for a valid ConfigCtrl:

<p>CODE:https://gist.github.com/denshirenji/1e0783a2c3f29d0864e6094de4dbeff3.js</p>


That’s it! That’s enough for our plugin to function. Here’s an example app plugin made by Grafana: Example-App.

6. Exporting your plugin

Ok great you’ve written your plugin. Now what? Now we need to tell Grafana how to use your plugin. This is achieved differently for backend plugins and frontend plugins so let’s also talk about them separately.

6.1 Backend

Backend’s need a plugin.json file with several important attributes to identify the plugin

<p>CODE:https://gist.github.com/denshirenji/77a551788e054449bf254e8e46a386ca.js</p>

6.2 Frontend

Frontends also need a plugin.json file which just specifies some metadata and for datasources whether it accepts metrics or annotations or both.

<p>CODE:https://gist.github.com/denshirenji/21bd613282585b31161eac2756086631.js</p>

7. Modern Grafana

Newer Grafana plugins can utilise extensions of the `GrafanaPlugin` object to do their configuration in a more imperative and obvious way e.g. in the example app repository that Grafana themselves have made they show both the legacy and modern styles of exposing the plugin.

Get a free trial with MetricFire and start making Grafana dashboards right away. Feel free to book a demo if you have questions about what Grafana can do for you.

Related Posts

GET FREE MONITORING FOR 14 DAYS