Add stub components for the basic ingest and search configs

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · May 9, 2024 · ededd09 · ededd09
1 parent fb5af3d
commit ededd09
Show file tree

Hide file tree

Showing 13 changed files with 353 additions and 7 deletions.
diff --git 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) {
                   <EuiResizablePanel
                     id={WORKFLOW_INPUTS_PANEL_ID}
                     mode="collapsible"
-                    initialSize={40}
+                    initialSize={50}
                     minSize="25%"
                     paddingSize="s"
                     onToggleCollapsedInternal={() => onToggleChange()}
@@ -483,8 +483,8 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                   <EuiResizablePanel
                     style={{ marginRight: '-16px' }}
                     mode="main"
-                    initialSize={80}
-                    minSize="50%"
+                    initialSize={60}
+                    minSize="25%"
                     paddingSize="s"
                   >
                     <EuiFlexGroup

diff --git a/public/pages/workflow_detail/workflow_inputs/footer.tsx b/public/pages/workflow_detail/workflow_inputs/footer.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+} from '@elastic/eui';
+import { CREATE_STEP } from './workflow_inputs';
+
+interface FooterProps {
+  selectedStep: CREATE_STEP;
+  setSelectedStep: (step: CREATE_STEP) => void;
+}
+
+/**
+ * The footer component containing the navigation buttons.
+ */
+export function Footer(props: FooterProps) {
+  return (
+    <EuiFlexGroup direction="column" gutterSize="none">
+      <EuiFlexItem>
+        <EuiHorizontalRule margin="m" />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiFlexGroup direction="row" justifyContent="flexEnd">
+          {props.selectedStep === CREATE_STEP.INGEST ? (
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                onClick={() => props.setSelectedStep(CREATE_STEP.SEARCH)}
+              >
+                Next
+              </EuiButton>
+            </EuiFlexItem>
+          ) : (
+            <>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  onClick={() => props.setSelectedStep(CREATE_STEP.INGEST)}
+                >
+                  Back
+                </EuiButton>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  disabled={true}
+                  onClick={() =>
+                    // TODO: implement creation
+                    console.log('Placeholder for workflow creation...')
+                  }
+                >
+                  Create
+                </EuiButton>
+              </EuiFlexItem>
+            </>
+          )}
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
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
@@ -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 (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiTitle size="xs">
+          <h4>Enrich data</h4>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText grow={false}>TODO</EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/index.ts 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
@@ -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 (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiTitle size="xs">
+          <h4>Ingest data</h4>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText grow={false}>TODO</EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
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
@@ -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 (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <SourceData />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiHorizontalRule margin="none" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EnrichData />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiHorizontalRule margin="none" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <IngestData />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
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
@@ -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 (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiTitle size="xs">
+          <h4>Source data</h4>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText grow={false}>TODO</EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
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
@@ -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 (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiTitle size="xs">
+          <h4>Configure search request</h4>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText grow={false}>TODO</EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
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
@@ -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 (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiTitle size="xs">
+          <h4>Enrich search request</h4>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText grow={false}>TODO</EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
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
@@ -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 (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiTitle size="xs">
+          <h4>Enrich search response</h4>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText grow={false}>TODO</EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/index.ts 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
@@ -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 (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <ConfigureSearchRequest />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiHorizontalRule margin="none" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EnrichSearchRequest />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiHorizontalRule margin="none" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EnrichSearchResponse />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}