From 87e926efcc2b61d353055e3f14f126398b6f9c89 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Sun, 17 Mar 2024 02:26:29 -0700 Subject: [PATCH] linking create accelerations flyouts, loading columns Signed-off-by: Sean Li --- common/types/data_connections.ts | 4 +- .../associated_objects_tab.test.tsx.snap | 540 +++++++++++++++++- .../__tests__/acceleration_table.test.tsx | 1 + .../associated_objects_flyout.test.tsx | 27 +- .../__tests__/associated_objects_tab.test.tsx | 1 + .../accelerations/acceleration_table.tsx | 12 +- .../utils/acceleration_utils.tsx | 9 +- .../associated_objects_details_flyout.tsx | 110 +++- .../associated_objects_tab.tsx | 9 +- .../modules/associated_objects_table.tsx | 77 ++- .../utils/associated_objects_tab_utils.tsx | 3 +- public/plugin.tsx | 28 +- test/datasources.ts | 8 +- 13 files changed, 728 insertions(+), 101 deletions(-) diff --git a/common/types/data_connections.ts b/common/types/data_connections.ts index 62b48bad97..76c2ccde47 100644 --- a/common/types/data_connections.ts +++ b/common/types/data_connections.ts @@ -39,8 +39,8 @@ export interface AssociatedObject { name: string; database: string; type: string; - accelerations: Acceleration[]; - columns?: TableColumn[]; + accelerations: CachedAcceleration[]; + columns?: CachedColumn[]; } export type Role = EuiComboBoxOptionOption; diff --git a/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap index 392c0728a9..18cab7a249 100644 --- a/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap +++ b/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap @@ -690,6 +690,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ] } data-test-subj="associatedObjectsTable" + hasActions={true} items={ Array [ Object { @@ -772,7 +773,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 { @@ -814,14 +815,14 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object }, } } - tableLayout="fixed" + tableLayout="auto" >
@@ -1251,6 +1252,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object ] } data-test-subj="associatedObjectsTable" + hasActions={true} items={ Array [ Object { @@ -1343,7 +1345,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object }, } } - tableLayout="fixed" + tableLayout="auto" >
@@ -2656,6 +2658,14 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object "onClick": [Function], "type": "icon", }, + Object { + "available": [Function], + "description": "Accelerate this object", + "icon": "bolt", + "name": "Accelerate", + "onClick": [Function], + "type": "icon", + }, ] } className="euiTableCellContent__hoverItem" @@ -2768,6 +2778,102 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object + + + + + + + + + Accelerate + + + + + @@ -2961,6 +3067,14 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object "onClick": [Function], "type": "icon", }, + Object { + "available": [Function], + "description": "Accelerate this object", + "icon": "bolt", + "name": "Accelerate", + "onClick": [Function], + "type": "icon", + }, ] } className="euiTableCellContent__hoverItem" @@ -3073,6 +3187,102 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object + + + + + + + + + Accelerate + + + + + @@ -3266,6 +3476,14 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object "onClick": [Function], "type": "icon", }, + Object { + "available": [Function], + "description": "Accelerate this object", + "icon": "bolt", + "name": "Accelerate", + "onClick": [Function], + "type": "icon", + }, ] } className="euiTableCellContent__hoverItem" @@ -3378,6 +3596,102 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object + + + + + + + + + Accelerate + + + + + @@ -3571,6 +3885,14 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object "onClick": [Function], "type": "icon", }, + Object { + "available": [Function], + "description": "Accelerate this object", + "icon": "bolt", + "name": "Accelerate", + "onClick": [Function], + "type": "icon", + }, ] } className="euiTableCellContent__hoverItem" @@ -3683,6 +4005,102 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object + + + + + + + + + Accelerate + + + + + @@ -3876,6 +4294,14 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object "onClick": [Function], "type": "icon", }, + Object { + "available": [Function], + "description": "Accelerate this object", + "icon": "bolt", + "name": "Accelerate", + "onClick": [Function], + "type": "icon", + }, ] } className="euiTableCellContent__hoverItem" @@ -3988,6 +4414,102 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object + + + + + + + + + Accelerate + + + + + diff --git a/public/components/datasources/components/__tests__/acceleration_table.test.tsx b/public/components/datasources/components/__tests__/acceleration_table.test.tsx index a8f8516397..8c8ef6eabc 100644 --- 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 index 713cc363a6..a561452557 100644 --- 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(); + const wrapper = mount( + + ); 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( - + ); expect(wrapper.text()).toContain('You have no accelerations'); @@ -54,16 +61,20 @@ describe('AssociatedObjectsDetailsFlyout Integration Tests', () => { }); it('renders schema table correctly with column data', () => { - const wrapper = mount(); + const wrapper = mount( + + ); 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(); + const wrapper = mount( + + ); await act(async () => { // Wait a tick for async updates @@ -71,7 +82,7 @@ describe('AssociatedObjectsDetailsFlyout Integration Tests', () => { 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 index e553a5fc81..956e7a8cb9 100644 --- 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 index 7069256044..6dbc33a8e4 100644 --- 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 ( <> - console.log('clicked on create accelerations button')} fill> + renderCreateAccelerationFlyout(dataSourceName)} fill> Create acceleration @@ -202,7 +203,7 @@ export const AccelerationTable = ({ name: 'Name', sortable: true, render: (indexName: string, acceleration: CachedAcceleration) => { - const displayName = getAccelerationName(indexName, acceleration, dataSourceName); + const displayName = getAccelerationName(acceleration, dataSourceName); return ( { @@ -297,6 +298,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 index acc8379eec..77d052dc0d 100644 --- a/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx +++ b/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx @@ -12,13 +12,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, '_') ); }; diff --git a/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx b/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx index 7a03e46961..57d0b2c8b2 100644 --- a/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx +++ b/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { EuiFlyoutBody, EuiFlyoutHeader, @@ -24,26 +24,43 @@ import { EuiButton, EuiEmptyPrompt, } from '@elastic/eui'; -import { AssociatedObject } from 'common/types/data_connections'; import { i18n } from '@osd/i18n'; import { - onAccelerateButtonClick, - onDeleteButtonClick, + AssociatedObject, + CachedAcceleration, + CachedColumn, +} from '../../../../../../common/types/data_connections'; +import { + isCatalogCacheFetching, onDiscoverButtonClick, } from './utils/associated_objects_tab_utils'; -import { getRenderAccelerationDetailsFlyout } from '../../../../../plugin'; -import { AccelerationStatus } from '../accelerations/utils/acceleration_utils'; +import { + getRenderAccelerationDetailsFlyout, + getRenderCreateAccelerationFlyout, +} from '../../../../../plugin'; +import { AccelerationStatus, getAccelerationName } from '../accelerations/utils/acceleration_utils'; import { ACCE_NO_DATA_TITLE, ACCE_NO_DATA_DESCRIPTION, CREATE_ACCELERATION_DESCRIPTION, } from '../associated_objects/utils/associated_objects_tab_utils'; +import { useLoadTableColumnsToCache } from '../../../../../../public/framework/catalog_cache/cache_loader'; +import { CatalogCacheManager } from '../../../../../../public/framework/catalog_cache/cache_manager'; +import { DirectQueryLoadingStatus } from '../../../../../../common/types/explorer'; export interface AssociatedObjectsFlyoutProps { tableDetail: AssociatedObject; + datasourceName: string; } -export const AssociatedObjectsDetailsFlyout = ({ tableDetail }: AssociatedObjectsFlyoutProps) => { +export const AssociatedObjectsDetailsFlyout = ({ + tableDetail, + datasourceName, +}: AssociatedObjectsFlyoutProps) => { + const { loadStatus, startLoading } = useLoadTableColumnsToCache(); + const [tableColumns, setTableColumns] = useState([]); + const [schemaData, setSchemaData] = useState([]); + const DiscoverButton = () => { // TODO: display button if can be sent to discover return ( @@ -55,20 +72,16 @@ export const AssociatedObjectsDetailsFlyout = ({ tableDetail }: AssociatedObject const AccelerateButton = () => { return ( - + + renderCreateAccelerationFlyout(datasourceName, tableDetail.database, tableDetail.name) + } + > ); }; - const DeleteButton = () => { - return ( - - - - ); - }; - const DetailComponent = (detailProps: { title: string; description: any }) => { const { title, description } = detailProps; return ( @@ -108,21 +121,27 @@ export const AssociatedObjectsDetailsFlyout = ({ tableDetail }: AssociatedObject id: index, })); - const schemaData = tableDetail.columns - ? tableDetail.columns.map((column, index) => ({ - ...column, - id: index, - })) - : {}; - const accelerationColumns = [ { field: 'name', name: 'Name', 'data-test-subj': 'accelerationName', - render: (name: string, item: AssociatedObject) => ( - renderAccelerationDetailsFlyout(item)}>{name} - ), + render: (_: string, item: CachedAcceleration) => { + const name = getAccelerationName(item, datasourceName); + return ( + + renderAccelerationDetailsFlyout({ + index: name, + acceleration: item, + dataSourceName: datasourceName, + }) + } + > + {name} + + ); + }, }, { field: 'status', @@ -155,7 +174,9 @@ export const AssociatedObjectsDetailsFlyout = ({ tableDetail }: AssociatedObject window.open('https://example.com', '_blank')} + onClick={() => + renderCreateAccelerationFlyout(datasourceName, tableDetail.database, tableDetail.name) + } iconType="popout" iconSide="left" > @@ -182,6 +203,37 @@ export const AssociatedObjectsDetailsFlyout = ({ tableDetail }: AssociatedObject const renderAccelerationDetailsFlyout = getRenderAccelerationDetailsFlyout(); + useEffect(() => { + if (tableDetail && !tableDetail.columns) { + startLoading(datasourceName, tableDetail.database, tableDetail.name); + } else if (tableDetail && tableDetail.columns) { + setTableColumns(tableDetail.columns); + } + }, []); + + useEffect(() => { + if (loadStatus.toLowerCase() === DirectQueryLoadingStatus.SUCCESS) { + const columns = CatalogCacheManager.getTable( + datasourceName, + tableDetail.database, + tableDetail.name + ).columns; + setTableColumns(columns); + } + }, [loadStatus]); + + useEffect(() => { + setSchemaData( + tableColumns?.map((column, index) => ({ + name: column.fieldName, + dataType: column.dataType, + id: index, + })) + ); + }, [tableColumns]); + + const renderCreateAccelerationFlyout = getRenderCreateAccelerationFlyout(); + return ( <> @@ -197,9 +249,6 @@ export const AssociatedObjectsDetailsFlyout = ({ tableDetail }: AssociatedObject - - - @@ -225,6 +274,7 @@ export const AssociatedObjectsDetailsFlyout = ({ tableDetail }: AssociatedObject columns={schemaColumns} pagination={true} sorting={true} + loading={isCatalogCacheFetching(loadStatus)} /> diff --git a/public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx b/public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx index f39ce90f51..9085c815b0 100644 --- a/public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx +++ b/public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx @@ -264,8 +264,9 @@ export const AssociatedObjectsTab: React.FC = (props) name: table.name, database: selectedDatabase, type: 'table', - // Temporary dummy array - accelerations: [], + accelerations: cachedAccelerations.filter( + (acceleration) => acceleration.table === table.name + ), columns: table.columns, }; }); @@ -273,8 +274,8 @@ export const AssociatedObjectsTab: React.FC = (props) .filter((acceleration: CachedAcceleration) => acceleration.database === selectedDatabase) .map((acceleration: CachedAcceleration) => ({ datasource: datasource.name, - id: getAccelerationName(acceleration.indexName, acceleration, datasource.name), - name: getAccelerationName(acceleration.indexName, acceleration, datasource.name), + id: acceleration.indexName, + name: getAccelerationName(acceleration, datasource.name), database: acceleration.database, type: ACCELERATION_INDEX_TYPES.find((accelType) => accelType.value === acceleration.type)! .label, diff --git a/public/components/datasources/components/manage/associated_objects/modules/associated_objects_table.tsx b/public/components/datasources/components/manage/associated_objects/modules/associated_objects_table.tsx index ba74b5134f..1361fa87e0 100644 --- a/public/components/datasources/components/manage/associated_objects/modules/associated_objects_table.tsx +++ b/public/components/datasources/components/manage/associated_objects/modules/associated_objects_table.tsx @@ -10,6 +10,7 @@ import { EuiLink, SearchFilterConfig, EuiTableFieldDataColumnType, + EuiButtonEmpty, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; import { @@ -19,6 +20,7 @@ import { import { getRenderAccelerationDetailsFlyout, getRenderAssociatedObjectsDetailsFlyout, + getRenderCreateAccelerationFlyout, } from '../../../../../../plugin'; import { ASSC_OBJ_TABLE_ACC_COLUMN_NAME, @@ -62,21 +64,20 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { { if (item.type === 'table') { - renderAssociatedObjectsDetailsFlyout(item); + renderAssociatedObjectsDetailsFlyout({ + tableDetail: item, + datasourceName, + }); } else { - const acceleration = cachedAccelerations.find( - (acc) => getAccelerationName(acc.indexName, acc, datasourceName) === name - ); + const acceleration = cachedAccelerations.find((acc) => acc.indexName === item.id); console.log(acceleration); - renderAccelerationDetailsFlyout({ - indexName: getAccelerationName( - acceleration?.indexName, + if (acceleration) { + renderAccelerationDetailsFlyout({ + index: getAccelerationName(acceleration, datasourceName), acceleration, - datasourceName - ), - acceleration, - dataSourceName: datasourceName, - }); + dataSourceName: datasourceName, + }); + } } }} > @@ -104,17 +105,39 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { defaultMessage: 'Accelerations', }), sortable: true, - render: (accelerations: string[]) => { - return accelerations.length > 0 - ? accelerations.map((acceleration, index) => ( - - renderAccelerationDetailsFlyout(acceleration)}> - {acceleration.name} - - {index < accelerations.length - 1 ? ', ' : ''} - - )) - : '-'; + // align: 'center', + render: (accelerations: CachedAcceleration[], obj: AssociatedObject) => { + if (accelerations.length === 0) { + return '-'; + } else if (accelerations.length === 1) { + const name = getAccelerationName(accelerations[0], datasourceName); + return ( + { + renderAccelerationDetailsFlyout({ + index: name, + acceleration: accelerations[0], + dataSourceName: datasourceName, + }); + }} + > + {name} + + ); + } + return ( + { + renderAssociatedObjectsDetailsFlyout({ + tableDetail: obj, + datasourceName, + }); + }} + size="xs" + > + View all {accelerations.length} + + ); }, }, { @@ -148,8 +171,9 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { ), type: 'icon', icon: 'bolt', - available: (item: AssociatedObject) => item.type === 'Table', - onClick: (item: AssociatedObject) => console.log('Accelerate', item), + available: (item: AssociatedObject) => item.type === 'table', + onClick: (item: AssociatedObject) => + renderCreateAccelerationFlyout(datasourceName, item.database, item.name), }, ], }, @@ -241,6 +265,7 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { const renderAccelerationDetailsFlyout = getRenderAccelerationDetailsFlyout(); const renderAssociatedObjectsDetailsFlyout = getRenderAssociatedObjectsDetailsFlyout(); + const renderCreateAccelerationFlyout = getRenderCreateAccelerationFlyout(); return ( { search={tableSearch} pagination={pagination} sorting={sorting} + hasActions={true} + tableLayout="auto" data-test-subj={ASSC_OBJ_TABLE_SUBJ} /> ); diff --git a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_utils.tsx b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_utils.tsx index 28942265e3..9176cc3185 100644 --- a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_utils.tsx +++ b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_utils.tsx @@ -9,8 +9,7 @@ export const ASSC_OBJ_TABLE_SUBJ = 'associatedObjectsTable'; export const ASSC_OBJ_TABLE_ACC_COLUMN_NAME = 'accelerations'; -export const ASSC_OBJ_TABLE_SEARCH_HINT = - 'database:database_1 database: database_2 accelerations:skipping_index_1'; +export const ASSC_OBJ_TABLE_SEARCH_HINT = 'accelerations:skipping_index_1'; export const ASSC_OBJ_PANEL_TITLE = 'Associated objects'; diff --git a/public/plugin.tsx b/public/plugin.tsx index b35ffc75f3..a7e72ad286 100644 --- a/public/plugin.tsx +++ b/public/plugin.tsx @@ -48,7 +48,7 @@ import { observabilityTracesTitle, } from '../common/constants/shared'; import { QueryManager } from '../common/query_manager'; -import { AssociatedObject, CachedAcceleration } from '../common/types/data_connections'; +import { CachedAcceleration } from '../common/types/data_connections'; import { VISUALIZATION_SAVED_OBJECT } from '../common/types/observability_saved_object_attributes'; import { setOSDHttp, @@ -118,14 +118,16 @@ export const [ export const [ getRenderAssociatedObjectsDetailsFlyout, setRenderAssociatedObjectsDetailsFlyout, -] = createGetterSetter<({ tableDetail }: { tableDetail: AssociatedObject }) => void>( +] = createGetterSetter<({ tableDetail, datasourceName }: AssociatedObjectsFlyoutProps) => void>( 'renderAssociatedObjectsDetailsFlyout' ); export const [ getRenderCreateAccelerationFlyout, setRenderCreateAccelerationFlyout, -] = createGetterSetter<(dataSource: string) => void>('renderCreateAccelerationFlyout'); +] = createGetterSetter<(dataSource: string, databaseName?: string, tableName?: string) => void>( + 'renderCreateAccelerationFlyout' +); export class ObservabilityPlugin implements @@ -422,18 +424,32 @@ export class ObservabilityPlugin ); setRenderAccelerationDetailsFlyout(renderAccelerationDetailsFlyout); - const renderAssociatedObjectsDetailsFlyout = (tableDetail: AssociatedObjectsFlyoutProps) => + const renderAssociatedObjectsDetailsFlyout = ({ + tableDetail, + datasourceName, + }: AssociatedObjectsFlyoutProps) => core.overlays.openFlyout( - toMountPoint() + toMountPoint( + + ) ); setRenderAssociatedObjectsDetailsFlyout(renderAssociatedObjectsDetailsFlyout); - const renderCreateAccelerationFlyout = (selectedDatasource: string) => { + const renderCreateAccelerationFlyout = ( + selectedDatasource: string, + databaseName?: string, + tableName?: string + ) => { const createAccelerationFlyout = core.overlays.openFlyout( toMountPoint( createAccelerationFlyout.close()} + databaseName={databaseName} + tableName={tableName} /> ) ); diff --git a/test/datasources.ts b/test/datasources.ts index c5319b4ae5..8c37eed562 100644 --- a/test/datasources.ts +++ b/test/datasources.ts @@ -1008,19 +1008,19 @@ export const mockAssociatedObjects: AssociatedObject[] = [ ], columns: [ { - name: 'column1', + fieldName: 'column1', dataType: 'dataType1', }, { - name: 'column2', + fieldName: 'column2', dataType: 'dataType2', }, { - name: 'column3', + fieldName: 'column3', dataType: 'dataType3', }, { - name: 'column4', + fieldName: 'column4', dataType: 'dataType4', }, ],