Ad-hoc filters support for angularjs plugins in Grafana 7.1

Grafana Plugin Development
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 */
this.variableSrv.addVariable(variable);
}

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 */
this.variableSrv.dashboard.events.emit('template-variable-value-updated');
this.variableSrv.dashboard.events.emit('time-range-updated');

});
});

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

2

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

3

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