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,19 +78,21 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 						</div>
 					</div>
 
-					<div className="metrics-aggregation-section-content-item">
+					{showAggregationInterval && (
-						<div className="metrics-aggregation-section-content-item-label">
+						<div className="metrics-aggregation-section-content-item">
-							aggregated every
+							<div className="metrics-aggregation-section-content-item-label">
-						</div>
+								aggregated every
+							</div>
 
-						<div className="metrics-aggregation-section-content-item-value">
+							<div className="metrics-aggregation-section-content-item-value">
-							<InputWithLabel
+								<InputWithLabel
-								label="Seconds"
+									label="Seconds"
-								placeholder="Enter a number"
+									placeholder="Enter a number"
-								labelAfter
+									labelAfter
-							/>
+								/>
+							</div>
 						</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: {
+];
-		icon: <ScrollText size={14} />,
+
-		label: 'Reduce to',
+const REDUCE_TO = {
-		key: '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,24 +254,22 @@ function QueryAddOns({
 					onChange={handleOptionClick}
 					value={selectedViews}
 				>
-					{Object.values(ADD_ONS)
+					{addOns.map((addOn) => (
-						.filter((addOn) => addOn.key !== 'reduce_to' || showReduceTo)
+						<Radio.Button
-						.map((addOn) => (
+							key={addOn.label}
-							<Radio.Button
+							className={
-								key={addOn.label}
+								selectedViews.find((view) => view.key === addOn.key)
-								className={
+									? 'selected-view tab'
-									selectedViews.find((view) => view.key === addOn.key)
+									: 'tab'
-										? 'selected-view tab'
+							}
-										: 'tab'
+							value={addOn}
-								}
+						>
-								value={addOn}
+							<div className="add-on-tab-title">
-							>
+								{addOn.icon}
-								<div className="add-on-tab-title">
+								{addOn.label}
-									{addOn.icon}
+							</div>
-									{addOn.label}
+						</Radio.Button>
-								</div>
+					))}
-							</Radio.Button>
-						))}
 				</Radio.Group>
 			</div>
 		</div>

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 (
 		<div className="query-aggregation-container">
 			<QueryAggregationSelect />
 
-			<div className="query-aggregation-interval">
+			{showAggregationInterval && (
-				<div className="query-aggregation-interval-label">every</div>
+				<div className="query-aggregation-interval">
-				<div className="query-aggregation-interval-input-container">
+					<div className="query-aggregation-interval-label">every</div>
-					<InputWithLabel
+					<div className="query-aggregation-interval-input-container">
-						initialValue="60"
+						<InputWithLabel
-						label="Seconds"
+							initialValue="60"
-						placeholder="60"
+							label="Seconds"
-						type="number"
+							placeholder="60"
-						labelAfter
+							type="number"
-						onClose={(): void => {}}
+							labelAfter
-					/>
+							onClose={(): void => {}}
+						/>
+					</div>
 				</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>