mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[Logs onboarding] Error handling in configureLogs step (#162241)
Closes https://github.com/elastic/kibana/issues/156529. `Dataset name` is a field that is auto populated based on the `Log file path`, if the user deletes the autogenerated value they cannot continue with the next step but before this changes there were no indicative of why they cannot continue. ### Changes - Added validation function to datasetName field. - Added i18n error. #### Before <img width="2199" alt="image" src="24cc166e
-c143-4b35-9372-0fcdb4e78f4a"> #### After <img width="2200" alt="image" src="72302aa6
-1597-439b-8d80-88e7debf1010">
This commit is contained in:
parent
9c0503c523
commit
0fd8a1196e
1 changed files with 13 additions and 0 deletions
|
@ -25,6 +25,7 @@ import {
|
|||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { isEmpty } from 'lodash';
|
||||
import React, { useState } from 'react';
|
||||
import { useWizard } from '.';
|
||||
import { OptionalFormRow } from '../../../shared/optional_form_row';
|
||||
|
@ -37,6 +38,7 @@ import { BackButton } from './back_button';
|
|||
import { getFilename, replaceSpecialChars } from './get_filename';
|
||||
|
||||
export function ConfigureLogs() {
|
||||
const [datasetNameTouched, setDatasetNameTouched] = useState(false);
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const xsFontSize = useEuiFontSize('xs').fontSize;
|
||||
|
||||
|
@ -86,6 +88,13 @@ export function ConfigureLogs() {
|
|||
}
|
||||
}
|
||||
|
||||
const isDatasetNameInvalid = datasetNameTouched && isEmpty(datasetName);
|
||||
|
||||
const datasetNameError = i18n.translate(
|
||||
'xpack.observability_onboarding.configureLogs.dataset.error',
|
||||
{ defaultMessage: 'A dataset name is required.' }
|
||||
);
|
||||
|
||||
return (
|
||||
<StepPanel
|
||||
title={i18n.translate(
|
||||
|
@ -205,6 +214,8 @@ export function ConfigureLogs() {
|
|||
"Pick a name for your logs. All lowercase, max 100 chars, special characters will be replaced with '_'.",
|
||||
}
|
||||
)}
|
||||
isInvalid={isDatasetNameInvalid}
|
||||
error={datasetNameError}
|
||||
>
|
||||
<EuiFieldText
|
||||
placeholder={i18n.translate(
|
||||
|
@ -217,6 +228,8 @@ export function ConfigureLogs() {
|
|||
onChange={(event) =>
|
||||
setDatasetName(replaceSpecialChars(event.target.value))
|
||||
}
|
||||
isInvalid={isDatasetNameInvalid}
|
||||
onInput={() => setDatasetNameTouched(true)}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
<EuiSpacer size="m" />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue