Using query results as a select option to generate new query for my backend datasource plugin

Hi, I am trying to create a datasource backend plugin and I want to generate query with multiple steps for my datasource which is being connected using go lang in backend.
The steps are:

  1. First query will be to get distinct types of metrics and show it in options in the query
  2. Second will be, if user select one option from it will get the data on UI.

I was able to get data on UI where graph are shown using dataframes, but i want the first query to return some data in frontend as select options format.
What can i do for it?
As i found out that if i add a variable(array) in my query and want to append data into it in backend it is not being updated in frontend, so that remains empty for me.
Like the frontend variables can be passed to backend using getTemplateSrv, is there any way to do vice versa of it.
Please help.

Hello,

I have a similar problem for now, can you show what you already got please, i think it might help me.

Thanks’ in advance

Nicolas

Hi,
Using panelData properties i am able to get those values now by adding them as frames in backend and accessing them in queryeditor using this data?.series.values().next().value.fields[0].values
I am not sure if it is acceptable.
But the data is also showing on the grafana ui where all graphs are shown and i want this to be populated only in my dropdown. Also asyncselect is not working as i want it to, it does not populate the values at first at all. I want it to go for loadoptions only when i click on it and should refresh the options with each click.
Hope any info helped you. But i am a bit stuck on two things( do not want to show on graph section and want to work async select as my choice).

Thank you
Vinit

Thank you that’s help me a little, if i found how to do it i will tell you.

Nicolas

1 Like

Hi, If you get any solution for the same, please let me know too.

Hello,

I have a solution that work for me.

I get the selected value in the query editor and then the data show change.

In my query editor i have this :

let ListChannel = [];

   //Get the data from datasource
   if (GetListChannel().length > 0) {
       ListChannel = GetListChannel();
   } else {
       ListChannel = [
           {
               label: "",
               value: "",
           },
       ];
   }

   return (
       <>
           <div className="gf-form">
               <Select
                   placeholder="Select a Channel"
                   options={ListChannel}
                   showAllSelectedWhenOpen={true}
                   defaultValue={ListChannel[1]}
                   onChange={function (value: SelectableValue<string>): void | {} {
                       valuechannel = value
                       //Reload the query with the new value
                       onRunQuery()
                   }} />
           </div>
       </>
   );

And in my datasource.ts I have :

//to get the data in my query editor
export function GetListChannel() {
    return DataSource.ListChannelDTS;
}

// this is to show the good data value
async doRequest(query: MyQuery) {

        //If a value is selected we change the request
        if (SelectedChannelValue() !== undefined) {
            let url = "http://localhost:3001/GET/data/" + SelectedChannelValue().value;
            const result = await getBackendSrv().datasourceRequest({
                method: "GET",
                url: url,
                
            })
            return result;
        }//If no value send the default url
        else {
            let url = "http://localhost:3001/"
            const result = await getBackendSrv().datasourceRequest({
                method: "GET",
                url: url,
                params : query
            })
            return result;
        }
    }


// And then i made a a little thing to show the data i get in my query editor
const promises = options.targets.map((query) =>
            this.doRequest(query).then((response) => {
                const frame = new MutableDataFrame({
                    refId: query.refId,
                    fields: [
                        { name: "name", type: FieldType.string },
                        { name: "value", type: FieldType.number },
                        { name: "time", type: FieldType.time },
                    ],
                });

                JSON.parse(response.data).forEach((point: any) => {
                    frame.appendRow([point.name, point.value, point.time]);
                    DataSource.compteur = 0;
                    if (DataSource.ListChannelDTS.length === 0) {
                        DataSource.ListChannelDTS.push({
                            'label': [point.name],
                            'value': [point.name]
                        })
                    }
                    else {
                        //Check if the value is already in the list 
                        for (let i = 0; i < DataSource.ListChannelDTS.length; i++) {
                            if (DataSource.ListChannelDTS[i].label.toString() === [point.name].toString()) {
                                DataSource.compteur += 1;
                            }
                        }
                        //Add the new value if not found precedently
                        if (DataSource.compteur === 0) {
                            DataSource.ListChannelDTS.push({
                                'label': [point.name],
                                'value': [point.name]
                            })
                        }
                    }
                });
                return frame;
            })
        );
        return Promise.all(promises).then((data) => ({ data }));
    }

Tell me if this help

Nicolas