Design issue: Add dropdown for variables in the dashboard

Problem

Variables allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application and pod name we can use variables in their place. Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.

This is a design issue to surface the variables in the dashboard UI.

Further Details

From the discussion in the &2538 epic, the first iteration of the feature will include:

  • Support variables which get replaced by a single value
  • Allow to define, edit and delete variables in a yaml file
  • Surface the variable dropdowns in the dashboard controls
  • The dropdown is single select (we only support single value variables as a start)
  • One of the variable types will be text, so we should allow the user to type in any text as variable value. We should consider how the dashboard should refresh when using this open text field.
  • We refresh the dashboard every time a new value is selected
  • We update the dashboard URL with the selected value
  • We will keep the "Environment" dropdown hardcoded in the dashboard controls bar for now

Design Proposal

  • Surface the variable dropdowns in a section under the main dashboard controls. In case the user has more variables than can fit in one row, the inputs will wrap to the second row.

  • The text input won't refresh until the user either presses enter or clicks out of the input. The text input won't refresh while in focused state.

  • There will be an "All" or "none" options for variables when it makes sense, and we'll default to "All" when the user doesn't have any specific selection. These "All" or "None" options should be treated as special options in the dropdown component, and the appropriate styling should be applied.

  • When there are no variables for the dashboard (like, the user haven't added any variables), we won't show any dropdowns.

Single select dropdown Text input focused state Text variable applied
Dashboard_variables_dropdown Dashboard_variables_text_input_focus Dashboard_variables_text_input_applied
Edited by 🤖 GitLab Bot 🤖