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:
First query will be to get distinct types of metrics and show it in options in the query
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.
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).
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 }));
}
