Set a key value grafana variable

Grafana Plugin Development
1

Grafana added support for “key : value” variables Variables: Adds support for key/value mapping in Custom variable by sartaj10 · Pull Request #27829 · grafana/grafana (github.com).

Are you able to set the key and value to different things without having it predefined in the variables section?

Example:

image
image487×964 44.2 KB

update-key-value-grafana-variable

Code ran when buttons pressed:
locationService.partial({[var-keyValue]: "existingKey1"})
locationService.partial({[var-keyValue]: "existingKey2"})
locationService.partial({[var-keyValue]: "notExisting"})
locationService.partial({[var-keyValue]: "a1 : b2"})

In the code above “a1 : b2” changes both the key and value to “a1 : b2” instead of key = a1 and value = b2. Is there a way to get it to work?

Original question Update part of a Custom variable · gapitio/gapit-htmlgraphics-panel · Discussion #155 (github.com)

2

I guess my question is what is the end goal of this effort and how will you use these dynamic key values?

3

We use an HTML Graphics panel to present a custom navigation selector for a dashboard which displays Real User Monitoring (RUM) data. The selector is a table of buttons, each of which represents a topic area (Search & Navigate, Communication Preferences, etc.) for one of our Lines of Business (LOB) and one or more portal paths associated with same. The user can also select the column header for all of the topics in a given LOB, or a row header for all the LOBs for a given topic area.

This dynamically updates variables in the dashboard that in turn drive the data panels. Due to the various combinations, we can have up to 12 topic (key) and path (value) combinations.

If we could make those “key : value” pairs in a Custom variable, it both organizes the information and would allow some interesting opportunities to use the dynamic repeat capabilities in both individual panels and using rows. Currently we have to have 24 Constant variables named Pathtext1-12 and Pathvalue 1-12 and can’t do anything with dynamic repeating.

I am happy to elaborate more if that does not answer the question.

1 Like
4

Are you @zuperzee or some other person. :eyes:

5

@zuperzee is the author of the HTML Graphics panel plugin. I had originally posted the above question on the syntax to update a Custom variable on that panel’s GitHub Discussion board. @zuperzee brought the question over here and subsequently asked me in my original ticket to respond to your question (since I was the original inquirer). I responded directly here as opposed to responding on the GitHub board for HTML Graphics.

2 Likes
6

Just curious if there were any further thoughts on this item. If there is a syntax that would enable this functionality, it would be a huge boon for us.

7

Further update: I am trying to set a new list (just a comma separated list of values, not key : value pairs) into a Custom variable and it’s treating the whole list as a single string and putting both into the text and value of the current section of the JSON and not updating the options section. How do I get it to update the options section with the new list?

This is a critical need to work around shortcomings in the ability to query a data source based on other variable selections. The query support available for this data source in the variable definition does not support using variables, so chained variables are not an option. We are using a query in an HTML Graphics panel (the panel query capability is significantly more robust and we CAN use the other variables there), then reading the returned list and trying to put that list into the Custom variable so the user can make a selection.

8

Please share a screen capture of this csv setup and how you are using it in filters

9

In this case, none of this is coming from a CSV. The three “input” variables are all query variables, respectively retrieving names of teams, lines of business and environment from our data source (Datadog). Those three variables are then used in the panel query to Datadog to retrieve a list of portal paths which are tagged with all the selected attributes.(an asterisk wildcard is also supported for any or all of the input attributes).

The panel query works perfectly; it returns exactly the correct set of paths. My Javascript reads the list of paths returned by the query and constructs a comma-delimited list that it is passing to the locationService API. That’s where this is not working.

I can use the Javascript to build any construct or text to pass to the locationService, I just need to know the correct syntax.

1 Like
12

I tried your syntax verbatim (only changing it to use my variable name) in my JavaScript code and it did not affect the Custom variable at all.

Here is the function I have been using to update Grafana variables (taken from the sample code in the HTML Graphics panel authored by @zuperzee).


htmlGraphics.locationService.partial(

{

[`var-${variableName}`] : value,

},

true // replace: true tells Grafana to update the current URL state, rather than creating a new history entry.

);

}

It works fine for Constants, but as mentioned, while it inserts the value into the Custom variable, it does not do so in the desired way.

1 Like
13

@patricksheehy Partial supports all kind of data types:

partial: (query: Record<string, any>, replace?: boolean) => void;

Have you tried to set the value as hash?

locationService.partial({[var-keyValue]: {a1 : b2}})
1 Like
14

The function as illustrated generated the error Expression expected for the first parameter.
If I put quotes around the variable name, like this
htmlGraphics.locationService.partial({['var-path']: {a1 : b2}});
the error changes to b2 is not defined.
Putting quotes around the key:value pair, like this
htmlGraphics.locationService.partial({['var-path']: {'a1 : b2'}});
generates the error Unexpected String.
If I remove the braces around the key:value pair or move the quotes outside the braces, whatever is in the quotes is inserted into the current section of the JSON without changing the options section

      {
        "current": {
          "selected": false,
          "text": "a1 : b2",
          "value": "a1 : b2"
        },
        "hide": 0,
        "includeAll": false,
        "label": "View Path",
        "multi": false,
        "name": "path",
        "options": [],
        "query": "",
        "queryValue": "",
        "skipUrlSync": false,
        "type": "custom"
      },

The result I expect would be like this

      {
        "current": {
          "selected": false,
          "text": "a1",
          "value": "b2"
        },
        "hide": 2,
        "includeAll": false,
        "label": "View Path",
        "multi": false,
        "name": "path",
        "options": [
          {
            "selected": true,
            "text": "a1",
            "value": "b2"
          }
        ],
        "query": "a1 : b2",
        "queryValue": "",
        "skipUrlSync": false,
        "type": "custom"
      }
15

It should be hash with variable or string as

htmlGraphics.locationService.partial({['var-path']: {'a1' : 'b2'}});
16

The suggested syntax doesn’t generate any errors, but it upon execution also results in the variable being empty:

{

"current": {

"selected": false,

"text": "",

"value": ""

},

"hide": 0,

"includeAll": false,

"label": "View Path",

"multi": false,

"name": "path",

"options": [],

"query": "",

"queryValue": "",

"skipUrlSync": false,

"type": "custom"

},
17

The locationService is exported from @grafana/runtime by HTMLGraphics.

locationService.partial doesn’t populate the options field. It updates the query params of the URL, which is read by the JSON model and set as selected.

Here is dashboard of setting variables. (look at the URL).
var-test2.json (4.7 KB)

Tried setting key:value pairs with encodeURIComponent() - JavaScript | MDN (mozilla.org) as well, but doesn’t seem to work either.

1 Like
18

Thank you for the test and your efforts, it is greatly appreciated. I think I am just going to open a ticket and work the issue that way; I believe they have a shortcoming/oversight/bug in the implementation, possibly because of all of the recent rework they have done with variables.

Thanks again!