GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 12:18:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: restricted column long value to 3 line and line clamped (#6056)

Browse Source 
* 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
This commit is contained in:
SagarRajput-7 2024-09-30 11:48:48 +05:30 committed by GitHub
parent 794d6fc0ca
commit 5a0a7c2c60
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 118 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/container/GridTableComponent/GridTableComponent.styles.scss Normal file
View File

@ -0,0 +1,5 @@
.long-text-tooltip {
max-width: 500px;
max-height: 500px;
overflow-y: auto;
}

28
frontend/src/container/GridTableComponent/index.tsx
View File

@ -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({
}
>
<Space>
{text}
<LineClampedText
text={text}
lines={3}
tooltipProps={{
placement: 'right',
autoAdjustOverflow: true,
overlayClassName: 'long-text-tooltip',
}}
/>
{hasMultipleMatches && (
<Tooltip title={t('this_value_satisfies_multiple_thresholds')}>
<ExclamationCircleFilled className="value-graph-icon" />
@ -127,7 +139,19 @@ function GridTableComponent({
);
}
}
return <div>{text}</div>;
return (
<div>
<LineClampedText
text={text}
lines={3}
tooltipProps={{
placement: 'right',
autoAdjustOverflow: true,
overlayClassName: 'long-text-tooltip',
}}
/>
</div>
);
},
}));

3
frontend/src/container/LogsPanelTable/LogsPanelComponent.styles.scss
View File

@ -63,8 +63,7 @@
height: 40px;
justify-content: end;
padding: 0 8px;
margin-top: 12px;
margin-bottom: 2px;
margin: 12px 0 2px;
}
}

84
frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap
View File

@ -266,14 +266,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp
class="ant-table-cell"
>
<div>
demo-app
<div
class="line-clamped-text"
>
demo-app
</div>
</div>
</td>
<td
class="ant-table-cell"
>
<div>
4.35 s
<div
class="line-clamped-text"
>
4.35 s
</div>
</div>
</td>
</tr>
@ -284,14 +292,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp
class="ant-table-cell"
>
<div>
customer
<div
class="line-clamped-text"
>
customer
</div>
</div>
</td>
<td
class="ant-table-cell"
>
<div>
431 ms
<div
class="line-clamped-text"
>
431 ms
</div>
</div>
</td>
</tr>
@ -302,14 +318,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp
class="ant-table-cell"
>
<div>
mysql
<div
class="line-clamped-text"
>
mysql
</div>
</div>
</td>
<td
class="ant-table-cell"
>
<div>
431 ms
<div
class="line-clamped-text"
>
431 ms
</div>
</div>
</td>
</tr>
@ -320,14 +344,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp
class="ant-table-cell"
>
<div>
frontend
<div
class="line-clamped-text"
>
frontend
</div>
</div>
</td>
<td
class="ant-table-cell"
>
<div>
287 ms
<div
class="line-clamped-text"
>
287 ms
</div>
</div>
</td>
</tr>
@ -338,14 +370,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp
class="ant-table-cell"
>
<div>
driver
<div
class="line-clamped-text"
>
driver
</div>
</div>
</td>
<td
class="ant-table-cell"
>
<div>
230 ms
<div
class="line-clamped-text"
>
230 ms
</div>
</div>
</td>
</tr>
@ -356,14 +396,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp
class="ant-table-cell"
>
<div>
route
<div
class="line-clamped-text"
>
route
</div>
</div>
</td>
<td
class="ant-table-cell"
>
<div>
66.4 ms
<div
class="line-clamped-text"
>
66.4 ms
</div>
</div>
</td>
</tr>
@ -374,14 +422,22 @@ exports[`Table panel wrappper tests table should render fine with the query resp
class="ant-table-cell"
>
<div>
redis
<div
class="line-clamped-text"
>
redis
</div>
</div>
</td>
<td
class="ant-table-cell"
>
<div>
31.3 ms
<div
class="line-clamped-text"
>
31.3 ms
</div>
</div>
</td>
</tr>

3
frontend/src/container/TracesTableComponent/TracesTableComponent.styles.scss
View File

@ -52,8 +52,7 @@
height: 40px;
justify-content: end;
padding: 0 8px;
margin-top: 12px;
margin-bottom: 2px;
margin: 12px 0 2px;
}
}

17
frontend/src/periscope/components/LineClampedText/LineClampedText.tsx
View File

@ -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<HTMLDivElement>(null);
@ -42,11 +44,22 @@ function LineClampedText({
</div>
);
return isOverflowing ? <Tooltip title={text}>{content}</Tooltip> : content;
return isOverflowing ? (
<Tooltip
title={text}
// eslint-disable-next-line react/jsx-props-no-spreading
{...tooltipProps}
>
{content}
</Tooltip>
) : (
content
);
}
LineClampedText.defaultProps = {
lines: 1,
tooltipProps: {},
};
export default LineClampedText;