chore: add basic integration tests for meter

2026-03-01 19:42:55 +00:00 · 2026-03-01 21:53:56 +05:30
21 changed files with 573 additions and 659 deletions
--- a/frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import {
 	Button,
@@ -6,7 +6,7 @@ import {
 	Input,
 	Menu,
 	Popover,
-	Tooltip,
+	Skeleton,
 	Typography,
 } from 'antd';
 import { ColumnsType } from 'antd/es/table';
@@ -15,7 +15,7 @@ import { useGetMetricAttributes } from 'api/generated/services/metrics';
 import { ResizeTable } from 'components/ResizeTable';
 import { DataType } from 'container/LogDetailedView/TableView';
 import { useNotifications } from 'hooks/useNotifications';
-import { Check, Copy, Info, Search, SquareArrowOutUpRight } from 'lucide-react';
+import { Compass, Copy, Search } from 'lucide-react';

 import { PANEL_TYPES } from '../../../constants/queryBuilder';
 import ROUTES from '../../../constants/routes';
@@ -30,8 +30,6 @@ import {
 import { getMetricDetailsQuery } from './utils';

 const ALL_ATTRIBUTES_KEY = 'all-attributes';
-const INITIAL_VISIBLE_COUNT = 5;
-const COPY_FEEDBACK_DURATION_MS = 1500;

 function AllAttributesEmptyText({
 	isErrorAttributes,
@@ -55,27 +53,16 @@ export function AllAttributesValue({
 	filterValue,
 	goToMetricsExploreWithAppliedAttribute,
 }: AllAttributesValueProps): JSX.Element {
+	const [visibleIndex, setVisibleIndex] = useState(5);
 	const [attributePopoverKey, setAttributePopoverKey] = useState<string | null>(
 		null,
 	);
-	const [allValuesOpen, setAllValuesOpen] = useState(false);
-	const [allValuesSearch, setAllValuesSearch] = useState('');
-	const [copiedValue, setCopiedValue] = useState<string | null>(null);
 	const [, copyToClipboard] = useCopyToClipboard();
 	const { notifications } = useNotifications();
-	const copyTimerRef = useRef<ReturnType<typeof setTimeout>>();

-	const handleCopyWithFeedback = useCallback(
-		(value: string): void => {
-			copyToClipboard(value);
-			setCopiedValue(value);
-			clearTimeout(copyTimerRef.current);
-			copyTimerRef.current = setTimeout(() => {
-				setCopiedValue(null);
-			}, COPY_FEEDBACK_DURATION_MS);
-		},
-		[copyToClipboard],
-	);
+	const handleShowMore = (): void => {
+		setVisibleIndex(visibleIndex + 5);
+	};

 	const handleMenuItemClick = useCallback(
 		(key: string, attribute: string): void => {
@@ -83,10 +70,10 @@ export function AllAttributesValue({
 				case 'open-in-explorer':
 					goToMetricsExploreWithAppliedAttribute(filterKey, attribute);
 					break;
-				case 'copy-value':
-					handleCopyWithFeedback(attribute);
+				case 'copy-attribute':
+					copyToClipboard(attribute);
 					notifications.success({
-						message: 'Value copied!',
+						message: 'Attribute copied!',
 					});
 					break;
 				default:
@@ -97,7 +84,7 @@ export function AllAttributesValue({
 		[
 			goToMetricsExploreWithAppliedAttribute,
 			filterKey,
-			handleCopyWithFeedback,
+			copyToClipboard,
 			notifications,
 		],
 	);
@@ -107,14 +94,14 @@ export function AllAttributesValue({
 			<Menu
 				items={[
 					{
-						icon: <SquareArrowOutUpRight size={14} />,
-						label: 'Open in Metric Explorer',
+						icon: <Compass size={16} />,
+						label: 'Open in Explorer',
 						key: 'open-in-explorer',
 					},
 					{
-						icon: <Copy size={14} />,
-						label: 'Copy Value',
-						key: 'copy-value',
+						icon: <Copy size={16} />,
+						label: 'Copy Attribute',
+						key: 'copy-attribute',
 					},
 				]}
 				onClick={(info): void => {
@@ -124,75 +111,9 @@ export function AllAttributesValue({
 		),
 		[handleMenuItemClick],
 	);
-
-	const filteredAllValues = useMemo(
-		() =>
-			allValuesSearch
-				? filterValue.filter((v) =>
-						v.toLowerCase().includes(allValuesSearch.toLowerCase()),
-				  )
-				: filterValue,
-		[filterValue, allValuesSearch],
-	);
-
-	const allValuesPopoverContent = (
-		<div className="all-values-popover">
-			<Input
-				placeholder="Search values"
-				size="small"
-				prefix={<Search size={12} />}
-				value={allValuesSearch}
-				onChange={(e): void => setAllValuesSearch(e.target.value)}
-				allowClear
-			/>
-			<div className="all-values-list">
-				{allValuesOpen &&
-					filteredAllValues.map((attribute) => {
-						const isCopied = copiedValue === attribute;
-						return (
-							<div key={attribute} className="all-values-item">
-								<Typography.Text ellipsis className="all-values-item-text">
-									{attribute}
-								</Typography.Text>
-								<div className="all-values-item-actions">
-									<Tooltip title={isCopied ? 'Copied!' : 'Copy value'}>
-										<Button
-											type="text"
-											size="small"
-											className={isCopied ? 'copy-success' : ''}
-											icon={isCopied ? <Check size={12} /> : <Copy size={12} />}
-											onClick={(): void => {
-												handleCopyWithFeedback(attribute);
-											}}
-										/>
-									</Tooltip>
-									<Tooltip title="Open in Metric Explorer">
-										<Button
-											type="text"
-											size="small"
-											icon={<SquareArrowOutUpRight size={12} />}
-											onClick={(): void => {
-												goToMetricsExploreWithAppliedAttribute(filterKey, attribute);
-												setAllValuesOpen(false);
-											}}
-										/>
-									</Tooltip>
-								</div>
-							</div>
-						);
-					})}
-				{allValuesOpen && filteredAllValues.length === 0 && (
-					<Typography.Text type="secondary" className="all-values-empty">
-						No values found
-					</Typography.Text>
-				)}
-			</div>
-		</div>
-	);
-
 	return (
 		<div className="all-attributes-value">
-			{filterValue.slice(0, INITIAL_VISIBLE_COUNT).map((attribute) => (
+			{filterValue.slice(0, visibleIndex).map((attribute) => (
 				<Popover
 					key={attribute}
 					content={attributePopoverContent(attribute)}
@@ -211,24 +132,10 @@ export function AllAttributesValue({
 					</Button>
 				</Popover>
 			))}
-			{filterValue.length > INITIAL_VISIBLE_COUNT && (
-				<Popover
-					content={allValuesPopoverContent}
-					trigger="click"
-					open={allValuesOpen}
-					onOpenChange={(open): void => {
-						setAllValuesOpen(open);
-						if (!open) {
-							setAllValuesSearch('');
-							setCopiedValue(null);
-						}
-					}}
-					overlayClassName="all-values-popover-overlay"
-				>
-					<Button type="text" className="all-values-button">
-						All values ({filterValue.length})
-					</Button>
-				</Popover>
+			{visibleIndex < filterValue.length && (
+				<Button type="text" onClick={handleShowMore}>
+					Show More
+				</Button>
 			)}
 		</div>
 	);
@@ -237,30 +144,18 @@ export function AllAttributesValue({
 function AllAttributes({
 	metricName,
 	metricType,
-	minTime,
-	maxTime,
 }: AllAttributesProps): JSX.Element {
 	const [searchString, setSearchString] = useState('');
 	const [activeKey, setActiveKey] = useState<string[]>([ALL_ATTRIBUTES_KEY]);
-	const [keyPopoverOpen, setKeyPopoverOpen] = useState<string | null>(null);
-	const [copiedKey, setCopiedKey] = useState<string | null>(null);
-	const [, copyToClipboard] = useCopyToClipboard();
-	const copyTimerRef = useRef<ReturnType<typeof setTimeout>>();

 	const {
 		data: attributesData,
 		isLoading: isLoadingAttributes,
 		isError: isErrorAttributes,
 		refetch: refetchAttributes,
-	} = useGetMetricAttributes(
-		{
-			metricName,
-		},
-		{
-			start: minTime ? Math.floor(minTime / 1000000) : undefined,
-			end: maxTime ? Math.floor(maxTime / 1000000) : undefined,
-		},
-	);
+	} = useGetMetricAttributes({
+		metricName,
+	});

 	const attributes = useMemo(() => attributesData?.data.attributes ?? [], [
 		attributesData,
@@ -269,14 +164,12 @@ function AllAttributes({
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();

 	const goToMetricsExplorerwithAppliedSpaceAggregation = useCallback(
-		(groupBy: string, valueCount?: number) => {
-			const limit = valueCount && valueCount > 250 ? 100 : undefined;
+		(groupBy: string) => {
 			const compositeQuery = getMetricDetailsQuery(
 				metricName,
 				metricType,
 				undefined,
 				groupBy,
-				limit,
 			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
@@ -323,28 +216,6 @@ function AllAttributes({
 		[metricName, metricType, handleExplorerTabChange],
 	);

-	const handleKeyMenuItemClick = useCallback(
-		(menuKey: string, attributeKey: string, valueCount?: number): void => {
-			switch (menuKey) {
-				case 'open-in-explorer':
-					goToMetricsExplorerwithAppliedSpaceAggregation(attributeKey, valueCount);
-					break;
-				case 'copy-key':
-					copyToClipboard(attributeKey);
-					setCopiedKey(attributeKey);
-					clearTimeout(copyTimerRef.current);
-					copyTimerRef.current = setTimeout(() => {
-						setCopiedKey(null);
-					}, COPY_FEEDBACK_DURATION_MS);
-					break;
-				default:
-					break;
-			}
-			setKeyPopoverOpen(null);
-		},
-		[goToMetricsExplorerwithAppliedSpaceAggregation, copyToClipboard],
-	);
-
 	const filteredAttributes = useMemo(
 		() =>
 			attributes.filter(
@@ -383,57 +254,21 @@ function AllAttributes({
 				width: 50,
 				align: 'left',
 				className: 'metric-metadata-key',
-				render: (field: { label: string; contribution: number }): JSX.Element => {
-					const isCopied = copiedKey === field.label;
-					return (
-						<div className="all-attributes-key">
-							<Popover
-								content={
-									<Menu
-										items={[
-											{
-												icon: <SquareArrowOutUpRight size={14} />,
-												label: 'Open in Metric Explorer',
-												key: 'open-in-explorer',
-											},
-											{
-												icon: <Copy size={14} />,
-												label: 'Copy Key',
-												key: 'copy-key',
-											},
-										]}
-										onClick={(info): void => {
-											handleKeyMenuItemClick(info.key, field.label, field.contribution);
-										}}
-									/>
-								}
-								trigger="click"
-								placement="right"
-								overlayClassName="attribute-key-popover-overlay"
-								open={keyPopoverOpen === field.label}
-								onOpenChange={(open): void => {
-									if (!open) {
-										setKeyPopoverOpen(null);
-									} else {
-										setKeyPopoverOpen(field.label);
-									}
-								}}
-							>
-								<Button type="text">
-									<Typography.Text>{field.label}</Typography.Text>
-								</Button>
-							</Popover>
-							{isCopied && (
-								<span className="copy-feedback">
-									<Check size={12} />
-								</span>
-							)}
-							<Typography.Text className="all-attributes-contribution">
-								{field.contribution}
-							</Typography.Text>
-						</div>
-					);
-				},
+				render: (field: { label: string; contribution: number }): JSX.Element => (
+					<div className="all-attributes-key">
+						<Button
+							type="text"
+							onClick={(): void =>
+								goToMetricsExplorerwithAppliedSpaceAggregation(field.label)
+							}
+						>
+							<Typography.Text>{field.label}</Typography.Text>
+						</Button>
+						<Typography.Text className="all-attributes-contribution">
+							{field.contribution}
+						</Typography.Text>
+					</div>
+				),
 			},
 			{
 				title: 'Value',
@@ -456,9 +291,7 @@ function AllAttributes({
 		],
 		[
 			goToMetricsExploreWithAppliedAttribute,
-			handleKeyMenuItemClick,
-			keyPopoverOpen,
-			copiedKey,
+			goToMetricsExplorerwithAppliedSpaceAggregation,
 		],
 	);

@@ -467,12 +300,7 @@ function AllAttributes({
 			{
 				label: (
 					<div className="metrics-accordion-header">
-						<div className="all-attributes-header-title">
-							<Typography.Text>All Attributes</Typography.Text>
-							<Tooltip title="Showing attributes for the selected time range">
-								<Info size={14} />
-							</Tooltip>
-						</div>
+						<Typography.Text>All Attributes</Typography.Text>
 						<Input
 							className="all-attributes-search-input"
 							placeholder="Search"
@@ -501,9 +329,7 @@ function AllAttributes({
 						className="metrics-accordion-content all-attributes-content"
 						scroll={{ y: 600 }}
 						locale={{
-							emptyText: isLoadingAttributes ? (
-								' '
-							) : (
+							emptyText: (
 								<AllAttributesEmptyText
 									isErrorAttributes={isErrorAttributes}
 									refetchAttributes={refetchAttributes}
@@ -524,6 +350,14 @@ function AllAttributes({
 		],
 	);

+	if (isLoadingAttributes) {
+		return (
+			<div className="all-attributes-skeleton-container">
+				<Skeleton active paragraph={{ rows: 8 }} />
+			</div>
+		);
+	}
+
 	return (
 		<Collapse
 			bordered
--- a/frontend/src/container/MetricsExplorer/MetricDetails/Highlights.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/Highlights.tsx
@@ -1,5 +1,5 @@
 import { Color } from '@signozhq/design-tokens';
-import { Button, Spin, Tooltip, Typography } from 'antd';
+import { Button, Skeleton, Tooltip, Typography } from 'antd';
 import { useGetMetricHighlights } from 'api/generated/services/metrics';
 import { InfoIcon } from 'lucide-react';

@@ -39,6 +39,17 @@ function Highlights({ metricName }: HighlightsProps): JSX.Element {
 		metricHighlights?.lastReceived,
 	);

+	if (isLoadingMetricHighlights) {
+		return (
+			<div
+				className="metric-details-content-grid"
+				data-testid="metric-highlights-loading-state"
+			>
+				<Skeleton title={false} paragraph={{ rows: 2 }} active />
+			</div>
+		);
+	}
+
 	if (isErrorMetricHighlights) {
 		return (
 			<div className="metric-details-content-grid">
@@ -78,41 +89,32 @@ function Highlights({ metricName }: HighlightsProps): JSX.Element {
 				</Typography.Text>
 			</div>
 			<div className="values-row">
-				{isLoadingMetricHighlights ? (
-					<div className="metric-highlights-loading-inline">
-						<Spin size="small" />
-						<Typography.Text type="secondary">Loading metric stats</Typography.Text>
-					</div>
-				) : (
-					<>
-						<Typography.Text
-							className="metric-details-grid-value"
-							data-testid="metric-highlights-data-points"
-						>
-							<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
-								{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
-							</Tooltip>
-						</Typography.Text>
-						<Typography.Text
-							className="metric-details-grid-value"
-							data-testid="metric-highlights-time-series-total"
-						>
-							<Tooltip
-								title="Active time series are those that have received data points in the last 1
-							hour."
-								placement="top"
-							>
-								<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
-							</Tooltip>
-						</Typography.Text>
-						<Typography.Text
-							className="metric-details-grid-value"
-							data-testid="metric-highlights-last-received"
-						>
-							<Tooltip title={lastReceivedText}>{lastReceivedText}</Tooltip>
-						</Typography.Text>
-					</>
-				)}
+				<Typography.Text
+					className="metric-details-grid-value"
+					data-testid="metric-highlights-data-points"
+				>
+					<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
+						{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
+					</Tooltip>
+				</Typography.Text>
+				<Typography.Text
+					className="metric-details-grid-value"
+					data-testid="metric-highlights-time-series-total"
+				>
+					<Tooltip
+						title="Active time series are those that have received data points in the last 1
+					hour."
+						placement="top"
+					>
+						<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
+					</Tooltip>
+				</Typography.Text>
+				<Typography.Text
+					className="metric-details-grid-value"
+					data-testid="metric-highlights-last-received"
+				>
+					<Tooltip title={lastReceivedText}>{lastReceivedText}</Tooltip>
+				</Typography.Text>
 			</div>
 		</div>
 	);
--- a/frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button, Collapse, Input, Select, Spin, Typography } from 'antd';
+import { Button, Collapse, Input, Select, Skeleton, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
 import {
@@ -355,15 +355,11 @@ function Metadata({
 				label: (
 					<div className="metrics-accordion-header metrics-metadata-header">
 						<Typography.Text>Metadata</Typography.Text>
-						{!isLoadingMetricMetadata && actionButton}
+						{actionButton}
 					</div>
 				),
 				key: 'metric-metadata',
-				children: isLoadingMetricMetadata ? (
-					<div className="metrics-accordion-loading-state">
-						<Spin size="small" />
-					</div>
-				) : isErrorMetricMetadata ? (
+				children: isErrorMetricMetadata ? (
 					<div className="metric-metadata-error-state">
 						<MetricDetailsErrorState
 							refetch={refetchMetricMetadata}
@@ -385,13 +381,20 @@ function Metadata({
 		[
 			actionButton,
 			columns,
-			isLoadingMetricMetadata,
 			isErrorMetricMetadata,
 			refetchMetricMetadata,
 			tableData,
 		],
 	);

+	if (isLoadingMetricMetadata) {
+		return (
+			<div className="metrics-metadata-skeleton-container">
+				<Skeleton active paragraph={{ rows: 8 }} />
+			</div>
+		);
+	}
+
 	return (
 		<Collapse
 			bordered
--- a/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss
@@ -52,13 +52,6 @@
 				align-items: center;
 			}

-			.metric-highlights-loading-inline {
-				grid-column: 1 / -1;
-				display: flex;
-				align-items: center;
-				gap: 8px;
-			}
-
 			.metric-highlights-error-state {
 				display: flex;
 				gap: 8px;
@@ -127,11 +120,12 @@
 			}
 		}

-		.metrics-accordion-loading-state {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			padding: 24px;
+		.metrics-metadata-skeleton-container {
+			height: 330px;
+		}
+
+		.all-attributes-skeleton-container {
+			height: 600px;
 		}

 		.metrics-accordion {
@@ -159,18 +153,6 @@
 				justify-content: space-between;
 				align-items: center;
 				height: 36px;
-
-				.all-attributes-header-title {
-					display: flex;
-					align-items: center;
-					gap: 6px;
-
-					.lucide-info {
-						cursor: pointer;
-						color: var(--bg-vanilla-400);
-					}
-				}
-
 				.ant-typography {
 					font-family: 'Geist Mono';
 					color: var(--bg-robin-400);
@@ -204,7 +186,6 @@
 					.all-attributes-key {
 						display: flex;
 						justify-content: space-between;
-						align-items: center;
 						.ant-btn {
 							.ant-typography:first-child {
 								font-family: 'Geist Mono';
@@ -212,15 +193,17 @@
 								background-color: transparent;
 							}
 						}
-						.copy-feedback {
-							display: inline-flex;
-							align-items: center;
-							color: var(--bg-forest-500);
-							animation: fade-in-out 1.5s ease-in-out;
-						}
 						.all-attributes-contribution {
 							font-family: 'Geist Mono';
 							color: var(--bg-vanilla-400);
+							background-color: rgba(171, 189, 255, 0.1);
+							height: 24px;
+							min-width: 24px;
+							border-radius: 50%;
+							text-align: center;
+							display: flex;
+							align-items: center;
+							justify-content: center;
 						}
 					}
 				}
@@ -276,8 +259,10 @@
 			}

 			.metric-metadata-key {
+				cursor: pointer;
 				padding-left: 10px;
 				vertical-align: middle;
+				text-align: center;
 				.field-renderer-container {
 					.label {
 						color: var(--bg-vanilla-400);
@@ -463,138 +448,3 @@
 	height: 100%;
 	width: 100%;
 }
-
-.attribute-key-popover-overlay {
-	.ant-popover-inner {
-		padding: 0 !important;
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
-		background: linear-gradient(
-			139deg,
-			rgba(18, 19, 23, 0.8) 0%,
-			rgba(18, 19, 23, 0.9) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-	}
-
-	.ant-menu {
-		font-size: 12px;
-		background: transparent;
-
-		.ant-menu-item {
-			height: 32px;
-			line-height: 32px;
-			padding: 0 12px;
-			font-size: 12px;
-		}
-	}
-}
-
-.all-values-popover-overlay {
-	.ant-popover-inner {
-		padding: 0 !important;
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
-		background: linear-gradient(
-			139deg,
-			rgba(18, 19, 23, 0.8) 0%,
-			rgba(18, 19, 23, 0.9) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-	}
-}
-
-.all-values-popover {
-	width: 320px;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 12px;
-
-	.all-values-list {
-		max-height: 300px;
-		overflow-y: auto;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-
-		&::-webkit-scrollbar {
-			width: 2px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg-slate-300);
-			border-radius: 1px;
-		}
-	}
-
-	.all-values-item {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 4px 8px;
-		border-radius: 4px;
-		gap: 8px;
-
-		&:hover {
-			background: rgba(255, 255, 255, 0.04);
-		}
-
-		.all-values-item-text {
-			flex: 1;
-			min-width: 0;
-			font-family: 'Geist Mono';
-			font-size: 12px;
-		}
-
-		.all-values-item-actions {
-			display: flex;
-			gap: 2px;
-			flex-shrink: 0;
-
-			.copy-success {
-				color: var(--bg-forest-500);
-			}
-		}
-	}
-
-	.all-values-empty {
-		padding: 8px;
-		text-align: center;
-	}
-}
-
-.all-values-button {
-	color: var(--bg-robin-400) !important;
-}
-
-.lightMode {
-	.attribute-key-popover-overlay,
-	.all-values-popover-overlay {
-		.ant-popover-inner {
-			border: 1px solid var(--bg-vanilla-400);
-			background: var(--bg-vanilla-100) !important;
-		}
-	}
-}
-
-@keyframes fade-in-out {
-	0% {
-		opacity: 0;
-	}
-	15% {
-		opacity: 1;
-	}
-	85% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0;
-	}
-}
--- a/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx
@@ -1,14 +1,10 @@
 import { useCallback, useEffect, useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricMetadata } from 'api/generated/services/metrics';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Compass, Crosshair, X } from 'lucide-react';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';

 import { PANEL_TYPES } from '../../../constants/queryBuilder';
 import ROUTES from '../../../constants/routes';
@@ -33,9 +29,6 @@ function MetricDetails({
 }: MetricDetailsProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);

 	const {
 		data: metricMetadataResponse,
@@ -107,21 +100,6 @@ function MetricDetails({
 	const isActionButtonDisabled =
 		!metricName || isLoadingMetricMetadata || isErrorMetricMetadata;

-	const handleDrawerClose = useCallback(
-		(e: React.MouseEvent | React.KeyboardEvent): void => {
-			if ('key' in e && e.key === 'Escape') {
-				const openPopover = document.querySelector(
-					'.ant-popover:not(.ant-popover-hidden)',
-				);
-				if (openPopover) {
-					return;
-				}
-			}
-			onClose();
-		},
-		[onClose],
-	);
-
 	return (
 		<Drawer
 			width="60%"
@@ -159,7 +137,7 @@ function MetricDetails({
 				</div>
 			}
 			placement="right"
-			onClose={handleDrawerClose}
+			onClose={onClose}
 			open={isOpen}
 			style={{
 				overscrollBehavior: 'contain',
@@ -179,12 +157,7 @@ function MetricDetails({
 					isLoadingMetricMetadata={isLoadingMetricMetadata}
 					refetchMetricMetadata={refetchMetricMetadata}
 				/>
-				<AllAttributes
-					metricName={metricName}
-					metricType={metadata?.type}
-					minTime={minTime}
-					maxTime={maxTime}
-				/>
+				<AllAttributes metricName={metricName} metricType={metadata?.type} />
 			</div>
 		</Drawer>
 	);
--- a/frontend/src/container/MetricsExplorer/MetricDetails/tests/AllAttributes.test.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/tests/AllAttributes.test.tsx
@@ -1,6 +1,8 @@
+import * as reactUseHooks from 'react-use';
 import { render, screen } from '@testing-library/react';
 import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import * as useHandleExplorerTabChange from 'hooks/useHandleExplorerTabChange';
 import { userEvent } from 'tests/test-utils';

 import ROUTES from '../../../../constants/routes';
@@ -13,6 +15,17 @@ jest.mock('react-router-dom', () => ({
 		pathname: `${ROUTES.METRICS_EXPLORER}`,
 	}),
 }));
+const mockHandleExplorerTabChange = jest.fn();
+jest
+	.spyOn(useHandleExplorerTabChange, 'useHandleExplorerTabChange')
+	.mockReturnValue({
+		handleExplorerTabChange: mockHandleExplorerTabChange,
+	});
+
+const mockUseCopyToClipboard = jest.fn();
+jest
+	.spyOn(reactUseHooks, 'useCopyToClipboard')
+	.mockReturnValue([{ value: 'value1' }, mockUseCopyToClipboard] as any);

 const useGetMetricAttributesMock = jest.spyOn(
 	metricsExplorerHooks,
@@ -21,13 +34,12 @@ const useGetMetricAttributesMock = jest.spyOn(

 describe('AllAttributes', () => {
 	beforeEach(() => {
-		jest.clearAllMocks();
 		useGetMetricAttributesMock.mockReturnValue({
 			...getMockMetricAttributesData(),
 		});
 	});

-	it('renders attribute keys, values, and value counts from API data', () => {
+	it('renders attributes section with title', () => {
 		render(
 			<AllAttributes
 				metricName={MOCK_METRIC_NAME}
@@ -35,13 +47,39 @@ describe('AllAttributes', () => {
 			/>,
 		);

+		expect(screen.getByText('All Attributes')).toBeInTheDocument();
+	});
+
+	it('renders all attribute keys and values', () => {
+		render(
+			<AllAttributes
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
+			/>,
+		);
+
+		// Check attribute keys are rendered
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 		expect(screen.getByText('attribute2')).toBeInTheDocument();
+
+		// Check attribute values are rendered
 		expect(screen.getByText('value1')).toBeInTheDocument();
 		expect(screen.getByText('value2')).toBeInTheDocument();
 		expect(screen.getByText('value3')).toBeInTheDocument();
 	});

+	it('renders value counts correctly', () => {
+		render(
+			<AllAttributes
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
+			/>,
+		);
+
+		expect(screen.getByText('2')).toBeInTheDocument(); // For attribute1
+		expect(screen.getByText('1')).toBeInTheDocument(); // For attribute2
+	});
+
 	it('handles empty attributes array', () => {
 		useGetMetricAttributesMock.mockReturnValue({
 			...getMockMetricAttributesData({
@@ -62,7 +100,7 @@ describe('AllAttributes', () => {
 		expect(screen.getByText('No attributes found')).toBeInTheDocument();
 	});

-	it('clicking on an attribute key shows popover with Open in Metric Explorer option', async () => {
+	it('clicking on an attribute key opens the explorer with the attribute filter applied', async () => {
 		render(
 			<AllAttributes
 				metricName={MOCK_METRIC_NAME}
@@ -70,8 +108,7 @@ describe('AllAttributes', () => {
 			/>,
 		);
 		await userEvent.click(screen.getByText('attribute1'));
-		expect(screen.getByText('Open in Metric Explorer')).toBeInTheDocument();
-		expect(screen.getByText('Copy Key')).toBeInTheDocument();
+		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
 	});

 	it('filters attributes based on search input', async () => {
@@ -86,66 +123,26 @@ describe('AllAttributes', () => {
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 		expect(screen.getByText('value1')).toBeInTheDocument();
 	});
-
-	it('shows error state when attribute fetching fails', () => {
-		useGetMetricAttributesMock.mockReturnValue({
-			...getMockMetricAttributesData(
-				{
-					data: {
-						attributes: [],
-						totalKeys: 0,
-					},
-				},
-				{
-					isError: true,
-				},
-			),
-		});
-		render(
-			<AllAttributes
-				metricName={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
-			/>,
-		);
-
-		expect(
-			screen.getByText('Something went wrong while fetching attributes'),
-		).toBeInTheDocument();
-	});
-
-	it('does not show misleading empty text while loading', () => {
-		useGetMetricAttributesMock.mockReturnValue({
-			...getMockMetricAttributesData(
-				{
-					data: {
-						attributes: [],
-						totalKeys: 0,
-					},
-				},
-				{
-					isLoading: true,
-				},
-			),
-		});
-		render(
-			<AllAttributes
-				metricName={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
-			/>,
-		);
-
-		expect(screen.queryByText('No attributes found')).not.toBeInTheDocument();
-	});
 });

 describe('AllAttributesValue', () => {
 	const mockGoToMetricsExploreWithAppliedAttribute = jest.fn();

-	beforeEach(() => {
-		jest.clearAllMocks();
+	it('renders all attribute values', () => {
+		render(
+			<AllAttributesValue
+				filterKey="attribute1"
+				filterValue={['value1', 'value2']}
+				goToMetricsExploreWithAppliedAttribute={
+					mockGoToMetricsExploreWithAppliedAttribute
+				}
+			/>,
+		);
+		expect(screen.getByText('value1')).toBeInTheDocument();
+		expect(screen.getByText('value2')).toBeInTheDocument();
 	});

-	it('shows All values button when there are more than 5 values', () => {
+	it('loads more attributes when show more button is clicked', async () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -156,59 +153,58 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.queryByText('value6')).not.toBeInTheDocument();
-		expect(screen.getByText('All values (6)')).toBeInTheDocument();
-	});
-
-	it('All values popover shows values beyond the initial 5', async () => {
-		const values = [
-			'value1',
-			'value2',
-			'value3',
-			'value4',
-			'value5',
-			'value6',
-			'value7',
-		];
-		render(
-			<AllAttributesValue
-				filterKey="attribute1"
-				filterValue={values}
-				goToMetricsExploreWithAppliedAttribute={
-					mockGoToMetricsExploreWithAppliedAttribute
-				}
-			/>,
-		);
-
-		await userEvent.click(screen.getByText('All values (7)'));
-
+		await userEvent.click(screen.getByText('Show More'));
 		expect(screen.getByText('value6')).toBeInTheDocument();
-		expect(screen.getByText('value7')).toBeInTheDocument();
 	});

-	it('All values popover search filters the value list', async () => {
-		const values = [
-			'alpha',
-			'bravo',
-			'charlie',
-			'delta',
-			'echo',
-			'fig-special',
-			'golf-target',
-		];
+	it('does not render show more button when there are no more attributes to show', () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
-				filterValue={values}
+				filterValue={['value1', 'value2']}
 				goToMetricsExploreWithAppliedAttribute={
 					mockGoToMetricsExploreWithAppliedAttribute
 				}
 			/>,
 		);
+		expect(screen.queryByText('Show More')).not.toBeInTheDocument();
+	});

-		await userEvent.click(screen.getByText('All values (7)'));
-		await userEvent.type(screen.getByPlaceholderText('Search values'), 'golf');
+	it('copy button should copy the attribute value to the clipboard', async () => {
+		render(
+			<AllAttributesValue
+				filterKey="attribute1"
+				filterValue={['value1', 'value2']}
+				goToMetricsExploreWithAppliedAttribute={
+					mockGoToMetricsExploreWithAppliedAttribute
+				}
+			/>,
+		);
+		expect(screen.getByText('value1')).toBeInTheDocument();
+		await userEvent.click(screen.getByText('value1'));
+		expect(screen.getByText('Copy Attribute')).toBeInTheDocument();
+		await userEvent.click(screen.getByText('Copy Attribute'));
+		expect(mockUseCopyToClipboard).toHaveBeenCalledWith('value1');
+	});

-		expect(screen.getByText('golf-target')).toBeInTheDocument();
-		expect(screen.queryByText('fig-special')).not.toBeInTheDocument();
+	it('explorer button should go to metrics explore with the attribute filter applied', async () => {
+		render(
+			<AllAttributesValue
+				filterKey="attribute1"
+				filterValue={['value1', 'value2']}
+				goToMetricsExploreWithAppliedAttribute={
+					mockGoToMetricsExploreWithAppliedAttribute
+				}
+			/>,
+		);
+		expect(screen.getByText('value1')).toBeInTheDocument();
+		await userEvent.click(screen.getByText('value1'));
+
+		expect(screen.getByText('Open in Explorer')).toBeInTheDocument();
+		await userEvent.click(screen.getByText('Open in Explorer'));
+		expect(mockGoToMetricsExploreWithAppliedAttribute).toHaveBeenCalledWith(
+			'attribute1',
+			'value1',
+		);
 	});
 });
--- a/frontend/src/container/MetricsExplorer/MetricDetails/tests/Highlights.test.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/tests/Highlights.test.tsx
@@ -48,7 +48,7 @@ describe('Highlights', () => {
 		).toBeInTheDocument();
 	});

-	it('should show labels and loading text but not stale data values while loading', () => {
+	it('should render loading state when data is loading', () => {
 		useGetMetricHighlightsMock.mockReturnValue(
 			getMockMetricHighlightsData(
 				{},
@@ -60,19 +60,8 @@ describe('Highlights', () => {

 		render(<Highlights metricName={MOCK_METRIC_NAME} />);

-		expect(screen.getByText('SAMPLES')).toBeInTheDocument();
-		expect(screen.getByText('TIME SERIES')).toBeInTheDocument();
-		expect(screen.getByText('LAST RECEIVED')).toBeInTheDocument();
-		expect(screen.getByText('Loading metric stats')).toBeInTheDocument();
-
 		expect(
-			screen.queryByTestId('metric-highlights-data-points'),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByTestId('metric-highlights-time-series-total'),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByTestId('metric-highlights-last-received'),
-		).not.toBeInTheDocument();
+			screen.getByTestId('metric-highlights-loading-state'),
+		).toBeInTheDocument();
 	});
 });
--- a/frontend/src/container/MetricsExplorer/MetricDetails/tests/Metadata.test.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/tests/Metadata.test.tsx
@@ -324,21 +324,6 @@ describe('Metadata', () => {
 		expect(editButton2).toBeInTheDocument();
 	});

-	it('should show section header but not edit controls while loading', () => {
-		render(
-			<Metadata
-				metricName={MOCK_METRIC_NAME}
-				metadata={null}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata
-				refetchMetricMetadata={mockRefetchMetricMetadata}
-			/>,
-		);
-
-		expect(screen.getByText('Metadata')).toBeInTheDocument();
-		expect(screen.queryByText('Edit')).not.toBeInTheDocument();
-	});
-
 	it('should not allow editing of unit if it is already set', async () => {
 		render(
 			<Metadata
--- a/frontend/src/container/MetricsExplorer/MetricDetails/tests/MetricDetails.test.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/tests/MetricDetails.test.tsx
@@ -24,13 +24,6 @@ jest.mock('react-router-dom', () => ({
 		pathname: `${ROUTES.METRICS_EXPLORER}`,
 	}),
 }));
-jest.mock('react-redux', () => ({
-	...jest.requireActual('react-redux'),
-	useSelector: jest.fn().mockReturnValue({
-		maxTime: 1700000000000000000,
-		minTime: 1699900000000000000,
-	}),
-}));
 jest.mock('hooks/useSafeNavigate', () => ({
 	useSafeNavigate: (): any => ({
 		safeNavigate: jest.fn(),
--- a/frontend/src/container/MetricsExplorer/MetricDetails/types.ts
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/types.ts
@@ -34,8 +34,6 @@ export interface MetadataProps {
 export interface AllAttributesProps {
 	metricName: string;
 	metricType: MetrictypesTypeDTO | undefined;
-	minTime?: number;
-	maxTime?: number;
 }

 export interface AllAttributesValueProps {
--- a/frontend/src/container/MetricsExplorer/MetricDetails/utils.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/utils.tsx
@@ -87,7 +87,6 @@ export function getMetricDetailsQuery(
 	metricType: MetrictypesTypeDTO | undefined,
 	filter?: { key: string; value: string },
 	groupBy?: string,
-	limit?: number,
 ): Query {
 	let timeAggregation;
 	let spaceAggregation;
@@ -171,7 +170,6 @@ export function getMetricDetailsQuery(
 								},
 						  ]
 						: [],
-					...(limit ? { limit } : {}),
 				},
 			],
 			queryFormulas: [],
--- a/frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx
+++ b/frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx
@@ -1,7 +1,9 @@
 import { useCallback } from 'react';
+import { Tooltip } from 'antd';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import { Info } from 'lucide-react';
 import { DataSource } from 'types/common/queryBuilder';

 import { MetricsSearchProps } from './types';
@@ -24,17 +26,15 @@ function MetricsSearch({
 		onChange(currentQueryFilterExpression);
 	}, [currentQueryFilterExpression, onChange]);

-	const handleRunQuery = useCallback(
-		(expression: string): void => {
-			setCurrentQueryFilterExpression(expression);
-			onChange(expression);
-		},
-		[setCurrentQueryFilterExpression, onChange],
-	);
-
 	return (
 		<div className="metrics-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>
 				<QuerySearch
 					onChange={handleOnChange}
 					dataSource={DataSource.METRICS}
@@ -45,9 +45,8 @@ function MetricsSearch({
 							expression: currentQueryFilterExpression,
 						},
 					}}
-					onRun={handleRunQuery}
+					onRun={handleOnChange}
 					showFilterSuggestionsWithoutMetric
-					placeholder="Try metric_name CONTAINS 'http.server' to view all HTTP Server metrics being sent"
 				/>
 			</div>
 			<RunQueryBtn
--- a/frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss
+++ b/frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss
@@ -37,7 +37,7 @@

 	.metrics-search-container {
 		display: flex;
-		gap: 8px;
+		gap: 16px;
 		align-items: center;

 		.metrics-search-options {
@@ -51,6 +51,10 @@
 			gap: 8px;
 			flex: 1;

+			.lucide-info {
+				cursor: pointer;
+			}
+
 			.query-builder-search-container {
 				width: 100%;
 			}
@@ -62,6 +66,8 @@
 			margin-left: -16px;
 			margin-right: -16px;

+			max-height: 500px;
+			overflow-y: auto;
 			.ant-table-thead > tr > th {
 				padding: 12px;
 				font-weight: 500;
--- a/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
+++ b/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
@@ -15,7 +15,10 @@ import {
 	Querybuildertypesv5OrderByDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
+import {
+	convertExpressionToFilters,
+	convertFiltersToExpression,
+} from 'components/QueryBuilderV2/utils';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
 import NoLogs from 'container/NoLogs/NoLogs';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -58,7 +61,7 @@ function Summary(): JSX.Element {
 		heatmapView,
 		setHeatmapView,
 	] = useState<MetricsexplorertypesTreemapModeDTO>(
-		MetricsexplorertypesTreemapModeDTO.samples,
+		MetricsexplorertypesTreemapModeDTO.timeseries,
 	);

 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
@@ -84,14 +87,7 @@ function Summary(): JSX.Element {
 	const [
 		currentQueryFilterExpression,
 		setCurrentQueryFilterExpression,
-	] = useState<string>('');
-
-	const [appliedFilterExpression, setAppliedFilterExpression] = useState('');
-
-	const queryFilterExpression = useMemo(
-		() => ({ expression: appliedFilterExpression }),
-		[appliedFilterExpression],
-	);
+	] = useState<string>(query?.filter?.expression || '');

 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.TabChanged, {
@@ -104,6 +100,11 @@ function Summary(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);

+	const queryFilterExpression = useMemo(() => {
+		const filters = query.filters || { items: [], op: 'AND' };
+		return convertFiltersToExpression(filters);
+	}, [query.filters]);
+
 	const metricsListQuery: MetricsexplorertypesStatsRequestDTO = useMemo(() => {
 		return {
 			start: convertNanoToMilliseconds(minTime),
@@ -186,7 +187,6 @@ function Summary(): JSX.Element {
 				},
 			});
 			setCurrentQueryFilterExpression(expression);
-			setAppliedFilterExpression(expression);
 			setCurrentPage(1);
 			if (expression) {
 				logEvent(MetricsExplorerEvents.FilterApplied, {
--- a/tests/integration/conftest.py
+++ b/tests/integration/conftest.py
@@ -15,6 +15,7 @@ pytest_plugins = [
    "fixtures.logs",
    "fixtures.traces",
    "fixtures.metrics",
+    "fixtures.meter",
    "fixtures.driver",
    "fixtures.idp",
    "fixtures.idputils",
--- a/tests/integration/fixtures/meter.py
+++ b/tests/integration/fixtures/meter.py
@@ -0,0 +1,121 @@
+import hashlib
+import json
+from datetime import datetime, timedelta
+from typing import Any, Callable, Generator, List
+
+import numpy as np
+import pytest
+
+from fixtures import types
+
+
+class MeterSample:
+    temporality: str
+    metric_name: str
+    description: str
+    unit: str
+    type: str
+    is_monotonic: bool
+    labels: str
+    fingerprint: np.uint64
+    unix_milli: np.int64
+    value: np.float64
+
+    def __init__(
+        self,
+        metric_name: str,
+        labels: dict[str, str],
+        timestamp: datetime,
+        value: float,
+        temporality: str = "Delta",
+        description: str = "",
+        unit: str = "",
+        type_: str = "Sum",
+        is_monotonic: bool = True,
+    ) -> None:
+        self.temporality = temporality
+        self.metric_name = metric_name
+        self.description = description
+        self.unit = unit
+        self.type = type_
+        self.is_monotonic = is_monotonic
+        self.labels = json.dumps(labels, separators=(",", ":"))
+        self.unix_milli = np.int64(int(timestamp.timestamp() * 1e3))
+        self.value = np.float64(value)
+
+        fingerprint_str = metric_name + self.labels
+        self.fingerprint = np.uint64(
+            int(hashlib.md5(fingerprint_str.encode()).hexdigest()[:16], 16)
+        )
+
+    def to_samples_row(self) -> list:
+        return [
+            self.temporality,
+            self.metric_name,
+            self.description,
+            self.unit,
+            self.type,
+            self.is_monotonic,
+            self.labels,
+            self.fingerprint,
+            self.unix_milli,
+            self.value,
+        ]
+
+
+def make_meter_samples(
+    metric_name: str,
+    labels: dict[str, str],
+    now: datetime,
+    count: int = 60,
+    base_value: float = 100.0,
+    **kwargs,
+) -> List[MeterSample]:
+    samples = []
+    for i in range(count):
+        ts = now - timedelta(minutes=count - i)
+        samples.append(
+            MeterSample(
+                metric_name=metric_name,
+                labels=labels,
+                timestamp=ts,
+                value=base_value + i,
+                **kwargs,
+            )
+        )
+    return samples
+
+
+@pytest.fixture(name="insert_meter_samples", scope="function")
+def insert_meter_samples(
+    clickhouse: types.TestContainerClickhouse,
+) -> Generator[Callable[[List[MeterSample]], None], Any, None]:
+    def _insert_meter_samples(samples: List[MeterSample]) -> None:
+        if len(samples) == 0:
+            return
+
+        clickhouse.conn.insert(
+            database="signoz_meter",
+            table="distributed_samples",
+            column_names=[
+                "temporality",
+                "metric_name",
+                "description",
+                "unit",
+                "type",
+                "is_monotonic",
+                "labels",
+                "fingerprint",
+                "unix_milli",
+                "value",
+            ],
+            data=[s.to_samples_row() for s in samples],
+        )
+
+    yield _insert_meter_samples
+
+    cluster = clickhouse.env["SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_CLUSTER"]
+    for table in ["samples", "samples_agg_1d"]:
+        clickhouse.conn.query(
+            f"TRUNCATE TABLE signoz_meter.{table} ON CLUSTER '{cluster}' SYNC"
+        )
--- a/tests/integration/fixtures/querier.py
+++ b/tests/integration/fixtures/querier.py
@@ -54,6 +54,7 @@ def build_builder_query(
    *,
    comparisonSpaceAggregationParam: Optional[Dict] = None,
    temporality: Optional[str] = None,
+    source: Optional[str] = None,
    step_interval: int = DEFAULT_STEP_INTERVAL,
    group_by: Optional[List[str]] = None,
    filter_expression: Optional[str] = None,
@@ -73,10 +74,14 @@ def build_builder_query(
        "stepInterval": step_interval,
        "disabled": disabled,
    }
+    if source:
+        spec["source"] = source
    if temporality:
        spec["aggregations"][0]["temporality"] = temporality
    if comparisonSpaceAggregationParam:
-        spec["aggregations"][0]["comparisonSpaceAggregationParam"] = comparisonSpaceAggregationParam
+        spec["aggregations"][0][
+            "comparisonSpaceAggregationParam"
+        ] = comparisonSpaceAggregationParam
    if group_by:
        spec["groupBy"] = [
            {
--- a/tests/integration/src/querier/08_metrics_histogram.py
+++ b/tests/integration/src/querier/08_metrics_histogram.py
@@ -2,7 +2,6 @@
 Look at the histogram_data_1h.jsonl file for the relevant data
 """

-import random
 from datetime import datetime, timedelta, timezone
 from http import HTTPStatus
 from typing import Callable, List
@@ -22,6 +21,7 @@ from fixtures.utils import get_testdata_file_path

 FILE = get_testdata_file_path("histogram_data_1h.jsonl")

+
@pytest.mark.parametrize(
    "threshold, operator, first_value, last_value",
    [
@@ -29,12 +29,22 @@ FILE = get_testdata_file_path("histogram_data_1h.jsonl")
        (100, "<=", 1.1, 6.9),
        (7500, "<=", 16.75, 74.75),
        (8000, "<=", 17, 75),
-        (80000, "<=", 17, 75), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            "<=",
+            17,
+            75,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
        (1000, ">", 7, 7),
        (100, ">", 16.9, 69.1),
        (7500, ">", 1.25, 1.25),
        (8000, ">", 1, 1),
-        (80000, ">", 1, 1), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            ">",
+            1,
+            1,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
    ],
 )
 def test_histogram_count_for_one_endpoint(
@@ -65,10 +75,7 @@ def test_histogram_count_for_one_endpoint(
        metric_name,
        "increase",
        "count",
-        comparisonSpaceAggregationParam={
-            "threshold": threshold,
-            "operator": operator
-        },
+        comparisonSpaceAggregationParam={"threshold": threshold, "operator": operator},
        filter_expression='endpoint = "/health"',
    )

@@ -81,6 +88,7 @@ def test_histogram_count_for_one_endpoint(
    assert result_values[0]["value"] == first_value
    assert result_values[-1]["value"] == last_value

+
@pytest.mark.parametrize(
    "threshold, operator, first_value, last_value",
    [
@@ -88,12 +96,22 @@ def test_histogram_count_for_one_endpoint(
        (100, "<=", 2.2, 13.8),
        (7500, "<=", 33.5, 149.5),
        (8000, "<=", 34, 150),
-        (80000, "<=", 34, 150), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            "<=",
+            34,
+            150,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
        (1000, ">", 14, 14),
        (100, ">", 33.8, 138.2),
        (7500, ">", 2.5, 2.5),
        (8000, ">", 2, 2),
-        (80000, ">", 2, 2), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            ">",
+            2,
+            2,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
    ],
 )
 def test_histogram_count_for_one_service(
@@ -124,10 +142,7 @@ def test_histogram_count_for_one_service(
        metric_name,
        "increase",
        "count",
-        comparisonSpaceAggregationParam={
-            "threshold": threshold,
-            "operator": operator
-        },
+        comparisonSpaceAggregationParam={"threshold": threshold, "operator": operator},
        filter_expression='service = "api"',
    )

@@ -140,6 +155,7 @@ def test_histogram_count_for_one_service(
    assert result_values[0]["value"] == first_value
    assert result_values[-1]["value"] == last_value

+
@pytest.mark.parametrize(
    "threshold, operator, zeroth_value, first_value, last_value",
    [
@@ -147,12 +163,24 @@ def test_histogram_count_for_one_service(
        (100, "<=", 1234.5, 1.1, 6.9),
        (7500, "<=", 12345, 16.75, 74.75),
        (8000, "<=", 12345, 17, 75),
-        (80000, "<=", 12345, 17, 75), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            "<=",
+            12345,
+            17,
+            75,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
        (1000, ">", 0, 7, 7),
        (100, ">", 11110.5, 16.9, 69.1),
        (7500, ">", 0, 1.25, 1.25),
        (8000, ">", 0, 1, 1),
-        (80000, ">", 0, 1, 1), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            ">",
+            0,
+            1,
+            1,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
    ],
 )
 def test_histogram_count_for_delta_service(
@@ -184,10 +212,7 @@ def test_histogram_count_for_delta_service(
        metric_name,
        "increase",
        "count",
-        comparisonSpaceAggregationParam={
-            "threshold": threshold,
-            "operator": operator
-        },
+        comparisonSpaceAggregationParam={"threshold": threshold, "operator": operator},
        filter_expression='service = "web"',
    )

@@ -196,11 +221,16 @@ def test_histogram_count_for_delta_service(

    data = response.json()
    result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
-    assert len(result_values) == 60 ## in delta, the value at 10:01 will also be reported
+    assert (
+        len(result_values) == 60
+    )  ## in delta, the value at 10:01 will also be reported
    assert result_values[0]["value"] == zeroth_value
-    assert result_values[1]["value"] == first_value ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
+    assert (
+        result_values[1]["value"] == first_value
+    )  ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
    assert result_values[-1]["value"] == last_value

+
@pytest.mark.parametrize(
    "threshold, operator, zeroth_value, first_value, last_value",
    [
@@ -245,10 +275,7 @@ def test_histogram_count_for_all_services(
        metric_name,
        "increase",
        "count",
-        comparisonSpaceAggregationParam={
-            "threshold": threshold,
-            "operator": operator
-        },
+        comparisonSpaceAggregationParam={"threshold": threshold, "operator": operator},
        ## no services filter, this tests for multitemporality handling as well
    )

@@ -257,11 +284,16 @@ def test_histogram_count_for_all_services(

    data = response.json()
    result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
-    assert len(result_values) == 60 ## in delta, the value at 10:01 will also be reported
+    assert (
+        len(result_values) == 60
+    )  ## in delta, the value at 10:01 will also be reported
    assert result_values[0]["value"] == zeroth_value
-    assert result_values[1]["value"] == first_value ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
+    assert (
+        result_values[1]["value"] == first_value
+    )  ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
    assert result_values[-1]["value"] == last_value

+
 def test_histogram_count_no_param(
    signoz: types.SigNoz,
    create_user_admin: None,  # pylint: disable=unused-argument
@@ -308,8 +340,26 @@ def test_histogram_count_no_param(
        set(le_buckets.keys()) == expected_buckets
    ), f"Expected endpoints {expected_buckets}, got {set(le_buckets.keys())}"

-    first_values = {"1000": 33, "1500": 36, "2000": 39, "4000": 42, "5000": 45, "6000": 48, "8000": 51, "+Inf": 54}
-    last_values = {"1000": 207, "1500": 210, "2000": 213, "4000": 216, "5000": 219, "6000": 222, "8000": 225, "+Inf": 228}
+    first_values = {
+        "1000": 33,
+        "1500": 36,
+        "2000": 39,
+        "4000": 42,
+        "5000": 45,
+        "6000": 48,
+        "8000": 51,
+        "+Inf": 54,
+    }
+    last_values = {
+        "1000": 207,
+        "1500": 210,
+        "2000": 213,
+        "4000": 216,
+        "5000": 219,
+        "6000": 222,
+        "8000": 225,
+        "+Inf": 228,
+    }
    for le, values in le_buckets.items():
        assert len(values) == 60

@@ -318,5 +368,7 @@ def test_histogram_count_no_param(
                v["value"] >= 0
            ), f"Count for {le} should not be negative: {v['value']}"
        assert values[0]["value"] == 12345
-        assert values[1]["value"] == first_values[le] ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
-        assert values[-1]["value"] == last_values[le] 
+        assert (
+            values[1]["value"] == first_values[le]
+        )  ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
+        assert values[-1]["value"] == last_values[le]
--- a/tests/integration/src/querier/09_metrics_gauge.py
+++ b/tests/integration/src/querier/09_metrics_gauge.py
@@ -1,4 +1,3 @@
-import random
 from datetime import datetime, timedelta, timezone
 from http import HTTPStatus
 from typing import Callable, List
@@ -10,7 +9,6 @@ from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
 from fixtures.metrics import Metrics
 from fixtures.querier import (
    build_builder_query,
-    get_all_series,
    get_series_values,
    make_query_request,
 )
@@ -18,6 +16,7 @@ from fixtures.utils import get_testdata_file_path

 FILE = get_testdata_file_path("gauge_data_1h.jsonl")

+
@pytest.mark.parametrize(
    "time_agg, space_agg, service, num_elements, start_val, first_val, twentieth_min_val, after_twentieth_min_val",
    [
@@ -50,7 +49,7 @@ def test_for_one_service(
    start_val: float,
    first_val: float,
    twentieth_min_val: float,
-    after_twentieth_min_val: float ## web service has a gap of 10 mins after the 20th minute
+    after_twentieth_min_val: float,  ## web service has a gap of 10 mins after the 20th minute
 ) -> None:
    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
@@ -84,6 +83,7 @@ def test_for_one_service(
    assert result_values[19]["value"] == twentieth_min_val
    assert result_values[20]["value"] == after_twentieth_min_val

+
@pytest.mark.parametrize(
    "time_agg, space_agg, start_val, first_val, twentieth_min_val, twenty_first_min_val, thirty_first_min_val",
    [
@@ -105,8 +105,8 @@ def test_for_multiple_aggregations(
    start_val: float,
    first_val: float,
    twentieth_min_val: float,
-    twenty_first_min_val: float, ## web service has a gap of 10 mins after the 20th minute
-    thirty_first_min_val: float
+    twenty_first_min_val: float,  ## web service has a gap of 10 mins after the 20th minute
+    thirty_first_min_val: float,
 ) -> None:
    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
@@ -138,4 +138,4 @@ def test_for_multiple_aggregations(
    assert result_values[1]["value"] == first_val
    assert result_values[19]["value"] == twentieth_min_val
    assert result_values[20]["value"] == twenty_first_min_val
-    assert result_values[30]["value"] == thirty_first_min_val
+    assert result_values[30]["value"] == thirty_first_min_val
--- a/tests/integration/src/querier/10_metrics_rate_delta_counter.py
+++ b/tests/integration/src/querier/10_metrics_rate_delta_counter.py
@@ -53,7 +53,9 @@ def test_rate_with_steady_values_and_reset(

    data = response.json()
    result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
-    assert len(result_values) == 60 ## total 61 minutes covered, and 30th minute is missing
+    assert (
+        len(result_values) == 60
+    )  ## total 61 minutes covered, and 30th minute is missing
    assert (
        result_values[30]["value"] == 0.0333
    )  # reset happens and [30] is for 31st minute. 2/60 cuz delta divides by step interval
@@ -61,9 +63,7 @@ def test_rate_with_steady_values_and_reset(
        result_values[31]["value"] == 0.133
    )  # i.e 8/60 i.e 31st to 32nd minute changes
    count_of_steady_rate = sum(1 for v in result_values if v["value"] == 0.0833)
-    assert (
-        count_of_steady_rate == 58
-    )  # 1 reset + 1 high rate are excluded
+    assert count_of_steady_rate == 58  # 1 reset + 1 high rate are excluded
    # All rates should be non-negative (stale periods = 0 rate)
    for v in result_values:
        assert v["value"] >= 0, f"Rate should not be negative: {v['value']}"
--- a/tests/integration/src/querier/11_cost_meter.py
+++ b/tests/integration/src/querier/11_cost_meter.py
@@ -0,0 +1,109 @@
+from datetime import datetime, timedelta, timezone
+from http import HTTPStatus
+from typing import Callable, List
+
+import requests
+
+from fixtures import types
+from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
+from fixtures.meter import MeterSample, make_meter_samples
+from fixtures.querier import (
+    build_builder_query,
+    get_series_values,
+    make_query_request,
+)
+
+
+def test_query_range_cost_meter(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_meter_samples: Callable[[List[MeterSample]], None],
+) -> None:
+    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+
+    metric_name = "signoz_cost_test_query_range"
+    labels = {"service": "test-service", "environment": "production"}
+
+    samples = make_meter_samples(
+        metric_name,
+        labels,
+        now,
+        count=60,
+        base_value=100.0,
+        temporality="Delta",
+        type_="Sum",
+        is_monotonic=True,
+    )
+    insert_meter_samples(samples)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query = build_builder_query(
+        "A",
+        metric_name,
+        "sum",
+        "sum",
+        source="meter",
+        temporality="delta",
+    )
+
+    response = make_query_request(signoz, token, start_ms, end_ms, [query])
+    assert response.status_code == HTTPStatus.OK
+
+    data = response.json()
+    result_values = get_series_values(data, "A")
+    assert len(result_values) > 0, f"Expected non-empty results, got: {data}"
+
+    for val in result_values:
+        assert val["value"] >= 0, f"Expected non-negative value, got: {val['value']}"
+
+
+def test_list_meter_metric_names(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_meter_samples: Callable[[List[MeterSample]], None],
+) -> None:
+    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+
+    metric_name = "cost_test_list_metrics"
+    labels = {"service": "billing-service"}
+
+    samples = make_meter_samples(
+        metric_name,
+        labels,
+        now,
+        count=5,
+        base_value=50.0,
+        temporality="Delta",
+        type_="Sum",
+        is_monotonic=True,
+    )
+    insert_meter_samples(samples)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    response = requests.get(
+        signoz.self.host_configs["8080"].get("/api/v2/metrics"),
+        params={
+            "start": start_ms,
+            "end": end_ms,
+            "limit": 100,
+            "searchText": "cost_test_list",
+        },
+        headers={"authorization": f"Bearer {token}"},
+        timeout=30,
+    )
+
+    assert response.status_code == HTTPStatus.OK
+
+    data = response.json()
+    metrics = data.get("data", {}).get("metrics", [])
+    metric_names = [m["metricName"] for m in metrics]
+    assert (
+        metric_name in metric_names
+    ), f"Expected {metric_name} in metric names, got: {metric_names}"