Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Misc bug fixes and minor UX improvements #427

Merged
merged 7 commits into from
Oct 16, 2024
Merged

Misc bug fixes and minor UX improvements #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7cd5584
Tune wording for input transform (ingest)
ohltyler Oct 14, 2024
44fb0c4
Fnf import workflow modal
ohltyler Oct 15, 2024
94ff605
Move create/skip toggle in scrollable area
ohltyler Oct 16, 2024
6de99cd
Nest titles in scrollable area
ohltyler Oct 16, 2024
fdfc927
increase scrollable form space
ohltyler Oct 16, 2024
42d21f2
fnf import data wording
ohltyler Oct 16, 2024
6b03cf5
improve source data btns and add last ingested timestamp
ohltyler Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_inputs.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading