Skip to content

Commit

Permalink
Add export step (#197) (#198)
Browse files Browse the repository at this point in the history
Signed-off-by: Tyler Ohlsen <[email protected]>
(cherry picked from commit 326d099)

Co-authored-by: Tyler Ohlsen <[email protected]>
  • Loading branch information
opensearch-trigger-bot[bot] and ohltyler committed Jun 21, 2024
1 parent cb2e1e7 commit 95f5f6b
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 8 deletions.
3 changes: 2 additions & 1 deletion package.json
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": {}
}
}
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>
);
}
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
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
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

0 comments on commit 95f5f6b

Please sign in to comment.