GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-06-24 06:26:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into trace-filter-toolip

Browse Source
This commit is contained in:
Palash 2022-06-23 18:35:02 +05:30 committed by GitHub
commit d726ad9ca6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import { Space, Tabs, Typography } from 'antd';
import { 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';
@ -19,29 +19,38 @@ const { TabPane } = Tabs;
function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
const { tree } = props;
const { isDarkMode } = useThemeMode();
const OverLayComponentName = useMemo(() => tree?.name, [tree?.name]);
const OverLayComponentServiceName = useMemo(() => tree?.serviceName, [
tree?.serviceName,
]);
if (!tree) {
return <div />;
}
const { name, tags, serviceName } = tree;
const { tags } = tree;
return (
<CardContainer>
<StyledSpace
styledclass={[styles.selectedSpanDetailsContainer]}
styledclass={[styles.selectedSpanDetailsContainer, styles.overflow]}
direction="vertical"
style={{ marginLeft: '0.5rem' }}
>
<strong> Details for selected Span </strong>
<Space direction="vertical" size={2}>
<CustomTitle>Service</CustomTitle>
<CustomText>{serviceName}</CustomText>
</Space>
<Space direction="vertical" size={2}>
<CustomTitle>Operation</CustomTitle>
<CustomText>{name}</CustomText>
</Space>
<CustomTitle>Service</CustomTitle>
<Tooltip overlay={OverLayComponentServiceName}>
<CustomText ellipsis>{tree.serviceName}</CustomText>
</Tooltip>
<CustomTitle>Operation</CustomTitle>
<Tooltip overlay={OverLayComponentName}>
<CustomText ellipsis>{tree.name}</CustomText>
</Tooltip>
</StyledSpace>
<Tabs defaultActiveKey="1">
<TabPane tab="Tags" key="1">
{tags.length !== 0 ? (

30
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';
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;
}
@ -17,7 +17,6 @@ export const CustomText = styled(Text)`
export const CustomSubTitle = styled(Title)`
&&& {
/* color: #bdbdbd; */
font-size: 14px;
margin-bottom: 8px;
}
@ -44,6 +43,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`
@ -60,9 +70,21 @@ const selectedSpanDetailsContainer = css`
const spanEventsTabsContainer = css`
margin-top: 1rem;
`;
const overflow = css`
width: 95%;
> div.ant-space-item:nth-child(4) {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
`;
export const styles = {
removeMargin,
removePadding,
selectedSpanDetailsContainer,
spanEventsTabsContainer,
overflow,
};