From 0c06c5ee0ed759aa939faa97edc651db9ae5f31e Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Mon, 6 Jun 2022 17:06:16 +0530
Subject: [PATCH 1/3] fix: trace detail is updated

---
 .../TraceDetail/SelectedSpanDetails/index.tsx | 20 ++++++++++++-------
 .../TraceDetail/SelectedSpanDetails/styles.ts | 17 +++++++++++++---
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
index 87a953fd6e..dc16a2b7e9 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
@@ -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">
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts b/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
index dc5bdc03e9..211b07b190 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
@@ -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`

From 8a0bcf6cd98a2e9a711978c019a42dc1d18c69c4 Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Tue, 7 Jun 2022 15:56:16 +0530
Subject: [PATCH 2/3] feat: operation name is now ellipsed

---
 .../TraceDetail/SelectedSpanDetails/index.tsx       |  3 +--
 .../TraceDetail/SelectedSpanDetails/styles.ts       | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
index dc16a2b7e9..7d1a374b42 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
@@ -7,7 +7,6 @@ import { ITraceTree } from 'types/api/trace/getTraceItem';
 import ErrorTag from './ErrorTag';
 import {
 	CardContainer,
-	// CustomSpace,
 	CustomSubText,
 	CustomSubTitle,
 	CustomText,
@@ -32,7 +31,7 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 	return (
 		<CardContainer>
 			<StyledSpace
-				styledclass={[styles.selectedSpanDetailsContainer]}
+				styledclass={[styles.selectedSpanDetailsContainer, styles.overflow]}
 				direction="vertical"
 				style={{ marginLeft: '0.5rem' }}
 			>
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts b/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
index 211b07b190..d8bae86ba7 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
@@ -17,7 +17,6 @@ export const CustomText = styled(Paragraph)`
 
 export const CustomSubTitle = styled(Title)`
 	&&& {
-		/* color: #bdbdbd; */
 		font-size: 14px;
 		margin-bottom: 8px;
 	}
@@ -71,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,
 };

From 241121ebecb74c02855f5b9747a7c6d0acee1c85 Mon Sep 17 00:00:00 2001
From: Palash <palashgdev@gmail.com>
Date: Wed, 22 Jun 2022 23:46:30 +0530
Subject: [PATCH 3/3] chore: serivce name now ellipsed

---
 .../TraceDetail/SelectedSpanDetails/index.tsx | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
index 7d1a374b42..50f2aa9537 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
@@ -1,4 +1,4 @@
-import { Space, Tabs, Tooltip, Typography } from 'antd';
+import { Tabs, Tooltip, Typography } from 'antd';
 import { StyledSpace } from 'components/Styled';
 import useThemeMode from 'hooks/useThemeMode';
 import React, { useMemo } from 'react';
@@ -20,13 +20,16 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 	const { tree } = props;
 	const { isDarkMode } = useThemeMode();
 
-	const OverLayComponent = useMemo(() => tree?.name, [tree?.name]);
+	const OverLayComponentName = useMemo(() => tree?.name, [tree?.name]);
+	const OverLayComponentServiceName = useMemo(() => tree?.serviceName, [
+		tree?.serviceName,
+	]);
 
 	if (!tree) {
 		return <div />;
 	}
 
-	const { tags, serviceName } = tree;
+	const { tags } = tree;
 
 	return (
 		<CardContainer>
@@ -36,17 +39,18 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 				style={{ marginLeft: '0.5rem' }}
 			>
 				<strong> Details for selected Span </strong>
-				<Space direction="vertical" size={2}>
-					<CustomTitle>Service</CustomTitle>
-					<CustomText>{serviceName}</CustomText>
-				</Space>
-				{/* <CustomSpace direction="vertical" size={2}> */}
+
+				<CustomTitle>Service</CustomTitle>
+				<Tooltip overlay={OverLayComponentServiceName}>
+					<CustomText ellipsis>{tree.serviceName}</CustomText>
+				</Tooltip>
+
 				<CustomTitle>Operation</CustomTitle>
-				<Tooltip overlay={OverLayComponent}>
+				<Tooltip overlay={OverLayComponentName}>
 					<CustomText ellipsis>{tree.name}</CustomText>
 				</Tooltip>
-				{/* </CustomSpace> */}
 			</StyledSpace>
+
 			<Tabs defaultActiveKey="1">
 				<TabPane tab="Tags" key="1">
 					{tags.length !== 0 ? (