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.js
that can be loaded as a SystemJS module. Next should be a file plugin.json
with 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
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.ini
and 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 dev
instead 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.json
plugin 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.