From ab5311caac7334077efd2b701feb8a060cb69b6b Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Fri, 2 Dec 2022 10:34:06 +0530
Subject: [PATCH] feat: events is updated by adding the timestamp (#1802)

* feat: events is updated
* chore: title is updated
* feat: trace detail event timestamp is updated
---
 .../src/components/Graph/Plugin/Legend.ts     |  2 +
 .../General/AddTags/index.tsx                 |  3 +-
 .../{ErrorTag.tsx => Events/Event.tsx}        | 32 +++++++++++++---
 .../SelectedSpanDetails/Events/index.tsx      | 38 +++++++++++++++++++
 .../TraceDetail/SelectedSpanDetails/index.tsx | 22 +++++------
 frontend/src/container/TraceDetail/index.tsx  |  3 ++
 frontend/src/container/TraceDetail/utils.ts   | 15 +++++++-
 frontend/src/types/api/trace/getTraceItem.ts  |  3 +-
 8 files changed, 97 insertions(+), 21 deletions(-)
 rename frontend/src/container/TraceDetail/SelectedSpanDetails/{ErrorTag.tsx => Events/Event.tsx} (61%)
 create mode 100644 frontend/src/container/TraceDetail/SelectedSpanDetails/Events/index.tsx

diff --git a/frontend/src/components/Graph/Plugin/Legend.ts b/frontend/src/components/Graph/Plugin/Legend.ts
index 51ec58df2e..b1e9befffd 100644
--- a/frontend/src/components/Graph/Plugin/Legend.ts
+++ b/frontend/src/components/Graph/Plugin/Legend.ts
@@ -62,6 +62,8 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
 				li.style.marginTop = '5px';
 
 				li.onclick = (): void => {
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					// @ts-ignore
 					const { type } = chart.config;
 					if (type === 'pie' || type === 'doughnut') {
 						// Pie and doughnut charts only have a single dataset and visibility is per item
diff --git a/frontend/src/container/NewDashboard/DashboardSettings/General/AddTags/index.tsx b/frontend/src/container/NewDashboard/DashboardSettings/General/AddTags/index.tsx
index ef00393dc3..b7e2caf881 100644
--- a/frontend/src/container/NewDashboard/DashboardSettings/General/AddTags/index.tsx
+++ b/frontend/src/container/NewDashboard/DashboardSettings/General/AddTags/index.tsx
@@ -48,9 +48,8 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 			{tags.map((tag, index) => {
 				if (editInputIndex === index) {
 					return (
-						<Col lg={4}>
+						<Col key={tag} lg={4}>
 							<Input
-								key={tag}
 								size="small"
 								value={editInputValue}
 								onChangeHandler={(event): void =>
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/Event.tsx
similarity index 61%
rename from frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx
rename to frontend/src/container/TraceDetail/SelectedSpanDetails/Events/Event.tsx
index 69b51b3cd8..02f08c5a0a 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/Event.tsx
@@ -1,12 +1,14 @@
-import { Collapse } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Collapse, Popover, Space } from 'antd';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import useThemeMode from 'hooks/useThemeMode';
 import keys from 'lodash-es/keys';
 import map from 'lodash-es/map';
 import React from 'react';
 import { ITraceTree } from 'types/api/trace/getTraceItem';
 
-import EllipsedButton from './EllipsedButton';
-import { CustomSubText, CustomSubTitle } from './styles';
+import EllipsedButton from '../EllipsedButton';
+import { CustomSubText, CustomSubTitle } from '../styles';
 
 const { Panel } = Collapse;
 
@@ -14,23 +16,42 @@ function ErrorTag({
 	event,
 	onToggleHandler,
 	setText,
+	firstSpanStartTime,
 }: ErrorTagProps): JSX.Element {
 	const { isDarkMode } = useThemeMode();
 
 	return (
 		<>
-			{map(event, ({ attributeMap, name }) => {
+			{map(event, ({ attributeMap, name, timeUnixNano }) => {
 				const attributes = keys(attributeMap);
+
+				const { time, timeUnitName } = convertTimeToRelevantUnit(
+					timeUnixNano / 1e6 - firstSpanStartTime,
+				);
+
 				return (
 					<Collapse
 						key={`${name}${JSON.stringify(attributeMap)}`}
-						defaultActiveKey={[name || attributeMap.event]}
+						defaultActiveKey={[name || attributeMap.event, 'timestamp']}
 						expandIconPosition="right"
 					>
 						<Panel
 							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>
+
 							{map(attributes, (event) => {
 								const value = attributeMap[event];
 								const isEllipsed = value.length > 24;
@@ -72,6 +93,7 @@ interface ErrorTagProps {
 	event: ITraceTree['event'];
 	onToggleHandler: (isOpen: boolean) => void;
 	setText: (text: { subText: string; text: string }) => void;
+	firstSpanStartTime: number;
 }
 
 export default ErrorTag;
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/index.tsx
new file mode 100644
index 0000000000..c7aa3f78dd
--- /dev/null
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/index.tsx
@@ -0,0 +1,38 @@
+import { Typography } from 'antd';
+import React from 'react';
+import { ITraceEvents } from 'types/api/trace/getTraceItem';
+
+import ErrorTag from './Event';
+
+function Events({
+	events = [],
+	onToggleHandler,
+	setText,
+	firstSpanStartTime,
+}: EventsProps): JSX.Element {
+	if (events.length === 0) {
+		return <Typography>No events data in selected span</Typography>;
+	}
+
+	return (
+		<ErrorTag
+			onToggleHandler={onToggleHandler}
+			setText={setText}
+			event={events}
+			firstSpanStartTime={firstSpanStartTime}
+		/>
+	);
+}
+
+interface EventsProps {
+	events?: ITraceEvents[];
+	onToggleHandler: (event: boolean) => void;
+	setText: (props: { subText: string; text: string }) => void;
+	firstSpanStartTime: number;
+}
+
+Events.defaultProps = {
+	events: [],
+};
+
+export default Events;
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
index ec6f9b037b..11026194ce 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
@@ -1,11 +1,11 @@
-import { Modal, Tabs, Tooltip, Typography } from 'antd';
+import { Modal, Tabs, Tooltip } from 'antd';
 import Editor from 'components/Editor';
 import { StyledSpace } from 'components/Styled';
 import useThemeMode from 'hooks/useThemeMode';
 import React, { useMemo, useState } from 'react';
 import { ITraceTree } from 'types/api/trace/getTraceItem';
 
-import ErrorTag from './ErrorTag';
+import Events from './Events';
 import {
 	CardContainer,
 	CustomSubText,
@@ -18,7 +18,7 @@ import Tags from './Tags';
 const { TabPane } = Tabs;
 
 function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
-	const { tree } = props;
+	const { tree, firstSpanStartTime } = props;
 
 	const { isDarkMode } = useThemeMode();
 
@@ -87,15 +87,12 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 					<Tags onToggleHandler={onToggleHandler} setText={setText} tags={tags} />
 				</TabPane>
 				<TabPane tab="Events" key="2">
-					{tree.event && Object.keys(tree.event).length !== 0 ? (
-						<ErrorTag
-							onToggleHandler={onToggleHandler}
-							setText={setText}
-							event={tree.event}
-						/>
-					) : (
-						<Typography>No events data in selected span</Typography>
-					)}
+					<Events
+						events={tree.event}
+						onToggleHandler={onToggleHandler}
+						setText={setText}
+						firstSpanStartTime={firstSpanStartTime}
+					/>
 				</TabPane>
 			</Tabs>
 		</CardContainer>
@@ -104,6 +101,7 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 
 interface SelectedSpanDetailsProps {
 	tree?: ITraceTree;
+	firstSpanStartTime: number;
 }
 
 SelectedSpanDetails.defaultProps = {
diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx
index debe73d3a1..0a9a5ffd1a 100644
--- a/frontend/src/container/TraceDetail/index.tsx
+++ b/frontend/src/container/TraceDetail/index.tsx
@@ -76,6 +76,8 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 		/* eslint-enable */
 	}, [treesData, spanServiceColors]);
 
+	const firstSpanStartTime = tree.spanTree[0].startTime;
+
 	const [globalTraceMetadata] = useState<ITraceMetaData>({
 		...traceMetaData,
 	});
@@ -255,6 +257,7 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 			</Col>
 			<StyledCol md={5} sm={5} styledclass={[styles.selectedSpanDetailContainer]}>
 				<SelectedSpanDetails
+					firstSpanStartTime={firstSpanStartTime}
 					tree={[
 						...(getSelectedNode.spanTree ? getSelectedNode.spanTree : []),
 						...(getSelectedNode.missingSpanTree
diff --git a/frontend/src/container/TraceDetail/utils.ts b/frontend/src/container/TraceDetail/utils.ts
index 898ea7e510..5566f2d1fa 100644
--- a/frontend/src/container/TraceDetail/utils.ts
+++ b/frontend/src/container/TraceDetail/utils.ts
@@ -13,7 +13,8 @@ export const filterSpansByString = (
 		return JSON.stringify(spanWithoutChildren).includes(searchString);
 	});
 
-type TTimeUnitName = 'ms' | 's' | 'm';
+type TTimeUnitName = 'ms' | 's' | 'm' | 'hr' | 'day' | 'week';
+
 export interface IIntervalUnit {
 	name: TTimeUnitName;
 	multiplier: number;
@@ -31,6 +32,18 @@ export const INTERVAL_UNITS: IIntervalUnit[] = [
 		name: 'm',
 		multiplier: 1 / (1e3 * 60),
 	},
+	{
+		name: 'hr',
+		multiplier: 1 / (1e3 * 60 * 60),
+	},
+	{
+		name: 'day',
+		multiplier: 1 / (1e3 * 60 * 60 * 24),
+	},
+	{
+		name: 'week',
+		multiplier: 1 / (1e3 * 60 * 60 * 24 * 7),
+	},
 ];
 
 export const resolveTimeFromInterval = (
diff --git a/frontend/src/types/api/trace/getTraceItem.ts b/frontend/src/types/api/trace/getTraceItem.ts
index 9d8887bc56..97e715b8ad 100644
--- a/frontend/src/types/api/trace/getTraceItem.ts
+++ b/frontend/src/types/api/trace/getTraceItem.ts
@@ -56,9 +56,10 @@ export interface ITraceTag {
 	value: string;
 }
 
-interface ITraceEvents {
+export interface ITraceEvents {
 	attributeMap: { event: string; [key: string]: string };
 	name?: string;
+	timeUnixNano: number;
 }
 
 export interface ITraceForest {