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

Grafana Plugin Development
1

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-model="ctrl.target.timeAttribute"
        ng-options="v.value as v.name for v in ctrl.timeAttributes">
    </select>
</span>
2. Simple Json DS - gf-form-dropdown 
<div class="gf-form">
    <gf-form-dropdown model="ctrl.target.target"
          allow-custom="true"
          lookup-text="true"
          get-options="ctrl.getOptions($query)"
          on-change="ctrl.onChangeInternal()">
      </gf-form-dropdown>
 </div>
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"
             get-options="ctrl.Attributes()"
             on-change="ctrl.onChangeInternal()"
             property="ctrl.target.Attribute">
      </metric-segment-model>
</div>

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?

2

no docs on these components

3

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

4

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
5

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
6

Thank you for the link. Very helpful indeed.

7

Why not document these?

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

<gf-form-dropdown
  model="ctrl.target.target"
  lookup-text="true"
  get-options="ctrl.getOptions()"
  on-change="ctrl.onChangeInternal()"
  css-class="min-width-24"
  >
</gf-form-dropdown>

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