Developing your own visualization plugin for Grafana

  • Tutorial


Grafana is a handy tool for visualizing and monitoring time data from multiple sources. In this post I want to tell you the key concepts for developing my plugin.

Creating your own plugin may be necessary for 1) visualization of temporary data, because the graphan engine is convenient for creating queries. 2) to expand the functionality of graphans to fit your needs.

Installation


  • Download and run Grafana in any way
  • After starting through bin/grafana-server, a folder should appeardata

What is a plugin c tech. points of view


These details are optional. I figured out these concepts along the way.
Grafana 5.x is a great Angular app version 1.6.6 :) and a bit of React . The plugin itself is an angular controller that lies in a file data/plugins/your-module/dist/module.jsthat can be loaded as a SystemJS module. Next should be a file plugin.jsonwith a meta description of the plugin: name, id, icons ...


Development project


I recommend using the following template on webpack . There is a description of features why it is better. By the way, it is in the official documentation


The system must have npm installed .


cd $GRAFANA_PATH/data/plugins
git clone https://github.com/CorpGlory/grafana-plugin-template-webpack.git
cd grafana-plugin-template-webpack
npm install
npm run build

Alternative installation

You can clone it to another directory, for example, to /home/alex/development/grafana/plugins/grafana-plugin-template-webpack, and then create a file $GRAFANA_PATH/conf/custom.iniand write there


[plugin.template]
path = /home/alex/development/grafana/plugins/grafana-plugin-template-webpack

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


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



Development


Open the file src/module.js- this is our "main". From here, the graphan makes the plugin load into the page, waiting for the instance PanelCtrl. Notice the last line: export { Ctrl as PanelCtrl }. In general, remember that you are surrounded by a large front-end application where many variables are defined and libraries can be imported. 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 devinstead npm run build, because The code will rebuild itself. You can not restart the grafana backend (this is what we ran through bin/grafana-server), but grafana likes to cache plugin files, so be careful when reloading the bundled grades. At the bottom of the post there is a video where I talk more about how the build system is arranged and use the Angular template that lies in partials.


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


Output data from the request


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



Here I use Grafana TestData


Now let's change the code of the successor class like this


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

Here appeared the use of an object this.events- the field of the parent class, to subscribe to an event about the received data. More features MetricsPanelCtrl only in source


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


You can also try adding value output to the template. To do this, change the constructor:


  constructor($scope, $injector) {
    super($scope, $injector);
    this.message = "nice!";
  }

and change the file partials/template.html:


Hello from Template Plugin {{ ctrl.message }}

Conclusion


You can read the official documentation .
I advise you to deal with one open source plugin in order to figure out how to load data and how to get more of the grafana features available for use. For example, using typescript , editor, saving the plugin.jsonplugin config ,assets


By the way, the use of old Anglar directives is evil, because there are collisions of names. Now we have some thoughts on creating a plugin builder with components.


And a video with similar content from me. I apologize for the sound. There is still additional information:



I also recommend developing Visual Studio Code , in which case it will be possible to debut


Good coding to everyone.


PS post checked by Alexander Zobnin . Thank you very much.


Also popular now: