feat: events is updated by adding the timestamp (#1802)

* feat: events is updated
* chore: title is updated
* feat: trace detail event timestamp is updated

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

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 =>

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;

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;

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 = {

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

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 = (

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 {