Data Sources component Improvements and bug fixes (opensearch-project…

…#1551) * linking create accelerations flyouts, loading columns Signed-off-by: Sean Li <[email protected]> * rebasing with main, updating types, and fixing refresh accelerations Signed-off-by: Sean Li <[email protected]> * removing comments and console.logs Signed-off-by: Sean Li <[email protected]> --------- Signed-off-by: Sean Li <[email protected]>
amsiglan · Mar 18, 2024 · 26e8610 · 26e8610
1 parent 94f7b34
commit 26e8610
Show file tree

Hide file tree

Showing 14 changed files with 206 additions and 132 deletions.
diff --git a/common/types/data_connections.ts b/common/types/data_connections.ts
@@ -39,8 +39,8 @@ export interface AssociatedObject {
   name: string;
   database: string;
   type: AccelerationIndexType | 'table';
-  accelerations: Acceleration[];
-  columns?: TableColumn[];
+  accelerations: CachedAcceleration[];
+  columns?: CachedColumn[];
 }
 
 export type Role = EuiComboBoxOptionOption;

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
@@ -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}
                             >

diff --git a/public/components/datasources/components/__tests__/acceleration_table.test.tsx b/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', () => {

diff --git a/public/components/datasources/components/__tests__/associated_objects_flyout.test.tsx b/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)

diff --git a/public/components/datasources/components/__tests__/associated_objects_tab.test.tsx b/public/components/datasources/components/__tests__/associated_objects_tab.test.tsx
@@ -21,6 +21,7 @@ import { DirectQueryLoadingStatus } from '../../../../../common/types/explorer';
 jest.mock('../../../../plugin', () => ({
   getRenderAccelerationDetailsFlyout: jest.fn(() => jest.fn()),
   getRenderAssociatedObjectsDetailsFlyout: jest.fn(() => jest.fn()),
+  getRenderCreateAccelerationFlyout: jest.fn(() => jest.fn()),
 }));
 
 describe('AssociatedObjectsTab Component', () => {

diff --git a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx
@@ -25,7 +25,10 @@ import {
 } 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,
@@ -118,11 +121,9 @@ export const AccelerationTable = ({
   };
 
   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 @@ export const AccelerationTable = ({
       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}
@@ -299,6 +296,7 @@ export const AccelerationTable = ({
   };
 
   const renderAccelerationDetailsFlyout = getRenderAccelerationDetailsFlyout();
+  const renderCreateAccelerationFlyout = getRenderCreateAccelerationFlyout();
 
   return (
     <>

diff --git a/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx b/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx
@@ -17,13 +17,10 @@ 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 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, '_')
   );
 };