chore: update APM metrics to use v4 query range (#4638)

frontend/src/api/metrics/getQueryRange.ts

@@ -1,6 +1,7 @@
 import { ApiV3Instance, ApiV4Instance } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
 	MetricRangePayloadV3,
@@ -13,7 +14,7 @@ export const getMetricsQueryRange = async (
 	signal: AbortSignal,
 ): Promise<SuccessResponse<MetricRangePayloadV3> | ErrorResponse> => {
 	try {
-		if (version && version === 'v4') {
+		if (version && version === ENTITY_VERSION_V4) {
 			const response = await ApiV4Instance.post('/query_range', props, { signal });
 
 			return {

frontend/src/constants/app.ts

@@ -15,3 +15,4 @@ export const SIGNOZ_UPGRADE_PLAN_URL =
 export const DASHBOARD_TIME_IN_DURATION = 'refreshInterval';
 
 export const DEFAULT_ENTITY_VERSION = 'v3';
+export const ENTITY_VERSION_V4 = 'v4';

frontend/src/container/CreateAlertRule/defaults.ts

@@ -1,3 +1,4 @@
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import {
 	initialQueryBuilderFormValuesMap,
 	initialQueryPromQLData,
@@ -24,7 +25,7 @@ const defaultAnnotations = {
 
 export const alertDefaults: AlertDef = {
 	alertType: AlertTypes.METRICS_BASED_ALERT,
-	version: 'v4',
+	version: ENTITY_VERSION_V4,
 	condition: {
 		compositeQuery: {
 			builderQueries: {

frontend/src/container/CreateAlertRule/index.tsx

@@ -1,4 +1,5 @@
 import { Form, Row } from 'antd';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import FormAlertRules from 'container/FormAlertRules';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useEffect, useState } from 'react';
@@ -44,7 +45,7 @@ function CreateRules(): JSX.Element {
 			default:
 				setInitValues({
 					...alertDefaults,
-					version: version || 'v4',
+					version: version || ENTITY_VERSION_V4,
 				});
 		}
 	};

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -2,6 +2,7 @@ import './QuerySection.styles.scss';
 
 import { Button, Tabs, Tooltip } from 'antd';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
 import { QueryBuilder } from 'container/QueryBuilder';
@@ -55,7 +56,8 @@ function QuerySection({
 				initialDataSource: ALERTS_DATA_SOURCE_MAP[alertType],
 			}}
 			showFunctions={
-				alertType === AlertTypes.METRICS_BASED_ALERT && alertDef.version === 'v4'
+				alertType === AlertTypes.METRICS_BASED_ALERT &&
+				alertDef.version === ENTITY_VERSION_V4
 			}
 			version={alertDef.version || 'v3'}
 		/>

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -40,6 +40,7 @@ function FullView({
 	fullViewOptions = true,
 	onClickHandler,
 	name,
+	version,
 	originalName,
 	yAxisUnit,
 	options,
@@ -97,7 +98,7 @@ function FullView({
 			globalSelectedInterval: globalSelectedTime,
 			variables: getDashboardVariables(selectedDashboard?.data.variables),
 		},
-		selectedDashboard?.data?.version || DEFAULT_ENTITY_VERSION,
+		selectedDashboard?.data?.version || version || DEFAULT_ENTITY_VERSION,
 		{
 			queryKey: `FullViewGetMetricsQueryRange-${selectedTime.enum}-${globalSelectedTime}-${widget.id}`,
 			enabled: !isDependedDataLoaded && widget.panelTypes !== PANEL_TYPES.LIST, // Internally both the list view panel has it's own query range api call, so we don't need to call it again

frontend/src/container/GridCardLayout/GridCard/FullView/types.ts

@@ -50,6 +50,7 @@ export interface FullViewProps {
 	fullViewOptions?: boolean;
 	onClickHandler?: OnClickPluginOpts['onClick'];
 	name: string;
+	version?: string;
 	originalName: string;
 	options: uPlot.Options;
 	yAxisUnit?: string;

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx

@@ -39,6 +39,7 @@ function WidgetGraphComponent({
 	queryResponse,
 	errorMessage,
 	name,
+	version,
 	threshold,
 	headerMenuList,
 	isWarning,
@@ -283,6 +284,7 @@ function WidgetGraphComponent({
 			>
 				<FullView
 					name={`${name}expanded`}
+					version={version}
 					originalName={name}
 					widget={widget}
 					yAxisUnit={widget.yAxisUnit}

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -237,6 +237,7 @@ function GridCardGraph({
 					errorMessage={errorMessage}
 					isWarning={false}
 					name={name}
+					version={version}
 					onDragSelect={onDragSelect}
 					threshold={threshold}
 					headerMenuList={menuList}

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -23,6 +23,7 @@ export interface WidgetGraphComponentProps extends UplotProps {
 	>;
 	errorMessage: string | undefined;
 	name: string;
+	version?: string;
 	onDragSelect: (start: number, end: number) => void;
 	onClickHandler?: OnClickPluginOpts['onClick'];
 	threshold?: ReactNode;

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -10,6 +10,7 @@ import {
 import DynamicColumnTable from 'components/ResizeTable/DynamicColumnTable';
 import LabelColumn from 'components/TableRenderer/LabelColumn';
 import TextToolTip from 'components/TextToolTip';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import ROUTES from 'constants/routes';
 import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
@@ -210,7 +211,7 @@ function DashboardsList(): JSX.Element {
 					ns: 'dashboard',
 				}),
 				uploadedGrafana: false,
-				version: 'v4',
+				version: ENTITY_VERSION_V4,
 			});
 
 			if (response.statusCode === 200) {

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

@@ -113,9 +113,13 @@ export const databaseCallsAvgDuration = ({
 	const disabled = [true, true];
 	const legendFormulas = ['Average Duration'];
 	const expressions = [FORMULA.DATABASE_CALLS_AVG_DURATION];
-	const aggregateOperators = [
+	const timeAggregateOperators = [
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
+	];
+	const spaceAggregateOperators = [
+		MetricAggregateOperator.SUM,
+		MetricAggregateOperator.SUM,
 	];
 	const dataSource = DataSource.METRICS;
 
@@ -126,7 +130,8 @@ export const databaseCallsAvgDuration = ({
 		disabled,
 		expressions,
 		legendFormulas,
-		aggregateOperators,
+		timeAggregateOperators,
+		spaceAggregateOperators,
 		dataSource,
 	});
 };

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

@@ -93,9 +93,13 @@ export const externalCallErrorPercent = ({
 
 	const additionalItems = [additionalItemsA, additionalItemsB];
 
-	const aggregateOperators = [
+	const timeAggregateOperators = [
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
+	];
+	const spaceAggregateOperators = [
+		MetricAggregateOperator.SUM,
+		MetricAggregateOperator.SUM,
 	];
 	const legends = [legend, legend];
 	const dataSource = DataSource.METRICS;
@@ -108,7 +112,8 @@ export const externalCallErrorPercent = ({
 		disabled,
 		expressions,
 		legendFormulas,
-		aggregateOperators,
+		timeAggregateOperators,
+		spaceAggregateOperators,
 		dataSource,
 	});
 };
@@ -152,9 +157,13 @@ export const externalCallDuration = ({
 
 	const additionalItems = [additionalItemsA, additionalItemsA];
 	const legends = [legend, legend];
-	const aggregateOperators = [
+	const timeAggregateOperators = [
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
+	];
+	const spaceAggregateOperators = [
+		MetricAggregateOperator.SUM,
+		MetricAggregateOperator.SUM,
 	];
 	const dataSource = DataSource.METRICS;
 
@@ -165,7 +174,8 @@ export const externalCallDuration = ({
 		disabled,
 		expressions,
 		legendFormulas,
-		aggregateOperators,
+		timeAggregateOperators,
+		spaceAggregateOperators,
 		dataSource,
 	});
 };
@@ -250,9 +260,13 @@ export const externalCallDurationByAddress = ({
 	const autocompleteData = [autocompleteDataA, autocompleteDataB];
 	const additionalItems = [additionalItemsA, additionalItemsA];
 	const legends = [legend, legend];
-	const aggregateOperators = [
+	const timeAggregateOperators = [
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
+	];
+	const spaceAggregateOperators = [
+		MetricAggregateOperator.SUM,
+		MetricAggregateOperator.SUM,
 	];
 	const dataSource = DataSource.METRICS;
 
@@ -264,7 +278,8 @@ export const externalCallDurationByAddress = ({
 		disabled,
 		expressions,
 		legendFormulas,
-		aggregateOperators,
+		timeAggregateOperators,
+		spaceAggregateOperators,
 		dataSource,
 	});
 };

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

@@ -9,6 +9,7 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import {
 	MetricAggregateOperator,
 	QueryBuilderData,
+	Temporality,
 } from 'types/common/queryBuilder';
 
 import {
@@ -69,7 +70,8 @@ export const getQueryBuilderQuerieswithFormula = ({
 	disabled,
 	expressions,
 	legendFormulas,
-	aggregateOperators,
+	timeAggregateOperators,
+	spaceAggregateOperators,
 	dataSource,
 }: BuilderQuerieswithFormulaProps): QueryBuilderData => ({
 	queryFormulas: expressions.map((expression, index) => ({
@@ -79,7 +81,9 @@ export const getQueryBuilderQuerieswithFormula = ({
 	})),
 	queryData: autocompleteData.map((_, index) => ({
 		...initialQueryBuilderFormValuesMap.metrics,
-		aggregateOperator: aggregateOperators[index],
+		timeAggregation: timeAggregateOperators[index],
+		spaceAggregation: spaceAggregateOperators[index],
+		temporality: Temporality.Delta,
 		disabled: disabled[index],
 		groupBy,
 		legend: legends[index],

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

@@ -250,11 +250,16 @@ export const apDexTracesQueryBuilderQueries = ({
 	const disabled = Array(3).fill(true);
 	const expressions = [FORMULA.APDEX_TRACES];
 	const legendFormulas = [GraphTitle.APDEX];
-	const aggregateOperators = [
+	const timeAggregateOperators = [
 		MetricAggregateOperator.COUNT,
 		MetricAggregateOperator.COUNT,
 		MetricAggregateOperator.COUNT,
 	];
+	const spaceAggregateOperators = [
+		MetricAggregateOperator.EMPTY,
+		MetricAggregateOperator.EMPTY,
+		MetricAggregateOperator.EMPTY,
+	];
 	const dataSource = DataSource.TRACES;
 
 	return getQueryBuilderQuerieswithFormula({
@@ -264,7 +269,8 @@ export const apDexTracesQueryBuilderQueries = ({
 		disabled,
 		expressions,
 		legendFormulas,
-		aggregateOperators,
+		timeAggregateOperators,
+		spaceAggregateOperators,
 		dataSource,
 	});
 };
@@ -433,10 +439,16 @@ export const apDexMetricsQueryBuilderQueries = ({
 		? [FORMULA.APDEX_DELTA_SPAN_METRICS]
 		: [FORMULA.APDEX_CUMULATIVE_SPAN_METRICS];
 	const legendFormulas = [GraphTitle.APDEX];
-	const aggregateOperators = [
+	const timeAggregateOperators = [
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
+	];
+
+	const spaceAggregateOperators = [
+		MetricAggregateOperator.SUM,
+		MetricAggregateOperator.SUM,
+		MetricAggregateOperator.SUM,
 	];
 	const dataSource = DataSource.METRICS;
 
@@ -447,7 +459,8 @@ export const apDexMetricsQueryBuilderQueries = ({
 		disabled,
 		expressions,
 		legendFormulas,
-		aggregateOperators,
+		timeAggregateOperators,
+		spaceAggregateOperators,
 		dataSource,
 	});
 };
@@ -593,9 +606,13 @@ export const errorPercentage = ({
 	const disabled = [true, true];
 	const expressions = [FORMULA.ERROR_PERCENTAGE];
 	const legendFormulas = [GraphTitle.ERROR_PERCENTAGE];
-	const aggregateOperators = [
+	const timeAggregateOperators = [
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
+	];
+	const spaceAggregateOperators = [
+		MetricAggregateOperator.SUM,
+		MetricAggregateOperator.SUM,
 	];
 	const dataSource = DataSource.METRICS;
 
@@ -606,7 +623,8 @@ export const errorPercentage = ({
 		disabled,
 		expressions,
 		legendFormulas,
-		aggregateOperators,
+		timeAggregateOperators,
+		spaceAggregateOperators,
 		dataSource,
 	});
 };

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

@@ -118,13 +118,21 @@ export const topOperationQueries = ({
 		KeyOperationTableHeader.ERROR_RATE,
 		KeyOperationTableHeader.NUM_OF_CALLS,
 	];
-	const aggregateOperators = [
+	const timeAggregateOperators = [
-		MetricAggregateOperator.HIST_QUANTILE_50,
+		MetricAggregateOperator.EMPTY,
-		MetricAggregateOperator.HIST_QUANTILE_90,
+		MetricAggregateOperator.EMPTY,
-		MetricAggregateOperator.HIST_QUANTILE_99,
+		MetricAggregateOperator.EMPTY,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
+	];
+	const spaceAggregateOperators = [
+		MetricAggregateOperator.P50,
+		MetricAggregateOperator.P90,
+		MetricAggregateOperator.P99,
+		MetricAggregateOperator.SUM,
+		MetricAggregateOperator.SUM,
+		MetricAggregateOperator.SUM,
 	];
 	const expressions = ['D*100/E'];
 	const legendFormulas = [GraphTitle.ERROR_PERCENTAGE];
@@ -135,7 +143,8 @@ export const topOperationQueries = ({
 		additionalItems,
 		disabled,
 		legends,
-		aggregateOperators,
+		timeAggregateOperators,
+		spaceAggregateOperators,
 		expressions,
 		legendFormulas,
 		dataSource,

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

@@ -1,4 +1,5 @@
 import { Col } from 'antd';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Graph from 'container/GridCardLayout/GridCard';
 import {
@@ -121,6 +122,7 @@ function DBCall(): JSX.Element {
 									'database_call_rps',
 								);
 							}}
+							version={ENTITY_VERSION_V4}
 						/>
 					</GraphContainer>
 				</Card>
@@ -156,6 +158,7 @@ function DBCall(): JSX.Element {
 									'database_call_avg_duration',
 								);
 							}}
+							version={ENTITY_VERSION_V4}
 						/>
 					</GraphContainer>
 				</Card>

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

@@ -1,4 +1,5 @@
 import { Col } from 'antd';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Graph from 'container/GridCardLayout/GridCard';
 import {
@@ -165,6 +166,7 @@ function External(): JSX.Element {
 										'external_call_error_percentage',
 									);
 								}}
+								version={ENTITY_VERSION_V4}
 							/>
 						</GraphContainer>
 					</Card>
@@ -201,6 +203,7 @@ function External(): JSX.Element {
 										'external_call_duration',
 									);
 								}}
+								version={ENTITY_VERSION_V4}
 							/>
 						</GraphContainer>
 					</Card>
@@ -238,6 +241,7 @@ function External(): JSX.Element {
 										'external_call_rps_by_address',
 									)
 								}
+								version={ENTITY_VERSION_V4}
 							/>
 						</GraphContainer>
 					</Card>
@@ -274,6 +278,7 @@ function External(): JSX.Element {
 										'external_call_duration_by_address',
 									);
 								}}
+								version={ENTITY_VERSION_V4}
 							/>
 						</GraphContainer>
 					</Card>

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

@@ -5,6 +5,7 @@ import {
 	apDexToolTipUrl,
 	apDexToolTipUrlText,
 } from 'constants/apDex';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Graph from 'container/GridCardLayout/GridCard';
 import DisplayThreshold from 'container/GridCardLayout/WidgetHeader/DisplayThreshold';
@@ -94,6 +95,7 @@ function ApDexMetrics({
 			onClickHandler={handleGraphClick('ApDex')}
 			threshold={threshold}
 			isQueryEnabled={isQueryEnabled}
+			version={ENTITY_VERSION_V4}
 		/>
 	);
 }

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

@@ -1,5 +1,6 @@
 // This component is not been used in the application as we support only metrics for ApDex as of now.
 // This component is been kept for future reference.
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Graph from 'container/GridCardLayout/GridCard';
 import { GraphTitle } from 'container/MetricsApplication/constant';
@@ -54,6 +55,7 @@ function ApDexTraces({
 			onClickHandler={handleGraphClick('ApDex')}
 			threshold={thresholdValue}
 			isQueryEnabled={isQueryEnabled}
+			version={ENTITY_VERSION_V4}
 		/>
 	);
 }

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

@@ -1,3 +1,4 @@
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Graph from 'container/GridCardLayout/GridCard';
@@ -93,6 +94,7 @@ function ServiceOverview({
 						onClickHandler={handleGraphClick('Service')}
 						isQueryEnabled={isQueryEnabled}
 						fillSpans={false}
+						version={ENTITY_VERSION_V4}
 					/>
 				</GraphContainer>
 			</Card>

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

@@ -1,6 +1,7 @@
 import { Typography } from 'antd';
 import axios from 'axios';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import Graph from 'container/GridCardLayout/GridCard';
 import { Card, GraphContainer } from 'container/MetricsApplication/styles';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -33,6 +34,7 @@ function TopLevelOperation({
 						onClickHandler={handleGraphClick(opName)}
 						onDragSelect={onDragSelect}
 						isQueryEnabled={!topLevelOperationsIsLoading}
+						version={ENTITY_VERSION_V4}
 					/>
 				</GraphContainer>
 			)}

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

@@ -1,4 +1,4 @@
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { topOperationMetricsDownloadOptions } from 'container/MetricsApplication/constant';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
@@ -68,7 +68,7 @@ function TopOperationMetrics(): JSX.Element {
 			globalSelectedInterval,
 			variables: {},
 		},
-		DEFAULT_ENTITY_VERSION,
+		ENTITY_VERSION_V4,
 		{
 			queryKey: [
 				`GetMetricsQueryRange-${keyOperationWidget?.timePreferance}-${globalSelectedInterval}-${keyOperationWidget?.id}`,

frontend/src/container/MetricsApplication/Tabs/types.ts

@@ -39,7 +39,8 @@ export interface BuilderQuerieswithFormulaProps {
 	expressions: string[];
 	legendFormulas: string[];
 	additionalItems: TagFilterItem[][];
-	aggregateOperators: MetricAggregateOperator[];
+	timeAggregateOperators: MetricAggregateOperator[];
+	spaceAggregateOperators: MetricAggregateOperator[];
 	dataSource: DataSource;
 }
 

frontend/src/container/QueryBuilder/components/Query/Query.tsx

@@ -2,6 +2,7 @@
 import './Query.styles.scss';
 
 import { Col, Input, Row } from 'antd';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 // ** Constants
 import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -316,13 +317,15 @@ export const Query = memo(function Query({
 	const disableOperatorSelector =
 		!query?.aggregateAttribute.key || query?.aggregateAttribute.key === '';
 
-	const isVersionV4 = version && version === 'v4';
+	const isVersionV4 = version && version === ENTITY_VERSION_V4;
 
 	return (
 		<Row gutter={[0, 12]}>
 			<QBEntityOptions
 				isMetricsDataSource={isMetricsDataSource}
-				showFunctions={(version && version === 'v4') || showFunctions || false}
+				showFunctions={
+					(version && version === ENTITY_VERSION_V4) || showFunctions || false
+				}
 				isCollapsed={isCollapse}
 				entityType="query"
 				entityData={query}
@@ -375,7 +378,7 @@ export const Query = memo(function Query({
 										</Col>
 
 										{version &&
-											version === 'v4' &&
+											version === ENTITY_VERSION_V4 &&
 											operators &&
 											Array.isArray(operators) &&
 											operators.length > 0 && (

frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx

@@ -1,4 +1,5 @@
 import { Select } from 'antd';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 // ** Constants
 import { HAVING_OPERATORS, initialHavingValues } from 'constants/queryBuilder';
 import { HavingFilterTag } from 'container/QueryBuilder/components';
@@ -54,7 +55,7 @@ export function HavingFilter({
 			query &&
 			query.dataSource === DataSource.METRICS &&
 			query.spaceAggregation &&
-			entityVersion === 'v4'
+			entityVersion === ENTITY_VERSION_V4
 		) {
 			return `${query.spaceAggregation.toUpperCase()}(${aggregatorAttribute})`;
 		}

frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx

@@ -1,7 +1,7 @@
 import { WarningFilled } from '@ant-design/icons';
 import { Flex, Typography } from 'antd';
 import { ResizeTable } from 'components/ResizeTable';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { MAX_RPS_LIMIT } from 'constants/global';
 import ResourceAttributesFilter from 'container/ResourceAttributesFilter';
 import { useGetQueriesRange } from 'hooks/queryBuilder/useGetQueriesRange';
@@ -36,26 +36,22 @@ function ServiceMetricTable({
 	const { data: licenseData, isFetching } = useLicense();
 	const isCloudUserVal = isCloudUser();
 
-	const queries = useGetQueriesRange(
+	const queries = useGetQueriesRange(queryRangeRequestData, ENTITY_VERSION_V4, {
-		queryRangeRequestData,
+		queryKey: [
-		DEFAULT_ENTITY_VERSION,
+			`GetMetricsQueryRange-${queryRangeRequestData[0].selectedTime}-${globalSelectedInterval}`,
-		{
+			maxTime,
-			queryKey: [
+			minTime,
-				`GetMetricsQueryRange-${queryRangeRequestData[0].selectedTime}-${globalSelectedInterval}`,
+			globalSelectedInterval,
-				maxTime,
+		],
-				minTime,
+		keepPreviousData: true,
-				globalSelectedInterval,
+		enabled: true,
-			],
+		refetchOnMount: false,
-			keepPreviousData: true,
+		onError: (error) => {
-			enabled: true,
+			notifications.error({
-			refetchOnMount: false,
+				message: error.message,
-			onError: (error) => {
+			});
-				notifications.error({
-					message: error.message,
-				});
-			},
 		},
-	);
+	});
 
 	const isLoading = queries.some((query) => query.isLoading);
 	const services: ServicesList[] = useMemo(

frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricsQuery.ts

@@ -166,11 +166,17 @@ export const serviceMetricsQuery = (
 		operationPrSecondAdditionalItems,
 	];
 
-	const aggregateOperators = [
+	const timeAggregateOperators = [
-		MetricAggregateOperator.HIST_QUANTILE_99,
+		MetricAggregateOperator.EMPTY,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
-		MetricAggregateOperator.SUM_RATE,
+		MetricAggregateOperator.RATE,
+	];
+	const spaceAggregateOperators = [
+		MetricAggregateOperator.P99,
+		MetricAggregateOperator.SUM,
+		MetricAggregateOperator.SUM,
+		MetricAggregateOperator.SUM,
 	];
 
 	const disabled = [false, true, true, false];
@@ -201,7 +207,8 @@ export const serviceMetricsQuery = (
 		additionalItems,
 		disabled,
 		legends,
-		aggregateOperators,
+		timeAggregateOperators,
+		spaceAggregateOperators,
 		expressions,
 		legendFormulas,
 		groupBy,

frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts

@@ -1,3 +1,4 @@
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { LEGEND } from 'constants/global';
 import {
 	ATTRIBUTE_TYPES,
@@ -183,7 +184,10 @@ export const useQueryOperations: UseQueryOperations = ({
 				having: [],
 			};
 
-			if (newQuery.dataSource === DataSource.METRICS && entityVersion === 'v4') {
+			if (
+				newQuery.dataSource === DataSource.METRICS &&
+				entityVersion === ENTITY_VERSION_V4
+			) {
 				handleMetricAggregateAtributeTypes(newQuery.aggregateAttribute);
 
 				if (newQuery.aggregateAttribute.type === ATTRIBUTE_TYPES.SUM) {
@@ -310,7 +314,7 @@ export const useQueryOperations: UseQueryOperations = ({
 			dataSource === DataSource.METRICS &&
 			query &&
 			query.aggregateAttribute &&
-			entityVersion === 'v4'
+			entityVersion === ENTITY_VERSION_V4
 		) {
 			handleMetricAggregateAtributeTypes(query.aggregateAttribute);
 		} else {

frontend/src/mocks-server/handlers.ts

@@ -11,6 +11,10 @@ export const handlers = [
 		res(ctx.status(200), ctx.json(queryRangeSuccessResponse)),
 	),
 
+	rest.post('http://localhost/api/v4/query_range', (req, res, ctx) =>
+		res(ctx.status(200), ctx.json(queryRangeSuccessResponse)),
+	),
+
 	rest.post('http://localhost/api/v1/services', (req, res, ctx) =>
 		res(ctx.status(200), ctx.json(serviceSuccessResponse)),
 	),

frontend/src/types/api/queryBuilder/queryBuilderData.ts

@@ -60,6 +60,7 @@ export type IBuilderQuery = {
 	aggregateAttribute: BaseAutocompleteData;
 	timeAggregation: string;
 	spaceAggregation?: string;
+	temporality?: string;
 	functions: QueryFunctionProps[];
 	filters: TagFilter;
 	groupBy: BaseAutocompleteData[];

frontend/src/types/common/queryBuilder.ts

@@ -61,7 +61,14 @@ export enum BoolOperators {
 	COUNT_DISTINCT = 'count_distinct',
 }
 
+export enum Temporality {
+	Unspecified = 'Unspecified',
+	Delta = 'Delta',
+	Cumulative = 'Cumulative',
+}
+
 export enum MetricAggregateOperator {
+	EMPTY = '', // used as time aggregator for histograms
 	NOOP = 'noop',
 	COUNT = 'count',
 	COUNT_DISTINCT = 'count_distinct',

pkg/query-service/app/formula.go

@@ -120,6 +120,13 @@ func joinAndCalculate(results []*v3.Result, uniqueLabelSet map[string]string, ex
 		for queryName, series := range seriesMap {
 			values[queryName] = series[timestamp]
 		}
+
+		// If the value is not present in the values map, set it to 0
+		for _, v := range expression.Vars() {
+			if _, ok := values[v]; !ok {
+				values[v] = 0
+			}
+		}
 		newValue, err := expression.Evaluate(values)
 		if err != nil {
 			return nil, err

pkg/query-service/app/parser_test.go

@@ -492,23 +492,23 @@ func TestParseQueryRangeParamsCompositeQuery(t *testing.T) {
 			expectErr: true,
 			errMsg:    "data source is invalid",
 		},
-		{
+		// {
-			desc: "invalid aggregate operator for builder query",
+		// 	desc: "invalid aggregate operator for builder query",
-			compositeQuery: v3.CompositeQuery{
+		// 	compositeQuery: v3.CompositeQuery{
-				PanelType: v3.PanelTypeGraph,
+		// 		PanelType: v3.PanelTypeGraph,
-				QueryType: v3.QueryTypeBuilder,
+		// 		QueryType: v3.QueryTypeBuilder,
-				BuilderQueries: map[string]*v3.BuilderQuery{
+		// 		BuilderQueries: map[string]*v3.BuilderQuery{
-					"A": {
+		// 			"A": {
-						QueryName:         "A",
+		// 				QueryName:         "A",
-						DataSource:        "metrics",
+		// 				DataSource:        "metrics",
-						AggregateOperator: "invalid",
+		// 				AggregateOperator: "invalid",
-						Expression:        "A",
+		// 				Expression:        "A",
-					},
+		// 			},
-				},
+		// 		},
-			},
+		// 	},
-			expectErr: true,
+		// 	expectErr: true,
-			errMsg:    "aggregate operator is invalid",
+		// 	errMsg:    "aggregate operator is invalid",
-		},
+		// },
 		{
 			desc: "invalid aggregate attribute for builder query",
 			compositeQuery: v3.CompositeQuery{

pkg/query-service/model/v3/v3.go

@@ -654,22 +654,22 @@ func (b *BuilderQuery) Validate() error {
 		}
 		if b.DataSource == DataSourceMetrics {
 			// if AggregateOperator is specified, then the request is using v3 payload
-			if b.AggregateOperator != "" && b.SpaceAggregation == SpaceAggregationUnspecified {
+			// if b.AggregateOperator != "" && b.SpaceAggregation == SpaceAggregationUnspecified {
-				if err := b.AggregateOperator.Validate(); err != nil {
+			// 	if err := b.AggregateOperator.Validate(); err != nil {
-					return fmt.Errorf("aggregate operator is invalid: %w", err)
+			// 		return fmt.Errorf("aggregate operator is invalid: %w", err)
-				}
+			// 	}
-			} else {
+			// } else {
-				// the time aggregation is not needed for percentile operators
+			// 	// the time aggregation is not needed for percentile operators
-				if !IsPercentileOperator(b.SpaceAggregation) {
+			// 	if !IsPercentileOperator(b.SpaceAggregation) {
-					if err := b.TimeAggregation.Validate(); err != nil {
+			// 		if err := b.TimeAggregation.Validate(); err != nil {
-						return fmt.Errorf("time aggregation is invalid: %w", err)
+			// 			return fmt.Errorf("time aggregation is invalid: %w", err)
-					}
+			// 		}
-				}
+			// 	}
 
-				if err := b.SpaceAggregation.Validate(); err != nil {
+			// 	if err := b.SpaceAggregation.Validate(); err != nil {
-					return fmt.Errorf("space aggregation is invalid: %w", err)
+			// 		return fmt.Errorf("space aggregation is invalid: %w", err)
-				}
+			// 	}
-			}
+			// }
 		} else {
 			if err := b.AggregateOperator.Validate(); err != nil {
 				return fmt.Errorf("aggregate operator is invalid: %w", err)