USE_SPAN_METRICS for latency graph on Feature flag (#3172)

frontend/src/constants/features.ts

@@ -8,4 +8,5 @@ export enum FeatureKeys {
 	QUERY_BUILDER_PANELS = 'QUERY_BUILDER_PANELS',
 	QUERY_BUILDER_ALERTS = 'QUERY_BUILDER_ALERTS',
 	DISABLE_UPSELL = 'DISABLE_UPSELL',
+	USE_SPAN_METRICS = 'USE_SPAN_METRICS',
 }

frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts

@@ -43,11 +43,11 @@ export const getQueryBuilderQueries = ({
 				inputFormat: 'ns',
 				start: store.getState().globalTime.minTime,
 			}),
-			reduceTo: 'sum',
 			filters: {
 				items: filterItems[index],
 				op: 'AND',
 			},
+			reduceTo: 'sum',
 			dataSource,
 		};
 

frontend/src/container/MetricsApplication/MetricsPageQueries/OverviewQueries.ts

@@ -7,7 +7,8 @@ import {
 	DataType,
 	FORMULA,
 	GraphTitle,
-	LETENCY_LEGENDS_AGGREGATEOPERATOR,
+	LATENCY_AGGREGATEOPERATOR,
+	LATENCY_AGGREGATEOPERATOR_SPAN_METRICS,
 	MetricsType,
 	OPERATION_LEGENDS,
 	QUERYNAME_AND_EXPRESSION,
@@ -22,79 +23,58 @@ import {
 export const latency = ({
 	servicename,
 	tagFilterItems,
+	isSpanMetricEnable = false,
+	topLevelOperationsRoute,
 }: LatencyProps): QueryBuilderData => {
-	const autocompleteData: BaseAutocompleteData[] = [
+	const newAutoCompleteData: BaseAutocompleteData = {
+		key: isSpanMetricEnable
+			? WidgetKeys.Signoz_latency_bucket
+			: WidgetKeys.DurationNano,
+		dataType: DataType.FLOAT64,
+		isColumn: true,
+		type: isSpanMetricEnable ? null : MetricsType.Tag,
+	};
+
+	const autocompleteData: BaseAutocompleteData[] = Array(3).fill(
+		newAutoCompleteData,
+	);
+
+	const filterItem: TagFilterItem[] = [
 		{
-			key: WidgetKeys.DurationNano,
+			id: '',
-			dataType: DataType.FLOAT64,
+			key: {
-			isColumn: true,
+				key: isSpanMetricEnable ? WidgetKeys.Service_name : WidgetKeys.ServiceName,
-			type: MetricsType.Tag,
+				dataType: DataType.STRING,
+				type: isSpanMetricEnable ? MetricsType.Resource : MetricsType.Tag,
+				isColumn: !isSpanMetricEnable,
+			},
+			op: isSpanMetricEnable ? OPERATORS.IN : OPERATORS['='],
+			value: isSpanMetricEnable ? [servicename] : servicename,
 		},
 		{
-			key: WidgetKeys.DurationNano,
+			id: '',
-			dataType: DataType.FLOAT64,
+			key: {
-			isColumn: true,
+				dataType: DataType.STRING,
-			type: MetricsType.Tag,
+				isColumn: !isSpanMetricEnable,
-		},
+				key: isSpanMetricEnable ? WidgetKeys.Operation : WidgetKeys.Name,
-		{
+				type: MetricsType.Tag,
-			key: WidgetKeys.DurationNano,
+			},
-			dataType: DataType.FLOAT64,
+			op: OPERATORS.IN.toLowerCase(), // TODO: need to remove toLowerCase() this once backend is changed
-			isColumn: true,
+			value: [...topLevelOperationsRoute],
-			type: MetricsType.Tag,
 		},
+		...tagFilterItems,
 	];
 
-	const filterItems: TagFilterItem[][] = [
+	const filterItems: TagFilterItem[][] = Array(3).fill([...filterItem]);
-		[
-			{
-				id: '',
-				key: {
-					key: WidgetKeys.ServiceName,
-					dataType: DataType.STRING,
-					type: MetricsType.Tag,
-					isColumn: true,
-				},
-				op: OPERATORS['='],
-				value: `${servicename}`,
-			},
-			...tagFilterItems,
-		],
-		[
-			{
-				id: '',
-				key: {
-					key: WidgetKeys.ServiceName,
-					dataType: DataType.STRING,
-					type: MetricsType.Tag,
-					isColumn: true,
-				},
-				op: OPERATORS['='],
-				value: `${servicename}`,
-			},
-			...tagFilterItems,
-		],
-		[
-			{
-				id: '',
-				key: {
-					key: WidgetKeys.ServiceName,
-					dataType: DataType.STRING,
-					type: MetricsType.Tag,
-					isColumn: true,
-				},
-				op: OPERATORS['='],
-				value: `${servicename}`,
-			},
-			...tagFilterItems,
-		],
-	];
 
 	return getQueryBuilderQueries({
 		autocompleteData,
-		legends: LETENCY_LEGENDS_AGGREGATEOPERATOR,
+		legends: LATENCY_AGGREGATEOPERATOR,
 		filterItems,
-		aggregateOperator: LETENCY_LEGENDS_AGGREGATEOPERATOR,
+		aggregateOperator: isSpanMetricEnable
-		dataSource: DataSource.TRACES,
+			? LATENCY_AGGREGATEOPERATOR_SPAN_METRICS
+			: LATENCY_AGGREGATEOPERATOR,
+		dataSource: isSpanMetricEnable ? DataSource.METRICS : DataSource.TRACES,
 		queryNameAndExpression: QUERYNAME_AND_EXPRESSION,
 	});
 };
@@ -250,4 +230,6 @@ export interface OperationPerSecProps {
 export interface LatencyProps {
 	servicename: IServiceName['servicename'];
 	tagFilterItems: TagFilterItem[];
+	isSpanMetricEnable?: boolean;
+	topLevelOperationsRoute: string[];
 }

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -97,6 +97,11 @@ function Application(): JSX.Element {
 		[queries],
 	);
 
+	const topLevelOperationsRoute = useMemo(
+		() => (topLevelOperations ? topLevelOperations[servicename || ''] : []),
+		[servicename, topLevelOperations],
+	);
+
 	const operationPerSecWidget = useMemo(
 		() =>
 			getWidgetQueryBuilder(
@@ -106,16 +111,14 @@ function Application(): JSX.Element {
 					builder: operationPerSec({
 						servicename,
 						tagFilterItems,
-						topLevelOperations: topLevelOperations
+						topLevelOperations: topLevelOperationsRoute,
-							? topLevelOperations[servicename || '']
-							: [],
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
 				},
 				GraphTitle.RATE_PER_OPS,
 			),
-		[servicename, topLevelOperations, tagFilterItems],
+		[servicename, tagFilterItems, topLevelOperationsRoute],
 	);
 
 	const errorPercentageWidget = useMemo(
@@ -127,16 +130,14 @@ function Application(): JSX.Element {
 					builder: errorPercentage({
 						servicename,
 						tagFilterItems,
-						topLevelOperations: topLevelOperations
+						topLevelOperations: topLevelOperationsRoute,
-							? topLevelOperations[servicename || '']
-							: [],
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
 				},
 				GraphTitle.ERROR_PERCENTAGE,
 			),
-		[servicename, topLevelOperations, tagFilterItems],
+		[servicename, tagFilterItems, topLevelOperationsRoute],
 	);
 
 	const onDragSelect = useCallback(
@@ -181,6 +182,7 @@ function Application(): JSX.Element {
 						selectedTimeStamp={selectedTimeStamp}
 						selectedTraceTags={selectedTraceTags}
 						tagFilterItems={tagFilterItems}
+						topLevelOperationsRoute={topLevelOperationsRoute}
 					/>
 				</Col>
 

frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx

@@ -1,8 +1,10 @@
+import { FeatureKeys } from 'constants/features';
 import Graph from 'container/GridGraphLayout/Graph/';
 import { GraphTitle } from 'container/MetricsApplication/constant';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { latency } from 'container/MetricsApplication/MetricsPageQueries/OverviewQueries';
 import { Card, GraphContainer } from 'container/MetricsApplication/styles';
+import useFeatureFlag from 'hooks/useFeatureFlag';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
@@ -20,9 +22,13 @@ function ServiceOverview({
 	selectedTraceTags,
 	selectedTimeStamp,
 	tagFilterItems,
+	topLevelOperationsRoute,
 }: ServiceOverviewProps): JSX.Element {
 	const { servicename } = useParams<IServiceName>();
 
+	const isSpanMetricEnable = useFeatureFlag(FeatureKeys.USE_SPAN_METRICS)
+		?.active;
+
 	const latencyWidget = useMemo(
 		() =>
 			getWidgetQueryBuilder(
@@ -32,13 +38,15 @@ function ServiceOverview({
 					builder: latency({
 						servicename,
 						tagFilterItems,
+						isSpanMetricEnable,
+						topLevelOperationsRoute,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
 				},
 				GraphTitle.LATENCY,
 			),
-		[servicename, tagFilterItems],
+		[servicename, tagFilterItems, isSpanMetricEnable, topLevelOperationsRoute],
 	);
 
 	return (
@@ -79,6 +87,7 @@ interface ServiceOverviewProps {
 	onDragSelect: (start: number, end: number) => void;
 	handleGraphClick: (type: string) => ClickHandlerType;
 	tagFilterItems: TagFilterItem[];
+	topLevelOperationsRoute: string[];
 }
 
 export default ServiceOverview;

frontend/src/container/MetricsApplication/constant.ts

@@ -3,7 +3,12 @@ export const legend = {
 };
 
 export const QUERYNAME_AND_EXPRESSION = ['A', 'B', 'C'];
-export const LETENCY_LEGENDS_AGGREGATEOPERATOR = ['p50', 'p90', 'p99'];
+export const LATENCY_AGGREGATEOPERATOR = ['p50', 'p90', 'p99'];
+export const LATENCY_AGGREGATEOPERATOR_SPAN_METRICS = [
+	'hist_quantile_50',
+	'hist_quantile_90',
+	'hist_quantile_99',
+];
 export const OPERATION_LEGENDS = ['Operations'];
 
 export enum FORMULA {
@@ -35,6 +40,7 @@ export enum MetricsType {
 }
 
 export enum WidgetKeys {
+	Name = 'name',
 	Address = 'address',
 	DurationNano = 'durationNano',
 	StatusCode = 'status_code',
@@ -50,4 +56,5 @@ export enum WidgetKeys {
 	SignozCallsTotal = 'signoz_calls_total',
 	SignozExternalCallLatencyCount = 'signoz_external_call_latency_count',
 	SignozExternalCallLatencySum = 'signoz_external_call_latency_sum',
+	Signoz_latency_bucket = 'signoz_latency_bucket',
 }