Dropdown selectors for template variables

[mwitkow]

It should be possible (e.g. in JSON) to specify expressions that would populate a drop-down selector for a given variable. For example:

I have a dashboard that is parametrised by var.job=web-prod, var.job=web-alpha etc. I have no way for users to discover this,and when they go to a dashboard, they see empty graphs.

Nor is there an easy way to switch between all job names. The job names are already in prometheus data (just list job labels of up{}).

It would be great if JSON allowed me to specify a drop down for this. This would make template variables easily discoverable and give users the ability to see what they can filter by.

[mwitkow]

We're in dire need of this, and consider implementing hacks to have it.

@juliusv Are you guys thinking about adding selectors for template variables anytime soon?

[stuartnelson3]

Do you currently have anything in place? You can open a pull request and we will take a look at it

[mwitkow]

No, we're considering investing time in this, but given that we have little experience with Ruby, it'll probably take a while ;)

[stuartnelson3]

it would probably be almost entirely javascript, but i'll talk with @juliusv to see what he thinks about it

[mwitkow]

Any ideas? If you guys don't have the time to implement this, some code pointers as to where to start would be much appreciated :)

[stuartnelson3]

variables are added here:
https://github.com/prometheus/promdash/blob/c6523a0a446bcfdf770a0d59f8d8125b0f6b123e/app/assets/javascripts/angular/resources/shared_graph_behavior.js#L145-L147
and that code is executed by clicking here:
https://github.com/prometheus/promdash/blob/c6523a0a446bcfdf770a0d59f8d8125b0f6b123e/app/views/dashboards/show.html.erb#L232

your template variables are stored on the globalConfig object. When the dashboard loads, url variables are appended to this object, and then these are copied to the vars object array.
https://github.com/prometheus/promdash/blob/c6523a0a446bcfdf770a0d59f8d8125b0f6b123e/app/assets/javascripts/angular/resources/shared_graph_behavior.js#L22-L33

that array is what gets rendered on the page:
https://github.com/prometheus/promdash/blob/c6523a0a446bcfdf770a0d59f8d8125b0f6b123e/app/views/dashboards/show.html.erb#L218-L236

[juliusv]

Hey, I'd just caution against adding fields to the JSON which are not reflected in the GUI. So far the JSON has simply been an internal representation of the settings that you can edit via the GUI. But the JSON is more of an implementation detail. It'd also be great in general to have a UI for this, but that always requires careful thought to not clutter the UI completely for users who don't use that feature. Would love to see some UI sketches for this...

[grobie]

Will come with #378, but first we need to finish #180.