Fixing MDS Support

common/interfaces.ts

@@ -7,7 +7,6 @@ import { Node, Edge } from 'reactflow';
 import { FormikValues } from 'formik';
 import { ObjectSchema } from 'yup';
 import { COMPONENT_CLASS, PROCESSOR_TYPE, WORKFLOW_TYPE } from './constants';
-import { MDSQueryParams } from '../server/types';
 
 export type Index = {
   name: string;
@@ -17,12 +16,16 @@ export type Index = {
 /**
  ********** WORKFLOW TYPES/INTERFACES **********
  */
+export type MDSQueryParams = {
+  dataSourceId: string;
+};
 
- export interface MDSStates {
+export interface MDSStates {
   queryParams: MDSQueryParams;
-  selectedDataSourceId: string | undefined;
+  selectedDataSourceId?: string;
 }
- export type ConfigFieldType =
+
+export type ConfigFieldType =
   | 'string'
   | 'json'
   | 'jsonArray'

common/utils.ts

@@ -5,7 +5,22 @@
 
 import moment from 'moment';
 import { DATE_FORMAT_PATTERN } from './';
+import { isEmpty } from 'lodash';
 
 export function toFormattedDate(timestampMillis: number): String {
   return moment(new Date(timestampMillis)).format(DATE_FORMAT_PATTERN);
 }
+
+const PERMISSIONS_ERROR_PATTERN = /no permissions for \[(.+)\] and User \[name=(.+), backend_roles/;
+
+export const prettifyErrorMessage = (rawErrorMessage: string) => {
+  if (isEmpty(rawErrorMessage) || rawErrorMessage === 'undefined') {
+    return 'Unknown error is returned.';
+  }
+  const match = rawErrorMessage.match(PERMISSIONS_ERROR_PATTERN);
+  if (isEmpty(match)) {
+    return rawErrorMessage;
+  } else {
+    return `User ${match[2]} has no permissions to [${match[1]}].`;
+  }
+};

public/app.tsx

@@ -20,19 +20,21 @@ import {
 } from './pages';
 import { MountPoint } from '../../../src/core/public';
 import queryString from 'query-string';
-import { constructHrefWithDataSourceId } from './utils/helpers';
+import { constructHrefWithDataSourceId } from './utils/utils';
 
 // styling
 import './global-styles.scss';
 
 interface Props extends RouteComponentProps {
-  setHeaderActionMenu: (menuMount: MountPoint | undefined) => void;
+  setHeaderActionMenu: (menuMount?: MountPoint) => void;
 }
 
 export const FlowFrameworkDashboardsApp = (props: Props) => {
   const { setHeaderActionMenu } = props;
-  const queryParams = queryString.parse(location.search) as { [key: string]: string };
-  const dataSourceId = queryParams.dataSourceId === undefined ? undefined : queryParams.dataSourceId;
+  const queryParams = queryString.parse(location.search) as {
+    [key: string]: string;
+  };
+  const dataSourceId = queryParams.dataSourceId;
   const sidebar = (
     <EuiPageSideBar style={{ minWidth: 190 }} hidden={false} paddingSize="l">
       <EuiSideNav
@@ -71,21 +73,24 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
         <Switch>
           <Route
             path={APP_PATH.WORKFLOW_DETAIL}
-            render={(routeProps: RouteComponentProps<WorkflowDetailRouterProps>) => ( 
-              <WorkflowDetail 
-              setActionMenu={setHeaderActionMenu}
-              landingDataSourceId={dataSourceId}
-              {...routeProps} 
-            />
+            render={(
+              routeProps: RouteComponentProps<WorkflowDetailRouterProps>
+            ) => (
+              <WorkflowDetail
+                setActionMenu={setHeaderActionMenu}
+                landingDataSourceId={dataSourceId}
+                {...routeProps}
+              />
             )}
           />
           <Route
             path={APP_PATH.WORKFLOWS}
             render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => (
               <Workflows
-              setActionMenu={setHeaderActionMenu}
-              landingDataSourceId={dataSourceId}
-              {...routeProps} />
+                setActionMenu={setHeaderActionMenu}
+                landingDataSourceId={dataSourceId}
+                {...routeProps}
+              />
             )}
           />
           {/*
@@ -101,10 +106,13 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
                   pathname: APP_PATH.WORKFLOWS,
                 });
               }
-              return <Workflows
-              setActionMenu={setHeaderActionMenu}
-              landingDataSourceId={dataSourceId} 
-              {...routeProps} />;
+              return (
+                <Workflows
+                  setActionMenu={setHeaderActionMenu}
+                  landingDataSourceId={dataSourceId}
+                  {...routeProps}
+                />
+              );
             }}
           />
         </Switch>

public/pages/workflow_detail/workflow_detail.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, ReactElement } from 'react';
-import { RouteComponentProps, useLocation } from 'react-router-dom';
+import { RouteComponentProps } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { ReactFlowProvider } from 'reactflow';
 import { EuiPage, EuiPageBody } from '@elastic/eui';
@@ -22,15 +22,13 @@ import {
   DEFAULT_NEW_WORKFLOW_NAME,
   FETCH_ALL_QUERY_BODY,
 } from '../../../common';
+import { MountPoint } from '../../../../../src/core/public';
 
 // styling
 import './workflow-detail-styles.scss';
 import '../../global-styles.scss';
-import { MountPoint } from '../../../../../src/core/public';
 
-import {
-  getDataSourceFromURL,
-} from '../../utils/helpers';
+import { getDataSourceId } from '../../utils/utils';
 
 import {
   getDataSourceManagementPlugin,
@@ -46,9 +44,9 @@ export interface WorkflowDetailRouterProps {
 
 interface WorkflowDetailProps
   extends RouteComponentProps<WorkflowDetailRouterProps> {
-    setActionMenu: (menuMount: MountPoint | undefined) => void;
-    landingDataSourceId: string | undefined;  
-  }
+  setActionMenu: (menuMount?: MountPoint) => void;
+  landingDataSourceId?: string;
+}
 
 /**
  * The workflow details page. This is where users will configure, create, and
@@ -58,10 +56,8 @@ interface WorkflowDetailProps
 
 export function WorkflowDetail(props: WorkflowDetailProps) {
   const dispatch = useAppDispatch();
-  const location = useLocation();
-  const MDSQueryParams = getDataSourceFromURL(location);
   const dataSourceEnabled = getDataSourceEnabled().enabled;
-  const dataSourceId = MDSQueryParams.dataSourceId;
+  const dataSourceId = getDataSourceId();
   const { workflows } = useSelector((state: AppState) => state.workflows);
 
   // selected workflow state
@@ -89,14 +85,15 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
   // - fetch workflow
   // - fetch available models as their IDs may be used when building flows
   useEffect(() => {
-    dispatch(getWorkflow({workflowId, dataSourceId} ));
-    dispatch(searchModels({body:FETCH_ALL_QUERY_BODY, dataSourceId}));
+    dispatch(getWorkflow({ workflowId, dataSourceId }));
+    dispatch(searchModels({ apiBody: FETCH_ALL_QUERY_BODY, dataSourceId }));
   }, []);
 
   let renderDataSourceComponent: ReactElement | null = null;
   if (dataSourceEnabled) {
-    const DataSourceMenu =
-      getDataSourceManagementPlugin()?.ui.getDataSourceMenu<DataSourceViewConfig>();
+    const DataSourceMenu = getDataSourceManagementPlugin()?.ui.getDataSourceMenu<
+      DataSourceViewConfig
+    >();
     renderDataSourceComponent = (
       <DataSourceMenu
         setMenuMountPoint={props.setActionMenu}

public/pages/workflow_detail/workflow_inputs/processor_inputs/input_transform_modal.tsx

@@ -41,8 +41,7 @@ import {
 } from '../../../../utils';
 import { simulatePipeline, useAppDispatch } from '../../../../store';
 import { getCore } from '../../../../services';
-import { useLocation } from 'react-router-dom';
-import { getDataSourceFromURL } from '../../../../utils/helpers';
+import { getDataSourceId } from '../../../../utils/utils';
 import { MapArrayField } from '../input_fields';
 
 interface InputTransformModalProps {
@@ -65,9 +64,7 @@ interface InputTransformModalProps {
  */
 export function InputTransformModal(props: InputTransformModalProps) {
   const dispatch = useAppDispatch();
-  const location = useLocation();
-  const MDSQueryParams = getDataSourceFromURL(location);
-  const dataSourceId = MDSQueryParams.dataSourceId;
+  const dataSourceId = getDataSourceId();
   const { values } = useFormikContext<WorkflowFormValues>();
 
   // source input / transformed output state
@@ -119,10 +116,13 @@ export function InputTransformModal(props: InputTransformModalProps) {
                           values.ingest.index.name
                         );
                         await dispatch(
-                          simulatePipeline({body:{
-                            pipeline: curIngestPipeline as IngestPipelineConfig,
-                            docs: curDocs,
-                          }, dataSourceId: dataSourceId})
+                          simulatePipeline({
+                            apiBody: {
+                              pipeline: curIngestPipeline as IngestPipelineConfig,
+                              docs: curDocs,
+                            },
+                            dataSourceId,
+                          })
                         )
                           .unwrap()
                           .then((resp: SimulateIngestPipelineResponse) => {

public/pages/workflow_detail/workflow_inputs/processor_inputs/output_transform_modal.tsx

@@ -42,6 +42,7 @@ import {
 import { simulatePipeline, useAppDispatch } from '../../../../store';
 import { getCore } from '../../../../services';
 import { MapArrayField } from '../input_fields';
+import { getDataSourceId } from '../../../../utils/utils';
 
 interface OutputTransformModalProps {
   uiConfig: WorkflowConfig;
@@ -59,6 +60,7 @@ interface OutputTransformModalProps {
  */
 export function OutputTransformModal(props: OutputTransformModalProps) {
   const dispatch = useAppDispatch();
+  const dataSourceId = getDataSourceId();
   const { values } = useFormikContext<WorkflowFormValues>();
 
   // source input / transformed output state
@@ -114,10 +116,11 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
                         values.ingest.index.name
                       );
                       await dispatch(
-                        simulatePipeline({
+                        simulatePipeline({apiBody:{
                           pipeline: curIngestPipeline,
                           docs: curDocs,
-                        })
+                        },
+                      dataSourceId})
                       )
                         .unwrap()
                         .then((resp: SimulateIngestPipelineResponse) => {

public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx

@@ -24,14 +24,13 @@ import {
 } from '@elastic/eui';
 import { WorkspaceFormValues } from '../../../../../common';
 import { JsonField } from '../input_fields';
-import { useLocation } from 'react-router-dom';
-import { getDataSourceFromURL } from '../../../../utils/helpers';
 import {
   AppState,
   catIndices,
   searchIndex,
   useAppDispatch,
 } from '../../../../store';
+import { getDataSourceId } from '../../../../utils/utils';
 
 interface ConfigureSearchRequestProps {
   setQuery: (query: string) => void;
@@ -44,9 +43,7 @@ interface ConfigureSearchRequestProps {
  */
 export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
   const dispatch = useAppDispatch();
-  const location = useLocation();
-  const MDSQueryParams = getDataSourceFromURL(location);
-  const dataSourceId = MDSQueryParams.dataSourceId;
+  const dataSourceId = getDataSourceId();
 
   // Form state
   const { values } = useFormikContext<WorkspaceFormValues>();
@@ -76,7 +73,7 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
   useEffect(() => {
     if (!ingestEnabled) {
       // Fetch all indices besides system indices
-      dispatch(catIndices({pattern:'*,-.*',dataSourceId: dataSourceId}));
+      dispatch(catIndices({ pattern: '*,-.*',dataSourceId }));
     }
   }, []);
 
@@ -169,11 +166,11 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
               // for this test query, we don't want to involve any configured search pipelines, if any exist
               // see https://opensearch.org/docs/latest/search-plugins/search-pipelines/using-search-pipeline/#disabling-the-default-pipeline-for-a-request
               dispatch(
-                searchIndex({
+                searchIndex({apiBody:{
                   index: indexName,
                   body: values.search.request,
                   searchPipeline: '_none',
-                })
+                }, dataSourceId})
               )
                 .unwrap()
                 .then(async (resp) => {