Skip to content

Commit 66a6ff3

Browse files
alisonelizabethalisonelizabeth
committed
address review feedback
1 parent 759a000 commit 66a6ff3

File tree

13 files changed

+188
-165
lines changed

13 files changed

+188
-165
lines changed

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

Lines changed: 50 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -4,146 +4,75 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7-
import React, { FunctionComponent, useState } from 'react';
7+
import React, { FunctionComponent } from 'react';
88
import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
99
import { i18n } from '@kbn/i18n';
1010
import { FormattedMessage } from '@kbn/i18n/react';
1111

1212
import { useKibana } from '../../../shared_imports';
1313

14-
import {
15-
usePipelineProcessorsContext,
16-
useTestPipelineContext,
17-
} from '../pipeline_processors_editor/context';
18-
1914
import {
2015
LoadFromJsonButton,
2116
OnDoneLoadJsonHandler,
22-
TestOutputButton,
23-
DocumentsDropdown,
24-
AddDocumentsButton,
25-
TestPipelineFlyout,
26-
TestPipelineFlyoutTab,
17+
TestPipelineActions,
2718
} from '../pipeline_processors_editor';
2819

2920
export interface Props {
3021
onLoadJson: OnDoneLoadJsonHandler;
3122
}
3223

3324
export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
34-
const {
35-
state: { processors },
36-
} = usePipelineProcessorsContext();
37-
const { testPipelineData, setCurrentTestPipelineData } = useTestPipelineContext();
3825
const { services } = useKibana();
3926

40-
const {
41-
testOutputPerProcessor,
42-
config: { documents, selectedDocumentIndex },
43-
} = testPipelineData;
44-
45-
const [openTestPipelineFlyout, setOpenTestPipelineFlyout] = useState(false);
46-
const [activeFlyoutTab, setActiveFlyoutTab] = useState<TestPipelineFlyoutTab>('documents');
47-
48-
const updateSelectedDocument = (index: number) => {
49-
setCurrentTestPipelineData({
50-
type: 'updateActiveDocument',
51-
payload: {
52-
config: {
53-
selectedDocumentIndex: index,
54-
},
55-
},
56-
});
57-
};
58-
5927
return (
60-
<>
61-
<EuiFlexGroup
62-
alignItems="center"
63-
gutterSize="s"
64-
justifyContent="spaceBetween"
65-
responsive={false}
66-
>
67-
<EuiFlexItem grow={false}>
68-
<EuiFlexGroup gutterSize="xs">
69-
<EuiFlexItem grow={false}>
70-
<EuiTitle size="s">
71-
<h3>
72-
{i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
73-
defaultMessage: 'Processors',
74-
})}
75-
</h3>
76-
</EuiTitle>
77-
</EuiFlexItem>
78-
<EuiFlexItem grow={false}>
79-
<LoadFromJsonButton onDone={onLoadJson} />
80-
</EuiFlexItem>
81-
</EuiFlexGroup>
82-
83-
<EuiText size="s" color="subdued">
84-
<FormattedMessage
85-
id="xpack.ingestPipelines.pipelineEditor.processorsTreeDescription"
86-
defaultMessage="The processors used to pre-process documents before indexing. {learnMoreLink}"
87-
values={{
88-
learnMoreLink: (
89-
<EuiLink
90-
href={services.documentation.getEsDocsBasePath() + '/ingest-processors.html'}
91-
target="_blank"
92-
external
93-
>
94-
{i18n.translate(
95-
'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
96-
{
97-
defaultMessage: 'Learn more.',
98-
}
99-
)}
100-
</EuiLink>
101-
),
102-
}}
103-
/>
104-
</EuiText>
105-
</EuiFlexItem>
106-
<EuiFlexItem grow={false}>
107-
<EuiFlexGroup gutterSize="s">
108-
<EuiFlexItem grow={false}>
109-
{documents ? (
110-
<DocumentsDropdown
111-
documents={documents}
112-
selectedDocumentIndex={selectedDocumentIndex}
113-
updateSelectedDocument={updateSelectedDocument}
114-
/>
115-
) : (
116-
<AddDocumentsButton
117-
openTestPipelineFlyout={() => {
118-
setOpenTestPipelineFlyout(true);
119-
setActiveFlyoutTab('documents');
120-
}}
121-
/>
122-
)}
123-
</EuiFlexItem>
124-
<EuiFlexItem grow={false}>
125-
<TestOutputButton
126-
isDisabled={Boolean(testOutputPerProcessor) === false}
127-
openTestPipelineFlyout={() => {
128-
setOpenTestPipelineFlyout(true);
129-
setActiveFlyoutTab('output');
130-
}}
131-
/>
132-
</EuiFlexItem>
133-
</EuiFlexGroup>
134-
</EuiFlexItem>
135-
</EuiFlexGroup>
28+
<EuiFlexGroup
29+
alignItems="center"
30+
gutterSize="s"
31+
justifyContent="spaceBetween"
32+
responsive={false}
33+
>
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>
13649

137-
{openTestPipelineFlyout && (
138-
<TestPipelineFlyout
139-
activeTab={activeFlyoutTab}
140-
processors={{
141-
processors: processors.state.processors,
142-
onFailure: processors.state.onFailure,
143-
}}
144-
onClose={() => setOpenTestPipelineFlyout(false)}
145-
/>
146-
)}
147-
</>
50+
<EuiText size="s" color="subdued">
51+
<FormattedMessage
52+
id="xpack.ingestPipelines.pipelineEditor.processorsTreeDescription"
53+
defaultMessage="The processors used to pre-process documents before indexing. {learnMoreLink}"
54+
values={{
55+
learnMoreLink: (
56+
<EuiLink
57+
href={services.documentation.getEsDocsBasePath() + '/ingest-processors.html'}
58+
target="_blank"
59+
external
60+
>
61+
{i18n.translate(
62+
'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
63+
{
64+
defaultMessage: 'Learn more.',
65+
}
66+
)}
67+
</EuiLink>
68+
),
69+
}}
70+
/>
71+
</EuiText>
72+
</EuiFlexItem>
73+
<EuiFlexItem grow={false}>
74+
<TestPipelineActions />
75+
</EuiFlexItem>
76+
</EuiFlexGroup>
14877
);
14978
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const DocumentsDropdown: FunctionComponent<Props> = ({
5656
<EuiFlexItem grow={false} className="documentsDropdown__selectContainer">
5757
<EuiSelect
5858
compressed
59-
options={getDocumentOptions(documents!)}
59+
options={getDocumentOptions(documents)}
6060
value={selectedDocumentIndex}
6161
onChange={(e) => {
6262
updateSelectedDocument(Number(e.target.value));

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

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

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

23-
export { TestPipelineFlyout, TestPipelineFlyoutTab } from './test_pipeline';
23+
export { TestPipelineActions } from './test_pipeline';
2424

25-
export { AddDocumentsButton } from './add_documents_button';
26-
export { TestOutputButton } from './test_output_button';
2725
export { DocumentsDropdown } from './documents_dropdown';
2826

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

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ interface ProcessorStatusIcon {
1515
label: string;
1616
}
1717

18-
const mapProcessorStatusToIcon: Record<string, ProcessorStatusIcon> = {
18+
const processorStatusToIconMap: Record<ProcessorStatus, ProcessorStatusIcon> = {
1919
success: {
2020
icon: 'checkInCircleFilled',
2121
iconColor: 'success',
@@ -60,12 +60,22 @@ const mapProcessorStatusToIcon: Record<string, ProcessorStatusIcon> = {
6060
},
6161
};
6262

63+
// This is a fallback in case ES returns a status we do not support
64+
// This is not expected and likely means we need to modify the code to support a new status
65+
const unknownStatus = {
66+
icon: 'dot',
67+
iconColor: 'subdued',
68+
label: i18n.translate('xpack.ingestPipelines.pipelineEditorItem.unknownStatusAriaLabel', {
69+
defaultMessage: 'Unknown',
70+
}),
71+
};
72+
6373
interface Props {
6474
processorStatus: ProcessorStatus;
6575
}
6676

6777
export const PipelineProcessorsItemStatus: FunctionComponent<Props> = ({ processorStatus }) => {
68-
const { icon, iconColor, label } = mapProcessorStatusToIcon[processorStatus];
78+
const { icon, iconColor, label } = processorStatusToIconMap[processorStatus] || unknownStatus;
6979

7080
return (
7181
<EuiToolTip position="top" content={<p>{label}</p>}>

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_documents_button.tsx‎ renamed to ‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/add_documents_button.tsx‎

File renamed without changes.

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,4 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7-
export { TestPipelineFlyout } from './test_pipeline_flyout';
8-
9-
export { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs';
7+
export { TestPipelineActions } from './test_pipeline_actions';

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_output_button.tsx‎ renamed to ‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_output_button.tsx‎

File renamed without changes.

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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 React, { FunctionComponent, useState } from 'react';
7+
8+
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
9+
import { useTestPipelineContext, usePipelineProcessorsContext } from '../../context';
10+
11+
import { DocumentsDropdown } from '../documents_dropdown';
12+
import { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs';
13+
import { AddDocumentsButton } from './add_documents_button';
14+
import { TestOutputButton } from './test_output_button';
15+
import { TestPipelineFlyout } from './test_pipeline_flyout';
16+
17+
export const TestPipelineActions: FunctionComponent = () => {
18+
const { testPipelineData, setCurrentTestPipelineData } = useTestPipelineContext();
19+
20+
const {
21+
state: { processors },
22+
} = usePipelineProcessorsContext();
23+
24+
const {
25+
testOutputPerProcessor,
26+
config: { documents, selectedDocumentIndex },
27+
} = testPipelineData;
28+
29+
const [openTestPipelineFlyout, setOpenTestPipelineFlyout] = useState(false);
30+
const [activeFlyoutTab, setActiveFlyoutTab] = useState<TestPipelineFlyoutTab>('documents');
31+
32+
const updateSelectedDocument = (index: number) => {
33+
setCurrentTestPipelineData({
34+
type: 'updateActiveDocument',
35+
payload: {
36+
config: {
37+
selectedDocumentIndex: index,
38+
},
39+
},
40+
});
41+
};
42+
43+
return (
44+
<>
45+
<EuiFlexGroup gutterSize="s">
46+
<EuiFlexItem grow={false}>
47+
{documents ? (
48+
<DocumentsDropdown
49+
documents={documents}
50+
selectedDocumentIndex={selectedDocumentIndex}
51+
updateSelectedDocument={updateSelectedDocument}
52+
/>
53+
) : (
54+
<AddDocumentsButton
55+
openTestPipelineFlyout={() => {
56+
setOpenTestPipelineFlyout(true);
57+
setActiveFlyoutTab('documents');
58+
}}
59+
/>
60+
)}
61+
</EuiFlexItem>
62+
<EuiFlexItem grow={false}>
63+
<TestOutputButton
64+
isDisabled={Boolean(testOutputPerProcessor) === false}
65+
openTestPipelineFlyout={() => {
66+
setOpenTestPipelineFlyout(true);
67+
setActiveFlyoutTab('output');
68+
}}
69+
/>
70+
</EuiFlexItem>
71+
</EuiFlexGroup>
72+
{openTestPipelineFlyout && (
73+
<TestPipelineFlyout
74+
activeTab={activeFlyoutTab}
75+
processors={{
76+
processors: processors.state.processors,
77+
onFailure: processors.state.onFailure,
78+
}}
79+
onClose={() => setOpenTestPipelineFlyout(false)}
80+
/>
81+
)}
82+
</>
83+
);
84+
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
6262

6363
const handleTestPipeline = useCallback(
6464
async ({ documents, verbose }: HandleTestPipelineArgs) => {
65-
const serializedProcessors = serialize(processors);
65+
const serializedProcessors = serialize({ pipeline: processors });
6666

6767
setIsRunningTest(true);
6868
setTestingError(null);

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,10 @@ export const PipelineProcessorsContextProvider: FunctionComponent<Props> = ({
128128
},
129129
getData: () =>
130130
serialize({
131-
onFailure: onFailureProcessors,
132-
processors,
131+
pipeline: {
132+
onFailure: onFailureProcessors,
133+
processors,
134+
},
133135
}),
134136
});
135137
}, [processors, onFailureProcessors, onUpdate, formState, mode]);

0 commit comments

Comments
 (0)