From a707810d63b0867a4ca014cb5c36700f95347e73 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Tue, 19 Mar 2024 13:04:02 -0700 Subject: [PATCH] Data sources bug fixes and UI improvements (#1565) (#1566) * more bug fixes and UI changes * adding failure states, improving refresh accelerations --------- (cherry picked from commit 31d506a1672803060d6abb7699ae099fbeb0b628) Signed-off-by: Sean Li Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] --- .../associated_objects_tab.test.tsx.snap | 524 ++++++------------ .../data_connection.test.tsx.snap | 18 + .../__tests__/acceleration_table.test.tsx | 6 +- .../manage_data_connections_table.test.tsx | 4 + .../accelerations/acceleration_table.tsx | 20 +- .../create_acceleration.test.tsx.snap | 4 +- .../create/create_acceleration.tsx | 2 +- .../utils/acceleration_utils.tsx | 18 +- .../associated_objects_details_flyout.tsx | 4 +- .../associated_objects_tab.tsx | 51 +- .../modules/associated_objects_table.tsx | 15 +- .../utils/associated_objects_tab_failure.tsx | 13 +- .../utils/associated_objects_tab_utils.tsx | 2 +- .../manage/manage_data_connections_table.tsx | 17 +- public/components/trace_analytics/index.scss | 7 +- public/types.ts | 1 - 16 files changed, 275 insertions(+), 431 deletions(-) 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 43d22c3ab3..a39d380dcc 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 @@ -311,6 +311,65 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object + +
+ + + + + + + +
+ @@ -319,9 +378,11 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge" /> - +
@@ -1214,11 +1271,6 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object "render": [Function], "sortable": true, }, - Object { - "field": "database", - "name": "Database", - "sortable": true, - }, Object { "field": "type", "name": "Type", @@ -1392,21 +1444,14 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object Object { "isSortAscending": undefined, "isSorted": false, - "key": "_data_s_database_1", - "name": "Database", - "onSort": [Function], - }, - Object { - "isSortAscending": undefined, - "isSorted": false, - "key": "_data_s_type_2", + "key": "_data_s_type_1", "name": "Type", "onSort": [Function], }, Object { "isSortAscending": undefined, "isSorted": false, - "key": "_data_s_accelerations_3", + "key": "_data_s_accelerations_2", "name": "Accelerations", "onSort": [Function], }, @@ -1640,74 +1685,16 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object - - - - - - -
- Database -
-
- - mock_database_1 - -
- - - @@ -2220,43 +2171,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object - -
- Database -
-
- - mock_database_1 - -
- - - @@ -2521,43 +2436,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object - -
- Database -
-
- - mock_database_1 - -
- - - @@ -2926,43 +2805,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object - -
- Database -
-
- - mock_database_1 - -
- - - @@ -3331,43 +3174,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object - -
- Database -
-
- - mock_database_1 - -
- - - @@ -3736,43 +3543,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object - -
- Database -
-
- - mock_database_1 - -
- - - @@ -4141,43 +3912,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object - -
- Database -
-
- - mock_database_1 - -
- - - @@ -5230,6 +4965,65 @@ exports[`AssociatedObjectsTab Component renders tab with no databases or objects
+ +
+ + + + + + + +
+
diff --git a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap index 031297a662..b119d3f40d 100644 --- a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap +++ b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap @@ -535,6 +535,24 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`] +
+ +
{ }); wrapper!.update(); - const expectedLocalizedTime = accelerationCache.lastUpdated - ? new Date(accelerationCache.lastUpdated).toLocaleString() - : ''; + const expectedLocalizedTime = 'Thu, 14 Mar 2024 04:05:53'; expect(wrapper!.text()).toContain(expectedLocalizedTime); }); diff --git a/public/components/datasources/components/__tests__/manage_data_connections_table.test.tsx b/public/components/datasources/components/__tests__/manage_data_connections_table.test.tsx index 9c4979cff7..e78b133086 100644 --- a/public/components/datasources/components/__tests__/manage_data_connections_table.test.tsx +++ b/public/components/datasources/components/__tests__/manage_data_connections_table.test.tsx @@ -18,6 +18,10 @@ jest.mock('react-router-dom', () => ({ }), })); +jest.mock('../../../../plugin', () => ({ + getRenderCreateAccelerationFlyout: jest.fn(() => jest.fn()), +})); + describe('Manage Data Connections Table test', () => { configure({ adapter: new Adapter() }); diff --git a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx index cb7a301460..afc5691c67 100644 --- a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx +++ b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx @@ -26,6 +26,7 @@ import { ACC_PANEL_DESC, getAccelerationName, AccelerationActionType, + CreateAccelerationFlyoutButton, } from './utils/acceleration_utils'; import { getRenderAccelerationDetailsFlyout } from '../../../../../plugin'; import { CatalogCacheManager } from '../../../../../framework/catalog_cache/cache_manager'; @@ -149,18 +150,6 @@ export const AccelerationTable = ({ ); }; - const CreateButton = () => { - return ( - <> - renderCreateAccelerationFlyout(dataSourceName)} fill> - Create acceleration - - - ); - }; - - const localUpdatedTime = updatedTime ? new Date(updatedTime).toLocaleString() : ''; - const AccelerationTableHeader = () => { return ( <> @@ -174,7 +163,10 @@ export const AccelerationTable = ({ - + @@ -185,7 +177,7 @@ export const AccelerationTable = ({ {'Last updated'} - {localUpdatedTime} + {updatedTime} )} diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap index 9a00777900..a7e3d0fabd 100644 --- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap +++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap @@ -1272,7 +1272,7 @@ Array [ - Close + Cancel @@ -2791,7 +2791,7 @@ Array [ - Close + Cancel diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx index b9f1aa25ee..cd327d655f 100644 --- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx +++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx @@ -219,7 +219,7 @@ export const CreateAcceleration = ({ - Close + Cancel 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 2c206a531b..8811aa42cd 100644 --- a/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx +++ b/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; -import { EuiHealth } from '@elastic/eui'; +import { EuiButton, EuiHealth } from '@elastic/eui'; import { CachedAcceleration } from '../../../../../../../common/types/data_connections'; import { redirectToExplorerOSIdx, @@ -77,6 +77,22 @@ export const generateAccelerationOperationQuery = ( } }; +export const CreateAccelerationFlyoutButton = ({ + dataSourceName, + renderCreateAccelerationFlyout, +}: { + dataSourceName: string; + renderCreateAccelerationFlyout: (dataSourceName: string) => void; +}) => { + return ( + <> + renderCreateAccelerationFlyout(dataSourceName)} fill> + Create acceleration + + + ); +}; + export const AccelerationStatus = ({ status }: { status: string }) => { const label = status; let color; 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 b234e551af..608332eba5 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 @@ -146,9 +146,7 @@ export const AssociatedObjectsDetailsFlyout = ({ const name = getAccelerationName(item, datasourceName); return ( - renderAccelerationDetailsFlyout(name, item, datasourceName, handleRefresh) - } + onClick={() => renderAccelerationDetailsFlyout(item, datasourceName, handleRefresh)} > {name} 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 c625a367b4..6f1bb27302 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 @@ -38,7 +38,12 @@ import { AssociatedObjectsTabLoading } from './utils/associated_objects_tab_load import { AssociatedObjectsRefreshButton } from './utils/associated_objects_refresh_button'; import { CatalogCacheManager } from '../../../../../../public/framework/catalog_cache/cache_manager'; import { AssociatedObjectsTable } from './modules/associated_objects_table'; -import { getAccelerationName } from '../accelerations/utils/acceleration_utils'; +import { + CreateAccelerationFlyoutButton, + getAccelerationName, +} from '../accelerations/utils/acceleration_utils'; +import { getRenderCreateAccelerationFlyout } from '../../../../../../public/plugin'; +import { AssociatedObjectsTabFailure } from './utils/associated_objects_tab_failure'; export interface AssociatedObjectsTabProps { datasource: DatasourceDetails; @@ -57,6 +62,8 @@ export const AssociatedObjectsTab: React.FC = (props) const [cachedAccelerations, setCachedAccelerations] = useState([]); const [associatedObjects, setAssociatedObjects] = useState([]); const [isFirstTimeLoading, setIsFirstTimeLoading] = useState(true); + const [databasesLoadFailed, setDatabasesLoadFailed] = useState(false); + const [associatedObjectsLoadFailed, setAssociatedObjectsLoadFailed] = useState(false); const { databasesLoadStatus, @@ -92,7 +99,6 @@ export const AssociatedObjectsTab: React.FC = (props) const onRefreshButtonClick = () => { if (!isCatalogCacheFetching(databasesLoadStatus, tablesLoadStatus, accelerationsLoadStatus)) { startLoadingDatabases(datasource.name); - startLoadingAccelerations(datasource.name); setIsRefreshing(true); } }; @@ -139,6 +145,12 @@ export const AssociatedObjectsTab: React.FC = (props) onClick={onRefreshButtonClick} /> + + + ); }; @@ -166,6 +178,12 @@ export const AssociatedObjectsTab: React.FC = (props) if (status === DirectQueryLoadingStatus.SUCCESS) { setCachedDatabases(datasourceCache.databases); setIsFirstTimeLoading(false); + } else if ( + status === DirectQueryLoadingStatus.FAILED || + status === DirectQueryLoadingStatus.CANCELED + ) { + setDatabasesLoadFailed(true); + setIsFirstTimeLoading(false); } }, [datasource.name, databasesLoadStatus]); @@ -200,7 +218,7 @@ export const AssociatedObjectsTab: React.FC = (props) setCachedTables(databaseCache.tables); } if ( - accelerationsCache.status === CachedDataSourceStatus.Empty && + (accelerationsCache.status === CachedDataSourceStatus.Empty || isRefreshing) && !isCatalogCacheFetching(accelerationsLoadStatus) ) { startLoadingAccelerations(datasource.name); @@ -222,9 +240,23 @@ export const AssociatedObjectsTab: React.FC = (props) ); if (tablesStatus === DirectQueryLoadingStatus.SUCCESS) { setCachedTables(databaseCache.tables); + } else if ( + tablesStatus === DirectQueryLoadingStatus.FAILED || + tablesStatus === DirectQueryLoadingStatus.CANCELED + ) { + setAssociatedObjectsLoadFailed(true); + setIsRefreshing(false); + setIsObjectsLoading(false); } if (accelerationsStatus === DirectQueryLoadingStatus.SUCCESS) { setCachedAccelerations(accelerationsCache.accelerations); + } else if ( + accelerationsStatus === DirectQueryLoadingStatus.FAILED || + accelerationsStatus === DirectQueryLoadingStatus.CANCELED + ) { + setAssociatedObjectsLoadFailed(true); + setIsRefreshing(false); + setIsObjectsLoading(false); } handleObjectsLoad(databaseCache, accelerationsCache); } @@ -280,13 +312,14 @@ export const AssociatedObjectsTab: React.FC = (props) database: acceleration.database, type: ACCELERATION_INDEX_TYPES.find((accelType) => accelType.value === acceleration.type)! .value, - // Temporary dummy array accelerations: [], columns: undefined, })); setAssociatedObjects([...tableObjects, ...accelerationObjects]); }, [selectedDatabase, cachedTables, cachedAccelerations]); + const renderCreateAccelerationFlyout = getRenderCreateAccelerationFlyout(); + return ( <> @@ -297,15 +330,17 @@ export const AssociatedObjectsTab: React.FC = (props) {isFirstTimeLoading ? ( + ) : databasesLoadFailed ? ( + ) : ( <> {cachedDatabases.length === 0 ? ( ) : ( <> - + - + = (props) - {isObjectsLoading && isFirstTimeLoading ? ( + {isFirstTimeLoading || (isObjectsLoading && !isRefreshing) ? ( + ) : associatedObjectsLoadFailed ? ( + ) : ( <> {cachedTables.length > 0 || cachedAccelerations.length > 0 ? ( 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 bba26f237c..0cb1834054 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 @@ -74,11 +74,7 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { } else { const acceleration = cachedAccelerations.find((acc) => acc.indexName === item.id); if (acceleration) { - renderAccelerationDetailsFlyout( - getAccelerationName(acceleration), - acceleration, - datasourceName - ); + renderAccelerationDetailsFlyout(acceleration, datasourceName); } } }} @@ -87,13 +83,6 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { ), }, - { - field: 'database', - name: i18n.translate('datasources.associatedObjectsTab.column.database', { - defaultMessage: 'Database', - }), - sortable: true, - }, { field: 'type', name: i18n.translate('datasources.associatedObjectsTab.column.type', { @@ -119,7 +108,7 @@ export const AssociatedObjectsTable = (props: AssociatedObjectsTableProps) => { return ( { - renderAccelerationDetailsFlyout(name, accelerations[0], datasourceName); + renderAccelerationDetailsFlyout(accelerations[0], datasourceName); }} > {name} diff --git a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_failure.tsx b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_failure.tsx index 8bf05a293d..be3277448d 100644 --- a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_failure.tsx +++ b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_failure.tsx @@ -6,12 +6,13 @@ import { EuiEmptyPrompt } from '@elastic/eui'; import React from 'react'; -export const AssociatedObjectsTabEmpty: React.FC = () => { +interface AssociatedObjectsTabFailureProps { + type: string; +} + +export const AssociatedObjectsTabFailure = (props: AssociatedObjectsTabFailureProps) => { + const { type } = props; return ( - Error} - body={

There was an error loading your databases.

} - /> + Error} body={

Error loading {type}

} /> ); }; 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 25f0d602b2..6b8332880c 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 @@ -15,7 +15,7 @@ export const ASSC_OBJ_TABLE_SUBJ = 'associatedObjectsTable'; export const ASSC_OBJ_TABLE_ACC_COLUMN_NAME = 'accelerations'; -export const ASSC_OBJ_TABLE_SEARCH_HINT = 'accelerations:skipping_index_1'; +export const ASSC_OBJ_TABLE_SEARCH_HINT = 'Search for objects'; export const ASSC_OBJ_PANEL_TITLE = 'Associated objects'; 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 5f67869ee0..ec7f3e268b 100644 --- a/public/components/datasources/components/manage/manage_data_connections_table.tsx +++ b/public/components/datasources/components/manage/manage_data_connections_table.tsx @@ -33,6 +33,7 @@ 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'; interface DataConnection { connectionType: DatasourceType; @@ -114,16 +115,6 @@ export const ManageDataConnectionsTable = (props: HomeProps) => { }; const actions = [ - { - name: 'Edit', - isPrimary: true, - icon: 'pencil', - type: 'icon', - onClick: (datasource: DataConnection) => { - window.location.href = `#/manage/${datasource.name}`; - }, - 'data-test-subj': 'action-edit', - }, { name: (datasource: DataConnection) => `Query in ${ @@ -145,8 +136,8 @@ export const ManageDataConnectionsTable = (props: HomeProps) => { icon: 'bolt', type: 'icon', available: (datasource: DataConnection) => datasource.connectionType !== 'PROMETHEUS', - onClick: () => { - application!.navigateToApp('opensearch-query-workbench'); + onClick: (datasource: DataConnection) => { + renderCreateAccelerationFlyout(datasource.name); }, 'data-test-subj': 'action-accelerate', }, @@ -236,6 +227,8 @@ export const ManageDataConnectionsTable = (props: HomeProps) => { return { connectionType, name, dsStatus, data: { name, connectionType } }; }); + const renderCreateAccelerationFlyout = getRenderCreateAccelerationFlyout(); + return ( diff --git a/public/components/trace_analytics/index.scss b/public/components/trace_analytics/index.scss index 90dca4b7d9..cf6bb85cf1 100644 --- a/public/components/trace_analytics/index.scss +++ b/public/components/trace_analytics/index.scss @@ -51,4 +51,9 @@ th[data-test-subj^='tableHeaderCell_dashboard_latency_variance'] { position: relative; left: 10px; } -} \ No newline at end of file +} + +.database-selector { + padding-right: 24px; + border-right: 1px solid $euiBorderColor; +} diff --git a/public/types.ts b/public/types.ts index e63805b594..83cc3a619c 100644 --- a/public/types.ts +++ b/public/types.ts @@ -41,7 +41,6 @@ export interface ObservabilitySetup {} export interface ObservabilityStart { renderAccelerationDetailsFlyout: ( - index: string, acceleration: CachedAcceleration, datasourceName: string, handleRefresh?: () => void