Datasource plugin creation: What is right way to use form?

I try to create Datasource (DS) plugin to display data from my project. But I’m very confused how to do it.

There are some methods used in other DS-plugins

1. IBM APM DS - native angularjs
<span class="gf-form-select-wrapper">
    <select class="gf-form-input gf-size-auto"
        ng-options="v.value as for v in ctrl.timeAttributes">
2. Simple Json DS - gf-form-dropdown
<div class="gf-form">
    <gf-form-dropdown model=""
3. IBM APM DS - metric-segment-model
<div class="gf-form">
      <label class="gf-form-label query-keyword width-6">Attribute:</label>
      <metric-segment-model custom="false"

Are exists any docs about type of gf-form-dropdown, metric-segmen-model and their opts (e.g. allow-custom)? I try to find something except this without any result :frowning:

P.S. Is ConfigCtrl (Required) really require now?

no docs on these components

Thanks for reply. It is very unfortunate that there is no documentation.
I did what I wanted with gf-form-dropdown.

Hello @aikon, @torkel

Could you’ll please explain how gf-form-dropdown populates data? I’m trying to create a dynamic dropdown (with json values that have been reduced to an array in my query_ctrl.js file) and need to populate gf-form-dropdown with it, but unable to get it to the “view”/html page and hence unable to populate my dropdown.

Thanks in advance.

1 Like

You can check my datasource plugin. The basic idea is: query_ctrl.js calls one of async method that implemented in datasource.js.

1 Like

Thank you for the link. Very helpful indeed.

Why not document these?

As a newbie to Angular etc, I’m seriously struggling to work out how HTML like:


translates from a representation described in, what I think is the correct, javascript file.

This is a frustratingly high barrier to entry as someone who’s trying to contribute to the community and add functionality to Grafana by building a new datasource plugin which will likely have wider appeal than just my own interests.

1 Like