chore: enchance clickhouse log_comment

* chore: metrics explorer summary page api migration

* chore: search bar replacement

* chore: additional fixes

* chore: fix CI

* chore: additional performance fix

* chore: address comments

* chore: additional fixes

* chore: address comments

* chore: corresponding fix for generated api changes

* chore: additional changes

* chore: additional fixes

* chore: address comments

* chore: address comments

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/query-service/formatter"
+	"github.com/SigNoz/signoz/pkg/units"
 
 	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 := formatter.FromUnit(r.Unit())
+	valueFormatter := units.FormatterFromUnit(r.Unit())
 
 	var res ruletypes.Vector
 	var err error

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

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

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

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

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

@@ -47,7 +47,6 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sClustersRowData {
 	key: string;
 	clusterUID: string;
-	clusterNameRaw: string;
 	clusterName: React.ReactNode;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
@@ -176,7 +175,6 @@ 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,9 +459,6 @@ function K8sDaemonSetsList({
 
 	const handleRowClick = (record: K8sDaemonSetsRowData): void => {
 		if (groupBy.length === 0) {
-			if (!record.daemonsetNameRaw) {
-				return;
-			}
 			setSelectedRowData(null);
 			setSelectedDaemonSetUID(record.daemonsetUID);
 			setSearchParams({
@@ -526,13 +523,9 @@ function K8sDaemonSetsList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								if (record.daemonsetNameRaw) {
-									setSelectedDaemonSetUID(record.daemonsetUID);
-								}
+								setSelectedDaemonSetUID(record.daemonsetUID);
 							},
-							className: record.daemonsetNameRaw
-								? 'expanded-clickable-row'
-								: 'disabled-row',
+							className: 'expanded-clickable-row',
 						})}
 					/>
 
@@ -724,10 +717,7 @@ function K8sDaemonSetsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className:
-						groupBy.length > 0 || record.daemonsetNameRaw
-							? 'clickable-row'
-							: 'disabled-row',
+					className: 'clickable-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

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

@@ -82,7 +82,6 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sDaemonSetsRowData {
 	key: string;
 	daemonsetUID: string;
-	daemonsetNameRaw: string;
 	daemonsetName: React.ReactNode;
 	cpu_request: React.ReactNode;
 	cpu_limit: React.ReactNode;
@@ -277,7 +276,6 @@ 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,9 +465,6 @@ function K8sDeploymentsList({
 
 	const handleRowClick = (record: K8sDeploymentsRowData): void => {
 		if (groupBy.length === 0) {
-			if (!record.deploymentNameRaw) {
-				return;
-			}
 			setSelectedRowData(null);
 			setselectedDeploymentUID(record.deploymentUID);
 			setSearchParams({
@@ -532,13 +529,9 @@ function K8sDeploymentsList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								if (record.deploymentNameRaw) {
-									setselectedDeploymentUID(record.deploymentUID);
-								}
+								setselectedDeploymentUID(record.deploymentUID);
 							},
-							className: record.deploymentNameRaw
-								? 'expanded-clickable-row'
-								: 'disabled-row',
+							className: 'expanded-clickable-row',
 						})}
 					/>
 
@@ -731,10 +724,7 @@ function K8sDeploymentsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className:
-						groupBy.length > 0 || record.deploymentNameRaw
-							? 'clickable-row'
-							: 'disabled-row',
+					className: 'clickable-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

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

@@ -81,7 +81,6 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sDeploymentsRowData {
 	key: string;
 	deploymentUID: string;
-	deploymentNameRaw: string;
 	deploymentName: React.ReactNode;
 	available_pods: React.ReactNode;
 	desired_pods: React.ReactNode;
@@ -268,7 +267,6 @@ 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,11 +337,6 @@
 		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,9 +430,6 @@ function K8sJobsList({
 
 	const handleRowClick = (record: K8sJobsRowData): void => {
 		if (groupBy.length === 0) {
-			if (!record.jobNameRaw) {
-				return;
-			}
 			setSelectedRowData(null);
 			setselectedJobUID(record.jobUID);
 			setSearchParams({
@@ -497,11 +494,9 @@ function K8sJobsList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								if (record.jobNameRaw) {
-									setselectedJobUID(record.jobUID);
-								}
+								setselectedJobUID(record.jobUID);
 							},
-							className: record.jobNameRaw ? 'expanded-clickable-row' : 'disabled-row',
+							className: 'expanded-clickable-row',
 						})}
 					/>
 
@@ -691,10 +686,7 @@ function K8sJobsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className:
-						groupBy.length > 0 || record.jobNameRaw
-							? 'clickable-row'
-							: 'disabled-row',
+					className: 'clickable-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

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

@@ -94,7 +94,6 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sJobsRowData {
 	key: string;
 	jobUID: string;
-	jobNameRaw: string;
 	jobName: React.ReactNode;
 	namespaceName: React.ReactNode;
 	successful_pods: React.ReactNode;
@@ -304,7 +303,6 @@ 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,9 +461,6 @@ function K8sNamespacesList({
 
 	const handleRowClick = (record: K8sNamespacesRowData): void => {
 		if (groupBy.length === 0) {
-			if (!record.namespaceNameRaw) {
-				return;
-			}
 			setSelectedRowData(null);
 			setselectedNamespaceUID(record.namespaceUID);
 			setSearchParams({
@@ -528,13 +525,9 @@ function K8sNamespacesList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								if (record.namespaceNameRaw) {
-									setselectedNamespaceUID(record.namespaceUID);
-								}
+								setselectedNamespaceUID(record.namespaceUID);
 							},
-							className: record.namespaceNameRaw
-								? 'expanded-clickable-row'
-								: 'disabled-row',
+							className: 'expanded-clickable-row',
 						})}
 					/>
 
@@ -725,10 +718,7 @@ function K8sNamespacesList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className:
-						groupBy.length > 0 || record.namespaceNameRaw
-							? 'clickable-row'
-							: 'disabled-row',
+					className: 'clickable-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

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

@@ -41,7 +41,6 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sNamespacesRowData {
 	key: string;
 	namespaceUID: string;
-	namespaceNameRaw: string;
 	namespaceName: string;
 	clusterName: string;
 	cpu: React.ReactNode;
@@ -162,7 +161,6 @@ 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,9 +440,6 @@ function K8sNodesList({
 
 	const handleRowClick = (record: K8sNodesRowData): void => {
 		if (groupBy.length === 0) {
-			if (!record.nodeNameRaw) {
-				return;
-			}
 			setSelectedRowData(null);
 			setSelectedNodeUID(record.nodeUID);
 			setSearchParams({
@@ -508,13 +505,9 @@ function K8sNodesList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								if (record.nodeNameRaw) {
-									setSelectedNodeUID(record.nodeUID);
-								}
+								setSelectedNodeUID(record.nodeUID);
 							},
-							className: record.nodeNameRaw
-								? 'expanded-clickable-row'
-								: 'disabled-row',
+							className: 'expanded-clickable-row',
 						})}
 					/>
 
@@ -704,10 +697,7 @@ function K8sNodesList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className:
-						groupBy.length > 0 || record.nodeNameRaw
-							? 'clickable-row'
-							: 'disabled-row',
+					className: 'clickable-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

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

@@ -53,7 +53,6 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sNodesRowData {
 	key: string;
 	nodeUID: string;
-	nodeNameRaw: string;
 	nodeName: React.ReactNode;
 	clusterName: string;
 	cpu: React.ReactNode;
@@ -194,7 +193,6 @@ 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,9 +497,6 @@ function K8sPodsList({
 
 	const handleRowClick = (record: K8sPodsRowData): void => {
 		if (groupBy.length === 0) {
-			if (!record.podNameRaw) {
-				return;
-			}
 			setSelectedPodUID(record.podUID);
 			setSearchParams({
 				...Object.fromEntries(searchParams.entries()),
@@ -620,11 +617,9 @@ function K8sPodsList({
 						}}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								if (record.podNameRaw) {
-									setSelectedPodUID(record.podUID);
-								}
+								setSelectedPodUID(record.podUID);
 							},
-							className: record.podNameRaw ? 'expanded-clickable-row' : 'disabled-row',
+							className: 'expanded-clickable-row',
 						})}
 					/>
 
@@ -759,10 +754,7 @@ function K8sPodsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className:
-						groupBy.length > 0 || record.podNameRaw
-							? 'clickable-row'
-							: 'disabled-row',
+					className: 'clickable-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

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

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

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

@@ -82,7 +82,6 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sStatefulSetsRowData {
 	key: string;
 	statefulsetUID: string;
-	statefulsetNameRaw: string;
 	statefulsetName: React.ReactNode;
 	cpu_request: React.ReactNode;
 	cpu_limit: React.ReactNode;
@@ -277,7 +276,6 @@ 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,9 +392,6 @@ function K8sVolumesList({
 
 	const handleRowClick = (record: K8sVolumesRowData): void => {
 		if (groupBy.length === 0) {
-			if (!record.volumeNameRaw) {
-				return;
-			}
 			setSelectedRowData(null);
 			setselectedVolumeUID(record.volumeUID);
 			setSearchParams({
@@ -459,13 +456,9 @@ function K8sVolumesList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								if (record.volumeNameRaw) {
-									setselectedVolumeUID(record.volumeUID);
-								}
+								setselectedVolumeUID(record.volumeUID);
 							},
-							className: record.volumeNameRaw
-								? 'expanded-clickable-row'
-								: 'disabled-row',
+							className: 'expanded-clickable-row',
 						})}
 					/>
 
@@ -650,10 +643,7 @@ function K8sVolumesList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className:
-						groupBy.length > 0 || record.volumeNameRaw
-							? 'clickable-row'
-							: 'disabled-row',
+					className: 'clickable-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

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

@@ -47,7 +47,6 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sVolumesRowData {
 	key: string;
 	volumeUID: string;
-	volumeNameRaw: string;
 	pvcName: React.ReactNode;
 	namespaceName: React.ReactNode;
 	capacity: React.ReactNode;
@@ -187,7 +186,6 @@ 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,7 +107,6 @@ export const defaultAvailableColumns = [
 export interface K8sPodsRowData {
 	key: string;
 	podName: React.ReactNode;
-	podNameRaw: string;
 	podUID: string;
 	cpu_request: React.ReactNode;
 	cpu_limit: React.ReactNode;
@@ -351,7 +350,6 @@ 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 { MetricTypeViewRenderer } from '../Summary/utils';
+import MetricTypeRendererV2 from '../Summary/MetricTypeViewRenderer';
 import {
 	METRIC_METADATA_KEYS,
 	METRIC_METADATA_TEMPORALITY_OPTIONS,
@@ -98,7 +98,7 @@ function Metadata({
 				return <FieldRenderer field="-" />;
 			}
 			if (key === TableFields.TYPE) {
-				return <MetricTypeViewRenderer type={value as MetrictypesTypeDTO} />;
+				return <MetricTypeRendererV2 type={value as MetrictypesTypeDTO} />;
 			}
 			if (key === TableFields.IS_MONOTONIC) {
 				return <FieldRenderer field={value ? 'Yes' : 'No'} />;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,63 @@
+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,9 +30,8 @@ const mockData: MetricsListItemRowData[] = [
 	},
 ];
 
-const mockQueryFilters: TagFilter = {
-	items: [],
-	op: 'AND',
+const mockQueryFilterExpression: Filter = {
+	expression: '',
 };
 
 jest.mock('react-router-dom-v5-compat', () => {
@@ -82,7 +81,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -106,8 +106,9 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
 						isLoading
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -130,7 +131,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -158,7 +160,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -187,7 +190,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={mockOpenMetricDetails}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -212,7 +216,8 @@ describe('MetricsTable', () => {
 						setOrderBy={mockSetOrderBy}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -222,8 +227,10 @@ describe('MetricsTable', () => {
 		fireEvent.click(samplesHeader);
 
 		expect(mockSetOrderBy).toHaveBeenCalledWith({
-			columnName: 'samples',
-			order: 'asc',
+			key: {
+				name: 'samples',
+			},
+			direction: 'asc',
 		});
 	});
 });

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

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

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

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

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

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

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

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

pkg/modules/metricsexplorer/implmetricsexplorer/module.go

@@ -217,6 +217,12 @@ 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
 	}
@@ -513,7 +519,7 @@ func (m *module) fetchTimeseriesMetadata(ctx context.Context, orgID valuer.UUID,
 		"metric_name",
 		"anyLast(description) AS description",
 		"anyLast(type) AS metric_type",
-		"anyLast(unit) AS metric_unit",
+		"argMax(unit, unix_milli) AS metric_unit",
 		"anyLast(temporality) AS temporality",
 		"anyLast(is_monotonic) AS is_monotonic",
 	)

pkg/querier/builder_query.go

@@ -12,6 +12,7 @@ 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"
@@ -212,6 +213,12 @@ 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,6 +14,7 @@ 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"
 )
 
@@ -99,6 +100,10 @@ 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,6 +14,8 @@ 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"
@@ -187,6 +189,11 @@ 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,6 +16,7 @@ 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"
@@ -526,6 +527,12 @@ 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,
-		    ANY_VALUE(t.unit) AS metric_unit,
+		    argMax(t.unit, unix_milli) AS metric_unit,
 		    uniq(t.fingerprint) AS timeseries,
 			uniq(metric_name) OVER() AS total
 		FROM %s.%s AS t

pkg/query-service/formatter/data.go

@@ -1,86 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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/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/query-service/formatter"
+	"github.com/SigNoz/signoz/pkg/units"
 	"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 := formatter.FromUnit(r.Unit())
+	valueFormatter := units.FormatterFromUnit(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/query-service/formatter"
+	"github.com/SigNoz/signoz/pkg/units"
 
 	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 := formatter.FromUnit(r.Unit())
+	valueFormatter := units.FormatterFromUnit(r.Unit())
 
 	var res ruletypes.Vector
 	var err error

pkg/signoz/provider.go

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

pkg/telemetrymetadata/metadata.go

@@ -13,6 +13,7 @@ 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"
@@ -139,6 +140,12 @@ 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
 	}
@@ -334,6 +341,12 @@ 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
 	}
@@ -583,6 +596,12 @@ 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
 	}
@@ -685,6 +704,12 @@ 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
 	}
@@ -1621,6 +1646,10 @@ 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,6 +5,7 @@ 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"
@@ -35,7 +36,14 @@ func NewInstrumentation(ctx context.Context, providerSettings factory.ProviderSe
 }
 
 func (hook *instrumentation) BeforeQuery(ctx context.Context, event *telemetrystore.QueryEvent) context.Context {
-	ctx, _ = hook.tracer.Start(ctx, "", trace.WithSpanKind(trace.SpanKindClient))
+	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)
+
 	return ctx
 }
 

pkg/types/querybuildertypes/querybuildertypesv5/builder_query.go

@@ -2,6 +2,7 @@ package querybuildertypesv5
 
 import (
 	"fmt"
+	"time"
 
 	"github.com/SigNoz/signoz/pkg/types/metrictypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
@@ -226,3 +227,28 @@ 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/query-service/converter"
+	"github.com/SigNoz/signoz/pkg/units"
 	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 := converter.FromUnit(converter.Unit(b.TargetUnit))
+	unitConverter := units.ConverterFromUnit(units.Unit(b.TargetUnit))
 	// convert the target value to the y-axis unit
-	value := unitConverter.Convert(converter.Value{
+	value := unitConverter.Convert(units.Value{
 		F: val,
-		U: converter.Unit(b.TargetUnit),
-	}, converter.Unit(ruleUnit))
+		U: units.Unit(b.TargetUnit),
+	}, units.Unit(ruleUnit))
 	return value.F
 }
 

pkg/units/converter.go

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

pkg/units/converter_bool.go

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

pkg/units/converter_data.go

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

pkg/units/converter_data_rate.go

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

pkg/units/converter_data_rate_test.go

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

pkg/units/converter_data_test.go

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

pkg/units/converter_percent.go

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

pkg/units/converter_percent_test.go

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

pkg/units/converter_throughput.go

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

pkg/units/converter_time.go

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

pkg/units/converter_time_test.go

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

pkg/units/formatter.go

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

pkg/units/formatter_bool.go

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

pkg/units/formatter_data.go

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,90 @@
+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)
+}

pkg/units/formatter_data_rate_test.go

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

pkg/units/formatter_data_test.go

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

pkg/units/formatter_none.go

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

pkg/units/formatter_percent.go

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

pkg/units/formatter_scale.go

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

pkg/units/formatter_scale_test.go

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

pkg/units/formatter_throughput.go

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

pkg/units/formatter_throughput_test.go

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

pkg/units/formatter_time.go

@@ -1,4 +1,4 @@
-package formatter
+package units
 
 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, nil, " µs")
+		return toFixedScaled(value/1000, " µs")
 	} else if absValue < 1000000000 { // 2000000 ns is better represented as 2 ms
-		return toFixedScaled(value/1000000, nil, " ms")
+		return toFixedScaled(value/1000000, " ms")
 	} else if absValue < 60000000000 {
-		return toFixedScaled(value/1000000000, nil, " s")
+		return toFixedScaled(value/1000000000, " s")
 	} else if absValue < 3600000000000 {
-		return toFixedScaled(value/60000000000, nil, " min")
+		return toFixedScaled(value/60000000000, " min")
 	} else if absValue < 86400000000000 {
-		return toFixedScaled(value/3600000000000, nil, " hour")
+		return toFixedScaled(value/3600000000000, " hour")
 	} else {
-		return toFixedScaled(value/86400000000000, nil, " day")
+		return toFixedScaled(value/86400000000000, " 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, nil, " ms")
+		return toFixedScaled(value/1000, " ms")
 	} else {
-		return toFixedScaled(value/1000000, nil, " s")
+		return toFixedScaled(value/1000000, " 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, nil, " s")
+		return toFixedScaled(value/1000, " s")
 	} else if absValue < 3600000 {
-		return toFixedScaled(value/60000, nil, " min")
+		return toFixedScaled(value/60000, " min")
 	} else if absValue < 86400000 { // 172800000 ms is better represented as 2 day
-		return toFixedScaled(value/3600000, nil, " hour")
+		return toFixedScaled(value/3600000, " hour")
 	} else if absValue < 31536000000 {
-		return toFixedScaled(value/86400000, nil, " day")
+		return toFixedScaled(value/86400000, " day")
 	}
 
-	return toFixedScaled(value/31536000000, nil, " year")
+	return toFixedScaled(value/31536000000, " 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, nil, " ns")
+		return toFixedScaled(value*1e9, " ns")
 	} else if absValue < 0.001 {
-		return toFixedScaled(value*1e6, nil, " µs")
+		return toFixedScaled(value*1e6, " µs")
 	} else if absValue < 1 {
-		return toFixedScaled(value*1e3, nil, " ms")
+		return toFixedScaled(value*1e3, " ms")
 	} else if absValue < 60 {
 		return toFixed(value, nil) + " s"
 	} else if absValue < 3600 {
-		return toFixedScaled(value/60, nil, " min")
+		return toFixedScaled(value/60, " min")
 	} else if absValue < 86400 { // 56000 s is better represented as 15.56 hour
-		return toFixedScaled(value/3600, nil, " hour")
+		return toFixedScaled(value/3600, " hour")
 	} else if absValue < 604800 {
-		return toFixedScaled(value/86400, nil, " day")
+		return toFixedScaled(value/86400, " day")
 	} else if absValue < 31536000 {
-		return toFixedScaled(value/604800, nil, " week")
+		return toFixedScaled(value/604800, " week")
 	}
 
-	return toFixedScaled(value/3.15569e7, nil, " year")
+	return toFixedScaled(value/3.15569e7, " 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, nil, " hour")
+		return toFixedScaled(value/60, " hour")
 	} else if absValue < 10080 {
-		return toFixedScaled(value/1440, nil, " day")
+		return toFixedScaled(value/1440, " day")
 	} else if absValue < 604800 {
-		return toFixedScaled(value/10080, nil, " week")
+		return toFixedScaled(value/10080, " week")
 	} else {
-		return toFixedScaled(value/5.25948e5, nil, " year")
+		return toFixedScaled(value/5.25948e5, " 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, nil, " day")
+		return toFixedScaled(value/24, " day")
 	} else if absValue < 8760 {
-		return toFixedScaled(value/168, nil, " week")
+		return toFixedScaled(value/168, " week")
 	} else {
-		return toFixedScaled(value/8760, nil, " year")
+		return toFixedScaled(value/8760, " 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, nil, " week")
+		return toFixedScaled(value/7, " week")
 	} else {
-		return toFixedScaled(value/365, nil, " year")
+		return toFixedScaled(value/365, " year")
 	}
 }
 
@@ -170,6 +170,6 @@ func toWeeks(value float64) string {
 	if absValue < 52 {
 		return toFixed(value, nil) + " week"
 	} else {
-		return toFixedScaled(value/52, nil, " year")
+		return toFixedScaled(value/52, " year")
 	}
 }

pkg/units/formatter_time_test.go

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