diff --git a/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.styles.scss b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.styles.scss
new file mode 100644
index 000000000000..546b6d95eab6
--- /dev/null
+++ b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.styles.scss
@@ -0,0 +1,6 @@
+.json-flattening-form {
+ margin-top: 16px;
+ &__item {
+ margin-bottom: 12px;
+ }
+}
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx
new file mode 100644
index 000000000000..cfdc16fe4362
--- /dev/null
+++ b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx
@@ -0,0 +1,110 @@
+import './JsonFlattening.styles.scss';
+
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Form, Input, Space, Switch, Tooltip } from 'antd';
+import { useEffect, useState } from 'react';
+import { ProcessorData } from 'types/api/pipeline/def';
+
+import { PREDEFINED_MAPPING } from '../config';
+import KeyValueList from './KeyValueList';
+
+interface JsonFlatteningProps {
+ selectedProcessorData?: ProcessorData;
+ isAdd: boolean;
+}
+
+function JsonFlattening({
+ selectedProcessorData,
+ isAdd,
+}: JsonFlatteningProps): JSX.Element | null {
+ const form = Form.useFormInstance();
+ const mappingValue = selectedProcessorData?.mapping || {};
+ const enableFlattening = Form.useWatch('enable_flattening', form);
+ const enablePaths = Form.useWatch('enable_paths', form);
+
+ const [enableMapping, setEnableMapping] = useState(
+ !!mappingValue && Object.keys(mappingValue).length > 0,
+ );
+
+ const selectedMapping = selectedProcessorData?.mapping;
+ useEffect(() => {
+ if (!enableMapping) {
+ form.setFieldsValue({ mapping: undefined });
+ } else if (form.getFieldValue('mapping') === undefined) {
+ form.setFieldsValue({
+ mapping: selectedMapping || PREDEFINED_MAPPING,
+ });
+ }
+ }, [enableMapping, form, selectedMapping]);
+
+ const handleEnableMappingChange = (checked: boolean): void => {
+ setEnableMapping(checked);
+ };
+
+ const handleEnablePathsChange = (checked: boolean): void => {
+ form.setFieldValue('enable_paths', checked);
+ };
+
+ if (!enableFlattening) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ Enable Paths
+
+
+
+ {enablePaths && (
+
+
+
+ )}
+
+
+
+
+ Enable Mapping
+
+
+
+
+
+
+ {enableMapping && (
+
+
+
+ )}
+
+ );
+}
+
+JsonFlattening.defaultProps = {
+ selectedProcessorData: undefined,
+};
+
+export default JsonFlattening;
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/KeyValueList.tsx b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/KeyValueList.tsx
new file mode 100644
index 000000000000..b8a4c952ed1c
--- /dev/null
+++ b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/KeyValueList.tsx
@@ -0,0 +1,47 @@
+import { Form, Select } from 'antd';
+
+import { PREDEFINED_MAPPING } from '../config';
+
+interface KeyValueListProps {
+ value?: Record;
+ onChange?: (value: Record) => void;
+}
+
+function KeyValueList({
+ value = PREDEFINED_MAPPING,
+ onChange,
+}: KeyValueListProps): JSX.Element {
+ const handleValueChange = (key: string, newValue: string[]): void => {
+ const newMapping = {
+ ...value,
+ [key]: newValue,
+ };
+ if (onChange) {
+ onChange(newMapping);
+ }
+ };
+
+ return (
+
+ {Object.keys(value).map((key) => (
+
+
+ ))}
+
+ );
+}
+
+KeyValueList.defaultProps = {
+ value: PREDEFINED_MAPPING,
+ onChange: (): void => {},
+};
+
+export default KeyValueList;
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx
index 1d3b12e2c0c5..fbe0f98c5676 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx
@@ -1,16 +1,21 @@
import './styles.scss';
-import { Form, Input, Select } from 'antd';
+import { Form, Input, Select, Space, Switch } from 'antd';
import { ModalFooterTitle } from 'container/PipelinePage/styles';
import { useTranslation } from 'react-i18next';
+import { ProcessorData } from 'types/api/pipeline/def';
import { formValidationRules } from '../config';
import { processorFields, ProcessorFormField } from './config';
import CSVInput from './FormFields/CSVInput';
+import JsonFlattening from './FormFields/JsonFlattening';
import { FormWrapper, PipelineIndexIcon, StyledSelect } from './styles';
+// eslint-disable-next-line sonarjs/cognitive-complexity
function ProcessorFieldInput({
fieldData,
+ selectedProcessorData,
+ isAdd,
}: ProcessorFieldInputProps): JSX.Element | null {
const { t } = useTranslation('pipeline');
@@ -50,6 +55,13 @@ function ProcessorFieldInput({
);
} else if (Array.isArray(fieldData?.initialValue)) {
inputField = ;
+ } else if (fieldData?.name === 'enable_flattening') {
+ inputField = (
+
+ );
} else {
inputField = ;
}
@@ -68,40 +80,82 @@ function ProcessorFieldInput({
)}
- {fieldData.fieldName}}
- name={fieldData.name}
- initialValue={fieldData.initialValue}
- rules={fieldData.rules ? fieldData.rules : formValidationRules}
- dependencies={fieldData.dependencies || []}
- >
- {inputField}
-
+ {fieldData.name === 'enable_flattening' ? (
+
+
+ {
+ form.setFieldValue('enable_flattening', checked);
+ }}
+ />
+ {fieldData.fieldName}
+
+
+ ) : (
+ {fieldData.fieldName}}
+ name={fieldData.name}
+ initialValue={fieldData.initialValue}
+ rules={fieldData.rules ? fieldData.rules : formValidationRules}
+ dependencies={fieldData.dependencies || []}
+ >
+ {inputField}
+
+ )}
+ {fieldData.name === 'enable_flattening' && inputField}
);
}
+ProcessorFieldInput.defaultProps = {
+ selectedProcessorData: undefined,
+};
+
interface ProcessorFieldInputProps {
fieldData: ProcessorFormField;
+ selectedProcessorData?: ProcessorData;
+ isAdd: boolean;
}
-function ProcessorForm({ processorType }: ProcessorFormProps): JSX.Element {
+function ProcessorForm({
+ processorType,
+ selectedProcessorData,
+ isAdd,
+}: ProcessorFormProps): JSX.Element {
return (
{processorFields[processorType]?.map((fieldData: ProcessorFormField) => (
))}