chore: added initialvalue for trace operators

frontend/src/constants/queryBuilder.ts

@@ -12,6 +12,7 @@ import {
 	HavingForm,
 	IBuilderFormula,
 	IBuilderQuery,
+	IBuilderTraceOperator,
 	IClickHouseQuery,
 	IPromQLQuery,
 	Query,
@@ -265,6 +266,31 @@ export const initialFormulaBuilderFormValues: IBuilderFormula = {
 	legend: '',
 };
 
+export const initialQueryBuilderFormTraceOperatorValues: IBuilderTraceOperator = {
+	queryName: 'T1',
+	legend: '',
+	expression: '',
+	limit: null,
+	orderBy: [],
+	aggregateOperator: MeterAggregateOperator.COUNT,
+	aggregateAttribute: initialAutocompleteData,
+	timeAggregation: MeterAggregateOperator.RATE,
+	spaceAggregation: MeterAggregateOperator.SUM,
+	aggregations: [
+		{
+			metricName: '',
+			temporality: '',
+			timeAggregation: MeterAggregateOperator.COUNT,
+			spaceAggregation: MeterAggregateOperator.SUM,
+			reduceTo: 'avg',
+		},
+	],
+	stepInterval: undefined,
+	having: [],
+	groupBy: [],
+	reduceTo: 'avg',
+};
+
 export const initialQueryPromQLData: IPromQLQuery = {
 	name: createNewBuilderItemName({ existNames: [], sourceNames: alphabet }),
 	query: '',
@@ -282,6 +308,7 @@ export const initialClickHouseData: IClickHouseQuery = {
 export const initialQueryBuilderData: QueryBuilderData = {
 	queryData: [initialQueryBuilderFormValues],
 	queryFormulas: [],
+	queryTraceOperator: [],
 };
 
 export const initialSingleQueryMap: Record<

frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts

@@ -11,5 +11,6 @@ export type QueryProps = {
 	version: string;
 	showSpanScopeSelector?: boolean;
 	showOnlyWhereClause?: boolean;
+	showTraceOperator?: boolean;
 	signalSource?: string;
 } & Pick<QueryBuilderProps, 'filterConfigs' | 'queryComponents'>;

frontend/src/container/TracesExplorer/QuerySection/index.tsx

@@ -2,12 +2,21 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ExplorerOrderBy from 'container/ExplorerOrderBy';
 import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+import {
+	QueryBuilderProps,
+	TraceView,
+} from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { memo, useCallback, useMemo } from 'react';
 import { DataSource } from 'types/common/queryBuilder';
 
-function QuerySection(): JSX.Element {
+function QuerySection({
+	onChangeTraceView = (): void => {},
+}: {
+	onChangeTraceView?: (view: TraceView) => void;
+}): JSX.Element {
+	const { removeAllQueryBuilderEntities } = useQueryBuilder();
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
 	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
@@ -37,11 +46,34 @@ function QuerySection(): JSX.Element {
 		};
 	}, [panelTypes, renderOrderBy]);
 
+	const isListViewPanel = useMemo(
+		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
+		[panelTypes],
+	);
+
+	const handleChangeTraceView = useCallback(
+		(view: TraceView) => {
+			if (isListViewPanel) {
+				removeAllQueryBuilderEntities('queryFormulas');
+			} else {
+				if (view === TraceView.SPANS) {
+					removeAllQueryBuilderEntities('queryTraceOperator');
+				} else {
+					removeAllQueryBuilderEntities('queryFormulas');
+				}
+			}
+			onChangeTraceView(view);
+		},
+		[onChangeTraceView, isListViewPanel, removeAllQueryBuilderEntities],
+	);
+
 	return (
 		<QueryBuilderV2
 			isListViewPanel={
 				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
 			}
+			showTraceViewSelector
+			onChangeTraceView={handleChangeTraceView}
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
 			queryComponents={queryComponents}
 			panelType={panelTypes}

frontend/src/hooks/queryBuilder/userTraceOperatorOperations.ts

@@ -0,0 +1,45 @@
+import {
+	HandleChangeTraceOperatorData,
+	UseTraceOperatorOperations,
+} from 'types/common/operations.types';
+import { useQueryBuilder } from './useQueryBuilder';
+import { useCallback } from 'react';
+import { LEGEND } from 'constants/global';
+import { getFormatedLegend } from 'utils/getFormatedLegend';
+
+export const useTraceOperatorOperations: UseTraceOperatorOperations = ({
+	index = 0,
+	query,
+}) => {
+	const {
+		handleSetTraceOperatorData,
+		addTraceOperator,
+		currentQuery,
+	} = useQueryBuilder();
+
+	const handleChangeTraceOperatorData: HandleChangeTraceOperatorData = useCallback(
+		(key, value) => {
+			if (!query) {
+				addTraceOperator('');
+			}
+			const updatedQuery = query
+				? query
+				: currentQuery.builder.queryTraceOperator[0];
+
+			const newQuery = {
+				...updatedQuery,
+				[key]:
+					key === LEGEND && typeof value === 'string'
+						? getFormatedLegend(value)
+						: value,
+			};
+
+			handleSetTraceOperatorData(index, newQuery);
+		},
+		[handleSetTraceOperatorData, index, query],
+	);
+
+	return {
+		handleChangeTraceOperatorData,
+	};
+};