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

[Backport 2.x] Add export step #198

Merged
merged 1 commit into from
Jun 21, 2024
Merged

[Backport 2.x] Add export step #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,10 @@
},
"dependencies": {
"formik": "2.4.2",
"js-yaml": "^4.1.0",
"reactflow": "^11.8.3",
"yup": "^1.3.2"
},
"devDependencies": {},
"resolutions": {}
}
}
83 changes: 83 additions & 0 deletions public/pages/workflow_detail/workflow_inputs/export_options/export_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React, { useEffect, useState } from 'react';
import yaml from 'js-yaml';
import {
EuiCodeBlock,
EuiFlexGroup,
EuiFlexItem,
EuiRadioGroup,
} from '@elastic/eui';
import { Workflow } from '../../../../../common';
import { reduceToTemplate } from '../../../../utils';

interface SearchInputsProps {
workflow?: Workflow;
}

enum EXPORT_OPTION {
JSON = 'json',
YAML = 'yaml',
}

const exportOptions = [
{
id: EXPORT_OPTION.JSON,
label: 'JSON',
},
{
id: EXPORT_OPTION.YAML,
label: 'YAML',
},
];

/**
* The base component containing all of the export options
*/
export function ExportOptions(props: SearchInputsProps) {
// format type state
const [selectedOption, setSelectedOption] = useState<EXPORT_OPTION>(
EXPORT_OPTION.JSON
);

// formatted string state
const [formattedConfig, setFormattedConfig] = useState<string>('');
useEffect(() => {
if (props.workflow) {
const workflowTemplate = reduceToTemplate(props.workflow);
if (selectedOption === EXPORT_OPTION.JSON) {
setFormattedConfig(JSON.stringify(workflowTemplate, undefined, 2));
} else if (selectedOption === EXPORT_OPTION.YAML) {
setFormattedConfig(yaml.dump(workflowTemplate));
}
}
}, [props.workflow, selectedOption]);

return (
<EuiFlexGroup direction="column">
<EuiFlexItem grow={false}>
<EuiRadioGroup
options={exportOptions}
idSelected={selectedOption}
onChange={(option) => {
setSelectedOption(option as EXPORT_OPTION);
}}
/>
</EuiFlexItem>
{props.workflow !== undefined && (
<EuiFlexItem grow={false}>
<EuiCodeBlock
language={selectedOption}
fontSize="m"
isCopyable={true}
>
{formattedConfig}
</EuiCodeBlock>
</EuiFlexItem>
)}
</EuiFlexGroup>
);
}
6 changes: 6 additions & 0 deletions public/pages/workflow_detail/workflow_inputs/export_options/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

export * from './export_options';
60 changes: 53 additions & 7 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 @@ -43,6 +43,7 @@ import {
hasProvisionedIngestResources,
} from '../../../utils';
import { BooleanField } from './input_fields';
import { ExportOptions } from './export_options';

// styling
import '../workspace/workspace-styles.scss';
Expand All @@ -63,6 +64,7 @@ interface WorkflowInputsProps {
enum STEP {
INGEST = 'Ingestion pipeline',
SEARCH = 'Search pipeline',
EXPORT = 'Export',
}

enum INGEST_OPTION {
Expand All @@ -89,6 +91,8 @@ export function WorkflowInputs(props: WorkflowInputsProps) {

// maintain global states
const onIngest = selectedStep === STEP.INGEST;
const onSearch = selectedStep === STEP.SEARCH;
const onExport = selectedStep === STEP.EXPORT;
const ingestEnabled = values?.ingest?.enabled || false;
const onIngestAndProvisioned = onIngest && ingestProvisioned;
const onIngestAndUnprovisioned = onIngest && !ingestProvisioned;
Expand Down Expand Up @@ -264,14 +268,20 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
steps={[
{
title: STEP.INGEST,
isComplete: selectedStep === STEP.SEARCH,
isSelected: selectedStep === STEP.INGEST,
isComplete: onSearch || onExport,
isSelected: onIngest,
onClick: () => {},
},
{
title: STEP.SEARCH,
isComplete: onExport,
isSelected: onSearch,
onClick: () => {},
},
{
title: STEP.EXPORT,
isComplete: false,
isSelected: selectedStep === STEP.SEARCH,
isSelected: onExport,
onClick: () => {},
},
]}
Expand Down Expand Up @@ -321,7 +331,9 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
? 'Define ingest pipeline'
: onIngestAndProvisioned
? 'Edit ingest pipeline'
: 'Define search pipeline'}
: onSearch
? 'Define search pipeline'
: 'Export project as'}
</h2>
</EuiTitle>
</EuiFlexItem>
Expand All @@ -339,13 +351,15 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
uiConfig={props.uiConfig}
setUiConfig={props.setUiConfig}
/>
) : (
) : onSearch ? (
<SearchInputs
uiConfig={props.uiConfig}
setUiConfig={props.setUiConfig}
setQuery={props.setQuery}
onFormChange={props.onFormChange}
/>
) : (
<ExportOptions workflow={props.workflow} />
)}
</EuiFlexItem>
</>
Expand Down Expand Up @@ -407,7 +421,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
</EuiButton>
</EuiFlexItem>
</>
) : (
) : onSearch ? (
<>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
Expand All @@ -419,14 +433,46 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
<EuiFlexItem grow={false}>
<EuiButton
disabled={false}
fill={true}
fill={false}
onClick={() => {
validateAndRunQuery();
}}
>
Run query
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
disabled={false}
fill={false}
onClick={() => {
setSelectedStep(STEP.EXPORT);
}}
>
{`Export >`}
</EuiButton>
</EuiFlexItem>
</>
) : (
<>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
onClick={() => setSelectedStep(STEP.SEARCH)}
>
Back
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
disabled={false}
fill={true}
onClick={() => {
// TODO: final UX for export flow is TBD.
}}
>
Export
</EuiButton>
</EuiFlexItem>
</>
)}
</EuiFlexGroup>
Expand Down
12 changes: 12 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,11 @@
resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.11.tgz#012c17cb2256ad8de78560da851ab914a7b9b40e"
integrity sha512-L7A0AINMXQpVwxHJ4jxD6/XjZ4NDufaRlUJHjNIFKYUFBH1SvOW+neaqb0VTRSLW5suSrSu19ObFEFnfNcr+qg==

argparse@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==

classcat@^5.0.3, classcat@^5.0.4:
version "5.0.4"
resolved "https://registry.yarnpkg.com/classcat/-/classcat-5.0.4.tgz#e12d1dfe6df6427f260f03b80dc63571a5107ba6"
Expand Down Expand Up @@ -375,6 +380,13 @@ hoist-non-react-statics@^3.3.0:
dependencies:
react-is "^16.7.0"

js-yaml@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
dependencies:
argparse "^2.0.1"

lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
Expand Down
Loading