Add query param list in advanced transform modals (#529)

* Add param list in all modals if applicable Signed-off-by: Tyler Ohlsen <[email protected]> * Prevent duplicate keys for ML inputs/outputs Signed-off-by: Tyler Ohlsen <[email protected]> * Remove optional flag for search processors Signed-off-by: Tyler Ohlsen <[email protected]> --------- Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Dec 13, 2024 · 6f8cbae · 6f8cbae
1 parent 81969fb
commit 6f8cbae
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 23 deletions.
diff --git a/public/general_components/processors_title.tsx b/public/general_components/processors_title.tsx
@@ -9,6 +9,7 @@ import { EuiFlexItem, EuiText } from '@elastic/eui';
 interface ProcessorsTitleProps {
   title: string;
   processorCount: number;
+  optional: boolean;
 }
 
 /**
@@ -24,11 +25,13 @@ export function ProcessorsTitle(props: ProcessorsTitleProps) {
         <>
           <h3
             style={{ display: 'inline-block' }}
-          >{`${props.title} (${props.processorCount}) -`}</h3>
+          >{`${props.title} (${props.processorCount})`}</h3>
           &nbsp;
-          <h3 style={{ display: 'inline-block', fontStyle: 'italic' }}>
-            optional
-          </h3>
+          {props.optional && (
+            <h3 style={{ display: 'inline-block', fontStyle: 'italic' }}>
+              - optional
+            </h3>
+          )}
         </>
       </EuiText>
     </EuiFlexItem>

diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/enrich_data.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/enrich_data.tsx
@@ -23,6 +23,7 @@ export function EnrichData(props: EnrichDataProps) {
       <ProcessorsTitle
         title="Enrich data"
         processorCount={props.uiConfig.ingest.enrich.processors?.length || 0}
+        optional={true}
       />
       <EuiFlexItem>
         <ProcessorsList

diff --git a/...orkflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_expression_modal.tsx b/...orkflow_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<boolean>(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<QueryParam[]>([]);
+  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) {
                     <EuiFlexItem grow={false}>
                       <EuiFlexGroup
                         direction="row"
-                        justifyContent="spaceAround"
+                        justifyContent="spaceBetween"
                       >
-                        <EuiFlexItem>
+                        <EuiFlexItem grow={false}>
                           <EuiText size="m">Preview</EuiText>
                         </EuiFlexItem>
-                        <EuiFlexItem>
+                        <EuiFlexItem grow={false}>
                           <EuiSmallButton
                             style={{ width: '100px' }}
                             isLoading={isFetching}
                             disabled={
                               onIngestAndNoDocs ||
                               onSearchAndNoQuery ||
-                              !props.isDataFetchingAvailable
+                              !props.isDataFetchingAvailable ||
+                              (props.context !== PROCESSOR_CONTEXT.INGEST &&
+                                containsEmptyValues(queryParams))
                             }
                             onClick={async () => {
                               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) {
                         </EuiFlexItem>
                       </EuiFlexGroup>
                     </EuiFlexItem>
+                    {props.context !== PROCESSOR_CONTEXT.INGEST &&
+                      !isEmpty(queryParams) && (
+                        <EuiFlexItem grow={false}>
+                          <QueryParamsList
+                            queryParams={queryParams}
+                            setQueryParams={setQueryParams}
+                          />
+                        </EuiFlexItem>
+                      )}
                     <EuiFlexItem grow={false}>
                       <EuiText size="s">Source data</EuiText>
                     </EuiFlexItem>

diff --git a/...w_inputs/processor_inputs/ml_processor_inputs/modals/configure_multi_expression_modal.tsx b/...w_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<boolean>(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<QueryParam[]>([]);
+  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(
                     <EuiFlexItem grow={false}>
                       <EuiFlexGroup
                         direction="row"
-                        justifyContent="spaceAround"
+                        justifyContent="spaceBetween"
                       >
-                        <EuiFlexItem>
+                        <EuiFlexItem grow={false}>
                           <EuiText size="m">Preview</EuiText>
                         </EuiFlexItem>
-                        <EuiFlexItem>
+                        <EuiFlexItem grow={false}>
                           <EuiSmallButton
                             style={{ width: '100px' }}
                             isLoading={isFetching}
                             disabled={
                               onIngestAndNoDocs ||
                               onSearchAndNoQuery ||
-                              !props.isDataFetchingAvailable
+                              !props.isDataFetchingAvailable ||
+                              (props.context !== PROCESSOR_CONTEXT.INGEST &&
+                                containsEmptyValues(queryParams))
                             }
                             onClick={async () => {
                               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(
                         </EuiFlexItem>
                       </EuiFlexGroup>
                     </EuiFlexItem>
+                    {props.context !== PROCESSOR_CONTEXT.INGEST &&
+                      !isEmpty(queryParams) && (
+                        <EuiFlexItem grow={false}>
+                          <QueryParamsList
+                            queryParams={queryParams}
+                            setQueryParams={setQueryParams}
+                          />
+                        </EuiFlexItem>
+                      )}
                     <EuiFlexItem grow={false}>
                       <EuiText size="s">Source data</EuiText>
                     </EuiFlexItem>

diff --git a/.../workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_template_modal.tsx b/.../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<boolean>(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<QueryParam[]>([]);
+  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) {
                         </EuiFlexItem>
                       </EuiFlexGroup>
                     </EuiFlexItem>
+                    {props.context !== PROCESSOR_CONTEXT.INGEST &&
+                      !isEmpty(queryParams) && (
+                        <EuiFlexItem grow={false}>
+                          <QueryParamsList
+                            queryParams={queryParams}
+                            setQueryParams={setQueryParams}
+                          />
+                        </EuiFlexItem>
+                      )}
                     <EuiFlexItem grow={false}>
                       <EuiText size="s">Source data</EuiText>
                     </EuiFlexItem>