From 34306fc85d88d7580566a9ffea8e169cb5dcd714 Mon Sep 17 00:00:00 2001
From: Justin Kambic <justin.kambic@elastic.co>
Date: Tue, 24 Sep 2019 14:30:29 -0400
Subject: [PATCH] [Uptime] [Blocker] Move absolute date parsing to URL params
 hook (#46066) (#46093)

* Move absolute date parsing to URL params hook.

* Clean up naming.

* Update code to avoid putting dynamically-computed values in URL.

* Add test for new helper function.
---
 .../common/constants/client_defaults.ts       |  3 ++
 .../monitor_charts.test.tsx.snap              |  4 +--
 .../__tests__/monitor_charts.test.tsx         | 13 ++++++++
 .../functional/charts/checks_chart.tsx        | 11 +++----
 .../functional/charts/duration_chart.tsx      | 16 ++++------
 .../functional/charts/snapshot_histogram.tsx  | 12 ++++----
 .../components/functional/monitor_charts.tsx  | 14 ++++-----
 .../use_url_params.test.tsx.snap              |  2 +-
 .../hooks/__tests__/use_url_params.test.tsx   |  5 ++++
 .../public/lib/helper/stringify_url_params.ts |  2 +-
 .../get_supported_url_params.test.ts.snap     | 14 +++++++--
 .../get_supported_url_params.test.ts          | 19 ++++++++++--
 .../__tests__/parse_absolute_date.test.ts     | 30 +++++++++++++++++++
 .../url_params/get_supported_url_params.ts    | 13 ++++++++
 .../helper/url_params/parse_absolute_date.ts  | 15 ++++++++++
 .../plugins/uptime/public/pages/monitor.tsx   |  2 +-
 .../plugins/uptime/public/pages/overview.tsx  | 28 +++++------------
 17 files changed, 143 insertions(+), 60 deletions(-)
 create mode 100644 x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/parse_absolute_date.test.ts
 create mode 100644 x-pack/legacy/plugins/uptime/public/lib/helper/url_params/parse_absolute_date.ts

diff --git a/x-pack/legacy/plugins/uptime/common/constants/client_defaults.ts b/x-pack/legacy/plugins/uptime/common/constants/client_defaults.ts
index 30ca486b278e2..21e866e991944 100644
--- a/x-pack/legacy/plugins/uptime/common/constants/client_defaults.ts
+++ b/x-pack/legacy/plugins/uptime/common/constants/client_defaults.ts
@@ -5,6 +5,9 @@
  */
 
 export const CLIENT_DEFAULTS = {
+  ABSOLUTE_DATE_RANGE_START: 0,
+  // 15 minutes
+  ABSOLUTE_DATE_RANGE_END: 1000 * 60 * 15,
   // 60 seconds
   AUTOREFRESH_INTERVAL: 60 * 1000,
   // polling defaults to "on"
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap
index 6f17de1e26c21..1272e939e4b43 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap
@@ -65,8 +65,8 @@ exports[`MonitorCharts component renders the component without errors 1`] = `
     </EuiFlexItem>
     <EuiFlexItem>
       <withApollo(Component)
-        absoluteEndDate={1322903730000}
-        absoluteStartDate={1322903730000}
+        absoluteEndDate={20}
+        absoluteStartDate={20}
         dangerColor="#bd271e"
         height="400px"
         successColor="#017d73"
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx
index e7880fa10f1c3..7beb3b545b45b 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx
@@ -5,11 +5,24 @@
  */
 
 import React from 'react';
+import DateMath from '@elastic/datemath';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { MonitorChartsComponent } from '../monitor_charts';
 import { MonitorChart } from '../../../../common/graphql/types';
 
 describe('MonitorCharts component', () => {
+  let dateMathSpy: any;
+  const MOCK_DATE_VALUE = 20;
+
+  beforeEach(() => {
+    dateMathSpy = jest.spyOn(DateMath, 'parse');
+    dateMathSpy.mockReturnValue(MOCK_DATE_VALUE);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   const chartResponse: { monitorChartsData: MonitorChart } = {
     monitorChartsData: {
       locationDurationLines: [
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/checks_chart.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/checks_chart.tsx
index d1f29d3309497..c7ac0a59e4434 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/checks_chart.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/checks_chart.tsx
@@ -16,13 +16,13 @@ import {
   timeFormatter,
 } from '@elastic/charts';
 import { EuiPanel, EuiTitle } from '@elastic/eui';
-import React, { useContext } from 'react';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { StatusData } from '../../../../common/graphql/types';
 import { getChartDateLabel } from '../../../lib/helper';
-import { UptimeSettingsContext } from '../../../contexts';
 import { getColorsMap } from './get_colors_map';
+import { useUrlParams } from '../../../hooks';
 
 interface ChecksChartProps {
   /**
@@ -47,7 +47,8 @@ interface ChecksChartProps {
 export const ChecksChart = ({ dangerColor, status, successColor }: ChecksChartProps) => {
   const upSeriesSpecId = getSpecId('Up');
   const downSeriesSpecId = getSpecId('Down');
-  const { absoluteStartDate, absoluteEndDate } = useContext(UptimeSettingsContext);
+  const [getUrlParams] = useUrlParams();
+  const { absoluteDateRangeStart: min, absoluteDateRangeEnd: max } = getUrlParams();
 
   const upString = i18n.translate('xpack.uptime.monitorCharts.checkStatus.series.upCountLabel', {
     defaultMessage: 'Up count',
@@ -71,12 +72,12 @@ export const ChecksChart = ({ dangerColor, status, successColor }: ChecksChartPr
       </EuiTitle>
       <EuiPanel>
         <Chart>
-          <Settings xDomain={{ min: absoluteStartDate, max: absoluteEndDate }} showLegend={false} />
+          <Settings xDomain={{ min, max }} showLegend={false} />
           <Axis
             id={getAxisId('checksBottom')}
             position={Position.Bottom}
             showOverlappingTicks={true}
-            tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
+            tickFormat={timeFormatter(getChartDateLabel(min, max))}
             title={i18n.translate('xpack.uptime.monitorChart.checksChart.bottomAxis.title', {
               defaultMessage: 'Timestamp',
               description: 'The heading of the x-axis of a chart of timeseries data.',
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx
index db0b0645d3a96..d53e0fcc0e036 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx
@@ -17,7 +17,7 @@ import {
   Settings,
 } from '@elastic/charts';
 import { EuiPanel, EuiTitle } from '@elastic/eui';
-import React, { useContext } from 'react';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -25,9 +25,9 @@ import {
   getChartDateLabel,
 } from '../../../lib/helper';
 import { LocationDurationLine } from '../../../../common/graphql/types';
-import { UptimeSettingsContext } from '../../../contexts';
 import { getColorsMap } from './get_colors_map';
 import { ChartWrapper } from './chart_wrapper';
+import { useUrlParams } from '../../../hooks';
 
 interface DurationChartProps {
   /**
@@ -59,10 +59,10 @@ interface DurationChartProps {
 export const DurationChart = ({
   locationDurationLines,
   meanColor,
-  rangeColor,
   loading,
 }: DurationChartProps) => {
-  const { absoluteStartDate, absoluteEndDate } = useContext(UptimeSettingsContext);
+  const [getUrlParams] = useUrlParams();
+  const { absoluteDateRangeStart: min, absoluteDateRangeEnd: max } = getUrlParams();
   // this id is used for the line chart representing the average duration length
   const averageSpecId = getSpecId('average-');
 
@@ -99,16 +99,12 @@ export const DurationChart = ({
         </EuiTitle>
         <ChartWrapper height="400px" loading={loading}>
           <Chart>
-            <Settings
-              xDomain={{ min: absoluteStartDate, max: absoluteEndDate }}
-              showLegend={true}
-              legendPosition={Position.Bottom}
-            />
+            <Settings xDomain={{ min, max }} showLegend={true} legendPosition={Position.Bottom} />
             <Axis
               id={getAxisId('bottom')}
               position={Position.Bottom}
               showOverlappingTicks={true}
-              tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
+              tickFormat={timeFormatter(getChartDateLabel(min, max))}
               title={i18n.translate('xpack.uptime.monitorCharts.durationChart.bottomAxis.title', {
                 defaultMessage: 'Timestamp',
               })}
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx
index e748f37970319..6d16526f3ac47 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx
@@ -11,7 +11,6 @@ import {
   getAxisId,
   getSpecId,
   Position,
-  ScaleType,
   timeFormatter,
   Settings,
 } from '@elastic/charts';
@@ -147,8 +146,7 @@ export const SnapshotHistogramComponent = ({
                   defaultMessage: 'Snapshot Y Axis',
                 })
               )}
-              position={Position.Left}
-              showOverlappingTicks={true}
+              position="left"
               title={i18n.translate('xpack.uptime.snapshotHistogram.yAxis.title', {
                 defaultMessage: 'Pings',
                 description:
@@ -163,9 +161,9 @@ export const SnapshotHistogramComponent = ({
               stackAccessors={[0]}
               timeZone="local"
               xAccessor={0}
-              xScaleType={ScaleType.Time}
+              xScaleType="time"
               yAccessors={[1]}
-              yScaleType={ScaleType.Linear}
+              yScaleType="linear"
             />
             <BarSeries
               customSeriesColors={getColorsMap(dangerColor, downSpecId)}
@@ -177,9 +175,9 @@ export const SnapshotHistogramComponent = ({
               stackAccessors={[0]}
               timeZone="local"
               xAccessor={0}
-              xScaleType={ScaleType.Time}
+              xScaleType="time"
               yAccessors={[1]}
-              yScaleType={ScaleType.Linear}
+              yScaleType="linear"
             />
           </Chart>
         </ChartWrapper>
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx
index 5dffe94045fb6..1d18919d5c473 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx
@@ -7,14 +7,13 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { Fragment, useContext } from 'react';
-import DateMath from '@elastic/datemath';
-import { Moment } from 'moment';
 import { MonitorChart } from '../../../common/graphql/types';
 import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
 import { monitorChartsQuery } from '../../queries';
 import { DurationChart } from './charts';
 import { UptimeSettingsContext } from '../../contexts';
 import { SnapshotHistogram } from './charts/snapshot_histogram';
+import { useUrlParams } from '../../hooks';
 
 interface MonitorChartsQueryResult {
   monitorChartsData?: MonitorChart;
@@ -47,10 +46,9 @@ export const MonitorChartsComponent = ({
     } = data;
 
     const { colors } = useContext(UptimeSettingsContext);
-    const parseDateRange = (r: string): number => {
-      const parsed: Moment | undefined = DateMath.parse(r);
-      return parsed ? parsed.valueOf() : 0;
-    };
+    const [getUrlParams] = useUrlParams();
+    const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams();
+
     return (
       <Fragment>
         <EuiFlexGroup>
@@ -64,8 +62,8 @@ export const MonitorChartsComponent = ({
           </EuiFlexItem>
           <EuiFlexItem>
             <SnapshotHistogram
-              absoluteStartDate={parseDateRange(dateRangeStart)}
-              absoluteEndDate={parseDateRange(dateRangeEnd)}
+              absoluteStartDate={absoluteDateRangeStart}
+              absoluteEndDate={absoluteDateRangeEnd}
               successColor={colors.success}
               dangerColor={colors.danger}
               variables={{ dateRangeStart, dateRangeEnd, monitorId }}
diff --git a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap
index cee27bdff623d..4b45ed20d5d83 100644
--- a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`useUrlParams gets the expected values using the context 1`] = `
   hook={[Function]}
 >
   <div>
-    {"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-19d","dateRangeEnd":"now-1m","filters":"","search":"","selectedPingStatus":"down","statusFilter":""}
+    {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-19d","dateRangeEnd":"now-1m","filters":"","search":"","selectedPingStatus":"down","statusFilter":""}
   </div>
   <button
     id="setUrlParams"
diff --git a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx
index 0ac8a107f4e33..e55a0bb989bca 100644
--- a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx
+++ b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx
@@ -5,6 +5,7 @@
  */
 
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import DateMath from '@elastic/datemath';
 import React, { useState, Fragment } from 'react';
 import { useUrlParams, UptimeUrlParamsHook } from '../use_url_params';
 import { RouteComponentProps } from 'react-router';
@@ -38,6 +39,8 @@ const UseUrlParamsTestComponent = ({ hook }: MockUrlParamsComponentProps) => {
 };
 
 describe('useUrlParams', () => {
+  let dateMathSpy: any;
+  const MOCK_DATE_VALUE = 20;
   beforeEach(() => {
     mockRouter = {
       // @ts-ignore other properties aren't needed for this test
@@ -57,6 +60,8 @@ describe('useUrlParams', () => {
         url: 'http://elastic.co',
       },
     };
+    dateMathSpy = jest.spyOn(DateMath, 'parse');
+    dateMathSpy.mockReturnValue(MOCK_DATE_VALUE);
   });
 
   it('accepts router props, updates URL params, and returns the current params', () => {
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/stringify_url_params.ts b/x-pack/legacy/plugins/uptime/public/lib/helper/stringify_url_params.ts
index 1d8b4ff0a710e..f1e9069126708 100644
--- a/x-pack/legacy/plugins/uptime/public/lib/helper/stringify_url_params.ts
+++ b/x-pack/legacy/plugins/uptime/public/lib/helper/stringify_url_params.ts
@@ -7,4 +7,4 @@
 import qs from 'querystring';
 import { UptimeUrlParams } from './url_params/get_supported_url_params';
 
-export const stringifyUrlParams = (params: UptimeUrlParams) => `?${qs.stringify(params)}`;
+export const stringifyUrlParams = (params: Partial<UptimeUrlParams>) => `?${qs.stringify(params)}`;
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/__snapshots__/get_supported_url_params.test.ts.snap b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/__snapshots__/get_supported_url_params.test.ts.snap
index 70d281fc19dc5..9e4d67b2f70a9 100644
--- a/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/__snapshots__/get_supported_url_params.test.ts.snap
+++ b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/__snapshots__/get_supported_url_params.test.ts.snap
@@ -2,6 +2,8 @@
 
 exports[`getSupportedUrlParams provides defaults for empty string array values 1`] = `
 Object {
+  "absoluteDateRangeEnd": 20,
+  "absoluteDateRangeStart": 20,
   "autorefreshInterval": 60000,
   "autorefreshIsPaused": false,
   "dateRangeEnd": "now",
@@ -15,6 +17,8 @@ Object {
 
 exports[`getSupportedUrlParams provides defaults for undefined values 1`] = `
 Object {
+  "absoluteDateRangeEnd": 20,
+  "absoluteDateRangeStart": 20,
   "autorefreshInterval": 60000,
   "autorefreshIsPaused": false,
   "dateRangeEnd": "now",
@@ -28,10 +32,12 @@ Object {
 
 exports[`getSupportedUrlParams returns custom values 1`] = `
 Object {
+  "absoluteDateRangeEnd": 20,
+  "absoluteDateRangeStart": 20,
   "autorefreshInterval": 23,
   "autorefreshIsPaused": false,
-  "dateRangeEnd": "bar",
-  "dateRangeStart": "foo",
+  "dateRangeEnd": "now",
+  "dateRangeStart": "now-15m",
   "filters": "",
   "search": "monitor.status: down",
   "selectedPingStatus": "up",
@@ -41,6 +47,8 @@ Object {
 
 exports[`getSupportedUrlParams returns default values 1`] = `
 Object {
+  "absoluteDateRangeEnd": 20,
+  "absoluteDateRangeStart": 20,
   "autorefreshInterval": 60000,
   "autorefreshIsPaused": false,
   "dateRangeEnd": "now",
@@ -54,6 +62,8 @@ Object {
 
 exports[`getSupportedUrlParams returns the first item for string arrays 1`] = `
 Object {
+  "absoluteDateRangeEnd": 20,
+  "absoluteDateRangeStart": 20,
   "autorefreshInterval": 60000,
   "autorefreshIsPaused": false,
   "dateRangeEnd": "now",
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/get_supported_url_params.test.ts b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/get_supported_url_params.test.ts
index 54ef029d27109..483fed28ea6d4 100644
--- a/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/get_supported_url_params.test.ts
+++ b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/get_supported_url_params.test.ts
@@ -4,16 +4,29 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import DateMath from '@elastic/datemath';
 import { getSupportedUrlParams } from '../get_supported_url_params';
 import { CLIENT_DEFAULTS } from '../../../../../common/constants';
 
 describe('getSupportedUrlParams', () => {
+  let dateMathSpy: any;
+  const MOCK_DATE_VALUE = 20;
+
+  beforeEach(() => {
+    dateMathSpy = jest.spyOn(DateMath, 'parse');
+    dateMathSpy.mockReturnValue(MOCK_DATE_VALUE);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('returns custom values', () => {
     const customValues = {
       autorefreshInterval: '23',
       autorefreshIsPaused: 'false',
-      dateRangeStart: 'foo',
-      dateRangeEnd: 'bar',
+      dateRangeStart: 'now-15m',
+      dateRangeEnd: 'now',
       monitorListPageIndex: '23',
       monitorListPageSize: '50',
       monitorListSortDirection: 'desc',
@@ -39,6 +52,8 @@ describe('getSupportedUrlParams', () => {
     const result = getSupportedUrlParams({});
     expect(result).toMatchSnapshot();
     expect(result).toEqual({
+      absoluteDateRangeStart: MOCK_DATE_VALUE,
+      absoluteDateRangeEnd: MOCK_DATE_VALUE,
       autorefreshInterval: AUTOREFRESH_INTERVAL,
       autorefreshIsPaused: AUTOREFRESH_IS_PAUSED,
       dateRangeStart: DATE_RANGE_START,
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/parse_absolute_date.test.ts b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/parse_absolute_date.test.ts
new file mode 100644
index 0000000000000..691b38bdf9ca2
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/parse_absolute_date.test.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import DateMath from '@elastic/datemath';
+import moment from 'moment';
+import { parseAbsoluteDate } from '../parse_absolute_date';
+
+describe('parseAbsoluteDate', () => {
+  let dateMathSpy: any;
+  const MOCK_VALUE = 132435465789;
+
+  beforeEach(() => {
+    dateMathSpy = jest.spyOn(DateMath, 'parse');
+    dateMathSpy.mockReturnValue(moment(MOCK_VALUE));
+  });
+
+  it('returns the parsed value for a valid date string', () => {
+    const result = parseAbsoluteDate('now-15m', 12345);
+    expect(result).toBe(MOCK_VALUE);
+  });
+
+  it('returns the default value if the parser provides `undefined`', () => {
+    dateMathSpy.mockReturnValue(undefined);
+    const result = parseAbsoluteDate('this is not a valid datae', 12345);
+    expect(result).toBe(12345);
+  });
+});
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/get_supported_url_params.ts b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/get_supported_url_params.ts
index 2776783e1c411..5fd56c3b5a54f 100644
--- a/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/get_supported_url_params.ts
+++ b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/get_supported_url_params.ts
@@ -7,8 +7,11 @@
 import { parseIsPaused } from './parse_is_paused';
 import { parseUrlInt } from './parse_url_int';
 import { CLIENT_DEFAULTS } from '../../../../common/constants';
+import { parseAbsoluteDate } from './parse_absolute_date';
 
 export interface UptimeUrlParams {
+  absoluteDateRangeStart: number;
+  absoluteDateRangeEnd: number;
   autorefreshInterval: number;
   autorefreshIsPaused: boolean;
   dateRangeStart: string;
@@ -25,6 +28,8 @@ export interface UptimeUrlParams {
 }
 
 const {
+  ABSOLUTE_DATE_RANGE_START,
+  ABSOLUTE_DATE_RANGE_END,
   AUTOREFRESH_INTERVAL,
   AUTOREFRESH_IS_PAUSED,
   DATE_RANGE_START,
@@ -86,6 +91,14 @@ export const getSupportedUrlParams = (params: {
   } = filteredParams;
 
   return {
+    absoluteDateRangeStart: parseAbsoluteDate(
+      dateRangeStart || DATE_RANGE_START,
+      ABSOLUTE_DATE_RANGE_START
+    ),
+    absoluteDateRangeEnd: parseAbsoluteDate(
+      dateRangeEnd || DATE_RANGE_END,
+      ABSOLUTE_DATE_RANGE_END
+    ),
     autorefreshInterval: parseUrlInt(autorefreshInterval, AUTOREFRESH_INTERVAL),
     autorefreshIsPaused: parseIsPaused(autorefreshIsPaused, AUTOREFRESH_IS_PAUSED),
     dateRangeStart: dateRangeStart || DATE_RANGE_START,
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/parse_absolute_date.ts b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/parse_absolute_date.ts
new file mode 100644
index 0000000000000..eaf720a8d2f7e
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/parse_absolute_date.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import DateMath from '@elastic/datemath';
+
+export const parseAbsoluteDate = (date: string, defaultValue: number): number => {
+  const momentWrapper = DateMath.parse(date);
+  if (momentWrapper) {
+    return momentWrapper.valueOf();
+  }
+  return defaultValue;
+};
diff --git a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
index bc294dd54d2ed..4284513121254 100644
--- a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
+++ b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
@@ -47,7 +47,7 @@ export const MonitorPage = ({
   const [pingListPageCount, setPingListPageCount] = useState<number>(10);
   const { colors, refreshApp, setHeadingText } = useContext(UptimeSettingsContext);
   const [getUrlParams, updateUrlParams] = useUrlParams();
-  const params = getUrlParams();
+  const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = getUrlParams();
   const { dateRangeStart, dateRangeEnd, selectedPingStatus } = params;
 
   useEffect(() => {
diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
index e903183960fad..bb235b8c7b8a7 100644
--- a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
+++ b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
@@ -45,24 +45,10 @@ export type UptimeSearchBarQueryChangeHandler = (queryChangedEvent: {
 }) => void;
 
 export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }: Props) => {
-  const { absoluteStartDate, absoluteEndDate, colors, setHeadingText } = useContext(
-    UptimeSettingsContext
-  );
+  const { colors, setHeadingText } = useContext(UptimeSettingsContext);
   const [getUrlParams, updateUrl] = useUrlParams();
-  const params = getUrlParams();
-  const {
-    dateRangeStart,
-    dateRangeEnd,
-    filters: urlFilters,
-    // TODO: reintegrate pagination in future release
-    // monitorListPageIndex,
-    // monitorListPageSize,
-    // TODO: reintegrate sorting in future release
-    // monitorListSortDirection,
-    // monitorListSortField,
-    search,
-    statusFilter,
-  } = params;
+  const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = getUrlParams();
+  const { dateRangeStart, dateRangeEnd, filters: urlFilters, search, statusFilter } = params;
 
   const [indexPattern, setIndexPattern] = useState<any>(undefined);
 
@@ -156,8 +142,8 @@ export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }:
           </EuiFlexItem>
           <EuiFlexItem grow={8}>
             <SnapshotHistogram
-              absoluteStartDate={absoluteStartDate}
-              absoluteEndDate={absoluteEndDate}
+              absoluteStartDate={absoluteDateRangeStart}
+              absoluteEndDate={absoluteDateRangeEnd}
               successColor={colors.success}
               dangerColor={colors.danger}
               variables={sharedProps}
@@ -167,8 +153,8 @@ export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }:
         </EuiFlexGroup>
         <EuiSpacer size="s" />
         <MonitorList
-          absoluteStartDate={absoluteStartDate}
-          absoluteEndDate={absoluteEndDate}
+          absoluteStartDate={absoluteDateRangeStart}
+          absoluteEndDate={absoluteDateRangeEnd}
           dangerColor={colors.danger}
           hasActiveFilters={!!filters}
           implementsCustomErrorState={true}