Skip to content

Commit

Permalink
Misc bug fixes and minor UX improvements (opensearch-project#427)
Browse files Browse the repository at this point in the history 
Signed-off-by: Tyler Ohlsen <[email protected]>
  • Loading branch information
@ohltyler
ohltyler authored Oct 16, 2024
1 parent 1660ba7 commit 1f449af
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 107 deletions.
2 changes: 2 additions & 0 deletions public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_inputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface IngestInputsProps {
uiConfig: WorkflowConfig;
setUiConfig: (uiConfig: WorkflowConfig) => void;
workflow: Workflow | undefined;
lastIngested: number | undefined;
}

/**
Expand All @@ -28,6 +29,7 @@ export function IngestInputs(props: IngestInputsProps) {
workflow={props.workflow}
uiConfig={props.uiConfig}
setIngestDocs={props.setIngestDocs}
lastIngested={props.lastIngested}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
45 changes: 32 additions & 13 deletions public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
WorkspaceFormValues,
customStringify,
isVectorSearchUseCase,
toFormattedDate,
} from '../../../../../common';
import {
AppState,
Expand All @@ -48,6 +49,7 @@ interface SourceDataProps {
workflow: Workflow | undefined;
uiConfig: WorkflowConfig;
setIngestDocs: (docs: string) => void;
lastIngested: number | undefined;
}

enum SOURCE_OPTIONS {
Expand All @@ -65,6 +67,13 @@ export function SourceData(props: SourceDataProps) {
const { values, setFieldValue } = useFormikContext<WorkspaceFormValues>();
const indices = useSelector((state: AppState) => state.opensearch.indices);

// empty/populated docs state
let docs = [];
try {
docs = JSON.parse(getIn(values, 'ingest.docs', []));
} catch {}
const docsPopulated = docs.length > 0;

// selected option state
const [selectedOption, setSelectedOption] = useState<SOURCE_OPTIONS>(
SOURCE_OPTIONS.MANUAL
Expand Down Expand Up @@ -184,7 +193,7 @@ export function SourceData(props: SourceDataProps) {
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<p>{`Edit source data`}</p>
<p>{`Import data`}</p>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
Expand Down Expand Up @@ -258,7 +267,7 @@ export function SourceData(props: SourceDataProps) {
</>
)}
<JsonField
label="Documents"
label="Documents to be imported"
fieldPath={'ingest.docs'}
helpText="Documents should be formatted as a valid JSON array."
editorHeight="25vh"
Expand All @@ -280,27 +289,37 @@ export function SourceData(props: SourceDataProps) {
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h2>Source data</h2>
<h2>Import data</h2>
</EuiTitle>
</EuiFlexItem>
{props.lastIngested !== undefined && (
<EuiFlexItem grow={false}>
<EuiText size="s" color="subdued">
{`Last ingested: ${toFormattedDate(props.lastIngested)}`}
</EuiText>
</EuiFlexItem>
)}

<EuiFlexItem grow={false}>
<EuiSmallButton
fill={false}
style={{ width: '100px' }}
onClick={() => setIsEditModalOpen(true)}
>
Edit
{docsPopulated ? `Edit` : `Select data`}
</EuiSmallButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<JsonField
label="Documents"
fieldPath={'ingest.docs'}
helpText="Documents should be formatted as a valid JSON array."
editorHeight="25vh"
readOnly={true}
/>
</EuiFlexItem>
{docsPopulated && (
<EuiFlexItem grow={false}>
<JsonField
label="Documents to be imported"
fieldPath={'ingest.docs'}
helpText="Documents should be formatted as a valid JSON array."
editorHeight="25vh"
readOnly={true}
/>
</EuiFlexItem>
)}
</EuiFlexGroup>
</>
);
Expand Down
6 changes: 4 additions & 2 deletions ...c/pages/workflow_detail/workflow_inputs/processor_inputs/modals/input_transform_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ interface InputTransformModalProps {
onClose: () => void;
}

// the max number of input docs we use to display & test transforms with
// the max number of input docs we use to display & test transforms with (search response hits)
const MAX_INPUT_DOCS = 10;

/**
Expand Down Expand Up @@ -143,7 +143,9 @@ export function InputTransformModal(props: InputTransformModalProps) {
const description =
props.context === PROCESSOR_CONTEXT.SEARCH_REQUEST
? 'Fetch an input query and see how it is transformed.'
: `Fetch some sample documents (up to ${MAX_INPUT_DOCS}) and see how they are transformed.`;
: props.context === PROCESSOR_CONTEXT.INGEST
? 'Fetch a sample document and see how it is transformed'
: `Fetch some returned documents (up to ${MAX_INPUT_DOCS}) and see how they are transformed.`;

// hook to re-generate the transform when any inputs to the transform are updated
useEffect(() => {
Expand Down
179 changes: 92 additions & 87 deletions public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
EuiModalHeader,
EuiModalHeaderTitle,
EuiPanel,
EuiSpacer,
EuiStepsHorizontal,
EuiText,
EuiTitle,
Expand Down Expand Up @@ -122,6 +121,11 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
// confirm modal state
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);

// last ingested state
const [lastIngested, setLastIngested] = useState<number | undefined>(
undefined
);

// maintain global states
const onIngest = selectedStep === STEP.INGEST;
const onSearch = selectedStep === STEP.SEARCH;
Expand Down Expand Up @@ -549,6 +553,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
.unwrap()
.then(async (resp) => {
props.setIngestResponse(customStringify(resp));
setLastIngested(Date.now());
})
.catch((error: any) => {
props.setIngestResponse('');
Expand Down Expand Up @@ -632,7 +637,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
height: '100%',
}}
>
<EuiFlexItem grow={false}>
<EuiFlexItem grow={false} style={{ marginBottom: '-8px' }}>
<EuiStepsHorizontal
steps={[
{
Expand Down Expand Up @@ -711,99 +716,99 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
</EuiModalFooter>
</EuiModal>
)}
{onIngestAndUnprovisioned && (
<>
<EuiSpacer size="m" />
<BooleanField
fieldPath="ingest.enabled"
enabledOption={{
id: INGEST_OPTION.CREATE,
label: (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiText color="default">
Create an ingest pipeline
</EuiText>
<EuiText size="xs" color="subdued">
Configure and ingest data into an index.
</EuiText>
</EuiFlexGroup>
),
}}
disabledOption={{
id: INGEST_OPTION.SKIP,
label: (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiText color="default">
Skip ingestion pipeline
</EuiText>
<EuiText size="xs" color="subdued">
Use an existing index with data ingested.
</EuiText>
</EuiFlexGroup>
),
}}
showLabel={false}
/>
</>
)}
</EuiFlexItem>
{!onIngestAndDisabled && (
<>
<EuiFlexItem grow={false}>
<EuiTitle>
<h2>
{onIngestAndUnprovisioned ? (
'Define ingest pipeline'
) : onIngestAndProvisioned ? (
<EuiFlexGroup
direction="row"
justifyContent="spaceBetween"
>
<EuiFlexItem grow={false}>
Edit ingest pipeline
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSmallButtonEmpty
color="danger"
onClick={() => setIsModalOpen(true)}
>
<EuiIcon type="trash" />
{` `}Delete resources
</EuiSmallButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
) : (
'Define search pipeline'
)}
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
grow={true}
style={{
overflowY: 'scroll',
overflowX: 'hidden',
}}
>
{onIngest ? (
<EuiFlexItem
grow={true}
style={{
overflowY: 'scroll',
overflowX: 'hidden',
}}
>
<EuiFlexItem grow={false}>
<EuiTitle>
<h2>
{onIngestAndUnprovisioned ? (
'Define ingest pipeline'
) : onIngestAndProvisioned ? (
<EuiFlexGroup direction="row" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
Edit ingest pipeline
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSmallButtonEmpty
color="danger"
onClick={() => setIsModalOpen(true)}
>
<EuiIcon type="trash" />
{` `}Delete resources
</EuiSmallButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
) : (
'Define search pipeline'
)}
</h2>
</EuiTitle>
</EuiFlexItem>
{onIngest ? (
<>
{onIngestAndUnprovisioned && (
<>
<BooleanField
fieldPath="ingest.enabled"
enabledOption={{
id: INGEST_OPTION.CREATE,
label: (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiText color="default">
Create an ingest pipeline
</EuiText>
<EuiText size="xs" color="subdued">
Configure and ingest data into an index.
</EuiText>
</EuiFlexGroup>
),
}}
disabledOption={{
id: INGEST_OPTION.SKIP,
label: (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiText color="default">
Skip ingestion pipeline
</EuiText>
<EuiText size="xs" color="subdued">
Use an existing index with data ingested.
</EuiText>
</EuiFlexGroup>
),
}}
showLabel={false}
/>
</>
)}
{!onIngestAndDisabled && (
<IngestInputs
setIngestDocs={props.setIngestDocs}
uiConfig={props.uiConfig}
setUiConfig={props.setUiConfig}
workflow={props.workflow}
/>
) : (
<SearchInputs
uiConfig={props.uiConfig}
setUiConfig={props.setUiConfig}
setQuery={props.setQuery}
setQueryResponse={props.setQueryResponse}
lastIngested={lastIngested}
/>
)}
</EuiFlexItem>
</>
)}
<EuiFlexItem grow={false} style={{ marginBottom: '-10px' }}>
</>
) : (
<SearchInputs
uiConfig={props.uiConfig}
setUiConfig={props.setUiConfig}
setQuery={props.setQuery}
setQueryResponse={props.setQueryResponse}
/>
)}
</EuiFlexItem>
<EuiFlexItem
grow={false}
style={{ marginBottom: '-10px', marginTop: '-24px' }}
>
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem>
<EuiHorizontalRule margin="m" />
Expand Down
10 changes: 5 additions & 5 deletions public/pages/workflows/import_workflow/import_workflow_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,7 @@ export function ImportWorkflowModal(props: ImportWorkflowModalProps) {
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiFlexGroup
direction="column"
justifyContent="center"
alignItems="center"
>
<EuiFlexGroup direction="column">
{fileContents !== undefined && !isValidWorkflow(fileObj) && (
<>
<EuiFlexItem>
Expand All @@ -116,11 +112,15 @@ export function ImportWorkflowModal(props: ImportWorkflowModalProps) {
)}
<EuiFlexItem grow={false}>
<EuiCompressedFilePicker
fullWidth={true}
compressed={false}
multiple={false}
initialPromptText="Select or drag and drop a file"
onChange={(files) => {
if (files && files.length > 0) {
fileReader.readAsText(files[0]);
} else {
setFileContents(undefined);
}
}}
display="large"
Expand Down

0 comments on commit 1f449af

Please sign in to comment.