feat: update qb elements based on panel type

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}
 						/>

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,6 +78,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 						</div>
 					</div>
 
+					{showAggregationInterval && (
 						<div className="metrics-aggregation-section-content-item">
 							<div className="metrics-aggregation-section-content-item-label">
 								aggregated every
@@ -84,6 +92,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 								/>
 							</div>
 						</div>
+					)}
 				</div>
 			</div>
 

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<string, AddOn> = {
+const ADD_ONS_KEYS = {
-	GROUP_BY: {
+	GROUP_BY: 'group_by',
+	HAVING: 'having',
+	ORDER_BY: 'order_by',
+	LIMIT: 'limit',
+	LEGEND_FORMAT: 'legend_format',
+};
+
+const ADD_ONS = [
+	{
 		icon: <BarChart2 size={14} />,
 		label: 'Group By',
 		key: 'group_by',
 	},
-	HAVING: {
+	{
 		icon: <ScrollText size={14} />,
 		label: 'Having',
 		key: 'having',
 	},
-	ORDER_BY: {
+	{
 		icon: <ScrollText size={14} />,
 		label: 'Order By',
 		key: 'order_by',
 	},
-	LIMIT: {
+	{
 		icon: <ScrollText size={14} />,
 		label: 'Limit',
 		key: 'limit',
 	},
-	LEGEND_FORMAT: {
+	{
 		icon: <ScrollText size={14} />,
 		label: 'Legend format',
 		key: 'legend_format',
 	},
-	REDUCE_TO: {
+];
+
+const REDUCE_TO = {
 	icon: <ScrollText size={14} />,
 	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<AddOn[]>(ADD_ONS);
+
 	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);
 
 	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,9 +254,7 @@ function QueryAddOns({
 					onChange={handleOptionClick}
 					value={selectedViews}
 				>
-					{Object.values(ADD_ONS)
+					{addOns.map((addOn) => (
-						.filter((addOn) => addOn.key !== 'reduce_to' || showReduceTo)
-						.map((addOn) => (
 						<Radio.Button
 							key={addOn.label}
 							className={

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -1,14 +1,37 @@
 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 (
 		<div className="query-aggregation-container">
 			<QueryAggregationSelect />
 
+			{showAggregationInterval && (
 				<div className="query-aggregation-interval">
 					<div className="query-aggregation-interval-label">every</div>
 					<div className="query-aggregation-interval-input-container">
@@ -22,8 +45,13 @@ function QueryAggregationOptions(): JSX.Element {
 						/>
 					</div>
 				</div>
+			)}
 		</div>
 	);
 }
 
+QueryAggregationOptions.defaultProps = {
+	panelType: null,
+};
+
 export default QueryAggregationOptions;

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 (
 		<div className={cx('query-v2', { 'where-clause-view': showOnlyWhereClause })}>
 			<div className="qb-content-section">
@@ -147,10 +150,20 @@ export const QueryV2 = memo(function QueryV2({
 						</div>
 					</div>
 
-					{!showOnlyWhereClause && <QueryAggregation />}
+					{!showOnlyWhereClause && (
+						<QueryAggregation
+							dataSource={dataSource}
+							panelType={panelType || undefined}
+						/>
+					)}
 
 					{!showOnlyWhereClause && dataSource === DataSource.METRICS && (
-						<MetricsAggregateSection query={query} index={0} version="v4" />
+						<MetricsAggregateSection
+							panelType={panelType}
+							query={query}
+							index={0}
+							version="v4"
+						/>
 					)}
 
 					{!showOnlyWhereClause && (
@@ -159,6 +172,7 @@ export const QueryV2 = memo(function QueryV2({
 							version="v3"
 							isListViewPanel={false}
 							showReduceTo={showReduceTo}
+							panelType={panelType}
 						/>
 					)}
 				</div>