### Problem to solve <!-- What problem do we solve? --> We need to be able to define variables in our [dashboards](https://docs.gitlab.com/ee/user/project/integrations/prometheus.html#defining-custom-dashboards-per-project). This feature is similar to [variables](https://grafana.com/docs/grafana/latest/reference/templating/) in Grafana. A user would then be able to choose/specify values for the variables in a dashboard on the UI. This will make dashboards more versatile and useful. For example, this would allow a dashboard to display metrics from whichever environment a user wants. Without this feature, we would need to define separate dashboards per environment. The dashboards would have the exact same queries, but with a different `environment` label. It would also make it easier to replicate Grafana dashboards within Gitlab. ### Intended users <!-- Who will use this feature? If known, include any of the following: types of users (e.g. Developer), personas, or specific company roles (e.g. Release Manager). It's okay to write "Unknown" and fill this field in later. * [Rachel (Release Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#rachel-release-manager) * [Parker (Product Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#parker-product-manager) * [Delaney (Development Team Lead)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#delaney-development-team-lead) * [Sasha (Software Developer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sasha-software-developer) * [Presley (Product Designer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#presley-product-designer) * [Devon (DevOps Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#devon-devops-engineer) * [Sidney (Systems Administrator)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sidney-systems-administrator) * [Sam (Security Analyst)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sam-security-analyst) * [Dana (Data Analyst)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#dana-data-analyst) Personas are described at https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/ --> * [Sidney (Systems Administrator)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sidney-systems-administrator) * [Devon (DevOps Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#devon-devops-engineer) * [Sasha (Software Developer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sasha-software-developer) ### Further details <!-- Include use cases, benefits, and/or goals (contributes to our vision?) --> The Prometheus proxy API currently supports variables with single-values. We need to: 1. Select a format for defining variables in dashboard yaml files. 1. On the frontend, we will need to display dropdowns/textboxes for each variable, which will allow the user to choose/specify a value for each variable. 1. When a variable value is changed, the charts need to reload. Grafana's use-case for having variables inside a promQL query is to change label values from the queries without having to write multiple dashboards for queries that don't change its structure but they do change the label values. To change the values Grafana has a handy dropdown section  These dropdown boxes are generated depending on the number of variables set in the JSON schema, as for how the dropdown boxes are populated it seems to be directly from the data store, in this case Prometheus, that provides the values for each of the labels that conform the query. To add to this feature, we need to refresh the dashboard every time a value is changed from any of the dropdown boxes. Finally depending on the number of arguments, the number of dropdown boxes might overflow so we need to account for that. ### Iteration Breakdown - MVC1 enables the URL param variable that can be used in the PromQL Query - MVC2 loads the variables in the dashboard.yml into the Metrics Dashboard - MVC3 enables variables to be pulled from a predefined PromQL Query from dashboard.yml