Access data source from an app type plugin page

#1

Hi,

I’m new to Grafana plugin development (and angular) and I’m having trouble with my app type plugin.

I would want to call a function of my custom data source plugin from my app plugin page (not panel). I’ve found the data source by going through
datasourceSrv.getAll()
but that doesn’t return the actual object to call. How can I access the instance of the datasource controller to call the controller function?

Thanks!

#2

Here is an example from the Kubernetes App:

https://github.com/grafana/kubernetes-app/blob/master/src/components/clusters/podInfo.ts#L41-L50

#3

The link appears to be broken.

#4

Oh sorry. Looks like the repo is private for some reason. Not sure why it should be public. Here is another link:

And here is the code from the first link:

loadDatasource(id) {
    return this.backendSrv.get('api/datasources/' + id)
      .then(ds => {
        this.datasource = ds.jsonData.ds;
        return this.datasourceSrv.get(ds.name);
      }).then(clusterDS => {
        this.clusterDS = clusterDS;
        return clusterDS;
      });
  }

and an example of using the data source (the data source has function called getPod):

this.loadDatasource(this.cluster_id).then(() => {
        this.clusterDS.getPod(pod_name).then(pod => {
          this.pod = pod;
          this.pageReady = true;
        });
      });
2 Likes
[Solved] - [Postgres] Look up columns of tables from app page
#5

Thank you very much!

#6

Hi, I am totally new to grafana and I am trying the same thing i.e. to connect to my backend api through grafana so that I can display data my data from mysql db into a table format on a page not on a panel. As I am new to grafana, I didn’t understand the code you have posted above. Can you please elaborate on it more. Also I am familiar with recent versions of angular e.g. angular 4 and 5, where it is quite easy to just call backend api using httpmodule. But I cannot see that is the case with grafana. I cannot call backend api directly as I face CORS issue then. In angular 2 or angular 4 I know how to go through the proxy and solve this issue, but is there any similar way for grafana too. I would appreciate your help as I am stuck here for quite a while now. For some more background let me tell you that I am using my own grafana plugin which has couple of pages included in it. Now I want to display a table in one of them, but for that I want to connect to my backend. So how can I do that? How in grafana do we do that? My backend server is running on 8080 port while I am running grafana on 8090. Thanks

#7 
html:    
<button ng-click="ctrl.getThingy()">Click</button>

controller:
class PageCtrl {

/** @ngInject */
constructor($scope, $injector, backendSrv, datasourceSrv) {
  this.backendSrv = backendSrv;
  this.datasourceSrv = datasourceSrv;
}

getThingy() {
   //use some method to find your datasource from datasourceSrv
   this.cluster_id = this.datasourceSrv.getAll()[42]
   this.loadDatasource(this.cluster_id).then(() => {
    this.clusterDS.aFunctionInYourDatasourcePlugin(pod_name).then(pod => {
      this.pod = pod;
      this.pageReady = true;
    });
  });
}

loadDatasource(id) {
    return this.backendSrv.get('api/datasources/' + id)
      .then(ds => {
      this.datasource = ds.jsonData.ds;
      return this.datasourceSrv.get(ds.name);
  }).then(clusterDS => {
      this.clusterDS = clusterDS;
      return clusterDS;
  });
  }
}
#8

To not get cors errors, you should use server mode to go through the Grafana proxy. That is set on the config page for your mysql data source. Then you make calls to it like this (the url variable is taken from the config page - instanceSettings.url):

this.backendSrv.datasourceRequest({
  url: url,
  method: 'GET',
})
#9

Thanks for the reply. I got the idea, only have one question though. Does the same method applies to the panel plugins too?

#10

Well you can, but I think if you’re extending from MetricsPanel, datasource will be saved to controller object (see https://github.com/grafana/grafana/blob/10f934d287e94139bf3bf997ba7787b2e04d5143/public/app/plugins/panel/graph/module.ts).
I haven’t implemented a panel from MetricsPanel so I can’t confirm that for sure. I think MetricsPanel have the “Select datasource” in the Edit mode by default, and ctrl.datasource would be set by that choice.

#11

Hi all,
I am new in grafana . I want to create a plugin which will take data from our own api , and we want to show them on grafana panel . How can I do that ?

#12

Hello @sayantansingha9 ,

You may query external source with backendSrv.datasourceRequest() method.

import { getBackendSrv } from '@grafana/runtime';

let options: any = {
  method,
  url: "http://YOUR_API_URL_HERE"
};
if(method === 'GET' || method === 'DELETE') {
  options.params = data;
} else {
  options.data = data;
}

const response = await getBackendSrv().datasourceRequest(options);
const responseData = response.data;

I’m currently developing a datasource to take data from Loud ML server. You may look on github how to do requests: https://github.com/vsergeyev/loudml-grafana-app/blob/master/src/datasource/loudml_api.ts

@daniellee thank you a lot, your example with api/datasources/ helped me to get URL and username. I just wondering if there is a way to get all connection info. I’m developing a panel for ML. So when user creates a ML model panel sends a request to Loud ML server with info about source data to train model on.

Have a safe day,
V.