UX fit-n-finish updates VII (opensearch-project#573)

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

Author: ohltyler

README.md

@@ -2,7 +2,7 @@
 
 The OpenSearch Flow plugin on OpenSearch Dashboards (OSD) gives users the ability to iteratively build out search and ingest pipelines, initially focusing on ease-of-use for AI/ML-enhanced use cases via [ML inference processors](https://opensearch.org/docs/latest/ingest-pipelines/processors/ml-inference/). Behind the scenes, the plugin uses the [Flow Framework OpenSearch plugin](https://opensearch.org/docs/latest/automating-configurations/index/) for resource management for each use case / workflow a user creates. For example, most use cases involve configuring and creating indices, ingest pipelines, and search pipelines. All of these resources are created, updated, deleted, and maintained by the Flow Framework plugin. When users are satisfied with a use case they have built out, they can export the produced [Workflow Template](https://opensearch.org/docs/latest/automating-configurations/workflow-templates/) to re-create resources for their use cases across different clusters / data sources.
 
-For tutorials on how to leverage this plugin to build out different AI/ML use cases, see [here](./documentation/.tutorial-11-18-2024.md).
+For tutorials on how to leverage this plugin to build out different AI/ML use cases, see [here](./documentation/.tutorial.md).
 
 For how to set up this plugin in a development environment, see [DEVELOPER_GUIDE](./DEVELOPER_GUIDE.md).
 

common/constants.ts

@@ -292,6 +292,12 @@ export const FETCH_ALL_QUERY = {
   },
   size: DEFAULT_FETCH_SIZE,
 };
+export const FETCH_ALL_QUERY_LARGE = {
+  query: {
+    match_all: {},
+  },
+  size: 1000,
+};
 export const TERM_QUERY_TEXT = {
   query: {
     term: {
@@ -600,6 +606,7 @@ export const MAX_TEMPLATE_STRING_LENGTH = 10000;
 export const MAX_BYTES = 1048576; // OSD REST request payload size limit
 export const MAX_WORKFLOW_NAME_TO_DISPLAY = 40;
 export const WORKFLOW_NAME_REGEXP = RegExp('^[a-zA-Z0-9_-]*$');
+export const INDEX_NAME_REGEXP = WORKFLOW_NAME_REGEXP;
 export const EMPTY_MAP_ENTRY = { key: '', value: '' } as MapEntry;
 export const EMPTY_INPUT_MAP_ENTRY = {
   key: '',
@@ -643,7 +650,7 @@ export const INSPECTOR_TABS = [
   },
   {
     id: INSPECTOR_TAB_ID.QUERY,
-    name: 'Search response',
+    name: 'Search tool',
     disabled: false,
   },
   {

public/pages/workflow_detail/components/edit_workflow_metadata_modal.tsx

@@ -19,7 +19,7 @@ import {
   EuiSmallButton,
 } from '@elastic/eui';
 import {
-  FETCH_ALL_QUERY,
+  FETCH_ALL_QUERY_LARGE,
   MAX_STRING_LENGTH,
   Workflow,
   WORKFLOW_NAME_REGEXP,
@@ -107,7 +107,7 @@ export function EditWorkflowMetadataModal(
   useEffect(() => {
     dispatch(
       searchWorkflows({
-        apiBody: FETCH_ALL_QUERY,
+        apiBody: FETCH_ALL_QUERY_LARGE,
         dataSourceId,
       })
     );

public/pages/workflow_detail/workflow_detail.test.tsx

@@ -96,7 +96,7 @@ describe('WorkflowDetail Page with create ingestion option', () => {
       expect(getByText('Visual')).toBeInTheDocument();
       expect(getByText('JSON')).toBeInTheDocument();
       expect(getByRole('tab', { name: 'Ingest response' })).toBeInTheDocument();
-      expect(getByRole('tab', { name: 'Search response' })).toBeInTheDocument();
+      expect(getByRole('tab', { name: 'Search tool' })).toBeInTheDocument();
       expect(getByRole('tab', { name: 'Errors' })).toBeInTheDocument();
       expect(getByRole('tab', { name: 'Resources' })).toBeInTheDocument();
 

public/pages/workflow_detail/workflow_detail.tsx

@@ -39,7 +39,7 @@ import { ResizableWorkspace } from './resizable_workspace';
 import {
   CONFIG_STEP,
   ERROR_GETTING_WORKFLOW_MSG,
-  FETCH_ALL_QUERY,
+  FETCH_ALL_QUERY_LARGE,
   MAX_WORKFLOW_NAME_TO_DISPLAY,
   NO_TEMPLATES_FOUND_MSG,
   OMIT_SYSTEM_INDEX_PATTERN,
@@ -83,8 +83,10 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
   // - fetch all indices
   useEffect(() => {
     dispatch(getWorkflow({ workflowId, dataSourceId }));
-    dispatch(searchModels({ apiBody: FETCH_ALL_QUERY, dataSourceId }));
-    dispatch(searchConnectors({ apiBody: FETCH_ALL_QUERY, dataSourceId }));
+    dispatch(searchModels({ apiBody: FETCH_ALL_QUERY_LARGE, dataSourceId }));
+    dispatch(
+      searchConnectors({ apiBody: FETCH_ALL_QUERY_LARGE, dataSourceId })
+    );
     dispatch(catIndices({ pattern: OMIT_SYSTEM_INDEX_PATTERN, dataSourceId }));
   }, []);
 
@@ -95,6 +97,8 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
     (state: AppState) => state.workflows
   );
 
+  const { indices } = useSelector((state: AppState) => state.opensearch);
+
   // selected workflow state
   const workflowId = escape(props.match?.params?.workflowId);
   const workflow = workflows[workflowId];
@@ -165,7 +169,7 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
   useEffect(() => {
     if (uiConfig) {
       const initFormValues = uiConfigToFormik(uiConfig, ingestDocs);
-      const initFormSchema = uiConfigToSchema(uiConfig);
+      const initFormSchema = uiConfigToSchema(uiConfig, indices);
       setFormValues(initFormValues);
       setFormSchema(initFormSchema);
     }

public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx

@@ -47,7 +47,11 @@ export function IngestData(props: IngestDataProps) {
         />
       )}
       <EuiFlexItem>
-        <TextField label="Index name" fieldPath={'ingest.index.name'} />
+        <TextField
+          label="Index name"
+          fieldPath={'ingest.index.name'}
+          showError={true}
+        />
       </EuiFlexItem>
       <EuiFlexItem>
         <AdvancedSettings setHasInvalidDimensions={setHasInvalidDimensions} />

public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data_modal.tsx

@@ -25,7 +25,7 @@ import {
 import { JsonField } from '../input_fields';
 import {
   customStringify,
-  FETCH_ALL_QUERY,
+  FETCH_ALL_QUERY_LARGE,
   IConfigField,
   IndexMappings,
   IngestDocsFormValues,
@@ -167,7 +167,7 @@ export function SourceDataModal(props: SourceDataProps) {
               searchIndex({
                 apiBody: {
                   index: selectedIndex,
-                  body: FETCH_ALL_QUERY,
+                  body: FETCH_ALL_QUERY_LARGE,
                   searchPipeline: '_none',
                 },
                 dataSourceId,

public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx

@@ -540,6 +540,33 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
               props.setIngestResponse(customStringify(resp));
               props.setIsRunningIngest(false);
               setLastIngested(Date.now());
+              getCore().notifications.toasts.add({
+                iconType: 'check',
+                color: 'success',
+                title: 'Ingest flow has been updated',
+                // @ts-ignore
+                text: (
+                  <EuiFlexGroup direction="column">
+                    <EuiFlexItem grow={false}>
+                      <EuiText size="s">
+                        Validate your ingest flow with the search tool
+                      </EuiText>
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      <EuiFlexGroup direction="row" justifyContent="flexEnd">
+                        <EuiFlexItem grow={false}>
+                          <EuiSmallButton
+                            fill={false}
+                            onClick={() => props.displaySearchPanel()}
+                          >
+                            Open Search tool
+                          </EuiSmallButton>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                ),
+              });
             })
             .catch((error: any) => {
               props.setIngestResponse('');

public/pages/workflows/import_workflow/import_workflow_modal.tsx

@@ -30,7 +30,7 @@ import {
   searchWorkflows,
   useAppDispatch,
 } from '../../../store';
-import { FETCH_ALL_QUERY, Workflow } from '../../../../common';
+import { FETCH_ALL_QUERY_LARGE, Workflow } from '../../../../common';
 import { WORKFLOWS_TAB } from '../workflows';
 import { getDataSourceId } from '../../../utils/utils';
 
@@ -156,7 +156,7 @@ export function ImportWorkflowModal(props: ImportWorkflowModalProps) {
                 const { workflow } = result;
                 dispatch(
                   searchWorkflows({
-                    apiBody: FETCH_ALL_QUERY,
+                    apiBody: FETCH_ALL_QUERY_LARGE,
                     dataSourceId,
                   })
                 );

public/pages/workflows/new_workflow/new_workflow.tsx

@@ -15,7 +15,7 @@ import {
 import { useSelector } from 'react-redux';
 import { UseCase } from './use_case';
 import {
-  FETCH_ALL_QUERY,
+  FETCH_ALL_QUERY_LARGE,
   Workflow,
   WorkflowTemplate,
 } from '../../../../common';
@@ -132,8 +132,10 @@ export function NewWorkflow(props: NewWorkflowProps) {
   useEffect(() => {
     dispatch(getWorkflowPresets());
     if (isDataSourceReady(dataSourceId)) {
-      dispatch(searchModels({ apiBody: FETCH_ALL_QUERY, dataSourceId }));
-      dispatch(searchConnectors({ apiBody: FETCH_ALL_QUERY, dataSourceId }));
+      dispatch(searchModels({ apiBody: FETCH_ALL_QUERY_LARGE, dataSourceId }));
+      dispatch(
+        searchConnectors({ apiBody: FETCH_ALL_QUERY_LARGE, dataSourceId })
+      );
     }
   }, [dataSourceId, dataSourceEnabled]);
 

public/pages/workflows/workflows.tsx

@@ -25,7 +25,7 @@ import { WorkflowList } from './workflow_list';
 import { NewWorkflow } from './new_workflow';
 import { AppState, searchWorkflows, useAppDispatch } from '../../store';
 import { EmptyListMessage } from './empty_list_message';
-import { FETCH_ALL_QUERY, PLUGIN_NAME } from '../../../common';
+import { FETCH_ALL_QUERY_LARGE, PLUGIN_NAME } from '../../../common';
 import { ImportWorkflowModal } from './import_workflow';
 import { MountPoint } from '../../../../../src/core/public';
 import { DataSourceSelectableConfig } from '../../../../../src/plugins/data_source_management/public';
@@ -122,7 +122,7 @@ export function Workflows(props: WorkflowsProps) {
       if (isDataSourceReady(dataSourceId)) {
         dispatch(
           searchWorkflows({
-            apiBody: FETCH_ALL_QUERY,
+            apiBody: FETCH_ALL_QUERY_LARGE,
             dataSourceId,
           })
         );
@@ -147,7 +147,7 @@ export function Workflows(props: WorkflowsProps) {
     if (isDataSourceReady(dataSourceId)) {
       dispatch(
         searchWorkflows({
-          apiBody: FETCH_ALL_QUERY,
+          apiBody: FETCH_ALL_QUERY_LARGE,
           dataSourceId,
         })
       );
@@ -170,7 +170,7 @@ export function Workflows(props: WorkflowsProps) {
     if (isDataSourceReady(dataSourceId)) {
       dispatch(
         searchWorkflows({
-          apiBody: FETCH_ALL_QUERY,
+          apiBody: FETCH_ALL_QUERY_LARGE,
           dataSourceId,
         })
       );

public/utils/config_to_schema_utils.ts

@@ -22,21 +22,27 @@ import {
   MAX_TEMPLATE_STRING_LENGTH,
   TRANSFORM_TYPE,
   MAX_BYTES,
+  INDEX_NAME_REGEXP,
+  Index,
 } from '../../common';
 
 /*
  **************** Schema / validation utils **********************
  */
 
-export function uiConfigToSchema(config: WorkflowConfig): WorkflowSchema {
+export function uiConfigToSchema(
+  config: WorkflowConfig,
+  indices: { [key: string]: Index }
+) {
   const schemaObj = {} as WorkflowSchemaObj;
-  schemaObj['ingest'] = ingestConfigToSchema(config.ingest);
+  schemaObj['ingest'] = ingestConfigToSchema(config.ingest, indices);
   schemaObj['search'] = searchConfigToSchema(config.search);
   return yup.object(schemaObj) as WorkflowSchema;
 }
 
 function ingestConfigToSchema(
-  ingestConfig: IngestConfig | undefined
+  ingestConfig: IngestConfig | undefined,
+  indices: { [key: string]: Index }
 ): ObjectSchema<any> {
   const ingestSchemaObj = {} as { [key: string]: Schema };
   if (ingestConfig?.enabled) {
@@ -45,14 +51,38 @@ function ingestConfigToSchema(
     } as IConfigField);
     ingestSchemaObj['pipelineName'] = getFieldSchema(ingestConfig.pipelineName);
     ingestSchemaObj['enrich'] = processorsConfigToSchema(ingestConfig.enrich);
-    ingestSchemaObj['index'] = indexConfigToSchema(ingestConfig.index);
+    ingestSchemaObj['index'] = indexConfigToSchema(ingestConfig.index, indices);
   }
   return yup.object(ingestSchemaObj);
 }
 
-function indexConfigToSchema(indexConfig: IndexConfig): Schema {
+function indexConfigToSchema(
+  indexConfig: IndexConfig,
+  indices: { [key: string]: Index }
+): Schema {
   const indexSchemaObj = {} as { [key: string]: Schema };
-  indexSchemaObj['name'] = getFieldSchema(indexConfig.name);
+  // Do a deeper check on the index name. Ensure the name is of valid format,
+  // and that it doesn't name clash with an existing index.
+  indexSchemaObj['name'] = yup
+    .string()
+    .test('name', 'Invalid index name', (name) => {
+      return !(
+        name === undefined ||
+        name === '' ||
+        name.length > 100 ||
+        INDEX_NAME_REGEXP.test(name) === false
+      );
+    })
+    .test(
+      'name',
+      'This index name is already in use. Use a different name',
+      (name) => {
+        return !Object.values(indices)
+          .map((index) => index.name)
+          .includes(name || '');
+      }
+    )
+    .required('Required') as yup.Schema;
   indexSchemaObj['mappings'] = getFieldSchema(indexConfig.mappings);
   indexSchemaObj['settings'] = getFieldSchema(indexConfig.settings);
   return yup.object(indexSchemaObj);