feat: update module function

* fix: fixed unit converstion support across thresholds and yaxisunit

* fix: fixed tsc

* fix: fixed failing tests

* chore: cleaned up old yaxisselector

* chore: minor change

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

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

frontend/src/components/YAxisUnitSelector/constants.ts

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

frontend/src/components/YAxisUnitSelector/types.ts

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

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -172,23 +172,51 @@ 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
+					StringOperators.NOOP &&
+				sourcepage !== DataSource.LOGS
 			) {
 				return JSON.stringify(queryToUse);
 			}
 
-			// Modify aggregateOperator to count, as noop is not supported in alerts
+			// Convert NOOP to COUNT for alerts and strip orderBy for logs
 			const modifiedQuery = cloneDeep(queryToUse);
+			if (modifiedQuery && modifiedQuery.builder?.queryData) {
+				modifiedQuery.builder.queryData = modifiedQuery.builder.queryData.map(
+					(item) => {
+						const updatedItem = { ...item };
 
-			modifiedQuery.builder.queryData[0].aggregateOperator = StringOperators.COUNT;
+						if (updatedItem.aggregateOperator === StringOperators.NOOP) {
+							updatedItem.aggregateOperator = StringOperators.COUNT;
+						}
 
-			return JSON.stringify(modifiedQuery);
+						// 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)),
+				);
+			}
 		},
-		[query],
+		[panelType, query, sourcepage],
 	);
 
 	const onCreateAlertsHandler = useCallback(
@@ -757,9 +785,9 @@ function ExplorerOptions({
 		);
 	}, [
 		disabled,
+		query,
 		isOneChartPerQuery,
 		onCreateAlertsHandler,
-		query,
 		splitedQueries,
 	]);
 

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

@@ -1,3 +1,4 @@
+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';
@@ -15,6 +16,11 @@ 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)'),
@@ -29,6 +35,7 @@ const mockGetExplorerToolBarVisibility = jest.mocked(
 );
 
 const mockUseUpdateDashboard = jest.mocked(useUpdateDashboard);
+const mockUseHistory = jest.mocked(useHistory);
 
 // Mock data
 const TEST_QUERY_ID = 'test-query-id';
@@ -103,7 +110,6 @@ describe('ExplorerOptionWrapper', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockGetExplorerToolBarVisibility.mockReturnValue(true);
-
 		// Mock useUpdateDashboard to return a mutation object
 		mockUseUpdateDashboard.mockReturnValue(({
 			mutate: jest.fn(),
@@ -117,6 +123,28 @@ 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/MetricsExplorer/Explorer/RelatedMetricsCard.tsx

@@ -39,7 +39,10 @@ function RelatedMetricsCard({ metric }: RelatedMetricsCardProps): JSX.Element {
 					dataSource={DataSource.METRICS}
 				/>
 			)}
-			<DashboardsAndAlertsPopover metricName={metric.name} />
+			<DashboardsAndAlertsPopover
+				dashboards={metric.dashboards}
+				alerts={metric.alerts}
+			/>
 		</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,10 +40,8 @@ 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: MetrictypesTypeDTO | undefined,
-): boolean {
-	return metricType === MetrictypesTypeDTO.gauge;
+export function isInspectEnabled(metricType: MetricType | undefined): boolean {
+	return metricType === MetricType.GAUGE;
 }
 
 export function getAllTimestampsOfMetrics(

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

@@ -1,17 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import {
-	Button,
-	Collapse,
-	Input,
-	Menu,
-	Popover,
-	Skeleton,
-	Typography,
-} from 'antd';
+import { Button, Collapse, Input, Menu, Popover, 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';
@@ -21,12 +12,9 @@ import { PANEL_TYPES } from '../../../constants/queryBuilder';
 import ROUTES from '../../../constants/routes';
 import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
-import MetricDetailsErrorState from './MetricDetailsErrorState';
 import { AllAttributesProps, AllAttributesValueProps } from './types';
 import { getMetricDetailsQuery } from './utils';
 
-const ALL_ATTRIBUTES_KEY = 'all-attributes';
-
 export function AllAttributesValue({
 	filterKey,
 	filterValue,
@@ -122,23 +110,13 @@ export function AllAttributesValue({
 
 function AllAttributes({
 	metricName,
+	attributes,
 	metricType,
 }: AllAttributesProps): JSX.Element {
 	const [searchString, setSearchString] = useState('');
-	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 [activeKey, setActiveKey] = useState<string | string[]>(
+		'all-attributes',
+	);
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
@@ -200,7 +178,7 @@ function AllAttributes({
 			attributes.filter(
 				(attribute) =>
 					attribute.key.toLowerCase().includes(searchString.toLowerCase()) ||
-					attribute.values?.some((value) =>
+					attribute.value.some((value) =>
 						value.toLowerCase().includes(searchString.toLowerCase()),
 					),
 			),
@@ -217,7 +195,7 @@ function AllAttributes({
 						},
 						value: {
 							key: attribute.key,
-							value: attribute.values,
+							value: attribute.value,
 						},
 				  }))
 				: [],
@@ -274,20 +252,6 @@ function AllAttributes({
 		],
 	);
 
-	const emptyText = useMemo(() => {
-		if (isErrorAttributes) {
-			return (
-				<div className="all-attributes-error-state">
-					<MetricDetailsErrorState
-						refetch={refetchAttributes}
-						errorMessage="Something went wrong while fetching attributes"
-					/>
-				</div>
-			);
-		}
-		return 'No attributes found';
-	}, [isErrorAttributes, refetchAttributes]);
-
 	const items = useMemo(
 		() => [
 			{
@@ -306,7 +270,6 @@ function AllAttributes({
 							onClick={(e): void => {
 								e.stopPropagation();
 							}}
-							disabled={isLoadingAttributes || isErrorAttributes}
 						/>
 					</div>
 				),
@@ -314,44 +277,25 @@ 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,
-						}}
 					/>
 				),
 			},
 		],
-		[
-			searchString,
-			isLoadingAttributes,
-			isErrorAttributes,
-			columns,
-			tableData,
-			emptyText,
-		],
+		[columns, tableData, searchString],
 	);
 
-	if (isLoadingAttributes) {
-		return (
-			<div className="all-attributes-skeleton-container">
-				<Skeleton active paragraph={{ rows: 8 }} />
-			</div>
-		);
-	}
-
 	return (
 		<Collapse
 			bordered
-			className="metrics-accordion"
+			className="metrics-accordion metrics-metadata-accordion"
 			activeKey={activeKey}
-			onChange={(keys): void => setActiveKey(keys as string[])}
+			onChange={(keys): void => setActiveKey(keys)}
 			items={items}
 		/>
 	);

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

@@ -2,84 +2,36 @@ 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({
-	metricName,
+	alerts,
+	dashboards,
 }: DashboardsAndAlertsPopoverProps): JSX.Element | null {
 	const { safeNavigate } = useSafeNavigate();
 	const params = useUrlQuery();
 
-	const {
-		data: alertsData,
-		isLoading: isLoadingAlerts,
-		isError: isErrorAlerts,
-	} = useGetMetricAlerts(
-		{
-			metricName: metricName ?? '',
-		},
-		{
-			query: {
-				enabled: !!metricName,
-			},
-		},
-	);
-
-	const {
-		data: dashboardsData,
-		isLoading: isLoadingDashboards,
-		isError: isErrorDashboards,
-	} = useGetMetricDashboards(
-		{
-			metricName: 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.alertId,
+				key: alert.alert_id,
 				label: (
 					<Typography.Link
-						key={alert.alertId}
+						key={alert.alert_id}
 						onClick={(): void => {
-							params.set(QueryParams.ruleId, alert.alertId);
+							params.set(QueryParams.ruleId, alert.alert_id);
 							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{alert.alertName || alert.alertId}
+						{alert.alert_name || alert.alert_id}
 					</Typography.Link>
 				),
 			}));
@@ -87,44 +39,41 @@ 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 (dashboards && dashboards.length > 0) {
-			return dashboards.map((dashboard) => ({
-				key: dashboard.dashboardId,
+		if (uniqueDashboards && uniqueDashboards.length > 0) {
+			return uniqueDashboards.map((dashboard) => ({
+				key: dashboard.dashboard_id,
 				label: (
 					<Typography.Link
-						key={dashboard.dashboardId}
+						key={dashboard.dashboard_id}
 						onClick={(): void => {
 							safeNavigate(
 								generatePath(ROUTES.DASHBOARD, {
-									dashboardId: dashboard.dashboardId,
+									dashboardId: dashboard.dashboard_id,
 								}),
 							);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{dashboard.dashboardName || dashboard.dashboardId}
+						{dashboard.dashboard_name || dashboard.dashboard_id}
 					</Typography.Link>
 				),
 			}));
 		}
 		return null;
-	}, [dashboards, safeNavigate]);
+	}, [uniqueDashboards, safeNavigate]);
 
-	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" />;
+	if (!dashboardsPopoverContent && !alertsPopoverContent) {
+		return null;
 	}
 
 	return (
@@ -143,7 +92,8 @@ function DashboardsAndAlertsPopover({
 					>
 						<Grid size={12} color={Color.BG_SIENNA_500} />
 						<Typography.Text>
-							{pluralize(dashboards.length, 'dashboard')}
+							{uniqueDashboards?.length} dashboard
+							{uniqueDashboards?.length === 1 ? '' : 's'}
 						</Typography.Text>
 					</div>
 				</Dropdown>
@@ -162,7 +112,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Bell size={12} color={Color.BG_SAKURA_500} />
 						<Typography.Text>
-							{pluralize(alerts.length, 'alert rule')}
+							{alerts?.length} alert {alerts?.length === 1 ? 'rule' : 'rules'}
 						</Typography.Text>
 					</div>
 				</Dropdown>

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

@@ -1,136 +0,0 @@
-import { useMemo } from 'react';
-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: metricName ?? '',
-		},
-		{
-			query: {
-				enabled: !!metricName,
-			},
-		},
-	);
-
-	const metricHighlights = metricHighlightsData?.data ?? null;
-
-	const dataPoints = useMemo(() => {
-		if (!metricHighlights) {
-			return null;
-		}
-		return (
-			<Typography.Text className="metric-details-grid-value">
-				<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
-					{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
-				</Tooltip>
-			</Typography.Text>
-		);
-	}, [metricHighlights]);
-
-	const timeSeries = useMemo(() => {
-		if (!metricHighlights) {
-			return null;
-		}
-		const timeSeriesActive = formatNumberToCompactFormat(
-			metricHighlights.activeTimeSeries,
-		);
-		const timeSeriesTotal = formatNumberToCompactFormat(
-			metricHighlights.totalTimeSeries,
-		);
-
-		return (
-			<Typography.Text className="metric-details-grid-value">
-				<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>
-		);
-	}, [metricHighlights]);
-
-	const lastReceived = useMemo(() => {
-		if (!metricHighlights) {
-			return null;
-		}
-		const displayText = formatTimestampToReadableDate(
-			metricHighlights.lastReceived,
-		);
-		return (
-			<Typography.Text className="metric-details-grid-value">
-				<Tooltip title={displayText}>{displayText}</Tooltip>
-			</Typography.Text>
-		);
-	}, [metricHighlights]);
-
-	if (isLoadingMetricHighlights) {
-		return (
-			<div className="metric-details-content-grid">
-				<Skeleton title={false} paragraph={{ rows: 2 }} active />
-			</div>
-		);
-	}
-
-	if (isErrorMetricHighlights) {
-		return (
-			<div className="metric-details-content-grid">
-				<div className="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">
-				{dataPoints}
-				{timeSeries}
-				{lastReceived}
-			</div>
-		</div>
-	);
-}
-
-export default Highlights;

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

@@ -1,58 +1,45 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button, Collapse, Input, Select, Skeleton, Typography } from 'antd';
+import { Button, Collapse, Input, Select, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
-import {
-	invalidateGetMetricMetadata,
-	invalidateListMetrics,
-	useUpdateMetricMetadata,
-} from 'api/generated/services/metrics';
-import {
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-	RenderErrorResponseDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { UpdateMetricMetadataProps } from 'api/metricsExplorer/updateMetricMetadata';
 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_METADATA_KEYS,
-	METRIC_METADATA_TEMPORALITY_OPTIONS,
-	METRIC_METADATA_TYPE_OPTIONS,
-	METRIC_METADATA_UPDATE_ERROR_MESSAGE,
-} from './constants';
-import MetricDetailsErrorState from './MetricDetailsErrorState';
-import { MetadataProps, MetricMetadataState, TableFields } from './types';
-import { transformUpdateMetricMetadataRequest } from './utils';
+	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';
 
 function Metadata({
 	metricName,
 	metadata,
-	isErrorMetricMetadata,
-	isLoadingMetricMetadata,
-	refetchMetricMetadata,
+	refetchMetricDetails,
 }: MetadataProps): JSX.Element {
 	const [isEditing, setIsEditing] = useState(false);
-
 	const [
-		metricMetadataState,
-		setMetricMetadataState,
-	] = useState<MetricMetadataState>({
-		type: MetrictypesTypeDTO.sum,
-		description: '',
-		temporality: MetrictypesTemporalityDTO.unspecified,
-		unit: '',
-		isMonotonic: false,
+		metricMetadata,
+		setMetricMetadata,
+	] = useState<UpdateMetricMetadataProps>({
+		metricType: metadata?.metric_type || MetricType.SUM,
+		description: metadata?.description || '',
+		temporality: metadata?.temporality,
+		unit: metadata?.unit,
 	});
 	const { notifications } = useNotifications();
 	const {
@@ -64,132 +51,110 @@ 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).map((key) => ({
-						key,
-						value: {
-							value: metadata[key as keyof typeof metadata],
+				? Object.keys({
+						...metadata,
+						temporality: metadata?.temporality,
+				  })
+						// Filter out monotonic as user input is not required
+						.filter((key) => key !== 'monotonic')
+						.map((key) => ({
 							key,
-						},
-				  }))
+							value: {
+								value: metadata[key as keyof typeof metadata],
+								key,
+							},
+						}))
 				: [],
 		[metadata],
 	);
 
 	// Render un-editable field value
-	const renderUneditableField = useCallback(
-		(key: keyof MetricMetadataState, 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 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 renderColumnValue = useCallback(
-		(field: { value: string; key: keyof MetricMetadataState }): JSX.Element => {
+		(field: { value: string; key: string }): 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 === TableFields.UNIT && Boolean(metadata?.unit);
+			const metricUnitAlreadySet = field.key === 'unit' && Boolean(metadata?.unit);
 			if (metricUnitAlreadySet) {
 				return renderUneditableField(field.key, field.value);
 			}
 
-			// Monotonic is not editable
-			if (field.key === TableFields.IS_MONOTONIC) {
-				return renderUneditableField(field.key, field.value);
-			}
-
-			if (field.key === TableFields.TYPE) {
+			if (field.key === 'metric_type') {
 				return (
 					<Select
 						data-testid="metric-type-select"
-						options={METRIC_METADATA_TYPE_OPTIONS}
-						value={metricMetadataState.type}
+						options={Object.entries(METRIC_TYPE_VALUES_MAP).map(([key]) => ({
+							value: key,
+							label: METRIC_TYPE_LABEL_MAP[key as MetricType],
+						}))}
+						value={metricMetadata.metricType}
 						onChange={(value): void => {
-							setMetricMetadataState((prev) => ({
+							setMetricMetadata((prev) => ({
 								...prev,
-								type: value,
+								metricType: value as MetricType,
 							}));
 						}}
 					/>
 				);
 			}
-			if (field.key === TableFields.UNIT) {
+			if (field.key === 'unit') {
 				return (
 					<YAxisUnitSelector
-						value={metricMetadataState.unit}
+						value={metricMetadata.unit}
 						onChange={(value): void => {
-							setMetricMetadataState((prev) => ({ ...prev, unit: value }));
+							setMetricMetadata((prev) => ({ ...prev, unit: value }));
 						}}
 						data-testid="unit-select"
 						source={YAxisSource.EXPLORER}
 					/>
 				);
 			}
-			if (field.key === TableFields.Temporality) {
-				const temporalityValue =
-					metricMetadataState.temporality === MetrictypesTemporalityDTO.unspecified
-						? undefined
-						: metricMetadataState.temporality;
+			if (field.key === 'temporality') {
 				return (
 					<Select
 						data-testid="temporality-select"
-						options={METRIC_METADATA_TEMPORALITY_OPTIONS}
-						value={temporalityValue}
+						options={Object.values(Temporality).map((key) => ({
+							value: key,
+							label: key,
+						}))}
+						value={metricMetadata.temporality}
 						onChange={(value): void => {
-							setMetricMetadataState((prev) => ({
+							setMetricMetadata((prev) => ({
 								...prev,
-								temporality: value,
+								temporality: value as Temporality,
 							}));
 						}}
 					/>
 				);
 			}
-			if (field.key === TableFields.DESCRIPTION) {
+			if (field.key === 'description') {
 				return (
 					<Input
 						data-testid="description-input"
 						name={field.key}
-						defaultValue={metricMetadataState.description}
+						defaultValue={
+							metricMetadata[
+								field.key as Exclude<keyof UpdateMetricMetadataProps, 'isMonotonic'>
+							]
+						}
 						onChange={(e): void => {
-							setMetricMetadataState((prev) => ({
+							setMetricMetadata((prev) => ({
 								...prev,
 								[field.key]: e.target.value,
 							}));
@@ -199,7 +164,7 @@ function Metadata({
 			}
 			return <FieldRenderer field="-" />;
 		},
-		[isEditing, metadata?.unit, metricMetadataState, renderUneditableField],
+		[isEditing, metadata?.unit, metricMetadata, renderUneditableField],
 	);
 
 	const columns: ColumnsType<DataType> = useMemo(
@@ -236,61 +201,52 @@ function Metadata({
 	const handleSave = useCallback(() => {
 		updateMetricMetadata(
 			{
-				pathParams: {
-					metricName: metricName ?? '',
+				metricName,
+				payload: {
+					...metricMetadata,
+					isMonotonic: determineIsMonotonic(
+						metricMetadata.metricType,
+						metricMetadata.temporality,
+					),
 				},
-				data: transformUpdateMetricMetadataRequest(metricName, metricMetadataState),
 			},
 			{
-				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,
-					});
+				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.',
+						});
+					}
 				},
-				onError: (error): void => {
-					const errorMessage = (error as AxiosError<RenderErrorResponseDTO>).response
-						?.data.error?.message;
+				onError: (): void =>
 					notifications.error({
-						message: errorMessage || METRIC_METADATA_UPDATE_ERROR_MESSAGE,
-					});
-				},
+						message:
+							'Failed to update metadata, please try again. If the issue persists, please contact support.',
+					}),
 			},
 		);
 	}, [
 		updateMetricMetadata,
 		metricName,
-		metricMetadataState,
+		metricMetadata,
 		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 (
@@ -298,7 +254,10 @@ function Metadata({
 					<Button
 						className="action-button"
 						type="text"
-						onClick={cancelEdit}
+						onClick={(e): void => {
+							e.stopPropagation();
+							setIsEditing(false);
+						}}
 						disabled={isUpdatingMetricsMetadata}
 					>
 						<X size={14} />
@@ -319,9 +278,6 @@ function Metadata({
 				</div>
 			);
 		}
-		if (isErrorMetricMetadata) {
-			return null;
-		}
 		return (
 			<div className="action-menu">
 				<Button
@@ -338,13 +294,7 @@ function Metadata({
 				</Button>
 			</div>
 		);
-	}, [
-		isEditing,
-		isErrorMetricMetadata,
-		isUpdatingMetricsMetadata,
-		cancelEdit,
-		handleSave,
-	]);
+	}, [handleSave, isEditing, isUpdatingMetricsMetadata]);
 
 	const items = useMemo(
 		() => [
@@ -356,14 +306,7 @@ function Metadata({
 					</div>
 				),
 				key: 'metric-metadata',
-				children: isErrorMetricMetadata ? (
-					<div className="metric-metadata-error-state">
-						<MetricDetailsErrorState
-							refetch={refetchMetricMetadata}
-							errorMessage="Something went wrong while fetching metric metadata"
-						/>
-					</div>
-				) : (
+				children: (
 					<ResizeTable
 						columns={columns}
 						tableLayout="fixed"
@@ -375,23 +318,9 @@ function Metadata({
 				),
 			},
 		],
-		[
-			actionButton,
-			columns,
-			isErrorMetricMetadata,
-			refetchMetricMetadata,
-			tableData,
-		],
+		[actionButton, columns, 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,12 +38,7 @@
 		flex-direction: column;
 		gap: 12px;
 
-		.metrics-metadata-error {
-			padding: 16px !important;
-		}
-
 		.metric-details-content-grid {
-			height: 50px;
 			.labels-row,
 			.values-row {
 				display: grid;
@@ -52,18 +47,6 @@
 				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;
 
@@ -89,7 +72,6 @@
 		.dashboards-and-alerts-popover-container {
 			display: flex;
 			gap: 16px;
-			height: 32px;
 
 			.dashboards-and-alerts-popover {
 				border-radius: 20px;
@@ -120,19 +102,7 @@
 			}
 		}
 
-		.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;
@@ -178,6 +148,7 @@
 
 				.all-attributes-search-input {
 					width: 300px;
+					border: 1px solid var(--bg-slate-300);
 				}
 			}
 
@@ -190,7 +161,6 @@
 							.ant-typography:first-child {
 								font-family: 'Geist Mono';
 								color: var(--bg-robin-400);
-								background-color: transparent;
 							}
 						}
 						.all-attributes-contribution {
@@ -247,10 +217,6 @@
 
 			.ant-collapse-content-box {
 				padding: 0;
-
-				.metric-metadata-error-state {
-					height: 267px;
-				}
 			}
 
 			.ant-collapse-header {
@@ -271,7 +237,6 @@
 			}
 
 			.metric-metadata-value {
-				height: 67px;
 				background: rgba(22, 25, 34, 0.4);
 				overflow-x: scroll;
 				.field-renderer-container {
@@ -365,26 +330,18 @@
 	.metric-details-content {
 		.metrics-accordion {
 			.metrics-accordion-header {
-				.action-menu {
-					.action-button {
-						.ant-typography {
-							color: var(--bg-slate-400);
-						}
+				.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-vanilla-200);
+							color: var(--bg-slate-400);
 							background-color: var(--bg-robin-300);
 						}
 					}
@@ -438,13 +395,3 @@
 		}
 	}
 }
-
-.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,8 +1,16 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Divider, Drawer, Empty, Typography } from 'antd';
+import {
+	Button,
+	Divider,
+	Drawer,
+	Empty,
+	Skeleton,
+	Tooltip,
+	Typography,
+} from 'antd';
 import logEvent from 'api/common/logEvent';
-import { useGetMetricMetadata } from 'api/generated/services/metrics';
+import { useGetMetricDetails } from 'hooks/metricsExplorer/useGetMetricDetails';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Compass, Crosshair, X } from 'lucide-react';
 
@@ -11,12 +19,16 @@ 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 { getMetricDetailsQuery } from './utils';
+import {
+	formatNumberToCompactFormat,
+	formatTimestampToReadableDate,
+	getMetricDetailsQuery,
+} from './utils';
 
 import './MetricDetails.styles.scss';
 import '../Summary/Summary.styles.scss';
@@ -31,49 +43,55 @@ function MetricDetails({
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
 	const {
-		data: metricMetadataResponse,
-		isLoading: isLoadingMetricMetadata,
-		isError: isErrorMetricMetadata,
-		refetch: refetchMetricMetadata,
-	} = useGetMetricMetadata(
-		{
-			metricName: metricName ?? '',
-		},
-		{
-			query: {
-				enabled: !!metricName,
-			},
-		},
-	);
+		data,
+		isLoading,
+		isFetching,
+		error: metricDetailsError,
+		refetch: refetchMetricDetails,
+	} = useGetMetricDetails(metricName ?? '', {
+		enabled: !!metricName,
+	});
 
-	const metadata = useMemo(() => {
-		if (!metricMetadataResponse) {
+	const metric = data?.payload?.data;
+
+	const lastReceived = useMemo(() => {
+		if (!metric) {
 			return null;
 		}
-		const {
-			type,
-			description,
-			unit,
-			temporality,
-			isMonotonic,
-		} = metricMetadataResponse.data;
+		return formatTimestampToReadableDate(metric.lastReceived);
+	}, [metric]);
 
-		return {
-			type,
-			description,
-			unit,
-			temporality,
-			isMonotonic,
-		};
-	}, [metricMetadataResponse]);
+	const showInspectFeature = useMemo(
+		() => isInspectEnabled(metric?.metadata?.metric_type),
+		[metric],
+	);
 
-	const showInspectFeature = useMemo(() => isInspectEnabled(metadata?.type), [
-		metadata,
-	]);
+	const isMetricDetailsLoading = isLoading || isFetching;
+
+	const timeSeries = useMemo(() => {
+		if (!metric) {
+			return null;
+		}
+		const timeSeriesActive = formatNumberToCompactFormat(metric.timeSeriesActive);
+		const timeSeriesTotal = formatNumberToCompactFormat(metric.timeSeriesTotal);
+
+		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]);
 
 	const goToMetricsExplorerwithSelectedMetric = useCallback(() => {
 		if (metricName) {
-			const compositeQuery = getMetricDetailsQuery(metricName, metadata?.type);
+			const compositeQuery = getMetricDetailsQuery(
+				metricName,
+				metric?.metadata?.metric_type,
+			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
 				{
@@ -89,7 +107,9 @@ function MetricDetails({
 				[MetricsExplorerEventKeys.Modal]: 'metric-details',
 			});
 		}
-	}, [metricName, handleExplorerTabChange, metadata?.type]);
+	}, [metricName, handleExplorerTabChange, metric?.metadata?.metric_type]);
+
+	const isMetricDetailsError = metricDetailsError || !metric;
 
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.ModalOpened, {
@@ -97,13 +117,6 @@ function MetricDetails({
 		});
 	}, []);
 
-	const isActionButtonDisabled =
-		!metricName || isLoadingMetricMetadata || isErrorMetricMetadata;
-
-	if (!metricName) {
-		return <Empty description="Metric not found" />;
-	}
-
 	return (
 		<Drawer
 			width="60%"
@@ -111,13 +124,13 @@ function MetricDetails({
 				<div className="metric-details-header">
 					<div className="metric-details-title">
 						<Divider type="vertical" />
-						<Typography.Text>{metricName}</Typography.Text>
+						<Typography.Text>{metric?.name}</Typography.Text>
 					</div>
 					<div className="metric-details-header-buttons">
 						<Button
 							onClick={goToMetricsExplorerwithSelectedMetric}
 							icon={<Compass size={16} />}
-							disabled={isActionButtonDisabled}
+							disabled={!metricName}
 							data-testid="open-in-explorer-button"
 						>
 							Open in Explorer
@@ -127,11 +140,10 @@ function MetricDetails({
 							<Button
 								className="inspect-metrics-button"
 								aria-label="Inspect Metric"
-								disabled={isActionButtonDisabled}
 								icon={<Crosshair size={18} />}
 								onClick={(): void => {
-									if (metricName) {
-										openInspectModal(metricName);
+									if (metric?.name) {
+										openInspectModal(metric.name);
 									}
 								}}
 								data-testid="inspect-metric-button"
@@ -151,18 +163,60 @@ function MetricDetails({
 			destroyOnClose
 			closeIcon={<X size={16} />}
 		>
-			<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>
+			{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>
+			)}
 		</Drawer>
 	);
 }

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

@@ -1,20 +0,0 @@
-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,13 +1,11 @@
 import * as reactUseHooks from 'react-use';
-import { render, screen } from '@testing-library/react';
-import * as metricsExplorerHooks from 'api/generated/services/metrics';
-import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 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 } from './testUtlls';
 
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
@@ -23,28 +21,33 @@ jest
 	});
 
 const mockMetricName = 'test-metric';
-const mockMetricType = MetrictypesTypeDTO.gauge;
+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} metricType={mockMetricType} />,
+			<AllAttributes
+				metricName={mockMetricName}
+				attributes={mockAttributes}
+				metricType={mockMetricType}
+			/>,
 		);
 
 		expect(screen.getByText('All Attributes')).toBeInTheDocument();
@@ -52,7 +55,11 @@ describe('AllAttributes', () => {
 
 	it('renders all attribute keys and values', () => {
 		render(
-			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
+			<AllAttributes
+				metricName={mockMetricName}
+				attributes={mockAttributes}
+				metricType={mockMetricType}
+			/>,
 		);
 
 		// Check attribute keys are rendered
@@ -67,7 +74,11 @@ describe('AllAttributes', () => {
 
 	it('renders value counts correctly', () => {
 		render(
-			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
+			<AllAttributes
+				metricName={mockMetricName}
+				attributes={mockAttributes}
+				metricType={mockMetricType}
+			/>,
 		);
 
 		expect(screen.getByText('2')).toBeInTheDocument(); // For attribute1
@@ -75,35 +86,41 @@ describe('AllAttributes', () => {
 	});
 
 	it('handles empty attributes array', () => {
-		useGetMetricAttributesMock.mockReturnValue({
-			...getMockMetricAttributesData({
-				data: {
-					attributes: [],
-					totalKeys: 0,
-				},
-			}),
-		});
 		render(
-			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
+			<AllAttributes
+				metricName={mockMetricName}
+				attributes={[]}
+				metricType={mockMetricType}
+			/>,
 		);
 
 		expect(screen.getByText('All Attributes')).toBeInTheDocument();
-		expect(screen.getByText('No attributes found')).toBeInTheDocument();
+		expect(screen.queryByText('No data')).toBeInTheDocument();
 	});
 
-	it('clicking on an attribute key opens the explorer with the attribute filter applied', async () => {
+	it('clicking on an attribute key opens the explorer with the attribute filter applied', () => {
 		render(
-			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
+			<AllAttributes
+				metricName={mockMetricName}
+				attributes={mockAttributes}
+				metricType={mockMetricType}
+			/>,
 		);
-		await userEvent.click(screen.getByText('attribute1'));
+		fireEvent.click(screen.getByText('attribute1'));
 		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
 	});
 
-	it('filters attributes based on search input', async () => {
+	it('filters attributes based on search input', () => {
 		render(
-			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
+			<AllAttributes
+				metricName={mockMetricName}
+				attributes={mockAttributes}
+				metricType={mockMetricType}
+			/>,
 		);
-		await userEvent.type(screen.getByPlaceholderText('Search'), 'value1');
+		fireEvent.change(screen.getByPlaceholderText('Search'), {
+			target: { value: 'value1' },
+		});
 
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 		expect(screen.getByText('value1')).toBeInTheDocument();
@@ -127,7 +144,7 @@ describe('AllAttributesValue', () => {
 		expect(screen.getByText('value2')).toBeInTheDocument();
 	});
 
-	it('loads more attributes when show more button is clicked', async () => {
+	it('loads more attributes when show more button is clicked', () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -138,7 +155,7 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.queryByText('value6')).not.toBeInTheDocument();
-		await userEvent.click(screen.getByText('Show More'));
+		fireEvent.click(screen.getByText('Show More'));
 		expect(screen.getByText('value6')).toBeInTheDocument();
 	});
 
@@ -155,7 +172,7 @@ describe('AllAttributesValue', () => {
 		expect(screen.queryByText('Show More')).not.toBeInTheDocument();
 	});
 
-	it('copy button should copy the attribute value to the clipboard', async () => {
+	it('copy button should copy the attribute value to the clipboard', () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -166,13 +183,13 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.getByText('value1')).toBeInTheDocument();
-		await userEvent.click(screen.getByText('value1'));
+		fireEvent.click(screen.getByText('value1'));
 		expect(screen.getByText('Copy Attribute')).toBeInTheDocument();
-		await userEvent.click(screen.getByText('Copy Attribute'));
+		fireEvent.click(screen.getByText('Copy Attribute'));
 		expect(mockUseCopyToClipboard).toHaveBeenCalledWith('value1');
 	});
 
-	it('explorer button should go to metrics explore with the attribute filter applied', async () => {
+	it('explorer button should go to metrics explore with the attribute filter applied', () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -183,10 +200,10 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.getByText('value1')).toBeInTheDocument();
-		await userEvent.click(screen.getByText('value1'));
+		fireEvent.click(screen.getByText('value1'));
 
 		expect(screen.getByText('Open in Explorer')).toBeInTheDocument();
-		await userEvent.click(screen.getByText('Open in Explorer'));
+		fireEvent.click(screen.getByText('Open in Explorer'));
 		expect(mockGoToMetricsExploreWithAppliedAttribute).toHaveBeenCalledWith(
 			'attribute1',
 			'value1',

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

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

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

@@ -1,85 +0,0 @@
-import { render } from '@testing-library/react';
-import * as metricsExplorerHooks from 'api/generated/services/metrics';
-
-import Highlights from '../Highlights';
-import { formatTimestampToReadableDate } from '../utils';
-import { getMockMetricHighlightsData } from './testUtlls';
-
-const MOCK_METRIC_NAME = 'test-metric';
-const METRIC_DETAILS_GRID_VALUE_SELECTOR = '.metric-details-grid-value';
-
-const useGetMetricHighlightsMock = jest.spyOn(
-	metricsExplorerHooks,
-	'useGetMetricHighlights',
-);
-
-describe('Highlights', () => {
-	beforeEach(() => {
-		useGetMetricHighlightsMock.mockReturnValue(getMockMetricHighlightsData());
-	});
-
-	it('should render all highlights data correctly', () => {
-		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
-
-		const metricHighlightsValues = container.querySelectorAll(
-			METRIC_DETAILS_GRID_VALUE_SELECTOR,
-		);
-
-		expect(metricHighlightsValues).toHaveLength(3);
-		expect(metricHighlightsValues[0].textContent).toBe('1M+');
-		expect(metricHighlightsValues[1].textContent).toBe('1M total ⎯ 1M active');
-		expect(metricHighlightsValues[2].textContent).toBe(
-			formatTimestampToReadableDate('2026-01-24T00:00:00Z'),
-		);
-	});
-
-	it('should render error state correctly', () => {
-		useGetMetricHighlightsMock.mockReturnValue(
-			getMockMetricHighlightsData(
-				{},
-				{
-					isError: true,
-				},
-			),
-		);
-
-		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
-
-		expect(
-			container.querySelector('.metric-highlights-error-state'),
-		).toBeInTheDocument();
-		expect(
-			container.querySelector('.metric-highlights-error-state .ant-btn'),
-		).toBeInTheDocument();
-	});
-
-	it('should render loading state when data is loading', () => {
-		useGetMetricHighlightsMock.mockReturnValue(
-			getMockMetricHighlightsData(
-				{},
-				{
-					isLoading: true,
-				},
-			),
-		);
-
-		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
-
-		expect(container.querySelector('.ant-skeleton')).toBeInTheDocument();
-	});
-
-	it('should not render grid values when there is no data', () => {
-		useGetMetricHighlightsMock.mockReturnValue(
-			getMockMetricHighlightsData({
-				data: undefined,
-			}),
-		);
-
-		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
-
-		const metricHighlightsValues = container.querySelectorAll(
-			METRIC_DETAILS_GRID_VALUE_SELECTOR,
-		);
-		expect(metricHighlightsValues).toHaveLength(0);
-	});
-});

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

@@ -1,24 +1,16 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-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 { fireEvent, render, screen } from '@testing-library/react';
 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 } from './testUtlls';
 
 // Mock antd select for testing
 jest.mock('antd', () => ({
@@ -80,18 +72,13 @@ jest.mock('react-query', () => ({
 	}),
 }));
 
-const mockUseUpdateMetricMetadataHook = jest.spyOn(
-	metricsExplorerHooks,
-	'useUpdateMetricMetadata',
-);
-type UseUpdateMetricMetadataResult = ReturnType<
-	typeof metricsExplorerHooks.useUpdateMetricMetadata
->;
 const mockUseUpdateMetricMetadata = jest.fn();
-
-const mockMetricMetadata = transformMetricMetadata(
-	getMockMetricMetadataData().data as GetMetricMetadata200,
-) as MetricMetadata;
+jest
+	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
+	.mockReturnValue({
+		mutate: mockUseUpdateMetricMetadata,
+		isLoading: false,
+	} as any);
 
 const mockErrorNotification = jest.fn();
 const mockSuccessNotification = jest.fn();
@@ -103,50 +90,46 @@ jest.spyOn(useNotificationsHooks, 'useNotifications').mockReturnValue({
 } as any);
 
 const mockMetricName = 'test_metric';
-const mockRefetchMetricMetadata = jest.fn();
+const mockMetricMetadata = {
+	metric_type: MetricType.GAUGE,
+	description: 'test_description',
+	unit: 'test_unit',
+	temporality: Temporality.DELTA,
+};
+const mockRefetchMetricDetails = jest.fn();
 
 describe('Metadata', () => {
-	beforeEach(() => {
-		mockUseUpdateMetricMetadataHook.mockReturnValue(({
-			mutate: mockUseUpdateMetricMetadata,
-		} as Partial<UseUpdateMetricMetadataResult>) as UseUpdateMetricMetadataResult);
-	});
-
 	it('should render the metadata properly', () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
-				refetchMetricMetadata={mockRefetchMetricMetadata}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		expect(screen.getByText('Metric Type')).toBeInTheDocument();
-		expect(screen.getByText('Gauge')).toBeInTheDocument();
+		expect(screen.getByText(mockMetricMetadata.metric_type)).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('Delta')).toBeInTheDocument();
+		expect(screen.getByText(mockMetricMetadata.temporality)).toBeInTheDocument();
 	});
 
-	it('editing the metadata should show the form inputs', async () => {
+	it('editing the metadata should show the form inputs', () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
-				refetchMetricMetadata={mockRefetchMetricMetadata}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		expect(screen.getByTestId('metric-type-select')).toBeInTheDocument();
 		expect(screen.getByTestId('temporality-select')).toBeInTheDocument();
@@ -161,48 +144,52 @@ describe('Metadata', () => {
 					...mockMetricMetadata,
 					unit: '',
 				}}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
-				refetchMetricMetadata={mockRefetchMetricMetadata}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
 		expect(metricDescriptionInput).toBeInTheDocument();
-		await userEvent.clear(metricDescriptionInput);
-		await userEvent.type(metricDescriptionInput, 'Updated description');
+		fireEvent.change(metricDescriptionInput, {
+			target: { value: 'Updated description' },
+		});
 
 		const metricTypeSelect = screen.getByTestId('metric-type-select');
 		expect(metricTypeSelect).toBeInTheDocument();
-		await userEvent.selectOptions(metricTypeSelect, MetrictypesTypeDTO.sum);
+		fireEvent.change(metricTypeSelect, {
+			target: { value: MetricType.SUM },
+		});
 
 		const temporalitySelect = screen.getByTestId('temporality-select');
 		expect(temporalitySelect).toBeInTheDocument();
-		await userEvent.selectOptions(temporalitySelect, Temporality.CUMULATIVE);
+		fireEvent.change(temporalitySelect, {
+			target: { value: Temporality.CUMULATIVE },
+		});
 
 		const unitSelect = screen.getByTestId('unit-select');
 		expect(unitSelect).toBeInTheDocument();
-		await userEvent.selectOptions(unitSelect, 'By');
+		fireEvent.change(unitSelect, {
+			target: { value: 'By' },
+		});
 
 		const saveButton = screen.getByText('Save');
 		expect(saveButton).toBeInTheDocument();
-		await userEvent.click(saveButton);
+		fireEvent.click(saveButton);
 
 		expect(mockUseUpdateMetricMetadata).toHaveBeenCalledWith(
 			expect.objectContaining({
-				data: expect.objectContaining({
-					type: MetrictypesTypeDTO.sum,
-					temporality: MetrictypesTemporalityDTO.cumulative,
+				metricName: mockMetricName,
+				payload: expect.objectContaining({
+					description: 'Updated description',
+					metricType: MetricType.SUM,
+					temporality: Temporality.CUMULATIVE,
 					unit: 'By',
 					isMonotonic: true,
 				}),
-				pathParams: {
-					metricName: mockMetricName,
-				},
 			}),
 			expect.objectContaining({
 				onSuccess: expect.any(Function),
@@ -216,29 +203,29 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
-				refetchMetricMetadata={mockRefetchMetricMetadata}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		await userEvent.clear(metricDescriptionInput);
-		await userEvent.type(metricDescriptionInput, 'Updated description');
+		fireEvent.change(metricDescriptionInput, {
+			target: { value: 'Updated description' },
+		});
 
 		const saveButton = screen.getByText('Save');
-		await userEvent.click(saveButton);
+		fireEvent.click(saveButton);
 
 		const onSuccessCallback =
 			mockUseUpdateMetricMetadata.mock.calls[0][1].onSuccess;
-		onSuccessCallback({ status: 200 });
+		onSuccessCallback({ statusCode: 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 () => {
@@ -246,24 +233,24 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
-				refetchMetricMetadata={mockRefetchMetricMetadata}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		await userEvent.clear(metricDescriptionInput);
-		await userEvent.type(metricDescriptionInput, 'Updated description');
+		fireEvent.change(metricDescriptionInput, {
+			target: { value: 'Updated description' },
+		});
 
 		const saveButton = screen.getByText('Save');
-		await userEvent.click(saveButton);
+		fireEvent.click(saveButton);
 
-		const onErrorCallback = mockUseUpdateMetricMetadata.mock.calls[0][1].onError;
-		onErrorCallback({ status: 500 });
+		const onSuccessCallback =
+			mockUseUpdateMetricMetadata.mock.calls[0][1].onSuccess;
+		onSuccessCallback({ statusCode: 500 });
 
 		expect(mockErrorNotification).toHaveBeenCalledWith({
 			message:
@@ -276,21 +263,20 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
-				refetchMetricMetadata={mockRefetchMetricMetadata}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		await userEvent.clear(metricDescriptionInput);
-		await userEvent.type(metricDescriptionInput, 'Updated description');
+		fireEvent.change(metricDescriptionInput, {
+			target: { value: 'Updated description' },
+		});
 
 		const saveButton = screen.getByText('Save');
-		await userEvent.click(saveButton);
+		fireEvent.click(saveButton);
 
 		const onErrorCallback = mockUseUpdateMetricMetadata.mock.calls[0][1].onError;
 
@@ -303,43 +289,39 @@ describe('Metadata', () => {
 		});
 	});
 
-	it('cancel button should cancel the edit mode', async () => {
+	it('cancel button should cancel the edit mode', () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
-				refetchMetricMetadata={mockRefetchMetricMetadata}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const cancelButton = screen.getByText('Cancel');
 		expect(cancelButton).toBeInTheDocument();
-		await userEvent.click(cancelButton);
+		fireEvent.click(cancelButton);
 
 		const editButton2 = screen.getByText('Edit');
 		expect(editButton2).toBeInTheDocument();
 	});
 
-	it('should not allow editing of unit if it is already set', async () => {
+	it('should not allow editing of unit if it is already set', () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
-				refetchMetricMetadata={mockRefetchMetricMetadata}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const unitSelect = screen.queryByTestId('unit-select');
 		expect(unitSelect).not.toBeInTheDocument();

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

@@ -1,16 +1,68 @@
-import { render, screen } from '@testing-library/react';
-import * as metricsExplorerHooks from 'api/generated/services/metrics';
+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 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')
@@ -36,50 +88,7 @@ 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
@@ -92,15 +101,27 @@ describe('MetricDetails', () => {
 		);
 
 		expect(screen.getByText(mockMetricName)).toBeInTheDocument();
-		expect(screen.getByTestId('all-attributes')).toBeInTheDocument();
+		expect(screen.getByText(mockMetricDescription)).toBeInTheDocument();
 		expect(
-			screen.getByTestId('dashboards-and-alerts-popover'),
+			screen.getByText(getUniversalNameFromMetricUnit(mockMetricData.unit)),
 		).toBeInTheDocument();
-		expect(screen.getByTestId('highlights')).toBeInTheDocument();
-		expect(screen.getByTestId('metadata')).toBeInTheDocument();
 	});
 
-	it('renders the "open in explorer" and "inspect" buttons', async () => {
+	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);
 		render(
 			<MetricDetails
 				onClose={mockOnClose}
@@ -114,24 +135,93 @@ describe('MetricDetails', () => {
 		expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
 		expect(screen.getByTestId('inspect-metric-button')).toBeInTheDocument();
 
-		await userEvent.click(screen.getByTestId('open-in-explorer-button'));
+		fireEvent.click(screen.getByTestId('open-in-explorer-button'));
 		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
 
-		await userEvent.click(screen.getByTestId('inspect-metric-button'));
+		fireEvent.click(screen.getByTestId('inspect-metric-button'));
 		expect(mockOpenInspectModal).toHaveBeenCalled();
 	});
 
-	it('should render empty state when metric name is not provided', () => {
+	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={null}
+				metricName={mockMetricName}
 				isModalTimeSelection
 				openInspectModal={mockOpenInspectModal}
 			/>,
 		);
 
-		expect(screen.getByText('Metric not found')).toBeInTheDocument();
+		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

@@ -1,166 +0,0 @@
-import * as metricsExplorerHooks from 'api/generated/services/metrics';
-import {
-	GetMetricAlerts200,
-	GetMetricAttributes200,
-	GetMetricDashboards200,
-	GetMetricHighlights200,
-	GetMetricMetadata200,
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-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,7 +1,5 @@
-import {
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 
 import {
 	determineIsMonotonic,
@@ -12,48 +10,35 @@ import {
 describe('MetricDetails utils', () => {
 	describe('determineIsMonotonic', () => {
 		it('should return true for histogram metrics', () => {
-			expect(determineIsMonotonic(MetrictypesTypeDTO.histogram)).toBe(true);
+			expect(determineIsMonotonic(MetricType.HISTOGRAM)).toBe(true);
 		});
 
 		it('should return true for exponential histogram metrics', () => {
-			expect(determineIsMonotonic(MetrictypesTypeDTO.exponentialhistogram)).toBe(
+			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(
 				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(
-					MetrictypesTypeDTO.sum,
-					MetrictypesTemporalityDTO.delta,
-				),
-			).toBe(false);
+			expect(determineIsMonotonic(MetricType.SUM, Temporality.DELTA)).toBe(false);
 		});
 
 		it('should return false by default', () => {
-			expect(
-				determineIsMonotonic(
-					'' as MetrictypesTypeDTO,
-					'' as MetrictypesTemporalityDTO,
-				),
-			).toBe(false);
+			expect(determineIsMonotonic('' as MetricType, '' as Temporality)).toBe(
+				false,
+			);
 		});
 	});
 
@@ -130,16 +115,13 @@ describe('MetricDetails utils', () => {
 		const API_GATEWAY = 'api-gateway';
 
 		it('should create correct query for SUM metric type', () => {
-			const query = getMetricDetailsQuery(
-				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.sum,
-			);
+			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.SUM);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.sum,
+				MetricType.SUM,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('rate');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('rate');
@@ -147,16 +129,13 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for GAUGE metric type', () => {
-			const query = getMetricDetailsQuery(
-				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.gauge,
-			);
+			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.GAUGE);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.gauge,
+				MetricType.GAUGE,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('avg');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('avg');
@@ -164,16 +143,13 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for SUMMARY metric type', () => {
-			const query = getMetricDetailsQuery(
-				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.summary,
-			);
+			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.SUMMARY);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.summary,
+				MetricType.SUMMARY,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -181,16 +157,13 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for HISTOGRAM metric type', () => {
-			const query = getMetricDetailsQuery(
-				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.histogram,
-			);
+			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.HISTOGRAM);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.histogram,
+				MetricType.HISTOGRAM,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -200,14 +173,14 @@ describe('MetricDetails utils', () => {
 		it('should create correct query for EXPONENTIAL_HISTOGRAM metric type', () => {
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.exponentialhistogram,
+				MetricType.EXPONENTIAL_HISTOGRAM,
 			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.exponentialhistogram,
+				MetricType.EXPONENTIAL_HISTOGRAM,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -230,7 +203,7 @@ describe('MetricDetails utils', () => {
 			const filter = { key: 'service', value: API_GATEWAY };
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.sum,
+				MetricType.SUM,
 				filter,
 			);
 
@@ -248,7 +221,7 @@ describe('MetricDetails utils', () => {
 			const groupBy = 'service';
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.sum,
+				MetricType.SUM,
 				undefined,
 				groupBy,
 			);
@@ -263,7 +236,7 @@ describe('MetricDetails utils', () => {
 			const groupBy = 'endpoint';
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.sum,
+				MetricType.SUM,
 				filter,
 				groupBy,
 			);
@@ -277,10 +250,7 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should not include filters or groupBy when not provided', () => {
-			const query = getMetricDetailsQuery(
-				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.sum,
-			);
+			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.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,49 +1,6 @@
-import {
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
 export const METRIC_METADATA_KEYS = {
 	description: 'Description',
 	unit: 'Unit',
-	type: 'Metric Type',
+	metric_type: 'Metric Type',
 	temporality: 'Temporality',
-	isMonotonic: 'Monotonic',
 };
-
-export const METRIC_METADATA_TEMPORALITY_OPTIONS = [
-	{
-		value: MetrictypesTemporalityDTO.delta,
-		label: 'Delta',
-	},
-	{
-		value: MetrictypesTemporalityDTO.cumulative,
-		label: 'Cumulative',
-	},
-];
-
-export const METRIC_METADATA_TYPE_OPTIONS = [
-	{
-		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,12 +1,10 @@
 import {
-	MetricsexplorertypesMetricAlertDTO,
-	MetricsexplorertypesMetricAttributeDTO,
-	MetricsexplorertypesMetricDashboardDTO,
-	MetricsexplorertypesMetricHighlightsResponseDTO,
-	MetricsexplorertypesMetricMetadataDTO,
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+	MetricDetails,
+	MetricDetailsAlert,
+	MetricDetailsAttribute,
+	MetricDetailsDashboard,
+} from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 
 export interface MetricDetailsProps {
 	onClose: () => void;
@@ -16,24 +14,21 @@ export interface MetricDetailsProps {
 	openInspectModal?: (metricName: string) => void;
 }
 
-export interface HighlightsProps {
-	metricName: string;
-}
 export interface DashboardsAndAlertsPopoverProps {
-	metricName: string;
+	dashboards: MetricDetailsDashboard[] | null;
+	alerts: MetricDetailsAlert[] | null;
 }
 
 export interface MetadataProps {
 	metricName: string;
-	metadata: MetricMetadata | null;
-	isErrorMetricMetadata: boolean;
-	isLoadingMetricMetadata: boolean;
-	refetchMetricMetadata: () => void;
+	metadata: MetricDetails['metadata'] | undefined;
+	refetchMetricDetails: () => void;
 }
 
 export interface AllAttributesProps {
+	attributes: MetricDetailsAttribute[];
 	metricName: string;
-	metricType: MetrictypesTypeDTO | undefined;
+	metricType: MetricType | undefined;
 }
 
 export interface AllAttributesValueProps {
@@ -41,33 +36,3 @@ export interface AllAttributesValueProps {
 	filterValue: string[];
 	goToMetricsExploreWithAppliedAttribute: (key: string, value: string) => void;
 }
-
-export type MetricHighlight = MetricsexplorertypesMetricHighlightsResponseDTO;
-
-export type MetricAlert = MetricsexplorertypesMetricAlertDTO;
-
-export type MetricDashboard = MetricsexplorertypesMetricDashboardDTO;
-
-export type MetricMetadata = MetricsexplorertypesMetricMetadataDTO;
-export interface MetricMetadataState {
-	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,23 +1,12 @@
-import { UpdateMetricMetadataMutationBody } 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 { 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';
 
-import { MetricMetadata, MetricMetadataState } from './types';
-
-export function formatTimestampToReadableDate(
-	timestamp: number | string | undefined,
-): string {
-	if (!timestamp) {
-		return '-';
-	}
+export function formatTimestampToReadableDate(timestamp: string): string {
 	const date = new Date(timestamp);
 	const now = new Date();
 	const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
@@ -50,10 +39,7 @@ export function formatTimestampToReadableDate(
 	return date.toLocaleDateString();
 }
 
-export function formatNumberToCompactFormat(num: number | undefined): string {
-	if (!num) {
-		return '-';
-	}
+export function formatNumberToCompactFormat(num: number): string {
 	return new Intl.NumberFormat('en-US', {
 		notation: 'compact',
 		maximumFractionDigits: 1,
@@ -61,30 +47,27 @@ export function formatNumberToCompactFormat(num: number | undefined): string {
 }
 
 export function determineIsMonotonic(
-	metricType: MetrictypesTypeDTO,
-	temporality?: MetrictypesTemporalityDTO,
+	metricType: MetricType,
+	temporality?: Temporality,
 ): boolean {
 	if (
-		metricType === MetrictypesTypeDTO.histogram ||
-		metricType === MetrictypesTypeDTO.exponentialhistogram
+		metricType === MetricType.HISTOGRAM ||
+		metricType === MetricType.EXPONENTIAL_HISTOGRAM
 	) {
 		return true;
 	}
-	if (
-		metricType === MetrictypesTypeDTO.gauge ||
-		metricType === MetrictypesTypeDTO.summary
-	) {
+	if (metricType === MetricType.GAUGE || metricType === MetricType.SUMMARY) {
 		return false;
 	}
-	if (metricType === MetrictypesTypeDTO.sum) {
-		return temporality === MetrictypesTemporalityDTO.cumulative;
+	if (metricType === MetricType.SUM) {
+		return temporality === Temporality.CUMULATIVE;
 	}
 	return false;
 }
 
 export function getMetricDetailsQuery(
 	metricName: string,
-	metricType: MetrictypesTypeDTO | undefined,
+	metricType: MetricType | undefined,
 	filter?: { key: string; value: string },
 	groupBy?: string,
 ): Query {
@@ -92,23 +75,23 @@ export function getMetricDetailsQuery(
 	let spaceAggregation;
 	let aggregateOperator;
 	switch (metricType) {
-		case MetrictypesTypeDTO.sum:
+		case MetricType.SUM:
 			timeAggregation = 'rate';
 			spaceAggregation = 'sum';
 			aggregateOperator = 'rate';
 			break;
-		case MetrictypesTypeDTO.gauge:
+		case MetricType.GAUGE:
 			timeAggregation = 'avg';
 			spaceAggregation = 'avg';
 			aggregateOperator = 'avg';
 			break;
-		case MetrictypesTypeDTO.summary:
+		case MetricType.SUMMARY:
 			timeAggregation = 'noop';
 			spaceAggregation = 'sum';
 			aggregateOperator = 'noop';
 			break;
-		case MetrictypesTypeDTO.histogram:
-		case MetrictypesTypeDTO.exponentialhistogram:
+		case MetricType.HISTOGRAM:
+		case MetricType.EXPONENTIAL_HISTOGRAM:
 			timeAggregation = 'noop';
 			spaceAggregation = 'p90';
 			aggregateOperator = 'noop';
@@ -177,38 +160,3 @@ 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: MetricMetadataState,
-): 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,7 +5,6 @@ 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';
@@ -129,7 +128,7 @@ function Summary(): JSX.Element {
 	} = useGetMetricsList(metricsListQuery, {
 		enabled: !!metricsListQuery && !isInspectModalOpen,
 		queryKey: [
-			REACT_QUERY_KEY.GET_METRICS_LIST,
+			'metricsList',
 			queryFiltersWithoutId,
 			orderBy,
 			pageSize,

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

@@ -1,4 +1,3 @@
-import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 
 import { TreemapViewType } from './types';
@@ -26,16 +25,7 @@ export const METRIC_TYPE_LABEL_MAP = {
 	[MetricType.EXPONENTIAL_HISTOGRAM]: 'Exp. Histogram',
 };
 
-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> = {
+export const METRIC_TYPE_VALUES_MAP = {
 	[MetricType.SUM]: 'Sum',
 	[MetricType.GAUGE]: 'Gauge',
 	[MetricType.HISTOGRAM]: 'Histogram',
@@ -43,14 +33,6 @@ export const METRIC_TYPE_VALUES_MAP: Record<MetricType, string> = {
 	[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,7 +2,6 @@ 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,
@@ -22,7 +21,7 @@ import {
 } from 'lucide-react';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { METRIC_TYPE_LABEL_MAP, METRIC_TYPE_VIEW_LABEL_MAP } from './constants';
+import { METRIC_TYPE_LABEL_MAP } from './constants';
 import MetricNameSearch from './MetricNameSearch';
 import MetricTypeSearch from './MetricTypeSearch';
 import { MetricsListItemRowData, TreemapTile, TreemapViewType } from './types';
@@ -144,60 +143,6 @@ 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]);
-
-	return (
-		<div
-			className="metric-type-renderer"
-			style={{
-				backgroundColor: `${color}33`,
-				border: `1px solid ${color}`,
-				color,
-			}}
-		>
-			{icon}
-			<Typography.Text style={{ color, fontSize: 12 }}>
-				{METRIC_TYPE_VIEW_LABEL_MAP[type]}
-			</Typography.Text>
-		</div>
-	);
-}
-
 function ValidateRowValueWrapper({
 	value,
 	children,
@@ -215,9 +160,6 @@ 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: 'percent', label: 'Percent' },
-		{ value: 'ms', label: 'Milliseconds' },
+		{ value: '%', label: 'Percent (0 - 100)' },
+		{ value: 'ms', label: 'Milliseconds (ms)' },
 	]),
 }));
 
@@ -39,7 +39,7 @@ const defaultProps = {
 	],
 	thresholdTableOptions: 'cpu_usage',
 	columnUnits: { cpu_usage: 'percent', memory_usage: 'bytes' },
-	yAxisUnit: 'percent',
+	yAxisUnit: '%',
 	moveThreshold: jest.fn(),
 };
 

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

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

@@ -1,240 +0,0 @@
-/* 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,613 +1,53 @@
-import { flattenDeep } from 'lodash-es';
-
 import {
-	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';
+	UniversalUnitToGrafanaUnit,
+	YAxisCategoryNames,
+} from 'components/YAxisUnitSelector/constants';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
+import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
+import { convertValue } from 'lib/getConvertedValue';
 
-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 },
-		],
-	},
-];
+// 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 flattenedCategories = flattenDeep(
-	dataTypeCategories.map((category) => category.formats),
-);
+	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;
+			}
 
-type ConversionFactors = {
-	[key: string]: {
-		[key: string]: number | null;
-	};
+			const grafanaId = UniversalUnitToGrafanaUnit[unit.id];
+			return grafanaId === unitId;
+		}),
+	);
+
+	return foundCategory ? foundCategory.name : 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 {
-	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) {
+	if (!fromUnitId || !toUnitId) {
 		return null;
-	} // Return null if category or units are not found
+	}
 
-	// Gets the conversion factor for the specified units
-	const conversionFactor = getConversionFactor(
-		fromUnit,
-		toUnit,
-		category.name as any,
-	);
-	if (conversionFactor === null) {
+	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) {
 		return null;
-	} // Return null if conversion is not possible
+	}
 
-	return value * conversionFactor;
+	// 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);
 }
-
-// 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,6 +2,9 @@ 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,
@@ -21,11 +24,7 @@ import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import {
-	dataTypeCategories,
-	getCategoryName,
-} from './RightContainer/dataFormatCategories';
-import { CategoryNames } from './RightContainer/types';
+import { getCategoryName } from './RightContainer/dataFormatCategories';
 
 export const getIsQueryModified = (
 	currentQuery: Query,
@@ -606,14 +605,21 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
  * the label and value for each format.
  */
 export const getCategorySelectOptionByName = (
-	name?: CategoryNames | string,
-): DefaultOptionType[] =>
-	dataTypeCategories
-		.find((category) => category.name === name)
-		?.formats.map((format) => ({
-			label: format.name,
-			value: format.id,
-		})) || [];
+	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,
+			})) || []
+	);
+};
 
 /**
  * Generates unit options based on the provided column unit.

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

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

frontend/src/utils/pluralize.ts

@@ -1,13 +0,0 @@
-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/apiserver/signozapiserver/logspipeline.go

@@ -0,0 +1,12 @@
+package signozapiserver
+
+import (
+	"net/http"
+
+	"github.com/gorilla/mux"
+)
+
+func (provider *provider) addLogspipelineRoutes(router *mux.Router) error {
+	router.HandleFunc("/api/v2/pipelines", provider.logspipelineHandler.ListPipelines).Methods(http.MethodGet)
+	return nil
+}

pkg/apiserver/signozapiserver/provider.go

@@ -14,6 +14,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/authdomain"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/fields"
+	"github.com/SigNoz/signoz/pkg/modules/logspipeline"
 	"github.com/SigNoz/signoz/pkg/modules/metricsexplorer"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/preference"
@@ -48,6 +49,7 @@ type provider struct {
 	authzHandler           authz.Handler
 	zeusHandler            zeus.Handler
 	querierHandler         querier.Handler
+	logspipelineHandler    logspipeline.Handler
 }
 
 func NewFactory(
@@ -69,6 +71,7 @@ func NewFactory(
 	authzHandler authz.Handler,
 	zeusHandler zeus.Handler,
 	querierHandler querier.Handler,
+	logspipelineHandler logspipeline.Handler,
 ) factory.ProviderFactory[apiserver.APIServer, apiserver.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("signoz"), func(ctx context.Context, providerSettings factory.ProviderSettings, config apiserver.Config) (apiserver.APIServer, error) {
 		return newProvider(
@@ -93,6 +96,7 @@ func NewFactory(
 			authzHandler,
 			zeusHandler,
 			querierHandler,
+			logspipelineHandler,
 		)
 	})
 }
@@ -119,6 +123,7 @@ func newProvider(
 	authzHandler authz.Handler,
 	zeusHandler zeus.Handler,
 	querierHandler querier.Handler,
+	logspipelineHandler logspipeline.Handler,
 ) (apiserver.APIServer, error) {
 	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/apiserver/signozapiserver")
 	router := mux.NewRouter().UseEncodedPath()
@@ -143,6 +148,7 @@ func newProvider(
 		authzHandler:           authzHandler,
 		zeusHandler:            zeusHandler,
 		querierHandler:         querierHandler,
+		logspipelineHandler:    logspipelineHandler,
 	}
 
 	provider.authZ = middleware.NewAuthZ(settings.Logger(), orgGetter, authz)
@@ -223,9 +229,14 @@ func (provider *provider) AddToRouter(router *mux.Router) error {
 		return err
 	}
 
+	if err := provider.addLogspipelineRoutes(router); err != nil {
+		return err
+	}
+
 	return nil
 }
 
+
 func newSecuritySchemes(role types.Role) []handler.OpenAPISecurityScheme {
 	return []handler.OpenAPISecurityScheme{
 		{Name: ctxtypes.AuthTypeAPIKey.StringValue(), Scopes: []string{role.String()}},

pkg/flagger/configflagger/configflagger.go

@@ -3,6 +3,7 @@ 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"
@@ -32,6 +33,10 @@ 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
 		}
 
@@ -46,6 +51,10 @@ 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
 		}
 
@@ -60,6 +69,10 @@ 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
 		}
 
@@ -74,6 +87,10 @@ 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
 		}
 
@@ -88,6 +105,10 @@ 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,6 +5,7 @@ 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 {
@@ -25,6 +26,14 @@ 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/logspipeline/impllogspipeline/handler.go

@@ -0,0 +1,91 @@
+package impllogspipeline
+
+import (
+	"net/http"
+	"strconv"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/modules/logspipeline"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/gorilla/mux"
+)
+
+type handler struct {
+	module logspipeline.Module
+}
+
+func NewHandler(module logspipeline.Module) logspipeline.Handler {
+	return &handler{module: module}
+}
+
+func (h *handler) ListPipelines(w http.ResponseWriter, r *http.Request) {
+	claims, err := authtypes.ClaimsFromContext(r.Context())
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	orgID, errv2 := valuer.NewUUID(claims.OrgID)
+	if errv2 != nil {
+		render.Error(w, errv2)
+		return
+	}
+
+	version, err := ParseAgentConfigVersion(r)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	if version != -1 {
+		pipelines, err := h.module.ListPipelinesByVersion(r.Context(), orgID, version)
+		if err != nil {
+			render.Error(w, err)
+			return
+		}
+		render.Success(w, http.StatusOK, pipelines)
+		return
+	}
+
+	pipelines, err := h.module.ListPipelines(r.Context(), orgID)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	render.Success(w, http.StatusOK, pipelines)
+}
+
+func (h *handler) GetPipeline(w http.ResponseWriter, r *http.Request) {
+}
+
+func (h *handler) CreatePipeline(w http.ResponseWriter, r *http.Request) {
+}
+
+func (h *handler) UpdatePipeline(w http.ResponseWriter, r *http.Request) {
+}
+
+func (h *handler) DeletePipeline(w http.ResponseWriter, r *http.Request) {
+}
+
+func ParseAgentConfigVersion(r *http.Request) (int, error) {
+	versionString := mux.Vars(r)["version"]
+
+	if versionString == "latest" {
+		return -1, nil
+	}
+
+	version64, err := strconv.ParseInt(versionString, 0, 8)
+
+	if err != nil {
+		return 0, errors.WrapInvalidInputf(err, errors.CodeInvalidInput, "invalid version number")
+	}
+
+	if version64 <= 0 {
+		return 0, errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid version number")
+	}
+
+	return int(version64), nil
+}

pkg/modules/logspipeline/impllogspipeline/module.go

@@ -0,0 +1,230 @@
+package impllogspipeline
+
+import (
+	"context"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/modules/logspipeline"
+	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/opamptypes"
+	"github.com/SigNoz/signoz/pkg/types/pipelinetypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/uptrace/bun"
+	"go.uber.org/zap"
+)
+
+type module struct {
+	sqlstore sqlstore.SQLStore
+}
+
+func NewModule(sqlstore sqlstore.SQLStore) logspipeline.Module {
+	return &module{sqlstore: sqlstore}
+}
+
+func (m *module) ListPipelines(ctx context.Context, orgID valuer.UUID) ([]pipelinetypes.GettablePipeline, error) {
+	latestVersion := -1
+	// get latest agent config
+	lastestConfig, err := agentConf.GetLatestVersion(ctx, orgID, opamptypes.ElementTypeLogPipelines)
+	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+		return nil, err
+	}
+
+	if lastestConfig != nil {
+		latestVersion = lastestConfig.Version
+	}
+	return m.ListPipelinesByVersion(ctx, orgID, latestVersion)
+}
+
+func (m *module) ListPipelinesByVersion(ctx context.Context, orgID valuer.UUID, version int) ([]pipelinetypes.GettablePipeline, error) {
+	var stored []pipelinetypes.StoreablePipeline
+	err := m.sqlstore.BunDB().NewSelect().
+		Model(&stored).
+		Join("JOIN agent_config_element e ON p.id = e.element_id").
+		Join("JOIN agent_config_version v ON v.id = e.version_id").
+		Where("e.element_type = ?", opamptypes.ElementTypeLogPipelines.StringValue()).
+		Where("v.version = ?", version).
+		Where("v.org_id = ?", orgID.StringValue()).
+		Order("p.order_id ASC").
+		Scan(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	pipelines := make([]pipelinetypes.GettablePipeline, len(stored))
+	if len(stored) == 0 {
+		return pipelines, nil
+	}
+
+	for i := range stored {
+		pipelines[i].StoreablePipeline = stored[i]
+		if err := pipelines[i].ParseRawConfig(); err != nil {
+			return nil, err
+		}
+		if err := pipelines[i].ParseFilter(); err != nil {
+			return nil, err
+		}
+	}
+
+	return pipelines, nil
+}
+
+func (m *module) GetPipeline(ctx context.Context, orgID valuer.UUID, id string) (*pipelinetypes.GettablePipeline, error) {
+	return nil, nil
+}
+
+func (m *module) CreatePipeline(ctx context.Context, orgID valuer.UUID, claims *authtypes.Claims, pipeline *pipelinetypes.PostablePipeline) (*pipelinetypes.GettablePipeline, error) {
+	storeable, err := pipeline.ToStoreablePipeline()
+	if err != nil {
+		return nil, err
+	}
+
+	// regenerate the id and set other fields
+	storeable.Identifiable.ID = valuer.GenerateUUID()
+	storeable.OrgID = orgID.String()
+	storeable.TimeAuditable = types.TimeAuditable{
+		CreatedAt: time.Now(),
+	}
+	storeable.UserAuditable = types.UserAuditable{
+		CreatedBy: claims.Email,
+	}
+
+	_, err = m.sqlstore.BunDB().NewInsert().
+		Model(&storeable).
+		Exec(ctx)
+	if err != nil {
+		zap.L().Error("error in inserting pipeline data", zap.Error(err))
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to insert pipeline")
+	}
+
+	return &pipelinetypes.GettablePipeline{
+		StoreablePipeline: *storeable,
+		Filter:            pipeline.Filter,
+		Config:            pipeline.Config,
+	}, nil
+}
+
+func (m *module) UpdatePipeline(ctx context.Context, orgID valuer.UUID, claims *authtypes.Claims, pipeline *pipelinetypes.PostablePipeline) (*pipelinetypes.GettablePipeline, error) {
+	if err := pipeline.IsValid(); err != nil {
+		return nil, err
+	}
+
+	storeable, err := pipeline.ToStoreablePipeline()
+	if err != nil {
+		return nil, err
+	}
+
+	storeable.OrgID = orgID.String()
+	storeable.TimeAuditable = types.TimeAuditable{
+		UpdatedAt: time.Now(),
+	}
+	storeable.UserAuditable = types.UserAuditable{
+		UpdatedBy: claims.Email,
+	}
+
+	// get id from storeable pipeline
+	id := storeable.ID.StringValue()
+
+	// depending on the order_id update the rest of the table
+	// example 1: total available pipelines are 6, and order_id 5 is moved to 2, then we need to update the rest of the table
+	// old: 1, 2, 3, 4, 5, 6
+	//         ^         |
+	//         |_________|
+	// So pipelines starting from 2nd position till 4th position shift to right (or increase their order_id) by 1 position
+	// example 2: total available pipelines are 6, and order_id 2 is moved to 4, then we need to update the rest of the table
+	// old: 1, 2, 3, 4, 5, 6
+	//         |     ^
+	//         |_____|
+	// So pipelines starting from 3rd position till 4th position shift to left (or decrease their order_id) by 1 position
+	if err := m.sqlstore.RunInTxCtx(ctx, nil, func(ctx context.Context) error {
+		db := m.sqlstore.BunDBCtx(ctx)
+
+		var existing pipelinetypes.StoreablePipeline
+		if err := db.NewSelect().
+			Model(&existing).
+			Where("id = ?", id).
+			Where("org_id = ?", orgID.StringValue()).
+			Scan(ctx); err != nil {
+			return m.sqlstore.WrapNotFoundErrf(
+				err,
+				errors.CodeNotFound,
+				"pipeline with id %s does not exist in org %s",
+				id,
+				orgID.StringValue(),
+			)
+		}
+
+		oldOrderID := existing.OrderID
+		newOrderID := storeable.OrderID
+
+		// Reorder other pipelines if the order has changed.
+		if newOrderID != oldOrderID {
+			if err := reorderPipelinesInTx(ctx, db, orgID.StringValue(), oldOrderID, newOrderID); err != nil {
+				return err
+			}
+		}
+
+		// Preserve primary key and immutable fields.
+		storeable.ID = existing.ID
+
+		// Persist the updated pipeline (including its new order).
+		if _, err := db.NewUpdate().
+			Model(storeable).
+			Where("id = ?", id).
+			Where("org_id = ?", orgID.StringValue()).
+			Exec(ctx); err != nil {
+			return err
+		}
+
+		return nil
+	}); err != nil {
+		return nil, err
+	}
+
+	return &pipelinetypes.GettablePipeline{
+		StoreablePipeline: *storeable,
+		Filter:            pipeline.Filter,
+		Config:            pipeline.Config,
+	}, nil
+}
+
+// reorderPipelinesInTx updates order_id of other pipelines in a transaction-aware way.
+// It assumes that all pipelines for a given org have consecutive order_id values starting from 1.
+// The logic is:
+//   - When moving a pipeline from a higher position to a lower position (e.g., 5 -> 2),
+//     all pipelines in [newOrderID, oldOrderID) are shifted right by +1.
+//   - When moving from a lower position to a higher position (e.g., 2 -> 4),
+//     all pipelines in (oldOrderID, newOrderID] are shifted left by -1.
+func reorderPipelinesInTx(ctx context.Context, tx bun.IDB, orgID string, oldOrderID, newOrderID int) error {
+	switch {
+	case newOrderID < oldOrderID:
+		// Move up: shift affected pipelines down (order_id + 1).
+		_, err := tx.NewUpdate().
+			Model((*pipelinetypes.StoreablePipeline)(nil)).
+			Set("order_id = order_id + 1").
+			Where("org_id = ?", orgID).
+			Where("order_id >= ?", newOrderID).
+			Where("order_id < ?", oldOrderID).
+			Exec(ctx)
+		return err
+	case newOrderID > oldOrderID:
+		// Move down: shift affected pipelines up (order_id - 1).
+		_, err := tx.NewUpdate().
+			Model((*pipelinetypes.StoreablePipeline)(nil)).
+			Set("order_id = order_id - 1").
+			Where("org_id = ?", orgID).
+			Where("order_id > ?", oldOrderID).
+			Where("order_id <= ?", newOrderID).
+			Exec(ctx)
+		return err
+	default:
+		return nil
+	}
+}
+
+func (m *module) DeletePipeline(ctx context.Context, orgID valuer.UUID, id string) error {
+	return nil
+}

pkg/modules/logspipeline/logspipeline.go

@@ -0,0 +1,27 @@
+package logspipeline
+
+import (
+	"context"
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/pipelinetypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type Module interface {
+	ListPipelines(ctx context.Context, orgID valuer.UUID) ([]pipelinetypes.GettablePipeline, error)
+	ListPipelinesByVersion(ctx context.Context, orgID valuer.UUID, version int) ([]pipelinetypes.GettablePipeline, error)
+	GetPipeline(ctx context.Context, orgID valuer.UUID, id string) (*pipelinetypes.GettablePipeline, error)
+	CreatePipeline(ctx context.Context, orgID valuer.UUID, claims *authtypes.Claims, pipeline *pipelinetypes.PostablePipeline) (*pipelinetypes.GettablePipeline, error)
+	UpdatePipeline(ctx context.Context, orgID valuer.UUID, claims *authtypes.Claims, pipeline *pipelinetypes.PostablePipeline) (*pipelinetypes.GettablePipeline, error)
+	DeletePipeline(ctx context.Context, orgID valuer.UUID, id string) error
+}
+
+type Handler interface {
+	ListPipelines(w http.ResponseWriter, r *http.Request)
+	GetPipeline(w http.ResponseWriter, r *http.Request)
+	CreatePipeline(w http.ResponseWriter, r *http.Request)
+	UpdatePipeline(w http.ResponseWriter, r *http.Request)
+	DeletePipeline(w http.ResponseWriter, r *http.Request)
+}

pkg/modules/user/impluser/getter.go

@@ -2,18 +2,22 @@ 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
+	store   types.UserStore
+	flagger flagger.Flagger
 }
 
-func NewGetter(store types.UserStore) user.Getter {
-	return &getter{store: store}
+func NewGetter(store types.UserStore, flagger flagger.Flagger) user.Getter {
+	return &getter{store: store, flagger: flagger}
 }
 
 func (module *getter) GetRootUserByOrgID(ctx context.Context, orgID valuer.UUID) (*types.User, error) {
@@ -26,6 +30,14 @@ 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/query-service/app/http_handler.go

@@ -9,6 +9,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/flagger"
+	"github.com/SigNoz/signoz/pkg/modules/logspipeline/impllogspipeline"
 	"github.com/SigNoz/signoz/pkg/modules/thirdpartyapi"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 
@@ -4048,26 +4049,6 @@ func (aH *APIHandler) logAggregate(w http.ResponseWriter, r *http.Request) {
 	aH.WriteJSON(w, r, model.GetLogsAggregatesResponse{})
 }
 
-func parseAgentConfigVersion(r *http.Request) (int, error) {
-	versionString := mux.Vars(r)["version"]
-
-	if versionString == "latest" {
-		return -1, nil
-	}
-
-	version64, err := strconv.ParseInt(versionString, 0, 8)
-
-	if err != nil {
-		return 0, errors.WrapInvalidInputf(err, errors.CodeInvalidInput, "invalid version number")
-	}
-
-	if version64 <= 0 {
-		return 0, errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid version number")
-	}
-
-	return int(version64), nil
-}
-
 func (aH *APIHandler) PreviewLogsPipelinesHandler(w http.ResponseWriter, r *http.Request) {
 	req := logparsingpipeline.PipelinesPreviewRequest{}
 
@@ -4098,7 +4079,7 @@ func (aH *APIHandler) ListLogsPipelinesHandler(w http.ResponseWriter, r *http.Re
 		return
 	}
 
-	version, err := parseAgentConfigVersion(r)
+	version, err := impllogspipeline.ParseAgentConfigVersion(r)
 	if err != nil {
 		render.Error(w, err)
 		return

pkg/signoz/handler_test.go

@@ -11,8 +11,11 @@ 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"
@@ -41,7 +44,13 @@ func TestNewHandlers(t *testing.T) {
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
+
+	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)
 
 	querierHandler := querier.NewHandler(providerSettings, nil, nil)
 	handlers := NewHandlers(modules, providerSettings, nil, querierHandler, nil, nil, nil, nil, nil, nil, nil)

pkg/signoz/module.go

@@ -13,6 +13,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/authdomain"
 	"github.com/SigNoz/signoz/pkg/modules/authdomain/implauthdomain"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
+	"github.com/SigNoz/signoz/pkg/modules/logspipeline"
+	"github.com/SigNoz/signoz/pkg/modules/logspipeline/impllogspipeline"
 	"github.com/SigNoz/signoz/pkg/modules/metricsexplorer"
 	"github.com/SigNoz/signoz/pkg/modules/metricsexplorer/implmetricsexplorer"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
@@ -66,6 +68,7 @@ type Modules struct {
 	SpanPercentile  spanpercentile.Module
 	MetricsExplorer metricsexplorer.Module
 	Promote         promote.Module
+	LogsPipeline    logspipeline.Module
 }
 
 func NewModules(
@@ -85,11 +88,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{
@@ -110,5 +113,6 @@ func NewModules(
 		Services:        implservices.NewModule(querier, telemetryStore),
 		MetricsExplorer: implmetricsexplorer.NewModule(telemetryStore, telemetryMetadataStore, cache, ruleStore, dashboard, providerSettings, config.MetricsExplorer),
 		Promote:         implpromote.NewModule(telemetryMetadataStore, telemetryStore),
+		LogsPipeline:    impllogspipeline.NewModule(sqlstore),
 	}
 }

pkg/signoz/module_test.go

@@ -11,8 +11,11 @@ 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"
@@ -40,7 +43,13 @@ func TestNewModules(t *testing.T) {
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
+
+	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)
 
 	reflectVal := reflect.ValueOf(modules)
 	for i := 0; i < reflectVal.NumField(); i++ {

pkg/signoz/openapi.go

@@ -18,6 +18,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/authdomain"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/fields"
+	"github.com/SigNoz/signoz/pkg/modules/logspipeline"
 	"github.com/SigNoz/signoz/pkg/modules/metricsexplorer"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/preference"
@@ -59,6 +60,7 @@ func NewOpenAPI(ctx context.Context, instrumentation instrumentation.Instrumenta
 		struct{ authz.Handler }{},
 		struct{ zeus.Handler }{},
 		struct{ querier.Handler }{},
+		struct{ logspipeline.Handler }{},
 	).New(ctx, instrumentation.ToProviderSettings(), apiserver.Config{})
 	if err != nil {
 		return nil, err

pkg/signoz/provider.go

@@ -23,6 +23,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/global/signozglobal"
 	"github.com/SigNoz/signoz/pkg/modules/authdomain/implauthdomain"
+	"github.com/SigNoz/signoz/pkg/modules/logspipeline/impllogspipeline"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
 	"github.com/SigNoz/signoz/pkg/modules/preference/implpreference"
@@ -254,6 +255,7 @@ func NewAPIServerProviderFactories(orgGetter organization.Getter, authz authz.Au
 			handlers.AuthzHandler,
 			handlers.ZeusHandler,
 			handlers.QuerierHandler,
+			impllogspipeline.NewHandler(modules.LogsPipeline),
 		),
 	)
 }

pkg/signoz/provider_test.go

@@ -1,11 +1,13 @@
 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"
@@ -75,7 +77,12 @@ func TestNewProviderFactories(t *testing.T) {
 	})
 
 	assert.NotPanics(t, func() {
-		userGetter := impluser.NewGetter(impluser.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual), instrumentationtest.New().ToProviderSettings()))
+		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)
 		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))
+	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings), flagger)
 
 	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)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard, userGetter)
 
 	userService := impluser.NewService(providerSettings, impluser.NewStore(sqlstore, providerSettings), modules.User, orgGetter, authz, config.User.Root)
 

pkg/types/pipelinetypes/pipeline.go

@@ -10,6 +10,7 @@ import (
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 	"github.com/SigNoz/signoz/pkg/query-service/queryBuilderToExpr"
 	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/uptrace/bun"
 )
 
@@ -266,6 +267,37 @@ func (p *PostablePipeline) IsValid() error {
 	return nil
 }
 
+func (p *PostablePipeline) ToStoreablePipeline() (*StoreablePipeline, error) {
+	rawConfig, err := json.Marshal(p.Config)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to unmarshal postable pipeline config")
+	}
+
+	filter, err := json.Marshal(p.Filter)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to marshal postable pipeline filter")
+	}
+	identifier := valuer.GenerateUUID()
+	if p.ID != "" {
+		identifier, err = valuer.NewUUID(p.ID)
+		if err != nil {
+			return nil, errors.WithAdditionalf(err, "failed to parse postable pipeline id")
+		}
+	}
+	return &StoreablePipeline{
+		Identifiable: types.Identifiable{
+			ID: identifier,
+		},
+		OrderID:      p.OrderID,
+		Enabled:      p.Enabled,
+		Name:         p.Name,
+		Alias:        p.Alias,
+		Description:  p.Description,
+		FilterString: string(filter),
+		ConfigJSON:   string(rawConfig),
+	}, nil
+}
+
 func isValidOperator(op PipelineOperator) error {
 	if op.ID == "" {
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "PipelineOperator.ID is required")