Is it possible to write a grafana datasource plugin without using a external backend?

Question

I want to write a grafana datasource plugin which does not rely on a external backend.

Ive built my plugin based on the simple-json datasource plugin: https://github.com/grafana/simple-json-datasource

I try to change the query function in the datasource.js as follows:

original:

 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' }
    });

my query function:

  query(options) {
      return [
      {
        "target":"upper_75",
        "datapoints":[
          [622,1450754160000],
          [365,1450754220000]
        ]
      },
      {
        "target":"upper_90",
        "datapoints":[
          [861,1450754160000],
          [767,1450754220000]
        ]
      }
    ];
  }

When I implement my query function and try to display the graph in the graphana panel I get the error message:

"undefined is not an object (evaluating 'dataList.map')"

Dont worry about the data format i tried everything, but it seems grafana expects something different as a return, but i cant figure out what format.

I traced down what the original implementation returns and duplicated it, but it doesnt work.

I believe

this.backendSrv.datasourceRequest({
      url: this.url + '/query',
      data: query,
      method: 'POST',
      headers: { 'Content-Type': 'application/json' }
    });

is supposed to return something like a http response, but why cant I just return that manually?

Thanks for any help in advance!

Answer 1

It looks like it need to be wrapped into a promise and can't be returned directly. They use the angular $q component. I made it working with returning:

return this.q(function(resolve, reject) {
    var result = {
      data : [
        {
          "target":"upper_75",
          "datapoints":[
            [622,1450754160000],
            [365,1450754220000]
          ]
        },
        {
          "target":"upper_90",
          "datapoints":[
            [861,1450754160000],
            [767,1450754220000]
          ]
        }
      ]
    }
    resolve(result)
});

You will get $q via dependency injection in the constructor:

constructor(instanceSettings, $q, backendSrv) {
this.type = instanceSettings.type;
this.url = instanceSettings.url;
this.name = instanceSettings.name;
this.q = $q;
this.backendSrv = backendSrv;}