[Ingest pipelines] Cleanup

x-pack/plugins/ingest_pipelines/README.md

@@ -1,9 +1,24 @@
-# ingest_pipelines
+# Ingest Node Pipelines UI
 
-> Ingest node pipelines UI
+## Summary
+The `ingest_pipelines` plugin provides Kibana support for [Elasticsearch's ingest nodes](https://www.elastic.co/guide/en/elasticsearch/reference/master/ingest.html). Please refer to the Elasticsearch documentation for more details.
+
+This plugin allows Kibana to create, edit, clone and delete ingest node pipelines. It also provides support to simulate a pipeline.
+
+It requires a Basic license and the following cluster privileges: `manage_pipeline` and `cluster:monitor/nodes/info`.
 
 ---
 
 ## Development
 
-See the [kibana contributing guide](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md) for instructions setting up your development environment.
+A new app called Ingest Node Pipelines is registered in the Management section and follows a typical CRUD UI pattern. The client-side portion of this app lives in [public/application](public/application) and uses endpoints registered in [server/routes/api](server/routes/api).
+
+See the [kibana contributing guide](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md) for instructions on setting up your development environment.
+
+### Test coverage
+
+The app has the following test coverage:
+
+- Complete API integration tests
+- Smoke-level functional test
+- Client-integration tests

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

@@ -5,5 +5,3 @@
  */
 
 export { PipelineForm } from './pipeline_form';
-
-export { PipelineRequestFlyoutProvider as PipelineRequestFlyout } from './pipeline_request_flyout_provider';

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

@@ -11,7 +11,7 @@ import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from
 import { useForm, Form, FormConfig } from '../../../shared_imports';
 import { Pipeline } from '../../../../common/types';
 
-import { PipelineRequestFlyout } from '../';
+import { PipelineRequestFlyout } from './pipeline_request_flyout';
 import { PipelineTestFlyout } from './pipeline_test_flyout';
 import { PipelineFormFields } from './pipeline_form_fields';
 import { PipelineFormError } from './pipeline_form_error';
@@ -85,8 +85,6 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
         isInvalid={form.isSubmitted && !form.isValid}
         error={form.getErrors()}
       >
-        <EuiSpacer size="l" />
-
         {/* Request error */}
         {saveError && <PipelineFormError errorMessage={saveError.message} />}
 
@@ -101,9 +99,9 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
 
         {/* Form submission */}
         <EuiFlexGroup justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem>
             <EuiFlexGroup>
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <EuiButton
                   fill
                   color="secondary"
@@ -116,7 +114,7 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
                   {saveButtonLabel}
                 </EuiButton>
               </EuiFlexItem>
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <EuiButtonEmpty color="primary" onClick={onCancel}>
                   <FormattedMessage
                     id="xpack.ingestPipelines.form.cancelButtonLabel"

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { PipelineRequestFlyoutProvider as PipelineRequestFlyout } from './pipeline_request_flyout_provider';

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_request_flyout.tsx → x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx

@@ -19,7 +19,7 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
-import { Pipeline } from '../../../common/types';
+import { Pipeline } from '../../../../../common/types';
 
 interface Props {
   pipeline: Pipeline;
@@ -40,7 +40,7 @@ export const PipelineRequestFlyout: React.FunctionComponent<Props> = ({
   uuid.current++;
 
   return (
-    <EuiFlyout maxWidth={480} onClose={closeFlyout}>
+    <EuiFlyout maxWidth={550} onClose={closeFlyout}>
       <EuiFlyoutHeader>
         <EuiTitle>
           <h2>

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_request_flyout_provider.tsx → x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout_provider.tsx

@@ -6,8 +6,8 @@
 
 import React, { useState, useEffect } from 'react';
 
-import { Pipeline } from '../../../common/types';
-import { useFormContext } from '../../shared_imports';
+import { Pipeline } from '../../../../../common/types';
+import { useFormContext } from '../../../../shared_imports';
 import { PipelineRequestFlyout } from './pipeline_request_flyout';
 
 export const PipelineRequestFlyoutProvider = ({ closeFlyout }: { closeFlyout: () => void }) => {

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

@@ -128,7 +128,7 @@ export const PipelineTestFlyout: React.FunctionComponent<PipelineTestFlyoutProps
   }
 
   return (
-    <EuiFlyout maxWidth={480} onClose={closeFlyout}>
+    <EuiFlyout maxWidth={550} onClose={closeFlyout}>
       <EuiFlyoutHeader>
         <EuiTitle>
           <h2>

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/schema.ts → x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/schema.tsx

@@ -3,7 +3,11 @@
  * 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 from 'react';
+
+import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { EuiCode } from '@elastic/eui';
 
 import { FormSchema, fieldValidators, ValidationFuncArg } from '../../../../../shared_imports';
 import { parseJson, stringifyJson } from '../../../../lib';
@@ -18,6 +22,27 @@ export const documentsSchema: FormSchema = {
         defaultMessage: 'Documents',
       }
     ),
+    helpText: (
+      <FormattedMessage
+        id="xpack.ingestPipelines.form.onFailureFieldHelpText"
+        defaultMessage="Use JSON format: {code}"
+        values={{
+          code: (
+            <EuiCode>
+              {JSON.stringify([
+                {
+                  _index: 'index',
+                  _id: 'id',
+                  _source: {
+                    foo: 'bar',
+                  },
+                },
+              ])}
+            </EuiCode>
+          ),
+        }}
+      />
+    ),
     serializer: parseJson,
     deserializer: stringifyJson,
     validations: [

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/tab_documents.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-import { EuiSpacer, EuiText, EuiButton, EuiHorizontalRule } from '@elastic/eui';
+import { EuiSpacer, EuiText, EuiButton, EuiHorizontalRule, EuiLink } from '@elastic/eui';
 
 import {
   getUseField,
@@ -17,6 +17,7 @@ import {
   Form,
   useForm,
   FormConfig,
+  useKibana,
 } from '../../../../../shared_imports';
 
 import { documentsSchema } from './schema';
@@ -35,6 +36,8 @@ export const DocumentsTab: React.FunctionComponent<Props> = ({
   handleExecute,
   isExecuting,
 }) => {
+  const { services } = useKibana();
+
   const { setCurrentTestConfig, testConfig } = useTestConfigContext();
   const { verbose: cachedVerbose, documents: cachedDocuments } = testConfig;
 
@@ -69,7 +72,19 @@ export const DocumentsTab: React.FunctionComponent<Props> = ({
         <p>
           <FormattedMessage
             id="xpack.ingestPipelines.testPipelineFlyout.documentsTab.tabDescriptionText"
-            defaultMessage="Provide an array of documents to be ingested by the pipeline."
+            defaultMessage="Provide an array of documents to be ingested by the pipeline. {learnMoreLink}"
+            values={{
+              learnMoreLink: (
+                <EuiLink href={services.documentation.getSimulatePipelineApiUrl()} target="_blank">
+                  {i18n.translate(
+                    'xpack.ingestPipelines.testPipelineFlyout.documentsTab.simulateDocumentionLink',
+                    {
+                      defaultMessage: 'Learn more.',
+                    }
+                  )}
+                </EuiLink>
+              ),
+            }}
           />
         </p>
       </EuiText>

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

@@ -3,8 +3,11 @@
  * 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 from 'react';
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCode } from '@elastic/eui';
 
 import { FormSchema, FIELD_TYPES, fieldValidators, fieldFormatters } from '../../../shared_imports';
 import { parseJson, stringifyJson } from '../../lib';
@@ -47,6 +50,26 @@ export const pipelineFormSchema: FormSchema = {
     label: i18n.translate('xpack.ingestPipelines.form.processorsFieldLabel', {
       defaultMessage: 'Processors',
     }),
+    helpText: (
+      <FormattedMessage
+        id="xpack.ingestPipelines.form.processorsFieldHelpText"
+        defaultMessage="Use JSON format: {code}"
+        values={{
+          code: (
+            <EuiCode>
+              {JSON.stringify([
+                {
+                  set: {
+                    field: 'foo',
+                    value: 'bar',
+                  },
+                },
+              ])}
+            </EuiCode>
+          ),
+        }}
+      />
+    ),
     serializer: parseJson,
     deserializer: stringifyJson,
     validations: [
@@ -70,6 +93,26 @@ export const pipelineFormSchema: FormSchema = {
     label: i18n.translate('xpack.ingestPipelines.form.onFailureFieldLabel', {
       defaultMessage: 'On-failure processors (optional)',
     }),
+    helpText: (
+      <FormattedMessage
+        id="xpack.ingestPipelines.form.onFailureFieldHelpText"
+        defaultMessage="Use JSON format: {code}"
+        values={{
+          code: (
+            <EuiCode>
+              {JSON.stringify([
+                {
+                  set: {
+                    field: '_index',
+                    value: 'failed-{{ _index }}',
+                  },
+                },
+              ])}
+            </EuiCode>
+          ),
+        }}
+      />
+    ),
     serializer: value => {
       const result = parseJson(value);
       // If an empty array was passed, strip out this value entirely.

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx

@@ -13,6 +13,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButtonEmpty,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { BASE_PATH } from '../../../../common/constants';
@@ -93,6 +94,8 @@ export const PipelinesCreate: React.FunctionComponent<RouteComponentProps & Prop
           </EuiFlexGroup>
         </EuiTitle>
 
+        <EuiSpacer size="l" />
+
         <PipelineForm
           defaultValue={sourcePipeline}
           onSave={onSave}

x-pack/plugins/ingest_pipelines/public/application/services/documentation.ts

@@ -30,6 +30,10 @@ export class DocumentationService {
   public getPutPipelineApiUrl() {
     return `${this.esDocBasePath}/put-pipeline-api.html`;
   }
+
+  public getSimulatePipelineApiUrl() {
+    return `${this.esDocBasePath}/simulate-pipeline-api.html`;
+  }
 }
 
 export const documentationService = new DocumentationService();

x-pack/plugins/ingest_pipelines/public/index.ts

@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './index.scss';
-
 import { IngestPipelinesPlugin } from './plugin';
 
 export function plugin() {

x-pack/plugins/ingest_pipelines/server/routes/api/get.ts

@@ -30,6 +30,12 @@ export const registerGetRoutes = ({
         return res.ok({ body: deserializePipelines(pipelines) });
       } catch (error) {
         if (isEsError(error)) {
+          // ES returns 404 when there are no pipelines
+          // Instead, we return an empty array and 200 status back to the client
+          if (error.status === 404) {
+            return res.ok({ body: [] });
+          }
+
           return res.customError({
             statusCode: error.statusCode,
             body: error,