fix: wrong number changed earlier

* feat: add org id support in root user config

* chore: address review comments

* fix: use zero value uuid for org id in example.conf

conf/example.yaml

@@ -320,3 +320,4 @@ user:
     # The name of the organization to create or look up for the root user.
     org:
       name: default
+      id: 00000000-0000-0000-0000-000000000000

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

@@ -85,7 +85,6 @@ interface QuerySearchProps {
 	signalSource?: string;
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
-	showFilterSuggestionsWithoutMetric?: boolean;
 }
 
 function QuerySearch({
@@ -96,7 +95,6 @@ function QuerySearch({
 	onRun,
 	signalSource,
 	hardcodedAttributeKeys,
-	showFilterSuggestionsWithoutMetric,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -253,8 +251,7 @@ function QuerySearch({
 		async (searchText?: string): Promise<void> => {
 			if (
 				dataSource === DataSource.METRICS &&
-				!queryData.aggregateAttribute?.key &&
-				!showFilterSuggestionsWithoutMetric
+				!queryData.aggregateAttribute?.key
 			) {
 				setKeySuggestions([]);
 				return;
@@ -303,7 +300,6 @@ function QuerySearch({
 			queryData.aggregateAttribute?.key,
 			signalSource,
 			hardcodedAttributeKeys,
-			showFilterSuggestionsWithoutMetric,
 		],
 	);
 
@@ -1560,7 +1556,6 @@ QuerySearch.defaultProps = {
 	hardcodedAttributeKeys: undefined,
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
-	showFilterSuggestionsWithoutMetric: false,
 };
 
 export default QuerySearch;

frontend/src/components/ValueGraph/index.tsx

@@ -40,6 +40,7 @@ function ValueGraph({
 	value,
 	rawValue,
 	thresholds,
+	yAxisUnit,
 }: ValueGraphProps): JSX.Element {
 	const { t } = useTranslation(['valueGraph']);
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -87,7 +88,7 @@ function ValueGraph({
 	const {
 		threshold,
 		isConflictingThresholds,
-	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue);
+	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue, yAxisUnit);
 
 	return (
 		<div
@@ -155,6 +156,7 @@ interface ValueGraphProps {
 	value: string;
 	rawValue: number;
 	thresholds: ThresholdProps[];
+	yAxisUnit?: string;
 }
 
 export default ValueGraph;

frontend/src/components/ValueGraph/utils.ts

@@ -1,9 +1,10 @@
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { evaluateThresholdWithConvertedValue } from 'container/GridTableComponent/utils';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
-function compareThreshold(
+function doesValueSatisfyThreshold(
 	rawValue: number,
 	threshold: ThresholdProps,
+	yAxisUnit?: string,
 ): boolean {
 	if (
 		threshold.thresholdOperator === undefined ||
@@ -11,31 +12,14 @@ function compareThreshold(
 	) {
 		return false;
 	}
-	switch (threshold.thresholdOperator) {
-		case '>':
-			return rawValue > threshold.thresholdValue;
-		case '>=':
-			return rawValue >= threshold.thresholdValue;
-		case '<':
-			return rawValue < threshold.thresholdValue;
-		case '<=':
-			return rawValue <= threshold.thresholdValue;
-		case '=':
-			return rawValue === threshold.thresholdValue;
-		default:
-			return false;
-	}
-}
 
-function extractNumbersFromString(inputString: string): number[] {
-	const regex = /[+-]?\d+(\.\d+)?/g;
-	const matches = inputString.match(regex);
-
-	if (matches) {
-		return matches.map(Number);
-	}
-
-	return [];
+	return evaluateThresholdWithConvertedValue(
+		rawValue,
+		threshold.thresholdValue,
+		threshold.thresholdOperator,
+		threshold.thresholdUnit,
+		yAxisUnit,
+	);
 }
 
 function getHighestPrecedenceThreshold(
@@ -60,21 +44,32 @@ function getHighestPrecedenceThreshold(
 	return highestPrecedenceThreshold;
 }
 
+function extractNumbersFromString(inputString: string): number[] {
+	const regex = /[+-]?\d+(\.\d+)?/g;
+	const matches = inputString.match(regex);
+
+	if (matches) {
+		return matches.map(Number);
+	}
+
+	return [];
+}
+
 export function getBackgroundColorAndThresholdCheck(
 	thresholds: ThresholdProps[],
 	rawValue: number,
+	yAxisUnit?: string,
 ): {
 	threshold: ThresholdProps;
 	isConflictingThresholds: boolean;
 } {
-	const matchingThresholds = thresholds.filter((threshold) =>
-		compareThreshold(
-			extractNumbersFromString(
-				getYAxisFormattedValue(rawValue.toString(), threshold.thresholdUnit || ''),
-			)[0],
-			threshold,
-		),
-	);
+	const matchingThresholds = thresholds.filter((threshold) => {
+		const numbers = extractNumbersFromString(rawValue.toString());
+		if (numbers.length === 0) {
+			return false;
+		}
+		return doesValueSatisfyThreshold(numbers[0], threshold, yAxisUnit);
+	});
 
 	if (matchingThresholds.length === 0) {
 		return {

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -22,6 +22,8 @@ function YAxisUnitSelector({
 	'data-testid': dataTestId,
 	source,
 	initialValue,
+	categoriesOverride,
+	containerClassName,
 }: YAxisUnitSelectorProps): JSX.Element {
 	const universalUnit = mapMetricUnitToUniversalUnit(value);
 
@@ -66,10 +68,14 @@ function YAxisUnitSelector({
 		return aliases.some((alias) => alias.toLowerCase().includes(search));
 	};
 
-	const categories = getYAxisCategories(source);
+	const categoriesToRender = useMemo(() => {
+		return categoriesOverride || getYAxisCategories(source);
+	}, [categoriesOverride, source]);
 
 	return (
-		<div className="y-axis-unit-selector-component">
+		<div
+			className={classNames('y-axis-unit-selector-component', containerClassName)}
+		>
 			<Select
 				showSearch
 				value={universalUnit}
@@ -90,7 +96,7 @@ function YAxisUnitSelector({
 				data-testid={dataTestId}
 				allowClear
 			>
-				{categories.map((category) => (
+				{categoriesToRender.map((category) => (
 					<Select.OptGroup key={category.name} label={category.name}>
 						{category.units.map((unit) => (
 							<Select.Option key={unit.id} value={unit.id}>

frontend/src/components/YAxisUnitSelector/__tests__/YAxisUnitSelector.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import { YAxisSource } from '../types';
+import { YAxisCategoryNames } from '../constants';
+import { UniversalYAxisUnit, YAxisSource } from '../types';
 import YAxisUnitSelector from '../YAxisUnitSelector';
 
 describe('YAxisUnitSelector', () => {
@@ -123,4 +124,34 @@ describe('YAxisUnitSelector', () => {
 		const warningIcon = screen.queryByLabelText('warning');
 		expect(warningIcon).not.toBeInTheDocument();
 	});
+
+	it('uses categories override to render custom units', () => {
+		const customCategories = [
+			{
+				name: YAxisCategoryNames.Data,
+				units: [
+					{
+						id: UniversalYAxisUnit.BYTES,
+						name: 'Custom Bytes (B)',
+					},
+				],
+			},
+		];
+
+		render(
+			<YAxisUnitSelector
+				value=""
+				onChange={mockOnChange}
+				source={YAxisSource.ALERTS}
+				categoriesOverride={customCategories}
+			/>,
+		);
+
+		const select = screen.getByRole('combobox');
+
+		fireEvent.mouseDown(select);
+
+		expect(screen.getByText('Custom Bytes (B)')).toBeInTheDocument();
+		expect(screen.queryByText('Bytes (B)')).not.toBeInTheDocument();
+	});
 });

frontend/src/components/YAxisUnitSelector/types.ts

@@ -9,6 +9,8 @@ export interface YAxisUnitSelectorProps {
 	'data-testid'?: string;
 	source: YAxisSource;
 	initialValue?: string;
+	categoriesOverride?: YAxisCategory[];
+	containerClassName?: string;
 }
 
 export enum UniversalYAxisUnit {

frontend/src/container/GridTableComponent/utils.ts

@@ -49,7 +49,7 @@ function evaluateCondition(
  * @param columnUnit - The current unit of the value.
  * @returns A boolean indicating whether the value meets the threshold condition.
  */
-function evaluateThresholdWithConvertedValue(
+export function evaluateThresholdWithConvertedValue(
 	value: number,
 	thresholdValue: number,
 	thresholdOperator?: string,

frontend/src/container/GridValueComponent/index.tsx

@@ -99,6 +99,7 @@ function GridValueComponent({
 				<ValueGraph
 					thresholds={thresholds || []}
 					rawValue={value}
+					yAxisUnit={yAxisUnit}
 					value={
 						yAxisUnit
 							? getYAxisFormattedValue(

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -24,7 +24,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { Edit2, Save, X } from 'lucide-react';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
-import MetricTypeRendererV2 from '../Summary/MetricTypeViewRenderer';
+import { MetricTypeViewRenderer } from '../Summary/utils';
 import {
 	METRIC_METADATA_KEYS,
 	METRIC_METADATA_TEMPORALITY_OPTIONS,
@@ -98,7 +98,7 @@ function Metadata({
 				return <FieldRenderer field="-" />;
 			}
 			if (key === TableFields.TYPE) {
-				return <MetricTypeRendererV2 type={value as MetrictypesTypeDTO} />;
+				return <MetricTypeViewRenderer type={value as MetrictypesTypeDTO} />;
 			}
 			if (key === TableFields.IS_MONOTONIC) {
 				return <FieldRenderer field={value ? 'Yes' : 'No'} />;

frontend/src/container/MetricsExplorer/Summary/MetricNameSearch.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom-v5-compat';
 import {
 	Button,
 	Empty,
@@ -9,24 +10,22 @@ import {
 	Popover,
 	Spin,
 } from 'antd';
-import { Filter } from 'api/v5/v5';
-import {
-	convertExpressionToFilters,
-	convertFiltersToExpression,
-} from 'components/QueryBuilderV2/utils';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetMetricsListFilterValues } from 'hooks/metricsExplorer/useGetMetricsListFilterValues';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { Search } from 'lucide-react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+import { SUMMARY_FILTERS_KEY } from './constants';
 
 function MetricNameSearch({
-	queryFilterExpression,
-	onFilterChange,
+	queryFilters,
 }: {
-	queryFilterExpression: Filter;
-	onFilterChange: (value: string) => void;
+	queryFilters: TagFilter;
 }): JSX.Element {
+	const [searchParams, setSearchParams] = useSearchParams();
+
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 	const [searchString, setSearchString] = useState<string>('');
 	const [debouncedSearchString, setDebouncedSearchString] = useState<string>('');
@@ -68,12 +67,9 @@ function MetricNameSearch({
 
 	const handleSelect = useCallback(
 		(selectedMetricName: string): void => {
-			const queryFilters = convertExpressionToFilters(
-				queryFilterExpression.expression,
-			);
 			const newFilters = {
 				items: [
-					...queryFilters,
+					...queryFilters.items,
 					{
 						id: 'metric_name',
 						op: 'CONTAINS',
@@ -87,11 +83,13 @@ function MetricNameSearch({
 				],
 				op: 'and',
 			};
-			const newFilterExpression = convertFiltersToExpression(newFilters);
-			onFilterChange(newFilterExpression.expression);
+			setSearchParams({
+				...Object.fromEntries(searchParams.entries()),
+				[SUMMARY_FILTERS_KEY]: JSON.stringify(newFilters),
+			});
 			setIsPopoverOpen(false);
 		},
-		[queryFilterExpression, onFilterChange],
+		[queryFilters.items, setSearchParams, searchParams],
 	);
 
 	const metricNameFilterValues = useMemo(

frontend/src/container/MetricsExplorer/Summary/MetricTypeRenderer.tsx

@@ -1,76 +0,0 @@
-import { useMemo } from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Typography } from 'antd';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
-import {
-	BarChart,
-	BarChart2,
-	BarChartHorizontal,
-	Diff,
-	Gauge,
-} from 'lucide-react';
-
-import { METRIC_TYPE_LABEL_MAP } from './constants';
-
-// TODO: @amlannandy Delete this component after API migration is complete
-function MetricTypeRenderer({ type }: { type: MetricType }): JSX.Element {
-	const [icon, color] = useMemo(() => {
-		switch (type) {
-			case MetricType.SUM:
-				return [
-					<Diff key={type} size={12} color={Color.BG_ROBIN_500} />,
-					Color.BG_ROBIN_500,
-				];
-			case MetricType.GAUGE:
-				return [
-					<Gauge key={type} size={12} color={Color.BG_SAKURA_500} />,
-					Color.BG_SAKURA_500,
-				];
-			case MetricType.HISTOGRAM:
-				return [
-					<BarChart2 key={type} size={12} color={Color.BG_SIENNA_500} />,
-					Color.BG_SIENNA_500,
-				];
-			case MetricType.SUMMARY:
-				return [
-					<BarChartHorizontal key={type} size={12} color={Color.BG_FOREST_500} />,
-					Color.BG_FOREST_500,
-				];
-			case MetricType.EXPONENTIAL_HISTOGRAM:
-				return [
-					<BarChart key={type} size={12} color={Color.BG_AQUA_500} />,
-					Color.BG_AQUA_500,
-				];
-			default:
-				return [null, ''];
-		}
-	}, [type]);
-
-	const metricTypeRendererStyle = useMemo(
-		() => ({
-			backgroundColor: `${color}33`,
-			border: `1px solid ${color}`,
-			color,
-		}),
-		[color],
-	);
-
-	const metricTypeRendererTextStyle = useMemo(
-		() => ({
-			color,
-			fontSize: 12,
-		}),
-		[color],
-	);
-
-	return (
-		<div className="metric-type-renderer" style={metricTypeRendererStyle}>
-			{icon}
-			<Typography.Text style={metricTypeRendererTextStyle}>
-				{METRIC_TYPE_LABEL_MAP[type]}
-			</Typography.Text>
-		</div>
-	);
-}
-
-export default MetricTypeRenderer;

frontend/src/container/MetricsExplorer/Summary/MetricTypeSearch.tsx

@@ -1,19 +1,23 @@
 import { useCallback, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Button, Menu, Popover, Tooltip } from 'antd';
-import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
-import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { Search } from 'lucide-react';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { METRIC_TYPE_VIEW_VALUES_MAP } from './constants';
+import {
+	METRIC_TYPE_LABEL_MAP,
+	METRIC_TYPE_VALUES_MAP,
+	SUMMARY_FILTERS_KEY,
+} from './constants';
 
 function MetricTypeSearch({
 	queryFilters,
-	onFilterChange,
 }: {
 	queryFilters: TagFilter;
-	onFilterChange: (expression: string) => void;
 }): JSX.Element {
+	const [searchParams, setSearchParams] = useSearchParams();
+
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
 	const menuItems = useMemo(
@@ -22,9 +26,9 @@ function MetricTypeSearch({
 				key: 'all',
 				value: 'All',
 			},
-			...Object.keys(METRIC_TYPE_VIEW_VALUES_MAP).map((key) => ({
-				key: METRIC_TYPE_VIEW_VALUES_MAP[key as MetrictypesTypeDTO],
-				value: METRIC_TYPE_VIEW_VALUES_MAP[key as MetrictypesTypeDTO],
+			...Object.keys(METRIC_TYPE_LABEL_MAP).map((key) => ({
+				key: METRIC_TYPE_VALUES_MAP[key as MetricType],
+				value: METRIC_TYPE_LABEL_MAP[key as MetricType],
 			})),
 		],
 		[],
@@ -32,17 +36,16 @@ function MetricTypeSearch({
 
 	const handleSelect = useCallback(
 		(selectedMetricType: string): void => {
-			let newFilters;
 			if (selectedMetricType !== 'all') {
-				newFilters = {
+				const newFilters = {
 					items: [
 						...queryFilters.items,
 						{
-							id: 'type',
+							id: 'metric_type',
 							op: '=',
 							key: {
-								id: 'type',
-								key: 'type',
+								id: 'metric_type',
+								key: 'metric_type',
 								type: 'tag',
 							},
 							value: selectedMetricType,
@@ -50,17 +53,23 @@ function MetricTypeSearch({
 					],
 					op: 'AND',
 				};
+				setSearchParams({
+					...Object.fromEntries(searchParams.entries()),
+					[SUMMARY_FILTERS_KEY]: JSON.stringify(newFilters),
+				});
 			} else {
-				newFilters = {
-					items: queryFilters.items.filter((item) => item.id !== 'type'),
+				const newFilters = {
+					items: queryFilters.items.filter((item) => item.id !== 'metric_type'),
 					op: 'AND',
 				};
+				setSearchParams({
+					...Object.fromEntries(searchParams.entries()),
+					[SUMMARY_FILTERS_KEY]: JSON.stringify(newFilters),
+				});
 			}
-			const newFilterExpression = convertFiltersToExpression(newFilters);
-			onFilterChange(newFilterExpression.expression);
 			setIsPopoverOpen(false);
 		},
-		[queryFilters.items, onFilterChange],
+		[queryFilters.items, setSearchParams, searchParams],
 	);
 
 	const menu = (

frontend/src/container/MetricsExplorer/Summary/MetricTypeViewRenderer.tsx

@@ -1,79 +0,0 @@
-import { useMemo } from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Typography } from 'antd';
-import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
-import {
-	BarChart,
-	BarChart2,
-	BarChartHorizontal,
-	Diff,
-	Gauge,
-} from 'lucide-react';
-
-import { METRIC_TYPE_VIEW_VALUES_MAP } from './constants';
-
-export function MetricTypeViewRenderer({
-	type,
-}: {
-	type: MetrictypesTypeDTO;
-}): JSX.Element {
-	const [icon, color] = useMemo(() => {
-		switch (type) {
-			case MetrictypesTypeDTO.sum:
-				return [
-					<Diff key={type} size={12} color={Color.BG_ROBIN_500} />,
-					Color.BG_ROBIN_500,
-				];
-			case MetrictypesTypeDTO.gauge:
-				return [
-					<Gauge key={type} size={12} color={Color.BG_SAKURA_500} />,
-					Color.BG_SAKURA_500,
-				];
-			case MetrictypesTypeDTO.histogram:
-				return [
-					<BarChart2 key={type} size={12} color={Color.BG_SIENNA_500} />,
-					Color.BG_SIENNA_500,
-				];
-			case MetrictypesTypeDTO.summary:
-				return [
-					<BarChartHorizontal key={type} size={12} color={Color.BG_FOREST_500} />,
-					Color.BG_FOREST_500,
-				];
-			case MetrictypesTypeDTO.exponentialhistogram:
-				return [
-					<BarChart key={type} size={12} color={Color.BG_AQUA_500} />,
-					Color.BG_AQUA_500,
-				];
-			default:
-				return [null, ''];
-		}
-	}, [type]);
-
-	const {
-		metricTypeViewRendererStyle,
-		metricTypeViewRendererTextStyle,
-	} = useMemo(() => {
-		return {
-			metricTypeViewRendererStyle: {
-				backgroundColor: `${color}33`,
-				border: `1px solid ${color}`,
-				color,
-			},
-			metricTypeViewRendererTextStyle: {
-				color,
-				fontSize: 12,
-			},
-		};
-	}, [color]);
-
-	return (
-		<div className="metric-type-renderer" style={metricTypeViewRendererStyle}>
-			{icon}
-			<Typography.Text style={metricTypeViewRendererTextStyle}>
-				{METRIC_TYPE_VIEW_VALUES_MAP[type]}
-			</Typography.Text>
-		</div>
-	);
-}
-
-export default MetricTypeViewRenderer;

frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx

@@ -1,55 +1,27 @@
-import { useCallback } from 'react';
 import { Tooltip } from 'antd';
-import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import { Info } from 'lucide-react';
-import { DataSource } from 'types/common/queryBuilder';
+import { HardHat, Info } from 'lucide-react';
 
 import { MetricsSearchProps } from './types';
 
-function MetricsSearch({
-	query,
-	onChange,
-	currentQueryFilterExpression,
-	setCurrentQueryFilterExpression,
-	isLoading,
-}: MetricsSearchProps): JSX.Element {
-	const handleOnChange = useCallback(
-		(expression: string): void => {
-			setCurrentQueryFilterExpression(expression);
-		},
-		[setCurrentQueryFilterExpression],
-	);
-
-	const handleStageAndRunQuery = useCallback(() => {
-		onChange(currentQueryFilterExpression);
-	}, [currentQueryFilterExpression, onChange]);
-
+function MetricsSearch({ query, onChange }: MetricsSearchProps): JSX.Element {
 	return (
 		<div className="metrics-search-container">
-			<div data-testid="qb-search-container" className="qb-search-container">
+			<div className="qb-search-container">
 				<Tooltip
 					title="Use filters to refine metrics based on attributes. Example: service_name=api - Shows all metrics associated with the API service"
 					placement="right"
 				>
 					<Info size={16} />
 				</Tooltip>
-				<QuerySearch
-					onChange={handleOnChange}
-					dataSource={DataSource.METRICS}
-					queryData={{
-						...query,
-						filter: {
-							...query?.filter,
-							expression: currentQueryFilterExpression,
-						},
-					}}
-					onRun={handleOnChange}
-					showFilterSuggestionsWithoutMetric
+				<QueryBuilderSearch
+					query={query}
+					onChange={onChange}
+					suffixIcon={<HardHat size={16} />}
+					isMetricsExplorer
 				/>
 			</div>
-			<RunQueryBtn onStageRunQuery={handleStageAndRunQuery} disabled={isLoading} />
 			<div className="metrics-search-options">
 				<DateTimeSelectionV2
 					showAutoRefresh={false}

frontend/src/container/MetricsExplorer/Summary/MetricsTable.tsx

@@ -9,7 +9,6 @@ import {
 	Typography,
 } from 'antd';
 import { SorterResult } from 'antd/es/table/interface';
-import { Querybuildertypesv5OrderDirectionDTO } from 'api/generated/services/sigNoz.schemas';
 import { Info } from 'lucide-react';
 
 import { MetricsListItemRowData, MetricsTableProps } from './types';
@@ -25,8 +24,7 @@ function MetricsTable({
 	setOrderBy,
 	totalCount,
 	openMetricDetails,
-	queryFilterExpression,
-	onFilterChange,
+	queryFilters,
 }: MetricsTableProps): JSX.Element {
 	const handleTableChange: TableProps<MetricsListItemRowData>['onChange'] = useCallback(
 		(
@@ -38,20 +36,13 @@ function MetricsTable({
 		): void => {
 			if ('field' in sorter && sorter.order) {
 				setOrderBy({
-					key: {
-						name: sorter.field as string,
-					},
-					direction:
-						sorter.order === 'ascend'
-							? Querybuildertypesv5OrderDirectionDTO.asc
-							: Querybuildertypesv5OrderDirectionDTO.desc,
+					columnName: sorter.field as string,
+					order: sorter.order === 'ascend' ? 'asc' : 'desc',
 				});
 			} else {
 				setOrderBy({
-					key: {
-						name: 'samples',
-					},
-					direction: Querybuildertypesv5OrderDirectionDTO.desc,
+					columnName: 'samples',
+					order: 'desc',
 				});
 			}
 		},
@@ -60,17 +51,19 @@ function MetricsTable({
 
 	return (
 		<div className="metrics-table-container">
-			<div className="metrics-table-title" data-testid="metrics-table-title">
-				<Typography.Title level={4} className="metrics-table-title">
-					List View
-				</Typography.Title>
-				<Tooltip
-					title="The table displays all metrics in the selected time range. Each row represents a unique metric, and its metric name, and metadata like description, type, unit, and samples/timeseries cardinality observed in the selected time range."
-					placement="right"
-				>
-					<Info size={16} />
-				</Tooltip>
-			</div>
+			{!isError && !isLoading && (
+				<div className="metrics-table-title" data-testid="metrics-table-title">
+					<Typography.Title level={4} className="metrics-table-title">
+						List View
+					</Typography.Title>
+					<Tooltip
+						title="The table displays all metrics in the selected time range. Each row represents a unique metric, and its metric name, and metadata like description, type, unit, and samples/timeseries cardinality observed in the selected time range."
+						placement="right"
+					>
+						<Info size={16} />
+					</Tooltip>
+				</div>
+			)}
 			<Table
 				loading={{
 					spinning: isLoading,
@@ -82,7 +75,7 @@ function MetricsTable({
 					),
 				}}
 				dataSource={data}
-				columns={getMetricsTableColumns(queryFilterExpression, onFilterChange)}
+				columns={getMetricsTableColumns(queryFilters)}
 				locale={{
 					emptyText: isLoading ? null : (
 						<div

frontend/src/container/MetricsExplorer/Summary/MetricsTreemap.tsx

@@ -1,10 +1,9 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useWindowSize } from 'react-use';
 import { Group } from '@visx/group';
 import { Treemap } from '@visx/hierarchy';
 import { Empty, Select, Skeleton, Tooltip, Typography } from 'antd';
-import { MetricsexplorertypesTreemapModeDTO } from 'api/generated/services/sigNoz.schemas';
-import { HierarchyNode, stratify, treemapBinary } from 'd3-hierarchy';
+import { stratify, treemapBinary } from 'd3-hierarchy';
 import { Info } from 'lucide-react';
 
 import {
@@ -13,24 +12,21 @@ import {
 	TREEMAP_SQUARE_PADDING,
 	TREEMAP_VIEW_OPTIONS,
 } from './constants';
-import {
-	MetricsTreemapInternalProps,
-	MetricsTreemapProps,
-	TreemapTile,
-} from './types';
+import { MetricsTreemapProps, TreemapTile, TreemapViewType } from './types';
 import {
 	getTreemapTileStyle,
 	getTreemapTileTextStyle,
 	transformTreemapData,
 } from './utils';
 
-function MetricsTreemapInternal({
+function MetricsTreemap({
+	viewType,
+	data,
 	isLoading,
 	isError,
-	data,
-	viewType,
 	openMetricDetails,
-}: MetricsTreemapInternalProps): JSX.Element {
+	setHeatmapView,
+}: MetricsTreemapProps): JSX.Element {
 	const { width: windowWidth } = useWindowSize();
 
 	const treemapWidth = useMemo(
@@ -44,9 +40,9 @@ function MetricsTreemapInternal({
 
 	const treemapData = useMemo(() => {
 		const extracedTreemapData =
-			(viewType === MetricsexplorertypesTreemapModeDTO.timeseries
-				? data?.timeseries
-				: data?.samples) || [];
+			(viewType === TreemapViewType.TIMESERIES
+				? data?.data?.[TreemapViewType.TIMESERIES]
+				: data?.data?.[TreemapViewType.SAMPLES]) || [];
 		return transformTreemapData(extracedTreemapData, viewType);
 	}, [data, viewType]);
 
@@ -58,126 +54,41 @@ function MetricsTreemapInternal({
 	const xMax = treemapWidth - TREEMAP_MARGINS.LEFT - TREEMAP_MARGINS.RIGHT;
 	const yMax = TREEMAP_HEIGHT - TREEMAP_MARGINS.TOP - TREEMAP_MARGINS.BOTTOM;
 
-	const treemapStylesWithoutPadding = useMemo(
-		() => ({
-			width: treemapWidth,
-			height: TREEMAP_HEIGHT,
-		}),
-		[treemapWidth],
-	);
-
-	const treemapStylesWithPadding = useMemo(
-		() => ({
-			width: treemapWidth,
-			height: TREEMAP_HEIGHT,
-			paddingTop: 30,
-		}),
-		[treemapWidth],
-	);
-
-	const treemapTileStyle = useCallback(
-		(node: HierarchyNode<TreemapTile>) => ({
-			...getTreemapTileStyle(node.data),
-			...getTreemapTileTextStyle(),
-		}),
-		[],
-	);
-
 	if (isLoading) {
 		return (
 			<div data-testid="metrics-treemap-loading-state">
-				<Skeleton style={treemapStylesWithoutPadding} active />
+				<Skeleton
+					style={{ width: treemapWidth, height: TREEMAP_HEIGHT + 55 }}
+					active
+				/>
 			</div>
 		);
 	}
 
-	if (isError) {
-		return (
-			<Empty
-				description="Error fetching metrics. If the problem persists, please contact support."
-				data-testid="metrics-treemap-error-state"
-				style={treemapStylesWithPadding}
-			/>
-		);
-	}
-
-	if (!data || !data?.[viewType]?.length) {
+	if (
+		!data ||
+		!data.data ||
+		(data?.status === 'success' && !data?.data?.[viewType])
+	) {
 		return (
 			<Empty
 				description="No metrics found"
 				data-testid="metrics-treemap-empty-state"
-				style={treemapStylesWithPadding}
+				style={{ width: treemapWidth, height: TREEMAP_HEIGHT, paddingTop: 30 }}
 			/>
 		);
 	}
 
-	return (
-		<svg width={treemapWidth} height={TREEMAP_HEIGHT} className="metrics-treemap">
-			<rect
-				width={treemapWidth}
-				height={TREEMAP_HEIGHT}
-				rx={14}
-				fill="transparent"
+	if (data?.status === 'error' || isError) {
+		return (
+			<Empty
+				description="Error fetching metrics. If the problem persists, please contact support."
+				data-testid="metrics-treemap-error-state"
+				style={{ width: treemapWidth, height: TREEMAP_HEIGHT, paddingTop: 30 }}
 			/>
-			<Treemap<TreemapTile>
-				top={TREEMAP_MARGINS.TOP}
-				root={transformedTreemapData}
-				size={[xMax, yMax]}
-				tile={treemapBinary}
-				round
-			>
-				{(treemap): JSX.Element => (
-					<Group>
-						{treemap
-							.descendants()
-							.reverse()
-							.map((node, i) => {
-								const nodeWidth = node.x1 - node.x0 - TREEMAP_SQUARE_PADDING;
-								const nodeHeight = node.y1 - node.y0 - TREEMAP_SQUARE_PADDING;
-								if (nodeWidth < 0 || nodeHeight < 0) {
-									return null;
-								}
-								return (
-									<Group
-										// eslint-disable-next-line react/no-array-index-key
-										key={node.data.id || `node-${i}`}
-										top={node.y0 + TREEMAP_MARGINS.TOP}
-										left={node.x0 + TREEMAP_MARGINS.LEFT}
-									>
-										{node.depth > 0 && (
-											<Tooltip
-												title={`${node.data.id}: ${node.data.displayValue}%`}
-												placement="top"
-											>
-												<foreignObject
-													width={nodeWidth}
-													height={nodeHeight}
-													onClick={(): void => openMetricDetails(node.data.id, 'treemap')}
-												>
-													<div style={treemapTileStyle(node)}>
-														{`${node.data.displayValue}%`}
-													</div>
-												</foreignObject>
-											</Tooltip>
-										)}
-									</Group>
-								);
-							})}
-					</Group>
-				)}
-			</Treemap>
-		</svg>
-	);
-}
+		);
+	}
 
-function MetricsTreemap({
-	viewType,
-	data,
-	isLoading,
-	isError,
-	openMetricDetails,
-	setHeatmapView,
-}: MetricsTreemapProps): JSX.Element {
 	return (
 		<div
 			className="metrics-treemap-container"
@@ -197,16 +108,72 @@ function MetricsTreemap({
 					options={TREEMAP_VIEW_OPTIONS}
 					value={viewType}
 					onChange={setHeatmapView}
-					disabled={isLoading}
 				/>
 			</div>
-			<MetricsTreemapInternal
-				isLoading={isLoading}
-				isError={isError}
-				data={data}
-				viewType={viewType}
-				openMetricDetails={openMetricDetails}
-			/>
+			<svg
+				width={treemapWidth}
+				height={TREEMAP_HEIGHT}
+				className="metrics-treemap"
+			>
+				<rect
+					width={treemapWidth}
+					height={TREEMAP_HEIGHT}
+					rx={14}
+					fill="transparent"
+				/>
+				<Treemap<TreemapTile>
+					top={TREEMAP_MARGINS.TOP}
+					root={transformedTreemapData}
+					size={[xMax, yMax]}
+					tile={treemapBinary}
+					round
+				>
+					{(treemap): JSX.Element => (
+						<Group>
+							{treemap
+								.descendants()
+								.reverse()
+								.map((node, i) => {
+									const nodeWidth = node.x1 - node.x0 - TREEMAP_SQUARE_PADDING;
+									const nodeHeight = node.y1 - node.y0 - TREEMAP_SQUARE_PADDING;
+									if (nodeWidth < 0 || nodeHeight < 0) {
+										return null;
+									}
+									return (
+										<Group
+											// eslint-disable-next-line react/no-array-index-key
+											key={node.data.id || `node-${i}`}
+											top={node.y0 + TREEMAP_MARGINS.TOP}
+											left={node.x0 + TREEMAP_MARGINS.LEFT}
+										>
+											{node.depth > 0 && (
+												<Tooltip
+													title={`${node.data.id}: ${node.data.displayValue}%`}
+													placement="top"
+												>
+													<foreignObject
+														width={nodeWidth}
+														height={nodeHeight}
+														onClick={(): void => openMetricDetails(node.data.id, 'treemap')}
+													>
+														<div
+															style={{
+																...getTreemapTileStyle(node.data),
+																...getTreemapTileTextStyle(),
+															}}
+														>
+															{`${node.data.displayValue}%`}
+														</div>
+													</foreignObject>
+												</Tooltip>
+											)}
+										</Group>
+									);
+								})}
+						</Group>
+					)}
+				</Treemap>
+			</svg>
 		</div>
 	);
 }

frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss

@@ -38,7 +38,6 @@
 	.metrics-search-container {
 		display: flex;
 		gap: 16px;
-		align-items: center;
 
 		.metrics-search-options {
 			display: flex;

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -4,24 +4,12 @@ import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import {
-	useGetMetricsStats,
-	useGetMetricsTreemap,
-} from 'api/generated/services/metrics';
-import {
-	MetricsexplorertypesStatsRequestDTO,
-	MetricsexplorertypesTreemapModeDTO,
-	MetricsexplorertypesTreemapRequestDTO,
-	Querybuildertypesv5OrderByDTO,
-	Querybuildertypesv5OrderDirectionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import {
-	convertExpressionToFilters,
-	convertFiltersToExpression,
-} from 'components/QueryBuilderV2/utils';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
 import NoLogs from 'container/NoLogs/NoLogs';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useGetMetricsList } from 'hooks/metricsExplorer/useGetMetricsList';
+import { useGetMetricsTreeMap } from 'hooks/metricsExplorer/useGetMetricsTreeMap';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { AppState } from 'store/reducers';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -36,38 +24,32 @@ import {
 	IS_INSPECT_MODAL_OPEN_KEY,
 	IS_METRIC_DETAILS_OPEN_KEY,
 	SELECTED_METRIC_NAME_KEY,
+	SUMMARY_FILTERS_KEY,
 } from './constants';
 import MetricsSearch from './MetricsSearch';
 import MetricsTable from './MetricsTable';
 import MetricsTreemap from './MetricsTreemap';
-import { convertNanoToMilliseconds, formatDataForMetricsTable } from './utils';
+import { OrderByPayload, TreemapViewType } from './types';
+import {
+	convertNanoToMilliseconds,
+	formatDataForMetricsTable,
+	getMetricsListQuery,
+} from './utils';
 
 import './Summary.styles.scss';
 
-const DEFAULT_ORDER_BY: Querybuildertypesv5OrderByDTO = {
-	key: {
-		name: 'samples',
-	},
-	direction: Querybuildertypesv5OrderDirectionDTO.desc,
+const DEFAULT_ORDER_BY: OrderByPayload = {
+	columnName: 'samples',
+	order: 'desc',
 };
 
 function Summary(): JSX.Element {
 	const { pageSize, setPageSize } = usePageSize('metricsExplorer');
 	const [currentPage, setCurrentPage] = useState(1);
-	const [orderBy, setOrderBy] = useState<Querybuildertypesv5OrderByDTO>(
-		DEFAULT_ORDER_BY,
+	const [orderBy, setOrderBy] = useState<OrderByPayload>(DEFAULT_ORDER_BY);
+	const [heatmapView, setHeatmapView] = useState<TreemapViewType>(
+		TreemapViewType.TIMESERIES,
 	);
-	const [
-		heatmapView,
-		setHeatmapView,
-	] = useState<MetricsexplorertypesTreemapModeDTO>(
-		MetricsexplorertypesTreemapModeDTO.timeseries,
-	);
-
-	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
-	const query = useMemo(() => currentQuery?.builder?.queryData[0], [
-		currentQuery,
-	]);
 
 	const [searchParams, setSearchParams] = useSearchParams();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(
@@ -84,10 +66,16 @@ function Summary(): JSX.Element {
 		(state) => state.globalTime,
 	);
 
-	const [
-		currentQueryFilterExpression,
-		setCurrentQueryFilterExpression,
-	] = useState<string>(query?.filter?.expression || '');
+	const queryFilters: TagFilter = useMemo(() => {
+		const encodedFilters = searchParams.get(SUMMARY_FILTERS_KEY);
+		if (encodedFilters) {
+			return JSON.parse(encodedFilters);
+		}
+		return {
+			items: [],
+			op: 'AND',
+		};
+	}, [searchParams]);
 
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.TabChanged, {
@@ -100,101 +88,105 @@ function Summary(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const queryFilterExpression = useMemo(() => {
-		const filters = query.filters || { items: [], op: 'AND' };
-		return convertFiltersToExpression(filters);
-	}, [query.filters]);
+	// This is used to avoid the filters from being serialized with the id
+	const queryFiltersWithoutId = useMemo(() => {
+		const filtersWithoutId = {
+			...queryFilters,
+			items: queryFilters.items.map(({ id: _id, ...rest }) => rest),
+		};
+		return JSON.stringify(filtersWithoutId);
+	}, [queryFilters]);
 
-	const metricsListQuery: MetricsexplorertypesStatsRequestDTO = useMemo(() => {
+	const metricsListQuery = useMemo(() => {
+		const baseQuery = getMetricsListQuery();
 		return {
-			start: convertNanoToMilliseconds(minTime),
-			end: convertNanoToMilliseconds(maxTime),
+			...baseQuery,
 			limit: pageSize,
 			offset: (currentPage - 1) * pageSize,
+			filters: queryFilters,
+			start: convertNanoToMilliseconds(minTime),
+			end: convertNanoToMilliseconds(maxTime),
 			orderBy,
-			filter: {
-				expression: queryFilterExpression.expression,
-			},
 		};
-	}, [
-		minTime,
-		maxTime,
-		orderBy,
-		pageSize,
-		currentPage,
-		queryFilterExpression.expression,
-	]);
+	}, [queryFilters, minTime, maxTime, orderBy, pageSize, currentPage]);
 
-	const metricsTreemapQuery: MetricsexplorertypesTreemapRequestDTO = useMemo(
+	const metricsTreemapQuery = useMemo(
 		() => ({
 			limit: 100,
+			filters: queryFilters,
 			treemap: heatmapView,
 			start: convertNanoToMilliseconds(minTime),
 			end: convertNanoToMilliseconds(maxTime),
-			mode: heatmapView,
-			filter: {
-				expression: queryFilterExpression.expression,
-			},
 		}),
-		[heatmapView, minTime, maxTime, queryFilterExpression.expression],
+		[queryFilters, heatmapView, minTime, maxTime],
 	);
 
 	const {
 		data: metricsData,
-		mutate: getMetricsStats,
-		isLoading: isGetMetricsStatsLoading,
-		isError: isGetMetricsStatsError,
-	} = useGetMetricsStats();
+		isLoading: isMetricsLoading,
+		isFetching: isMetricsFetching,
+		isError: isMetricsError,
+	} = useGetMetricsList(metricsListQuery, {
+		enabled: !!metricsListQuery && !isInspectModalOpen,
+		queryKey: [
+			REACT_QUERY_KEY.GET_METRICS_LIST,
+			queryFiltersWithoutId,
+			orderBy,
+			pageSize,
+			currentPage,
+			minTime,
+			maxTime,
+		],
+	});
+
+	const isListViewError = useMemo(
+		() => isMetricsError || !!(metricsData && metricsData.statusCode !== 200),
+		[isMetricsError, metricsData],
+	);
 
 	const {
 		data: treeMapData,
-		mutate: getMetricsTreemap,
-		isLoading: isGetMetricsTreemapLoading,
-		isError: isGetMetricsTreemapError,
-	} = useGetMetricsTreemap();
+		isLoading: isTreeMapLoading,
+		isFetching: isTreeMapFetching,
+		isError: isTreeMapError,
+	} = useGetMetricsTreeMap(metricsTreemapQuery, {
+		enabled: !!metricsTreemapQuery && !isInspectModalOpen,
+		queryKey: [
+			'metricsTreemap',
+			queryFiltersWithoutId,
+			heatmapView,
+			minTime,
+			maxTime,
+		],
+	});
 
-	useEffect(() => {
-		getMetricsStats({
-			data: metricsListQuery,
-		});
-	}, [metricsListQuery, getMetricsStats]);
-
-	useEffect(() => {
-		getMetricsTreemap({
-			data: metricsTreemapQuery,
-		});
-	}, [metricsTreemapQuery, getMetricsTreemap]);
+	const isProportionViewError = useMemo(
+		() => isTreeMapError || treeMapData?.statusCode !== 200,
+		[isTreeMapError, treeMapData],
+	);
 
 	const handleFilterChange = useCallback(
-		(expression: string) => {
-			const newFilters: TagFilter = {
-				items: convertExpressionToFilters(expression),
-				op: 'AND',
-			};
-			redirectWithQueryBuilderData({
-				...currentQuery,
-				builder: {
-					...currentQuery.builder,
-					queryData: [
-						{
-							...currentQuery.builder.queryData[0],
-							filters: newFilters,
-							filter: {
-								expression,
-							},
-						},
-					],
-				},
+		(value: TagFilter) => {
+			setSearchParams({
+				...Object.fromEntries(searchParams.entries()),
+				[SUMMARY_FILTERS_KEY]: JSON.stringify(value),
 			});
-			setCurrentQueryFilterExpression(expression);
 			setCurrentPage(1);
-			if (expression) {
+			if (value.items.length > 0) {
 				logEvent(MetricsExplorerEvents.FilterApplied, {
 					[MetricsExplorerEventKeys.Tab]: 'summary',
 				});
 			}
 		},
-		[currentQuery, redirectWithQueryBuilderData],
+		[setSearchParams, searchParams],
+	);
+
+	const searchQuery = useMemo(
+		() => ({
+			...initialQueriesMap.metrics.builder.queryData[0],
+			filters: queryFilters,
+		}),
+		[queryFilters],
 	);
 
 	const onPaginationChange = (page: number, pageSize: number): void => {
@@ -211,7 +203,7 @@ function Summary(): JSX.Element {
 	};
 
 	const formattedMetricsData = useMemo(
-		() => formatDataForMetricsTable(metricsData?.data.metrics || []),
+		() => formatDataForMetricsTable(metricsData?.payload?.data?.metrics || []),
 		[metricsData],
 	);
 
@@ -263,9 +255,7 @@ function Summary(): JSX.Element {
 		});
 	};
 
-	const handleSetHeatmapView = (
-		view: MetricsexplorertypesTreemapModeDTO,
-	): void => {
+	const handleSetHeatmapView = (view: TreemapViewType): void => {
 		setHeatmapView(view);
 		logEvent(MetricsExplorerEvents.TreemapViewChanged, {
 			[MetricsExplorerEventKeys.Tab]: 'summary',
@@ -273,62 +263,63 @@ function Summary(): JSX.Element {
 		});
 	};
 
-	const handleSetOrderBy = (orderBy: Querybuildertypesv5OrderByDTO): void => {
+	const handleSetOrderBy = (orderBy: OrderByPayload): void => {
 		setOrderBy(orderBy);
 		logEvent(MetricsExplorerEvents.OrderByApplied, {
 			[MetricsExplorerEventKeys.Tab]: 'summary',
-			[MetricsExplorerEventKeys.ColumnName]: orderBy.key?.name,
-			[MetricsExplorerEventKeys.Order]: orderBy.direction,
+			[MetricsExplorerEventKeys.ColumnName]: orderBy.columnName,
+			[MetricsExplorerEventKeys.Order]: orderBy.order,
 		});
 	};
 
-	const isMetricsListDataEmpty =
-		formattedMetricsData.length === 0 && !isGetMetricsStatsLoading;
+	const isMetricsListDataEmpty = useMemo(
+		() =>
+			formattedMetricsData.length === 0 && !isMetricsLoading && !isMetricsFetching,
+		[formattedMetricsData, isMetricsLoading, isMetricsFetching],
+	);
 
-	const isMetricsTreeMapDataEmpty =
-		!treeMapData?.data[heatmapView]?.length && !isGetMetricsTreemapLoading;
-
-	const showFullScreenLoading =
-		(isGetMetricsStatsLoading || isGetMetricsTreemapLoading) &&
-		formattedMetricsData.length === 0 &&
-		!treeMapData?.data[heatmapView]?.length;
+	const isMetricsTreeMapDataEmpty = useMemo(
+		() =>
+			!treeMapData?.payload?.data[heatmapView]?.length &&
+			!isTreeMapLoading &&
+			!isTreeMapFetching,
+		[
+			treeMapData?.payload?.data,
+			heatmapView,
+			isTreeMapLoading,
+			isTreeMapFetching,
+		],
+	);
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-summary-tab">
-				<MetricsSearch
-					query={query}
-					onChange={handleFilterChange}
-					currentQueryFilterExpression={currentQueryFilterExpression}
-					setCurrentQueryFilterExpression={setCurrentQueryFilterExpression}
-					isLoading={isGetMetricsStatsLoading || isGetMetricsTreemapLoading}
-				/>
-				{showFullScreenLoading ? (
+				<MetricsSearch query={searchQuery} onChange={handleFilterChange} />
+				{isMetricsLoading || isTreeMapLoading ? (
 					<MetricsLoading />
 				) : isMetricsListDataEmpty && isMetricsTreeMapDataEmpty ? (
 					<NoLogs dataSource={DataSource.METRICS} />
 				) : (
 					<>
 						<MetricsTreemap
-							data={treeMapData?.data}
-							isLoading={isGetMetricsTreemapLoading}
-							isError={isGetMetricsTreemapError}
+							data={treeMapData?.payload}
+							isLoading={isTreeMapLoading || isTreeMapFetching}
+							isError={isProportionViewError}
 							viewType={heatmapView}
 							openMetricDetails={openMetricDetails}
 							setHeatmapView={handleSetHeatmapView}
 						/>
 						<MetricsTable
-							isLoading={isGetMetricsStatsLoading}
-							isError={isGetMetricsStatsError}
+							isLoading={isMetricsLoading || isMetricsFetching}
+							isError={isListViewError}
 							data={formattedMetricsData}
 							pageSize={pageSize}
 							currentPage={currentPage}
 							onPaginationChange={onPaginationChange}
 							setOrderBy={handleSetOrderBy}
-							totalCount={metricsData?.data.total || 0}
+							totalCount={metricsData?.payload?.data?.total || 0}
 							openMetricDetails={openMetricDetails}
-							queryFilterExpression={queryFilterExpression}
-							onFilterChange={handleFilterChange}
+							queryFilters={queryFilters}
 						/>
 					</>
 				)}

frontend/src/container/MetricsExplorer/Summary/__tests__/MetricTypeRenderer.test.tsx

@@ -1,63 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { render, screen } from '@testing-library/react';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
-
-import MetricTypeRenderer from '../MetricTypeRenderer';
-
-jest.mock('lucide-react', () => {
-	return {
-		__esModule: true,
-		Diff: (): JSX.Element => <svg data-testid="diff-icon" />,
-		Gauge: (): JSX.Element => <svg data-testid="gauge-icon" />,
-		BarChart2: (): JSX.Element => <svg data-testid="bar-chart-2-icon" />,
-		BarChartHorizontal: (): JSX.Element => (
-			<svg data-testid="bar-chart-horizontal-icon" />
-		),
-		BarChart: (): JSX.Element => <svg data-testid="bar-chart-icon" />,
-	};
-});
-
-describe('MetricTypeRenderer', () => {
-	it('should render correct icon and color for each metric type', () => {
-		const types = [
-			{
-				type: MetricType.SUM,
-				color: Color.BG_ROBIN_500,
-				iconTestId: 'diff-icon',
-			},
-			{
-				type: MetricType.GAUGE,
-				color: Color.BG_SAKURA_500,
-				iconTestId: 'gauge-icon',
-			},
-			{
-				type: MetricType.HISTOGRAM,
-				color: Color.BG_SIENNA_500,
-				iconTestId: 'bar-chart-2-icon',
-			},
-			{
-				type: MetricType.SUMMARY,
-				color: Color.BG_FOREST_500,
-				iconTestId: 'bar-chart-horizontal-icon',
-			},
-			{
-				type: MetricType.EXPONENTIAL_HISTOGRAM,
-				color: Color.BG_AQUA_500,
-				iconTestId: 'bar-chart-icon',
-			},
-		];
-
-		types.forEach(({ type, color, iconTestId }) => {
-			const { container } = render(<MetricTypeRenderer type={type} />);
-			const rendererDiv = container.firstChild as HTMLElement;
-
-			expect(rendererDiv).toHaveStyle({
-				backgroundColor: `${color}33`,
-				border: `1px solid ${color}`,
-				color,
-			});
-
-			expect(screen.getByTestId(iconTestId)).toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/MetricsExplorer/Summary/__tests__/MetricsTable.test.tsx

@@ -1,10 +1,10 @@
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { Filter } from 'api/v5/v5';
 import * as useGetMetricsListFilterValues from 'hooks/metricsExplorer/useGetMetricsListFilterValues';
 import * as useQueryBuilderOperationsHooks from 'hooks/queryBuilder/useQueryBuilderOperations';
 import store from 'store';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
 import MetricsTable from '../MetricsTable';
 import { MetricsListItemRowData } from '../types';
@@ -30,8 +30,9 @@ const mockData: MetricsListItemRowData[] = [
 	},
 ];
 
-const mockQueryFilterExpression: Filter = {
-	expression: '',
+const mockQueryFilters: TagFilter = {
+	items: [],
+	op: 'AND',
 };
 
 jest.mock('react-router-dom-v5-compat', () => {
@@ -81,8 +82,7 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilterExpression={mockQueryFilterExpression}
-						onFilterChange={jest.fn()}
+						queryFilters={mockQueryFilters}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -106,9 +106,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilterExpression={mockQueryFilterExpression}
+						queryFilters={mockQueryFilters}
 						isLoading
-						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -131,8 +130,7 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilterExpression={mockQueryFilterExpression}
-						onFilterChange={jest.fn()}
+						queryFilters={mockQueryFilters}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -160,8 +158,7 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilterExpression={mockQueryFilterExpression}
-						onFilterChange={jest.fn()}
+						queryFilters={mockQueryFilters}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -190,8 +187,7 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={mockOpenMetricDetails}
-						queryFilterExpression={mockQueryFilterExpression}
-						onFilterChange={jest.fn()}
+						queryFilters={mockQueryFilters}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -216,8 +212,7 @@ describe('MetricsTable', () => {
 						setOrderBy={mockSetOrderBy}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilterExpression={mockQueryFilterExpression}
-						onFilterChange={jest.fn()}
+						queryFilters={mockQueryFilters}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -227,10 +222,8 @@ describe('MetricsTable', () => {
 		fireEvent.click(samplesHeader);
 
 		expect(mockSetOrderBy).toHaveBeenCalledWith({
-			key: {
-				name: 'samples',
-			},
-			direction: 'asc',
+			columnName: 'samples',
+			order: 'asc',
 		});
 	});
 });

frontend/src/container/MetricsExplorer/Summary/__tests__/MetricsTreemap.test.tsx

@@ -1,10 +1,10 @@
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
-import { MetricsexplorertypesTreemapModeDTO } from 'api/generated/services/sigNoz.schemas';
 import store from 'store';
 
 import MetricsTreemap from '../MetricsTreemap';
+import { TreemapViewType } from '../types';
 
 jest.mock('d3-hierarchy', () => ({
 	stratify: jest.fn().mockReturnValue({
@@ -27,14 +27,14 @@ jest.mock('react-use', () => ({
 
 const mockData = [
 	{
-		metricName: 'Metric 1',
+		metric_name: 'Metric 1',
 		percentage: 0.5,
-		totalValue: 15,
+		total_value: 15,
 	},
 	{
-		metricName: 'Metric 2',
+		metric_name: 'Metric 2',
 		percentage: 0.6,
-		totalValue: 10,
+		total_value: 10,
 	},
 ];
 
@@ -47,11 +47,14 @@ describe('MetricsTreemap', () => {
 						isLoading={false}
 						isError={false}
 						data={{
-							timeseries: [mockData[0]],
-							samples: [mockData[1]],
+							status: 'success',
+							data: {
+								timeseries: [mockData[0]],
+								samples: [mockData[1]],
+							},
 						}}
 						openMetricDetails={jest.fn()}
-						viewType={MetricsexplorertypesTreemapModeDTO.samples}
+						viewType={TreemapViewType.SAMPLES}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
@@ -69,11 +72,14 @@ describe('MetricsTreemap', () => {
 						isLoading
 						isError={false}
 						data={{
-							timeseries: [mockData[0]],
-							samples: [mockData[1]],
+							status: 'success',
+							data: {
+								timeseries: [mockData[0]],
+								samples: [mockData[1]],
+							},
 						}}
 						openMetricDetails={jest.fn()}
-						viewType={MetricsexplorertypesTreemapModeDTO.samples}
+						viewType={TreemapViewType.SAMPLES}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
@@ -93,11 +99,14 @@ describe('MetricsTreemap', () => {
 						isLoading={false}
 						isError
 						data={{
-							timeseries: [mockData[0]],
-							samples: [mockData[1]],
+							status: 'success',
+							data: {
+								timeseries: [mockData[0]],
+								samples: [mockData[1]],
+							},
 						}}
 						openMetricDetails={jest.fn()}
-						viewType={MetricsexplorertypesTreemapModeDTO.samples}
+						viewType={TreemapViewType.SAMPLES}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
@@ -119,9 +128,9 @@ describe('MetricsTreemap', () => {
 					<MetricsTreemap
 						isLoading={false}
 						isError={false}
-						data={undefined}
+						data={null}
 						openMetricDetails={jest.fn()}
-						viewType={MetricsexplorertypesTreemapModeDTO.samples}
+						viewType={TreemapViewType.SAMPLES}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>

frontend/src/container/MetricsExplorer/Summary/__tests__/utils.test.tsx

@@ -1,81 +1,109 @@
+import { Color } from '@signozhq/design-tokens';
 import { render } from '@testing-library/react';
-import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
-import { Filter } from 'api/v5/v5';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
 import { TreemapViewType } from '../types';
-import { formatDataForMetricsTable, getMetricsTableColumns } from '../utils';
-
-const mockQueryExpression: Filter = {
-	expression: '',
-};
-const mockOnChange = jest.fn();
+import {
+	formatDataForMetricsTable,
+	getMetricsTableColumns,
+	MetricTypeRenderer,
+} from '../utils';
 
 describe('metricsTableColumns', () => {
+	const mockQueryFilters: TagFilter = {
+		items: [],
+		op: 'AND',
+	};
+
 	it('should have correct column definitions', () => {
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange),
-		).toHaveLength(6);
+		expect(getMetricsTableColumns(mockQueryFilters)).toHaveLength(6);
 
 		// Metric Name column
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[0].dataIndex,
-		).toBe('metric_name');
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[0].width,
-		).toBe(400);
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[0].sorter,
-		).toBe(false);
+		expect(getMetricsTableColumns(mockQueryFilters)[0].dataIndex).toBe(
+			'metric_name',
+		);
+		expect(getMetricsTableColumns(mockQueryFilters)[0].width).toBe(400);
+		expect(getMetricsTableColumns(mockQueryFilters)[0].sorter).toBe(false);
 
 		// Description column
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[1].dataIndex,
-		).toBe('description');
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[1].width,
-		).toBe(400);
+		expect(getMetricsTableColumns(mockQueryFilters)[1].dataIndex).toBe(
+			'description',
+		);
+		expect(getMetricsTableColumns(mockQueryFilters)[1].width).toBe(400);
 
 		// Type column
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[2].dataIndex,
-		).toBe('metric_type');
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[2].width,
-		).toBe(150);
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[2].sorter,
-		).toBe(false);
+		expect(getMetricsTableColumns(mockQueryFilters)[2].dataIndex).toBe(
+			'metric_type',
+		);
+		expect(getMetricsTableColumns(mockQueryFilters)[2].width).toBe(150);
+		expect(getMetricsTableColumns(mockQueryFilters)[2].sorter).toBe(false);
 
 		// Unit column
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[3].dataIndex,
-		).toBe('unit');
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[3].width,
-		).toBe(150);
+		expect(getMetricsTableColumns(mockQueryFilters)[3].dataIndex).toBe('unit');
+		expect(getMetricsTableColumns(mockQueryFilters)[3].width).toBe(150);
 
 		// Samples column
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[4].dataIndex,
-		).toBe(TreemapViewType.SAMPLES);
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[4].width,
-		).toBe(150);
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[4].sorter,
-		).toBe(true);
+		expect(getMetricsTableColumns(mockQueryFilters)[4].dataIndex).toBe(
+			TreemapViewType.SAMPLES,
+		);
+		expect(getMetricsTableColumns(mockQueryFilters)[4].width).toBe(150);
+		expect(getMetricsTableColumns(mockQueryFilters)[4].sorter).toBe(true);
 
 		// Time Series column
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[5].dataIndex,
-		).toBe(TreemapViewType.TIMESERIES);
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[5].width,
-		).toBe(150);
-		expect(
-			getMetricsTableColumns(mockQueryExpression, mockOnChange)[5].sorter,
-		).toBe(true);
+		expect(getMetricsTableColumns(mockQueryFilters)[5].dataIndex).toBe(
+			TreemapViewType.TIMESERIES,
+		);
+		expect(getMetricsTableColumns(mockQueryFilters)[5].width).toBe(150);
+		expect(getMetricsTableColumns(mockQueryFilters)[5].sorter).toBe(true);
+	});
+
+	describe('MetricTypeRenderer', () => {
+		it('should render correct icon and color for each metric type', () => {
+			const types = [
+				{
+					type: MetricType.SUM,
+					color: Color.BG_ROBIN_500,
+				},
+				{
+					type: MetricType.GAUGE,
+					color: Color.BG_SAKURA_500,
+				},
+				{
+					type: MetricType.HISTOGRAM,
+					color: Color.BG_SIENNA_500,
+				},
+				{
+					type: MetricType.SUMMARY,
+					color: Color.BG_FOREST_500,
+				},
+				{
+					type: MetricType.EXPONENTIAL_HISTOGRAM,
+					color: Color.BG_AQUA_500,
+				},
+			];
+
+			types.forEach(({ type, color }) => {
+				const { container } = render(<MetricTypeRenderer type={type} />);
+				const rendererDiv = container.firstChild as HTMLElement;
+
+				expect(rendererDiv).toHaveStyle({
+					backgroundColor: `${color}33`,
+					border: `1px solid ${color}`,
+					color,
+				});
+			});
+		});
+
+		it('should return empty icon and color for unknown metric type', () => {
+			const { container } = render(
+				<MetricTypeRenderer type={'UNKNOWN' as MetricType} />,
+			);
+			const rendererDiv = container.firstChild as HTMLElement;
+
+			expect(rendererDiv.querySelector('svg')).toBeNull();
+		});
 	});
 });
 
@@ -83,12 +111,12 @@ describe('formatDataForMetricsTable', () => {
 	it('should format metrics data correctly', () => {
 		const mockData = [
 			{
-				metricName: 'test_metric',
+				metric_name: 'test_metric',
 				description: 'Test description',
-				type: MetrictypesTypeDTO.gauge,
+				type: MetricType.GAUGE,
 				unit: 'bytes',
-				samples: 1000,
-				timeseries: 2000,
+				[TreemapViewType.SAMPLES]: 1000,
+				[TreemapViewType.TIMESERIES]: 2000,
 				lastReceived: '2023-01-01T00:00:00Z',
 			},
 		];
@@ -135,12 +163,12 @@ describe('formatDataForMetricsTable', () => {
 	it('should handle empty/null values', () => {
 		const mockData = [
 			{
-				metricName: '',
+				metric_name: '',
 				description: '',
-				type: MetrictypesTypeDTO.gauge,
+				type: MetricType.GAUGE,
 				unit: '',
-				samples: 0,
-				timeseries: 0,
+				[TreemapViewType.SAMPLES]: 0,
+				[TreemapViewType.TIMESERIES]: 0,
 				lastReceived: '2023-01-01T00:00:00Z',
 			},
 		];

frontend/src/container/MetricsExplorer/Summary/constants.ts

@@ -1,17 +1,16 @@
-import {
-	MetricsexplorertypesTreemapModeDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 
+import { TreemapViewType } from './types';
+
 export const METRICS_TABLE_PAGE_SIZE = 10;
 
 export const TREEMAP_VIEW_OPTIONS: {
-	value: MetricsexplorertypesTreemapModeDTO;
+	value: TreemapViewType;
 	label: string;
 }[] = [
-	{ value: MetricsexplorertypesTreemapModeDTO.timeseries, label: 'Time Series' },
-	{ value: MetricsexplorertypesTreemapModeDTO.samples, label: 'Samples' },
+	{ value: TreemapViewType.TIMESERIES, label: 'Time Series' },
+	{ value: TreemapViewType.SAMPLES, label: 'Samples' },
 ];
 
 export const TREEMAP_HEIGHT = 200;
@@ -19,7 +18,6 @@ export const TREEMAP_SQUARE_PADDING = 5;
 
 export const TREEMAP_MARGINS = { TOP: 10, LEFT: 10, RIGHT: 10, BOTTOM: 10 };
 
-// TODO: Remove this once API migration is complete
 export const METRIC_TYPE_LABEL_MAP = {
 	[MetricType.SUM]: 'Sum',
 	[MetricType.GAUGE]: 'Gauge',
@@ -56,3 +54,4 @@ export const METRIC_TYPE_VIEW_VALUES_MAP: Record<MetrictypesTypeDTO, string> = {
 export const IS_METRIC_DETAILS_OPEN_KEY = 'isMetricDetailsOpen';
 export const IS_INSPECT_MODAL_OPEN_KEY = 'isInspectModalOpen';
 export const SELECTED_METRIC_NAME_KEY = 'selectedMetricName';
+export const SUMMARY_FILTERS_KEY = 'summaryFilters';

frontend/src/container/MetricsExplorer/Summary/types.ts

@@ -1,11 +1,9 @@
 import React from 'react';
+import { MetricsTreeMapResponse } from 'api/metricsExplorer/getMetricsTreeMap';
 import {
-	MetricsexplorertypesTreemapModeDTO,
-	MetricsexplorertypesTreemapResponseDTO,
-	Querybuildertypesv5OrderByDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { Filter } from 'api/v5/v5';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+	IBuilderQuery,
+	TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
 
 export interface MetricsTableProps {
 	isLoading: boolean;
@@ -14,36 +12,24 @@ export interface MetricsTableProps {
 	pageSize: number;
 	currentPage: number;
 	onPaginationChange: (page: number, pageSize: number) => void;
-	setOrderBy: (orderBy: Querybuildertypesv5OrderByDTO) => void;
+	setOrderBy: (orderBy: OrderByPayload) => void;
 	totalCount: number;
 	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
-	queryFilterExpression: Filter;
-	onFilterChange: (expression: string) => void;
+	queryFilters: TagFilter;
 }
 
 export interface MetricsSearchProps {
 	query: IBuilderQuery;
-	onChange: (expression: string) => void;
-	currentQueryFilterExpression: string;
-	setCurrentQueryFilterExpression: (expression: string) => void;
-	isLoading: boolean;
+	onChange: (value: TagFilter) => void;
 }
 
 export interface MetricsTreemapProps {
-	data: MetricsexplorertypesTreemapResponseDTO | undefined;
+	data: MetricsTreeMapResponse | null | undefined;
 	isLoading: boolean;
 	isError: boolean;
-	viewType: MetricsexplorertypesTreemapModeDTO;
-	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
-	setHeatmapView: (value: MetricsexplorertypesTreemapModeDTO) => void;
-}
-
-export interface MetricsTreemapInternalProps {
-	isLoading: boolean;
-	isError: boolean;
-	data: MetricsexplorertypesTreemapResponseDTO | undefined;
-	viewType: MetricsexplorertypesTreemapModeDTO;
+	viewType: TreemapViewType;
 	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
+	setHeatmapView: (value: TreemapViewType) => void;
 }
 
 export interface OrderByPayload {

frontend/src/container/MetricsExplorer/Summary/utils.tsx

@@ -1,31 +1,40 @@
+import { useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Tooltip } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import { ColumnType } from 'antd/es/table';
+import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import {
-	MetricsexplorertypesStatDTO,
-	MetricsexplorertypesTreemapEntryDTO,
-	MetricsexplorertypesTreemapModeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { MetricsListPayload } from 'api/metricsExplorer/getMetricsList';
-import { Filter } from 'api/v5/v5';
+	MetricsListItemData,
+	MetricsListPayload,
+	MetricType,
+} from 'api/metricsExplorer/getMetricsList';
+import {
+	SamplesData,
+	TimeseriesData,
+} from 'api/metricsExplorer/getMetricsTreeMap';
 import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
+import {
+	BarChart,
+	BarChart2,
+	BarChartHorizontal,
+	Diff,
+	Gauge,
+} from 'lucide-react';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
+import { METRIC_TYPE_LABEL_MAP, METRIC_TYPE_VIEW_LABEL_MAP } from './constants';
 import MetricNameSearch from './MetricNameSearch';
-import MetricTypeViewRenderer from './MetricTypeViewRenderer';
-import { MetricsListItemRowData, TreemapTile } from './types';
+import MetricTypeSearch from './MetricTypeSearch';
+import { MetricsListItemRowData, TreemapTile, TreemapViewType } from './types';
 
 export const getMetricsTableColumns = (
-	queryFilterExpression: Filter,
-	onFilterChange: (expression: string) => void,
+	queryFilters: TagFilter,
 ): ColumnType<MetricsListItemRowData>[] => [
 	{
 		title: (
 			<div className="metric-name-column-header">
 				<span className="metric-name-column-header-text">METRIC</span>
-				<MetricNameSearch
-					queryFilterExpression={queryFilterExpression}
-					onFilterChange={onFilterChange}
-				/>
+				<MetricNameSearch queryFilters={queryFilters} />
 			</div>
 		),
 		dataIndex: 'metric_name',
@@ -47,10 +56,7 @@ export const getMetricsTableColumns = (
 		title: (
 			<div className="metric-type-column-header">
 				<span className="metric-type-column-header-text">TYPE</span>
-				{/* <MetricTypeSearch
-					queryFilters={queryFilters}
-					onFilterChange={onFilterChange}
-				/> */}
+				<MetricTypeSearch queryFilters={queryFilters} />
 			</div>
 		),
 		dataIndex: 'metric_type',
@@ -64,13 +70,13 @@ export const getMetricsTableColumns = (
 	},
 	{
 		title: 'SAMPLES',
-		dataIndex: MetricsexplorertypesTreemapModeDTO.samples,
+		dataIndex: TreemapViewType.SAMPLES,
 		width: 150,
 		sorter: true,
 	},
 	{
 		title: 'TIME SERIES',
-		dataIndex: MetricsexplorertypesTreemapModeDTO.timeseries,
+		dataIndex: TreemapViewType.TIMESERIES,
 		width: 150,
 		sorter: true,
 	},
@@ -84,6 +90,120 @@ export const getMetricsListQuery = (): MetricsListPayload => ({
 	orderBy: { columnName: 'metric_name', order: 'asc' },
 });
 
+export function MetricTypeRenderer({
+	type,
+}: {
+	type: MetricType;
+}): JSX.Element {
+	const [icon, color] = useMemo(() => {
+		switch (type) {
+			case MetricType.SUM:
+				return [
+					<Diff key={type} size={12} color={Color.BG_ROBIN_500} />,
+					Color.BG_ROBIN_500,
+				];
+			case MetricType.GAUGE:
+				return [
+					<Gauge key={type} size={12} color={Color.BG_SAKURA_500} />,
+					Color.BG_SAKURA_500,
+				];
+			case MetricType.HISTOGRAM:
+				return [
+					<BarChart2 key={type} size={12} color={Color.BG_SIENNA_500} />,
+					Color.BG_SIENNA_500,
+				];
+			case MetricType.SUMMARY:
+				return [
+					<BarChartHorizontal key={type} size={12} color={Color.BG_FOREST_500} />,
+					Color.BG_FOREST_500,
+				];
+			case MetricType.EXPONENTIAL_HISTOGRAM:
+				return [
+					<BarChart key={type} size={12} color={Color.BG_AQUA_500} />,
+					Color.BG_AQUA_500,
+				];
+			default:
+				return [null, ''];
+		}
+	}, [type]);
+
+	return (
+		<div
+			className="metric-type-renderer"
+			style={{
+				backgroundColor: `${color}33`,
+				border: `1px solid ${color}`,
+				color,
+			}}
+		>
+			{icon}
+			<Typography.Text style={{ color, fontSize: 12 }}>
+				{METRIC_TYPE_LABEL_MAP[type]}
+			</Typography.Text>
+		</div>
+	);
+}
+
+export function MetricTypeViewRenderer({
+	type,
+}: {
+	type: MetrictypesTypeDTO;
+}): JSX.Element {
+	const [icon, color] = useMemo(() => {
+		switch (type) {
+			case MetrictypesTypeDTO.sum:
+				return [
+					<Diff key={type} size={12} color={Color.BG_ROBIN_500} />,
+					Color.BG_ROBIN_500,
+				];
+			case MetrictypesTypeDTO.gauge:
+				return [
+					<Gauge key={type} size={12} color={Color.BG_SAKURA_500} />,
+					Color.BG_SAKURA_500,
+				];
+			case MetrictypesTypeDTO.histogram:
+				return [
+					<BarChart2 key={type} size={12} color={Color.BG_SIENNA_500} />,
+					Color.BG_SIENNA_500,
+				];
+			case MetrictypesTypeDTO.summary:
+				return [
+					<BarChartHorizontal key={type} size={12} color={Color.BG_FOREST_500} />,
+					Color.BG_FOREST_500,
+				];
+			case MetrictypesTypeDTO.exponentialhistogram:
+				return [
+					<BarChart key={type} size={12} color={Color.BG_AQUA_500} />,
+					Color.BG_AQUA_500,
+				];
+			default:
+				return [null, ''];
+		}
+	}, [type]);
+
+	const metricTypeRendererStyle = useMemo(
+		() => ({
+			backgroundColor: `${color}33`,
+			border: `1px solid ${color}`,
+			color,
+		}),
+		[color],
+	);
+
+	const metricTypeRendererTextStyle = useMemo(() => ({ color, fontSize: 12 }), [
+		color,
+	]);
+
+	return (
+		<div className="metric-type-renderer" style={metricTypeRendererStyle}>
+			{icon}
+			<Typography.Text style={metricTypeRendererTextStyle}>
+				{METRIC_TYPE_VIEW_LABEL_MAP[type]}
+			</Typography.Text>
+		</div>
+	);
+}
+
 function ValidateRowValueWrapper({
 	value,
 	children,
@@ -126,13 +246,13 @@ export const formatNumberIntoHumanReadableFormat = (
 };
 
 export const formatDataForMetricsTable = (
-	data: MetricsexplorertypesStatDTO[],
+	data: MetricsListItemData[],
 ): MetricsListItemRowData[] =>
 	data.map((metric) => ({
-		key: metric.metricName,
+		key: metric.metric_name,
 		metric_name: (
-			<ValidateRowValueWrapper value={metric.metricName}>
-				<Tooltip title={metric.metricName}>{metric.metricName}</Tooltip>
+			<ValidateRowValueWrapper value={metric.metric_name}>
+				<Tooltip title={metric.metric_name}>{metric.metric_name}</Tooltip>
 			</ValidateRowValueWrapper>
 		),
 		description: (
@@ -142,54 +262,39 @@ export const formatDataForMetricsTable = (
 				</Tooltip>
 			</ValidateRowValueWrapper>
 		),
-		metric_type: <MetricTypeViewRenderer type={metric.type} />,
+		metric_type: <MetricTypeRenderer type={metric.type} />,
 		unit: (
 			<ValidateRowValueWrapper value={getUniversalNameFromMetricUnit(metric.unit)}>
 				{getUniversalNameFromMetricUnit(metric.unit)}
 			</ValidateRowValueWrapper>
 		),
-		[MetricsexplorertypesTreemapModeDTO.samples]: (
-			<ValidateRowValueWrapper
-				value={metric[MetricsexplorertypesTreemapModeDTO.samples]}
-			>
-				<Tooltip
-					title={metric[MetricsexplorertypesTreemapModeDTO.samples].toLocaleString()}
-				>
-					{formatNumberIntoHumanReadableFormat(
-						metric[MetricsexplorertypesTreemapModeDTO.samples],
-					)}
+		[TreemapViewType.SAMPLES]: (
+			<ValidateRowValueWrapper value={metric[TreemapViewType.SAMPLES]}>
+				<Tooltip title={metric[TreemapViewType.SAMPLES].toLocaleString()}>
+					{formatNumberIntoHumanReadableFormat(metric[TreemapViewType.SAMPLES])}
 				</Tooltip>
 			</ValidateRowValueWrapper>
 		),
-		[MetricsexplorertypesTreemapModeDTO.timeseries]: (
-			<ValidateRowValueWrapper
-				value={metric[MetricsexplorertypesTreemapModeDTO.timeseries]}
-			>
-				<Tooltip
-					title={metric[
-						MetricsexplorertypesTreemapModeDTO.timeseries
-					].toLocaleString()}
-				>
-					{formatNumberIntoHumanReadableFormat(
-						metric[MetricsexplorertypesTreemapModeDTO.timeseries],
-					)}
+		[TreemapViewType.TIMESERIES]: (
+			<ValidateRowValueWrapper value={metric[TreemapViewType.TIMESERIES]}>
+				<Tooltip title={metric[TreemapViewType.TIMESERIES].toLocaleString()}>
+					{formatNumberIntoHumanReadableFormat(metric[TreemapViewType.TIMESERIES])}
 				</Tooltip>
 			</ValidateRowValueWrapper>
 		),
 	}));
 
 export const transformTreemapData = (
-	data: MetricsexplorertypesTreemapEntryDTO[],
-	viewType: MetricsexplorertypesTreemapModeDTO,
+	data: TimeseriesData[] | SamplesData[],
+	viewType: TreemapViewType,
 ): TreemapTile[] => {
-	const totalSize = data.reduce(
-		(acc: number, item: MetricsexplorertypesTreemapEntryDTO) =>
-			acc + item.percentage,
+	const totalSize = (data as (TimeseriesData | SamplesData)[]).reduce(
+		(acc: number, item: TimeseriesData | SamplesData) => acc + item.percentage,
 		0,
 	);
 
 	const children = data.map((item) => ({
-		id: item.metricName,
+		id: item.metric_name,
 		size: totalSize > 0 ? Number((item.percentage / totalSize).toFixed(2)) : 0,
 		displayValue: Number(item.percentage).toFixed(2),
 		parent: viewType,

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.styles.scss

@@ -169,6 +169,10 @@
 				font-weight: 400;
 				line-height: 16px; /* 133.333% */
 
+				.ant-select {
+					width: 100%;
+				}
+
 				.ant-select-selector {
 					border: none;
 					height: unset;

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx

@@ -2,6 +2,9 @@
 import { useMemo, useRef, useState } from 'react';
 import { useDrag, useDrop, XYCoord } from 'react-dnd';
 import { Button, Input, InputNumber, Select, Space, Typography } from 'antd';
+import YAxisUnitSelector from 'components/YAxisUnitSelector';
+import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { unitOptions } from 'container/NewWidget/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -204,6 +207,18 @@ function Threshold({
 		return unit !== 'none' && convertUnit(value, unit, toUnitId) === null;
 	}, [selectedGraph, yAxisUnit, tableSelectedOption, columnUnits, unit, value]);
 
+	const unitSelectCategories = useMemo(() => {
+		return unitOptions(
+			selectedGraph === PANEL_TYPES.TABLE
+				? getColumnUnit(tableSelectedOption, columnUnits || {}) || ''
+				: yAxisUnit || '',
+		);
+	}, [selectedGraph, yAxisUnit, tableSelectedOption, columnUnits]);
+
+	const unitLabel = useMemo(() => {
+		return Y_AXIS_UNIT_NAMES[unit as keyof typeof Y_AXIS_UNIT_NAMES];
+	}, [unit]);
+
 	return (
 		<div
 			ref={allowDragAndDrop ? ref : null}
@@ -313,19 +328,17 @@ function Threshold({
 						<ShowCaseValue value={value} className="unit-input" />
 					)}
 					{isEditMode ? (
-						<Select
-							defaultValue={unit}
-							options={unitOptions(
-								selectedGraph === PANEL_TYPES.TABLE
-									? getColumnUnit(tableSelectedOption, columnUnits || {}) || ''
-									: yAxisUnit || '',
-							)}
+						<YAxisUnitSelector
+							value={unit}
 							onChange={handleUnitChange}
-							showSearch
-							className="unit-selection"
+							placeholder="Select unit"
+							source={YAxisSource.DASHBOARDS}
+							initialValue={unit}
+							categoriesOverride={unitSelectCategories}
+							containerClassName="unit-selection"
 						/>
 					) : (
-						<ShowCaseValue value={unit} className="unit-selection-prev" />
+						<ShowCaseValue value={unitLabel} className="unit-selection-prev" />
 					)}
 				</div>
 				<div className="thresholds-color-selector">
@@ -356,7 +369,10 @@ function Threshold({
 					)}
 				</div>
 				{isInvalidUnitComparison && (
-					<Typography.Text className="invalid-unit">
+					<Typography.Text
+						className="invalid-unit"
+						data-testid="invalid-unit-comparison"
+					>
 						Threshold unit ({unit}) is not valid in comparison with the{' '}
 						{selectedGraph === PANEL_TYPES.TABLE ? 'column' : 'y-axis'} unit (
 						{selectedGraph === PANEL_TYPES.TABLE

frontend/src/container/NewWidget/RightContainer/Threshold/__tests__/Threshold.test.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
+import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { render, screen } from 'tests/test-utils';
 
@@ -14,12 +16,26 @@ jest.mock('lib/query/createTableColumnsFromQuery', () => ({
 	),
 }));
 
-// Mock the unitOptions function
+// Mock the unitOptions function to return YAxisCategory-shaped data
 jest.mock('container/NewWidget/utils', () => ({
 	unitOptions: jest.fn(() => [
-		{ value: 'none', label: 'None' },
-		{ value: '%', label: 'Percent (0 - 100)' },
-		{ value: 'ms', label: 'Milliseconds (ms)' },
+		{
+			name: 'Mock Category',
+			units: [
+				{
+					id: UniversalYAxisUnit.NONE,
+					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NONE],
+				},
+				{
+					id: UniversalYAxisUnit.PERCENT,
+					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
+				},
+				{
+					id: UniversalYAxisUnit.MILLISECONDS,
+					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MILLISECONDS],
+				},
+			],
+		},
 	]),
 }));
 
@@ -28,7 +44,7 @@ const defaultProps = {
 	keyIndex: 0,
 	thresholdOperator: '>' as const,
 	thresholdValue: 50,
-	thresholdUnit: 'none',
+	thresholdUnit: UniversalYAxisUnit.NONE,
 	thresholdColor: 'Red',
 	thresholdFormat: 'Text' as const,
 	isEditEnabled: true,
@@ -38,8 +54,11 @@ const defaultProps = {
 		{ value: 'memory_usage', label: 'Memory Usage' },
 	],
 	thresholdTableOptions: 'cpu_usage',
-	columnUnits: { cpu_usage: 'percent', memory_usage: 'bytes' },
-	yAxisUnit: '%',
+	columnUnits: {
+		cpu_usage: UniversalYAxisUnit.PERCENT,
+		memory_usage: UniversalYAxisUnit.BYTES,
+	},
+	yAxisUnit: UniversalYAxisUnit.PERCENT,
 	moveThreshold: jest.fn(),
 };
 
@@ -68,28 +87,27 @@ describe('Threshold Component Unit Validation', () => {
 	it('should show validation error when threshold unit is not "none" and units are incompatible', () => {
 		// Act - Render component with incompatible units (ms vs percent)
 		renderThreshold({
-			thresholdUnit: 'ms',
+			thresholdUnit: UniversalYAxisUnit.MILLISECONDS,
 			thresholdValue: 50,
 		});
 
+		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(
-			screen.getByText(
-				/Threshold unit \(ms\) is not valid in comparison with the column unit \(percent\)/i,
-			),
-		).toBeInTheDocument();
+		expect(errorMessage.textContent).toBe(
+			`Threshold unit (${UniversalYAxisUnit.MILLISECONDS}) is not valid in comparison with the column unit (${UniversalYAxisUnit.PERCENT})`,
+		);
 	});
 
 	it('should not show validation error when threshold unit matches column unit', () => {
 		// Act - Render component with matching units
 		renderThreshold({
-			thresholdUnit: 'percent',
+			thresholdUnit: UniversalYAxisUnit.PERCENT,
 			thresholdValue: 50,
 		});
 
 		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
+			screen.queryByTestId('invalid-unit-comparison'),
 		).not.toBeInTheDocument();
 	});
 
@@ -97,17 +115,16 @@ describe('Threshold Component Unit Validation', () => {
 		// Act - Render component for time series with incompatible units
 		renderThreshold({
 			selectedGraph: PANEL_TYPES.TIME_SERIES,
-			thresholdUnit: 'ms',
+			thresholdUnit: UniversalYAxisUnit.MILLISECONDS,
 			thresholdValue: 100,
-			yAxisUnit: 'percent',
+			yAxisUnit: UniversalYAxisUnit.PERCENT,
 		});
 
+		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(
-			screen.getByText(
-				/Threshold unit \(ms\) is not valid in comparison with the y-axis unit \(percent\)/i,
-			),
-		).toBeInTheDocument();
+		expect(errorMessage.textContent).toBe(
+			`Threshold unit (${UniversalYAxisUnit.MILLISECONDS}) is not valid in comparison with the y-axis unit (${UniversalYAxisUnit.PERCENT})`,
+		);
 	});
 
 	it('should not show validation error for time series graph when threshold unit is "none"', () => {
@@ -116,43 +133,39 @@ describe('Threshold Component Unit Validation', () => {
 			selectedGraph: PANEL_TYPES.TIME_SERIES,
 			thresholdUnit: 'none',
 			thresholdValue: 100,
-			yAxisUnit: 'percent',
+			yAxisUnit: UniversalYAxisUnit.PERCENT,
 		});
-
-		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
+			screen.queryByTestId('invalid-unit-comparison'),
 		).not.toBeInTheDocument();
 	});
 
 	it('should not show validation error when threshold unit is compatible with column unit', () => {
 		// Act - Render component with compatible units (both in same category - Time)
 		renderThreshold({
-			thresholdUnit: 's',
+			thresholdUnit: UniversalYAxisUnit.SECONDS,
 			thresholdValue: 100,
-			columnUnits: { cpu_usage: 'ms' },
+			columnUnits: { cpu_usage: UniversalYAxisUnit.MILLISECONDS },
 			thresholdTableOptions: 'cpu_usage',
 		});
-
 		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
+			screen.queryByTestId('invalid-unit-comparison'),
 		).not.toBeInTheDocument();
 	});
 
 	it('should show validation error when threshold unit is in different category than column unit', () => {
 		// Act - Render component with units from different categories
 		renderThreshold({
-			thresholdUnit: 'bytes',
+			thresholdUnit: UniversalYAxisUnit.BYTES,
 			thresholdValue: 100,
-			yAxisUnit: 'percent',
+			yAxisUnit: UniversalYAxisUnit.PERCENT,
 		});
 
+		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(
-			screen.getByText(
-				/Threshold unit \(bytes\) is not valid in comparison with the column unit \(percent\)/i,
-			),
-		).toBeInTheDocument();
+		expect(errorMessage.textContent).toBe(
+			`Threshold unit (${UniversalYAxisUnit.BYTES}) is not valid in comparison with the column unit (${UniversalYAxisUnit.PERCENT})`,
+		);
 	});
 });

frontend/src/container/NewWidget/utils.ts

@@ -1,9 +1,12 @@
 import { Layout } from 'react-grid-layout';
-import { DefaultOptionType } from 'antd/es/select';
 import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import { PrecisionOptionsEnum } from 'components/Graph/types';
 import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
+import {
+	UniversalYAxisUnit,
+	YAxisCategory,
+	YAxisSource,
+} from 'components/YAxisUnitSelector/types';
 import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
 import {
 	initialQueryBuilderFormValuesMap,
@@ -606,7 +609,7 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
  */
 export const getCategorySelectOptionByName = (
 	name?: YAxisCategoryNames,
-): DefaultOptionType[] => {
+): { name: string; id: UniversalYAxisUnit }[] => {
 	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
 	if (!categories.length) {
 		return [];
@@ -615,8 +618,8 @@ export const getCategorySelectOptionByName = (
 		categories
 			.find((category) => category.name === name)
 			?.units.map((unit) => ({
-				label: unit.name,
-				value: unit.id,
+				name: unit.name,
+				id: unit.id,
 			})) || []
 	);
 };
@@ -628,19 +631,19 @@ export const getCategorySelectOptionByName = (
  * select options. If a valid category is found, it filters the supported categories
  * to return only the options for the matched category.
  */
-export const unitOptions = (columnUnit: string): DefaultOptionType[] => {
+export const unitOptions = (columnUnit: string): YAxisCategory[] => {
 	const category = getCategoryName(columnUnit);
 	if (isEmpty(category)) {
 		return categoryToSupport.map((category) => ({
-			label: category,
-			options: getCategorySelectOptionByName(category),
+			name: category,
+			units: getCategorySelectOptionByName(category),
 		}));
 	}
 	return categoryToSupport
 		.filter((supportedCategory) => supportedCategory === category)
 		.map((filteredCategory) => ({
-			label: filteredCategory,
-			options: getCategorySelectOptionByName(filteredCategory),
+			name: filteredCategory,
+			units: getCategorySelectOptionByName(filteredCategory),
 		}));
 };
 

frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx

@@ -19,7 +19,6 @@ interface RunQueryBtnProps {
 	handleCancelQuery?: () => void;
 	onStageRunQuery?: () => void;
 	queryRangeKey?: QueryKey;
-	disabled?: boolean;
 }
 
 function RunQueryBtn({
@@ -29,7 +28,6 @@ function RunQueryBtn({
 	handleCancelQuery,
 	onStageRunQuery,
 	queryRangeKey,
-	disabled,
 }: RunQueryBtnProps): JSX.Element {
 	const isMac = getUserOperatingSystem() === UserOperatingSystem.MACOS;
 	const queryClient = useQueryClient();
@@ -63,7 +61,7 @@ function RunQueryBtn({
 		<Button
 			type="primary"
 			className={cx('run-query-btn periscope-btn primary', className)}
-			disabled={isLoading || !onStageRunQuery || disabled}
+			disabled={isLoading || !onStageRunQuery}
 			onClick={onStageRunQuery}
 			icon={<Play size={14} />}
 		>

pkg/modules/user/config.go

@@ -22,7 +22,8 @@ type RootConfig struct {
 }
 
 type OrgConfig struct {
-	Name string `mapstructure:"name"`
+	ID   valuer.UUID `mapstructure:"id"`
+	Name string      `mapstructure:"name"`
 }
 
 type PasswordConfig struct {

pkg/modules/user/impluser/service.go

@@ -78,6 +78,43 @@ func (s *service) Stop(ctx context.Context) error {
 }
 
 func (s *service) reconcile(ctx context.Context) error {
+	if !s.config.Org.ID.IsZero() {
+		return s.reconcileWithOrgID(ctx)
+	}
+
+	return s.reconcileByName(ctx)
+}
+
+func (s *service) reconcileWithOrgID(ctx context.Context) error {
+	org, err := s.orgGetter.Get(ctx, s.config.Org.ID)
+	if err != nil {
+		if !errors.Ast(err, errors.TypeNotFound) {
+			return err // something really went wrong
+		}
+
+		// org was not found using id check if we can find an org using name
+
+		existingOrgByName, nameErr := s.orgGetter.GetByName(ctx, s.config.Org.Name)
+		if nameErr != nil && !errors.Ast(nameErr, errors.TypeNotFound) {
+			return nameErr // something really went wrong
+		}
+
+		// we found an org using name
+		if existingOrgByName != nil {
+			// the existing org has the same name as config but org id is different inform user with actionable message
+			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "organization with name %q already exists with a different ID %s (expected %s)", s.config.Org.Name, existingOrgByName.ID.StringValue(), s.config.Org.ID.StringValue())
+		}
+
+		// default - we did not found any org using id and name both - create a new org
+		newOrg := types.NewOrganizationWithID(s.config.Org.ID, s.config.Org.Name, s.config.Org.Name)
+		_, err = s.module.CreateFirstUser(ctx, newOrg, s.config.Email.String(), s.config.Email, s.config.Password)
+		return err
+	}
+
+	return s.reconcileRootUser(ctx, org.ID)
+}
+
+func (s *service) reconcileByName(ctx context.Context) error {
 	org, err := s.orgGetter.GetByName(ctx, s.config.Org.Name)
 	if err != nil {
 		if errors.Ast(err, errors.TypeNotFound) {

pkg/telemetrymetrics/statement_builder.go

@@ -159,6 +159,23 @@ func (b *MetricQueryStatementBuilder) buildPipelineStatement(
 			query.Aggregations[0].TimeAggregation = metrictypes.TimeAggregationIncrease
 		}
 		query.Aggregations[0].SpaceAggregation = metrictypes.SpaceAggregationSum
+
+		// check for origTimeAgg's and origSpaceAgg's validity
+		if origTimeAgg.IsZero() || !origTimeAgg.IsValid() {
+			return nil, errors.Newf(
+				errors.TypeInvalidInput,
+				errors.CodeInvalidInput,
+				"invalid time aggregation, should be one of the following: [`rate`, `increase`]",
+			)
+		}
+
+		if origSpaceAgg.IsZero() || !origSpaceAgg.IsValid() {
+			return nil, errors.Newf(
+				errors.TypeInvalidInput,
+				errors.CodeInvalidInput,
+				"invalid space aggregation, should be one of the following: [`count`, `p50`, `p75`, `p90`, `p95`, `p99`]",
+			)
+		}
 	}
 
 	var timeSeriesCTE string
@@ -523,11 +540,26 @@ func (b *MetricQueryStatementBuilder) buildSpatialAggregationCTE(
 	query qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation],
 	_ map[string][]*telemetrytypes.TelemetryFieldKey,
 ) (string, []any, error) {
-	if query.Aggregations[0].SpaceAggregation.IsZero() {
+	if query.Aggregations[0].SpaceAggregation.IsZero() || !query.Aggregations[0].SpaceAggregation.IsValid() {
+		if query.Aggregations[0].Type.IsPercentileSpaceAggregationAllowed() {
+			return "", nil, errors.Newf(
+				errors.TypeInvalidInput,
+				errors.CodeInvalidInput,
+				"invalid space aggregation, should be one of the following: [`sum`, `avg`, `min`, `max`, `count`, `p50`, `p75`, `p90`, `p95`, `p99`]",
+			)
+		} else {
+			return "", nil, errors.Newf(
+				errors.TypeInvalidInput,
+				errors.CodeInvalidInput,
+				"invalid space aggregation, should be one of the following: [`sum`, `avg`, `min`, `max`, `count`]",
+			)
+		}
+	}
+	if query.Aggregations[0].SpaceAggregation.IsPercentile() && !query.Aggregations[0].Type.IsPercentileSpaceAggregationAllowed() {
 		return "", nil, errors.Newf(
 			errors.TypeInvalidInput,
 			errors.CodeInvalidInput,
-			"invalid space aggregation, should be one of the following: [`sum`, `avg`, `min`, `max`, `count`, `p50`, `p75`, `p90`, `p95`, `p99`]",
+			"percentile based aggregations are invalid for this metric, should be one of the following: [`sum`, `avg`, `min`, `max`, `count`]",
 		)
 	}
 	sb := sqlbuilder.NewSelectBuilder()

pkg/telemetrymetrics/stmt_builder_test.go

@@ -122,7 +122,7 @@ func TestStatementBuilder(t *testing.T) {
 			expectedErr: nil,
 		},
 		{
-			name:        "test_histogram_percentile",
+			name:        "test_histogram_percentile1",
 			requestType: qbtypes.RequestTypeTimeSeries,
 			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
 				Signal:       telemetrytypes.SignalMetrics,
@@ -132,6 +132,7 @@ func TestStatementBuilder(t *testing.T) {
 						MetricName:       "signoz_latency",
 						Type:             metrictypes.HistogramType,
 						Temporality:      metrictypes.Delta,
+						TimeAggregation:  metrictypes.TimeAggregationRate,
 						SpaceAggregation: metrictypes.SpaceAggregationPercentile95,
 					},
 				},
@@ -187,7 +188,7 @@ func TestStatementBuilder(t *testing.T) {
 			expectedErr: nil,
 		},
 		{
-			name:        "test_histogram_percentile",
+			name:        "test_histogram_percentile2",
 			requestType: qbtypes.RequestTypeTimeSeries,
 			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
 				Signal:       telemetrytypes.SignalMetrics,
@@ -197,6 +198,7 @@ func TestStatementBuilder(t *testing.T) {
 						MetricName:       "http_server_duration_bucket",
 						Type:             metrictypes.HistogramType,
 						Temporality:      metrictypes.Cumulative,
+						TimeAggregation:  metrictypes.TimeAggregationRate,
 						SpaceAggregation: metrictypes.SpaceAggregationPercentile95,
 					},
 				},
@@ -211,7 +213,7 @@ func TestStatementBuilder(t *testing.T) {
 			},
 			expected: qbtypes.Statement{
 				Query: "WITH __temporal_aggregation_cte AS (SELECT ts, `service.name`, `le`, multiIf(row_number() OVER rate_window = 1, nan, (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) / (ts - lagInFrame(ts, 1) OVER rate_window)) AS per_series_value FROM (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, `le`, max(value) AS per_series_value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name`, JSONExtractString(labels, 'le') AS `le` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? GROUP BY fingerprint, `service.name`, `le`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY fingerprint, ts, `service.name`, `le` ORDER BY fingerprint, ts) WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint, ts)), __spatial_aggregation_cte AS (SELECT ts, `service.name`, `le`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`, `le`) SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte GROUP BY `service.name`, ts ORDER BY `service.name`, ts",
-				Args:  []any{"http_server_duration_bucket", uint64(1747936800000), uint64(1747983420000), "cumulative", false, "http_server_duration_bucket", uint64(1747947390000), uint64(1747983420000), 0},
+				Args:  []any{"http_server_duration_bucket", uint64(1747936800000), uint64(1747983420000), "cumulative", false, "http_server_duration_bucket", uint64(1747947360000), uint64(1747983420000), 0},
 			},
 			expectedErr: nil,
 		},

pkg/types/metrictypes/metrictypes.go

@@ -3,6 +3,7 @@ package metrictypes
 import (
 	"database/sql/driver"
 	"fmt"
+	"slices"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -135,6 +136,10 @@ func (t *Type) Scan(src interface{}) error {
 	return nil
 }
 
+func (t Type) IsPercentileSpaceAggregationAllowed() bool {
+	return t == HistogramType || t == ExpHistogramType || t == SummaryType
+}
+
 var (
 	GaugeType        = Type{valuer.NewString("gauge")}
 	SumType          = Type{valuer.NewString("sum")}
@@ -185,6 +190,10 @@ func (TimeAggregation) Enum() []any {
 	}
 }
 
+func (t TimeAggregation) IsValid() bool {
+	return slices.ContainsFunc(t.Enum(), func(v any) bool { return v == t })
+}
+
 type SpaceAggregation struct {
 	valuer.String
 }
@@ -218,6 +227,10 @@ func (SpaceAggregation) Enum() []any {
 	}
 }
 
+func (s SpaceAggregation) IsValid() bool {
+	return slices.ContainsFunc(s.Enum(), func(v any) bool { return v == s })
+}
+
 func (s SpaceAggregation) IsPercentile() bool {
 	return s == SpaceAggregationPercentile50 ||
 		s == SpaceAggregationPercentile75 ||

pkg/types/organization.go

@@ -41,6 +41,21 @@ func NewOrganization(displayName string, name string) *Organization {
 	}
 }
 
+func NewOrganizationWithID(id valuer.UUID, displayName string, name string) *Organization {
+	return &Organization{
+		Identifiable: Identifiable{
+			ID: id,
+		},
+		TimeAuditable: TimeAuditable{
+			CreatedAt: time.Now(),
+			UpdatedAt: time.Now(),
+		},
+		Name:        name,
+		DisplayName: displayName,
+		Key:         NewOrganizationKey(id),
+	}
+}
+
 func NewOrganizationKey(orgID valuer.UUID) uint32 {
 	hasher := fnv.New32a()