Development of its visualization plug-in for Grafana

Development of its visualization plug-in for Grafana  
Grafana is a handy tool for visualizing and monitoring temporary data from a variety of sources. In this post, I want to tell you the key concepts of developing your plug-in.
You can create your own plug-in for convenient development of temporary data visualization, use the Grafan engine to create queries or to expand the graphs functionality for your needs.
Download and run Grafana in any way:
After starting through bin /grafana-server the folder should appear. data  


What is a plugin like those. point of view


These details need not be known. I dealt with these concepts along the way.
Grafana 5.x is a great application of Angular version ??? :) and a bit of React . The plugin itself is an angular controller, which lies in the file data /plugins /your-module /dist /module.js , which can be loaded as SystemJS module. There must be a file near it. plugin.json with a meta description of the plugin: name, id, icons

webpack There is a description of the features why it's better. By the way he is in official documentation

The system must have installed. npm

    cd $ GRAFANA_PATH /data /plugins
git clone
cd grafana-plugin-template-webpack
npm install
npm run build


Now you need to restart Grafana. Should appear line
INFO[05-17|06:08:46]Registering plugin logger = plugins name = "Plugin Template Name"
in the grafana launch logs.


Then go to localhost: 3000 , click on the sign + under the logo to create a new dashboard, a new window should appear with the choice of the new "Plugin Template Name" panel. This window

should appear.


Development of


Open the file src /module.js - this is our "main" - hence the graphan loads the plugin into the page, waiting for the instance PanelCtrl , pay attention to the last line: export {Ctrl as PanelCtrl} . In general, remember that you are working in the environment of a large front-end application, where there are definitely a lot of variables and you can import libraries. All that 'import {} from grafana /*' is already available features.


Let's rewrite the constructor like this:

    constructor ($ scope, $ injector) {
super ($ scope, $ injector);
console.log ('hello from console');


Now you can use npm run dev instead of npm run build , t. the code itself will be rebounded. It is possible not to reload the backend graphs (this is what we ran through bin /grafana-server ), But grafana likes to cache plugin files, so be careful with reboot of the sibling. At the bottom of the post there is a video where I talk more about how the build system is structured and I use the Angular Chabon, which lies in partials .


Our class is an Angular controller and there is a function link (scope, element) . I advise you to do console.log (element) , there will be an html element with which you can do whatever you want.


Output of data from the request


Our controller is the heir of class PanelCtrl , let's now replace it with class MetricsPanelCtrl . Now if you go into mode. editing panel , then there appeared a new tab



Here I use Grafana TestData


Now we change the code of the heir class like this:

    constructor ($ scope, $ injector) {
super ($ scope, $ injector); (
'data-received', this._onDataReceived.bind (this)
_onDataReceived (data) {
console.log (data);


Here, the use of the object appeared. - the field of the parent class, to subscribe to the event about the received data.


Restart the plugin and get the data from the data source in the console. You can further select the data source you need and create queries through Grafana. And render as you want. For example, through d3.js .




You can read official documentation .
I advise you to deal with one open-source plug-in: to understand how to download data and more of the available features graphs for use. For example, use typescript , editor, saving the config plugin.json plugin, assets
By the way, the use of old English directives is evil, because there are collisions of names. Now we have some thoughts to make a plug-in builder with components.
And video with similar content from me. I apologize for the sound. There is further information:

I also recommend for development. Visual Studio Code , in this case, it becomes possible debug
All good coding.

+ 0 -

Add comment