chore: fix lint

deploy/docker-swarm/otel-collector-config.yaml

@@ -82,12 +82,6 @@ exporters:
     timeout: 45s
     sending_queue:
       enabled: false
-  metadataexporter:
-    cache:
-      provider: in_memory
-    dsn: tcp://clickhouse:9000/signoz_metadata
-    enabled: true
-    timeout: 45s
 service:
   telemetry:
     logs:
@@ -99,19 +93,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, metadataexporter, signozmeter]
+      exporters: [clickhousetraces, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
+      exporters: [clickhouselogsexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

deploy/docker/otel-collector-config.yaml

@@ -82,12 +82,6 @@ exporters:
     timeout: 45s
     sending_queue:
       enabled: false
-  metadataexporter:
-    cache:
-      provider: in_memory
-    dsn: tcp://clickhouse:9000/signoz_metadata
-    enabled: true
-    timeout: 45s
 service:
   telemetry:
     logs:
@@ -99,19 +93,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, metadataexporter, signozmeter]
+      exporters: [clickhousetraces, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
+      exporters: [clickhouselogsexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

ee/query-service/rules/anomaly.go

@@ -26,7 +26,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/utils/times"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/timestamp"
 
-	"github.com/SigNoz/signoz/pkg/query-service/formatter"
+	"github.com/SigNoz/signoz/pkg/formatter"
 
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 

frontend/package.json

@@ -60,7 +60,6 @@
 		"@signozhq/sonner": "0.1.0",
 		"@signozhq/switch": "0.0.2",
 		"@signozhq/table": "0.3.7",
-		"@signozhq/toggle-group": "^0.0.1",
 		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",

frontend/src/auto-import-registry.d.ts

@@ -26,5 +26,4 @@ import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/switch';
 import '@signozhq/table';
-import '@signozhq/toggle-group';
 import '@signozhq/tooltip';

frontend/src/components/Logs/TableView/config.ts

@@ -21,7 +21,7 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
-	maxWidth: '90rem',
+	maxWidth: '60rem',
 };
 
 export const defaultListViewPanelStyle: CSSProperties = {

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/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -9,7 +9,6 @@ import {
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
-import { updateDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 import {
 	enqueueDescendantsOfVariable,
 	enqueueFetchOfAllVariables,
@@ -32,9 +31,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
 
 	const { dashboardVariables } = useDashboardVariables();
-	const dashboardId = useDashboardVariablesSelector(
-		(state) => state.dashboardId,
-	);
 	const sortedVariablesArray = useDashboardVariablesSelector(
 		(state) => state.sortedVariablesArray,
 	);
@@ -100,28 +96,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 				updateUrlVariable(name || id, value);
 			}
 
-			// Synchronously update the external store with the new variable value so that
-			// child variables see the updated parent value when they refetch, rather than
-			// waiting for setSelectedDashboard → useEffect → updateDashboardVariablesStore.
-			const updatedVariables = { ...dashboardVariables };
-			if (updatedVariables[id]) {
-				updatedVariables[id] = {
-					...updatedVariables[id],
-					selectedValue: value,
-					allSelected,
-					haveCustomValuesSelected,
-				};
-			}
-			if (updatedVariables[name]) {
-				updatedVariables[name] = {
-					...updatedVariables[name],
-					selectedValue: value,
-					allSelected,
-					haveCustomValuesSelected,
-				};
-			}
-			updateDashboardVariablesStore({ dashboardId, variables: updatedVariables });
-
 			setSelectedDashboard((prev) => {
 				if (prev) {
 					const oldVariables = { ...prev?.data.variables };
@@ -156,12 +130,10 @@ function DashboardVariableSelection(): JSX.Element | null {
 				return prev;
 			});
 
-			// Cascade: enqueue query-type descendants for refetching.
-			// Safe to call synchronously now that the store already has the updated value.
+			// Cascade: enqueue query-type descendants for refetching
 			enqueueDescendantsOfVariable(name);
 		},
 		[
-			dashboardId,
 			dashboardVariables,
 			updateLocalStorageDashboardVariables,
 			updateUrlVariable,

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

@@ -5,7 +5,7 @@ import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQ
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import { isArray, isEmpty } from 'lodash-es';
+import { isArray, isEmpty, isString } from 'lodash-es';
 import { AppState } from 'store/reducers';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -54,7 +54,7 @@ function QueryVariableInput({
 		onChange,
 		onDropdownVisibleChange,
 		handleClear,
-		getDefaultValue,
+		applyDefaultIfNeeded,
 	} = useDashboardVariableSelectHelper({
 		variableData,
 		optionsData,
@@ -68,93 +68,81 @@ function QueryVariableInput({
 			try {
 				setErrorMessage(null);
 
-				// This is just a check given the previously undefined typed name prop. Not significant
-				// This will be changed when we change the schema
-				// TODO: @AshwinBhatkal Perses
-				if (!variableData.name) {
-					return;
-				}
-
-				// if the response is not an array, premature return
 				if (
-					!variablesRes?.variableValues ||
-					!Array.isArray(variablesRes?.variableValues)
+					variablesRes?.variableValues &&
+					Array.isArray(variablesRes?.variableValues)
 				) {
-					return;
-				}
-
-				const sortedNewOptions = sortValues(
-					variablesRes.variableValues,
-					variableData.sort,
-				);
-				const sortedOldOptions = sortValues(optionsData, variableData.sort);
-
-				// if options are the same as before, no need to update state or check for selected value validity
-				// ! selectedValue needs to be set in the first pass though, as options are initially empty array and we need to apply default if needed
-				// Expecatation is that when oldOptions are not empty, then there is always some selectedValue
-				if (areArraysEqual(sortedNewOptions, sortedOldOptions)) {
-					return;
-				}
-
-				setOptionsData(sortedNewOptions);
-
-				let isSelectedValueMissingInNewOptions = false;
-
-				// Check if currently selected value(s) are present in the new options list
-				if (isArray(variableData.selectedValue)) {
-					isSelectedValueMissingInNewOptions = variableData.selectedValue.some(
-						(val) => !sortedNewOptions.includes(val),
+					const newOptionsData = sortValues(
+						variablesRes?.variableValues,
+						variableData.sort,
 					);
-				} else if (
-					variableData.selectedValue &&
-					!sortedNewOptions.includes(variableData.selectedValue)
-				) {
-					isSelectedValueMissingInNewOptions = true;
-				}
 
-				// If multi-select with ALL option enabled, and ALL is currently selected, we want to maintain that state and select all new options
-				// This block does not depend on selected value because of ALL and also because we would only come here if options are different from the previous
-				if (
-					variableData.multiSelect &&
-					variableData.showALLOption &&
-					variableData.allSelected &&
-					isSelectedValueMissingInNewOptions
-				) {
-					onValueUpdate(variableData.name, variableData.id, sortedNewOptions, true);
+					const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
 
-					// Update tempSelection to maintain ALL state when dropdown is open
-					if (tempSelection !== undefined) {
-						setTempSelection(sortedNewOptions.map((option) => option.toString()));
-					}
-					return;
-				}
+					if (!areArraysEqual(newOptionsData, oldOptionsData)) {
+						let valueNotInList = false;
 
-				const value = variableData.selectedValue;
-				let allSelected = false;
+						if (isArray(variableData.selectedValue)) {
+							variableData.selectedValue.forEach((val) => {
+								if (!newOptionsData.includes(val)) {
+									valueNotInList = true;
+								}
+							});
+						} else if (
+							isString(variableData.selectedValue) &&
+							!newOptionsData.includes(variableData.selectedValue)
+						) {
+							valueNotInList = true;
+						}
 
-				if (variableData.multiSelect) {
-					const { selectedValue } = variableData;
-					allSelected =
-						sortedNewOptions.length > 0 &&
-						Array.isArray(selectedValue) &&
-						sortedNewOptions.every((option) => selectedValue.includes(option));
-				}
+						if (variableData.name && (valueNotInList || variableData.allSelected)) {
+							if (
+								variableData.allSelected &&
+								variableData.multiSelect &&
+								variableData.showALLOption
+							) {
+								if (
+									variableData.name &&
+									variableData.id &&
+									!isEmpty(variableData.selectedValue)
+								) {
+									onValueUpdate(
+										variableData.name,
+										variableData.id,
+										newOptionsData,
+										true,
+									);
+								}
 
-				if (
-					variableData.name &&
-					variableData.id &&
-					!isEmpty(variableData.selectedValue)
-				) {
-					onValueUpdate(variableData.name, variableData.id, value, allSelected);
-				} else {
-					const defaultValue = getDefaultValue(sortedNewOptions);
-					if (defaultValue !== undefined) {
-						onValueUpdate(
-							variableData.name,
-							variableData.id,
-							defaultValue,
-							allSelected,
-						);
+								// Update tempSelection to maintain ALL state when dropdown is open
+								if (tempSelection !== undefined) {
+									setTempSelection(newOptionsData.map((option) => option.toString()));
+								}
+							} else {
+								const value = variableData.selectedValue;
+								let allSelected = false;
+
+								if (variableData.multiSelect) {
+									const { selectedValue } = variableData;
+									allSelected =
+										newOptionsData.length > 0 &&
+										Array.isArray(selectedValue) &&
+										newOptionsData.every((option) => selectedValue.includes(option));
+								}
+
+								if (
+									variableData.name &&
+									variableData.id &&
+									!isEmpty(variableData.selectedValue)
+								) {
+									onValueUpdate(variableData.name, variableData.id, value, allSelected);
+								}
+							}
+						}
+
+						setOptionsData(newOptionsData);
+						// Apply default if no value is selected (e.g., new variable, first load)
+						applyDefaultIfNeeded(newOptionsData);
 					}
 				}
 			} catch (e) {
@@ -167,7 +155,7 @@ function QueryVariableInput({
 			onValueUpdate,
 			tempSelection,
 			setTempSelection,
-			getDefaultValue,
+			applyDefaultIfNeeded,
 		],
 	);
 

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

@@ -1,6 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import { act, render } from '@testing-library/react';
-import * as dashboardVariablesStoreModule from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 import {
 	dashboardVariablesStore,
 	setDashboardVariablesStore,
@@ -11,7 +10,6 @@ import {
 	IDashboardVariablesStoreState,
 } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import {
-	enqueueDescendantsOfVariable,
 	enqueueFetchOfAllVariables,
 	initializeVariableFetchStore,
 } from 'providers/Dashboard/store/variableFetchStore';
@@ -19,17 +17,6 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import DashboardVariableSelection from '../DashboardVariableSelection';
 
-// Mutable container to capture the onValueUpdate callback from VariableItem
-const mockVariableItemCallbacks: {
-	onValueUpdate?: (
-		name: string,
-		id: string,
-		value: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
-	) => void;
-} = {};
-
 // Mock providers/Dashboard/Dashboard
 const mockSetSelectedDashboard = jest.fn();
 const mockUpdateLocalStorageDashboardVariables = jest.fn();
@@ -69,14 +56,10 @@ jest.mock('react-redux', () => ({
 	useSelector: jest.fn().mockReturnValue({ minTime: 1000, maxTime: 2000 }),
 }));
 
-// VariableItem mock captures the onValueUpdate prop for use in onValueUpdate tests
+// Mock VariableItem to avoid rendering complexity
 jest.mock('../VariableItem', () => ({
 	__esModule: true,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	default: (props: any): JSX.Element => {
-		mockVariableItemCallbacks.onValueUpdate = props.onValueUpdate;
-		return <div data-testid="variable-item" />;
-	},
+	default: (): JSX.Element => <div data-testid="variable-item" />,
 }));
 
 function createVariable(
@@ -217,162 +200,4 @@ describe('DashboardVariableSelection', () => {
 		expect(initializeVariableFetchStore).not.toHaveBeenCalled();
 		expect(enqueueFetchOfAllVariables).not.toHaveBeenCalled();
 	});
-
-	describe('onValueUpdate', () => {
-		let updateStoreSpy: jest.SpyInstance;
-
-		beforeEach(() => {
-			resetStore();
-			jest.clearAllMocks();
-			// Real implementation pass-through — we just want to observe calls
-			updateStoreSpy = jest.spyOn(
-				dashboardVariablesStoreModule,
-				'updateDashboardVariablesStore',
-			);
-		});
-
-		afterEach(() => {
-			updateStoreSpy.mockRestore();
-		});
-
-		it('updates dashboardVariablesStore synchronously before enqueueDescendantsOfVariable', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({ name: 'env', id: 'env-id', order: 0 }),
-				},
-			});
-
-			render(<DashboardVariableSelection />);
-
-			const callOrder: string[] = [];
-			updateStoreSpy.mockImplementation(() => {
-				callOrder.push('updateDashboardVariablesStore');
-			});
-			(enqueueDescendantsOfVariable as jest.Mock).mockImplementation(() => {
-				callOrder.push('enqueueDescendantsOfVariable');
-			});
-
-			act(() => {
-				mockVariableItemCallbacks.onValueUpdate?.(
-					'env',
-					'env-id',
-					'production',
-					false,
-				);
-			});
-
-			expect(callOrder).toEqual([
-				'updateDashboardVariablesStore',
-				'enqueueDescendantsOfVariable',
-			]);
-		});
-
-		it('passes updated variable value to dashboardVariablesStore', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						id: 'env-id',
-						order: 0,
-						selectedValue: 'staging',
-					}),
-				},
-			});
-
-			render(<DashboardVariableSelection />);
-
-			// Clear spy calls that happened during setup/render
-			updateStoreSpy.mockClear();
-
-			act(() => {
-				mockVariableItemCallbacks.onValueUpdate?.(
-					'env',
-					'env-id',
-					'production',
-					false,
-				);
-			});
-
-			expect(updateStoreSpy).toHaveBeenCalledWith(
-				expect.objectContaining({
-					dashboardId: 'dash-1',
-					variables: expect.objectContaining({
-						env: expect.objectContaining({
-							selectedValue: 'production',
-							allSelected: false,
-						}),
-					}),
-				}),
-			);
-		});
-
-		it('calls enqueueDescendantsOfVariable synchronously without a timer', () => {
-			jest.useFakeTimers();
-
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({ name: 'env', id: 'env-id', order: 0 }),
-				},
-			});
-
-			render(<DashboardVariableSelection />);
-
-			act(() => {
-				mockVariableItemCallbacks.onValueUpdate?.(
-					'env',
-					'env-id',
-					'production',
-					false,
-				);
-			});
-
-			// Must be called immediately — no timer advancement needed
-			expect(enqueueDescendantsOfVariable).toHaveBeenCalledWith('env');
-
-			jest.useRealTimers();
-		});
-
-		it('propagates allSelected and haveCustomValuesSelected to the store', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						id: 'env-id',
-						order: 0,
-						multiSelect: true,
-						showALLOption: true,
-					}),
-				},
-			});
-
-			render(<DashboardVariableSelection />);
-			updateStoreSpy.mockClear();
-
-			act(() => {
-				mockVariableItemCallbacks.onValueUpdate?.(
-					'env',
-					'env-id',
-					['production', 'staging'],
-					true,
-					false,
-				);
-			});
-
-			expect(updateStoreSpy).toHaveBeenCalledWith(
-				expect.objectContaining({
-					variables: expect.objectContaining({
-						env: expect.objectContaining({
-							selectedValue: ['production', 'staging'],
-							allSelected: true,
-							haveCustomValuesSelected: false,
-						}),
-					}),
-				}),
-			);
-		});
-	});
 });

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

@@ -1,275 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { act, render, waitFor } from '@testing-library/react';
-import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import { variableFetchStore } from 'providers/Dashboard/store/variableFetchStore';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import QueryVariableInput from '../QueryVariableInput';
-
-jest.mock('api/dashboard/variables/dashboardVariablesQuery');
-
-jest.mock('react-redux', () => ({
-	...jest.requireActual('react-redux'),
-	useSelector: jest.fn().mockReturnValue({ minTime: 1000, maxTime: 2000 }),
-}));
-
-function createTestQueryClient(): QueryClient {
-	return new QueryClient({
-		defaultOptions: {
-			queries: { retry: false, refetchOnWindowFocus: false },
-		},
-	});
-}
-
-function Wrapper({
-	children,
-	queryClient,
-}: {
-	children: React.ReactNode;
-	queryClient: QueryClient;
-}): JSX.Element {
-	return (
-		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-	);
-}
-
-function createVariable(
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable {
-	return {
-		id: 'env-id',
-		name: 'env',
-		description: '',
-		type: 'QUERY',
-		sort: 'DISABLED',
-		showALLOption: false,
-		multiSelect: false,
-		order: 0,
-		queryValue: 'SELECT env FROM table',
-		...overrides,
-	};
-}
-
-/** Put the named variable into 'loading' state so useQuery fires on mount */
-function setVariableLoading(name: string): void {
-	variableFetchStore.update((draft) => {
-		draft.states[name] = 'loading';
-		draft.cycleIds[name] = (draft.cycleIds[name] || 0) + 1;
-	});
-}
-
-function resetFetchStore(): void {
-	variableFetchStore.set(() => ({
-		states: {},
-		lastUpdated: {},
-		cycleIds: {},
-	}));
-}
-
-describe('QueryVariableInput - getOptions logic', () => {
-	const mockOnValueUpdate = jest.fn();
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		resetFetchStore();
-	});
-
-	afterEach(() => {
-		resetFetchStore();
-	});
-
-	it('applies default value (first option) when selectedValue is empty on first load', async () => {
-		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: ['production', 'staging', 'dev'] },
-		});
-
-		const variable = createVariable({ selectedValue: undefined });
-		setVariableLoading('env');
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		await waitFor(() => {
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				'env',
-				'env-id',
-				'production', // first option by default
-				false,
-			);
-		});
-	});
-
-	it('keeps existing selectedValue when it is present in new options', async () => {
-		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: ['production', 'staging'] },
-		});
-
-		const variable = createVariable({ selectedValue: 'staging' });
-		setVariableLoading('env');
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		await waitFor(() => {
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				'env',
-				'env-id',
-				'staging',
-				false,
-			);
-		});
-	});
-
-	it('selects all new options when allSelected=true and value is missing from new options', async () => {
-		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: ['production', 'staging'] },
-		});
-
-		const variable = createVariable({
-			selectedValue: ['old-env'],
-			allSelected: true,
-			multiSelect: true,
-			showALLOption: true,
-		});
-		setVariableLoading('env');
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		await waitFor(() => {
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				'env',
-				'env-id',
-				['production', 'staging'],
-				true,
-			);
-		});
-	});
-
-	it('does not call onValueUpdate a second time when options have not changed', async () => {
-		const mockQueryFn = jest.fn().mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: ['production', 'staging'] },
-		});
-		(dashboardVariablesQuery as jest.Mock).mockImplementation(mockQueryFn);
-
-		const variable = createVariable({ selectedValue: 'production' });
-		setVariableLoading('env');
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		// Wait for first fetch and onValueUpdate call
-		await waitFor(() => {
-			expect(mockOnValueUpdate).toHaveBeenCalledTimes(1);
-		});
-
-		mockOnValueUpdate.mockClear();
-
-		// Trigger a second fetch cycle with the same API response
-		act(() => {
-			variableFetchStore.update((draft) => {
-				draft.states['env'] = 'revalidating';
-				draft.cycleIds['env'] = (draft.cycleIds['env'] || 0) + 1;
-			});
-		});
-
-		// Wait for second query to fire
-		await waitFor(() => {
-			expect(mockQueryFn).toHaveBeenCalledTimes(2);
-		});
-
-		// Options are unchanged, so onValueUpdate must not fire again
-		expect(mockOnValueUpdate).not.toHaveBeenCalled();
-	});
-
-	it('does not call onValueUpdate when API returns a non-array response', async () => {
-		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: null },
-		});
-
-		const variable = createVariable({ selectedValue: 'production' });
-		setVariableLoading('env');
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		await waitFor(() => {
-			expect(dashboardVariablesQuery).toHaveBeenCalled();
-		});
-
-		expect(mockOnValueUpdate).not.toHaveBeenCalled();
-	});
-
-	it('does not fire the query when variableData.name is empty', () => {
-		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: ['production'] },
-		});
-
-		// Variable with no name — useVariableFetchState will be called with ''
-		// and the query key will have an empty name, leaving it disabled
-		const variable = createVariable({ name: '' });
-		// Note: we do NOT put it in 'loading' state since name is empty
-		// (no variableFetchStore entry for '' means isVariableFetching=false)
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		expect(dashboardVariablesQuery).not.toHaveBeenCalled();
-		expect(mockOnValueUpdate).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableSelectHelper.ts

@@ -46,9 +46,6 @@ interface UseDashboardVariableSelectHelperReturn {
 	applyDefaultIfNeeded: (
 		overrideOptions?: (string | number | boolean)[],
 	) => void;
-	getDefaultValue: (
-		overrideOptions?: (string | number | boolean)[],
-	) => string | string[] | undefined;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -251,6 +248,5 @@ export function useDashboardVariableSelectHelper({
 		defaultValue,
 		onChange,
 		applyDefaultIfNeeded,
-		getDefaultValue,
 	};
 }

frontend/src/container/LogDetailedView/Overview.tsx

@@ -1,7 +1,6 @@
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
-import type { InputRef } from 'antd';
 import {
 	Button,
 	Collapse,
@@ -47,23 +46,12 @@ function Overview({
 	handleChangeSelectedView,
 }: Props): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
-	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(true);
+	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(false);
 	const [isAttributesExpanded, setIsAttributesExpanded] = useState<boolean>(
 		true,
 	);
 	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
 
-	const focusTimerRef = useRef<ReturnType<typeof setTimeout>>();
-
-	const searchInputRef = useCallback((node: InputRef | null) => {
-		clearTimeout(focusTimerRef.current);
-		if (node) {
-			focusTimerRef.current = setTimeout(() => node.focus(), 100);
-		}
-	}, []);
-
-	useEffect(() => (): void => clearTimeout(focusTimerRef.current), []);
-
 	const isDarkMode = useIsDarkMode();
 
 	const options: EditorProps['options'] = {
@@ -208,7 +196,7 @@ function Overview({
 							<>
 								{isSearchVisible && (
 									<Input
-										ref={searchInputRef}
+										autoFocus
 										placeholder="Search for a field..."
 										className="search-input"
 										value={fieldSearchInput}

frontend/src/container/LogsExplorerChart/__tests__/frequencyGraphColor.test.ts

@@ -1,34 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-
-import { getColorsForSeverityLabels, isRedLike } from '../utils';
-
-describe('getColorsForSeverityLabels', () => {
-	it('should return slate for blank labels', () => {
-		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_SLATE_300);
-		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_SLATE_300);
-	});
-
-	it('should return correct colors for known severity variants', () => {
-		expect(getColorsForSeverityLabels('INFO', 0)).toBe(Color.BG_ROBIN_600);
-		expect(getColorsForSeverityLabels('ERROR', 0)).toBe(Color.BG_CHERRY_600);
-		expect(getColorsForSeverityLabels('WARN', 0)).toBe(Color.BG_AMBER_600);
-		expect(getColorsForSeverityLabels('DEBUG', 0)).toBe(Color.BG_AQUA_600);
-		expect(getColorsForSeverityLabels('TRACE', 0)).toBe(Color.BG_FOREST_600);
-		expect(getColorsForSeverityLabels('FATAL', 0)).toBe(Color.BG_SAKURA_600);
-	});
-
-	it('should return non-red colors for unrecognized labels at any index', () => {
-		for (let i = 0; i < 30; i++) {
-			const color = getColorsForSeverityLabels('4', i);
-			expect(isRedLike(color)).toBe(false);
-		}
-	});
-
-	it('should return non-red colors for numeric severity text', () => {
-		const numericLabels = ['1', '2', '4', '9', '13', '17', '21'];
-		numericLabels.forEach((label) => {
-			const color = getColorsForSeverityLabels(label, 0);
-			expect(isRedLike(color)).toBe(false);
-		});
-	});
-});

frontend/src/container/LogsExplorerChart/utils.ts

@@ -1,16 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
+import { themeColors } from 'constants/theme';
 import { colors } from 'lib/getRandomColor';
 
-// Function to determine if a color is "red-like" based on its RGB values
-export function isRedLike(hex: string): boolean {
-	const r = parseInt(hex.slice(1, 3), 16);
-	const g = parseInt(hex.slice(3, 5), 16);
-	const b = parseInt(hex.slice(5, 7), 16);
-	return r > 180 && r > g * 1.4 && r > b * 1.4;
-}
-
-const SAFE_FALLBACK_COLORS = colors.filter((c) => !isRedLike(c));
-
 const SEVERITY_VARIANT_COLORS: Record<string, string> = {
 	TRACE: Color.BG_FOREST_600,
 	Trace: Color.BG_FOREST_500,
@@ -76,13 +67,8 @@ export function getColorsForSeverityLabels(
 	label: string,
 	index: number,
 ): string {
-	const trimmed = label.trim();
-
-	if (!trimmed) {
-		return Color.BG_SLATE_300;
-	}
-
-	const variantColor = SEVERITY_VARIANT_COLORS[trimmed];
+	// Check if we have a direct mapping for this severity variant
+	const variantColor = SEVERITY_VARIANT_COLORS[label.trim()];
 	if (variantColor) {
 		return variantColor;
 	}
@@ -117,8 +103,5 @@ export function getColorsForSeverityLabels(
 		return Color.BG_SAKURA_500;
 	}
 
-	return (
-		SAFE_FALLBACK_COLORS[index % SAFE_FALLBACK_COLORS.length] ||
-		Color.BG_SLATE_400
-	);
+	return colors[index % colors.length] || themeColors.red;
 }

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -111,19 +111,23 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		);
 
 		const itemContent = useCallback(
-			(index: number, log: Record<string, unknown>): JSX.Element => (
-				<TableRow
-					tableColumns={tableColumns}
-					index={index}
-					log={log}
-					logs={tableViewProps.logs}
-					hasActions
-					fontSize={tableViewProps.fontSize}
-					onShowLogDetails={onSetActiveLog}
-					isActiveLog={activeLog?.id === log.id}
-					onClearActiveLog={onCloseActiveLog}
-				/>
-			),
+			(index: number, log: Record<string, unknown>): JSX.Element => {
+				return (
+					<div key={log.id as string}>
+						<TableRow
+							tableColumns={tableColumns}
+							index={index}
+							log={log}
+							logs={tableViewProps.logs}
+							hasActions
+							fontSize={tableViewProps.fontSize}
+							onShowLogDetails={onSetActiveLog}
+							isActiveLog={activeLog?.id === log.id}
+							onClearActiveLog={onCloseActiveLog}
+						/>
+					</div>
+				);
+			},
 			[
 				tableColumns,
 				onSetActiveLog,
@@ -139,8 +143,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 					{tableColumns
 						.filter((column) => column.key)
 						.map((column) => {
-							const isDragColumn =
-								column.key !== 'expand' && column.key !== 'state-indicator';
+							const isDragColumn = column.key !== 'expand';
 
 							return (
 								<TableHeaderCellStyled

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/FilterInput/index.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Form } from 'antd';
 import { initialQueryBuilderFormValuesMap } from 'constants/queryBuilder';
-import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import isEqual from 'lodash-es/isEqual';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
@@ -30,7 +30,7 @@ function TagFilterInput({
 	};
 
 	return (
-		<QueryBuilderSearchV2
+		<QueryBuilderSearch
 			query={query}
 			onChange={onQueryChange}
 			placeholder={placeholder}

frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx

@@ -86,7 +86,7 @@ jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
 }));
 
 const BASE_URL = ENVIRONMENT.baseURL;
-const attributeKeysURL = `${BASE_URL}/api/v3/filter_suggestions`;
+const attributeKeysURL = `${BASE_URL}/api/v3/autocomplete/attribute_keys`;
 
 describe('PipelinePage container test', () => {
 	beforeAll(() => {
@@ -333,34 +333,26 @@ describe('PipelinePage container test', () => {
 					ctx.json({
 						status: 'success',
 						data: {
-							attributes: [
+							attributeKeys: [
 								{
 									key: 'otelServiceName',
 									dataType: DataTypes.String,
 									type: 'tag',
-									isColumn: false,
-									isJSON: false,
-								},
-								{
-									key: 'service.name',
-									dataType: DataTypes.String,
-									type: 'resource',
-									isColumn: false,
-									isJSON: false,
 								},
 								{
 									key: 'service.instance.id',
 									dataType: DataTypes.String,
 									type: 'resource',
-									isColumn: false,
-									isJSON: false,
+								},
+								{
+									key: 'service.name',
+									dataType: DataTypes.String,
+									type: 'resource',
 								},
 								{
 									key: 'service.name',
 									dataType: DataTypes.String,
 									type: 'tag',
-									isColumn: false,
-									isJSON: false,
 								},
 							],
 						},

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -973,7 +973,6 @@ function QueryBuilderSearchV2(
 	return (
 		<div className="query-builder-search-v2">
 			<Select
-				data-testid={'qb-search-select'}
 				ref={selectRef}
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...(hasPopupContainer ? { getPopupContainer: popupContainer } : {})}

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

@@ -1,373 +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;
-	}
-
-	&__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;
-
-		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,347 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { ChevronDown, ChevronRight, X } from '@signozhq/icons';
-import {
-	RadioGroup,
-	RadioGroupItem,
-	RadioGroupLabel,
-} from '@signozhq/radio-group';
-import { Switch } from '@signozhq/switch';
-import { Select, Skeleton } 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="tags"
-								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,
-	isLoading = false,
-	isSaving = false,
-	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);
-	}, [config, onSave]);
-
-	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">
-					{isLoading ? (
-						<Skeleton active paragraph={{ rows: 6 }} />
-					) : (
-						<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"
-							disabled={isSaving}
-						>
-							{unsavedCount > 0 ? 'Discard' : 'Cancel'}
-						</Button>
-						<Button
-							variant="solid"
-							color="primary"
-							size="sm"
-							onClick={handleSave}
-							loading={isSaving}
-							disabled={isLoading || unsavedCount === 0}
-						>
-							Save Changes
-						</Button>
-					</div>
-				</div>
-			</div>
-		</>
-	);
-}
-
-export default PermissionSidePanel;

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

@@ -1,31 +0,0 @@
-export interface ResourceOption {
-	value: string;
-	label: string;
-}
-
-export interface ResourceDefinition {
-	id: string;
-	label: string;
-	options?: ResourceOption[];
-}
-
-export type ScopeType = 'all' | 'only_selected';
-
-export interface ResourceConfig {
-	enabled: boolean;
-	scope: ScopeType;
-	selectedIds: string[];
-}
-
-export type PermissionConfig = Record<string, ResourceConfig>;
-
-export interface PermissionSidePanelProps {
-	open: boolean;
-	onClose: () => void;
-	permissionLabel: string;
-	resources: ResourceDefinition[];
-	initialConfig?: PermissionConfig;
-	isLoading?: boolean;
-	isSaving?: boolean;
-	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/DeleteRoleModal.tsx

@@ -1,58 +0,0 @@
-import { Button } from '@signozhq/button';
-import { Trash2, X } from '@signozhq/icons';
-import { Modal } from 'antd';
-
-interface DeleteRoleModalProps {
-	isOpen: boolean;
-	roleName: string;
-	isDeleting: boolean;
-	onCancel: () => void;
-	onConfirm: () => void;
-}
-
-function DeleteRoleModal({
-	isOpen,
-	roleName,
-	isDeleting,
-	onCancel,
-	onConfirm,
-}: DeleteRoleModalProps): JSX.Element {
-	return (
-		<Modal
-			open={isOpen}
-			onCancel={onCancel}
-			title={<span className="title">Delete Role</span>}
-			closable
-			footer={[
-				<Button
-					key="cancel"
-					className="cancel-btn"
-					prefixIcon={<X size={16} />}
-					onClick={onCancel}
-					size="sm"
-				>
-					Cancel
-				</Button>,
-				<Button
-					key="delete"
-					className="delete-btn"
-					prefixIcon={<Trash2 size={16} />}
-					onClick={onConfirm}
-					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>{roleName}</strong>? This
-				action cannot be undone.
-			</p>
-		</Modal>
-	);
-}
-
-export default DeleteRoleModal;

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

@@ -1,496 +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-permission-item--readonly {
-		cursor: default !important;
-		pointer-events: none;
-		opacity: 0.55;
-	}
-
-	.role-details-nav {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.role-details-tabs {
-		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;
-		gap: 0;
-	}
-
-	.role-details-tab {
-		gap: 4px;
-		padding: 0 16px;
-		height: 32px;
-		border-radius: 0;
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 18px;
-		letter-spacing: -0.06px;
-
-		&[data-state='on'] {
-			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: 13px;
-		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[data-state='on'] {
-			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,436 +0,0 @@
-import { useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
-import { useHistory, useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
-import { ChevronRight, Search, Table2, Trash2, Users } from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Skeleton } from 'antd';
-import { ErrorResponseHandlerForGeneratedAPIs } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import {
-	getGetObjectsQueryKey,
-	useDeleteRole,
-	useGetObjects,
-	useGetRole,
-	usePatchObjects,
-} from 'api/generated/services/role';
-import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import ROUTES from 'constants/routes';
-import { useAppContext } from 'providers/App/App';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
-
-import type { PermissionConfig } from '../PermissionSidePanel';
-import PermissionSidePanel from '../PermissionSidePanel';
-import CreateRoleModal from '../RolesComponents/CreateRoleModal';
-import { ROLE_ID_REGEX } from './constants';
-import DeleteRoleModal from './DeleteRoleModal';
-import {
-	buildPatchPayload,
-	capitalise,
-	derivePermissionTypes,
-	deriveResourcesForRelation,
-	objectsToPermissionConfig,
-	TimestampBadge,
-} from './utils';
-
-import './RoleDetailsPage.styles.scss';
-
-function handleApiError(
-	err: ErrorType<RenderErrorResponseDTO>,
-	showErrorModal: (error: APIError) => void,
-): void {
-	try {
-		ErrorResponseHandlerForGeneratedAPIs(err);
-	} catch (apiError) {
-		showErrorModal(apiError as APIError);
-	}
-}
-
-type TabKey = 'overview' | 'members';
-
-interface PermissionType {
-	key: string;
-	label: string;
-	icon: JSX.Element;
-}
-
-interface PermissionItemProps {
-	permissionType: PermissionType;
-	isManaged: boolean;
-	onPermissionClick: (key: string) => void;
-}
-
-function PermissionItem({
-	permissionType,
-	isManaged,
-	onPermissionClick,
-}: PermissionItemProps): JSX.Element {
-	const { key, label, icon } = permissionType;
-
-	if (isManaged) {
-		return (
-			<div
-				key={key}
-				className="role-details-permission-item role-details-permission-item--readonly"
-			>
-				<div className="role-details-permission-item-left">
-					{icon}
-					<span className="role-details-permission-item-label">{label}</span>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div
-			key={key}
-			className="role-details-permission-item"
-			role="button"
-			tabIndex={0}
-			onClick={(): void => onPermissionClick(key)}
-			onKeyDown={(e): void => {
-				if (e.key === 'Enter' || e.key === ' ') {
-					onPermissionClick(key);
-				}
-			}}
-		>
-			<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>
-	);
-}
-
-interface OverviewTabProps {
-	role: {
-		description?: string;
-		createdAt?: Date | string;
-		updatedAt?: Date | string;
-	} | null;
-	isManaged: boolean;
-	permissionTypes: PermissionType[];
-	onPermissionClick: (relationKey: string) => void;
-}
-
-function OverviewTab({
-	role,
-	isManaged,
-	permissionTypes,
-	onPermissionClick,
-}: OverviewTabProps): JSX.Element {
-	return (
-		<div className="role-details-overview">
-			{isManaged && (
-				<Callout
-					type="warning"
-					showIcon
-					message="This is a managed role. Permissions and settings are view-only and cannot be modified."
-				/>
-			)}
-
-			<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">
-					{permissionTypes.map((permissionType) => (
-						<PermissionItem
-							key={permissionType.key}
-							permissionType={permissionType}
-							isManaged={isManaged}
-							onPermissionClick={onPermissionClick}
-						/>
-					))}
-				</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>
-	);
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function RoleDetailsPage(): JSX.Element {
-	const { pathname } = useLocation();
-	const history = useHistory();
-	const queryClient = useQueryClient();
-	const { showErrorModal } = useErrorModal();
-	const { authzResources } = useAppContext();
-
-	const roleIdMatch = pathname.match(ROLE_ID_REGEX);
-	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 { data, isLoading, isFetching, isError, error } = useGetRole(
-		{ id: roleId },
-		{ query: { enabled: !!roleId } },
-	);
-	const role = data?.data;
-	const isTransitioning = isFetching && role?.id !== roleId;
-	const isManaged = role?.type === 'managed';
-
-	const permissionTypes = useMemo(
-		() => derivePermissionTypes(authzResources?.relations ?? null),
-		[authzResources],
-	);
-
-	const resourcesForActivePermission = useMemo(
-		() =>
-			activePermission
-				? deriveResourcesForRelation(authzResources ?? null, activePermission)
-				: [],
-		[authzResources, activePermission],
-	);
-
-	const { data: objectsData, isLoading: isLoadingObjects } = useGetObjects(
-		{ id: roleId, relation: activePermission ?? '' },
-		{ query: { enabled: !!activePermission && !!roleId && !isManaged } },
-	);
-
-	const initialConfig = useMemo(() => {
-		if (!objectsData?.data || !activePermission) {
-			return undefined;
-		}
-		return objectsToPermissionConfig(
-			objectsData.data,
-			resourcesForActivePermission,
-		);
-	}, [objectsData, activePermission, resourcesForActivePermission]);
-
-	const handleSaveSuccess = (): void => {
-		toast.success('Permissions saved successfully');
-		if (activePermission) {
-			queryClient.removeQueries(
-				getGetObjectsQueryKey({ id: roleId, relation: activePermission }),
-			);
-		}
-		setActivePermission(null);
-	};
-
-	const { mutate: patchObjects, isLoading: isSaving } = usePatchObjects({
-		mutation: {
-			onSuccess: handleSaveSuccess,
-			onError: (err) => handleApiError(err, showErrorModal),
-		},
-	});
-
-	const { mutate: deleteRole, isLoading: isDeleting } = useDeleteRole({
-		mutation: {
-			onSuccess: (): void => {
-				toast.success('Role deleted successfully');
-				history.push(ROUTES.ROLES_SETTINGS);
-			},
-			onError: (err) => handleApiError(err, showErrorModal),
-		},
-	});
-
-	if (isLoading || isTransitioning) {
-		return (
-			<div className="role-details-page">
-				<Skeleton
-					active
-					paragraph={{ rows: 8 }}
-					className="role-details-skeleton"
-				/>
-			</div>
-		);
-	}
-
-	if (isError) {
-		return (
-			<div className="role-details-page">
-				<ErrorInPlace
-					error={toAPIError(
-						error,
-						'An unexpected error occurred while fetching role details.',
-					)}
-				/>
-			</div>
-		);
-	}
-
-	const handleSave = (config: PermissionConfig): void => {
-		if (!activePermission || !authzResources) {
-			return;
-		}
-		patchObjects({
-			pathParams: { id: roleId, relation: activePermission },
-			data: buildPatchPayload({
-				newConfig: config,
-				currentObjects: objectsData?.data ?? [],
-				resources: resourcesForActivePermission,
-				authzRes: authzResources,
-			}),
-		});
-	};
-
-	return (
-		<div className="role-details-page">
-			<div className="role-details-header">
-				<h2 className="role-details-title">Role — {role?.name}</h2>
-			</div>
-
-			<div className="role-details-nav">
-				<ToggleGroup
-					type="single"
-					value={activeTab}
-					onValueChange={(val): void => {
-						if (val) {
-							setActiveTab(val as TabKey);
-						}
-					}}
-					className="role-details-tabs"
-				>
-					<ToggleGroupItem value="overview" className="role-details-tab">
-						<Table2 size={14} />
-						Overview
-					</ToggleGroupItem>
-					<ToggleGroupItem value="members" className="role-details-tab">
-						<Users size={14} />
-						Members
-						<span className="role-details-tab-count">0</span>
-					</ToggleGroupItem>
-				</ToggleGroup>
-
-				{!isManaged && (
-					<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={(): void => setIsEditModalOpen(true)}
-						>
-							Edit Role Details
-						</Button>
-					</div>
-				)}
-			</div>
-
-			{activeTab === 'overview' && (
-				<OverviewTab
-					role={role || null}
-					isManaged={isManaged}
-					permissionTypes={permissionTypes}
-					onPermissionClick={(key): void => setActivePermission(key)}
-				/>
-			)}
-			{activeTab === 'members' && <MembersTab />}
-
-			{!isManaged && (
-				<>
-					<PermissionSidePanel
-						open={activePermission !== null}
-						onClose={(): void => setActivePermission(null)}
-						permissionLabel={activePermission ? capitalise(activePermission) : ''}
-						resources={resourcesForActivePermission}
-						initialConfig={initialConfig}
-						isLoading={isLoadingObjects}
-						isSaving={isSaving}
-						onSave={handleSave}
-					/>
-
-					<CreateRoleModal
-						isOpen={isEditModalOpen}
-						onClose={(): void => setIsEditModalOpen(false)}
-						initialData={{
-							id: roleId,
-							name: role?.name || '',
-							description: role?.description || '',
-						}}
-					/>
-				</>
-			)}
-
-			<DeleteRoleModal
-				isOpen={isDeleteModalOpen}
-				roleName={role?.name || ''}
-				isDeleting={isDeleting}
-				onCancel={(): void => setIsDeleteModalOpen(false)}
-				onConfirm={(): void => deleteRole({ pathParams: { id: roleId } })}
-			/>
-		</div>
-	);
-}
-
-export default RoleDetailsPage;

frontend/src/container/RolesSettings/RoleDetails/constants.ts

@@ -1,22 +0,0 @@
-import {
-	BadgePlus,
-	Eye,
-	LayoutList,
-	PencilRuler,
-	Settings,
-	Trash2,
-} from '@signozhq/icons';
-
-export const ROLE_ID_REGEX = /\/settings\/roles\/([^/]+)/;
-
-export type IconComponent = React.ComponentType<any>;
-
-export const PERMISSION_ICON_MAP: Record<string, IconComponent> = {
-	create: BadgePlus,
-	list: LayoutList,
-	read: Eye,
-	update: PencilRuler,
-	delete: Trash2,
-};
-
-export const FALLBACK_PERMISSION_ICON: IconComponent = Settings;

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

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

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

@@ -1,149 +0,0 @@
-import React from 'react';
-import type {
-	AuthtypesGettableObjectsDTO,
-	AuthtypesGettableResourcesDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { useTimezone } from 'providers/Timezone';
-
-import type {
-	PermissionConfig,
-	ResourceDefinition,
-} from '../PermissionSidePanel';
-import { FALLBACK_PERMISSION_ICON, PERMISSION_ICON_MAP } from './constants';
-
-import './RoleDetailsPage.styles.scss';
-
-export interface PermissionType {
-	key: string;
-	label: string;
-	icon: JSX.Element;
-}
-
-export interface PatchPayloadOptions {
-	newConfig: PermissionConfig;
-	currentObjects: AuthtypesGettableObjectsDTO[];
-	resources: ResourceDefinition[];
-	authzRes: AuthtypesGettableResourcesDTO;
-}
-
-export function capitalise(str: string): string {
-	return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-export function derivePermissionTypes(
-	relations: AuthtypesGettableResourcesDTO['relations'] | null,
-): PermissionType[] {
-	const iconSize = { size: 14 };
-
-	if (!relations) {
-		return Object.entries(PERMISSION_ICON_MAP).map(([key, IconComp]) => ({
-			key,
-			label: capitalise(key),
-			icon: React.createElement(IconComp, iconSize),
-		}));
-	}
-	return Object.keys(relations).map((key) => {
-		const IconComp = PERMISSION_ICON_MAP[key] ?? FALLBACK_PERMISSION_ICON;
-		return {
-			key,
-			label: capitalise(key),
-			icon: React.createElement(IconComp, iconSize),
-		};
-	});
-}
-
-export function deriveResourcesForRelation(
-	authzResources: AuthtypesGettableResourcesDTO | null,
-	relation: string,
-): ResourceDefinition[] {
-	if (!authzResources?.relations) {
-		return [];
-	}
-	const supportedTypes = authzResources.relations[relation] ?? [];
-	return authzResources.resources
-		.filter((r) => supportedTypes.includes(r.type))
-		.map((r) => ({
-			id: r.name,
-			label: capitalise(r.name).replace(/_/g, ' '),
-			options: [],
-		}));
-}
-
-export function objectsToPermissionConfig(
-	objects: AuthtypesGettableObjectsDTO[],
-	resources: ResourceDefinition[],
-): PermissionConfig {
-	const config: PermissionConfig = {};
-	for (const res of resources) {
-		const obj = objects.find((o) => o.resource.name === res.id);
-		if (!obj) {
-			config[res.id] = { enabled: false, scope: 'all', selectedIds: [] };
-		} else {
-			const isAll = obj.selectors.includes('*');
-			config[res.id] = {
-				enabled: true,
-				scope: isAll ? 'all' : 'only_selected',
-				selectedIds: isAll ? [] : obj.selectors,
-			};
-		}
-	}
-	return config;
-}
-
-export function buildPatchPayload({
-	newConfig,
-	currentObjects,
-	resources,
-	authzRes,
-}: PatchPayloadOptions): {
-	additions: AuthtypesGettableObjectsDTO[] | null;
-	deletions: AuthtypesGettableObjectsDTO[] | null;
-} {
-	const deletions = currentObjects.length > 0 ? currentObjects : null;
-
-	const additions: AuthtypesGettableObjectsDTO[] = [];
-	for (const res of resources) {
-		const cfg = newConfig[res.id];
-		if (!cfg?.enabled) {
-			continue;
-		}
-		const resourceDef = authzRes.resources.find((r) => r.name === res.id);
-		if (!resourceDef) {
-			continue;
-		}
-		additions.push({
-			resource: resourceDef,
-			selectors: cfg.scope === 'all' ? ['*'] : cfg.selectedIds,
-		});
-	}
-
-	return {
-		additions: additions.length > 0 ? additions : null,
-		deletions,
-	};
-}
-
-interface TimestampBadgeProps {
-	date?: Date | string;
-}
-
-export function TimestampBadge({ date }: TimestampBadgeProps): 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>;
-}

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

@@ -1,191 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useQueryClient } from 'react-query';
-import { useHistory } from 'react-router-dom';
-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 ROUTES from 'constants/routes';
-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 history = useHistory();
-	const { showErrorModal } = useErrorModal();
-
-	const isEditMode = !!initialData?.id;
-	const prevIsOpen = useRef(isOpen);
-
-	useEffect(() => {
-		if (isOpen && !prevIsOpen.current) {
-			if (isEditMode && initialData) {
-				form.setFieldsValue({
-					name: initialData.name,
-					description: initialData.description || '',
-				});
-			} else {
-				form.resetFields();
-			}
-		}
-		prevIsOpen.current = isOpen;
-	}, [isOpen, isEditMode, initialData, form]);
-
-	const handleSuccess = async (
-		message: string,
-		redirectPath?: string,
-	): Promise<void> => {
-		await invalidateListRoles(queryClient);
-		if (isEditMode && initialData?.id) {
-			await invalidateGetRole(queryClient, { id: initialData.id });
-		}
-		toast.success(message);
-		form.resetFields();
-		onClose();
-		if (redirectPath) {
-			history.push(redirectPath);
-		}
-	};
-
-	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: (res) =>
-				handleSuccess(
-					'Role created successfully',
-					`${ROUTES.ROLES_SETTINGS}/${res.data.id}`,
-				),
-			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/RoutingPolicies/__tests__/testUtils.ts

@@ -120,9 +120,6 @@ export function getAppContextMockState(
 		toggleChangelogModal: jest.fn(),
 		versionData: null,
 		hasEditPermission: false,
-		authzResources: null,
-		authzResourcesFetchError: null,
-		isFetchingAuthzResources: false,
 	};
 }
 

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/hooks/logs/__tests__/useLogDetailHandlers.test.ts

@@ -1,94 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useIsTextSelected } from 'hooks/useIsTextSelected';
-import { ILog } from 'types/api/logs/log';
-
-import useLogDetailHandlers from '../useLogDetailHandlers';
-
-jest.mock('hooks/logs/useActiveLog');
-jest.mock('hooks/useIsTextSelected');
-
-const mockOnSetActiveLog = jest.fn();
-const mockOnClearActiveLog = jest.fn();
-const mockOnAddToQuery = jest.fn();
-const mockOnGroupByAttribute = jest.fn();
-const mockIsTextSelected = jest.fn();
-
-const mockLog: ILog = {
-	id: 'log-1',
-	timestamp: '2024-01-01T00:00:00Z',
-	date: '2024-01-01',
-	body: 'test log body',
-	severityText: 'INFO',
-	severityNumber: 9,
-	traceFlags: 0,
-	traceId: '',
-	spanID: '',
-	attributesString: {},
-	attributesInt: {},
-	attributesFloat: {},
-	resources_string: {},
-	scope_string: {},
-	attributes_string: {},
-	severity_text: '',
-	severity_number: 0,
-};
-
-beforeEach(() => {
-	jest.clearAllMocks();
-
-	jest.mocked(useIsTextSelected).mockReturnValue(mockIsTextSelected);
-
-	jest.mocked(useActiveLog).mockReturnValue({
-		activeLog: null,
-		onSetActiveLog: mockOnSetActiveLog,
-		onClearActiveLog: mockOnClearActiveLog,
-		onAddToQuery: mockOnAddToQuery,
-		onGroupByAttribute: mockOnGroupByAttribute,
-	});
-});
-
-it('should not open log detail when text is selected', () => {
-	mockIsTextSelected.mockReturnValue(true);
-
-	const { result } = renderHook(() => useLogDetailHandlers());
-
-	act(() => {
-		result.current.handleSetActiveLog(mockLog);
-	});
-
-	expect(mockOnSetActiveLog).not.toHaveBeenCalled();
-});
-
-it('should open log detail when no text is selected', () => {
-	mockIsTextSelected.mockReturnValue(false);
-
-	const { result } = renderHook(() => useLogDetailHandlers());
-
-	act(() => {
-		result.current.handleSetActiveLog(mockLog);
-	});
-
-	expect(mockOnSetActiveLog).toHaveBeenCalledWith(mockLog);
-});
-
-it('should toggle off when clicking the same active log', () => {
-	mockIsTextSelected.mockReturnValue(false);
-
-	jest.mocked(useActiveLog).mockReturnValue({
-		activeLog: mockLog,
-		onSetActiveLog: mockOnSetActiveLog,
-		onClearActiveLog: mockOnClearActiveLog,
-		onAddToQuery: mockOnAddToQuery,
-		onGroupByAttribute: mockOnGroupByAttribute,
-	});
-
-	const { result } = renderHook(() => useLogDetailHandlers());
-
-	act(() => {
-		result.current.handleSetActiveLog(mockLog);
-	});
-
-	expect(mockOnClearActiveLog).toHaveBeenCalled();
-	expect(mockOnSetActiveLog).not.toHaveBeenCalled();
-});

frontend/src/hooks/logs/useLogDetailHandlers.ts

@@ -2,7 +2,6 @@ import { useCallback, useState } from 'react';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import type { UseActiveLog } from 'hooks/logs/types';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useIsTextSelected } from 'hooks/useIsTextSelected';
 import { ILog } from 'types/api/logs/log';
 
 type SelectedTab = typeof VIEW_TYPES[keyof typeof VIEW_TYPES] | undefined;
@@ -29,13 +28,9 @@ function useLogDetailHandlers({
 		onAddToQuery,
 	} = useActiveLog();
 	const [selectedTab, setSelectedTab] = useState<SelectedTab>(defaultTab);
-	const isTextSelected = useIsTextSelected();
 
 	const handleSetActiveLog = useCallback(
 		(log: ILog, nextTab: SelectedTab = defaultTab): void => {
-			if (isTextSelected()) {
-				return;
-			}
 			if (activeLog?.id === log.id) {
 				onClearActiveLog();
 				setSelectedTab(undefined);
@@ -44,7 +39,7 @@ function useLogDetailHandlers({
 			onSetActiveLog(log);
 			setSelectedTab(nextTab ?? defaultTab);
 		},
-		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog, isTextSelected],
+		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog],
 	);
 
 	const handleCloseLogDetail = useCallback((): void => {

frontend/src/hooks/useIsTextSelected.ts

@@ -1,10 +0,0 @@
-import { useCallback } from 'react';
-
-export function useIsTextSelected(): () => boolean {
-	return useCallback((): boolean => {
-		const selection = window.getSelection();
-		return (
-			!!selection && !selection.isCollapsed && selection.toString().length > 0
-		);
-	}, []);
-}

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,19 +163,6 @@ export const rolesSettings = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];
 
-export const roleDetails = (t: TFunction): RouteTabProps['routes'] => [
-	{
-		Component: RoleDetailsPage,
-		name: (
-			<div className="periscope-tab">
-				<Shield size={16} /> {t('routes:role_details').toString()}
-			</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';
 
@@ -69,7 +68,7 @@ export const getRoutes = (
 	}
 
 	if (isAdmin) {
-		settings.push(...rolesSettings(t), ...roleDetails(t));
+		settings.push(...rolesSettings(t));
 	}
 
 	settings.push(

frontend/src/providers/App/App.tsx

@@ -10,8 +10,6 @@ import {
 import { useQuery } from 'react-query';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import { useAuthzResources } from 'api/generated/services/authz';
-import { AuthtypesGettableResourcesDTO } from 'api/generated/services/sigNoz.schemas';
 import listOrgPreferences from 'api/v1/org/preferences/list';
 import get from 'api/v1/user/me/get';
 import listUserPreferences from 'api/v1/user/preferences/list';
@@ -56,10 +54,6 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 	const [userPreferences, setUserPreferences] = useState<
 		UserPreference[] | null
 	>(null);
-	const [
-		authzResources,
-		setAuthzResources,
-	] = useState<AuthtypesGettableResourcesDTO | null>(null);
 
 	const [isLoggedIn, setIsLoggedIn] = useState<boolean>(
 		(): boolean => getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN) === 'true',
@@ -186,26 +180,6 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 		}
 	}, [orgPreferencesData, isFetchingOrgPreferences]);
 
-	const {
-		data: authzResourcesData,
-		isFetching: isFetchingAuthzResources,
-		error: authzResourcesFetchError,
-	} = useAuthzResources({
-		query: {
-			enabled: !!isLoggedIn && !!user.email,
-		},
-	});
-
-	useEffect(() => {
-		if (
-			authzResourcesData &&
-			authzResourcesData.data &&
-			!isFetchingAuthzResources
-		) {
-			setAuthzResources(authzResourcesData.data);
-		}
-	}, [authzResourcesData, isFetchingAuthzResources, isLoggedIn]);
-
 	// now since org preferences data is dependent on user being loaded as well so we added extra safety net for user.email to be set as well
 	const {
 		data: userPreferencesData,
@@ -314,7 +288,6 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 		setTrialInfo(null);
 		setFeatureFlags(null);
 		setOrgPreferences(null);
-		setAuthzResources(null);
 		setOrg(null);
 	});
 
@@ -326,19 +299,16 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 			featureFlags,
 			trialInfo,
 			orgPreferences,
-			authzResources,
 			isLoggedIn,
 			org,
 			isFetchingUser,
 			isFetchingActiveLicense,
 			isFetchingFeatureFlags,
 			isFetchingOrgPreferences,
-			isFetchingAuthzResources,
 			userFetchError,
 			activeLicenseFetchError,
 			featureFlagsFetchError,
 			orgPreferencesFetchError,
-			authzResourcesFetchError,
 			activeLicense,
 			changelog,
 			showChangelogModal,
@@ -363,15 +333,12 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 			isFetchingActiveLicense,
 			isFetchingFeatureFlags,
 			isFetchingOrgPreferences,
-			isFetchingAuthzResources,
 			isFetchingUser,
 			isLoggedIn,
 			org,
 			orgPreferences,
 			activeLicenseRefetch,
 			orgPreferencesFetchError,
-			authzResourcesFetchError,
-			authzResources,
 			changelog,
 			showChangelogModal,
 			updateUserPreferenceInContext,

frontend/src/providers/App/types.ts

@@ -1,4 +1,3 @@
-import { AuthtypesGettableResourcesDTO } from 'api/generated/services/sigNoz.schemas';
 import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 import APIError from 'types/api/error';
 import { FeatureFlagProps as FeatureFlags } from 'types/api/features/getFeaturesFlags';
@@ -18,19 +17,16 @@ export interface IAppContext {
 	featureFlags: FeatureFlags[] | null;
 	orgPreferences: OrgPreference[] | null;
 	userPreferences: UserPreference[] | null;
-	authzResources: AuthtypesGettableResourcesDTO | null;
 	isLoggedIn: boolean;
 	org: Organization[] | null;
 	isFetchingUser: boolean;
 	isFetchingActiveLicense: boolean;
 	isFetchingFeatureFlags: boolean;
 	isFetchingOrgPreferences: boolean;
-	isFetchingAuthzResources: boolean;
 	userFetchError: unknown;
 	activeLicenseFetchError: APIError | null;
 	featureFlagsFetchError: unknown;
 	orgPreferencesFetchError: unknown;
-	authzResourcesFetchError: unknown;
 	changelog: ChangelogSchema | null;
 	showChangelogModal: boolean;
 	activeLicenseRefetch: () => void;

frontend/src/tests/test-utils.tsx

@@ -248,10 +248,6 @@ export function getAppContextMock(
 			ee: 'Y',
 			setupCompleted: true,
 		},
-		authzResources: null,
-		authzResourcesFetchError: null,
-		isFetchingAuthzResources: false,
-
 		...appContextOverrides,
 	};
 }

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'],

frontend/yarn.lock

@@ -4507,28 +4507,6 @@
     "@radix-ui/react-roving-focus" "1.0.4"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
-"@radix-ui/react-toggle-group@^1.1.7":
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz#e513d6ffdb07509b400ab5b26f2523747c0d51c1"
-  integrity sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==
-  dependencies:
-    "@radix-ui/primitive" "1.1.3"
-    "@radix-ui/react-context" "1.1.2"
-    "@radix-ui/react-direction" "1.1.1"
-    "@radix-ui/react-primitive" "2.1.3"
-    "@radix-ui/react-roving-focus" "1.1.11"
-    "@radix-ui/react-toggle" "1.1.10"
-    "@radix-ui/react-use-controllable-state" "1.2.2"
-
-"@radix-ui/react-toggle@1.1.10", "@radix-ui/react-toggle@^1.1.6":
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz#b04ba0f9609599df666fce5b2f38109a197f08cf"
-  integrity sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==
-  dependencies:
-    "@radix-ui/primitive" "1.1.3"
-    "@radix-ui/react-primitive" "2.1.3"
-    "@radix-ui/react-use-controllable-state" "1.2.2"
-
 "@radix-ui/react-tooltip@1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"
@@ -5231,21 +5209,6 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
-"@signozhq/toggle-group@^0.0.1":
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/@signozhq/toggle-group/-/toggle-group-0.0.1.tgz#c82ff1da34e77b24da53c2d595ad6b4a0d1b1de4"
-  integrity sha512-871bQayL5MaqsuNOFHKexidu9W2Hlg1y4xmH8C5mGmlfZ4bd0ovJ9OweQrM6Puys3jeMwi69xmJuesYCfKQc1g==
-  dependencies:
-    "@radix-ui/react-icons" "^1.3.0"
-    "@radix-ui/react-slot" "^1.1.0"
-    "@radix-ui/react-toggle" "^1.1.6"
-    "@radix-ui/react-toggle-group" "^1.1.7"
-    class-variance-authority "^0.7.0"
-    clsx "^2.1.1"
-    lucide-react "^0.445.0"
-    tailwind-merge "^2.5.2"
-    tailwindcss-animate "^1.0.7"
-
 "@signozhq/tooltip@0.0.2":
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/@signozhq/tooltip/-/tooltip-0.0.2.tgz#bb4e2681868fa2e06db78eff5872ffb2a78b93b6"

pkg/formatter/data.go

@@ -3,7 +3,7 @@ package formatter
 import (
 	"fmt"
 
-	"github.com/SigNoz/signoz/pkg/query-service/converter"
+	"github.com/SigNoz/signoz/pkg/converter"
 	"github.com/dustin/go-humanize"
 )
 

pkg/formatter/data_rate.go

@@ -3,7 +3,7 @@ package formatter
 import (
 	"fmt"
 
-	"github.com/SigNoz/signoz/pkg/query-service/converter"
+	"github.com/SigNoz/signoz/pkg/converter"
 	"github.com/dustin/go-humanize"
 )
 

pkg/formatter/scale.go

@@ -78,9 +78,8 @@ func toFixed(value float64, decimals DecimalCount) string {
 	}
 
 	decimalPos := strings.Index(formatted, ".")
-	precision := 0
 	if decimalPos != -1 {
-		precision = len(formatted) - decimalPos - 1
+		precision := len(formatted) - decimalPos - 1
 		if precision < *decimals {
 			return formatted + strings.Repeat("0", *decimals-precision)
 		}
@@ -89,8 +88,8 @@ func toFixed(value float64, decimals DecimalCount) string {
 	return formatted
 }
 
-func toFixedScaled(value float64, decimals DecimalCount, scaleFormat string) string {
-	return toFixed(value, decimals) + scaleFormat
+func toFixedScaled(value float64, scaleFormat string) string {
+	return toFixed(value, nil) + scaleFormat
 }
 
 func getDecimalsForValue(value float64) int {

pkg/formatter/throughput.go

@@ -13,35 +13,35 @@ func (*throughputFormatter) Name() string {
 	return "throughput"
 }
 
-func simpleCountUnit(value float64, decimals *int, symbol string) string {
+func simpleCountUnit(value float64, symbol string) string {
 	units := []string{"", "K", "M", "B", "T"}
 	scaler := scaledUnits(1000, units, 0)
 
-	return scaler(value, decimals) + " " + symbol
+	return scaler(value, nil) + " " + symbol
 }
 
 func (f *throughputFormatter) Format(value float64, unit string) string {
 	switch unit {
 	case "cps", "{count}/s":
-		return simpleCountUnit(value, nil, "c/s")
+		return simpleCountUnit(value, "c/s")
 	case "ops", "{ops}/s":
-		return simpleCountUnit(value, nil, "op/s")
+		return simpleCountUnit(value, "op/s")
 	case "reqps", "{req}/s":
-		return simpleCountUnit(value, nil, "req/s")
+		return simpleCountUnit(value, "req/s")
 	case "rps", "{read}/s":
-		return simpleCountUnit(value, nil, "r/s")
+		return simpleCountUnit(value, "r/s")
 	case "wps", "{write}/s":
-		return simpleCountUnit(value, nil, "w/s")
+		return simpleCountUnit(value, "w/s")
 	case "iops", "{iops}/s":
-		return simpleCountUnit(value, nil, "iops")
+		return simpleCountUnit(value, "iops")
 	case "cpm", "{count}/min":
-		return simpleCountUnit(value, nil, "c/m")
+		return simpleCountUnit(value, "c/m")
 	case "opm", "{ops}/min":
-		return simpleCountUnit(value, nil, "op/m")
+		return simpleCountUnit(value, "op/m")
 	case "rpm", "{read}/min":
-		return simpleCountUnit(value, nil, "r/m")
+		return simpleCountUnit(value, "r/m")
 	case "wpm", "{write}/min":
-		return simpleCountUnit(value, nil, "w/m")
+		return simpleCountUnit(value, "w/m")
 	}
 	// When unit is not matched, return the value as it is.
 	return fmt.Sprintf("%v", value)

pkg/formatter/time.go

@@ -46,17 +46,17 @@ func toNanoSeconds(value float64) string {
 	if absValue < 1000 {
 		return toFixed(value, nil) + " ns"
 	} else if absValue < 1000000 { // 2000 ns is better represented as 2 µs
-		return toFixedScaled(value/1000, nil, " µs")
+		return toFixedScaled(value/1000, " µs")
 	} else if absValue < 1000000000 { // 2000000 ns is better represented as 2 ms
-		return toFixedScaled(value/1000000, nil, " ms")
+		return toFixedScaled(value/1000000, " ms")
 	} else if absValue < 60000000000 {
-		return toFixedScaled(value/1000000000, nil, " s")
+		return toFixedScaled(value/1000000000, " s")
 	} else if absValue < 3600000000000 {
-		return toFixedScaled(value/60000000000, nil, " min")
+		return toFixedScaled(value/60000000000, " min")
 	} else if absValue < 86400000000000 {
-		return toFixedScaled(value/3600000000000, nil, " hour")
+		return toFixedScaled(value/3600000000000, " hour")
 	} else {
-		return toFixedScaled(value/86400000000000, nil, " day")
+		return toFixedScaled(value/86400000000000, " day")
 	}
 }
 
@@ -66,9 +66,9 @@ func toMicroSeconds(value float64) string {
 	if absValue < 1000 {
 		return toFixed(value, nil) + " µs"
 	} else if absValue < 1000000 { // 2000 µs is better represented as 2 ms
-		return toFixedScaled(value/1000, nil, " ms")
+		return toFixedScaled(value/1000, " ms")
 	} else {
-		return toFixedScaled(value/1000000, nil, " s")
+		return toFixedScaled(value/1000000, " s")
 	}
 }
 
@@ -80,16 +80,16 @@ func toMilliSeconds(value float64) string {
 	if absValue < 1000 {
 		return toFixed(value, nil) + " ms"
 	} else if absValue < 60000 {
-		return toFixedScaled(value/1000, nil, " s")
+		return toFixedScaled(value/1000, " s")
 	} else if absValue < 3600000 {
-		return toFixedScaled(value/60000, nil, " min")
+		return toFixedScaled(value/60000, " min")
 	} else if absValue < 86400000 { // 172800000 ms is better represented as 2 day
-		return toFixedScaled(value/3600000, nil, " hour")
+		return toFixedScaled(value/3600000, " hour")
 	} else if absValue < 31536000000 {
-		return toFixedScaled(value/86400000, nil, " day")
+		return toFixedScaled(value/86400000, " day")
 	}
 
-	return toFixedScaled(value/31536000000, nil, " year")
+	return toFixedScaled(value/31536000000, " year")
 }
 
 // toSeconds returns a easy to read string representation of the given value in seconds
@@ -97,24 +97,24 @@ func toSeconds(value float64) string {
 	absValue := math.Abs(value)
 
 	if absValue < 0.000001 {
-		return toFixedScaled(value*1e9, nil, " ns")
+		return toFixedScaled(value*1e9, " ns")
 	} else if absValue < 0.001 {
-		return toFixedScaled(value*1e6, nil, " µs")
+		return toFixedScaled(value*1e6, " µs")
 	} else if absValue < 1 {
-		return toFixedScaled(value*1e3, nil, " ms")
+		return toFixedScaled(value*1e3, " ms")
 	} else if absValue < 60 {
 		return toFixed(value, nil) + " s"
 	} else if absValue < 3600 {
-		return toFixedScaled(value/60, nil, " min")
+		return toFixedScaled(value/60, " min")
 	} else if absValue < 86400 { // 56000 s is better represented as 15.56 hour
-		return toFixedScaled(value/3600, nil, " hour")
+		return toFixedScaled(value/3600, " hour")
 	} else if absValue < 604800 {
-		return toFixedScaled(value/86400, nil, " day")
+		return toFixedScaled(value/86400, " day")
 	} else if absValue < 31536000 {
-		return toFixedScaled(value/604800, nil, " week")
+		return toFixedScaled(value/604800, " week")
 	}
 
-	return toFixedScaled(value/3.15569e7, nil, " year")
+	return toFixedScaled(value/3.15569e7, " year")
 }
 
 // toMinutes returns a easy to read string representation of the given value in minutes
@@ -124,13 +124,13 @@ func toMinutes(value float64) string {
 	if absValue < 60 {
 		return toFixed(value, nil) + " min"
 	} else if absValue < 1440 {
-		return toFixedScaled(value/60, nil, " hour")
+		return toFixedScaled(value/60, " hour")
 	} else if absValue < 10080 {
-		return toFixedScaled(value/1440, nil, " day")
+		return toFixedScaled(value/1440, " day")
 	} else if absValue < 604800 {
-		return toFixedScaled(value/10080, nil, " week")
+		return toFixedScaled(value/10080, " week")
 	} else {
-		return toFixedScaled(value/5.25948e5, nil, " year")
+		return toFixedScaled(value/5.25948e5, " year")
 	}
 }
 
@@ -142,11 +142,11 @@ func toHours(value float64) string {
 	if absValue < 24 {
 		return toFixed(value, nil) + " hour"
 	} else if absValue < 168 {
-		return toFixedScaled(value/24, nil, " day")
+		return toFixedScaled(value/24, " day")
 	} else if absValue < 8760 {
-		return toFixedScaled(value/168, nil, " week")
+		return toFixedScaled(value/168, " week")
 	} else {
-		return toFixedScaled(value/8760, nil, " year")
+		return toFixedScaled(value/8760, " year")
 	}
 }
 
@@ -157,9 +157,9 @@ func toDays(value float64) string {
 	if absValue < 7 {
 		return toFixed(value, nil) + " day"
 	} else if absValue < 365 {
-		return toFixedScaled(value/7, nil, " week")
+		return toFixedScaled(value/7, " week")
 	} else {
-		return toFixedScaled(value/365, nil, " year")
+		return toFixedScaled(value/365, " year")
 	}
 }
 
@@ -170,6 +170,6 @@ func toWeeks(value float64) string {
 	if absValue < 52 {
 		return toFixed(value, nil) + " week"
 	} else {
-		return toFixedScaled(value/52, nil, " year")
+		return toFixedScaled(value/52, " year")
 	}
 }

pkg/query-service/rules/prom_rule.go

@@ -9,7 +9,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/prometheus"
-	"github.com/SigNoz/signoz/pkg/query-service/formatter"
+	"github.com/SigNoz/signoz/pkg/formatter"
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	"github.com/SigNoz/signoz/pkg/query-service/model"
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"

pkg/query-service/rules/threshold_rule.go

@@ -33,7 +33,7 @@ import (
 
 	logsv3 "github.com/SigNoz/signoz/pkg/query-service/app/logs/v3"
 	tracesV4 "github.com/SigNoz/signoz/pkg/query-service/app/traces/v4"
-	"github.com/SigNoz/signoz/pkg/query-service/formatter"
+	"github.com/SigNoz/signoz/pkg/formatter"
 
 	querierV5 "github.com/SigNoz/signoz/pkg/querier"
 

pkg/types/ruletypes/threshold.go

@@ -7,7 +7,7 @@ import (
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/query-service/converter"
+	"github.com/SigNoz/signoz/pkg/converter"
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/labels"
 	"github.com/SigNoz/signoz/pkg/valuer"