Merge branch 'main' into feat/infra_disk_usage

Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.112.1
+    image: signoz/signoz:v0.113.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -213,7 +213,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.142.1
+    image: signoz/signoz-otel-collector:v0.144.1
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-otel-collector:v0.144.1
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.112.1
+    image: signoz/signoz:v0.113.0
     ports:
       - "8080:8080" # signoz port
     volumes:
@@ -139,7 +139,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.142.1
+    image: signoz/signoz-otel-collector:v0.144.1
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-otel-collector:v0.144.1
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/otel-collector-config.yaml

@@ -82,6 +82,12 @@ exporters:
     timeout: 45s
     sending_queue:
       enabled: false
+  metadataexporter:
+    cache:
+      provider: in_memory
+    dsn: tcp://clickhouse:9000/signoz_metadata
+    enabled: true
+    timeout: 45s
 service:
   telemetry:
     logs:
@@ -93,19 +99,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, signozmeter]
+      exporters: [clickhousetraces, metadataexporter, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, signozmeter]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, signozmeter]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, signozmeter]
+      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.112.1}
+    image: signoz/signoz:${VERSION:-v0.113.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -204,7 +204,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -229,7 +229,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.112.1}
+    image: signoz/signoz:${VERSION:-v0.113.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -132,7 +132,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -157,7 +157,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/otel-collector-config.yaml

@@ -82,6 +82,12 @@ exporters:
     timeout: 45s
     sending_queue:
       enabled: false
+  metadataexporter:
+    cache:
+      provider: in_memory
+    dsn: tcp://clickhouse:9000/signoz_metadata
+    enabled: true
+    timeout: 45s
 service:
   telemetry:
     logs:
@@ -93,19 +99,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, signozmeter]
+      exporters: [clickhousetraces, metadataexporter, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, signozmeter]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, signozmeter]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, signozmeter]
+      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

docs/api/openapi.yml

@@ -842,6 +842,17 @@ components:
       - temporality
       - isMonotonic
       type: object
+    MetrictypesComparisonSpaceAggregationParam:
+      properties:
+        operator:
+          type: string
+        threshold:
+          format: double
+          type: number
+      required:
+      - operator
+      - threshold
+      type: object
     MetrictypesSpaceAggregation:
       enum:
       - sum
@@ -1138,6 +1149,8 @@ components:
       type: object
     Querybuildertypesv5MetricAggregation:
       properties:
+        comparisonSpaceAggregationParam:
+          $ref: '#/components/schemas/MetrictypesComparisonSpaceAggregationParam'
         metricName:
           type: string
         reduceTo:

frontend/src/AppRoutes/pageComponents.ts

@@ -308,3 +308,15 @@ export const PublicDashboardPage = Loadable(
 			/* webpackChunkName: "Public Dashboard Page" */ 'pages/PublicDashboard'
 		),
 );
+
+export const AlertTypeSelectionPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "Alert Type Selection Page" */ 'pages/AlertTypeSelection'
+		),
+);
+
+export const MeterExplorerPage = Loadable(
+	() =>
+		import(/* webpackChunkName: "Meter Explorer Page" */ 'pages/MeterExplorer'),
+);

frontend/src/AppRoutes/routes.ts

@@ -1,12 +1,10 @@
 import { RouteProps } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import AlertTypeSelectionPage from 'pages/AlertTypeSelection';
-import MessagingQueues from 'pages/MessagingQueues';
-import MeterExplorer from 'pages/MeterExplorer';
 
 import {
 	AlertHistory,
 	AlertOverview,
+	AlertTypeSelectionPage,
 	AllAlertChannels,
 	AllErrors,
 	ApiMonitoring,
@@ -29,6 +27,8 @@ import {
 	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
+	MessagingQueuesMainPage,
+	MeterExplorerPage,
 	MetricsExplorer,
 	OldLogsExplorer,
 	Onboarding,
@@ -399,28 +399,28 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
 		exact: true,
-		component: MessagingQueues,
+		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
 		exact: true,
-		component: MessagingQueues,
+		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
 		exact: true,
-		component: MessagingQueues,
+		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
 		exact: true,
-		component: MessagingQueues,
+		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
@@ -463,21 +463,21 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.METER,
 		exact: true,
-		component: MeterExplorer,
+		component: MeterExplorerPage,
 		key: 'METER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER,
 		exact: true,
-		component: MeterExplorer,
+		component: MeterExplorerPage,
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER_VIEWS,
 		exact: true,
-		component: MeterExplorer,
+		component: MeterExplorerPage,
 		key: 'METER_EXPLORER_VIEWS',
 		isPrivate: true,
 	},

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -1006,6 +1006,18 @@ export interface MetricsexplorertypesUpdateMetricMetadataRequestDTO {
 	unit: string;
 }
 
+export interface MetrictypesComparisonSpaceAggregationParamDTO {
+	/**
+	 * @type string
+	 */
+	operator: string;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	threshold: number;
+}
+
 export enum MetrictypesSpaceAggregationDTO {
 	sum = 'sum',
 	avg = 'avg',
@@ -1367,6 +1379,7 @@ export interface Querybuildertypesv5LogAggregationDTO {
 }
 
 export interface Querybuildertypesv5MetricAggregationDTO {
+	comparisonSpaceAggregationParam?: MetrictypesComparisonSpaceAggregationParamDTO;
 	/**
 	 * @type string
 	 */

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -39,6 +39,7 @@ export interface HostData {
 	waitTimeSeries: TimeSeries;
 	load15: number;
 	load15TimeSeries: TimeSeries;
+	filesystem: number;
 }
 
 export interface HostListResponse {

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -48,7 +48,7 @@
 			.labels-row,
 			.values-row {
 				display: grid;
-				grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
+				grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr 1.5fr;
 				gap: 30px;
 				align-items: center;
 			}

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -426,6 +426,12 @@ function HostMetricsDetails({
 								>
 									MEMORY USAGE
 								</Typography.Text>
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									DISK USAGE
+								</Typography.Text>
 							</div>
 
 							<div className="values-row">
@@ -478,6 +484,23 @@ function HostMetricsDetails({
 										className="progress-bar"
 									/>
 								</div>
+								<div className="progress-container">
+									<Progress
+										percent={Number((host.filesystem * 100).toFixed(1))}
+										size="small"
+										strokeColor={((): string => {
+											const filesystemPercent = Number((host.filesystem * 100).toFixed(1));
+											if (filesystemPercent >= 90) {
+												return Color.BG_CHERRY_500;
+											}
+											if (filesystemPercent >= 60) {
+												return Color.BG_AMBER_500;
+											}
+											return Color.BG_FOREST_500;
+										})()}
+										className="progress-bar"
+									/>
+								</div>
 							</div>
 						</div>
 					</div>

frontend/src/components/LogDetail/index.tsx

@@ -86,8 +86,13 @@ function LogDetailInner({
 		const handleClickOutside = (e: MouseEvent): void => {
 			const target = e.target as HTMLElement;
 
-			// Don't close if clicking on explicitly ignored regions
-			if (target.closest('[data-log-detail-ignore="true"]')) {
+			// Don't close if clicking on drawer content, overlays, or portal elements
+			if (
+				target.closest('[data-log-detail-ignore="true"]') ||
+				target.closest('.cm-tooltip-autocomplete') ||
+				target.closest('.drawer-popover') ||
+				target.closest('.query-status-popover')
+			) {
 				return;
 			}
 
@@ -400,7 +405,11 @@ function LogDetailInner({
 			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
 				<div className="log-detail-drawer__log">
 					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-					<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
+					<Tooltip
+						title={removeEscapeCharacters(log?.body)}
+						placement="left"
+						mouseLeaveDelay={0}
+					>
 						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
 					</Tooltip>
 
@@ -466,6 +475,7 @@ function LogDetailInner({
 								title="Show Filters"
 								placement="topLeft"
 								aria-label="Show Filters"
+								mouseLeaveDelay={0}
 							>
 								<Button
 									className="action-btn"
@@ -481,6 +491,7 @@ function LogDetailInner({
 							aria-label={
 								selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
 							}
+							mouseLeaveDelay={0}
 						>
 							<Button
 								className="action-btn"

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -27,7 +27,11 @@ function AddToQueryHOC({
 	return (
 		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
 		<div className={cx('addToQueryContainer', fontSize)} onClick={handleQueryAdd}>
-			<Popover placement="top" content={popOverContent}>
+			<Popover
+				overlayClassName="drawer-popover"
+				placement="top"
+				content={popOverContent}
+			>
 				{children}
 			</Popover>
 		</div>

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -32,6 +32,7 @@ function CopyClipboardHOC({
 		<span onClick={onClick} role="presentation" tabIndex={-1}>
 			<Popover
 				placement="top"
+				overlayClassName="drawer-popover"
 				content={<span style={{ fontSize: '0.9rem' }}>{tooltipText}</span>}
 			>
 				{children}

frontend/src/components/Logs/TableView/config.ts

@@ -21,7 +21,7 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
-	maxWidth: '60rem',
+	maxWidth: '90rem',
 };
 
 export const defaultListViewPanelStyle: CSSProperties = {

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

@@ -1328,7 +1328,10 @@ function QuerySearch({
 			)}
 
 			<div className="query-where-clause-editor-container">
-				<Tooltip title={getTooltipContent()} placement="left">
+				<Tooltip
+					title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
+					placement="left"
+				>
 					<a
 						href="https://signoz.io/docs/userguide/search-syntax/"
 						target="_blank"

frontend/src/components/TimelineV2/TimelineV2.tsx

@@ -14,16 +14,10 @@ interface ITimelineV2Props {
 	startTimestamp: number;
 	endTimestamp: number;
 	timelineHeight: number;
-	offsetTimestamp: number;
 }
 
 function TimelineV2(props: ITimelineV2Props): JSX.Element {
-	const {
-		startTimestamp,
-		endTimestamp,
-		timelineHeight,
-		offsetTimestamp,
-	} = props;
+	const { startTimestamp, endTimestamp, timelineHeight } = props;
 	const [intervals, setIntervals] = useState<Interval[]>([]);
 	const [ref, { width }] = useMeasure<HTMLDivElement>();
 	const isDarkMode = useIsDarkMode();
@@ -36,10 +30,8 @@ function TimelineV2(props: ITimelineV2Props): JSX.Element {
 
 		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
 		const intervalisedSpread = (spread / minIntervals) * 1.0;
-		const intervals = getIntervals(intervalisedSpread, spread, offsetTimestamp);
-
-		setIntervals(intervals);
-	}, [startTimestamp, endTimestamp, width, offsetTimestamp]);
+		setIntervals(getIntervals(intervalisedSpread, spread));
+	}, [startTimestamp, endTimestamp, width]);
 
 	if (endTimestamp < startTimestamp) {
 		console.error(

frontend/src/components/TimelineV2/utils.ts

@@ -64,71 +64,6 @@ export const resolveTimeFromInterval = (
 export function getIntervals(
 	intervalSpread: number,
 	baseSpread: number,
-	offsetTimestamp: number, // ms offset from trace start (e.g. viewStart - traceStart)
-): Interval[] {
-	const integerPartString = intervalSpread.toString().split('.')[0];
-	const integerPartLength = integerPartString.length;
-
-	const intervalSpreadNormalized =
-		intervalSpread < 1.0
-			? intervalSpread
-			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
-			  10 ** (integerPartLength - 1);
-
-	let intervalUnit = INTERVAL_UNITS[0];
-	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
-		const standardInterval = INTERVAL_UNITS[idx];
-		if (intervalSpread * standardInterval.multiplier >= 1) {
-			intervalUnit = INTERVAL_UNITS[idx];
-			break;
-		}
-	}
-
-	const intervals: Interval[] = [
-		{
-			// ✅ start label should reflect window start offset (relative to trace start)
-			label: `${toFixed(
-				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
-				2,
-			)}${intervalUnit.name}`,
-			percentage: 0,
-		},
-	];
-
-	let tempBaseSpread = baseSpread;
-	let elapsedIntervals = 0;
-
-	while (tempBaseSpread && intervals.length < 20) {
-		let intervalTime: number;
-
-		if (tempBaseSpread <= 1.5 * intervalSpreadNormalized) {
-			intervalTime = elapsedIntervals + tempBaseSpread;
-			tempBaseSpread = 0;
-		} else {
-			intervalTime = elapsedIntervals + intervalSpreadNormalized;
-			tempBaseSpread -= intervalSpreadNormalized;
-		}
-
-		elapsedIntervals = intervalTime;
-
-		// ✅ label time = window offset + elapsed time inside window
-		const labelTime = offsetTimestamp + intervalTime;
-
-		intervals.push({
-			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
-				intervalUnit.name
-			}`,
-			percentage: (intervalTime / baseSpread) * 100,
-		});
-	}
-
-	return intervals;
-}
-
-export function getIntervalsOld(
-	intervalSpread: number,
-	baseSpread: number,
-	offsetTimestamp: number,
 ): Interval[] {
 	const integerPartString = intervalSpread.toString().split('.')[0];
 	const integerPartLength = integerPartString.length;
@@ -171,10 +106,9 @@ export function getIntervalsOld(
 		}
 		elapsedIntervals = intervalTime;
 		const interval: Interval = {
-			label: `${toFixed(
-				resolveTimeFromInterval(intervalTime + offsetTimestamp, intervalUnit),
-				2,
-			)}${intervalUnit.name}`,
+			label: `${toFixed(resolveTimeFromInterval(intervalTime, intervalUnit), 2)}${
+				intervalUnit.name
+			}`,
 			percentage: (intervalTime / baseSpread) * 100,
 		};
 		intervals.push(interval);

frontend/src/container/AppLayout/index.tsx

@@ -117,7 +117,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const [showSlowApiWarning, setShowSlowApiWarning] = useState(false);
 	const [slowApiWarningShown, setSlowApiWarningShown] = useState(false);
 
-	const { latestVersion } = useSelector<AppState, AppReducer>(
+	const { currentVersion } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
 	);
 
@@ -213,9 +213,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		},
 		{
 			queryFn: (): Promise<SuccessResponse<ChangelogSchema> | ErrorResponse> =>
-				getChangelogByVersion(latestVersion, changelogForTenant),
-			queryKey: ['getChangelogByVersion', latestVersion, changelogForTenant],
-			enabled: isLoggedIn && Boolean(latestVersion),
+				getChangelogByVersion(currentVersion, changelogForTenant),
+			queryKey: ['getChangelogByVersion', currentVersion, changelogForTenant],
+			enabled: isLoggedIn && Boolean(currentVersion),
 		},
 	]);
 
@@ -226,7 +226,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 			!changelog &&
 			!getChangelogByVersionResponse.isLoading &&
 			isLoggedIn &&
-			Boolean(latestVersion)
+			Boolean(currentVersion)
 		) {
 			getChangelogByVersionResponse.refetch();
 		}
@@ -237,9 +237,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		let timer: ReturnType<typeof setTimeout>;
 		if (
 			isCloudUserVal &&
-			Boolean(latestVersion) &&
+			Boolean(currentVersion) &&
 			seenChangelogVersion != null &&
-			latestVersion !== seenChangelogVersion &&
+			currentVersion !== seenChangelogVersion &&
 			daysSinceAccountCreation > MIN_ACCOUNT_AGE_FOR_CHANGELOG && // Show to only users older than 2 weeks
 			!isWorkspaceAccessRestricted
 		) {
@@ -255,7 +255,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		isCloudUserVal,
-		latestVersion,
+		currentVersion,
 		seenChangelogVersion,
 		toggleChangelogModal,
 		isWorkspaceAccessRestricted,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -9,6 +9,7 @@ import {
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
+import { updateDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 import {
 	enqueueDescendantsOfVariable,
 	enqueueFetchOfAllVariables,
@@ -31,6 +32,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
 
 	const { dashboardVariables } = useDashboardVariables();
+	const dashboardId = useDashboardVariablesSelector(
+		(state) => state.dashboardId,
+	);
 	const sortedVariablesArray = useDashboardVariablesSelector(
 		(state) => state.sortedVariablesArray,
 	);
@@ -96,6 +100,28 @@ function DashboardVariableSelection(): JSX.Element | null {
 				updateUrlVariable(name || id, value);
 			}
 
+			// Synchronously update the external store with the new variable value so that
+			// child variables see the updated parent value when they refetch, rather than
+			// waiting for setSelectedDashboard → useEffect → updateDashboardVariablesStore.
+			const updatedVariables = { ...dashboardVariables };
+			if (updatedVariables[id]) {
+				updatedVariables[id] = {
+					...updatedVariables[id],
+					selectedValue: value,
+					allSelected,
+					haveCustomValuesSelected,
+				};
+			}
+			if (updatedVariables[name]) {
+				updatedVariables[name] = {
+					...updatedVariables[name],
+					selectedValue: value,
+					allSelected,
+					haveCustomValuesSelected,
+				};
+			}
+			updateDashboardVariablesStore({ dashboardId, variables: updatedVariables });
+
 			setSelectedDashboard((prev) => {
 				if (prev) {
 					const oldVariables = { ...prev?.data.variables };
@@ -130,10 +156,12 @@ function DashboardVariableSelection(): JSX.Element | null {
 				return prev;
 			});
 
-			// Cascade: enqueue query-type descendants for refetching
+			// Cascade: enqueue query-type descendants for refetching.
+			// Safe to call synchronously now that the store already has the updated value.
 			enqueueDescendantsOfVariable(name);
 		},
 		[
+			dashboardId,
 			dashboardVariables,
 			updateLocalStorageDashboardVariables,
 			updateUrlVariable,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx

@@ -5,7 +5,7 @@ import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQ
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import { isArray, isEmpty, isString } from 'lodash-es';
+import { isArray, isEmpty } from 'lodash-es';
 import { AppState } from 'store/reducers';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -54,7 +54,7 @@ function QueryVariableInput({
 		onChange,
 		onDropdownVisibleChange,
 		handleClear,
-		applyDefaultIfNeeded,
+		getDefaultValue,
 	} = useDashboardVariableSelectHelper({
 		variableData,
 		optionsData,
@@ -68,81 +68,93 @@ function QueryVariableInput({
 			try {
 				setErrorMessage(null);
 
+				// This is just a check given the previously undefined typed name prop. Not significant
+				// This will be changed when we change the schema
+				// TODO: @AshwinBhatkal Perses
+				if (!variableData.name) {
+					return;
+				}
+
+				// if the response is not an array, premature return
 				if (
-					variablesRes?.variableValues &&
-					Array.isArray(variablesRes?.variableValues)
+					!variablesRes?.variableValues ||
+					!Array.isArray(variablesRes?.variableValues)
 				) {
-					const newOptionsData = sortValues(
-						variablesRes?.variableValues,
-						variableData.sort,
+					return;
+				}
+
+				const sortedNewOptions = sortValues(
+					variablesRes.variableValues,
+					variableData.sort,
+				);
+				const sortedOldOptions = sortValues(optionsData, variableData.sort);
+
+				// if options are the same as before, no need to update state or check for selected value validity
+				// ! selectedValue needs to be set in the first pass though, as options are initially empty array and we need to apply default if needed
+				// Expecatation is that when oldOptions are not empty, then there is always some selectedValue
+				if (areArraysEqual(sortedNewOptions, sortedOldOptions)) {
+					return;
+				}
+
+				setOptionsData(sortedNewOptions);
+
+				let isSelectedValueMissingInNewOptions = false;
+
+				// Check if currently selected value(s) are present in the new options list
+				if (isArray(variableData.selectedValue)) {
+					isSelectedValueMissingInNewOptions = variableData.selectedValue.some(
+						(val) => !sortedNewOptions.includes(val),
 					);
+				} else if (
+					variableData.selectedValue &&
+					!sortedNewOptions.includes(variableData.selectedValue)
+				) {
+					isSelectedValueMissingInNewOptions = true;
+				}
 
-					const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
+				// If multi-select with ALL option enabled, and ALL is currently selected, we want to maintain that state and select all new options
+				// This block does not depend on selected value because of ALL and also because we would only come here if options are different from the previous
+				if (
+					variableData.multiSelect &&
+					variableData.showALLOption &&
+					variableData.allSelected &&
+					isSelectedValueMissingInNewOptions
+				) {
+					onValueUpdate(variableData.name, variableData.id, sortedNewOptions, true);
 
-					if (!areArraysEqual(newOptionsData, oldOptionsData)) {
-						let valueNotInList = false;
+					// Update tempSelection to maintain ALL state when dropdown is open
+					if (tempSelection !== undefined) {
+						setTempSelection(sortedNewOptions.map((option) => option.toString()));
+					}
+					return;
+				}
 
-						if (isArray(variableData.selectedValue)) {
-							variableData.selectedValue.forEach((val) => {
-								if (!newOptionsData.includes(val)) {
-									valueNotInList = true;
-								}
-							});
-						} else if (
-							isString(variableData.selectedValue) &&
-							!newOptionsData.includes(variableData.selectedValue)
-						) {
-							valueNotInList = true;
-						}
+				const value = variableData.selectedValue;
+				let allSelected = false;
 
-						if (variableData.name && (valueNotInList || variableData.allSelected)) {
-							if (
-								variableData.allSelected &&
-								variableData.multiSelect &&
-								variableData.showALLOption
-							) {
-								if (
-									variableData.name &&
-									variableData.id &&
-									!isEmpty(variableData.selectedValue)
-								) {
-									onValueUpdate(
-										variableData.name,
-										variableData.id,
-										newOptionsData,
-										true,
-									);
-								}
+				if (variableData.multiSelect) {
+					const { selectedValue } = variableData;
+					allSelected =
+						sortedNewOptions.length > 0 &&
+						Array.isArray(selectedValue) &&
+						sortedNewOptions.every((option) => selectedValue.includes(option));
+				}
 
-								// Update tempSelection to maintain ALL state when dropdown is open
-								if (tempSelection !== undefined) {
-									setTempSelection(newOptionsData.map((option) => option.toString()));
-								}
-							} else {
-								const value = variableData.selectedValue;
-								let allSelected = false;
-
-								if (variableData.multiSelect) {
-									const { selectedValue } = variableData;
-									allSelected =
-										newOptionsData.length > 0 &&
-										Array.isArray(selectedValue) &&
-										newOptionsData.every((option) => selectedValue.includes(option));
-								}
-
-								if (
-									variableData.name &&
-									variableData.id &&
-									!isEmpty(variableData.selectedValue)
-								) {
-									onValueUpdate(variableData.name, variableData.id, value, allSelected);
-								}
-							}
-						}
-
-						setOptionsData(newOptionsData);
-						// Apply default if no value is selected (e.g., new variable, first load)
-						applyDefaultIfNeeded(newOptionsData);
+				if (
+					variableData.name &&
+					variableData.id &&
+					!isEmpty(variableData.selectedValue)
+				) {
+					onValueUpdate(variableData.name, variableData.id, value, allSelected);
+				} else {
+					const defaultValue = getDefaultValue(sortedNewOptions);
+					if (defaultValue !== undefined) {
+						onValueUpdate(
+							variableData.name,
+							variableData.id,
+							defaultValue,
+							allSelected,
+						);
 					}
 				}
 			} catch (e) {
@@ -155,7 +167,7 @@ function QueryVariableInput({
 			onValueUpdate,
 			tempSelection,
 			setTempSelection,
-			applyDefaultIfNeeded,
+			getDefaultValue,
 		],
 	);
 

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/DashboardVariableSelection.test.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import { act, render } from '@testing-library/react';
+import * as dashboardVariablesStoreModule from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 import {
 	dashboardVariablesStore,
 	setDashboardVariablesStore,
@@ -10,6 +11,7 @@ import {
 	IDashboardVariablesStoreState,
 } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import {
+	enqueueDescendantsOfVariable,
 	enqueueFetchOfAllVariables,
 	initializeVariableFetchStore,
 } from 'providers/Dashboard/store/variableFetchStore';
@@ -17,6 +19,17 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import DashboardVariableSelection from '../DashboardVariableSelection';
 
+// Mutable container to capture the onValueUpdate callback from VariableItem
+const mockVariableItemCallbacks: {
+	onValueUpdate?: (
+		name: string,
+		id: string,
+		value: IDashboardVariable['selectedValue'],
+		allSelected: boolean,
+		haveCustomValuesSelected?: boolean,
+	) => void;
+} = {};
+
 // Mock providers/Dashboard/Dashboard
 const mockSetSelectedDashboard = jest.fn();
 const mockUpdateLocalStorageDashboardVariables = jest.fn();
@@ -56,10 +69,14 @@ jest.mock('react-redux', () => ({
 	useSelector: jest.fn().mockReturnValue({ minTime: 1000, maxTime: 2000 }),
 }));
 
-// Mock VariableItem to avoid rendering complexity
+// VariableItem mock captures the onValueUpdate prop for use in onValueUpdate tests
 jest.mock('../VariableItem', () => ({
 	__esModule: true,
-	default: (): JSX.Element => <div data-testid="variable-item" />,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	default: (props: any): JSX.Element => {
+		mockVariableItemCallbacks.onValueUpdate = props.onValueUpdate;
+		return <div data-testid="variable-item" />;
+	},
 }));
 
 function createVariable(
@@ -200,4 +217,162 @@ describe('DashboardVariableSelection', () => {
 		expect(initializeVariableFetchStore).not.toHaveBeenCalled();
 		expect(enqueueFetchOfAllVariables).not.toHaveBeenCalled();
 	});
+
+	describe('onValueUpdate', () => {
+		let updateStoreSpy: jest.SpyInstance;
+
+		beforeEach(() => {
+			resetStore();
+			jest.clearAllMocks();
+			// Real implementation pass-through — we just want to observe calls
+			updateStoreSpy = jest.spyOn(
+				dashboardVariablesStoreModule,
+				'updateDashboardVariablesStore',
+			);
+		});
+
+		afterEach(() => {
+			updateStoreSpy.mockRestore();
+		});
+
+		it('updates dashboardVariablesStore synchronously before enqueueDescendantsOfVariable', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					env: createVariable({ name: 'env', id: 'env-id', order: 0 }),
+				},
+			});
+
+			render(<DashboardVariableSelection />);
+
+			const callOrder: string[] = [];
+			updateStoreSpy.mockImplementation(() => {
+				callOrder.push('updateDashboardVariablesStore');
+			});
+			(enqueueDescendantsOfVariable as jest.Mock).mockImplementation(() => {
+				callOrder.push('enqueueDescendantsOfVariable');
+			});
+
+			act(() => {
+				mockVariableItemCallbacks.onValueUpdate?.(
+					'env',
+					'env-id',
+					'production',
+					false,
+				);
+			});
+
+			expect(callOrder).toEqual([
+				'updateDashboardVariablesStore',
+				'enqueueDescendantsOfVariable',
+			]);
+		});
+
+		it('passes updated variable value to dashboardVariablesStore', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					env: createVariable({
+						name: 'env',
+						id: 'env-id',
+						order: 0,
+						selectedValue: 'staging',
+					}),
+				},
+			});
+
+			render(<DashboardVariableSelection />);
+
+			// Clear spy calls that happened during setup/render
+			updateStoreSpy.mockClear();
+
+			act(() => {
+				mockVariableItemCallbacks.onValueUpdate?.(
+					'env',
+					'env-id',
+					'production',
+					false,
+				);
+			});
+
+			expect(updateStoreSpy).toHaveBeenCalledWith(
+				expect.objectContaining({
+					dashboardId: 'dash-1',
+					variables: expect.objectContaining({
+						env: expect.objectContaining({
+							selectedValue: 'production',
+							allSelected: false,
+						}),
+					}),
+				}),
+			);
+		});
+
+		it('calls enqueueDescendantsOfVariable synchronously without a timer', () => {
+			jest.useFakeTimers();
+
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					env: createVariable({ name: 'env', id: 'env-id', order: 0 }),
+				},
+			});
+
+			render(<DashboardVariableSelection />);
+
+			act(() => {
+				mockVariableItemCallbacks.onValueUpdate?.(
+					'env',
+					'env-id',
+					'production',
+					false,
+				);
+			});
+
+			// Must be called immediately — no timer advancement needed
+			expect(enqueueDescendantsOfVariable).toHaveBeenCalledWith('env');
+
+			jest.useRealTimers();
+		});
+
+		it('propagates allSelected and haveCustomValuesSelected to the store', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					env: createVariable({
+						name: 'env',
+						id: 'env-id',
+						order: 0,
+						multiSelect: true,
+						showALLOption: true,
+					}),
+				},
+			});
+
+			render(<DashboardVariableSelection />);
+			updateStoreSpy.mockClear();
+
+			act(() => {
+				mockVariableItemCallbacks.onValueUpdate?.(
+					'env',
+					'env-id',
+					['production', 'staging'],
+					true,
+					false,
+				);
+			});
+
+			expect(updateStoreSpy).toHaveBeenCalledWith(
+				expect.objectContaining({
+					variables: expect.objectContaining({
+						env: expect.objectContaining({
+							selectedValue: ['production', 'staging'],
+							allSelected: true,
+							haveCustomValuesSelected: false,
+						}),
+					}),
+				}),
+			);
+		});
+	});
 });

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/QueryVariableInput.test.tsx

@@ -0,0 +1,275 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { act, render, waitFor } from '@testing-library/react';
+import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
+import { variableFetchStore } from 'providers/Dashboard/store/variableFetchStore';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import QueryVariableInput from '../QueryVariableInput';
+
+jest.mock('api/dashboard/variables/dashboardVariablesQuery');
+
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useSelector: jest.fn().mockReturnValue({ minTime: 1000, maxTime: 2000 }),
+}));
+
+function createTestQueryClient(): QueryClient {
+	return new QueryClient({
+		defaultOptions: {
+			queries: { retry: false, refetchOnWindowFocus: false },
+		},
+	});
+}
+
+function Wrapper({
+	children,
+	queryClient,
+}: {
+	children: React.ReactNode;
+	queryClient: QueryClient;
+}): JSX.Element {
+	return (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	);
+}
+
+function createVariable(
+	overrides: Partial<IDashboardVariable> = {},
+): IDashboardVariable {
+	return {
+		id: 'env-id',
+		name: 'env',
+		description: '',
+		type: 'QUERY',
+		sort: 'DISABLED',
+		showALLOption: false,
+		multiSelect: false,
+		order: 0,
+		queryValue: 'SELECT env FROM table',
+		...overrides,
+	};
+}
+
+/** Put the named variable into 'loading' state so useQuery fires on mount */
+function setVariableLoading(name: string): void {
+	variableFetchStore.update((draft) => {
+		draft.states[name] = 'loading';
+		draft.cycleIds[name] = (draft.cycleIds[name] || 0) + 1;
+	});
+}
+
+function resetFetchStore(): void {
+	variableFetchStore.set(() => ({
+		states: {},
+		lastUpdated: {},
+		cycleIds: {},
+	}));
+}
+
+describe('QueryVariableInput - getOptions logic', () => {
+	const mockOnValueUpdate = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		resetFetchStore();
+	});
+
+	afterEach(() => {
+		resetFetchStore();
+	});
+
+	it('applies default value (first option) when selectedValue is empty on first load', async () => {
+		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
+			statusCode: 200,
+			payload: { variableValues: ['production', 'staging', 'dev'] },
+		});
+
+		const variable = createVariable({ selectedValue: undefined });
+		setVariableLoading('env');
+
+		const queryClient = createTestQueryClient();
+		render(
+			<Wrapper queryClient={queryClient}>
+				<QueryVariableInput
+					variableData={variable}
+					existingVariables={{ 'env-id': variable }}
+					onValueUpdate={mockOnValueUpdate}
+				/>
+			</Wrapper>,
+		);
+
+		await waitFor(() => {
+			expect(mockOnValueUpdate).toHaveBeenCalledWith(
+				'env',
+				'env-id',
+				'production', // first option by default
+				false,
+			);
+		});
+	});
+
+	it('keeps existing selectedValue when it is present in new options', async () => {
+		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
+			statusCode: 200,
+			payload: { variableValues: ['production', 'staging'] },
+		});
+
+		const variable = createVariable({ selectedValue: 'staging' });
+		setVariableLoading('env');
+
+		const queryClient = createTestQueryClient();
+		render(
+			<Wrapper queryClient={queryClient}>
+				<QueryVariableInput
+					variableData={variable}
+					existingVariables={{ 'env-id': variable }}
+					onValueUpdate={mockOnValueUpdate}
+				/>
+			</Wrapper>,
+		);
+
+		await waitFor(() => {
+			expect(mockOnValueUpdate).toHaveBeenCalledWith(
+				'env',
+				'env-id',
+				'staging',
+				false,
+			);
+		});
+	});
+
+	it('selects all new options when allSelected=true and value is missing from new options', async () => {
+		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
+			statusCode: 200,
+			payload: { variableValues: ['production', 'staging'] },
+		});
+
+		const variable = createVariable({
+			selectedValue: ['old-env'],
+			allSelected: true,
+			multiSelect: true,
+			showALLOption: true,
+		});
+		setVariableLoading('env');
+
+		const queryClient = createTestQueryClient();
+		render(
+			<Wrapper queryClient={queryClient}>
+				<QueryVariableInput
+					variableData={variable}
+					existingVariables={{ 'env-id': variable }}
+					onValueUpdate={mockOnValueUpdate}
+				/>
+			</Wrapper>,
+		);
+
+		await waitFor(() => {
+			expect(mockOnValueUpdate).toHaveBeenCalledWith(
+				'env',
+				'env-id',
+				['production', 'staging'],
+				true,
+			);
+		});
+	});
+
+	it('does not call onValueUpdate a second time when options have not changed', async () => {
+		const mockQueryFn = jest.fn().mockResolvedValue({
+			statusCode: 200,
+			payload: { variableValues: ['production', 'staging'] },
+		});
+		(dashboardVariablesQuery as jest.Mock).mockImplementation(mockQueryFn);
+
+		const variable = createVariable({ selectedValue: 'production' });
+		setVariableLoading('env');
+
+		const queryClient = createTestQueryClient();
+		render(
+			<Wrapper queryClient={queryClient}>
+				<QueryVariableInput
+					variableData={variable}
+					existingVariables={{ 'env-id': variable }}
+					onValueUpdate={mockOnValueUpdate}
+				/>
+			</Wrapper>,
+		);
+
+		// Wait for first fetch and onValueUpdate call
+		await waitFor(() => {
+			expect(mockOnValueUpdate).toHaveBeenCalledTimes(1);
+		});
+
+		mockOnValueUpdate.mockClear();
+
+		// Trigger a second fetch cycle with the same API response
+		act(() => {
+			variableFetchStore.update((draft) => {
+				draft.states['env'] = 'revalidating';
+				draft.cycleIds['env'] = (draft.cycleIds['env'] || 0) + 1;
+			});
+		});
+
+		// Wait for second query to fire
+		await waitFor(() => {
+			expect(mockQueryFn).toHaveBeenCalledTimes(2);
+		});
+
+		// Options are unchanged, so onValueUpdate must not fire again
+		expect(mockOnValueUpdate).not.toHaveBeenCalled();
+	});
+
+	it('does not call onValueUpdate when API returns a non-array response', async () => {
+		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
+			statusCode: 200,
+			payload: { variableValues: null },
+		});
+
+		const variable = createVariable({ selectedValue: 'production' });
+		setVariableLoading('env');
+
+		const queryClient = createTestQueryClient();
+		render(
+			<Wrapper queryClient={queryClient}>
+				<QueryVariableInput
+					variableData={variable}
+					existingVariables={{ 'env-id': variable }}
+					onValueUpdate={mockOnValueUpdate}
+				/>
+			</Wrapper>,
+		);
+
+		await waitFor(() => {
+			expect(dashboardVariablesQuery).toHaveBeenCalled();
+		});
+
+		expect(mockOnValueUpdate).not.toHaveBeenCalled();
+	});
+
+	it('does not fire the query when variableData.name is empty', () => {
+		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
+			statusCode: 200,
+			payload: { variableValues: ['production'] },
+		});
+
+		// Variable with no name — useVariableFetchState will be called with ''
+		// and the query key will have an empty name, leaving it disabled
+		const variable = createVariable({ name: '' });
+		// Note: we do NOT put it in 'loading' state since name is empty
+		// (no variableFetchStore entry for '' means isVariableFetching=false)
+
+		const queryClient = createTestQueryClient();
+		render(
+			<Wrapper queryClient={queryClient}>
+				<QueryVariableInput
+					variableData={variable}
+					existingVariables={{ 'env-id': variable }}
+					onValueUpdate={mockOnValueUpdate}
+				/>
+			</Wrapper>,
+		);
+
+		expect(dashboardVariablesQuery).not.toHaveBeenCalled();
+		expect(mockOnValueUpdate).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableSelectHelper.ts

@@ -46,6 +46,9 @@ interface UseDashboardVariableSelectHelperReturn {
 	applyDefaultIfNeeded: (
 		overrideOptions?: (string | number | boolean)[],
 	) => void;
+	getDefaultValue: (
+		overrideOptions?: (string | number | boolean)[],
+	) => string | string[] | undefined;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -248,5 +251,6 @@ export function useDashboardVariableSelectHelper({
 		defaultValue,
 		onChange,
 		applyDefaultIfNeeded,
+		getDefaultValue,
 	};
 }

frontend/src/container/InfraMonitoringHosts/__tests__/utilts.test.tsx

@@ -24,6 +24,7 @@ describe('InfraMonitoringHosts utils', () => {
 					active: true,
 					cpu: 0.95,
 					memory: 0.85,
+					filesystem: 0.65,
 					wait: 0.05,
 					load15: 2.5,
 					os: 'linux',
@@ -67,6 +68,7 @@ describe('InfraMonitoringHosts utils', () => {
 					active: false,
 					cpu: 0.3,
 					memory: 0.4,
+					filesystem: 0.2,
 					wait: 0.02,
 					load15: 1.2,
 					os: 'linux',
@@ -91,6 +93,7 @@ describe('InfraMonitoringHosts utils', () => {
 					active: true,
 					cpu: 0.5,
 					memory: 0.4,
+					filesystem: 0.5,
 					wait: 0.01,
 					load15: 1.0,
 					os: 'linux',

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -29,6 +29,7 @@ export interface HostRowData {
 	hostName: string;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
+	filesystem: React.ReactNode;
 	wait: string;
 	load15: number;
 	active: React.ReactNode;
@@ -163,6 +164,14 @@ export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
 		sorter: true,
 		align: 'right',
 	},
+	{
+		title: <div className="column-header-right">Disk Usage</div>,
+		dataIndex: 'filesystem',
+		key: 'filesystem',
+		width: 100,
+		sorter: true,
+		align: 'right',
+	},
 	{
 		title: <div className="column-header-right">IOWait</div>,
 		dataIndex: 'wait',
@@ -233,6 +242,26 @@ export const formatDataForTable = (data: HostData[]): HostRowData[] =>
 				/>
 			</div>
 		),
+		filesystem: (
+			<div className="progress-container">
+				<Progress
+					percent={Number((host.filesystem * 100).toFixed(1))}
+					strokeLinecap="butt"
+					size="small"
+					strokeColor={((): string => {
+						const filesystemPercent = Number((host.filesystem * 100).toFixed(1));
+						if (filesystemPercent >= 90) {
+							return Color.BG_CHERRY_500;
+						}
+						if (filesystemPercent >= 60) {
+							return Color.BG_AMBER_500;
+						}
+						return Color.BG_FOREST_500;
+					})()}
+					className="progress-bar"
+				/>
+			</div>
+		),
 		wait: `${Number((host.wait * 100).toFixed(1))}%`,
 		load15: host.load15,
 	}));

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -121,9 +121,23 @@ function BodyTitleRenderer({
 	return (
 		<TitleWrapper onClick={handleNodeClick}>
 			{typeof value !== 'object' && (
-				<Dropdown menu={menu} trigger={['click']}>
-					<SettingOutlined style={{ marginRight: 8 }} className="hover-reveal" />
-				</Dropdown>
+				<span
+					onClick={(e): void => {
+						e.stopPropagation();
+						e.preventDefault();
+					}}
+					onMouseDown={(e): void => e.preventDefault()}
+				>
+					<Dropdown
+						menu={menu}
+						trigger={['click']}
+						dropdownRender={(originNode): React.ReactNode => (
+							<div data-log-detail-ignore="true">{originNode}</div>
+						)}
+					>
+						<SettingOutlined style={{ marginRight: 8 }} className="hover-reveal" />
+					</Dropdown>
+				</span>
 			)}
 			{title.toString()}{' '}
 			{!parentIsArray && typeof value !== 'object' && (

frontend/src/container/LogDetailedView/FieldRenderer.tsx

@@ -13,7 +13,7 @@ function FieldRenderer({ field }: FieldRendererProps): JSX.Element {
 		<span className="field-renderer-container">
 			{dataType && newField && logType ? (
 				<>
-					<Tooltip placement="left" title={newField}>
+					<Tooltip placement="left" title={newField} mouseLeaveDelay={0}>
 						<Typography.Text ellipsis className="label">
 							{newField}{' '}
 						</Typography.Text>

frontend/src/container/LogDetailedView/InfraMetrics/constants.ts

@@ -1583,6 +1583,8 @@ export const getNodeQueryPayload = (
 	];
 };
 
+// We intentionally set stepInterval to 0 so backend computes the effective step from the selected time range.
+// TODO: Remove stepInterval usage from IBuilderQuery and all places where it is used.
 export const getHostQueryPayload = (
 	hostName: string,
 	start: number,
@@ -1623,6 +1625,9 @@ export const getHostQueryPayload = (
 	const diskPendingKey = dotMetricsEnabled
 		? 'system.disk.pending_operations'
 		: 'system_disk_pending_operations';
+	const fsUsageKey = dotMetricsEnabled
+		? 'system.filesystem.usage'
+		: 'system_filesystem_usage';
 
 	return [
 		{
@@ -1677,7 +1682,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 						{
@@ -1718,7 +1723,7 @@ export const getHostQueryPayload = (
 							queryName: 'B',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -1794,7 +1799,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'avg',
 						},
 					],
@@ -1855,7 +1860,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'avg',
 						},
 						{
@@ -1896,7 +1901,7 @@ export const getHostQueryPayload = (
 							queryName: 'B',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'avg',
 						},
 						{
@@ -1937,7 +1942,7 @@ export const getHostQueryPayload = (
 							queryName: 'C',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'avg',
 						},
 					],
@@ -2019,7 +2024,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2095,7 +2100,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2171,7 +2176,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2247,7 +2252,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2323,7 +2328,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'avg',
 						},
 					],
@@ -2384,7 +2389,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2466,7 +2471,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'rate',
 						},
 					],
@@ -2483,6 +2488,143 @@ export const getHostQueryPayload = (
 			start,
 			end,
 		},
+		{
+			selectedTime: 'GLOBAL_TIME',
+			graphType: PANEL_TYPES.TIME_SERIES,
+			query: {
+				builder: {
+					queryData: [
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'system_filesystem_usage--float64--Gauge--true',
+
+								key: fsUsageKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: true,
+							expression: 'A',
+							filters: {
+								items: [
+									{
+										id: 'fs_f1',
+										key: {
+											dataType: DataTypes.String,
+											id: 'host_name--string--tag--false',
+
+											key: hostNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: hostName,
+									},
+									{
+										id: 'fs_f2',
+										key: {
+											dataType: DataTypes.String,
+											id: 'state--string--tag--false',
+
+											key: 'state',
+											type: 'tag',
+										},
+										op: '=',
+										value: 'used',
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'mountpoint--string--tag--false',
+
+									key: 'mountpoint',
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: '{{mountpoint}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'A',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 0,
+							timeAggregation: 'avg',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'system_filesystem_usage--float64--Gauge--true',
+
+								key: fsUsageKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: true,
+							expression: 'B',
+							filters: {
+								items: [
+									{
+										id: 'fs_f3',
+										key: {
+											dataType: DataTypes.String,
+											id: 'host_name--string--tag--false',
+
+											key: hostNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: hostName,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'mountpoint--string--tag--false',
+
+									key: 'mountpoint',
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: '{{mountpoint}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'B',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 0,
+							timeAggregation: 'avg',
+						},
+					],
+					queryFormulas: [
+						{
+							disabled: false,
+							expression: 'A/B',
+							legend: '{{mountpoint}}',
+							queryName: 'F1',
+						},
+					],
+					queryTraceOperator: [],
+				},
+				clickhouse_sql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+				promql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			variables: {},
+			formatForWeb: false,
+			start,
+			end,
+		},
 		{
 			selectedTime: 'GLOBAL_TIME',
 			graphType: PANEL_TYPES.TIME_SERIES,
@@ -2541,7 +2683,7 @@ export const getHostQueryPayload = (
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
 							spaceAggregation: 'sum',
-							stepInterval: 60,
+							stepInterval: 0,
 							timeAggregation: 'max',
 						},
 					],
@@ -2631,6 +2773,6 @@ export const hostWidgetInfo = [
 	{ title: 'Network connections', yAxisUnit: 'short' },
 	{ title: 'System disk io (bytes transferred)', yAxisUnit: 'bytes' },
 	{ title: 'System disk operations/s', yAxisUnit: 'short' },
+	{ title: 'Disk Usage (%) by mountpoint', yAxisUnit: 'percentunit' },
 	{ title: 'Queue size', yAxisUnit: 'short' },
-	{ title: 'Disk operations time', yAxisUnit: 's' },
 ];

frontend/src/container/LogDetailedView/Overview.tsx

@@ -46,7 +46,7 @@ function Overview({
 	handleChangeSelectedView,
 }: Props): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
-	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(false);
+	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(true);
 	const [isAttributesExpanded, setIsAttributesExpanded] = useState<boolean>(
 		true,
 	);

frontend/src/container/LogDetailedView/TableView.tsx

@@ -245,7 +245,7 @@ function TableView({
 							<Typography.Text>{renderedField}</Typography.Text>
 
 							{traceId && (
-								<Tooltip title="Inspect in Trace">
+								<Tooltip title="Inspect in Trace" mouseLeaveDelay={0}>
 									<Button
 										className="periscope-btn"
 										onClick={(

frontend/src/container/LogsExplorerChart/__tests__/frequencyGraphColor.test.ts

@@ -0,0 +1,34 @@
+import { Color } from '@signozhq/design-tokens';
+
+import { getColorsForSeverityLabels, isRedLike } from '../utils';
+
+describe('getColorsForSeverityLabels', () => {
+	it('should return slate for blank labels', () => {
+		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_SLATE_300);
+		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_SLATE_300);
+	});
+
+	it('should return correct colors for known severity variants', () => {
+		expect(getColorsForSeverityLabels('INFO', 0)).toBe(Color.BG_ROBIN_600);
+		expect(getColorsForSeverityLabels('ERROR', 0)).toBe(Color.BG_CHERRY_600);
+		expect(getColorsForSeverityLabels('WARN', 0)).toBe(Color.BG_AMBER_600);
+		expect(getColorsForSeverityLabels('DEBUG', 0)).toBe(Color.BG_AQUA_600);
+		expect(getColorsForSeverityLabels('TRACE', 0)).toBe(Color.BG_FOREST_600);
+		expect(getColorsForSeverityLabels('FATAL', 0)).toBe(Color.BG_SAKURA_600);
+	});
+
+	it('should return non-red colors for unrecognized labels at any index', () => {
+		for (let i = 0; i < 30; i++) {
+			const color = getColorsForSeverityLabels('4', i);
+			expect(isRedLike(color)).toBe(false);
+		}
+	});
+
+	it('should return non-red colors for numeric severity text', () => {
+		const numericLabels = ['1', '2', '4', '9', '13', '17', '21'];
+		numericLabels.forEach((label) => {
+			const color = getColorsForSeverityLabels(label, 0);
+			expect(isRedLike(color)).toBe(false);
+		});
+	});
+});

frontend/src/container/LogsExplorerChart/utils.ts

@@ -1,7 +1,16 @@
 import { Color } from '@signozhq/design-tokens';
-import { themeColors } from 'constants/theme';
 import { colors } from 'lib/getRandomColor';
 
+// Function to determine if a color is "red-like" based on its RGB values
+export function isRedLike(hex: string): boolean {
+	const r = parseInt(hex.slice(1, 3), 16);
+	const g = parseInt(hex.slice(3, 5), 16);
+	const b = parseInt(hex.slice(5, 7), 16);
+	return r > 180 && r > g * 1.4 && r > b * 1.4;
+}
+
+const SAFE_FALLBACK_COLORS = colors.filter((c) => !isRedLike(c));
+
 const SEVERITY_VARIANT_COLORS: Record<string, string> = {
 	TRACE: Color.BG_FOREST_600,
 	Trace: Color.BG_FOREST_500,
@@ -67,8 +76,13 @@ export function getColorsForSeverityLabels(
 	label: string,
 	index: number,
 ): string {
-	// Check if we have a direct mapping for this severity variant
-	const variantColor = SEVERITY_VARIANT_COLORS[label.trim()];
+	const trimmed = label.trim();
+
+	if (!trimmed) {
+		return Color.BG_SLATE_300;
+	}
+
+	const variantColor = SEVERITY_VARIANT_COLORS[trimmed];
 	if (variantColor) {
 		return variantColor;
 	}
@@ -103,5 +117,8 @@ export function getColorsForSeverityLabels(
 		return Color.BG_SAKURA_500;
 	}
 
-	return colors[index % colors.length] || themeColors.red;
+	return (
+		SAFE_FALLBACK_COLORS[index % SAFE_FALLBACK_COLORS.length] ||
+		Color.BG_SLATE_400
+	);
 }

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -111,23 +111,19 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		);
 
 		const itemContent = useCallback(
-			(index: number, log: Record<string, unknown>): JSX.Element => {
-				return (
-					<div key={log.id as string}>
-						<TableRow
-							tableColumns={tableColumns}
-							index={index}
-							log={log}
-							logs={tableViewProps.logs}
-							hasActions
-							fontSize={tableViewProps.fontSize}
-							onShowLogDetails={onSetActiveLog}
-							isActiveLog={activeLog?.id === log.id}
-							onClearActiveLog={onCloseActiveLog}
-						/>
-					</div>
-				);
-			},
+			(index: number, log: Record<string, unknown>): JSX.Element => (
+				<TableRow
+					tableColumns={tableColumns}
+					index={index}
+					log={log}
+					logs={tableViewProps.logs}
+					hasActions
+					fontSize={tableViewProps.fontSize}
+					onShowLogDetails={onSetActiveLog}
+					isActiveLog={activeLog?.id === log.id}
+					onClearActiveLog={onCloseActiveLog}
+				/>
+			),
 			[
 				tableColumns,
 				onSetActiveLog,

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -349,7 +349,7 @@ function Explorer(): JSX.Element {
 				isOneChartPerQuery={showOneChartPerQuery}
 				splitedQueries={splitedQueries}
 			/>
-			{isMetricDetailsOpen && (
+			{isMetricDetailsOpen && selectedMetricName && (
 				<MetricDetails
 					metricName={selectedMetricName}
 					isOpen={isMetricDetailsOpen}

frontend/src/container/MetricsExplorer/Explorer/RelatedMetricsCard.tsx

@@ -39,10 +39,7 @@ function RelatedMetricsCard({ metric }: RelatedMetricsCardProps): JSX.Element {
 					dataSource={DataSource.METRICS}
 				/>
 			)}
-			<DashboardsAndAlertsPopover
-				dashboards={metric.dashboards}
-				alerts={metric.alerts}
-			/>
+			<DashboardsAndAlertsPopover metricName={metric.name} />
 		</div>
 	);
 }

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

@@ -2,8 +2,8 @@
 import { useMemo, useState } from 'react';
 import { Card, Input, Select, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { InspectMetricsSeries } from 'api/metricsExplorer/getInspectMetricsDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import classNames from 'classnames';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { AggregatorFilter } from 'container/QueryBuilder/filters';
@@ -40,8 +40,10 @@ import {
  * returns true if the feature flag is enabled, false otherwise
  * Show the inspect button in  metrics explorer if the feature flag is enabled
  */
-export function isInspectEnabled(metricType: MetricType | undefined): boolean {
-	return metricType === MetricType.GAUGE;
+export function isInspectEnabled(
+	metricType: MetrictypesTypeDTO | undefined,
+): boolean {
+	return metricType === MetrictypesTypeDTO.gauge;
 }
 
 export function getAllTimestampsOfMetrics(

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

@@ -1,8 +1,17 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button, Collapse, Input, Menu, Popover, Typography } from 'antd';
+import {
+	Button,
+	Collapse,
+	Input,
+	Menu,
+	Popover,
+	Skeleton,
+	Typography,
+} from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
+import { useGetMetricAttributes } from 'api/generated/services/metrics';
 import { ResizeTable } from 'components/ResizeTable';
 import { DataType } from 'container/LogDetailedView/TableView';
 import { useNotifications } from 'hooks/useNotifications';
@@ -12,9 +21,33 @@ import { PANEL_TYPES } from '../../../constants/queryBuilder';
 import ROUTES from '../../../constants/routes';
 import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
-import { AllAttributesProps, AllAttributesValueProps } from './types';
+import MetricDetailsErrorState from './MetricDetailsErrorState';
+import {
+	AllAttributesEmptyTextProps,
+	AllAttributesProps,
+	AllAttributesValueProps,
+} from './types';
 import { getMetricDetailsQuery } from './utils';
 
+const ALL_ATTRIBUTES_KEY = 'all-attributes';
+
+function AllAttributesEmptyText({
+	isErrorAttributes,
+	refetchAttributes,
+}: AllAttributesEmptyTextProps): JSX.Element {
+	if (isErrorAttributes) {
+		return (
+			<div className="all-attributes-error-state">
+				<MetricDetailsErrorState
+					refetch={refetchAttributes}
+					errorMessage="Something went wrong while fetching attributes"
+				/>
+			</div>
+		);
+	}
+	return <Typography.Text>No attributes found</Typography.Text>;
+}
+
 export function AllAttributesValue({
 	filterKey,
 	filterValue,
@@ -110,13 +143,23 @@ export function AllAttributesValue({
 
 function AllAttributes({
 	metricName,
-	attributes,
 	metricType,
 }: AllAttributesProps): JSX.Element {
 	const [searchString, setSearchString] = useState('');
-	const [activeKey, setActiveKey] = useState<string | string[]>(
-		'all-attributes',
-	);
+	const [activeKey, setActiveKey] = useState<string[]>([ALL_ATTRIBUTES_KEY]);
+
+	const {
+		data: attributesData,
+		isLoading: isLoadingAttributes,
+		isError: isErrorAttributes,
+		refetch: refetchAttributes,
+	} = useGetMetricAttributes({
+		metricName,
+	});
+
+	const attributes = useMemo(() => attributesData?.data.attributes ?? [], [
+		attributesData,
+	]);
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
@@ -178,7 +221,7 @@ function AllAttributes({
 			attributes.filter(
 				(attribute) =>
 					attribute.key.toLowerCase().includes(searchString.toLowerCase()) ||
-					attribute.value.some((value) =>
+					attribute.values?.some((value) =>
 						value.toLowerCase().includes(searchString.toLowerCase()),
 					),
 			),
@@ -195,7 +238,7 @@ function AllAttributes({
 						},
 						value: {
 							key: attribute.key,
-							value: attribute.value,
+							value: attribute.values,
 						},
 				  }))
 				: [],
@@ -270,6 +313,7 @@ function AllAttributes({
 							onClick={(e): void => {
 								e.stopPropagation();
 							}}
+							disabled={isLoadingAttributes || isErrorAttributes}
 						/>
 					</div>
 				),
@@ -277,25 +321,49 @@ function AllAttributes({
 				children: (
 					<ResizeTable
 						columns={columns}
+						loading={isLoadingAttributes}
 						tableLayout="fixed"
 						dataSource={tableData}
 						pagination={false}
 						showHeader={false}
 						className="metrics-accordion-content all-attributes-content"
 						scroll={{ y: 600 }}
+						locale={{
+							emptyText: (
+								<AllAttributesEmptyText
+									isErrorAttributes={isErrorAttributes}
+									refetchAttributes={refetchAttributes}
+								/>
+							),
+						}}
 					/>
 				),
 			},
 		],
-		[columns, tableData, searchString],
+		[
+			searchString,
+			isLoadingAttributes,
+			isErrorAttributes,
+			columns,
+			tableData,
+			refetchAttributes,
+		],
 	);
 
+	if (isLoadingAttributes) {
+		return (
+			<div className="all-attributes-skeleton-container">
+				<Skeleton active paragraph={{ rows: 8 }} />
+			</div>
+		);
+	}
+
 	return (
 		<Collapse
 			bordered
-			className="metrics-accordion metrics-metadata-accordion"
+			className="metrics-accordion"
 			activeKey={activeKey}
-			onChange={(keys): void => setActiveKey(keys)}
+			onChange={(keys): void => setActiveKey(keys as string[])}
 			items={items}
 		/>
 	);

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

@@ -2,36 +2,84 @@ import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Dropdown, Typography } from 'antd';
+import { Skeleton } from 'antd/lib';
+import {
+	useGetMetricAlerts,
+	useGetMetricDashboards,
+} from 'api/generated/services/metrics';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { Bell, Grid } from 'lucide-react';
+import { pluralize } from 'utils/pluralize';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
 
 function DashboardsAndAlertsPopover({
-	alerts,
-	dashboards,
+	metricName,
 }: DashboardsAndAlertsPopoverProps): JSX.Element | null {
 	const { safeNavigate } = useSafeNavigate();
 	const params = useUrlQuery();
 
+	const {
+		data: alertsData,
+		isLoading: isLoadingAlerts,
+		isError: isErrorAlerts,
+	} = useGetMetricAlerts(
+		{
+			metricName,
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
+	);
+
+	const {
+		data: dashboardsData,
+		isLoading: isLoadingDashboards,
+		isError: isErrorDashboards,
+	} = useGetMetricDashboards(
+		{
+			metricName,
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
+	);
+
+	const alerts = useMemo(() => {
+		return alertsData?.data.alerts ?? [];
+	}, [alertsData]);
+
+	const dashboards = useMemo(() => {
+		const currentDashboards = dashboardsData?.data.dashboards ?? [];
+		// Remove duplicate dashboards
+		return currentDashboards.filter(
+			(dashboard, index, self) =>
+				index === self.findIndex((t) => t.dashboardId === dashboard.dashboardId),
+		);
+	}, [dashboardsData]);
+
 	const alertsPopoverContent = useMemo(() => {
 		if (alerts && alerts.length > 0) {
 			return alerts.map((alert) => ({
-				key: alert.alert_id,
+				key: alert.alertId,
 				label: (
 					<Typography.Link
-						key={alert.alert_id}
+						key={alert.alertId}
 						onClick={(): void => {
-							params.set(QueryParams.ruleId, alert.alert_id);
+							params.set(QueryParams.ruleId, alert.alertId);
 							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{alert.alert_name || alert.alert_id}
+						{alert.alertName || alert.alertId}
 					</Typography.Link>
 				),
 			}));
@@ -39,41 +87,44 @@ function DashboardsAndAlertsPopover({
 		return null;
 	}, [alerts, params]);
 
-	const uniqueDashboards = useMemo(
-		() =>
-			dashboards?.filter(
-				(item, index, self) =>
-					index === self.findIndex((t) => t.dashboard_id === item.dashboard_id),
-			),
-		[dashboards],
-	);
-
 	const dashboardsPopoverContent = useMemo(() => {
-		if (uniqueDashboards && uniqueDashboards.length > 0) {
-			return uniqueDashboards.map((dashboard) => ({
-				key: dashboard.dashboard_id,
+		if (dashboards && dashboards.length > 0) {
+			return dashboards.map((dashboard) => ({
+				key: dashboard.dashboardId,
 				label: (
 					<Typography.Link
-						key={dashboard.dashboard_id}
+						key={dashboard.dashboardId}
 						onClick={(): void => {
 							safeNavigate(
 								generatePath(ROUTES.DASHBOARD, {
-									dashboardId: dashboard.dashboard_id,
+									dashboardId: dashboard.dashboardId,
 								}),
 							);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{dashboard.dashboard_name || dashboard.dashboard_id}
+						{dashboard.dashboardName || dashboard.dashboardId}
 					</Typography.Link>
 				),
 			}));
 		}
 		return null;
-	}, [uniqueDashboards, safeNavigate]);
+	}, [dashboards, safeNavigate]);
 
-	if (!dashboardsPopoverContent && !alertsPopoverContent) {
-		return null;
+	if (isLoadingAlerts || isLoadingDashboards) {
+		return (
+			<div className="dashboards-and-alerts-popover-container">
+				<Skeleton title={false} paragraph={{ rows: 1 }} active />
+			</div>
+		);
+	}
+
+	// If there are no dashboards or alerts or both have errors, don't show the popover
+	const hidePopover =
+		(!dashboardsPopoverContent && !alertsPopoverContent) ||
+		(isErrorAlerts && isErrorDashboards);
+	if (hidePopover) {
+		return <div className="dashboards-and-alerts-popover-container" />;
 	}
 
 	return (
@@ -92,8 +143,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Grid size={12} color={Color.BG_SIENNA_500} />
 						<Typography.Text>
-							{uniqueDashboards?.length} dashboard
-							{uniqueDashboards?.length === 1 ? '' : 's'}
+							{pluralize(dashboards.length, 'dashboard')}
 						</Typography.Text>
 					</div>
 				</Dropdown>
@@ -112,7 +162,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Bell size={12} color={Color.BG_SAKURA_500} />
 						<Typography.Text>
-							{alerts?.length} alert {alerts?.length === 1 ? 'rule' : 'rules'}
+							{pluralize(alerts.length, 'alert rule')}
 						</Typography.Text>
 					</div>
 				</Dropdown>

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

@@ -0,0 +1,123 @@
+import { Color } from '@signozhq/design-tokens';
+import { Button, Skeleton, Tooltip, Typography } from 'antd';
+import { useGetMetricHighlights } from 'api/generated/services/metrics';
+import { InfoIcon } from 'lucide-react';
+
+import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
+import { HighlightsProps } from './types';
+import {
+	formatNumberToCompactFormat,
+	formatTimestampToReadableDate,
+} from './utils';
+
+function Highlights({ metricName }: HighlightsProps): JSX.Element {
+	const {
+		data: metricHighlightsData,
+		isLoading: isLoadingMetricHighlights,
+		isError: isErrorMetricHighlights,
+		refetch: refetchMetricHighlights,
+	} = useGetMetricHighlights(
+		{
+			metricName,
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
+	);
+
+	const metricHighlights = metricHighlightsData?.data;
+
+	const timeSeriesActive = formatNumberToCompactFormat(
+		metricHighlights?.activeTimeSeries,
+	);
+	const timeSeriesTotal = formatNumberToCompactFormat(
+		metricHighlights?.totalTimeSeries,
+	);
+	const lastReceivedText = formatTimestampToReadableDate(
+		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">
+				<div
+					className="metric-highlights-error-state"
+					data-testid="metric-highlights-error-state"
+				>
+					<InfoIcon size={16} color={Color.BG_CHERRY_500} />
+					<Typography.Text>
+						Something went wrong while fetching metric highlights
+					</Typography.Text>
+					<Button
+						type="link"
+						size="large"
+						onClick={(): void => {
+							refetchMetricHighlights();
+						}}
+					>
+						Retry ?
+					</Button>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="metric-details-content-grid">
+			<div className="labels-row">
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					SAMPLES
+				</Typography.Text>
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					TIME SERIES
+				</Typography.Text>
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					LAST RECEIVED
+				</Typography.Text>
+			</div>
+			<div className="values-row">
+				<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>
+	);
+}
+
+export default Highlights;

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

@@ -1,45 +1,58 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button, Collapse, Input, Select, 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 { Temporality } from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
-import { UpdateMetricMetadataProps } from 'api/metricsExplorer/updateMetricMetadata';
+import {
+	invalidateGetMetricMetadata,
+	invalidateListMetrics,
+	useUpdateMetricMetadata,
+} from 'api/generated/services/metrics';
+import {
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
 import { ResizeTable } from 'components/ResizeTable';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
 import { DataType } from 'container/LogDetailedView/TableView';
-import { useUpdateMetricMetadata } from 'hooks/metricsExplorer/useUpdateMetricMetadata';
 import { useNotifications } from 'hooks/useNotifications';
 import { Edit2, Save, X } from 'lucide-react';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
+import { MetricTypeViewRenderer } from '../Summary/utils';
 import {
-	METRIC_TYPE_LABEL_MAP,
-	METRIC_TYPE_VALUES_MAP,
-} from '../Summary/constants';
-import { MetricTypeRenderer } from '../Summary/utils';
-import { METRIC_METADATA_KEYS } from './constants';
-import { MetadataProps } from './types';
-import { determineIsMonotonic } from './utils';
+	METRIC_METADATA_KEYS,
+	METRIC_METADATA_TEMPORALITY_OPTIONS,
+	METRIC_METADATA_TYPE_OPTIONS,
+	METRIC_METADATA_UPDATE_ERROR_MESSAGE,
+} from './constants';
+import MetricDetailsErrorState from './MetricDetailsErrorState';
+import { MetadataProps, MetricMetadataFormState, TableFields } from './types';
+import { transformUpdateMetricMetadataRequest } from './utils';
 
 function Metadata({
 	metricName,
 	metadata,
-	refetchMetricDetails,
+	isErrorMetricMetadata,
+	isLoadingMetricMetadata,
+	refetchMetricMetadata,
 }: MetadataProps): JSX.Element {
 	const [isEditing, setIsEditing] = useState(false);
+
 	const [
-		metricMetadata,
-		setMetricMetadata,
-	] = useState<UpdateMetricMetadataProps>({
-		metricType: metadata?.metric_type || MetricType.SUM,
-		description: metadata?.description || '',
-		temporality: metadata?.temporality,
-		unit: metadata?.unit,
+		metricMetadataState,
+		setMetricMetadataState,
+	] = useState<MetricMetadataFormState>({
+		type: MetrictypesTypeDTO.sum,
+		description: '',
+		temporality: MetrictypesTemporalityDTO.unspecified,
+		unit: '',
+		isMonotonic: false,
 	});
 	const { notifications } = useNotifications();
 	const {
@@ -51,110 +64,135 @@ function Metadata({
 	);
 	const queryClient = useQueryClient();
 
+	// Initialize state from metadata api data
+	useEffect(() => {
+		if (metadata) {
+			setMetricMetadataState({
+				type: metadata.type,
+				description: metadata.description,
+				temporality: metadata.temporality,
+				unit: metadata.unit,
+				isMonotonic: metadata.isMonotonic,
+			});
+		}
+	}, [metadata]);
+
 	const tableData = useMemo(
 		() =>
 			metadata
-				? Object.keys({
-						...metadata,
-						temporality: metadata?.temporality,
-				  })
-						// Filter out monotonic as user input is not required
-						.filter((key) => key !== 'monotonic')
-						.map((key) => ({
+				? Object.keys(metadata).map((key) => ({
+						key,
+						value: {
+							value: metadata[key as keyof typeof metadata],
 							key,
-							value: {
-								value: metadata[key as keyof typeof metadata],
-								key,
-							},
-						}))
+						},
+				  }))
 				: [],
 		[metadata],
 	);
 
 	// Render un-editable field value
-	const renderUneditableField = useCallback((key: string, value: string) => {
-		if (key === 'metric_type') {
-			return <MetricTypeRenderer type={value as MetricType} />;
-		}
-		let fieldValue = value;
-		if (key === 'unit') {
-			fieldValue = getUniversalNameFromMetricUnit(value);
-		}
-		return <FieldRenderer field={fieldValue || '-'} />;
-	}, []);
+	const renderUneditableField = useCallback(
+		(key: keyof MetricMetadataFormState, value: string) => {
+			if (isErrorMetricMetadata) {
+				return <FieldRenderer field="-" />;
+			}
+			if (key === TableFields.TYPE) {
+				return <MetricTypeViewRenderer type={value as MetrictypesTypeDTO} />;
+			}
+			if (key === TableFields.IS_MONOTONIC) {
+				return <FieldRenderer field={value ? 'Yes' : 'No'} />;
+			}
+			if (key === TableFields.Temporality) {
+				const temporality = METRIC_METADATA_TEMPORALITY_OPTIONS.find(
+					(option) => option.value === value,
+				);
+				return <FieldRenderer field={temporality?.label || '-'} />;
+			}
+			let fieldValue = value;
+			if (key === TableFields.UNIT) {
+				fieldValue = getUniversalNameFromMetricUnit(value);
+			}
+			return <FieldRenderer field={fieldValue || '-'} />;
+		},
+		[isErrorMetricMetadata],
+	);
 
 	const renderColumnValue = useCallback(
-		(field: { value: string; key: string }): JSX.Element => {
+		(field: {
+			value: string;
+			key: keyof MetricMetadataFormState;
+		}): JSX.Element => {
 			if (!isEditing) {
 				return renderUneditableField(field.key, field.value);
 			}
 
 			// Don't allow editing of unit if it's already set
-			const metricUnitAlreadySet = field.key === 'unit' && Boolean(metadata?.unit);
+			const metricUnitAlreadySet =
+				field.key === TableFields.UNIT && Boolean(metadata?.unit);
 			if (metricUnitAlreadySet) {
 				return renderUneditableField(field.key, field.value);
 			}
 
-			if (field.key === 'metric_type') {
+			// Monotonic is not editable
+			if (field.key === TableFields.IS_MONOTONIC) {
+				return renderUneditableField(field.key, field.value);
+			}
+
+			if (field.key === TableFields.TYPE) {
 				return (
 					<Select
 						data-testid="metric-type-select"
-						options={Object.entries(METRIC_TYPE_VALUES_MAP).map(([key]) => ({
-							value: key,
-							label: METRIC_TYPE_LABEL_MAP[key as MetricType],
-						}))}
-						value={metricMetadata.metricType}
+						options={METRIC_METADATA_TYPE_OPTIONS}
+						value={metricMetadataState.type}
 						onChange={(value): void => {
-							setMetricMetadata((prev) => ({
+							setMetricMetadataState((prev) => ({
 								...prev,
-								metricType: value as MetricType,
+								type: value,
 							}));
 						}}
 					/>
 				);
 			}
-			if (field.key === 'unit') {
+			if (field.key === TableFields.UNIT) {
 				return (
 					<YAxisUnitSelector
-						value={metricMetadata.unit}
+						value={metricMetadataState.unit}
 						onChange={(value): void => {
-							setMetricMetadata((prev) => ({ ...prev, unit: value }));
+							setMetricMetadataState((prev) => ({ ...prev, unit: value }));
 						}}
 						data-testid="unit-select"
 						source={YAxisSource.EXPLORER}
 					/>
 				);
 			}
-			if (field.key === 'temporality') {
+			if (field.key === TableFields.Temporality) {
+				const temporalityValue =
+					metricMetadataState.temporality === MetrictypesTemporalityDTO.unspecified
+						? undefined
+						: metricMetadataState.temporality;
 				return (
 					<Select
 						data-testid="temporality-select"
-						options={Object.values(Temporality).map((key) => ({
-							value: key,
-							label: key,
-						}))}
-						value={metricMetadata.temporality}
+						options={METRIC_METADATA_TEMPORALITY_OPTIONS}
+						value={temporalityValue}
 						onChange={(value): void => {
-							setMetricMetadata((prev) => ({
+							setMetricMetadataState((prev) => ({
 								...prev,
-								temporality: value as Temporality,
+								temporality: value,
 							}));
 						}}
 					/>
 				);
 			}
-			if (field.key === 'description') {
+			if (field.key === TableFields.DESCRIPTION) {
 				return (
 					<Input
 						data-testid="description-input"
 						name={field.key}
-						defaultValue={
-							metricMetadata[
-								field.key as Exclude<keyof UpdateMetricMetadataProps, 'isMonotonic'>
-							]
-						}
+						defaultValue={metricMetadataState.description}
 						onChange={(e): void => {
-							setMetricMetadata((prev) => ({
+							setMetricMetadataState((prev) => ({
 								...prev,
 								[field.key]: e.target.value,
 							}));
@@ -164,7 +202,7 @@ function Metadata({
 			}
 			return <FieldRenderer field="-" />;
 		},
-		[isEditing, metadata?.unit, metricMetadata, renderUneditableField],
+		[isEditing, metadata?.unit, metricMetadataState, renderUneditableField],
 	);
 
 	const columns: ColumnsType<DataType> = useMemo(
@@ -201,52 +239,61 @@ function Metadata({
 	const handleSave = useCallback(() => {
 		updateMetricMetadata(
 			{
-				metricName,
-				payload: {
-					...metricMetadata,
-					isMonotonic: determineIsMonotonic(
-						metricMetadata.metricType,
-						metricMetadata.temporality,
-					),
+				pathParams: {
+					metricName,
 				},
+				data: transformUpdateMetricMetadataRequest(metricName, metricMetadataState),
 			},
 			{
-				onSuccess: (response): void => {
-					if (response?.statusCode === 200) {
-						logEvent(MetricsExplorerEvents.MetricMetadataUpdated, {
-							[MetricsExplorerEventKeys.MetricName]: metricName,
-							[MetricsExplorerEventKeys.Tab]: 'summary',
-							[MetricsExplorerEventKeys.Modal]: 'metric-details',
-						});
-						notifications.success({
-							message: 'Metadata updated successfully',
-						});
-						refetchMetricDetails();
-						setIsEditing(false);
-						queryClient.invalidateQueries(['metricsList']);
-					} else {
-						notifications.error({
-							message:
-								'Failed to update metadata, please try again. If the issue persists, please contact support.',
-						});
-					}
+				onSuccess: (): void => {
+					logEvent(MetricsExplorerEvents.MetricMetadataUpdated, {
+						[MetricsExplorerEventKeys.MetricName]: metricName,
+						[MetricsExplorerEventKeys.Tab]: 'summary',
+						[MetricsExplorerEventKeys.Modal]: 'metric-details',
+					});
+					notifications.success({
+						message: 'Metadata updated successfully',
+					});
+					setIsEditing(false);
+					invalidateListMetrics(queryClient);
+					invalidateGetMetricMetadata(queryClient, {
+						metricName,
+					});
 				},
-				onError: (): void =>
+				onError: (error): void => {
+					const errorMessage = (error as AxiosError<RenderErrorResponseDTO>).response
+						?.data.error?.message;
 					notifications.error({
-						message:
-							'Failed to update metadata, please try again. If the issue persists, please contact support.',
-					}),
+						message: errorMessage || METRIC_METADATA_UPDATE_ERROR_MESSAGE,
+					});
+				},
 			},
 		);
 	}, [
 		updateMetricMetadata,
 		metricName,
-		metricMetadata,
+		metricMetadataState,
 		notifications,
-		refetchMetricDetails,
 		queryClient,
 	]);
 
+	const cancelEdit = useCallback(
+		(e: React.MouseEvent<HTMLElement, MouseEvent>): void => {
+			e.stopPropagation();
+			if (metadata) {
+				setMetricMetadataState({
+					type: metadata.type,
+					description: metadata.description,
+					unit: metadata.unit,
+					temporality: metadata.temporality,
+					isMonotonic: metadata.isMonotonic,
+				});
+			}
+			setIsEditing(false);
+		},
+		[metadata],
+	);
+
 	const actionButton = useMemo(() => {
 		if (isEditing) {
 			return (
@@ -254,10 +301,7 @@ function Metadata({
 					<Button
 						className="action-button"
 						type="text"
-						onClick={(e): void => {
-							e.stopPropagation();
-							setIsEditing(false);
-						}}
+						onClick={cancelEdit}
 						disabled={isUpdatingMetricsMetadata}
 					>
 						<X size={14} />
@@ -278,6 +322,9 @@ function Metadata({
 				</div>
 			);
 		}
+		if (isErrorMetricMetadata) {
+			return null;
+		}
 		return (
 			<div className="action-menu">
 				<Button
@@ -294,7 +341,13 @@ function Metadata({
 				</Button>
 			</div>
 		);
-	}, [handleSave, isEditing, isUpdatingMetricsMetadata]);
+	}, [
+		isEditing,
+		isErrorMetricMetadata,
+		isUpdatingMetricsMetadata,
+		cancelEdit,
+		handleSave,
+	]);
 
 	const items = useMemo(
 		() => [
@@ -306,7 +359,14 @@ function Metadata({
 					</div>
 				),
 				key: 'metric-metadata',
-				children: (
+				children: isErrorMetricMetadata ? (
+					<div className="metric-metadata-error-state">
+						<MetricDetailsErrorState
+							refetch={refetchMetricMetadata}
+							errorMessage="Something went wrong while fetching metric metadata"
+						/>
+					</div>
+				) : (
 					<ResizeTable
 						columns={columns}
 						tableLayout="fixed"
@@ -318,9 +378,23 @@ function Metadata({
 				),
 			},
 		],
-		[actionButton, columns, tableData],
+		[
+			actionButton,
+			columns,
+			isErrorMetricMetadata,
+			refetchMetricMetadata,
+			tableData,
+		],
 	);
 
+	if (isLoadingMetricMetadata) {
+		return (
+			<div className="metrics-metadata-skeleton-container">
+				<Skeleton active paragraph={{ rows: 8 }} />
+			</div>
+		);
+	}
+
 	return (
 		<Collapse
 			bordered

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

@@ -38,7 +38,12 @@
 		flex-direction: column;
 		gap: 12px;
 
+		.metrics-metadata-error {
+			padding: 16px !important;
+		}
+
 		.metric-details-content-grid {
+			height: 50px;
 			.labels-row,
 			.values-row {
 				display: grid;
@@ -47,6 +52,18 @@
 				align-items: center;
 			}
 
+			.metric-highlights-error-state {
+				display: flex;
+				gap: 8px;
+				height: 100%;
+				width: 100%;
+				align-items: center;
+
+				.ant-btn {
+					padding: 2px 4px;
+				}
+			}
+
 			.labels-row {
 				margin-bottom: 8px;
 
@@ -72,6 +89,7 @@
 		.dashboards-and-alerts-popover-container {
 			display: flex;
 			gap: 16px;
+			height: 32px;
 
 			.dashboards-and-alerts-popover {
 				border-radius: 20px;
@@ -102,7 +120,19 @@
 			}
 		}
 
+		.metrics-metadata-skeleton-container {
+			height: 330px;
+		}
+
+		.all-attributes-skeleton-container {
+			height: 600px;
+		}
+
 		.metrics-accordion {
+			.all-attributes-error-state {
+				height: 300px;
+			}
+
 			.ant-table-body {
 				&::-webkit-scrollbar {
 					width: 2px;
@@ -148,7 +178,6 @@
 
 				.all-attributes-search-input {
 					width: 300px;
-					border: 1px solid var(--bg-slate-300);
 				}
 			}
 
@@ -161,6 +190,7 @@
 							.ant-typography:first-child {
 								font-family: 'Geist Mono';
 								color: var(--bg-robin-400);
+								background-color: transparent;
 							}
 						}
 						.all-attributes-contribution {
@@ -217,6 +247,10 @@
 
 			.ant-collapse-content-box {
 				padding: 0;
+
+				.metric-metadata-error-state {
+					height: 267px;
+				}
 			}
 
 			.ant-collapse-header {
@@ -237,6 +271,7 @@
 			}
 
 			.metric-metadata-value {
+				height: 67px;
 				background: rgba(22, 25, 34, 0.4);
 				overflow-x: scroll;
 				.field-renderer-container {
@@ -330,18 +365,26 @@
 	.metric-details-content {
 		.metrics-accordion {
 			.metrics-accordion-header {
-				.action-button {
-					.ant-typography {
-						color: var(--bg-slate-400);
+				.action-menu {
+					.action-button {
+						.ant-typography {
+							color: var(--bg-slate-400);
+						}
 					}
 				}
 			}
 
 			.metrics-accordion-content {
 				.metric-metadata-key {
+					.field-renderer-container {
+						.label {
+							color: var(--bg-slate-300);
+						}
+					}
+
 					.all-attributes-key {
 						.ant-typography:last-child {
-							color: var(--bg-slate-400);
+							color: var(--bg-vanilla-200);
 							background-color: var(--bg-robin-300);
 						}
 					}
@@ -395,3 +438,13 @@
 		}
 	}
 }
+
+.metric-details-error-state {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	width: 100%;
+}

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

@@ -1,16 +1,8 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import {
-	Button,
-	Divider,
-	Drawer,
-	Empty,
-	Skeleton,
-	Tooltip,
-	Typography,
-} from 'antd';
+import { Button, Divider, Drawer, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { useGetMetricDetails } from 'hooks/metricsExplorer/useGetMetricDetails';
+import { useGetMetricMetadata } from 'api/generated/services/metrics';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Compass, Crosshair, X } from 'lucide-react';
 
@@ -19,16 +11,12 @@ import ROUTES from '../../../constants/routes';
 import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import { isInspectEnabled } from '../Inspect/utils';
-import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
 import AllAttributes from './AllAttributes';
 import DashboardsAndAlertsPopover from './DashboardsAndAlertsPopover';
+import Highlights from './Highlights';
 import Metadata from './Metadata';
 import { MetricDetailsProps } from './types';
-import {
-	formatNumberToCompactFormat,
-	formatTimestampToReadableDate,
-	getMetricDetailsQuery,
-} from './utils';
+import { getMetricDetailsQuery } from './utils';
 
 import './MetricDetails.styles.scss';
 import '../Summary/Summary.styles.scss';
@@ -43,55 +31,49 @@ function MetricDetails({
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
 	const {
-		data,
-		isLoading,
-		isFetching,
-		error: metricDetailsError,
-		refetch: refetchMetricDetails,
-	} = useGetMetricDetails(metricName ?? '', {
-		enabled: !!metricName,
-	});
-
-	const metric = data?.payload?.data;
-
-	const lastReceived = useMemo(() => {
-		if (!metric) {
-			return null;
-		}
-		return formatTimestampToReadableDate(metric.lastReceived);
-	}, [metric]);
-
-	const showInspectFeature = useMemo(
-		() => isInspectEnabled(metric?.metadata?.metric_type),
-		[metric],
+		data: metricMetadataResponse,
+		isLoading: isLoadingMetricMetadata,
+		isError: isErrorMetricMetadata,
+		refetch: refetchMetricMetadata,
+	} = useGetMetricMetadata(
+		{
+			metricName,
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
 	);
 
-	const isMetricDetailsLoading = isLoading || isFetching;
-
-	const timeSeries = useMemo(() => {
-		if (!metric) {
+	const metadata = useMemo(() => {
+		if (!metricMetadataResponse) {
 			return null;
 		}
-		const timeSeriesActive = formatNumberToCompactFormat(metric.timeSeriesActive);
-		const timeSeriesTotal = formatNumberToCompactFormat(metric.timeSeriesTotal);
+		const {
+			type,
+			description,
+			unit,
+			temporality,
+			isMonotonic,
+		} = metricMetadataResponse.data;
 
-		return (
-			<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>
-		);
-	}, [metric]);
+		return {
+			type,
+			description,
+			unit,
+			temporality,
+			isMonotonic,
+		};
+	}, [metricMetadataResponse]);
+
+	const showInspectFeature = useMemo(() => isInspectEnabled(metadata?.type), [
+		metadata?.type,
+	]);
 
 	const goToMetricsExplorerwithSelectedMetric = useCallback(() => {
 		if (metricName) {
-			const compositeQuery = getMetricDetailsQuery(
-				metricName,
-				metric?.metadata?.metric_type,
-			);
+			const compositeQuery = getMetricDetailsQuery(metricName, metadata?.type);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
 				{
@@ -107,9 +89,7 @@ function MetricDetails({
 				[MetricsExplorerEventKeys.Modal]: 'metric-details',
 			});
 		}
-	}, [metricName, handleExplorerTabChange, metric?.metadata?.metric_type]);
-
-	const isMetricDetailsError = metricDetailsError || !metric;
+	}, [metricName, handleExplorerTabChange, metadata?.type]);
 
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.ModalOpened, {
@@ -117,6 +97,9 @@ function MetricDetails({
 		});
 	}, []);
 
+	const isActionButtonDisabled =
+		!metricName || isLoadingMetricMetadata || isErrorMetricMetadata;
+
 	return (
 		<Drawer
 			width="60%"
@@ -124,13 +107,13 @@ function MetricDetails({
 				<div className="metric-details-header">
 					<div className="metric-details-title">
 						<Divider type="vertical" />
-						<Typography.Text>{metric?.name}</Typography.Text>
+						<Typography.Text>{metricName}</Typography.Text>
 					</div>
 					<div className="metric-details-header-buttons">
 						<Button
 							onClick={goToMetricsExplorerwithSelectedMetric}
 							icon={<Compass size={16} />}
-							disabled={!metricName}
+							disabled={isActionButtonDisabled}
 							data-testid="open-in-explorer-button"
 						>
 							Open in Explorer
@@ -140,10 +123,11 @@ function MetricDetails({
 							<Button
 								className="inspect-metrics-button"
 								aria-label="Inspect Metric"
+								disabled={isActionButtonDisabled}
 								icon={<Crosshair size={18} />}
 								onClick={(): void => {
-									if (metric?.name) {
-										openInspectModal(metric.name);
+									if (metricName) {
+										openInspectModal(metricName);
 									}
 								}}
 								data-testid="inspect-metric-button"
@@ -163,60 +147,18 @@ function MetricDetails({
 			destroyOnClose
 			closeIcon={<X size={16} />}
 		>
-			{isMetricDetailsLoading && (
-				<div data-testid="metric-details-skeleton">
-					<Skeleton active />
-				</div>
-			)}
-			{isMetricDetailsError && !isMetricDetailsLoading && (
-				<Empty description="Error fetching metric details" />
-			)}
-			{!isMetricDetailsLoading && !isMetricDetailsError && (
-				<div className="metric-details-content">
-					<div className="metric-details-content-grid">
-						<div className="labels-row">
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								SAMPLES
-							</Typography.Text>
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								TIME SERIES
-							</Typography.Text>
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								LAST RECEIVED
-							</Typography.Text>
-						</div>
-						<div className="values-row">
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={metric?.samples.toLocaleString()}>
-									{formatNumberIntoHumanReadableFormat(metric?.samples)}
-								</Tooltip>
-							</Typography.Text>
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={timeSeries}>{timeSeries}</Tooltip>
-							</Typography.Text>
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={lastReceived}>{lastReceived}</Tooltip>
-							</Typography.Text>
-						</div>
-					</div>
-					<DashboardsAndAlertsPopover
-						dashboards={metric.dashboards}
-						alerts={metric.alerts}
-					/>
-					<Metadata
-						metricName={metric?.name}
-						metadata={metric.metadata}
-						refetchMetricDetails={refetchMetricDetails}
-					/>
-					{metric.attributes && (
-						<AllAttributes
-							metricName={metric?.name}
-							attributes={metric.attributes}
-							metricType={metric?.metadata?.metric_type}
-						/>
-					)}
-				</div>
-			)}
+			<div className="metric-details-content">
+				<Highlights metricName={metricName} />
+				<DashboardsAndAlertsPopover metricName={metricName} />
+				<Metadata
+					metricName={metricName}
+					metadata={metadata}
+					isErrorMetricMetadata={isErrorMetricMetadata}
+					isLoadingMetricMetadata={isLoadingMetricMetadata}
+					refetchMetricMetadata={refetchMetricMetadata}
+				/>
+				<AllAttributes metricName={metricName} metricType={metadata?.type} />
+			</div>
 		</Drawer>
 	);
 }

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

@@ -0,0 +1,20 @@
+import { Color } from '@signozhq/design-tokens';
+import { Button, Typography } from 'antd';
+import { InfoIcon } from 'lucide-react';
+
+import { MetricDetailsErrorStateProps } from './types';
+
+function MetricDetailsErrorState({
+	refetch,
+	errorMessage,
+}: MetricDetailsErrorStateProps): JSX.Element {
+	return (
+		<div className="metric-details-error-state">
+			<InfoIcon size={20} color={Color.BG_CHERRY_500} />
+			<Typography.Text>{errorMessage}</Typography.Text>
+			{refetch && <Button onClick={refetch}>Retry</Button>}
+		</div>
+	);
+}
+
+export default MetricDetailsErrorState;

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/AllAttributes.test.tsx

@@ -1,11 +1,13 @@
 import * as reactUseHooks from 'react-use';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+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 { MetricDetailsAttribute } from '../../../../api/metricsExplorer/getMetricDetails';
 import ROUTES from '../../../../constants/routes';
 import AllAttributes, { AllAttributesValue } from '../AllAttributes';
+import { getMockMetricAttributesData, MOCK_METRIC_NAME } from './testUtlls';
 
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
@@ -20,33 +22,28 @@ jest
 		handleExplorerTabChange: mockHandleExplorerTabChange,
 	});
 
-const mockMetricName = 'test-metric';
-const mockMetricType = MetricType.GAUGE;
-const mockAttributes: MetricDetailsAttribute[] = [
-	{
-		key: 'attribute1',
-		value: ['value1', 'value2'],
-		valueCount: 2,
-	},
-	{
-		key: 'attribute2',
-		value: ['value3'],
-		valueCount: 1,
-	},
-];
-
 const mockUseCopyToClipboard = jest.fn();
 jest
 	.spyOn(reactUseHooks, 'useCopyToClipboard')
 	.mockReturnValue([{ value: 'value1' }, mockUseCopyToClipboard] as any);
 
+const useGetMetricAttributesMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricAttributes',
+);
+
 describe('AllAttributes', () => {
+	beforeEach(() => {
+		useGetMetricAttributesMock.mockReturnValue({
+			...getMockMetricAttributesData(),
+		});
+	});
+
 	it('renders attributes section with title', () => {
 		render(
 			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
 			/>,
 		);
 
@@ -56,9 +53,8 @@ describe('AllAttributes', () => {
 	it('renders all attribute keys and values', () => {
 		render(
 			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
 			/>,
 		);
 
@@ -75,9 +71,8 @@ describe('AllAttributes', () => {
 	it('renders value counts correctly', () => {
 		render(
 			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
 			/>,
 		);
 
@@ -86,41 +81,44 @@ describe('AllAttributes', () => {
 	});
 
 	it('handles empty attributes array', () => {
+		useGetMetricAttributesMock.mockReturnValue({
+			...getMockMetricAttributesData({
+				data: {
+					attributes: [],
+					totalKeys: 0,
+				},
+			}),
+		});
 		render(
 			<AllAttributes
-				metricName={mockMetricName}
-				attributes={[]}
-				metricType={mockMetricType}
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
 			/>,
 		);
 
 		expect(screen.getByText('All Attributes')).toBeInTheDocument();
-		expect(screen.queryByText('No data')).toBeInTheDocument();
+		expect(screen.getByText('No attributes found')).toBeInTheDocument();
 	});
 
-	it('clicking on an attribute key opens the explorer with the attribute filter applied', () => {
+	it('clicking on an attribute key opens the explorer with the attribute filter applied', async () => {
 		render(
 			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
 			/>,
 		);
-		fireEvent.click(screen.getByText('attribute1'));
+		await userEvent.click(screen.getByText('attribute1'));
 		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
 	});
 
-	it('filters attributes based on search input', () => {
+	it('filters attributes based on search input', async () => {
 		render(
 			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
 			/>,
 		);
-		fireEvent.change(screen.getByPlaceholderText('Search'), {
-			target: { value: 'value1' },
-		});
+		await userEvent.type(screen.getByPlaceholderText('Search'), 'value1');
 
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 		expect(screen.getByText('value1')).toBeInTheDocument();
@@ -144,7 +142,7 @@ describe('AllAttributesValue', () => {
 		expect(screen.getByText('value2')).toBeInTheDocument();
 	});
 
-	it('loads more attributes when show more button is clicked', () => {
+	it('loads more attributes when show more button is clicked', async () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -155,7 +153,7 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.queryByText('value6')).not.toBeInTheDocument();
-		fireEvent.click(screen.getByText('Show More'));
+		await userEvent.click(screen.getByText('Show More'));
 		expect(screen.getByText('value6')).toBeInTheDocument();
 	});
 
@@ -172,7 +170,7 @@ describe('AllAttributesValue', () => {
 		expect(screen.queryByText('Show More')).not.toBeInTheDocument();
 	});
 
-	it('copy button should copy the attribute value to the clipboard', () => {
+	it('copy button should copy the attribute value to the clipboard', async () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -183,13 +181,13 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.getByText('value1')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('value1'));
+		await userEvent.click(screen.getByText('value1'));
 		expect(screen.getByText('Copy Attribute')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('Copy Attribute'));
+		await userEvent.click(screen.getByText('Copy Attribute'));
 		expect(mockUseCopyToClipboard).toHaveBeenCalledWith('value1');
 	});
 
-	it('explorer button should go to metrics explore with the attribute filter applied', () => {
+	it('explorer button should go to metrics explore with the attribute filter applied', async () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -200,10 +198,10 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.getByText('value1')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('value1'));
+		await userEvent.click(screen.getByText('value1'));
 
 		expect(screen.getByText('Open in Explorer')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('Open in Explorer'));
+		await userEvent.click(screen.getByText('Open in Explorer'));
 		expect(mockGoToMetricsExploreWithAppliedAttribute).toHaveBeenCalledWith(
 			'attribute1',
 			'value1',

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/DashboardsAndAlertsPopover.test.tsx

@@ -1,26 +1,18 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import { QueryParams } from 'constants/query';
+import { userEvent } from 'tests/test-utils';
 
 import DashboardsAndAlertsPopover from '../DashboardsAndAlertsPopover';
-
-const mockAlert1 = {
-	alert_id: '1',
-	alert_name: 'Alert 1',
-};
-const mockAlert2 = {
-	alert_id: '2',
-	alert_name: 'Alert 2',
-};
-const mockDashboard1 = {
-	dashboard_id: '1',
-	dashboard_name: 'Dashboard 1',
-};
-const mockDashboard2 = {
-	dashboard_id: '2',
-	dashboard_name: 'Dashboard 2',
-};
-const mockAlerts = [mockAlert1, mockAlert2];
-const mockDashboards = [mockDashboard1, mockDashboard2];
+import {
+	getMockAlertsData,
+	getMockDashboardsData,
+	MOCK_ALERT_1,
+	MOCK_ALERT_2,
+	MOCK_DASHBOARD_1,
+	MOCK_DASHBOARD_2,
+	MOCK_METRIC_NAME,
+} from './testUtlls';
 
 const mockSafeNavigate = jest.fn();
 jest.mock('hooks/useSafeNavigate', () => ({
@@ -28,7 +20,6 @@ jest.mock('hooks/useSafeNavigate', () => ({
 		safeNavigate: mockSafeNavigate,
 	}),
 }));
-
 const mockSetQuery = jest.fn();
 const mockUrlQuery = {
 	set: mockSetQuery,
@@ -39,125 +30,156 @@ jest.mock('hooks/useUrlQuery', () => ({
 	default: jest.fn(() => mockUrlQuery),
 }));
 
-describe('DashboardsAndAlertsPopover', () => {
-	it('renders the popover correctly with multiple dashboards and alerts', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={mockDashboards}
-			/>,
-		);
+const useGetMetricAlertsMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricAlerts',
+);
+const useGetMetricDashboardsMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricDashboards',
+);
 
-		expect(
-			screen.getByText(`${mockDashboards.length} dashboards`),
-		).toBeInTheDocument();
-		expect(
-			screen.getByText(`${mockAlerts.length} alert rules`),
-		).toBeInTheDocument();
+describe('DashboardsAndAlertsPopover', () => {
+	beforeEach(() => {
+		useGetMetricAlertsMock.mockReturnValue(getMockAlertsData());
+		useGetMetricDashboardsMock.mockReturnValue(getMockDashboardsData());
+	});
+
+	it('renders the popover correctly with multiple dashboards and alerts', () => {
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		expect(screen.getByText(`2 dashboards`)).toBeInTheDocument();
+		expect(screen.getByText(`2 alert rules`)).toBeInTheDocument();
 	});
 
 	it('renders null with no dashboards and alerts', () => {
-		const { container } = render(
-			<DashboardsAndAlertsPopover alerts={[]} dashboards={[]} />,
+		useGetMetricAlertsMock.mockReturnValue(
+			getMockAlertsData({
+				data: {
+					alerts: [],
+				},
+			}),
 		);
-		expect(container).toBeEmptyDOMElement();
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: {
+					dashboards: [],
+				},
+			}),
+		);
+
+		const { container } = render(
+			<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />,
+		);
+		expect(
+			container.querySelector('dashboards-and-alerts-popover-container'),
+		).toBeNull();
 	});
 
 	it('renders popover with single dashboard and alert', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={[mockAlert1]}
-				dashboards={[mockDashboard1]}
-			/>,
+		useGetMetricAlertsMock.mockReturnValue(
+			getMockAlertsData({
+				data: {
+					alerts: [MOCK_ALERT_1],
+				},
+			}),
 		);
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: {
+					dashboards: [MOCK_DASHBOARD_1],
+				},
+			}),
+		);
+
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
 		expect(screen.getByText(`1 dashboard`)).toBeInTheDocument();
 		expect(screen.getByText(`1 alert rule`)).toBeInTheDocument();
 	});
 
-	it('renders popover with dashboard id if name is not available', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={[{ ...mockDashboard1, dashboard_name: undefined } as any]}
-			/>,
+	it('renders popover with dashboard id if name is not available', async () => {
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: {
+					dashboards: [{ ...MOCK_DASHBOARD_1, dashboardName: '' }],
+				},
+			}),
 		);
 
-		fireEvent.click(screen.getByText(`1 dashboard`));
-		expect(screen.getByText(mockDashboard1.dashboard_id)).toBeInTheDocument();
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		await userEvent.click(screen.getByText(`1 dashboard`));
+		expect(screen.getByText(MOCK_DASHBOARD_1.dashboardId)).toBeInTheDocument();
 	});
 
-	it('renders popover with alert id if name is not available', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={[{ ...mockAlert1, alert_name: undefined } as any]}
-				dashboards={mockDashboards}
-			/>,
+	it('renders popover with alert id if name is not available', async () => {
+		useGetMetricAlertsMock.mockReturnValue(
+			getMockAlertsData({
+				data: {
+					alerts: [{ ...MOCK_ALERT_1, alertName: '' }],
+				},
+			}),
 		);
 
-		fireEvent.click(screen.getByText(`1 alert rule`));
-		expect(screen.getByText(mockAlert1.alert_id)).toBeInTheDocument();
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		await userEvent.click(screen.getByText(`1 alert rule`));
+		expect(screen.getByText(MOCK_ALERT_1.alertId)).toBeInTheDocument();
 	});
 
-	it('navigates to the dashboard when the dashboard is clicked', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={mockDashboards}
-			/>,
-		);
+	it('navigates to the dashboard when the dashboard is clicked', async () => {
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
 
 		// Click on 2 dashboards button
-		fireEvent.click(screen.getByText(`${mockDashboards.length} dashboards`));
+		await userEvent.click(screen.getByText(`2 dashboards`));
 		// Popover showing list of 2 dashboards should be visible
-		expect(screen.getByText(mockDashboard1.dashboard_name)).toBeInTheDocument();
-		expect(screen.getByText(mockDashboard2.dashboard_name)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_DASHBOARD_1.dashboardName)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_DASHBOARD_2.dashboardName)).toBeInTheDocument();
 
 		// Click on the first dashboard
-		fireEvent.click(screen.getByText(mockDashboard1.dashboard_name));
+		await userEvent.click(screen.getByText(MOCK_DASHBOARD_1.dashboardName));
 
 		// Should navigate to the dashboard
 		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			`/dashboard/${mockDashboard1.dashboard_id}`,
+			`/dashboard/${MOCK_DASHBOARD_1.dashboardId}`,
 		);
 	});
 
-	it('navigates to the alert when the alert is clicked', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={mockDashboards}
-			/>,
-		);
+	it('navigates to the alert when the alert is clicked', async () => {
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
 
 		// Click on 2 alert rules button
-		fireEvent.click(screen.getByText(`${mockAlerts.length} alert rules`));
+		await userEvent.click(screen.getByText(`2 alert rules`));
 		// Popover showing list of 2 alert rules should be visible
-		expect(screen.getByText(mockAlert1.alert_name)).toBeInTheDocument();
-		expect(screen.getByText(mockAlert2.alert_name)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_ALERT_1.alertName)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_ALERT_2.alertName)).toBeInTheDocument();
 
 		// Click on the first alert rule
-		fireEvent.click(screen.getByText(mockAlert1.alert_name));
+		await userEvent.click(screen.getByText(MOCK_ALERT_1.alertName));
 
 		// Should navigate to the alert rule
 		expect(mockSetQuery).toHaveBeenCalledWith(
 			QueryParams.ruleId,
-			mockAlert1.alert_id,
+			MOCK_ALERT_1.alertId,
 		);
 	});
 
-	it('renders unique dashboards even when there are duplicates', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={[...mockDashboards, mockDashboard1]}
-			/>,
+	it('renders unique dashboards even when there are duplicates', async () => {
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: {
+					dashboards: [MOCK_DASHBOARD_1, MOCK_DASHBOARD_2, MOCK_DASHBOARD_1],
+				},
+			}),
 		);
-		expect(
-			screen.getByText(`${mockDashboards.length} dashboards`),
-		).toBeInTheDocument();
 
-		fireEvent.click(screen.getByText(`${mockDashboards.length} dashboards`));
-		expect(screen.getByText(mockDashboard1.dashboard_name)).toBeInTheDocument();
-		expect(screen.getByText(mockDashboard2.dashboard_name)).toBeInTheDocument();
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		expect(screen.getByText('2 dashboards')).toBeInTheDocument();
+
+		await userEvent.click(screen.getByText('2 dashboards'));
+		expect(screen.getByText(MOCK_DASHBOARD_1.dashboardName)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_DASHBOARD_2.dashboardName)).toBeInTheDocument();
 	});
 });

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/Highlights.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
+
+import Highlights from '../Highlights';
+import { formatTimestampToReadableDate } from '../utils';
+import { getMockMetricHighlightsData, MOCK_METRIC_NAME } from './testUtlls';
+
+const useGetMetricHighlightsMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricHighlights',
+);
+
+describe('Highlights', () => {
+	beforeEach(() => {
+		useGetMetricHighlightsMock.mockReturnValue(getMockMetricHighlightsData());
+	});
+
+	it('should render all highlights data correctly', () => {
+		render(<Highlights metricName={MOCK_METRIC_NAME} />);
+
+		const dataPoints = screen.getByTestId('metric-highlights-data-points');
+		const timeSeriesTotal = screen.getByTestId(
+			'metric-highlights-time-series-total',
+		);
+		const lastReceived = screen.getByTestId('metric-highlights-last-received');
+
+		expect(dataPoints.textContent).toBe('1M+');
+		expect(timeSeriesTotal.textContent).toBe('1M total ⎯ 1M active');
+		expect(lastReceived.textContent).toBe(
+			formatTimestampToReadableDate('2026-01-24T00:00:00Z'),
+		);
+	});
+
+	it('should render error state correctly', () => {
+		useGetMetricHighlightsMock.mockReturnValue(
+			getMockMetricHighlightsData(
+				{},
+				{
+					isError: true,
+				},
+			),
+		);
+
+		render(<Highlights metricName={MOCK_METRIC_NAME} />);
+
+		expect(
+			screen.getByTestId('metric-highlights-error-state'),
+		).toBeInTheDocument();
+	});
+
+	it('should render loading state when data is loading', () => {
+		useGetMetricHighlightsMock.mockReturnValue(
+			getMockMetricHighlightsData(
+				{},
+				{
+					isLoading: true,
+				},
+			),
+		);
+
+		render(<Highlights metricName={MOCK_METRIC_NAME} />);
+
+		expect(
+			screen.getByTestId('metric-highlights-loading-state'),
+		).toBeInTheDocument();
+	});
+});

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

@@ -1,16 +1,24 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import {
+	GetMetricMetadata200,
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { Temporality } from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import {
 	UniversalYAxisUnit,
 	YAxisUnitSelectorProps,
 } from 'components/YAxisUnitSelector/types';
-import * as useUpdateMetricMetadataHooks from 'hooks/metricsExplorer/useUpdateMetricMetadata';
 import * as useNotificationsHooks from 'hooks/useNotifications';
+import { userEvent } from 'tests/test-utils';
 import { SelectOption } from 'types/common/select';
 
 import Metadata from '../Metadata';
+import { MetricMetadata } from '../types';
+import { transformMetricMetadata } from '../utils';
+import { getMockMetricMetadataData, MOCK_METRIC_NAME } from './testUtlls';
 
 // Mock antd select for testing
 jest.mock('antd', () => ({
@@ -72,13 +80,18 @@ jest.mock('react-query', () => ({
 	}),
 }));
 
+const mockUseUpdateMetricMetadataHook = jest.spyOn(
+	metricsExplorerHooks,
+	'useUpdateMetricMetadata',
+);
+type UseUpdateMetricMetadataResult = ReturnType<
+	typeof metricsExplorerHooks.useUpdateMetricMetadata
+>;
 const mockUseUpdateMetricMetadata = jest.fn();
-jest
-	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
-	.mockReturnValue({
-		mutate: mockUseUpdateMetricMetadata,
-		isLoading: false,
-	} as any);
+
+const mockMetricMetadata = transformMetricMetadata(
+	getMockMetricMetadataData().data as GetMetricMetadata200,
+) as MetricMetadata;
 
 const mockErrorNotification = jest.fn();
 const mockSuccessNotification = jest.fn();
@@ -89,47 +102,50 @@ jest.spyOn(useNotificationsHooks, 'useNotifications').mockReturnValue({
 	},
 } as any);
 
-const mockMetricName = 'test_metric';
-const mockMetricMetadata = {
-	metric_type: MetricType.GAUGE,
-	description: 'test_description',
-	unit: 'test_unit',
-	temporality: Temporality.DELTA,
-};
-const mockRefetchMetricDetails = jest.fn();
+const mockRefetchMetricMetadata = jest.fn();
 
 describe('Metadata', () => {
+	beforeEach(() => {
+		mockUseUpdateMetricMetadataHook.mockReturnValue(({
+			mutate: mockUseUpdateMetricMetadata,
+		} as Partial<UseUpdateMetricMetadataResult>) as UseUpdateMetricMetadataResult);
+	});
+
 	it('should render the metadata properly', () => {
 		render(
 			<Metadata
-				metricName={mockMetricName}
+				metricName={MOCK_METRIC_NAME}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
+				refetchMetricMetadata={mockRefetchMetricMetadata}
 			/>,
 		);
 
 		expect(screen.getByText('Metric Type')).toBeInTheDocument();
-		expect(screen.getByText(mockMetricMetadata.metric_type)).toBeInTheDocument();
+		expect(screen.getByText('Gauge')).toBeInTheDocument();
 		expect(screen.getByText('Description')).toBeInTheDocument();
 		expect(screen.getByText(mockMetricMetadata.description)).toBeInTheDocument();
 		expect(screen.getByText('Unit')).toBeInTheDocument();
 		expect(screen.getByText(mockMetricMetadata.unit)).toBeInTheDocument();
 		expect(screen.getByText('Temporality')).toBeInTheDocument();
-		expect(screen.getByText(mockMetricMetadata.temporality)).toBeInTheDocument();
+		expect(screen.getByText('Delta')).toBeInTheDocument();
 	});
 
-	it('editing the metadata should show the form inputs', () => {
+	it('editing the metadata should show the form inputs', async () => {
 		render(
 			<Metadata
-				metricName={mockMetricName}
+				metricName={MOCK_METRIC_NAME}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
+				refetchMetricMetadata={mockRefetchMetricMetadata}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		expect(screen.getByTestId('metric-type-select')).toBeInTheDocument();
 		expect(screen.getByTestId('temporality-select')).toBeInTheDocument();
@@ -139,57 +155,53 @@ describe('Metadata', () => {
 	it('should update the metadata when the form is submitted', async () => {
 		render(
 			<Metadata
-				metricName={mockMetricName}
+				metricName={MOCK_METRIC_NAME}
 				metadata={{
 					...mockMetricMetadata,
 					unit: '',
 				}}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
+				refetchMetricMetadata={mockRefetchMetricMetadata}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
 		expect(metricDescriptionInput).toBeInTheDocument();
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const metricTypeSelect = screen.getByTestId('metric-type-select');
 		expect(metricTypeSelect).toBeInTheDocument();
-		fireEvent.change(metricTypeSelect, {
-			target: { value: MetricType.SUM },
-		});
+		await userEvent.selectOptions(metricTypeSelect, MetrictypesTypeDTO.sum);
 
 		const temporalitySelect = screen.getByTestId('temporality-select');
 		expect(temporalitySelect).toBeInTheDocument();
-		fireEvent.change(temporalitySelect, {
-			target: { value: Temporality.CUMULATIVE },
-		});
+		await userEvent.selectOptions(temporalitySelect, Temporality.CUMULATIVE);
 
 		const unitSelect = screen.getByTestId('unit-select');
 		expect(unitSelect).toBeInTheDocument();
-		fireEvent.change(unitSelect, {
-			target: { value: 'By' },
-		});
+		await userEvent.selectOptions(unitSelect, 'By');
 
 		const saveButton = screen.getByText('Save');
 		expect(saveButton).toBeInTheDocument();
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
 		expect(mockUseUpdateMetricMetadata).toHaveBeenCalledWith(
 			expect.objectContaining({
-				metricName: mockMetricName,
-				payload: expect.objectContaining({
-					description: 'Updated description',
-					metricType: MetricType.SUM,
-					temporality: Temporality.CUMULATIVE,
+				data: expect.objectContaining({
+					type: MetrictypesTypeDTO.sum,
+					temporality: MetrictypesTemporalityDTO.cumulative,
 					unit: 'By',
 					isMonotonic: true,
 				}),
+				pathParams: {
+					metricName: MOCK_METRIC_NAME,
+				},
 			}),
 			expect.objectContaining({
 				onSuccess: expect.any(Function),
@@ -201,56 +213,56 @@ describe('Metadata', () => {
 	it('should show success notification when metadata is updated successfully', async () => {
 		render(
 			<Metadata
-				metricName={mockMetricName}
+				metricName={MOCK_METRIC_NAME}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
+				refetchMetricMetadata={mockRefetchMetricMetadata}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const saveButton = screen.getByText('Save');
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
 		const onSuccessCallback =
 			mockUseUpdateMetricMetadata.mock.calls[0][1].onSuccess;
-		onSuccessCallback({ statusCode: 200 });
+		onSuccessCallback({ status: 200 });
 
 		expect(mockSuccessNotification).toHaveBeenCalledWith({
 			message: 'Metadata updated successfully',
 		});
-		expect(mockRefetchMetricDetails).toHaveBeenCalled();
 	});
 
 	it('should show error notification when metadata update fails with non-200 response', async () => {
 		render(
 			<Metadata
-				metricName={mockMetricName}
+				metricName={MOCK_METRIC_NAME}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
+				refetchMetricMetadata={mockRefetchMetricMetadata}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const saveButton = screen.getByText('Save');
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
-		const onSuccessCallback =
-			mockUseUpdateMetricMetadata.mock.calls[0][1].onSuccess;
-		onSuccessCallback({ statusCode: 500 });
+		const onErrorCallback = mockUseUpdateMetricMetadata.mock.calls[0][1].onError;
+		onErrorCallback({ status: 500 });
 
 		expect(mockErrorNotification).toHaveBeenCalledWith({
 			message:
@@ -261,22 +273,23 @@ describe('Metadata', () => {
 	it('should show error notification when metadata update fails', async () => {
 		render(
 			<Metadata
-				metricName={mockMetricName}
+				metricName={MOCK_METRIC_NAME}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
+				refetchMetricMetadata={mockRefetchMetricMetadata}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const saveButton = screen.getByText('Save');
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
 		const onErrorCallback = mockUseUpdateMetricMetadata.mock.calls[0][1].onError;
 
@@ -289,39 +302,43 @@ describe('Metadata', () => {
 		});
 	});
 
-	it('cancel button should cancel the edit mode', () => {
+	it('cancel button should cancel the edit mode', async () => {
 		render(
 			<Metadata
-				metricName={mockMetricName}
+				metricName={MOCK_METRIC_NAME}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
+				refetchMetricMetadata={mockRefetchMetricMetadata}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const cancelButton = screen.getByText('Cancel');
 		expect(cancelButton).toBeInTheDocument();
-		fireEvent.click(cancelButton);
+		await userEvent.click(cancelButton);
 
 		const editButton2 = screen.getByText('Edit');
 		expect(editButton2).toBeInTheDocument();
 	});
 
-	it('should not allow editing of unit if it is already set', () => {
+	it('should not allow editing of unit if it is already set', async () => {
 		render(
 			<Metadata
-				metricName={mockMetricName}
+				metricName={MOCK_METRIC_NAME}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
+				refetchMetricMetadata={mockRefetchMetricMetadata}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const unitSelect = screen.queryByTestId('unit-select');
 		expect(unitSelect).not.toBeInTheDocument();

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/MetricDetails.test.tsx

@@ -1,68 +1,16 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { MetricDetails as MetricDetailsType } from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
-import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
+import { render, screen } from '@testing-library/react';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import ROUTES from 'constants/routes';
-import * as useGetMetricDetails from 'hooks/metricsExplorer/useGetMetricDetails';
-import * as useUpdateMetricMetadata from 'hooks/metricsExplorer/useUpdateMetricMetadata';
 import * as useHandleExplorerTabChange from 'hooks/useHandleExplorerTabChange';
+import { userEvent } from 'tests/test-utils';
 
 import MetricDetails from '../MetricDetails';
+import { getMockMetricMetadataData } from './testUtlls';
 
 const mockMetricName = 'test-metric';
-const mockMetricDescription = 'description for a test metric';
-const mockMetricData: MetricDetailsType = {
-	name: mockMetricName,
-	description: mockMetricDescription,
-	unit: 'count',
-	attributes: [
-		{
-			key: 'test-attribute',
-			value: ['test-value'],
-			valueCount: 1,
-		},
-	],
-	alerts: [],
-	dashboards: [],
-	metadata: {
-		metric_type: MetricType.SUM,
-		description: mockMetricDescription,
-		unit: 'count',
-	},
-	type: '',
-	timeseries: 0,
-	samples: 0,
-	timeSeriesTotal: 0,
-	timeSeriesActive: 0,
-	lastReceived: '',
-};
 const mockOpenInspectModal = jest.fn();
 const mockOnClose = jest.fn();
 
-const mockUseGetMetricDetailsData = {
-	data: {
-		payload: {
-			data: mockMetricData,
-		},
-	},
-	isLoading: false,
-	isFetching: false,
-	isError: false,
-	error: null,
-	refetch: jest.fn(),
-};
-
-jest
-	.spyOn(useGetMetricDetails, 'useGetMetricDetails')
-	.mockReturnValue(mockUseGetMetricDetailsData as any);
-
-jest.spyOn(useUpdateMetricMetadata, 'useUpdateMetricMetadata').mockReturnValue({
-	mutate: jest.fn(),
-	isLoading: false,
-	isError: false,
-	error: null,
-} as any);
-
 const mockHandleExplorerTabChange = jest.fn();
 jest
 	.spyOn(useHandleExplorerTabChange, 'useHandleExplorerTabChange')
@@ -88,7 +36,50 @@ jest.mock('react-query', () => ({
 	}),
 }));
 
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/AllAttributes',
+	() =>
+		function MockAllAttributes(): JSX.Element {
+			return <div data-testid="all-attributes">All Attributes</div>;
+		},
+);
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover',
+	() =>
+		function MockDashboardsAndAlertsPopover(): JSX.Element {
+			return (
+				<div data-testid="dashboards-and-alerts-popover">
+					Dashboards and Alerts Popover
+				</div>
+			);
+		},
+);
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/Highlights',
+	() =>
+		function MockHighlights(): JSX.Element {
+			return <div data-testid="highlights">Highlights</div>;
+		},
+);
+
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/Metadata',
+	() =>
+		function MockMetadata(): JSX.Element {
+			return <div data-testid="metadata">Metadata</div>;
+		},
+);
+
+const useGetMetricMetadataMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricMetadata',
+);
+
 describe('MetricDetails', () => {
+	beforeEach(() => {
+		useGetMetricMetadataMock.mockReturnValue(getMockMetricMetadataData());
+	});
+
 	it('renders metric details correctly', () => {
 		render(
 			<MetricDetails
@@ -101,27 +92,15 @@ describe('MetricDetails', () => {
 		);
 
 		expect(screen.getByText(mockMetricName)).toBeInTheDocument();
-		expect(screen.getByText(mockMetricDescription)).toBeInTheDocument();
+		expect(screen.getByTestId('all-attributes')).toBeInTheDocument();
 		expect(
-			screen.getByText(getUniversalNameFromMetricUnit(mockMetricData.unit)),
+			screen.getByTestId('dashboards-and-alerts-popover'),
 		).toBeInTheDocument();
+		expect(screen.getByTestId('highlights')).toBeInTheDocument();
+		expect(screen.getByTestId('metadata')).toBeInTheDocument();
 	});
 
-	it('renders the "open in explorer" and "inspect" buttons', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValueOnce({
-			...mockUseGetMetricDetailsData,
-			data: {
-				payload: {
-					data: {
-						...mockMetricData,
-						metadata: {
-							...mockMetricData.metadata,
-							metric_type: MetricType.GAUGE,
-						},
-					},
-				},
-			},
-		} as any);
+	it('renders the "open in explorer" and "inspect" buttons', async () => {
 		render(
 			<MetricDetails
 				onClose={mockOnClose}
@@ -135,93 +114,10 @@ describe('MetricDetails', () => {
 		expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
 		expect(screen.getByTestId('inspect-metric-button')).toBeInTheDocument();
 
-		fireEvent.click(screen.getByTestId('open-in-explorer-button'));
+		await userEvent.click(screen.getByTestId('open-in-explorer-button'));
 		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
 
-		fireEvent.click(screen.getByTestId('inspect-metric-button'));
+		await userEvent.click(screen.getByTestId('inspect-metric-button'));
 		expect(mockOpenInspectModal).toHaveBeenCalled();
 	});
-
-	it('should render error state when metric details are not found', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
-			...mockUseGetMetricDetailsData,
-			isError: true,
-			error: {
-				message: 'Error fetching metric details',
-			},
-		} as any);
-
-		render(
-			<MetricDetails
-				onClose={mockOnClose}
-				isOpen
-				metricName={mockMetricName}
-				isModalTimeSelection
-				openInspectModal={mockOpenInspectModal}
-			/>,
-		);
-
-		expect(screen.getByText('Error fetching metric details')).toBeInTheDocument();
-	});
-
-	it('should render loading state when metric details are loading', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
-			...mockUseGetMetricDetailsData,
-			isLoading: true,
-		} as any);
-
-		render(
-			<MetricDetails
-				onClose={mockOnClose}
-				isOpen
-				metricName={mockMetricName}
-				isModalTimeSelection
-				openInspectModal={mockOpenInspectModal}
-			/>,
-		);
-
-		expect(screen.getByTestId('metric-details-skeleton')).toBeInTheDocument();
-	});
-
-	it('should render all attributes section', () => {
-		jest
-			.spyOn(useGetMetricDetails, 'useGetMetricDetails')
-			.mockReturnValue(mockUseGetMetricDetailsData as any);
-		render(
-			<MetricDetails
-				onClose={mockOnClose}
-				isOpen
-				metricName={mockMetricName}
-				isModalTimeSelection
-				openInspectModal={mockOpenInspectModal}
-			/>,
-		);
-
-		expect(screen.getByText('All Attributes')).toBeInTheDocument();
-	});
-
-	it('should not render all attributes section when relevant data is not present', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
-			...mockUseGetMetricDetailsData,
-			data: {
-				payload: {
-					data: {
-						...mockMetricData,
-						attributes: null,
-					},
-				},
-			},
-		} as any);
-		render(
-			<MetricDetails
-				onClose={mockOnClose}
-				isOpen
-				metricName={mockMetricName}
-				isModalTimeSelection
-				openInspectModal={mockOpenInspectModal}
-			/>,
-		);
-
-		expect(screen.queryByText('All Attributes')).not.toBeInTheDocument();
-	});
 });

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/testUtlls.ts

@@ -0,0 +1,168 @@
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import {
+	GetMetricAlerts200,
+	GetMetricAttributes200,
+	GetMetricDashboards200,
+	GetMetricHighlights200,
+	GetMetricMetadata200,
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+export const MOCK_METRIC_NAME = 'test-metric';
+
+export function getMockMetricHighlightsData(
+	overrides?: Partial<GetMetricHighlights200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricHighlights> {
+	return {
+		data: {
+			data: {
+				dataPoints: 1000000,
+				lastReceived: '2026-01-24T00:00:00Z',
+				totalTimeSeries: 1000000,
+				activeTimeSeries: 1000000,
+			},
+			status: 'success',
+			...overrides,
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricHighlights>;
+}
+
+export const MOCK_DASHBOARD_1 = {
+	dashboardName: 'Dashboard 1',
+	dashboardId: '1',
+	widgetId: '1',
+	widgetName: 'Widget 1',
+};
+export const MOCK_DASHBOARD_2 = {
+	dashboardName: 'Dashboard 2',
+	dashboardId: '2',
+	widgetId: '2',
+	widgetName: 'Widget 2',
+};
+export const MOCK_ALERT_1 = {
+	alertName: 'Alert 1',
+	alertId: '1',
+};
+export const MOCK_ALERT_2 = {
+	alertName: 'Alert 2',
+	alertId: '2',
+};
+
+export function getMockDashboardsData(
+	overrides?: Partial<GetMetricDashboards200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricDashboards> {
+	return {
+		data: {
+			data: {
+				dashboards: [MOCK_DASHBOARD_1, MOCK_DASHBOARD_2],
+			},
+			status: 'success',
+			...overrides,
+		},
+
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricDashboards>;
+}
+
+export function getMockAlertsData(
+	overrides?: Partial<GetMetricAlerts200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricAlerts> {
+	return {
+		data: {
+			data: {
+				alerts: [MOCK_ALERT_1, MOCK_ALERT_2],
+			},
+			status: 'success',
+			...overrides,
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricAlerts>;
+}
+
+export function getMockMetricAttributesData(
+	overrides?: Partial<GetMetricAttributes200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricAttributes> {
+	return {
+		data: {
+			data: {
+				attributes: [
+					{
+						key: 'attribute1',
+						values: ['value1', 'value2'],
+						valueCount: 2,
+					},
+					{
+						key: 'attribute2',
+						values: ['value3'],
+						valueCount: 1,
+					},
+				],
+				totalKeys: 2,
+			},
+			status: 'success',
+			...overrides,
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricAttributes>;
+}
+
+export function getMockMetricMetadataData(
+	overrides?: Partial<GetMetricMetadata200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricMetadata> {
+	return {
+		data: {
+			data: {
+				description: 'test_description',
+				type: MetrictypesTypeDTO.gauge,
+				unit: 'test_unit',
+				temporality: MetrictypesTemporalityDTO.delta,
+				isMonotonic: false,
+			},
+			status: 'success',
+			...overrides,
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricMetadata>;
+}

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/utils.test.ts

@@ -1,5 +1,7 @@
-import { Temporality } from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import {
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 import {
 	determineIsMonotonic,
@@ -10,35 +12,48 @@ import {
 describe('MetricDetails utils', () => {
 	describe('determineIsMonotonic', () => {
 		it('should return true for histogram metrics', () => {
-			expect(determineIsMonotonic(MetricType.HISTOGRAM)).toBe(true);
+			expect(determineIsMonotonic(MetrictypesTypeDTO.histogram)).toBe(true);
 		});
 
 		it('should return true for exponential histogram metrics', () => {
-			expect(determineIsMonotonic(MetricType.EXPONENTIAL_HISTOGRAM)).toBe(true);
-		});
-
-		it('should return false for gauge metrics', () => {
-			expect(determineIsMonotonic(MetricType.GAUGE)).toBe(false);
-		});
-
-		it('should return false for summary metrics', () => {
-			expect(determineIsMonotonic(MetricType.SUMMARY)).toBe(false);
-		});
-
-		it('should return true for sum metrics with cumulative temporality', () => {
-			expect(determineIsMonotonic(MetricType.SUM, Temporality.CUMULATIVE)).toBe(
+			expect(determineIsMonotonic(MetrictypesTypeDTO.exponentialhistogram)).toBe(
 				true,
 			);
 		});
 
+		it('should return false for gauge metrics', () => {
+			expect(determineIsMonotonic(MetrictypesTypeDTO.gauge)).toBe(false);
+		});
+
+		it('should return false for summary metrics', () => {
+			expect(determineIsMonotonic(MetrictypesTypeDTO.summary)).toBe(false);
+		});
+
+		it('should return true for sum metrics with cumulative temporality', () => {
+			expect(
+				determineIsMonotonic(
+					MetrictypesTypeDTO.sum,
+					MetrictypesTemporalityDTO.cumulative,
+				),
+			).toBe(true);
+		});
+
 		it('should return false for sum metrics with delta temporality', () => {
-			expect(determineIsMonotonic(MetricType.SUM, Temporality.DELTA)).toBe(false);
+			expect(
+				determineIsMonotonic(
+					MetrictypesTypeDTO.sum,
+					MetrictypesTemporalityDTO.delta,
+				),
+			).toBe(false);
 		});
 
 		it('should return false by default', () => {
-			expect(determineIsMonotonic('' as MetricType, '' as Temporality)).toBe(
-				false,
-			);
+			expect(
+				determineIsMonotonic(
+					'' as MetrictypesTypeDTO,
+					'' as MetrictypesTemporalityDTO,
+				),
+			).toBe(false);
 		});
 	});
 
@@ -115,13 +130,16 @@ describe('MetricDetails utils', () => {
 		const API_GATEWAY = 'api-gateway';
 
 		it('should create correct query for SUM metric type', () => {
-			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.SUM);
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.sum,
+			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetricType.SUM,
+				MetrictypesTypeDTO.sum,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('rate');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('rate');
@@ -129,13 +147,16 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for GAUGE metric type', () => {
-			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.GAUGE);
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.gauge,
+			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetricType.GAUGE,
+				MetrictypesTypeDTO.gauge,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('avg');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('avg');
@@ -143,13 +164,16 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for SUMMARY metric type', () => {
-			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.SUMMARY);
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.summary,
+			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetricType.SUMMARY,
+				MetrictypesTypeDTO.summary,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -157,13 +181,16 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for HISTOGRAM metric type', () => {
-			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.HISTOGRAM);
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.histogram,
+			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetricType.HISTOGRAM,
+				MetrictypesTypeDTO.histogram,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -173,14 +200,14 @@ describe('MetricDetails utils', () => {
 		it('should create correct query for EXPONENTIAL_HISTOGRAM metric type', () => {
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetricType.EXPONENTIAL_HISTOGRAM,
+				MetrictypesTypeDTO.exponentialhistogram,
 			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetricType.EXPONENTIAL_HISTOGRAM,
+				MetrictypesTypeDTO.exponentialhistogram,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -203,7 +230,7 @@ describe('MetricDetails utils', () => {
 			const filter = { key: 'service', value: API_GATEWAY };
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetricType.SUM,
+				MetrictypesTypeDTO.sum,
 				filter,
 			);
 
@@ -221,7 +248,7 @@ describe('MetricDetails utils', () => {
 			const groupBy = 'service';
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetricType.SUM,
+				MetrictypesTypeDTO.sum,
 				undefined,
 				groupBy,
 			);
@@ -236,7 +263,7 @@ describe('MetricDetails utils', () => {
 			const groupBy = 'endpoint';
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetricType.SUM,
+				MetrictypesTypeDTO.sum,
 				filter,
 				groupBy,
 			);
@@ -250,7 +277,10 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should not include filters or groupBy when not provided', () => {
-			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.SUM);
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.sum,
+			);
 
 			expect(query.builder.queryData[0]?.filters?.items).toHaveLength(0);
 			expect(query.builder.queryData[0]?.groupBy).toHaveLength(0);

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

@@ -1,6 +1,55 @@
+import {
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
 export const METRIC_METADATA_KEYS = {
 	description: 'Description',
 	unit: 'Unit',
-	metric_type: 'Metric Type',
+	type: 'Metric Type',
 	temporality: 'Temporality',
+	isMonotonic: 'Monotonic',
 };
+
+export const METRIC_METADATA_TEMPORALITY_OPTIONS: Array<{
+	value: MetrictypesTemporalityDTO;
+	label: string;
+}> = [
+	{
+		value: MetrictypesTemporalityDTO.delta,
+		label: 'Delta',
+	},
+	{
+		value: MetrictypesTemporalityDTO.cumulative,
+		label: 'Cumulative',
+	},
+];
+
+export const METRIC_METADATA_TYPE_OPTIONS: Array<{
+	value: MetrictypesTypeDTO;
+	label: string;
+}> = [
+	{
+		value: MetrictypesTypeDTO.sum,
+		label: 'Sum',
+	},
+	{
+		value: MetrictypesTypeDTO.gauge,
+		label: 'Gauge',
+	},
+	{
+		value: MetrictypesTypeDTO.histogram,
+		label: 'Histogram',
+	},
+	{
+		value: MetrictypesTypeDTO.summary,
+		label: 'Summary',
+	},
+	{
+		value: MetrictypesTypeDTO.exponentialhistogram,
+		label: 'Exponential Histogram',
+	},
+];
+
+export const METRIC_METADATA_UPDATE_ERROR_MESSAGE =
+	'Failed to update metadata, please try again. If the issue persists, please contact support.';

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

@@ -1,34 +1,39 @@
 import {
-	MetricDetails,
-	MetricDetailsAlert,
-	MetricDetailsAttribute,
-	MetricDetailsDashboard,
-} from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+	MetricsexplorertypesMetricAlertDTO,
+	MetricsexplorertypesMetricAttributeDTO,
+	MetricsexplorertypesMetricDashboardDTO,
+	MetricsexplorertypesMetricHighlightsResponseDTO,
+	MetricsexplorertypesMetricMetadataDTO,
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 export interface MetricDetailsProps {
 	onClose: () => void;
 	isOpen: boolean;
-	metricName: string | null;
+	metricName: string;
 	isModalTimeSelection: boolean;
 	openInspectModal?: (metricName: string) => void;
 }
 
+export interface HighlightsProps {
+	metricName: string;
+}
 export interface DashboardsAndAlertsPopoverProps {
-	dashboards: MetricDetailsDashboard[] | null;
-	alerts: MetricDetailsAlert[] | null;
+	metricName: string;
 }
 
 export interface MetadataProps {
 	metricName: string;
-	metadata: MetricDetails['metadata'] | undefined;
-	refetchMetricDetails: () => void;
+	metadata: MetricMetadata | null;
+	isErrorMetricMetadata: boolean;
+	isLoadingMetricMetadata: boolean;
+	refetchMetricMetadata: () => void;
 }
 
 export interface AllAttributesProps {
-	attributes: MetricDetailsAttribute[];
 	metricName: string;
-	metricType: MetricType | undefined;
+	metricType: MetrictypesTypeDTO | undefined;
 }
 
 export interface AllAttributesValueProps {
@@ -36,3 +41,38 @@ export interface AllAttributesValueProps {
 	filterValue: string[];
 	goToMetricsExploreWithAppliedAttribute: (key: string, value: string) => void;
 }
+
+export interface AllAttributesEmptyTextProps {
+	isErrorAttributes: boolean;
+	refetchAttributes: () => void;
+}
+
+export type MetricHighlight = MetricsexplorertypesMetricHighlightsResponseDTO;
+
+export type MetricAlert = MetricsexplorertypesMetricAlertDTO;
+
+export type MetricDashboard = MetricsexplorertypesMetricDashboardDTO;
+
+export type MetricMetadata = MetricsexplorertypesMetricMetadataDTO;
+export interface MetricMetadataFormState {
+	type: MetrictypesTypeDTO;
+	description: string;
+	temporality?: MetrictypesTemporalityDTO;
+	unit: string;
+	isMonotonic: boolean;
+}
+
+export type MetricAttribute = MetricsexplorertypesMetricAttributeDTO;
+
+export enum TableFields {
+	DESCRIPTION = 'description',
+	UNIT = 'unit',
+	TYPE = 'type',
+	Temporality = 'temporality',
+	IS_MONOTONIC = 'isMonotonic',
+}
+
+export interface MetricDetailsErrorStateProps {
+	refetch?: () => void;
+	errorMessage: string;
+}

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

@@ -1,12 +1,23 @@
-import { Temporality } from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { UpdateMetricMetadataMutationBody } from 'api/generated/services/metrics';
+import {
+	GetMetricMetadata200,
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { SpaceAggregation, TimeAggregation } from 'api/v5/v5';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
-export function formatTimestampToReadableDate(timestamp: string): string {
+import { MetricMetadata, MetricMetadataFormState } from './types';
+
+export function formatTimestampToReadableDate(
+	timestamp: number | string | undefined,
+): string {
+	if (!timestamp) {
+		return '-';
+	}
 	const date = new Date(timestamp);
 	const now = new Date();
 	const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
@@ -39,7 +50,10 @@ export function formatTimestampToReadableDate(timestamp: string): string {
 	return date.toLocaleDateString();
 }
 
-export function formatNumberToCompactFormat(num: number): string {
+export function formatNumberToCompactFormat(num: number | undefined): string {
+	if (!num) {
+		return '-';
+	}
 	return new Intl.NumberFormat('en-US', {
 		notation: 'compact',
 		maximumFractionDigits: 1,
@@ -47,27 +61,30 @@ export function formatNumberToCompactFormat(num: number): string {
 }
 
 export function determineIsMonotonic(
-	metricType: MetricType,
-	temporality?: Temporality,
+	metricType: MetrictypesTypeDTO,
+	temporality?: MetrictypesTemporalityDTO,
 ): boolean {
 	if (
-		metricType === MetricType.HISTOGRAM ||
-		metricType === MetricType.EXPONENTIAL_HISTOGRAM
+		metricType === MetrictypesTypeDTO.histogram ||
+		metricType === MetrictypesTypeDTO.exponentialhistogram
 	) {
 		return true;
 	}
-	if (metricType === MetricType.GAUGE || metricType === MetricType.SUMMARY) {
+	if (
+		metricType === MetrictypesTypeDTO.gauge ||
+		metricType === MetrictypesTypeDTO.summary
+	) {
 		return false;
 	}
-	if (metricType === MetricType.SUM) {
-		return temporality === Temporality.CUMULATIVE;
+	if (metricType === MetrictypesTypeDTO.sum) {
+		return temporality === MetrictypesTemporalityDTO.cumulative;
 	}
 	return false;
 }
 
 export function getMetricDetailsQuery(
 	metricName: string,
-	metricType: MetricType | undefined,
+	metricType: MetrictypesTypeDTO | undefined,
 	filter?: { key: string; value: string },
 	groupBy?: string,
 ): Query {
@@ -75,23 +92,23 @@ export function getMetricDetailsQuery(
 	let spaceAggregation;
 	let aggregateOperator;
 	switch (metricType) {
-		case MetricType.SUM:
+		case MetrictypesTypeDTO.sum:
 			timeAggregation = 'rate';
 			spaceAggregation = 'sum';
 			aggregateOperator = 'rate';
 			break;
-		case MetricType.GAUGE:
+		case MetrictypesTypeDTO.gauge:
 			timeAggregation = 'avg';
 			spaceAggregation = 'avg';
 			aggregateOperator = 'avg';
 			break;
-		case MetricType.SUMMARY:
+		case MetrictypesTypeDTO.summary:
 			timeAggregation = 'noop';
 			spaceAggregation = 'sum';
 			aggregateOperator = 'noop';
 			break;
-		case MetricType.HISTOGRAM:
-		case MetricType.EXPONENTIAL_HISTOGRAM:
+		case MetrictypesTypeDTO.histogram:
+		case MetrictypesTypeDTO.exponentialhistogram:
 			timeAggregation = 'noop';
 			spaceAggregation = 'p90';
 			aggregateOperator = 'noop';
@@ -160,3 +177,38 @@ export function getMetricDetailsQuery(
 		},
 	};
 }
+
+export function transformMetricMetadata(
+	apiData: GetMetricMetadata200 | undefined,
+): MetricMetadata | null {
+	if (!apiData || !apiData.data) {
+		return null;
+	}
+	const { type, description, unit, temporality, isMonotonic } = apiData.data;
+
+	return {
+		type,
+		description,
+		unit,
+		temporality,
+		isMonotonic,
+	};
+}
+
+export function transformUpdateMetricMetadataRequest(
+	metricName: string,
+	metricMetadata: MetricMetadataFormState,
+): UpdateMetricMetadataMutationBody {
+	return {
+		metricName: metricName,
+		type: metricMetadata.type,
+		description: metricMetadata.description,
+		unit: metricMetadata.unit,
+		temporality:
+			metricMetadata.temporality ?? MetrictypesTemporalityDTO.unspecified,
+		isMonotonic: determineIsMonotonic(
+			metricMetadata.type,
+			metricMetadata.temporality,
+		),
+	};
+}

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

@@ -5,6 +5,7 @@ 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 { usePageSize } from 'container/InfraMonitoringK8s/utils';
 import NoLogs from 'container/NoLogs/NoLogs';
 import { useGetMetricsList } from 'hooks/metricsExplorer/useGetMetricsList';
@@ -128,7 +129,7 @@ function Summary(): JSX.Element {
 	} = useGetMetricsList(metricsListQuery, {
 		enabled: !!metricsListQuery && !isInspectModalOpen,
 		queryKey: [
-			'metricsList',
+			REACT_QUERY_KEY.GET_METRICS_LIST,
 			queryFiltersWithoutId,
 			orderBy,
 			pageSize,
@@ -323,7 +324,7 @@ function Summary(): JSX.Element {
 					</>
 				)}
 			</div>
-			{isMetricDetailsOpen && (
+			{isMetricDetailsOpen && selectedMetricName && (
 				<MetricDetails
 					isOpen={isMetricDetailsOpen}
 					onClose={closeMetricDetails}

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

@@ -1,3 +1,4 @@
+import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 
 import { TreemapViewType } from './types';
@@ -25,7 +26,16 @@ export const METRIC_TYPE_LABEL_MAP = {
 	[MetricType.EXPONENTIAL_HISTOGRAM]: 'Exp. Histogram',
 };
 
-export const METRIC_TYPE_VALUES_MAP = {
+export const METRIC_TYPE_VIEW_LABEL_MAP: Record<MetrictypesTypeDTO, string> = {
+	[MetrictypesTypeDTO.sum]: 'Sum',
+	[MetrictypesTypeDTO.gauge]: 'Gauge',
+	[MetrictypesTypeDTO.histogram]: 'Histogram',
+	[MetrictypesTypeDTO.summary]: 'Summary',
+	[MetrictypesTypeDTO.exponentialhistogram]: 'Exp. Histogram',
+};
+
+// TODO(@amlannandy): To remove this once API migration is complete
+export const METRIC_TYPE_VALUES_MAP: Record<MetricType, string> = {
 	[MetricType.SUM]: 'Sum',
 	[MetricType.GAUGE]: 'Gauge',
 	[MetricType.HISTOGRAM]: 'Histogram',
@@ -33,6 +43,14 @@ export const METRIC_TYPE_VALUES_MAP = {
 	[MetricType.EXPONENTIAL_HISTOGRAM]: 'ExponentialHistogram',
 };
 
+export const METRIC_TYPE_VIEW_VALUES_MAP: Record<MetrictypesTypeDTO, string> = {
+	[MetrictypesTypeDTO.sum]: 'Sum',
+	[MetrictypesTypeDTO.gauge]: 'Gauge',
+	[MetrictypesTypeDTO.histogram]: 'Histogram',
+	[MetrictypesTypeDTO.summary]: 'Summary',
+	[MetrictypesTypeDTO.exponentialhistogram]: 'ExponentialHistogram',
+};
+
 export const IS_METRIC_DETAILS_OPEN_KEY = 'isMetricDetailsOpen';
 export const IS_INSPECT_MODAL_OPEN_KEY = 'isInspectModalOpen';
 export const SELECTED_METRIC_NAME_KEY = 'selectedMetricName';

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

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip, Typography } from 'antd';
 import { ColumnType } from 'antd/es/table';
+import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	MetricsListItemData,
 	MetricsListPayload,
@@ -21,7 +22,7 @@ import {
 } from 'lucide-react';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { METRIC_TYPE_LABEL_MAP } from './constants';
+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';
@@ -143,6 +144,66 @@ export function MetricTypeRenderer({
 	);
 }
 
+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,
@@ -160,6 +221,9 @@ export const formatNumberIntoHumanReadableFormat = (
 	num: number,
 	addPlusSign = true,
 ): string => {
+	if (!num) {
+		return '-';
+	}
 	function format(num: number, divisor: number, suffix: string): string {
 		const value = num / divisor;
 		return value % 1 === 0

frontend/src/container/PaginatedTraceFlamegraph/FLAMEGRAPH_CANVAS_POC_NOTES.md

@@ -1,88 +0,0 @@
-# Flamegraph Canvas POC Notes
-
-## Overview
-This document tracks the proof-of-concept (POC) implementation of a canvas-based flamegraph rendering system, replacing the previous DOM-based approach.
-
-## Implementation Status
-
-### ✅ Completed Features
-
-1. **Canvas-based Rendering**
-   - Replaced DOM elements (`react-virtuoso` and `div.span-item`) with a single HTML5 Canvas
-   - Implemented `drawFlamegraph` function to render all spans as rectangles on canvas
-   - Added device pixel ratio (DPR) support for crisp rendering
-
-2. **Time-window-based Zoom**
-   - Replaced pixel-based zoom/pan with time-window-based approach (`viewStartTs`, `viewEndTs`)
-   - Prevents pixelation by redrawing from data with new time bounds
-   - Zoom anchors to cursor position
-   - Horizontal zoom works correctly (min: 1/100th of trace, max: full trace)
-
-3. **Drag to Pan**
-   - Implemented drag-to-pan functionality for navigating the canvas
-   - Differentiates between click (span selection) and drag (panning) based on distance moved
-   - Prevents unwanted window zoom
-
-4. **Minimap with 2D Navigation**
-   - Canvas-based minimap showing density histogram (time × levels)
-   - 2D brush overlay for both horizontal (time) and vertical (levels) navigation
-   - Draggable brush to pan both dimensions
-   - Bidirectional synchronization between main canvas and minimap
-
-5. **Timeline Synchronization**
-   - `TimelineV2` component synchronized with visible time window
-   - Updates correctly during zoom and pan operations
-
-6. **Hit Testing**
-   - Implemented span rectangle tracking for click detection
-   - Tooltip on hover
-   - Span selection via click
-
-### ❌ Known Issues / Not Working
-
-1. **Vertical Zoom - NOT WORKING**
-   - **Status**: Attempted implementation but not functioning correctly
-   - **Issue**: When horizontal zoom reaches maximum (full trace width), vertical zoom cannot continue to zoom out further
-   - **Attempted Solution**: Added `rowHeightScale` state to control vertical row spacing, but the implementation does not work as expected
-   - **Impact**: Users cannot fully zoom out vertically to see all levels when horizontal zoom is at maximum
-   - **Next Steps**: Needs further investigation and alternative approach
-
-2. **Timeline Scale Alignment - NOT WORKING PROPERLY**
-   - **Status**: Issue identified but not fully resolved
-   - **Issue**: The timeline scale does not align properly when dragging/panning the canvas. The timeline aligns correctly during zoom operations, but not during drag/pan operations.
-   - **Impact**: Timeline may show incorrect time values while dragging the canvas
-   - **Attempted Solution**: Used refs (`viewStartTsRef`, `viewEndTsRef`) to track current time window and incremental delta calculation, but issue persists
-   - **Next Steps**: Needs further investigation to ensure timeline stays synchronized during all interaction types
-
-### 🔄 Pending / Future Work
-
-1. **Performance Optimization**
-   - Consider adding an interaction layer (separate canvas on top) for better performance
-   - Optimize rendering for large traces
-
-2. **Code Quality**
-   - Reduce cognitive complexity of `drawFlamegraph` function (currently 26, target: 15)
-   - Reduce cognitive complexity of `drawMinimap` function (currently 30, target: 15)
-
-3. **Additional Features**
-   - Keyboard shortcuts for navigation
-   - Better zoom controls
-   - Export functionality
-
-## Technical Details
-
-### Key Files Modified
-- `frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx` - Main rendering component
-- `frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss` - Styles for canvas and minimap
-- `frontend/src/components/TimelineV2/TimelineV2.tsx` - Timeline synchronization
-
-### Key Concepts
-- **Time-window-based zoom**: Instead of scaling canvas bitmap, redraw from data with new time bounds
-- **Device Pixel Ratio**: Render at DPR resolution for crisp display on high-DPI screens
-- **2D Minimap**: Shows density heatmap across both time (horizontal) and levels (vertical) dimensions
-- **Brush Navigation**: Draggable rectangle overlay for panning both dimensions
-
-## Notes
-- This is a POC implementation - code quality and optimization can be improved after validation
-- Some linting warnings (cognitive complexity) are acceptable for POC phase
-- All changes should be validated before production use

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx

@@ -1,5 +1,3 @@
-// @ts-nocheck
-/* eslint-disable */
 import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Progress, Skeleton, Tooltip, Typography } from 'antd';
@@ -15,13 +13,8 @@ import { Span } from 'types/api/trace/getTraceV2';
 import { TraceFlamegraphStates } from './constants';
 import Error from './TraceFlamegraphStates/Error/Error';
 import NoData from './TraceFlamegraphStates/NoData/NoData';
-// import Success from './TraceFlamegraphStates/Success/SuccessV2';
-// import Success from './TraceFlamegraphStates/Success/SuccessV3_without_minimap_best';
-import Success from './TraceFlamegraphStates/Success/Success_zoom';
+import Success from './TraceFlamegraphStates/Success/Success';
 
-// import Success from './TraceFlamegraphStates/Success/Success_zoom_api';
-// import Success from './TraceFlamegraphStates/Success/SuccessCursor';
-// import Success from './TraceFlamegraphStates/Success/Success';
 import './PaginatedTraceFlamegraph.styles.scss';
 
 interface ITraceFlamegraphProps {
@@ -45,6 +38,7 @@ function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
 	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
 		urlQuery.get('spanId') || '',
 	);
+
 	useEffect(() => {
 		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
 	}, [urlQuery]);
@@ -52,9 +46,6 @@ function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
 	const { data, isFetching, error } = useGetTraceFlamegraph({
 		traceId,
 		selectedSpanId: firstSpanAtFetchLevel,
-		limit: 100001,
-		// boundaryStartTsMilli: 0,
-		// boundarEndTsMilli: 10000,
 	});
 
 	// get the current state of trace flamegraph based on the API lifecycle

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss

@@ -3,11 +3,6 @@
 	overflow-x: hidden;
 	overflow-y: auto;
 
-	&.trace-flamegraph-canvas {
-		overflow: hidden;
-		position: relative;
-	}
-
 	.trace-flamegraph-virtuoso {
 		overflow-x: hidden;
 

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx

@@ -1,6 +1,3 @@
-// @ts-nocheck
-/* eslint-disable */
-
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import {
@@ -26,12 +23,6 @@ import { toFixed } from 'utils/toFixed';
 
 import './Success.styles.scss';
 
-// Constants for rendering
-const ROW_HEIGHT = 24; // 18px height + 6px padding
-const SPAN_BAR_HEIGHT = 12;
-const EVENT_DOT_SIZE = 6;
-const SPAN_BAR_Y_OFFSET = 3; //
-
 interface ITraceMetadata {
 	startTime: number;
 	endTime: number;
@@ -44,14 +35,6 @@ interface ISuccessProps {
 	traceMetadata: ITraceMetadata;
 	selectedSpan: Span | undefined;
 }
-interface SpanRect {
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	level: number;
-}
 
 function Success(props: ISuccessProps): JSX.Element {
 	const {
@@ -65,28 +48,6 @@ function Success(props: ISuccessProps): JSX.Element {
 	const history = useHistory();
 	const isDarkMode = useIsDarkMode();
 	const virtuosoRef = useRef<VirtuosoHandle>(null);
-
-	const baseCanvasRef = useRef<HTMLCanvasElement>(null);
-	const interactionCanvasRef = useRef<HTMLCanvasElement>(null);
-	const minimapRef = useRef<HTMLCanvasElement>(null);
-	const containerRef = useRef<HTMLDivElement>(null);
-
-	console.log('spans.length', spans.length);
-	// Calculate total canvas height. this is coming less
-	const totalHeight = spans.length * ROW_HEIGHT;
-
-	// Build a flat array of span rectangles for hit testing.
-	// consider per level buckets to improve hit testing
-	const spanRects = useRef<SpanRect[]>([]);
-
-	// Time window state (instead of zoom/pan in pixel space)
-	const [viewStartTs, setViewStartTs] = useState<number>(
-		traceMetadata.startTime,
-	);
-	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
-
-	const [scrollTop, setScrollTop] = useState<number>(0);
-
 	const [hoveredSpanId, setHoveredSpanId] = useState<string>('');
 	const renderSpanLevel = useCallback(
 		(_: number, spans: FlamegraphSpan[]): JSX.Element => (
@@ -196,305 +157,16 @@ function Success(props: ISuccessProps): JSX.Element {
 		});
 	}, [firstSpanAtFetchLevel, spans]);
 
-	// Draw a single event dot
-	const drawEventDot = useCallback(
-		(
-			ctx: CanvasRenderingContext2D,
-			x: number,
-			y: number,
-			isError: boolean,
-		): void => {
-			// could be optimized:
-			// ctx.beginPath();
-			// ctx.moveTo(x, y - size/2);
-			// ctx.lineTo(x + size/2, y);
-			// ctx.lineTo(x, y + size/2);
-			// ctx.lineTo(x - size/2, y);
-			// ctx.closePath();
-			// ctx.fill();
-			// ctx.stroke();
-			ctx.save();
-			ctx.translate(x, y);
-			ctx.rotate(Math.PI / 4); // 45 degrees
-
-			if (isError) {
-				ctx.fillStyle = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
-				ctx.strokeStyle = isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)';
-			} else {
-				ctx.fillStyle = isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)';
-				ctx.strokeStyle = isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)';
-			}
-
-			ctx.lineWidth = 1;
-			ctx.fillRect(
-				-EVENT_DOT_SIZE / 2,
-				-EVENT_DOT_SIZE / 2,
-				EVENT_DOT_SIZE,
-				EVENT_DOT_SIZE,
-			);
-			ctx.strokeRect(
-				-EVENT_DOT_SIZE / 2,
-				-EVENT_DOT_SIZE / 2,
-				EVENT_DOT_SIZE,
-				EVENT_DOT_SIZE,
-			);
-			ctx.restore();
-		},
-		[isDarkMode],
-	);
-
-	// Get CSS color value from color string or CSS variable
-	// const getColorValue = useCallback((color: string): string => {
-	// 	// if (color.startsWith('var(')) {
-	// 	// 	// For CSS variables, we need to get computed value
-	// 	// 	const tempDiv = document.createElement('div');
-	// 	// 	tempDiv.style.color = color;
-	// 	// 	document.body.appendChild(tempDiv);
-	// 	// 	const computedColor = window.getComputedStyle(tempDiv).color;
-	// 	// 	document.body.removeChild(tempDiv);
-	// 	// 	return computedColor;
-	// 	// }
-	// 	return color;
-	// }, []);
-
-	// Get span color based on service, error state, and selection
-	// separate this when introducing interaction canvas
-	const getSpanColor = useCallback(
-		(span: FlamegraphSpan): string => {
-			let color = generateColor(span.serviceName, themeColors.traceDetailColors);
-
-			if (span.hasError) {
-				color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
-			}
-			// else {
-			// 	color = getColorValue(color);
-			// }
-
-			// Apply selection/hover highlight
-			//hover/selection highlight in getSpanColor forces base redraw. clipping necessary.
-			if (selectedSpan?.spanId === span.spanId || hoveredSpanId === span.spanId) {
-				const colorObj = Color(color);
-				color = isDarkMode
-					? colorObj.lighten(0.7).hex()
-					: colorObj.darken(0.7).hex();
-			}
-
-			return color;
-		},
-		[isDarkMode, selectedSpan, hoveredSpanId],
-	);
-
-	// Draw a single span and its events
-	const drawSpan = useCallback(
-		(
-			ctx: CanvasRenderingContext2D,
-			span: FlamegraphSpan,
-			x: number,
-			y: number,
-			width: number,
-			levelIndex: number,
-			spanRectsArray: SpanRect[],
-		): void => {
-			const color = getSpanColor(span); // do not depend on hover/clicks
-			const spanY = y + SPAN_BAR_Y_OFFSET;
-
-			// Draw span rectangle
-			ctx.fillStyle = color;
-			ctx.beginPath();
-			// see if we can avoid roundRect as it is performance intensive
-			ctx.roundRect(x, spanY, width, SPAN_BAR_HEIGHT, 6);
-			ctx.fill();
-
-			// Store rect for hit testing
-			// consider per level buckets to improve hit testing
-			// So hover can:
-			// compute level from y
-			// search only within that row
-			spanRectsArray.push({
-				span,
-				x,
-				y: spanY,
-				width,
-				height: SPAN_BAR_HEIGHT,
-				level: levelIndex,
-			});
-
-			// Draw events
-			// think about optimizing this.
-			// if span is too small to draw events, skip drawing events???
-			span.event?.forEach((event) => {
-				const eventTimeMs = event.timeUnixNano / 1e6;
-				const eventOffsetPercent =
-					((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
-				const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
-				const eventX = x + (clampedOffset / 100) * width;
-				const eventY = spanY + SPAN_BAR_HEIGHT / 2;
-				// LOD guard: skip events if span too narrow
-				// if (width < EVENT_DOT_SIZE) {
-				// 	return;
-				// }
-				drawEventDot(ctx, eventX, eventY, event.isError);
-			});
-		},
-		[getSpanColor, drawEventDot],
-	);
-
-	const drawFlamegraph = useCallback(() => {
-		const canvas = baseCanvasRef.current;
-		const container = containerRef.current;
-		if (!canvas || !container) {
-			return;
-		}
-
-		const ctx = canvas.getContext('2d');
-		if (!ctx) {
-			return;
-		}
-
-		const dpr = window.devicePixelRatio || 1;
-		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-		const timeSpan = viewEndTs - viewStartTs;
-		if (timeSpan <= 0) {
-			return;
-		}
-
-		const cssWidth = canvas.width / dpr;
-
-		// ---- Vertical clipping window ----
-		const viewportHeight = container.clientHeight;
-		const overscan = 4;
-
-		const firstLevel = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - overscan);
-		const visibleLevelCount =
-			Math.ceil(viewportHeight / ROW_HEIGHT) + 2 * overscan;
-		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
-
-		// ---- Clear only visible region (recommended) ----
-		const clearTop = firstLevel * ROW_HEIGHT;
-		const clearHeight = (lastLevel - firstLevel + 1) * ROW_HEIGHT;
-		ctx.clearRect(0, clearTop, cssWidth, clearHeight);
-
-		const spanRectsArray: SpanRect[] = [];
-
-		// ---- Draw only visible levels ----
-		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
-			const levelSpans = spans[levelIndex];
-			if (!levelSpans) {
-				continue;
-			}
-
-			const y = levelIndex * ROW_HEIGHT;
-
-			for (let i = 0; i < levelSpans.length; i++) {
-				const span = levelSpans[i];
-
-				const spanStartMs = span.timestamp;
-				const spanEndMs = span.timestamp + span.durationNano / 1e6;
-
-				// Time culling (already correct)
-				if (spanEndMs < viewStartTs || spanStartMs > viewEndTs) {
-					continue;
-				}
-
-				const leftOffset = ((spanStartMs - viewStartTs) / timeSpan) * cssWidth;
-				const rightEdge = ((spanEndMs - viewStartTs) / timeSpan) * cssWidth;
-				let width = rightEdge - leftOffset;
-
-				// Clamp to visible x-range
-				if (leftOffset < 0) {
-					width += leftOffset;
-					if (width <= 0) {
-						continue;
-					}
-				}
-				if (rightEdge > cssWidth) {
-					width = cssWidth - Math.max(0, leftOffset);
-					if (width <= 0) {
-						continue;
-					}
-				}
-
-				// Optional: minimum 1px width
-				if (width > 0 && width < 1) {
-					width = 1;
-				}
-
-				drawSpan(
-					ctx,
-					span,
-					Math.max(0, leftOffset),
-					y,
-					width,
-					levelIndex,
-					spanRectsArray,
-				);
-			}
-		}
-
-		spanRects.current = spanRectsArray;
-	}, [spans, viewStartTs, viewEndTs, scrollTop, drawSpan]);
-
-	// Handle canvas resize with device pixel ratio
-	useEffect(() => {
-		const canvas = baseCanvasRef.current;
-		const container = containerRef.current;
-		if (!canvas || !container) {
-			return;
-		}
-
-		const updateCanvasSize = (): void => {
-			const rect = container.getBoundingClientRect();
-			const dpr = window.devicePixelRatio || 1;
-
-			// Set CSS size
-			canvas.style.width = `${rect.width}px`;
-			canvas.style.height = `${totalHeight}px`;
-
-			// Set actual pixel size (accounting for DPR)
-			// Only update if size actually changed to prevent unnecessary redraws
-			const newWidth = Math.floor(rect.width * dpr);
-			const newHeight = Math.floor(totalHeight * dpr);
-
-			if (canvas.width !== newWidth || canvas.height !== newHeight) {
-				canvas.width = newWidth;
-				canvas.height = newHeight;
-				// Redraw with current time window (preserves zoom/pan)
-				drawFlamegraph();
-			}
-		};
-
-		const resizeObserver = new ResizeObserver(updateCanvasSize);
-		resizeObserver.observe(container);
-
-		// Initial size
-		updateCanvasSize();
-
-		// Handle DPR changes (e.g., moving window between screens)
-		const handleDPRChange = (): void => {
-			updateCanvasSize();
-		};
-		window
-			.matchMedia('(resolution: 1dppx)')
-			.addEventListener('change', handleDPRChange);
-
-		return (): void => {
-			resizeObserver.disconnect();
-			window
-				.matchMedia('(resolution: 1dppx)')
-				.removeEventListener('change', handleDPRChange);
-		};
-	}, [drawFlamegraph, totalHeight]);
-
-	// Re-draw when data changes
-	useEffect(() => {
-		drawFlamegraph();
-	}, [drawFlamegraph]);
-
 	return (
 		<>
-			<div ref={containerRef} className="trace-flamegraph trace-flamegraph-canvas">
-				<canvas ref={baseCanvasRef}></canvas>
+			<div className="trace-flamegraph">
+				<Virtuoso
+					ref={virtuosoRef}
+					className="trace-flamegraph-virtuoso"
+					data={spans}
+					itemContent={renderSpanLevel}
+					rangeChanged={handleRangeChanged}
+				/>
 			</div>
 			<TimelineV2
 				startTimestamp={traceMetadata.startTime}

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/SuccessV3_without_minimap_best.tsx

@@ -1,890 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import { Button } from 'antd';
-import Color from 'color';
-import TimelineV2 from 'components/TimelineV2/TimelineV2';
-import { themeColors } from 'constants/theme';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import './Success.styles.scss';
-
-interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-interface ISuccessProps {
-	spans: FlamegraphSpan[][];
-	firstSpanAtFetchLevel: string;
-	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
-	traceMetadata: ITraceMetadata;
-	selectedSpan: Span | undefined;
-}
-
-// Constants for rendering
-const ROW_HEIGHT = 24; // 18px height + 6px padding
-const SPAN_BAR_HEIGHT = 12;
-const EVENT_DOT_SIZE = 6;
-const SPAN_BAR_Y_OFFSET = 3; // Center the 12px bar in 18px row
-
-interface SpanRect {
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	level: number;
-}
-
-function Success(props: ISuccessProps): JSX.Element {
-	const {
-		spans,
-		setFirstSpanAtFetchLevel,
-		traceMetadata,
-		firstSpanAtFetchLevel,
-		selectedSpan,
-	} = props;
-	const { search } = useLocation();
-	const history = useHistory();
-	const isDarkMode = useIsDarkMode();
-	const canvasRef = useRef<HTMLCanvasElement>(null);
-	const containerRef = useRef<HTMLDivElement>(null);
-	const [hoveredSpanId, setHoveredSpanId] = useState<string>('');
-	const [tooltipContent, setTooltipContent] = useState<{
-		content: string;
-		x: number;
-		y: number;
-	} | null>(null);
-	const [scrollTop, setScrollTop] = useState<number>(0);
-
-	// Time window state (instead of zoom/pan in pixel space)
-	const [viewStartTs, setViewStartTs] = useState<number>(
-		traceMetadata.startTime,
-	);
-	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
-	const [isSpacePressed, setIsSpacePressed] = useState<boolean>(false);
-
-	// Refs to avoid stale state during rapid wheel events and dragging
-	const viewStartRef = useRef(viewStartTs);
-	const viewEndRef = useRef(viewEndTs);
-
-	useEffect(() => {
-		viewStartRef.current = viewStartTs;
-		viewEndRef.current = viewEndTs;
-	}, [viewStartTs, viewEndTs]);
-
-	// Drag state in refs to avoid re-renders during drag
-	const isDraggingRef = useRef(false);
-	const dragStartRef = useRef<{ x: number; y: number } | null>(null);
-	const dragDistanceRef = useRef(0);
-	const suppressClickRef = useRef(false);
-
-	// Scroll ref to avoid recreating getCanvasPointer on every scroll
-	const scrollTopRef = useRef(0);
-
-	useEffect(() => {
-		scrollTopRef.current = scrollTop;
-	}, [scrollTop]);
-
-	// Build a flat array of span rectangles for hit testing
-	const spanRects = useRef<SpanRect[]>([]);
-
-	// Get span color based on service, error state, and selection
-	const getSpanColor = useCallback(
-		(span: FlamegraphSpan): string => {
-			let color = generateColor(span.serviceName, themeColors.traceDetailColors);
-
-			if (span.hasError) {
-				color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
-			}
-
-			// Apply selection/hover highlight
-			if (selectedSpan?.spanId === span.spanId || hoveredSpanId === span.spanId) {
-				const colorObj = Color(color);
-				color = isDarkMode
-					? colorObj.lighten(0.7).hex()
-					: colorObj.darken(0.7).hex();
-			}
-
-			return color;
-		},
-		[isDarkMode, selectedSpan, hoveredSpanId],
-	);
-
-	// Draw a single event dot
-	const drawEventDot = useCallback(
-		(
-			ctx: CanvasRenderingContext2D,
-			x: number,
-			y: number,
-			isError: boolean,
-		): void => {
-			// could be optimized:
-			// ctx.beginPath();
-			// ctx.moveTo(x, y - size/2);
-			// ctx.lineTo(x + size/2, y);
-			// ctx.lineTo(x, y + size/2);
-			// ctx.lineTo(x - size/2, y);
-			// ctx.closePath();
-			// ctx.fill();
-			// ctx.stroke();
-			ctx.save();
-			ctx.translate(x, y);
-			ctx.rotate(Math.PI / 4); // 45 degrees
-
-			if (isError) {
-				ctx.fillStyle = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
-				ctx.strokeStyle = isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)';
-			} else {
-				ctx.fillStyle = isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)';
-				ctx.strokeStyle = isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)';
-			}
-
-			ctx.lineWidth = 1;
-			ctx.fillRect(
-				-EVENT_DOT_SIZE / 2,
-				-EVENT_DOT_SIZE / 2,
-				EVENT_DOT_SIZE,
-				EVENT_DOT_SIZE,
-			);
-			ctx.strokeRect(
-				-EVENT_DOT_SIZE / 2,
-				-EVENT_DOT_SIZE / 2,
-				EVENT_DOT_SIZE,
-				EVENT_DOT_SIZE,
-			);
-			ctx.restore();
-		},
-		[isDarkMode],
-	);
-
-	// Draw a single span and its events
-	const drawSpan = useCallback(
-		(
-			ctx: CanvasRenderingContext2D,
-			span: FlamegraphSpan,
-			x: number,
-			y: number,
-			width: number,
-			levelIndex: number,
-			spanRectsArray: SpanRect[],
-		): void => {
-			const color = getSpanColor(span); // do not depend on hover/clicks
-			const spanY = y + SPAN_BAR_Y_OFFSET;
-
-			// Draw span rectangle
-			ctx.fillStyle = color;
-			ctx.beginPath();
-			ctx.roundRect(x, spanY, width, SPAN_BAR_HEIGHT, 6);
-			ctx.fill();
-
-			// Store rect for hit testing
-			// consider per level buckets to improve hit testing
-			// So hover can:
-			// compute level from y
-			// search only within that row
-			spanRectsArray.push({
-				span,
-				x,
-				y: spanY,
-				width,
-				height: SPAN_BAR_HEIGHT,
-				level: levelIndex,
-			});
-
-			// Draw events
-			// think about optimizing this.
-			// if span is too small to draw events, skip drawing events???
-			span.event?.forEach((event) => {
-				const eventTimeMs = event.timeUnixNano / 1e6;
-				const eventOffsetPercent =
-					((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
-				const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
-				const eventX = x + (clampedOffset / 100) * width;
-				const eventY = spanY + SPAN_BAR_HEIGHT / 2;
-
-				drawEventDot(ctx, eventX, eventY, event.isError);
-			});
-		},
-		[getSpanColor, drawEventDot],
-	);
-
-	// Draw the flamegraph on canvas
-	const drawFlamegraph = useCallback(() => {
-		const canvas = canvasRef.current;
-		const container = containerRef.current;
-		if (!canvas || !container) {
-			return;
-		}
-
-		const ctx = canvas.getContext('2d');
-		if (!ctx) {
-			return;
-		}
-
-		const dpr = window.devicePixelRatio || 1;
-		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-		const timeSpan = viewEndTs - viewStartTs;
-		if (timeSpan <= 0) {
-			return;
-		}
-
-		const cssWidth = canvas.width / dpr;
-
-		// ---- Vertical clipping window ----
-		const viewportHeight = container.clientHeight;
-		const overscan = 4;
-
-		const firstLevel = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - overscan);
-		const visibleLevelCount =
-			Math.ceil(viewportHeight / ROW_HEIGHT) + 2 * overscan;
-		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
-
-		// ---- Clear only visible region (recommended) ----
-		const clearTop = firstLevel * ROW_HEIGHT;
-		const clearHeight = (lastLevel - firstLevel + 1) * ROW_HEIGHT;
-		ctx.clearRect(0, clearTop, cssWidth, clearHeight);
-
-		const spanRectsArray: SpanRect[] = [];
-
-		// ---- Draw only visible levels ----
-		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
-			const levelSpans = spans[levelIndex];
-			if (!levelSpans) {
-				continue;
-			}
-
-			const y = levelIndex * ROW_HEIGHT;
-
-			for (let i = 0; i < levelSpans.length; i++) {
-				const span = levelSpans[i];
-
-				const spanStartMs = span.timestamp;
-				const spanEndMs = span.timestamp + span.durationNano / 1e6;
-
-				// Time culling (already correct)
-				if (spanEndMs < viewStartTs || spanStartMs > viewEndTs) {
-					continue;
-				}
-
-				const leftOffset = ((spanStartMs - viewStartTs) / timeSpan) * cssWidth;
-				const rightEdge = ((spanEndMs - viewStartTs) / timeSpan) * cssWidth;
-				let width = rightEdge - leftOffset;
-
-				// Clamp to visible x-range
-				if (leftOffset < 0) {
-					width += leftOffset;
-					if (width <= 0) {
-						continue;
-					}
-				}
-				if (rightEdge > cssWidth) {
-					width = cssWidth - Math.max(0, leftOffset);
-					if (width <= 0) {
-						continue;
-					}
-				}
-
-				// Optional: minimum 1px width
-				if (width > 0 && width < 1) {
-					width = 1;
-				}
-
-				drawSpan(
-					ctx,
-					span,
-					Math.max(0, leftOffset),
-					y,
-					width,
-					levelIndex,
-					spanRectsArray,
-				);
-			}
-		}
-
-		spanRects.current = spanRectsArray;
-	}, [spans, viewStartTs, viewEndTs, scrollTop, drawSpan]);
-
-	// Calculate total canvas height
-	const totalHeight = spans.length * ROW_HEIGHT;
-
-	console.log('time: ', {
-		start: traceMetadata.startTime,
-		end: traceMetadata.endTime,
-	});
-
-	// Initialize time window when trace metadata changes (only if not already set)
-	useEffect(() => {
-		// Only reset if we're at the default view (full trace)
-		// This prevents resetting zoom/pan when metadata updates
-		if (
-			viewStartTs === traceMetadata.startTime &&
-			viewEndTs === traceMetadata.endTime
-		) {
-			// Already at default, no need to update
-			return;
-		}
-		// Only reset if the trace bounds have actually changed significantly
-		const currentSpan = viewEndTs - viewStartTs;
-		const fullSpan = traceMetadata.endTime - traceMetadata.startTime;
-		// If we're zoomed in, preserve the zoom level relative to new bounds
-		if (currentSpan < fullSpan * 0.99) {
-			// We're zoomed in, adjust the window proportionally
-			const ratio = currentSpan / fullSpan;
-			const newSpan = (traceMetadata.endTime - traceMetadata.startTime) * ratio;
-			const center = (viewStartTs + viewEndTs) / 2;
-			const newStart = Math.max(
-				traceMetadata.startTime,
-				Math.min(center - newSpan / 2, traceMetadata.endTime - newSpan),
-			);
-			setViewStartTs(newStart);
-			setViewEndTs(newStart + newSpan);
-		} else {
-			// We're at full view, reset to new full view
-			setViewStartTs(traceMetadata.startTime);
-			setViewEndTs(traceMetadata.endTime);
-		}
-	}, [traceMetadata.startTime, traceMetadata.endTime, viewStartTs, viewEndTs]);
-
-	// Handle canvas resize with device pixel ratio
-	useEffect(() => {
-		const canvas = canvasRef.current;
-		const container = containerRef.current;
-		if (!canvas || !container) {
-			return;
-		}
-
-		const updateCanvasSize = (): void => {
-			const rect = container.getBoundingClientRect();
-			const dpr = window.devicePixelRatio || 1;
-
-			// Set CSS size
-			canvas.style.width = `${rect.width}px`;
-			canvas.style.height = `${totalHeight}px`;
-
-			// Set actual pixel size (accounting for DPR)
-			// Only update if size actually changed to prevent unnecessary redraws
-			const newWidth = Math.floor(rect.width * dpr);
-			const newHeight = Math.floor(totalHeight * dpr);
-
-			if (canvas.width !== newWidth || canvas.height !== newHeight) {
-				canvas.width = newWidth;
-				canvas.height = newHeight;
-				// Redraw with current time window (preserves zoom/pan)
-				drawFlamegraph();
-			}
-		};
-
-		const resizeObserver = new ResizeObserver(updateCanvasSize);
-		resizeObserver.observe(container);
-
-		// Initial size
-		updateCanvasSize();
-
-		// Handle DPR changes (e.g., moving window between screens)
-		const handleDPRChange = (): void => {
-			updateCanvasSize();
-		};
-		window
-			.matchMedia('(resolution: 1dppx)')
-			.addEventListener('change', handleDPRChange);
-
-		return (): void => {
-			resizeObserver.disconnect();
-			window
-				.matchMedia('(resolution: 1dppx)')
-				.removeEventListener('change', handleDPRChange);
-		};
-	}, [drawFlamegraph, totalHeight]);
-
-	// Re-draw when data changes
-	useEffect(() => {
-		drawFlamegraph();
-	}, [drawFlamegraph]);
-
-	// Find span at given canvas coordinates
-	const findSpanAtPosition = useCallback((x: number, y: number):
-		| SpanRect
-		| undefined => {
-		return spanRects.current.find(
-			(spanRect) =>
-				x >= spanRect.x &&
-				x <= spanRect.x + spanRect.width &&
-				y >= spanRect.y &&
-				y <= spanRect.y + spanRect.height,
-		);
-	}, []);
-
-	// Utility to convert client coordinates to CSS canvas coordinates
-	const getCanvasPointer = useCallback((clientX: number, clientY: number): {
-		cssX: number;
-		cssY: number;
-		cssWidth: number;
-	} | null => {
-		const canvas = canvasRef.current;
-		if (!canvas) {
-			return null;
-		}
-
-		const rect = canvas.getBoundingClientRect();
-		const dpr = window.devicePixelRatio || 1;
-
-		const cssWidth = canvas.width / dpr;
-
-		const cssX = (clientX - rect.left) * (cssWidth / rect.width);
-
-		const cssY = clientY - rect.top + scrollTopRef.current;
-
-		return { cssX, cssY, cssWidth };
-	}, []);
-
-	// Handle mouse move for hover and dragging
-	const handleMouseMove = useCallback(
-		(event: React.MouseEvent<HTMLCanvasElement>) => {
-			const canvas = canvasRef.current;
-			if (!canvas) {
-				return;
-			}
-
-			const rect = canvas.getBoundingClientRect();
-
-			console.log('event', { clientX: event.clientX, clientY: event.clientY });
-
-			// ---- Dragging (pan in time space) ----
-			if (isDraggingRef.current && dragStartRef.current) {
-				const deltaX = event.clientX - dragStartRef.current.x;
-				const deltaY = event.clientY - dragStartRef.current.y;
-
-				console.log('delta', { deltaY, deltaX });
-
-				const totalDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-				dragDistanceRef.current = totalDistance;
-
-				const timeSpan = viewEndRef.current - viewStartRef.current;
-				const deltaTime = (deltaX / rect.width) * timeSpan;
-
-				const newStart = viewStartRef.current - deltaTime;
-
-				const clampedStart = Math.max(
-					traceMetadata.startTime,
-					Math.min(newStart, traceMetadata.endTime - timeSpan),
-				);
-
-				const clampedEnd = clampedStart + timeSpan;
-
-				setViewStartTs(clampedStart);
-				setViewEndTs(clampedEnd);
-
-				dragStartRef.current = {
-					x: event.clientX,
-					y: event.clientY,
-				};
-
-				return;
-			}
-
-			// ---- Hover ----
-			const pointer = getCanvasPointer(event.clientX, event.clientY);
-
-			if (!pointer) {
-				return;
-			}
-
-			const { cssX, cssY } = pointer;
-			const hoveredSpan = findSpanAtPosition(cssX, cssY);
-
-			if (hoveredSpan) {
-				setHoveredSpanId(hoveredSpan.span.spanId);
-				setTooltipContent({
-					content: hoveredSpan.span.name,
-					x: event.clientX,
-					y: event.clientY,
-				});
-				canvas.style.cursor = 'pointer';
-			} else {
-				setHoveredSpanId('');
-				setTooltipContent(null);
-				// Set cursor based on space key state when not hovering
-				canvas.style.cursor = isSpacePressed ? 'grab' : 'default';
-			}
-		},
-		[findSpanAtPosition, traceMetadata, getCanvasPointer, isSpacePressed],
-	);
-
-	// Handle key down for space key
-	useEffect(() => {
-		const handleKeyDown = (event: KeyboardEvent): void => {
-			if (event.code === 'Space') {
-				event.preventDefault();
-				setIsSpacePressed(true);
-			}
-		};
-
-		const handleKeyUp = (event: KeyboardEvent): void => {
-			if (event.code === 'Space') {
-				event.preventDefault();
-				setIsSpacePressed(false);
-			}
-		};
-
-		window.addEventListener('keydown', handleKeyDown);
-		window.addEventListener('keyup', handleKeyUp);
-
-		return (): void => {
-			window.removeEventListener('keydown', handleKeyDown);
-			window.removeEventListener('keyup', handleKeyUp);
-		};
-	}, []);
-
-	const handleMouseDown = useCallback(
-		(event: React.MouseEvent<HTMLCanvasElement>) => {
-			if (event.button !== 0) {
-				return;
-			} // left click only
-
-			event.preventDefault();
-
-			isDraggingRef.current = true;
-			dragStartRef.current = {
-				x: event.clientX,
-				y: event.clientY,
-			};
-			dragDistanceRef.current = 0;
-
-			const canvas = canvasRef.current;
-			if (canvas) {
-				canvas.style.cursor = 'grabbing';
-			}
-		},
-		[],
-	);
-
-	const handleMouseUp = useCallback(() => {
-		const wasDrag = dragDistanceRef.current > 5;
-
-		suppressClickRef.current = wasDrag; // 👈 key fix: suppress click after drag
-
-		isDraggingRef.current = false;
-		dragStartRef.current = null;
-		dragDistanceRef.current = 0;
-
-		const canvas = canvasRef.current;
-		if (canvas) {
-			canvas.style.cursor = 'grab';
-		}
-
-		return wasDrag;
-	}, []);
-
-	const handleMouseLeave = useCallback(() => {
-		isOverFlamegraphRef.current = false;
-
-		setHoveredSpanId('');
-		setTooltipContent(null);
-
-		isDraggingRef.current = false;
-		dragStartRef.current = null;
-		dragDistanceRef.current = 0;
-
-		const canvas = canvasRef.current;
-		if (canvas) {
-			canvas.style.cursor = 'grab';
-		}
-	}, []);
-
-	const handleClick = useCallback(
-		(event: React.MouseEvent<HTMLCanvasElement>) => {
-			// Prevent click after drag
-			if (suppressClickRef.current) {
-				suppressClickRef.current = false; // reset after suppressing once
-				return;
-			}
-
-			const pointer = getCanvasPointer(event.clientX, event.clientY);
-
-			if (!pointer) {
-				return;
-			}
-
-			const { cssX, cssY } = pointer;
-			const clickedSpan = findSpanAtPosition(cssX, cssY);
-
-			if (!clickedSpan) {
-				return;
-			}
-
-			const searchParams = new URLSearchParams(search);
-			const currentSpanId = searchParams.get('spanId');
-
-			if (currentSpanId !== clickedSpan.span.spanId) {
-				searchParams.set('spanId', clickedSpan.span.spanId);
-				history.replace({ search: searchParams.toString() });
-			}
-		},
-		[search, history, findSpanAtPosition, getCanvasPointer],
-	);
-
-	const isOverFlamegraphRef = useRef(false);
-
-	useEffect(() => {
-		const onWheel = (e: WheelEvent) => {
-			// Pinch zoom on trackpads often comes as ctrl+wheel
-			if (isOverFlamegraphRef.current && e.ctrlKey) {
-				e.preventDefault(); // stops browser zoom
-			}
-		};
-
-		// capture:true ensures we intercept early
-		window.addEventListener('wheel', onWheel, { passive: false, capture: true });
-
-		return () => {
-			window.removeEventListener(
-				'wheel',
-				onWheel as any,
-				{ capture: true } as any,
-			);
-		};
-	}, []);
-
-	const wheelDeltaRef = useRef(0);
-	const rafRef = useRef<number | null>(null);
-	const lastCursorXRef = useRef(0);
-	const lastCssWidthRef = useRef(1);
-	const lastIsPinchRef = useRef(false);
-
-	const applyWheelZoom = useCallback(() => {
-		rafRef.current = null;
-
-		const cssWidth = lastCssWidthRef.current || 1;
-		const cursorX = lastCursorXRef.current;
-
-		const fullSpan = traceMetadata.endTime - traceMetadata.startTime;
-		const oldSpan = viewEndRef.current - viewStartRef.current;
-
-		// ✅ Different intensity for pinch vs scroll
-		const zoomIntensityScroll = 0.0015;
-		const zoomIntensityPinch = 0.01; // pinch needs stronger response
-		const zoomIntensity = lastIsPinchRef.current
-			? zoomIntensityPinch
-			: zoomIntensityScroll;
-
-		const deltaY = wheelDeltaRef.current;
-		wheelDeltaRef.current = 0;
-
-		// ✅ Smooth zoom using delta magnitude
-		const zoomFactor = Math.exp(deltaY * zoomIntensity);
-		const newSpan = oldSpan * zoomFactor;
-
-		console.log('newSpan', { cssWidth, newSpan, zoomFactor, oldSpan });
-
-		// ✅ Better minSpan clamp (absolute + pixel-based)
-		const absoluteMinSpan = 5; // ms
-		const pixelMinSpan = fullSpan / cssWidth; // ~1px of time
-		const minSpan = Math.max(absoluteMinSpan, pixelMinSpan);
-		const maxSpan = fullSpan;
-
-		const clampedSpan = Math.max(minSpan, Math.min(maxSpan, newSpan));
-
-		// ✅ Anchor preserving zoom (same as your original logic)
-		const cursorRatio = Math.max(0, Math.min(cursorX / cssWidth, 1));
-		const anchorTs = viewStartRef.current + cursorRatio * oldSpan;
-
-		const newViewStart = anchorTs - cursorRatio * clampedSpan;
-
-		const finalStart = Math.max(
-			traceMetadata.startTime,
-			Math.min(newViewStart, traceMetadata.endTime - clampedSpan),
-		);
-		const finalEnd = finalStart + clampedSpan;
-
-		console.log('finalStart', finalStart);
-		console.log('finalEnd', finalEnd);
-		setViewStartTs(finalStart);
-		setViewEndTs(finalEnd);
-	}, [traceMetadata]);
-
-	const handleWheel = useCallback(
-		(event: React.WheelEvent<HTMLCanvasElement>) => {
-			event.preventDefault();
-
-			const pointer = getCanvasPointer(event.clientX, event.clientY);
-
-			if (!pointer) {
-				return;
-			}
-
-			console.log('pointer', pointer);
-
-			const { cssX: cursorX, cssWidth } = pointer;
-
-			// ✅ Detect pinch on Chrome/Edge: ctrlKey true for trackpad pinch
-			lastIsPinchRef.current = event.ctrlKey;
-
-			lastCssWidthRef.current = cssWidth;
-			lastCursorXRef.current = cursorX;
-
-			// ✅ Accumulate deltas; apply once per frame
-			wheelDeltaRef.current += event.deltaY;
-
-			if (rafRef.current == null) {
-				rafRef.current = requestAnimationFrame(applyWheelZoom);
-			}
-		},
-		[applyWheelZoom, getCanvasPointer],
-	);
-
-	// Reset zoom and pan
-	const handleResetZoom = useCallback(() => {
-		setViewStartTs(traceMetadata.startTime);
-		setViewEndTs(traceMetadata.endTime);
-	}, [traceMetadata]);
-
-	// Handle scroll for pagination
-	const handleScroll = useCallback(
-		(event: React.UIEvent<HTMLDivElement>): void => {
-			const target = event.currentTarget;
-			setScrollTop(target.scrollTop);
-
-			// Pagination logic
-			if (spans.length < 50) {
-				return;
-			}
-
-			const scrollPercentage = target.scrollTop / target.scrollHeight;
-			const totalLevels = spans.length;
-
-			if (scrollPercentage === 0 && spans[0]?.[0]?.level !== 0) {
-				setFirstSpanAtFetchLevel(spans[0][0].spanId);
-			}
-
-			if (scrollPercentage >= 0.95 && spans[totalLevels - 1]?.[0]?.spanId) {
-				setFirstSpanAtFetchLevel(spans[totalLevels - 1][0].spanId);
-			}
-		},
-		[spans, setFirstSpanAtFetchLevel],
-	);
-
-	// Auto-scroll to selected span
-	useEffect(() => {
-		if (!firstSpanAtFetchLevel || !containerRef.current) {
-			return;
-		}
-
-		const levelIndex = spans.findIndex(
-			(level) => level[0]?.spanId === firstSpanAtFetchLevel,
-		);
-
-		if (levelIndex !== -1) {
-			const targetScroll = levelIndex * ROW_HEIGHT;
-			containerRef.current.scrollTop = targetScroll;
-			setScrollTop(targetScroll);
-		}
-	}, [firstSpanAtFetchLevel, spans]);
-
-	return (
-		<>
-			<div
-				ref={containerRef}
-				className="trace-flamegraph trace-flamegraph-canvas"
-				onScroll={handleScroll}
-			>
-				{(viewStartTs !== traceMetadata.startTime ||
-					viewEndTs !== traceMetadata.endTime) && (
-					<Button
-						className="flamegraph-reset-zoom"
-						size="small"
-						onClick={handleResetZoom}
-						title="Reset zoom and pan"
-					>
-						Reset View
-					</Button>
-				)}
-				<canvas
-					ref={canvasRef}
-					style={{
-						display: 'block',
-						width: '100%',
-						height: `${totalHeight}px`,
-					}}
-					onMouseMove={handleMouseMove}
-					onMouseDown={handleMouseDown}
-					onMouseUp={handleMouseUp}
-					onMouseEnter={() => (isOverFlamegraphRef.current = true)}
-					onMouseLeave={handleMouseLeave}
-					onClick={handleClick}
-					onWheel={handleWheel}
-					onContextMenu={(e): void => e.preventDefault()}
-				/>
-				{tooltipContent && (
-					<div
-						style={{
-							position: 'fixed',
-							left: `${tooltipContent.x + 10}px`,
-							top: `${tooltipContent.y - 10}px`,
-							pointerEvents: 'none',
-							zIndex: 1000,
-							backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
-							color: isDarkMode ? '#ffffff' : '#000000',
-							padding: '4px 8px',
-							borderRadius: '4px',
-							fontSize: '12px',
-							boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
-						}}
-					>
-						{tooltipContent.content}
-					</div>
-				)}
-			</div>
-			<TimelineV2
-				startTimestamp={viewStartTs}
-				endTimestamp={viewEndTs}
-				offsetTimestamp={viewStartTs - traceMetadata.startTime}
-				timelineHeight={22}
-			/>
-		</>
-	);
-}
-
-export default Success;
-
-// on drag on click is getting registered as a click
-// zoom and scale not matching
-// check minimap logic
-// use
-// const scrollTopRef = useRef(scrollTop);
-
-// useEffect(() => {
-//   scrollTopRef.current = scrollTop;
-// }, [scrollTop]);
-
-// fix clicks in interaction canvas
-
-// Auto-scroll to selected span else on top(based on default span)
-// time bar line vertical
-// zoom handle vertical and horizontal scroll with proper defined thresholds
-// timeline should be in sync with the flamegraph. test with vertical line of time on event etc.
-// proper working interaction layer for clicks and hovers
-// hit testing should be efficient and accurate without flat spanRect
-
-// Final Priority Order (Clean Summary)
-// ✅ Zoom (Horizontal + Vertical thresholds)
-// ✅ Timeline sync + vertical time dashed line
-// ✅ Minimap brush correctness
-// ✅ Auto-scroll behavior
-// ✅ Interaction layer separation
-// ✅ Efficient hit testing

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/FilterInput/index.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Form } from 'antd';
 import { initialQueryBuilderFormValuesMap } from 'constants/queryBuilder';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
 import isEqual from 'lodash-es/isEqual';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
@@ -30,7 +30,7 @@ function TagFilterInput({
 	};
 
 	return (
-		<QueryBuilderSearch
+		<QueryBuilderSearchV2
 			query={query}
 			onChange={onQueryChange}
 			placeholder={placeholder}

frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx

@@ -86,7 +86,7 @@ jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
 }));
 
 const BASE_URL = ENVIRONMENT.baseURL;
-const attributeKeysURL = `${BASE_URL}/api/v3/autocomplete/attribute_keys`;
+const attributeKeysURL = `${BASE_URL}/api/v3/filter_suggestions`;
 
 describe('PipelinePage container test', () => {
 	beforeAll(() => {
@@ -333,26 +333,34 @@ describe('PipelinePage container test', () => {
 					ctx.json({
 						status: 'success',
 						data: {
-							attributeKeys: [
+							attributes: [
 								{
 									key: 'otelServiceName',
 									dataType: DataTypes.String,
 									type: 'tag',
+									isColumn: false,
+									isJSON: false,
+								},
+								{
+									key: 'service.name',
+									dataType: DataTypes.String,
+									type: 'resource',
+									isColumn: false,
+									isJSON: false,
 								},
 								{
 									key: 'service.instance.id',
 									dataType: DataTypes.String,
 									type: 'resource',
-								},
-								{
-									key: 'service.name',
-									dataType: DataTypes.String,
-									type: 'resource',
+									isColumn: false,
+									isJSON: false,
 								},
 								{
 									key: 'service.name',
 									dataType: DataTypes.String,
 									type: 'tag',
+									isColumn: false,
+									isJSON: false,
 								},
 							],
 						},

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -973,6 +973,7 @@ function QueryBuilderSearchV2(
 	return (
 		<div className="query-builder-search-v2">
 			<Select
+				data-testid={'qb-search-select'}
 				ref={selectRef}
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...(hasPopupContainer ? { getPopupContainer: popupContainer } : {})}

frontend/src/hooks/logs/__tests__/useLogDetailHandlers.test.ts

@@ -0,0 +1,94 @@
+import { act, renderHook } from '@testing-library/react';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { useIsTextSelected } from 'hooks/useIsTextSelected';
+import { ILog } from 'types/api/logs/log';
+
+import useLogDetailHandlers from '../useLogDetailHandlers';
+
+jest.mock('hooks/logs/useActiveLog');
+jest.mock('hooks/useIsTextSelected');
+
+const mockOnSetActiveLog = jest.fn();
+const mockOnClearActiveLog = jest.fn();
+const mockOnAddToQuery = jest.fn();
+const mockOnGroupByAttribute = jest.fn();
+const mockIsTextSelected = jest.fn();
+
+const mockLog: ILog = {
+	id: 'log-1',
+	timestamp: '2024-01-01T00:00:00Z',
+	date: '2024-01-01',
+	body: 'test log body',
+	severityText: 'INFO',
+	severityNumber: 9,
+	traceFlags: 0,
+	traceId: '',
+	spanID: '',
+	attributesString: {},
+	attributesInt: {},
+	attributesFloat: {},
+	resources_string: {},
+	scope_string: {},
+	attributes_string: {},
+	severity_text: '',
+	severity_number: 0,
+};
+
+beforeEach(() => {
+	jest.clearAllMocks();
+
+	jest.mocked(useIsTextSelected).mockReturnValue(mockIsTextSelected);
+
+	jest.mocked(useActiveLog).mockReturnValue({
+		activeLog: null,
+		onSetActiveLog: mockOnSetActiveLog,
+		onClearActiveLog: mockOnClearActiveLog,
+		onAddToQuery: mockOnAddToQuery,
+		onGroupByAttribute: mockOnGroupByAttribute,
+	});
+});
+
+it('should not open log detail when text is selected', () => {
+	mockIsTextSelected.mockReturnValue(true);
+
+	const { result } = renderHook(() => useLogDetailHandlers());
+
+	act(() => {
+		result.current.handleSetActiveLog(mockLog);
+	});
+
+	expect(mockOnSetActiveLog).not.toHaveBeenCalled();
+});
+
+it('should open log detail when no text is selected', () => {
+	mockIsTextSelected.mockReturnValue(false);
+
+	const { result } = renderHook(() => useLogDetailHandlers());
+
+	act(() => {
+		result.current.handleSetActiveLog(mockLog);
+	});
+
+	expect(mockOnSetActiveLog).toHaveBeenCalledWith(mockLog);
+});
+
+it('should toggle off when clicking the same active log', () => {
+	mockIsTextSelected.mockReturnValue(false);
+
+	jest.mocked(useActiveLog).mockReturnValue({
+		activeLog: mockLog,
+		onSetActiveLog: mockOnSetActiveLog,
+		onClearActiveLog: mockOnClearActiveLog,
+		onAddToQuery: mockOnAddToQuery,
+		onGroupByAttribute: mockOnGroupByAttribute,
+	});
+
+	const { result } = renderHook(() => useLogDetailHandlers());
+
+	act(() => {
+		result.current.handleSetActiveLog(mockLog);
+	});
+
+	expect(mockOnClearActiveLog).toHaveBeenCalled();
+	expect(mockOnSetActiveLog).not.toHaveBeenCalled();
+});

frontend/src/hooks/logs/useActiveLog.ts

@@ -1,15 +1,17 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { QueryParams } from 'constants/query';
 import { OPERATORS, QueryBuilderKeys } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
+import useUrlQuery from 'hooks/useUrlQuery';
 import { getGeneratedFilterQueryString } from 'lib/getGeneratedFilterQueryString';
 import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
 import { AppState } from 'store/reducers';
@@ -54,6 +56,20 @@ export const useActiveLog = (): UseActiveLog => {
 
 	const [activeLog, setActiveLog] = useState<ILog | null>(null);
 
+	// Close drawer/clear active log when query in URL changes
+	const urlQuery = useUrlQuery();
+	const compositeQuery = urlQuery.get(QueryParams.compositeQuery) ?? '';
+	const prevQueryRef = useRef<string | null>(null);
+	useEffect(() => {
+		if (
+			prevQueryRef.current !== null &&
+			prevQueryRef.current !== compositeQuery
+		) {
+			setActiveLog(null);
+		}
+		prevQueryRef.current = compositeQuery;
+	}, [compositeQuery]);
+
 	const onSetDetailedLogData = useCallback(
 		(logData: ILog) => {
 			dispatch({

frontend/src/hooks/logs/useLogDetailHandlers.ts

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import type { UseActiveLog } from 'hooks/logs/types';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { useIsTextSelected } from 'hooks/useIsTextSelected';
 import { ILog } from 'types/api/logs/log';
 
 type SelectedTab = typeof VIEW_TYPES[keyof typeof VIEW_TYPES] | undefined;
@@ -28,9 +29,13 @@ function useLogDetailHandlers({
 		onAddToQuery,
 	} = useActiveLog();
 	const [selectedTab, setSelectedTab] = useState<SelectedTab>(defaultTab);
+	const isTextSelected = useIsTextSelected();
 
 	const handleSetActiveLog = useCallback(
 		(log: ILog, nextTab: SelectedTab = defaultTab): void => {
+			if (isTextSelected()) {
+				return;
+			}
 			if (activeLog?.id === log.id) {
 				onClearActiveLog();
 				setSelectedTab(undefined);
@@ -39,7 +44,7 @@ function useLogDetailHandlers({
 			onSetActiveLog(log);
 			setSelectedTab(nextTab ?? defaultTab);
 		},
-		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog],
+		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog, isTextSelected],
 	);
 
 	const handleCloseLogDetail = useCallback((): void => {

frontend/src/hooks/trace/useGetTraceFlamegraph.tsx

@@ -17,9 +17,6 @@ const useGetTraceFlamegraph = (
 			REACT_QUERY_KEY.GET_TRACE_V2_FLAMEGRAPH,
 			props.traceId,
 			props.selectedSpanId,
-			props.limit,
-			props.boundaryStartTsMilli,
-			props.boundarEndTsMilli,
 		],
 		enabled: !!props.traceId,
 		keepPreviousData: true,

frontend/src/hooks/useIsTextSelected.ts

@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+
+export function useIsTextSelected(): () => boolean {
+	return useCallback((): boolean => {
+		const selection = window.getSelection();
+		return (
+			!!selection && !selection.isCollapsed && selection.toString().length > 0
+		);
+	}, []);
+}

frontend/src/types/api/trace/getTraceFlamegraph.ts

@@ -5,9 +5,6 @@ export interface TraceDetailFlamegraphURLProps {
 export interface GetTraceFlamegraphPayloadProps {
 	traceId: string;
 	selectedSpanId: string;
-	limit: number;
-	boundaryStartTsMilli: number;
-	boundarEndTsMilli: number;
 }
 
 export interface Event {
@@ -34,6 +31,4 @@ export interface GetTraceFlamegraphSuccessResponse {
 	spans: FlamegraphSpan[][];
 	startTimestampMillis: number;
 	endTimestampMillis: number;
-	durationNano: number;
-	hasMore: boolean;
 }

frontend/src/utils/pluralize.ts

@@ -0,0 +1,13 @@
+export function pluralize(
+	count: number,
+	singular: string,
+	plural?: string,
+): string {
+	if (count === 1) {
+		return `${count} ${singular}`;
+	}
+	if (plural) {
+		return `${count} ${plural}`;
+	}
+	return `${count} ${singular}s`;
+}

pkg/modules/promote/implpromote/module.go

@@ -87,7 +87,7 @@ func (m *module) ListPromotedAndIndexedPaths(ctx context.Context) ([]promotetype
 }
 
 func (m *module) listPromotedPaths(ctx context.Context) ([]string, error) {
-	paths, err := m.metadataStore.ListPromotedPaths(ctx)
+	paths, err := m.metadataStore.GetPromotedPaths(ctx)
 	if err != nil {
 		return nil, err
 	}
@@ -142,7 +142,7 @@ func (m *module) PromoteAndIndexPaths(
 		pathsStr = append(pathsStr, path.Path)
 	}
 
-	existingPromotedPaths, err := m.metadataStore.ListPromotedPaths(ctx, pathsStr...)
+	existingPromotedPaths, err := m.metadataStore.GetPromotedPaths(ctx, pathsStr...)
 	if err != nil {
 		return err
 	}

pkg/querier/builder_query.go

@@ -80,11 +80,16 @@ func (q *builderQuery[T]) Fingerprint() string {
 			case qbtypes.LogAggregation:
 				aggParts = append(aggParts, a.Expression)
 			case qbtypes.MetricAggregation:
-				aggParts = append(aggParts, fmt.Sprintf("%s:%s:%s:%s",
+				var spaceAggParamStr string
+				if a.ComparisonSpaceAggregationParam != nil {
+					spaceAggParamStr = a.ComparisonSpaceAggregationParam.StringValue()
+				}
+				aggParts = append(aggParts, fmt.Sprintf("%s:%s:%s:%s:%s",
 					a.MetricName,
 					a.Temporality.StringValue(),
 					a.TimeAggregation.StringValue(),
 					a.SpaceAggregation.StringValue(),
+					spaceAggParamStr,
 				))
 			}
 		}

pkg/querier/querier.go

@@ -276,15 +276,17 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 
 	// Fetch temporality for all metrics at once
 	var metricTemporality map[string]metrictypes.Temporality
+	var metricTypes map[string]metrictypes.Type
 	if len(metricNames) > 0 {
 		var err error
-		metricTemporality, err = q.metadataStore.FetchTemporalityMulti(ctx, req.Start, req.End, metricNames...)
+		metricTemporality, metricTypes, err = q.metadataStore.FetchTemporalityAndTypeMulti(ctx, req.Start, req.End, metricNames...)
 		if err != nil {
 			q.logger.WarnContext(ctx, "failed to fetch metric temporality", "error", err, "metrics", metricNames)
 			// Continue without temporality - statement builder will handle unspecified
 			metricTemporality = make(map[string]metrictypes.Temporality)
+			metricTypes = make(map[string]metrictypes.Type)
 		}
-		q.logger.DebugContext(ctx, "fetched metric temporalities", "metric_temporality", metricTemporality)
+		q.logger.DebugContext(ctx, "fetched metric temporalities and types", "metric_temporality", metricTemporality, "metric_types", metricTypes)
 	}
 
 	queries := make(map[string]qbtypes.Query)
@@ -380,6 +382,12 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 					if spec.Aggregations[i].Temporality == metrictypes.Unknown {
 						spec.Aggregations[i].Temporality = metrictypes.Unspecified
 					}
+
+					if spec.Aggregations[i].MetricName != "" && spec.Aggregations[i].Type == metrictypes.UnspecifiedType {
+						if foundMetricType, ok := metricTypes[spec.Aggregations[i].MetricName]; ok && foundMetricType != metrictypes.UnspecifiedType {
+							spec.Aggregations[i].Type = foundMetricType
+						}
+					}
 				}
 				spec.ShiftBy = extractShiftFromBuilderQuery(spec)
 				timeRange := adjustTimeRangeForShift(spec, qbtypes.TimeRange{From: req.Start, To: req.End}, req.RequestType)

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

@@ -1046,19 +1046,7 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	}
 
 	processingPostCache := time.Now()
-	limit := min(req.Limit, tracedetail.MaxLimitToSelectAllSpans)
-	selectAllSpans := totalSpans <= uint64(limit)
-
-	var (
-		selectedSpans                          []*model.Span
-		uncollapsedSpans                       []string
-		rootServiceName, rootServiceEntryPoint string
-	)
-	if selectAllSpans {
-		selectedSpans, rootServiceName, rootServiceEntryPoint = tracedetail.GetAllSpans(traceRoots)
-	} else {
-		selectedSpans, uncollapsedSpans, rootServiceName, rootServiceEntryPoint = tracedetail.GetSelectedSpans(req.UncollapsedSpans, req.SelectedSpanID, traceRoots, spanIdToSpanNodeMap, req.IsSelectedSpanIDUnCollapsed)
-	}
+	selectedSpans, uncollapsedSpans, rootServiceName, rootServiceEntryPoint := tracedetail.GetSelectedSpans(req.UncollapsedSpans, req.SelectedSpanID, traceRoots, spanIdToSpanNodeMap, req.IsSelectedSpanIDUnCollapsed)
 	zap.L().Info("getWaterfallSpansForTraceWithMetadata: processing post cache", zap.Duration("duration", time.Since(processingPostCache)), zap.String("traceID", traceID))
 
 	// convert start timestamp to millis because right now frontend is expecting it in millis
@@ -1071,7 +1059,7 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	}
 
 	response.Spans = selectedSpans
-	response.UncollapsedSpans = uncollapsedSpans // ignoring if all spans are returning
+	response.UncollapsedSpans = uncollapsedSpans
 	response.StartTimestampMillis = startTime / 1000000
 	response.EndTimestampMillis = endTime / 1000000
 	response.TotalSpansCount = totalSpans
@@ -1080,7 +1068,6 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	response.RootServiceEntryPoint = rootServiceEntryPoint
 	response.ServiceNameToTotalDurationMap = serviceNameToTotalDurationMap
 	response.HasMissingSpans = hasMissingSpans
-	response.HasMore = !selectAllSpans
 	return response, nil
 }
 
@@ -1212,7 +1199,7 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 			}
 		}
 
-		selectedSpans = tracedetail.GetAllSpansForFlamegraph(traceRoots, spanIdToSpanNodeMap)
+		selectedSpans = tracedetail.GetSelectedSpansForFlamegraph(traceRoots, spanIdToSpanNodeMap)
 		traceCache := model.GetFlamegraphSpansForTraceCache{
 			StartTime:     startTime,
 			EndTime:       endTime,
@@ -1229,20 +1216,12 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 	}
 
 	processingPostCache := time.Now()
-	selectedSpansForRequest := selectedSpans
-	limit := min(req.Limit, tracedetail.MaxLimitWithoutSampling)
-	totalSpanCount := tracedetail.GetTotalSpanCount(selectedSpans)
-	if totalSpanCount > uint64(limit) {
-		boundaryStart, boundaryEnd := utils.MilliToNano(req.BoundaryStartTS), utils.MilliToNano(req.BoundaryEndTS)
-		selectedSpansForRequest = tracedetail.GetSelectedSpansForFlamegraphForRequest(req.SelectedSpanID, selectedSpans, boundaryStart, boundaryEnd)
-	}
-	zap.L().Info("getFlamegraphSpansForTrace: processing post cache", zap.Duration("duration", time.Since(processingPostCache)), zap.String("traceID", traceID),
-		zap.Uint64("totalSpanCount", totalSpanCount))
+	selectedSpansForRequest := tracedetail.GetSelectedSpansForFlamegraphForRequest(req.SelectedSpanID, selectedSpans, startTime, endTime)
+	zap.L().Info("getFlamegraphSpansForTrace: processing post cache", zap.Duration("duration", time.Since(processingPostCache)), zap.String("traceID", traceID))
 
 	trace.Spans = selectedSpansForRequest
 	trace.StartTimestampMillis = startTime / 1000000
 	trace.EndTimestampMillis = endTime / 1000000
-	trace.HasMore = totalSpanCount > uint64(limit)
 	return trace, nil
 }
 

pkg/query-service/app/inframetrics/common.go

@@ -10,6 +10,7 @@ import (
 )
 
 var dotMetricMap = map[string]string{
+	"system_filesystem_usage":               "system.filesystem.usage",
 	"system_cpu_time":                       "system.cpu.time",
 	"system_memory_usage":                   "system.memory.usage",
 	"system_cpu_load_average_15m":           "system.cpu.load_average.15m",

pkg/query-service/app/inframetrics/hosts.go

@@ -53,10 +53,11 @@ var (
 	}
 
 	queryNamesForTopHosts = map[string][]string{
-		"cpu":    {"A", "B", "F1"},
-		"memory": {"C", "D", "F2"},
-		"wait":   {"E", "F", "F3"},
-		"load15": {"G"},
+		"cpu":        {"A", "B", "F1"},
+		"memory":     {"C", "D", "F2"},
+		"wait":       {"E", "F", "F3"},
+		"load15":     {"G"},
+		"filesystem": {"H", "I", "F4"},
 	}
 
 	// TODO(srikanthccv): remove hardcoded metric name and support keys from any system metric
@@ -67,10 +68,11 @@ var (
 		GetDotMetrics("os_type"),
 	}
 	metricNamesForHosts = map[string]string{
-		"cpu":    GetDotMetrics("system_cpu_time"),
-		"memory": GetDotMetrics("system_memory_usage"),
-		"load15": GetDotMetrics("system_cpu_load_average_15m"),
-		"wait":   GetDotMetrics("system_cpu_time"),
+		"cpu":        GetDotMetrics("system_cpu_time"),
+		"memory":     GetDotMetrics("system_memory_usage"),
+		"load15":     GetDotMetrics("system_cpu_load_average_15m"),
+		"wait":       GetDotMetrics("system_cpu_time"),
+		"filesystem": GetDotMetrics("system_filesystem_usage"),
 	}
 )
 
@@ -494,10 +496,11 @@ func (h *HostsRepo) GetHostList(ctx context.Context, orgID valuer.UUID, req mode
 	for _, result := range formattedResponse {
 		for _, row := range result.Table.Rows {
 			record := model.HostListRecord{
-				CPU:    -1,
-				Memory: -1,
-				Wait:   -1,
-				Load15: -1,
+				CPU:        -1,
+				Memory:     -1,
+				Wait:       -1,
+				Load15:     -1,
+				Filesystem: -1,
 			}
 
 			if hostName, ok := row.Data[hostNameAttrKey].(string); ok {
@@ -516,6 +519,9 @@ func (h *HostsRepo) GetHostList(ctx context.Context, orgID valuer.UUID, req mode
 			if load15, ok := row.Data["G"].(float64); ok {
 				record.Load15 = load15
 			}
+			if filesystem, ok := row.Data["F4"].(float64); ok {
+				record.Filesystem = filesystem
+			}
 			record.Meta = map[string]string{}
 			if _, ok := hostAttrs[record.HostName]; ok {
 				record.Meta = hostAttrs[record.HostName]

pkg/query-service/app/inframetrics/hosts_query.go

@@ -269,42 +269,130 @@ var HostsTableListQuery = v3.QueryRangeParamsV3{
 					Items:    []v3.FilterItem{},
 				},
 			},
-			"G": {
-				QueryName:  "G",
-				DataSource: v3.DataSourceMetrics,
-				AggregateAttribute: v3.AttributeKey{
-					Key:      metricNamesForHosts["load15"],
-					DataType: v3.AttributeKeyDataTypeFloat64,
-				},
-				Temporality: v3.Unspecified,
-				Filters: &v3.FilterSet{
-					Operator: "AND",
-					Items: []v3.FilterItem{
-						{
-							Key: v3.AttributeKey{
-								Key:      hostNameAttrKey,
-								DataType: v3.AttributeKeyDataTypeString,
-								Type:     v3.AttributeKeyTypeResource,
-							},
-							Operator: v3.FilterOperatorNotContains,
-							Value:    agentNameToIgnore,
-						},
-					},
-				},
-				GroupBy: []v3.AttributeKey{
-					{
-						Key:      hostNameAttrKey,
-						DataType: v3.AttributeKeyDataTypeString,
-						Type:     v3.AttributeKeyTypeResource,
-					},
-				},
-				Expression:       "G",
-				ReduceTo:         v3.ReduceToOperatorAvg,
-				TimeAggregation:  v3.TimeAggregationAvg,
-				SpaceAggregation: v3.SpaceAggregationSum,
-				Disabled:         false,
-				Legend:           "CPU Load Average (15m)",
+		"G": {
+			QueryName:  "G",
+			DataSource: v3.DataSourceMetrics,
+			AggregateAttribute: v3.AttributeKey{
+				Key:      metricNamesForHosts["load15"],
+				DataType: v3.AttributeKeyDataTypeFloat64,
 			},
+			Temporality: v3.Unspecified,
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items: []v3.FilterItem{
+					{
+						Key: v3.AttributeKey{
+							Key:      hostNameAttrKey,
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeResource,
+						},
+						Operator: v3.FilterOperatorNotContains,
+						Value:    agentNameToIgnore,
+					},
+				},
+			},
+			GroupBy: []v3.AttributeKey{
+				{
+					Key:      hostNameAttrKey,
+					DataType: v3.AttributeKeyDataTypeString,
+					Type:     v3.AttributeKeyTypeResource,
+				},
+			},
+			Expression:       "G",
+			ReduceTo:         v3.ReduceToOperatorAvg,
+			TimeAggregation:  v3.TimeAggregationAvg,
+			SpaceAggregation: v3.SpaceAggregationSum,
+			Disabled:         false,
+			Legend:           "CPU Load Average (15m)",
+		},
+		"H": {
+			QueryName:  "H",
+			DataSource: v3.DataSourceMetrics,
+			AggregateAttribute: v3.AttributeKey{
+				Key:      metricNamesForHosts["filesystem"],
+				DataType: v3.AttributeKeyDataTypeFloat64,
+			},
+			Temporality: v3.Cumulative,
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items: []v3.FilterItem{
+					{
+						Key: v3.AttributeKey{
+							Key:      "state",
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeTag,
+						},
+						Operator: v3.FilterOperatorEqual,
+						Value:    "used",
+					},
+					{
+						Key: v3.AttributeKey{
+							Key:      hostNameAttrKey,
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeResource,
+						},
+						Operator: v3.FilterOperatorNotContains,
+						Value:    agentNameToIgnore,
+					},
+				},
+			},
+			GroupBy: []v3.AttributeKey{
+				{
+					Key:      hostNameAttrKey,
+					DataType: v3.AttributeKeyDataTypeString,
+					Type:     v3.AttributeKeyTypeResource,
+				},
+			},
+			Expression:       "H",
+			ReduceTo:         v3.ReduceToOperatorAvg,
+			TimeAggregation:  v3.TimeAggregationAvg,
+			SpaceAggregation: v3.SpaceAggregationSum,
+			Disabled:         true,
+		},
+		"I": {
+			QueryName:  "I",
+			DataSource: v3.DataSourceMetrics,
+			AggregateAttribute: v3.AttributeKey{
+				Key:      metricNamesForHosts["filesystem"],
+				DataType: v3.AttributeKeyDataTypeFloat64,
+			},
+			Temporality: v3.Cumulative,
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items: []v3.FilterItem{
+					{
+						Key: v3.AttributeKey{
+							Key:      hostNameAttrKey,
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeResource,
+						},
+						Operator: v3.FilterOperatorNotContains,
+						Value:    agentNameToIgnore,
+					},
+				},
+			},
+			GroupBy: []v3.AttributeKey{
+				{
+					Key:      hostNameAttrKey,
+					DataType: v3.AttributeKeyDataTypeString,
+					Type:     v3.AttributeKeyTypeResource,
+				},
+			},
+			Expression:       "I",
+			ReduceTo:         v3.ReduceToOperatorAvg,
+			TimeAggregation:  v3.TimeAggregationAvg,
+			SpaceAggregation: v3.SpaceAggregationSum,
+			Disabled:         true,
+		},
+		"F4": {
+			QueryName:  "F4",
+			Expression: "H/I",
+			Legend:     "Disk Usage (%)",
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items:    []v3.FilterItem{},
+			},
+		},
 		},
 		PanelType: v3.PanelTypeTable,
 		QueryType: v3.QueryTypeBuilder,

pkg/query-service/app/traces/tracedetail/flamegraph.go

@@ -7,11 +7,9 @@ import (
 )
 
 var (
-	flamegraphSpanLevelLimit      float64 = 50
-	flamegraphSpanLimitPerLevel   int     = 1000
-	flamegraphSamplingBucketCount int     = 500
-
-	MaxLimitWithoutSampling uint = 120_000
+	SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH float64 = 50
+	SPAN_LIMIT_PER_LEVEL                  int     = 100
+	TIMESTAMP_SAMPLING_BUCKET_COUNT       int     = 50
 )
 
 func ContainsFlamegraphSpan(slice []*model.FlamegraphSpan, item *model.FlamegraphSpan) bool {
@@ -54,8 +52,7 @@ func FindIndexForSelectedSpan(spans [][]*model.FlamegraphSpan, selectedSpanId st
 	return selectedSpanLevel
 }
 
-// GetAllSpansForFlamegraph groups all spans as per their level
-func GetAllSpansForFlamegraph(traceRoots []*model.FlamegraphSpan, spanIdToSpanNodeMap map[string]*model.FlamegraphSpan) [][]*model.FlamegraphSpan {
+func GetSelectedSpansForFlamegraph(traceRoots []*model.FlamegraphSpan, spanIdToSpanNodeMap map[string]*model.FlamegraphSpan) [][]*model.FlamegraphSpan {
 
 	var traceIdLevelledFlamegraph = map[string]map[int64][]*model.FlamegraphSpan{}
 	selectedSpans := [][]*model.FlamegraphSpan{}
@@ -103,7 +100,7 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 	})
 
 	// pick the top 5 latency spans
-	for idx := range 100 {
+	for idx := range 5 {
 		sampledSpans = append(sampledSpans, spans[idx])
 	}
 
@@ -113,7 +110,6 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 		for _idx, span := range spans {
 			if span.SpanID == selectedSpanID {
 				idx = _idx
-				break
 			}
 		}
 		if idx != -1 {
@@ -121,17 +117,17 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 		}
 	}
 
-	bucketSize := (endTime - startTime) / uint64(flamegraphSamplingBucketCount)
+	bucketSize := (endTime - startTime) / uint64(TIMESTAMP_SAMPLING_BUCKET_COUNT)
 	if bucketSize == 0 {
 		bucketSize = 1
 	}
 
-	bucketedSpans := make([][]*model.FlamegraphSpan, flamegraphSamplingBucketCount)
+	bucketedSpans := make([][]*model.FlamegraphSpan, 50)
 
 	for _, span := range spans {
 		if span.TimeUnixNano >= startTime && span.TimeUnixNano <= endTime {
 			bucketIndex := int((span.TimeUnixNano - startTime) / bucketSize)
-			if bucketIndex >= 0 && bucketIndex < flamegraphSamplingBucketCount {
+			if bucketIndex >= 0 && bucketIndex < 50 {
 				bucketedSpans[bucketIndex] = append(bucketedSpans[bucketIndex], span)
 			}
 		}
@@ -160,8 +156,8 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 		selectedIndex = FindIndexForSelectedSpan(selectedSpans, selectedSpanID)
 	}
 
-	lowerLimit := selectedIndex - int(flamegraphSpanLevelLimit*0.4)
-	upperLimit := selectedIndex + int(flamegraphSpanLevelLimit*0.6)
+	lowerLimit := selectedIndex - int(SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH*0.4)
+	upperLimit := selectedIndex + int(SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH*0.6)
 
 	if lowerLimit < 0 {
 		upperLimit = upperLimit - lowerLimit
@@ -178,7 +174,7 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 	}
 
 	for i := lowerLimit; i < upperLimit; i++ {
-		if len(selectedSpans[i]) > flamegraphSpanLimitPerLevel {
+		if len(selectedSpans[i]) > SPAN_LIMIT_PER_LEVEL {
 			_spans := getLatencyAndTimestampBucketedSpans(selectedSpans[i], selectedSpanID, i == selectedIndex, startTime, endTime)
 			selectedSpansForRequest = append(selectedSpansForRequest, _spans)
 		} else {
@@ -188,12 +184,3 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 
 	return selectedSpansForRequest
 }
-
-func GetTotalSpanCount(spans [][]*model.FlamegraphSpan) uint64 {
-	levelCount := len(spans)
-	spanCount := uint64(0)
-	for i := range levelCount {
-		spanCount += uint64(len(spans[i]))
-	}
-	return spanCount
-}

pkg/query-service/app/traces/tracedetail/waterfall.go

@@ -9,9 +9,6 @@ import (
 
 var (
 	SPAN_LIMIT_PER_REQUEST_FOR_WATERFALL float64 = 500
-
-	maxDepthForSelectedSpanChildren int  = 5
-	MaxLimitToSelectAllSpans        uint = 10_000
 )
 
 type Interval struct {
@@ -91,11 +88,8 @@ func getPathFromRootToSelectedSpanId(node *model.Span, selectedSpanId string, un
 	return isPresentInSubtreeForTheNode, spansFromRootToNode
 }
 
-func traverseTrace(span *model.Span, uncollapsedSpans []string, level uint64, isPartOfPreOrder bool, hasSibling bool, selectedSpanId string,
-	depthFromSelectedSpan int, isSelectedSpanIDUnCollapsed bool, selectAllSpan bool) ([]*model.Span, []string) {
-
+func traverseTrace(span *model.Span, uncollapsedSpans []string, level uint64, isPartOfPreOrder bool, hasSibling bool, selectedSpanId string) []*model.Span {
 	preOrderTraversal := []*model.Span{}
-	autoExpandedSpans := []string{}
 
 	// sort the children to maintain the order across requests
 	sort.Slice(span.Children, func(i, j int) bool {
@@ -132,40 +126,15 @@ func traverseTrace(span *model.Span, uncollapsedSpans []string, level uint64, is
 		preOrderTraversal = append(preOrderTraversal, &nodeWithoutChildren)
 	}
 
-	nextDepthFromSelectedSpan := -1
-	if span.SpanID == selectedSpanId && isSelectedSpanIDUnCollapsed {
-		nextDepthFromSelectedSpan = 1
-	} else if depthFromSelectedSpan >= 1 && depthFromSelectedSpan < maxDepthForSelectedSpanChildren {
-		nextDepthFromSelectedSpan = depthFromSelectedSpan + 1
-	}
-
 	for index, child := range span.Children {
-		// A child is included in the pre-order output if its parent is uncollapsed
-		// OR if the child falls within MAX_DEPTH_FOR_SELECTED_SPAN_CHILDREN levels
-		// below the selected span.
-		isChildWithinMaxDepth := nextDepthFromSelectedSpan >= 1
-		isAlreadyUncollapsed := slices.Contains(uncollapsedSpans, span.SpanID)
-		childIsPartOfPreOrder := isPartOfPreOrder && (isAlreadyUncollapsed || isChildWithinMaxDepth)
-		if selectAllSpan {
-			childIsPartOfPreOrder = true
-		}
-
-		if isPartOfPreOrder && isChildWithinMaxDepth && !isAlreadyUncollapsed {
-			if !slices.Contains(autoExpandedSpans, span.SpanID) {
-				autoExpandedSpans = append(autoExpandedSpans, span.SpanID)
-			}
-		}
-
-		_childTraversal, _autoExpanded := traverseTrace(child, uncollapsedSpans, level+1, childIsPartOfPreOrder, index != (len(span.Children)-1), selectedSpanId,
-			nextDepthFromSelectedSpan, isSelectedSpanIDUnCollapsed, selectAllSpan)
+		_childTraversal := traverseTrace(child, uncollapsedSpans, level+1, isPartOfPreOrder && slices.Contains(uncollapsedSpans, span.SpanID), index != (len(span.Children)-1), selectedSpanId)
 		preOrderTraversal = append(preOrderTraversal, _childTraversal...)
-		autoExpandedSpans = append(autoExpandedSpans, _autoExpanded...)
 		nodeWithoutChildren.SubTreeNodeCount += child.SubTreeNodeCount + 1
 		span.SubTreeNodeCount += child.SubTreeNodeCount + 1
 	}
 
 	nodeWithoutChildren.SubTreeNodeCount += 1
-	return preOrderTraversal, autoExpandedSpans
+	return preOrderTraversal
 
 }
 
@@ -199,13 +168,7 @@ func GetSelectedSpans(uncollapsedSpans []string, selectedSpanID string, traceRoo
 			_, spansFromRootToNode := getPathFromRootToSelectedSpanId(rootNode, selectedSpanID, updatedUncollapsedSpans, isSelectedSpanIDUnCollapsed)
 			updatedUncollapsedSpans = append(updatedUncollapsedSpans, spansFromRootToNode...)
 
-			_preOrderTraversal, _autoExpanded := traverseTrace(rootNode, updatedUncollapsedSpans, 0, true, false, selectedSpanID, -1, isSelectedSpanIDUnCollapsed, false)
-			// Merge auto-expanded spans into updatedUncollapsedSpans for returning in response
-			for _, spanID := range _autoExpanded {
-				if !slices.Contains(updatedUncollapsedSpans, spanID) {
-					updatedUncollapsedSpans = append(updatedUncollapsedSpans, spanID)
-				}
-			}
+			_preOrderTraversal := traverseTrace(rootNode, updatedUncollapsedSpans, 0, true, false, selectedSpanID)
 			_selectedSpanIndex := findIndexForSelectedSpanFromPreOrder(_preOrderTraversal, selectedSpanID)
 
 			if _selectedSpanIndex != -1 {
@@ -249,17 +212,3 @@ func GetSelectedSpans(uncollapsedSpans []string, selectedSpanID string, traceRoo
 
 	return preOrderTraversal[startIndex:endIndex], updatedUncollapsedSpans, rootServiceName, rootServiceEntryPoint
 }
-
-func GetAllSpans(traceRoots []*model.Span) (spans []*model.Span, rootServiceName, rootEntryPoint string) {
-	for _, root := range traceRoots {
-		childSpans, _ := traverseTrace(root, nil, 0, true, false, "", -1, false, true)
-		spans = append(spans, childSpans...)
-		if rootServiceName == "" {
-			rootServiceName = root.ServiceName
-		}
-		if rootEntryPoint == "" {
-			rootEntryPoint = root.Name
-		}
-	}
-	return
-}

pkg/query-service/model/infra.go

@@ -26,14 +26,15 @@ type HostListRequest struct {
 }
 
 type HostListRecord struct {
-	HostName string            `json:"hostName"`
-	Active   bool              `json:"active"`
-	OS       string            `json:"os"`
-	CPU      float64           `json:"cpu"`
-	Memory   float64           `json:"memory"`
-	Wait     float64           `json:"wait"`
-	Load15   float64           `json:"load15"`
-	Meta     map[string]string `json:"meta"`
+	HostName   string            `json:"hostName"`
+	Active     bool              `json:"active"`
+	OS         string            `json:"os"`
+	CPU        float64           `json:"cpu"`
+	Memory     float64           `json:"memory"`
+	Wait       float64           `json:"wait"`
+	Load15     float64           `json:"load15"`
+	Filesystem float64           `json:"filesystem"`
+	Meta       map[string]string `json:"meta"`
 }
 
 type HostListResponse struct {
@@ -64,6 +65,10 @@ func (r *HostListResponse) SortBy(orderBy *v3.OrderBy) {
 		sort.Slice(r.Records, func(i, j int) bool {
 			return r.Records[i].Wait > r.Records[j].Wait
 		})
+	case "filesystem":
+		sort.Slice(r.Records, func(i, j int) bool {
+			return r.Records[i].Filesystem > r.Records[j].Filesystem
+		})
 	}
 	// the default is descending
 	if orderBy.Order == v3.DirectionAsc {

pkg/query-service/model/queryParams.go

@@ -333,14 +333,10 @@ type GetWaterfallSpansForTraceWithMetadataParams struct {
 	SelectedSpanID              string   `json:"selectedSpanId"`
 	IsSelectedSpanIDUnCollapsed bool     `json:"isSelectedSpanIDUnCollapsed"`
 	UncollapsedSpans            []string `json:"uncollapsedSpans"`
-	Limit                       uint     `json:"limit"`
 }
 
 type GetFlamegraphSpansForTraceParams struct {
-	SelectedSpanID  string `json:"selectedSpanId"`
-	Limit           uint   `json:"limit"`
-	BoundaryStartTS uint64 `json:"boundaryStartTsMilli"`
-	BoundaryEndTS   uint64 `json:"boundarEndTsMilli"`
+	SelectedSpanID string `json:"selectedSpanId"`
 }
 
 type SpanFilterParams struct {

pkg/query-service/model/response.go

@@ -329,7 +329,6 @@ type GetWaterfallSpansForTraceWithMetadataResponse struct {
 	HasMissingSpans               bool              `json:"hasMissingSpans"`
 	// this is needed for frontend and query service sync
 	UncollapsedSpans []string `json:"uncollapsedSpans"`
-	HasMore          bool     `json:"hasMore"`
 }
 
 type GetFlamegraphSpansForTraceResponse struct {
@@ -337,7 +336,6 @@ type GetFlamegraphSpansForTraceResponse struct {
 	EndTimestampMillis   uint64              `json:"endTimestampMillis"`
 	DurationNano         uint64              `json:"durationNano"`
 	Spans                [][]*FlamegraphSpan `json:"spans"`
-	HasMore              bool                `json:"hasMore"`
 }
 
 type OtelSpanRef struct {

pkg/query-service/utils/time.go

@@ -17,7 +17,3 @@ func Elapsed(funcName string, args map[string]interface{}) func() {
 		zap.L().Info("Elapsed time", zapFields...)
 	}
 }
-
-func MilliToNano(milliTS uint64) uint64 {
-	return milliTS * 1000_000
-}

pkg/signoz/provider.go

@@ -169,6 +169,7 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewAddAnonymousPublicDashboardTransactionFactory(sqlstore),
 		sqlmigration.NewAddRootUserFactory(sqlstore, sqlschema),
 		sqlmigration.NewAddUserEmailOrgIDIndexFactory(sqlstore, sqlschema),
+		sqlmigration.NewMigrateRulesV4ToV5Factory(sqlstore, telemetryStore),
 	)
 }
 

pkg/sqlmigration/066_migrate_rules_v4_to_v5_post_deprecation.go

@@ -0,0 +1,209 @@
+package sqlmigration
+
+import (
+	"context"
+	"database/sql"
+	"encoding/json"
+	"log/slog"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/telemetrystore"
+	"github.com/SigNoz/signoz/pkg/transition"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/migrate"
+)
+
+type migrateRulesV4ToV5 struct {
+	store          sqlstore.SQLStore
+	telemetryStore telemetrystore.TelemetryStore
+	logger         *slog.Logger
+}
+
+func NewMigrateRulesV4ToV5Factory(
+	store sqlstore.SQLStore,
+	telemetryStore telemetrystore.TelemetryStore,
+) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(
+		factory.MustNewName("migrate_rules_post_deprecation"),
+		func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
+			return &migrateRulesV4ToV5{
+				store:          store,
+				telemetryStore: telemetryStore,
+				logger:         ps.Logger,
+			}, nil
+		})
+}
+
+func (migration *migrateRulesV4ToV5) Register(migrations *migrate.Migrations) error {
+	if err := migrations.Register(migration.Up, migration.Down); err != nil {
+		return err
+	}
+	return nil
+}
+
+func (migration *migrateRulesV4ToV5) getLogDuplicateKeys(ctx context.Context) ([]string, error) {
+	query := `
+		SELECT name
+		FROM (
+			SELECT DISTINCT name FROM signoz_logs.distributed_logs_attribute_keys
+			INTERSECT
+			SELECT DISTINCT name FROM signoz_logs.distributed_logs_resource_keys
+		)
+		ORDER BY name
+	`
+
+	rows, err := migration.telemetryStore.ClickhouseDB().Query(ctx, query)
+	if err != nil {
+		migration.logger.WarnContext(ctx, "failed to query log duplicate keys", "error", err)
+		return nil, nil
+	}
+	defer rows.Close()
+
+	var keys []string
+	for rows.Next() {
+		var key string
+		if err := rows.Scan(&key); err != nil {
+			migration.logger.WarnContext(ctx, "failed to scan log duplicate key", "error", err)
+			continue
+		}
+		keys = append(keys, key)
+	}
+
+	return keys, nil
+}
+
+func (migration *migrateRulesV4ToV5) getTraceDuplicateKeys(ctx context.Context) ([]string, error) {
+	query := `
+		SELECT tagKey
+		FROM signoz_traces.distributed_span_attributes_keys
+		WHERE tagType IN ('tag', 'resource')
+		GROUP BY tagKey
+		HAVING COUNT(DISTINCT tagType) > 1
+		ORDER BY tagKey
+	`
+
+	rows, err := migration.telemetryStore.ClickhouseDB().Query(ctx, query)
+	if err != nil {
+		migration.logger.WarnContext(ctx, "failed to query trace duplicate keys", "error", err)
+		return nil, nil
+	}
+	defer rows.Close()
+
+	var keys []string
+	for rows.Next() {
+		var key string
+		if err := rows.Scan(&key); err != nil {
+			migration.logger.WarnContext(ctx, "failed to scan trace duplicate key", "error", err)
+			continue
+		}
+		keys = append(keys, key)
+	}
+
+	return keys, nil
+}
+
+func (migration *migrateRulesV4ToV5) Up(ctx context.Context, db *bun.DB) error {
+	logsKeys, err := migration.getLogDuplicateKeys(ctx)
+	if err != nil {
+		return err
+	}
+
+	tracesKeys, err := migration.getTraceDuplicateKeys(ctx)
+	if err != nil {
+		return err
+	}
+
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+
+	defer func() {
+		_ = tx.Rollback()
+	}()
+
+	var rules []struct {
+		ID   string         `bun:"id"`
+		Data map[string]any `bun:"data"`
+	}
+
+	err = tx.NewSelect().
+		Table("rule").
+		Column("id", "data").
+		Scan(ctx, &rules)
+	if err != nil {
+		if err == sql.ErrNoRows {
+			return nil
+		}
+		return err
+	}
+
+	alertsMigrator := transition.NewAlertMigrateV5(migration.logger, logsKeys, tracesKeys)
+
+	count := 0
+
+	for _, rule := range rules {
+		version, _ := rule.Data["version"].(string)
+
+		if version == "v5" {
+			continue
+		}
+
+		if version == "" {
+			migration.logger.WarnContext(ctx, "unexpected empty version for rule", "rule_id", rule.ID)
+		}
+
+		migration.logger.InfoContext(ctx, "migrating rule v4 to v5", "rule_id", rule.ID, "current_version", version)
+
+		// Check if the queries envelope already exists and is non-empty
+		hasQueriesEnvelope := false
+		if condition, ok := rule.Data["condition"].(map[string]any); ok {
+			if compositeQuery, ok := condition["compositeQuery"].(map[string]any); ok {
+				if queries, ok := compositeQuery["queries"].([]any); ok && len(queries) > 0 {
+					hasQueriesEnvelope = true
+				}
+			}
+		}
+
+		if hasQueriesEnvelope {
+			// already has queries envelope, just bump version
+			// this is because user made a mistake of choosing version
+			migration.logger.InfoContext(ctx, "rule already has queries envelope, bumping version", "rule_id", rule.ID)
+			rule.Data["version"] = "v5"
+		} else {
+			// old format, run full migration
+			migration.logger.InfoContext(ctx, "rule has old format, running full migration", "rule_id", rule.ID)
+			updated := alertsMigrator.Migrate(ctx, rule.Data)
+			if !updated {
+				migration.logger.WarnContext(ctx, "expected updated to be true but got false", "rule_id", rule.ID)
+				continue
+			}
+			rule.Data["version"] = "v5"
+		}
+
+		dataJSON, err := json.Marshal(rule.Data)
+		if err != nil {
+			return err
+		}
+
+		_, err = tx.NewUpdate().
+			Table("rule").
+			Set("data = ?", string(dataJSON)).
+			Where("id = ?", rule.ID).
+			Exec(ctx)
+		if err != nil {
+			return err
+		}
+		count++
+	}
+	if count != 0 {
+		migration.logger.InfoContext(ctx, "migrate v4 alerts", "count", count)
+	}
+
+	return tx.Commit()
+}
+
+func (migration *migrateRulesV4ToV5) Down(ctx context.Context, db *bun.DB) error {
+	return nil
+}

pkg/telemetrymetadata/body_json_metadata.go

@@ -10,7 +10,6 @@ import (
 	"github.com/ClickHouse/clickhouse-go/v2/lib/chcol"
 	schemamigrator "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
 	"github.com/SigNoz/signoz-otel-collector/constants"
-	"github.com/SigNoz/signoz-otel-collector/utils"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/querybuilder"
 	"github.com/SigNoz/signoz/pkg/telemetrylogs"
@@ -113,7 +112,7 @@ func (t *telemetryMetaStore) buildBodyJSONPaths(ctx context.Context,
 
 	for _, fieldKey := range fieldKeys {
 		promotedKey := strings.Split(fieldKey.Name, telemetrytypes.ArraySep)[0]
-		fieldKey.Materialized = promoted.Contains(promotedKey)
+		fieldKey.Materialized = promoted[promotedKey]
 		fieldKey.Indexes = indexes[fieldKey.Name]
 	}
 
@@ -295,33 +294,6 @@ func (t *telemetryMetaStore) ListLogsJSONIndexes(ctx context.Context, filters ..
 	return indexes, nil
 }
 
-func (t *telemetryMetaStore) ListPromotedPaths(ctx context.Context, paths ...string) (map[string]struct{}, error) {
-	sb := sqlbuilder.Select("path").From(fmt.Sprintf("%s.%s", DBName, PromotedPathsTableName))
-	pathConditions := []string{}
-	for _, path := range paths {
-		pathConditions = append(pathConditions, sb.Equal("path", path))
-	}
-	sb.Where(sb.Or(pathConditions...))
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-
-	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
-	if err != nil {
-		return nil, errors.WrapInternalf(err, CodeFailLoadPromotedPaths, "failed to load promoted paths")
-	}
-	defer rows.Close()
-
-	next := make(map[string]struct{})
-	for rows.Next() {
-		var path string
-		if err := rows.Scan(&path); err != nil {
-			return nil, errors.WrapInternalf(err, CodeFailLoadPromotedPaths, "failed to scan promoted path")
-		}
-		next[path] = struct{}{}
-	}
-
-	return next, nil
-}
-
 // TODO(Piyush): Remove this if not used in future
 func (t *telemetryMetaStore) ListJSONValues(ctx context.Context, path string, limit int) (*telemetrytypes.TelemetryFieldValues, bool, error) {
 	path = CleanPathPrefixes(path)
@@ -484,11 +456,12 @@ func derefValue(v any) any {
 	return val.Interface()
 }
 
-// IsPathPromoted checks if a specific path is promoted
+// IsPathPromoted checks if a specific path is promoted (Column Evolution table: field_name for logs body).
 func (t *telemetryMetaStore) IsPathPromoted(ctx context.Context, path string) (bool, error) {
 	split := strings.Split(path, telemetrytypes.ArraySep)
-	query := fmt.Sprintf("SELECT 1 FROM %s.%s WHERE path = ? LIMIT 1", DBName, PromotedPathsTableName)
-	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, split[0])
+	pathSegment := split[0]
+	query := fmt.Sprintf("SELECT 1 FROM %s.%s WHERE signal = ? AND column_name = ? AND field_context = ? AND field_name = ? LIMIT 1", DBName, PromotedPathsTableName)
+	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, telemetrytypes.SignalLogs, telemetrylogs.LogsV2BodyPromotedColumn, telemetrytypes.FieldContextBody, pathSegment)
 	if err != nil {
 		return false, errors.WrapInternalf(err, CodeFailCheckPathPromoted, "failed to check if path %s is promoted", path)
 	}
@@ -497,15 +470,24 @@ func (t *telemetryMetaStore) IsPathPromoted(ctx context.Context, path string) (b
 	return rows.Next(), nil
 }
 
-// GetPromotedPaths checks if a specific path is promoted
-func (t *telemetryMetaStore) GetPromotedPaths(ctx context.Context, paths ...string) (*utils.ConcurrentSet[string], error) {
-	sb := sqlbuilder.Select("path").From(fmt.Sprintf("%s.%s", DBName, PromotedPathsTableName))
-	pathConditions := []string{}
-	for _, path := range paths {
-		split := strings.Split(path, telemetrytypes.ArraySep)
-		pathConditions = append(pathConditions, sb.Equal("path", split[0]))
+// GetPromotedPaths returns promoted paths from the Column Evolution table (field_name for logs body).
+func (t *telemetryMetaStore) GetPromotedPaths(ctx context.Context, paths ...string) (map[string]bool, error) {
+	sb := sqlbuilder.Select("field_name").From(fmt.Sprintf("%s.%s", DBName, PromotedPathsTableName))
+	conditions := []string{
+		sb.Equal("signal", telemetrytypes.SignalLogs),
+		sb.Equal("column_name", telemetrylogs.LogsV2BodyPromotedColumn),
+		sb.Equal("field_context", telemetrytypes.FieldContextBody),
+		sb.NotEqual("field_name", "__all__"),
 	}
-	sb.Where(sb.Or(pathConditions...))
+	if len(paths) > 0 {
+		pathArgs := make([]interface{}, len(paths))
+		for i, path := range paths {
+			split := strings.Split(path, telemetrytypes.ArraySep)
+			pathArgs[i] = split[0]
+		}
+		conditions = append(conditions, sb.In("field_name", pathArgs))
+	}
+	sb.Where(sb.And(conditions...))
 
 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
@@ -514,13 +496,13 @@ func (t *telemetryMetaStore) GetPromotedPaths(ctx context.Context, paths ...stri
 	}
 	defer rows.Close()
 
-	promotedPaths := utils.NewConcurrentSet[string]()
+	promotedPaths := make(map[string]bool)
 	for rows.Next() {
-		var path string
-		if err := rows.Scan(&path); err != nil {
+		var fieldName string
+		if err := rows.Scan(&fieldName); err != nil {
 			return nil, errors.WrapInternalf(err, CodeFailCheckPathPromoted, "failed to scan promoted path")
 		}
-		promotedPaths.Insert(path)
+		promotedPaths[fieldName] = true
 	}
 
 	return promotedPaths, nil
@@ -534,21 +516,22 @@ func CleanPathPrefixes(path string) string {
 	return path
 }
 
+// PromotePaths inserts promoted paths into the Column Evolution table (same schema as signoz-otel-collector metadata_migrations).
 func (t *telemetryMetaStore) PromotePaths(ctx context.Context, paths ...string) error {
 	batch, err := t.telemetrystore.ClickhouseDB().PrepareBatch(ctx,
-		fmt.Sprintf("INSERT INTO %s.%s (path, created_at) VALUES", DBName,
+		fmt.Sprintf("INSERT INTO %s.%s (signal, column_name, column_type, field_context, field_name, version, release_time) VALUES", DBName,
 			PromotedPathsTableName))
 	if err != nil {
 		return errors.WrapInternalf(err, CodeFailedToPrepareBatch, "failed to prepare batch")
 	}
 
-	nowMs := uint64(time.Now().UnixMilli())
+	releaseTime := time.Now().UnixNano()
 	for _, p := range paths {
 		trimmed := strings.TrimSpace(p)
 		if trimmed == "" {
 			continue
 		}
-		if err := batch.Append(trimmed, nowMs); err != nil {
+		if err := batch.Append(telemetrytypes.SignalLogs, telemetrylogs.LogsV2BodyPromotedColumn, "JSON()", telemetrytypes.FieldContextBody, trimmed, 0, releaseTime); err != nil {
 			_ = batch.Abort()
 			return errors.WrapInternalf(err, CodeFailedToAppendPath, "failed to append path")
 		}

pkg/telemetrymetadata/metadata.go

@@ -1616,40 +1616,52 @@ func (t *telemetryMetaStore) FetchTemporality(ctx context.Context, queryTimeRang
 }
 
 func (t *telemetryMetaStore) FetchTemporalityMulti(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string]metrictypes.Temporality, error) {
+	temporalities, _, err := t.FetchTemporalityAndTypeMulti(ctx, queryTimeRangeStartTs, queryTimeRangeEndTs, metricNames...)
+	return temporalities, err
+}
+
+func (t *telemetryMetaStore) FetchTemporalityAndTypeMulti(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string]metrictypes.Temporality, map[string]metrictypes.Type, error) {
 	if len(metricNames) == 0 {
-		return make(map[string]metrictypes.Temporality), nil
+		return make(map[string]metrictypes.Temporality), make(map[string]metrictypes.Type), nil
 	}
 
-	result := make(map[string]metrictypes.Temporality)
-	metricsTemporality, err := t.fetchMetricsTemporality(ctx, queryTimeRangeStartTs, queryTimeRangeEndTs, metricNames...)
+	temporalities := make(map[string]metrictypes.Temporality)
+	types := make(map[string]metrictypes.Type)
+	metricsTemporality, metricTypes, err := t.fetchMetricsTemporalityAndType(ctx, queryTimeRangeStartTs, queryTimeRangeEndTs, metricNames...)
 	if err != nil {
-		return nil, err
+		return nil, nil, err
 	}
 	// TODO: return error after table migration are run
-	meterMetricsTemporality, _ := t.fetchMeterSourceMetricsTemporality(ctx, metricNames...)
+	meterMetricsTemporality, meterMetricsTypes, _ := t.fetchMeterSourceMetricsTemporalityAndType(ctx, metricNames...)
 
 	// For metrics not found in the database, set to Unknown
 	for _, metricName := range metricNames {
 		if temporality, exists := metricsTemporality[metricName]; exists && len(temporality) > 0 {
 			if len(temporality) > 1 {
-				result[metricName] = metrictypes.Multiple
+				temporalities[metricName] = metrictypes.Multiple
 			} else {
-				result[metricName] = temporality[0]
+				temporalities[metricName] = temporality[0]
 			}
-			continue
+		} else if temporality, exists := meterMetricsTemporality[metricName]; exists {
+			temporalities[metricName] = temporality
+		} else {
+			temporalities[metricName] = metrictypes.Unknown
 		}
-		if temporality, exists := meterMetricsTemporality[metricName]; exists {
-			result[metricName] = temporality
-			continue
+		if metricType, exists := metricTypes[metricName]; exists {
+			types[metricName] = metricType
+		} else if meterMetricType, exists := meterMetricsTypes[metricName]; exists {
+			types[metricName] = meterMetricType
+		} else {
+			types[metricName] = metrictypes.UnspecifiedType
 		}
-		result[metricName] = metrictypes.Unknown
 	}
 
-	return result, nil
+	return temporalities, types, nil
 }
 
-func (t *telemetryMetaStore) fetchMetricsTemporality(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string][]metrictypes.Temporality, error) {
-	result := make(map[string][]metrictypes.Temporality)
+func (t *telemetryMetaStore) fetchMetricsTemporalityAndType(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string][]metrictypes.Temporality, map[string]metrictypes.Type, error) {
+	temporalities := make(map[string][]metrictypes.Temporality)
+	types := make(map[string]metrictypes.Type)
 
 	adjustedStartTs, adjustedEndTs, tsTableName, _ := telemetrymetrics.WhichTSTableToUse(queryTimeRangeStartTs, queryTimeRangeEndTs, nil)
 
@@ -1660,6 +1672,8 @@ func (t *telemetryMetaStore) fetchMetricsTemporality(ctx context.Context, queryT
 	sb := sqlbuilder.Select(
 		"metric_name",
 		"temporality",
+		"any(type) AS type",
+		"any(is_monotonic) as is_monotonic",
 	).
 		From(t.metricsDBName + "." + tsTableName)
 
@@ -1678,47 +1692,42 @@ func (t *telemetryMetaStore) fetchMetricsTemporality(ctx context.Context, queryT
 
 	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
 	if err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to fetch metric temporality")
+		return nil, nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to fetch metric temporality")
 	}
 	defer rows.Close()
 
 	// Process results
 	for rows.Next() {
-		var metricName, temporalityStr string
-		if err := rows.Scan(&metricName, &temporalityStr); err != nil {
-			return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to scan temporality result")
-		}
-
-		// Convert string to Temporality type
+		var metricName string
 		var temporality metrictypes.Temporality
-		switch temporalityStr {
-		case "Delta":
-			temporality = metrictypes.Delta
-		case "Cumulative":
-			temporality = metrictypes.Cumulative
-		case "Unspecified":
-			temporality = metrictypes.Unspecified
-		default:
-			// Unknown or empty temporality
-			temporality = metrictypes.Unknown
+		var metricType metrictypes.Type
+		var isMonotonic bool
+		if err := rows.Scan(&metricName, &temporality, &metricType, &isMonotonic); err != nil {
+			return nil, nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to scan temporality result")
 		}
 		if temporality != metrictypes.Unknown {
-			result[metricName] = append(result[metricName], temporality)
+			temporalities[metricName] = append(temporalities[metricName], temporality)
 		}
+		if metricType == metrictypes.SumType && !isMonotonic {
+			metricType = metrictypes.GaugeType
+		}
+		types[metricName] = metricType
 	}
 	if err := rows.Err(); err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "error iterating over metrics temporality rows")
+		return nil, nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "error iterating over metrics temporality rows")
 	}
 
-	return result, nil
+	return temporalities, types, nil
 }
 
-func (t *telemetryMetaStore) fetchMeterSourceMetricsTemporality(ctx context.Context, metricNames ...string) (map[string]metrictypes.Temporality, error) {
-	result := make(map[string]metrictypes.Temporality)
+func (t *telemetryMetaStore) fetchMeterSourceMetricsTemporalityAndType(ctx context.Context, metricNames ...string) (map[string]metrictypes.Temporality, map[string]metrictypes.Type, error) {
+	temporalities := make(map[string]metrictypes.Temporality)
+	types := make(map[string]metrictypes.Type)
 
 	sb := sqlbuilder.Select(
 		"metric_name",
 		"argMax(temporality, unix_milli) as temporality",
+		"any(type) AS type",
 	).From(t.meterDBName + "." + t.meterFieldsTblName)
 
 	// Filter by metric names (in the temporality column due to data mix-up)
@@ -1733,35 +1742,27 @@ func (t *telemetryMetaStore) fetchMeterSourceMetricsTemporality(ctx context.Cont
 
 	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
 	if err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to fetch meter metric temporality")
+		return nil, nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to fetch meter metric temporality")
 	}
 	defer rows.Close()
 
 	// Process results
 	for rows.Next() {
-		var metricName, temporalityStr string
-		if err := rows.Scan(&metricName, &temporalityStr); err != nil {
-			return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to scan temporality result")
-		}
-
-		// Convert string to Temporality type
+		var metricName string
 		var temporality metrictypes.Temporality
-		switch temporalityStr {
-		case "Delta":
-			temporality = metrictypes.Delta
-		case "Cumulative":
-			temporality = metrictypes.Cumulative
-		case "Unspecified":
-			temporality = metrictypes.Unspecified
-		default:
-			// Unknown or empty temporality
-			temporality = metrictypes.Unknown
+		var metricType metrictypes.Type
+		var isMonotonic bool
+		if err := rows.Scan(&metricName, &temporality, &metricType, &isMonotonic); err != nil {
+			return nil, nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to scan temporality result")
 		}
-
-		result[metricName] = temporality
+		if metricType == metrictypes.SumType && !isMonotonic {
+			metricType = metrictypes.GaugeType
+		}
+		temporalities[metricName] = temporality
+		types[metricName] = metricType
 	}
 
-	return result, nil
+	return temporalities, types, nil
 }
 
 // chunkSizeFirstSeenMetricMetadata limits the number of tuples per SQL query to avoid hitting the max_query_size limit.

pkg/telemetrymetadata/tables.go

@@ -7,6 +7,7 @@ const (
 	AttributesMetadataTableName      = "distributed_attributes_metadata"
 	AttributesMetadataLocalTableName = "attributes_metadata"
 	PathTypesTableName               = otelcollectorconst.DistributedPathTypesTable
-	PromotedPathsTableName           = otelcollectorconst.DistributedPromotedPathsTable
+	// Column Evolution table stores promoted paths as (signal, column_name, field_context, field_name); see signoz-otel-collector metadata_migrations.
+	PromotedPathsTableName           = "distributed_column_evolution_metadata"
 	SkipIndexTableName               = "system.data_skipping_indices"
 )

pkg/telemetrymetrics/statement_builder.go

@@ -123,8 +123,7 @@ func (b *MetricQueryStatementBuilder) buildPipelineStatement(
 	origTimeAgg := query.Aggregations[0].TimeAggregation
 	origGroupBy := slices.Clone(query.GroupBy)
 
-	if query.Aggregations[0].SpaceAggregation.IsPercentile() &&
-		query.Aggregations[0].Type != metrictypes.ExpHistogramType {
+	if query.Aggregations[0].Type == metrictypes.HistogramType {
 		// add le in the group by if doesn't exist
 		leExists := false
 		for _, g := range query.GroupBy {
@@ -154,7 +153,11 @@ func (b *MetricQueryStatementBuilder) buildPipelineStatement(
 		}
 
 		// make the time aggregation rate and space aggregation sum
-		query.Aggregations[0].TimeAggregation = metrictypes.TimeAggregationRate
+		if query.Aggregations[0].SpaceAggregation.IsPercentile() {
+			query.Aggregations[0].TimeAggregation = metrictypes.TimeAggregationRate
+		} else {
+			query.Aggregations[0].TimeAggregation = metrictypes.TimeAggregationIncrease
+		}
 		query.Aggregations[0].SpaceAggregation = metrictypes.SpaceAggregationSum
 	}
 
@@ -551,6 +554,9 @@ func (b *MetricQueryStatementBuilder) BuildFinalSelect(
 	cteArgs [][]any,
 	query qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation],
 ) (*qbtypes.Statement, error) {
+	metricType := query.Aggregations[0].Type
+	spaceAgg := query.Aggregations[0].SpaceAggregation
+
 	combined := querybuilder.CombineCTEs(cteFragments)
 
 	var args []any
@@ -560,12 +566,8 @@ func (b *MetricQueryStatementBuilder) BuildFinalSelect(
 
 	sb := sqlbuilder.NewSelectBuilder()
 
-	var quantile float64
-	if query.Aggregations[0].SpaceAggregation.IsPercentile() {
-		quantile = query.Aggregations[0].SpaceAggregation.Percentile()
-	}
-
-	if quantile != 0 && query.Aggregations[0].Type != metrictypes.ExpHistogramType {
+	if metricType == metrictypes.HistogramType && spaceAgg.IsPercentile() {
+		quantile := query.Aggregations[0].SpaceAggregation.Percentile()
 		sb.Select("ts")
 		for _, g := range query.GroupBy {
 			sb.SelectMore(fmt.Sprintf("`%s`", g.TelemetryFieldKey.Name))
@@ -577,12 +579,36 @@ func (b *MetricQueryStatementBuilder) BuildFinalSelect(
 		sb.From("__spatial_aggregation_cte")
 		sb.GroupBy(querybuilder.GroupByKeys(query.GroupBy)...)
 		sb.GroupBy("ts")
+		if query.Having != nil && query.Having.Expression != "" {
+			rewriter := querybuilder.NewHavingExpressionRewriter()
+			rewrittenExpr := rewriter.RewriteForMetrics(query.Having.Expression, query.Aggregations)
+			sb.Having(rewrittenExpr)
+		}
+	} else if metricType == metrictypes.HistogramType && spaceAgg == metrictypes.SpaceAggregationCount && query.Aggregations[0].ComparisonSpaceAggregationParam != nil {
+		sb.Select("ts")
+
+		for _, g := range query.GroupBy {
+			sb.SelectMore(fmt.Sprintf("`%s`", g.TelemetryFieldKey.Name))
+		}
+
+		aggQuery, err := AggregationQueryForHistogramCountWithParams(query.Aggregations[0].ComparisonSpaceAggregationParam)
+		if err != nil {
+			return nil, err
+		}
+		sb.SelectMore(aggQuery)
+
+		sb.From("__spatial_aggregation_cte")
+
+		sb.GroupBy(querybuilder.GroupByKeys(query.GroupBy)...)
+		sb.GroupBy("ts")
+
 		if query.Having != nil && query.Having.Expression != "" {
 			rewriter := querybuilder.NewHavingExpressionRewriter()
 			rewrittenExpr := rewriter.RewriteForMetrics(query.Having.Expression, query.Aggregations)
 			sb.Having(rewrittenExpr)
 		}
 	} else {
+		// for count aggregation on histograms with no params, the exact result of spatial aggregation can be sent forward
 		sb.Select("*")
 		sb.From("__spatial_aggregation_cte")
 		if query.Having != nil && query.Having.Expression != "" {
@@ -593,6 +619,9 @@ func (b *MetricQueryStatementBuilder) BuildFinalSelect(
 	}
 	sb.OrderBy(querybuilder.GroupByKeys(query.GroupBy)...)
 	sb.OrderBy("ts")
+	if metricType == metrictypes.HistogramType && spaceAgg == metrictypes.SpaceAggregationCount && query.Aggregations[0].ComparisonSpaceAggregationParam == nil {
+		sb.OrderBy("toFloat64(le)")
+	}
 
 	q, a := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 	return &qbtypes.Statement{Query: combined + q, Args: append(args, a...)}, nil

pkg/telemetrymetrics/tables.go

@@ -1,6 +1,7 @@
 package telemetrymetrics
 
 import (
+	"fmt"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -308,3 +309,20 @@ func AggregationColumnForSamplesTable(
 	}
 	return aggregationColumn, nil
 }
+
+func AggregationQueryForHistogramCountWithParams(param *metrictypes.ComparisonSpaceAggregationParam) (string, error) {
+	if param == nil {
+		return "", errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "no aggregation param provided for histogram count")
+	}
+	histogramCountThreshold := param.Threshold
+
+	switch param.Operater {
+	case "<=":
+		return fmt.Sprintf("argMaxIf(value, toFloat64(le), toFloat64(le) <= %f) + (argMinIf(value, toFloat64(le), toFloat64(le) > %f) - argMaxIf(value, toFloat64(le), toFloat64(le) <= %f)) * (%f - maxIf(toFloat64(le), toFloat64(le) <= %f)) / (minIf(toFloat64(le), toFloat64(le) > %f) - maxIf(toFloat64(le), toFloat64(le) <= %f)) AS value", histogramCountThreshold, histogramCountThreshold, histogramCountThreshold, histogramCountThreshold, histogramCountThreshold, histogramCountThreshold, histogramCountThreshold), nil
+	case ">":
+		return fmt.Sprintf("argMax(value, toFloat64(le)) - (argMaxIf(value, toFloat64(le), toFloat64(le) <= %f) + (argMinIf(value, toFloat64(le), toFloat64(le) > %f) - argMaxIf(value, toFloat64(le), toFloat64(le) <= %f)) * (%f - maxIf(toFloat64(le), toFloat64(le) <= %f)) / (minIf(toFloat64(le), toFloat64(le) > %f) - maxIf(toFloat64(le), toFloat64(le) <= %f))) AS value", histogramCountThreshold, histogramCountThreshold, histogramCountThreshold, histogramCountThreshold, histogramCountThreshold, histogramCountThreshold, histogramCountThreshold), nil
+	default:
+		return "", errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "invalid space aggregation operator, should be one of the following: [`<=`, `>`]")
+	}
+
+}

pkg/types/metrictypes/metrictypes.go

@@ -2,6 +2,7 @@ package metrictypes
 
 import (
 	"database/sql/driver"
+	"fmt"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -256,3 +257,12 @@ type MetricTableHints struct {
 type MetricValueFilter struct {
 	Value float64
 }
+
+type ComparisonSpaceAggregationParam struct {
+	Operater  string  `json:"operator" required:"true"`
+	Threshold float64 `json:"threshold" required:"true"`
+}
+
+func (param ComparisonSpaceAggregationParam) StringValue() string {
+	return fmt.Sprintf("operator=%s:threshold=%f", param.Operater, param.Threshold)
+}

pkg/types/querybuildertypes/querybuildertypesv5/builder_elements.go

@@ -446,6 +446,8 @@ type MetricAggregation struct {
 	TimeAggregation metrictypes.TimeAggregation `json:"timeAggregation"`
 	// space aggregation to apply to the query
 	SpaceAggregation metrictypes.SpaceAggregation `json:"spaceAggregation"`
+	// param for space aggregation if needed
+	ComparisonSpaceAggregationParam *metrictypes.ComparisonSpaceAggregationParam `json:"comparisonSpaceAggregationParam"`
 	// table hints to use for the query
 	TableHints *metrictypes.MetricTableHints `json:"-"`
 	// value filter to apply to the query