From ebc4290446658ba271e79c194b844a4290736bcd Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Fri, 10 Nov 2023 12:39:15 +0100 Subject: [PATCH 1/9] [Discover] truncate 3 lines --- .../src/components/data_table.scss | 4 ++++ .../src/components/data_table_column_header.tsx | 10 +++++++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index 2f614f1133bb1..e30fcc9d39ce6 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -40,6 +40,10 @@ border-bottom: $euiBorderThin; } + .euiDataGridHeaderCell { + align-items: baseline; + } + .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='openDetails'], .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='select'] { padding-left: 0; diff --git a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx index 37d8d937c0a89..e00f856bd0133 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx @@ -8,7 +8,7 @@ import React, { useMemo } from 'react'; import { css } from '@emotion/react'; -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiTextBlockTruncate } from '@elastic/eui'; import type { DataView } from '@kbn/data-views-plugin/common'; import { FieldIcon, getFieldIconProps } from '@kbn/field-utils'; import { isNestedFieldParent } from '@kbn/discover-utils'; @@ -36,6 +36,7 @@ export const DataTableColumnHeader: React.FC = (prop alignItems="center" gutterSize="xs" css={css` + align-items: flex-start; .euiDataGridHeaderCell--numeric & { justify-content: flex-end; } @@ -44,10 +45,13 @@ export const DataTableColumnHeader: React.FC = (prop {columnToken && {columnToken}} - {columnDisplayName} + {columnDisplayName} ); From d4ddf1fc67fe6b919aceb0a94e37451943c2d717 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Tue, 5 Dec 2023 11:26:24 +0100 Subject: [PATCH 2/9] - headerRowHeight prop added - fix no truncating lines when no field type icon --- .../src/components/data_table.tsx | 7 ++ .../components/data_table_column_header.tsx | 78 ++++++++++++++----- .../src/components/data_table_columns.tsx | 24 ++++-- .../context/context_app_content.tsx | 2 + .../discover_grid/discover_grid.tsx | 2 +- 5 files changed, 85 insertions(+), 28 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index 5e9168f62946a..7642b54b1eff6 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -126,6 +126,10 @@ export interface UnifiedDataTableProps { * Field tokens could be rendered in column header next to the field name. */ showColumnTokens?: boolean; + /** + * Determines number of rows of a column header + */ + headerRowHeight?: number; /** * If set, the given document is displayed in a flyout */ @@ -355,6 +359,7 @@ export const UnifiedDataTable = ({ columns, columnTypes, showColumnTokens, + headerRowHeight, controlColumnIds = CONTROL_COLUMN_IDS_DEFAULT, dataView, loadingState, @@ -665,6 +670,7 @@ export const UnifiedDataTable = ({ visibleCellActions, columnTypes, showColumnTokens, + headerRowHeight, }), [ onFilter, @@ -684,6 +690,7 @@ export const UnifiedDataTable = ({ visibleCellActions, columnTypes, showColumnTokens, + headerRowHeight, ] ); diff --git a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx index e00f856bd0133..37817777091f3 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx @@ -19,44 +19,84 @@ interface DataTableColumnHeaderProps { columnName: string | null; columnDisplayName: string; columnTypes?: DataTableColumnTypes; + headerRowHeight?: number; + showColumnTokens?: boolean; } export const DataTableColumnHeader: React.FC = (props) => { - const { columnDisplayName, columnName, columnTypes, dataView } = props; - const columnToken = useMemo( - () => getRenderedToken({ columnName, columnTypes, dataView }), - [columnName, columnTypes, dataView] - ); + const { + columnDisplayName, + headerRowHeight, + showColumnTokens, + columnName, + columnTypes, + dataView, + } = props; return ( - {columnToken && {columnToken}} - - {columnDisplayName} - + {showColumnTokens && ( + + )} + ); }; +const DataTableColumnToken: React.FC<{ + columnName: DataTableColumnHeaderProps['columnName']; + columnTypes?: DataTableColumnHeaderProps['columnTypes']; + dataView: DataTableColumnHeaderProps['dataView']; +}> = (props) => { + const { columnName, columnTypes, dataView } = props; + const columnToken = useMemo( + () => getRenderedToken({ columnName, columnTypes, dataView }), + [columnName, columnTypes, dataView] + ); + + return columnToken ? {columnToken} : null; +}; + +interface DataTableColumnTitleProps { + columnDisplayName: DataTableColumnHeaderProps['columnDisplayName']; + headerRowHeight?: DataTableColumnHeaderProps['headerRowHeight']; +} + +const DataTableColumnTitle: React.FC = ({ + columnDisplayName, + headerRowHeight = 1, +}) => { + return ( + + {columnDisplayName} + + ); +}; + function getRenderedToken({ dataView, columnName, 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 index f7a3d41bf330e..9e3d9f31bdfd2 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_columns.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_columns.tsx @@ -85,6 +85,7 @@ function buildEuiGridColumn({ visibleCellActions, columnTypes, showColumnTokens, + headerRowHeight, }: { columnName: string; columnWidth: number | undefined; @@ -102,6 +103,7 @@ function buildEuiGridColumn({ visibleCellActions?: number; columnTypes?: DataTableColumnTypes; showColumnTokens?: boolean; + headerRowHeight?: number; }) { const dataViewField = dataView.getFieldByName(columnName); const editFieldButton = @@ -131,14 +133,17 @@ function buildEuiGridColumn({ id: columnName, schema: getSchemaByKbnType(columnType), isSortable: isSortEnabled && (isPlainRecord || dataViewField?.sortable === true), - display: showColumnTokens ? ( - - ) : undefined, + display: + showColumnTokens || (headerRowHeight && headerRowHeight !== 1) ? ( + + ) : undefined, displayAsText: columnDisplayName, actions: { showHide: @@ -222,6 +227,7 @@ export function getEuiGridColumns({ visibleCellActions, columnTypes, showColumnTokens, + headerRowHeight, }: { columns: string[]; columnsCellActions?: EuiDataGridColumnCellAction[][]; @@ -242,6 +248,7 @@ export function getEuiGridColumns({ visibleCellActions?: number; columnTypes?: DataTableColumnTypes; showColumnTokens?: boolean; + headerRowHeight?: number; }) { const getColWidth = (column: string) => settings?.columns?.[column]?.width ?? 0; @@ -263,6 +270,7 @@ export function getEuiGridColumns({ visibleCellActions, columnTypes, showColumnTokens, + headerRowHeight, }) ); } diff --git a/src/plugins/discover/public/application/context/context_app_content.tsx b/src/plugins/discover/public/application/context/context_app_content.tsx index 84d2126f15495..b32ef994ffb3f 100644 --- a/src/plugins/discover/public/application/context/context_app_content.tsx +++ b/src/plugins/discover/public/application/context/context_app_content.tsx @@ -208,6 +208,8 @@ export function ContextAppContent({ maxDocFieldsDisplayed={services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)} renderDocumentView={renderDocumentView} services={services} + showColumnTokens + headerRowHeight={3} /> diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx index fe2586e32f895..6ccbd2008c775 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx @@ -16,5 +16,5 @@ import { renderCustomToolbar } from './render_custom_toolbar'; * @constructor */ export const DiscoverGrid: React.FC = (props) => { - return ; + return ; }; From 2203362fb9716e59430bf1214071ce01555198fe Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Tue, 5 Dec 2023 13:35:57 +0100 Subject: [PATCH 3/9] fix tests --- .../components/__snapshots__/data_table_columns.test.tsx.snap | 4 ++++ .../src/components/data_table_column_header.test.tsx | 4 ++++ .../public/application/context/context_app_content.tsx | 1 - .../application/main/components/layout/discover_documents.tsx | 1 + .../public/components/discover_grid/discover_grid.tsx | 2 +- src/plugins/discover/public/embeddable/saved_search_grid.tsx | 2 ++ 6 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap b/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap index d5cbd1a0d408e..56cd7f5feea36 100644 --- a/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap +++ b/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap @@ -346,6 +346,7 @@ Array [ "type": "default", } } + showColumnTokens={true} />, "displayAsText": "extension", "id": "extension", @@ -629,6 +630,7 @@ Array [ "type": "default", } } + showColumnTokens={true} />, "displayAsText": "message", "id": "message", @@ -952,6 +954,7 @@ Array [ "type": "default", } } + showColumnTokens={true} />, "displayAsText": "extension", "id": "extension", @@ -1268,6 +1271,7 @@ Array [ "type": "default", } } + showColumnTokens={true} />, "displayAsText": "message", "id": "message", diff --git a/packages/kbn-unified-data-table/src/components/data_table_column_header.test.tsx b/packages/kbn-unified-data-table/src/components/data_table_column_header.test.tsx index a3dbf6f895027..2420b1508cbf5 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_column_header.test.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_column_header.test.tsx @@ -66,6 +66,7 @@ describe('DataTableColumnHeader', function () { columnName="bytes" columnDisplayName="bytesDisplayName" dataView={stubLogstashDataView} + showColumnTokens /> ); expect(component.text()).toBe('NumberbytesDisplayName'); @@ -81,6 +82,7 @@ describe('DataTableColumnHeader', function () { bytes: 'keyword', }} dataView={stubLogstashDataView} + showColumnTokens /> ); expect(component.text()).toBe('KeywordbytesDisplayName'); @@ -93,6 +95,7 @@ describe('DataTableColumnHeader', function () { columnName="_source" columnDisplayName="Document" dataView={stubLogstashDataView} + showColumnTokens /> ); expect(component.text()).toBe('Document'); @@ -105,6 +108,7 @@ describe('DataTableColumnHeader', function () { columnName="nested_user" columnDisplayName="Nested User" dataView={stubDataViewWithNested} + showColumnTokens /> ); expect(component.text()).toBe('NestedNested User'); diff --git a/src/plugins/discover/public/application/context/context_app_content.tsx b/src/plugins/discover/public/application/context/context_app_content.tsx index b32ef994ffb3f..a256284f3d760 100644 --- a/src/plugins/discover/public/application/context/context_app_content.tsx +++ b/src/plugins/discover/public/application/context/context_app_content.tsx @@ -208,7 +208,6 @@ export function ContextAppContent({ maxDocFieldsDisplayed={services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)} renderDocumentView={renderDocumentView} services={services} - showColumnTokens headerRowHeight={3} /> diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx index f655af89c0c4c..8b207ff7554e2 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx @@ -419,6 +419,7 @@ function DiscoverDocumentsComponent({ totalHits={totalHits} onFetchMoreRecords={onFetchMoreRecords} componentsTourSteps={TOUR_STEPS} + headerRowHeight={3} /> diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx index 6ccbd2008c775..fe2586e32f895 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx @@ -16,5 +16,5 @@ import { renderCustomToolbar } from './render_custom_toolbar'; * @constructor */ export const DiscoverGrid: React.FC = (props) => { - return ; + return ; }; diff --git a/src/plugins/discover/public/embeddable/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/saved_search_grid.tsx index 0177a324dd2b8..f64f000c0bf0b 100644 --- a/src/plugins/discover/public/embeddable/saved_search_grid.tsx +++ b/src/plugins/discover/public/embeddable/saved_search_grid.tsx @@ -100,6 +100,8 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) { maxDocFieldsDisplayed={props.services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)} renderDocumentView={renderDocumentView} renderCustomToolbar={renderCustomToolbar} + showColumnTokens + headerRowHeight={3} /> ); From f749dafd7f8526a81b1bc2bc58fd6d536282a9dd Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Tue, 5 Dec 2023 14:11:18 +0100 Subject: [PATCH 4/9] use pick --- .../components/data_table_column_header.tsx | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx index 37817777091f3..9a50e388ff7fa 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx @@ -60,11 +60,9 @@ export const DataTableColumnHeader: React.FC = (prop ); }; -const DataTableColumnToken: React.FC<{ - columnName: DataTableColumnHeaderProps['columnName']; - columnTypes?: DataTableColumnHeaderProps['columnTypes']; - dataView: DataTableColumnHeaderProps['dataView']; -}> = (props) => { +const DataTableColumnToken: React.FC< + Pick +> = (props) => { const { columnName, columnTypes, dataView } = props; const columnToken = useMemo( () => getRenderedToken({ columnName, columnTypes, dataView }), @@ -74,15 +72,9 @@ const DataTableColumnToken: React.FC<{ return columnToken ? {columnToken} : null; }; -interface DataTableColumnTitleProps { - columnDisplayName: DataTableColumnHeaderProps['columnDisplayName']; - headerRowHeight?: DataTableColumnHeaderProps['headerRowHeight']; -} - -const DataTableColumnTitle: React.FC = ({ - columnDisplayName, - headerRowHeight = 1, -}) => { +const DataTableColumnTitle: React.FC< + Pick +> = ({ columnDisplayName, headerRowHeight = 1 }) => { return ( Date: Wed, 3 Jan 2024 11:04:21 +0100 Subject: [PATCH 5/9] wip - tod timestamp --- .../components/data_table_column_header.tsx | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx index 9a50e388ff7fa..08debe4e7125a 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx @@ -26,20 +26,22 @@ interface DataTableColumnHeaderProps { export const DataTableColumnHeader: React.FC = (props) => { const { columnDisplayName, - headerRowHeight, showColumnTokens, columnName, columnTypes, dataView, + headerRowHeight = 1, } = props; return ( - = (prop dataView={dataView} /> )} - - + + ); }; @@ -69,24 +68,23 @@ const DataTableColumnToken: React.FC< [columnName, columnTypes, dataView] ); - return columnToken ? {columnToken} : null; -}; - -const DataTableColumnTitle: React.FC< - Pick -> = ({ columnDisplayName, headerRowHeight = 1 }) => { - return ( - - {columnDisplayName} - - ); + {columnToken} + + ) : null; +}; + +const DataTableColumnTitle: React.FC> = ({ + columnDisplayName, +}) => { + return {columnDisplayName}; }; function getRenderedToken({ From 94689806d4d6e5bf6c6b9e8a012056c17023354b Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Wed, 3 Jan 2024 11:56:03 +0100 Subject: [PATCH 6/9] wrap three lines with icon. Correct time field. Correct numeric fields --- .../components/data_table_column_header.tsx | 79 +++++++++++++++---- .../src/components/data_table_columns.tsx | 30 ++----- 2 files changed, 71 insertions(+), 38 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx index 08debe4e7125a..df436cdf922a3 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx @@ -8,10 +8,11 @@ import React, { useMemo } from 'react'; import { css } from '@emotion/react'; -import { EuiFlexGroup, EuiFlexItem, EuiTextBlockTruncate } from '@elastic/eui'; -import type { DataView } from '@kbn/data-views-plugin/common'; +import { EuiIcon, EuiTextBlockTruncate, 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 type { DataTableColumnTypes } from '../types'; interface DataTableColumnHeaderProps { @@ -34,19 +35,7 @@ export const DataTableColumnHeader: React.FC = (prop } = props; return ( - + {showColumnTokens && ( = (prop /> )} - + ); }; @@ -115,3 +104,61 @@ function getRenderedToken({ return null; } + +const ColumnHeaderTruncateContainer = ({ + headerRowHeight = 1, + children, +}: { + headerRowHeight: number; + children: React.ReactNode; +}) => { + return ( + + {children} + + ); +}; + +export const DataTableTimeColumnHeader = ({ + dataView, + dataViewField, + headerRowHeight = 1, +}: { + dataView: DataView; + dataViewField?: DataViewField; + headerRowHeight?: number; +}) => { + const timeFieldName = dataViewField?.customLabel ?? dataView.timeFieldName; + const primaryTimeAriaLabel = i18n.translate( + 'unifiedDataTable.tableHeader.timeFieldIconTooltipAriaLabel', + { + defaultMessage: '{timeFieldName} - this field represents the time that events occurred.', + values: { timeFieldName }, + } + ); + const primaryTimeTooltip = i18n.translate('unifiedDataTable.tableHeader.timeFieldIconTooltip', { + defaultMessage: 'This field represents the time that events occurred.', + }); + + return ( +
+ + + {timeFieldName} + + +
+ ); +}; 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 index 9e3d9f31bdfd2..246b89d51cefc 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_columns.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_columns.tsx @@ -11,9 +11,7 @@ import { i18n } from '@kbn/i18n'; import { type EuiDataGridColumn, type EuiDataGridColumnCellAction, - EuiIcon, EuiScreenReaderOnly, - EuiToolTip, } from '@elastic/eui'; import type { DataView } from '@kbn/data-views-plugin/public'; import { ToastsStart, IUiSettingsClient } from '@kbn/core/public'; @@ -27,9 +25,10 @@ import { SelectButton } from './data_table_document_selection'; import { defaultTimeColumnWidth } from '../constants'; import { buildCopyColumnNameButton, buildCopyColumnValuesButton } from './build_copy_column_button'; import { buildEditFieldButton } from './build_edit_field_button'; -import { DataTableColumnHeader } from './data_table_column_header'; +import { DataTableColumnHeader, DataTableTimeColumnHeader } from './data_table_column_header'; const DataTableColumnHeaderMemoized = React.memo(DataTableColumnHeader); +const DataTableTimeColumnHeaderMemoized = React.memo(DataTableTimeColumnHeader); const openDetails = { id: 'openDetails', @@ -181,29 +180,16 @@ function buildEuiGridColumn({ }; if (column.id === dataView.timeFieldName) { - const timeFieldName = dataViewField?.customLabel ?? dataView.timeFieldName; - const primaryTimeAriaLabel = i18n.translate( - 'unifiedDataTable.tableHeader.timeFieldIconTooltipAriaLabel', - { - defaultMessage: '{timeFieldName} - this field represents the time that events occurred.', - values: { timeFieldName }, - } - ); - const primaryTimeTooltip = i18n.translate('unifiedDataTable.tableHeader.timeFieldIconTooltip', { - defaultMessage: 'This field represents the time that events occurred.', - }); - column.display = ( -
- - <> - {timeFieldName} - - -
+ ); column.initialWidth = defaultTimeColumnWidth; } + if (columnWidth > 0) { column.initialWidth = Number(columnWidth); } From f1dc02df0463d9828b8ddf3fa7f599b3b2bdc2fd Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Wed, 3 Jan 2024 13:11:52 +0100 Subject: [PATCH 7/9] timestamp test --- .../data_table_columns.test.tsx.snap | 700 ++++++++++++++++-- 1 file changed, 626 insertions(+), 74 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap b/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap index 56cd7f5feea36..066bdd8a22dbb 100644 --- a/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap +++ b/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap @@ -43,24 +43,250 @@ Array [ [Function], [Function], ], - "display":
- - - timestamp - - - - -
, + "display": , "displayAsText": "timestamp", "id": "timestamp", "initialWidth": 212, @@ -1424,45 +1650,187 @@ Array [ [Function], [Function], ], - "display":
- - - timestamp - - - - -
, - "displayAsText": "timestamp", - "id": "timestamp", - "initialWidth": 212, - "isSortable": true, - "schema": "datetime", - "visibleCellActions": undefined, - }, - Object { - "actions": Object { - "additional": Array [ + "display": , + "docvalueFields": Array [], + "fields": Array [ + Object { + "filterable": true, + "name": "_index", + "scripted": false, + "type": "string", + }, + Object { + "aggregatable": true, + "displayName": "timestamp", + "filterable": true, + "name": "timestamp", + "scripted": false, + "sortable": true, + "type": "date", + }, + Object { + "displayName": "message", + "filterable": false, + "name": "message", + "scripted": false, + "type": "string", + }, + Object { + "aggregatable": true, + "displayName": "extension", + "filterable": true, + "name": "extension", + "scripted": false, + "type": "string", + }, + Object { + "aggregatable": true, + "displayName": "bytes", + "filterable": true, + "name": "bytes", + "scripted": false, + "type": "number", + }, + Object { + "displayName": "scripted", + "filterable": false, + "name": "scripted", + "scripted": true, + "type": "number", + }, + ], + "getComputedFields": [Function], + "getFieldByName": [MockFunction] { + "calls": Array [ + Array [ + "extension", + ], + Array [ + "message", + ], + Array [ + "timestamp", + ], + Array [ + "extension", + ], + Array [ + "message", + ], + ], + "results": Array [ + Object { + "type": "return", + "value": Object { + "aggregatable": true, + "displayName": "extension", + "filterable": true, + "name": "extension", + "scripted": false, + "type": "string", + }, + }, + Object { + "type": "return", + "value": Object { + "displayName": "message", + "filterable": false, + "name": "message", + "scripted": false, + "type": "string", + }, + }, + Object { + "type": "return", + "value": Object { + "aggregatable": true, + "displayName": "timestamp", + "filterable": true, + "name": "timestamp", + "scripted": false, + "sortable": true, + "type": "date", + }, + }, + Object { + "type": "return", + "value": Object { + "aggregatable": true, + "displayName": "extension", + "filterable": true, + "name": "extension", + "scripted": false, + "type": "string", + }, + }, + Object { + "type": "return", + "value": Object { + "displayName": "message", + "filterable": false, + "name": "message", + "scripted": false, + "type": "string", + }, + }, + ], + }, + "getFormatterForField": [MockFunction], + "getIndexPattern": [Function], + "getName": [Function], + "getSourceFiltering": [Function], + "getTimeField": [Function], + "id": "index-pattern-with-timefield-id", + "isPersisted": [Function], + "isTimeBased": [Function], + "isTimeNanosBased": [Function], + "metaFields": Array [ + "_index", + "_score", + ], + "name": "index-pattern-with-timefield", + "timeFieldName": "timestamp", + "title": "index-pattern-with-timefield-title", + "toMinimalSpec": [Function], + "toSpec": [Function], + "type": "default", + } + } + dataViewField={ + Object { + "aggregatable": true, + "displayName": "timestamp", + "filterable": true, + "name": "timestamp", + "scripted": false, + "sortable": true, + "type": "date", + } + } + />, + "displayAsText": "timestamp", + "id": "timestamp", + "initialWidth": 212, + "isSortable": true, + "schema": "datetime", + "visibleCellActions": undefined, + }, + Object { + "actions": Object { + "additional": Array [ + Object { + "data-test-subj": "gridCopyColumnNameToClipBoardButton", + "iconProps": Object { + "size": "m", + }, + "iconType": "copyClipboard", + "label": , "onClick": [Function], "size": "xs", }, @@ -1595,24 +1963,208 @@ Array [ [Function], [Function], ], - "display":
- - - timestamp - - - - -
, + "display": , "displayAsText": "timestamp", "id": "timestamp", "initialWidth": 212, From 9021a9624868508ad414d3829c62c884d8fb9ff3 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Thu, 4 Jan 2024 17:40:45 -0400 Subject: [PATCH 8/9] [Discover] Improve numeric column text wrapping and some minor touchups --- .../components/data_table_column_header.tsx | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx index df436cdf922a3..b5fb22ff12263 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx @@ -7,12 +7,13 @@ */ import React, { useMemo } from 'react'; -import { css } from '@emotion/react'; +import { css, CSSObject } from '@emotion/react'; import { EuiIcon, EuiTextBlockTruncate, 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'; interface DataTableColumnHeaderProps { @@ -58,15 +59,7 @@ const DataTableColumnToken: React.FC< ); return columnToken ? ( - - {columnToken} - + {columnToken} ) : null; }; @@ -76,6 +69,8 @@ const DataTableColumnTitle: React.FC{columnDisplayName}; }; +const fieldIconCss: CSSObject = { verticalAlign: 'bottom' }; + function getRenderedToken({ dataView, columnName, @@ -88,18 +83,18 @@ function getRenderedToken({ // for text-based searches if (columnTypes) { return columnTypes[columnName] && columnTypes[columnName] !== 'unknown' ? ( // renders an icon or nothing - + ) : null; } const dataViewField = dataView.getFieldByName(columnName); if (dataViewField) { - return ; + return ; } if (isNestedFieldParent(columnName, dataView)) { - return ; + return ; } return null; @@ -120,9 +115,9 @@ const ColumnHeaderTruncateContainer = ({ overflow: auto; white-space: normal; word-break: break-all; - line-height: 16px; + line-height: ${euiThemeVars.euiSize}; .euiDataGridHeaderCell--numeric & { - text-align: right; + float: right; } `} > From dc877af8c079b94e66e297037bace0e868ee1880 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Mon, 8 Jan 2024 11:39:59 +0100 Subject: [PATCH 9/9] fixes after updates --- .../kbn-unified-data-table/src/components/data_table.scss | 4 ++++ .../src/components/data_table_column_header.tsx | 1 + 2 files changed, 5 insertions(+) diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index e033206635eec..ba5a7a453c72c 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -36,6 +36,10 @@ border-top: $euiBorderThin; } + .euiDataGridHeaderCell { + align-items: start; + } + .euiDataGrid--headerUnderline .euiDataGridHeaderCell { border-bottom: $euiBorderThin; } diff --git a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx index 7a6d03db399e5..babd76a8a642b 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx @@ -116,6 +116,7 @@ const ColumnHeaderTruncateContainer = ({ white-space: normal; word-break: break-all; line-height: ${euiThemeVars.euiSize}; + text-align: left; .euiDataGridHeaderCell--numeric & { float: right; }