chore: generate api specs

conf/example.yaml

@@ -155,8 +155,8 @@ querier:
   cache_ttl: 168h
   # The interval for recent data that should not be cached.
   flux_interval: 5m
-  # The maximum number of queries a single query range request runs at once.
-  max_concurrent_queries: 8
+  # The maximum number of concurrent queries for missing ranges.
+  max_concurrent_queries: 4
   # When filtering logs by trace_id, clamp the query window to the trace time
   # range with padding to include slightly delayed log exports. Logs only; set
   # to 0 to disable.

docs/api/openapi.yml

@@ -3148,6 +3148,8 @@ components:
           type: string
         image:
           type: string
+        legacy:
+          type: boolean
         locked:
           type: boolean
         name:
@@ -3180,6 +3182,7 @@ components:
       - name
       - tags
       - spec
+      - legacy
       - pinned
       type: object
     DashboardtypesListedDashboardV2:
@@ -3193,6 +3196,8 @@ components:
           type: string
         image:
           type: string
+        legacy:
+          type: boolean
         locked:
           type: boolean
         name:
@@ -3223,6 +3228,7 @@ components:
       - name
       - tags
       - spec
+      - legacy
       type: object
     DashboardtypesListedDashboardV2Spec:
       properties:

frontend/__mocks__/lib/env.ts

@@ -1,3 +0,0 @@
-export const IS_DEV = false;
-export const IS_PROD = true;
-export const MODE = 'test';

frontend/jest.config.ts

@@ -29,7 +29,6 @@ const config: Config.InitialOptions = {
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',
-		'^lib/env$': '<rootDir>/__mocks__/lib/env.ts',
 		'^test-mocks/(.*)$': '<rootDir>/__mocks__/$1',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',

frontend/package.json

@@ -79,7 +79,6 @@
     "event-source-polyfill": "1.0.31",
     "eventemitter3": "5.0.1",
     "history": "4.10.1",
-    "html-to-image": "1.11.13",
     "http-status-codes": "2.3.0",
     "i18next": "^21.6.12",
     "i18next-browser-languagedetector": "^6.1.3",

frontend/pnpm-lock.yaml

@@ -164,9 +164,6 @@ importers:
       history:
         specifier: 4.10.1
         version: 4.10.1
-      html-to-image:
-        specifier: 1.11.13
-        version: 1.11.13
       http-status-codes:
         specifier: 2.3.0
         version: 2.3.0
@@ -5454,9 +5451,6 @@ packages:
     resolution: {integrity: sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==}
     engines: {node: '>=20.10'}
 
-  html-to-image@1.11.13:
-    resolution: {integrity: sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==}
-
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
@@ -14501,8 +14495,6 @@ snapshots:
 
   html-tags@5.1.0: {}
 
-  html-to-image@1.11.13: {}
-
   html-void-elements@3.0.0: {}
 
   http-proxy-agent@5.0.0:

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

@@ -62,6 +62,6 @@
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
-	"LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview",
-	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration"
-}
+	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
+	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
+}

frontend/public/locales/en/titles.json

@@ -87,6 +87,6 @@
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
-	"LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview",
-	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration"
-}
+	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
+	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
+}

frontend/src/AppRoutes/pageComponents.ts

@@ -329,3 +329,10 @@ export const LLMObservabilityPage = Loadable(
 			/* webpackChunkName: "LLM Observability Page" */ 'pages/LLMObservability'
 		),
 );
+
+export const LLMObservabilityModelPricingPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "LLM Observability Model Pricing Page" */ 'pages/LLMObservabilityModelPricing'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -24,6 +24,7 @@ import {
 	LicensePage,
 	ListAllALertsPage,
 	LLMObservabilityPage,
+	LLMObservabilityModelPricingPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -514,17 +515,17 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
+		path: ROUTES.LLM_OBSERVABILITY_BASE,
 		exact: true,
 		component: LLMObservabilityPage,
-		key: 'LLM_OBSERVABILITY_OVERVIEW',
+		key: 'LLM_OBSERVABILITY_BASE',
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
+		path: ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
 		exact: true,
-		component: LLMObservabilityPage,
-		key: 'LLM_OBSERVABILITY_CONFIGURATION',
+		component: LLMObservabilityModelPricingPage,
+		key: 'LLM_OBSERVABILITY_MODEL_PRICING',
 		isPrivate: true,
 	},
 ];

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

@@ -5005,6 +5005,10 @@ export interface DashboardtypesListedDashboardForUserV2DTO {
 	 * @type string
 	 */
 	image?: string;
+	/**
+	 * @type boolean
+	 */
+	legacy: boolean;
 	/**
 	 * @type boolean
 	 */
@@ -5080,6 +5084,10 @@ export interface DashboardtypesListedDashboardV2DTO {
 	 * @type string
 	 */
 	image?: string;
+	/**
+	 * @type boolean
+	 */
+	legacy: boolean;
 	/**
 	 * @type boolean
 	 */

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx

@@ -2,7 +2,6 @@ import { Button } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 
 interface CheckboxValueRowProps {
 	value: string;
@@ -47,11 +46,9 @@ function CheckboxValueRow({
 				{customRendererForValue ? (
 					customRendererForValue(value)
 				) : (
-					<TooltipSimple title={String(value)} side="top" align="start">
-						<Typography.Text className="value-string" truncate={1}>
-							{String(value)}
-						</Typography.Text>
-					</TooltipSimple>
+					<Typography.Text className="value-string" truncate={1}>
+						{String(value)}
+					</Typography.Text>
 				)}
 				<Button type="text" className="only-btn">
 					{onlyButtonLabel}

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -22,7 +22,6 @@ import {
 } from 'container/AIAssistant/store/useAIAssistantStore';
 import { useThemeMode } from 'hooks/useDarkMode';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { IS_DEV } from 'lib/env';
 import history from 'lib/history';
 import { ROLES as UserRole } from 'types/roles';
 
@@ -31,33 +30,6 @@ import { useCmdK } from '../../providers/cmdKProvider';
 
 import './cmdKPalette.scss';
 
-const AuthZDevModal = IS_DEV
-	? React.lazy(() =>
-			import('lib/authz/devtools/AuthZDevModal/AuthZDevModal').then((m) => ({
-				default: m.AuthZDevModal,
-			})),
-		)
-	: null;
-
-const AuthZDevFloatingIndicator = IS_DEV
-	? React.lazy(() =>
-			import('lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator').then(
-				(m) => ({
-					default: m.AuthZDevFloatingIndicator,
-				}),
-			),
-		)
-	: null;
-
-const openAuthZDevModal = IS_DEV
-	? (): void => {
-			void import('lib/authz/devtools/useAuthZDevStore').then((m) => {
-				m.openAuthZDevModal();
-				return m;
-			});
-		}
-	: undefined;
-
 type CmdAction = {
 	id: string;
 	name: string;
@@ -138,7 +110,6 @@ export function CmdKPalette({
 		aiAssistant: isAIAssistantEnabled
 			? { open: handleOpenAIAssistant }
 			: undefined,
-		authzDevTools: openAuthZDevModal ? { open: openAuthZDevModal } : undefined,
 	});
 
 	// RBAC filter: show action if no roles set OR current user role is included
@@ -175,57 +146,37 @@ export function CmdKPalette({
 	};
 
 	return (
-		<>
-			<CommandDialog
-				open={open}
-				onOpenChange={setOpen}
-				position="top"
-				offset={110}
-			>
-				<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
-				<CommandList className="cmdk-list-scroll">
-					<CommandEmpty>No results</CommandEmpty>
-					{grouped.map(([section, items]) => (
-						<CommandGroup
-							key={section}
-							heading={section}
-							className="cmdk-section-heading"
-						>
-							{items.map((it) => (
-								<CommandItem
-									key={it.id}
-									onSelect={(): void => handleInvoke(it)}
-									value={it.name}
-									className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
+		<CommandDialog open={open} onOpenChange={setOpen} position="top" offset={110}>
+			<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
+			<CommandList className="cmdk-list-scroll">
+				<CommandEmpty>No results</CommandEmpty>
+				{grouped.map(([section, items]) => (
+					<CommandGroup
+						key={section}
+						heading={section}
+						className="cmdk-section-heading"
+					>
+						{items.map((it) => (
+							<CommandItem
+								key={it.id}
+								onSelect={(): void => handleInvoke(it)}
+								value={it.name}
+								className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
+							>
+								<span
+									className={cx('cmd-item-icon', it.id === 'ai-assistant' && 'noz-icon')}
 								>
-									<span
-										className={cx(
-											'cmd-item-icon',
-											it.id === 'ai-assistant' && 'noz-icon',
-										)}
-									>
-										{it.icon}
-									</span>
-									{it.name}
-									{it.shortcut && it.shortcut.length > 0 && (
-										<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
-									)}
-								</CommandItem>
-							))}
-						</CommandGroup>
-					))}
-				</CommandList>
-			</CommandDialog>
-			{IS_DEV && AuthZDevModal && (
-				<React.Suspense fallback={null}>
-					<AuthZDevModal />
-				</React.Suspense>
-			)}
-			{IS_DEV && AuthZDevFloatingIndicator && (
-				<React.Suspense fallback={null}>
-					<AuthZDevFloatingIndicator />
-				</React.Suspense>
-			)}
-		</>
+									{it.icon}
+								</span>
+								{it.name}
+								{it.shortcut && it.shortcut.length > 0 && (
+									<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
+								)}
+							</CommandItem>
+						))}
+					</CommandGroup>
+				))}
+			</CommandList>
+		</CommandDialog>
 	);
 }

frontend/src/constants/localStorage.ts

@@ -31,12 +31,6 @@ 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/constants/routes.ts

@@ -90,8 +90,7 @@ const ROUTES = {
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
 	LLM_OBSERVABILITY_BASE: '/llm-observability',
-	LLM_OBSERVABILITY_OVERVIEW: '/llm-observability/overview',
-	LLM_OBSERVABILITY_CONFIGURATION: '/llm-observability/configuration',
+	LLM_OBSERVABILITY_MODEL_PRICING: '/llm-observability/settings/model-pricing',
 } as const;
 
 export default ROUTES;

frontend/src/constants/shortcutActions.tsx

@@ -43,17 +43,10 @@ type ActionDeps = {
 	aiAssistant?: {
 		open: () => void;
 	};
-	/**
-	 * Provided only in development mode. Opens the AuthZ DevTools modal
-	 * for testing permission overrides.
-	 */
-	authzDevTools?: {
-		open: () => void;
-	};
 };
 
 export function createShortcutActions(deps: ActionDeps): CmdAction[] {
-	const { navigate, handleThemeChange, aiAssistant, authzDevTools } = deps;
+	const { navigate, handleThemeChange, aiAssistant } = deps;
 
 	const actions: CmdAction[] = [
 		{
@@ -309,17 +302,5 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 		});
 	}
 
-	if (authzDevTools) {
-		actions.push({
-			id: 'authz-devtools',
-			name: 'AuthZ DevTools',
-			keywords: 'authz permissions rbac debug devtools override testing',
-			section: 'Dev',
-			icon: <Settings size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
-			perform: authzDevTools.open,
-		});
-	}
-
 	return actions;
 }

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

@@ -163,23 +163,12 @@
 	}
 
 	&.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 {
-			.resizable-box__content {
-				display: flex;
-				flex-direction: column;
-			}
-
-			.quick-filters-container {
-				flex: 1;
-				min-height: 0;
-			}
+			width: 260px;
 		}
 
 		.api-module-right-section {
-			flex: 1;
-			min-width: 0;
+			width: calc(100% - 260px);
 		}
 	}
 }

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

@@ -4,49 +4,21 @@ 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')}>
-				<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"
-				>
+				<section className="api-quick-filter-left-section">
 					<QuickFilters
 						className="qf-api-monitoring"
 						source={QuickFiltersSource.API_MONITORING}
@@ -55,7 +27,7 @@ function Explorer(): JSX.Element {
 						showQueryName={false}
 						handleFilterVisibilityChange={(): void => {}}
 					/>
-				</ResizableBox>
+				</section>
 				<DomainList />
 			</div>
 		</Sentry.ErrorBoundary>

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -149,18 +149,6 @@
 		line-height: 22px; /* 157.143% */
 		letter-spacing: -0.07px;
 		padding: 20px 16px 0px 16px;
-		/* Preserve author-entered line breaks in the description. */
-		white-space: pre-wrap;
-		overflow-wrap: anywhere;
-
-		a {
-			color: var(--accent-primary);
-			text-decoration: underline;
-
-			&:hover {
-				text-decoration: none;
-			}
-		}
 	}
 
 	.dashboard-variables {

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -43,7 +43,6 @@ import { sortLayout } from 'providers/Dashboard/util';
 import { DashboardData } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
 import { ROLES, USER_ROLES } from 'types/roles';
-import { linkifyText } from 'utils/linkifyText';
 import { ComponentTypes } from 'utils/permission';
 import { v4 as uuid } from 'uuid';
 
@@ -516,9 +515,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 				</div>
 			)}
 			{!isEmpty(description) && (
-				<section className="dashboard-description-section">
-					{linkifyText(description ?? '')}
-				</section>
+				<section className="dashboard-description-section">{description}</section>
 			)}
 
 			{!isEmpty(dashboardVariables) && (

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -6,7 +6,6 @@ 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';
@@ -17,8 +16,6 @@ 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';
 
@@ -43,21 +40,8 @@ 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();
 
@@ -155,18 +139,7 @@ function Hosts(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<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.quickFiltersContainer}>
 							<div className={styles.quickFiltersContainerHeader}>
 								<Typography.Text>Filters</Typography.Text>
 								<Tooltip title="Collapse Filters">
@@ -183,7 +156,7 @@ function Hosts(): JSX.Element {
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 								onFilterChange={handleQuickFiltersChange}
 							/>
-						</ResizableBox>
+						</div>
 					)}
 					<div
 						className={`${styles.listContainer}${

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

@@ -44,20 +44,26 @@
 }
 
 .quickFiltersContainer {
-	// 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;
+	width: 280px;
+	min-width: 280px;
 	border-right: 1px solid var(--l1-border);
+	overflow-y: auto;
 
-	:global(.resizable-box__content) {
-		display: flex;
-		flex-direction: column;
+	&::-webkit-scrollbar {
+		width: 0.1rem;
+		height: 0.1rem;
 	}
 
-	:global(.quick-filters-container) {
-		flex: 1;
-		min-height: 0;
+	&::-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(.ant-collapse-header) {
@@ -136,9 +142,7 @@
 }
 
 .listContainerFiltersVisible {
-	// 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%;
+	max-width: calc(100% - 280px);
 }
 
 .quickFiltersToggleContainer {

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

@@ -44,15 +44,26 @@
 }
 
 .quickFiltersContainer {
-	// 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;
+	width: 280px;
+	min-width: 280px;
 	border-right: 1px solid var(--l1-border);
+	overflow-y: auto;
 
-	:global(.resizable-box__content) {
-		display: flex;
-		flex-direction: column;
+	&::-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(.quick-filters) {
@@ -117,9 +128,7 @@
 }
 
 .listContainerFiltersVisible {
-	// 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%;
+	max-width: calc(100% - 280px);
 }
 
 .categorySelectorSection {
@@ -210,16 +219,8 @@
 
 .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,7 +6,6 @@ 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 {
@@ -23,8 +22,6 @@ 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';
@@ -59,23 +56,9 @@ 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();
@@ -229,18 +212,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<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.quickFiltersContainer}>
 							<div className={styles.categorySelectorSection}>
 								<div className={styles.sectionHeader} data-type="resource">
 									<Typography.Text className={styles.sectionLabel}>
@@ -293,7 +265,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 									/>
 								)}
 							</div>
-						</ResizableBox>
+						</div>
 					)}
 
 					<div

frontend/src/container/LLMObservability/LLMObservability.module.scss

@@ -1,7 +1,27 @@
 .llmObservability {
 	display: flex;
 	flex-direction: column;
-	height: 100%;
-	margin-top: var(--spacing-2);
-	margin-left: var(--spacing-2);
+	gap: var(--spacing-8);
+	padding: var(--spacing-12) var(--spacing-16);
+}
+
+.pageHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-8);
+}
+
+.pageHeaderTitle {
+	.title {
+		margin: 0;
+		font-size: var(--font-size-xl);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	.subtitle {
+		margin: var(--spacing-2) 0 0;
+		color: var(--text-vanilla-400);
+		font-size: var(--periscope-font-size-base);
+	}
 }

frontend/src/container/LLMObservability/LLMObservability.tsx

@@ -1,22 +1,16 @@
-import { Tabs } from '@signozhq/ui/tabs';
-
-import { useLLMObservabilityTabs } from './hooks/useLLMObservabilityTabs';
 import styles from './LLMObservability.module.scss';
 
-// Shell for the LLM Observability page: renders the top-level tab bar
-// (Overview / Configuration) using the SigNoz design-system Tabs, with
-// route-driven active state from useLLMObservabilityTabs.
 function LLMObservability(): JSX.Element {
-	const { items, activeTab, onTabChange } = useLLMObservabilityTabs();
-
 	return (
 		<div className={styles.llmObservability} data-testid="llm-observability-page">
-			<Tabs
-				items={items}
-				value={activeTab}
-				onChange={onTabChange}
-				testId="llm-observability-tabs"
-			/>
+			<header className={styles.pageHeader}>
+				<div className={styles.pageHeaderTitle}>
+					<h1 className={styles.title}>LLM Observability</h1>
+					<p className={styles.subtitle}>
+						Monitor and analyze your LLM usage, costs, and performance
+					</p>
+				</div>
+			</header>
 		</div>
 	);
 }

frontend/src/container/LLMObservability/Overview/Overview.module.scss

@@ -1,27 +0,0 @@
-.overview {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--spacing-12) var(--spacing-16);
-}
-
-.pageHeader {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	gap: var(--spacing-8);
-}
-
-.pageHeaderTitle {
-	.title {
-		margin: 0;
-		font-size: var(--font-size-xl);
-		font-weight: var(--font-weight-semibold);
-	}
-
-	.subtitle {
-		margin: var(--spacing-2) 0 0;
-		color: var(--text-vanilla-400);
-		font-size: var(--periscope-font-size-base);
-	}
-}

frontend/src/container/LLMObservability/Overview/Overview.tsx

@@ -1,20 +0,0 @@
-import styles from './Overview.module.scss';
-
-// Overview tab content for LLM Observability. Currently the feature's landing
-// surface; usage/cost/performance widgets land in later PRs.
-function Overview(): JSX.Element {
-	return (
-		<div className={styles.overview} data-testid="llm-observability-overview">
-			<header className={styles.pageHeader}>
-				<div className={styles.pageHeaderTitle}>
-					<h1 className={styles.title}>LLM Observability</h1>
-					<p className={styles.subtitle}>
-						Monitor and analyze your LLM usage, costs, and performance
-					</p>
-				</div>
-			</header>
-		</div>
-	);
-}
-
-export default Overview;

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -2,4 +2,29 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
+	padding: var(--spacing-12) var(--spacing-16);
+}
+
+.pageHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-8);
+}
+
+.pageHeaderTitle {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	.title {
+		margin: 0;
+		font-size: var(--font-size-xl);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	.subtitle {
+		margin: var(--spacing-2) 0 0;
+		color: var(--text-vanilla-400);
+		font-size: var(--periscope-font-size-base);
+	}
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.tsx

@@ -1,4 +1,5 @@
 import { Tabs } from '@signozhq/ui/tabs';
+import { Typography } from '@signozhq/ui/typography';
 
 import ModelCostTabPanel from './ModelCostTabPanel';
 import styles from './LLMObservabilityModelPricing.module.scss';
@@ -9,9 +10,20 @@ function LLMObservabilityModelPricing(): JSX.Element {
 			className={styles.llmObservabilityModelPricing}
 			data-testid="llm-observability-model-pricing-page"
 		>
+			<header className={styles.pageHeader}>
+				<div className={styles.pageHeaderTitle}>
+					<Typography.Text as="h1" size="large" weight="semibold">
+						Configuration
+					</Typography.Text>
+					<Typography.Text color="muted">
+						Model pricing and cost estimation settings
+					</Typography.Text>
+				</div>
+			</header>
+
 			<Tabs
 				// Model costs is the only enabled tab for now, so default to it. When
-				// the unpriced-models tab lands in a later PR.
+				// the unpriced-models tab lands, this can become a URL-backed param.
 				defaultValue="model-costs"
 				items={[
 					{

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
 import { Plus, Search, X } from '@signozhq/icons';
 import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
 import { type ListLLMPricingRulesParams } from 'api/generated/services/sigNoz.schemas';
@@ -160,6 +161,12 @@ function ModelCostTabPanel(): JSX.Element {
 				onDelete={deletion.requestDelete}
 			/>
 
+			<footer>
+				<Typography.Text color="muted" size="small">
+					All prices per 1M tokens (USD)
+				</Typography.Text>
+			</footer>
+
 			{drawer.isOpen && (
 				<ModelCostDrawer
 					isOpen={drawer.isOpen}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/__tests__/ModelCostTabPanel.test.tsx

@@ -1,326 +0,0 @@
-import { LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO } from 'api/generated/services/sigNoz.schemas';
-import {
-	TOAST_MODEL_COST_DELETED,
-	TOAST_MODEL_COST_UPDATED,
-} from 'container/LLMObservability/Settings/ModelPricing/constants';
-import {
-	LLM_PRICING_ENDPOINT,
-	LLM_PRICING_RULE_ENDPOINT,
-	makeListResponse,
-	mockRules,
-} from 'container/LLMObservability/Settings/ModelPricing/__tests__/fixtures';
-import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-
-import ModelCostTabPanel from '../ModelCostTabPanel';
-
-const toastSuccess = jest.fn();
-const toastError = jest.fn();
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: {
-		success: (...args: unknown[]): void => toastSuccess(...args),
-		error: (...args: unknown[]): void => toastError(...args),
-	},
-}));
-
-function setupList(items = mockRules, total = items.length): void {
-	server.use(
-		rest.get(LLM_PRICING_ENDPOINT, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(makeListResponse(items, total))),
-		),
-	);
-}
-
-function resetUrl(): void {
-	window.history.pushState(null, '', '/');
-}
-
-async function openRowMenu(
-	user: ReturnType<typeof userEvent.setup>,
-	ruleId: string,
-): Promise<void> {
-	const row = screen.getByTestId(`model-cell-name-${ruleId}`).closest('tr');
-	await user.click(within(row as HTMLElement).getByRole('button'));
-}
-
-describe('ModelCostTabPanel (integration)', () => {
-	beforeEach(() => {
-		resetUrl();
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders pricing rules returned by the list API', async () => {
-		setupList();
-		render(<ModelCostTabPanel />);
-
-		const openaiCell = await screen.findByTestId('model-cell-name-rule-openai');
-		expect(openaiCell).toHaveTextContent('gpt-4o');
-		expect(
-			screen.getByTestId('model-cell-name-rule-anthropic'),
-		).toHaveTextContent('claude-3-5-sonnet');
-		// Canonical id under the model name + provider column.
-		expect(screen.getByText('openai:gpt-4o')).toBeInTheDocument();
-		expect(screen.getAllByText('OpenAI').length).toBeGreaterThan(0);
-		// Source badges reflect the override flag.
-		expect(screen.getByTestId('source-badge-rule-openai')).toHaveTextContent(
-			'User override',
-		);
-		expect(screen.getByTestId('source-badge-rule-anthropic')).toHaveTextContent(
-			'Auto',
-		);
-	});
-
-	it('shows the empty state when there are no rules', async () => {
-		setupList([], 0);
-		render(<ModelCostTabPanel />);
-
-		const empty = await screen.findByTestId('model-costs-empty');
-		expect(empty).toHaveTextContent('No model costs yet.');
-	});
-
-	it('shows an error message when the list request fails', async () => {
-		server.use(
-			rest.get(LLM_PRICING_ENDPOINT, (_req, res, ctx) => res(ctx.status(500))),
-		);
-		render(<ModelCostTabPanel />);
-
-		const alert = await screen.findByRole('alert');
-		expect(alert).toHaveTextContent(
-			'Failed to load pricing rules. Please try again.',
-		);
-	});
-
-	it('sends the debounced search term as the q param', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		let lastParams: URLSearchParams | null = null;
-		server.use(
-			rest.get(LLM_PRICING_ENDPOINT, (req, res, ctx) => {
-				lastParams = req.url.searchParams;
-				return res(ctx.status(200), ctx.json(makeListResponse(mockRules)));
-			}),
-		);
-		render(<ModelCostTabPanel />);
-
-		await screen.findByTestId('model-cell-name-rule-openai');
-		await user.type(
-			screen.getByPlaceholderText('Search by model or provider'),
-			'claude',
-		);
-
-		await waitFor(() => expect(lastParams?.get('q')).toBe('claude'));
-	});
-
-	it('clears the search via the clear button', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupList();
-		render(<ModelCostTabPanel />);
-
-		const input = screen.getByPlaceholderText(
-			'Search by model or provider',
-		) as HTMLInputElement;
-		await user.type(input, 'gpt');
-		expect(input.value).toBe('gpt');
-
-		await user.click(screen.getByTestId('model-cost-search-clear'));
-		await waitFor(() => expect(input.value).toBe(''));
-	});
-
-	it('sends isOverride=true when the source filter is set to User override', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		let lastParams: URLSearchParams | null = null;
-		server.use(
-			rest.get(LLM_PRICING_ENDPOINT, (req, res, ctx) => {
-				lastParams = req.url.searchParams;
-				return res(ctx.status(200), ctx.json(makeListResponse(mockRules)));
-			}),
-		);
-		render(<ModelCostTabPanel />);
-
-		await screen.findByTestId('model-cell-name-rule-openai');
-		await user.click(screen.getByTestId('source-filter'));
-		// Scope to the listbox option — "User override" also appears as a row badge.
-		await user.click(
-			await screen.findByRole('option', { name: 'User override' }),
-		);
-
-		await waitFor(() => expect(lastParams?.get('isOverride')).toBe('true'));
-	});
-
-	it('opens the add drawer for a manager (ADMIN)', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupList();
-		render(<ModelCostTabPanel />);
-
-		await screen.findByTestId('model-cell-name-rule-openai');
-		await user.click(screen.getByTestId('add-model-cost-btn'));
-
-		const modelInput = await screen.findByTestId('drawer-model-id-input');
-		expect(modelInput).toBeInTheDocument();
-		expect(screen.getByTestId('drawer-save-btn')).toBeInTheDocument();
-	});
-
-	it('hides the add button and row actions for a viewer', async () => {
-		setupList();
-		render(<ModelCostTabPanel />, undefined, { role: 'VIEWER' });
-
-		const row = (
-			await screen.findByTestId('model-cell-name-rule-openai')
-		).closest('tr') as HTMLElement;
-		expect(screen.queryByTestId('add-model-cost-btn')).not.toBeInTheDocument();
-		// View-only rows render no action menu (no buttons in the row).
-		expect(within(row).queryByRole('button')).not.toBeInTheDocument();
-	});
-
-	it('opens the edit drawer prefilled from the row action menu', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupList();
-		render(<ModelCostTabPanel />);
-
-		await screen.findByTestId('model-cell-name-rule-openai');
-		await openRowMenu(user, 'rule-openai');
-		await user.click(await screen.findByText('Edit'));
-
-		const drawerTitle = await screen.findByText('Edit model cost');
-		expect(drawerTitle).toBeInTheDocument();
-		const modelInput = screen.getByTestId(
-			'drawer-model-id-input',
-		) as HTMLInputElement;
-		expect(modelInput.value).toBe('gpt-4o');
-		expect(modelInput).toBeDisabled();
-	});
-
-	it('deletes a rule through the confirm dialog', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		let deletedId: string | null = null;
-		setupList();
-		server.use(
-			rest.delete(LLM_PRICING_RULE_ENDPOINT, (req, res, ctx) => {
-				deletedId = req.params.id as string;
-				return res(ctx.status(200), ctx.json({ status: 'success' }));
-			}),
-		);
-		render(<ModelCostTabPanel />);
-
-		await screen.findByTestId('model-cell-name-rule-openai');
-		await openRowMenu(user, 'rule-openai');
-		await user.click(await screen.findByText('Delete'));
-
-		await user.click(await screen.findByTestId('drawer-delete-confirm-btn'));
-
-		await waitFor(() => expect(deletedId).toBe('rule-openai'));
-		await waitFor(() =>
-			expect(toastSuccess).toHaveBeenCalledWith(TOAST_MODEL_COST_DELETED),
-		);
-	});
-
-	it('renders cache buckets for rules that have cache pricing', async () => {
-		setupList();
-		render(<ModelCostTabPanel />);
-
-		const anthropicRow = (
-			await screen.findByTestId('model-cell-name-rule-anthropic')
-		).closest('tr') as HTMLElement;
-		expect(within(anthropicRow).getByText(/Cache Read/i)).toBeInTheDocument();
-		expect(within(anthropicRow).getByText(/Cache Write/i)).toBeInTheDocument();
-	});
-
-	it('formats per-million prices in the row', async () => {
-		setupList();
-		render(<ModelCostTabPanel />);
-
-		const openaiRow = (
-			await screen.findByTestId('model-cell-name-rule-openai')
-		).closest('tr') as HTMLElement;
-		// mockRules gpt-4o has input cost 3 → rendered as $3.00.
-		expect(within(openaiRow).getByText('$3.00')).toBeInTheDocument();
-	});
-
-	it('sends a normalized create payload when adding a rule', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		let body: Record<string, unknown> | null = null;
-		setupList();
-		server.use(
-			rest.put(LLM_PRICING_ENDPOINT, async (req, res, ctx) => {
-				body = await req.json();
-				return res(ctx.status(200), ctx.json({ status: 'success' }));
-			}),
-		);
-		render(<ModelCostTabPanel />);
-
-		await screen.findByTestId('model-cell-name-rule-openai');
-		await user.click(screen.getByTestId('add-model-cost-btn'));
-
-		// Leading/trailing whitespace should be trimmed off the model id.
-		await user.type(
-			await screen.findByTestId('drawer-model-id-input'),
-			'  gpt-4o-mini  ',
-		);
-		await user.type(screen.getByTestId('drawer-input-cost'), '3');
-		await user.type(screen.getByTestId('drawer-output-cost'), '9');
-		await user.click(screen.getByTestId('drawer-save-btn'));
-
-		await waitFor(() => expect(body).not.toBeNull());
-		// The create call submits a bulk `rules` array of normalized payloads.
-		const [payload] = (
-			body as unknown as {
-				rules: Record<string, unknown>[];
-			}
-		).rules;
-		expect(payload).toMatchObject({
-			modelName: 'gpt-4o-mini',
-			provider: 'OpenAI',
-			isOverride: true,
-			enabled: true,
-			unit: UnitDTO.per_million_tokens,
-			pricing: { input: 3, output: 9 },
-		});
-	});
-
-	it('sends an updated payload when editing a rule', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		let body: Record<string, unknown> | null = null;
-		setupList();
-		server.use(
-			rest.put(LLM_PRICING_ENDPOINT, async (req, res, ctx) => {
-				body = await req.json();
-				return res(ctx.status(200), ctx.json({ status: 'success' }));
-			}),
-		);
-		render(<ModelCostTabPanel />);
-
-		await screen.findByTestId('model-cell-name-rule-openai');
-		await openRowMenu(user, 'rule-openai');
-		await user.click(await screen.findByText('Edit'));
-
-		// Model id + provider are locked in edit mode; change the prefilled input cost.
-		const inputCost = await screen.findByTestId('drawer-input-cost');
-		await user.clear(inputCost);
-		await user.type(inputCost, '5');
-		await user.click(screen.getByTestId('drawer-save-btn'));
-
-		await waitFor(() => expect(body).not.toBeNull());
-		const [payload] = (
-			body as unknown as {
-				rules: Record<string, unknown>[];
-			}
-		).rules;
-		// Edit carries the rule id; disabled model/provider are still submitted and
-		// the edited price flows through, while output keeps its prefilled value.
-		expect(payload).toMatchObject({
-			id: 'rule-openai',
-			modelName: 'gpt-4o',
-			provider: 'OpenAI',
-			isOverride: true,
-			enabled: true,
-			unit: UnitDTO.per_million_tokens,
-			pricing: { input: 5, output: 9 },
-		});
-		await waitFor(() =>
-			expect(toastSuccess).toHaveBeenCalledWith(TOAST_MODEL_COST_UPDATED),
-		);
-	});
-});

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/__tests__/ModelCostDrawer.test.tsx

@@ -1,295 +0,0 @@
-import { makePricingRule } from 'container/LLMObservability/Settings/ModelPricing/__tests__/fixtures';
-import { EMPTY_DRAFT } from 'container/LLMObservability/Settings/ModelPricing/constants';
-import { draftFromRule } from 'container/LLMObservability/Settings/ModelPricing/utils';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import ModelCostDrawer from '../ModelCostDrawer';
-
-const editDraft = draftFromRule(
-	makePricingRule({
-		id: 'rule-openai',
-		modelName: 'gpt-4o',
-		provider: 'OpenAI',
-	}),
-);
-
-describe('ModelCostDrawer (integration)', () => {
-	it('renders the add title and a save button for a manager', () => {
-		render(
-			<ModelCostDrawer
-				isOpen
-				mode="add"
-				initialDraft={EMPTY_DRAFT}
-				onClose={jest.fn()}
-				onSave={jest.fn()}
-				isSaving={false}
-				saveError={null}
-				canManage
-			/>,
-		);
-
-		expect(screen.getByText('Add model cost')).toBeInTheDocument();
-		expect(screen.getByTestId('drawer-save-btn')).toBeInTheDocument();
-	});
-
-	it('disables save until the form is dirty', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(
-			<ModelCostDrawer
-				isOpen
-				mode="add"
-				initialDraft={EMPTY_DRAFT}
-				onClose={jest.fn()}
-				onSave={jest.fn()}
-				isSaving={false}
-				saveError={null}
-				canManage
-			/>,
-		);
-
-		expect(screen.getByTestId('drawer-save-btn')).toBeDisabled();
-
-		await user.type(screen.getByTestId('drawer-model-id-input'), 'openai:gpt-4o');
-
-		await waitFor(() =>
-			expect(screen.getByTestId('drawer-save-btn')).toBeEnabled(),
-		);
-	});
-
-	it('shows the model id required error and does not call onSave when the name is empty', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onSave = jest.fn();
-		render(
-			<ModelCostDrawer
-				isOpen
-				mode="add"
-				initialDraft={EMPTY_DRAFT}
-				onClose={jest.fn()}
-				onSave={onSave}
-				isSaving={false}
-				saveError={null}
-				canManage
-			/>,
-		);
-
-		// Make the form dirty without touching the model id: add a pattern, which
-		// mutates the `patterns` form field while leaving the name empty.
-		await user.type(screen.getByTestId('drawer-pattern-input'), 'gpt');
-		await user.click(screen.getByTestId('drawer-pattern-add-btn'));
-
-		await waitFor(() =>
-			expect(screen.getByTestId('drawer-save-btn')).toBeEnabled(),
-		);
-		await user.click(screen.getByTestId('drawer-save-btn'));
-
-		const error = await screen.findByText('Billing model ID is required.');
-		expect(error).toBeInTheDocument();
-		expect(onSave).not.toHaveBeenCalled();
-	});
-
-	it('calls onSave once on the happy path with valid model id and pricing', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onSave = jest.fn();
-		render(
-			<ModelCostDrawer
-				isOpen
-				mode="add"
-				initialDraft={EMPTY_DRAFT}
-				onClose={jest.fn()}
-				onSave={onSave}
-				isSaving={false}
-				saveError={null}
-				canManage
-			/>,
-		);
-
-		await user.type(screen.getByTestId('drawer-model-id-input'), 'openai:gpt-4o');
-		await user.type(screen.getByTestId('drawer-input-cost'), '3');
-		await user.type(screen.getByTestId('drawer-output-cost'), '9');
-
-		await user.click(screen.getByTestId('drawer-save-btn'));
-
-		await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
-	});
-
-	it('renders the edit title with disabled, prefilled model id and disabled provider', () => {
-		render(
-			<ModelCostDrawer
-				isOpen
-				mode="edit"
-				initialDraft={editDraft}
-				onClose={jest.fn()}
-				onSave={jest.fn()}
-				isSaving={false}
-				saveError={null}
-				canManage
-			/>,
-		);
-
-		expect(screen.getByText('Edit model cost')).toBeInTheDocument();
-		const modelInput = screen.getByTestId(
-			'drawer-model-id-input',
-		) as HTMLInputElement;
-		expect(modelInput.value).toBe('gpt-4o');
-		expect(modelInput).toBeDisabled();
-		expect(screen.getByTestId('drawer-provider-select')).toBeDisabled();
-	});
-
-	it('renders a read-only view with a Close button and no save for a viewer', () => {
-		render(
-			<ModelCostDrawer
-				isOpen
-				mode="edit"
-				initialDraft={editDraft}
-				onClose={jest.fn()}
-				onSave={jest.fn()}
-				isSaving={false}
-				saveError={null}
-				canManage={false}
-			/>,
-		);
-
-		expect(screen.getByText('View model cost')).toBeInTheDocument();
-		expect(screen.queryByTestId('drawer-save-btn')).not.toBeInTheDocument();
-		expect(screen.getByTestId('drawer-cancel-btn')).toHaveTextContent('Close');
-	});
-
-	it('renders the save error text', () => {
-		render(
-			<ModelCostDrawer
-				isOpen
-				mode="add"
-				initialDraft={EMPTY_DRAFT}
-				onClose={jest.fn()}
-				onSave={jest.fn()}
-				isSaving={false}
-				saveError="boom"
-				canManage
-			/>,
-		);
-
-		expect(screen.getByText('boom')).toBeInTheDocument();
-	});
-
-	it('adds and removes a model pattern from the editor', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(
-			<ModelCostDrawer
-				isOpen
-				mode="add"
-				initialDraft={EMPTY_DRAFT}
-				onClose={jest.fn()}
-				onSave={jest.fn()}
-				isSaving={false}
-				saveError={null}
-				canManage
-			/>,
-		);
-
-		await user.type(screen.getByTestId('drawer-pattern-input'), 'gpt-5');
-		await user.click(screen.getByTestId('drawer-pattern-add-btn'));
-		// The added pattern renders as a removable chip.
-		const removeChip = screen.getByRole('button', {
-			name: 'Remove pattern gpt-5',
-		});
-		expect(removeChip).toBeInTheDocument();
-
-		await user.click(removeChip);
-		expect(
-			screen.queryByRole('button', { name: 'Remove pattern gpt-5' }),
-		).not.toBeInTheDocument();
-	});
-
-	it('adds a cache pricing bucket via the picker and removes it', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(
-			<ModelCostDrawer
-				isOpen
-				mode="add"
-				initialDraft={EMPTY_DRAFT}
-				onClose={jest.fn()}
-				onSave={jest.fn()}
-				isSaving={false}
-				saveError={null}
-				canManage
-			/>,
-		);
-
-		await user.click(screen.getByTestId('drawer-add-bucket-btn'));
-		await user.click(screen.getByTestId('drawer-add-bucket-cache-read'));
-
-		// Adding the bucket reveals its cost input and the shared cache-mode select.
-		expect(screen.getByTestId('drawer-cache-read-cost')).toBeInTheDocument();
-		expect(screen.getByTestId('drawer-cache-mode')).toBeInTheDocument();
-
-		await user.click(screen.getByTestId('drawer-remove-cache-read'));
-		expect(
-			screen.queryByTestId('drawer-cache-read-cost'),
-		).not.toBeInTheDocument();
-	});
-
-	it('blocks save with a pricing error when an override rule has no input cost', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onSave = jest.fn();
-		render(
-			<ModelCostDrawer
-				isOpen
-				mode="add"
-				initialDraft={EMPTY_DRAFT}
-				onClose={jest.fn()}
-				onSave={onSave}
-				isSaving={false}
-				saveError={null}
-				canManage
-			/>,
-		);
-
-		// EMPTY_DRAFT defaults to an override with empty pricing. Fill only the
-		// model id + output cost so the form is dirty but the input cost is missing.
-		await user.type(screen.getByTestId('drawer-model-id-input'), 'openai:gpt-4o');
-		await user.type(screen.getByTestId('drawer-output-cost'), '9');
-		await user.click(screen.getByTestId('drawer-save-btn'));
-
-		await expect(
-			screen.findByText('Input cost must be greater than 0.'),
-		).resolves.toBeInTheDocument();
-		expect(onSave).not.toHaveBeenCalled();
-	});
-
-	it('requires confirmation to reset an override rule back to auto', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(
-			<ModelCostDrawer
-				isOpen
-				mode="edit"
-				initialDraft={editDraft}
-				onClose={jest.fn()}
-				onSave={jest.fn()}
-				isSaving={false}
-				saveError={null}
-				canManage
-			/>,
-		);
-
-		// Pricing is editable while the rule is an override.
-		expect(screen.getByTestId('drawer-input-cost')).toBeEnabled();
-
-		// Picking "auto" surfaces a confirm step instead of applying immediately.
-		await user.click(screen.getByTestId('drawer-source-auto'));
-		expect(screen.getByTestId('drawer-reset-confirm-btn')).toBeInTheDocument();
-		expect(screen.getByTestId('drawer-input-cost')).toBeEnabled();
-
-		// Keep backs out of the reset.
-		await user.click(screen.getByTestId('drawer-reset-keep-btn'));
-		expect(
-			screen.queryByTestId('drawer-reset-confirm-btn'),
-		).not.toBeInTheDocument();
-
-		// Confirming the reset flips the rule to auto and locks pricing.
-		await user.click(screen.getByTestId('drawer-source-auto'));
-		await user.click(screen.getByTestId('drawer-reset-confirm-btn'));
-		await waitFor(() =>
-			expect(screen.getByTestId('drawer-input-cost')).toBeDisabled(),
-		);
-	});
-});

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/hooks/useModelCostDrawer.ts

@@ -6,11 +6,7 @@ import {
 	useCreateOrUpdateLLMPricingRules,
 } from 'api/generated/services/llmpricingrules';
 
-import {
-	EMPTY_DRAFT,
-	TOAST_MODEL_COST_ADDED,
-	TOAST_MODEL_COST_UPDATED,
-} from '../../../../constants';
+import { EMPTY_DRAFT } from '../../../../constants';
 import type { DrawerDraft, DrawerMode, PricingRule } from '../../../../types';
 import { buildRulePayload, draftFromRule } from '../../../../utils';
 
@@ -80,9 +76,7 @@ export function useModelCostDrawer(): UseModelCostDrawerResult {
 				await invalidateList();
 				setIsOpen(false);
 				setSelectedRuleId(null);
-				toast.success(
-					mode === 'edit' ? TOAST_MODEL_COST_UPDATED : TOAST_MODEL_COST_ADDED,
-				);
+				toast.success(mode === 'edit' ? 'Model cost updated' : 'Model cost added');
 			} catch (error) {
 				const message = error instanceof Error ? error.message : 'Save failed';
 				setSaveError(message);

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.module.scss

@@ -1,7 +1,7 @@
 .modelCostsTable {
 	margin-top: var(--spacing-8);
 	--tanstack-table-row-height: 48px;
-	height: calc(100vh - 170px);
+	height: calc(100vh - 250px);
 	overflow-y: auto;
 
 	:global(table) tbody tr {

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/hooks/useModelCostDelete.ts

@@ -6,7 +6,6 @@ import {
 	useDeleteLLMPricingRule,
 } from 'api/generated/services/llmpricingrules';
 
-import { TOAST_MODEL_COST_DELETED } from '../../constants';
 import type { PricingRule } from '../../types';
 
 // The minimal slice of a rule the delete-confirm flow needs: the id to delete
@@ -50,7 +49,7 @@ export function useModelCostDelete(): UseModelCostDeleteResult {
 				queryKey: getListLLMPricingRulesQueryKey(),
 			});
 			setPendingDelete(null);
-			toast.success(TOAST_MODEL_COST_DELETED);
+			toast.success('Model cost deleted');
 		} catch (error) {
 			const message = error instanceof Error ? error.message : 'Delete failed';
 			toast.error(message);

frontend/src/container/LLMObservability/Settings/ModelPricing/__tests__/fixtures.ts

@@ -1,80 +0,0 @@
-import {
-	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
-	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
-	type ListLLMPricingRules200,
-} from 'api/generated/services/sigNoz.schemas';
-
-import type { PricingRule } from '../types';
-
-// Endpoint glob used by MSW handlers. The generated client hits a relative
-// `/api/v1/llm_pricing_rules`, so the `*` prefix matches regardless of base URL.
-export const LLM_PRICING_ENDPOINT = '*/api/v1/llm_pricing_rules';
-export const LLM_PRICING_RULE_ENDPOINT = '*/api/v1/llm_pricing_rules/:id';
-
-// Builds a valid pricing rule, with overrides merged shallowly. Pricing is
-// replaced wholesale when provided so callers can shape cache buckets freely.
-export function makePricingRule(
-	overrides: Partial<PricingRule> = {},
-): PricingRule {
-	const { pricing, ...rest } = overrides;
-	return {
-		id: 'rule-1',
-		enabled: true,
-		isOverride: true,
-		modelName: 'gpt-4o',
-		modelPattern: ['gpt-4o'],
-		orgId: 'org-1',
-		provider: 'OpenAI',
-		sourceId: 'source-1',
-		unit: UnitDTO.per_million_tokens,
-		createdAt: '2023-10-01T00:00:00.000Z',
-		updatedAt: '2023-10-10T00:00:00.000Z',
-		syncedAt: '2023-10-10T00:00:00.000Z',
-		pricing: {
-			input: 3,
-			output: 9,
-			...pricing,
-		},
-		...rest,
-	};
-}
-
-export const mockRules: PricingRule[] = [
-	makePricingRule({
-		id: 'rule-openai',
-		modelName: 'gpt-4o',
-		provider: 'OpenAI',
-		isOverride: true,
-		pricing: { input: 3, output: 9 },
-	}),
-	makePricingRule({
-		id: 'rule-anthropic',
-		modelName: 'claude-3-5-sonnet',
-		provider: 'Anthropic',
-		isOverride: false,
-		pricing: {
-			input: 2,
-			output: 30,
-			cache: { mode: CacheModeDTO.additive, read: 3, write: 6 },
-		},
-	}),
-];
-
-// Wraps items in the list response envelope the list query reads
-// (`data.data.items` / `data.data.total`).
-export function makeListResponse(
-	items: PricingRule[],
-	total = items.length,
-	offset = 0,
-	limit = 20,
-): ListLLMPricingRules200 {
-	return {
-		status: 'success',
-		data: {
-			items,
-			total,
-			offset,
-			limit,
-		},
-	};
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/constants.ts

@@ -4,10 +4,6 @@ import type { CacheBucketDef, DrawerDraft } from './types';
 
 export const PAGE_SIZE = 20;
 
-export const TOAST_MODEL_COST_ADDED = 'Model cost added';
-export const TOAST_MODEL_COST_UPDATED = 'Model cost updated';
-export const TOAST_MODEL_COST_DELETED = 'Model cost deleted';
-
 export const PAGE_KEY = 'page';
 export const LIMIT_KEY = 'limit';
 export const SEARCH_KEY = 'search';

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

@@ -1,69 +0,0 @@
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import ROUTES from 'constants/routes';
-import {
-	LLM_PRICING_ENDPOINT,
-	makeListResponse,
-	mockRules,
-} from 'container/LLMObservability/Settings/ModelPricing/__tests__/fixtures';
-import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import LLMObservability from '../LLMObservability';
-
-function setupList(items = mockRules): void {
-	server.use(
-		rest.get(LLM_PRICING_ENDPOINT, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(makeListResponse(items))),
-		),
-	);
-}
-
-describe('LLMObservability (integration)', () => {
-	beforeEach(() => {
-		window.history.pushState(null, '', '/');
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders the overview panel and the tab bar on the overview route', () => {
-		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
-		});
-
-		expect(screen.getByTestId('llm-observability-tabs')).toBeInTheDocument();
-		expect(screen.getByTestId('llm-observability-overview')).toBeInTheDocument();
-		expect(screen.getByText('LLM Observability')).toBeInTheDocument();
-		expect(screen.getByRole('tab', { name: 'Overview' })).toBeInTheDocument();
-		expect(
-			screen.getByRole('tab', { name: 'Model pricing' }),
-		).toBeInTheDocument();
-	});
-
-	it('navigates to the configuration route when the Model pricing tab is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
-		});
-
-		await user.click(screen.getByRole('tab', { name: 'Model pricing' }));
-
-		expect(safeNavigateMock).toHaveBeenCalledWith(
-			ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
-		);
-	});
-
-	it('renders the model-pricing page on the configuration route', async () => {
-		setupList();
-		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
-		});
-
-		await waitFor(() =>
-			expect(
-				screen.getByTestId('llm-observability-model-pricing-page'),
-			).toBeInTheDocument(),
-		);
-	});
-});

frontend/src/container/LLMObservability/hooks/useLLMObservabilityTabs.tsx

@@ -1,52 +0,0 @@
-import { useCallback } from 'react';
-import { useLocation } from 'react-router-dom';
-import { type TabItemProps } from '@signozhq/ui/tabs';
-import ROUTES from 'constants/routes';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-
-import Overview from '../Overview/Overview';
-import LLMObservabilityModelPricing from '../Settings/ModelPricing/LLMObservabilityModelPricing';
-
-const OVERVIEW_KEY = ROUTES.LLM_OBSERVABILITY_OVERVIEW;
-const CONFIGURATION_KEY = ROUTES.LLM_OBSERVABILITY_CONFIGURATION;
-
-interface UseLLMObservabilityTabsResult {
-	items: TabItemProps[];
-	activeTab: string;
-	onTabChange: (key: string) => void;
-}
-
-// Drives the top-level LLM Observability tabs. Route-driven: the active tab is
-// derived from the pathname (each tab owns a URL) and changing tabs navigates,
-// so tabs stay shareable/back-button friendly while rendering with the SigNoz
-// design-system Tabs.
-export function useLLMObservabilityTabs(): UseLLMObservabilityTabsResult {
-	const { pathname } = useLocation();
-	const { safeNavigate } = useSafeNavigate();
-
-	const activeTab = pathname.startsWith(CONFIGURATION_KEY)
-		? CONFIGURATION_KEY
-		: OVERVIEW_KEY;
-
-	const onTabChange = useCallback(
-		(key: string): void => {
-			safeNavigate(key);
-		},
-		[safeNavigate],
-	);
-
-	const items: TabItemProps[] = [
-		{
-			key: OVERVIEW_KEY,
-			label: 'Overview',
-			children: <Overview />,
-		},
-		{
-			key: CONFIGURATION_KEY,
-			label: 'Model pricing',
-			children: <LLMObservabilityModelPricing />,
-		},
-	];
-
-	return { items, activeTab, onTabChange };
-}

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

@@ -3,23 +3,12 @@
 	flex-direction: row;
 
 	.meter-explorer-quick-filters-section {
-		// Width is owned by ResizableBox (inline style).
-		flex-shrink: 0;
+		width: 280px;
 		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 {
@@ -89,9 +78,7 @@
 
 	&.quick-filters-open {
 		.meter-explorer-content-section {
-			flex: 1;
-			width: auto;
-			min-width: 0;
+			width: calc(100% - 280px);
 		}
 	}
 

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

@@ -7,7 +7,6 @@ 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';
@@ -19,8 +18,6 @@ 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';
@@ -33,10 +30,6 @@ 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,
@@ -62,16 +55,6 @@ 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(
@@ -144,19 +127,10 @@ function Explorer(): JSX.Element {
 					'quick-filters-open': showQuickFilters,
 				})}
 			>
-				<ResizableBox
-					handle="right"
-					defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
-					initialWidth={quickFiltersInitialWidth}
-					minWidth={QUICK_FILTERS_MIN_WIDTH}
-					maxWidth={QUICK_FILTERS_MAX_WIDTH}
-					onResize={persistQuickFiltersWidth}
-					resetToDefaultOnDoubleClick
-					withHandle
+				<div
 					className={cx('meter-explorer-quick-filters-section', {
 						hidden: !showQuickFilters,
 					})}
-					handleTestId="quick-filters-resize-handle"
 				>
 					<QuickFilters
 						className="qf-meter-explorer"
@@ -168,7 +142,7 @@ function Explorer(): JSX.Element {
 							setShowQuickFilters(!showQuickFilters);
 						}}
 					/>
-				</ResizableBox>
+				</div>
 
 				<div className="meter-explorer-content-section">
 					<div className="meter-explorer-explore-content">

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.authz.test.tsx

@@ -48,8 +48,6 @@ describe('CreateRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
-				allowed: false,
-				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/EditRolePage.authz.test.tsx

@@ -77,8 +77,6 @@ describe('EditRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
-				allowed: false,
-				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

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

@@ -409,8 +409,6 @@ describe('ViewRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
-				allowed: false,
-				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

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

@@ -203,8 +203,8 @@ export const routesToSkip = [
 	ROUTES.METER_EXPLORER_VIEWS,
 	ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
 	ROUTES.SOMETHING_WENT_WRONG,
-	ROUTES.LLM_OBSERVABILITY_OVERVIEW,
-	ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
+	ROUTES.LLM_OBSERVABILITY_BASE,
+	ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/hooks/dynamicVariables/useGetFieldKeys.ts

@@ -30,6 +30,4 @@ export const useGetFieldKeys = ({
 		queryKey: ['fieldKeys', signal, name],
 		queryFn: () => getFieldKeys(signal, name),
 		enabled,
-		// Keep prior keys during a search refetch so the dropdown doesn't blank out.
-		keepPreviousData: true,
 	});

frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.module.css

@@ -1,28 +0,0 @@
-.container {
-	position: fixed;
-	top: 12px;
-	left: 50%;
-	transform: translateX(-50%);
-	z-index: 9998;
-	pointer-events: auto;
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.button {
-	box-shadow:
-		0 4px 12px rgb(0 0 0 / 15%),
-		0 0 0 1px rgb(0 0 0 / 5%);
-}
-
-.badge {
-	margin-left: 4px;
-}
-
-.closeButton {
-	border-radius: 4px;
-	box-shadow:
-		0 4px 12px rgb(0 0 0 / 15%),
-		0 0 0 1px rgb(0 0 0 / 5%);
-}

frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.tsx

@@ -1,61 +0,0 @@
-import { X } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { useState } from 'react';
-import { createPortal } from 'react-dom';
-
-import { useAuthZDevStore } from '../useAuthZDevStore';
-
-import styles from './AuthZDevFloatingIndicator.module.css';
-
-export function AuthZDevFloatingIndicator(): JSX.Element | null {
-	const overrides = useAuthZDevStore((s) => s.overrides);
-	const isModalOpen = useAuthZDevStore((s) => s.isModalOpen);
-	const openModal = useAuthZDevStore((s) => s.openModal);
-	const [isDismissed, setIsDismissed] = useState(false);
-
-	const overrideCount = Object.keys(overrides).length;
-
-	if (overrideCount === 0 || isModalOpen || isDismissed) {
-		return null;
-	}
-
-	const handleOpen = (): void => {
-		setIsDismissed(false);
-		openModal();
-	};
-
-	const handleDismiss = (e: React.MouseEvent): void => {
-		e.stopPropagation();
-		setIsDismissed(true);
-	};
-
-	return createPortal(
-		<div className={styles.container}>
-			<Button
-				variant="solid"
-				color="warning"
-				size="sm"
-				onClick={handleOpen}
-				className={styles.button}
-				data-testid="authz-dev-floating-indicator"
-			>
-				AuthZ Overrides
-				<Badge color="warning" className={styles.badge}>
-					{overrideCount}
-				</Badge>
-			</Button>
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				onClick={handleDismiss}
-				className={styles.closeButton}
-				aria-label="Dismiss indicator"
-				data-testid="authz-dev-floating-dismiss"
-				prefix={<X />}
-			/>
-		</div>,
-		document.body,
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModal.module.css

@@ -1,140 +0,0 @@
-.modal {
-	--dialog-width: 640px;
-	--dialog-max-width: 92vw;
-	--dialog-max-height: 78vh;
-	--dialog-description-padding: var(--spacing-4) var(--spacing-4) 0px
-		var(--spacing-4);
-
-	[data-slot='dialog-description'],
-	[data-slot='dialog-header'] {
-		background-color: var(--l2-background);
-	}
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	max-height: calc(78vh - 80px);
-}
-
-.header {
-	display: flex;
-	flex-direction: column;
-	flex-shrink: 0;
-	gap: var(--spacing-4);
-	padding-bottom: var(--spacing-4);
-}
-
-.searchRow {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-
-	--input-background: var(--l3-background);
-	--input-hover-background: var(--l3-background);
-	--input-focus-background: var(--l3-background);
-	--input-border-color: var(--l3-border);
-	--input-hover-border-color: var(--l3-border);
-	--input-focus-border-color: var(--l3-border);
-
-	--select-trigger-background-color: var(--l3-background);
-	--select-trigger-hover-background: var(--l3-background);
-	--select-trigger-focus-background: var(--l3-background);
-	--select-trigger-border-color: var(--l3-border);
-
-	--select-content-background: var(--l3-background);
-	--select-item-highlight-background: var(--l3-background-hover);
-}
-
-.search {
-	flex: 1 1 auto;
-	min-width: 0;
-
-	--input-width: 100%;
-}
-
-.filter {
-	flex: 0 0 176px;
-	/* Normalize the library trigger height (2.25rem) to match the input. */
-	--select-trigger-height: 2rem;
-}
-
-.search > *,
-.filter > * {
-	box-sizing: border-box;
-}
-
-.searchIcon {
-	display: inline-flex;
-	color: var(--l3-foreground);
-}
-
-.actionsRow {
-	display: flex;
-	gap: var(--spacing-3);
-}
-
-.actionButton {
-	flex: 0 0 auto;
-	height: 2rem;
-}
-
-.list {
-	display: flex;
-	flex: 1 1 auto;
-	flex-direction: column;
-	gap: var(--spacing-6);
-	padding: var(--spacing-4) 0;
-	overflow-y: auto;
-}
-
-.section {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-}
-
-.sectionHeader {
-	display: flex;
-	align-items: baseline;
-	gap: var(--spacing-3);
-	padding: var(--spacing-3) var(--spacing-2);
-	margin: 0 0 var(--spacing-1);
-	border-bottom: 1px solid var(--l2-border);
-}
-
-.empty {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 160px;
-	padding: var(--spacing-16);
-}
-
-.footer {
-	display: flex;
-	flex-shrink: 0;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-	padding: var(--spacing-4) 0;
-	border-top: 1px solid var(--l2-border);
-}
-
-.hint {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-4);
-}
-
-.hintGroup {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-}
-
-.count {
-	flex: 0 0 auto;
-	white-space: nowrap;
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModal.tsx

@@ -1,108 +0,0 @@
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { useCallback, useRef } from 'react';
-
-import { useAuthZDevStore } from '../useAuthZDevStore';
-import { useAuthZQueryInvalidation } from '../useAuthZQueryInvalidation';
-
-import { AuthZDevModalContent } from './AuthZDevModalContent';
-import { AuthZDevModalFooter } from './AuthZDevModalFooter';
-import { AuthZDevModalHeader } from './AuthZDevModalHeader';
-import { useAuthZDevModalData } from './useAuthZDevModalData';
-import { useModalKeyboard } from './useModalKeyboard';
-
-import styles from './AuthZDevModal.module.css';
-
-export function AuthZDevModal(): JSX.Element | null {
-	const isModalOpen = useAuthZDevStore((s) => s.isModalOpen);
-	const closeModal = useAuthZDevStore((s) => s.closeModal);
-	const observed = useAuthZDevStore((s) => s.observed);
-	const overrides = useAuthZDevStore((s) => s.overrides);
-	const cycleOverride = useAuthZDevStore((s) => s.cycleOverride);
-	const setOverride = useAuthZDevStore((s) => s.setOverride);
-	const clearAllOverrides = useAuthZDevStore((s) => s.clearAllOverrides);
-	const grantAll = useAuthZDevStore((s) => s.grantAll);
-	const denyAll = useAuthZDevStore((s) => s.denyAll);
-
-	useAuthZQueryInvalidation(overrides);
-
-	const searchInputRef = useRef<HTMLInputElement>(null);
-
-	const {
-		search,
-		setSearch,
-		resourceFilter,
-		setResourceFilter,
-		observedList,
-		resourceFilterItems,
-		filteredPermissions,
-		groups,
-		orderedPermissions,
-		indexByPermission,
-		hasActiveFilter,
-		filteredOverrideCount,
-		overrideCount,
-	} = useAuthZDevModalData(observed, overrides);
-
-	const { selectedIndex, setSelectedIndex } = useModalKeyboard({
-		permissions: orderedPermissions,
-		overrides,
-		onCycle: cycleOverride,
-		onSetOverride: setOverride,
-		onClose: closeModal,
-		searchInputRef,
-	});
-
-	const handleOpenChange = useCallback(
-		(open: boolean): void => {
-			if (!open) {
-				closeModal();
-				setSelectedIndex(-1);
-			}
-		},
-		[closeModal, setSelectedIndex],
-	);
-
-	return (
-		<DialogWrapper
-			open={isModalOpen}
-			onOpenChange={handleOpenChange}
-			title="AuthZ DevTools"
-			subTitle="Force permission results locally without touching the backend."
-			className={styles.modal}
-			width="wide"
-		>
-			<div className={styles.content}>
-				<AuthZDevModalHeader
-					searchInputRef={searchInputRef}
-					search={search}
-					setSearch={setSearch}
-					resourceFilter={resourceFilter}
-					setResourceFilter={setResourceFilter}
-					resourceFilterItems={resourceFilterItems}
-					hasActiveFilter={hasActiveFilter}
-					filteredPermissions={filteredPermissions}
-					filteredOverrideCount={filteredOverrideCount}
-					overrideCount={overrideCount}
-					grantAll={grantAll}
-					denyAll={denyAll}
-					clearAllOverrides={clearAllOverrides}
-				/>
-				<AuthZDevModalContent
-					observedListLength={observedList.length}
-					orderedPermissions={orderedPermissions}
-					groups={groups}
-					indexByPermission={indexByPermission}
-					selectedIndex={selectedIndex}
-					setSelectedIndex={setSelectedIndex}
-					observed={observed}
-					overrides={overrides}
-					onSetOverride={setOverride}
-				/>
-				<AuthZDevModalFooter
-					orderedPermissionsCount={orderedPermissions.length}
-					observedListLength={observedList.length}
-				/>
-			</div>
-		</DialogWrapper>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalContent.tsx

@@ -1,85 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { useCallback } from 'react';
-
-import { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { ObservedPermission, OverrideState } from '../types';
-
-import { PermissionRow } from './PermissionRow';
-
-import styles from './AuthZDevModal.module.css';
-
-export interface PermissionGroup {
-	resource: string;
-	items: string[];
-}
-
-export interface AuthZDevModalContentProps {
-	observedListLength: number;
-	orderedPermissions: string[];
-	groups: PermissionGroup[];
-	indexByPermission: Map<string, number>;
-	selectedIndex: number;
-	setSelectedIndex: (index: number) => void;
-	observed: Record<string, ObservedPermission>;
-	overrides: Record<string, OverrideState>;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-}
-
-export function AuthZDevModalContent({
-	observedListLength,
-	orderedPermissions,
-	groups,
-	indexByPermission,
-	selectedIndex,
-	setSelectedIndex,
-	observed,
-	overrides,
-	onSetOverride,
-}: AuthZDevModalContentProps): JSX.Element {
-	const handleSelectIndex = useCallback(
-		(index: number) => (): void => {
-			setSelectedIndex(index);
-		},
-		[setSelectedIndex],
-	);
-
-	return (
-		<div className={styles.list} data-testid="authz-dev-permission-list">
-			{orderedPermissions.length === 0 ? (
-				<div className={styles.empty}>
-					<Typography.Text align="center" color="muted">
-						{observedListLength === 0
-							? 'No permissions observed yet. Navigate the app to trigger permission checks.'
-							: 'No permissions match your search.'}
-					</Typography.Text>
-				</div>
-			) : (
-				groups.map((group) => (
-					<div key={group.resource} className={styles.section}>
-						<div className={styles.sectionHeader}>
-							<Typography.Text as="span" size="medium" weight="semibold">
-								{group.resource}
-							</Typography.Text>
-							<Typography.Text as="span" size="small" color="muted">
-								{group.items.length}
-							</Typography.Text>
-						</div>
-						{group.items.map((permission) => {
-							const index = indexByPermission.get(permission) ?? 0;
-							return (
-								<PermissionRow
-									key={permission}
-									observed={observed[permission]}
-									override={overrides[permission]}
-									isSelected={index === selectedIndex}
-									onSetOverride={onSetOverride}
-									onSelect={handleSelectIndex(index)}
-								/>
-							);
-						})}
-					</div>
-				))
-			)}
-		</div>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalFooter.tsx

@@ -1,56 +0,0 @@
-import { Kbd } from '@signozhq/ui/kbd';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './AuthZDevModal.module.css';
-
-export interface AuthZDevModalFooterProps {
-	orderedPermissionsCount: number;
-	observedListLength: number;
-}
-
-export function AuthZDevModalFooter({
-	orderedPermissionsCount,
-	observedListLength,
-}: AuthZDevModalFooterProps): JSX.Element {
-	return (
-		<div className={styles.footer}>
-			<div className={styles.hint}>
-				<span className={styles.hintGroup}>
-					<Kbd>↑</Kbd>
-					<Kbd>↓</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						navigate
-					</Typography.Text>
-				</span>
-				<span className={styles.hintGroup}>
-					<Kbd>←</Kbd>
-					<Kbd>→</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						mode
-					</Typography.Text>
-				</span>
-				<span className={styles.hintGroup}>
-					<Kbd>1-5</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						set
-					</Typography.Text>
-				</span>
-				<span className={styles.hintGroup}>
-					<Kbd>/</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						search
-					</Typography.Text>
-				</span>
-				<span className={styles.hintGroup}>
-					<Kbd>Esc</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						close
-					</Typography.Text>
-				</span>
-			</div>
-			<Typography.Text size="small" color="muted" className={styles.count}>
-				{orderedPermissionsCount} of {observedListLength} permissions
-			</Typography.Text>
-		</div>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalHeader.tsx

@@ -1,119 +0,0 @@
-import { Search } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { SelectSimple } from '@signozhq/ui/select';
-import { RefObject, useCallback } from 'react';
-
-import { BrandedPermission } from '../../hooks/useAuthZ/types';
-
-import styles from './AuthZDevModal.module.css';
-
-export interface AuthZDevModalHeaderProps {
-	searchInputRef: RefObject<HTMLInputElement>;
-	search: string;
-	setSearch: (value: string) => void;
-	resourceFilter: string;
-	setResourceFilter: (value: string) => void;
-	resourceFilterItems: Array<{ value: string; label: string }>;
-	hasActiveFilter: boolean;
-	filteredPermissions: BrandedPermission[];
-	filteredOverrideCount: number;
-	overrideCount: number;
-	grantAll: (permissions?: BrandedPermission[]) => void;
-	denyAll: (permissions?: BrandedPermission[]) => void;
-	clearAllOverrides: (permissions?: BrandedPermission[]) => void;
-}
-
-export function AuthZDevModalHeader({
-	searchInputRef,
-	search,
-	setSearch,
-	resourceFilter,
-	setResourceFilter,
-	resourceFilterItems,
-	hasActiveFilter,
-	filteredPermissions,
-	filteredOverrideCount,
-	overrideCount,
-	grantAll,
-	denyAll,
-	clearAllOverrides,
-}: AuthZDevModalHeaderProps): JSX.Element {
-	const handleGrantAll = useCallback((): void => {
-		grantAll(hasActiveFilter ? filteredPermissions : undefined);
-	}, [grantAll, hasActiveFilter, filteredPermissions]);
-
-	const handleDenyAll = useCallback((): void => {
-		denyAll(hasActiveFilter ? filteredPermissions : undefined);
-	}, [denyAll, hasActiveFilter, filteredPermissions]);
-
-	const handleClearAll = useCallback((): void => {
-		clearAllOverrides(hasActiveFilter ? filteredPermissions : undefined);
-	}, [clearAllOverrides, hasActiveFilter, filteredPermissions]);
-
-	return (
-		<div className={styles.header}>
-			<div className={styles.searchRow}>
-				<div className={styles.search}>
-					<Input
-						ref={searchInputRef}
-						placeholder="Search permissions..."
-						value={search}
-						onChange={(e): void => setSearch(e.target.value)}
-						prefix={<Search size={14} className={styles.searchIcon} />}
-						aria-label="Search permissions"
-						data-testid="authz-dev-search"
-					/>
-				</div>
-				<div className={styles.filter}>
-					<SelectSimple
-						items={resourceFilterItems}
-						value={resourceFilter}
-						onChange={(value): void => setResourceFilter(value as string)}
-						testId="authz-dev-resource-filter"
-						withPortal={false}
-					/>
-				</div>
-			</div>
-			<div className={styles.actionsRow}>
-				<Button
-					className={styles.actionButton}
-					variant="outlined"
-					color="success"
-					size="sm"
-					onClick={handleGrantAll}
-					disabled={filteredPermissions.length === 0}
-					data-testid="authz-dev-grant-all"
-				>
-					{hasActiveFilter ? 'Grant filtered' : 'Grant all'}
-				</Button>
-				<Button
-					className={styles.actionButton}
-					variant="outlined"
-					color="error"
-					size="sm"
-					onClick={handleDenyAll}
-					disabled={filteredPermissions.length === 0}
-					data-testid="authz-dev-deny-all"
-				>
-					{hasActiveFilter ? 'Deny filtered' : 'Deny all'}
-				</Button>
-				<Button
-					className={styles.actionButton}
-					variant="outlined"
-					color="secondary"
-					size="sm"
-					onClick={handleClearAll}
-					disabled={
-						hasActiveFilter ? filteredOverrideCount === 0 : overrideCount === 0
-					}
-					data-testid="authz-dev-clear-all"
-				>
-					{hasActiveFilter
-						? `Clear filtered (${filteredOverrideCount})`
-						: `Clear all (${overrideCount})`}
-				</Button>
-			</div>
-		</div>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/OverrideControl.module.css

@@ -1,72 +0,0 @@
-.segmented {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-1);
-	padding: var(--spacing-1);
-	background: var(--l2-background);
-	border: 1px solid var(--l3-border);
-	border-radius: var(--radius-2);
-}
-
-.segment {
-	--button-height: 22px;
-	--button-padding: 0 var(--spacing-3);
-	--button-secondary-ghost-hover-foreground: var(--l2-foreground);
-	--button-variant-ghost-background-color: transparent;
-	border: none;
-	--button-border-radius: calc(var(--radius-2) - 1px);
-	transition:
-		background 120ms ease,
-		color 120ms ease;
-}
-
-.segment:not(.segmentActive):hover {
-	--button-secondary-ghost-hover-foreground: var(--l2-foreground-hover);
-	--button-variant-ghost-background-color: var(--l2-background);
-}
-
-.segmentIcon {
-	display: inline-flex;
-	align-items: center;
-}
-
-.segment.optAuto {
-	--button-secondary-ghost-hover-foreground: var(--l1-foreground);
-	--button-variant-ghost-background-color: var(--l3-background);
-}
-
-.segment.optGranted {
-	--button-secondary-ghost-hover-foreground: var(--success-foreground);
-	--button-variant-ghost-background-color: color-mix(
-		in srgb,
-		var(--accent-forest) 22%,
-		transparent
-	);
-}
-
-.segment.optDenied {
-	--button-secondary-ghost-hover-foreground: var(--danger-foreground);
-	--button-variant-ghost-background-color: color-mix(
-		in srgb,
-		var(--accent-cherry) 22%,
-		transparent
-	);
-}
-
-.segment.optDelay {
-	--button-secondary-ghost-hover-foreground: var(--warning-foreground);
-	--button-variant-ghost-background-color: color-mix(
-		in srgb,
-		var(--accent-amber) 22%,
-		transparent
-	);
-}
-
-.segment.optError {
-	--button-secondary-ghost-hover-foreground: var(--danger-foreground);
-	--button-variant-ghost-background-color: color-mix(
-		in srgb,
-		var(--accent-cherry) 22%,
-		transparent
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/OverrideControl.tsx

@@ -1,93 +0,0 @@
-import { Check, Clock, RotateCcw, X, Zap } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { OverrideState } from '../types';
-
-import styles from './OverrideControl.module.css';
-import { Button } from '@signozhq/ui/button';
-
-type OverrideControlProps = {
-	permission: BrandedPermission;
-	value: OverrideState;
-	onSelect: (permission: BrandedPermission, state: OverrideState) => void;
-};
-
-type OverrideOption = {
-	state: OverrideState;
-	label: string;
-	icon: React.ReactNode;
-	activeClassName: string;
-};
-
-const OVERRIDE_OPTIONS: OverrideOption[] = [
-	{
-		state: OverrideState.Reset,
-		label: 'Auto',
-		icon: <RotateCcw size={13} />,
-		activeClassName: styles.optAuto,
-	},
-	{
-		state: OverrideState.Granted,
-		label: 'Grant',
-		icon: <Check size={13} />,
-		activeClassName: styles.optGranted,
-	},
-	{
-		state: OverrideState.Denied,
-		label: 'Deny',
-		icon: <X size={13} />,
-		activeClassName: styles.optDenied,
-	},
-	{
-		state: OverrideState.Delay,
-		label: 'Delay',
-		icon: <Clock size={13} />,
-		activeClassName: styles.optDelay,
-	},
-	{
-		state: OverrideState.Error,
-		label: 'Error',
-		icon: <Zap size={13} />,
-		activeClassName: styles.optError,
-	},
-];
-
-export function OverrideControl({
-	permission,
-	value,
-	onSelect,
-}: OverrideControlProps): JSX.Element {
-	return (
-		<div className={styles.segmented}>
-			{OVERRIDE_OPTIONS.map((option) => {
-				const isActive = value === option.state;
-				return (
-					<Button
-						key={option.state}
-						type="button"
-						aria-pressed={isActive}
-						aria-label={option.label}
-						title={option.label}
-						className={cx(styles.segment, {
-							[styles.segmentActive]: isActive,
-							[option.activeClassName]: isActive,
-						})}
-						variant="ghost"
-						color="secondary"
-						onClick={(): void => onSelect(permission, option.state)}
-						data-testid={`override-${option.state}-${permission}`}
-					>
-						<div className={styles.segmentIcon}>{option.icon}</div>
-						{isActive && (
-							<Typography.Text as="span" size="small" weight="medium">
-								{option.label}
-							</Typography.Text>
-						)}
-					</Button>
-				);
-			})}
-		</div>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.module.css

@@ -1,68 +0,0 @@
-.permissionRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-6);
-	padding: var(--spacing-2);
-	border: 1px solid transparent;
-	border-radius: var(--radius-2);
-	cursor: pointer;
-	transition:
-		background 120ms ease,
-		border-color 120ms ease;
-}
-
-.permissionRow:hover {
-	background: var(--l2-background-hover);
-}
-
-/* Overridden rows carry a faint full border in the override color. */
-.permissionRow.rowGranted {
-	border-color: color-mix(in srgb, var(--accent-forest) 45%, transparent);
-}
-
-.permissionRow.rowDenied {
-	border-color: color-mix(in srgb, var(--accent-cherry) 45%, transparent);
-}
-
-.permissionRow.rowDelay {
-	border-color: color-mix(in srgb, var(--accent-amber) 45%, transparent);
-}
-
-.permissionRow.rowError {
-	border-color: color-mix(in srgb, var(--accent-cherry) 45%, transparent);
-}
-
-/* Keyboard selection wins over the override border. */
-.permissionRow.isSelected {
-	border-color: var(--primary);
-}
-
-.permissionInfo {
-	display: flex;
-	flex: 1 1 auto;
-	align-items: baseline;
-	gap: var(--spacing-2);
-	min-width: 0;
-}
-
-.relation {
-	flex: 0 0 auto;
-	--typography-color: var(--accent-primary);
-}
-
-.separator {
-	flex: 0 0 auto;
-}
-
-.object {
-	flex: 0 1 auto;
-	min-width: 0;
-}
-
-.permissionMeta {
-	display: flex;
-	flex: 0 0 auto;
-	align-items: center;
-	gap: var(--spacing-5);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.tsx

@@ -1,114 +0,0 @@
-import { Badge, BadgeColor } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import { memo, useCallback, useMemo } from 'react';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { parsePermission } from '../../hooks/useAuthZ/utils';
-import { OverrideState, type ObservedPermission } from '../types';
-
-import { OverrideControl } from './OverrideControl';
-
-import styles from './PermissionRow.module.css';
-
-type PermissionRowProps = {
-	observed: ObservedPermission;
-	override: OverrideState | undefined;
-	isSelected: boolean;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-	onSelect: () => void;
-};
-
-const ROW_OVERRIDE_CLASSES: Record<OverrideState, string | null> = {
-	[OverrideState.Reset]: null,
-	[OverrideState.Granted]: styles.rowGranted,
-	[OverrideState.Denied]: styles.rowDenied,
-	[OverrideState.Delay]: styles.rowDelay,
-	[OverrideState.Error]: styles.rowError,
-};
-
-export const PermissionRow = memo(function PermissionRow({
-	observed,
-	override,
-	isSelected,
-	onSetOverride,
-	onSelect,
-}: PermissionRowProps): JSX.Element {
-	const currentState = override ?? OverrideState.Reset;
-
-	const { relation, objectId } = useMemo(() => {
-		const parsed = parsePermission(observed.permission);
-		const separatorIndex = parsed.object.indexOf(':');
-		return {
-			relation: parsed.relation,
-			objectId:
-				separatorIndex === -1
-					? parsed.object
-					: parsed.object.slice(separatorIndex + 1),
-		};
-	}, [observed.permission]);
-
-	const handleSetOverride = useCallback(
-		(permission: BrandedPermission, state: OverrideState): void => {
-			onSelect();
-			onSetOverride(permission, state);
-		},
-		[onSelect, onSetOverride],
-	);
-
-	let apiColor: BadgeColor = 'secondary';
-	let apiLabel = 'API ?';
-	if (observed.apiValue === true) {
-		apiColor = 'success';
-		apiLabel = 'API ✓';
-	} else if (observed.apiValue === false) {
-		apiColor = 'error';
-		apiLabel = 'API ✗';
-	}
-
-	return (
-		<div
-			className={cx(styles.permissionRow, ROW_OVERRIDE_CLASSES[currentState], {
-				[styles.isSelected]: isSelected,
-			})}
-			data-testid={`permission-row-${observed.permission}`}
-		>
-			<div className={styles.permissionInfo}>
-				<Typography.Text
-					as="span"
-					size="small"
-					weight="medium"
-					className={styles.relation}
-				>
-					{relation}
-				</Typography.Text>
-				<Typography.Text
-					as="span"
-					size="small"
-					color="muted"
-					className={styles.separator}
-				>
-					:
-				</Typography.Text>
-				<Typography.Text
-					as="span"
-					size="small"
-					truncate={1}
-					className={styles.object}
-				>
-					{objectId}
-				</Typography.Text>
-			</div>
-			<div className={styles.permissionMeta}>
-				<Badge variant="outline" color={apiColor}>
-					{apiLabel}
-				</Badge>
-				<OverrideControl
-					permission={observed.permission}
-					value={currentState}
-					onSelect={handleSetOverride}
-				/>
-			</div>
-		</div>
-	);
-});

frontend/src/lib/authz/devtools/AuthZDevModal/useAuthZDevModalData.ts

@@ -1,172 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { parsePermission } from '../../hooks/useAuthZ/utils';
-import type { ObservedPermission, OverrideState } from '../types';
-
-type SelectItem = {
-	value: string;
-	label: string;
-};
-
-type PermissionGroup = {
-	resource: string;
-	items: BrandedPermission[];
-};
-
-type UseAuthZDevModalDataResult = {
-	search: string;
-	setSearch: (search: string) => void;
-	resourceFilter: string;
-	setResourceFilter: (filter: string) => void;
-	observedList: ObservedPermission[];
-	resourceFilterItems: SelectItem[];
-	filteredPermissions: BrandedPermission[];
-	groups: PermissionGroup[];
-	orderedPermissions: BrandedPermission[];
-	indexByPermission: Map<string, number>;
-	hasActiveFilter: boolean;
-	filteredOverrideCount: number;
-	overrideCount: number;
-};
-
-export function useAuthZDevModalData(
-	observed: Record<string, ObservedPermission>,
-	overrides: Record<string, OverrideState>,
-): UseAuthZDevModalDataResult {
-	const [search, setSearch] = useState('');
-	const [resourceFilter, setResourceFilter] = useState<string>('all');
-
-	const observedList = useMemo(
-		() =>
-			Object.values(observed).sort((a, b) =>
-				a.permission.localeCompare(b.permission),
-			),
-		[observed],
-	);
-
-	const resources = useMemo(() => {
-		const resourceSet = new Set<string>();
-		for (const obs of observedList) {
-			const { object } = parsePermission(obs.permission);
-			const resource = object.split(':')[0];
-			resourceSet.add(resource);
-		}
-		return Array.from(resourceSet).sort();
-	}, [observedList]);
-
-	const resourceFilterItems = useMemo<SelectItem[]>(
-		() => [
-			{ value: 'all', label: 'All resources' },
-			...resources.map((resource) => ({
-				value: resource,
-				label: resource,
-			})),
-		],
-		[resources],
-	);
-
-	const filteredPermissions = useMemo(() => {
-		let filtered = observedList;
-
-		if (search) {
-			const searchLower = search.toLowerCase();
-			filtered = filtered.filter((obs) =>
-				obs.permission.toLowerCase().includes(searchLower),
-			);
-		}
-
-		if (resourceFilter !== 'all') {
-			filtered = filtered.filter((obs) => {
-				const { object } = parsePermission(obs.permission);
-				const resource = object.split(':')[0];
-				return resource === resourceFilter;
-			});
-		}
-
-		return filtered.map((obs) => obs.permission);
-	}, [observedList, search, resourceFilter]);
-
-	const { groups, orderedPermissions } = useMemo(() => {
-		const groupMap = new Map<string, BrandedPermission[]>();
-		for (const permission of filteredPermissions) {
-			const { object } = parsePermission(permission);
-			const resource = object.split(':')[0] || 'other';
-			const bucket = groupMap.get(resource);
-			if (bucket) {
-				bucket.push(permission);
-			} else {
-				groupMap.set(resource, [permission]);
-			}
-		}
-
-		const sortItems = (items: BrandedPermission[]): BrandedPermission[] =>
-			[...items].sort((a, b) => {
-				const objA = parsePermission(a).object;
-				const objB = parsePermission(b).object;
-				const idA = objA.split(':')[1] ?? '';
-				const idB = objB.split(':')[1] ?? '';
-				const isWildcardA = idA === '*';
-				const isWildcardB = idB === '*';
-
-				// Wildcards first
-				if (isWildcardA && !isWildcardB) {
-					return -1;
-				}
-				if (!isWildcardA && isWildcardB) {
-					return 1;
-				}
-
-				// Then by object ID, then by full permission
-				const idCompare = idA.localeCompare(idB);
-				if (idCompare !== 0) {
-					return idCompare;
-				}
-				return a.localeCompare(b);
-			});
-
-		const sortedGroups = Array.from(groupMap, ([resource, items]) => ({
-			resource,
-			items: sortItems(items),
-		})).sort((a, b) => a.resource.localeCompare(b.resource));
-		return {
-			groups: sortedGroups,
-			orderedPermissions: sortedGroups.flatMap((group) => group.items),
-		};
-	}, [filteredPermissions]);
-
-	const indexByPermission = useMemo(() => {
-		const map = new Map<string, number>();
-		orderedPermissions.forEach((permission, index) => {
-			map.set(permission, index);
-		});
-		return map;
-	}, [orderedPermissions]);
-
-	const hasActiveFilter = search !== '' || resourceFilter !== 'all';
-
-	const filteredOverrideCount = useMemo(() => {
-		if (!hasActiveFilter) {
-			return Object.keys(overrides).length;
-		}
-		return filteredPermissions.filter((p) => p in overrides).length;
-	}, [hasActiveFilter, overrides, filteredPermissions]);
-
-	const overrideCount = Object.keys(overrides).length;
-
-	return {
-		search,
-		setSearch,
-		resourceFilter,
-		setResourceFilter,
-		observedList,
-		resourceFilterItems,
-		filteredPermissions,
-		groups,
-		orderedPermissions,
-		indexByPermission,
-		hasActiveFilter,
-		filteredOverrideCount,
-		overrideCount,
-	};
-}

frontend/src/lib/authz/devtools/AuthZDevModal/useModalKeyboard.ts

@@ -1,174 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { OverrideState, OVERRIDE_CYCLE } from '../types';
-
-type UseModalKeyboardOptions = {
-	permissions: BrandedPermission[];
-	overrides: Record<string, OverrideState>;
-	onCycle: (permission: BrandedPermission) => void;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-	onClose: () => void;
-	searchInputRef: React.RefObject<HTMLInputElement | null>;
-};
-
-type UseModalKeyboardResult = {
-	selectedIndex: number;
-	setSelectedIndex: (index: number) => void;
-};
-
-type KeyContext = {
-	permissions: BrandedPermission[];
-	overrides: Record<string, OverrideState>;
-	selectedIndex: number;
-	setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
-	onCycle: (permission: BrandedPermission) => void;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-};
-
-const ARROW_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);
-
-const NUMBER_KEY_INDEX: Record<string, number> = {
-	'1': 0,
-	'2': 1,
-	'3': 2,
-	'4': 3,
-	'5': 4,
-};
-
-function stepOverrideState(
-	current: OverrideState,
-	direction: number,
-): OverrideState {
-	const currentIndex = OVERRIDE_CYCLE.indexOf(current);
-	const nextIndex =
-		(currentIndex + direction + OVERRIDE_CYCLE.length) % OVERRIDE_CYCLE.length;
-	return OVERRIDE_CYCLE[nextIndex];
-}
-
-// Arrow keys stay active even while the search input is focused so the list can
-// be driven without leaving the search field.
-function handleArrowKey(key: string, ctx: KeyContext): void {
-	if (key === 'ArrowDown') {
-		ctx.setSelectedIndex((prev) =>
-			Math.min(prev + 1, ctx.permissions.length - 1),
-		);
-		return;
-	}
-	if (key === 'ArrowUp') {
-		ctx.setSelectedIndex((prev) => Math.max(prev - 1, 0));
-		return;
-	}
-	const selected = ctx.permissions[ctx.selectedIndex];
-	if (!selected) {
-		return;
-	}
-	const direction = key === 'ArrowLeft' ? -1 : 1;
-	ctx.onSetOverride(
-		selected,
-		stepOverrideState(ctx.overrides[selected] ?? OverrideState.Reset, direction),
-	);
-}
-
-// Number and space/enter shortcuts type into the search field, so they only run
-// when it is not focused. Returns whether the key was handled.
-function handleActionKey(key: string, ctx: KeyContext): boolean {
-	const selected = ctx.permissions[ctx.selectedIndex];
-	const numberIndex = NUMBER_KEY_INDEX[key];
-	if (numberIndex !== undefined) {
-		if (selected) {
-			ctx.onSetOverride(selected, OVERRIDE_CYCLE[numberIndex]);
-		}
-		return true;
-	}
-	if (key === ' ' || key === 'Enter') {
-		if (selected) {
-			ctx.onCycle(selected);
-		}
-		return true;
-	}
-	return false;
-}
-
-export function useModalKeyboard({
-	permissions,
-	overrides,
-	onCycle,
-	onSetOverride,
-	onClose,
-	searchInputRef,
-}: UseModalKeyboardOptions): UseModalKeyboardResult {
-	// Start with no selection (-1) to avoid accidental override changes from
-	// Enter keypress that opened the modal also triggering cycleOverride.
-	const [selectedIndex, setSelectedIndex] = useState(-1);
-
-	const handleKeyDown = useCallback(
-		(e: KeyboardEvent) => {
-			const isSearchFocused = document.activeElement === searchInputRef.current;
-
-			if (e.key === 'Escape') {
-				e.preventDefault();
-				onClose();
-				return;
-			}
-
-			if (e.key === '/') {
-				if (!isSearchFocused) {
-					e.preventDefault();
-					searchInputRef.current?.focus();
-				}
-				return;
-			}
-
-			const ctx: KeyContext = {
-				permissions,
-				overrides,
-				selectedIndex,
-				setSelectedIndex,
-				onCycle,
-				onSetOverride,
-			};
-
-			if (ARROW_KEYS.has(e.key)) {
-				e.preventDefault();
-				handleArrowKey(e.key, ctx);
-				return;
-			}
-
-			if (isSearchFocused) {
-				return;
-			}
-
-			if (handleActionKey(e.key, ctx)) {
-				e.preventDefault();
-			}
-		},
-		[
-			permissions,
-			overrides,
-			selectedIndex,
-			onCycle,
-			onSetOverride,
-			onClose,
-			searchInputRef,
-		],
-	);
-
-	useEffect((): (() => void) => {
-		window.addEventListener('keydown', handleKeyDown);
-		return (): void => {
-			window.removeEventListener('keydown', handleKeyDown);
-		};
-	}, [handleKeyDown]);
-
-	useEffect((): void => {
-		if (selectedIndex >= permissions.length && permissions.length > 0) {
-			setSelectedIndex(permissions.length - 1);
-		}
-	}, [permissions.length, selectedIndex]);
-
-	return {
-		selectedIndex,
-		setSelectedIndex,
-	};
-}

frontend/src/lib/authz/devtools/types.ts

@@ -1,46 +0,0 @@
-import type { BrandedPermission } from '../hooks/useAuthZ/types';
-
-export enum OverrideState {
-	Granted = 'granted',
-	Denied = 'denied',
-	Delay = 'delay',
-	Error = 'error',
-	Reset = 'reset',
-}
-
-export type ObservedPermission = {
-	permission: BrandedPermission;
-	apiValue: boolean | null;
-	lastSeen: number;
-};
-
-export type PermissionOverride = {
-	permission: BrandedPermission;
-	state: OverrideState;
-};
-
-export type AuthZDevStore = {
-	isModalOpen: boolean;
-	observed: Record<string, ObservedPermission>;
-	overrides: Record<string, OverrideState>;
-
-	openModal: () => void;
-	closeModal: () => void;
-	toggleModal: () => void;
-
-	registerObserved: (permission: BrandedPermission, apiValue: boolean) => void;
-	setOverride: (permission: BrandedPermission, state: OverrideState) => void;
-	clearOverride: (permission: BrandedPermission) => void;
-	clearAllOverrides: (permissions?: BrandedPermission[]) => void;
-	grantAll: (permissions?: BrandedPermission[]) => void;
-	denyAll: (permissions?: BrandedPermission[]) => void;
-	cycleOverride: (permission: BrandedPermission) => void;
-};
-
-export const OVERRIDE_CYCLE: OverrideState[] = [
-	OverrideState.Reset,
-	OverrideState.Granted,
-	OverrideState.Denied,
-	OverrideState.Delay,
-	OverrideState.Error,
-];

frontend/src/lib/authz/devtools/useAuthZDevStore.ts

@@ -1,137 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-import type { BrandedPermission } from '../hooks/useAuthZ/types';
-import { OverrideState, OVERRIDE_CYCLE, type AuthZDevStore } from './types';
-import { getScopedKey } from 'utils/storage';
-
-export const useAuthZDevStore = create<AuthZDevStore>()(
-	persist(
-		(set, get) => ({
-			isModalOpen: false,
-			observed: {},
-			overrides: {},
-
-			openModal: (): void => {
-				set({ isModalOpen: true });
-			},
-
-			closeModal: (): void => {
-				set({ isModalOpen: false });
-			},
-
-			toggleModal: (): void => {
-				set((state) => ({ isModalOpen: !state.isModalOpen }));
-			},
-
-			registerObserved: (
-				permission: BrandedPermission,
-				apiValue: boolean,
-			): void => {
-				set((state) => ({
-					observed: {
-						...state.observed,
-						[permission]: {
-							permission,
-							apiValue,
-							lastSeen: Date.now(),
-						},
-					},
-				}));
-			},
-
-			setOverride: (permission: BrandedPermission, state: OverrideState): void => {
-				if (state === OverrideState.Reset) {
-					get().clearOverride(permission);
-					return;
-				}
-				set((s) => ({
-					overrides: {
-						...s.overrides,
-						[permission]: state,
-					},
-				}));
-			},
-
-			clearOverride: (permission: BrandedPermission): void => {
-				set((state) => {
-					const { [permission]: _, ...rest } = state.overrides;
-					return { overrides: rest };
-				});
-			},
-
-			clearAllOverrides: (permissions?: BrandedPermission[]): void => {
-				if (permissions) {
-					set((state) => {
-						const newOverrides = { ...state.overrides };
-						for (const permission of permissions) {
-							delete newOverrides[permission];
-						}
-						return { overrides: newOverrides };
-					});
-				} else {
-					set({ overrides: {} });
-				}
-			},
-
-			grantAll: (permissions?: BrandedPermission[]): void => {
-				set((state) => {
-					const keys = permissions ?? Object.keys(state.observed);
-					const newOverrides: Record<string, OverrideState> = {
-						...state.overrides,
-					};
-					for (const key of keys) {
-						newOverrides[key] = OverrideState.Granted;
-					}
-					return { overrides: newOverrides };
-				});
-			},
-
-			denyAll: (permissions?: BrandedPermission[]): void => {
-				set((state) => {
-					const keys = permissions ?? Object.keys(state.observed);
-					const newOverrides: Record<string, OverrideState> = {
-						...state.overrides,
-					};
-					for (const key of keys) {
-						newOverrides[key] = OverrideState.Denied;
-					}
-					return { overrides: newOverrides };
-				});
-			},
-
-			cycleOverride: (permission: BrandedPermission): void => {
-				const currentOverride = get().overrides[permission] ?? OverrideState.Reset;
-				const currentIndex = OVERRIDE_CYCLE.indexOf(currentOverride);
-				const nextIndex = (currentIndex + 1) % OVERRIDE_CYCLE.length;
-				const nextState = OVERRIDE_CYCLE[nextIndex];
-				get().setOverride(permission, nextState);
-			},
-		}),
-		{
-			name: `@signoz/${getScopedKey('authz-dev-overrides')}`,
-			partialize: (state) => {
-				// Clear apiValue for permissions without active override (auto mode)
-				// since the API value can change between sessions
-				const observed: typeof state.observed = {};
-				for (const [key, obs] of Object.entries(state.observed)) {
-					observed[key] = {
-						...obs,
-						apiValue: key in state.overrides ? obs.apiValue : null,
-					};
-				}
-				return {
-					observed,
-					overrides: state.overrides,
-				};
-			},
-		},
-	),
-);
-
-export const openAuthZDevModal = (): void =>
-	useAuthZDevStore.getState().openModal();
-export const closeAuthZDevModal = (): void =>
-	useAuthZDevStore.getState().closeModal();
-export const toggleAuthZDevModal = (): void =>
-	useAuthZDevStore.getState().toggleModal();

frontend/src/lib/authz/devtools/useAuthZQueryInvalidation.ts

@@ -1,28 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useQueryClient } from 'react-query';
-
-import type { OverrideState } from './types';
-
-type Overrides = Record<string, OverrideState>;
-
-export function useAuthZQueryInvalidation(overrides: Overrides): void {
-	const queryClient = useQueryClient();
-	const prevOverridesRef = useRef<Overrides>(overrides);
-
-	useEffect(() => {
-		const prevOverrides = prevOverridesRef.current;
-		prevOverridesRef.current = overrides;
-
-		const allKeys = new Set([
-			...Object.keys(prevOverrides),
-			...Object.keys(overrides),
-		]);
-
-		for (const key of allKeys) {
-			if (prevOverrides[key] !== overrides[key]) {
-				// Reset query to initial state and trigger refetch for active observers
-				void queryClient.resetQueries(['authz', key]);
-			}
-		}
-	}, [overrides, queryClient]);
-}

frontend/src/lib/authz/hooks/useAuthZ/types.ts

@@ -89,13 +89,5 @@ export type UseAuthZResult = {
 	isFetching: boolean;
 	error: Error | null;
 	permissions: AuthZCheckResponse | null;
-	/**
-	 * True if every check is granted. False while loading or on error.
-	 */
-	allowed: boolean;
-	/**
-	 * Checks that resolved as not granted (empty while loading/error).
-	 */
-	deniedPermissions: BrandedPermission[];
 	refetchPermissions: () => void;
 };

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

@@ -1,6 +1,5 @@
 import { ReactElement } from 'react';
-import { renderHook, waitFor, act } from '@testing-library/react';
-import { useQueryClient } from 'react-query';
+import { renderHook, waitFor } from '@testing-library/react';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { AllTheProviders } from 'tests/test-utils';
@@ -47,16 +46,12 @@ describe('useAuthZ', () => {
 
 		expect(result.current.isLoading).toBe(true);
 		expect(result.current.permissions).toBeNull();
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([]);
 
 		await waitFor(() => {
 			expect(result.current.isLoading).toBe(false);
 		});
 
 		expect(result.current.permissions).toStrictEqual(expectedResponse);
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([permission2]);
 	});
 
 	it('should return error and null permissions when API errors', async () => {
@@ -78,89 +73,6 @@ describe('useAuthZ', () => {
 
 		expect(result.current.error).not.toBeNull();
 		expect(result.current.permissions).toBeNull();
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([]);
-	});
-
-	it('should set allowed to true when all permissions are granted', async () => {
-		const permission1 = buildPermission('read', 'role:*');
-		const permission2 = buildPermission('update', 'role:123');
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [true, true])),
-				);
-			}),
-		);
-
-		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
-			wrapper,
-		});
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(result.current.allowed).toBe(true);
-		expect(result.current.deniedPermissions).toStrictEqual([]);
-	});
-
-	it('should collect all denied permissions when multiple are denied', async () => {
-		const permission1 = buildPermission('read', 'role:*');
-		const permission2 = buildPermission('update', 'role:123');
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [false, false])),
-				);
-			}),
-		);
-
-		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
-			wrapper,
-		});
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([
-			permission1,
-			permission2,
-		]);
-	});
-
-	it('should not fetch when enabled is false', async () => {
-		let requestCount = 0;
-		const permission = buildPermission('read', 'role:*');
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				requestCount += 1;
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		const { result } = renderHook(
-			() => useAuthZ([permission], { enabled: false }),
-			{ wrapper },
-		);
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(requestCount).toBe(0);
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.permissions).toStrictEqual({});
 	});
 
 	it('should refetch when permissions array changes', async () => {
@@ -562,120 +474,3 @@ describe('useAuthZ', () => {
 		expect(result2.current.permissions).not.toHaveProperty(permission1);
 	});
 });
-
-describe('useAuthZ cache invalidation', () => {
-	it('should re-render with updated data when query is invalidated', async () => {
-		const permission = buildPermission('read', 'role:*');
-
-		let requestCount = 0;
-		let shouldGrant = true;
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				requestCount++;
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [shouldGrant])),
-				);
-			}),
-		);
-
-		const { result } = renderHook(
-			() => {
-				const queryClient = useQueryClient();
-				const authz = useAuthZ([permission]);
-				return { authz, queryClient };
-			},
-			{ wrapper },
-		);
-
-		await waitFor(() => {
-			expect(result.current.authz.isLoading).toBe(false);
-		});
-
-		expect(requestCount).toBe(1);
-		expect(result.current.authz.allowed).toBe(true);
-		expect(result.current.authz.permissions).toStrictEqual({
-			[permission]: { isGranted: true },
-		});
-
-		// Change server response and reset query (forces refetch)
-		shouldGrant = false;
-
-		await act(async () => {
-			await result.current.queryClient.resetQueries(['authz', permission]);
-		});
-
-		await waitFor(() => {
-			expect(result.current.authz.allowed).toBe(false);
-		});
-
-		expect(requestCount).toBe(2);
-		expect(result.current.authz.permissions).toStrictEqual({
-			[permission]: { isGranted: false },
-		});
-	});
-
-	it('should re-render all components using the same permission when invalidated', async () => {
-		const permission = buildPermission('update', 'role:123');
-
-		let requestCount = 0;
-		let shouldGrant = true;
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				requestCount++;
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [shouldGrant])),
-				);
-			}),
-		);
-
-		// Two separate hooks using the same permission
-		const { result: result1 } = renderHook(
-			() => {
-				const queryClient = useQueryClient();
-				const authz = useAuthZ([permission]);
-				return { authz, queryClient };
-			},
-			{ wrapper },
-		);
-
-		const { result: result2 } = renderHook(() => useAuthZ([permission]), {
-			wrapper,
-		});
-
-		await waitFor(() => {
-			expect(result1.current.authz.isLoading).toBe(false);
-			expect(result2.current.isLoading).toBe(false);
-		});
-
-		// Both should show granted, single batched request
-		expect(requestCount).toBe(1);
-		expect(result1.current.authz.allowed).toBe(true);
-		expect(result2.current.allowed).toBe(true);
-
-		// Change server response and reset query (forces refetch)
-		shouldGrant = false;
-
-		await act(async () => {
-			await result1.current.queryClient.resetQueries(['authz', permission]);
-		});
-
-		// Both hooks should update
-		await waitFor(() => {
-			expect(result1.current.authz.allowed).toBe(false);
-			expect(result2.current.allowed).toBe(false);
-		});
-
-		expect(result1.current.authz.permissions).toStrictEqual({
-			[permission]: { isGranted: false },
-		});
-		expect(result2.current.permissions).toStrictEqual({
-			[permission]: { isGranted: false },
-		});
-	});
-});

frontend/src/lib/authz/hooks/useAuthZ/useAuthZ.tsx

@@ -1,15 +1,13 @@
 import { useCallback, useMemo } from 'react';
 import { useQueries } from 'react-query';
-import { isAxiosError } from 'axios';
 import { authzCheck } from 'api/generated/services/authz';
 import type {
 	CoretypesObjectDTO,
 	AuthtypesTransactionDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { IS_DEV, MODE } from 'lib/env';
 
 import { AUTHZ_CACHE_TIME, SINGLE_FLIGHT_WAIT_TIME_MS } from './constants';
-import type {
+import {
 	AuthZCheckResponse,
 	BrandedPermission,
 	UseAuthZOptions,
@@ -19,59 +17,6 @@ import {
 	gettableTransactionToPermission,
 	permissionToTransactionDto,
 } from './utils';
-import { OverrideState } from '../../devtools/types';
-
-let devStoreRef:
-	| typeof import('../../devtools/useAuthZDevStore').useAuthZDevStore
-	| null = null;
-
-if (IS_DEV) {
-	void import('../../devtools/useAuthZDevStore').then((mod) => {
-		devStoreRef = mod.useAuthZDevStore;
-		return mod;
-	});
-}
-
-const DEV_DELAY_MS = 2000;
-
-function getDevOverride(permission: BrandedPermission): OverrideState | null {
-	if (!IS_DEV || !devStoreRef) {
-		return null;
-	}
-	return devStoreRef.getState().overrides[permission] ?? null;
-}
-
-async function applyDevOverrideToQuery(
-	permission: BrandedPermission,
-	fetchFn: () => Promise<AuthZCheckResponse>,
-): Promise<AuthZCheckResponse> {
-	const override = getDevOverride(permission);
-
-	if (override === OverrideState.Error) {
-		throw new Error(`[AuthZ DevTools] Simulated error for: ${permission}`);
-	}
-
-	if (override === OverrideState.Delay) {
-		await new Promise((resolve) => setTimeout(resolve, DEV_DELAY_MS));
-	}
-
-	const response = await fetchFn();
-
-	if (IS_DEV && devStoreRef) {
-		const apiValue = response[permission]?.isGranted ?? false;
-		devStoreRef.getState().registerObserved(permission, apiValue);
-	}
-
-	if (override === OverrideState.Granted) {
-		return { [permission]: { isGranted: true } };
-	}
-
-	if (override === OverrideState.Denied) {
-		return { [permission]: { isGranted: false } };
-	}
-
-	return response;
-}
 
 let ctx: Promise<AuthZCheckResponse> | null;
 let pendingPermissions: BrandedPermission[] = [];
@@ -82,11 +27,10 @@ function dispatchPermission(
 	pendingPermissions.push(permission);
 
 	if (!ctx) {
-		let promiseResolve: (v: AuthZCheckResponse) => void,
-			promiseReject: (reason?: unknown) => void;
-		ctx = new Promise<AuthZCheckResponse>((resolve, reject) => {
-			promiseResolve = resolve;
-			promiseReject = reject;
+		let resolve: (v: AuthZCheckResponse) => void, reject: (reason?: any) => void;
+		ctx = new Promise<AuthZCheckResponse>((r, re) => {
+			resolve = r;
+			reject = re;
 		});
 
 		setTimeout(() => {
@@ -94,9 +38,7 @@ function dispatchPermission(
 			pendingPermissions = [];
 			ctx = null;
 
-			fetchManyPermissions(copiedPermissions)
-				.then(promiseResolve)
-				.catch(promiseReject);
+			fetchManyPermissions(copiedPermissions).then(resolve).catch(reject);
 		}, SINGLE_FLIGHT_WAIT_TIME_MS);
 	}
 
@@ -143,50 +85,19 @@ export function useAuthZ(
 			return {
 				queryKey: ['authz', permission],
 				cacheTime: AUTHZ_CACHE_TIME,
-				staleTime: AUTHZ_CACHE_TIME,
-				// Keep errored state in cache instead of refetching when new observers subscribe
-				retryOnMount: false,
-				// Only override retry in non-test mode to avoid interfering with test-utils QueryClient defaults
-				...(MODE !== 'test' && {
-					retry: (failureCount: number, error: unknown): boolean => {
-						// Don't retry simulated dev errors - they will always fail
-						if (
-							error instanceof Error &&
-							error.message.includes('[AuthZ DevTools]')
-						) {
-							return false;
-						}
-						// Don't retry server errors (5xx) - they won't recover
-						if (
-							isAxiosError(error) &&
-							error.response?.status &&
-							error.response.status >= 500
-						) {
-							return false;
-						}
-						return failureCount < 3;
-					},
-				}),
 				refetchOnMount: false,
 				refetchIntervalInBackground: false,
 				refetchOnWindowFocus: false,
 				refetchOnReconnect: true,
 				enabled,
 				queryFn: async (): Promise<AuthZCheckResponse> => {
-					const fetchFn = async (): Promise<AuthZCheckResponse> => {
-						const response = await dispatchPermission(permission);
-						return {
-							[permission]: {
-								isGranted: response[permission].isGranted,
-							},
-						};
+					const response = await dispatchPermission(permission);
+
+					return {
+						[permission]: {
+							isGranted: response[permission].isGranted,
+						},
 					};
-
-					if (IS_DEV) {
-						return applyDevOverrideToQuery(permission, fetchFn);
-					}
-
-					return fetchFn();
 				},
 			};
 		}),
@@ -196,7 +107,6 @@ export function useAuthZ(
 		() => queryResults.some((q) => q.isLoading),
 		[queryResults],
 	);
-
 	const isFetching = useMemo(
 		() => queryResults.some((q) => q.isFetching),
 		[queryResults],
@@ -229,31 +139,15 @@ export function useAuthZ(
 
 	const refetchPermissions = useCallback(() => {
 		for (const query of queryResults) {
-			void query.refetch();
+			query.refetch();
 		}
 	}, [queryResults]);
 
-	const allowed = useMemo(() => {
-		if (isLoading || error || !data) {
-			return false;
-		}
-		return permissions.every((check) => data[check]?.isGranted === true);
-	}, [permissions, data, isLoading, error]);
-
-	const deniedPermissions = useMemo(() => {
-		if (!data) {
-			return [];
-		}
-		return permissions.filter((check) => data[check]?.isGranted !== true);
-	}, [permissions, data]);
-
 	return {
 		isLoading,
 		isFetching,
 		error,
 		permissions: data ?? null,
-		allowed,
-		deniedPermissions,
 		refetchPermissions,
 	};
 }

frontend/src/lib/authz/utils/authz-test-utils.ts

@@ -168,8 +168,6 @@ export function mockUseAuthZGrantAll(
 		permissions: Object.fromEntries(
 			permissions.map((p) => [p, { isGranted: true }]),
 		) as UseAuthZResult['permissions'],
-		allowed: true,
-		deniedPermissions: [],
 		refetchPermissions: jest.fn(),
 	};
 }
@@ -185,8 +183,6 @@ export function mockUseAuthZDenyAll(
 		permissions: Object.fromEntries(
 			permissions.map((p) => [p, { isGranted: false }]),
 		) as UseAuthZResult['permissions'],
-		allowed: false,
-		deniedPermissions: permissions,
 		refetchPermissions: jest.fn(),
 	};
 }
@@ -197,23 +193,16 @@ export function mockUseAuthZGrantByPrefix(
 	permissions: BrandedPermission[],
 	options?: UseAuthZOptions,
 ) => UseAuthZResult {
-	return (permissions, _options) => {
-		const denied = permissions.filter(
-			(p) => !prefixes.some((prefix) => p.startsWith(prefix)),
-		);
-		return {
-			isLoading: false,
-			isFetching: false,
-			error: null,
-			permissions: Object.fromEntries(
-				permissions.map((p) => [
-					p,
-					{ isGranted: prefixes.some((prefix) => p.startsWith(prefix)) },
-				]),
-			) as UseAuthZResult['permissions'],
-			allowed: denied.length === 0,
-			deniedPermissions: denied,
-			refetchPermissions: jest.fn(),
-		};
-	};
+	return (permissions, _options) => ({
+		isLoading: false,
+		isFetching: false,
+		error: null,
+		permissions: Object.fromEntries(
+			permissions.map((p) => [
+				p,
+				{ isGranted: prefixes.some((prefix) => p.startsWith(prefix)) },
+			]),
+		) as UseAuthZResult['permissions'],
+		refetchPermissions: jest.fn(),
+	});
 }

frontend/src/lib/env.ts

@@ -1,3 +0,0 @@
-export const IS_DEV = import.meta.env.DEV;
-export const IS_PROD = import.meta.env.PROD;
-export const MODE = import.meta.env.MODE;

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

@@ -20,23 +20,12 @@
 	}
 
 	&.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 {
-			.resizable-box__content {
-				display: flex;
-				flex-direction: column;
-			}
-
-			.quick-filters-container {
-				flex: 1;
-				min-height: 0;
-			}
+			width: 260px;
 		}
 
 		.all-errors-right-section {
-			flex: 1;
-			min-width: 0;
+			width: calc(100% - 260px);
 		}
 	}
 }

frontend/src/pages/AllErrors/index.tsx

@@ -18,18 +18,12 @@ 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();
@@ -61,38 +55,17 @@ 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 && (
-				<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"
-				>
+				<section className={cx('all-errors-quick-filter-section')}>
 					<QuickFilters
 						className="qf-exceptions"
 						source={QuickFiltersSource.EXCEPTIONS}
 						signal={SignalType.EXCEPTIONS}
 						handleFilterVisibilityChange={handleFilterVisibilityChange}
 					/>
-				</ResizableBox>
+				</section>
 			)}
 			<section
 				className={cx(

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.module.scss

@@ -5,9 +5,3 @@
 	justify-content: flex-end;
 	gap: 12px;
 }
-
-/* Actions / Configure / Edit-as-JSON: a flat l3 outline — no depth/shadow. */
-.toolbarButton {
-	border: 1px solid var(--l3-border) !important;
-	box-shadow: none !important;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { generatePath } from 'react-router-dom';
 import {
@@ -59,8 +59,6 @@ function DashboardActions({
 	onOpenRename,
 }: DashboardActionsProps): JSX.Element {
 	const canEdit = useDashboardStore((s) => s.isEditable);
-	const settingsRequest = useDashboardStore((s) => s.settingsRequest);
-	const clearSettingsRequest = useDashboardStore((s) => s.clearSettingsRequest);
 	const { user } = useAppContext();
 	const { safeNavigate } = useSafeNavigate();
 	const { showErrorModal } = useErrorModal();
@@ -74,14 +72,6 @@ function DashboardActions({
 	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
 	const deleteDashboardMutation = useDeleteDashboard(dashboard.id);
 
-	// Open the settings drawer when something in the tree requests it (e.g. the
-	// variables bar's "Add variable" button).
-	useEffect(() => {
-		if (settingsRequest) {
-			setIsSettingsDrawerOpen(true);
-		}
-	}, [settingsRequest]);
-
 	const { addSection, isSaving: isAddingSection } = useAddSection({
 		layouts: dashboard.spec.layouts,
 	});
@@ -211,7 +201,6 @@ function DashboardActions({
 					variant="solid"
 					color="secondary"
 					size="md"
-					className={styles.toolbarButton}
 					prefix={<Grid3X3 size="md" />}
 					testId="options"
 				>
@@ -223,7 +212,6 @@ function DashboardActions({
 					<Button
 						variant="solid"
 						color="secondary"
-						className={styles.toolbarButton}
 						prefix={<Configure size="md" />}
 						testId="show-drawer"
 						onClick={(): void => setIsSettingsDrawerOpen(true)}
@@ -234,11 +222,7 @@ function DashboardActions({
 					<SettingsDrawer
 						drawerTitle="Dashboard Configuration"
 						isOpen={isSettingsDrawerOpen}
-						destroyOnClose
-						onClose={(): void => {
-							setIsSettingsDrawerOpen(false);
-							clearSettingsRequest();
-						}}
+						onClose={(): void => setIsSettingsDrawerOpen(false)}
 					>
 						<DashboardSettings dashboard={dashboard} />
 					</SettingsDrawer>
@@ -247,7 +231,6 @@ function DashboardActions({
 			<Button
 				variant="solid"
 				color="secondary"
-				className={styles.toolbarButton}
 				prefix={<Braces size="md" />}
 				testId="edit-json"
 				onClick={(): void => setIsJsonEditorOpen(true)}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.module.scss

@@ -32,22 +32,6 @@
 	cursor: help;
 }
 
-.descriptionTooltip {
-	display: block;
-	overflow-wrap: anywhere;
-	/* Preserve author-entered line breaks in the description. */
-	white-space: pre-wrap;
-
-	a {
-		color: var(--accent-primary);
-		text-decoration: underline;
-
-		&:hover {
-			text-decoration: none;
-		}
-	}
-}
-
 .publicLink {
 	display: inline-flex;
 	align-items: center;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.tsx

@@ -14,12 +14,10 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { isEmpty } from 'lodash-es';
-import { linkifyText } from 'utils/linkifyText';
 import { openInNewTab } from 'utils/navigation';
 
 import styles from './DashboardInfo.module.scss';
 import { useVisibleTagCount } from './useVisibleTagCount';
-import { DASHBOARD_NAME_MAX_LENGTH } from '../../constants';
 import { useDashboardStore } from '../../store/useDashboardStore';
 
 interface DashboardInfoProps {
@@ -100,7 +98,7 @@ function DashboardInfo({
 						autoFocus
 						value={draft}
 						testId="dashboard-title-input"
-						maxLength={DASHBOARD_NAME_MAX_LENGTH}
+						maxLength={120}
 						className={styles.dashboardTitleInput}
 						onChange={(e): void => onDraftChange(e.target.value)}
 						onKeyDown={onKeyDown}
@@ -145,14 +143,7 @@ function DashboardInfo({
 			)}
 
 			{hasDescription && (
-				<TooltipSimple
-					side="bottom"
-					title={
-						<span className={styles.descriptionTooltip}>
-							{linkifyText(description)}
-						</span>
-					}
-				>
+				<TooltipSimple title={description} disableHoverableContent>
 					<SolidInfoCircle
 						className={styles.descriptionIcon}
 						size={14}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorDrawer.module.scss

@@ -48,13 +48,6 @@
 	gap: 12px;
 }
 
-.footerStatus {
-	display: flex;
-	min-width: 0;
-	flex-direction: column;
-	gap: 2px;
-}
-
 .validation {
 	min-width: 0;
 	overflow: hidden;
@@ -64,32 +57,6 @@
 	white-space: nowrap;
 }
 
-.danglingWarning {
-	display: flex;
-	min-width: 0;
-	align-items: center;
-	gap: 4px;
-	color: var(--bg-amber-400);
-	font-size: 12px;
-}
-
-.warningIcon {
-	flex: none;
-}
-
-.warningText {
-	overflow: hidden;
-	color: var(--bg-amber-400);
-	font-size: 12px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-// Above the JSON drawer (antd Drawer sits at ~1100) so the id list is visible.
-.warningTooltip {
-	z-index: 1101;
-}
-
 .validationValid {
 	color: var(--bg-forest-400);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorDrawer.tsx

@@ -1,8 +1,6 @@
 import { KeyboardEvent, useCallback } from 'react';
 import MEditor from '@monaco-editor/react';
-import { TriangleAlert } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { Drawer } from 'antd';
@@ -28,18 +26,8 @@ function JsonEditorDrawer({
 }: JsonEditorDrawerProps): JSX.Element {
 	const [, copyToClipboard] = useCopyToClipboard();
 
-	const {
-		draft,
-		setDraft,
-		validity,
-		isDirty,
-		isSaving,
-		danglingPanelIds,
-		missingPanelRefs,
-		format,
-		reset,
-		apply,
-	} = useJsonEditor({ dashboard, isOpen, onApplied: onClose });
+	const { draft, setDraft, validity, isDirty, isSaving, format, reset, apply } =
+		useJsonEditor({ dashboard, isOpen, onApplied: onClose });
 
 	const onCopy = useCallback((): void => {
 		copyToClipboard(draft);
@@ -60,7 +48,6 @@ function JsonEditorDrawer({
 
 	const onKeyDown = useCallback(
 		(event: KeyboardEvent<HTMLDivElement>): void => {
-			event.stopPropagation();
 			if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
 				event.preventDefault();
 				void apply();
@@ -73,19 +60,6 @@ function JsonEditorDrawer({
 	const validationText = validity.valid
 		? `Valid JSON · ${validity.lineCount} lines`
 		: `Line ${validity.errorLine ?? '?'} · ${validity.message ?? 'Invalid JSON'}`;
-	const plural = (n: number): string => (n === 1 ? '' : 's');
-	const danglingWarning =
-		danglingPanelIds.length > 0
-			? `${danglingPanelIds.length} panel${plural(
-					danglingPanelIds.length,
-				)} not present in layout — they won't be shown after saving.`
-			: null;
-	const missingRefWarning =
-		missingPanelRefs.length > 0
-			? `${missingPanelRefs.length} layout item${plural(
-					missingPanelRefs.length,
-				)} ${missingPanelRefs.length === 1 ? 'references' : 'reference'} a panel that no longer exists.`
-			: null;
 
 	return (
 		<Drawer
@@ -97,49 +71,15 @@ function JsonEditorDrawer({
 			rootClassName={styles.root}
 			footer={
 				<div className={styles.footer}>
-					<div className={styles.footerStatus}>
-						<Typography.Text
-							className={cx(styles.validation, {
-								[styles.validationValid]: validity.valid,
-								[styles.validationInvalid]: !validity.valid,
-							})}
-							data-testid="json-editor-validation"
-						>
-							{validationText}
-						</Typography.Text>
-						{danglingWarning && (
-							<TooltipSimple
-								title={danglingPanelIds.join(', ')}
-								tooltipContentProps={{ className: styles.warningTooltip }}
-							>
-								<span
-									className={styles.danglingWarning}
-									data-testid="json-editor-dangling-warning"
-								>
-									<TriangleAlert size={12} className={styles.warningIcon} />
-									<Typography.Text className={styles.warningText}>
-										{danglingWarning}
-									</Typography.Text>
-								</span>
-							</TooltipSimple>
-						)}
-						{missingRefWarning && (
-							<TooltipSimple
-								title={missingPanelRefs.join(', ')}
-								tooltipContentProps={{ className: styles.warningTooltip }}
-							>
-								<span
-									className={styles.danglingWarning}
-									data-testid="json-editor-missing-ref-warning"
-								>
-									<TriangleAlert size={12} className={styles.warningIcon} />
-									<Typography.Text className={styles.warningText}>
-										{missingRefWarning}
-									</Typography.Text>
-								</span>
-							</TooltipSimple>
-						)}
-					</div>
+					<Typography.Text
+						className={cx(styles.validation, {
+							[styles.validationValid]: validity.valid,
+							[styles.validationInvalid]: !validity.valid,
+						})}
+						data-testid="json-editor-validation"
+					>
+						{validationText}
+					</Typography.Text>
 					<div className={styles.footerActions}>
 						<Button
 							variant="outlined"

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/__tests__/JsonEditorDrawer.test.tsx

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 
 import JsonEditorDrawer from '../JsonEditorDrawer';
@@ -49,13 +48,11 @@ function hookValue(
 		validity: { valid: true, lineCount: 3 },
 		isDirty: true,
 		isSaving: false,
-		danglingPanelIds: [],
-		missingPanelRefs: [],
 		format: jest.fn(),
 		reset: jest.fn(),
 		apply: jest.fn().mockResolvedValue(undefined),
 		...overrides,
-	} as ReturnType<typeof useJsonEditor>;
+	};
 }
 
 describe('JsonEditorDrawer', () => {
@@ -84,42 +81,6 @@ describe('JsonEditorDrawer', () => {
 		);
 	});
 
-	it('warns about dangling panels, and hides the warning when there are none', () => {
-		mockUseJsonEditor.mockReturnValue(
-			hookValue({ danglingPanelIds: ['p1', 'p2'] }),
-		);
-		const { rerender } = render(
-			<TooltipProvider>
-				<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />
-			</TooltipProvider>,
-		);
-		expect(screen.getByTestId('json-editor-dangling-warning')).toHaveTextContent(
-			'2 panels not present in layout',
-		);
-
-		mockUseJsonEditor.mockReturnValue(hookValue({ danglingPanelIds: [] }));
-		rerender(
-			<TooltipProvider>
-				<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />
-			</TooltipProvider>,
-		);
-		expect(
-			screen.queryByTestId('json-editor-dangling-warning'),
-		).not.toBeInTheDocument();
-	});
-
-	it('warns about layout refs to missing panels', () => {
-		mockUseJsonEditor.mockReturnValue(hookValue({ missingPanelRefs: ['ghost'] }));
-		render(
-			<TooltipProvider>
-				<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />
-			</TooltipProvider>,
-		);
-		expect(
-			screen.getByTestId('json-editor-missing-ref-warning'),
-		).toHaveTextContent('1 layout item references a panel that no longer exists');
-	});
-
 	it('shows the error line and message when invalid', () => {
 		mockUseJsonEditor.mockReturnValue(
 			hookValue({

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/__tests__/danglingPanels.test.ts

@@ -1,69 +0,0 @@
-import type { DashboardtypesDashboardSpecDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { findPanelLayoutIssues } from '../danglingPanels';
-
-const grid = (refs: string[]): unknown => ({
-	kind: 'Grid',
-	spec: { items: refs.map((r) => ({ content: { $ref: r } })) },
-});
-
-// Cast a loose fixture to the spec type — the helper is defensive against the
-// untrusted, hand-edited JSON it runs on.
-const spec = (value: unknown): DashboardtypesDashboardSpecDTO =>
-	value as DashboardtypesDashboardSpecDTO;
-
-describe('findPanelLayoutIssues', () => {
-	it('flags nothing when panels and layouts agree', () => {
-		expect(
-			findPanelLayoutIssues(
-				spec({
-					panels: { a: {}, b: {} },
-					layouts: [grid(['#/spec/panels/a', '#/spec/panels/b'])],
-				}),
-			),
-		).toStrictEqual({ danglingPanelIds: [], missingPanelRefs: [] });
-	});
-
-	it('lists panels placed in no layout as dangling', () => {
-		const result = findPanelLayoutIssues(
-			spec({
-				panels: { a: {}, b: {}, c: {} },
-				layouts: [grid(['#/spec/panels/a'])],
-			}),
-		);
-		expect(result.danglingPanelIds.sort()).toStrictEqual(['b', 'c']);
-		expect(result.missingPanelRefs).toStrictEqual([]);
-	});
-
-	it('treats a removed/empty layout as orphaning every panel', () => {
-		expect(
-			findPanelLayoutIssues(
-				spec({ panels: { a: {}, b: {} }, layouts: [] }),
-			).danglingPanelIds.sort(),
-		).toStrictEqual(['a', 'b']);
-	});
-
-	it('lists layout refs to a panel that no longer exists as missing', () => {
-		const result = findPanelLayoutIssues(
-			spec({
-				panels: { a: {} },
-				layouts: [grid(['#/spec/panels/a', '#/spec/panels/ghost'])],
-			}),
-		);
-		expect(result.danglingPanelIds).toStrictEqual([]);
-		expect(result.missingPanelRefs).toStrictEqual(['ghost']);
-	});
-
-	it('handles empty / malformed specs', () => {
-		expect(
-			findPanelLayoutIssues(spec({ panels: {}, layouts: [] })),
-		).toStrictEqual({
-			danglingPanelIds: [],
-			missingPanelRefs: [],
-		});
-		expect(findPanelLayoutIssues(undefined)).toStrictEqual({
-			danglingPanelIds: [],
-			missingPanelRefs: [],
-		});
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/__tests__/useJsonEditor.test.tsx

@@ -203,47 +203,4 @@ describe('useJsonEditor', () => {
 		rerender({ isOpen: true });
 		expect(result.current.draft).toBe(serialized);
 	});
-
-	it('reports panels not placed in any layout as dangling', () => {
-		const withDangling = {
-			...dashboard,
-			spec: { ...dashboard.spec, panels: { p1: {} }, layouts: [] },
-		} as unknown as DashboardtypesGettableDashboardV2DTO;
-		const { result } = renderHook(() =>
-			useJsonEditor({
-				dashboard: withDangling,
-				isOpen: true,
-				onApplied: jest.fn(),
-			}),
-		);
-
-		expect(result.current.danglingPanelIds).toStrictEqual(['p1']);
-		expect(result.current.missingPanelRefs).toStrictEqual([]);
-	});
-
-	it('reports layout refs to panels that no longer exist as missing', () => {
-		const withMissing = {
-			...dashboard,
-			spec: {
-				...dashboard.spec,
-				panels: {},
-				layouts: [
-					{
-						kind: 'Grid',
-						spec: { items: [{ content: { $ref: '#/spec/panels/ghost' } }] },
-					},
-				],
-			},
-		} as unknown as DashboardtypesGettableDashboardV2DTO;
-		const { result } = renderHook(() =>
-			useJsonEditor({
-				dashboard: withMissing,
-				isOpen: true,
-				onApplied: jest.fn(),
-			}),
-		);
-
-		expect(result.current.missingPanelRefs).toStrictEqual(['ghost']);
-		expect(result.current.danglingPanelIds).toStrictEqual([]);
-	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/danglingPanels.ts

@@ -1,47 +0,0 @@
-import type {
-	DashboardtypesDashboardSpecDTO,
-	DashboardtypesLayoutDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { extractPanelIdFromRef } from '../../utils';
-
-export interface PanelLayoutIssues {
-	// Panels defined in `spec.panels` that no layout places — they render nowhere.
-	danglingPanelIds: string[];
-	// Panel ids a layout item references that no longer exist in `spec.panels`.
-	missingPanelRefs: string[];
-}
-
-const referencedPanelIds = (
-	layouts: DashboardtypesLayoutDTO[],
-): Set<string> => {
-	const referenced = new Set<string>();
-	layouts.forEach((layout) => {
-		if (layout?.kind !== 'Grid') {
-			return;
-		}
-		(layout.spec?.items ?? []).forEach((item) => {
-			const id = extractPanelIdFromRef(item?.content?.$ref);
-			if (id) {
-				referenced.add(id);
-			}
-		});
-	});
-	return referenced;
-};
-
-// The two ways a hand-edited spec can desync panels and layouts: a panel with no
-// layout slot (renders nowhere), or a layout slot pointing at a panel that was
-// removed (broken reference). Guarded for untrusted, user-edited JSON.
-export function findPanelLayoutIssues(
-	spec: DashboardtypesDashboardSpecDTO | undefined,
-): PanelLayoutIssues {
-	const panels = spec?.panels ?? {};
-	const panelIds = Object.keys(panels);
-	const referenced = referencedPanelIds(spec?.layouts ?? []);
-
-	return {
-		danglingPanelIds: panelIds.filter((id) => !referenced.has(id)),
-		missingPanelRefs: [...referenced].filter((id) => !(id in panels)),
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/useJsonEditor.ts

@@ -1,15 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from '@signozhq/ui/sonner';
 import { updateDashboardV2 } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesDashboardSpecDTO,
-	DashboardtypesGettableDashboardV2DTO,
-} from 'api/generated/services/sigNoz.schemas';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 import { useErrorModal } from 'providers/ErrorModalProvider';
-import { toAPIError } from 'utils/errorUtils';
+import APIError from 'types/api/error';
 
 import { dashboardToUpdatable } from './dashboardToUpdatable';
-import { findPanelLayoutIssues } from './danglingPanels';
 import { useDashboardStore } from '../../store/useDashboardStore';
 
 export interface JsonValidity {
@@ -32,10 +28,6 @@ interface Result {
 	validity: JsonValidity;
 	isDirty: boolean;
 	isSaving: boolean;
-	// Panel ids in the draft's `spec.panels` referenced by no layout — orphaned.
-	danglingPanelIds: string[];
-	// Panel ids a layout references that are missing from the draft's `spec.panels`.
-	missingPanelRefs: string[];
 	format: () => void;
 	reset: () => void;
 	apply: () => Promise<void>;
@@ -117,23 +109,6 @@ export function useJsonEditor({
 
 	const isDirty = draft !== appliedText;
 
-	const { danglingPanelIds, missingPanelRefs } = useMemo<{
-		danglingPanelIds: string[];
-		missingPanelRefs: string[];
-	}>(() => {
-		if (!validity.valid) {
-			return { danglingPanelIds: [], missingPanelRefs: [] };
-		}
-		try {
-			const parsed = JSON.parse(draft) as {
-				spec?: DashboardtypesDashboardSpecDTO;
-			};
-			return findPanelLayoutIssues(parsed.spec);
-		} catch {
-			return { danglingPanelIds: [], missingPanelRefs: [] };
-		}
-	}, [draft, validity.valid]);
-
 	const format = useCallback((): void => {
 		try {
 			setDraft(JSON.stringify(JSON.parse(draft), null, 2));
@@ -163,7 +138,7 @@ export function useJsonEditor({
 			refetch();
 			onApplied();
 		} catch (error) {
-			showErrorModal(toAPIError(error as Parameters<typeof toAPIError>[0]));
+			showErrorModal(error as APIError);
 		} finally {
 			setIsSaving(false);
 		}
@@ -184,8 +159,6 @@ export function useJsonEditor({
 		validity,
 		isDirty,
 		isSaving,
-		danglingPanelIds,
-		missingPanelRefs,
 		format,
 		reset,
 		apply,

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/SettingsDrawer/index.tsx

@@ -8,8 +8,6 @@ type SettingsDrawerProps = PropsWithChildren<{
 	drawerTitle: string;
 	isOpen: boolean;
 	onClose: () => void;
-	/** Unmount the content on close so it re-initializes on the next open. */
-	destroyOnClose?: boolean;
 }>;
 
 function SettingsDrawer({
@@ -17,7 +15,6 @@ function SettingsDrawer({
 	drawerTitle,
 	isOpen,
 	onClose,
-	destroyOnClose = false,
 }: SettingsDrawerProps): JSX.Element {
 	return (
 		<Drawer
@@ -26,7 +23,6 @@ function SettingsDrawer({
 			width="50%"
 			onClose={onClose}
 			open={isOpen}
-			destroyOnClose={destroyOnClose}
 			rootClassName={styles.settingsContainerRoot}
 		>
 			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/index.tsx

@@ -63,13 +63,8 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	const { user } = useAppContext();
 	const { showErrorModal } = useErrorModal();
 	const { patchAsync } = useOptimisticPatch();
-	const {
-		isPickerOpen,
-		openPicker,
-		closePicker,
-		createPanel,
-		targetLayoutIndex,
-	} = useCreatePanel();
+	const { isPickerOpen, openPicker, closePicker, createPanel } =
+		useCreatePanel();
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
@@ -188,7 +183,6 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 				open={isPickerOpen}
 				onClose={closePicker}
 				onSelect={createPanel}
-				defaultLayoutIndex={targetLayoutIndex}
 			/>
 		</section>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/DashboardInfoForm/DashboardInfoForm.tsx

@@ -12,7 +12,6 @@ import { Input as AntdInput } from 'antd';
 import TagKeyValueInput from 'components/TagKeyValueInput/TagKeyValueInput';
 
 import { Base64Icons } from '../utils';
-import { DASHBOARD_NAME_MAX_LENGTH } from '../../../constants';
 import settingsStyles from '../../DashboardSettings.module.scss';
 import styles from './DashboardInfoForm.module.scss';
 
@@ -72,7 +71,6 @@ function DashboardInfoForm({
 							testId="dashboard-name"
 							className={styles.dashboardNameInput}
 							value={title}
-							maxLength={DASHBOARD_NAME_MAX_LENGTH}
 							onChange={(e): void => onTitleChange(e.target.value)}
 						/>
 					</section>

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/index.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { DashboardtypesPatchOpDTO } from 'api/generated/services/sigNoz.schemas';
 import type {
 	DashboardtypesGettableDashboardV2DTO,
 	DashboardtypesJSONPatchOperationDTO,
@@ -55,32 +54,20 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 
 	const buildPatch = useCallback((): DashboardtypesJSONPatchOperationDTO[] => {
 		const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-		const op = (
-			operation: DashboardtypesJSONPatchOperationDTO['op'],
-			path: string,
-			value: unknown,
-		): DashboardtypesJSONPatchOperationDTO => ({ op: operation, path, value });
 		const replace = (
 			path: string,
 			value: unknown,
-		): DashboardtypesJSONPatchOperationDTO =>
-			op(DashboardtypesPatchOpDTO.replace, path, value);
+		): DashboardtypesJSONPatchOperationDTO => ({
+			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+			path,
+			value,
+		});
 
 		if (updatedTitle !== title && updatedTitle !== '') {
 			ops.push(replace('/spec/display/name', updatedTitle));
 		}
 		if (updatedDescription !== description) {
-			// `replace` fails when the description doesn't exist yet, so add it when
-			// the current one is empty (`add` creates or replaces the member).
-			ops.push(
-				op(
-					description
-						? DashboardtypesPatchOpDTO.replace
-						: DashboardtypesPatchOpDTO.add,
-					'/spec/display/description',
-					updatedDescription,
-				),
-			);
+			ops.push(replace('/spec/display/description', updatedDescription));
 		}
 		if (updatedImage !== image) {
 			ops.push(replace('/image', updatedImage));

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/DynamicVariableFields.tsx

@@ -40,7 +40,7 @@ function DynamicVariableFields({
 	attributeError,
 }: DynamicVariableFieldsProps): JSX.Element {
 	const [search, setSearch] = useState('');
-	const debouncedSearch = useDebounce(search, 500);
+	const debouncedSearch = useDebounce(search, 300);
 	const apiSignal = signalForApi(signal);
 
 	const {
@@ -82,34 +82,17 @@ function DynamicVariableFields({
 
 	return (
 		<>
-			{/* Combined row retained from V1: the field on the left, `from` + the
-			    telemetry source on the right. */}
-			<div className={cx(styles.row, styles.dynamicCombinedRow)}>
-				<CustomSelect
-					className={styles.dynamicFieldSelect}
-					showSearch
-					value={attribute || undefined}
-					placeholder="Select a field"
-					loading={isLoading}
-					options={options}
-					onSearch={setSearch}
-					onChange={(value): void => onChange({ dynamicAttribute: value as string })}
-					noDataMessage="No fields found"
-					errorMessage={errorMessage}
-					onRetry={(): void => {
-						void refetch();
-					}}
-					showRetryButton={error ? isRetryableError(error) : true}
-					data-testid="variable-field-select"
-				/>
-				<Typography.Text className={styles.fromText}>from</Typography.Text>
-				<TextToolTip
-					text="By default, this searches across logs, traces, and metrics, which can be slow. Selecting a single source improves performance. Many fields share the same values across different signals (for example, `k8s.pod.name` is identical in logs, traces and metrics) making one source enough. Only use `All telemetry` when you need fields that have different values in different signal types."
-					useFilledIcon={false}
-					outlinedIcon={<Info size={14} />}
-				/>
+			<div className={cx(styles.row, styles.sortSection)}>
+				<div className={cx(styles.labelContainer, styles.sourceLabel)}>
+					<Typography.Text className={styles.label}>Source</Typography.Text>
+					<TextToolTip
+						text="By default, this searches across logs, traces, and metrics, which can be slow. Selecting a single source improves performance. Many fields share the same values across different signals (for example, `k8s.pod.name` is identical in logs, traces and metrics) making one source enough. Only use `All telemetry` when you need fields that have different values in different signal types."
+						useFilledIcon={false}
+						outlinedIcon={<Info size={14} />}
+					/>
+				</div>
 				<Select
-					className={styles.dynamicSourceSelect}
+					className={styles.sortSelect}
 					popupMatchSelectWidth={false}
 					value={signal}
 					options={DYNAMIC_SIGNALS.map((s) => ({
@@ -122,6 +105,28 @@ function DynamicVariableFields({
 					data-testid="variable-signal-select"
 				/>
 			</div>
+			<div className={cx(styles.row, styles.sortSection)}>
+				<div className={styles.labelContainer}>
+					<Typography.Text className={styles.label}>Attribute</Typography.Text>
+				</div>
+				<CustomSelect
+					className={styles.searchSelect}
+					showSearch
+					value={attribute || undefined}
+					placeholder="Select a telemetry field"
+					loading={isLoading}
+					options={options}
+					onSearch={setSearch}
+					onChange={(value): void => onChange({ dynamicAttribute: value as string })}
+					noDataMessage="No fields found"
+					errorMessage={errorMessage}
+					onRetry={(): void => {
+						void refetch();
+					}}
+					showRetryButton={error ? isRetryableError(error) : true}
+					data-testid="variable-field-select"
+				/>
+			</div>
 			{attributeError ? (
 				<Typography.Text className={styles.errorText}>
 					{attributeError}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.module.scss

@@ -138,7 +138,7 @@
 	align-items: center;
 	gap: 6px;
 	min-height: 24px;
-	padding: 4px 16px !important;
+	padding: 6px 14px;
 	white-space: nowrap;
 	border-radius: 0;
 	color: var(--l2-foreground);
@@ -157,7 +157,6 @@
 
 .betaTag {
 	margin-left: 4px;
-	vertical-align: middle;
 }
 
 /* Query */
@@ -265,7 +264,6 @@
 	flex-flow: wrap;
 	gap: 8px;
 	padding: 4.5px 11px;
-	max-height: 120px;
 	overflow-y: auto;
 }
 
@@ -330,54 +328,16 @@
 
 /* All variable selects (Source / Attribute / Sort / Default Value) share width
    and a consistent --l2-border outline. */
-.sortSelect,
-.searchSelect,
-.dynamicFieldSelect,
-.dynamicSourceSelect {
-	:global(.ant-select-selector) {
-		border-color: var(--l2-border) !important;
-	}
-}
-
 .sortSelect,
 .searchSelect {
 	width: 240px;
 	flex-shrink: 0;
 
-	// The clear (X) is an SVG, so antd's font-glyph offset mis-centers it — center
-	// it on the row and make it clearly visible.
-	:global(.ant-select-clear) {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-top: 0;
-		transform: translateY(-50%);
-		color: var(--l2-foreground);
-		opacity: 1;
+	:global(.ant-select-selector) {
+		border-color: var(--l2-border) !important;
 	}
 }
 
-/* Dynamic variable: field | "from" | info | source, retained from V1. */
-.dynamicCombinedRow {
-	display: grid;
-	grid-template-columns: 1fr auto 16px 180px;
-	gap: 12px;
-	align-items: center;
-}
-
-.dynamicFieldSelect,
-.dynamicSourceSelect {
-	width: 100%;
-	min-width: 0;
-}
-
-.fromText {
-	font-family: 'Space Mono';
-	font-size: 13px;
-	font-weight: var(--font-weight-medium);
-	white-space: nowrap;
-}
-
 .actionButtons {
 	width: 100%;
 	display: flex;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.tsx

@@ -1,4 +1,3 @@
-import { useRef, useState } from 'react';
 import { Check, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
@@ -7,7 +6,6 @@ import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 // eslint-disable-next-line signoz/no-antd-components -- TextArea/Collapse: no @signozhq/ui equivalent
 import { Collapse, Input as AntdInput } from 'antd';
-import { CustomMultiSelect } from 'components/NewSelect';
 
 import type { VariableType } from '../variableFormModel';
 import DynamicVariableFields from './DynamicVariableFields';
@@ -32,19 +30,9 @@ function VariableForm({
 	siblings,
 	isNew,
 	isSaving,
-	panelOptions,
-	appliedPanelIds,
 	onClose,
 	onSave,
 }: VariableFormProps): JSX.Element {
-	// The "apply to panels" selection is transient form state, seeded from the
-	// panels that already reference this variable. Held in a ref so the save
-	// callback (owned by useVariableForm) reads the latest value.
-	const [selectedPanelIds, setSelectedPanelIds] =
-		useState<string[]>(appliedPanelIds);
-	const selectedPanelIdsRef = useRef(selectedPanelIds);
-	selectedPanelIdsRef.current = selectedPanelIds;
-
 	const {
 		model,
 		set,
@@ -66,12 +54,7 @@ function VariableForm({
 		showAllOptionField,
 		payloadVariables,
 		handleSave,
-	} = useVariableForm({
-		initial,
-		siblings,
-		isNew,
-		onSave: (next): void => onSave(next, selectedPanelIdsRef.current),
-	});
+	} = useVariableForm({ initial, siblings, isNew, onSave });
 
 	// Shared list rows (preview/sort/multi/default) for the list-type variables;
 	// rendered as a sibling inside each list-type panel. Only the active panel
@@ -118,20 +101,6 @@ function VariableForm({
 								attributeError={attributeError}
 							/>
 							{listFields}
-							<div className={styles.row}>
-								<div className={styles.labelContainer}>
-									<Typography.Text className={styles.label}>
-										Apply to panels
-									</Typography.Text>
-								</div>
-								<CustomMultiSelect
-									placeholder="Select panels"
-									options={panelOptions}
-									value={selectedPanelIds}
-									onChange={(value): void => setSelectedPanelIds(value as string[])}
-									data-testid="variable-apply-panels"
-								/>
-							</div>
 						</div>
 					</TabsContent>
 

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/useVariableForm.ts

@@ -46,12 +46,8 @@ export interface UseVariableForm {
 	handleSave: () => void;
 }
 
-// `defaultValue` is a string | string[] on the wire; the editor uses a single
-// string, so take the first when it's an array.
-const readDefaultValue = (model: VariableFormModel): string => {
-	const dv = model.defaultValue;
-	return Array.isArray(dv) ? (dv[0] ?? '') : (dv ?? '');
-};
+const readDefaultValue = (model: VariableFormModel): string =>
+	((model.defaultValue as { value?: string })?.value ?? '') as string;
 
 /** Form state, derivations and handlers for the variable editor. */
 export function useVariableForm({

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableRow.tsx

@@ -3,13 +3,18 @@ import { Check, GripVertical, PenLine, Trash2, X } from '@signozhq/icons';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
 
 import type { VariableFormModel } from './variableFormModel';
 import styles from './Variables.module.scss';
 
+const TYPE_LABEL: Record<VariableFormModel['type'], string> = {
+	QUERY: 'Query',
+	CUSTOM: 'Custom',
+	TEXT: 'Text',
+	DYNAMIC: 'Dynamic',
+};
+
 interface VariableRowProps {
 	variable: VariableFormModel;
 	index: number;
@@ -20,11 +25,9 @@ interface VariableRowProps {
 	onRequestDelete: (index: number) => void;
 	onConfirmDelete: (index: number) => void;
 	onCancelDelete: () => void;
-	/** Apply this variable's filter to all panels. Dynamic variables only. */
-	onApplyToAll: (index: number) => void;
 }
 
-/** A single draggable variable row in the two-column (name / description) table. */
+/** A single draggable variable row (drag handle + meta + inline actions). */
 function VariableRow({
 	variable,
 	index,
@@ -34,7 +37,6 @@ function VariableRow({
 	onRequestDelete,
 	onConfirmDelete,
 	onCancelDelete,
-	onApplyToAll,
 }: VariableRowProps): JSX.Element {
 	const {
 		attributes,
@@ -59,7 +61,7 @@ function VariableRow({
 			className={styles.row}
 			data-testid={`variable-row-${variable.name}`}
 		>
-			<div className={styles.varCell}>
+			<div className={styles.rowMain}>
 				{canEdit ? (
 					<span
 						ref={setActivatorNodeRef}
@@ -72,94 +74,65 @@ function VariableRow({
 					</span>
 				) : null}
 				<Typography.Text className={styles.varName}>
-					{variable.name}
+					${variable.name}
 				</Typography.Text>
-			</div>
-
-			<div className={styles.descCell}>
+				<span className={styles.typeTag}>{TYPE_LABEL[variable.type]}</span>
 				{variable.description ? (
 					<Typography.Text className={styles.varDesc}>
 						{variable.description}
 					</Typography.Text>
-				) : (
-					<span className={styles.varDescEmpty}>—</span>
-				)}
-
-				{canEdit ? (
-					<div
-						className={cx(styles.rowActions, {
-							[styles.rowActionsVisible]: isConfirmingDelete,
-						})}
-					>
-						{isConfirmingDelete ? (
-							<>
-								<Typography.Text className={styles.confirmText}>
-									Delete?
-								</Typography.Text>
-								<Button
-									variant="ghost"
-									color="destructive"
-									size="icon"
-									onClick={(): void => onConfirmDelete(index)}
-									aria-label="Confirm delete"
-									testId={`variable-delete-confirm-${variable.name}`}
-								>
-									<Check size={14} />
-								</Button>
-								<Button
-									variant="ghost"
-									color="secondary"
-									size="icon"
-									onClick={onCancelDelete}
-									aria-label="Cancel delete"
-								>
-									<X size={14} />
-								</Button>
-							</>
-						) : (
-							<>
-								{variable.type === 'DYNAMIC' ? (
-									<TooltipSimple
-										side="top"
-										title="Add this variable as a filter to every panel"
-									>
-										<Button
-											variant="ghost"
-											color="secondary"
-											size="sm"
-											className={styles.applyAllButton}
-											onClick={(): void => onApplyToAll(index)}
-											testId={`variable-apply-all-${variable.name}`}
-										>
-											Apply to all
-										</Button>
-									</TooltipSimple>
-								) : null}
-								<Button
-									variant="ghost"
-									color="secondary"
-									size="icon"
-									onClick={(): void => onEdit(index)}
-									aria-label="Edit variable"
-									testId={`variable-edit-${variable.name}`}
-								>
-									<PenLine size={14} />
-								</Button>
-								<Button
-									variant="ghost"
-									color="secondary"
-									size="icon"
-									onClick={(): void => onRequestDelete(index)}
-									aria-label="Delete variable"
-									testId={`variable-delete-${variable.name}`}
-								>
-									<Trash2 size={14} />
-								</Button>
-							</>
-						)}
-					</div>
 				) : null}
 			</div>
+
+			{canEdit && isConfirmingDelete ? (
+				<div className={styles.rowActions}>
+					<Typography.Text className={styles.confirmText}>Delete?</Typography.Text>
+					<Button
+						variant="ghost"
+						color="destructive"
+						size="icon"
+						onClick={(): void => onConfirmDelete(index)}
+						aria-label="Confirm delete"
+						testId={`variable-delete-confirm-${variable.name}`}
+					>
+						<Check size={14} />
+					</Button>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						onClick={onCancelDelete}
+						aria-label="Cancel delete"
+					>
+						<X size={14} />
+					</Button>
+				</div>
+			) : null}
+
+			{canEdit && !isConfirmingDelete ? (
+				<div className={styles.rowActions}>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						onClick={(): void => onEdit(index)}
+						aria-label="Edit variable"
+						testId={`variable-edit-${variable.name}`}
+					>
+						<PenLine size={14} />
+					</Button>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						onClick={(): void => onRequestDelete(index)}
+						aria-label="Delete variable"
+						testId={`variable-delete-${variable.name}`}
+					>
+						<Trash2 size={14} />
+					</Button>
+				</div>
+			) : null}
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/Variables.module.scss

@@ -4,7 +4,7 @@
 	gap: 16px;
 }
 
-.footer {
+.header {
 	display: flex;
 	justify-content: flex-end;
 	gap: 16px;
@@ -28,125 +28,69 @@
 	color: var(--l2-foreground);
 }
 
-// Two-column (Variable / Description) table matching the V1 variables listing.
-$grid-columns: minmax(0, 2fr) minmax(0, 3fr);
-
-.table {
-	display: flex;
-	flex-direction: column;
-	border: 1px solid var(--l2-border);
-	border-radius: 6px;
-	overflow: hidden;
-}
-
-.headerRow {
-	display: grid;
-	grid-template-columns: $grid-columns;
-	padding: 0 16px;
-	border-bottom: 1px solid var(--l2-border);
-}
-
-.headerCell {
-	padding: 12px 0;
-	font-size: 13px;
-	font-weight: 500;
-	color: var(--l1-foreground);
-
-	&:first-child {
-		padding-right: 16px;
-		border-right: 1px solid var(--l2-border);
-	}
-
-	&:last-child {
-		padding-left: 16px;
-	}
-}
-
 .list {
 	display: flex;
 	flex-direction: column;
+	gap: 8px;
 }
 
 .row {
-	position: relative;
-	display: grid;
-	grid-template-columns: $grid-columns;
-	padding: 0 16px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 10px 12px;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
 	background: var(--l1-background);
-
-	&:not(:last-child) {
-		border-bottom: 1px solid var(--l2-border);
-	}
-
-	&:hover {
-		background: var(--l2-background);
-	}
 }
 
-.varCell {
+.rowMain {
 	display: flex;
-	align-items: flex-start;
-	gap: 8px;
+	align-items: center;
+	gap: 10px;
 	min-width: 0;
-	padding: 12px 16px 12px 0;
-	border-right: 1px solid var(--l2-border);
 }
 
 .dragHandle {
 	display: flex;
 	flex-shrink: 0;
 	align-items: center;
-	margin-top: 1px;
 	color: var(--l3-foreground);
 	cursor: grab;
 	touch-action: none;
 }
 
 .varName {
-	min-width: 0;
-	font-family: 'Space Mono', monospace;
-	font-size: 13px;
-	color: var(--bg-robin-400);
-	word-break: break-all;
-}
-
-.descCell {
-	position: relative;
-	min-width: 0;
-	padding: 12px 0 12px 16px;
+	font-weight: 500;
+	color: var(--l1-foreground);
 }
 
 .varDesc {
-	font-family: 'Space Mono', monospace;
-	font-size: 13px;
-	color: var(--bg-sienna-400);
-	white-space: pre-wrap;
-	word-break: break-word;
+	min-width: 0;
+	overflow: hidden;
+	font-size: 12px;
+	color: var(--l2-foreground);
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-.varDescEmpty {
-	color: var(--l3-foreground);
+.typeTag {
+	flex-shrink: 0;
+	padding: 1px 8px;
+	font-size: 11px;
+	letter-spacing: 0.04em;
+	color: var(--l2-foreground);
+	text-transform: uppercase;
+	background: var(--l2-background);
+	border-radius: 10px;
 }
 
 .rowActions {
-	position: absolute;
-	top: 8px;
-	right: 0;
 	display: flex;
+	flex-shrink: 0;
 	align-items: center;
 	gap: 2px;
-	padding-left: 16px;
-	background: var(--l2-background);
-	opacity: 0;
-	transition: opacity 120ms ease;
-}
-
-.row:hover .rowActions {
-	opacity: 1;
-}
-
-.rowActionsVisible {
-	opacity: 1;
 }
 
 .confirmText {
@@ -154,8 +98,3 @@ $grid-columns: minmax(0, 2fr) minmax(0, 3fr);
 	font-size: 12px;
 	color: var(--l2-foreground);
 }
-
-.applyAllButton {
-	font-size: 12px;
-	white-space: nowrap;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariablesList.tsx

@@ -25,7 +25,6 @@ interface VariablesListProps {
 	onConfirmDelete: (index: number) => void;
 	onCancelDelete: () => void;
 	onMove: (from: number, to: number) => void;
-	onApplyToAll: (index: number) => void;
 }
 
 function VariablesList({
@@ -37,7 +36,6 @@ function VariablesList({
 	onConfirmDelete,
 	onCancelDelete,
 	onMove,
-	onApplyToAll,
 }: VariablesListProps): JSX.Element {
 	const sensors = useSensors(
 		useSensor(PointerSensor, { activationConstraint: { distance: 1 } }),
@@ -55,39 +53,32 @@ function VariablesList({
 	};
 
 	return (
-		<div className={styles.table} data-testid="variables-list">
-			<div className={styles.headerRow}>
-				<span className={styles.headerCell}>Variable</span>
-				<span className={styles.headerCell}>Description</span>
-			</div>
-			<DndContext
-				sensors={sensors}
-				modifiers={[restrictToVerticalAxis]}
-				onDragEnd={handleDragEnd}
+		<DndContext
+			sensors={sensors}
+			modifiers={[restrictToVerticalAxis]}
+			onDragEnd={handleDragEnd}
+		>
+			<SortableContext
+				items={variables.map((v) => v.name)}
+				strategy={verticalListSortingStrategy}
 			>
-				<SortableContext
-					items={variables.map((v) => v.name)}
-					strategy={verticalListSortingStrategy}
-				>
-					<div className={styles.list}>
-						{variables.map((variable, index) => (
-							<VariableRow
-								key={variable.name || `variable-${index}`}
-								variable={variable}
-								index={index}
-								canEdit={canEdit}
-								isConfirmingDelete={confirmingIndex === index}
-								onEdit={onEdit}
-								onRequestDelete={onRequestDelete}
-								onConfirmDelete={onConfirmDelete}
-								onCancelDelete={onCancelDelete}
-								onApplyToAll={onApplyToAll}
-							/>
-						))}
-					</div>
-				</SortableContext>
-			</DndContext>
-		</div>
+				<div className={styles.list} data-testid="variables-list">
+					{variables.map((variable, index) => (
+						<VariableRow
+							key={variable.name || `variable-${index}`}
+							variable={variable}
+							index={index}
+							canEdit={canEdit}
+							isConfirmingDelete={confirmingIndex === index}
+							onEdit={onEdit}
+							onRequestDelete={onRequestDelete}
+							onConfirmDelete={onConfirmDelete}
+							onCancelDelete={onCancelDelete}
+						/>
+					))}
+				</div>
+			</SortableContext>
+		</DndContext>
 	);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/__tests__/applyVariableToPanelsPatch.test.ts

@@ -1,231 +0,0 @@
-import type {
-	DashboardtypesDashboardSpecDTOPanels,
-	DashboardtypesJSONPatchOperationDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import {
-	buildApplyVariableToPanelsPatch,
-	buildSyncVariableToPanelsPatch,
-	getPanelIdsReferencingVariable,
-} from '../applyVariableToPanelsPatch';
-
-/** Minimal builder-query panel wrapped in a CompositeQuery, with a given filter. */
-function compositePanel(filterExpression: string): unknown {
-	return {
-		kind: 'panel',
-		spec: {
-			display: { title: '' },
-			plugin: { kind: 'signoz/TimeSeries', spec: {} },
-			queries: [
-				{
-					kind: 'builder_query',
-					spec: {
-						plugin: {
-							kind: 'signoz/CompositeQuery',
-							spec: {
-								queries: [
-									{
-										type: 'builder_query',
-										spec: {
-											name: 'A',
-											signal: 'logs',
-											filter: { expression: filterExpression },
-										},
-									},
-								],
-							},
-						},
-					},
-				},
-			],
-		},
-	};
-}
-
-/** A bare LIST-style BuilderQuery panel (filter lives directly on the plugin spec). */
-function listPanel(filterExpression: string): unknown {
-	return {
-		kind: 'panel',
-		spec: {
-			display: { title: '' },
-			plugin: { kind: 'signoz/List', spec: {} },
-			queries: [
-				{
-					kind: 'builder_query',
-					spec: {
-						plugin: {
-							kind: 'signoz/BuilderQuery',
-							spec: {
-								name: 'A',
-								signal: 'logs',
-								filter: { expression: filterExpression },
-							},
-						},
-					},
-				},
-			],
-		},
-	};
-}
-
-/** A PromQL panel — no builder filter, must be skipped. */
-function promqlPanel(): unknown {
-	return {
-		kind: 'panel',
-		spec: {
-			display: { title: '' },
-			plugin: { kind: 'signoz/TimeSeries', spec: {} },
-			queries: [
-				{
-					kind: 'promql',
-					spec: {
-						plugin: { kind: 'signoz/PromQLQuery', spec: { query: 'up' } },
-					},
-				},
-			],
-		},
-	};
-}
-
-/** Reads the first builder query's filter expression out of a patch op's value. */
-function expressionOf(
-	op: DashboardtypesJSONPatchOperationDTO,
-): string | undefined {
-	const queries = op.value as Array<{
-		spec: { plugin: { kind: string; spec: any } };
-	}>;
-	const { plugin } = queries[0].spec;
-	const builderSpec =
-		plugin.kind === 'signoz/CompositeQuery'
-			? plugin.spec.queries[0].spec
-			: plugin.spec;
-	return builderSpec.filter?.expression;
-}
-
-function panels(
-	map: Record<string, unknown>,
-): DashboardtypesDashboardSpecDTOPanels {
-	return map as DashboardtypesDashboardSpecDTOPanels;
-}
-
-describe('buildApplyVariableToPanelsPatch', () => {
-	it('appends the clause to an existing filter (AND-joined)', () => {
-		const ops = buildApplyVariableToPanelsPatch(
-			panels({ p1: compositePanel('env = "prod"') }),
-			'service.name',
-			'svc',
-		);
-		expect(ops).toHaveLength(1);
-		expect(ops[0]).toMatchObject({
-			op: 'replace',
-			path: '/spec/panels/p1/spec/queries',
-		});
-		expect(expressionOf(ops[0])).toBe('env = "prod" AND service.name IN $svc');
-	});
-
-	it('sets the clause when the filter is empty', () => {
-		const ops = buildApplyVariableToPanelsPatch(
-			panels({ p1: compositePanel('') }),
-			'service.name',
-			'svc',
-		);
-		expect(expressionOf(ops[0])).toBe('service.name IN $svc');
-	});
-
-	it('applies to a bare BuilderQuery (LIST) panel', () => {
-		const ops = buildApplyVariableToPanelsPatch(
-			panels({ p1: listPanel('') }),
-			'k8s.pod.name',
-			'pod',
-		);
-		expect(expressionOf(ops[0])).toBe('k8s.pod.name IN $pod');
-	});
-
-	it('is idempotent — re-applying does not duplicate the clause', () => {
-		const ops = buildApplyVariableToPanelsPatch(
-			panels({ p1: compositePanel('service.name IN $svc') }),
-			'service.name',
-			'svc',
-		);
-		expect(ops).toHaveLength(0);
-	});
-
-	it('only targets the requested panels', () => {
-		const ops = buildApplyVariableToPanelsPatch(
-			panels({ p1: compositePanel(''), p2: compositePanel('') }),
-			'service.name',
-			'svc',
-			['p2'],
-		);
-		expect(ops).toHaveLength(1);
-		expect(ops[0].path).toBe('/spec/panels/p2/spec/queries');
-	});
-
-	it('skips PromQL panels (no builder filter)', () => {
-		const ops = buildApplyVariableToPanelsPatch(
-			panels({ p1: promqlPanel() }),
-			'service.name',
-			'svc',
-		);
-		expect(ops).toHaveLength(0);
-	});
-
-	it('returns nothing when attribute or name is missing', () => {
-		expect(
-			buildApplyVariableToPanelsPatch(
-				panels({ p1: compositePanel('') }),
-				'',
-				'svc',
-			),
-		).toHaveLength(0);
-	});
-});
-
-describe('buildSyncVariableToPanelsPatch', () => {
-	it('adds to selected panels and removes from the rest', () => {
-		const ops = buildSyncVariableToPanelsPatch(
-			panels({
-				p1: compositePanel('service.name IN $svc'), // has it, not selected → remove
-				p2: compositePanel(''), // selected → add
-				p3: compositePanel('service.name IN $svc'), // has it, selected → unchanged
-			}),
-			'service.name',
-			'svc',
-			['p2', 'p3'],
-		);
-		const byPath = Object.fromEntries(ops.map((op) => [op.path, op]));
-		expect(Object.keys(byPath).sort()).toStrictEqual([
-			'/spec/panels/p1/spec/queries',
-			'/spec/panels/p2/spec/queries',
-		]);
-		expect(expressionOf(byPath['/spec/panels/p1/spec/queries'])).toBe('');
-		expect(expressionOf(byPath['/spec/panels/p2/spec/queries'])).toBe(
-			'service.name IN $svc',
-		);
-	});
-
-	it('removing keeps other clauses intact', () => {
-		const ops = buildSyncVariableToPanelsPatch(
-			panels({ p1: compositePanel('env = "prod" AND service.name IN $svc') }),
-			'service.name',
-			'svc',
-			[],
-		);
-		expect(expressionOf(ops[0])).toBe('env = "prod"');
-	});
-});
-
-describe('getPanelIdsReferencingVariable', () => {
-	it('returns only panels whose filter references the variable', () => {
-		const ids = getPanelIdsReferencingVariable(
-			panels({
-				p1: compositePanel('service.name IN $svc'),
-				p2: compositePanel('env = "prod"'),
-				p3: listPanel('service.name IN $svc'),
-			}),
-			'service.name',
-			'svc',
-		);
-		expect(ids.sort()).toStrictEqual(['p1', 'p3']);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/applyVariableToPanelsPatch.ts

@@ -1,179 +0,0 @@
-import type {
-	DashboardtypesDashboardSpecDTOPanels,
-	DashboardtypesJSONPatchOperationDTO,
-	DashboardtypesQueryDTO,
-	Querybuildertypesv5BuilderQuerySpecDTO,
-	Querybuildertypesv5CompositeQueryDTO,
-	Querybuildertypesv5QueryEnvelopeBuilderDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { cloneDeep } from 'lodash-es';
-
-// Injects/removes a dynamic variable's filter (`attribute IN $name`) in panel
-// builder queries as JSON-Patch ops. Only builder queries carry a filter.
-
-function clauseFor(attribute: string, variableName: string): string {
-	return `${attribute} IN $${variableName}`;
-}
-
-/** Runs `fn` on every builder-query spec in a panel's single query (Composite or bare Builder). */
-function forEachBuilderSpec(
-	queries: DashboardtypesQueryDTO[],
-	fn: (spec: Querybuildertypesv5BuilderQuerySpecDTO) => void,
-): void {
-	const plugin = queries[0]?.spec?.plugin;
-	if (!plugin?.spec) {
-		return;
-	}
-	if (plugin.kind === 'signoz/CompositeQuery') {
-		const composite = plugin.spec as Querybuildertypesv5CompositeQueryDTO;
-		(composite.queries ?? [])
-			.filter((envelope) => envelope.type === 'builder_query')
-			.forEach((envelope) => {
-				const { spec } = envelope as Querybuildertypesv5QueryEnvelopeBuilderDTO;
-				if (spec) {
-					fn(spec as Querybuildertypesv5BuilderQuerySpecDTO);
-				}
-			});
-	} else if (plugin.kind === 'signoz/BuilderQuery') {
-		fn(plugin.spec as Querybuildertypesv5BuilderQuerySpecDTO);
-	}
-}
-
-/** Appends the clause to every builder query's filter. Returns whether anything changed. */
-function addClause(queries: DashboardtypesQueryDTO[], clause: string): boolean {
-	let changed = false;
-	forEachBuilderSpec(queries, (spec) => {
-		const existing = spec.filter?.expression?.trim();
-		// Idempotent: a repeated apply must not stack duplicate clauses.
-		if (existing?.includes(clause)) {
-			return;
-		}
-		spec.filter = {
-			expression: existing ? `${existing} AND ${clause}` : clause,
-		};
-		changed = true;
-	});
-	return changed;
-}
-
-/** Removes the managed clause (an ` AND `-joined part) from every builder filter. */
-function removeClause(
-	queries: DashboardtypesQueryDTO[],
-	clause: string,
-): boolean {
-	let changed = false;
-	forEachBuilderSpec(queries, (spec) => {
-		const existing = spec.filter?.expression;
-		if (!existing) {
-			return;
-		}
-		const parts = existing
-			.split(' AND ')
-			.map((part) => part.trim())
-			.filter(Boolean);
-		const kept = parts.filter((part) => part !== clause);
-		if (kept.length !== parts.length) {
-			spec.filter = { expression: kept.join(' AND ') };
-			changed = true;
-		}
-	});
-	return changed;
-}
-
-/** Whether any builder query in the panel already carries the clause. */
-function panelHasClause(
-	queries: DashboardtypesQueryDTO[],
-	clause: string,
-): boolean {
-	let has = false;
-	forEachBuilderSpec(queries, (spec) => {
-		if (spec.filter?.expression?.includes(clause)) {
-			has = true;
-		}
-	});
-	return has;
-}
-
-function replaceQueriesOp(
-	panelId: string,
-	queries: DashboardtypesQueryDTO[],
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-		path: `/spec/panels/${panelId}/spec/queries`,
-		value: queries,
-	};
-}
-
-/** Add-only: inject the variable's filter into the given panels (default: all). */
-export function buildApplyVariableToPanelsPatch(
-	panels: DashboardtypesDashboardSpecDTOPanels,
-	attribute: string,
-	variableName: string,
-	targetPanelIds?: string[],
-): DashboardtypesJSONPatchOperationDTO[] {
-	if (!attribute || !variableName) {
-		return [];
-	}
-	const clause = clauseFor(attribute, variableName);
-	const ids = targetPanelIds ?? Object.keys(panels);
-
-	const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-	ids.forEach((id) => {
-		const panel = panels[id];
-		if (!panel?.spec?.queries?.length) {
-			return;
-		}
-		const queries = cloneDeep(panel.spec.queries);
-		if (addClause(queries, clause)) {
-			ops.push(replaceQueriesOp(id, queries));
-		}
-	});
-	return ops;
-}
-
-/** Full sync: selected panels get the clause; every other panel has it removed. */
-export function buildSyncVariableToPanelsPatch(
-	panels: DashboardtypesDashboardSpecDTOPanels,
-	attribute: string,
-	variableName: string,
-	selectedPanelIds: string[],
-): DashboardtypesJSONPatchOperationDTO[] {
-	if (!attribute || !variableName) {
-		return [];
-	}
-	const clause = clauseFor(attribute, variableName);
-	const selected = new Set(selectedPanelIds);
-
-	const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-	Object.keys(panels).forEach((id) => {
-		const panel = panels[id];
-		if (!panel?.spec?.queries?.length) {
-			return;
-		}
-		const queries = cloneDeep(panel.spec.queries);
-		const changed = selected.has(id)
-			? addClause(queries, clause)
-			: removeClause(queries, clause);
-		if (changed) {
-			ops.push(replaceQueriesOp(id, queries));
-		}
-	});
-	return ops;
-}
-
-/** Panel ids whose queries currently reference the variable — pre-populates the picker. */
-export function getPanelIdsReferencingVariable(
-	panels: DashboardtypesDashboardSpecDTOPanels,
-	attribute: string,
-	variableName: string,
-): string[] {
-	if (!attribute || !variableName) {
-		return [];
-	}
-	const clause = clauseFor(attribute, variableName);
-	return Object.keys(panels).filter((id) => {
-		const queries = panels[id]?.spec?.queries;
-		return queries?.length ? panelHasClause(queries, clause) : false;
-	});
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/ApplyToAllDialog/ApplyToAllDialog.module.scss

@@ -1,16 +0,0 @@
-.body {
-	font-size: 13px;
-	line-height: 20px;
-	color: var(--l2-foreground);
-}
-
-.variableName {
-	font-family: 'Space Mono', monospace;
-	color: var(--bg-robin-400);
-}
-
-.footer {
-	display: flex;
-	justify-content: flex-end;
-	gap: 8px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/ApplyToAllDialog/ApplyToAllDialog.tsx

@@ -1,67 +0,0 @@
-import { Check, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-
-import styles from './ApplyToAllDialog.module.scss';
-
-interface ApplyToAllDialogProps {
-	open: boolean;
-	variableName: string;
-	isLoading: boolean;
-	onConfirm: () => void;
-	onClose: () => void;
-}
-
-/** Confirms applying a dynamic variable as a filter to every panel. */
-function ApplyToAllDialog({
-	open,
-	variableName,
-	isLoading,
-	onConfirm,
-	onClose,
-}: ApplyToAllDialogProps): JSX.Element {
-	const footer = (
-		<div className={styles.footer}>
-			<Button variant="solid" color="secondary" onClick={onClose}>
-				<X size={12} />
-				Cancel
-			</Button>
-			<Button
-				variant="solid"
-				color="primary"
-				loading={isLoading}
-				onClick={onConfirm}
-				testId="confirm-apply-to-all"
-			>
-				<Check size={12} />
-				Apply to all
-			</Button>
-		</div>
-	);
-
-	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title="Apply variable to all panels"
-			width="narrow"
-			showCloseButton={false}
-			// Lift above the settings drawer (z ~1000); overlay off (it would only half-dim).
-			style={{ zIndex: 1100 }}
-			showOverlay={false}
-			footer={footer}
-		>
-			<div className={styles.body}>
-				Add <span className={styles.variableName}>${variableName}</span> as a filter
-				to every panel on this dashboard. Panels that already reference it are left
-				unchanged.
-			</div>
-		</DialogWrapper>
-	);
-}
-
-export default ApplyToAllDialog;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/VariableInfoForm/VariableInfoForm.tsx

@@ -4,7 +4,6 @@ import { Typography } from '@signozhq/ui/typography';
 import { Input as AntdInput } from 'antd';
 
 import styles from './VariableInfoForm.module.scss';
-import { DASHBOARD_NAME_MAX_LENGTH } from '../../../../constants';
 import variableFormStyles from '../../VariableForm/VariableForm.module.scss';
 
 interface VariableInfoFormProps {
@@ -31,7 +30,6 @@ function VariableInfoForm({
 					testId="variable-name"
 					className={styles.variableNameInput}
 					value={title}
-					maxLength={DASHBOARD_NAME_MAX_LENGTH}
 					onChange={(e): void => onTitleChange(e.target.value)}
 					placeholder="Unique name of the variable"
 				/>

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/index.tsx

@@ -1,16 +1,9 @@
 import { useEffect, useMemo, useState } from 'react';
-import { toast } from '@signozhq/ui/sonner';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 
 import settingsStyles from '../DashboardSettings.module.scss';
-import { useOptimisticPatch } from '../../hooks/useOptimisticPatch';
 import { useDashboardStore } from '../../store/useDashboardStore';
-import {
-	buildApplyVariableToPanelsPatch,
-	buildSyncVariableToPanelsPatch,
-	getPanelIdsReferencingVariable,
-} from './applyVariableToPanelsPatch';
 import { useSaveVariables } from './useSaveVariables';
 import { dtoToFormModel } from './variableAdapters';
 import {
@@ -21,7 +14,6 @@ import VariableForm from './VariableForm/VariableForm';
 import VariablesList from './VariablesList';
 import styles from './Variables.module.scss';
 import AddVariableButton from './components/AddVariableButton';
-import ApplyToAllDialog from './components/ApplyToAllDialog/ApplyToAllDialog';
 import NoVariablesCard from './components/NoVariablesCard/NoVariablesCard';
 import { EditingState } from './types';
 
@@ -31,13 +23,7 @@ interface VariablesSettingsProps {
 
 function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
-	// The drawer destroys on close, so reading this once on mount is enough to
-	// open the add-form when deep-linked (e.g. the bar's "Add variable" button).
-	const openAddOnMount = useDashboardStore(
-		(s) => s.settingsRequest?.addVariable ?? false,
-	);
 	const { save, isSaving } = useSaveVariables();
-	const { patchAsync, isPatching } = useOptimisticPatch();
 
 	const initialFormModels = useMemo(
 		() => dashboard.spec.variables.map(dtoToFormModel),
@@ -52,13 +38,10 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dashboard.updatedAt]);
 
-	const [isEditing, setIsEditing] = useState<EditingState>(
-		openAddOnMount && isEditable ? { type: 'new' } : null,
-	);
+	const [isEditing, setIsEditing] = useState<EditingState>(null);
 	const [confirmDeleteIndex, setConfirmDeleteIndex] = useState<number | null>(
 		null,
 	);
-	const [applyToAllIndex, setApplyToAllIndex] = useState<number | null>(null);
 
 	const editingFormModel: VariableFormModel | null = useMemo(() => {
 		if (!isEditing) {
@@ -74,64 +57,20 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		return variables.filter((_, i) => i !== self);
 	}, [variables, isEditing]);
 
-	const panelOptions = useMemo(
-		() =>
-			Object.entries(dashboard.spec.panels ?? {}).map(([id, panel]) => ({
-				value: id,
-				label: panel.spec?.display?.name || id,
-			})),
-		[dashboard.spec.panels],
-	);
-
-	// Panels the edited variable is already applied to — pre-checks the picker.
-	const appliedPanelIds = useMemo(() => {
-		if (!editingFormModel || editingFormModel.type !== 'DYNAMIC') {
-			return [];
-		}
-		return getPanelIdsReferencingVariable(
-			dashboard.spec.panels,
-			editingFormModel.dynamicAttribute,
-			editingFormModel.name,
-		);
-	}, [editingFormModel, dashboard.spec.panels]);
-
 	const persist = (next: VariableFormModel[]): void => {
 		setVariables(next);
 		void save(next);
 	};
 
-	const handleFormSave = (
-		formModel: VariableFormModel,
-		selectedPanelIds: string[],
-	): void => {
+	const handleFormSave = (Formmodel: VariableFormModel): void => {
 		const next = [...variables];
 		if (isEditing?.type === 'new') {
-			next.push(formModel);
+			next.push(Formmodel);
 		} else if (isEditing?.type === 'edit') {
-			next[isEditing.index] = formModel;
+			next[isEditing.index] = Formmodel;
 		}
 		setIsEditing(null);
-		setVariables(next);
-		void (async (): Promise<void> => {
-			const saved = await save(next);
-			if (!saved || formModel.type !== 'DYNAMIC') {
-				return;
-			}
-			const ops = buildSyncVariableToPanelsPatch(
-				dashboard.spec.panels,
-				formModel.dynamicAttribute,
-				formModel.name,
-				selectedPanelIds,
-			);
-			if (ops.length === 0) {
-				return;
-			}
-			try {
-				await patchAsync(ops);
-			} catch {
-				toast.error('Could not update panels');
-			}
-		})();
+		persist(next);
 	};
 
 	const handleMove = (from: number, to: number): void => {
@@ -149,32 +88,6 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		setConfirmDeleteIndex(null);
 	};
 
-	const applyToAllVariable =
-		applyToAllIndex === null ? null : variables[applyToAllIndex];
-
-	const handleConfirmApplyToAll = async (): Promise<void> => {
-		if (!applyToAllVariable) {
-			return;
-		}
-		const ops = buildApplyVariableToPanelsPatch(
-			dashboard.spec.panels,
-			applyToAllVariable.dynamicAttribute,
-			applyToAllVariable.name,
-		);
-		if (ops.length === 0) {
-			toast.info('No panels needed this filter.');
-			setApplyToAllIndex(null);
-			return;
-		}
-		try {
-			await patchAsync(ops);
-			toast.success(`Applied $${applyToAllVariable.name} to all panels`);
-		} catch {
-			toast.error('Could not apply the variable to panels');
-		}
-		setApplyToAllIndex(null);
-	};
-
 	if (editingFormModel) {
 		return (
 			<VariableForm
@@ -182,8 +95,6 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 				siblings={siblings}
 				isNew={isEditing?.type === 'new'}
 				isSaving={isSaving}
-				panelOptions={panelOptions}
-				appliedPanelIds={appliedPanelIds}
 				onClose={(): void => setIsEditing(null)}
 				onSave={handleFormSave}
 			/>
@@ -197,6 +108,9 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 				<NoVariablesCard isEditable={isEditable} setIsEditing={setIsEditing} />
 			) : (
 				<>
+					<div className={styles.header}>
+						<AddVariableButton isEditable={isEditable} setIsEditing={setIsEditing} />
+					</div>
 					<VariablesList
 						variables={variables}
 						canEdit={isEditable}
@@ -206,20 +120,9 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 						onConfirmDelete={handleConfirmDelete}
 						onCancelDelete={(): void => setConfirmDeleteIndex(null)}
 						onMove={handleMove}
-						onApplyToAll={(index): void => setApplyToAllIndex(index)}
 					/>
-					<div className={styles.footer}>
-						<AddVariableButton isEditable={isEditable} setIsEditing={setIsEditing} />
-					</div>
 				</>
 			)}
-			<ApplyToAllDialog
-				open={applyToAllVariable !== null}
-				variableName={applyToAllVariable?.name ?? ''}
-				isLoading={isPatching}
-				onConfirm={(): void => void handleConfirmApplyToAll()}
-				onClose={(): void => setApplyToAllIndex(null)}
-			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/types.ts

@@ -6,11 +6,6 @@ export type EditingState =
 	| { type: 'edit'; index: number }
 	| null;
 
-export interface PanelOption {
-	label: string;
-	value: string;
-}
-
 export interface VariableFormProps {
 	initial: VariableFormModel;
 	/** The other variables (excluding this one), for uniqueness & cycle checks. */
@@ -18,10 +13,6 @@ export interface VariableFormProps {
 	/** True when adding a new variable (enables auto-naming from the attribute). */
 	isNew: boolean;
 	isSaving: boolean;
-	/** All panels, for the dynamic "apply to panels" picker. */
-	panelOptions: PanelOption[];
-	/** Panels this variable is already applied to — pre-checks the picker. */
-	appliedPanelIds: string[];
 	onClose: () => void;
-	onSave: (model: VariableFormModel, selectedPanelIds: string[]) => void;
+	onSave: (model: VariableFormModel) => void;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters.ts

@@ -14,7 +14,6 @@ import type {
 
 import {
 	DYNAMIC_SIGNAL_ALL,
-	DYNAMIC_SIGNALS,
 	type DynamicSignalOption,
 	emptyVariableFormModel,
 	signalForApi,
@@ -69,12 +68,9 @@ export function dtoToFormModel(
 			...listCommon,
 			type: 'DYNAMIC',
 			dynamicAttribute: plugin.spec.name ?? '',
-			// Unrecognized/empty signal → "all telemetry", so the source always shows.
-			dynamicSignal: DYNAMIC_SIGNALS.includes(
-				plugin.spec.signal as DynamicSignalOption,
-			)
-				? (plugin.spec.signal as DynamicSignalOption)
-				: DYNAMIC_SIGNAL_ALL,
+			// An omitted wire signal means "all telemetry".
+			dynamicSignal:
+				(plugin.spec.signal as DynamicSignalOption) ?? DYNAMIC_SIGNAL_ALL,
 		};
 	}
 	// Default to Query (also covers a query plugin or a missing/unknown plugin).