1 files changed, 16 insertions, 17 deletions
diff --git a/app/assets/javascripts/monitoring/components/variables_section.vue b/app/assets/javascripts/monitoring/components/variables_section.vue
index 3d1d111d5b3..25d900b07ad 100644
--- a/app/assets/javascripts/monitoring/components/variables_section.vue
+++ b/app/assets/javascripts/monitoring/components/variables_section.vue
@@ -1,13 +1,14 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import CustomVariable from './variables/custom_variable.vue';
-import TextVariable from './variables/text_variable.vue';
+import DropdownField from './variables/dropdown_field.vue';
+import TextField from './variables/text_field.vue';
 import { setCustomVariablesFromUrl } from '../utils';
+import { VARIABLE_TYPES } from '../constants';
 
 export default {
   components: {
-    CustomVariable,
-    TextVariable,
+    DropdownField,
+    TextField,
   },
   computed: {
     ...mapState('monitoringDashboard', ['variables']),
@@ -15,10 +16,9 @@ export default {
   methods: {
     ...mapActions('monitoringDashboard', ['updateVariablesAndFetchData']),
     refreshDashboard(variable, value) {
-      if (this.variables[variable].value !== value) {
-        const changedVariable = { key: variable, value };
+      if (variable.value !== value) {
+        this.updateVariablesAndFetchData({ name: variable.name, value });
         // update the Vuex store
-        this.updateVariablesAndFetchData(changedVariable);
         // the below calls can ideally be moved out of the
         // component and into the actions and let the
         // mutation respond directly.
@@ -27,27 +27,26 @@ export default {
         setCustomVariablesFromUrl(this.variables);
       }
     },
-    variableComponent(type) {
-      const types = {
-        text: TextVariable,
-        custom: CustomVariable,
-      };
-      return types[type] || TextVariable;
+    variableField(type) {
+      if (type === VARIABLE_TYPES.custom || type === VARIABLE_TYPES.metric_label_values) {
+        return DropdownField;
+      }
+      return TextField;
     },
   },
 };
 </script>
 <template>
   <div ref="variablesSection" class="d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 variables-section">
-    <div v-for="(variable, key) in variables" :key="key" class="mb-1 pr-2 d-flex d-sm-block">
+    <div v-for="variable in variables" :key="variable.name" class="mb-1 pr-2 d-flex d-sm-block">
       <component
-        :is="variableComponent(variable.type)"
+        :is="variableField(variable.type)"
         class="mb-0 flex-grow-1"
         :label="variable.label"
         :value="variable.value"
-        :name="key"
+        :name="variable.name"
         :options="variable.options"
-        @onUpdate="refreshDashboard"
+        @input="refreshDashboard(variable, $event)"
       />
     </div>
   </div>