From dbba8b5b55c5c6d0db30bcfd03c60f7a45aa7db4 Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Thu, 22 Dec 2022 17:35:20 +0530
Subject: [PATCH] feat: event time is updated when root span is missing

---
 .../SelectedSpanDetails/Events/Event.tsx      | 36 +++++++---------
 .../Events/EventStartTime.tsx                 | 31 ++++++++++++++
 .../Events/RelativeStartTime.tsx              | 42 +++++++++++++++++++
 frontend/src/container/TraceDetail/index.tsx  |  2 +-
 4 files changed, 90 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/container/TraceDetail/SelectedSpanDetails/Events/EventStartTime.tsx
 create mode 100644 frontend/src/container/TraceDetail/SelectedSpanDetails/Events/RelativeStartTime.tsx

diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/Event.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/Event.tsx
index 02f08c5a0a..fb53811f45 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/Event.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/Event.tsx
@@ -1,6 +1,4 @@
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Collapse, Popover, Space } from 'antd';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { Collapse } from 'antd';
 import useThemeMode from 'hooks/useThemeMode';
 import keys from 'lodash-es/keys';
 import map from 'lodash-es/map';
@@ -9,6 +7,8 @@ import { ITraceTree } from 'types/api/trace/getTraceItem';
 
 import EllipsedButton from '../EllipsedButton';
 import { CustomSubText, CustomSubTitle } from '../styles';
+import EventStartTime from './EventStartTime';
+import RelativeStartTime from './RelativeStartTime';
 
 const { Panel } = Collapse;
 
@@ -25,10 +25,6 @@ function ErrorTag({
 			{map(event, ({ attributeMap, name, timeUnixNano }) => {
 				const attributes = keys(attributeMap);
 
-				const { time, timeUnitName } = convertTimeToRelevantUnit(
-					timeUnixNano / 1e6 - firstSpanStartTime,
-				);
-
 				return (
 					<Collapse
 						key={`${name}${JSON.stringify(attributeMap)}`}
@@ -39,18 +35,14 @@ function ErrorTag({
 							header={name || attributeMap?.event}
 							key={name || attributeMap.event}
 						>
-							<Space direction="horizontal" align="center">
-								<CustomSubTitle style={{ margin: 0 }} ellipsis>
-									Event Start Time
-								</CustomSubTitle>
-								<Popover content="Relative to start of the full trace">
-									<InfoCircleOutlined />
-								</Popover>
-							</Space>
-
-							<CustomSubText isDarkMode={isDarkMode}>
-								{`${time.toFixed(2)} ${timeUnitName}`}
-							</CustomSubText>
+							{firstSpanStartTime ? (
+								<RelativeStartTime
+									firstSpanStartTime={firstSpanStartTime}
+									timeUnixNano={timeUnixNano}
+								/>
+							) : (
+								<EventStartTime timeUnixNano={timeUnixNano} />
+							)}
 
 							{map(attributes, (event) => {
 								const value = attributeMap[event];
@@ -93,7 +85,11 @@ interface ErrorTagProps {
 	event: ITraceTree['event'];
 	onToggleHandler: (isOpen: boolean) => void;
 	setText: (text: { subText: string; text: string }) => void;
-	firstSpanStartTime: number;
+	firstSpanStartTime?: number;
 }
 
+ErrorTag.defaultProps = {
+	firstSpanStartTime: undefined,
+};
+
 export default ErrorTag;
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/EventStartTime.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/EventStartTime.tsx
new file mode 100644
index 0000000000..8ba3efa54b
--- /dev/null
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/EventStartTime.tsx
@@ -0,0 +1,31 @@
+import { Popover } from 'antd';
+import dayjs from 'dayjs';
+import useThemeMode from 'hooks/useThemeMode';
+import React from 'react';
+
+import { CustomSubText, CustomSubTitle } from '../styles';
+
+function EventStartTime({ timeUnixNano }: EventStartTimeProps): JSX.Element {
+	const { isDarkMode } = useThemeMode();
+
+	const humanReadableTimeInDayJs = dayjs(timeUnixNano / 1e6).format(
+		'YYYY-MM-DD hh:mm:ss.SSS A',
+	);
+
+	return (
+		<>
+			<CustomSubTitle style={{ margin: 0 }}>Event Time</CustomSubTitle>
+			<CustomSubText ellipsis isDarkMode={isDarkMode}>
+				<Popover content={humanReadableTimeInDayJs}>
+					{humanReadableTimeInDayJs}
+				</Popover>
+			</CustomSubText>
+		</>
+	);
+}
+
+interface EventStartTimeProps {
+	timeUnixNano: number;
+}
+
+export default EventStartTime;
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/RelativeStartTime.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/RelativeStartTime.tsx
new file mode 100644
index 0000000000..709291b30d
--- /dev/null
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/RelativeStartTime.tsx
@@ -0,0 +1,42 @@
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Popover, Space } from 'antd';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import useThemeMode from 'hooks/useThemeMode';
+import React from 'react';
+
+import { CustomSubText, CustomSubTitle } from '../styles';
+
+function StartTime({
+	firstSpanStartTime,
+	timeUnixNano,
+}: StartTimeProps): JSX.Element {
+	const { isDarkMode } = useThemeMode();
+
+	const { time, timeUnitName } = convertTimeToRelevantUnit(
+		timeUnixNano / 1e6 - (firstSpanStartTime || 0),
+	);
+
+	return (
+		<>
+			<Space direction="horizontal" align="center">
+				<CustomSubTitle style={{ margin: 0 }} ellipsis>
+					Event Start Time
+				</CustomSubTitle>
+				<Popover content="Relative to start of the full trace">
+					<InfoCircleOutlined />
+				</Popover>
+			</Space>
+
+			<CustomSubText isDarkMode={isDarkMode}>
+				{`${time.toFixed(2)} ${timeUnitName}`}
+			</CustomSubText>
+		</>
+	);
+}
+
+interface StartTimeProps {
+	timeUnixNano: number;
+	firstSpanStartTime: number;
+}
+
+export default StartTime;
diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx
index 0a9a5ffd1a..efcf406cd2 100644
--- a/frontend/src/container/TraceDetail/index.tsx
+++ b/frontend/src/container/TraceDetail/index.tsx
@@ -76,7 +76,7 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 		/* eslint-enable */
 	}, [treesData, spanServiceColors]);
 
-	const firstSpanStartTime = tree.spanTree[0].startTime;
+	const firstSpanStartTime = tree.spanTree[0]?.startTime;
 
 	const [globalTraceMetadata] = useState<ITraceMetaData>({
 		...traceMetaData,