feat: setup the success state for the spans waterfall model

SigNoz · Dec 26, 2024 · ef97148 · ef97148
1 parent 5da2b39
commit ef97148
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 26 deletions.
diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfall.styles.scss b/frontend/src/container/TraceWaterfall/TraceWaterfall.styles.scss
@@ -1,2 +1,3 @@
 .trace-waterfall {
+	height: 70vh;
 }
diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfall.tsx b/frontend/src/container/TraceWaterfall/TraceWaterfall.tsx
@@ -62,14 +62,9 @@ function TraceWaterfall(): JSX.Element {
 	}, [errorFetchingTraceData, isFetchingTraceData, traceData]);
 
 	// capture the spans from the response, since we do not need to do any manipulation on the same we will keep this as a simple constant [ memoized ]
-	const spans = useMemo(() => {
-		if (traceWaterfallState === TraceWaterfallStates.SUCCESS) {
-			// we do not need null checks here as the traceWaterfallState gurantees that but needed for typechecking
-			return traceData?.payload?.spans || [];
-		}
-
-		return [];
-	}, [traceData?.payload?.spans, traceWaterfallState]);
+	const spans = useMemo(() => traceData?.payload?.spans || [], [
+		traceData?.payload?.spans,
+	]);
 
 	// get the content based on the current state of the trace waterfall
 	const getContent = useMemo(() => {

diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.styles.scss b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.styles.scss
@@ -1,2 +1,39 @@
-.span-item {
+.success-cotent {
+	width: 100%;
+	height: 100%;
+
+	.span-item {
+		display: flex;
+		flex-direction: column;
+		width: fit-content;
+
+		&.vertical-connector {
+			border-left: 1px solid #d9d9d9;
+		}
+
+		.horizontal-connector {
+			border: 1px solid #d9d9d9;
+		}
+
+		.first-row {
+			display: flex;
+			align-items: center;
+
+			.collapse-uncollapse-button {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 22px;
+				width: 30px;
+				padding: 0px;
+				margin-right: 10px;
+			}
+		}
+
+		.second-row {
+			display: flex;
+			padding-left: 5px;
+			border-left: 1px solid #d9d9d9;
+		}
+	}
 }
diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx
@@ -1,8 +1,13 @@
 import './Success.styles.scss';
 
-import { Typography } from 'antd';
-import { TraceWaterfallStates } from 'container/TraceWaterfall/constants';
-import { useCallback } from 'react';
+import { Button, Typography } from 'antd';
+import cx from 'classnames';
+import {
+	FIXED_LEFT_PADDING_BASE,
+	TraceWaterfallStates,
+} from 'container/TraceWaterfall/constants';
+import { ChevronDown, ChevronRight, Leaf } from 'lucide-react';
+import { Dispatch, SetStateAction, useCallback } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import { Span } from 'types/api/trace/getTraceV2';
 
@@ -11,8 +16,8 @@ interface ISuccessProps {
 	traceWaterfallState: TraceWaterfallStates;
 	interestedSpanId: string;
 	uncollapsedNodes: string[];
-	setInterestedSpanId: (val: string) => void;
-	setUncollapsedNodes: (val: string[]) => void;
+	setInterestedSpanId: Dispatch<SetStateAction<string | null | undefined>>;
+	setUncollapsedNodes: Dispatch<SetStateAction<string[]>>;
 }
 
 function Success(props: ISuccessProps): JSX.Element {
@@ -24,26 +29,79 @@ function Success(props: ISuccessProps): JSX.Element {
 		setInterestedSpanId,
 		setUncollapsedNodes,
 	} = props;
-	console.log(uncollapsedNodes, setInterestedSpanId, setUncollapsedNodes);
 
-	const getItemContent = useCallback((_: number, span: Span): JSX.Element => {
-		console.log(span);
-		return (
-			<div className="span-item">
-				<Typography.Text>{span.name}</Typography.Text>;
-			</div>
-		);
-	}, []);
+	const getItemContent = useCallback(
+		(_: number, span: Span): JSX.Element => {
+			const isRootSpan = span.parentSpanId === '';
+			const leftMarginBeforeTheHorizontalConnector =
+				span.level > 0
+					? `${(span.level - 1) * (FIXED_LEFT_PADDING_BASE + 1)}px`
+					: '0px';
+
+			const isUnCollapsed = uncollapsedNodes.includes(span.spanId);
+			return (
+				// do not crop the service names and let the window overflow.
+				// the pane height changes needs to be addressed by resizable columns
+				<div
+					className={cx('span-item', !isRootSpan ? 'vertical-connector' : '')}
+					style={{ marginLeft: leftMarginBeforeTheHorizontalConnector }}
+				>
+					<div className="first-row">
+						{!isRootSpan && (
+							<div
+								className="horizontal-connector"
+								style={{ width: `${FIXED_LEFT_PADDING_BASE}px` }}
+							/>
+						)}
+						{span.hasChildren ? (
+							<Button
+								icon={
+									isUnCollapsed ? <ChevronDown size={14} /> : <ChevronRight size={14} />
+								}
+								onClick={(): void => {
+									setInterestedSpanId(span.spanId);
+
+									if (isUnCollapsed) {
+										setUncollapsedNodes((prev) =>
+											prev.filter((id) => id !== span.spanId),
+										);
+									} else {
+										setUncollapsedNodes((prev) => [...prev, span.spanId]);
+									}
+								}}
+								className="collapse-uncollapse-button"
+							/>
+						) : (
+							<Button
+								icon={<Leaf size={14} />}
+								className="collapse-uncollapse-button"
+							/>
+						)}
+						<Typography.Text>{span.name}</Typography.Text>
+					</div>
+					<div
+						className="second-row"
+						style={{
+							marginLeft: !isRootSpan ? `${FIXED_LEFT_PADDING_BASE}px` : '0px',
+						}}
+					>
+						<Typography.Text>{span.serviceName}</Typography.Text>
+					</div>
+				</div>
+			);
+		},
+		[setInterestedSpanId, setUncollapsedNodes, uncollapsedNodes],
+	);
 
 	return (
-		<Typography.Text>
+		<div className="success-cotent">
 			{traceWaterfallState ===
 				TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT &&
 				interestedSpanId === spans[0].spanId && (
 					<Typography.Text>Fetching Spans....</Typography.Text>
 				)}
 			<Virtuoso
-				style={{ height: 400 }}
+				style={{ height: '100%' }}
 				data={spans}
 				itemContent={getItemContent}
 			/>
@@ -52,7 +110,7 @@ function Success(props: ISuccessProps): JSX.Element {
 				interestedSpanId === spans[spans.length - 1].spanId && (
 					<Typography.Text>Fetching Spans....</Typography.Text>
 				)}
-		</Typography.Text>
+		</div>
 	);
 }
 

diff --git a/frontend/src/container/TraceWaterfall/constants.ts b/frontend/src/container/TraceWaterfall/constants.ts
@@ -5,3 +5,5 @@ export enum TraceWaterfallStates {
 	ERROR = 'ERROR',
 	FETCHING_WITH_OLD_DATA_PRESENT = 'FETCHING_WTIH_OLD_DATA_PRESENT',
 }
+
+export const FIXED_LEFT_PADDING_BASE = 10;
diff --git a/frontend/src/pages/TraceDetailV2/TraceDetailV2.styles.scss b/frontend/src/pages/TraceDetailV2/TraceDetailV2.styles.scss
@@ -1,4 +1,13 @@
 .trace-layout {
 	display: flex;
 	flex-direction: column;
+	gap: 25px;
+
+	.flame-graph {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 40vh;
+		border: 1px solid #d9d9d9;
+	}
 }
diff --git a/frontend/src/pages/TraceDetailV2/index.tsx b/frontend/src/pages/TraceDetailV2/index.tsx
@@ -7,6 +7,7 @@ function TraceDetailsV2(): JSX.Element {
 	return (
 		<div className="trace-layout">
 			<Typography.Text>Trace Details V2 Layout</Typography.Text>
+			<div className="flame-graph">FlameGraph comes here!</div>
 			<TraceWaterfall />
 		</div>
 	);