1 files changed, 77 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue
new file mode 100644
index 00000000000..0388a6190d9
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue
@@ -0,0 +1,77 @@
+<script>
+import _ from 'underscore';
+import { s__, sprintf } from '~/locale';
+import { GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { dateFormats } from '~/monitoring/constants';
+
+const inputGroupText = {
+  invalidFeedback: sprintf(s__('Format: %{dateFormat}'), {
+    dateFormat: dateFormats.dateTimePicker.format,
+  }),
+  placeholder: dateFormats.dateTimePicker.format,
+};
+
+export default {
+  components: {
+    GlFormGroup,
+    GlFormInput,
+  },
+  props: {
+    state: {
+      default: null,
+      required: true,
+      validator: prop => typeof prop === 'boolean' || prop === null,
+    },
+    value: {
+      default: null,
+      required: false,
+      validator: prop => typeof prop === 'string' || prop === null,
+    },
+    label: {
+      type: String,
+      default: '',
+      required: true,
+    },
+    id: {
+      type: String,
+      required: false,
+      default: () => _.uniqueId('dateTimePicker_'),
+    },
+  },
+  data() {
+    return {
+      inputGroupText,
+    };
+  },
+  computed: {
+    invalidFeedback() {
+      return this.state ? '' : this.inputGroupText.invalidFeedback;
+    },
+    inputState() {
+      // When the state is valid we want to show no
+      // green outline. Hence passing null and not true.
+      if (this.state === true) {
+        return null;
+      }
+      return this.state;
+    },
+  },
+  methods: {
+    onInputBlur(e) {
+      this.$emit('input', e.target.value.trim() || null);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-form-group :label="label" label-size="sm" :label-for="id" :invalid-feedback="invalidFeedback">
+    <gl-form-input
+      :id="id"
+      :value="value"
+      :state="inputState"
+      :placeholder="inputGroupText.placeholder"
+      @blur="onInputBlur"
+    />
+  </gl-form-group>
+</template>