Datasource plugin - query editor question

Hi there!

I have a noob question, which is likely more connected to typescript than to Grafana plugin development, but someone here might be able to help.

I am developing a simple datasource plugin, it does not matter what is the backend. The hard part for me is the query editor. What I can do now is using simple Select field like this:

<div className="gf-form">
                <Select
                    prefix="Metric: "
                    options={myoption}

This gives me a rolldown menu of options. The question is how to
a) format it as options in eg. Graphite datasource (Series in picture)
b) add ‘+’ sign to add as many options as desired (Functions in picture)

Options will be given in a simple Array variable, but I cannot make it work. I tried to use code from Graphite datasource plugin, but there are too many dependencies to make it work. There must be some simple solution I don’t see. Also, I am using a tsx QueryEditor as in the plugin devel tutorial, not the class version with html template, as in Graphite plugin.

Picture of desired state:

Screenshot from 2021-03-26 09-42-56

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.