[Ingest pipelines] Improve copy of Reroute processor (#162996)

Closes https://github.com/elastic/kibana/issues/162848

## Summary

This PR improves the ui copy of the Reroute processor form and some
common processor components.

List of changes that have been made:

- Title of Processor form
- Processor field placeholder
- Destination field helper text
- Dataset field placeholder and helper text
- Namespace field placeholder and helper text
- Condition field helper text
- Tag field helper text
- Ignore failure field label
- Submit button label

<details>
<summary>Screenshots</summary>
<img width="535" alt="Screenshot 2023-08-14 at 18 41 57"
src="473bdef1-7f00-4002-8ae3-0bf104bfdebd">


The `index names` link in the Dataset and Namespace helper text leads to
https://www.elastic.co/guide/en/elasticsearch/reference/master/indices-create-index.html#indices-create-api-path-params

<img width="715" alt="Screenshot 2023-08-02 at 17 03 26"
src="1b026562-23ff-443f-8d8a-7dfff2455ea5">

</details>


### Checklist

- [X] 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)
- [X] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [X] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Elena Stoeva 2023-08-15 11:56:10 +01:00 committed by GitHub
parent f8a24e0509
commit 54442daf06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 137 additions and 106 deletions

View file

@ -38,7 +38,7 @@ export interface Props {
const addButtonLabel = i18n.translate(
'xpack.ingestPipelines.addProcessorFormOnFailureFlyout.addButtonLabel',
{ defaultMessage: 'Add' }
{ defaultMessage: 'Add processor' }
);
const cancelButtonLabel = i18n.translate(
@ -50,12 +50,12 @@ const getFlyoutTitle = (isOnFailure: boolean) => {
return isOnFailure ? (
<FormattedMessage
id="xpack.ingestPipelines.settingsFormOnFailureFlyout.configureOnFailureTitle"
defaultMessage="Configure on-failure processor"
defaultMessage="Add on-failure processor"
/>
) : (
<FormattedMessage
id="xpack.ingestPipelines.settingsFormOnFailureFlyout.configureTitle"
defaultMessage="Configure processor"
defaultMessage="Add processor"
/>
);
};

View file

@ -9,6 +9,8 @@ import React, { FunctionComponent } from 'react';
import { i18n } from '@kbn/i18n';
import { PainlessLang } from '@kbn/monaco';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiCode } from '@elastic/eui';
import {
FieldConfig,
UseField,
@ -27,13 +29,9 @@ const ignoreFailureConfig: FieldConfig<any> = {
label: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureFieldLabel',
{
defaultMessage: 'Ignore failure',
defaultMessage: 'Ignore failures for this processor',
}
),
helpText: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureHelpText',
{ defaultMessage: 'Ignore failures for this processor.' }
),
type: FIELD_TYPES.TOGGLE,
};
@ -42,9 +40,16 @@ const ifConfig: FieldConfig = {
label: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldLabel', {
defaultMessage: 'Condition (optional)',
}),
helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldHelpText', {
defaultMessage: 'Conditionally run this processor.',
}),
helpText: (
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldHelpText"
defaultMessage="An {if} condition written as a Painless script: {exampleCondition}"
values={{
if: <EuiCode>{'if'}</EuiCode>,
exampleCondition: <EuiCode>{"ctx?.network?.name == 'Guest'"}</EuiCode>,
}}
/>
),
type: FIELD_TYPES.TEXT,
};
@ -54,7 +59,7 @@ const tagConfig: FieldConfig = {
defaultMessage: 'Tag (optional)',
}),
helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.tagFieldHelpText', {
defaultMessage: 'Identifier for the processor. Useful for debugging and metrics.',
defaultMessage: 'An identifier for the processor. Useful for debugging and metrics.',
}),
type: FIELD_TYPES.TEXT,
};

View file

@ -138,7 +138,7 @@ export const ProcessorTypeField: FunctionComponent<Props> = ({ initialType }) =>
placeholder={i18n.translate(
'xpack.ingestPipelines.pipelineEditor.typeField.typeFieldComboboxPlaceholder',
{
defaultMessage: 'Type and then hit "ENTER"',
defaultMessage: 'Start typing or select a processor',
}
)}
options={processorOptions}

View file

@ -8,8 +8,9 @@
import React, { FunctionComponent, useEffect } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiCode } from '@elastic/eui';
import { EuiCode, EuiLink } from '@elastic/eui';
import { DocumentationService } from '../../../../../services';
import {
ComboBoxField,
FIELD_TYPES,
@ -18,6 +19,7 @@ import {
fieldValidators,
useFormData,
useFormContext,
useKibana,
} from '../../../../../../shared_imports';
import { FieldsConfig, to, from } from './shared';
@ -27,91 +29,117 @@ const { maxLengthField } = fieldValidators;
const MAX_DATASET_LENGTH = 100;
const MAX_NAMESPACE_LENGTH = 100;
const fieldsConfig: FieldsConfig = {
/* Optional field configs */
destination: {
type: FIELD_TYPES.TEXT,
serializer: from.emptyStringToUndefined,
label: i18n.translate('xpack.ingestPipelines.pipelineEditor.reroute.destinationFieldLabel', {
defaultMessage: 'Destination (optional)',
}),
helpText: (
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.reroute.destinationFieldHelperText"
defaultMessage="A static value for the target. Cannot be set when {dataset} or {namespace} is set."
values={{
dataset: <EuiCode>{'dataset'}</EuiCode>,
namespace: <EuiCode>{'namespace'}</EuiCode>,
}}
/>
),
},
dataset: {
defaultValue: null,
type: FIELD_TYPES.COMBO_BOX,
deserializer: to.arrayOfStrings,
serializer: from.optionalArrayOfStrings,
label: i18n.translate('xpack.ingestPipelines.pipelineEditor.reroute.datasetFieldLabel', {
defaultMessage: 'Dataset (optional)',
}),
helpText: (
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.reroute.datasetFieldHelperText"
defaultMessage="Field references or a static value for the dataset part of the data stream name. In addition to the criteria for index names, cannot contain {dash} and must be no longer than 100 characters. Defaults to {defaultValue}."
values={{
dash: <EuiCode>{'-'}</EuiCode>,
defaultValue: <EuiCode>{'{{data_stream.dataset}}'}</EuiCode>,
}}
/>
),
validations: [
{
validator: maxLengthField({
length: MAX_DATASET_LENGTH,
message: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.rerouteForm.datasetLengthError',
{
defaultMessage: 'The value must not contain more than 100 characters.',
}
),
}),
},
],
},
namespace: {
defaultValue: null,
type: FIELD_TYPES.COMBO_BOX,
deserializer: to.arrayOfStrings,
serializer: from.optionalArrayOfStrings,
label: i18n.translate('xpack.ingestPipelines.pipelineEditor.reroute.namespaceFieldLabel', {
defaultMessage: 'Namespace (optional)',
}),
helpText: (
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.reroute.namespaceFieldHelperText"
defaultMessage="Field references or a static value for the namespace part of the data stream name. Should meet the criteria for index names and must be no longer than 100 characters. Defaults to {defaultValue}."
values={{ defaultValue: <EuiCode>{'{{data_stream.namespace}}'}</EuiCode> }}
/>
),
validations: [
{
validator: maxLengthField({
length: MAX_NAMESPACE_LENGTH,
message: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.rerouteForm.namespaceLengthError',
{
defaultMessage: 'The value must not contain more than 100 characters.',
}
),
}),
},
],
},
const getFieldsConfig = (docService: DocumentationService): FieldsConfig => {
return {
/* Optional field configs */
destination: {
type: FIELD_TYPES.TEXT,
serializer: from.emptyStringToUndefined,
label: i18n.translate('xpack.ingestPipelines.pipelineEditor.reroute.destinationFieldLabel', {
defaultMessage: 'Destination (optional)',
}),
helpText: (
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.reroute.destinationFieldHelperText"
defaultMessage="A value for the target index. Not available when {dataset} or {namespace} is set."
values={{
dataset: <EuiCode>{'dataset'}</EuiCode>,
namespace: <EuiCode>{'namespace'}</EuiCode>,
}}
/>
),
},
dataset: {
defaultValue: null,
type: FIELD_TYPES.COMBO_BOX,
deserializer: to.arrayOfStrings,
serializer: from.optionalArrayOfStrings,
label: i18n.translate('xpack.ingestPipelines.pipelineEditor.reroute.datasetFieldLabel', {
defaultMessage: 'Dataset (optional)',
}),
helpText: (
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.reroute.datasetFieldHelperText"
defaultMessage="Field references or a static value for the dataset part of the data stream name. Must meet the criteria for {indexNamesLink}. Cannot contain {dash}. 100 characters max."
values={{
indexNamesLink: (
<EuiLink
href={`${docService.getEsDocsBasePath()}/indices-create-index.html#indices-create-api-path-params`}
target="_blank"
external
>
{i18n.translate('xpack.ingestPipelines.pipelineEditor.reroute.indexNameLink', {
defaultMessage: 'index names',
})}
</EuiLink>
),
dash: <EuiCode>{'-'}</EuiCode>,
}}
/>
),
validations: [
{
validator: maxLengthField({
length: MAX_DATASET_LENGTH,
message: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.rerouteForm.datasetLengthError',
{
defaultMessage: 'The value must not contain more than 100 characters.',
}
),
}),
},
],
},
namespace: {
defaultValue: null,
type: FIELD_TYPES.COMBO_BOX,
deserializer: to.arrayOfStrings,
serializer: from.optionalArrayOfStrings,
label: i18n.translate('xpack.ingestPipelines.pipelineEditor.reroute.namespaceFieldLabel', {
defaultMessage: 'Namespace (optional)',
}),
helpText: (
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.reroute.namespaceFieldHelperText"
defaultMessage="Field references or a static value for the namespace part of the data stream name. Must meet the criteria for {indexNamesLink}. 100 characters max."
values={{
indexNamesLink: (
<EuiLink
href={`${docService.getEsDocsBasePath()}/indices-create-index.html#indices-create-api-path-params`}
target="_blank"
external
>
{i18n.translate('xpack.ingestPipelines.pipelineEditor.reroute.indexNameLink', {
defaultMessage: 'index names',
})}
</EuiLink>
),
}}
/>
),
validations: [
{
validator: maxLengthField({
length: MAX_NAMESPACE_LENGTH,
message: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.rerouteForm.namespaceLengthError',
{
defaultMessage: 'The value must not contain more than 100 characters.',
}
),
}),
},
],
},
};
};
export const Reroute: FunctionComponent = () => {
const form = useFormContext();
const [{ fields }] = useFormData({ watch: ['fields.dataset', 'fields.namespace'] });
const { services } = useKibana();
const fieldsConfig = getFieldsConfig(services.documentation);
useEffect(() => {
if (
@ -142,6 +170,11 @@ export const Reroute: FunctionComponent = () => {
data-test-subj="datasetField"
config={fieldsConfig.dataset}
component={ComboBoxField}
componentProps={{
euiFieldProps: {
placeholder: '{{data_stream.dataset}}',
},
}}
path="fields.dataset"
/>
@ -149,6 +182,11 @@ export const Reroute: FunctionComponent = () => {
data-test-subj="namespaceField"
config={fieldsConfig.namespace}
component={ComboBoxField}
componentProps={{
euiFieldProps: {
placeholder: '{{data_stream.namespace}}',
},
}}
path="fields.namespace"
/>
</>

View file

@ -19864,9 +19864,7 @@
"xpack.ingestPipelines.pipelineEditor.redactForm.prefixFieldHelpText": "Commencez une section adaptée avec ce jeton. Sans spécification, la valeur par défaut est {defaultValue}.",
"xpack.ingestPipelines.pipelineEditor.redactForm.suffixFieldHelpText": "Terminez une section adaptée avec ce jeton. Sans spécification, la valeur par défaut est {defaultValue}.",
"xpack.ingestPipelines.pipelineEditor.removeProcessorModal.titleText": "Supprimer le processeur {type}",
"xpack.ingestPipelines.pipelineEditor.reroute.datasetFieldHelperText": "Références de champ ou valeur statique pour la partie \"dataset\" du nom du flux de données. En plus des critères pour les noms dindex, ils ne peuvent contenir de {dash} et ne peuvent pas dépasser 100 caractères. La valeur par défaut est de {defaultValue}.",
"xpack.ingestPipelines.pipelineEditor.reroute.destinationFieldHelperText": "Une valeur statique pour la cible. Ne peut pas être définie quand le {dataset} ou {namespace} est défini.",
"xpack.ingestPipelines.pipelineEditor.reroute.namespaceFieldHelperText": "Références de champ ou valeur statique pour la partie de lespace de nom du nom du flux de données. Doit répondre aux critères pour les noms dindex et ne doit pas dépasser 100 caractères. La valeur par défaut est de {defaultValue}.",
"xpack.ingestPipelines.pipelineEditor.scriptForm.langFieldHelpText": "Langage de script. La valeur par défaut est de {lang}.",
"xpack.ingestPipelines.pipelineEditor.setForm.copyFromFieldHelpText": "Champ à copier dans {field}.",
"xpack.ingestPipelines.pipelineEditor.setForm.ignoreEmptyValueFieldHelpText": "Si {valueField} est {nullValue} ou une chaîne vide, ne mettez pas ce champ à jour.",
@ -20062,10 +20060,8 @@
"xpack.ingestPipelines.pipelineEditor.circleForm.shapeTypeShape": "Forme",
"xpack.ingestPipelines.pipelineEditor.commonFields.fieldFieldLabel": "Champ",
"xpack.ingestPipelines.pipelineEditor.commonFields.fieldRequiredError": "Une valeur de champ est requise.",
"xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldHelpText": "Exécutez ce processeur selon certaines conditions.",
"xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldLabel": "Condition (facultatif)",
"xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureFieldLabel": "Ignorer l'échec",
"xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureHelpText": "Ignorer les échecs pour ce processeur.",
"xpack.ingestPipelines.pipelineEditor.commonFields.ignoreMissingFieldLabel": "Ignorer les éléments manquants",
"xpack.ingestPipelines.pipelineEditor.commonFields.keepOriginalFieldLabel": "Conserver l'original",
"xpack.ingestPipelines.pipelineEditor.commonFields.propertiesFieldLabel": "Propriétés (facultatif)",

View file

@ -19878,9 +19878,7 @@
"xpack.ingestPipelines.pipelineEditor.redactForm.prefixFieldHelpText": "このトークンを使用して、編集されたセクションを開始します。指定しない場合、デフォルトの{defaultValue}が使われます。",
"xpack.ingestPipelines.pipelineEditor.redactForm.suffixFieldHelpText": "このトークンを使用して、編集されたセクションを終了します。指定しない場合、デフォルトの{defaultValue}が使われます。",
"xpack.ingestPipelines.pipelineEditor.removeProcessorModal.titleText": "{type}プロセッサーの削除",
"xpack.ingestPipelines.pipelineEditor.reroute.datasetFieldHelperText": "データストリーム名のデータセット部分のフィールド参照または固定値。インデックス名の条件のほかに、{dash}を使用することはできず、100文字以下でなければなりません。デフォルトは{defaultValue}です。",
"xpack.ingestPipelines.pipelineEditor.reroute.destinationFieldHelperText": "ターゲットの固定値。{dataset}または{namespace}が設定されているときには設定できません。",
"xpack.ingestPipelines.pipelineEditor.reroute.namespaceFieldHelperText": "データストリーム名のネームスペース部分のフィールド参照または固定値。インデックス名の条件を満たし、100文字以下でなければなりません。デフォルトは{defaultValue}です。",
"xpack.ingestPipelines.pipelineEditor.scriptForm.langFieldHelpText": "スクリプト言語。デフォルトは{lang}です。",
"xpack.ingestPipelines.pipelineEditor.setForm.copyFromFieldHelpText": "{field}にコピーするフィールド。",
"xpack.ingestPipelines.pipelineEditor.setForm.ignoreEmptyValueFieldHelpText": "{valueField}が{nullValue}であるか、空の文字列である場合は、フィールドを更新しません。",
@ -20076,10 +20074,8 @@
"xpack.ingestPipelines.pipelineEditor.circleForm.shapeTypeShape": "形状",
"xpack.ingestPipelines.pipelineEditor.commonFields.fieldFieldLabel": "フィールド",
"xpack.ingestPipelines.pipelineEditor.commonFields.fieldRequiredError": "フィールド値が必要です。",
"xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldHelpText": "このプロセッサーを条件付きで実行します。",
"xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldLabel": "条件(任意)",
"xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureFieldLabel": "失敗を無視",
"xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureHelpText": "このプロセッサーのエラーを無視します。",
"xpack.ingestPipelines.pipelineEditor.commonFields.ignoreMissingFieldLabel": "不足している項目を無視",
"xpack.ingestPipelines.pipelineEditor.commonFields.keepOriginalFieldLabel": "オリジナルを保持",
"xpack.ingestPipelines.pipelineEditor.commonFields.propertiesFieldLabel": "プロパティ(任意)",

View file

@ -19878,9 +19878,7 @@
"xpack.ingestPipelines.pipelineEditor.redactForm.prefixFieldHelpText": "使用此令牌启动已编辑部分。如果未指定,则默认为 {defaultValue}。",
"xpack.ingestPipelines.pipelineEditor.redactForm.suffixFieldHelpText": "使用此令牌结束已编辑部分。如果未指定,则默认为 {defaultValue}。",
"xpack.ingestPipelines.pipelineEditor.removeProcessorModal.titleText": "删除 {type} 处理器",
"xpack.ingestPipelines.pipelineEditor.reroute.datasetFieldHelperText": "数据流名称的数据集部分的字段引用或静态值。除了索引命名条件以外,还不得包含{dash}并且长度不得超过 100 个字符。默认为 {defaultValue}。",
"xpack.ingestPipelines.pipelineEditor.reroute.destinationFieldHelperText": "目标的静态值。已设置 {dataset} 或 {namespace} 时无法设置。",
"xpack.ingestPipelines.pipelineEditor.reroute.namespaceFieldHelperText": "数据流名称的命名空间部分的字段引用或静态值。应满足索引命名条件,并且长度不得超过 100 个字符。默认为 {defaultValue}。",
"xpack.ingestPipelines.pipelineEditor.scriptForm.langFieldHelpText": "脚本语言。默认为 {lang}。",
"xpack.ingestPipelines.pipelineEditor.setForm.copyFromFieldHelpText": "要复制到 {field} 的字段。",
"xpack.ingestPipelines.pipelineEditor.setForm.ignoreEmptyValueFieldHelpText": "如果 {valueField} 是 {nullValue} 或空字符串,请不要更新该字段。",
@ -20076,10 +20074,8 @@
"xpack.ingestPipelines.pipelineEditor.circleForm.shapeTypeShape": "形状",
"xpack.ingestPipelines.pipelineEditor.commonFields.fieldFieldLabel": "字段",
"xpack.ingestPipelines.pipelineEditor.commonFields.fieldRequiredError": "需要字段值。",
"xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldHelpText": "有条件地运行此处理器。",
"xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldLabel": "条件(可选)",
"xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureFieldLabel": "忽略失败",
"xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureHelpText": "忽略此处理器的故障。",
"xpack.ingestPipelines.pipelineEditor.commonFields.ignoreMissingFieldLabel": "忽略缺失",
"xpack.ingestPipelines.pipelineEditor.commonFields.keepOriginalFieldLabel": "保留原始",
"xpack.ingestPipelines.pipelineEditor.commonFields.propertiesFieldLabel": "属性(可选)",