[8.x] [One Discover] Add summary column for logs contextual experience (

#192567) (#194389) # Backport This will backport the following commits from `main` to `8.x`: - [[One Discover] Add summary column for logs contextual experience (#192567)](#192567)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Marco Antonio Ghiani <[email protected]>
elastic · Sep 30, 2024 · a17659f · a17659f
1 parent a2a135d
commit a17659f
Show file tree

Hide file tree

Showing 92 changed files with 1,482 additions and 1,327 deletions.
diff --git a/packages/kbn-discover-utils/src/components/custom_control_columns/degraded_docs_control.tsx b/packages/kbn-discover-utils/src/components/custom_control_columns/degraded_docs_control.tsx
@@ -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.",
   }
 );
 

diff --git a/packages/kbn-discover-utils/src/data_types/logs/logs_context_service.ts b/packages/kbn-discover-utils/src/data_types/logs/logs_context_service.ts
@@ -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

diff --git a/packages/kbn-discover-utils/src/data_types/logs/utils/get_field_from_doc.ts b/packages/kbn-discover-utils/src/data_types/logs/utils/get_field_from_doc.ts
diff --git a/packages/kbn-discover-utils/src/data_types/logs/utils/index.ts b/packages/kbn-discover-utils/src/data_types/logs/utils/index.ts
@@ -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';
diff --git a/packages/kbn-discover-utils/src/utils/get_field_value.ts b/packages/kbn-discover-utils/src/utils/get_field_value.ts
@@ -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;
 };
diff --git a/packages/kbn-discover-utils/src/utils/get_log_document_overview.ts b/packages/kbn-discover-utils/src/utils/get_log_document_overview.ts
@@ -17,7 +17,7 @@ export function getLogDocumentOverview(
 ): LogDocumentOverview {
   const formatField = <T extends keyof LogDocumentOverview>(field: T) => {
     return (
-      field in doc.flattened
+      doc.flattened[field] !== undefined && doc.flattened[field] !== null
         ? formatFieldValue(
             doc.flattened[field],
             doc.raw,
@@ -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

diff --git a/packages/kbn-discover-utils/src/utils/get_stack_trace_fields.ts b/packages/kbn-discover-utils/src/utils/get_stack_trace_fields.ts
@@ -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,

diff --git a/packages/kbn-unified-data-table/index.ts b/packages/kbn-unified-data-table/index.ts
@@ -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';
@@ -37,3 +38,6 @@ export {
   getRenderCustomToolbarWithElements,
   renderCustomToolbar,
 } from './src/components/custom_toolbar/render_custom_toolbar';
+
+export { getDataGridDensity } from './src/hooks/use_data_grid_density';
+export { getRowHeight } from './src/hooks/use_row_height';
diff --git a/packages/kbn-unified-data-table/src/components/data_table_columns.tsx b/packages/kbn-unified-data-table/src/components/data_table_columns.tsx
@@ -46,7 +46,7 @@ export const getColumnDisplayName = (
 
   if (columnName === '_source') {
     return i18n.translate('unifiedDataTable.grid.documentHeader', {
-      defaultMessage: 'Document',
+      defaultMessage: 'Summary',
     });
   }
 

diff --git a/packages/kbn-unified-data-table/src/hooks/use_data_grid_density.ts b/packages/kbn-unified-data-table/src/hooks/use_data_grid_density.ts
@@ -30,8 +30,6 @@ interface UseDataGridDensityProps {
   onUpdateDataGridDensity?: (density: DataGridDensity) => void;
 }
 
-export const DATA_GRID_DENSITY_STORAGE_KEY = 'dataGridDensity';
-
 export function getDensityFromStyle(style: EuiDataGridStyle) {
   return style.cellPadding === DATA_GRID_STYLE_COMPACT.cellPadding &&
     style.fontSize === DATA_GRID_STYLE_COMPACT.fontSize
@@ -42,24 +40,30 @@ export function getDensityFromStyle(style: EuiDataGridStyle) {
     : DataGridDensity.EXPANDED;
 }
 
+const DATA_GRID_DENSITY_STORAGE_KEY = 'dataGridDensity';
+const getStorageKey = (consumer: string) => `${consumer}:${DATA_GRID_DENSITY_STORAGE_KEY}`;
+
+export const getDataGridDensity = (storage: Storage, consumer: string): DataGridDensity => {
+  return storage.get(getStorageKey(consumer)) ?? DataGridDensity.COMPACT;
+};
+
 export const useDataGridDensity = ({
   storage,
   consumer,
   dataGridDensityState,
   onUpdateDataGridDensity,
 }: UseDataGridDensityProps) => {
-  const storageKey = `${consumer}:${DATA_GRID_DENSITY_STORAGE_KEY}`;
   const dataGridDensity = useMemo<DataGridDensity>(() => {
-    return dataGridDensityState ?? storage.get(storageKey) ?? DataGridDensity.COMPACT;
-  }, [dataGridDensityState, storage, storageKey]);
+    return dataGridDensityState ?? getDataGridDensity(storage, consumer);
+  }, [consumer, dataGridDensityState, storage]);
 
   const onChangeDataGridDensity = useCallback(
     (gridStyle: EuiDataGridStyle) => {
       const newDensity = getDensityFromStyle(gridStyle);
-      storage.set(storageKey, newDensity);
+      storage.set(getStorageKey(consumer), newDensity);
       onUpdateDataGridDensity?.(newDensity);
     },
-    [storageKey, storage, onUpdateDataGridDensity]
+    [storage, consumer, onUpdateDataGridDensity]
   );
 
   return {

diff --git a/packages/kbn-unified-data-table/src/hooks/use_row_height.ts b/packages/kbn-unified-data-table/src/hooks/use_row_height.ts
@@ -27,6 +27,59 @@ interface UseRowHeightProps {
   onUpdateRowHeight?: (rowHeight: number) => void;
 }
 
+interface ResolveRowHeightParams {
+  storage: Storage;
+  consumer: string;
+  key: string;
+  configRowHeight: number;
+  rowHeightState?: number;
+}
+
+const resolveRowHeight = ({
+  storage,
+  consumer,
+  key,
+  configRowHeight,
+  rowHeightState,
+}: ResolveRowHeightParams): number => {
+  const rowHeightFromLS = getStoredRowHeight(storage, consumer, key);
+
+  const configHasNotChanged = (
+    localStorageRecord: DataGridOptionsRecord | null
+  ): localStorageRecord is DataGridOptionsRecord =>
+    localStorageRecord !== null && configRowHeight === localStorageRecord.previousConfigRowHeight;
+
+  let currentRowLines: number;
+  if (isValidRowHeight(rowHeightState)) {
+    currentRowLines = rowHeightState;
+  } else if (configHasNotChanged(rowHeightFromLS)) {
+    currentRowLines = rowHeightFromLS.previousRowHeight;
+  } else {
+    currentRowLines = configRowHeight;
+  }
+
+  return currentRowLines;
+};
+
+export const ROW_HEIGHT_STORAGE_KEY = 'dataGridRowHeight';
+
+export const getRowHeight = ({
+  storage,
+  consumer,
+  rowHeightState,
+  configRowHeight,
+}: Pick<ResolveRowHeightParams, 'storage' | 'consumer' | 'rowHeightState'> & {
+  configRowHeight?: number;
+}) => {
+  return resolveRowHeight({
+    storage,
+    consumer,
+    key: ROW_HEIGHT_STORAGE_KEY,
+    configRowHeight: configRowHeight ?? ROWS_HEIGHT_OPTIONS.default,
+    rowHeightState,
+  });
+};
+
 export const useRowHeight = ({
   storage,
   consumer,
@@ -36,23 +89,13 @@ export const useRowHeight = ({
   onUpdateRowHeight,
 }: UseRowHeightProps) => {
   const rowHeightLines = useMemo(() => {
-    const rowHeightFromLS = getStoredRowHeight(storage, consumer, key);
-
-    const configHasNotChanged = (
-      localStorageRecord: DataGridOptionsRecord | null
-    ): localStorageRecord is DataGridOptionsRecord =>
-      localStorageRecord !== null && configRowHeight === localStorageRecord.previousConfigRowHeight;
-
-    let currentRowLines: number;
-    if (isValidRowHeight(rowHeightState)) {
-      currentRowLines = rowHeightState;
-    } else if (configHasNotChanged(rowHeightFromLS)) {
-      currentRowLines = rowHeightFromLS.previousRowHeight;
-    } else {
-      currentRowLines = configRowHeight;
-    }
-
-    return currentRowLines;
+    return resolveRowHeight({
+      storage,
+      consumer,
+      key,
+      configRowHeight,
+      rowHeightState,
+    });
   }, [configRowHeight, consumer, key, rowHeightState, storage]);
 
   const rowHeight = useMemo<RowHeightSettingsProps['rowHeight']>(() => {

diff --git a/packages/kbn-unified-data-table/src/utils/columns.ts b/packages/kbn-unified-data-table/src/utils/columns.ts
@@ -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

diff --git a/packages/kbn-unified-data-table/src/utils/get_render_cell_popover.test.tsx b/packages/kbn-unified-data-table/src/utils/get_render_cell_popover.test.tsx
@@ -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',
+        },
+      },
+    });
+  });
 });
diff --git a/packages/kbn-unified-data-table/src/utils/get_render_cell_popover.tsx b/packages/kbn-unified-data-table/src/utils/get_render_cell_popover.tsx
@@ -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} />;
   });