[Logs UI] Fixes date picker grid display bug (#36646)
* Fixes display of date picker and streaming button grid * Removes unused dependency that somehow slipped through the commit hook linter >.< * Changes streaming button to empty style to de-emphasize a bit * Updates streaming message to match standard case * Updates yarn.lock for new core-js version that auto updated during bootstrap * Removes unnecessary import
This commit is contained in:
parent
4c801825f9
commit
66ef20bbd3
|
@ -4,13 +4,11 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { EuiDatePicker, EuiFilterButton, EuiFilterGroup } from '@elastic/eui';
|
||||
import { EuiDatePicker, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
|
||||
import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import moment, { Moment } from 'moment';
|
||||
import React from 'react';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
|
||||
const noop = () => undefined;
|
||||
|
||||
interface LogTimeControlsProps {
|
||||
|
@ -30,34 +28,36 @@ class LogTimeControlsUI extends React.PureComponent<LogTimeControlsProps> {
|
|||
|
||||
if (isLiveStreaming) {
|
||||
return (
|
||||
<EuiFilterGroup>
|
||||
<InlineWrapper>
|
||||
<EuiFlexGroup gutterSize="s">
|
||||
<EuiFlexItem>
|
||||
<EuiDatePicker
|
||||
disabled
|
||||
onChange={noop}
|
||||
value={intl.formatMessage({
|
||||
id: 'xpack.infra.logs.streamingDescription',
|
||||
defaultMessage: 'streaming…',
|
||||
defaultMessage: 'Streaming new entries…',
|
||||
})}
|
||||
/>
|
||||
</InlineWrapper>
|
||||
<EuiFilterButton
|
||||
color="primary"
|
||||
iconType="pause"
|
||||
iconSide="left"
|
||||
onClick={this.stopLiveStreaming}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.logs.stopStreamingButtonLabel"
|
||||
defaultMessage="Stop streaming"
|
||||
/>
|
||||
</EuiFilterButton>
|
||||
</EuiFilterGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
color="primary"
|
||||
iconType="pause"
|
||||
iconSide="left"
|
||||
onClick={this.stopLiveStreaming}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.logs.stopStreamingButtonLabel"
|
||||
defaultMessage="Stop streaming"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<EuiFilterGroup>
|
||||
<InlineWrapper>
|
||||
<EuiFlexGroup gutterSize="s">
|
||||
<EuiFlexItem>
|
||||
<EuiDatePicker
|
||||
dateFormat="L LTS"
|
||||
onChange={this.handleChangeDate}
|
||||
|
@ -68,14 +68,16 @@ class LogTimeControlsUI extends React.PureComponent<LogTimeControlsProps> {
|
|||
timeFormat="LTS"
|
||||
injectTimes={currentMoment ? [currentMoment] : []}
|
||||
/>
|
||||
</InlineWrapper>
|
||||
<EuiFilterButton iconType="play" iconSide="left" onClick={this.startLiveStreaming}>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.logs.startStreamingButtonLabel"
|
||||
defaultMessage="Stream live"
|
||||
/>
|
||||
</EuiFilterButton>
|
||||
</EuiFilterGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty iconType="play" iconSide="left" onClick={this.startLiveStreaming}>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.logs.startStreamingButtonLabel"
|
||||
defaultMessage="Stream live"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -96,7 +98,3 @@ class LogTimeControlsUI extends React.PureComponent<LogTimeControlsProps> {
|
|||
}
|
||||
|
||||
export const LogTimeControls = injectI18n(LogTimeControlsUI);
|
||||
|
||||
const InlineWrapper = euiStyled.div`
|
||||
display: inline-block;
|
||||
`;
|
||||
|
|
Loading…
Reference in a new issue