elastic · tonyghiani · Sep 30, 2024 · Sep 5, 2024 · Sep 6, 2024 · Sep 6, 2024
@@ -43,7 +43,7 @@ const degradedDocButtonLabelWhenPresent = i18n.translate(
   'discover.customControl.degradedDocPresent',
   {
     defaultMessage:
-      "This document couldn't be parsed correctly. Not all fields are properly populated",
+      "This document couldn't be parsed correctly. Not all fields are properly populated.",
   }
 );
 

@@ -15,7 +15,7 @@ export interface LogsContextService {
 }
 
 export interface LogsContextServiceDeps {
-  logsDataAccessPlugin?: LogsDataAccessPluginStart;
+  logsDataAccess?: LogsDataAccessPluginStart;
 }
 
 export const DEFAULT_ALLOWED_LOGS_BASE_PATTERNS = [
@@ -31,13 +31,11 @@ export const DEFAULT_ALLOWED_LOGS_BASE_PATTERNS_REGEXP = createRegExpPatternFrom
   DEFAULT_ALLOWED_LOGS_BASE_PATTERNS
 );
 
-export const createLogsContextService = async ({
-  logsDataAccessPlugin,
-}: LogsContextServiceDeps) => {
+export const createLogsContextService = async ({ logsDataAccess }: LogsContextServiceDeps) => {
   let logSources: string[] | undefined;
 
-  if (logsDataAccessPlugin) {
-    const logSourcesService = logsDataAccessPlugin.services.logSourcesService;
+  if (logsDataAccess) {
+    const logSourcesService = logsDataAccess.services.logSourcesService;
     logSources = (await logSourcesService.getLogSources())
       .map((logSource) => logSource.indexPattern)
       .join(',') // TODO: Will be replaced by helper in: https://github.com/elastic/kibana/pull/192003

@@ -7,6 +7,5 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export * from './get_field_from_doc';
 export * from './get_log_level_color';
 export * from './get_log_level_coalesed_value';
@@ -9,7 +9,10 @@
 
 import { DataTableRecord } from '../types';
 
-export const getFieldValue = (record: DataTableRecord, field: string) => {
+export const getFieldValue = <TRecord extends DataTableRecord, TField extends string>(
+  record: TRecord,
+  field: TField & keyof TRecord['flattened']
+): TRecord['flattened'][TField] => {
   const value = record.flattened[field];
   return Array.isArray(value) ? value[0] : value;
 };
@@ -32,19 +32,9 @@ export function getLogDocumentOverview(
   const levelArray = doc.flattened[fieldConstants.LOG_LEVEL_FIELD];
   const level =
     Array.isArray(levelArray) && levelArray.length ? levelArray[0].toLowerCase() : levelArray;
-  const messageArray = doc.flattened[fieldConstants.MESSAGE_FIELD];
-  const message =
-    Array.isArray(messageArray) && messageArray.length ? messageArray[0] : messageArray;
-  const errorMessageArray = doc.flattened[fieldConstants.ERROR_MESSAGE_FIELD];
-  const errorMessage =
-    Array.isArray(errorMessageArray) && errorMessageArray.length
-      ? errorMessageArray[0]
-      : errorMessageArray;
-  const eventOriginalArray = doc.flattened[fieldConstants.EVENT_ORIGINAL_FIELD];
-  const eventOriginal =
-    Array.isArray(eventOriginalArray) && eventOriginalArray.length
-      ? eventOriginalArray[0]
-      : eventOriginalArray;
+  const message = formatField(fieldConstants.MESSAGE_FIELD);
+  const errorMessage = formatField(fieldConstants.ERROR_MESSAGE_FIELD);
+  const eventOriginal = formatField(fieldConstants.EVENT_ORIGINAL_FIELD);
   const timestamp = formatField(fieldConstants.TIMESTAMP_FIELD);
 
   // Service

@@ -7,17 +7,17 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { getFieldFromDoc, LogDocument, StackTraceFields } from '..';
+import { getFieldValue, LogDocument, StackTraceFields } from '..';
 import {
   ERROR_EXCEPTION_STACKTRACE,
   ERROR_LOG_STACKTRACE,
   ERROR_STACK_TRACE,
 } from '../field_constants';
 
 export const getStacktraceFields = (doc: LogDocument): StackTraceFields => {
-  const errorStackTrace = getFieldFromDoc(doc, ERROR_STACK_TRACE);
-  const errorExceptionStackTrace = getFieldFromDoc(doc, ERROR_EXCEPTION_STACKTRACE);
-  const errorLogStackTrace = getFieldFromDoc(doc, ERROR_LOG_STACKTRACE);
+  const errorStackTrace = getFieldValue(doc, ERROR_STACK_TRACE);
+  const errorExceptionStackTrace = getFieldValue(doc, ERROR_EXCEPTION_STACKTRACE);
+  const errorLogStackTrace = getFieldValue(doc, ERROR_LOG_STACKTRACE);
 
   return {
     [ERROR_STACK_TRACE]: errorStackTrace,

@@ -13,11 +13,12 @@ export {
   RowHeightSettings,
   type RowHeightSettingsProps,
 } from './src/components/row_height_settings';
-export { getDisplayedColumns } from './src/utils/columns';
+export { getDisplayedColumns, SOURCE_COLUMN } from './src/utils/columns';
 export { getTextBasedColumnsMeta } from './src/utils/get_columns_meta';
 export { ROWS_HEIGHT_OPTIONS, DataGridDensity } from './src/constants';
 
 export { JSONCodeEditorCommonMemoized } from './src/components/json_code_editor/json_code_editor_common';
+export { SourceDocument } from './src/components/source_document';
 
 export * from './src/types';
 export * as columnActions from './src/components/actions/columns';

@@ -46,7 +46,7 @@ export const getColumnDisplayName = (
 
   if (columnName === '_source') {
     return i18n.translate('unifiedDataTable.grid.documentHeader', {
-      defaultMessage: 'Document',
+      defaultMessage: 'Summary',
     });
   }
 

@@ -9,10 +9,12 @@
 
 import type { DataView } from '@kbn/data-views-plugin/public';
 
+export const SOURCE_COLUMN = '_source';
+
 // We store this outside the function as a constant, so we're not creating a new array every time
 // the function is returning this. A changing array might cause the data grid to think it got
 // new columns, and thus performing worse than using the same array over multiple renders.
-const SOURCE_ONLY = ['_source'];
+const SOURCE_ONLY = [SOURCE_COLUMN];
 
 /**
  * Function to provide fallback when

@@ -27,10 +27,10 @@ const defaultProps: EuiDataGridCellPopoverElementProps = {
   cellContentsElement: (<div>{'cellContentsElement'}</div>) as unknown as HTMLDivElement,
 };
 
-const renderTestComponent = () => {
+const renderTestComponent = (overrideProps = {}) => {
   const Renderer = getCustomCellPopoverRenderer();
 
-  render(<Renderer {...defaultProps} />);
+  render(<Renderer {...defaultProps} {...overrideProps} />);
 };
 
 describe('getCustomCellPopoverRenderer', () => {
@@ -45,4 +45,17 @@ describe('getCustomCellPopoverRenderer', () => {
       panelClassName: 'unifiedDataTable__cellPopover',
     });
   });
+
+  it('should render a DefaultCellPopover with a wider panel for allowed columns', () => {
+    renderTestComponent({ columnId: '_source' });
+
+    expect(setCellPopoverPropsMocks).toHaveBeenCalledWith({
+      panelClassName: 'unifiedDataTable__cellPopover',
+      panelProps: {
+        css: {
+          maxInlineSize: 'min(75vw, 600px) !important',
+        },
+      },
+    });
+  });
 });
@@ -9,6 +9,9 @@
 
 import { EuiDataGridCellPopoverElementProps } from '@elastic/eui';
 import React, { memo, useEffect } from 'react';
+import { SOURCE_COLUMN } from './columns';
+
+const FIELDS_WITH_WIDE_POPOVER = [SOURCE_COLUMN];
 
 /*
  *
@@ -23,13 +26,20 @@ export const getCustomCellPopoverRenderer = () => {
   const RenderCustomCellPopoverMemoized = memo(function RenderCustomCellPopoverMemoized(
     props: EuiDataGridCellPopoverElementProps
   ) {
-    const { setCellPopoverProps, DefaultCellPopover } = props;
+    const { columnId, setCellPopoverProps, DefaultCellPopover } = props;
 
     useEffect(() => {
-      setCellPopoverProps({
+      const popoverProps: Parameters<typeof setCellPopoverProps>[0] = {
         panelClassName: 'unifiedDataTable__cellPopover',
-      });
-    }, [setCellPopoverProps]);
+      };
+
+      const shouldRenderWidePopover = FIELDS_WITH_WIDE_POPOVER.includes(columnId);
+      if (shouldRenderWidePopover) {
+        popoverProps.panelProps = { css: { maxInlineSize: 'min(75vw, 600px) !important' } };
+      }
+
+      setCellPopoverProps(popoverProps);
+    }, [columnId, setCellPopoverProps]);
 
     return <DefaultCellPopover {...props} />;
   });

@@ -28,7 +28,12 @@ import {
   ROW_HEIGHT_OPTION,
   SHOW_MULTIFIELDS,
 } from '@kbn/discover-utils';
-import { DataLoadingState, UnifiedDataTableProps } from '@kbn/unified-data-table';
+import {
+  DataGridDensity,
+  DataLoadingState,
+  ROWS_HEIGHT_OPTIONS,
+  UnifiedDataTableProps,
+} from '@kbn/unified-data-table';
 import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { useQuerySubscriber } from '@kbn/unified-field-list';
 import useObservable from 'react-use/lib/useObservable';
@@ -173,8 +178,13 @@ export function ContextAppContent({
   const getCellRenderersAccessor = useProfileAccessor('getCellRenderers');
   const cellRenderers = useMemo(() => {
     const getCellRenderers = getCellRenderersAccessor(() => ({}));
-    return getCellRenderers();
-  }, [getCellRenderersAccessor]);
+    return getCellRenderers({
+      actions: { addFilter },
+      dataView,
+      density: DataGridDensity.COMPACT,
+      rowHeight: ROWS_HEIGHT_OPTIONS.single,
+    });
+  }, [addFilter, dataView, getCellRenderersAccessor]);
 
   const dataSource = useMemo(() => createDataSource({ dataView, query: undefined }), [dataView]);
   const { filters } = useQuerySubscriber({ data: services.data });

@@ -144,8 +144,7 @@ describe('Discover documents layout', () => {
       const discoverGridComponent = component.find(DiscoverGrid);
       expect(discoverGridComponent.exists()).toBeTruthy();
       expect(Object.keys(discoverGridComponent.prop('externalCustomRenderers')!)).toEqual([
-        'content',
-        'resource',
+        '_source',
         'rootProfile',
       ]);
     });

@@ -72,6 +72,7 @@ import { useContextualGridCustomisations } from '../../hooks/grid_customisations
 import { useIsEsqlMode } from '../../hooks/use_is_esql_mode';
 import { useAdditionalFieldGroups } from '../../hooks/sidebar/use_additional_field_groups';
 import {
+  CellRenderersExtensionParams,
   DISCOVER_CELL_ACTIONS_TRIGGER,
   useAdditionalCellActions,
   useProfileAccessor,
@@ -306,16 +307,26 @@ function DiscoverDocumentsComponent({
     [dataView, onAddColumn, onAddFilter, onRemoveColumn, query, savedSearch.id, setExpandedDoc]
   );
 
+  const cellRendererParams: CellRenderersExtensionParams = useMemo(
+    () => ({
+      actions: { addFilter: onAddFilter },
+      dataView,
+      density,
+      rowHeight,
+    }),
+    [onAddFilter, dataView, density, rowHeight]
+  );
+
   const { rowAdditionalLeadingControls } = useDiscoverCustomization('data_table') || {};
   const { customCellRenderer, customGridColumnsConfiguration } =
-    useContextualGridCustomisations() || {};
+    useContextualGridCustomisations(cellRendererParams) || {};
   const additionalFieldGroups = useAdditionalFieldGroups();
 
   const getCellRenderersAccessor = useProfileAccessor('getCellRenderers');
   const cellRenderers = useMemo(() => {
     const getCellRenderers = getCellRenderersAccessor(() => customCellRenderer ?? {});
-    return getCellRenderers();
-  }, [customCellRenderer, getCellRenderersAccessor]);
+    return getCellRenderers(cellRendererParams);
+  }, [cellRendererParams, customCellRenderer, getCellRenderersAccessor]);
 
   const documents = useObservable(stateContainer.dataState.data$.documents$);
 

@@ -8,22 +8,23 @@
  */
 
 import { useMemo } from 'react';
-import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import { useDiscoverCustomization } from '../../../../customizations';
-import { getLogsVirtualColumnsConfiguration } from './logs';
+import { DataGridColumnsDeps, getDataGridColumnsConfiguration } from './logs';
 
 export * from './logs';
 
-export const useContextualGridCustomisations = () => {
-  const { data } = useDiscoverServices();
+type ContextualGridCustomizationParams = DataGridColumnsDeps;
+
+export const useContextualGridCustomisations = (params: ContextualGridCustomizationParams) => {
   // TODO / NOTE: This will eventually rely on Discover's context resolution to determine which fields
   // are returned based on the data type.
   const isLogsContext = useDiscoverCustomization('data_table')?.logsEnabled;
 
   const virtualColumnsConfiguration = useMemo(() => {
     if (!isLogsContext) return null;
-    if (isLogsContext) return getLogsVirtualColumnsConfiguration(data);
-  }, [data, isLogsContext]);
+
+    return getDataGridColumnsConfiguration(params);
+  }, [isLogsContext, params]);
 
   return virtualColumnsConfiguration;
 };
@@ -7,26 +7,27 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { DataPublicPluginStart } from '@kbn/data-plugin/public';
-import { CONTENT_FIELD, RESOURCE_FIELD } from '../../../../../common/data_types/logs/constants';
-import { renderCell } from '../../../../components/discover_grid/virtual_columns/logs/cell_renderer';
-import { renderColumn } from '../../../../components/discover_grid/virtual_columns/logs/column';
+import { SOURCE_COLUMN } from '@kbn/unified-data-table';
+import {
+  SummaryColumnGetterDeps,
+  getSummaryColumn,
+} from '../../../../components/data_types/logs/summary_column';
 
-export const getLogsVirtualColumnsConfiguration = (data: DataPublicPluginStart) => {
+export type DataGridColumnsDeps = CustomCellRendererDeps;
+
+export const getDataGridColumnsConfiguration = (params: DataGridColumnsDeps) => {
   return {
-    customCellRenderer: createCustomCellRenderer({ data }),
+    customCellRenderer: createCustomCellRenderer(params),
     customGridColumnsConfiguration: createCustomGridColumnsConfiguration(),
   };
 };
 
-export const createCustomCellRenderer = ({ data }: { data: DataPublicPluginStart }) => {
+type CustomCellRendererDeps = SummaryColumnGetterDeps;
+
+export const createCustomCellRenderer = (params: CustomCellRendererDeps) => {
   return {
-    [CONTENT_FIELD]: renderCell(CONTENT_FIELD, { data }),
-    [RESOURCE_FIELD]: renderCell(RESOURCE_FIELD, { data }),
+    [SOURCE_COLUMN]: getSummaryColumn(params),
   };
 };
 
-export const createCustomGridColumnsConfiguration = () => ({
-  [CONTENT_FIELD]: renderColumn(CONTENT_FIELD),
-  [RESOURCE_FIELD]: renderColumn(RESOURCE_FIELD),
-});
+export const createCustomGridColumnsConfiguration = () => ({});