Skip to content

Commit

Permalink
Merge branch 'feature/ingest-node-pipelines' of github.com:elastic/ki…
Browse files Browse the repository at this point in the history
…bana into pipeline-editor-part-mvp-1

* 'feature/ingest-node-pipelines' of github.com:elastic/kibana:
  [Ingest pipelines] Edit pipeline page (elastic#63522)

# Conflicts:
#	x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx
#	x-pack/plugins/ingest_pipelines/public/shared_imports.ts
  • Loading branch information
jloleysens committed Apr 16, 2020
2 parents 3824e25 + cf8b36b commit 7d48f21
Show file tree
Hide file tree
Showing 26 changed files with 576 additions and 81 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ describe('pipeline_serialization', () => {
},
},
],
onFailure: [
on_failure: [
{
set: {
field: 'error.message',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/ingest_pipelines/common/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export interface Pipeline {
description: string;
version?: number;
processors: Processor[];
onFailure?: Processor[];
on_failure?: Processor[];
}

export interface PipelinesByName {
Expand Down
3 changes: 2 additions & 1 deletion x-pack/plugins/ingest_pipelines/public/application/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
);
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,5 @@
export { PipelineForm } from './pipeline_form';

export { SectionError } from './section_error';

export { PipelineRequestFlyoutProvider as PipelineRequestFlyout } from './pipeline_request_flyout_provider';
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 });
Expand All @@ -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) {
Expand All @@ -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"
Expand Down Expand Up @@ -116,6 +132,7 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
path="name"
componentProps={{
['data-test-subj']: 'nameField',
euiFieldProps: { disabled: Boolean(isEditing) },
}}
/>

Expand Down Expand Up @@ -237,7 +254,7 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
>
{isOnFailureEditorVisible ? (
<UseField
path="onFailure"
path="on_failure"
component={JsonEditorField}
componentProps={{
['data-test-subj']: 'onFailureEditor',
Expand All @@ -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"
Expand All @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const pipelineFormSchema: FormSchema = {
},
],
},
onFailure: {
on_failure: {
label: i18n.translate('xpack.ingestPipelines.form.onFailureFieldLabel', {
defaultMessage: 'On-failure processors (optional)',
}),
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
@@ -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} />;
};
Loading

0 comments on commit 7d48f21

Please sign in to comment.