[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:
Jason Rhodes 2019-05-22 12:15:47 -04:00 committed by GitHub
parent 4c801825f9
commit 66ef20bbd3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

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