[Logs UI] Fix z-index of logs page toolbar (#54469) (#55346)

* Fix z-index of logs page toolbar

* Extract `FixedDatePicker` from log setup page, and use it in the stream page

* Clean unused import

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Alejandro Fernández 2020-01-21 10:50:17 +01:00 committed by GitHub
parent 1f1a0da400
commit 8d8d3a009f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 20 deletions

View file

@ -0,0 +1,25 @@
/*
* 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 React from 'react';
import { EuiDatePicker, EuiDatePickerProps } from '@elastic/eui';
import euiStyled from '../../../../common/eui_styled_components';
export const FixedDatePicker = euiStyled(
({
className,
inputClassName,
...datePickerProps
}: {
className?: string;
inputClassName?: string;
} & EuiDatePickerProps) => (
<EuiDatePicker {...datePickerProps} className={inputClassName} popperClassName={className} />
)
)`
z-index: 3 !important;
`;

View file

@ -5,8 +5,6 @@
*/
import {
EuiDatePicker,
EuiDatePickerProps,
EuiDescribedFormGroup,
EuiFlexGroup,
EuiFormControlLayout,
@ -16,8 +14,7 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import moment, { Moment } from 'moment';
import React, { useMemo } from 'react';
import { euiStyled } from '../../../../../../../common/eui_styled_components';
import { FixedDatePicker } from '../../../fixed_datepicker';
const startTimeLabel = i18n.translate('xpack.infra.analysisSetup.startTimeLabel', {
defaultMessage: 'Start time',
@ -138,18 +135,3 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
</EuiDescribedFormGroup>
);
};
const FixedDatePicker = euiStyled(
({
className,
inputClassName,
...datePickerProps
}: {
className?: string;
inputClassName?: string;
} & EuiDatePickerProps) => (
<EuiDatePicker {...datePickerProps} className={inputClassName} popperClassName={className} />
)
)`
z-index: 3 !important;
`;

View file

@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import moment, { Moment } from 'moment';
import React from 'react';
import { FixedDatePicker } from '../fixed_datepicker';
const noop = () => undefined;
@ -56,7 +57,7 @@ export class LogTimeControls extends React.PureComponent<LogTimeControlsProps> {
return (
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<EuiDatePicker
<FixedDatePicker
dateFormat="L LTS"
onChange={this.handleChangeDate}
popperPlacement="top-end"