Merge branch 'main' into feat/disable_side_drawer_missing_identifiers

ee/query-service/rules/anomaly.go

@@ -26,7 +26,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/utils/times"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/timestamp"
 
-	"github.com/SigNoz/signoz/pkg/units"
+	"github.com/SigNoz/signoz/pkg/query-service/formatter"
 
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 
@@ -335,7 +335,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 
 	prevState := r.State()
 
-	valueFormatter := units.FormatterFromUnit(r.Unit())
+	valueFormatter := formatter.FromUnit(r.Unit())
 
 	var res ruletypes.Vector
 	var err error

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

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

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -453,6 +453,9 @@ function K8sClustersList({
 
 	const handleRowClick = (record: K8sClustersRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.clusterNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedClusterName(record.clusterUID);
 			setSearchParams({
@@ -517,9 +520,13 @@ function K8sClustersList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedClusterName(record.clusterUID);
+								if (record.clusterNameRaw) {
+									setselectedClusterName(record.clusterUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.clusterNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -709,7 +716,10 @@ function K8sClustersList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.clusterNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx

@@ -47,6 +47,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sClustersRowData {
 	key: string;
 	clusterUID: string;
+	clusterNameRaw: string;
 	clusterName: React.ReactNode;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
@@ -175,6 +176,7 @@ export const formatDataForTable = (
 	data.map((cluster, index) => ({
 		key: index.toString(),
 		clusterUID: cluster.meta.k8s_cluster_name,
+		clusterNameRaw: cluster.meta.k8s_cluster_name || '',
 		clusterName: (
 			<Tooltip title={cluster.meta.k8s_cluster_name}>
 				{cluster.meta.k8s_cluster_name}

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -459,6 +459,9 @@ function K8sDaemonSetsList({
 
 	const handleRowClick = (record: K8sDaemonSetsRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.daemonsetNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setSelectedDaemonSetUID(record.daemonsetUID);
 			setSearchParams({
@@ -523,9 +526,13 @@ function K8sDaemonSetsList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setSelectedDaemonSetUID(record.daemonsetUID);
+								if (record.daemonsetNameRaw) {
+									setSelectedDaemonSetUID(record.daemonsetUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.daemonsetNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -717,7 +724,10 @@ function K8sDaemonSetsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.daemonsetNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/DaemonSets/utils.tsx

@@ -82,6 +82,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sDaemonSetsRowData {
 	key: string;
 	daemonsetUID: string;
+	daemonsetNameRaw: string;
 	daemonsetName: React.ReactNode;
 	cpu_request: React.ReactNode;
 	cpu_limit: React.ReactNode;
@@ -276,6 +277,7 @@ export const formatDataForTable = (
 	data.map((daemonSet, index) => ({
 		key: index.toString(),
 		daemonsetUID: daemonSet.daemonSetName,
+		daemonsetNameRaw: daemonSet.meta.k8s_daemonset_name || '',
 		daemonsetName: (
 			<Tooltip title={daemonSet.meta.k8s_daemonset_name}>
 				{daemonSet.meta.k8s_daemonset_name || ''}

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -465,6 +465,9 @@ function K8sDeploymentsList({
 
 	const handleRowClick = (record: K8sDeploymentsRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.deploymentNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedDeploymentUID(record.deploymentUID);
 			setSearchParams({
@@ -529,9 +532,13 @@ function K8sDeploymentsList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedDeploymentUID(record.deploymentUID);
+								if (record.deploymentNameRaw) {
+									setselectedDeploymentUID(record.deploymentUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.deploymentNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -724,7 +731,10 @@ function K8sDeploymentsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.deploymentNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Deployments/utils.tsx

@@ -81,6 +81,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sDeploymentsRowData {
 	key: string;
 	deploymentUID: string;
+	deploymentNameRaw: string;
 	deploymentName: React.ReactNode;
 	available_pods: React.ReactNode;
 	desired_pods: React.ReactNode;
@@ -267,6 +268,7 @@ export const formatDataForTable = (
 	data.map((deployment, index) => ({
 		key: index.toString(),
 		deploymentUID: deployment.meta.k8s_deployment_name,
+		deploymentNameRaw: deployment.meta.k8s_deployment_name || '',
 		deploymentName: (
 			<Tooltip title={deployment.meta.k8s_deployment_name}>
 				{deployment.meta.k8s_deployment_name}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss

@@ -337,6 +337,11 @@
 		cursor: pointer;
 	}
 
+	.disabled-row {
+		cursor: default;
+		opacity: 0.6;
+	}
+
 	.k8s-list-table {
 		.ant-table {
 			.ant-table-thead > tr > th {

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -430,6 +430,9 @@ function K8sJobsList({
 
 	const handleRowClick = (record: K8sJobsRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.jobNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedJobUID(record.jobUID);
 			setSearchParams({
@@ -494,9 +497,11 @@ function K8sJobsList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedJobUID(record.jobUID);
+								if (record.jobNameRaw) {
+									setselectedJobUID(record.jobUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.jobNameRaw ? 'expanded-clickable-row' : 'disabled-row',
 						})}
 					/>
 
@@ -686,7 +691,10 @@ function K8sJobsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.jobNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Jobs/utils.tsx

@@ -94,6 +94,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sJobsRowData {
 	key: string;
 	jobUID: string;
+	jobNameRaw: string;
 	jobName: React.ReactNode;
 	namespaceName: React.ReactNode;
 	successful_pods: React.ReactNode;
@@ -303,6 +304,7 @@ export const formatDataForTable = (
 	data.map((job, index) => ({
 		key: index.toString(),
 		jobUID: job.jobName,
+		jobNameRaw: job.meta.k8s_job_name || '',
 		jobName: (
 			<Tooltip title={job.meta.k8s_job_name}>
 				{job.meta.k8s_job_name || ''}

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -461,6 +461,9 @@ function K8sNamespacesList({
 
 	const handleRowClick = (record: K8sNamespacesRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.namespaceNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedNamespaceUID(record.namespaceUID);
 			setSearchParams({
@@ -525,9 +528,13 @@ function K8sNamespacesList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedNamespaceUID(record.namespaceUID);
+								if (record.namespaceNameRaw) {
+									setselectedNamespaceUID(record.namespaceUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.namespaceNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -718,7 +725,10 @@ function K8sNamespacesList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.namespaceNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Namespaces/utils.tsx

@@ -41,6 +41,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sNamespacesRowData {
 	key: string;
 	namespaceUID: string;
+	namespaceNameRaw: string;
 	namespaceName: string;
 	clusterName: string;
 	cpu: React.ReactNode;
@@ -161,6 +162,7 @@ export const formatDataForTable = (
 	data.map((namespace, index) => ({
 		key: index.toString(),
 		namespaceUID: namespace.namespaceName,
+		namespaceNameRaw: namespace.namespaceName || '',
 		namespaceName: namespace.namespaceName,
 		clusterName: namespace.meta.k8s_cluster_name,
 		cpu: (

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -440,6 +440,9 @@ function K8sNodesList({
 
 	const handleRowClick = (record: K8sNodesRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.nodeNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setSelectedNodeUID(record.nodeUID);
 			setSearchParams({
@@ -505,9 +508,13 @@ function K8sNodesList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setSelectedNodeUID(record.nodeUID);
+								if (record.nodeNameRaw) {
+									setSelectedNodeUID(record.nodeUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.nodeNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -697,7 +704,10 @@ function K8sNodesList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.nodeNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Nodes/utils.tsx

@@ -53,6 +53,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sNodesRowData {
 	key: string;
 	nodeUID: string;
+	nodeNameRaw: string;
 	nodeName: React.ReactNode;
 	clusterName: string;
 	cpu: React.ReactNode;
@@ -193,6 +194,7 @@ export const formatDataForTable = (
 	data.map((node, index) => ({
 		key: `${node.nodeUID}-${index}`,
 		nodeUID: node.nodeUID || '',
+		nodeNameRaw: node.meta.k8s_node_name || '',
 		nodeName: (
 			<Tooltip title={node.meta.k8s_node_name}>
 				{node.meta.k8s_node_name || ''}

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -497,6 +497,9 @@ function K8sPodsList({
 
 	const handleRowClick = (record: K8sPodsRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.podNameRaw) {
+				return;
+			}
 			setSelectedPodUID(record.podUID);
 			setSearchParams({
 				...Object.fromEntries(searchParams.entries()),
@@ -617,9 +620,11 @@ function K8sPodsList({
 						}}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setSelectedPodUID(record.podUID);
+								if (record.podNameRaw) {
+									setSelectedPodUID(record.podUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.podNameRaw ? 'expanded-clickable-row' : 'disabled-row',
 						})}
 					/>
 
@@ -754,7 +759,10 @@ function K8sPodsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.podNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -462,6 +462,9 @@ function K8sStatefulSetsList({
 
 	const handleRowClick = (record: K8sStatefulSetsRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.statefulsetNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedStatefulSetUID(record.statefulsetUID);
 			setSearchParams({
@@ -526,9 +529,13 @@ function K8sStatefulSetsList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedStatefulSetUID(record.statefulsetUID);
+								if (record.statefulsetNameRaw) {
+									setselectedStatefulSetUID(record.statefulsetUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.statefulsetNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -720,7 +727,10 @@ function K8sStatefulSetsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.statefulsetNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/StatefulSets/utils.tsx

@@ -82,6 +82,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sStatefulSetsRowData {
 	key: string;
 	statefulsetUID: string;
+	statefulsetNameRaw: string;
 	statefulsetName: React.ReactNode;
 	cpu_request: React.ReactNode;
 	cpu_limit: React.ReactNode;
@@ -276,6 +277,7 @@ export const formatDataForTable = (
 	data.map((statefulSet, index) => ({
 		key: index.toString(),
 		statefulsetUID: statefulSet.statefulSetName,
+		statefulsetNameRaw: statefulSet.meta.k8s_statefulset_name || '',
 		statefulsetName: (
 			<Tooltip title={statefulSet.meta.k8s_statefulset_name}>
 				{statefulSet.meta.k8s_statefulset_name || ''}

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -392,6 +392,9 @@ function K8sVolumesList({
 
 	const handleRowClick = (record: K8sVolumesRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.volumeNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedVolumeUID(record.volumeUID);
 			setSearchParams({
@@ -456,9 +459,13 @@ function K8sVolumesList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedVolumeUID(record.volumeUID);
+								if (record.volumeNameRaw) {
+									setselectedVolumeUID(record.volumeUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.volumeNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -643,7 +650,10 @@ function K8sVolumesList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.volumeNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Volumes/utils.tsx

@@ -47,6 +47,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sVolumesRowData {
 	key: string;
 	volumeUID: string;
+	volumeNameRaw: string;
 	pvcName: React.ReactNode;
 	namespaceName: React.ReactNode;
 	capacity: React.ReactNode;
@@ -186,6 +187,7 @@ export const formatDataForTable = (
 	data.map((volume, index) => ({
 		key: index.toString(),
 		volumeUID: volume.persistentVolumeClaimName,
+		volumeNameRaw: volume.persistentVolumeClaimName || '',
 		pvcName: (
 			<Tooltip title={volume.persistentVolumeClaimName}>
 				{volume.persistentVolumeClaimName || ''}

frontend/src/container/InfraMonitoringK8s/utils.tsx

@@ -107,6 +107,7 @@ export const defaultAvailableColumns = [
 export interface K8sPodsRowData {
 	key: string;
 	podName: React.ReactNode;
+	podNameRaw: string;
 	podUID: string;
 	cpu_request: React.ReactNode;
 	cpu_limit: React.ReactNode;
@@ -350,6 +351,7 @@ export const formatDataForTable = (
 				{pod.meta.k8s_pod_name || ''}
 			</Tooltip>
 		),
+		podNameRaw: pod.meta.k8s_pod_name || '',
 		podUID: pod.podUID || '',
 		cpu_request: (
 			<ValidateColumnValueWrapper

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

pkg/modules/metricsexplorer/implmetricsexplorer/module.go

@@ -217,12 +217,6 @@ func (m *module) GetTreemap(ctx context.Context, orgID valuer.UUID, req *metrics
 }
 
 func (m *module) GetMetricMetadataMulti(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string]*metricsexplorertypes.MetricMetadata, error) {
-
-	comment := ctxtypes.CommentFromContext(ctx)
-	comment.Set("signal", telemetrytypes.SignalMetrics.StringValue())
-	comment.Set("is_metadata_query", "true")
-	ctx = ctxtypes.NewContextWithComment(ctx, comment)
-
 	if len(metricNames) == 0 {
 		return map[string]*metricsexplorertypes.MetricMetadata{}, nil
 	}
@@ -519,7 +513,7 @@ func (m *module) fetchTimeseriesMetadata(ctx context.Context, orgID valuer.UUID,
 		"metric_name",
 		"anyLast(description) AS description",
 		"anyLast(type) AS metric_type",
-		"argMax(unit, unix_milli) AS metric_unit",
+		"anyLast(unit) AS metric_unit",
 		"anyLast(temporality) AS temporality",
 		"anyLast(is_monotonic) AS is_monotonic",
 	)

pkg/querier/builder_query.go

@@ -12,7 +12,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/telemetrylogs"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/bytedance/sonic"
@@ -213,12 +212,6 @@ func (q *builderQuery[T]) Execute(ctx context.Context) (*qbtypes.Result, error)
 
 // executeWithContext executes the query with query window and step context for partial value detection
 func (q *builderQuery[T]) executeWithContext(ctx context.Context, query string, args []any) (*qbtypes.Result, error) {
-
-	comment := ctxtypes.CommentFromContext(ctx)
-	comment.Set("signal", q.spec.Signal.StringValue())
-	comment.Set("duration", qbtypes.DurationBucket(q.fromMS, q.toMS))
-	ctx = ctxtypes.NewContextWithComment(ctx, comment)
-
 	totalRows := uint64(0)
 	totalBytes := uint64(0)
 	elapsed := time.Duration(0)

pkg/querier/clickhouse_query.go

@@ -14,7 +14,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/querybuilder"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 )
 
@@ -100,10 +99,6 @@ func (q *chSQLQuery) renderVars(query string, vars map[string]qbtypes.VariableIt
 
 func (q *chSQLQuery) Execute(ctx context.Context) (*qbtypes.Result, error) {
 
-	comment := ctxtypes.CommentFromContext(ctx)
-	comment.Set("duration", qbtypes.DurationBucket(q.fromMS, q.toMS))
-	ctx = ctxtypes.NewContextWithComment(ctx, comment)
-
 	totalRows := uint64(0)
 	totalBytes := uint64(0)
 	elapsed := time.Duration(0)

pkg/querier/promql_query.go

@@ -14,8 +14,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/prometheus"
 	"github.com/SigNoz/signoz/pkg/querybuilder"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
-	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	qbv5 "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/prometheus/prometheus/promql"
@@ -189,11 +187,6 @@ func (q *promqlQuery) renderVars(query string, vars map[string]qbv5.VariableItem
 
 func (q *promqlQuery) Execute(ctx context.Context) (*qbv5.Result, error) {
 
-	comment := ctxtypes.CommentFromContext(ctx)
-	comment.Set("signal", telemetrytypes.SignalMetrics.StringValue())
-	comment.Set("duration", qbtypes.DurationBucket(q.tr.From, q.tr.To))
-	ctx = ctxtypes.NewContextWithComment(ctx, comment)
-
 	start := int64(querybuilder.ToNanoSecs(q.tr.From))
 	end := int64(querybuilder.ToNanoSecs(q.tr.To))
 

pkg/querier/querier.go

@@ -16,7 +16,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/utils"
 	"github.com/SigNoz/signoz/pkg/querybuilder"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/metrictypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"golang.org/x/exp/maps"
@@ -527,12 +526,6 @@ func (q *querier) run(
 	steps map[string]qbtypes.Step,
 	qbEvent *qbtypes.QBEvent,
 ) (*qbtypes.QueryRangeResponse, error) {
-
-	comment := ctxtypes.CommentFromContext(ctx)
-	comment.Set("panel_type", qbEvent.PanelType)
-	comment.Set("query_type", qbEvent.QueryType)
-	ctx = ctxtypes.NewContextWithComment(ctx, comment)
-
 	results := make(map[string]any)
 	warnings := make([]string, 0)
 	warningsDocURL := ""

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

@@ -5441,7 +5441,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,
-		    argMax(t.unit, unix_milli) AS metric_unit,
+		    ANY_VALUE(t.unit) AS metric_unit,
 		    uniq(t.fingerprint) AS timeseries,
 			uniq(metric_name) OVER() AS total
 		FROM %s.%s AS t

pkg/query-service/converter/bool.go

@@ -1,4 +1,4 @@
-package units
+package converter
 
 // boolConverter is a Converter implementation for bool
 type boolConverter struct{}

pkg/query-service/converter/converter.go

@@ -1,4 +1,4 @@
-package units
+package converter
 
 // Unit represents a unit of measurement
 type Unit string
@@ -40,8 +40,8 @@ var (
 	NoneConverter       = &noneConverter{}
 )
 
-// ConverterFromUnit returns a converter for the given unit
-func ConverterFromUnit(u Unit) Converter {
+// FromUnit returns a converter for the given unit
+func FromUnit(u Unit) Converter {
 	switch u {
 	case "ns", "us", "µs", "ms", "s", "m", "h", "d", "min", "w", "wk":
 		return DurationConverter

pkg/query-service/converter/data.go

@@ -1,4 +1,4 @@
-package units
+package converter
 
 const (
 	// base 10 (SI prefixes)

pkg/query-service/converter/data_rate.go

@@ -1,4 +1,4 @@
-package units
+package converter
 
 const (
 	// base 10 (SI prefixes)

pkg/query-service/converter/data_rate_test.go

@@ -1,4 +1,4 @@
-package units
+package converter
 
 import (
 	"testing"

pkg/query-service/converter/data_test.go

@@ -1,4 +1,4 @@
-package units
+package converter
 
 import (
 	"testing"

pkg/query-service/converter/percent_converter.go

@@ -1,4 +1,4 @@
-package units
+package converter
 
 // percentConverter is a converter for percent unit
 type percentConverter struct{}

pkg/query-service/converter/percent_converter_test.go

@@ -1,4 +1,4 @@
-package units
+package converter
 
 import (
 	"testing"

pkg/query-service/converter/throughput.go

@@ -1,4 +1,4 @@
-package units
+package converter
 
 // throughputConverter is an implementation of Converter that converts throughput
 type throughputConverter struct {

pkg/query-service/converter/time.go

@@ -1,4 +1,4 @@
-package units
+package converter
 
 type Duration float64
 

pkg/query-service/converter/time_test.go

@@ -1,4 +1,4 @@
-package units
+package converter
 
 import (
 	"testing"

pkg/query-service/formatter/bool.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 import "fmt"
 

pkg/query-service/formatter/data.go

@@ -0,0 +1,86 @@
+package formatter
+
+import (
+	"fmt"
+
+	"github.com/SigNoz/signoz/pkg/query-service/converter"
+	"github.com/dustin/go-humanize"
+)
+
+type dataFormatter struct {
+}
+
+func NewDataFormatter() Formatter {
+	return &dataFormatter{}
+}
+
+func (*dataFormatter) Name() string {
+	return "data"
+}
+
+func (f *dataFormatter) Format(value float64, unit string) string {
+	switch unit {
+	case "bytes", "By":
+		return humanize.IBytes(uint64(value))
+	case "decbytes":
+		return humanize.Bytes(uint64(value))
+	case "bits", "bit":
+		// humanize.IBytes/Bytes doesn't support bits
+		// and returns 0 B for values less than a byte
+		if value < 8 {
+			return fmt.Sprintf("%v b", value)
+		}
+		return humanize.IBytes(uint64(value / 8))
+	case "decbits":
+		if value < 8 {
+			return fmt.Sprintf("%v b", value)
+		}
+		return humanize.Bytes(uint64(value / 8))
+	case "kbytes", "KiBy":
+		return humanize.IBytes(uint64(value * converter.Kibibit))
+	case "Kibit":
+		return humanize.IBytes(uint64(value * converter.Kibibit / 8))
+	case "decKbytes", "deckbytes", "kBy":
+		return humanize.Bytes(uint64(value * converter.Kilobit))
+	case "kbit":
+		return humanize.Bytes(uint64(value * converter.Kilobit / 8))
+	case "mbytes", "MiBy":
+		return humanize.IBytes(uint64(value * converter.Mebibit))
+	case "Mibit":
+		return humanize.IBytes(uint64(value * converter.Mebibit / 8))
+	case "decMbytes", "decmbytes", "MBy":
+		return humanize.Bytes(uint64(value * converter.Megabit))
+	case "Mbit":
+		return humanize.Bytes(uint64(value * converter.Megabit / 8))
+	case "gbytes", "GiBy":
+		return humanize.IBytes(uint64(value * converter.Gibibit))
+	case "Gibit":
+		return humanize.IBytes(uint64(value * converter.Gibibit / 8))
+	case "decGbytes", "decgbytes", "GBy":
+		return humanize.Bytes(uint64(value * converter.Gigabit))
+	case "Gbit":
+		return humanize.Bytes(uint64(value * converter.Gigabit / 8))
+	case "tbytes", "TiBy":
+		return humanize.IBytes(uint64(value * converter.Tebibit))
+	case "Tibit":
+		return humanize.IBytes(uint64(value * converter.Tebibit / 8))
+	case "decTbytes", "dectbytes", "TBy":
+		return humanize.Bytes(uint64(value * converter.Terabit))
+	case "Tbit":
+		return humanize.Bytes(uint64(value * converter.Terabit / 8))
+	case "pbytes", "PiBy":
+		return humanize.IBytes(uint64(value * converter.Pebibit))
+	case "Pbit":
+		return humanize.Bytes(uint64(value * converter.Petabit / 8))
+	case "decPbytes", "decpbytes", "PBy":
+		return humanize.Bytes(uint64(value * converter.Petabit))
+	case "EiBy":
+		return humanize.IBytes(uint64(value * converter.Exbibit))
+	case "Ebit":
+		return humanize.Bytes(uint64(value * converter.Exabit / 8))
+	case "EBy":
+		return humanize.Bytes(uint64(value * converter.Exabit))
+	}
+	// When unit is not matched, return the value as it is.
+	return fmt.Sprintf("%v", value)
+}

pkg/query-service/formatter/data_rate.go

@@ -0,0 +1,91 @@
+package formatter
+
+import (
+	"fmt"
+
+	"github.com/SigNoz/signoz/pkg/query-service/converter"
+	"github.com/dustin/go-humanize"
+)
+
+type dataRateFormatter struct {
+}
+
+func NewDataRateFormatter() Formatter {
+	return &dataRateFormatter{}
+}
+
+func (*dataRateFormatter) Name() string {
+	return "data_rate"
+}
+
+func (f *dataRateFormatter) Format(value float64, unit string) string {
+	switch unit {
+	case "binBps":
+		return humanize.IBytes(uint64(value)) + "/s"
+	case "Bps", "By/s":
+		return humanize.Bytes(uint64(value)) + "/s"
+	case "binbps":
+		// humanize.IBytes/Bytes doesn't support bits
+		// and returns 0 B for values less than a byte
+		if value < 8 {
+			return fmt.Sprintf("%v b/s", value)
+		}
+		return humanize.IBytes(uint64(value/8)) + "/s"
+	case "bps", "bit/s":
+		if value < 8 {
+			return fmt.Sprintf("%v b/s", value)
+		}
+		return humanize.Bytes(uint64(value/8)) + "/s"
+	case "KiBs", "KiBy/s":
+		return humanize.IBytes(uint64(value*converter.KibibitPerSecond)) + "/s"
+	case "Kibits", "Kibit/s":
+		return humanize.IBytes(uint64(value*converter.KibibitPerSecond/8)) + "/s"
+	case "KBs", "kBy/s":
+		return humanize.IBytes(uint64(value*converter.KilobitPerSecond)) + "/s"
+	case "Kbits", "kbit/s":
+		return humanize.Bytes(uint64(value*converter.KilobitPerSecond/8)) + "/s"
+	case "MiBs", "MiBy/s":
+		return humanize.IBytes(uint64(value*converter.MebibitPerSecond)) + "/s"
+	case "Mibits", "Mibit/s":
+		return humanize.IBytes(uint64(value*converter.MebibitPerSecond/8)) + "/s"
+	case "MBs", "MBy/s":
+		return humanize.IBytes(uint64(value*converter.MegabitPerSecond)) + "/s"
+	case "Mbits", "Mbit/s":
+		return humanize.Bytes(uint64(value*converter.MegabitPerSecond/8)) + "/s"
+	case "GiBs", "GiBy/s":
+		return humanize.IBytes(uint64(value*converter.GibibitPerSecond)) + "/s"
+	case "Gibits", "Gibit/s":
+		return humanize.IBytes(uint64(value*converter.GibibitPerSecond/8)) + "/s"
+	case "GBs", "GBy/s":
+		return humanize.IBytes(uint64(value*converter.GigabitPerSecond)) + "/s"
+	case "Gbits", "Gbit/s":
+		return humanize.Bytes(uint64(value*converter.GigabitPerSecond/8)) + "/s"
+	case "TiBs", "TiBy/s":
+		return humanize.IBytes(uint64(value*converter.TebibitPerSecond)) + "/s"
+	case "Tibits", "Tibit/s":
+		return humanize.IBytes(uint64(value*converter.TebibitPerSecond/8)) + "/s"
+	case "TBs", "TBy/s":
+		return humanize.IBytes(uint64(value*converter.TerabitPerSecond)) + "/s"
+	case "Tbits", "Tbit/s":
+		return humanize.Bytes(uint64(value*converter.TerabitPerSecond/8)) + "/s"
+	case "PiBs", "PiBy/s":
+		return humanize.IBytes(uint64(value*converter.PebibitPerSecond)) + "/s"
+	case "Pibits", "Pibit/s":
+		return humanize.IBytes(uint64(value*converter.PebibitPerSecond/8)) + "/s"
+	case "PBs", "PBy/s":
+		return humanize.IBytes(uint64(value*converter.PetabitPerSecond)) + "/s"
+	case "Pbits", "Pbit/s":
+		return humanize.Bytes(uint64(value*converter.PetabitPerSecond/8)) + "/s"
+	// Exa units
+	case "EBy/s":
+		return humanize.Bytes(uint64(value*converter.ExabitPerSecond)) + "/s"
+	case "Ebit/s":
+		return humanize.Bytes(uint64(value*converter.ExabitPerSecond/8)) + "/s"
+	case "EiBy/s":
+		return humanize.IBytes(uint64(value*converter.ExbibitPerSecond)) + "/s"
+	case "Eibit/s":
+		return humanize.IBytes(uint64(value*converter.ExbibitPerSecond/8)) + "/s"
+	}
+	// When unit is not matched, return the value as it is.
+	return fmt.Sprintf("%v", value)
+}

pkg/query-service/formatter/data_rate_test.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 import (
 	"testing"

pkg/query-service/formatter/data_test.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 import (
 	"testing"
@@ -6,7 +6,7 @@ import (
 	"github.com/stretchr/testify/assert"
 )
 
-func TestFormatterData(t *testing.T) {
+func TestData(t *testing.T) {
 	dataFormatter := NewDataFormatter()
 
 	assert.Equal(t, "1 B", dataFormatter.Format(1, "bytes"))

pkg/query-service/formatter/formatter.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 type Formatter interface {
 	Format(value float64, unit string) string
@@ -16,7 +16,7 @@ var (
 	ThroughputFormatter = NewThroughputFormatter()
 )
 
-func FormatterFromUnit(u string) Formatter {
+func FromUnit(u string) Formatter {
 	switch u {
 	case "ns", "us", "µs", "ms", "s", "m", "h", "d", "min", "w", "wk":
 		return DurationFormatter

pkg/query-service/formatter/none.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 import "fmt"
 

pkg/query-service/formatter/percent.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 import "fmt"
 

pkg/query-service/formatter/scale.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 import (
 	"fmt"
@@ -14,36 +14,36 @@ type IntervalsInSecondsType map[Interval]int
 type Interval string
 
 const (
-	IntervalYear        Interval = "year"
-	IntervalMonth       Interval = "month"
-	IntervalWeek        Interval = "week"
-	IntervalDay         Interval = "day"
-	IntervalHour        Interval = "hour"
-	IntervalMinute      Interval = "minute"
-	IntervalSecond      Interval = "second"
-	IntervalMillisecond Interval = "millisecond"
+	Year        Interval = "year"
+	Month       Interval = "month"
+	Week        Interval = "week"
+	Day         Interval = "day"
+	Hour        Interval = "hour"
+	Minute      Interval = "minute"
+	Second      Interval = "second"
+	Millisecond Interval = "millisecond"
 )
 
 var Units = []Interval{
-	IntervalYear,
-	IntervalMonth,
-	IntervalWeek,
-	IntervalDay,
-	IntervalHour,
-	IntervalMinute,
-	IntervalSecond,
-	IntervalMillisecond,
+	Year,
+	Month,
+	Week,
+	Day,
+	Hour,
+	Minute,
+	Second,
+	Millisecond,
 }
 
 var IntervalsInSeconds = IntervalsInSecondsType{
-	IntervalYear:        31536000,
-	IntervalMonth:       2592000,
-	IntervalWeek:        604800,
-	IntervalDay:         86400,
-	IntervalHour:        3600,
-	IntervalMinute:      60,
-	IntervalSecond:      1,
-	IntervalMillisecond: 1,
+	Year:        31536000,
+	Month:       2592000,
+	Week:        604800,
+	Day:         86400,
+	Hour:        3600,
+	Minute:      60,
+	Second:      1,
+	Millisecond: 1,
 }
 
 type DecimalCount *int
@@ -78,8 +78,9 @@ func toFixed(value float64, decimals DecimalCount) string {
 	}
 
 	decimalPos := strings.Index(formatted, ".")
+	precision := 0
 	if decimalPos != -1 {
-		precision := len(formatted) - decimalPos - 1
+		precision = len(formatted) - decimalPos - 1
 		if precision < *decimals {
 			return formatted + strings.Repeat("0", *decimals-precision)
 		}
@@ -88,8 +89,8 @@ func toFixed(value float64, decimals DecimalCount) string {
 	return formatted
 }
 
-func toFixedScaled(value float64, scaleFormat string) string {
-	return toFixed(value, nil) + scaleFormat
+func toFixedScaled(value float64, decimals DecimalCount, scaleFormat string) string {
+	return toFixed(value, decimals) + scaleFormat
 }
 
 func getDecimalsForValue(value float64) int {

pkg/query-service/formatter/scale_test.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 import (
 	"testing"

pkg/query-service/formatter/throughput.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 import "fmt"
 
@@ -13,35 +13,35 @@ func (*throughputFormatter) Name() string {
 	return "throughput"
 }
 
-func simpleCountUnit(value float64, symbol string) string {
+func simpleCountUnit(value float64, decimals *int, symbol string) string {
 	units := []string{"", "K", "M", "B", "T"}
 	scaler := scaledUnits(1000, units, 0)
 
-	return scaler(value, nil) + " " + symbol
+	return scaler(value, decimals) + " " + symbol
 }
 
 func (f *throughputFormatter) Format(value float64, unit string) string {
 	switch unit {
 	case "cps", "{count}/s":
-		return simpleCountUnit(value, "c/s")
+		return simpleCountUnit(value, nil, "c/s")
 	case "ops", "{ops}/s":
-		return simpleCountUnit(value, "op/s")
+		return simpleCountUnit(value, nil, "op/s")
 	case "reqps", "{req}/s":
-		return simpleCountUnit(value, "req/s")
+		return simpleCountUnit(value, nil, "req/s")
 	case "rps", "{read}/s":
-		return simpleCountUnit(value, "r/s")
+		return simpleCountUnit(value, nil, "r/s")
 	case "wps", "{write}/s":
-		return simpleCountUnit(value, "w/s")
+		return simpleCountUnit(value, nil, "w/s")
 	case "iops", "{iops}/s":
-		return simpleCountUnit(value, "iops")
+		return simpleCountUnit(value, nil, "iops")
 	case "cpm", "{count}/min":
-		return simpleCountUnit(value, "c/m")
+		return simpleCountUnit(value, nil, "c/m")
 	case "opm", "{ops}/min":
-		return simpleCountUnit(value, "op/m")
+		return simpleCountUnit(value, nil, "op/m")
 	case "rpm", "{read}/min":
-		return simpleCountUnit(value, "r/m")
+		return simpleCountUnit(value, nil, "r/m")
 	case "wpm", "{write}/min":
-		return simpleCountUnit(value, "w/m")
+		return simpleCountUnit(value, nil, "w/m")
 	}
 	// When unit is not matched, return the value as it is.
 	return fmt.Sprintf("%v", value)

pkg/query-service/formatter/throughput_test.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 import (
 	"testing"

pkg/query-service/formatter/time.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 import (
 	"fmt"
@@ -46,17 +46,17 @@ func toNanoSeconds(value float64) string {
 	if absValue < 1000 {
 		return toFixed(value, nil) + " ns"
 	} else if absValue < 1000000 { // 2000 ns is better represented as 2 µs
-		return toFixedScaled(value/1000, " µs")
+		return toFixedScaled(value/1000, nil, " µs")
 	} else if absValue < 1000000000 { // 2000000 ns is better represented as 2 ms
-		return toFixedScaled(value/1000000, " ms")
+		return toFixedScaled(value/1000000, nil, " ms")
 	} else if absValue < 60000000000 {
-		return toFixedScaled(value/1000000000, " s")
+		return toFixedScaled(value/1000000000, nil, " s")
 	} else if absValue < 3600000000000 {
-		return toFixedScaled(value/60000000000, " min")
+		return toFixedScaled(value/60000000000, nil, " min")
 	} else if absValue < 86400000000000 {
-		return toFixedScaled(value/3600000000000, " hour")
+		return toFixedScaled(value/3600000000000, nil, " hour")
 	} else {
-		return toFixedScaled(value/86400000000000, " day")
+		return toFixedScaled(value/86400000000000, nil, " day")
 	}
 }
 
@@ -66,9 +66,9 @@ func toMicroSeconds(value float64) string {
 	if absValue < 1000 {
 		return toFixed(value, nil) + " µs"
 	} else if absValue < 1000000 { // 2000 µs is better represented as 2 ms
-		return toFixedScaled(value/1000, " ms")
+		return toFixedScaled(value/1000, nil, " ms")
 	} else {
-		return toFixedScaled(value/1000000, " s")
+		return toFixedScaled(value/1000000, nil, " s")
 	}
 }
 
@@ -80,16 +80,16 @@ func toMilliSeconds(value float64) string {
 	if absValue < 1000 {
 		return toFixed(value, nil) + " ms"
 	} else if absValue < 60000 {
-		return toFixedScaled(value/1000, " s")
+		return toFixedScaled(value/1000, nil, " s")
 	} else if absValue < 3600000 {
-		return toFixedScaled(value/60000, " min")
+		return toFixedScaled(value/60000, nil, " min")
 	} else if absValue < 86400000 { // 172800000 ms is better represented as 2 day
-		return toFixedScaled(value/3600000, " hour")
+		return toFixedScaled(value/3600000, nil, " hour")
 	} else if absValue < 31536000000 {
-		return toFixedScaled(value/86400000, " day")
+		return toFixedScaled(value/86400000, nil, " day")
 	}
 
-	return toFixedScaled(value/31536000000, " year")
+	return toFixedScaled(value/31536000000, nil, " year")
 }
 
 // toSeconds returns a easy to read string representation of the given value in seconds
@@ -97,24 +97,24 @@ func toSeconds(value float64) string {
 	absValue := math.Abs(value)
 
 	if absValue < 0.000001 {
-		return toFixedScaled(value*1e9, " ns")
+		return toFixedScaled(value*1e9, nil, " ns")
 	} else if absValue < 0.001 {
-		return toFixedScaled(value*1e6, " µs")
+		return toFixedScaled(value*1e6, nil, " µs")
 	} else if absValue < 1 {
-		return toFixedScaled(value*1e3, " ms")
+		return toFixedScaled(value*1e3, nil, " ms")
 	} else if absValue < 60 {
 		return toFixed(value, nil) + " s"
 	} else if absValue < 3600 {
-		return toFixedScaled(value/60, " min")
+		return toFixedScaled(value/60, nil, " min")
 	} else if absValue < 86400 { // 56000 s is better represented as 15.56 hour
-		return toFixedScaled(value/3600, " hour")
+		return toFixedScaled(value/3600, nil, " hour")
 	} else if absValue < 604800 {
-		return toFixedScaled(value/86400, " day")
+		return toFixedScaled(value/86400, nil, " day")
 	} else if absValue < 31536000 {
-		return toFixedScaled(value/604800, " week")
+		return toFixedScaled(value/604800, nil, " week")
 	}
 
-	return toFixedScaled(value/3.15569e7, " year")
+	return toFixedScaled(value/3.15569e7, nil, " year")
 }
 
 // toMinutes returns a easy to read string representation of the given value in minutes
@@ -124,13 +124,13 @@ func toMinutes(value float64) string {
 	if absValue < 60 {
 		return toFixed(value, nil) + " min"
 	} else if absValue < 1440 {
-		return toFixedScaled(value/60, " hour")
+		return toFixedScaled(value/60, nil, " hour")
 	} else if absValue < 10080 {
-		return toFixedScaled(value/1440, " day")
+		return toFixedScaled(value/1440, nil, " day")
 	} else if absValue < 604800 {
-		return toFixedScaled(value/10080, " week")
+		return toFixedScaled(value/10080, nil, " week")
 	} else {
-		return toFixedScaled(value/5.25948e5, " year")
+		return toFixedScaled(value/5.25948e5, nil, " year")
 	}
 }
 
@@ -142,11 +142,11 @@ func toHours(value float64) string {
 	if absValue < 24 {
 		return toFixed(value, nil) + " hour"
 	} else if absValue < 168 {
-		return toFixedScaled(value/24, " day")
+		return toFixedScaled(value/24, nil, " day")
 	} else if absValue < 8760 {
-		return toFixedScaled(value/168, " week")
+		return toFixedScaled(value/168, nil, " week")
 	} else {
-		return toFixedScaled(value/8760, " year")
+		return toFixedScaled(value/8760, nil, " year")
 	}
 }
 
@@ -157,9 +157,9 @@ func toDays(value float64) string {
 	if absValue < 7 {
 		return toFixed(value, nil) + " day"
 	} else if absValue < 365 {
-		return toFixedScaled(value/7, " week")
+		return toFixedScaled(value/7, nil, " week")
 	} else {
-		return toFixedScaled(value/365, " year")
+		return toFixedScaled(value/365, nil, " year")
 	}
 }
 
@@ -170,6 +170,6 @@ func toWeeks(value float64) string {
 	if absValue < 52 {
 		return toFixed(value, nil) + " week"
 	} else {
-		return toFixedScaled(value/52, " year")
+		return toFixedScaled(value/52, nil, " year")
 	}
 }

pkg/query-service/formatter/time_test.go

@@ -1,4 +1,4 @@
-package units
+package formatter
 
 import (
 	"testing"

pkg/query-service/rules/prom_rule.go

@@ -9,7 +9,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/prometheus"
-	"github.com/SigNoz/signoz/pkg/units"
+	"github.com/SigNoz/signoz/pkg/query-service/formatter"
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	"github.com/SigNoz/signoz/pkg/query-service/model"
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
@@ -185,7 +185,7 @@ func (r *PromRule) buildAndRunQuery(ctx context.Context, ts time.Time) (ruletype
 
 func (r *PromRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 	prevState := r.State()
-	valueFormatter := units.FormatterFromUnit(r.Unit())
+	valueFormatter := formatter.FromUnit(r.Unit())
 
 	// prepare query, run query get data and filter the data based on the threshold
 	results, err := r.buildAndRunQuery(ctx, ts)

pkg/query-service/rules/threshold_rule.go

@@ -33,7 +33,7 @@ import (
 
 	logsv3 "github.com/SigNoz/signoz/pkg/query-service/app/logs/v3"
 	tracesV4 "github.com/SigNoz/signoz/pkg/query-service/app/traces/v4"
-	"github.com/SigNoz/signoz/pkg/units"
+	"github.com/SigNoz/signoz/pkg/query-service/formatter"
 
 	querierV5 "github.com/SigNoz/signoz/pkg/querier"
 
@@ -571,7 +571,7 @@ func (r *ThresholdRule) buildAndRunQueryV5(ctx context.Context, orgID valuer.UUI
 func (r *ThresholdRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 	prevState := r.State()
 
-	valueFormatter := units.FormatterFromUnit(r.Unit())
+	valueFormatter := formatter.FromUnit(r.Unit())
 
 	var res ruletypes.Vector
 	var err error

pkg/signoz/provider.go

@@ -176,10 +176,9 @@ func NewSQLMigrationProviderFactories(
 func NewTelemetryStoreProviderFactories() factory.NamedMap[factory.ProviderFactory[telemetrystore.TelemetryStore, telemetrystore.Config]] {
 	return factory.MustNewNamedMap(
 		clickhousetelemetrystore.NewFactory(
-			telemetrystorehook.NewLoggingFactory(),
-			// adding instrumentation factory before settings as we are starting the query span here
-			telemetrystorehook.NewInstrumentationFactory(),
 			telemetrystorehook.NewSettingsFactory(),
+			telemetrystorehook.NewLoggingFactory(),
+			telemetrystorehook.NewInstrumentationFactory(),
 		),
 	)
 }

pkg/telemetrymetadata/metadata.go

@@ -13,7 +13,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/telemetrytraces"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/metrictypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
@@ -140,12 +139,6 @@ func (t *telemetryMetaStore) tracesTblStatementToFieldKeys(ctx context.Context)
 
 // getTracesKeys returns the keys from the spans that match the field selection criteria
 func (t *telemetryMetaStore) getTracesKeys(ctx context.Context, fieldKeySelectors []*telemetrytypes.FieldKeySelector) ([]*telemetrytypes.TelemetryFieldKey, bool, error) {
-
-	comment := ctxtypes.CommentFromContext(ctx)
-	comment.Set("signal", telemetrytypes.SignalTraces.StringValue())
-	comment.Set("is_metadata_query", "true")
-	ctx = ctxtypes.NewContextWithComment(ctx, comment)
-
 	if len(fieldKeySelectors) == 0 {
 		return nil, true, nil
 	}
@@ -341,12 +334,6 @@ func (t *telemetryMetaStore) logsTblStatementToFieldKeys(ctx context.Context) ([
 
 // getLogsKeys returns the keys from the spans that match the field selection criteria
 func (t *telemetryMetaStore) getLogsKeys(ctx context.Context, fieldKeySelectors []*telemetrytypes.FieldKeySelector) ([]*telemetrytypes.TelemetryFieldKey, bool, error) {
-
-	comment := ctxtypes.CommentFromContext(ctx)
-	comment.Set("signal", telemetrytypes.SignalLogs.StringValue())
-	comment.Set("is_metadata_query", "true")
-	ctx = ctxtypes.NewContextWithComment(ctx, comment)
-
 	if len(fieldKeySelectors) == 0 {
 		return nil, true, nil
 	}
@@ -596,12 +583,6 @@ func getPriorityForContext(ctx telemetrytypes.FieldContext) int {
 
 // getMetricsKeys returns the keys from the metrics that match the field selection criteria
 func (t *telemetryMetaStore) getMetricsKeys(ctx context.Context, fieldKeySelectors []*telemetrytypes.FieldKeySelector) ([]*telemetrytypes.TelemetryFieldKey, bool, error) {
-
-	comment := ctxtypes.CommentFromContext(ctx)
-	comment.Set("signal", telemetrytypes.SignalMetrics.StringValue())
-	comment.Set("is_metadata_query", "true")
-	ctx = ctxtypes.NewContextWithComment(ctx, comment)
-
 	if len(fieldKeySelectors) == 0 {
 		return nil, true, nil
 	}
@@ -704,12 +685,6 @@ func (t *telemetryMetaStore) getMetricsKeys(ctx context.Context, fieldKeySelecto
 
 // getMeterKeys returns the keys from the meter metrics that match the field selection criteria
 func (t *telemetryMetaStore) getMeterSourceMetricKeys(ctx context.Context, fieldKeySelectors []*telemetrytypes.FieldKeySelector) ([]*telemetrytypes.TelemetryFieldKey, bool, error) {
-
-	comment := ctxtypes.CommentFromContext(ctx)
-	comment.Set("signal", telemetrytypes.SignalMetrics.StringValue())
-	comment.Set("is_metadata_query", "true")
-	ctx = ctxtypes.NewContextWithComment(ctx, comment)
-
 	if len(fieldKeySelectors) == 0 {
 		return nil, true, nil
 	}
@@ -1646,10 +1621,6 @@ func (t *telemetryMetaStore) FetchTemporalityMulti(ctx context.Context, queryTim
 }
 
 func (t *telemetryMetaStore) FetchTemporalityAndTypeMulti(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string]metrictypes.Temporality, map[string]metrictypes.Type, error) {
-	comment := ctxtypes.CommentFromContext(ctx)
-	comment.Set("signal", telemetrytypes.SignalMetrics.StringValue())
-	comment.Set("is_metadata_query", "true")
-	ctx = ctxtypes.NewContextWithComment(ctx, comment)
 	if len(metricNames) == 0 {
 		return make(map[string]metrictypes.Temporality), make(map[string]metrictypes.Type), nil
 	}

pkg/telemetrystore/telemetrystorehook/instrumentation.go

@@ -5,7 +5,6 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"go.opentelemetry.io/otel/attribute"
 	"go.opentelemetry.io/otel/codes"
 	"go.opentelemetry.io/otel/metric"
@@ -36,14 +35,7 @@ func NewInstrumentation(ctx context.Context, providerSettings factory.ProviderSe
 }
 
 func (hook *instrumentation) BeforeQuery(ctx context.Context, event *telemetrystore.QueryEvent) context.Context {
-	ctx, span := hook.tracer.Start(ctx, "", trace.WithSpanKind(trace.SpanKindClient))
-
-	// add trace_id and span_id to the log_comment
-	comment := ctxtypes.CommentFromContext(ctx)
-	comment.Set("trace_id", span.SpanContext().TraceID().String())
-	comment.Set("span_id", span.SpanContext().SpanID().String())
-	ctx = ctxtypes.NewContextWithComment(ctx, comment)
-
+	ctx, _ = hook.tracer.Start(ctx, "", trace.WithSpanKind(trace.SpanKindClient))
 	return ctx
 }
 

pkg/types/querybuildertypes/querybuildertypesv5/builder_query.go

@@ -2,7 +2,6 @@ package querybuildertypesv5
 
 import (
 	"fmt"
-	"time"
 
 	"github.com/SigNoz/signoz/pkg/types/metrictypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
@@ -227,28 +226,3 @@ func CanShortCircuitDelta(metricAgg MetricAggregation) bool {
 
 	return false
 }
-
-func DurationBucket(fromMS, toMS uint64) string {
-	diff := time.Unix(0, int64(toMS)).Sub(time.Unix(0, int64(fromMS)))
-
-	buckets := []struct {
-		d time.Duration
-		l string
-	}{
-		{1 * time.Hour, "<1h"},
-		{6 * time.Hour, "<6h"},
-		{24 * time.Hour, "<24h"},
-		{3 * 24 * time.Hour, "<3D"},
-		{7 * 24 * time.Hour, "<1W"},
-		{14 * 24 * time.Hour, "<2W"},
-		{30 * 24 * time.Hour, "<1M"},
-	}
-
-	for _, b := range buckets {
-		if diff < b.d {
-			return b.l
-		}
-	}
-
-	return ">=1M"
-}

pkg/types/ruletypes/threshold.go

@@ -7,7 +7,7 @@ import (
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/units"
+	"github.com/SigNoz/signoz/pkg/query-service/converter"
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/labels"
 	"github.com/SigNoz/signoz/pkg/valuer"
@@ -201,12 +201,12 @@ func sortThresholds(thresholds []BasicRuleThreshold) {
 
 // convertToRuleUnit converts the given value from the target unit to the rule unit
 func (b BasicRuleThreshold) convertToRuleUnit(val float64, ruleUnit string) float64 {
-	unitConverter := units.ConverterFromUnit(units.Unit(b.TargetUnit))
+	unitConverter := converter.FromUnit(converter.Unit(b.TargetUnit))
 	// convert the target value to the y-axis unit
-	value := unitConverter.Convert(units.Value{
+	value := unitConverter.Convert(converter.Value{
 		F: val,
-		U: units.Unit(b.TargetUnit),
-	}, units.Unit(ruleUnit))
+		U: converter.Unit(b.TargetUnit),
+	}, converter.Unit(ruleUnit))
 	return value.F
 }
 

pkg/units/formatter_data.go

@@ -1,85 +0,0 @@
-package units
-
-import (
-	"fmt"
-
-	"github.com/dustin/go-humanize"
-)
-
-type dataFormatter struct {
-}
-
-func NewDataFormatter() Formatter {
-	return &dataFormatter{}
-}
-
-func (*dataFormatter) Name() string {
-	return "data"
-}
-
-func (f *dataFormatter) Format(value float64, unit string) string {
-	switch unit {
-	case "bytes", "By":
-		return humanize.IBytes(uint64(value))
-	case "decbytes":
-		return humanize.Bytes(uint64(value))
-	case "bits", "bit":
-		// humanize.IBytes/Bytes doesn't support bits
-		// and returns 0 B for values less than a byte
-		if value < 8 {
-			return fmt.Sprintf("%v b", value)
-		}
-		return humanize.IBytes(uint64(value / 8))
-	case "decbits":
-		if value < 8 {
-			return fmt.Sprintf("%v b", value)
-		}
-		return humanize.Bytes(uint64(value / 8))
-	case "kbytes", "KiBy":
-		return humanize.IBytes(uint64(value * Kibibit))
-	case "Kibit":
-		return humanize.IBytes(uint64(value * Kibibit / 8))
-	case "decKbytes", "deckbytes", "kBy":
-		return humanize.Bytes(uint64(value * Kilobit))
-	case "kbit":
-		return humanize.Bytes(uint64(value * Kilobit / 8))
-	case "mbytes", "MiBy":
-		return humanize.IBytes(uint64(value * Mebibit))
-	case "Mibit":
-		return humanize.IBytes(uint64(value * Mebibit / 8))
-	case "decMbytes", "decmbytes", "MBy":
-		return humanize.Bytes(uint64(value * Megabit))
-	case "Mbit":
-		return humanize.Bytes(uint64(value * Megabit / 8))
-	case "gbytes", "GiBy":
-		return humanize.IBytes(uint64(value * Gibibit))
-	case "Gibit":
-		return humanize.IBytes(uint64(value * Gibibit / 8))
-	case "decGbytes", "decgbytes", "GBy":
-		return humanize.Bytes(uint64(value * Gigabit))
-	case "Gbit":
-		return humanize.Bytes(uint64(value * Gigabit / 8))
-	case "tbytes", "TiBy":
-		return humanize.IBytes(uint64(value * Tebibit))
-	case "Tibit":
-		return humanize.IBytes(uint64(value * Tebibit / 8))
-	case "decTbytes", "dectbytes", "TBy":
-		return humanize.Bytes(uint64(value * Terabit))
-	case "Tbit":
-		return humanize.Bytes(uint64(value * Terabit / 8))
-	case "pbytes", "PiBy":
-		return humanize.IBytes(uint64(value * Pebibit))
-	case "Pbit":
-		return humanize.Bytes(uint64(value * Petabit / 8))
-	case "decPbytes", "decpbytes", "PBy":
-		return humanize.Bytes(uint64(value * Petabit))
-	case "EiBy":
-		return humanize.IBytes(uint64(value * Exbibit))
-	case "Ebit":
-		return humanize.Bytes(uint64(value * Exabit / 8))
-	case "EBy":
-		return humanize.Bytes(uint64(value * Exabit))
-	}
-	// When unit is not matched, return the value as it is.
-	return fmt.Sprintf("%v", value)
-}

pkg/units/formatter_data_rate.go

@@ -1,90 +0,0 @@
-package units
-
-import (
-	"fmt"
-
-	"github.com/dustin/go-humanize"
-)
-
-type dataRateFormatter struct {
-}
-
-func NewDataRateFormatter() Formatter {
-	return &dataRateFormatter{}
-}
-
-func (*dataRateFormatter) Name() string {
-	return "data_rate"
-}
-
-func (f *dataRateFormatter) Format(value float64, unit string) string {
-	switch unit {
-	case "binBps":
-		return humanize.IBytes(uint64(value)) + "/s"
-	case "Bps", "By/s":
-		return humanize.Bytes(uint64(value)) + "/s"
-	case "binbps":
-		// humanize.IBytes/Bytes doesn't support bits
-		// and returns 0 B for values less than a byte
-		if value < 8 {
-			return fmt.Sprintf("%v b/s", value)
-		}
-		return humanize.IBytes(uint64(value/8)) + "/s"
-	case "bps", "bit/s":
-		if value < 8 {
-			return fmt.Sprintf("%v b/s", value)
-		}
-		return humanize.Bytes(uint64(value/8)) + "/s"
-	case "KiBs", "KiBy/s":
-		return humanize.IBytes(uint64(value*KibibitPerSecond)) + "/s"
-	case "Kibits", "Kibit/s":
-		return humanize.IBytes(uint64(value*KibibitPerSecond/8)) + "/s"
-	case "KBs", "kBy/s":
-		return humanize.IBytes(uint64(value*KilobitPerSecond)) + "/s"
-	case "Kbits", "kbit/s":
-		return humanize.Bytes(uint64(value*KilobitPerSecond/8)) + "/s"
-	case "MiBs", "MiBy/s":
-		return humanize.IBytes(uint64(value*MebibitPerSecond)) + "/s"
-	case "Mibits", "Mibit/s":
-		return humanize.IBytes(uint64(value*MebibitPerSecond/8)) + "/s"
-	case "MBs", "MBy/s":
-		return humanize.IBytes(uint64(value*MegabitPerSecond)) + "/s"
-	case "Mbits", "Mbit/s":
-		return humanize.Bytes(uint64(value*MegabitPerSecond/8)) + "/s"
-	case "GiBs", "GiBy/s":
-		return humanize.IBytes(uint64(value*GibibitPerSecond)) + "/s"
-	case "Gibits", "Gibit/s":
-		return humanize.IBytes(uint64(value*GibibitPerSecond/8)) + "/s"
-	case "GBs", "GBy/s":
-		return humanize.IBytes(uint64(value*GigabitPerSecond)) + "/s"
-	case "Gbits", "Gbit/s":
-		return humanize.Bytes(uint64(value*GigabitPerSecond/8)) + "/s"
-	case "TiBs", "TiBy/s":
-		return humanize.IBytes(uint64(value*TebibitPerSecond)) + "/s"
-	case "Tibits", "Tibit/s":
-		return humanize.IBytes(uint64(value*TebibitPerSecond/8)) + "/s"
-	case "TBs", "TBy/s":
-		return humanize.IBytes(uint64(value*TerabitPerSecond)) + "/s"
-	case "Tbits", "Tbit/s":
-		return humanize.Bytes(uint64(value*TerabitPerSecond/8)) + "/s"
-	case "PiBs", "PiBy/s":
-		return humanize.IBytes(uint64(value*PebibitPerSecond)) + "/s"
-	case "Pibits", "Pibit/s":
-		return humanize.IBytes(uint64(value*PebibitPerSecond/8)) + "/s"
-	case "PBs", "PBy/s":
-		return humanize.IBytes(uint64(value*PetabitPerSecond)) + "/s"
-	case "Pbits", "Pbit/s":
-		return humanize.Bytes(uint64(value*PetabitPerSecond/8)) + "/s"
-	// Exa units
-	case "EBy/s":
-		return humanize.Bytes(uint64(value*ExabitPerSecond)) + "/s"
-	case "Ebit/s":
-		return humanize.Bytes(uint64(value*ExabitPerSecond/8)) + "/s"
-	case "EiBy/s":
-		return humanize.IBytes(uint64(value*ExbibitPerSecond)) + "/s"
-	case "Eibit/s":
-		return humanize.IBytes(uint64(value*ExbibitPerSecond/8)) + "/s"
-	}
-	// When unit is not matched, return the value as it is.
-	return fmt.Sprintf("%v", value)
-}