diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx
index af87f45b69c8..69afea56648e 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx
@@ -5,10 +5,9 @@
  */
 
 import { EuiButtonEmpty, EuiIcon, EuiProgress, EuiText } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
 import * as React from 'react';
 import styled from 'styled-components';
-import { RelativeTime } from './relative_time';
 
 interface LogTextStreamLoadingItemViewProps {
   alignment: 'top' | 'bottom';
@@ -52,10 +51,10 @@ export class LogTextStreamLoadingItemView extends React.PureComponent<
                 <EuiIcon type="clock" />
                 <FormattedMessage
                   id="xpack.infra.logs.lastStreamingUpdateText"
-                  defaultMessage=" last updated {lastUpdateTime} ago"
+                  defaultMessage=" last updated {lastUpdateTime}"
                   values={{
                     lastUpdateTime: (
-                      <RelativeTime time={lastStreamingUpdate} refreshInterval={1000} />
+                      <FormattedRelative value={lastStreamingUpdate} updateInterval={1000} />
                     ),
                   }}
                 />
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/relative_time.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/relative_time.tsx
deleted file mode 100644
index 247b444a3b6a..000000000000
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/relative_time.tsx
+++ /dev/null
@@ -1,77 +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 * as React from 'react';
-
-import { decomposeIntoUnits, getLabelOfScale, TimeUnit } from '../../../../common/time';
-
-interface RelativeTimeProps {
-  time: number;
-  refreshInterval?: number;
-}
-
-interface RelativeTimeState {
-  currentTime: number;
-  timeoutId: number | null;
-}
-
-export class RelativeTime extends React.Component<RelativeTimeProps, RelativeTimeState> {
-  public readonly state = {
-    currentTime: Date.now(),
-    timeoutId: null,
-  };
-
-  public updateCurrentTimeEvery = (refreshInterval: number) => {
-    const nextTimeoutId = window.setTimeout(
-      this.updateCurrentTimeEvery.bind(this, refreshInterval),
-      refreshInterval
-    );
-
-    this.setState({
-      currentTime: Date.now(),
-      timeoutId: nextTimeoutId,
-    });
-  };
-
-  public cancelUpdate = () => {
-    const { timeoutId } = this.state;
-
-    if (timeoutId) {
-      window.clearTimeout(timeoutId);
-      this.setState({
-        timeoutId: null,
-      });
-    }
-  };
-
-  public componentDidMount() {
-    const { refreshInterval } = this.props;
-
-    if (refreshInterval && refreshInterval > 0) {
-      this.updateCurrentTimeEvery(refreshInterval);
-    }
-  }
-
-  public componentWillUnmount() {
-    this.cancelUpdate();
-  }
-
-  public render() {
-    const { time } = this.props;
-    const { currentTime } = this.state;
-    const timeDifference = Math.abs(currentTime - time);
-
-    const timeFragments = decomposeIntoUnits(timeDifference, unitThresholds);
-
-    if (timeFragments.length === 0) {
-      return '0s';
-    } else {
-      return timeFragments.map(getLabelOfScale).join(' ');
-    }
-  }
-}
-
-const unitThresholds = [TimeUnit.Day, TimeUnit.Hour, TimeUnit.Minute, TimeUnit.Second];