Skip to content

Commit

Permalink
Add query param list in advanced transform modals (#529) (#532)
Browse files Browse the repository at this point in the history 
* Add param list in all modals if applicable



* Prevent duplicate keys for ML inputs/outputs



* Remove optional flag for search processors



---------


(cherry picked from commit 6f8cbae)

Signed-off-by: Tyler Ohlsen <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@opensearch-trigger-bot @github-actions
opensearch-trigger-bot[bot] and github-actions[bot] authored Dec 13, 2024
1 parent 08416fb commit 45291cb
Show file tree
Hide file tree
Showing 9 changed files with 199 additions and 23 deletions.
11 changes: 7 additions & 4 deletions public/general_components/processors_title.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { EuiFlexItem, EuiText } from '@elastic/eui';
interface ProcessorsTitleProps {
title: string;
processorCount: number;
optional: boolean;
}

/**
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions public/pages/workflow_detail/workflow_inputs/ingest_inputs/enrich_data.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
54 changes: 48 additions & 6 deletions ...orkflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_expression_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -56,6 +61,7 @@ import {
useAppDispatch,
} from '../../../../../../store';
import { getCore } from '../../../../../../services';
import { QueryParamsList } from '../../../../../../general_components';

interface ConfigureExpressionModalProps {
uiConfig: WorkflowConfig;
Expand Down Expand Up @@ -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 = [
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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 || {},
Expand Down Expand Up @@ -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>
Expand Down
50 changes: 45 additions & 5 deletions ...w_inputs/processor_inputs/ml_processor_inputs/modals/configure_multi_expression_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
MultiExpressionFormValues,
OutputMapEntry,
PROCESSOR_CONTEXT,
QueryParam,
SearchHit,
SearchPipelineConfig,
SimulateIngestPipelineResponse,
Expand All @@ -41,9 +42,13 @@ import {
WorkflowFormValues,
} from '../../../../../../../common';
import {
containsEmptyValues,
containsSameValues,
formikToPartialPipeline,
generateTransform,
getDataSourceId,
getPlaceholdersFromQuery,
injectParameters,
prepareDocsForSimulate,
unwrapTransformedDocs,
} from '../../../../../../utils';
Expand All @@ -54,6 +59,7 @@ import {
useAppDispatch,
} from '../../../../../../store';
import { getCore } from '../../../../../../services';
import { QueryParamsList } from '../../../../../../general_components';

interface ConfigureMultiExpressionModalProps {
uiConfig: WorkflowConfig;
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 || {},
Expand Down Expand Up @@ -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>
Expand Down
48 changes: 45 additions & 3 deletions .../workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_template_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -60,6 +65,7 @@ import {
useAppDispatch,
} from '../../../../../../store';
import { getCore } from '../../../../../../services';
import { QueryParamsList } from '../../../../../../general_components';

interface ConfigureTemplateModalProps {
uiConfig: WorkflowConfig;
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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 || {},
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 45291cb

Please sign in to comment.