Cleanly handle error states for backend connection issues

CHANGELOG.md

@@ -6,6 +6,8 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 ## [Unreleased 3.2](https://github.com/opensearch-project/anomaly-detection/compare/2.x...HEAD)
 ### Features
 ### Enhancements
+- Cleanly handle error states for backend connection issues ([#757](https://github.com/opensearch-project/dashboards-flow-framework/pull/757))
+
 ### Bug Fixes
 ### Infrastructure
 ### Documentation

common/constants.ts

@@ -291,6 +291,8 @@ export const CREATE_WORKFLOW_LINK =
   'https://opensearch.org/docs/latest/automating-configurations/api/create-workflow/';
 export const WORKFLOW_TUTORIAL_LINK =
   'https://opensearch.org/docs/latest/automating-configurations/workflow-tutorial/';
+export const MAIN_PLUGIN_DOC_LINK =
+  'https://docs.opensearch.org/latest/vector-search/ai-search/workflow-builder/';
 export const NORMALIZATION_PROCESSOR_LINK =
   'https://opensearch.org/docs/latest/search-plugins/search-pipelines/normalization-processor/';
 export const GITHUB_FEEDBACK_LINK =

public/pages/workflows/new_workflow/quick_configure_modal.tsx

@@ -186,12 +186,16 @@ export function QuickConfigureModal(props: QuickConfigureModalProps) {
     undefined
   );
   useEffect(() => {
-    setEmbeddingModelInterface(
-      models[quickConfigureFields?.embeddingModelId || '']?.interface
-    );
+    if (!isEmpty(models)) {
+      setEmbeddingModelInterface(
+        models[quickConfigureFields?.embeddingModelId || '']?.interface
+      );
+    }
   }, [models, quickConfigureFields?.embeddingModelId]);
   useEffect(() => {
-    setLLMInterface(models[quickConfigureFields?.llmId || '']?.interface);
+    if (!isEmpty(models)) {
+      setLLMInterface(models[quickConfigureFields?.llmId || '']?.interface);
+    }
   }, [models, quickConfigureFields?.llmId]);
 
   // Deployed models state
@@ -330,56 +334,57 @@ export function QuickConfigureModal(props: QuickConfigureModalProps) {
                             <EuiSpacer size="s" />
                           </>
                         )}
-                        {props.workflow?.ui_metadata?.type === WORKFLOW_TYPE.SEMANTIC_SEARCH_USING_SPARSE_ENCODERS ? (
-                      <ModelField
-                        modelCategory={MODEL_CATEGORY.SPARSE_ENCODER}
-                        fieldPath="embeddingModel"
-                        showMissingInterfaceCallout={true}
-                        hasModelInterface={
-                            !isEmpty(
-                              models[
-                                getIn(formikProps.values, 'embeddingModel.id')
-                              ]?.interface
-                            )
-                          }
-                        label="Sparse encoder"
-                        helpText="The model to generate sparse embeddings."
-                        fullWidth={true}
-                        showError={true}
-                        onModelChange={(modelId) =>
-                          setQuickConfigureFields({
-                            ...quickConfigureFields,
-                            embeddingModelId: modelId,
-                          })
-                        }
-                      />
-                    ) : (
-                      <ModelField
-                        modelCategory={MODEL_CATEGORY.EMBEDDING}
-                        fieldPath="embeddingModel"
-                        showMissingInterfaceCallout={true}
-                        hasModelInterface={
-                          !isEmpty(
-                            models[
-                              getIn(formikProps.values, 'embeddingModel.id')
-                            ]?.interface
-                          )
-                        }
-                      label="Embedding model"
-                      helpText="The model to generate embeddings."
-                      fullWidth={true}
-                      showError={true}
-                      onModelChange={(modelId) =>
-                        setQuickConfigureFields({
-                          ...quickConfigureFields,
-                          embeddingModelId: modelId,
-                        })
-                      }
-                    />
-                    )}
-                  </>
-                </EuiFlexItem>
-              )}
+                        {props.workflow?.ui_metadata?.type ===
+                        WORKFLOW_TYPE.SEMANTIC_SEARCH_USING_SPARSE_ENCODERS ? (
+                          <ModelField
+                            modelCategory={MODEL_CATEGORY.SPARSE_ENCODER}
+                            fieldPath="embeddingModel"
+                            showMissingInterfaceCallout={true}
+                            hasModelInterface={
+                              !isEmpty(
+                                models[
+                                  getIn(formikProps.values, 'embeddingModel.id')
+                                ]?.interface
+                              )
+                            }
+                            label="Sparse encoder"
+                            helpText="The model to generate sparse embeddings."
+                            fullWidth={true}
+                            showError={true}
+                            onModelChange={(modelId) =>
+                              setQuickConfigureFields({
+                                ...quickConfigureFields,
+                                embeddingModelId: modelId,
+                              })
+                            }
+                          />
+                        ) : (
+                          <ModelField
+                            modelCategory={MODEL_CATEGORY.EMBEDDING}
+                            fieldPath="embeddingModel"
+                            showMissingInterfaceCallout={true}
+                            hasModelInterface={
+                              !isEmpty(
+                                models[
+                                  getIn(formikProps.values, 'embeddingModel.id')
+                                ]?.interface
+                              )
+                            }
+                            label="Embedding model"
+                            helpText="The model to generate embeddings."
+                            fullWidth={true}
+                            showError={true}
+                            onModelChange={(modelId) =>
+                              setQuickConfigureFields({
+                                ...quickConfigureFields,
+                                embeddingModelId: modelId,
+                              })
+                            }
+                          />
+                        )}
+                      </>
+                    </EuiFlexItem>
+                  )}
               </EuiFlexGroup>
               {props.workflow?.ui_metadata?.type !== WORKFLOW_TYPE.CUSTOM && (
                 <>
@@ -864,7 +869,7 @@ function updateIndexConfig(
       };
     }
     if (fields.vectorField) {
-      properties[fields.vectorField] = 
+      properties[fields.vectorField] =
         workflow_type !== WORKFLOW_TYPE.SEMANTIC_SEARCH_USING_SPARSE_ENCODERS
           ? { type: 'knn_vector', dimension: fields.embeddingLength || '' }
           : { type: 'rank_features' };

public/pages/workflows/workflows.test.tsx

@@ -8,7 +8,6 @@ import { render, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { Provider } from 'react-redux';
-
 import {
   BrowserRouter as Router,
   RouteComponentProps,

public/pages/workflows/workflows.tsx

@@ -5,7 +5,7 @@
 
 import React, { useEffect, useState, useMemo } from 'react';
 import { RouteComponentProps, useLocation } from 'react-router-dom';
-import { escape } from 'lodash';
+import { escape, isEmpty } from 'lodash';
 import {
   EuiPageHeader,
   EuiPage,
@@ -29,10 +29,16 @@ import {
 import { getApplication, getCore, getNavigationUI } from '../../services';
 import { WorkflowList } from './workflow_list';
 import { NewWorkflow } from './new_workflow';
-import { AppState, searchWorkflows, useAppDispatch } from '../../store';
+import {
+  AppState,
+  searchModels,
+  searchWorkflows,
+  useAppDispatch,
+} from '../../store';
 import { EmptyListMessage } from './empty_list_message';
 import {
   FETCH_ALL_QUERY_LARGE,
+  MAIN_PLUGIN_DOC_LINK,
   OPENSEARCH_FLOW,
   PLUGIN_NAME,
 } from '../../../common';
@@ -99,6 +105,44 @@ export function Workflows(props: WorkflowsProps) {
   const { workflows, loading } = useSelector(
     (state: AppState) => state.workflows
   );
+
+  // run health checks on FF and ML commons, any time there is a new selected datasource (or none if MDS is disabled)
+  // block all user actions if there are failures executing the basic search APIs for either plugin.
+  const [
+    flowFrameworkConnectionErrors,
+    setFlowFrameworkConnectionErrors,
+  ] = useState<boolean>(false);
+  const [mlCommonsConnectionErrors, setMLCommonsConnectionErrors] = useState<
+    boolean
+  >(false);
+  const connectionErrors =
+    flowFrameworkConnectionErrors || mlCommonsConnectionErrors;
+  useEffect(() => {
+    async function healthCheck() {
+      await Promise.all([
+        dispatch(
+          searchWorkflows({
+            apiBody: FETCH_ALL_QUERY_LARGE,
+            dataSourceId,
+          })
+        ).then((resp: any) => {
+          setFlowFrameworkConnectionErrors(!isEmpty(resp.error));
+        }),
+        dispatch(
+          searchModels({
+            apiBody: FETCH_ALL_QUERY_LARGE,
+            dataSourceId,
+          })
+        ).then((resp: any) => {
+          setMLCommonsConnectionErrors(!isEmpty(resp.error));
+        }),
+      ]);
+    }
+    if (isDataSourceReady(dataSourceId)) {
+      healthCheck();
+    }
+  }, [dataSourceId, dataSourceEnabled]);
+
   const noWorkflows = Object.keys(workflows || {}).length === 0 && !loading;
 
   const {
@@ -277,7 +321,60 @@ export function Workflows(props: WorkflowsProps) {
             pageTitle={pageTitleAndDescription}
             bottomBorder={false}
           />
-          {dataSourceEnabled && dataSourceId === undefined ? (
+          {/**
+           * Local cluster issues: could be due to cluster being down, permissions issues,
+           * and/or missing plugins.
+           */}
+          {!dataSourceEnabled && connectionErrors ? (
+            <EuiPageContent grow={true}>
+              <EuiEmptyPrompt
+                title={<h2>Error accessing cluster</h2>}
+                body={
+                  <p>
+                    Ensure your OpenSearch cluster is available and has the Flow
+                    Framework and ML Commons plugins installed.
+                  </p>
+                }
+                actions={
+                  <EuiButton
+                    color="primary"
+                    fill={false}
+                    iconType="popout"
+                    iconSide="right"
+                    target="_blank"
+                    href={MAIN_PLUGIN_DOC_LINK}
+                  >
+                    See documentation
+                  </EuiButton>
+                }
+              />
+            </EuiPageContent>
+          ) : // Remote cluster/datasource issues: datasource is down, permissions issues,
+          // and/or missing plugins or features.
+          dataSourceEnabled &&
+            dataSourceId !== undefined &&
+            connectionErrors ? (
+            <EuiPageContent grow={true}>
+              <EuiEmptyPrompt
+                title={<h2>Incompatible data source</h2>}
+                body={
+                  <p>
+                    Ensure the data source is available and has the latest ML
+                    features.
+                  </p>
+                }
+                actions={
+                  <EuiButton
+                    color="primary"
+                    fill
+                    href={`${getAppBasePath()}/app/management/opensearch-dashboards/dataSources`}
+                  >
+                    Manage data sources
+                  </EuiButton>
+                }
+              />
+            </EuiPageContent>
+          ) : dataSourceEnabled && dataSourceId === undefined ? (
             <EuiPageContent grow={true}>
               <EuiEmptyPrompt
                 title={<h2>Incompatible data source</h2>}

server/routes/helpers.ts

@@ -57,6 +57,7 @@ function isDatasourceError(err: any) {
 export function isIgnorableError(error: any): boolean {
   return (
     error.body?.error?.type === INDEX_NOT_FOUND_EXCEPTION ||
+    error.body?.error?.caused_by?.type === INDEX_NOT_FOUND_EXCEPTION ||
     error.body?.error === NO_MODIFICATIONS_FOUND_TEXT
   );
 }

test/mocks/mock_core_services.ts

@@ -41,4 +41,18 @@ export const mockCoreServices = {
   }),
 
   getHeaderActionMenu: () => jest.fn(),
+
+  // Iteratively add mocked values as needed when rendering components that make these dispatch calls in unit testing.
+  getRouteService: () => ({
+    searchWorkflows: () => {
+      return {
+        workflows: {},
+      };
+    },
+    searchModels: () => {
+      return {
+        models: {},
+      };
+    },
+  }),
 };