[Backport 2.x] Add initial server route; add core & route services

common/constants.ts

@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
 export const PLUGIN_ID = 'aiFlowDashboards';
 
 export const BASE_NODE_API_PATH = '/api/ai_flow';
+export const SEARCH_PATH = `${BASE_NODE_API_PATH}/search`;

opensearch_dashboards.json

@@ -4,6 +4,7 @@
   "opensearchDashboardsVersion": "3.0.0",
   "server": true,
   "ui": true,
+  "requiredBundles": ["opensearchDashboardsUtils"],
   "requiredPlugins": ["navigation"],
   "optionalPlugins": []
 }

public/app.tsx

@@ -4,13 +4,10 @@
  */
 
 import React from 'react';
-import { I18nProvider } from '@osd/i18n/react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { EuiPageSideBar, EuiSideNav, EuiPageTemplate } from '@elastic/eui';
-import { CoreStart } from '../../../src/core/public';
 import { Navigation, APP_PATH } from './utils';
 import { Overview, UseCases, Workflows } from './pages';
-import { CoreServicesConsumer } from './core_services';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface Props extends RouteComponentProps {}
@@ -46,36 +43,26 @@ export const AiFlowDashboardsApp = (props: Props) => {
 
   // Render the application DOM.
   return (
-    <CoreServicesConsumer>
-      {(core: CoreStart | null) =>
-        core && (
-          <I18nProvider>
-            <>
-              <EuiPageTemplate
-                template="empty"
-                pageContentProps={{ paddingSize: 'm' }}
-                pageSideBar={sidebar}
-              >
-                <Switch>
-                  <Route
-                    path={APP_PATH.USE_CASES}
-                    render={(routeProps: RouteComponentProps) => <UseCases />}
-                  />
-                  <Route
-                    path={APP_PATH.WORKFLOWS}
-                    render={(routeProps: RouteComponentProps) => <Workflows />}
-                  />
-                  {/* Defaulting to Overview page */}
-                  <Route
-                    path={`${APP_PATH.HOME}`}
-                    render={(routeProps: RouteComponentProps) => <Overview />}
-                  />
-                </Switch>
-              </EuiPageTemplate>
-            </>
-          </I18nProvider>
-        )
-      }
-    </CoreServicesConsumer>
+    <EuiPageTemplate
+      template="empty"
+      pageContentProps={{ paddingSize: 'm' }}
+      pageSideBar={sidebar}
+    >
+      <Switch>
+        <Route
+          path={APP_PATH.USE_CASES}
+          render={(routeProps: RouteComponentProps) => <UseCases />}
+        />
+        <Route
+          path={APP_PATH.WORKFLOWS}
+          render={(routeProps: RouteComponentProps) => <Workflows />}
+        />
+        {/* Defaulting to Overview page */}
+        <Route
+          path={`${APP_PATH.HOME}`}
+          render={(routeProps: RouteComponentProps) => <Overview />}
+        />
+      </Switch>
+    </EuiPageTemplate>
   );
 };

public/index.ts

@@ -16,5 +16,3 @@ export {
   AiFlowDashboardsPluginSetup,
   AiFlowDashboardsPluginStart,
 } from './types';
-
-export * from './core_services';

public/pages/overview/overview.tsx

@@ -5,14 +5,12 @@
 
 import React, { useEffect } from 'react';
 import { EuiPageHeader, EuiText } from '@elastic/eui';
-import { CoreServicesContext } from '../../core_services';
-import { CoreStart } from '../../../../../src/core/public';
 import { BREADCRUMBS } from '../../utils';
+import { getCore } from '../../services';
 
 export function Overview() {
-  const core = React.useContext(CoreServicesContext) as CoreStart;
   useEffect(() => {
-    core.chrome.setBreadcrumbs([BREADCRUMBS.AI_APPLICATION_BUILDER]);
+    getCore().chrome.setBreadcrumbs([BREADCRUMBS.AI_APPLICATION_BUILDER]);
   });
 
   return (

public/pages/use_cases/use_cases.tsx

@@ -5,14 +5,12 @@
 
 import React, { useEffect } from 'react';
 import { EuiPageHeader, EuiText } from '@elastic/eui';
-import { CoreServicesContext } from '../../core_services';
-import { CoreStart } from '../../../../../src/core/public';
 import { BREADCRUMBS } from '../../utils';
+import { getCore } from '../../services';
 
 export function UseCases() {
-  const core = React.useContext(CoreServicesContext) as CoreStart;
   useEffect(() => {
-    core.chrome.setBreadcrumbs([
+    getCore().chrome.setBreadcrumbs([
       BREADCRUMBS.AI_APPLICATION_BUILDER,
       BREADCRUMBS.USE_CASES,
     ]);

public/pages/workflows/workflows.tsx

@@ -5,14 +5,12 @@
 
 import React, { useEffect } from 'react';
 import { EuiPageHeader, EuiText } from '@elastic/eui';
-import { CoreServicesContext } from '../../core_services';
-import { CoreStart } from '../../../../../src/core/public';
 import { BREADCRUMBS } from '../../utils';
+import { getCore } from '../../services';
 
 export function Workflows() {
-  const core = React.useContext(CoreServicesContext) as CoreStart;
   useEffect(() => {
-    core.chrome.setBreadcrumbs([
+    getCore().chrome.setBreadcrumbs([
       BREADCRUMBS.AI_APPLICATION_BUILDER,
       BREADCRUMBS.WORKFLOWS,
     ]);

public/plugin.ts

@@ -14,6 +14,8 @@ import {
   AiFlowDashboardsPluginStart,
 } from './types';
 import { PLUGIN_ID } from '../common';
+import { setCore, setRouteService } from './services';
+import { configureRoutes } from './route_service';
 
 export class AiFlowDashboardsPlugin
   implements Plugin<AiFlowDashboardsPluginSetup, AiFlowDashboardsPluginStart> {
@@ -33,6 +35,9 @@ export class AiFlowDashboardsPlugin
       async mount(params: AppMountParameters) {
         const { renderApp } = await import('./render_app');
         const [coreStart] = await core.getStartServices();
+        const routeServices = configureRoutes(coreStart);
+        setCore(coreStart);
+        setRouteService(routeServices);
         return renderApp(coreStart, params);
       },
     });

public/render_app.tsx

@@ -8,21 +8,14 @@ import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import { AppMountParameters, CoreStart } from '../../../src/core/public';
 import { AiFlowDashboardsApp } from './app';
-import { CoreServicesContext } from './core_services';
 
 export const renderApp = (
   coreStart: CoreStart,
   { appBasePath, element }: AppMountParameters
 ) => {
   ReactDOM.render(
     <Router basename={appBasePath + '#/'}>
-      <Route
-        render={(props) => (
-          <CoreServicesContext.Provider value={coreStart}>
-            <AiFlowDashboardsApp {...props} />
-          </CoreServicesContext.Provider>
-        )}
-      />
+      <Route render={(props) => <AiFlowDashboardsApp {...props} />} />
     </Router>,
     element
   );

public/route_service.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CoreStart, HttpFetchError } from '../../../src/core/public';
+import { SEARCH_PATH } from '../common';
+
+export interface RouteService {
+  searchIndex: (indexName: string, body: {}) => Promise<any | HttpFetchError>;
+}
+
+export function configureRoutes(core: CoreStart): RouteService {
+  return {
+    searchIndex: async (indexName: string, body: {}) => {
+      try {
+        const response = await core.http.post<{ respString: string }>(
+          `${SEARCH_PATH}/${indexName}`,
+          {
+            body: JSON.stringify(body),
+          }
+        );
+        return response;
+      } catch (e: any) {
+        return e as HttpFetchError;
+      }
+    },
+  };
+}

public/services.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createGetterSetter } from '../../../src/plugins/opensearch_dashboards_utils/public';
+import { CoreStart } from '../../../src/core/public';
+import { RouteService } from './route_service';
+
+export const [getCore, setCore] = createGetterSetter<CoreStart>('Core');
+
+export const [getRouteService, setRouteService] = createGetterSetter<
+  RouteService
+>('');

server/plugin.ts

@@ -15,7 +15,7 @@ import {
   AiFlowDashboardsPluginSetup,
   AiFlowDashboardsPluginStart,
 } from './types';
-import { defineRoutes } from './routes';
+import { registerOpenSearchRoutes } from './routes';
 
 export class AiFlowDashboardsPlugin
   implements Plugin<AiFlowDashboardsPluginSetup, AiFlowDashboardsPluginStart> {
@@ -30,7 +30,7 @@ export class AiFlowDashboardsPlugin
     const router = core.http.createRouter();
 
     // Register server side APIs
-    defineRoutes(router);
+    registerOpenSearchRoutes(router);
 
     return {};
   }

server/routes/index.ts

@@ -3,21 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { IRouter } from '../../../../src/core/server';
-import { BASE_NODE_API_PATH } from '../../common';
-
-export function defineRoutes(router: IRouter) {
-  router.get(
-    {
-      path: BASE_NODE_API_PATH,
-      validate: false,
-    },
-    async (context, request, response) => {
-      return response.ok({
-        body: {
-          time: new Date().toISOString(),
-        },
-      });
-    }
-  );
-}
+export * from './opensearch_routes';

server/routes/opensearch_routes.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { schema } from '@osd/config-schema';
+import { SearchRequest } from '@opensearch-project/opensearch/api/types';
+import {
+  IRouter,
+  IOpenSearchDashboardsResponse,
+} from '../../../../src/core/server';
+import { SEARCH_PATH } from '../../common';
+
+export function registerOpenSearchRoutes(router: IRouter): void {
+  router.post(
+    {
+      path: `${SEARCH_PATH}/{index_name}`,
+      validate: {
+        params: schema.object({
+          index_name: schema.string(),
+        }),
+        body: schema.any(),
+      },
+    },
+    async (context, req, res): Promise<IOpenSearchDashboardsResponse<any>> => {
+      const client = context.core.opensearch.client.asCurrentUser;
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      const { index_name } = req.params;
+      const body = req.body;
+
+      const params = {
+        index: index_name,
+        body,
+      } as SearchRequest;
+
+      try {
+        const response = await client.search(params);
+        return res.ok({ body: response });
+      } catch (err: any) {
+        return res.customError({
+          statusCode: err.statusCode || 500,
+          body: {
+            message: err.message,
+            attributes: {
+              error: err.body?.error || err.message,
+            },
+          },
+        });
+      }
+    }
+  );
+}