[ML] Fixes multi line truncation for id/description columns in job li…

…sts (#169830) Makes use of EUI's new multi-line truncation option for table columns (elastic/eui#7226). For columns that use this feature, this PR wraps the text in custom render functions which add a `span` element with a `title` attribute and the cells text.
elastic · Oct 30, 2023 · 3ea90b3 · 3ea90b3
1 parent af88e09
commit 3ea90b3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 31 deletions.
diff --git a/...ops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx b/...ops/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<LogRateAnalysisResultsTableProps> =
               </EuiToolTip>
             )}
 
-            {fieldName}
+            <span title={fieldName}>{fieldName}</span>
           </>
         );
       },
       sortable: true,
+      truncateText: true,
       valign: 'middle',
     },
     {
@@ -183,21 +176,21 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
         defaultMessage: 'Field value',
       }),
       render: (_, { fieldValue, type }) => (
-        <div css={cssMultiLineTruncation}>
+        <span title={String(fieldValue)}>
           {type === 'keyword' ? (
             String(fieldValue)
           ) : (
             <EuiText size="xs">
               <EuiCode language="log" transparentBackground css={{ paddingInline: '0px' }}>
-                {fieldValue}
+                {String(fieldValue)}
               </EuiCode>
             </EuiText>
           )}
-        </div>
+        </span>
       ),
       sortable: true,
       textOnly: true,
-      truncateText: false,
+      truncateText: { lines: TRUNCATE_TEXT_LINES },
       valign: 'middle',
     },
     {

diff --git a/...data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx b/...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,18 +214,24 @@ 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 <span title={id}>{id}</span>;
+      },
     },
     {
       field: DataFrameAnalyticsListColumn.description,
       name: i18n.translate('xpack.ml.dataframe.analyticsList.description', {
         defaultMessage: 'Description',
       }),
       sortable: true,
-      truncateText: true,
+      truncateText: { lines: TRUNCATE_TEXT_LINES },
       'data-test-subj': 'mlAnalyticsTableColumnJobDescription',
+      render: (description: string) => {
+        return <span title={description}>{description}</span>;
+      },
     },
     {
       field: DataFrameAnalyticsListColumn.memoryStatus,

diff --git a/...nsform/public/app/sections/transform_management/components/transform_list/use_columns.tsx b/...nsform/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 <span title={transformId}>{transformId}</span>;
         return (
           <>
-            {transformId}
+            <span
+              title={`${transformId} (${i18n.translate(
+                'xpack.transform.transformList.managedBadgeLabel',
+                {
+                  defaultMessage: 'Managed',
+                }
+              )})`}
+            >
+              {transformId}
+            </span>
             &nbsp;
             <EuiToolTip
               content={i18n.translate('xpack.transform.transformList.managedBadgeTooltip', {
@@ -222,19 +233,9 @@ export const useColumns = (
       'data-test-subj': 'transformListColumnDescription',
       name: i18n.translate('xpack.transform.description', { defaultMessage: 'Description' }),
       sortable: true,
+      truncateText: { lines: TRUNCATE_TEXT_LINES },
       render(text: string) {
-        return (
-          <EuiText
-            style={{
-              display: '-webkit-box',
-              WebkitBoxOrient: 'vertical',
-              WebkitLineClamp: 3,
-              overflow: 'hidden',
-            }}
-          >
-            {text}
-          </EuiText>
-        );
+        return <span title={text}>{text}</span>;
       },
     },
     {