Skip to content

Commit

Permalink
cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@alisonelizabeth
alisonelizabeth committed Aug 13, 2020
1 parent 894ba23 commit 1f2ca4a
Show file tree
Hide file tree
Showing 23 changed files with 547 additions and 495 deletions.
68 changes: 31 additions & 37 deletions ...est_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
import { EuiLink, EuiText, EuiTitle } from '@elastic/eui';
import React, { FunctionComponent } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
Expand All @@ -13,43 +13,37 @@ import { usePipelineProcessorsContext } from '../pipeline_processors_editor/cont
export const OnFailureProcessorsTitle: FunctionComponent = () => {
const { links } = usePipelineProcessorsContext();
return (
<EuiFlexGroup
alignItems="center"
gutterSize="none"
justifyContent="spaceBetween"
responsive={false}
>
<EuiFlexItem>
<EuiTitle size="s">
<h3>
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.onFailureTreeTitle"
defaultMessage="Failure processors"
/>
</h3>
</EuiTitle>
<EuiText size="s" color="subdued">
<div className="pipelineProcessorsEditor__onFailureTitle">
<EuiTitle size="xs">
<h4>
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.onFailureTreeDescription"
defaultMessage="The processors used to handle exceptions in this pipeline. {learnMoreLink}"
values={{
learnMoreLink: (
<EuiLink
href={links.esDocsBasePath + '/handling-failure-in-pipelines.html'}
target="_blank"
>
{i18n.translate(
'xpack.ingestPipelines.pipelineEditor.onFailureProcessorsDocumentationLink',
{
defaultMessage: 'Learn more.',
}
)}
</EuiLink>
),
}}
id="xpack.ingestPipelines.pipelineEditor.onFailureTreeTitle"
defaultMessage="Failure processors"
/>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</h4>
</EuiTitle>
<EuiText size="s" color="subdued">
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.onFailureTreeDescription"
defaultMessage="The processors used to handle exceptions in this pipeline. {learnMoreLink}"
values={{
learnMoreLink: (
<EuiLink
href={links.esDocsBasePath + '/handling-failure-in-pipelines.html'}
target="_blank"
external
>
{i18n.translate(
'xpack.ingestPipelines.pipelineEditor.onFailureProcessorsDocumentationLink',
{
defaultMessage: 'Learn more.',
}
)}
</EuiLink>
),
}}
/>
</EuiText>
</div>
);
};
8 changes: 8 additions & 0 deletions ...k/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
.pipelineProcessorsEditor {
margin-bottom: $euiSizeXL;

&__container {
background-color: $euiColorLightestShade;
}

&__onFailureTitle {
padding-left: $euiSizeS;
}
}
11 changes: 4 additions & 7 deletions ...ins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,16 +134,13 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
<EuiFlexItem grow={false}>
<ProcessorsHeader onLoadJson={onLoadJson} />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexItem grow={false} className="pipelineProcessorsEditor__container">
<ProcessorsEditor />
</EuiFlexItem>
<EuiFlexItem>

<EuiSpacer size="s" />
</EuiFlexItem>
<EuiFlexItem grow={false}>

<OnFailureProcessorsTitle />
</EuiFlexItem>
<EuiFlexItem grow={false}>

<GlobalOnFailureProcessorsEditor />
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
130 changes: 86 additions & 44 deletions ...lugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, useState } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
Expand All @@ -17,8 +17,11 @@ import {
import {
LoadFromJsonButton,
OnDoneLoadJsonHandler,
OutputButton,
TestOutputButton,
DocumentsDropdown,
AddDocumentsButton,
TestPipelineFlyout,
TestPipelineFlyoutTab,
} from '../pipeline_processors_editor';

export interface Props {
Expand All @@ -29,51 +32,90 @@ export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
const { links } = usePipelineProcessorsContext();
const { testPipelineData } = useTestPipelineContext();

const { results } = testPipelineData;
const {
testOutput,
config: { documents },
} = testPipelineData;

const [openTestPipelineFlyout, setOpenTestPipelineFlyout] = useState(false);
const [activeFlyoutTab, setActiveFlyoutTab] = useState<TestPipelineFlyoutTab>('documents');

return (
<EuiFlexGroup
alignItems="center"
gutterSize="s"
justifyContent="spaceBetween"
responsive={false}
>
<EuiFlexItem>
<EuiTitle size="s">
<h3>
{i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
defaultMessage: 'Processors',
})}
</h3>
</EuiTitle>
<EuiText size="s" color="subdued">
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.processorsTreeDescription"
defaultMessage="The processors used to pre-process documents before indexing. {learnMoreLink}"
values={{
learnMoreLink: (
<EuiLink href={links.esDocsBasePath + '/ingest-processors.html'} target="_blank">
{i18n.translate(
'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
{
defaultMessage: 'Learn more.',
}
)}
</EuiLink>
),
<>
<EuiFlexGroup
alignItems="center"
gutterSize="s"
justifyContent="spaceBetween"
responsive={false}
>
<EuiFlexItem>
<EuiFlexGroup gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h3>
{i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
defaultMessage: 'Processors',
})}
</h3>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<LoadFromJsonButton onDone={onLoadJson} />
</EuiFlexItem>
</EuiFlexGroup>

<EuiText size="s" color="subdued">
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.processorsTreeDescription"
defaultMessage="The processors used to pre-process documents before indexing. {learnMoreLink}"
values={{
learnMoreLink: (
<EuiLink
href={links.esDocsBasePath + '/ingest-processors.html'}
target="_blank"
external
>
{i18n.translate(
'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
{
defaultMessage: 'Learn more.',
}
)}
</EuiLink>
),
}}
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{documents ? (
<DocumentsDropdown />
) : (
<AddDocumentsButton
openFlyout={() => {
setOpenTestPipelineFlyout(true);
setActiveFlyoutTab('documents');
}}
/>
)}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<TestOutputButton
isDisabled={Boolean(testOutput) === false}
openFlyout={() => {
setOpenTestPipelineFlyout(true);
setActiveFlyoutTab('output');
}}
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<LoadFromJsonButton onDone={onLoadJson} />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<DocumentsDropdown />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<OutputButton isDisabled={Boolean(results) === false} />
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>

{openTestPipelineFlyout && (
<TestPipelineFlyout
activeTab={activeFlyoutTab}
onClose={() => setOpenTestPipelineFlyout(false)}
/>
)}
</>
);
};
8 changes: 7 additions & 1 deletion ...st_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ export { ProcessorRemoveModal } from './processor_remove_modal';

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

export { AddDocumentsButton, OutputButton, DocumentsDropdown } from './test_pipeline';
export {
AddDocumentsButton,
TestOutputButton,
DocumentsDropdown,
TestPipelineFlyout,
TestPipelineFlyoutTab,
} from './test_pipeline';

export { PipelineProcessorsItemTooltip, Position } from './pipeline_processors_editor_item_tooltip';
34 changes: 27 additions & 7 deletions ...nts/pipeline_processors_editor/components/manage_processor_form/manage_processor_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,10 +114,15 @@ export const ManageProcessorForm: FunctionComponent<Props> = memo(
({ processor, form, isOnFailure, onClose, onOpen, esDocsBasePath }) => {
const { testPipelineData, setCurrentTestPipelineData } = useTestPipelineContext();
const {
resultsByProcessor,
config: { documents },
testOutputByProcessor,
config: { documents, selectedDocumentIndex },
} = testPipelineData;

const processorOutput =
processor &&
testOutputByProcessor &&
testOutputByProcessor[selectedDocumentIndex][processor.id];

const {
state: { processors },
api,
Expand All @@ -130,16 +135,28 @@ export const ManageProcessorForm: FunctionComponent<Props> = memo(

const serializedProcessorsWithTag = serialize(processors.state, true);

const { data: verboseResults } = await api.simulatePipeline({
const { data: verboseResults, error } = await api.simulatePipeline({
documents,
verbose: true,
pipeline: { ...serializedProcessorsWithTag },
});

if (error) {
setCurrentTestPipelineData({
type: 'updateIsExecuting',
payload: {
isExecuting: false,
},
});

return;
}

setCurrentTestPipelineData({
type: 'updateResultsByProcessor',
type: 'updateOutputByProcessor',
payload: {
resultsByProcessor: deserializeVerboseTestOutput(verboseResults),
testOutputByProcessor: deserializeVerboseTestOutput(verboseResults),
isExecuting: false,
},
});
};
Expand All @@ -156,7 +173,7 @@ export const ManageProcessorForm: FunctionComponent<Props> = memo(
let flyoutContent: React.ReactNode;

if (activeTab === 'output' && processor) {
flyoutContent = <ProcessorOutput processor={processor} />;
flyoutContent = <ProcessorOutput processorOutput={processorOutput} />;
} else {
flyoutContent = <ProcessorSettingsFields processor={processor} />;
}
Expand Down Expand Up @@ -204,7 +221,10 @@ export const ManageProcessorForm: FunctionComponent<Props> = memo(
isSelected={tab.id === activeTab}
key={tab.id}
data-test-subj={`${tab.id}Tab`}
disabled={tab.id === 'output' && Boolean(resultsByProcessor) === false}
disabled={
(tab.id === 'output' && Boolean(testOutputByProcessor) === false) ||
Boolean(processorOutput) === false
}
>
{tab.name}
</EuiTab>
Expand Down
Loading

0 comments on commit 1f2ca4a

Please sign in to comment.