fix(pr): split modal in smaller components

docs/api/openapi.yml

@@ -2917,13 +2917,6 @@ components:
         publicDashboard:
           $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
       type: object
-    DashboardtypesGettablePublicDashboardDataV2:
-      properties:
-        dashboard:
-          $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
-        publicDashboard:
-          $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
-      type: object
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -4251,8 +4244,6 @@ components:
           $ref: '#/components/schemas/InframonitoringtypesNodeCountsByReadiness'
         podCountsByPhase:
           $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
-        podCountsByStatus:
-          $ref: '#/components/schemas/InframonitoringtypesPodCountsByStatus'
       required:
       - clusterName
       - clusterCPU
@@ -4261,7 +4252,6 @@ components:
       - clusterMemoryAllocatable
       - nodeCountsByReadiness
       - podCountsByPhase
-      - podCountsByStatus
       - meta
       type: object
     InframonitoringtypesClusters:
@@ -4317,8 +4307,6 @@ components:
           type: object
         podCountsByPhase:
           $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
-        podCountsByStatus:
-          $ref: '#/components/schemas/InframonitoringtypesPodCountsByStatus'
       required:
       - daemonSetName
       - daemonSetCPU
@@ -4330,7 +4318,6 @@ components:
       - desiredNodes
       - currentNodes
       - podCountsByPhase
-      - podCountsByStatus
       - meta
       type: object
     InframonitoringtypesDaemonSets:
@@ -4386,8 +4373,6 @@ components:
           type: object
         podCountsByPhase:
           $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
-        podCountsByStatus:
-          $ref: '#/components/schemas/InframonitoringtypesPodCountsByStatus'
       required:
       - deploymentName
       - deploymentCPU
@@ -4399,7 +4384,6 @@ components:
       - desiredPods
       - availablePods
       - podCountsByPhase
-      - podCountsByStatus
       - meta
       type: object
     InframonitoringtypesDeployments:
@@ -4532,8 +4516,6 @@ components:
           type: object
         podCountsByPhase:
           $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
-        podCountsByStatus:
-          $ref: '#/components/schemas/InframonitoringtypesPodCountsByStatus'
         successfulPods:
           type: integer
       required:
@@ -4549,7 +4531,6 @@ components:
       - failedPods
       - successfulPods
       - podCountsByPhase
-      - podCountsByStatus
       - meta
       type: object
     InframonitoringtypesJobs:
@@ -4640,14 +4621,11 @@ components:
           type: string
         podCountsByPhase:
           $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
-        podCountsByStatus:
-          $ref: '#/components/schemas/InframonitoringtypesPodCountsByStatus'
       required:
       - namespaceName
       - namespaceCPU
       - namespaceMemory
       - podCountsByPhase
-      - podCountsByStatus
       - meta
       type: object
     InframonitoringtypesNamespaces:
@@ -4713,14 +4691,11 @@ components:
           type: string
         podCountsByPhase:
           $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
-        podCountsByStatus:
-          $ref: '#/components/schemas/InframonitoringtypesPodCountsByStatus'
       required:
       - nodeName
       - condition
       - nodeCountsByReadiness
       - podCountsByPhase
-      - podCountsByStatus
       - nodeCPU
       - nodeCPUAllocatable
       - nodeMemory
@@ -4766,64 +4741,6 @@ components:
       - failed
       - unknown
       type: object
-    InframonitoringtypesPodCountsByStatus:
-      properties:
-        completed:
-          type: integer
-        containerCannotRun:
-          type: integer
-        containerCreating:
-          type: integer
-        crashLoopBackOff:
-          type: integer
-        createContainerConfigError:
-          type: integer
-        errImagePull:
-          type: integer
-        error:
-          type: integer
-        evicted:
-          type: integer
-        failed:
-          type: integer
-        imagePullBackOff:
-          type: integer
-        nodeAffinity:
-          type: integer
-        nodeLost:
-          type: integer
-        oomKilled:
-          type: integer
-        pending:
-          type: integer
-        running:
-          type: integer
-        shutdown:
-          type: integer
-        unexpectedAdmissionError:
-          type: integer
-        unknown:
-          type: integer
-      required:
-      - pending
-      - running
-      - failed
-      - unknown
-      - crashLoopBackOff
-      - imagePullBackOff
-      - errImagePull
-      - createContainerConfigError
-      - containerCreating
-      - oomKilled
-      - completed
-      - error
-      - containerCannotRun
-      - evicted
-      - nodeAffinity
-      - nodeLost
-      - shutdown
-      - unexpectedAdmissionError
-      type: object
     InframonitoringtypesPodPhase:
       enum:
       - pending
@@ -4854,8 +4771,6 @@ components:
           type: number
         podCountsByPhase:
           $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
-        podCountsByStatus:
-          $ref: '#/components/schemas/InframonitoringtypesPodCountsByStatus'
         podMemory:
           format: double
           type: number
@@ -4867,11 +4782,6 @@ components:
           type: number
         podPhase:
           $ref: '#/components/schemas/InframonitoringtypesPodPhase'
-        podRestarts:
-          format: int64
-          type: integer
-        podStatus:
-          $ref: '#/components/schemas/InframonitoringtypesPodStatus'
         podUID:
           type: string
       required:
@@ -4884,34 +4794,9 @@ components:
       - podMemoryLimit
       - podPhase
       - podCountsByPhase
-      - podStatus
-      - podCountsByStatus
-      - podRestarts
       - podAge
       - meta
       type: object
-    InframonitoringtypesPodStatus:
-      enum:
-      - pending
-      - running
-      - failed
-      - unknown
-      - crashloopbackoff
-      - imagepullbackoff
-      - errimagepull
-      - createcontainerconfigerror
-      - containercreating
-      - oomkilled
-      - completed
-      - error
-      - containercannotrun
-      - evicted
-      - nodeaffinity
-      - nodelost
-      - shutdown
-      - unexpectedadmissionerror
-      - no_data
-      type: string
     InframonitoringtypesPods:
       properties:
         endTimeBeforeRetention:
@@ -5210,8 +5095,6 @@ components:
           type: object
         podCountsByPhase:
           $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
-        podCountsByStatus:
-          $ref: '#/components/schemas/InframonitoringtypesPodCountsByStatus'
         statefulSetCPU:
           format: double
           type: number
@@ -5243,7 +5126,6 @@ components:
       - desiredPods
       - currentPods
       - podCountsByPhase
-      - podCountsByStatus
       - meta
       type: object
     InframonitoringtypesStatefulSets:
@@ -5342,16 +5224,6 @@ components:
       - offset
       - limit
       type: object
-    LlmpricingruletypesGettableUnmappedModels:
-      properties:
-        items:
-          items:
-            $ref: '#/components/schemas/LlmpricingruletypesUnmappedModel'
-          nullable: true
-          type: array
-      required:
-      - items
-      type: object
     LlmpricingruletypesLLMPricingCacheCosts:
       properties:
         mode:
@@ -5441,19 +5313,6 @@ components:
         type: string
       nullable: true
       type: array
-    LlmpricingruletypesUnmappedModel:
-      properties:
-        modelName:
-          type: string
-        provider:
-          type: string
-        spanCount:
-          minimum: 0
-          type: integer
-      required:
-      - modelName
-      - spanCount
-      type: object
     LlmpricingruletypesUpdatableLLMPricingRule:
       properties:
         enabled:
@@ -11331,60 +11190,6 @@ paths:
       summary: Get a pricing rule
       tags:
       - llmpricingrules
-  /api/v1/llm_pricing_rules/unmapped_models:
-    get:
-      deprecated: false
-      description: Returns models seen in the last hour of trace data (gen_ai.request.model)
-        that no pricing rule pattern matches, so the user can add them to an existing
-        rule or create a new one.
-      operationId: ListUnmappedLLMModels
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/LlmpricingruletypesGettableUnmappedModels'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: List unmapped models
-      tags:
-      - llmpricingrules
   /api/v1/logs/promote_paths:
     get:
       deprecated: false
@@ -17636,138 +17441,6 @@ paths:
       summary: Update my organization
       tags:
       - orgs
-  /api/v2/public/dashboards/{id}:
-    get:
-      deprecated: false
-      description: This endpoint returns the sanitized v2-shape dashboard data for
-        public access. Each panel query is reduced to a safe field subset, so filters
-        and raw query strings are not exposed.
-      operationId: GetPublicDashboardDataV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesGettablePublicDashboardDataV2'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - anonymous:
-        - public-dashboard:read
-      summary: Get public dashboard data (v2)
-      tags:
-      - dashboard
-  /api/v2/public/dashboards/{id}/panels/{key}/query_range:
-    get:
-      deprecated: false
-      description: This endpoint returns query range results for a panel of a v2-shape
-        public dashboard. The panel is addressed by its key in spec.panels.
-      operationId: GetPublicDashboardPanelQueryRangeV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: key
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/Querybuildertypesv5QueryRangeResponse'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - anonymous:
-        - public-dashboard:read
-      summary: Get query range result (v2)
-      tags:
-      - dashboard
   /api/v2/readyz:
     get:
       operationId: Readyz

ee/modules/dashboard/impldashboard/module.go

@@ -29,7 +29,6 @@ type module struct {
 	settings           factory.ScopedProviderSettings
 	querier            querier.Querier
 	licensing          licensing.Licensing
-	tagModule          tag.Module
 }
 
 func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
@@ -42,7 +41,6 @@ func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, an
 		settings:           scopedProviderSettings,
 		querier:            querier,
 		licensing:          licensing,
-		tagModule:          tagModule,
 	}
 }
 
@@ -134,55 +132,6 @@ func (module *module) GetPublicWidgetQueryRange(ctx context.Context, id valuer.U
 	return module.querier.QueryRange(ctx, dashboard.OrgID, query)
 }
 
-func (module *module) GetDashboardByPublicIDV2(ctx context.Context, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
-	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
-	if err != nil {
-		return nil, err
-	}
-
-	tags, err := module.tagModule.ListForResource(ctx, storableDashboard.OrgID, coretypes.KindDashboard, storableDashboard.ID)
-	if err != nil {
-		return nil, err
-	}
-
-	return storableDashboard.ToDashboardV2(tags)
-}
-
-func (module *module) GetPublicWidgetQueryRangeV2(ctx context.Context, id valuer.UUID, panelKey, startTimeRaw, endTimeRaw string) (*querybuildertypesv5.QueryRangeResponse, error) {
-	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
-		instrumentationtypes.CodeNamespace:    "dashboard",
-		instrumentationtypes.CodeFunctionName: "GetPublicWidgetQueryRangeV2",
-	})
-
-	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
-	if err != nil {
-		return nil, err
-	}
-
-	// tags are not needed for query range.
-	dashboard, err := storableDashboard.ToDashboardV2(nil)
-	if err != nil {
-		return nil, err
-	}
-
-	publicDashboard, err := module.GetPublic(ctx, dashboard.OrgID, dashboard.ID)
-	if err != nil {
-		return nil, err
-	}
-
-	startTime, endTime, err := publicDashboard.ResolveTimeRange(startTimeRaw, endTimeRaw)
-	if err != nil {
-		return nil, err
-	}
-
-	query, err := dashboard.GetPanelQuery(startTime, endTime, panelKey)
-	if err != nil {
-		return nil, err
-	}
-
-	return module.querier.QueryRange(ctx, dashboard.OrgID, query)
-}
-
 func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publicDashboard *dashboardtypes.PublicDashboard) error {
 	_, err := module.licensing.GetActive(ctx, orgID)
 	if err != nil {

frontend/.oxlintrc.json

@@ -293,8 +293,6 @@
     // Forces subpath imports (@signozhq/ui/<component>) instead of the eagerly-loaded barrel
     "signoz/no-css-module-bracket-access": "warn",
     // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
-    "signoz/no-dashboard-fetch-outside-root": "error",
-    // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
     "no-restricted-globals": [
       "error",
       {
@@ -560,18 +558,6 @@
       "rules": {
         "signoz/no-zustand-getstate-in-hooks": "off"
       }
-    },
-    {
-      // Root V2 pages own the dashboard fetch lifecycle; useDashboardFetchRequired wraps it.
-      // Everywhere else must use useDashboardFetchRequired().
-      "files": [
-        "src/pages/DashboardPageV2/DashboardPageV2.tsx",
-        "src/pages/DashboardPageV2/PanelEditorPage/PanelEditorPage.tsx",
-        "src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired.ts"
-      ],
-      "rules": {
-        "signoz/no-dashboard-fetch-outside-root": "off"
-      }
     }
   ]
 }

frontend/__mocks__/lib/env.ts

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

frontend/jest.config.ts

@@ -29,6 +29,7 @@ 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/plugins/rules/no-dashboard-fetch-outside-root.mjs

@@ -1,48 +0,0 @@
-/**
- * Rule: no-dashboard-fetch-outside-root
- *
- * `useDashboardFetch` owns the V2 dashboard fetch and exposes its loading/error/refetch
- * lifecycle. That lifecycle is a root-page concern: DashboardPageV2 and PanelEditorPage
- * gate their subtree on a resolved dashboard before mounting anything below them.
- *
- * Every other component therefore renders inside an already-loaded subtree and must use
- * `useDashboardFetchRequired`, which reuses the same react-query cache entry but guarantees
- * a non-undefined dashboard (throwing otherwise) — so consumers don't re-handle states the
- * root page already owns.
- *
- * This rule flags `useDashboardFetch` imports. It is disabled via an override in
- * .oxlintrc.json for the two root pages and for useDashboardFetchRequired.ts (which wraps it).
- */
-
-const FETCH_HOOK = 'useDashboardFetch';
-
-export default {
-	meta: {
-		type: 'suggestion',
-		docs: {
-			description:
-				'Disallow useDashboardFetch outside the root dashboard pages; use useDashboardFetchRequired instead',
-			category: 'Dashboard V2',
-		},
-		schema: [],
-		messages: {
-			useRequired:
-				'Use useDashboardFetchRequired() instead of useDashboardFetch — the latter is reserved for the root pages (DashboardPageV2, PanelEditorPage) that own the fetch lifecycle. Components below them render inside a loaded subtree and should assume a guaranteed dashboard.',
-		},
-	},
-
-	create(context) {
-		return {
-			ImportDeclaration(node) {
-				node.specifiers.forEach((specifier) => {
-					if (
-						specifier.type === 'ImportSpecifier' &&
-						specifier.imported.name === FETCH_HOOK
-					) {
-						context.report({ node: specifier, messageId: 'useRequired' });
-					}
-				});
-			},
-		};
-	},
-};

frontend/plugins/signoz.mjs

@@ -12,7 +12,6 @@ import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
 import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
-import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
 
 export default {
 	meta: {
@@ -26,6 +25,5 @@ export default {
 		'no-antd-components': noAntdComponents,
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
 		'no-css-module-bracket-access': noCssModuleBracketAccess,
-		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
 	},
 };

frontend/src/api/generated/services/dashboard/index.ts

@@ -38,10 +38,6 @@ import type {
 	GetPublicDashboard200,
 	GetPublicDashboardData200,
 	GetPublicDashboardDataPathParameters,
-	GetPublicDashboardDataV2200,
-	GetPublicDashboardDataV2PathParameters,
-	GetPublicDashboardPanelQueryRangeV2200,
-	GetPublicDashboardPanelQueryRangeV2PathParameters,
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
@@ -1803,217 +1799,6 @@ export const useLockDashboardV2 = <
 > => {
 	return useMutation(getLockDashboardV2MutationOptions(options));
 };
-/**
- * This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.
- * @summary Get public dashboard data (v2)
- */
-export const getPublicDashboardDataV2 = (
-	{ id }: GetPublicDashboardDataV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetPublicDashboardDataV2200>({
-		url: `/api/v2/public/dashboards/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetPublicDashboardDataV2QueryKey = ({
-	id,
-}: GetPublicDashboardDataV2PathParameters) => {
-	return [`/api/v2/public/dashboards/${id}`] as const;
-};
-
-export const getGetPublicDashboardDataV2QueryOptions = <
-	TData = Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetPublicDashboardDataV2PathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetPublicDashboardDataV2QueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getPublicDashboardDataV2>>
-	> = ({ signal }) => getPublicDashboardDataV2({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetPublicDashboardDataV2QueryResult = NonNullable<
-	Awaited<ReturnType<typeof getPublicDashboardDataV2>>
->;
-export type GetPublicDashboardDataV2QueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get public dashboard data (v2)
- */
-
-export function useGetPublicDashboardDataV2<
-	TData = Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetPublicDashboardDataV2PathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetPublicDashboardDataV2QueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get public dashboard data (v2)
- */
-export const invalidateGetPublicDashboardDataV2 = async (
-	queryClient: QueryClient,
-	{ id }: GetPublicDashboardDataV2PathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetPublicDashboardDataV2QueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint returns query range results for a panel of a v2-shape public dashboard. The panel is addressed by its key in spec.panels.
- * @summary Get query range result (v2)
- */
-export const getPublicDashboardPanelQueryRangeV2 = (
-	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetPublicDashboardPanelQueryRangeV2200>({
-		url: `/api/v2/public/dashboards/${id}/panels/${key}/query_range`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetPublicDashboardPanelQueryRangeV2QueryKey = ({
-	id,
-	key,
-}: GetPublicDashboardPanelQueryRangeV2PathParameters) => {
-	return [`/api/v2/public/dashboards/${id}/panels/${key}/query_range`] as const;
-};
-
-export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
-	TData = Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>
-	> = ({ signal }) => getPublicDashboardPanelQueryRangeV2({ id, key }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!(id && key),
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetPublicDashboardPanelQueryRangeV2QueryResult = NonNullable<
-	Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>
->;
-export type GetPublicDashboardPanelQueryRangeV2QueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get query range result (v2)
- */
-
-export function useGetPublicDashboardPanelQueryRangeV2<
-	TData = Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetPublicDashboardPanelQueryRangeV2QueryOptions(
-		{ id, key },
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get query range result (v2)
- */
-export const invalidateGetPublicDashboardPanelQueryRangeV2 = async (
-	queryClient: QueryClient,
-	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key }) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
  * Same as ListDashboardsV2 but personalized for the calling user: each dashboard carries the caller's `pinned` state, and pinned dashboards float to the top of the requested ordering. Supports the same filter DSL, sort, order, and pagination.
  * @summary List dashboards for the current user (v2)

frontend/src/api/generated/services/llmpricingrules/index.ts

@@ -23,7 +23,6 @@ import type {
 	GetLLMPricingRulePathParameters,
 	ListLLMPricingRules200,
 	ListLLMPricingRulesParams,
-	ListUnmappedLLMModels200,
 	LlmpricingruletypesUpdatableLLMPricingRulesDTO,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
@@ -394,87 +393,3 @@ export const invalidateGetLLMPricingRule = async (
 
 	return queryClient;
 };
-
-/**
- * Returns models seen in the last hour of trace data (gen_ai.request.model) that no pricing rule pattern matches, so the user can add them to an existing rule or create a new one.
- * @summary List unmapped models
- */
-export const listUnmappedLLMModels = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<ListUnmappedLLMModels200>({
-		url: `/api/v1/llm_pricing_rules/unmapped_models`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListUnmappedLLMModelsQueryKey = () => {
-	return [`/api/v1/llm_pricing_rules/unmapped_models`] as const;
-};
-
-export const getListUnmappedLLMModelsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listUnmappedLLMModels>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListUnmappedLLMModelsQueryKey();
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listUnmappedLLMModels>>
-	> = ({ signal }) => listUnmappedLLMModels(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListUnmappedLLMModelsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listUnmappedLLMModels>>
->;
-export type ListUnmappedLLMModelsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List unmapped models
- */
-
-export function useListUnmappedLLMModels<
-	TData = Awaited<ReturnType<typeof listUnmappedLLMModels>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListUnmappedLLMModelsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary List unmapped models
- */
-export const invalidateListUnmappedLLMModels = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListUnmappedLLMModelsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -4941,11 +4941,6 @@ export interface DashboardtypesGettablePublicDashboardDataDTO {
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
 }
 
-export interface DashboardtypesGettablePublicDashboardDataV2DTO {
-	dashboard?: DashboardtypesGettableDashboardV2DTO;
-	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
-}
-
 export enum DashboardtypesPatchOpDTO {
 	add = 'add',
 	remove = 'remove',
@@ -5693,81 +5688,6 @@ export interface InframonitoringtypesPodCountsByPhaseDTO {
 	unknown: number;
 }
 
-export interface InframonitoringtypesPodCountsByStatusDTO {
-	/**
-	 * @type integer
-	 */
-	completed: number;
-	/**
-	 * @type integer
-	 */
-	containerCannotRun: number;
-	/**
-	 * @type integer
-	 */
-	containerCreating: number;
-	/**
-	 * @type integer
-	 */
-	crashLoopBackOff: number;
-	/**
-	 * @type integer
-	 */
-	createContainerConfigError: number;
-	/**
-	 * @type integer
-	 */
-	errImagePull: number;
-	/**
-	 * @type integer
-	 */
-	error: number;
-	/**
-	 * @type integer
-	 */
-	evicted: number;
-	/**
-	 * @type integer
-	 */
-	failed: number;
-	/**
-	 * @type integer
-	 */
-	imagePullBackOff: number;
-	/**
-	 * @type integer
-	 */
-	nodeAffinity: number;
-	/**
-	 * @type integer
-	 */
-	nodeLost: number;
-	/**
-	 * @type integer
-	 */
-	oomKilled: number;
-	/**
-	 * @type integer
-	 */
-	pending: number;
-	/**
-	 * @type integer
-	 */
-	running: number;
-	/**
-	 * @type integer
-	 */
-	shutdown: number;
-	/**
-	 * @type integer
-	 */
-	unexpectedAdmissionError: number;
-	/**
-	 * @type integer
-	 */
-	unknown: number;
-}
-
 export interface InframonitoringtypesClusterRecordDTO {
 	/**
 	 * @type number
@@ -5799,7 +5719,6 @@ export interface InframonitoringtypesClusterRecordDTO {
 	meta: InframonitoringtypesClusterRecordDTOMeta;
 	nodeCountsByReadiness: InframonitoringtypesNodeCountsByReadinessDTO;
 	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
-	podCountsByStatus: InframonitoringtypesPodCountsByStatusDTO;
 }
 
 export enum InframonitoringtypesResponseTypeDTO {
@@ -5903,7 +5822,6 @@ export interface InframonitoringtypesDaemonSetRecordDTO {
 	 */
 	meta: InframonitoringtypesDaemonSetRecordDTOMeta;
 	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
-	podCountsByStatus: InframonitoringtypesPodCountsByStatusDTO;
 }
 
 export interface InframonitoringtypesDaemonSetsDTO {
@@ -5981,7 +5899,6 @@ export interface InframonitoringtypesDeploymentRecordDTO {
 	 */
 	meta: InframonitoringtypesDeploymentRecordDTOMeta;
 	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
-	podCountsByStatus: InframonitoringtypesPodCountsByStatusDTO;
 }
 
 export interface InframonitoringtypesDeploymentsDTO {
@@ -6148,7 +6065,6 @@ export interface InframonitoringtypesJobRecordDTO {
 	 */
 	meta: InframonitoringtypesJobRecordDTOMeta;
 	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
-	podCountsByStatus: InframonitoringtypesPodCountsByStatusDTO;
 	/**
 	 * @type integer
 	 */
@@ -6202,7 +6118,6 @@ export interface InframonitoringtypesNamespaceRecordDTO {
 	 */
 	namespaceName: string;
 	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
-	podCountsByStatus: InframonitoringtypesPodCountsByStatusDTO;
 }
 
 export interface InframonitoringtypesNamespacesDTO {
@@ -6269,7 +6184,6 @@ export interface InframonitoringtypesNodeRecordDTO {
 	 */
 	nodeName: string;
 	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
-	podCountsByStatus: InframonitoringtypesPodCountsByStatusDTO;
 }
 
 export interface InframonitoringtypesNodesDTO {
@@ -6307,27 +6221,6 @@ export type InframonitoringtypesPodRecordDTOMetaAnyOf = {
 export type InframonitoringtypesPodRecordDTOMeta =
 	InframonitoringtypesPodRecordDTOMetaAnyOf | null;
 
-export enum InframonitoringtypesPodStatusDTO {
-	pending = 'pending',
-	running = 'running',
-	failed = 'failed',
-	unknown = 'unknown',
-	crashloopbackoff = 'crashloopbackoff',
-	imagepullbackoff = 'imagepullbackoff',
-	errimagepull = 'errimagepull',
-	createcontainerconfigerror = 'createcontainerconfigerror',
-	containercreating = 'containercreating',
-	oomkilled = 'oomkilled',
-	completed = 'completed',
-	error = 'error',
-	containercannotrun = 'containercannotrun',
-	evicted = 'evicted',
-	nodeaffinity = 'nodeaffinity',
-	nodelost = 'nodelost',
-	shutdown = 'shutdown',
-	unexpectedadmissionerror = 'unexpectedadmissionerror',
-	no_data = 'no_data',
-}
 export interface InframonitoringtypesPodRecordDTO {
 	/**
 	 * @type object,null
@@ -6354,7 +6247,6 @@ export interface InframonitoringtypesPodRecordDTO {
 	 */
 	podCPURequest: number;
 	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
-	podCountsByStatus: InframonitoringtypesPodCountsByStatusDTO;
 	/**
 	 * @type number
 	 * @format double
@@ -6371,12 +6263,6 @@ export interface InframonitoringtypesPodRecordDTO {
 	 */
 	podMemoryRequest: number;
 	podPhase: InframonitoringtypesPodPhaseDTO;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	podRestarts: number;
-	podStatus: InframonitoringtypesPodStatusDTO;
 	/**
 	 * @type string
 	 */
@@ -6694,7 +6580,6 @@ export interface InframonitoringtypesStatefulSetRecordDTO {
 	 */
 	meta: InframonitoringtypesStatefulSetRecordDTOMeta;
 	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
-	podCountsByStatus: InframonitoringtypesPodCountsByStatusDTO;
 	/**
 	 * @type number
 	 * @format double
@@ -6933,29 +6818,6 @@ export interface LlmpricingruletypesGettablePricingRulesDTO {
 	total: number;
 }
 
-export interface LlmpricingruletypesUnmappedModelDTO {
-	/**
-	 * @type string
-	 */
-	modelName: string;
-	/**
-	 * @type string
-	 */
-	provider?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	spanCount: number;
-}
-
-export interface LlmpricingruletypesGettableUnmappedModelsDTO {
-	/**
-	 * @type array,null
-	 */
-	items: LlmpricingruletypesUnmappedModelDTO[] | null;
-}
-
 export interface LlmpricingruletypesUpdatableLLMPricingRuleDTO {
 	/**
 	 * @type boolean
@@ -10306,14 +10168,6 @@ export type GetLLMPricingRule200 = {
 	status: string;
 };
 
-export type ListUnmappedLLMModels200 = {
-	data: LlmpricingruletypesGettableUnmappedModelsDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListPromotedAndIndexedPaths200 = {
 	/**
 	 * @type array,null
@@ -11307,29 +11161,6 @@ export type GetMyOrganization200 = {
 	status: string;
 };
 
-export type GetPublicDashboardDataV2PathParameters = {
-	id: string;
-};
-export type GetPublicDashboardDataV2200 = {
-	data: DashboardtypesGettablePublicDashboardDataV2DTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetPublicDashboardPanelQueryRangeV2PathParameters = {
-	id: string;
-	key: string;
-};
-export type GetPublicDashboardPanelQueryRangeV2200 = {
-	data: Querybuildertypesv5QueryRangeResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type Readyz200 = {
 	data: FactoryResponseDTO;
 	/**

frontend/src/components/ExplorerCard/constants.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 
 export const ExploreHeaderToolTip = {
-	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
+	url: 'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
 };
 

frontend/src/components/Graph/utils.ts

@@ -1,14 +1,5 @@
 import { MutableRefObject } from 'react';
-import {
-	ActiveElement,
-	Chart,
-	ChartConfiguration,
-	ChartData,
-	ChartEvent,
-	ChartType,
-	Color,
-	TooltipItem,
-} from 'chart.js';
+import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -69,189 +60,184 @@ export const getGraphOptions = (
 	minTime?: number,
 	maxTime?: number,
 	// eslint-disable-next-line sonarjs/cognitive-complexity
-): CustomChartOptions =>
-	({
-		animation: {
-			duration: animate ? 200 : 0,
-		},
-		responsive: true,
-		maintainAspectRatio: false,
-		interaction: {
-			mode: 'index',
-			intersect: true,
-		},
-		plugins: {
-			...(staticLine
-				? {
-						annotation: {
-							annotations: [
-								{
-									type: 'line',
-									yMin: staticLine.yMin,
-									yMax: staticLine.yMax,
-									borderColor: staticLine.borderColor,
-									borderWidth: staticLine.borderWidth,
-									label: {
-										content: staticLine.lineText,
-										enabled: true,
-										font: {
-											size: 10,
-										},
-										borderWidth: 0,
-										position: 'start',
-										backgroundColor: 'transparent',
-										color: staticLine.textColor,
+): CustomChartOptions => ({
+	animation: {
+		duration: animate ? 200 : 0,
+	},
+	responsive: true,
+	maintainAspectRatio: false,
+	interaction: {
+		mode: 'index',
+		intersect: true,
+	},
+	plugins: {
+		...(staticLine
+			? {
+					annotation: {
+						annotations: [
+							{
+								type: 'line',
+								yMin: staticLine.yMin,
+								yMax: staticLine.yMax,
+								borderColor: staticLine.borderColor,
+								borderWidth: staticLine.borderWidth,
+								label: {
+									content: staticLine.lineText,
+									enabled: true,
+									font: {
+										size: 10,
 									},
+									borderWidth: 0,
+									position: 'start',
+									backgroundColor: 'transparent',
+									color: staticLine.textColor,
 								},
-							],
-						},
-					}
-				: {}),
-			title: {
-				display: title !== undefined,
-				text: title,
-			},
-			legend: {
-				display: false,
-			},
-			tooltip: {
-				callbacks: {
-					title(context: TooltipItem<'line'>[]): string | string[] {
-						const date = dayjs(context[0].parsed.x);
-						return date
-							.tz(timezone.value)
-							.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
+							},
+						],
 					},
-					label(context: TooltipItem<'line'>): string | string[] {
-						let label = context.dataset.label || '';
-
-						if (label) {
-							label += ': ';
-						}
-						if (context.parsed.y !== null) {
-							label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
-						}
-
-						return label;
-					},
-					labelTextColor(labelData: TooltipItem<'line'>): Color {
-						if (labelData.datasetIndex === nearestDatasetIndex.current) {
-							return 'rgba(255, 255, 255, 1)';
-						}
-
-						return 'rgba(255, 255, 255, 0.75)';
-					},
-				},
-				position: 'custom',
-				itemSort(item1: TooltipItem<'line'>, item2: TooltipItem<'line'>): number {
-					return item2.parsed.y - item1.parsed.y;
-				},
-			},
-			[dragSelectPluginId]: createDragSelectPluginOptions(
-				!!onDragSelect,
-				onDragSelect,
-				dragSelectColor,
-			),
-			[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
-				!!onDragSelect,
-				currentTheme === 'dark' ? 'white' : 'black',
-			),
-		},
-		layout: {
-			padding: 0,
-		},
-		scales: {
-			x: {
-				stacked: isStacked,
-				offset: false,
-				grid: {
-					display: true,
-					color: getGridColor(),
-					drawTicks: true,
-				},
-				adapters: {
-					date: chartjsAdapter,
-				},
-				time: {
-					unit: xAxisTimeUnit?.unitName || 'minute',
-					stepSize: xAxisTimeUnit?.stepSize || 1,
-					displayFormats: {
-						millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
-						second: DATE_TIME_FORMATS.TIME_SECONDS,
-						minute: DATE_TIME_FORMATS.TIME,
-						hour: DATE_TIME_FORMATS.SLASH_SHORT,
-						day: DATE_TIME_FORMATS.DATE_SHORT,
-						week: DATE_TIME_FORMATS.DATE_SHORT,
-						month: DATE_TIME_FORMATS.YEAR_MONTH,
-						year: DATE_TIME_FORMATS.YEAR_SHORT,
-					},
-				},
-				type: 'time',
-				ticks: { color: getAxisLabelColor(currentTheme) },
-				...(minTime && {
-					min: dayjs(minTime).tz(timezone.value).format(),
-				}),
-				...(maxTime && {
-					max: dayjs(maxTime).tz(timezone.value).format(),
-				}),
-			},
-			y: {
-				stacked: isStacked,
-				display: true,
-				grid: {
-					display: true,
-					color: getGridColor(),
-				},
-				ticks: {
-					color: getAxisLabelColor(currentTheme),
-					// Include a dollar sign in the ticks
-					callback(value: number | string): string {
-						return getYAxisFormattedValue(value.toString(), yAxisUnit);
-					},
-				},
-			},
-		},
-		elements: {
-			line: {
-				tension: 0,
-				cubicInterpolationMode: 'monotone',
-			},
-			point: {
-				hoverBackgroundColor: (ctx: any): string => {
-					if (ctx?.element?.options?.borderColor) {
-						return ctx.element.options.borderColor;
-					}
-					return 'rgba(0,0,0,0.1)';
-				},
-				hoverRadius: 5,
-			},
-		},
-		onClick: (
-			event: ChartEvent,
-			element: ActiveElement[],
-			chart: Chart,
-		): void => {
-			if (onClickHandler) {
-				onClickHandler(event, element, chart, data);
-			}
-		},
-		onHover: (event: ChartEvent, _: ActiveElement[], chart: Chart): void => {
-			if (event.native) {
-				const interactions = chart.getElementsAtEventForMode(
-					event.native,
-					'nearest',
-					{
-						intersect: false,
-					},
-					true,
-				);
-
-				if (interactions[0]) {
-					nearestDatasetIndex.current = interactions[0].datasetIndex;
 				}
-			}
+			: {}),
+		title: {
+			display: title !== undefined,
+			text: title,
 		},
-	}) as CustomChartOptions;
+		legend: {
+			display: false,
+		},
+		tooltip: {
+			callbacks: {
+				title(context): string | string[] {
+					const date = dayjs(context[0].parsed.x);
+					return date
+						.tz(timezone.value)
+						.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
+				},
+				label(context): string | string[] {
+					let label = context.dataset.label || '';
+
+					if (label) {
+						label += ': ';
+					}
+					if (context.parsed.y !== null) {
+						label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
+					}
+
+					return label;
+				},
+				labelTextColor(labelData): Color {
+					if (labelData.datasetIndex === nearestDatasetIndex.current) {
+						return 'rgba(255, 255, 255, 1)';
+					}
+
+					return 'rgba(255, 255, 255, 0.75)';
+				},
+			},
+			position: 'custom',
+			itemSort(item1, item2): number {
+				return item2.parsed.y - item1.parsed.y;
+			},
+		},
+		[dragSelectPluginId]: createDragSelectPluginOptions(
+			!!onDragSelect,
+			onDragSelect,
+			dragSelectColor,
+		),
+		[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
+			!!onDragSelect,
+			currentTheme === 'dark' ? 'white' : 'black',
+		),
+	},
+	layout: {
+		padding: 0,
+	},
+	scales: {
+		x: {
+			stacked: isStacked,
+			offset: false,
+			grid: {
+				display: true,
+				color: getGridColor(),
+				drawTicks: true,
+			},
+			adapters: {
+				date: chartjsAdapter,
+			},
+			time: {
+				unit: xAxisTimeUnit?.unitName || 'minute',
+				stepSize: xAxisTimeUnit?.stepSize || 1,
+				displayFormats: {
+					millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
+					second: DATE_TIME_FORMATS.TIME_SECONDS,
+					minute: DATE_TIME_FORMATS.TIME,
+					hour: DATE_TIME_FORMATS.SLASH_SHORT,
+					day: DATE_TIME_FORMATS.DATE_SHORT,
+					week: DATE_TIME_FORMATS.DATE_SHORT,
+					month: DATE_TIME_FORMATS.YEAR_MONTH,
+					year: DATE_TIME_FORMATS.YEAR_SHORT,
+				},
+			},
+			type: 'time',
+			ticks: { color: getAxisLabelColor(currentTheme) },
+			...(minTime && {
+				min: dayjs(minTime).tz(timezone.value).format(),
+			}),
+			...(maxTime && {
+				max: dayjs(maxTime).tz(timezone.value).format(),
+			}),
+		},
+		y: {
+			stacked: isStacked,
+			display: true,
+			grid: {
+				display: true,
+				color: getGridColor(),
+			},
+			ticks: {
+				color: getAxisLabelColor(currentTheme),
+				// Include a dollar sign in the ticks
+				callback(value): string {
+					return getYAxisFormattedValue(value.toString(), yAxisUnit);
+				},
+			},
+		},
+	},
+	elements: {
+		line: {
+			tension: 0,
+			cubicInterpolationMode: 'monotone',
+		},
+		point: {
+			hoverBackgroundColor: (ctx: any): string => {
+				if (ctx?.element?.options?.borderColor) {
+					return ctx.element.options.borderColor;
+				}
+				return 'rgba(0,0,0,0.1)';
+			},
+			hoverRadius: 5,
+		},
+	},
+	onClick: (event, element, chart): void => {
+		if (onClickHandler) {
+			onClickHandler(event, element, chart, data);
+		}
+	},
+	onHover: (event, _, chart): void => {
+		if (event.native) {
+			const interactions = chart.getElementsAtEventForMode(
+				event.native,
+				'nearest',
+				{
+					intersect: false,
+				},
+				true,
+			);
+
+			if (interactions[0]) {
+				nearestDatasetIndex.current = interactions[0].datasetIndex;
+			}
+		}
+	},
+});
 
 declare module 'chart.js' {
 	interface TooltipPositionerMap {

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -131,7 +131,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 												Set the time interval for aggregation
 												<br />
 												<a
-													href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+													href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 													target="_blank"
 													rel="noopener noreferrer"
 													style={{ color: '#1890ff', textDecoration: 'underline' }}
@@ -254,7 +254,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										Set the time interval for aggregation
 										<br />
 										<a
-											href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+											href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 											target="_blank"
 											rel="noopener noreferrer"
 											style={{ color: '#1890ff', textDecoration: 'underline' }}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -52,7 +52,7 @@ const ADD_ONS = [
 		key: ADD_ONS_KEYS.GROUP_BY,
 		description:
 			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
-		docLink: 'https://signoz.io/docs/querying/aggregation-grouping/#grouping',
+		docLink: 'https://signoz.io/docs/userguide/query-builder-v5/#grouping',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -61,7 +61,7 @@ const ADD_ONS = [
 		description:
 			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
 		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having',
+			'https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -70,7 +70,7 @@ const ADD_ONS = [
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#sorting--limiting',
+			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -79,7 +79,7 @@ const ADD_ONS = [
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#how-limit-works-for-time-series',
+			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -88,7 +88,7 @@ const ADD_ONS = [
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
-			'https://signoz.io/docs/querying/aggregation-grouping/#legend-formatting',
+			'https://signoz.io/docs/userguide/query-builder-v5/#legend-formatting',
 	},
 ];
 
@@ -99,7 +99,7 @@ const REDUCE_TO = {
 	description:
 		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
 	docLink:
-		'https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation',
+		'https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations',
 };
 
 const hasValue = (value: unknown): boolean =>
@@ -349,7 +349,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Group By"
 											description="Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments."
-											docLink="https://signoz.io/docs/querying/aggregation-grouping/#grouping"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#grouping"
 										/>
 									}
 									placement="top"
@@ -385,7 +385,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Having"
 											description="Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500"
-											docLink="https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having"
 										/>
 									}
 									placement="top"
@@ -434,7 +434,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Order By"
 											description="Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers."
-											docLink="https://signoz.io/docs/querying/result-manipulation/#sorting--limiting"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting"
 										/>
 									}
 									placement="top"
@@ -473,7 +473,7 @@ function QueryAddOns({
 											<TooltipContent
 												label="Reduce to"
 												description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
-												docLink="https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation"
+												docLink="https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations"
 											/>
 										}
 										placement="top"

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -65,7 +65,7 @@ function QueryAggregationOptions({
 									Set the time interval for aggregation
 									<br />
 									<a
-										href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+										href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 										target="_blank"
 										rel="noopener noreferrer"
 										style={{ color: '#1890ff', textDecoration: 'underline' }}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -676,7 +676,7 @@ function QueryAggregationSelect({
 						</span>
 						<br />
 						<a
-							href="https://signoz.io/docs/querying/aggregation-grouping/#core-aggregation-functions-logs--traces"
+							href="https://signoz.io/docs/userguide/query-builder-v5/#core-aggregation-functions"
 							target="_blank"
 							rel="noopener noreferrer"
 							style={{ color: '#1890ff', textDecoration: 'underline' }}

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -44,7 +44,7 @@ function TraceOperatorSection({
 					<div style={{ textAlign: 'center' }}>
 						Add Trace Matching
 						<Typography.Link
-							href="https://signoz.io/docs/querying/multi-query-analysis/#trace-matching"
+							href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-trace-operators"
 							target="_blank"
 							style={{ textDecoration: 'underline' }}
 						>
@@ -106,7 +106,7 @@ export default function QueryFooter({
 								<div style={{ textAlign: 'center' }}>
 									Add New Formula
 									<Typography.Link
-										href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
+										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
 										target="_blank"
 										style={{ textDecoration: 'underline' }}
 									>

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -22,6 +22,7 @@ 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';
 
@@ -30,6 +31,33 @@ 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;
@@ -110,6 +138,7 @@ 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
@@ -146,37 +175,57 @@ 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'}
-							>
-								<span
-									className={cx('cmd-item-icon', it.id === 'ai-assistant' && 'noz-icon')}
+		<>
+			<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'}
 								>
-									{it.icon}
-								</span>
-								{it.name}
-								{it.shortcut && it.shortcut.length > 0 && (
-									<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
-								)}
-							</CommandItem>
-						))}
-					</CommandGroup>
-				))}
-			</CommandList>
-		</CommandDialog>
+									<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>
+			)}
+		</>
 	);
 }

frontend/src/constants/apDex.ts

@@ -1,5 +1,5 @@
 export const apDexToolTipText =
 	"Apdex is a way to measure your users' satisfaction with the response time of your web service. It's represented as a score from 0-1.";
 export const apDexToolTipUrl =
-	'https://signoz.io/docs/alerts-management/apdex-alerts/?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
+	'https://signoz.io/docs/userguide/metrics/#apdex?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
 export const apDexToolTipUrlText = 'Learn more about Apdex.';

frontend/src/constants/shortcutActions.tsx

@@ -43,10 +43,17 @@ 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 } = deps;
+	const { navigate, handleThemeChange, aiAssistant, authzDevTools } = deps;
 
 	const actions: CmdAction[] = [
 		{
@@ -302,5 +309,17 @@ 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/AllAlertChannels/index.tsx

@@ -68,7 +68,7 @@ function AlertChannels(): JSX.Element {
 				<RightActionContainer>
 					<TextToolTip
 						text={t('tooltip_notification_channels')}
-						url="https://signoz.io/docs/setup-alerts-notification/"
+						url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel"
 					/>
 
 					<Tooltip

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -29,7 +29,8 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 		let url = '';
 		switch (option) {
 			case AlertTypes.ANOMALY_BASED_ALERT:
-				url = 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/';
+				url =
+					'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
 				break;
 			case AlertTypes.METRICS_BASED_ALERT:
 				url =

frontend/src/container/CreateAlertRule/constants.ts

@@ -31,7 +31,8 @@ export const ALERT_TYPE_URL_MAP: Record<
 			'https://signoz.io/docs/alerts-management/exceptions-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},
 	[AlertTypes.ANOMALY_BASED_ALERT]: {
-		selection: 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/',
+		selection:
+			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples',
 		creation:
 			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},

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

@@ -3,6 +3,7 @@ import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
+import { useNotifications } from 'hooks/useNotifications';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
@@ -10,7 +11,6 @@ import {
 	selectIsDashboardLocked,
 	useDashboardStore,
 } from 'providers/Dashboard/store/useDashboardStore';
-import { toast } from '@signozhq/ui/sonner';
 
 import { getChartManagerColumns } from './getChartMangerColumns';
 import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
@@ -44,6 +44,7 @@ export default function ChartManager({
 	decimalPrecision = PrecisionOptionsEnum.TWO,
 	onCancel,
 }: ChartManagerProps): JSX.Element {
+	const { notifications } = useNotifications();
 	const { legendItemsMap } = useLegendsSync({
 		config,
 		subscribeToFocusChange: false,
@@ -135,9 +136,11 @@ export default function ChartManager({
 
 	const handleSave = useCallback((): void => {
 		syncSeriesVisibilityToLocalStorage();
-		toast.success('The updated graphs & legends are saved');
+		notifications.success({
+			message: 'The updated graphs & legends are saved',
+		});
 		onCancel?.();
-	}, [syncSeriesVisibilityToLocalStorage, onCancel]);
+	}, [syncSeriesVisibilityToLocalStorage, notifications, onCancel]);
 
 	return (
 		<div className="chart-manager-container">

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

@@ -5,7 +5,7 @@ import { render, screen } from 'tests/test-utils';
 import ChartManager from '../ChartManager';
 
 const mockSyncSeriesVisibilityToLocalStorage = jest.fn();
-const mockToastSuccess = jest.fn();
+const mockNotificationsSuccess = jest.fn();
 
 jest.mock('lib/uPlotV2/context/PlotContext', () => ({
 	usePlotContext: (): {
@@ -46,11 +46,12 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 	}): boolean => s.dashboardData?.locked ?? false,
 }));
 
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: {
-		success: (...args: unknown[]): unknown => mockToastSuccess(...args),
-	},
+jest.mock('hooks/useNotifications', () => ({
+	useNotifications: (): { notifications: { success: jest.Mock } } => ({
+		notifications: {
+			success: mockNotificationsSuccess,
+		},
+	}),
 }));
 
 jest.mock('components/ResizeTable', () => {
@@ -159,7 +160,7 @@ describe('ChartManager', () => {
 		expect(screen.queryByTestId('row-2')).not.toBeInTheDocument();
 	});
 
-	it('calls syncSeriesVisibilityToLocalStorage, toast.success, and onCancel when Save is clicked', async () => {
+	it('calls syncSeriesVisibilityToLocalStorage, notifications.success, and onCancel when Save is clicked', async () => {
 		render(
 			<ChartManager
 				config={createMockConfig() as UPlotConfigBuilder}
@@ -171,9 +172,9 @@ describe('ChartManager', () => {
 		await userEvent.click(screen.getByRole('button', { name: /Save/ }));
 
 		expect(mockSyncSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-		expect(mockToastSuccess).toHaveBeenCalledWith(
-			'The updated graphs & legends are saved',
-		);
+		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
+			message: 'The updated graphs & legends are saved',
+		});
 		expect(mockOnCancel).toHaveBeenCalledTimes(1);
 	});
 });

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.styles.scss

@@ -5,14 +5,6 @@
 	height: 100%;
 	flex-direction: column;
 
-	// Stacked children (the FullView / standalone graph-manager) sit below the chart
-	// in the same container; size the chart region to its content so they aren't
-	// pushed out. Only this case opts out of filling the height — the dashboard grid,
-	// alert preview, and other charts keep 100% so they fill their container.
-	&--with-layout-children {
-		height: auto;
-	}
-
 	&--legend-right {
 		flex-direction: row;
 	}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -63,7 +63,6 @@ export default function ChartLayout({
 				className={cx('chart-layout', {
 					'chart-layout--legend-right':
 						legendConfig.position === LegendPosition.RIGHT,
-					'chart-layout--with-layout-children': !!layoutChildren,
 				})}
 			>
 				<div className="chart-layout__content">

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -717,13 +717,13 @@ function ExplorerOptions({
 
 	const infoIconLink = useMemo(() => {
 		if (isLogsExplorer) {
-			return 'https://signoz.io/docs/userguide/logs_query_builder/?utm_source=product&utm_medium=logs-explorer-toolbar';
+			return 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar';
 		}
 		// TODO: Add metrics explorer info icon link
 		if (isMetricsExplorer) {
 			return '';
 		}
-		return 'https://signoz.io/docs/userguide/traces/?utm_source=product&utm_medium=trace-explorer-toolbar';
+		return 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar';
 	}, [isLogsExplorer, isMetricsExplorer]);
 
 	const getQueryName = (query: Query): string => {

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -201,7 +201,7 @@ export default function SavedViews({
 								});
 
 								window.open(
-									'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
+									'https://signoz.io/docs/product-features/saved-view/',
 									'_blank',
 									'noopener noreferrer',
 								);

frontend/src/container/Home/constants.ts

@@ -29,12 +29,12 @@ export const checkListStepToPreferenceKeyMap = {
 
 export const DOCS_LINKS = {
 	ADD_DATA_SOURCE: 'https://signoz.io/docs/instrumentation/overview/',
-	SEND_LOGS: 'https://signoz.io/docs/userguide/logs_query_builder/',
+	SEND_LOGS: 'https://signoz.io/docs/userguide/logs/',
 	SEND_TRACES: 'https://signoz.io/docs/userguide/traces/',
 	SEND_METRICS: 'https://signoz.io/docs/metrics-management/metrics-explorer/',
-	SETUP_ALERTS: 'https://signoz.io/docs/alerts/',
+	SETUP_ALERTS: 'https://signoz.io/docs/userguide/alerts-management/',
 	SETUP_SAVED_VIEWS:
-		'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
+		'https://signoz.io/docs/product-features/saved-view/#step-2-save-your-view',
 	SETUP_DASHBOARDS: 'https://signoz.io/docs/userguide/manage-dashboards/',
 };
 

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.tsx

@@ -82,7 +82,7 @@ export function K8sEmptyState({
 						<span className={styles.message}>
 							Please refer to{' '}
 							<a
-								href="https://signoz.io/docs/infrastructure-monitoring/hostmetrics/"
+								href="https://signoz.io/docs/userguide/hostmetrics/"
 								target="_blank"
 								rel="noreferrer"
 							>

frontend/src/container/InfraMonitoringK8s/Base/__tests__/K8sBaseList.test.tsx

@@ -611,7 +611,7 @@ describe('K8sBaseList', () => {
 				expect(link).toBeInTheDocument();
 				expect(link).toHaveAttribute(
 					'href',
-					'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/',
+					'https://signoz.io/docs/userguide/hostmetrics/',
 				);
 			});
 		});

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesContent.tsx

@@ -1,228 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { ChangeEvent, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
-import DockerIcon from 'assets/CustomIcons/DockerIcon';
-import ElasticSearchIcon from 'assets/CustomIcons/ElasticSearchIcon';
-import HerokuIcon from 'assets/CustomIcons/HerokuIcon';
-import KubernetesIcon from 'assets/CustomIcons/KubernetesIcon';
-import MongoDBIcon from 'assets/CustomIcons/MongoDBIcon';
-import MySQLIcon from 'assets/CustomIcons/MySQLIcon';
-import NginxIcon from 'assets/CustomIcons/NginxIcon';
-import PostgreSQLIcon from 'assets/CustomIcons/PostgreSQLIcon';
-import RedisIcon from 'assets/CustomIcons/RedisIcon';
-import cx from 'classnames';
-import {
-	ConciergeBell,
-	DraftingCompass,
-	Drill,
-	Plus,
-	X,
-} from '@signozhq/icons';
-import { DashboardTemplate } from 'types/api/dashboard/getAll';
-
-import blankDashboardTemplatePreviewUrl from '@/assets/Images/blankDashboardTemplatePreview.svg';
-import redisTemplatePreviewUrl from '@/assets/Images/redisTemplatePreview.svg';
-
-import { filterTemplates } from '../utils';
-
-import './DashboardTemplatesModal.styles.scss';
-
-const templatesList: DashboardTemplate[] = [
-	{
-		name: 'Blank dashboard',
-		icon: <Drill />,
-		id: 'blank',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Alert Manager',
-		icon: <ConciergeBell />,
-		id: 'alertManager',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Apache',
-		icon: <ApacheIcon />,
-		id: 'apache',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Docker',
-		icon: <DockerIcon />,
-		id: 'docker',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Elasticsearch',
-		icon: <ElasticSearchIcon />,
-		id: 'elasticSearch',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'MongoDB',
-		icon: <MongoDBIcon />,
-		id: 'mongoDB',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Heroku',
-		icon: <HerokuIcon />,
-		id: 'heroku',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Nginx',
-		icon: <NginxIcon />,
-		id: 'nginx',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Kubernetes',
-		icon: <KubernetesIcon />,
-		id: 'kubernetes',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'MySQL',
-		icon: <MySQLIcon />,
-		id: 'mySQL',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'PostgreSQL',
-		icon: <PostgreSQLIcon />,
-		id: 'postgreSQL',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Redis',
-		icon: <RedisIcon />,
-		id: 'redis',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: redisTemplatePreviewUrl,
-	},
-	{
-		name: 'AWS',
-		icon: <DraftingCompass size={14} />,
-		id: 'aws',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-];
-
-interface DashboardTemplatesContentProps {
-	onCreateNewDashboard: () => void;
-	/** When provided, renders the modal-style header with a close affordance. Omitted for inline use. */
-	onCancel?: () => void;
-}
-
-// The template gallery (search + list + preview + create), extracted from the
-// modal so it can be embedded inline (e.g. the V2 new-dashboard modal's template
-// tab) as well as inside DashboardTemplatesModal. Styles live under the global
-// `.new-dashboard-templates-modal` scope, so inline callers wrap it in that class.
-export default function DashboardTemplatesContent({
-	onCreateNewDashboard,
-	onCancel,
-}: DashboardTemplatesContentProps): JSX.Element {
-	const [selectedDashboardTemplate, setSelectedDashboardTemplate] = useState(
-		templatesList[0],
-	);
-
-	const [dashboardTemplates, setDashboardTemplates] = useState(templatesList);
-
-	const handleDashboardTemplateSearch = (
-		event: ChangeEvent<HTMLInputElement>,
-	) => {
-		const searchText = event.target.value;
-		const filteredTemplates = filterTemplates(searchText, templatesList);
-		setDashboardTemplates(filteredTemplates);
-	};
-
-	return (
-		<div className="new-dashboard-templates-content-container">
-			{onCancel && (
-				<div className="new-dashboard-templates-content-header">
-					<Typography.Text>New Dashboard</Typography.Text>
-
-					<X size={14} className="periscope-btn ghost" onClick={onCancel} />
-				</div>
-			)}
-
-			<div className="new-dashboard-templates-content">
-				<div className="new-dashboard-templates-list">
-					<Input
-						className="new-dashboard-templates-search"
-						placeholder="🔍 Search..."
-						onChange={handleDashboardTemplateSearch}
-					/>
-
-					<div className="templates-list">
-						{dashboardTemplates.map((template) => (
-							<div
-								className={cx(
-									'template-list-item',
-									selectedDashboardTemplate.id === template.id ? 'active' : '',
-								)}
-								key={template.name}
-								onClick={() => setSelectedDashboardTemplate(template)}
-							>
-								<div className="template-icon">{template.icon}</div>
-								<div className="template-name">{template.name}</div>
-							</div>
-						))}
-					</div>
-				</div>
-
-				<div className="new-dashboard-template-preview">
-					<div className="template-preview-header">
-						<div className="template-preview-title">
-							<div className="template-preview-icon">
-								{selectedDashboardTemplate.icon}
-							</div>
-
-							<div className="template-info">
-								<div className="template-name">{selectedDashboardTemplate.name}</div>
-
-								<div className="template-description">
-									{selectedDashboardTemplate.description}
-								</div>
-							</div>
-						</div>
-
-						<div className="create-dashboard-btn">
-							<Button
-								type="primary"
-								className="periscope-btn primary"
-								icon={<Plus size={14} />}
-								onClick={onCreateNewDashboard}
-							>
-								New dashboard
-							</Button>
-						</div>
-					</div>
-
-					<div className="template-preview-image">
-						<img
-							src={selectedDashboardTemplate.previewImage}
-							alt={`${selectedDashboardTemplate.name}-preview`}
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -1,9 +1,129 @@
-import { Modal } from 'antd';
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { ChangeEvent, useState } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
+import DockerIcon from 'assets/CustomIcons/DockerIcon';
+import ElasticSearchIcon from 'assets/CustomIcons/ElasticSearchIcon';
+import HerokuIcon from 'assets/CustomIcons/HerokuIcon';
+import KubernetesIcon from 'assets/CustomIcons/KubernetesIcon';
+import MongoDBIcon from 'assets/CustomIcons/MongoDBIcon';
+import MySQLIcon from 'assets/CustomIcons/MySQLIcon';
+import NginxIcon from 'assets/CustomIcons/NginxIcon';
+import PostgreSQLIcon from 'assets/CustomIcons/PostgreSQLIcon';
+import RedisIcon from 'assets/CustomIcons/RedisIcon';
+import cx from 'classnames';
+import {
+	ConciergeBell,
+	DraftingCompass,
+	Drill,
+	Plus,
+	X,
+} from '@signozhq/icons';
+import { DashboardTemplate } from 'types/api/dashboard/getAll';
 
-import DashboardTemplatesContent from './DashboardTemplatesContent';
+import blankDashboardTemplatePreviewUrl from '@/assets/Images/blankDashboardTemplatePreview.svg';
+import redisTemplatePreviewUrl from '@/assets/Images/redisTemplatePreview.svg';
+
+import { filterTemplates } from '../utils';
 
 import './DashboardTemplatesModal.styles.scss';
 
+const templatesList: DashboardTemplate[] = [
+	{
+		name: 'Blank dashboard',
+		icon: <Drill />,
+		id: 'blank',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Alert Manager',
+		icon: <ConciergeBell />,
+		id: 'alertManager',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Apache',
+		icon: <ApacheIcon />,
+		id: 'apache',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Docker',
+		icon: <DockerIcon />,
+		id: 'docker',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Elasticsearch',
+		icon: <ElasticSearchIcon />,
+		id: 'elasticSearch',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'MongoDB',
+		icon: <MongoDBIcon />,
+		id: 'mongoDB',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Heroku',
+		icon: <HerokuIcon />,
+		id: 'heroku',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Nginx',
+		icon: <NginxIcon />,
+		id: 'nginx',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Kubernetes',
+		icon: <KubernetesIcon />,
+		id: 'kubernetes',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'MySQL',
+		icon: <MySQLIcon />,
+		id: 'mySQL',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'PostgreSQL',
+		icon: <PostgreSQLIcon />,
+		id: 'postgreSQL',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Redis',
+		icon: <RedisIcon />,
+		id: 'redis',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: redisTemplatePreviewUrl,
+	},
+	{
+		name: 'AWS',
+		icon: <DraftingCompass size={14} />,
+		id: 'aws',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+];
+
 interface DashboardTemplatesModalProps {
 	showNewDashboardTemplatesModal: boolean;
 	onCreateNewDashboard: () => void;
@@ -15,6 +135,20 @@ export default function DashboardTemplatesModal({
 	onCreateNewDashboard,
 	onCancel,
 }: DashboardTemplatesModalProps): JSX.Element {
+	const [selectedDashboardTemplate, setSelectedDashboardTemplate] = useState(
+		templatesList[0],
+	);
+
+	const [dashboardTemplates, setDashboardTemplates] = useState(templatesList);
+
+	const handleDashboardTemplateSearch = (
+		event: ChangeEvent<HTMLInputElement>,
+	) => {
+		const searchText = event.target.value;
+		const filteredTemplates = filterTemplates(searchText, templatesList);
+		setDashboardTemplates(filteredTemplates);
+	};
+
 	return (
 		<Modal
 			wrapClassName="new-dashboard-templates-modal"
@@ -25,10 +159,75 @@ export default function DashboardTemplatesModal({
 			destroyOnClose
 			width="60vw"
 		>
-			<DashboardTemplatesContent
-				onCreateNewDashboard={onCreateNewDashboard}
-				onCancel={onCancel}
-			/>
+			<div className="new-dashboard-templates-content-container">
+				<div className="new-dashboard-templates-content-header">
+					<Typography.Text>New Dashboard</Typography.Text>
+
+					<X size={14} className="periscope-btn ghost" onClick={onCancel} />
+				</div>
+
+				<div className="new-dashboard-templates-content">
+					<div className="new-dashboard-templates-list">
+						<Input
+							className="new-dashboard-templates-search"
+							placeholder="🔍 Search..."
+							onChange={handleDashboardTemplateSearch}
+						/>
+
+						<div className="templates-list">
+							{dashboardTemplates.map((template) => (
+								<div
+									className={cx(
+										'template-list-item',
+										selectedDashboardTemplate.id === template.id ? 'active' : '',
+									)}
+									key={template.name}
+									onClick={() => setSelectedDashboardTemplate(template)}
+								>
+									<div className="template-icon">{template.icon}</div>
+									<div className="template-name">{template.name}</div>
+								</div>
+							))}
+						</div>
+					</div>
+
+					<div className="new-dashboard-template-preview">
+						<div className="template-preview-header">
+							<div className="template-preview-title">
+								<div className="template-preview-icon">
+									{selectedDashboardTemplate.icon}
+								</div>
+
+								<div className="template-info">
+									<div className="template-name">{selectedDashboardTemplate.name}</div>
+
+									<div className="template-description">
+										{selectedDashboardTemplate.description}
+									</div>
+								</div>
+							</div>
+
+							<div className="create-dashboard-btn">
+								<Button
+									type="primary"
+									className="periscope-btn primary"
+									icon={<Plus size={14} />}
+									onClick={onCreateNewDashboard}
+								>
+									New dashboard
+								</Button>
+							</div>
+						</div>
+
+						<div className="template-preview-image">
+							<img
+								src={selectedDashboardTemplate.previewImage}
+								alt={`${selectedDashboardTemplate.name}-preview`}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
 		</Modal>
 	);
 }

frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx

@@ -164,7 +164,7 @@ function BreakDown(): JSX.Element {
 								Meter metrics data is aggregated over 1 hour period. Please select time
 								range accordingly. 
 								<a
-									href="https://signoz.io/docs/cost-meter/overview/#get-started"
+									href="https://signoz.io/docs/cost-meter/overview/#accessing-cost-meter"
 									rel="noopener noreferrer"
 									target="_blank"
 									style={{ textDecoration: 'underline' }}

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -197,7 +197,7 @@ function TopOperationsTable({
 
 	const entryPointSpanInfo = {
 		text: 'Shows the spans where requests enter new services for the first time',
-		url: 'https://signoz.io/docs/apm-and-distributed-tracing/application-details/',
+		url: 'https://signoz.io/docs/traces-management/guides/entry-point-spans-service-overview/',
 		urlText: 'Learn more about Entrypoint Spans.',
 	};
 

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnGoogleAuth.tsx

@@ -64,7 +64,7 @@ function ConfigureGoogleAuthAuthnProvider({
 					Enter OAuth 2.0 credentials obtained from the Google API Console below.
 					Read the{' '}
 					<a
-						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
+						href="https://signoz.io/docs/userguide/sso-authentication"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnOIDC.tsx

@@ -38,7 +38,7 @@ function ConfigureOIDCAuthnProvider({
 					Configure OpenID Connect Single Sign-On with your Identity Provider. Read
 					the{' '}
 					<a
-						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
+						href="https://signoz.io/docs/userguide/sso-authentication"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnSAML.tsx

@@ -37,7 +37,7 @@ function ConfigureSAMLAuthnProvider({
 				<p className="authn-provider__description">
 					Configure SAML 2.0 Single Sign-On with your Identity Provider. Read the{' '}
 					<a
-						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
+						href="https://signoz.io/docs/userguide/sso-authentication"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx

@@ -216,7 +216,7 @@ export default function QueryFunctions({
 							Add new function
 							<Typography.Link
 								style={{ textDecoration: 'underline' }}
-								href="https://signoz.io/docs/querying/functions-extended-analysis/?utm_source=product&utm_medium=query-builder"
+								href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#functions-for-extended-data-analysis"
 								target="_blank"
 							>
 								{' '}

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

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

frontend/src/container/Version/index.tsx

@@ -100,7 +100,7 @@ function Version(): JSX.Element {
 					{!isError && !isLatestVersion && (
 						<div className="version-page-upgrade-container">
 							<Button
-								href="https://signoz.io/docs/opentelemetry-collection-agents/docker/overview/"
+								href="https://signoz.io/docs/operate/docker-standalone/#upgrade"
 								target="_blank"
 								type="primary"
 								className="periscope-btn primary"

frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.authz.test.tsx

@@ -16,6 +16,8 @@ const noPermissions = {
 	isFetching: false,
 	error: null,
 	permissions: null,
+	allowed: false,
+	deniedPermissions: [],
 	refetchPermissions: jest.fn(),
 };
 

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

@@ -0,0 +1,28 @@
+.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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,140 @@
+.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

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,72 @@
+.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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,68 @@
+.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

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,174 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,28 @@
+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,5 +89,13 @@ 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,5 +1,6 @@
 import { ReactElement } from 'react';
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { useQueryClient } from 'react-query';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { AllTheProviders } from 'tests/test-utils';
@@ -46,12 +47,16 @@ 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 () => {
@@ -73,6 +78,89 @@ 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 () => {
@@ -474,3 +562,120 @@ 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,13 +1,15 @@
 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 {
+import type {
 	AuthZCheckResponse,
 	BrandedPermission,
 	UseAuthZOptions,
@@ -17,6 +19,59 @@ 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[] = [];
@@ -27,10 +82,11 @@ function dispatchPermission(
 	pendingPermissions.push(permission);
 
 	if (!ctx) {
-		let resolve: (v: AuthZCheckResponse) => void, reject: (reason?: any) => void;
-		ctx = new Promise<AuthZCheckResponse>((r, re) => {
-			resolve = r;
-			reject = re;
+		let promiseResolve: (v: AuthZCheckResponse) => void,
+			promiseReject: (reason?: unknown) => void;
+		ctx = new Promise<AuthZCheckResponse>((resolve, reject) => {
+			promiseResolve = resolve;
+			promiseReject = reject;
 		});
 
 		setTimeout(() => {
@@ -38,7 +94,9 @@ function dispatchPermission(
 			pendingPermissions = [];
 			ctx = null;
 
-			fetchManyPermissions(copiedPermissions).then(resolve).catch(reject);
+			fetchManyPermissions(copiedPermissions)
+				.then(promiseResolve)
+				.catch(promiseReject);
 		}, SINGLE_FLIGHT_WAIT_TIME_MS);
 	}
 
@@ -85,19 +143,50 @@ 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 response = await dispatchPermission(permission);
-
-					return {
-						[permission]: {
-							isGranted: response[permission].isGranted,
-						},
+					const fetchFn = async (): Promise<AuthZCheckResponse> => {
+						const response = await dispatchPermission(permission);
+						return {
+							[permission]: {
+								isGranted: response[permission].isGranted,
+							},
+						};
 					};
+
+					if (IS_DEV) {
+						return applyDevOverrideToQuery(permission, fetchFn);
+					}
+
+					return fetchFn();
 				},
 			};
 		}),
@@ -107,6 +196,7 @@ export function useAuthZ(
 		() => queryResults.some((q) => q.isLoading),
 		[queryResults],
 	);
+
 	const isFetching = useMemo(
 		() => queryResults.some((q) => q.isFetching),
 		[queryResults],
@@ -139,15 +229,31 @@ export function useAuthZ(
 
 	const refetchPermissions = useCallback(() => {
 		for (const query of queryResults) {
-			query.refetch();
+			void 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

@@ -149,6 +149,8 @@ export function mockUseAuthZGrantAll(
 		permissions: Object.fromEntries(
 			permissions.map((p) => [p, { isGranted: true }]),
 		) as UseAuthZResult['permissions'],
+		allowed: true,
+		deniedPermissions: [],
 		refetchPermissions: jest.fn(),
 	};
 }
@@ -164,6 +166,8 @@ export function mockUseAuthZDenyAll(
 		permissions: Object.fromEntries(
 			permissions.map((p) => [p, { isGranted: false }]),
 		) as UseAuthZResult['permissions'],
+		allowed: false,
+		deniedPermissions: permissions,
 		refetchPermissions: jest.fn(),
 	};
 }
@@ -174,16 +178,23 @@ export function mockUseAuthZGrantByPrefix(
 	permissions: BrandedPermission[],
 	options?: UseAuthZOptions,
 ) => UseAuthZResult {
-	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(),
-	});
+	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(),
+		};
+	};
 }

frontend/src/lib/env.ts

@@ -0,0 +1,3 @@
+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/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.module.scss

@@ -32,34 +32,6 @@
 	cursor: help;
 }
 
-.publicLink {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	padding: 0;
-	border: none;
-	background: transparent;
-	color: inherit;
-	cursor: pointer;
-}
-
-.lockButton {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	padding: 0;
-	border: none;
-	background: transparent;
-	color: inherit;
-	cursor: pointer;
-}
-
-.lockButton:disabled {
-	cursor: default;
-}
-
 .divider {
 	flex-shrink: 0;
 	width: 1px;

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

@@ -1,12 +1,5 @@
 import { KeyboardEvent } from 'react';
-import {
-	Check,
-	Globe,
-	LockKeyhole,
-	LockKeyholeOpen,
-	SolidInfoCircle,
-	X,
-} from '@signozhq/icons';
+import { Check, Globe, LockKeyhole, SolidInfoCircle, X } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
@@ -14,7 +7,6 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { isEmpty } from 'lodash-es';
-import { openInNewTab } from 'utils/navigation';
 
 import styles from './DashboardInfo.module.scss';
 import { useVisibleTagCount } from './useVisibleTagCount';
@@ -26,13 +18,7 @@ interface DashboardInfoProps {
 	tags: string[];
 	description: string;
 	isPublicDashboard: boolean;
-	/** Absolute URL of the public dashboard page; opened when the globe is clicked. */
-	publicUrl: string;
 	isDashboardLocked: boolean;
-	/** Whether to render the lock toggle at all (hidden for never-locked dashboards). */
-	showLockToggle: boolean;
-	/** When provided, the lock icon toggles lock/unlock (author/admin only). */
-	onToggleLock?: () => void;
 	isEditing: boolean;
 	draft: string;
 	onDraftChange: (value: string) => void;
@@ -47,10 +33,7 @@ function DashboardInfo({
 	tags,
 	description,
 	isPublicDashboard,
-	publicUrl,
 	isDashboardLocked,
-	showLockToggle,
-	onToggleLock,
 	isEditing,
 	draft,
 	onDraftChange,
@@ -68,17 +51,6 @@ function DashboardInfo({
 	const visibleTags = needsOverflow ? tags.slice(0, visibleCount) : tags;
 	const remainingTags = needsOverflow ? tags.slice(visibleCount) : [];
 
-	let lockTooltip: string;
-	if (onToggleLock) {
-		lockTooltip = isDashboardLocked
-			? 'Locked — click to unlock'
-			: 'Unlocked — click to lock';
-	} else {
-		lockTooltip = isDashboardLocked
-			? 'This dashboard is locked'
-			: 'This dashboard is unlocked';
-	}
-
 	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
 		if (event.key === 'Enter') {
 			event.preventDefault();
@@ -129,7 +101,7 @@ function DashboardInfo({
 					</Button>
 				</div>
 			) : (
-				<TooltipSimple title={title} disableHoverableContent>
+				<TooltipSimple title={title}>
 					<Typography.Text
 						className={cx(styles.dashboardTitle, {
 							[styles.dashboardTitleHover]: canEdit,
@@ -143,7 +115,7 @@ function DashboardInfo({
 			)}
 
 			{hasDescription && (
-				<TooltipSimple title={description} disableHoverableContent>
+				<TooltipSimple title={description}>
 					<SolidInfoCircle
 						className={styles.descriptionIcon}
 						size={14}
@@ -153,44 +125,14 @@ function DashboardInfo({
 			)}
 
 			{isPublicDashboard && (
-				<TooltipSimple
-					title="This dashboard is publicly accessible. Click to open the public page."
-					disableHoverableContent
-				>
-					<Button
-						type="button"
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						className={styles.publicLink}
-						aria-label="Open public dashboard"
-						testId="dashboard-public-link"
-						onClick={(): void => openInNewTab(publicUrl)}
-					>
-						<Globe size={14} />
-					</Button>
+				<TooltipSimple title="This dashboard is publicly accessible">
+					<Globe size={14} />
 				</TooltipSimple>
 			)}
 
-			{showLockToggle && (
-				<TooltipSimple title={lockTooltip} disableHoverableContent>
-					<Button
-						type="button"
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						className={styles.lockButton}
-						aria-label={isDashboardLocked ? 'Unlock dashboard' : 'Lock dashboard'}
-						testId="dashboard-lock"
-						disabled={!onToggleLock}
-						onClick={onToggleLock}
-					>
-						{isDashboardLocked ? (
-							<LockKeyhole size={14} />
-						) : (
-							<LockKeyholeOpen size={14} />
-						)}
-					</Button>
+			{isDashboardLocked && (
+				<TooltipSimple title="This dashboard is locked">
+					<LockKeyhole size={14} />
 				</TooltipSimple>
 			)}
 
@@ -203,14 +145,14 @@ function DashboardInfo({
 						data-testid="dashboard-tags"
 					>
 						{visibleTags.map((tag) => (
-							<Badge key={tag} color="sienna" variant="outline">
+							<Badge key={tag} color="warning" variant="outline">
 								{tag}
 							</Badge>
 						))}
 						{remainingTags.length > 0 && (
 							<TooltipSimple title={remainingTags.join(', ')}>
 								<Badge
-									color="sienna"
+									color="warning"
 									variant="outline"
 									data-testid="dashboard-tags-overflow"
 								>

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { toast } from '@signozhq/ui/sonner';
 import logEvent from 'api/common/logEvent';
@@ -15,12 +15,9 @@ import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
-import { USER_ROLES } from 'types/roles';
-import { getAbsoluteUrl } from 'utils/basePath';
 
 import { useCreatePanel } from '../hooks/useCreatePanel';
 import { useOptimisticPatch } from '../hooks/useOptimisticPatch';
-import { usePublicDashboardMeta } from '../DashboardSettings/PublicDashboard/usePublicDashboardMeta';
 import PanelTypeSelectionModal from '../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardInfo from './DashboardInfo/DashboardInfo';
@@ -39,15 +36,7 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	const { dashboard, handle, refetch } = props;
 
 	const id = dashboard.id;
-
-	// Session-local lock state: the toggle appears once locked and persists for the page.
-	const [isDashboardLocked, setIsDashboardLocked] = useState(!!dashboard.locked);
-	const [showLockToggle, setShowLockToggle] = useState(!!dashboard.locked);
-	useEffect(() => {
-		setIsDashboardLocked(!!dashboard.locked);
-		setShowLockToggle(!!dashboard.locked);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboard.id]);
+	const isDashboardLocked = !!dashboard.locked;
 
 	const title = dashboard.spec.display.name;
 	const description = dashboard.spec.display.description ?? '';
@@ -69,36 +58,20 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
 
-	// Author/admin can lock-unlock (mirrors the Actions menu gate); integration-owned
-	// dashboards are never toggleable.
-	const canToggleLock =
-		(isAuthor || user.role === USER_ROLES.ADMIN) &&
-		dashboard.createdBy !== 'integration';
-
-	// Public-sharing meta (deduped react-query read); drives the header globe.
-	const { isPublic, publicMeta } = usePublicDashboardMeta(id);
-	const publicUrl = getAbsoluteUrl(publicMeta?.publicPath ?? '');
-
 	const handleLockDashboardToggle = useCallback(async (): Promise<void> => {
 		if (!id) {
 			return;
 		}
-		const next = !isDashboardLocked;
-		setIsDashboardLocked(next);
-		if (next) {
-			setShowLockToggle(true);
-		}
 		try {
-			if (next) {
-				await lockDashboardV2({ id });
-				toast.success('Dashboard locked');
-			} else {
+			if (isDashboardLocked) {
 				await unlockDashboardV2({ id });
 				toast.success('Dashboard unlocked');
+			} else {
+				await lockDashboardV2({ id });
+				toast.success('Dashboard locked');
 			}
 			refetch();
 		} catch (error) {
-			setIsDashboardLocked(!next);
 			showErrorModal(error as APIError);
 		}
 	}, [id, isDashboardLocked, refetch, showErrorModal]);
@@ -146,11 +119,8 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 					image={image}
 					tags={tags}
 					description={description}
-					isPublicDashboard={isPublic}
-					publicUrl={publicUrl}
+					isPublicDashboard={false}
 					isDashboardLocked={isDashboardLocked}
-					showLockToggle={showLockToggle}
-					onToggleLock={canToggleLock ? handleLockDashboardToggle : undefined}
 					isEditing={isEditing}
 					draft={draft}
 					onDraftChange={setDraft}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardHint/PublicDashboardHint.module.scss

@@ -2,7 +2,6 @@
 	display: flex;
 	align-items: flex-start;
 	gap: 8px;
-	margin-top: 12px;
 	padding-top: 2px;
 	color: var(--l3-foreground);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.tsx

@@ -1,18 +1,19 @@
 import { Typography } from '@signozhq/ui/typography';
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import type { EQueryType } from 'types/common/dashboard';
+import { EQueryType } from 'types/common/dashboard';
 
 import type { PanelKind } from '../../../Panels/types/panelKind';
+import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
 import ConfigSelect from '../controls/ConfigSelect/ConfigSelect';
 
 import styles from './PanelTypeSwitcher.module.scss';
-import { usePanelTypeSelectItems } from './usePanelTypeSelectItems';
+import { getPanelTypeDisabledReason } from './utils';
 
 interface PanelTypeSwitcherProps {
 	/** The current panel kind (selected value). */
 	panelKind: PanelKind;
-	/** Active query type — a kind that can't be authored in it is disabled (e.g. List is Query-Builder-only, so PromQL/ClickHouse disable it). */
-	queryType: EQueryType;
+	/** Active query type — a kind that can't be authored in it is disabled (e.g. List is Query-Builder-only, so PromQL/ClickHouse disable it). Defaults to Query Builder. */
+	queryType?: EQueryType;
 	/** Panel's current signal — also gates the disabled rule (List needs logs/traces, not metrics). */
 	signal?: TelemetrytypesSignalDTO;
 	onChange: (kind: PanelKind) => void;
@@ -30,7 +31,22 @@ function PanelTypeSwitcher({
 	signal,
 	onChange,
 }: PanelTypeSwitcherProps): JSX.Element {
-	const items = usePanelTypeSelectItems({ queryType, signal });
+	const items = PANEL_TYPES.map(({ panelKind, label, Icon }) => {
+		// One reason drives both the disabled flag and the tooltip, so they can't disagree.
+		const disabledReason = getPanelTypeDisabledReason({
+			kind: panelKind,
+			queryType: queryType ?? EQueryType.QUERY_BUILDER,
+			signal,
+			label,
+		});
+		return {
+			value: panelKind,
+			label,
+			icon: <Icon size={14} />,
+			disabled: !!disabledReason,
+			tooltip: disabledReason,
+		};
+	});
 
 	return (
 		<div className={styles.field}>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/__tests__/PanelTypeSwitcher.test.tsx

@@ -49,11 +49,7 @@ describe('PanelTypeSwitcher', () => {
 	it('fires onChange with the chosen plugin kind', () => {
 		const onChange = jest.fn();
 		render(
-			<PanelTypeSwitcher
-				panelKind="signoz/TimeSeriesPanel"
-				queryType={EQueryType.QUERY_BUILDER}
-				onChange={onChange}
-			/>,
+			<PanelTypeSwitcher panelKind="signoz/TimeSeriesPanel" onChange={onChange} />,
 		);
 
 		openDropdown();
@@ -66,7 +62,6 @@ describe('PanelTypeSwitcher', () => {
 		render(
 			<PanelTypeSwitcher
 				panelKind="signoz/TimeSeriesPanel"
-				queryType={EQueryType.QUERY_BUILDER}
 				signal={TelemetrytypesSignalDTO.metrics}
 				onChange={jest.fn()}
 			/>,
@@ -82,7 +77,6 @@ describe('PanelTypeSwitcher', () => {
 		render(
 			<PanelTypeSwitcher
 				panelKind="signoz/TimeSeriesPanel"
-				queryType={EQueryType.QUERY_BUILDER}
 				onChange={jest.fn()}
 			/>,
 		);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/usePanelTypeSelectItems.tsx

@@ -1,48 +0,0 @@
-import { useMemo } from 'react';
-import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import type { EQueryType } from 'types/common/dashboard';
-
-import type { PanelKind } from '../../../Panels/types/panelKind';
-import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
-import type { ConfigSelectItem } from '../controls/ConfigSelect/ConfigSelect';
-
-import { getPanelTypeDisabledReason } from './utils';
-
-interface UsePanelTypeSelectItemsArgs {
-	/** Active query type — a kind that can't be authored in it is disabled. */
-	queryType: EQueryType;
-	/** Current datasource — also gates the disabled rule (List needs logs/traces, not metrics). */
-	signal?: TelemetrytypesSignalDTO;
-}
-
-/**
- * Visualization-kind options for a `ConfigSelect`, each disabled (with a reason
- * tooltip) when the active query type or signal is incompatible — resolved through
- * the capabilities guard. Shared by the editor's `PanelTypeSwitcher` and the View
- * modal's header so the two selectors apply the same rule and can't drift.
- */
-export function usePanelTypeSelectItems({
-	queryType,
-	signal,
-}: UsePanelTypeSelectItemsArgs): ConfigSelectItem<PanelKind>[] {
-	return useMemo(
-		() =>
-			PANEL_TYPES.map(({ panelKind, label, Icon }) => {
-				// One reason drives both the disabled flag and the tooltip, so they can't disagree.
-				const disabledReason = getPanelTypeDisabledReason({
-					kind: panelKind,
-					queryType,
-					signal,
-					label,
-				});
-				return {
-					value: panelKind,
-					label,
-					icon: <Icon size={14} />,
-					disabled: !!disabledReason,
-					tooltip: disabledReason,
-				};
-			}),
-		[queryType, signal],
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinkDialog.tsx

@@ -1,259 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Plus, Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { Switch } from '@signozhq/ui/switch';
-import { Typography } from '@signozhq/ui/typography';
-import { Input } from 'antd';
-import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { UrlParam, VariableItem } from './types';
-import {
-	getUrlParams,
-	insertVariableAtCursor,
-	isValidContextLinkUrl,
-	updateUrlWithParams,
-} from './utils';
-import VariablesPopover from './VariablesPopover';
-
-import styles from './ContextLinksSection.module.scss';
-
-interface ContextLinkDialogProps {
-	open: boolean;
-	/** The link being edited, or null when adding a new one. */
-	initialLink: DashboardLinkDTO | null;
-	variables: VariableItem[];
-	onOpenChange: (open: boolean) => void;
-	onSave: (link: DashboardLinkDTO) => void;
-}
-
-const URL_ERROR = 'URL must start with http(s)://, /, or {{variable}}/';
-
-const cursorOf = (e: { target: EventTarget }): number =>
-	(e.target as HTMLInputElement).selectionStart ?? 0;
-
-/**
- * Modal editor for a single context link (V1 parity): label + URL with `{{variable}}`
- * autocomplete + validation, a key/value URL-parameters editor, and an "open in new tab"
- * toggle. The URL is the source of truth; parameter rows are its query string projected
- * out (blank-key rows live only in local state until they get a key). Save is gated on a
- * non-empty, well-formed URL. `renderVariables` is set so consumers interpolate the URL.
- */
-function ContextLinkDialog({
-	open,
-	initialLink,
-	variables,
-	onOpenChange,
-	onSave,
-}: ContextLinkDialogProps): JSX.Element {
-	const [name, setName] = useState('');
-	const [url, setUrlState] = useState('');
-	const [targetBlank, setTargetBlank] = useState(true);
-	const [params, setParams] = useState<UrlParam[]>([]);
-
-	// Seed the draft each time the dialog opens for a (possibly different) link.
-	useEffect(() => {
-		if (open) {
-			setName(initialLink?.name ?? '');
-			setUrlState(initialLink?.url ?? '');
-			setTargetBlank(initialLink?.targetBlank ?? true);
-			setParams(getUrlParams(initialLink?.url ?? ''));
-		}
-	}, [open, initialLink]);
-
-	const setUrl = (next: string): void => {
-		setUrlState(next);
-		setParams(getUrlParams(next));
-	};
-
-	const applyParams = (next: UrlParam[]): void => {
-		setParams(next);
-		setUrlState(updateUrlWithParams(url, next));
-	};
-
-	const patchParam = (index: number, patch: Partial<UrlParam>): void =>
-		applyParams(params.map((p, i) => (i === index ? { ...p, ...patch } : p)));
-
-	const addParam = (): void => {
-		const last = params[params.length - 1];
-		if (!last || last.key.trim() || last.value.trim()) {
-			setParams([...params, { key: '', value: '' }]);
-		}
-	};
-
-	const urlInvalid = !isValidContextLinkUrl(url);
-	const canSave = !!url.trim() && !urlInvalid;
-
-	const handleSave = (): void => {
-		if (canSave) {
-			onSave({ name, url, targetBlank, renderVariables: true });
-		}
-	};
-
-	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={onOpenChange}
-			title={initialLink ? 'Edit context link' : 'Add a context link'}
-			width="wide"
-			testId="context-link-dialog"
-			footer={
-				<>
-					<Button
-						type="button"
-						variant="outlined"
-						color="secondary"
-						data-testid="context-link-cancel"
-						onClick={(): void => onOpenChange(false)}
-					>
-						Cancel
-					</Button>
-					<Button
-						type="button"
-						variant="solid"
-						color="primary"
-						disabled={!canSave}
-						data-testid="context-link-save"
-						onClick={handleSave}
-					>
-						Save
-					</Button>
-				</>
-			}
-		>
-			<div className={styles.form}>
-				<div className={styles.formField}>
-					<Typography.Text className={styles.formLabel}>Label</Typography.Text>
-					<Input
-						data-testid="context-link-label"
-						placeholder="View trace details: {{_traceId}}"
-						value={name}
-						onChange={(e): void => setName(e.target.value)}
-					/>
-				</div>
-
-				<div className={styles.formField}>
-					<Typography.Text className={styles.formLabel}>
-						URL <span className={styles.required}>*</span>
-					</Typography.Text>
-					<VariablesPopover
-						variables={variables}
-						onVariableSelect={(token, cursor): void =>
-							setUrl(insertVariableAtCursor(url, token, cursor))
-						}
-					>
-						{({ setIsOpen, setCursorPosition }): JSX.Element => (
-							<Input
-								data-testid="context-link-url"
-								placeholder="https://… or /path?var={{variable}}"
-								value={url}
-								status={urlInvalid ? 'error' : undefined}
-								autoComplete="off"
-								onChange={(e): void => {
-									setCursorPosition(e.target.selectionStart ?? 0);
-									setUrl(e.target.value);
-								}}
-								onFocus={(): void => setIsOpen(true)}
-								onClick={(e): void => setCursorPosition(cursorOf(e))}
-								onKeyUp={(e): void => setCursorPosition(cursorOf(e))}
-							/>
-						)}
-					</VariablesPopover>
-					{urlInvalid && (
-						<Typography.Text
-							className={styles.urlError}
-							data-testid="context-link-url-error"
-						>
-							{URL_ERROR}
-						</Typography.Text>
-					)}
-				</div>
-
-				{params.length > 0 && (
-					<div className={styles.formField}>
-						<Typography.Text className={styles.formLabel}>
-							URL parameters
-						</Typography.Text>
-						<div className={styles.params}>
-							{params.map((param, index) => (
-								<div
-									className={styles.paramRow}
-									// Parameter rows have no stable id; index is the row identity here.
-									// eslint-disable-next-line react/no-array-index-key
-									key={index}
-								>
-									<Input
-										data-testid={`context-link-param-key-${index}`}
-										placeholder="Key"
-										value={param.key}
-										onChange={(e): void => patchParam(index, { key: e.target.value })}
-									/>
-									<VariablesPopover
-										variables={variables}
-										onVariableSelect={(token, cursor): void =>
-											patchParam(index, {
-												value: insertVariableAtCursor(param.value, token, cursor),
-											})
-										}
-									>
-										{({ setIsOpen, setCursorPosition }): JSX.Element => (
-											<Input
-												data-testid={`context-link-param-value-${index}`}
-												placeholder="Value"
-												value={param.value}
-												onChange={(e): void => {
-													setCursorPosition(e.target.selectionStart ?? 0);
-													patchParam(index, { value: e.target.value });
-												}}
-												onFocus={(): void => setIsOpen(true)}
-												onClick={(e): void => setCursorPosition(cursorOf(e))}
-												onKeyUp={(e): void => setCursorPosition(cursorOf(e))}
-											/>
-										)}
-									</VariablesPopover>
-									<Button
-										type="button"
-										variant="ghost"
-										color="destructive"
-										size="icon"
-										aria-label={`Remove parameter ${index + 1}`}
-										data-testid={`context-link-param-remove-${index}`}
-										onClick={(): void =>
-											applyParams(params.filter((_, i) => i !== index))
-										}
-									>
-										<Trash2 size={14} />
-									</Button>
-								</div>
-							))}
-						</div>
-					</div>
-				)}
-
-				<Button
-					type="button"
-					variant="dashed"
-					color="secondary"
-					prefix={<Plus size={12} />}
-					data-testid="context-link-add-param"
-					onClick={addParam}
-				>
-					Add URL parameter
-				</Button>
-
-				<div className={styles.newTab}>
-					<Switch
-						testId="context-link-newtab"
-						value={targetBlank}
-						onChange={setTargetBlank}
-					/>
-					<Typography.Text className={styles.newTabLabel}>
-						Open in new tab
-					</Typography.Text>
-				</div>
-			</div>
-		</DialogWrapper>
-	);
-}
-
-export default ContextLinkDialog;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinkListItem.tsx

@@ -1,62 +0,0 @@
-import { Pencil, Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
-
-import styles from './ContextLinksSection.module.scss';
-
-interface ContextLinkListItemProps {
-	link: DashboardLinkDTO;
-	index: number;
-	onEdit: () => void;
-	onRemove: () => void;
-}
-
-/** A saved context link in the section list: its label + URL, with edit / delete actions. */
-function ContextLinkListItem({
-	link,
-	index,
-	onEdit,
-	onRemove,
-}: ContextLinkListItemProps): JSX.Element {
-	const label = link.name?.trim() || link.url || 'Untitled link';
-
-	return (
-		<div className={styles.listItem} data-testid={`context-link-item-${index}`}>
-			<div className={styles.listItemText}>
-				<Typography.Text className={styles.listItemLabel}>{label}</Typography.Text>
-				{!!link.url && (
-					<Typography.Text className={styles.listItemUrl}>
-						{link.url}
-					</Typography.Text>
-				)}
-			</div>
-			<div className={styles.listItemActions}>
-				<Button
-					type="button"
-					variant="ghost"
-					color="secondary"
-					size="icon"
-					aria-label={`Edit link ${index + 1}`}
-					data-testid={`context-link-edit-${index}`}
-					onClick={onEdit}
-				>
-					<Pencil size={14} />
-				</Button>
-				<Button
-					type="button"
-					variant="ghost"
-					color="destructive"
-					size="icon"
-					aria-label={`Remove link ${index + 1}`}
-					data-testid={`context-link-remove-${index}`}
-					onClick={onRemove}
-				>
-					<Trash2 size={14} />
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export default ContextLinkListItem;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinksSection.module.scss

@@ -1,99 +1,32 @@
 .list {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: 12px;
 }
 
-/* --- Saved-link list item --- */
-.listItem {
+.row {
 	display: flex;
-	align-items: center;
-	justify-content: space-between;
+	flex-direction: column;
 	gap: 8px;
-	padding: 8px 10px;
+	padding: 10px;
 	border: 1px solid var(--l2-border);
 	border-radius: 6px;
 }
 
-.listItemText {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-	min-width: 0;
-}
-
-.listItemLabel,
-.listItemUrl {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	max-width: 100%;
-}
-
-.listItemLabel {
-	font-size: 13px;
-	color: var(--text-vanilla-100);
-}
-
-.listItemUrl {
-	font-size: 11px;
-	color: var(--text-vanilla-400);
-}
-
-.listItemActions {
+.rowFooter {
 	display: flex;
 	align-items: center;
-	gap: 2px;
-	flex-shrink: 0;
-}
-
-/* --- Dialog form --- */
-.form {
-	display: flex;
-	flex-direction: column;
-	gap: 14px;
-}
-
-.formField {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-}
-
-.formLabel {
-	font-size: 12px;
-	color: var(--l2-foreground);
-}
-
-.required {
-	color: var(--bg-cherry-400);
-}
-
-.urlError {
-	font-size: 11px;
-	color: var(--bg-cherry-400);
-}
-
-.params {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.paramRow {
-	display: grid;
-	grid-template-columns: 1fr 1fr auto;
-	align-items: center;
-	gap: 6px;
+	justify-content: space-between;
 }
 
 .newTab {
 	display: flex;
 	align-items: center;
 	gap: 8px;
+	cursor: pointer;
 }
 
 .newTabLabel {
 	font-size: 12px;
-	color: var(--l2-foreground);
+	color: var(--text-vanilla-400);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinksSection.tsx

@@ -1,63 +1,83 @@
-import { useState } from 'react';
-import { Plus } from '@signozhq/icons';
+import { Plus, Trash2 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+import { Input } from 'antd';
 import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
 import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 
-import ContextLinkDialog from './ContextLinkDialog';
-import ContextLinkListItem from './ContextLinkListItem';
-import { useContextLinkVariables } from './useContextLinkVariables';
-
 import styles from './ContextLinksSection.module.scss';
 
 /**
- * Edits the panel's context links (`spec.links`) as a list of saved links, each added or
- * edited through a modal ({@link ContextLinkDialog}) that carries V1's full authoring UX
- * (variable autocomplete, URL-parameters editor, validation).
+ * Edits the panel's context links (`spec.links`): a list of label + URL rows with an
+ * "open in new tab" toggle, plus add/remove. Atomic section — no per-kind sub-controls.
+ * URLs may reference dashboard/query variables; that interpolation is resolved at render
+ * time, so this editor just captures the raw strings.
  */
 function ContextLinksSection({
 	value,
 	onChange,
 }: SectionEditorProps<SectionKind.ContextLinks>): JSX.Element {
 	const links = value ?? [];
-	const variables = useContextLinkVariables();
 
-	// `index === null` while adding a new link; a number while editing an existing one.
-	const [dialog, setDialog] = useState<{ open: boolean; index: number | null }>({
-		open: false,
-		index: null,
-	});
+	const updateAt = (index: number, patch: Partial<DashboardLinkDTO>): void =>
+		onChange(
+			links.map((link, i) => (i === index ? { ...link, ...patch } : link)),
+		);
+
+	const addLink = (): void =>
+		onChange([...links, { name: '', url: '', targetBlank: true }]);
 
 	const removeAt = (index: number): void =>
 		onChange(links.filter((_, i) => i !== index));
 
-	const handleSave = (link: DashboardLinkDTO): void => {
-		onChange(
-			dialog.index === null
-				? [...links, link]
-				: links.map((existing, i) => (i === dialog.index ? link : existing)),
-		);
-		setDialog((d) => ({ ...d, open: false }));
-	};
-
-	const editingLink =
-		dialog.index !== null ? (links[dialog.index] ?? null) : null;
-
 	return (
 		<div className={styles.list}>
 			{links.map((link, index) => (
-				<ContextLinkListItem
-					// Links have no stable id on the wire; index is the row identity here.
-					// eslint-disable-next-line react/no-array-index-key
-					key={index}
-					link={link}
-					index={index}
-					onEdit={(): void => setDialog({ open: true, index })}
-					onRemove={(): void => removeAt(index)}
-				/>
+				// Links have no stable id on the wire; index is the row identity here.
+				// eslint-disable-next-line react/no-array-index-key
+				<div className={styles.row} key={index}>
+					<Input
+						data-testid={`context-link-label-${index}`}
+						placeholder="Label"
+						value={link.name ?? ''}
+						onChange={(e): void => updateAt(index, { name: e.target.value })}
+					/>
+					<Input
+						data-testid={`context-link-url-${index}`}
+						placeholder="https://… or /path?var=$variable"
+						value={link.url ?? ''}
+						onChange={(e): void => updateAt(index, { url: e.target.value })}
+					/>
+					<div className={styles.rowFooter}>
+						<div className={styles.newTab}>
+							<Switch
+								testId={`context-link-newtab-${index}`}
+								value={link.targetBlank ?? false}
+								onChange={(checked: boolean): void =>
+									updateAt(index, { targetBlank: checked })
+								}
+							/>
+							<Typography.Text className={styles.newTabLabel}>
+								Open in new tab
+							</Typography.Text>
+						</div>
+						<Button
+							type="button"
+							variant="ghost"
+							color="destructive"
+							size="icon"
+							aria-label={`Remove link ${index + 1}`}
+							data-testid={`context-link-remove-${index}`}
+							onClick={(): void => removeAt(index)}
+						>
+							<Trash2 size={14} />
+						</Button>
+					</div>
+				</div>
 			))}
 
 			<Button
@@ -66,18 +86,10 @@ function ContextLinksSection({
 				color="secondary"
 				prefix={<Plus size={14} />}
 				data-testid="panel-editor-v2-add-link"
-				onClick={(): void => setDialog({ open: true, index: null })}
+				onClick={addLink}
 			>
-				Add Context Link
+				Add link
 			</Button>
-
-			<ContextLinkDialog
-				open={dialog.open}
-				initialLink={editingLink}
-				variables={variables}
-				onOpenChange={(open): void => setDialog((d) => ({ ...d, open }))}
-				onSave={handleSave}
-			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/VariablesPopover.module.scss

@@ -1,64 +0,0 @@
-.container {
-	width: 100%;
-}
-
-.anchor {
-	width: 100%;
-}
-
-.content {
-	z-index: 1100;
-	padding: 4px 0;
-	max-height: 300px;
-	overflow-y: auto;
-	overflow-x: hidden;
-	min-width: var(--radix-popover-trigger-width);
-}
-
-.empty {
-	padding: 8px 12px;
-	color: var(--text-vanilla-400);
-	font-size: 12px;
-	font-style: italic;
-}
-
-.item {
-	--button-display: flex;
-	--button-justify-content: flex-start;
-	--button-height: auto;
-	--button-padding: 8px 12px;
-	--button-border-radius: 0;
-	--button-font-size: 13px;
-	--button-line-height: 1.4;
-
-	width: 100%;
-	overflow: hidden;
-}
-
-.row {
-	display: flex;
-	flex: 1 1 auto;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	min-width: 0;
-}
-
-.name,
-.source {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.name {
-	flex: 1 1 auto;
-	text-align: start;
-}
-
-.source {
-	color: var(--l3-foreground);
-	font-size: 12px;
-	flex: 0 1 auto;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/VariablesPopover.tsx

@@ -1,117 +0,0 @@
-// Uses Popover (not DropdownMenu): DropdownMenuTrigger preventDefaults pointerdown,
-// which steals input focus and dismisses on every keystroke. PopoverAnchor is a passive
-// positioning element that leaves the wrapped input fully interactive.
-import { ReactNode, useRef, useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Popover, PopoverAnchor, PopoverContent } from '@signozhq/ui/popover';
-import { Typography } from '@signozhq/ui/typography';
-
-import type { VariableItem } from './types';
-
-import styles from './VariablesPopover.module.scss';
-
-interface VariablesPopoverRenderProps {
-	setIsOpen: (open: boolean) => void;
-	setCursorPosition: (position: number | null) => void;
-}
-
-interface VariablesPopoverProps {
-	variables: VariableItem[];
-	/** Called with the braces-wrapped token (e.g. `{{env}}`) and the tracked cursor offset. */
-	onVariableSelect: (token: string, cursorPosition?: number) => void;
-	children: (props: VariablesPopoverRenderProps) => ReactNode;
-}
-
-/**
- * Autocomplete for context-link variables. Wraps an input (via the render-prop) and
- * shows the available `{{variables}}` grouped by source; picking one inserts it at the
- * tracked cursor. The consumer drives `setIsOpen` (on focus) and `setCursorPosition`.
- */
-function VariablesPopover({
-	variables,
-	onVariableSelect,
-	children,
-}: VariablesPopoverProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(false);
-	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
-	const anchorRef = useRef<HTMLDivElement>(null);
-
-	const handleOpenChange = (open: boolean): void => {
-		// Accept "close" events (outside-click, Esc) but ignore opens — opening is driven
-		// by the input's onFocus in the consumer.
-		if (!open) {
-			setIsOpen(false);
-		}
-	};
-
-	// Keep the popover open while the pointer/focus is inside the anchored input.
-	const keepOpenIfInsideAnchor = (event: {
-		target: EventTarget | null;
-	}): void => {
-		const target = event.target as Node | null;
-		if (
-			target &&
-			anchorRef.current?.contains(target) &&
-			'preventDefault' in event
-		) {
-			(event as Event).preventDefault();
-		}
-	};
-
-	return (
-		<div className={styles.container}>
-			<Popover open={isOpen} onOpenChange={handleOpenChange} modal={false}>
-				<PopoverAnchor asChild>
-					<div className={styles.anchor} ref={anchorRef}>
-						{children({ setIsOpen, setCursorPosition })}
-					</div>
-				</PopoverAnchor>
-				<PopoverContent
-					align="start"
-					sideOffset={4}
-					// Render inside the anchor (not a body portal): the editor lives in a modal
-					// DialogWrapper, and radix's modal sets pointer-events:none on everything
-					// portalled outside it, which would make the suggestions unclickable.
-					withPortal={false}
-					className={styles.content}
-					onOpenAutoFocus={(e): void => e.preventDefault()}
-					onCloseAutoFocus={(e): void => e.preventDefault()}
-					onInteractOutside={keepOpenIfInsideAnchor}
-					onFocusOutside={keepOpenIfInsideAnchor}
-				>
-					{variables.length === 0 ? (
-						<div className={styles.empty}>No variables available</div>
-					) : (
-						variables.map((v) => (
-							<Button
-								key={`${v.source}-${v.name}`}
-								type="button"
-								variant="ghost"
-								color="secondary"
-								size="md"
-								className={styles.item}
-								aria-label={`Insert {{${v.name}}}`}
-								testId={`context-link-variable-${v.name}`}
-								// Prevent the input from losing focus when clicking an item.
-								onMouseDown={(e): void => e.preventDefault()}
-								onClick={(): void => {
-									onVariableSelect(`{{${v.name}}}`, cursorPosition ?? undefined);
-									setIsOpen(false);
-								}}
-							>
-								<div className={styles.row}>
-									<Typography.Text
-										className={styles.name}
-									>{`{{${v.name}}}`}</Typography.Text>
-									<Typography.Text className={styles.source}>{v.source}</Typography.Text>
-								</div>
-							</Button>
-						))
-					)}
-				</PopoverContent>
-			</Popover>
-		</div>
-	);
-}
-
-export default VariablesPopover;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/__tests__/ContextLinksSection.test.tsx

@@ -3,92 +3,47 @@ import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
 
 import ContextLinksSection from '../ContextLinksSection';
 
-// The variable-source hook reads the query-builder provider + store; stub it so the
-// editor can be exercised in isolation (its own suite covers the sourcing logic).
-jest.mock('../useContextLinkVariables', () => ({
-	useContextLinkVariables: (): unknown => [
-		{ name: 'timestamp_start', source: 'Global timestamp' },
-		{ name: 'env', source: 'Dashboard variable' },
-	],
-}));
-
 const LINKS: DashboardLinkDTO[] = [
 	{ name: 'Docs', url: 'https://signoz.io', targetBlank: true },
 ];
 
-const lastCall = (fn: jest.Mock): DashboardLinkDTO[] =>
-	fn.mock.calls[fn.mock.calls.length - 1][0];
-
 describe('ContextLinksSection', () => {
 	it('renders only the add button when there are no links', () => {
 		render(<ContextLinksSection value={undefined} onChange={jest.fn()} />);
 
 		expect(screen.getByTestId('panel-editor-v2-add-link')).toBeInTheDocument();
-		expect(screen.queryByTestId('context-link-item-0')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('context-link-label-0')).not.toBeInTheDocument();
 	});
 
-	it('renders existing links as list items showing the label', () => {
-		render(<ContextLinksSection value={LINKS} onChange={jest.fn()} />);
-
-		expect(screen.getByTestId('context-link-item-0')).toHaveTextContent('Docs');
-		// The editor is a modal — no inline fields until it's opened.
-		expect(screen.queryByTestId('context-link-url')).not.toBeInTheDocument();
-	});
-
-	it('adds a link through the dialog (Save gated on a valid URL)', async () => {
+	it('appends a blank link (open-in-new-tab on) when Add link is clicked', () => {
 		const onChange = jest.fn();
 		render(<ContextLinksSection value={[]} onChange={onChange} />);
 
 		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
 
-		const save = await screen.findByTestId('context-link-save');
-		expect(save).toBeDisabled();
-
-		fireEvent.change(screen.getByTestId('context-link-url'), {
-			target: { value: 'https://signoz.io' },
-		});
-		fireEvent.change(screen.getByTestId('context-link-label'), {
-			target: { value: 'Docs' },
-		});
-		expect(save).not.toBeDisabled();
-
-		fireEvent.click(save);
 		expect(onChange).toHaveBeenCalledWith([
-			{
-				name: 'Docs',
-				url: 'https://signoz.io',
-				targetBlank: true,
-				renderVariables: true,
-			},
+			{ name: '', url: '', targetBlank: true },
 		]);
 	});
 
-	it('edits an existing link through the dialog', async () => {
+	it('renders existing links and edits a label through onChange', () => {
 		const onChange = jest.fn();
 		render(<ContextLinksSection value={LINKS} onChange={onChange} />);
 
-		fireEvent.click(screen.getByTestId('context-link-edit-0'));
-
-		const label = await screen.findByTestId('context-link-label');
-		expect(label).toHaveValue('Docs');
-		expect(screen.getByTestId('context-link-url')).toHaveValue(
+		expect(screen.getByTestId('context-link-label-0')).toHaveValue('Docs');
+		expect(screen.getByTestId('context-link-url-0')).toHaveValue(
 			'https://signoz.io',
 		);
 
-		fireEvent.change(label, { target: { value: 'Runbook' } });
-		fireEvent.click(screen.getByTestId('context-link-save'));
-
+		fireEvent.change(screen.getByTestId('context-link-label-0'), {
+			target: { value: 'Runbook' },
+		});
 		expect(onChange).toHaveBeenCalledWith([
-			{
-				name: 'Runbook',
-				url: 'https://signoz.io',
-				targetBlank: true,
-				renderVariables: true,
-			},
+			{ name: 'Runbook', url: 'https://signoz.io', targetBlank: true },
 		]);
 	});
 
-	it('removes a link from the list', () => {
+	it('removes a link through onChange', () => {
 		const onChange = jest.fn();
 		render(<ContextLinksSection value={LINKS} onChange={onChange} />);
 
@@ -96,52 +51,4 @@ describe('ContextLinksSection', () => {
 
 		expect(onChange).toHaveBeenCalledWith([]);
 	});
-
-	it('shows a validation error only for a malformed URL', async () => {
-		render(<ContextLinksSection value={[]} onChange={jest.fn()} />);
-		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
-
-		const urlInput = await screen.findByTestId('context-link-url');
-
-		fireEvent.change(urlInput, { target: { value: 'not-a-url' } });
-		expect(screen.getByTestId('context-link-url-error')).toBeInTheDocument();
-		expect(screen.getByTestId('context-link-save')).toBeDisabled();
-
-		fireEvent.change(urlInput, { target: { value: '/valid/path' } });
-		expect(
-			screen.queryByTestId('context-link-url-error'),
-		).not.toBeInTheDocument();
-	});
-
-	it('adds a URL parameter and writes it into the URL query string', async () => {
-		const onChange = jest.fn();
-		render(<ContextLinksSection value={[]} onChange={onChange} />);
-		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
-
-		fireEvent.change(await screen.findByTestId('context-link-url'), {
-			target: { value: '/logs' },
-		});
-		fireEvent.click(screen.getByTestId('context-link-add-param'));
-		fireEvent.change(screen.getByTestId('context-link-param-key-0'), {
-			target: { value: 'env' },
-		});
-		fireEvent.click(screen.getByTestId('context-link-save'));
-
-		expect(lastCall(onChange)).toStrictEqual([
-			{ name: '', url: '/logs?env=', targetBlank: true, renderVariables: true },
-		]);
-	});
-
-	it('inserts a {{variable}} into the URL from the autocomplete popover', async () => {
-		render(<ContextLinksSection value={[]} onChange={jest.fn()} />);
-		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
-
-		const urlInput = await screen.findByTestId('context-link-url');
-		fireEvent.focus(urlInput);
-		fireEvent.click(
-			await screen.findByTestId('context-link-variable-timestamp_start'),
-		);
-
-		expect(urlInput).toHaveValue('{{timestamp_start}}');
-	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/__tests__/useContextLinkVariables.test.tsx

@@ -1,83 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import { useContextLinkVariables } from '../useContextLinkVariables';
-
-const mockUseGetDashboardV2 = jest.fn();
-const mockUseQueryBuilder = jest.fn();
-
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore',
-	() => ({
-		useDashboardStore: (
-			selector: (s: { dashboardId: string }) => unknown,
-		): unknown => selector({ dashboardId: 'dash-1' }),
-	}),
-);
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): unknown => mockUseQueryBuilder(),
-}));
-
-jest.mock('api/generated/services/dashboard', () => ({
-	useGetDashboardV2: (): unknown => mockUseGetDashboardV2(),
-}));
-
-// dtoToFormModel is exercised by its own suite; here we only need it to surface a name.
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters',
-	() => ({
-		dtoToFormModel: (dto: { name: string }): { name: string } => ({
-			name: dto.name,
-		}),
-	}),
-);
-
-describe('useContextLinkVariables', () => {
-	beforeEach(() => {
-		mockUseQueryBuilder.mockReturnValue({
-			currentQuery: {
-				builder: {
-					queryData: [
-						{ groupBy: [{ key: 'service.name' }, { key: 'env' }] },
-						// Duplicate across queries — must dedupe.
-						{ groupBy: [{ key: 'service.name' }] },
-					],
-				},
-			},
-		});
-		mockUseGetDashboardV2.mockReturnValue({
-			data: {
-				data: { spec: { variables: [{ name: 'region' }, { name: 'tier' }] } },
-			},
-		});
-	});
-
-	it('orders globals, then _prefixed query fields (deduped), then dashboard vars', () => {
-		const { result } = renderHook(() => useContextLinkVariables());
-
-		expect(result.current).toStrictEqual([
-			{ name: 'timestamp_start', source: 'Global timestamp' },
-			{ name: 'timestamp_end', source: 'Global timestamp' },
-			{ name: '_service.name', source: 'Query variable' },
-			{ name: '_env', source: 'Query variable' },
-			{ name: 'region', source: 'Dashboard variable' },
-			{ name: 'tier', source: 'Dashboard variable' },
-		]);
-	});
-
-	it('still returns the global timestamps when there are no queries or variables', () => {
-		mockUseQueryBuilder.mockReturnValue({
-			currentQuery: { builder: { queryData: [] } },
-		});
-		// Loaded dashboard with no variables — useDashboardFetchRequired guarantees the
-		// dashboard is present, so the empty case is an empty spec, not `undefined`.
-		mockUseGetDashboardV2.mockReturnValue({ data: { data: { spec: {} } } });
-
-		const { result } = renderHook(() => useContextLinkVariables());
-
-		expect(result.current).toStrictEqual([
-			{ name: 'timestamp_start', source: 'Global timestamp' },
-			{ name: 'timestamp_end', source: 'Global timestamp' },
-		]);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/__tests__/utils.test.ts

@@ -1,68 +0,0 @@
-import {
-	getUrlParams,
-	insertVariableAtCursor,
-	isValidContextLinkUrl,
-	updateUrlWithParams,
-} from '../utils';
-
-describe('ContextLinksSection utils', () => {
-	describe('isValidContextLinkUrl', () => {
-		it.each([
-			['', true],
-			['https://signoz.io', true],
-			['http://localhost:3301/trace', true],
-			['/trace/{{_traceId}}', true],
-			['{{host}}/trace', true],
-			['trace/{{_traceId}}', false],
-			['ftp://signoz.io', false],
-		])('validates %p as %p', (url, expected) => {
-			expect(isValidContextLinkUrl(url)).toBe(expected);
-		});
-	});
-
-	describe('insertVariableAtCursor', () => {
-		it('inserts at the cursor position', () => {
-			expect(insertVariableAtCursor('/trace/', '{{id}}', 7)).toBe('/trace/{{id}}');
-			expect(insertVariableAtCursor('ab', '{{x}}', 1)).toBe('a{{x}}b');
-		});
-
-		it('appends when no cursor position is given', () => {
-			expect(insertVariableAtCursor('/trace/', '{{id}}')).toBe('/trace/{{id}}');
-		});
-	});
-
-	describe('getUrlParams', () => {
-		it('returns [] when there is no query string', () => {
-			expect(getUrlParams('/trace/{{id}}')).toStrictEqual([]);
-		});
-
-		it('parses and decodes key/value pairs', () => {
-			expect(getUrlParams('/logs?service={{svc}}&env=prod')).toStrictEqual([
-				{ key: 'service', value: '{{svc}}' },
-				{ key: 'env', value: 'prod' },
-			]);
-		});
-
-		it('double-decodes over-encoded values', () => {
-			// %257B%257B == encodeURIComponent('%7B%7B') == encodeURIComponent('{{')
-			expect(getUrlParams('/logs?q=%257B%257Bx%257D%257D')).toStrictEqual([
-				{ key: 'q', value: '{{x}}' },
-			]);
-		});
-	});
-
-	describe('updateUrlWithParams', () => {
-		it('rebuilds the query string and drops empty keys', () => {
-			expect(
-				updateUrlWithParams('/logs?old=1', [
-					{ key: 'service', value: '{{svc}}' },
-					{ key: '', value: 'ignored' },
-				]),
-			).toBe('/logs?service=%7B%7Bsvc%7D%7D');
-		});
-
-		it('drops the query string entirely when no valid params remain', () => {
-			expect(updateUrlWithParams('/logs?a=b', [])).toBe('/logs');
-		});
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/types.ts

@@ -1,29 +0,0 @@
-/**
- * Where a context-link variable comes from — shown as the right-hand label in the popover.
- *
- * - `Global timestamp` — the dashboard's selected time range: `timestamp_start` /
- *   `timestamp_end`. Always available, independent of the panel or its queries.
- * - `Query variable` — a `groupBy` field from the panel's own queries, `_`-prefixed
- *   (e.g. `_service_name`). Resolved at click time from the data point the user clicked,
- *   so it reflects the current query definition and changes as the queries are edited.
- * - `Dashboard variable` — a user-defined dashboard variable from Dashboard Settings
- *   (e.g. `env`, `region`). Shared across every panel and driven by the dashboard's
- *   variable selectors rather than by an individual query.
- */
-export type VariableSource =
-	| 'Global timestamp'
-	| 'Query variable'
-	| 'Dashboard variable';
-
-/** One entry in the context-link variable autocomplete. */
-export interface VariableItem {
-	/** Bare variable name without braces, e.g. `timestamp_start`, `_service_name`, `env`. */
-	name: string;
-	source: VariableSource;
-}
-
-/** A single decoded key/value pair parsed from (or written back to) a URL query string. */
-export interface UrlParam {
-	key: string;
-	value: string;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/useContextLinkVariables.ts

@@ -1,60 +0,0 @@
-import { useMemo } from 'react';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { dtoToFormModel } from 'pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters';
-import { useDashboardFetchRequired } from 'pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired';
-
-import type { VariableItem } from './types';
-
-// Global time-range variables, always available (V1 parity: `timestamp_start` / `_end`).
-const GLOBAL_TIMESTAMP_VARIABLES: VariableItem[] = [
-	{ name: 'timestamp_start', source: 'Global timestamp' },
-	{ name: 'timestamp_end', source: 'Global timestamp' },
-];
-
-/**
- * Variables offered by the context-link autocomplete, ordered as in V1: global
- * timestamps, then per-query `groupBy` fields (prefixed `_`), then dashboard variables.
- *
- * Self-contained — the editor renders inside the query-builder provider and the
- * DashboardContainer, so every source is read here rather than threaded through the
- * section registry. The dashboard fetch dedupes against the editor page's own query.
- */
-export function useContextLinkVariables(): VariableItem[] {
-	const { currentQuery } = useQueryBuilder();
-
-	const { variables: variableDtos } = useDashboardFetchRequired();
-
-	const dashboardVariableNames = useMemo(
-		() =>
-			variableDtos
-				.map((dto) => dtoToFormModel(dto).name)
-				.filter((name): name is string => !!name),
-		[variableDtos],
-	);
-
-	// `_`-prefixed to match V1 and avoid colliding with dashboard-variable names.
-	const fieldVariableNames = useMemo(() => {
-		const names = new Set<string>();
-		(currentQuery?.builder?.queryData ?? []).forEach((query) => {
-			(query.groupBy ?? []).forEach((field) => {
-				if (field.key) {
-					names.add(`_${field.key}`);
-				}
-			});
-		});
-		return Array.from(names);
-	}, [currentQuery?.builder?.queryData]);
-
-	return useMemo(
-		() => [
-			...GLOBAL_TIMESTAMP_VARIABLES,
-			...fieldVariableNames.map(
-				(name): VariableItem => ({ name, source: 'Query variable' }),
-			),
-			...dashboardVariableNames.map(
-				(name): VariableItem => ({ name, source: 'Dashboard variable' }),
-			),
-		],
-		[fieldVariableNames, dashboardVariableNames],
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/utils.ts

@@ -1,78 +0,0 @@
-import type { UrlParam } from './types';
-
-// A link URL must be absolute (http/https), root-relative (`/path`), or start with a
-// leading `{{var}}/` segment (a variable that resolves to a host/path at click-time).
-const CONTEXT_LINK_URL_PATTERN = /^(https?:\/\/|\/|{{.*}}\/)/;
-
-/**
- * Whether the URL is well-formed for a context link. Empty is treated as valid so the
- * editor doesn't nag while a row is still being filled in — emptiness is a separate concern.
- */
-export function isValidContextLinkUrl(url: string): boolean {
-	if (!url) {
-		return true;
-	}
-	return CONTEXT_LINK_URL_PATTERN.test(url);
-}
-
-/** Inserts `variable` into `current` at `cursorPosition`, or appends when it's unknown. */
-export function insertVariableAtCursor(
-	current: string,
-	variable: string,
-	cursorPosition?: number,
-): string {
-	if (cursorPosition === undefined) {
-		return current + variable;
-	}
-	return (
-		current.slice(0, cursorPosition) + variable + current.slice(cursorPosition)
-	);
-}
-
-// Values may be double-encoded on the wire; decode a second time only when it changes
-// the string, so already-single-encoded values are left intact.
-function decodeForDisplay(value: string): string {
-	const decoded = decodeURIComponent(value);
-	try {
-		const doubleDecoded = decodeURIComponent(decoded);
-		return doubleDecoded !== decoded ? doubleDecoded : decoded;
-	} catch {
-		return decoded;
-	}
-}
-
-/** Parses the `?a=b&c=d` query string of a URL into decoded key/value rows. */
-export function getUrlParams(url: string): UrlParam[] {
-	const [, queryString] = url.split('?');
-	if (!queryString) {
-		return [];
-	}
-
-	const params: UrlParam[] = [];
-	queryString.split('&').forEach((pair) => {
-		const [key, value] = pair.split('=');
-		if (key) {
-			params.push({
-				key: decodeURIComponent(key),
-				value: decodeForDisplay(value || ''),
-			});
-		}
-	});
-	return params;
-}
-
-/** Rewrites `url`'s query string from `params`, dropping rows with an empty key. */
-export function updateUrlWithParams(url: string, params: UrlParam[]): string {
-	const [baseUrl] = url.split('?');
-	const queryString = params
-		.filter((param) => param.key.trim() !== '')
-		.map(
-			(param) =>
-				`${encodeURIComponent(param.key.trim())}=${encodeURIComponent(
-					param.value,
-				)}`,
-		)
-		.join('&');
-
-	return queryString ? `${baseUrl}?${queryString}` : baseUrl;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/ThresholdsSection.tsx

@@ -8,7 +8,7 @@ import {
 	DashboardtypesThresholdFormatDTO,
 	type DashboardtypesThresholdWithLabelDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import {
+import type {
 	AnyThreshold,
 	ThresholdVariant,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
@@ -77,7 +77,7 @@ function ThresholdsSection({
 	yAxisUnit,
 	tableColumns = [],
 }: ThresholdsSectionProps): JSX.Element {
-	const variant = controls?.variant ?? ThresholdVariant.LABEL;
+	const variant = controls?.variant ?? 'label';
 	const thresholds = value ?? [];
 	// Which row is being edited, and whether it was just added (so Discard removes it).
 	const [editingIndex, setEditingIndex] = useState<number | null>(null);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/__tests__/ThresholdsSection.comparison.test.tsx

@@ -4,10 +4,7 @@ import {
 	type DashboardtypesComparisonThresholdDTO,
 	DashboardtypesThresholdFormatDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import {
-	ThresholdVariant,
-	type AnyThreshold,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+import type { AnyThreshold } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import UnifiedThresholdsSection from '../ThresholdsSection';
@@ -24,7 +21,7 @@ function ComparisonThresholdsSection(props: {
 			value={props.value}
 			onChange={props.onChange as (next: AnyThreshold[]) => void}
 			yAxisUnit={props.yAxisUnit}
-			controls={{ variant: ThresholdVariant.COMPARISON }}
+			controls={{ variant: 'comparison' }}
 		/>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/VisualizationSection.tsx

@@ -3,7 +3,6 @@ import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
-import { EQueryType } from 'types/common/dashboard';
 
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
@@ -39,9 +38,7 @@ function VisualizationSection({
 			{controls.switchPanelKind && panelKind && onChangePanelKind && (
 				<PanelTypeSwitcher
 					panelKind={panelKind}
-					// queryType is optional on the kind-erased section context, but always
-					// supplied in practice; default to Query Builder at this boundary.
-					queryType={queryType ?? EQueryType.QUERY_BUILDER}
+					queryType={queryType}
 					signal={signal}
 					onChange={onChangePanelKind}
 				/>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/Header/Header.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { SolidAlertTriangle, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
+import { ConfirmDialog } from '@signozhq/ui/dialog';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
 import { useConfirmableAction } from 'hooks/useConfirmableAction';
@@ -61,42 +61,24 @@ function Header({
 				</Button>
 			</div>
 
-			<DialogWrapper
+			<ConfirmDialog
 				open={discard.open}
-				onOpenChange={(next: boolean): void => {
+				onOpenChange={(next): void => {
 					if (!next) {
 						discard.cancel();
 					}
 				}}
 				title="Discard changes?"
 				titleIcon={<SolidAlertTriangle size={14} color="#fdd600" />}
-				testId="panel-editor-v2-discard-modal"
-				footer={
-					<>
-						<Button
-							type="button"
-							variant="solid"
-							color="destructive"
-							data-testid="panel-editor-v2-discard-confirm"
-							loading={discard.isPending}
-							onClick={discard.confirm}
-						>
-							Discard
-						</Button>
-						<Button
-							type="button"
-							variant="outlined"
-							color="secondary"
-							data-testid="panel-editor-v2-discard-cancel"
-							onClick={discard.cancel}
-						>
-							Keep editing
-						</Button>
-					</>
-				}
+				confirmText="Discard"
+				confirmColor="destructive"
+				cancelText="Keep editing"
+				onConfirm={discard.confirm}
+				onCancel={discard.cancel}
+				data-testid="panel-editor-v2-discard-modal"
 			>
 				<Typography>Your unsaved edits to this panel will be lost.</Typography>
-			</DialogWrapper>
+			</ConfirmDialog>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder.tsx

@@ -164,7 +164,7 @@ function PanelEditorQueryBuilder({
 							<TextToolTip text="This will temporarily save the current query and graph state. This will persist across tab change" />
 							<RunQueryBtn
 								className="run-query-dashboard-btn"
-								label="Run Query"
+								label="Stage & Run Query"
 								onStageRunQuery={onStageRunQuery}
 								isLoadingQueries={isLoadingQueries}
 								handleCancelQuery={onCancelQuery}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.module.scss

@@ -49,13 +49,6 @@
 	background: var(--l2-background);
 }
 
-// Standalone View stacks the graph-manager below the chart inside the surface (it
-// must stay within the chart's PlotContext). Let it flow out of the surface so the
-// modal body scrolls as a whole, instead of clipping it or scrolling the panel.
-.surfaceStacked {
-	overflow: visible;
-}
-
 .state {
 	flex: 1;
 	display: flex;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx

@@ -1,13 +1,11 @@
 import { useState } from 'react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import cx from 'classnames';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import PanelBody from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody';
 import PanelHeader from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
 import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
 import { getPanelQueryType } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType';
 import type {
 	PanelPagination,
@@ -25,8 +23,6 @@ interface PreviewPaneProps {
 	data: PanelQueryData;
 	/** Any fetch in flight — drives the header spinner and the body's loading state. */
 	isFetching: boolean;
-	/** Showing a prior page's data while the next loads; forwarded so the list shows skeleton rows. */
-	isPreviousData?: boolean;
 	error: Error | null;
 	/** Re-run the query (drives PanelBody's error-state retry). */
 	refetch: () => void;
@@ -34,14 +30,6 @@ interface PreviewPaneProps {
 	onDragSelect: (start: number, end: number) => void;
 	/** Server-side pager for raw/list panels; absent for non-paginated panels. */
 	pagination?: PanelPagination;
-	/** Render context — defaults to the editor's DASHBOARD_EDIT; the View modal passes STANDALONE_VIEW. */
-	panelMode?: PanelMode;
-	/** Hide the preview's top row entirely (query-type badge + time picker) — the View modal has its own header. */
-	hideHeader?: boolean;
-	/** Dashboard-wide preferences (cursor sync, …) forwarded to the body; the modal isolates cursor-sync. */
-	dashboardPreference?: DashboardPreference;
-	/** Close the standalone View modal — forwarded to the time-series/bar graph manager. */
-	onCloseStandaloneView?: () => void;
 }
 
 /**
@@ -55,15 +43,10 @@ function PreviewPane({
 	panelDefinition,
 	data,
 	isFetching,
-	isPreviousData,
 	error,
 	refetch,
 	onDragSelect,
 	pagination,
-	panelMode = PanelMode.DASHBOARD_EDIT,
-	hideHeader = false,
-	dashboardPreference,
-	onCloseStandaloneView,
 }: PreviewPaneProps): JSX.Element {
 	const panelType = PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind];
 	const queryType = getPanelQueryType(panel);
@@ -75,24 +58,18 @@ function PreviewPane({
 
 	return (
 		<div className={styles.preview}>
-			{!hideHeader && (
-				<div className={styles.header}>
-					<PlotTag
-						queryType={queryType}
-						panelType={panelType}
-						className={styles.queryType}
-					/>
-					<div className={styles.dateTimeSelector}>
-						<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-					</div>
+			<div className={styles.header}>
+				<PlotTag
+					queryType={queryType}
+					panelType={panelType}
+					className={styles.queryType}
+				/>
+				<div className={styles.dateTimeSelector}>
+					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
 				</div>
-			)}
+			</div>
 			<div className={styles.container}>
-				<div
-					className={cx(styles.surface, {
-						[styles.surfaceStacked]: panelMode === PanelMode.STANDALONE_VIEW,
-					})}
-				>
+				<div className={styles.surface}>
 					<PanelHeader
 						panelId={panelId}
 						panel={panel}
@@ -110,15 +87,12 @@ function PreviewPane({
 						panelId={panelId}
 						data={data}
 						isFetching={isFetching}
-						isPreviousData={isPreviousData}
 						error={error}
 						refetch={refetch}
 						onDragSelect={onDragSelect}
-						panelMode={panelMode}
-						dashboardPreference={dashboardPreference}
+						panelMode={PanelMode.DASHBOARD_EDIT}
 						searchTerm={searchable ? searchTerm : undefined}
 						pagination={pagination}
-						onCloseStandaloneView={onCloseStandaloneView}
 					/>
 				</div>
 			</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/PanelEditorContainer.test.tsx

@@ -1,274 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-
-import PanelEditorContainer from '../index';
-
-/**
- * Characterization test for the editor's composition: which derived values and
- * options it forwards to the draft/query/query-sync/type-switch hooks and to its
- * children. The leaf hooks are mocked as arg-capturing spies so this pins the
- * wiring; it stays valid (and guards behavior) after that wiring is pulled into a
- * shared edit-session hook, since the mocks intercept the leaf hooks either way.
- */
-
-const mockSetSpec = jest.fn();
-const mockRefetch = jest.fn();
-const mockCancelQuery = jest.fn();
-const mockBuildSaveSpec = jest.fn((spec: unknown) => spec);
-const mockOnChangePanelKind = jest.fn();
-const mockSave = jest.fn().mockResolvedValue(undefined);
-
-const mockUseDraft = jest.fn();
-jest.mock('../hooks/usePanelEditorDraft', () => ({
-	usePanelEditorDraft: (panel: unknown): unknown => mockUseDraft(panel),
-}));
-
-const mockUseQuery = jest.fn();
-jest.mock('../../hooks/usePanelQuery', () => ({
-	usePanelQuery: (args: unknown): unknown => mockUseQuery(args),
-}));
-
-const mockUseQuerySync = jest.fn();
-jest.mock('../hooks/usePanelEditorQuerySync', () => ({
-	usePanelEditorQuerySync: (args: unknown): unknown => mockUseQuerySync(args),
-}));
-
-const mockUseTypeSwitch = jest.fn();
-jest.mock('../hooks/usePanelTypeSwitch', () => ({
-	usePanelTypeSwitch: (args: unknown): unknown => mockUseTypeSwitch(args),
-}));
-
-jest.mock('../hooks/usePanelEditorSave', () => ({
-	usePanelEditorSave: (): unknown => ({ save: mockSave, isSaving: false }),
-}));
-
-jest.mock('../hooks/useSwitchColumnsOnSignalChange', () => ({
-	useSwitchColumnsOnSignalChange: jest.fn(),
-}));
-jest.mock('../hooks/useSeedNewListColumns', () => ({
-	useSeedNewListColumns: jest.fn(),
-}));
-jest.mock('../hooks/useLegendSeries', () => ({
-	useLegendSeries: (): [] => [],
-}));
-jest.mock('../hooks/useTableColumns', () => ({
-	useTableColumns: (): [] => [],
-}));
-jest.mock('../hooks/useMetricYAxisUnit', () => ({
-	useMetricYAxisUnit: (): unknown => ({
-		metricUnit: undefined,
-		isLoading: false,
-	}),
-}));
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): unknown => ({ currentQuery: { queryType: 'builder' } }),
-}));
-jest.mock(
-	'../../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions',
-	() => ({
-		usePanelInteractions: (): unknown => ({
-			onDragSelect: jest.fn(),
-			dashboardPreference: {},
-		}),
-	}),
-);
-
-jest.mock('@signozhq/ui/resizable', () => ({
-	__esModule: true,
-	ResizablePanelGroup: ({
-		children,
-	}: {
-		children: React.ReactNode;
-	}): JSX.Element => <div>{children}</div>,
-	ResizablePanel: ({ children }: { children: React.ReactNode }): JSX.Element => (
-		<div>{children}</div>
-	),
-	ResizableHandle: (): null => null,
-	useDefaultLayout: (): unknown => ({
-		defaultLayout: undefined,
-		onLayoutChanged: jest.fn(),
-	}),
-}));
-jest.mock('@signozhq/ui/sonner', () => ({
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-// Children mocked to capture props (and expose a Save trigger / footer slot).
-const mockHeaderProps = jest.fn();
-jest.mock('../Header/Header', () => ({
-	__esModule: true,
-	default: (props: { onSave: () => void }): JSX.Element => {
-		mockHeaderProps(props);
-		return (
-			<button type="button" data-testid="editor-save" onClick={props.onSave}>
-				save
-			</button>
-		);
-	},
-}));
-const mockPreviewProps = jest.fn();
-jest.mock('../PreviewPane/PreviewPane', () => ({
-	__esModule: true,
-	default: (props: unknown): JSX.Element => {
-		mockPreviewProps(props);
-		return <div data-testid="preview" />;
-	},
-}));
-const mockQbProps = jest.fn();
-jest.mock('../PanelEditorQueryBuilder/PanelEditorQueryBuilder', () => ({
-	__esModule: true,
-	default: (props: { footer?: React.ReactNode }): JSX.Element => {
-		mockQbProps(props);
-		return <div data-testid="qb">{props.footer}</div>;
-	},
-}));
-const mockConfigProps = jest.fn();
-jest.mock('../ConfigPane/ConfigPane', () => ({
-	__esModule: true,
-	default: (props: unknown): JSX.Element => {
-		mockConfigProps(props);
-		return <div data-testid="config" />;
-	},
-}));
-jest.mock('../ListColumnsEditor/ListColumnsEditor', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="list-columns" />,
-}));
-
-function makePanel(kind: string): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name: 'CPU' },
-			plugin: { kind, spec: {} },
-			queries: [],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-const baseProps = {
-	dashboardId: 'dash-1',
-	panelId: 'panel-1',
-	onClose: jest.fn(),
-	onSaved: jest.fn(),
-};
-
-function setup(
-	panel: DashboardtypesPanelDTO,
-	overrides?: Partial<React.ComponentProps<typeof PanelEditorContainer>>,
-): void {
-	mockUseDraft.mockReturnValue({
-		draft: panel,
-		spec: panel.spec,
-		setSpec: mockSetSpec,
-		isSpecDirty: false,
-	});
-	mockUseQuery.mockReturnValue({
-		data: { response: undefined },
-		isFetching: false,
-		error: null,
-		cancelQuery: mockCancelQuery,
-		refetch: mockRefetch,
-		pagination: undefined,
-	});
-	mockUseQuerySync.mockReturnValue({
-		runQuery: jest.fn(),
-		isQueryDirty: false,
-		buildSaveSpec: mockBuildSaveSpec,
-	});
-	mockUseTypeSwitch.mockReturnValue({
-		onChangePanelKind: mockOnChangePanelKind,
-	});
-	render(<PanelEditorContainer {...baseProps} panel={panel} {...overrides} />);
-}
-
-describe('PanelEditorContainer composition', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	it('renders the editor shell with preview, query builder, and config pane', () => {
-		const panel = makePanel('signoz/TimeSeriesPanel');
-		setup(panel);
-
-		expect(screen.getByTestId('panel-editor-v2')).toBeInTheDocument();
-		expect(screen.getByTestId('preview')).toBeInTheDocument();
-		expect(screen.getByTestId('qb')).toBeInTheDocument();
-		expect(screen.getByTestId('config')).toBeInTheDocument();
-
-		expect(mockPreviewProps).toHaveBeenCalledWith(
-			expect.objectContaining({
-				panel,
-				panelDefinition: getPanelDefinition('signoz/TimeSeriesPanel'),
-			}),
-		);
-		expect(mockQbProps).toHaveBeenCalledWith(
-			expect.objectContaining({ panelKind: 'signoz/TimeSeriesPanel' }),
-		);
-		expect(mockConfigProps).toHaveBeenCalledWith(
-			expect.objectContaining({
-				panel,
-				spec: panel.spec,
-				onChangePanelKind: mockOnChangePanelKind,
-			}),
-		);
-	});
-
-	it('forwards the derived panel type + query-sync options to the leaf hooks', () => {
-		const panel = makePanel('signoz/TimeSeriesPanel');
-		setup(panel);
-
-		expect(mockUseQuery).toHaveBeenCalledWith(
-			expect.objectContaining({ panel, panelId: 'panel-1', enabled: true }),
-		);
-		expect(mockUseQuerySync).toHaveBeenCalledWith(
-			expect.objectContaining({
-				panelType: PANEL_TYPES.TIME_SERIES,
-				setSpec: mockSetSpec,
-				refetch: mockRefetch,
-				alwaysSerializeQuery: false,
-				signal: getPanelDefinition('signoz/TimeSeriesPanel').supportedSignals[0],
-			}),
-		);
-		expect(mockUseTypeSwitch).toHaveBeenCalledWith(
-			expect.objectContaining({
-				panelType: PANEL_TYPES.TIME_SERIES,
-				spec: panel.spec,
-				setSpec: mockSetSpec,
-			}),
-		);
-	});
-
-	it('marks a new panel dirty and always serializes its query', () => {
-		setup(makePanel('signoz/TimeSeriesPanel'), { isNew: true });
-
-		expect(mockUseQuerySync).toHaveBeenCalledWith(
-			expect.objectContaining({ alwaysSerializeQuery: true }),
-		);
-		expect(mockHeaderProps).toHaveBeenCalledWith(
-			expect.objectContaining({ isDirty: true }),
-		);
-	});
-
-	it('bakes the live query into the spec on save, then notifies', async () => {
-		const panel = makePanel('signoz/TimeSeriesPanel');
-		setup(panel, { onSaved: baseProps.onSaved });
-
-		await userEvent.click(screen.getByTestId('editor-save'));
-
-		await waitFor(() => expect(baseProps.onSaved).toHaveBeenCalled());
-		expect(mockBuildSaveSpec).toHaveBeenCalledWith(panel.spec);
-		expect(mockSave).toHaveBeenCalledWith(panel.spec);
-	});
-
-	it('renders the list-columns editor only for list panels', () => {
-		setup(makePanel('signoz/ListPanel'));
-		expect(screen.getByTestId('list-columns')).toBeInTheDocument();
-	});
-
-	it('omits the list-columns editor for non-list panels', () => {
-		setup(makePanel('signoz/TimeSeriesPanel'));
-		expect(screen.queryByTestId('list-columns')).not.toBeInTheDocument();
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/getSwitchedPluginSpec.test.ts

@@ -1,5 +1,7 @@
 import {
+	DashboardtypesComparisonOperatorDTO,
 	type DashboardtypesPanelSpecDTO,
+	DashboardtypesThresholdFormatDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
@@ -26,21 +28,20 @@ function specWith(pluginSpec: unknown): DashboardtypesPanelSpecDTO {
 	} as unknown as DashboardtypesPanelSpecDTO;
 }
 
-// Thin wrapper — only prove delegation; seeding rules are covered in buildPluginSpec.test.ts.
 describe('getSwitchedPluginSpec', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockDefaultColumnsForSignal.mockReturnValue([]);
 	});
 
-	it("resolves the target kind's sections and carries the old spec through them", () => {
+	it('carries only unit + decimalPrecision when the new kind has a formatting section', () => {
 		mockGetPanelDefinition.mockReturnValue({
-			sections: [
-				{ kind: 'legend', controls: { position: true } },
-				{ kind: 'formatting', controls: { unit: true, decimals: true } },
-			],
+			sections: [{ kind: 'formatting', controls: { unit: true, decimals: true } }],
+		});
+		const old = specWith({
+			formatting: { unit: 'ms', decimalPrecision: 2, columnUnits: { A: 'bytes' } },
+			axes: { logScale: true },
 		});
-		const old = specWith({ formatting: { unit: 'ms', decimalPrecision: 2 } });
 
 		const result = getSwitchedPluginSpec(
 			old,
@@ -48,12 +49,25 @@ describe('getSwitchedPluginSpec', () => {
 			TelemetrytypesSignalDTO.logs,
 		);
 
-		expect(mockGetPanelDefinition).toHaveBeenCalledWith('signoz/TimeSeriesPanel');
-		expect(result.legend?.position).toBe('bottom');
 		expect(result.formatting).toStrictEqual({ unit: 'ms', decimalPrecision: 2 });
+		// Type-specific config from the old kind is dropped.
+		expect((result as { axes?: unknown }).axes).toBeUndefined();
 	});
 
-	it('forwards the signal to seed List columns', () => {
+	it('does not carry formatting when the new kind has no formatting section', () => {
+		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
+		const old = specWith({ formatting: { unit: 'ms' } });
+
+		const result = getSwitchedPluginSpec(
+			old,
+			'signoz/ListPanel',
+			TelemetrytypesSignalDTO.logs,
+		);
+
+		expect(result.formatting).toBeUndefined();
+	});
+
+	it('seeds List columns from the signal when switching into a List', () => {
 		const columns = [{ name: 'body' }];
 		mockDefaultColumnsForSignal.mockReturnValue(columns);
 		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
@@ -69,4 +83,155 @@ describe('getSwitchedPluginSpec', () => {
 		);
 		expect(result.selectFields).toBe(columns);
 	});
+
+	it('includes the kind section defaults (e.g. legend position)', () => {
+		mockGetPanelDefinition.mockReturnValue({
+			sections: [{ kind: 'legend', controls: { position: true } }],
+		});
+
+		const result = getSwitchedPluginSpec(
+			specWith({}),
+			'signoz/PieChartPanel',
+			TelemetrytypesSignalDTO.logs,
+		);
+
+		expect(result.legend?.position).toBe('bottom');
+	});
+
+	describe('thresholds', () => {
+		it('does not carry thresholds when the new kind has no thresholds section', () => {
+			mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
+			const old = specWith({
+				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/ListPanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			expect(result.thresholds).toBeUndefined();
+		});
+
+		it('carries thresholds verbatim within the label variant (color/value/unit/label)', () => {
+			mockGetPanelDefinition.mockReturnValue({
+				sections: [{ kind: 'thresholds', controls: { variant: 'label' } }],
+			});
+			const old = specWith({
+				thresholds: [{ value: 80, color: '#F1575F', unit: 'ms', label: 'warn' }],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/BarChartPanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			expect(result.thresholds).toStrictEqual([
+				{ value: 80, color: '#F1575F', unit: 'ms', label: 'warn' },
+			]);
+		});
+
+		it('remaps label thresholds into the comparison variant, defaulting operator + format', () => {
+			mockGetPanelDefinition.mockReturnValue({
+				sections: [{ kind: 'thresholds', controls: { variant: 'comparison' } }],
+			});
+			const old = specWith({
+				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/NumberPanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			// The label is dropped; operator/format are seeded so the threshold can match.
+			expect(result.thresholds).toStrictEqual([
+				{
+					value: 80,
+					color: '#F1575F',
+					operator: DashboardtypesComparisonOperatorDTO.above,
+					format: DashboardtypesThresholdFormatDTO.text,
+				},
+			]);
+		});
+
+		it('remaps comparison thresholds into the table variant, keeping operator/format and seeding a column', () => {
+			mockGetPanelDefinition.mockReturnValue({
+				sections: [{ kind: 'thresholds', controls: { variant: 'table' } }],
+			});
+			const old = specWith({
+				thresholds: [
+					{
+						value: 80,
+						color: '#F1575F',
+						operator: DashboardtypesComparisonOperatorDTO.below,
+						format: DashboardtypesThresholdFormatDTO.text,
+					},
+				],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/TablePanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			expect(result.thresholds).toStrictEqual([
+				{
+					value: 80,
+					color: '#F1575F',
+					operator: DashboardtypesComparisonOperatorDTO.below,
+					format: DashboardtypesThresholdFormatDTO.text,
+					columnName: '',
+				},
+			]);
+		});
+
+		it('drops the table-only columnName when remapping into the label variant', () => {
+			mockGetPanelDefinition.mockReturnValue({
+				sections: [{ kind: 'thresholds', controls: { variant: 'label' } }],
+			});
+			const old = specWith({
+				thresholds: [
+					{
+						value: 80,
+						color: '#F1575F',
+						operator: DashboardtypesComparisonOperatorDTO.above,
+						format: DashboardtypesThresholdFormatDTO.background,
+						columnName: 'p99',
+					},
+				],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/TimeSeriesPanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			expect(result.thresholds).toStrictEqual([{ value: 80, color: '#F1575F' }]);
+		});
+
+		it('defaults the variant to label when the thresholds section omits controls', () => {
+			mockGetPanelDefinition.mockReturnValue({
+				sections: [{ kind: 'thresholds', controls: {} }],
+			});
+			const old = specWith({
+				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/TimeSeriesPanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			expect(result.thresholds).toStrictEqual([
+				{ value: 80, color: '#F1575F', label: 'warn' },
+			]);
+		});
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec.ts

@@ -1,27 +1,149 @@
-import type {
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
+import {
+	DashboardtypesComparisonOperatorDTO,
+	type DashboardtypesPanelSpecDTO,
+	DashboardtypesThresholdFormatDTO,
+	type TelemetrytypesSignalDTO,
+	type TelemetrytypesTelemetryFieldKeyDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import type { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import {
-	buildPluginSpec,
-	type SeededPluginSpec,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/buildPluginSpec';
+	type AnyThreshold,
+	type PanelFormattingSlice,
+	type SectionConfig,
+	SectionKind,
+	type ThresholdVariant,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+import {
+	buildDefaultPluginSpec,
+	type DefaultPluginSpec,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/buildDefaultPluginSpec';
 
-export type SwitchedPluginSpec = SeededPluginSpec;
+import { defaultColumnsForSignal } from './ListColumnsEditor/selectFields';
 
 /**
- * Plugin spec for a first-visit switch to `newKind`: the kind's defaults plus the cross-kind
- * config each section carries from `oldSpec`. Revisiting a kind restores its stash instead.
+ * Plugin spec produced on a first-time switch to a new kind. A partial cross-section
+ * of the per-kind spec union; the caller assigns it to `plugin.spec` (typed `unknown`)
+ * at the boundary.
+ */
+export interface SwitchedPluginSpec extends DefaultPluginSpec {
+	formatting?: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'>;
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+	thresholds?: AnyThreshold[];
+}
+
+/** Every field any threshold variant can hold; switching reads across shapes to remap. */
+interface AnyThresholdFields {
+	color: string;
+	value: number;
+	unit?: string;
+	operator?: DashboardtypesComparisonOperatorDTO;
+	format?: DashboardtypesThresholdFormatDTO;
+	columnName?: string;
+	label?: string;
+}
+
+/** The threshold variant a kind edits, or `undefined` when it has no Thresholds section. */
+function getThresholdVariant(
+	sections: SectionConfig[],
+): ThresholdVariant | undefined {
+	const section = sections.find(
+		(s): s is Extract<SectionConfig, { kind: SectionKind.Thresholds }> =>
+			s.kind === SectionKind.Thresholds,
+	);
+	return section ? (section.controls.variant ?? 'label') : undefined;
+}
+
+/**
+ * Remaps a threshold to the target kind's variant: keeps the shared core (color, value,
+ * unit) plus any cross-variant fields, and seeds the rest with the variant's defaults so
+ * the carried threshold stays functional (a comparison/table threshold needs an operator
+ * to match, a table threshold a column).
+ */
+function toThresholdVariant(
+	source: AnyThresholdFields,
+	variant: ThresholdVariant,
+): AnyThreshold {
+	const core = {
+		color: source.color,
+		value: source.value,
+		...(source.unit !== undefined && { unit: source.unit }),
+	};
+	if (variant === 'comparison') {
+		return {
+			...core,
+			operator: source.operator ?? DashboardtypesComparisonOperatorDTO.above,
+			format: source.format ?? DashboardtypesThresholdFormatDTO.text,
+		};
+	}
+	if (variant === 'table') {
+		return {
+			...core,
+			operator: source.operator ?? DashboardtypesComparisonOperatorDTO.above,
+			format: source.format ?? DashboardtypesThresholdFormatDTO.background,
+			columnName: source.columnName ?? '',
+		};
+	}
+	return {
+		...core,
+		...(source.label !== undefined && { label: source.label }),
+	};
+}
+
+/**
+ * Builds the plugin spec for a first-visit switch to `newKind`: the kind's declared
+ * section defaults (so the config pane opens populated, matching new-panel seeding) plus
+ * the cross-kind config worth keeping — unit + decimal precision, and thresholds when the
+ * new kind supports them (remapped to its variant). Switching into a List seeds the
+ * current signal's default columns so the columns control isn't empty.
+ *
+ * Revisiting a kind restores its stashed spec instead, so this runs only on first visit.
  */
 export function getSwitchedPluginSpec(
 	oldSpec: DashboardtypesPanelSpecDTO,
 	newKind: PanelKind,
 	signal: TelemetrytypesSignalDTO,
 ): SwitchedPluginSpec {
-	return buildPluginSpec(getPanelDefinition(newKind).sections, {
-		oldSpec,
-		signal,
-	});
+	const sections = getPanelDefinition(newKind).sections;
+	const result: SwitchedPluginSpec = buildDefaultPluginSpec(sections);
+
+	if (sections.some((section) => section.kind === SectionKind.Formatting)) {
+		const oldFormatting = (
+			oldSpec.plugin.spec as {
+				formatting?: PanelFormattingSlice;
+			}
+		).formatting;
+		const carried: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'> = {
+			...(oldFormatting?.unit !== undefined && { unit: oldFormatting.unit }),
+			...(oldFormatting?.decimalPrecision !== undefined && {
+				decimalPrecision: oldFormatting.decimalPrecision,
+			}),
+		};
+		if (Object.keys(carried).length > 0) {
+			result.formatting = carried;
+		}
+	}
+
+	if (sections.some((section) => section.kind === SectionKind.Columns)) {
+		const columns = defaultColumnsForSignal(signal);
+		if (columns.length > 0) {
+			result.selectFields = columns;
+		}
+	}
+
+	const thresholdVariant = getThresholdVariant(sections);
+	if (thresholdVariant) {
+		const oldThresholds = (
+			oldSpec.plugin.spec as {
+				thresholds?: AnyThreshold[] | null;
+			}
+		).thresholds;
+		if (oldThresholds && oldThresholds.length > 0) {
+			result.thresholds = oldThresholds.map((threshold) =>
+				toThresholdVariant(threshold as AnyThresholdFields, thresholdVariant),
+			);
+		}
+	}
+
+	return result;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/__tests__/usePanelTypeSwitch.test.ts

@@ -49,7 +49,6 @@ const LIST_QUERIES = [{ id: 'list-q' }] as unknown as NonNullable<
 const TRANSFORMED = {
 	id: 'transformed',
 	queryType: 'builder',
-	builder: { queryData: [{ orderBy: [] }] },
 } as unknown as Query;
 const CONVERTED = [{ id: 'converted' }] as unknown as NonNullable<
 	DashboardtypesPanelSpecDTO['queries']
@@ -132,39 +131,7 @@ describe('usePanelTypeSwitch', () => {
 		expect(next.plugin.kind).toBe('signoz/ListPanel');
 		expect(next.plugin.spec).toBe(SWITCHED_SPEC);
 		expect(next.queries).toBe(CONVERTED);
-		const redirected = state.redirectWithQueryBuilderData.mock
-			.calls[0][0] as Query;
-		expect(redirected.builder.queryData[0].orderBy).toStrictEqual([
-			{ columnName: 'timestamp', order: 'desc' },
-		]);
-	});
-
-	it('seeds timestamp-desc Order By on every query when switching to a List panel', () => {
-		const setSpec = jest.fn();
-		mockUseQueryBuilder.mockReturnValue(
-			builderState({ id: 'ts-current', queryType: 'builder' } as Query),
-		);
-		mockHandleQueryChange.mockReturnValue({
-			id: 'transformed',
-			queryType: 'builder',
-			builder: { queryData: [{ orderBy: [] }, { orderBy: undefined }] },
-		} as unknown as Query);
-
-		const { result } = renderHook(() =>
-			usePanelTypeSwitch({
-				spec: makeSpec('signoz/TimeSeriesPanel', {}, TABLE_QUERIES),
-				panelType: PANEL_TYPES.TIME_SERIES,
-				setSpec,
-			}),
-		);
-		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
-
-		const [persisted] = mockToPerses.mock.calls[0] as [Query];
-		persisted.builder.queryData.forEach((qd) => {
-			expect(qd.orderBy).toStrictEqual([
-				{ columnName: 'timestamp', order: 'desc' },
-			]);
-		});
+		expect(state.redirectWithQueryBuilderData).toHaveBeenCalledWith(TRANSFORMED);
 	});
 
 	it('coerces the query type when the new kind disallows it (promql → List)', () => {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditSession.ts

@@ -1,119 +0,0 @@
-import type {
-	DashboardtypesPanelDTO,
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import type { PANEL_TYPES } from 'constants/queryBuilder';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
-import {
-	PANEL_KIND_TO_PANEL_TYPE,
-	type PanelKind,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import {
-	usePanelQuery,
-	type PanelQueryTimeOverride,
-	type UsePanelQueryResult,
-} from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
-
-import { usePanelEditorDraft } from './usePanelEditorDraft';
-import { usePanelEditorQuerySync } from './usePanelEditorQuerySync';
-import { usePanelTypeSwitch } from './usePanelTypeSwitch';
-
-interface UsePanelEditSessionArgs {
-	panel: DashboardtypesPanelDTO;
-	panelId: string;
-	/** Per-view time window (epoch ms); omit to follow the dashboard's global window. */
-	time?: PanelQueryTimeOverride;
-	/** Serialize the live builder query into the spec on save even if unchanged (new panels). */
-	alwaysSerializeQuery?: boolean;
-	/** Seed an empty builder with the kind's default signal (new panels) — off for drilldown. */
-	seedQuerySignal?: boolean;
-}
-
-export interface UsePanelEditSessionReturn {
-	/** Local editable copy of the panel — the preview renders this, not the saved panel. */
-	draft: DashboardtypesPanelDTO;
-	spec: DashboardtypesPanelSpecDTO;
-	setSpec: (next: DashboardtypesPanelSpecDTO) => void;
-	isSpecDirty: boolean;
-	/** Restore the draft to the originally-loaded panel. */
-	reset: () => void;
-	/** Draft kind → V1 panel type (drives the query builder + preview). */
-	panelType: PANEL_TYPES;
-	panelDefinition: RenderablePanelDefinition;
-	/** The kind's first supported signal — seeds new queries/columns. */
-	defaultSignal: TelemetrytypesSignalDTO;
-	/** Shared query result for the draft over the resolved time window. */
-	query: UsePanelQueryResult;
-	/** Stage & run the live builder query into the draft. */
-	runQuery: () => void;
-	isQueryDirty: boolean;
-	/** Bake the live (possibly un-run) query into a spec — for save / editor handoff. */
-	buildSaveSpec: (
-		spec: DashboardtypesPanelSpecDTO,
-	) => DashboardtypesPanelSpecDTO;
-	/** Switch the draft's visualization kind in place (reversible per session). */
-	onChangePanelKind: (kind: PanelKind) => void;
-}
-
-/**
- * The panel-editing pipeline shared by the full-page editor and the View modal's
- * drilldown editor: a local draft, its query result over the resolved time window,
- * the staged-query sync, and the visualization-kind switch. Each consumer layers its
- * own concerns on top (the editor adds save + list seeding; the modal adds per-view
- * time isolation + reset). Keeping the wiring here stops the two from drifting.
- */
-export function usePanelEditSession({
-	panel,
-	panelId,
-	time,
-	alwaysSerializeQuery = false,
-	seedQuerySignal = false,
-}: UsePanelEditSessionArgs): UsePanelEditSessionReturn {
-	const { draft, spec, setSpec, isSpecDirty, reset } =
-		usePanelEditorDraft(panel);
-
-	const panelKind = draft.spec.plugin.kind;
-	const panelDefinition = getPanelDefinition(panelKind);
-	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
-	const defaultSignal = panelDefinition.supportedSignals[0];
-
-	const query = usePanelQuery({
-		panel: draft,
-		panelId,
-		time,
-		enabled: !!panelDefinition,
-	});
-
-	const { runQuery, isQueryDirty, buildSaveSpec } = usePanelEditorQuerySync({
-		draft,
-		panelType,
-		setSpec,
-		refetch: query.refetch,
-		alwaysSerializeQuery,
-		signal: seedQuerySignal ? defaultSignal : undefined,
-	});
-
-	const { onChangePanelKind } = usePanelTypeSwitch({
-		spec: draft.spec,
-		panelType,
-		setSpec,
-	});
-
-	return {
-		draft,
-		spec,
-		setSpec,
-		isSpecDirty,
-		reset,
-		panelType,
-		panelDefinition,
-		defaultSignal,
-		query,
-		runQuery,
-		isQueryDirty,
-		buildSaveSpec,
-		onChangePanelKind,
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelTypeSwitch.ts

@@ -11,10 +11,7 @@ import {
 	type PartialPanelTypes,
 } from 'container/NewWidget/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import type {
-	OrderByPayload,
-	Query,
-} from 'types/api/queryBuilder/queryBuilderData';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { resolveQueryType } from '../../Panels/capabilities';
 import {
@@ -28,25 +25,6 @@ import {
 	type SwitchedPluginSpec,
 } from '../getSwitchedPluginSpec';
 
-// V1's handleQueryChange clears orderBy for lists; re-seed the fresh-list default (timestamp desc).
-const DEFAULT_LIST_ORDER_BY: OrderByPayload[] = [
-	{ columnName: 'timestamp', order: 'desc' },
-];
-
-function withDefaultListOrder(query: Query): Query {
-	return {
-		...query,
-		builder: {
-			...query.builder,
-			queryData: query.builder.queryData.map((qd) =>
-				qd.orderBy && qd.orderBy.length > 0
-					? qd
-					: { ...qd, orderBy: DEFAULT_LIST_ORDER_BY },
-			),
-		},
-	};
-}
-
 /** What a kind looks like when you leave it; restored verbatim if you return. */
 interface KindState {
 	pluginSpec: DashboardtypesPanelPluginDTO['spec'];
@@ -138,21 +116,16 @@ export function usePanelTypeSwitch({
 				{ ...query, queryType },
 				panelTypeRef.current,
 			);
-			// Match a fresh list panel's default order so the builder's Order By isn't empty.
-			const nextQuery =
-				newPanelType === PANEL_TYPES.LIST
-					? withDefaultListOrder(transformed)
-					: transformed;
 			const signal = getBuilderQueries(currentSpec.queries)[0]
 				?.signal as TelemetrytypesSignalDTO;
 
 			setSpec(
 				buildSpec(
 					getSwitchedPluginSpec(currentSpec, newKind, signal),
-					toPerses(nextQuery, newPanelType),
+					toPerses(transformed, newPanelType),
 				),
 			);
-			redirectWithQueryBuilderData(nextQuery);
+			redirectWithQueryBuilderData(transformed);
 		},
 		[setSpec, redirectWithQueryBuilderData],
 	);

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

@@ -12,7 +12,13 @@ import {
 	type DashboardtypesPanelSpecDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
 
 import { getExecStats } from '../queryV5/v5ResponseData';
@@ -23,9 +29,12 @@ import layoutStorage from './layoutStorage';
 import PanelEditorQueryBuilder from './PanelEditorQueryBuilder/PanelEditorQueryBuilder';
 import PreviewPane from './PreviewPane/PreviewPane';
 import { useLegendSeries } from './hooks/useLegendSeries';
+import { usePanelQuery } from '../hooks/usePanelQuery';
+import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
+import { usePanelEditorQuerySync } from './hooks/usePanelEditorQuerySync';
 import { useMetricYAxisUnit } from './hooks/useMetricYAxisUnit';
-import { usePanelEditSession } from './hooks/usePanelEditSession';
 import { usePanelEditorSave } from './hooks/usePanelEditorSave';
+import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
 import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
 import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
 import { useTableColumns } from './hooks/useTableColumns';
@@ -61,36 +70,7 @@ function PanelEditorContainer({
 	onClose,
 	onSaved,
 }: PanelEditorContainerProps): JSX.Element {
-	// Shared editing pipeline (draft + query + staged-query sync + kind switch). A new
-	// panel always serializes its seed query and seeds the builder's default signal.
-	const {
-		draft,
-		spec,
-		setSpec,
-		isSpecDirty,
-		panelDefinition,
-		defaultSignal,
-		query,
-		runQuery,
-		isQueryDirty,
-		buildSaveSpec,
-		onChangePanelKind,
-	} = usePanelEditSession({
-		panel,
-		panelId,
-		alwaysSerializeQuery: isNew,
-		seedQuerySignal: true,
-	});
-	const {
-		data,
-		isFetching,
-		isPreviousData,
-		error,
-		cancelQuery,
-		refetch,
-		pagination,
-	} = query;
-
+	const { draft, spec, setSpec, isSpecDirty } = usePanelEditorDraft(panel);
 	// Live query type (the selected tab) — the type switcher disables kinds that can't be
 	// authored in it. Read from the provider, not the spec: a new panel's spec carries no
 	// query until staged, so the spec would lag the tab.
@@ -114,7 +94,37 @@ function PanelEditorContainer({
 		storage: layoutStorage,
 	});
 
-	const panelKind = draft.spec.plugin.kind;
+	// Panel kind → V1 panel type, which drives the query builder and preview.
+	const fullKind = draft.spec.plugin.kind;
+	const panelType =
+		(fullKind && PANEL_KIND_TO_PANEL_TYPE[fullKind as PanelKind]) ??
+		PANEL_TYPES.TIME_SERIES;
+
+	// One shared query result for the whole editor; the preview renders it.
+	const panelDefinition = getPanelDefinition(draft.spec.plugin.kind);
+	const { data, isFetching, error, cancelQuery, refetch, pagination } =
+		usePanelQuery({
+			panel: draft,
+			panelId,
+			enabled: !!panelDefinition,
+		});
+
+	// A new panel's default signal (its kind's first supported) — seeds the query and columns.
+	const defaultSignal = panelDefinition.supportedSignals[0];
+
+	const { runQuery, isQueryDirty, buildSaveSpec } = usePanelEditorQuerySync({
+		draft,
+		panelType,
+		setSpec,
+		refetch,
+		// New panel's seed query is the builder default, not a real saved query —
+		// always serialize it on save.
+		alwaysSerializeQuery: isNew,
+		signal: defaultSignal,
+	});
+
+	// Switch the panel's visualization kind in place (reversible per session).
+	const { onChangePanelKind } = usePanelTypeSwitch({ spec, panelType, setSpec });
 
 	// At editor level, not the collapsible FormattingSection, so seeding runs while closed.
 	const formattingUnit = (
@@ -146,7 +156,7 @@ function PanelEditorContainer({
 	// Spec and query dirtiness are tracked independently so query re-serialization
 	// never false-dirties. A new panel is always savable (you're creating it).
 	const isDirty = isNew || isSpecDirty || isQueryDirty;
-	const isListPanel = panelKind === 'signoz/ListPanel';
+	const isListPanel = fullKind === 'signoz/ListPanel';
 	// The builder-query `signal` literal matches the TelemetrytypesSignalDTO enum
 	// values; cast at this boundary (as ConfigPane does) so the columns editor's
 	// field-key lookup is typed.
@@ -225,7 +235,6 @@ function PanelEditorContainer({
 										panelDefinition={panelDefinition}
 										data={data}
 										isFetching={isFetching}
-										isPreviousData={isPreviousData}
 										error={error}
 										refetch={refetch}
 										onDragSelect={onDragSelect}
@@ -236,7 +245,7 @@ function PanelEditorContainer({
 							<ResizableHandle withHandle className={styles.handle} />
 							<ResizablePanel minSize="35%" maxSize="45%" defaultSize="40%">
 								<PanelEditorQueryBuilder
-									panelKind={panelKind}
+									panelKind={fullKind}
 									signal={listSignal}
 									isLoadingQueries={isFetching}
 									onStageRunQuery={runQuery}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/panelEditorHandoff.ts

@@ -1,10 +0,0 @@
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-
-/**
- * Router location state for opening the panel editor pre-loaded with edits instead of
- * the saved panel. The View modal sets this so "Switch to Edit Mode" carries its
- * drilldown-edited spec (queries/plugin) into the editor.
- */
-export interface PanelEditorHandoffState {
-	editSpec?: DashboardtypesPanelSpecDTO;
-}