[Log Explorer] Update DataGrid default preferences (#165718)

## 📓 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.

<img width="3004" alt="data_grid"
src="48d69762-969a-49a5-a6b1-fc86eeaf86a7">

---------

Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

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';
 

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;

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 => {

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 },
+};

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);
   };
 
 /**

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/**/*"]
 }

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'],
             }),
           }),
         });

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 () => {

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'],
             }),
           }),
         });

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 () => {