Skip to content

Commit c62d4c3

Browse files
alisonelizabethalisonelizabeth
committed
[Ingest pipelines] Test pipeline enhancements (#74964)
1 parent eeba9c7 commit c62d4c3

40 files changed

Lines changed: 1291 additions & 393 deletions

‎x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ export const getFormActions = (testBed: TestBed) => {
1313
find('submitButton').simulate('click');
1414
};
1515

16-
const clickTestPipelineButton = () => {
17-
find('testPipelineButton').simulate('click');
16+
const clickAddDocumentsButton = () => {
17+
find('addDocumentsButton').simulate('click');
1818
};
1919

2020
const clickShowRequestLink = () => {
@@ -34,11 +34,12 @@ export const getFormActions = (testBed: TestBed) => {
3434
clickShowRequestLink,
3535
toggleVersionSwitch,
3636
toggleOnFailureSwitch,
37-
clickTestPipelineButton,
37+
clickAddDocumentsButton,
3838
};
3939
};
4040

4141
export type PipelineFormTestSubjects =
42+
| 'addDocumentsButton'
4243
| 'submitButton'
4344
| 'pageTitle'
4445
| 'savePipelineError'

‎x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ describe('<PipelinesCreate />', () => {
201201
const { actions, exists, find, waitFor } = testBed;
202202

203203
await act(async () => {
204-
actions.clickTestPipelineButton();
204+
actions.clickAddDocumentsButton();
205205
await waitFor('testPipelineFlyout');
206206
});
207207

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx‎

Lines changed: 34 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* or more contributor license agreements. Licensed under the Elastic License;
44
* you may not use this file except in compliance with the Elastic License.
55
*/
6-
import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
6+
import { EuiLink, EuiText, EuiTitle } from '@elastic/eui';
77
import React, { FunctionComponent } from 'react';
88
import { i18n } from '@kbn/i18n';
99
import { FormattedMessage } from '@kbn/i18n/react';
@@ -12,47 +12,41 @@ import { useKibana } from '../../../shared_imports';
1212

1313
export const OnFailureProcessorsTitle: FunctionComponent = () => {
1414
const { services } = useKibana();
15+
1516
return (
16-
<EuiFlexGroup
17-
alignItems="center"
18-
gutterSize="none"
19-
justifyContent="spaceBetween"
20-
responsive={false}
21-
>
22-
<EuiFlexItem>
23-
<EuiTitle size="s">
24-
<h3>
25-
<FormattedMessage
26-
id="xpack.ingestPipelines.pipelineEditor.onFailureTreeTitle"
27-
defaultMessage="Failure processors"
28-
/>
29-
</h3>
30-
</EuiTitle>
31-
<EuiText size="s" color="subdued">
17+
<div className="pipelineProcessorsEditor__onFailureTitle">
18+
<EuiTitle size="xs">
19+
<h4>
3220
<FormattedMessage
33-
id="xpack.ingestPipelines.pipelineEditor.onFailureTreeDescription"
34-
defaultMessage="The processors used to handle exceptions in this pipeline. {learnMoreLink}"
35-
values={{
36-
learnMoreLink: (
37-
<EuiLink
38-
href={
39-
services.documentation.getEsDocsBasePath() +
40-
'/handling-failure-in-pipelines.html'
41-
}
42-
target="_blank"
43-
>
44-
{i18n.translate(
45-
'xpack.ingestPipelines.pipelineEditor.onFailureProcessorsDocumentationLink',
46-
{
47-
defaultMessage: 'Learn more.',
48-
}
49-
)}
50-
</EuiLink>
51-
),
52-
}}
21+
id="xpack.ingestPipelines.pipelineEditor.onFailureTreeTitle"
22+
defaultMessage="Failure processors"
5323
/>
54-
</EuiText>
55-
</EuiFlexItem>
56-
</EuiFlexGroup>
24+
</h4>
25+
</EuiTitle>
26+
<EuiText size="s" color="subdued">
27+
<FormattedMessage
28+
id="xpack.ingestPipelines.pipelineEditor.onFailureTreeDescription"
29+
defaultMessage="The processors used to handle exceptions in this pipeline. {learnMoreLink}"
30+
values={{
31+
learnMoreLink: (
32+
<EuiLink
33+
href={
34+
services.documentation.getEsDocsBasePath() + '/handling-failure-in-pipelines.html'
35+
}
36+
target="_blank"
37+
external
38+
>
39+
{i18n.translate(
40+
'xpack.ingestPipelines.pipelineEditor.onFailureProcessorsDocumentationLink',
41+
{
42+
defaultMessage: 'Learn more.',
43+
}
44+
)}
45+
</EuiLink>
46+
),
47+
}}
48+
/>
49+
</EuiText>
50+
</div>
5751
);
5852
};

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
.pipelineProcessorsEditor {
22
margin-bottom: $euiSizeXL;
3+
4+
&__container {
5+
background-color: $euiColorLightestShade;
6+
}
7+
8+
&__onFailureTitle {
9+
padding-left: $euiSizeS;
10+
}
311
}

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -129,16 +129,13 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
129129
<EuiFlexItem grow={false}>
130130
<ProcessorsHeader onLoadJson={onLoadJson} />
131131
</EuiFlexItem>
132-
<EuiFlexItem grow={false}>
132+
<EuiFlexItem grow={false} className="pipelineProcessorsEditor__container">
133133
<ProcessorsEditor />
134-
</EuiFlexItem>
135-
<EuiFlexItem>
134+
136135
<EuiSpacer size="s" />
137-
</EuiFlexItem>
138-
<EuiFlexItem grow={false}>
136+
139137
<OnFailureProcessorsTitle />
140-
</EuiFlexItem>
141-
<EuiFlexItem grow={false}>
138+
142139
<GlobalOnFailureProcessorsEditor />
143140
</EuiFlexItem>
144141
</EuiFlexGroup>

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { useKibana } from '../../../shared_imports';
1414
import {
1515
LoadFromJsonButton,
1616
OnDoneLoadJsonHandler,
17-
TestPipelineButton,
17+
TestPipelineActions,
1818
} from '../pipeline_processors_editor';
1919

2020
export interface Props {
@@ -23,21 +23,30 @@ export interface Props {
2323

2424
export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
2525
const { services } = useKibana();
26+
2627
return (
2728
<EuiFlexGroup
2829
alignItems="center"
2930
gutterSize="s"
3031
justifyContent="spaceBetween"
3132
responsive={false}
3233
>
33-
<EuiFlexItem>
34-
<EuiTitle size="s">
35-
<h3>
36-
{i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
37-
defaultMessage: 'Processors',
38-
})}
39-
</h3>
40-
</EuiTitle>
34+
<EuiFlexItem grow={false}>
35+
<EuiFlexGroup gutterSize="xs">
36+
<EuiFlexItem grow={false}>
37+
<EuiTitle size="s">
38+
<h3>
39+
{i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
40+
defaultMessage: 'Processors',
41+
})}
42+
</h3>
43+
</EuiTitle>
44+
</EuiFlexItem>
45+
<EuiFlexItem grow={false}>
46+
<LoadFromJsonButton onDone={onLoadJson} />
47+
</EuiFlexItem>
48+
</EuiFlexGroup>
49+
4150
<EuiText size="s" color="subdued">
4251
<FormattedMessage
4352
id="xpack.ingestPipelines.pipelineEditor.processorsTreeDescription"
@@ -47,6 +56,7 @@ export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
4756
<EuiLink
4857
href={services.documentation.getEsDocsBasePath() + '/ingest-processors.html'}
4958
target="_blank"
59+
external
5060
>
5161
{i18n.translate(
5262
'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
@@ -61,10 +71,7 @@ export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
6171
</EuiText>
6272
</EuiFlexItem>
6373
<EuiFlexItem grow={false}>
64-
<LoadFromJsonButton onDone={onLoadJson} />
65-
</EuiFlexItem>
66-
<EuiFlexItem grow={false}>
67-
<TestPipelineButton />
74+
<TestPipelineActions />
6875
</EuiFlexItem>
6976
</EuiFlexGroup>
7077
);

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/documents_dropdown/documents_dropdown.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.documentsDropdown__selectContainer {
2+
max-width: 200px;
3+
}

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/documents_dropdown/documents_dropdown.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
import { i18n } from '@kbn/i18n';
7+
import React, { FunctionComponent } from 'react';
8+
import { EuiSelect, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
9+
10+
import { Document } from '../../types';
11+
12+
import './documents_dropdown.scss';
13+
14+
const i18nTexts = {
15+
ariaLabel: i18n.translate(
16+
'xpack.ingestPipelines.pipelineEditor.testPipeline.documentsDropdownAriaLabel',
17+
{
18+
defaultMessage: 'Select documents',
19+
}
20+
),
21+
dropdownLabel: i18n.translate(
22+
'xpack.ingestPipelines.pipelineEditor.testPipeline.documentsdropdownLabel',
23+
{
24+
defaultMessage: 'Documents:',
25+
}
26+
),
27+
buttonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.testPipeline.buttonLabel', {
28+
defaultMessage: 'Add documents',
29+
}),
30+
};
31+
32+
const getDocumentOptions = (documents: Document[]) =>
33+
documents.map((doc, index) => ({
34+
value: index,
35+
text: doc._id,
36+
}));
37+
38+
interface Props {
39+
documents: Document[];
40+
selectedDocumentIndex: number;
41+
updateSelectedDocument: (index: number) => void;
42+
}
43+
44+
export const DocumentsDropdown: FunctionComponent<Props> = ({
45+
documents,
46+
selectedDocumentIndex,
47+
updateSelectedDocument,
48+
}) => {
49+
return (
50+
<EuiFlexGroup alignItems="baseline" gutterSize="s" className="documentsDropdown">
51+
<EuiFlexItem grow={false}>
52+
<EuiText>
53+
<span>{i18nTexts.dropdownLabel}</span>
54+
</EuiText>
55+
</EuiFlexItem>
56+
<EuiFlexItem grow={false} className="documentsDropdown__selectContainer">
57+
<EuiSelect
58+
compressed
59+
options={getDocumentOptions(documents)}
60+
value={selectedDocumentIndex}
61+
onChange={(e) => {
62+
updateSelectedDocument(Number(e.target.value));
63+
}}
64+
aria-label={i18nTexts.ariaLabel}
65+
/>
66+
</EuiFlexItem>
67+
</EuiFlexGroup>
68+
);
69+
};

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/documents_dropdown/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
export { DocumentsDropdown } from './documents_dropdown';

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export { ProcessorRemoveModal } from './processor_remove_modal';
2020

2121
export { OnDoneLoadJsonHandler, LoadFromJsonButton } from './load_from_json';
2222

23-
export { TestPipelineButton } from './test_pipeline';
23+
export { TestPipelineActions } from './test_pipeline';
24+
25+
export { DocumentsDropdown } from './documents_dropdown';
2426

2527
export { PipelineProcessorsItemTooltip, Position } from './pipeline_processors_editor_item_tooltip';

0 commit comments

Comments
 (0)