feat: return all spans for flamegraph under a limit

frontend/src/AppRoutes/pageComponents.ts

@@ -308,15 +308,3 @@ export const PublicDashboardPage = Loadable(
 			/* webpackChunkName: "Public Dashboard Page" */ 'pages/PublicDashboard'
 		),
 );
-
-export const AlertTypeSelectionPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "Alert Type Selection Page" */ 'pages/AlertTypeSelection'
-		),
-);
-
-export const MeterExplorerPage = Loadable(
-	() =>
-		import(/* webpackChunkName: "Meter Explorer Page" */ 'pages/MeterExplorer'),
-);

frontend/src/AppRoutes/routes.ts

@@ -1,10 +1,12 @@
 import { RouteProps } from 'react-router-dom';
 import ROUTES from 'constants/routes';
+import AlertTypeSelectionPage from 'pages/AlertTypeSelection';
+import MessagingQueues from 'pages/MessagingQueues';
+import MeterExplorer from 'pages/MeterExplorer';
 
 import {
 	AlertHistory,
 	AlertOverview,
-	AlertTypeSelectionPage,
 	AllAlertChannels,
 	AllErrors,
 	ApiMonitoring,
@@ -27,8 +29,6 @@ import {
 	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
-	MessagingQueuesMainPage,
-	MeterExplorerPage,
 	MetricsExplorer,
 	OldLogsExplorer,
 	Onboarding,
@@ -399,28 +399,28 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
@@ -463,21 +463,21 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.METER,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER_VIEWS,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER_EXPLORER_VIEWS',
 		isPrivate: true,
 	},

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -27,7 +27,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { getOrderByFromParams, safeParseJSON } from '../commonUtils';
+import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -103,10 +103,9 @@ function K8sClustersList({
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>(() => {
 		const groupBy = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.GROUP_BY);
 		if (groupBy) {
-			const parsed = safeParseJSON<IBuilderQuery['groupBy']>(groupBy);
-			if (parsed) {
-				return parsed;
-			}
+			const decoded = decodeURIComponent(groupBy);
+			const parsed = JSON.parse(decoded);
+			return parsed as IBuilderQuery['groupBy'];
 		}
 		return [];
 	});

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -28,7 +28,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { getOrderByFromParams, safeParseJSON } from '../commonUtils';
+import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -105,10 +105,9 @@ function K8sDaemonSetsList({
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>(() => {
 		const groupBy = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.GROUP_BY);
 		if (groupBy) {
-			const parsed = safeParseJSON<IBuilderQuery['groupBy']>(groupBy);
-			if (parsed) {
-				return parsed;
-			}
+			const decoded = decodeURIComponent(groupBy);
+			const parsed = JSON.parse(decoded);
+			return parsed as IBuilderQuery['groupBy'];
 		}
 		return [];
 	});

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -28,7 +28,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { getOrderByFromParams, safeParseJSON } from '../commonUtils';
+import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -106,10 +106,9 @@ function K8sDeploymentsList({
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>(() => {
 		const groupBy = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.GROUP_BY);
 		if (groupBy) {
-			const parsed = safeParseJSON<IBuilderQuery['groupBy']>(groupBy);
-			if (parsed) {
-				return parsed;
-			}
+			const decoded = decodeURIComponent(groupBy);
+			const parsed = JSON.parse(decoded);
+			return parsed as IBuilderQuery['groupBy'];
 		}
 		return [];
 	});

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -28,7 +28,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { getOrderByFromParams, safeParseJSON } from '../commonUtils';
+import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -101,10 +101,9 @@ function K8sJobsList({
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>(() => {
 		const groupBy = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.GROUP_BY);
 		if (groupBy) {
-			const parsed = safeParseJSON<IBuilderQuery['groupBy']>(groupBy);
-			if (parsed) {
-				return parsed;
-			}
+			const decoded = decodeURIComponent(groupBy);
+			const parsed = JSON.parse(decoded);
+			return parsed as IBuilderQuery['groupBy'];
 		}
 		return [];
 	});

frontend/src/container/InfraMonitoringK8s/K8sHeader.tsx

@@ -10,7 +10,6 @@ import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteRe
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { safeParseJSON } from './commonUtils';
 import { INFRA_MONITORING_K8S_PARAMS_KEYS, K8sCategory } from './constants';
 import K8sFiltersSidePanel from './K8sFiltersSidePanel/K8sFiltersSidePanel';
 import { IEntityColumn } from './utils';
@@ -59,10 +58,9 @@ function K8sHeader({
 		const urlFilters = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.FILTERS);
 		let { filters } = currentQuery.builder.queryData[0];
 		if (urlFilters) {
-			const parsed = safeParseJSON<IBuilderQuery['filters']>(urlFilters);
-			if (parsed) {
-				filters = parsed;
-			}
+			const decoded = decodeURIComponent(urlFilters);
+			const parsed = JSON.parse(decoded);
+			filters = parsed;
 		}
 		return {
 			...currentQuery,

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -27,7 +27,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { getOrderByFromParams, safeParseJSON } from '../commonUtils';
+import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -104,10 +104,9 @@ function K8sNamespacesList({
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>(() => {
 		const groupBy = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.GROUP_BY);
 		if (groupBy) {
-			const parsed = safeParseJSON<IBuilderQuery['groupBy']>(groupBy);
-			if (parsed) {
-				return parsed;
-			}
+			const decoded = decodeURIComponent(groupBy);
+			const parsed = JSON.parse(decoded);
+			return parsed as IBuilderQuery['groupBy'];
 		}
 		return [];
 	});

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -27,7 +27,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { getOrderByFromParams, safeParseJSON } from '../commonUtils';
+import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -99,10 +99,9 @@ function K8sNodesList({
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>(() => {
 		const groupBy = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.GROUP_BY);
 		if (groupBy) {
-			const parsed = safeParseJSON<IBuilderQuery['groupBy']>(groupBy);
-			if (parsed) {
-				return parsed;
-			}
+			const decoded = decodeURIComponent(groupBy);
+			const parsed = JSON.parse(decoded);
+			return parsed as IBuilderQuery['groupBy'];
 		}
 		return [];
 	});

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -29,7 +29,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { getOrderByFromParams, safeParseJSON } from '../commonUtils';
+import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -92,10 +92,9 @@ function K8sPodsList({
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>(() => {
 		const groupBy = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.GROUP_BY);
 		if (groupBy) {
-			const parsed = safeParseJSON<IBuilderQuery['groupBy']>(groupBy);
-			if (parsed) {
-				return parsed;
-			}
+			const decoded = decodeURIComponent(groupBy);
+			const parsed = JSON.parse(decoded);
+			return parsed as IBuilderQuery['groupBy'];
 		}
 		return [];
 	});

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -28,7 +28,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { getOrderByFromParams, safeParseJSON } from '../commonUtils';
+import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -105,10 +105,9 @@ function K8sStatefulSetsList({
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>(() => {
 		const groupBy = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.GROUP_BY);
 		if (groupBy) {
-			const parsed = safeParseJSON<IBuilderQuery['groupBy']>(groupBy);
-			if (parsed) {
-				return parsed;
-			}
+			const decoded = decodeURIComponent(groupBy);
+			const parsed = JSON.parse(decoded);
+			return parsed as IBuilderQuery['groupBy'];
 		}
 		return [];
 	});

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -28,7 +28,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { getOrderByFromParams, safeParseJSON } from '../commonUtils';
+import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -105,10 +105,9 @@ function K8sVolumesList({
 	const [groupBy, setGroupBy] = useState<IBuilderQuery['groupBy']>(() => {
 		const groupBy = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.GROUP_BY);
 		if (groupBy) {
-			const parsed = safeParseJSON<IBuilderQuery['groupBy']>(groupBy);
-			if (parsed) {
-				return parsed;
-			}
+			const decoded = decodeURIComponent(groupBy);
+			const parsed = JSON.parse(decoded);
+			return parsed as IBuilderQuery['groupBy'];
 		}
 		return [];
 	});

frontend/src/container/InfraMonitoringK8s/commonUtils.tsx

@@ -5,7 +5,6 @@
 /* eslint-disable prefer-destructuring */
 
 import { useMemo } from 'react';
-import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { Table, Tooltip, Typography } from 'antd';
 import { Progress } from 'antd/lib';
@@ -261,19 +260,6 @@ export const filterDuplicateFilters = (
 	return uniqueFilters;
 };
 
-export const safeParseJSON = <T,>(value: string): T | null => {
-	if (!value) {
-		return null;
-	}
-	try {
-		return JSON.parse(value) as T;
-	} catch (e) {
-		console.error('Error parsing JSON from URL parameter:', e);
-		// TODO: Should we capture this error in Sentry?
-		return null;
-	}
-};
-
 export const getOrderByFromParams = (
 	searchParams: URLSearchParams,
 	returnNullAsDefault = false,
@@ -285,12 +271,9 @@ export const getOrderByFromParams = (
 		INFRA_MONITORING_K8S_PARAMS_KEYS.ORDER_BY,
 	);
 	if (orderByFromParams) {
-		const parsed = safeParseJSON<{ columnName: string; order: 'asc' | 'desc' }>(
-			orderByFromParams,
-		);
-		if (parsed) {
-			return parsed;
-		}
+		const decoded = decodeURIComponent(orderByFromParams);
+		const parsed = JSON.parse(decoded);
+		return parsed as { columnName: string; order: 'asc' | 'desc' };
 	}
 	if (returnNullAsDefault) {
 		return null;
@@ -304,7 +287,13 @@ export const getFiltersFromParams = (
 ): IBuilderQuery['filters'] | null => {
 	const filtersFromParams = searchParams.get(queryKey);
 	if (filtersFromParams) {
-		return safeParseJSON<IBuilderQuery['filters']>(filtersFromParams);
+		try {
+			const decoded = decodeURIComponent(filtersFromParams);
+			const parsed = JSON.parse(decoded);
+			return parsed as IBuilderQuery['filters'];
+		} catch (error) {
+			return null;
+		}
 	}
 	return null;
 };

pkg/query-service/app/clickhouseReader/reader.go

@@ -1216,12 +1216,19 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 	}
 
 	processingPostCache := time.Now()
-	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))
+	selectedSpansForRequest := selectedSpans
+	limit := min(req.Limit, tracedetail.MaxLimitWithoutSampling)
+	totalSpanCount := tracedetail.GetTotalSpanCount(selectedSpans)
+	if totalSpanCount > uint64(limit) {
+		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),
+		zap.Uint64("totalSpanCount", totalSpanCount))
 
 	trace.Spans = selectedSpansForRequest
 	trace.StartTimestampMillis = startTime / 1000000
 	trace.EndTimestampMillis = endTime / 1000000
+	trace.HasMore = totalSpanCount > uint64(limit)
 	return trace, nil
 }
 

pkg/query-service/app/traces/tracedetail/flamegraph.go

@@ -10,6 +10,8 @@ var (
 	SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH float64 = 50
 	SPAN_LIMIT_PER_LEVEL                  int     = 100
 	TIMESTAMP_SAMPLING_BUCKET_COUNT       int     = 50
+
+	MaxLimitWithoutSampling uint = 120_000
 )
 
 func ContainsFlamegraphSpan(slice []*model.FlamegraphSpan, item *model.FlamegraphSpan) bool {
@@ -184,3 +186,12 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 
 	return selectedSpansForRequest
 }
+
+func GetTotalSpanCount(spans [][]*model.FlamegraphSpan) uint64 {
+	levelCount := len(spans)
+	spanCount := uint64(0)
+	for i := range levelCount {
+		spanCount += uint64(len(spans[i]))
+	}
+	return spanCount
+}

pkg/query-service/model/queryParams.go

@@ -337,6 +337,7 @@ type GetWaterfallSpansForTraceWithMetadataParams struct {
 
 type GetFlamegraphSpansForTraceParams struct {
 	SelectedSpanID string `json:"selectedSpanId"`
+	Limit          uint   `json:"limit"`
 }
 
 type SpanFilterParams struct {

pkg/query-service/model/response.go

@@ -336,6 +336,7 @@ type GetFlamegraphSpansForTraceResponse struct {
 	EndTimestampMillis   uint64              `json:"endTimestampMillis"`
 	DurationNano         uint64              `json:"durationNano"`
 	Spans                [][]*FlamegraphSpan `json:"spans"`
+	HasMore              bool                `json:"hasMore"`
 }
 
 type OtelSpanRef struct {