1 files changed, 39 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/variables/text_field.vue b/app/assets/javascripts/monitoring/components/variables/text_field.vue
new file mode 100644
index 00000000000..a0418806e5f
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/variables/text_field.vue
@@ -0,0 +1,39 @@
+<script>
+import { GlFormGroup, GlFormInput } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlFormInput,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    onUpdate(event) {
+      this.$emit('input', event.target.value);
+    },
+  },
+};
+</script>
+<template>
+  <gl-form-group :label="label">
+    <gl-form-input
+      :value="value"
+      :name="name"
+      @keyup.native.enter="onUpdate"
+      @blur.native="onUpdate"
+    />
+  </gl-form-group>
+</template>