diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx index 7093b0d3bffc..804106303fc9 100644 --- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx +++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx @@ -68,7 +68,6 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({ queryComponents={queryComponents} version={version} isAvailableToDisable={false} - showSpanScopeSelector={initialDataSource === DataSource.TRACES} queryVariant={config?.queryVariant || 'dropdown'} showOnlyWhereClause={showOnlyWhereClause} /> diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx index e55c73149136..808d2f2aa118 100644 --- a/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx +++ b/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx @@ -7,20 +7,20 @@ import SpaceAggregationOptions from 'container/QueryBuilder/components/SpaceAggr import { GroupByFilter, OperatorsSelect } from 'container/QueryBuilder/filters'; import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations'; import { Info } from 'lucide-react'; -import { memo, useCallback } from 'react'; +import { memo, useCallback, useMemo } from 'react'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; const MetricsAggregateSection = memo(function MetricsAggregateSection({ query, index, version, + panelType, }: { query: IBuilderQuery; index: number; version: string; + panelType: PANEL_TYPES | null; }): JSX.Element { - const panelType = PANEL_TYPES.LIST; // hardcoded for now - const { operators, spaceAggregationOptions, @@ -33,8 +33,6 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({ entityVersion: version, }); - // console.log('operators', cloneDeep(operators)); - const handleChangeGroupByKeys = useCallback( (value: IBuilderQuery['groupBy']) => { handleChangeQueryData('groupBy', value); @@ -42,6 +40,15 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({ [handleChangeQueryData], ); + const showAggregationInterval = useMemo(() => { + // eslint-disable-next-line sonarjs/prefer-single-boolean-return + if (panelType === PANEL_TYPES.VALUE) { + return false; + } + + return true; + }, [panelType]); + const disableOperatorSelector = !query?.aggregateAttribute.key || query?.aggregateAttribute.key === ''; @@ -71,19 +78,21 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({ -
-
- aggregated every -
+ {showAggregationInterval && ( +
+
+ aggregated every +
-
- +
+ +
-
+ )}
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx index 7e06c98b368a..3c0d18b87342 100644 --- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx +++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx @@ -2,12 +2,13 @@ import './QueryAddOns.styles.scss'; import { Button, Radio, RadioChangeEvent } from 'antd'; import InputWithLabel from 'components/InputWithLabel/InputWithLabel'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter'; import { OrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter'; import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter'; import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations'; import { BarChart2, ScrollText, X } from 'lucide-react'; -import { useCallback, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource } from 'types/common/queryBuilder'; @@ -19,37 +20,46 @@ interface AddOn { key: string; } -const ADD_ONS: Record = { - GROUP_BY: { +const ADD_ONS_KEYS = { + GROUP_BY: 'group_by', + HAVING: 'having', + ORDER_BY: 'order_by', + LIMIT: 'limit', + LEGEND_FORMAT: 'legend_format', +}; + +const ADD_ONS = [ + { icon: , label: 'Group By', key: 'group_by', }, - HAVING: { + { icon: , label: 'Having', key: 'having', }, - ORDER_BY: { + { icon: , label: 'Order By', key: 'order_by', }, - LIMIT: { + { icon: , label: 'Limit', key: 'limit', }, - LEGEND_FORMAT: { + { icon: , label: 'Legend format', key: 'legend_format', }, - REDUCE_TO: { - icon: , - label: 'Reduce to', - key: 'reduce_to', - }, +]; + +const REDUCE_TO = { + icon: , + label: 'Reduce to', + key: 'reduce_to', }; function QueryAddOns({ @@ -57,12 +67,16 @@ function QueryAddOns({ version, isListViewPanel, showReduceTo, + panelType, }: { query: IBuilderQuery; version: string; isListViewPanel: boolean; showReduceTo: boolean; + panelType: PANEL_TYPES | null; }): JSX.Element { + const [addOns, setAddOns] = useState(ADD_ONS); + const [selectedViews, setSelectedViews] = useState([]); const { handleChangeQueryData } = useQueryOperations({ @@ -71,6 +85,24 @@ function QueryAddOns({ entityVersion: '', }); + useEffect(() => { + if (panelType === PANEL_TYPES.VALUE) { + // Filter out all add-ons except legend format + setAddOns((prevAddOns) => + prevAddOns.filter((addOn) => addOn.key === ADD_ONS_KEYS.LEGEND_FORMAT), + ); + } else { + setAddOns(Object.values(ADD_ONS)); + } + + // add reduce to if showReduceTo is true + if (showReduceTo) { + setAddOns((prevAddOns) => [...prevAddOns, REDUCE_TO]); + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [panelType]); + const handleOptionClick = (e: RadioChangeEvent): void => { if (selectedViews.find((view) => view.key === e.target.value.key)) { setSelectedViews( @@ -222,24 +254,22 @@ function QueryAddOns({ onChange={handleOptionClick} value={selectedViews} > - {Object.values(ADD_ONS) - .filter((addOn) => addOn.key !== 'reduce_to' || showReduceTo) - .map((addOn) => ( - view.key === addOn.key) - ? 'selected-view tab' - : 'tab' - } - value={addOn} - > -
- {addOn.icon} - {addOn.label} -
-
- ))} + {addOns.map((addOn) => ( + view.key === addOn.key) + ? 'selected-view tab' + : 'tab' + } + value={addOn} + > +
+ {addOn.icon} + {addOn.label} +
+
+ ))} diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx index 3e4ced461143..27d68981daa8 100644 --- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx +++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx @@ -1,29 +1,57 @@ import './QueryAggregation.styles.scss'; import InputWithLabel from 'components/InputWithLabel/InputWithLabel'; +import { PANEL_TYPES } from 'constants/queryBuilder'; +import { useMemo } from 'react'; +import { DataSource } from 'types/common/queryBuilder'; import QueryAggregationSelect from './QueryAggregationSelect'; -function QueryAggregationOptions(): JSX.Element { +function QueryAggregationOptions({ + dataSource, + panelType, +}: { + dataSource: DataSource; + panelType?: string; +}): JSX.Element { + const showAggregationInterval = useMemo(() => { + // eslint-disable-next-line sonarjs/prefer-single-boolean-return + if (panelType === PANEL_TYPES.VALUE) { + return false; + } + + if (dataSource === DataSource.TRACES || dataSource === DataSource.LOGS) { + return !(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE); + } + + return true; + }, [dataSource, panelType]); + return (
-
-
every
-
- {}} - /> + {showAggregationInterval && ( +
+
every
+
+ {}} + /> +
-
+ )}
); } +QueryAggregationOptions.defaultProps = { + panelType: null, +}; + export default QueryAggregationOptions; diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx index 1db915371d23..8722424b5b97 100644 --- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx +++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx @@ -24,7 +24,6 @@ export const QueryV2 = memo(function QueryV2({ filterConfigs, isListViewPanel = false, version, - showSpanScopeSelector = false, showOnlyWhereClause = false, }: QueryProps): JSX.Element { const { cloneQuery, panelType } = useQueryBuilder(); @@ -68,6 +67,10 @@ export const QueryV2 = memo(function QueryV2({ [dataSource, panelType], ); + const showSpanScopeSelector = useMemo(() => dataSource === DataSource.TRACES, [ + dataSource, + ]); + return (
@@ -147,10 +150,20 @@ export const QueryV2 = memo(function QueryV2({
- {!showOnlyWhereClause && } + {!showOnlyWhereClause && ( + + )} {!showOnlyWhereClause && dataSource === DataSource.METRICS && ( - + )} {!showOnlyWhereClause && ( @@ -159,6 +172,7 @@ export const QueryV2 = memo(function QueryV2({ version="v3" isListViewPanel={false} showReduceTo={showReduceTo} + panelType={panelType} /> )}