diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx index da0caf78..377eb962 100644 --- a/public/pages/workflow_detail/resizable_workspace.tsx +++ b/public/pages/workflow_detail/resizable_workspace.tsx @@ -464,7 +464,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) { onToggleChange()} @@ -483,8 +483,8 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) { void; +} + +/** + * The footer component containing the navigation buttons. + */ +export function Footer(props: FooterProps) { + return ( + + + + + + + {props.selectedStep === CREATE_STEP.INGEST ? ( + + props.setSelectedStep(CREATE_STEP.SEARCH)} + > + Next + + + ) : ( + <> + + props.setSelectedStep(CREATE_STEP.INGEST)} + > + Back + + + + + // TODO: implement creation + console.log('Placeholder for workflow creation...') + } + > + Create + + + + )} + + + + ); +} diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/enrich_data.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/enrich_data.tsx new file mode 100644 index 00000000..6b7f4cad --- /dev/null +++ b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/enrich_data.tsx @@ -0,0 +1,27 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'; + +interface EnrichDataProps {} + +/** + * Input component for configuring any data enrichment for ingest (ingest pipeline processors etc.) + */ +export function EnrichData(props: EnrichDataProps) { + return ( + + + +

Enrich data

+ + + + TODO + + + ); +} diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/index.ts b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/index.ts new file mode 100644 index 00000000..44de94bf --- /dev/null +++ b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/index.ts @@ -0,0 +1,6 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export * from './ingest_inputs'; diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx new file mode 100644 index 00000000..ccbdcf04 --- /dev/null +++ b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx @@ -0,0 +1,27 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'; + +interface IngestDataProps {} + +/** + * Input component for configuring the data ingest (the OpenSearch index) + */ +export function IngestData(props: IngestDataProps) { + return ( + + + +

Ingest data

+ + + + TODO + + + ); +} diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_inputs.tsx new file mode 100644 index 00000000..29d5c203 --- /dev/null +++ b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_inputs.tsx @@ -0,0 +1,37 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui'; +import { SourceData } from './source_data'; +import { EnrichData } from './enrich_data'; +import { IngestData } from './ingest_data'; + +interface IngestInputsProps {} + +/** + * The base component containing all of the ingest-related inputs + */ +export function IngestInputs(props: IngestInputsProps) { + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx new file mode 100644 index 00000000..35d6af9a --- /dev/null +++ b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx @@ -0,0 +1,27 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'; + +interface SourceDataProps {} + +/** + * Input component for configuring the source data for ingest. + */ +export function SourceData(props: SourceDataProps) { + return ( + + + +

Source data

+ + + + TODO + + + ); +} diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx b/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx new file mode 100644 index 00000000..c25c7810 --- /dev/null +++ b/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx @@ -0,0 +1,27 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'; + +interface ConfigureSearchRequestProps {} + +/** + * Input component for configuring a search request + */ +export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) { + return ( + + + +

Configure search request

+ + + + TODO + + + ); +} diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/enrich_search_request.tsx b/public/pages/workflow_detail/workflow_inputs/search_inputs/enrich_search_request.tsx new file mode 100644 index 00000000..0144dd6b --- /dev/null +++ b/public/pages/workflow_detail/workflow_inputs/search_inputs/enrich_search_request.tsx @@ -0,0 +1,27 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'; + +interface EnrichSearchRequestProps {} + +/** + * Input component for enriching a search request (configuring search request processors, etc.) + */ +export function EnrichSearchRequest(props: EnrichSearchRequestProps) { + return ( + + + +

Enrich search request

+ + + + TODO + + + ); +} diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/enrich_search_response.tsx b/public/pages/workflow_detail/workflow_inputs/search_inputs/enrich_search_response.tsx new file mode 100644 index 00000000..420702b1 --- /dev/null +++ b/public/pages/workflow_detail/workflow_inputs/search_inputs/enrich_search_response.tsx @@ -0,0 +1,27 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'; + +interface EnrichSearchResponseProps {} + +/** + * Input component for enriching a search response (configuring search response processors, etc.) + */ +export function EnrichSearchResponse(props: EnrichSearchResponseProps) { + return ( + + + +

Enrich search response

+ + + + TODO + + + ); +} diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/index.ts b/public/pages/workflow_detail/workflow_inputs/search_inputs/index.ts new file mode 100644 index 00000000..ad4755d6 --- /dev/null +++ b/public/pages/workflow_detail/workflow_inputs/search_inputs/index.ts @@ -0,0 +1,6 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export * from './search_inputs'; diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/search_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/search_inputs/search_inputs.tsx new file mode 100644 index 00000000..9427c09a --- /dev/null +++ b/public/pages/workflow_detail/workflow_inputs/search_inputs/search_inputs.tsx @@ -0,0 +1,37 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui'; +import { ConfigureSearchRequest } from './configure_search_request'; +import { EnrichSearchRequest } from './enrich_search_request'; +import { EnrichSearchResponse } from './enrich_search_response'; + +interface SearchInputsProps {} + +/** + * The base component containing all of the search-related inputs + */ +export function SearchInputs(props: SearchInputsProps) { + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx index 78b6bbab..525058ab 100644 --- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx +++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx @@ -3,25 +3,58 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui'; +import React, { useEffect, useState } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui'; import { Workflow } from '../../../../common'; +import { Footer } from './footer'; +import { IngestInputs } from './ingest_inputs'; +import { SearchInputs } from './search_inputs'; interface WorkflowInputsProps { workflow: Workflow | undefined; } +export enum CREATE_STEP { + INGEST = 'Step 1: Define ingestion pipeline', + SEARCH = 'Step 2: Define search pipeline', +} + /** * The workflow inputs component containing the multi-step flow to create ingest * and search flows for a particular workflow. */ export function WorkflowInputs(props: WorkflowInputsProps) { + const [selectedStep, setSelectedStep] = useState( + CREATE_STEP.INGEST + ); + + useEffect(() => {}, [selectedStep]); + return ( - + + + +

{selectedStep}

+ + - Hello world + {selectedStep === CREATE_STEP.INGEST ? ( + + ) : ( + + )} + + +