maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Logs UI] Use react-intl FormattedRelative instead of a custom component (#33146)

Browse source 
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:
Felix Stürmer 2019-03-18 12:18:54 +01:00 committed by GitHub
parent 7993be2c6b
commit 52084705a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx
View file

@ -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} />
),
}}
/>

77
x-pack/plugins/infra/public/components/logging/log_text_stream/relative_time.tsx
View file

@ -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];