From 93a19a6bc40cb17bcce7ccf30104581873a7a473 Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Wed, 15 May 2024 17:19:22 -0700 Subject: [PATCH 1/6] added fix for failing data-sources page Signed-off-by: sumukhswamy --- .../manage/associated_objects/associated_objects_tab.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 31ddabeb9..a19c67651 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 @@ -100,7 +100,7 @@ export const AssociatedObjectsTab: React.FC = (props) const onRefreshButtonClick = () => { if (!isCatalogCacheFetching(databasesLoadStatus, tablesLoadStatus, accelerationsLoadStatus)) { - startLoadingDatabases({ databaseName: datasource.name }); + startLoadingDatabases({ dataSourceName: datasource.name }); setIsRefreshing(true); } }; @@ -167,7 +167,7 @@ export const AssociatedObjectsTab: React.FC = (props) datasourceCache.status === CachedDataSourceStatus.Failed) && !isCatalogCacheFetching(databasesLoadStatus) ) { - startLoadingDatabases(datasource.name); + startLoadingDatabases({ dataSourceName: datasource.name }); } else if (datasourceCache.status === CachedDataSourceStatus.Updated) { setCachedDatabases(datasourceCache.databases); setIsFirstTimeLoading(false); @@ -224,7 +224,7 @@ export const AssociatedObjectsTab: React.FC = (props) databaseCache.status === CachedDataSourceStatus.Failed) && !isCatalogCacheFetching(tablesLoadStatus) ) { - startLoadingTables(datasource.name, selectedDatabase); + startLoadingTables({ dataSourceName: datasource.name, databaseName: selectedDatabase }); setIsObjectsLoading(true); } else if (databaseCache.status === CachedDataSourceStatus.Updated) { setCachedTables(databaseCache.tables); @@ -235,7 +235,7 @@ export const AssociatedObjectsTab: React.FC = (props) isRefreshing) && !isCatalogCacheFetching(accelerationsLoadStatus) ) { - startLoadingAccelerations(datasource.name); + startLoadingAccelerations({ dataSourceName: datasource.name }); setIsObjectsLoading(true); } else if (accelerationsCache.status === CachedDataSourceStatus.Updated) { setCachedAccelerations(accelerationsCache.accelerations); From 810cd759c6e2387a215c978d34fdedbf94fc81cf Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Wed, 15 May 2024 19:37:16 -0700 Subject: [PATCH 2/6] added change for job with the id Signed-off-by: sumukhswamy --- .../accelerations/acceleration_table.tsx | 2 +- public/components/hooks/use_polling.ts | 1 - .../framework/catalog_cache/cache_loader.tsx | 1 - public/services/requests/sql.ts | 18 +++++++++++------- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx index e3e386d3a..db476e588 100644 --- a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx +++ b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx @@ -134,7 +134,7 @@ export const AccelerationTable = ({ const handleRefresh = useCallback(() => { if (!isCatalogCacheFetching(accelerationsLoadStatus)) { setIsRefreshing(true); - startLoadingAccelerations(dataSourceName); + startLoadingAccelerations({ dataSourceName }); } }, [accelerationsLoadStatus]); diff --git a/public/components/hooks/use_polling.ts b/public/components/hooks/use_polling.ts index 30127fa0f..74fedd6cf 100644 --- a/public/components/hooks/use_polling.ts +++ b/public/components/hooks/use_polling.ts @@ -111,7 +111,6 @@ export function usePolling( try { const result = await fetchFunction(params); setData(result); - console.log(result); // Check the success condition and stop polling if it's met if (onPollingSuccess && onPollingSuccess(result, configurations)) { stopPolling(); diff --git a/public/framework/catalog_cache/cache_loader.tsx b/public/framework/catalog_cache/cache_loader.tsx index f1775eb90..294346c44 100644 --- a/public/framework/catalog_cache/cache_loader.tsx +++ b/public/framework/catalog_cache/cache_loader.tsx @@ -339,7 +339,6 @@ export const useLoadToCache = (loadCacheType: LoadCacheType) => { sqlService .fetch(requestPayload, dataSourceMDSId) .then((result) => { - console.log(result); setAsyncSessionId(dataSourceName, getObjValue(result, 'sessionId', null)); if (result.queryId) { startPolling({ diff --git a/public/services/requests/sql.ts b/public/services/requests/sql.ts index 9b9bd9f93..848b1e660 100644 --- a/public/services/requests/sql.ts +++ b/public/services/requests/sql.ts @@ -37,13 +37,17 @@ export class SQLService { dataSourceMDSId?: string, errorHandler?: (error: any) => void ) => { - return this.http - .get(`/api/observability/query/jobs/${params.queryId}/${dataSourceMDSId}`) - .catch((error) => { - console.error('fetch error: ', error.body); - if (errorHandler) errorHandler(error); - throw error; - }); + let path; + if (dataSourceMDSId) { + path = `/api/observability/query/jobs/${params.queryId}/${dataSourceMDSId}`; + } else { + path = `/api/observability/query/jobs/${params.queryId}/`; + } + return this.http.get(path).catch((error) => { + console.error('fetch error: ', error.body); + if (errorHandler) errorHandler(error); + throw error; + }); }; deleteWithJobId = async (params: { queryId: string }, errorHandler?: (error: any) => void) => { From 80a75836f6824c7ebe35ffeb657689625e55f3bd Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Thu, 16 May 2024 22:00:08 -0700 Subject: [PATCH 3/6] addressed pr comments Signed-off-by: sumukhswamy --- public/services/requests/sql.ts | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/public/services/requests/sql.ts b/public/services/requests/sql.ts index 848b1e660..fc577ca5f 100644 --- a/public/services/requests/sql.ts +++ b/public/services/requests/sql.ts @@ -37,17 +37,13 @@ export class SQLService { dataSourceMDSId?: string, errorHandler?: (error: any) => void ) => { - let path; - if (dataSourceMDSId) { - path = `/api/observability/query/jobs/${params.queryId}/${dataSourceMDSId}`; - } else { - path = `/api/observability/query/jobs/${params.queryId}/`; - } - return this.http.get(path).catch((error) => { - console.error('fetch error: ', error.body); - if (errorHandler) errorHandler(error); - throw error; - }); + return this.http + .get(`/api/observability/query/jobs/${params.queryId}/${dataSourceMDSId ?? ''}`) + .catch((error) => { + console.error('fetch error: ', error.body); + if (errorHandler) errorHandler(error); + throw error; + }); }; deleteWithJobId = async (params: { queryId: string }, errorHandler?: (error: any) => void) => { From 2356b788b6255e40b91fc6de0321e88cfd921ff6 Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Fri, 17 May 2024 12:06:15 -0700 Subject: [PATCH 4/6] added fix for flyput Signed-off-by: sumukhswamy --- .../selectors/source_selector.tsx | 6 +++++- public/plugin.tsx | 20 +++++++++---------- public/types.ts | 4 ++-- 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx index 9f127faf5..d2c3639a6 100644 --- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx +++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx @@ -74,7 +74,11 @@ export const AccelerationDataSourceSelector = ({ const loadDataSource = () => { setLoadingComboBoxes({ ...loadingComboBoxes, dataSource: true }); http - .get(DATACONNECTIONS_BASE + `/dataSourceMDSId=${dataSourceMDSId}`) + .get( + dataSourceMDSId + ? `${DATACONNECTIONS_BASE}/dataSourceMDSId=${dataSourceMDSId}` + : DATACONNECTIONS_BASE + ) .then((res) => { const isValidDataSource = res.some( (connection: any) => diff --git a/public/plugin.tsx b/public/plugin.tsx index c6ac1f829..7d67427f7 100644 --- a/public/plugin.tsx +++ b/public/plugin.tsx @@ -3,9 +3,9 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; -import { i18n } from '@osd/i18n'; import { htmlIdGenerator } from '@elastic/eui'; +import { i18n } from '@osd/i18n'; +import React from 'react'; import { AppCategory, AppMountParameters, @@ -18,6 +18,12 @@ import { } from '../../../src/core/public'; import { toMountPoint } from '../../../src/plugins/opensearch_dashboards_react/public/'; import { createGetterSetter } from '../../../src/plugins/opensearch_dashboards_utils/public'; +import { + DATA_SOURCE_TYPES, + OBS_S3_DATA_SOURCE, + S3_DATA_SOURCE_GROUP_DISPLAY_NAME, + S3_DATA_SOURCE_GROUP_SPARK_DISPLAY_NAME, +} from '../common/constants/data_sources'; import { CREATE_TAB_PARAM, CREATE_TAB_PARAM_KEY, TAB_CHART_ID } from '../common/constants/explorer'; import { DATACONNECTIONS_BASE, @@ -96,12 +102,6 @@ import { ObservabilityStart, SetupDependencies, } from './types'; -import { - DATA_SOURCE_TYPES, - OBS_S3_DATA_SOURCE, - S3_DATA_SOURCE_GROUP_DISPLAY_NAME, - S3_DATA_SOURCE_GROUP_SPARK_DISPLAY_NAME, -} from '../common/constants/data_sources'; interface PublicConfig { query_assist: { @@ -515,10 +515,10 @@ export class ObservabilityPlugin const renderCreateAccelerationFlyout = ( selectedDatasource: string, - dataSourceMDSId?: string, databaseName?: string, tableName?: string, - handleRefresh?: () => void + handleRefresh?: () => void, + dataSourceMDSId?: string ) => { const createAccelerationFlyout = core.overlays.openFlyout( toMountPoint( diff --git a/public/types.ts b/public/types.ts index 86ca51e65..a84df41f8 100644 --- a/public/types.ts +++ b/public/types.ts @@ -61,10 +61,10 @@ export interface ObservabilityStart { ) => void; renderCreateAccelerationFlyout: ( dataSource: string, - dataSourceMDSId?: string, databaseName?: string, tableName?: string, - handleRefresh?: () => void + handleRefresh?: () => void, + dataSourceMDSId?: string ) => void; CatalogCacheManagerInstance: typeof CatalogCacheManager; useLoadDatabasesToCacheHook: () => LoadCachehookOutput; From 967457e4338322c5d68589109cadb09881a20d8e Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Fri, 17 May 2024 12:54:17 -0700 Subject: [PATCH 5/6] added fix for flyout Signed-off-by: sumukhswamy --- .../accelerations/utils/acceleration_utils.tsx | 12 +++--------- .../associated_objects_details_flyout.tsx | 8 ++++---- public/plugin.tsx | 4 ++-- 3 files changed, 9 insertions(+), 15 deletions(-) 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 23ededc73..a6f9ac351 100644 --- a/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx +++ b/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx @@ -93,10 +93,10 @@ export const CreateAccelerationFlyoutButton = ({ dataSourceName: string; renderCreateAccelerationFlyout: ( dataSource: string, - dataSourceMDSId?: string, databaseName?: string, tableName?: string, - handleRefresh?: () => void + handleRefresh?: () => void, + dataSourceMDSId?: string ) => void; handleRefresh: () => void; }) => { @@ -104,13 +104,7 @@ export const CreateAccelerationFlyoutButton = ({ <> - renderCreateAccelerationFlyout( - dataSourceName, - undefined, - undefined, - undefined, - handleRefresh - ) + renderCreateAccelerationFlyout(dataSourceName, undefined, undefined, handleRefresh, '') } fill > 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 5cd641411..b593316f2 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 @@ -95,10 +95,10 @@ export const AssociatedObjectsDetailsFlyout = ({ onClick={() => renderCreateAccelerationFlyout( datasourceName, - '', tableDetail.database, tableDetail.name, - handleRefresh + handleRefresh, + '' ) } > @@ -198,10 +198,10 @@ export const AssociatedObjectsDetailsFlyout = ({ onClick={() => renderCreateAccelerationFlyout( datasourceName, - '', tableDetail.database, tableDetail.name, - handleRefresh + handleRefresh, + '' ) } iconType="popout" diff --git a/public/plugin.tsx b/public/plugin.tsx index 7d67427f7..254fdc0b2 100644 --- a/public/plugin.tsx +++ b/public/plugin.tsx @@ -142,10 +142,10 @@ export const [ ] = createGetterSetter< ( dataSource: string, - dataSourceMDSId?: string, databaseName?: string, tableName?: string, - handleRefresh?: () => void + handleRefresh?: () => void, + dataSourceMDSId?: string ) => void >('renderCreateAccelerationFlyout'); From 6d0aa66deda1912bde2ec60e46009cdc2c5fab92 Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Tue, 21 May 2024 16:35:55 -0700 Subject: [PATCH 6/6] refactored the flyout objects with an interface Signed-off-by: sumukhswamy --- common/types/data_connections.ts | 22 +++++ .../accelerations/acceleration_table.tsx | 6 +- .../selector_helpers/load_databases.tsx | 4 +- .../selector_helpers/load_objects.tsx | 6 +- .../selectors/source_selector.tsx | 8 +- .../utils/acceleration_utils.tsx | 25 +++--- .../associated_objects_details_flyout.tsx | 29 ++++--- .../modules/associated_objects_table.tsx | 50 ++++++++--- .../components/manage/data_connection.tsx | 4 +- .../manage/manage_data_connections_table.tsx | 8 +- public/plugin.tsx | 86 ++++++++++--------- public/types.ts | 40 +++++---- 12 files changed, 177 insertions(+), 111 deletions(-) diff --git a/common/types/data_connections.ts b/common/types/data_connections.ts index a5585aca7..a15a05e47 100644 --- a/common/types/data_connections.ts +++ b/common/types/data_connections.ts @@ -252,3 +252,25 @@ export interface StartLoadingParams { databaseName?: string; tableName?: string; } + +export interface RenderAccelerationFlyoutParams { + dataSource: string; + dataSourceMDSId?: string; + databaseName?: string; + tableName?: string; + handleRefresh?: () => void; +} + +export interface RenderAssociatedObjectsDetailsFlyoutParams { + tableDetail: AssociatedObject; + dataSourceName: string; + handleRefresh?: () => void; + dataSourceMDSId?: string; +} + +export interface RenderAccelerationDetailsFlyoutParams { + acceleration: CachedAcceleration; + dataSourceName: string; + handleRefresh?: () => void; + dataSourceMDSId?: string; +} diff --git a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx index db476e588..dbe4033c7 100644 --- a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx +++ b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx @@ -246,7 +246,11 @@ export const AccelerationTable = ({ return ( { - renderAccelerationDetailsFlyout(acceleration, dataSourceName, handleRefresh); + renderAccelerationDetailsFlyout({ + acceleration, + dataSourceName, + handleRefresh, + }); }} > {displayName} diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx index c49438f1f..8a47f71d2 100644 --- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx +++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx @@ -24,6 +24,7 @@ interface SelectorLoadDatabasesProps { }> >; tableFieldsLoading: boolean; + dataSourceMDSId?: string; } export const SelectorLoadDatabases = ({ @@ -32,6 +33,7 @@ export const SelectorLoadDatabases = ({ loadingComboBoxes, setLoadingComboBoxes, tableFieldsLoading, + dataSourceMDSId, }: SelectorLoadDatabasesProps) => { const [isLoading, setIsLoading] = useState(false); const { @@ -42,7 +44,7 @@ export const SelectorLoadDatabases = ({ const onClickRefreshDatabases = () => { setIsLoading(true); - startDatabasesLoading({ dataSourceName }); + startDatabasesLoading({ dataSourceName, dataSourceMDSId }); }; useEffect(() => { diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx index 7976196c0..18fdbf32f 100644 --- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx +++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx @@ -29,6 +29,7 @@ interface SelectorLoadDatabasesProps { }> >; tableFieldsLoading: boolean; + dataSourceMDSId?: string; } export const SelectorLoadObjects = ({ @@ -38,6 +39,7 @@ export const SelectorLoadObjects = ({ loadingComboBoxes, setLoadingComboBoxes, tableFieldsLoading, + dataSourceMDSId, }: SelectorLoadDatabasesProps) => { const { setToast } = useToast(); const [isLoading, setIsLoading] = useState({ @@ -65,8 +67,8 @@ export const SelectorLoadObjects = ({ tableStatus: true, accelerationsStatus: true, }); - startLoadingTables({ dataSourceName, databaseName }); - startLoadingAccelerations({ dataSourceName }); + startLoadingTables({ dataSourceName, databaseName, dataSourceMDSId }); + startLoadingAccelerations({ dataSourceName, dataSourceMDSId }); }; useEffect(() => { diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx index d2c3639a6..1d61000b2 100644 --- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx +++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx @@ -74,11 +74,7 @@ export const AccelerationDataSourceSelector = ({ const loadDataSource = () => { setLoadingComboBoxes({ ...loadingComboBoxes, dataSource: true }); http - .get( - dataSourceMDSId - ? `${DATACONNECTIONS_BASE}/dataSourceMDSId=${dataSourceMDSId}` - : DATACONNECTIONS_BASE - ) + .get(`${DATACONNECTIONS_BASE}/dataSourceMDSId=${dataSourceMDSId ?? ''}`) .then((res) => { const isValidDataSource = res.some( (connection: any) => @@ -236,6 +232,7 @@ export const AccelerationDataSourceSelector = ({ loadingComboBoxes={loadingComboBoxes} setLoadingComboBoxes={setLoadingComboBoxes} tableFieldsLoading={tableFieldsLoading} + dataSourceMDSId={dataSourceMDSId} /> @@ -285,6 +282,7 @@ export const AccelerationDataSourceSelector = ({ loadingComboBoxes={loadingComboBoxes} setLoadingComboBoxes={setLoadingComboBoxes} tableFieldsLoading={tableFieldsLoading} + dataSourceMDSId={dataSourceMDSId} /> 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 a6f9ac351..0b7d7d9dd 100644 --- a/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx +++ b/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx @@ -6,12 +6,14 @@ import { EuiButton, EuiHealth } from '@elastic/eui'; import React from 'react'; import { DATA_SOURCE_TYPES } from '../../../../../../../common/constants/data_sources'; -import { CachedAcceleration } from '../../../../../../../common/types/data_connections'; +import { + CachedAcceleration, + RenderAccelerationFlyoutParams, +} from '../../../../../../../common/types/data_connections'; import { redirectToExplorerOSIdx, redirectToExplorerWithDataSrc, } from '../../associated_objects/utils/associated_objects_tab_utils'; - export const ACC_PANEL_TITLE = 'Accelerations'; export const ACC_PANEL_DESC = 'Accelerations optimize query performance by indexing external data into OpenSearch.'; @@ -91,20 +93,23 @@ export const CreateAccelerationFlyoutButton = ({ handleRefresh, }: { dataSourceName: string; - renderCreateAccelerationFlyout: ( - dataSource: string, - databaseName?: string, - tableName?: string, - handleRefresh?: () => void, - dataSourceMDSId?: string - ) => void; + renderCreateAccelerationFlyout: ({ + dataSource, + databaseName, + tableName, + handleRefresh, + dataSourceMDSId, + }: RenderAccelerationFlyoutParams) => void; handleRefresh: () => void; }) => { return ( <> - renderCreateAccelerationFlyout(dataSourceName, undefined, undefined, handleRefresh, '') + renderCreateAccelerationFlyout({ + dataSource: dataSourceName, + handleRefresh, + }) } fill > 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 b593316f2..7520995cd 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 @@ -93,13 +93,12 @@ export const AssociatedObjectsDetailsFlyout = ({ return ( - renderCreateAccelerationFlyout( - datasourceName, - tableDetail.database, - tableDetail.name, + renderCreateAccelerationFlyout({ + dataSource: datasourceName, + databaseName: tableDetail.database, + tableName: tableDetail.name, handleRefresh, - '' - ) + }) } > @@ -156,7 +155,12 @@ export const AssociatedObjectsDetailsFlyout = ({ return ( - renderAccelerationDetailsFlyout(item, datasourceName, handleRefresh, dataSourceMDSId) + renderAccelerationDetailsFlyout({ + acceleration: item, + dataSourceName: datasourceName, + handleRefresh, + dataSourceMDSId, + }) } > {name} @@ -196,13 +200,12 @@ export const AssociatedObjectsDetailsFlyout = ({ color="primary" fill onClick={() => - renderCreateAccelerationFlyout( - datasourceName, - tableDetail.database, - tableDetail.name, + renderCreateAccelerationFlyout({ + dataSource: datasourceName, + databaseName: tableDetail.database, + tableName: tableDetail.name, handleRefresh, - '' - ) + }) } iconType="popout" iconSide="left" 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 7733735f6..3f3e69d0e 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 @@ -3,14 +3,18 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useEffect, useState } from 'react'; import { EuiInMemoryTable, EuiLink, - SearchFilterConfig, EuiTableFieldDataColumnType, + SearchFilterConfig, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; +import React, { useEffect, useState } from 'react'; +import { + ACCELERATION_INDEX_TYPES, + DATA_SOURCE_TYPES, +} from '../../../../../../../common/constants/data_sources'; import { AssociatedObject, CachedAcceleration, @@ -20,6 +24,7 @@ import { getRenderAssociatedObjectsDetailsFlyout, getRenderCreateAccelerationFlyout, } from '../../../../../../plugin'; +import { getAccelerationName } from '../../accelerations/utils/acceleration_utils'; import { ASSC_OBJ_TABLE_ACC_COLUMN_NAME, ASSC_OBJ_TABLE_SEARCH_HINT, @@ -27,11 +32,6 @@ import { redirectToExplorerOSIdx, redirectToExplorerWithDataSrc, } from '../utils/associated_objects_tab_utils'; -import { getAccelerationName } from '../../accelerations/utils/acceleration_utils'; -import { - ACCELERATION_INDEX_TYPES, - DATA_SOURCE_TYPES, -} from '../../../../../../../common/constants/data_sources'; interface AssociatedObjectsTableProps { datasourceName: string; @@ -69,11 +69,18 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { { if (item.type === 'table') { - renderAssociatedObjectsDetailsFlyout(item, datasourceName, handleRefresh); + renderAssociatedObjectsDetailsFlyout({ + tableDetail: item, + dataSourceName: datasourceName, + handleRefresh, + }); } else { const acceleration = cachedAccelerations.find((acc) => acc.indexName === item.id); if (acceleration) { - renderAccelerationDetailsFlyout(acceleration, datasourceName); + renderAccelerationDetailsFlyout({ + acceleration, + dataSourceName: datasourceName, + }); } } }} @@ -108,7 +115,11 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { return ( - renderAccelerationDetailsFlyout(accelerations[0], datasourceName, handleRefresh) + renderAccelerationDetailsFlyout({ + acceleration: accelerations[0], + dataSourceName: datasourceName, + handleRefresh, + }) } > {name} @@ -118,7 +129,11 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { return ( - renderAssociatedObjectsDetailsFlyout(obj, datasourceName, handleRefresh) + renderAssociatedObjectsDetailsFlyout({ + tableDetail: obj, + dataSourceName: datasourceName, + handleRefresh, + }) } > View all {accelerations.length} @@ -128,7 +143,11 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { return ( - renderAssociatedObjectsDetailsFlyout(accelerations, datasourceName, handleRefresh) + renderAssociatedObjectsDetailsFlyout({ + tableDetail: accelerations, + dataSourceName: datasourceName, + handleRefresh, + }) } > {accelerations.name} @@ -185,7 +204,12 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { icon: 'bolt', available: (item: AssociatedObject) => item.type === 'table', onClick: (item: AssociatedObject) => - renderCreateAccelerationFlyout(datasourceName, item.database, item.name, handleRefresh), + renderCreateAccelerationFlyout({ + dataSource: datasourceName, + databaseName: item.database, + tableName: item.tableName, + handleRefresh, + }), }, ], }, diff --git a/public/components/datasources/components/manage/data_connection.tsx b/public/components/datasources/components/manage/data_connection.tsx index c8b5b34f3..57fefeb60 100644 --- a/public/components/datasources/components/manage/data_connection.tsx +++ b/public/components/datasources/components/manage/data_connection.tsx @@ -35,13 +35,13 @@ import { useLoadDatabasesToCache, useLoadTablesToCache, } from '../../../../../public/framework/catalog_cache/cache_loader'; -import { redirectToExplorerS3 } from './associated_objects/utils/associated_objects_tab_utils'; import { coreRefs } from '../../../../framework/core_refs'; import { getRenderCreateAccelerationFlyout } from '../../../../plugin'; import { NoAccess } from '../no_access'; import { AccelerationTable } from './accelerations/acceleration_table'; import { AccessControlTab } from './access_control_tab'; import { AssociatedObjectsTab } from './associated_objects/associated_objects_tab'; +import { redirectToExplorerS3 } from './associated_objects/utils/associated_objects_tab_utils'; import { InactiveDataConnectionCallout } from './inactive_data_connection'; import { InstallIntegrationFlyout, @@ -123,7 +123,7 @@ export const DataConnection = (props: { dataSource: string }) => { ) : null; const onclickAccelerationsCard = () => { - renderCreateAccelerationFlyout(dataSource); + renderCreateAccelerationFlyout({ dataSource }); }; const onclickDiscoverCard = () => { diff --git a/public/components/datasources/components/manage/manage_data_connections_table.tsx b/public/components/datasources/components/manage/manage_data_connections_table.tsx index 2813b030c..68f7ec027 100644 --- a/public/components/datasources/components/manage/manage_data_connections_table.tsx +++ b/public/components/datasources/components/manage/manage_data_connections_table.tsx @@ -28,16 +28,16 @@ import { DatasourceType, } from '../../../../../common/types/data_connections'; import { coreRefs } from '../../../../../public/framework/core_refs'; +import { getRenderCreateAccelerationFlyout } from '../../../../../public/plugin'; import { DeleteModal } from '../../../common/helpers/delete_modal'; import { useToast } from '../../../common/toast'; import { HomeProps } from '../../home'; import PrometheusLogo from '../../icons/prometheus-logo.svg'; import S3Logo from '../../icons/s3-logo.svg'; import { DataConnectionsHeader } from '../data_connections_header'; -import { DataConnectionsDescription } from './manage_data_connections_description'; -import { getRenderCreateAccelerationFlyout } from '../../../../../public/plugin'; -import { InstallIntegrationFlyout } from './integrations/installed_integrations_table'; import { redirectToExplorerS3 } from './associated_objects/utils/associated_objects_tab_utils'; +import { InstallIntegrationFlyout } from './integrations/installed_integrations_table'; +import { DataConnectionsDescription } from './manage_data_connections_description'; interface DataConnection { connectionType: DatasourceType; @@ -147,7 +147,7 @@ export const ManageDataConnectionsTable = (props: HomeProps) => { type: 'icon', available: (datasource: DataConnection) => datasource.connectionType !== 'PROMETHEUS', onClick: (datasource: DataConnection) => { - renderCreateAccelerationFlyout(datasource.name); + renderCreateAccelerationFlyout({ dataSource: datasource.name }); }, 'data-test-subj': 'action-accelerate', }, diff --git a/public/plugin.tsx b/public/plugin.tsx index 254fdc0b2..251bb4348 100644 --- a/public/plugin.tsx +++ b/public/plugin.tsx @@ -56,7 +56,11 @@ import { observabilityTracesTitle, } from '../common/constants/shared'; import { QueryManager } from '../common/query_manager'; -import { AssociatedObject, CachedAcceleration } from '../common/types/data_connections'; +import { + RenderAccelerationDetailsFlyoutParams, + RenderAccelerationFlyoutParams, + RenderAssociatedObjectsDetailsFlyoutParams, +} from '../common/types/data_connections'; import { VISUALIZATION_SAVED_OBJECT } from '../common/types/observability_saved_object_attributes'; import { setOSDHttp, @@ -116,37 +120,37 @@ export const [ getRenderAccelerationDetailsFlyout, setRenderAccelerationDetailsFlyout, ] = createGetterSetter< - ( - acceleration: CachedAcceleration, - dataSourceName: string, - handleRefresh?: () => void, - dataSourceMDSId?: string - ) => void + ({ + acceleration, + dataSourceName, + handleRefresh, + dataSourceMDSId, + }: RenderAccelerationDetailsFlyoutParams) => void >('renderAccelerationDetailsFlyout'); export const [ getRenderAssociatedObjectsDetailsFlyout, setRenderAssociatedObjectsDetailsFlyout, ] = createGetterSetter< - ( - tableDetail: AssociatedObject, - datasourceName: string, - handleRefresh?: () => void, - dataSourceMDSId?: string - ) => void + ({ + tableDetail, + dataSourceName, + handleRefresh, + dataSourceMDSId, + }: RenderAssociatedObjectsDetailsFlyoutParams) => void >('renderAssociatedObjectsDetailsFlyout'); export const [ getRenderCreateAccelerationFlyout, setRenderCreateAccelerationFlyout, ] = createGetterSetter< - ( - dataSource: string, - databaseName?: string, - tableName?: string, - handleRefresh?: () => void, - dataSourceMDSId?: string - ) => void + ({ + dataSource, + dataSourceMDSId, + databaseName, + tableName, + handleRefresh, + }: RenderAccelerationFlyoutParams) => void >('renderCreateAccelerationFlyout'); export class ObservabilityPlugin @@ -473,12 +477,12 @@ export class ObservabilityPlugin }); // Use overlay service to render flyouts - const renderAccelerationDetailsFlyout = ( - acceleration: CachedAcceleration, - dataSourceName: string, - handleRefresh?: () => void, - dataSourceMDSId?: string - ) => { + const renderAccelerationDetailsFlyout = ({ + acceleration, + dataSourceName, + handleRefresh, + dataSourceMDSId, + }: RenderAccelerationDetailsFlyoutParams) => { const accelerationDetailsFlyout = core.overlays.openFlyout( toMountPoint( void, - dataSourceMDSId?: string - ) => { + const renderAssociatedObjectsDetailsFlyout = ({ + tableDetail, + dataSourceName, + handleRefresh, + dataSourceMDSId, + }: RenderAssociatedObjectsDetailsFlyoutParams) => { const associatedObjectsDetailsFlyout = core.overlays.openFlyout( toMountPoint( associatedObjectsDetailsFlyout.close()} handleRefresh={handleRefresh} dataSourceMDSId={dataSourceMDSId} @@ -513,17 +517,17 @@ export class ObservabilityPlugin }; setRenderAssociatedObjectsDetailsFlyout(renderAssociatedObjectsDetailsFlyout); - const renderCreateAccelerationFlyout = ( - selectedDatasource: string, - databaseName?: string, - tableName?: string, - handleRefresh?: () => void, - dataSourceMDSId?: string - ) => { + const renderCreateAccelerationFlyout = ({ + dataSource, + databaseName, + tableName, + handleRefresh, + dataSourceMDSId, + }: RenderAccelerationFlyoutParams) => { const createAccelerationFlyout = core.overlays.openFlyout( toMountPoint( createAccelerationFlyout.close()} databaseName={databaseName} tableName={tableName} diff --git a/public/types.ts b/public/types.ts index a84df41f8..0075f1ce2 100644 --- a/public/types.ts +++ b/public/types.ts @@ -17,9 +17,10 @@ import { NavigationPublicPluginStart } from '../../../src/plugins/navigation/pub import { UiActionsStart } from '../../../src/plugins/ui_actions/public'; import { VisualizationsSetup } from '../../../src/plugins/visualizations/public'; import { - AssociatedObject, - CachedAcceleration, LoadCachehookOutput, + RenderAccelerationDetailsFlyoutParams, + RenderAccelerationFlyoutParams, + RenderAssociatedObjectsDetailsFlyoutParams, } from '../common/types/data_connections'; import { CatalogCacheManager } from './framework/catalog_cache/cache_manager'; import { AssistantSetup } from './types'; @@ -49,23 +50,24 @@ export interface SetupDependencies { export interface ObservabilitySetup {} export interface ObservabilityStart { - renderAccelerationDetailsFlyout: ( - acceleration: CachedAcceleration, - datasourceName: string, - handleRefresh?: () => void - ) => void; - renderAssociatedObjectsDetailsFlyout: ( - tableDetail: AssociatedObject, - datasourceName: string, - handleRefresh?: () => void - ) => void; - renderCreateAccelerationFlyout: ( - dataSource: string, - databaseName?: string, - tableName?: string, - handleRefresh?: () => void, - dataSourceMDSId?: string - ) => void; + renderAccelerationDetailsFlyout: ({ + acceleration, + dataSourceName, + handleRefresh, + dataSourceMDSId, + }: RenderAccelerationDetailsFlyoutParams) => void; + renderAssociatedObjectsDetailsFlyout: ({ + tableDetail, + dataSourceName, + handleRefresh, + }: RenderAssociatedObjectsDetailsFlyoutParams) => void; + renderCreateAccelerationFlyout: ({ + dataSource, + dataSourceMDSId, + databaseName, + tableName, + handleRefresh, + }: RenderAccelerationFlyoutParams) => void; CatalogCacheManagerInstance: typeof CatalogCacheManager; useLoadDatabasesToCacheHook: () => LoadCachehookOutput; useLoadTablesToCacheHook: () => LoadCachehookOutput;