fix: formatting chart manager aggregation values with the yaxis unit (#10379)

* fix: formatting chart manager aggergation values with the yaxis unit

* chore: pr review changes

* chore: pr review changes

frontend/src/constants/routes.ts

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

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.styles.scss

@@ -1,3 +1,22 @@
+.chart-manager-series-label {
+	width: 100%;
+	min-width: 0;
+	max-width: 100%;
+	cursor: pointer;
+	border: none;
+	background-color: transparent;
+	color: inherit;
+	text-align: left;
+	padding: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	&:disabled {
+		cursor: not-allowed;
+	}
+}
+
 .chart-manager-container {
 	width: 100%;
 	max-height: calc(40% - 40px);

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -1,24 +1,28 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Input } from 'antd';
+import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
-import { getGraphManagerTableColumns } from 'container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns';
-import { ExtendedChartDataset } from 'container/GridCardLayout/GridCard/FullView/types';
-import { getDefaultTableDataSet } from 'container/GridCardLayout/GridCard/FullView/utils';
 import { useNotifications } from 'hooks/useNotifications';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 
+import { getChartManagerColumns } from './getChartMangerColumns';
+import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
+
 import './ChartManager.styles.scss';
 
 interface ChartManagerProps {
 	config: UPlotConfigBuilder;
 	alignedData: uPlot.AlignedData;
 	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
 	onCancel?: () => void;
 }
 
+const X_AXIS_INDEX = 0;
+
 /**
  * ChartManager provides a tabular view to manage the visibility of
  * individual series on a uPlot chart.
@@ -28,16 +32,12 @@ interface ChartManagerProps {
  * - filter series by label
  * - toggle individual series on/off
  * - persist the visibility configuration to local storage.
- *
- * @param config - `UPlotConfigBuilder` instance used to derive chart options.
- * @param alignedData - uPlot aligned data used to build the initial table dataset.
- * @param yAxisUnit - Optional unit label for Y-axis values shown in the table.
- * @param onCancel - Optional callback invoked when the user cancels the dialog.
  */
 export default function ChartManager({
 	config,
 	alignedData,
 	yAxisUnit,
+	decimalPrecision = PrecisionOptionsEnum.TWO,
 	onCancel,
 }: ChartManagerProps): JSX.Element {
 	const { notifications } = useNotifications();
@@ -53,8 +53,13 @@ export default function ChartManager({
 	const { isDashboardLocked } = useDashboard();
 
 	const [tableDataSet, setTableDataSet] = useState<ExtendedChartDataset[]>(() =>
-		getDefaultTableDataSet(config.getConfig() as uPlot.Options, alignedData),
+		getDefaultTableDataSet(
+			config.getConfig() as uPlot.Options,
+			alignedData,
+			decimalPrecision,
+		),
 	);
+	const [filterValue, setFilterValue] = useState('');
 
 	const graphVisibilityState = useMemo(
 		() =>
@@ -67,46 +72,62 @@ export default function ChartManager({
 
 	useEffect(() => {
 		setTableDataSet(
-			getDefaultTableDataSet(config.getConfig() as uPlot.Options, alignedData),
-		);
-	}, [alignedData, config]);
-
-	const filterHandler = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = event.target.value.toString().toLowerCase();
-			const updatedDataSet = tableDataSet.map((item) => {
-				if (item.label?.toLocaleLowerCase().includes(value)) {
-					return { ...item, show: true };
-				}
-				return { ...item, show: false };
-			});
-			setTableDataSet(updatedDataSet);
-		},
-		[tableDataSet],
-	);
-
-	const dataSource = useMemo(
-		() =>
-			tableDataSet.filter(
-				(item, index) => index !== 0 && item.show, // skipping the first item as it is the x-axis
+			getDefaultTableDataSet(
+				config.getConfig() as uPlot.Options,
+				alignedData,
+				decimalPrecision,
 			),
-		[tableDataSet],
+		);
+		setFilterValue('');
+	}, [alignedData, config, decimalPrecision]);
+
+	const handleFilterChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>): void => {
+			setFilterValue(e.target.value.toLowerCase());
+		},
+		[],
 	);
 
+	const handleToggleSeriesOnOff = useCallback(
+		(index: number): void => {
+			onToggleSeriesOnOff(index);
+		},
+		[onToggleSeriesOnOff],
+	);
+
+	const dataSource = useMemo(() => {
+		const filter = filterValue.trim();
+		return tableDataSet.filter((item, index) => {
+			if (index === X_AXIS_INDEX) {
+				return false;
+			}
+			if (!filter) {
+				return true;
+			}
+			return item.label?.toLowerCase().includes(filter) ?? false;
+		});
+	}, [tableDataSet, filterValue]);
+
 	const columns = useMemo(
 		() =>
-			getGraphManagerTableColumns({
+			getChartManagerColumns({
 				tableDataSet,
-				checkBoxOnChangeHandler: (_e, index) => {
-					onToggleSeriesOnOff(index);
-				},
 				graphVisibilityState,
-				labelClickedHandler: onToggleSeriesVisibility,
+				onToggleSeriesOnOff: handleToggleSeriesOnOff,
+				onToggleSeriesVisibility,
 				yAxisUnit,
 				isGraphDisabled: isDashboardLocked,
+				decimalPrecision,
 			}),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[tableDataSet, graphVisibilityState, yAxisUnit, isDashboardLocked],
+		[
+			tableDataSet,
+			graphVisibilityState,
+			handleToggleSeriesOnOff,
+			onToggleSeriesVisibility,
+			yAxisUnit,
+			isDashboardLocked,
+			decimalPrecision,
+		],
 	);
 
 	const handleSave = useCallback((): void => {
@@ -114,15 +135,18 @@ export default function ChartManager({
 		notifications.success({
 			message: 'The updated graphs & legends are saved',
 		});
-		if (onCancel) {
-			onCancel();
-		}
+		onCancel?.();
 	}, [syncSeriesVisibilityToLocalStorage, notifications, onCancel]);
 
 	return (
 		<div className="chart-manager-container">
 			<div className="chart-manager-header">
-				<Input onChange={filterHandler} placeholder="Filter Series" />
+				<Input
+					placeholder="Filter Series"
+					value={filterValue}
+					onChange={handleFilterChange}
+					data-testid="filter-input"
+				/>
 				<div className="chart-manager-actions-container">
 					<Button type="default" onClick={onCancel}>
 						Cancel
@@ -136,10 +160,10 @@ export default function ChartManager({
 				<ResizeTable
 					columns={columns}
 					dataSource={dataSource}
-					virtual
 					rowKey="index"
 					scroll={{ y: 200 }}
 					pagination={false}
+					virtual
 				/>
 			</div>
 		</div>

frontend/src/container/DashboardContainer/visualization/components/ChartManager/SeriesLabel.tsx

@@ -0,0 +1,31 @@
+import { Tooltip } from 'antd';
+
+import './ChartManager.styles.scss';
+
+interface SeriesLabelProps {
+	label: string;
+	labelIndex: number;
+	onClick: (idx: number) => void;
+	disabled?: boolean;
+}
+
+export function SeriesLabel({
+	label,
+	labelIndex,
+	onClick,
+	disabled,
+}: SeriesLabelProps): JSX.Element {
+	return (
+		<Tooltip placement="topLeft" title={label}>
+			<button
+				className="chart-manager-series-label"
+				disabled={disabled}
+				type="button"
+				data-testid={`series-label-button-${labelIndex}`}
+				onClick={(): void => onClick(labelIndex)}
+			>
+				{label}
+			</button>
+		</Tooltip>
+	);
+}

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/ChartManager.test.tsx

@@ -0,0 +1,172 @@
+import userEvent from '@testing-library/user-event';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { render, screen } from 'tests/test-utils';
+
+import ChartManager from '../ChartManager';
+
+const mockSyncSeriesVisibilityToLocalStorage = jest.fn();
+const mockNotificationsSuccess = jest.fn();
+
+jest.mock('lib/uPlotV2/context/PlotContext', () => ({
+	usePlotContext: (): {
+		onToggleSeriesOnOff: jest.Mock;
+		onToggleSeriesVisibility: jest.Mock;
+		syncSeriesVisibilityToLocalStorage: jest.Mock;
+	} => ({
+		onToggleSeriesOnOff: jest.fn(),
+		onToggleSeriesVisibility: jest.fn(),
+		syncSeriesVisibilityToLocalStorage: mockSyncSeriesVisibilityToLocalStorage,
+	}),
+}));
+
+jest.mock('lib/uPlotV2/hooks/useLegendsSync', () => ({
+	__esModule: true,
+	default: (): {
+		legendItemsMap: { [key: number]: { show: boolean; label: string } };
+	} => ({
+		legendItemsMap: {
+			0: { show: true, label: 'Time' },
+			1: { show: true, label: 'Series 1' },
+			2: { show: true, label: 'Series 2' },
+		},
+	}),
+}));
+
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): { isDashboardLocked: boolean } => ({
+		isDashboardLocked: false,
+	}),
+}));
+
+jest.mock('hooks/useNotifications', () => ({
+	useNotifications: (): { notifications: { success: jest.Mock } } => ({
+		notifications: {
+			success: mockNotificationsSuccess,
+		},
+	}),
+}));
+
+jest.mock('components/ResizeTable', () => {
+	const MockTable = ({
+		dataSource,
+		columns,
+	}: {
+		dataSource: { index: number; label?: string }[];
+		columns: { key: string; title: string }[];
+	}): JSX.Element => (
+		<div data-testid="resize-table">
+			{columns.map((col) => (
+				<span key={col.key}>{col.title}</span>
+			))}
+			{dataSource.map((row) => (
+				<div key={row.index} data-testid={`row-${row.index}`}>
+					{row.label}
+				</div>
+			))}
+		</div>
+	);
+	return { ResizeTable: MockTable };
+});
+
+const createMockConfig = (): { getConfig: () => uPlot.Options } => ({
+	getConfig: (): uPlot.Options => ({
+		width: 100,
+		height: 100,
+		series: [
+			{ label: 'Time', value: 'time' },
+			{ label: 'Series 1', scale: 'y' },
+			{ label: 'Series 2', scale: 'y' },
+		],
+	}),
+});
+
+const createAlignedData = (): uPlot.AlignedData => [
+	[1000, 2000, 3000],
+	[10, 20, 30],
+	[1, 2, 3],
+];
+
+describe('ChartManager', () => {
+	const mockOnCancel = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders filter input and action buttons', () => {
+		render(
+			<ChartManager
+				config={createMockConfig() as any}
+				alignedData={createAlignedData()}
+				onCancel={mockOnCancel}
+			/>,
+		);
+
+		expect(screen.getByPlaceholderText('Filter Series')).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /Cancel/ })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /Save/ })).toBeInTheDocument();
+	});
+
+	it('renders ResizeTable with data', () => {
+		render(
+			<ChartManager
+				config={createMockConfig() as UPlotConfigBuilder}
+				alignedData={createAlignedData()}
+			/>,
+		);
+
+		expect(screen.getByTestId('resize-table')).toBeInTheDocument();
+	});
+
+	it('calls onCancel when Cancel button is clicked', async () => {
+		render(
+			<ChartManager
+				config={createMockConfig() as UPlotConfigBuilder}
+				alignedData={createAlignedData()}
+				onCancel={mockOnCancel}
+			/>,
+		);
+
+		await userEvent.click(screen.getByRole('button', { name: /Cancel/ }));
+
+		expect(mockOnCancel).toHaveBeenCalledTimes(1);
+	});
+
+	it('filters table data when typing in filter input', async () => {
+		render(
+			<ChartManager
+				config={createMockConfig() as UPlotConfigBuilder}
+				alignedData={createAlignedData()}
+			/>,
+		);
+
+		// Before filter: both Series 1 and Series 2 rows are visible
+		expect(screen.getByTestId('row-1')).toBeInTheDocument();
+		expect(screen.getByTestId('row-2')).toBeInTheDocument();
+
+		const filterInput = screen.getByTestId('filter-input');
+		await userEvent.type(filterInput, 'Series 1');
+
+		// After filter: only Series 1 row is visible, Series 2 row is filtered out
+		expect(screen.getByTestId('row-1')).toBeInTheDocument();
+		expect(screen.queryByTestId('row-2')).not.toBeInTheDocument();
+	});
+
+	it('calls syncSeriesVisibilityToLocalStorage, notifications.success, and onCancel when Save is clicked', async () => {
+		render(
+			<ChartManager
+				config={createMockConfig() as UPlotConfigBuilder}
+				alignedData={createAlignedData()}
+				onCancel={mockOnCancel}
+			/>,
+		);
+
+		await userEvent.click(screen.getByRole('button', { name: /Save/ }));
+
+		expect(mockSyncSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
+		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
+			message: 'The updated graphs & legends are saved',
+		});
+		expect(mockOnCancel).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/SeriesLabel.test.tsx

@@ -0,0 +1,39 @@
+import userEvent from '@testing-library/user-event';
+import { render, screen } from 'tests/test-utils';
+
+import { SeriesLabel } from '../SeriesLabel';
+
+describe('SeriesLabel', () => {
+	it('renders the label text', () => {
+		render(
+			<SeriesLabel label="Test Series Label" labelIndex={1} onClick={jest.fn()} />,
+		);
+		expect(screen.getByTestId('series-label-button-1')).toHaveTextContent(
+			'Test Series Label',
+		);
+	});
+
+	it('calls onClick with labelIndex when clicked', async () => {
+		const onClick = jest.fn();
+		render(<SeriesLabel label="Series A" labelIndex={2} onClick={onClick} />);
+
+		await userEvent.click(screen.getByTestId('series-label-button-2'));
+
+		expect(onClick).toHaveBeenCalledWith(2);
+		expect(onClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('renders disabled button when disabled prop is true', () => {
+		render(
+			<SeriesLabel label="Disabled" labelIndex={0} onClick={jest.fn()} disabled />,
+		);
+		const button = screen.getByTestId('series-label-button-0');
+		expect(button).toBeDisabled();
+	});
+
+	it('has chart-manager-series-label class', () => {
+		render(<SeriesLabel label="Label" labelIndex={0} onClick={jest.fn()} />);
+		const button = screen.getByTestId('series-label-button-0');
+		expect(button).toHaveClass('chart-manager-series-label');
+	});
+});

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/getChartManagerColumns.test.tsx

@@ -0,0 +1,167 @@
+import { render } from '@testing-library/react';
+import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
+import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
+
+import { getChartManagerColumns } from '../getChartMangerColumns';
+import { ExtendedChartDataset } from '../utils';
+
+const createMockDataset = (
+	index: number,
+	overrides: Partial<ExtendedChartDataset> = {},
+): ExtendedChartDataset =>
+	({
+		index,
+		label: `Series ${index}`,
+		show: true,
+		sum: 100,
+		avg: 50,
+		min: 10,
+		max: 90,
+		stroke: '#ff0000',
+		...overrides,
+	} as ExtendedChartDataset);
+
+describe('getChartManagerColumns', () => {
+	const tableDataSet: ExtendedChartDataset[] = [
+		createMockDataset(0, { label: 'Time' }),
+		createMockDataset(1),
+		createMockDataset(2),
+	];
+	const graphVisibilityState = [true, true, false];
+	const onToggleSeriesOnOff = jest.fn();
+	const onToggleSeriesVisibility = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('returns columns with expected structure', () => {
+		const columns = getChartManagerColumns({
+			tableDataSet,
+			graphVisibilityState,
+			onToggleSeriesOnOff,
+			onToggleSeriesVisibility,
+		});
+
+		expect(columns).toHaveLength(6);
+		expect(columns[0].key).toBe('index');
+		expect(columns[1].key).toBe('label');
+		expect(columns[2].key).toBe('avg');
+		expect(columns[3].key).toBe('sum');
+		expect(columns[4].key).toBe('max');
+		expect(columns[5].key).toBe('min');
+	});
+
+	it('includes Label column with title', () => {
+		const columns = getChartManagerColumns({
+			tableDataSet,
+			graphVisibilityState,
+			onToggleSeriesOnOff,
+			onToggleSeriesVisibility,
+		});
+
+		const labelCol = columns.find((c) => c.key === 'label');
+		expect(labelCol!.title).toBe('Label');
+	});
+
+	it('formats column titles with yAxisUnit', () => {
+		const columns = getChartManagerColumns({
+			tableDataSet,
+			graphVisibilityState,
+			onToggleSeriesOnOff,
+			onToggleSeriesVisibility,
+			yAxisUnit: 'ms',
+		});
+
+		const avgCol = columns.find((c) => c.key === 'avg');
+		expect(avgCol!.title).toBe(
+			`Avg (in ${Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MILLISECONDS]})`,
+		);
+	});
+
+	it('numeric column render returns formatted string with yAxisUnit', () => {
+		const columns = getChartManagerColumns({
+			tableDataSet,
+			graphVisibilityState,
+			onToggleSeriesOnOff,
+			onToggleSeriesVisibility,
+			yAxisUnit: 'ms',
+		});
+
+		const avgCol = columns.find((c) => c.key === 'avg');
+		const renderFn = avgCol?.render as
+			| ((val: number, record: ExtendedChartDataset, index: number) => string)
+			| undefined;
+		expect(renderFn).toBeDefined();
+		const output = renderFn!(123.45, tableDataSet[1], 1);
+		expect(output).toBe('123.45 ms');
+	});
+
+	it('numeric column render formats zero when value is undefined', () => {
+		const columns = getChartManagerColumns({
+			tableDataSet,
+			graphVisibilityState,
+			onToggleSeriesOnOff,
+			onToggleSeriesVisibility,
+			yAxisUnit: 'none',
+		});
+
+		const sumCol = columns.find((c) => c.key === 'sum');
+		const renderFn = sumCol?.render as
+			| ((
+					val: number | undefined,
+					record: ExtendedChartDataset,
+					index: number,
+			  ) => string)
+			| undefined;
+		const output = renderFn!(undefined, tableDataSet[1], 1);
+		expect(output).toBe('0');
+	});
+
+	it('label column render displays label text and is clickable', () => {
+		const columns = getChartManagerColumns({
+			tableDataSet,
+			graphVisibilityState,
+			onToggleSeriesOnOff,
+			onToggleSeriesVisibility,
+		});
+
+		const labelCol = columns.find((c) => c.key === 'label');
+		const renderFn = labelCol!.render as
+			| ((
+					label: string,
+					record: ExtendedChartDataset,
+					index: number,
+			  ) => JSX.Element)
+			| undefined;
+		expect(renderFn).toBeDefined();
+		const renderResult = renderFn!('Series 1', tableDataSet[1], 1);
+
+		const { getByRole } = render(renderResult);
+		expect(getByRole('button', { name: 'Series 1' })).toBeInTheDocument();
+	});
+
+	it('index column render renders checkbox with correct checked state', () => {
+		const columns = getChartManagerColumns({
+			tableDataSet,
+			graphVisibilityState,
+			onToggleSeriesOnOff,
+			onToggleSeriesVisibility,
+		});
+
+		const indexCol = columns.find((c) => c.key === 'index');
+		const renderFn = indexCol!.render as
+			| ((
+					_val: unknown,
+					record: ExtendedChartDataset,
+					index: number,
+			  ) => JSX.Element)
+			| undefined;
+		expect(renderFn).toBeDefined();
+		const { container } = render(renderFn!(null, tableDataSet[1], 1));
+
+		const checkbox = container.querySelector('input[type="checkbox"]');
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toBeChecked(); // graphVisibilityState[1] is true
+	});
+});

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/utils.test.ts

@@ -0,0 +1,113 @@
+import { PrecisionOptionsEnum } from 'components/Graph/types';
+
+import {
+	formatTableValueWithUnit,
+	getDefaultTableDataSet,
+	getTableColumnTitle,
+} from '../utils';
+
+describe('ChartManager utils', () => {
+	describe('getDefaultTableDataSet', () => {
+		const createOptions = (seriesCount: number): uPlot.Options => ({
+			series: Array.from({ length: seriesCount }, (_, i) =>
+				i === 0
+					? { label: 'Time', value: 'time' }
+					: { label: `Series ${i}`, scale: 'y' },
+			),
+			width: 100,
+			height: 100,
+		});
+
+		it('returns one row per series with computed stats', () => {
+			const options = createOptions(3);
+			const data: uPlot.AlignedData = [
+				[1000, 2000, 3000],
+				[10, 20, 30],
+				[1, 2, 3],
+			];
+
+			const result = getDefaultTableDataSet(options, data);
+
+			expect(result).toHaveLength(3);
+			expect(result[0]).toMatchObject({
+				index: 0,
+				label: 'Time',
+				show: true,
+			});
+			expect(result[1]).toMatchObject({
+				index: 1,
+				label: 'Series 1',
+				show: true,
+				sum: 60,
+				avg: 20,
+				max: 30,
+				min: 10,
+			});
+			expect(result[2]).toMatchObject({
+				index: 2,
+				label: 'Series 2',
+				show: true,
+				sum: 6,
+				avg: 2,
+				max: 3,
+				min: 1,
+			});
+		});
+
+		it('handles empty data arrays', () => {
+			const options = createOptions(2);
+			const data: uPlot.AlignedData = [[], []];
+
+			const result = getDefaultTableDataSet(options, data);
+
+			expect(result[0]).toMatchObject({
+				sum: 0,
+				avg: 0,
+				max: 0,
+				min: 0,
+			});
+		});
+
+		it('respects decimalPrecision parameter', () => {
+			const options = createOptions(2);
+			const data: uPlot.AlignedData = [[1000], [123.454]];
+
+			const resultTwo = getDefaultTableDataSet(
+				options,
+				data,
+				PrecisionOptionsEnum.TWO,
+			);
+			expect(resultTwo[1].avg).toBe(123.45);
+
+			const resultZero = getDefaultTableDataSet(
+				options,
+				data,
+				PrecisionOptionsEnum.ZERO,
+			);
+			expect(resultZero[1].avg).toBe(123);
+		});
+	});
+
+	describe('formatTableValueWithUnit', () => {
+		it('formats value with unit', () => {
+			const result = formatTableValueWithUnit(1234.56, 'ms');
+			expect(result).toBe('1.23 s');
+		});
+
+		it('falls back to none format when yAxisUnit is undefined', () => {
+			const result = formatTableValueWithUnit(123.45);
+			expect(result).toBe('123.45');
+		});
+	});
+
+	describe('getTableColumnTitle', () => {
+		it('returns title only when yAxisUnit is undefined', () => {
+			expect(getTableColumnTitle('Avg')).toBe('Avg');
+		});
+
+		it('returns title with unit when yAxisUnit is provided', () => {
+			const result = getTableColumnTitle('Avg', 'ms');
+			expect(result).toBe('Avg (in Milliseconds (ms))');
+		});
+	});
+});

frontend/src/container/DashboardContainer/visualization/components/ChartManager/getChartMangerColumns.tsx

@@ -0,0 +1,94 @@
+import { ColumnType } from 'antd/es/table';
+import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
+import CustomCheckBox from 'container/GridCardLayout/GridCard/FullView/TableRender/CustomCheckBox';
+
+import { SeriesLabel } from './SeriesLabel';
+import {
+	ExtendedChartDataset,
+	formatTableValueWithUnit,
+	getTableColumnTitle,
+} from './utils';
+
+export interface GetChartManagerColumnsParams {
+	tableDataSet: ExtendedChartDataset[];
+	graphVisibilityState: boolean[];
+	onToggleSeriesOnOff: (index: number) => void;
+	onToggleSeriesVisibility: (index: number) => void;
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
+	isGraphDisabled?: boolean;
+}
+
+export function getChartManagerColumns({
+	tableDataSet,
+	graphVisibilityState,
+	onToggleSeriesOnOff,
+	onToggleSeriesVisibility,
+	yAxisUnit,
+	decimalPrecision = PrecisionOptionsEnum.TWO,
+	isGraphDisabled,
+}: GetChartManagerColumnsParams): ColumnType<ExtendedChartDataset>[] {
+	return [
+		{
+			title: '',
+			width: 50,
+			dataIndex: 'index',
+			key: 'index',
+			render: (_: unknown, record: ExtendedChartDataset): JSX.Element => (
+				<CustomCheckBox
+					data={tableDataSet}
+					graphVisibilityState={graphVisibilityState}
+					index={record.index}
+					disabled={isGraphDisabled}
+					checkBoxOnChangeHandler={(_e, idx): void => onToggleSeriesOnOff(idx)}
+				/>
+			),
+		},
+		{
+			title: 'Label',
+			width: 300,
+			dataIndex: 'label',
+			key: 'label',
+			render: (label: string, record: ExtendedChartDataset): JSX.Element => (
+				<SeriesLabel
+					label={label ?? ''}
+					labelIndex={record.index}
+					disabled={isGraphDisabled}
+					onClick={onToggleSeriesVisibility}
+				/>
+			),
+		},
+		{
+			title: getTableColumnTitle('Avg', yAxisUnit),
+			width: 90,
+			dataIndex: 'avg',
+			key: 'avg',
+			render: (val: number | undefined): string =>
+				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
+		},
+		{
+			title: getTableColumnTitle('Sum', yAxisUnit),
+			width: 90,
+			dataIndex: 'sum',
+			key: 'sum',
+			render: (val: number | undefined): string =>
+				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
+		},
+		{
+			title: getTableColumnTitle('Max', yAxisUnit),
+			width: 90,
+			dataIndex: 'max',
+			key: 'max',
+			render: (val: number | undefined): string =>
+				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
+		},
+		{
+			title: getTableColumnTitle('Min', yAxisUnit),
+			width: 90,
+			dataIndex: 'min',
+			key: 'min',
+			render: (val: number | undefined): string =>
+				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
+		},
+	];
+}

frontend/src/container/DashboardContainer/visualization/components/ChartManager/utils.ts

@@ -0,0 +1,93 @@
+import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
+import uPlot from 'uplot';
+
+/** Extended series with computed stats for table display */
+export type ExtendedChartDataset = uPlot.Series & {
+	show: boolean;
+	sum: number;
+	avg: number;
+	min: number;
+	max: number;
+	index: number;
+};
+
+function roundToDecimalPrecision(
+	value: number,
+	decimalPrecision: PrecisionOption = PrecisionOptionsEnum.TWO,
+): number {
+	if (
+		typeof value !== 'number' ||
+		Number.isNaN(value) ||
+		value === Infinity ||
+		value === -Infinity
+	) {
+		return 0;
+	}
+
+	if (decimalPrecision === PrecisionOptionsEnum.FULL) {
+		return value;
+	}
+
+	// regex to match the decimal precision for the given decimal precision
+	const regex = new RegExp(`^-?\\d*\\.?0*\\d{0,${decimalPrecision}}`);
+	const matched = value ? value.toFixed(decimalPrecision).match(regex) : null;
+	return matched ? parseFloat(matched[0]) : 0;
+}
+
+/** Build table dataset from uPlot options and aligned data */
+export function getDefaultTableDataSet(
+	options: uPlot.Options,
+	data: uPlot.AlignedData,
+	decimalPrecision: PrecisionOption = PrecisionOptionsEnum.TWO,
+): ExtendedChartDataset[] {
+	return options.series.map(
+		(series: uPlot.Series, index: number): ExtendedChartDataset => {
+			const arr = (data[index] as number[]) ?? [];
+			const sum = arr.reduce((a, b) => a + b, 0) || 0;
+			const count = arr.length || 1;
+
+			const hasValues = arr.length > 0;
+			return {
+				...series,
+				index,
+				show: true,
+				sum: roundToDecimalPrecision(sum, decimalPrecision),
+				avg: roundToDecimalPrecision(sum / count, decimalPrecision),
+				max: hasValues
+					? roundToDecimalPrecision(Math.max(...arr), decimalPrecision)
+					: 0,
+				min: hasValues
+					? roundToDecimalPrecision(Math.min(...arr), decimalPrecision)
+					: 0,
+			};
+		},
+	);
+}
+
+/** Format numeric value for table display using yAxisUnit */
+export function formatTableValueWithUnit(
+	value: number,
+	yAxisUnit?: string,
+	decimalPrecision: PrecisionOption = PrecisionOptionsEnum.TWO,
+): string {
+	return `${getYAxisFormattedValue(
+		String(value),
+		yAxisUnit ?? 'none',
+		decimalPrecision,
+	)}`;
+}
+
+/** Format column header with optional unit */
+export function getTableColumnTitle(title: string, yAxisUnit?: string): string {
+	if (!yAxisUnit) {
+		return title;
+	}
+	const universalName =
+		Y_AXIS_UNIT_NAMES[yAxisUnit as keyof typeof Y_AXIS_UNIT_NAMES];
+	if (!universalName) {
+		return `${title} (in ${yAxisUnit})`;
+	}
+	return `${title} (in ${universalName})`;
+}

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

@@ -96,6 +96,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 				config={config}
 				alignedData={chartData}
 				yAxisUnit={widget.yAxisUnit}
+				decimalPrecision={widget.decimalPrecision}
 				onCancel={onToggleModelHandler}
 			/>
 		);
@@ -105,6 +106,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		chartData,
 		widget.yAxisUnit,
 		onToggleModelHandler,
+		widget.decimalPrecision,
 	]);
 
 	const onPlotDestroy = useCallback(() => {

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

@@ -95,6 +95,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 				config={config}
 				alignedData={chartData}
 				yAxisUnit={widget.yAxisUnit}
+				decimalPrecision={widget.decimalPrecision}
 				onCancel={onToggleModelHandler}
 			/>
 		);
@@ -104,6 +105,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		chartData,
 		widget.yAxisUnit,
 		onToggleModelHandler,
+		widget.decimalPrecision,
 	]);
 
 	return (

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -178,7 +178,9 @@ export default function HostsListTable({
 				indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 			}}
 			tableLayout="fixed"
-			rowKey={(record): string => record.hostName}
+			rowKey={(record): string =>
+				(record as HostRowData & { key: string }).key ?? record.hostName
+			}
 			onChange={handleTableChange}
 			onRow={(record): { onClick: () => void; className: string } => ({
 				onClick: (): void => handleRowClick(record),

frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss

@@ -126,7 +126,8 @@
 				background: var(--bg-ink-500);
 			}
 
-			.ant-table-cell:has(.hostname-column-value) {
+			.ant-table-cell:has(.hostname-column-value),
+			.ant-table-cell:has(.hostname-cell-missing) {
 				background: var(--bg-ink-400);
 			}
 
@@ -139,6 +140,23 @@
 				letter-spacing: -0.07px;
 			}
 
+			.hostname-cell-missing {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+			}
+
+			.hostname-cell-placeholder {
+				color: var(--Vanilla-400, #c0c1c3);
+			}
+
+			.hostname-cell-warning-icon {
+				display: inline-flex;
+				align-items: center;
+				margin-left: 4px;
+				cursor: help;
+			}
+
 			.status-cell {
 				.active-tag {
 					color: var(--bg-forest-500);
@@ -357,7 +375,8 @@
 				color: var(--bg-ink-500);
 			}
 
-			.ant-table-cell:has(.hostname-column-value) {
+			.ant-table-cell:has(.hostname-column-value),
+			.ant-table-cell:has(.hostname-cell-missing) {
 				background: var(--bg-vanilla-100);
 			}
 
@@ -365,6 +384,10 @@
 				color: var(--bg-ink-300);
 			}
 
+			.hostname-cell-placeholder {
+				color: var(--text-ink-300);
+			}
+
 			.ant-table-tbody > tr:hover > td {
 				background: rgba(0, 0, 0, 0.04);
 			}

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

@@ -1,13 +1,24 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { HostData, TimeSeries } from 'api/infraMonitoring/getHostLists';
 
-import { formatDataForTable, GetHostsQuickFiltersConfig } from '../utils';
+import {
+	formatDataForTable,
+	GetHostsQuickFiltersConfig,
+	HostnameCell,
+} from '../utils';
 
 const PROGRESS_BAR_CLASS = '.progress-bar';
 
+const emptyTimeSeries: TimeSeries = {
+	labels: {},
+	labelsArray: [],
+	values: [],
+};
+
 describe('InfraMonitoringHosts utils', () => {
 	describe('formatDataForTable', () => {
 		it('should format host data correctly', () => {
-			const mockData = [
+			const mockData: HostData[] = [
 				{
 					hostName: 'test-host',
 					active: true,
@@ -16,8 +27,12 @@ describe('InfraMonitoringHosts utils', () => {
 					wait: 0.05,
 					load15: 2.5,
 					os: 'linux',
+					cpuTimeSeries: emptyTimeSeries,
+					memoryTimeSeries: emptyTimeSeries,
+					waitTimeSeries: emptyTimeSeries,
+					load15TimeSeries: emptyTimeSeries,
 				},
-			] as any;
+			];
 
 			const result = formatDataForTable(mockData);
 
@@ -46,7 +61,7 @@ describe('InfraMonitoringHosts utils', () => {
 		});
 
 		it('should handle inactive hosts', () => {
-			const mockData = [
+			const mockData: HostData[] = [
 				{
 					hostName: 'test-host',
 					active: false,
@@ -55,12 +70,12 @@ describe('InfraMonitoringHosts utils', () => {
 					wait: 0.02,
 					load15: 1.2,
 					os: 'linux',
-					cpuTimeSeries: [],
-					memoryTimeSeries: [],
-					waitTimeSeries: [],
-					load15TimeSeries: [],
+					cpuTimeSeries: emptyTimeSeries,
+					memoryTimeSeries: emptyTimeSeries,
+					waitTimeSeries: emptyTimeSeries,
+					load15TimeSeries: emptyTimeSeries,
 				},
-			] as any;
+			];
 
 			const result = formatDataForTable(mockData);
 
@@ -68,6 +83,65 @@ describe('InfraMonitoringHosts utils', () => {
 			expect(inactiveTag.container.textContent).toBe('INACTIVE');
 			expect(inactiveTag.container.querySelector('.inactive')).toBeTruthy();
 		});
+
+		it('should set hostName to empty string when host has no hostname', () => {
+			const mockData: HostData[] = [
+				{
+					hostName: '',
+					active: true,
+					cpu: 0.5,
+					memory: 0.4,
+					wait: 0.01,
+					load15: 1.0,
+					os: 'linux',
+					cpuTimeSeries: emptyTimeSeries,
+					memoryTimeSeries: emptyTimeSeries,
+					waitTimeSeries: emptyTimeSeries,
+					load15TimeSeries: emptyTimeSeries,
+				},
+			];
+
+			const result = formatDataForTable(mockData);
+			expect(result[0].hostName).toBe('');
+			expect(result[0].key).toBe('-0');
+		});
+	});
+
+	describe('HostnameCell', () => {
+		it('should render hostname when present (case A: no icon)', () => {
+			const { container } = render(<HostnameCell hostName="gke-prod-1" />);
+			expect(container.querySelector('.hostname-column-value')).toBeTruthy();
+			expect(container.textContent).toBe('gke-prod-1');
+			expect(container.querySelector('.hostname-cell-missing')).toBeFalsy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeFalsy();
+		});
+
+		it('should render placeholder and icon when hostName is empty (case B)', () => {
+			const { container } = render(<HostnameCell hostName="" />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			const iconWrapper = container.querySelector('.hostname-cell-warning-icon');
+			expect(iconWrapper).toBeTruthy();
+			expect(iconWrapper?.getAttribute('aria-label')).toBe(
+				'Missing host.name metadata',
+			);
+			expect(iconWrapper?.getAttribute('tabindex')).toBe('0');
+			// Tooltip with "Learn how to configure →" link is shown on hover/focus
+		});
+
+		it('should render placeholder and icon when hostName is whitespace only (case C)', () => {
+			const { container } = render(<HostnameCell hostName="   " />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeTruthy();
+		});
+
+		it('should render placeholder and icon when hostName is undefined (case D)', () => {
+			const { container } = render(<HostnameCell hostName={undefined} />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeTruthy();
+		});
 	});
 
 	describe('GetHostsQuickFiltersConfig', () => {

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, TabsProps, Tag, Tooltip } from 'antd';
+import { Progress, TabsProps, Tag, Tooltip, Typography } from 'antd';
 import { ColumnType } from 'antd/es/table';
 import {
 	HostData,
@@ -14,6 +14,7 @@ import {
 } from 'components/QuickFilters/types';
 import TabLabel from 'components/TabLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { TriangleAlert } from 'lucide-react';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -24,6 +25,7 @@ import HostsList from './HostsList';
 import './InfraMonitoring.styles.scss';
 
 export interface HostRowData {
+	key?: string;
 	hostName: string;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
@@ -32,6 +34,59 @@ export interface HostRowData {
 	active: React.ReactNode;
 }
 
+const HOSTNAME_DOCS_URL =
+	'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/#host-name-is-blankempty';
+
+export function HostnameCell({
+	hostName,
+}: {
+	hostName?: string | null;
+}): React.ReactElement {
+	const isEmpty = !hostName || !hostName.trim();
+	if (!isEmpty) {
+		return <div className="hostname-column-value">{hostName}</div>;
+	}
+	return (
+		<div className="hostname-cell-missing">
+			<Typography.Text type="secondary" className="hostname-cell-placeholder">
+				-
+			</Typography.Text>
+			<Tooltip
+				title={
+					<div>
+						Missing host.name metadata.
+						<br />
+						<a
+							href={HOSTNAME_DOCS_URL}
+							target="_blank"
+							rel="noopener noreferrer"
+							onClick={(e): void => e.stopPropagation()}
+						>
+							Learn how to configure →
+						</a>
+					</div>
+				}
+				trigger={['hover', 'focus']}
+			>
+				<span
+					className="hostname-cell-warning-icon"
+					tabIndex={0}
+					role="img"
+					aria-label="Missing host.name metadata"
+					onClick={(e): void => e.stopPropagation()}
+					onKeyDown={(e): void => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.stopPropagation();
+						}
+					}}
+				>
+					<TriangleAlert size={14} color={Color.BG_CHERRY_500} />
+				</span>
+			</Tooltip>
+		</div>
+	);
+}
+
 export interface HostsListTableProps {
 	isLoading: boolean;
 	isError: boolean;
@@ -75,8 +130,8 @@ export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
 		dataIndex: 'hostName',
 		key: 'hostName',
 		width: 250,
-		render: (value: string): React.ReactNode => (
-			<div className="hostname-column-value">{value}</div>
+		render: (value: string | undefined): React.ReactNode => (
+			<HostnameCell hostName={value ?? ''} />
 		),
 	},
 	{

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

@@ -1,375 +0,0 @@
-.permission-side-panel-backdrop {
-	position: fixed;
-	inset: 0;
-	z-index: 100;
-	background: transparent;
-}
-
-.permission-side-panel {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 101;
-	width: 720px;
-	display: flex;
-	flex-direction: column;
-	background: var(--bg-ink-400);
-	border-left: 1px solid var(--bg-slate-500);
-	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-	&__header {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-		flex-shrink: 0;
-		height: 48px;
-		padding: 0 16px;
-		background: var(--bg-ink-400);
-		border-bottom: 1px solid var(--bg-slate-500);
-	}
-
-	&__close {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 16px;
-		height: 16px;
-		padding: 0;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		color: var(--foreground);
-		flex-shrink: 0;
-
-		&:hover {
-			color: var(--text-base-white);
-		}
-	}
-
-	&__header-divider {
-		display: block;
-		width: 1px;
-		height: 16px;
-		background: var(--bg-slate-500);
-		flex-shrink: 0;
-	}
-
-	&__title {
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		color: var(--foreground);
-	}
-
-	&__content {
-		flex: 1;
-		overflow-y: auto;
-		padding: 12px 15px;
-	}
-
-	&__resource-list {
-		display: flex;
-		flex-direction: column;
-		border: 1px solid var(--bg-slate-500);
-		border-radius: 4px;
-		overflow: hidden;
-	}
-
-	&__footer {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		flex-shrink: 0;
-		height: 56px;
-		padding: 0 16px;
-		gap: 12px;
-		background: var(--bg-ink-400);
-		border-top: 1px solid var(--bg-slate-500);
-	}
-
-	&__unsaved {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		margin-right: auto;
-	}
-
-	&__unsaved-dot {
-		display: block;
-		width: 6px;
-		height: 6px;
-		border-radius: 50px;
-		background: var(--bg-robin-500);
-		box-shadow: 0px 0px 6px 0px rgba(78, 116, 248, 0.4);
-		flex-shrink: 0;
-	}
-
-	&__unsaved-text {
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 24px;
-		letter-spacing: -0.07px;
-		color: var(--bg-robin-400);
-	}
-
-	&__footer-actions {
-		display: flex;
-		align-items: center;
-		gap: 12px;
-	}
-
-	&__cancel-btn {
-		display: flex !important;
-		align-items: center !important;
-		gap: 4px !important;
-		padding: 4px 8px !important;
-		height: 32px !important;
-		background: var(--bg-slate-500) !important;
-		border: none !important;
-		border-radius: 2px !important;
-		font-family: Inter !important;
-		font-size: 12px !important;
-		font-weight: 500 !important;
-		line-height: 24px !important;
-		color: var(--foreground) !important;
-		cursor: pointer !important;
-		box-shadow: none !important;
-
-		&:hover {
-			background: var(--bg-slate-400) !important;
-			color: var(--text-base-white) !important;
-		}
-	}
-}
-
-.psp-resource {
-	display: flex;
-	flex-direction: column;
-	border-bottom: 1px solid var(--bg-slate-500);
-
-	&:last-child {
-		border-bottom: none;
-	}
-
-	&__row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 12px 16px;
-		cursor: pointer;
-		transition: background 0.15s ease;
-
-		&--expanded {
-			background: rgba(171, 189, 255, 0.04);
-		}
-
-		&:hover {
-			background: rgba(171, 189, 255, 0.03);
-		}
-	}
-
-	&__left {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-	}
-
-	&__chevron {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 14px;
-		height: 14px;
-		color: var(--foreground);
-		flex-shrink: 0;
-	}
-
-	&__label {
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		color: var(--text-base-white);
-		text-transform: capitalize;
-	}
-
-	&__switch-wrapper {
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-	}
-
-	// Expanded body
-	&__body {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		padding: 8px 0 8px 44px;
-		background: rgba(171, 189, 255, 0.04);
-	}
-
-	&__radio-group {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
-
-	&__radio-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 6px 0;
-
-		// RadioGroupLabel style
-		label {
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.07px;
-			color: var(--text-base-white);
-			cursor: pointer;
-		}
-	}
-
-	&__select-wrapper {
-		padding: 6px 16px 4px 24px;
-	}
-
-	&__select {
-		width: 100%;
-
-		.ant-select-selector {
-			background: var(--bg-ink-300) !important;
-			border: 1px solid var(--bg-slate-400) !important;
-			border-radius: 2px !important;
-			padding: 4px 6px !important;
-			min-height: 32px !important;
-			box-shadow: none !important;
-
-			&:hover,
-			&:focus-within {
-				border-color: var(--input) !important;
-				box-shadow: none !important;
-			}
-		}
-
-		.ant-select-selection-placeholder {
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			color: var(--foreground);
-			opacity: 0.4;
-		}
-
-		.ant-select-selection-item {
-			background: var(--bg-slate-300) !important;
-			border: none !important;
-			border-radius: 2px !important;
-			padding: 0 6px !important;
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 20px;
-			color: var(--text-base-white) !important;
-			height: auto !important;
-		}
-
-		.ant-select-selection-item-remove {
-			color: var(--foreground) !important;
-			display: flex;
-			align-items: center;
-		}
-
-		.ant-select-arrow {
-			color: var(--foreground);
-		}
-	}
-
-	&__select-popup {
-		.ant-select-item {
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			color: var(--foreground);
-			background: var(--bg-ink-300);
-
-			&-option-selected {
-				background: var(--bg-slate-400) !important;
-				color: var(--text-base-white) !important;
-			}
-
-			&-option-active {
-				background: rgba(171, 189, 255, 0.06) !important;
-			}
-		}
-
-		.ant-select-dropdown {
-			background: var(--bg-ink-300);
-			border: 1px solid var(--bg-slate-400);
-			border-radius: 2px;
-			padding: 4px 0;
-		}
-	}
-}
-
-.lightMode {
-	.permission-side-panel {
-		background: var(--bg-vanilla-100);
-		border-left-color: var(--bg-vanilla-300);
-
-		&__header {
-			background: var(--bg-vanilla-100);
-			border-bottom-color: var(--bg-vanilla-300);
-		}
-
-		&__header-divider {
-			background: var(--bg-vanilla-300);
-		}
-
-		&__footer {
-			background: var(--bg-vanilla-100);
-			border-top-color: var(--bg-vanilla-300);
-		}
-
-		&__cancel-btn {
-			background: var(--bg-vanilla-300) !important;
-			color: var(--bg-ink-400) !important;
-
-			&:hover {
-				background: var(--bg-vanilla-400) !important;
-			}
-		}
-	}
-
-	.psp-resource {
-		border-bottom-color: var(--bg-vanilla-300);
-
-		&__label {
-			color: var(--text-base-black);
-		}
-
-		&__radio-item label {
-			color: var(--text-base-black);
-		}
-
-		&__select .ant-select-selector {
-			background: var(--bg-vanilla-200) !important;
-			border-color: var(--bg-vanilla-300) !important;
-		}
-
-		&__select .ant-select-selection-item {
-			background: var(--bg-vanilla-300) !important;
-			color: var(--text-base-black) !important;
-		}
-	}
-
-	.permission-side-panel__resource-list {
-		border-color: var(--bg-vanilla-300);
-	}
-}

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.tsx

@@ -1,335 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { X } from '@signozhq/icons';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import {
-	RadioGroup,
-	RadioGroupItem,
-	RadioGroupLabel,
-} from '@signozhq/radio-group';
-import { Switch } from '@signozhq/switch';
-import { Select } from 'antd';
-
-import type {
-	PermissionConfig,
-	PermissionSidePanelProps,
-	ResourceConfig,
-	ResourceDefinition,
-	ScopeType,
-} from './PermissionSidePanel.types';
-
-import './PermissionSidePanel.styles.scss';
-
-const DEFAULT_RESOURCE_CONFIG: ResourceConfig = {
-	enabled: false,
-	scope: 'all',
-	selectedIds: [],
-};
-
-function buildConfig(
-	resources: ResourceDefinition[],
-	initial?: PermissionConfig,
-): PermissionConfig {
-	const config: PermissionConfig = {};
-	resources.forEach((r) => {
-		config[r.id] = initial?.[r.id] ?? { ...DEFAULT_RESOURCE_CONFIG };
-	});
-	return config;
-}
-
-function configsEqual(a: PermissionConfig, b: PermissionConfig): boolean {
-	return Object.keys(a).every((id) => {
-		const ac = a[id];
-		const bc = b[id];
-		if (!bc) {
-			return false;
-		}
-		return (
-			ac.enabled === bc.enabled &&
-			ac.scope === bc.scope &&
-			JSON.stringify([...ac.selectedIds].sort()) ===
-				JSON.stringify([...bc.selectedIds].sort())
-		);
-	});
-}
-
-interface ResourceRowProps {
-	resource: ResourceDefinition;
-	config: ResourceConfig;
-	isExpanded: boolean;
-	onToggle: (id: string, checked: boolean) => void;
-	onToggleExpand: (id: string) => void;
-	onScopeChange: (id: string, scope: ScopeType) => void;
-	onSelectedIdsChange: (id: string, ids: string[]) => void;
-}
-
-function ResourceRow({
-	resource,
-	config,
-	isExpanded,
-	onToggle,
-	onToggleExpand,
-	onScopeChange,
-	onSelectedIdsChange,
-}: ResourceRowProps): JSX.Element {
-	return (
-		<div className="psp-resource">
-			<div
-				className={`psp-resource__row${
-					isExpanded ? ' psp-resource__row--expanded' : ''
-				}`}
-				role="button"
-				tabIndex={0}
-				onClick={(): void => onToggleExpand(resource.id)}
-				onKeyDown={(e): void => {
-					if (e.key === 'Enter' || e.key === ' ') {
-						onToggleExpand(resource.id);
-					}
-				}}
-			>
-				<div className="psp-resource__left">
-					<span className="psp-resource__chevron">
-						{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-					</span>
-					<span className="psp-resource__label">{resource.label}</span>
-				</div>
-
-				<span
-					className="psp-resource__switch-wrapper"
-					role="presentation"
-					onClick={(e): void => e.stopPropagation()}
-					onKeyDown={(e): void => e.stopPropagation()}
-				>
-					<Switch
-						checked={config.enabled}
-						onCheckedChange={(checked): void => onToggle(resource.id, checked)}
-						color="robin"
-					/>
-				</span>
-			</div>
-
-			{isExpanded && (
-				<div className="psp-resource__body">
-					<RadioGroup
-						value={config.scope}
-						onValueChange={(val): void =>
-							onScopeChange(resource.id, val as ScopeType)
-						}
-						className="psp-resource__radio-group"
-					>
-						<div className="psp-resource__radio-item">
-							<RadioGroupItem value="all" id={`${resource.id}-all`} color="robin" />
-							<RadioGroupLabel htmlFor={`${resource.id}-all`}>All</RadioGroupLabel>
-						</div>
-
-						<div className="psp-resource__radio-item">
-							<RadioGroupItem
-								value="only_selected"
-								id={`${resource.id}-only-selected`}
-								color="robin"
-							/>
-							<RadioGroupLabel htmlFor={`${resource.id}-only-selected`}>
-								Only selected
-							</RadioGroupLabel>
-						</div>
-					</RadioGroup>
-
-					{config.scope === 'only_selected' && (
-						<div className="psp-resource__select-wrapper">
-							<Select
-								mode="multiple"
-								value={config.selectedIds}
-								onChange={(vals: string[]): void =>
-									onSelectedIdsChange(resource.id, vals)
-								}
-								options={resource.options ?? []}
-								placeholder="Select resources..."
-								className="psp-resource__select"
-								popupClassName="psp-resource__select-popup"
-								showSearch
-								filterOption={(input, option): boolean =>
-									String(option?.label ?? '')
-										.toLowerCase()
-										.includes(input.toLowerCase())
-								}
-							/>
-						</div>
-					)}
-				</div>
-			)}
-		</div>
-	);
-}
-
-function PermissionSidePanel({
-	open,
-	onClose,
-	permissionLabel,
-	resources,
-	initialConfig,
-	onSave,
-}: PermissionSidePanelProps): JSX.Element | null {
-	const [config, setConfig] = useState<PermissionConfig>(() =>
-		buildConfig(resources, initialConfig),
-	);
-	const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
-
-	useEffect(() => {
-		if (open) {
-			setConfig(buildConfig(resources, initialConfig));
-			setExpandedIds(new Set());
-		}
-	}, [open, resources, initialConfig]);
-
-	const savedConfig = useMemo(() => buildConfig(resources, initialConfig), [
-		resources,
-		initialConfig,
-	]);
-
-	const unsavedCount = useMemo(() => {
-		if (configsEqual(config, savedConfig)) {
-			return 0;
-		}
-		return Object.keys(config).filter((id) => {
-			const a = config[id];
-			const b = savedConfig[id];
-			if (!b) {
-				return true;
-			}
-			return (
-				a.enabled !== b.enabled ||
-				a.scope !== b.scope ||
-				JSON.stringify([...a.selectedIds].sort()) !==
-					JSON.stringify([...b.selectedIds].sort())
-			);
-		}).length;
-	}, [config, savedConfig]);
-
-	const updateResource = useCallback(
-		(id: string, patch: Partial<ResourceConfig>): void => {
-			setConfig((prev) => ({
-				...prev,
-				[id]: { ...prev[id], ...patch },
-			}));
-		},
-		[],
-	);
-
-	const handleToggle = useCallback(
-		(id: string, checked: boolean): void => {
-			updateResource(id, { enabled: checked });
-		},
-		[updateResource],
-	);
-
-	const handleToggleExpand = useCallback((id: string): void => {
-		setExpandedIds((prev) => {
-			const next = new Set(prev);
-			if (next.has(id)) {
-				next.delete(id);
-			} else {
-				next.add(id);
-			}
-			return next;
-		});
-	}, []);
-
-	const handleScopeChange = useCallback(
-		(id: string, scope: ScopeType): void => {
-			updateResource(id, { scope, selectedIds: [] });
-		},
-		[updateResource],
-	);
-
-	const handleSelectedIdsChange = useCallback(
-		(id: string, ids: string[]): void => {
-			updateResource(id, { selectedIds: ids });
-		},
-		[updateResource],
-	);
-
-	const handleSave = useCallback((): void => {
-		onSave(config);
-		onClose();
-	}, [config, onSave, onClose]);
-
-	const handleDiscard = useCallback((): void => {
-		setConfig(buildConfig(resources, initialConfig));
-		setExpandedIds(new Set());
-	}, [resources, initialConfig]);
-
-	if (!open) {
-		return null;
-	}
-
-	return (
-		<>
-			<div
-				className="permission-side-panel-backdrop"
-				role="presentation"
-				onClick={onClose}
-			/>
-
-			<div className="permission-side-panel">
-				<div className="permission-side-panel__header">
-					<button
-						type="button"
-						className="permission-side-panel__close"
-						onClick={onClose}
-						aria-label="Close panel"
-					>
-						<X size={16} />
-					</button>
-					<span className="permission-side-panel__header-divider" />
-					<span className="permission-side-panel__title">
-						Edit {permissionLabel} Permissions
-					</span>
-				</div>
-
-				<div className="permission-side-panel__content">
-					<div className="permission-side-panel__resource-list">
-						{resources.map((resource) => (
-							<ResourceRow
-								key={resource.id}
-								resource={resource}
-								config={config[resource.id] ?? DEFAULT_RESOURCE_CONFIG}
-								isExpanded={expandedIds.has(resource.id)}
-								onToggle={handleToggle}
-								onToggleExpand={handleToggleExpand}
-								onScopeChange={handleScopeChange}
-								onSelectedIdsChange={handleSelectedIdsChange}
-							/>
-						))}
-					</div>
-				</div>
-
-				<div className="permission-side-panel__footer">
-					{unsavedCount > 0 && (
-						<div className="permission-side-panel__unsaved">
-							<span className="permission-side-panel__unsaved-dot" />
-							<span className="permission-side-panel__unsaved-text">
-								{unsavedCount} unsaved change{unsavedCount !== 1 ? 's' : ''}
-							</span>
-						</div>
-					)}
-
-					<div className="permission-side-panel__footer-actions">
-						<Button
-							className="permission-side-panel__cancel-btn"
-							prefixIcon={<X size={14} />}
-							onClick={unsavedCount > 0 ? handleDiscard : onClose}
-							size="sm"
-						>
-							{unsavedCount > 0 ? 'Discard' : 'Cancel'}
-						</Button>
-						<Button variant="solid" color="primary" size="sm" onClick={handleSave}>
-							Save Changes
-						</Button>
-					</div>
-				</div>
-			</div>
-		</>
-	);
-}
-
-export default PermissionSidePanel;

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.types.ts

@@ -1,35 +0,0 @@
-export interface ResourceOption {
-	value: string;
-	label: string;
-}
-
-export interface ResourceDefinition {
-	id: string;
-	label: string;
-	/** Options for the "Only selected" dropdown — to be populated via API */
-	options?: ResourceOption[];
-}
-
-export type ScopeType = 'all' | 'only_selected';
-
-export interface ResourceConfig {
-	enabled: boolean;
-	scope: ScopeType;
-	selectedIds: string[];
-}
-
-/** keyed by ResourceDefinition.id */
-export type PermissionConfig = Record<string, ResourceConfig>;
-
-export interface PermissionSidePanelProps {
-	open: boolean;
-	onClose: () => void;
-	/** e.g. "Read", "Create", "Delete" */
-	permissionLabel: string;
-	/** Ordered list of resources shown in the panel */
-	resources: ResourceDefinition[];
-	/** Pre-existing configuration to initialise from */
-	initialConfig?: PermissionConfig;
-	/** Called with the full resolved config when user saves */
-	onSave: (config: PermissionConfig) => void;
-}

frontend/src/container/RolesSettings/PermissionSidePanel/index.tsx

@@ -1,9 +0,0 @@
-export { default } from './PermissionSidePanel';
-export type {
-	PermissionConfig,
-	PermissionSidePanelProps,
-	ResourceConfig,
-	ResourceDefinition,
-	ResourceOption,
-	ScopeType,
-} from './PermissionSidePanel.types';

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

@@ -1,500 +0,0 @@
-.role-details-page {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	padding: 16px;
-	width: 100%;
-	max-width: 60vw;
-	margin: 0 auto;
-
-	.role-details-header {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-	}
-
-	.role-details-title {
-		color: var(--text-base-white);
-		font-family: Inter;
-		font-size: 18px;
-		font-weight: 500;
-		line-height: 28px;
-		letter-spacing: -0.09px;
-	}
-
-	.role-details-nav {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.role-details-tabs {
-		display: flex;
-		align-items: center;
-		background: var(--bg-ink-400);
-		border: 1px solid var(--bg-slate-400);
-		border-radius: 2px;
-		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		height: 32px;
-		overflow: hidden;
-	}
-
-	.role-details-tab {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		padding: 0 16px;
-		height: 32px;
-		cursor: pointer;
-		font-family: Inter;
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 18px;
-		letter-spacing: -0.06px;
-		color: var(--foreground);
-		background: transparent;
-		border: none;
-		white-space: nowrap;
-
-		&--active {
-			background: var(--bg-slate-400);
-			color: var(--text-base-white);
-			border-radius: 2px 0 0 2px;
-		}
-	}
-
-	.role-details-tab-count {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 20px;
-		padding: 0 6px;
-		border-radius: 50px;
-		background: var(--bg-slate-400);
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 20px;
-		color: var(--foreground);
-		letter-spacing: -0.06px;
-		text-transform: uppercase;
-	}
-
-	.role-details-actions {
-		display: flex;
-		align-items: center;
-		gap: 12px;
-	}
-
-	.role-details-overview {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-	}
-
-	.role-details-meta {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-	}
-
-	.role-details-section-label {
-		font-family: Inter;
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 20px;
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-		color: var(--foreground);
-	}
-
-	.role-details-description-text {
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 500;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		color: var(--foreground);
-	}
-
-	.role-details-info-row {
-		display: flex;
-		gap: 16px;
-		align-items: flex-start;
-	}
-
-	.role-details-info-col {
-		flex: 1;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	.role-details-info-value {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.role-details-info-name {
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 500;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		color: var(--foreground);
-	}
-
-	.role-details-permissions {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-		padding-top: 8px;
-	}
-
-	.role-details-permissions-header {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-		height: 20px;
-	}
-
-	.role-details-permissions-divider {
-		flex: 1;
-		border: none;
-		border-top: 2px dotted var(--bg-slate-300);
-		border-bottom: 2px dotted var(--bg-slate-300);
-		height: 7px;
-		margin: 0;
-	}
-
-	.role-details-permission-list {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-	}
-
-	.role-details-permission-item {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 44px;
-		padding: 0 12px;
-		background: rgba(171, 189, 255, 0.08);
-		border: 1px solid var(--bg-slate-500);
-		border-radius: 4px;
-		cursor: pointer;
-		transition: background 0.15s ease;
-
-		&:hover {
-			background: rgba(171, 189, 255, 0.12);
-		}
-	}
-
-	.role-details-permission-item-left {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.role-details-permission-item-label {
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		color: var(--text-base-white);
-	}
-
-	.role-details-badge {
-		display: inline-flex;
-		align-items: center;
-		padding: 4px 8px;
-		border-radius: 999px;
-		background: var(--bg-slate-400);
-		font-family: Inter;
-		font-size: 11px;
-		font-weight: 500;
-		line-height: 1;
-		letter-spacing: 0.44px;
-		text-transform: uppercase;
-		color: var(--foreground);
-	}
-
-	.role-details-members {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-	}
-
-	.role-details-members-search {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		height: 32px;
-		padding: 6px 6px 6px 8px;
-		background: var(--bg-ink-300);
-		border: 1px solid var(--bg-slate-400);
-		border-radius: 2px;
-
-		.role-details-members-search-icon {
-			flex-shrink: 0;
-			color: var(--foreground);
-			opacity: 0.5;
-		}
-
-		.role-details-members-search-input {
-			flex: 1;
-			height: 100%;
-			background: transparent;
-			border: none;
-			outline: none;
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 18px;
-			letter-spacing: -0.07px;
-			color: var(--foreground);
-
-			&::placeholder {
-				color: var(--foreground);
-				opacity: 0.4;
-			}
-		}
-	}
-
-	.role-details-members-content {
-		display: flex;
-		flex-direction: column;
-		min-height: 420px;
-		border: 1px dashed var(--bg-slate-500);
-		border-radius: 3px;
-		margin-top: -1px;
-	}
-
-	.role-details-members-empty-state {
-		display: flex;
-		flex: 1;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: 4px;
-		padding: 48px 0;
-		flex-grow: 1;
-
-		.role-details-members-empty-emoji {
-			font-size: 32px;
-			line-height: 1;
-		}
-
-		.role-details-members-empty-text {
-			font-family: Inter;
-			font-size: 14px;
-			line-height: 18px;
-			letter-spacing: -0.07px;
-
-			&--bold {
-				font-weight: 500;
-				color: var(--text-base-white);
-			}
-
-			&--muted {
-				font-weight: 400;
-				color: var(--foreground);
-			}
-		}
-	}
-
-	.role-details-skeleton {
-		padding: 16px 0;
-	}
-}
-
-.role-details-delete-action-btn {
-	display: flex !important;
-	align-items: center !important;
-	justify-content: center !important;
-	width: 32px !important;
-	height: 32px !important;
-	min-width: 32px !important;
-	border: none !important;
-	border-radius: 2px !important;
-	background: transparent !important;
-	color: var(--bg-cherry-500) !important;
-	opacity: 0.6 !important;
-	padding: 0 !important;
-	transition: background-color 0.2s, opacity 0.2s;
-	box-shadow: none !important;
-
-	svg {
-		color: var(--bg-cherry-500) !important;
-	}
-
-	&:hover {
-		background: rgba(229, 72, 77, 0.1) !important;
-		opacity: 0.9 !important;
-	}
-}
-
-.role-details-delete-modal {
-	width: calc(100% - 30px) !important;
-	max-width: 384px;
-
-	.ant-modal-content {
-		padding: 0;
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-500);
-		background: var(--bg-ink-400);
-		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-
-		.ant-modal-header {
-			padding: 16px;
-			background: var(--bg-ink-400);
-			margin-bottom: 0;
-		}
-
-		.ant-modal-body {
-			padding: 0 16px 28px 16px;
-		}
-
-		.ant-modal-footer {
-			display: flex;
-			justify-content: flex-end;
-			padding: 16px;
-			margin: 0;
-
-			.cancel-btn {
-				display: flex;
-				align-items: center;
-				border: none;
-				border-radius: 2px;
-				background: var(--bg-slate-500);
-			}
-
-			.delete-btn {
-				display: flex;
-				align-items: center;
-				border: none;
-				border-radius: 2px;
-				background: var(--bg-cherry-500);
-				margin-left: 12px;
-
-				&:hover {
-					color: var(--bg-vanilla-100);
-					background: var(--bg-cherry-600);
-				}
-			}
-		}
-	}
-
-	.title {
-		color: var(--bg-vanilla-100);
-		font-family: Inter;
-		font-size: 13px;
-		font-weight: 400;
-		line-height: 1;
-		letter-spacing: -0.065px;
-	}
-
-	.delete-text {
-		color: var(--bg-vanilla-400);
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-
-		strong {
-			font-weight: 600;
-			color: var(--bg-vanilla-100);
-		}
-	}
-}
-
-.lightMode {
-	.role-details-delete-modal {
-		.ant-modal-content {
-			border-color: var(--bg-vanilla-200);
-			background: var(--bg-vanilla-100);
-
-			.ant-modal-header {
-				background: var(--bg-vanilla-100);
-
-				.title {
-					color: var(--bg-ink-500);
-				}
-			}
-
-			.ant-modal-body {
-				.delete-text {
-					color: var(--bg-ink-500);
-
-					strong {
-						color: var(--bg-ink-400);
-					}
-				}
-			}
-
-			.ant-modal-footer {
-				.cancel-btn {
-					background: var(--bg-vanilla-300);
-					color: var(--bg-ink-400);
-				}
-			}
-		}
-	}
-}
-
-.lightMode {
-	.role-details-page {
-		.role-details-title {
-			color: var(--text-base-black);
-		}
-
-		.role-details-members-search {
-			background: var(--bg-vanilla-100);
-			border-color: var(--bg-vanilla-300);
-		}
-
-		.role-details-members-content {
-			border-color: var(--bg-vanilla-300);
-		}
-
-		.role-details-members-empty-state {
-			.role-details-members-empty-text--bold {
-				color: var(--text-base-black);
-			}
-		}
-
-		.role-details-tabs {
-			background: var(--bg-vanilla-100);
-			border-color: var(--bg-vanilla-300);
-		}
-
-		.role-details-tab--active {
-			background: var(--bg-vanilla-300);
-			color: var(--text-base-black);
-		}
-
-		.role-details-tab-count {
-			background: var(--bg-vanilla-300);
-		}
-
-		.role-details-permission-item {
-			background: rgba(0, 0, 0, 0.04);
-			border-color: var(--bg-vanilla-300);
-
-			&:hover {
-				background: rgba(0, 0, 0, 0.07);
-			}
-		}
-
-		.role-details-permission-item-label {
-			color: var(--text-base-black);
-		}
-
-		.role-details-badge {
-			background: var(--bg-vanilla-300);
-		}
-	}
-}

frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx

@@ -1,388 +0,0 @@
-import { useState } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/button';
-import { X } from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
-import { Modal, Skeleton } from 'antd';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { useDeleteRole, useGetRole } from 'api/generated/services/role';
-import { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
-import {
-	BadgePlus,
-	ChevronRight,
-	Eye,
-	LayoutList,
-	PencilRuler,
-	Search,
-	Table2,
-	Trash2,
-	Users,
-} from 'lucide-react';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import { useTimezone } from 'providers/Timezone';
-import { ErrorV2Resp } from 'types/api';
-import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
-
-import type {
-	PermissionConfig,
-	ResourceDefinition,
-} from '../PermissionSidePanel';
-import PermissionSidePanel from '../PermissionSidePanel';
-import CreateRoleModal from '../RolesComponents/CreateRoleModal';
-
-import './RoleDetailsPage.styles.scss';
-
-// Placeholder resources — replace with API-driven data when integrating
-const PERMISSION_RESOURCES: ResourceDefinition[] = [
-	{ id: 'dashboards', label: 'Dashboards' },
-	{ id: 'alerts', label: 'Alerts' },
-	{ id: 'logs_pipelines', label: 'Logs: Pipelines' },
-	{ id: 'logs_views', label: 'Logs: Views' },
-	{ id: 'traces_funnels', label: 'Traces: Funnels' },
-	{ id: 'traces_views', label: 'Traces: Views' },
-	{ id: 'integrations', label: 'Integrations' },
-	{ id: 'exceptions', label: 'Exceptions' },
-];
-
-type TabKey = 'overview' | 'members';
-
-interface PermissionType {
-	key: string;
-	label: string;
-	icon: JSX.Element;
-}
-
-const PERMISSION_TYPES: PermissionType[] = [
-	{ key: 'create', label: 'Create', icon: <BadgePlus size={14} /> },
-	{ key: 'list', label: 'List', icon: <LayoutList size={14} /> },
-	{ key: 'read', label: 'Read', icon: <Eye size={14} /> },
-	{ key: 'update', label: 'Update', icon: <PencilRuler size={14} /> },
-	{ key: 'delete', label: 'Delete', icon: <Trash2 size={14} /> },
-];
-
-interface OverviewTabProps {
-	role: RoletypesRoleDTO;
-	onPermissionClick: (permissionLabel: string) => void;
-}
-
-function TimestampBadge({ date }: { date?: Date | string }): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	if (!date) {
-		return <span className="role-details-badge">—</span>;
-	}
-
-	const d = new Date(date);
-	if (Number.isNaN(d.getTime())) {
-		return <span className="role-details-badge">—</span>;
-	}
-
-	const formatted = formatTimezoneAdjustedTimestamp(
-		date,
-		DATE_TIME_FORMATS.DASH_DATETIME,
-	);
-
-	return <span className="role-details-badge">{formatted}</span>;
-}
-
-function OverviewTab({
-	role,
-	onPermissionClick,
-}: OverviewTabProps): JSX.Element {
-	return (
-		<div className="role-details-overview">
-			<div className="role-details-meta">
-				<div>
-					<p className="role-details-section-label">Description</p>
-					<p className="role-details-description-text">{role.description || '—'}</p>
-				</div>
-
-				<div className="role-details-info-row">
-					<div className="role-details-info-col">
-						<p className="role-details-section-label">Created At</p>
-						<div className="role-details-info-value">
-							<TimestampBadge date={role.createdAt} />
-						</div>
-					</div>
-					<div className="role-details-info-col">
-						<p className="role-details-section-label">Last Modified At</p>
-						<div className="role-details-info-value">
-							<TimestampBadge date={role.updatedAt} />
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<div className="role-details-permissions">
-				<div className="role-details-permissions-header">
-					<span className="role-details-section-label">Permissions</span>
-					<hr className="role-details-permissions-divider" />
-				</div>
-
-				<div className="role-details-permission-list">
-					{PERMISSION_TYPES.map(({ key, label, icon }) => (
-						<div
-							key={key}
-							className="role-details-permission-item"
-							role="button"
-							tabIndex={0}
-							onClick={(): void => onPermissionClick(label)}
-							onKeyDown={(e): void => {
-								if (e.key === 'Enter' || e.key === ' ') {
-									onPermissionClick(label);
-								}
-							}}
-						>
-							<div className="role-details-permission-item-left">
-								{icon}
-								<span className="role-details-permission-item-label">{label}</span>
-							</div>
-							<ChevronRight size={14} color="var(--foreground)" />
-						</div>
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function MembersTab(): JSX.Element {
-	const [searchQuery, setSearchQuery] = useState('');
-
-	return (
-		<div className="role-details-members">
-			<div className="role-details-members-search">
-				<Search size={12} className="role-details-members-search-icon" />
-				<input
-					type="text"
-					className="role-details-members-search-input"
-					placeholder="Search and add members..."
-					value={searchQuery}
-					onChange={(e): void => setSearchQuery(e.target.value)}
-				/>
-			</div>
-
-			<div className="role-details-members-content">
-				<div className="role-details-members-empty-state">
-					<span
-						className="role-details-members-empty-emoji"
-						role="img"
-						aria-label="monocle face"
-					>
-						🧐
-					</span>
-					<p className="role-details-members-empty-text">
-						<span className="role-details-members-empty-text--bold">
-							No members added.
-						</span>{' '}
-						<span className="role-details-members-empty-text--muted">
-							Start adding members to this role.
-						</span>
-					</p>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function RoleDetailsPage(): JSX.Element {
-	const { pathname } = useLocation();
-	const history = useHistory();
-	const { showErrorModal } = useErrorModal();
-
-	// Extract roleId from pathname — useParams doesn't work inside nested RouteTab (antd Tabs) routing
-	const roleIdMatch = pathname.match(/\/settings\/roles\/([^/]+)/);
-	const roleId = roleIdMatch ? roleIdMatch[1] : '';
-
-	const [activeTab, setActiveTab] = useState<TabKey>('overview');
-	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-	const [activePermission, setActivePermission] = useState<string | null>(null);
-	const [permissionConfigs, setPermissionConfigs] = useState<
-		Record<string, PermissionConfig>
-	>({});
-
-	const { data, isLoading, isError, error } = useGetRole({ id: roleId });
-	const role = data?.data?.data;
-
-	const { mutate: deleteRole, isLoading: isDeleting } = useDeleteRole({
-		mutation: {
-			onSuccess: (): void => {
-				toast.success('Role deleted successfully');
-				history.push(ROUTES.ROLES_SETTINGS);
-			},
-			onError: (err): void => {
-				try {
-					ErrorResponseHandlerV2(err as AxiosError<ErrorV2Resp>);
-				} catch (apiError) {
-					showErrorModal(apiError as APIError);
-				}
-			},
-		},
-	});
-
-	const openEditModal = (): void => {
-		setIsEditModalOpen(true);
-	};
-
-	if (isLoading) {
-		return (
-			<div className="role-details-page">
-				<Skeleton
-					active
-					paragraph={{ rows: 8 }}
-					className="role-details-skeleton"
-				/>
-			</div>
-		);
-	}
-
-	if (isError || !role) {
-		return (
-			<div className="role-details-page">
-				<ErrorInPlace
-					error={toAPIError(
-						error,
-						'An unexpected error occurred while fetching role details.',
-					)}
-				/>
-			</div>
-		);
-	}
-
-	return (
-		<div className="role-details-page">
-			{/* Header */}
-			<div className="role-details-header">
-				<h2 className="role-details-title">Role — {role.name}</h2>
-			</div>
-
-			{/* Tab bar + Actions */}
-			<div className="role-details-nav">
-				<div className="role-details-tabs">
-					<button
-						type="button"
-						className={`role-details-tab${
-							activeTab === 'overview' ? ' role-details-tab--active' : ''
-						}`}
-						onClick={(): void => setActiveTab('overview')}
-					>
-						<Table2 size={14} />
-						Overview
-					</button>
-					<button
-						type="button"
-						className={`role-details-tab${
-							activeTab === 'members' ? ' role-details-tab--active' : ''
-						}`}
-						onClick={(): void => setActiveTab('members')}
-					>
-						<Users size={14} />
-						Members
-						<span className="role-details-tab-count">0</span>
-					</button>
-				</div>
-
-				<div className="role-details-actions">
-					<Button
-						variant="ghost"
-						color="secondary"
-						className="role-details-delete-action-btn"
-						onClick={(): void => setIsDeleteModalOpen(true)}
-						aria-label="Delete role"
-					>
-						<Trash2 size={14} />
-					</Button>
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={openEditModal}
-					>
-						Edit Role Details
-					</Button>
-				</div>
-			</div>
-
-			{/* Content */}
-			{activeTab === 'overview' && (
-				<OverviewTab
-					role={role}
-					onPermissionClick={(label): void => setActivePermission(label)}
-				/>
-			)}
-			{activeTab === 'members' && <MembersTab />}
-
-			<PermissionSidePanel
-				open={activePermission !== null}
-				onClose={(): void => setActivePermission(null)}
-				permissionLabel={activePermission ?? ''}
-				resources={PERMISSION_RESOURCES}
-				initialConfig={
-					activePermission ? permissionConfigs[activePermission] : undefined
-				}
-				onSave={(config): void => {
-					if (activePermission) {
-						setPermissionConfigs((prev) => ({
-							...prev,
-							[activePermission]: config,
-						}));
-					}
-				}}
-			/>
-
-			{/* Edit Role Modal */}
-			<CreateRoleModal
-				isOpen={isEditModalOpen}
-				onClose={(): void => setIsEditModalOpen(false)}
-				initialData={{
-					id: roleId,
-					name: role.name || '',
-					description: role.description || '',
-				}}
-			/>
-			{/* Delete Role Confirmation Modal */}
-			<Modal
-				open={isDeleteModalOpen}
-				onCancel={(): void => setIsDeleteModalOpen(false)}
-				title={<span className="title">Delete Role</span>}
-				closable
-				footer={[
-					<Button
-						key="cancel"
-						className="cancel-btn"
-						prefixIcon={<X size={16} />}
-						onClick={(): void => setIsDeleteModalOpen(false)}
-						size="sm"
-					>
-						Cancel
-					</Button>,
-					<Button
-						key="delete"
-						className="delete-btn"
-						prefixIcon={<Trash2 size={16} />}
-						onClick={(): void => deleteRole({ pathParams: { id: roleId } })}
-						loading={isDeleting}
-						size="sm"
-					>
-						Delete Role
-					</Button>,
-				]}
-				destroyOnClose
-				className="role-details-delete-modal"
-			>
-				<p className="delete-text">
-					Are you sure you want to delete the role <strong>{role.name}</strong>? This
-					action cannot be undone.
-				</p>
-			</Modal>
-		</div>
-	);
-}
-
-export default RoleDetailsPage;

frontend/src/container/RolesSettings/RoleDetails/index.tsx

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

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

@@ -1,176 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
-import { X } from '@signozhq/icons';
-import { Input, inputVariants } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { Form, Modal } from 'antd';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import {
-	invalidateGetRole,
-	invalidateListRoles,
-	useCreateRole,
-	usePatchRole,
-} from 'api/generated/services/role';
-import type { RoletypesPostableRoleDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import { ErrorV2Resp } from 'types/api';
-import APIError from 'types/api/error';
-
-import '../RolesSettings.styles.scss';
-
-export interface CreateRoleModalInitialData {
-	id: string;
-	name: string;
-	description?: string;
-}
-
-interface CreateRoleModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-	initialData?: CreateRoleModalInitialData;
-}
-
-interface CreateRoleFormValues {
-	name: string;
-	description?: string;
-}
-
-function CreateRoleModal({
-	isOpen,
-	onClose,
-	initialData,
-}: CreateRoleModalProps): JSX.Element {
-	const [form] = Form.useForm<CreateRoleFormValues>();
-	const queryClient = useQueryClient();
-	const { showErrorModal } = useErrorModal();
-
-	const isEditMode = !!initialData?.id;
-
-	useEffect(() => {
-		if (isOpen) {
-			if (isEditMode && initialData) {
-				form.setFieldsValue({
-					name: initialData.name,
-					description: initialData.description || '',
-				});
-			} else {
-				form.resetFields();
-			}
-		}
-	}, [isOpen, isEditMode, initialData, form]);
-
-	const handleSuccess = async (message: string): Promise<void> => {
-		await invalidateListRoles(queryClient);
-		if (isEditMode && initialData?.id) {
-			await invalidateGetRole(queryClient, { id: initialData.id });
-		}
-		toast.success(message);
-		form.resetFields();
-		onClose();
-	};
-
-	const handleError = (error: unknown): void => {
-		try {
-			ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		} catch (apiError) {
-			showErrorModal(apiError as APIError);
-		}
-	};
-
-	const { mutate: createRole, isLoading: isCreating } = useCreateRole({
-		mutation: {
-			onSuccess: () => handleSuccess('Role created successfully'),
-			onError: handleError,
-		},
-	});
-
-	const { mutate: patchRole, isLoading: isPatching } = usePatchRole({
-		mutation: {
-			onSuccess: () => handleSuccess('Role updated successfully'),
-			onError: handleError,
-		},
-	});
-
-	const onSubmit = useCallback(async (): Promise<void> => {
-		try {
-			const values = await form.validateFields();
-			if (isEditMode && initialData?.id) {
-				patchRole({
-					pathParams: { id: initialData.id },
-					data: { description: values.description || '' },
-				});
-			} else {
-				const data: RoletypesPostableRoleDTO = {
-					name: values.name,
-					...(values.description ? { description: values.description } : {}),
-				};
-				createRole({ data });
-			}
-		} catch {
-			// form validation failed; antd handles inline error display
-		}
-	}, [form, createRole, patchRole, isEditMode, initialData]);
-
-	const onCancel = useCallback((): void => {
-		form.resetFields();
-		onClose();
-	}, [form, onClose]);
-
-	const isLoading = isCreating || isPatching;
-
-	return (
-		<Modal
-			open={isOpen}
-			onCancel={onCancel}
-			title={isEditMode ? 'Edit Role Details' : 'Create a New Role'}
-			footer={[
-				<Button
-					key="cancel"
-					variant="solid"
-					color="secondary"
-					onClick={onCancel}
-					size="sm"
-				>
-					<X size={14} />
-					Cancel
-				</Button>,
-				<Button
-					key="submit"
-					variant="solid"
-					color="primary"
-					onClick={onSubmit}
-					loading={isLoading}
-					size="sm"
-				>
-					{isEditMode ? 'Save Changes' : 'Create Role'}
-				</Button>,
-			]}
-			destroyOnClose
-			className="create-role-modal"
-			width={530}
-		>
-			<Form form={form} layout="vertical" className="create-role-form">
-				<Form.Item
-					name="name"
-					label="Name"
-					rules={[{ required: true, message: 'Role name is required' }]}
-				>
-					<Input
-						disabled={isEditMode}
-						placeholder="Enter role name e.g. : Service Owner"
-					/>
-				</Form.Item>
-				<Form.Item name="description" label="Description">
-					<textarea
-						className={inputVariants()}
-						placeholder="A helpful description of the role"
-					/>
-				</Form.Item>
-			</Form>
-		</Modal>
-	);
-}
-
-export default CreateRoleModal;

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

@@ -5,7 +5,6 @@ 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 ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
 import { useTimezone } from 'providers/Timezone';
@@ -175,28 +174,9 @@ function RolesListingTable({
 		);
 	}
 
-	const navigateToRole = (roleId: string): void => {
-		history.push(ROUTES.ROLE_DETAILS.replace(':roleId', roleId));
-	};
-
 	// todo: use table from periscope when its available for consumption
 	const renderRow = (role: RoletypesRoleDTO): JSX.Element => (
-		<div
-			key={role.id}
-			className="roles-table-row roles-table-row--clickable"
-			role="button"
-			tabIndex={0}
-			onClick={(): void => {
-				if (role.id) {
-					navigateToRole(role.id);
-				}
-			}}
-			onKeyDown={(e): void => {
-				if ((e.key === 'Enter' || e.key === ' ') && role.id) {
-					navigateToRole(role.id);
-				}
-			}}
-		>
+		<div key={role.id} className="roles-table-row">
 			<div className="roles-table-cell roles-table-cell--name">
 				{role.name ?? '—'}
 			</div>

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

@@ -2,7 +2,6 @@
 	.roles-settings-header {
 		display: flex;
 		flex-direction: column;
-		align-items: flex-start;
 		gap: 4px;
 		width: 100%;
 		padding: 16px;
@@ -32,28 +31,8 @@
 		padding: 0 16px;
 	}
 
-	.roles-settings-toolbar {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		margin-bottom: 12px;
-
-		.role-settings-toolbar-button {
-			display: flex;
-			width: 156px;
-			height: 32px;
-			padding: 6px 12px;
-			justify-content: center;
-			align-items: center;
-			gap: 6px;
-			border-radius: 2px;
-		}
-	}
-
 	// todo: https://github.com/SigNoz/components/issues/116
 	.roles-search-wrapper {
-		flex: 1;
-
 		input {
 			width: 100%;
 			background: var(--l3-background);
@@ -174,14 +153,6 @@
 	background: rgba(171, 189, 255, 0.02);
 	border-bottom: 1px solid var(--secondary);
 	gap: 24px;
-
-	&--clickable {
-		cursor: pointer;
-
-		&:hover {
-			background: rgba(171, 189, 255, 0.05);
-		}
-	}
 }
 
 .roles-table-cell {
@@ -265,151 +236,3 @@
 		background: rgba(0, 0, 0, 0.01);
 	}
 }
-
-.create-role-modal {
-	.ant-modal-content {
-		padding: 0;
-		background: var(--bg-ink-400);
-		border: 1px solid var(--bg-slate-500);
-		border-radius: 4px;
-	}
-
-	.ant-modal-header {
-		background: var(--bg-ink-400);
-		border-bottom: 1px solid var(--bg-slate-500);
-		padding: 16px;
-		margin-bottom: 0;
-	}
-
-	.ant-modal-close {
-		top: 14px;
-		inset-inline-end: 16px;
-		width: 14px;
-		height: 14px;
-		color: var(--foreground);
-
-		.ant-modal-close-x {
-			font-size: 12px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-
-	.ant-modal-title {
-		color: var(--text-base-white);
-		font-family: Inter;
-		font-size: 13px;
-		font-weight: 400;
-		line-height: 1;
-		letter-spacing: -0.065px;
-	}
-
-	.ant-modal-body {
-		padding: 16px;
-	}
-
-	.create-role-form {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-
-		.ant-form-item {
-			margin-bottom: 0;
-		}
-
-		.ant-form-item-label {
-			padding-bottom: 8px;
-
-			label {
-				color: var(--foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-weight: 400;
-				line-height: 20px;
-			}
-		}
-
-		// todo: https://github.com/SigNoz/components/issues/116
-		input,
-		textarea {
-			width: 100%;
-			background: var(--l3-background);
-			border: 1px solid var(--l3-border);
-			border-radius: 2px;
-			padding: 6px 8px;
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 18px;
-			letter-spacing: -0.07px;
-			color: var(--l1-foreground);
-			outline: none;
-			box-shadow: none;
-
-			&::placeholder {
-				color: var(--l3-foreground);
-				opacity: 0.4;
-			}
-
-			&:focus,
-			&:hover {
-				border-color: var(--input);
-				box-shadow: none;
-			}
-		}
-
-		input {
-			height: 32px;
-		}
-
-		input:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-
-			&:hover {
-				border-color: var(--l3-border);
-				box-shadow: none;
-			}
-		}
-
-		textarea {
-			min-height: 100px;
-			resize: vertical;
-		}
-	}
-
-	.ant-modal-footer {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: flex-end;
-		gap: 12px;
-		margin: 0;
-		padding: 0 16px;
-		height: 56px;
-		border-top: 1px solid var(--bg-slate-500);
-	}
-}
-
-.lightMode {
-	.create-role-modal {
-		.ant-modal-content {
-			background: var(--bg-vanilla-100);
-			border-color: var(--bg-vanilla-300);
-		}
-
-		.ant-modal-header {
-			background: var(--bg-vanilla-100);
-			border-bottom-color: var(--bg-vanilla-300);
-		}
-
-		.ant-modal-title {
-			color: var(--text-base-black);
-		}
-
-		.ant-modal-footer {
-			border-top-color: var(--bg-vanilla-300);
-		}
-	}
-}

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -1,16 +1,12 @@
 import { useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Plus } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
 
-import CreateRoleModal from './RolesComponents/CreateRoleModal';
 import RolesListingTable from './RolesComponents/RolesListingTable';
 
 import './RolesSettings.styles.scss';
 
 function RolesSettings(): JSX.Element {
 	const [searchQuery, setSearchQuery] = useState('');
-	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
 	return (
 		<div className="roles-settings" data-testid="roles-settings">
@@ -21,31 +17,16 @@ function RolesSettings(): JSX.Element {
 				</p>
 			</div>
 			<div className="roles-settings-content">
-				<div className="roles-settings-toolbar">
-					<div className="roles-search-wrapper">
-						<Input
-							type="search"
-							placeholder="Search for roles..."
-							value={searchQuery}
-							onChange={(e): void => setSearchQuery(e.target.value)}
-						/>
-					</div>
-					<Button
-						variant="solid"
-						color="primary"
-						className="role-settings-toolbar-button"
-						onClick={(): void => setIsCreateModalOpen(true)}
-					>
-						<Plus size={14} />
-						Custom role
-					</Button>
+				<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>
-			<CreateRoleModal
-				isOpen={isCreateModalOpen}
-				onClose={(): void => setIsCreateModalOpen(false)}
-			/>
 		</div>
 	);
 }

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

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

frontend/src/pages/Settings/Settings.tsx

@@ -78,7 +78,6 @@ function SettingsPage(): JSX.Element {
 						isEnabled:
 							item.key === ROUTES.BILLING ||
 							item.key === ROUTES.ROLES_SETTINGS ||
-							item.key === ROUTES.ROLE_DETAILS ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.CUSTOM_DOMAIN_SETTINGS ||
 							item.key === ROUTES.API_KEYS ||
@@ -110,7 +109,6 @@ function SettingsPage(): JSX.Element {
 						isEnabled:
 							item.key === ROUTES.BILLING ||
 							item.key === ROUTES.ROLES_SETTINGS ||
-							item.key === ROUTES.ROLE_DETAILS ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
@@ -140,8 +138,7 @@ function SettingsPage(): JSX.Element {
 						isEnabled:
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
-							item.key === ROUTES.ROLES_SETTINGS ||
-							item.key === ROUTES.ROLE_DETAILS
+							item.key === ROUTES.ROLES_SETTINGS
 								? true
 								: item.isEnabled,
 					}));
@@ -233,14 +230,6 @@ function SettingsPage(): JSX.Element {
 			return true;
 		}
 
-		if (
-			(pathname.startsWith(ROUTES.ROLES_SETTINGS) &&
-				key === ROUTES.ROLES_SETTINGS) ||
-			(pathname.startsWith(ROUTES.ROLE_DETAILS) && key === ROUTES.ROLE_DETAILS)
-		) {
-			return true;
-		}
-
 		return pathname === key;
 	};
 

frontend/src/pages/Settings/config.tsx

@@ -13,7 +13,6 @@ import MultiIngestionSettings from 'container/IngestionSettings/MultiIngestionSe
 import MySettings from 'container/MySettings';
 import OrganizationSettings from 'container/OrganizationSettings';
 import RolesSettings from 'container/RolesSettings';
-import RoleDetailsPage from 'container/RolesSettings/RoleDetails';
 import { TFunction } from 'i18next';
 import {
 	Backpack,
@@ -164,15 +163,6 @@ export const rolesSettings = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];
 
-export const roleDetails = (): RouteTabProps['routes'] => [
-	{
-		Component: RoleDetailsPage,
-		name: <div className="periscope-tab">Role Details</div>,
-		route: ROUTES.ROLE_DETAILS,
-		key: ROUTES.ROLE_DETAILS,
-	},
-];
-
 export const keyboardShortcuts = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: Shortcuts,

frontend/src/pages/Settings/utils.ts

@@ -15,7 +15,6 @@ import {
 	multiIngestionSettings,
 	mySettings,
 	organizationSettings,
-	roleDetails,
 	rolesSettings,
 } from './config';
 
@@ -77,7 +76,6 @@ export const getRoutes = (
 		...createAlertChannels(t),
 		...editAlertChannels(t),
 		...keyboardShortcuts(t),
-		...roleDetails(),
 	);
 
 	return settings;

frontend/src/utils/permission/index.ts

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