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

[Metrics UI] Fixing time picker layout issues on Inventory View (#66094)

Browse source 
* [Metrics UI] Fixing time picker layout issues on Inventory View

* Adding data-test-subj
This commit is contained in:
Chris Cowan 2020-05-12 08:27:22 -07:00 committed by GitHub
parent fd6b63e9f2
commit 712e917f5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx
View file

@ -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>
); );
}; });