-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Ingest pipelines] Edit pipeline page (#63522)
- Loading branch information
1 parent
993d065
commit cf8b36b
Showing
26 changed files
with
576 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
89 changes: 89 additions & 0 deletions
89
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_request_flyout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ); | ||
| }; |
29 changes: 29 additions & 0 deletions
29
...ugins/ingest_pipelines/public/application/components/pipeline_request_flyout_provider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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} />; | ||
| }; |
Oops, something went wrong.