diff --git a/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx b/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx index de66040c8e382..95f4460c7f918 100644 --- a/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx +++ b/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx @@ -6,7 +6,6 @@ */ import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; -import { css } from '@emotion/react'; import { orderBy, isEqual } from 'lodash'; import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey'; @@ -54,14 +53,7 @@ const PAGINATION_SIZE_OPTIONS = [5, 10, 20, 50]; const DEFAULT_SORT_FIELD = 'pValue'; const DEFAULT_SORT_DIRECTION = 'asc'; -const TRUNCATE_MAX_LINES = 3; -const cssMultiLineTruncation = css` - display: -webkit-box; - line-clamp: ${TRUNCATE_MAX_LINES}; - -webkit-line-clamp: ${TRUNCATE_MAX_LINES}; - -webkit-box-orient: vertical; - overflow: hidden; -`; +const TRUNCATE_TEXT_LINES = 3; interface LogRateAnalysisResultsTableProps { significantTerms: SignificantTerm[]; @@ -169,11 +161,12 @@ export const LogRateAnalysisResultsTable: FC = )} - {fieldName} + {fieldName} ); }, sortable: true, + truncateText: true, valign: 'middle', }, { @@ -183,21 +176,21 @@ export const LogRateAnalysisResultsTable: FC = defaultMessage: 'Field value', }), render: (_, { fieldValue, type }) => ( -
+ {type === 'keyword' ? ( String(fieldValue) ) : ( - {fieldValue} + {String(fieldValue)} )} -
+ ), sortable: true, textOnly: true, - truncateText: false, + truncateText: { lines: TRUNCATE_TEXT_LINES }, valign: 'middle', }, { diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx index 6f4a380cc2c8b..38516df7611bc 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx @@ -37,6 +37,8 @@ import { useActions } from './use_actions'; import { useMlLink } from '../../../../../contexts/kibana'; import { ML_PAGES } from '../../../../../../../common/constants/locator'; +const TRUNCATE_TEXT_LINES = 3; + enum TASK_STATE_COLOR { analyzing = 'primary', failed = 'danger', @@ -212,9 +214,12 @@ export const useColumns = ( defaultMessage: 'ID', }), sortable: (item: DataFrameAnalyticsListRow) => item.id, - truncateText: true, + truncateText: { lines: TRUNCATE_TEXT_LINES }, 'data-test-subj': 'mlAnalyticsTableColumnId', scope: 'row', + render: (id: string) => { + return {id}; + }, }, { field: DataFrameAnalyticsListColumn.description, @@ -222,8 +227,11 @@ export const useColumns = ( defaultMessage: 'Description', }), sortable: true, - truncateText: true, + truncateText: { lines: TRUNCATE_TEXT_LINES }, 'data-test-subj': 'mlAnalyticsTableColumnJobDescription', + render: (description: string) => { + return {description}; + }, }, { field: DataFrameAnalyticsListColumn.memoryStatus, diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_columns.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_columns.tsx index 732261bde89d2..6edc99c3c45f7 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_columns.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_columns.tsx @@ -41,6 +41,8 @@ import { isManagedTransform } from '../../../../common/managed_transforms_utils' import { TransformHealthColoredDot } from './transform_health_colored_dot'; import { TransformTaskStateBadge } from './transform_task_state_badge'; +const TRUNCATE_TEXT_LINES = 3; + const TRANSFORM_INSUFFICIENT_PERMISSIONS_MSG = i18n.translate( 'xpack.transform.transformList.needsReauthorizationBadge.insufficientPermissions', { @@ -131,13 +133,22 @@ export const useColumns = ( 'data-test-subj': 'transformListColumnId', name: 'ID', sortable: true, - truncateText: true, + truncateText: { lines: TRUNCATE_TEXT_LINES }, scope: 'row', render: (transformId, item) => { - if (!isManagedTransform(item)) return transformId; + if (!isManagedTransform(item)) return {transformId}; return ( <> - {transformId} + + {transformId} +   - {text} - - ); + return {text}; }, }, {