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

fix: trace detail is updated

Browse Source
This commit is contained in:
Palash gupta 2022-06-06 17:06:16 +05:30
parent 697fd1d1bf
commit 0c06c5ee0e
No known key found for this signature in database
GPG Key ID: 8FD05AE6F9150AD6
2 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
View File

@ -1,12 +1,13 @@
import { Space, Tabs, Typography } from 'antd'; import { Space, Tabs, Tooltip, Typography } from 'antd';
import { StyledSpace } from 'components/Styled'; import { StyledSpace } from 'components/Styled';
import useThemeMode from 'hooks/useThemeMode'; import useThemeMode from 'hooks/useThemeMode';
import React from 'react'; import React, { useMemo } from 'react';
import { ITraceTree } from 'types/api/trace/getTraceItem'; import { ITraceTree } from 'types/api/trace/getTraceItem';
import ErrorTag from './ErrorTag'; import ErrorTag from './ErrorTag';
import { import {
CardContainer, CardContainer,
// CustomSpace,
CustomSubText, CustomSubText,
CustomSubTitle, CustomSubTitle,
CustomText, CustomText,
@ -19,11 +20,14 @@ const { TabPane } = Tabs;
function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element { function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
const { tree } = props; const { tree } = props;
const { isDarkMode } = useThemeMode(); const { isDarkMode } = useThemeMode();
const OverLayComponent = useMemo(() => tree?.name, [tree?.name]);
if (!tree) { if (!tree) {
return <div />; return <div />;
} }
const { name, tags, serviceName } = tree; const { tags, serviceName } = tree;
return ( return (
<CardContainer> <CardContainer>
@ -37,10 +41,12 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
<CustomTitle>Service</CustomTitle> <CustomTitle>Service</CustomTitle>
<CustomText>{serviceName}</CustomText> <CustomText>{serviceName}</CustomText>
</Space> </Space>
<Space direction="vertical" size={2}> {/* <CustomSpace direction="vertical" size={2}> */}
<CustomTitle>Operation</CustomTitle> <CustomTitle>Operation</CustomTitle>
<CustomText>{name}</CustomText> <Tooltip overlay={OverLayComponent}>
</Space> <CustomText ellipsis>{tree.name}</CustomText>
</Tooltip>
{/* </CustomSpace> */}
</StyledSpace> </StyledSpace>
<Tabs defaultActiveKey="1"> <Tabs defaultActiveKey="1">
<TabPane tab="Tags" key="1"> <TabPane tab="Tags" key="1">

17
frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
View File

@ -1,7 +1,7 @@
import { Typography } from 'antd'; import { Space, Typography } from 'antd';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
const { Text, Title, Paragraph } = Typography; const { Title, Paragraph } = Typography;
export const CustomTitle = styled(Title)` export const CustomTitle = styled(Title)`
&&& { &&& {
@ -9,7 +9,7 @@ export const CustomTitle = styled(Title)`
} }
`; `;
export const CustomText = styled(Text)` export const CustomText = styled(Paragraph)`
&&& { &&& {
color: #2d9cdb; color: #2d9cdb;
} }
@ -44,6 +44,17 @@ export const CardContainer = styled.div`
width: 100%; width: 100%;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;
export const CustomSpace = styled(Space)`
&&& {
.ant-space-item {
width: 100%;
}
}
`; `;
const removeMargin = css` const removeMargin = css`