Grafana 7 Plugin plugin dev: Dynamically adding options

Grafana Plugin Development
1

Hello,

with angular JS, we were able to dynamically add settings on the Settings page of a plugin. For example, in the “Gauge” panel, we can click on “Add threshold” in “Thresholds” and it dynamically adds a new line representing the new threshold.

I read the tutorial, at step 6, we can add new options, but I don’t know how I can do that dynamically.

Is this still possible with Typescript, in Grafana 7?

Thanks

2

Yes, there are two ways you can do this.

If you simply want to toggle visibility of options depending on the value of another option, you can use the showIf property when defining the control.

.addBooleanSwitch({
  path: 'showLegend',
  name: 'Show legend',
})
.addNumberSwitch({
  path: 'legendSize',
  name: 'Size of the legend',
  showIf: (config: SimpleOptions) => config.showLegend,
})

If you need more control than what showIf gives you, you can also create your own custom options editor, which is more involved.

3

Do you have example of code with a custom options editor ? I need to add new fields when the user click on a link, I can’t use “showIf” to achieve this unfortunately.

4

The starter for panel plugins used to explain the custom editor approach before the options builder was a thing. You can browse the history of the simple-react-panel to see how create one.

Check out SimpleEditor.tsx.

You also need to configure your plugin to use the custom editor in module.ts.

1 Like
5

Great ! Thank you for your help :+1:

1 Like
6

I need to do a custom panel to support a svg id to data series mapping for color conditions and composites. Basically a polystat panel but using an svg image. I have been trying to look through the source for a couple of the panels and it appears the builder has no solution for this. So in reality, setEditor really isn’t deprecated…

If polystat was react and not angular it might serve as a better example. Any plans to convert it to react?

7

Yes, I think I was unclear in my reply. As you say, the setEditor is still very much available for those who need more advanced UIs than what the options builder provides. However, with the introduction of the options builder, most plugin developers shouldn’t have to use setEditor.

As for the polystat, I don’t know whether there are any plans to convert it to React.

8

So why mark it as deprecated? Shouldn’t there be a comment instead to prefer the builder method if possible. I figured since it was deprecated that the builder must have someway of adding custom panels.

Thanks for coming back and leaving a reply on an old thread. It is appreciated :slight_smile:

9

Hm. You’re right, it’s indeed marked as deprecated. Not sure why. I’ll check with the team and get back to you.

10

It’s indeed deprecated. I apologize for misleading you. Here’s the reply from one of the core devs:

Nope, it’s deprecated. We want consistent UI for panel options, and custom editor (setEditor) will not guarantee that.

So whenever there is a case when something cannot be achieved with declarative options API, it’s a case for a feature request/API update.

addCustomEditor in the declarative options API should be flexible enough to implement advanced editors. And it’s available for both panel options and field options.

1 Like
11

You didn’t mislead. Just frustrated because the documentation for plugins isn’t great and I am new to react. They still support angularjs plugins so I take it they don’t plan on removing it anytime soon. I am mostly reading source code and comments in that code to fill in knowledge gaps.Thanks for getting the core developer feedback. It is appreciated.

12

Just in case someone wonders what I ended up doing… The standardoptions function in the code added the standard reduce options. I extracted that part as not all of it was relevant to my code. So I have 3 sections, useFieldConfig for the overrides that I wanted (i.e. FieldConfigProperty.Thresholds), useCustomConfig for extra drop down item I wanted in the overides and setPanelOptions which has 3 standardoptions I wanted that I mentioned above. The reduceOptions will do the calculations for you for the mean.

I downloaded and looked through the grafana source for a number of days using VS Code while also looking at all of their builtin plugins and various add on ones. My plugin was simple at the end because of the overrides that are built into the framework but YMMV.

1 Like
13

Is there an example how to create a class for addCustomEditor?
I can’t really use the example from setEditor anymore.

14

There’s no official examples on this yet, but I’m using a custom editor in one of my plugins. Feel free to check it out:

2 Likes
15

Thanks a lot dude, your answer will be a huge step to my target.

1 Like
16

Usually deprecated functions are still available for legacy compatibility. I don’t see anything rendered by my .setEditor/.setDefaults call at all, so you should not deprecate it but remove it completely then.

1 Like