From 5a0a7c2c6031d8e69bad334e27973bf6da8a052e Mon Sep 17 00:00:00 2001 From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com> Date: Mon, 30 Sep 2024 11:48:48 +0530 Subject: [PATCH] fix: restricted column long value to 3 line and line clamped (#6056) * fix: restricted column long value to 3 line and line clamped * fix: added tooltip prop as prop for generic component and passed style from consumer * fix: comment resolved * fix: refactored styles * fix: updated snapshot * fix: removed console log --- .../GridTableComponent.styles.scss | 5 ++ .../container/GridTableComponent/index.tsx | 28 ++++++- .../LogsPanelComponent.styles.scss | 3 +- .../TablePanelWrapper.test.tsx.snap | 84 +++++++++++++++---- .../TracesTableComponent.styles.scss | 3 +- .../LineClampedText/LineClampedText.tsx | 17 +++- 6 files changed, 118 insertions(+), 22 deletions(-) create mode 100644 frontend/src/container/GridTableComponent/GridTableComponent.styles.scss diff --git a/frontend/src/container/GridTableComponent/GridTableComponent.styles.scss b/frontend/src/container/GridTableComponent/GridTableComponent.styles.scss new file mode 100644 index 0000000000..80491e991a --- /dev/null +++ b/frontend/src/container/GridTableComponent/GridTableComponent.styles.scss @@ -0,0 +1,5 @@ +.long-text-tooltip { + max-width: 500px; + max-height: 500px; + overflow-y: auto; +} diff --git a/frontend/src/container/GridTableComponent/index.tsx b/frontend/src/container/GridTableComponent/index.tsx index fbd3892c48..dfa90b8255 100644 --- a/frontend/src/container/GridTableComponent/index.tsx +++ b/frontend/src/container/GridTableComponent/index.tsx @@ -1,3 +1,5 @@ +import './GridTableComponent.styles.scss'; + import { ExclamationCircleFilled } from '@ant-design/icons'; import { Space, Tooltip } from 'antd'; import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig'; @@ -5,6 +7,7 @@ import { Events } from 'constants/events'; import { QueryTable } from 'container/QueryTable'; import { RowData } from 'lib/query/createTableColumnsFromQuery'; import { cloneDeep, get, isEmpty } from 'lodash-es'; +import LineClampedText from 'periscope/components/LineClampedText/LineClampedText'; import { memo, ReactNode, useCallback, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { eventEmitter } from 'utils/getEventEmitter'; @@ -116,7 +119,16 @@ function GridTableComponent({ } > - {text} + + {hasMultipleMatches && ( @@ -127,7 +139,19 @@ function GridTableComponent({ ); } } - return
{text}
; + return ( +
+ +
+ ); }, })); diff --git a/frontend/src/container/LogsPanelTable/LogsPanelComponent.styles.scss b/frontend/src/container/LogsPanelTable/LogsPanelComponent.styles.scss index b355c90551..99f93a7935 100644 --- a/frontend/src/container/LogsPanelTable/LogsPanelComponent.styles.scss +++ b/frontend/src/container/LogsPanelTable/LogsPanelComponent.styles.scss @@ -63,8 +63,7 @@ height: 40px; justify-content: end; padding: 0 8px; - margin-top: 12px; - margin-bottom: 2px; + margin: 12px 0 2px; } } diff --git a/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap b/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap index 1a930f740c..6de3e82778 100644 --- a/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap +++ b/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap @@ -266,14 +266,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp class="ant-table-cell" >
- demo-app +
+ demo-app +
- 4.35 s +
+ 4.35 s +
@@ -284,14 +292,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp class="ant-table-cell" >
- customer +
+ customer +
- 431 ms +
+ 431 ms +
@@ -302,14 +318,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp class="ant-table-cell" >
- mysql +
+ mysql +
- 431 ms +
+ 431 ms +
@@ -320,14 +344,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp class="ant-table-cell" >
- frontend +
+ frontend +
- 287 ms +
+ 287 ms +
@@ -338,14 +370,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp class="ant-table-cell" >
- driver +
+ driver +
- 230 ms +
+ 230 ms +
@@ -356,14 +396,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp class="ant-table-cell" >
- route +
+ route +
- 66.4 ms +
+ 66.4 ms +
@@ -374,14 +422,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp class="ant-table-cell" >
- redis +
+ redis +
- 31.3 ms +
+ 31.3 ms +
diff --git a/frontend/src/container/TracesTableComponent/TracesTableComponent.styles.scss b/frontend/src/container/TracesTableComponent/TracesTableComponent.styles.scss index c59bf3c5ad..30f90d4a09 100644 --- a/frontend/src/container/TracesTableComponent/TracesTableComponent.styles.scss +++ b/frontend/src/container/TracesTableComponent/TracesTableComponent.styles.scss @@ -52,8 +52,7 @@ height: 40px; justify-content: end; padding: 0 8px; - margin-top: 12px; - margin-bottom: 2px; + margin: 12px 0 2px; } } diff --git a/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx b/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx index 6b90704b0c..9c77d514e0 100644 --- a/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx +++ b/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx @@ -1,14 +1,16 @@ import './LineClampedText.styles.scss'; -import { Tooltip } from 'antd'; +import { Tooltip, TooltipProps } from 'antd'; import { useEffect, useRef, useState } from 'react'; function LineClampedText({ text, lines, + tooltipProps, }: { text: string; lines?: number; + tooltipProps?: TooltipProps; }): JSX.Element { const [isOverflowing, setIsOverflowing] = useState(false); const textRef = useRef(null); @@ -42,11 +44,22 @@ function LineClampedText({ ); - return isOverflowing ? {content} : content; + return isOverflowing ? ( + + {content} + + ) : ( + content + ); } LineClampedText.defaultProps = { lines: 1, + tooltipProps: {}, }; export default LineClampedText;