From 90e97386c848446541095c512abb3a824bcc8dbd Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 31 Oct 2024 22:07:34 +0000 Subject: [PATCH] Add standalone form state for advanced transform modals (#456) Signed-off-by: Tyler Ohlsen (cherry picked from commit 500e6718b9d1624c48ff53b521eecd85fb78839c) Signed-off-by: github-actions[bot] --- common/interfaces.ts | 14 + .../input_fields/map_array_field.tsx | 2 - .../processor_inputs/ml_processor_inputs.tsx | 15 +- .../modals/input_transform_modal.tsx | 872 ++++++++++-------- .../modals/output_transform_modal.tsx | 771 +++++++++------- 5 files changed, 947 insertions(+), 727 deletions(-) diff --git a/common/interfaces.ts b/common/interfaces.ts index c445a4f0..baa08165 100644 --- a/common/interfaces.ts +++ b/common/interfaces.ts @@ -122,6 +122,20 @@ export type RequestFormValues = { }; export type RequestSchema = WorkflowSchema; +// Form / schema interfaces for the input transform sub-form +export type InputTransformFormValues = { + input_map: MapArrayFormValue; + one_to_one: ConfigFieldValue; +}; +export type InputTransformSchema = WorkflowSchema; + +// Form / schema interfaces for the output transform sub-form +export type OutputTransformFormValues = { + output_map: MapArrayFormValue; + full_response_path: ConfigFieldValue; +}; +export type OutputTransformSchema = WorkflowSchema; + /** ********** WORKSPACE TYPES/INTERFACES ********** */ diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/map_array_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/map_array_field.tsx index 5daf11f2..196f0077 100644 --- a/public/pages/workflow_detail/workflow_inputs/input_fields/map_array_field.tsx +++ b/public/pages/workflow_detail/workflow_inputs/input_fields/map_array_field.tsx @@ -18,7 +18,6 @@ import { import { Field, FieldProps, getIn, useFormikContext } from 'formik'; import { EMPTY_MAP_ENTRY, - IConfigField, MapArrayFormValue, MapEntry, WorkflowFormValues, @@ -26,7 +25,6 @@ import { import { MapField } from './map_field'; interface MapArrayFieldProps { - field: IConfigField; fieldPath: string; // the full path in string-form to the field (e.g., 'ingest.enrich.processors.text_embedding_processor.inputField') helpText?: string; keyTitle?: string; diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs.tsx index 39c7f649..20a6c936 100644 --- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs.tsx +++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs.tsx @@ -25,7 +25,6 @@ import { PROCESSOR_CONTEXT, WorkflowConfig, JSONPATH_ROOT_SELECTOR, - ML_INFERENCE_DOCS_LINK, WorkflowFormValues, ModelInterface, IndexMappings, @@ -75,15 +74,9 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) { ) as IConfigField; const modelFieldPath = `${props.baseConfigPath}.${props.config.id}.${modelField.id}`; const modelIdFieldPath = `${modelFieldPath}.id`; - const inputMapField = props.config.fields.find( - (field) => field.id === 'input_map' - ) as IConfigField; - const inputMapFieldPath = `${props.baseConfigPath}.${props.config.id}.${inputMapField.id}`; + const inputMapFieldPath = `${props.baseConfigPath}.${props.config.id}.input_map`; const inputMapValue = getIn(values, inputMapFieldPath); - const outputMapField = props.config.fields.find( - (field) => field.id === 'output_map' - ) as IConfigField; - const outputMapFieldPath = `${props.baseConfigPath}.${props.config.id}.${outputMapField.id}`; + const outputMapFieldPath = `${props.baseConfigPath}.${props.config.id}.output_map`; const outputMapValue = getIn(values, outputMapFieldPath); const fullResponsePath = getIn( values, @@ -250,7 +243,6 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) { config={props.config} baseConfigPath={props.baseConfigPath} context={props.context} - inputMapField={inputMapField} inputMapFieldPath={inputMapFieldPath} modelInterface={modelInterface} valueOptions={ @@ -269,7 +261,6 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) { config={props.config} baseConfigPath={props.baseConfigPath} context={props.context} - outputMapField={outputMapField} outputMapFieldPath={outputMapFieldPath} modelInterface={modelInterface} onClose={() => setIsOutputTransformModalOpen(false)} @@ -365,7 +356,6 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) { (); + const { values, setFieldValue, setFieldTouched } = useFormikContext< + WorkflowFormValues + >(); + + // sub-form values/schema + const inputTransformFormValues = { + input_map: getInitialValue('mapArray'), + one_to_one: getInitialValue('boolean'), + } as InputTransformFormValues; + const inputTransformFormSchema = yup.object({ + input_map: getFieldSchema({ + type: 'mapArray', + } as IConfigField), + one_to_one: getFieldSchema( + { + type: 'boolean', + } as IConfigField, + true + ), + }) as InputTransformSchema; + + // persist standalone values. update / initialize when it is first opened + const [tempErrors, setTempErrors] = useState(false); + const [tempOneToOne, setTempOneToOne] = useState(false); + const [tempInputMap, setTempInputMap] = useState([]); // various prompt states const [viewPromptDetails, setViewPromptDetails] = useState(false); @@ -103,9 +131,7 @@ export function InputTransformModal(props: InputTransformModalProps) { const [transformedInput, setTransformedInput] = useState('{}'); // get some current form values - const map = getIn(values, props.inputMapFieldPath) as MapArrayFormValue; const oneToOnePath = `${props.baseConfigPath}.${props.config.id}.one_to_one`; - const oneToOne = getIn(values, oneToOnePath); const docs = getIn(values, 'ingest.docs'); let docObjs = [] as {}[] | undefined; try { @@ -124,13 +150,13 @@ export function InputTransformModal(props: InputTransformModalProps) { isEmpty(queryObj); // selected transform state - const transformOptions = map.map((_, idx) => ({ + const transformOptions = tempInputMap.map((_, idx) => ({ value: idx, text: `Prediction ${idx + 1}`, })) as EuiSelectOption[]; const [selectedTransformOption, setSelectedTransformOption] = useState< - number | undefined - >((transformOptions[0]?.value as number) ?? undefined); + number + >((transformOptions[0]?.value as number) ?? 0); // popover state containing the model interface details, if applicable const [popoverOpen, setPopoverOpen] = useState(false); @@ -148,27 +174,23 @@ export function InputTransformModal(props: InputTransformModalProps) { // hook to re-generate the transform when any inputs to the transform are updated useEffect(() => { - if ( - !isEmpty(map) && - !isEmpty(JSON.parse(sourceInput)) && - selectedTransformOption !== undefined - ) { + if (!isEmpty(tempInputMap) && !isEmpty(JSON.parse(sourceInput))) { let sampleSourceInput = {} as {} | []; try { sampleSourceInput = JSON.parse(sourceInput); const output = // Edge case: users are collapsing input docs into a single input field when many-to-one is selected // fo input transforms on search response processors. - oneToOne === false && + tempOneToOne === false && props.context === PROCESSOR_CONTEXT.SEARCH_RESPONSE && Array.isArray(sampleSourceInput) ? generateArrayTransform( sampleSourceInput as [], - map[selectedTransformOption] + tempInputMap[selectedTransformOption] ) : generateTransform( sampleSourceInput, - map[selectedTransformOption] + tempInputMap[selectedTransformOption] ); setTransformedInput(customStringify(output)); @@ -176,7 +198,7 @@ export function InputTransformModal(props: InputTransformModalProps) { } else { setTransformedInput('{}'); } - }, [map, sourceInput, selectedTransformOption]); + }, [tempInputMap, sourceInput, selectedTransformOption]); // hook to re-determine validity when the generated output changes // utilize Ajv JSON schema validator library. For more info/examples, see @@ -231,384 +253,370 @@ export function InputTransformModal(props: InputTransformModalProps) { // hook to clear the source input when one_to_one is toggled useEffect(() => { setSourceInput('{}'); - }, [oneToOne]); + }, [tempOneToOne]); return ( - - - -

{`Configure input`}

- - - - - - <> - {(onIngestAndNoDocs || onSearchAndNoQuery) && ( - <> - - - - )} - {description} - - {props.context === PROCESSOR_CONTEXT.SEARCH_RESPONSE && ( - <> - - - - )} - Source input - { - setIsFetching(true); - switch (props.context) { - case PROCESSOR_CONTEXT.INGEST: { - // get the current ingest pipeline up to, but not including, this processor - const curIngestPipeline = formikToPartialPipeline( - values, - props.uiConfig, - props.config.id, - false, - PROCESSOR_CONTEXT.INGEST - ); - // if there are preceding processors, we need to simulate the partial ingest pipeline, - // in order to get the latest transformed version of the docs - if (curIngestPipeline !== undefined) { - const curDocs = prepareDocsForSimulate( - values.ingest.docs, - values.ingest.index.name - ); - await dispatch( - simulatePipeline({ - apiBody: { - pipeline: curIngestPipeline as IngestPipelineConfig, - docs: [curDocs[0]], - }, - dataSourceId, - }) - ) - .unwrap() - .then((resp: SimulateIngestPipelineResponse) => { - const docObjs = unwrapTransformedDocs(resp); - if (docObjs.length > 0) { - setSourceInput(customStringify(docObjs[0])); + {}} + validate={(values) => {}} + > + {(formikProps) => { + // override to parent form values when changes detected + useEffect(() => { + formikProps.setFieldValue( + 'input_map', + getIn(values, props.inputMapFieldPath) + ); + }, [getIn(values, props.inputMapFieldPath)]); + useEffect(() => { + formikProps.setFieldValue('one_to_one', getIn(values, oneToOnePath)); + }, [getIn(values, oneToOnePath)]); + + // update temp vars when form changes are detected + useEffect(() => { + setTempInputMap(getIn(formikProps.values, 'input_map')); + }, [getIn(formikProps.values, 'input_map')]); + useEffect(() => { + setTempOneToOne(getIn(formikProps.values, 'one_to_one')); + }, [getIn(formikProps.values, 'one_to_one')]); + + // update tempErrors if errors detected + useEffect(() => { + setTempErrors(!isEmpty(formikProps.errors)); + }, [formikProps.errors]); + + return ( + + + +

{`Configure input`}

+ + + + + + <> + {(onIngestAndNoDocs || onSearchAndNoQuery) && ( + <> + + + + )} + {description} + + {props.context === PROCESSOR_CONTEXT.SEARCH_RESPONSE && ( + <> + + + + )} + Source input + { + setIsFetching(true); + switch (props.context) { + case PROCESSOR_CONTEXT.INGEST: { + // get the current ingest pipeline up to, but not including, this processor + const curIngestPipeline = formikToPartialPipeline( + values, + props.uiConfig, + props.config.id, + false, + PROCESSOR_CONTEXT.INGEST + ); + // if there are preceding processors, we need to simulate the partial ingest pipeline, + // in order to get the latest transformed version of the docs + if (curIngestPipeline !== undefined) { + const curDocs = prepareDocsForSimulate( + values.ingest.docs, + values.ingest.index.name + ); + await dispatch( + simulatePipeline({ + apiBody: { + pipeline: curIngestPipeline as IngestPipelineConfig, + docs: [curDocs[0]], + }, + dataSourceId, + }) + ) + .unwrap() + .then( + (resp: SimulateIngestPipelineResponse) => { + const docObjs = unwrapTransformedDocs(resp); + if (docObjs.length > 0) { + setSourceInput( + customStringify(docObjs[0]) + ); + } + } + ) + .catch((error: any) => { + getCore().notifications.toasts.addDanger( + `Failed to fetch input data` + ); + }) + .finally(() => { + setIsFetching(false); + }); + } else { + try { + const docObjs = JSON.parse( + values.ingest.docs + ) as {}[]; + if (docObjs.length > 0) { + setSourceInput(customStringify(docObjs[0])); + } + } catch { + } finally { + setIsFetching(false); + } } - }) - .catch((error: any) => { - getCore().notifications.toasts.addDanger( - `Failed to fetch input data` + break; + } + case PROCESSOR_CONTEXT.SEARCH_REQUEST: { + // get the current search pipeline up to, but not including, this processor + const curSearchPipeline = formikToPartialPipeline( + values, + props.uiConfig, + props.config.id, + false, + PROCESSOR_CONTEXT.SEARCH_REQUEST ); - }) - .finally(() => { + // if there are preceding processors, we cannot generate. The button to render + // this modal should be disabled if the search pipeline would be enabled. We add + // this if check as an extra layer of checking, and if mechanism for gating + // this is changed in the future. + if (curSearchPipeline === undefined) { + setSourceInput(values.search.request); + } setIsFetching(false); - }); - } else { - try { - const docObjs = JSON.parse( - values.ingest.docs - ) as {}[]; - if (docObjs.length > 0) { - setSourceInput(customStringify(docObjs[0])); + break; } - } catch { - } finally { - setIsFetching(false); - } - } - break; - } - case PROCESSOR_CONTEXT.SEARCH_REQUEST: { - // get the current search pipeline up to, but not including, this processor - const curSearchPipeline = formikToPartialPipeline( - values, - props.uiConfig, - props.config.id, - false, - PROCESSOR_CONTEXT.SEARCH_REQUEST - ); - // if there are preceding processors, we cannot generate. The button to render - // this modal should be disabled if the search pipeline would be enabled. We add - // this if check as an extra layer of checking, and if mechanism for gating - // this is changed in the future. - if (curSearchPipeline === undefined) { - setSourceInput(values.search.request); - } - setIsFetching(false); - break; - } - case PROCESSOR_CONTEXT.SEARCH_RESPONSE: { - // get the current search pipeline up to, but not including, this processor - const curSearchPipeline = formikToPartialPipeline( - values, - props.uiConfig, - props.config.id, - false, - PROCESSOR_CONTEXT.SEARCH_RESPONSE - ); - // Execute search. If there are preceding processors, augment the existing query with - // the partial search pipeline (inline) to get the latest transformed version of the response. - dispatch( - searchIndex({ - apiBody: { - index: values.search.index.name, - body: JSON.stringify({ - ...JSON.parse(values.search.request as string), - search_pipeline: curSearchPipeline || {}, - }), - }, - dataSourceId, - }) - ) - .unwrap() - .then(async (resp) => { - const hits = resp.hits.hits - .map((hit: SearchHit) => hit._source) - .slice(0, MAX_INPUT_DOCS); - if (hits.length > 0) { - setSourceInput( - // if one-to-one, treat the source input as a single retrieved document - // else, treat it as all of the returned documents - customStringify(oneToOne ? hits[0] : hits) + case PROCESSOR_CONTEXT.SEARCH_RESPONSE: { + // get the current search pipeline up to, but not including, this processor + const curSearchPipeline = formikToPartialPipeline( + values, + props.uiConfig, + props.config.id, + false, + PROCESSOR_CONTEXT.SEARCH_RESPONSE ); + // Execute search. If there are preceding processors, augment the existing query with + // the partial search pipeline (inline) to get the latest transformed version of the response. + dispatch( + searchIndex({ + apiBody: { + index: values.search.index.name, + body: JSON.stringify({ + ...JSON.parse( + values.search.request as string + ), + search_pipeline: curSearchPipeline || {}, + }), + }, + dataSourceId, + }) + ) + .unwrap() + .then(async (resp) => { + const hits = resp.hits.hits + .map((hit: SearchHit) => hit._source) + .slice(0, MAX_INPUT_DOCS); + if (hits.length > 0) { + setSourceInput( + // if one-to-one, treat the source input as a single retrieved document + // else, treat it as all of the returned documents + customStringify( + tempOneToOne ? hits[0] : hits + ) + ); + } + }) + .catch((error: any) => { + getCore().notifications.toasts.addDanger( + `Failed to fetch source input data` + ); + }) + .finally(() => { + setIsFetching(false); + }); + break; } - }) - .catch((error: any) => { - getCore().notifications.toasts.addDanger( - `Failed to fetch source input data` - ); - }) - .finally(() => { - setIsFetching(false); - }); - break; - } - } - }} - > - Fetch - - - - - - - <> - Define transform - - { - if (isEmpty(curArray)) { - setSelectedTransformOption(0); - } - }} - // If the map we are deleting is the one we last used to test, reset the state and - // default to the first map in the list. - onMapDelete={(idxToDelete) => { - if (selectedTransformOption === idxToDelete) { - setSelectedTransformOption(0); - setTransformedInput('{}'); - } - }} - addMapEntryButtonText="Add input" - addMapButtonText="(Advanced) Add input group" - /> - - - - <> - - {isValid !== undefined && ( - - + Fetch + + + - - )} - - {transformOptions.length <= 1 ? ( - Transformed input - ) : ( - Transformed input for + + + + <> + Define transform + + { - setSelectedTransformOption(Number(e.target.value)); + valueOptions={props.valueOptions} + // If the map we are adding is the first one, populate the selected option to index 0 + onMapAdd={(curArray) => { + if (isEmpty(curArray)) { + setSelectedTransformOption(0); + } + }} + // If the map we are deleting is the one we last used to test, reset the state and + // default to the first map in the list. + onMapDelete={(idxToDelete) => { + if (selectedTransformOption === idxToDelete) { + setSelectedTransformOption(0); + setTransformedInput('{}'); + } }} + addMapEntryButtonText="Add input" + addMapButtonText="(Advanced) Add input group" /> - )} + - {!isEmpty(parseModelInputsObj(props.modelInterface)) && ( - - setPopoverOpen(false)} - panelPaddingSize="s" - button={ - setPopoverOpen(!popoverOpen)} + + <> + + {isValid !== undefined && ( + - View input schema - - } - > - - The JSON Schema defining the model's expected input - - - {customStringify( - parseModelInputsObj(props.modelInterface) + + + )} + + {transformOptions.length <= 1 ? ( + Transformed input + ) : ( + Transformed input for + } + options={transformOptions} + value={selectedTransformOption} + onChange={(e) => { + setSelectedTransformOption( + Number(e.target.value) + ); + }} + /> )} - - - - )} - - - - - - {!isEmpty(originalPrompt) && ( - - <> - - - Transformed prompt - - - setViewPromptDetails(!viewPromptDetails)} - disabled={isEmpty(JSON.parse(transformedInput))} - /> - - {isEmpty(JSON.parse(transformedInput)) && ( - - - Transformed input is empty - - - )} - - {viewPromptDetails && ( - <> + + {!isEmpty(parseModelInputsObj(props.modelInterface)) && ( + + setPopoverOpen(false)} + panelPaddingSize="s" + button={ + setPopoverOpen(!popoverOpen)} + > + View input schema + + } + > + + The JSON Schema defining the model's expected + input + + + {customStringify( + parseModelInputsObj(props.modelInterface) + )} + + + + )} + - - setViewTransformedPrompt(!viewTransformedPrompt) - } - /> - + + {!isEmpty(originalPrompt) && ( + + <> + + + Transformed prompt + + + + setViewPromptDetails(!viewPromptDetails) + } + disabled={isEmpty(JSON.parse(transformedInput))} + /> + + {isEmpty(JSON.parse(transformedInput)) && ( + + + Transformed input is empty + + + )} + + {viewPromptDetails && ( + <> + + + setViewTransformedPrompt(!viewTransformedPrompt) + } + /> + + + + )} + + )} - - - )} - - - - - Close - - - + + + + + Cancel + + { + // update the parent form values + if (props.context === PROCESSOR_CONTEXT.SEARCH_RESPONSE) { + setFieldValue( + oneToOnePath, + getIn(formikProps.values, 'one_to_one') + ); + setFieldTouched(oneToOnePath, true); + } + setFieldValue( + props.inputMapFieldPath, + getIn(formikProps.values, 'input_map') + ); + setFieldTouched(props.inputMapFieldPath, true); + props.onClose(); + }} + isDisabled={tempErrors} // blocking update until valid input is given + fill={true} + color="primary" + data-testid="updateInputTransformModalButton" + > + Update + + + + ); + }} + ); } diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/output_transform_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/output_transform_modal.tsx index ab7aaf5c..d9070120 100644 --- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/output_transform_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/output_transform_modal.tsx @@ -4,8 +4,9 @@ */ import React, { useState, useEffect } from 'react'; -import { useFormikContext, getIn } from 'formik'; +import { useFormikContext, getIn, Formik } from 'formik'; import { cloneDeep, isEmpty, set } from 'lodash'; +import * as yup from 'yup'; import { EuiCodeEditor, EuiFlexGroup, @@ -35,6 +36,8 @@ import { ML_INFERENCE_RESPONSE_DOCS_LINK, MapArrayFormValue, ModelInterface, + OutputTransformFormValues, + OutputTransformSchema, PROCESSOR_CONTEXT, SearchHit, SearchPipelineConfig, @@ -46,6 +49,8 @@ import { import { formikToPartialPipeline, generateTransform, + getFieldSchema, + getInitialValue, prepareDocsForSimulate, unwrapTransformedDocs, } from '../../../../../utils'; @@ -67,7 +72,6 @@ interface OutputTransformModalProps { config: IProcessorConfig; baseConfigPath: string; context: PROCESSOR_CONTEXT; - outputMapField: IConfigField; outputMapFieldPath: string; modelInterface: ModelInterface | undefined; onClose: () => void; @@ -79,7 +83,33 @@ interface OutputTransformModalProps { export function OutputTransformModal(props: OutputTransformModalProps) { const dispatch = useAppDispatch(); const dataSourceId = getDataSourceId(); - const { values } = useFormikContext(); + const { values, setFieldValue, setFieldTouched } = useFormikContext< + WorkflowFormValues + >(); + + // sub-form values/schema + const outputTransformFormValues = { + output_map: getInitialValue('mapArray'), + full_response_path: getInitialValue('boolean'), + } as OutputTransformFormValues; + const outputTransformFormSchema = yup.object({ + output_map: getFieldSchema({ + type: 'mapArray', + } as IConfigField), + full_response_path: getFieldSchema( + { + type: 'boolean', + } as IConfigField, + true + ), + }) as OutputTransformSchema; + + // persist standalone values. update / initialize when it is first opened + const [tempErrors, setTempErrors] = useState(false); + const [tempFullResponsePath, setTempFullResponsePath] = useState( + false + ); + const [tempOutputMap, setTempOutputMap] = useState([]); // fetching input data state const [isFetching, setIsFetching] = useState(false); @@ -89,9 +119,7 @@ export function OutputTransformModal(props: OutputTransformModalProps) { const [transformedOutput, setTransformedOutput] = useState('{}'); // get some current form values - const map = getIn(values, props.outputMapFieldPath) as MapArrayFormValue; const fullResponsePathPath = `${props.baseConfigPath}.${props.config.id}.full_response_path`; - const fullResponsePath = getIn(values, fullResponsePathPath); const docs = getIn(values, 'ingest.docs'); let docObjs = [] as {}[] | undefined; try { @@ -113,360 +141,449 @@ export function OutputTransformModal(props: OutputTransformModalProps) { const [popoverOpen, setPopoverOpen] = useState(false); // selected transform state - const transformOptions = map.map((_, idx) => ({ + const transformOptions = tempOutputMap.map((_, idx) => ({ value: idx, text: `Prediction ${idx + 1}`, })) as EuiSelectOption[]; const [selectedTransformOption, setSelectedTransformOption] = useState< - number | undefined - >((transformOptions[0]?.value as number) ?? undefined); + number + >((transformOptions[0]?.value as number) ?? 0); // hook to re-generate the transform when any inputs to the transform are updated useEffect(() => { - if ( - !isEmpty(map) && - !isEmpty(JSON.parse(sourceOutput)) && - selectedTransformOption !== undefined - ) { + if (!isEmpty(tempOutputMap) && !isEmpty(JSON.parse(sourceOutput))) { let sampleSourceOutput = {}; try { sampleSourceOutput = JSON.parse(sourceOutput); const output = generateTransform( sampleSourceOutput, - map[selectedTransformOption] + tempOutputMap[selectedTransformOption] ); setTransformedOutput(customStringify(output)); } catch {} } else { setTransformedOutput('{}'); } - }, [map, sourceOutput, selectedTransformOption]); + }, [tempOutputMap, sourceOutput, selectedTransformOption]); // hook to clear the source output when full_response_path is toggled useEffect(() => { setSourceOutput('{}'); - }, [fullResponsePath]); + }, [tempFullResponsePath]); return ( - - - -

{`Configure output`}

- - - - - - <> - {(onIngestAndNoDocs || onSearchAndNoQuery) && ( - <> - - - - )} - - Fetch some sample output data and see how it is transformed. - - - {(props.context === PROCESSOR_CONTEXT.INGEST || - props.context === PROCESSOR_CONTEXT.SEARCH_RESPONSE) && ( - <> - - - - )} - + {}} + validate={(values) => {}} + > + {(formikProps) => { + // override to parent form values when changes detected + useEffect(() => { + formikProps.setFieldValue( + 'output_map', + getIn(values, props.outputMapFieldPath) + ); + }, [getIn(values, props.outputMapFieldPath)]); + useEffect(() => { + formikProps.setFieldValue( + 'full_response_path', + getIn(values, fullResponsePathPath) + ); + }, [getIn(values, fullResponsePathPath)]); + + // update temp vars when form changes are detected + useEffect(() => { + setTempOutputMap(getIn(formikProps.values, 'output_map')); + }, [getIn(formikProps.values, 'output_map')]); + useEffect(() => { + setTempFullResponsePath( + getIn(formikProps.values, 'full_response_path') + ); + }, [getIn(formikProps.values, 'full_response_path')]); + + // update tempErrors if errors detected + useEffect(() => { + setTempErrors(!isEmpty(formikProps.errors)); + }, [formikProps.errors]); + + return ( + + + +

{`Configure output`}

+ + + + - Source output + <> + {(onIngestAndNoDocs || onSearchAndNoQuery) && ( + <> + + + + )} + + Fetch some sample output data and see how it is + transformed. + + + {(props.context === PROCESSOR_CONTEXT.INGEST || + props.context === PROCESSOR_CONTEXT.SEARCH_RESPONSE) && ( + <> + + + + )} + + + Source output + + {!isEmpty( + parseModelOutputsObj( + props.modelInterface, + tempFullResponsePath + ) + ) && ( + + setPopoverOpen(false)} + panelPaddingSize="s" + button={ + setPopoverOpen(!popoverOpen)} + > + View output schema + + } + > + + The JSON Schema defining the model's expected + output + + + {customStringify( + parseModelOutputsObj( + props.modelInterface, + tempFullResponsePath + ) + )} + + + + )} + + { + setIsFetching(true); + switch (props.context) { + // note we skip search request processor context. that is because empty output maps are not supported. + // for more details, see comment in ml_processor_inputs.tsx + case PROCESSOR_CONTEXT.INGEST: { + // get the current ingest pipeline up to, and including this processor. + // remove any currently-configured output map since we only want the transformation + // up to, and including, the input map transformations + const valuesWithoutOutputMapConfig = cloneDeep( + values + ); + set( + valuesWithoutOutputMapConfig, + props.outputMapFieldPath, + [] + ); + set( + valuesWithoutOutputMapConfig, + fullResponsePathPath, + getIn(formikProps.values, 'full_response_path') + ); + const curIngestPipeline = formikToPartialPipeline( + valuesWithoutOutputMapConfig, + props.uiConfig, + props.config.id, + true, + PROCESSOR_CONTEXT.INGEST + ) as IngestPipelineConfig; + const curDocs = prepareDocsForSimulate( + values.ingest.docs, + values.ingest.index.name + ); + await dispatch( + simulatePipeline({ + apiBody: { + pipeline: curIngestPipeline, + docs: [curDocs[0]], + }, + dataSourceId, + }) + ) + .unwrap() + .then((resp: SimulateIngestPipelineResponse) => { + try { + const docObjs = unwrapTransformedDocs(resp); + if (docObjs.length > 0) { + const sampleModelResult = + docObjs[0]?.inference_results || {}; + setSourceOutput( + customStringify(sampleModelResult) + ); + } + } catch {} + }) + .catch((error: any) => { + getCore().notifications.toasts.addDanger( + `Failed to fetch input data` + ); + }) + .finally(() => { + setIsFetching(false); + }); + break; + } + case PROCESSOR_CONTEXT.SEARCH_RESPONSE: { + // get the current search pipeline up to, and including this processor. + // remove any currently-configured output map since we only want the transformation + // up to, and including, the input map transformations + const valuesWithoutOutputMapConfig = cloneDeep( + values + ); + set( + valuesWithoutOutputMapConfig, + props.outputMapFieldPath, + [] + ); + set( + valuesWithoutOutputMapConfig, + fullResponsePathPath, + getIn(formikProps.values, 'full_response_path') + ); + const curSearchPipeline = formikToPartialPipeline( + valuesWithoutOutputMapConfig, + props.uiConfig, + props.config.id, + true, + PROCESSOR_CONTEXT.SEARCH_RESPONSE + ) as SearchPipelineConfig; + + // Execute search. Augment the existing query with + // the partial search pipeline (inline) to get the latest transformed + // version of the request. + dispatch( + searchIndex({ + apiBody: { + index: values.ingest.index.name, + body: JSON.stringify({ + ...JSON.parse( + values.search.request as string + ), + search_pipeline: curSearchPipeline || {}, + }), + }, + dataSourceId, + }) + ) + .unwrap() + .then(async (resp) => { + const hits = resp.hits.hits.map( + (hit: SearchHit) => hit._source + ) as any[]; + if (hits.length > 0) { + const sampleModelResult = + hits[0].inference_results || {}; + setSourceOutput( + customStringify(sampleModelResult) + ); + } + }) + .catch((error: any) => { + getCore().notifications.toasts.addDanger( + `Failed to fetch source output data` + ); + }) + .finally(() => { + setIsFetching(false); + }); + break; + } + } + }} + > + Fetch + + + + - {!isEmpty( - parseModelOutputsObj(props.modelInterface, fullResponsePath) - ) && ( - - setPopoverOpen(false)} - panelPaddingSize="s" - button={ - setPopoverOpen(!popoverOpen)} - > - View output schema - + + <> + Define transform + + - - The JSON Schema defining the model's expected output - - - {customStringify( - parseModelOutputsObj( - props.modelInterface, - fullResponsePath - ) - )} - - - - )} + keyPlaceholder={ + props.context === PROCESSOR_CONTEXT.SEARCH_REQUEST + ? 'Specify a query field' + : 'Define a document field' + } + valueTitle="Name" + valuePlaceholder="Name" + valueOptions={ + tempFullResponsePath + ? undefined + : parseModelOutputs(props.modelInterface, false) + } + // If the map we are adding is the first one, populate the selected option to index 0 + onMapAdd={(curArray) => { + if (isEmpty(curArray)) { + setSelectedTransformOption(0); + } + }} + // If the map we are deleting is the one we last used to test, reset the state and + // default to the first map in the list. + onMapDelete={(idxToDelete) => { + if (selectedTransformOption === idxToDelete) { + setSelectedTransformOption(0); + setTransformedOutput('{}'); + } + }} + addMapEntryButtonText="Add output" + addMapButtonText="(Advanced) Add output group" + /> + + + + <> + {transformOptions.length <= 1 ? ( + Transformed output + ) : ( + Transformed output for + } + options={transformOptions} + value={selectedTransformOption} + onChange={(e) => { + setSelectedTransformOption(Number(e.target.value)); + }} + /> + )} + + + + + + { - setIsFetching(true); - switch (props.context) { - // note we skip search request processor context. that is because empty output maps are not supported. - // for more details, see comment in ml_processor_inputs.tsx - case PROCESSOR_CONTEXT.INGEST: { - // get the current ingest pipeline up to, and including this processor. - // remove any currently-configured output map since we only want the transformation - // up to, and including, the input map transformations - const valuesWithoutOutputMapConfig = cloneDeep(values); - set( - valuesWithoutOutputMapConfig, - `ingest.enrich.${props.config.id}.output_map`, - [] - ); - const curIngestPipeline = formikToPartialPipeline( - valuesWithoutOutputMapConfig, - props.uiConfig, - props.config.id, - true, - PROCESSOR_CONTEXT.INGEST - ) as IngestPipelineConfig; - const curDocs = prepareDocsForSimulate( - values.ingest.docs, - values.ingest.index.name - ); - await dispatch( - simulatePipeline({ - apiBody: { - pipeline: curIngestPipeline, - docs: [curDocs[0]], - }, - dataSourceId, - }) - ) - .unwrap() - .then((resp: SimulateIngestPipelineResponse) => { - try { - const docObjs = unwrapTransformedDocs(resp); - if (docObjs.length > 0) { - const sampleModelResult = - docObjs[0]?.inference_results || {}; - setSourceOutput( - customStringify(sampleModelResult) - ); - } - } catch {} - }) - .catch((error: any) => { - getCore().notifications.toasts.addDanger( - `Failed to fetch input data` - ); - }) - .finally(() => { - setIsFetching(false); - }); - break; - } - case PROCESSOR_CONTEXT.SEARCH_RESPONSE: { - // get the current search pipeline up to, and including this processor. - // remove any currently-configured output map since we only want the transformation - // up to, and including, the input map transformations - const valuesWithoutOutputMapConfig = cloneDeep(values); - set( - valuesWithoutOutputMapConfig, - `search.enrichResponse.${props.config.id}.output_map`, - [] - ); - const curSearchPipeline = formikToPartialPipeline( - valuesWithoutOutputMapConfig, - props.uiConfig, - props.config.id, - true, - PROCESSOR_CONTEXT.SEARCH_RESPONSE - ) as SearchPipelineConfig; + onClick={props.onClose} + fill={false} + color="primary" + data-testid="cancelOutputTransformModalButton" + > + Cancel + + { + // update the parent form values + setFieldValue( + fullResponsePathPath, + getIn(formikProps.values, 'full_response_path') + ); + setFieldTouched(fullResponsePathPath, true); - // Execute search. Augment the existing query with - // the partial search pipeline (inline) to get the latest transformed - // version of the request. - dispatch( - searchIndex({ - apiBody: { - index: values.ingest.index.name, - body: JSON.stringify({ - ...JSON.parse(values.search.request as string), - search_pipeline: curSearchPipeline || {}, - }), - }, - dataSourceId, - }) - ) - .unwrap() - .then(async (resp) => { - const hits = resp.hits.hits.map( - (hit: SearchHit) => hit._source - ) as any[]; - if (hits.length > 0) { - const sampleModelResult = - hits[0].inference_results || {}; - setSourceOutput(customStringify(sampleModelResult)); - } - }) - .catch((error: any) => { - getCore().notifications.toasts.addDanger( - `Failed to fetch source output data` - ); - }) - .finally(() => { - setIsFetching(false); - }); - break; - } - } + setFieldValue( + props.outputMapFieldPath, + getIn(formikProps.values, 'output_map') + ); + setFieldTouched(props.outputMapFieldPath, true); + props.onClose(); }} + isDisabled={tempErrors} // blocking update until valid input is given + fill={true} + color="primary" + data-testid="updateOutputTransformModalButton" > - Fetch + Update - - - - - - <> - Define transform - - { - if (isEmpty(curArray)) { - setSelectedTransformOption(0); - } - }} - // If the map we are deleting is the one we last used to test, reset the state and - // default to the first map in the list. - onMapDelete={(idxToDelete) => { - if (selectedTransformOption === idxToDelete) { - setSelectedTransformOption(0); - setTransformedOutput('{}'); - } - }} - addMapEntryButtonText="Add output" - addMapButtonText="(Advanced) Add output group" - /> - - - - <> - {transformOptions.length <= 1 ? ( - Transformed output - ) : ( - Transformed output for} - options={transformOptions} - value={selectedTransformOption} - onChange={(e) => { - setSelectedTransformOption(Number(e.target.value)); - }} - /> - )} - - - - - - - - - Close - - - + + + ); + }} + ); }