Implement redirection to explorer within data sources (#1548) (#1553)

* history location state retrieval * populate fields as required * every single change made in datasources * remove unused method * remove console log * use enum for s3 glue * properly redirect for skipping indices * fix linting complaints * updated snapshot --------- (cherry picked from commit 2a575ed) Signed-off-by: Paul Sebastian <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Mar 18, 2024 · a242c78 · a242c78
1 parent d563366
commit a242c78
Show file tree

Hide file tree

Showing 12 changed files with 752 additions and 152 deletions.
diff --git a/common/types/data_connections.ts b/common/types/data_connections.ts
@@ -38,7 +38,7 @@ export interface AssociatedObject {
   id: string;
   name: string;
   database: string;
-  type: string;
+  type: AccelerationIndexType | 'table';
   accelerations: Acceleration[];
   columns?: TableColumn[];
 }

diff --git a/...nents/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap b/...nents/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap
diff --git a/...ic/components/datasources/components/manage/accelerations/acceleration_details_flyout.tsx b/...ic/components/datasources/components/manage/accelerations/acceleration_details_flyout.tsx
@@ -33,6 +33,7 @@ export interface AccelerationDetailsFlyoutProps {
   index: string;
   acceleration: CachedAcceleration;
   dataSourceName: string;
+  resetFlyout: () => void;
 }
 
 const getMappings = (index: string): Promise<OpenSearchDashboardsResponse> | undefined => {
@@ -57,7 +58,7 @@ const handleDetailsFetchingPromise = (
 };
 
 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');
@@ -109,7 +110,12 @@ export const AccelerationDetailsFlyout = (props: AccelerationDetailsFlyoutProps)
   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>
     );

diff --git a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx
@@ -179,7 +179,9 @@ export const AccelerationTable = ({
       description: 'Open in Discover',
       icon: 'discoverApp',
       type: 'icon',
-      onClick: onDiscoverButtonClick,
+      onClick: (acc: CachedAcceleration) => {
+        onDiscoverButtonClick(acc, dataSourceName);
+      },
     },
     {
       name: 'Refresh',

diff --git a/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx b/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 =
@@ -80,9 +85,19 @@ export const onRefreshButtonClick = (acceleration: any) => {
   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) => {

diff --git a/...ts/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx b/...ts/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx
@@ -29,7 +29,7 @@ import { i18n } from '@osd/i18n';
 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 @@ import {
   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>
     );

diff --git a/...ic/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx b/...ic/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,

diff --git a/...nts/datasources/components/manage/associated_objects/modules/associated_objects_table.tsx b/...nts/datasources/components/manage/associated_objects/modules/associated_objects_table.tsx
@@ -24,8 +24,14 @@ import {
   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 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
         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 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
           ),
           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 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
           ),
           type: 'icon',
           icon: 'bolt',
-          available: (item: AssociatedObject) => item.type === 'Table',
+          available: (item: AssociatedObject) => item.type === 'table',
           onClick: (item: AssociatedObject) => console.log('Accelerate', item),
         },
       ],

diff --git a/...s/datasources/components/manage/associated_objects/utils/associated_objects_tab_utils.tsx b/...s/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 @@ export const onAccelerateButtonClick = (tableDetail: any) => {
   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 @@ export const isCatalogCacheFetching = (...statuses: DirectQueryLoadingStatus[])
     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`,
+    },
+  });
+};
diff --git a/public/components/datasources/components/manage/data_connection.tsx b/public/components/datasources/components/manage/data_connection.tsx
@@ -37,6 +37,7 @@ import {
   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 @@ export const DataConnection = (props: any) => {
     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 @@ export const DataConnection = (props: any) => {
   };
 
   const onclickDiscoverCard = () => {
-    application!.navigateToApp(observabilityLogsID);
+    application!.navigateToApp(observabilityLogsID, {
+      path: `#/explorer`,
+      state: {
+        datasourceName: dataSource,
+        datasourceType: DATA_SOURCE_TYPES.S3Glue,
+      },
+    });
   };
 
   const DefaultDatasourceCards = () => {

diff --git a/public/components/event_analytics/explorer/explorer.tsx b/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);