How to fetch http data through datasource at a Grafana Panel Plugin

Grafana Plugin Development
1

Hello Everybody,

I am developing a Grafana panel plugin (version 9.4.7), and I need to make a fetch request. However, I want to ensure that the request goes through the datasource to avoid CORS (Cross-Origin Resource Sharing) issues. The built-in fetch method in web browsers is not the optimal approach in this case.

To achieve the desired outcome, the recommended way to make a fetch request in a Grafana panel plugin is by utilizing the getBackendSrv() function from the @grafana/runtime package. You can use this function, along with the desired HTTP method (such as GET), to interact with the datasource.

However, it is not working for me.
Here’s an simple example of how to make a fetch request through the datasource using getBackendSrv() at panel plugin:

the query is not the full path. e.g.: /target/query/at/timestamp
the datasource that I had added at grafana plugin has the path: e.g.: http://ip-address:8000/

const getData = async () => {
  try {
    const response = await getBackendSrv().get(query);
    const data = response;
    console.log(data);
  } catch (error) {
    console.error('Error fetching data: ', error);
  }
};

So, I expected Grafana to receive the query and make a request through the mentioned datasource. However, it doesn’t work as expected. It behaves the same way as if I had only used the fetch method.

How to fix it? Should I use another method or another way to fetch data through the datasource?

P.s: I also tried the await getBackendSrv().fetch(…) without success…

Any help would be greatly appreciated! Thank you very much in advance!

Cheers,
Turtles

2

Hello,

Personnaly I use MutableDataFrame to display my data maybe you can try.

MutableDataFrame

Hope it help you

Nicolas

3

Welcome

Maybe you can take a look at how others have done it?

4

thanks Nicolas, but this does not solve my problem.

5

@companymvms You can use getDataSourceSrv to get the data source instance and then you can work with it directly or use getBackendSrv like

async () => {
  const targets = data.request?.targets;
  if (targets.length && targets[0].datasource) {
    const datasource = await getDataSourceSrv().get(targets[0].datasource);
    notifySuccess(["PostgreSQL Version", await datasource.getVersion()]);
  }
};

or

const ds = await getDataSourceSrv().get(`DATASOURCE-ID`);
  const appEvents = getAppEvents();
  try {
    const resp = await getBackendSrv().datasourceRequest({
      method: 'POST',
      url: 'api/ds/query',
      data: {
        queries: [
          {
            datasourceId: ds.id,
            refId: '1',
            ...payload,
          },
        ],
      },
    });
    appEvents.publish({
      type: AppEvents.alertSuccess.name,
      payload: [text + ': ' + resp.status + ' (' + resp.statusText + ')'],
    });
  } catch (error: any) {
    appEvents.publish({
      type: AppEvents.alertError.name,
      payload: [text + ': ' + error.status + ' (' + error.statusText + ') ' + error.data.message],
    });
  }
6

Thanks, Yosiasz. I really liked this plugin; however, I’m not sure if it can help me. Yes, I can add it to my datasource and fetch data from it. However, I must before to set up the URL and other things in the datasource UI. In my use case, I need to be able to change the URL on the fly. The user won’t be able to edit the datasource and so on. Regardless, I can use this plugin for other requirements. Thanks!

1 Like
7

Thank you very much but it did not work also…
The second option solution: The datasourceRequest is outdated, and I tried to adapt your example to use the GET method, but I’m still encountering the same error as before.
The first option was very promising, but I’m not sure where to add my URL. For example, when you retrieve the data source, how do I fetch from there?

8

Thanks, Yosiasz. I really liked this plugin; however, I’m not sure if it can help me. Yes, I can add it to my datasource and fetch data from it. However, I must before to set up the URL and other things in the datasource UI. In my use case, I need to be able to change the URL on the fly. The user won’t be able to edit the datasource and so on. Regardless, I can use this plugin for other requirements. Thanks!

1 Like
9

not for you to use that plugin but to see how the dev @yesoreyeram handled fetch http data code in his github repo for that plugin

10

ok, this makes sense! Thanks, I will look on it!

11

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