mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-14 11:45:58 +08:00
fix: trace detail is updated
This commit is contained in:
parent
697fd1d1bf
commit
0c06c5ee0e
@ -1,12 +1,13 @@
|
||||
import { Space, Tabs, Typography } from 'antd';
|
||||
import { Space, Tabs, Tooltip, Typography } from 'antd';
|
||||
import { StyledSpace } from 'components/Styled';
|
||||
import useThemeMode from 'hooks/useThemeMode';
|
||||
import React from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { ITraceTree } from 'types/api/trace/getTraceItem';
|
||||
|
||||
import ErrorTag from './ErrorTag';
|
||||
import {
|
||||
CardContainer,
|
||||
// CustomSpace,
|
||||
CustomSubText,
|
||||
CustomSubTitle,
|
||||
CustomText,
|
||||
@ -19,11 +20,14 @@ const { TabPane } = Tabs;
|
||||
function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
|
||||
const { tree } = props;
|
||||
const { isDarkMode } = useThemeMode();
|
||||
|
||||
const OverLayComponent = useMemo(() => tree?.name, [tree?.name]);
|
||||
|
||||
if (!tree) {
|
||||
return <div />;
|
||||
}
|
||||
|
||||
const { name, tags, serviceName } = tree;
|
||||
const { tags, serviceName } = tree;
|
||||
|
||||
return (
|
||||
<CardContainer>
|
||||
@ -37,10 +41,12 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
|
||||
<CustomTitle>Service</CustomTitle>
|
||||
<CustomText>{serviceName}</CustomText>
|
||||
</Space>
|
||||
<Space direction="vertical" size={2}>
|
||||
<CustomTitle>Operation</CustomTitle>
|
||||
<CustomText>{name}</CustomText>
|
||||
</Space>
|
||||
{/* <CustomSpace direction="vertical" size={2}> */}
|
||||
<CustomTitle>Operation</CustomTitle>
|
||||
<Tooltip overlay={OverLayComponent}>
|
||||
<CustomText ellipsis>{tree.name}</CustomText>
|
||||
</Tooltip>
|
||||
{/* </CustomSpace> */}
|
||||
</StyledSpace>
|
||||
<Tabs defaultActiveKey="1">
|
||||
<TabPane tab="Tags" key="1">
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { Typography } from 'antd';
|
||||
import { Space, Typography } from 'antd';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
const { Text, Title, Paragraph } = Typography;
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
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;
|
||||
}
|
||||
@ -44,6 +44,17 @@ export const CardContainer = styled.div`
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
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`
|
||||
|
Loading…
x
Reference in New Issue
Block a user