[Backport 2.x] Implement redirection to explorer within data sources

common/types/data_connections.ts

@@ -38,7 +38,7 @@
   id: string;
   name: string;
   database: string;
-  type: string;
+  type: AccelerationIndexType | 'table';
   accelerations: Acceleration[];
   columns?: TableColumn[];
 }
@@ -70,7 +70,7 @@
 interface AsyncApiDataResponse {
   status: string;
   schema?: Array<{ name: string; type: string }>;
   datarows?: any;
   total?: number;
   size?: number;
   error?: string;

public/components/datasources/components/manage/accelerations/acceleration_details_flyout.tsx

@@ -33,6 +33,7 @@
   index: string;
   acceleration: CachedAcceleration;
   dataSourceName: string;
+  resetFlyout: () => void;
 }
 
 const getMappings = (index: string): Promise<OpenSearchDashboardsResponse> | undefined => {
@@ -57,11 +58,11 @@
 };
 
 export const AccelerationDetailsFlyout = (props: AccelerationDetailsFlyoutProps) => {
-  const { index, dataSourceName, acceleration } = props;
+  const { index, dataSourceName, acceleration, resetFlyout } = props;
   console.log(index, acceleration, dataSourceName);
   const { flintIndexName } = acceleration;
   const [selectedTab, setSelectedTab] = useState('details');
   const tabsMap: { [key: string]: any } = {
     details: AccelerationDetailsTab,
     schema: AccelerationSchemaTab,
     sql_definition: AccelerationSqlTab,
@@ -104,12 +105,17 @@
     if (flintIndexName !== undefined && flintIndexName.trim().length > 0) {
       getAccDetail(flintIndexName);
     }
   }, [flintIndexName]);
 
   const DiscoverButton = () => {
     // TODO: display button if can be sent to discover
     return (
-      <EuiButtonEmpty onClick={onDiscoverButtonClick}>
+      <EuiButtonEmpty
+        onClick={() => {
+          onDiscoverButtonClick(acceleration, dataSourceName);
+          resetFlyout();
+        }}
+      >
         <EuiIcon type={'discoverApp'} size="m" />
       </EuiButtonEmpty>
     );

public/components/datasources/components/manage/accelerations/acceleration_table.tsx

@@ -40,7 +40,7 @@
 
 interface AccelerationTableProps {
   dataSourceName: string;
   cacheLoadingHooks: any;
 }
 
 export const AccelerationTable = ({
@@ -77,7 +77,7 @@
       setAccelerations(cachedDataSource.accelerations);
       setUpdatedTime(cachedDataSource.lastUpdated);
     }
   }, []);
 
   useEffect(() => {
     if (accelerationsLoadStatus === DirectQueryLoadingStatus.SUCCESS) {
@@ -93,7 +93,7 @@
       setIsRefreshing(false);
       console.log('Refresh process is failed.');
     }
   }, [accelerationsLoadStatus]);
 
   const handleRefresh = () => {
     console.log('Initiating refresh...');
@@ -179,7 +179,9 @@
       description: 'Open in Discover',
       icon: 'discoverApp',
       type: 'icon',
-      onClick: onDiscoverButtonClick,
+      onClick: (acc: CachedAcceleration) => {
+        onDiscoverButtonClick(acc, dataSourceName);
+      },
     },
     {
       name: 'Refresh',
@@ -282,7 +284,7 @@
       name: 'Actions',
       actions: tableActions,
     },
   ] as Array<EuiBasicTableColumn<any>>;
 
   const pagination = {
     initialPageSize: 10,

public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx

@@ -6,6 +6,11 @@
 import React from 'react';
 import { EuiHealth } from '@elastic/eui';
 import { CachedAcceleration } from '../../../../../../../common/types/data_connections';
+import {
+  redirectToExplorerOSIdx,
+  redirectToExplorerWithDataSrc,
+} from '../../associated_objects/utils/associated_objects_tab_utils';
+import { DATA_SOURCE_TYPES } from '../../../../../../../common/constants/data_sources';
 
 export const ACC_PANEL_TITLE = 'Accelerations';
 export const ACC_PANEL_DESC =
@@ -75,17 +80,27 @@
   return 'inputOutput';
 };
 
 export const onRefreshButtonClick = (acceleration: any) => {
   // TODO: send request to refresh
   console.log('refreshing', acceleration.name);
 };
 
-export const onDiscoverButtonClick = (acceleration: any) => {
-  // TODO: send user to Discover
-  console.log('sending user to discover for', acceleration.name);
+export const onDiscoverButtonClick = (acceleration: CachedAcceleration, dataSourceName: string) => {
+  // boolean determining whether its a skipping index table or mv/ci
+  if (acceleration.type === undefined) return;
+  if (acceleration.type === 'skipping') {
+    redirectToExplorerWithDataSrc(
+      dataSourceName,
+      DATA_SOURCE_TYPES.S3Glue,
+      acceleration.database,
+      acceleration.table
+    );
+  } else {
+    redirectToExplorerOSIdx(acceleration.flintIndexName);
+  }
 };
 
 export const onDeleteButtonClick = (acceleration: any) => {
   // TODO: delete acceleration
   console.log('deleting', acceleration.name);
 };

public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx

@@ -29,7 +29,7 @@
 import {
   onAccelerateButtonClick,
   onDeleteButtonClick,
-  onDiscoverButtonClick,
+  redirectToExplorerWithDataSrc,
 } from './utils/associated_objects_tab_utils';
 import { getRenderAccelerationDetailsFlyout } from '../../../../../plugin';
 import { AccelerationStatus } from '../accelerations/utils/acceleration_utils';
@@ -38,16 +38,32 @@
   ACCE_NO_DATA_DESCRIPTION,
   CREATE_ACCELERATION_DESCRIPTION,
 } from '../associated_objects/utils/associated_objects_tab_utils';
+import { DATA_SOURCE_TYPES } from '../../../../../../common/constants/data_sources';
 
 export interface AssociatedObjectsFlyoutProps {
   tableDetail: AssociatedObject;
+  resetFlyout: () => void;
 }
 
-export const AssociatedObjectsDetailsFlyout = ({ tableDetail }: AssociatedObjectsFlyoutProps) => {
+export const AssociatedObjectsDetailsFlyout = ({
+  tableDetail,
+  resetFlyout,
+}: AssociatedObjectsFlyoutProps) => {
   const DiscoverButton = () => {
     // TODO: display button if can be sent to discover
     return (
-      <EuiButtonEmpty onClick={onDiscoverButtonClick}>
+      <EuiButtonEmpty
+        onClick={() => {
+          if (tableDetail.type !== 'table') return;
+          redirectToExplorerWithDataSrc(
+            tableDetail.datasource,
+            DATA_SOURCE_TYPES.S3Glue,
+            tableDetail.database,
+            tableDetail.name
+          );
+          resetFlyout();
+        }}
+      >
         <EuiIcon type={'discoverApp'} size="m" />
       </EuiButtonEmpty>
     );
@@ -69,7 +85,7 @@
     );
   };
 
   const DetailComponent = (detailProps: { title: string; description: any }) => {
     const { title, description } = detailProps;
     return (
       <EuiFlexItem>

public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx

@@ -277,7 +277,7 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
         name: getAccelerationName(acceleration.indexName, acceleration, datasource.name),
         database: acceleration.database,
         type: ACCELERATION_INDEX_TYPES.find((accelType) => accelType.value === acceleration.type)!
-          .label,
+          .value,
         // Temporary dummy array
         accelerations: [],
         columns: undefined,

public/components/datasources/components/manage/associated_objects/modules/associated_objects_table.tsx

@@ -24,8 +24,14 @@
   ASSC_OBJ_TABLE_ACC_COLUMN_NAME,
   ASSC_OBJ_TABLE_SEARCH_HINT,
   ASSC_OBJ_TABLE_SUBJ,
+  redirectToExplorerOSIdx,
+  redirectToExplorerWithDataSrc,
 } from '../utils/associated_objects_tab_utils';
 import { getAccelerationName } from '../../accelerations/utils/acceleration_utils';
+import {
+  ACCELERATION_INDEX_TYPES,
+  DATA_SOURCE_TYPES,
+} from '../../../../../../../common/constants/data_sources';
 
 interface AssociatedObjectsTableProps {
   datasourceName: string;
@@ -97,6 +103,10 @@
         defaultMessage: 'Type',
       }),
       sortable: true,
+      render: (type) => {
+        if (type === 'table') return 'Table';
+        return ACCELERATION_INDEX_TYPES.find((accType) => type === accType.value)!.label;
+      },
     },
     {
       field: 'accelerations',
@@ -134,7 +144,22 @@
           ),
           type: 'icon',
           icon: 'discoverApp',
-          onClick: (item: AssociatedObject) => console.log('Discover', item),
+          onClick: (asscObj: AssociatedObject) => {
+            if (asscObj.type === 'covering' || asscObj.type === 'materialized') {
+              // find the flint index name through the cached acceleration
+              const acceleration = cachedAccelerations.find(
+                (acc) => getAccelerationName(acc.indexName, acc, datasourceName) === asscObj.name
+              );
+              redirectToExplorerOSIdx(acceleration!.flintIndexName);
+            } else if (asscObj.type === 'table') {
+              redirectToExplorerWithDataSrc(
+                asscObj.datasource,
+                DATA_SOURCE_TYPES.S3Glue,
+                asscObj.database,
+                asscObj.name
+              );
+            }
+          },
         },
         {
           name: i18n.translate('datasources.associatedObjectsTab.action.accelerate.name', {
@@ -148,7 +173,7 @@
           ),
           type: 'icon',
           icon: 'bolt',
-          available: (item: AssociatedObject) => item.type === 'Table',
+          available: (item: AssociatedObject) => item.type === 'table',
           onClick: (item: AssociatedObject) => console.log('Accelerate', item),
         },
       ],

public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_utils.tsx

@@ -3,7 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { coreRefs } from '../../../../../../framework/core_refs';
 import { DirectQueryLoadingStatus } from '../../../../../../../common/types/explorer';
+import {
+  DEFAULT_DATA_SOURCE_NAME,
+  DEFAULT_DATA_SOURCE_TYPE,
+} from '../../../../../../../common/constants/data_sources';
+import { observabilityLogsID } from '../../../../../../../common/constants/shared';
 
 export const ASSC_OBJ_TABLE_SUBJ = 'associatedObjectsTable';
 
@@ -36,11 +42,6 @@
   console.log('accelerating', tableDetail.name);
 };
 
-export const onDiscoverButtonClick = (tabaleDetail: any) => {
-  // TODO: send user to Discover
-  console.log('sending user to discover for', tabaleDetail.name);
-};
-
 export const onDeleteButtonClick = (tableDetail: any) => {
   // TODO: delete table
   console.log('deleting', tableDetail.name);
@@ -57,3 +58,33 @@
     catalogCacheFetchingStatus.includes(status)
   );
 };
+
+export const redirectToExplorerWithDataSrc = (
+  datasourceName: string,
+  datasourceType: string,
+  databaseName: string,
+  tableName: string
+) => {
+  const queryIndex = `${datasourceName}.${databaseName}.${tableName}`;
+  redirectToExplorerWithQuery(datasourceName, datasourceType, queryIndex);
+};
+
+export const redirectToExplorerOSIdx = (indexName: string) => {
+  redirectToExplorerWithQuery(DEFAULT_DATA_SOURCE_NAME, DEFAULT_DATA_SOURCE_TYPE, indexName);
+};
+
+const redirectToExplorerWithQuery = (
+  datasourceName: string,
+  datasourceType: string,
+  queriedIndex: string
+) => {
+  // navigate to explorer
+  coreRefs?.application!.navigateToApp(observabilityLogsID, {
+    path: `#/explorer`,
+    state: {
+      datasourceName,
+      datasourceType,
+      queryToRun: `source = ${queriedIndex} | head 10`,
+    },
+  });
+};

public/components/datasources/components/manage/data_connection.tsx

@@ -37,6 +37,7 @@
   useLoadDatabasesToCache,
   useLoadTablesToCache,
 } from '../../../../../public/framework/catalog_cache/cache_loader';
+import { DATA_SOURCE_TYPES } from '../../../../../common/constants/data_sources';
 import { coreRefs } from '../../../../framework/core_refs';
 import { getRenderCreateAccelerationFlyout } from '../../../../plugin';
 import { NoAccess } from '../no_access';
@@ -81,48 +82,6 @@
     startLoadingAccelerations,
   };
 
-  // Dummy accelerations variables for mock purposes
-  // Actual accelerations should be retrieved from the backend
-  // const sampleSql = 'select * from `httplogs`.`default`.`table2` limit 10';
-  const _dummyAccelerations = [
-    {
-      flintIndexName: 'flint_mys3_default_http_logs_skipping_index',
-      kind: 'skipping',
-      database: 'default',
-      table: 'test',
-      indexName: 'skipping_index',
-      autoRefresh: true,
-      status: 'Active',
-    },
-    {
-      flintIndexName: 'flint_mys3_default_test_mycv_index',
-      kind: 'covering',
-      database: 'default',
-      table: 'test',
-      indexName: 'mycv',
-      autoRefresh: false,
-      status: 'Active',
-    },
-    {
-      flintIndexName: 'flint_mys3_default_mymv',
-      kind: ' ',
-      database: 'default',
-      table: '',
-      indexName: 'mymv',
-      autoRefresh: true,
-      status: 'Active',
-    },
-    {
-      flintIndexName: 'flint_mys3_default_sample_mv',
-      kind: 'mv',
-      database: 'default',
-      table: 'sample_table',
-      indexName: 'sample_mv',
-      autoRefresh: true,
-      status: 'Active',
-    },
-  ];
-
   const [dataSourceIntegrations, setDataSourceIntegrations] = useState(
     [] as IntegrationInstanceResult[]
   );
@@ -156,7 +115,13 @@
   };
 
   const onclickDiscoverCard = () => {
-    application!.navigateToApp(observabilityLogsID);
+    application!.navigateToApp(observabilityLogsID, {
+      path: `#/explorer`,
+      state: {
+        datasourceName: dataSource,
+        datasourceType: DATA_SOURCE_TYPES.S3Glue,
+      },
+    });
   };
 
   const DefaultDatasourceCards = () => {

public/components/event_analytics/explorer/explorer.tsx

@@ -32,6 +32,7 @@ import React, {
   useState,
 } from 'react';
 import { batch, useDispatch, useSelector } from 'react-redux';
+import { createBrowserHistory } from 'history';
 import { LogExplorerRouterContext } from '..';
 import {
   DEFAULT_DATA_SOURCE_TYPE,
@@ -98,7 +99,10 @@ import { findMinInterval } from '../../common/query_utils';
 import { onItemSelect, parseGetSuggestions } from '../../common/search/autocomplete_logic';
 import { Search } from '../../common/search/search';
 import { processMetricsData } from '../../custom_panels/helpers/utils';
-import { selectSearchMetaData } from '../../event_analytics/redux/slices/search_meta_data_slice';
+import {
+  selectSearchMetaData,
+  update as updateSearchMetaData,
+} from '../../event_analytics/redux/slices/search_meta_data_slice';
 import { getVizContainerProps } from '../../visualizations/charts/helpers';
 import { TabContext, useFetchEvents, useFetchPatterns, useFetchVisualizations } from '../hooks';
 import {
@@ -263,6 +267,40 @@ export const Explorer = ({
     );
   };
 
+  const historyFromRedirection = createBrowserHistory();
+  useEffect(() => {
+    console.log(historyFromRedirection.location.state);
+    if (!historyFromRedirection.location.state) return;
+    const {
+      datasourceName,
+      datasourceType,
+      queryToRun,
+    }: any = historyFromRedirection.location.state;
+    batch(() => {
+      dispatch(
+        updateSearchMetaData({
+          tabId,
+          data: {
+            datasources: [
+              {
+                label: datasourceName,
+                type: datasourceType,
+                value: datasourceName,
+                name: datasourceName,
+              },
+            ],
+          },
+        })
+      );
+      dispatch(
+        changeQuery({
+          tabId,
+          query: { [RAW_QUERY]: queryToRun },
+        })
+      );
+    });
+  }, []);
+
   useEffect(() => {
     const handleSetBrowserTabFocus = () => {
       if (document.hidden) setBrowserTabFocus(false);