Add text variable input field to metrics dashboard
Problem to solve
After the completion of #214500 (closed), we will be able to use the URL query parameters in our PromQL queries. Although the charts will render the correct queries, a user will not be able to tell from looking at the dashboard on the browser.
Intended users
Further details
Proposal
In this issue, we will add an input text field for each variable like the one shown below in the red box.
| Text input | Focus state | Variable applied |
|---|---|---|
 |
 |
 |
- The text input won't refresh until the user presses enter. The text input won't auto refresh while in focused state.
- When a user changes the text field value and hits
enter, we should update the URL with the correct URL query params. - We should use the query param name as the label for the input text field and use the query param value to prefill the text field.
Syntax the dashboard.yml will have to support this feature
The following should be added to a dashboard in order for the dashboard to have template variables. The variables can be used in queries.
Note that the templating key will be a top-level dashboard property.
Simple syntax
This is a simple syntax that reduces the amount of configuration that needs to be added to the yaml, and should hopefully be enough for most use-cases.
templating:
variables:
variable1: 'default value' # `text` type variable with `default value` as its default.This will create a variable called variable1, whose value can be any string. The default value will be default value. The UI will have a free text box for this variable.
Advanced syntax
templating:
variables:
variable1: # The name that can be used in queries in the form `%{variable1}`.
label: 'Variable 1' # (Optional) label that will appear in the UI for this dropdown.
type: text
options:
default_value: 'default' # (Optional) default value.If the label key is not present, the name of the variable can be used as label. If the default_value key is not present, the default value of the variable can be blank.