How to change a dashboard variable value from a plugin?

Grafana Plugin Development
1

Hello-

What is the best way for a panel plugin to update a variable? I have tried:

  this.$location.search( 'var-'+name, value );

This updates the URL properly, and on browser refresh, the variables is set, but I would like to actively set it.

Thanks for any pointers!

ryan

2

I found a solution that works: the key is: this.variableSrv.variableUpdated(v, true);

  updateVarable(varname:string, path:string) {
      console.log('update variable', varname, path );
      let v = _.find(this.variableSrv.variables, check => {
        return check.name === varname;
      });
      if(v) {
        this.variableSrv.setOptionAsCurrent(v, {
          text: path,
          value: path,
        });
        this.variableSrv.variableUpdated(v, true);
      }
  }
1 Like
3

Hello,
How to you access variableSrv ? What class do you have to import?

Best regards?

4

You can just put variableSrv in the constructor and it will get wired up for you. See:

5

Thanks :slight_smile: work very well :slight_smile:

6

how about react plugins, how do we access variableSrv?

2 Likes
7

This definitely took some serious time/research to resolve here is how I resolved it:

  1. my dashboard variable is named ‘location_id’
  2. the variable is used in a query “select location_name from location where locationid=$location_id”
  3. when a user clicks on a popup I needed to update the variable so I could refresh the data for other visual components.
import { DataSourceApi } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';

    handleOnPopup =  (e:any, locationId:number ) => {
        let dataSource:DataSourceApi = getDataSourceSrv() as unknown as DataSourceApi;    
        let variable = _.find(dataSource.templateSrv.variables, {'name':'location_id'});
        this.locationSelectedId = locationId;
        variable.query = locationId.toString(); //make string even if its a number

        variable.variableSrv.updateOptions(variable).then(() => {
            variable.variableSrv.variableUpdated(variable, true);
        });
    }

render(){
//check the data state and get your updated data          
if(data.state == "Done" && data.series[2] && data.series[2].length > 0 && data.series[2]["fields"][0]["values"].buffer[0] == this.locationSelectedId){
            
                this.locationDevices = data.series[2];

            }
}

Other Context: Custom Grafana React Plugin
Grafana Version: 6.4.4
NPM packages:
-"@grafana/runtime": “^6.6.0”
-"@grafana/data": “^6.5.1”

4 Likes
8

This worked for me to access variables in custom panel when using the “Mixed” mode (in the DS select box).
this is my code:

import { DataSourceApi } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';

        let dataSource:DataSourceApi = getDataSourceSrv() as unknown as DataSourceApi;    
        let variable = _.find(dataSource.templateSrv.variables, {'name':'location_id'});
9

I Grafana 7.0 there is no access to variableSrv. I changed the Url using LocationSrv but it does not update panels and selector of variable actively. I asked another question in this link if you have any idea let me know. thanks

2 Likes
10

@amirzaei69 are you sure? I can access in Grafana7 using code available in this thread How to change a dashboard variable value from a plugin?

11

My understanding is the bug that is preventing the locationsrv from updating after changing the variable is to be fixed in the 7.1 release (I believe the targeted release date is July 14th 2020)

12

Since this topic is still receiving a decent amount of traffic:

If you’re looking to change a dashboard variable from a React-based plugin, check out Set a variable from your plugin.