chore: add basic integration tests for meter

.github/workflows/jsci.yaml

@@ -71,49 +71,3 @@ jobs:
         uses: actions/checkout@v4
       - name: validate md languages
         run: bash frontend/scripts/validate-md-languages.sh
-  authz:
-    if: |
-      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    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

frontend/.eslintrc.js

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

frontend/package.json

@@ -19,8 +19,7 @@
 		"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:permissions-type": "node scripts/generate-permissions-type.js"
+		"generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
 	},
 	"engines": {
 		"node": ">=16.15.0"

frontend/scripts/generate-permissions-type.js

@@ -1,199 +0,0 @@
-#!/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/components/GuardAuthZ/GuardAuthZ.test.tsx

@@ -1,321 +0,0 @@
-import { ReactElement } from 'react';
-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

@@ -1,50 +0,0 @@
-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/createGuardedRoute/createGuardedRoute.styles.scss

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

@@ -1,472 +0,0 @@
-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 './createGuardedRoute';
-
-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

@@ -1,73 +0,0 @@
-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/DashboardContainer/visualization/charts/types.ts

@@ -1,4 +1,3 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
@@ -9,7 +8,7 @@ interface BaseChartProps {
 	height: number;
 	showTooltip?: boolean;
 	showLegend?: boolean;
-	timezone?: Timezone;
+	timezone: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -129,12 +129,12 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					onDestroy={onPlotDestroy}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
+					timezone={timezone.value}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					isStackedBarChart={widget.stackedBarChart ?? false}
-					timezone={timezone}
 				>
 					<ContextMenu
 						coordinates={coordinates}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -5,7 +5,12 @@ import { getInitialStackedBands } from 'container/DashboardContainer/visualizati
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
+import {
+	DrawStyle,
+	LineInterpolation,
+	LineStyle,
+	VisibilityMode,
+} from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -58,12 +63,7 @@ export function prepareBarPanelConfig({
 	const minStepInterval = Math.min(...Object.values(stepIntervals));
 
 	const builder = buildBaseConfig({
-		widgetId: widget.id,
-		thresholds: widget.thresholds,
-		yAxisUnit: widget.yAxisUnit,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
-		isLogScale: widget.isLogScale,
+		widget,
 		isDarkMode,
 		onClick,
 		onDragSelect,
@@ -98,8 +98,14 @@ export function prepareBarPanelConfig({
 		builder.addSeries({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Bar,
+			panelType: PANEL_TYPES.BAR,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: false,
+			lineStyle: LineStyle.Solid,
+			lineInterpolation: LineInterpolation.Spline,
+			showPoints: VisibilityMode.Never,
+			pointSize: 5,
 			isDarkMode,
 			stepInterval: currentStepInterval,
 		});

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx

@@ -100,7 +100,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					syncMode={DashboardCursorSync.Crosshair}
-					timezone={timezone}
+					timezone={timezone.value}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts

@@ -154,12 +154,7 @@ export function prepareHistogramPanelConfig({
 	isDarkMode: boolean;
 }): UPlotConfigBuilder {
 	const builder = buildBaseConfig({
-		widgetId: widget.id,
-		thresholds: widget.thresholds,
-		yAxisUnit: widget.yAxisUnit,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
-		isLogScale: widget.isLogScale,
+		widget,
 		isDarkMode,
 		apiResponse,
 		panelMode,
@@ -196,8 +191,10 @@ export function prepareHistogramPanelConfig({
 		builder.addSeries({
 			label: '',
 			scaleKey: 'y',
-			drawStyle: DrawStyle.Histogram,
+			drawStyle: DrawStyle.Bar,
+			panelType: PANEL_TYPES.HISTOGRAM,
 			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: false,
 			barWidthFactor: 1,
 			pointSize: 5,
 			lineColor: '#3f5ecc',
@@ -219,8 +216,10 @@ export function prepareHistogramPanelConfig({
 			builder.addSeries({
 				label: label,
 				scaleKey: 'y',
-				drawStyle: DrawStyle.Histogram,
+				drawStyle: DrawStyle.Bar,
+				panelType: PANEL_TYPES.HISTOGRAM,
 				colorMapping: widget.customLegendColors ?? {},
+				spanGaps: false,
 				barWidthFactor: 1,
 				pointSize: 5,
 				isDarkMode,

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -118,7 +118,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					}}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone}
+					timezone={timezone.value}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -82,12 +82,7 @@ export const prepareUPlotConfig = ({
 	const minStepInterval = Math.min(...Object.values(stepIntervals));
 
 	const builder = buildBaseConfig({
-		widgetId: widget.id,
-		thresholds: widget.thresholds,
-		yAxisUnit: widget.yAxisUnit,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
-		isLogScale: widget.isLogScale,
+		widget,
 		isDarkMode,
 		onClick,
 		onDragSelect,
@@ -125,6 +120,7 @@ export const prepareUPlotConfig = ({
 				: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
+			panelType: PANEL_TYPES.TIME_SERIES,
 		});
 	});
 

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/baseConfigBuilder.test.ts

@@ -1,11 +1,11 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { STEP_INTERVAL_MULTIPLIER } from 'lib/uPlotV2/constants';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import { PanelMode } from '../../types';
-import { BaseConfigBuilderProps, buildBaseConfig } from '../baseConfigBuilder';
+import { buildBaseConfig } from '../baseConfigBuilder';
 
 jest.mock(
 	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
@@ -27,17 +27,16 @@ jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
 	default: jest.fn().mockReturnValue({ name: 'onClickPlugin' }),
 }));
 
-const createBaseConfigBuilderProps = (
-	overrides: Partial<BaseConfigBuilderProps> = {},
-): Partial<BaseConfigBuilderProps> => ({
-	widgetId: 'widget-1',
-	yAxisUnit: 'ms',
-	isLogScale: false,
-	softMin: undefined,
-	softMax: undefined,
-	thresholds: [],
-	...overrides,
-});
+const createWidget = (overrides: Partial<Widgets> = {}): Widgets =>
+	({
+		id: 'widget-1',
+		yAxisUnit: 'ms',
+		isLogScale: false,
+		softMin: undefined,
+		softMax: undefined,
+		thresholds: [],
+		...overrides,
+	} as Widgets);
 
 const createApiResponse = (
 	overrides: Partial<MetricRangePayloadProps> = {},
@@ -48,7 +47,7 @@ const createApiResponse = (
 	} as MetricRangePayloadProps);
 
 const baseProps = {
-	...createBaseConfigBuilderProps(),
+	widget: createWidget(),
 	apiResponse: createApiResponse(),
 	isDarkMode: true,
 	panelMode: PanelMode.DASHBOARD_VIEW,
@@ -68,7 +67,7 @@ describe('buildBaseConfig', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
 			panelMode: PanelMode.DASHBOARD_VIEW,
-			...createBaseConfigBuilderProps({ widgetId: 'my-widget' }),
+			widget: createWidget({ id: 'my-widget' }),
 		});
 
 		expect(builder.getWidgetId()).toBe('my-widget');
@@ -128,7 +127,7 @@ describe('buildBaseConfig', () => {
 	it('configures log scale on y axis when widget.isLogScale is true', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
-			...createBaseConfigBuilderProps({ isLogScale: true }),
+			widget: createWidget({ isLogScale: true }),
 		});
 
 		const config = builder.getConfig();
@@ -172,7 +171,7 @@ describe('buildBaseConfig', () => {
 	it('adds thresholds from widget', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
-			...createBaseConfigBuilderProps({
+			widget: createWidget({
 				thresholds: [
 					{
 						thresholdValue: 80,
@@ -180,7 +179,7 @@ describe('buildBaseConfig', () => {
 						thresholdUnit: 'ms',
 						thresholdLabel: 'High',
 					},
-				] as ThresholdProps[],
+				] as Widgets['thresholds'],
 			}),
 		});
 

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -1,6 +1,5 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import onClickPlugin, {
 	OnClickPluginOpts,
 } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -10,32 +9,28 @@ import {
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import { PanelMode } from '../types';
 
 export interface BaseConfigBuilderProps {
-	widgetId?: string;
-	thresholds?: ThresholdProps[];
+	widget: Widgets;
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect?: (startTime: number, endTime: number) => void;
 	timezone?: Timezone;
-	panelMode?: PanelMode;
+	panelMode: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
 	maxTimeScale?: number;
 	stepInterval?: number;
-	isLogScale?: boolean;
-	yAxisUnit?: string;
-	softMin?: number;
-	softMax?: number;
 }
 
 export function buildBaseConfig({
-	widgetId,
+	widget,
 	isDarkMode,
 	onClick,
 	onDragSelect,
@@ -43,14 +38,9 @@ export function buildBaseConfig({
 	timezone,
 	panelMode,
 	panelType,
-	thresholds,
 	minTimeScale,
 	maxTimeScale,
 	stepInterval,
-	isLogScale,
-	yAxisUnit,
-	softMin,
-	softMax,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
 	const tzDate = timezone
 		? (timestamp: number): Date =>
@@ -59,26 +49,27 @@ export function buildBaseConfig({
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,
-		widgetId: widgetId,
+		widgetId: widget.id,
 		tzDate,
 		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: panelMode
-			? [PanelMode.DASHBOARD_VIEW, PanelMode.STANDALONE_VIEW].includes(panelMode)
-				? SelectionPreferencesSource.LOCAL_STORAGE
-				: SelectionPreferencesSource.IN_MEMORY
+		selectionPreferencesSource: [
+			PanelMode.DASHBOARD_VIEW,
+			PanelMode.STANDALONE_VIEW,
+		].includes(panelMode)
+			? SelectionPreferencesSource.LOCAL_STORAGE
 			: SelectionPreferencesSource.IN_MEMORY,
 		stepInterval,
 	});
 
 	const thresholdOptions: ThresholdsDrawHookOptions = {
 		scaleKey: 'y',
-		thresholds: (thresholds || []).map((threshold) => ({
+		thresholds: (widget.thresholds || []).map((threshold) => ({
 			thresholdValue: threshold.thresholdValue ?? 0,
 			thresholdColor: threshold.thresholdColor,
 			thresholdUnit: threshold.thresholdUnit,
 			thresholdLabel: threshold.thresholdLabel,
 		})),
-		yAxisUnit: yAxisUnit,
+		yAxisUnit: widget.yAxisUnit,
 	};
 
 	builder.addThresholds(thresholdOptions);
@@ -88,8 +79,8 @@ export function buildBaseConfig({
 		time: true,
 		min: minTimeScale,
 		max: maxTimeScale,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
+		logBase: widget.isLogScale ? 10 : undefined,
+		distribution: widget.isLogScale
 			? DistributionType.Logarithmic
 			: DistributionType.Linear,
 	});
@@ -100,11 +91,11 @@ export function buildBaseConfig({
 		time: false,
 		min: undefined,
 		max: undefined,
-		softMin: softMin,
-		softMax: softMax,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
 		thresholds: thresholdOptions,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
+		logBase: widget.isLogScale ? 10 : undefined,
+		distribution: widget.isLogScale
 			? DistributionType.Logarithmic
 			: DistributionType.Linear,
 	});
@@ -123,7 +114,7 @@ export function buildBaseConfig({
 		show: true,
 		side: 2,
 		isDarkMode,
-		isLogScale: isLogScale,
+		isLogScale: widget.isLogScale,
 		panelType,
 	});
 
@@ -132,8 +123,8 @@ export function buildBaseConfig({
 		show: true,
 		side: 3,
 		isDarkMode,
-		isLogScale: isLogScale,
-		yAxisUnit: yAxisUnit,
+		isLogScale: widget.isLogScale,
+		yAxisUnit: widget.yAxisUnit,
 		panelType,
 	});
 

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

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

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

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

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

@@ -1,85 +0,0 @@
-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/lib/uPlotV2/components/Tooltip/Tooltip.tsx

@@ -4,7 +4,6 @@ import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useTimezone } from 'providers/Timezone';
 
 import { TooltipProps } from '../types';
 
@@ -23,14 +22,6 @@ export default function Tooltip({
 	const isDarkMode = useIsDarkMode();
 	const [listHeight, setListHeight] = useState(0);
 	const tooltipContent = content ?? [];
-	const { timezone: userTimezone } = useTimezone();
-
-	const resolvedTimezone = useMemo(() => {
-		if (!timezone) {
-			return userTimezone.value;
-		}
-		return timezone.value;
-	}, [timezone, userTimezone]);
 
 	const headerTitle = useMemo(() => {
 		if (!showTooltipHeader) {
@@ -42,10 +33,10 @@ export default function Tooltip({
 			return null;
 		}
 		return dayjs(data[0][cursorIdx] * 1000)
-			.tz(resolvedTimezone)
+			.tz(timezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
-		resolvedTimezone,
+		timezone,
 		uPlotInstance.data,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -83,7 +83,7 @@ function createUPlotInstance(cursorIdx: number | null): uPlot {
 function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 	const defaultProps: TooltipTestProps = {
 		uPlotInstance: createUPlotInstance(null),
-		timezone: { value: 'UTC', name: 'UTC', offset: '0', searchIndex: '0' },
+		timezone: 'UTC',
 		content: [],
 		showTooltipHeader: true,
 		// TooltipRenderArgs (not used directly in component but required by type)

frontend/src/lib/uPlotV2/components/types.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
 
@@ -62,7 +61,7 @@ export interface TooltipRenderArgs {
 
 export interface BaseTooltipProps {
 	showTooltipHeader?: boolean;
-	timezone?: Timezone;
+	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -1,3 +1,4 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
@@ -22,9 +23,6 @@ import {
  * Path builders are static and shared across all instances of UPlotSeriesBuilder
  */
 let builders: PathBuilders | null = null;
-
-const DEFAULT_LINE_WIDTH = 2;
-export const POINT_SIZE_FACTOR = 2.5;
 export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	constructor(props: SeriesProps) {
 		super(props);
@@ -55,7 +53,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		const { lineWidth, lineStyle, lineCap, fillColor } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: resolvedLineColor,
-			width: lineWidth ?? DEFAULT_LINE_WIDTH,
+			width: lineWidth ?? 2,
 		};
 
 		if (lineStyle === LineStyle.Dashed) {
@@ -68,9 +66,9 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 
 		if (fillColor) {
 			lineConfig.fill = fillColor;
-		} else if (this.props.drawStyle === DrawStyle.Bar) {
+		} else if (this.props.panelType === PANEL_TYPES.BAR) {
 			lineConfig.fill = resolvedLineColor;
-		} else if (this.props.drawStyle === DrawStyle.Histogram) {
+		} else if (this.props.panelType === PANEL_TYPES.HISTOGRAM) {
 			lineConfig.fill = `${resolvedLineColor}40`;
 		}
 
@@ -139,19 +137,10 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			drawStyle,
 			showPoints,
 		} = this.props;
-
-		/**
-		 * If pointSize is not provided, use the lineWidth * POINT_SIZE_FACTOR
-		 * to determine the point size.
-		 * POINT_SIZE_FACTOR is 2, so the point size will be 2x the line width.
-		 */
-		const resolvedPointSize =
-			pointSize ?? (lineWidth ?? DEFAULT_LINE_WIDTH) * POINT_SIZE_FACTOR;
-
 		const pointsConfig: Partial<Series.Points> = {
 			stroke: resolvedLineColor,
 			fill: resolvedLineColor,
-			size: resolvedPointSize,
+			size: !pointSize || pointSize < (lineWidth ?? 2) ? undefined : pointSize,
 			filter: pointsFilter || undefined,
 		};
 
@@ -242,7 +231,7 @@ function getPathBuilder({
 		throw new Error('Required uPlot path builders are not available');
 	}
 
-	if (drawStyle === DrawStyle.Bar || drawStyle === DrawStyle.Histogram) {
+	if (drawStyle === DrawStyle.Bar) {
 		const pathBuilders = uPlot.paths;
 		return getBarPathBuilder({
 			pathBuilders,

frontend/src/lib/uPlotV2/config/__tests__/UPlotConfigBuilder.test.ts

@@ -1,3 +1,4 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import uPlot from 'uplot';
 
 import {
@@ -42,6 +43,7 @@ describe('UPlotConfigBuilder', () => {
 		label: 'Requests',
 		colorMapping: {},
 		drawStyle: DrawStyle.Line,
+		panelType: PANEL_TYPES.TIME_SERIES,
 		...overrides,
 	});
 

frontend/src/lib/uPlotV2/config/__tests__/UPlotSeriesBuilder.test.ts

@@ -1,3 +1,4 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import uPlot from 'uplot';
 
@@ -8,7 +9,7 @@ import {
 	LineStyle,
 	VisibilityMode,
 } from '../types';
-import { POINT_SIZE_FACTOR, UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
+import { UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
 
 const createBaseProps = (
 	overrides: Partial<SeriesProps> = {},
@@ -18,6 +19,7 @@ const createBaseProps = (
 	colorMapping: {},
 	drawStyle: DrawStyle.Line,
 	isDarkMode: false,
+	panelType: PANEL_TYPES.TIME_SERIES,
 	...overrides,
 });
 
@@ -135,6 +137,7 @@ describe('UPlotSeriesBuilder', () => {
 		const smallPointsBuilder = new UPlotSeriesBuilder(
 			createBaseProps({
 				lineWidth: 4,
+				pointSize: 2,
 			}),
 		);
 		const largePointsBuilder = new UPlotSeriesBuilder(
@@ -147,7 +150,7 @@ describe('UPlotSeriesBuilder', () => {
 		const smallConfig = smallPointsBuilder.getConfig();
 		const largeConfig = largePointsBuilder.getConfig();
 
-		expect(smallConfig.points?.size).toBe(4 * POINT_SIZE_FACTOR); // should be lineWidth * POINT_SIZE_FACTOR, when pointSize is not provided
+		expect(smallConfig.points?.size).toBeUndefined();
 		expect(largeConfig.points?.size).toBe(4);
 	});
 

frontend/src/lib/uPlotV2/config/types.ts

@@ -112,7 +112,6 @@ export enum DrawStyle {
 	Line = 'line',
 	Points = 'points',
 	Bar = 'bar',
-	Histogram = 'histogram',
 }
 
 export enum LineInterpolation {
@@ -169,6 +168,7 @@ export interface PointsConfig {
 export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	scaleKey: string;
 	label?: string;
+	panelType: PANEL_TYPES;
 	colorMapping: Record<string, string>;
 	drawStyle: DrawStyle;
 	pathBuilder?: Series.PathBuilder;

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

@@ -8,7 +8,6 @@ import {
 	createSetCursorHandler,
 	createSetLegendHandler,
 	createSetSeriesHandler,
-	getPlot,
 	isScrollEventInPlot,
 	updatePlotVisibility,
 	updateWindowSize,
@@ -54,7 +53,7 @@ export default function TooltipPlugin({
 	const [viewState, setState] = useState<TooltipViewState>(
 		createInitialViewState,
 	);
-	const { hasPlot, isHovering, isPinned, contents, style } = viewState;
+	const { plot, isHovering, isPinned, contents, style } = viewState;
 
 	/**
 	 * Merge a partial view update into the current React state.
@@ -73,25 +72,12 @@ export default function TooltipPlugin({
 		layoutRef.current?.observer.disconnect();
 		layoutRef.current = createLayoutObserver(layoutRef);
 
-		/**
-		 * Plot lifecycle and GC: viewState uses hasPlot (boolean), not the plot
-		 * reference; clearPlotReferences runs in cleanup so
-		 * detached canvases can be garbage collected.
-		 */
 		// Controller holds the mutable interaction state for this tooltip
 		// instance. It is intentionally *not* React state so uPlot hooks
 		// and DOM listeners can update it freely without triggering a
 		// render on every mouse move.
 		const controller: TooltipControllerState = createInitialControllerState();
 
-		/**
-		 * Clear plot references so detached canvases can be garbage collected.
-		 */
-		const clearPlotReferences = (): void => {
-			controller.plot = null;
-			updateState({ hasPlot: false });
-		};
-
 		const syncTooltipWithDashboard = syncMode === DashboardCursorSync.Tooltip;
 
 		// Enable uPlot's built-in cursor sync when requested so that
@@ -124,10 +110,9 @@ export default function TooltipPlugin({
 		// Lock uPlot's internal cursor when the tooltip is pinned so
 		// subsequent mouse moves do not move the crosshair.
 		function updateCursorLock(): void {
-			const plot = getPlot(controller);
-			if (plot) {
+			if (controller.plot) {
 				// @ts-ignore uPlot cursor lock is not working as expected
-				plot.cursor._lock = controller.pinned;
+				controller.plot.cursor._lock = controller.pinned;
 			}
 		}
 
@@ -157,9 +142,8 @@ export default function TooltipPlugin({
 			const isPinnedBeforeDismiss = controller.pinned;
 			controller.pinned = false;
 			controller.hoverActive = false;
-			const plot = getPlot(controller);
-			if (plot) {
-				plot.setCursor({ left: -10, top: -10 });
+			if (controller.plot) {
+				controller.plot.setCursor({ left: -10, top: -10 });
 			}
 			scheduleRender(isPinnedBeforeDismiss);
 		}
@@ -167,12 +151,11 @@ export default function TooltipPlugin({
 		// Build the React node to be rendered inside the tooltip by
 		// delegating to the caller-provided `render` function.
 		function createTooltipContents(): React.ReactNode {
-			const plot = getPlot(controller);
-			if (!controller.hoverActive || !plot) {
+			if (!controller.hoverActive || !controller.plot) {
 				return null;
 			}
 			return renderRef.current({
-				uPlotInstance: plot,
+				uPlotInstance: controller.plot,
 				dataIndexes: controller.seriesIndexes,
 				seriesIndex: controller.focusedSeriesIndex,
 				isPinned: controller.pinned,
@@ -257,13 +240,9 @@ export default function TooltipPlugin({
 
 		// When pinning is enabled, a click on the plot overlay while
 		// hovering converts the transient tooltip into a pinned one.
-		// Uses getPlot(controller) to avoid closing over u (plot), which
-		// would retain the plot and detached canvases across unmounts.
-		const handleUPlotOverClick = (event: MouseEvent): void => {
-			const plot = getPlot(controller);
+		const handleUPlotOverClick = (u: uPlot, event: MouseEvent): void => {
 			if (
-				plot &&
-				event.target === plot.over &&
+				event.target === u.over &&
 				controller.hoverActive &&
 				!controller.pinned &&
 				controller.focusedSeriesIndex != null
@@ -281,9 +260,10 @@ export default function TooltipPlugin({
 		// on the controller and optionally attach the pinning handler.
 		const handleInit = (u: uPlot): void => {
 			controller.plot = u;
-			updateState({ hasPlot: true });
+			updateState({ plot: u });
 			if (canPinTooltip) {
-				overClickHandler = handleUPlotOverClick;
+				overClickHandler = (event: MouseEvent): void =>
+					handleUPlotOverClick(u, event);
 				u.over.addEventListener('click', overClickHandler);
 			}
 		};
@@ -319,6 +299,7 @@ export default function TooltipPlugin({
 		const handleSetCursor = createSetCursorHandler(ctx);
 
 		handleWindowResize();
+
 		const removeReadyHook = config.addHook('ready', (): void =>
 			updatePlotVisibility(controller),
 		);
@@ -344,20 +325,16 @@ export default function TooltipPlugin({
 			removeSetSeriesHook();
 			removeSetLegendHook();
 			removeSetCursorHook();
-			if (overClickHandler) {
-				const plot = getPlot(controller);
-				if (plot) {
-					plot.over.removeEventListener('click', overClickHandler);
-				}
+			if (controller.plot && overClickHandler) {
+				controller.plot.over.removeEventListener('click', overClickHandler);
 				overClickHandler = null;
 			}
-			clearPlotReferences();
 		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [config]);
 
 	useLayoutEffect((): void => {
-		if (!hasPlot || !layoutRef.current) {
+		if (!plot || !layoutRef.current) {
 			return;
 		}
 		const layout = layoutRef.current;
@@ -372,9 +349,9 @@ export default function TooltipPlugin({
 			layout.width = 0;
 			layout.height = 0;
 		}
-	}, [isHovering, hasPlot]);
+	}, [isHovering, plot]);
 
-	if (!hasPlot) {
+	if (!plot) {
 		return null;
 	}
 

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/tooltipController.ts

@@ -10,11 +10,6 @@ import {
 
 const WINDOW_OFFSET = 16;
 
-/** Get the plot instance from the controller; returns null if never set or cleared. */
-export function getPlot(controller: TooltipControllerState): uPlot | null {
-	return controller.plot ?? null;
-}
-
 export function createInitialControllerState(): TooltipControllerState {
 	return {
 		plot: null,
@@ -51,13 +46,12 @@ export function updateWindowSize(controller: TooltipControllerState): void {
  * This is used to decide if a synced tooltip should be shown at all.
  */
 export function updatePlotVisibility(controller: TooltipControllerState): void {
-	const plot = getPlot(controller);
-	if (!plot) {
+	if (!controller.plot) {
 		controller.plotWithinViewport = false;
 		return;
 	}
 	controller.plotWithinViewport = isPlotInViewport(
-		plot.rect,
+		controller.plot.rect,
 		controller.windowWidth,
 		controller.windowHeight,
 	);
@@ -72,11 +66,10 @@ export function isScrollEventInPlot(
 	event: Event,
 	controller: TooltipControllerState,
 ): boolean {
-	const plot = getPlot(controller);
 	return (
 		event.target instanceof Node &&
-		plot !== null &&
-		event.target.contains(plot.root)
+		controller.plot !== null &&
+		event.target.contains(controller.plot.root)
 	);
 }
 
@@ -172,12 +165,11 @@ export function createSetLegendHandler(
 ): (u: uPlot) => void {
 	return (u: uPlot): void => {
 		const { controller } = ctx;
-		const plot = getPlot(controller);
-		if (!plot?.cursor?.idxs) {
+		if (!controller.plot?.cursor?.idxs) {
 			return;
 		}
 
-		const newSeriesIndexes = plot.cursor.idxs.slice();
+		const newSeriesIndexes = controller.plot.cursor.idxs.slice();
 		const isAnySeriesActive = newSeriesIndexes.some((v, i) => i > 0 && v != null);
 
 		const previousCursorDrivenBySync = controller.cursorDrivenBySync;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -18,8 +18,7 @@ export enum DashboardCursorSync {
 }
 
 export interface TooltipViewState {
-	/** Whether a plot instance exists; plot reference is in controller, not state. */
-	hasPlot?: boolean;
+	plot?: uPlot | null;
 	style: Partial<CSSProperties>;
 	isHovering: boolean;
 	isPinned: boolean;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -123,7 +123,7 @@ export function createInitialViewState(): TooltipViewState {
 		isHovering: false,
 		isPinned: false,
 		contents: null,
-		hasPlot: false,
+		plot: null,
 		dismiss: (): void => {},
 	};
 }

tests/integration/conftest.py

@@ -15,6 +15,7 @@ pytest_plugins = [
     "fixtures.logs",
     "fixtures.traces",
     "fixtures.metrics",
+    "fixtures.meter",
     "fixtures.driver",
     "fixtures.idp",
     "fixtures.idputils",

tests/integration/fixtures/meter.py

@@ -0,0 +1,121 @@
+import hashlib
+import json
+from datetime import datetime, timedelta
+from typing import Any, Callable, Generator, List
+
+import numpy as np
+import pytest
+
+from fixtures import types
+
+
+class MeterSample:
+    temporality: str
+    metric_name: str
+    description: str
+    unit: str
+    type: str
+    is_monotonic: bool
+    labels: str
+    fingerprint: np.uint64
+    unix_milli: np.int64
+    value: np.float64
+
+    def __init__(
+        self,
+        metric_name: str,
+        labels: dict[str, str],
+        timestamp: datetime,
+        value: float,
+        temporality: str = "Delta",
+        description: str = "",
+        unit: str = "",
+        type_: str = "Sum",
+        is_monotonic: bool = True,
+    ) -> None:
+        self.temporality = temporality
+        self.metric_name = metric_name
+        self.description = description
+        self.unit = unit
+        self.type = type_
+        self.is_monotonic = is_monotonic
+        self.labels = json.dumps(labels, separators=(",", ":"))
+        self.unix_milli = np.int64(int(timestamp.timestamp() * 1e3))
+        self.value = np.float64(value)
+
+        fingerprint_str = metric_name + self.labels
+        self.fingerprint = np.uint64(
+            int(hashlib.md5(fingerprint_str.encode()).hexdigest()[:16], 16)
+        )
+
+    def to_samples_row(self) -> list:
+        return [
+            self.temporality,
+            self.metric_name,
+            self.description,
+            self.unit,
+            self.type,
+            self.is_monotonic,
+            self.labels,
+            self.fingerprint,
+            self.unix_milli,
+            self.value,
+        ]
+
+
+def make_meter_samples(
+    metric_name: str,
+    labels: dict[str, str],
+    now: datetime,
+    count: int = 60,
+    base_value: float = 100.0,
+    **kwargs,
+) -> List[MeterSample]:
+    samples = []
+    for i in range(count):
+        ts = now - timedelta(minutes=count - i)
+        samples.append(
+            MeterSample(
+                metric_name=metric_name,
+                labels=labels,
+                timestamp=ts,
+                value=base_value + i,
+                **kwargs,
+            )
+        )
+    return samples
+
+
+@pytest.fixture(name="insert_meter_samples", scope="function")
+def insert_meter_samples(
+    clickhouse: types.TestContainerClickhouse,
+) -> Generator[Callable[[List[MeterSample]], None], Any, None]:
+    def _insert_meter_samples(samples: List[MeterSample]) -> None:
+        if len(samples) == 0:
+            return
+
+        clickhouse.conn.insert(
+            database="signoz_meter",
+            table="distributed_samples",
+            column_names=[
+                "temporality",
+                "metric_name",
+                "description",
+                "unit",
+                "type",
+                "is_monotonic",
+                "labels",
+                "fingerprint",
+                "unix_milli",
+                "value",
+            ],
+            data=[s.to_samples_row() for s in samples],
+        )
+
+    yield _insert_meter_samples
+
+    cluster = clickhouse.env["SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_CLUSTER"]
+    for table in ["samples", "samples_agg_1d"]:
+        clickhouse.conn.query(
+            f"TRUNCATE TABLE signoz_meter.{table} ON CLUSTER '{cluster}' SYNC"
+        )

tests/integration/fixtures/querier.py

@@ -54,6 +54,7 @@ def build_builder_query(
     *,
     comparisonSpaceAggregationParam: Optional[Dict] = None,
     temporality: Optional[str] = None,
+    source: Optional[str] = None,
     step_interval: int = DEFAULT_STEP_INTERVAL,
     group_by: Optional[List[str]] = None,
     filter_expression: Optional[str] = None,
@@ -73,10 +74,14 @@ def build_builder_query(
         "stepInterval": step_interval,
         "disabled": disabled,
     }
+    if source:
+        spec["source"] = source
     if temporality:
         spec["aggregations"][0]["temporality"] = temporality
     if comparisonSpaceAggregationParam:
-        spec["aggregations"][0]["comparisonSpaceAggregationParam"] = comparisonSpaceAggregationParam
+        spec["aggregations"][0][
+            "comparisonSpaceAggregationParam"
+        ] = comparisonSpaceAggregationParam
     if group_by:
         spec["groupBy"] = [
             {

tests/integration/src/querier/08_metrics_histogram.py

@@ -2,7 +2,6 @@
 Look at the histogram_data_1h.jsonl file for the relevant data
 """
 
-import random
 from datetime import datetime, timedelta, timezone
 from http import HTTPStatus
 from typing import Callable, List
@@ -22,6 +21,7 @@ from fixtures.utils import get_testdata_file_path
 
 FILE = get_testdata_file_path("histogram_data_1h.jsonl")
 
+
 @pytest.mark.parametrize(
     "threshold, operator, first_value, last_value",
     [
@@ -29,12 +29,22 @@ FILE = get_testdata_file_path("histogram_data_1h.jsonl")
         (100, "<=", 1.1, 6.9),
         (7500, "<=", 16.75, 74.75),
         (8000, "<=", 17, 75),
-        (80000, "<=", 17, 75), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            "<=",
+            17,
+            75,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
         (1000, ">", 7, 7),
         (100, ">", 16.9, 69.1),
         (7500, ">", 1.25, 1.25),
         (8000, ">", 1, 1),
-        (80000, ">", 1, 1), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            ">",
+            1,
+            1,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
     ],
 )
 def test_histogram_count_for_one_endpoint(
@@ -65,10 +75,7 @@ def test_histogram_count_for_one_endpoint(
         metric_name,
         "increase",
         "count",
-        comparisonSpaceAggregationParam={
-            "threshold": threshold,
-            "operator": operator
-        },
+        comparisonSpaceAggregationParam={"threshold": threshold, "operator": operator},
         filter_expression='endpoint = "/health"',
     )
 
@@ -81,6 +88,7 @@ def test_histogram_count_for_one_endpoint(
     assert result_values[0]["value"] == first_value
     assert result_values[-1]["value"] == last_value
 
+
 @pytest.mark.parametrize(
     "threshold, operator, first_value, last_value",
     [
@@ -88,12 +96,22 @@ def test_histogram_count_for_one_endpoint(
         (100, "<=", 2.2, 13.8),
         (7500, "<=", 33.5, 149.5),
         (8000, "<=", 34, 150),
-        (80000, "<=", 34, 150), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            "<=",
+            34,
+            150,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
         (1000, ">", 14, 14),
         (100, ">", 33.8, 138.2),
         (7500, ">", 2.5, 2.5),
         (8000, ">", 2, 2),
-        (80000, ">", 2, 2), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            ">",
+            2,
+            2,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
     ],
 )
 def test_histogram_count_for_one_service(
@@ -124,10 +142,7 @@ def test_histogram_count_for_one_service(
         metric_name,
         "increase",
         "count",
-        comparisonSpaceAggregationParam={
-            "threshold": threshold,
-            "operator": operator
-        },
+        comparisonSpaceAggregationParam={"threshold": threshold, "operator": operator},
         filter_expression='service = "api"',
     )
 
@@ -140,6 +155,7 @@ def test_histogram_count_for_one_service(
     assert result_values[0]["value"] == first_value
     assert result_values[-1]["value"] == last_value
 
+
 @pytest.mark.parametrize(
     "threshold, operator, zeroth_value, first_value, last_value",
     [
@@ -147,12 +163,24 @@ def test_histogram_count_for_one_service(
         (100, "<=", 1234.5, 1.1, 6.9),
         (7500, "<=", 12345, 16.75, 74.75),
         (8000, "<=", 12345, 17, 75),
-        (80000, "<=", 12345, 17, 75), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            "<=",
+            12345,
+            17,
+            75,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
         (1000, ">", 0, 7, 7),
         (100, ">", 11110.5, 16.9, 69.1),
         (7500, ">", 0, 1.25, 1.25),
         (8000, ">", 0, 1, 1),
-        (80000, ">", 0, 1, 1), ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
+        (
+            80000,
+            ">",
+            0,
+            1,
+            1,
+        ),  ## cuz we don't know the max value in infinity, all numbers beyond the biggest finite bucket will report the same answer
     ],
 )
 def test_histogram_count_for_delta_service(
@@ -184,10 +212,7 @@ def test_histogram_count_for_delta_service(
         metric_name,
         "increase",
         "count",
-        comparisonSpaceAggregationParam={
-            "threshold": threshold,
-            "operator": operator
-        },
+        comparisonSpaceAggregationParam={"threshold": threshold, "operator": operator},
         filter_expression='service = "web"',
     )
 
@@ -196,11 +221,16 @@ def test_histogram_count_for_delta_service(
 
     data = response.json()
     result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
-    assert len(result_values) == 60 ## in delta, the value at 10:01 will also be reported
+    assert (
+        len(result_values) == 60
+    )  ## in delta, the value at 10:01 will also be reported
     assert result_values[0]["value"] == zeroth_value
-    assert result_values[1]["value"] == first_value ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
+    assert (
+        result_values[1]["value"] == first_value
+    )  ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
     assert result_values[-1]["value"] == last_value
 
+
 @pytest.mark.parametrize(
     "threshold, operator, zeroth_value, first_value, last_value",
     [
@@ -245,10 +275,7 @@ def test_histogram_count_for_all_services(
         metric_name,
         "increase",
         "count",
-        comparisonSpaceAggregationParam={
-            "threshold": threshold,
-            "operator": operator
-        },
+        comparisonSpaceAggregationParam={"threshold": threshold, "operator": operator},
         ## no services filter, this tests for multitemporality handling as well
     )
 
@@ -257,11 +284,16 @@ def test_histogram_count_for_all_services(
 
     data = response.json()
     result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
-    assert len(result_values) == 60 ## in delta, the value at 10:01 will also be reported
+    assert (
+        len(result_values) == 60
+    )  ## in delta, the value at 10:01 will also be reported
     assert result_values[0]["value"] == zeroth_value
-    assert result_values[1]["value"] == first_value ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
+    assert (
+        result_values[1]["value"] == first_value
+    )  ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
     assert result_values[-1]["value"] == last_value
 
+
 def test_histogram_count_no_param(
     signoz: types.SigNoz,
     create_user_admin: None,  # pylint: disable=unused-argument
@@ -308,8 +340,26 @@ def test_histogram_count_no_param(
         set(le_buckets.keys()) == expected_buckets
     ), f"Expected endpoints {expected_buckets}, got {set(le_buckets.keys())}"
 
-    first_values = {"1000": 33, "1500": 36, "2000": 39, "4000": 42, "5000": 45, "6000": 48, "8000": 51, "+Inf": 54}
-    last_values = {"1000": 207, "1500": 210, "2000": 213, "4000": 216, "5000": 219, "6000": 222, "8000": 225, "+Inf": 228}
+    first_values = {
+        "1000": 33,
+        "1500": 36,
+        "2000": 39,
+        "4000": 42,
+        "5000": 45,
+        "6000": 48,
+        "8000": 51,
+        "+Inf": 54,
+    }
+    last_values = {
+        "1000": 207,
+        "1500": 210,
+        "2000": 213,
+        "4000": 216,
+        "5000": 219,
+        "6000": 222,
+        "8000": 225,
+        "+Inf": 228,
+    }
     for le, values in le_buckets.items():
         assert len(values) == 60
 
@@ -318,5 +368,7 @@ def test_histogram_count_no_param(
                 v["value"] >= 0
             ), f"Count for {le} should not be negative: {v['value']}"
         assert values[0]["value"] == 12345
-        assert values[1]["value"] == first_values[le] ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
-        assert values[-1]["value"] == last_values[le] 
+        assert (
+            values[1]["value"] == first_values[le]
+        )  ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
+        assert values[-1]["value"] == last_values[le]

tests/integration/src/querier/09_metrics_gauge.py

@@ -1,4 +1,3 @@
-import random
 from datetime import datetime, timedelta, timezone
 from http import HTTPStatus
 from typing import Callable, List
@@ -10,7 +9,6 @@ from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
 from fixtures.metrics import Metrics
 from fixtures.querier import (
     build_builder_query,
-    get_all_series,
     get_series_values,
     make_query_request,
 )
@@ -18,6 +16,7 @@ from fixtures.utils import get_testdata_file_path
 
 FILE = get_testdata_file_path("gauge_data_1h.jsonl")
 
+
 @pytest.mark.parametrize(
     "time_agg, space_agg, service, num_elements, start_val, first_val, twentieth_min_val, after_twentieth_min_val",
     [
@@ -50,7 +49,7 @@ def test_for_one_service(
     start_val: float,
     first_val: float,
     twentieth_min_val: float,
-    after_twentieth_min_val: float ## web service has a gap of 10 mins after the 20th minute
+    after_twentieth_min_val: float,  ## web service has a gap of 10 mins after the 20th minute
 ) -> None:
     now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
     start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
@@ -84,6 +83,7 @@ def test_for_one_service(
     assert result_values[19]["value"] == twentieth_min_val
     assert result_values[20]["value"] == after_twentieth_min_val
 
+
 @pytest.mark.parametrize(
     "time_agg, space_agg, start_val, first_val, twentieth_min_val, twenty_first_min_val, thirty_first_min_val",
     [
@@ -105,8 +105,8 @@ def test_for_multiple_aggregations(
     start_val: float,
     first_val: float,
     twentieth_min_val: float,
-    twenty_first_min_val: float, ## web service has a gap of 10 mins after the 20th minute
-    thirty_first_min_val: float
+    twenty_first_min_val: float,  ## web service has a gap of 10 mins after the 20th minute
+    thirty_first_min_val: float,
 ) -> None:
     now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
     start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
@@ -138,4 +138,4 @@ def test_for_multiple_aggregations(
     assert result_values[1]["value"] == first_val
     assert result_values[19]["value"] == twentieth_min_val
     assert result_values[20]["value"] == twenty_first_min_val
-    assert result_values[30]["value"] == thirty_first_min_val
+    assert result_values[30]["value"] == thirty_first_min_val

tests/integration/src/querier/10_metrics_rate_delta_counter.py

@@ -53,7 +53,9 @@ def test_rate_with_steady_values_and_reset(
 
     data = response.json()
     result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
-    assert len(result_values) == 60 ## total 61 minutes covered, and 30th minute is missing
+    assert (
+        len(result_values) == 60
+    )  ## total 61 minutes covered, and 30th minute is missing
     assert (
         result_values[30]["value"] == 0.0333
     )  # reset happens and [30] is for 31st minute. 2/60 cuz delta divides by step interval
@@ -61,9 +63,7 @@ def test_rate_with_steady_values_and_reset(
         result_values[31]["value"] == 0.133
     )  # i.e 8/60 i.e 31st to 32nd minute changes
     count_of_steady_rate = sum(1 for v in result_values if v["value"] == 0.0833)
-    assert (
-        count_of_steady_rate == 58
-    )  # 1 reset + 1 high rate are excluded
+    assert count_of_steady_rate == 58  # 1 reset + 1 high rate are excluded
     # All rates should be non-negative (stale periods = 0 rate)
     for v in result_values:
         assert v["value"] >= 0, f"Rate should not be negative: {v['value']}"

tests/integration/src/querier/11_cost_meter.py

@@ -0,0 +1,109 @@
+from datetime import datetime, timedelta, timezone
+from http import HTTPStatus
+from typing import Callable, List
+
+import requests
+
+from fixtures import types
+from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
+from fixtures.meter import MeterSample, make_meter_samples
+from fixtures.querier import (
+    build_builder_query,
+    get_series_values,
+    make_query_request,
+)
+
+
+def test_query_range_cost_meter(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_meter_samples: Callable[[List[MeterSample]], None],
+) -> None:
+    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+
+    metric_name = "signoz_cost_test_query_range"
+    labels = {"service": "test-service", "environment": "production"}
+
+    samples = make_meter_samples(
+        metric_name,
+        labels,
+        now,
+        count=60,
+        base_value=100.0,
+        temporality="Delta",
+        type_="Sum",
+        is_monotonic=True,
+    )
+    insert_meter_samples(samples)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query = build_builder_query(
+        "A",
+        metric_name,
+        "sum",
+        "sum",
+        source="meter",
+        temporality="delta",
+    )
+
+    response = make_query_request(signoz, token, start_ms, end_ms, [query])
+    assert response.status_code == HTTPStatus.OK
+
+    data = response.json()
+    result_values = get_series_values(data, "A")
+    assert len(result_values) > 0, f"Expected non-empty results, got: {data}"
+
+    for val in result_values:
+        assert val["value"] >= 0, f"Expected non-negative value, got: {val['value']}"
+
+
+def test_list_meter_metric_names(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_meter_samples: Callable[[List[MeterSample]], None],
+) -> None:
+    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+
+    metric_name = "cost_test_list_metrics"
+    labels = {"service": "billing-service"}
+
+    samples = make_meter_samples(
+        metric_name,
+        labels,
+        now,
+        count=5,
+        base_value=50.0,
+        temporality="Delta",
+        type_="Sum",
+        is_monotonic=True,
+    )
+    insert_meter_samples(samples)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    response = requests.get(
+        signoz.self.host_configs["8080"].get("/api/v2/metrics"),
+        params={
+            "start": start_ms,
+            "end": end_ms,
+            "limit": 100,
+            "searchText": "cost_test_list",
+        },
+        headers={"authorization": f"Bearer {token}"},
+        timeout=30,
+    )
+
+    assert response.status_code == HTTPStatus.OK
+
+    data = response.json()
+    metrics = data.get("data", {}).get("metrics", [])
+    metric_names = [m["metricName"] for m in metrics]
+    assert (
+        metric_name in metric_names
+    ), f"Expected {metric_name} in metric names, got: {metric_names}"