[Ingest Pipelines] Allow to update an existing processor and change its type (#105765)
* Patch bugs * Add tests for allowing to edit the type of an existing processor * Add more tests * Add docs Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
e389c9260d
commit
df1882eac0
|
@ -99,6 +99,13 @@ const createActions = (testBed: TestBed<TestSubject>) => {
|
||||||
component.update();
|
component.update();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async setProcessorType(type: string) {
|
||||||
|
await act(async () => {
|
||||||
|
find('processorTypeSelector.input').simulate('change', [{ value: type }]);
|
||||||
|
});
|
||||||
|
component.update();
|
||||||
|
},
|
||||||
|
|
||||||
removeProcessor(processorSelector: string) {
|
removeProcessor(processorSelector: string) {
|
||||||
find(`${processorSelector}.moreMenu.button`).simulate('click');
|
find(`${processorSelector}.moreMenu.button`).simulate('click');
|
||||||
find(`${processorSelector}.moreMenu.deleteButton`).simulate('click');
|
find(`${processorSelector}.moreMenu.deleteButton`).simulate('click');
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
* 2.0.
|
* 2.0.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import { act } from 'react-dom/test-utils';
|
||||||
import { setup, SetupResult } from './pipeline_processors_editor.helpers';
|
import { setup, SetupResult } from './pipeline_processors_editor.helpers';
|
||||||
import { Pipeline } from '../../../../../common/types';
|
import { Pipeline } from '../../../../../common/types';
|
||||||
|
|
||||||
|
@ -120,6 +121,37 @@ describe('Pipeline Editor', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('allows to edit an existing processor and change its type', async () => {
|
||||||
|
const { actions, exists, component, find } = testBed;
|
||||||
|
|
||||||
|
// Open one of the existing processors
|
||||||
|
actions.openProcessorEditor('processors>2');
|
||||||
|
expect(exists('editProcessorForm')).toBeTruthy();
|
||||||
|
|
||||||
|
// Change its type to `append` and set the missing required fields
|
||||||
|
await actions.setProcessorType('append');
|
||||||
|
await act(async () => {
|
||||||
|
find('appendValueField.input').simulate('change', [{ label: 'some_value' }]);
|
||||||
|
});
|
||||||
|
component.update();
|
||||||
|
|
||||||
|
await actions.submitProcessorForm();
|
||||||
|
|
||||||
|
const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
|
||||||
|
const {
|
||||||
|
processors: { 2: editedProcessor },
|
||||||
|
} = onUpdateResult.getData();
|
||||||
|
|
||||||
|
expect(editedProcessor.append).toEqual({
|
||||||
|
if: undefined,
|
||||||
|
tag: undefined,
|
||||||
|
description: undefined,
|
||||||
|
ignore_failure: undefined,
|
||||||
|
field: 'test',
|
||||||
|
value: ['some_value'],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
it('removes a processor', () => {
|
it('removes a processor', () => {
|
||||||
const { actions } = testBed;
|
const { actions } = testBed;
|
||||||
// processor>0 denotes the first processor in the top-level processors array.
|
// processor>0 denotes the first processor in the top-level processors array.
|
||||||
|
|
|
@ -102,6 +102,13 @@ const createActions = (testBed: TestBed<TestSubject>) => {
|
||||||
component.update();
|
component.update();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async clickProcessorConfigurationTab() {
|
||||||
|
await act(async () => {
|
||||||
|
find('configurationTab').simulate('click');
|
||||||
|
});
|
||||||
|
component.update();
|
||||||
|
},
|
||||||
|
|
||||||
async clickProcessorOutputTab() {
|
async clickProcessorOutputTab() {
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
find('outputTab').simulate('click');
|
find('outputTab').simulate('click');
|
||||||
|
|
|
@ -356,6 +356,21 @@ describe('Test pipeline', () => {
|
||||||
expect(statusIconLabel).toEqual('Success');
|
expect(statusIconLabel).toEqual('Success');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('Configuration tab', () => {
|
||||||
|
it('should not clear up form when clicking configuration tab', async () => {
|
||||||
|
const { actions, find, exists } = testBed;
|
||||||
|
|
||||||
|
// Click processor to open manage flyout
|
||||||
|
await actions.clickProcessor('processors>0');
|
||||||
|
// Verify flyout opened
|
||||||
|
expect(exists('editProcessorForm')).toBe(true);
|
||||||
|
// Click the "Configuration" tab
|
||||||
|
await actions.clickProcessorConfigurationTab();
|
||||||
|
// Verify type selector has not changed
|
||||||
|
expect(find('processorTypeSelector.input').text()).toBe('Set');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('Output tab', () => {
|
describe('Output tab', () => {
|
||||||
beforeEach(async () => {
|
beforeEach(async () => {
|
||||||
const { actions } = testBed;
|
const { actions } = testBed;
|
||||||
|
|
|
@ -196,6 +196,11 @@ export const EditProcessorForm: FunctionComponent<Props> = ({
|
||||||
{tabs.map((tab) => (
|
{tabs.map((tab) => (
|
||||||
<EuiTab
|
<EuiTab
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
// No need to do anything if user clicks the already active tab
|
||||||
|
if (tab.id === activeTab) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (tab.id === 'output') {
|
if (tab.id === 'output') {
|
||||||
await handleSubmit(false);
|
await handleSubmit(false);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -158,18 +158,26 @@ export const PipelineProcessorsContextProvider: FunctionComponent<Props> = ({
|
||||||
'internal_networks_field',
|
'internal_networks_field',
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// If the processor type is changed while editing, we need to ignore unkownOptions as they
|
||||||
|
// will contain the fields from the previous processor resulting in the wrong request.
|
||||||
|
const hasProcessorTypeChanged = mode.arg.processor.type !== processorTypeAndOptions.type;
|
||||||
// The processor that we are updating may have options configured the UI does not know about
|
// The processor that we are updating may have options configured the UI does not know about
|
||||||
const unknownOptions = omit(mode.arg.processor.options, knownOptionNames);
|
const unknownOptions = hasProcessorTypeChanged
|
||||||
|
? {}
|
||||||
|
: omit(mode.arg.processor.options, knownOptionNames);
|
||||||
// In order to keep the options we don't get back from our UI, we merge the known and unknown options
|
// In order to keep the options we don't get back from our UI, we merge the known and unknown options
|
||||||
const updatedProcessorOptions = {
|
const updatedProcessorOptions = {
|
||||||
...processorTypeAndOptions.options,
|
...processorTypeAndOptions.options,
|
||||||
...unknownOptions,
|
...unknownOptions,
|
||||||
};
|
};
|
||||||
|
|
||||||
processorsDispatch({
|
processorsDispatch({
|
||||||
type: 'updateProcessor',
|
type: 'updateProcessor',
|
||||||
payload: {
|
payload: {
|
||||||
processor: {
|
processor: {
|
||||||
...mode.arg.processor,
|
...mode.arg.processor,
|
||||||
|
// Always prefer the newly selected processor type, as it might change during editing
|
||||||
|
type: processorTypeAndOptions.type,
|
||||||
options: updatedProcessorOptions,
|
options: updatedProcessorOptions,
|
||||||
},
|
},
|
||||||
selector: mode.arg.selector,
|
selector: mode.arg.selector,
|
||||||
|
|
Loading…
Reference in a new issue