Bug fixes and UI updates for datasources (opensearch-project#1618)

* fixing bug with loading table columns Signed-off-by: Sean Li <[email protected]> * UI changes for datasources Signed-off-by: Sean Li <[email protected]> * adding try catch to database cache getters Signed-off-by: Sean Li <[email protected]> * addressing comments Signed-off-by: Sean Li <[email protected]> * adding refresh to create accelerations Signed-off-by: Sean Li <[email protected]> * removing osd config Signed-off-by: Sean Li <[email protected]> --------- Signed-off-by: Sean Li <[email protected]>
amsiglan · Mar 25, 2024 · 9428002 · 9428002
1 parent faf9c23
commit 9428002
Show file tree

Hide file tree

Showing 13 changed files with 350 additions and 95 deletions.
diff --git a/common/types/data_connections.ts b/common/types/data_connections.ts
@@ -41,7 +41,7 @@ export interface AssociatedObject {
   name: string;
   database: string;
   type: AssociatedObjectIndexType;
-  accelerations: CachedAcceleration[];
+  accelerations: CachedAcceleration[] | AssociatedObject;
   columns?: CachedColumn[];
 }
 

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_action_overlay.tsx b/...ic/components/datasources/components/manage/accelerations/acceleration_action_overlay.tsx
@@ -55,7 +55,7 @@ export const AccelerationActionOverlay: React.FC<AccelerationActionOverlayProps>
       break;
     case 'delete':
       title = `Delete acceleration ${displayIndexName} on ${displayFullPath} ?`;
-      description = ACC_DELETE_MSG;
+      description = ACC_DELETE_MSG(displayIndexName);
       confirmButtonText = 'Delete';
       break;
     case 'sync':

diff --git a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx
@@ -168,6 +168,7 @@ export const AccelerationTable = ({
                 <CreateAccelerationFlyoutButton
                   dataSourceName={dataSourceName}
                   renderCreateAccelerationFlyout={renderCreateAccelerationFlyout}
+                  handleRefresh={handleRefresh}
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>

diff --git a/...omponents/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx b/...omponents/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx
@@ -52,6 +52,7 @@ export const CreateAcceleration = ({
   resetFlyout,
   databaseName,
   tableName,
+  refreshHandler,
 }: CreateAccelerationProps) => {
   const { setToast } = useToast();
   const http = coreRefs!.http;
@@ -259,6 +260,7 @@ export const CreateAcceleration = ({
                 accelerationFormData={accelerationFormData}
                 setAccelerationFormData={setAccelerationFormData}
                 resetFlyout={resetFlyout}
+                refreshHandler={refreshHandler}
               />
             </EuiFlexItem>
           </EuiFlexGroup>

diff --git a/...ts/manage/accelerations/create_accelerations_flyout/create/create_acceleration_button.tsx b/...ts/manage/accelerations/create_accelerations_flyout/create/create_acceleration_button.tsx
@@ -20,12 +20,14 @@ interface CreateAccelerationButtonProps {
   accelerationFormData: CreateAccelerationForm;
   setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
   resetFlyout: () => void;
+  refreshHandler?: () => void;
 }
 
 export const CreateAccelerationButton = ({
   accelerationFormData,
   setAccelerationFormData,
   resetFlyout,
+  refreshHandler,
 }: CreateAccelerationButtonProps) => {
   const { setToast } = useToast();
   const { loadStatus: directqueryLoadStatus, startLoading: startDirectQuery } = useDirectQuery();
@@ -53,6 +55,7 @@ export const CreateAccelerationButton = ({
     if (status === DirectQueryLoadingStatus.SUCCESS) {
       setIsLoading(false);
       setToast('Create acceleration query submitted successfully!', 'success');
+      if (refreshHandler) refreshHandler();
       resetFlyout();
     } else if (
       status === DirectQueryLoadingStatus.FAILED ||

diff --git a/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx b/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx
@@ -16,8 +16,8 @@ export const ACC_PANEL_TITLE = 'Accelerations';
 export const ACC_PANEL_DESC =
   'Accelerations optimize query performance by indexing external data into OpenSearch.';
 export const ACC_LOADING_MSG = 'Loading/Refreshing accelerations...';
-export const ACC_DELETE_MSG =
-  'The acceleration will be deleted. User will no longer be able to view from this acceleration. By default data will be retained in the associated index.';
+export const ACC_DELETE_MSG = (name: string) =>
+  `Are you sure you want to delete ${name}? Any accelerations associated with this data source will also be deleted.This action cannot be undone.`;
 export const ACC_VACUUM_MSG =
   'Vacuuming will remove the actual data from the disk since the associated index will be removed from the cluster. To confirm your action, type the name of the acceleration below.';
 export const ACC_SYNC_MSG = 'Syncing data may require querying all data. Do you want to continue?';
@@ -88,13 +88,25 @@ export const generateAccelerationOperationQuery = (
 export const CreateAccelerationFlyoutButton = ({
   dataSourceName,
   renderCreateAccelerationFlyout,
+  handleRefresh,
 }: {
   dataSourceName: string;
-  renderCreateAccelerationFlyout: (dataSourceName: string) => void;
+  renderCreateAccelerationFlyout: (
+    dataSource: string,
+    databaseName?: string,
+    tableName?: string,
+    handleRefresh?: () => void
+  ) => void;
+  handleRefresh: () => void;
 }) => {
   return (
     <>
-      <EuiButton onClick={() => renderCreateAccelerationFlyout(dataSourceName)} fill>
+      <EuiButton
+        onClick={() =>
+          renderCreateAccelerationFlyout(dataSourceName, undefined, undefined, handleRefresh)
+        }
+        fill
+      >
         Create acceleration
       </EuiButton>
     </>

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
@@ -48,6 +48,7 @@ import { DATA_SOURCE_TYPES } from '../../../../../../common/constants/data_sourc
 import { useLoadTableColumnsToCache } from '../../../../../../public/framework/catalog_cache/cache_loader';
 import { CatalogCacheManager } from '../../../../../../public/framework/catalog_cache/cache_manager';
 import { DirectQueryLoadingStatus } from '../../../../../../common/types/explorer';
+import { useToast } from '../../../../../../public/components/common/toast';
 
 export interface AssociatedObjectsFlyoutProps {
   tableDetail: AssociatedObject;
@@ -65,9 +66,9 @@ export const AssociatedObjectsDetailsFlyout = ({
   const { loadStatus, startLoading } = useLoadTableColumnsToCache();
   const [tableColumns, setTableColumns] = useState<CachedColumn[] | undefined>([]);
   const [schemaData, setSchemaData] = useState<any>([]);
+  const { setToast } = useToast();
 
   const DiscoverButton = () => {
-    // TODO: display button if can be sent to discover
     return (
       <EuiButtonEmpty
         onClick={() => {
@@ -90,7 +91,12 @@ export const AssociatedObjectsDetailsFlyout = ({
     return (
       <EuiButtonEmpty
         onClick={() =>
-          renderCreateAccelerationFlyout(datasourceName, tableDetail.database, tableDetail.name)
+          renderCreateAccelerationFlyout(
+            datasourceName,
+            tableDetail.database,
+            tableDetail.name,
+            handleRefresh
+          )
         }
       >
         <EuiIcon type={'bolt'} size="m" />
@@ -185,7 +191,12 @@ export const AssociatedObjectsDetailsFlyout = ({
           color="primary"
           fill
           onClick={() =>
-            renderCreateAccelerationFlyout(datasourceName, tableDetail.database, tableDetail.name)
+            renderCreateAccelerationFlyout(
+              datasourceName,
+              tableDetail.database,
+              tableDetail.name,
+              handleRefresh
+            )
           }
           iconType="popout"
           iconSide="left"
@@ -223,12 +234,18 @@ export const AssociatedObjectsDetailsFlyout = ({
 
   useEffect(() => {
     if (loadStatus.toLowerCase() === DirectQueryLoadingStatus.SUCCESS) {
-      const columns = CatalogCacheManager.getTable(
-        datasourceName,
-        tableDetail.database,
-        tableDetail.name
-      ).columns;
-      setTableColumns(columns);
+      let columns;
+      try {
+        columns = CatalogCacheManager.getTable(
+          datasourceName,
+          tableDetail.database,
+          tableDetail.name
+        ).columns;
+        setTableColumns(columns);
+      } catch (error) {
+        console.error(error);
+        setToast('Your cache is outdated, refresh databases and tables', 'warning');
+      }
     }
   }, [loadStatus]);
 

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
@@ -15,6 +15,7 @@ import {
   EuiSelectable,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
+import { useToast } from '../../../../../../public/components/common/toast';
 import { ACCELERATION_INDEX_TYPES } from '../../../../../../common/constants/data_sources';
 import {
   AssociatedObject,
@@ -65,6 +66,7 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
   const [isFirstTimeLoading, setIsFirstTimeLoading] = useState<boolean>(true);
   const [databasesLoadFailed, setDatabasesLoadFailed] = useState<boolean>(false);
   const [associatedObjectsLoadFailed, setAssociatedObjectsLoadFailed] = useState<boolean>(false);
+  const { setToast } = useToast();
 
   const {
     databasesLoadStatus,
@@ -150,6 +152,7 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
           <CreateAccelerationFlyoutButton
             dataSourceName={datasource.name}
             renderCreateAccelerationFlyout={renderCreateAccelerationFlyout}
+            handleRefresh={onRefreshButtonClick}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -206,7 +209,14 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
   // Load tables and accelerations if empty or retrieve from cache if not
   useEffect(() => {
     if (datasource.name && selectedDatabase) {
-      const databaseCache = CatalogCacheManager.getDatabase(datasource.name, selectedDatabase);
+      let databaseCache;
+      try {
+        databaseCache = CatalogCacheManager.getDatabase(datasource.name, selectedDatabase);
+      } catch (error) {
+        console.error(error);
+        setToast('Your cache is outdated, refresh databases and tables', 'warning');
+        return;
+      }
       const accelerationsCache = CatalogCacheManager.getOrCreateAccelerationsByDataSource(
         datasource.name
       );
@@ -238,7 +248,14 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
   useEffect(() => {
     if (datasource.name && selectedDatabase) {
       const tablesStatus = tablesLoadStatus.toLowerCase();
-      const databaseCache = CatalogCacheManager.getDatabase(datasource.name, selectedDatabase);
+      let databaseCache;
+      try {
+        databaseCache = CatalogCacheManager.getDatabase(datasource.name, selectedDatabase);
+      } catch (error) {
+        console.error(error);
+        setToast('Your cache is outdated, refresh databases and tables', 'warning');
+        return;
+      }
       const accelerationsStatus = accelerationsLoadStatus.toLowerCase();
       const accelerationsCache = CatalogCacheManager.getOrCreateAccelerationsByDataSource(
         datasource.name
@@ -319,7 +336,12 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
         database: acceleration.database,
         type: ACCELERATION_INDEX_TYPES.find((accelType) => accelType.value === acceleration.type)!
           .value as AssociatedObjectIndexType,
-        accelerations: [],
+        accelerations:
+          acceleration.type === 'covering' || acceleration.type === 'skipping'
+            ? tableObjects.find(
+                (tableObject: AssociatedObject) => tableObject.name === acceleration.table
+              )
+            : [],
         columns: undefined,
       }));
     setAssociatedObjects([...tableObjects, ...accelerationObjects]);
@@ -379,6 +401,7 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
                             datasourceName={datasource.name}
                             associatedObjects={associatedObjects}
                             cachedAccelerations={cachedAccelerations}
+                            handleRefresh={onRefreshButtonClick}
                           />
                         ) : (
                           <AssociatedObjectsTabEmpty cacheType="tables" />

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
@@ -10,7 +10,6 @@ import {
   EuiLink,
   SearchFilterConfig,
   EuiTableFieldDataColumnType,
-  EuiButtonEmpty,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import {
@@ -39,6 +38,7 @@ interface AssociatedObjectsTableProps {
   datasourceName: string;
   associatedObjects: AssociatedObject[];
   cachedAccelerations: CachedAcceleration[];
+  handleRefresh: () => void;
 }
 
 interface FilterOption {
@@ -54,7 +54,7 @@ interface AssociatedTableFilter {
 }
 
 export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
-  const { datasourceName, associatedObjects, cachedAccelerations } = props;
+  const { datasourceName, associatedObjects, cachedAccelerations, handleRefresh } = props;
   const [accelerationFilterOptions, setAccelerationFilterOptions] = useState<FilterOption[]>([]);
   const [filteredObjects, setFilteredObjects] = useState<AssociatedObject[]>([]);
 
@@ -70,7 +70,7 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
         <EuiLink
           onClick={() => {
             if (item.type === 'table') {
-              renderAssociatedObjectsDetailsFlyout(item, datasourceName);
+              renderAssociatedObjectsDetailsFlyout(item, datasourceName, handleRefresh);
             } else {
               const acceleration = cachedAccelerations.find((acc) => acc.indexName === item.id);
               if (acceleration) {
@@ -97,34 +97,45 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
     {
       field: 'accelerations',
       name: i18n.translate('datasources.associatedObjectsTab.column.accelerations', {
-        defaultMessage: 'Accelerations',
+        defaultMessage: 'Associations',
       }),
       sortable: true,
-      render: (accelerations: CachedAcceleration[], obj: AssociatedObject) => {
-        if (accelerations.length === 0) {
-          return '-';
-        } else if (accelerations.length === 1) {
-          const name = getAccelerationName(accelerations[0]);
+      render: (accelerations: CachedAcceleration[] | AssociatedObject, obj: AssociatedObject) => {
+        if (Array.isArray(accelerations)) {
+          if (accelerations.length === 0) {
+            return '-';
+          } else if (accelerations.length === 1) {
+            const name = getAccelerationName(accelerations[0]);
+            return (
+              <EuiLink
+                onClick={() =>
+                  renderAccelerationDetailsFlyout(accelerations[0], datasourceName, handleRefresh)
+                }
+              >
+                {name}
+              </EuiLink>
+            );
+          }
           return (
             <EuiLink
-              onClick={() => {
-                renderAccelerationDetailsFlyout(accelerations[0], datasourceName);
-              }}
+              onClick={() =>
+                renderAssociatedObjectsDetailsFlyout(obj, datasourceName, handleRefresh)
+              }
+            >
+              View all {accelerations.length}
+            </EuiLink>
+          );
+        } else {
+          return (
+            <EuiLink
+              onClick={() =>
+                renderAssociatedObjectsDetailsFlyout(accelerations, datasourceName, handleRefresh)
+              }
             >
-              {name}
+              {accelerations.name}
             </EuiLink>
           );
         }
-        return (
-          <EuiButtonEmpty
-            onClick={() => {
-              renderAssociatedObjectsDetailsFlyout(obj, datasourceName);
-            }}
-            size="xs"
-          >
-            View all {accelerations.length}
-          </EuiButtonEmpty>
-        );
       },
     },
     {
@@ -175,7 +186,7 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
           icon: 'bolt',
           available: (item: AssociatedObject) => item.type === 'table',
           onClick: (item: AssociatedObject) =>
-            renderCreateAccelerationFlyout(datasourceName, item.database, item.name),
+            renderCreateAccelerationFlyout(datasourceName, item.database, item.name, handleRefresh),
         },
       ],
     },
@@ -196,10 +207,7 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => {
       return clauses.some((clause) => {
         if (clause.field !== ASSC_OBJ_TABLE_ACC_COLUMN_NAME) {
           return associatedObject[clause.field] === clause.value;
-        } else if (
-          clause.field === ASSC_OBJ_TABLE_ACC_COLUMN_NAME &&
-          Array.isArray(associatedObject.accelerations)
-        ) {
+        } else if (clause.field === ASSC_OBJ_TABLE_ACC_COLUMN_NAME) {
           return associatedObject.type !== 'table' && associatedObject.name === clause.value;
         }