diff --git a/package.json b/package.json
index c0e2acdb578c49..3abd69a6166829 100644
--- a/package.json
+++ b/package.json
@@ -360,7 +360,7 @@
     "chance": "1.0.18",
     "cheerio": "0.22.0",
     "chokidar": "3.2.1",
-    "chromedriver": "^77.0.0",
+    "chromedriver": "78.0.1",
     "classnames": "2.2.6",
     "dedent": "^0.7.0",
     "delete-empty": "^2.0.0",
diff --git a/src/legacy/ui/public/vis/editors/default/controls/ranges.tsx b/src/legacy/ui/public/vis/editors/default/controls/ranges.tsx
index 071e15f8b97f83..a216ad5d928b6d 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/ranges.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/ranges.tsx
@@ -29,6 +29,8 @@ import {
   EuiSpacer,
   EuiButtonEmpty,
   EuiFormRow,
+  EuiToolTip,
+  EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -154,15 +156,24 @@ function RangesParamEditor({
             [isFromValid, isToValid] = validateRange({ from, to }, index);
           }
 
-          const fromPrepend = i18n.translate(
+          const gtePrependLabel = i18n.translate(
             'common.ui.aggTypes.ranges.greaterThanOrEqualPrepend',
             {
               defaultMessage: '\u2265',
             }
           );
-          const toPrepend = i18n.translate('common.ui.aggTypes.ranges.lessThanPrepend', {
+          const gteTooltipContent = i18n.translate(
+            'common.ui.aggTypes.ranges.greaterThanOrEqualTooltip',
+            {
+              defaultMessage: 'Greater than or equal to',
+            }
+          );
+          const ltPrependLabel = i18n.translate('common.ui.aggTypes.ranges.lessThanPrepend', {
             defaultMessage: '\u003c',
           });
+          const ltTooltipContent = i18n.translate('common.ui.aggTypes.ranges.lessThanTooltip', {
+            defaultMessage: 'Less than',
+          });
 
           return (
             <Fragment key={id}>
@@ -179,7 +190,11 @@ function RangesParamEditor({
                     fullWidth={true}
                     compressed={true}
                     isInvalid={!isFromValid}
-                    prepend={fromPrepend}
+                    prepend={
+                      <EuiToolTip content={gteTooltipContent}>
+                        <EuiText size="s">{gtePrependLabel}</EuiText>
+                      </EuiToolTip>
+                    }
                   />
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
@@ -197,7 +212,11 @@ function RangesParamEditor({
                     fullWidth={true}
                     compressed={true}
                     isInvalid={!isToValid}
-                    prepend={toPrepend}
+                    prepend={
+                      <EuiToolTip content={ltTooltipContent}>
+                        <EuiText size="s">{ltPrependLabel}</EuiText>
+                      </EuiToolTip>
+                    }
                   />
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx
index 2667d03ef8dde4..daba164a4a00ce 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 // @ts-ignore
 import Histogram from '../../../shared/charts/Histogram';
 import { EmptyMessage } from '../../../shared/EmptyMessage';
+import { asRelativeDateTimeRange } from '../../../../utils/formatters';
 
 interface IBucket {
   key: number;
@@ -51,6 +52,9 @@ interface Props {
   title: React.ReactNode;
 }
 
+const tooltipHeader = (bucket: FormattedBucket) =>
+  asRelativeDateTimeRange(bucket.x0, bucket.x);
+
 export function ErrorDistribution({ distribution, title }: Props) {
   const buckets = getFormattedBuckets(
     distribution.buckets,
@@ -73,6 +77,7 @@ export function ErrorDistribution({ distribution, title }: Props) {
         <span>{title}</span>
       </EuiTitle>
       <Histogram
+        tooltipHeader={tooltipHeader}
         verticalLineHover={(bucket: FormattedBucket) => bucket.x}
         xType="time"
         buckets={buckets}
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx
index 2f06f1d52de6ba..a6c80581585783 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx
@@ -143,7 +143,7 @@ const ErrorGroupList: React.FC<Props> = props => {
         align: 'right',
         render: (value?: number) =>
           value ? (
-            <TimestampTooltip time={value} precision="minutes" />
+            <TimestampTooltip time={value} timeUnit="minutes" />
           ) : (
             NOT_AVAILABLE_LABEL
           )
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx
index f2524ef1c16f4c..13e7a5bfd894e2 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx
@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import { ServiceListAPIResponse } from '../../../../../server/lib/services/get_services';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { fontSizes, truncate } from '../../../../style/variables';
-import { asDecimal, asMillis } from '../../../../utils/formatters';
+import { asDecimal, convertTo } from '../../../../utils/formatters';
 import { ManagedTable } from '../../../shared/ManagedTable';
 import { EnvironmentBadge } from '../../../shared/EnvironmentBadge';
 import { TransactionOverviewLink } from '../../../shared/Links/apm/TransactionOverviewLink';
@@ -80,7 +80,11 @@ export const SERVICE_COLUMNS = [
     }),
     sortable: true,
     dataType: 'number',
-    render: (value: number) => asMillis(value)
+    render: (time: number) =>
+      convertTo({
+        unit: 'milliseconds',
+        microseconds: time
+      }).formatted
   },
   {
     field: 'transactionsPerMinute',
diff --git a/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationList.tsx b/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationList.tsx
index 161d3711484785..c660455e1eed83 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationList.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationList.tsx
@@ -128,7 +128,7 @@ export function AgentConfigurationList({
       ),
       sortable: true,
       render: (value: number) => (
-        <TimestampTooltip time={value} precision="minutes" />
+        <TimestampTooltip time={value} timeUnit="minutes" />
       )
     },
     {
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TraceOverview/TraceList.tsx b/x-pack/legacy/plugins/apm/public/components/app/TraceOverview/TraceList.tsx
index ca10b06c11cbf2..9116e02870a806 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TraceOverview/TraceList.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TraceOverview/TraceList.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { ITransactionGroup } from '../../../../server/lib/transaction_groups/transform';
 import { fontSizes, truncate } from '../../../style/variables';
-import { asMillis } from '../../../utils/formatters';
+import { convertTo } from '../../../utils/formatters';
 import { EmptyMessage } from '../../shared/EmptyMessage';
 import { ImpactBar } from '../../shared/ImpactBar';
 import { TransactionDetailLink } from '../../shared/Links/apm/TransactionDetailLink';
@@ -66,7 +66,11 @@ const traceListColumns: Array<ITableColumn<ITransactionGroup>> = [
     }),
     sortable: true,
     dataType: 'number',
-    render: (value: number) => asMillis(value)
+    render: (time: number) =>
+      convertTo({
+        unit: 'milliseconds',
+        microseconds: time
+      }).formatted
   },
   {
     field: 'transactionsPerMinute',
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
index fc86f4bb78afbe..c9e5175a109219 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
@@ -11,7 +11,7 @@ import React, { FunctionComponent, useCallback } from 'react';
 import { TransactionDistributionAPIResponse } from '../../../../../server/lib/transactions/distribution';
 import { IBucket } from '../../../../../server/lib/transactions/distribution/get_buckets/transform';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
-import { getTimeFormatter, timeUnit } from '../../../../utils/formatters';
+import { getDurationFormatter } from '../../../../utils/formatters';
 // @ts-ignore
 import Histogram from '../../../shared/charts/Histogram';
 import { EmptyMessage } from '../../../shared/EmptyMessage';
@@ -132,8 +132,7 @@ export const TransactionDistribution: FunctionComponent<Props> = (
   );
 
   const xMax = d3.max(buckets, d => d.x) || 0;
-  const timeFormatter = getTimeFormatter(xMax);
-  const unit = timeUnit(xMax);
+  const timeFormatter = getDurationFormatter(xMax);
 
   const bucketIndex = buckets.findIndex(
     bucket =>
@@ -187,18 +186,18 @@ export const TransactionDistribution: FunctionComponent<Props> = (
             });
           }
         }}
-        formatX={timeFormatter}
+        formatX={(time: number) => timeFormatter(time).formatted}
         formatYShort={formatYShort}
         formatYLong={formatYLong}
         verticalLineHover={(bucket: IChartPoint) =>
           bucket.y > 0 && !bucket.sample
         }
         backgroundHover={(bucket: IChartPoint) => bucket.y > 0 && bucket.sample}
-        tooltipHeader={(bucket: IChartPoint) =>
-          `${timeFormatter(bucket.x0, {
-            withUnit: false
-          })} - ${timeFormatter(bucket.x, { withUnit: false })} ${unit}`
-        }
+        tooltipHeader={(bucket: IChartPoint) => {
+          const xFormatted = timeFormatter(bucket.x);
+          const x0Formatted = timeFormatter(bucket.x0);
+          return `${x0Formatted.value} - ${xFormatted.value} ${xFormatted.unit}`;
+        }}
         tooltipFooter={(bucket: IChartPoint) =>
           !bucket.sample &&
           i18n.translate(
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
index a5e6eb622e8fb1..c64231a6ded863 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
@@ -12,7 +12,7 @@ import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import { isRumAgentName } from '../../../../../../../common/agent_name';
 import { px, unit, units } from '../../../../../../style/variables';
-import { asTime } from '../../../../../../utils/formatters';
+import { asDuration } from '../../../../../../utils/formatters';
 import { ErrorCountBadge } from '../../ErrorCountBadge';
 import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
 import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink';
@@ -133,7 +133,7 @@ const SpanActionToolTip: React.SFC<SpanActionToolTipProps> = ({
 function Duration({ item }: { item: IWaterfallItem }) {
   return (
     <EuiText color="subdued" size="xs">
-      {asTime(item.duration)}
+      {asDuration(item.duration)}
     </EuiText>
   );
 }
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionOverview/List/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionOverview/List/index.tsx
index 062d103bfc4487..3d75011f52f193 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionOverview/List/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionOverview/List/index.tsx
@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { ITransactionGroup } from '../../../../../server/lib/transaction_groups/transform';
 import { fontFamilyCode, truncate } from '../../../../style/variables';
-import { asDecimal, asMillis } from '../../../../utils/formatters';
+import { asDecimal, convertTo } from '../../../../utils/formatters';
 import { ImpactBar } from '../../../shared/ImpactBar';
 import { ITableColumn, ManagedTable } from '../../../shared/ManagedTable';
 import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
@@ -28,6 +28,12 @@ interface Props {
   isLoading: boolean;
 }
 
+const toMilliseconds = (time: number) =>
+  convertTo({
+    unit: 'milliseconds',
+    microseconds: time
+  }).formatted;
+
 export function TransactionList({ items, isLoading }: Props) {
   const columns: Array<ITableColumn<ITransactionGroup>> = useMemo(
     () => [
@@ -67,7 +73,7 @@ export function TransactionList({ items, isLoading }: Props) {
         ),
         sortable: true,
         dataType: 'number',
-        render: (value: number) => asMillis(value)
+        render: (time: number) => toMilliseconds(time)
       },
       {
         field: 'p95',
@@ -79,7 +85,7 @@ export function TransactionList({ items, isLoading }: Props) {
         ),
         sortable: true,
         dataType: 'number',
-        render: (value: number) => asMillis(value)
+        render: (time: number) => toMilliseconds(time)
       },
       {
         field: 'transactionsPerMinute',
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx
index c76e62d987aaca..a5a677296825c4 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiToolTip, EuiText } from '@elastic/eui';
 import { PercentOfParent } from '../../app/TransactionDetails/WaterfallWithSummmary/PercentOfParent';
-import { asTime } from '../../../utils/formatters';
+import { asDuration } from '../../../utils/formatters';
 
 interface Props {
   duration: number;
@@ -29,7 +29,7 @@ const DurationSummaryItem = ({
   return (
     <>
       <EuiToolTip content={label}>
-        <EuiText>{asTime(duration)}</EuiText>
+        <EuiText>{asDuration(duration)}</EuiText>
       </EuiToolTip>
       &nbsp;
       <EuiText size="s">
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Summary/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Summary/index.tsx
index c4b750a360efd3..ce6935d1858aac 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/Summary/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/Summary/index.tsx
@@ -8,9 +8,10 @@ import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 import styled from 'styled-components';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { px, units } from '../../../../public/style/variables';
+import { Maybe } from '../../../../typings/common';
 
 interface Props {
-  items: Array<React.ReactElement | null | undefined>;
+  items: Array<Maybe<React.ReactElement>>;
 }
 
 // TODO: Light/Dark theme (@see https://github.com/elastic/kibana/issues/44840)
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip/__test__/index.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip/__test__/index.test.tsx
new file mode 100644
index 00000000000000..b4678b287dc166
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip/__test__/index.test.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+import moment from 'moment-timezone';
+import { TimestampTooltip } from '../index';
+import { mockNow } from '../../../../utils/testHelpers';
+
+describe('TimestampTooltip', () => {
+  const timestamp = 1570720000123; // Oct 10, 2019, 08:06:40.123 (UTC-7)
+
+  beforeAll(() => {
+    // mock Date.now
+    mockNow(1570737000000);
+
+    moment.tz.setDefault('America/Los_Angeles');
+  });
+
+  afterAll(() => moment.tz.setDefault(''));
+
+  it('should render component with relative time in body and absolute time in tooltip', () => {
+    expect(shallow(<TimestampTooltip time={timestamp} />))
+      .toMatchInlineSnapshot(`
+      <EuiToolTip
+        content="Oct 10, 2019, 08:06:40.123 (UTC-7)"
+        delay="regular"
+        position="top"
+      >
+        5 hours ago
+      </EuiToolTip>
+    `);
+  });
+
+  it('should format with precision in milliseconds by default', () => {
+    expect(
+      shallow(<TimestampTooltip time={timestamp} />)
+        .find('EuiToolTip')
+        .prop('content')
+    ).toBe('Oct 10, 2019, 08:06:40.123 (UTC-7)');
+  });
+
+  it('should format with precision in seconds', () => {
+    expect(
+      shallow(<TimestampTooltip time={timestamp} timeUnit="seconds" />)
+        .find('EuiToolTip')
+        .prop('content')
+    ).toBe('Oct 10, 2019, 08:06:40 (UTC-7)');
+  });
+
+  it('should format with precision in minutes', () => {
+    expect(
+      shallow(<TimestampTooltip time={timestamp} timeUnit="minutes" />)
+        .find('EuiToolTip')
+        .prop('content')
+    ).toBe('Oct 10, 2019, 08:06 (UTC-7)');
+  });
+});
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip/index.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip/index.test.tsx
deleted file mode 100644
index a7149c7604695f..00000000000000
--- a/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip/index.test.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-import moment from 'moment-timezone';
-import { TimestampTooltip, asAbsoluteTime } from './index';
-import { mockNow } from '../../../utils/testHelpers';
-
-describe('asAbsoluteTime', () => {
-  afterAll(() => moment.tz.setDefault(''));
-
-  it('should add a leading plus for timezones with positive UTC offset', () => {
-    moment.tz.setDefault('Europe/Copenhagen');
-    expect(asAbsoluteTime({ time: 1559390400000, precision: 'minutes' })).toBe(
-      'Jun 1, 2019, 14:00 (UTC+2)'
-    );
-  });
-
-  it('should add a leading minus for timezones with negative UTC offset', () => {
-    moment.tz.setDefault('America/Los_Angeles');
-    expect(asAbsoluteTime({ time: 1559390400000, precision: 'minutes' })).toBe(
-      'Jun 1, 2019, 05:00 (UTC-7)'
-    );
-  });
-
-  it('should use default UTC offset formatting when offset contains minutes', () => {
-    moment.tz.setDefault('Canada/Newfoundland');
-    expect(asAbsoluteTime({ time: 1559390400000, precision: 'minutes' })).toBe(
-      'Jun 1, 2019, 09:30 (UTC-02:30)'
-    );
-  });
-
-  it('should respect DST', () => {
-    moment.tz.setDefault('Europe/Copenhagen');
-    const timeWithDST = 1559390400000; //  Jun 1, 2019
-    const timeWithoutDST = 1575201600000; //  Dec 1, 2019
-
-    expect(asAbsoluteTime({ time: timeWithDST })).toBe(
-      'Jun 1, 2019, 14:00:00.000 (UTC+2)'
-    );
-
-    expect(asAbsoluteTime({ time: timeWithoutDST })).toBe(
-      'Dec 1, 2019, 13:00:00.000 (UTC+1)'
-    );
-  });
-});
-
-describe('TimestampTooltip', () => {
-  const timestamp = 1570720000123; // Oct 10, 2019, 08:06:40.123 (UTC-7)
-
-  beforeAll(() => {
-    // mock Date.now
-    mockNow(1570737000000);
-
-    moment.tz.setDefault('America/Los_Angeles');
-  });
-
-  afterAll(() => moment.tz.setDefault(''));
-
-  it('should render component with relative time in body and absolute time in tooltip', () => {
-    expect(shallow(<TimestampTooltip time={timestamp} />))
-      .toMatchInlineSnapshot(`
-      <EuiToolTip
-        content="Oct 10, 2019, 08:06:40.123 (UTC-7)"
-        delay="regular"
-        position="top"
-      >
-        5 hours ago
-      </EuiToolTip>
-    `);
-  });
-
-  it('should format with precision in milliseconds by default', () => {
-    expect(
-      shallow(<TimestampTooltip time={timestamp} />)
-        .find('EuiToolTip')
-        .prop('content')
-    ).toBe('Oct 10, 2019, 08:06:40.123 (UTC-7)');
-  });
-
-  it('should format with precision in seconds', () => {
-    expect(
-      shallow(<TimestampTooltip time={timestamp} precision="seconds" />)
-        .find('EuiToolTip')
-        .prop('content')
-    ).toBe('Oct 10, 2019, 08:06:40 (UTC-7)');
-  });
-
-  it('should format with precision in minutes', () => {
-    expect(
-      shallow(<TimestampTooltip time={timestamp} precision="minutes" />)
-        .find('EuiToolTip')
-        .prop('content')
-    ).toBe('Oct 10, 2019, 08:06 (UTC-7)');
-  });
-
-  it('should format with precision in days', () => {
-    expect(
-      shallow(<TimestampTooltip time={timestamp} precision="days" />)
-        .find('EuiToolTip')
-        .prop('content')
-    ).toBe('Oct 10, 2019 (UTC-7)');
-  });
-});
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip/index.tsx
index d7ef6517c2fb83..504ff36c078f0c 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip/index.tsx
@@ -6,48 +6,20 @@
 import React from 'react';
 import { EuiToolTip } from '@elastic/eui';
 import moment from 'moment-timezone';
+import { asAbsoluteDateTime, TimeUnit } from '../../../utils/formatters';
 
 interface Props {
   /**
    * timestamp in milliseconds
    */
   time: number;
-  precision?: 'days' | 'minutes' | 'seconds' | 'milliseconds';
+  timeUnit?: TimeUnit;
 }
 
-function getPreciseTime(precision: Props['precision']) {
-  switch (precision) {
-    case 'days':
-      return '';
-    case 'minutes':
-      return ', HH:mm';
-    case 'seconds':
-      return ', HH:mm:ss';
-    default:
-      return ', HH:mm:ss.SSS';
-  }
-}
-
-function withLeadingPlus(value: number) {
-  return value > 0 ? `+${value}` : value;
-}
-
-export function asAbsoluteTime({ time, precision = 'milliseconds' }: Props) {
-  const momentTime = moment(time);
-  const utcOffsetHours = momentTime.utcOffset() / 60;
-  const utcOffsetFormatted = Number.isInteger(utcOffsetHours)
-    ? withLeadingPlus(utcOffsetHours)
-    : 'Z';
-
-  return momentTime.format(
-    `MMM D, YYYY${getPreciseTime(precision)} (UTC${utcOffsetFormatted})`
-  );
-}
-
-export function TimestampTooltip({ time, precision = 'milliseconds' }: Props) {
+export function TimestampTooltip({ time, timeUnit = 'milliseconds' }: Props) {
   const momentTime = moment(time);
   const relativeTimeLabel = momentTime.fromNow();
-  const absoluteTimeLabel = asAbsoluteTime({ time, precision });
+  const absoluteTimeLabel = asAbsoluteDateTime(time, timeUnit);
 
   return (
     <EuiToolTip content={absoluteTimeLabel}>
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx
index 1bcf4e08c91443..c4e7ed86df8b7c 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx
@@ -9,6 +9,7 @@ import numeral from '@elastic/numeral';
 import { throttle } from 'lodash';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { Coordinate, TimeSeries } from '../../../../../typings/timeseries';
+import { Maybe } from '../../../../../typings/common';
 import { TransactionLineChart } from '../../charts/TransactionCharts/TransactionLineChart';
 import { asPercent } from '../../../../utils/formatters';
 import { unit } from '../../../../style/variables';
@@ -19,7 +20,7 @@ interface Props {
   timeseries: TimeSeries[];
 }
 
-const tickFormatY = (y: number | null | undefined) => {
+const tickFormatY = (y: Maybe<number>) => {
   return numeral(y || 0).format('0 %');
 };
 
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Histogram/__test__/Histogram.test.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Histogram/__test__/Histogram.test.js
index b511bdc4392277..f76a27480137a2 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Histogram/__test__/Histogram.test.js
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Histogram/__test__/Histogram.test.js
@@ -11,9 +11,8 @@ import d3 from 'd3';
 import { HistogramInner } from '../index';
 import response from './response.json';
 import {
-  getTimeFormatter,
   asDecimal,
-  timeUnit
+  getDurationFormatter
 } from '../../../../../utils/formatters';
 import { toJson } from '../../../../../utils/testHelpers';
 import { getFormattedBuckets } from '../../../../app/TransactionDetails/Distribution/index';
@@ -25,8 +24,7 @@ describe('Histogram', () => {
   beforeEach(() => {
     const buckets = getFormattedBuckets(response.buckets, response.bucketSize);
     const xMax = d3.max(buckets, d => d.x);
-    const timeFormatter = getTimeFormatter(xMax);
-    const unit = timeUnit(xMax);
+    const timeFormatter = getDurationFormatter(xMax);
 
     wrapper = mount(
       <HistogramInner
@@ -34,14 +32,14 @@ describe('Histogram', () => {
         bucketSize={response.bucketSize}
         transactionId="myTransactionId"
         onClick={onClick}
-        formatX={timeFormatter}
+        formatX={time => timeFormatter(time).formatted}
         formatYShort={t => `${asDecimal(t)} occ.`}
         formatYLong={t => `${asDecimal(t)} occurrences`}
-        tooltipHeader={bucket =>
-          `${timeFormatter(bucket.x0, {
-            withUnit: false
-          })} - ${timeFormatter(bucket.x, { withUnit: false })} ${unit}`
-        }
+        tooltipHeader={bucket => {
+          const xFormatted = timeFormatter(bucket.x);
+          const x0Formatted = timeFormatter(bucket.x0);
+          return `${x0Formatted.value} - ${xFormatted.value} ${xFormatted.unit}`;
+        }}
         width={800}
       />
     );
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/MetricsChart/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/charts/MetricsChart/index.tsx
index 51aa4a40fb9234..30dcc99af31b9a 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/MetricsChart/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/MetricsChart/index.tsx
@@ -9,20 +9,21 @@ import { GenericMetricsChart } from '../../../../../server/lib/metrics/transform
 // @ts-ignore
 import CustomPlot from '../CustomPlot';
 import {
-  asDynamicBytes,
+  asDecimal,
   asPercent,
+  asInteger,
+  asDynamicBytes,
   getFixedByteFormatter,
-  asDecimal,
-  asTime,
-  asInteger
+  asDuration
 } from '../../../../utils/formatters';
 import { Coordinate } from '../../../../../typings/timeseries';
 import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
 import { useChartsSync } from '../../../../hooks/useChartsSync';
+import { Maybe } from '../../../../../typings/common';
 
 interface Props {
-  start: number | string | undefined;
-  end: number | string | undefined;
+  start: Maybe<number | string>;
+  end: Maybe<number | string>;
   chart: GenericMetricsChart;
 }
 
@@ -64,17 +65,17 @@ function getYTickFormatter(chart: GenericMetricsChart) {
       return getFixedByteFormatter(max);
     }
     case 'percent': {
-      return (y: number | null | undefined) => asPercent(y || 0, 1);
+      return (y: Maybe<number>) => asPercent(y || 0, 1);
     }
     case 'time': {
-      return (y: number | null | undefined) => asTime(y);
+      return (y: Maybe<number>) => asDuration(y);
     }
     case 'integer': {
-      return (y: number | null | undefined) =>
+      return (y: Maybe<number>) =>
         isValidCoordinateValue(y) ? asInteger(y) : y;
     }
     default: {
-      return (y: number | null | undefined) =>
+      return (y: Maybe<number>) =>
         isValidCoordinateValue(y) ? asDecimal(y) : y;
     }
   }
@@ -89,7 +90,7 @@ function getTooltipFormatter({ yUnit }: GenericMetricsChart) {
       return (c: Coordinate) => asPercent(c.y || 0, 1);
     }
     case 'time': {
-      return (c: Coordinate) => asTime(c.y);
+      return (c: Coordinate) => asDuration(c.y);
     }
     case 'integer': {
       return (c: Coordinate) =>
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/AgentMarker.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/AgentMarker.js
index 1f8c6db8d20a8a..8ee23d61fe0eb6 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/AgentMarker.js
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/AgentMarker.js
@@ -10,7 +10,7 @@ import { EuiToolTip } from '@elastic/eui';
 import Legend from '../Legend';
 import { units, px } from '../../../../style/variables';
 import styled from 'styled-components';
-import { asTime } from '../../../../utils/formatters';
+import { asDuration } from '../../../../utils/formatters';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 
 const NameContainer = styled.div`
@@ -39,7 +39,7 @@ export default function AgentMarker({ agentMark, x }) {
         content={
           <div>
             <NameContainer>{agentMark.name}</NameContainer>
-            <TimeContainer>{asTime(agentMark.us)}</TimeContainer>
+            <TimeContainer>{asDuration(agentMark.us)}</TimeContainer>
           </div>
         }
       >
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
index 1648f427edd7d0..346aec9fb080a2 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
@@ -12,7 +12,7 @@ import { XYPlot, XAxis } from 'react-vis';
 import LastTickValue from './LastTickValue';
 import AgentMarker from './AgentMarker';
 import { px } from '../../../../style/variables';
-import { getTimeFormatter } from '../../../../utils/formatters';
+import { getDurationFormatter } from '../../../../utils/formatters';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 
 // Remove any tick that is too close to topTraceDuration
@@ -33,8 +33,9 @@ const getXAxisTickValues = (tickValues, topTraceDuration) => {
 
 function TimelineAxis({ plotValues, agentMarks, topTraceDuration }) {
   const { margins, tickValues, width, xDomain, xMax, xScale } = plotValues;
-  const tickFormat = getTimeFormatter(xMax);
+  const tickFormatter = getDurationFormatter(xMax);
   const xAxisTickValues = getXAxisTickValues(tickValues, topTraceDuration);
+  const topTraceDurationFormatted = tickFormatter(topTraceDuration).formatted;
 
   return (
     <Sticky disableCompensation>
@@ -66,7 +67,7 @@ function TimelineAxis({ plotValues, agentMarks, topTraceDuration }) {
                 orientation="top"
                 tickSize={0}
                 tickValues={xAxisTickValues}
-                tickFormat={tickFormat}
+                tickFormat={time => tickFormatter(time).formatted}
                 tickPadding={20}
                 style={{
                   text: { fill: theme.euiColorDarkShade }
@@ -76,7 +77,7 @@ function TimelineAxis({ plotValues, agentMarks, topTraceDuration }) {
               {topTraceDuration > 0 && (
                 <LastTickValue
                   x={xScale(topTraceDuration)}
-                  value={tickFormat(topTraceDuration)}
+                  value={topTraceDurationFormatted}
                   marginTop={28}
                 />
               )}
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Tooltip/index.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Tooltip/index.js
index f5992ac7fc63b5..239e46c25904da 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Tooltip/index.js
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Tooltip/index.js
@@ -19,7 +19,7 @@ import {
 } from '../../../../style/variables';
 import Legend from '../Legend';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
-import { asAbsoluteTime } from '../../TimestampTooltip';
+import { asAbsoluteDateTime } from '../../../../utils/formatters';
 
 const TooltipElm = styled.div`
   margin: 0 ${px(unit)};
@@ -87,9 +87,7 @@ export default function Tooltip({
   return (
     <Hint {...props} value={{ x, y }}>
       <TooltipElm>
-        <Header>
-          {header || asAbsoluteTime({ time: x, precision: 'seconds' })}
-        </Header>
+        <Header>{header || asAbsoluteDateTime(x, 'seconds')}</Header>
 
         <Content>
           {showLegends ? (
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/ChoroplethToolTip.tsx b/x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/ChoroplethToolTip.tsx
index adcce161c7ac1c..d2b6970841bdc2 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/ChoroplethToolTip.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/ChoroplethToolTip.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { asTime, asInteger } from '../../../../../utils/formatters';
+import { asDuration, asInteger } from '../../../../../utils/formatters';
 import { fontSizes } from '../../../../../style/variables';
 
 export const ChoroplethToolTip: React.SFC<{
@@ -26,7 +26,7 @@ export const ChoroplethToolTip: React.SFC<{
         )}
       </div>
       <div style={{ fontWeight: 'bold', fontSize: fontSizes.large }}>
-        {asTime(value)}
+        {asDuration(value)}
       </div>
       <div>
         (
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx
index 94f30a8a2325a6..b5894a9d91e4a0 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx
@@ -27,13 +27,13 @@ import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import {
   asInteger,
   tpmUnit,
-  TimeFormatter
+  TimeFormatter,
+  getDurationFormatter
 } from '../../../../utils/formatters';
 import { MLJobLink } from '../../Links/MachineLearningLinks/MLJobLink';
 import { LicenseContext } from '../../../../context/LicenseContext';
 import { TransactionLineChart } from './TransactionLineChart';
 import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
-import { getTimeFormatter } from '../../../../utils/formatters';
 import { DurationByCountryMap } from './DurationByCountryMap';
 import {
   TRANSACTION_PAGE_LOAD,
@@ -74,12 +74,14 @@ export class TransactionCharts extends Component<TransactionChartProps> {
   };
 
   public getResponseTimeTickFormatter = (formatter: TimeFormatter) => {
-    return (t: number) => formatter(t);
+    return (t: number) => formatter(t).formatted;
   };
 
   public getResponseTimeTooltipFormatter = (formatter: TimeFormatter) => {
     return (p: Coordinate) => {
-      return isValidCoordinateValue(p.y) ? formatter(p.y) : NOT_AVAILABLE_LABEL;
+      return isValidCoordinateValue(p.y)
+        ? formatter(p.y).formatted
+        : NOT_AVAILABLE_LABEL;
     };
   };
 
@@ -154,7 +156,7 @@ export class TransactionCharts extends Component<TransactionChartProps> {
     const { responseTimeSeries, tpmSeries } = charts;
     const { transactionType } = urlParams;
     const maxY = this.getMaxY(responseTimeSeries);
-    const formatter = getTimeFormatter(maxY);
+    const formatter = getDurationFormatter(maxY);
 
     return (
       <>
diff --git a/x-pack/legacy/plugins/apm/public/selectors/chartSelectors.ts b/x-pack/legacy/plugins/apm/public/selectors/chartSelectors.ts
index b15231e89365a3..75a558ac81a544 100644
--- a/x-pack/legacy/plugins/apm/public/selectors/chartSelectors.ts
+++ b/x-pack/legacy/plugins/apm/public/selectors/chartSelectors.ts
@@ -16,7 +16,7 @@ import {
   RectCoordinate,
   TimeSeries
 } from '../../typings/timeseries';
-import { asDecimal, asMillis, tpmUnit } from '../utils/formatters';
+import { asDecimal, tpmUnit, convertTo } from '../utils/formatters';
 import { IUrlParams } from '../context/UrlParamsContext/types';
 import { getEmptySeries } from '../components/shared/charts/CustomPlot/getEmptySeries';
 import { httpStatusCodeToColor } from '../utils/httpStatusCodeToColor';
@@ -70,6 +70,10 @@ export function getResponseTimeSeries({
 }: TimeSeriesAPIResponse) {
   const { overallAvgDuration } = apmTimeseries;
   const { avg, p95, p99 } = apmTimeseries.responseTimes;
+  const formattedDuration = convertTo({
+    unit: 'milliseconds',
+    microseconds: overallAvgDuration
+  }).formatted;
 
   const series: TimeSeries[] = [
     {
@@ -77,7 +81,7 @@ export function getResponseTimeSeries({
         defaultMessage: 'Avg.'
       }),
       data: avg,
-      legendValue: asMillis(overallAvgDuration),
+      legendValue: formattedDuration,
       type: 'linemark',
       color: theme.euiColorVis1
     },
diff --git a/x-pack/legacy/plugins/apm/public/utils/flattenObject.ts b/x-pack/legacy/plugins/apm/public/utils/flattenObject.ts
index 01a58ac03d0c3f..295ea1f9f900fd 100644
--- a/x-pack/legacy/plugins/apm/public/utils/flattenObject.ts
+++ b/x-pack/legacy/plugins/apm/public/utils/flattenObject.ts
@@ -5,6 +5,7 @@
  */
 
 import { compact, isObject } from 'lodash';
+import { Maybe } from '../../typings/common';
 
 export interface KeyValuePair {
   key: string;
@@ -12,7 +13,7 @@ export interface KeyValuePair {
 }
 
 export const flattenObject = (
-  item: Record<string, any | any[]> | null | undefined,
+  item: Maybe<Record<string, any | any[]>>,
   parentKey?: string
 ): KeyValuePair[] => {
   if (item) {
diff --git a/x-pack/legacy/plugins/apm/public/utils/formatters.ts b/x-pack/legacy/plugins/apm/public/utils/formatters.ts
deleted file mode 100644
index 34b552230fa77a..00000000000000
--- a/x-pack/legacy/plugins/apm/public/utils/formatters.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-/*
- * 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 numeral from '@elastic/numeral';
-import { i18n } from '@kbn/i18n';
-import { memoize } from 'lodash';
-import { NOT_AVAILABLE_LABEL } from '../../common/i18n';
-
-const HOURS_CUT_OFF = 3600000000; // 1 hour (in microseconds)
-const MINUTES_CUT_OFF = 60000000; // 1 minute (in microseconds)
-const SECONDS_CUT_OFF = 10 * 1000000; // 10 seconds (in microseconds)
-const MILLISECONDS_CUT_OFF = 10 * 1000; // 10 milliseconds (in microseconds)
-const SPACE = ' ';
-
-/*
- * value: time in microseconds
- * withUnit: add unit suffix
- * defaultValue: value to use if the specified is null/undefined
- */
-type FormatterValue = number | undefined | null;
-interface FormatterOptions {
-  withUnit?: boolean;
-  defaultValue?: string;
-}
-
-export function asHours(
-  value: FormatterValue,
-  { withUnit = true, defaultValue = NOT_AVAILABLE_LABEL }: FormatterOptions = {}
-) {
-  if (value == null) {
-    return defaultValue;
-  }
-  const hoursLabel =
-    SPACE +
-    i18n.translate('xpack.apm.formatters.hoursTimeUnitLabel', {
-      defaultMessage: 'h'
-    });
-  const formatted = asDecimal(value / 3600000000);
-  return `${formatted}${withUnit ? hoursLabel : ''}`;
-}
-
-export function asMinutes(
-  value: FormatterValue,
-  { withUnit = true, defaultValue = NOT_AVAILABLE_LABEL }: FormatterOptions = {}
-) {
-  if (value == null) {
-    return defaultValue;
-  }
-  const minutesLabel =
-    SPACE +
-    i18n.translate('xpack.apm.formatters.minutesTimeUnitLabel', {
-      defaultMessage: 'min'
-    });
-  const formatted = asDecimal(value / 60000000);
-  return `${formatted}${withUnit ? minutesLabel : ''}`;
-}
-
-export function asSeconds(
-  value: FormatterValue,
-  { withUnit = true, defaultValue = NOT_AVAILABLE_LABEL }: FormatterOptions = {}
-) {
-  if (value == null) {
-    return defaultValue;
-  }
-  const secondsLabel =
-    SPACE +
-    i18n.translate('xpack.apm.formatters.secondsTimeUnitLabel', {
-      defaultMessage: 's'
-    });
-  const formatted = asDecimal(value / 1000000);
-  return `${formatted}${withUnit ? secondsLabel : ''}`;
-}
-
-export function asMillis(
-  value: FormatterValue,
-  { withUnit = true, defaultValue = NOT_AVAILABLE_LABEL }: FormatterOptions = {}
-) {
-  if (value == null) {
-    return defaultValue;
-  }
-
-  const millisLabel =
-    SPACE +
-    i18n.translate('xpack.apm.formatters.millisTimeUnitLabel', {
-      defaultMessage: 'ms'
-    });
-  const formatted = asInteger(value / 1000);
-  return `${formatted}${withUnit ? millisLabel : ''}`;
-}
-
-export function asMicros(
-  value: FormatterValue,
-  { withUnit = true, defaultValue = NOT_AVAILABLE_LABEL }: FormatterOptions = {}
-) {
-  if (value == null) {
-    return defaultValue;
-  }
-
-  const microsLabel =
-    SPACE +
-    i18n.translate('xpack.apm.formatters.microsTimeUnitLabel', {
-      defaultMessage: 'μs'
-    });
-  const formatted = asInteger(value);
-  return `${formatted}${withUnit ? microsLabel : ''}`;
-}
-
-export type TimeFormatter = (
-  value: FormatterValue,
-  options?: FormatterOptions
-) => string;
-
-type TimeFormatterBuilder = (max: number) => TimeFormatter;
-
-export const getTimeFormatter: TimeFormatterBuilder = memoize((max: number) => {
-  const unit = timeUnit(max);
-  switch (unit) {
-    case 'h':
-      return asHours;
-    case 'm':
-      return asMinutes;
-    case 's':
-      return asSeconds;
-    case 'ms':
-      return asMillis;
-    case 'us':
-      return asMicros;
-  }
-});
-
-export function timeUnit(max: number) {
-  if (max > HOURS_CUT_OFF) {
-    return 'h';
-  } else if (max > MINUTES_CUT_OFF) {
-    return 'm';
-  } else if (max > SECONDS_CUT_OFF) {
-    return 's';
-  } else if (max > MILLISECONDS_CUT_OFF) {
-    return 'ms';
-  } else {
-    return 'us';
-  }
-}
-
-export function asTime(
-  value: FormatterValue,
-  { withUnit = true, defaultValue = NOT_AVAILABLE_LABEL }: FormatterOptions = {}
-) {
-  if (value == null) {
-    return defaultValue;
-  }
-  const formatter = getTimeFormatter(value);
-  return formatter(value, { withUnit, defaultValue });
-}
-
-export function asDecimal(value: number) {
-  return numeral(value).format('0,0.0');
-}
-
-export function asInteger(value: number) {
-  return numeral(value).format('0,0');
-}
-
-export function tpmUnit(type?: string) {
-  return type === 'request'
-    ? i18n.translate('xpack.apm.formatters.requestsPerMinLabel', {
-        defaultMessage: 'rpm'
-      })
-    : i18n.translate('xpack.apm.formatters.transactionsPerMinLabel', {
-        defaultMessage: 'tpm'
-      });
-}
-
-export function asPercent(
-  numerator: number,
-  denominator: number | undefined,
-  fallbackResult = ''
-) {
-  if (!denominator || isNaN(numerator)) {
-    return fallbackResult;
-  }
-
-  const decimal = numerator / denominator;
-  return numeral(decimal).format('0.0%');
-}
-
-function asKilobytes(value: number) {
-  return `${asDecimal(value / 1000)} KB`;
-}
-
-function asMegabytes(value: number) {
-  return `${asDecimal(value / 1e6)} MB`;
-}
-
-function asGigabytes(value: number) {
-  return `${asDecimal(value / 1e9)} GB`;
-}
-
-function asTerabytes(value: number) {
-  return `${asDecimal(value / 1e12)} TB`;
-}
-
-function asBytes(value: number) {
-  return `${asDecimal(value)} B`;
-}
-
-const bailIfNumberInvalid = (cb: (val: number) => string) => {
-  return (val: number | null | undefined) => {
-    if (val === null || val === undefined || isNaN(val)) {
-      return '';
-    }
-    return cb(val);
-  };
-};
-
-export const asDynamicBytes = bailIfNumberInvalid((value: number) => {
-  return unmemoizedFixedByteFormatter(value)(value);
-});
-
-const unmemoizedFixedByteFormatter = (max: number) => {
-  if (max > 1e12) {
-    return asTerabytes;
-  }
-
-  if (max > 1e9) {
-    return asGigabytes;
-  }
-
-  if (max > 1e6) {
-    return asMegabytes;
-  }
-
-  if (max > 1000) {
-    return asKilobytes;
-  }
-
-  return asBytes;
-};
-
-export const getFixedByteFormatter = memoize((max: number) => {
-  const formatter = unmemoizedFixedByteFormatter(max);
-
-  return bailIfNumberInvalid(formatter);
-});
diff --git a/x-pack/legacy/plugins/apm/public/utils/formatters/__test__/datetime.test.ts b/x-pack/legacy/plugins/apm/public/utils/formatters/__test__/datetime.test.ts
new file mode 100644
index 00000000000000..bec9cede00a2be
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/utils/formatters/__test__/datetime.test.ts
@@ -0,0 +1,146 @@
+/*
+ * 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 moment from 'moment-timezone';
+import { asRelativeDateTimeRange, asAbsoluteDateTime } from '../datetime';
+
+describe('date time formatters', () => {
+  describe('asRelativeDateTimeRange', () => {
+    beforeAll(() => {
+      moment.tz.setDefault('Europe/Amsterdam');
+    });
+    afterAll(() => moment.tz.setDefault(''));
+    const formatDateToTimezone = (dateTimeString: string) =>
+      moment(dateTimeString).valueOf();
+
+    describe('YYYY - YYYY', () => {
+      it('range: 10 years', () => {
+        const start = formatDateToTimezone('2000-01-01 10:01:01');
+        const end = formatDateToTimezone('2010-01-01 10:01:01');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('2000 - 2010');
+      });
+      it('range: 5 years', () => {
+        const start = formatDateToTimezone('2010-01-01 10:01:01');
+        const end = formatDateToTimezone('2015-01-01 10:01:01');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('2010 - 2015');
+      });
+    });
+    describe('MMM YYYY - MMM YYYY', () => {
+      it('range: 4 years ', () => {
+        const start = formatDateToTimezone('2010-01-01 10:01:01');
+        const end = formatDateToTimezone('2014-04-01 10:01:01');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('Jan 2010 - Apr 2014');
+      });
+      it('range: 6 months ', () => {
+        const start = formatDateToTimezone('2019-01-01 10:01:01');
+        const end = formatDateToTimezone('2019-07-01 10:01:01');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('Jan 2019 - Jul 2019');
+      });
+    });
+    describe('MMM D, YYYY - MMM D, YYYY', () => {
+      it('range: 2 days', () => {
+        const start = formatDateToTimezone('2019-10-01 10:01:01');
+        const end = formatDateToTimezone('2019-10-05 10:01:01');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('Oct 1, 2019 - Oct 5, 2019');
+      });
+      it('range: 1 day', () => {
+        const start = formatDateToTimezone('2019-10-01 10:01:01');
+        const end = formatDateToTimezone('2019-10-03 10:01:01');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('Oct 1, 2019 - Oct 3, 2019');
+      });
+    });
+    describe('MMM D, YYYY, HH:mm - HH:mm (UTC)', () => {
+      it('range: 9 hours', () => {
+        const start = formatDateToTimezone('2019-10-29 10:01:01');
+        const end = formatDateToTimezone('2019-10-29 19:01:01');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('Oct 29, 2019, 10:01 - 19:01 (UTC+1)');
+      });
+      it('range: 5 hours', () => {
+        const start = formatDateToTimezone('2019-10-29 10:01:01');
+        const end = formatDateToTimezone('2019-10-29 15:01:01');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('Oct 29, 2019, 10:01 - 15:01 (UTC+1)');
+      });
+    });
+    describe('MMM D, YYYY, HH:mm:ss - HH:mm:ss (UTC)', () => {
+      it('range: 14 minutes', () => {
+        const start = formatDateToTimezone('2019-10-29 10:01:01');
+        const end = formatDateToTimezone('2019-10-29 10:15:01');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('Oct 29, 2019, 10:01:01 - 10:15:01 (UTC+1)');
+      });
+      it('range: 5 minutes', () => {
+        const start = formatDateToTimezone('2019-10-29 10:01:01');
+        const end = formatDateToTimezone('2019-10-29 10:06:01');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('Oct 29, 2019, 10:01:01 - 10:06:01 (UTC+1)');
+      });
+    });
+    describe('MMM D, YYYY, HH:mm:ss.SSS - HH:mm:ss.SSS (UTC)', () => {
+      it('range: 9 seconds', () => {
+        const start = formatDateToTimezone('2019-10-29 10:01:01.001');
+        const end = formatDateToTimezone('2019-10-29 10:01:10.002');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual(
+          'Oct 29, 2019, 10:01:01.001 - 10:01:10.002 (UTC+1)'
+        );
+      });
+      it('range: 1 second', () => {
+        const start = formatDateToTimezone('2019-10-29 10:01:01.001');
+        const end = formatDateToTimezone('2019-10-29 10:01:02.002');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual(
+          'Oct 29, 2019, 10:01:01.001 - 10:01:02.002 (UTC+1)'
+        );
+      });
+    });
+  });
+
+  describe('asAbsoluteDateTime', () => {
+    afterAll(() => moment.tz.setDefault(''));
+
+    it('should add a leading plus for timezones with positive UTC offset', () => {
+      moment.tz.setDefault('Europe/Copenhagen');
+      expect(asAbsoluteDateTime(1559390400000, 'minutes')).toBe(
+        'Jun 1, 2019, 14:00 (UTC+2)'
+      );
+    });
+
+    it('should add a leading minus for timezones with negative UTC offset', () => {
+      moment.tz.setDefault('America/Los_Angeles');
+      expect(asAbsoluteDateTime(1559390400000, 'minutes')).toBe(
+        'Jun 1, 2019, 05:00 (UTC-7)'
+      );
+    });
+
+    it('should use default UTC offset formatting when offset contains minutes', () => {
+      moment.tz.setDefault('Canada/Newfoundland');
+      expect(asAbsoluteDateTime(1559390400000, 'minutes')).toBe(
+        'Jun 1, 2019, 09:30 (UTC-02:30)'
+      );
+    });
+
+    it('should respect DST', () => {
+      moment.tz.setDefault('Europe/Copenhagen');
+      const timeWithDST = 1559390400000; //  Jun 1, 2019
+      const timeWithoutDST = 1575201600000; //  Dec 1, 2019
+
+      expect(asAbsoluteDateTime(timeWithDST)).toBe(
+        'Jun 1, 2019, 14:00:00.000 (UTC+2)'
+      );
+
+      expect(asAbsoluteDateTime(timeWithoutDST)).toBe(
+        'Dec 1, 2019, 13:00:00.000 (UTC+1)'
+      );
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/apm/public/utils/formatters/__test__/duration.test.ts b/x-pack/legacy/plugins/apm/public/utils/formatters/__test__/duration.test.ts
new file mode 100644
index 00000000000000..014ecad01d4d70
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/utils/formatters/__test__/duration.test.ts
@@ -0,0 +1,131 @@
+/*
+ * 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 { asDuration, convertTo, toMicroseconds } from '../duration';
+
+describe('duration formatters', () => {
+  describe('asDuration', () => {
+    it('formats correctly with defaults', () => {
+      expect(asDuration(null)).toEqual('N/A');
+      expect(asDuration(undefined)).toEqual('N/A');
+      expect(asDuration(0)).toEqual('0 μs');
+      expect(asDuration(1)).toEqual('1 μs');
+      expect(asDuration(toMicroseconds(1, 'milliseconds'))).toEqual('1,000 μs');
+      expect(asDuration(toMicroseconds(1000, 'milliseconds'))).toEqual(
+        '1,000 ms'
+      );
+      expect(asDuration(toMicroseconds(10000, 'milliseconds'))).toEqual(
+        '10,000 ms'
+      );
+      expect(asDuration(toMicroseconds(20, 'seconds'))).toEqual('20.0 s');
+      expect(asDuration(toMicroseconds(10, 'minutes'))).toEqual('10.0 min');
+      expect(asDuration(toMicroseconds(1, 'hours'))).toEqual('60.0 min');
+      expect(asDuration(toMicroseconds(1.5, 'hours'))).toEqual('1.5 h');
+    });
+
+    it('falls back to default value', () => {
+      expect(asDuration(undefined, { defaultValue: 'nope' })).toEqual('nope');
+    });
+  });
+
+  describe('convertTo', () => {
+    it('hours', () => {
+      const unit = 'hours';
+      const oneHourAsMicro = toMicroseconds(1, 'hours');
+      const twoHourAsMicro = toMicroseconds(2, 'hours');
+      expect(convertTo({ unit, microseconds: oneHourAsMicro })).toEqual({
+        unit: 'h',
+        value: '1.0',
+        formatted: '1.0 h'
+      });
+      expect(convertTo({ unit, microseconds: twoHourAsMicro })).toEqual({
+        unit: 'h',
+        value: '2.0',
+        formatted: '2.0 h'
+      });
+      expect(
+        convertTo({ unit, microseconds: null, defaultValue: '1.2' })
+      ).toEqual({ value: '1.2', formatted: '1.2' });
+    });
+
+    it('minutes', () => {
+      const unit = 'minutes';
+      const oneHourAsMicro = toMicroseconds(1, 'hours');
+      const twoHourAsMicro = toMicroseconds(2, 'hours');
+      expect(convertTo({ unit, microseconds: oneHourAsMicro })).toEqual({
+        unit: 'min',
+        value: '60.0',
+        formatted: '60.0 min'
+      });
+      expect(convertTo({ unit, microseconds: twoHourAsMicro })).toEqual({
+        unit: 'min',
+        value: '120.0',
+        formatted: '120.0 min'
+      });
+      expect(
+        convertTo({ unit, microseconds: null, defaultValue: '10' })
+      ).toEqual({ value: '10', formatted: '10' });
+    });
+
+    it('seconds', () => {
+      const unit = 'seconds';
+      const twentySecondsAsMicro = toMicroseconds(20, 'seconds');
+      const thirtyFiveSecondsAsMicro = toMicroseconds(35, 'seconds');
+      expect(convertTo({ unit, microseconds: twentySecondsAsMicro })).toEqual({
+        unit: 's',
+        value: '20.0',
+        formatted: '20.0 s'
+      });
+      expect(
+        convertTo({ unit, microseconds: thirtyFiveSecondsAsMicro })
+      ).toEqual({ unit: 's', value: '35.0', formatted: '35.0 s' });
+      expect(
+        convertTo({ unit, microseconds: null, defaultValue: '10' })
+      ).toEqual({ value: '10', formatted: '10' });
+    });
+
+    it('milliseconds', () => {
+      const unit = 'milliseconds';
+      const twentyMilliAsMicro = toMicroseconds(20, 'milliseconds');
+      const thirtyFiveMilliAsMicro = toMicroseconds(35, 'milliseconds');
+      expect(convertTo({ unit, microseconds: twentyMilliAsMicro })).toEqual({
+        unit: 'ms',
+        value: '20',
+        formatted: '20 ms'
+      });
+      expect(
+        convertTo({ unit, microseconds: thirtyFiveMilliAsMicro })
+      ).toEqual({ unit: 'ms', value: '35', formatted: '35 ms' });
+      expect(
+        convertTo({ unit, microseconds: null, defaultValue: '10' })
+      ).toEqual({ value: '10', formatted: '10' });
+    });
+
+    it('microseconds', () => {
+      const unit = 'microseconds';
+      expect(convertTo({ unit, microseconds: 20 })).toEqual({
+        unit: 'μs',
+        value: '20',
+        formatted: '20 μs'
+      });
+      expect(convertTo({ unit, microseconds: 35 })).toEqual({
+        unit: 'μs',
+        value: '35',
+        formatted: '35 μs'
+      });
+      expect(
+        convertTo({ unit, microseconds: null, defaultValue: '10' })
+      ).toEqual({ value: '10', formatted: '10' });
+    });
+  });
+  describe('toMicroseconds', () => {
+    it('transformes to microseconds', () => {
+      expect(toMicroseconds(1, 'hours')).toEqual(3600000000);
+      expect(toMicroseconds(10, 'minutes')).toEqual(600000000);
+      expect(toMicroseconds(10, 'seconds')).toEqual(10000000);
+      expect(toMicroseconds(10, 'milliseconds')).toEqual(10000);
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/apm/public/utils/formatters/__test__/formatters.test.ts b/x-pack/legacy/plugins/apm/public/utils/formatters/__test__/formatters.test.ts
new file mode 100644
index 00000000000000..f6ed88a850a5b2
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/utils/formatters/__test__/formatters.test.ts
@@ -0,0 +1,31 @@
+/*
+ * 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 { asPercent } from '../formatters';
+
+describe('formatters', () => {
+  describe('asPercent', () => {
+    it('should divide and format item as percent', () => {
+      expect(asPercent(3725, 10000, 'n/a')).toEqual('37.3%');
+    });
+
+    it('should format when numerator is 0', () => {
+      expect(asPercent(0, 1, 'n/a')).toEqual('0.0%');
+    });
+
+    it('should return fallback when denominator is undefined', () => {
+      expect(asPercent(3725, undefined, 'n/a')).toEqual('n/a');
+    });
+
+    it('should return fallback when denominator is 0 ', () => {
+      expect(asPercent(3725, 0, 'n/a')).toEqual('n/a');
+    });
+
+    it('should return fallback when numerator or denominator is NaN', () => {
+      expect(asPercent(3725, NaN, 'n/a')).toEqual('n/a');
+      expect(asPercent(NaN, 10000, 'n/a')).toEqual('n/a');
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/apm/public/utils/__test__/formatters.test.ts b/x-pack/legacy/plugins/apm/public/utils/formatters/__test__/size.test.ts
similarity index 63%
rename from x-pack/legacy/plugins/apm/public/utils/__test__/formatters.test.ts
rename to x-pack/legacy/plugins/apm/public/utils/formatters/__test__/size.test.ts
index 093624240565f0..07d3d0c1eb08f6 100644
--- a/x-pack/legacy/plugins/apm/public/utils/__test__/formatters.test.ts
+++ b/x-pack/legacy/plugins/apm/public/utils/formatters/__test__/size.test.ts
@@ -3,61 +3,9 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { getFixedByteFormatter, asDynamicBytes } from '../size';
 
-import {
-  asPercent,
-  asTime,
-  getFixedByteFormatter,
-  asDynamicBytes
-} from '../formatters';
-
-describe('formatters', () => {
-  describe('asTime', () => {
-    it('formats correctly with defaults', () => {
-      expect(asTime(null)).toEqual('N/A');
-      expect(asTime(undefined)).toEqual('N/A');
-      expect(asTime(0)).toEqual('0 μs');
-      expect(asTime(1)).toEqual('1 μs');
-      expect(asTime(1000)).toEqual('1,000 μs');
-      expect(asTime(1000 * 1000)).toEqual('1,000 ms');
-      expect(asTime(1000 * 1000 * 10)).toEqual('10,000 ms');
-      expect(asTime(1000 * 1000 * 20)).toEqual('20.0 s');
-      expect(asTime(60000000 * 10)).toEqual('10.0 min');
-      expect(asTime(3600000000 * 1.5)).toEqual('1.5 h');
-    });
-
-    it('formats without unit', () => {
-      expect(asTime(1000, { withUnit: false })).toEqual('1,000');
-    });
-
-    it('falls back to default value', () => {
-      expect(asTime(undefined, { defaultValue: 'nope' })).toEqual('nope');
-    });
-  });
-
-  describe('asPercent', () => {
-    it('should divide and format item as percent', () => {
-      expect(asPercent(3725, 10000, 'n/a')).toEqual('37.3%');
-    });
-
-    it('should format when numerator is 0', () => {
-      expect(asPercent(0, 1, 'n/a')).toEqual('0.0%');
-    });
-
-    it('should return fallback when denominator is undefined', () => {
-      expect(asPercent(3725, undefined, 'n/a')).toEqual('n/a');
-    });
-
-    it('should return fallback when denominator is 0 ', () => {
-      expect(asPercent(3725, 0, 'n/a')).toEqual('n/a');
-    });
-
-    it('should return fallback when numerator or denominator is NaN', () => {
-      expect(asPercent(3725, NaN, 'n/a')).toEqual('n/a');
-      expect(asPercent(NaN, 10000, 'n/a')).toEqual('n/a');
-    });
-  });
-
+describe('size formatters', () => {
   describe('byte formatting', () => {
     const bytes = 10;
     const kb = 1000 + 1;
diff --git a/x-pack/legacy/plugins/apm/public/utils/formatters/datetime.ts b/x-pack/legacy/plugins/apm/public/utils/formatters/datetime.ts
new file mode 100644
index 00000000000000..98483a0351f069
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/utils/formatters/datetime.ts
@@ -0,0 +1,149 @@
+/*
+ * 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 moment from 'moment-timezone';
+
+/**
+ * Returns the timezone set on momentTime.
+ * (UTC+offset) when offset if bigger than 0.
+ * (UTC-offset) when offset if lower than 0.
+ * @param momentTime Moment
+ */
+function formatTimezone(momentTime: moment.Moment) {
+  const DEFAULT_TIMEZONE_FORMAT = 'Z';
+
+  const utcOffsetHours = momentTime.utcOffset() / 60;
+
+  const customTimezoneFormat =
+    utcOffsetHours > 0 ? `+${utcOffsetHours}` : utcOffsetHours;
+
+  const utcOffsetFormatted = Number.isInteger(utcOffsetHours)
+    ? customTimezoneFormat
+    : DEFAULT_TIMEZONE_FORMAT;
+
+  return momentTime.format(`(UTC${utcOffsetFormatted})`);
+}
+
+export type TimeUnit = 'hours' | 'minutes' | 'seconds' | 'milliseconds';
+function getTimeFormat(timeUnit: TimeUnit) {
+  switch (timeUnit) {
+    case 'hours':
+      return 'HH';
+    case 'minutes':
+      return 'HH:mm';
+    case 'seconds':
+      return 'HH:mm:ss';
+    case 'milliseconds':
+      return 'HH:mm:ss.SSS';
+    default:
+      return '';
+  }
+}
+
+type DateUnit = 'days' | 'months' | 'years';
+function getDateFormat(dateUnit: DateUnit) {
+  switch (dateUnit) {
+    case 'years':
+      return 'YYYY';
+    case 'months':
+      return 'MMM YYYY';
+    case 'days':
+      return 'MMM D, YYYY';
+    default:
+      return '';
+  }
+}
+
+function getFormatsAccordingToDateDifference(
+  momentStart: moment.Moment,
+  momentEnd: moment.Moment
+) {
+  const getDateDifference = (unitOfTime: DateUnit | TimeUnit) =>
+    momentEnd.diff(momentStart, unitOfTime);
+
+  if (getDateDifference('years') >= 5) {
+    return { dateFormat: getDateFormat('years') };
+  }
+
+  if (getDateDifference('months') >= 5) {
+    return { dateFormat: getDateFormat('months') };
+  }
+
+  const dateFormatWithDays = getDateFormat('days');
+  if (getDateDifference('days') > 1) {
+    return { dateFormat: dateFormatWithDays };
+  }
+
+  if (getDateDifference('hours') >= 5) {
+    return {
+      dateFormat: dateFormatWithDays,
+      timeFormat: getTimeFormat('minutes')
+    };
+  }
+
+  if (getDateDifference('minutes') >= 5) {
+    return {
+      dateFormat: dateFormatWithDays,
+      timeFormat: getTimeFormat('seconds')
+    };
+  }
+
+  return {
+    dateFormat: dateFormatWithDays,
+    timeFormat: getTimeFormat('milliseconds')
+  };
+}
+
+export function asAbsoluteDateTime(
+  time: number,
+  timeUnit: TimeUnit = 'milliseconds'
+) {
+  const momentTime = moment(time);
+  const formattedTz = formatTimezone(momentTime);
+
+  return momentTime.format(
+    `${getDateFormat('days')}, ${getTimeFormat(timeUnit)} ${formattedTz}`
+  );
+}
+
+/**
+ *
+ * Returns the dates formatted according to the difference between the two dates:
+ *
+ * | Difference     |           Format                               |
+ * | -------------- |:----------------------------------------------:|
+ * | >= 5 years     | YYYY - YYYY                                    |
+ * | >= 5 months    | MMM YYYY - MMM YYYY                            |
+ * | > 1 day        | MMM D, YYYY - MMM D, YYYY                      |
+ * | >= 5 hours     | MMM D, YYYY, HH:mm - HH:mm (UTC)               |
+ * | >= 5 minutes   | MMM D, YYYY, HH:mm:ss - HH:mm:ss (UTC)         |
+ * | default        | MMM D, YYYY, HH:mm:ss.SSS - HH:mm:ss.SSS (UTC) |
+ *
+ * @param start timestamp
+ * @param end timestamp
+ */
+export function asRelativeDateTimeRange(start: number, end: number) {
+  const momentStartTime = moment(start);
+  const momentEndTime = moment(end);
+
+  const { dateFormat, timeFormat } = getFormatsAccordingToDateDifference(
+    momentStartTime,
+    momentEndTime
+  );
+
+  if (timeFormat) {
+    const startFormatted = momentStartTime.format(
+      `${dateFormat}, ${timeFormat}`
+    );
+    const endFormatted = momentEndTime.format(timeFormat);
+    const formattedTz = formatTimezone(momentStartTime);
+    return `${startFormatted} - ${endFormatted} ${formattedTz}`;
+  }
+
+  const startFormatted = momentStartTime.format(dateFormat);
+  const endFormatted = momentEndTime.format(dateFormat);
+  return `${startFormatted} - ${endFormatted}`;
+}
diff --git a/x-pack/legacy/plugins/apm/public/utils/formatters/duration.ts b/x-pack/legacy/plugins/apm/public/utils/formatters/duration.ts
new file mode 100644
index 00000000000000..39341e1ff4443b
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/utils/formatters/duration.ts
@@ -0,0 +1,153 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import moment from 'moment';
+import { memoize } from 'lodash';
+import { NOT_AVAILABLE_LABEL } from '../../../common/i18n';
+import { asDecimal, asInteger } from './formatters';
+import { TimeUnit } from './datetime';
+import { Maybe } from '../../../typings/common';
+
+interface FormatterOptions {
+  defaultValue?: string;
+}
+
+type DurationTimeUnit = TimeUnit | 'microseconds';
+
+interface DurationUnit {
+  [unit: string]: {
+    label: string;
+    convert: (value: number) => string;
+  };
+}
+
+interface ConvertedDuration {
+  value: string;
+  unit?: string;
+  formatted: string;
+}
+
+export type TimeFormatter = (
+  value: Maybe<number>,
+  options?: FormatterOptions
+) => ConvertedDuration;
+
+type TimeFormatterBuilder = (max: number) => TimeFormatter;
+
+const durationUnit: DurationUnit = {
+  hours: {
+    label: i18n.translate('xpack.apm.formatters.hoursTimeUnitLabel', {
+      defaultMessage: 'h'
+    }),
+    convert: (value: number) =>
+      asDecimal(moment.duration(value / 1000).asHours())
+  },
+  minutes: {
+    label: i18n.translate('xpack.apm.formatters.minutesTimeUnitLabel', {
+      defaultMessage: 'min'
+    }),
+    convert: (value: number) =>
+      asDecimal(moment.duration(value / 1000).asMinutes())
+  },
+  seconds: {
+    label: i18n.translate('xpack.apm.formatters.secondsTimeUnitLabel', {
+      defaultMessage: 's'
+    }),
+    convert: (value: number) =>
+      asDecimal(moment.duration(value / 1000).asSeconds())
+  },
+  milliseconds: {
+    label: i18n.translate('xpack.apm.formatters.millisTimeUnitLabel', {
+      defaultMessage: 'ms'
+    }),
+    convert: (value: number) =>
+      asInteger(moment.duration(value / 1000).asMilliseconds())
+  },
+  microseconds: {
+    label: i18n.translate('xpack.apm.formatters.microsTimeUnitLabel', {
+      defaultMessage: 'μs'
+    }),
+    convert: (value: number) => asInteger(value)
+  }
+};
+
+/**
+ * Converts a microseconds value into the unit defined.
+ *
+ * @param param0
+ * { unit: "milliseconds" | "hours" | "minutes" | "seconds" | "microseconds", microseconds, defaultValue }
+ *
+ * @returns object { value, unit, formatted }
+ */
+export function convertTo({
+  unit,
+  microseconds,
+  defaultValue = NOT_AVAILABLE_LABEL
+}: {
+  unit: DurationTimeUnit;
+  microseconds: Maybe<number>;
+  defaultValue?: string;
+}): ConvertedDuration {
+  const duration = durationUnit[unit];
+  if (!duration || microseconds == null) {
+    return { value: defaultValue, formatted: defaultValue };
+  }
+
+  const convertedValue = duration.convert(microseconds);
+  return {
+    value: convertedValue,
+    unit: duration.label,
+    formatted: `${convertedValue} ${duration.label}`
+  };
+}
+
+export const toMicroseconds = (value: number, timeUnit: TimeUnit) =>
+  moment.duration(value, timeUnit).asMilliseconds() * 1000;
+
+function getDurationUnitKey(max: number): DurationTimeUnit {
+  if (max > toMicroseconds(1, 'hours')) {
+    return 'hours';
+  }
+  if (max > toMicroseconds(1, 'minutes')) {
+    return 'minutes';
+  }
+  if (max > toMicroseconds(10, 'seconds')) {
+    return 'seconds';
+  }
+  if (max > toMicroseconds(10, 'milliseconds')) {
+    return 'milliseconds';
+  }
+  return 'microseconds';
+}
+
+export const getDurationFormatter: TimeFormatterBuilder = memoize(
+  (max: number) => {
+    const unit = getDurationUnitKey(max);
+    return (value, { defaultValue }: FormatterOptions = {}) => {
+      return convertTo({ unit, microseconds: value, defaultValue });
+    };
+  }
+);
+
+/**
+ * Converts value and returns it formatted - 00 unit
+ *
+ * @param value
+ * @param param1 { defaultValue }
+ * @returns formated value - 00 unit
+ */
+export function asDuration(
+  value: Maybe<number>,
+  { defaultValue = NOT_AVAILABLE_LABEL }: FormatterOptions = {}
+) {
+  if (value == null) {
+    return defaultValue;
+  }
+
+  const formatter = getDurationFormatter(value);
+  return formatter(value, { defaultValue }).formatted;
+}
diff --git a/x-pack/legacy/plugins/apm/public/utils/formatters/formatters.ts b/x-pack/legacy/plugins/apm/public/utils/formatters/formatters.ts
new file mode 100644
index 00000000000000..630b6a0a18dbf7
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/utils/formatters/formatters.ts
@@ -0,0 +1,38 @@
+/*
+ * 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 numeral from '@elastic/numeral';
+import { i18n } from '@kbn/i18n';
+
+export function asDecimal(value: number) {
+  return numeral(value).format('0,0.0');
+}
+
+export function asInteger(value: number) {
+  return numeral(value).format('0,0');
+}
+
+export function tpmUnit(type?: string) {
+  return type === 'request'
+    ? i18n.translate('xpack.apm.formatters.requestsPerMinLabel', {
+        defaultMessage: 'rpm'
+      })
+    : i18n.translate('xpack.apm.formatters.transactionsPerMinLabel', {
+        defaultMessage: 'tpm'
+      });
+}
+
+export function asPercent(
+  numerator: number,
+  denominator: number | undefined,
+  fallbackResult = ''
+) {
+  if (!denominator || isNaN(numerator)) {
+    return fallbackResult;
+  }
+
+  const decimal = numerator / denominator;
+  return numeral(decimal).format('0.0%');
+}
diff --git a/x-pack/legacy/plugins/apm/public/utils/formatters/index.ts b/x-pack/legacy/plugins/apm/public/utils/formatters/index.ts
new file mode 100644
index 00000000000000..4fedd55ff1e893
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/utils/formatters/index.ts
@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export * from './formatters';
+export * from './datetime';
+export * from './duration';
+export * from './size';
diff --git a/x-pack/legacy/plugins/apm/public/utils/formatters/size.ts b/x-pack/legacy/plugins/apm/public/utils/formatters/size.ts
new file mode 100644
index 00000000000000..2cdf8af1d46de8
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/utils/formatters/size.ts
@@ -0,0 +1,67 @@
+/*
+ * 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 { memoize } from 'lodash';
+import { asDecimal } from './formatters';
+import { Maybe } from '../../../typings/common';
+
+function asKilobytes(value: number) {
+  return `${asDecimal(value / 1000)} KB`;
+}
+
+function asMegabytes(value: number) {
+  return `${asDecimal(value / 1e6)} MB`;
+}
+
+function asGigabytes(value: number) {
+  return `${asDecimal(value / 1e9)} GB`;
+}
+
+function asTerabytes(value: number) {
+  return `${asDecimal(value / 1e12)} TB`;
+}
+
+function asBytes(value: number) {
+  return `${asDecimal(value)} B`;
+}
+
+const bailIfNumberInvalid = (cb: (val: number) => string) => {
+  return (val: Maybe<number>) => {
+    if (val === null || val === undefined || isNaN(val)) {
+      return '';
+    }
+    return cb(val);
+  };
+};
+
+export const getFixedByteFormatter = memoize((max: number) => {
+  const formatter = unmemoizedFixedByteFormatter(max);
+
+  return bailIfNumberInvalid(formatter);
+});
+
+export const asDynamicBytes = bailIfNumberInvalid((value: number) => {
+  return unmemoizedFixedByteFormatter(value)(value);
+});
+
+const unmemoizedFixedByteFormatter = (max: number) => {
+  if (max > 1e12) {
+    return asTerabytes;
+  }
+
+  if (max > 1e9) {
+    return asGigabytes;
+  }
+
+  if (max > 1e6) {
+    return asMegabytes;
+  }
+
+  if (max > 1000) {
+    return asKilobytes;
+  }
+
+  return asBytes;
+};
diff --git a/x-pack/legacy/plugins/apm/public/utils/isValidCoordinateValue.ts b/x-pack/legacy/plugins/apm/public/utils/isValidCoordinateValue.ts
index 411d03fce349d6..c36efc232b7824 100644
--- a/x-pack/legacy/plugins/apm/public/utils/isValidCoordinateValue.ts
+++ b/x-pack/legacy/plugins/apm/public/utils/isValidCoordinateValue.ts
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { Maybe } from '../../typings/common';
 
-export const isValidCoordinateValue = (
-  value: number | null | undefined
-): value is number => value !== null && value !== undefined;
+export const isValidCoordinateValue = (value: Maybe<number>): value is number =>
+  value !== null && value !== undefined;
diff --git a/x-pack/legacy/plugins/apm/typings/common.d.ts b/x-pack/legacy/plugins/apm/typings/common.d.ts
index d79b05ed99b496..b9064980bd6577 100644
--- a/x-pack/legacy/plugins/apm/typings/common.d.ts
+++ b/x-pack/legacy/plugins/apm/typings/common.d.ts
@@ -27,3 +27,5 @@ export type PromiseReturnType<Func> = Func extends (
 ) => Promise<infer Value>
   ? Value
   : Func;
+
+export type Maybe<T> = T | null | undefined;
diff --git a/x-pack/legacy/plugins/apm/typings/timeseries.ts b/x-pack/legacy/plugins/apm/typings/timeseries.ts
index 9b9f7dcc2c8207..d64486d8e71e91 100644
--- a/x-pack/legacy/plugins/apm/typings/timeseries.ts
+++ b/x-pack/legacy/plugins/apm/typings/timeseries.ts
@@ -3,10 +3,11 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { Maybe } from '../typings/common';
 
 export interface Coordinate {
   x: number;
-  y: number | null | undefined;
+  y: Maybe<number>;
 }
 
 export interface RectCoordinate {
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js b/x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
index cc1d2bc53a9df6..7f0b25e7e25af8 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
@@ -57,6 +57,8 @@ MSG message-id=<%{GREEDYDATA}>`;
         <EuiPanel paddingSize="s">
           <EuiCodeEditor
             width="100%"
+            theme="textmate"
+            mode="text"
             value={value}
             onChange={onChange}
             setOptions={{
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js b/x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js
index 19335a88e9b877..3b283d7698ec42 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js
@@ -28,6 +28,8 @@ export function EventInput({ value, onChange }) {
       <EuiPanel paddingSize="s">
         <EuiCodeEditor
           width="100%"
+          theme="textmate"
+          mode="text"
           value={value}
           onChange={onChange}
           setOptions={{
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js b/x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js
index f669ac7a61fddf..72d2958c16b834 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js
@@ -27,6 +27,7 @@ export function EventOutput({ value }) {
       <EuiPanel paddingSize="s">
         <EuiCodeEditor
           mode="json"
+          theme="textmate"
           isReadOnly
           width="100%"
           height="340px"
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/brace_imports.ts b/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/brace_imports.ts
new file mode 100644
index 00000000000000..cea15c5e3c8d09
--- /dev/null
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/brace_imports.ts
@@ -0,0 +1,9 @@
+/*
+ * 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 'brace/mode/json';
+import 'brace/mode/text';
+import 'brace/theme/textmate';
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/grok_debugger.js b/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/grok_debugger.js
index 2a9fa499f37ea9..7a6bf76241d25b 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/grok_debugger.js
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/grok_debugger.js
@@ -5,6 +5,9 @@
  */
 import React from 'react';
 import { isEmpty } from 'lodash';
+
+import './brace_imports';
+
 import {
   EuiForm,
   EuiButton,
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js b/x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
index 09a6e100d9f88e..5e523e9b92d87d 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
@@ -29,6 +29,7 @@ export function PatternInput({ value, onChange }) {
       <EuiPanel paddingSize="s">
         <EuiCodeEditor
           width="100%"
+          theme="textmate"
           value={value}
           onChange={onChange}
           mode={new GrokMode()}
diff --git a/x-pack/legacy/plugins/ml/common/constants/index_patterns.ts b/x-pack/legacy/plugins/ml/common/constants/index_patterns.ts
index 9b87f69ad1b6b4..4a0dfdde04ad49 100644
--- a/x-pack/legacy/plugins/ml/common/constants/index_patterns.ts
+++ b/x-pack/legacy/plugins/ml/common/constants/index_patterns.ts
@@ -10,4 +10,3 @@ export const ML_ANNOTATIONS_INDEX_PATTERN = '.ml-annotations-6';
 
 export const ML_RESULTS_INDEX_PATTERN = '.ml-anomalies-*';
 export const ML_NOTIFICATION_INDEX_PATTERN = '.ml-notifications*';
-export const ML_DF_NOTIFICATION_INDEX_PATTERN = '.data-frame-notifications-1';
diff --git a/x-pack/legacy/plugins/ml/common/types/audit_message.ts b/x-pack/legacy/plugins/ml/common/types/audit_message.ts
index 58e77495b90937..a0ac92417dfe6f 100644
--- a/x-pack/legacy/plugins/ml/common/types/audit_message.ts
+++ b/x-pack/legacy/plugins/ml/common/types/audit_message.ts
@@ -12,10 +12,6 @@ export interface AuditMessageBase {
   text?: string;
 }
 
-export interface AnalyticsMessage extends AuditMessageBase {
-  analytics_id: string;
-}
-
 export interface JobMessage extends AuditMessageBase {
   job_id: string;
 }
diff --git a/x-pack/legacy/plugins/ml/public/components/job_message_icon/index.js b/x-pack/legacy/plugins/ml/public/components/job_message_icon/index.ts
similarity index 99%
rename from x-pack/legacy/plugins/ml/public/components/job_message_icon/index.js
rename to x-pack/legacy/plugins/ml/public/components/job_message_icon/index.ts
index a92fd6c8ae0584..c307df90ae8cec 100644
--- a/x-pack/legacy/plugins/ml/public/components/job_message_icon/index.js
+++ b/x-pack/legacy/plugins/ml/public/components/job_message_icon/index.ts
@@ -4,5 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
 export { JobIcon } from './job_message_icon';
diff --git a/x-pack/legacy/plugins/ml/public/components/job_message_icon/job_message_icon.tsx b/x-pack/legacy/plugins/ml/public/components/job_message_icon/job_message_icon.tsx
index 59e71974d0aed7..545e9231699fd2 100644
--- a/x-pack/legacy/plugins/ml/public/components/job_message_icon/job_message_icon.tsx
+++ b/x-pack/legacy/plugins/ml/public/components/job_message_icon/job_message_icon.tsx
@@ -11,7 +11,7 @@ import { AuditMessageBase } from '../../../common/types/audit_message';
 
 interface Props {
   message: AuditMessageBase;
-  showTooltip: boolean;
+  showTooltip?: boolean;
 }
 
 const [INFO, WARNING, ERROR] = ['info', 'warning', 'error'];
diff --git a/x-pack/legacy/plugins/ml/public/components/job_messages/index.ts b/x-pack/legacy/plugins/ml/public/components/job_messages/index.ts
new file mode 100644
index 00000000000000..dee6aa66694a62
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/components/job_messages/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { JobMessages } from './job_messages';
diff --git a/x-pack/legacy/plugins/ml/public/components/job_messages/job_messages.tsx b/x-pack/legacy/plugins/ml/public/components/job_messages/job_messages.tsx
new file mode 100644
index 00000000000000..08f9a4379559b6
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/components/job_messages/job_messages.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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 React, { FC } from 'react';
+
+import { EuiSpacer, EuiBasicTable } from '@elastic/eui';
+// @ts-ignore
+import { formatDate } from '@elastic/eui/lib/services/format';
+import { i18n } from '@kbn/i18n';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
+
+import { JobMessage } from '../../../common/types/audit_message';
+import { JobIcon } from '../job_message_icon';
+
+const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+
+interface JobMessagesProps {
+  messages: JobMessage[];
+  loading: boolean;
+  error: string;
+}
+
+/**
+ * Component for rendering job messages for anomaly detection
+ * and data frame analytics jobs.
+ */
+export const JobMessages: FC<JobMessagesProps> = ({ messages, loading, error }) => {
+  const columns = [
+    {
+      name: '',
+      render: (message: JobMessage) => <JobIcon message={message} />,
+      width: `${theme.euiSizeL}`,
+    },
+    {
+      name: i18n.translate('xpack.ml.jobMessages.timeLabel', {
+        defaultMessage: 'Time',
+      }),
+      render: (message: any) => formatDate(message.timestamp, TIME_FORMAT),
+      width: '120px',
+    },
+    {
+      field: 'node_name',
+      name: i18n.translate('xpack.ml.jobMessages.nodeLabel', {
+        defaultMessage: 'Node',
+      }),
+      width: '150px',
+    },
+    {
+      field: 'message',
+      name: i18n.translate('xpack.ml.jobMessages.messageLabel', {
+        defaultMessage: 'Message',
+      }),
+      width: '50%',
+    },
+  ];
+
+  return (
+    <>
+      <EuiSpacer size="s" />
+      <EuiBasicTable
+        className="job-messages-table"
+        items={messages}
+        columns={columns}
+        compressed={true}
+        loading={loading}
+        error={error}
+      />
+    </>
+  );
+};
diff --git a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
index bfa21e503d5aab..2ad81a05741c1e 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
@@ -27,7 +27,7 @@ import {
 } from '../../../../common';
 import { isCompletedAnalyticsJob } from './common';
 import { isRegressionAnalysis } from '../../../../common/analytics';
-// import { ExpandedRowMessagesPane } from './expanded_row_messages_pane';
+import { ExpandedRowMessagesPane } from './expanded_row_messages_pane';
 
 function getItemDescription(value: any) {
   if (typeof value === 'object') {
@@ -235,19 +235,16 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       name: 'JSON',
       content: <ExpandedRowJsonPane json={item.config} />,
     },
-    // Audit messages are not yet supported by the analytics API.
-    /*
     {
       id: 'ml-analytics-job-messages',
       name: i18n.translate(
         'xpack.ml.dataframe.analyticsList.analyticsDetails.tabs.analyticsMessagesLabel',
         {
-          defaultMessage: 'Messages',
+          defaultMessage: 'Job messages',
         }
       ),
       content: <ExpandedRowMessagesPane analyticsId={item.id} />,
     },
-    */
   ];
 
   // Using `expand=false` here so the tabs themselves don't spread
diff --git a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
index 1751cf1a396460..e639f32116d4ae 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
@@ -4,27 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment, FC, useState } from 'react';
-
-import { EuiSpacer, EuiBasicTable } from '@elastic/eui';
-// @ts-ignore
-import { formatDate } from '@elastic/eui/lib/services/format';
+import React, { FC, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { ml } from '../../../../../services/ml_api_service';
-// @ts-ignore
-import { JobIcon } from '../../../../../components/job_message_icon';
-import { AnalyticsMessage } from '../../../../../../common/types/audit_message';
 import { useRefreshAnalyticsList } from '../../../../common';
-
-const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+import { JobMessages } from '../../../../../components/job_messages';
+import { JobMessage } from '../../../../../../common/types/audit_message';
 
 interface Props {
   analyticsId: string;
 }
 
 export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId }) => {
-  const [messages, setMessages] = useState([]);
+  const [messages, setMessages] = useState<JobMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
 
@@ -63,43 +55,5 @@ export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId }) => {
 
   useRefreshAnalyticsList({ onRefresh: getMessagesFactory() });
 
-  const columns = [
-    {
-      name: '',
-      render: (message: AnalyticsMessage) => <JobIcon message={message} />,
-      width: `${theme.euiSizeXL}px`,
-    },
-    {
-      name: i18n.translate('xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.timeLabel', {
-        defaultMessage: 'Time',
-      }),
-      render: (message: any) => formatDate(message.timestamp, TIME_FORMAT),
-    },
-    {
-      field: 'node_name',
-      name: i18n.translate('xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.nodeLabel', {
-        defaultMessage: 'Node',
-      }),
-    },
-    {
-      field: 'message',
-      name: i18n.translate('xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.messageLabel', {
-        defaultMessage: 'Message',
-      }),
-      width: '50%',
-    },
-  ];
-
-  return (
-    <Fragment>
-      <EuiSpacer size="s" />
-      <EuiBasicTable
-        items={messages}
-        columns={columns}
-        compressed={true}
-        loading={isLoading}
-        error={errorMessage}
-      />
-    </Fragment>
-  );
+  return <JobMessages messages={messages} loading={isLoading} error={errorMessage} />;
 };
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/_job_details.scss b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/_job_details.scss
index 022c3513d09e18..1f68ec67ded471 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/_job_details.scss
+++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/_job_details.scss
@@ -1,10 +1,9 @@
-
 .tab-contents {
   margin: -$euiSizeS;
   padding: $euiSizeS;
   background-color: $euiColorEmptyShade;
 
-    // SASSTODO: Need to remove bootstrap grid
+  // SASSTODO: Need to remove bootstrap grid
   .col-md-6:nth-child(1) {
     // SASSTODO: Why is this 7?
     padding-right: 7px;
@@ -65,40 +64,24 @@
     }
   }
 
-    // SASSTODO: This needs a proper calc
+  // SASSTODO: This needs a proper calc
   .json-textarea {
     height: 500px;
   }
+}
 
-    // SASSTODO: This needs to be rewritten. A lot of this should be done with the JS props
-  .job-messages-table {
-    max-height: 500px;
-    overflow: auto;
+.job-messages-table {
+  max-height: 500px;
+  overflow: auto;
+  text-align: left;
 
-    .euiTable {
-      font-size: 12px;
-
-      th:nth-child(1) {
-        width: $euiSizeXL;
-      }
-      th:nth-child(2) {
-        width: 150px;
-      }
-      th:nth-child(3) {
-        width: 120px;
-      }
-      th:nth-child(4) {
-        width: auto;
-      }
-      tr:last-child {
-        td {
-          border-bottom: none;
-        }
-      }
-
-      .euiTableRowCell {
-        background-color: $euiColorEmptyShade;
-      }
+  tr:last-child {
+    td {
+      border-bottom: none;
     }
   }
+
+  .euiTableRowCell {
+    background-color: $euiColorEmptyShade;
+  }
 }
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js
index 192310937c0e93..acec94efc37894 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js
@@ -118,7 +118,7 @@ class JobDetailsUI extends Component {
           id: 'xpack.ml.jobsList.jobDetails.tabs.jobMessagesLabel',
           defaultMessage: 'Job messages'
         }),
-        content: <JobMessagesPane job={job} />,
+        content: <JobMessagesPane jobId={job.job_id} />,
       },
       ];
 
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_messages_pane.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_messages_pane.js
deleted file mode 100644
index 8015c38cfc8057..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_messages_pane.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * 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 PropTypes from 'prop-types';
-import React, {
-  Component
-} from 'react';
-
-import {
-  EuiSpacer,
-  EuiBasicTable,
-} from '@elastic/eui';
-
-import { formatDate } from '@elastic/eui/lib/services/format';
-import { ml } from 'plugins/ml/services/ml_api_service';
-import { JobIcon } from '../../../../components/job_message_icon';
-import { injectI18n } from '@kbn/i18n/react';
-
-const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-
-class JobMessagesPaneUI extends Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      messages: []
-    };
-    this.jobId = props.job.job_id;
-  }
-
-  componentDidMount() {
-    ml.jobs.jobAuditMessages(this.jobId)
-      .then((messages) => {
-        this.setState({ messages });
-      })
-      .catch((error) => {
-        console.log('Job messages could not be loaded', error);
-      });
-  }
-
-  render() {
-    const { messages } = this.state;
-    const { intl } = this.props;
-    const columns = [{
-      name: '',
-      render: item => (<JobIcon message={item} />)
-    }, {
-      name: intl.formatMessage({
-        id: 'xpack.ml.jobsList.jobDetails.messagesPane.timeLabel',
-        defaultMessage: 'Time'
-      }),
-      render: item => formatDate(item.timestamp, TIME_FORMAT)
-    }, {
-      field: 'node_name',
-      name: intl.formatMessage({
-        id: 'xpack.ml.jobsList.jobDetails.messagesPane.nodeLabel',
-        defaultMessage: 'Node'
-      }),
-    }, {
-      field: 'message',
-      name: intl.formatMessage({
-        id: 'xpack.ml.jobsList.jobDetails.messagesPane.messageLabel',
-        defaultMessage: 'Message'
-      }),
-    }
-    ];
-    return (
-      <React.Fragment>
-        <EuiSpacer size="s" />
-        <div className="job-messages-table">
-          <EuiBasicTable
-            items={messages}
-            columns={columns}
-          />
-        </div>
-      </React.Fragment>
-    );
-  }
-}
-JobMessagesPaneUI.propTypes = {
-  job: PropTypes.object.isRequired,
-};
-
-export const JobMessagesPane = injectI18n(JobMessagesPaneUI);
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_messages_pane.tsx b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_messages_pane.tsx
new file mode 100644
index 00000000000000..ca80012767c2d0
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_messages_pane.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 React, { FC, useEffect, useState } from 'react';
+
+import { ml } from '../../../../services/ml_api_service';
+import { JobMessages } from '../../../../components/job_messages';
+import { JobMessage } from '../../../../../common/types/audit_message';
+
+interface JobMessagesPaneProps {
+  jobId: string;
+}
+
+export const JobMessagesPane: FC<JobMessagesPaneProps> = ({ jobId }) => {
+  const [messages, setMessages] = useState<JobMessage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const fetchMessages = async () => {
+    setIsLoading(true);
+    try {
+      setMessages(await ml.jobs.jobAuditMessages(jobId));
+      setIsLoading(false);
+    } catch (e) {
+      setIsLoading(false);
+      setErrorMessage(e);
+      // eslint-disable-next-line no-console
+      console.error('Job messages could not be loaded', e);
+    }
+  };
+
+  useEffect(() => {
+    fetchMessages();
+  }, []);
+
+  return <JobMessages messages={messages} loading={isLoading} error={errorMessage} />;
+};
diff --git a/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/_expanded_row.scss b/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/_expanded_row.scss
index e21d7d6c0e1db0..aeddbbd1a51082 100644
--- a/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/_expanded_row.scss
+++ b/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/_expanded_row.scss
@@ -4,7 +4,7 @@
   padding: $euiSizeS;
   background-color: $euiColorEmptyShade;
 
-    // SASSTODO: Need to remove bootstrap grid
+  // SASSTODO: Need to remove bootstrap grid
   .col-md-6:nth-child(1) {
     // SASSTODO: Why is this 7?
     padding-right: 7px;
@@ -65,40 +65,24 @@
     }
   }
 
-    // SASSTODO: This needs a proper calc
+  // SASSTODO: This needs a proper calc
   .json-textarea {
     height: 500px;
   }
+}
 
-    // SASSTODO: This needs to be rewritten. A lot of this should be done with the JS props
-  .job-messages-table {
-    max-height: 500px;
-    overflow: auto;
-
-    .euiTable {
-      font-size: 12px;
-
-      th:nth-child(1) {
-        width: $euiSizeXL;
-      }
-      th:nth-child(2) {
-        width: 150px;
-      }
-      th:nth-child(3) {
-        width: 120px;
-      }
-      th:nth-child(4) {
-        width: auto;
-      }
-      tr:last-child {
-        td {
-          border-bottom: none;
-        }
-      }
+.job-messages-table {
+  max-height: 500px;
+  overflow: auto;
+  text-align: left;
 
-      .euiTableRowCell {
-        background-color: $euiColorEmptyShade;
-      }
+  tr:last-child {
+    td {
+      border-bottom: none;
     }
   }
+
+  .euiTableRowCell {
+    background-color: $euiColorEmptyShade;
+  }
 }
diff --git a/x-pack/legacy/plugins/ml/public/services/ml_api_service/index.d.ts b/x-pack/legacy/plugins/ml/public/services/ml_api_service/index.d.ts
index 38a71d994c601e..414229578c2177 100644
--- a/x-pack/legacy/plugins/ml/public/services/ml_api_service/index.d.ts
+++ b/x-pack/legacy/plugins/ml/public/services/ml_api_service/index.d.ts
@@ -12,6 +12,7 @@ import { MlSummaryJobs } from '../../../common/types/jobs';
 import { MlServerDefaults, MlServerLimits } from '../../services/ml_server_info';
 import { ES_AGGREGATION } from '../../../common/constants/aggregation_types';
 import { DataFrameAnalyticsStats } from '../../data_frame_analytics/pages/analytics_management/components/analytics_list/common';
+import { JobMessage } from '../../../common/types/audit_message';
 
 // TODO This is not a complete representation of all methods of `ml.*`.
 // It just satisfies needs for other parts of the code area which use
@@ -117,7 +118,7 @@ declare interface Ml {
     stopDatafeeds(datafeedIds: string[]): Promise<object>;
     deleteJobs(jobIds: string[]): Promise<object>;
     closeJobs(jobIds: string[]): Promise<object>;
-    jobAuditMessages(jobId: string, from: string): Promise<object>;
+    jobAuditMessages(jobId: string, from?: string): Promise<JobMessage[]>;
     deletingJobTasks(): Promise<object>;
     newJobCaps(indexPatternTitle: string, isRollup: boolean): Promise<object>;
     newJobLineChart(
diff --git a/x-pack/legacy/plugins/ml/server/models/data_frame_analytics/analytics_audit_messages.ts b/x-pack/legacy/plugins/ml/server/models/data_frame_analytics/analytics_audit_messages.ts
index c0a4e639f64347..abe389165182f0 100644
--- a/x-pack/legacy/plugins/ml/server/models/data_frame_analytics/analytics_audit_messages.ts
+++ b/x-pack/legacy/plugins/ml/server/models/data_frame_analytics/analytics_audit_messages.ts
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ML_DF_NOTIFICATION_INDEX_PATTERN } from '../../../common/constants/index_patterns';
 import { callWithRequestType } from '../../../common/types/kibana';
-import { AnalyticsMessage } from '../../../common/types/audit_message';
+import { ML_NOTIFICATION_INDEX_PATTERN } from '../../../common/constants/index_patterns';
+import { JobMessage } from '../../../common/types/audit_message';
 
 const SIZE = 50;
 
@@ -15,7 +15,7 @@ interface Message {
   _type: string;
   _id: string;
   _score: null | number;
-  _source: AnalyticsMessage;
+  _source: JobMessage;
   sort?: any;
 }
 
@@ -37,6 +37,11 @@ export function analyticsAuditMessagesProvider(callWithRequest: callWithRequestT
                   level: 'activity',
                 },
               },
+              must: {
+                term: {
+                  job_type: 'data_frame_analytics',
+                },
+              },
             },
           },
         ],
@@ -50,12 +55,12 @@ export function analyticsAuditMessagesProvider(callWithRequest: callWithRequestT
           should: [
             {
               term: {
-                analytics_id: '', // catch system messages
+                job_id: '', // catch system messages
               },
             },
             {
               term: {
-                analytics_id: analyticsId, // messages for specified analyticsId
+                job_id: analyticsId, // messages for specified analyticsId
               },
             },
           ],
@@ -65,12 +70,12 @@ export function analyticsAuditMessagesProvider(callWithRequest: callWithRequestT
 
     try {
       const resp = await callWithRequest('search', {
-        index: ML_DF_NOTIFICATION_INDEX_PATTERN,
+        index: ML_NOTIFICATION_INDEX_PATTERN,
         ignore_unavailable: true,
         rest_total_hits_as_int: true,
         size: SIZE,
         body: {
-          sort: [{ timestamp: { order: 'desc' } }, { analytics_id: { order: 'asc' } }],
+          sort: [{ timestamp: { order: 'desc' } }, { job_id: { order: 'asc' } }],
           query,
         },
       });
diff --git a/x-pack/legacy/plugins/ml/server/models/job_audit_messages/job_audit_messages.js b/x-pack/legacy/plugins/ml/server/models/job_audit_messages/job_audit_messages.js
index 891990a84756ac..3b666cad7d8eb3 100644
--- a/x-pack/legacy/plugins/ml/server/models/job_audit_messages/job_audit_messages.js
+++ b/x-pack/legacy/plugins/ml/server/models/job_audit_messages/job_audit_messages.js
@@ -48,6 +48,11 @@ export function jobAuditMessagesProvider(callWithRequest) {
                 term: {
                   level: 'activity'
                 }
+              },
+              must: {
+                term: {
+                  job_type: 'anomaly_detector'
+                }
               }
             }
           },
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 34491036e5a453..872e09ea97d3b6 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -6130,9 +6130,6 @@
     "xpack.ml.jobsList.jobDetails.forecastsTable.viewLabel": "表示",
     "xpack.ml.jobsList.jobDetails.generalTitle": "一般",
     "xpack.ml.jobsList.jobDetails.influencersTitle": "影響",
-    "xpack.ml.jobsList.jobDetails.messagesPane.messageLabel": "メッセージ",
-    "xpack.ml.jobsList.jobDetails.messagesPane.nodeLabel": "ノード",
-    "xpack.ml.jobsList.jobDetails.messagesPane.timeLabel": "時間",
     "xpack.ml.jobsList.jobDetails.modelSizeStatsTitle": "モデルサイズ統計",
     "xpack.ml.jobsList.jobDetails.nodeTitle": "ノード",
     "xpack.ml.jobsList.jobDetails.noPermissionToViewDatafeedPreviewTitle": "データフィードのプレビューを表示するパーミッションがありません",
@@ -6610,9 +6607,6 @@
     "xpack.ml.datavisualizer.searchPanel.sampleLabel": "サンプル",
     "xpack.ml.datavisualizer.searchPanel.sampleSizeAriaLabel": "サンプリングするドキュメント数を選択してください",
     "xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.errorMessage": "メッセージを読み込めませんでした",
-    "xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.messageLabel": "メッセージ",
-    "xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.nodeLabel": "ノード",
-    "xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.timeLabel": "時間",
     "xpack.ml.fieldDataCard.cardBoolean.documentsCountDescription": "{count, plural, zero {# document} one {# document} other {# documents}} ({docsPercent}%)",
     "xpack.ml.fieldDataCard.cardDate.documentsCountDescription": "{count, plural, zero {# document} one {# document} other {# documents}} ({docsPercent}%)",
     "xpack.ml.fieldDataCard.cardDate.earliestDescription": "最も古い {earliestFormatted}",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index df00be9685ccfe..25ad15d05ea167 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -6131,9 +6131,6 @@
     "xpack.ml.jobsList.jobDetails.forecastsTable.viewLabel": "查看",
     "xpack.ml.jobsList.jobDetails.generalTitle": "常规",
     "xpack.ml.jobsList.jobDetails.influencersTitle": "影响因素",
-    "xpack.ml.jobsList.jobDetails.messagesPane.messageLabel": "消息",
-    "xpack.ml.jobsList.jobDetails.messagesPane.nodeLabel": "节点",
-    "xpack.ml.jobsList.jobDetails.messagesPane.timeLabel": "时间",
     "xpack.ml.jobsList.jobDetails.modelSizeStatsTitle": "模型大小统计",
     "xpack.ml.jobsList.jobDetails.nodeTitle": "节点",
     "xpack.ml.jobsList.jobDetails.noPermissionToViewDatafeedPreviewTitle": "您无权查看数据馈送预览",
@@ -6703,9 +6700,6 @@
     "xpack.ml.datavisualizer.searchPanel.sampleLabel": "采样",
     "xpack.ml.datavisualizer.searchPanel.sampleSizeAriaLabel": "选择要采样的文档数目",
     "xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.errorMessage": "无法加载消息",
-    "xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.messageLabel": "消息",
-    "xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.nodeLabel": "节点",
-    "xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.timeLabel": "时间",
     "xpack.ml.fieldDataCard.cardBoolean.documentsCountDescription": "{count, plural, zero {# 个文档} one {# 个文档} other {# 个文档}} ({docsPercent}%)",
     "xpack.ml.fieldDataCard.cardDate.documentsCountDescription": "{count, plural, zero {# 个文档} one {# 个文档} other {# 个文档}} ({docsPercent}%)",
     "xpack.ml.fieldDataCard.cardDate.earliestDescription": "最早的 {earliestFormatted}",
diff --git a/yarn.lock b/yarn.lock
index aefee396296ec2..ed39da35e5f969 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7719,10 +7719,10 @@ chrome-trace-event@^1.0.0, chrome-trace-event@^1.0.2:
   dependencies:
     tslib "^1.9.0"
 
-chromedriver@^77.0.0:
-  version "77.0.0"
-  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-77.0.0.tgz#bd916cc87a0ccb7a6e4fb4b43cb2368bc54db6a0"
-  integrity sha512-mZa1IVx4HD8rDaItWbnS470mmypgiWsDiu98r0NkiT4uLm3qrANl4vOU6no6vtWtLQiW5kt1POcIbjeNpsLbXA==
+chromedriver@78.0.1:
+  version "78.0.1"
+  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-78.0.1.tgz#2db3425a2cba6fcaf1a41d9538b16c3d06fa74a8"
+  integrity sha512-eOsyFk4xb9EECs1VMrDbxO713qN+Bu1XUE8K9AuePc3839TPdAegg72kpXSzkeNqRNZiHbnJUItIVCLFkDqceA==
   dependencies:
     del "^4.1.1"
     extract-zip "^1.6.7"