[Multiple DataSource] Integrate multiple datasource with dev tool con…

…sole (opensearch-project#3754)

* [Multiple DataSource] Integrate multiple datasource with dev tool console
* update to support autocomplete when datasource is selected

Signed-off-by: Su <[email protected]>
Signed-off-by: David Sinclair <[email protected]>

CHANGELOG.md

@@ -72,6 +72,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple DataSource] Refactor dev tool console to use opensearch-js client to send requests ([#3544](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3544))
 - [Data] Add geo shape filter field ([#3605](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3605))
 - [Multiple DataSource] Allow create and distinguish index pattern with same name but from different datasources ([#3571](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3571))
+- [Multiple DataSource] Integrate multiple datasource with dev tool console ([#3754](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3754))
 
 ### 🐛 Bug Fixes
 

src/core/public/application/types.ts

@@ -503,6 +503,10 @@ export interface AppMountParameters<HistoryLocationState = unknown> {
    * ```
    */
   setHeaderActionMenu: (menuMount: MountPoint | undefined) => void;
+  /**
+   * Optional datasource id to pass while mounting app
+   */
+  dataSourceId?: string;
 }
 
 /**

src/plugins/console/opensearch_dashboards.json

@@ -4,6 +4,11 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["devTools"],
-  "optionalPlugins": ["usageCollection", "home"],
-  "requiredBundles": ["opensearchUiShared", "opensearchDashboardsReact", "opensearchDashboardsUtils", "home"]
+  "optionalPlugins": ["usageCollection", "home", "dataSource"],
+  "requiredBundles": [
+    "opensearchUiShared",
+    "opensearchDashboardsReact",
+    "opensearchDashboardsUtils",
+    "home"
+  ]
 }

src/plugins/console/public/application/containers/editor/editor.tsx

@@ -28,36 +28,50 @@
  * under the License.
  */
 
-import React, { useCallback, memo } from 'react';
+import React, { useCallback, memo, useEffect } from 'react';
 import { debounce } from 'lodash';
 import { EuiProgress } from '@elastic/eui';
 
 import { EditorContentSpinner } from '../../components';
 import { Panel, PanelsContainer } from '../../../../../opensearch_dashboards_react/public';
 import { Editor as EditorUI, EditorOutput } from './legacy/console_editor';
 import { StorageKeys } from '../../../services';
-import { useEditorReadContext, useServicesContext, useRequestReadContext } from '../../contexts';
+import {
+  useEditorReadContext,
+  useServicesContext,
+  useRequestReadContext,
+  useRequestActionContext,
+} from '../../contexts';
 
 const INITIAL_PANEL_WIDTH = 50;
 const PANEL_MIN_WIDTH = '100px';
 
 interface Props {
   loading: boolean;
+  dataSourceId?: string;
 }
 
-export const Editor = memo(({ loading }: Props) => {
+export const Editor = memo(({ loading, dataSourceId }: Props) => {
   const {
     services: { storage },
   } = useServicesContext();
 
   const { currentTextObject } = useEditorReadContext();
   const { requestInFlight } = useRequestReadContext();
+  const dispatch = useRequestActionContext();
 
   const [firstPanelWidth, secondPanelWidth] = storage.get(StorageKeys.WIDTH, [
     INITIAL_PANEL_WIDTH,
     INITIAL_PANEL_WIDTH,
   ]);
 
+  useEffect(() => {
+    dispatch({
+      type: 'resetLastResult',
+      payload: undefined,
+    });
+  }, [dispatch, dataSourceId]);
+
   /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const onPanelWidthChange = useCallback(
     debounce((widths: number[]) => {
@@ -83,7 +97,7 @@ export const Editor = memo(({ loading }: Props) => {
           {loading ? (
             <EditorContentSpinner />
           ) : (
-            <EditorUI initialTextValue={currentTextObject.text} />
+            <EditorUI initialTextValue={currentTextObject.text} dataSourceId={dataSourceId} />
           )}
         </Panel>
         <Panel

src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx

@@ -53,6 +53,7 @@ const { useUIAceKeyboardMode } = ace;
 
 export interface EditorProps {
   initialTextValue: string;
+  dataSourceId?: string;
 }
 
 interface QueryParams {
@@ -76,15 +77,15 @@ const DEFAULT_INPUT_VALUE = `GET _search
 
 const inputId = 'ConAppInputTextarea';
 
-function EditorUI({ initialTextValue }: EditorProps) {
+function EditorUI({ initialTextValue, dataSourceId }: EditorProps) {
   const {
     services: { history, notifications, settings: settingsService, opensearchHostService, http },
     docLinkVersion,
   } = useServicesContext();
 
   const { settings } = useEditorReadContext();
   const setInputEditor = useSetInputEditor();
-  const sendCurrentRequestToOpenSearch = useSendCurrentRequestToOpenSearch();
+  const sendCurrentRequestToOpenSearch = useSendCurrentRequestToOpenSearch(dataSourceId);
   const saveCurrentTextObject = useSaveCurrentTextObject();
 
   const editorRef = useRef<HTMLDivElement | null>(null);
@@ -184,7 +185,12 @@ function EditorUI({ initialTextValue }: EditorProps) {
     setInputEditor(editor);
     setTextArea(editorRef.current!.querySelector('textarea'));
 
-    retrieveAutoCompleteInfo(http, settingsService, settingsService.getAutocomplete());
+    retrieveAutoCompleteInfo(
+      http,
+      settingsService,
+      settingsService.getAutocomplete(),
+      dataSourceId
+    );
 
     const unsubscribeResizer = subscribeResizeChecker(editorRef.current!, editor);
     setupAutosave();
@@ -197,7 +203,15 @@ function EditorUI({ initialTextValue }: EditorProps) {
         editorInstanceRef.current.getCoreEditor().destroy();
       }
     };
-  }, [saveCurrentTextObject, initialTextValue, history, setInputEditor, settingsService, http]);
+  }, [
+    saveCurrentTextObject,
+    initialTextValue,
+    history,
+    setInputEditor,
+    settingsService,
+    http,
+    dataSourceId,
+  ]);
 
   useEffect(() => {
     const { current: editor } = editorInstanceRef;

src/plugins/console/public/application/containers/main/main.tsx

@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { i18n } from '@osd/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiPageContent } from '@elastic/eui';
 import { ConsoleHistory } from '../console_history';
@@ -48,7 +48,11 @@ import { useDataInit } from '../../hooks';
 
 import { getTopNavConfig } from './get_top_nav';
 
-export function Main() {
+interface MainProps {
+  dataSourceId?: string;
+}
+
+export function Main({ dataSourceId }: MainProps) {
   const {
     services: { storage },
   } = useServicesContext();
@@ -130,7 +134,7 @@ export function Main() {
         </EuiFlexItem>
         {showingHistory ? <EuiFlexItem grow={false}>{renderConsoleHistory()}</EuiFlexItem> : null}
         <EuiFlexItem>
-          <Editor loading={!done} />
+          <Editor loading={!done} dataSourceId={dataSourceId} />
         </EuiFlexItem>
       </EuiFlexGroup>
 
@@ -143,7 +147,9 @@ export function Main() {
         />
       ) : null}
 
-      {showSettings ? <Settings onClose={() => setShowSettings(false)} /> : null}
+      {showSettings ? (
+        <Settings onClose={() => setShowSettings(false)} dataSourceId={dataSourceId} />
+      ) : null}
 
       {showHelp ? <HelpPanel onClose={() => setShowHelp(false)} /> : null}
     </div>

src/plugins/console/public/application/containers/settings.tsx

@@ -48,9 +48,10 @@ const getAutocompleteDiff = (newSettings: DevToolsSettings, prevSettings: DevToo
 const refreshAutocompleteSettings = (
   http: HttpSetup,
   settings: SettingsService,
-  selectedSettings: any
+  selectedSettings: any,
+  dataSourceId?: string
 ) => {
-  retrieveAutoCompleteInfo(http, settings, selectedSettings);
+  retrieveAutoCompleteInfo(http, settings, selectedSettings, dataSourceId);
 };
 
 const fetchAutocompleteSettingsIfNeeded = (
@@ -79,19 +80,20 @@ const fetchAutocompleteSettingsIfNeeded = (
         },
         {}
       );
-      retrieveAutoCompleteInfo(http, settings, changedSettings);
+      retrieveAutoCompleteInfo(http, settings, changedSettings, dataSourceId);
     } else if (isPollingChanged && newSettings.polling) {
       // If the user has turned polling on, then we'll fetch all selected autocomplete settings.
-      retrieveAutoCompleteInfo(http, settings, settings.getAutocomplete());
+      retrieveAutoCompleteInfo(http, settings, settings.getAutocomplete(), dataSourceId);
     }
   }
 };
 
 export interface Props {
   onClose: () => void;
+  dataSourceId?: string;
 }
 
-export function Settings({ onClose }: Props) {
+export function Settings({ onClose, dataSourceId }: Props) {
   const {
     services: { settings, http },
   } = useServicesContext();
@@ -118,7 +120,7 @@ export function Settings({ onClose }: Props) {
       onClose={onClose}
       onSaveSettings={onSaveSettings}
       refreshAutocompleteSettings={(selectedSettings: any) =>
-        refreshAutocompleteSettings(http, settings, selectedSettings)
+        refreshAutocompleteSettings(http, settings, selectedSettings, dataSourceId)
       }
       settings={settings.toJSON()}
     />

src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/send_request_to_opensearch.ts

@@ -39,6 +39,7 @@ import { BaseResponseType } from '../../../types';
 export interface OpenSearchRequestArgs {
   http: HttpSetup;
   requests: any;
+  dataSourceId?: string;
 }
 
 export interface OpenSearchRequestObject {
@@ -101,7 +102,8 @@ export function sendRequestToOpenSearch(
           args.http,
           opensearchMethod,
           opensearchPath,
-          opensearchData
+          opensearchData,
+          args.dataSourceId
         );
         if (reqId !== CURRENT_REQ_ID) {
           return;

src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/use_send_current_request_to_opensearch.ts

@@ -38,7 +38,7 @@ import { track } from './track';
 // @ts-ignore
 import { retrieveAutoCompleteInfo } from '../../../lib/mappings/mappings';
 
-export const useSendCurrentRequestToOpenSearch = () => {
+export const useSendCurrentRequestToOpenSearch = (dataSourceId?: string) => {
   const {
     services: { history, settings, notifications, trackUiMetric, http },
   } = useServicesContext();
@@ -64,7 +64,7 @@ export const useSendCurrentRequestToOpenSearch = () => {
       // Fire and forget
       setTimeout(() => track(requests, editor, trackUiMetric), 0);
 
-      const results = await sendRequestToOpenSearch({ http, requests });
+      const results = await sendRequestToOpenSearch({ http, requests, dataSourceId });
 
       results.forEach(({ request: { path, method, data } }) => {
         try {
@@ -85,7 +85,7 @@ export const useSendCurrentRequestToOpenSearch = () => {
         // or templates may have changed, so we'll need to update this data. Assume that if
         // the user disables polling they're trying to optimize performance or otherwise
         // preserve resources, so they won't want this request sent either.
-        retrieveAutoCompleteInfo(http, settings, settings.getAutocomplete());
+        retrieveAutoCompleteInfo(http, settings, settings.getAutocomplete(), dataSourceId);
       }
 
       dispatch({
@@ -112,5 +112,5 @@ export const useSendCurrentRequestToOpenSearch = () => {
         });
       }
     }
-  }, [dispatch, settings, history, notifications, trackUiMetric, http]);
+  }, [dispatch, http, dataSourceId, settings, notifications.toasts, trackUiMetric, history]);
 };

src/plugins/console/public/application/index.tsx

@@ -46,6 +46,7 @@ export interface BootDependencies {
   notifications: NotificationsSetup;
   usageCollection?: UsageCollectionSetup;
   element: HTMLElement;
+  dataSourceId?: string;
 }
 
 export function renderApp({
@@ -55,6 +56,7 @@ export function renderApp({
   usageCollection,
   element,
   http,
+  dataSourceId,
 }: BootDependencies) {
   const trackUiMetric = createUsageTracker(usageCollection);
   trackUiMetric.load('opened_app');
@@ -88,7 +90,7 @@ export function renderApp({
       >
         <RequestContextProvider>
           <EditorContextProvider settings={settings.toJSON()}>
-            <Main />
+            <Main dataSourceId={dataSourceId} />
           </EditorContextProvider>
         </RequestContextProvider>
       </ServicesContextProvider>

src/plugins/console/public/application/stores/request.ts

@@ -37,7 +37,8 @@ import { OpenSearchRequestResult } from '../hooks/use_send_current_request_to_op
 export type Actions =
   | { type: 'sendRequest'; payload: undefined }
   | { type: 'requestSuccess'; payload: { data: OpenSearchRequestResult[] } }
-  | { type: 'requestFail'; payload: OpenSearchRequestResult<string> | undefined };
+  | { type: 'requestFail'; payload: OpenSearchRequestResult<string> | undefined }
+  | { type: 'resetLastResult'; payload: undefined };
 
 export interface Store {
   requestInFlight: boolean;
@@ -79,4 +80,11 @@ export const reducer: Reducer<Store, Actions> = (state, action) =>
       draft.lastResult = { ...initialResultValue, error: action.payload };
       return;
     }
+
+    if (action.type === 'resetLastResult') {
+      draft.lastResult = initialResultValue;
+      return;
+    }
+
+    return draft;
   });