feat(trace-details): frontend changes for trace details

frontend/package.json

@@ -44,6 +44,7 @@
 		"@sentry/webpack-plugin": "2.22.6",
 		"@signozhq/design-tokens": "1.1.4",
 		"@tanstack/react-table": "8.20.6",
+		"@tanstack/react-virtual": "3.11.2",
 		"@uiw/react-md-editor": "3.23.5",
 		"@visx/group": "3.3.0",
 		"@visx/shape": "3.5.0",

frontend/src/AppRoutes/pageComponents.ts

@@ -43,7 +43,10 @@ export const TraceFilter = Loadable(
 );
 
 export const TraceDetail = Loadable(
-	() => import(/* webpackChunkName: "TraceDetail Page" */ 'pages/TraceDetail'),
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetail Page" */ 'pages/TraceDetailV2/index'
+		),
 );
 
 export const UsageExplorerPage = Loadable(

frontend/src/api/trace/getTraceFlamegraph.tsx

@@ -0,0 +1,33 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { omit } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceFlamegraphPayloadProps,
+	GetTraceFlamegraphSuccessResponse,
+} from 'types/api/trace/getTraceFlamegraph';
+
+const getTraceFlamegraph = async (
+	props: GetTraceFlamegraphPayloadProps,
+): Promise<
+	SuccessResponse<GetTraceFlamegraphSuccessResponse> | ErrorResponse
+> => {
+	try {
+		const response = await axios.post<GetTraceFlamegraphSuccessResponse>(
+			`/traces/flamegraph/${props.traceId}`,
+			omit(props, 'traceId'),
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTraceFlamegraph;

frontend/src/api/trace/getTraceV2.tsx

@@ -0,0 +1,41 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { omit } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceV2PayloadProps,
+	GetTraceV2SuccessResponse,
+} from 'types/api/trace/getTraceV2';
+
+const getTraceV2 = async (
+	props: GetTraceV2PayloadProps,
+): Promise<SuccessResponse<GetTraceV2SuccessResponse> | ErrorResponse> => {
+	try {
+		let uncollapsedSpans = [...props.uncollapsedSpans];
+		if (!props.isSelectedSpanIDUnCollapsed) {
+			uncollapsedSpans = uncollapsedSpans.filter(
+				(node) => node !== props.selectedSpanId,
+			);
+		}
+		const postData: GetTraceV2PayloadProps = {
+			...props,
+			uncollapsedSpans,
+		};
+		const response = await axios.post<GetTraceV2SuccessResponse>(
+			`/traces/waterfall/${props.traceId}`,
+			omit(postData, 'traceId'),
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTraceV2;

frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss

@@ -0,0 +1,134 @@
+.details-drawer {
+	.ant-drawer-wrapper-body {
+		border-left: 1px solid var(--bg-slate-500);
+	}
+	.ant-drawer-header {
+		background: var(--bg-ink-400);
+		border-bottom: 1px solid var(--bg-slate-500);
+
+		.ant-drawer-header-title {
+			display: flex;
+			align-items: center;
+
+			.ant-drawer-close {
+				margin-inline-end: 0px;
+				padding: 0px;
+				padding-right: 16px;
+				border-right: 1px solid var(--bg-slate-500);
+			}
+
+			.ant-drawer-title {
+				padding-left: 16px;
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+	}
+	.ant-drawer-body {
+		padding: 16px;
+		background: var(--bg-ink-400);
+
+		&::-webkit-scrollbar {
+			width: 0.1rem;
+		}
+	}
+
+	.details-drawer-tabs {
+		margin-top: 32px;
+
+		.ant-tabs-tab {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 114px;
+			height: 32px;
+			flex-shrink: 0;
+			padding: 7px 20px;
+			border-radius: 2px 0px 0px 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-400);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+
+			color: #fff;
+			font-family: Inter;
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 150% */
+			letter-spacing: -0.06px;
+
+			.ant-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				padding: 0px;
+			}
+
+			.ant-btn:hover {
+				background: unset;
+			}
+		}
+
+		.ant-tabs-tab-active {
+			background: var(--bg-slate-400);
+		}
+
+		.ant-tabs-tab + .ant-tabs-tab {
+			margin-left: 0px;
+		}
+
+		.ant-tabs-nav::before {
+			border-bottom: 0px;
+		}
+
+		.ant-tabs-ink-bar {
+			background: none;
+		}
+	}
+}
+
+.lightMode {
+	.details-drawer {
+		.ant-drawer-wrapper-body {
+			border-left: 1px solid var(--bg-vanilla-300);
+		}
+		.ant-drawer-header {
+			background: var(--bg-vanilla-200);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.ant-drawer-header-title {
+				.ant-drawer-close {
+					border-right: 1px solid var(--bg-vanilla-300);
+				}
+
+				.ant-drawer-title {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+		.ant-drawer-body {
+			background: var(--bg-vanilla-200);
+		}
+
+		.details-drawer-tabs {
+			.ant-tabs-tab {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-300);
+				color: var(--bg-ink-400);
+			}
+
+			.ant-tabs-tab-active {
+				background: var(--bg-vanilla-200);
+			}
+
+			.ant-tabs-tab + .ant-tabs-tab {
+				border-left: none;
+			}
+		}
+	}
+}

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

@@ -0,0 +1,57 @@
+import './DetailsDrawer.styles.scss';
+
+import { Drawer, Tabs, TabsProps } from 'antd';
+import cx from 'classnames';
+import { Dispatch, SetStateAction } from 'react';
+
+interface IDetailsDrawerProps {
+	open: boolean;
+	setOpen: Dispatch<SetStateAction<boolean>>;
+	title: string;
+	descriptiveContent: JSX.Element;
+	defaultActiveKey: string;
+	items: TabsProps['items'];
+	detailsDrawerClassName?: string;
+	tabBarExtraContent?: JSX.Element;
+}
+
+function DetailsDrawer(props: IDetailsDrawerProps): JSX.Element {
+	const {
+		open,
+		setOpen,
+		title,
+		descriptiveContent,
+		defaultActiveKey,
+		detailsDrawerClassName,
+		items,
+		tabBarExtraContent,
+	} = props;
+	return (
+		<Drawer
+			width="60%"
+			open={open}
+			afterOpenChange={setOpen}
+			mask={false}
+			title={title}
+			onClose={(): void => setOpen(false)}
+			className="details-drawer"
+		>
+			<div>{descriptiveContent}</div>
+			<Tabs
+				items={items}
+				addIcon
+				defaultActiveKey={defaultActiveKey}
+				animated
+				className={cx('details-drawer-tabs', detailsDrawerClassName)}
+				tabBarExtraContent={tabBarExtraContent}
+			/>
+		</Drawer>
+	);
+}
+
+DetailsDrawer.defaultProps = {
+	detailsDrawerClassName: '',
+	tabBarExtraContent: null,
+};
+
+export default DetailsDrawer;