Merge branch 'main' into nv/10282

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

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

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

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

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

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

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

@@ -1,59 +1,27 @@
-import { useEffect, useState } from 'react';
-import { Button, Tooltip } from 'antd';
-import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import { Tooltip } from 'antd';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import { Info, Play } from 'lucide-react';
-import { DataSource } from 'types/common/queryBuilder';
+import { HardHat, Info } from 'lucide-react';
 
 import { MetricsSearchProps } from './types';
 
 function MetricsSearch({ query, onChange }: MetricsSearchProps): JSX.Element {
-	const [currentExpression, setCurrentExpression] = useState<string>(
-		query?.filter?.expression || '',
-	);
-
-	useEffect(() => {
-		const expression = query?.filter?.expression || '';
-		setCurrentExpression(expression);
-	}, [query?.filter?.expression]);
-
-	const handleOnChange = (expression: string): void => {
-		setCurrentExpression(expression);
-	};
-
-	const handleStageAndRunQuery = (): void => onChange(currentExpression);
-
 	return (
 		<div className="metrics-search-container">
-			<div data-testid="qb-search-container" className="qb-search-container">
+			<div className="qb-search-container">
 				<Tooltip
 					title="Use filters to refine metrics based on attributes. Example: service_name=api - Shows all metrics associated with the API service"
 					placement="right"
 				>
 					<Info size={16} />
 				</Tooltip>
-				<QuerySearch
-					onChange={handleOnChange}
-					dataSource={DataSource.METRICS}
-					queryData={{
-						...query,
-						filter: {
-							...query?.filter,
-							expression: currentExpression,
-						},
-					}}
-					onRun={handleOnChange}
-					showFilterSuggestionsWithoutMetric
+				<QueryBuilderSearch
+					query={query}
+					onChange={onChange}
+					suffixIcon={<HardHat size={16} />}
+					isMetricsExplorer
 				/>
 			</div>
-			<Button
-				type="primary"
-				onClick={handleStageAndRunQuery}
-				className="stage-run-query"
-				icon={<Play size={14} />}
-			>
-				Stage & Run Query
-			</Button>
 			<div className="metrics-search-options">
 				<DateTimeSelectionV2
 					showAutoRefresh={false}

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

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

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

@@ -3,7 +3,6 @@ import { useWindowSize } from 'react-use';
 import { Group } from '@visx/group';
 import { Treemap } from '@visx/hierarchy';
 import { Empty, Select, Skeleton, Tooltip, Typography } from 'antd';
-import { MetricsexplorertypesTreemapModeDTO } from 'api/generated/services/sigNoz.schemas';
 import { stratify, treemapBinary } from 'd3-hierarchy';
 import { Info } from 'lucide-react';
 
@@ -13,7 +12,7 @@ import {
 	TREEMAP_SQUARE_PADDING,
 	TREEMAP_VIEW_OPTIONS,
 } from './constants';
-import { MetricsTreemapProps, TreemapTile } from './types';
+import { MetricsTreemapProps, TreemapTile, TreemapViewType } from './types';
 import {
 	getTreemapTileStyle,
 	getTreemapTileTextStyle,
@@ -41,9 +40,9 @@ function MetricsTreemap({
 
 	const treemapData = useMemo(() => {
 		const extracedTreemapData =
-			(viewType === MetricsexplorertypesTreemapModeDTO.timeseries
-				? data?.timeseries
-				: data?.samples) || [];
+			(viewType === TreemapViewType.TIMESERIES
+				? data?.data?.[TreemapViewType.TIMESERIES]
+				: data?.data?.[TreemapViewType.SAMPLES]) || [];
 		return transformTreemapData(extracedTreemapData, viewType);
 	}, [data, viewType]);
 
@@ -55,36 +54,62 @@ function MetricsTreemap({
 	const xMax = treemapWidth - TREEMAP_MARGINS.LEFT - TREEMAP_MARGINS.RIGHT;
 	const yMax = TREEMAP_HEIGHT - TREEMAP_MARGINS.TOP - TREEMAP_MARGINS.BOTTOM;
 
-	const treemapContent = useMemo(() => {
-		if (isLoading) {
-			return (
-				<div data-testid="metrics-treemap-loading-state">
-					<Skeleton style={{ width: treemapWidth, height: TREEMAP_HEIGHT }} active />
-				</div>
-			);
-		}
-
-		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 }}
-				/>
-			);
-		}
-
-		if (!data || !data?.[viewType]?.length) {
-			return (
-				<Empty
-					description="No metrics found"
-					data-testid="metrics-treemap-empty-state"
-					style={{ width: treemapWidth, height: TREEMAP_HEIGHT, paddingTop: 30 }}
-				/>
-			);
-		}
-
+	if (isLoading) {
 		return (
+			<div data-testid="metrics-treemap-loading-state">
+				<Skeleton
+					style={{ width: treemapWidth, height: TREEMAP_HEIGHT + 55 }}
+					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) {
+		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 }}
+			/>
+		);
+	}
+
+	return (
+		<div
+			className="metrics-treemap-container"
+			data-testid="metrics-treemap-container"
+		>
+			<div className="metrics-treemap-title">
+				<div className="metrics-treemap-title-left">
+					<Typography.Title level={4}>Proportion View</Typography.Title>
+					<Tooltip
+						title="The treemap displays the proportion of samples/timeseries in the selected time range. Each tile represents a unique metric, and its size indicates the percentage of samples/timeseries it contributes to the total."
+						placement="right"
+					>
+						<Info size={16} />
+					</Tooltip>
+				</div>
+				<Select
+					options={TREEMAP_VIEW_OPTIONS}
+					value={viewType}
+					onChange={setHeatmapView}
+				/>
+			</div>
 			<svg
 				width={treemapWidth}
 				height={TREEMAP_HEIGHT}
@@ -149,42 +174,6 @@ function MetricsTreemap({
 					)}
 				</Treemap>
 			</svg>
-		);
-	}, [
-		data,
-		isError,
-		isLoading,
-		openMetricDetails,
-		transformedTreemapData,
-		treemapWidth,
-		viewType,
-		xMax,
-		yMax,
-	]);
-
-	return (
-		<div
-			className="metrics-treemap-container"
-			data-testid="metrics-treemap-container"
-		>
-			<div className="metrics-treemap-title">
-				<div className="metrics-treemap-title-left">
-					<Typography.Title level={4}>Proportion View</Typography.Title>
-					<Tooltip
-						title="The treemap displays the proportion of samples/timeseries in the selected time range. Each tile represents a unique metric, and its size indicates the percentage of samples/timeseries it contributes to the total."
-						placement="right"
-					>
-						<Info size={16} />
-					</Tooltip>
-				</div>
-				<Select
-					options={TREEMAP_VIEW_OPTIONS}
-					value={viewType}
-					onChange={setHeatmapView}
-					disabled={isLoading}
-				/>
-			</div>
-			{treemapContent}
 		</div>
 	);
 }

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

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

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

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

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

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

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

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

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

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

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

@@ -1,17 +1,15 @@
-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: MetricsexplorertypesTreemapModeDTO;
+	value: TreemapViewType;
 	label: string;
 }[] = [
-	{ value: MetricsexplorertypesTreemapModeDTO.timeseries, label: 'Time Series' },
-	{ value: MetricsexplorertypesTreemapModeDTO.samples, label: 'Samples' },
+	{ value: TreemapViewType.TIMESERIES, label: 'Time Series' },
+	{ value: TreemapViewType.SAMPLES, label: 'Samples' },
 ];
 
 export const TREEMAP_HEIGHT = 200;
@@ -19,7 +17,6 @@ export const TREEMAP_SQUARE_PADDING = 5;
 
 export const TREEMAP_MARGINS = { TOP: 10, LEFT: 10, RIGHT: 10, BOTTOM: 10 };
 
-// TODO: Remove this once API migration is complete
 export const METRIC_TYPE_LABEL_MAP = {
 	[MetricType.SUM]: 'Sum',
 	[MetricType.GAUGE]: 'Gauge',
@@ -28,14 +25,6 @@ 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',
@@ -47,3 +36,4 @@ 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,11 +1,9 @@
 import React from 'react';
+import { MetricsTreeMapResponse } from 'api/metricsExplorer/getMetricsTreeMap';
 import {
-	MetricsexplorertypesTreemapModeDTO,
-	MetricsexplorertypesTreemapResponseDTO,
-	Querybuildertypesv5OrderByDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { Filter } from 'api/v5/v5';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+	IBuilderQuery,
+	TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
 
 export interface MetricsTableProps {
 	isLoading: boolean;
@@ -14,25 +12,24 @@ export interface MetricsTableProps {
 	pageSize: number;
 	currentPage: number;
 	onPaginationChange: (page: number, pageSize: number) => void;
-	setOrderBy: (orderBy: Querybuildertypesv5OrderByDTO) => void;
+	setOrderBy: (orderBy: OrderByPayload) => void;
 	totalCount: number;
 	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
-	queryFilterExpression: Filter;
-	onFilterChange: (expression: string) => void;
+	queryFilters: TagFilter;
 }
 
 export interface MetricsSearchProps {
 	query: IBuilderQuery;
-	onChange: (expression: string) => void;
+	onChange: (value: TagFilter) => void;
 }
 
 export interface MetricsTreemapProps {
-	data: MetricsexplorertypesTreemapResponseDTO | null | undefined;
+	data: MetricsTreeMapResponse | null | undefined;
 	isLoading: boolean;
 	isError: boolean;
-	viewType: MetricsexplorertypesTreemapModeDTO;
+	viewType: TreemapViewType;
 	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
-	setHeatmapView: (value: MetricsexplorertypesTreemapModeDTO) => void;
+	setHeatmapView: (value: TreemapViewType) => void;
 }
 
 export interface OrderByPayload {

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

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

pkg/query-service/app/clickhouseReader/reader.go

@@ -3261,20 +3261,14 @@ func (r *ClickHouseReader) GetMetricAggregateAttributes(ctx context.Context, org
 		metadata := metadataMap[name]
 
 		typ := string(metadata.MetricType)
-		temporality := string(metadata.Temporality)
-		isMonotonic := metadata.IsMonotonic
-
-		// Non-monotonic cumulative sums are treated as gauges
-		if typ == "Sum" && !isMonotonic && temporality == string(v3.Cumulative) {
-			typ = "Gauge"
-		}
 
 		// unlike traces/logs `tag`/`resource` type, the `Type` will be metric type
 		key := v3.AttributeKey{
-			Key:      name,
-			DataType: v3.AttributeKeyDataTypeFloat64,
-			Type:     v3.AttributeKeyType(typ),
-			IsColumn: true,
+			Key:         name,
+			DataType:    v3.AttributeKeyDataTypeFloat64,
+			Type:        v3.AttributeKeyType(typ),
+			IsMonotonic: metadata.IsMonotonic,
+			IsColumn:    true,
 		}
 
 		if _, ok := seen[name+typ]; ok {
@@ -3317,17 +3311,13 @@ func (r *ClickHouseReader) GetMeterAggregateAttributes(ctx context.Context, orgI
 			return nil, fmt.Errorf("error while scanning meter name: %s", err.Error())
 		}
 
-		// Non-monotonic cumulative sums are treated as gauges
-		if typ == "Sum" && !isMonotonic && temporality == string(v3.Cumulative) {
-			typ = "Gauge"
-		}
-
 		// unlike traces/logs `tag`/`resource` type, the `Type` will be metric type
 		key := v3.AttributeKey{
-			Key:      name,
-			DataType: v3.AttributeKeyDataTypeFloat64,
-			Type:     v3.AttributeKeyType(typ),
-			IsColumn: true,
+			Key:         name,
+			DataType:    v3.AttributeKeyDataTypeFloat64,
+			Type:        v3.AttributeKeyType(typ),
+			IsMonotonic: isMonotonic,
+			IsColumn:    true,
 		}
 		response.AttributeKeys = append(response.AttributeKeys, key)
 	}
@@ -5419,6 +5409,7 @@ func (r *ClickHouseReader) ListSummaryMetrics(ctx context.Context, orgID valuer.
 		    t.metric_name AS metric_name,
 		    ANY_VALUE(t.description) AS description,
 		    ANY_VALUE(t.type) AS metric_type,
+			ANY_VALUE(t.is_monotonic) AS metric_is_monotonic,
 		    ANY_VALUE(t.unit) AS metric_unit,
 		    uniq(t.fingerprint) AS timeseries,
 			uniq(metric_name) OVER() AS total
@@ -5450,7 +5441,7 @@ func (r *ClickHouseReader) ListSummaryMetrics(ctx context.Context, orgID valuer.
 
 	for rows.Next() {
 		var metric metrics_explorer.MetricDetail
-		if err := rows.Scan(&metric.MetricName, &metric.Description, &metric.MetricType, &metric.MetricUnit, &metric.TimeSeries, &response.Total); err != nil {
+		if err := rows.Scan(&metric.MetricName, &metric.Description, &metric.MetricType, &metric.IsMonotonic, &metric.MetricUnit, &metric.TimeSeries, &response.Total); err != nil {
 			zap.L().Error("Error scanning metric row", zap.Error(err))
 			return &response, &model.ApiError{Typ: "ClickHouseError", Err: err}
 		}
@@ -5582,6 +5573,7 @@ func (r *ClickHouseReader) ListSummaryMetrics(ctx context.Context, orgID valuer.
 			if updatedMetrics.Description != "" {
 				response.Metrics[i].Description = updatedMetrics.Description
 			}
+			response.Metrics[i].IsMonotonic = updatedMetrics.IsMonotonic
 		}
 		if samples, exists := samplesMap[response.Metrics[i].MetricName]; exists {
 			response.Metrics[i].Samples = samples

pkg/query-service/app/metricsexplorer/summary.go

@@ -444,10 +444,6 @@ func getQueryRangeForRelateMetricsList(metricName string, scores metrics_explore
 		Filters:    filters,
 	}
 
-	if scores.MetricType == v3.MetricTypeSum && !scores.IsMonotonic && scores.Temporality == v3.Cumulative {
-		scores.MetricType = v3.MetricTypeGauge
-	}
-
 	switch scores.MetricType {
 	case v3.MetricTypeGauge:
 		query.TimeAggregation = v3.TimeAggregationAvg
@@ -460,8 +456,9 @@ func getQueryRangeForRelateMetricsList(metricName string, scores metrics_explore
 	}
 
 	query.AggregateAttribute = v3.AttributeKey{
-		Key:  metricName,
-		Type: v3.AttributeKeyType(scores.MetricType),
+		Key:         metricName,
+		Type:        v3.AttributeKeyType(scores.MetricType),
+		IsMonotonic: scores.IsMonotonic,
 	}
 
 	query.StepInterval = 60
@@ -552,9 +549,6 @@ func (receiver *SummaryService) GetInspectMetrics(ctx context.Context, params *m
 }
 
 func (receiver *SummaryService) UpdateMetricsMetadata(ctx context.Context, orgID valuer.UUID, params *metrics_explorer.UpdateMetricsMetadataRequest) *model.ApiError {
-	if params.MetricType == v3.MetricTypeSum && !params.IsMonotonic && params.Temporality == v3.Cumulative {
-		params.MetricType = v3.MetricTypeGauge
-	}
 	metadata := model.UpdateMetricsMetadata{
 		MetricName:  params.MetricName,
 		MetricType:  params.MetricType,

pkg/query-service/model/metrics_explorer/summary.go

@@ -36,6 +36,7 @@ type MetricDetail struct {
 	TimeSeries   uint64 `json:"timeseries"`
 	Samples      uint64 `json:"samples"`
 	LastReceived int64  `json:"lastReceived"`
+	IsMonotonic  bool   `json:"is_monotonic"`
 }
 
 type TreeMapResponseItem struct {

pkg/query-service/model/v3/v3.go

@@ -381,11 +381,12 @@ func (t AttributeKeyType) String() string {
 }
 
 type AttributeKey struct {
-	Key      string               `json:"key"`
-	DataType AttributeKeyDataType `json:"dataType"`
-	Type     AttributeKeyType     `json:"type"`
-	IsColumn bool                 `json:"isColumn"`
-	IsJSON   bool                 `json:"isJSON"`
+	Key         string               `json:"key"`
+	DataType    AttributeKeyDataType `json:"dataType"`
+	Type        AttributeKeyType     `json:"type"`
+	IsColumn    bool                 `json:"isColumn"`
+	IsMonotonic bool                 `json:"isMonotonic"`
+	IsJSON      bool                 `json:"isJSON"`
 }
 
 func (a AttributeKey) CacheKey() string {

pkg/query-service/rules/threshold_rule_test.go

@@ -258,7 +258,7 @@ func TestPrepareLinksToLogsV5(t *testing.T) {
 	ts := time.UnixMilli(1753527163000)
 
 	link := rule.prepareLinksToLogs(context.Background(), ts, labels.Labels{})
-	assert.Contains(t, link, "compositeQuery=%257B%2522queryType%2522%253A%2522builder%2522%252C%2522builder%2522%253A%257B%2522queryData%2522%253A%255B%257B%2522queryName%2522%253A%2522A%2522%252C%2522stepInterval%2522%253A60%252C%2522dataSource%2522%253A%2522logs%2522%252C%2522aggregateOperator%2522%253A%2522noop%2522%252C%2522aggregateAttribute%2522%253A%257B%2522key%2522%253A%2522%2522%252C%2522dataType%2522%253A%2522%2522%252C%2522type%2522%253A%2522%2522%252C%2522isColumn%2522%253Afalse%252C%2522isJSON%2522%253Afalse%257D%252C%2522expression%2522%253A%2522A%2522%252C%2522disabled%2522%253Afalse%252C%2522limit%2522%253A0%252C%2522offset%2522%253A0%252C%2522pageSize%2522%253A0%252C%2522ShiftBy%2522%253A0%252C%2522IsAnomaly%2522%253Afalse%252C%2522QueriesUsedInFormula%2522%253Anull%252C%2522filter%2522%253A%257B%2522expression%2522%253A%2522service.name%2BEXISTS%2522%257D%257D%255D%252C%2522queryFormulas%2522%253A%255B%255D%257D%257D&timeRange=%7B%22start%22%3A1753526700000%2C%22end%22%3A1753527000000%2C%22pageSize%22%3A100%7D&startTime=1753526700000&endTime=1753527000000&options=%7B%22maxLines%22%3A0%2C%22format%22%3A%22%22%2C%22selectColumns%22%3Anull%7D")
+	assert.Contains(t, link, "compositeQuery=%257B%2522queryType%2522%253A%2522builder%2522%252C%2522builder%2522%253A%257B%2522queryData%2522%253A%255B%257B%2522queryName%2522%253A%2522A%2522%252C%2522stepInterval%2522%253A60%252C%2522dataSource%2522%253A%2522logs%2522%252C%2522aggregateOperator%2522%253A%2522noop%2522%252C%2522aggregateAttribute%2522%253A%257B%2522key%2522%253A%2522%2522%252C%2522dataType%2522%253A%2522%2522%252C%2522type%2522%253A%2522%2522%252C%2522isColumn%2522%253Afalse%252C%2522isMonotonic%2522%253Afalse%252C%2522isJSON%2522%253Afalse%257D%252C%2522expression%2522%253A%2522A%2522%252C%2522disabled%2522%253Afalse%252C%2522limit%2522%253A0%252C%2522offset%2522%253A0%252C%2522pageSize%2522%253A0%252C%2522ShiftBy%2522%253A0%252C%2522IsAnomaly%2522%253Afalse%252C%2522QueriesUsedInFormula%2522%253Anull%252C%2522filter%2522%253A%257B%2522expression%2522%253A%2522service.name%2BEXISTS%2522%257D%257D%255D%252C%2522queryFormulas%2522%253A%255B%255D%257D%257D&timeRange=%7B%22start%22%3A1753526700000%2C%22end%22%3A1753527000000%2C%22pageSize%22%3A100%7D&startTime=1753526700000&endTime=1753527000000&options=%7B%22maxLines%22%3A0%2C%22format%22%3A%22%22%2C%22selectColumns%22%3Anull%7D")
 }
 
 func TestPrepareLinksToTracesV5(t *testing.T) {