Variables Support Custom React-based Datasource Plugin

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.

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).

1 Like

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