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

Merge branch 'develop' into 490-dashboard

Browse Source
This commit is contained in:
Palash 2022-06-23 18:35:10 +05:30 committed by GitHub
commit 6bdcd4f5bb
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 { 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';
@ -19,29 +19,38 @@ 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 OverLayComponentName = useMemo(() => tree?.name, [tree?.name]);
const OverLayComponentServiceName = useMemo(() => tree?.serviceName, [
tree?.serviceName,
]);
if (!tree) { if (!tree) {
return <div />; return <div />;
} }
const { name, tags, serviceName } = tree; const { tags } = tree;
return ( return (
<CardContainer> <CardContainer>
<StyledSpace <StyledSpace
styledclass={[styles.selectedSpanDetailsContainer]} styledclass={[styles.selectedSpanDetailsContainer, styles.overflow]}
direction="vertical" direction="vertical"
style={{ marginLeft: '0.5rem' }} style={{ marginLeft: '0.5rem' }}
> >
<strong> Details for selected Span </strong> <strong> Details for selected Span </strong>
<Space direction="vertical" size={2}>
<CustomTitle>Service</CustomTitle> <CustomTitle>Service</CustomTitle>
<CustomText>{serviceName}</CustomText> <Tooltip overlay={OverLayComponentServiceName}>
</Space> <CustomText ellipsis>{tree.serviceName}</CustomText>
<Space direction="vertical" size={2}> </Tooltip>
<CustomTitle>Operation</CustomTitle>
<CustomText>{name}</CustomText> <CustomTitle>Operation</CustomTitle>
</Space> <Tooltip overlay={OverLayComponentName}>
<CustomText ellipsis>{tree.name}</CustomText>
</Tooltip>
</StyledSpace> </StyledSpace>
<Tabs defaultActiveKey="1"> <Tabs defaultActiveKey="1">
<TabPane tab="Tags" key="1"> <TabPane tab="Tags" key="1">
{tags.length !== 0 ? ( {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'; 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;
} }
@ -17,7 +17,6 @@ export const CustomText = styled(Text)`
export const CustomSubTitle = styled(Title)` export const CustomSubTitle = styled(Title)`
&&& { &&& {
/* color: #bdbdbd; */
font-size: 14px; font-size: 14px;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -44,6 +43,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`
@ -60,9 +70,21 @@ const selectedSpanDetailsContainer = css`
const spanEventsTabsContainer = css` const spanEventsTabsContainer = css`
margin-top: 1rem; 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 = { export const styles = {
removeMargin, removeMargin,
removePadding, removePadding,
selectedSpanDetailsContainer, selectedSpanDetailsContainer,
spanEventsTabsContainer, spanEventsTabsContainer,
overflow,
}; };