How to make Grafana's datasource plugin compliant with Query Inspector?

Grafana Plugin Development
1

I’m developping a datasource plugin for Grafana that works nicely but if I try to use the Query Inspector , I only get the following message "Loading query inspector… " .

So how to make my plugin compliant with this feature? Is there any specific function to add to my datasource.ts file other than async query ...?

I’m using Grafana 6.7.1 and @grafana/toolkit

Thanks for your help

2

Hello @ae3e

May be this is a right example:

It used then in module.ts

Regards,
V.

3

Thanks for your answer.

But I think your example is related to the query explorer and not the query inspector which is in the query tab when a panel is edited (see image below).

img
img1902×483 51.3 KB

4

Finally , I think I understood how it works.

The query inspector is triggered only if an event (dsRequestResponse or dsRequestError) is emitted after the query is done by the backend server (see code documentation)

For example :

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

//later in your code
getBackendSrv().datasourceRequest({
      url:'https://api.github.com/repos/grafana/grafana/stats/commit_activity',
      method:'GET'
    }).then((data: any) => console.log('DATA',data));

In my datasource, I’m doing fetch() call from the browser so no event is emitted and then no data are displayed in the query inspector. But here is a workaround to emit the event :

import { SystemJS } from '@grafana/runtime'
//later in your code
SystemJS.load('app/core/app_events').then((appEvents:any) => {
    appEvents.emit('ds-request-response', data) // where data is the data to display
})

I hope it can help someone else

1 Like