[Metrics UI] Fixing time picker layout issues on Inventory View (#66094)
* [Metrics UI] Fixing time picker layout issues on Inventory View * Adding data-test-subj
This commit is contained in:
parent
fd6b63e9f2
commit
712e917f5e
|
@ -4,13 +4,18 @@
|
||||||
* you may not use this file except in compliance with the Elastic License.
|
* you may not use this file except in compliance with the Elastic License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { EuiButtonEmpty, EuiDatePicker, EuiFormControlLayout } from '@elastic/eui';
|
import { EuiButton, EuiDatePicker, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||||
import { FormattedMessage } from '@kbn/i18n/react';
|
import { FormattedMessage } from '@kbn/i18n/react';
|
||||||
import moment, { Moment } from 'moment';
|
import moment, { Moment } from 'moment';
|
||||||
import React, { useCallback } from 'react';
|
import React, { useCallback } from 'react';
|
||||||
|
import { withTheme, EuiTheme } from '../../../../../../../observability/public';
|
||||||
import { useWaffleTimeContext } from '../../hooks/use_waffle_time';
|
import { useWaffleTimeContext } from '../../hooks/use_waffle_time';
|
||||||
|
|
||||||
export const WaffleTimeControls = () => {
|
interface Props {
|
||||||
|
theme: EuiTheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WaffleTimeControls = withTheme(({ theme }: Props) => {
|
||||||
const {
|
const {
|
||||||
currentTime,
|
currentTime,
|
||||||
isAutoReloading,
|
isAutoReloading,
|
||||||
|
@ -22,19 +27,19 @@ export const WaffleTimeControls = () => {
|
||||||
const currentMoment = moment(currentTime);
|
const currentMoment = moment(currentTime);
|
||||||
|
|
||||||
const liveStreamingButton = isAutoReloading ? (
|
const liveStreamingButton = isAutoReloading ? (
|
||||||
<EuiButtonEmpty color="primary" iconSide="left" iconType="pause" onClick={stopAutoReload}>
|
<EuiButton color="primary" iconSide="left" iconType="pause" onClick={stopAutoReload}>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="xpack.infra.waffleTime.stopRefreshingButtonLabel"
|
id="xpack.infra.waffleTime.stopRefreshingButtonLabel"
|
||||||
defaultMessage="Stop refreshing"
|
defaultMessage="Stop refreshing"
|
||||||
/>
|
/>
|
||||||
</EuiButtonEmpty>
|
</EuiButton>
|
||||||
) : (
|
) : (
|
||||||
<EuiButtonEmpty iconSide="left" iconType="play" onClick={startAutoReload}>
|
<EuiButton iconSide="left" iconType="play" onClick={startAutoReload}>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="xpack.infra.waffleTime.autoRefreshButtonLabel"
|
id="xpack.infra.waffleTime.autoRefreshButtonLabel"
|
||||||
defaultMessage="Auto-refresh"
|
defaultMessage="Auto-refresh"
|
||||||
/>
|
/>
|
||||||
</EuiButtonEmpty>
|
</EuiButton>
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleChangeDate = useCallback(
|
const handleChangeDate = useCallback(
|
||||||
|
@ -47,20 +52,31 @@ export const WaffleTimeControls = () => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EuiFormControlLayout append={liveStreamingButton} data-test-subj="waffleDatePicker">
|
<EuiFlexGroup alignItems="center" gutterSize="none">
|
||||||
<EuiDatePicker
|
<EuiFlexItem
|
||||||
className="euiFieldText--inGroup"
|
grow={false}
|
||||||
dateFormat="L LTS"
|
style={{
|
||||||
disabled={isAutoReloading}
|
border: theme.eui.euiFormInputGroupBorder,
|
||||||
injectTimes={currentMoment ? [currentMoment] : []}
|
boxShadow: `0px 3px 2px ${theme.eui.euiTableActionsBorderColor}, 0px 1px 1px ${theme.eui.euiTableActionsBorderColor}`,
|
||||||
isLoading={isAutoReloading}
|
marginRight: theme.eui.paddingSizes.m,
|
||||||
onChange={handleChangeDate}
|
}}
|
||||||
popperPlacement="top-end"
|
data-test-subj="waffleDatePicker"
|
||||||
selected={currentMoment}
|
>
|
||||||
shouldCloseOnSelect
|
<EuiDatePicker
|
||||||
showTimeSelect
|
className="euiFieldText--inGroup"
|
||||||
timeFormat="LT"
|
dateFormat="L LTS"
|
||||||
/>
|
disabled={isAutoReloading}
|
||||||
</EuiFormControlLayout>
|
injectTimes={currentMoment ? [currentMoment] : []}
|
||||||
|
isLoading={isAutoReloading}
|
||||||
|
onChange={handleChangeDate}
|
||||||
|
popperPlacement="top-end"
|
||||||
|
selected={currentMoment}
|
||||||
|
shouldCloseOnSelect
|
||||||
|
showTimeSelect
|
||||||
|
timeFormat="LT"
|
||||||
|
/>
|
||||||
|
</EuiFlexItem>
|
||||||
|
<EuiFlexItem grow={false}>{liveStreamingButton}</EuiFlexItem>
|
||||||
|
</EuiFlexGroup>
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
|
|
Loading…
Reference in a new issue