[Logs UI] Use react-intl FormattedRelative instead of a custom component (#33146)
This replaces the custom relative time component in the Logs UI live streaming inline loading indicator with the one from `react-intl`. This was not done at the time of the initial i18n introduction (#25213), because of #26237, which apparently has since been resolved via #26468. Visual changes should be limited to `now` being shown instead of `0s ago`.
This commit is contained in:
parent
7993be2c6b
commit
52084705a6
|
@ -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} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
|
|
@ -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];
|
Loading…
Reference in a new issue