chore: update test

.github/workflows/integrationci.yaml

@@ -54,7 +54,7 @@ jobs:
           - sqlite
         clickhouse-version:
           - 25.5.6
-          - 25.12.5
+          - 25.10.5
         schema-migrator-version:
           - v0.142.0
         postgres-version:

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

@@ -82,12 +82,6 @@ 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:
@@ -99,19 +93,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, metadataexporter, signozmeter]
+      exporters: [clickhousetraces, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
+      exporters: [clickhouselogsexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

deploy/docker/otel-collector-config.yaml

@@ -82,12 +82,6 @@ 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:
@@ -99,19 +93,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, metadataexporter, signozmeter]
+      exporters: [clickhousetraces, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
+      exporters: [clickhouselogsexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

frontend/src/AppRoutes/pageComponents.ts

@@ -308,15 +308,3 @@ 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,10 +1,12 @@
 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,
@@ -27,8 +29,6 @@ import {
 	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
-	MessagingQueuesMainPage,
-	MeterExplorerPage,
 	MetricsExplorer,
 	OldLogsExplorer,
 	Onboarding,
@@ -399,28 +399,28 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
@@ -463,21 +463,21 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.METER,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER_VIEWS,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER_EXPLORER_VIEWS',
 		isPrivate: true,
 	},

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

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

frontend/src/components/YAxisUnitSelector/__tests__/utils.test.tsx

@@ -1,5 +1,4 @@
-import { YAxisCategoryNames } from '../constants';
-import { UniversalYAxisUnit, YAxisCategory } from '../types';
+import { UniversalYAxisUnit } from '../types';
 import {
 	getUniversalNameFromMetricUnit,
 	mapMetricUnitToUniversalUnit,
@@ -42,29 +41,29 @@ describe('YAxisUnitSelector utils', () => {
 
 	describe('mergeCategories', () => {
 		it('merges categories correctly', () => {
-			const categories1: YAxisCategory[] = [
+			const categories1 = [
 				{
-					name: YAxisCategoryNames.Data,
+					name: 'Data',
 					units: [
 						{ name: 'bytes', id: UniversalYAxisUnit.BYTES },
 						{ name: 'kilobytes', id: UniversalYAxisUnit.KILOBYTES },
 					],
 				},
 			];
-			const categories2: YAxisCategory[] = [
+			const categories2 = [
 				{
-					name: YAxisCategoryNames.Data,
+					name: 'Data',
 					units: [{ name: 'bits', id: UniversalYAxisUnit.BITS }],
 				},
 				{
-					name: YAxisCategoryNames.Time,
+					name: 'Time',
 					units: [{ name: 'seconds', id: UniversalYAxisUnit.SECONDS }],
 				},
 			];
 			const mergedCategories = mergeCategories(categories1, categories2);
 			expect(mergedCategories).toEqual([
 				{
-					name: YAxisCategoryNames.Data,
+					name: 'Data',
 					units: [
 						{ name: 'bytes', id: UniversalYAxisUnit.BYTES },
 						{ name: 'kilobytes', id: UniversalYAxisUnit.KILOBYTES },
@@ -72,7 +71,7 @@ describe('YAxisUnitSelector utils', () => {
 					],
 				},
 				{
-					name: YAxisCategoryNames.Time,
+					name: 'Time',
 					units: [{ name: 'seconds', id: UniversalYAxisUnit.SECONDS }],
 				},
 			]);

frontend/src/components/YAxisUnitSelector/constants.ts

@@ -1,36 +1,5 @@
 import { UnitFamilyConfig, UniversalYAxisUnit, YAxisUnit } from './types';
 
-export enum YAxisCategoryNames {
-	Time = 'Time',
-	Data = 'Data',
-	DataRate = 'Data Rate',
-	Count = 'Count',
-	Operations = 'Operations',
-	Percentage = 'Percentage',
-	Boolean = 'Boolean',
-	None = 'None',
-	HashRate = 'Hash Rate',
-	Miscellaneous = 'Miscellaneous',
-	Acceleration = 'Acceleration',
-	Angular = 'Angular',
-	Area = 'Area',
-	Flops = 'FLOPs',
-	Concentration = 'Concentration',
-	Currency = 'Currency',
-	Datetime = 'Datetime',
-	PowerElectrical = 'Power/Electrical',
-	Flow = 'Flow',
-	Force = 'Force',
-	Mass = 'Mass',
-	Length = 'Length',
-	Pressure = 'Pressure',
-	Radiation = 'Radiation',
-	RotationSpeed = 'Rotation Speed',
-	Temperature = 'Temperature',
-	Velocity = 'Velocity',
-	Volume = 'Volume',
-}
-
 // Mapping of universal y-axis units to their AWS, UCUM, and OpenMetrics equivalents (if available)
 export const UniversalYAxisUnitMappings: Partial<
 	Record<UniversalYAxisUnit, Set<YAxisUnit> | null>

frontend/src/components/YAxisUnitSelector/data.ts

@@ -1,11 +1,10 @@
 import { Y_AXIS_UNIT_NAMES } from './constants';
-import { YAxisCategoryNames } from './constants';
 import { UniversalYAxisUnit, YAxisCategory } from './types';
 
 // Base categories for the universal y-axis units
 export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 	{
-		name: YAxisCategoryNames.Time,
+		name: 'Time',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.SECONDS],
@@ -38,7 +37,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Data,
+		name: 'Data',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES],
@@ -155,7 +154,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.DataRate,
+		name: 'Data Rate',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES_SECOND],
@@ -296,7 +295,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Count,
+		name: 'Count',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT],
@@ -313,7 +312,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Operations,
+		name: 'Operations',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.OPS_SECOND],
@@ -354,7 +353,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Percentage,
+		name: 'Percentage',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
@@ -367,7 +366,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Boolean,
+		name: 'Boolean',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TRUE_FALSE],
@@ -383,7 +382,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 
 export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 	{
-		name: YAxisCategoryNames.Time,
+		name: 'Time',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DURATION_MS],
@@ -420,7 +419,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.DataRate,
+		name: 'Data Rate',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DATA_RATE_PACKETS_PER_SECOND],
@@ -429,7 +428,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Boolean,
+		name: 'Boolean',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ON_OFF],
@@ -438,7 +437,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.None,
+		name: 'None',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NONE],
@@ -447,7 +446,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.HashRate,
+		name: 'Hash Rate',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.HASH_RATE_HASHES_PER_SECOND],
@@ -480,7 +479,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Miscellaneous,
+		name: 'Miscellaneous',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MISC_STRING],
@@ -521,7 +520,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Acceleration,
+		name: 'Acceleration',
 		units: [
 			{
 				name:
@@ -542,7 +541,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Angular,
+		name: 'Angular',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ANGULAR_DEGREE],
@@ -567,7 +566,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Area,
+		name: 'Area',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.AREA_SQUARE_METERS],
@@ -584,7 +583,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Flops,
+		name: 'FLOPs',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FLOPS_FLOPS],
@@ -621,7 +620,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Concentration,
+		name: 'Concentration',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.CONCENTRATION_PPM],
@@ -678,7 +677,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Currency,
+		name: 'Currency',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.CURRENCY_USD],
@@ -775,7 +774,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Datetime,
+		name: 'Datetime',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DATETIME_ISO],
@@ -812,7 +811,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.PowerElectrical,
+		name: 'Power/Electrical',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.POWER_WATT],
@@ -969,7 +968,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Flow,
+		name: 'Flow',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FLOW_GALLONS_PER_MINUTE],
@@ -1006,7 +1005,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Force,
+		name: 'Force',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FORCE_NEWTON_METERS],
@@ -1027,7 +1026,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Mass,
+		name: 'Mass',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MASS_MILLIGRAM],
@@ -1052,7 +1051,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Length,
+		name: 'Length',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.LENGTH_MILLIMETER],
@@ -1081,7 +1080,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Pressure,
+		name: 'Pressure',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PRESSURE_MILLIBAR],
@@ -1118,7 +1117,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Radiation,
+		name: 'Radiation',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.RADIATION_BECQUEREL],
@@ -1175,7 +1174,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.RotationSpeed,
+		name: 'Rotation Speed',
 		units: [
 			{
 				name:
@@ -1201,7 +1200,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Temperature,
+		name: 'Temperature',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TEMPERATURE_CELSIUS],
@@ -1218,7 +1217,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Velocity,
+		name: 'Velocity',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.VELOCITY_METERS_PER_SECOND],
@@ -1239,7 +1238,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: YAxisCategoryNames.Volume,
+		name: 'Volume',
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.VOLUME_MILLILITER],

frontend/src/components/YAxisUnitSelector/types.ts

@@ -1,5 +1,3 @@
-import { YAxisCategoryNames } from './constants';
-
 export interface YAxisUnitSelectorProps {
 	value: string | undefined;
 	onChange: (value: UniversalYAxisUnit) => void;
@@ -671,7 +669,7 @@ export interface UnitFamilyConfig {
 }
 
 export interface YAxisCategory {
-	name: YAxisCategoryNames;
+	name: string;
 	units: {
 		name: string;
 		id: UniversalYAxisUnit;

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -1,17 +1,10 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { MemoryRouter, useLocation } from 'react-router-dom';
-import ROUTES from 'constants/routes';
 import { getNonIntegrationDashboardById } from 'mocks-server/__mockdata__/dashboards';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
-import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
 import DashboardDescription from '..';
 
@@ -24,7 +17,6 @@ const DASHBOARD_TITLE_TEXT = 'thor';
 const DASHBOARD_PATH = '/dashboard/4';
 
 const mockSafeNavigate = jest.fn();
-const mockNavigate = jest.fn();
 
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
@@ -36,11 +28,6 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useNavigate: (): jest.Mock => mockNavigate,
-}));
-
 jest.mock(
 	'container/TopNav/DateTimeSelectionV2/index.tsx',
 	() =>
@@ -58,7 +45,6 @@ jest.mock('hooks/useSafeNavigate', () => ({
 describe('Dashboard landing page actions header tests', () => {
 	beforeEach(() => {
 		mockSafeNavigate.mockClear();
-		mockNavigate.mockClear();
 	});
 
 	it('unlock dashboard should be disabled for integrations created dashboards', async () => {
@@ -138,7 +124,7 @@ describe('Dashboard landing page actions header tests', () => {
 		await waitFor(() => expect(lockUnlockButton).not.toBeDisabled());
 	});
 
-	it('should navigate back to the dashboard list when clicking the dashboard breadcrumb', async () => {
+	it('should navigate to dashboard list with correct params and exclude variables', async () => {
 		const dashboardUrlWithVariables = `${DASHBOARD_PATH}?variables=%7B%22var1%22%3A%22value1%22%7D&otherParam=test`;
 		const mockLocation = {
 			pathname: DASHBOARD_PATH,
@@ -147,17 +133,6 @@ describe('Dashboard landing page actions header tests', () => {
 
 		(useLocation as jest.Mock).mockReturnValue(mockLocation);
 
-		// Simulate having browser history so navigate(-1) fires rather than the
-		// ROUTES.ALL_DASHBOARD fallback.
-		const originalDescriptor = Object.getOwnPropertyDescriptor(
-			window.history,
-			'length',
-		);
-		Object.defineProperty(window.history, 'length', {
-			configurable: true,
-			get: (): number => 2,
-		});
-
 		const { getByText } = render(
 			<MemoryRouter initialEntries={[dashboardUrlWithVariables]}>
 				<DashboardProvider>
@@ -179,55 +154,27 @@ describe('Dashboard landing page actions header tests', () => {
 			),
 		);
 
+		// Click the dashboard breadcrumb to navigate back to list
 		const dashboardButton = getByText('Dashboard /');
-		await userEvent.click(dashboardButton);
+		fireEvent.click(dashboardButton);
 
-		expect(mockNavigate).toHaveBeenCalledWith(-1);
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-
-		// Restore original state: if there was no own property before, delete the
-		// override so window.history.length falls back to the prototype value again.
-		if (originalDescriptor) {
-			Object.defineProperty(window.history, 'length', originalDescriptor);
-		} else {
-			Reflect.deleteProperty(window.history, 'length');
-		}
-	});
-
-	it('should navigate to dashboard list page when there is no browser history', async () => {
-		const mockLocation = {
-			pathname: DASHBOARD_PATH,
-			search: '',
-		};
-
-		(useLocation as jest.Mock).mockReturnValue(mockLocation);
-
-		// jsdom default: window.history.length === 1, so the fallback fires.
-		const { getByText } = render(
-			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardProvider>
-					<DashboardDescription
-						handle={{
-							active: false,
-							enter: (): Promise<void> => Promise.resolve(),
-							exit: (): Promise<void> => Promise.resolve(),
-							node: { current: null },
-						}}
-					/>
-				</DashboardProvider>
-			</MemoryRouter>,
+		// Verify navigation was called with correct URL
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			'/dashboard?columnKey=updatedAt&order=descend&page=1&search=',
 		);
 
-		await waitFor(() =>
-			expect(screen.getByTestId(DASHBOARD_TEST_ID)).toHaveTextContent(
-				DASHBOARD_TITLE_TEXT,
-			),
-		);
+		// Ensure the URL contains only essential dashboard list params
+		const calledUrl = mockSafeNavigate.mock.calls[0][0] as string;
+		const urlParams = new URLSearchParams(calledUrl.split('?')[1]);
 
-		const dashboardButton = getByText('Dashboard /');
-		await userEvent.click(dashboardButton);
+		// Should have essential dashboard list params
+		expect(urlParams.get('columnKey')).toBe('updatedAt');
+		expect(urlParams.get('order')).toBe('descend');
+		expect(urlParams.get('page')).toBe('1');
+		expect(urlParams.get('search')).toBe('');
 
-		expect(mockNavigate).toHaveBeenCalledWith(ROUTES.ALL_DASHBOARD);
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
+		// Should NOT have variables or other dashboard-specific params
+		expect(urlParams.has('variables')).toBeFalsy();
+		expect(urlParams.has('relativeTime')).toBeFalsy();
 	});
 });

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

@@ -9,7 +9,6 @@ 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,
@@ -32,9 +31,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
 
 	const { dashboardVariables } = useDashboardVariables();
-	const dashboardId = useDashboardVariablesSelector(
-		(state) => state.dashboardId,
-	);
 	const sortedVariablesArray = useDashboardVariablesSelector(
 		(state) => state.sortedVariablesArray,
 	);
@@ -100,28 +96,6 @@ 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 };
@@ -156,12 +130,10 @@ function DashboardVariableSelection(): JSX.Element | null {
 				return prev;
 			});
 
-			// Cascade: enqueue query-type descendants for refetching.
-			// Safe to call synchronously now that the store already has the updated value.
+			// Cascade: enqueue query-type descendants for refetching
 			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 } from 'lodash-es';
+import { isArray, isEmpty, isString } 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,
-		getDefaultValue,
+		applyDefaultIfNeeded,
 	} = useDashboardVariableSelectHelper({
 		variableData,
 		optionsData,
@@ -68,93 +68,81 @@ 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)
 				) {
-					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),
+					const newOptionsData = sortValues(
+						variablesRes?.variableValues,
+						variableData.sort,
 					);
-				} else if (
-					variableData.selectedValue &&
-					!sortedNewOptions.includes(variableData.selectedValue)
-				) {
-					isSelectedValueMissingInNewOptions = true;
-				}
 
-				// 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);
+					const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
 
-					// Update tempSelection to maintain ALL state when dropdown is open
-					if (tempSelection !== undefined) {
-						setTempSelection(sortedNewOptions.map((option) => option.toString()));
-					}
-					return;
-				}
+					if (!areArraysEqual(newOptionsData, oldOptionsData)) {
+						let valueNotInList = false;
 
-				const value = variableData.selectedValue;
-				let allSelected = false;
+						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;
+						}
 
-				if (variableData.multiSelect) {
-					const { selectedValue } = variableData;
-					allSelected =
-						sortedNewOptions.length > 0 &&
-						Array.isArray(selectedValue) &&
-						sortedNewOptions.every((option) => selectedValue.includes(option));
-				}
+						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.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,
-						);
+								// 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);
 					}
 				}
 			} catch (e) {
@@ -167,7 +155,7 @@ function QueryVariableInput({
 			onValueUpdate,
 			tempSelection,
 			setTempSelection,
-			getDefaultValue,
+			applyDefaultIfNeeded,
 		],
 	);
 

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

@@ -1,6 +1,5 @@
 /* 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,
@@ -11,7 +10,6 @@ import {
 	IDashboardVariablesStoreState,
 } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import {
-	enqueueDescendantsOfVariable,
 	enqueueFetchOfAllVariables,
 	initializeVariableFetchStore,
 } from 'providers/Dashboard/store/variableFetchStore';
@@ -19,17 +17,6 @@ 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();
@@ -69,14 +56,10 @@ jest.mock('react-redux', () => ({
 	useSelector: jest.fn().mockReturnValue({ minTime: 1000, maxTime: 2000 }),
 }));
 
-// VariableItem mock captures the onValueUpdate prop for use in onValueUpdate tests
+// Mock VariableItem to avoid rendering complexity
 jest.mock('../VariableItem', () => ({
 	__esModule: true,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	default: (props: any): JSX.Element => {
-		mockVariableItemCallbacks.onValueUpdate = props.onValueUpdate;
-		return <div data-testid="variable-item" />;
-	},
+	default: (): JSX.Element => <div data-testid="variable-item" />,
 }));
 
 function createVariable(
@@ -217,162 +200,4 @@ 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

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

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
 import { Button } from 'antd';
 import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { LayoutGrid } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { DashboardData } from 'types/api/dashboard/getAll';
@@ -11,8 +11,8 @@ import { Base64Icons } from '../../DashboardSettings/General/utils';
 import './DashboardBreadcrumbs.styles.scss';
 
 function DashboardBreadcrumbs(): JSX.Element {
-	const navigate = useNavigate();
-	const { selectedDashboard } = useDashboard();
+	const { safeNavigate } = useSafeNavigate();
+	const { selectedDashboard, listSortOrder } = useDashboard();
 
 	const selectedData = selectedDashboard
 		? {
@@ -24,12 +24,15 @@ function DashboardBreadcrumbs(): JSX.Element {
 	const { title = '', image = Base64Icons[0] } = selectedData || {};
 
 	const goToListPage = useCallback(() => {
-		if (window.history.length > 1) {
-			navigate(-1);
-		} else {
-			navigate(ROUTES.ALL_DASHBOARD);
-		}
-	}, [navigate]);
+		const urlParams = new URLSearchParams();
+		urlParams.set('columnKey', listSortOrder.columnKey as string);
+		urlParams.set('order', listSortOrder.order as string);
+		urlParams.set('page', listSortOrder.pagination as string);
+		urlParams.set('search', listSortOrder.search as string);
+
+		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
+		safeNavigate(generatedUrl);
+	}, [listSortOrder, safeNavigate]);
 
 	return (
 		<div className="dashboard-breadcrumbs">

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -172,51 +172,23 @@ function ExplorerOptions({
 	const { user } = useAppContext();
 
 	const handleConditionalQueryModification = useCallback(
-		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(defaultQuery: Query | null): string => {
 			const queryToUse = defaultQuery || query;
-			if (!queryToUse) {
-				throw new Error('No query provided');
-			}
 			if (
 				queryToUse?.builder?.queryData?.[0]?.aggregateOperator !==
-					StringOperators.NOOP &&
-				sourcepage !== DataSource.LOGS
+				StringOperators.NOOP
 			) {
 				return JSON.stringify(queryToUse);
 			}
 
-			// Convert NOOP to COUNT for alerts and strip orderBy for logs
+			// Modify aggregateOperator to count, as noop is not supported in alerts
 			const modifiedQuery = cloneDeep(queryToUse);
-			if (modifiedQuery && modifiedQuery.builder?.queryData) {
-				modifiedQuery.builder.queryData = modifiedQuery.builder.queryData.map(
-					(item) => {
-						const updatedItem = { ...item };
 
-						if (updatedItem.aggregateOperator === StringOperators.NOOP) {
-							updatedItem.aggregateOperator = StringOperators.COUNT;
-						}
+			modifiedQuery.builder.queryData[0].aggregateOperator = StringOperators.COUNT;
 
-						// Alerts do not support order by on logs explorer queries
-						if (sourcepage === DataSource.LOGS && panelType === PANEL_TYPES.LIST) {
-							updatedItem.orderBy = [];
-						}
-
-						return updatedItem;
-					},
-				);
-			}
-
-			try {
-				return JSON.stringify(modifiedQuery);
-			} catch (err) {
-				throw new Error(
-					'Failed to stringify modified query: ' +
-						(err instanceof Error ? err.message : String(err)),
-				);
-			}
+			return JSON.stringify(modifiedQuery);
 		},
-		[panelType, query, sourcepage],
+		[query],
 	);
 
 	const onCreateAlertsHandler = useCallback(
@@ -785,9 +757,9 @@ function ExplorerOptions({
 		);
 	}, [
 		disabled,
-		query,
 		isOneChartPerQuery,
 		onCreateAlertsHandler,
+		query,
 		splitedQueries,
 	]);
 

frontend/src/container/ExplorerOptions/__tests__/ExplorerOptionWrapper.test.tsx

@@ -1,4 +1,3 @@
-import { useHistory } from 'react-router-dom';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { MOCK_QUERY } from 'container/QueryTable/Drilldown/__tests__/mockTableData';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
@@ -16,11 +15,6 @@ import { getExplorerToolBarVisibility } from '../utils';
 // Mock dependencies
 jest.mock('hooks/dashboard/useUpdateDashboard');
 
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useHistory: jest.fn(),
-}));
-
 jest.mock('../utils', () => ({
 	getExplorerToolBarVisibility: jest.fn(),
 	generateRGBAFromHex: jest.fn(() => 'rgba(0, 0, 0, 0.08)'),
@@ -35,7 +29,6 @@ const mockGetExplorerToolBarVisibility = jest.mocked(
 );
 
 const mockUseUpdateDashboard = jest.mocked(useUpdateDashboard);
-const mockUseHistory = jest.mocked(useHistory);
 
 // Mock data
 const TEST_QUERY_ID = 'test-query-id';
@@ -110,6 +103,7 @@ describe('ExplorerOptionWrapper', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockGetExplorerToolBarVisibility.mockReturnValue(true);
+
 		// Mock useUpdateDashboard to return a mutation object
 		mockUseUpdateDashboard.mockReturnValue(({
 			mutate: jest.fn(),
@@ -123,28 +117,6 @@ describe('ExplorerOptionWrapper', () => {
 		} as unknown) as ReturnType<typeof useUpdateDashboard>);
 	});
 
-	it('should navigate to alert creation page when "Create an Alert" is clicked in logs-explorer', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const mockPush = jest.fn();
-		mockUseHistory.mockReturnValue(({
-			push: mockPush,
-		} as unknown) as ReturnType<typeof useHistory>);
-
-		renderExplorerOptionWrapper({ sourcepage: DataSource.LOGS });
-
-		const createAlertButton = screen.getByRole('button', {
-			name: 'Create an Alert',
-		});
-		await user.click(createAlertButton);
-
-		expect(mockPush).toHaveBeenCalledTimes(1);
-		const calledWith = mockPush.mock.calls[0][0] as string;
-		const [path, search = ''] = calledWith.split('?');
-		expect(path).toBe('/alerts/new');
-		const params = new URLSearchParams(search);
-		expect(params.has('compositeQuery')).toBe(true);
-	});
-
 	describe('onExport functionality', () => {
 		it('should call onExport when New Dashboard button is clicked in export modal', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -45,7 +45,6 @@ import {
 } from 'container/DashboardContainer/DashboardDescription/utils';
 import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
 import dayjs from 'dayjs';
-import { useDashboardListSortOrder } from 'hooks/dashboard/useDashboardListSortOrder';
 import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -77,6 +76,7 @@ import {
 // see more: https://github.com/lucide-icons/lucide/issues/94
 import { handleContactSupport } from 'pages/Integrations/utils';
 import { useAppContext } from 'providers/App/App';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
 import {
@@ -104,19 +104,22 @@ function DashboardsList(): JSX.Element {
 	const {
 		data: dashboardListResponse,
 		isLoading: isDashboardListLoading,
-		isFetching: isDashboardListFetching,
+		isRefetching: isDashboardListRefetching,
 		error: dashboardFetchError,
 		refetch: refetchDashboardList,
 	} = useGetAllDashboard();
 
 	const { user } = useAppContext();
 	const { safeNavigate } = useSafeNavigate();
-	const { listSortOrder, setListSortOrder } = useDashboardListSortOrder();
+	const {
+		listSortOrder: sortOrder,
+		setListSortOrder: setSortOrder,
+	} = useDashboard();
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
 	const [searchString, setSearchString] = useState<string>(
-		listSortOrder.search || '',
+		sortOrder.search || '',
 	);
 	const [action, createNewDashboard] = useComponentPermission(
 		['action', 'create_new_dashboards'],
@@ -136,6 +139,7 @@ function DashboardsList(): JSX.Element {
 	] = useState<boolean>(false);
 
 	const [uploadedGrafana, setUploadedGrafana] = useState<boolean>(false);
+	const [isFilteringDashboards, setIsFilteringDashboards] = useState(false);
 	const [isConfigureMetadataOpen, setIsConfigureMetadata] = useState<boolean>(
 		false,
 	);
@@ -183,34 +187,76 @@ function DashboardsList(): JSX.Element {
 		}
 	}
 
-	const dashboards = useMemo((): Dashboard[] => {
-		const filtered = filterDashboard(
-			searchString,
-			dashboardListResponse?.data || [],
+	const [dashboards, setDashboards] = useState<Dashboard[]>();
+
+	const sortDashboardsByCreatedAt = (dashboards: Dashboard[]): void => {
+		const sortedDashboards = dashboards.sort(
+			(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
 		);
-		if (listSortOrder.columnKey === 'createdAt') {
-			return filtered.sort(
-				(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-			);
-		}
-		return filtered.sort(
+		setDashboards(sortedDashboards);
+	};
+
+	const sortDashboardsByUpdatedAt = (dashboards: Dashboard[]): void => {
+		const sortedDashboards = dashboards.sort(
 			(a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
 		);
-	}, [dashboardListResponse?.data, searchString, listSortOrder.columnKey]);
+		setDashboards(sortedDashboards);
+	};
 
 	const sortHandle = (key: string): void => {
-		setListSortOrder({
-			columnKey: key,
-			order: 'descend',
-			pagination: listSortOrder.pagination || '1',
-			search: listSortOrder.search || '',
-		});
+		if (!dashboards) {
+			return;
+		}
+		if (key === 'createdAt') {
+			sortDashboardsByCreatedAt(dashboards);
+			setSortOrder({
+				columnKey: 'createdAt',
+				order: 'descend',
+				pagination: sortOrder.pagination || '1',
+				search: sortOrder.search || '',
+			});
+		} else if (key === 'updatedAt') {
+			sortDashboardsByUpdatedAt(dashboards);
+			setSortOrder({
+				columnKey: 'updatedAt',
+				order: 'descend',
+				pagination: sortOrder.pagination || '1',
+				search: sortOrder.search || '',
+			});
+		}
 	};
 
 	function handlePageSizeUpdate(page: number): void {
-		setListSortOrder({ ...listSortOrder, pagination: String(page) });
+		setSortOrder({ ...sortOrder, pagination: String(page) });
 	}
 
+	useEffect(() => {
+		const filteredDashboards = filterDashboard(
+			searchString,
+			dashboardListResponse?.data || [],
+		);
+		if (sortOrder.columnKey === 'updatedAt') {
+			sortDashboardsByUpdatedAt(filteredDashboards || []);
+		} else if (sortOrder.columnKey === 'createdAt') {
+			sortDashboardsByCreatedAt(filteredDashboards || []);
+		} else if (sortOrder.columnKey === 'null') {
+			setSortOrder({
+				columnKey: 'updatedAt',
+				order: 'descend',
+				pagination: sortOrder.pagination || '1',
+				search: sortOrder.search || '',
+			});
+			sortDashboardsByUpdatedAt(filteredDashboards || []);
+		}
+	}, [
+		dashboardListResponse,
+		searchString,
+		setSortOrder,
+		sortOrder.columnKey,
+		sortOrder.pagination,
+		sortOrder.search,
+	]);
+
 	const [newDashboardState, setNewDashboardState] = useState({
 		loading: false,
 		error: false,
@@ -219,25 +265,26 @@ function DashboardsList(): JSX.Element {
 
 	const { showErrorModal } = useErrorModal();
 
-	const data: Data[] = dashboards.map((e) => ({
-		createdAt: e.createdAt,
-		description: e.data.description || '',
-		id: e.id,
-		lastUpdatedTime: e.updatedAt,
-		name: e.data.title,
-		tags: e.data.tags || [],
-		key: e.id,
-		createdBy: e.createdBy,
-		isLocked: !!e.locked || false,
-		lastUpdatedBy: e.updatedBy,
-		image: e.data.image || Base64Icons[0],
-		variables: e.data.variables,
-		widgets: e.data.widgets,
-		layout: e.data.layout,
-		panelMap: e.data.panelMap,
-		version: e.data.version,
-		refetchDashboardList,
-	}));
+	const data: Data[] =
+		dashboards?.map((e) => ({
+			createdAt: e.createdAt,
+			description: e.data.description || '',
+			id: e.id,
+			lastUpdatedTime: e.updatedAt,
+			name: e.data.title,
+			tags: e.data.tags || [],
+			key: e.id,
+			createdBy: e.createdBy,
+			isLocked: !!e.locked || false,
+			lastUpdatedBy: e.updatedBy,
+			image: e.data.image || Base64Icons[0],
+			variables: e.data.variables,
+			widgets: e.data.widgets,
+			layout: e.data.layout,
+			panelMap: e.data.panelMap,
+			version: e.data.version,
+			refetchDashboardList,
+		})) || [];
 
 	const onNewDashboardHandler = useCallback(async () => {
 		try {
@@ -277,9 +324,16 @@ function DashboardsList(): JSX.Element {
 	};
 
 	const handleSearch = (event: ChangeEvent<HTMLInputElement>): void => {
+		setIsFilteringDashboards(true);
 		const searchText = (event as React.BaseSyntheticEvent)?.target?.value || '';
+		const filteredDashboards = filterDashboard(
+			searchText,
+			dashboardListResponse?.data || [],
+		);
+		setDashboards(filteredDashboards);
+		setIsFilteringDashboards(false);
 		setSearchString(searchText);
-		setListSortOrder({ ...listSortOrder, search: searchText });
+		setSortOrder({ ...sortOrder, search: searchText });
 	};
 
 	const [state, setCopy] = useCopyToClipboard();
@@ -617,8 +671,8 @@ function DashboardsList(): JSX.Element {
 		showTotal: showPaginationItem,
 		showSizeChanger: false,
 		onChange: (page: any): void => handlePageSizeUpdate(page),
-		current: Number(listSortOrder.pagination),
-		defaultCurrent: Number(listSortOrder.pagination) || 1,
+		current: Number(sortOrder.pagination),
+		defaultCurrent: Number(sortOrder.pagination) || 1,
 		hideOnSinglePage: true,
 	};
 
@@ -656,7 +710,9 @@ function DashboardsList(): JSX.Element {
 					)}
 				</div>
 
-				{isDashboardListFetching ? (
+				{isDashboardListLoading ||
+				isFilteringDashboards ||
+				isDashboardListRefetching ? (
 					<div className="loading-dashboard-details">
 						<Skeleton.Input active size="large" className="skeleton-1" />
 						<Skeleton.Input active size="large" className="skeleton-1" />
@@ -693,7 +749,7 @@ function DashboardsList(): JSX.Element {
 							<ArrowUpRight size={16} className="learn-more-arrow" />
 						</section>
 					</div>
-				) : dashboards.length === 0 && !searchString ? (
+				) : dashboards?.length === 0 && !searchString ? (
 					<div className="dashboard-empty-state">
 						<img
 							src="/Icons/dashboards.svg"
@@ -775,7 +831,7 @@ function DashboardsList(): JSX.Element {
 							)}
 						</div>
 
-						{dashboards.length === 0 ? (
+						{dashboards?.length === 0 ? (
 							<div className="no-search">
 								<img src="/Icons/emptyState.svg" alt="img" className="img" />
 								<Typography.Text className="text">
@@ -804,7 +860,7 @@ function DashboardsList(): JSX.Element {
 															data-testid="sort-by-last-created"
 														>
 															Last created
-															{listSortOrder.columnKey === 'createdAt' && <Check size={14} />}
+															{sortOrder.columnKey === 'createdAt' && <Check size={14} />}
 														</Button>
 														<Button
 															type="text"
@@ -813,7 +869,7 @@ function DashboardsList(): JSX.Element {
 															data-testid="sort-by-last-updated"
 														>
 															Last updated
-															{listSortOrder.columnKey === 'updatedAt' && <Check size={14} />}
+															{sortOrder.columnKey === 'updatedAt' && <Check size={14} />}
 														</Button>
 													</div>
 												}
@@ -855,7 +911,11 @@ function DashboardsList(): JSX.Element {
 									columns={columns}
 									dataSource={data}
 									showSorterTooltip
-									loading={isDashboardListFetching}
+									loading={
+										isDashboardListLoading ||
+										isFilteringDashboards ||
+										isDashboardListRefetching
+									}
 									showHeader={false}
 									pagination={paginationConfig}
 								/>
@@ -904,12 +964,12 @@ function DashboardsList(): JSX.Element {
 						<div className="configure-preview">
 							<section className="header">
 								<img
-									src={dashboards[0]?.data?.image || Base64Icons[0]}
+									src={dashboards?.[0]?.data?.image || Base64Icons[0]}
 									alt="dashboard-image"
 									style={{ height: '14px', width: '14px' }}
 								/>
 								<Typography.Text className="title">
-									{dashboards[0]?.data?.title}
+									{dashboards?.[0]?.data?.title}
 								</Typography.Text>
 							</section>
 							<section className="details">
@@ -917,16 +977,16 @@ function DashboardsList(): JSX.Element {
 									{visibleColumns.createdAt && (
 										<Typography.Text className="formatted-time">
 											<CalendarClock size={14} />
-											{getFormattedTime(dashboards[0] as Dashboard, 'created_at')}
+											{getFormattedTime(dashboards?.[0] as Dashboard, 'created_at')}
 										</Typography.Text>
 									)}
 									{visibleColumns.createdBy && (
 										<div className="user">
 											<Typography.Text className="user-tag">
-												{dashboards[0]?.createdBy?.substring(0, 1).toUpperCase()}
+												{dashboards?.[0]?.createdBy?.substring(0, 1).toUpperCase()}
 											</Typography.Text>
 											<Typography.Text className="dashboard-created-by">
-												{dashboards[0]?.createdBy}
+												{dashboards?.[0]?.createdBy}
 											</Typography.Text>
 										</div>
 									)}
@@ -935,16 +995,16 @@ function DashboardsList(): JSX.Element {
 									{visibleColumns.updatedAt && (
 										<Typography.Text className="formatted-time">
 											<CalendarClock size={14} />
-											{onLastUpdated(dashboards[0]?.updatedAt || '')}
+											{onLastUpdated(dashboards?.[0]?.updatedAt || '')}
 										</Typography.Text>
 									)}
 									{visibleColumns.updatedBy && (
 										<div className="user">
 											<Typography.Text className="user-tag">
-												{dashboards[0]?.updatedBy?.substring(0, 1).toUpperCase()}
+												{dashboards?.[0]?.updatedBy?.substring(0, 1).toUpperCase()}
 											</Typography.Text>
 											<Typography.Text className="dashboard-created-by">
-												{dashboards[0]?.updatedBy}
+												{dashboards?.[0]?.updatedBy}
 											</Typography.Text>
 										</div>
 									)}

frontend/src/container/LogDetailedView/Overview.tsx

@@ -1,7 +1,6 @@
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
-import type { InputRef } from 'antd';
 import {
 	Button,
 	Collapse,
@@ -47,23 +46,12 @@ function Overview({
 	handleChangeSelectedView,
 }: Props): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
-	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(true);
+	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(false);
 	const [isAttributesExpanded, setIsAttributesExpanded] = useState<boolean>(
 		true,
 	);
 	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
 
-	const focusTimerRef = useRef<ReturnType<typeof setTimeout>>();
-
-	const searchInputRef = useCallback((node: InputRef | null) => {
-		clearTimeout(focusTimerRef.current);
-		if (node) {
-			focusTimerRef.current = setTimeout(() => node.focus(), 100);
-		}
-	}, []);
-
-	useEffect(() => (): void => clearTimeout(focusTimerRef.current), []);
-
 	const isDarkMode = useIsDarkMode();
 
 	const options: EditorProps['options'] = {
@@ -208,7 +196,7 @@ function Overview({
 							<>
 								{isSearchVisible && (
 									<Input
-										ref={searchInputRef}
+										autoFocus
 										placeholder="Search for a field..."
 										className="search-input"
 										value={fieldSearchInput}

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

@@ -1,34 +0,0 @@
-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,16 +1,7 @@
 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,
@@ -76,13 +67,8 @@ export function getColorsForSeverityLabels(
 	label: string,
 	index: number,
 ): string {
-	const trimmed = label.trim();
-
-	if (!trimmed) {
-		return Color.BG_SLATE_300;
-	}
-
-	const variantColor = SEVERITY_VARIANT_COLORS[trimmed];
+	// Check if we have a direct mapping for this severity variant
+	const variantColor = SEVERITY_VARIANT_COLORS[label.trim()];
 	if (variantColor) {
 		return variantColor;
 	}
@@ -117,8 +103,5 @@ export function getColorsForSeverityLabels(
 		return Color.BG_SAKURA_500;
 	}
 
-	return (
-		SAFE_FALLBACK_COLORS[index % SAFE_FALLBACK_COLORS.length] ||
-		Color.BG_SLATE_400
-	);
+	return colors[index % colors.length] || themeColors.red;
 }

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

@@ -111,19 +111,23 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		);
 
 		const itemContent = useCallback(
-			(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}
-				/>
-			),
+			(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>
+				);
+			},
 			[
 				tableColumns,
 				onSetActiveLog,
@@ -139,8 +143,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 					{tableColumns
 						.filter((column) => column.key)
 						.map((column) => {
-							const isDragColumn =
-								column.key !== 'expand' && column.key !== 'state-indicator';
+							const isDragColumn = column.key !== 'expand';
 
 							return (
 								<TableHeaderCellStyled

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/NewWidget/RightContainer/Threshold/__tests__/Threshold.test.tsx

@@ -18,8 +18,8 @@ jest.mock('lib/query/createTableColumnsFromQuery', () => ({
 jest.mock('container/NewWidget/utils', () => ({
 	unitOptions: jest.fn(() => [
 		{ value: 'none', label: 'None' },
-		{ value: '%', label: 'Percent (0 - 100)' },
-		{ value: 'ms', label: 'Milliseconds (ms)' },
+		{ value: 'percent', label: 'Percent' },
+		{ value: 'ms', label: 'Milliseconds' },
 	]),
 }));
 
@@ -39,7 +39,7 @@ const defaultProps = {
 	],
 	thresholdTableOptions: 'cpu_usage',
 	columnUnits: { cpu_usage: 'percent', memory_usage: 'bytes' },
-	yAxisUnit: '%',
+	yAxisUnit: 'percent',
 	moveThreshold: jest.fn(),
 };
 

frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx

@@ -0,0 +1,99 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { AutoComplete, Input, Typography } from 'antd';
+import { find } from 'lodash-es';
+
+import { flattenedCategories } from './dataFormatCategories';
+
+const findCategoryById = (
+	searchValue: string,
+): Record<string, string> | undefined =>
+	find(flattenedCategories, (option) => option.id === searchValue);
+const findCategoryByName = (
+	searchValue: string,
+): Record<string, string> | undefined =>
+	find(flattenedCategories, (option) => option.name === searchValue);
+
+type OnSelectType = Dispatch<SetStateAction<string>> | ((val: string) => void);
+
+/**
+ * @deprecated Use DashboardYAxisUnitSelectorWrapper instead.
+ */
+function YAxisUnitSelector({
+	value,
+	onSelect,
+	fieldLabel,
+	handleClear,
+}: {
+	value: string;
+	onSelect: OnSelectType;
+	fieldLabel: string;
+	handleClear?: () => void;
+}): JSX.Element {
+	const [inputValue, setInputValue] = useState('');
+
+	// Sync input value with the actual value prop
+	useEffect(() => {
+		const category = findCategoryById(value);
+		setInputValue(category?.name || '');
+	}, [value]);
+
+	const onSelectHandler = (selectedValue: string): void => {
+		const category = findCategoryByName(selectedValue);
+		if (category) {
+			onSelect(category.id);
+			setInputValue(selectedValue);
+		}
+	};
+
+	const onChangeHandler = (inputValue: string): void => {
+		setInputValue(inputValue);
+		// Clear the yAxisUnit if input is empty or doesn't match any option
+		if (!inputValue) {
+			onSelect('');
+		}
+	};
+
+	const onClearHandler = (): void => {
+		setInputValue('');
+		onSelect('');
+		if (handleClear) {
+			handleClear();
+		}
+	};
+
+	const options = flattenedCategories.map((options) => ({
+		value: options.name,
+	}));
+
+	return (
+		<div className="y-axis-unit-selector">
+			<Typography.Text className="heading">{fieldLabel}</Typography.Text>
+			<AutoComplete
+				style={{ width: '100%' }}
+				rootClassName="y-axis-root-popover"
+				options={options}
+				allowClear
+				value={inputValue}
+				onChange={onChangeHandler}
+				onClear={onClearHandler}
+				onSelect={onSelectHandler}
+				filterOption={(inputValue, option): boolean => {
+					if (option) {
+						return (
+							option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+						);
+					}
+					return false;
+				}}
+			>
+				<Input placeholder="Unit" rootClassName="input" />
+			</AutoComplete>
+		</div>
+	);
+}
+
+export default YAxisUnitSelector;
+
+YAxisUnitSelector.defaultProps = {
+	handleClear: (): void => {},
+};

frontend/src/container/NewWidget/RightContainer/__tests__/YAxisUnitSelector.test.tsx

@@ -0,0 +1,240 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { act } from 'react-dom/test-utils';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import YAxisUnitSelector from '../YAxisUnitSelector';
+
+// Mock the dataFormatCategories to have predictable test data
+jest.mock('../dataFormatCategories', () => ({
+	flattenedCategories: [
+		{ id: 'seconds', name: 'seconds (s)' },
+		{ id: 'milliseconds', name: 'milliseconds (ms)' },
+		{ id: 'hours', name: 'hours (h)' },
+		{ id: 'minutes', name: 'minutes (m)' },
+	],
+}));
+
+const MOCK_SECONDS = 'seconds';
+const MOCK_MILLISECONDS = 'milliseconds';
+
+describe('YAxisUnitSelector', () => {
+	const defaultProps = {
+		value: MOCK_SECONDS,
+		onSelect: jest.fn(),
+		fieldLabel: 'Y Axis Unit',
+		handleClear: jest.fn(),
+	};
+
+	let user: ReturnType<typeof userEvent.setup>;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		user = userEvent.setup();
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	describe('Rendering (Read) & (write)', () => {
+		it('renders with correct field label', () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			expect(screen.getByText('Y Axis Unit')).toBeInTheDocument();
+			const input = screen.getByRole('combobox');
+
+			expect(input).toHaveValue('seconds (s)');
+		});
+
+		it('renders with custom field label', () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel="Custom Unit Label"
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			expect(screen.getByText('Custom Unit Label')).toBeInTheDocument();
+		});
+
+		it('displays empty input when value prop is empty', () => {
+			render(
+				<YAxisUnitSelector
+					value=""
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			expect(screen.getByDisplayValue('')).toBeInTheDocument();
+		});
+
+		it('shows placeholder text', () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			expect(screen.getByPlaceholderText('Unit')).toBeInTheDocument();
+		});
+
+		it('handles numeric input', async () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			await user.clear(input);
+			await user.type(input, '12345');
+			expect(input).toHaveValue('12345');
+		});
+
+		it('handles mixed content input', async () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			await user.clear(input);
+			await user.type(input, 'Test123!@#');
+			expect(input).toHaveValue('Test123!@#');
+		});
+	});
+
+	describe('State Management', () => {
+		it('syncs input value with value prop changes', async () => {
+			const { rerender } = render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			// Initial value
+			expect(input).toHaveValue('seconds (s)');
+
+			// Change value prop
+			rerender(
+				<YAxisUnitSelector
+					value={MOCK_MILLISECONDS}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+
+			await waitFor(() => {
+				expect(input).toHaveValue('milliseconds (ms)');
+			});
+		});
+
+		it('handles empty value prop correctly', async () => {
+			const { rerender } = render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			// Change to empty value
+			rerender(
+				<YAxisUnitSelector
+					value=""
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+
+			await waitFor(() => {
+				expect(input).toHaveValue('');
+			});
+		});
+
+		it('handles invalid value prop gracefully', async () => {
+			const { rerender } = render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			// Change to invalid value
+			rerender(
+				<YAxisUnitSelector
+					value="invalid_id"
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+
+			await waitFor(() => {
+				expect(input).toHaveValue('');
+			});
+		});
+
+		it('maintains local state during typing', async () => {
+			render(
+				<YAxisUnitSelector
+					value={defaultProps.value}
+					onSelect={defaultProps.onSelect}
+					fieldLabel={defaultProps.fieldLabel}
+					handleClear={defaultProps.handleClear}
+				/>,
+			);
+			const input = screen.getByRole('combobox');
+
+			// first clear then type
+			await user.clear(input);
+			await user.type(input, 'test');
+			expect(input).toHaveValue('test');
+
+			// Value prop change should not override local typing
+			await act(async () => {
+				// Simulate prop change
+				render(
+					<YAxisUnitSelector
+						value="bytes"
+						onSelect={defaultProps.onSelect}
+						fieldLabel={defaultProps.fieldLabel}
+						handleClear={defaultProps.handleClear}
+					/>,
+				);
+			});
+
+			// Local typing should be preserved
+			expect(input).toHaveValue('test');
+		});
+	});
+});

frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts

@@ -1,53 +1,613 @@
+import { flattenDeep } from 'lodash-es';
+
 import {
-	UniversalUnitToGrafanaUnit,
-	YAxisCategoryNames,
-} from 'components/YAxisUnitSelector/constants';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
-import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
-import { convertValue } from 'lib/getConvertedValue';
+	AccelerationFormats,
+	AngularFormats,
+	AreaFormats,
+	BooleanFormats,
+	CategoryNames,
+	ConcentrationFormats,
+	CurrencyFormats,
+	DataFormats,
+	DataRateFormats,
+	DataTypeCategories,
+	DatetimeFormats,
+	FlopsFormats,
+	FlowFormats,
+	ForceFormats,
+	HashRateFormats,
+	LengthFormats,
+	MassFormats,
+	MiscellaneousFormats,
+	PowerElectricalFormats,
+	PressureFormats,
+	RadiationFormats,
+	RotationSpeedFormats,
+	TemperatureFormats,
+	ThroughputFormats,
+	TimeFormats,
+	VelocityFormats,
+	VolumeFormats,
+} from './types';
 
-// Function to get the category name for a given unit ID (Grafana or universal)
-export const getCategoryName = (unitId: string): YAxisCategoryNames | null => {
-	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
+export const dataTypeCategories: DataTypeCategories = [
+	{
+		name: CategoryNames.Time,
+		formats: [
+			{ name: 'Hertz (1/s)', id: TimeFormats.Hertz },
+			{ name: 'nanoseconds (ns)', id: TimeFormats.Nanoseconds },
+			{ name: 'microseconds (µs)', id: TimeFormats.Microseconds },
+			{ name: 'milliseconds (ms)', id: TimeFormats.Milliseconds },
+			{ name: 'seconds (s)', id: TimeFormats.Seconds },
+			{ name: 'minutes (m)', id: TimeFormats.Minutes },
+			{ name: 'hours (h)', id: TimeFormats.Hours },
+			{ name: 'days (d)', id: TimeFormats.Days },
+			{ name: 'duration in ms (dtdurationms)', id: TimeFormats.DurationMs },
+			{ name: 'duration in s (dtdurations)', id: TimeFormats.DurationS },
+			{ name: 'duration in h:m:s (dthms)', id: TimeFormats.DurationHms },
+			{ name: 'duration in d:h:m:s (dtdhms)', id: TimeFormats.DurationDhms },
+			{ name: 'timeticks (timeticks)', id: TimeFormats.Timeticks },
+			{ name: 'clock in ms (clockms)', id: TimeFormats.ClockMs },
+			{ name: 'clock in s (clocks)', id: TimeFormats.ClockS },
+		],
+	},
+	{
+		name: CategoryNames.Throughput,
+		formats: [
+			{ name: 'counts/sec (cps)', id: ThroughputFormats.CountsPerSec },
+			{ name: 'ops/sec (ops)', id: ThroughputFormats.OpsPerSec },
+			{ name: 'requests/sec (reqps)', id: ThroughputFormats.RequestsPerSec },
+			{ name: 'reads/sec (rps)', id: ThroughputFormats.ReadsPerSec },
+			{ name: 'writes/sec (wps)', id: ThroughputFormats.WritesPerSec },
+			{ name: 'I/O operations/sec (iops)', id: ThroughputFormats.IOOpsPerSec },
+			{ name: 'counts/min (cpm)', id: ThroughputFormats.CountsPerMin },
+			{ name: 'ops/min (opm)', id: ThroughputFormats.OpsPerMin },
+			{ name: 'reads/min (rpm)', id: ThroughputFormats.ReadsPerMin },
+			{ name: 'writes/min (wpm)', id: ThroughputFormats.WritesPerMin },
+		],
+	},
+	{
+		name: CategoryNames.Data,
+		formats: [
+			{ name: 'bytes(IEC)', id: DataFormats.BytesIEC },
+			{ name: 'bytes(SI)', id: DataFormats.BytesSI },
+			{ name: 'bits(IEC)', id: DataFormats.BitsIEC },
+			{ name: 'bits(SI)', id: DataFormats.BitsSI },
+			{ name: 'kibibytes', id: DataFormats.KibiBytes },
+			{ name: 'kilobytes', id: DataFormats.KiloBytes },
+			{ name: 'mebibytes', id: DataFormats.MebiBytes },
+			{ name: 'megabytes', id: DataFormats.MegaBytes },
+			{ name: 'gibibytes', id: DataFormats.GibiBytes },
+			{ name: 'gigabytes', id: DataFormats.GigaBytes },
+			{ name: 'tebibytes', id: DataFormats.TebiBytes },
+			{ name: 'terabytes', id: DataFormats.TeraBytes },
+			{ name: 'pebibytes', id: DataFormats.PebiBytes },
+			{ name: 'petabytes', id: DataFormats.PetaBytes },
+		],
+	},
+	{
+		name: CategoryNames.DataRate,
+		formats: [
+			{ name: 'packets/sec', id: DataRateFormats.PacketsPerSec },
+			{ name: 'bytes/sec(IEC)', id: DataRateFormats.BytesPerSecIEC },
+			{ name: 'bytes/sec(SI)', id: DataRateFormats.BytesPerSecSI },
+			{ name: 'bits/sec(IEC)', id: DataRateFormats.BitsPerSecIEC },
+			{ name: 'bits/sec(SI)', id: DataRateFormats.BitsPerSecSI },
+			{ name: 'kibibytes/sec', id: DataRateFormats.KibiBytesPerSec },
+			{ name: 'kibibits/sec', id: DataRateFormats.KibiBitsPerSec },
+			{ name: 'kilobytes/sec', id: DataRateFormats.KiloBytesPerSec },
+			{ name: 'kilobits/sec', id: DataRateFormats.KiloBitsPerSec },
+			{ name: 'mebibytes/sec', id: DataRateFormats.MebiBytesPerSec },
+			{ name: 'mebibits/sec', id: DataRateFormats.MebiBitsPerSec },
+			{ name: 'megabytes/sec', id: DataRateFormats.MegaBytesPerSec },
+			{ name: 'megabits/sec', id: DataRateFormats.MegaBitsPerSec },
+			{ name: 'gibibytes/sec', id: DataRateFormats.GibiBytesPerSec },
+			{ name: 'gibibits/sec', id: DataRateFormats.GibiBitsPerSec },
+			{ name: 'gigabytes/sec', id: DataRateFormats.GigaBytesPerSec },
+			{ name: 'gigabits/sec', id: DataRateFormats.GigaBitsPerSec },
+			{ name: 'tebibytes/sec', id: DataRateFormats.TebiBytesPerSec },
+			{ name: 'tebibits/sec', id: DataRateFormats.TebiBitsPerSec },
+			{ name: 'terabytes/sec', id: DataRateFormats.TeraBytesPerSec },
+			{ name: 'terabits/sec', id: DataRateFormats.TeraBitsPerSec },
+			{ name: 'pebibytes/sec', id: DataRateFormats.PebiBytesPerSec },
+			{ name: 'pebibits/sec', id: DataRateFormats.PebiBitsPerSec },
+			{ name: 'petabytes/sec', id: DataRateFormats.PetaBytesPerSec },
+			{ name: 'petabits/sec', id: DataRateFormats.PetaBitsPerSec },
+		],
+	},
+	{
+		name: CategoryNames.HashRate,
+		formats: [
+			{ name: 'hashes/sec', id: HashRateFormats.HashesPerSec },
+			{ name: 'kilohashes/sec', id: HashRateFormats.KiloHashesPerSec },
+			{ name: 'megahashes/sec', id: HashRateFormats.MegaHashesPerSec },
+			{ name: 'gigahashes/sec', id: HashRateFormats.GigaHashesPerSec },
+			{ name: 'terahashes/sec', id: HashRateFormats.TeraHashesPerSec },
+			{ name: 'petahashes/sec', id: HashRateFormats.PetaHashesPerSec },
+			{ name: 'exahashes/sec', id: HashRateFormats.ExaHashesPerSec },
+		],
+	},
+	{
+		name: CategoryNames.Miscellaneous,
+		formats: [
+			{ name: 'none', id: MiscellaneousFormats.None },
+			{ name: 'String', id: MiscellaneousFormats.String },
+			{ name: 'short', id: MiscellaneousFormats.Short },
+			{ name: 'Percent (0-100)', id: MiscellaneousFormats.Percent },
+			{ name: 'Percent (0.0-1.0)', id: MiscellaneousFormats.PercentUnit },
+			{ name: 'Humidity (%H)', id: MiscellaneousFormats.Humidity },
+			{ name: 'Decibel', id: MiscellaneousFormats.Decibel },
+			{ name: 'Hexadecimal (0x)', id: MiscellaneousFormats.Hexadecimal0x },
+			{ name: 'Hexadecimal', id: MiscellaneousFormats.Hexadecimal },
+			{ name: 'Scientific notation', id: MiscellaneousFormats.ScientificNotation },
+			{ name: 'Locale format', id: MiscellaneousFormats.LocaleFormat },
+			{ name: 'Pixels', id: MiscellaneousFormats.Pixels },
+		],
+	},
+	{
+		name: CategoryNames.Acceleration,
+		formats: [
+			{ name: 'Meters/sec²', id: AccelerationFormats.MetersPerSecondSquared },
+			{ name: 'Feet/sec²', id: AccelerationFormats.FeetPerSecondSquared },
+			{ name: 'G unit', id: AccelerationFormats.GUnit },
+		],
+	},
+	{
+		name: CategoryNames.Angle,
+		formats: [
+			{ name: 'Degrees (°)', id: AngularFormats.Degree },
+			{ name: 'Radians', id: AngularFormats.Radian },
+			{ name: 'Gradian', id: AngularFormats.Gradian },
+			{ name: 'Arc Minutes', id: AngularFormats.ArcMinute },
+			{ name: 'Arc Seconds', id: AngularFormats.ArcSecond },
+		],
+	},
+	{
+		name: CategoryNames.Area,
+		formats: [
+			{ name: 'Square Meters (m²)', id: AreaFormats.SquareMeters },
+			{ name: 'Square Feet (ft²)', id: AreaFormats.SquareFeet },
+			{ name: 'Square Miles (mi²)', id: AreaFormats.SquareMiles },
+		],
+	},
+	{
+		name: CategoryNames.Computation,
+		formats: [
+			{ name: 'FLOP/s', id: FlopsFormats.FLOPs },
+			{ name: 'MFLOP/s', id: FlopsFormats.MFLOPs },
+			{ name: 'GFLOP/s', id: FlopsFormats.GFLOPs },
+			{ name: 'TFLOP/s', id: FlopsFormats.TFLOPs },
+			{ name: 'PFLOP/s', id: FlopsFormats.PFLOPs },
+			{ name: 'EFLOP/s', id: FlopsFormats.EFLOPs },
+			{ name: 'ZFLOP/s', id: FlopsFormats.ZFLOPs },
+			{ name: 'YFLOP/s', id: FlopsFormats.YFLOPs },
+		],
+	},
+	{
+		name: CategoryNames.Concentration,
+		formats: [
+			{ name: 'parts-per-million (ppm)', id: ConcentrationFormats.PPM },
+			{ name: 'parts-per-billion (ppb)', id: ConcentrationFormats.PPB },
+			{ name: 'nanogram per cubic meter (ng/m³)', id: ConcentrationFormats.NgM3 },
+			{
+				name: 'nanogram per normal cubic meter (ng/Nm³)',
+				id: ConcentrationFormats.NgNM3,
+			},
+			{ name: 'microgram per cubic meter (μg/m³)', id: ConcentrationFormats.UgM3 },
+			{
+				name: 'microgram per normal cubic meter (μg/Nm³)',
+				id: ConcentrationFormats.UgNM3,
+			},
+			{ name: 'milligram per cubic meter (mg/m³)', id: ConcentrationFormats.MgM3 },
+			{
+				name: 'milligram per normal cubic meter (mg/Nm³)',
+				id: ConcentrationFormats.MgNM3,
+			},
+			{ name: 'gram per cubic meter (g/m³)', id: ConcentrationFormats.GM3 },
+			{
+				name: 'gram per normal cubic meter (g/Nm³)',
+				id: ConcentrationFormats.GNM3,
+			},
+			{ name: 'milligrams per decilitre (mg/dL)', id: ConcentrationFormats.MgDL },
+			{ name: 'millimoles per litre (mmol/L)', id: ConcentrationFormats.MmolL },
+		],
+	},
+	{
+		name: CategoryNames.Currency,
+		formats: [
+			{ name: 'Dollars ($)', id: CurrencyFormats.USD },
+			{ name: 'Pounds (£)', id: CurrencyFormats.GBP },
+			{ name: 'Euro (€)', id: CurrencyFormats.EUR },
+			{ name: 'Yen (¥)', id: CurrencyFormats.JPY },
+			{ name: 'Rubles (₽)', id: CurrencyFormats.RUB },
+			{ name: 'Hryvnias (₴)', id: CurrencyFormats.UAH },
+			{ name: 'Real (R$)', id: CurrencyFormats.BRL },
+			{ name: 'Danish Krone (kr)', id: CurrencyFormats.DKK },
+			{ name: 'Icelandic Króna (kr)', id: CurrencyFormats.ISK },
+			{ name: 'Norwegian Krone (kr)', id: CurrencyFormats.NOK },
+			{ name: 'Swedish Krona (kr)', id: CurrencyFormats.SEK },
+			{ name: 'Czech koruna (czk)', id: CurrencyFormats.CZK },
+			{ name: 'Swiss franc (CHF)', id: CurrencyFormats.CHF },
+			{ name: 'Polish Złoty (PLN)', id: CurrencyFormats.PLN },
+			{ name: 'Bitcoin (฿)', id: CurrencyFormats.BTC },
+			{ name: 'Milli Bitcoin (฿)', id: CurrencyFormats.MBTC },
+			{ name: 'Micro Bitcoin (฿)', id: CurrencyFormats.UBTC },
+			{ name: 'South African Rand (R)', id: CurrencyFormats.ZAR },
+			{ name: 'Indian Rupee (₹)', id: CurrencyFormats.INR },
+			{ name: 'South Korean Won (₩)', id: CurrencyFormats.KRW },
+			{ name: 'Indonesian Rupiah (Rp)', id: CurrencyFormats.IDR },
+			{ name: 'Philippine Peso (PHP)', id: CurrencyFormats.PHP },
+			{ name: 'Vietnamese Dong (VND)', id: CurrencyFormats.VND },
+		],
+	},
+	{
+		name: CategoryNames.Datetime,
+		formats: [
+			{ name: 'Datetime ISO', id: DatetimeFormats.ISO },
+			{
+				name: 'Datetime ISO (No date if today)',
+				id: DatetimeFormats.ISONoDateIfToday,
+			},
+			{ name: 'Datetime US', id: DatetimeFormats.US },
+			{
+				name: 'Datetime US (No date if today)',
+				id: DatetimeFormats.USNoDateIfToday,
+			},
+			{ name: 'Datetime local', id: DatetimeFormats.Local },
+			{
+				name: 'Datetime local (No date if today)',
+				id: DatetimeFormats.LocalNoDateIfToday,
+			},
+			{ name: 'Datetime default', id: DatetimeFormats.System },
+			{ name: 'From Now', id: DatetimeFormats.FromNow },
+		],
+	},
+	{
+		name: CategoryNames.Energy,
+		formats: [
+			{ name: 'Watt (W)', id: PowerElectricalFormats.WATT },
+			{ name: 'Kilowatt (kW)', id: PowerElectricalFormats.KWATT },
+			{ name: 'Megawatt (MW)', id: PowerElectricalFormats.MEGWATT },
+			{ name: 'Gigawatt (GW)', id: PowerElectricalFormats.GWATT },
+			{ name: 'Milliwatt (mW)', id: PowerElectricalFormats.MWATT },
+			{ name: 'Watt per square meter (W/m²)', id: PowerElectricalFormats.WM2 },
+			{ name: 'Volt-Ampere (VA)', id: PowerElectricalFormats.VOLTAMP },
+			{ name: 'Kilovolt-Ampere (kVA)', id: PowerElectricalFormats.KVOLTAMP },
+			{
+				name: 'Volt-Ampere reactive (VAr)',
+				id: PowerElectricalFormats.VOLTAMPREACT,
+			},
+			{
+				name: 'Kilovolt-Ampere reactive (kVAr)',
+				id: PowerElectricalFormats.KVOLTAMPREACT,
+			},
+			{ name: 'Watt-hour (Wh)', id: PowerElectricalFormats.WATTH },
+			{
+				name: 'Watt-hour per Kilogram (Wh/kg)',
+				id: PowerElectricalFormats.WATTHPERKG,
+			},
+			{ name: 'Kilowatt-hour (kWh)', id: PowerElectricalFormats.KWATTH },
+			{ name: 'Kilowatt-min (kWm)', id: PowerElectricalFormats.KWATTM },
+			{ name: 'Ampere-hour (Ah)', id: PowerElectricalFormats.AMPH },
+			{ name: 'Kiloampere-hour (kAh)', id: PowerElectricalFormats.KAMPH },
+			{ name: 'Milliampere-hour (mAh)', id: PowerElectricalFormats.MAMPH },
+			{ name: 'Joule (J)', id: PowerElectricalFormats.JOULE },
+			{ name: 'Electron volt (eV)', id: PowerElectricalFormats.EV },
+			{ name: 'Ampere (A)', id: PowerElectricalFormats.AMP },
+			{ name: 'Kiloampere (kA)', id: PowerElectricalFormats.KAMP },
+			{ name: 'Milliampere (mA)', id: PowerElectricalFormats.MAMP },
+			{ name: 'Volt (V)', id: PowerElectricalFormats.VOLT },
+			{ name: 'Kilovolt (kV)', id: PowerElectricalFormats.KVOLT },
+			{ name: 'Millivolt (mV)', id: PowerElectricalFormats.MVOLT },
+			{ name: 'Decibel-milliwatt (dBm)', id: PowerElectricalFormats.DBM },
+			{ name: 'Ohm (Ω)', id: PowerElectricalFormats.OHM },
+			{ name: 'Kiloohm (kΩ)', id: PowerElectricalFormats.KOHM },
+			{ name: 'Megaohm (MΩ)', id: PowerElectricalFormats.MOHM },
+			{ name: 'Farad (F)', id: PowerElectricalFormats.FARAD },
+			{ name: 'Microfarad (µF)', id: PowerElectricalFormats.µFARAD },
+			{ name: 'Nanofarad (nF)', id: PowerElectricalFormats.NFARAD },
+			{ name: 'Picofarad (pF)', id: PowerElectricalFormats.PFARAD },
+			{ name: 'Femtofarad (fF)', id: PowerElectricalFormats.FFARAD },
+			{ name: 'Henry (H)', id: PowerElectricalFormats.HENRY },
+			{ name: 'Millihenry (mH)', id: PowerElectricalFormats.MHENRY },
+			{ name: 'Microhenry (µH)', id: PowerElectricalFormats.µHENRY },
+			{ name: 'Lumens (Lm)', id: PowerElectricalFormats.LUMENS },
+		],
+	},
+	{
+		name: CategoryNames.Flow,
+		formats: [
+			{ name: 'Gallons/min (gpm)', id: FlowFormats.FLOWGPM },
+			{ name: 'Cubic meters/sec (cms)', id: FlowFormats.FLOWCMS },
+			{ name: 'Cubic feet/sec (cfs)', id: FlowFormats.FLOWCFS },
+			{ name: 'Cubic feet/min (cfm)', id: FlowFormats.FLOWCFM },
+			{ name: 'Litre/hour', id: FlowFormats.LITREH },
+			{ name: 'Litre/min (L/min)', id: FlowFormats.FLOWLPM },
+			{ name: 'milliLitre/min (mL/min)', id: FlowFormats.FLOWMLPM },
+			{ name: 'Lux (lx)', id: FlowFormats.LUX },
+		],
+	},
+	{
+		name: CategoryNames.Force,
+		formats: [
+			{ name: 'Newton-meters (Nm)', id: ForceFormats.FORCENM },
+			{ name: 'Kilonewton-meters (kNm)', id: ForceFormats.FORCEKNM },
+			{ name: 'Newtons (N)', id: ForceFormats.FORCEN },
+			{ name: 'Kilonewtons (kN)', id: ForceFormats.FORCEKN },
+		],
+	},
+	{
+		name: CategoryNames.Mass,
+		formats: [
+			{ name: 'milligram (mg)', id: MassFormats.MASSMG },
+			{ name: 'gram (g)', id: MassFormats.MASSG },
+			{ name: 'pound (lb)', id: MassFormats.MASSLB },
+			{ name: 'kilogram (kg)', id: MassFormats.MASSKG },
+			{ name: 'metric ton (t)', id: MassFormats.MASST },
+		],
+	},
+	{
+		name: CategoryNames.Length,
+		formats: [
+			{ name: 'millimeter (mm)', id: LengthFormats.LENGTHMM },
+			{ name: 'inch (in)', id: LengthFormats.LENGTHIN },
+			{ name: 'feet (ft)', id: LengthFormats.LENGTHFT },
+			{ name: 'meter (m)', id: LengthFormats.LENGTHM },
+			{ name: 'kilometer (km)', id: LengthFormats.LENGTHKM },
+			{ name: 'mile (mi)', id: LengthFormats.LENGTHMI },
+		],
+	},
+	{
+		name: CategoryNames.Pressure,
+		formats: [
+			{ name: 'Millibars', id: PressureFormats.PRESSUREMBAR },
+			{ name: 'Bars', id: PressureFormats.PRESSUREBAR },
+			{ name: 'Kilobars', id: PressureFormats.PRESSUREKBAR },
+			{ name: 'Pascals', id: PressureFormats.PRESSUREPA },
+			{ name: 'Hectopascals', id: PressureFormats.PRESSUREHPA },
+			{ name: 'Kilopascals', id: PressureFormats.PRESSUREKPA },
+			{ name: 'Inches of mercury', id: PressureFormats.PRESSUREHG },
+			{ name: 'PSI', id: PressureFormats.PRESSUREPSI },
+		],
+	},
+	{
+		name: CategoryNames.Radiation,
+		formats: [
+			{ name: 'Becquerel (Bq)', id: RadiationFormats.RADBQ },
+			{ name: 'curie (Ci)', id: RadiationFormats.RADCI },
+			{ name: 'Gray (Gy)', id: RadiationFormats.RADGY },
+			{ name: 'rad', id: RadiationFormats.RADRAD },
+			{ name: 'Sievert (Sv)', id: RadiationFormats.RADSV },
+			{ name: 'milliSievert (mSv)', id: RadiationFormats.RADMSV },
+			{ name: 'microSievert (µSv)', id: RadiationFormats.RADUSV },
+			{ name: 'rem', id: RadiationFormats.RADREM },
+			{ name: 'Exposure (C/kg)', id: RadiationFormats.RADEXPCKG },
+			{ name: 'roentgen (R)', id: RadiationFormats.RADR },
+			{ name: 'Sievert/hour (Sv/h)', id: RadiationFormats.RADSVH },
+			{ name: 'milliSievert/hour (mSv/h)', id: RadiationFormats.RADMSVH },
+			{ name: 'microSievert/hour (µSv/h)', id: RadiationFormats.RADUSVH },
+		],
+	},
+	{
+		name: CategoryNames.RotationSpeed,
+		formats: [
+			{ name: 'Revolutions per minute (rpm)', id: RotationSpeedFormats.ROTRPM },
+			{ name: 'Hertz (Hz)', id: RotationSpeedFormats.ROTHZ },
+			{ name: 'Radians per second (rad/s)', id: RotationSpeedFormats.ROTRADS },
+			{ name: 'Degrees per second (°/s)', id: RotationSpeedFormats.ROTDEGS },
+		],
+	},
+	{
+		name: CategoryNames.Temperature,
+		formats: [
+			{ name: 'Celsius (°C)', id: TemperatureFormats.CELSIUS },
+			{ name: 'Fahrenheit (°F)', id: TemperatureFormats.FAHRENHEIT },
+			{ name: 'Kelvin (K)', id: TemperatureFormats.KELVIN },
+		],
+	},
+	{
+		name: CategoryNames.Velocity,
+		formats: [
+			{ name: 'meters/second (m/s)', id: VelocityFormats.METERS_PER_SECOND },
+			{ name: 'kilometers/hour (km/h)', id: VelocityFormats.KILOMETERS_PER_HOUR },
+			{ name: 'miles/hour (mph)', id: VelocityFormats.MILES_PER_HOUR },
+			{ name: 'knot (kn)', id: VelocityFormats.KNOT },
+		],
+	},
+	{
+		name: CategoryNames.Volume,
+		formats: [
+			{ name: 'millilitre (mL)', id: VolumeFormats.MILLILITRE },
+			{ name: 'litre (L)', id: VolumeFormats.LITRE },
+			{ name: 'cubic meter', id: VolumeFormats.CUBIC_METER },
+			{ name: 'Normal cubic meter', id: VolumeFormats.NORMAL_CUBIC_METER },
+			{ name: 'cubic decimeter', id: VolumeFormats.CUBIC_DECIMETER },
+			{ name: 'gallons', id: VolumeFormats.GALLONS },
+		],
+	},
+	{
+		name: CategoryNames.Boolean,
+		formats: [
+			{ name: 'True / False', id: BooleanFormats.TRUE_FALSE },
+			{ name: 'Yes / No', id: BooleanFormats.YES_NO },
+			{ name: 'On / Off', id: BooleanFormats.ON_OFF },
+		],
+	},
+];
 
-	const foundCategory = categories.find((category) =>
-		category.units.some((unit) => {
-			// Units in Y-axis categories use universal unit IDs.
-			// Thresholds / column units often use Grafana-style IDs.
-			// Treat a unit as matching if either:
-			// - it is already the universal ID, or
-			// - it matches the mapped Grafana ID for that universal unit.
-			if (unit.id === unitId) {
-				return true;
-			}
+export const flattenedCategories = flattenDeep(
+	dataTypeCategories.map((category) => category.formats),
+);
 
-			const grafanaId = UniversalUnitToGrafanaUnit[unit.id];
-			return grafanaId === unitId;
-		}),
-	);
-
-	return foundCategory ? foundCategory.name : null;
+type ConversionFactors = {
+	[key: string]: {
+		[key: string]: number | null;
+	};
 };
 
+// Object containing conversion factors for various categories and formats
+const conversionFactors: ConversionFactors = {
+	[CategoryNames.Time]: {
+		[TimeFormats.Hertz]: 1,
+		[TimeFormats.Nanoseconds]: 1e-9,
+		[TimeFormats.Microseconds]: 1e-6,
+		[TimeFormats.Milliseconds]: 1e-3,
+		[TimeFormats.Seconds]: 1,
+		[TimeFormats.Minutes]: 60,
+		[TimeFormats.Hours]: 3600,
+		[TimeFormats.Days]: 86400,
+		[TimeFormats.DurationMs]: 1e-3,
+		[TimeFormats.DurationS]: 1,
+		[TimeFormats.DurationHms]: null, // Requires special handling
+		[TimeFormats.DurationDhms]: null, // Requires special handling
+		[TimeFormats.Timeticks]: null, // Requires special handling
+		[TimeFormats.ClockMs]: 1e-3,
+		[TimeFormats.ClockS]: 1,
+	},
+	[CategoryNames.Throughput]: {
+		[ThroughputFormats.CountsPerSec]: 1,
+		[ThroughputFormats.OpsPerSec]: 1,
+		[ThroughputFormats.RequestsPerSec]: 1,
+		[ThroughputFormats.ReadsPerSec]: 1,
+		[ThroughputFormats.WritesPerSec]: 1,
+		[ThroughputFormats.IOOpsPerSec]: 1,
+		[ThroughputFormats.CountsPerMin]: 1 / 60,
+		[ThroughputFormats.OpsPerMin]: 1 / 60,
+		[ThroughputFormats.ReadsPerMin]: 1 / 60,
+		[ThroughputFormats.WritesPerMin]: 1 / 60,
+	},
+	[CategoryNames.Data]: {
+		[DataFormats.BytesIEC]: 1,
+		[DataFormats.BytesSI]: 1,
+		[DataFormats.BitsIEC]: 0.125,
+		[DataFormats.BitsSI]: 0.125,
+		[DataFormats.KibiBytes]: 1024,
+		[DataFormats.KiloBytes]: 1000,
+		[DataFormats.MebiBytes]: 1048576,
+		[DataFormats.MegaBytes]: 1000000,
+		[DataFormats.GibiBytes]: 1073741824,
+		[DataFormats.GigaBytes]: 1000000000,
+		[DataFormats.TebiBytes]: 1099511627776,
+		[DataFormats.TeraBytes]: 1000000000000,
+		[DataFormats.PebiBytes]: 1125899906842624,
+		[DataFormats.PetaBytes]: 1000000000000000,
+	},
+	[CategoryNames.DataRate]: {
+		[DataRateFormats.PacketsPerSec]: null, // Cannot convert directly to other data rates
+		[DataRateFormats.BytesPerSecIEC]: 1,
+		[DataRateFormats.BytesPerSecSI]: 1,
+		[DataRateFormats.BitsPerSecIEC]: 0.125,
+		[DataRateFormats.BitsPerSecSI]: 0.125,
+		[DataRateFormats.KibiBytesPerSec]: 1024,
+		[DataRateFormats.KibiBitsPerSec]: 128,
+		[DataRateFormats.KiloBytesPerSec]: 1000,
+		[DataRateFormats.KiloBitsPerSec]: 125,
+		[DataRateFormats.MebiBytesPerSec]: 1048576,
+		[DataRateFormats.MebiBitsPerSec]: 131072,
+		[DataRateFormats.MegaBytesPerSec]: 1000000,
+		[DataRateFormats.MegaBitsPerSec]: 125000,
+		[DataRateFormats.GibiBytesPerSec]: 1073741824,
+		[DataRateFormats.GibiBitsPerSec]: 134217728,
+		[DataRateFormats.GigaBytesPerSec]: 1000000000,
+		[DataRateFormats.GigaBitsPerSec]: 125000000,
+		[DataRateFormats.TebiBytesPerSec]: 1099511627776,
+		[DataRateFormats.TebiBitsPerSec]: 137438953472,
+		[DataRateFormats.TeraBytesPerSec]: 1000000000000,
+		[DataRateFormats.TeraBitsPerSec]: 125000000000,
+		[DataRateFormats.PebiBytesPerSec]: 1125899906842624,
+		[DataRateFormats.PebiBitsPerSec]: 140737488355328,
+		[DataRateFormats.PetaBytesPerSec]: 1000000000000000,
+		[DataRateFormats.PetaBitsPerSec]: 125000000000000,
+	},
+	[CategoryNames.Miscellaneous]: {
+		[MiscellaneousFormats.None]: null,
+		[MiscellaneousFormats.String]: null,
+		[MiscellaneousFormats.Short]: null,
+		[MiscellaneousFormats.Percent]: 1,
+		[MiscellaneousFormats.PercentUnit]: 100,
+		[MiscellaneousFormats.Humidity]: 1,
+		[MiscellaneousFormats.Decibel]: null,
+		[MiscellaneousFormats.Hexadecimal0x]: null,
+		[MiscellaneousFormats.Hexadecimal]: null,
+		[MiscellaneousFormats.ScientificNotation]: null,
+		[MiscellaneousFormats.LocaleFormat]: null,
+		[MiscellaneousFormats.Pixels]: null,
+	},
+	[CategoryNames.Boolean]: {
+		[BooleanFormats.TRUE_FALSE]: null, // Not convertible
+		[BooleanFormats.YES_NO]: null, // Not convertible
+		[BooleanFormats.ON_OFF]: null, // Not convertible
+	},
+};
+
+// Function to get the conversion factor between two units in a specific category
+function getConversionFactor(
+	fromUnit: string,
+	toUnit: string,
+	category: CategoryNames,
+): number | null {
+	// Retrieves the conversion factors for the specified category
+	const categoryFactors = conversionFactors[category];
+	if (!categoryFactors) {
+		return null; // Returns null if the category does not exist
+	}
+	const fromFactor = categoryFactors[fromUnit];
+	const toFactor = categoryFactors[toUnit];
+	if (
+		fromFactor === undefined ||
+		toFactor === undefined ||
+		fromFactor === null ||
+		toFactor === null
+	) {
+		return null; // Returns null if either unit does not exist or is not convertible
+	}
+	return fromFactor / toFactor; // Returns the conversion factor ratio
+}
+
 // Function to convert a value from one unit to another
 export function convertUnit(
 	value: number,
 	fromUnitId?: string,
 	toUnitId?: string,
 ): number | null {
-	if (!fromUnitId || !toUnitId) {
+	let fromUnit: string | undefined;
+	let toUnit: string | undefined;
+
+	// Finds the category that contains the specified units and extracts fromUnit and toUnit using array methods
+	const category = dataTypeCategories.find((category) =>
+		category.formats.some((format) => {
+			if (format.id === fromUnitId) {
+				fromUnit = format.id;
+			}
+			if (format.id === toUnitId) {
+				toUnit = format.id;
+			}
+			return fromUnit && toUnit; // Break out early if both units are found
+		}),
+	);
+
+	if (!category || !fromUnit || !toUnit) {
 		return null;
-	}
+	} // Return null if category or units are not found
 
-	const fromCategory = getCategoryName(fromUnitId);
-	const toCategory = getCategoryName(toUnitId);
-
-	// If either unit is unknown or the categories don't match, the conversion is invalid
-	if (!fromCategory || !toCategory || fromCategory !== toCategory) {
+	// Gets the conversion factor for the specified units
+	const conversionFactor = getConversionFactor(
+		fromUnit,
+		toUnit,
+		category.name as any,
+	);
+	if (conversionFactor === null) {
 		return null;
-	}
+	} // Return null if conversion is not possible
 
-	// Delegate the actual numeric conversion (or identity) to the shared helper,
-	// which understands both Grafana-style and universal unit IDs.
-	return convertValue(value, fromUnitId, toUnitId);
+	return value * conversionFactor;
 }
+
+// Function to get the category name for a given unit ID
+export const getCategoryName = (unitId: string): CategoryNames | null => {
+	// Finds the category that contains the specified unit ID
+	const foundCategory = dataTypeCategories.find((category) =>
+		category.formats.some((format) => format.id === unitId),
+	);
+	return foundCategory ? (foundCategory.name as CategoryNames) : null;
+};

frontend/src/container/NewWidget/utils.ts

@@ -2,9 +2,6 @@ import { Layout } from 'react-grid-layout';
 import { DefaultOptionType } from 'antd/es/select';
 import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import { PrecisionOptionsEnum } from 'components/Graph/types';
-import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
-import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
 import {
 	initialQueryBuilderFormValuesMap,
 	PANEL_TYPES,
@@ -24,7 +21,11 @@ import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { getCategoryName } from './RightContainer/dataFormatCategories';
+import {
+	dataTypeCategories,
+	getCategoryName,
+} from './RightContainer/dataFormatCategories';
+import { CategoryNames } from './RightContainer/types';
 
 export const getIsQueryModified = (
 	currentQuery: Query,
@@ -605,21 +606,14 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
  * the label and value for each format.
  */
 export const getCategorySelectOptionByName = (
-	name?: YAxisCategoryNames,
-): DefaultOptionType[] => {
-	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
-	if (!categories.length) {
-		return [];
-	}
-	return (
-		categories
-			.find((category) => category.name === name)
-			?.units.map((unit) => ({
-				label: unit.name,
-				value: unit.id,
-			})) || []
-	);
-};
+	name?: CategoryNames | string,
+): DefaultOptionType[] =>
+	dataTypeCategories
+		.find((category) => category.name === name)
+		?.formats.map((format) => ({
+			label: format.name,
+			value: format.id,
+		})) || [];
 
 /**
  * Generates unit options based on the provided column unit.

frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/config.ts

@@ -1,13 +1,10 @@
-import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
+import { CategoryNames } from 'container/NewWidget/RightContainer/types';
 
-export const categoryToSupport: YAxisCategoryNames[] = [
-	YAxisCategoryNames.None,
-	YAxisCategoryNames.Data,
-	YAxisCategoryNames.DataRate,
-	YAxisCategoryNames.Time,
-	YAxisCategoryNames.Count,
-	YAxisCategoryNames.Operations,
-	YAxisCategoryNames.Percentage,
-	YAxisCategoryNames.Miscellaneous,
-	YAxisCategoryNames.Boolean,
+export const categoryToSupport = [
+	CategoryNames.Data,
+	CategoryNames.DataRate,
+	CategoryNames.Time,
+	CategoryNames.Throughput,
+	CategoryNames.Miscellaneous,
+	CategoryNames.Boolean,
 ];

frontend/src/hooks/dashboard/useDashboardListSortOrder.ts

@@ -1,55 +0,0 @@
-import { useState } from 'react';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import isEqual from 'lodash-es/isEqual';
-
-export interface DashboardSortOrder {
-	columnKey: string;
-	order: string;
-	pagination: string;
-	search: string;
-}
-
-const SUPPORTED_COLUMN_KEYS = ['createdAt', 'updatedAt'];
-const SUPPORTED_ORDER_KEYS = ['ascend', 'descend'];
-
-export function useDashboardListSortOrder(): {
-	listSortOrder: DashboardSortOrder;
-	setListSortOrder: (sortOrder: DashboardSortOrder) => void;
-} {
-	const { safeNavigate } = useSafeNavigate();
-	const params = useUrlQuery();
-
-	const orderColumnParam = params.get('columnKey');
-	const orderQueryParam = params.get('order');
-	const paginationParam = params.get('page');
-	const searchParam = params.get('search');
-
-	const [listSortOrder, setListOrder] = useState<DashboardSortOrder>({
-		columnKey:
-			orderColumnParam && SUPPORTED_COLUMN_KEYS.includes(orderColumnParam)
-				? orderColumnParam
-				: 'updatedAt',
-		order:
-			orderQueryParam && SUPPORTED_ORDER_KEYS.includes(orderQueryParam)
-				? orderQueryParam
-				: 'descend',
-		pagination: paginationParam || '1',
-		search: searchParam || '',
-	});
-
-	function setListSortOrder(sortOrder: DashboardSortOrder): void {
-		if (!isEqual(sortOrder, listSortOrder)) {
-			setListOrder(sortOrder);
-		}
-
-		params.set('columnKey', sortOrder.columnKey);
-		params.set('order', sortOrder.order);
-		params.set('page', sortOrder.pagination || '1');
-		params.set('search', sortOrder.search || '');
-
-		safeNavigate({ search: params.toString() });
-	}
-
-	return { listSortOrder, setListSortOrder };
-}

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

@@ -1,94 +0,0 @@
-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/useLogDetailHandlers.ts

@@ -2,7 +2,6 @@ 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;
@@ -29,13 +28,9 @@ 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);
@@ -44,7 +39,7 @@ function useLogDetailHandlers({
 			onSetActiveLog(log);
 			setSelectedTab(nextTab ?? defaultTab);
 		},
-		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog, isTextSelected],
+		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog],
 	);
 
 	const handleCloseLogDetail = useCallback((): void => {

frontend/src/hooks/useIsTextSelected.ts

@@ -1,10 +0,0 @@
-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/providers/Dashboard/Dashboard.tsx

@@ -22,7 +22,9 @@ import ROUTES from 'constants/routes';
 import dayjs, { Dayjs } from 'dayjs';
 import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useTabVisibility from 'hooks/useTabFocus';
+import useUrlQuery from 'hooks/useUrlQuery';
 import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout';
 import { getMinMaxForSelectedTime } from 'lib/getMinMax';
 import { defaultTo, isEmpty } from 'lodash-es';
@@ -48,7 +50,11 @@ import {
 	setDashboardVariablesStore,
 	updateDashboardVariablesStore,
 } from './store/dashboardVariables/dashboardVariablesStore';
-import { IDashboardContext, WidgetColumnWidths } from './types';
+import {
+	DashboardSortOrder,
+	IDashboardContext,
+	WidgetColumnWidths,
+} from './types';
 import { sortLayout } from './util';
 
 const DashboardContext = createContext<IDashboardContext>({
@@ -65,7 +71,13 @@ const DashboardContext = createContext<IDashboardContext>({
 	layouts: [],
 	panelMap: {},
 	setPanelMap: () => {},
-
+	listSortOrder: {
+		columnKey: 'createdAt',
+		order: 'descend',
+		pagination: '1',
+		search: '',
+	},
+	setListSortOrder: () => {},
 	setLayouts: () => {},
 	setSelectedDashboard: () => {},
 	updatedTimeRef: {} as React.MutableRefObject<Dayjs | null>,
@@ -89,6 +101,7 @@ interface Props {
 export function DashboardProvider({
 	children,
 }: PropsWithChildren): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
 	const [isDashboardSliderOpen, setIsDashboardSlider] = useState<boolean>(false);
 
 	const [toScrollWidgetId, setToScrollWidgetId] = useState<string>('');
@@ -109,8 +122,52 @@ export function DashboardProvider({
 		exact: true,
 	});
 
+	const isDashboardListPage = useRouteMatch<Props>({
+		path: ROUTES.ALL_DASHBOARD,
+		exact: true,
+	});
+
 	const { showErrorModal } = useErrorModal();
 
+	// added extra checks here in case wrong values appear use the default values rather than empty dashboards
+	const supportedOrderColumnKeys = ['createdAt', 'updatedAt'];
+
+	const supportedOrderKeys = ['ascend', 'descend'];
+
+	const params = useUrlQuery();
+	// since the dashboard provider is wrapped at the very top of the application hence it initialises these values from other pages as well.
+	// pick the below params from URL only if the user is on the dashboards list page.
+	const orderColumnParam = isDashboardListPage && params.get('columnKey');
+	const orderQueryParam = isDashboardListPage && params.get('order');
+	const paginationParam = isDashboardListPage && params.get('page');
+	const searchParam = isDashboardListPage && params.get('search');
+
+	const [listSortOrder, setListOrder] = useState({
+		columnKey: orderColumnParam
+			? supportedOrderColumnKeys.includes(orderColumnParam)
+				? orderColumnParam
+				: 'updatedAt'
+			: 'updatedAt',
+		order: orderQueryParam
+			? supportedOrderKeys.includes(orderQueryParam)
+				? orderQueryParam
+				: 'descend'
+			: 'descend',
+		pagination: paginationParam || '1',
+		search: searchParam || '',
+	});
+
+	function setListSortOrder(sortOrder: DashboardSortOrder): void {
+		if (!isEqual(sortOrder, listSortOrder)) {
+			setListOrder(sortOrder);
+		}
+		params.set('columnKey', sortOrder.columnKey as string);
+		params.set('order', sortOrder.order as string);
+		params.set('page', sortOrder.pagination || '1');
+		params.set('search', sortOrder.search || '');
+		safeNavigate({ search: params.toString() });
+	}
+
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
 	const globalTime = useSelector<AppState, GlobalReducer>(
@@ -445,6 +502,8 @@ export function DashboardProvider({
 			selectedDashboard,
 			dashboardId,
 			layouts,
+			listSortOrder,
+			setListSortOrder,
 			panelMap,
 			setLayouts,
 			setPanelMap,
@@ -468,6 +527,8 @@ export function DashboardProvider({
 			selectedDashboard,
 			dashboardId,
 			layouts,
+			listSortOrder,
+			setListSortOrder,
 			panelMap,
 			toScrollWidgetId,
 			updateLocalStorageDashboardVariables,

frontend/src/providers/Dashboard/types.ts

@@ -4,6 +4,13 @@ import dayjs from 'dayjs';
 import { SuccessResponseV2 } from 'types/api';
 import { Dashboard } from 'types/api/dashboard/getAll';
 
+export interface DashboardSortOrder {
+	columnKey: string;
+	order: string;
+	pagination: string;
+	search: string;
+}
+
 export type WidgetColumnWidths = {
 	[widgetId: string]: Record<string, number>;
 };
@@ -19,6 +26,8 @@ export interface IDashboardContext {
 	layouts: Layout[];
 	panelMap: Record<string, { widgets: Layout[]; collapsed: boolean }>;
 	setPanelMap: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+	listSortOrder: DashboardSortOrder;
+	setListSortOrder: (sortOrder: DashboardSortOrder) => void;
 	setLayouts: React.Dispatch<React.SetStateAction<Layout[]>>;
 	setSelectedDashboard: React.Dispatch<
 		React.SetStateAction<Dashboard | undefined>

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/flagger/configflagger/configflagger.go

@@ -3,7 +3,6 @@ package configflagger
 import (
 	"context"
 
-	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/types/featuretypes"
@@ -33,10 +32,6 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Boolean {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
-			if errors.Ast(err, errors.TypeNotFound) {
-				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "boolean")
-				continue
-			}
 			return nil, err
 		}
 
@@ -51,10 +46,6 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.String {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
-			if errors.Ast(err, errors.TypeNotFound) {
-				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "string")
-				continue
-			}
 			return nil, err
 		}
 
@@ -69,10 +60,6 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Float {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
-			if errors.Ast(err, errors.TypeNotFound) {
-				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "float")
-				continue
-			}
 			return nil, err
 		}
 
@@ -87,10 +74,6 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Integer {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
-			if errors.Ast(err, errors.TypeNotFound) {
-				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "integer")
-				continue
-			}
 			return nil, err
 		}
 
@@ -105,10 +88,6 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Object {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
-			if errors.Ast(err, errors.TypeNotFound) {
-				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "object")
-				continue
-			}
 			return nil, err
 		}
 

pkg/flagger/registry.go

@@ -5,7 +5,6 @@ import "github.com/SigNoz/signoz/pkg/types/featuretypes"
 var (
 	FeatureUseSpanMetrics = featuretypes.MustNewName("use_span_metrics")
 	FeatureKafkaSpanEval  = featuretypes.MustNewName("kafka_span_eval")
-	FeatureHideRootUser   = featuretypes.MustNewName("hide_root_user")
 )
 
 func MustNewRegistry() featuretypes.Registry {
@@ -26,14 +25,6 @@ func MustNewRegistry() featuretypes.Registry {
 			DefaultVariant: featuretypes.MustNewName("disabled"),
 			Variants:       featuretypes.NewBooleanVariants(),
 		},
-		&featuretypes.Feature{
-			Name:           FeatureHideRootUser,
-			Kind:           featuretypes.KindBoolean,
-			Stage:          featuretypes.StageStable,
-			Description:    "Controls whether root admin user is hidden or not",
-			DefaultVariant: featuretypes.MustNewName("disabled"),
-			Variants:       featuretypes.NewBooleanVariants(),
-		},
 	)
 	if err != nil {
 		panic(err)

pkg/modules/thirdpartyapi/translator.go

@@ -120,8 +120,6 @@ func FilterResponse(results []*qbtypes.QueryRangeResponse) []*qbtypes.QueryRange
 					}
 				}
 				resultData.Rows = filteredRows
-			case *qbtypes.ScalarData:
-				resultData.Data = filterScalarDataIPs(resultData.Columns, resultData.Data)
 			}
 
 			filteredData = append(filteredData, result)
@@ -147,39 +145,6 @@ func shouldIncludeSeries(series *qbtypes.TimeSeries) bool {
 	return true
 }
 
-func filterScalarDataIPs(columns []*qbtypes.ColumnDescriptor, data [][]any) [][]any {
-	// Find column indices for server address fields
-	serverColIndices := make([]int, 0)
-	for i, col := range columns {
-		if col.Name == derivedKeyHTTPHost {
-			serverColIndices = append(serverColIndices, i)
-		}
-	}
-
-	if len(serverColIndices) == 0 {
-		return data
-	}
-
-	filtered := make([][]any, 0, len(data))
-	for _, row := range data {
-		includeRow := true
-		for _, colIdx := range serverColIndices {
-			if colIdx < len(row) {
-				if strVal, ok := row[colIdx].(string); ok {
-					if net.ParseIP(strVal) != nil {
-						includeRow = false
-						break
-					}
-				}
-			}
-		}
-		if includeRow {
-			filtered = append(filtered, row)
-		}
-	}
-	return filtered
-}
-
 func shouldIncludeRow(row *qbtypes.RawRow) bool {
 	if row.Data != nil {
 		if domainVal, ok := row.Data[derivedKeyHTTPHost]; ok {

pkg/modules/thirdpartyapi/translator_test.go

@@ -117,59 +117,6 @@ func TestFilterResponse(t *testing.T) {
 				},
 			},
 		},
-		{
-			name: "should filter out IP addresses from scalar data",
-			input: []*qbtypes.QueryRangeResponse{
-				{
-					Data: qbtypes.QueryData{
-						Results: []any{
-							&qbtypes.ScalarData{
-								QueryName: "endpoints",
-								Columns: []*qbtypes.ColumnDescriptor{
-									{
-										TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: derivedKeyHTTPHost},
-										Type:              qbtypes.ColumnTypeGroup,
-									},
-									{
-										TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "endpoints"},
-										Type:              qbtypes.ColumnTypeAggregation,
-									},
-								},
-								Data: [][]any{
-									{"192.168.1.1", 10},
-									{"example.com", 20},
-									{"10.0.0.1", 5},
-								},
-							},
-						},
-					},
-				},
-			},
-			expected: []*qbtypes.QueryRangeResponse{
-				{
-					Data: qbtypes.QueryData{
-						Results: []any{
-							&qbtypes.ScalarData{
-								QueryName: "endpoints",
-								Columns: []*qbtypes.ColumnDescriptor{
-									{
-										TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: derivedKeyHTTPHost},
-										Type:              qbtypes.ColumnTypeGroup,
-									},
-									{
-										TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "endpoints"},
-										Type:              qbtypes.ColumnTypeAggregation,
-									},
-								},
-								Data: [][]any{
-									{"example.com", 20},
-								},
-							},
-						},
-					},
-				},
-			},
-		},
 	}
 
 	for _, tt := range tests {

pkg/modules/user/impluser/getter.go

@@ -2,22 +2,18 @@ package impluser
 
 import (
 	"context"
-	"slices"
 
-	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 type getter struct {
-	store   types.UserStore
-	flagger flagger.Flagger
+	store types.UserStore
 }
 
-func NewGetter(store types.UserStore, flagger flagger.Flagger) user.Getter {
-	return &getter{store: store, flagger: flagger}
+func NewGetter(store types.UserStore) user.Getter {
+	return &getter{store: store}
 }
 
 func (module *getter) GetRootUserByOrgID(ctx context.Context, orgID valuer.UUID) (*types.User, error) {
@@ -30,14 +26,6 @@ func (module *getter) ListByOrgID(ctx context.Context, orgID valuer.UUID) ([]*ty
 		return nil, err
 	}
 
-	// filter root users if feature flag `hide_root_users` is true
-	evalCtx := featuretypes.NewFlaggerEvaluationContext(orgID)
-	hideRootUsers := module.flagger.BooleanOrEmpty(ctx, flagger.FeatureHideRootUser, evalCtx)
-
-	if hideRootUsers {
-		users = slices.DeleteFunc(users, func(user *types.User) bool { return user.IsRoot })
-	}
-
 	return users, nil
 }
 

pkg/signoz/handler_test.go

@@ -11,11 +11,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/alertmanager/signozalertmanager"
 	"github.com/SigNoz/signoz/pkg/emailing/emailingtest"
 	"github.com/SigNoz/signoz/pkg/factory/factorytest"
-	"github.com/SigNoz/signoz/pkg/flagger"
-	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
-	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/sharder"
@@ -44,13 +41,7 @@ func TestNewHandlers(t *testing.T) {
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
-
-	flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
-	require.NoError(t, err)
-
-	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings), flagger)
-
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule, userGetter)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
 
 	querierHandler := querier.NewHandler(providerSettings, nil, nil)
 	handlers := NewHandlers(modules, providerSettings, nil, querierHandler, nil, nil, nil, nil, nil, nil, nil)

pkg/signoz/module.go

@@ -85,11 +85,11 @@ func NewModules(
 	queryParser queryparser.QueryParser,
 	config Config,
 	dashboard dashboard.Module,
-	userGetter user.Getter,
 ) Modules {
 	quickfilter := implquickfilter.NewModule(implquickfilter.NewStore(sqlstore))
 	orgSetter := implorganization.NewSetter(implorganization.NewStore(sqlstore), alertmanager, quickfilter)
 	user := impluser.NewModule(impluser.NewStore(sqlstore, providerSettings), tokenizer, emailing, providerSettings, orgSetter, authz, analytics, config.User)
+	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings))
 	ruleStore := sqlrulestore.NewRuleStore(sqlstore, queryParser, providerSettings)
 
 	return Modules{

pkg/signoz/module_test.go

@@ -11,11 +11,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/alertmanager/signozalertmanager"
 	"github.com/SigNoz/signoz/pkg/emailing/emailingtest"
 	"github.com/SigNoz/signoz/pkg/factory/factorytest"
-	"github.com/SigNoz/signoz/pkg/flagger"
-	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
-	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/sharder"
 	"github.com/SigNoz/signoz/pkg/sharder/noopsharder"
@@ -43,13 +40,7 @@ func TestNewModules(t *testing.T) {
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
-
-	flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
-	require.NoError(t, err)
-
-	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings), flagger)
-
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule, userGetter)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
 
 	reflectVal := reflect.ValueOf(modules)
 	for i := 0; i < reflectVal.NumField(); i++ {

pkg/signoz/provider.go

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

pkg/signoz/provider_test.go

@@ -1,13 +1,11 @@
 package signoz
 
 import (
-	"context"
 	"testing"
 
 	"github.com/DATA-DOG/go-sqlmock"
 	"github.com/SigNoz/signoz/pkg/alertmanager/nfmanager/nfmanagertest"
 	"github.com/SigNoz/signoz/pkg/analytics"
-	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
 	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
@@ -77,12 +75,7 @@ func TestNewProviderFactories(t *testing.T) {
 	})
 
 	assert.NotPanics(t, func() {
-		flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
-		if err != nil {
-			panic(err)
-		}
-
-		userGetter := impluser.NewGetter(impluser.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual), instrumentationtest.New().ToProviderSettings()), flagger)
+		userGetter := impluser.NewGetter(impluser.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual), instrumentationtest.New().ToProviderSettings()))
 		orgGetter := implorganization.NewGetter(implorganization.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual)), nil)
 		telemetryStore := telemetrystoretest.New(telemetrystore.Config{Provider: "clickhouse"}, sqlmock.QueryMatcherEqual)
 		NewStatsReporterProviderFactories(telemetryStore, []statsreporter.StatsCollector{}, orgGetter, userGetter, tokenizertest.NewMockTokenizer(t), version.Build{}, analytics.Config{Enabled: true})

pkg/signoz/signoz.go

@@ -280,7 +280,7 @@ func New(
 	}
 
 	// Initialize user getter
-	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings), flagger)
+	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings))
 
 	licensingProviderFactory := licenseProviderFactory(sqlstore, zeus, orgGetter, analytics)
 	licensing, err := licensingProviderFactory.New(
@@ -388,7 +388,7 @@ func New(
 	}
 
 	// Initialize all modules
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard, userGetter)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard)
 
 	userService := impluser.NewService(providerSettings, impluser.NewStore(sqlstore, providerSettings), modules.User, orgGetter, authz, config.User.Root)
 

pkg/sqlmigration/066_migrate_rules_v4_to_v5_post_deprecation.go

@@ -1,209 +0,0 @@
-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/types/ruletypes/api_params.go

@@ -355,10 +355,6 @@ func (r *PostableRule) validate() error {
 		errs = append(errs, signozError.NewInvalidInputf(signozError.CodeInvalidInput, "composite query is required"))
 	}
 
-	if r.Version != "v5" {
-		errs = append(errs, signozError.NewInvalidInputf(signozError.CodeInvalidInput, "only version v5 is supported, got %q", r.Version))
-	}
-
 	if isAllQueriesDisabled(r.RuleCondition.CompositeQuery) {
 		errs = append(errs, signozError.NewInvalidInputf(signozError.CodeInvalidInput, "all queries are disabled in rule condition"))
 	}

pkg/types/ruletypes/api_params_test.go

@@ -108,7 +108,6 @@ func TestParseIntoRule(t *testing.T) {
 				"ruleType": "threshold_rule",
 				"evalWindow": "5m",
 				"frequency": "1m",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -151,7 +150,6 @@ func TestParseIntoRule(t *testing.T) {
 			content: []byte(`{
 				"alert": "DefaultsRule",
 				"ruleType": "threshold_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -189,7 +187,6 @@ func TestParseIntoRule(t *testing.T) {
 			initRule: PostableRule{},
 			content: []byte(`{
 				"alert": "PromQLRule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "promql",
@@ -259,7 +256,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "SeverityLabelTest",
 				"schemaVersion": "v1",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -348,7 +344,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "NoLabelsTest",
 				"schemaVersion": "v1",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -389,7 +384,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "OverwriteTest",
 				"schemaVersion": "v1",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -480,7 +474,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "V2Test",
 				"schemaVersion": "v2",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -524,7 +517,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			initRule: PostableRule{},
 			content: []byte(`{
 				"alert": "DefaultSchemaTest",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -577,7 +569,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 func TestParseIntoRuleThresholdGeneration(t *testing.T) {
 	content := []byte(`{
 		"alert": "TestThresholds",
-		"version": "v5",
 		"condition": {
 			"compositeQuery": {
 				"queryType": "builder",
@@ -648,7 +639,6 @@ func TestParseIntoRuleMultipleThresholds(t *testing.T) {
 		"schemaVersion": "v2",
 		"alert": "MultiThresholdAlert",
 		"ruleType": "threshold_rule",
-		"version": "v5",
 		"condition": {
 			"compositeQuery": {
 				"queryType": "builder",
@@ -742,7 +732,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -777,7 +766,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -811,7 +799,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyAboveTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -846,7 +833,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyAboveTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -880,7 +866,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowAllTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -916,7 +901,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowAllTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -951,7 +935,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyOutOfBoundsTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -986,7 +969,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "ThresholdTest",
 				"ruleType": "threshold_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -1021,7 +1003,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "ThresholdTest",
 				"ruleType": "threshold_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",