Add workflow component interfaces and UI component fn

Signed-off-by: Tyler Ohlsen <[email protected]>

public/component_types/base_interfaces.ts

@@ -0,0 +1,87 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { COMPONENT_CATEGORY } from '../utils';
+
+/**
+ * ************ Types **************************
+ */
+
+// TODO: may change to enums later
+export type BaseClass = string;
+export type UIFlow = string;
+
+// will expand later on
+export type FieldType = 'string' | 'json';
+
+/**
+ * ************ Base interfaces ****************
+ */
+
+/**
+ * Represents a single base class as an input handle for a component.
+ * It may be optional. It may also accept multiples of that class.
+ */
+export interface IComponentInput {
+  id: string;
+  label: string;
+  baseClass: string;
+  optional: boolean;
+  acceptMultiple: boolean;
+}
+
+/**
+ * An input field for a component. Specifies enough configuration for the
+ * UI node to render it properly within the component (show it as optional,
+ * put it in advanced settings, placeholder values, etc.)
+ */
+export interface IComponentField {
+  label: string;
+  type: FieldType;
+  placeholder?: string;
+  optional?: boolean;
+  advanced?: boolean;
+}
+
+/**
+ * Represents the list of base classes as a single output handle for
+ * a component.
+ */
+export interface IComponentOutput {
+  id: string;
+  label: string;
+  baseClasses: BaseClass[];
+}
+
+/**
+ * The base interface the components will implement.
+ */
+export interface IComponent {
+  id: string;
+  type: BaseClass;
+  label: string;
+  description: string;
+  category: COMPONENT_CATEGORY;
+  // determines if this component allows for new creation. this means to
+  // allow a "create" option on the UI component, as well as potentially
+  // include in the use case template construction ('provisioning' flow)
+  allowsCreation: boolean;
+  // determines if this is something that will be included in the use
+  // case template construction (query or ingest flows). provisioning flow
+  // is handled by the allowsCreation flag above.
+  isApplicationStep: boolean;
+  // the set of allowed flows this component can be drug into the workspace
+  allowedFlows: UIFlow[];
+  // the list of base classes that will be used in the component output
+  baseClasses?: BaseClass[];
+  inputs?: IComponentInput[];
+  fields?: IComponentField[];
+  // if the component supports creation, we will have a different set of input fields
+  // the user needs to fill out
+  createFields?: IComponentField[];
+  outputs?: IComponentOutput[];
+  // we will need some init function when the component is drug into the workspace
+  init?(): Promise<any>;
+}

public/component_types/index.ts

@@ -3,4 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export * from './interfaces';
+export * from './base_interfaces';
+export * from './processors';
+export * from './indices';

public/component_types/indices/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './knn_index';

public/component_types/indices/knn_index.ts

@@ -0,0 +1,83 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { COMPONENT_CATEGORY } from '../../utils';
+import {
+  IComponent,
+  IComponentField,
+  IComponentInput,
+  IComponentOutput,
+  UIFlow,
+  BaseClass,
+} from '../base_interfaces';
+
+export class KnnIndex implements IComponent {
+  id: string;
+  type: BaseClass;
+  label: string;
+  description: string;
+  category: COMPONENT_CATEGORY;
+  allowsCreation: boolean;
+  isApplicationStep: boolean;
+  allowedFlows: UIFlow[];
+  baseClasses: BaseClass[];
+  inputs: IComponentInput[];
+  fields: IComponentField[];
+  inputFields: IComponentField[];
+  outputs: IComponentOutput[];
+
+  constructor() {
+    this.id = 'knn_index';
+    this.type = 'knn_index';
+    this.label = 'k-NN Index';
+    this.description = 'A k-NN Index to be used as a vector store';
+    this.category = COMPONENT_CATEGORY.INDICES;
+    this.allowsCreation = true;
+    this.isApplicationStep = false;
+    // TODO: 'other' may not be how this is stored. the idea is 'other' allows
+    // for placement outside of the ingest or query flows- typically something
+    // that will be referenced/used as input across multiple flows
+    this.allowedFlows = ['Ingest', 'Query', 'Other'];
+    this.baseClasses = [this.type];
+    this.inputs = [];
+    this.fields = [
+      {
+        label: 'Name',
+        type: 'string',
+        optional: false,
+        advanced: false,
+      },
+    ];
+    this.inputFields = [
+      {
+        label: 'Name',
+        type: 'string',
+        optional: false,
+        advanced: false,
+      },
+      // we don't need to expose "settings" here since it will be index.knn by default
+      // just let users customize the mappings
+      // TODO: figure out how to handle defaults for all of these values. maybe toggle between
+      // simple form inputs vs. complex JSON editor
+      {
+        label: 'Mappings',
+        type: 'json',
+        optional: false,
+        advanced: false,
+      },
+    ];
+    this.outputs = [
+      {
+        id: this.id,
+        label: this.label,
+        baseClasses: this.baseClasses,
+      },
+    ];
+  }
+
+  async init(): Promise<any> {
+    return new KnnIndex();
+  }
+}

public/component_types/processors/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './text_embedding_processor';

public/component_types/processors/text_embedding_processor.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { COMPONENT_CATEGORY } from '../../utils';
+import {
+  IComponent,
+  IComponentField,
+  IComponentInput,
+  IComponentOutput,
+  UIFlow,
+  BaseClass,
+} from '../base_interfaces';
+
+export class TextEmbeddingProcessor implements IComponent {
+  id: string;
+  type: BaseClass;
+  label: string;
+  description: string;
+  category: COMPONENT_CATEGORY;
+  allowsCreation: boolean;
+  isApplicationStep: boolean;
+  allowedFlows: UIFlow[];
+  baseClasses: BaseClass[];
+  inputs: IComponentInput[];
+  fields: IComponentField[];
+  outputs: IComponentOutput[];
+
+  constructor() {
+    this.id = 'text_embedding_processor';
+    this.type = 'text_embedding_processor';
+    this.label = 'Text Embedding Processor';
+    this.description =
+      'A text embedding ingest processor to be used in an ingest pipeline';
+    this.category = COMPONENT_CATEGORY.INGEST_PROCESSORS;
+    this.allowsCreation = false;
+    this.isApplicationStep = false;
+    this.allowedFlows = ['Ingest'];
+    this.baseClasses = [this.type];
+    this.inputs = [];
+    this.fields = [
+      {
+        label: 'Model ID',
+        type: 'string',
+        optional: false,
+        advanced: false,
+      },
+      {
+        label: 'Input Field',
+        type: 'string',
+        optional: false,
+        advanced: false,
+      },
+      {
+        label: 'Output Field',
+        type: 'string',
+        optional: false,
+        advanced: false,
+      },
+    ];
+    this.outputs = [
+      {
+        id: this.id,
+        label: this.label,
+        baseClasses: this.baseClasses,
+      },
+    ];
+  }
+
+  async init(): Promise<any> {
+    return new TextEmbeddingProcessor();
+  }
+}

public/pages/workflow_builder/index.ts

@@ -4,3 +4,4 @@
  */
 
 export { WorkflowBuilder } from './workflow_builder';
+export { WorkflowComponent } from './workflow_component';

public/pages/workflow_builder/workflow_builder.tsx

@@ -14,6 +14,12 @@ import {
 } from '@elastic/eui';
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
+import {
+  TextEmbeddingProcessor,
+  IComponent,
+  KnnIndex,
+} from '../../component_types';
+import { WorkflowComponent } from './workflow_component';
 
 export function WorkflowBuilder() {
   useEffect(() => {
@@ -23,6 +29,11 @@ export function WorkflowBuilder() {
     ]);
   });
 
+  const curComponents = [
+    new TextEmbeddingProcessor(),
+    new KnnIndex(),
+  ] as IComponent[];
+
   return (
     <div>
       <EuiPageHeader>
@@ -35,9 +46,15 @@ export function WorkflowBuilder() {
         </EuiFlexGroup>
       </EuiPageHeader>
       <EuiSpacer size="l" />
-      <EuiFlexItem>
-        <EuiText>Placeholder for workflow builder page...</EuiText>
-      </EuiFlexItem>
+      <EuiFlexGroup direction="row">
+        {curComponents.map((component, idx) => {
+          return (
+            <EuiFlexItem key={idx}>
+              <WorkflowComponent component={component} />
+            </EuiFlexItem>
+          );
+        })}
+      </EuiFlexGroup>
     </div>
   );
 }