github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ML] Custom urls: ensure interval input is aligned (#160557)

Browse source 
## Summary

Only show tooltip in data frame analytics as it isn't relevant to
Anomaly Detection.
Ensure the interval time range input is aligned even when there's an
error message.

<img width="682" alt="image"
src="15057bef-43d1-46b1-b0ce-34e46fb3258c">

<img width="689" alt="image"
src="0ee4d889-d63c-4c14-b1da-16cd7f196429">



### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or
This commit is contained in:
Melissa Alvarez 2023-06-27 09:42:33 -06:00 • committed by GitHub
parent 4d812c1d24
commit 6bbb49706c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 88 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

1
x-pack/plugins/ml/public/application/components/custom_urls/custom_url_editor/custom_time_range_picker.tsx
View file

@ -75,7 +75,6 @@ export const CustomTimeRangePicker: FC<CustomUrlTimeRangePickerProps> = ({
})}
checked={showCustomTimeRangeSelector}
onChange={(e) => onCustomTimeRangeSwitchChange(e.target.checked)}
compressed
/>
{showCustomTimeRangeSelector ? (
<>

155
x-pack/plugins/ml/public/application/components/custom_urls/custom_url_editor/editor.tsx
View file

@ -380,93 +380,88 @@ export const CustomUrlEditor: FC<CustomUrlEditorProps> = ({
{(type === URL_TYPE.KIBANA_DASHBOARD || type === URL_TYPE.KIBANA_DISCOVER) && hasTimefield && (
<>
<EuiSpacer size="m" />
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={false}>
<EuiFormRow
label={
<EuiFlexGroup gutterSize={'none'} alignItems="center">
<EuiFlexItem grow={false}>
<FormattedMessage
id="xpack.ml.customUrlsEditor.timeRangeLabel"
defaultMessage="Time range"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIconTip
content={i18n.translate(
'xpack.ml.customUrlsEditor.timeRangeTooltip',
{
defaultMessage:
'If not set, time range defaults to global settings.',
}
)}
position="top"
type="iInCircle"
/>
</EuiFlexItem>
</EuiFlexGroup>
}
className="url-time-range"
display="rowCompressed"
>
<EuiFormRow
label={
<EuiFlexGroup gutterSize={'none'} alignItems="center">
<EuiFlexItem grow={false}>
<FormattedMessage
id="xpack.ml.customUrlsEditor.timeRangeLabel"
defaultMessage="Time range"
/>
</EuiFlexItem>
{showCustomTimeRangeSelector ? (
<IntervalTimerangeSelector
disabled={customUrl?.customTimeRange !== undefined}
setAddIntervalTimerange={setAddIntervalTimerange}
addIntervalTimerange={addIntervalTimerange}
/>
) : (
<EuiSelect
options={timeRangeOptions}
value={timeRange.type}
onChange={onTimeRangeTypeChange}
data-test-subj="mlJobCustomUrlTimeRangeInput"
compressed
/>
)}
</EuiFormRow>
</EuiFlexItem>
{(showCustomTimeRangeSelector && addIntervalTimerange) ||
(!showCustomTimeRangeSelector && timeRange.type === TIME_RANGE_TYPE.INTERVAL) ? (
<EuiFlexItem>
<EuiFormRow
label={
<FormattedMessage
id="xpack.ml.customUrlsEditor.intervalLabel"
defaultMessage="Interval"
<EuiFlexItem grow={false}>
<EuiIconTip
content={i18n.translate('xpack.ml.customUrlsEditor.timeRangeTooltip', {
defaultMessage: 'If not set, time range defaults to global settings.',
})}
position="top"
type="iInCircle"
/>
}
className="url-time-range"
error={invalidIntervalError}
isInvalid={isInvalidTimeRange}
display="rowCompressed"
>
<EuiFieldText
value={timeRange.interval}
onChange={onTimeRangeIntervalChange}
isInvalid={isInvalidTimeRange}
data-test-subj="mlJobCustomUrlTimeRangeIntervalInput"
compressed
/>
</EuiFormRow>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
}
className="url-time-range"
display="rowCompressed"
>
{showCustomTimeRangeSelector ? (
<IntervalTimerangeSelector
disabled={customUrl?.customTimeRange !== undefined}
setAddIntervalTimerange={setAddIntervalTimerange}
addIntervalTimerange={addIntervalTimerange}
/>
) : (
<EuiSelect
options={timeRangeOptions}
value={timeRange.type}
onChange={onTimeRangeTypeChange}
data-test-subj="mlJobCustomUrlTimeRangeInput"
compressed
/>
)}
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{(type === URL_TYPE.KIBANA_DASHBOARD || type === URL_TYPE.KIBANA_DISCOVER) &&
showCustomTimeRangeSelector &&
hasTimefield ? (
<CustomTimeRangePicker
disabled={addIntervalTimerange}
onCustomTimeRangeChange={onCustomTimeRangeChange}
customTimeRange={customUrl?.customTimeRange}
/>
<EuiFlexItem>
{(showCustomTimeRangeSelector && addIntervalTimerange) ||
(!showCustomTimeRangeSelector && timeRange.type === TIME_RANGE_TYPE.INTERVAL) ? (
<EuiFormRow
label={
<FormattedMessage
id="xpack.ml.customUrlsEditor.intervalLabel"
defaultMessage="Interval"
/>
}
className="url-time-range"
error={invalidIntervalError}
isInvalid={isInvalidTimeRange}
display="rowCompressed"
>
<EuiFieldText
value={timeRange.interval}
onChange={onTimeRangeIntervalChange}
isInvalid={isInvalidTimeRange}
data-test-subj="mlJobCustomUrlTimeRangeIntervalInput"
compressed
/>
</EuiFormRow>
) : null}
</EuiFlexItem>
</EuiFlexGroup>
{(type === URL_TYPE.KIBANA_DASHBOARD || type === URL_TYPE.KIBANA_DISCOVER) &&
showCustomTimeRangeSelector &&
hasTimefield ? (
<>
<EuiSpacer />
<CustomTimeRangePicker
disabled={addIntervalTimerange}
onCustomTimeRangeChange={onCustomTimeRangeChange}
customTimeRange={customUrl?.customTimeRange}
/>
</>
) : null}
</>
)}

24
x-pack/plugins/ml/public/application/components/custom_urls/custom_url_editor/interval_time_range_selector.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { Dispatch, FC } from 'react';
import { EuiSwitch } from '@elastic/eui';
import { EuiSpacer, EuiSwitch } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
interface IntervalTimerangeSelectorProps {
@ -24,15 +24,17 @@ export const IntervalTimerangeSelector: FC<IntervalTimerangeSelectorProps> = ({
disabled,
}) => {
return (
<EuiSwitch
disabled={disabled}
showLabel={true}
label={i18n.translate('xpack.ml.customUrlsEditor.addIntervalTimeRangeSwitchLabel', {
defaultMessage: 'Add interval time range',
})}
checked={addIntervalTimerange}
onChange={(e) => setAddIntervalTimerange(e.target.checked)}
compressed
/>
<>
<EuiSpacer size="xs" />
<EuiSwitch
disabled={disabled}
showLabel={true}
label={i18n.translate('xpack.ml.customUrlsEditor.addIntervalTimeRangeSwitchLabel', {
defaultMessage: 'Add interval time range',
})}
checked={addIntervalTimerange}
onChange={(e) => setAddIntervalTimerange(e.target.checked)}
/>
</>
);
};