diff --git a/app/assets/javascripts/logs/components/environment_logs.vue b/app/assets/javascripts/logs/components/environment_logs.vue
index b0acd69bae0923c7c276c62a1143ec45fc38527c..68ec2bc2f16c4deafe2448049414944b43af2729 100644
--- a/app/assets/javascripts/logs/components/environment_logs.vue
+++ b/app/assets/javascripts/logs/components/environment_logs.vue
@@ -13,7 +13,7 @@ import {
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import LogControlButtons from './log_control_buttons.vue';
 
-import { timeRanges, defaultTimeRange } from '~/monitoring/constants';
+import { timeRanges, defaultTimeRange } from '~/vue_shared/constants';
 import { timeRangeFromUrl } from '~/monitoring/utils';
 import { formatDate } from '../utils';
 
diff --git a/app/assets/javascripts/logs/stores/state.js b/app/assets/javascripts/logs/stores/state.js
index e058f15b6b464ceb58692bd141d99ab1e98c3506..2c8f47294cc8f936066f4601be442c102fc6c937 100644
--- a/app/assets/javascripts/logs/stores/state.js
+++ b/app/assets/javascripts/logs/stores/state.js
@@ -1,4 +1,4 @@
-import { timeRanges, defaultTimeRange } from '~/monitoring/constants';
+import { timeRanges, defaultTimeRange } from '~/vue_shared/constants';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
 
 export default () => ({
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index a0bd45bef5e135faaa2e7d18382acd0191df74d9..dbfb3e97c20309d5bdd8958eee770fa9831dde4d 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -31,7 +31,8 @@ import DashboardsDropdown from './dashboards_dropdown.vue';
 
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import { getAddMetricTrackingOptions, timeRangeToUrl, timeRangeFromUrl } from '../utils';
-import { defaultTimeRange, timeRanges, metricStates } from '../constants';
+import { metricStates } from '../constants';
+import { defaultTimeRange, timeRanges } from '~/vue_shared/constants';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue
index 826b73908a45870773aea28dc91350fd257a715f..6182b570e762ef9106e1a06cf1414ec8f32b1bab 100644
--- a/app/assets/javascripts/monitoring/components/embed.vue
+++ b/app/assets/javascripts/monitoring/components/embed.vue
@@ -3,7 +3,8 @@ import { mapActions, mapState, mapGetters } from 'vuex';
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
 import { timeRangeFromUrl, removeTimeRangeParams } from '../utils';
-import { sidebarAnimationDuration, defaultTimeRange } from '../constants';
+import { sidebarAnimationDuration } from '../constants';
+import { defaultTimeRange } from '~/vue_shared/constants';
 
 let sidebarMutationObserver;
 
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index ddf6c9878df0d292e5dc08814a6cd0783630416f..cc7f5af22594aea641e26531a2529198f8e7f44e 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -1,5 +1,3 @@
-import { __ } from '~/locale';
-
 export const PROMETHEUS_TIMEOUT = 120000; // TWO_MINUTES
 
 /**
@@ -89,37 +87,3 @@ export const dateFormats = {
   timeOfDay: 'h:MM TT',
   default: 'dd mmm yyyy, h:MMTT',
 };
-
-export const timeRanges = [
-  {
-    label: __('30 minutes'),
-    duration: { seconds: 60 * 30 },
-  },
-  {
-    label: __('3 hours'),
-    duration: { seconds: 60 * 60 * 3 },
-  },
-  {
-    label: __('8 hours'),
-    duration: { seconds: 60 * 60 * 8 },
-    default: true,
-  },
-  {
-    label: __('1 day'),
-    duration: { seconds: 60 * 60 * 24 * 1 },
-  },
-  {
-    label: __('3 days'),
-    duration: { seconds: 60 * 60 * 24 * 3 },
-  },
-  {
-    label: __('1 week'),
-    duration: { seconds: 60 * 60 * 24 * 7 * 1 },
-  },
-  {
-    label: __('1 month'),
-    duration: { seconds: 60 * 60 * 24 * 30 },
-  },
-];
-
-export const defaultTimeRange = timeRanges.find(tr => tr.default);
diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
index 9ac687f5e2c690cc6275438367f69be3604c6b98..7b09337eb153ba9f2b61b8cf6352dcf224f58b52 100644
--- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
@@ -43,6 +43,11 @@ export default {
       required: false,
       default: () => defaultTimeRanges,
     },
+    customEnabled: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -166,6 +171,7 @@ export default {
     >
       <div class="d-flex justify-content-between gl-p-2">
         <gl-form-group
+          v-if="customEnabled"
           :label="__('Custom range')"
           label-for="custom-from-time"
           label-class="gl-pb-1"
diff --git a/app/assets/javascripts/vue_shared/constants.js b/app/assets/javascripts/vue_shared/constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..63ce421271768dfc3788e6d14f1e65badbcca1f6
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/constants.js
@@ -0,0 +1,56 @@
+import { __ } from '~/locale';
+
+const INTERVALS = {
+  minute: 'minute',
+  hour: 'hour',
+  day: 'day',
+};
+
+export const timeRanges = [
+  {
+    label: __('30 minutes'),
+    duration: { seconds: 60 * 30 },
+    name: 'thirtyMinutes',
+    interval: INTERVALS.minute,
+  },
+  {
+    label: __('3 hours'),
+    duration: { seconds: 60 * 60 * 3 },
+    name: 'threeHours',
+    interval: INTERVALS.hour,
+  },
+  {
+    label: __('8 hours'),
+    duration: { seconds: 60 * 60 * 8 },
+    name: 'eightHours',
+    default: true,
+    interval: INTERVALS.hour,
+  },
+  {
+    label: __('1 day'),
+    duration: { seconds: 60 * 60 * 24 * 1 },
+    name: 'oneDay',
+    interval: INTERVALS.hour,
+  },
+  {
+    label: __('3 days'),
+    duration: { seconds: 60 * 60 * 24 * 3 },
+    name: 'threeDays',
+    interval: INTERVALS.hour,
+  },
+  {
+    label: __('1 week'),
+    duration: { seconds: 60 * 60 * 24 * 7 * 1 },
+    name: 'oneWeek',
+    interval: INTERVALS.day,
+  },
+  {
+    label: __('1 month'),
+    duration: { seconds: 60 * 60 * 24 * 30 },
+    name: 'oneMonth',
+    interval: INTERVALS.day,
+  },
+];
+
+export const defaultTimeRange = timeRanges.find(tr => tr.default);
+export const getTimeWindow = timeWindowName => timeRanges.find(tr => tr.name === timeWindowName);
diff --git a/ee/app/assets/javascripts/threat_monitoring/components/threat_monitoring_filters.vue b/ee/app/assets/javascripts/threat_monitoring/components/threat_monitoring_filters.vue
index 72dfb3b5ad4a92a6cb28126fa169a58ee1bc8680..096f0d7e921a2588bf6bd39223eb351f401358ae 100644
--- a/ee/app/assets/javascripts/threat_monitoring/components/threat_monitoring_filters.vue
+++ b/ee/app/assets/javascripts/threat_monitoring/components/threat_monitoring_filters.vue
@@ -1,7 +1,8 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { TIME_WINDOWS } from '../constants';
+import { timeRanges, defaultTimeRange } from '~/vue_shared/constants';
+import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 
 export default {
   name: 'ThreatMonitoringFilters',
@@ -9,6 +10,13 @@ export default {
     GlFormGroup,
     GlDropdown,
     GlDropdownItem,
+    DateTimePicker,
+  },
+  data() {
+    return {
+      selectedTimeRange: defaultTimeRange,
+      timeRanges,
+    };
   },
   computed: {
     ...mapState('threatMonitoring', [
@@ -17,7 +25,7 @@ export default {
       'isLoadingEnvironments',
       'isLoadingWafStatistics',
     ]),
-    ...mapGetters('threatMonitoring', ['currentEnvironmentName', 'currentTimeWindowName']),
+    ...mapGetters('threatMonitoring', ['currentEnvironmentName']),
     isDisabled() {
       return (
         this.isLoadingEnvironments || this.isLoadingWafStatistics || this.environments.length === 0
@@ -26,10 +34,12 @@ export default {
   },
   methods: {
     ...mapActions('threatMonitoring', ['setCurrentEnvironmentId', 'setCurrentTimeWindow']),
+    onDateTimePickerInput(timeRange) {
+      this.selectedTimeRange = timeRange;
+      this.setCurrentTimeWindow(timeRange);
+    },
   },
   environmentFilterId: 'threat-monitoring-environment-filter',
-  showLastFilterId: 'threat-monitoring-show-last-filter',
-  timeWindows: TIME_WINDOWS,
 };
 </script>
 
@@ -63,25 +73,17 @@ export default {
       <gl-form-group
         :label="s__('ThreatMonitoring|Show last')"
         label-size="sm"
-        :label-for="$options.showLastFilterId"
-        class="col-sm-6 col-md-4 col-lg-3 col-xl-2"
+        label-for="threat-monitoring-time-window-dropdown"
+        class="col-sm-6 col-md-6 col-lg-4"
       >
-        <gl-dropdown
-          :id="$options.showLastFilterId"
-          ref="showLastDropdown"
-          class="mb-0 d-flex"
-          toggle-class="d-flex justify-content-between"
-          :text="currentTimeWindowName"
+        <date-time-picker
+          ref="dateTimePicker"
+          :custom-enabled="false"
+          :value="selectedTimeRange"
+          :options="timeRanges"
           :disabled="isDisabled"
-        >
-          <gl-dropdown-item
-            v-for="(timeWindowConfig, timeWindow) in $options.timeWindows"
-            :key="timeWindow"
-            ref="showLastDropdownItem"
-            @click="setCurrentTimeWindow(timeWindow)"
-            >{{ timeWindowConfig.name }}</gl-dropdown-item
-          >
-        </gl-dropdown>
+          @input="onDateTimePickerInput"
+        />
       </gl-form-group>
     </div>
   </div>
diff --git a/ee/app/assets/javascripts/threat_monitoring/constants.js b/ee/app/assets/javascripts/threat_monitoring/constants.js
index a4a8b83c2fa5dc9063c99e4c025a641d1a28f245..4a71a445d5584c6d001cde0f5493ea63ba7e695f 100644
--- a/ee/app/assets/javascripts/threat_monitoring/constants.js
+++ b/ee/app/assets/javascripts/threat_monitoring/constants.js
@@ -1,39 +1,2 @@
-import { __ } from '~/locale';
-
+/* eslint-disable import/prefer-default-export */
 export const INVALID_CURRENT_ENVIRONMENT_NAME = '–';
-
-const INTERVALS = {
-  minute: 'minute',
-  hour: 'hour',
-  day: 'day',
-};
-
-export const TIME_WINDOWS = {
-  thirtyMinutes: {
-    name: __('30 minutes'),
-    durationInMilliseconds: 30 * 60 * 1000,
-    interval: INTERVALS.minute,
-  },
-  oneHour: {
-    name: __('1 hour'),
-    durationInMilliseconds: 60 * 60 * 1000,
-    interval: INTERVALS.minute,
-  },
-  twentyFourHours: {
-    name: __('24 hours'),
-    durationInMilliseconds: 24 * 60 * 60 * 1000,
-    interval: INTERVALS.hour,
-  },
-  sevenDays: {
-    name: __('7 days'),
-    durationInMilliseconds: 7 * 24 * 60 * 60 * 1000,
-    interval: INTERVALS.day,
-  },
-  thirtyDays: {
-    name: __('30 days'),
-    durationInMilliseconds: 30 * 24 * 60 * 60 * 1000,
-    interval: INTERVALS.day,
-  },
-};
-
-export const DEFAULT_TIME_WINDOW = 'thirtyDays';
diff --git a/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/actions.js b/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/actions.js
index 470960771ba65bcd7211376cb12acc7a01f7f12f..46c24cb82fd9c2aeab2594d3336e8700fe78bb3c 100644
--- a/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/actions.js
+++ b/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/actions.js
@@ -64,7 +64,7 @@ export const setCurrentEnvironmentId = ({ commit, dispatch }, environmentId) =>
 };
 
 export const setCurrentTimeWindow = ({ commit, dispatch }, timeWindow) => {
-  commit(types.SET_CURRENT_TIME_WINDOW, timeWindow);
+  commit(types.SET_CURRENT_TIME_WINDOW, timeWindow.name);
   dispatch(`threatMonitoringWaf/fetchStatistics`, null, { root: true });
 
   if (window.gon.features?.networkPolicyUi) {
diff --git a/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/getters.js b/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/getters.js
index 845e5b0593d67e9a57bdfefb9169f643e3228f1d..e22e25fcd5f00066ffa0f1c2004e9eeaf362133b 100644
--- a/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/getters.js
+++ b/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/getters.js
@@ -1,10 +1,7 @@
+/* eslint-disable import/prefer-default-export */
 import { INVALID_CURRENT_ENVIRONMENT_NAME } from '../../../constants';
-import { getTimeWindowConfig } from '../../utils';
 
 export const currentEnvironmentName = ({ currentEnvironmentId, environments }) => {
   const environment = environments.find(({ id }) => id === currentEnvironmentId);
   return environment ? environment.name : INVALID_CURRENT_ENVIRONMENT_NAME;
 };
-
-export const currentTimeWindowName = ({ currentTimeWindow }) =>
-  getTimeWindowConfig(currentTimeWindow).name;
diff --git a/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/state.js b/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/state.js
index c5b33253b8b5fc530e7448c1bd314e1132ba05ff..847a692b96cda6d0a4483c64d5a5573dc1a6b4d6 100644
--- a/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/state.js
+++ b/ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/state.js
@@ -1,4 +1,4 @@
-import { DEFAULT_TIME_WINDOW } from '../../../constants';
+import { defaultTimeRange } from '~/vue_shared/constants';
 
 export default () => ({
   environmentsEndpoint: '',
@@ -6,5 +6,5 @@ export default () => ({
   isLoadingEnvironments: false,
   errorLoadingEnvironments: false,
   currentEnvironmentId: -1,
-  currentTimeWindow: DEFAULT_TIME_WINDOW,
+  currentTimeWindow: defaultTimeRange.name,
 });
diff --git a/ee/app/assets/javascripts/threat_monitoring/store/utils.js b/ee/app/assets/javascripts/threat_monitoring/store/utils.js
index 49c65e319702ba015c771948d25e83057f6f45a5..9b6387460af2a6e4aabea5233e8e79c6f93b65bc 100644
--- a/ee/app/assets/javascripts/threat_monitoring/store/utils.js
+++ b/ee/app/assets/javascripts/threat_monitoring/store/utils.js
@@ -1,11 +1,17 @@
-import { TIME_WINDOWS, DEFAULT_TIME_WINDOW } from 'ee/threat_monitoring/constants';
+import { getTimeWindow, defaultTimeRange } from '~/vue_shared/constants';
+import { pick } from 'lodash';
 
-export const getTimeWindowConfig = timeWindow =>
-  TIME_WINDOWS[timeWindow] || TIME_WINDOWS[DEFAULT_TIME_WINDOW];
+export const getTimeWindowConfig = timeWindow => {
+  const timeWindowObj = pick(getTimeWindow(timeWindow) || defaultTimeRange, 'duration', 'interval');
+  return {
+    durationInMilliseconds: timeWindowObj.duration.seconds * 1000,
+    interval: timeWindowObj.interval,
+  };
+};
 
 /**
  * Get the from/to/interval query parameters for the given time window.
- * @param {string} timeWindow - The time window (keyof TIME_WINDOWS)
+ * @param {string} timeWindow - The time window name (from the array of objects timeRanges)
  * @param {number} to - Milliseconds past the epoch corresponding to the
  *     returned `to` parameter
  * @returns {Object} Query parameters `from` and `to` are ISO 8601 dates and
diff --git a/ee/changelogs/unreleased/extract_timerange_information_to_be_shared.yml b/ee/changelogs/unreleased/extract_timerange_information_to_be_shared.yml
new file mode 100644
index 0000000000000000000000000000000000000000..710d09f9e3c2406243f391d4401723f72bc5db62
--- /dev/null
+++ b/ee/changelogs/unreleased/extract_timerange_information_to_be_shared.yml
@@ -0,0 +1,5 @@
+---
+title: Extract time range information to be reused
+merge_request: 26431
+author:
+type: changed
diff --git a/ee/spec/frontend/threat_monitoring/components/threat_monitoring_filters_spec.js b/ee/spec/frontend/threat_monitoring/components/threat_monitoring_filters_spec.js
index 59376853e06f8b10916e7bb439648d468f165038..d4f45034f218adba7691f0a750f9f3b2fe9e4f05 100644
--- a/ee/spec/frontend/threat_monitoring/components/threat_monitoring_filters_spec.js
+++ b/ee/spec/frontend/threat_monitoring/components/threat_monitoring_filters_spec.js
@@ -1,8 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
 import createStore from 'ee/threat_monitoring/store';
 import ThreatMonitoringFilters from 'ee/threat_monitoring/components/threat_monitoring_filters.vue';
-import { INVALID_CURRENT_ENVIRONMENT_NAME, TIME_WINDOWS } from 'ee/threat_monitoring/constants';
+import { INVALID_CURRENT_ENVIRONMENT_NAME } from 'ee/threat_monitoring/constants';
 import { mockEnvironmentsResponse } from '../mock_data';
+import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
+import { timeRanges, defaultTimeRange } from '~/vue_shared/constants';
 
 const mockEnvironments = mockEnvironmentsResponse.environments;
 
@@ -23,8 +25,7 @@ describe('ThreatMonitoringFilters component', () => {
 
   const findEnvironmentsDropdown = () => wrapper.find({ ref: 'environmentsDropdown' });
   const findEnvironmentsDropdownItems = () => wrapper.findAll({ ref: 'environmentsDropdownItem' });
-  const findShowLastDropdown = () => wrapper.find({ ref: 'showLastDropdown' });
-  const findShowLastDropdownItems = () => wrapper.findAll({ ref: 'showLastDropdownItem' });
+  const findShowLastDropdown = () => wrapper.find(DateTimePicker);
 
   afterEach(() => {
     wrapper.destroy();
@@ -92,22 +93,15 @@ describe('ThreatMonitoringFilters component', () => {
     });
 
     it('has text set to the current time window name', () => {
-      const currentTimeWindowName = store.getters['threatMonitoring/currentTimeWindowName'];
-      expect(findShowLastDropdown().attributes().text).toBe(currentTimeWindowName);
+      expect(findShowLastDropdown().vm.value.label).toBe(defaultTimeRange.label);
     });
 
     it('has dropdown items for each time window', () => {
-      const dropdownItems = findShowLastDropdownItems();
-
-      Object.entries(TIME_WINDOWS).forEach(([timeWindow, config], i) => {
-        const dropdownItem = dropdownItems.at(i);
-        expect(dropdownItem.text()).toBe(config.name);
-
-        dropdownItem.vm.$emit('click');
-        expect(store.dispatch).toHaveBeenCalledWith(
-          'threatMonitoring/setCurrentTimeWindow',
-          timeWindow,
-        );
+      const dropdownOptions = findShowLastDropdown().props('options');
+      Object.entries(timeRanges).forEach(([index, timeWindow]) => {
+        const dropdownOption = dropdownOptions[index];
+        expect(dropdownOption.interval).toBe(timeWindow.interval);
+        expect(dropdownOption.duration.seconds).toBe(timeWindow.duration.seconds);
       });
     });
   });
diff --git a/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring/actions_spec.js b/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring/actions_spec.js
index af553e6e2b3ee97ff4067aee425a6a32189cf45c..65d4b04db8f9a0dd06ec9c45f267a4036aaa95bc 100644
--- a/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring/actions_spec.js
+++ b/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring/actions_spec.js
@@ -235,14 +235,14 @@ describe('Threat Monitoring actions', () => {
   });
 
   describe('setCurrentTimeWindow', () => {
-    const timeWindow = 'foo';
+    const timeWindow = { name: 'foo' };
 
     it('commits the SET_CURRENT_TIME_WINDOW mutation and dispatches WAF fetch action', () =>
       testAction(
         actions.setCurrentTimeWindow,
         timeWindow,
         state,
-        [{ type: types.SET_CURRENT_TIME_WINDOW, payload: timeWindow }],
+        [{ type: types.SET_CURRENT_TIME_WINDOW, payload: timeWindow.name }],
         [{ type: 'threatMonitoringWaf/fetchStatistics', payload: null }],
       ));
 
@@ -254,7 +254,7 @@ describe('Threat Monitoring actions', () => {
           actions.setCurrentTimeWindow,
           timeWindow,
           state,
-          [{ type: types.SET_CURRENT_TIME_WINDOW, payload: timeWindow }],
+          [{ type: types.SET_CURRENT_TIME_WINDOW, payload: timeWindow.name }],
           [
             { type: 'threatMonitoringWaf/fetchStatistics', payload: null },
             { type: 'threatMonitoringNetworkPolicy/fetchStatistics', payload: null },
diff --git a/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring/getters_spec.js b/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring/getters_spec.js
index fff3326cf7f5d6de44a6dca41d6f1cfbb325d188..adb88cc1d70d99a8a870fcac6a8c918a3059a188 100644
--- a/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring/getters_spec.js
+++ b/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring/getters_spec.js
@@ -1,6 +1,6 @@
 import createState from 'ee/threat_monitoring/store/modules/threat_monitoring/state';
 import * as getters from 'ee/threat_monitoring/store/modules/threat_monitoring/getters';
-import { INVALID_CURRENT_ENVIRONMENT_NAME, TIME_WINDOWS } from 'ee/threat_monitoring/constants';
+import { INVALID_CURRENT_ENVIRONMENT_NAME } from 'ee/threat_monitoring/constants';
 
 describe('threatMonitoring module getters', () => {
   let state;
@@ -26,18 +26,4 @@ describe('threatMonitoring module getters', () => {
       });
     });
   });
-
-  describe('currentTimeWindowName', () => {
-    it('gives the correct name for a valid time window', () => {
-      Object.keys(TIME_WINDOWS).forEach(timeWindow => {
-        state.currentTimeWindow = timeWindow;
-        expect(getters.currentTimeWindowName(state)).toBe(TIME_WINDOWS[timeWindow].name);
-      });
-    });
-
-    it('gives the default name for an invalid time window', () => {
-      state.currentTimeWindowName = 'foo';
-      expect(getters.currentTimeWindowName(state)).toBe('30 days');
-    });
-  });
 });
diff --git a/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring_statistics/actions_spec.js b/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring_statistics/actions_spec.js
index 491dea4a7dd45fbd326e654e0310f1528e00bb84..8277e07a6ffc251cf39248ea59a320a02b4abf99 100644
--- a/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring_statistics/actions_spec.js
+++ b/ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring_statistics/actions_spec.js
@@ -14,7 +14,7 @@ jest.mock('~/flash', () => jest.fn());
 
 const statisticsEndpoint = 'statisticsEndpoint';
 const timeRange = {
-  from: '2019-01-01T00:00:00.000Z',
+  from: '2019-01-30T16:00:00.000Z',
   to: '2019-01-31T00:00:00.000Z',
 };
 
@@ -101,7 +101,7 @@ describe('threatMonitoringStatistics actions', () => {
           .onGet(statisticsEndpoint, {
             params: {
               environment_id: currentEnvironmentId,
-              interval: 'day',
+              interval: 'hour',
               ...timeRange,
             },
           })
diff --git a/ee/spec/frontend/threat_monitoring/store/utils_spec.js b/ee/spec/frontend/threat_monitoring/store/utils_spec.js
index 67e6a9b14975f9f72f321161d6b47d8a8b16ee1a..353451e3766d95906e95eba19122cfc2685dea27 100644
--- a/ee/spec/frontend/threat_monitoring/store/utils_spec.js
+++ b/ee/spec/frontend/threat_monitoring/store/utils_spec.js
@@ -1,16 +1,22 @@
 import { getTimeWindowConfig, getTimeWindowParams } from 'ee/threat_monitoring/store/utils';
-import { DEFAULT_TIME_WINDOW, TIME_WINDOWS } from 'ee/threat_monitoring/constants';
+import { defaultTimeRange, timeRanges } from '~/vue_shared/constants';
 
 describe('threatMonitoring module utils', () => {
   describe('getTimeWindowConfig', () => {
     it('gives the correct config for a valid time window', () => {
-      Object.entries(TIME_WINDOWS).forEach(([timeWindow, expectedConfig]) => {
-        expect(getTimeWindowConfig(timeWindow)).toBe(expectedConfig);
+      Object.entries(timeRanges).forEach(([, timeWindow]) => {
+        const timeWindowConfig = getTimeWindowConfig(timeWindow.name);
+        expect(timeWindowConfig.interval).toBe(timeWindow.interval);
+        expect(timeWindowConfig.durationInMilliseconds).toBe(timeWindow.duration.seconds * 1000);
       });
     });
 
     it('gives the default name for an invalid time window', () => {
-      expect(getTimeWindowConfig('foo')).toBe(TIME_WINDOWS[DEFAULT_TIME_WINDOW]);
+      const timeWindowConfig = getTimeWindowConfig('foo');
+      expect(timeWindowConfig.interval).toBe(defaultTimeRange.interval);
+      expect(timeWindowConfig.durationInMilliseconds).toBe(
+        defaultTimeRange.duration.seconds * 1000,
+      );
     });
   });
 
@@ -18,17 +24,19 @@ describe('threatMonitoring module utils', () => {
     const mockTimestamp = new Date(2020, 0, 1, 10).getTime();
 
     it.each`
-      timeWindow           | expectedFrom                  | interval
-      ${'thirtyMinutes'}   | ${'2020-01-01T09:30:00.000Z'} | ${'minute'}
-      ${'oneHour'}         | ${'2020-01-01T09:00:00.000Z'} | ${'minute'}
-      ${'twentyFourHours'} | ${'2019-12-31T10:00:00.000Z'} | ${'hour'}
-      ${'sevenDays'}       | ${'2019-12-25T10:00:00.000Z'} | ${'day'}
-      ${'thirtyDays'}      | ${'2019-12-02T10:00:00.000Z'} | ${'day'}
-      ${'foo'}             | ${'2019-12-02T10:00:00.000Z'} | ${'day'}
+      timeWindowName     | expectedFrom                  | interval
+      ${'thirtyMinutes'} | ${'2020-01-01T09:30:00.000Z'} | ${'minute'}
+      ${'threeHours'}    | ${'2020-01-01T07:00:00.000Z'} | ${'hour'}
+      ${'eightHours'}    | ${'2020-01-01T02:00:00.000Z'} | ${'hour'}
+      ${'oneDay'}        | ${'2019-12-31T10:00:00.000Z'} | ${'hour'}
+      ${'threeDays'}     | ${'2019-12-29T10:00:00.000Z'} | ${'hour'}
+      ${'oneWeek'}       | ${'2019-12-25T10:00:00.000Z'} | ${'day'}
+      ${'oneMonth'}      | ${'2019-12-02T10:00:00.000Z'} | ${'day'}
+      ${'foo'}           | ${'2020-01-01T02:00:00.000Z'} | ${'hour'}
     `(
-      'returns the expected params given "$timeWindow"',
-      ({ timeWindow, expectedFrom, interval }) => {
-        expect(getTimeWindowParams(timeWindow, mockTimestamp)).toEqual({
+      'returns the expected params given "$timeWindowName"',
+      ({ timeWindowName, expectedFrom, interval }) => {
+        expect(getTimeWindowParams(timeWindowName, mockTimestamp)).toEqual({
           from: expectedFrom,
           to: '2020-01-01T10:00:00.000Z',
           interval,
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index c7ca9634e0ef48392639fcc99a4037efdc7fcd8d..56bb1b2e068dc11eb806071cbd1d73a939882106 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -708,9 +708,6 @@ msgstr ""
 msgid "20-29 contributions"
 msgstr ""
 
-msgid "24 hours"
-msgstr ""
-
 msgid "2FA"
 msgstr ""
 
@@ -723,9 +720,6 @@ msgstr ""
 msgid "3 hours"
 msgstr ""
 
-msgid "30 days"
-msgstr ""
-
 msgid "30 minutes"
 msgstr ""
 
@@ -747,9 +741,6 @@ msgstr ""
 msgid "404|Please contact your GitLab administrator if you think this is a mistake."
 msgstr ""
 
-msgid "7 days"
-msgstr ""
-
 msgid "8 hours"
 msgstr ""
 
diff --git a/spec/frontend/logs/stores/actions_spec.js b/spec/frontend/logs/stores/actions_spec.js
index 1512797e1bc816d6d9feaf272201d8cffdc83806..cad2501c67cbc0da1c6b021d00a4b27bb970a104 100644
--- a/spec/frontend/logs/stores/actions_spec.js
+++ b/spec/frontend/logs/stores/actions_spec.js
@@ -13,7 +13,7 @@ import {
   fetchMoreLogsPrepend,
 } from '~/logs/stores/actions';
 
-import { defaultTimeRange } from '~/monitoring/constants';
+import { defaultTimeRange } from '~/vue_shared/constants';
 
 import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
diff --git a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
index 77f7f2e0609256d8797806aba8d17db7be17691e..e37043e5d4d437b287bb1d5a133d7bb488e57ccf 100644
--- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
@@ -78,6 +78,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         label-size="sm"
       >
         <date-time-picker-stub
+          customenabled="true"
           options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
           value="[object Object]"
         />
diff --git a/spec/frontend/monitoring/components/dashboard_url_time_spec.js b/spec/frontend/monitoring/components/dashboard_url_time_spec.js
index 161c64dd74bfff2124bc0eb4e602961702e611b0..bf5a11a536e23d3d8ed783592d90e85d53ef21b0 100644
--- a/spec/frontend/monitoring/components/dashboard_url_time_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_url_time_spec.js
@@ -7,7 +7,7 @@ import { mockProjectDir } from '../mock_data';
 
 import Dashboard from '~/monitoring/components/dashboard.vue';
 import { createStore } from '~/monitoring/stores';
-import { defaultTimeRange } from '~/monitoring/constants';
+import { defaultTimeRange } from '~/vue_shared/constants';
 import { propsData } from '../init_utils';
 
 jest.mock('~/flash');