fix: trace detail is updated

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

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 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">

View File

@ -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`