From a3754bc988d342edaafe02d5d323f1eaefc73f4f Mon Sep 17 00:00:00 2001 From: Tyler Ohlsen Date: Thu, 12 Dec 2024 10:53:10 -0800 Subject: [PATCH] Add param list in all modals if applicable Signed-off-by: Tyler Ohlsen --- .../modals/configure_expression_modal.tsx | 54 ++++++++++++++++--- .../configure_multi_expression_modal.tsx | 50 +++++++++++++++-- .../modals/configure_template_modal.tsx | 48 +++++++++++++++-- 3 files changed, 138 insertions(+), 14 deletions(-) diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_expression_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_expression_modal.tsx index 86a12a4b..fdd37618 100644 --- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_expression_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_expression_modal.tsx @@ -39,13 +39,18 @@ import { WorkflowFormValues, REQUEST_PREFIX, REQUEST_PREFIX_WITH_JSONPATH_ROOT_SELECTOR, + QueryParam, } from '../../../../../../../common'; import { + containsEmptyValues, + containsSameValues, formikToPartialPipeline, generateArrayTransform, generateTransform, getDataSourceId, getInitialValue, + getPlaceholdersFromQuery, + injectParameters, prepareDocsForSimulate, unwrapTransformedDocs, } from '../../../../../../utils'; @@ -56,6 +61,7 @@ import { useAppDispatch, } from '../../../../../../store'; import { getCore } from '../../../../../../services'; +import { QueryParamsList } from '../../../../../../general_components'; interface ConfigureExpressionModalProps { uiConfig: WorkflowConfig; @@ -140,6 +146,29 @@ export function ConfigureExpressionModal(props: ConfigureExpressionModalProps) { // fetching input data state const [isFetching, setIsFetching] = useState(false); + // query params state, if applicable. Users cannot run preview if there are query parameters + // and the user is configuring something in a search context (search request/response) + const [queryParams, setQueryParams] = useState([]); + useEffect(() => { + if (props.context !== PROCESSOR_CONTEXT.INGEST && query !== undefined) { + const placeholders = getPlaceholdersFromQuery(query); + if ( + !containsSameValues( + placeholders, + queryParams.map((queryParam) => queryParam.name) + ) + ) { + setQueryParams( + placeholders.map((placeholder) => ({ + name: placeholder, + type: 'Text', + value: '', + })) + ); + } + } + }, [query]); + // hook to re-generate the transform when any inputs to the transform are updated useEffect(() => { const tempExpressionAsInputMap = [ @@ -330,19 +359,21 @@ export function ConfigureExpressionModal(props: ConfigureExpressionModalProps) { - + Preview - + { setIsFetching(true); @@ -426,7 +457,9 @@ export function ConfigureExpressionModal(props: ConfigureExpressionModalProps) { // 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); + setSourceInput( + injectParameters(queryParams, query) + ); } setIsFetching(false); break; @@ -448,7 +481,7 @@ export function ConfigureExpressionModal(props: ConfigureExpressionModalProps) { index: values.search.index.name, body: JSON.stringify({ ...JSON.parse( - values.search.request as string + injectParameters(queryParams, query) ), search_pipeline: curSearchPipeline || {}, @@ -490,6 +523,15 @@ export function ConfigureExpressionModal(props: ConfigureExpressionModalProps) { + {props.context !== PROCESSOR_CONTEXT.INGEST && + !isEmpty(queryParams) && ( + + + + )} Source data diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_multi_expression_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_multi_expression_modal.tsx index c35c86df..a640a1ed 100644 --- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_multi_expression_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_multi_expression_modal.tsx @@ -33,6 +33,7 @@ import { MultiExpressionFormValues, OutputMapEntry, PROCESSOR_CONTEXT, + QueryParam, SearchHit, SearchPipelineConfig, SimulateIngestPipelineResponse, @@ -41,9 +42,13 @@ import { WorkflowFormValues, } from '../../../../../../../common'; import { + containsEmptyValues, + containsSameValues, formikToPartialPipeline, generateTransform, getDataSourceId, + getPlaceholdersFromQuery, + injectParameters, prepareDocsForSimulate, unwrapTransformedDocs, } from '../../../../../../utils'; @@ -54,6 +59,7 @@ import { useAppDispatch, } from '../../../../../../store'; import { getCore } from '../../../../../../services'; +import { QueryParamsList } from '../../../../../../general_components'; interface ConfigureMultiExpressionModalProps { uiConfig: WorkflowConfig; @@ -144,6 +150,29 @@ export function ConfigureMultiExpressionModal( // fetching input data state const [isFetching, setIsFetching] = useState(false); + // query params state, if applicable. Users cannot run preview if there are query parameters + // and the user is configuring something in a search context (search request/response) + const [queryParams, setQueryParams] = useState([]); + useEffect(() => { + if (props.context !== PROCESSOR_CONTEXT.INGEST && query !== undefined) { + const placeholders = getPlaceholdersFromQuery(query); + if ( + !containsSameValues( + placeholders, + queryParams.map((queryParam) => queryParam.name) + ) + ) { + setQueryParams( + placeholders.map((placeholder) => ({ + name: placeholder, + type: 'Text', + value: '', + })) + ); + } + } + }, [query]); + // hook to re-generate the transform when any inputs to the transform are updated useEffect(() => { const tempExpressionsAsOutputMap = tempExpressions.map( @@ -356,19 +385,21 @@ export function ConfigureMultiExpressionModal( - + Preview - + { setIsFetching(true); @@ -482,7 +513,7 @@ export function ConfigureMultiExpressionModal( index: values.search.index.name, body: JSON.stringify({ ...JSON.parse( - values.search.request as string + injectParameters(queryParams, query) ), search_pipeline: curSearchPipeline || {}, @@ -522,6 +553,15 @@ export function ConfigureMultiExpressionModal( + {props.context !== PROCESSOR_CONTEXT.INGEST && + !isEmpty(queryParams) && ( + + + + )} Source data diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_template_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_template_modal.tsx index ce3bb2cc..ffe7910c 100644 --- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_template_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_template_modal.tsx @@ -43,13 +43,18 @@ import { TRANSFORM_CONTEXT, WorkflowConfig, WorkflowFormValues, + QueryParam, } from '../../../../../../../common'; import { + containsEmptyValues, + containsSameValues, formikToPartialPipeline, generateArrayTransform, generateTransform, getDataSourceId, getInitialValue, + getPlaceholdersFromQuery, + injectParameters, prepareDocsForSimulate, unwrapTransformedDocs, } from '../../../../../../utils'; @@ -60,6 +65,7 @@ import { useAppDispatch, } from '../../../../../../store'; import { getCore } from '../../../../../../services'; +import { QueryParamsList } from '../../../../../../general_components'; interface ConfigureTemplateModalProps { uiConfig: WorkflowConfig; @@ -168,6 +174,29 @@ export function ConfigureTemplateModal(props: ConfigureTemplateModalProps) { // fetching input data state const [isFetching, setIsFetching] = useState(false); + // query params state, if applicable. Users cannot run preview if there are query parameters + // and the user is configuring something in a search context (search request/response) + const [queryParams, setQueryParams] = useState([]); + useEffect(() => { + if (props.context !== PROCESSOR_CONTEXT.INGEST && query !== undefined) { + const placeholders = getPlaceholdersFromQuery(query); + if ( + !containsSameValues( + placeholders, + queryParams.map((queryParam) => queryParam.name) + ) + ) { + setQueryParams( + placeholders.map((placeholder) => ({ + name: placeholder, + type: 'Text', + value: '', + })) + ); + } + } + }, [query]); + // hook to re-generate the transform when any inputs to the transform are updated useEffect(() => { const nestedVarsAsInputMap = tempNestedVars?.map((expressionVar) => { @@ -546,7 +575,9 @@ export function ConfigureTemplateModal(props: ConfigureTemplateModalProps) { disabled={ onIngestAndNoDocs || onSearchAndNoQuery || - !props.isDataFetchingAvailable + !props.isDataFetchingAvailable || + (props.context !== PROCESSOR_CONTEXT.INGEST && + containsEmptyValues(queryParams)) } onClick={async () => { setIsFetching(true); @@ -630,7 +661,9 @@ export function ConfigureTemplateModal(props: ConfigureTemplateModalProps) { // 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); + setSourceInput( + injectParameters(queryParams, query) + ); } setIsFetching(false); break; @@ -652,7 +685,7 @@ export function ConfigureTemplateModal(props: ConfigureTemplateModalProps) { index: values.search.index.name, body: JSON.stringify({ ...JSON.parse( - values.search.request as string + injectParameters(queryParams, query) ), search_pipeline: curSearchPipeline || {}, @@ -694,6 +727,15 @@ export function ConfigureTemplateModal(props: ConfigureTemplateModalProps) { + {props.context !== PROCESSOR_CONTEXT.INGEST && + !isEmpty(queryParams) && ( + + + + )} Source data