Merge branch 'main' into platform-pod/issues/2683

- migration 099 iterates organizations: per org it backfills custom roles
  from their permission tuples (readRoleTuples helper) and managed roles
  from the registry (JSON precomputed per role name)
- TransactionGroups scans SQL NULL as an empty slice so the api always
  renders transactionGroups as []; nullzero keeps writing NULL for nil

docs/api/openapi.yml

@@ -543,6 +543,31 @@ components:
       required:
       - id
       type: object
+    AuthtypesGettableRole:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        description:
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+        orgId:
+          type: string
+        type:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      - name
+      - description
+      - type
+      - orgId
+      type: object
     AuthtypesGettableToken:
       properties:
         accessToken:
@@ -694,43 +719,6 @@ components:
       - detach
       type: string
     AuthtypesRole:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        description:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        orgId:
-          type: string
-        type:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - name
-      - description
-      - type
-      - orgId
-      type: object
-    AuthtypesRoleMapping:
-      properties:
-        defaultRole:
-          type: string
-        groupMappings:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        useRoleAttribute:
-          type: boolean
-      type: object
-    AuthtypesRoleWithTransactionGroups:
       properties:
         createdAt:
           format: date-time
@@ -758,6 +746,18 @@ components:
       - orgId
       - transactionGroups
       type: object
+    AuthtypesRoleMapping:
+      properties:
+        defaultRole:
+          type: string
+        groupMappings:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        useRoleAttribute:
+          type: boolean
+      type: object
     AuthtypesSamlConfig:
       properties:
         attributeMapping:
@@ -12007,7 +12007,7 @@ paths:
                 properties:
                   data:
                     items:
-                      $ref: '#/components/schemas/AuthtypesRole'
+                      $ref: '#/components/schemas/AuthtypesGettableRole'
                     type: array
                   status:
                     type: string
@@ -12191,7 +12191,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/AuthtypesRoleWithTransactionGroups'
+                    $ref: '#/components/schemas/AuthtypesRole'
                   status:
                     type: string
                 required:

ee/authz/openfgaauthz/provider.go

@@ -119,10 +119,6 @@ func (provider *provider) CheckTransactions(ctx context.Context, subject string,
 	return results, nil
 }
 
-func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
-	return provider.openfgaServer.ListObjects(ctx, subject, relation, objectType)
-}
-
 func (provider *provider) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
 	return provider.openfgaServer.Write(ctx, additions, deletions)
 }
@@ -131,10 +127,6 @@ func (provider *provider) ReadTuples(ctx context.Context, tupleKey *openfgav1.Re
 	return provider.openfgaServer.ReadTuples(ctx, tupleKey)
 }
 
-func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.Role, error) {
-	return provider.pkgAuthzService.Get(ctx, orgID, id)
-}
-
 func (provider *provider) GetByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*authtypes.Role, error) {
 	return provider.pkgAuthzService.GetByOrgIDAndName(ctx, orgID, name)
 }
@@ -183,7 +175,7 @@ func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context,
 	return provider.Write(ctx, tuples, nil)
 }
 
-func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *authtypes.RoleWithTransactionGroups) error {
+func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -208,70 +200,31 @@ func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *a
 		return err
 	}
 
-	if err := provider.store.Create(ctx, role.Role); err != nil {
-		return err
-	}
-
-	return nil
+	return provider.store.Create(ctx, role)
 }
 
-func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) (*authtypes.Role, error) {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	existingRole, err := provider.store.GetByOrgIDAndName(ctx, role.OrgID, role.Name)
-	if err != nil {
-		if !errors.Ast(err, errors.TypeNotFound) {
-			return nil, err
-		}
-	}
-
-	if existingRole != nil {
-		return existingRole, nil
-	}
-
-	err = provider.store.Create(ctx, role)
-	if err != nil {
-		return nil, err
-	}
-
-	return role, nil
+func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.Role, error) {
+	return provider.store.Get(ctx, orgID, id)
 }
 
-func (provider *provider) GetWithTransactionGroups(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.RoleWithTransactionGroups, error) {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	role, err := provider.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	tuples, err := provider.readAllTuplesForRole(ctx, role.Name, orgID)
-	if err != nil {
-		return nil, err
-	}
-
-	transactionGroups := authtypes.MustNewTransactionGroupsFromTuples(tuples)
-	return authtypes.MakeRoleWithTransactionGroups(role, transactionGroups), nil
-}
-
-func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updatedRole *authtypes.RoleWithTransactionGroups) error {
+func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updatedRole *authtypes.Role) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	existingRole, err := provider.GetWithTransactionGroups(ctx, orgID, updatedRole.ID)
+	existingRole, err := provider.Get(ctx, orgID, updatedRole.ID)
 	if err != nil {
 		return err
 	}
 
-	additions, deletions := existingRole.TransactionGroups.Diff(updatedRole.TransactionGroups)
+	existingTuples, err := provider.readAllTuplesForRole(ctx, existingRole.Name, orgID)
+	if err != nil {
+		return err
+	}
+
+	existingGroups := authtypes.MustNewTransactionGroupsFromTuples(existingTuples)
+	additions, deletions := existingGroups.Diff(updatedRole.TransactionGroups)
 	additionTuples, err := authtypes.NewTuplesFromTransactionGroups(existingRole.Name, orgID, additions)
 	if err != nil {
 		return err
@@ -287,7 +240,7 @@ func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updated
 		return err
 	}
 
-	return provider.store.Update(ctx, orgID, updatedRole.Role)
+	return provider.store.Update(ctx, orgID, updatedRole)
 }
 
 func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
@@ -296,7 +249,7 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	role, err := provider.GetWithTransactionGroups(ctx, orgID, id)
+	role, err := provider.Get(ctx, orgID, id)
 	if err != nil {
 		return err
 	}
@@ -312,7 +265,7 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 		}
 	}
 
-	tuples, err := authtypes.NewTuplesFromTransactionGroups(role.Name, orgID, role.TransactionGroups)
+	tuples, err := provider.readAllTuplesForRole(ctx, role.Name, orgID)
 	if err != nil {
 		return err
 	}
@@ -324,6 +277,24 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 	return provider.store.Delete(ctx, orgID, id)
 }
 
+func (provider *provider) readAllTuplesForRole(ctx context.Context, roleName string, orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
+	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)
+
+	tuples := make([]*openfgav1.TupleKey, 0)
+	for _, objectType := range provider.registry.Types() {
+		typeTuples, err := provider.openfgaServer.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
+			User:   subject,
+			Object: objectType.StringValue() + ":",
+		})
+		if err != nil {
+			return nil, err
+		}
+		tuples = append(tuples, typeTuples...)
+	}
+
+	return tuples, nil
+}
+
 func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) []*openfgav1.TupleKey {
 	tuples := []*openfgav1.TupleKey{}
 
@@ -375,21 +346,3 @@ func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) []*
 
 	return tuples
 }
-
-func (provider *provider) readAllTuplesForRole(ctx context.Context, roleName string, orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
-	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)
-
-	tuples := make([]*openfgav1.TupleKey, 0)
-	for _, objectType := range provider.registry.Types() {
-		typeTuples, err := provider.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
-			User:   subject,
-			Object: objectType.StringValue() + ":",
-		})
-		if err != nil {
-			return nil, err
-		}
-		tuples = append(tuples, typeTuples...)
-	}
-
-	return tuples, nil
-}

ee/authz/openfgaserver/server.go

@@ -105,10 +105,6 @@ func (server *Server) BatchCheck(ctx context.Context, tupleReq map[string]*openf
 	return server.pkgAuthzService.BatchCheck(ctx, tupleReq)
 }
 
-func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
-	return server.pkgAuthzService.ListObjects(ctx, subject, relation, objectType)
-}
-
 func (server *Server) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
 	return server.pkgAuthzService.Write(ctx, additions, deletions)
 }

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -2082,6 +2082,39 @@ export interface AuthtypesGettableAuthDomainDTO {
 	updatedAt?: string;
 }
 
+export interface AuthtypesGettableRoleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	description: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	/**
+	 * @type string
+	 */
+	type: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
 export interface AuthtypesGettableTokenDTO {
 	/**
 	 * @type string
@@ -2325,39 +2358,6 @@ export interface AuthtypesPostableUserRoleDTO {
 }
 
 export interface AuthtypesRoleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	description: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 */
-	type: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-}
-
-export interface AuthtypesRoleWithTransactionGroupsDTO {
 	/**
 	 * @type string
 	 * @format date-time
@@ -10595,7 +10595,7 @@ export type ListRoles200 = {
 	/**
 	 * @type array
 	 */
-	data: AuthtypesRoleDTO[];
+	data: AuthtypesGettableRoleDTO[];
 	/**
 	 * @type string
 	 */
@@ -10617,7 +10617,7 @@ export type GetRolePathParameters = {
 	id: string;
 };
 export type GetRole200 = {
-	data: AuthtypesRoleWithTransactionGroupsDTO;
+	data: AuthtypesRoleDTO;
 	/**
 	 * @type string
 	 */

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -3,7 +3,7 @@ import { Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useListRoles } from 'api/generated/services/role';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import APIError from 'types/api/error';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -16,7 +16,7 @@ export interface RoleOption {
 }
 
 export function useRoles(): {
-	roles: AuthtypesRoleDTO[];
+	roles: AuthtypesGettableRoleDTO[];
 	isLoading: boolean;
 	isError: boolean;
 	error: APIError | undefined;
@@ -33,7 +33,7 @@ export function useRoles(): {
 }
 
 export function getRoleOptions(
-	roles: AuthtypesRoleDTO[],
+	roles: AuthtypesGettableRoleDTO[],
 	valueField: 'id' | 'name',
 ): RoleOption[] {
 	return roles.map((role) => ({
@@ -79,7 +79,7 @@ interface BaseProps {
 	placeholder?: string;
 	className?: string;
 	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
-	roles?: AuthtypesRoleDTO[];
+	roles?: AuthtypesGettableRoleDTO[];
 	loading?: boolean;
 	isError?: boolean;
 	error?: APIError;

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -4,7 +4,7 @@ import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { useCopyToClipboard } from 'react-use';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -24,7 +24,7 @@ interface OverviewTabProps {
 	onRolesChange: (v: string[]) => void;
 	isDisabled: boolean;
 	canUpdate?: boolean;
-	availableRoles: AuthtypesRoleDTO[];
+	availableRoles: AuthtypesGettableRoleDTO[];
 	rolesLoading?: boolean;
 	rolesError?: boolean;
 	rolesErrorObj?: APIError | undefined;

frontend/src/constants/localStorage.ts

@@ -31,6 +31,12 @@ export enum LOCALSTORAGE {
 	METRICS_LIST_OPTIONS = 'METRICS_LIST_OPTIONS',
 	SHOW_EXCEPTIONS_QUICK_FILTERS = 'SHOW_EXCEPTIONS_QUICK_FILTERS',
 	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
+	QUICK_FILTERS_WIDTH_LOGS = 'QUICK_FILTERS_WIDTH_LOGS',
+	QUICK_FILTERS_WIDTH_TRACES = 'QUICK_FILTERS_WIDTH_TRACES',
+	QUICK_FILTERS_WIDTH_METER = 'QUICK_FILTERS_WIDTH_METER',
+	QUICK_FILTERS_WIDTH_API_MONITORING = 'QUICK_FILTERS_WIDTH_API_MONITORING',
+	QUICK_FILTERS_WIDTH_EXCEPTIONS = 'QUICK_FILTERS_WIDTH_EXCEPTIONS',
+	QUICK_FILTERS_WIDTH_INFRA = 'QUICK_FILTERS_WIDTH_INFRA',
 	FUNNEL_STEPS = 'FUNNEL_STEPS',
 	SPAN_DETAILS_PINNED_ATTRIBUTES = 'SPAN_DETAILS_PINNED_ATTRIBUTES',
 	LAST_USED_CUSTOM_TIME_RANGES = 'LAST_USED_CUSTOM_TIME_RANGES',

frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss

@@ -163,12 +163,23 @@
 	}
 
 	&.filter-visible {
+		// Width is owned by ResizableBox (inline style); this section is the
+		// ResizableBox root, so it stays position: relative for the drag handle.
 		.api-quick-filter-left-section {
-			width: 260px;
+			.resizable-box__content {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.quick-filters-container {
+				flex: 1;
+				min-height: 0;
+			}
 		}
 
 		.api-module-right-section {
-			width: calc(100% - 260px);
+			flex: 1;
+			min-width: 0;
 		}
 	}
 }

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -4,21 +4,49 @@ import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 
 import DomainList from './Domains/DomainList';
 
 import './Explorer.styles.scss';
 
+const QUICK_FILTERS_DEFAULT_WIDTH = 260;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function Explorer(): JSX.Element {
 	useEffect(() => {
 		logEvent('API Monitoring: Landing page visited', {});
 	}, []);
 
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_API_MONITORING,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className={cx('api-monitoring-page', 'filter-visible')}>
-				<section className="api-quick-filter-left-section">
+				<ResizableBox
+					handle="right"
+					defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+					initialWidth={quickFiltersInitialWidth}
+					minWidth={QUICK_FILTERS_MIN_WIDTH}
+					maxWidth={QUICK_FILTERS_MAX_WIDTH}
+					onResize={persistQuickFiltersWidth}
+					resetToDefaultOnDoubleClick
+					withHandle
+					className="api-quick-filter-left-section"
+					handleTestId="quick-filters-resize-handle"
+				>
 					<QuickFilters
 						className="qf-api-monitoring"
 						source={QuickFiltersSource.API_MONITORING}
@@ -27,7 +55,7 @@ function Explorer(): JSX.Element {
 						showQueryName={false}
 						handleFilterVisibilityChange={(): void => {}}
 					/>
-				</section>
+				</ResizableBox>
 				<DomainList />
 			</div>
 		</Sentry.ErrorBoundary>

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -6,6 +6,7 @@ import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import K8sBaseDetails from 'container/InfraMonitoringK8s/Base/K8sBaseDetails';
 import { K8sBaseList } from 'container/InfraMonitoringK8s/Base/K8sBaseList';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
@@ -16,6 +17,8 @@ import {
 } from 'container/InfraMonitoringK8s/hooks';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { useAppContext } from 'providers/App/App';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
@@ -40,8 +43,21 @@ import { getHostsQuickFiltersConfig } from './utils';
 import styles from './InfraMonitoringHosts.module.scss';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';
 
+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_INFRA,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
 	const [, setCurrentPage] = useInfraMonitoringPageListing();
 	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
 
@@ -139,7 +155,18 @@ function Hosts(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<div className={styles.quickFiltersContainer}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className={styles.quickFiltersContainer}
+							handleTestId="quick-filters-resize-handle"
+						>
 							<div className={styles.quickFiltersContainerHeader}>
 								<Typography.Text>Filters</Typography.Text>
 								<Tooltip title="Collapse Filters">
@@ -156,7 +183,7 @@ function Hosts(): JSX.Element {
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 								onFilterChange={handleQuickFiltersChange}
 							/>
-						</div>
+						</ResizableBox>
 					)}
 					<div
 						className={`${styles.listContainer}${

frontend/src/container/InfraMonitoringHosts/InfraMonitoringHosts.module.scss

@@ -44,26 +44,20 @@
 }
 
 .quickFiltersContainer {
-	width: 280px;
-	min-width: 280px;
+	// Width is owned by ResizableBox (inline style). No overflow here: the panel
+	// must not scroll (QuickFilters scrolls its own list internally) — an
+	// overflow on the root would also clip the edge-mounted resize grip.
+	flex-shrink: 0;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;
 
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
+	:global(.resizable-box__content) {
+		display: flex;
+		flex-direction: column;
 	}
 
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	:global(.quick-filters-container) {
+		flex: 1;
+		min-height: 0;
 	}
 
 	:global(.ant-collapse-header) {
@@ -142,7 +136,9 @@
 }
 
 .listContainerFiltersVisible {
-	max-width: calc(100% - 280px);
+	// Width is driven by flex now that the filters panel is resizable; the list
+	// fills whatever space the (variable-width) panel leaves.
+	max-width: 100%;
 }
 
 .quickFiltersToggleContainer {

frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx

@@ -6,6 +6,7 @@ import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import K8sBaseDetails from 'container/InfraMonitoringK8sV2/Base/K8sBaseDetails';
 import { K8sBaseList } from 'container/InfraMonitoringK8sV2/Base/K8sBaseList';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8sV2/Base/types';
@@ -16,6 +17,8 @@ import {
 } from 'container/InfraMonitoringK8sV2/hooks';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { useAppContext } from 'providers/App/App';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
@@ -40,8 +43,21 @@ import { getHostsQuickFiltersConfig } from './utils';
 import styles from './InfraMonitoringHosts.module.scss';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';
 
+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_INFRA,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
 	const [, setCurrentPage] = useInfraMonitoringPageListing();
 	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
 
@@ -139,7 +155,18 @@ function Hosts(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<div className={styles.quickFiltersContainer}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className={styles.quickFiltersContainer}
+							handleTestId="quick-filters-resize-handle"
+						>
 							<div className={styles.quickFiltersContainerHeader}>
 								<Typography.Text>Filters</Typography.Text>
 								<Tooltip title="Collapse Filters">
@@ -156,7 +183,7 @@ function Hosts(): JSX.Element {
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 								onFilterChange={handleQuickFiltersChange}
 							/>
-						</div>
+						</ResizableBox>
 					)}
 					<div
 						className={`${styles.listContainer}${

frontend/src/container/InfraMonitoringHostsV2/InfraMonitoringHosts.module.scss

@@ -44,26 +44,20 @@
 }
 
 .quickFiltersContainer {
-	width: 280px;
-	min-width: 280px;
+	// Width is owned by ResizableBox (inline style). No overflow here: the panel
+	// must not scroll (QuickFilters scrolls its own list internally) — an
+	// overflow on the root would also clip the edge-mounted resize grip.
+	flex-shrink: 0;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;
 
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
+	:global(.resizable-box__content) {
+		display: flex;
+		flex-direction: column;
 	}
 
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	:global(.quick-filters-container) {
+		flex: 1;
+		min-height: 0;
 	}
 
 	:global(.ant-collapse-header) {
@@ -142,7 +136,9 @@
 }
 
 .listContainerFiltersVisible {
-	max-width: calc(100% - 280px);
+	// Width is driven by flex now that the filters panel is resizable; the list
+	// fills whatever space the (variable-width) panel leaves.
+	max-width: 100%;
 }
 
 .quickFiltersToggleContainer {

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.module.scss

@@ -44,26 +44,15 @@
 }
 
 .quickFiltersContainer {
-	width: 280px;
-	min-width: 280px;
+	// Width is owned by ResizableBox (inline style). No overflow here: the panel
+	// must not scroll (QuickFilters scrolls its own list internally) — an
+	// overflow on the root would also clip the edge-mounted resize grip.
+	flex-shrink: 0;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;
 
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	:global(.resizable-box__content) {
+		display: flex;
+		flex-direction: column;
 	}
 
 	:global(.quick-filters) {
@@ -128,7 +117,9 @@
 }
 
 .listContainerFiltersVisible {
-	max-width: calc(100% - 280px);
+	// Width is driven by flex now that the filters panel is resizable; the list
+	// fills whatever space the (variable-width) panel leaves.
+	max-width: 100%;
 }
 
 .categorySelectorSection {
@@ -219,8 +210,16 @@
 
 .quickFiltersSection {
 	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
 	overflow-y: auto;
 
+	:global(.quick-filters-container) {
+		flex: 1;
+		min-height: 0;
+	}
+
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -6,6 +6,7 @@ import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import {
@@ -22,6 +23,8 @@ import {
 	Workflow,
 } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { FeatureKeys } from '../../constants/features';
@@ -56,9 +59,23 @@ import K8sVolumesList from './Volumes/K8sVolumesList';
 
 import styles from './InfraMonitoringK8s.module.scss';
 
+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 export default function InfraMonitoringK8s(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
 
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_INFRA,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	const [selectedCategory, setSelectedCategory] = useInfraMonitoringCategory();
 	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
@@ -212,7 +229,18 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<div className={styles.quickFiltersContainer}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className={styles.quickFiltersContainer}
+							handleTestId="quick-filters-resize-handle"
+						>
 							<div className={styles.categorySelectorSection}>
 								<div className={styles.sectionHeader} data-type="resource">
 									<Typography.Text className={styles.sectionLabel}>
@@ -265,7 +293,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 									/>
 								)}
 							</div>
-						</div>
+						</ResizableBox>
 					)}
 
 					<div

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.module.scss

@@ -44,26 +44,15 @@
 }
 
 .quickFiltersContainer {
-	width: 280px;
-	min-width: 280px;
+	// Width is owned by ResizableBox (inline style). No overflow here: the panel
+	// must not scroll (QuickFilters scrolls its own list internally) — an
+	// overflow on the root would also clip the edge-mounted resize grip.
+	flex-shrink: 0;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;
 
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	:global(.resizable-box__content) {
+		display: flex;
+		flex-direction: column;
 	}
 
 	:global(.quick-filters) {
@@ -128,7 +117,9 @@
 }
 
 .listContainerFiltersVisible {
-	max-width: calc(100% - 280px);
+	// Width is driven by flex now that the filters panel is resizable; the list
+	// fills whatever space the (variable-width) panel leaves.
+	max-width: 100%;
 }
 
 .categorySelectorSection {
@@ -219,8 +210,16 @@
 
 .quickFiltersSection {
 	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
 	overflow-y: auto;
 
+	:global(.quick-filters-container) {
+		flex: 1;
+		min-height: 0;
+	}
+
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -6,6 +6,7 @@ import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import {
@@ -22,6 +23,8 @@ import {
 	Workflow,
 } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { FeatureKeys } from '../../constants/features';
@@ -56,9 +59,23 @@ import K8sVolumesList from './Volumes/K8sVolumesList';
 
 import styles from './InfraMonitoringK8s.module.scss';
 
+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 export default function InfraMonitoringK8s(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
 
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_INFRA,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	const [selectedCategory, setSelectedCategory] = useInfraMonitoringCategory();
 	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
@@ -212,7 +229,18 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<div className={styles.quickFiltersContainer}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className={styles.quickFiltersContainer}
+							handleTestId="quick-filters-resize-handle"
+						>
 							<div className={styles.categorySelectorSection}>
 								<div className={styles.sectionHeader} data-type="resource">
 									<Typography.Text className={styles.sectionLabel}>
@@ -265,7 +293,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 									/>
 								)}
 							</div>
-						</div>
+						</ResizableBox>
 					)}
 
 					<div

frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss

@@ -3,12 +3,23 @@
 	flex-direction: row;
 
 	.meter-explorer-quick-filters-section {
-		width: 280px;
+		// Width is owned by ResizableBox (inline style).
+		flex-shrink: 0;
 		border-right: 1px solid var(--l1-border);
 
 		&.hidden {
 			display: none;
 		}
+
+		.resizable-box__content {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.quick-filters-container {
+			flex: 1;
+			min-height: 0;
+		}
 	}
 
 	.meter-explorer-content-section {
@@ -86,7 +97,9 @@
 
 	&.quick-filters-open {
 		.meter-explorer-content-section {
-			width: calc(100% - 280px);
+			flex: 1;
+			width: auto;
+			min-width: 0;
 		}
 	}
 

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -7,6 +7,7 @@ import cx from 'classnames';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
@@ -18,6 +19,8 @@ import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Filter } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -30,6 +33,10 @@ import { splitQueryIntoOneChartPerQuery } from './utils';
 
 import './Explorer.styles.scss';
 
+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function Explorer(): JSX.Element {
 	const {
 		handleRunQuery,
@@ -55,6 +62,16 @@ function Explorer(): JSX.Element {
 
 	const [showQuickFilters, setShowQuickFilters] = useState(true);
 
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_METER,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	const defaultQuery = useMemo(
 		() =>
 			updateAllQueriesOperators(
@@ -127,10 +144,19 @@ function Explorer(): JSX.Element {
 					'quick-filters-open': showQuickFilters,
 				})}
 			>
-				<div
+				<ResizableBox
+					handle="right"
+					defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+					initialWidth={quickFiltersInitialWidth}
+					minWidth={QUICK_FILTERS_MIN_WIDTH}
+					maxWidth={QUICK_FILTERS_MAX_WIDTH}
+					onResize={persistQuickFiltersWidth}
+					resetToDefaultOnDoubleClick
+					withHandle
 					className={cx('meter-explorer-quick-filters-section', {
 						hidden: !showQuickFilters,
 					})}
+					handleTestId="quick-filters-resize-handle"
 				>
 					<QuickFilters
 						className="qf-meter-explorer"
@@ -142,7 +168,7 @@ function Explorer(): JSX.Element {
 							setShowQuickFilters(!showQuickFilters);
 						}}
 					/>
-				</div>
+				</ResizableBox>
 
 				<div className="meter-explorer-content-section">
 					<div className="meter-explorer-explore-content">

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

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 import cx from 'classnames';
 import { Pagination, Skeleton } from 'antd';
 import { useListRoles } from 'api/generated/services/role';
-import { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
@@ -22,7 +22,7 @@ const PAGE_SIZE = 20;
 
 type DisplayItem =
 	| { type: 'section'; label: string; count?: number }
-	| { type: 'role'; role: AuthtypesRoleDTO };
+	| { type: 'role'; role: AuthtypesGettableRoleDTO };
 
 interface RolesListingTableProps {
 	searchQuery: string;
@@ -190,7 +190,7 @@ function RolesListingTable({
 		);
 	}
 
-	const renderRow = (role: AuthtypesRoleDTO): JSX.Element => (
+	const renderRow = (role: AuthtypesGettableRoleDTO): JSX.Element => (
 		<div
 			key={role.id}
 			className={cx(styles.tableRow, {

frontend/src/container/RolesSettings/hooks/useRolePermissions.ts

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from 'react-query';
 import { ErrorType } from 'api/generatedAPIInstance';
 import type {
 	AuthtypesPostableRoleDTO,
-	AuthtypesRoleWithTransactionGroupsDTO,
+	AuthtypesRoleDTO,
 	AuthtypesTransactionGroupDTO,
 	AuthtypesUpdatableRoleDTO,
 } from 'api/generated/services/sigNoz.schemas';
@@ -133,7 +133,7 @@ export function transformTransactionGroupsToResourcePermissions(
 }
 
 export function transformApiToRolePermissions(
-	role: AuthtypesRoleWithTransactionGroupsDTO,
+	role: AuthtypesRoleDTO,
 ): RolePermissionsData {
 	return {
 		roleId: role.id,

frontend/src/hooks/member/useMemberRoleManager.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { useQueryClient } from 'react-query';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	getGetRolesByUserIDQueryKey,
 	useGetRolesByUserID,
@@ -21,11 +21,11 @@ export interface MemberRoleUpdateFailure {
 }
 
 interface UseMemberRoleManagerResult {
-	currentRoles: AuthtypesRoleDTO[];
+	currentRoles: AuthtypesGettableRoleDTO[];
 	isLoading: boolean;
 	applyDiff: (
 		localRoleIds: string[],
-		availableRoles: AuthtypesRoleDTO[],
+		availableRoles: AuthtypesGettableRoleDTO[],
 	) => Promise<MemberRoleUpdateFailure[]>;
 }
 
@@ -40,7 +40,7 @@ export function useMemberRoleManager(
 		{ query: { enabled: !!userId && enabled } },
 	);
 
-	const currentRoles = useMemo<AuthtypesRoleDTO[]>(
+	const currentRoles = useMemo<AuthtypesGettableRoleDTO[]>(
 		() => data?.data ?? [],
 		[data?.data],
 	);
@@ -61,7 +61,7 @@ export function useMemberRoleManager(
 	const applyDiff = useCallback(
 		async (
 			localRoleIds: string[],
-			availableRoles: AuthtypesRoleDTO[],
+			availableRoles: AuthtypesGettableRoleDTO[],
 		): Promise<MemberRoleUpdateFailure[]> => {
 			const currentRoleIds = new Set(
 				currentRoles.map((r) => r.id).filter(Boolean),

frontend/src/hooks/serviceAccount/useServiceAccountRoleManager.ts

@@ -6,7 +6,7 @@ import {
 	useDeleteServiceAccountRoleDeprecated,
 	useGetServiceAccountRoles,
 } from 'api/generated/services/serviceaccount';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import { retryOn429 } from 'utils/errorUtils';
 
 const enum PromiseStatus {
@@ -21,11 +21,11 @@ export interface RoleUpdateFailure {
 }
 
 interface UseServiceAccountRoleManagerResult {
-	currentRoles: AuthtypesRoleDTO[];
+	currentRoles: AuthtypesGettableRoleDTO[];
 	isLoading: boolean;
 	applyDiff: (
 		localRoleIds: string[],
-		availableRoles: AuthtypesRoleDTO[],
+		availableRoles: AuthtypesGettableRoleDTO[],
 	) => Promise<RoleUpdateFailure[]>;
 }
 
@@ -40,7 +40,7 @@ export function useServiceAccountRoleManager(
 		{ query: { enabled: options?.enabled ?? true } },
 	);
 
-	const currentRoles = useMemo<AuthtypesRoleDTO[]>(
+	const currentRoles = useMemo<AuthtypesGettableRoleDTO[]>(
 		() => data?.data ?? [],
 		[data?.data],
 	);
@@ -64,7 +64,7 @@ export function useServiceAccountRoleManager(
 	const applyDiff = useCallback(
 		async (
 			localRoleIds: string[],
-			availableRoles: AuthtypesRoleDTO[],
+			availableRoles: AuthtypesGettableRoleDTO[],
 		): Promise<RoleUpdateFailure[]> => {
 			const currentRoleIds = new Set(
 				currentRoles.map((r) => r.id).filter(Boolean),

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

@@ -1,8 +1,11 @@
-import { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	AuthtypesGettableRoleDTO,
+	AuthtypesRoleDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 const orgId = '019ba2bb-2fa1-7b24-8159-cfca08617ef9';
 
-export const managedRoles: AuthtypesRoleDTO[] = [
+export const managedRoles: AuthtypesGettableRoleDTO[] = [
 	{
 		id: '019c24aa-2248-756f-9833-984f1ab63819',
 		createdAt: '2026-02-03T18:00:55.624356Z',
@@ -35,7 +38,7 @@ export const managedRoles: AuthtypesRoleDTO[] = [
 	},
 ];
 
-export const customRoles: AuthtypesRoleDTO[] = [
+export const customRoles: AuthtypesGettableRoleDTO[] = [
 	{
 		id: '019c24aa-3333-0001-aaaa-111111111111',
 		createdAt: '2026-02-10T10:30:00.000Z',
@@ -56,12 +59,24 @@ export const customRoles: AuthtypesRoleDTO[] = [
 	},
 ];
 
-export const allRoles: AuthtypesRoleDTO[] = [...managedRoles, ...customRoles];
+export const allRoles: AuthtypesGettableRoleDTO[] = [
+	...managedRoles,
+	...customRoles,
+];
 
 export const listRolesSuccessResponse = {
 	status: 'success',
 	data: allRoles,
 };
 
-export const customRoleResponse = { status: 'success', data: customRoles[0] };
-export const managedRoleResponse = { status: 'success', data: managedRoles[0] };
+const customRole: AuthtypesRoleDTO = {
+	...customRoles[0],
+	transactionGroups: [],
+};
+const managedRole: AuthtypesRoleDTO = {
+	...managedRoles[0],
+	transactionGroups: [],
+};
+
+export const customRoleResponse = { status: 'success', data: customRole };
+export const managedRoleResponse = { status: 'success', data: managedRole };

frontend/src/pages/AllErrors/AllErrors.styles.scss

@@ -20,12 +20,23 @@
 	}
 
 	&.filter-visible {
+		// Width is owned by ResizableBox (inline style); this section is the
+		// ResizableBox root, so it stays position: relative for the drag handle.
 		.all-errors-quick-filter-section {
-			width: 260px;
+			.resizable-box__content {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.quick-filters-container {
+				flex: 1;
+				min-height: 0;
+			}
 		}
 
 		.all-errors-right-section {
-			width: calc(100% - 260px);
+			flex: 1;
+			min-width: 0;
 		}
 	}
 }

frontend/src/pages/AllErrors/index.tsx

@@ -18,12 +18,18 @@ import Toolbar from 'container/Toolbar/Toolbar';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 
 import { routes } from './config';
 import { useAllErrorsQueryState } from './QueryStateContext';
 
 import './AllErrors.styles.scss';
 
+const QUICK_FILTERS_DEFAULT_WIDTH = 260;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function AllErrors(): JSX.Element {
 	const { pathname } = useLocation();
 	const { handleRunQuery } = useQueryBuilder();
@@ -55,17 +61,38 @@ function AllErrors(): JSX.Element {
 		setShowFilters((prev) => !prev);
 	};
 
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_EXCEPTIONS,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	return (
 		<div className={cx('all-errors-page', showFilters ? 'filter-visible' : '')}>
 			{showFilters && (
-				<section className={cx('all-errors-quick-filter-section')}>
+				<ResizableBox
+					handle="right"
+					defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+					initialWidth={quickFiltersInitialWidth}
+					minWidth={QUICK_FILTERS_MIN_WIDTH}
+					maxWidth={QUICK_FILTERS_MAX_WIDTH}
+					onResize={persistQuickFiltersWidth}
+					resetToDefaultOnDoubleClick
+					withHandle
+					className="all-errors-quick-filter-section"
+					handleTestId="quick-filters-resize-handle"
+				>
 					<QuickFilters
 						className="qf-exceptions"
 						source={QuickFiltersSource.EXCEPTIONS}
 						signal={SignalType.EXCEPTIONS}
 						handleFilterVisibilityChange={handleFilterVisibilityChange}
 					/>
-				</section>
+				</ResizableBox>
 			)}
 			<section
 				className={cx(

frontend/src/pages/LogsExplorer/LogsExplorer.styles.scss

@@ -41,15 +41,18 @@
 	}
 
 	&.filter-visible {
+		// Width is owned by ResizableBox (inline style); this section is the
+		// ResizableBox root, so it stays position: relative for the drag handle.
 		.log-quick-filter-left-section {
-			width: 260px;
 			height: 100%;
 			overflow: visible;
 			min-height: 0;
-			position: relative;
 			z-index: 2;
-			display: flex;
-			flex-direction: column;
+
+			.resizable-box__content {
+				display: flex;
+				flex-direction: column;
+			}
 
 			.quick-filters-container {
 				flex: 1;
@@ -58,7 +61,9 @@
 		}
 
 		.log-module-right-section {
-			width: calc(100% - 260px);
+			flex: 1;
+			width: auto;
+			min-width: 0;
 		}
 	}
 }

frontend/src/pages/LogsExplorer/index.tsx

@@ -26,6 +26,8 @@ import {
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { defaultTo, isEmpty, isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { EventSourceProvider } from 'providers/EventSource';
 import { Warning } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';
@@ -44,9 +46,23 @@ import { ExplorerViews } from './utils';
 
 import './LogsExplorer.styles.scss';
 
+const QUICK_FILTERS_DEFAULT_WIDTH = 260;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function LogsExplorer(): JSX.Element {
 	const [showLiveLogs, setShowLiveLogs] = useState<boolean>(false);
 
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_LOGS,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	// Get panel type from URL
 	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
@@ -226,14 +242,25 @@ function LogsExplorer(): JSX.Element {
 					className={cx('logs-module-page', showFilters ? 'filter-visible' : '')}
 				>
 					{showFilters && (
-						<section className={cx('log-quick-filter-left-section')}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className="log-quick-filter-left-section"
+							handleTestId="quick-filters-resize-handle"
+						>
 							<QuickFilters
 								className="qf-logs-explorer"
 								signal={SignalType.LOGS}
 								source={QuickFiltersSource.LOGS_EXPLORER}
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 							/>
-						</section>
+						</ResizableBox>
 					)}
 					<section className={cx('log-module-right-section')}>
 						<Toolbar

frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss

@@ -76,7 +76,8 @@
 	--input-focus-border-color: var(--internal-ant-border-color-hover);
 
 	.filter {
-		width: 260px;
+		// Width is owned by ResizableBox (inline style).
+		flex-shrink: 0;
 		height: 100%;
 		min-height: 100vh;
 
@@ -84,9 +85,14 @@
 		border: 1px solid var(--l1-border);
 		background-color: var(--l1-background);
 
-		> .ant-card-body {
-			padding: 0;
-			width: 258px;
+		.resizable-box__content {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.quick-filters-container {
+			flex: 1;
+			min-height: 0;
 		}
 	}
 
@@ -101,6 +107,8 @@
 		border-color: var(--l1-border);
 	}
 	.trace-explorer.filters-expanded {
-		width: calc(100% - 260px);
+		flex: 1;
+		width: auto;
+		min-width: 0;
 	}
 }

frontend/src/pages/TracesExplorer/index.tsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
-import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
@@ -41,6 +40,8 @@ import { isEmpty } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
 import { TOOLBAR_VIEWS } from 'pages/TracesExplorer/constants';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { Warning } from 'types/api';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -62,6 +63,10 @@ import TimeSeriesView from './TimeSeriesView';
 
 import './TracesExplorer.styles.scss';
 
+const QUICK_FILTERS_DEFAULT_WIDTH = 260;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function TracesExplorer(): JSX.Element {
 	const {
 		panelType,
@@ -117,6 +122,16 @@ function TracesExplorer(): JSX.Element {
 	const [warning, setWarning] = useState<Warning | undefined>();
 	const [isOpen, setOpen] = useState<boolean>(true);
 
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_TRACES,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	const defaultQuery = useMemo(
 		(): Query =>
 			updateAllQueriesOperators(
@@ -250,16 +265,29 @@ function TracesExplorer(): JSX.Element {
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="trace-explorer-page">
-				<Card className="filter" hidden={!isOpen}>
-					<QuickFilters
-						className="qf-traces-explorer"
-						source={QuickFiltersSource.TRACES_EXPLORER}
-						signal={SignalType.TRACES}
-						handleFilterVisibilityChange={(): void => {
-							setOpen(!isOpen);
-						}}
-					/>
-				</Card>
+				{isOpen && (
+					<ResizableBox
+						handle="right"
+						defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+						initialWidth={quickFiltersInitialWidth}
+						minWidth={QUICK_FILTERS_MIN_WIDTH}
+						maxWidth={QUICK_FILTERS_MAX_WIDTH}
+						onResize={persistQuickFiltersWidth}
+						resetToDefaultOnDoubleClick
+						withHandle
+						className="filter"
+						handleTestId="quick-filters-resize-handle"
+					>
+						<QuickFilters
+							className="qf-traces-explorer"
+							source={QuickFiltersSource.TRACES_EXPLORER}
+							signal={SignalType.TRACES}
+							handleFilterVisibilityChange={(): void => {
+								setOpen(!isOpen);
+							}}
+						/>
+					</ResizableBox>
+				)}
 				<div
 					className={cx('trace-explorer', {
 						'filters-expanded': isOpen,

frontend/src/periscope/components/ResizableBox/ResizableBox.styles.scss

@@ -1,6 +1,5 @@
 .resizable-box {
 	position: relative;
-	overflow: hidden;
 
 	&--disabled {
 		flex: 1;
@@ -18,6 +17,17 @@
 		z-index: 10;
 		background: var(--l2-border);
 
+		// Extend the interactive area beyond the 1px visual line so the handle
+		// is easy to grab and double-click, without changing its appearance.
+		&::before {
+			content: '';
+			position: absolute;
+			top: -4px;
+			right: -4px;
+			bottom: -4px;
+			left: -4px;
+		}
+
 		&:hover,
 		&:active {
 			background: var(--primary);
@@ -55,4 +65,29 @@
 			right: 0;
 		}
 	}
+
+	// Visible grip indicator (opt-in via the `withHandle` prop). Purely visual —
+	// pointer events fall through to the handle so it still owns drag + reset.
+	&__grip {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 14px;
+		height: 26px;
+		border: 1px solid var(--l2-border);
+		border-radius: 4px;
+		background: var(--l1-background);
+		color: var(--l2-foreground);
+		pointer-events: none;
+	}
+
+	&__handle:hover &__grip,
+	&__handle:active &__grip {
+		border-color: var(--primary);
+		color: var(--primary);
+	}
 }

frontend/src/periscope/components/ResizableBox/ResizableBox.tsx

@@ -1,3 +1,4 @@
+import { GripVertical } from '@signozhq/icons';
 import { useCallback, useRef, useState } from 'react';
 
 import './ResizableBox.styles.scss';
@@ -11,15 +12,28 @@ export interface ResizableBoxProps {
 	// resize (width). Dragging the handle away from the content grows the box;
 	// dragging it toward the content shrinks it.
 	handle?: ResizableBoxHandle;
+	// Canonical default size, and the target that double-click reset restores to.
 	defaultHeight?: number;
 	minHeight?: number;
 	maxHeight?: number;
 	defaultWidth?: number;
 	minWidth?: number;
 	maxWidth?: number;
+	// Starting size when different from the default (e.g. a persisted value).
+	// Falls back to defaultWidth/defaultHeight when omitted, preserving the
+	// behavior of callers that don't opt in.
+	initialWidth?: number;
+	initialHeight?: number;
+	// When true, double-clicking the handle resets the size to
+	// defaultWidth/defaultHeight and fires onResize with that value.
+	resetToDefaultOnDoubleClick?: boolean;
+	// When true, renders a visible grip indicator on the handle so it is
+	// discoverable as a draggable affordance.
+	withHandle?: boolean;
 	onResize?: (size: number) => void;
 	disabled?: boolean;
 	className?: string;
+	handleTestId?: string;
 }
 
 function ResizableBox({
@@ -31,13 +45,22 @@ function ResizableBox({
 	defaultWidth = 200,
 	minWidth = 50,
 	maxWidth = Infinity,
+	initialWidth,
+	initialHeight,
+	resetToDefaultOnDoubleClick = false,
+	withHandle = false,
 	onResize,
 	disabled = false,
 	className,
+	handleTestId,
 }: ResizableBoxProps): JSX.Element {
 	const isHorizontal = handle === 'left' || handle === 'right';
 	const isStartHandle = handle === 'top' || handle === 'left';
-	const [size, setSize] = useState(isHorizontal ? defaultWidth : defaultHeight);
+	const [size, setSize] = useState(
+		isHorizontal
+			? (initialWidth ?? defaultWidth)
+			: (initialHeight ?? defaultHeight),
+	);
 	const containerRef = useRef<HTMLDivElement>(null);
 
 	const handleMouseDown = useCallback(
@@ -83,6 +106,21 @@ function ResizableBox({
 		],
 	);
 
+	const handleDoubleClick = useCallback((): void => {
+		if (!resetToDefaultOnDoubleClick) {
+			return;
+		}
+		const nextSize = isHorizontal ? defaultWidth : defaultHeight;
+		setSize(nextSize);
+		onResize?.(nextSize);
+	}, [
+		resetToDefaultOnDoubleClick,
+		isHorizontal,
+		defaultWidth,
+		defaultHeight,
+		onResize,
+	]);
+
 	const containerStyle = disabled
 		? undefined
 		: isHorizontal
@@ -99,7 +137,22 @@ function ResizableBox({
 			style={containerStyle}
 		>
 			<div className="resizable-box__content">{children}</div>
-			{!disabled && <div className={handleClass} onMouseDown={handleMouseDown} />}
+			{!disabled && (
+				<div
+					role="separator"
+					aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
+					className={handleClass}
+					onMouseDown={handleMouseDown}
+					onDoubleClick={handleDoubleClick}
+					data-testid={handleTestId}
+				>
+					{withHandle && (
+						<span className="resizable-box__grip">
+							<GripVertical size={12} />
+						</span>
+					)}
+				</div>
+			)}
 		</div>
 	);
 }

frontend/src/periscope/components/ResizableBox/__tests__/ResizableBox.test.tsx

@@ -0,0 +1,137 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import ResizableBox from '../ResizableBox';
+
+const HANDLE_TEST_ID = 'resize-handle';
+
+describe('ResizableBox', () => {
+	it('starts at defaultWidth when initialWidth is omitted', () => {
+		render(
+			<ResizableBox
+				handle="right"
+				defaultWidth={260}
+				handleTestId={HANDLE_TEST_ID}
+			>
+				<div>content</div>
+			</ResizableBox>,
+		);
+
+		const box = screen.getByTestId(HANDLE_TEST_ID).parentElement as HTMLElement;
+		expect(box.style.width).toBe('260px');
+	});
+
+	it('starts at initialWidth when provided', () => {
+		render(
+			<ResizableBox
+				handle="right"
+				defaultWidth={260}
+				initialWidth={340}
+				handleTestId={HANDLE_TEST_ID}
+			>
+				<div>content</div>
+			</ResizableBox>,
+		);
+
+		const box = screen.getByTestId(HANDLE_TEST_ID).parentElement as HTMLElement;
+		expect(box.style.width).toBe('340px');
+	});
+
+	it('resets to defaultWidth and fires onResize on double-click when enabled', () => {
+		const onResize = jest.fn();
+		render(
+			<ResizableBox
+				handle="right"
+				defaultWidth={260}
+				initialWidth={480}
+				onResize={onResize}
+				resetToDefaultOnDoubleClick
+				handleTestId={HANDLE_TEST_ID}
+			>
+				<div>content</div>
+			</ResizableBox>,
+		);
+
+		const handle = screen.getByTestId(HANDLE_TEST_ID);
+		const box = handle.parentElement as HTMLElement;
+		expect(box.style.width).toBe('480px');
+
+		fireEvent.doubleClick(handle);
+
+		expect(box.style.width).toBe('260px');
+		expect(onResize).toHaveBeenCalledWith(260);
+	});
+
+	it('does nothing on double-click when reset is not enabled', () => {
+		const onResize = jest.fn();
+		render(
+			<ResizableBox
+				handle="right"
+				defaultWidth={260}
+				initialWidth={480}
+				onResize={onResize}
+				handleTestId={HANDLE_TEST_ID}
+			>
+				<div>content</div>
+			</ResizableBox>,
+		);
+
+		const handle = screen.getByTestId(HANDLE_TEST_ID);
+		const box = handle.parentElement as HTMLElement;
+
+		fireEvent.doubleClick(handle);
+
+		expect(box.style.width).toBe('480px');
+		expect(onResize).not.toHaveBeenCalled();
+	});
+
+	it('renders a visible grip only when withHandle is set', () => {
+		const { rerender, container } = render(
+			<ResizableBox
+				handle="right"
+				defaultWidth={260}
+				handleTestId={HANDLE_TEST_ID}
+			>
+				<div>content</div>
+			</ResizableBox>,
+		);
+		expect(container.querySelector('.resizable-box__grip')).toBeNull();
+
+		rerender(
+			<ResizableBox
+				handle="right"
+				defaultWidth={260}
+				withHandle
+				handleTestId={HANDLE_TEST_ID}
+			>
+				<div>content</div>
+			</ResizableBox>,
+		);
+		expect(container.querySelector('.resizable-box__grip')).not.toBeNull();
+	});
+
+	it('clamps drag to maxWidth and reports the clamped size via onResize', () => {
+		const onResize = jest.fn();
+		render(
+			<ResizableBox
+				handle="right"
+				defaultWidth={260}
+				minWidth={240}
+				maxWidth={500}
+				onResize={onResize}
+				handleTestId={HANDLE_TEST_ID}
+			>
+				<div>content</div>
+			</ResizableBox>,
+		);
+
+		const handle = screen.getByTestId(HANDLE_TEST_ID);
+		const box = handle.parentElement as HTMLElement;
+
+		fireEvent.mouseDown(handle, { clientX: 0 });
+		fireEvent.mouseMove(document, { clientX: 1000 });
+		fireEvent.mouseUp(document);
+
+		expect(box.style.width).toBe('500px');
+		expect(onResize).toHaveBeenLastCalledWith(500);
+	});
+});

frontend/src/periscope/components/ResizableBox/__tests__/usePanelWidth.test.ts

@@ -0,0 +1,89 @@
+import { act, renderHook } from '@testing-library/react';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+import usePanelWidth from '../usePanelWidth';
+
+jest.mock('api/browser/localstorage/get');
+jest.mock('api/browser/localstorage/set');
+
+const mockedGet = getLocalStorageKey as jest.MockedFunction<
+	typeof getLocalStorageKey
+>;
+const mockedSet = setLocalStorageKey as jest.MockedFunction<
+	typeof setLocalStorageKey
+>;
+
+const ARGS = {
+	storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_LOGS,
+	defaultWidth: 260,
+	minWidth: 240,
+	maxWidth: 500,
+};
+
+describe('usePanelWidth', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		jest.useFakeTimers();
+	});
+
+	afterEach(() => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	});
+
+	it('returns defaultWidth when nothing is persisted', () => {
+		mockedGet.mockReturnValue(null);
+		const { result } = renderHook(() => usePanelWidth(ARGS));
+		expect(result.current.initialWidth).toBe(260);
+	});
+
+	it('returns the persisted width when present', () => {
+		mockedGet.mockReturnValue('340');
+		const { result } = renderHook(() => usePanelWidth(ARGS));
+		expect(result.current.initialWidth).toBe(340);
+	});
+
+	it('clamps an out-of-bounds persisted width on read', () => {
+		mockedGet.mockReturnValue('9999');
+		const { result } = renderHook(() => usePanelWidth(ARGS));
+		expect(result.current.initialWidth).toBe(500);
+	});
+
+	it('falls back to defaultWidth for an invalid persisted value', () => {
+		mockedGet.mockReturnValue('not-a-number');
+		const { result } = renderHook(() => usePanelWidth(ARGS));
+		expect(result.current.initialWidth).toBe(260);
+	});
+
+	it('persists a clamped width (debounced)', () => {
+		mockedGet.mockReturnValue(null);
+		const { result } = renderHook(() => usePanelWidth(ARGS));
+
+		act(() => {
+			result.current.persistWidth(320);
+			jest.advanceTimersByTime(200);
+		});
+
+		expect(mockedSet).toHaveBeenCalledWith(
+			LOCALSTORAGE.QUICK_FILTERS_WIDTH_LOGS,
+			'320',
+		);
+	});
+
+	it('clamps below-min widths before persisting', () => {
+		mockedGet.mockReturnValue(null);
+		const { result } = renderHook(() => usePanelWidth(ARGS));
+
+		act(() => {
+			result.current.persistWidth(10);
+			jest.advanceTimersByTime(200);
+		});
+
+		expect(mockedSet).toHaveBeenCalledWith(
+			LOCALSTORAGE.QUICK_FILTERS_WIDTH_LOGS,
+			'240',
+		);
+	});
+});

frontend/src/periscope/components/ResizableBox/usePanelWidth.ts

@@ -0,0 +1,68 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import debounce from 'lodash-es/debounce';
+import { useCallback, useMemo, useRef } from 'react';
+
+const PERSIST_DEBOUNCE_MS = 150;
+
+interface UsePanelWidthArgs {
+	/** Per-page localStorage key the width is persisted under. */
+	storageKey: LOCALSTORAGE;
+	/** Canonical default width, used when nothing is persisted. */
+	defaultWidth: number;
+	minWidth: number;
+	maxWidth: number;
+}
+
+interface UsePanelWidthReturn {
+	/** Width to start from: the persisted value (clamped) or the default. */
+	initialWidth: number;
+	/** Clamp and persist a width. Debounced to avoid a write per mousemove. */
+	persistWidth: (width: number) => void;
+}
+
+const clamp = (value: number, min: number, max: number): number =>
+	Math.min(max, Math.max(min, value));
+
+/**
+ * Per-page localStorage persistence for a resizable panel width. Mirrors the
+ * getLocalStorageKey/setLocalStorageKey idiom used for the trace span-details
+ * panel position. Pairs with ResizableBox: feed initialWidth into its
+ * initialWidth prop and persistWidth into its onResize.
+ */
+function usePanelWidth({
+	storageKey,
+	defaultWidth,
+	minWidth,
+	maxWidth,
+}: UsePanelWidthArgs): UsePanelWidthReturn {
+	// Read once on mount. Kept in a ref so a re-render doesn't re-read storage.
+	const initialWidthRef = useRef<number | null>(null);
+	if (initialWidthRef.current === null) {
+		const stored = getLocalStorageKey(storageKey);
+		const parsed = stored !== null && stored !== '' ? Number(stored) : NaN;
+		initialWidthRef.current = Number.isFinite(parsed)
+			? clamp(parsed, minWidth, maxWidth)
+			: defaultWidth;
+	}
+
+	const debouncedWrite = useMemo(
+		() =>
+			debounce((width: number): void => {
+				setLocalStorageKey(storageKey, String(width));
+			}, PERSIST_DEBOUNCE_MS),
+		[storageKey],
+	);
+
+	const persistWidth = useCallback(
+		(width: number): void => {
+			debouncedWrite(clamp(width, minWidth, maxWidth));
+		},
+		[debouncedWrite, minWidth, maxWidth],
+	);
+
+	return { initialWidth: initialWidthRef.current, persistWidth };
+}
+
+export default usePanelWidth;

pkg/apiserver/signozapiserver/role.go

@@ -47,7 +47,7 @@ func (provider *provider) addRoleRoutes(router *mux.Router) error {
 			Description:         "This endpoint lists all roles",
 			Request:             nil,
 			RequestContentType:  "",
-			Response:            make([]*authtypes.Role, 0),
+			Response:            make([]*authtypes.GettableRole, 0),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{},
@@ -73,7 +73,7 @@ func (provider *provider) addRoleRoutes(router *mux.Router) error {
 			Description:         "This endpoint gets a role",
 			Request:             nil,
 			RequestContentType:  "",
-			Response:            new(authtypes.RoleWithTransactionGroups),
+			Response:            new(authtypes.Role),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{},

pkg/authz/authz.go

@@ -30,17 +30,14 @@ type AuthZ interface {
 	// Write accepts the insertion tuples and the deletion tuples.
 	Write(context.Context, []*openfgav1.TupleKey, []*openfgav1.TupleKey) error
 
-	// Lists the selectors for objects assigned to subject (s) with relation (r) on resource (s)
-	ListObjects(context.Context, string, authtypes.Relation, coretypes.Type) ([]*coretypes.Object, error)
+	// ReadTuples reads tuples from the authorization server matching the given tuple key filter.
+	ReadTuples(context.Context, *openfgav1.ReadRequestTupleKey) ([]*openfgav1.TupleKey, error)
 
 	// Creates the role with its transaction groups.
-	Create(context.Context, valuer.UUID, *authtypes.RoleWithTransactionGroups) error
-
-	// Gets the role if it exists or creates one.
-	GetOrCreate(context.Context, valuer.UUID, *authtypes.Role) (*authtypes.Role, error)
+	Create(context.Context, valuer.UUID, *authtypes.Role) error
 
 	// Updates the role's metadata and reconciles its transaction groups.
-	Update(context.Context, valuer.UUID, *authtypes.RoleWithTransactionGroups) error
+	Update(context.Context, valuer.UUID, *authtypes.Role) error
 
 	// Deletes the role and tuples in authorization server.
 	Delete(context.Context, valuer.UUID, valuer.UUID) error
@@ -48,9 +45,6 @@ type AuthZ interface {
 	// Gets the role
 	Get(context.Context, valuer.UUID, valuer.UUID) (*authtypes.Role, error)
 
-	// Gets the role with transaction groups
-	GetWithTransactionGroups(context.Context, valuer.UUID, valuer.UUID) (*authtypes.RoleWithTransactionGroups, error)
-
 	// Gets the role by org_id and name
 	GetByOrgIDAndName(context.Context, valuer.UUID, string) (*authtypes.Role, error)
 
@@ -80,9 +74,6 @@ type AuthZ interface {
 
 	// Bootstrap managed roles transactions and user assignments
 	CreateManagedUserRoleTransactions(context.Context, valuer.UUID, valuer.UUID) error
-
-	// ReadTuples reads tuples from the authorization server matching the given tuple key filter.
-	ReadTuples(context.Context, *openfgav1.ReadRequestTupleKey) ([]*openfgav1.TupleKey, error)
 }
 
 // OnBeforeRoleDelete is a callback invoked before a role is deleted.

pkg/authz/openfgaauthz/provider.go

@@ -83,10 +83,6 @@ func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.
 	return provider.store.Get(ctx, orgID, id)
 }
 
-func (provider *provider) GetWithTransactionGroups(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.RoleWithTransactionGroups, error) {
-	return nil, errors.Newf(errors.TypeUnsupported, authtypes.ErrCodeRoleUnsupported, "not implemented")
-}
-
 func (provider *provider) GetByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*authtypes.Role, error) {
 	return provider.store.GetByOrgIDAndName(ctx, orgID, name)
 }
@@ -181,15 +177,11 @@ func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context,
 	return provider.Grant(ctx, orgID, []string{authtypes.SigNozAdminRoleName}, authtypes.MustNewSubject(coretypes.NewResourceUser(), userID.String(), orgID, nil))
 }
 
-func (setter *provider) Create(_ context.Context, _ valuer.UUID, _ *authtypes.RoleWithTransactionGroups) error {
+func (setter *provider) Create(_ context.Context, _ valuer.UUID, _ *authtypes.Role) error {
 	return errors.Newf(errors.TypeUnsupported, authtypes.ErrCodeRoleUnsupported, "not implemented")
 }
 
-func (provider *provider) GetOrCreate(_ context.Context, _ valuer.UUID, _ *authtypes.Role) (*authtypes.Role, error) {
-	return nil, errors.Newf(errors.TypeUnsupported, authtypes.ErrCodeRoleUnsupported, "not implemented")
-}
-
-func (provider *provider) Update(_ context.Context, _ valuer.UUID, _ *authtypes.RoleWithTransactionGroups) error {
+func (provider *provider) Update(_ context.Context, _ valuer.UUID, _ *authtypes.Role) error {
 	return errors.Newf(errors.TypeUnsupported, authtypes.ErrCodeRoleUnsupported, "not implemented")
 }
 

pkg/authz/signozauthzapi/handler.go

@@ -36,14 +36,14 @@ func (handler *handler) Create(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	roleWithTransactionGroups := authtypes.NewRoleWithTransactionGroups(req.Name, req.Description, authtypes.RoleTypeCustom, valuer.MustNewUUID(claims.OrgID), req.TransactionGroups)
-	err = handler.authz.Create(ctx, valuer.MustNewUUID(claims.OrgID), roleWithTransactionGroups)
+	role := authtypes.NewRole(req.Name, req.Description, authtypes.RoleTypeCustom, valuer.MustNewUUID(claims.OrgID), req.TransactionGroups)
+	err = handler.authz.Create(ctx, valuer.MustNewUUID(claims.OrgID), role)
 	if err != nil {
 		render.Error(rw, err)
 		return
 	}
 
-	render.Success(rw, http.StatusCreated, types.Identifiable{ID: roleWithTransactionGroups.ID})
+	render.Success(rw, http.StatusCreated, types.Identifiable{ID: role.ID})
 }
 
 func (handler *handler) Get(rw http.ResponseWriter, r *http.Request) {
@@ -65,13 +65,13 @@ func (handler *handler) Get(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	roleWithTransactionGroups, err := handler.authz.GetWithTransactionGroups(ctx, valuer.MustNewUUID(claims.OrgID), roleID)
+	role, err := handler.authz.Get(ctx, valuer.MustNewUUID(claims.OrgID), roleID)
 	if err != nil {
 		render.Error(rw, err)
 		return
 	}
 
-	render.Success(rw, http.StatusOK, roleWithTransactionGroups)
+	render.Success(rw, http.StatusOK, role)
 }
 
 func (handler *handler) List(rw http.ResponseWriter, r *http.Request) {
@@ -88,7 +88,7 @@ func (handler *handler) List(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	render.Success(rw, http.StatusOK, roles)
+	render.Success(rw, http.StatusOK, authtypes.NewGettableRolesFromRoles(roles))
 }
 
 func (handler *handler) Update(rw http.ResponseWriter, r *http.Request) {
@@ -117,14 +117,13 @@ func (handler *handler) Update(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	roleWithTransactionGroups := authtypes.MakeRoleWithTransactionGroups(role, nil)
-	err = roleWithTransactionGroups.Update(req.Description, req.TransactionGroups)
+	err = role.Update(req.Description, req.TransactionGroups)
 	if err != nil {
 		render.Error(rw, err)
 		return
 	}
 
-	err = handler.authz.Update(ctx, valuer.MustNewUUID(claims.OrgID), roleWithTransactionGroups)
+	err = handler.authz.Update(ctx, valuer.MustNewUUID(claims.OrgID), role)
 	if err != nil {
 		render.Error(rw, err)
 		return

pkg/signoz/provider.go

@@ -218,6 +218,7 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewMigrateSSORoleMappingNamesFactory(sqlstore),
 		sqlmigration.NewAddMetricReductionRulesFactory(sqlstore, sqlschema),
 		sqlmigration.NewRemoveOrganizationTuplesFactory(sqlstore),
+		sqlmigration.NewAddRoleTransactionGroupsFactory(sqlstore, sqlschema),
 	)
 }
 

pkg/sqlmigration/059_add_managed_roles.go

@@ -3,6 +3,7 @@ package sqlmigration
 import (
 	"context"
 	"database/sql"
+	"time"
 
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/sqlschema"
@@ -18,6 +19,30 @@ type addManagedRoles struct {
 	sqlschema sqlschema.SQLSchema
 }
 
+type role struct {
+	bun.BaseModel `bun:"table:role"`
+
+	ID          valuer.UUID `bun:"id,pk,type:text"`
+	CreatedAt   time.Time   `bun:"created_at"`
+	UpdatedAt   time.Time   `bun:"updated_at"`
+	Name        string      `bun:"name,type:string"`
+	Description string      `bun:"description,type:string"`
+	Type        string      `bun:"type,type:string"`
+	OrgID       valuer.UUID `bun:"org_id,type:string"`
+}
+
+func newManagedRole(name, description string, orgID valuer.UUID) *role {
+	return &role{
+		ID:          valuer.GenerateUUID(),
+		CreatedAt:   time.Now(),
+		UpdatedAt:   time.Now(),
+		Name:        name,
+		Description: description,
+		Type:        authtypes.RoleTypeManaged.StringValue(),
+		OrgID:       orgID,
+	}
+}
+
 func NewAddManagedRolesFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
 	return factory.NewProviderFactory(factory.MustNewName("add_managed_roles"), func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
 		return newAddManagedRoles(ctx, ps, c, sqlstore, sqlschema)
@@ -54,28 +79,19 @@ func (migration *addManagedRoles) Up(ctx context.Context, db *bun.DB) error {
 		return err
 	}
 
-	managedRoles := []*authtypes.Role{}
+	managedRoles := []*role{}
 	for _, orgIDStr := range orgIDs {
 		orgID, err := valuer.NewUUID(orgIDStr)
 		if err != nil {
 			return err
 		}
 
-		// signoz admin
-		signozAdminRole := authtypes.NewRole(authtypes.SigNozAdminRoleName, authtypes.SigNozAdminRoleDescription, authtypes.RoleTypeManaged, orgID)
-		managedRoles = append(managedRoles, signozAdminRole)
-
-		// signoz editor
-		signozEditorRole := authtypes.NewRole(authtypes.SigNozEditorRoleName, authtypes.SigNozEditorRoleDescription, authtypes.RoleTypeManaged, orgID)
-		managedRoles = append(managedRoles, signozEditorRole)
-
-		// signoz viewer
-		signozViewerRole := authtypes.NewRole(authtypes.SigNozViewerRoleName, authtypes.SigNozViewerRoleDescription, authtypes.RoleTypeManaged, orgID)
-		managedRoles = append(managedRoles, signozViewerRole)
-
-		// signoz anonymous
-		signozAnonymousRole := authtypes.NewRole(authtypes.SigNozAnonymousRoleName, authtypes.SigNozAnonymousRoleDescription, authtypes.RoleTypeManaged, orgID)
-		managedRoles = append(managedRoles, signozAnonymousRole)
+		managedRoles = append(managedRoles,
+			newManagedRole(authtypes.SigNozAdminRoleName, authtypes.SigNozAdminRoleDescription, orgID),
+			newManagedRole(authtypes.SigNozEditorRoleName, authtypes.SigNozEditorRoleDescription, orgID),
+			newManagedRole(authtypes.SigNozViewerRoleName, authtypes.SigNozViewerRoleDescription, orgID),
+			newManagedRole(authtypes.SigNozAnonymousRoleName, authtypes.SigNozAnonymousRoleDescription, orgID),
+		)
 	}
 
 	if len(managedRoles) > 0 {

pkg/sqlmigration/099_add_role_transaction_groups.go

@@ -0,0 +1,191 @@
+package sqlmigration
+
+import (
+	"context"
+	"database/sql"
+	"encoding/json"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	openfgav1 "github.com/openfga/api/proto/openfga/v1"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/dialect"
+	"github.com/uptrace/bun/migrate"
+)
+
+type addRoleTransactionGroups struct {
+	sqlstore  sqlstore.SQLStore
+	sqlschema sqlschema.SQLSchema
+}
+
+type roles struct {
+	bun.BaseModel `bun:"table:role"`
+
+	ID    string `bun:"id,pk"`
+	Name  string `bun:"name"`
+	OrgID string `bun:"org_id"`
+}
+
+func NewAddRoleTransactionGroupsFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(
+		factory.MustNewName("add_role_transaction_groups"),
+		func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
+			return &addRoleTransactionGroups{
+				sqlstore:  sqlstore,
+				sqlschema: sqlschema,
+			}, nil
+		},
+	)
+}
+
+func (migration *addRoleTransactionGroups) Register(migrations *migrate.Migrations) error {
+	return migrations.Register(migration.Up, migration.Down)
+}
+
+func (migration *addRoleTransactionGroups) Up(ctx context.Context, db *bun.DB) error {
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+
+	defer func() {
+		_ = tx.Rollback()
+	}()
+
+	table, uniqueConstraints, err := migration.sqlschema.GetTable(ctx, "role")
+	if err != nil {
+		return err
+	}
+
+	column := &sqlschema.Column{
+		Name:     sqlschema.ColumnName("transaction_groups"),
+		DataType: sqlschema.DataTypeText,
+		Nullable: true,
+	}
+
+	sqls := migration.sqlschema.Operator().AddColumn(table, uniqueConstraints, column, nil)
+	for _, sql := range sqls {
+		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
+			return err
+		}
+	}
+
+	var storeID string
+	err = tx.QueryRowContext(ctx, `SELECT id FROM store WHERE name = ? LIMIT 1`, "signoz").Scan(&storeID)
+	if err != nil {
+		return err
+	}
+
+	var orgIDs []string
+	err = tx.NewSelect().
+		Table("organizations").
+		Column("id").
+		Scan(ctx, &orgIDs)
+	if err != nil && err != sql.ErrNoRows {
+		return err
+	}
+
+	managedRoleGroups := make(map[string]string, len(coretypes.ManagedRoleToTransactions))
+	for roleName, transactions := range coretypes.ManagedRoleToTransactions {
+		data, err := json.Marshal(authtypes.NewTransactionGroupsFromTransactions(transactions))
+		if err != nil {
+			return err
+		}
+		managedRoleGroups[roleName] = string(data)
+	}
+
+	isPG := migration.sqlstore.BunDB().Dialect().Name() == dialect.PG
+	for _, orgID := range orgIDs {
+		customRoles := make([]*roles, 0)
+		err = tx.NewSelect().
+			Model(&customRoles).
+			Column("id", "name").
+			Where("org_id = ?", orgID).
+			Where("type = ?", authtypes.RoleTypeCustom.StringValue()).
+			Where("transaction_groups IS NULL").
+			Scan(ctx)
+		if err != nil {
+			return err
+		}
+
+		for _, role := range customRoles {
+			tuples, err := migration.readRoleTuples(ctx, tx, isPG, storeID, orgID, role.Name)
+			if err != nil {
+				return err
+			}
+
+			groups := authtypes.MustNewTransactionGroupsFromTuples(tuples)
+			data, err := json.Marshal(groups)
+			if err != nil {
+				return err
+			}
+
+			if _, err := tx.NewUpdate().
+				Model(new(roles)).
+				Set("transaction_groups = ?", string(data)).
+				Where("id = ?", role.ID).
+				Exec(ctx); err != nil {
+				return err
+			}
+		}
+
+		for roleName, data := range managedRoleGroups {
+			if _, err := tx.NewUpdate().
+				Model(new(roles)).
+				Set("transaction_groups = ?", data).
+				Where("org_id = ?", orgID).
+				Where("type = ?", authtypes.RoleTypeManaged.StringValue()).
+				Where("name = ?", roleName).
+				Exec(ctx); err != nil {
+				return err
+			}
+		}
+	}
+
+	return tx.Commit()
+}
+
+func (migration *addRoleTransactionGroups) readRoleTuples(ctx context.Context, tx bun.Tx, isPG bool, storeID, orgID, roleName string) ([]*openfgav1.TupleKey, error) {
+	roleSubject := "organization/" + orgID + "/role/" + roleName
+
+	var tupleRows *sql.Rows
+	var err error
+	if isPG {
+		tupleRows, err = tx.QueryContext(ctx, `
+			SELECT object_type, object_id, relation FROM tuple
+			WHERE store = ? AND _user = ?`,
+			storeID, "role:"+roleSubject+"#assignee",
+		)
+	} else {
+		tupleRows, err = tx.QueryContext(ctx, `
+			SELECT object_type, object_id, relation FROM tuple
+			WHERE store = ? AND user_object_type = ? AND user_object_id = ? AND user_relation = ?`,
+			storeID, "role", roleSubject, "assignee",
+		)
+	}
+	if err != nil {
+		return nil, err
+	}
+	defer tupleRows.Close()
+
+	tuples := make([]*openfgav1.TupleKey, 0)
+	for tupleRows.Next() {
+		var objectType, objectID, relation string
+		if err := tupleRows.Scan(&objectType, &objectID, &relation); err != nil {
+			return nil, err
+		}
+		tuples = append(tuples, &openfgav1.TupleKey{Object: objectType + ":" + objectID, Relation: relation})
+	}
+	if err := tupleRows.Err(); err != nil {
+		return nil, err
+	}
+
+	return tuples, nil
+}
+
+func (migration *addRoleTransactionGroups) Down(context.Context, *bun.DB) error {
+	return nil
+}

pkg/types/authtypes/role.go

@@ -66,15 +66,20 @@ type Role struct {
 
 	types.Identifiable
 	types.TimeAuditable
-	Name        string        `bun:"name,type:string" json:"name" required:"true"`
-	Description string        `bun:"description,type:string"  json:"description" required:"true"`
-	Type        valuer.String `bun:"type,type:string" json:"type" required:"true"`
-	OrgID       valuer.UUID   `bun:"org_id,type:string" json:"orgId" required:"true"`
+	Name              string            `bun:"name,type:string" json:"name" required:"true"`
+	Description       string            `bun:"description,type:string"  json:"description" required:"true"`
+	Type              valuer.String     `bun:"type,type:string" json:"type" required:"true"`
+	OrgID             valuer.UUID       `bun:"org_id,type:string" json:"orgId" required:"true"`
+	TransactionGroups TransactionGroups `bun:"transaction_groups,nullzero,type:text" json:"transactionGroups" required:"true" nullable:"false"`
 }
 
-type RoleWithTransactionGroups struct {
-	*Role
-	TransactionGroups TransactionGroups `json:"transactionGroups" required:"true" nullable:"false"`
+type GettableRole struct {
+	types.Identifiable
+	types.TimeAuditable
+	Name        string        `json:"name" required:"true"`
+	Description string        `json:"description" required:"true"`
+	Type        valuer.String `json:"type" required:"true"`
+	OrgID       valuer.UUID   `json:"orgId" required:"true"`
 }
 
 type PostableRole struct {
@@ -88,7 +93,7 @@ type UpdatableRole struct {
 	TransactionGroups TransactionGroups `json:"transactionGroups" required:"true" nullable:"false"`
 }
 
-func NewRole(name, description string, roleType valuer.String, orgID valuer.UUID) *Role {
+func NewRole(name, description string, roleType valuer.String, orgID valuer.UUID, transactionGroups TransactionGroups) *Role {
 	return &Role{
 		Identifiable: types.Identifiable{
 			ID: valuer.GenerateUUID(),
@@ -97,37 +102,37 @@ func NewRole(name, description string, roleType valuer.String, orgID valuer.UUID
 			CreatedAt: time.Now(),
 			UpdatedAt: time.Now(),
 		},
-		Name:        name,
-		Description: description,
-		Type:        roleType,
-		OrgID:       orgID,
-	}
-}
-
-func NewRoleWithTransactionGroups(name, description string, roleType valuer.String, orgID valuer.UUID, transactionGroups TransactionGroups) *RoleWithTransactionGroups {
-	role := NewRole(name, description, roleType, orgID)
-
-	return &RoleWithTransactionGroups{
-		Role:              role,
+		Name:              name,
+		Description:       description,
+		Type:              roleType,
+		OrgID:             orgID,
 		TransactionGroups: transactionGroups,
 	}
 }
 
-func MakeRoleWithTransactionGroups(role *Role, transactionGroups TransactionGroups) *RoleWithTransactionGroups {
-	return &RoleWithTransactionGroups{
-		Role:              role,
-		TransactionGroups: transactionGroups,
+func NewGettableRolesFromRoles(roles []*Role) []*GettableRole {
+	gettableRoles := make([]*GettableRole, len(roles))
+	for index, role := range roles {
+		gettableRoles[index] = &GettableRole{
+			Identifiable:  role.Identifiable,
+			TimeAuditable: role.TimeAuditable,
+			Name:          role.Name,
+			Description:   role.Description,
+			Type:          role.Type,
+			OrgID:         role.OrgID,
+		}
 	}
+
+	return gettableRoles
 }
 
 func NewManagedRoles(orgID valuer.UUID) []*Role {
 	return []*Role{
-		NewRole(SigNozAdminRoleName, SigNozAdminRoleDescription, RoleTypeManaged, orgID),
-		NewRole(SigNozEditorRoleName, SigNozEditorRoleDescription, RoleTypeManaged, orgID),
-		NewRole(SigNozViewerRoleName, SigNozViewerRoleDescription, RoleTypeManaged, orgID),
-		NewRole(SigNozAnonymousRoleName, SigNozAnonymousRoleDescription, RoleTypeManaged, orgID),
+		NewRole(SigNozAdminRoleName, SigNozAdminRoleDescription, RoleTypeManaged, orgID, NewTransactionGroupsFromTransactions(coretypes.ManagedRoleToTransactions[SigNozAdminRoleName])),
+		NewRole(SigNozEditorRoleName, SigNozEditorRoleDescription, RoleTypeManaged, orgID, NewTransactionGroupsFromTransactions(coretypes.ManagedRoleToTransactions[SigNozEditorRoleName])),
+		NewRole(SigNozViewerRoleName, SigNozViewerRoleDescription, RoleTypeManaged, orgID, NewTransactionGroupsFromTransactions(coretypes.ManagedRoleToTransactions[SigNozViewerRoleName])),
+		NewRole(SigNozAnonymousRoleName, SigNozAnonymousRoleDescription, RoleTypeManaged, orgID, NewTransactionGroupsFromTransactions(coretypes.ManagedRoleToTransactions[SigNozAnonymousRoleName])),
 	}
-
 }
 
 func NewStatsFromRoles(roles []*Role) map[string]any {
@@ -144,7 +149,7 @@ func NewStatsFromRoles(roles []*Role) map[string]any {
 	return stats
 }
 
-func (role *RoleWithTransactionGroups) Update(description string, transactionGroups TransactionGroups) error {
+func (role *Role) Update(description string, transactionGroups TransactionGroups) error {
 	err := role.ErrIfManaged()
 	if err != nil {
 		return err

pkg/types/authtypes/transaction.go

@@ -1,6 +1,7 @@
 package authtypes
 
 import (
+	"database/sql/driver"
 	"encoding/json"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -70,6 +71,28 @@ func NewTransactionGroups(data []byte) (TransactionGroups, error) {
 	return groups, nil
 }
 
+func NewTransactionGroupsFromTransactions(transactions []coretypes.Transaction) TransactionGroups {
+	objectsByVerb := make(map[string][]*coretypes.Object)
+	for _, transaction := range transactions {
+		object := transaction.Object
+		objectsByVerb[transaction.Verb.StringValue()] = append(objectsByVerb[transaction.Verb.StringValue()], &object)
+	}
+
+	groups := make(TransactionGroups, 0)
+	for _, verb := range coretypes.Verbs {
+		objects := objectsByVerb[verb.StringValue()]
+		if len(objects) == 0 {
+			continue
+		}
+
+		for _, objectGroup := range coretypes.NewObjectGroupsFromObjects(objects) {
+			groups = append(groups, &TransactionGroup{Relation: Relation{Verb: verb}, ObjectGroup: *objectGroup})
+		}
+	}
+
+	return groups
+}
+
 func NewGettableTransaction(results []*TransactionWithAuthorization) []*GettableTransaction {
 	gettableTransactions := make([]*GettableTransaction, len(results))
 	for i, result := range results {
@@ -87,6 +110,40 @@ func (groups TransactionGroups) Diff(desired TransactionGroups) (additions, dele
 	return desired.subtract(groups), groups.subtract(desired)
 }
 
+func (groups TransactionGroups) Value() (driver.Value, error) {
+	data, err := json.Marshal(groups)
+	if err != nil {
+		return nil, err
+	}
+
+	return string(data), nil
+}
+
+func (groups *TransactionGroups) Scan(value any) error {
+	if value == nil {
+		*groups = make(TransactionGroups, 0)
+		return nil
+	}
+
+	var data []byte
+	switch typed := value.(type) {
+	case string:
+		data = []byte(typed)
+	case []byte:
+		data = typed
+	default:
+		return errors.Newf(errors.TypeInternal, errors.CodeInternal, "unsupported type %T for transaction groups", value)
+	}
+
+	parsed, err := NewTransactionGroups(data)
+	if err != nil {
+		return errors.Wrap(err, errors.TypeInternal, errors.CodeInternal, "failed to scan transactionGroups")
+	}
+
+	*groups = parsed
+	return nil
+}
+
 func (transaction *Transaction) UnmarshalJSON(data []byte) error {
 	var shadow = struct {
 		Relation Relation

pkg/types/authtypes/tuple.go

@@ -68,7 +68,7 @@ func NewTuplesFromTransactionGroups(name string, orgID valuer.UUID, transactionG
 	return tuples, nil
 }
 
-func MustNewTransactionGroupsFromTuples(tuples []*openfgav1.TupleKey) []*TransactionGroup {
+func MustNewTransactionGroupsFromTuples(tuples []*openfgav1.TupleKey) TransactionGroups {
 	objectsByRelation := make(map[string][]*coretypes.Object)
 
 	for _, tuple := range tuples {
@@ -81,7 +81,7 @@ func MustNewTransactionGroupsFromTuples(tuples []*openfgav1.TupleKey) []*Transac
 		objectsByRelation[verb.StringValue()] = append(objectsByRelation[verb.StringValue()], object)
 	}
 
-	transactionGroups := make([]*TransactionGroup, 0)
+	transactionGroups := make(TransactionGroups, 0)
 	for _, verb := range coretypes.Verbs {
 		objects := objectsByRelation[verb.StringValue()]
 		if len(objects) == 0 {