Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to handle duplicates in variables/dropdowns #646

Closed
ptrkkr opened this issue Mar 15, 2024 · 2 comments
Closed

How to handle duplicates in variables/dropdowns #646

ptrkkr opened this issue Mar 15, 2024 · 2 comments

Comments

@ptrkkr
Copy link

ptrkkr commented Mar 15, 2024

Hi Team!

Following problem we have
We want to have a dropdown, which shows a list of string values, which represent a column of a database table for example. When clicking on the dropdown entry it should show a table based on the selected value. The problem is if there are duplicated string values in the dropdown, then we wont be able to select the right data based on these values.

We would expect to be able (like in 'normal' frontend frameworks) to put more complex objects into a dropdown and then use the id of this complex object to query for new data.

Questions

  • Is it possible to work with more 'complex' objects in dropdowns?
  • If not possible, what is the preferred way to solve this kind of problems?

Thx in advance!

@ptrkkr
Copy link
Author

ptrkkr commented Mar 20, 2024

I have seen this question here and @torkelo said that there a value and text representations of variables.
This would be great! But i don't know how it can be set. Does anyone have some experience with that?

@ptrkkr
Copy link
Author

ptrkkr commented Apr 5, 2024

I have found a way to do it 👍
For everyone interested, here is an example using the infinity data source:

return new QueryVariable({
    name: 'host',
    label: 'Host',
    datasource: ANY_DATASOURCE,
    query: {
      refId: 'host',
      infinityQuery: {
        parser: 'backend',
        refId: 'hostVariable', // this is a necessary field
        root_selector: "data.(name & ';;' & hostId)", // selects the data you want from the json using JSONata
        url: `${HOST_ENDPOINT}`,
        url_options: {
          method: 'GET',
        },
      },
      queryType: 'infinity',
    },
    sort: VariableSort.alphabeticalAsc,
    placeholder: 'No Host selected',
    regex: '(?<text>.*);;(?<value>.*)', // most important part! Here we define what our display text and value is. The regex groups must be 'text' and 'value' to work
  });
}

You can see the regex documentation (example) for dashboards here.
After you have defined the two groups in the regex, Grafana automatically uses the value for queries and the text for dropdowns or other representations visible to the user.

@ptrkkr ptrkkr closed this as completed Apr 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant