feat: revamp the entire trace details v2 to handle large traces

ee/query-service/app/api/api.go

@@ -159,6 +159,7 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *baseapp.AuthMiddlew
 	router.HandleFunc("/api/v1/register", am.OpenAccess(ah.registerUser)).Methods(http.MethodPost)
 	router.HandleFunc("/api/v1/login", am.OpenAccess(ah.loginUser)).Methods(http.MethodPost)
 	router.HandleFunc("/api/v1/traces/{traceId}", am.ViewAccess(ah.searchTraces)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v2/traces/{traceId}", am.ViewAccess(ah.searchTracesV2)).Methods(http.MethodPost)
 
 	// PAT APIs
 	router.HandleFunc("/api/v1/pats", am.AdminAccess(ah.createPAT)).Methods(http.MethodPost)

ee/query-service/app/api/traces.go

@@ -31,3 +31,19 @@ func (ah *APIHandler) searchTraces(w http.ResponseWriter, r *http.Request) {
 	ah.WriteJSON(w, r, result)
 
 }
+
+func (ah *APIHandler) searchTracesV2(w http.ResponseWriter, r *http.Request) {
+
+	searchTracesParams, err := baseapp.ParseSearchTracesV2Params(r)
+	if err != nil {
+		RespondError(w, &model.ApiError{Typ: model.ErrorBadData, Err: err}, "Error reading params")
+		return
+	}
+
+	result, err := ah.opts.DataConnector.SearchTracesV2(r.Context(), searchTracesParams)
+	if ah.HandleError(w, err, http.StatusBadRequest) {
+		return
+	}
+
+	ah.WriteJSON(w, r, result)
+}

frontend/src/AppRoutes/pageComponents.ts

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

frontend/src/api/trace/getTraceDetails.ts

@@ -0,0 +1,33 @@
+import { ApiV2Instance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceDetailsProps,
+	GetTraceDetailsSuccessResponse,
+} from 'types/api/trace/getTraceDetails';
+
+const getTraceDetails = async (
+	props: GetTraceDetailsProps,
+): Promise<SuccessResponse<GetTraceDetailsSuccessResponse> | ErrorResponse> => {
+	try {
+		const response = await ApiV2Instance.post<GetTraceDetailsSuccessResponse>(
+			`/traces/${props.traceID}`,
+			{
+				spanId: props.spanID,
+				uncollapsedNodes: props.uncollapsedNodes,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTraceDetails;

frontend/src/container/TimelineV2/TimelineV2.tsx

@@ -0,0 +1,7 @@
+import './TimelineV2.styles.scss';
+
+function TimelineV2(): JSX.Element {
+	return <div>Timeline V2</div>;
+}
+
+export default TimelineV2;

frontend/src/container/TraceDetailV2/TraceDetailV2.tsx

@@ -0,0 +1,121 @@
+import './TraceDetailsV2.styles.scss';
+
+import { CaretDownFilled, CaretRightFilled } from '@ant-design/icons';
+import { Typography } from 'antd';
+import TimelineV2 from 'container/TimelineV2/TimelineV2';
+import dayjs from 'dayjs';
+import { Virtuoso } from 'react-virtuoso';
+import {
+	GetTraceDetailsSuccessResponse,
+	SpanItem,
+} from 'types/api/trace/getTraceDetails';
+
+import { LEFT_COL_WIDTH } from './constants';
+
+interface ITraceDetailV2Props {
+	isLoadingTraceDetails: boolean;
+	uncollapsedNodes: string[];
+	setSpanID: React.Dispatch<React.SetStateAction<string>>;
+	setUncollapsedNodes: React.Dispatch<React.SetStateAction<string[]>>;
+	traceDetailsResponse?: GetTraceDetailsSuccessResponse;
+}
+
+function getSpanItemRenderer(
+	index: number,
+	data: SpanItem,
+	uncollapsedNodes: string[],
+): JSX.Element {
+	return (
+		<div key={index} className="span-container">
+			<section
+				className="span-container-details-section"
+				style={{ width: `${LEFT_COL_WIDTH}px`, paddingLeft: `${data.level * 5}px` }}
+			>
+				<div className="span-header-row">
+					{data.childrenCount > 0 && (
+						<div className="span-count-collapse">
+							<Typography.Text>{data.childrenCount}</Typography.Text>
+							{uncollapsedNodes.includes(data.spanID) ? (
+								<CaretDownFilled size={14} className="collapse-uncollapse-icon" />
+							) : (
+								<CaretRightFilled size={14} className="collapse-uncollapse-icon" />
+							)}
+						</div>
+					)}
+				</div>
+				<div className="span-description">
+					<Typography.Text className="span-name">{data.name}</Typography.Text>
+					<Typography.Text className="span-service-name">
+						{data.serviceName}
+					</Typography.Text>
+				</div>
+			</section>
+			<section className="span-container-duration-section">
+				<Typography.Text>{data.durationNano}</Typography.Text>
+			</section>
+		</div>
+	);
+}
+
+/**
+ * 1. handle the loading gracefully here
+ * 2. handle the logic to render the spans based on their level and coloring based on service name
+ * 3. handle the timeline properly to show the spans decently ( timeline can be shown later as well )
+ */
+function TraceDetailV2(props: ITraceDetailV2Props): JSX.Element {
+	const {
+		traceDetailsResponse,
+		setUncollapsedNodes,
+		setSpanID,
+		uncollapsedNodes,
+		isLoadingTraceDetails,
+	} = props;
+	console.log({
+		traceDetailsResponse,
+		setUncollapsedNodes,
+		setSpanID,
+		isLoadingTraceDetails,
+	});
+	return (
+		<div className="trace-details-v2-container">
+			<section className="trace-details-v2-flame-graph">
+				<div
+					className="trace-details-metadata"
+					style={{ width: `${LEFT_COL_WIDTH}px` }}
+				>
+					<Typography.Text className="spans-count">Total Spans</Typography.Text>
+					<Typography.Text>{traceDetailsResponse?.totalSpans || 0}</Typography.Text>
+				</div>
+				<div className="trace-details-flame-graph">
+					<Typography.Text>Flame graph comes here...</Typography.Text>
+				</div>
+			</section>
+			<section className="timeline-graph">
+				<Typography.Text
+					className="global-start-time-marker"
+					style={{ width: `${LEFT_COL_WIDTH}px` }}
+				>
+					{dayjs(traceDetailsResponse?.startTimestampMillis).format(
+						'hh:mm:ss a MM/DD',
+					)}
+				</Typography.Text>
+				<TimelineV2 />
+			</section>
+			<section className="trace-details-v2-waterfall-model">
+				<Virtuoso
+					data={traceDetailsResponse?.spans || []}
+					itemContent={(index, data): React.ReactNode =>
+						getSpanItemRenderer(index, data, uncollapsedNodes)
+					}
+					className="trace-details-v2-span-area"
+				/>
+			</section>
+		</div>
+	);
+}
+
+TraceDetailV2.defaultProps = {
+	traceDetailsResponse: {},
+};
+
+export default TraceDetailV2;

frontend/src/container/TraceDetailV2/TraceDetailsV2.styles.scss

@@ -0,0 +1,125 @@
+.trace-details-v2-container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	gap: 10px;
+
+	.trace-details-v2-flame-graph {
+		display: flex;
+		align-items: center;
+		gap: 25px;
+
+		.trace-details-metadata {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 10px;
+
+			.spans-count {
+				color: var(--bg-slate-200);
+				font-family: Inter;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 600;
+				line-height: 18px; /* 163.636% */
+				letter-spacing: 0.88px;
+				text-transform: uppercase;
+				padding: 12px 18px 6px 14px;
+			}
+		}
+		.trace-details-flame-graph {
+			display: flex;
+		}
+	}
+
+	.timeline-graph {
+		display: flex;
+		gap: 24px;
+		align-items: center;
+
+		.global-start-time-marker {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: var(--bg-slate-200);
+			font-family: Inter;
+			font-size: 11px;
+			font-style: normal;
+			font-weight: 600;
+			line-height: 18px; /* 163.636% */
+			letter-spacing: 0.88px;
+			text-transform: uppercase;
+			padding: 12px 18px 6px 14px;
+		}
+	}
+
+	.trace-details-v2-waterfall-model {
+		.trace-details-v2-span-area {
+			height: 80vh !important;
+
+			.span-container {
+				display: flex;
+				gap: 25px;
+				padding-top: 1rem;
+
+				.span-container-details-section {
+					display: flex;
+					gap: 10px;
+					align-items: flex-start;
+					cursor: pointer;
+
+					.span-header-row {
+						display: flex;
+						gap: 10px;
+						align-items: center;
+
+						.span-count-collapse {
+							display: flex;
+							align-items: center;
+							gap: 5px;
+							border: 1px solid var(--bg-slate-200);
+							padding: 1px 8px;
+						}
+					}
+
+					.span-description {
+						display: flex;
+						flex-direction: column;
+						gap: 5px;
+						align-items: center;
+
+						.span-name {
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							color: var(--bg-slate-200);
+							font-family: Inter;
+							font-size: 13px;
+							font-style: normal;
+							font-weight: 600;
+							line-height: 18px; /* 163.636% */
+							letter-spacing: 0.88px;
+						}
+
+						.span-service-name {
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							color: var(--bg-slate-100);
+							font-family: Inter;
+							font-size: 10px;
+							font-style: normal;
+							font-weight: 500;
+							line-height: 18px; /* 163.636% */
+							letter-spacing: 0.88px;
+						}
+					}
+				}
+
+				.span-container-duration-section {
+				}
+			}
+		}
+	}
+}

frontend/src/container/TraceDetailV2/constants.ts

@@ -0,0 +1 @@
+export const LEFT_COL_WIDTH = 320;

frontend/src/pages/TraceDetailsV2/index.tsx

@@ -0,0 +1,43 @@
+import getTraceDetails from 'api/trace/getTraceDetails';
+import TraceDetailV2 from 'container/TraceDetailV2/TraceDetailV2';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { defaultTo } from 'lodash-es';
+import { useEffect, useState } from 'react';
+import { useQuery } from 'react-query';
+import { useParams } from 'react-router-dom';
+import { TraceDetailsProps } from 'types/api/trace/getTraceDetails';
+
+function TraceDetailsV2(): JSX.Element {
+	const { id: traceID } = useParams<TraceDetailsProps>();
+	const urlQuery = useUrlQuery();
+	const [spanID, setSpanID] = useState<string>(urlQuery.get('spanId') || '');
+	const [uncollapsedNodes, setUncollapsedNodes] = useState<string[]>([]);
+
+	const { data: spansData, isLoading: isLoadingTraceDetails } = useQuery({
+		queryFn: () =>
+			getTraceDetails({
+				traceID,
+				spanID,
+				uncollapsedNodes,
+			}),
+		queryKey: [spanID, traceID, uncollapsedNodes],
+	});
+
+	useEffect(() => {
+		if (spansData?.payload?.uncollapsedNodes) {
+			setUncollapsedNodes(spansData?.payload?.uncollapsedNodes);
+		}
+	}, [spansData]);
+
+	return (
+		<TraceDetailV2
+			traceDetailsResponse={defaultTo(spansData?.payload, undefined)}
+			isLoadingTraceDetails={isLoadingTraceDetails}
+			uncollapsedNodes={uncollapsedNodes}
+			setUncollapsedNodes={setUncollapsedNodes}
+			setSpanID={setSpanID}
+		/>
+	);
+}
+
+export default TraceDetailsV2;