From ef971484dc6682ccc8088d2e236c35d2daa76a0c Mon Sep 17 00:00:00 2001 From: vikrantgupta25 Date: Thu, 26 Dec 2024 16:25:11 +0530 Subject: [PATCH] feat: setup the success state for the spans waterfall model --- .../TraceWaterfall/TraceWaterfall.styles.scss | 1 + .../TraceWaterfall/TraceWaterfall.tsx | 11 +-- .../Success/Success.styles.scss | 39 +++++++- .../TraceWaterfallStates/Success/Success.tsx | 92 +++++++++++++++---- .../src/container/TraceWaterfall/constants.ts | 2 + .../TraceDetailV2/TraceDetailV2.styles.scss | 9 ++ frontend/src/pages/TraceDetailV2/index.tsx | 1 + 7 files changed, 129 insertions(+), 26 deletions(-) diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfall.styles.scss b/frontend/src/container/TraceWaterfall/TraceWaterfall.styles.scss index 0207611203..2efca5e3b9 100644 --- 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 index 64c79b4c95..ba0da7b3e7 100644 --- 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 index e01b29550e..5ff216b9b9 100644 --- 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 index 7e6912cdb5..fa3c249b55 100644 --- 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>; + setUncollapsedNodes: Dispatch>; } 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 ( -
- {span.name}; -
- ); - }, []); + 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 +
+
+ {!isRootSpan && ( +
+ )} + {span.hasChildren ? ( +
+
+ {span.serviceName} +
+
+ ); + }, + [setInterestedSpanId, setUncollapsedNodes, uncollapsedNodes], + ); return ( - +
{traceWaterfallState === TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT && interestedSpanId === spans[0].spanId && ( Fetching Spans.... )} @@ -52,7 +110,7 @@ function Success(props: ISuccessProps): JSX.Element { interestedSpanId === spans[spans.length - 1].spanId && ( Fetching Spans.... )} - +
); } diff --git a/frontend/src/container/TraceWaterfall/constants.ts b/frontend/src/container/TraceWaterfall/constants.ts index fc874d3542..5116b900e0 100644 --- 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 index 611fece9df..0f432c0df5 100644 --- 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 index 58ed3052e9..e658eba6e3 100644 --- a/frontend/src/pages/TraceDetailV2/index.tsx +++ b/frontend/src/pages/TraceDetailV2/index.tsx @@ -7,6 +7,7 @@ function TraceDetailsV2(): JSX.Element { return (
Trace Details V2 Layout +
FlameGraph comes here!
);