chore: authz helpers

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -50,7 +50,6 @@ export interface HostListResponse {
 		total: number;
 		sentAnyHostMetricsData: boolean;
 		isSendingK8SAgentMetrics: boolean;
-		endTimeBeforeRetention: boolean;
 	};
 }
 

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

@@ -0,0 +1,332 @@
+import { ReactElement } from 'react-markdown/lib/react-markdown';
+import { ENVIRONMENT } from 'constants/env';
+import { BrandedPermission, 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 || '';
+
+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 () => {
+		const permission = buildPermission('read', 'dashboard:*');
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission]: 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(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(ctx.status(200), ctx.json({}));
+			}),
+		);
+
+		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(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(ctx.status(200), ctx.json({}));
+			}),
+		);
+
+		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(`${BASE_URL}/api/v1/permissions/check`, (_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(`${BASE_URL}/api/v1/permissions/check`, (_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(`${BASE_URL}/api/v1/permissions/check`, (_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 () => {
+		const permission = buildPermission('update', 'dashboard:123');
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission]: 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 () => {
+		const permission = buildPermission('update', 'dashboard:123');
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission]: 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(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(ctx.status(200), ctx.json(null));
+			}),
+		);
+
+		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(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission]: false,
+					}),
+				);
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="update"
+				object="dashboard:123"
+				fallbackOnNoPermissions={NoPermissionFallbackWithSuggestions}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByText(/Access denied. Required permission:/),
+			).toBeInTheDocument();
+		});
+
+		expect(screen.getByText(new RegExp(permission))).toBeInTheDocument();
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should handle different relation and object combinations', async () => {
+		const permission1 = buildPermission('read', 'dashboard:*');
+		const permission2 = buildPermission('delete', 'dashboard:456');
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (req, res, ctx) => {
+				const body = req.body as {
+					permissions: Array<{ relation: string; object: string }>;
+				};
+				const perm = body.permissions[0];
+				const permKey = `${perm.relation}/${perm.object}`;
+
+				if (permKey === permission1) {
+					return res(
+						ctx.status(200),
+						ctx.json({
+							[permission1]: true,
+						}),
+					);
+				}
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission2]: true,
+					}),
+				);
+			}),
+		);
+
+		const { rerender } = render(
+			<GuardAuthZ relation="read" object="dashboard:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+
+		rerender(
+			<GuardAuthZ relation="delete" object="dashboard:456">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/GuardAuthZ/GuardAuthZ.tsx

@@ -0,0 +1,50 @@
+import { ReactElement } from 'react';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import {
+	AuthZObject,
+	AuthZRelation,
+	BrandedPermission,
+	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/GuardAuthZ/createGuardedRoute.styles.scss

@@ -0,0 +1,46 @@
+.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(--bg-vanilla-100);
+		line-height: 18px;
+	}
+
+	p {
+		font-size: 14px;
+		color: var(--bg-vanilla-400);
+		line-height: 18px;
+
+		pre {
+			display: flex;
+			align-items: center;
+			background-color: var(--bg-slate-400);
+			cursor: pointer;
+
+			svg {
+				margin-left: 2px;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,489 @@
+import { ReactElement } from 'react';
+import type { RouteComponentProps } from 'react-router-dom';
+import { ENVIRONMENT } from 'constants/env';
+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 { createGuardedRoute } from './createGuardedRoute';
+
+const BASE_URL = ENVIRONMENT.baseURL || '';
+
+describe('createGuardedRoute', () => {
+	const TestComponent = ({ testProp }: { testProp: string }): ReactElement => (
+		<div>Test Component: {testProp}</div>
+	);
+
+	it('should render component when permission is granted', async () => {
+		const permission = buildPermission('read', 'dashboard:*');
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission]: 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 () => {
+		const permission = buildPermission('read', 'dashboard:123');
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission]: 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 () => {
+		const permission = buildPermission('update', 'dashboard:123:456');
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission]: true,
+					}),
+				);
+			}),
+		);
+
+		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 () => {
+		const permission = buildPermission('read', 'dashboard:{id}');
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission]: 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(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(ctx.status(200), ctx.json({}));
+			}),
+		);
+
+		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(`${BASE_URL}/api/v1/permissions/check`, (_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 () => {
+		const permission = buildPermission('update', 'dashboard:123');
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission]: 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(permission, { exact: false })).toBeInTheDocument();
+		expect(
+			screen.queryByText('Test Component: test-value'),
+		).not.toBeInTheDocument();
+	});
+
+	it('should pass all props to wrapped component', async () => {
+		const permission = buildPermission('read', 'dashboard:*');
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission]: 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 () => {
+		const permission1 = buildPermission('read', 'dashboard:123');
+		const permission2 = buildPermission('read', 'dashboard:456');
+
+		let requestCount = 0;
+		const requestedPermissions: string[] = [];
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (req, res, ctx) => {
+				requestCount++;
+				const body = req.body as {
+					permissions: Array<{ relation: string; object: string }>;
+				};
+				const perm = body.permissions[0];
+				requestedPermissions.push(`${perm.relation}/${perm.object}`);
+
+				if (perm.object === 'dashboard:123') {
+					return res(
+						ctx.status(200),
+						ctx.json({
+							[permission1]: true,
+						}),
+					);
+				}
+
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission2]: 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(requestedPermissions).toContain('read/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(requestedPermissions).toContain('read/dashboard:456');
+	});
+
+	it('should handle different relation types', async () => {
+		const permission = buildPermission('delete', 'dashboard:789');
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission]: 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/GuardAuthZ/createGuardedRoute.tsx

@@ -0,0 +1,79 @@
+import { ComponentType, ReactElement, useMemo } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { toast } from '@signozhq/sonner';
+import {
+	AuthZObject,
+	AuthZRelation,
+	BrandedPermission,
+} from 'hooks/useAuthZ/utils';
+import { Copy } from 'lucide-react';
+
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
+import ErrorBoundaryFallback from '../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import AppLoading from '../AppLoading/AppLoading';
+import { GuardAuthZ } from './GuardAuthZ';
+
+import './createGuardedRoute.styles.scss';
+
+const onErrorFallback = (): JSX.Element => <ErrorBoundaryFallback />;
+
+function OnNoPermissionsFallback(response: {
+	requiredPermissionName: BrandedPermission;
+}): ReactElement {
+	const { copyToClipboard } = useCopyToClipboard();
+	const onClickToCopy = (): void => {
+		copyToClipboard(response.requiredPermissionName, 'required-permission');
+
+		toast.success('Permission copied to clipboard');
+	};
+
+	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 />
+					<pre onClick={onClickToCopy}>
+						{response.requiredPermissionName} <Copy size={12} />
+					</pre>
+					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/components/GuardAuthZ/index.ts

@@ -0,0 +1,3 @@
+export { createGuardedRoute } from './createGuardedRoute';
+export type { GuardAuthZProps } from './GuardAuthZ';
+export { GuardAuthZ } from './GuardAuthZ';

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Skeleton,
@@ -14,93 +14,12 @@ import { InfraMonitoringEvents } from 'constants/events';
 
 import HostsEmptyOrIncorrectMetrics from './HostsEmptyOrIncorrectMetrics';
 import {
-	EmptyOrLoadingViewProps,
 	formatDataForTable,
 	getHostsListColumns,
 	HostRowData,
 	HostsListTableProps,
 } from './utils';
 
-function EmptyOrLoadingView(
-	viewState: EmptyOrLoadingViewProps,
-): React.ReactNode {
-	const { isError, errorMessage } = viewState;
-	if (isError) {
-		return <Typography>{errorMessage || 'Something went wrong'}</Typography>;
-	}
-	if (viewState.showHostsEmptyState) {
-		return (
-			<HostsEmptyOrIncorrectMetrics
-				noData={!viewState.sentAnyHostMetricsData}
-				incorrectData={viewState.isSendingIncorrectK8SAgentMetrics}
-			/>
-		);
-	}
-	if (viewState.showEndTimeBeforeRetentionMessage) {
-		return (
-			<div className="hosts-empty-state-container">
-				<div className="hosts-empty-state-container-content">
-					<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
-					<div className="no-hosts-message">
-						<Typography.Title level={5} className="no-hosts-message-title">
-							Queried time range is before earliest host metrics
-						</Typography.Title>
-						<Typography.Text className="no-hosts-message-text">
-							Your requested end time is earlier than the earliest detected time of
-							host metrics data, please adjust your end time.
-						</Typography.Text>
-					</div>
-				</div>
-			</div>
-		);
-	}
-	if (viewState.showNoRecordsInSelectedTimeRangeMessage) {
-		return (
-			<div className="no-filtered-hosts-message-container">
-				<div className="no-filtered-hosts-message-content">
-					<img
-						src="/Icons/emptyState.svg"
-						alt="thinking-emoji"
-						className="empty-state-svg"
-					/>
-					<Typography.Title level={5} className="no-filtered-hosts-title">
-						No host metrics found
-					</Typography.Title>
-					<Typography.Text className="no-filtered-hosts-message">
-						No host metrics in the selected time range and filters. Please adjust your
-						time range or filters.
-					</Typography.Text>
-				</div>
-			</div>
-		);
-	}
-	if (viewState.showTableLoadingState) {
-		return (
-			<div className="hosts-list-loading-state">
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-			</div>
-		);
-	}
-	return null;
-}
-
 export default function HostsListTable({
 	isLoading,
 	isFetching,
@@ -127,11 +46,6 @@ export default function HostsListTable({
 		[data],
 	);
 
-	const endTimeBeforeRetention = useMemo(
-		() => data?.payload?.data?.endTimeBeforeRetention || false,
-		[data],
-	);
-
 	const formattedHostMetricsData = useMemo(
 		() => formatDataForTable(hostMetricsData),
 		[hostMetricsData],
@@ -170,6 +84,12 @@ export default function HostsListTable({
 		});
 	};
 
+	const showNoFilteredHostsMessage =
+		!isFetching &&
+		!isLoading &&
+		formattedHostMetricsData.length === 0 &&
+		filters.items.length > 0;
+
 	const showHostsEmptyState =
 		!isFetching &&
 		!isLoading &&
@@ -177,36 +97,63 @@ export default function HostsListTable({
 		(!sentAnyHostMetricsData || isSendingIncorrectK8SAgentMetrics) &&
 		!filters.items.length;
 
-	const showEndTimeBeforeRetentionMessage =
-		!isFetching &&
-		!isLoading &&
-		formattedHostMetricsData.length === 0 &&
-		endTimeBeforeRetention &&
-		!filters.items.length;
-
-	const showNoRecordsInSelectedTimeRangeMessage =
-		!isFetching &&
-		!isLoading &&
-		formattedHostMetricsData.length === 0 &&
-		!showEndTimeBeforeRetentionMessage &&
-		!showHostsEmptyState;
-
 	const showTableLoadingState =
 		(isLoading || isFetching) && formattedHostMetricsData.length === 0;
 
-	const emptyOrLoadingView = EmptyOrLoadingView({
-		isError,
-		errorMessage: data?.error ?? '',
-		showHostsEmptyState,
-		sentAnyHostMetricsData,
-		isSendingIncorrectK8SAgentMetrics,
-		showEndTimeBeforeRetentionMessage,
-		showNoRecordsInSelectedTimeRangeMessage,
-		showTableLoadingState,
-	});
+	if (isError) {
+		return <Typography>{data?.error || 'Something went wrong'}</Typography>;
+	}
 
-	if (emptyOrLoadingView) {
-		return <>{emptyOrLoadingView}</>;
+	if (showHostsEmptyState) {
+		return (
+			<HostsEmptyOrIncorrectMetrics
+				noData={!sentAnyHostMetricsData}
+				incorrectData={isSendingIncorrectK8SAgentMetrics}
+			/>
+		);
+	}
+
+	if (showNoFilteredHostsMessage) {
+		return (
+			<div className="no-filtered-hosts-message-container">
+				<div className="no-filtered-hosts-message-content">
+					<img
+						src="/Icons/emptyState.svg"
+						alt="thinking-emoji"
+						className="empty-state-svg"
+					/>
+
+					<Typography.Text className="no-filtered-hosts-message">
+						This query had no results. Edit your query and try again!
+					</Typography.Text>
+				</div>
+			</div>
+		);
+	}
+
+	if (showTableLoadingState) {
+		return (
+			<div className="hosts-list-loading-state">
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+			</div>
+		);
 	}
 
 	return (

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

@@ -1,16 +1,12 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { render, screen } from '@testing-library/react';
-import { HostData, HostListResponse } from 'api/infraMonitoring/getHostLists';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import HostsListTable from '../HostsListTable';
-import { HostsListTableProps } from '../utils';
 
 const EMPTY_STATE_CONTAINER_CLASS = '.hosts-empty-state-container';
 
-const createMockHost = (): HostData =>
-	({
+describe('HostsListTable', () => {
+	const mockHost = {
 		hostName: 'test-host-1',
 		active: true,
 		cpu: 0.75,
@@ -18,46 +14,20 @@ const createMockHost = (): HostData =>
 		wait: 0.03,
 		load15: 1.5,
 		os: 'linux',
-		cpuTimeSeries: { labels: {}, labelsArray: [], values: [] },
-		memoryTimeSeries: { labels: {}, labelsArray: [], values: [] },
-		waitTimeSeries: { labels: {}, labelsArray: [], values: [] },
-		load15TimeSeries: { labels: {}, labelsArray: [], values: [] },
-	} as HostData);
+	};
 
-const createMockTableData = (
-	overrides: Partial<HostListResponse['data']> = {},
-): SuccessResponse<HostListResponse> => {
-	const mockHost = createMockHost();
-	return {
-		statusCode: 200,
-		message: 'Success',
-		error: null,
+	const mockTableData = {
 		payload: {
-			status: 'success',
 			data: {
-				type: 'list',
-				records: [mockHost],
-				groups: null,
-				total: 1,
-				sentAnyHostMetricsData: true,
-				isSendingK8SAgentMetrics: false,
-				endTimeBeforeRetention: false,
-				...overrides,
+				hosts: [mockHost],
 			},
 		},
 	};
-};
-
-describe('HostsListTable', () => {
-	const mockHost = createMockHost();
-	const mockTableData = createMockTableData();
-
 	const mockOnHostClick = jest.fn();
 	const mockSetCurrentPage = jest.fn();
 	const mockSetOrderBy = jest.fn();
 	const mockSetPageSize = jest.fn();
-
-	const mockProps: HostsListTableProps = {
+	const mockProps = {
 		isLoading: false,
 		isError: false,
 		isFetching: false,
@@ -73,7 +43,7 @@ describe('HostsListTable', () => {
 		pageSize: 10,
 		setOrderBy: mockSetOrderBy,
 		setPageSize: mockSetPageSize,
-	};
+	} as any;
 
 	it('renders loading state if isLoading is true and tableData is empty', () => {
 		const { container } = render(
@@ -81,7 +51,7 @@ describe('HostsListTable', () => {
 				{...mockProps}
 				isLoading
 				hostMetricsData={[]}
-				tableData={createMockTableData({ records: [] })}
+				tableData={{ payload: { data: { hosts: [] } } }}
 			/>,
 		);
 		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
@@ -93,7 +63,7 @@ describe('HostsListTable', () => {
 				{...mockProps}
 				isFetching
 				hostMetricsData={[]}
-				tableData={createMockTableData({ records: [] })}
+				tableData={{ payload: { data: { hosts: [] } } }}
 			/>,
 		);
 		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
@@ -104,56 +74,19 @@ describe('HostsListTable', () => {
 		expect(screen.getByText('Something went wrong')).toBeTruthy();
 	});
 
-	it('renders "Something went wrong" fallback when isError is true and error message is empty', () => {
-		const tableDataWithEmptyError: ErrorResponse = {
-			statusCode: 500,
-			payload: null,
-			error: '',
-			message: null,
-		};
-		render(
-			<HostsListTable
-				{...mockProps}
-				isError
-				hostMetricsData={[]}
-				tableData={tableDataWithEmptyError}
-			/>,
-		);
-		expect(screen.getByText('Something went wrong')).toBeInTheDocument();
-	});
-
-	it('renders custom error message when isError is true and error message is provided', () => {
-		const customErrorMessage = 'Failed to fetch host metrics';
-		const tableDataWithError: ErrorResponse = {
-			statusCode: 500,
-			payload: null,
-			error: customErrorMessage,
-			message: null,
-		};
-		render(
-			<HostsListTable
-				{...mockProps}
-				isError
-				hostMetricsData={[]}
-				tableData={tableDataWithError}
-			/>,
-		);
-		expect(screen.getByText(customErrorMessage)).toBeInTheDocument();
-	});
-
 	it('renders empty state if no hosts are found', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
 				hostMetricsData={[]}
-				tableData={createMockTableData({
-					records: [],
-				})}
+				tableData={{
+					payload: {
+						data: { hosts: [] },
+					},
+				}}
 			/>,
 		);
-		expect(
-			container.querySelector('.no-filtered-hosts-message-container'),
-		).toBeTruthy();
+		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
 	});
 
 	it('renders empty state if sentAnyHostMetricsData is false', () => {
@@ -161,114 +94,58 @@ describe('HostsListTable', () => {
 			<HostsListTable
 				{...mockProps}
 				hostMetricsData={[]}
-				tableData={createMockTableData({
-					sentAnyHostMetricsData: false,
-					records: [],
-				})}
-			/>,
-		);
-		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
-	});
-
-	it('renders empty state if isSendingK8SAgentMetrics is true', () => {
-		const { container } = render(
-			<HostsListTable
-				{...mockProps}
-				hostMetricsData={[]}
-				tableData={createMockTableData({
-					isSendingK8SAgentMetrics: true,
-					records: [],
-				})}
-			/>,
-		);
-		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
-	});
-
-	it('renders end time before retention message when endTimeBeforeRetention is true', () => {
-		const { container } = render(
-			<HostsListTable
-				{...mockProps}
-				hostMetricsData={[]}
-				tableData={createMockTableData({
-					sentAnyHostMetricsData: true,
-					isSendingK8SAgentMetrics: false,
-					endTimeBeforeRetention: true,
-					records: [],
-				})}
-			/>,
-		);
-		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
-		expect(
-			screen.getByText(
-				/Your requested end time is earlier than the earliest detected time of host metrics data, please adjust your end time\./,
-			),
-		).toBeInTheDocument();
-	});
-
-	it('renders no records message when noRecordsInSelectedTimeRangeAndFilters is true', () => {
-		const { container } = render(
-			<HostsListTable
-				{...mockProps}
-				hostMetricsData={[]}
-				tableData={createMockTableData({
-					sentAnyHostMetricsData: true,
-					isSendingK8SAgentMetrics: false,
-					records: [],
-				})}
-			/>,
-		);
-		expect(
-			container.querySelector('.no-filtered-hosts-message-container'),
-		).toBeTruthy();
-		expect(
-			screen.getByText(/No host metrics in the selected time range and filters/),
-		).toBeInTheDocument();
-	});
-
-	it('renders no filtered hosts message when filters are present and no hosts are found', () => {
-		const { container } = render(
-			<HostsListTable
-				{...mockProps}
-				hostMetricsData={[]}
-				filters={{
-					items: [
-						{
-							id: 'host_name',
-							key: {
-								key: 'host_name',
-								dataType: DataTypes.String,
-								type: 'tag',
-								isIndexed: true,
-							},
-							op: '=',
-							value: 'unknown',
+				tableData={{
+					...mockTableData,
+					payload: {
+						...mockTableData.payload,
+						data: {
+							...mockTableData.payload.data,
+							sentAnyHostMetricsData: false,
+							hosts: [],
 						},
-					],
-					op: 'AND',
+					},
 				}}
-				tableData={createMockTableData({
-					sentAnyHostMetricsData: true,
-					isSendingK8SAgentMetrics: false,
-					records: [],
-				})}
 			/>,
 		);
-		expect(container.querySelector('.no-filtered-hosts-message')).toBeTruthy();
-		expect(
-			screen.getByText(
-				/No host metrics in the selected time range and filters\. Please adjust your time range or filters\./,
-			),
-		).toBeInTheDocument();
+		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
+	});
+
+	it('renders empty state if isSendingIncorrectK8SAgentMetrics is true', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				hostMetricsData={[]}
+				tableData={{
+					...mockTableData,
+					payload: {
+						...mockTableData.payload,
+						data: {
+							...mockTableData.payload.data,
+							isSendingIncorrectK8SAgentMetrics: true,
+							hosts: [],
+						},
+					},
+				}}
+			/>,
+		);
+		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
 	});
 
 	it('renders table data', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
-				tableData={createMockTableData({
-					isSendingK8SAgentMetrics: false,
-					sentAnyHostMetricsData: true,
-				})}
+				tableData={{
+					...mockTableData,
+					payload: {
+						...mockTableData.payload,
+						data: {
+							...mockTableData.payload.data,
+							isSendingIncorrectK8SAgentMetrics: false,
+							sentAnyHostMetricsData: true,
+						},
+					},
+				}}
 			/>,
 		);
 		expect(container.querySelector('.hosts-list-table')).toBeTruthy();

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -52,17 +52,6 @@ export interface HostsListTableProps {
 	setPageSize: (pageSize: number) => void;
 }
 
-export interface EmptyOrLoadingViewProps {
-	isError: boolean;
-	errorMessage: string;
-	showHostsEmptyState: boolean;
-	sentAnyHostMetricsData: boolean;
-	isSendingIncorrectK8SAgentMetrics: boolean;
-	showEndTimeBeforeRetentionMessage: boolean;
-	showNoRecordsInSelectedTimeRangeMessage: boolean;
-	showTableLoadingState: boolean;
-}
-
 export const getHostListsQuery = (): HostListPayload => ({
 	filters: {
 		items: [],

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

@@ -0,0 +1,444 @@
+import { ReactElement } from 'react';
+import { renderHook, waitFor } from '@testing-library/react';
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { AllTheProviders } from 'tests/test-utils';
+
+import { useAuthZ } from './useAuthZ';
+import { BrandedPermission, buildPermission } from './utils';
+
+const BASE_URL = ENVIRONMENT.baseURL || '';
+
+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 mockApiResponse = {
+			[permission1]: true,
+			[permission2]: false,
+		};
+
+		const expectedResponse = {
+			[permission1]: {
+				isGranted: true,
+			},
+			[permission2]: {
+				isGranted: false,
+			},
+		};
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(ctx.status(200), ctx.json(mockApiResponse));
+			}),
+		);
+
+		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(`${BASE_URL}/api/v1/permissions/check`, (_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(`${BASE_URL}/api/v1/permissions/check`, (req, res, ctx) => {
+				requestCount++;
+				const body = req.body as {
+					permissions: Array<{ relation: string; object: string }>;
+				};
+
+				if (body.permissions.length === 1) {
+					return res(
+						ctx.status(200),
+						ctx.json({
+							[permission1]: true,
+						}),
+					);
+				}
+
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission1]: true,
+						[permission2]: false,
+						[permission3]: true,
+					}),
+				);
+			}),
+		);
+
+		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(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				requestCount++;
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission1]: true,
+						[permission2]: 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(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
+				return res(ctx.status(200), ctx.json({}));
+			}),
+		);
+
+		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(`${BASE_URL}/api/v1/permissions/check`, async (req, res, ctx) => {
+				receivedPayload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json({
+						[permission1]: true,
+						[permission2]: false,
+					}),
+				);
+			}),
+		);
+
+		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
+			wrapper,
+		});
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(receivedPayload).toEqual({
+			permissions: [
+				{ relation: 'read', object: 'dashboard:*' },
+				{ relation: 'update', object: 'dashboard: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');
+		const permission4 = buildPermission('create', 'dashboards');
+
+		let requestCount = 0;
+		const receivedPayloads: any[] = [];
+
+		server.use(
+			rest.post(`${BASE_URL}/api/v1/permissions/check`, async (req, res, ctx) => {
+				requestCount++;
+				const payload = await req.json();
+				receivedPayloads.push(payload);
+
+				const allPermissions = [permission1, permission2, permission3, permission4];
+
+				const response: Record<string, boolean> = {};
+				payload.permissions.forEach((p: { relation: string; object: string }) => {
+					const perm = `${p.relation}/${p.object}` as BrandedPermission;
+					if (allPermissions.includes(perm)) {
+						response[perm] = perm === permission1 || perm === permission3;
+					}
+				});
+
+				return res(ctx.status(200), ctx.json(response));
+			}),
+		);
+
+		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].permissions).toHaveLength(3);
+		expect(receivedPayloads[0].permissions).toEqual(
+			expect.arrayContaining([
+				{ relation: 'read', object: 'dashboard:*' },
+				{ relation: 'update', object: 'dashboard:123' },
+				{ relation: 'delete', object: 'dashboard: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(`${BASE_URL}/api/v1/permissions/check`, async (req, res, ctx) => {
+				requestCount++;
+				const payload = await req.json();
+				receivedPayloads.push(payload);
+
+				const response: Record<string, boolean> = {};
+				payload.permissions.forEach((p: { relation: string; object: string }) => {
+					const perm = `${p.relation}/${p.object}` as BrandedPermission;
+					response[perm] = perm === permission1 || perm === permission3;
+				});
+
+				return res(ctx.status(200), ctx.json(response));
+			}),
+		);
+
+		const { result: result1 } = renderHook(() => useAuthZ([permission1]), {
+			wrapper,
+		});
+
+		await waitFor(
+			() => {
+				expect(result1.current.isLoading).toBe(false);
+			},
+			{ timeout: 200 },
+		);
+
+		expect(requestCount).toBe(1);
+		expect(receivedPayloads[0].permissions).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].permissions).toHaveLength(2);
+		expect(receivedPayloads[1].permissions).toEqual(
+			expect.arrayContaining([
+				{ relation: 'update', object: 'dashboard:123' },
+				{ relation: 'delete', object: 'dashboard:456' },
+			]),
+		);
+	});
+
+	it('should not leak state between separate batches', 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(`${BASE_URL}/api/v1/permissions/check`, async (req, res, ctx) => {
+				requestCount++;
+				const payload = await req.json();
+
+				const response: Record<string, boolean> = {};
+				payload.permissions.forEach((p: { relation: string; object: string }) => {
+					const perm = `${p.relation}/${p.object}` as BrandedPermission;
+					response[perm] = perm === permission1 || perm === permission3;
+				});
+
+				return res(ctx.status(200), ctx.json(response));
+			}),
+		);
+
+		const { result: result1 } = renderHook(() => useAuthZ([permission1]), {
+			wrapper,
+		});
+
+		await waitFor(
+			() => {
+				expect(result1.current.isLoading).toBe(false);
+			},
+			{ timeout: 200 },
+		);
+
+		expect(requestCount).toBe(1);
+		expect(result1.current.permissions).toEqual({
+			[permission1]: { isGranted: true },
+		});
+
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
+		const { result: result2 } = renderHook(() => useAuthZ([permission2]), {
+			wrapper,
+		});
+
+		await waitFor(
+			() => {
+				expect(result2.current.isLoading).toBe(false);
+			},
+			{ timeout: 200 },
+		);
+
+		expect(requestCount).toBe(2);
+		expect(result1.current.permissions).toEqual({
+			[permission1]: { isGranted: true },
+		});
+		expect(result2.current.permissions).toEqual({
+			[permission2]: { isGranted: false },
+		});
+		expect(result1.current.permissions).not.toHaveProperty(permission2);
+		expect(result2.current.permissions).not.toHaveProperty(permission1);
+	});
+});

frontend/src/hooks/useAuthZ/useAuthZ.tsx

@@ -0,0 +1,136 @@
+import { useMemo } from 'react';
+import { useQueries } from 'react-query';
+import api from 'api';
+
+import { BrandedPermission } from './utils';
+
+export type UseAuthZPermissionResult = {
+	isGranted: boolean;
+};
+
+export type AuthZCheckResponse = Record<
+	BrandedPermission,
+	UseAuthZPermissionResult
+>;
+
+export type UseAuthZResult = {
+	isLoading: boolean;
+	error: Error | null;
+	permissions: AuthZCheckResponse | null;
+};
+
+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 permissionsPayload = permissions.map((permission) => {
+		const [relation, object] = permission.split('/');
+
+		return {
+			relation,
+			object,
+		};
+	});
+
+	const permissionsCheckResponse = await api
+		.post<Record<string, boolean>>('/permissions/check', {
+			permissions: permissionsPayload,
+		})
+		.then((response) => response.data);
+
+	return Object.keys(permissionsCheckResponse).reduce<AuthZCheckResponse>(
+		(acc, permission): AuthZCheckResponse => {
+			acc[permission as BrandedPermission] = {
+				isGranted: !!permissionsCheckResponse[permission],
+			};
+			return acc;
+		},
+		{} as AuthZCheckResponse,
+	);
+}
+
+export function useAuthZ(permissions: BrandedPermission[]): UseAuthZResult {
+	const queryResults = useQueries(
+		permissions.map((permission) => {
+			return {
+				queryKey: ['authz', permission],
+				cacheTime: AUTHZ_CACHE_TIME,
+				refetchOnMount: false,
+				refetchIntervalInBackground: false,
+				refetchOnWindowFocus: false,
+				refetchOnReconnect: true,
+				queryFn: async (): Promise<AuthZCheckResponse> => {
+					const response = await dispatchPermission(permission);
+
+					return {
+						[permission]: {
+							isGranted: response[permission].isGranted,
+						},
+					};
+				},
+			};
+		}),
+	);
+
+	const isLoading = useMemo(() => queryResults.some((q) => q.isLoading), [
+		queryResults,
+	]);
+	const error = useMemo(
+		() =>
+			!isLoading
+				? (queryResults.find((q) => !!q.error)?.error as Error) || null
+				: null,
+		[isLoading, queryResults],
+	);
+	const data = useMemo(() => {
+		if (isLoading || error) {
+			return null;
+		}
+
+		return queryResults.reduce((acc, q) => {
+			if (!q.data) {
+				return acc;
+			}
+
+			for (const [key, value] of Object.entries(q.data)) {
+				acc[key as BrandedPermission] = value;
+			}
+
+			return acc;
+		}, {} as AuthZCheckResponse);
+	}, [isLoading, error, queryResults]);
+
+	return {
+		isLoading,
+		error,
+		permissions: data ?? null,
+	};
+}

frontend/src/hooks/useAuthZ/utils.ts

@@ -0,0 +1,32 @@
+export type AuthZRelation =
+	| 'list'
+	| 'create'
+	| 'read'
+	| 'update'
+	| 'delete'
+	| 'assignee';
+export type AuthZResource = 'dashboard';
+export type AuthZObject<R extends AuthZRelation> = R extends 'list' | 'create'
+	? `${AuthZResource}s`
+	: `${AuthZResource}:${string}`;
+
+export type AuthZPermissionCheck<R extends AuthZRelation> = {
+	object: AuthZObject<R>;
+	relation: R;
+};
+
+export type BrandedPermission = string & { __brandedPermission: true };
+
+export function buildPermission<R extends AuthZRelation>(
+	relation: R,
+	object: AuthZObject<R>,
+): BrandedPermission {
+	return `${relation}/${object}` as BrandedPermission;
+}
+
+export function buildObjectString(
+	resource: AuthZResource,
+	objectId: string,
+): `${AuthZResource}:${string}` {
+	return `${resource}:${objectId}`;
+}

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

@@ -4308,28 +4308,6 @@ func (r *ClickHouseReader) GetListResultV3(ctx context.Context, query string) ([
 
 }
 
-// GetHostMetricsExistenceAndEarliestTime returns (count, minFirstReportedUnixMilli, error) for the given host metric names
-// from distributed_metadata. When count is 0, minFirstReportedUnixMilli is 0.
-func (r *ClickHouseReader) GetHostMetricsExistenceAndEarliestTime(ctx context.Context, metricNames []string) (uint64, uint64, error) {
-	if len(metricNames) == 0 {
-		return 0, 0, nil
-	}
-
-	query := fmt.Sprintf(
-		`SELECT count(*) AS cnt, min(first_reported_unix_milli) AS min_first_reported
-		FROM %s.%s
-		WHERE metric_name IN @metric_names`,
-		constants.SIGNOZ_METRIC_DBNAME, constants.SIGNOZ_METADATA_TABLENAME)
-
-	var count, minFirstReported uint64
-	err := r.db.QueryRow(ctx, query, clickhouse.Named("metric_names", metricNames)).Scan(&count, &minFirstReported)
-	if err != nil {
-		zap.L().Error("error getting host metrics existence and earliest time", zap.Error(err))
-		return 0, 0, err
-	}
-	return count, minFirstReported, nil
-}
-
 func getPersonalisedError(err error) error {
 	if err == nil {
 		return nil

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

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

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

@@ -67,11 +67,10 @@ var (
 		GetDotMetrics("os_type"),
 	}
 	metricNamesForHosts = map[string]string{
-		"filesystem": GetDotMetrics("system_filesystem_usage"),
-		"cpu":        GetDotMetrics("system_cpu_time"),
-		"memory":     GetDotMetrics("system_memory_usage"),
-		"load15":     GetDotMetrics("system_cpu_load_average_15m"),
-		"wait":       GetDotMetrics("system_cpu_time"),
+		"cpu":    GetDotMetrics("system_cpu_time"),
+		"memory": GetDotMetrics("system_memory_usage"),
+		"load15": GetDotMetrics("system_cpu_load_average_15m"),
+		"wait":   GetDotMetrics("system_cpu_time"),
 	}
 )
 
@@ -317,15 +316,24 @@ func (h *HostsRepo) getTopHostGroups(ctx context.Context, orgID valuer.UUID, req
 	return topHostGroups, allHostGroups, nil
 }
 
-// GetHostMetricsExistenceAndEarliestTime returns (count, minFirstReportedUnixMilli, error) for host metrics
-// in distributed_metadata. Uses metricNamesForHosts plus system.filesystem.usage.
-func (h *HostsRepo) GetHostMetricsExistenceAndEarliestTime(ctx context.Context, req model.HostListRequest) (uint64, uint64, error) {
+func (h *HostsRepo) DidSendHostMetricsData(ctx context.Context, req model.HostListRequest) (bool, error) {
+
 	names := []string{}
 	for _, metricName := range metricNamesForHosts {
 		names = append(names, metricName)
 	}
 
-	return h.reader.GetHostMetricsExistenceAndEarliestTime(ctx, names)
+	namesStr := "'" + strings.Join(names, "','") + "'"
+
+	query := fmt.Sprintf("SELECT count() FROM %s.%s WHERE metric_name IN (%s)",
+		constants.SIGNOZ_METRIC_DBNAME, constants.SIGNOZ_TIMESERIES_v4_1DAY_TABLENAME, namesStr)
+
+	count, err := h.reader.GetCountOfThings(ctx, query)
+	if err != nil {
+		return false, err
+	}
+
+	return count > 0, nil
 }
 
 func (h *HostsRepo) IsSendingK8SAgentMetrics(ctx context.Context, req model.HostListRequest) ([]string, []string, error) {
@@ -404,25 +412,8 @@ func (h *HostsRepo) GetHostList(ctx context.Context, orgID valuer.UUID, req mode
 		resp.ClusterNames = clusterNames
 		resp.NodeNames = nodeNames
 	}
-
-	// 1. Check if any host metrics exist and get earliest retention time
-	// if no hosts metrics exist, that means we should show the onboarding guide on UI, and return early.
-	// 2. If host metrics exist, but req.End is earlier than the earliest time of host metrics as read from
-	// metadata table, then we should convey the same to the user and return early
-	if count, minFirstReportedUnixMilli, err := h.GetHostMetricsExistenceAndEarliestTime(ctx, req); err == nil {
-		if count == 0 {
-			resp.SentAnyHostMetricsData = false
-			resp.Records = []model.HostListRecord{}
-			resp.Total = 0
-			return resp, nil
-		}
-		resp.SentAnyHostMetricsData = true
-		if req.End < int64(minFirstReportedUnixMilli) {
-			resp.EndTimeBeforeRetention = true
-			resp.Records = []model.HostListRecord{}
-			resp.Total = 0
-			return resp, nil
-		}
+	if sentAnyHostMetricsData, err := h.DidSendHostMetricsData(ctx, req); err == nil {
+		resp.SentAnyHostMetricsData = sentAnyHostMetricsData
 	}
 
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))

pkg/query-service/constants/constants.go

@@ -125,8 +125,6 @@ const (
 	SIGNOZ_TIMESERIES_v4_6HRS_TABLENAME        = "distributed_time_series_v4_6hrs"
 	SIGNOZ_ATTRIBUTES_METADATA_TABLENAME       = "distributed_attributes_metadata"
 	SIGNOZ_ATTRIBUTES_METADATA_LOCAL_TABLENAME = "attributes_metadata"
-	SIGNOZ_METADATA_TABLENAME                  = "distributed_metadata"
-	SIGNOZ_METADATA_LOCAL_TABLENAME            = "metadata"
 )
 
 // alert related constants

pkg/query-service/interfaces/interface.go

@@ -100,8 +100,6 @@ type Reader interface {
 
 	GetCountOfThings(ctx context.Context, query string) (uint64, error)
 
-	GetHostMetricsExistenceAndEarliestTime(ctx context.Context, metricNames []string) (uint64, uint64, error)
-
 	//trace
 	GetTraceFields(ctx context.Context) (*model.GetFieldsResponse, *model.ApiError)
 	UpdateTraceField(ctx context.Context, field *model.UpdateField) *model.ApiError

pkg/query-service/model/infra.go

@@ -44,7 +44,6 @@ type HostListResponse struct {
 	IsSendingK8SAgentMetrics bool             `json:"isSendingK8SAgentMetrics"`
 	ClusterNames             []string         `json:"clusterNames"`
 	NodeNames                []string         `json:"nodeNames"`
-	EndTimeBeforeRetention   bool             `json:"endTimeBeforeRetention"`
 }
 
 func (r *HostListResponse) SortBy(orderBy *v3.OrderBy) {