Need a beginner guideline for development of datasource plugin

Grafana Plugin Development
1

Hi, i’m a newbie to grafana development.I know the basics of typescript and working with grafana Dashboard, recently i have been asked to develop a custom grafana datasource plugin.I have gone through this https://grafana.com/docs/grafana/latest/plugins/developing/datasources/ and https://github.com/grafana/simple-json-datasource ,but i am not able to properly grasp the concepts like which functions are present in which file,which function to call to make a particular change,etc.
If anyone would guide me in proper direction or provide any beginner friendly tutorial it would be a big help.

2
3

The tutorial is high level for beginner like me.Thanks for the Reply though.
Are there like “from scratch” guidelines or tutorials?

4

The plugin tutorials that @jangaraj linked to, such as Build a data source plugin and Build a panel plugin, are intended for beginners.

Do you mind sharing what parts of the current plugin tutorial you feel are too difficult right now? I’d like to know so that we can make it even easier to get started.

5

I’m facing difficulty after 5th section i.e Data Source Plugins.There is only mention of syntax of query() method but how to use that using a small example would be better or a YOUTUBE video where you guys are explaining this kind of stuff would be a lot better.
I’m not a professional developer,just a under-grad student,so i facing such silly issues.

1 Like
6

I might be able to create a Youtube video if time allows me. I’ve developed a few datasource plugins in the past. I like the tutorial document for multiples reasons

  • uses Grafana v7.0.0. There’s a stuff that doesn’t work in v6.7.2.
  • uses grafana-toolkit to create the best practice datasource project from the template.
  • modernized with TypeScript and React for the UI components. No more messy Javascript, and Angular
  • standardized the code format and lint. Import .prettierrc into IDE. My experience with IntelliJ, Goland + TypeScript + Prettier plugins has been good.
  • offers the build system e.g. yarn dev, watch, test, build. No more random Gruntjs scripts
  • uses async interfaces, and encourages to use dataframe

So overall it’s a very good start. It could be better if the grafana-toolkit went ahead and included a few more stuff. grafana-toolkit should help the actual development, not the tutorial.

  • create components directory, and put the UI stuff underneath.
  • the async query() should include backendSrv() for http requests, and Promise handling and .resolve().
  • add a query builder example. I had no idea why options.targets was an array or how it’s structured. It’s kind of obvious hindsight though.
  • add HTTP response parser, and transforms to data frames. How a valid data frame looks like. The document is inadequate for the first time developer.
  • add TemplateSrv. I think @grafana/runtime package hasn’t offer the type yet.
  • show how to use “route” from plugin.json and SecureJsonData to keep the password and sensitive data safe

Extra bonus is to include OAuth authentication configuration in the plugin.json but that’s probably out of scope, and the existing document is very good.

I recommend to take MS Azure datasource plugin as example, one of the most cleanly implemented datasources. It’s a bit complex because it handles 3 different type of Azure services but it also helps you to understand how you modularize service specific code, and keep the highest level class as generic as possible.

7

@knoguchi if you are planning to do a youtube video or any blog on development of plugins,let me know plz.
Thank you

8

@abhinandan13 I had to create 2 datasource plugin last year and I was totally new to Grafana
I used the "simple datasource json plugin " from Grafana team
You should try it

9

Thank you for the feedback! I’ll make sure to share this with the team working on grafana-toolkit.

Also, let me know if I can help out with the video in any way.

10

@knoguchi if you have done any youtube video or blog on Data source plugin development, kindly share here.

thank you.

11

There is a toolkit with the basic code to start developing a plugin:

This will generate the plugin with some examples of how to add UI components and update their values. But you also need to know the basics of React to understand it.

And you can find more info about the plugins here: