chore: authz helpers

.github/workflows/generate-permissions-type.yml

@@ -0,0 +1,58 @@
+name: Check Permissions Type Generation
+
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "pkg/authz/**"
+      - "pkg/types/authtypes/**"
+      - "pkg/types/roletypes/**"
+      - "cmd/**/Dockerfile*"
+      - "frontend/src/hooks/useAuthZ/**"
+  workflow_dispatch:
+
+jobs:
+  check-permissions-type-generation:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: "22"
+
+      - name: Install frontend dependencies
+        working-directory: ./frontend
+        run: |
+          yarn install
+
+      - name: Install uv
+        uses: astral-sh/setup-uv@v5
+
+      - name: Install Python dependencies
+        working-directory: ./tests/integration
+        run: |
+          uv sync
+
+      - name: Start test environment
+        run: |
+          make py-test-setup
+
+      - name: Generate permissions.type.ts
+        run: |
+          node frontend/scripts/generate-permissions-type.js
+
+      - name: Teardown test environment
+        if: always()
+        run: |
+          make py-test-teardown
+
+      - name: Check for changes
+        run: |
+          if ! git diff --exit-code frontend/src/hooks/useAuthZ/permissions.type.ts; then
+            echo "::error::frontend/src/hooks/useAuthZ/permissions.type.ts is out of date. Please run the generator locally and commit the changes: npm run generate:permissions-type (from the frontend directory)"
+            exit 1
+          fi

conf/example.yaml

@@ -320,4 +320,3 @@ user:
     # The name of the organization to create or look up for the root user.
     org:
       name: default
-      id: 00000000-0000-0000-0000-000000000000

frontend/.eslintrc.js

@@ -2,7 +2,11 @@
  * ESLint Configuration for SigNoz Frontend
  */
 module.exports = {
-	ignorePatterns: ['src/parser/*.ts', 'scripts/update-registry.js'],
+	ignorePatterns: [
+		'src/parser/*.ts',
+		'scripts/update-registry.js',
+		'scripts/generate-permissions-type.js',
+	],
 	env: {
 		browser: true,
 		es2021: true,

frontend/package.json

@@ -19,7 +19,8 @@
 		"commitlint": "commitlint --edit $1",
 		"test": "jest",
 		"test:changedsince": "jest --changedSince=main --coverage --silent",
-		"generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
+		"generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
+		"generate:permissions-type": "node scripts/generate-permissions-type.js"
 	},
 	"engines": {
 		"node": ">=16.15.0"

frontend/scripts/generate-permissions-type.js

@@ -0,0 +1,199 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+const axios = require('axios');
+
+const PERMISSIONS_TYPE_FILE = path.join(
+	__dirname,
+	'../src/hooks/useAuthZ/permissions.type.ts',
+);
+
+const SIGNOZ_INTEGRATION_IMAGE = 'signoz:integration';
+const LOCAL_BACKEND_URL = 'http://localhost:8080';
+
+function log(message) {
+	console.log(`[generate-permissions-type] ${message}`);
+}
+
+function getBackendUrlFromDocker() {
+	try {
+		const output = execSync(
+			`docker ps --filter "ancestor=${SIGNOZ_INTEGRATION_IMAGE}" --format "{{.Ports}}"`,
+			{ encoding: 'utf8', stdio: ['pipe', 'pipe', 'pipe'] },
+		).trim();
+
+		if (!output) {
+			return null;
+		}
+
+		const portMatch = output.match(/0\.0\.0\.0:(\d+)->8080\/tcp/);
+		if (portMatch) {
+			return `http://localhost:${portMatch[1]}`;
+		}
+
+		const ipv6Match = output.match(/:::(\d+)->8080\/tcp/);
+		if (ipv6Match) {
+			return `http://localhost:${ipv6Match[1]}`;
+		}
+	} catch (err) {
+		log(`Warning: Could not get port from docker: ${err.message}`);
+	}
+	return null;
+}
+
+async function checkBackendHealth(url, maxAttempts = 3, delayMs = 1000) {
+	for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+		try {
+			await axios.get(`${url}/api/v1/health`, {
+				timeout: 5000,
+				validateStatus: (status) => status === 200,
+			});
+			return true;
+		} catch (err) {
+			if (attempt < maxAttempts) {
+				await new Promise((r) => setTimeout(r, delayMs));
+			}
+		}
+	}
+	return false;
+}
+
+async function discoverBackendUrl() {
+	const dockerUrl = getBackendUrlFromDocker();
+	if (dockerUrl) {
+		log(`Found ${SIGNOZ_INTEGRATION_IMAGE} container, trying ${dockerUrl}...`);
+		if (await checkBackendHealth(dockerUrl)) {
+			log(`Backend found at ${dockerUrl} (from py-test-setup)`);
+			return dockerUrl;
+		}
+		log(`Backend at ${dockerUrl} is not responding`);
+	}
+
+	log(`Trying local backend at ${LOCAL_BACKEND_URL}...`);
+	if (await checkBackendHealth(LOCAL_BACKEND_URL)) {
+		log(`Backend found at ${LOCAL_BACKEND_URL}`);
+		return LOCAL_BACKEND_URL;
+	}
+
+	return null;
+}
+
+async function fetchResources(backendUrl) {
+	log('Fetching resources from API...');
+	const resourcesUrl = `${backendUrl}/api/v1/authz/resources`;
+
+	const { data: response } = await axios.get(resourcesUrl);
+
+	return response;
+}
+
+function transformResponse(apiResponse) {
+	if (!apiResponse.data) {
+		throw new Error('Invalid API response: missing data field');
+	}
+
+	const { resources, relations } = apiResponse.data;
+
+	return {
+		status: apiResponse.status || 'success',
+		data: {
+			resources: resources,
+			relations: relations,
+		},
+	};
+}
+
+function generateTypeScriptFile(data) {
+	const resourcesStr = data.data.resources
+		.map(
+			(r) =>
+				`\t\t\t{\n\t\t\t\tname: '${r.name}',\n\t\t\t\ttype: '${r.type}',\n\t\t\t}`,
+		)
+		.join(',\n');
+
+	const relationsStr = Object.entries(data.data.relations)
+		.map(
+			([type, relations]) =>
+				`\t\t\t${type}: [${relations.map((r) => `'${r}'`).join(', ')}]`,
+		)
+		.join(',\n');
+
+	return `// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY scripts/generate-permissions-type
+export default {
+\tstatus: '${data.status}',
+\tdata: {
+\t\tresources: [
+${resourcesStr}
+\t\t],
+\t\trelations: {
+${relationsStr}
+\t\t},
+\t},
+} as const;
+`;
+}
+
+async function main() {
+	try {
+		log('Starting permissions type generation...');
+
+		const backendUrl = await discoverBackendUrl();
+
+		if (!backendUrl) {
+			console.error('\n' + '='.repeat(80));
+			console.error('ERROR: No running SigNoz backend found!');
+			console.error('='.repeat(80));
+			console.error(
+				'\nThe permissions type generator requires a running SigNoz backend.',
+			);
+			console.error('\nFor local development, start the backend with:');
+			console.error('  make go-run-enterprise');
+			console.error(
+				'\nFor CI or integration testing, start the test environment with:',
+			);
+			console.error('  make py-test-setup');
+			console.error(
+				'\nIf running in CI and seeing this error, check that the py-test-setup',
+			);
+			console.error('step completed successfully before this step runs.');
+			console.error('='.repeat(80) + '\n');
+			process.exit(1);
+		}
+
+		log('Fetching resources...');
+		const apiResponse = await fetchResources(backendUrl);
+
+		log('Transforming response...');
+		const transformed = transformResponse(apiResponse);
+
+		log('Generating TypeScript file...');
+		const content = generateTypeScriptFile(transformed);
+
+		log(`Writing to ${PERMISSIONS_TYPE_FILE}...`);
+		fs.writeFileSync(PERMISSIONS_TYPE_FILE, content, 'utf8');
+
+		const rootDir = path.join(__dirname, '../..');
+		const relativePath = path.relative(
+			path.join(rootDir, 'frontend'),
+			PERMISSIONS_TYPE_FILE,
+		);
+		log('Linting generated file...');
+		execSync(`cd frontend && yarn eslint --fix ${relativePath}`, {
+			cwd: rootDir,
+			stdio: 'inherit',
+		});
+
+		log('Successfully generated permissions.type.ts');
+	} catch (error) {
+		log(`Error: ${error.message}`);
+		process.exit(1);
+	}
+}
+
+if (require.main === module) {
+	main();
+}
+
+module.exports = { main };

frontend/src/AppRoutes/routes.ts

@@ -1,6 +1,7 @@
 import { RouteProps } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 
+import { createGuardedRoute } from '../components/createGuardedRoute/createGuardedRoute';
 import {
 	AlertHistory,
 	AlertOverview,
@@ -84,7 +85,11 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.HOME,
 		exact: true,
-		component: Home,
+		component: createGuardedRoute(
+			Home,
+			'delete',
+			'dashboard:e6dbc08b-976d-4c41-8572-93c990c3b297',
+		),
 		isPrivate: true,
 		key: 'HOME',
 	},

frontend/src/api/metricsExplorer/v2/getMetricMetadata.ts

@@ -0,0 +1,26 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
+
+export const getMetricMetadata = async (
+	metricName: string,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<MetricMetadataResponse> | ErrorResponseV2> => {
+	try {
+		const encodedMetricName = encodeURIComponent(metricName);
+		const response = await axios.get(`/metrics/${encodedMetricName}/metadata`, {
+			signal,
+			headers,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

frontend/src/components/GuardAuthZ/GuardAuthZ.test.tsx

@@ -0,0 +1,321 @@
+import { ReactElement } from 'react-markdown/lib/react-markdown';
+import {
+	AuthtypesGettableTransactionDTO,
+	AuthtypesTransactionDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { ENVIRONMENT } from 'constants/env';
+import { BrandedPermission } from 'hooks/useAuthZ/types';
+import { buildPermission } from 'hooks/useAuthZ/utils';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, waitFor } from 'tests/test-utils';
+
+import { GuardAuthZ } from './GuardAuthZ';
+
+const BASE_URL = ENVIRONMENT.baseURL || '';
+const AUTHZ_CHECK_URL = `${BASE_URL}/api/v1/authz/check`;
+
+function authzMockResponse(
+	payload: AuthtypesTransactionDTO[],
+	authorizedByIndex: boolean[],
+): { data: AuthtypesGettableTransactionDTO[]; status: string } {
+	return {
+		data: payload.map((txn, i) => ({
+			relation: txn.relation,
+			object: txn.object,
+			authorized: authorizedByIndex[i] ?? false,
+		})),
+		status: 'success',
+	};
+}
+
+describe('GuardAuthZ', () => {
+	const TestChild = (): ReactElement => <div>Protected Content</div>;
+	const LoadingFallback = (): ReactElement => <div>Loading...</div>;
+	const ErrorFallback = (error: Error): ReactElement => (
+		<div>Error occurred: {error.message}</div>
+	);
+	const NoPermissionFallback = (_response: {
+		requiredPermissionName: BrandedPermission;
+	}): ReactElement => <div>Access denied</div>;
+	const NoPermissionFallbackWithSuggestions = (response: {
+		requiredPermissionName: BrandedPermission;
+	}): ReactElement => (
+		<div>
+			Access denied. Required permission: {response.requiredPermissionName}
+		</div>
+	);
+
+	it('should render children when permission is granted', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+			}),
+		);
+
+		render(
+			<GuardAuthZ relation="read" object="dashboard:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+	});
+
+	it('should render fallbackOnLoading when loading', () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
+				return res(
+					ctx.delay('infinite'),
+					ctx.status(200),
+					ctx.json({ data: [], status: 'success' }),
+				);
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="read"
+				object="dashboard:*"
+				fallbackOnLoading={<LoadingFallback />}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		expect(screen.getByText('Loading...')).toBeInTheDocument();
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render null when loading and no fallbackOnLoading provided', () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
+				return res(
+					ctx.delay('infinite'),
+					ctx.status(200),
+					ctx.json({ data: [], status: 'success' }),
+				);
+			}),
+		);
+
+		const { container } = render(
+			<GuardAuthZ relation="read" object="dashboard:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		expect(container.firstChild).toBeNull();
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render fallbackOnError when API error occurs', async () => {
+		const errorMessage = 'Internal Server Error';
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(500), ctx.json({ error: errorMessage }));
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="read"
+				object="dashboard:*"
+				fallbackOnError={ErrorFallback}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText(/Error occurred:/)).toBeInTheDocument();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should pass error object to fallbackOnError function', async () => {
+		const errorMessage = 'Network request failed';
+		let receivedError: Error | null = null;
+
+		const errorFallbackWithCapture = (error: Error): ReactElement => {
+			receivedError = error;
+			return <div>Captured error: {error.message}</div>;
+		};
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(500), ctx.json({ error: errorMessage }));
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="read"
+				object="dashboard:*"
+				fallbackOnError={errorFallbackWithCapture}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(receivedError).not.toBeNull();
+		});
+
+		expect(receivedError).toBeInstanceOf(Error);
+		expect(screen.getByText(/Captured error:/)).toBeInTheDocument();
+	});
+
+	it('should render null when error occurs and no fallbackOnError provided', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
+			}),
+		);
+
+		const { container } = render(
+			<GuardAuthZ relation="read" object="dashboard:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(container.firstChild).toBeNull();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render fallbackOnNoPermissions when permission is denied', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="update"
+				object="dashboard:123"
+				fallbackOnNoPermissions={NoPermissionFallback}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Access denied')).toBeInTheDocument();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render null when permission is denied and no fallbackOnNoPermissions provided', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
+			}),
+		);
+
+		const { container } = render(
+			<GuardAuthZ relation="update" object="dashboard:123">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(container.firstChild).toBeNull();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render null when permissions object is null', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(200), ctx.json({ data: [], status: 'success' }));
+			}),
+		);
+
+		const { container } = render(
+			<GuardAuthZ relation="read" object="dashboard:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(container.firstChild).toBeNull();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should pass requiredPermissionName to fallbackOnNoPermissions', async () => {
+		const permission = buildPermission('update', 'dashboard:123');
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="update"
+				object="dashboard:123"
+				fallbackOnNoPermissions={NoPermissionFallbackWithSuggestions}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByText(/Access denied. Required permission:/),
+			).toBeInTheDocument();
+		});
+
+		expect(
+			screen.getAllByText(
+				new RegExp(permission.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')),
+			).length,
+		).toBeGreaterThan(0);
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should handle different relation and object combinations', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+			}),
+		);
+
+		const { rerender } = render(
+			<GuardAuthZ relation="read" object="dashboard:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+
+		rerender(
+			<GuardAuthZ relation="delete" object="dashboard:456">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/GuardAuthZ/GuardAuthZ.tsx

@@ -0,0 +1,50 @@
+import { ReactElement } from 'react';
+import {
+	AuthZObject,
+	AuthZRelation,
+	BrandedPermission,
+} from 'hooks/useAuthZ/types';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { buildPermission } from 'hooks/useAuthZ/utils';
+
+export type GuardAuthZProps<R extends AuthZRelation> = {
+	children: ReactElement;
+	relation: R;
+	object: AuthZObject<R>;
+	fallbackOnLoading?: JSX.Element;
+	fallbackOnError?: (error: Error) => JSX.Element;
+	fallbackOnNoPermissions?: (response: {
+		requiredPermissionName: BrandedPermission;
+	}) => JSX.Element;
+};
+
+export function GuardAuthZ<R extends AuthZRelation>({
+	children,
+	relation,
+	object,
+	fallbackOnLoading,
+	fallbackOnError,
+	fallbackOnNoPermissions,
+}: GuardAuthZProps<R>): JSX.Element | null {
+	const permission = buildPermission<R>(relation, object);
+
+	const { permissions, isLoading, error } = useAuthZ([permission]);
+
+	if (isLoading) {
+		return fallbackOnLoading ?? null;
+	}
+
+	if (error) {
+		return fallbackOnError?.(error) ?? null;
+	}
+
+	if (!permissions?.[permission]?.isGranted) {
+		return (
+			fallbackOnNoPermissions?.({
+				requiredPermissionName: permission,
+			}) ?? null
+		);
+	}
+
+	return children;
+}

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

@@ -11,6 +11,7 @@ import {
 	startCompletion,
 } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
+import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
@@ -563,7 +564,15 @@ function QuerySearch({
 		const lastPos = lastPosRef.current;
 
 		if (newPos.line !== lastPos.line || newPos.ch !== lastPos.ch) {
-			setCursorPos(newPos);
+			setCursorPos((lastPos) => {
+				if (newPos.ch !== lastPos.ch && newPos.ch === 0) {
+					Sentry.captureEvent({
+						message: `Cursor jumped to start of line from ${lastPos.ch} to ${newPos.ch}`,
+						level: 'warning',
+					});
+				}
+				return newPos;
+			});
 			lastPosRef.current = newPos;
 
 			if (doc) {

frontend/src/components/ValueGraph/index.tsx

@@ -40,7 +40,6 @@ function ValueGraph({
 	value,
 	rawValue,
 	thresholds,
-	yAxisUnit,
 }: ValueGraphProps): JSX.Element {
 	const { t } = useTranslation(['valueGraph']);
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -88,7 +87,7 @@ function ValueGraph({
 	const {
 		threshold,
 		isConflictingThresholds,
-	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue, yAxisUnit);
+	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue);
 
 	return (
 		<div
@@ -156,7 +155,6 @@ interface ValueGraphProps {
 	value: string;
 	rawValue: number;
 	thresholds: ThresholdProps[];
-	yAxisUnit?: string;
 }
 
 export default ValueGraph;

frontend/src/components/ValueGraph/utils.ts

@@ -1,10 +1,9 @@
-import { evaluateThresholdWithConvertedValue } from 'container/GridTableComponent/utils';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
-function doesValueSatisfyThreshold(
+function compareThreshold(
 	rawValue: number,
 	threshold: ThresholdProps,
-	yAxisUnit?: string,
 ): boolean {
 	if (
 		threshold.thresholdOperator === undefined ||
@@ -12,14 +11,31 @@ function doesValueSatisfyThreshold(
 	) {
 		return false;
 	}
+	switch (threshold.thresholdOperator) {
+		case '>':
+			return rawValue > threshold.thresholdValue;
+		case '>=':
+			return rawValue >= threshold.thresholdValue;
+		case '<':
+			return rawValue < threshold.thresholdValue;
+		case '<=':
+			return rawValue <= threshold.thresholdValue;
+		case '=':
+			return rawValue === threshold.thresholdValue;
+		default:
+			return false;
+	}
+}
 
-	return evaluateThresholdWithConvertedValue(
-		rawValue,
-		threshold.thresholdValue,
-		threshold.thresholdOperator,
-		threshold.thresholdUnit,
-		yAxisUnit,
-	);
+function extractNumbersFromString(inputString: string): number[] {
+	const regex = /[+-]?\d+(\.\d+)?/g;
+	const matches = inputString.match(regex);
+
+	if (matches) {
+		return matches.map(Number);
+	}
+
+	return [];
 }
 
 function getHighestPrecedenceThreshold(
@@ -44,32 +60,21 @@ function getHighestPrecedenceThreshold(
 	return highestPrecedenceThreshold;
 }
 
-function extractNumbersFromString(inputString: string): number[] {
-	const regex = /[+-]?\d+(\.\d+)?/g;
-	const matches = inputString.match(regex);
-
-	if (matches) {
-		return matches.map(Number);
-	}
-
-	return [];
-}
-
 export function getBackgroundColorAndThresholdCheck(
 	thresholds: ThresholdProps[],
 	rawValue: number,
-	yAxisUnit?: string,
 ): {
 	threshold: ThresholdProps;
 	isConflictingThresholds: boolean;
 } {
-	const matchingThresholds = thresholds.filter((threshold) => {
-		const numbers = extractNumbersFromString(rawValue.toString());
-		if (numbers.length === 0) {
-			return false;
-		}
-		return doesValueSatisfyThreshold(numbers[0], threshold, yAxisUnit);
-	});
+	const matchingThresholds = thresholds.filter((threshold) =>
+		compareThreshold(
+			extractNumbersFromString(
+				getYAxisFormattedValue(rawValue.toString(), threshold.thresholdUnit || ''),
+			)[0],
+			threshold,
+		),
+	);
 
 	if (matchingThresholds.length === 0) {
 		return {

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -22,8 +22,6 @@ function YAxisUnitSelector({
 	'data-testid': dataTestId,
 	source,
 	initialValue,
-	categoriesOverride,
-	containerClassName,
 }: YAxisUnitSelectorProps): JSX.Element {
 	const universalUnit = mapMetricUnitToUniversalUnit(value);
 
@@ -68,14 +66,10 @@ function YAxisUnitSelector({
 		return aliases.some((alias) => alias.toLowerCase().includes(search));
 	};
 
-	const categoriesToRender = useMemo(() => {
-		return categoriesOverride || getYAxisCategories(source);
-	}, [categoriesOverride, source]);
+	const categories = getYAxisCategories(source);
 
 	return (
-		<div
-			className={classNames('y-axis-unit-selector-component', containerClassName)}
-		>
+		<div className="y-axis-unit-selector-component">
 			<Select
 				showSearch
 				value={universalUnit}
@@ -96,7 +90,7 @@ function YAxisUnitSelector({
 				data-testid={dataTestId}
 				allowClear
 			>
-				{categoriesToRender.map((category) => (
+				{categories.map((category) => (
 					<Select.OptGroup key={category.name} label={category.name}>
 						{category.units.map((unit) => (
 							<Select.Option key={unit.id} value={unit.id}>

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

@@ -1,7 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import { YAxisCategoryNames } from '../constants';
-import { UniversalYAxisUnit, YAxisSource } from '../types';
+import { YAxisSource } from '../types';
 import YAxisUnitSelector from '../YAxisUnitSelector';
 
 describe('YAxisUnitSelector', () => {
@@ -124,34 +123,4 @@ describe('YAxisUnitSelector', () => {
 		const warningIcon = screen.queryByLabelText('warning');
 		expect(warningIcon).not.toBeInTheDocument();
 	});
-
-	it('uses categories override to render custom units', () => {
-		const customCategories = [
-			{
-				name: YAxisCategoryNames.Data,
-				units: [
-					{
-						id: UniversalYAxisUnit.BYTES,
-						name: 'Custom Bytes (B)',
-					},
-				],
-			},
-		];
-
-		render(
-			<YAxisUnitSelector
-				value=""
-				onChange={mockOnChange}
-				source={YAxisSource.ALERTS}
-				categoriesOverride={customCategories}
-			/>,
-		);
-
-		const select = screen.getByRole('combobox');
-
-		fireEvent.mouseDown(select);
-
-		expect(screen.getByText('Custom Bytes (B)')).toBeInTheDocument();
-		expect(screen.queryByText('Bytes (B)')).not.toBeInTheDocument();
-	});
 });

frontend/src/components/YAxisUnitSelector/types.ts

@@ -9,8 +9,6 @@ export interface YAxisUnitSelectorProps {
 	'data-testid'?: string;
 	source: YAxisSource;
 	initialValue?: string;
-	categoriesOverride?: YAxisCategory[];
-	containerClassName?: string;
 }
 
 export enum UniversalYAxisUnit {

frontend/src/components/createGuardedRoute/createGuardedRoute.styles.scss

@@ -0,0 +1,41 @@
+.guard-authz-error-no-authz {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: 100%;
+	height: 100%;
+
+	padding: 24px;
+
+	.guard-authz-error-no-authz-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		gap: 8px;
+		max-width: 500px;
+	}
+
+	img {
+		width: 32px;
+		height: 32px;
+	}
+
+	h3 {
+		font-size: 18px;
+		color: var(--l1-foreground);
+		line-height: 18px;
+	}
+
+	p {
+		font-size: 14px;
+		color: var(--l3-foreground);
+		line-height: 18px;
+
+		span {
+			background-color: var(--l3-background);
+			white-space: nowrap;
+			padding: 0 2px;
+		}
+	}
+}

frontend/src/components/createGuardedRoute/createGuardedRoute.test.tsx

@@ -0,0 +1,472 @@
+import { ReactElement } from 'react';
+import type { RouteComponentProps } from 'react-router-dom';
+import {
+	AuthtypesGettableTransactionDTO,
+	AuthtypesTransactionDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, waitFor } from 'tests/test-utils';
+
+import { createGuardedRoute } from '.';
+
+const BASE_URL = ENVIRONMENT.baseURL || '';
+const AUTHZ_CHECK_URL = `${BASE_URL}/api/v1/authz/check`;
+
+function authzMockResponse(
+	payload: AuthtypesTransactionDTO[],
+	authorizedByIndex: boolean[],
+): { data: AuthtypesGettableTransactionDTO[]; status: string } {
+	return {
+		data: payload.map((txn, i) => ({
+			relation: txn.relation,
+			object: txn.object,
+			authorized: authorizedByIndex[i] ?? false,
+		})),
+		status: 'success',
+	};
+}
+
+describe('createGuardedRoute', () => {
+	const TestComponent = ({ testProp }: { testProp: string }): ReactElement => (
+		<div>Test Component: {testProp}</div>
+	);
+
+	it('should render component when permission is granted', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'dashboard:*',
+		);
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: ({} as unknown) as RouteComponentProps['location'],
+			history: ({} as unknown) as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should substitute route parameters in object string', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'dashboard:{id}',
+		);
+
+		const mockMatch = {
+			params: { id: '123' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/123',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: ({} as unknown) as RouteComponentProps['location'],
+			history: ({} as unknown) as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should handle multiple route parameters', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = (await req.json()) as AuthtypesTransactionDTO[];
+				const txn = payload[0];
+				const responseData: AuthtypesGettableTransactionDTO[] = [
+					{
+						relation: txn.relation,
+						object: {
+							resource: {
+								name: txn.object.resource.name,
+								type: txn.object.resource.type,
+							},
+							selector: '123:456',
+						},
+						authorized: true,
+					},
+				];
+				return res(
+					ctx.status(200),
+					ctx.json({ data: responseData, status: 'success' }),
+				);
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'update',
+			'dashboard:{id}:{version}',
+		);
+
+		const mockMatch = {
+			params: { id: '123', version: '456' },
+			isExact: true,
+			path: '/dashboard/:id/:version',
+			url: '/dashboard/123/456',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: ({} as unknown) as RouteComponentProps['location'],
+			history: ({} as unknown) as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should keep placeholder when route parameter is missing', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'dashboard:{id}',
+		);
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: ({} as unknown) as RouteComponentProps['location'],
+			history: ({} as unknown) as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should render loading fallback when loading', () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
+				return res(
+					ctx.delay('infinite'),
+					ctx.status(200),
+					ctx.json({ data: [], status: 'success' }),
+				);
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'dashboard:*',
+		);
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: ({} as unknown) as RouteComponentProps['location'],
+			history: ({} as unknown) as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		expect(screen.getByText('SigNoz')).toBeInTheDocument();
+		expect(
+			screen.queryByText('Test Component: test-value'),
+		).not.toBeInTheDocument();
+	});
+
+	it('should render error fallback when API error occurs', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'dashboard:*',
+		);
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: ({} as unknown) as RouteComponentProps['location'],
+			history: ({} as unknown) as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText(/Something went wrong/i)).toBeInTheDocument();
+		});
+
+		expect(
+			screen.queryByText('Test Component: test-value'),
+		).not.toBeInTheDocument();
+	});
+
+	it('should render no permissions fallback when permission is denied', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'update',
+			'dashboard:{id}',
+		);
+
+		const mockMatch = {
+			params: { id: '123' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/123',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: ({} as unknown) as RouteComponentProps['location'],
+			history: ({} as unknown) as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			const heading = document.querySelector('h3');
+			expect(heading).toBeInTheDocument();
+			expect(heading?.textContent).toMatch(/permission to view/i);
+		});
+
+		expect(screen.getByText('update')).toBeInTheDocument();
+		expect(screen.getByText('dashboard:123')).toBeInTheDocument();
+		expect(
+			screen.queryByText('Test Component: test-value'),
+		).not.toBeInTheDocument();
+	});
+
+	it('should pass all props to wrapped component', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+			}),
+		);
+
+		const ComponentWithMultipleProps = ({
+			prop1,
+			prop2,
+			prop3,
+		}: {
+			prop1: string;
+			prop2: number;
+			prop3: boolean;
+		}): ReactElement => (
+			<div>
+				{prop1} - {prop2} - {prop3.toString()}
+			</div>
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			ComponentWithMultipleProps,
+			'read',
+			'dashboard:*',
+		);
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			prop1: 'value1',
+			prop2: 42,
+			prop3: true,
+			match: mockMatch,
+			location: ({} as unknown) as RouteComponentProps['location'],
+			history: ({} as unknown) as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('value1 - 42 - true')).toBeInTheDocument();
+		});
+	});
+
+	it('should memoize resolved object based on route params', async () => {
+		let requestCount = 0;
+		const requestedObjects: string[] = [];
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				requestCount++;
+				const payload = (await req.json()) as AuthtypesTransactionDTO[];
+				const obj = payload[0]?.object;
+				const name = obj?.resource?.name;
+				const selector = obj?.selector ?? '*';
+				const objectStr =
+					obj?.resource?.type === 'metaresources' ? name : `${name}:${selector}`;
+				requestedObjects.push(objectStr ?? '');
+
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'dashboard:{id}',
+		);
+
+		const mockMatch1 = {
+			params: { id: '123' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/123',
+		};
+
+		const props1 = {
+			testProp: 'test-value-1',
+			match: mockMatch1,
+			location: ({} as unknown) as RouteComponentProps['location'],
+			history: ({} as unknown) as RouteComponentProps['history'],
+		};
+
+		const { unmount } = render(<GuardedComponent {...props1} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value-1')).toBeInTheDocument();
+		});
+
+		expect(requestCount).toBe(1);
+		expect(requestedObjects).toContain('dashboard:123');
+
+		unmount();
+
+		const mockMatch2 = {
+			params: { id: '456' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/456',
+		};
+
+		const props2 = {
+			testProp: 'test-value-2',
+			match: mockMatch2,
+			location: ({} as unknown) as RouteComponentProps['location'],
+			history: ({} as unknown) as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props2} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value-2')).toBeInTheDocument();
+		});
+
+		expect(requestCount).toBe(2);
+		expect(requestedObjects).toContain('dashboard:456');
+	});
+
+	it('should handle different relation types', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'delete',
+			'dashboard:{id}',
+		);
+
+		const mockMatch = {
+			params: { id: '789' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/789',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: ({} as unknown) as RouteComponentProps['location'],
+			history: ({} as unknown) as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/createGuardedRoute/createGuardedRoute.tsx

@@ -0,0 +1,73 @@
+import { ComponentType, ReactElement, useMemo } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import {
+	AuthZObject,
+	AuthZRelation,
+	BrandedPermission,
+} from 'hooks/useAuthZ/types';
+import { parsePermission } from 'hooks/useAuthZ/utils';
+
+import ErrorBoundaryFallback from '../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import AppLoading from '../AppLoading/AppLoading';
+import { GuardAuthZ } from '../GuardAuthZ/GuardAuthZ';
+
+import './createGuardedRoute.styles.scss';
+
+const onErrorFallback = (): JSX.Element => <ErrorBoundaryFallback />;
+
+function OnNoPermissionsFallback(response: {
+	requiredPermissionName: BrandedPermission;
+}): ReactElement {
+	const { relation, object } = parsePermission(response.requiredPermissionName);
+
+	return (
+		<div className="guard-authz-error-no-authz">
+			<div className="guard-authz-error-no-authz-content">
+				<img src="/Icons/no-data.svg" alt="No permission" />
+				<h3>Uh-oh! You don’t have permission to view this page.</h3>
+				<p>
+					You need the following permission to view this page:
+					<br />
+					Relation: <span>{relation}</span>
+					<br />
+					Object: <span>{object}</span>
+					<br />
+					Ask your SigNoz administrator to grant access.
+				</p>
+			</div>
+		</div>
+	);
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function createGuardedRoute<P extends object, R extends AuthZRelation>(
+	Component: ComponentType<P>,
+	relation: R,
+	object: AuthZObject<R>,
+): ComponentType<P & RouteComponentProps<Record<string, string>>> {
+	return function GuardedRouteComponent(
+		props: P & RouteComponentProps<Record<string, string>>,
+	): ReactElement {
+		const resolvedObject = useMemo(() => {
+			const paramPattern = /\{([^}]+)\}/g;
+			return object.replace(paramPattern, (match, paramName) => {
+				const paramValue = props.match?.params?.[paramName];
+				return paramValue !== undefined ? paramValue : match;
+			}) as AuthZObject<R>;
+		}, [props.match?.params]);
+
+		return (
+			<GuardAuthZ
+				relation={relation}
+				object={resolvedObject}
+				fallbackOnLoading={<AppLoading />}
+				fallbackOnError={onErrorFallback}
+				fallbackOnNoPermissions={(response): ReactElement => (
+					<OnNoPermissionsFallback {...response} />
+				)}
+			>
+				<Component {...props} />
+			</GuardAuthZ>
+		);
+	};
+}

frontend/src/container/GridTableComponent/utils.ts

@@ -49,7 +49,7 @@ function evaluateCondition(
  * @param columnUnit - The current unit of the value.
  * @returns A boolean indicating whether the value meets the threshold condition.
  */
-export function evaluateThresholdWithConvertedValue(
+function evaluateThresholdWithConvertedValue(
 	value: number,
 	thresholdValue: number,
 	thresholdOperator?: string,

frontend/src/container/GridValueComponent/index.tsx

@@ -99,7 +99,6 @@ function GridValueComponent({
 				<ValueGraph
 					thresholds={thresholds || []}
 					rawValue={value}
-					yAxisUnit={yAxisUnit}
 					value={
 						yAxisUnit
 							? getYAxisFormattedValue(

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

@@ -87,7 +87,7 @@ function Explorer(): JSX.Element {
 	const [yAxisUnit, setYAxisUnit] = useState<string | undefined>();
 
 	const unitsLength = useMemo(() => units.length, [units]);
-	const firstUnit = useMemo(() => units[0], [units]);
+	const firstUnit = useMemo(() => units?.[0], [units]);
 
 	useEffect(() => {
 		// Set the y axis unit to the first metric unit if
@@ -349,7 +349,7 @@ function Explorer(): JSX.Element {
 				isOneChartPerQuery={showOneChartPerQuery}
 				splitedQueries={splitedQueries}
 			/>
-			{isMetricDetailsOpen && selectedMetricName && (
+			{isMetricDetailsOpen && (
 				<MetricDetails
 					metricName={selectedMetricName}
 					isOpen={isMetricDetailsOpen}

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/Explorer/TimeSeries.tsx

@@ -1,13 +1,8 @@
 import { useMemo } from 'react';
-import { useQueries, useQueryClient } from 'react-query';
+import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
-import { toast } from '@signozhq/sonner';
-import { Button, Tooltip, Typography } from 'antd';
-import {
-	invalidateGetMetricMetadata,
-	useUpdateMetricMetadata,
-} from 'api/generated/services/metrics';
+import { Tooltip, Typography } from 'antd';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
@@ -28,10 +23,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { TimeSeriesProps } from './types';
-import {
-	buildUpdateMetricYAxisUnitPayload,
-	splitQueryIntoOneChartPerQuery,
-} from './utils';
+import { splitQueryIntoOneChartPerQuery } from './utils';
 
 function TimeSeries({
 	showOneChartPerQuery,
@@ -43,7 +35,6 @@ function TimeSeries({
 	yAxisUnit,
 	setYAxisUnit,
 	showYAxisUnitSelector,
-	metrics,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -51,7 +42,6 @@ function TimeSeries({
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
-	const queryClient = useQueryClient();
 
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
@@ -148,51 +138,54 @@ function TimeSeries({
 		setYAxisUnit(value);
 	};
 
+	// TODO: Enable once we have resolved all related metrics v2 api issues
 	// Show the save unit button if
 	// 1. There is only one metric
 	// 2. The metric has no saved unit
 	// 3. The user has selected a unit
-	const showSaveUnitButton = useMemo(
-		() =>
-			metricUnits.length === 1 &&
-			Boolean(metrics[0]) &&
-			!metricUnits[0] &&
-			yAxisUnit,
-		[metricUnits, metrics, yAxisUnit],
-	);
+	// const showSaveUnitButton = useMemo(
+	// 	() =>
+	// 		metricUnits.length === 1 &&
+	// 		Boolean(metrics?.[0]) &&
+	// 		!metricUnits[0] &&
+	// 		yAxisUnit,
+	// 	[metricUnits, metrics, yAxisUnit],
+	// );
 
-	const {
-		mutate: updateMetricMetadata,
-		isLoading: isUpdatingMetricMetadata,
-	} = useUpdateMetricMetadata();
+	// const {
+	// 	mutate: updateMetricMetadata,
+	// 	isLoading: isUpdatingMetricMetadata,
+	// } = useUpdateMetricMetadata();
 
-	const handleSaveUnit = (): void => {
-		if (metrics[0] && yAxisUnit) {
-			updateMetricMetadata(
-				{
-					pathParams: {
-						metricName: metricNames[0],
-					},
-					data: buildUpdateMetricYAxisUnitPayload(
-						metricNames[0],
-						metrics[0],
-						yAxisUnit,
-					),
-				},
-				{
-					onSuccess: () => {
-						toast.success('Unit saved successfully');
-						invalidateGetMetricMetadata(queryClient, {
-							metricName: metricNames[0],
-						});
-					},
-					onError: () => {
-						toast.error('Failed to save unit');
-					},
-				},
-			);
-		}
-	};
+	// const handleSaveUnit = (): void => {
+	// 	updateMetricMetadata(
+	// 		{
+	// 			metricName: metricNames[0],
+	// 			payload: {
+	// 				unit: yAxisUnit,
+	// 				description: metrics[0]?.description ?? '',
+	// 				metricType: metrics[0]?.type as MetricType,
+	// 				temporality: metrics[0]?.temporality,
+	// 			},
+	// 		},
+	// 		{
+	// 			onSuccess: () => {
+	// 				notifications.success({
+	// 					message: 'Unit saved successfully',
+	// 				});
+	// 				queryClient.invalidateQueries([
+	// 					REACT_QUERY_KEY.GET_METRIC_DETAILS,
+	// 					metricNames[0],
+	// 				]);
+	// 			},
+	// 			onError: () => {
+	// 				notifications.error({
+	// 					message: 'Failed to save unit',
+	// 				});
+	// 			},
+	// 		},
+	// 	);
+	// };
 
 	return (
 		<>
@@ -205,7 +198,8 @@ function TimeSeries({
 							source={YAxisSource.EXPLORER}
 							data-testid="y-axis-unit-selector"
 						/>
-						{showSaveUnitButton && (
+						{/* TODO: Enable once we have resolved all related metrics v2 api issues */}
+						{/* {showSaveUnitButton && (
 							<div className="save-unit-container">
 								<Typography.Text>
 									Save the selected unit for this metric?
@@ -219,7 +213,7 @@ function TimeSeries({
 									<Typography.Paragraph>Yes</Typography.Paragraph>
 								</Button>
 							</div>
-						)}
+						)} */}
 					</>
 				)}
 			</div>

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

@@ -3,10 +3,8 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { render, screen } from '@testing-library/react';
-import {
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import * as useOptionsMenuHooks from 'container/OptionsMenu';
 import * as useUpdateDashboardHooks from 'hooks/dashboard/useUpdateDashboard';
@@ -16,12 +14,12 @@ import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import * as timezoneHooks from 'providers/Timezone';
 import store from 'store';
 import { LicenseEvent } from 'types/api/licensesV3/getActive';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
 
 import Explorer from '../Explorer';
 import * as useGetMetricsHooks from '../utils';
-import { MOCK_METRIC_METADATA } from './testUtils';
 
 const mockSetSearchParams = jest.fn();
 const queryClient = new QueryClient();
@@ -137,6 +135,14 @@ jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
 
 const Y_AXIS_UNIT_SELECTOR_TEST_ID = 'y-axis-unit-selector';
 
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
+	description: 'metric1 description',
+	unit: 'metric1 unit',
+	temporality: Temporality.CUMULATIVE,
+	isMonotonic: true,
+};
+
 function renderExplorer(): void {
 	render(
 		<QueryClientProvider client={queryClient}>
@@ -184,7 +190,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -201,7 +207,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -214,7 +220,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 		});
 
 		renderExplorer();
@@ -231,7 +237,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -244,7 +250,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -263,10 +269,10 @@ describe('Explorer', () => {
 			isError: false,
 			metrics: [
 				{
-					type: MetrictypesTypeDTO.sum,
+					type: MetricType.SUM,
 					description: 'metric1 description',
 					unit: '',
-					temporality: MetrictypesTemporalityDTO.cumulative,
+					temporality: Temporality.CUMULATIVE,
 					isMonotonic: true,
 				},
 			],
@@ -283,7 +289,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 		});
 
 		renderExplorer();
@@ -318,7 +324,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();

frontend/src/container/MetricsExplorer/Explorer/__tests__/TimeSeries.test.tsx

@@ -1,19 +1,29 @@
+import { UseMutationResult } from 'react-query';
 import { render, RenderResult, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { UpdateMetricMetadataResponse } from 'api/metricsExplorer/updateMetricMetadata';
+import * as useUpdateMetricMetadataHooks from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { UseUpdateMetricMetadataProps } from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
 import TimeSeries from '../TimeSeries';
 import { TimeSeriesProps } from '../types';
-import { MOCK_METRIC_METADATA } from './testUtils';
 
-const mockUpdateMetricMetadata = jest.fn();
-const updateMetricMetadataSpy = jest.spyOn(
-	metricsExplorerHooks,
-	'useUpdateMetricMetadata',
-);
-type UseUpdateMetricMetadataReturnType = ReturnType<
-	typeof metricsExplorerHooks.useUpdateMetricMetadata
+type MockUpdateMetricMetadata = UseMutationResult<
+	SuccessResponse<UpdateMetricMetadataResponse> | ErrorResponse,
+	Error,
+	UseUpdateMetricMetadataProps
 >;
+const mockUpdateMetricMetadata = jest.fn();
+jest
+	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
+	.mockReturnValue(({
+		mutate: mockUpdateMetricMetadata,
+		isLoading: false,
+	} as Partial<MockUpdateMetricMetadata>) as MockUpdateMetricMetadata);
 
 jest.mock('container/TimeSeriesView/TimeSeriesView', () => ({
 	__esModule: true,
@@ -50,6 +60,14 @@ jest.mock('react-redux', () => ({
 	}),
 }));
 
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
+	description: 'metric1 description',
+	unit: 'metric1 unit',
+	temporality: Temporality.CUMULATIVE,
+	isMonotonic: true,
+};
+
 const mockSetWarning = jest.fn();
 const mockSetIsMetricDetailsOpen = jest.fn();
 const mockSetYAxisUnit = jest.fn();
@@ -78,13 +96,6 @@ function renderTimeSeries(
 }
 
 describe('TimeSeries', () => {
-	beforeEach(() => {
-		updateMetricMetadataSpy.mockReturnValue(({
-			mutate: mockUpdateMetricMetadata,
-			isLoading: false,
-		} as Partial<UseUpdateMetricMetadataReturnType>) as UseUpdateMetricMetadataReturnType);
-	});
-
 	it('should render a warning icon when a metric has no unit among multiple metrics', () => {
 		const user = userEvent.setup();
 		const { container } = renderTimeSeries({
@@ -107,7 +118,7 @@ describe('TimeSeries', () => {
 		const { container } = renderTimeSeries({
 			metricUnits: ['', 'count'],
 			metricNames: ['metric1', 'metric2'],
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 			yAxisUnit: 'seconds',
 		});
 
@@ -122,17 +133,18 @@ describe('TimeSeries', () => {
 		);
 	});
 
-	it('shows Save unit button when metric had no unit but one is selected', async () => {
+	// TODO: Unskip this test once the save unit button is implemented
+	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
+	it.skip('shows Save unit button when metric had no unit but one is selected', () => {
 		const { findByText, getByRole } = renderTimeSeries({
 			metricUnits: [undefined],
 			metricNames: ['metric1'],
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 			yAxisUnit: 'seconds',
-			showYAxisUnitSelector: true,
 		});
 
 		expect(
-			await findByText('Save the selected unit for this metric?'),
+			findByText('Save the selected unit for this metric?'),
 		).toBeInTheDocument();
 
 		const yesButton = getByRole('button', { name: 'Yes' });
@@ -140,25 +152,24 @@ describe('TimeSeries', () => {
 		expect(yesButton).toBeEnabled();
 	});
 
-	it('clicking on save unit button shoould upated metric metadata', async () => {
+	// TODO: Unskip this test once the save unit button is implemented
+	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
+	it.skip('clicking on save unit button shoould upated metric metadata', () => {
 		const user = userEvent.setup();
 		const { getByRole } = renderTimeSeries({
 			metricUnits: [''],
 			metricNames: ['metric1'],
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 			yAxisUnit: 'seconds',
-			showYAxisUnitSelector: true,
 		});
 
 		const yesButton = getByRole('button', { name: /Yes/i });
-		await user.click(yesButton);
+		user.click(yesButton);
 
 		expect(mockUpdateMetricMetadata).toHaveBeenCalledWith(
 			{
-				pathParams: {
-					metricName: 'metric1',
-				},
-				data: expect.objectContaining({ unit: 'seconds' }),
+				metricName: 'metric1',
+				payload: expect.objectContaining({ unit: 'seconds' }),
 			},
 			expect.objectContaining({
 				onSuccess: expect.any(Function),

frontend/src/container/MetricsExplorer/Explorer/__tests__/testUtils.ts

@@ -1,13 +0,0 @@
-import {
-	MetricsexplorertypesMetricMetadataDTO,
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-export const MOCK_METRIC_METADATA: MetricsexplorertypesMetricMetadataDTO = {
-	type: MetrictypesTypeDTO.sum,
-	description: 'metric1 description',
-	unit: 'metric1 unit',
-	temporality: MetrictypesTemporalityDTO.cumulative,
-	isMonotonic: true,
-};

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

@@ -1,8 +1,14 @@
 import { UseQueryResult } from 'react-query';
 import { renderHook } from '@testing-library/react';
-import { GetMetricMetadata200 } from 'api/generated/services/sigNoz.schemas';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import * as useGetMultipleMetricsHook from 'hooks/metricsExplorer/useGetMultipleMetrics';
+import { SuccessResponseV2 } from 'types/api';
+import {
+	MetricMetadata,
+	MetricMetadataResponse,
+} from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderFormula,
@@ -16,7 +22,6 @@ import {
 	splitQueryIntoOneChartPerQuery,
 	useGetMetrics,
 } from '../utils';
-import { MOCK_METRIC_METADATA } from './testUtils';
 
 const MOCK_QUERY_DATA_1: IBuilderQuery = {
 	...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
@@ -86,19 +91,32 @@ describe('splitQueryIntoOneChartPerQuery', () => {
 	});
 });
 
+const MOCK_METRIC_METADATA: MetricMetadata = {
+	description: 'Metric 1 description',
+	unit: 'unit1',
+	type: MetricType.GAUGE,
+	temporality: Temporality.DELTA,
+	isMonotonic: true,
+};
+
 describe('useGetMetrics', () => {
 	beforeEach(() => {
 		jest
 			.spyOn(useGetMultipleMetricsHook, 'useGetMultipleMetrics')
 			.mockReturnValue([
-				{
+				({
 					isLoading: false,
 					isError: false,
 					data: {
-						data: MOCK_METRIC_METADATA,
-						status: 'success',
+						httpStatusCode: 200,
+						data: {
+							status: 'success',
+							data: MOCK_METRIC_METADATA,
+						},
 					},
-				} as UseQueryResult<GetMetricMetadata200, Error>,
+				} as Partial<
+					UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>
+				>) as UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>,
 			]);
 	});
 
@@ -115,11 +133,12 @@ describe('useGetMetrics', () => {
 		jest
 			.spyOn(useGetMultipleMetricsHook, 'useGetMultipleMetrics')
 			.mockReturnValue([
-				{
+				({
 					isLoading: true,
 					isError: false,
-					data: undefined,
-				} as UseQueryResult<GetMetricMetadata200, Error>,
+				} as Partial<
+					UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>
+				>) as UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>,
 			]);
 		const { result } = renderHook(() => useGetMetrics(['metric1']));
 		expect(result.current.metrics).toHaveLength(1);

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

@@ -1,9 +1,9 @@
 import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { RelatedMetric } from 'api/metricsExplorer/getRelatedMetrics';
 import { SuccessResponse, Warning } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
 export enum ExplorerTabs {
 	TIME_SERIES = 'time-series',
@@ -18,7 +18,7 @@ export interface TimeSeriesProps {
 	isMetricUnitsError: boolean;
 	metricUnits: (string | undefined)[];
 	metricNames: string[];
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[];
+	metrics: (MetricMetadata | undefined)[];
 	handleOpenMetricDetails: (metricName: string) => void;
 	yAxisUnit: string | undefined;
 	setYAxisUnit: (unit: string) => void;

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

@@ -1,12 +1,9 @@
-import { UpdateMetricMetadataMutationBody } from 'api/generated/services/metrics';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { mapMetricUnitToUniversalUnit } from 'components/YAxisUnitSelector/utils';
 import { useGetMultipleMetrics } from 'hooks/metricsExplorer/useGetMultipleMetrics';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
-import { determineIsMonotonic } from '../MetricDetails/utils';
-
 /**
  * Split a query with multiple queryData to multiple distinct queries, each with a single queryData.
  * @param query - The query to split
@@ -71,14 +68,16 @@ export function useGetMetrics(
 ): {
 	isLoading: boolean;
 	isError: boolean;
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[];
+	metrics: (MetricMetadata | undefined)[];
 } {
 	const metricsData = useGetMultipleMetrics(metricNames, {
 		enabled: metricNames.length > 0 && isEnabled,
 	});
 	return {
 		isLoading: metricsData.some((metric) => metric.isLoading),
-		metrics: metricsData.map((metric) => metric.data?.data),
+		metrics: metricsData
+			.map((metric) => metric.data?.data)
+			.map((data) => data?.data),
 		isError: metricsData.some((metric) => metric.isError),
 	};
 }
@@ -90,24 +89,9 @@ export function useGetMetrics(
  * @returns The units of the metrics, can be undefined if the metric has no unit
  */
 export function getMetricUnits(
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[],
+	metrics: (MetricMetadata | undefined)[],
 ): (string | undefined)[] {
 	return metrics
 		.map((metric) => metric?.unit)
 		.map((unit) => mapMetricUnitToUniversalUnit(unit) || undefined);
 }
-
-export function buildUpdateMetricYAxisUnitPayload(
-	metricName: string,
-	metric: MetricsexplorertypesMetricMetadataDTO,
-	yAxisUnit: string,
-): UpdateMetricMetadataMutationBody {
-	return {
-		metricName,
-		type: metric.type,
-		description: metric.description,
-		unit: yAxisUnit || '',
-		temporality: metric.temporality,
-		isMonotonic: determineIsMonotonic(metric?.type, metric?.temporality),
-	};
-}

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,33 +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 {
-	AllAttributesEmptyTextProps,
-	AllAttributesProps,
-	AllAttributesValueProps,
-} from './types';
+import { AllAttributesProps, AllAttributesValueProps } from './types';
 import { getMetricDetailsQuery } from './utils';
 
-const ALL_ATTRIBUTES_KEY = 'all-attributes';
-
-function AllAttributesEmptyText({
-	isErrorAttributes,
-	refetchAttributes,
-}: AllAttributesEmptyTextProps): JSX.Element {
-	if (isErrorAttributes) {
-		return (
-			<div className="all-attributes-error-state">
-				<MetricDetailsErrorState
-					refetch={refetchAttributes}
-					errorMessage="Something went wrong while fetching attributes"
-				/>
-			</div>
-		);
-	}
-	return <Typography.Text>No attributes found</Typography.Text>;
-}
-
 export function AllAttributesValue({
 	filterKey,
 	filterValue,
@@ -143,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();
 
@@ -221,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()),
 					),
 			),
@@ -238,7 +195,7 @@ function AllAttributes({
 						},
 						value: {
 							key: attribute.key,
-							value: attribute.values,
+							value: attribute.value,
 						},
 				  }))
 				: [],
@@ -313,7 +270,6 @@ function AllAttributes({
 							onClick={(e): void => {
 								e.stopPropagation();
 							}}
-							disabled={isLoadingAttributes || isErrorAttributes}
 						/>
 					</div>
 				),
@@ -321,49 +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: (
-								<AllAttributesEmptyText
-									isErrorAttributes={isErrorAttributes}
-									refetchAttributes={refetchAttributes}
-								/>
-							),
-						}}
 					/>
 				),
 			},
 		],
-		[
-			searchString,
-			isLoadingAttributes,
-			isErrorAttributes,
-			columns,
-			tableData,
-			refetchAttributes,
-		],
+		[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,
-		},
-		{
-			query: {
-				enabled: !!metricName,
-			},
-		},
-	);
-
-	const {
-		data: dashboardsData,
-		isLoading: isLoadingDashboards,
-		isError: isErrorDashboards,
-	} = useGetMetricDashboards(
-		{
-			metricName,
-		},
-		{
-			query: {
-				enabled: !!metricName,
-			},
-		},
-	);
-
-	const alerts = useMemo(() => {
-		return alertsData?.data.alerts ?? [];
-	}, [alertsData]);
-
-	const dashboards = useMemo(() => {
-		const currentDashboards = dashboardsData?.data.dashboards ?? [];
-		// Remove duplicate dashboards
-		return currentDashboards.filter(
-			(dashboard, index, self) =>
-				index === self.findIndex((t) => t.dashboardId === dashboard.dashboardId),
-		);
-	}, [dashboardsData]);
-
 	const alertsPopoverContent = useMemo(() => {
 		if (alerts && alerts.length > 0) {
 			return alerts.map((alert) => ({
-				key: alert.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,123 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { Button, Skeleton, Tooltip, Typography } from 'antd';
-import { useGetMetricHighlights } from 'api/generated/services/metrics';
-import { InfoIcon } from 'lucide-react';
-
-import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
-import { HighlightsProps } from './types';
-import {
-	formatNumberToCompactFormat,
-	formatTimestampToReadableDate,
-} from './utils';
-
-function Highlights({ metricName }: HighlightsProps): JSX.Element {
-	const {
-		data: metricHighlightsData,
-		isLoading: isLoadingMetricHighlights,
-		isError: isErrorMetricHighlights,
-		refetch: refetchMetricHighlights,
-	} = useGetMetricHighlights(
-		{
-			metricName,
-		},
-		{
-			query: {
-				enabled: !!metricName,
-			},
-		},
-	);
-
-	const metricHighlights = metricHighlightsData?.data;
-
-	const timeSeriesActive = formatNumberToCompactFormat(
-		metricHighlights?.activeTimeSeries,
-	);
-	const timeSeriesTotal = formatNumberToCompactFormat(
-		metricHighlights?.totalTimeSeries,
-	);
-	const lastReceivedText = formatTimestampToReadableDate(
-		metricHighlights?.lastReceived,
-	);
-
-	if (isLoadingMetricHighlights) {
-		return (
-			<div
-				className="metric-details-content-grid"
-				data-testid="metric-highlights-loading-state"
-			>
-				<Skeleton title={false} paragraph={{ rows: 2 }} active />
-			</div>
-		);
-	}
-
-	if (isErrorMetricHighlights) {
-		return (
-			<div className="metric-details-content-grid">
-				<div
-					className="metric-highlights-error-state"
-					data-testid="metric-highlights-error-state"
-				>
-					<InfoIcon size={16} color={Color.BG_CHERRY_500} />
-					<Typography.Text>
-						Something went wrong while fetching metric highlights
-					</Typography.Text>
-					<Button
-						type="link"
-						size="large"
-						onClick={(): void => {
-							refetchMetricHighlights();
-						}}
-					>
-						Retry ?
-					</Button>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className="metric-details-content-grid">
-			<div className="labels-row">
-				<Typography.Text type="secondary" className="metric-details-grid-label">
-					SAMPLES
-				</Typography.Text>
-				<Typography.Text type="secondary" className="metric-details-grid-label">
-					TIME SERIES
-				</Typography.Text>
-				<Typography.Text type="secondary" className="metric-details-grid-label">
-					LAST RECEIVED
-				</Typography.Text>
-			</div>
-			<div className="values-row">
-				<Typography.Text
-					className="metric-details-grid-value"
-					data-testid="metric-highlights-data-points"
-				>
-					<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
-						{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
-					</Tooltip>
-				</Typography.Text>
-				<Typography.Text
-					className="metric-details-grid-value"
-					data-testid="metric-highlights-time-series-total"
-				>
-					<Tooltip
-						title="Active time series are those that have received data points in the last 1
-					hour."
-						placement="top"
-					>
-						<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
-					</Tooltip>
-				</Typography.Text>
-				<Typography.Text
-					className="metric-details-grid-value"
-					data-testid="metric-highlights-last-received"
-				>
-					<Tooltip title={lastReceivedText}>{lastReceivedText}</Tooltip>
-				</Typography.Text>
-			</div>
-		</div>
-	);
-}
-
-export default Highlights;

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

@@ -1,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, MetricMetadataFormState, 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<MetricMetadataFormState>({
-		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,135 +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 MetricMetadataFormState, value: string) => {
-			if (isErrorMetricMetadata) {
-				return <FieldRenderer field="-" />;
-			}
-			if (key === TableFields.TYPE) {
-				return <MetricTypeViewRenderer type={value as MetrictypesTypeDTO} />;
-			}
-			if (key === TableFields.IS_MONOTONIC) {
-				return <FieldRenderer field={value ? 'Yes' : 'No'} />;
-			}
-			if (key === TableFields.Temporality) {
-				const temporality = METRIC_METADATA_TEMPORALITY_OPTIONS.find(
-					(option) => option.value === value,
-				);
-				return <FieldRenderer field={temporality?.label || '-'} />;
-			}
-			let fieldValue = value;
-			if (key === TableFields.UNIT) {
-				fieldValue = getUniversalNameFromMetricUnit(value);
-			}
-			return <FieldRenderer field={fieldValue || '-'} />;
-		},
-		[isErrorMetricMetadata],
-	);
+	const 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 MetricMetadataFormState;
-		}): 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,
 							}));
@@ -202,7 +164,7 @@ function Metadata({
 			}
 			return <FieldRenderer field="-" />;
 		},
-		[isEditing, metadata?.unit, metricMetadataState, renderUneditableField],
+		[isEditing, metadata?.unit, metricMetadata, renderUneditableField],
 	);
 
 	const columns: ColumnsType<DataType> = useMemo(
@@ -239,61 +201,52 @@ function Metadata({
 	const handleSave = useCallback(() => {
 		updateMetricMetadata(
 			{
-				pathParams: {
-					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 (
@@ -301,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} />
@@ -322,9 +278,6 @@ function Metadata({
 				</div>
 			);
 		}
-		if (isErrorMetricMetadata) {
-			return null;
-		}
 		return (
 			<div className="action-menu">
 				<Button
@@ -341,13 +294,7 @@ function Metadata({
 				</Button>
 			</div>
 		);
-	}, [
-		isEditing,
-		isErrorMetricMetadata,
-		isUpdatingMetricsMetadata,
-		cancelEdit,
-		handleSave,
-	]);
+	}, [handleSave, isEditing, isUpdatingMetricsMetadata]);
 
 	const items = useMemo(
 		() => [
@@ -359,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"
@@ -378,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, 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,
-		},
-		{
-			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?.type,
-	]);
+	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,9 +117,6 @@ function MetricDetails({
 		});
 	}, []);
 
-	const isActionButtonDisabled =
-		!metricName || isLoadingMetricMetadata || isErrorMetricMetadata;
-
 	return (
 		<Drawer
 			width="60%"
@@ -107,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
@@ -123,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"
@@ -147,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, MOCK_METRIC_NAME } from './testUtlls';
 
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
@@ -22,28 +20,33 @@ jest
 		handleExplorerTabChange: mockHandleExplorerTabChange,
 	});
 
+const mockMetricName = 'test-metric';
+const mockMetricType = MetricType.GAUGE;
+const mockAttributes: MetricDetailsAttribute[] = [
+	{
+		key: 'attribute1',
+		value: ['value1', 'value2'],
+		valueCount: 2,
+	},
+	{
+		key: 'attribute2',
+		value: ['value3'],
+		valueCount: 1,
+	},
+];
+
 const mockUseCopyToClipboard = jest.fn();
 jest
 	.spyOn(reactUseHooks, 'useCopyToClipboard')
 	.mockReturnValue([{ value: 'value1' }, mockUseCopyToClipboard] as any);
 
-const useGetMetricAttributesMock = jest.spyOn(
-	metricsExplorerHooks,
-	'useGetMetricAttributes',
-);
-
 describe('AllAttributes', () => {
-	beforeEach(() => {
-		useGetMetricAttributesMock.mockReturnValue({
-			...getMockMetricAttributesData(),
-		});
-	});
-
 	it('renders attributes section with title', () => {
 		render(
 			<AllAttributes
-				metricName={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
+				metricName={mockMetricName}
+				attributes={mockAttributes}
+				metricType={mockMetricType}
 			/>,
 		);
 
@@ -53,8 +56,9 @@ describe('AllAttributes', () => {
 	it('renders all attribute keys and values', () => {
 		render(
 			<AllAttributes
-				metricName={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
+				metricName={mockMetricName}
+				attributes={mockAttributes}
+				metricType={mockMetricType}
 			/>,
 		);
 
@@ -71,8 +75,9 @@ describe('AllAttributes', () => {
 	it('renders value counts correctly', () => {
 		render(
 			<AllAttributes
-				metricName={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
+				metricName={mockMetricName}
+				attributes={mockAttributes}
+				metricType={mockMetricType}
 			/>,
 		);
 
@@ -81,44 +86,41 @@ describe('AllAttributes', () => {
 	});
 
 	it('handles empty attributes array', () => {
-		useGetMetricAttributesMock.mockReturnValue({
-			...getMockMetricAttributesData({
-				data: {
-					attributes: [],
-					totalKeys: 0,
-				},
-			}),
-		});
 		render(
 			<AllAttributes
-				metricName={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
+				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={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
+				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={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
+				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();
@@ -142,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"
@@ -153,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();
 	});
 
@@ -170,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"
@@ -181,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"
@@ -198,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,18 +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,
-	MOCK_METRIC_NAME,
-} 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', () => ({
@@ -20,6 +28,7 @@ jest.mock('hooks/useSafeNavigate', () => ({
 		safeNavigate: mockSafeNavigate,
 	}),
 }));
+
 const mockSetQuery = jest.fn();
 const mockUrlQuery = {
 	set: mockSetQuery,
@@ -30,156 +39,125 @@ jest.mock('hooks/useUrlQuery', () => ({
 	default: jest.fn(() => mockUrlQuery),
 }));
 
-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} />);
+		render(
+			<DashboardsAndAlertsPopover
+				alerts={mockAlerts}
+				dashboards={mockDashboards}
+			/>,
+		);
 
-		expect(screen.getByText(`2 dashboards`)).toBeInTheDocument();
-		expect(screen.getByText(`2 alert rules`)).toBeInTheDocument();
+		expect(
+			screen.getByText(`${mockDashboards.length} dashboards`),
+		).toBeInTheDocument();
+		expect(
+			screen.getByText(`${mockAlerts.length} 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} />,
+			<DashboardsAndAlertsPopover alerts={[]} dashboards={[]} />,
 		);
-		expect(
-			container.querySelector('dashboards-and-alerts-popover-container'),
-		).toBeNull();
+		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,67 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import * as metricsExplorerHooks from 'api/generated/services/metrics';
-
-import Highlights from '../Highlights';
-import { formatTimestampToReadableDate } from '../utils';
-import { getMockMetricHighlightsData, MOCK_METRIC_NAME } from './testUtlls';
-
-const useGetMetricHighlightsMock = jest.spyOn(
-	metricsExplorerHooks,
-	'useGetMetricHighlights',
-);
-
-describe('Highlights', () => {
-	beforeEach(() => {
-		useGetMetricHighlightsMock.mockReturnValue(getMockMetricHighlightsData());
-	});
-
-	it('should render all highlights data correctly', () => {
-		render(<Highlights metricName={MOCK_METRIC_NAME} />);
-
-		const dataPoints = screen.getByTestId('metric-highlights-data-points');
-		const timeSeriesTotal = screen.getByTestId(
-			'metric-highlights-time-series-total',
-		);
-		const lastReceived = screen.getByTestId('metric-highlights-last-received');
-
-		expect(dataPoints.textContent).toBe('1M+');
-		expect(timeSeriesTotal.textContent).toBe('1M total ⎯ 1M active');
-		expect(lastReceived.textContent).toBe(
-			formatTimestampToReadableDate('2026-01-24T00:00:00Z'),
-		);
-	});
-
-	it('should render error state correctly', () => {
-		useGetMetricHighlightsMock.mockReturnValue(
-			getMockMetricHighlightsData(
-				{},
-				{
-					isError: true,
-				},
-			),
-		);
-
-		render(<Highlights metricName={MOCK_METRIC_NAME} />);
-
-		expect(
-			screen.getByTestId('metric-highlights-error-state'),
-		).toBeInTheDocument();
-	});
-
-	it('should render loading state when data is loading', () => {
-		useGetMetricHighlightsMock.mockReturnValue(
-			getMockMetricHighlightsData(
-				{},
-				{
-					isLoading: true,
-				},
-			),
-		);
-
-		render(<Highlights metricName={MOCK_METRIC_NAME} />);
-
-		expect(
-			screen.getByTestId('metric-highlights-loading-state'),
-		).toBeInTheDocument();
-	});
-});

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

@@ -1,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, MOCK_METRIC_NAME } 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();
@@ -102,50 +89,47 @@ jest.spyOn(useNotificationsHooks, 'useNotifications').mockReturnValue({
 	},
 } as any);
 
-const mockRefetchMetricMetadata = jest.fn();
+const mockMetricName = 'test_metric';
+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={MOCK_METRIC_NAME}
+				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={MOCK_METRIC_NAME}
+				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();
@@ -155,53 +139,57 @@ describe('Metadata', () => {
 	it('should update the metadata when the form is submitted', async () => {
 		render(
 			<Metadata
-				metricName={MOCK_METRIC_NAME}
+				metricName={mockMetricName}
 				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: MOCK_METRIC_NAME,
-				},
 			}),
 			expect.objectContaining({
 				onSuccess: expect.any(Function),
@@ -213,56 +201,56 @@ describe('Metadata', () => {
 	it('should show success notification when metadata is updated successfully', async () => {
 		render(
 			<Metadata
-				metricName={MOCK_METRIC_NAME}
+				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 () => {
 		render(
 			<Metadata
-				metricName={MOCK_METRIC_NAME}
+				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:
@@ -273,23 +261,22 @@ describe('Metadata', () => {
 	it('should show error notification when metadata update fails', async () => {
 		render(
 			<Metadata
-				metricName={MOCK_METRIC_NAME}
+				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;
 
@@ -302,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={MOCK_METRIC_NAME}
+				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={MOCK_METRIC_NAME}
+				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,10 +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 error state when metric details are not found', () => {
+		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
+			...mockUseGetMetricDetailsData,
+			isError: true,
+			error: {
+				message: 'Error fetching metric details',
+			},
+		} as any);
+
+		render(
+			<MetricDetails
+				onClose={mockOnClose}
+				isOpen
+				metricName={mockMetricName}
+				isModalTimeSelection
+				openInspectModal={mockOpenInspectModal}
+			/>,
+		);
+
+		expect(screen.getByText('Error fetching metric details')).toBeInTheDocument();
+	});
+
+	it('should render loading state when metric details are loading', () => {
+		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
+			...mockUseGetMetricDetailsData,
+			isLoading: true,
+		} as any);
+
+		render(
+			<MetricDetails
+				onClose={mockOnClose}
+				isOpen
+				metricName={mockMetricName}
+				isModalTimeSelection
+				openInspectModal={mockOpenInspectModal}
+			/>,
+		);
+
+		expect(screen.getByTestId('metric-details-skeleton')).toBeInTheDocument();
+	});
+
+	it('should render all attributes section', () => {
+		jest
+			.spyOn(useGetMetricDetails, 'useGetMetricDetails')
+			.mockReturnValue(mockUseGetMetricDetailsData as any);
+		render(
+			<MetricDetails
+				onClose={mockOnClose}
+				isOpen
+				metricName={mockMetricName}
+				isModalTimeSelection
+				openInspectModal={mockOpenInspectModal}
+			/>,
+		);
+
+		expect(screen.getByText('All Attributes')).toBeInTheDocument();
+	});
+
+	it('should not render all attributes section when relevant data is not present', () => {
+		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
+			...mockUseGetMetricDetailsData,
+			data: {
+				payload: {
+					data: {
+						...mockMetricData,
+						attributes: null,
+					},
+				},
+			},
+		} as any);
+		render(
+			<MetricDetails
+				onClose={mockOnClose}
+				isOpen
+				metricName={mockMetricName}
+				isModalTimeSelection
+				openInspectModal={mockOpenInspectModal}
+			/>,
+		);
+
+		expect(screen.queryByText('All Attributes')).not.toBeInTheDocument();
+	});
 });

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

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

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

@@ -1,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,55 +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: Array<{
-	value: MetrictypesTemporalityDTO;
-	label: string;
-}> = [
-	{
-		value: MetrictypesTemporalityDTO.delta,
-		label: 'Delta',
-	},
-	{
-		value: MetrictypesTemporalityDTO.cumulative,
-		label: 'Cumulative',
-	},
-];
-
-export const METRIC_METADATA_TYPE_OPTIONS: Array<{
-	value: MetrictypesTypeDTO;
-	label: string;
-}> = [
-	{
-		value: MetrictypesTypeDTO.sum,
-		label: 'Sum',
-	},
-	{
-		value: MetrictypesTypeDTO.gauge,
-		label: 'Gauge',
-	},
-	{
-		value: MetrictypesTypeDTO.histogram,
-		label: 'Histogram',
-	},
-	{
-		value: MetrictypesTypeDTO.summary,
-		label: 'Summary',
-	},
-	{
-		value: MetrictypesTypeDTO.exponentialhistogram,
-		label: 'Exponential Histogram',
-	},
-];
-
-export const METRIC_METADATA_UPDATE_ERROR_MESSAGE =
-	'Failed to update metadata, please try again. If the issue persists, please contact support.';

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

@@ -1,39 +1,34 @@
 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;
 	isOpen: boolean;
-	metricName: string;
+	metricName: string | null;
 	isModalTimeSelection: boolean;
 	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,38 +36,3 @@ export interface AllAttributesValueProps {
 	filterValue: string[];
 	goToMetricsExploreWithAppliedAttribute: (key: string, value: string) => void;
 }
-
-export interface AllAttributesEmptyTextProps {
-	isErrorAttributes: boolean;
-	refetchAttributes: () => void;
-}
-
-export type MetricHighlight = MetricsexplorertypesMetricHighlightsResponseDTO;
-
-export type MetricAlert = MetricsexplorertypesMetricAlertDTO;
-
-export type MetricDashboard = MetricsexplorertypesMetricDashboardDTO;
-
-export type MetricMetadata = MetricsexplorertypesMetricMetadataDTO;
-export interface MetricMetadataFormState {
-	type: MetrictypesTypeDTO;
-	description: string;
-	temporality?: MetrictypesTemporalityDTO;
-	unit: string;
-	isMonotonic: boolean;
-}
-
-export type MetricAttribute = MetricsexplorertypesMetricAttributeDTO;
-
-export enum TableFields {
-	DESCRIPTION = 'description',
-	UNIT = 'unit',
-	TYPE = 'type',
-	Temporality = 'temporality',
-	IS_MONOTONIC = 'isMonotonic',
-}
-
-export interface MetricDetailsErrorStateProps {
-	refetch?: () => void;
-	errorMessage: string;
-}

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

@@ -1,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, MetricMetadataFormState } 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: MetricMetadataFormState,
-): UpdateMetricMetadataMutationBody {
-	return {
-		metricName: metricName,
-		type: metricMetadata.type,
-		description: metricMetadata.description,
-		unit: metricMetadata.unit,
-		temporality:
-			metricMetadata.temporality ?? MetrictypesTemporalityDTO.unspecified,
-		isMonotonic: determineIsMonotonic(
-			metricMetadata.type,
-			metricMetadata.temporality,
-		),
-	};
-}

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

@@ -5,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,
@@ -324,7 +323,7 @@ function Summary(): JSX.Element {
 					</>
 				)}
 			</div>
-			{isMetricDetailsOpen && selectedMetricName && (
+			{isMetricDetailsOpen && (
 				<MetricDetails
 					isOpen={isMetricDetailsOpen}
 					onClose={closeMetricDetails}

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,66 +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]);
-
-	const metricTypeRendererStyle = useMemo(
-		() => ({
-			backgroundColor: `${color}33`,
-			border: `1px solid ${color}`,
-			color,
-		}),
-		[color],
-	);
-
-	const metricTypeRendererTextStyle = useMemo(() => ({ color, fontSize: 12 }), [
-		color,
-	]);
-
-	return (
-		<div className="metric-type-renderer" style={metricTypeRendererStyle}>
-			{icon}
-			<Typography.Text style={metricTypeRendererTextStyle}>
-				{METRIC_TYPE_VIEW_LABEL_MAP[type]}
-			</Typography.Text>
-		</div>
-	);
-}
-
 function ValidateRowValueWrapper({
 	value,
 	children,
@@ -221,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/LegendColors/LegendColors.test.tsx

@@ -1,131 +0,0 @@
-import { ColorPickerProps } from 'antd';
-import { Color } from 'antd/es/color-picker';
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import LegendColors from './LegendColors';
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	__esModule: true,
-	useQueryBuilder: (): { currentQuery: unknown } => ({
-		currentQuery: {
-			builder: {
-				queryData: [
-					{
-						queryName: 'A',
-						legend: '{service.name}',
-					},
-				],
-			},
-		},
-	}),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('antd', () => {
-	const actual = jest.requireActual('antd');
-	return {
-		...actual,
-		ColorPicker: ({ onChange, children }: ColorPickerProps): JSX.Element => (
-			<button
-				type="button"
-				data-testid="legend-color-picker"
-				onClick={(): void =>
-					onChange!({ toHexString: (): string => '#ffffff' } as Color, '#ffffff')
-				}
-			>
-				{children}
-			</button>
-		),
-	};
-});
-
-describe('LegendColors', () => {
-	it('renders legend colors panel and items', async () => {
-		const user = userEvent.setup();
-
-		render(
-			<LegendColors
-				customLegendColors={{}}
-				setCustomLegendColors={jest.fn()}
-				queryResponse={undefined}
-			/>,
-		);
-
-		expect(screen.getByText('Legend Colors')).toBeInTheDocument();
-
-		// Expand the collapse to reveal legend items
-		await user.click(
-			screen.getByRole('tab', {
-				name: /Legend Colors/i,
-			}),
-		);
-
-		expect(screen.getByText('{service.name}')).toBeInTheDocument();
-	});
-
-	it('calls setCustomLegendColors when color is changed', async () => {
-		const user = userEvent.setup();
-		const setCustomLegendColors = jest.fn();
-
-		render(
-			<LegendColors
-				customLegendColors={{}}
-				setCustomLegendColors={setCustomLegendColors}
-				queryResponse={undefined}
-			/>,
-		);
-
-		// Expand to render the mocked ColorPicker button
-		await user.click(
-			screen.getByRole('tab', {
-				name: /Legend Colors/i,
-			}),
-		);
-
-		const colorTrigger = screen.getByTestId('legend-color-picker');
-
-		await user.click(colorTrigger);
-
-		expect(setCustomLegendColors).toHaveBeenCalled();
-	});
-
-	it('throttles rapid color changes', async () => {
-		jest.useFakeTimers();
-		const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-		const setCustomLegendColors = jest.fn();
-
-		render(
-			<LegendColors
-				customLegendColors={{}}
-				setCustomLegendColors={setCustomLegendColors}
-				queryResponse={undefined}
-			/>,
-		);
-
-		// Expand panel to render the mocked ColorPicker button
-		await user.click(
-			screen.getByRole('tab', {
-				name: /Legend Colors/i,
-			}),
-		);
-
-		const colorTrigger = screen.getByTestId('legend-color-picker');
-
-		// Fire multiple rapid changes
-		await user.click(colorTrigger);
-		await user.click(colorTrigger);
-		await user.click(colorTrigger);
-		await user.click(colorTrigger);
-
-		// Flush pending throttled calls
-		jest.advanceTimersByTime(500);
-
-		// Throttling should ensure we don't invoke the setter once per click
-		expect(setCustomLegendColors).toHaveBeenCalledTimes(2);
-
-		jest.useRealTimers();
-	});
-});

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

@@ -14,7 +14,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import throttle from 'lodash-es/throttle';
 import { Palette } from 'lucide-react';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -96,24 +95,13 @@ function LegendColors({
 		);
 	};
 
-	// Handle color change (throttled to avoid excessive updates)
-	const handleColorChange = useMemo(
-		() =>
-			throttle((label: string, color: string): void => {
-				setCustomLegendColors((prev) => ({
-					...prev,
-					[label]: color,
-				}));
-			}, 200), // 200ms is a good compromise between responsiveness and performance
-		[setCustomLegendColors],
-	);
-
-	// Clean up throttled handler on unmount
-	useEffect(() => {
-		return (): void => {
-			handleColorChange.cancel();
-		};
-	}, [handleColorChange]);
+	// Handle color change
+	const handleColorChange = (label: string, color: string): void => {
+		setCustomLegendColors((prev) => ({
+			...prev,
+			[label]: color,
+		}));
+	};
 
 	// Reset to default color
 	const resetToDefault = (label: string): void => {

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.styles.scss

@@ -169,10 +169,6 @@
 				font-weight: 400;
 				line-height: 16px; /* 133.333% */
 
-				.ant-select {
-					width: 100%;
-				}
-
 				.ant-select-selector {
 					border: none;
 					height: unset;

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

@@ -2,9 +2,6 @@
 import { useMemo, useRef, useState } from 'react';
 import { useDrag, useDrop, XYCoord } from 'react-dnd';
 import { Button, Input, InputNumber, Select, Space, Typography } from 'antd';
-import YAxisUnitSelector from 'components/YAxisUnitSelector';
-import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { unitOptions } from 'container/NewWidget/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -207,18 +204,6 @@ function Threshold({
 		return unit !== 'none' && convertUnit(value, unit, toUnitId) === null;
 	}, [selectedGraph, yAxisUnit, tableSelectedOption, columnUnits, unit, value]);
 
-	const unitSelectCategories = useMemo(() => {
-		return unitOptions(
-			selectedGraph === PANEL_TYPES.TABLE
-				? getColumnUnit(tableSelectedOption, columnUnits || {}) || ''
-				: yAxisUnit || '',
-		);
-	}, [selectedGraph, yAxisUnit, tableSelectedOption, columnUnits]);
-
-	const unitLabel = useMemo(() => {
-		return Y_AXIS_UNIT_NAMES[unit as keyof typeof Y_AXIS_UNIT_NAMES];
-	}, [unit]);
-
 	return (
 		<div
 			ref={allowDragAndDrop ? ref : null}
@@ -328,17 +313,19 @@ function Threshold({
 						<ShowCaseValue value={value} className="unit-input" />
 					)}
 					{isEditMode ? (
-						<YAxisUnitSelector
-							value={unit}
+						<Select
+							defaultValue={unit}
+							options={unitOptions(
+								selectedGraph === PANEL_TYPES.TABLE
+									? getColumnUnit(tableSelectedOption, columnUnits || {}) || ''
+									: yAxisUnit || '',
+							)}
 							onChange={handleUnitChange}
-							placeholder="Select unit"
-							source={YAxisSource.DASHBOARDS}
-							initialValue={unit}
-							categoriesOverride={unitSelectCategories}
-							containerClassName="unit-selection"
+							showSearch
+							className="unit-selection"
 						/>
 					) : (
-						<ShowCaseValue value={unitLabel} className="unit-selection-prev" />
+						<ShowCaseValue value={unit} className="unit-selection-prev" />
 					)}
 				</div>
 				<div className="thresholds-color-selector">
@@ -369,10 +356,7 @@ function Threshold({
 					)}
 				</div>
 				{isInvalidUnitComparison && (
-					<Typography.Text
-						className="invalid-unit"
-						data-testid="invalid-unit-comparison"
-					>
+					<Typography.Text className="invalid-unit">
 						Threshold unit ({unit}) is not valid in comparison with the{' '}
 						{selectedGraph === PANEL_TYPES.TABLE ? 'column' : 'y-axis'} unit (
 						{selectedGraph === PANEL_TYPES.TABLE

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

@@ -1,8 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
-import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { render, screen } from 'tests/test-utils';
 
@@ -16,26 +14,12 @@ jest.mock('lib/query/createTableColumnsFromQuery', () => ({
 	),
 }));
 
-// Mock the unitOptions function to return YAxisCategory-shaped data
+// Mock the unitOptions function
 jest.mock('container/NewWidget/utils', () => ({
 	unitOptions: jest.fn(() => [
-		{
-			name: 'Mock Category',
-			units: [
-				{
-					id: UniversalYAxisUnit.NONE,
-					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NONE],
-				},
-				{
-					id: UniversalYAxisUnit.PERCENT,
-					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
-				},
-				{
-					id: UniversalYAxisUnit.MILLISECONDS,
-					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MILLISECONDS],
-				},
-			],
-		},
+		{ value: 'none', label: 'None' },
+		{ value: '%', label: 'Percent (0 - 100)' },
+		{ value: 'ms', label: 'Milliseconds (ms)' },
 	]),
 }));
 
@@ -44,7 +28,7 @@ const defaultProps = {
 	keyIndex: 0,
 	thresholdOperator: '>' as const,
 	thresholdValue: 50,
-	thresholdUnit: UniversalYAxisUnit.NONE,
+	thresholdUnit: 'none',
 	thresholdColor: 'Red',
 	thresholdFormat: 'Text' as const,
 	isEditEnabled: true,
@@ -54,11 +38,8 @@ const defaultProps = {
 		{ value: 'memory_usage', label: 'Memory Usage' },
 	],
 	thresholdTableOptions: 'cpu_usage',
-	columnUnits: {
-		cpu_usage: UniversalYAxisUnit.PERCENT,
-		memory_usage: UniversalYAxisUnit.BYTES,
-	},
-	yAxisUnit: UniversalYAxisUnit.PERCENT,
+	columnUnits: { cpu_usage: 'percent', memory_usage: 'bytes' },
+	yAxisUnit: '%',
 	moveThreshold: jest.fn(),
 };
 
@@ -87,27 +68,28 @@ describe('Threshold Component Unit Validation', () => {
 	it('should show validation error when threshold unit is not "none" and units are incompatible', () => {
 		// Act - Render component with incompatible units (ms vs percent)
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.MILLISECONDS,
+			thresholdUnit: 'ms',
 			thresholdValue: 50,
 		});
 
-		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(errorMessage.textContent).toBe(
-			`Threshold unit (${UniversalYAxisUnit.MILLISECONDS}) is not valid in comparison with the column unit (${UniversalYAxisUnit.PERCENT})`,
-		);
+		expect(
+			screen.getByText(
+				/Threshold unit \(ms\) is not valid in comparison with the column unit \(percent\)/i,
+			),
+		).toBeInTheDocument();
 	});
 
 	it('should not show validation error when threshold unit matches column unit', () => {
 		// Act - Render component with matching units
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.PERCENT,
+			thresholdUnit: 'percent',
 			thresholdValue: 50,
 		});
 
 		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByTestId('invalid-unit-comparison'),
+			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
 		).not.toBeInTheDocument();
 	});
 
@@ -115,16 +97,17 @@ describe('Threshold Component Unit Validation', () => {
 		// Act - Render component for time series with incompatible units
 		renderThreshold({
 			selectedGraph: PANEL_TYPES.TIME_SERIES,
-			thresholdUnit: UniversalYAxisUnit.MILLISECONDS,
+			thresholdUnit: 'ms',
 			thresholdValue: 100,
-			yAxisUnit: UniversalYAxisUnit.PERCENT,
+			yAxisUnit: 'percent',
 		});
 
-		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(errorMessage.textContent).toBe(
-			`Threshold unit (${UniversalYAxisUnit.MILLISECONDS}) is not valid in comparison with the y-axis unit (${UniversalYAxisUnit.PERCENT})`,
-		);
+		expect(
+			screen.getByText(
+				/Threshold unit \(ms\) is not valid in comparison with the y-axis unit \(percent\)/i,
+			),
+		).toBeInTheDocument();
 	});
 
 	it('should not show validation error for time series graph when threshold unit is "none"', () => {
@@ -133,39 +116,43 @@ describe('Threshold Component Unit Validation', () => {
 			selectedGraph: PANEL_TYPES.TIME_SERIES,
 			thresholdUnit: 'none',
 			thresholdValue: 100,
-			yAxisUnit: UniversalYAxisUnit.PERCENT,
+			yAxisUnit: 'percent',
 		});
+
+		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByTestId('invalid-unit-comparison'),
+			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
 		).not.toBeInTheDocument();
 	});
 
 	it('should not show validation error when threshold unit is compatible with column unit', () => {
 		// Act - Render component with compatible units (both in same category - Time)
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.SECONDS,
+			thresholdUnit: 's',
 			thresholdValue: 100,
-			columnUnits: { cpu_usage: UniversalYAxisUnit.MILLISECONDS },
+			columnUnits: { cpu_usage: 'ms' },
 			thresholdTableOptions: 'cpu_usage',
 		});
+
 		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByTestId('invalid-unit-comparison'),
+			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
 		).not.toBeInTheDocument();
 	});
 
 	it('should show validation error when threshold unit is in different category than column unit', () => {
 		// Act - Render component with units from different categories
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.BYTES,
+			thresholdUnit: 'bytes',
 			thresholdValue: 100,
-			yAxisUnit: UniversalYAxisUnit.PERCENT,
+			yAxisUnit: 'percent',
 		});
 
-		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(errorMessage.textContent).toBe(
-			`Threshold unit (${UniversalYAxisUnit.BYTES}) is not valid in comparison with the column unit (${UniversalYAxisUnit.PERCENT})`,
-		);
+		expect(
+			screen.getByText(
+				/Threshold unit \(bytes\) is not valid in comparison with the column unit \(percent\)/i,
+			),
+		).toBeInTheDocument();
 	});
 });

frontend/src/container/NewWidget/utils.ts

@@ -1,12 +1,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 {
-	UniversalYAxisUnit,
-	YAxisCategory,
-	YAxisSource,
-} from 'components/YAxisUnitSelector/types';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
 import {
 	initialQueryBuilderFormValuesMap,
@@ -609,7 +606,7 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
  */
 export const getCategorySelectOptionByName = (
 	name?: YAxisCategoryNames,
-): { name: string; id: UniversalYAxisUnit }[] => {
+): DefaultOptionType[] => {
 	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
 	if (!categories.length) {
 		return [];
@@ -618,8 +615,8 @@ export const getCategorySelectOptionByName = (
 		categories
 			.find((category) => category.name === name)
 			?.units.map((unit) => ({
-				name: unit.name,
-				id: unit.id,
+				label: unit.name,
+				value: unit.id,
 			})) || []
 	);
 };
@@ -631,19 +628,19 @@ export const getCategorySelectOptionByName = (
  * select options. If a valid category is found, it filters the supported categories
  * to return only the options for the matched category.
  */
-export const unitOptions = (columnUnit: string): YAxisCategory[] => {
+export const unitOptions = (columnUnit: string): DefaultOptionType[] => {
 	const category = getCategoryName(columnUnit);
 	if (isEmpty(category)) {
 		return categoryToSupport.map((category) => ({
-			name: category,
-			units: getCategorySelectOptionByName(category),
+			label: category,
+			options: getCategorySelectOptionByName(category),
 		}));
 	}
 	return categoryToSupport
 		.filter((supportedCategory) => supportedCategory === category)
 		.map((filteredCategory) => ({
-			name: filteredCategory,
-			units: getCategorySelectOptionByName(filteredCategory),
+			label: filteredCategory,
+			options: getCategorySelectOptionByName(filteredCategory),
 		}));
 };
 

frontend/src/hooks/metricsExplorer/useGetMultipleMetrics.ts

@@ -1,37 +1,32 @@
 import { useQueries, UseQueryOptions, UseQueryResult } from 'react-query';
-import {
-	getGetMetricMetadataQueryKey,
-	getMetricMetadata,
-} from 'api/generated/services/metrics';
-import { GetMetricMetadata200 } from 'api/generated/services/sigNoz.schemas';
+import { getMetricMetadata } from 'api/metricsExplorer/v2/getMetricMetadata';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { SuccessResponseV2 } from 'types/api';
+import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
-type QueryResult = UseQueryResult<GetMetricMetadata200, Error>;
+type QueryResult = UseQueryResult<
+	SuccessResponseV2<MetricMetadataResponse>,
+	Error
+>;
 
 type UseGetMultipleMetrics = (
 	metricNames: string[],
-	options?: UseQueryOptions<GetMetricMetadata200, Error>,
+	options?: UseQueryOptions<SuccessResponseV2<MetricMetadataResponse>, Error>,
 	headers?: Record<string, string>,
 ) => QueryResult[];
 
 export const useGetMultipleMetrics: UseGetMultipleMetrics = (
 	metricNames,
 	options,
+	headers,
 ) =>
 	useQueries(
 		metricNames.map(
 			(metricName) =>
 				({
-					queryKey: getGetMetricMetadataQueryKey({
-						metricName,
-					}),
-					queryFn: ({ signal }) =>
-						getMetricMetadata(
-							{
-								metricName,
-							},
-							signal,
-						),
+					queryKey: [REACT_QUERY_KEY.GET_METRIC_METADATA, metricName],
+					queryFn: ({ signal }) => getMetricMetadata(metricName, signal, headers),
 					...options,
-				} as UseQueryOptions<GetMetricMetadata200, Error>),
+				} as UseQueryOptions<SuccessResponseV2<MetricMetadataResponse>, Error>),
 		),
 	);

frontend/src/hooks/useAuthZ/permissions.type.ts

@@ -0,0 +1,23 @@
+// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY scripts/generate-permissions-type
+export default {
+	status: 'success',
+	data: {
+		resources: [
+			{
+				name: 'dashboard',
+				type: 'metaresource',
+			},
+			{
+				name: 'dashboards',
+				type: 'metaresources',
+			},
+		],
+		relations: {
+			create: ['metaresources'],
+			delete: ['user', 'role', 'organization', 'metaresource'],
+			list: ['metaresources'],
+			read: ['user', 'role', 'organization', 'metaresource'],
+			update: ['user', 'role', 'organization', 'metaresource'],
+		},
+	},
+} as const;

frontend/src/hooks/useAuthZ/types.ts

@@ -0,0 +1,57 @@
+import permissionsType from './permissions.type';
+import { ObjectSeparator } from './utils';
+
+type PermissionsData = typeof permissionsType.data;
+export type Resource = PermissionsData['resources'][number];
+export type ResourceName = Resource['name'];
+export type ResourceType = Resource['type'];
+
+type RelationsByType = PermissionsData['relations'];
+
+type ResourceTypeMap = {
+	[K in ResourceName]: Extract<Resource, { name: K }>['type'];
+};
+
+type RelationName = keyof RelationsByType;
+
+type ResourcesForRelation<R extends RelationName> = Extract<
+	Resource,
+	{ type: RelationsByType[R][number] }
+>['name'];
+
+type IsPluralResource<
+	R extends ResourceName
+> = ResourceTypeMap[R] extends 'metaresources' ? true : false;
+
+type ObjectForResource<R extends ResourceName> = R extends infer U
+	? U extends ResourceName
+		? IsPluralResource<U> extends true
+			? U
+			: `${U}${typeof ObjectSeparator}${string}`
+		: never
+	: never;
+
+type RelationToObject<R extends RelationName> = ObjectForResource<
+	ResourcesForRelation<R>
+>;
+
+type AllRelations = RelationName;
+
+export type AuthZRelation = AllRelations;
+export type AuthZResource = ResourceName;
+export type AuthZObject<R extends AuthZRelation> = RelationToObject<R>;
+
+export type BrandedPermission = string & { __brandedPermission: true };
+
+export type AuthZCheckResponse = Record<
+	BrandedPermission,
+	{
+		isGranted: boolean;
+	}
+>;
+
+export type UseAuthZResult = {
+	isLoading: boolean;
+	error: Error | null;
+	permissions: AuthZCheckResponse | null;
+};

frontend/src/hooks/useAuthZ/useAuthZ.test.tsx

@@ -0,0 +1,496 @@
+import { ReactElement } from 'react';
+import { renderHook, waitFor } from '@testing-library/react';
+import {
+	AuthtypesGettableTransactionDTO,
+	AuthtypesTransactionDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { AllTheProviders } from 'tests/test-utils';
+
+import { BrandedPermission } from './types';
+import { useAuthZ } from './useAuthZ';
+import { buildPermission } from './utils';
+
+const BASE_URL = ENVIRONMENT.baseURL || '';
+const AUTHZ_CHECK_URL = `${BASE_URL}/api/v1/authz/check`;
+
+function authzMockResponse(
+	payload: AuthtypesTransactionDTO[],
+	authorizedByIndex: boolean[],
+): { data: AuthtypesGettableTransactionDTO[]; status: string } {
+	return {
+		data: payload.map((txn, i) => ({
+			relation: txn.relation,
+			object: txn.object,
+			authorized: authorizedByIndex[i] ?? false,
+		})),
+		status: 'success',
+	};
+}
+
+const wrapper = ({ children }: { children: ReactElement }): ReactElement => (
+	<AllTheProviders>{children}</AllTheProviders>
+);
+
+describe('useAuthZ', () => {
+	it('should fetch and return permissions successfully', async () => {
+		const permission1 = buildPermission('read', 'dashboard:*');
+		const permission2 = buildPermission('update', 'dashboard:123');
+
+		const expectedResponse = {
+			[permission1]: {
+				isGranted: true,
+			},
+			[permission2]: {
+				isGranted: false,
+			},
+		};
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, [true, false])),
+				);
+			}),
+		);
+
+		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
+			wrapper,
+		});
+
+		expect(result.current.isLoading).toBe(true);
+		expect(result.current.permissions).toBeNull();
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.error).toBeNull();
+		expect(result.current.permissions).toEqual(expectedResponse);
+	});
+
+	it('should handle API errors', async () => {
+		const permission = buildPermission('read', 'dashboard:*');
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
+			}),
+		);
+
+		const { result } = renderHook(() => useAuthZ([permission]), {
+			wrapper,
+		});
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.error).not.toBeNull();
+		expect(result.current.permissions).toBeNull();
+	});
+
+	it('should refetch when permissions array changes', async () => {
+		const permission1 = buildPermission('read', 'dashboard:*');
+		const permission2 = buildPermission('update', 'dashboard:123');
+		const permission3 = buildPermission('delete', 'dashboard:456');
+
+		let requestCount = 0;
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				requestCount++;
+				const payload = await req.json();
+
+				if (payload.length === 1) {
+					return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+				}
+
+				const authorized = payload.map(
+					(txn: { relation: string }) =>
+						txn.relation === 'read' || txn.relation === 'delete',
+				);
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, authorized)),
+				);
+			}),
+		);
+
+		const { result, rerender } = renderHook<
+			ReturnType<typeof useAuthZ>,
+			BrandedPermission[]
+		>((permissions) => useAuthZ(permissions), {
+			wrapper,
+			initialProps: [permission1],
+		});
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(requestCount).toBe(1);
+		expect(result.current.permissions).toEqual({
+			[permission1]: {
+				isGranted: true,
+			},
+		});
+
+		rerender([permission1, permission2, permission3]);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(requestCount).toBe(2);
+		expect(result.current.permissions).toEqual({
+			[permission1]: {
+				isGranted: true,
+			},
+			[permission2]: {
+				isGranted: false,
+			},
+			[permission3]: {
+				isGranted: true,
+			},
+		});
+	});
+
+	it('should not refetch when permissions array order changes but content is the same', async () => {
+		const permission1 = buildPermission('read', 'dashboard:*');
+		const permission2 = buildPermission('update', 'dashboard:123');
+
+		let requestCount = 0;
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				requestCount++;
+				const payload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, [true, false])),
+				);
+			}),
+		);
+
+		const { result, rerender } = renderHook<
+			ReturnType<typeof useAuthZ>,
+			BrandedPermission[]
+		>((permissions) => useAuthZ(permissions), {
+			wrapper,
+			initialProps: [permission1, permission2],
+		});
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(requestCount).toBe(1);
+
+		rerender([permission2, permission1]);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(requestCount).toBe(1);
+	});
+
+	it('should handle empty permissions array', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(200), ctx.json({ data: [], status: 'success' }));
+			}),
+		);
+
+		const { result } = renderHook(() => useAuthZ([]), {
+			wrapper,
+		});
+
+		expect(result.current.isLoading).toBe(false);
+		expect(result.current.error).toBeNull();
+		expect(result.current.permissions).toEqual({});
+	});
+
+	it('should send correct payload format to API', async () => {
+		const permission1 = buildPermission('read', 'dashboard:*');
+		const permission2 = buildPermission('update', 'dashboard:123');
+
+		let receivedPayload: any = null;
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				receivedPayload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(receivedPayload, [true, false])),
+				);
+			}),
+		);
+
+		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
+			wrapper,
+		});
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(receivedPayload).toHaveLength(2);
+		expect(receivedPayload[0]).toMatchObject({
+			relation: 'read',
+			object: {
+				resource: { name: 'dashboard', type: 'metaresource' },
+				selector: '*',
+			},
+		});
+		expect(receivedPayload[1]).toMatchObject({
+			relation: 'update',
+			object: {
+				resource: { name: 'dashboard', type: 'metaresource' },
+				selector: '123',
+			},
+		});
+	});
+
+	it('should batch multiple hooks into single flight request', async () => {
+		const permission1 = buildPermission('read', 'dashboard:*');
+		const permission2 = buildPermission('update', 'dashboard:123');
+		const permission3 = buildPermission('delete', 'dashboard:456');
+
+		let requestCount = 0;
+		const receivedPayloads: any[] = [];
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				requestCount++;
+				const payload = await req.json();
+				receivedPayloads.push(payload);
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, [true, false, true])),
+				);
+			}),
+		);
+
+		const { result: result1 } = renderHook(() => useAuthZ([permission1]), {
+			wrapper,
+		});
+
+		const { result: result2 } = renderHook(() => useAuthZ([permission2]), {
+			wrapper,
+		});
+
+		const { result: result3 } = renderHook(() => useAuthZ([permission3]), {
+			wrapper,
+		});
+
+		await waitFor(
+			() => {
+				expect(result1.current.isLoading).toBe(false);
+				expect(result2.current.isLoading).toBe(false);
+				expect(result3.current.isLoading).toBe(false);
+			},
+			{ timeout: 200 },
+		);
+
+		expect(requestCount).toBe(1);
+		expect(receivedPayloads).toHaveLength(1);
+		expect(receivedPayloads[0]).toHaveLength(3);
+		expect(receivedPayloads[0][0]).toMatchObject({
+			relation: 'read',
+			object: {
+				resource: { name: 'dashboard', type: 'metaresource' },
+				selector: '*',
+			},
+		});
+		expect(receivedPayloads[0][1]).toMatchObject({
+			relation: 'update',
+			object: { resource: { name: 'dashboard' }, selector: '123' },
+		});
+		expect(receivedPayloads[0][2]).toMatchObject({
+			relation: 'delete',
+			object: { resource: { name: 'dashboard' }, selector: '456' },
+		});
+
+		expect(result1.current.permissions).toEqual({
+			[permission1]: { isGranted: true },
+		});
+		expect(result2.current.permissions).toEqual({
+			[permission2]: { isGranted: false },
+		});
+		expect(result3.current.permissions).toEqual({
+			[permission3]: { isGranted: true },
+		});
+	});
+
+	it('should create separate batches for calls after single flight window', async () => {
+		const permission1 = buildPermission('read', 'dashboard:*');
+		const permission2 = buildPermission('update', 'dashboard:123');
+		const permission3 = buildPermission('delete', 'dashboard:456');
+
+		let requestCount = 0;
+		const receivedPayloads: any[] = [];
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				requestCount++;
+				const payload = await req.json();
+				receivedPayloads.push(payload);
+				const authorized = payload.length === 1 ? [true] : [false, true];
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, authorized)),
+				);
+			}),
+		);
+
+		const { result: result1 } = renderHook(() => useAuthZ([permission1]), {
+			wrapper,
+		});
+
+		await waitFor(
+			() => {
+				expect(result1.current.isLoading).toBe(false);
+			},
+			{ timeout: 200 },
+		);
+
+		expect(requestCount).toBe(1);
+		expect(receivedPayloads[0]).toHaveLength(1);
+
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
+		const { result: result2 } = renderHook(() => useAuthZ([permission2]), {
+			wrapper,
+		});
+
+		const { result: result3 } = renderHook(() => useAuthZ([permission3]), {
+			wrapper,
+		});
+
+		await waitFor(
+			() => {
+				expect(result2.current.isLoading).toBe(false);
+				expect(result3.current.isLoading).toBe(false);
+			},
+			{ timeout: 200 },
+		);
+
+		expect(requestCount).toBe(2);
+		expect(receivedPayloads).toHaveLength(2);
+		expect(receivedPayloads[1]).toHaveLength(2);
+		expect(receivedPayloads[1][0]).toMatchObject({
+			relation: 'update',
+			object: { resource: { name: 'dashboard' }, selector: '123' },
+		});
+		expect(receivedPayloads[1][1]).toMatchObject({
+			relation: 'delete',
+			object: { resource: { name: 'dashboard' }, selector: '456' },
+		});
+	});
+
+	it('should map permissions correctly when API returns response out of order', async () => {
+		const permission1 = buildPermission('read', 'dashboard:*');
+		const permission2 = buildPermission('update', 'dashboard:123');
+		const permission3 = buildPermission('delete', 'dashboard:456');
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				const reversed = [...payload].reverse();
+				const authorizedByReversed = [true, false, true];
+				return res(
+					ctx.status(200),
+					ctx.json({
+						data: reversed.map((txn: any, i: number) => ({
+							relation: txn.relation,
+							object: txn.object,
+							authorized: authorizedByReversed[i],
+						})),
+						status: 'success',
+					}),
+				);
+			}),
+		);
+
+		const { result } = renderHook(
+			() => useAuthZ([permission1, permission2, permission3]),
+			{ wrapper },
+		);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.permissions).toEqual({
+			[permission1]: { isGranted: true },
+			[permission2]: { isGranted: false },
+			[permission3]: { isGranted: true },
+		});
+	});
+
+	it('should not leak state between separate batches', async () => {
+		const permission1 = buildPermission('read', 'dashboard:*');
+		const permission2 = buildPermission('update', 'dashboard:123');
+
+		let requestCount = 0;
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				requestCount++;
+				const payload = await req.json();
+				const authorized = payload.map(
+					(txn: { relation: string }) => txn.relation === 'read',
+				);
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, authorized)),
+				);
+			}),
+		);
+
+		const { result: result1 } = renderHook(() => useAuthZ([permission1]), {
+			wrapper,
+		});
+
+		await waitFor(
+			() => {
+				expect(result1.current.isLoading).toBe(false);
+			},
+			{ timeout: 200 },
+		);
+
+		expect(requestCount).toBe(1);
+		expect(result1.current.permissions).toEqual({
+			[permission1]: { isGranted: true },
+		});
+
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
+		const { result: result2 } = renderHook(() => useAuthZ([permission2]), {
+			wrapper,
+		});
+
+		await waitFor(
+			() => {
+				expect(result2.current.isLoading).toBe(false);
+			},
+			{ timeout: 200 },
+		);
+
+		expect(requestCount).toBe(2);
+		expect(result1.current.permissions).toEqual({
+			[permission1]: { isGranted: true },
+		});
+		expect(result2.current.permissions).toEqual({
+			[permission2]: { isGranted: false },
+		});
+		expect(result1.current.permissions).not.toHaveProperty(permission2);
+		expect(result2.current.permissions).not.toHaveProperty(permission1);
+	});
+});

frontend/src/hooks/useAuthZ/useAuthZ.tsx

@@ -0,0 +1,129 @@
+import { useMemo } from 'react';
+import { useQueries } from 'react-query';
+import { authzCheck } from 'api/generated/services/authz';
+import type {
+	AuthtypesObjectDTO,
+	AuthtypesTransactionDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { AuthZCheckResponse, BrandedPermission, UseAuthZResult } from './types';
+import {
+	gettableTransactionToPermission,
+	permissionToTransactionDto,
+} from './utils';
+
+let ctx: Promise<AuthZCheckResponse> | null;
+let pendingPermissions: BrandedPermission[] = [];
+const SINGLE_FLIGHT_WAIT_TIME_MS = 50;
+const AUTHZ_CACHE_TIME = 20_000;
+
+function dispatchPermission(
+	permission: BrandedPermission,
+): Promise<AuthZCheckResponse> {
+	pendingPermissions.push(permission);
+
+	if (!ctx) {
+		let resolve: (v: AuthZCheckResponse) => void, reject: (reason?: any) => void;
+		ctx = new Promise<AuthZCheckResponse>((r, re) => {
+			resolve = r;
+			reject = re;
+		});
+
+		setTimeout(() => {
+			const copiedPermissions = pendingPermissions.slice();
+			pendingPermissions = [];
+			ctx = null;
+
+			fetchManyPermissions(copiedPermissions).then(resolve).catch(reject);
+		}, SINGLE_FLIGHT_WAIT_TIME_MS);
+	}
+
+	return ctx;
+}
+
+async function fetchManyPermissions(
+	permissions: BrandedPermission[],
+): Promise<AuthZCheckResponse> {
+	const payload: AuthtypesTransactionDTO[] = permissions.map((permission) => {
+		const dto = permissionToTransactionDto(permission);
+		const object: AuthtypesObjectDTO = {
+			resource: {
+				name: dto.object.resource.name,
+				type: dto.object.resource.type,
+			},
+			selector: dto.object.selector,
+		};
+		return { relation: dto.relation, object };
+	});
+
+	const { data } = await authzCheck(payload);
+
+	const fromApi = (data ?? []).reduce<AuthZCheckResponse>((acc, item) => {
+		const permission = gettableTransactionToPermission(item);
+		acc[permission] = { isGranted: !!item.authorized };
+		return acc;
+	}, {} as AuthZCheckResponse);
+
+	return permissions.reduce<AuthZCheckResponse>((acc, permission) => {
+		acc[permission] = fromApi[permission] ?? { isGranted: false };
+		return acc;
+	}, {} as AuthZCheckResponse);
+}
+
+export function useAuthZ(permissions: BrandedPermission[]): UseAuthZResult {
+	const queryResults = useQueries(
+		permissions.map((permission) => {
+			return {
+				queryKey: ['authz', permission],
+				cacheTime: AUTHZ_CACHE_TIME,
+				refetchOnMount: false,
+				refetchIntervalInBackground: false,
+				refetchOnWindowFocus: false,
+				refetchOnReconnect: true,
+				queryFn: async (): Promise<AuthZCheckResponse> => {
+					const response = await dispatchPermission(permission);
+
+					return {
+						[permission]: {
+							isGranted: response[permission].isGranted,
+						},
+					};
+				},
+			};
+		}),
+	);
+
+	const isLoading = useMemo(() => queryResults.some((q) => q.isLoading), [
+		queryResults,
+	]);
+	const error = useMemo(
+		() =>
+			!isLoading
+				? (queryResults.find((q) => !!q.error)?.error as Error) || null
+				: null,
+		[isLoading, queryResults],
+	);
+	const data = useMemo(() => {
+		if (isLoading || error) {
+			return null;
+		}
+
+		return queryResults.reduce((acc, q) => {
+			if (!q.data) {
+				return acc;
+			}
+
+			for (const [key, value] of Object.entries(q.data)) {
+				acc[key as BrandedPermission] = value;
+			}
+
+			return acc;
+		}, {} as AuthZCheckResponse);
+	}, [isLoading, error, queryResults]);
+
+	return {
+		isLoading,
+		error,
+		permissions: data ?? null,
+	};
+}

frontend/src/hooks/useAuthZ/utils.ts

@@ -0,0 +1,85 @@
+import { AuthtypesTransactionDTO } from '../../api/generated/services/sigNoz.schemas';
+import permissionsType from './permissions.type';
+import {
+	AuthZObject,
+	AuthZRelation,
+	AuthZResource,
+	BrandedPermission,
+	ResourceName,
+	ResourceType,
+} from './types';
+
+export const PermissionSeparator = '||__||';
+export const ObjectSeparator = ':';
+
+export function buildPermission<R extends AuthZRelation>(
+	relation: R,
+	object: AuthZObject<R>,
+): BrandedPermission {
+	return `${relation}${PermissionSeparator}${object}` as BrandedPermission;
+}
+
+export function buildObjectString(
+	resource: AuthZResource,
+	objectId: string,
+): `${AuthZResource}${typeof ObjectSeparator}${string}` {
+	return `${resource}${ObjectSeparator}${objectId}` as const;
+}
+
+export function parsePermission(
+	permission: BrandedPermission,
+): {
+	relation: AuthZRelation;
+	object: string;
+} {
+	const [relation, object] = permission.split(PermissionSeparator);
+	return { relation: relation as AuthZRelation, object };
+}
+
+const resourceNameToType = permissionsType.data.resources.reduce((acc, r) => {
+	acc[r.name] = r.type;
+	return acc;
+}, {} as Record<ResourceName, ResourceType>);
+
+export function permissionToTransactionDto(
+	permission: BrandedPermission,
+): AuthtypesTransactionDTO {
+	const { relation, object: objectStr } = parsePermission(permission);
+	const directType = resourceNameToType[objectStr as ResourceName];
+	if (directType === 'metaresources') {
+		return {
+			relation,
+			object: {
+				resource: { name: objectStr, type: directType },
+				selector: '*',
+			},
+		};
+	}
+	const [resourceName, selector] = objectStr.split(ObjectSeparator);
+	const type =
+		resourceNameToType[resourceName as ResourceName] ?? 'metaresource';
+
+	return {
+		relation,
+		object: {
+			resource: { name: resourceName, type },
+			selector: selector || '*',
+		},
+	};
+}
+
+export function gettableTransactionToPermission(
+	item: AuthtypesTransactionDTO,
+): BrandedPermission {
+	const {
+		relation,
+		object: { resource, selector },
+	} = item;
+	const resourceName = String(resource.name);
+	const selectorStr = typeof selector === 'string' ? selector : '*';
+	const objectStr =
+		resource.type === 'metaresources'
+			? resourceName
+			: `${resourceName}${ObjectSeparator}${selectorStr}`;
+	return `${relation}${PermissionSeparator}${objectStr}` as BrandedPermission;
+}

frontend/src/hooks/useGetYAxisUnit.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { useGetMetrics } from 'container/MetricsExplorer/Explorer/utils';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
@@ -24,13 +24,13 @@ const mockUseGetMetrics = useGetMetrics as jest.MockedFunction<
 
 const MOCK_METRIC_1 = {
 	unit: UniversalYAxisUnit.BYTES,
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 const MOCK_METRIC_2 = {
 	unit: UniversalYAxisUnit.SECONDS,
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 const MOCK_METRIC_3 = {
 	unit: '',
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 
 function createMockCurrentQuery(
 	queryType: EQueryType,

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.styles.scss

@@ -1,22 +1,14 @@
 .tooltip-plugin-container {
 	top: 0;
 	left: 0;
-	width: 100%;
 	z-index: 1070;
 	white-space: pre;
 	border-radius: 4px;
 	position: fixed;
 	overflow: auto;
 	transform: translate(-1000px, -1000px); // hide the tooltip initially
-	opacity: 0;
-	pointer-events: none;
 
 	&.pinned {
 		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
 	}
-
-	&.visible {
-		opacity: 1;
-		pointer-events: all;
-	}
 }

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -339,9 +339,8 @@ export default function TooltipPlugin({
 			return;
 		}
 		const layout = layoutRef.current;
-		layout.observer.disconnect();
-
 		if (containerRef.current) {
+			layout.observer.disconnect();
 			layout.observer.observe(containerRef.current);
 			const { width, height } = containerRef.current.getBoundingClientRect();
 			layout.width = width;
@@ -352,28 +351,24 @@ export default function TooltipPlugin({
 		}
 	}, [isHovering, plot]);
 
-	if (!plot) {
+	if (!plot || !isHovering) {
 		return null;
 	}
 
 	return createPortal(
 		<div
-			className={cx('tooltip-plugin-container', {
-				pinned: isPinned,
-				visible: isHovering,
-			})}
+			className={cx('tooltip-plugin-container', { pinned: isPinned })}
 			style={{
 				...style,
 				maxWidth: `${maxWidth}px`,
 				maxHeight: `${maxHeight}px`,
+				width: '100%',
 			}}
 			aria-live="polite"
 			aria-atomic="true"
-			aria-hidden={!isHovering}
 			ref={containerRef}
-			data-testid="tooltip-plugin-container"
 		>
-			{isHovering ? contents : null}
+			{contents}
 		</div>,
 		portalRoot.current,
 	);

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -187,7 +187,9 @@ describe('TooltipPlugin', () => {
 				canPinTooltip: true,
 			});
 
-			const container = screen.getByTestId('tooltip-plugin-container');
+			const container = document.querySelector(
+				'.tooltip-plugin-container',
+			) as HTMLElement;
 			expect(container.classList.contains('pinned')).toBe(false);
 
 			act(() => {
@@ -195,9 +197,11 @@ describe('TooltipPlugin', () => {
 			});
 
 			return waitFor(() => {
-				const updated = screen.getByTestId('tooltip-plugin-container');
-				expect(updated).toBeInTheDocument();
-				expect(updated.classList.contains('pinned')).toBe(true);
+				const updated = document.querySelector(
+					'.tooltip-plugin-container',
+				) as HTMLElement | null;
+				expect(updated).not.toBeNull();
+				expect(updated?.classList.contains('pinned')).toBe(true);
 			});
 		});
 
@@ -245,13 +249,7 @@ describe('TooltipPlugin', () => {
 			await user.click(button);
 
 			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-
-				expect(container).toBeInTheDocument();
-				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
-				expect(container.textContent).toBe('');
+				expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 			});
 		});
 
@@ -294,16 +292,12 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container).toBeInTheDocument();
-			expect(container.getAttribute('aria-hidden')).toBe('true');
-			expect(container.classList.contains('visible')).toBe(false);
-			expect(container.classList.contains('pinned')).toBe(false);
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 
 			jest.useRealTimers();
 		});
 
-		it('unpins the tooltip on outside mousedown', async () => {
+		it('unpins the tooltip on outside mousedown', () => {
 			jest.useFakeTimers();
 			const config = createConfigMock();
 
@@ -341,19 +335,12 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-
-				expect(container).toBeInTheDocument();
-				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
-			});
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 
 			jest.useRealTimers();
 		});
 
-		it('unpins the tooltip on outside keydown', async () => {
+		it('unpins the tooltip on outside keydown', () => {
 			jest.useFakeTimers();
 			const config = createConfigMock();
 
@@ -393,13 +380,7 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-				expect(container).toBeInTheDocument();
-				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
-			});
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 
 			jest.useRealTimers();
 		});

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/modules/user/config.go

@@ -22,8 +22,7 @@ type RootConfig struct {
 }
 
 type OrgConfig struct {
-	ID   valuer.UUID `mapstructure:"id"`
-	Name string      `mapstructure:"name"`
+	Name string `mapstructure:"name"`
 }
 
 type PasswordConfig struct {

pkg/modules/user/impluser/service.go

@@ -78,43 +78,6 @@ func (s *service) Stop(ctx context.Context) error {
 }
 
 func (s *service) reconcile(ctx context.Context) error {
-	if !s.config.Org.ID.IsZero() {
-		return s.reconcileWithOrgID(ctx)
-	}
-
-	return s.reconcileByName(ctx)
-}
-
-func (s *service) reconcileWithOrgID(ctx context.Context) error {
-	org, err := s.orgGetter.Get(ctx, s.config.Org.ID)
-	if err != nil {
-		if !errors.Ast(err, errors.TypeNotFound) {
-			return err // something really went wrong
-		}
-
-		// org was not found using id check if we can find an org using name
-
-		existingOrgByName, nameErr := s.orgGetter.GetByName(ctx, s.config.Org.Name)
-		if nameErr != nil && !errors.Ast(nameErr, errors.TypeNotFound) {
-			return nameErr // something really went wrong
-		}
-
-		// we found an org using name
-		if existingOrgByName != nil {
-			// the existing org has the same name as config but org id is different inform user with actionable message
-			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "organization with name %q already exists with a different ID %s (expected %s)", s.config.Org.Name, existingOrgByName.ID.StringValue(), s.config.Org.ID.StringValue())
-		}
-
-		// default - we did not found any org using id and name both - create a new org
-		newOrg := types.NewOrganizationWithID(s.config.Org.ID, s.config.Org.Name, s.config.Org.Name)
-		_, err = s.module.CreateFirstUser(ctx, newOrg, s.config.Email.String(), s.config.Email, s.config.Password)
-		return err
-	}
-
-	return s.reconcileRootUser(ctx, org.ID)
-}
-
-func (s *service) reconcileByName(ctx context.Context) error {
 	org, err := s.orgGetter.GetByName(ctx, s.config.Org.Name)
 	if err != nil {
 		if errors.Ast(err, errors.TypeNotFound) {

pkg/telemetrymetrics/statement_builder.go

@@ -159,23 +159,6 @@ func (b *MetricQueryStatementBuilder) buildPipelineStatement(
 			query.Aggregations[0].TimeAggregation = metrictypes.TimeAggregationIncrease
 		}
 		query.Aggregations[0].SpaceAggregation = metrictypes.SpaceAggregationSum
-
-		// check for origTimeAgg's and origSpaceAgg's validity
-		if origTimeAgg.IsZero() || !origTimeAgg.IsValid() {
-			return nil, errors.Newf(
-				errors.TypeInvalidInput,
-				errors.CodeInvalidInput,
-				"invalid time aggregation, should be one of the following: [`rate`, `increase`]",
-			)
-		}
-
-		if origSpaceAgg.IsZero() || !origSpaceAgg.IsValid() {
-			return nil, errors.Newf(
-				errors.TypeInvalidInput,
-				errors.CodeInvalidInput,
-				"invalid space aggregation, should be one of the following: [`count`, `p50`, `p75`, `p90`, `p95`, `p99`]",
-			)
-		}
 	}
 
 	var timeSeriesCTE string
@@ -540,26 +523,11 @@ func (b *MetricQueryStatementBuilder) buildSpatialAggregationCTE(
 	query qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation],
 	_ map[string][]*telemetrytypes.TelemetryFieldKey,
 ) (string, []any, error) {
-	if query.Aggregations[0].SpaceAggregation.IsZero() || !query.Aggregations[0].SpaceAggregation.IsValid() {
-		if query.Aggregations[0].Type.IsPercentileSpaceAggregationAllowed() {
-			return "", nil, errors.Newf(
-				errors.TypeInvalidInput,
-				errors.CodeInvalidInput,
-				"invalid space aggregation, should be one of the following: [`sum`, `avg`, `min`, `max`, `count`, `p50`, `p75`, `p90`, `p95`, `p99`]",
-			)
-		} else {
-			return "", nil, errors.Newf(
-				errors.TypeInvalidInput,
-				errors.CodeInvalidInput,
-				"invalid space aggregation, should be one of the following: [`sum`, `avg`, `min`, `max`, `count`]",
-			)
-		}
-	}
-	if query.Aggregations[0].SpaceAggregation.IsPercentile() && !query.Aggregations[0].Type.IsPercentileSpaceAggregationAllowed() {
+	if query.Aggregations[0].SpaceAggregation.IsZero() {
 		return "", nil, errors.Newf(
 			errors.TypeInvalidInput,
 			errors.CodeInvalidInput,
-			"percentile based aggregations are invalid for this metric, should be one of the following: [`sum`, `avg`, `min`, `max`, `count`]",
+			"invalid space aggregation, should be one of the following: [`sum`, `avg`, `min`, `max`, `count`, `p50`, `p75`, `p90`, `p95`, `p99`]",
 		)
 	}
 	sb := sqlbuilder.NewSelectBuilder()

pkg/telemetrymetrics/stmt_builder_test.go

@@ -122,7 +122,7 @@ func TestStatementBuilder(t *testing.T) {
 			expectedErr: nil,
 		},
 		{
-			name:        "test_histogram_percentile1",
+			name:        "test_histogram_percentile",
 			requestType: qbtypes.RequestTypeTimeSeries,
 			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
 				Signal:       telemetrytypes.SignalMetrics,
@@ -132,7 +132,6 @@ func TestStatementBuilder(t *testing.T) {
 						MetricName:       "signoz_latency",
 						Type:             metrictypes.HistogramType,
 						Temporality:      metrictypes.Delta,
-						TimeAggregation:  metrictypes.TimeAggregationRate,
 						SpaceAggregation: metrictypes.SpaceAggregationPercentile95,
 					},
 				},
@@ -188,7 +187,7 @@ func TestStatementBuilder(t *testing.T) {
 			expectedErr: nil,
 		},
 		{
-			name:        "test_histogram_percentile2",
+			name:        "test_histogram_percentile",
 			requestType: qbtypes.RequestTypeTimeSeries,
 			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
 				Signal:       telemetrytypes.SignalMetrics,
@@ -198,7 +197,6 @@ func TestStatementBuilder(t *testing.T) {
 						MetricName:       "http_server_duration_bucket",
 						Type:             metrictypes.HistogramType,
 						Temporality:      metrictypes.Cumulative,
-						TimeAggregation:  metrictypes.TimeAggregationRate,
 						SpaceAggregation: metrictypes.SpaceAggregationPercentile95,
 					},
 				},
@@ -213,7 +211,7 @@ func TestStatementBuilder(t *testing.T) {
 			},
 			expected: qbtypes.Statement{
 				Query: "WITH __temporal_aggregation_cte AS (SELECT ts, `service.name`, `le`, multiIf(row_number() OVER rate_window = 1, nan, (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) / (ts - lagInFrame(ts, 1) OVER rate_window)) AS per_series_value FROM (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, `le`, max(value) AS per_series_value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name`, JSONExtractString(labels, 'le') AS `le` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? GROUP BY fingerprint, `service.name`, `le`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY fingerprint, ts, `service.name`, `le` ORDER BY fingerprint, ts) WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint, ts)), __spatial_aggregation_cte AS (SELECT ts, `service.name`, `le`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`, `le`) SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte GROUP BY `service.name`, ts ORDER BY `service.name`, ts",
-				Args:  []any{"http_server_duration_bucket", uint64(1747936800000), uint64(1747983420000), "cumulative", false, "http_server_duration_bucket", uint64(1747947360000), uint64(1747983420000), 0},
+				Args:  []any{"http_server_duration_bucket", uint64(1747936800000), uint64(1747983420000), "cumulative", false, "http_server_duration_bucket", uint64(1747947390000), uint64(1747983420000), 0},
 			},
 			expectedErr: nil,
 		},

pkg/types/metrictypes/metrictypes.go

@@ -3,7 +3,6 @@ package metrictypes
 import (
 	"database/sql/driver"
 	"fmt"
-	"slices"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -136,10 +135,6 @@ func (t *Type) Scan(src interface{}) error {
 	return nil
 }
 
-func (t Type) IsPercentileSpaceAggregationAllowed() bool {
-	return t == HistogramType || t == ExpHistogramType || t == SummaryType
-}
-
 var (
 	GaugeType        = Type{valuer.NewString("gauge")}
 	SumType          = Type{valuer.NewString("sum")}
@@ -190,10 +185,6 @@ func (TimeAggregation) Enum() []any {
 	}
 }
 
-func (t TimeAggregation) IsValid() bool {
-	return slices.ContainsFunc(t.Enum(), func(v any) bool { return v == t })
-}
-
 type SpaceAggregation struct {
 	valuer.String
 }
@@ -227,10 +218,6 @@ func (SpaceAggregation) Enum() []any {
 	}
 }
 
-func (s SpaceAggregation) IsValid() bool {
-	return slices.ContainsFunc(s.Enum(), func(v any) bool { return v == s })
-}
-
 func (s SpaceAggregation) IsPercentile() bool {
 	return s == SpaceAggregationPercentile50 ||
 		s == SpaceAggregationPercentile75 ||

pkg/types/organization.go

@@ -41,21 +41,6 @@ func NewOrganization(displayName string, name string) *Organization {
 	}
 }
 
-func NewOrganizationWithID(id valuer.UUID, displayName string, name string) *Organization {
-	return &Organization{
-		Identifiable: Identifiable{
-			ID: id,
-		},
-		TimeAuditable: TimeAuditable{
-			CreatedAt: time.Now(),
-			UpdatedAt: time.Now(),
-		},
-		Name:        name,
-		DisplayName: displayName,
-		Key:         NewOrganizationKey(id),
-	}
-}
-
 func NewOrganizationKey(orgID valuer.UUID) uint32 {
 	hasher := fnv.New32a()