Bug fix for data-sources page (opensearch-project#1830)

* added fix for failing data-sources page Signed-off-by: sumukhswamy <[email protected]> * added change for job with the id Signed-off-by: sumukhswamy <[email protected]> * addressed pr comments Signed-off-by: sumukhswamy <[email protected]> * added fix for flyput Signed-off-by: sumukhswamy <[email protected]> * added fix for flyout Signed-off-by: sumukhswamy <[email protected]> * refactored the flyout objects with an interface Signed-off-by: sumukhswamy <[email protected]> --------- Signed-off-by: sumukhswamy <[email protected]>
sumukhswamy · May 23, 2024 · 6bcb0af · 6bcb0af
1 parent 446b8db
commit 6bcb0af
Show file tree

Hide file tree

Showing 16 changed files with 193 additions and 132 deletions.
diff --git a/common/types/data_connections.ts b/common/types/data_connections.ts
@@ -252,3 +252,25 @@ export interface StartLoadingParams {
   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;
+}
diff --git a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx
@@ -134,7 +134,7 @@ export const AccelerationTable = ({
   const handleRefresh = useCallback(() => {
     if (!isCatalogCacheFetching(accelerationsLoadStatus)) {
       setIsRefreshing(true);
-      startLoadingAccelerations(dataSourceName);
+      startLoadingAccelerations({ dataSourceName });
     }
   }, [accelerationsLoadStatus]);
 
@@ -246,7 +246,11 @@ export const AccelerationTable = ({
         return (
           <EuiLink
             onClick={() => {
-              renderAccelerationDetailsFlyout(acceleration, dataSourceName, handleRefresh);
+              renderAccelerationDetailsFlyout({
+                acceleration,
+                dataSourceName,
+                handleRefresh,
+              });
             }}
           >
             {displayName}

diff --git a/...e/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx b/...e/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx
@@ -24,6 +24,7 @@ interface SelectorLoadDatabasesProps {
     }>
   >;
   tableFieldsLoading: boolean;
+  dataSourceMDSId?: string;
 }
 
 export const SelectorLoadDatabases = ({
@@ -32,6 +33,7 @@ export const SelectorLoadDatabases = ({
   loadingComboBoxes,
   setLoadingComboBoxes,
   tableFieldsLoading,
+  dataSourceMDSId,
 }: SelectorLoadDatabasesProps) => {
   const [isLoading, setIsLoading] = useState(false);
   const {
@@ -42,7 +44,7 @@ export const SelectorLoadDatabases = ({
 
   const onClickRefreshDatabases = () => {
     setIsLoading(true);
-    startDatabasesLoading({ dataSourceName });
+    startDatabasesLoading({ dataSourceName, dataSourceMDSId });
   };
 
   useEffect(() => {

diff --git a/...age/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx b/...age/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx
@@ -29,6 +29,7 @@ interface SelectorLoadDatabasesProps {
     }>
   >;
   tableFieldsLoading: boolean;
+  dataSourceMDSId?: string;
 }
 
 export const SelectorLoadObjects = ({
@@ -38,6 +39,7 @@ export const SelectorLoadObjects = ({
   loadingComboBoxes,
   setLoadingComboBoxes,
   tableFieldsLoading,
+  dataSourceMDSId,
 }: SelectorLoadDatabasesProps) => {
   const { setToast } = useToast();
   const [isLoading, setIsLoading] = useState({
@@ -65,8 +67,8 @@ export const SelectorLoadObjects = ({
       tableStatus: true,
       accelerationsStatus: true,
     });
-    startLoadingTables({ dataSourceName, databaseName });
-    startLoadingAccelerations({ dataSourceName });
+    startLoadingTables({ dataSourceName, databaseName, dataSourceMDSId });
+    startLoadingAccelerations({ dataSourceName, dataSourceMDSId });
   };
 
   useEffect(() => {

diff --git a/...components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx b/...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>

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,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 @@ export const CreateAccelerationFlyoutButton = ({
   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
       >

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
@@ -93,13 +93,12 @@ export const AssociatedObjectsDetailsFlyout = ({
     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 @@ export const AssociatedObjectsDetailsFlyout = ({
         return (
           <EuiLink
             onClick={() =>
-              renderAccelerationDetailsFlyout(item, datasourceName, handleRefresh, dataSourceMDSId)
+              renderAccelerationDetailsFlyout({
+                acceleration: item,
+                dataSourceName: datasourceName,
+                handleRefresh,
+                dataSourceMDSId,
+              })
             }
           >
             {name}
@@ -196,13 +200,12 @@ export const AssociatedObjectsDetailsFlyout = ({
           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"

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
@@ -100,7 +100,7 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
 
   const onRefreshButtonClick = () => {
     if (!isCatalogCacheFetching(databasesLoadStatus, tablesLoadStatus, accelerationsLoadStatus)) {
-      startLoadingDatabases({ databaseName: datasource.name });
+      startLoadingDatabases({ dataSourceName: datasource.name });
       setIsRefreshing(true);
     }
   };
@@ -167,7 +167,7 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
           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 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
           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 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
           isRefreshing) &&
         !isCatalogCacheFetching(accelerationsLoadStatus)
       ) {
-        startLoadingAccelerations(datasource.name);
+        startLoadingAccelerations({ dataSourceName: datasource.name });
         setIsObjectsLoading(true);
       } else if (accelerationsCache.status === CachedDataSourceStatus.Updated) {
         setCachedAccelerations(accelerationsCache.accelerations);

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
@@ -3,15 +3,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
-import _ from 'lodash';
 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,
@@ -21,18 +24,14 @@ import {
   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;
@@ -70,11 +69,18 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
         <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,
+                });
               }
             }
           }}
@@ -109,7 +115,11 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
             return (
               <EuiLink
                 onClick={() =>
-                  renderAccelerationDetailsFlyout(accelerations[0], datasourceName, handleRefresh)
+                  renderAccelerationDetailsFlyout({
+                    acceleration: accelerations[0],
+                    dataSourceName: datasourceName,
+                    handleRefresh,
+                  })
                 }
               >
                 {name}
@@ -119,7 +129,11 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
           return (
             <EuiLink
               onClick={() =>
-                renderAssociatedObjectsDetailsFlyout(obj, datasourceName, handleRefresh)
+                renderAssociatedObjectsDetailsFlyout({
+                  tableDetail: obj,
+                  dataSourceName: datasourceName,
+                  handleRefresh,
+                })
               }
             >
               View all {accelerations.length}
@@ -129,7 +143,11 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
           return (
             <EuiLink
               onClick={() =>
-                renderAssociatedObjectsDetailsFlyout(accelerations, datasourceName, handleRefresh)
+                renderAssociatedObjectsDetailsFlyout({
+                  tableDetail: accelerations,
+                  dataSourceName: datasourceName,
+                  handleRefresh,
+                })
               }
             >
               {accelerations.name}
@@ -186,7 +204,12 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
           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,
+            }),
         },
       ],
     },