diff --git a/public/pages/CreateMonitor/components/MonitorType/MonitorType.js b/public/pages/CreateMonitor/components/MonitorType/MonitorType.js index ae793ec4b..988791531 100644 --- a/public/pages/CreateMonitor/components/MonitorType/MonitorType.js +++ b/public/pages/CreateMonitor/components/MonitorType/MonitorType.js @@ -4,15 +4,7 @@ */ import React from 'react'; -import { - EuiFlexGrid, - EuiFlexGroup, - EuiFlexItem, - EuiFormLabel, - EuiCompressedFormRow, - EuiSpacer, - EuiText, -} from '@elastic/eui'; +import { EuiFlexGrid, EuiFlexItem, EuiFormLabel, EuiSpacer, EuiText } from '@elastic/eui'; import FormikCheckableCard from '../../../../components/FormControls/FormikCheckableCard'; import { MONITOR_TYPE, SEARCH_TYPE } from '../../../../utils/constants'; import { FORMIK_INITIAL_TRIGGER_VALUES } from '../../../CreateTrigger/containers/CreateTrigger/utils/constants'; diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js index 80e689890..23d451d03 100644 --- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js +++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js @@ -6,37 +6,40 @@ import React from 'react'; import { Field } from 'formik'; import moment from 'moment'; -import { EuiCompressedFormRow, EuiDatePicker, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFormRow, EuiDatePicker, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import TimezoneComboBox from './TimezoneComboBox'; -const Daily = () => ( - - - - {({ - field: { value, onChange, onBlur, ...rest }, - form: { touched, errors, setFieldValue }, - }) => ( - - { - setFieldValue('daily', date.hours()); - }} - dateFormat="hh:mm A" - timeIntervals={60} - {...rest} - /> - - )} - - - - - - -); +const Daily = ({ compressed }) => { + return ( + + + + {({ + field: { value, onChange, onBlur, className, ...rest }, + form: { touched, errors, setFieldValue }, + }) => ( + + { + setFieldValue('daily', date.hours()); + }} + dateFormat="hh:mm A" + timeIntervals={60} + className={compressed ? 'euiFieldText--compressed' : ''} + {...rest} + /> + + )} + + + + + + + ); +}; export default Daily; diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js index fab615a39..f9285e8b9 100644 --- a/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js +++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js @@ -23,7 +23,7 @@ const components = { const FrequencyPicker = (props) => { const type = props.formik.values.frequency; const Component = components[type]; - return ; + return ; }; export default connect(FrequencyPicker); diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js index 89c6c9ea4..0364b8588 100644 --- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js +++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js @@ -10,7 +10,7 @@ import { FormikFieldNumber, FormikSelect } from '../../../../../components/FormC import { isInvalid, hasError, validateMonthlyDay } from '../../../../../utils/validate'; import { monthlyTypes } from './utils/constants'; -const Monthly = () => ( +const Monthly = ({ compressed }) => ( @@ -45,7 +45,7 @@ const Monthly = () => ( - + ); diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js index bdb5518df..911e6d3d0 100644 --- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js +++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js @@ -31,7 +31,7 @@ const validate = (value) => { if (!booleans.some((bool) => bool)) return 'Must select at least one weekday'; }; -const Weekly = () => ( +const Weekly = ({ compressed }) => ( {({ field: { value }, form: { touched, errors, setFieldValue, setFieldTouched } }) => ( @@ -47,7 +47,7 @@ const Weekly = () => ( )} - + ); diff --git a/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js b/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js index 39358b8c9..630d352e3 100644 --- a/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js +++ b/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js @@ -91,8 +91,11 @@ class DateRangePicker extends React.PureComponent { }; }); }; + render() { const { rangeStartDateTime, rangeEndDateTime } = this.state; + const { compressed } = this.props; + return ( @@ -109,6 +112,7 @@ class DateRangePicker extends React.PureComponent { showTimeSelect popperClassName="euiRangePicker--popper" shouldCloseOnSelect + className={compressed ? 'euiFieldText--compressed' : ''} {...rangeStartDateTime} /> } @@ -123,6 +127,7 @@ class DateRangePicker extends React.PureComponent { showTimeSelect popperClassName="euiRangePicker--popper" shouldCloseOnSelect + className={compressed ? 'euiFieldText--compressed' : ''} {...rangeEndDateTime} /> } diff --git a/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js b/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js index 2145ca08e..f713df1f0 100644 --- a/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js +++ b/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js @@ -323,6 +323,7 @@ class MonitorHistory extends PureComponent { initialStartTime={this.initialStartTime} initialEndTime={this.initialEndTime} onRangeChange={this.handleRangeChange} + compressed />, ]} >