GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-28 22:31:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: tooltip is added and max width is configured in the left panel to show text ellipsis

Browse Source
This commit is contained in:
Palash gupta 2022-05-19 08:28:50 +05:30
parent 53528f1045
commit 358fc3a217
No known key found for this signature in database
GPG Key ID: 8FD05AE6F9150AD6
3 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx
View File

@ -1,7 +1,7 @@
import { Checkbox, notification, Typography } from 'antd';
import { Checkbox, notification, Tooltip, Typography } from 'antd';
import getFilters from 'api/trace/getFilters';
import { AxiosError } from 'axios';
import React, { useState } from 'react';
import React, { useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Dispatch } from 'redux';
import { getFilter, updateURL } from 'store/actions/trace/util';
@ -11,7 +11,7 @@ import { UPDATE_ALL_FILTERS } from 'types/actions/trace';
import { GlobalReducer } from 'types/reducer/globalTime';
import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
import { CheckBoxContainer } from './styles';
import { CheckBoxContainer, ParaGraph } from './styles';
function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
const {
@ -155,6 +155,11 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
const isCheckBoxSelected = isUserSelected;
const TooTipOverLay = useMemo(
(): JSX.Element => <Typography>{keyValue}</Typography>,
[keyValue],
);
return (
<CheckBoxContainer>
<Checkbox
@ -164,7 +169,9 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
defaultChecked
key={keyValue}
>
{keyValue}
<Tooltip overlay={TooTipOverLay}>
<ParaGraph ellipsis>{keyValue}</ParaGraph>
</Tooltip>
</Checkbox>
{isCheckBoxSelected ? (
<Typography>{value}</Typography>

8
frontend/src/container/Trace/Filters/Panel/PanelBody/Common/styles.ts
View File

@ -1,3 +1,4 @@
import { Typography } from 'antd';
import styled from 'styled-components';
export const CheckBoxContainer = styled.div`
@ -9,3 +10,10 @@ export const CheckBoxContainer = styled.div`
margin-top: 0.5rem;
margin-bottom: 0.5rem;
`;
export const ParaGraph = styled(Typography.Paragraph)`
&&& {
margin: 0;
max-width: 8rem;
}
`;

4
frontend/src/pages/Trace/styles.ts
View File

@ -10,8 +10,8 @@ export const Container = styled.div`
export const LeftContainer = styled(Card)`
flex: 0.5;
width: 95%;
padding-right: 0.5rem;
margin-right: 0.5rem;
width: 15rem;
.ant-card-body {
padding: 0;