Variables Support Custom React-based Datasource Plugin

Grafana Plugin Development
1

Hi there,

I am attempting to add variable support to a datasource plugin I have been working on. As far as I can tell I should be trying to make use of templateSrv to achieve this objective but it is currently beyond me how to access this definition when developing a plugin using the recommended React-based approach leveraging @grafana react modules. Is it at all possible?

I have attempted to gain access in a brute force manner similar to How to change a dashboard variable value from a plugin? but this leads to compilation errors as the DataSourceApi definition has no templateSrv property.

I’d really like some guidance on how to develop custom datasources with templating support. Any pointers would be greatly appreciated.

1 Like
2

So for those looking for a solution / work around for this. This is what I ended up coming up with.

import { getDataSourceSrv } from '@grafana/runtime';
let templateSrv = (getDataSourceSrv() as any).templateSrv;

then to have my variables interpolated

templateSrv.replace(target.filter)

where filter is the name of one of the fields associated with my datasource. Looking at recent developments in @grafana/runtime I suspect that this is perhaps not the preferred pathway (but it appears to work).

2 Likes
3

import { getTemplateSrv } from ‘@grafana/runtime’;

const templateSrv = getTemplateSrv();
const variablesProtected = templateSrv.getVariables();
const variablesStringfied = JSON.stringify( variablesProtected );
const variables = JSON.parse( variablesStringfied );

This gives you access to all the variables in the visualization plugin

1 Like
4

My earlier solution was a hack and it doesn’t work for select all variable and panel repeat by variable options.

Since the newer grafana release as restored access to the Template Server, a simple solution to parse variables is

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

    async query(options: DataQueryRequest<SplunkQuery>): Promise<DataQueryResponse>{
        const { targets, scopedVars } = options;
        const queries = targets.map( target => 
             this.replaceVariables(target.queryText, scopedVars)
        );
        ...
        doRequest(... )
        ...
        return { data: ... }
    }

    replaceVariables(queryText: string, scopedVars: any): string{
        const templateSrv = getTemplateSrv();
        const replacedVariables = templateSrv.replace(queryText, scopedVars);
        return replacedVariables;
    }
5

We’ve been working on improving the documentation for variables in plugins. You can find the guide here:

If you find something that isn’t documented in there, let me know!

1 Like
6

Hi, I’m a bit confused about this. Is this the proper way of setting ad hoc filters from a react plugin? Is it possible now? I’ve been looking into this for a while. I’ve been working on a word cloud panel and would like to set an elasticsearch filter when the user clicks on a word so that the rest of the dashboard gets filtered.

Thank you