Search code examples
pluginsdatasourcegrafana

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


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 ?

[edit] I'm using Grafana 6.7.1 and @grafana/toolkit

Thanks for your help


Solution

  • 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