1 files changed, 28 insertions, 43 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 2e35ef8d4b0..b4ea415bb51 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -12,23 +12,19 @@ import {
   GlTooltipDirective,
 } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
+import createFlash from '~/flash';
 import Icon from '~/vue_shared/components/icon.vue';
-import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
+import { getParameterValues, mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
+import DateTimePicker from './date_time_picker/date_time_picker.vue';
 import MonitorTimeSeriesChart from './charts/time_series.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
-import { sidebarAnimationDuration, timeWindows } from '../constants';
+import { sidebarAnimationDuration } from '../constants';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
-
-import {
-  getTimeDiff,
-  getTimeWindow,
-  downloadCSVOptions,
-  generateLinkToChartOptions,
-} from '../utils';
+import { getTimeDiff, isValidDate, downloadCSVOptions, generateLinkToChartOptions } from '../utils';
 
 let sidebarMutationObserver;
 
@@ -46,6 +42,7 @@ export default {
     GlDropdownItem,
     GlFormGroup,
     GlModal,
+    DateTimePicker,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -171,10 +168,8 @@ export default {
     return {
       state: 'gettingStarted',
       elWidth: 0,
-      selectedTimeWindow: '',
-      selectedTimeWindowKey: '',
       formIsValid: null,
-      timeWindows: {},
+      selectedTimeWindow: {},
       isRearrangingPanels: false,
     };
   },
@@ -237,11 +232,13 @@ export default {
         end,
       };
 
-      this.timeWindows = timeWindows;
-      this.selectedTimeWindowKey = getTimeWindow(range);
-      this.selectedTimeWindow = this.timeWindows[this.selectedTimeWindowKey];
+      this.selectedTimeWindow = range;
 
-      this.fetchData(range);
+      if (!isValidDate(start) || !isValidDate(end)) {
+        this.showInvalidDateError();
+      } else {
+        this.fetchData(range);
+      }
 
       sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
       sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
@@ -298,6 +295,9 @@ export default {
       // See https://gitlab.com/gitlab-org/gitlab/issues/27835
       metrics.splice(graphIndex, 1);
     },
+    showInvalidDateError() {
+      createFlash(s__('Metrics|Link contains an invalid time window.'));
+    },
     generateLink(group, title, yLabel) {
       const dashboard = this.currentDashboard || this.firstDashboard.path;
       const params = _.pick({ dashboard, group, title, y_label: yLabel }, value => value != null);
@@ -320,16 +320,12 @@ export default {
     submitCustomMetricsForm() {
       this.$refs.customMetricsForm.submit();
     },
-    activeTimeWindow(key) {
-      return this.timeWindows[key] === this.selectedTimeWindow;
-    },
-    setTimeWindowParameter(key) {
-      const { start, end } = getTimeDiff(key);
-      return `?start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}`;
-    },
     groupHasData(group) {
       return this.chartsWithData(group.metrics).length > 0;
     },
+    onDateTimePickerApply(timeWindowUrlParams) {
+      return redirectTo(mergeUrlParams(timeWindowUrlParams, window.location.href));
+    },
     downloadCSVOptions,
     generateLinkToChartOptions,
   },
@@ -342,14 +338,14 @@ export default {
 
 <template>
   <div class="prometheus-graphs">
-    <div class="gl-p-3 pb-0 border-bottom bg-gray-light">
+    <div class="prometheus-graphs-header gl-p-3 pb-0 border-bottom bg-gray-light">
       <div class="row">
         <template v-if="environmentsEndpoint">
           <gl-form-group
             :label="__('Dashboard')"
             label-size="sm"
             label-for="monitor-dashboards-dropdown"
-            class="col-sm-12 col-md-4 col-lg-2"
+            class="col-sm-12 col-md-6 col-lg-2"
           >
             <gl-dropdown
               id="monitor-dashboards-dropdown"
@@ -372,7 +368,7 @@ export default {
             :label="s__('Metrics|Environment')"
             label-size="sm"
             label-for="monitor-environments-dropdown"
-            class="col-sm-6 col-md-4 col-lg-2"
+            class="col-sm-6 col-md-6 col-lg-2"
           >
             <gl-dropdown
               id="monitor-environments-dropdown"
@@ -397,30 +393,19 @@ export default {
             :label="s__('Metrics|Show last')"
             label-size="sm"
             label-for="monitor-time-window-dropdown"
-            class="col-sm-6 col-md-4 col-lg-2"
+            class="col-sm-6 col-md-6 col-lg-4"
           >
-            <gl-dropdown
-              id="monitor-time-window-dropdown"
-              class="mb-0 d-flex js-time-window-dropdown"
-              toggle-class="dropdown-menu-toggle"
-              :text="selectedTimeWindow"
-            >
-              <gl-dropdown-item
-                v-for="(value, key) in timeWindows"
-                :key="key"
-                :active="activeTimeWindow(key)"
-                :href="setTimeWindowParameter(key)"
-                active-class="active"
-                >{{ value }}</gl-dropdown-item
-              >
-            </gl-dropdown>
+            <date-time-picker
+              :selected-time-window="selectedTimeWindow"
+              @onApply="onDateTimePickerApply"
+            />
           </gl-form-group>
         </template>
 
         <gl-form-group
           v-if="addingMetricsAvailable || showRearrangePanelsBtn || externalDashboardUrl.length"
           label-for="prometheus-graphs-dropdown-buttons"
-          class="dropdown-buttons col-lg d-lg-flex align-items-end"
+          class="dropdown-buttons col-md d-md-flex col-lg d-lg-flex align-items-end"
         >
           <div id="prometheus-graphs-dropdown-buttons">
             <gl-button