Which frameworks to learn to begin plugin development?

Grafana Plugin Development
1

Hello,
I am new to Grafana plugin development and it would be very helpful if you could let me know what frameworks I should learn to get started with respect to the development process?
From this link https://community.grafana.com/t/use-of-angular-4-in-plugin-development/3208 I understand that it uses AngularJS (and not Angular 2 or Angular 4). And, also some amount of NodeJS?

Could you’ll please confirm which parts of the file use which kind of framework so that it will be easy for me to get going?

  • query_ctrl.js (NodeJS or AngularJS?)
  • datasource.js (NodeJS or AngularJS?)

Sorry, I am really new to development and hence would need advice to pick up these skills.

Thank you.

2

Hello and welcome to the adventure of developing plugins :slight_smile:
I try helping you with the little knowledge I have, but can’t confirm it is correct 100%

I started from scratch without any kind of knowledge about plugin development. I made a panel
plugin and how I learned was by looking at other people’s work in https://github.com/grafana/grafana-plugin-repository/blob/master/repo.json.

I do believe NodeJS does not play a role in plugin development nor for datasources or panels. You are
supposed to implement the logic for modifying queries, creating datasources, anotations, etc, in classes
that will be exported in your module.ts|js in order for Grafana to find them.

These classes have some kind of interface associated to them that you provide in the form of templates.
In AngularJs, this is what it is called a Component.

In order to create these classes :
export {
the_datasource as Datasource,
x_controller as QueryCtrl,
y_controller as ConfigCtrl,
z_controller as QueryOptionsCtrl,
q_controller as AnnotationsQueryCtrl
};

You only need to know the basics of AngularJS as they are the controllers, and some AngularJS for the
templates as you’ll want to make data binding and callback functions for events in the interface.

In the end, you are writing AngularJS components for each aspect of the plugin: modifying queries,
creating datasources, anotations, etc.

I’d recommend looking through other people’s work; it was really helpful for me:

I hope I help you in some way, but I am far from expert.

PD :
One important thing when developing is to have a good setup, it helps quite a lot.
I would recommend you to invest some time in getting to know Grunt for compiling the code, and have
docker installed for Grafana.

This is the command I use to have Grafana started :
docker run --rm -d --user $(id -u) \
-v "$(pwd)/data:/var/lib/grafana" \
-p 3000:3000 \
--name "grafana" \
grafana/grafana:5.1.0

It runs Grafana in the port 3000, and takes the plugin from data/plugins of the directory you call it; this way
you can modify the code more easily and not worrying about installing Grafana locally.

To stop it use :
docker container stop grafana

3

Thank you so much for your reply.