From d76865787e3c7854a9663c421350a3e9e52f373e Mon Sep 17 00:00:00 2001 From: Marco Antonio Ghiani Date: Tue, 12 Sep 2023 10:58:38 +0200 Subject: [PATCH] [Log Explorer] Update DataGrid default preferences (#165718) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 📓 Summary Closes #165482 Closes #165489 This PR apply new default preferences to the DataGrid for the Log Explorer: - Display and resize additional columns for `service.name (240px)` and `host.name (320px)` fields. The column's width is taken by the average length of those specific fields. - Display rows with single-line height by default. data_grid --------- Co-authored-by: Marco Antonio Ghiani Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- packages/kbn-unified-data-table/index.ts | 1 + .../kbn-unified-data-table/src/constants.ts | 11 ++++++++ .../src/hooks/use_row_heights_options.ts | 21 +++++---------- .../plugins/log_explorer/common/constants.ts | 13 +++++++++ .../src/url_state_storage_service.ts | 27 +++++++++++++++---- x-pack/plugins/log_explorer/tsconfig.json | 1 + .../columns_selection.ts | 4 +-- .../observability_log_explorer/header_menu.ts | 7 ++++- .../columns_selection.ts | 4 +-- .../observability_log_explorer/header_menu.ts | 7 ++++- 10 files changed, 70 insertions(+), 26 deletions(-) diff --git a/packages/kbn-unified-data-table/index.ts b/packages/kbn-unified-data-table/index.ts index 2c5e995619436..cc692420cd209 100644 --- a/packages/kbn-unified-data-table/index.ts +++ b/packages/kbn-unified-data-table/index.ts @@ -9,6 +9,7 @@ export { UnifiedDataTable, DataLoadingState } from './src/components/data_table'; export type { UnifiedDataTableProps } from './src/components/data_table'; export { getDisplayedColumns } from './src/utils/columns'; +export { ROWS_HEIGHT_OPTIONS } from './src/constants'; export { JSONCodeEditorCommonMemoized } from './src/components/json_code_editor/json_code_editor_common'; diff --git a/packages/kbn-unified-data-table/src/constants.ts b/packages/kbn-unified-data-table/src/constants.ts index c85751756cefd..c1272cf00c8a3 100644 --- a/packages/kbn-unified-data-table/src/constants.ts +++ b/packages/kbn-unified-data-table/src/constants.ts @@ -11,6 +11,17 @@ export const DEFAULT_ROWS_PER_PAGE = 100; export const MAX_LOADED_GRID_ROWS = 10000; export const ROWS_PER_PAGE_OPTIONS = [10, 25, 50, DEFAULT_ROWS_PER_PAGE, 250, 500]; +/** + * Row height might be a value from -1 to 20 + * A value of -1 automatically adjusts the row height to fit the contents. + * A value of 0 displays the content in a single line. + * A value from 1 to 20 represents number of lines of Document explorer row to display. + */ +export const ROWS_HEIGHT_OPTIONS = { + auto: -1, + single: 0, + default: 3, +}; export const defaultMonacoEditorWidth = 370; export const defaultTimeColumnWidth = 212; diff --git a/packages/kbn-unified-data-table/src/hooks/use_row_heights_options.ts b/packages/kbn-unified-data-table/src/hooks/use_row_heights_options.ts index 9d460c8ea2ba9..4be574db9e396 100644 --- a/packages/kbn-unified-data-table/src/hooks/use_row_heights_options.ts +++ b/packages/kbn-unified-data-table/src/hooks/use_row_heights_options.ts @@ -15,6 +15,7 @@ import { getStoredRowHeight, updateStoredRowHeight, } from '../utils/row_heights'; +import { ROWS_HEIGHT_OPTIONS } from '../constants'; interface UseRowHeightProps { rowHeightState?: number; @@ -24,36 +25,26 @@ interface UseRowHeightProps { consumer: string; } -/** - * Row height might be a value from -1 to 20 - * A value of -1 automatically adjusts the row height to fit the contents. - * A value of 0 displays the content in a single line. - * A value from 1 to 20 represents number of lines of Document explorer row to display. - */ -const SINGLE_ROW_HEIGHT_OPTION = 0; -const AUTO_ROW_HEIGHT_OPTION = -1; -const DEFAULT_ROW_HEIGHT_OPTION = 3; - /** * Converts rowHeight of EuiDataGrid to rowHeight number (-1 to 20) */ const serializeRowHeight = (rowHeight?: EuiDataGridRowHeightOption): number => { if (rowHeight === 'auto') { - return AUTO_ROW_HEIGHT_OPTION; + return ROWS_HEIGHT_OPTIONS.auto; } else if (typeof rowHeight === 'object' && rowHeight.lineCount) { return rowHeight.lineCount; // custom } - return SINGLE_ROW_HEIGHT_OPTION; + return ROWS_HEIGHT_OPTIONS.single; }; /** * Converts rowHeight number (-1 to 20) of EuiDataGrid rowHeight */ const deserializeRowHeight = (number: number): EuiDataGridRowHeightOption | undefined => { - if (number === AUTO_ROW_HEIGHT_OPTION) { + if (number === ROWS_HEIGHT_OPTIONS.auto) { return 'auto'; - } else if (number === SINGLE_ROW_HEIGHT_OPTION) { + } else if (number === ROWS_HEIGHT_OPTIONS.single) { return undefined; } @@ -64,7 +55,7 @@ export const useRowHeightsOptions = ({ rowHeightState, onUpdateRowHeight, storage, - configRowHeight = DEFAULT_ROW_HEIGHT_OPTION, + configRowHeight = ROWS_HEIGHT_OPTIONS.default, consumer, }: UseRowHeightProps) => { return useMemo((): EuiDataGridRowHeightsOptions => { diff --git a/x-pack/plugins/log_explorer/common/constants.ts b/x-pack/plugins/log_explorer/common/constants.ts index fc1c572ebae26..e0ffcafed69e1 100644 --- a/x-pack/plugins/log_explorer/common/constants.ts +++ b/x-pack/plugins/log_explorer/common/constants.ts @@ -9,4 +9,17 @@ export const LOG_EXPLORER_PROFILE_ID = 'log-explorer'; // Fields constants export const TIMESTAMP_FIELD = '@timestamp'; +export const HOST_NAME_FIELD = 'host.name'; export const MESSAGE_FIELD = 'message'; +export const SERVICE_NAME_FIELD = 'service.name'; + +// Sizing +export const DATA_GRID_COLUMN_WIDTH_SMALL = 240; +export const DATA_GRID_COLUMN_WIDTH_MEDIUM = 320; + +// UI preferences +export const DATA_GRID_DEFAULT_COLUMNS = [SERVICE_NAME_FIELD, HOST_NAME_FIELD, MESSAGE_FIELD]; +export const DATA_GRID_COLUMNS_PREFERENCES = { + [HOST_NAME_FIELD]: { width: DATA_GRID_COLUMN_WIDTH_MEDIUM }, + [SERVICE_NAME_FIELD]: { width: DATA_GRID_COLUMN_WIDTH_SMALL }, +}; diff --git a/x-pack/plugins/log_explorer/public/state_machines/log_explorer_profile/src/url_state_storage_service.ts b/x-pack/plugins/log_explorer/public/state_machines/log_explorer_profile/src/url_state_storage_service.ts index f2e467f15afff..1864a4a558dac 100644 --- a/x-pack/plugins/log_explorer/public/state_machines/log_explorer_profile/src/url_state_storage_service.ts +++ b/x-pack/plugins/log_explorer/public/state_machines/log_explorer_profile/src/url_state_storage_service.ts @@ -7,9 +7,13 @@ import { InvokeCreator } from 'xstate'; import { pick, mapValues } from 'lodash'; import deepEqual from 'fast-deep-equal'; -import { DiscoverStateContainer } from '@kbn/discover-plugin/public'; +import { DiscoverAppState, DiscoverStateContainer } from '@kbn/discover-plugin/public'; import type { DataView } from '@kbn/data-views-plugin/public'; -import { MESSAGE_FIELD } from '../../../../common/constants'; +import { ROWS_HEIGHT_OPTIONS } from '@kbn/unified-data-table'; +import { + DATA_GRID_COLUMNS_PREFERENCES, + DATA_GRID_DEFAULT_COLUMNS, +} from '../../../../common/constants'; import { AllDatasetSelection, decodeDatasetSelectionId, @@ -178,14 +182,27 @@ export const updateStateContainer = LogExplorerProfileEvent > => async () => { - const { columns } = stateContainer.appState.getState(); + const { columns, grid, rowHeight } = stateContainer.appState.getState(); + const stateUpdates: DiscoverAppState = {}; + // Update data grid columns list const shouldSetDefaultColumns = stateContainer.appState.isEmptyURL() || !columns || columns.length === 0; - if (shouldSetDefaultColumns) { - stateContainer.appState.update({ columns: [MESSAGE_FIELD] }, true); + stateUpdates.columns = DATA_GRID_DEFAULT_COLUMNS; } + + // Configure DataGrid columns preferences + const initialColumnsPreferences = grid?.columns ?? {}; + stateUpdates.grid = { + columns: { ...DATA_GRID_COLUMNS_PREFERENCES, ...initialColumnsPreferences }, + }; + + // Configure rowHeight preference + stateUpdates.rowHeight = rowHeight ?? ROWS_HEIGHT_OPTIONS.single; + + // Finally batch update state app state + stateContainer.appState.update(stateUpdates, true); }; /** diff --git a/x-pack/plugins/log_explorer/tsconfig.json b/x-pack/plugins/log_explorer/tsconfig.json index 756f4bd6b156a..9cfb123160983 100644 --- a/x-pack/plugins/log_explorer/tsconfig.json +++ b/x-pack/plugins/log_explorer/tsconfig.json @@ -20,6 +20,7 @@ "@kbn/data-plugin", "@kbn/unified-field-list", "@kbn/core-application-browser", + "@kbn/unified-data-table", ], "exclude": ["target/**/*"] } diff --git a/x-pack/test/functional/apps/observability_log_explorer/columns_selection.ts b/x-pack/test/functional/apps/observability_log_explorer/columns_selection.ts index c61a2586522fd..b8af643d828c7 100644 --- a/x-pack/test/functional/apps/observability_log_explorer/columns_selection.ts +++ b/x-pack/test/functional/apps/observability_log_explorer/columns_selection.ts @@ -9,7 +9,7 @@ import rison from '@kbn/rison'; import querystring from 'querystring'; import { FtrProviderContext } from '../../ftr_provider_context'; -const defaultLogColumns = ['@timestamp', 'message']; +const defaultLogColumns = ['@timestamp', 'service.name', 'host.name', 'message']; export default function ({ getService, getPageObjects }: FtrProviderContext) { const esArchiver = getService('esArchiver'); @@ -44,7 +44,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.observabilityLogExplorer.navigateTo({ search: querystring.stringify({ _a: rison.encode({ - columns: ['message', 'data_stream.namespace'], + columns: ['service.name', 'host.name', 'message', 'data_stream.namespace'], }), }), }); diff --git a/x-pack/test/functional/apps/observability_log_explorer/header_menu.ts b/x-pack/test/functional/apps/observability_log_explorer/header_menu.ts index 0831bec27b7ed..ee15563b7f208 100644 --- a/x-pack/test/functional/apps/observability_log_explorer/header_menu.ts +++ b/x-pack/test/functional/apps/observability_log_explorer/header_menu.ts @@ -60,7 +60,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); await retry.try(async () => { - expect(await PageObjects.discover.getColumnHeaders()).to.eql(['@timestamp', 'message']); + expect(await PageObjects.discover.getColumnHeaders()).to.eql([ + '@timestamp', + 'service.name', + 'host.name', + 'message', + ]); }); await retry.try(async () => { diff --git a/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/columns_selection.ts b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/columns_selection.ts index 05edfb9a29350..955ef8d22055f 100644 --- a/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/columns_selection.ts +++ b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/columns_selection.ts @@ -9,7 +9,7 @@ import rison from '@kbn/rison'; import querystring from 'querystring'; import { FtrProviderContext } from '../../../ftr_provider_context'; -const defaultLogColumns = ['@timestamp', 'message']; +const defaultLogColumns = ['@timestamp', 'service.name', 'host.name', 'message']; export default function ({ getService, getPageObjects }: FtrProviderContext) { const esArchiver = getService('esArchiver'); @@ -46,7 +46,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.observabilityLogExplorer.navigateTo({ search: querystring.stringify({ _a: rison.encode({ - columns: ['message', 'data_stream.namespace'], + columns: ['service.name', 'host.name', 'message', 'data_stream.namespace'], }), }), }); diff --git a/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/header_menu.ts b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/header_menu.ts index 65207e6e3aafc..0b40780aace2b 100644 --- a/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/header_menu.ts +++ b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/header_menu.ts @@ -61,7 +61,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); await retry.try(async () => { - expect(await PageObjects.discover.getColumnHeaders()).to.eql(['@timestamp', 'message']); + expect(await PageObjects.discover.getColumnHeaders()).to.eql([ + '@timestamp', + 'service.name', + 'host.name', + 'message', + ]); }); await retry.try(async () => {