feat: update query builder to support spatial aggregations and functions

frontend/public/locales/en-GB/dashboard.json

@@ -25,5 +25,5 @@
 	"dashboard_unsave_changes": "There are unsaved changes in the Query builder, please stage and run the query or the changes will be lost. Press OK to discard.",
 	"dashboard_save_changes": "Your graph built with {{queryTag}} query will be saved. Press OK to confirm.",
 	"your_graph_build_with": "Your graph built with",
-	"dashboar_ok_confirm": "query will be saved. Press OK to confirm."
+	"dashboard_ok_confirm": "query will be saved. Press OK to confirm."
 }

frontend/public/locales/en/dashboard.json

@@ -28,5 +28,5 @@
 	"dashboard_unsave_changes": "There are unsaved changes in the Query builder, please stage and run the query or the changes will be lost. Press OK to discard.",
 	"dashboard_save_changes": "Your graph built with {{queryTag}} query will be saved. Press OK to confirm.",
 	"your_graph_build_with": "Your graph built with",
-	"dashboar_ok_confirm": "query will be saved. Press OK to confirm."
+	"dashboard_ok_confirm": "query will be saved. Press OK to confirm."
 }

frontend/src/api/apiV1.ts

@@ -2,6 +2,7 @@ const apiV1 = '/api/v1/';
 
 export const apiV2 = '/api/v2/';
 export const apiV3 = '/api/v3/';
+export const apiV4 = '/api/v4/';
 export const apiAlertManager = '/api/alertmanager';
 
 export default apiV1;

frontend/src/api/index.ts

@@ -9,7 +9,7 @@ import { ENVIRONMENT } from 'constants/env';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import store from 'store';
 
-import apiV1, { apiAlertManager, apiV2, apiV3 } from './apiV1';
+import apiV1, { apiAlertManager, apiV2, apiV3, apiV4 } from './apiV1';
 import { Logout } from './utils';
 
 const interceptorsResponse = (
@@ -114,13 +114,26 @@ ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
 export const ApiV3Instance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiV3}`,
 });
+
 ApiV3Instance.interceptors.response.use(
 	interceptorsResponse,
 	interceptorRejected,
 );
 ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
 //
 
+// axios V4
+export const ApiV4Instance = axios.create({
+	baseURL: `${ENVIRONMENT.baseURL}${apiV4}`,
+});
+
+ApiV4Instance.interceptors.response.use(
+	interceptorsResponse,
+	interceptorRejected,
+);
+ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
+//
+
 AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorsResponse,
 	interceptorRejected,

frontend/src/api/metrics/getQueryRange.ts

@@ -1,4 +1,4 @@
-import { ApiV3Instance as axios } from 'api';
+import { ApiV3Instance, ApiV4Instance } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -9,10 +9,23 @@ import {
 
 export const getMetricsQueryRange = async (
 	props: QueryRangePayload,
+	version: string,
 	signal: AbortSignal,
 ): Promise<SuccessResponse<MetricRangePayloadV3> | ErrorResponse> => {
 	try {
-		const response = await axios.post('/query_range', props, { signal });
+		if (version && version === 'v4') {
+			const response = await ApiV4Instance.post('/query_range', props, { signal });
+
+			return {
+				statusCode: 200,
+				error: null,
+				message: response.data.status,
+				payload: response.data,
+				params: props,
+			};
+		}
+
+		const response = await ApiV3Instance.post('/query_range', props, { signal });
 
 		return {
 			statusCode: 200,

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -72,8 +72,6 @@ export default function LogsFormatOptionsMenu({
 		setAddNewColumn(!addNewColumn);
 	};
 
-	// console.log('optionsMenuConfig', config);
-
 	const handleLinesPerRowChange = (maxLinesPerRow: number | null): void => {
 		if (
 			maxLinesPerRow &&
@@ -221,8 +219,6 @@ export default function LogsFormatOptionsMenu({
 											className="column-name"
 											key={value}
 											onClick={(eve): void => {
-												console.log('coluimn name', label, value);
-
 												eve.stopPropagation();
 
 												if (addColumn && addColumn?.onSelect) {

frontend/src/constants/app.ts

@@ -13,3 +13,5 @@ export const SIGNOZ_UPGRADE_PLAN_URL =
 	'https://upgrade.signoz.io/upgrade-from-app';
 
 export const DASHBOARD_TIME_IN_DURATION = 'refreshInterval';
+
+export const DEFAULT_ENTITY_VERSION = 'v3';

frontend/src/constants/queryBuilder.ts

@@ -36,6 +36,11 @@ import { v4 as uuid } from 'uuid';
 import {
 	logsAggregateOperatorOptions,
 	metricAggregateOperatorOptions,
+	metricsGaugeAggregateOperatorOptions,
+	metricsGaugeSpaceAggregateOperatorOptions,
+	metricsHistogramSpaceAggregateOperatorOptions,
+	metricsSumAggregateOperatorOptions,
+	metricsSumSpaceAggregateOperatorOptions,
 	tracesAggregateOperatorOptions,
 } from './queryBuilderOperators';
 
@@ -74,6 +79,18 @@ export const mapOfOperators = {
 	traces: tracesAggregateOperatorOptions,
 };
 
+export const metricsOperatorsByType = {
+	Sum: metricsSumAggregateOperatorOptions,
+	Gauge: metricsGaugeAggregateOperatorOptions,
+};
+
+export const metricsSpaceAggregationOperatorsByType = {
+	Sum: metricsSumSpaceAggregateOperatorOptions,
+	Gauge: metricsGaugeSpaceAggregateOperatorOptions,
+	Histogram: metricsHistogramSpaceAggregateOperatorOptions,
+	ExponentialHistogram: metricsHistogramSpaceAggregateOperatorOptions,
+};
+
 export const mapOfQueryFilters: Record<DataSource, QueryAdditionalFilter[]> = {
 	metrics: [
 		// eslint-disable-next-line sonarjs/no-duplicate-string
@@ -148,6 +165,9 @@ export const initialQueryBuilderFormValues: IBuilderQuery = {
 	queryName: createNewBuilderItemName({ existNames: [], sourceNames: alphabet }),
 	aggregateOperator: MetricAggregateOperator.COUNT,
 	aggregateAttribute: initialAutocompleteData,
+	timeAggregation: MetricAggregateOperator.RATE,
+	spaceAggregation: MetricAggregateOperator.SUM,
+	functions: [],
 	filters: { items: [], op: 'AND' },
 	expression: createNewBuilderItemName({
 		existNames: [],
@@ -160,7 +180,7 @@ export const initialQueryBuilderFormValues: IBuilderQuery = {
 	orderBy: [],
 	groupBy: [],
 	legend: '',
-	reduceTo: 'sum',
+	reduceTo: 'avg',
 };
 
 const initialQueryBuilderFormLogsValues: IBuilderQuery = {
@@ -268,6 +288,14 @@ export enum PANEL_TYPES {
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export enum ATTRIBUTE_TYPES {
+	SUM = 'Sum',
+	GAUGE = 'Gauge',
+	HISTOGRAM = 'Histogram',
+	EXPONENTIAL_HISTOGRAM = 'ExponentialHistogram',
+}
+
 export type IQueryBuilderState = 'search';
 
 export const QUERY_BUILDER_SEARCH_VALUES = {

frontend/src/constants/queryBuilderOperators.ts

@@ -302,3 +302,126 @@ export const logsAggregateOperatorOptions: SelectOption<string, string>[] = [
 		label: 'Rate_max',
 	},
 ];
+
+export const metricsSumAggregateOperatorOptions: SelectOption<
+	string,
+	string
+>[] = [
+	{
+		value: MetricAggregateOperator.RATE,
+		label: 'Rate',
+	},
+	{
+		value: MetricAggregateOperator.INCREASE,
+		label: 'Increase',
+	},
+];
+
+export const metricsGaugeAggregateOperatorOptions: SelectOption<
+	string,
+	string
+>[] = [
+	{
+		value: MetricAggregateOperator.LATEST,
+		label: 'Latest',
+	},
+	{
+		value: MetricAggregateOperator.SUM,
+		label: 'Sum',
+	},
+	{
+		value: MetricAggregateOperator.AVG,
+		label: 'Avg',
+	},
+	{
+		value: MetricAggregateOperator.MIN,
+		label: 'Min',
+	},
+	{
+		value: MetricAggregateOperator.MAX,
+		label: 'Max',
+	},
+	{
+		value: MetricAggregateOperator.COUNT,
+		label: 'Count',
+	},
+	{
+		value: MetricAggregateOperator.COUNT_DISTINCT,
+		label: 'Count Distinct',
+	},
+];
+
+export const metricsSumSpaceAggregateOperatorOptions: SelectOption<
+	string,
+	string
+>[] = [
+	{
+		value: MetricAggregateOperator.SUM,
+		label: 'Sum',
+	},
+	{
+		value: MetricAggregateOperator.AVG,
+		label: 'Avg',
+	},
+	{
+		value: MetricAggregateOperator.MIN,
+		label: 'Min',
+	},
+	{
+		value: MetricAggregateOperator.MAX,
+		label: 'Max',
+	},
+];
+
+export const metricsGaugeSpaceAggregateOperatorOptions: SelectOption<
+	string,
+	string
+>[] = [
+	{
+		value: MetricAggregateOperator.SUM,
+		label: 'Sum',
+	},
+	{
+		value: MetricAggregateOperator.AVG,
+		label: 'Avg',
+	},
+	{
+		value: MetricAggregateOperator.MIN,
+		label: 'Min',
+	},
+	{
+		value: MetricAggregateOperator.MAX,
+		label: 'Max',
+	},
+];
+
+export const metricsHistogramSpaceAggregateOperatorOptions: SelectOption<
+	string,
+	string
+>[] = [
+	{
+		value: MetricAggregateOperator.P50,
+		label: 'P50',
+	},
+	{
+		value: MetricAggregateOperator.P75,
+		label: 'P75',
+	},
+	{
+		value: MetricAggregateOperator.P90,
+		label: 'P90',
+	},
+	{
+		value: MetricAggregateOperator.P95,
+		label: 'P95',
+	},
+	{
+		value: MetricAggregateOperator.P99,
+		label: 'P99',
+	},
+];
+
+export const metricsEmptyTimeAggregateOperatorOptions: SelectOption<
+	string,
+	string
+>[] = [];