element
width: table.getTotalSize(),
+ height: `${virtualizer.getTotalSize()}px`,
}}
>
@@ -113,6 +175,9 @@ export function TableV3(props: ITableV3Props): JSX.Element {
onDoubleClick: (): void => header.column.resetSize(),
onMouseDown: header.getResizeHandler(),
onTouchStart: header.getResizeHandler(),
+ style: {
+ display: !header.column.getCanResize() ? 'none' : '',
+ },
className: `resizer ${
header.column.getIsResizing() ? 'isResizing' : ''
}`,
@@ -125,11 +190,16 @@ export function TableV3(props: ITableV3Props): JSX.Element {
{/* When resizing any column we will render this special memoized version of our table body */}
{table.getState().columnSizingInfo.isResizingColumn ? (
-
+
) : (
-
+
)}
{intervals &&
@@ -70,14 +72,14 @@ function TimelineV2(props: ITimelineV2Props): JSX.Element {
{interval.label}
diff --git a/frontend/src/constants/reactQueryKeys.ts b/frontend/src/constants/reactQueryKeys.ts
index 30da4e13625..65fdbffd684 100644
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -21,6 +21,8 @@ export const REACT_QUERY_KEY = {
GET_HOST_LIST: 'GET_HOST_LIST',
UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
+ GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
+ GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
GET_POD_LIST: 'GET_POD_LIST',
GET_NODE_LIST: 'GET_NODE_LIST',
GET_DEPLOYMENT_LIST: 'GET_DEPLOYMENT_LIST',
diff --git a/frontend/src/constants/theme.ts b/frontend/src/constants/theme.ts
index edc0eea75f5..8481f0578ba 100644
--- a/frontend/src/constants/theme.ts
+++ b/frontend/src/constants/theme.ts
@@ -1,4 +1,38 @@
const themeColors = {
+ traceDetailColors: {
+ robin: '#3F5ECC',
+ dodgerBlue: '#2F80ED',
+ mediumOrchid: '#BB6BD9',
+ seaBuckthorn: '#F2994A',
+ turquoiseBlue: '#56CCF2',
+ festivalOrange: '#F2C94C',
+ silver: '#BDBDBD',
+ outrageousOrange: '#FF6633',
+ roseBud: '#FFB399',
+ canary: '#FFFF99',
+ deepSkyBlue: '#00B3E6',
+ goldTips: '#E6B333',
+ royalBlue: '#3366E6',
+ avocado: '#999966',
+ mintGreen: '#99FF99',
+ lima: '#80B300',
+ olive: '#809900',
+ beautyBush: '#E6B3B3',
+ danube: '#6680B3',
+ oliveDrab: '#66991A',
+ lavenderRose: '#FF99E6',
+ electricLime: '#CCFF1A',
+ turquoise: '#33FFCC',
+ gladeGreen: '#66994D',
+ hemlock: '#66664D',
+ vidaLoca: '#4D8000',
+ mediumAquamarine: '#66CDAA',
+ lavender: '#E6E6FA',
+ thistle: '#D8BFD8',
+ yellow: '#FFFF00',
+ purple: '#800080',
+ cyan: '#00FFFF',
+ },
chartcolors: {
robin: '#3F5ECC',
dodgerBlue: '#2F80ED',
diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx
index 24d9c2b9684..9a47baa8114 100644
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -430,7 +430,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
? 0
: '0 1rem',
- ...(isTraceDetailsView() ? { marginRight: 0 } : {}),
+ ...(isTraceDetailsView() ? { margin: 0 } : {}),
}}
>
{isToDisplayLayout && !renderFullScreen &&
}
diff --git a/frontend/src/container/LogDetailedView/utils.tsx b/frontend/src/container/LogDetailedView/utils.tsx
index da62f97f8e2..05d65259f60 100644
--- a/frontend/src/container/LogDetailedView/utils.tsx
+++ b/frontend/src/container/LogDetailedView/utils.tsx
@@ -186,7 +186,7 @@ export const aggregateAttributesResourcesToString = (logData: ILog): string => {
id: logData.id,
severityNumber: logData.severityNumber,
severityText: logData.severityText,
- spanId: logData.spanId,
+ spanID: logData.spanID,
timestamp: logData.timestamp,
traceFlags: logData.traceFlags,
traceId: logData.traceId,
diff --git a/frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.styles.scss b/frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.styles.scss
new file mode 100644
index 00000000000..504acf4f02b
--- /dev/null
+++ b/frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.styles.scss
@@ -0,0 +1,145 @@
+.flamegraph {
+ display: flex;
+ height: 30vh;
+ border-bottom: 1px solid var(--bg-slate-400);
+
+ .flamegraph-chart {
+ padding: 15px;
+
+ .loading-skeleton {
+ justify-content: center;
+ align-items: center;
+ }
+ }
+
+ .flamegraph-stats {
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid var(--bg-slate-400);
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 16px 20px;
+
+ .exec-time-service {
+ display: flex;
+ height: 30px;
+ flex-shrink: 0;
+ justify-content: center;
+ align-items: center;
+ border-radius: 2px 0px 0px 2px;
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-slate-400);
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+ margin-bottom: 16px;
+ color: var(--bg-vanilla-100);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+ letter-spacing: -0.06px;
+ }
+
+ .stats {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ overflow-y: auto;
+ overflow-x: hidden;
+
+ &::-webkit-scrollbar {
+ width: 0rem;
+ }
+
+ .value-row {
+ display: flex;
+ justify-content: space-between;
+
+ .service-name {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 80%;
+
+ .service-text {
+ color: var(--bg-vanilla-400);
+ font-family: 'Inter';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ width: 80%;
+ }
+
+ .square-box {
+ height: 8px;
+ width: 8px;
+ }
+ }
+
+ .progress-service {
+ display: flex;
+ align-items: center;
+ width: 100px;
+ gap: 8px;
+ justify-content: flex-start;
+ flex-shrink: 0;
+
+ .service-progress-indicator {
+ width: fit-content;
+ margin-inline-end: 0px !important;
+ margin-bottom: 0px !important;
+
+ .ant-progress-inner {
+ width: 30px;
+ }
+ }
+
+ .percent-value {
+ color: var(--bg-vanilla-100);
+ text-align: right;
+ font-family: 'Inter';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: 0.48px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ }
+ }
+ }
+ }
+ }
+}
+
+.lightMode {
+ .flamegraph {
+ border-bottom: 1px solid var(--bg-vanilla-300);
+
+ .flamegraph-stats {
+ border-right: 1px solid var(--bg-vanilla-300);
+
+ .exec-time-service {
+ border: 1px solid var(--bg-vanilla-400);
+ background: var(--bg-vanilla-400);
+ color: var(--bg-ink-100);
+ }
+
+ .stats {
+ .value-row {
+ .service-name {
+ .service-text {
+ color: var(--bg-ink-400);
+ }
+ }
+
+ .progress-service {
+ .percent-value {
+ color: var(--bg-ink-100);
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx b/frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx
new file mode 100644
index 00000000000..c01fc274d48
--- /dev/null
+++ b/frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx
@@ -0,0 +1,177 @@
+import './PaginatedTraceFlamegraph.styles.scss';
+
+import { Progress, Skeleton, Tooltip, Typography } from 'antd';
+import { AxiosError } from 'axios';
+import Spinner from 'components/Spinner';
+import { themeColors } from 'constants/theme';
+import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { useEffect, useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import { TraceFlamegraphStates } from './constants';
+import Error from './TraceFlamegraphStates/Error/Error';
+import NoData from './TraceFlamegraphStates/NoData/NoData';
+import Success from './TraceFlamegraphStates/Success/Success';
+
+interface ITraceFlamegraphProps {
+ serviceExecTime: Record
;
+ startTime: number;
+ endTime: number;
+ traceFlamegraphStatsWidth: number;
+ selectedSpan: Span | undefined;
+}
+
+function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
+ const {
+ serviceExecTime,
+ startTime,
+ endTime,
+ traceFlamegraphStatsWidth,
+ selectedSpan,
+ } = props;
+ const { id: traceId } = useParams();
+ const urlQuery = useUrlQuery();
+ const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState(
+ urlQuery.get('spanId') || '',
+ );
+
+ useEffect(() => {
+ setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
+ }, [urlQuery]);
+
+ const { data, isFetching, error } = useGetTraceFlamegraph({
+ traceId,
+ selectedSpanId: firstSpanAtFetchLevel,
+ });
+ const isDarkMode = useIsDarkMode();
+
+ // get the current state of trace flamegraph based on the API lifecycle
+ const traceFlamegraphState = useMemo(() => {
+ if (isFetching) {
+ if (
+ data &&
+ data.payload &&
+ data.payload.spans &&
+ data.payload.spans.length > 0
+ ) {
+ return TraceFlamegraphStates.FETCHING_WITH_OLD_DATA_PRESENT;
+ }
+ return TraceFlamegraphStates.LOADING;
+ }
+ if (error) {
+ return TraceFlamegraphStates.ERROR;
+ }
+ if (
+ data &&
+ data.payload &&
+ data.payload.spans &&
+ data.payload.spans.length === 0
+ ) {
+ return TraceFlamegraphStates.NO_DATA;
+ }
+
+ return TraceFlamegraphStates.SUCCESS;
+ }, [error, isFetching, data]);
+
+ // 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(() => data?.payload?.spans || [], [
+ data?.payload?.spans,
+ ]);
+
+ // get the content based on the current state of the trace waterfall
+ const getContent = useMemo(() => {
+ switch (traceFlamegraphState) {
+ case TraceFlamegraphStates.LOADING:
+ return (
+
+
+ );
+ case TraceFlamegraphStates.ERROR:
+ return
+
+
% exec time
+
+ {Object.keys(serviceExecTime).map((service) => {
+ const spread = endTime - startTime;
+ const value = (serviceExecTime[service] * 100) / spread;
+ const color = generateColor(
+ service,
+ isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
+ );
+ return (
+
+
+
+
+ {parseFloat(value.toFixed(2))}%
+
+
+
+ );
+ })}
+
+
+
+ {getContent}
+
+
+
+
+
+ {error?.message || 'Something went wrong!'}
+
+
+
No Trace found with the id: {id} ;
+}
+
+export default NoData;
diff --git a/frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss b/frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss
new file mode 100644
index 00000000000..16501c6b01c
--- /dev/null
+++ b/frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss
@@ -0,0 +1,28 @@
+.trace-flamegraph {
+ height: 90%;
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ .trace-flamegraph-virtuoso {
+ overflow-x: hidden;
+
+ .flamegraph-row {
+ display: flex;
+ align-items: center;
+ height: 18px;
+ padding-bottom: 6px;
+
+ .span-item {
+ position: absolute;
+ height: 12px;
+ background-color: yellow;
+ border-radius: 6px;
+ cursor: pointer;
+ }
+ }
+
+ &::-webkit-scrollbar {
+ width: 0rem;
+ }
+ }
+}
diff --git a/frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx b/frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx
new file mode 100644
index 00000000000..bd99cebee64
--- /dev/null
+++ b/frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx
@@ -0,0 +1,154 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import './Success.styles.scss';
+
+import { Tooltip } from 'antd';
+import Color from 'color';
+import TimelineV2 from 'components/TimelineV2/TimelineV2';
+import { themeColors } from 'constants/theme';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import {
+ Dispatch,
+ SetStateAction,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { ListRange, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { Span } from 'types/api/trace/getTraceV2';
+
+interface ITraceMetadata {
+ startTime: number;
+ endTime: number;
+}
+
+interface ISuccessProps {
+ spans: FlamegraphSpan[][];
+ firstSpanAtFetchLevel: string;
+ setFirstSpanAtFetchLevel: Dispatch>;
+ traceMetadata: ITraceMetadata;
+ selectedSpan: Span | undefined;
+}
+
+function Success(props: ISuccessProps): JSX.Element {
+ const {
+ spans,
+ setFirstSpanAtFetchLevel,
+ traceMetadata,
+ firstSpanAtFetchLevel,
+ selectedSpan,
+ } = props;
+ const { search } = useLocation();
+ const history = useHistory();
+ const isDarkMode = useIsDarkMode();
+ const virtuosoRef = useRef(null);
+ const [hoveredSpanId, setHoveredSpanId] = useState('');
+ const renderSpanLevel = useCallback(
+ (_: number, spans: FlamegraphSpan[]): JSX.Element => (
+
+ {spans.map((span) => {
+ const spread = traceMetadata.endTime - traceMetadata.startTime;
+ const leftOffset =
+ ((span.timestamp - traceMetadata.startTime) * 100) / spread;
+ let width = ((span.durationNano / 1e6) * 100) / spread;
+ if (width > 100) {
+ width = 100;
+ }
+ const toolTipText = `${span.name}`;
+ const searchParams = new URLSearchParams(search);
+
+ let color = generateColor(span.serviceName, themeColors.traceDetailColors);
+
+ const selectedSpanColor = isDarkMode
+ ? Color(color).lighten(0.7)
+ : Color(color).darken(0.7);
+
+ if (span.hasError) {
+ color = `var(--bg-cherry-500)`;
+ }
+
+ return (
+
+ setHoveredSpanId(span.spanId)}
+ onMouseLeave={(): void => setHoveredSpanId('')}
+ onClick={(event): void => {
+ event.stopPropagation();
+ event.preventDefault();
+ searchParams.set('spanId', span.spanId);
+ history.replace({ search: searchParams.toString() });
+ }}
+ />
+
+ );
+ })}
+
+ ),
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [traceMetadata.endTime, traceMetadata.startTime, selectedSpan, hoveredSpanId],
+ );
+
+ const handleRangeChanged = useCallback(
+ (range: ListRange) => {
+ // if there are less than 50 levels on any load that means a single API call is sufficient
+ if (spans.length < 50) {
+ return;
+ }
+
+ const { startIndex, endIndex } = range;
+ if (startIndex === 0 && spans[0][0].level !== 0) {
+ setFirstSpanAtFetchLevel(spans[0][0].spanId);
+ }
+
+ if (endIndex === spans.length - 1) {
+ setFirstSpanAtFetchLevel(spans[spans.length - 1][0].spanId);
+ }
+ },
+ [setFirstSpanAtFetchLevel, spans],
+ );
+
+ useEffect(() => {
+ const index = spans.findIndex(
+ (span) => span[0].spanId === firstSpanAtFetchLevel,
+ );
+
+ virtuosoRef.current?.scrollToIndex({
+ index,
+ behavior: 'auto',
+ });
+ }, [firstSpanAtFetchLevel, spans]);
+
+ return (
+ <>
+
+
+
Example Queries
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss
index 60eec0bdb65..c7a96456e92 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss
@@ -9,7 +9,7 @@
.show-all-filters {
.content {
.rc-virtual-list-holder {
- height: 100px;
+ height: 115px;
}
}
}
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
index e319ae3d9ee..48ee2d0a604 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
@@ -224,7 +224,7 @@ function QueryBuilderSearchV2(
const { data, isFetching } = useGetAggregateKeys(
{
- searchText: searchValue,
+ searchText: searchValue?.split(' ')[0],
dataSource: query.dataSource,
aggregateOperator: query.aggregateOperator,
aggregateAttribute: query.aggregateAttribute.key,
diff --git a/frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.styles.scss b/frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.styles.scss
new file mode 100644
index 00000000000..5c686e5aec0
--- /dev/null
+++ b/frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.styles.scss
@@ -0,0 +1,89 @@
+.attributes-corner {
+ display: flex;
+ flex-direction: column;
+
+ .no-data {
+ height: 400px;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .search-input {
+ margin: 12px;
+ width: auto;
+ }
+
+ .attributes-container {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 12px;
+
+ .item {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ justify-content: flex-start;
+
+ .item-key {
+ color: var(--bg-vanilla-100);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+
+ .value-wrapper {
+ display: flex;
+ padding: 2px 8px;
+ align-items: center;
+ width: fit-content;
+ max-width: 100%;
+ gap: 8px;
+ border-radius: 50px;
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-slate-500);
+ .item-value {
+ 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.56px;
+ }
+ }
+ }
+ }
+
+ .border-top {
+ border-top: 1px solid var(--bg-slate-400);
+ }
+}
+
+.lightMode {
+ .attributes-corner {
+ .attributes-container {
+ .item {
+ .item-key {
+ color: var(--bg-ink-100);
+ }
+
+ .value-wrapper {
+ border: 1px solid var(--bg-vanilla-300);
+ background: var(--bg-vanilla-300);
+
+ .item-value {
+ color: var(--bg-ink-400);
+ }
+ }
+ }
+ }
+
+ .border-top {
+ border-top: 1px solid var(--bg-vanilla-300);
+ }
+ }
+}
diff --git a/frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx b/frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx
new file mode 100644
index 00000000000..4199aa37ec7
--- /dev/null
+++ b/frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx
@@ -0,0 +1,65 @@
+import './Attributes.styles.scss';
+
+import { Input, Tooltip, Typography } from 'antd';
+import cx from 'classnames';
+import { flattenObject } from 'container/LogDetailedView/utils';
+import { useMemo, useState } from 'react';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import NoData from '../NoData/NoData';
+
+interface IAttributesProps {
+ span: Span;
+ isSearchVisible: boolean;
+}
+
+function Attributes(props: IAttributesProps): JSX.Element {
+ const { span, isSearchVisible } = props;
+ const [fieldSearchInput, setFieldSearchInput] = useState
('');
+
+ const flattenSpanData: Record = useMemo(
+ () => (span.tagMap ? flattenObject(span.tagMap) : {}),
+ [span],
+ );
+
+ const datasource = Object.keys(flattenSpanData)
+ .filter((attribute) =>
+ attribute.toLowerCase().includes(fieldSearchInput.toLowerCase()),
+ )
+ .map((key) => ({ field: key, value: flattenSpanData[key] }));
+
+ return (
+
+ {datasource.length === 0 &&
}
+ {isSearchVisible && datasource.length > 0 && (
+
setFieldSearchInput(e.target.value)}
+ />
+ )}
+
+ {datasource.map((item) => (
+
+
+ {item.field}
+
+
+
+
+ {item.value}
+
+
+
+
+
('');
+ const events: Event[] = useMemo(() => {
+ const tempEvents = [];
+ for (let i = 0; i < span.event?.length; i++) {
+ const parsedEvent = JSON.parse(span.event[i]);
+ tempEvents.push(parsedEvent);
+ }
+ return tempEvents;
+ }, [span.event]);
+
+ return (
+
+ {events.length === 0 && (
+
+
+ )}
+
+ {isSearchVisible && (
+
setFieldSearchInput(e.target.value)}
+ />
+ )}
+ {events
+ .filter((eve) =>
+ eve.name.toLowerCase().includes(fieldSearchInput.toLowerCase()),
+ )
+ .map((event) => (
+
+ ),
+ children: (
+
+
+
+ Start Time
+
+
+
+ {getYAxisFormattedValue(
+ `${event.timeUnixNano / 1e6 - startTime}`,
+ 'ms',
+ )}
+
+
+ after the start
+
+
+
+ {event.attributeMap &&
+ Object.keys(event.attributeMap).map((attributeKey) => (
+
+
+
+ {attributeKey}
+
+
+
+
+
+
+ {event.attributeMap[attributeKey]}
+
+
+
+
+ ))}
+
+ ),
+ },
+ ]}
+ />
+
+ ))}
+
+ );
+}
+
+export default EventsTable;
diff --git a/frontend/src/container/SpanDetailsDrawer/NoData/NoData.styles.scss b/frontend/src/container/SpanDetailsDrawer/NoData/NoData.styles.scss
new file mode 100644
index 00000000000..e40fb340a9e
--- /dev/null
+++ b/frontend/src/container/SpanDetailsDrawer/NoData/NoData.styles.scss
@@ -0,0 +1,28 @@
+.no-data {
+ display: flex;
+ gap: 4px;
+ flex-direction: column;
+
+ .no-data-img {
+ height: 32px;
+ width: 32px;
+ }
+
+ .no-data-text {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 18px; /* 128.571% */
+ letter-spacing: -0.07px;
+ }
+}
+
+.lightMode {
+ .no-data {
+ .no-data-text {
+ color: var(--bg-ink-400);
+ }
+ }
+}
diff --git a/frontend/src/container/SpanDetailsDrawer/NoData/NoData.tsx b/frontend/src/container/SpanDetailsDrawer/NoData/NoData.tsx
new file mode 100644
index 00000000000..df4e5f38c3b
--- /dev/null
+++ b/frontend/src/container/SpanDetailsDrawer/NoData/NoData.tsx
@@ -0,0 +1,22 @@
+import './NoData.styles.scss';
+
+import { Typography } from 'antd';
+
+interface INoDataProps {
+ name: string;
+}
+
+function NoData(props: INoDataProps): JSX.Element {
+ const { name } = props;
+
+ return (
+
+
+
+ No {name} found for selected span
+
+
+ );
+}
+
+export default NoData;
diff --git a/frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss b/frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss
new file mode 100644
index 00000000000..572f57396ae
--- /dev/null
+++ b/frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss
@@ -0,0 +1,263 @@
+.span-details-drawer {
+ display: flex;
+ flex-direction: column;
+ width: 330px;
+ border-left: 1px solid var(--bg-slate-400);
+ overflow-y: auto;
+
+ &::-webkit-scrollbar {
+ width: 0.1rem;
+ }
+
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 48px;
+ padding: 12px;
+ border-bottom: 1px solid var(--bg-slate-400);
+
+ .heading {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ .dot {
+ height: 8px;
+ width: 8px;
+ border-radius: 2px;
+ background: var(--bg-cherry-500);
+ }
+
+ .text {
+ 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;
+ }
+ }
+ }
+
+ .description {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 10px 12px;
+
+ .item {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ .attribute-key {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 18px; /* 163.636% */
+ letter-spacing: 0.44px;
+ text-transform: uppercase;
+ }
+
+ .value-wrapper {
+ display: flex;
+ padding: 2px 8px;
+ align-items: center;
+ width: fit-content;
+ max-width: 100%;
+ border-radius: 50px;
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-slate-500);
+
+ .attribute-value {
+ color: var(--bg-vanilla-400);
+ font-family: 'Inter';
+ font-size: 14px;
+ font-style: normal;
+ width: 100%;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: 0.28px;
+ }
+ }
+
+ .service {
+ display: flex;
+ padding: 2px 8px;
+ align-items: center;
+ gap: 8px;
+ border-radius: 50px;
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-slate-500);
+ width: fit-content;
+
+ .dot {
+ height: 4px;
+ width: 4px;
+ }
+
+ .value-wrapper {
+ display: flex;
+ padding: 0px;
+ align-items: center;
+ width: fit-content;
+ max-width: 100%;
+ border-radius: 0px;
+ border: none;
+ background: var(--bg-slate-500);
+
+ .service-value {
+ 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.28px;
+ }
+ }
+ }
+ }
+ }
+
+ .related-logs {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: fit-content;
+ padding: 5px 12px;
+ margin: 10px 12px;
+ box-shadow: none;
+
+ 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;
+ }
+
+ .attributes-events {
+ .details-drawer-tabs {
+ .ant-tabs-extra-content {
+ display: flex;
+ align-items: center;
+
+ .search-icon {
+ width: 33px;
+ padding-right: 12px;
+ }
+ }
+
+ .ant-tabs-nav::before {
+ border-bottom: 1px solid var(--bg-slate-400) !important;
+ }
+
+ .attributes-tab-btn {
+ display: flex;
+ align-items: center;
+ }
+ .attributes-tab-btn:hover {
+ background: unset;
+ }
+
+ .events-tab-btn {
+ display: flex;
+ align-items: center;
+ }
+
+ .events-tab-btn:hover {
+ background: unset;
+ }
+ }
+ }
+}
+
+.span-details-drawer-docked {
+ width: 48px;
+
+ .header {
+ justify-content: center;
+ }
+}
+
+.lightMode {
+ .span-details-drawer {
+ border-left: 1px solid var(--bg-vanilla-300);
+
+ .header {
+ border-bottom: 1px solid var(--bg-vanilla-300);
+
+ .heading {
+ .text {
+ color: var(--bg-ink-400);
+ }
+ }
+ }
+
+ .description {
+ .item {
+ .attribute-key {
+ color: var(--bg-ink-400);
+ }
+
+ .value-wrapper {
+ border: 1px solid var(--bg-vanilla-300);
+ background: var(--bg-vanilla-300);
+
+ .attribute-value {
+ color: var(--bg-ink-400);
+ }
+ }
+
+ .service {
+ border: 1px solid var(--bg-vanilla-300);
+ background: var(--bg-vanilla-300);
+
+ .value-wrapper {
+ background: var(--bg-vanilla-300);
+ border: none;
+
+ .service-value {
+ color: var(--bg-ink-400);
+ }
+ }
+ }
+ }
+ }
+
+ .related-logs {
+ color: var(--bg-ink-400);
+ }
+
+ .attributes-events {
+ .details-drawer-tabs {
+ .ant-tabs-nav::before {
+ border-bottom: 1px solid var(--bg-vanilla-300) !important;
+ }
+
+ .ant-tabs-nav-wrap {
+ height: 32px;
+ }
+
+ .ant-tabs-tab {
+ border: none;
+ background-color: var(--bg-vanilla-200);
+
+ .ant-btn {
+ border-bottom: 1px solid var(--bg-vanilla-300);
+ }
+ }
+
+ .ant-tabs-ink-bar {
+ background: #4e74f8 !important;
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx b/frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx
new file mode 100644
index 00000000000..222202ba446
--- /dev/null
+++ b/frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx
@@ -0,0 +1,208 @@
+import './SpanDetailsDrawer.styles.scss';
+
+import { Button, Tabs, TabsProps, Tooltip, Typography } from 'antd';
+import cx from 'classnames';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { themeColors } from 'constants/theme';
+import { getTraceToLogsQuery } from 'container/TraceDetail/SelectedSpanDetails/config';
+import createQueryParams from 'lib/createQueryParams';
+import history from 'lib/history';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { Anvil, Bookmark, PanelRight, Search } from 'lucide-react';
+import { Dispatch, SetStateAction, useState } from 'react';
+import { Span } from 'types/api/trace/getTraceV2';
+import { formatEpochTimestamp } from 'utils/timeUtils';
+
+import Attributes from './Attributes/Attributes';
+import Events from './Events/Events';
+
+interface ISpanDetailsDrawerProps {
+ isSpanDetailsDocked: boolean;
+ setIsSpanDetailsDocked: Dispatch
>;
+ selectedSpan: Span | undefined;
+ traceID: string;
+ traceStartTime: number;
+ traceEndTime: number;
+}
+
+function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {
+ const {
+ isSpanDetailsDocked,
+ setIsSpanDetailsDocked,
+ selectedSpan,
+ traceStartTime,
+ traceID,
+ traceEndTime,
+ } = props;
+
+ const [isSearchVisible, setIsSearchVisible] = useState(false);
+ const color = generateColor(
+ selectedSpan?.serviceName || '',
+ themeColors.traceDetailColors,
+ );
+
+ function getItems(span: Span, startTime: number): TabsProps['items'] {
+ return [
+ {
+ label: (
+
+
+ {!isSpanDetailsDocked && (
+
+ )}
+ setIsSpanDetailsDocked((prev) => !prev)}
+ />
+
+ {selectedSpan && !isSpanDetailsDocked && (
+ <>
+
+
+
span name
+
+
+
+ {selectedSpan.name}
+
+
+
+
+
span id
+
+
+ {selectedSpan.spanId}
+
+
+
+
start time
+
+
+ {formatEpochTimestamp(selectedSpan.timestamp)}
+
+
+
+
duration
+
+
+ {getYAxisFormattedValue(`${selectedSpan.durationNano}`, 'ns')}
+
+
+
+
service
+
+
+
+
+
+ {selectedSpan.serviceName}
+
+
+
+
+
+
span kind
+
+
+ {selectedSpan.spanKind}
+
+
+
+
+ status code string
+
+
+
+ {selectedSpan.statusCodeString}
+
+
+
+
+
+ Go to related logs
+
+
+
+ setIsSearchVisible((prev) => !prev)}
+ />
+ }
+ />
+
+
+ )}
+
+
+
+
+ history.push(ROUTES.TRACES_EXPLORER)}
+ />
+
+
+ Trace ID
+
+
{traceID}
+
+
+ {rootServiceName}
+ —
+
+ {rootSpanName}
+
+
+
+
+
+
+ {getYAxisFormattedValue(`${duration}`, 'ms')}
+
+
+
+
+
+
+ {formatEpochTimestamp(startTime * 1000)}
+
+
+
+ {!notFound && (
+
+
+ Total Spans
+ {totalSpans}
+
+
+
+ Error Spans
+ {totalErrorSpans}
+
+
+ )}
+
+ | ErrorResponse
+ | undefined;
+ isFetchingTraceData: boolean;
+ errorFetchingTraceData: unknown;
+ interestedSpanId: IInterestedSpan;
+ setInterestedSpanId: Dispatch>;
+ setTraceFlamegraphStatsWidth: Dispatch>;
+ selectedSpan: Span | undefined;
+ setSelectedSpan: Dispatch>;
+}
+
+function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
+ const {
+ traceData,
+ isFetchingTraceData,
+ errorFetchingTraceData,
+ interestedSpanId,
+ traceId,
+ uncollapsedNodes,
+ setInterestedSpanId,
+ setTraceFlamegraphStatsWidth,
+ setSelectedSpan,
+ selectedSpan,
+ } = props;
+ // get the current state of trace waterfall based on the API lifecycle
+ const traceWaterfallState = useMemo(() => {
+ if (isFetchingTraceData) {
+ if (
+ traceData &&
+ traceData.payload &&
+ traceData.payload.spans &&
+ traceData.payload.spans.length > 0
+ ) {
+ return TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT;
+ }
+ return TraceWaterfallStates.LOADING;
+ }
+ if (errorFetchingTraceData) {
+ return TraceWaterfallStates.ERROR;
+ }
+ if (
+ traceData &&
+ traceData.payload &&
+ traceData.payload.spans &&
+ traceData.payload.spans.length === 0
+ ) {
+ return TraceWaterfallStates.NO_DATA;
+ }
+
+ return TraceWaterfallStates.SUCCESS;
+ }, [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(() => traceData?.payload?.spans || [], [
+ traceData?.payload?.spans,
+ ]);
+
+ // get the content based on the current state of the trace waterfall
+ const getContent = useMemo(() => {
+ switch (traceWaterfallState) {
+ case TraceWaterfallStates.LOADING:
+ return (
+
+
+ );
+ case TraceWaterfallStates.ERROR:
+ return {getContent}
;
+}
+
+export default TraceWaterfall;
diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss
new file mode 100644
index 00000000000..6382b0157a9
--- /dev/null
+++ b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss
@@ -0,0 +1,30 @@
+.error-waterfall {
+ display: flex;
+ padding: 12px;
+ margin: 20px;
+ gap: 12px;
+ align-items: flex-start;
+ border-radius: 4px;
+ background: var(--bg-cherry-500);
+
+ .text {
+ color: var(--bg-vanilla-100);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ flex-shrink: 0;
+ }
+
+ .value {
+ color: var(--bg-vanilla-100);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+}
diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx
new file mode 100644
index 00000000000..27b8428c0ef
--- /dev/null
+++ b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx
@@ -0,0 +1,25 @@
+import './Error.styles.scss';
+
+import { Tooltip, Typography } from 'antd';
+import { AxiosError } from 'axios';
+
+interface IErrorProps {
+ error: AxiosError;
+}
+
+function Error(props: IErrorProps): JSX.Element {
+ const { error } = props;
+
+ return (
+
+ Something went wrong!
+
+
+ {error?.message}
+
+
+
+ );
+}
+
+export default Error;
diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfallStates/NoData/NoData.tsx b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/NoData/NoData.tsx
new file mode 100644
index 00000000000..0be04ffc234
--- /dev/null
+++ b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/NoData/NoData.tsx
@@ -0,0 +1,12 @@
+import { Typography } from 'antd';
+
+interface INoDataProps {
+ id: string;
+}
+
+function NoData(props: INoDataProps): JSX.Element {
+ const { id } = props;
+ return No Trace found with the id: {id} ;
+}
+
+export default NoData;
diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss
new file mode 100644
index 00000000000..421a0e6db60
--- /dev/null
+++ b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss
@@ -0,0 +1,60 @@
+.filter-row {
+ display: flex;
+ align-items: center;
+ padding: 16px 20px 0px 20px;
+ gap: 12px;
+
+ .query-builder-search-v2 {
+ width: 100%;
+ }
+
+ .pre-next-toggle {
+ display: flex;
+ flex-shrink: 0;
+ gap: 12px;
+
+ .ant-typography {
+ display: flex;
+ align-items: center;
+ color: var(--bg-vanilla-400);
+ font-family: 'Geist Mono';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+ }
+
+ .ant-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: none;
+ }
+ }
+
+ .no-results {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ color: var(--bg-vanilla-400);
+ font-family: 'Geist Mono';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+ }
+}
+
+.lightMode {
+ .filter-row {
+ .pre-next-toggle {
+ .ant-typography {
+ color: var(--bg-ink-400);
+ }
+ }
+
+ .no-results {
+ color: var(--bg-ink-400);
+ }
+ }
+}
diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx
new file mode 100644
index 00000000000..e0bee45465a
--- /dev/null
+++ b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx
@@ -0,0 +1,181 @@
+import './Filters.styles.scss';
+
+import { InfoCircleOutlined, LoadingOutlined } from '@ant-design/icons';
+import { Button, Spin, Tooltip, Typography } from 'antd';
+import { AxiosError } from 'axios';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { TracesAggregatorOperator } from 'types/common/queryBuilder';
+
+import { BASE_FILTER_QUERY } from './constants';
+
+function prepareQuery(filters: TagFilter, traceID: string): Query {
+ return {
+ ...initialQueriesMap.traces,
+ builder: {
+ ...initialQueriesMap.traces.builder,
+ queryData: [
+ {
+ ...initialQueriesMap.traces.builder.queryData[0],
+ aggregateOperator: TracesAggregatorOperator.NOOP,
+ orderBy: [{ columnName: 'timestamp', order: 'asc' }],
+ filters: {
+ ...filters,
+ items: [
+ ...filters.items,
+ {
+ id: '5ab8e1cf',
+ key: {
+ key: 'trace_id',
+ dataType: DataTypes.String,
+ type: '',
+ isColumn: true,
+ isJSON: false,
+ id: 'trace_id--string----true',
+ },
+ op: '=',
+ value: traceID,
+ },
+ ],
+ },
+ },
+ ],
+ },
+ };
+}
+
+function Filters({
+ startTime,
+ endTime,
+ traceID,
+}: {
+ startTime: number;
+ endTime: number;
+ traceID: string;
+}): JSX.Element {
+ const [filters, setFilters] = useState(BASE_FILTER_QUERY.filters);
+ const [noData, setNoData] = useState(false);
+ const [filteredSpanIds, setFilteredSpanIds] = useState([]);
+ const handleFilterChange = (value: TagFilter): void => {
+ setFilters(value);
+ };
+ const [currentSearchedIndex, setCurrentSearchedIndex] = useState(0);
+ const { search } = useLocation();
+ const history = useHistory();
+
+ const { isFetching, error } = useGetQueryRange(
+ {
+ query: prepareQuery(filters, traceID),
+ graphType: PANEL_TYPES.LIST,
+ selectedTime: 'GLOBAL_TIME',
+ start: startTime,
+ end: endTime,
+ params: {
+ dataSource: 'traces',
+ },
+ tableParams: {
+ pagination: {
+ offset: 0,
+ limit: 200,
+ },
+ selectColumns: [
+ {
+ key: 'name',
+ dataType: 'string',
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'name--string--tag--true',
+ isIndexed: false,
+ },
+ ],
+ },
+ },
+ DEFAULT_ENTITY_VERSION,
+ {
+ queryKey: [filters],
+ enabled: filters.items.length > 0,
+ onSuccess: (data) => {
+ if (data?.payload.data.newResult.data.result[0].list) {
+ setFilteredSpanIds(
+ data?.payload.data.newResult.data.result[0].list.map(
+ (val) => val.data.spanID,
+ ),
+ );
+ setNoData(false);
+ } else {
+ setNoData(true);
+ setFilteredSpanIds([]);
+ setCurrentSearchedIndex(0);
+ }
+ },
+ },
+ );
+
+ const handlePrevNext = useCallback(
+ (id: number): void => {
+ const searchParams = new URLSearchParams(search);
+ searchParams.set('spanId', filteredSpanIds[id]);
+ history.replace({ search: searchParams.toString() });
+ },
+ [filteredSpanIds, history, search],
+ );
+
+ useEffect(() => {
+ if (filteredSpanIds.length > 0) {
+ handlePrevNext(0);
+ }
+ }, [filteredSpanIds, handlePrevNext]);
+
+ return (
+
+
+ {filteredSpanIds.length > 0 && (
+
+
+ {currentSearchedIndex + 1} / {filteredSpanIds.length}
+
+
+ )}
+ {isFetching &&
} size="small" />}
+ {error && (
+
+
+ )}
+ {noData && (
+
No results found
+ )}
+
>;
+ setTraceFlamegraphStatsWidth: Dispatch>;
+ selectedSpan: Span | undefined;
+ setSelectedSpan: Dispatch>;
+}
+
+function SpanOverview({
+ span,
+ isSpanCollapsed,
+ handleCollapseUncollapse,
+ setSelectedSpan,
+ selectedSpan,
+}: {
+ span: Span;
+ isSpanCollapsed: boolean;
+ handleCollapseUncollapse: (id: string, collapse: boolean) => void;
+ selectedSpan: Span | undefined;
+ setSelectedSpan: Dispatch>;
+}): JSX.Element {
+ const isRootSpan = span.level === 0;
+ const spanRef = useRef(null);
+
+ let color = generateColor(span.serviceName, themeColors.traceDetailColors);
+ if (span.hasError) {
+ color = `var(--bg-cherry-500)`;
+ }
+
+ return (
+ ')`,
+ backgroundRepeat: 'repeat',
+ backgroundSize: `${CONNECTOR_WIDTH + 1}px 54px`,
+ }}
+ onClick={(): void => {
+ setSelectedSpan(span);
+ }}
+ >
+ {!isRootSpan && (
+
+ )}
+
+
+
+ {span.hasChildren ? (
+ {
+ event.stopPropagation();
+ event.preventDefault();
+ handleCollapseUncollapse(span.spanId, !isSpanCollapsed);
+ }}
+ className="collapse-uncollapse-button"
+ >
+ {isSpanCollapsed ? (
+
+ {span.subTreeNodeCount}
+
+
+ ) : (
+
+
+ )}
+ {span.name}
+
+
+
+
+
+ {span.serviceName}
+
+
+
+
>;
+}): JSX.Element {
+ const { time, timeUnitName } = convertTimeToRelevantUnit(
+ span.durationNano / 1e6,
+ );
+
+ const spread = traceMetadata.endTime - traceMetadata.startTime;
+ const leftOffset = ((span.timestamp - traceMetadata.startTime) * 1e2) / spread;
+ const width = (span.durationNano * 1e2) / (spread * 1e6);
+
+ let color = generateColor(span.serviceName, themeColors.traceDetailColors);
+
+ if (span.hasError) {
+ color = `var(--bg-cherry-500)`;
+ }
+
+ return (
+ {
+ setSelectedSpan(span);
+ }}
+ >
+
+
+ {`${toFixed(time, 2)} ${timeUnitName}`}
+
+
();
+
+function getWaterfallColumns({
+ handleCollapseUncollapse,
+ uncollapsedNodes,
+ traceMetadata,
+ selectedSpan,
+ setSelectedSpan,
+}: {
+ handleCollapseUncollapse: (id: string, collapse: boolean) => void;
+ uncollapsedNodes: string[];
+ traceMetadata: ITraceMetadata;
+ selectedSpan: Span | undefined;
+ setSelectedSpan: Dispatch>;
+}): ColumnDef[] {
+ const waterfallColumns: ColumnDef[] = [
+ columnDefHelper.display({
+ id: 'span-name',
+ header: '',
+ cell: (props): JSX.Element => (
+
,
+ enableResizing: false,
+ cell: (props): JSX.Element => (
+ >();
+
+ const handleCollapseUncollapse = useCallback(
+ (spanId: string, collapse: boolean) => {
+ setInterestedSpanId({ spanId, isUncollapsed: !collapse });
+ },
+ [setInterestedSpanId],
+ );
+
+ const handleVirtualizerInstanceChanged = (
+ instance: Virtualizer,
+ ): void => {
+ const { range } = instance;
+ if (spans.length < 500) return;
+
+ if (range?.startIndex === 0 && instance.isScrolling) {
+ if (spans[0].level !== 0) {
+ setInterestedSpanId({ spanId: spans[0].spanId, isUncollapsed: false });
+ }
+ return;
+ }
+
+ if (range?.endIndex === spans.length - 1 && instance.isScrolling) {
+ setInterestedSpanId({
+ spanId: spans[spans.length - 1].spanId,
+ isUncollapsed: false,
+ });
+ }
+ };
+
+ const columns = useMemo(
+ () =>
+ getWaterfallColumns({
+ handleCollapseUncollapse,
+ uncollapsedNodes,
+ traceMetadata,
+ selectedSpan,
+ setSelectedSpan,
+ }),
+ [
+ handleCollapseUncollapse,
+ uncollapsedNodes,
+ traceMetadata,
+ selectedSpan,
+ setSelectedSpan,
+ ],
+ );
+
+ useEffect(() => {
+ if (interestedSpanId.spanId !== '' && virtualizerRef.current) {
+ const idx = spans.findIndex(
+ (span) => span.spanId === interestedSpanId.spanId,
+ );
+ if (idx !== -1) {
+ setTimeout(() => {
+ virtualizerRef.current?.scrollToIndex(idx, {
+ align: 'center',
+ behavior: 'auto',
+ });
+ }, 400);
+
+ setSelectedSpan(spans[idx]);
+ }
+ } else {
+ setSelectedSpan((prev) => {
+ if (!prev) {
+ return spans[0];
+ }
+ return prev;
+ });
+ }
+ }, [interestedSpanId, setSelectedSpan, spans]);
+
+ return (
+
+ {traceMetadata.hasMissingSpans && (
+
+
+
+ This trace has missing spans
+
+
+
}
+ className="right-info"
+ type="text"
+ >
+ Learn More
+
+
+ )}
+
+
+
| ErrorResponse,
+ unknown
+>;
+
+export default useGetTraceFlamegraph;
diff --git a/frontend/src/hooks/trace/useGetTraceV2.tsx b/frontend/src/hooks/trace/useGetTraceV2.tsx
new file mode 100644
index 00000000000..90b821a187d
--- /dev/null
+++ b/frontend/src/hooks/trace/useGetTraceV2.tsx
@@ -0,0 +1,30 @@
+import getTraceV2 from 'api/trace/getTraceV2';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryResult } from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+ GetTraceV2PayloadProps,
+ GetTraceV2SuccessResponse,
+} from 'types/api/trace/getTraceV2';
+
+const useGetTraceV2 = (props: GetTraceV2PayloadProps): UseLicense =>
+ useQuery({
+ queryFn: () => getTraceV2(props),
+ // if any of the props changes then we need to trigger an API call as the older data will be obsolete
+ queryKey: [
+ REACT_QUERY_KEY.GET_TRACE_V2_WATERFALL,
+ props.traceId,
+ props.selectedSpanId,
+ props.isSelectedSpanIDUnCollapsed,
+ ],
+ enabled: !!props.traceId,
+ keepPreviousData: true,
+ refetchOnWindowFocus: false,
+ });
+
+type UseLicense = UseQueryResult<
+ SuccessResponse | ErrorResponse,
+ unknown
+>;
+
+export default useGetTraceV2;
diff --git a/frontend/src/pages/TraceDetail/TraceDetail.styles.scss b/frontend/src/pages/TraceDetail/TraceDetail.styles.scss
new file mode 100644
index 00000000000..bf1696ebe4d
--- /dev/null
+++ b/frontend/src/pages/TraceDetail/TraceDetail.styles.scss
@@ -0,0 +1,45 @@
+.old-trace-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ .top-header {
+ display: flex;
+ flex-direction: row-reverse;
+ padding: 5px;
+ border-bottom: 1px solid var(--bg-slate-400);
+
+ .new-cta-btn {
+ display: flex;
+ padding: 4px 6px;
+ align-items: center;
+ gap: 8px;
+ color: var(--Vanilla-400, #c0c1c3);
+
+ /* Bifrost (Ancient)/Content/sm */
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ box-shadow: none;
+
+ .ant-btn-icon {
+ margin-inline-end: 0px;
+ }
+ }
+ }
+}
+
+.lightMode {
+ .old-trace-container {
+ .top-header {
+ border-bottom: 1px solid var(--bg-vanilla-300);
+
+ .new-cta-btn {
+ color: var(--bg-ink-400);
+ }
+ }
+ }
+}
diff --git a/frontend/src/pages/TraceDetail/index.tsx b/frontend/src/pages/TraceDetail/index.tsx
index f936bd2d0c0..3ab48562675 100644
--- a/frontend/src/pages/TraceDetail/index.tsx
+++ b/frontend/src/pages/TraceDetail/index.tsx
@@ -1,10 +1,14 @@
-import { Typography } from 'antd';
+import './TraceDetail.styles.scss';
+
+import { Button, Typography } from 'antd';
import getTraceItem from 'api/trace/getTraceItem';
import NotFound from 'components/NotFound';
import Spinner from 'components/Spinner';
import TraceDetailContainer from 'container/TraceDetail';
import useUrlQuery from 'hooks/useUrlQuery';
-import { useMemo } from 'react';
+import { Undo } from 'lucide-react';
+import TraceDetailsPage from 'pages/TraceDetailV2';
+import { useMemo, useState } from 'react';
import { useQuery } from 'react-query';
import { useParams } from 'react-router-dom';
import { Props as TraceDetailProps } from 'types/api/trace/getTraceItem';
@@ -13,6 +17,7 @@ import { noEventMessage } from './constants';
function TraceDetail(): JSX.Element {
const { id } = useParams();
+ const [showNewTraceDetails, setShowNewTraceDetails] = useState(false);
const urlQuery = useUrlQuery();
const { spanId, levelUp, levelDown } = useMemo(
() => ({
@@ -31,6 +36,10 @@ function TraceDetail(): JSX.Element {
},
);
+ if (showNewTraceDetails) {
+ return
@@ -47,7 +56,21 @@ function TraceDetail(): JSX.Element {
return
+
+ setShowNewTraceDetails(true)}
+ icon={
+
+
;
+
+
+
+ Uh-oh! We cannot show the selected trace.
+
+ This can happen in either of the two scenraios -
+
+
+
+
+
+
+
+ The trace data has not been rendered on your SigNoz server yet. You can
+ wait for a bit and refresh this page if this is the case.
+
+
+
+
+ The trace has been deleted as the data has crossed it’s retention period.
+
+
+
+
+ If you feel the issue is none of the above, please contact support.
+
+
+
+
+
();
+ const urlQuery = useUrlQuery();
+ const [interestedSpanId, setInterestedSpanId] = useState(
+ () => ({
+ spanId: urlQuery.get('spanId') || '',
+ isUncollapsed: urlQuery.get('spanId') !== '',
+ }),
+ );
+ const [
+ traceFlamegraphStatsWidth,
+ setTraceFlamegraphStatsWidth,
+ ] = useState(450);
+ const [isSpanDetailsDocked, setIsSpanDetailsDocked] = useState(false);
+ const [selectedSpan, setSelectedSpan] = useState();
+
+ useEffect(() => {
+ setInterestedSpanId({
+ spanId: urlQuery.get('spanId') || '',
+ isUncollapsed: urlQuery.get('spanId') !== '',
+ });
+ }, [urlQuery]);
+
+ const [uncollapsedNodes, setUncollapsedNodes] = useState([]);
+ const {
+ data: traceData,
+ isFetching: isFetchingTraceData,
+ error: errorFetchingTraceData,
+ } = useGetTraceV2({
+ traceId,
+ uncollapsedSpans: uncollapsedNodes,
+ selectedSpanId: interestedSpanId.spanId,
+ isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
+ });
+
+ useEffect(() => {
+ if (traceData && traceData.payload && traceData.payload.uncollapsedSpans) {
+ setUncollapsedNodes(traceData.payload.uncollapsedSpans);
+ }
+ }, [traceData]);
+
+ useEffect(() => {
+ if (selectedSpan) {
+ setIsSpanDetailsDocked(false);
+ }
+ }, [selectedSpan]);
+
+ const noData = useMemo(
+ () =>
+ !isFetchingTraceData &&
+ !errorFetchingTraceData &&
+ defaultTo(traceData?.payload?.spans.length, 0) === 0,
+ [
+ errorFetchingTraceData,
+ isFetchingTraceData,
+ traceData?.payload?.spans.length,
+ ],
+ );
+
+ const items = [
+ {
+ label: (
+
+
+
+
+
(false);
+ const items = [
+ {
+ label: (
+
+
+ ),
+ key: 'trace-details',
+ children:
+
+ ),
+ key: 'saved-views',
+ children:
,
+ },
+ ];
+ const handleOldTraceDetails = useCallback(() => {
+ setShowOldTraceDetails(true);
+ }, []);
+
+ return showOldTraceDetails ? (
+
+ {
+ if (activeKey === 'saved-views') {
+ history.push(ROUTES.TRACES_SAVE_VIEWS);
+ }
+ if (activeKey === 'trace-details') {
+ history.push(ROUTES.TRACES_EXPLORER);
+ }
+ }}
+ tabBarExtraContent={
+
+ );
+}
diff --git a/frontend/src/types/api/logs/log.ts b/frontend/src/types/api/logs/log.ts
index 1224f55fee7..d40dbb3d2e5 100644
--- a/frontend/src/types/api/logs/log.ts
+++ b/frontend/src/types/api/logs/log.ts
@@ -3,7 +3,7 @@ export interface ILog {
timestamp: number | string;
id: string;
traceId: string;
- spanId: string;
+ spanID: string;
traceFlags: number;
severityText: string;
severityNumber: number;
diff --git a/frontend/src/types/api/trace/getTraceFlamegraph.ts b/frontend/src/types/api/trace/getTraceFlamegraph.ts
new file mode 100644
index 00000000000..df199dd4e51
--- /dev/null
+++ b/frontend/src/types/api/trace/getTraceFlamegraph.ts
@@ -0,0 +1,26 @@
+export interface TraceDetailFlamegraphURLProps {
+ id: string;
+}
+
+export interface GetTraceFlamegraphPayloadProps {
+ traceId: string;
+ selectedSpanId: string;
+}
+
+export interface FlamegraphSpan {
+ timestamp: number;
+ durationNano: number;
+ spanId: string;
+ parentSpanId: string;
+ traceId: string;
+ hasError: boolean;
+ serviceName: string;
+ name: string;
+ level: number;
+}
+
+export interface GetTraceFlamegraphSuccessResponse {
+ spans: FlamegraphSpan[][];
+ startTimestampMillis: number;
+ endTimestampMillis: number;
+}
diff --git a/frontend/src/types/api/trace/getTraceV2.ts b/frontend/src/types/api/trace/getTraceV2.ts
new file mode 100644
index 00000000000..e11a6628514
--- /dev/null
+++ b/frontend/src/types/api/trace/getTraceV2.ts
@@ -0,0 +1,52 @@
+export interface TraceDetailV2URLProps {
+ id: string;
+}
+
+export interface GetTraceV2PayloadProps {
+ traceId: string;
+ selectedSpanId: string;
+ uncollapsedSpans: string[];
+ isSelectedSpanIDUnCollapsed: boolean;
+}
+
+export interface Event {
+ name: string;
+ timeUnixNano: number;
+ attributeMap: Record;
+}
+export interface Span {
+ timestamp: number;
+ durationNano: number;
+ spanId: string;
+ rootSpanId: string;
+ parentSpanId: string;
+ traceId: string;
+ hasError: boolean;
+ kind: number;
+ serviceName: string;
+ name: string;
+ references: any;
+ tagMap: Record;
+ event: string[];
+ rootName: string;
+ statusMessage: string;
+ statusCodeString: string;
+ spanKind: string;
+ hasChildren: boolean;
+ hasSibling: boolean;
+ subTreeNodeCount: number;
+ level: number;
+}
+
+export interface GetTraceV2SuccessResponse {
+ spans: Span[];
+ hasMissingSpans: boolean;
+ uncollapsedSpans: string[];
+ startTimestampMillis: number;
+ endTimestampMillis: number;
+ totalSpansCount: number;
+ totalErrorSpansCount: number;
+ rootServiceName: string;
+ rootServiceEntryPoint: string;
+ serviceNameToTotalDurationMap: Record;
+}
diff --git a/frontend/src/utils/timeUtils.ts b/frontend/src/utils/timeUtils.ts
index e93a96b4d25..3eb863363ed 100644
--- a/frontend/src/utils/timeUtils.ts
+++ b/frontend/src/utils/timeUtils.ts
@@ -28,6 +28,16 @@ export const getFormattedDateWithMinutes = (epochTimestamp: number): string => {
return date.format(DATE_TIME_FORMATS.MONTH_DATETIME_SHORT);
};
+export const getFormattedDateWithMinutesAndSeconds = (
+ epochTimestamp: number,
+): string => {
+ // Convert epoch timestamp to a date
+ const date = dayjs.unix(epochTimestamp);
+
+ // Format the date as "18 Nov 2013"
+ return date.format('DD MMM YYYY HH:mm:ss');
+};
+
export const getRemainingDays = (billingEndDate: number): number => {
// Convert Epoch timestamps to Date objects
const startDate = new Date(); // Convert seconds to milliseconds
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index bc745e556d3..bfa1f03cd7d 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3690,11 +3690,23 @@
dependencies:
"@tanstack/table-core" "8.20.5"
+"@tanstack/react-virtual@3.11.2":
+ version "3.11.2"
+ resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.11.2.tgz#d6b9bd999c181f0a2edce270c87a2febead04322"
+ integrity sha512-OuFzMXPF4+xZgx8UzJha0AieuMihhhaWG0tCqpp6tDzlFwOmNBPYMuLOtMJ1Tr4pXLHmgjcWhG6RlknY2oNTdQ==
+ dependencies:
+ "@tanstack/virtual-core" "3.11.2"
+
"@tanstack/table-core@8.20.5":
version "8.20.5"
resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.20.5.tgz#3974f0b090bed11243d4107283824167a395cf1d"
integrity sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==
+"@tanstack/virtual-core@3.11.2":
+ version "3.11.2"
+ resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.11.2.tgz#00409e743ac4eea9afe5b7708594d5fcebb00212"
+ integrity sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==
+
"@testing-library/dom@^8.5.0":
version "8.20.0"
resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz"
diff --git a/pkg/query-service/app/clickhouseReader/reader.go b/pkg/query-service/app/clickhouseReader/reader.go
index 89f8c0536de..ca0d1aaf2bf 100644
--- a/pkg/query-service/app/clickhouseReader/reader.go
+++ b/pkg/query-service/app/clickhouseReader/reader.go
@@ -1811,7 +1811,7 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, trace
}
processingPostCache := time.Now()
- selectedSpansForRequest := tracedetail.GetSelectedSpansForFlamegraphForRequest(req.SelectedSpanID, selectedSpans)
+ selectedSpansForRequest := tracedetail.GetSelectedSpansForFlamegraphForRequest(req.SelectedSpanID, selectedSpans, startTime, endTime)
zap.L().Info("getFlamegraphSpansForTrace: processing post cache", zap.Duration("duration", time.Since(processingPostCache)), zap.String("traceID", traceID))
trace.Spans = selectedSpansForRequest
diff --git a/pkg/query-service/app/traces/tracedetail/flamegraph.go b/pkg/query-service/app/traces/tracedetail/flamegraph.go
index b9412ebf8ce..b2c2c81b52b 100644
--- a/pkg/query-service/app/traces/tracedetail/flamegraph.go
+++ b/pkg/query-service/app/traces/tracedetail/flamegraph.go
@@ -8,6 +8,8 @@ import (
var (
SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH float64 = 50
+ SPAN_LIMIT_PER_LEVEL int = 100
+ TIMESTAMP_SAMPLING_BUCKET_COUNT int = 50
)
func ContainsFlamegraphSpan(slice []*model.FlamegraphSpan, item *model.FlamegraphSpan) bool {
@@ -39,9 +41,11 @@ func FindIndexForSelectedSpan(spans [][]*model.FlamegraphSpan, selectedSpanId st
var selectedSpanLevel int = 0
for index, _spans := range spans {
- if len(_spans) > 0 && _spans[0].SpanID == selectedSpanId {
- selectedSpanLevel = index
- break
+ for _, span := range _spans {
+ if span.SpanID == selectedSpanId {
+ selectedSpanLevel = index
+ break
+ }
}
}
@@ -88,7 +92,64 @@ func GetSelectedSpansForFlamegraph(traceRoots []*model.FlamegraphSpan, spanIdToS
return selectedSpans
}
-func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpans [][]*model.FlamegraphSpan) [][]*model.FlamegraphSpan {
+func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selectedSpanID string, isSelectedSpanIDPresent bool, startTime uint64, endTime uint64) []*model.FlamegraphSpan {
+ var sampledSpans []*model.FlamegraphSpan
+ // sort the spans by latency for latency filtering
+ sort.Slice(spans, func(i, j int) bool {
+ return spans[i].DurationNano > spans[j].DurationNano
+ })
+
+ // pick the top 5 latency spans
+ for idx := range 5 {
+ sampledSpans = append(sampledSpans, spans[idx])
+ }
+
+ // always add the selectedSpan
+ if isSelectedSpanIDPresent {
+ idx := -1
+ for _idx, span := range spans {
+ if span.SpanID == selectedSpanID {
+ idx = _idx
+ }
+ }
+ if idx != -1 {
+ sampledSpans = append(sampledSpans, spans[idx])
+ }
+ }
+
+ bucketSize := (endTime - startTime) / uint64(TIMESTAMP_SAMPLING_BUCKET_COUNT)
+ if bucketSize == 0 {
+ bucketSize = 1
+ }
+
+ bucketedSpans := make([][]*model.FlamegraphSpan, 50)
+
+ for _, span := range spans {
+ if span.TimeUnixNano >= startTime && span.TimeUnixNano <= endTime {
+ bucketIndex := int((span.TimeUnixNano - startTime) / bucketSize)
+ if bucketIndex >= 0 && bucketIndex < 50 {
+ bucketedSpans[bucketIndex] = append(bucketedSpans[bucketIndex], span)
+ }
+ }
+ }
+
+ for i := range bucketedSpans {
+ if len(bucketedSpans[i]) > 2 {
+ // Keep only the first 2 spans
+ bucketedSpans[i] = bucketedSpans[i][:2]
+ }
+ }
+
+ // Flatten the bucketed spans into a single slice
+ for _, bucket := range bucketedSpans {
+ sampledSpans = append(sampledSpans, bucket...)
+ }
+
+ return sampledSpans
+}
+
+func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpans [][]*model.FlamegraphSpan, startTime uint64, endTime uint64) [][]*model.FlamegraphSpan {
+ var selectedSpansForRequest [][]*model.FlamegraphSpan
var selectedIndex = 0
if selectedSpanID != "" {
@@ -112,5 +173,14 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
lowerLimit = 0
}
- return selectedSpans[lowerLimit:upperLimit]
+ for i := lowerLimit; i < upperLimit; i++ {
+ if len(selectedSpans[i]) > SPAN_LIMIT_PER_LEVEL {
+ _spans := getLatencyAndTimestampBucketedSpans(selectedSpans[i], selectedSpanID, i == selectedIndex, startTime, endTime)
+ selectedSpansForRequest = append(selectedSpansForRequest, _spans)
+ } else {
+ selectedSpansForRequest = append(selectedSpansForRequest, selectedSpans[i])
+ }
+ }
+
+ return selectedSpansForRequest
}
+ 
+ 
+