address review feedback

elastic · Aug 19, 2020 · 66a6ff3 · 66a6ff3
1 parent 759a000
commit 66a6ff3
Show file tree

Hide file tree

Showing 13 changed files with 188 additions and 165 deletions.
diff --git a/...lugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx b/...lugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx
@@ -4,146 +4,75 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { useKibana } from '../../../shared_imports';
 
-import {
-  usePipelineProcessorsContext,
-  useTestPipelineContext,
-} from '../pipeline_processors_editor/context';
-
 import {
   LoadFromJsonButton,
   OnDoneLoadJsonHandler,
-  TestOutputButton,
-  DocumentsDropdown,
-  AddDocumentsButton,
-  TestPipelineFlyout,
-  TestPipelineFlyoutTab,
+  TestPipelineActions,
 } from '../pipeline_processors_editor';
 
 export interface Props {
   onLoadJson: OnDoneLoadJsonHandler;
 }
 
 export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
-  const {
-    state: { processors },
-  } = usePipelineProcessorsContext();
-  const { testPipelineData, setCurrentTestPipelineData } = useTestPipelineContext();
   const { services } = useKibana();
 
-  const {
-    testOutputPerProcessor,
-    config: { documents, selectedDocumentIndex },
-  } = testPipelineData;
-
-  const [openTestPipelineFlyout, setOpenTestPipelineFlyout] = useState(false);
-  const [activeFlyoutTab, setActiveFlyoutTab] = useState<TestPipelineFlyoutTab>('documents');
-
-  const updateSelectedDocument = (index: number) => {
-    setCurrentTestPipelineData({
-      type: 'updateActiveDocument',
-      payload: {
-        config: {
-          selectedDocumentIndex: index,
-        },
-      },
-    });
-  };
-
   return (
-    <>
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="s"
-        justifyContent="spaceBetween"
-        responsive={false}
-      >
-        <EuiFlexItem grow={false}>
-          <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={services.documentation.getEsDocsBasePath() + '/ingest-processors.html'}
-                    target="_blank"
-                    external
-                  >
-                    {i18n.translate(
-                      'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
-                      {
-                        defaultMessage: 'Learn more.',
-                      }
-                    )}
-                  </EuiLink>
-                ),
-              }}
-            />
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiFlexGroup gutterSize="s">
-            <EuiFlexItem grow={false}>
-              {documents ? (
-                <DocumentsDropdown
-                  documents={documents}
-                  selectedDocumentIndex={selectedDocumentIndex}
-                  updateSelectedDocument={updateSelectedDocument}
-                />
-              ) : (
-                <AddDocumentsButton
-                  openTestPipelineFlyout={() => {
-                    setOpenTestPipelineFlyout(true);
-                    setActiveFlyoutTab('documents');
-                  }}
-                />
-              )}
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <TestOutputButton
-                isDisabled={Boolean(testOutputPerProcessor) === false}
-                openTestPipelineFlyout={() => {
-                  setOpenTestPipelineFlyout(true);
-                  setActiveFlyoutTab('output');
-                }}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+    <EuiFlexGroup
+      alignItems="center"
+      gutterSize="s"
+      justifyContent="spaceBetween"
+      responsive={false}
+    >
+      <EuiFlexItem grow={false}>
+        <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>
 
-      {openTestPipelineFlyout && (
-        <TestPipelineFlyout
-          activeTab={activeFlyoutTab}
-          processors={{
-            processors: processors.state.processors,
-            onFailure: processors.state.onFailure,
-          }}
-          onClose={() => setOpenTestPipelineFlyout(false)}
-        />
-      )}
-    </>
+        <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={services.documentation.getEsDocsBasePath() + '/ingest-processors.html'}
+                  target="_blank"
+                  external
+                >
+                  {i18n.translate(
+                    'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
+                    {
+                      defaultMessage: 'Learn more.',
+                    }
+                  )}
+                </EuiLink>
+              ),
+            }}
+          />
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <TestPipelineActions />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
diff --git a/...omponents/pipeline_processors_editor/components/documents_dropdown/documents_dropdown.tsx b/...omponents/pipeline_processors_editor/components/documents_dropdown/documents_dropdown.tsx
@@ -56,7 +56,7 @@ export const DocumentsDropdown: FunctionComponent<Props> = ({
       <EuiFlexItem grow={false} className="documentsDropdown__selectContainer">
         <EuiSelect
           compressed
-          options={getDocumentOptions(documents!)}
+          options={getDocumentOptions(documents)}
           value={selectedDocumentIndex}
           onChange={(e) => {
             updateSelectedDocument(Number(e.target.value));

diff --git a/...st_pipelines/public/application/components/pipeline_processors_editor/components/index.ts b/...st_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
@@ -20,10 +20,8 @@ export { ProcessorRemoveModal } from './processor_remove_modal';
 
 export { OnDoneLoadJsonHandler, LoadFromJsonButton } from './load_from_json';
 
-export { TestPipelineFlyout, TestPipelineFlyoutTab } from './test_pipeline';
+export { TestPipelineActions } from './test_pipeline';
 
-export { AddDocumentsButton } from './add_documents_button';
-export { TestOutputButton } from './test_output_button';
 export { DocumentsDropdown } from './documents_dropdown';
 
 export { PipelineProcessorsItemTooltip, Position } from './pipeline_processors_editor_item_tooltip';
diff --git a/...mponents/pipeline_processors_editor/components/pipeline_processors_editor_item_status.tsx b/...mponents/pipeline_processors_editor/components/pipeline_processors_editor_item_status.tsx
@@ -15,7 +15,7 @@ interface ProcessorStatusIcon {
   label: string;
 }
 
-const mapProcessorStatusToIcon: Record<string, ProcessorStatusIcon> = {
+const processorStatusToIconMap: Record<ProcessorStatus, ProcessorStatusIcon> = {
   success: {
     icon: 'checkInCircleFilled',
     iconColor: 'success',
@@ -60,12 +60,22 @@ const mapProcessorStatusToIcon: Record<string, ProcessorStatusIcon> = {
   },
 };
 
+// This is a fallback in case ES returns a status we do not support
+// This is not expected and likely means we need to modify the code to support a new status
+const unknownStatus = {
+  icon: 'dot',
+  iconColor: 'subdued',
+  label: i18n.translate('xpack.ingestPipelines.pipelineEditorItem.unknownStatusAriaLabel', {
+    defaultMessage: 'Unknown',
+  }),
+};
+
 interface Props {
   processorStatus: ProcessorStatus;
 }
 
 export const PipelineProcessorsItemStatus: FunctionComponent<Props> = ({ processorStatus }) => {
-  const { icon, iconColor, label } = mapProcessorStatusToIcon[processorStatus];
+  const { icon, iconColor, label } = processorStatusToIconMap[processorStatus] || unknownStatus;
 
   return (
     <EuiToolTip position="top" content={<p>{label}</p>}>

diff --git a/...ditor/components/add_documents_button.tsx → ...ts/test_pipeline/add_documents_button.tsx b/...ditor/components/add_documents_button.tsx → ...ts/test_pipeline/add_documents_button.tsx
diff --git a/...ublic/application/components/pipeline_processors_editor/components/test_pipeline/index.ts b/...ublic/application/components/pipeline_processors_editor/components/test_pipeline/index.ts
@@ -4,6 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { TestPipelineFlyout } from './test_pipeline_flyout';
-
-export { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs';
+export { TestPipelineActions } from './test_pipeline_actions';
diff --git a/..._editor/components/test_output_button.tsx → ...ents/test_pipeline/test_output_button.tsx b/..._editor/components/test_output_button.tsx → ...ents/test_pipeline/test_output_button.tsx
diff --git a/.../components/pipeline_processors_editor/components/test_pipeline/test_pipeline_actions.tsx b/.../components/pipeline_processors_editor/components/test_pipeline/test_pipeline_actions.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { FunctionComponent, useState } from 'react';
+
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { useTestPipelineContext, usePipelineProcessorsContext } from '../../context';
+
+import { DocumentsDropdown } from '../documents_dropdown';
+import { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs';
+import { AddDocumentsButton } from './add_documents_button';
+import { TestOutputButton } from './test_output_button';
+import { TestPipelineFlyout } from './test_pipeline_flyout';
+
+export const TestPipelineActions: FunctionComponent = () => {
+  const { testPipelineData, setCurrentTestPipelineData } = useTestPipelineContext();
+
+  const {
+    state: { processors },
+  } = usePipelineProcessorsContext();
+
+  const {
+    testOutputPerProcessor,
+    config: { documents, selectedDocumentIndex },
+  } = testPipelineData;
+
+  const [openTestPipelineFlyout, setOpenTestPipelineFlyout] = useState(false);
+  const [activeFlyoutTab, setActiveFlyoutTab] = useState<TestPipelineFlyoutTab>('documents');
+
+  const updateSelectedDocument = (index: number) => {
+    setCurrentTestPipelineData({
+      type: 'updateActiveDocument',
+      payload: {
+        config: {
+          selectedDocumentIndex: index,
+        },
+      },
+    });
+  };
+
+  return (
+    <>
+      <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem grow={false}>
+          {documents ? (
+            <DocumentsDropdown
+              documents={documents}
+              selectedDocumentIndex={selectedDocumentIndex}
+              updateSelectedDocument={updateSelectedDocument}
+            />
+          ) : (
+            <AddDocumentsButton
+              openTestPipelineFlyout={() => {
+                setOpenTestPipelineFlyout(true);
+                setActiveFlyoutTab('documents');
+              }}
+            />
+          )}
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <TestOutputButton
+            isDisabled={Boolean(testOutputPerProcessor) === false}
+            openTestPipelineFlyout={() => {
+              setOpenTestPipelineFlyout(true);
+              setActiveFlyoutTab('output');
+            }}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {openTestPipelineFlyout && (
+        <TestPipelineFlyout
+          activeTab={activeFlyoutTab}
+          processors={{
+            processors: processors.state.processors,
+            onFailure: processors.state.onFailure,
+          }}
+          onClose={() => setOpenTestPipelineFlyout(false)}
+        />
+      )}
+    </>
+  );
+};
diff --git a/...n/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout.tsx b/...n/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout.tsx
@@ -62,7 +62,7 @@ export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
 
   const handleTestPipeline = useCallback(
     async ({ documents, verbose }: HandleTestPipelineArgs) => {
-      const serializedProcessors = serialize(processors);
+      const serializedProcessors = serialize({ pipeline: processors });
 
       setIsRunningTest(true);
       setTestingError(null);

diff --git a/...s/public/application/components/pipeline_processors_editor/context/processors_context.tsx b/...s/public/application/components/pipeline_processors_editor/context/processors_context.tsx
@@ -128,8 +128,10 @@ export const PipelineProcessorsContextProvider: FunctionComponent<Props> = ({
       },
       getData: () =>
         serialize({
-          onFailure: onFailureProcessors,
-          processors,
+          pipeline: {
+            onFailure: onFailureProcessors,
+            processors,
+          },
         }),
     });
   }, [processors, onFailureProcessors, onUpdate, formState, mode]);