Bug fixes and UI updates for datasources

common/types/data_connections.ts

@@ -41,7 +41,7 @@
   name: string;
   database: string;
   type: AssociatedObjectIndexType;
-  accelerations: CachedAcceleration[];
+  accelerations: CachedAcceleration[] | AssociatedObject;
   columns?: CachedColumn[];
 }
 
@@ -72,7 +72,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_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':

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

@@ -42,7 +42,7 @@
 
 interface AccelerationTableProps {
   dataSourceName: string;
   cacheLoadingHooks: any;
 }
 
 interface ModalState {
@@ -73,7 +73,7 @@
     if (operationSuccess) {
       handleRefresh();
     }
   }, [operationSuccess]);
 
   const handleActionClick = (
     actionType: ModalState['actionType'],
@@ -113,7 +113,7 @@
       setAccelerations(cachedDataSource.accelerations);
       setUpdatedTime(cachedDataSource.lastUpdated);
     }
   }, []);
 
   useEffect(() => {
     if (accelerationsLoadStatus === DirectQueryLoadingStatus.SUCCESS) {
@@ -127,14 +127,14 @@
     if (accelerationsLoadStatus === DirectQueryLoadingStatus.FAILED) {
       setIsRefreshing(false);
     }
   }, [accelerationsLoadStatus]);
 
   const handleRefresh = useCallback(() => {
     if (!isCatalogCacheFetching(accelerationsLoadStatus)) {
       setIsRefreshing(true);
       startLoadingAccelerations(dataSourceName);
     }
   }, [accelerationsLoadStatus]);
 
   const RefreshButton = () => {
     return (
@@ -168,6 +168,7 @@
                 <CreateAccelerationFlyoutButton
                   dataSourceName={dataSourceName}
                   renderCreateAccelerationFlyout={renderCreateAccelerationFlyout}
+                  handleRefresh={handleRefresh}
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
@@ -314,7 +315,7 @@
       name: 'Actions',
       actions: tableActions,
     },
   ] as Array<EuiTableFieldDataColumnType<any>>;
 
   const pagination = {
     initialPageSize: 10,

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx

@@ -52,6 +52,7 @@
   resetFlyout,
   databaseName,
   tableName,
+  refreshHandler,
 }: CreateAccelerationProps) => {
   const { setToast } = useToast();
   const http = coreRefs!.http;
@@ -161,7 +162,7 @@
         accelerationFormData.dataTable
       );
     }
   }, [databaseName, tableName]);
 
   useEffect(() => {
     const status = loadStatus.toLowerCase();
@@ -186,13 +187,13 @@
     ) {
       setTableFieldsLoading(false);
     }
   }, [loadStatus]);
 
   useEffect(() => {
     return () => {
       stopLoadingTableFields();
     };
   }, []);
 
   const dataSourcesPreselected = databaseName !== undefined && tableName !== undefined;
 
@@ -259,6 +260,7 @@
                 accelerationFormData={accelerationFormData}
                 setAccelerationFormData={setAccelerationFormData}
                 resetFlyout={resetFlyout}
+                refreshHandler={refreshHandler}
               />
             </EuiFlexItem>
           </EuiFlexGroup>

public/components/datasources/components/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 ||

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>
     </>

public/components/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]);
 

public/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" />

public/components/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;
         }