diff --git a/frontend/src/constants/queryBuilder.ts b/frontend/src/constants/queryBuilder.ts index 0a94b4f074ca..fb64dc7acf45 100644 --- a/frontend/src/constants/queryBuilder.ts +++ b/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< diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts b/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts index b5dd84a5732c..b3009cf33dc7 100644 --- a/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts +++ b/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; diff --git a/frontend/src/container/TracesExplorer/QuerySection/index.tsx b/frontend/src/container/TracesExplorer/QuerySection/index.tsx index 96f11fd77849..725f033afbc9 100644 --- a/frontend/src/container/TracesExplorer/QuerySection/index.tsx +++ b/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 ( { + 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, + }; +};