Skip to content

Commit

Permalink
Add param list in all modals if applicable
Browse files Browse the repository at this point in the history 
Signed-off-by: Tyler Ohlsen <[email protected]>
  • Loading branch information
@ohltyler
ohltyler committed Dec 12, 2024
1 parent b613ce3 commit a3754bc
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 14 deletions.
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

0 comments on commit a3754bc

Please sign in to comment.