Bug fix for data-sources page

common/types/data_connections.ts

@@ -72,7 +72,7 @@
 interface AsyncApiDataResponse {
   status: string;
   schema?: Array<{ name: string; type: string }>;
   datarows?: any;
   total?: number;
   size?: number;
   error?: string;
@@ -252,3 +252,25 @@
   databaseName?: string;
   tableName?: string;
 }
+
+export interface RenderAccelerationFlyoutParams {
+  dataSource: string;
+  dataSourceMDSId?: string;
+  databaseName?: string;
+  tableName?: string;
+  handleRefresh?: () => void;
+}
+
+export interface RenderAssociatedObjectsDetailsFlyoutParams {
+  tableDetail: AssociatedObject;
+  dataSourceName: string;
+  handleRefresh?: () => void;
+  dataSourceMDSId?: string;
+}
+
+export interface RenderAccelerationDetailsFlyoutParams {
+  acceleration: CachedAcceleration;
+  dataSourceName: string;
+  handleRefresh?: () => void;
+  dataSourceMDSId?: string;
+}

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

@@ -44,7 +44,7 @@
 
 interface AccelerationTableProps {
   dataSourceName: string;
   cacheLoadingHooks: any;
 }
 
 interface ModalState {
@@ -75,7 +75,7 @@
     if (operationSuccess) {
       handleRefresh();
     }
   }, [operationSuccess]);
 
   const handleActionClick = (
     actionType: ModalState['actionType'],
@@ -115,7 +115,7 @@
       setAccelerations(cachedDataSource.accelerations);
       setUpdatedTime(cachedDataSource.lastUpdated);
     }
   }, []);
 
   useEffect(() => {
     if (accelerationsLoadStatus === DirectQueryLoadingStatus.SUCCESS) {
@@ -129,14 +129,14 @@
     if (accelerationsLoadStatus === DirectQueryLoadingStatus.FAILED) {
       setIsRefreshing(false);
     }
   }, [accelerationsLoadStatus]);
 
   const handleRefresh = useCallback(() => {
     if (!isCatalogCacheFetching(accelerationsLoadStatus)) {
       setIsRefreshing(true);
-      startLoadingAccelerations(dataSourceName);
+      startLoadingAccelerations({ dataSourceName });
     }
   }, [accelerationsLoadStatus]);
 
   const RefreshButton = () => {
     return (
@@ -246,7 +246,11 @@
         return (
           <EuiLink
             onClick={() => {
-              renderAccelerationDetailsFlyout(acceleration, dataSourceName, handleRefresh);
+              renderAccelerationDetailsFlyout({
+                acceleration,
+                dataSourceName,
+                handleRefresh,
+              });
             }}
           >
             {displayName}
@@ -317,7 +321,7 @@
       name: 'Actions',
       actions: tableActions,
     },
   ] as Array<EuiTableFieldDataColumnType<any>>;
 
   const pagination = {
     initialPageSize: 10,

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx

@@ -24,6 +24,7 @@
     }>
   >;
   tableFieldsLoading: boolean;
+  dataSourceMDSId?: string;
 }
 
 export const SelectorLoadDatabases = ({
@@ -32,6 +33,7 @@
   loadingComboBoxes,
   setLoadingComboBoxes,
   tableFieldsLoading,
+  dataSourceMDSId,
 }: SelectorLoadDatabasesProps) => {
   const [isLoading, setIsLoading] = useState(false);
   const {
@@ -42,7 +44,7 @@
 
   const onClickRefreshDatabases = () => {
     setIsLoading(true);
-    startDatabasesLoading({ dataSourceName });
+    startDatabasesLoading({ dataSourceName, dataSourceMDSId });
   };
 
   useEffect(() => {
@@ -56,17 +58,17 @@
     ) {
       setIsLoading(false);
     }
   }, [loadDatabasesStatus]);
 
   useEffect(() => {
     setLoadingComboBoxes({ ...loadingComboBoxes, database: isLoading });
   }, [isLoading]);
 
   useEffect(() => {
     return () => {
       stopDatabasesLoading();
     };
   }, []);
 
   return (
     <>

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx

@@ -29,6 +29,7 @@
     }>
   >;
   tableFieldsLoading: boolean;
+  dataSourceMDSId?: string;
 }
 
 export const SelectorLoadObjects = ({
@@ -38,6 +39,7 @@
   loadingComboBoxes,
   setLoadingComboBoxes,
   tableFieldsLoading,
+  dataSourceMDSId,
 }: SelectorLoadDatabasesProps) => {
   const { setToast } = useToast();
   const [isLoading, setIsLoading] = useState({
@@ -65,8 +67,8 @@
       tableStatus: true,
       accelerationsStatus: true,
     });
-    startLoadingTables({ dataSourceName, databaseName });
-    startLoadingAccelerations({ dataSourceName });
+    startLoadingTables({ dataSourceName, databaseName, dataSourceMDSId });
+    startLoadingAccelerations({ dataSourceName, dataSourceMDSId });
   };
 
   useEffect(() => {

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx

@@ -74,7 +74,7 @@ export const AccelerationDataSourceSelector = ({
   const loadDataSource = () => {
     setLoadingComboBoxes({ ...loadingComboBoxes, dataSource: true });
     http
-      .get(DATACONNECTIONS_BASE + `/dataSourceMDSId=${dataSourceMDSId}`)
+      .get(`${DATACONNECTIONS_BASE}/dataSourceMDSId=${dataSourceMDSId ?? ''}`)
       .then((res) => {
         const isValidDataSource = res.some(
           (connection: any) =>
@@ -232,6 +232,7 @@ export const AccelerationDataSourceSelector = ({
                   loadingComboBoxes={loadingComboBoxes}
                   setLoadingComboBoxes={setLoadingComboBoxes}
                   tableFieldsLoading={tableFieldsLoading}
+                  dataSourceMDSId={dataSourceMDSId}
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
@@ -281,6 +282,7 @@ export const AccelerationDataSourceSelector = ({
                   loadingComboBoxes={loadingComboBoxes}
                   setLoadingComboBoxes={setLoadingComboBoxes}
                   tableFieldsLoading={tableFieldsLoading}
+                  dataSourceMDSId={dataSourceMDSId}
                 />
               </EuiFlexItem>
             </EuiFlexGroup>

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

@@ -6,12 +6,14 @@
 import { EuiButton, EuiHealth } from '@elastic/eui';
 import React from 'react';
 import { DATA_SOURCE_TYPES } from '../../../../../../../common/constants/data_sources';
-import { CachedAcceleration } from '../../../../../../../common/types/data_connections';
+import {
+  CachedAcceleration,
+  RenderAccelerationFlyoutParams,
+} from '../../../../../../../common/types/data_connections';
 import {
   redirectToExplorerOSIdx,
   redirectToExplorerWithDataSrc,
 } from '../../associated_objects/utils/associated_objects_tab_utils';
-
 export const ACC_PANEL_TITLE = 'Accelerations';
 export const ACC_PANEL_DESC =
   'Accelerations optimize query performance by indexing external data into OpenSearch.';
@@ -91,26 +93,23 @@
   handleRefresh,
 }: {
   dataSourceName: string;
-  renderCreateAccelerationFlyout: (
-    dataSource: string,
-    dataSourceMDSId?: string,
-    databaseName?: string,
-    tableName?: string,
-    handleRefresh?: () => void
-  ) => void;
+  renderCreateAccelerationFlyout: ({
+    dataSource,
+    databaseName,
+    tableName,
+    handleRefresh,
+    dataSourceMDSId,
+  }: RenderAccelerationFlyoutParams) => void;
   handleRefresh: () => void;
 }) => {
   return (
     <>
       <EuiButton
         onClick={() =>
-          renderCreateAccelerationFlyout(
-            dataSourceName,
-            undefined,
-            undefined,
-            undefined,
-            handleRefresh
-          )
+          renderCreateAccelerationFlyout({
+            dataSource: dataSourceName,
+            handleRefresh,
+          })
         }
         fill
       >

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

@@ -93,13 +93,12 @@
     return (
       <EuiButtonEmpty
         onClick={() =>
-          renderCreateAccelerationFlyout(
-            datasourceName,
-            '',
-            tableDetail.database,
-            tableDetail.name,
-            handleRefresh
-          )
+          renderCreateAccelerationFlyout({
+            dataSource: datasourceName,
+            databaseName: tableDetail.database,
+            tableName: tableDetail.name,
+            handleRefresh,
+          })
         }
       >
         <EuiIcon type={'bolt'} size="m" />
@@ -156,7 +155,12 @@
         return (
           <EuiLink
             onClick={() =>
-              renderAccelerationDetailsFlyout(item, datasourceName, handleRefresh, dataSourceMDSId)
+              renderAccelerationDetailsFlyout({
+                acceleration: item,
+                dataSourceName: datasourceName,
+                handleRefresh,
+                dataSourceMDSId,
+              })
             }
           >
             {name}
@@ -196,13 +200,12 @@
           color="primary"
           fill
           onClick={() =>
-            renderCreateAccelerationFlyout(
-              datasourceName,
-              '',
-              tableDetail.database,
-              tableDetail.name,
-              handleRefresh
-            )
+            renderCreateAccelerationFlyout({
+              dataSource: datasourceName,
+              databaseName: tableDetail.database,
+              tableName: tableDetail.name,
+              handleRefresh,
+            })
           }
           iconType="popout"
           iconSide="left"

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

@@ -100,7 +100,7 @@
 
   const onRefreshButtonClick = () => {
     if (!isCatalogCacheFetching(databasesLoadStatus, tablesLoadStatus, accelerationsLoadStatus)) {
-      startLoadingDatabases({ databaseName: datasource.name });
+      startLoadingDatabases({ dataSourceName: datasource.name });
       setIsRefreshing(true);
     }
   };
@@ -167,7 +167,7 @@
           datasourceCache.status === CachedDataSourceStatus.Failed) &&
         !isCatalogCacheFetching(databasesLoadStatus)
       ) {
-        startLoadingDatabases(datasource.name);
+        startLoadingDatabases({ dataSourceName: datasource.name });
       } else if (datasourceCache.status === CachedDataSourceStatus.Updated) {
         setCachedDatabases(datasourceCache.databases);
         setIsFirstTimeLoading(false);
@@ -224,7 +224,7 @@
           databaseCache.status === CachedDataSourceStatus.Failed) &&
         !isCatalogCacheFetching(tablesLoadStatus)
       ) {
-        startLoadingTables(datasource.name, selectedDatabase);
+        startLoadingTables({ dataSourceName: datasource.name, databaseName: selectedDatabase });
         setIsObjectsLoading(true);
       } else if (databaseCache.status === CachedDataSourceStatus.Updated) {
         setCachedTables(databaseCache.tables);
@@ -235,7 +235,7 @@
           isRefreshing) &&
         !isCatalogCacheFetching(accelerationsLoadStatus)
       ) {
-        startLoadingAccelerations(datasource.name);
+        startLoadingAccelerations({ dataSourceName: datasource.name });
         setIsObjectsLoading(true);
       } else if (accelerationsCache.status === CachedDataSourceStatus.Updated) {
         setCachedAccelerations(accelerationsCache.accelerations);

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

@@ -3,14 +3,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
 import {
   EuiInMemoryTable,
   EuiLink,
-  SearchFilterConfig,
   EuiTableFieldDataColumnType,
+  SearchFilterConfig,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
+import React, { useEffect, useState } from 'react';
+import {
+  ACCELERATION_INDEX_TYPES,
+  DATA_SOURCE_TYPES,
+} from '../../../../../../../common/constants/data_sources';
 import {
   AssociatedObject,
   CachedAcceleration,
@@ -20,18 +24,14 @@
   getRenderAssociatedObjectsDetailsFlyout,
   getRenderCreateAccelerationFlyout,
 } from '../../../../../../plugin';
+import { getAccelerationName } from '../../accelerations/utils/acceleration_utils';
 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;
@@ -69,11 +69,18 @@
         <EuiLink
           onClick={() => {
             if (item.type === 'table') {
-              renderAssociatedObjectsDetailsFlyout(item, datasourceName, handleRefresh);
+              renderAssociatedObjectsDetailsFlyout({
+                tableDetail: item,
+                dataSourceName: datasourceName,
+                handleRefresh,
+              });
             } else {
               const acceleration = cachedAccelerations.find((acc) => acc.indexName === item.id);
               if (acceleration) {
-                renderAccelerationDetailsFlyout(acceleration, datasourceName);
+                renderAccelerationDetailsFlyout({
+                  acceleration,
+                  dataSourceName: datasourceName,
+                });
               }
             }
           }}
@@ -108,7 +115,11 @@
             return (
               <EuiLink
                 onClick={() =>
-                  renderAccelerationDetailsFlyout(accelerations[0], datasourceName, handleRefresh)
+                  renderAccelerationDetailsFlyout({
+                    acceleration: accelerations[0],
+                    dataSourceName: datasourceName,
+                    handleRefresh,
+                  })
                 }
               >
                 {name}
@@ -118,7 +129,11 @@
           return (
             <EuiLink
               onClick={() =>
-                renderAssociatedObjectsDetailsFlyout(obj, datasourceName, handleRefresh)
+                renderAssociatedObjectsDetailsFlyout({
+                  tableDetail: obj,
+                  dataSourceName: datasourceName,
+                  handleRefresh,
+                })
               }
             >
               View all {accelerations.length}
@@ -128,7 +143,11 @@
           return (
             <EuiLink
               onClick={() =>
-                renderAssociatedObjectsDetailsFlyout(accelerations, datasourceName, handleRefresh)
+                renderAssociatedObjectsDetailsFlyout({
+                  tableDetail: accelerations,
+                  dataSourceName: datasourceName,
+                  handleRefresh,
+                })
               }
             >
               {accelerations.name}
@@ -185,7 +204,12 @@
           icon: 'bolt',
           available: (item: AssociatedObject) => item.type === 'table',
           onClick: (item: AssociatedObject) =>
-            renderCreateAccelerationFlyout(datasourceName, item.database, item.name, handleRefresh),
+            renderCreateAccelerationFlyout({
+              dataSource: datasourceName,
+              databaseName: item.database,
+              tableName: item.tableName,
+              handleRefresh,
+            }),
         },
       ],
     },