Add more field in datasource form

Grafana Plugin Development
1

Hello there,

I’m buildind my own plugin app, and for my kind of datas I need another field in the datasource form or query.options metrics. For example, I need an information about throughput from one source to determinate destination. So, I need at least more 3 fields for my source, destination and event-type. Has some way to do that without need to build grafana from source and change the controller file? I can do that inside my GenericQueryOptionsCtrl class on module.js?

class GenericQueryOptionsCtrl {
     "create my treatment for the form variables here using angular?"
}
GenericQueryOptionsCtrl.templateUrl = '/partials/query.options.html';
2

Ok, I tested here and i got it. Now, my new question is… If I have these 2 form:

<div name="divPerfsonar">
		<div>
			<form  name="testForm" id="target" >
			  Source: <input type="text" name="source" required ></br>
			  Destination: <input type="text" name="destination" required ></br>
			  <input type="submit" value="Enter">
			</form>         
		</div>
		<div id="hidden_div" style="display: none">
			<form name="etForm" id="target2" >
			  <select name="eventList" form="target2" id="selectFormID">
			  </select><br>
			  <input type="button" value="Submit" onclick="newQuery()"> 
			</form>
		</div>   
	</div>

How can I acess my input and select values on:

class GenericQueryOptionsCtrl {
     "create my treatment for the form variables here using angular?"
}
GenericQueryOptionsCtrl.templateUrl = '/partials/query.options.html';
3

Grafana is written in Angular so this is not how it works.

In Angular you bind a field to an input and it automatically will set the value on the model. You then have access to the model in the controller.

<input type="text" class="gf-form-input width-3" ng-model="ctrl.target.yourField" spellcheck="false" placeholder="" ng-blur="ctrl.refresh()">

The above HTML binds to yourField which you can access in the ctrl like this: this.target.yourField. The ng-blur means that it will call refresh when the user leaves the field. Refresh calls the query and refreshes the graph/table/etc.

Have a look at some existing data sources to get an idea of how it works. The Simple JSON data source is a good place to start:

1 Like
4

Ok, I think i got it. But, whos is my controller? I can see my query_ctrl.js as one extension of QueryCtrl controller?
For example, the simple JSON :

import {QueryCtrl} from 'app/plugins/sdk';
import '../css/query-editor.css!'

export class GenericDatasourceQueryCtrl extends QueryCtrl {

  constructor($scope, $injector, uiSegmentSrv)  {
    super($scope, $injector);

    this.scope = $scope;
    this.uiSegmentSrv = uiSegmentSrv;
    this.target.target = this.target.target || 'select metric';
    this.target.type = this.target.type || 'timeserie';
  }

  getOptions() {
    return this.datasource.metricFindQuery(this.target)
      .then(this.uiSegmentSrv.transformToSegments(false));
      // Options have to be transformed by uiSegmentSrv to be usable by metric-segment-model directive
  }

  toggleEditorMode() {
    this.target.rawQuery = !this.target.rawQuery;
  }

  onChangeInternal() {
    this.panelCtrl.refresh(); // Asks the panel to refresh data.
  }
}

GenericDatasourceQueryCtrl.templateUrl = '/partials/query.editor.html';

And if I wanna acess my new form variable (this.target.yourField) I will create a new function like:

newMetric() {
var storeFormValue = this.target.yourField;
}

And, in my template on query.editor.html

<input type="text" class="gf-form-input width-3" ng-model="ctrl.target.yourField" spellcheck="false" placeholder="" ng-blur="ctrl.newMetric()">

5

Values in this.target get saved to the panel json automatically - one target per row. You can see that by clicking on the panel context menu -> Panel JSON (or by looking at the dashboard JSON). Here is an example of the targets array from the panel JSON:

"targets": [
    {
      "apiVersion": "2016-09-01",
      "appInsights": {
        "groupBy": "none",
        "metricName": "select",
        "timeGrainType": "auto"
      },
      "azureMonitor": {
        "aggOptions": [
...

So unless you are doing something special with the values, you shouldn’t need much code. If you use ng-model, then it will be automatically saved and if you use ng-blur="ctrl.refresh()" then it will refresh when the user changes a value.

1 Like