Backendsrv seems to try via browser instead of backend

Grafana Plugin Development
1

Hello

So I’m trying to develop a plugin that will talk to an api this api will give me some string values for a certain server and I just want to append a time to it and a value of 1.

I followed the datasource plugin tutorial and als the .fetch explanation. I’ve tried looking into other datasources as well but can’t seem to find any major differences in the user of backendsrv.

What do I have now

export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
  url?: string;
  constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
    super(instanceSettings);
    this.url = instanceSettings.jsonData.url;
  }

async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
getBackendSrv()
    .fetch({
      method: "GET",
      url: this.url + `/pdb/query/v4/facts`,
      headers: {
        'Content-Type': 'application/json'
      },
    }).pipe(
      map((response) => {
        return response
      })
    ).subscribe(result => {
      console.log(result);
    })
....
}

However I seem to get a mixed content warning error

 Mixed Content: The page at 'grafana.example.com' was loaded over HTTPS, but requested an insecure resource 'http://puppetdb:9090/pdb/query/v4/facts'. This request has been blocked; the content must be served over HTTPS.

So it does seem the request is working but I think it is not going trough the backend.

I also use the prometheus plugin and that also works via http internally. So it is weird. Am I missing something?

1 Like
2

You can’t send HTTP requests from an HTTPS webpage. You need to make sure puppetdb:9090 is accessible via HTTPS.

3

Yes I know I’m trying to send the request trough the backend like other plugins but it seems to send it via the browser instead.

4

Requests are always sent via the browser. The Grafana webpage requests data from the backend like any other website would request data from an HTTP server.

5

but then how do other plugins like prometheus,… do it? They do work via http as they use the backend.
The documentation of backenSrv also mentions http.

6

The Prometheus plugin is also a datasource plugin, which integrates into the backend. It “teaches” the backend how to talk to Prometheus. The communication always happens like this:

First, website HTTP → Grafana backend
then, Grafana backend Prometheus plugin → Prometheus server

7

Ok so how do I do that. I know the prometheus extends from a different class. My plugin is also a datasource plugin. I’ve also tested this one and used the backendsrv.fetch inside. As they also do inside there plugin. But requests seems to happen via the browser. How do I tech my plugin to use the backend.

export class PrometheusDatasource
  extends DataSourceWithBackend<PromQuery, PromOptions>
  implements DataSourceWithQueryImportSupport<PromQuery>, DataSourceWithQueryExportSupport<PromQuery>
{

....

 _request<T = any>(
    url: string,
    data: Record<string, string> | null,
    overrides: Partial<BackendSrvRequest> = {}
  ): Observable<FetchResponse<T>> {


....
    return getBackendSrv().fetch<T>(options);
  }
8

If you want to query a data source via the backend, for which no plugin exists yet, you need to write a Grafana data source backend plugin. Here’s the starter: GitHub - grafana/grafana-starter-datasource-backend: A starter for Grafana data source plugins with a backend.

1 Like
9

Thank you for the link. It does seem to be a different approuch than the current datasource-plugin tutorial I was following. I’ll try this method and hopefully get it working.

10

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.