[Logs Explorer] Add customisation point and 1st column tooltip for co…

…ntent virtual co… (elastic#174924)

## Summary

Closes - elastic#173615

This PR adds a customisation point where it exposes the whole column
which is of type `EuiDataGridColumn` to be customised.
As of the current scope we only intend to customise the `display`
property for the column which is responsible for rendering the column
header.

Idea is to add custom tooltips for Virtual Columns

## Demo

![Content
Tooltip](https://github.com/elastic/kibana/assets/7416358/59d6f1f2-68fc-4f31-82cd-b8525071706e)


## Why is this change being done

Please refer to the
[Figma](https://www.figma.com/file/g2uboVjdzylHDyrIUrI4cU/Virtual-columns?type=design&node-id=3277-320484&mode=design&t=t15IO9jmfitMSHuH-0)
file for details.

<img width="1031" alt="image"
src="https://github.com/elastic/kibana/assets/7416358/d1fa4a04-3a56-443f-9798-1062133d6887">


## Want to run this PR locally

```
// Checkout this PR
gh pr checkout 174924

// Start Kibana locally
yarn start 

// Start ES locally
yarn es snapshot

// Generate dummy data
node scripts/synthtrace simple_logs.ts --clean

```

---------

Co-authored-by: kibanamachine <[email protected]>

packages/kbn-unified-data-table/src/components/column_header_truncate_container.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiTextBlockTruncate } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
+
+const ColumnHeaderTruncateContainer = ({
+  headerRowHeight = 1,
+  children,
+}: {
+  headerRowHeight: number;
+  children: React.ReactNode;
+}) => {
+  return (
+    <EuiTextBlockTruncate
+      lines={headerRowHeight}
+      css={css`
+        overflow-wrap: anywhere;
+        white-space: normal;
+        word-break: break-all;
+        line-height: ${euiThemeVars.euiSize};
+        text-align: left;
+        .euiDataGridHeaderCell--numeric & {
+          float: right;
+        }
+      `}
+    >
+      {children}
+    </EuiTextBlockTruncate>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default ColumnHeaderTruncateContainer;

packages/kbn-unified-data-table/src/components/data_table.tsx

@@ -51,6 +51,7 @@ import {
   ValueToStringConverter,
   DataTableColumnTypes,
   CustomCellRenderer,
+  CustomGridColumnsConfiguration,
 } from '../types';
 import { getDisplayedColumns } from '../utils/columns';
 import { convertValueToString } from '../utils/convert_value_to_string';
@@ -329,6 +330,10 @@ export interface UnifiedDataTableProps {
    * An optional settings for a specified fields rendering like links. Applied only for the listed fields rendering.
    */
   externalCustomRenderers?: CustomCellRenderer;
+  /**
+   * An optional settings for customising the column
+   */
+  customGridColumnsConfiguration?: CustomGridColumnsConfiguration;
   /**
    * Name of the UnifiedDataTable consumer component or application
    */
@@ -406,6 +411,7 @@ export const UnifiedDataTable = ({
   componentsTourSteps,
   gridStyleOverride,
   rowLineHeightOverride,
+  customGridColumnsConfiguration,
 }: UnifiedDataTableProps) => {
   const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } =
     services;
@@ -668,6 +674,7 @@ export const UnifiedDataTable = ({
         columnTypes,
         showColumnTokens,
         headerRowHeight,
+        customGridColumnsConfiguration,
       }),
     [
       onFilter,
@@ -688,6 +695,7 @@ export const UnifiedDataTable = ({
       columnTypes,
       showColumnTokens,
       headerRowHeight,
+      customGridColumnsConfiguration,
     ]
   );
 

packages/kbn-unified-data-table/src/components/data_table_column_header.tsx

@@ -8,13 +8,14 @@
 
 import React, { useMemo } from 'react';
 import { css, CSSObject } from '@emotion/react';
-import { EuiIcon, EuiTextBlockTruncate, EuiToolTip } from '@elastic/eui';
+import { EuiIcon, EuiToolTip } from '@elastic/eui';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
 import { FieldIcon, getFieldIconProps } from '@kbn/field-utils';
 import { isNestedFieldParent } from '@kbn/discover-utils';
 import { i18n } from '@kbn/i18n';
 import { euiThemeVars } from '@kbn/ui-theme';
 import type { DataTableColumnTypes } from '../types';
+import ColumnHeaderTruncateContainer from './column_header_truncate_container';
 
 interface DataTableColumnHeaderProps {
   dataView: DataView;
@@ -100,32 +101,6 @@ function getRenderedToken({
   return null;
 }
 
-const ColumnHeaderTruncateContainer = ({
-  headerRowHeight = 1,
-  children,
-}: {
-  headerRowHeight: number;
-  children: React.ReactNode;
-}) => {
-  return (
-    <EuiTextBlockTruncate
-      lines={headerRowHeight}
-      css={css`
-        overflow-wrap: anywhere;
-        white-space: normal;
-        word-break: break-all;
-        line-height: ${euiThemeVars.euiSize};
-        text-align: left;
-        .euiDataGridHeaderCell--numeric & {
-          float: right;
-        }
-      `}
-    >
-      {children}
-    </EuiTextBlockTruncate>
-  );
-};
-
 export const DataTableTimeColumnHeader = ({
   dataView,
   dataViewField,

packages/kbn-unified-data-table/src/components/data_table_columns.test.tsx

@@ -8,6 +8,7 @@
 
 import { dataViewMock } from '@kbn/discover-utils/src/__mocks__';
 import type { DataView } from '@kbn/data-views-plugin/public';
+import React from 'react';
 import {
   getEuiGridColumns,
   getVisibleColumns,
@@ -351,5 +352,52 @@ describe('Data table columns', function () {
       });
       expect(gridColumns[1].schema).toBe('numeric');
     });
+
+    it('returns columns in correct format when column customisation is provided', async () => {
+      const gridColumns = getEuiGridColumns({
+        columns,
+        settings: {},
+        dataView: dataViewWithTimefieldMock,
+        defaultColumns: false,
+        isSortEnabled: true,
+        isPlainRecord: true,
+        valueToStringConverter: dataTableContextMock.valueToStringConverter,
+        rowsCount: 100,
+        services: {
+          uiSettings: servicesMock.uiSettings,
+          toastNotifications: servicesMock.toastNotifications,
+        },
+        hasEditDataViewPermission: () =>
+          servicesMock.dataViewFieldEditor.userPermissions.editIndexPattern(),
+        onFilter: () => {},
+      });
+
+      const extensionGridColumn = gridColumns[0];
+      extensionGridColumn.display = <span>test</span>;
+      const customGridColumnsConfiguration = {
+        extension: () => extensionGridColumn,
+      };
+
+      const customizedGridColumns = getEuiGridColumns({
+        columns,
+        settings: {},
+        dataView: dataViewWithTimefieldMock,
+        defaultColumns: false,
+        isSortEnabled: true,
+        isPlainRecord: true,
+        valueToStringConverter: dataTableContextMock.valueToStringConverter,
+        rowsCount: 100,
+        services: {
+          uiSettings: servicesMock.uiSettings,
+          toastNotifications: servicesMock.toastNotifications,
+        },
+        hasEditDataViewPermission: () =>
+          servicesMock.dataViewFieldEditor.userPermissions.editIndexPattern(),
+        onFilter: () => {},
+        customGridColumnsConfiguration,
+      });
+
+      expect(customizedGridColumns).toMatchSnapshot();
+    });
   });
 });

packages/kbn-unified-data-table/src/components/data_table_columns.tsx

@@ -17,7 +17,7 @@ import type { DataView } from '@kbn/data-views-plugin/public';
 import { ToastsStart, IUiSettingsClient } from '@kbn/core/public';
 import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { ExpandButton } from './data_table_expand_button';
-import { UnifiedDataTableSettings } from '../types';
+import { CustomGridColumnsConfiguration, UnifiedDataTableSettings } from '../types';
 import type { ValueToStringConverter, DataTableColumnTypes } from '../types';
 import { buildCellActions } from './default_cell_actions';
 import { getSchemaByKbnType } from './data_table_schema';
@@ -85,6 +85,7 @@ function buildEuiGridColumn({
   columnTypes,
   showColumnTokens,
   headerRowHeight,
+  customGridColumnsConfiguration,
 }: {
   columnName: string;
   columnWidth: number | undefined;
@@ -103,6 +104,7 @@ function buildEuiGridColumn({
   columnTypes?: DataTableColumnTypes;
   showColumnTokens?: boolean;
   headerRowHeight?: number;
+  customGridColumnsConfiguration?: CustomGridColumnsConfiguration;
 }) {
   const dataViewField = dataView.getFieldByName(columnName);
   const editFieldButton =
@@ -193,6 +195,10 @@ function buildEuiGridColumn({
   if (columnWidth > 0) {
     column.initialWidth = Number(columnWidth);
   }
+
+  if (customGridColumnsConfiguration && customGridColumnsConfiguration[column.id]) {
+    return customGridColumnsConfiguration[column.id]({ column, headerRowHeight });
+  }
   return column;
 }
 
@@ -214,6 +220,7 @@ export function getEuiGridColumns({
   columnTypes,
   showColumnTokens,
   headerRowHeight,
+  customGridColumnsConfiguration,
 }: {
   columns: string[];
   columnsCellActions?: EuiDataGridColumnCellAction[][];
@@ -235,6 +242,7 @@ export function getEuiGridColumns({
   columnTypes?: DataTableColumnTypes;
   showColumnTokens?: boolean;
   headerRowHeight?: number;
+  customGridColumnsConfiguration?: CustomGridColumnsConfiguration;
 }) {
   const getColWidth = (column: string) => settings?.columns?.[column]?.width ?? 0;
 
@@ -257,6 +265,7 @@ export function getEuiGridColumns({
       columnTypes,
       showColumnTokens,
       headerRowHeight,
+      customGridColumnsConfiguration,
     })
   );
 }