[Ingest pipelines] Edit pipeline page

x-pack/plugins/ingest_pipelines/common/lib/pipeline_serialization.test.ts

@@ -47,7 +47,7 @@ describe('pipeline_serialization', () => {
               },
             },
           ],
-          onFailure: [
+          on_failure: [
             {
               set: {
                 field: 'error.message',

x-pack/plugins/ingest_pipelines/common/lib/pipeline_serialization.ts

@@ -10,17 +10,10 @@ export function deserializePipelines(pipelinesByName: PipelinesByName): Pipeline
   const pipelineNames: string[] = Object.keys(pipelinesByName);
 
   const deserializedPipelines = pipelineNames.map((name: string) => {
-    const { description, version, processors, on_failure } = pipelinesByName[name];
-
-    const pipeline = {
+    return {
+      ...pipelinesByName[name],
       name,
-      description,
-      version,
-      processors,
-      onFailure: on_failure,
     };
-
-    return pipeline;
   });
 
   return deserializedPipelines;

x-pack/plugins/ingest_pipelines/common/types.ts

@@ -15,7 +15,7 @@ export interface Pipeline {
   description: string;
   version?: number;
   processors: Processor[];
-  onFailure?: Processor[];
+  on_failure?: Processor[];
 }
 
 export interface PipelinesByName {

x-pack/plugins/ingest_pipelines/public/application/app.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import { HashRouter, Switch, Route } from 'react-router-dom';
 import { BASE_PATH } from '../../common/constants';
-import { PipelinesList, PipelinesCreate } from './sections';
+import { PipelinesList, PipelinesCreate, PipelinesEdit } from './sections';
 
 export const App = () => {
   return (
@@ -21,5 +21,6 @@ export const AppWithoutRouter = () => (
   <Switch>
     <Route exact path={BASE_PATH} component={PipelinesList} />
     <Route exact path={`${BASE_PATH}/create`} component={PipelinesCreate} />
+    <Route exact path={`${BASE_PATH}/edit/:name`} component={PipelinesEdit} />
   </Switch>
 );

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

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

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

@@ -6,7 +6,15 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiSwitch, EuiLink } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiSwitch,
+  EuiLink,
+} from '@elastic/eui';
 
 import {
   useForm,
@@ -20,14 +28,16 @@ import {
 } from '../../../shared_imports';
 import { Pipeline } from '../../../../common/types';
 
-import { SectionError } from '../section_error';
+import { SectionError, PipelineRequestFlyout } from '../';
 import { pipelineFormSchema } from './schema';
 
 interface Props {
   onSave: (pipeline: Pipeline) => void;
+  onCancel: () => void;
   isSaving: boolean;
   saveError: any;
   defaultValue?: Pipeline;
+  isEditing?: boolean;
 }
 
 const UseField = getUseField({ component: Field });
@@ -38,17 +48,22 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
     name: '',
     description: '',
     processors: '',
-    onFailure: '',
+    on_failure: '',
     version: '',
   },
   onSave,
   isSaving,
   saveError,
+  isEditing,
+  onCancel,
 }) => {
   const { services } = useKibana();
 
-  const [isVersionVisible, setIsVersionVisible] = useState<boolean>(false);
-  const [isOnFailureEditorVisible, setIsOnFailureEditorVisible] = useState<boolean>(false);
+  const [isVersionVisible, setIsVersionVisible] = useState<boolean>(Boolean(defaultValue.version));
+  const [isOnFailureEditorVisible, setIsOnFailureEditorVisible] = useState<boolean>(
+    Boolean(defaultValue.on_failure)
+  );
+  const [isRequestVisible, setIsRequestVisible] = useState<boolean>(false);
 
   const handleSave: FormConfig['onSubmit'] = (formData, isValid) => {
     if (isValid) {
@@ -62,24 +77,25 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
     onSubmit: handleSave,
   });
 
+  const saveButtonLabel = isSaving ? (
+    <FormattedMessage
+      id="xpack.ingestPipelines.form.savingButtonLabel"
+      defaultMessage="Saving..."
+    />
+  ) : isEditing ? (
+    <FormattedMessage
+      id="xpack.ingestPipelines.form.saveButtonLabel"
+      defaultMessage="Save pipeline"
+    />
+  ) : (
+    <FormattedMessage
+      id="xpack.ingestPipelines.form.createButtonLabel"
+      defaultMessage="Create pipeline"
+    />
+  );
+
   return (
     <>
-      {saveError ? (
-        <>
-          <SectionError
-            title={
-              <FormattedMessage
-                id="xpack.ingestPipelines.form.savePipelineError"
-                defaultMessage="Unable to create pipeline"
-              />
-            }
-            error={saveError}
-            data-test-subj="savePipelineError"
-          />
-          <EuiSpacer size="m" />
-        </>
-      ) : null}
-
       <Form
         form={form}
         data-test-subj="pipelineForm"
@@ -116,6 +132,7 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
             path="name"
             componentProps={{
               ['data-test-subj']: 'nameField',
+              euiFieldProps: { disabled: Boolean(isEditing) },
             }}
           />
 
@@ -237,7 +254,7 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
         >
           {isOnFailureEditorVisible ? (
             <UseField
-              path="onFailure"
+              path="on_failure"
               component={JsonEditorField}
               componentProps={{
                 ['data-test-subj']: 'onFailureEditor',
@@ -261,11 +278,28 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
 
         <EuiSpacer size="l" />
 
+        {/* Request error */}
+        {saveError ? (
+          <>
+            <SectionError
+              title={
+                <FormattedMessage
+                  id="xpack.ingestPipelines.form.savePipelineError"
+                  defaultMessage="Unable to create pipeline"
+                />
+              }
+              error={saveError}
+              data-test-subj="savePipelineError"
+            />
+            <EuiSpacer size="m" />
+          </>
+        ) : null}
+
         {/* Form submission */}
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiFlexGroup>
-              <EuiFlexItem grow={false}>
+              <EuiFlexItem>
                 <EuiButton
                   fill
                   color="secondary"
@@ -275,17 +309,42 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
                   disabled={form.isSubmitted && form.isValid === false}
                   isLoading={isSaving}
                 >
-                  {
-                    <FormattedMessage
-                      id="xpack.ingestPipelines.form.createButtonLabel"
-                      defaultMessage="Create pipeline"
-                    />
-                  }
+                  {saveButtonLabel}
                 </EuiButton>
               </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiButtonEmpty color="primary" onClick={onCancel}>
+                  <FormattedMessage
+                    id="xpack.ingestPipelines.form.cancelButtonLabel"
+                    defaultMessage="Cancel"
+                  />
+                </EuiButtonEmpty>
+              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              onClick={() => setIsRequestVisible(prevIsRequestVisible => !prevIsRequestVisible)}
+            >
+              {isRequestVisible ? (
+                <FormattedMessage
+                  id="xpack.ingestPipelines.form.hideRequestButtonLabel"
+                  defaultMessage="Hide request"
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.ingestPipelines.form.showRequestButtonLabel"
+                  defaultMessage="Show request"
+                />
+              )}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
         </EuiFlexGroup>
+        {isRequestVisible ? (
+          <PipelineRequestFlyout
+            closeFlyout={() => setIsRequestVisible(prevIsRequestVisible => !prevIsRequestVisible)}
+          />
+        ) : null}
       </Form>
 
       <EuiSpacer size="m" />

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

@@ -93,7 +93,7 @@ export const pipelineFormSchema: FormSchema = {
       },
     ],
   },
-  onFailure: {
+  on_failure: {
     label: i18n.translate('xpack.ingestPipelines.form.onFailureFieldLabel', {
       defaultMessage: 'On-failure processors (optional)',
     }),

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

@@ -0,0 +1,89 @@
+/*
+ * 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, { useRef } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import {
+  EuiButtonEmpty,
+  EuiCodeBlock,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+
+import { Pipeline } from '../../../common/types';
+
+interface Props {
+  pipeline: Pipeline;
+  closeFlyout: () => void;
+}
+
+export const PipelineRequestFlyout: React.FunctionComponent<Props> = ({
+  closeFlyout,
+  pipeline,
+}) => {
+  const { name, ...pipelineBody } = pipeline;
+  const endpoint = `PUT _ingest/pipeline/${name || '<pipelineName>'}`;
+  const payload = JSON.stringify(pipelineBody, null, 2);
+  const request = `${endpoint}\n${payload}`;
+  // Hack so that copied-to-clipboard value updates as content changes
+  // Related issue: https://github.com/elastic/eui/issues/3321
+  const uuid = useRef(0);
+  uuid.current++;
+
+  return (
+    <EuiFlyout maxWidth={480} onClose={closeFlyout}>
+      <EuiFlyoutHeader>
+        <EuiTitle>
+          <h2>
+            {name ? (
+              <FormattedMessage
+                id="xpack.ingestPipelines.requestFlyout.namedTitle"
+                defaultMessage="Request for '{name}'"
+                values={{ name }}
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.ingestPipelines.requestFlyout.unnamedTitle"
+                defaultMessage="Request"
+              />
+            )}
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+
+      <EuiFlyoutBody>
+        <EuiText>
+          <p>
+            <FormattedMessage
+              id="xpack.ingestPipelines.requestFlyout.descriptionText"
+              defaultMessage="This Elasticsearch request will create or update this pipeline."
+            />
+          </p>
+        </EuiText>
+
+        <EuiSpacer />
+        <EuiCodeBlock language="json" isCopyable key={uuid.current}>
+          {request}
+        </EuiCodeBlock>
+      </EuiFlyoutBody>
+
+      <EuiFlyoutFooter>
+        <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
+          <FormattedMessage
+            id="xpack.ingestPipelines.requestFlyout.closeButtonLabel"
+            defaultMessage="Close"
+          />
+        </EuiButtonEmpty>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};

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

@@ -0,0 +1,29 @@
+/*
+ * 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, { useState, useEffect } from 'react';
+
+import { Pipeline } from '../../../common/types';
+import { useFormContext } from '../../shared_imports';
+import { PipelineRequestFlyout } from './pipeline_request_flyout';
+
+export const PipelineRequestFlyoutProvider = ({ closeFlyout }: { closeFlyout: () => void }) => {
+  const form = useFormContext();
+  const [formData, setFormData] = useState<Pipeline>({} as Pipeline);
+
+  useEffect(() => {
+    const subscription = form.subscribe(async ({ isValid, validate, data }) => {
+      const isFormValid = isValid ?? (await validate());
+      if (isFormValid) {
+        setFormData(data.format() as Pipeline);
+      }
+    });
+
+    return subscription.unsubscribe;
+  }, [form]);
+
+  return <PipelineRequestFlyout pipeline={formData} closeFlyout={closeFlyout} />;
+};