feat(examples): add datasource plugin example

examples/datasource-plugin-genericdatasource/src/css/query-editor.css

@@ -0,0 +1,3 @@
+.generic-datasource-query-row .query-keyword {
+  width: 75px;
+}

examples/datasource-plugin-genericdatasource/src/datasource.js

@@ -0,0 +1,65 @@
+export class GenericDatasource {
+
+  constructor(instanceSettings, $q, backendSrv) {
+    this.type = instanceSettings.type;
+    this.url = instanceSettings.url;
+    this.name = instanceSettings.name;
+    this.q = $q;
+    this.backendSrv = backendSrv;
+  }
+
+  // Called once per panel (graph)
+  query(options) {
+    var query = this.buildQueryParameters(options);
+
+    if (query.targets.length <= 0) {
+      return this.q.when([]);
+    }
+
+    return this.backendSrv.datasourceRequest({
+      url: this.url + '/query',
+      data: query,
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' }
+    });
+  }
+
+  // Required
+  // Used for testing datasource in datasource configuration pange
+  testDatasource() {
+    return this.backendSrv.datasourceRequest({
+      url: this.url + '/',
+      method: 'GET'
+    }).then(response => {
+      if (response.status === 200) {
+        return { status: "success", message: "Data source is working", title: "Success" };
+      }
+    });
+  }
+
+  // Optional
+  // Required for templating
+  metricFindQuery(options) {
+    return this.backendSrv.datasourceRequest({
+      url: this.url + '/search',
+      data: options,
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' }
+    }).then(this.mapToTextValue);
+  }
+
+  mapToTextValue(result) {
+    return _.map(result.data, (d, i) => {
+      return { text: d, value: i};
+    });
+  }
+
+  buildQueryParameters(options) {
+    //remove placeholder targets
+    options.targets = _.filter(options.targets, target => {
+      return target.target !== 'select metric';
+    });
+
+    return options;
+  }
+}

examples/datasource-plugin-genericdatasource/src/module.js

@@ -0,0 +1,15 @@
+import {GenericDatasource} from './datasource';
+import {GenericDatasourceQueryCtrl} from './query_ctrl';
+
+class GenericConfigCtrl {}
+GenericConfigCtrl.templateUrl = 'partials/config.html';
+
+class GenericQueryOptionsCtrl {}
+GenericQueryOptionsCtrl.templateUrl = 'partials/query.options.html';
+
+export {
+  GenericDatasource as Datasource,
+  GenericDatasourceQueryCtrl as QueryCtrl,
+  GenericConfigCtrl as ConfigCtrl,
+  GenericQueryOptionsCtrl as QueryOptionsCtrl
+};

examples/datasource-plugin-genericdatasource/src/partials/config.html

@@ -0,0 +1,2 @@
+<datasource-http-settings current="ctrl.current">
+</datasource-http-settings>

examples/datasource-plugin-genericdatasource/src/partials/query.editor.html

@@ -0,0 +1,8 @@
+<query-editor-row ctrl="ctrl" class="generic-datasource-query-row">
+	<ul class="tight-form-list">
+    <li class="tight-form-item query-keyword">Query</li>
+    <li>
+      <metric-segment-model property="ctrl.target.target" get-options="ctrl.getOptions()" on-change="ctrl.onChangeInternal()" css-class="tight-form-item-xxlarge"></metric-segment-model>
+    </li>
+  </ul>
+</query-editor-row>

examples/datasource-plugin-genericdatasource/src/partials/query.options.html

@@ -0,0 +1,4 @@
+<section class="grafana-metric-options" >
+  <div class="gf-form">
+  </div>
+</section>

examples/datasource-plugin-genericdatasource/src/query_ctrl.js

@@ -0,0 +1,26 @@
+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';
+  }
+
+  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
+  }
+
+  onChangeInternal() {
+    this.panelCtrl.refresh(); // Asks the panel to refresh data.
+  }
+}
+
+GenericDatasourceQueryCtrl.templateUrl = 'partials/query.editor.html';
+