Using infinity datasource in the panel plugin SimplePanel.tsx

Grafana Plugin Development
1

Hi All,
I am starting to develop a panel plugin, and for now I am just focusing on the components, the SimplePanel.tsx. I don’t need the options part yet.

In the panel, I want to create a simple form with a submit button and a text field to display the response. The challenge I have is that I want to reach the infinity datasource on the click of the button and pass it a json payload with the form input, as a post request. Finally display the response message in the text field.

How would I with the javascript logic connect to my infinity datasource in the SimplePanel.tsx file. My infinity datasource has a call to an api with security added and it’s already configured.

Thank you guys in advance, any hint would be very helpful.

2

Hi @markomedin,

You can use the getDataSourceSrv().get() and getBackendSrv().fetch() functions to get a reference to the datasource and then make a post request to the backend respectively.

Something like this:

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

const datasource = await getDataSourceSrv().get(`your-datasource-id`);
const response = await getBackendSrv().fetch({
  method: 'POST',
  url: 'api/ds/query',
  data: {
    datasourceId: datasource.id,
    queries: [
      {
        refId: 'A',
        datasourceId: datasource.id,
        queryType: 'query',
        query: 'your-query',
      },
    ],
  },
});

Let me know if you run into any issues.

1 Like