Skip to content

Commit

Permalink
[ML] Fixes multi line truncation for id/description columns in job li…
Browse files Browse the repository at this point in the history
…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.
  • Loading branch information
walterra authored Oct 30, 2023
1 parent af88e09 commit 3ea90b3
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 31 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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[];
Expand Down Expand Up @@ -169,11 +161,12 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
</EuiToolTip>
)}

{fieldName}
<span title={fieldName}>{fieldName}</span>
</>
);
},
sortable: true,
truncateText: true,
valign: 'middle',
},
{
Expand All @@ -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',
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
{
Expand Down Expand Up @@ -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', {
Expand Down Expand Up @@ -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>;
},
},
{
Expand Down

0 comments on commit 3ea90b3

Please sign in to comment.