chore: corresponding fix for generated api changes

.github/workflows/integrationci.yaml

@@ -54,7 +54,7 @@ jobs:
           - sqlite
         clickhouse-version:
           - 25.5.6
-          - 25.12.5
+          - 25.10.5
         schema-migrator-version:
           - v0.142.0
         postgres-version:

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

@@ -86,6 +86,7 @@ interface QuerySearchProps {
 	signalSource?: string;
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
+	showFilterSuggestionsWithoutMetric?: boolean;
 }
 
 function QuerySearch({
@@ -96,6 +97,7 @@ function QuerySearch({
 	onRun,
 	signalSource,
 	hardcodedAttributeKeys,
+	showFilterSuggestionsWithoutMetric,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -252,7 +254,8 @@ function QuerySearch({
 		async (searchText?: string): Promise<void> => {
 			if (
 				dataSource === DataSource.METRICS &&
-				!queryData.aggregateAttribute?.key
+				!queryData.aggregateAttribute?.key &&
+				!showFilterSuggestionsWithoutMetric
 			) {
 				setKeySuggestions([]);
 				return;
@@ -301,6 +304,7 @@ function QuerySearch({
 			queryData.aggregateAttribute?.key,
 			signalSource,
 			hardcodedAttributeKeys,
+			showFilterSuggestionsWithoutMetric,
 		],
 	);
 
@@ -1562,6 +1566,7 @@ 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/YAxisUnitSelector/__tests__/utils.test.tsx

@@ -1,5 +1,4 @@
-import { YAxisCategoryNames } from '../constants';
-import { UniversalYAxisUnit, YAxisCategory } from '../types';
+import { UniversalYAxisUnit } from '../types';
 import {
 	getUniversalNameFromMetricUnit,
 	mapMetricUnitToUniversalUnit,
@@ -42,29 +41,29 @@ describe('YAxisUnitSelector utils', () => {
 
 	describe('mergeCategories', () => {
 		it('merges categories correctly', () => {
-			const categories1: YAxisCategory[] = [
+			const categories1 = [
 				{
-					name: YAxisCategoryNames.Data,
+					name: 'Data',
 					units: [
 						{ name: 'bytes', id: UniversalYAxisUnit.BYTES },
 						{ name: 'kilobytes', id: UniversalYAxisUnit.KILOBYTES },
 					],
 				},
 			];
-			const categories2: YAxisCategory[] = [
+			const categories2 = [
 				{
-					name: YAxisCategoryNames.Data,
+					name: 'Data',
 					units: [{ name: 'bits', id: UniversalYAxisUnit.BITS }],
 				},
 				{
-					name: YAxisCategoryNames.Time,
+					name: 'Time',
 					units: [{ name: 'seconds', id: UniversalYAxisUnit.SECONDS }],
 				},
 			];
 			const mergedCategories = mergeCategories(categories1, categories2);
 			expect(mergedCategories).toEqual([
 				{
-					name: YAxisCategoryNames.Data,
+					name: 'Data',
 					units: [
 						{ name: 'bytes', id: UniversalYAxisUnit.BYTES },
 						{ name: 'kilobytes', id: UniversalYAxisUnit.KILOBYTES },
@@ -72,7 +71,7 @@ describe('YAxisUnitSelector utils', () => {
 					],
 				},
 				{
-					name: YAxisCategoryNames.Time,
+					name: 'Time',
 					units: [{ name: 'seconds', id: UniversalYAxisUnit.SECONDS }],
 				},
 			]);

frontend/src/components/YAxisUnitSelector/constants.ts

@@ -1,36 +1,5 @@
 import { UnitFamilyConfig, UniversalYAxisUnit, YAxisUnit } from './types';
 
-export enum YAxisCategoryNames {
-	Time = 'Time',
-	Data = 'Data',
-	DataRate = 'Data Rate',
-	Count = 'Count',
-	Operations = 'Operations',
-	Percentage = 'Percentage',
-	Boolean = 'Boolean',
-	None = 'None',
-	HashRate = 'Hash Rate',
-	Miscellaneous = 'Miscellaneous',
-	Acceleration = 'Acceleration',
-	Angular = 'Angular',
-	Area = 'Area',
-	Flops = 'FLOPs',
-	Concentration = 'Concentration',
-	Currency = 'Currency',
-	Datetime = 'Datetime',
-	PowerElectrical = 'Power/Electrical',
-	Flow = 'Flow',
-	Force = 'Force',
-	Mass = 'Mass',
-	Length = 'Length',
-	Pressure = 'Pressure',
-	Radiation = 'Radiation',
-	RotationSpeed = 'Rotation Speed',
-	Temperature = 'Temperature',
-	Velocity = 'Velocity',
-	Volume = 'Volume',
-}
-
 // Mapping of universal y-axis units to their AWS, UCUM, and OpenMetrics equivalents (if available)
 export const UniversalYAxisUnitMappings: Partial<
 	Record<UniversalYAxisUnit, Set<YAxisUnit> | null>

frontend/src/components/YAxisUnitSelector/data.ts

@@ -1,11 +1,10 @@
 import { Y_AXIS_UNIT_NAMES } from './constants';
-import { YAxisCategoryNames } from './constants';
 import { UniversalYAxisUnit, YAxisCategory } from './types';
 
 // Base categories for the universal y-axis units
 export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 	{
-		name: YAxisCategoryNames.Time,
+		name: 'Time',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.SECONDS],
@@ -38,7 +37,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Data,
+		name: 'Data',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES],
@@ -155,7 +154,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.DataRate,
+		name: 'Data Rate',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES_SECOND],
@@ -296,7 +295,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Count,
+		name: 'Count',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT],
@@ -313,7 +312,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Operations,
+		name: 'Operations',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.OPS_SECOND],
@@ -354,7 +353,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Percentage,
+		name: 'Percentage',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
@@ -367,7 +366,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Boolean,
+		name: 'Boolean',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TRUE_FALSE],
@@ -383,7 +382,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 
 export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 	{
-		name: YAxisCategoryNames.Time,
+		name: 'Time',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DURATION_MS],
@@ -420,7 +419,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.DataRate,
+		name: 'Data Rate',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DATA_RATE_PACKETS_PER_SECOND],
@@ -429,7 +428,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Boolean,
+		name: 'Boolean',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ON_OFF],
@@ -438,7 +437,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.None,
+		name: 'None',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NONE],
@@ -447,7 +446,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.HashRate,
+		name: 'Hash Rate',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.HASH_RATE_HASHES_PER_SECOND],
@@ -480,7 +479,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Miscellaneous,
+		name: 'Miscellaneous',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MISC_STRING],
@@ -521,7 +520,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Acceleration,
+		name: 'Acceleration',
 		units: [
 			{
 				name:
@@ -542,7 +541,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Angular,
+		name: 'Angular',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ANGULAR_DEGREE],
@@ -567,7 +566,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Area,
+		name: 'Area',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.AREA_SQUARE_METERS],
@@ -584,7 +583,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Flops,
+		name: 'FLOPs',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FLOPS_FLOPS],
@@ -621,7 +620,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Concentration,
+		name: 'Concentration',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.CONCENTRATION_PPM],
@@ -678,7 +677,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Currency,
+		name: 'Currency',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.CURRENCY_USD],
@@ -775,7 +774,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Datetime,
+		name: 'Datetime',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DATETIME_ISO],
@@ -812,7 +811,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.PowerElectrical,
+		name: 'Power/Electrical',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.POWER_WATT],
@@ -969,7 +968,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Flow,
+		name: 'Flow',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FLOW_GALLONS_PER_MINUTE],
@@ -1006,7 +1005,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Force,
+		name: 'Force',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FORCE_NEWTON_METERS],
@@ -1027,7 +1026,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Mass,
+		name: 'Mass',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MASS_MILLIGRAM],
@@ -1052,7 +1051,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Length,
+		name: 'Length',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.LENGTH_MILLIMETER],
@@ -1081,7 +1080,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Pressure,
+		name: 'Pressure',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PRESSURE_MILLIBAR],
@@ -1118,7 +1117,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Radiation,
+		name: 'Radiation',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.RADIATION_BECQUEREL],
@@ -1175,7 +1174,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.RotationSpeed,
+		name: 'Rotation Speed',
 		units: [
 			{
 				name:
@@ -1201,7 +1200,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Temperature,
+		name: 'Temperature',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TEMPERATURE_CELSIUS],
@@ -1218,7 +1217,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Velocity,
+		name: 'Velocity',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.VELOCITY_METERS_PER_SECOND],
@@ -1239,7 +1238,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Volume,
+		name: 'Volume',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.VOLUME_MILLILITER],

frontend/src/components/YAxisUnitSelector/types.ts

@@ -1,5 +1,3 @@
-import { YAxisCategoryNames } from './constants';
-
 export interface YAxisUnitSelectorProps {
 	value: string | undefined;
 	onChange: (value: UniversalYAxisUnit) => void;
@@ -671,7 +669,7 @@ export interface UnitFamilyConfig {
 }
 
 export interface YAxisCategory {
-	name: YAxisCategoryNames;
+	name: string;
 	units: {
 		name: string;
 		id: UniversalYAxisUnit;

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -172,51 +172,23 @@ function ExplorerOptions({
 	const { user } = useAppContext();
 
 	const handleConditionalQueryModification = useCallback(
-		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(defaultQuery: Query | null): string => {
 			const queryToUse = defaultQuery || query;
-			if (!queryToUse) {
-				throw new Error('No query provided');
-			}
 			if (
 				queryToUse?.builder?.queryData?.[0]?.aggregateOperator !==
-					StringOperators.NOOP &&
-				sourcepage !== DataSource.LOGS
+				StringOperators.NOOP
 			) {
 				return JSON.stringify(queryToUse);
 			}
 
-			// Convert NOOP to COUNT for alerts and strip orderBy for logs
+			// Modify aggregateOperator to count, as noop is not supported in alerts
 			const modifiedQuery = cloneDeep(queryToUse);
-			if (modifiedQuery && modifiedQuery.builder?.queryData) {
-				modifiedQuery.builder.queryData = modifiedQuery.builder.queryData.map(
-					(item) => {
-						const updatedItem = { ...item };
 
-						if (updatedItem.aggregateOperator === StringOperators.NOOP) {
-							updatedItem.aggregateOperator = StringOperators.COUNT;
-						}
+			modifiedQuery.builder.queryData[0].aggregateOperator = StringOperators.COUNT;
 
-						// Alerts do not support order by on logs explorer queries
-						if (sourcepage === DataSource.LOGS && panelType === PANEL_TYPES.LIST) {
-							updatedItem.orderBy = [];
-						}
-
-						return updatedItem;
-					},
-				);
-			}
-
-			try {
-				return JSON.stringify(modifiedQuery);
-			} catch (err) {
-				throw new Error(
-					'Failed to stringify modified query: ' +
-						(err instanceof Error ? err.message : String(err)),
-				);
-			}
+			return JSON.stringify(modifiedQuery);
 		},
-		[panelType, query, sourcepage],
+		[query],
 	);
 
 	const onCreateAlertsHandler = useCallback(
@@ -785,9 +757,9 @@ function ExplorerOptions({
 		);
 	}, [
 		disabled,
-		query,
 		isOneChartPerQuery,
 		onCreateAlertsHandler,
+		query,
 		splitedQueries,
 	]);
 

frontend/src/container/ExplorerOptions/__tests__/ExplorerOptionWrapper.test.tsx

@@ -1,4 +1,3 @@
-import { useHistory } from 'react-router-dom';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { MOCK_QUERY } from 'container/QueryTable/Drilldown/__tests__/mockTableData';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
@@ -16,11 +15,6 @@ import { getExplorerToolBarVisibility } from '../utils';
 // Mock dependencies
 jest.mock('hooks/dashboard/useUpdateDashboard');
 
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useHistory: jest.fn(),
-}));
-
 jest.mock('../utils', () => ({
 	getExplorerToolBarVisibility: jest.fn(),
 	generateRGBAFromHex: jest.fn(() => 'rgba(0, 0, 0, 0.08)'),
@@ -35,7 +29,6 @@ const mockGetExplorerToolBarVisibility = jest.mocked(
 );
 
 const mockUseUpdateDashboard = jest.mocked(useUpdateDashboard);
-const mockUseHistory = jest.mocked(useHistory);
 
 // Mock data
 const TEST_QUERY_ID = 'test-query-id';
@@ -110,6 +103,7 @@ describe('ExplorerOptionWrapper', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockGetExplorerToolBarVisibility.mockReturnValue(true);
+
 		// Mock useUpdateDashboard to return a mutation object
 		mockUseUpdateDashboard.mockReturnValue(({
 			mutate: jest.fn(),
@@ -123,28 +117,6 @@ describe('ExplorerOptionWrapper', () => {
 		} as unknown) as ReturnType<typeof useUpdateDashboard>);
 	});
 
-	it('should navigate to alert creation page when "Create an Alert" is clicked in logs-explorer', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const mockPush = jest.fn();
-		mockUseHistory.mockReturnValue(({
-			push: mockPush,
-		} as unknown) as ReturnType<typeof useHistory>);
-
-		renderExplorerOptionWrapper({ sourcepage: DataSource.LOGS });
-
-		const createAlertButton = screen.getByRole('button', {
-			name: 'Create an Alert',
-		});
-		await user.click(createAlertButton);
-
-		expect(mockPush).toHaveBeenCalledTimes(1);
-		const calledWith = mockPush.mock.calls[0][0] as string;
-		const [path, search = ''] = calledWith.split('?');
-		expect(path).toBe('/alerts/new');
-		const params = new URLSearchParams(search);
-		expect(params.has('compositeQuery')).toBe(true);
-	});
-
 	describe('onExport functionality', () => {
 		it('should call onExport when New Dashboard button is clicked in export modal', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });

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

@@ -21,7 +21,7 @@ import {
 	METRIC_TYPE_LABEL_MAP,
 	METRIC_TYPE_VALUES_MAP,
 } from '../Summary/constants';
-import { MetricTypeRenderer } from '../Summary/utils';
+import MetricTypeRenderer from '../Summary/MetricTypeRenderer';
 import { METRIC_METADATA_KEYS } from './constants';
 import { MetadataProps } from './types';
 import { determineIsMonotonic } from './utils';

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

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useSearchParams } from 'react-router-dom-v5-compat';
 import {
 	Button,
 	Empty,
@@ -10,22 +9,24 @@ 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({
-	queryFilters,
+	queryFilterExpression,
+	onFilterChange,
 }: {
-	queryFilters: TagFilter;
+	queryFilterExpression: Filter;
+	onFilterChange: (value: string) => void;
 }): JSX.Element {
-	const [searchParams, setSearchParams] = useSearchParams();
-
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 	const [searchString, setSearchString] = useState<string>('');
 	const [debouncedSearchString, setDebouncedSearchString] = useState<string>('');
@@ -67,9 +68,12 @@ function MetricNameSearch({
 
 	const handleSelect = useCallback(
 		(selectedMetricName: string): void => {
+			const queryFilters = convertExpressionToFilters(
+				queryFilterExpression.expression,
+			);
 			const newFilters = {
 				items: [
-					...queryFilters.items,
+					...queryFilters,
 					{
 						id: 'metric_name',
 						op: 'CONTAINS',
@@ -83,13 +87,11 @@ function MetricNameSearch({
 				],
 				op: 'and',
 			};
-			setSearchParams({
-				...Object.fromEntries(searchParams.entries()),
-				[SUMMARY_FILTERS_KEY]: JSON.stringify(newFilters),
-			});
+			const newFilterExpression = convertFiltersToExpression(newFilters);
+			onFilterChange(newFilterExpression.expression);
 			setIsPopoverOpen(false);
 		},
-		[queryFilters.items, setSearchParams, searchParams],
+		[queryFilterExpression, onFilterChange],
 	);
 
 	const metricNameFilterValues = useMemo(

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

@@ -0,0 +1,76 @@
+import { useCallback, 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 = useCallback(
+		(color: string) => ({
+			backgroundColor: `${color}33`,
+			border: `1px solid ${color}`,
+			color,
+		}),
+		[],
+	);
+
+	const metricTypeRendererTextStyle = useCallback(
+		(color: string) => ({
+			color,
+			fontSize: 12,
+		}),
+		[],
+	);
+
+	return (
+		<div className="metric-type-renderer" style={metricTypeRendererStyle(color)}>
+			{icon}
+			<Typography.Text style={metricTypeRendererTextStyle(color)}>
+				{METRIC_TYPE_LABEL_MAP[type]}
+			</Typography.Text>
+		</div>
+	);
+}
+
+export default MetricTypeRenderer;

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

@@ -0,0 +1,79 @@
+import { useCallback, 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_LABEL_MAP_V2 } from './constants';
+
+export function MetricTypeRendererV2({
+	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 = useCallback(
+		(color: string) => ({
+			backgroundColor: `${color}33`,
+			border: `1px solid ${color}`,
+			color,
+		}),
+		[],
+	);
+
+	const metricTypeRendererTextStyle = useCallback(
+		(color: string) => ({
+			color,
+			fontSize: 12,
+		}),
+		[],
+	);
+
+	return (
+		<div className="metric-type-renderer" style={metricTypeRendererStyle(color)}>
+			{icon}
+			<Typography.Text style={metricTypeRendererTextStyle(color)}>
+				{METRIC_TYPE_LABEL_MAP_V2[type]}
+			</Typography.Text>
+		</div>
+	);
+}
+
+export default MetricTypeRendererV2;

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

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

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

@@ -1,27 +1,55 @@
+import { useCallback } from 'react';
 import { Tooltip } from 'antd';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import { HardHat, Info } from 'lucide-react';
+import { Info } from 'lucide-react';
+import { DataSource } from 'types/common/queryBuilder';
 
 import { MetricsSearchProps } from './types';
 
-function MetricsSearch({ query, onChange }: MetricsSearchProps): JSX.Element {
+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]);
+
 	return (
 		<div className="metrics-search-container">
-			<div className="qb-search-container">
+			<div data-testid="qb-search-container" 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>
-				<QueryBuilderSearch
-					query={query}
-					onChange={onChange}
-					suffixIcon={<HardHat size={16} />}
-					isMetricsExplorer
+				<QuerySearch
+					onChange={handleOnChange}
+					dataSource={DataSource.METRICS}
+					queryData={{
+						...query,
+						filter: {
+							...query?.filter,
+							expression: currentQueryFilterExpression,
+						},
+					}}
+					onRun={handleOnChange}
+					showFilterSuggestionsWithoutMetric
 				/>
 			</div>
+			<RunQueryBtn onStageRunQuery={handleStageAndRunQuery} disabled={isLoading} />
 			<div className="metrics-search-options">
 				<DateTimeSelectionV2
 					showAutoRefresh={false}

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

@@ -9,6 +9,7 @@ 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';
@@ -24,7 +25,8 @@ function MetricsTable({
 	setOrderBy,
 	totalCount,
 	openMetricDetails,
-	queryFilters,
+	queryFilterExpression,
+	onFilterChange,
 }: MetricsTableProps): JSX.Element {
 	const handleTableChange: TableProps<MetricsListItemRowData>['onChange'] = useCallback(
 		(
@@ -36,13 +38,20 @@ function MetricsTable({
 		): void => {
 			if ('field' in sorter && sorter.order) {
 				setOrderBy({
-					columnName: sorter.field as string,
-					order: sorter.order === 'ascend' ? 'asc' : 'desc',
+					key: {
+						name: sorter.field as string,
+					},
+					direction:
+						sorter.order === 'ascend'
+							? Querybuildertypesv5OrderDirectionDTO.asc
+							: Querybuildertypesv5OrderDirectionDTO.desc,
 				});
 			} else {
 				setOrderBy({
-					columnName: 'samples',
-					order: 'desc',
+					key: {
+						name: 'samples',
+					},
+					direction: Querybuildertypesv5OrderDirectionDTO.desc,
 				});
 			}
 		},
@@ -51,19 +60,17 @@ function MetricsTable({
 
 	return (
 		<div className="metrics-table-container">
-			{!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>
-			)}
+			<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,
@@ -75,7 +82,7 @@ function MetricsTable({
 					),
 				}}
 				dataSource={data}
-				columns={getMetricsTableColumns(queryFilters)}
+				columns={getMetricsTableColumns(queryFilterExpression, onFilterChange)}
 				locale={{
 					emptyText: isLoading ? null : (
 						<div

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

@@ -1,9 +1,10 @@
-import { useMemo } from 'react';
+import { useCallback, 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 { stratify, treemapBinary } from 'd3-hierarchy';
+import { MetricsexplorertypesTreemapModeDTO } from 'api/generated/services/sigNoz.schemas';
+import { HierarchyNode, stratify, treemapBinary } from 'd3-hierarchy';
 import { Info } from 'lucide-react';
 
 import {
@@ -12,21 +13,20 @@ import {
 	TREEMAP_SQUARE_PADDING,
 	TREEMAP_VIEW_OPTIONS,
 } from './constants';
-import { MetricsTreemapProps, TreemapTile, TreemapViewType } from './types';
+import { MetricsTreemapProps, TreemapContentProps, TreemapTile } from './types';
 import {
 	getTreemapTileStyle,
 	getTreemapTileTextStyle,
 	transformTreemapData,
 } from './utils';
 
-function MetricsTreemap({
-	viewType,
-	data,
+function TreemapContent({
 	isLoading,
 	isError,
+	data,
+	viewType,
 	openMetricDetails,
-	setHeatmapView,
-}: MetricsTreemapProps): JSX.Element {
+}: TreemapContentProps): JSX.Element {
 	const { width: windowWidth } = useWindowSize();
 
 	const treemapWidth = useMemo(
@@ -40,9 +40,9 @@ function MetricsTreemap({
 
 	const treemapData = useMemo(() => {
 		const extracedTreemapData =
-			(viewType === TreemapViewType.TIMESERIES
-				? data?.data?.[TreemapViewType.TIMESERIES]
-				: data?.data?.[TreemapViewType.SAMPLES]) || [];
+			(viewType === MetricsexplorertypesTreemapModeDTO.timeseries
+				? data?.timeseries
+				: data?.samples) || [];
 		return transformTreemapData(extracedTreemapData, viewType);
 	}, [data, viewType]);
 
@@ -54,41 +54,126 @@ function MetricsTreemap({
 	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={{ width: treemapWidth, height: TREEMAP_HEIGHT + 55 }}
-					active
-				/>
+				<Skeleton style={treemapStylesWithoutPadding} active />
 			</div>
 		);
 	}
 
-	if (
-		!data ||
-		!data.data ||
-		(data?.status === 'success' && !data?.data?.[viewType])
-	) {
-		return (
-			<Empty
-				description="No metrics found"
-				data-testid="metrics-treemap-empty-state"
-				style={{ width: treemapWidth, height: TREEMAP_HEIGHT, paddingTop: 30 }}
-			/>
-		);
-	}
-
-	if (data?.status === 'error' || isError) {
+	if (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 }}
+				style={treemapStylesWithPadding}
 			/>
 		);
 	}
 
+	if (!data || !data?.[viewType]?.length) {
+		return (
+			<Empty
+				description="No metrics found"
+				data-testid="metrics-treemap-empty-state"
+				style={treemapStylesWithPadding}
+			/>
+		);
+	}
+
+	return (
+		<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={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"
@@ -108,72 +193,16 @@ function MetricsTreemap({
 					options={TREEMAP_VIEW_OPTIONS}
 					value={viewType}
 					onChange={setHeatmapView}
+					disabled={isLoading}
 				/>
 			</div>
-			<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>
+			<TreemapContent
+				isLoading={isLoading}
+				isError={isError}
+				data={data}
+				viewType={viewType}
+				openMetricDetails={openMetricDetails}
+			/>
 		</div>
 	);
 }

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

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

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

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

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

@@ -0,0 +1,52 @@
+import { Color } from '@signozhq/design-tokens';
+import { render } from '@testing-library/react';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
+
+import MetricTypeRenderer from '../MetricTypeRenderer';
+
+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();
+	});
+});

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,9 +30,8 @@ const mockData: MetricsListItemRowData[] = [
 	},
 ];
 
-const mockQueryFilters: TagFilter = {
-	items: [],
-	op: 'AND',
+const mockQueryFilterExpression: Filter = {
+	expression: '',
 };
 
 jest.mock('react-router-dom-v5-compat', () => {
@@ -82,7 +81,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -106,8 +106,9 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
 						isLoading
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -130,7 +131,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -158,7 +160,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -187,7 +190,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={mockOpenMetricDetails}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -212,7 +216,8 @@ describe('MetricsTable', () => {
 						setOrderBy={mockSetOrderBy}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -222,8 +227,10 @@ describe('MetricsTable', () => {
 		fireEvent.click(samplesHeader);
 
 		expect(mockSetOrderBy).toHaveBeenCalledWith({
-			columnName: 'samples',
-			order: 'asc',
+			key: {
+				name: 'samples',
+			},
+			direction: '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 = [
 	{
-		metric_name: 'Metric 1',
+		metricName: 'Metric 1',
 		percentage: 0.5,
-		total_value: 15,
+		totalValue: 15,
 	},
 	{
-		metric_name: 'Metric 2',
+		metricName: 'Metric 2',
 		percentage: 0.6,
-		total_value: 10,
+		totalValue: 10,
 	},
 ];
 
@@ -47,14 +47,11 @@ describe('MetricsTreemap', () => {
 						isLoading={false}
 						isError={false}
 						data={{
-							status: 'success',
-							data: {
-								timeseries: [mockData[0]],
-								samples: [mockData[1]],
-							},
+							timeseries: [mockData[0]],
+							samples: [mockData[1]],
 						}}
 						openMetricDetails={jest.fn()}
-						viewType={TreemapViewType.SAMPLES}
+						viewType={MetricsexplorertypesTreemapModeDTO.samples}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
@@ -72,14 +69,11 @@ describe('MetricsTreemap', () => {
 						isLoading
 						isError={false}
 						data={{
-							status: 'success',
-							data: {
-								timeseries: [mockData[0]],
-								samples: [mockData[1]],
-							},
+							timeseries: [mockData[0]],
+							samples: [mockData[1]],
 						}}
 						openMetricDetails={jest.fn()}
-						viewType={TreemapViewType.SAMPLES}
+						viewType={MetricsexplorertypesTreemapModeDTO.samples}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
@@ -99,14 +93,11 @@ describe('MetricsTreemap', () => {
 						isLoading={false}
 						isError
 						data={{
-							status: 'success',
-							data: {
-								timeseries: [mockData[0]],
-								samples: [mockData[1]],
-							},
+							timeseries: [mockData[0]],
+							samples: [mockData[1]],
 						}}
 						openMetricDetails={jest.fn()}
-						viewType={TreemapViewType.SAMPLES}
+						viewType={MetricsexplorertypesTreemapModeDTO.samples}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
@@ -130,7 +121,7 @@ describe('MetricsTreemap', () => {
 						isError={false}
 						data={null}
 						openMetricDetails={jest.fn()}
-						viewType={TreemapViewType.SAMPLES}
+						viewType={MetricsexplorertypesTreemapModeDTO.samples}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>

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

@@ -1,109 +1,81 @@
-import { Color } from '@signozhq/design-tokens';
 import { render } from '@testing-library/react';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import { Filter } from 'api/v5/v5';
 import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
 import { TreemapViewType } from '../types';
-import {
-	formatDataForMetricsTable,
-	getMetricsTableColumns,
-	MetricTypeRenderer,
-} from '../utils';
+import { formatDataForMetricsTable, getMetricsTableColumns } from '../utils';
+
+const mockQueryExpression: Filter = {
+	expression: '',
+};
+const mockOnChange = jest.fn();
 
 describe('metricsTableColumns', () => {
-	const mockQueryFilters: TagFilter = {
-		items: [],
-		op: 'AND',
-	};
-
 	it('should have correct column definitions', () => {
-		expect(getMetricsTableColumns(mockQueryFilters)).toHaveLength(6);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange),
+		).toHaveLength(6);
 
 		// Metric Name column
-		expect(getMetricsTableColumns(mockQueryFilters)[0].dataIndex).toBe(
-			'metric_name',
-		);
-		expect(getMetricsTableColumns(mockQueryFilters)[0].width).toBe(400);
-		expect(getMetricsTableColumns(mockQueryFilters)[0].sorter).toBe(false);
+		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);
 
 		// Description column
-		expect(getMetricsTableColumns(mockQueryFilters)[1].dataIndex).toBe(
-			'description',
-		);
-		expect(getMetricsTableColumns(mockQueryFilters)[1].width).toBe(400);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[1].dataIndex,
+		).toBe('description');
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[1].width,
+		).toBe(400);
 
 		// Type column
-		expect(getMetricsTableColumns(mockQueryFilters)[2].dataIndex).toBe(
-			'metric_type',
-		);
-		expect(getMetricsTableColumns(mockQueryFilters)[2].width).toBe(150);
-		expect(getMetricsTableColumns(mockQueryFilters)[2].sorter).toBe(false);
+		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);
 
 		// Unit column
-		expect(getMetricsTableColumns(mockQueryFilters)[3].dataIndex).toBe('unit');
-		expect(getMetricsTableColumns(mockQueryFilters)[3].width).toBe(150);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[3].dataIndex,
+		).toBe('unit');
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[3].width,
+		).toBe(150);
 
 		// Samples column
-		expect(getMetricsTableColumns(mockQueryFilters)[4].dataIndex).toBe(
-			TreemapViewType.SAMPLES,
-		);
-		expect(getMetricsTableColumns(mockQueryFilters)[4].width).toBe(150);
-		expect(getMetricsTableColumns(mockQueryFilters)[4].sorter).toBe(true);
+		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);
 
 		// Time Series column
-		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();
-		});
+		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);
 	});
 });
 
@@ -111,12 +83,12 @@ describe('formatDataForMetricsTable', () => {
 	it('should format metrics data correctly', () => {
 		const mockData = [
 			{
-				metric_name: 'test_metric',
+				metricName: 'test_metric',
 				description: 'Test description',
-				type: MetricType.GAUGE,
+				type: MetrictypesTypeDTO.gauge,
 				unit: 'bytes',
-				[TreemapViewType.SAMPLES]: 1000,
-				[TreemapViewType.TIMESERIES]: 2000,
+				samples: 1000,
+				timeseries: 2000,
 				lastReceived: '2023-01-01T00:00:00Z',
 			},
 		];
@@ -163,12 +135,12 @@ describe('formatDataForMetricsTable', () => {
 	it('should handle empty/null values', () => {
 		const mockData = [
 			{
-				metric_name: '',
+				metricName: '',
 				description: '',
-				type: MetricType.GAUGE,
+				type: MetrictypesTypeDTO.gauge,
 				unit: '',
-				[TreemapViewType.SAMPLES]: 0,
-				[TreemapViewType.TIMESERIES]: 0,
+				samples: 0,
+				timeseries: 0,
 				lastReceived: '2023-01-01T00:00:00Z',
 			},
 		];

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

@@ -1,15 +1,17 @@
+import {
+	MetricsexplorertypesTreemapModeDTO,
+	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: TreemapViewType;
+	value: MetricsexplorertypesTreemapModeDTO;
 	label: string;
 }[] = [
-	{ value: TreemapViewType.TIMESERIES, label: 'Time Series' },
-	{ value: TreemapViewType.SAMPLES, label: 'Samples' },
+	{ value: MetricsexplorertypesTreemapModeDTO.timeseries, label: 'Time Series' },
+	{ value: MetricsexplorertypesTreemapModeDTO.samples, label: 'Samples' },
 ];
 
 export const TREEMAP_HEIGHT = 200;
@@ -17,6 +19,7 @@ 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',
@@ -25,6 +28,14 @@ export const METRIC_TYPE_LABEL_MAP = {
 	[MetricType.EXPONENTIAL_HISTOGRAM]: 'Exp. Histogram',
 };
 
+export const METRIC_TYPE_LABEL_MAP_V2 = {
+	[MetrictypesTypeDTO.sum]: 'Sum',
+	[MetrictypesTypeDTO.gauge]: 'Gauge',
+	[MetrictypesTypeDTO.histogram]: 'Histogram',
+	[MetrictypesTypeDTO.summary]: 'Summary',
+	[MetrictypesTypeDTO.exponentialhistogram]: 'Exp. Histogram',
+};
+
 export const METRIC_TYPE_VALUES_MAP = {
 	[MetricType.SUM]: 'Sum',
 	[MetricType.GAUGE]: 'Gauge',
@@ -36,4 +47,3 @@ export const METRIC_TYPE_VALUES_MAP = {
 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,9 +1,11 @@
 import React from 'react';
-import { MetricsTreeMapResponse } from 'api/metricsExplorer/getMetricsTreeMap';
 import {
-	IBuilderQuery,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
+	MetricsexplorertypesTreemapModeDTO,
+	MetricsexplorertypesTreemapResponseDTO,
+	Querybuildertypesv5OrderByDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { Filter } from 'api/v5/v5';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 export interface MetricsTableProps {
 	isLoading: boolean;
@@ -12,24 +14,36 @@ export interface MetricsTableProps {
 	pageSize: number;
 	currentPage: number;
 	onPaginationChange: (page: number, pageSize: number) => void;
-	setOrderBy: (orderBy: OrderByPayload) => void;
+	setOrderBy: (orderBy: Querybuildertypesv5OrderByDTO) => void;
 	totalCount: number;
 	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
-	queryFilters: TagFilter;
+	queryFilterExpression: Filter;
+	onFilterChange: (expression: string) => void;
 }
 
 export interface MetricsSearchProps {
 	query: IBuilderQuery;
-	onChange: (value: TagFilter) => void;
+	onChange: (expression: string) => void;
+	currentQueryFilterExpression: string;
+	setCurrentQueryFilterExpression: (expression: string) => void;
+	isLoading: boolean;
 }
 
 export interface MetricsTreemapProps {
-	data: MetricsTreeMapResponse | null | undefined;
+	data: MetricsexplorertypesTreemapResponseDTO | null | undefined;
 	isLoading: boolean;
 	isError: boolean;
-	viewType: TreemapViewType;
+	viewType: MetricsexplorertypesTreemapModeDTO;
+	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
+	setHeatmapView: (value: MetricsexplorertypesTreemapModeDTO) => void;
+}
+
+export interface TreemapContentProps {
+	isLoading: boolean;
+	isError: boolean;
+	data: MetricsexplorertypesTreemapResponseDTO | null | undefined;
+	viewType: MetricsexplorertypesTreemapModeDTO;
 	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
-	setHeatmapView: (value: TreemapViewType) => void;
 }
 
 export interface OrderByPayload {

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

@@ -1,39 +1,31 @@
-import { useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Tooltip, Typography } from 'antd';
+import { Tooltip } from 'antd';
 import { ColumnType } from 'antd/es/table';
 import {
-	MetricsListItemData,
-	MetricsListPayload,
-	MetricType,
-} from 'api/metricsExplorer/getMetricsList';
-import {
-	SamplesData,
-	TimeseriesData,
-} from 'api/metricsExplorer/getMetricsTreeMap';
+	MetricsexplorertypesStatDTO,
+	MetricsexplorertypesTreemapEntryDTO,
+	MetricsexplorertypesTreemapModeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { MetricsListPayload } from 'api/metricsExplorer/getMetricsList';
+import { Filter } from 'api/v5/v5';
 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 } from './constants';
 import MetricNameSearch from './MetricNameSearch';
-import MetricTypeSearch from './MetricTypeSearch';
-import { MetricsListItemRowData, TreemapTile, TreemapViewType } from './types';
+import MetricTypeRendererV2 from './MetricTypeRendererV2';
+import { MetricsListItemRowData, TreemapTile } from './types';
 
 export const getMetricsTableColumns = (
-	queryFilters: TagFilter,
+	queryFilterExpression: Filter,
+	onFilterChange: (expression: string) => void,
 ): ColumnType<MetricsListItemRowData>[] => [
 	{
 		title: (
 			<div className="metric-name-column-header">
 				<span className="metric-name-column-header-text">METRIC</span>
-				<MetricNameSearch queryFilters={queryFilters} />
+				<MetricNameSearch
+					queryFilterExpression={queryFilterExpression}
+					onFilterChange={onFilterChange}
+				/>
 			</div>
 		),
 		dataIndex: 'metric_name',
@@ -55,7 +47,11 @@ export const getMetricsTableColumns = (
 		title: (
 			<div className="metric-type-column-header">
 				<span className="metric-type-column-header-text">TYPE</span>
-				<MetricTypeSearch queryFilters={queryFilters} />
+				{/* TODO: @amlannandy: Re-enable once API supports metric type filtering */}
+				{/* <MetricTypeSearch
+					queryFilters={queryFilters}
+					onFilterChange={onFilterChange}
+				/> */}
 			</div>
 		),
 		dataIndex: 'metric_type',
@@ -69,13 +65,13 @@ export const getMetricsTableColumns = (
 	},
 	{
 		title: 'SAMPLES',
-		dataIndex: TreemapViewType.SAMPLES,
+		dataIndex: MetricsexplorertypesTreemapModeDTO.samples,
 		width: 150,
 		sorter: true,
 	},
 	{
 		title: 'TIME SERIES',
-		dataIndex: TreemapViewType.TIMESERIES,
+		dataIndex: MetricsexplorertypesTreemapModeDTO.timeseries,
 		width: 150,
 		sorter: true,
 	},
@@ -89,60 +85,6 @@ 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>
-	);
-}
-
 function ValidateRowValueWrapper({
 	value,
 	children,
@@ -182,13 +124,13 @@ export const formatNumberIntoHumanReadableFormat = (
 };
 
 export const formatDataForMetricsTable = (
-	data: MetricsListItemData[],
+	data: MetricsexplorertypesStatDTO[],
 ): MetricsListItemRowData[] =>
 	data.map((metric) => ({
-		key: metric.metric_name,
+		key: metric.metricName,
 		metric_name: (
-			<ValidateRowValueWrapper value={metric.metric_name}>
-				<Tooltip title={metric.metric_name}>{metric.metric_name}</Tooltip>
+			<ValidateRowValueWrapper value={metric.metricName}>
+				<Tooltip title={metric.metricName}>{metric.metricName}</Tooltip>
 			</ValidateRowValueWrapper>
 		),
 		description: (
@@ -198,39 +140,54 @@ export const formatDataForMetricsTable = (
 				</Tooltip>
 			</ValidateRowValueWrapper>
 		),
-		metric_type: <MetricTypeRenderer type={metric.type} />,
+		metric_type: <MetricTypeRendererV2 type={metric.type} />,
 		unit: (
 			<ValidateRowValueWrapper value={getUniversalNameFromMetricUnit(metric.unit)}>
 				{getUniversalNameFromMetricUnit(metric.unit)}
 			</ValidateRowValueWrapper>
 		),
-		[TreemapViewType.SAMPLES]: (
-			<ValidateRowValueWrapper value={metric[TreemapViewType.SAMPLES]}>
-				<Tooltip title={metric[TreemapViewType.SAMPLES].toLocaleString()}>
-					{formatNumberIntoHumanReadableFormat(metric[TreemapViewType.SAMPLES])}
+		[MetricsexplorertypesTreemapModeDTO.samples]: (
+			<ValidateRowValueWrapper
+				value={metric[MetricsexplorertypesTreemapModeDTO.samples]}
+			>
+				<Tooltip
+					title={metric[MetricsexplorertypesTreemapModeDTO.samples].toLocaleString()}
+				>
+					{formatNumberIntoHumanReadableFormat(
+						metric[MetricsexplorertypesTreemapModeDTO.samples],
+					)}
 				</Tooltip>
 			</ValidateRowValueWrapper>
 		),
-		[TreemapViewType.TIMESERIES]: (
-			<ValidateRowValueWrapper value={metric[TreemapViewType.TIMESERIES]}>
-				<Tooltip title={metric[TreemapViewType.TIMESERIES].toLocaleString()}>
-					{formatNumberIntoHumanReadableFormat(metric[TreemapViewType.TIMESERIES])}
+		[MetricsexplorertypesTreemapModeDTO.timeseries]: (
+			<ValidateRowValueWrapper
+				value={metric[MetricsexplorertypesTreemapModeDTO.timeseries]}
+			>
+				<Tooltip
+					title={metric[
+						MetricsexplorertypesTreemapModeDTO.timeseries
+					].toLocaleString()}
+				>
+					{formatNumberIntoHumanReadableFormat(
+						metric[MetricsexplorertypesTreemapModeDTO.timeseries],
+					)}
 				</Tooltip>
 			</ValidateRowValueWrapper>
 		),
 	}));
 
 export const transformTreemapData = (
-	data: TimeseriesData[] | SamplesData[],
-	viewType: TreemapViewType,
+	data: MetricsexplorertypesTreemapEntryDTO[],
+	viewType: MetricsexplorertypesTreemapModeDTO,
 ): TreemapTile[] => {
-	const totalSize = (data as (TimeseriesData | SamplesData)[]).reduce(
-		(acc: number, item: TimeseriesData | SamplesData) => acc + item.percentage,
+	const totalSize = data.reduce(
+		(acc: number, item: MetricsexplorertypesTreemapEntryDTO) =>
+			acc + item.percentage,
 		0,
 	);
 
 	const children = data.map((item) => ({
-		id: item.metric_name,
+		id: item.metricName,
 		size: totalSize > 0 ? Number((item.percentage / totalSize).toFixed(2)) : 0,
 		displayValue: Number(item.percentage).toFixed(2),
 		parent: viewType,

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

@@ -18,8 +18,8 @@ jest.mock('lib/query/createTableColumnsFromQuery', () => ({
 jest.mock('container/NewWidget/utils', () => ({
 	unitOptions: jest.fn(() => [
 		{ value: 'none', label: 'None' },
-		{ value: '%', label: 'Percent (0 - 100)' },
-		{ value: 'ms', label: 'Milliseconds (ms)' },
+		{ value: 'percent', label: 'Percent' },
+		{ value: 'ms', label: 'Milliseconds' },
 	]),
 }));
 
@@ -39,7 +39,7 @@ const defaultProps = {
 	],
 	thresholdTableOptions: 'cpu_usage',
 	columnUnits: { cpu_usage: 'percent', memory_usage: 'bytes' },
-	yAxisUnit: '%',
+	yAxisUnit: 'percent',
 	moveThreshold: jest.fn(),
 };
 

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

@@ -0,0 +1,99 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { AutoComplete, Input, Typography } from 'antd';
+import { find } from 'lodash-es';
+
+import { flattenedCategories } from './dataFormatCategories';
+
+const findCategoryById = (
+	searchValue: string,
+): Record<string, string> | undefined =>
+	find(flattenedCategories, (option) => option.id === searchValue);
+const findCategoryByName = (
+	searchValue: string,
+): Record<string, string> | undefined =>
+	find(flattenedCategories, (option) => option.name === searchValue);
+
+type OnSelectType = Dispatch<SetStateAction<string>> | ((val: string) => void);
+
+/**
+ * @deprecated Use DashboardYAxisUnitSelectorWrapper instead.
+ */
+function YAxisUnitSelector({
+	value,
+	onSelect,
+	fieldLabel,
+	handleClear,
+}: {
+	value: string;
+	onSelect: OnSelectType;
+	fieldLabel: string;
+	handleClear?: () => void;
+}): JSX.Element {
+	const [inputValue, setInputValue] = useState('');
+
+	// Sync input value with the actual value prop
+	useEffect(() => {
+		const category = findCategoryById(value);
+		setInputValue(category?.name || '');
+	}, [value]);
+
+	const onSelectHandler = (selectedValue: string): void => {
+		const category = findCategoryByName(selectedValue);
+		if (category) {
+			onSelect(category.id);
+			setInputValue(selectedValue);
+		}
+	};
+
+	const onChangeHandler = (inputValue: string): void => {
+		setInputValue(inputValue);
+		// Clear the yAxisUnit if input is empty or doesn't match any option
+		if (!inputValue) {
+			onSelect('');
+		}
+	};
+
+	const onClearHandler = (): void => {
+		setInputValue('');
+		onSelect('');
+		if (handleClear) {
+			handleClear();
+		}
+	};
+
+	const options = flattenedCategories.map((options) => ({
+		value: options.name,
+	}));
+
+	return (
+		<div className="y-axis-unit-selector">
+			<Typography.Text className="heading">{fieldLabel}</Typography.Text>
+			<AutoComplete
+				style={{ width: '100%' }}
+				rootClassName="y-axis-root-popover"
+				options={options}
+				allowClear
+				value={inputValue}
+				onChange={onChangeHandler}
+				onClear={onClearHandler}
+				onSelect={onSelectHandler}
+				filterOption={(inputValue, option): boolean => {
+					if (option) {
+						return (
+							option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+						);
+					}
+					return false;
+				}}
+			>
+				<Input placeholder="Unit" rootClassName="input" />
+			</AutoComplete>
+		</div>
+	);
+}
+
+export default YAxisUnitSelector;
+
+YAxisUnitSelector.defaultProps = {
+	handleClear: (): void => {},
+};

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

@@ -0,0 +1,240 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { act } from 'react-dom/test-utils';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import YAxisUnitSelector from '../YAxisUnitSelector';
+
+// Mock the dataFormatCategories to have predictable test data
+jest.mock('../dataFormatCategories', () => ({
+	flattenedCategories: [
+		{ id: 'seconds', name: 'seconds (s)' },
+		{ id: 'milliseconds', name: 'milliseconds (ms)' },
+		{ id: 'hours', name: 'hours (h)' },
+		{ id: 'minutes', name: 'minutes (m)' },
+	],
+}));
+
+const MOCK_SECONDS = 'seconds';
+const MOCK_MILLISECONDS = 'milliseconds';
+
+describe('YAxisUnitSelector', () => {
+	const defaultProps = {
+		value: MOCK_SECONDS,
+		onSelect: jest.fn(),
+		fieldLabel: 'Y Axis Unit',
+		handleClear: jest.fn(),
+	};
+
+	let user: ReturnType<typeof userEvent.setup>;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		user = userEvent.setup();
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	describe('Rendering (Read) & (write)', () => {
+		it('renders with correct field label', () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			expect(screen.getByText('Y Axis Unit')).toBeInTheDocument();
+			const input = screen.getByRole('combobox');
+
+			expect(input).toHaveValue('seconds (s)');
+		});
+
+		it('renders with custom field label', () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel="Custom Unit Label"
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			expect(screen.getByText('Custom Unit Label')).toBeInTheDocument();
+		});
+
+		it('displays empty input when value prop is empty', () => {
+			render(
+				<YAxisUnitSelector
+					value=""
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			expect(screen.getByDisplayValue('')).toBeInTheDocument();
+		});
+
+		it('shows placeholder text', () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			expect(screen.getByPlaceholderText('Unit')).toBeInTheDocument();
+		});
+
+		it('handles numeric input', async () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			await user.clear(input);
+			await user.type(input, '12345');
+			expect(input).toHaveValue('12345');
+		});
+
+		it('handles mixed content input', async () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			await user.clear(input);
+			await user.type(input, 'Test123!@#');
+			expect(input).toHaveValue('Test123!@#');
+		});
+	});
+
+	describe('State Management', () => {
+		it('syncs input value with value prop changes', async () => {
+			const { rerender } = render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			// Initial value
+			expect(input).toHaveValue('seconds (s)');
+
+			// Change value prop
+			rerender(
+				<YAxisUnitSelector
+					value={MOCK_MILLISECONDS}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+
+			await waitFor(() => {
+				expect(input).toHaveValue('milliseconds (ms)');
+			});
+		});
+
+		it('handles empty value prop correctly', async () => {
+			const { rerender } = render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			// Change to empty value
+			rerender(
+				<YAxisUnitSelector
+					value=""
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+
+			await waitFor(() => {
+				expect(input).toHaveValue('');
+			});
+		});
+
+		it('handles invalid value prop gracefully', async () => {
+			const { rerender } = render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			// Change to invalid value
+			rerender(
+				<YAxisUnitSelector
+					value="invalid_id"
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+
+			await waitFor(() => {
+				expect(input).toHaveValue('');
+			});
+		});
+
+		it('maintains local state during typing', async () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			// first clear then type
+			await user.clear(input);
+			await user.type(input, 'test');
+			expect(input).toHaveValue('test');
+
+			// Value prop change should not override local typing
+			await act(async () => {
+				// Simulate prop change
+				render(
+					<YAxisUnitSelector
+						value="bytes"
+						onSelect={defaultProps.onSelect}
+						fieldLabel={defaultProps.fieldLabel}
+						handleClear={defaultProps.handleClear}
+					/>,
+				);
+			});
+
+			// Local typing should be preserved
+			expect(input).toHaveValue('test');
+		});
+	});
+});

frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts

@@ -1,53 +1,613 @@
+import { flattenDeep } from 'lodash-es';
+
 import {
-	UniversalUnitToGrafanaUnit,
-	YAxisCategoryNames,
-} from 'components/YAxisUnitSelector/constants';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
-import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
-import { convertValue } from 'lib/getConvertedValue';
+	AccelerationFormats,
+	AngularFormats,
+	AreaFormats,
+	BooleanFormats,
+	CategoryNames,
+	ConcentrationFormats,
+	CurrencyFormats,
+	DataFormats,
+	DataRateFormats,
+	DataTypeCategories,
+	DatetimeFormats,
+	FlopsFormats,
+	FlowFormats,
+	ForceFormats,
+	HashRateFormats,
+	LengthFormats,
+	MassFormats,
+	MiscellaneousFormats,
+	PowerElectricalFormats,
+	PressureFormats,
+	RadiationFormats,
+	RotationSpeedFormats,
+	TemperatureFormats,
+	ThroughputFormats,
+	TimeFormats,
+	VelocityFormats,
+	VolumeFormats,
+} from './types';
 
-// Function to get the category name for a given unit ID (Grafana or universal)
-export const getCategoryName = (unitId: string): YAxisCategoryNames | null => {
-	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
+export const dataTypeCategories: DataTypeCategories = [
+	{
+		name: CategoryNames.Time,
+		formats: [
+			{ name: 'Hertz (1/s)', id: TimeFormats.Hertz },
+			{ name: 'nanoseconds (ns)', id: TimeFormats.Nanoseconds },
+			{ name: 'microseconds (µs)', id: TimeFormats.Microseconds },
+			{ name: 'milliseconds (ms)', id: TimeFormats.Milliseconds },
+			{ name: 'seconds (s)', id: TimeFormats.Seconds },
+			{ name: 'minutes (m)', id: TimeFormats.Minutes },
+			{ name: 'hours (h)', id: TimeFormats.Hours },
+			{ name: 'days (d)', id: TimeFormats.Days },
+			{ name: 'duration in ms (dtdurationms)', id: TimeFormats.DurationMs },
+			{ name: 'duration in s (dtdurations)', id: TimeFormats.DurationS },
+			{ name: 'duration in h:m:s (dthms)', id: TimeFormats.DurationHms },
+			{ name: 'duration in d:h:m:s (dtdhms)', id: TimeFormats.DurationDhms },
+			{ name: 'timeticks (timeticks)', id: TimeFormats.Timeticks },
+			{ name: 'clock in ms (clockms)', id: TimeFormats.ClockMs },
+			{ name: 'clock in s (clocks)', id: TimeFormats.ClockS },
+		],
+	},
+	{
+		name: CategoryNames.Throughput,
+		formats: [
+			{ name: 'counts/sec (cps)', id: ThroughputFormats.CountsPerSec },
+			{ name: 'ops/sec (ops)', id: ThroughputFormats.OpsPerSec },
+			{ name: 'requests/sec (reqps)', id: ThroughputFormats.RequestsPerSec },
+			{ name: 'reads/sec (rps)', id: ThroughputFormats.ReadsPerSec },
+			{ name: 'writes/sec (wps)', id: ThroughputFormats.WritesPerSec },
+			{ name: 'I/O operations/sec (iops)', id: ThroughputFormats.IOOpsPerSec },
+			{ name: 'counts/min (cpm)', id: ThroughputFormats.CountsPerMin },
+			{ name: 'ops/min (opm)', id: ThroughputFormats.OpsPerMin },
+			{ name: 'reads/min (rpm)', id: ThroughputFormats.ReadsPerMin },
+			{ name: 'writes/min (wpm)', id: ThroughputFormats.WritesPerMin },
+		],
+	},
+	{
+		name: CategoryNames.Data,
+		formats: [
+			{ name: 'bytes(IEC)', id: DataFormats.BytesIEC },
+			{ name: 'bytes(SI)', id: DataFormats.BytesSI },
+			{ name: 'bits(IEC)', id: DataFormats.BitsIEC },
+			{ name: 'bits(SI)', id: DataFormats.BitsSI },
+			{ name: 'kibibytes', id: DataFormats.KibiBytes },
+			{ name: 'kilobytes', id: DataFormats.KiloBytes },
+			{ name: 'mebibytes', id: DataFormats.MebiBytes },
+			{ name: 'megabytes', id: DataFormats.MegaBytes },
+			{ name: 'gibibytes', id: DataFormats.GibiBytes },
+			{ name: 'gigabytes', id: DataFormats.GigaBytes },
+			{ name: 'tebibytes', id: DataFormats.TebiBytes },
+			{ name: 'terabytes', id: DataFormats.TeraBytes },
+			{ name: 'pebibytes', id: DataFormats.PebiBytes },
+			{ name: 'petabytes', id: DataFormats.PetaBytes },
+		],
+	},
+	{
+		name: CategoryNames.DataRate,
+		formats: [
+			{ name: 'packets/sec', id: DataRateFormats.PacketsPerSec },
+			{ name: 'bytes/sec(IEC)', id: DataRateFormats.BytesPerSecIEC },
+			{ name: 'bytes/sec(SI)', id: DataRateFormats.BytesPerSecSI },
+			{ name: 'bits/sec(IEC)', id: DataRateFormats.BitsPerSecIEC },
+			{ name: 'bits/sec(SI)', id: DataRateFormats.BitsPerSecSI },
+			{ name: 'kibibytes/sec', id: DataRateFormats.KibiBytesPerSec },
+			{ name: 'kibibits/sec', id: DataRateFormats.KibiBitsPerSec },
+			{ name: 'kilobytes/sec', id: DataRateFormats.KiloBytesPerSec },
+			{ name: 'kilobits/sec', id: DataRateFormats.KiloBitsPerSec },
+			{ name: 'mebibytes/sec', id: DataRateFormats.MebiBytesPerSec },
+			{ name: 'mebibits/sec', id: DataRateFormats.MebiBitsPerSec },
+			{ name: 'megabytes/sec', id: DataRateFormats.MegaBytesPerSec },
+			{ name: 'megabits/sec', id: DataRateFormats.MegaBitsPerSec },
+			{ name: 'gibibytes/sec', id: DataRateFormats.GibiBytesPerSec },
+			{ name: 'gibibits/sec', id: DataRateFormats.GibiBitsPerSec },
+			{ name: 'gigabytes/sec', id: DataRateFormats.GigaBytesPerSec },
+			{ name: 'gigabits/sec', id: DataRateFormats.GigaBitsPerSec },
+			{ name: 'tebibytes/sec', id: DataRateFormats.TebiBytesPerSec },
+			{ name: 'tebibits/sec', id: DataRateFormats.TebiBitsPerSec },
+			{ name: 'terabytes/sec', id: DataRateFormats.TeraBytesPerSec },
+			{ name: 'terabits/sec', id: DataRateFormats.TeraBitsPerSec },
+			{ name: 'pebibytes/sec', id: DataRateFormats.PebiBytesPerSec },
+			{ name: 'pebibits/sec', id: DataRateFormats.PebiBitsPerSec },
+			{ name: 'petabytes/sec', id: DataRateFormats.PetaBytesPerSec },
+			{ name: 'petabits/sec', id: DataRateFormats.PetaBitsPerSec },
+		],
+	},
+	{
+		name: CategoryNames.HashRate,
+		formats: [
+			{ name: 'hashes/sec', id: HashRateFormats.HashesPerSec },
+			{ name: 'kilohashes/sec', id: HashRateFormats.KiloHashesPerSec },
+			{ name: 'megahashes/sec', id: HashRateFormats.MegaHashesPerSec },
+			{ name: 'gigahashes/sec', id: HashRateFormats.GigaHashesPerSec },
+			{ name: 'terahashes/sec', id: HashRateFormats.TeraHashesPerSec },
+			{ name: 'petahashes/sec', id: HashRateFormats.PetaHashesPerSec },
+			{ name: 'exahashes/sec', id: HashRateFormats.ExaHashesPerSec },
+		],
+	},
+	{
+		name: CategoryNames.Miscellaneous,
+		formats: [
+			{ name: 'none', id: MiscellaneousFormats.None },
+			{ name: 'String', id: MiscellaneousFormats.String },
+			{ name: 'short', id: MiscellaneousFormats.Short },
+			{ name: 'Percent (0-100)', id: MiscellaneousFormats.Percent },
+			{ name: 'Percent (0.0-1.0)', id: MiscellaneousFormats.PercentUnit },
+			{ name: 'Humidity (%H)', id: MiscellaneousFormats.Humidity },
+			{ name: 'Decibel', id: MiscellaneousFormats.Decibel },
+			{ name: 'Hexadecimal (0x)', id: MiscellaneousFormats.Hexadecimal0x },
+			{ name: 'Hexadecimal', id: MiscellaneousFormats.Hexadecimal },
+			{ name: 'Scientific notation', id: MiscellaneousFormats.ScientificNotation },
+			{ name: 'Locale format', id: MiscellaneousFormats.LocaleFormat },
+			{ name: 'Pixels', id: MiscellaneousFormats.Pixels },
+		],
+	},
+	{
+		name: CategoryNames.Acceleration,
+		formats: [
+			{ name: 'Meters/sec²', id: AccelerationFormats.MetersPerSecondSquared },
+			{ name: 'Feet/sec²', id: AccelerationFormats.FeetPerSecondSquared },
+			{ name: 'G unit', id: AccelerationFormats.GUnit },
+		],
+	},
+	{
+		name: CategoryNames.Angle,
+		formats: [
+			{ name: 'Degrees (°)', id: AngularFormats.Degree },
+			{ name: 'Radians', id: AngularFormats.Radian },
+			{ name: 'Gradian', id: AngularFormats.Gradian },
+			{ name: 'Arc Minutes', id: AngularFormats.ArcMinute },
+			{ name: 'Arc Seconds', id: AngularFormats.ArcSecond },
+		],
+	},
+	{
+		name: CategoryNames.Area,
+		formats: [
+			{ name: 'Square Meters (m²)', id: AreaFormats.SquareMeters },
+			{ name: 'Square Feet (ft²)', id: AreaFormats.SquareFeet },
+			{ name: 'Square Miles (mi²)', id: AreaFormats.SquareMiles },
+		],
+	},
+	{
+		name: CategoryNames.Computation,
+		formats: [
+			{ name: 'FLOP/s', id: FlopsFormats.FLOPs },
+			{ name: 'MFLOP/s', id: FlopsFormats.MFLOPs },
+			{ name: 'GFLOP/s', id: FlopsFormats.GFLOPs },
+			{ name: 'TFLOP/s', id: FlopsFormats.TFLOPs },
+			{ name: 'PFLOP/s', id: FlopsFormats.PFLOPs },
+			{ name: 'EFLOP/s', id: FlopsFormats.EFLOPs },
+			{ name: 'ZFLOP/s', id: FlopsFormats.ZFLOPs },
+			{ name: 'YFLOP/s', id: FlopsFormats.YFLOPs },
+		],
+	},
+	{
+		name: CategoryNames.Concentration,
+		formats: [
+			{ name: 'parts-per-million (ppm)', id: ConcentrationFormats.PPM },
+			{ name: 'parts-per-billion (ppb)', id: ConcentrationFormats.PPB },
+			{ name: 'nanogram per cubic meter (ng/m³)', id: ConcentrationFormats.NgM3 },
+			{
+				name: 'nanogram per normal cubic meter (ng/Nm³)',
+				id: ConcentrationFormats.NgNM3,
+			},
+			{ name: 'microgram per cubic meter (μg/m³)', id: ConcentrationFormats.UgM3 },
+			{
+				name: 'microgram per normal cubic meter (μg/Nm³)',
+				id: ConcentrationFormats.UgNM3,
+			},
+			{ name: 'milligram per cubic meter (mg/m³)', id: ConcentrationFormats.MgM3 },
+			{
+				name: 'milligram per normal cubic meter (mg/Nm³)',
+				id: ConcentrationFormats.MgNM3,
+			},
+			{ name: 'gram per cubic meter (g/m³)', id: ConcentrationFormats.GM3 },
+			{
+				name: 'gram per normal cubic meter (g/Nm³)',
+				id: ConcentrationFormats.GNM3,
+			},
+			{ name: 'milligrams per decilitre (mg/dL)', id: ConcentrationFormats.MgDL },
+			{ name: 'millimoles per litre (mmol/L)', id: ConcentrationFormats.MmolL },
+		],
+	},
+	{
+		name: CategoryNames.Currency,
+		formats: [
+			{ name: 'Dollars ($)', id: CurrencyFormats.USD },
+			{ name: 'Pounds (£)', id: CurrencyFormats.GBP },
+			{ name: 'Euro (€)', id: CurrencyFormats.EUR },
+			{ name: 'Yen (¥)', id: CurrencyFormats.JPY },
+			{ name: 'Rubles (₽)', id: CurrencyFormats.RUB },
+			{ name: 'Hryvnias (₴)', id: CurrencyFormats.UAH },
+			{ name: 'Real (R$)', id: CurrencyFormats.BRL },
+			{ name: 'Danish Krone (kr)', id: CurrencyFormats.DKK },
+			{ name: 'Icelandic Króna (kr)', id: CurrencyFormats.ISK },
+			{ name: 'Norwegian Krone (kr)', id: CurrencyFormats.NOK },
+			{ name: 'Swedish Krona (kr)', id: CurrencyFormats.SEK },
+			{ name: 'Czech koruna (czk)', id: CurrencyFormats.CZK },
+			{ name: 'Swiss franc (CHF)', id: CurrencyFormats.CHF },
+			{ name: 'Polish Złoty (PLN)', id: CurrencyFormats.PLN },
+			{ name: 'Bitcoin (฿)', id: CurrencyFormats.BTC },
+			{ name: 'Milli Bitcoin (฿)', id: CurrencyFormats.MBTC },
+			{ name: 'Micro Bitcoin (฿)', id: CurrencyFormats.UBTC },
+			{ name: 'South African Rand (R)', id: CurrencyFormats.ZAR },
+			{ name: 'Indian Rupee (₹)', id: CurrencyFormats.INR },
+			{ name: 'South Korean Won (₩)', id: CurrencyFormats.KRW },
+			{ name: 'Indonesian Rupiah (Rp)', id: CurrencyFormats.IDR },
+			{ name: 'Philippine Peso (PHP)', id: CurrencyFormats.PHP },
+			{ name: 'Vietnamese Dong (VND)', id: CurrencyFormats.VND },
+		],
+	},
+	{
+		name: CategoryNames.Datetime,
+		formats: [
+			{ name: 'Datetime ISO', id: DatetimeFormats.ISO },
+			{
+				name: 'Datetime ISO (No date if today)',
+				id: DatetimeFormats.ISONoDateIfToday,
+			},
+			{ name: 'Datetime US', id: DatetimeFormats.US },
+			{
+				name: 'Datetime US (No date if today)',
+				id: DatetimeFormats.USNoDateIfToday,
+			},
+			{ name: 'Datetime local', id: DatetimeFormats.Local },
+			{
+				name: 'Datetime local (No date if today)',
+				id: DatetimeFormats.LocalNoDateIfToday,
+			},
+			{ name: 'Datetime default', id: DatetimeFormats.System },
+			{ name: 'From Now', id: DatetimeFormats.FromNow },
+		],
+	},
+	{
+		name: CategoryNames.Energy,
+		formats: [
+			{ name: 'Watt (W)', id: PowerElectricalFormats.WATT },
+			{ name: 'Kilowatt (kW)', id: PowerElectricalFormats.KWATT },
+			{ name: 'Megawatt (MW)', id: PowerElectricalFormats.MEGWATT },
+			{ name: 'Gigawatt (GW)', id: PowerElectricalFormats.GWATT },
+			{ name: 'Milliwatt (mW)', id: PowerElectricalFormats.MWATT },
+			{ name: 'Watt per square meter (W/m²)', id: PowerElectricalFormats.WM2 },
+			{ name: 'Volt-Ampere (VA)', id: PowerElectricalFormats.VOLTAMP },
+			{ name: 'Kilovolt-Ampere (kVA)', id: PowerElectricalFormats.KVOLTAMP },
+			{
+				name: 'Volt-Ampere reactive (VAr)',
+				id: PowerElectricalFormats.VOLTAMPREACT,
+			},
+			{
+				name: 'Kilovolt-Ampere reactive (kVAr)',
+				id: PowerElectricalFormats.KVOLTAMPREACT,
+			},
+			{ name: 'Watt-hour (Wh)', id: PowerElectricalFormats.WATTH },
+			{
+				name: 'Watt-hour per Kilogram (Wh/kg)',
+				id: PowerElectricalFormats.WATTHPERKG,
+			},
+			{ name: 'Kilowatt-hour (kWh)', id: PowerElectricalFormats.KWATTH },
+			{ name: 'Kilowatt-min (kWm)', id: PowerElectricalFormats.KWATTM },
+			{ name: 'Ampere-hour (Ah)', id: PowerElectricalFormats.AMPH },
+			{ name: 'Kiloampere-hour (kAh)', id: PowerElectricalFormats.KAMPH },
+			{ name: 'Milliampere-hour (mAh)', id: PowerElectricalFormats.MAMPH },
+			{ name: 'Joule (J)', id: PowerElectricalFormats.JOULE },
+			{ name: 'Electron volt (eV)', id: PowerElectricalFormats.EV },
+			{ name: 'Ampere (A)', id: PowerElectricalFormats.AMP },
+			{ name: 'Kiloampere (kA)', id: PowerElectricalFormats.KAMP },
+			{ name: 'Milliampere (mA)', id: PowerElectricalFormats.MAMP },
+			{ name: 'Volt (V)', id: PowerElectricalFormats.VOLT },
+			{ name: 'Kilovolt (kV)', id: PowerElectricalFormats.KVOLT },
+			{ name: 'Millivolt (mV)', id: PowerElectricalFormats.MVOLT },
+			{ name: 'Decibel-milliwatt (dBm)', id: PowerElectricalFormats.DBM },
+			{ name: 'Ohm (Ω)', id: PowerElectricalFormats.OHM },
+			{ name: 'Kiloohm (kΩ)', id: PowerElectricalFormats.KOHM },
+			{ name: 'Megaohm (MΩ)', id: PowerElectricalFormats.MOHM },
+			{ name: 'Farad (F)', id: PowerElectricalFormats.FARAD },
+			{ name: 'Microfarad (µF)', id: PowerElectricalFormats.µFARAD },
+			{ name: 'Nanofarad (nF)', id: PowerElectricalFormats.NFARAD },
+			{ name: 'Picofarad (pF)', id: PowerElectricalFormats.PFARAD },
+			{ name: 'Femtofarad (fF)', id: PowerElectricalFormats.FFARAD },
+			{ name: 'Henry (H)', id: PowerElectricalFormats.HENRY },
+			{ name: 'Millihenry (mH)', id: PowerElectricalFormats.MHENRY },
+			{ name: 'Microhenry (µH)', id: PowerElectricalFormats.µHENRY },
+			{ name: 'Lumens (Lm)', id: PowerElectricalFormats.LUMENS },
+		],
+	},
+	{
+		name: CategoryNames.Flow,
+		formats: [
+			{ name: 'Gallons/min (gpm)', id: FlowFormats.FLOWGPM },
+			{ name: 'Cubic meters/sec (cms)', id: FlowFormats.FLOWCMS },
+			{ name: 'Cubic feet/sec (cfs)', id: FlowFormats.FLOWCFS },
+			{ name: 'Cubic feet/min (cfm)', id: FlowFormats.FLOWCFM },
+			{ name: 'Litre/hour', id: FlowFormats.LITREH },
+			{ name: 'Litre/min (L/min)', id: FlowFormats.FLOWLPM },
+			{ name: 'milliLitre/min (mL/min)', id: FlowFormats.FLOWMLPM },
+			{ name: 'Lux (lx)', id: FlowFormats.LUX },
+		],
+	},
+	{
+		name: CategoryNames.Force,
+		formats: [
+			{ name: 'Newton-meters (Nm)', id: ForceFormats.FORCENM },
+			{ name: 'Kilonewton-meters (kNm)', id: ForceFormats.FORCEKNM },
+			{ name: 'Newtons (N)', id: ForceFormats.FORCEN },
+			{ name: 'Kilonewtons (kN)', id: ForceFormats.FORCEKN },
+		],
+	},
+	{
+		name: CategoryNames.Mass,
+		formats: [
+			{ name: 'milligram (mg)', id: MassFormats.MASSMG },
+			{ name: 'gram (g)', id: MassFormats.MASSG },
+			{ name: 'pound (lb)', id: MassFormats.MASSLB },
+			{ name: 'kilogram (kg)', id: MassFormats.MASSKG },
+			{ name: 'metric ton (t)', id: MassFormats.MASST },
+		],
+	},
+	{
+		name: CategoryNames.Length,
+		formats: [
+			{ name: 'millimeter (mm)', id: LengthFormats.LENGTHMM },
+			{ name: 'inch (in)', id: LengthFormats.LENGTHIN },
+			{ name: 'feet (ft)', id: LengthFormats.LENGTHFT },
+			{ name: 'meter (m)', id: LengthFormats.LENGTHM },
+			{ name: 'kilometer (km)', id: LengthFormats.LENGTHKM },
+			{ name: 'mile (mi)', id: LengthFormats.LENGTHMI },
+		],
+	},
+	{
+		name: CategoryNames.Pressure,
+		formats: [
+			{ name: 'Millibars', id: PressureFormats.PRESSUREMBAR },
+			{ name: 'Bars', id: PressureFormats.PRESSUREBAR },
+			{ name: 'Kilobars', id: PressureFormats.PRESSUREKBAR },
+			{ name: 'Pascals', id: PressureFormats.PRESSUREPA },
+			{ name: 'Hectopascals', id: PressureFormats.PRESSUREHPA },
+			{ name: 'Kilopascals', id: PressureFormats.PRESSUREKPA },
+			{ name: 'Inches of mercury', id: PressureFormats.PRESSUREHG },
+			{ name: 'PSI', id: PressureFormats.PRESSUREPSI },
+		],
+	},
+	{
+		name: CategoryNames.Radiation,
+		formats: [
+			{ name: 'Becquerel (Bq)', id: RadiationFormats.RADBQ },
+			{ name: 'curie (Ci)', id: RadiationFormats.RADCI },
+			{ name: 'Gray (Gy)', id: RadiationFormats.RADGY },
+			{ name: 'rad', id: RadiationFormats.RADRAD },
+			{ name: 'Sievert (Sv)', id: RadiationFormats.RADSV },
+			{ name: 'milliSievert (mSv)', id: RadiationFormats.RADMSV },
+			{ name: 'microSievert (µSv)', id: RadiationFormats.RADUSV },
+			{ name: 'rem', id: RadiationFormats.RADREM },
+			{ name: 'Exposure (C/kg)', id: RadiationFormats.RADEXPCKG },
+			{ name: 'roentgen (R)', id: RadiationFormats.RADR },
+			{ name: 'Sievert/hour (Sv/h)', id: RadiationFormats.RADSVH },
+			{ name: 'milliSievert/hour (mSv/h)', id: RadiationFormats.RADMSVH },
+			{ name: 'microSievert/hour (µSv/h)', id: RadiationFormats.RADUSVH },
+		],
+	},
+	{
+		name: CategoryNames.RotationSpeed,
+		formats: [
+			{ name: 'Revolutions per minute (rpm)', id: RotationSpeedFormats.ROTRPM },
+			{ name: 'Hertz (Hz)', id: RotationSpeedFormats.ROTHZ },
+			{ name: 'Radians per second (rad/s)', id: RotationSpeedFormats.ROTRADS },
+			{ name: 'Degrees per second (°/s)', id: RotationSpeedFormats.ROTDEGS },
+		],
+	},
+	{
+		name: CategoryNames.Temperature,
+		formats: [
+			{ name: 'Celsius (°C)', id: TemperatureFormats.CELSIUS },
+			{ name: 'Fahrenheit (°F)', id: TemperatureFormats.FAHRENHEIT },
+			{ name: 'Kelvin (K)', id: TemperatureFormats.KELVIN },
+		],
+	},
+	{
+		name: CategoryNames.Velocity,
+		formats: [
+			{ name: 'meters/second (m/s)', id: VelocityFormats.METERS_PER_SECOND },
+			{ name: 'kilometers/hour (km/h)', id: VelocityFormats.KILOMETERS_PER_HOUR },
+			{ name: 'miles/hour (mph)', id: VelocityFormats.MILES_PER_HOUR },
+			{ name: 'knot (kn)', id: VelocityFormats.KNOT },
+		],
+	},
+	{
+		name: CategoryNames.Volume,
+		formats: [
+			{ name: 'millilitre (mL)', id: VolumeFormats.MILLILITRE },
+			{ name: 'litre (L)', id: VolumeFormats.LITRE },
+			{ name: 'cubic meter', id: VolumeFormats.CUBIC_METER },
+			{ name: 'Normal cubic meter', id: VolumeFormats.NORMAL_CUBIC_METER },
+			{ name: 'cubic decimeter', id: VolumeFormats.CUBIC_DECIMETER },
+			{ name: 'gallons', id: VolumeFormats.GALLONS },
+		],
+	},
+	{
+		name: CategoryNames.Boolean,
+		formats: [
+			{ name: 'True / False', id: BooleanFormats.TRUE_FALSE },
+			{ name: 'Yes / No', id: BooleanFormats.YES_NO },
+			{ name: 'On / Off', id: BooleanFormats.ON_OFF },
+		],
+	},
+];
 
-	const foundCategory = categories.find((category) =>
-		category.units.some((unit) => {
-			// Units in Y-axis categories use universal unit IDs.
-			// Thresholds / column units often use Grafana-style IDs.
-			// Treat a unit as matching if either:
-			// - it is already the universal ID, or
-			// - it matches the mapped Grafana ID for that universal unit.
-			if (unit.id === unitId) {
-				return true;
-			}
+export const flattenedCategories = flattenDeep(
+	dataTypeCategories.map((category) => category.formats),
+);
 
-			const grafanaId = UniversalUnitToGrafanaUnit[unit.id];
-			return grafanaId === unitId;
-		}),
-	);
-
-	return foundCategory ? foundCategory.name : null;
+type ConversionFactors = {
+	[key: string]: {
+		[key: string]: number | null;
+	};
 };
 
+// Object containing conversion factors for various categories and formats
+const conversionFactors: ConversionFactors = {
+	[CategoryNames.Time]: {
+		[TimeFormats.Hertz]: 1,
+		[TimeFormats.Nanoseconds]: 1e-9,
+		[TimeFormats.Microseconds]: 1e-6,
+		[TimeFormats.Milliseconds]: 1e-3,
+		[TimeFormats.Seconds]: 1,
+		[TimeFormats.Minutes]: 60,
+		[TimeFormats.Hours]: 3600,
+		[TimeFormats.Days]: 86400,
+		[TimeFormats.DurationMs]: 1e-3,
+		[TimeFormats.DurationS]: 1,
+		[TimeFormats.DurationHms]: null, // Requires special handling
+		[TimeFormats.DurationDhms]: null, // Requires special handling
+		[TimeFormats.Timeticks]: null, // Requires special handling
+		[TimeFormats.ClockMs]: 1e-3,
+		[TimeFormats.ClockS]: 1,
+	},
+	[CategoryNames.Throughput]: {
+		[ThroughputFormats.CountsPerSec]: 1,
+		[ThroughputFormats.OpsPerSec]: 1,
+		[ThroughputFormats.RequestsPerSec]: 1,
+		[ThroughputFormats.ReadsPerSec]: 1,
+		[ThroughputFormats.WritesPerSec]: 1,
+		[ThroughputFormats.IOOpsPerSec]: 1,
+		[ThroughputFormats.CountsPerMin]: 1 / 60,
+		[ThroughputFormats.OpsPerMin]: 1 / 60,
+		[ThroughputFormats.ReadsPerMin]: 1 / 60,
+		[ThroughputFormats.WritesPerMin]: 1 / 60,
+	},
+	[CategoryNames.Data]: {
+		[DataFormats.BytesIEC]: 1,
+		[DataFormats.BytesSI]: 1,
+		[DataFormats.BitsIEC]: 0.125,
+		[DataFormats.BitsSI]: 0.125,
+		[DataFormats.KibiBytes]: 1024,
+		[DataFormats.KiloBytes]: 1000,
+		[DataFormats.MebiBytes]: 1048576,
+		[DataFormats.MegaBytes]: 1000000,
+		[DataFormats.GibiBytes]: 1073741824,
+		[DataFormats.GigaBytes]: 1000000000,
+		[DataFormats.TebiBytes]: 1099511627776,
+		[DataFormats.TeraBytes]: 1000000000000,
+		[DataFormats.PebiBytes]: 1125899906842624,
+		[DataFormats.PetaBytes]: 1000000000000000,
+	},
+	[CategoryNames.DataRate]: {
+		[DataRateFormats.PacketsPerSec]: null, // Cannot convert directly to other data rates
+		[DataRateFormats.BytesPerSecIEC]: 1,
+		[DataRateFormats.BytesPerSecSI]: 1,
+		[DataRateFormats.BitsPerSecIEC]: 0.125,
+		[DataRateFormats.BitsPerSecSI]: 0.125,
+		[DataRateFormats.KibiBytesPerSec]: 1024,
+		[DataRateFormats.KibiBitsPerSec]: 128,
+		[DataRateFormats.KiloBytesPerSec]: 1000,
+		[DataRateFormats.KiloBitsPerSec]: 125,
+		[DataRateFormats.MebiBytesPerSec]: 1048576,
+		[DataRateFormats.MebiBitsPerSec]: 131072,
+		[DataRateFormats.MegaBytesPerSec]: 1000000,
+		[DataRateFormats.MegaBitsPerSec]: 125000,
+		[DataRateFormats.GibiBytesPerSec]: 1073741824,
+		[DataRateFormats.GibiBitsPerSec]: 134217728,
+		[DataRateFormats.GigaBytesPerSec]: 1000000000,
+		[DataRateFormats.GigaBitsPerSec]: 125000000,
+		[DataRateFormats.TebiBytesPerSec]: 1099511627776,
+		[DataRateFormats.TebiBitsPerSec]: 137438953472,
+		[DataRateFormats.TeraBytesPerSec]: 1000000000000,
+		[DataRateFormats.TeraBitsPerSec]: 125000000000,
+		[DataRateFormats.PebiBytesPerSec]: 1125899906842624,
+		[DataRateFormats.PebiBitsPerSec]: 140737488355328,
+		[DataRateFormats.PetaBytesPerSec]: 1000000000000000,
+		[DataRateFormats.PetaBitsPerSec]: 125000000000000,
+	},
+	[CategoryNames.Miscellaneous]: {
+		[MiscellaneousFormats.None]: null,
+		[MiscellaneousFormats.String]: null,
+		[MiscellaneousFormats.Short]: null,
+		[MiscellaneousFormats.Percent]: 1,
+		[MiscellaneousFormats.PercentUnit]: 100,
+		[MiscellaneousFormats.Humidity]: 1,
+		[MiscellaneousFormats.Decibel]: null,
+		[MiscellaneousFormats.Hexadecimal0x]: null,
+		[MiscellaneousFormats.Hexadecimal]: null,
+		[MiscellaneousFormats.ScientificNotation]: null,
+		[MiscellaneousFormats.LocaleFormat]: null,
+		[MiscellaneousFormats.Pixels]: null,
+	},
+	[CategoryNames.Boolean]: {
+		[BooleanFormats.TRUE_FALSE]: null, // Not convertible
+		[BooleanFormats.YES_NO]: null, // Not convertible
+		[BooleanFormats.ON_OFF]: null, // Not convertible
+	},
+};
+
+// Function to get the conversion factor between two units in a specific category
+function getConversionFactor(
+	fromUnit: string,
+	toUnit: string,
+	category: CategoryNames,
+): number | null {
+	// Retrieves the conversion factors for the specified category
+	const categoryFactors = conversionFactors[category];
+	if (!categoryFactors) {
+		return null; // Returns null if the category does not exist
+	}
+	const fromFactor = categoryFactors[fromUnit];
+	const toFactor = categoryFactors[toUnit];
+	if (
+		fromFactor === undefined ||
+		toFactor === undefined ||
+		fromFactor === null ||
+		toFactor === null
+	) {
+		return null; // Returns null if either unit does not exist or is not convertible
+	}
+	return fromFactor / toFactor; // Returns the conversion factor ratio
+}
+
 // Function to convert a value from one unit to another
 export function convertUnit(
 	value: number,
 	fromUnitId?: string,
 	toUnitId?: string,
 ): number | null {
-	if (!fromUnitId || !toUnitId) {
+	let fromUnit: string | undefined;
+	let toUnit: string | undefined;
+
+	// Finds the category that contains the specified units and extracts fromUnit and toUnit using array methods
+	const category = dataTypeCategories.find((category) =>
+		category.formats.some((format) => {
+			if (format.id === fromUnitId) {
+				fromUnit = format.id;
+			}
+			if (format.id === toUnitId) {
+				toUnit = format.id;
+			}
+			return fromUnit && toUnit; // Break out early if both units are found
+		}),
+	);
+
+	if (!category || !fromUnit || !toUnit) {
 		return null;
-	}
+	} // Return null if category or units are not found
 
-	const fromCategory = getCategoryName(fromUnitId);
-	const toCategory = getCategoryName(toUnitId);
-
-	// If either unit is unknown or the categories don't match, the conversion is invalid
-	if (!fromCategory || !toCategory || fromCategory !== toCategory) {
+	// Gets the conversion factor for the specified units
+	const conversionFactor = getConversionFactor(
+		fromUnit,
+		toUnit,
+		category.name as any,
+	);
+	if (conversionFactor === null) {
 		return null;
-	}
+	} // Return null if conversion is not possible
 
-	// Delegate the actual numeric conversion (or identity) to the shared helper,
-	// which understands both Grafana-style and universal unit IDs.
-	return convertValue(value, fromUnitId, toUnitId);
+	return value * conversionFactor;
 }
+
+// Function to get the category name for a given unit ID
+export const getCategoryName = (unitId: string): CategoryNames | null => {
+	// Finds the category that contains the specified unit ID
+	const foundCategory = dataTypeCategories.find((category) =>
+		category.formats.some((format) => format.id === unitId),
+	);
+	return foundCategory ? (foundCategory.name as CategoryNames) : null;
+};

frontend/src/container/NewWidget/utils.ts

@@ -2,9 +2,6 @@ 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 { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
 import {
 	initialQueryBuilderFormValuesMap,
 	PANEL_TYPES,
@@ -24,7 +21,11 @@ import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { getCategoryName } from './RightContainer/dataFormatCategories';
+import {
+	dataTypeCategories,
+	getCategoryName,
+} from './RightContainer/dataFormatCategories';
+import { CategoryNames } from './RightContainer/types';
 
 export const getIsQueryModified = (
 	currentQuery: Query,
@@ -605,21 +606,14 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
  * the label and value for each format.
  */
 export const getCategorySelectOptionByName = (
-	name?: YAxisCategoryNames,
-): DefaultOptionType[] => {
-	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
-	if (!categories.length) {
-		return [];
-	}
-	return (
-		categories
-			.find((category) => category.name === name)
-			?.units.map((unit) => ({
-				label: unit.name,
-				value: unit.id,
-			})) || []
-	);
-};
+	name?: CategoryNames | string,
+): DefaultOptionType[] =>
+	dataTypeCategories
+		.find((category) => category.name === name)
+		?.formats.map((format) => ({
+			label: format.name,
+			value: format.id,
+		})) || [];
 
 /**
  * Generates unit options based on the provided column unit.

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

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

frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/config.ts

@@ -1,13 +1,10 @@
-import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
+import { CategoryNames } from 'container/NewWidget/RightContainer/types';
 
-export const categoryToSupport: YAxisCategoryNames[] = [
-	YAxisCategoryNames.None,
-	YAxisCategoryNames.Data,
-	YAxisCategoryNames.DataRate,
-	YAxisCategoryNames.Time,
-	YAxisCategoryNames.Count,
-	YAxisCategoryNames.Operations,
-	YAxisCategoryNames.Percentage,
-	YAxisCategoryNames.Miscellaneous,
-	YAxisCategoryNames.Boolean,
+export const categoryToSupport = [
+	CategoryNames.Data,
+	CategoryNames.DataRate,
+	CategoryNames.Time,
+	CategoryNames.Throughput,
+	CategoryNames.Miscellaneous,
+	CategoryNames.Boolean,
 ];

pkg/flagger/configflagger/configflagger.go

@@ -3,7 +3,6 @@ package configflagger
 import (
 	"context"
 
-	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/types/featuretypes"
@@ -33,10 +32,6 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Boolean {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
-			if errors.Ast(err, errors.TypeNotFound) {
-				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "boolean")
-				continue
-			}
 			return nil, err
 		}
 
@@ -51,10 +46,6 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.String {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
-			if errors.Ast(err, errors.TypeNotFound) {
-				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "string")
-				continue
-			}
 			return nil, err
 		}
 
@@ -69,10 +60,6 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Float {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
-			if errors.Ast(err, errors.TypeNotFound) {
-				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "float")
-				continue
-			}
 			return nil, err
 		}
 
@@ -87,10 +74,6 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Integer {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
-			if errors.Ast(err, errors.TypeNotFound) {
-				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "integer")
-				continue
-			}
 			return nil, err
 		}
 
@@ -105,10 +88,6 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Object {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
-			if errors.Ast(err, errors.TypeNotFound) {
-				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "object")
-				continue
-			}
 			return nil, err
 		}
 

pkg/flagger/registry.go

@@ -5,7 +5,6 @@ import "github.com/SigNoz/signoz/pkg/types/featuretypes"
 var (
 	FeatureUseSpanMetrics = featuretypes.MustNewName("use_span_metrics")
 	FeatureKafkaSpanEval  = featuretypes.MustNewName("kafka_span_eval")
-	FeatureHideRootUser   = featuretypes.MustNewName("hide_root_user")
 )
 
 func MustNewRegistry() featuretypes.Registry {
@@ -26,14 +25,6 @@ func MustNewRegistry() featuretypes.Registry {
 			DefaultVariant: featuretypes.MustNewName("disabled"),
 			Variants:       featuretypes.NewBooleanVariants(),
 		},
-		&featuretypes.Feature{
-			Name:           FeatureHideRootUser,
-			Kind:           featuretypes.KindBoolean,
-			Stage:          featuretypes.StageStable,
-			Description:    "Controls whether root admin user is hidden or not",
-			DefaultVariant: featuretypes.MustNewName("disabled"),
-			Variants:       featuretypes.NewBooleanVariants(),
-		},
 	)
 	if err != nil {
 		panic(err)

pkg/modules/user/impluser/getter.go

@@ -2,22 +2,18 @@ package impluser
 
 import (
 	"context"
-	"slices"
 
-	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 type getter struct {
-	store   types.UserStore
-	flagger flagger.Flagger
+	store types.UserStore
 }
 
-func NewGetter(store types.UserStore, flagger flagger.Flagger) user.Getter {
-	return &getter{store: store, flagger: flagger}
+func NewGetter(store types.UserStore) user.Getter {
+	return &getter{store: store}
 }
 
 func (module *getter) GetRootUserByOrgID(ctx context.Context, orgID valuer.UUID) (*types.User, error) {
@@ -30,14 +26,6 @@ func (module *getter) ListByOrgID(ctx context.Context, orgID valuer.UUID) ([]*ty
 		return nil, err
 	}
 
-	// filter root users if feature flag `hide_root_users` is true
-	evalCtx := featuretypes.NewFlaggerEvaluationContext(orgID)
-	hideRootUsers := module.flagger.BooleanOrEmpty(ctx, flagger.FeatureHideRootUser, evalCtx)
-
-	if hideRootUsers {
-		users = slices.DeleteFunc(users, func(user *types.User) bool { return user.IsRoot })
-	}
-
 	return users, nil
 }
 

pkg/signoz/handler_test.go

@@ -11,11 +11,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/alertmanager/signozalertmanager"
 	"github.com/SigNoz/signoz/pkg/emailing/emailingtest"
 	"github.com/SigNoz/signoz/pkg/factory/factorytest"
-	"github.com/SigNoz/signoz/pkg/flagger"
-	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
-	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/sharder"
@@ -44,13 +41,7 @@ func TestNewHandlers(t *testing.T) {
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
-
-	flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
-	require.NoError(t, err)
-
-	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings), flagger)
-
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule, userGetter)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
 
 	querierHandler := querier.NewHandler(providerSettings, nil, nil)
 	handlers := NewHandlers(modules, providerSettings, nil, querierHandler, nil, nil, nil, nil, nil, nil, nil)

pkg/signoz/module.go

@@ -85,11 +85,11 @@ func NewModules(
 	queryParser queryparser.QueryParser,
 	config Config,
 	dashboard dashboard.Module,
-	userGetter user.Getter,
 ) Modules {
 	quickfilter := implquickfilter.NewModule(implquickfilter.NewStore(sqlstore))
 	orgSetter := implorganization.NewSetter(implorganization.NewStore(sqlstore), alertmanager, quickfilter)
 	user := impluser.NewModule(impluser.NewStore(sqlstore, providerSettings), tokenizer, emailing, providerSettings, orgSetter, authz, analytics, config.User)
+	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings))
 	ruleStore := sqlrulestore.NewRuleStore(sqlstore, queryParser, providerSettings)
 
 	return Modules{

pkg/signoz/module_test.go

@@ -11,11 +11,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/alertmanager/signozalertmanager"
 	"github.com/SigNoz/signoz/pkg/emailing/emailingtest"
 	"github.com/SigNoz/signoz/pkg/factory/factorytest"
-	"github.com/SigNoz/signoz/pkg/flagger"
-	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
-	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/sharder"
 	"github.com/SigNoz/signoz/pkg/sharder/noopsharder"
@@ -43,13 +40,7 @@ func TestNewModules(t *testing.T) {
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
-
-	flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
-	require.NoError(t, err)
-
-	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings), flagger)
-
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule, userGetter)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
 
 	reflectVal := reflect.ValueOf(modules)
 	for i := 0; i < reflectVal.NumField(); i++ {

pkg/signoz/provider_test.go

@@ -1,13 +1,11 @@
 package signoz
 
 import (
-	"context"
 	"testing"
 
 	"github.com/DATA-DOG/go-sqlmock"
 	"github.com/SigNoz/signoz/pkg/alertmanager/nfmanager/nfmanagertest"
 	"github.com/SigNoz/signoz/pkg/analytics"
-	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
 	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
@@ -77,12 +75,7 @@ func TestNewProviderFactories(t *testing.T) {
 	})
 
 	assert.NotPanics(t, func() {
-		flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
-		if err != nil {
-			panic(err)
-		}
-
-		userGetter := impluser.NewGetter(impluser.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual), instrumentationtest.New().ToProviderSettings()), flagger)
+		userGetter := impluser.NewGetter(impluser.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual), instrumentationtest.New().ToProviderSettings()))
 		orgGetter := implorganization.NewGetter(implorganization.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual)), nil)
 		telemetryStore := telemetrystoretest.New(telemetrystore.Config{Provider: "clickhouse"}, sqlmock.QueryMatcherEqual)
 		NewStatsReporterProviderFactories(telemetryStore, []statsreporter.StatsCollector{}, orgGetter, userGetter, tokenizertest.NewMockTokenizer(t), version.Build{}, analytics.Config{Enabled: true})

pkg/signoz/signoz.go

@@ -280,7 +280,7 @@ func New(
 	}
 
 	// Initialize user getter
-	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings), flagger)
+	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings))
 
 	licensingProviderFactory := licenseProviderFactory(sqlstore, zeus, orgGetter, analytics)
 	licensing, err := licensingProviderFactory.New(
@@ -388,7 +388,7 @@ func New(
 	}
 
 	// Initialize all modules
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard, userGetter)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard)
 
 	userService := impluser.NewService(providerSettings, impluser.NewStore(sqlstore, providerSettings), modules.User, orgGetter, authz, config.User.Root)