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

…sole (#3754)

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

Signed-off-by: Su <szhongna@amazon.com>
(cherry picked from commit a6af77d)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

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;
  });