Move date time picker compoent to vue_shared

Date Time Picker compoent and related lib/helpers move to vue_shared
so it can be used by other stages and components.

Update specs references.

Migrate monitoring specific scss, rewrite scss as util classes and add
new scss file.

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -15,12 +15,13 @@ import {
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
-import Icon from '~/vue_shared/components/icon.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { getParameterValues, mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
+import Icon from '~/vue_shared/components/icon.vue';
+import { getTimeRange } from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
+import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 
-import DateTimePicker from './date_time_picker/date_time_picker.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
 import GroupEmptyState from './group_empty_state.vue';
@@ -28,11 +29,10 @@ import DashboardsDropdown from './dashboards_dropdown.vue';
 
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import { getAddMetricTrackingOptions } from '../utils';
-import { getTimeRange } from './date_time_picker/date_time_picker_lib';
 
 import { datePickerTimeWindows, metricStates } from '../constants';
 
-const defaultTimeDiff = getTimeRange();
+const defaultTimeRange = getTimeRange();
 
 export default {
   components: {
@@ -190,8 +190,8 @@ export default {
     return {
       state: 'gettingStarted',
       formIsValid: null,
-      startDate: getParameterValues('start')[0] || defaultTimeDiff.start,
-      endDate: getParameterValues('end')[0] || defaultTimeDiff.end,
+      startDate: getParameterValues('start')[0] || defaultTimeRange.start,
+      endDate: getParameterValues('end')[0] || defaultTimeRange.end,
       hasValidDates: true,
       datePickerTimeWindows,
       isRearrangingPanels: false,
@@ -288,8 +288,8 @@ export default {
           'Metrics|Link contains an invalid time window, please verify the link to see the requested time range.',
         ),
       );
-      this.startDate = defaultTimeDiff.start;
-      this.endDate = defaultTimeDiff.end;
+      this.startDate = defaultTimeRange.start;
+      this.endDate = defaultTimeRange.end;
     },
 
     generateLink(group, title, yLabel) {
@@ -427,6 +427,7 @@ export default {
             class="col-sm-6 col-md-6 col-lg-4"
           >
             <date-time-picker
+              ref="dateTimePicker"
               :start="startDate"
               :end="endDate"
               :time-windows="datePickerTimeWindows"

app/assets/javascripts/monitoring/components/embed.vue

@@ -3,7 +3,7 @@ import { mapActions, mapState, mapGetters } from 'vuex';
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { getParameterValues, removeParams } from '~/lib/utils/url_utility';
 import { sidebarAnimationDuration } from '../constants';
-import { getTimeRange } from './date_time_picker/date_time_picker_lib';
+import { getTimeRange } from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
 
 let sidebarMutationObserver;
 

app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker.vue → app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue

@@ -122,30 +122,28 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown
-    ref="dropdown"
-    :text="timeWindowText"
-    menu-class="time-window-dropdown-menu"
-    class="js-time-window-dropdown"
-  >
-    <div class="d-flex justify-content-between time-window-dropdown-menu-container">
+  <gl-dropdown :text="timeWindowText" class="date-time-picker" menu-class="date-time-picker-menu">
+    <div class="d-flex justify-content-between gl-p-2">
       <gl-form-group
         :label="__('Custom range')"
         label-for="custom-from-time"
-        class="custom-time-range-form-group col-md-7 p-0 m-0"
+        label-class="gl-pb-1"
+        class="custom-time-range-form-group col-md-7 gl-pl-1 gl-pr-0 m-0"
       >
-        <date-time-picker-input
-          id="custom-time-from"
-          v-model="startInput"
-          :label="__('From')"
-          :state="startInputValid"
-        />
-        <date-time-picker-input
-          id="custom-time-to"
-          v-model="endInput"
-          :label="__('To')"
-          :state="endInputValid"
-        />
+        <div class="gl-pt-2">
+          <date-time-picker-input
+            id="custom-time-from"
+            v-model="startInput"
+            :label="__('From')"
+            :state="startInputValid"
+          />
+          <date-time-picker-input
+            id="custom-time-to"
+            v-model="endInput"
+            :label="__('To')"
+            :state="endInputValid"
+          />
+        </div>
         <gl-form-group>
           <gl-button @click="closeDropdown">{{ __('Cancel') }}</gl-button>
           <gl-button variant="success" :disabled="!isValid" @click="apply()">
@@ -153,12 +151,10 @@ export default {
           </gl-button>
         </gl-form-group>
       </gl-form-group>
-      <gl-form-group
-        :label="__('Quick range')"
-        label-for="group-id-dropdown"
-        label-align="center"
-        class="col-md-4 p-0 m-0"
-      >
+      <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-pl-1 gl-pr-1 m-0">
+        <template #label>
+          <span class="gl-pl-5">{{ __('Quick range') }}</span>
+        </template>
         <gl-dropdown-item
           v-for="(timeWindow, key) in timeWindows"
           :key="key"

app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_lib.js → app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_lib.js

@@ -8,6 +8,15 @@ import { secondsToMilliseconds } from '~/lib/utils/datetime_utility';
  */
 const dateTimePickerRegex = /^(\d{4})-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])(?: (0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]))?$/;
 
+/**
+ * A key-value pair of "time windows".
+ *
+ * A time window is a representation of period of time that starts
+ * some time in past until now. Keys are only used for easy reference.
+ *
+ * It is represented as user friendly `label` and number of `seconds`
+ * to be substracted from now.
+ */
 export const defaultTimeWindows = {
   thirtyMinutes: {
     label: __('30 minutes'),
@@ -58,6 +67,17 @@ export const isValidDate = dateString => {
   }
 };
 
+/**
+ * For a given time window key (e.g. `threeHours`) and key-value pair
+ * object of time windows.
+ *
+ * Returns a date time range with start and end.
+ *
+ * @param {String} timeWindowKey - A key in the object of time windows.
+ * @param {Object} timeWindows - A key-value pair of time windows,
+ * with a second duration and a label.
+ * @returns An object with time range, start and end dates, in ISO format.
+ */
 export const getTimeRange = (timeWindowKey, timeWindows = defaultTimeWindows) => {
   let difference;
   if (timeWindows[timeWindowKey]) {

app/assets/stylesheets/components/date_time_picker.scss

+.date-time-picker {
+  .date-time-picker-menu {
+    width: 400px;
+  }
+}

app/assets/stylesheets/pages/prometheus.scss

@@ -46,32 +46,6 @@
   }
 }
 
-.prometheus-graphs-header {
-  .time-window-dropdown-menu {
-    padding: $gl-padding $gl-padding 0 $gl-padding-12;
-  }
-
-  .time-window-dropdown-menu-container {
-    width: 360px;
-  }
-
-  .custom-time-range-form-group > label {
-    padding-bottom: $gl-padding;
-  }
-
-  .monitor-environment-dropdown-menu {
-    &.show {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .no-matches-message {
-      padding: $gl-padding-8 $gl-padding-12;
-    }
-  }
-}
-
 .prometheus-panel {
   margin-top: 20px;
 }

spec/frontend/monitoring/components/dashboard_spec.js

@@ -7,8 +7,8 @@ import statusCodes from '~/lib/utils/http_status';
 import { metricStates } from '~/monitoring/constants';
 import Dashboard from '~/monitoring/components/dashboard.vue';
 
+import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
-import DateTimePicker from '~/monitoring/components/date_time_picker/date_time_picker.vue';
 import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';

spec/frontend/monitoring/components/dashboard_time_window_spec.js

@@ -53,7 +53,7 @@ describe('dashboard time window', () => {
       .$nextTick()
       .then(() => {
         const timeWindowDropdownItems = wrapper
-          .find('.js-time-window-dropdown')
+          .find({ ref: 'dateTimePicker' })
           .findAll(GlDropdownItem);
 
         const activeItem = timeWindowDropdownItems.wrappers.filter(itemWrapper =>

spec/frontend/monitoring/components/date_time_picker/date_time_picker_input_spec.js → spec/frontend/vue_shared/components/date_time_picker/date_time_picker_input_spec.js

 import { mount } from '@vue/test-utils';
-import DateTimePickerInput from '~/monitoring/components/date_time_picker/date_time_picker_input.vue';
+import DateTimePickerInput from '~/vue_shared/components/date_time_picker/date_time_picker_input.vue';
 
 const inputLabel = 'This is a label';
 const inputValue = 'something';

spec/frontend/monitoring/components/date_time_picker/date_time_picker_lib_spec.js → spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js

-import * as dateTimePickerLib from '~/monitoring/components/date_time_picker/date_time_picker_lib';
+import * as dateTimePickerLib from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
 
 describe('date time picker lib', () => {
   describe('isValidDate', () => {

spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js → spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js

 import { mount } from '@vue/test-utils';
-import DateTimePicker from '~/monitoring/components/date_time_picker/date_time_picker.vue';
-import { defaultTimeWindows } from '~/monitoring/components/date_time_picker/date_time_picker_lib';
+import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
+import { defaultTimeWindows } from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
 
 const timeWindowsCount = Object.entries(defaultTimeWindows).length;
 const start = '2019-10-10T07:00:00.000Z';