Variables: Adds support for key/value mapping in Custom variable #27829

sartaj10 · 2020-09-25T19:43:37Z

What this PR does / why we need it:

This PR adds a new variable type where the user can enter key-value pairs as comma separated values where the key-value pairs are separated by colon (:). This would be useful where the user wants the dropdown values to be user-friendly while the query expects them in a different format. Eg : The user-friendly dropdown value could be 100 MB while the query expects it to be in bits (800000000)

Which issue(s) this PR fixes:

Fixes #1988
Fixes #1032

Special notes for your reviewer:

@hugohaggmark

Some screenshots are attached below

CLAassistant · 2020-09-25T19:43:43Z

All committers have signed the CLA.

sartaj10 · 2020-09-25T19:46:18Z

@hugohaggmark

hugohaggmark · 2020-09-28T04:13:33Z

@sartaj10 thanks for making this contribution, I don't think we need a new Variable Type for this. This behavior belongs to the custom variable type. WDTH?

hugohaggmark · 2020-09-28T04:18:42Z

@sartaj10 not sure what the best separator char would be for this, maybe | is also a candidate as it might be more common to use : in the label?

torkelo · 2020-09-28T16:56:10Z

yea, this feels like an extension of the custom variable

sartaj10 · 2020-09-28T19:08:08Z

@hugohaggmark @torkelo
Yeah, it does make sense to include this as an extension to the custom variable. I'll work on this and update the PR.

Regarding the separator, the semicolon seems more intuitive (similar to a hashmap). In the code, the user can escape the semicolon if it's being used as either a key or value using \

sartaj10 · 2020-09-28T21:52:04Z

@hugohaggmark

Updated the PR. It is now possible to include key/value pairs within the custom variable type and it takes care of the splitting whenever that is present.

public/app/features/variables/custom/reducer.ts

hugohaggmark

Fantastic work on this @sartaj10 and thank you for contributing ⭐ I left a small comment and you also need to update the docs here:
https://github.com/grafana/grafana/blob/master/docs/sources/variables/variable-types/add-custom-variable.md

hugohaggmark · 2020-09-30T04:16:04Z

@sartaj10 I'm going to change this Draft PR into Ready for Review, ok?

sartaj10 · 2020-09-30T04:41:09Z

@hugohaggmark
Sounds good

hugohaggmark

Looks great! Before we merge this I'd like for the technical writers to approve as well.

sartaj10 · 2020-09-30T06:23:51Z

Perfect, thank you.

oddlittlebird

One minor edit, then good to go!

docs/sources/variables/variable-types/add-custom-variable.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

sartaj10 · 2020-09-30T19:28:22Z

Thanks, Done 👍

mareksimunek · 2020-10-27T12:10:46Z

would be possible to access also a key as value?
E.g I have
namespaceName : dev

and sometimes I want in query namespaceName value and sometimes I want dev value, but still with 1 custom variable

HigH-HawK · 2020-10-30T11:27:38Z

Hi,

I have updated my Grafana to the latest version and tried the key/value mapping, which is working fine. I also tried working with the variable data in my panels but seem to do something wrong, as it doesn't do what i want it to do.

Example:

Constellation: srv-a is the grafana machine with Prometheus installed - srv-b and srv-c are the node_exporters, sending the data to srv-a

Prometheus has the IP addresses of srv-b and srv-c setup as targets

In my Dashboard on Grafana I setup a variable with the new mapping feature such as:

Variable name: host
Variable Label: Hosts
Variable Type: Custom
Variable Values: srv-b : IP, srv-c : IP

How can I query the IP (value) of the variable host in my panels? If I just put $host, it just returns the name (key)....I'm pretty sure I need to add something to $host but am just not sure what :(

torkelo · 2020-11-06T09:31:19Z

This breaks all existing dashboards using custom variabes with values that include a colon : , think we have to revert or figure out another way to make this and not break existing dashboards

) * Initial work on adding new mapping variable type * Remove add button * Update custom variable type to include key/value mapping * Update custom variable docs * Try to fix failing build * Update reducer.ts * Fix failing build * Remove expansion of the colon * Update docs Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com> Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

argais · 2020-11-20T23:59:42Z

would be possible to access also a key as value?
E.g I have
namespaceName : dev

and sometimes I want in query namespaceName value and sometimes I want dev value, but still with 1 custom variable

@mareksimunek I came here looking for this exact same behaviour, did you manage to get this?

argais · 2020-11-21T01:22:58Z

Well, answering myself and @mareksimunek , if you do ${namespace:text} it'll return the key.

HigH-HawK · 2020-11-23T12:37:15Z

How can I query the value of the variable in my panels?

If I put $variable_name, it just returns the name (key) but I can't seem to find a way, to get the value to use it in queries. Any help would be appreciated.

maard · 2020-11-25T11:51:13Z

How about do not introduce a separator at all, and still use commas: '100MB, 800000000',
and include a new boolean flag: 'Dictionary' (perhaps, under 'Selection Ooptions')?

mingmamma · 2021-01-04T07:21:08Z

How can I query the value of the variable in my panels?

If I put $variable_name, it just returns the name (key) but I can't seem to find a way, to get the value to use it in queries. Any help would be appreciated.

I am facing the same problem and let me give a more practical example. My custom variables set up is as the following:
Region={LAX:us-region, SYD:australia-southeast1}

I can use !{Region:text} to reference the key and get the returned value as either LAX or SYD with no issue.

Looking at the code change in the PR, I would assume that I can use !{Region:value} to get either us-region or australia-southeast1. However, that would throw an error.

offbyone · 2021-01-10T22:58:17Z

@mingmamma did you find a solution for this? I just bumped into the same issue.

hugohaggmark · 2021-01-11T05:58:24Z

@mingmamma & @offbyone we use GitHub for issues and feature requests. For questions we kindly request that you ask your question at the community site or in our external Slack here

Regarding your question the ${Region:text} doesn't format the "text" value but the "value" value so there is no ${Region:value}. All the formatting options are described in https://grafana.com/docs/grafana/latest/variables/advanced-variable-format-options/

All the best

offbyone · 2021-01-23T16:49:55Z

@hugohaggmark I understand not wanting to use github issues for support, that's fine. Given that, would someone from the Grafana dev crew mind having a look at the support question for this topic?

majorvin · 2021-02-17T17:15:35Z

I just installed the latest version 7.4.2 and not seeing this feature.

EDIT: Ok, it needs to have a space after the key and after colon. e.g. A : value

hugohaggmark · 2021-02-18T05:29:33Z

I just installed the latest version 7.4.2 and not seeing this feature.

EDIT: Ok, it needs to have a space after the key and after colon. e.g. A : value

Thank you for noticing this @majorvin, I've opened a PR that tries to clarify this #31303

hilmialf · 2022-12-14T03:46:21Z

Is it possible to make the selected one based on key rather than value?
I recently use this kv pairs:
key1 : value 1, key2 : value2, key3 : value2
*notice I use value2 in both key2 and key3.
When I select key2 in my dashboard, key3 also got highlighted. Then I can no longer select key3 from there.
I can only select key3 if my previous selected key was key1.

sartaj10 added 2 commits September 25, 2020 12:29

Initial work on adding new mapping variable type

38c72c9

Remove add button

dfe3dbf

sartaj10 changed the title ~~Variable Type: Add a new variable that allows custom key/value mapping~~ WIP / Variable Type: Add a new variable that allows custom key/value mapping Sep 25, 2020

hugohaggmark added the area/dashboard/templating label Sep 28, 2020

hugohaggmark added this to In Review in Frontend Platform Backlog via automation Sep 28, 2020

hugohaggmark added this to the 7.3 milestone Sep 28, 2020

Update custom variable type to include key/value mapping

a967737

sartaj10 changed the title ~~WIP / Variable Type: Add a new variable that allows custom key/value mapping~~ WIP / Variable: Update custom variable to allow key/value mapping Sep 28, 2020

hugohaggmark reviewed Sep 29, 2020

View reviewed changes

public/app/features/variables/custom/reducer.ts Outdated Show resolved Hide resolved

hugohaggmark reviewed Sep 29, 2020

View reviewed changes

hugohaggmark changed the title ~~WIP / Variable: Update custom variable to allow key/value mapping~~ Variables: Adds support for key/value mapping in Custom variable Sep 29, 2020

hugohaggmark added add to changelog pr/external This PR is from external contributor labels Sep 29, 2020

sartaj10 added 4 commits September 29, 2020 11:55

Update custom variable docs

b9886c7

Try to fix failing build

0e52d2e

Update reducer.ts

959e644

Fix failing build

318e08b

hugohaggmark marked this pull request as ready for review September 30, 2020 04:42

hugohaggmark requested review from achatterjee-grafana and oddlittlebird as code owners September 30, 2020 04:42

hugohaggmark requested a review from a team September 30, 2020 04:42

hugohaggmark approved these changes Sep 30, 2020

View reviewed changes

oddlittlebird approved these changes Sep 30, 2020

View reviewed changes

docs/sources/variables/variable-types/add-custom-variable.md Outdated Show resolved Hide resolved

Update docs

d2f08df

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

hugohaggmark merged commit 4e4242d into grafana:master Oct 1, 2020

Frontend Platform Backlog automation moved this from In Review to Done Oct 1, 2020

wbrowne mentioned this pull request Oct 15, 2020

Update changelog #28292

Merged

torkelo mentioned this pull request Oct 16, 2020

Templating: Custom variable input box switch to area input #28312

Closed

badrpc mentioned this pull request Oct 28, 2020

Dynamic content in repeated row/panel title #28601

Closed

hugohaggmark mentioned this pull request Oct 29, 2020

Allow custom mapping of template variable value -> display text #1032

Open

torkelo mentioned this pull request Nov 6, 2020

Custom Dashboard Variable: preview does not show correct values when values are URL's #28762

Closed

mckn mentioned this pull request Nov 6, 2020

Variables: Fix backward compatibility in custom variable options that contain colon #28896

Merged

lealceldeiro mentioned this pull request Dec 16, 2020

Template variables with custom values with support for key/value mapping and custom "All" value not working as expected #29887

Closed

gianpietro1 mentioned this pull request Jan 17, 2021

Customizing the name of the "All" custom variable #30335

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Variables: Adds support for key/value mapping in Custom variable #27829

Variables: Adds support for key/value mapping in Custom variable #27829

sartaj10 commented Sep 25, 2020 •

edited

CLAassistant commented Sep 25, 2020 •

edited

sartaj10 commented Sep 25, 2020

hugohaggmark commented Sep 28, 2020

hugohaggmark commented Sep 28, 2020

torkelo commented Sep 28, 2020

sartaj10 commented Sep 28, 2020 •

edited

sartaj10 commented Sep 28, 2020

hugohaggmark left a comment

hugohaggmark commented Sep 30, 2020

sartaj10 commented Sep 30, 2020

hugohaggmark left a comment

sartaj10 commented Sep 30, 2020

oddlittlebird left a comment

sartaj10 commented Sep 30, 2020

mareksimunek commented Oct 27, 2020

HigH-HawK commented Oct 30, 2020

torkelo commented Nov 6, 2020

argais commented Nov 20, 2020 •

edited

argais commented Nov 21, 2020

HigH-HawK commented Nov 23, 2020

maard commented Nov 25, 2020

mingmamma commented Jan 4, 2021

offbyone commented Jan 10, 2021

hugohaggmark commented Jan 11, 2021

offbyone commented Jan 23, 2021

majorvin commented Feb 17, 2021 •

edited

hugohaggmark commented Feb 18, 2021

hilmialf commented Dec 14, 2022 •

edited

Variables: Adds support for key/value mapping in Custom variable #27829

Variables: Adds support for key/value mapping in Custom variable #27829

Conversation

sartaj10 commented Sep 25, 2020 • edited

CLAassistant commented Sep 25, 2020 • edited

sartaj10 commented Sep 25, 2020

hugohaggmark commented Sep 28, 2020

hugohaggmark commented Sep 28, 2020

torkelo commented Sep 28, 2020

sartaj10 commented Sep 28, 2020 • edited

sartaj10 commented Sep 28, 2020

hugohaggmark left a comment

Choose a reason for hiding this comment

hugohaggmark commented Sep 30, 2020

sartaj10 commented Sep 30, 2020

hugohaggmark left a comment

Choose a reason for hiding this comment

sartaj10 commented Sep 30, 2020

oddlittlebird left a comment

Choose a reason for hiding this comment

sartaj10 commented Sep 30, 2020

mareksimunek commented Oct 27, 2020

HigH-HawK commented Oct 30, 2020

torkelo commented Nov 6, 2020

argais commented Nov 20, 2020 • edited

argais commented Nov 21, 2020

HigH-HawK commented Nov 23, 2020

maard commented Nov 25, 2020

mingmamma commented Jan 4, 2021

offbyone commented Jan 10, 2021

hugohaggmark commented Jan 11, 2021

offbyone commented Jan 23, 2021

majorvin commented Feb 17, 2021 • edited

hugohaggmark commented Feb 18, 2021

hilmialf commented Dec 14, 2022 • edited

sartaj10 commented Sep 25, 2020 •

edited

CLAassistant commented Sep 25, 2020 •

edited

sartaj10 commented Sep 28, 2020 •

edited

argais commented Nov 20, 2020 •

edited

majorvin commented Feb 17, 2021 •

edited

hilmialf commented Dec 14, 2022 •

edited