Multi-datasource support for Search-relevance (#383)

* added multi-datasource support Signed-off-by: sumukhswamy <[email protected]> * added changes for pipleslines Signed-off-by: sumukhswamy <[email protected]> * removed comments,updated .json file Signed-off-by: sumukhswamy <[email protected]> * addressed comments, changed name of the picker Signed-off-by: sumukhswamy <[email protected]> * added readonly nav-bar Signed-off-by: sumukhswamy <[email protected]> * added changes for selecting and filtering multiple data sources Signed-off-by: sumukhswamy <[email protected]> * added changes for filtering Signed-off-by: sumukhswamy <[email protected]> * updated snapshots Signed-off-by: sumukhswamy <[email protected]> * removed console logs Signed-off-by: sumukhswamy <[email protected]> * added change in syntax for sonflict Signed-off-by: sumukhswamy <[email protected]> * addressed comments Signed-off-by: sumukhswamy <[email protected]> * added changes for new mocks, added tests, addressed comments Signed-off-by: sumukhswamy <[email protected]> * added fix for search_pipeline and error handling Signed-off-by: sumukhswamy <[email protected]> * error handling for fetched indexes Signed-off-by: sumukhswamy <[email protected]> --------- Signed-off-by: sumukhswamy <[email protected]> Signed-off-by: Sumukh Swamy <[email protected]>
opensearch-project · Apr 24, 2024 · f7556c6 · f7556c6
1 parent a51015a
commit f7556c6
Show file tree

Hide file tree

Showing 21 changed files with 3,034 additions and 166 deletions.
diff --git a/common/index.ts b/common/index.ts
@@ -14,3 +14,7 @@ export enum ServiceEndpoints {
 }
 
 export const SEARCH_API = '/_search';
+
+//Query1 for the left search and Query2 for the right search page
+export const QUERY_NUMBER_ONE = '1';
+export const QUERY_NUMBER_TWO = '2';
diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
@@ -6,5 +6,6 @@
   "ui": true,
   "requiredPlugins": [
     "navigation"
-  ]
+  ],
+  "optionalPlugins": ["dataSource","dataSourceManagement"]
 }
diff --git a/public/application.tsx b/public/application.tsx
@@ -6,20 +6,26 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppMountParameters, CoreStart } from '../../../src/core/public';
-import { AppPluginStartDependencies } from './types';
+import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
 import { SearchRelevanceApp } from './components/app';
+import { AppPluginStartDependencies } from './types';
 
 export const renderApp = (
-  { notifications, http, chrome }: CoreStart,
-  { navigation }: AppPluginStartDependencies,
-  { element }: AppMountParameters
+  { notifications, http, chrome, savedObjects }: CoreStart,
+  { navigation, dataSource }: AppPluginStartDependencies,
+  { element, setHeaderActionMenu }: AppMountParameters,
+  dataSourceManagement: DataSourceManagementPluginSetup
 ) => {
   ReactDOM.render(
     <SearchRelevanceApp
       notifications={notifications}
       http={http}
       navigation={navigation}
       chrome={chrome}
+      savedObjects={savedObjects}
+      dataSourceEnabled={!!dataSource}
+      setActionMenu={setHeaderActionMenu}
+      dataSourceManagement={dataSourceManagement}
     />,
     element
   );

diff --git a/public/components/app.tsx b/public/components/app.tsx
@@ -3,29 +3,37 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import { EuiGlobalToastList } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
+import React, { useState } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
-import { useState } from 'react';
-import { EuiGlobalToastList } from '@elastic/eui';
-import { CoreStart, Toast } from '../../../../src/core/public';
+import { CoreStart, MountPoint, Toast } from '../../../../src/core/public';
+import { DataSourceManagementPluginSetup } from '../../../../src/plugins/data_source_management/public';
 import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
-import { Home as QueryCompareHome } from './query_compare/home';
 import { PLUGIN_NAME } from '../../common';
 import { SearchRelevanceContextProvider } from '../contexts';
+import { Home as QueryCompareHome } from './query_compare/home';
 
 interface SearchRelevanceAppDeps {
   notifications: CoreStart['notifications'];
   http: CoreStart['http'];
   navigation: NavigationPublicPluginStart;
   chrome: CoreStart['chrome'];
+  savedObjects: CoreStart['savedObjects'];
+  dataSourceEnabled: boolean;
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  setActionMenu: (menuMount: MountPoint | undefined) => void;
 }
 
 export const SearchRelevanceApp = ({
   notifications,
   http,
   navigation,
   chrome,
+  savedObjects,
+  dataSourceEnabled,
+  setActionMenu,
+  dataSourceManagement,
 }: SearchRelevanceAppDeps) => {
   const [toasts, setToasts] = useState<Toast[]>([]);
   const [toastRightSide, setToastRightSide] = useState<boolean>(true);
@@ -64,6 +72,10 @@ export const SearchRelevanceApp = ({
                       setBreadcrumbs={chrome.setBreadcrumbs}
                       setToast={setToast}
                       chrome={chrome}
+                      savedObjects={savedObjects}
+                      dataSourceEnabled={dataSourceEnabled}
+                      dataSourceManagement={dataSourceManagement}
+                      setActionMenu={setActionMenu}
                     />
                   );
                 }}

diff --git a/public/components/query_compare/home.tsx b/public/components/query_compare/home.tsx
@@ -3,27 +3,33 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { ChromeBreadcrumb, CoreStart, MountPoint, NotificationsStart } from '../../../../../src/core/public';
+import { DataSourceAggregatedViewConfig, DataSourceManagementPluginSetup } from '../../../../../src/plugins/data_source_management/public';
 import { NavigationPublicPluginStart } from '../../../../../src/plugins/navigation/public';
-import { CoreStart, ChromeBreadcrumb } from '../../../../../src/core/public';
+import { QUERY_NUMBER_ONE, QUERY_NUMBER_TWO, ServiceEndpoints } from '../../../common';
 import '../../ace-themes/sql_console';
-import { CreateIndex } from './create_index';
-import { SearchResult } from './search_result';
 import { useSearchRelevanceContext } from '../../contexts';
 import { DocumentsIndex } from '../../types/index';
-import { ServiceEndpoints } from '../../../common';
 import { Flyout } from '../common/flyout';
+import { CreateIndex } from './create_index';
+import { SearchResult } from './search_result';
 
+import { DataSourceOption } from '../../../../../src/plugins/data_source_management/public/components/data_source_selector/data_source_selector';
 import './home.scss';
 
 interface QueryExplorerProps {
   parentBreadCrumbs: ChromeBreadcrumb[];
-  notifications: CoreStart['notifications'];
+  notifications: NotificationsStart;
   http: CoreStart['http'];
   navigation: NavigationPublicPluginStart;
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
   setToast: (title: string, color?: string, text?: any, side?: string) => void;
   chrome: CoreStart['chrome'];
+  savedObjects: CoreStart['savedObjects'];
+  dataSourceEnabled: boolean
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  setActionMenu: (menuMount: MountPoint | undefined) => void;
 }
 export const Home = ({
   parentBreadCrumbs,
@@ -33,33 +39,136 @@ export const Home = ({
   setBreadcrumbs,
   setToast,
   chrome,
+  savedObjects,
+  dataSourceEnabled,
+  dataSourceManagement,
+  setActionMenu,
 }: QueryExplorerProps) => {
   const {
-    documentsIndexes,
-    setDocumentsIndexes,
-    pipelines,
-    setPipelines,
     showFlyout,
+    documentsIndexes1,
+    documentsIndexes2,
+    setDocumentsIndexes1,
+    setDocumentsIndexes2,
+    datasource1,
+    datasource2,
+    setFetchedPipelines1,
+    setFetchedPipelines2,
   } = useSearchRelevanceContext();
 
   useEffect(() => {
     setBreadcrumbs([...parentBreadCrumbs]);
   }, [setBreadcrumbs, parentBreadCrumbs]);
+  const [dataSourceOptions, setDataSourceOptions] = useState<DataSourceOption[]>([]);
+  const fetchIndexes = (dataConnectionId: string, queryNumber: string) => {
+    if(dataConnectionId){
+      http.get(`${ServiceEndpoints.GetIndexes}/${dataConnectionId}`).then((res: DocumentsIndex[]) => {
+            if(queryNumber == QUERY_NUMBER_ONE){
+              setDocumentsIndexes1(res)
+            }
+            else{
+              setDocumentsIndexes2(res)
+            }
+          }).catch((err) => {
+            if(queryNumber === QUERY_NUMBER_ONE){
+              setDocumentsIndexes1([])
+            }
+            else{
+              setDocumentsIndexes2([])
+            }
+            console.log(err)
+          });
+    }
+    else{
+      http.get(ServiceEndpoints.GetIndexes).then((res: DocumentsIndex[]) => {
+        if(queryNumber == QUERY_NUMBER_ONE){
+          setDocumentsIndexes1(res)
+        }
+        else{
+          setDocumentsIndexes2(res)
+        }
+      }).catch((err) => {
+        if(queryNumber === QUERY_NUMBER_ONE){
+          setDocumentsIndexes1([])
+        }
+        else{
+          setDocumentsIndexes2([])
+        }
+        console.log(err)
+      });
+    }
+  }
+  const fetchPipelines = (dataConnectionId: string, queryNumber: string) => {
+      if(dataConnectionId){
+        http.get(`${ServiceEndpoints.GetPipelines}/${dataConnectionId}`).then((res: {}) => {
+          if(queryNumber === QUERY_NUMBER_ONE){
+            console.log(res)
+            setFetchedPipelines1(res)
+          }
+          else{
+            setFetchedPipelines2(res)
+          }
+        }).catch((err) => {
+          if(queryNumber === QUERY_NUMBER_ONE){
+            setFetchedPipelines1('')
+          }
+          else{
+            setFetchedPipelines2('')
+          }
+          console.log(err)
+        });
+      }
+      else{
+        http.get(ServiceEndpoints.GetPipelines).then((res: {}) => {
+          if(queryNumber === QUERY_NUMBER_ONE){
+            console.log(res)
+            setFetchedPipelines1(res)
+          }
+          else{
+            setFetchedPipelines2(res)
+          }
+        }).catch((err) => {
+          if(queryNumber === QUERY_NUMBER_ONE){
+            setFetchedPipelines1('')
+          }
+          else{
+            setFetchedPipelines2('')
+          }
+          console.log(err)
+        });
+      }
+  }
 
+  const DataSourceMenu = dataSourceManagement.ui.getDataSourceMenu<DataSourceAggregatedViewConfig>();
   // Get Indexes and Pipelines
   useEffect(() => {
-    http.get(ServiceEndpoints.GetIndexes).then((res: DocumentsIndex[]) => {
-      setDocumentsIndexes(res);
-    });
 
-    http.get(ServiceEndpoints.GetPipelines).then((res: {}) => {
-      setPipelines(res);
-    });
-  }, [http, setDocumentsIndexes, setPipelines]);
+    fetchIndexes(datasource1,QUERY_NUMBER_ONE)
+    fetchIndexes(datasource2,QUERY_NUMBER_TWO)
+    fetchPipelines(datasource1,QUERY_NUMBER_ONE)
+    fetchPipelines(datasource2,QUERY_NUMBER_TWO)
+
+  }, [http, setDocumentsIndexes1, setDocumentsIndexes2, setFetchedPipelines1, setFetchedPipelines2, datasource1, datasource2]);
+
+  const dataSourceMenuComponent = useMemo(() => {
+    return (
+      <DataSourceMenu
+        setMenuMountPoint={setActionMenu}
+        componentType={'DataSourceAggregatedView'}
+        componentConfig={{
+          savedObjects: savedObjects.client,
+          notifications: notifications,
+          fullWidth: true,
+          displayAllCompatibleDataSources: true,
+        }} 
+      />
+    );
+  }, [setActionMenu, savedObjects.client, notifications, datasource1, datasource2]);
   return (
     <>
+      {dataSourceEnabled && dataSourceMenuComponent}
       <div className="osdOverviewWrapper">
-        {documentsIndexes.length ? <SearchResult http={http} /> : <CreateIndex />}
+        {documentsIndexes1.length || documentsIndexes2.length ? <SearchResult http={http} savedObjects={savedObjects} dataSourceEnabled={dataSourceEnabled} dataSourceManagement={dataSourceManagement} navigation={navigation} setActionMenu={setActionMenu} dataSourceOptions={dataSourceOptions} notifications={notifications}/> : <CreateIndex />}
       </div>
       {showFlyout && <Flyout />}
     </>