Understanding about grafana
As a complete dashboard application, grafana has a high degree of completion and provides most of the functions required by the dashboard.
At the same time, it provides a strong extensibility, allowing you to extend it, and the manifestation of extensibility lies in plugins,
If you want to see the details of grafana, you can go to his official website . It seems that there is no Chinese language at present. With my low-level English level, I can barely understand it. I believe most people can easily read it.
Enter the text
Grafana's plugins are divided into three types: application, panel, datasource,
This time I only write two panels and datasource
Look at the documentation first
http://docs.grafana.org/plugins/developing/development/
Four examples are provided in the documentation
It is not difficult to see that it is the panel and the data source
You can clone it from github,
Let's take Piechart panel and Typescript dataSource as examples.
panel
First clone piechart from github
git clone https://github.com/grafana/piechart-panel.gitIt is not difficult to find that it is a front-end project, you need to npm install it and download the dependencies.
Open the project with IDE, and the project structure we can probably see is like this.
Since I am a back-end developer, I will not show off the packaging of the front-end. The point is that I will not either.
Easy to find,
The source code is in the src directory, and the compiled files are in the dist directory.
If you want to know how grafana loads this plugin, you can read the official documentation, which is written in it.
We mainly look at the code under src
The main files in the code are plugin.json and module.(js|ts)
First look at plugin.json
This describes the relevant information of the plug-in, if you only focus on development,
What you have to deal with is type, name, id, these three attributes determine your plugin
module.(js|ts)
This file is the carrier of all other plugin files, of course you can also write logic in it.
The logic of the piechart panel is in the piechart_ctrl he imported, so let's go to the piechart_ctrl
PieChartCtrl inherits MetricsPanelCtrl
The MetricsPanelCtrl here inherits from PanelCtrl
If you want to make an example of a panel without dealing with the datasource, it is also possible for you to inherit panelCtrl.
Now let's introduce the main function in a panel,
Briefly introduce the monitoring of several events.
1.render This event is tested and found to be triggered when the layout on the page changes.
2. data-received is the callback after the query of the datasource bound to the MetricsPanel is successful.
3. Data-error and data-received correspond to the callback after the datasource query fails.
4.data-snapshot-load literally means data snapshot loading. The actual test does not know what circumstances will call this function.
5.init-edit-mode Initialize edit mode (another main code entry)
The first 4 I don't think I have much to say. After I understand the meaning, the code will be obvious at a glance.
Let's talk about number 5:
This event listener is our main code entry in edit mode:
It is not difficult to see that it will add an html template to a tab page of eidtorTab.
options=>tab title
editor.html=>html template of tab body
2=>The location of this tab page.
Let's look at the effect.
The display here is the modification defined by piechart itself, and the others are the default ones of the system.
And the definition of the parameter and the logic to be done, you can define it yourself.
Then you use these parameters you define to dynamically render your chart graphics,
Such a chartpanel is basically finished, and the rest is to modify, fine-tune, and gradually improve the plug-in.
datasource
Looking at the code structure, it is obviously very similar to the panel
Still the same, look at plugin.json first
This is an official instance, so it probably means that the scaffolding has been set up, and it's just work.
Next module.ts
Finally, let's look at the main code logic part.
query=>This is the main function of datasource. If metricspanel is configured with the corresponding data source, this function will be called when loading, and the return value of this function will be brought into the corresponding function of metricspanel's data-received monitor.
annotationQuery=>I don't know what to do with this
metricFindQuery=>This effect does not seem to be obvious
testDatasource=>This is used for testing when the datasource configuration is saved.
The logic of the data source configuration and the parameter pages that need to be filled in are in: config_ctrl.ts
In the panel, if the corresponding data source is used, the things that need to be filled in are in query_ctrl.ts
That's probably it.
At present, due to the needs of the company's projects, there is a development template based on version 4.2.0, which is not a standard plug-in development template.
It will be uploaded to the code cloud later, and it will not be published for the time being. If you need it, you can contact me.