Data Sources component Improvements and bug fixes

common/types/data_connections.ts

@@ -39,8 +39,8 @@
   name: string;
   database: string;
   type: AccelerationIndexType | 'table';
-  accelerations: Acceleration[];
-  columns?: TableColumn[];
+  accelerations: CachedAcceleration[];
+  columns?: CachedColumn[];
 }
 
 export type Role = EuiComboBoxOptionOption;
@@ -70,7 +70,7 @@
 interface AsyncApiDataResponse {
   status: string;
   schema?: Array<{ name: string; type: string }>;
   datarows?: any;
   total?: number;
   size?: number;
   error?: string;

public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap

@@ -691,6 +691,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                     ]
                   }
                   data-test-subj="associatedObjectsTable"
+                  hasActions={true}
                   items={
                     Array [
                       Object {
@@ -773,7 +774,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                     Object {
                       "box": Object {
                         "incremental": true,
-                        "placeholder": "database:database_1 database: database_2 accelerations:skipping_index_1",
+                        "placeholder": "accelerations:skipping_index_1",
                         "schema": Object {
                           "fields": Object {
                             "database": Object {
@@ -815,14 +816,14 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                       },
                     }
                   }
-                  tableLayout="fixed"
+                  tableLayout="auto"
                 >
                   <div>
                     <EuiSearchBar
                       box={
                         Object {
                           "incremental": true,
-                          "placeholder": "database:database_1 database: database_2 accelerations:skipping_index_1",
+                          "placeholder": "accelerations:skipping_index_1",
                           "schema": Object {
                             "fields": Object {
                               "database": Object {
@@ -877,7 +878,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                                 incremental={true}
                                 isInvalid={false}
                                 onSearch={[Function]}
-                                placeholder="database:database_1 database: database_2 accelerations:skipping_index_1"
+                                placeholder="accelerations:skipping_index_1"
                                 query=""
                               >
                                 <EuiFieldSearch
@@ -891,7 +892,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                                   isInvalid={false}
                                   isLoading={false}
                                   onSearch={[Function]}
-                                  placeholder="database:database_1 database: database_2 accelerations:skipping_index_1"
+                                  placeholder="accelerations:skipping_index_1"
                                 >
                                   <EuiFormControlLayout
                                     compressed={false}
@@ -913,7 +914,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                                             className="euiFieldSearch euiFieldSearch--fullWidth"
                                             defaultValue=""
                                             onKeyUp={[Function]}
-                                            placeholder="database:database_1 database: database_2 accelerations:skipping_index_1"
+                                            placeholder="accelerations:skipping_index_1"
                                             type="search"
                                           />
                                         </EuiValidatableControl>
@@ -1253,6 +1254,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                         ]
                       }
                       data-test-subj="associatedObjectsTable"
+                      hasActions={true}
                       items={
                         Array [
                           Object {
@@ -1345,7 +1347,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                           },
                         }
                       }
-                      tableLayout="fixed"
+                      tableLayout="auto"
                     >
                       <div
                         className="euiBasicTable"
@@ -1528,10 +1530,10 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                           <EuiTable
                             id="random_html_id"
                             responsive={true}
-                            tableLayout="fixed"
+                            tableLayout="auto"
                           >
                             <table
-                              className="euiTable euiTable--responsive"
+                              className="euiTable euiTable--responsive euiTable--auto"
                               id="random_html_id"
                               tabIndex={-1}
                             >

public/components/datasources/components/__tests__/acceleration_table.test.tsx

@@ -80,6 +80,7 @@ jest.mock('../../../../framework/catalog_cache/cache_loader', () => ({
 
 jest.mock('../../../../plugin', () => ({
   getRenderAccelerationDetailsFlyout: jest.fn(() => jest.fn()),
+  getRenderCreateAccelerationFlyout: jest.fn(() => jest.fn()),
 }));
 
 describe('AccelerationTable Component', () => {

public/components/datasources/components/__tests__/associated_objects_flyout.test.tsx

@@ -10,12 +10,14 @@ import { AssociatedObjectsDetailsFlyout } from '../manage/associated_objects/ass
 import * as plugin from '../../../../plugin';
 import { act } from '@testing-library/react';
 import { mockAssociatedObjects } from '../../../../../test/datasources';
+import { getAccelerationName } from '../manage/accelerations/utils/acceleration_utils';
 
 configure({ adapter: new Adapter() });
 
 jest.mock('../../../../plugin', () => ({
   getRenderAccelerationDetailsFlyout: jest.fn(() => jest.fn()),
   getRenderAssociatedObjectsDetailsFlyout: jest.fn(() => jest.fn()),
+  getRenderCreateAccelerationFlyout: jest.fn(() => jest.fn()),
 }));
 
 describe('AssociatedObjectsDetailsFlyout Integration Tests', () => {
@@ -26,7 +28,9 @@ describe('AssociatedObjectsDetailsFlyout Integration Tests', () => {
   });
 
   it('renders acceleration details correctly and triggers flyout on click', () => {
-    const wrapper = mount(<AssociatedObjectsDetailsFlyout tableDetail={mockTableDetail} />);
+    const wrapper = mount(
+      <AssociatedObjectsDetailsFlyout tableDetail={mockTableDetail} datasourceName="flint_s3" />
+    );
     expect(wrapper.find('EuiInMemoryTable').at(0).find('EuiLink').length).toBeGreaterThan(0);
 
     wrapper.find('EuiInMemoryTable').at(0).find('EuiLink').first().simulate('click');
@@ -38,13 +42,16 @@ describe('AssociatedObjectsDetailsFlyout Integration Tests', () => {
       ...mockTableDetail,
       accelerations: [],
       columns: [
-        { name: 'column1', dataType: 'string' },
-        { name: 'column2', dataType: 'number' },
+        { fieldName: 'column1', dataType: 'string' },
+        { fieldName: 'column2', dataType: 'number' },
       ],
     };
 
     const wrapper = mount(
-      <AssociatedObjectsDetailsFlyout tableDetail={mockDetailNoAccelerations} />
+      <AssociatedObjectsDetailsFlyout
+        tableDetail={mockDetailNoAccelerations}
+        datasourceName="flint_s3"
+      />
     );
 
     expect(wrapper.text()).toContain('You have no accelerations');
@@ -54,24 +61,28 @@ describe('AssociatedObjectsDetailsFlyout Integration Tests', () => {
   });
 
   it('renders schema table correctly with column data', () => {
-    const wrapper = mount(<AssociatedObjectsDetailsFlyout tableDetail={mockTableDetail} />);
+    const wrapper = mount(
+      <AssociatedObjectsDetailsFlyout tableDetail={mockTableDetail} datasourceName="flint_s3" />
+    );
 
     expect(wrapper.find('EuiInMemoryTable').at(1).exists()).toBe(true);
     expect(wrapper.find('EuiInMemoryTable').at(1).text()).toContain(
-      mockTableDetail.columns[0].name
+      mockTableDetail.columns[0].fieldName
     );
   });
 
   it('triggers details flyout on acceleration link click', async () => {
-    const wrapper = mount(<AssociatedObjectsDetailsFlyout tableDetail={mockTableDetail} />);
+    const wrapper = mount(
+      <AssociatedObjectsDetailsFlyout tableDetail={mockTableDetail} datasourceName="flint_s3" />
+    );
 
     await act(async () => {
       // Wait a tick for async updates
       await new Promise((resolve) => setTimeout(resolve, 0));
       wrapper.update();
     });
 
-    const accName = mockTableDetail.accelerations[0]?.name;
+    const accName = getAccelerationName(mockTableDetail.accelerations[0], 'flint_s3');
     const accLink = wrapper
       .find('EuiLink')
       .findWhere((node) => node.text() === accName)

public/components/datasources/components/__tests__/associated_objects_tab.test.tsx

@@ -21,6 +21,7 @@
 jest.mock('../../../../plugin', () => ({
   getRenderAccelerationDetailsFlyout: jest.fn(() => jest.fn()),
   getRenderAssociatedObjectsDetailsFlyout: jest.fn(() => jest.fn()),
+  getRenderCreateAccelerationFlyout: jest.fn(() => jest.fn()),
 }));
 
 describe('AssociatedObjectsTab Component', () => {
@@ -37,7 +38,7 @@
 
   beforeAll(() => {
     const originalDate = Date;
     global.Date = jest.fn(() => new originalDate('2024-03-14T12:00:00Z')) as any;
 
     global.Date.UTC = originalDate.UTC;
     global.Date.parse = originalDate.parse;

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

@@ -25,7 +25,10 @@
 } from '../../../../../../common/types/data_connections';
 import { DirectQueryLoadingStatus } from '../../../../../../common/types/explorer';
 import { isCatalogCacheFetching } from '../associated_objects/utils/associated_objects_tab_utils';
-import { getRenderAccelerationDetailsFlyout } from '../../../../../plugin';
+import {
+  getRenderAccelerationDetailsFlyout,
+  getRenderCreateAccelerationFlyout,
+} from '../../../../../plugin';
 import {
   ACC_LOADING_MSG,
   ACC_PANEL_DESC,
@@ -40,7 +43,7 @@
 
 interface AccelerationTableProps {
   dataSourceName: string;
   cacheLoadingHooks: any;
 }
 
 export const AccelerationTable = ({
@@ -77,7 +80,7 @@
       setAccelerations(cachedDataSource.accelerations);
       setUpdatedTime(cachedDataSource.lastUpdated);
     }
   }, []);
 
   useEffect(() => {
     if (accelerationsLoadStatus === DirectQueryLoadingStatus.SUCCESS) {
@@ -93,7 +96,7 @@
       setIsRefreshing(false);
       console.log('Refresh process is failed.');
     }
   }, [accelerationsLoadStatus]);
 
   const handleRefresh = () => {
     console.log('Initiating refresh...');
@@ -118,11 +121,9 @@
   };
 
   const CreateButton = () => {
-    // TODO: Create button should call create_acceleration.tsx, which will be brought
-    // over from dashboards-query-workbench/public/components/acceleration/create/create_accelerations.tsx
     return (
       <>
-        <EuiButton onClick={() => console.log('clicked on create accelerations button')} fill>
+        <EuiButton onClick={() => renderCreateAccelerationFlyout(dataSourceName)} fill>
           Create acceleration
         </EuiButton>
       </>
@@ -204,16 +205,12 @@
       name: 'Name',
       sortable: true,
       render: (indexName: string, acceleration: CachedAcceleration) => {
-        const displayName = getAccelerationName(indexName, acceleration, dataSourceName);
+        const displayName = getAccelerationName(acceleration, dataSourceName);
         return (
           <EuiLink
             onClick={() => {
               console.log(displayName);
-              renderAccelerationDetailsFlyout({
-                index: displayName,
-                acceleration,
-                dataSourceName,
-              });
+              renderAccelerationDetailsFlyout(displayName, acceleration, dataSourceName);
             }}
           >
             {displayName}
@@ -284,7 +281,7 @@
       name: 'Actions',
       actions: tableActions,
     },
   ] as Array<EuiBasicTableColumn<any>>;
 
   const pagination = {
     initialPageSize: 10,
@@ -299,6 +296,7 @@
   };
 
   const renderAccelerationDetailsFlyout = getRenderAccelerationDetailsFlyout();
+  const renderCreateAccelerationFlyout = getRenderCreateAccelerationFlyout();
 
   return (
     <>

public/components/datasources/components/manage/accelerations/flyout_modules/accelerations_schema_tab.tsx

@@ -12,6 +12,8 @@
 }
 
 export const AccelerationSchemaTab = ({ mappings, indexInfo }: AccelerationSchemaTabProps) => {
+  console.log('mappings', mappings);
+  console.log('indexInfo', indexInfo);
   const indexName = indexInfo.data[0]?.index;
   const indexData = mappings.data[indexName]?.mappings._meta?.indexedColumns;
   const indexType = mappings.data[indexName]?.mappings._meta?.kind;
@@ -33,7 +35,7 @@
       field: 'data_type',
       name: 'Data type',
     },
   ] as Array<EuiTableFieldDataColumnType<any>>;
 
   if (isSkippingIndex) {
     columns.push({

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

@@ -17,13 +17,10 @@
   'Accelerations optimize query performance by indexing external data into OpenSearch.';
 export const ACC_LOADING_MSG = 'Loading/Refreshing accelerations...';
 
-export const getAccelerationName = (
-  indexName: string,
-  acceleration: CachedAcceleration,
-  datasource: string
-) => {
+export const getAccelerationName = (acceleration: CachedAcceleration, datasource: string) => {
   return (
-    indexName || `${datasource}_${acceleration.database}_${acceleration.table}`.replace(/\s+/g, '_')
+    acceleration.indexName ||
+    `${datasource}_${acceleration.database}_${acceleration.table}`.replace(/\s+/g, '_')
   );
 };
 
@@ -80,7 +77,7 @@
   return 'inputOutput';
 };
 
 export const onRefreshButtonClick = (acceleration: any) => {
   // TODO: send request to refresh
   console.log('refreshing', acceleration.name);
 };
@@ -100,7 +97,7 @@
   }
 };
 
 export const onDeleteButtonClick = (acceleration: any) => {
   // TODO: delete acceleration
   console.log('deleting', acceleration.name);
 };