Ad-hoc filters support for angularjs plugins in Grafana 7.1

I understand that variable service is no longer available. But I could not find a solution for what I was doing something like this in 6.5:

let variable = _.find(this.variableSrv.variables, {type: ‘adhoc’});

if (!variable) {

/** If template variable doesn’t exist, create new variable with default values */
variable = this.variableSrv.createVariableFromModel({
type: ‘adhoc’,
datasource: ‘MyCustomDatasource’,
hide: 0,
skipUrlSync: false,
name: ‘Filter’

/** Add the newly created variable to the variables list */

const existingFilter = _.find(variable.filters, {key});

/** If filter key already exists just update the value /
if (existingFilter) {
existingFilter.value = value;
* else add the new filter to the filters list */
else {
variable.filters.push({key, value, operator: ‘=’});

/** Update the options and refresh the dashboard */
this.variableSrv.updateOptions(variable).then(() => {

this.variableSrv.variableUpdated(variable).then(() => {

/** Emit the variable updated event to refresh the dashboard */'template-variable-value-updated');'time-range-updated');


Is there any replacement service that I could use in AngularJS which would do similar task?

For example this ES Table has some columns, and when we mouse over we could click “+” icon to apply filter on this panel and across the dashboard. I’m looking for this kind of solution

If doing in AngularJS is not possible, then a solution in React is fine as well. I can try converting plugin into React