GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-29 18:12:01 +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 getFilters from 'api/trace/getFilters';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import React, { useState } from 'react'; import React, { useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { getFilter, updateURL } from 'store/actions/trace/util'; 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 { GlobalReducer } from 'types/reducer/globalTime';
import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
import { CheckBoxContainer } from './styles'; import { CheckBoxContainer, ParaGraph } from './styles';
function CheckBoxComponent(props: CheckBoxProps): JSX.Element { function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
const { const {
@ -155,6 +155,11 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
const isCheckBoxSelected = isUserSelected; const isCheckBoxSelected = isUserSelected;
const TooTipOverLay = useMemo(
(): JSX.Element => <Typography>{keyValue}</Typography>,
[keyValue],
);
return ( return (
<CheckBoxContainer> <CheckBoxContainer>
<Checkbox <Checkbox
@ -164,7 +169,9 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
defaultChecked defaultChecked
key={keyValue} key={keyValue}
> >
{keyValue} <Tooltip overlay={TooTipOverLay}>
<ParaGraph ellipsis>{keyValue}</ParaGraph>
</Tooltip>
</Checkbox> </Checkbox>
{isCheckBoxSelected ? ( {isCheckBoxSelected ? (
<Typography>{value}</Typography> <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'; import styled from 'styled-components';
export const CheckBoxContainer = styled.div` export const CheckBoxContainer = styled.div`
@ -9,3 +10,10 @@ export const CheckBoxContainer = styled.div`
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 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)` export const LeftContainer = styled(Card)`
flex: 0.5; flex: 0.5;
width: 95%; margin-right: 0.5rem;
padding-right: 0.5rem; width: 15rem;
.ant-card-body { .ant-card-body {
padding: 0; padding: 0;