Add dropdown input based on dashboard file

Background

The monitoring dashboard supports user-defined templating variables that can be defined in the dashboard yml file. 4 types of variables that can be defined are below. This MR adds the functionality to read the variables from the yml file and render appropriate input elements on the monitoring dashboard. Interacting with these inputs should update the URL so that it can be bookmarked. Also, values can be passed through the URL that will automatically set the values for these inputs.

Click this to view the variable types.

#### Simple Text Variable (text element)

templating:
  variables:
    variable1: 'default value'     # `text` type variable with `default value` as its default.



Advanced Text Variable (text element)

templating:
  variables:
    variable3:
      label: 'Variable 3'              # The label that will appear in the UI for this dropdown.
      type: text                       # The UI will have a free text box for this type, where the user can enter any value.
      options:
        default_value: 'default'       # The default value for this variable.



Simple Custom Variable (dropdown element)

templating:
  variables:
    variable1: ['value1', 'value2', 'value3']



Advanced Custom Variable (dropdown element)

templating:
  variables:
    variable1:                         # The name that can be used in queries in the form `%{variable1}`.
      label: 'Variable 1'              # The label that will appear in the UI for this dropdown.
      type: custom                     # We can add more types as we implement them.
      options:
        values:
        - value: 'value1'                # The value that will replace `${variable1}` in queries.
          text: 'Var 1 Option 1'         # The text that will appear in the UI dropdown.
        - value: 'value2'
          text: 'Var 1 Option 2'
          default: true  

What does this MR do?

1. Read the templating variables defined in dashboard yml file.
2. Use the existing text/custom parsers to extract the templating variables into the store
3. Read the URL param values and merge them into the templating variables in the store.
4. Clean up Variables section component - the component that renders text input.
5. Add a dropdown input alongside text input to display in the monitoring dashboard.

Demo Link

https://gitlab-review-dbodicherl-zo5csk.gitlab-review.app/gitlab-qa-sandbox-group/qa-test-2020-05-14-21-37-22-a84fc80e4e6e34b0/autodevops-project-b0935d026f8f75a8/-/environments/1/metrics?dashboard=.gitlab%2Fdashboards%2Fdashboard_with_variables.yml

Screenshots

templating_variables_demo

Does this MR meet the acceptance criteria?

Conformity

• Changelog entry
• Documentation (if required)
• Code review guidelines
• Merge request performance guidelines
• Style guides
• Database guides
• Separation of EE specific content

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers
• Informed Infrastructure department of a default or new setting change, if applicable per definition of done

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team

Mentions #214533 (closed)