[One Discover] Add summary column for logs contextual experience

packages/kbn-discover-utils/src/utils/get_log_document_overview.ts

@@ -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

packages/kbn-unified-data-table/index.ts

@@ -18,6 +18,7 @@ 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';

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', () => {
@@ -41,6 +41,14 @@ describe('getCustomCellPopoverRenderer', () => {
   it('should render DefaultCellPopover', () => {
     renderTestComponent();
 
+    expect(setCellPopoverPropsMocks).toHaveBeenCalledWith({
+      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: {

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,14 +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',
-        panelProps: { css: { maxInlineSize: 'min(75vw, 600px) !important' } },
-      });
-    }, [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} />;
   });

src/plugins/discover/public/application/context/context_app_content.tsx

@@ -179,10 +179,12 @@ export function ContextAppContent({
   const cellRenderers = useMemo(() => {
     const getCellRenderers = getCellRenderersAccessor(() => ({}));
     return getCellRenderers({
+      actions: { addFilter },
+      dataView,
       density: DataGridDensity.COMPACT,
       rowHeight: ROWS_HEIGHT_OPTIONS.single,
     });
-  }, [getCellRenderersAccessor]);
+  }, [addFilter, dataView, getCellRenderersAccessor]);
 
   const dataSource = useMemo(() => createDataSource({ dataView, query: undefined }), [dataView]);
   const { filters } = useQuerySubscriber({ data: services.data });

src/plugins/discover/public/application/main/components/layout/discover_documents.tsx

@@ -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({ density, rowHeight }) || {};
+    useContextualGridCustomisations(cellRendererParams) || {};
   const additionalFieldGroups = useAdditionalFieldGroups();
 
   const getCellRenderersAccessor = useProfileAccessor('getCellRenderers');
   const cellRenderers = useMemo(() => {
     const getCellRenderers = getCellRenderersAccessor(() => customCellRenderer ?? {});
-    return getCellRenderers({ density, rowHeight });
-  }, [customCellRenderer, getCellRenderersAccessor, density, rowHeight]);
+    return getCellRenderers(cellRendererParams);
+  }, [cellRendererParams, customCellRenderer, getCellRenderersAccessor]);
 
   const documents = useObservable(stateContainer.dataState.data$.documents$);
 

src/plugins/discover/public/application/main/hooks/grid_customisations/index.ts

@@ -8,26 +8,23 @@
  */
 
 import { useMemo } from 'react';
-import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import { useDiscoverCustomization } from '../../../../customizations';
 import { DataGridColumnsDeps, getDataGridColumnsConfiguration } from './logs';
 
 export * from './logs';
 
-type ContextualGridCustomizationParams = DataGridColumnsDeps['params'];
+type ContextualGridCustomizationParams = DataGridColumnsDeps;
 
 export const useContextualGridCustomisations = (params: ContextualGridCustomizationParams) => {
-  const { density, rowHeight } = params;
-  const { data } = useDiscoverServices();
   // 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;
 
-    return getDataGridColumnsConfiguration({ data, params: { density, rowHeight } });
-  }, [data, isLogsContext, density, rowHeight]);
+    return getDataGridColumnsConfiguration(params);
+  }, [isLogsContext, params]);
 
   return virtualColumnsConfiguration;
 };

src/plugins/discover/public/application/main/hooks/grid_customisations/logs.tsx

@@ -8,23 +8,25 @@
  */
 
 import { SOURCE_COLUMN } from '@kbn/unified-data-table';
-import { SummaryColumnFactoryDeps } from '../../../../components/data_types/logs/summary_column/summary_column';
-import { getSummaryColumn } from '../../../../components/data_types/logs/summary_column';
+import {
+  SummaryColumnGetterDeps,
+  getSummaryColumn,
+} from '../../../../components/data_types/logs/summary_column';
 
 export type DataGridColumnsDeps = CustomCellRendererDeps;
 
-export const getDataGridColumnsConfiguration = ({ data, params }: DataGridColumnsDeps) => {
+export const getDataGridColumnsConfiguration = (params: DataGridColumnsDeps) => {
   return {
-    customCellRenderer: createCustomCellRenderer({ data, params }),
+    customCellRenderer: createCustomCellRenderer(params),
     customGridColumnsConfiguration: createCustomGridColumnsConfiguration(),
   };
 };
 
-type CustomCellRendererDeps = SummaryColumnFactoryDeps;
+type CustomCellRendererDeps = SummaryColumnGetterDeps;
 
-export const createCustomCellRenderer = (deps: CustomCellRendererDeps) => {
+export const createCustomCellRenderer = (params: CustomCellRendererDeps) => {
   return {
-    [SOURCE_COLUMN]: getSummaryColumn(deps),
+    [SOURCE_COLUMN]: getSummaryColumn(params),
   };
 };
 

src/plugins/discover/public/components/data_types/logs/cell_actions_popover.tsx

@@ -18,20 +18,30 @@ import {
   EuiText,
   EuiButtonIcon,
   EuiTextTruncate,
+  EuiButtonEmpty,
+  EuiCopy,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { useBoolean } from '@kbn/react-hooks';
 import { euiThemeVars } from '@kbn/ui-theme';
-import { closeCellActionPopoverText, openCellActionPopoverAriaText } from './translations';
-import { FilterInButton } from './filter_in_button';
-import { FilterOutButton } from './filter_out_button';
-import { CopyButton } from './copy_button';
+import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
+import {
+  actionFilterForText,
+  actionFilterOutText,
+  closeCellActionPopoverText,
+  copyValueAriaText,
+  copyValueText,
+  filterForText,
+  filterOutText,
+  openCellActionPopoverAriaText,
+} from './translations';
 
 const codeFontCSS = css`
   font-family: ${euiThemeVars.euiCodeFontFamily};
 `;
 
 interface CellActionsPopoverProps {
+  onFilter?: DocViewFilterFn;
   /* ECS mapping for the key */
   property: string;
   /* Value for the mapping, which will be displayed */
@@ -49,13 +59,20 @@ interface CellActionsPopoverProps {
 }
 
 export function CellActionsPopover({
+  onFilter,
   property,
   value,
   renderValue,
   renderPopoverTrigger,
 }: CellActionsPopoverProps) {
   const [isPopoverOpen, { toggle: togglePopover, off: closePopover }] = useBoolean(false);
 
+  const makeFilterHandlerByOperator = (operator: '+' | '-') => () => {
+    if (onFilter) {
+      onFilter(property, value, operator);
+    }
+  };
+
   const popoverTriggerProps = {
     onClick: togglePopover,
     onClickAriaLabel: openCellActionPopoverAriaText,
@@ -94,30 +111,63 @@ export function CellActionsPopover({
       </EuiFlexGroup>
       <EuiPopoverFooter>
         <EuiFlexGroup responsive={false} gutterSize="s" wrap={true}>
-          <FilterInButton value={value} property={property} />
-          <FilterOutButton value={value} property={property} />
+          <EuiButtonEmpty
+            key="addToFilterAction"
+            size="s"
+            iconType="plusInCircle"
+            aria-label={actionFilterForText(value)}
+            onClick={makeFilterHandlerByOperator('+')}
+            data-test-subj={`dataTableCellAction_addToFilterAction_${property}`}
+          >
+            {filterForText}
+          </EuiButtonEmpty>
+          <EuiButtonEmpty
+            key="removeFromFilterAction"
+            size="s"
+            iconType="minusInCircle"
+            aria-label={actionFilterOutText(value)}
+            onClick={makeFilterHandlerByOperator('-')}
+            data-test-subj={`dataTableCellAction_removeFromFilterAction_${property}`}
+          >
+            {filterOutText}
+          </EuiButtonEmpty>
         </EuiFlexGroup>
       </EuiPopoverFooter>
       <EuiPopoverFooter>
-        <CopyButton value={value} property={property} />
+        <EuiCopy textToCopy={value}>
+          {(copy) => (
+            <EuiButtonEmpty
+              key="copyToClipboardAction"
+              size="s"
+              iconType="copyClipboard"
+              aria-label={copyValueAriaText(property)}
+              onClick={copy}
+              data-test-subj={`dataTableCellAction_copyToClipboardAction_${property}`}
+            >
+              {copyValueText}
+            </EuiButtonEmpty>
+          )}
+        </EuiCopy>
       </EuiPopoverFooter>
     </EuiPopover>
   );
 }
 
 export interface FieldBadgeWithActionsProps
-  extends Pick<CellActionsPopoverProps, 'property' | 'value' | 'renderValue'> {
+  extends Pick<CellActionsPopoverProps, 'onFilter' | 'property' | 'value' | 'renderValue'> {
   icon?: EuiBadgeProps['iconType'];
 }
 
 export function FieldBadgeWithActions({
   icon,
+  onFilter,
   property,
   renderValue,
   value,
 }: FieldBadgeWithActionsProps) {
   return (
     <CellActionsPopover
+      onFilter={onFilter}
       property={property}
       value={value}
       renderValue={renderValue}