fix: dynamic variables options load first time (#10361)

* feat: added roles page and listing view

* feat: refactored to use usetimezone hook and scss refactor

* feat: added page in url params and refactors

* feat: used semantic tokens for scss change

frontend/public/locales/en-GB/routes.json

@@ -12,5 +12,6 @@
 	"pipeline": "Pipeline",
 	"pipelines": "Pipelines",
 	"archives": "Archives",
-	"logs_to_metrics": "Logs To Metrics"
+	"logs_to_metrics": "Logs To Metrics",
+	"roles": "Roles"
 }

frontend/public/locales/en/routes.json

@@ -12,5 +12,6 @@
 	"pipeline": "Pipeline",
 	"pipelines": "Pipelines",
 	"archives": "Archives",
-	"logs_to_metrics": "Logs To Metrics"
+	"logs_to_metrics": "Logs To Metrics",
+	"roles": "Roles"
 }

frontend/public/locales/en/titles.json

@@ -73,5 +73,6 @@
 	"API_MONITORING": "SigNoz | External APIs",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
-	"METER": "SigNoz | Meter"
+	"METER": "SigNoz | Meter",
+	"ROLES_SETTINGS": "SigNoz | Roles"
 }

frontend/src/constants/routes.ts

@@ -55,6 +55,7 @@ const ROUTES = {
 	LOGS_INDEX_FIELDS: '/logs-explorer/index-fields',
 	TRACE_EXPLORER: '/trace-explorer',
 	BILLING: '/settings/billing',
+	ROLES_SETTINGS: '/settings/roles',
 	SUPPORT: '/support',
 	LOGS_SAVE_VIEWS: '/logs/saved-views',
 	TRACES_SAVE_VIEWS: '/traces/saved-views',

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

@@ -34,6 +34,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const sortedVariablesArray = useDashboardVariablesSelector(
 		(state) => state.sortedVariablesArray,
 	);
+	const dynamicVariableOrder = useDashboardVariablesSelector(
+		(state) => state.dynamicVariableOrder,
+	);
 	const dependencyData = useDashboardVariablesSelector(
 		(state) => state.dependencyData,
 	);
@@ -52,10 +55,11 @@ function DashboardVariableSelection(): JSX.Element | null {
 	}, [getUrlVariables, updateUrlVariable, dashboardVariables]);
 
 	// Memoize the order key to avoid unnecessary triggers
-	const dependencyOrderKey = useMemo(
-		() => dependencyData?.order?.join(',') ?? '',
-		[dependencyData?.order],
-	);
+	const variableOrderKey = useMemo(() => {
+		const queryVariableOrderKey = dependencyData?.order?.join(',') ?? '';
+		const dynamicVariableOrderKey = dynamicVariableOrder?.join(',') ?? '';
+		return `${queryVariableOrderKey}|${dynamicVariableOrderKey}`;
+	}, [dependencyData?.order, dynamicVariableOrder]);
 
 	// Initialize fetch store then start a new fetch cycle.
 	// Runs on dependency order changes, and time range changes.
@@ -66,7 +70,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 		initializeVariableFetchStore(allVariableNames);
 		enqueueFetchOfAllVariables();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dependencyOrderKey, minTime, maxTime]);
+	}, [variableOrderKey, minTime, maxTime]);
 
 	// Performance optimization: For dynamic variables with allSelected=true, we don't store
 	// individual values in localStorage since we can always derive them from available options.

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

@@ -0,0 +1,203 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { act, render } from '@testing-library/react';
+import {
+	dashboardVariablesStore,
+	setDashboardVariablesStore,
+	updateDashboardVariablesStore,
+} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
+import {
+	IDashboardVariables,
+	IDashboardVariablesStoreState,
+} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import {
+	enqueueFetchOfAllVariables,
+	initializeVariableFetchStore,
+} from 'providers/Dashboard/store/variableFetchStore';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import DashboardVariableSelection from '../DashboardVariableSelection';
+
+// Mock providers/Dashboard/Dashboard
+const mockSetSelectedDashboard = jest.fn();
+const mockUpdateLocalStorageDashboardVariables = jest.fn();
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): Record<string, unknown> => ({
+		setSelectedDashboard: mockSetSelectedDashboard,
+		updateLocalStorageDashboardVariables: mockUpdateLocalStorageDashboardVariables,
+	}),
+}));
+
+// Mock hooks/dashboard/useVariablesFromUrl
+const mockUpdateUrlVariable = jest.fn();
+const mockGetUrlVariables = jest.fn().mockReturnValue({});
+jest.mock('hooks/dashboard/useVariablesFromUrl', () => ({
+	__esModule: true,
+	default: (): Record<string, unknown> => ({
+		updateUrlVariable: mockUpdateUrlVariable,
+		getUrlVariables: mockGetUrlVariables,
+	}),
+}));
+
+// Mock variableFetchStore functions
+jest.mock('providers/Dashboard/store/variableFetchStore', () => ({
+	initializeVariableFetchStore: jest.fn(),
+	enqueueFetchOfAllVariables: jest.fn(),
+	enqueueDescendantsOfVariable: jest.fn(),
+}));
+
+// Mock initializeDefaultVariables
+jest.mock('providers/Dashboard/initializeDefaultVariables', () => ({
+	initializeDefaultVariables: jest.fn(),
+}));
+
+// Mock react-redux useSelector for globalTime
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useSelector: jest.fn().mockReturnValue({ minTime: 1000, maxTime: 2000 }),
+}));
+
+// Mock VariableItem to avoid rendering complexity
+jest.mock('../VariableItem', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="variable-item" />,
+}));
+
+function createVariable(
+	overrides: Partial<IDashboardVariable> = {},
+): IDashboardVariable {
+	return {
+		id: 'test-id',
+		name: 'test-var',
+		description: '',
+		type: 'QUERY',
+		sort: 'DISABLED',
+		showALLOption: false,
+		multiSelect: false,
+		order: 0,
+		...overrides,
+	};
+}
+
+function resetStore(): void {
+	dashboardVariablesStore.set(() => ({
+		dashboardId: '',
+		variables: {},
+		sortedVariablesArray: [],
+		dependencyData: null,
+		variableTypes: {},
+		dynamicVariableOrder: [],
+	}));
+}
+
+describe('DashboardVariableSelection', () => {
+	beforeEach(() => {
+		resetStore();
+		jest.clearAllMocks();
+	});
+
+	it('should call initializeVariableFetchStore and enqueueFetchOfAllVariables on mount', () => {
+		const variables: IDashboardVariables = {
+			env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
+		};
+
+		setDashboardVariablesStore({ dashboardId: 'dash-1', variables });
+
+		render(<DashboardVariableSelection />);
+
+		expect(initializeVariableFetchStore).toHaveBeenCalledWith(['env']);
+		expect(enqueueFetchOfAllVariables).toHaveBeenCalled();
+	});
+
+	it('should re-trigger fetch cycle when dynamicVariableOrder changes', () => {
+		const variables: IDashboardVariables = {
+			env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
+		};
+
+		setDashboardVariablesStore({ dashboardId: 'dash-1', variables });
+
+		render(<DashboardVariableSelection />);
+
+		// Clear mocks after initial render
+		(initializeVariableFetchStore as jest.Mock).mockClear();
+		(enqueueFetchOfAllVariables as jest.Mock).mockClear();
+
+		// Add a DYNAMIC variable which changes dynamicVariableOrder
+		act(() => {
+			updateDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
+					dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
+				},
+			});
+		});
+
+		expect(initializeVariableFetchStore).toHaveBeenCalledWith(
+			expect.arrayContaining(['env', 'dyn1']),
+		);
+		expect(enqueueFetchOfAllVariables).toHaveBeenCalled();
+	});
+
+	it('should re-trigger fetch cycle when a dynamic variable is removed', () => {
+		const variables: IDashboardVariables = {
+			env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
+			dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
+			dyn2: createVariable({ name: 'dyn2', type: 'DYNAMIC', order: 2 }),
+		};
+
+		setDashboardVariablesStore({ dashboardId: 'dash-1', variables });
+
+		render(<DashboardVariableSelection />);
+
+		(initializeVariableFetchStore as jest.Mock).mockClear();
+		(enqueueFetchOfAllVariables as jest.Mock).mockClear();
+
+		// Remove dyn2, changing dynamicVariableOrder from ['dyn1','dyn2'] to ['dyn1']
+		act(() => {
+			updateDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
+					dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
+				},
+			});
+		});
+
+		expect(initializeVariableFetchStore).toHaveBeenCalledWith(['env', 'dyn1']);
+		expect(enqueueFetchOfAllVariables).toHaveBeenCalled();
+	});
+
+	it('should NOT re-trigger fetch cycle when dynamicVariableOrder stays the same', () => {
+		const variables: IDashboardVariables = {
+			env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
+			dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
+		};
+
+		setDashboardVariablesStore({ dashboardId: 'dash-1', variables });
+
+		render(<DashboardVariableSelection />);
+
+		(initializeVariableFetchStore as jest.Mock).mockClear();
+		(enqueueFetchOfAllVariables as jest.Mock).mockClear();
+
+		// Update a non-dynamic variable's selectedValue — dynamicVariableOrder unchanged
+		act(() => {
+			const snapshot = dashboardVariablesStore.getSnapshot();
+			dashboardVariablesStore.set(
+				(): IDashboardVariablesStoreState => ({
+					...snapshot,
+					variables: {
+						...snapshot.variables,
+						env: {
+							...snapshot.variables.env,
+							selectedValue: 'production',
+						},
+					},
+				}),
+			);
+		});
+
+		expect(initializeVariableFetchStore).not.toHaveBeenCalled();
+		expect(enqueueFetchOfAllVariables).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx

@@ -0,0 +1,246 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+import { Pagination, Skeleton } from 'antd';
+import { useListRoles } from 'api/generated/services/role';
+import { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import useUrlQuery from 'hooks/useUrlQuery';
+import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
+import { useTimezone } from 'providers/Timezone';
+import { toAPIError } from 'utils/errorUtils';
+
+import '../RolesSettings.styles.scss';
+
+const PAGE_SIZE = 20;
+
+type DisplayItem =
+	| { type: 'section'; label: string; count?: number }
+	| { type: 'role'; role: RoletypesRoleDTO };
+
+interface RolesListingTableProps {
+	searchQuery: string;
+}
+
+function RolesListingTable({
+	searchQuery,
+}: RolesListingTableProps): JSX.Element {
+	const { data, isLoading, isError, error } = useListRoles();
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const history = useHistory();
+	const urlQuery = useUrlQuery();
+	const pageParam = parseInt(urlQuery.get('page') ?? '1', 10);
+	const currentPage = Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
+
+	const setCurrentPage = useCallback(
+		(page: number): void => {
+			urlQuery.set('page', String(page));
+			history.replace({ search: urlQuery.toString() });
+		},
+		[history, urlQuery],
+	);
+
+	const roles = useMemo(() => data?.data?.data ?? [], [data]);
+
+	const formatTimestamp = (date?: Date | string): string => {
+		if (!date) {
+			return '—';
+		}
+		const d = new Date(date);
+
+		if (Number.isNaN(d.getTime())) {
+			return '—';
+		}
+
+		return formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.DASH_DATETIME);
+	};
+
+	const filteredRoles = useMemo(() => {
+		if (!searchQuery.trim()) {
+			return roles;
+		}
+		const query = searchQuery.toLowerCase();
+		return roles.filter(
+			(role) =>
+				role.name?.toLowerCase().includes(query) ||
+				role.description?.toLowerCase().includes(query),
+		);
+	}, [roles, searchQuery]);
+
+	const managedRoles = useMemo(
+		() => filteredRoles.filter((role) => role.type?.toLowerCase() === 'managed'),
+		[filteredRoles],
+	);
+	const customRoles = useMemo(
+		() => filteredRoles.filter((role) => role.type?.toLowerCase() === 'custom'),
+		[filteredRoles],
+	);
+
+	// Combine managed + custom into a flat display list for pagination
+	const displayList = useMemo((): DisplayItem[] => {
+		const result: DisplayItem[] = [];
+
+		if (managedRoles.length > 0) {
+			result.push({ type: 'section', label: 'Managed roles' });
+			managedRoles.forEach((role) => result.push({ type: 'role', role }));
+		}
+		if (customRoles.length > 0) {
+			result.push({
+				type: 'section',
+				label: 'Custom roles',
+				count: customRoles.length,
+			});
+			customRoles.forEach((role) => result.push({ type: 'role', role }));
+		}
+		return result;
+	}, [managedRoles, customRoles]);
+
+	const totalRoleCount = managedRoles.length + customRoles.length;
+
+	// Ensure current page is valid; if out of bounds, redirect to last available page
+	useEffect(() => {
+		if (isLoading || totalRoleCount === 0) {
+			return;
+		}
+		const maxPage = Math.ceil(totalRoleCount / PAGE_SIZE);
+		if (currentPage > maxPage) {
+			setCurrentPage(maxPage);
+		}
+	}, [isLoading, totalRoleCount, currentPage, setCurrentPage]);
+
+	// Paginate: count only role items, but include section headers contextually
+	const paginatedItems = useMemo((): DisplayItem[] => {
+		const startRole = (currentPage - 1) * PAGE_SIZE;
+		const endRole = startRole + PAGE_SIZE;
+		let roleIndex = 0;
+		let lastSection: DisplayItem | null = null;
+		const result: DisplayItem[] = [];
+
+		for (const item of displayList) {
+			if (item.type === 'section') {
+				lastSection = item;
+			} else {
+				if (roleIndex >= startRole && roleIndex < endRole) {
+					// Insert section header before first role in that section on this page
+					if (lastSection) {
+						result.push(lastSection);
+						lastSection = null;
+					}
+					result.push(item);
+				}
+				roleIndex++;
+			}
+		}
+		return result;
+	}, [displayList, currentPage]);
+
+	const showPaginationItem = (total: number, range: number[]): JSX.Element => (
+		<>
+			<span className="numbers">
+				{range[0]} &#8212; {range[1]}
+			</span>
+			<span className="total"> of {total}</span>
+		</>
+	);
+
+	if (isLoading) {
+		return (
+			<div className="roles-listing-table">
+				<Skeleton active paragraph={{ rows: 5 }} />
+			</div>
+		);
+	}
+
+	if (isError) {
+		return (
+			<div className="roles-listing-table">
+				<ErrorInPlace
+					error={toAPIError(
+						error,
+						'An unexpected error occurred while fetching roles.',
+					)}
+				/>
+			</div>
+		);
+	}
+
+	if (filteredRoles.length === 0) {
+		return (
+			<div className="roles-listing-table">
+				<div className="roles-table-empty">
+					{searchQuery ? 'No roles match your search.' : 'No roles found.'}
+				</div>
+			</div>
+		);
+	}
+
+	// todo: use table from periscope when its available for consumption
+	const renderRow = (role: RoletypesRoleDTO): JSX.Element => (
+		<div key={role.id} className="roles-table-row">
+			<div className="roles-table-cell roles-table-cell--name">
+				{role.name ?? '—'}
+			</div>
+			<div className="roles-table-cell roles-table-cell--description">
+				<LineClampedText
+					text={role.description ?? '—'}
+					tooltipProps={{ overlayClassName: 'roles-description-tooltip' }}
+				/>
+			</div>
+			<div className="roles-table-cell roles-table-cell--updated-at">
+				{formatTimestamp(role.updatedAt)}
+			</div>
+			<div className="roles-table-cell roles-table-cell--created-at">
+				{formatTimestamp(role.createdAt)}
+			</div>
+		</div>
+	);
+
+	return (
+		<div className="roles-listing-table">
+			<div className="roles-table-scroll-container">
+				<div className="roles-table-inner">
+					<div className="roles-table-header">
+						<div className="roles-table-header-cell roles-table-header-cell--name">
+							Name
+						</div>
+						<div className="roles-table-header-cell roles-table-header-cell--description">
+							Description
+						</div>
+						<div className="roles-table-header-cell roles-table-header-cell--updated-at">
+							Updated At
+						</div>
+						<div className="roles-table-header-cell roles-table-header-cell--created-at">
+							Created At
+						</div>
+					</div>
+
+					{paginatedItems.map((item) =>
+						item.type === 'section' ? (
+							<h3 key={`section-${item.label}`} className="roles-table-section-header">
+								{item.label}
+								{item.count !== undefined && (
+									<span className="roles-table-section-header__count">{item.count}</span>
+								)}
+							</h3>
+						) : (
+							renderRow(item.role)
+						),
+					)}
+				</div>
+			</div>
+
+			<Pagination
+				current={currentPage}
+				pageSize={PAGE_SIZE}
+				total={totalRoleCount}
+				showTotal={showPaginationItem}
+				showSizeChanger={false}
+				hideOnSinglePage
+				onChange={(page): void => setCurrentPage(page)}
+				className="roles-table-pagination"
+			/>
+		</div>
+	);
+}
+
+export default RolesListingTable;

frontend/src/container/RolesSettings/RolesSettings.styles.scss

@@ -0,0 +1,238 @@
+.roles-settings {
+	.roles-settings-header {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		width: 100%;
+		padding: 16px;
+
+		.roles-settings-header-title {
+			color: var(--text-base-white);
+			font-family: Inter;
+			font-style: normal;
+			font-size: 18px;
+			font-weight: 500;
+			line-height: 28px;
+			letter-spacing: -0.09px;
+		}
+
+		.roles-settings-header-description {
+			color: var(--foreground);
+			font-family: Inter;
+			font-style: normal;
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	.roles-settings-content {
+		padding: 0 16px;
+	}
+
+	// todo: https://github.com/SigNoz/components/issues/116
+	.roles-search-wrapper {
+		input {
+			width: 100%;
+			background: var(--l3-background);
+			border: 1px solid var(--l3-border);
+			border-radius: 2px;
+			padding: 6px 6px 6px 8px;
+			font-family: Inter;
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 18px;
+			letter-spacing: -0.07px;
+			color: var(--l1-foreground);
+			outline: none;
+			height: 32px;
+
+			&::placeholder {
+				color: var(--l3-foreground);
+			}
+
+			&:focus {
+				border-color: var(--input);
+			}
+		}
+	}
+}
+
+.roles-description-tooltip {
+	max-height: none;
+	overflow-y: visible;
+}
+
+.roles-listing-table {
+	margin-top: 12px;
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.roles-table-scroll-container {
+	overflow-x: auto;
+}
+
+.roles-table-inner {
+	min-width: 850px;
+}
+
+.roles-table-header {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	gap: 24px;
+}
+
+.roles-table-header-cell {
+	font-family: Inter;
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.44px;
+	color: var(--foreground);
+	line-height: 16px;
+
+	&--name {
+		flex: 0 0 180px;
+	}
+
+	&--description {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&--created-at {
+		flex: 0 0 180px;
+		text-align: right;
+	}
+
+	&--updated-at {
+		flex: 0 0 180px;
+		text-align: right;
+	}
+}
+
+.roles-table-section-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	height: 32px;
+	padding: 0 16px;
+	background: rgba(171, 189, 255, 0.04);
+	border-top: 1px solid var(--secondary);
+	border-bottom: 1px solid var(--secondary);
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 400;
+	color: var(--foreground);
+	line-height: 16px;
+	margin: 0;
+
+	&__count {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 20px;
+		height: 18px;
+		padding: 0 6px;
+		border-radius: 9px;
+		background: var(--l3-background);
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--foreground);
+		line-height: 1;
+	}
+}
+
+.roles-table-row {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	background: rgba(171, 189, 255, 0.02);
+	border-bottom: 1px solid var(--secondary);
+	gap: 24px;
+}
+
+.roles-table-cell {
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	color: var(--foreground);
+	line-height: 20px;
+
+	&--name {
+		flex: 0 0 180px;
+		font-weight: 500;
+	}
+
+	&--description {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	&--created-at {
+		flex: 0 0 180px;
+		text-align: right;
+		white-space: nowrap;
+	}
+
+	&--updated-at {
+		flex: 0 0 180px;
+		text-align: right;
+		white-space: nowrap;
+	}
+}
+
+.roles-table-empty {
+	padding: 24px 16px;
+	text-align: center;
+	color: var(--foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+}
+
+.roles-table-pagination {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 8px 16px;
+
+	.ant-pagination-total-text {
+		margin-right: auto;
+
+		.numbers {
+			font-family: Inter;
+			font-size: 12px;
+			color: var(--foreground);
+		}
+
+		.total {
+			font-family: Inter;
+			font-size: 12px;
+			color: var(--foreground);
+			opacity: 0.5;
+		}
+	}
+}
+
+.lightMode {
+	.roles-settings {
+		.roles-settings-header {
+			.roles-settings-header-title {
+				color: var(--text-base-black);
+			}
+		}
+	}
+
+	.roles-table-section-header {
+		background: rgba(0, 0, 0, 0.03);
+	}
+
+	.roles-table-row {
+		background: rgba(0, 0, 0, 0.01);
+	}
+}

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { Input } from '@signozhq/input';
+
+import RolesListingTable from './RolesComponents/RolesListingTable';
+
+import './RolesSettings.styles.scss';
+
+function RolesSettings(): JSX.Element {
+	const [searchQuery, setSearchQuery] = useState('');
+
+	return (
+		<div className="roles-settings" data-testid="roles-settings">
+			<div className="roles-settings-header">
+				<h3 className="roles-settings-header-title">Roles</h3>
+				<p className="roles-settings-header-description">
+					Create and manage custom roles for your team.
+				</p>
+			</div>
+			<div className="roles-settings-content">
+				<div className="roles-search-wrapper">
+					<Input
+						type="search"
+						placeholder="Search for roles..."
+						value={searchQuery}
+						onChange={(e): void => setSearchQuery(e.target.value)}
+					/>
+				</div>
+				<RolesListingTable searchQuery={searchQuery} />
+			</div>
+		</div>
+	);
+}
+
+export default RolesSettings;

frontend/src/container/RolesSettings/__tests__/RolesSettings.test.tsx

@@ -0,0 +1,232 @@
+import {
+	allRoles,
+	listRolesSuccessResponse,
+} from 'mocks-server/__mockdata__/roles';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import RolesSettings from '../RolesSettings';
+
+const rolesApiURL = 'http://localhost/api/v1/roles';
+
+describe('RolesSettings', () => {
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders the header and search input', () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(screen.getByText('Roles')).toBeInTheDocument();
+		expect(
+			screen.getByText('Create and manage custom roles for your team.'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByPlaceholderText('Search for roles...'),
+		).toBeInTheDocument();
+	});
+
+	it('displays roles grouped by managed and custom sections', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('signoz-admin')).toBeInTheDocument();
+
+		// Section headers
+		expect(screen.getByText('Managed roles')).toBeInTheDocument();
+		expect(screen.getByText('Custom roles')).toBeInTheDocument();
+
+		// Managed roles
+		expect(screen.getByText('signoz-admin')).toBeInTheDocument();
+		expect(screen.getByText('signoz-editor')).toBeInTheDocument();
+		expect(screen.getByText('signoz-viewer')).toBeInTheDocument();
+
+		// Custom roles
+		expect(screen.getByText('billing-manager')).toBeInTheDocument();
+		expect(screen.getByText('dashboard-creator')).toBeInTheDocument();
+
+		// Custom roles count badge
+		expect(screen.getByText('2')).toBeInTheDocument();
+
+		// Column headers
+		expect(screen.getByText('Name')).toBeInTheDocument();
+		expect(screen.getByText('Description')).toBeInTheDocument();
+		expect(screen.getByText('Updated At')).toBeInTheDocument();
+		expect(screen.getByText('Created At')).toBeInTheDocument();
+	});
+
+	it('filters roles by search query on name', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('signoz-admin')).toBeInTheDocument();
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const searchInput = screen.getByPlaceholderText('Search for roles...');
+
+		await user.type(searchInput, 'billing');
+
+		expect(await screen.findByText('billing-manager')).toBeInTheDocument();
+		expect(screen.queryByText('signoz-admin')).not.toBeInTheDocument();
+		expect(screen.queryByText('signoz-editor')).not.toBeInTheDocument();
+		expect(screen.queryByText('dashboard-creator')).not.toBeInTheDocument();
+	});
+
+	it('filters roles by search query on description', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('signoz-admin')).toBeInTheDocument();
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const searchInput = screen.getByPlaceholderText('Search for roles...');
+
+		await user.type(searchInput, 'read-only');
+
+		expect(await screen.findByText('signoz-viewer')).toBeInTheDocument();
+		expect(screen.queryByText('signoz-admin')).not.toBeInTheDocument();
+		expect(screen.queryByText('billing-manager')).not.toBeInTheDocument();
+	});
+
+	it('shows empty state when search matches nothing', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('signoz-admin')).toBeInTheDocument();
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const searchInput = screen.getByPlaceholderText('Search for roles...');
+
+		await user.type(searchInput, 'nonexistentrole');
+
+		expect(
+			await screen.findByText('No roles match your search.'),
+		).toBeInTheDocument();
+	});
+
+	it('shows loading skeleton while fetching', () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.delay(200), ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+	});
+
+	it('shows error state when API fails', async () => {
+		const errorMessage = 'Failed to fetch roles';
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(
+					ctx.status(500),
+					ctx.json({
+						error: {
+							code: 'INTERNAL_ERROR',
+							message: errorMessage,
+							url: '',
+							errors: [],
+						},
+					}),
+				),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText(errorMessage)).toBeInTheDocument();
+	});
+
+	it('shows empty state when API returns no roles', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: [] })),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('No roles found.')).toBeInTheDocument();
+	});
+
+	it('renders descriptions for all roles', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('signoz-admin')).toBeInTheDocument();
+
+		for (const role of allRoles) {
+			if (role.description) {
+				expect(screen.getByText(role.description)).toBeInTheDocument();
+			}
+		}
+	});
+
+	it('handles invalid dates gracefully by showing fallback', async () => {
+		const invalidRole = {
+			id: 'edge-0009',
+			createdAt: ('invalid-date' as unknown) as Date,
+			updatedAt: ('not-a-date' as unknown) as Date,
+			name: 'invalid-date-role',
+			description: 'Tests date parsing fallback.',
+			type: 'custom',
+			orgId: 'org-001',
+		};
+
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: [invalidRole],
+					}),
+				),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('invalid-date-role')).toBeInTheDocument();
+
+		// Verify the "—" (em-dash) fallback is shown for both cells
+		const dashFallback = screen.getAllByText('—');
+		// In renderRow: name, description, updatedAt, createdAt.
+		// Total dashes expected: 2 (for both dates)
+		expect(dashFallback.length).toBeGreaterThanOrEqual(2);
+	});
+});

frontend/src/container/RolesSettings/index.tsx

@@ -0,0 +1 @@
+export { default } from './RolesSettings';

frontend/src/container/SideNav/menuItems.tsx

@@ -28,6 +28,7 @@ import {
 	ScrollText,
 	Search,
 	Settings,
+	Shield,
 	Slack,
 	Unplug,
 	User,
@@ -312,6 +313,13 @@ export const settingsMenuItems: SidebarItem[] = [
 		isEnabled: false,
 		itemKey: 'billing',
 	},
+	{
+		key: ROUTES.ROLES_SETTINGS,
+		label: 'Roles',
+		icon: <Shield size={16} />,
+		isEnabled: false,
+		itemKey: 'roles',
+	},
 	{
 		key: ROUTES.ORG_SETTINGS,
 		label: 'Members & SSO',

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -159,6 +159,7 @@ export const routesToSkip = [
 	ROUTES.ERROR_DETAIL,
 	ROUTES.LOGS_PIPELINES,
 	ROUTES.BILLING,
+	ROUTES.ROLES_SETTINGS,
 	ROUTES.SUPPORT,
 	ROUTES.WORKSPACE_LOCKED,
 	ROUTES.WORKSPACE_SUSPENDED,

frontend/src/mocks-server/__mockdata__/roles.ts

@@ -0,0 +1,64 @@
+import { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+
+const orgId = '019ba2bb-2fa1-7b24-8159-cfca08617ef9';
+
+export const managedRoles: RoletypesRoleDTO[] = [
+	{
+		id: '019c24aa-2248-756f-9833-984f1ab63819',
+		createdAt: new Date('2026-02-03T18:00:55.624356Z'),
+		updatedAt: new Date('2026-02-03T18:00:55.624356Z'),
+		name: 'signoz-admin',
+		description:
+			'Role assigned to users who have full administrative access to SigNoz resources.',
+		type: 'managed',
+		orgId,
+	},
+	{
+		id: '019c24aa-2248-757c-9faf-7b1e899751e0',
+		createdAt: new Date('2026-02-03T18:00:55.624359Z'),
+		updatedAt: new Date('2026-02-03T18:00:55.624359Z'),
+		name: 'signoz-editor',
+		description:
+			'Role assigned to users who can create, edit, and manage SigNoz resources but do not have full administrative privileges.',
+		type: 'managed',
+		orgId,
+	},
+	{
+		id: '019c24aa-2248-7585-a129-4188b3473c27',
+		createdAt: new Date('2026-02-03T18:00:55.624362Z'),
+		updatedAt: new Date('2026-02-03T18:00:55.624362Z'),
+		name: 'signoz-viewer',
+		description:
+			'Role assigned to users who have read-only access to SigNoz resources.',
+		type: 'managed',
+		orgId,
+	},
+];
+
+export const customRoles: RoletypesRoleDTO[] = [
+	{
+		id: '019c24aa-3333-0001-aaaa-111111111111',
+		createdAt: new Date('2026-02-10T10:30:00.000Z'),
+		updatedAt: new Date('2026-02-12T14:20:00.000Z'),
+		name: 'billing-manager',
+		description: 'Custom role for managing billing and invoices.',
+		type: 'custom',
+		orgId,
+	},
+	{
+		id: '019c24aa-3333-0002-bbbb-222222222222',
+		createdAt: new Date('2026-02-11T09:00:00.000Z'),
+		updatedAt: new Date('2026-02-13T11:45:00.000Z'),
+		name: 'dashboard-creator',
+		description: 'Custom role allowing users to create and manage dashboards.',
+		type: 'custom',
+		orgId,
+	},
+];
+
+export const allRoles: RoletypesRoleDTO[] = [...managedRoles, ...customRoles];
+
+export const listRolesSuccessResponse = {
+	status: 'success',
+	data: allRoles,
+};

frontend/src/pages/Settings/Settings.tsx

@@ -77,6 +77,7 @@ function SettingsPage(): JSX.Element {
 						...item,
 						isEnabled:
 							item.key === ROUTES.BILLING ||
+							item.key === ROUTES.ROLES_SETTINGS ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.CUSTOM_DOMAIN_SETTINGS ||
 							item.key === ROUTES.API_KEYS ||
@@ -107,6 +108,7 @@ function SettingsPage(): JSX.Element {
 						...item,
 						isEnabled:
 							item.key === ROUTES.BILLING ||
+							item.key === ROUTES.ROLES_SETTINGS ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
@@ -134,7 +136,9 @@ function SettingsPage(): JSX.Element {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
-							item.key === ROUTES.API_KEYS || item.key === ROUTES.ORG_SETTINGS
+							item.key === ROUTES.API_KEYS ||
+							item.key === ROUTES.ORG_SETTINGS ||
+							item.key === ROUTES.ROLES_SETTINGS
 								? true
 								: item.isEnabled,
 					}));

frontend/src/pages/Settings/config.tsx

@@ -12,6 +12,7 @@ import IngestionSettings from 'container/IngestionSettings/IngestionSettings';
 import MultiIngestionSettings from 'container/IngestionSettings/MultiIngestionSettings';
 import MySettings from 'container/MySettings';
 import OrganizationSettings from 'container/OrganizationSettings';
+import RolesSettings from 'container/RolesSettings';
 import { TFunction } from 'i18next';
 import {
 	Backpack,
@@ -24,6 +25,7 @@ import {
 	KeySquare,
 	Pencil,
 	Plus,
+	Shield,
 	User,
 } from 'lucide-react';
 import ChannelsEdit from 'pages/ChannelsEdit';
@@ -148,6 +150,19 @@ export const billingSettings = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];
 
+export const rolesSettings = (t: TFunction): RouteTabProps['routes'] => [
+	{
+		Component: RolesSettings,
+		name: (
+			<div className="periscope-tab">
+				<Shield size={16} /> {t('routes:roles').toString()}
+			</div>
+		),
+		route: ROUTES.ROLES_SETTINGS,
+		key: ROUTES.ROLES_SETTINGS,
+	},
+];
+
 export const keyboardShortcuts = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: Shortcuts,

frontend/src/pages/Settings/utils.ts

@@ -15,6 +15,7 @@ import {
 	multiIngestionSettings,
 	mySettings,
 	organizationSettings,
+	rolesSettings,
 } from './config';
 
 export const getRoutes = (
@@ -66,6 +67,10 @@ export const getRoutes = (
 		settings.push(...customDomainSettings(t), ...billingSettings(t));
 	}
 
+	if (isAdmin) {
+		settings.push(...rolesSettings(t));
+	}
+
 	settings.push(
 		...mySettings(t),
 		...createAlertChannels(t),

frontend/src/utils/errorUtils.ts

@@ -1,3 +1,8 @@
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+
 /**
  * Extracts HTTP status code from various error types
  * @param error - The error object (could be APIError, AxiosError, or other error types)
@@ -28,3 +33,25 @@ export const isRetryableError = (error: any): boolean => {
 	// If no status code is available, default to retryable
 	return !statusCode || statusCode >= 500;
 };
+
+export function toAPIError(
+	error: unknown,
+	defaultMessage = 'An unexpected error occurred.',
+): APIError {
+	try {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	} catch (apiError) {
+		if (apiError instanceof APIError) {
+			return apiError;
+		}
+	}
+	return new APIError({
+		httpStatusCode: 500,
+		error: {
+			code: 'UNKNOWN_ERROR',
+			message: defaultMessage,
+			url: '',
+			errors: [],
+		},
+	});
+}

frontend/src/utils/permission/index.ts

@@ -97,6 +97,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	GET_STARTED_AZURE_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	WORKSPACE_LOCKED: ['ADMIN', 'EDITOR', 'VIEWER'],
 	WORKSPACE_SUSPENDED: ['ADMIN', 'EDITOR', 'VIEWER'],
+	ROLES_SETTINGS: ['ADMIN'],
 	BILLING: ['ADMIN'],
 	SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SOMETHING_WENT_WRONG: ['ADMIN', 'EDITOR', 'VIEWER'],