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

* chore(sql): enable txlock immediate by default

* chore(sql): remove the redundant flag from integration tests

conf/example.yaml

@@ -129,7 +129,7 @@ sqlstore:
     # The timeout for the sqlite database to wait for a lock.
     busy_timeout: 10s
     # The default transaction locking behavior. Supported values: deferred, immediate, exclusive.
-    transaction_mode: deferred
+    transaction_mode: immediate
 
 ##################### APIServer #####################
 apiserver:

docs/api/openapi.yml

@@ -543,6 +543,31 @@ components:
       required:
       - id
       type: object
+    AuthtypesGettableRole:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        description:
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+        orgId:
+          type: string
+        type:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      - name
+      - description
+      - type
+      - orgId
+      type: object
     AuthtypesGettableToken:
       properties:
         accessToken:
@@ -694,43 +719,6 @@ components:
       - detach
       type: string
     AuthtypesRole:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        description:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        orgId:
-          type: string
-        type:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - name
-      - description
-      - type
-      - orgId
-      type: object
-    AuthtypesRoleMapping:
-      properties:
-        defaultRole:
-          type: string
-        groupMappings:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        useRoleAttribute:
-          type: boolean
-      type: object
-    AuthtypesRoleWithTransactionGroups:
       properties:
         createdAt:
           format: date-time
@@ -758,6 +746,18 @@ components:
       - orgId
       - transactionGroups
       type: object
+    AuthtypesRoleMapping:
+      properties:
+        defaultRole:
+          type: string
+        groupMappings:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        useRoleAttribute:
+          type: boolean
+      type: object
     AuthtypesSamlConfig:
       properties:
         attributeMapping:
@@ -4189,6 +4189,7 @@ components:
       - namespaces
       - clusters
       - volumes
+      - kube_containers
       type: string
     InframonitoringtypesChecks:
       properties:
@@ -4294,6 +4295,158 @@ components:
       - total
       - endTimeBeforeRetention
       type: object
+    InframonitoringtypesContainerCountsByReady:
+      properties:
+        notReady:
+          type: integer
+        ready:
+          type: integer
+      required:
+      - ready
+      - notReady
+      type: object
+    InframonitoringtypesContainerCountsByStatus:
+      properties:
+        completed:
+          type: integer
+        containerCannotRun:
+          type: integer
+        containerCreating:
+          type: integer
+        crashLoopBackOff:
+          type: integer
+        createContainerConfigError:
+          type: integer
+        errImagePull:
+          type: integer
+        error:
+          type: integer
+        imagePullBackOff:
+          type: integer
+        oomKilled:
+          type: integer
+        running:
+          type: integer
+        terminated:
+          type: integer
+        unknown:
+          type: integer
+        waiting:
+          type: integer
+      required:
+      - running
+      - waiting
+      - terminated
+      - crashLoopBackOff
+      - imagePullBackOff
+      - errImagePull
+      - createContainerConfigError
+      - containerCreating
+      - oomKilled
+      - completed
+      - error
+      - containerCannotRun
+      - unknown
+      type: object
+    InframonitoringtypesContainerReady:
+      enum:
+      - ready
+      - not_ready
+      - no_data
+      type: string
+    InframonitoringtypesContainerRecord:
+      properties:
+        containerCountsByReady:
+          $ref: '#/components/schemas/InframonitoringtypesContainerCountsByReady'
+        containerCountsByStatus:
+          $ref: '#/components/schemas/InframonitoringtypesContainerCountsByStatus'
+        containerName:
+          type: string
+        cpu:
+          format: double
+          type: number
+        cpuLimitUtilization:
+          format: double
+          type: number
+        cpuRequestUtilization:
+          format: double
+          type: number
+        memory:
+          format: double
+          type: number
+        memoryLimitUtilization:
+          format: double
+          type: number
+        memoryRequestUtilization:
+          format: double
+          type: number
+        meta:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        podUID:
+          type: string
+        ready:
+          $ref: '#/components/schemas/InframonitoringtypesContainerReady'
+        restarts:
+          format: int64
+          type: integer
+        status:
+          $ref: '#/components/schemas/InframonitoringtypesContainerStatus'
+      required:
+      - podUID
+      - containerName
+      - status
+      - containerCountsByStatus
+      - ready
+      - containerCountsByReady
+      - restarts
+      - cpu
+      - cpuRequestUtilization
+      - cpuLimitUtilization
+      - memory
+      - memoryRequestUtilization
+      - memoryLimitUtilization
+      - meta
+      type: object
+    InframonitoringtypesContainerStatus:
+      enum:
+      - running
+      - waiting
+      - terminated
+      - crashloopbackoff
+      - imagepullbackoff
+      - errimagepull
+      - createcontainerconfigerror
+      - containercreating
+      - oomkilled
+      - completed
+      - error
+      - containercannotrun
+      - unknown
+      - no_data
+      type: string
+    InframonitoringtypesContainers:
+      properties:
+        endTimeBeforeRetention:
+          type: boolean
+        records:
+          items:
+            $ref: '#/components/schemas/InframonitoringtypesContainerRecord'
+          type: array
+        total:
+          type: integer
+        type:
+          $ref: '#/components/schemas/InframonitoringtypesResponseType'
+        warning:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryWarnData'
+      required:
+      - type
+      - records
+      - total
+      - endTimeBeforeRetention
+      type: object
     InframonitoringtypesDaemonSetRecord:
       properties:
         currentNodes:
@@ -4968,6 +5121,32 @@ components:
       - end
       - limit
       type: object
+    InframonitoringtypesPostableContainers:
+      properties:
+        end:
+          format: int64
+          type: integer
+        filter:
+          $ref: '#/components/schemas/Querybuildertypesv5Filter'
+        groupBy:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
+          nullable: true
+          type: array
+        limit:
+          type: integer
+        offset:
+          type: integer
+        orderBy:
+          $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
+        start:
+          format: int64
+          type: integer
+      required:
+      - start
+      - end
+      - limit
+      type: object
     InframonitoringtypesPostableDaemonSets:
       properties:
         end:
@@ -11828,7 +12007,7 @@ paths:
                 properties:
                   data:
                     items:
-                      $ref: '#/components/schemas/AuthtypesRole'
+                      $ref: '#/components/schemas/AuthtypesGettableRole'
                     type: array
                   status:
                     type: string
@@ -12012,7 +12191,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/AuthtypesRoleWithTransactionGroups'
+                    $ref: '#/components/schemas/AuthtypesRole'
                   status:
                     type: string
                 required:
@@ -16099,6 +16278,86 @@ paths:
       summary: List Jobs for Infra Monitoring
       tags:
       - inframonitoring
+  /api/v2/infra_monitoring/kube_containers:
+    post:
+      deprecated: false
+      description: 'Returns a paginated list of Kubernetes containers with key kubeletstats
+        metrics: CPU usage (cores), CPU request/limit utilization, memory working
+        set, and memory request/limit utilization. Each container also reports health
+        signals from the k8s_cluster receiver: status (kubectl-style display status
+        derived from k8s.container.status.state + k8s.container.status.reason), restarts
+        (absolute count from k8s.container.restarts), and ready (ready/not_ready from
+        k8s.container.ready). The row identity is (k8s.pod.uid, k8s.container.name),
+        stable across container restarts. Each container includes metadata attributes
+        (k8s.container.name, k8s.pod.name, container.image.name, container.image.tag,
+        k8s.namespace.name, k8s.node.name, k8s.cluster.name, and workload owner such
+        as deployment/statefulset/daemonset/job). The response type is ''list'' for
+        the default (k8s.pod.uid, k8s.container.name) grouping (each row is one container
+        with its current status and ready state) or ''grouped_list'' for custom groupBy
+        keys (each row aggregates containers in the group with per-status counts under
+        containerCountsByStatus, per-readiness counts under containerCountsByReady,
+        and restarts as the group sum). Status requires the optional k8s.container.status.state
+        and k8s.container.status.reason metrics; when either is missing, status is
+        omitted and a warning is returned while restarts and ready are still computed.
+        Supports filtering via a filter expression, custom groupBy, ordering by any
+        of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit),
+        and pagination via offset/limit. Also reports whether the requested time range
+        falls before the data retention boundary. Numeric metric fields (cpu, cpuRequestUtilization,
+        cpuLimitUtilization, memory, memoryRequestUtilization, memoryLimitUtilization)
+        and restarts return -1 as a sentinel when no data is available for that field.'
+      operationId: ListContainers
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/InframonitoringtypesPostableContainers'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/InframonitoringtypesContainers'
+                  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 Kubernetes Containers for Infra Monitoring
+      tags:
+      - inframonitoring
   /api/v2/infra_monitoring/namespaces:
     post:
       deprecated: false
@@ -17909,6 +18168,16 @@ paths:
         public dashboard. The panel is addressed by its key in spec.panels.
       operationId: GetPublicDashboardPanelQueryRangeV2
       parameters:
+      - in: query
+        name: startTime
+        required: false
+        schema:
+          type: string
+      - in: query
+        name: endTime
+        required: false
+        schema:
+          type: string
       - in: path
         name: id
         required: true

ee/authz/openfgaauthz/provider.go

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

ee/authz/openfgaserver/server.go

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

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

@@ -41,6 +41,7 @@ import type {
 	GetPublicDashboardDataV2200,
 	GetPublicDashboardDataV2PathParameters,
 	GetPublicDashboardPanelQueryRangeV2200,
+	GetPublicDashboardPanelQueryRangeV2Params,
 	GetPublicDashboardPanelQueryRangeV2PathParameters,
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
@@ -1912,20 +1913,25 @@ export const invalidateGetPublicDashboardDataV2 = async (
  */
 export const getPublicDashboardPanelQueryRangeV2 = (
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetPublicDashboardPanelQueryRangeV2200>({
 		url: `/api/v2/public/dashboards/${id}/panels/${key}/query_range`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getGetPublicDashboardPanelQueryRangeV2QueryKey = ({
-	id,
-	key,
-}: GetPublicDashboardPanelQueryRangeV2PathParameters) => {
-	return [`/api/v2/public/dashboards/${id}/panels/${key}/query_range`] as const;
+export const getGetPublicDashboardPanelQueryRangeV2QueryKey = (
+	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	params?: GetPublicDashboardPanelQueryRangeV2Params,
+) => {
+	return [
+		`/api/v2/public/dashboards/${id}/panels/${key}/query_range`,
+		...(params ? [params] : []),
+	] as const;
 };
 
 export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
@@ -1933,6 +1939,7 @@ export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
@@ -1945,11 +1952,12 @@ export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
 
 	const queryKey =
 		queryOptions?.queryKey ??
-		getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key });
+		getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key }, params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>
-	> = ({ signal }) => getPublicDashboardPanelQueryRangeV2({ id, key }, signal);
+	> = ({ signal }) =>
+		getPublicDashboardPanelQueryRangeV2({ id, key }, params, signal);
 
 	return {
 		queryKey,
@@ -1978,6 +1986,7 @@ export function useGetPublicDashboardPanelQueryRangeV2<
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
@@ -1988,6 +1997,7 @@ export function useGetPublicDashboardPanelQueryRangeV2<
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
 	const queryOptions = getGetPublicDashboardPanelQueryRangeV2QueryOptions(
 		{ id, key },
+		params,
 		options,
 	);
 
@@ -2004,10 +2014,16 @@ export function useGetPublicDashboardPanelQueryRangeV2<
 export const invalidateGetPublicDashboardPanelQueryRangeV2 = async (
 	queryClient: QueryClient,
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key }) },
+		{
+			queryKey: getGetPublicDashboardPanelQueryRangeV2QueryKey(
+				{ id, key },
+				params,
+			),
+		},
 		options,
 	);
 

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

@@ -21,6 +21,7 @@ import type {
 	GetChecks200,
 	GetChecksParams,
 	InframonitoringtypesPostableClustersDTO,
+	InframonitoringtypesPostableContainersDTO,
 	InframonitoringtypesPostableDaemonSetsDTO,
 	InframonitoringtypesPostableDeploymentsDTO,
 	InframonitoringtypesPostableHostsDTO,
@@ -31,6 +32,7 @@ import type {
 	InframonitoringtypesPostableStatefulSetsDTO,
 	InframonitoringtypesPostableVolumesDTO,
 	ListClusters200,
+	ListContainers200,
 	ListDaemonSets200,
 	ListDeployments200,
 	ListHosts200,
@@ -548,6 +550,89 @@ export const useListJobs = <
 > => {
 	return useMutation(getListJobsMutationOptions(options));
 };
+/**
+ * Returns a paginated list of Kubernetes containers with key kubeletstats metrics: CPU usage (cores), CPU request/limit utilization, memory working set, and memory request/limit utilization. Each container also reports health signals from the k8s_cluster receiver: status (kubectl-style display status derived from k8s.container.status.state + k8s.container.status.reason), restarts (absolute count from k8s.container.restarts), and ready (ready/not_ready from k8s.container.ready). The row identity is (k8s.pod.uid, k8s.container.name), stable across container restarts. Each container includes metadata attributes (k8s.container.name, k8s.pod.name, container.image.name, container.image.tag, k8s.namespace.name, k8s.node.name, k8s.cluster.name, and workload owner such as deployment/statefulset/daemonset/job). The response type is 'list' for the default (k8s.pod.uid, k8s.container.name) grouping (each row is one container with its current status and ready state) or 'grouped_list' for custom groupBy keys (each row aggregates containers in the group with per-status counts under containerCountsByStatus, per-readiness counts under containerCountsByReady, and restarts as the group sum). Status requires the optional k8s.container.status.state and k8s.container.status.reason metrics; when either is missing, status is omitted and a warning is returned while restarts and ready are still computed. Supports filtering via a filter expression, custom groupBy, ordering by any of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (cpu, cpuRequestUtilization, cpuLimitUtilization, memory, memoryRequestUtilization, memoryLimitUtilization) and restarts return -1 as a sentinel when no data is available for that field.
+ * @summary List Kubernetes Containers for Infra Monitoring
+ */
+export const listContainers = (
+	inframonitoringtypesPostableContainersDTO?: BodyType<InframonitoringtypesPostableContainersDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListContainers200>({
+		url: `/api/v2/infra_monitoring/kube_containers`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: inframonitoringtypesPostableContainersDTO,
+		signal,
+	});
+};
+
+export const getListContainersMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof listContainers>>,
+		TError,
+		{ data?: BodyType<InframonitoringtypesPostableContainersDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof listContainers>>,
+	TError,
+	{ data?: BodyType<InframonitoringtypesPostableContainersDTO> },
+	TContext
+> => {
+	const mutationKey = ['listContainers'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof listContainers>>,
+		{ data?: BodyType<InframonitoringtypesPostableContainersDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return listContainers(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ListContainersMutationResult = NonNullable<
+	Awaited<ReturnType<typeof listContainers>>
+>;
+export type ListContainersMutationBody =
+	| BodyType<InframonitoringtypesPostableContainersDTO>
+	| undefined;
+export type ListContainersMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List Kubernetes Containers for Infra Monitoring
+ */
+export const useListContainers = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof listContainers>>,
+		TError,
+		{ data?: BodyType<InframonitoringtypesPostableContainersDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof listContainers>>,
+	TError,
+	{ data?: BodyType<InframonitoringtypesPostableContainersDTO> },
+	TContext
+> => {
+	return useMutation(getListContainersMutationOptions(options));
+};
 /**
  * Returns a paginated list of Kubernetes namespaces with key aggregated pod metrics: CPU usage and memory working set (summed across pods in the group), plus per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value in the window). Each namespace includes metadata attributes (k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.namespace.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / memory, and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (namespaceCPU, namespaceMemory) return -1 as a sentinel when no data is available for that field.
  * @summary List Namespaces for Infra Monitoring

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

@@ -2082,6 +2082,39 @@ export interface AuthtypesGettableAuthDomainDTO {
 	updatedAt?: string;
 }
 
+export interface AuthtypesGettableRoleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	description: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	/**
+	 * @type string
+	 */
+	type: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
 export interface AuthtypesGettableTokenDTO {
 	/**
 	 * @type string
@@ -2325,39 +2358,6 @@ export interface AuthtypesPostableUserRoleDTO {
 }
 
 export interface AuthtypesRoleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	description: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 */
-	type: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-}
-
-export interface AuthtypesRoleWithTransactionGroupsDTO {
 	/**
 	 * @type string
 	 * @format date-time
@@ -5577,6 +5577,7 @@ export enum InframonitoringtypesCheckTypeDTO {
 	namespaces = 'namespaces',
 	clusters = 'clusters',
 	volumes = 'volumes',
+	kube_containers = 'kube_containers',
 }
 export interface InframonitoringtypesMissingMetricsComponentEntryDTO {
 	associatedComponent: InframonitoringtypesAssociatedComponentDTO;
@@ -5856,6 +5857,174 @@ export interface InframonitoringtypesClustersDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
+export interface InframonitoringtypesContainerCountsByReadyDTO {
+	/**
+	 * @type integer
+	 */
+	notReady: number;
+	/**
+	 * @type integer
+	 */
+	ready: number;
+}
+
+export interface InframonitoringtypesContainerCountsByStatusDTO {
+	/**
+	 * @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
+	 */
+	imagePullBackOff: number;
+	/**
+	 * @type integer
+	 */
+	oomKilled: number;
+	/**
+	 * @type integer
+	 */
+	running: number;
+	/**
+	 * @type integer
+	 */
+	terminated: number;
+	/**
+	 * @type integer
+	 */
+	unknown: number;
+	/**
+	 * @type integer
+	 */
+	waiting: number;
+}
+
+export enum InframonitoringtypesContainerReadyDTO {
+	ready = 'ready',
+	not_ready = 'not_ready',
+	no_data = 'no_data',
+}
+export type InframonitoringtypesContainerRecordDTOMetaAnyOf = {
+	[key: string]: string;
+};
+
+/**
+ * @nullable
+ */
+export type InframonitoringtypesContainerRecordDTOMeta =
+	InframonitoringtypesContainerRecordDTOMetaAnyOf | null;
+
+export enum InframonitoringtypesContainerStatusDTO {
+	running = 'running',
+	waiting = 'waiting',
+	terminated = 'terminated',
+	crashloopbackoff = 'crashloopbackoff',
+	imagepullbackoff = 'imagepullbackoff',
+	errimagepull = 'errimagepull',
+	createcontainerconfigerror = 'createcontainerconfigerror',
+	containercreating = 'containercreating',
+	oomkilled = 'oomkilled',
+	completed = 'completed',
+	error = 'error',
+	containercannotrun = 'containercannotrun',
+	unknown = 'unknown',
+	no_data = 'no_data',
+}
+export interface InframonitoringtypesContainerRecordDTO {
+	containerCountsByReady: InframonitoringtypesContainerCountsByReadyDTO;
+	containerCountsByStatus: InframonitoringtypesContainerCountsByStatusDTO;
+	/**
+	 * @type string
+	 */
+	containerName: string;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	cpu: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	cpuLimitUtilization: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	cpuRequestUtilization: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	memory: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	memoryLimitUtilization: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	memoryRequestUtilization: number;
+	/**
+	 * @type object,null
+	 */
+	meta: InframonitoringtypesContainerRecordDTOMeta;
+	/**
+	 * @type string
+	 */
+	podUID: string;
+	ready: InframonitoringtypesContainerReadyDTO;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	restarts: number;
+	status: InframonitoringtypesContainerStatusDTO;
+}
+
+export interface InframonitoringtypesContainersDTO {
+	/**
+	 * @type boolean
+	 */
+	endTimeBeforeRetention: boolean;
+	/**
+	 * @type array
+	 */
+	records: InframonitoringtypesContainerRecordDTO[];
+	/**
+	 * @type integer
+	 */
+	total: number;
+	type: InframonitoringtypesResponseTypeDTO;
+	warning?: Querybuildertypesv5QueryWarnDataDTO;
+}
+
 export type InframonitoringtypesDaemonSetRecordDTOMetaAnyOf = {
 	[key: string]: string;
 };
@@ -6438,6 +6607,33 @@ export interface InframonitoringtypesPostableClustersDTO {
 	start: number;
 }
 
+export interface InframonitoringtypesPostableContainersDTO {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	end: number;
+	filter?: Querybuildertypesv5FilterDTO;
+	/**
+	 * @type array,null
+	 */
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
+	/**
+	 * @type integer
+	 */
+	limit: number;
+	/**
+	 * @type integer
+	 */
+	offset?: number;
+	orderBy?: Querybuildertypesv5OrderByDTO;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	start: number;
+}
+
 export interface InframonitoringtypesPostableDaemonSetsDTO {
 	/**
 	 * @type integer
@@ -10399,7 +10595,7 @@ export type ListRoles200 = {
 	/**
 	 * @type array
 	 */
-	data: AuthtypesRoleDTO[];
+	data: AuthtypesGettableRoleDTO[];
 	/**
 	 * @type string
 	 */
@@ -10421,7 +10617,7 @@ export type GetRolePathParameters = {
 	id: string;
 };
 export type GetRole200 = {
-	data: AuthtypesRoleWithTransactionGroupsDTO;
+	data: AuthtypesRoleDTO;
 	/**
 	 * @type string
 	 */
@@ -11041,6 +11237,14 @@ export type ListJobs200 = {
 	status: string;
 };
 
+export type ListContainers200 = {
+	data: InframonitoringtypesContainersDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListNamespaces200 = {
 	data: InframonitoringtypesNamespacesDTO;
 	/**
@@ -11366,6 +11570,19 @@ export type GetPublicDashboardPanelQueryRangeV2PathParameters = {
 	id: string;
 	key: string;
 };
+export type GetPublicDashboardPanelQueryRangeV2Params = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	startTime?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	endTime?: string;
+};
+
 export type GetPublicDashboardPanelQueryRangeV2200 = {
 	data: Querybuildertypesv5QueryRangeResponseDTO;
 	/**

frontend/src/components/RolesSelect/RolesSelect.tsx

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

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

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

frontend/src/components/TagKeyValueInput/TagKeyValueInput.tsx

@@ -65,7 +65,9 @@ function TagKeyValueInput({
 	};
 
 	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
-		if (e.key === 'Enter') {
+		// Plain Enter adds the tag; let Cmd/Ctrl+Enter pass through so a host form
+		// (e.g. a modal) can submit on it.
+		if (e.key === 'Enter' && !e.metaKey && !e.ctrlKey) {
 			e.preventDefault();
 			commit();
 		}
@@ -93,11 +95,17 @@ function TagKeyValueInput({
 	};
 
 	const handleEditKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
-		if (e.key === 'Enter') {
+		// Plain Enter commits the edit; let Cmd/Ctrl+Enter pass through so a host
+		// form (e.g. a modal) can submit on it.
+		if (e.key === 'Enter' && !e.metaKey && !e.ctrlKey) {
 			e.preventDefault();
+			e.stopPropagation();
 			commitEdit();
 		} else if (e.key === 'Escape') {
+			// Contain Escape so it cancels the inline edit instead of bubbling up and
+			// closing the host drawer/modal.
 			e.preventDefault();
+			e.stopPropagation();
 			cancelEdit();
 		}
 	};

frontend/src/constants/reactQueryKeys.ts

@@ -7,6 +7,7 @@ export const REACT_QUERY_KEY = {
 	AUTO_REFRESH_QUERY: 'AUTO_REFRESH_QUERY',
 
 	GET_PUBLIC_DASHBOARD: 'GET_PUBLIC_DASHBOARD',
+	GET_PUBLIC_DASHBOARD_RESOLVED: 'GET_PUBLIC_DASHBOARD_RESOLVED',
 	GET_PUBLIC_DASHBOARD_META: 'GET_PUBLIC_DASHBOARD_META',
 	GET_PUBLIC_DASHBOARD_WIDGET_DATA: 'GET_PUBLIC_DASHBOARD_WIDGET_DATA',
 	GET_ALL_LICENCES: 'GET_ALL_LICENCES',

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/CustomCheckBox.module.scss

@@ -0,0 +1,4 @@
+.wrapper :global(button[data-color]) {
+	--checkbox-checked-background: var(--series-color);
+	--checkbox-border-color: var(--series-color);
+}

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/CustomCheckBox.tsx

@@ -3,6 +3,7 @@ import { Checkbox } from '@signozhq/ui/checkbox';
 import { CSSProperties } from 'react';
 
 import { CheckBoxProps } from '../types';
+import styles from './CustomCheckBox.module.scss';
 
 function CustomCheckBox({
 	data,
@@ -15,12 +16,11 @@ function CustomCheckBox({
 	const isChecked = graphVisibilityState[index] || false;
 
 	const colorStyle = {
-		'--checkbox-checked-background': color,
-		'--checkbox-border-color': color,
+		'--series-color': color,
 	} as CSSProperties;
 
 	return (
-		<span style={colorStyle}>
+		<span className={styles.wrapper} style={colorStyle}>
 			<Checkbox
 				onChange={(checked): void => checkBoxOnChangeHandler(checked, index)}
 				value={isChecked}

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -1,15 +1,20 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Skeleton } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import logEvent from 'api/common/logEvent';
+import { useListDashboardsForUserV2 } from 'api/generated/services/dashboard';
+import {
+	DashboardtypesListOrderDTO,
+	DashboardtypesListSortDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
+import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { ArrowRight, ArrowUpRight, Plus } from '@signozhq/icons';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
-import { Dashboard } from 'types/api/dashboard/getAll';
 import { USER_ROLES } from 'types/roles';
 import { openInNewTab } from 'utils/navigation';
 
@@ -17,6 +22,13 @@ import dialsUrl from '@/assets/Icons/dials.svg';
 
 import { getItemIcon } from '../constants';
 
+// The five most-recent dashboards, normalised across the v1 and v2 list APIs.
+interface RecentDashboard {
+	id: string;
+	title: string;
+	tags: string[];
+}
+
 export default function Dashboards({
 	onUpdateChecklistDoneItem,
 	loadingUserPreferences,
@@ -26,33 +38,58 @@ export default function Dashboards({
 }): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const { user } = useAppContext();
+	const isDashboardV2 = useIsDashboardV2();
 
-	const [sortedDashboards, setSortedDashboards] = useState<Dashboard[]>([]);
-
-	// Fetch Dashboards
+	// Fetch the recent dashboards from whichever API the `use_dashboard_v2` flag
+	// selects; the inactive one stays disabled so it never fires.
 	const {
-		data: dashboardsList,
-		isLoading: isDashboardListLoading,
-		isError: isDashboardListError,
-	} = useGetAllDashboard();
+		data: v1List,
+		isLoading: v1Loading,
+		isError: v1Error,
+	} = useGetAllDashboard({ enabled: !isDashboardV2 });
+
+	const {
+		data: v2List,
+		isLoading: v2Loading,
+		isError: v2Error,
+	} = useListDashboardsForUserV2(
+		{
+			sort: DashboardtypesListSortDTO.updated_at,
+			order: DashboardtypesListOrderDTO.desc,
+			limit: 5,
+			offset: 0,
+		},
+		{ query: { enabled: isDashboardV2 } },
+	);
+
+	const isDashboardListLoading = isDashboardV2 ? v2Loading : v1Loading;
+	const isDashboardListError = isDashboardV2 ? v2Error : v1Error;
+
+	const sortedDashboards = useMemo<RecentDashboard[]>(() => {
+		if (isDashboardV2) {
+			return (v2List?.data?.dashboards ?? []).map((d) => ({
+				id: d.id,
+				title: d.spec?.display?.name ?? d.name,
+				tags: (d.tags ?? []).map((t) => (t.value ? `${t.key}:${t.value}` : t.key)),
+			}));
+		}
+		return [...(v1List?.data ?? [])]
+			.sort(
+				(a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
+			)
+			.slice(0, 5)
+			.map((d) => ({
+				id: d.id,
+				title: d.data.title,
+				tags: d.data.tags ?? [],
+			}));
+	}, [isDashboardV2, v1List, v2List]);
 
 	useEffect(() => {
-		if (!dashboardsList) {
-			return;
-		}
-
-		const sortedDashboards = dashboardsList.data.sort((a, b) => {
-			const aUpdateAt = new Date(a.updatedAt).getTime();
-			const bUpdateAt = new Date(b.updatedAt).getTime();
-			return bUpdateAt - aUpdateAt;
-		});
-
 		if (sortedDashboards.length > 0 && !loadingUserPreferences) {
 			onUpdateChecklistDoneItem('SETUP_DASHBOARDS');
 		}
-
-		setSortedDashboards(sortedDashboards.slice(0, 5));
-	}, [dashboardsList, onUpdateChecklistDoneItem, loadingUserPreferences]);
+	}, [sortedDashboards, onUpdateChecklistDoneItem, loadingUserPreferences]);
 
 	const emptyStateCard = (): JSX.Element => (
 		<div className="empty-state-container">
@@ -113,7 +150,7 @@ export default function Dashboards({
 						event.stopPropagation();
 						logEvent('Homepage: Dashboard clicked', {
 							dashboardId: dashboard.id,
-							dashboardName: dashboard.data.title,
+							dashboardName: dashboard.title,
 						});
 						if (event.metaKey || event.ctrlKey) {
 							openInNewTab(getLink());
@@ -143,12 +180,12 @@ export default function Dashboards({
 								/>
 
 								<div className="alert-rule-item-name home-data-item-name">
-									{dashboard.data.title}
+									{dashboard.title}
 								</div>
 							</div>
 
 							<div className="alert-rule-item-description home-data-item-tag">
-								{dashboard.data.tags?.map((tag) => (
+								{dashboard.tags.map((tag) => (
 									<Badge color="sienna" variant="outline" key={tag}>
 										{tag}
 									</Badge>

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

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

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

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

frontend/src/hooks/dashboard/__test__/useGetResolvedPublicDashboard.test.tsx

@@ -0,0 +1,94 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { getPublicDashboardDataV2 } from 'api/generated/services/dashboard';
+import getPublicDashboardDataAPI from 'api/dashboard/public/getPublicDashboardData';
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+import {
+	PublicDashboardSchema,
+	useGetResolvedPublicDashboard,
+} from '../useGetResolvedPublicDashboard';
+
+jest.mock('api/generated/services/dashboard', () => ({
+	getPublicDashboardDataV2: jest.fn(),
+}));
+jest.mock('api/dashboard/public/getPublicDashboardData', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockV2 = getPublicDashboardDataV2 as jest.Mock;
+const mockV1 = getPublicDashboardDataAPI as jest.Mock;
+
+const wrapper = ({ children }: { children: ReactNode }): JSX.Element => {
+	const client = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+};
+
+// A schema mismatch on the v2 endpoint surfaces as an AxiosError with HTTP 501 and this
+// error code; anything else must NOT trigger the v1 fallback.
+const schemaMismatchError = {
+	isAxiosError: true,
+	response: {
+		status: 501,
+		data: { error: { code: 'dashboard_invalid_data', message: 'not in v6' } },
+	},
+};
+
+describe('useGetResolvedPublicDashboard', () => {
+	beforeEach(() => {
+		mockV2.mockReset();
+		mockV1.mockReset();
+	});
+
+	it('returns the v2 model when the v2 endpoint succeeds and never calls v1', async () => {
+		mockV2.mockResolvedValue({ status: 'success', data: { dashboard: {} } });
+
+		const { result } = renderHook(() => useGetResolvedPublicDashboard('id-1'), {
+			wrapper,
+		});
+
+		await waitFor(() => expect(result.current.isSuccess).toBe(true));
+		expect(result.current.data?.schema).toBe(PublicDashboardSchema.V2);
+		expect(mockV2).toHaveBeenCalledWith({ id: 'id-1' });
+		expect(mockV1).not.toHaveBeenCalled();
+	});
+
+	it('falls back to v1 when the v2 endpoint reports a schema mismatch', async () => {
+		mockV2.mockRejectedValue(schemaMismatchError);
+		mockV1.mockResolvedValue({
+			httpStatusCode: 200,
+			data: { dashboard: { data: { title: 'v1' } } },
+		});
+
+		const { result } = renderHook(() => useGetResolvedPublicDashboard('id-2'), {
+			wrapper,
+		});
+
+		await waitFor(() => expect(result.current.isSuccess).toBe(true));
+		expect(result.current.data?.schema).toBe(PublicDashboardSchema.V1);
+		expect(mockV1).toHaveBeenCalledWith({ id: 'id-2' });
+	});
+
+	it('surfaces a non-schema-mismatch v2 error without falling back to v1', async () => {
+		mockV2.mockRejectedValue({
+			isAxiosError: true,
+			response: { status: 500, data: { error: { code: 'internal' } } },
+		});
+
+		const { result } = renderHook(() => useGetResolvedPublicDashboard('id-3'), {
+			wrapper,
+		});
+
+		await waitFor(() => expect(result.current.isError).toBe(true));
+		expect(mockV1).not.toHaveBeenCalled();
+	});
+
+	it('does not fetch without an id', () => {
+		renderHook(() => useGetResolvedPublicDashboard(''), { wrapper });
+		expect(mockV2).not.toHaveBeenCalled();
+		expect(mockV1).not.toHaveBeenCalled();
+	});
+});

frontend/src/hooks/dashboard/useGetResolvedPublicDashboard.ts

@@ -0,0 +1,57 @@
+import { getPublicDashboardDataV2 } from 'api/generated/services/dashboard';
+import { DashboardtypesGettablePublicDashboardDataV2DTO } from 'api/generated/services/sigNoz.schemas';
+import getPublicDashboardDataAPI from 'api/dashboard/public/getPublicDashboardData';
+import { AxiosError, isAxiosError } from 'axios';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryResult } from 'react-query';
+import { ErrorV2Resp } from 'types/api';
+import { PublicDashboardDataProps } from 'types/api/dashboard/public/get';
+
+export enum PublicDashboardSchema {
+	V1 = 'v1',
+	V2 = 'v2',
+}
+
+export type ResolvedPublicDashboard =
+	| {
+			schema: PublicDashboardSchema.V2;
+			data: DashboardtypesGettablePublicDashboardDataV2DTO;
+	  }
+	| { schema: PublicDashboardSchema.V1; data: PublicDashboardDataProps };
+
+// The v2 endpoint rejects non-v6 rows with this code — our signal that it's a v1 dashboard.
+const V2_SCHEMA_MISMATCH_CODE = 'dashboard_invalid_data';
+
+function isV2SchemaMismatch(error: unknown): boolean {
+	if (!isAxiosError(error)) {
+		return false;
+	}
+	const { response } = error as AxiosError<ErrorV2Resp>;
+	return response?.data?.error?.code === V2_SCHEMA_MISMATCH_CODE;
+}
+
+// Probe v2 first, fall back to v1 only on a schema mismatch. v1-first is unsafe: it 200s for a
+// v2 dashboard with queries un-redacted. Other v2 errors re-throw rather than mis-render as v1.
+async function resolvePublicDashboard(
+	id: string,
+): Promise<ResolvedPublicDashboard> {
+	try {
+		const v2 = await getPublicDashboardDataV2({ id });
+		return { schema: PublicDashboardSchema.V2, data: v2.data };
+	} catch (error) {
+		if (!isV2SchemaMismatch(error)) {
+			throw error;
+		}
+		const v1 = await getPublicDashboardDataAPI({ id });
+		return { schema: PublicDashboardSchema.V1, data: v1.data };
+	}
+}
+
+export const useGetResolvedPublicDashboard = (
+	id: string,
+): UseQueryResult<ResolvedPublicDashboard, Error> =>
+	useQuery<ResolvedPublicDashboard, Error>({
+		queryFn: () => resolvePublicDashboard(id),
+		queryKey: [REACT_QUERY_KEY.GET_PUBLIC_DASHBOARD_RESOLVED, id],
+		enabled: !!id,
+	});

frontend/src/hooks/member/useMemberRoleManager.ts

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

frontend/src/hooks/serviceAccount/useServiceAccountRoleManager.ts

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

frontend/src/hooks/useDimensions.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import debounce from 'lodash-es/debounce';
 
 export type Dimensions = {
@@ -15,6 +15,15 @@ export function useResizeObserver<T extends HTMLElement>(
 		height: ref.current?.clientHeight || 0,
 	});
 
+	// Measure before paint so the first frame has real dimensions, not 0 (the
+	// debounced observer below only catches up after paint → layout jump).
+	useLayoutEffect(() => {
+		const node = ref.current;
+		if (node) {
+			setSize({ width: node.clientWidth, height: node.clientHeight });
+		}
+	}, [ref]);
+
 	useEffect(() => {
 		const handleResize = debounce(
 			(entries: ResizeObserverEntry[]) => {

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

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

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

@@ -1,4 +1,4 @@
-import { KeyboardEvent } from 'react';
+import { type FocusEvent, KeyboardEvent } from 'react';
 import {
 	Check,
 	Globe,
@@ -90,12 +90,20 @@ function DashboardInfo({
 		}
 	};
 
+	// Clicking outside the editor commits, matching the input's Enter behaviour.
+	// Guard against blurs that move focus to the Save/Cancel buttons within it.
+	const onEditorBlur = (event: FocusEvent<HTMLDivElement>): void => {
+		if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+			onCommit();
+		}
+	};
+
 	return (
 		<div className={styles.dashboardInfo}>
 			<img src={image} alt={title} className={styles.dashboardImage} />
 
 			{isEditing ? (
-				<div className={styles.dashboardTitleEditor}>
+				<div className={styles.dashboardTitleEditor} onBlur={onEditorBlur}>
 					<Input
 						autoFocus
 						value={draft}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/DashboardImagePicker/DashboardImagePicker.module.scss

@@ -0,0 +1,32 @@
+.trigger {
+	display: flex;
+	width: 32px;
+	min-width: 32px;
+	height: 32px;
+	padding: 6px;
+	justify-content: center;
+	align-items: center;
+	background: var(--l3-background);
+
+	// icon-only trigger: drop the dropdown chevron, keep just the selected icon
+	svg {
+		display: none;
+	}
+}
+
+.options {
+	min-width: min-content;
+}
+
+.item {
+	width: min-content;
+
+	span {
+		vertical-align: middle;
+	}
+}
+
+.image {
+	height: 16px;
+	width: 16px;
+}

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

@@ -0,0 +1,43 @@
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+} from '@signozhq/ui/select';
+import cx from 'classnames';
+
+import { Base64Icons } from '../utils';
+
+import styles from './DashboardImagePicker.module.scss';
+
+interface Props {
+	// The selected image — one of the base64 icon data-URIs.
+	image: string;
+	onChange: (value: string) => void;
+	// Consumers set the trigger's border-radius (e.g. rounded-left when joined to
+	// a name input); this component owns size / background / icon-only styling.
+	triggerClassName?: string;
+}
+
+// Icon picker shared by the dashboard-details settings and the create-dashboard
+// modal so both choose from the same `Base64Icons` set.
+function DashboardImagePicker({
+	image,
+	onChange,
+	triggerClassName,
+}: Props): JSX.Element {
+	return (
+		<Select value={image} onChange={(value): void => onChange(value as string)}>
+			<SelectTrigger className={cx(styles.trigger, triggerClassName)} />
+			<SelectContent className={styles.options} withPortal={false}>
+				{Base64Icons.map((icon) => (
+					<SelectItem key={icon} value={icon} className={styles.item}>
+						<img src={icon} alt="dashboard-icon" className={styles.image} />
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+}
+
+export default DashboardImagePicker;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/DashboardInfoForm/DashboardInfoForm.module.scss

@@ -25,38 +25,10 @@
 	}
 }
 
+// The image-picker owns its size/background; here we only round the left edge so
+// it joins flush with the name input to its right.
 .dashboardImageInput {
-	display: flex;
-	width: 32px;
-	min-width: 32px;
-	height: 32px;
-	padding: 6px;
-	justify-content: center;
-	align-items: center;
 	border-radius: 2px 0px 0px 2px;
-	background: var(--l3-background);
-
-	// icon-only trigger: drop the dropdown chevron, keep just the selected icon
-	svg {
-		display: none;
-	}
-}
-
-.dashboardImageOptions {
-	min-width: min-content;
-}
-
-.dashboardImageSelectItem {
-	width: min-content;
-
-	span {
-		vertical-align: middle;
-	}
-}
-
-.listItemImage {
-	height: 16px;
-	width: 16px;
 }
 
 .dashboardNameInput {

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

@@ -1,17 +1,11 @@
 import { Dispatch, SetStateAction } from 'react';
 import { Input } from '@signozhq/ui/input';
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-} from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 // eslint-disable-next-line signoz/no-antd-components -- multiline TextArea has no @signozhq/ui equivalent yet
 import { Input as AntdInput } from 'antd';
 import TagKeyValueInput from 'components/TagKeyValueInput/TagKeyValueInput';
 
-import { Base64Icons } from '../utils';
+import DashboardImagePicker from '../DashboardImagePicker/DashboardImagePicker';
 import { DASHBOARD_NAME_MAX_LENGTH } from '../../../constants';
 import settingsStyles from '../../DashboardSettings.module.scss';
 import styles from './DashboardInfoForm.module.scss';
@@ -43,30 +37,11 @@ function DashboardInfoForm({
 				<div className={styles.infoItemContainer}>
 					<Typography className={styles.infoTitle}>Dashboard Name</Typography>
 					<section className={styles.nameIconInput}>
-						<Select
-							value={image}
-							onChange={(value): void => onImageChange(value as string)}
-						>
-							<SelectTrigger className={styles.dashboardImageInput} />
-							<SelectContent
-								className={styles.dashboardImageOptions}
-								withPortal={false}
-							>
-								{Base64Icons.map((icon) => (
-									<SelectItem
-										key={icon}
-										value={icon}
-										className={styles.dashboardImageSelectItem}
-									>
-										<img
-											src={icon}
-											alt="dashboard-icon"
-											className={styles.listItemImage}
-										/>
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
+						<DashboardImagePicker
+							image={image}
+							onChange={onImageChange}
+							triggerClassName={styles.dashboardImageInput}
+						/>
 
 						<Input
 							testId="dashboard-name"

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

@@ -83,7 +83,18 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 			);
 		}
 		if (updatedImage !== image) {
-			ops.push(replace('/image', updatedImage));
+			// `replace` fails when the image doesn't exist yet, so add it when the
+			// dashboard has none (`add` creates or replaces the member). Key off the
+			// raw stored value, not the `Base64Icons[0]`-defaulted local `image`.
+			ops.push(
+				op(
+					dashboard.image
+						? DashboardtypesPatchOpDTO.replace
+						: DashboardtypesPatchOpDTO.add,
+					'/image',
+					updatedImage,
+				),
+			);
 		}
 		if (!isEqual(updatedTags, tagsAsStrings)) {
 			ops.push(replace('/tags', stringsToTags(updatedTags)));
@@ -96,6 +107,7 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 		description,
 		updatedImage,
 		image,
+		dashboard.image,
 		updatedTags,
 		tagsAsStrings,
 	]);

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

@@ -8,7 +8,7 @@ import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Pan
 import { resolveSignal } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
 import type { EQueryType } from 'types/common/dashboard';
 
-import type { LegendSeries } from '../hooks/useLegendSeries';
+import type { LegendSeries } from '../utils/legendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
 import ConfigActions from './ConfigActions/ConfigActions';
 import SectionSlot from './SectionSlot/SectionSlot';

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/LegendColors.tsx

@@ -5,7 +5,7 @@ import { Input } from 'antd';
 import type { DashboardtypesLegendDTOCustomColors } from 'api/generated/services/sigNoz.schemas';
 import { Virtuoso } from 'react-virtuoso';
 
-import type { LegendSeries } from '../../../hooks/useLegendSeries';
+import type { LegendSeries } from '../../../utils/legendSeries';
 import LegendColorRow from './LegendColorRow';
 import {
 	clearSeriesColor,

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

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import type { LegendSeries } from '../../../../hooks/useLegendSeries';
+import type { LegendSeries } from '../../../../utils/legendSeries';
 import LegendColors from '../LegendColors';
 
 const SERIES: LegendSeries[] = [

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/__tests__/legendColors.utils.test.ts

@@ -1,4 +1,4 @@
-import type { LegendSeries } from '../../../../hooks/useLegendSeries';
+import type { LegendSeries } from '../../../../utils/legendSeries';
 import {
 	clearSeriesColor,
 	filterLegendSeries,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/legendColors.utils.ts

@@ -1,6 +1,6 @@
 import type { DashboardtypesLegendDTOCustomColors } from 'api/generated/services/sigNoz.schemas';
 
-import type { LegendSeries } from '../../../hooks/useLegendSeries';
+import type { LegendSeries } from '../../../utils/legendSeries';
 
 /** Case-insensitive substring filter over series labels. Empty query → all series. */
 export function filterLegendSeries(

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sectionContext.ts

@@ -1,7 +1,7 @@
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 
 import type { PanelKind } from '../../Panels/types/panelKind';
-import type { LegendSeries } from '../hooks/useLegendSeries';
+import type { LegendSeries } from '../utils/legendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
 import { EQueryType } from 'types/common/dashboard';
 

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

@@ -49,6 +49,23 @@ describe('ContextLinksSection utils', () => {
 				{ key: 'q', value: '{{x}}' },
 			]);
 		});
+
+		it('treats undecodable percent sequences as literal text instead of throwing', () => {
+			expect(getUrlParams('/logs?search=95%')).toStrictEqual([
+				{ key: 'search', value: '95%' },
+			]);
+			expect(getUrlParams('/logs?95%=value')).toStrictEqual([
+				{ key: '95%', value: 'value' },
+			]);
+		});
+
+		it('decodes a valid escape once even when the result has a stray percent', () => {
+			// %2525 double-decodes to '%'; 95%25 decodes once to '95%' and stops there
+			expect(getUrlParams('/logs?a=95%25&b=%2525')).toStrictEqual([
+				{ key: 'a', value: '95%' },
+				{ key: 'b', value: '%' },
+			]);
+		});
 	});
 
 	describe('updateUrlWithParams', () => {

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

@@ -29,18 +29,22 @@ export function insertVariableAtCursor(
 	);
 }
 
-// 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);
+// Users can type raw `%` into the URL field (e.g. `?q=95%`), which is not valid
+// percent-encoding — treat undecodable input as literal text instead of throwing.
+function safeDecodeURIComponent(value: string): string {
 	try {
-		const doubleDecoded = decodeURIComponent(decoded);
-		return doubleDecoded !== decoded ? doubleDecoded : decoded;
+		return decodeURIComponent(value);
 	} catch {
-		return decoded;
+		return value;
 	}
 }
 
+// Values may be double-encoded on the wire, so decode twice; a second decode is a
+// no-op once nothing is left to unescape, leaving single-encoded values intact.
+function decodeForDisplay(value: string): string {
+	return safeDecodeURIComponent(safeDecodeURIComponent(value));
+}
+
 /** 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('?');
@@ -53,7 +57,7 @@ export function getUrlParams(url: string): UrlParam[] {
 		const [key, value] = pair.split('=');
 		if (key) {
 			params.push({
-				key: decodeURIComponent(key),
+				key: safeDecodeURIComponent(key),
 				value: decodeForDisplay(value || ''),
 			});
 		}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/FormattingSection/ColumnUnits.tsx

@@ -11,6 +11,8 @@ interface ColumnUnitsProps {
 	columns: TableColumnOption[];
 	/** Current per-column unit map (`formatting.columnUnits`), keyed by column key. */
 	value: Record<string, string>;
+	/** Unit the selected metric was sent with; each column warns if its unit mismatches. */
+	metricUnit?: string;
 	onChange: (next: Record<string, string>) => void;
 }
 
@@ -23,6 +25,7 @@ interface ColumnUnitsProps {
 function ColumnUnits({
 	columns,
 	value,
+	metricUnit,
 	onChange,
 }: ColumnUnitsProps): JSX.Element {
 	if (columns.length === 0) {
@@ -53,6 +56,7 @@ function ColumnUnits({
 						placeholder="Select unit"
 						source={YAxisSource.DASHBOARDS}
 						value={value[column.key]}
+						initialValue={metricUnit}
 						containerClassName={styles.columnUnitSelector}
 						onChange={(unit): void => setUnit(column.key, unit)}
 					/>

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

@@ -81,6 +81,7 @@ function FormattingSection({
 					<ColumnUnits
 						columns={tableColumns}
 						value={value?.columnUnits ?? {}}
+						metricUnit={metricUnit}
 						onChange={(columnUnits): void => onChange({ ...value, columnUnits })}
 					/>
 				</div>

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

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import FormattingSection from '../FormattingSection';
 
-// Auto-seeding is covered by useMetricYAxisUnit's tests; here `metricUnit` is just a prop.
+// Auto-seeding is covered by useSeedMetricUnit's tests; here `metricUnit` is just a prop.
 
 // Open the Decimals select (clicking its antd selector) and pick the option with the
 // given visible label.
@@ -100,4 +100,33 @@ describe('FormattingSection', () => {
 
 		expect(screen.queryByLabelText('warning')).not.toBeInTheDocument();
 	});
+
+	it('warns when a column unit mismatches the metric unit', () => {
+		// metric sent in seconds, but the column is set to bytes.
+		render(
+			<FormattingSection
+				value={{ columnUnits: { A: 'By' } }}
+				controls={{ columnUnits: true }}
+				tableColumns={[{ key: 'A', label: 'A' }]}
+				metricUnit="s"
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByLabelText('warning')).toBeInTheDocument();
+	});
+
+	it('shows no warning when the column unit matches the metric unit', () => {
+		render(
+			<FormattingSection
+				value={{ columnUnits: { A: 's' } }}
+				controls={{ columnUnits: true }}
+				tableColumns={[{ key: 'A', label: 'A' }]}
+				metricUnit="s"
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.queryByLabelText('warning')).not.toBeInTheDocument();
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/components/AddColumnDropdown/AddColumnDropdown.module.scss

@@ -7,4 +7,9 @@
 
 .dropdown {
 	width: 260px;
+	/* The dropdown portals to body; lift it above the query builder's antd
+	* popups (1050) so it stays clickable, incl. inside the View modal.
+	* TODO: remove after the antd -> @signozhq/ui migration
+	**/
+	z-index: 1100;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/components/AddColumnDropdown/AddColumnDropdown.tsx

@@ -63,7 +63,7 @@ function AddColumnDropdown({
 					<Plus size={16} />
 				</Button>
 			</ComboboxTrigger>
-			<ComboboxContent arrow side="top" align="end" className={styles.dropdown}>
+			<ComboboxContent arrow side="bottom" align="end" className={styles.dropdown}>
 				<ComboboxCommand shouldFilter={false}>
 					<ComboboxInput
 						value={searchText}

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

@@ -10,7 +10,9 @@
 }
 
 .scrollArea {
-	padding: 12px;
+	// Top padding lives on the sticky tab nav instead, so the nav keeps its
+	// breathing room both at rest and when pinned to the top.
+	padding: 0 12px 12px 12px;
 }
 
 .tabsContainer {
@@ -24,11 +26,22 @@
 		background-color: var(--l1-background) !important;
 	}
 	:global(.ant-tabs-nav) {
+		// `padding-top` owns the nav's top spacing (moved off `.scrollArea`).
+		padding-top: 12px;
+		background-color: var(--l1-background);
+
 		&::before {
 			border-color: var(--l2-border);
 		}
 	}
 }
+
+// Opt-in pin to the top of the scroll area; the View modal opts out (shares a scroll area with its own header).
+.stickyNav :global(.ant-tabs-nav) {
+	position: sticky;
+	top: 0px;
+	z-index: 1100;
+}
 .queryTypeTab {
 	display: flex;
 	align-items: center;

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

@@ -7,6 +7,7 @@ import {
 import { Color } from '@signozhq/design-tokens';
 import { Atom, Terminal } from '@signozhq/icons';
 import { Tabs } from 'antd';
+import cx from 'classnames';
 import { Typography } from '@signozhq/ui/typography';
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import PromQLIcon from 'assets/Dashboard/PromQl';
@@ -45,6 +46,8 @@ interface PanelEditorQueryBuilderProps {
 	onCancelQuery: () => void;
 	/** Optional content pinned below the builder (e.g. the List columns editor). */
 	footer?: ReactNode;
+	/** Pin the tabs + Run Query row to the top of the scroll area. Off in the View modal, which shares a scroll area with its own header. */
+	stickyHeader?: boolean;
 }
 
 /**
@@ -59,6 +62,7 @@ function PanelEditorQueryBuilder({
 	onStageRunQuery,
 	onCancelQuery,
 	footer,
+	stickyHeader = true,
 }: PanelEditorQueryBuilderProps): JSX.Element {
 	// The shared QueryBuilderV2 / list-view checks still speak the legacy PANEL_TYPES.
 	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
@@ -156,7 +160,9 @@ function PanelEditorQueryBuilder({
 			<div className={styles.scrollArea}>
 				<Tabs
 					type="card"
-					className={styles.tabsContainer}
+					className={cx(styles.tabsContainer, {
+						[styles.stickyNav]: stickyHeader,
+					})}
 					activeKey={currentQuery.queryType}
 					onChange={handleQueryCategoryChange}
 					tabBarExtraContent={

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

@@ -5,6 +5,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 
 import PanelEditorContainer from '../index';
+import { useScrollIntoViewStore } from '../../store/useScrollIntoViewStore';
 
 /**
  * Characterization test for the editor's composition: which derived values and
@@ -19,7 +20,7 @@ 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 mockSave = jest.fn().mockResolvedValue('panel-1');
 
 const mockUseDraft = jest.fn();
 jest.mock('../hooks/usePanelEditorDraft', () => ({
@@ -61,8 +62,8 @@ jest.mock('../hooks/useLegendSeries', () => ({
 jest.mock('../hooks/useTableColumns', () => ({
 	useTableColumns: (): [] => [],
 }));
-jest.mock('../hooks/useMetricYAxisUnit', () => ({
-	useMetricYAxisUnit: (): unknown => ({
+jest.mock('../hooks/useSeedMetricUnit', () => ({
+	useSeedMetricUnit: (): unknown => ({
 		metricUnit: undefined,
 		isLoading: false,
 	}),
@@ -104,12 +105,17 @@ jest.mock('@signozhq/ui/sonner', () => ({
 const mockHeaderProps = jest.fn();
 jest.mock('../Header/Header', () => ({
 	__esModule: true,
-	default: (props: { onSave: () => void }): JSX.Element => {
+	default: (props: { onSave: () => void; onClose: () => void }): JSX.Element => {
 		mockHeaderProps(props);
 		return (
-			<button type="button" data-testid="editor-save" onClick={props.onSave}>
-				save
-			</button>
+			<>
+				<button type="button" data-testid="editor-save" onClick={props.onSave}>
+					save
+				</button>
+				<button type="button" data-testid="editor-close" onClick={props.onClose}>
+					close
+				</button>
+			</>
 		);
 	},
 }));
@@ -196,7 +202,10 @@ function setup(
 }
 
 describe('PanelEditorContainer composition', () => {
-	beforeEach(() => jest.clearAllMocks());
+	beforeEach(() => {
+		jest.clearAllMocks();
+		useScrollIntoViewStore.setState({ scrollTargetId: null });
+	});
 
 	it('renders the editor shell with preview, query builder, and config pane', () => {
 		const panel = makePanel('signoz/TimeSeriesPanel');
@@ -299,6 +308,32 @@ describe('PanelEditorContainer composition', () => {
 		expect(mockSave).toHaveBeenCalledWith(panel.spec);
 	});
 
+	it('marks the saved panel to be scrolled into view on the dashboard', async () => {
+		setup(makePanel('signoz/TimeSeriesPanel'));
+
+		await userEvent.click(screen.getByTestId('editor-save'));
+
+		await waitFor(() =>
+			expect(useScrollIntoViewStore.getState().scrollTargetId).toBe('panel-1'),
+		);
+	});
+
+	it('marks an existing panel to be revealed when the editor is closed', async () => {
+		setup(makePanel('signoz/TimeSeriesPanel'));
+
+		await userEvent.click(screen.getByTestId('editor-close'));
+
+		expect(useScrollIntoViewStore.getState().scrollTargetId).toBe('panel-1');
+	});
+
+	it('does not mark a scroll target when a new, unsaved panel is closed', async () => {
+		setup(makePanel('signoz/TimeSeriesPanel'), { isNew: true });
+
+		await userEvent.click(screen.getByTestId('editor-close'));
+
+		expect(useScrollIntoViewStore.getState().scrollTargetId).toBeNull();
+	});
+
 	it('offers Switch to View Mode for an existing panel', () => {
 		setup(makePanel('signoz/TimeSeriesPanel'));
 

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

@@ -2,6 +2,7 @@ import { renderHook } from '@testing-library/react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { preparePieData } from 'pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/prepareData';
 import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
 import type { PanelQueryData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
 import { flattenTimeSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
@@ -29,18 +30,36 @@ jest.mock(
 	() => ({
 		flattenTimeSeries: jest.fn(),
 		getTimeSeriesResults: jest.fn(() => []),
+		getScalarResults: jest.fn(() => []),
 	}),
 );
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/queryV5/prepareScalarTables',
+	() => ({ prepareScalarTables: jest.fn(() => []) }),
+);
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/prepareData',
+	() => ({ preparePieData: jest.fn(() => []) }),
+);
 
 const mockUseIsDarkMode = useIsDarkMode as unknown as jest.Mock;
 const mockFlatten = flattenTimeSeries as unknown as jest.Mock;
 const mockResolveLabel = resolveSeriesLabelV5 as unknown as jest.Mock;
 const mockGenerateColor = generateColor as unknown as jest.Mock;
+const mockPreparePie = preparePieData as unknown as jest.Mock;
 
 const PANEL = {
 	kind: 'Panel',
 	spec: { plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} }, queries: [] },
 } as unknown as DashboardtypesPanelDTO;
+const PIE_PANEL = {
+	kind: 'Panel',
+	spec: { plugin: { kind: 'signoz/PieChartPanel', spec: {} }, queries: [] },
+} as unknown as DashboardtypesPanelDTO;
+const HISTOGRAM_PANEL = {
+	kind: 'Panel',
+	spec: { plugin: { kind: 'signoz/HistogramPanel', spec: {} }, queries: [] },
+} as unknown as DashboardtypesPanelDTO;
 const DATA = { response: {}, legendMap: {} } as unknown as PanelQueryData;
 
 // Each flattened series carries the label resolveSeriesLabelV5 should report.
@@ -88,6 +107,32 @@ describe('useLegendSeries', () => {
 		]);
 	});
 
+	it('resolves histogram panels via the time-series path', () => {
+		mockFlatten.mockReturnValue(seriesWithLabels(['a', 'b']));
+		const { result } = renderHook(() => useLegendSeries(HISTOGRAM_PANEL, DATA));
+		expect(result.current).toStrictEqual([
+			{ label: 'a', defaultColor: 'color:a' },
+			{ label: 'b', defaultColor: 'color:b' },
+		]);
+		// The pie path must not run for a histogram panel.
+		expect(mockPreparePie).not.toHaveBeenCalled();
+	});
+
+	it('resolves pie panels from their scalar slices, deduped by label', () => {
+		mockPreparePie.mockReturnValue([
+			{ label: 'x', color: 'c1' },
+			{ label: 'y', color: 'c2' },
+			{ label: 'x', color: 'c1' },
+		]);
+		const { result } = renderHook(() => useLegendSeries(PIE_PANEL, DATA));
+		expect(result.current).toStrictEqual([
+			{ label: 'x', defaultColor: 'c1' },
+			{ label: 'y', defaultColor: 'c2' },
+		]);
+		// The time-series path must not run for a pie panel.
+		expect(mockFlatten).not.toHaveBeenCalled();
+	});
+
 	it('uses the dark palette in dark mode and the light palette otherwise', () => {
 		mockFlatten.mockReturnValue(seriesWithLabels(['a']));
 

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

@@ -1,103 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
-
-import { useMetricYAxisUnit } from '../useMetricYAxisUnit';
-
-jest.mock('hooks/useGetYAxisUnit', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-const mockUseGetYAxisUnit = useGetYAxisUnit as unknown as jest.Mock;
-
-function mockMetricUnit(
-	yAxisUnit: string | undefined,
-	isLoading = false,
-): void {
-	mockUseGetYAxisUnit.mockReturnValue({ yAxisUnit, isLoading, isError: false });
-}
-
-describe('useMetricYAxisUnit', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	it('seeds the unit from the metric on a new panel', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: true, unit: undefined, onSelectUnit }),
-		);
-
-		expect(onSelectUnit).toHaveBeenCalledWith('bytes');
-	});
-
-	it('does not seed when not a new panel', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: false, unit: undefined, onSelectUnit }),
-		);
-
-		expect(onSelectUnit).not.toHaveBeenCalled();
-	});
-
-	it('does not seed when the metric has no unit', () => {
-		mockMetricUnit(undefined);
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: true, unit: undefined, onSelectUnit }),
-		);
-
-		expect(onSelectUnit).not.toHaveBeenCalled();
-	});
-
-	it('does not seed when the unit already matches the metric', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: true, unit: 'bytes', onSelectUnit }),
-		);
-
-		expect(onSelectUnit).not.toHaveBeenCalled();
-	});
-
-	it('re-seeds when the resolved metric unit changes', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		const { rerender } = renderHook(
-			(props: { unit: string | undefined }) =>
-				useMetricYAxisUnit({
-					isNewPanel: true,
-					unit: props.unit,
-					onSelectUnit,
-				}),
-			{ initialProps: { unit: undefined as string | undefined } },
-		);
-		expect(onSelectUnit).toHaveBeenLastCalledWith('bytes');
-
-		// The metric changes; the panel now holds the previously-seeded unit.
-		mockMetricUnit('ms');
-		rerender({ unit: 'bytes' });
-
-		expect(onSelectUnit).toHaveBeenLastCalledWith('ms');
-	});
-
-	it('returns the resolved metric unit and loading state', () => {
-		mockMetricUnit('bytes', true);
-
-		const { result } = renderHook(() =>
-			useMetricYAxisUnit({
-				isNewPanel: false,
-				unit: undefined,
-				onSelectUnit: jest.fn(),
-			}),
-		);
-
-		expect(result.current.metricUnit).toBe('bytes');
-		expect(result.current.isLoading).toBe(true);
-	});
-});

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

@@ -247,11 +247,13 @@ describe('usePanelEditorQuerySync', () => {
 	});
 
 	describe('datasource switch', () => {
-		const withSource = (id: string, dataSource: string): Query =>
+		const withSource = (id: string, ...dataSources: string[]): Query =>
 			({
 				id,
 				queryType: 'builder',
-				builder: { queryData: [{ dataSource }] },
+				builder: {
+					queryData: dataSources.map((dataSource) => ({ dataSource })),
+				},
 			}) as unknown as Query;
 
 		it('commits the active query when a query datasource changes', () => {
@@ -286,6 +288,58 @@ describe('usePanelEditorQuerySync', () => {
 
 			expect(setSpec).not.toHaveBeenCalled();
 		});
+
+		it('does not commit when a query is added (the fresh query must not auto-run)', () => {
+			const state = builderState({ currentQuery: withSource('a', 'metrics') });
+			mockUseQueryBuilder.mockImplementation(() => state);
+			mockGetIsQueryModified.mockReturnValue(true);
+
+			const { setSpec, rerender } = setup();
+			setSpec.mockClear();
+
+			state.currentQuery = withSource('b', 'metrics', 'metrics');
+			rerender();
+
+			expect(setSpec).not.toHaveBeenCalled();
+		});
+
+		it('commits when a query is removed', () => {
+			const state = builderState({
+				currentQuery: withSource('a', 'metrics', 'logs'),
+			});
+			mockUseQueryBuilder.mockImplementation(() => state);
+			mockGetIsQueryModified.mockReturnValue(true);
+
+			const { setSpec, rerender } = setup();
+			setSpec.mockClear();
+
+			state.currentQuery = withSource('b', 'metrics');
+			rerender();
+
+			expect(setSpec).toHaveBeenCalledWith({
+				...makeDraft().spec,
+				queries: CONVERTED_QUERIES,
+			});
+		});
+
+		it('commits a datasource switch on a query added after mount', () => {
+			const state = builderState({ currentQuery: withSource('a', 'metrics') });
+			mockUseQueryBuilder.mockImplementation(() => state);
+			mockGetIsQueryModified.mockReturnValue(true);
+
+			const { setSpec, rerender } = setup();
+			setSpec.mockClear();
+
+			state.currentQuery = withSource('b', 'metrics', 'metrics');
+			rerender();
+			state.currentQuery = withSource('c', 'metrics', 'logs');
+			rerender();
+
+			expect(setSpec).toHaveBeenCalledWith({
+				...makeDraft().spec,
+				queries: CONVERTED_QUERIES,
+			});
+		});
 	});
 
 	describe('query dirty + save', () => {

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

@@ -24,6 +24,8 @@ jest.mock('api/generated/services/dashboard', () => ({
 	getGetDashboardV2QueryKey: jest.fn(() => ['/api/v2/dashboards/dash-1']),
 }));
 
+jest.mock('uuid', () => ({ v4: (): string => 'minted-panel-id' }));
+
 describe('usePanelEditorSave', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
@@ -44,7 +46,7 @@ describe('usePanelEditorSave', () => {
 			queries: [],
 		} as unknown as DashboardtypesPanelSpecDTO;
 
-		await result.current.save(spec);
+		const savedPanelId = await result.current.save(spec);
 
 		expect(mockPatchAsync).toHaveBeenCalledWith([
 			{
@@ -53,6 +55,25 @@ describe('usePanelEditorSave', () => {
 				value: spec,
 			},
 		]);
+		// Editing resolves with the panel's own id.
+		expect(savedPanelId).toBe('panel-9');
+	});
+
+	it('mints and resolves with a fresh id when creating a new panel', async () => {
+		const { result } = renderHook(() =>
+			usePanelEditorSave({ dashboardId: 'dash-1', panelId: 'new', isNew: true }),
+		);
+
+		const spec = {
+			display: { name: 'New panel' },
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: [],
+		} as unknown as DashboardtypesPanelSpecDTO;
+
+		const savedPanelId = await result.current.save(spec);
+
+		expect(savedPanelId).toBe('minted-panel-id');
+		expect(mockPatchAsync).toHaveBeenCalled();
 	});
 
 	it('surfaces the patch in-flight state as isSaving', () => {

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

@@ -0,0 +1,265 @@
+import { renderHook } from '@testing-library/react';
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
+
+import type { TableColumnOption } from '../useTableColumns';
+import { useSeedMetricUnit } from '../useSeedMetricUnit';
+
+jest.mock('hooks/useGetYAxisUnit', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockUseGetYAxisUnit = useGetYAxisUnit as unknown as jest.Mock;
+
+function mockMetricUnit(
+	yAxisUnit: string | undefined,
+	isLoading = false,
+): void {
+	mockUseGetYAxisUnit.mockReturnValue({ yAxisUnit, isLoading, isError: false });
+}
+
+function makeSpec(formatting?: unknown): DashboardtypesPanelSpecDTO {
+	return {
+		plugin: {
+			kind: 'signoz/TimeSeriesPanel',
+			spec: formatting ? { formatting } : {},
+		},
+	} as unknown as DashboardtypesPanelSpecDTO;
+}
+
+function unit(spec: DashboardtypesPanelSpecDTO): unknown {
+	return (spec.plugin.spec as { formatting?: { unit?: unknown } }).formatting
+		?.unit;
+}
+
+function columnUnits(spec: DashboardtypesPanelSpecDTO): unknown {
+	return (spec.plugin.spec as { formatting?: { columnUnits?: unknown } })
+		.formatting?.columnUnits;
+}
+
+const COLUMNS: TableColumnOption[] = [
+	{ key: 'A', label: 'A' },
+	{ key: 'B', label: 'B' },
+];
+
+const NO_COLUMNS: TableColumnOption[] = [];
+
+describe('useSeedMetricUnit', () => {
+	beforeEach(() => jest.clearAllMocks());
+
+	describe('panel-wide unit (controls.unit)', () => {
+		it('seeds formatting.unit from the metric on a new panel', () => {
+			mockMetricUnit('bytes');
+			const onChangeSpec = jest.fn();
+
+			renderHook(() =>
+				useSeedMetricUnit({
+					isNewPanel: true,
+					formattingControls: { unit: true },
+					columns: NO_COLUMNS,
+					spec: makeSpec(),
+					onChangeSpec,
+				}),
+			);
+
+			expect(unit(onChangeSpec.mock.calls[0][0])).toBe('bytes');
+		});
+
+		it('does not seed when not a new panel', () => {
+			mockMetricUnit('bytes');
+			const onChangeSpec = jest.fn();
+
+			renderHook(() =>
+				useSeedMetricUnit({
+					isNewPanel: false,
+					formattingControls: { unit: true },
+					columns: NO_COLUMNS,
+					spec: makeSpec(),
+					onChangeSpec,
+				}),
+			);
+
+			expect(onChangeSpec).not.toHaveBeenCalled();
+		});
+
+		it('does not seed when the unit already matches the metric', () => {
+			mockMetricUnit('bytes');
+			const onChangeSpec = jest.fn();
+
+			renderHook(() =>
+				useSeedMetricUnit({
+					isNewPanel: true,
+					formattingControls: { unit: true },
+					columns: NO_COLUMNS,
+					spec: makeSpec({ unit: 'bytes' }),
+					onChangeSpec,
+				}),
+			);
+
+			expect(onChangeSpec).not.toHaveBeenCalled();
+		});
+
+		it('re-seeds when the resolved metric unit changes', () => {
+			mockMetricUnit('bytes');
+			const onChangeSpec = jest.fn();
+
+			const { rerender } = renderHook(
+				(props: { spec: DashboardtypesPanelSpecDTO }) =>
+					useSeedMetricUnit({
+						isNewPanel: true,
+						formattingControls: { unit: true },
+						columns: NO_COLUMNS,
+						spec: props.spec,
+						onChangeSpec,
+					}),
+				{ initialProps: { spec: makeSpec() } },
+			);
+			expect(unit(onChangeSpec.mock.calls[0][0])).toBe('bytes');
+
+			// Metric changes; the panel now holds the previously-seeded unit.
+			mockMetricUnit('ms');
+			rerender({ spec: makeSpec({ unit: 'bytes' }) });
+
+			expect(unit(onChangeSpec.mock.calls[1][0])).toBe('ms');
+		});
+	});
+
+	describe('per-column units (controls.columnUnits)', () => {
+		it('seeds every value column with the metric unit once columns resolve', () => {
+			mockMetricUnit('bytes');
+			const onChangeSpec = jest.fn();
+
+			const { rerender } = renderHook(
+				(props: { columns: TableColumnOption[] }) =>
+					useSeedMetricUnit({
+						isNewPanel: true,
+						formattingControls: { columnUnits: true },
+						columns: props.columns,
+						spec: makeSpec(),
+						onChangeSpec,
+					}),
+				{ initialProps: { columns: NO_COLUMNS } },
+			);
+			// Waits for results to resolve the columns.
+			expect(onChangeSpec).not.toHaveBeenCalled();
+
+			rerender({ columns: COLUMNS });
+			expect(columnUnits(onChangeSpec.mock.calls[0][0])).toStrictEqual({
+				A: 'bytes',
+				B: 'bytes',
+			});
+		});
+
+		it('never writes formatting.unit for a Table', () => {
+			mockMetricUnit('bytes');
+			const onChangeSpec = jest.fn();
+
+			renderHook(() =>
+				useSeedMetricUnit({
+					isNewPanel: true,
+					formattingControls: { columnUnits: true, decimals: true },
+					columns: COLUMNS,
+					spec: makeSpec(),
+					onChangeSpec,
+				}),
+			);
+
+			expect(unit(onChangeSpec.mock.calls[0][0])).toBeUndefined();
+		});
+
+		it('only fills columns without a unit yet, keeping the user-set one', () => {
+			mockMetricUnit('bytes');
+			const onChangeSpec = jest.fn();
+
+			renderHook(() =>
+				useSeedMetricUnit({
+					isNewPanel: true,
+					formattingControls: { columnUnits: true },
+					columns: COLUMNS,
+					spec: makeSpec({ columnUnits: { A: 'ms' } }),
+					onChangeSpec,
+				}),
+			);
+
+			expect(columnUnits(onChangeSpec.mock.calls[0][0])).toStrictEqual({
+				A: 'ms',
+				B: 'bytes',
+			});
+		});
+
+		it('does not write when every column already has a unit', () => {
+			mockMetricUnit('bytes');
+			const onChangeSpec = jest.fn();
+
+			renderHook(() =>
+				useSeedMetricUnit({
+					isNewPanel: true,
+					formattingControls: { columnUnits: true },
+					columns: COLUMNS,
+					spec: makeSpec({ columnUnits: { A: 'ms', B: 's' } }),
+					onChangeSpec,
+				}),
+			);
+
+			expect(onChangeSpec).not.toHaveBeenCalled();
+		});
+
+		it('seeds once and does not re-run after the metric unit changes', () => {
+			mockMetricUnit('bytes');
+			const onChangeSpec = jest.fn();
+
+			const { rerender } = renderHook(
+				(props: { metric: string }) => {
+					mockMetricUnit(props.metric);
+					return useSeedMetricUnit({
+						isNewPanel: true,
+						formattingControls: { columnUnits: true },
+						columns: COLUMNS,
+						spec: makeSpec(),
+						onChangeSpec,
+					});
+				},
+				{ initialProps: { metric: 'bytes' } },
+			);
+			expect(onChangeSpec).toHaveBeenCalledTimes(1);
+
+			rerender({ metric: 'ms' });
+			expect(onChangeSpec).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	it('seeds nothing when the kind has no unit control (Histogram/List)', () => {
+		mockMetricUnit('bytes');
+		const onChangeSpec = jest.fn();
+
+		renderHook(() =>
+			useSeedMetricUnit({
+				isNewPanel: true,
+				formattingControls: undefined,
+				columns: COLUMNS,
+				spec: makeSpec(),
+				onChangeSpec,
+			}),
+		);
+
+		expect(onChangeSpec).not.toHaveBeenCalled();
+	});
+
+	it('returns the resolved metric unit and loading state', () => {
+		mockMetricUnit('bytes', true);
+
+		const { result } = renderHook(() =>
+			useSeedMetricUnit({
+				isNewPanel: false,
+				formattingControls: { unit: true },
+				columns: NO_COLUMNS,
+				spec: makeSpec(),
+				onChangeSpec: jest.fn(),
+			}),
+		);
+
+		expect(result.current.metricUnit).toBe('bytes');
+		expect(result.current.isLoading).toBe(true);
+	});
+});

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

@@ -1,30 +1,19 @@
 import { useMemo } from 'react';
-import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import getLabelName from 'lib/getLabelName';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
-import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
 import type { PanelQueryData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import {
-	flattenTimeSeries,
-	getTimeSeriesResults,
-} from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
 
-export interface LegendSeries {
-	/** Resolved display label — the key `legend.customColors` is indexed by. */
-	label: string;
-	/** The series' auto-assigned color, shown when no override is set. */
-	defaultColor: string;
-}
+import {
+	type LegendSeries,
+	resolvePieLegendSeries,
+	resolveTimeSeriesLegendSeries,
+} from '../utils/legendSeries';
 
 /**
- * Resolves the panel's rendered series into `{ label, defaultColor }` pairs, using the
- * exact label resolution the time-series renderer applies (`flattenTimeSeries` →
- * `resolveSeriesLabelV5`) and the same `generateColor` default. The legend-colors control
- * keys overrides by these labels, so they must match what the chart draws. Deduplicated,
- * order-preserving; empty until data arrives or for kinds without flat time-series data.
+ * Resolves the panel's rendered series into `{ label, defaultColor }` pairs so the
+ * legend-colors control can key overrides by the exact labels the chart draws. Only the
+ * kinds that expose a colors control resolve series (Pie from its scalar slices, Time
+ * Series from its flat series); every other kind returns none.
  */
 export function useLegendSeries(
 	panel: DashboardtypesPanelDTO,
@@ -33,27 +22,15 @@ export function useLegendSeries(
 	const isDarkMode = useIsDarkMode();
 
 	return useMemo(() => {
-		const palette = isDarkMode
-			? themeColors.chartcolors
-			: themeColors.lightModeColor;
-		const series = flattenTimeSeries(
-			getTimeSeriesResults(data?.response),
-			data.legendMap,
-		);
-		const builderQueries = getBuilderQueries(panel.spec.queries);
-
-		const byLabel = new Map<string, string>();
-		series.forEach((s) => {
-			const baseLabel = getLabelName(s.labels, s.queryName, s.legend);
-			const label = resolveSeriesLabelV5(s, builderQueries, baseLabel);
-			if (label && !byLabel.has(label)) {
-				byLabel.set(label, generateColor(label, palette));
-			}
-		});
-
-		return Array.from(byLabel, ([label, defaultColor]) => ({
-			label,
-			defaultColor,
-		}));
-	}, [panel.spec.queries, data.response, data.legendMap, isDarkMode]);
+		switch (panel.spec.plugin.kind) {
+			case 'signoz/PieChartPanel':
+				return resolvePieLegendSeries(data, isDarkMode);
+			case 'signoz/TimeSeriesPanel':
+			case 'signoz/BarChartPanel':
+			case 'signoz/HistogramPanel':
+				return resolveTimeSeriesLegendSeries(panel.spec.queries, data, isDarkMode);
+			default:
+				return [];
+		}
+	}, [panel.spec.plugin.kind, panel.spec.queries, data, isDarkMode]);
 }

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

@@ -1,36 +0,0 @@
-import { useEffect } from 'react';
-import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
-
-interface UseMetricYAxisUnitArgs {
-	/** Only a new panel auto-seeds; editing never overwrites the saved unit. */
-	isNewPanel: boolean;
-	unit: string | undefined;
-	onSelectUnit: (unit: string) => void;
-}
-
-interface UseMetricYAxisUnitResult {
-	metricUnit: string | undefined;
-	isLoading: boolean;
-}
-
-/**
- * Resolves the selected metric's unit and, on a new panel only, seeds the formatting unit
- * from it (V1 parity); returns the unit for the selector's mismatch warning.
- */
-export function useMetricYAxisUnit({
-	isNewPanel,
-	unit,
-	onSelectUnit,
-}: UseMetricYAxisUnitArgs): UseMetricYAxisUnitResult {
-	const { yAxisUnit: metricUnit, isLoading } = useGetYAxisUnit();
-
-	useEffect(() => {
-		if (isNewPanel && metricUnit && metricUnit !== unit) {
-			onSelectUnit(metricUnit);
-		}
-		// Re-seed only when the resolved metric unit changes, not on every unit edit.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isNewPanel, metricUnit]);
-
-	return { metricUnit, isLoading };
-}

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

@@ -111,17 +111,27 @@ export function usePanelEditorQuerySync({
 
 	// Re-commit on a query-type/datasource switch so the preview refetches. Skip
 	// mount: the draft already holds the saved queries the builder is reset to.
-	const dataSourceSignature = useMemo(
-		() =>
-			(currentQuery.builder?.queryData ?? []).map((q) => q.dataSource).join(','),
+	const dataSources = useMemo(
+		() => (currentQuery.builder?.queryData ?? []).map((q) => q.dataSource),
 		[currentQuery.builder],
 	);
+	const dataSourceSignature = dataSources.join(',');
+	const prevDataSourcesRef = useRef(dataSources);
 	const didMountRef = useRef(false);
 	useEffect(() => {
+		const prev = prevDataSourcesRef.current;
+		prevDataSourcesRef.current = dataSources;
 		if (!didMountRef.current) {
 			didMountRef.current = true;
 			return;
 		}
+		// An added query is still empty — don't auto-run it; it commits on Run Query.
+		const isQueryAdded =
+			dataSources.length > prev.length &&
+			prev.every((source, index) => source === dataSources[index]);
+		if (isQueryAdded) {
+			return;
+		}
 		commitRef.current(queryRef.current);
 		// eslint-disable-next-line react-hooks/exhaustive-deps -- structural change only
 	}, [currentQuery.queryType, dataSourceSignature]);

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

@@ -23,7 +23,8 @@ interface UsePanelEditorSaveArgs {
 }
 
 interface UsePanelEditorSaveApi {
-	save: (spec: DashboardtypesPanelSpecDTO) => Promise<void>;
+	/** Resolves with the saved panel's id (freshly minted when creating). */
+	save: (spec: DashboardtypesPanelSpecDTO) => Promise<string>;
 	isSaving: boolean;
 	error: Error | null;
 }
@@ -44,17 +45,20 @@ export function usePanelEditorSave({
 	const { patchAsync, isPatching, error } = useOptimisticPatch(dashboardId);
 
 	const save = useCallback(
-		async (spec: DashboardtypesPanelSpecDTO): Promise<void> => {
+		async (spec: DashboardtypesPanelSpecDTO): Promise<string> => {
 			let ops: DashboardtypesJSONPatchOperationDTO[];
+			// The id a new panel is persisted under (surfaced so the caller can reveal it).
+			let savedPanelId = panelId;
 			if (isNew) {
 				// Resolve the target section against the freshest dashboard we have.
 				const dashboardQueryKey = getGetDashboardV2QueryKey({ id: dashboardId });
 				const cached =
 					queryClient.getQueryData<GetDashboardV2200>(dashboardQueryKey);
+				savedPanelId = uuid();
 				ops = createPanelOps({
 					layouts: cached?.data.spec.layouts ?? [],
 					layoutIndex,
-					panelId: uuid(),
+					panelId: savedPanelId,
 					panel: { kind: DashboardtypesPanelKindDTO.Panel, spec },
 				});
 			} else {
@@ -69,6 +73,7 @@ export function usePanelEditorSave({
 
 			// Optimistic cache write + settle refetch (replaces the manual invalidate).
 			await patchAsync(ops);
+			return savedPanelId;
 		},
 		[dashboardId, panelId, isNew, layoutIndex, patchAsync, queryClient],
 	);

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

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from 'react';
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
+import type {
+	SectionControls,
+	SectionKind,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+
+import { readFormatting, writeFormatting } from '../utils/formattingSpec';
+import type { TableColumnOption } from './useTableColumns';
+
+type FormattingControls = SectionControls[SectionKind.Formatting];
+
+interface UseSeedMetricUnitArgs {
+	/** Only a new panel auto-seeds; editing never overwrites a saved unit. */
+	isNewPanel: boolean;
+	/**
+	 * The current kind's Formatting controls — the single source of truth for which
+	 * field a metric unit seeds into: `unit` (panel-wide) vs `columnUnits` (Table).
+	 * A kind with neither (Histogram/List) seeds nothing.
+	 */
+	formattingControls: FormattingControls | undefined;
+	/** Resolved value columns (Table only; empty before results arrive / for other kinds). */
+	columns: TableColumnOption[];
+	spec: DashboardtypesPanelSpecDTO;
+	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
+}
+
+interface UseSeedMetricUnitResult {
+	metricUnit: string | undefined;
+	isLoading: boolean;
+}
+
+/**
+ * Resolves the selected metric's unit and, on a new panel only, seeds it into the panel's
+ * formatting — into `formatting.unit` for kinds with a panel-wide unit control, or into
+ * `formatting.columnUnits` (per value column) for a Table, which has no panel-wide unit.
+ * The kind's Formatting `controls` decide which applies, mirroring `buildPluginSpec`'s
+ * switch-time seeding so the two never diverge. Returns the unit for the FormattingSection's
+ * mismatch warning.
+ */
+export function useSeedMetricUnit({
+	isNewPanel,
+	formattingControls,
+	columns,
+	spec,
+	onChangeSpec,
+}: UseSeedMetricUnitArgs): UseSeedMetricUnitResult {
+	const { yAxisUnit: metricUnit, isLoading } = useGetYAxisUnit();
+
+	const seedsUnit = isNewPanel && !!formattingControls?.unit;
+	const seedsColumnUnits = isNewPanel && !!formattingControls?.columnUnits;
+
+	// Panel-wide unit: seed (and re-seed) whenever the resolved metric unit changes. Kept
+	// off `spec` so a manual unit edit doesn't re-run this and fight the user.
+	useEffect(() => {
+		if (!seedsUnit || !metricUnit || metricUnit === readFormatting(spec)?.unit) {
+			return;
+		}
+		onChangeSpec(writeFormatting(spec, { unit: metricUnit }));
+		// Re-seed only when the resolved metric unit changes, not on every unit edit.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [seedsUnit, metricUnit]);
+
+	// Per-column units (Table): seed once, only for columns without a unit yet, so it
+	// never clobbers a user's edit or a cleared column. Waits for results to resolve them.
+	const seededColumnsRef = useRef(false);
+	useEffect(() => {
+		if (
+			!seedsColumnUnits ||
+			seededColumnsRef.current ||
+			!metricUnit ||
+			columns.length === 0
+		) {
+			return;
+		}
+		const columnUnits = readFormatting(spec)?.columnUnits ?? {};
+		const unset = columns.filter(
+			(column) => columnUnits[column.key] === undefined,
+		);
+		seededColumnsRef.current = true;
+		if (unset.length === 0) {
+			return;
+		}
+		const nextColumnUnits = { ...columnUnits };
+		unset.forEach((column) => {
+			nextColumnUnits[column.key] = metricUnit;
+		});
+		onChangeSpec(writeFormatting(spec, { columnUnits: nextColumnUnits }));
+		// Seed once columns first resolve with a unit; not on later spec edits.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [seedsColumnUnits, metricUnit, columns]);
+
+	return { metricUnit, isLoading };
+}

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

@@ -8,25 +8,29 @@ import {
 import { toast } from '@signozhq/ui/sonner';
 import {
 	type DashboardtypesPanelDTO,
-	type DashboardtypesPanelFormattingDTO,
-	type DashboardtypesPanelSpecDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import {
+	type SectionConfig,
+	type SectionControls,
+	SectionKind,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
 
 import { getExecStats } from '../queryV5/v5ResponseData';
 import { usePanelInteractions } from '../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions';
+import { useScrollIntoViewStore } from '../store/useScrollIntoViewStore';
 import ConfigPane from './ConfigPane/ConfigPane';
 import Header from './Header/Header';
 import layoutStorage from './layoutStorage';
 import PanelEditorQueryBuilder from './PanelEditorQueryBuilder/PanelEditorQueryBuilder';
 import PreviewPane from './PreviewPane/PreviewPane';
 import { useLegendSeries } from './hooks/useLegendSeries';
-import { useMetricYAxisUnit } from './hooks/useMetricYAxisUnit';
 import { usePanelEditSession } from './hooks/usePanelEditSession';
 import { usePanelEditorSave } from './hooks/usePanelEditorSave';
+import { useSeedMetricUnit } from './hooks/useSeedMetricUnit';
 import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
 import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
 import { useSwitchToViewMode } from './hooks/useSwitchToViewMode';
@@ -124,32 +128,20 @@ function PanelEditorContainer({
 
 	const panelKind = draft.spec.plugin.kind;
 
-	// At editor level, not the collapsible FormattingSection, so seeding runs while closed.
-	const formattingUnit = (
-		spec.plugin.spec as {
-			formatting?: DashboardtypesPanelFormattingDTO;
-		}
-	).formatting?.unit;
-	const seedFormattingUnit = useCallback(
-		(unit: string): void => {
-			const pluginSpec = spec.plugin.spec as {
-				formatting?: DashboardtypesPanelFormattingDTO;
-			};
-			setSpec({
-				...spec,
-				plugin: {
-					...spec.plugin,
-					spec: { ...pluginSpec, formatting: { ...pluginSpec.formatting, unit } },
-				},
-			} as DashboardtypesPanelSpecDTO);
-		},
-		[spec, setSpec],
-	);
-	const { metricUnit } = useMetricYAxisUnit({
-		isNewPanel: isNew,
-		unit: formattingUnit,
-		onSelectUnit: seedFormattingUnit,
-	});
+	// The current kind's Formatting controls — which unit field (panel-wide `unit` vs
+	// per-column `columnUnits`) a metric unit may seed into. Same source of truth the
+	// switch-time seeding in `buildPluginSpec` reads, so the two stay in lockstep.
+	const formattingControls = useMemo(():
+		| SectionControls[SectionKind.Formatting]
+		| undefined => {
+		const section = panelDefinition.sections.find(
+			(
+				candidate,
+			): candidate is Extract<SectionConfig, { kind: SectionKind.Formatting }> =>
+				candidate.kind === SectionKind.Formatting,
+		);
+		return section?.controls;
+	}, [panelDefinition]);
 
 	// A new panel is savable once it has a query to run — List auto-seeds one; other
 	// kinds open query-less, so there's nothing to save until the user builds one.
@@ -188,6 +180,17 @@ function PanelEditorContainer({
 	const legendSeries = useLegendSeries(draft, data);
 	const tableColumns = useTableColumns(draft, data);
 
+	// Resolves the selected metric's unit and, on a new panel, seeds it into the right
+	// formatting field for the kind (panel-wide `unit`, or per-column `columnUnits` for
+	// a Table once results resolve them). `metricUnit` also drives the mismatch warning.
+	const { metricUnit } = useSeedMetricUnit({
+		isNewPanel: isNew,
+		formattingControls,
+		columns: tableColumns,
+		spec,
+		onChangeSpec: setSpec,
+	});
+
 	// Smallest query step interval (seconds) — the floor for the span-gaps
 	// threshold. Undefined until results carry step metadata.
 	const stepInterval = useMemo((): number | undefined => {
@@ -203,19 +206,33 @@ function PanelEditorContainer({
 		query: currentQuery,
 	});
 
+	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
+
 	const onSave = useCallback(async (): Promise<void> => {
 		if (!isEditable) {
 			return;
 		}
 		try {
 			// Bake the live query into the spec so unstaged edits are saved too.
-			await save(buildSaveSpec(draft.spec));
+			const savedPanelId = await save(buildSaveSpec(draft.spec));
+			// Reveal the saved panel once the dashboard re-renders.
+			setScrollTargetId(savedPanelId);
 			toast.success('Panel saved');
 			onSaved();
 		} catch {
 			toast.error('Failed to save panel');
 		}
-	}, [isEditable, save, buildSaveSpec, draft.spec, onSaved]);
+	}, [isEditable, save, buildSaveSpec, draft.spec, setScrollTargetId, onSaved]);
+
+	// Leaving an existing panel's editor (without saving) still returns to it, so
+	// the dashboard lands on that panel rather than scrolled to the top. A new,
+	// unsaved panel has no persisted target, so there's nothing to reveal.
+	const onCloseEditor = useCallback((): void => {
+		if (!isNew) {
+			setScrollTargetId(panelId);
+		}
+		onClose();
+	}, [isNew, panelId, setScrollTargetId, onClose]);
 
 	return (
 		<div className={styles.page} data-testid="panel-editor-v2">
@@ -227,7 +244,7 @@ function PanelEditorContainer({
 				readOnlyReason={editDisabledReason}
 				onSave={onSave}
 				onSwitchToView={onSwitchToView}
-				onClose={onClose}
+				onClose={onCloseEditor}
 			/>
 			<ResizablePanelGroup
 				id="panel-editor-v2"

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/utils/__tests__/formattingSpec.test.ts

@@ -0,0 +1,37 @@
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { readFormatting, writeFormatting } from '../formattingSpec';
+
+function makeSpec(formatting?: unknown): DashboardtypesPanelSpecDTO {
+	return {
+		plugin: {
+			kind: 'signoz/TimeSeriesPanel',
+			spec: formatting ? { formatting } : {},
+		},
+	} as unknown as DashboardtypesPanelSpecDTO;
+}
+
+describe('formattingSpec', () => {
+	it('reads the formatting slice (undefined when absent)', () => {
+		expect(readFormatting(makeSpec())).toBeUndefined();
+		expect(readFormatting(makeSpec({ unit: 'bytes' }))).toStrictEqual({
+			unit: 'bytes',
+		});
+	});
+
+	it('merges the patch into the formatting slice, preserving other fields', () => {
+		const next = writeFormatting(makeSpec({ decimalPrecision: '2' }), {
+			unit: 'bytes',
+		});
+		expect(readFormatting(next)).toStrictEqual({
+			decimalPrecision: '2',
+			unit: 'bytes',
+		});
+	});
+
+	it('does not mutate the input spec', () => {
+		const spec = makeSpec({ unit: 'ms' });
+		writeFormatting(spec, { unit: 'bytes' });
+		expect(readFormatting(spec)).toStrictEqual({ unit: 'ms' });
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/utils/formattingSpec.ts

@@ -0,0 +1,27 @@
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import type { PanelFormattingSlice } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+
+// `spec.plugin.spec` is a discriminated union over panel kinds; these helpers narrow
+// to the shared `formatting` slice via a single localized cast at the boundary, so
+// callers read/write it without repeating the spread.
+
+export function readFormatting(
+	spec: DashboardtypesPanelSpecDTO,
+): PanelFormattingSlice | undefined {
+	return (spec.plugin.spec as { formatting?: PanelFormattingSlice }).formatting;
+}
+
+/** Merges a partial formatting patch into the panel's `formatting` slice. */
+export function writeFormatting(
+	spec: DashboardtypesPanelSpecDTO,
+	patch: Partial<PanelFormattingSlice>,
+): DashboardtypesPanelSpecDTO {
+	const pluginSpec = spec.plugin.spec as { formatting?: PanelFormattingSlice };
+	return {
+		...spec,
+		plugin: {
+			...spec.plugin,
+			spec: { ...pluginSpec, formatting: { ...pluginSpec.formatting, ...patch } },
+		},
+	} as DashboardtypesPanelSpecDTO;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/utils/legendSeries.ts

@@ -0,0 +1,96 @@
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { themeColors } from 'constants/theme';
+import getLabelName from 'lib/getLabelName';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { preparePieData } from 'pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/prepareData';
+import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
+import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
+import { prepareScalarTables } from 'pages/DashboardPageV2/DashboardContainer/queryV5/prepareScalarTables';
+import type { PanelQueryData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import {
+	flattenTimeSeries,
+	getScalarResults,
+	getTimeSeriesResults,
+} from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
+
+export interface LegendSeries {
+	/** Resolved display label — the key `legend.customColors` is indexed by. */
+	label: string;
+	/** The series' auto-assigned color, shown when no override is set. */
+	defaultColor: string;
+}
+
+type PanelQueries = DashboardtypesPanelDTO['spec']['queries'];
+
+/**
+ * Dedupes `labels` (first-seen order, empties dropped) into `{ label, defaultColor }`
+ * pairs, resolving each unique label's color lazily via `colorFor` — so a repeated
+ * label never resolves a second color.
+ */
+function buildLegendSeries(
+	labels: readonly string[],
+	colorFor: (label: string, index: number) => string,
+): LegendSeries[] {
+	const byLabel = new Map<string, string>();
+	labels.forEach((label, index) => {
+		if (label && !byLabel.has(label)) {
+			byLabel.set(label, colorFor(label, index));
+		}
+	});
+	return Array.from(byLabel, ([label, defaultColor]) => ({
+		label,
+		defaultColor,
+	}));
+}
+
+/**
+ * Pie is fed by scalar results, not time series. Reuse the exact slices the renderer
+ * draws (without overrides, so their colors are the defaults) so the color control keys
+ * overrides by the same labels the chart does.
+ */
+export function resolvePieLegendSeries(
+	data: PanelQueryData,
+	isDarkMode: boolean,
+): LegendSeries[] {
+	const slices = preparePieData({
+		tables: prepareScalarTables({
+			results: getScalarResults(data.response),
+			legendMap: data.legendMap,
+			requestPayload: data.requestPayload,
+		}),
+		isDarkMode,
+	});
+	return buildLegendSeries(
+		slices.map((slice) => slice.label),
+		(_, index) => slices[index].color,
+	);
+}
+
+/**
+ * Time-series kinds: resolve each flattened series' label the way the renderer does
+ * (`getLabelName` → `resolveSeriesLabelV5`) and color it with `generateColor`.
+ */
+export function resolveTimeSeriesLegendSeries(
+	queries: PanelQueries,
+	data: PanelQueryData,
+	isDarkMode: boolean,
+): LegendSeries[] {
+	const palette = isDarkMode
+		? themeColors.chartcolors
+		: themeColors.lightModeColor;
+	const builderQueries = getBuilderQueries(queries);
+	const series = flattenTimeSeries(
+		getTimeSeriesResults(data.response),
+		data.legendMap,
+	);
+	return buildLegendSeries(
+		series.map((s) =>
+			resolveSeriesLabelV5(
+				s,
+				builderQueries,
+				getLabelName(s.labels, s.queryName, s.legend),
+			),
+		),
+		(label) => generateColor(label, palette),
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/NoData.tsx

@@ -1,5 +1,7 @@
 import { CalendarRange, Clock, RotateCw } from '@signozhq/icons';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 
+import { panelHasFixedTimePreference } from '../../../hooks/resolvePanelTimeWindow';
 import {
 	selectViewPanelExtendWindow,
 	useViewPanelStore,
@@ -15,6 +17,8 @@ interface NoDataProps {
 	isFetching?: boolean;
 	/** When provided, renders a Retry button that re-runs the query. */
 	onRetry?: () => void;
+	/** Hides the global "Extend time range" action when this panel is locked to a fixed time preference. */
+	panel?: DashboardtypesPanelDTO;
 	'data-testid'?: string;
 }
 
@@ -29,19 +33,30 @@ function NoData({
 	description = 'Nothing in the selected window. Try widening the range.',
 	isFetching = false,
 	onRetry,
+	panel,
 	'data-testid': testId = 'panel-no-data',
 }: NoDataProps): JSX.Element {
 	const viewExtend = useViewPanelStore(selectViewPanelExtendWindow);
 	const globalExtend = useExtendTimeWindow();
-	const { canExtend, actionLabel, extend } = viewExtend ?? globalExtend;
+	// The View modal's local extender wins; the global one only applies to a panel that
+	// follows the ambient window (a fixed preference can't be widened by it).
+	const hasFixedTimePreference = panel
+		? panelHasFixedTimePreference(panel)
+		: false;
+	const activeExtend =
+		viewExtend ?? (hasFixedTimePreference ? undefined : globalExtend);
 
 	if (isFetching) {
 		return <PanelLoader />;
 	}
 
 	const extendAction: PanelMessageAction | undefined =
-		canExtend && actionLabel
-			? { label: actionLabel, onClick: extend, icon: <CalendarRange size={14} /> }
+		activeExtend?.canExtend && activeExtend.actionLabel
+			? {
+					label: activeExtend.actionLabel,
+					onClick: activeExtend.extend,
+					icon: <CalendarRange size={14} />,
+				}
 			: undefined;
 
 	const retryAction: PanelMessageAction | undefined = onRetry

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/__tests__/NoData.test.tsx

@@ -1,3 +1,7 @@
+import {
+	DashboardtypesTimePreferenceDTO,
+	type DashboardtypesPanelDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 import { useViewPanelStore } from '../../../../store/useViewPanelStore';
@@ -24,6 +28,15 @@ function extender(over?: Partial<ExtendTimeWindow>): ExtendTimeWindow {
 	};
 }
 
+/** Minimal panel whose plugin spec carries the given time preference. */
+function panelWith(
+	timePreference?: DashboardtypesTimePreferenceDTO,
+): DashboardtypesPanelDTO {
+	return {
+		spec: { plugin: { spec: { visualization: { timePreference } } } },
+	} as unknown as DashboardtypesPanelDTO;
+}
+
 describe('NoData', () => {
 	beforeEach(() => {
 		mockUseExtendTimeWindow.mockReturnValue(inert);
@@ -119,4 +132,47 @@ describe('NoData', () => {
 
 		expect(screen.getByTestId('number-panel-no-data')).toBeInTheDocument();
 	});
+
+	it('hides the global extend action for a panel with a fixed time preference', () => {
+		const onRetry = jest.fn();
+		mockUseExtendTimeWindow.mockReturnValue(extender());
+		render(
+			<NoData
+				onRetry={onRetry}
+				panel={panelWith(DashboardtypesTimePreferenceDTO.last_6_hr)}
+			/>,
+		);
+
+		// Only Retry — extending the dashboard window can't widen a locked panel span.
+		const action = screen.getByTestId('panel-no-data-action');
+		expect(action).toHaveTextContent('Retry');
+		expect(
+			screen.queryByTestId('panel-no-data-secondary-action'),
+		).not.toBeInTheDocument();
+	});
+
+	it('still offers the global extend action for a panel that follows the global window', () => {
+		mockUseExtendTimeWindow.mockReturnValue(extender());
+		render(
+			<NoData panel={panelWith(DashboardtypesTimePreferenceDTO.global_time)} />,
+		);
+
+		expect(screen.getByTestId('panel-no-data-action')).toHaveTextContent(
+			'Extend time range',
+		);
+	});
+
+	it('keeps the View modal extender even when the panel has a fixed time preference', () => {
+		const storeExtend = jest.fn();
+		mockUseExtendTimeWindow.mockReturnValue(extender());
+		useViewPanelStore.setState({
+			viewPanelExtendWindow: extender({ extend: storeExtend }),
+		});
+		render(
+			<NoData panel={panelWith(DashboardtypesTimePreferenceDTO.last_6_hr)} />,
+		);
+
+		fireEvent.click(screen.getByTestId('panel-no-data-action'));
+		expect(storeExtend).toHaveBeenCalledTimes(1);
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -193,7 +193,7 @@ function BarPanelRenderer({
 			className={PanelStyles.panelContainer}
 		>
 			{flatSeries.length === 0 && (
-				<NoData isFetching={isFetching} onRetry={refetch} />
+				<NoData isFetching={isFetching} onRetry={refetch} panel={panel} />
 			)}
 			{flatSeries.length > 0 &&
 				containerDimensions.width > 0 &&

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/sections.ts

@@ -13,7 +13,7 @@ export const sections: SectionConfig[] = [
 	},
 	{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
 	{ kind: SectionKind.Axes, controls: { minMax: true, logScale: true } },
-	{ kind: SectionKind.Legend, controls: { position: true } },
+	{ kind: SectionKind.Legend, controls: { position: true, colors: true } },
 	{
 		kind: SectionKind.Thresholds,
 		controls: { variant: ThresholdVariant.LABEL },

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/Renderer.tsx

@@ -106,7 +106,7 @@ function HistogramPanelRenderer({
 			className={PanelStyles.panelContainer}
 		>
 			{flatSeries.length === 0 && (
-				<NoData isFetching={isFetching} onRetry={refetch} />
+				<NoData isFetching={isFetching} onRetry={refetch} panel={panel} />
 			)}
 			{flatSeries.length > 0 &&
 				containerDimensions.width > 0 &&

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/sections.ts

@@ -9,7 +9,7 @@ export const sections: SectionConfig[] = [
 	},
 	{
 		kind: SectionKind.Legend,
-		controls: { position: true },
+		controls: { position: true, colors: true },
 		// Merging all queries collapses to one distribution with no legend.
 		isHidden: (spec): boolean =>
 			Boolean(

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/Renderer.tsx

@@ -143,7 +143,7 @@ function ListPanelRenderer({
 			className={PanelStyles.panelContainer}
 		>
 			{!table || dataSource.length === 0 ? (
-				<NoData isFetching={isFetching} onRetry={refetch} />
+				<NoData isFetching={isFetching} onRetry={refetch} panel={panel} />
 			) : (
 				<>
 					<div

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/Renderer.tsx

@@ -130,6 +130,7 @@ function NumberPanelRenderer({
 					data-testid="number-panel-no-data"
 					isFetching={isFetching}
 					onRetry={refetch}
+					panel={panel}
 				/>
 			) : (
 				<ValueDisplay

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/Renderer.tsx

@@ -95,7 +95,7 @@ function PiePanelRenderer({
 	return (
 		<div data-testid="pie-panel-renderer" className={PanelStyles.panelContainer}>
 			{slices.length === 0 ? (
-				<NoData isFetching={isFetching} onRetry={refetch} />
+				<NoData isFetching={isFetching} onRetry={refetch} panel={panel} />
 			) : (
 				<Pie
 					data={slices}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/sections.ts

@@ -1,13 +1,13 @@
 import { SectionKind, type SectionConfig } from '../../types/sections';
 
-// Pie has no axes, thresholds, or stacking — just value formatting and a legend.
-// Legend `colors` is omitted: the pie legend is always interactive swatches.
+// Pie has no axes, thresholds, or stacking — just value formatting and a legend
+// (position + per-slice color overrides).
 export const sections: SectionConfig[] = [
 	{
 		kind: SectionKind.Visualization,
 		controls: { switchPanelKind: true, timePreference: true },
 	},
 	{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
-	{ kind: SectionKind.Legend, controls: { position: true } },
+	{ kind: SectionKind.Legend, controls: { position: true, colors: true } },
 	{ kind: SectionKind.ContextLinks },
 ];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/Renderer.tsx

@@ -160,7 +160,7 @@ function TablePanelRenderer({
 			className={PanelStyles.panelContainer}
 		>
 			{!table || dataSource.length === 0 ? (
-				<NoData isFetching={isFetching} onRetry={refetch} />
+				<NoData isFetching={isFetching} onRetry={refetch} panel={panel} />
 			) : (
 				<div className={styles.container}>
 					<Table

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx

@@ -194,7 +194,7 @@ function TimeSeriesPanelRenderer({
 			className={PanelStyles.panelContainer}
 		>
 			{flatSeries.length === 0 && (
-				<NoData isFetching={isFetching} onRetry={refetch} />
+				<NoData isFetching={isFetching} onRetry={refetch} panel={panel} />
 			)}
 			{flatSeries.length > 0 &&
 				containerDimensions.width > 0 &&

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/buildPluginSpec.test.ts

@@ -28,14 +28,36 @@ const mockDefaultColumnsForSignal =
 	defaultColumnsForSignal as unknown as jest.Mock;
 
 /** A panel spec carrying the plugin.spec a seed reads; the rest of the shape is irrelevant. */
-function oldSpecWith(pluginSpec: unknown): DashboardtypesPanelSpecDTO {
+function oldSpecWith(
+	pluginSpec: unknown,
+	queries: unknown[] = [],
+): DashboardtypesPanelSpecDTO {
 	return {
 		display: { name: 'Panel' },
 		plugin: { kind: 'signoz/TimeSeriesPanel', spec: pluginSpec },
-		queries: [],
+		queries,
 	} as unknown as DashboardtypesPanelSpecDTO;
 }
 
+function builderQueryNamed(name: string): unknown {
+	return {
+		spec: {
+			plugin: {
+				kind: 'signoz/BuilderQuery',
+				spec: { name, aggregations: [{ expression: 'count()' }] },
+			},
+		},
+	};
+}
+
+function compositeQueryWith(envelopes: unknown[]): unknown {
+	return {
+		spec: {
+			plugin: { kind: 'signoz/CompositeQuery', spec: { queries: envelopes } },
+		},
+	};
+}
+
 beforeEach(() => {
 	jest.clearAllMocks();
 	mockDefaultColumnsForSignal.mockReturnValue([]);
@@ -47,16 +69,15 @@ describe('buildPluginSpec', () => {
 			expect(buildPluginSpec([])).toStrictEqual({});
 		});
 
-		it('seeds nothing for sections with no seed (Axes, Buckets, ContextLinks)', () => {
+		it('seeds nothing for sections with no seed (Buckets, ContextLinks)', () => {
 			const sections: SectionConfig[] = [
-				{ kind: SectionKind.Axes, controls: { minMax: true, logScale: true } },
 				{ kind: SectionKind.Buckets, controls: { count: true, width: true } },
 				{ kind: SectionKind.ContextLinks },
 			];
 			expect(buildPluginSpec(sections)).toStrictEqual({});
 		});
 
-		it('omits the key entirely when a seed returns undefined (never key: undefined)', () => {
+		it('omits the key entirely when a seed produces an empty slice (never key: undefined)', () => {
 			const result = buildPluginSpec([
 				{ kind: SectionKind.Legend, controls: { colors: true } },
 			]);
@@ -112,6 +133,108 @@ describe('buildPluginSpec', () => {
 			];
 			expect(buildPluginSpec(sections)).toStrictEqual({});
 		});
+
+		it('carries old timePreference / stacking / fillSpans the target declares', () => {
+			const sections: SectionConfig[] = [
+				{
+					kind: SectionKind.Visualization,
+					controls: {
+						switchPanelKind: true,
+						timePreference: true,
+						stacking: true,
+						fillSpans: true,
+					},
+				},
+			];
+			const oldSpec = oldSpecWith({
+				visualization: {
+					timePreference: DashboardtypesTimePreferenceDTO.last_6_hr,
+					stackedBarChart: true,
+					fillSpans: true,
+				},
+			});
+
+			expect(buildPluginSpec(sections, { oldSpec }).visualization).toStrictEqual({
+				timePreference: DashboardtypesTimePreferenceDTO.last_6_hr,
+				stackedBarChart: true,
+				fillSpans: true,
+			});
+		});
+
+		it('drops visualization fields the target does not declare (Bar → TimeSeries)', () => {
+			// TimeSeries has no stacking control, so Bar's stackedBarChart must not carry.
+			const sections: SectionConfig[] = [
+				{
+					kind: SectionKind.Visualization,
+					controls: { switchPanelKind: true, timePreference: true, fillSpans: true },
+				},
+			];
+			const oldSpec = oldSpecWith({
+				visualization: { stackedBarChart: true },
+			});
+
+			expect(buildPluginSpec(sections, { oldSpec }).visualization).toStrictEqual({
+				timePreference: DashboardtypesTimePreferenceDTO.global_time,
+			});
+		});
+
+		it('carries old legend position but never customColors', () => {
+			const sections: SectionConfig[] = [
+				{ kind: SectionKind.Legend, controls: { position: true, colors: true } },
+			];
+			const oldSpec = oldSpecWith({
+				legend: {
+					position: DashboardtypesLegendPositionDTO.right,
+					customColors: { 'series-a': '#F1575F' },
+				},
+			});
+
+			expect(buildPluginSpec(sections, { oldSpec }).legend).toStrictEqual({
+				position: DashboardtypesLegendPositionDTO.right,
+			});
+		});
+	});
+
+	describe('axes seed (carry, gated by controls)', () => {
+		it('carries softMin/softMax/isLogScale when the kind declares both controls', () => {
+			const sections: SectionConfig[] = [
+				{ kind: SectionKind.Axes, controls: { minMax: true, logScale: true } },
+			];
+			const oldSpec = oldSpecWith({
+				axes: { softMin: 0, softMax: 100, isLogScale: true },
+			});
+
+			expect(buildPluginSpec(sections, { oldSpec }).axes).toStrictEqual({
+				softMin: 0,
+				softMax: 100,
+				isLogScale: true,
+			});
+		});
+
+		it('carries only the fields the target controls declare', () => {
+			const sections: SectionConfig[] = [
+				{ kind: SectionKind.Axes, controls: { logScale: true } },
+			];
+			const oldSpec = oldSpecWith({
+				axes: { softMin: 0, softMax: 100, isLogScale: true },
+			});
+
+			expect(buildPluginSpec(sections, { oldSpec }).axes).toStrictEqual({
+				isLogScale: true,
+			});
+		});
+
+		it('skips null soft bounds and seeds nothing on a new panel or empty axes', () => {
+			const sections: SectionConfig[] = [
+				{ kind: SectionKind.Axes, controls: { minMax: true, logScale: true } },
+			];
+			expect(buildPluginSpec(sections)).toStrictEqual({});
+			expect(
+				buildPluginSpec(sections, {
+					oldSpec: oldSpecWith({ axes: { softMin: null, softMax: null } }),
+				}),
+			).toStrictEqual({});
+		});
 	});
 
 	describe('chartAppearance seed', () => {
@@ -137,6 +260,30 @@ describe('buildPluginSpec', () => {
 			];
 			expect(buildPluginSpec(sections)).toStrictEqual({});
 		});
+
+		it('carries old values over the defaults, gated by the declared controls', () => {
+			const sections: SectionConfig[] = [
+				{
+					kind: SectionKind.ChartAppearance,
+					controls: { lineStyle: true, lineInterpolation: true, showPoints: true },
+				},
+			];
+			const oldSpec = oldSpecWith({
+				chartAppearance: {
+					lineStyle: DashboardtypesLineStyleDTO.dashed,
+					fillMode: DashboardtypesFillModeDTO.gradient,
+					showPoints: false,
+				},
+			});
+
+			expect(buildPluginSpec(sections, { oldSpec }).chartAppearance).toStrictEqual(
+				{
+					lineStyle: DashboardtypesLineStyleDTO.dashed,
+					lineInterpolation: DashboardtypesLineInterpolationDTO.spline,
+					showPoints: false,
+				},
+			);
+		});
 	});
 
 	describe('formatting seed (carry, gated by controls)', () => {
@@ -154,7 +301,7 @@ describe('buildPluginSpec', () => {
 			});
 		});
 
-		it('drops unit when the target kind does not declare it (TimeSeries → Table)', () => {
+		it('drops the panel-wide unit when no column keys are derivable (TimeSeries → Table, no queries)', () => {
 			// Table formatting has columnUnits + decimals only; carrying unit breaks the save.
 			const sections: SectionConfig[] = [
 				{
@@ -171,6 +318,56 @@ describe('buildPluginSpec', () => {
 			});
 		});
 
+		it('fans the panel-wide unit out to every value column (TimeSeries → Table)', () => {
+			const sections: SectionConfig[] = [
+				{
+					kind: SectionKind.Formatting,
+					controls: { decimals: true, columnUnits: true },
+				},
+			];
+			const oldSpec = oldSpecWith(
+				{ formatting: { unit: 'ms', decimalPrecision: 2 } },
+				[
+					compositeQueryWith([
+						{
+							type: 'builder_query',
+							spec: {
+								name: 'A',
+								aggregations: [{ expression: 'count()' }, { expression: 'sum(bytes)' }],
+							},
+						},
+						{
+							type: 'builder_query',
+							spec: { name: 'B', aggregations: [{ expression: 'count()' }] },
+						},
+					]),
+				],
+			);
+
+			expect(buildPluginSpec(sections, { oldSpec }).formatting).toStrictEqual({
+				decimalPrecision: 2,
+				columnUnits: {
+					'A.count()': 'ms',
+					'A.sum(bytes)': 'ms',
+					B: 'ms',
+				},
+			});
+		});
+
+		it('never seeds a panel-wide unit from per-column units (Table → TimeSeries)', () => {
+			const sections: SectionConfig[] = [
+				{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
+			];
+			const oldSpec = oldSpecWith(
+				{ formatting: { columnUnits: { A: 'ms', B: 'ns' }, decimalPrecision: 2 } },
+				[builderQueryNamed('A')],
+			);
+
+			expect(buildPluginSpec(sections, { oldSpec }).formatting).toStrictEqual({
+				decimalPrecision: 2,
+			});
+		});
+
 		it('carries a decimalPrecision of 0 (falsy but defined) and omits missing fields', () => {
 			const sections: SectionConfig[] = [
 				{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
@@ -225,12 +422,14 @@ describe('buildPluginSpec', () => {
 		function switchThresholds(
 			variant: ThresholdVariant | undefined,
 			thresholds: unknown[],
+			queries: unknown[] = [],
 		): unknown {
 			const sections: SectionConfig[] = [
 				{ kind: SectionKind.Thresholds, controls: { variant } },
 			];
-			return buildPluginSpec(sections, { oldSpec: oldSpecWith({ thresholds }) })
-				.thresholds;
+			return buildPluginSpec(sections, {
+				oldSpec: oldSpecWith({ thresholds }, queries),
+			}).thresholds;
 		}
 
 		it('keeps color/value/unit/label within the label variant (and defaults to label)', () => {
@@ -258,27 +457,55 @@ describe('buildPluginSpec', () => {
 			]);
 		});
 
-		it('preserves existing operator/format when remapping comparison → table', () => {
+		it('preserves operator/format and keys onto the first query column when remapping comparison → table', () => {
 			expect(
-				switchThresholds(ThresholdVariant.TABLE, [
-					{
-						value: 80,
-						color: '#F1575F',
-						operator: DashboardtypesComparisonOperatorDTO.below,
-						format: DashboardtypesThresholdFormatDTO.text,
-					},
-				]),
+				switchThresholds(
+					ThresholdVariant.TABLE,
+					[
+						{
+							value: 80,
+							color: '#F1575F',
+							operator: DashboardtypesComparisonOperatorDTO.below,
+							format: DashboardtypesThresholdFormatDTO.text,
+						},
+					],
+					[builderQueryNamed('A')],
+				),
 			).toStrictEqual([
 				{
 					value: 80,
 					color: '#F1575F',
 					operator: DashboardtypesComparisonOperatorDTO.below,
 					format: DashboardtypesThresholdFormatDTO.text,
-					columnName: '',
+					columnName: 'A',
 				},
 			]);
 		});
 
+		it('keeps an existing columnName instead of the derived default', () => {
+			expect(
+				switchThresholds(
+					ThresholdVariant.TABLE,
+					[{ value: 80, color: '#F1575F', columnName: 'p99' }],
+					[builderQueryNamed('A')],
+				),
+			).toStrictEqual([
+				{
+					value: 80,
+					color: '#F1575F',
+					operator: DashboardtypesComparisonOperatorDTO.above,
+					format: DashboardtypesThresholdFormatDTO.background,
+					columnName: 'p99',
+				},
+			]);
+		});
+
+		it('drops table thresholds when no column can be derived (empty columnName fails the save)', () => {
+			expect(
+				switchThresholds(ThresholdVariant.TABLE, [{ value: 80, color: '#F1575F' }]),
+			).toBeUndefined();
+		});
+
 		it('drops table-only operator/format/columnName when remapping table → label', () => {
 			expect(
 				switchThresholds(ThresholdVariant.LABEL, [

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/getTableColumnKeys.test.ts

@@ -0,0 +1,79 @@
+import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { getTableColumnKeys } from '../getTableColumnKeys';
+
+function bareBuilderQuery(spec: unknown): DashboardtypesQueryDTO {
+	return {
+		spec: { plugin: { kind: 'signoz/BuilderQuery', spec } },
+	} as unknown as DashboardtypesQueryDTO;
+}
+
+function compositeQuery(envelopes: unknown[]): DashboardtypesQueryDTO {
+	return {
+		spec: {
+			plugin: { kind: 'signoz/CompositeQuery', spec: { queries: envelopes } },
+		},
+	} as unknown as DashboardtypesQueryDTO;
+}
+
+describe('getTableColumnKeys', () => {
+	it('keys single-aggregation queries by name and multi-aggregation ones per expression (matches getColId)', () => {
+		const queries = [
+			compositeQuery([
+				{
+					type: 'builder_query',
+					spec: {
+						name: 'A',
+						aggregations: [{ expression: 'count()' }, { expression: 'sum(bytes)' }],
+					},
+				},
+				{
+					type: 'builder_query',
+					spec: { name: 'B', aggregations: [{ expression: 'count()' }] },
+				},
+			]),
+		];
+		expect(getTableColumnKeys(queries)).toStrictEqual([
+			'A.count()',
+			'A.sum(bytes)',
+			'B',
+		]);
+	});
+
+	it('skips disabled queries', () => {
+		const queries = [
+			compositeQuery([
+				{ type: 'builder_query', spec: { name: 'A', disabled: true } },
+				{ type: 'builder_query', spec: { name: 'B' } },
+			]),
+		];
+		expect(getTableColumnKeys(queries)).toStrictEqual(['B']);
+	});
+
+	it('keys non-builder envelopes by name but skips clickhouse_sql (columns keyed by unknown SQL alias)', () => {
+		const queries = [
+			compositeQuery([
+				{ type: 'builder_formula', spec: { name: 'F1', expression: 'A * 2' } },
+				{ type: 'clickhouse_sql', spec: { name: 'CH1', query: 'SELECT 1' } },
+			]),
+		];
+		expect(getTableColumnKeys(queries)).toStrictEqual(['F1']);
+	});
+
+	it('reads a bare builder-query envelope', () => {
+		expect(getTableColumnKeys([bareBuilderQuery({ name: 'A' })])).toStrictEqual([
+			'A',
+		]);
+	});
+
+	it('returns no keys when there is no enabled named query', () => {
+		expect(getTableColumnKeys([])).toStrictEqual([]);
+		expect(
+			getTableColumnKeys([
+				compositeQuery([
+					{ type: 'builder_query', spec: { name: 'A', disabled: true } },
+				]),
+			]),
+		).toStrictEqual([]);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/buildPluginSpec.ts

@@ -13,6 +13,7 @@ import {
 import { defaultColumnsForSignal } from '../../PanelEditor/ListColumnsEditor/selectFields';
 import {
 	type AnyThreshold,
+	type ControlledSectionKind,
 	type PanelFormattingSlice,
 	type SectionConfig,
 	type SectionControls,
@@ -20,13 +21,18 @@ import {
 	type SectionSpecMap,
 	ThresholdVariant,
 } from '../types/sections';
+import { getTableColumnKeys } from './getTableColumnKeys';
 
 /** Cross-section of the per-kind spec union; assigned to `plugin.spec` (unknown) at the boundary. */
 export interface SeededPluginSpec {
 	visualization?: SectionSpecMap[SectionKind.Visualization];
+	axes?: SectionSpecMap[SectionKind.Axes];
 	legend?: SectionSpecMap[SectionKind.Legend];
 	chartAppearance?: SectionSpecMap[SectionKind.ChartAppearance];
-	formatting?: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'>;
+	formatting?: Pick<
+		PanelFormattingSlice,
+		'unit' | 'decimalPrecision' | 'columnUnits'
+	>;
 	selectFields?: SectionSpecMap[SectionKind.Columns];
 	thresholds?: AnyThreshold[];
 }
@@ -37,6 +43,11 @@ export interface SeedContext {
 	signal?: TelemetrytypesSignalDTO;
 }
 
+/** `SeedContext` plus `oldSpec.plugin.spec` (typed `unknown`) resolved once, so seeds read it without re-casting. */
+interface ResolvedSeedContext extends SeedContext {
+	oldPluginSpec?: SeededPluginSpec;
+}
+
 interface AnyThresholdFields {
 	color: string;
 	value: number;
@@ -51,6 +62,7 @@ interface AnyThresholdFields {
 function toThresholdVariant(
 	source: AnyThresholdFields,
 	variant: ThresholdVariant,
+	defaultColumnName?: string,
 ): AnyThreshold {
 	const core = {
 		color: source.color,
@@ -69,7 +81,7 @@ function toThresholdVariant(
 			...core,
 			operator: source.operator ?? DashboardtypesComparisonOperatorDTO.above,
 			format: source.format ?? DashboardtypesThresholdFormatDTO.background,
-			columnName: source.columnName ?? '',
+			columnName: source.columnName || defaultColumnName || '',
 		};
 	}
 	return {
@@ -79,97 +91,166 @@ function toThresholdVariant(
 }
 
 /**
- * How one section derives its plugin-spec slice on create/switch — the single place a section
- * declares this. Sections absent from `SECTION_SEEDS` seed nothing.
+ * How each section derives its plugin-spec slice on create/switch — the single place a section
+ * declares this. Sections absent from `SECTION_SEEDS` seed nothing. Mapped over `SectionKind` so
+ * every `seed` receives its own kind's `controls` (atomic kinds get `undefined`), no per-seed cast.
+ * A `seed` returns an empty object/array (never `undefined`) when it has nothing to carry;
+ * `buildPluginSpec` drops the empties so the omit decision lives in one place.
  */
-interface SectionSeed {
-	specKey: keyof SeededPluginSpec;
-	seed: (controls: unknown, ctx: SeedContext) => unknown;
+type SectionSeeds = {
+	[K in SectionKind]?: {
+		specKey: keyof SeededPluginSpec;
+		seed: (
+			controls: K extends ControlledSectionKind ? SectionControls[K] : undefined,
+			ctx: ResolvedSeedContext,
+		) => object;
+	};
+};
+
+function isEmptySlice(value: object): boolean {
+	return Array.isArray(value)
+		? value.length === 0
+		: Object.keys(value).length === 0;
 }
 
-const SECTION_SEEDS: Partial<Record<SectionKind, SectionSeed>> = {
+const SECTION_SEEDS: SectionSeeds = {
 	[SectionKind.Visualization]: {
 		specKey: 'visualization',
-		seed: (controls): SectionSpecMap[SectionKind.Visualization] | undefined => {
-			const c = controls as SectionControls[SectionKind.Visualization];
-			return c.timePreference
-				? { timePreference: DashboardtypesTimePreferenceDTO.global_time }
-				: undefined;
+		seed: (
+			controls,
+			{ oldPluginSpec },
+		): SectionSpecMap[SectionKind.Visualization] => {
+			const old = oldPluginSpec?.visualization;
+			return {
+				...(controls.timePreference && {
+					timePreference:
+						old?.timePreference ?? DashboardtypesTimePreferenceDTO.global_time,
+				}),
+				...(controls.stacking &&
+					old?.stackedBarChart !== undefined && {
+						stackedBarChart: old.stackedBarChart,
+					}),
+				...(controls.fillSpans &&
+					old?.fillSpans !== undefined && { fillSpans: old.fillSpans }),
+			};
+		},
+	},
+	[SectionKind.Axes]: {
+		specKey: 'axes',
+		seed: (controls, { oldPluginSpec }): SectionSpecMap[SectionKind.Axes] => {
+			const old = oldPluginSpec?.axes;
+			if (!old) {
+				return {};
+			}
+			return {
+				...(controls.minMax &&
+					typeof old.softMin === 'number' && { softMin: old.softMin }),
+				...(controls.minMax &&
+					typeof old.softMax === 'number' && { softMax: old.softMax }),
+				...(controls.logScale &&
+					old.isLogScale !== undefined && { isLogScale: old.isLogScale }),
+			};
 		},
 	},
 	[SectionKind.Legend]: {
 		specKey: 'legend',
-		seed: (controls): SectionSpecMap[SectionKind.Legend] | undefined => {
-			const c = controls as SectionControls[SectionKind.Legend];
-			return c.position
-				? { position: DashboardtypesLegendPositionDTO.bottom }
-				: undefined;
+		seed: (controls, { oldPluginSpec }): SectionSpecMap[SectionKind.Legend] => {
+			const old = oldPluginSpec?.legend;
+			// customColors is keyed by series label, which the new kind may not reproduce.
+			return controls.position
+				? { position: old?.position ?? DashboardtypesLegendPositionDTO.bottom }
+				: {};
 		},
 	},
 	[SectionKind.ChartAppearance]: {
 		specKey: 'chartAppearance',
-		seed: (controls): SectionSpecMap[SectionKind.ChartAppearance] | undefined => {
-			const c = controls as SectionControls[SectionKind.ChartAppearance];
+		seed: (
+			controls,
+			{ oldPluginSpec },
+		): SectionSpecMap[SectionKind.ChartAppearance] => {
+			// One guard on the optional old slice, then read fields with carried-or-default values.
+			const {
+				lineStyle = DashboardtypesLineStyleDTO.solid,
+				lineInterpolation = DashboardtypesLineInterpolationDTO.spline,
+				fillMode = DashboardtypesFillModeDTO.none,
+				showPoints,
+				spanGaps,
+			} = oldPluginSpec?.chartAppearance ?? {};
 			const appearance: SectionSpecMap[SectionKind.ChartAppearance] = {};
-			if (c.lineStyle) {
-				appearance.lineStyle = DashboardtypesLineStyleDTO.solid;
+			if (controls.lineStyle) {
+				appearance.lineStyle = lineStyle;
 			}
-			if (c.lineInterpolation) {
-				appearance.lineInterpolation = DashboardtypesLineInterpolationDTO.spline;
+			if (controls.lineInterpolation) {
+				appearance.lineInterpolation = lineInterpolation;
 			}
-			if (c.fillMode) {
-				appearance.fillMode = DashboardtypesFillModeDTO.none;
+			if (controls.fillMode) {
+				appearance.fillMode = fillMode;
 			}
-			return Object.keys(appearance).length > 0 ? appearance : undefined;
+			if (controls.showPoints && showPoints !== undefined) {
+				appearance.showPoints = showPoints;
+			}
+			if (controls.spanGaps && spanGaps !== undefined) {
+				appearance.spanGaps = spanGaps;
+			}
+			return appearance;
 		},
 	},
 	[SectionKind.Formatting]: {
 		specKey: 'formatting',
 		seed: (
 			controls,
-			{ oldSpec },
-		): Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'> | undefined => {
-			const c = controls as SectionControls[SectionKind.Formatting];
-			const old = (oldSpec?.plugin.spec as { formatting?: PanelFormattingSlice })
-				?.formatting;
+			{ oldSpec, oldPluginSpec },
+		): NonNullable<SeededPluginSpec['formatting']> => {
+			const old = oldPluginSpec?.formatting;
 			// Carry a field only when the target kind declares it (e.g. Table has no `unit`),
 			// else the save API rejects the spec.
-			const carried: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'> = {
-				...(c.unit && old?.unit !== undefined && { unit: old.unit }),
-				...(c.decimals &&
+			const carried: NonNullable<SeededPluginSpec['formatting']> = {
+				...(controls.unit && old?.unit !== undefined && { unit: old.unit }),
+				...(controls.decimals &&
 					old?.decimalPrecision !== undefined && {
 						decimalPrecision: old.decimalPrecision,
 					}),
 			};
-			return Object.keys(carried).length > 0 ? carried : undefined;
+			// A panel-wide unit fans out to every value column when the target keys units
+			// per column (→ Table). One-way: `columnUnits` never seed a panel-wide `unit`.
+			const unit = old?.unit;
+			if (controls.columnUnits && unit) {
+				const keys = getTableColumnKeys(oldSpec?.queries ?? []);
+				if (keys.length > 0) {
+					carried.columnUnits = Object.fromEntries(keys.map((key) => [key, unit]));
+				}
+			}
+			return carried;
 		},
 	},
 	[SectionKind.Columns]: {
 		specKey: 'selectFields',
-		seed: (
-			_controls,
-			{ signal },
-		): SectionSpecMap[SectionKind.Columns] | undefined => {
-			if (!signal) {
-				return undefined;
-			}
-			const columns = defaultColumnsForSignal(signal);
-			return columns.length > 0 ? columns : undefined;
-		},
+		seed: (_controls, { signal }): SectionSpecMap[SectionKind.Columns] =>
+			signal ? defaultColumnsForSignal(signal) : [],
 	},
 	[SectionKind.Thresholds]: {
 		specKey: 'thresholds',
-		seed: (controls, { oldSpec }): AnyThreshold[] | undefined => {
-			const c = controls as SectionControls[SectionKind.Thresholds];
-			const variant = c.variant ?? ThresholdVariant.LABEL;
-			const old = (oldSpec?.plugin.spec as { thresholds?: AnyThreshold[] | null })
-				?.thresholds;
+		seed: (controls, { oldSpec, oldPluginSpec }): AnyThreshold[] => {
+			const variant = controls.variant ?? ThresholdVariant.LABEL;
+			const old = oldPluginSpec?.thresholds;
 			if (!old || old.length === 0) {
-				return undefined;
+				return [];
 			}
-			return old.map((threshold) =>
-				toThresholdVariant(threshold as AnyThresholdFields, variant),
+			// The save API rejects an empty table-threshold columnName.
+			const defaultColumnName =
+				variant === ThresholdVariant.TABLE
+					? getTableColumnKeys(oldSpec?.queries ?? [])[0]
+					: undefined;
+			const mapped = old.map((threshold) =>
+				toThresholdVariant(
+					threshold as AnyThresholdFields,
+					variant,
+					defaultColumnName,
+				),
 			);
+			return variant === ThresholdVariant.TABLE
+				? mapped.filter((t) => (t as { columnName?: string }).columnName)
+				: mapped;
 		},
 	},
 };
@@ -184,14 +265,23 @@ export function buildPluginSpec(
 ): SeededPluginSpec {
 	const spec: SeededPluginSpec = {};
 
+	// One localized cast for all seeds: `plugin.spec` is typed `unknown`.
+	const resolved: ResolvedSeedContext = {
+		...ctx,
+		oldPluginSpec: ctx.oldSpec?.plugin.spec as SeededPluginSpec | undefined,
+	};
+
 	sections.forEach((section) => {
 		const entry = SECTION_SEEDS[section.kind];
 		if (!entry) {
 			return;
 		}
 		const controls = 'controls' in section ? section.controls : undefined;
-		const value = entry.seed(controls, ctx);
-		if (value !== undefined) {
+		// The lookup can't prove `section.controls` matches `entry`'s key, so `entry.seed`
+		// is a union of differently-typed fns; one boundary cast, in place of a per-seed one.
+		const seed = entry.seed as (c: unknown, ctx: ResolvedSeedContext) => object;
+		const value = seed(controls, resolved);
+		if (!isEmptySlice(value)) {
 			// specKey ↔ value correlation can't be proven across the lookup; one localized cast.
 			(spec as Record<string, unknown>)[entry.specKey] = value;
 		}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/__tests__/resolveContextLinkUrl.test.ts

@@ -0,0 +1,57 @@
+import { resolveContextLinkUrl } from '../resolveContextLinkUrl';
+
+describe('resolveContextLinkUrl', () => {
+	const vars = { timestamp_start: '1720512000000', service_name: 'frontend' };
+
+	it('resolves a variable in the base URL path', () => {
+		expect(
+			resolveContextLinkUrl('https://google.com/{{timestamp_start}}', vars),
+		).toBe('https://google.com/1720512000000');
+	});
+
+	it('resolves variables in query params', () => {
+		expect(
+			resolveContextLinkUrl('https://x.com/d?service={{service_name}}', vars),
+		).toBe('https://x.com/d?service=frontend');
+	});
+
+	// Regression: a literal `%` must not abort resolution of the base-URL variable.
+	it('keeps resolving when a param value contains a literal %', () => {
+		expect(
+			resolveContextLinkUrl(
+				'https://google.com/{{timestamp_start}}?name=95%',
+				vars,
+			),
+		).toBe('https://google.com/1720512000000?name=95%25');
+	});
+
+	it('resolves both a base-URL variable and a param variable together', () => {
+		expect(
+			resolveContextLinkUrl(
+				'https://x.com/{{service_name}}?ts={{timestamp_start}}',
+				vars,
+			),
+		).toBe('https://x.com/frontend?ts=1720512000000');
+	});
+
+	it('leaves an unknown variable token untouched', () => {
+		expect(resolveContextLinkUrl('https://x.com/{{unknown}}', vars)).toBe(
+			'https://x.com/{{unknown}}',
+		);
+	});
+
+	it('returns the base URL unchanged when there is no query string', () => {
+		expect(resolveContextLinkUrl('https://x.com/plain', vars)).toBe(
+			'https://x.com/plain',
+		);
+	});
+
+	it('decodes double-encoded param values before resolving', () => {
+		expect(
+			resolveContextLinkUrl(
+				'https://x.com/d?ts=%257B%257Btimestamp_start%257D%257D',
+				vars,
+			),
+		).toBe('https://x.com/d?ts=1720512000000');
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/resolveContextLinkUrl.ts

@@ -0,0 +1,41 @@
+import { resolveTexts } from 'hooks/dashboard/useContextVariables';
+
+// A literal `%` (e.g. `?name=95%`) isn't valid percent-encoding — fall back to the raw string.
+function safeDecodeURIComponent(value: string): string {
+	try {
+		return decodeURIComponent(value);
+	} catch {
+		return value;
+	}
+}
+
+/**
+ * Resolves `{{var}}` tokens in a context-link URL. V2-local rather than the shared V1
+ * `processContextLinks`, which throws on a literal `%` and drops the whole URL to its template.
+ */
+export function resolveContextLinkUrl(
+	url: string,
+	processedVariables: Record<string, string>,
+): string {
+	const [baseUrl, queryString] = url.split('?');
+	const resolvedBase = resolveTexts({ texts: [baseUrl], processedVariables })
+		.fullTexts[0];
+
+	if (!queryString) {
+		return resolvedBase;
+	}
+
+	const resolvedQuery = Array.from(new URLSearchParams(queryString).entries())
+		.map(([key, value]) => {
+			// Decode twice for double-encoded values; safe so a bad `%` doesn't abort.
+			const decoded = safeDecodeURIComponent(safeDecodeURIComponent(value));
+			const resolvedValue = resolveTexts({
+				texts: [decoded],
+				processedVariables,
+			}).fullTexts[0];
+			return `${encodeURIComponent(key)}=${encodeURIComponent(resolvedValue)}`;
+		})
+		.join('&');
+
+	return `${resolvedBase}?${resolvedQuery}`;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/resolvePanelContextLinks.ts

@@ -1,6 +1,7 @@
 import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
-import { processContextLinks } from 'container/NewWidget/RightContainer/ContextLinks/utils';
-import type { ContextLinkProps } from 'types/api/dashboard/getAll';
+import { resolveTexts } from 'hooks/dashboard/useContextVariables';
+
+import { resolveContextLinkUrl } from './resolveContextLinkUrl';
 
 /** A panel context link with its label and URL templates resolved, ready to render. */
 export interface ResolvedDrilldownLink {
@@ -10,10 +11,8 @@ export interface ResolvedDrilldownLink {
 }
 
 /**
- * Resolves a panel's context links for the drilldown menu. Adapts each `DashboardLinkDTO` to the V1
- * `ContextLinkProps` the shared `processContextLinks` resolver expects, substitutes variables in the
- * label + URL, and drops links without a URL. Links with `renderVariables === false` keep their raw
- * label/URL (no substitution).
+ * Resolves a panel's context links for the drilldown menu: substitutes variables in each link's
+ * label + URL, drops links without a URL, and skips substitution when `renderVariables === false`.
  */
 export function resolvePanelContextLinks(
 	links: DashboardLinkDTO[] | undefined,
@@ -24,27 +23,17 @@ export function resolvePanelContextLinks(
 		return [];
 	}
 
-	const adapted: ContextLinkProps[] = usable.map((link, index) => ({
-		id: String(index),
-		label: link.name || link.url || '',
-		url: link.url ?? '',
-	}));
-
-	const resolved = processContextLinks(adapted, processedVariables, 50);
-
 	return usable.map((link, index) => {
-		// `renderVariables` defaults to on; only an explicit `false` opts out of substitution.
+		const rawLabel = link.name || link.url || '';
+		const rawUrl = link.url ?? '';
+		// Only an explicit `false` opts out; undefined defaults to substitution on.
 		if (link.renderVariables === false) {
-			return {
-				id: String(index),
-				label: link.name || link.url || '',
-				url: link.url ?? '',
-			};
+			return { id: String(index), label: rawLabel, url: rawUrl };
 		}
 		return {
-			id: resolved[index].id,
-			label: resolved[index].label,
-			url: resolved[index].url,
+			id: String(index),
+			label: resolveTexts({ texts: [rawLabel], processedVariables }).fullTexts[0],
+			url: resolveContextLinkUrl(rawUrl, processedVariables),
 		};
 	});
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/getTableColumnKeys.ts

@@ -0,0 +1,46 @@
+import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
+import { Querybuildertypesv5QueryEnvelopeClickHouseSQLDTOType } from 'api/generated/services/sigNoz.schemas';
+
+import { toQueryEnvelopes } from '../../queryV5/buildQueryRangeRequest';
+import {
+	type AggregationView,
+	getAggregationColumnKey,
+} from '../../queryV5/prepareScalarTables';
+
+// Narrow view over any envelope spec: every variant carries name/disabled,
+// only builder queries have aggregations.
+interface QuerySpecView {
+	name?: string;
+	disabled?: boolean;
+	aggregations?: AggregationView[];
+}
+
+/**
+ * Keys every enabled query's value columns render under (one per aggregation on
+ * multi-aggregation queries), derived from the panel's queries alone — lets a kind
+ * switch key per-column config before any data exists. clickhouse_sql queries are
+ * skipped: their columns are keyed by the response's SQL alias, unknowable here.
+ */
+export function getTableColumnKeys(
+	queries: DashboardtypesQueryDTO[],
+): string[] {
+	const keys = new Set<string>();
+	toQueryEnvelopes(queries).forEach((envelope) => {
+		if (
+			envelope.type ===
+			Querybuildertypesv5QueryEnvelopeClickHouseSQLDTOType.clickhouse_sql
+		) {
+			return;
+		}
+		const spec = envelope.spec as QuerySpecView | undefined;
+		if (!spec?.name || spec.disabled) {
+			return;
+		}
+		const { aggregations } = spec;
+		const columnCount = Math.max(aggregations?.length ?? 0, 1);
+		for (let index = 0; index < columnCount; index += 1) {
+			keys.add(getAggregationColumnKey(spec.name, aggregations, index));
+		}
+	});
+	return [...keys];
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import type {
-	DashboardtypesPanelDTO,
-	DashboardtypesTimePreferenceDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-import { panelTimePreferenceLabel } from 'pages/DashboardPageV2/DashboardContainer/hooks/resolvePanelTimeWindow';
+import {
+	getPanelTimePreference,
+	panelTimePreferenceLabel,
+} from 'pages/DashboardPageV2/DashboardContainer/hooks/resolvePanelTimeWindow';
 import { usePanelQuery } from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
 
 import type { DashboardSection } from '../../utils';
@@ -27,7 +27,7 @@ export interface PanelActionsConfig {
 interface PanelProps {
 	panel: DashboardtypesPanelDTO;
 	panelId: string;
-	/** True once this panel's section enters the viewport — gates the fetch. */
+	/** True once this panel enters the viewport — gates the fetch (owned by SectionGridItem). */
 	isVisible?: boolean;
 	/** Move/delete actions — present only in editable sectioned mode. */
 	panelActions?: PanelActionsConfig;
@@ -43,15 +43,7 @@ function Panel({
 	isVisible,
 	panelActions,
 }: PanelProps): JSX.Element {
-	// A per-panel time preference is surfaced as a header pill. `visualization` is
-	// common to every plugin-spec variant — localized cast reads it without
-	// narrowing on kind.
-	const timePreference = (
-		panel.spec.plugin.spec as
-			| { visualization?: { timePreference?: DashboardtypesTimePreferenceDTO } }
-			| undefined
-	)?.visualization?.timePreference;
-	const timeLabel = panelTimePreferenceLabel(timePreference);
+	const timeLabel = panelTimePreferenceLabel(getPanelTimePreference(panel));
 
 	const panelKind = panel.spec.plugin.kind;
 	const panelDefinition = getPanelDefinition(panelKind);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/__tests__/usePanelActionItems.test.tsx

@@ -89,6 +89,14 @@ function section(
 const TWO_TITLED_SECTIONS = [section(0, 'Overview'), section(1, 'Latency')];
 // Index 0 is the untitled root (free-flow) section; index 1 is a titled section.
 const TITLED_WITH_ROOT = [section(0, undefined), section(1, 'Latency')];
+// Untitled root plus two titled sections — exercises the multi-target submenu.
+const ROOT_AND_TWO_TITLED = [
+	section(0, undefined),
+	section(1, 'A'),
+	section(2, 'B'),
+];
+// Just the free-flow root: an ungrouped board with no sections to move between.
+const ONLY_ROOT = [section(0, undefined)];
 
 // Minimal panel — only its presence gates "Create Alerts"; the query→URL
 // translation it drives is covered by buildCreateAlertUrl's own tests.
@@ -111,7 +119,9 @@ const baseArgs = {
 	panelId: 'panel-1',
 	panel: mockPanel,
 	data: mockData,
-	panelActions: { currentLayoutIndex: 0, sections: TWO_TITLED_SECTIONS },
+	// Panel sits in a titled section with an untitled root present, so every
+	// action — including "Move to section" (→ Dashboard root) — is available.
+	panelActions: { currentLayoutIndex: 1, sections: TITLED_WITH_ROOT },
 };
 
 function itemKeys(result: ReturnType<typeof usePanelActionItems>): unknown[] {
@@ -210,7 +220,7 @@ describe('usePanelActionItems', () => {
 		]);
 	});
 
-	it('move is disabled when there is no other titled section to move to', () => {
+	it('hides "Move to section" when the only untitled section is not the root (index 0)', () => {
 		const { result } = renderHook(() =>
 			usePanelActionItems({
 				...baseArgs,
@@ -220,8 +230,8 @@ describe('usePanelActionItems', () => {
 				},
 			}),
 		);
-		const move = result.current.items.find((i) => 'key' in i && i.key === 'move');
-		expect(move).toMatchObject({ disabled: true });
+		// An untitled section only counts as the root at layoutIndex 0.
+		expect(itemKeys(result.current)).not.toContain('move');
 	});
 
 	it('edit opens the panel editor for this panel', () => {
@@ -233,14 +243,77 @@ describe('usePanelActionItems', () => {
 		expect(mockOpenEditor).toHaveBeenCalledWith('panel-1');
 	});
 
-	it('move targets call the mutation with from/to layout indexes', () => {
+	it('"Move to section" offers a single "Dashboard (root)" target', () => {
 		const { result } = renderHook(() => usePanelActionItems(baseArgs));
 		const move = result.current.items.find(
 			(i) => 'key' in i && i.key === 'move',
 		) as {
 			children: { key: string; onClick: () => void }[];
 		};
-		expect(move.children).toHaveLength(1);
+		expect(move.children.map((c) => c.key)).toStrictEqual(['move-to-root']);
+	});
+
+	it('the "Dashboard (root)" target moves the panel to the untitled root section', () => {
+		const { result } = renderHook(() => usePanelActionItems(baseArgs));
+		const move = result.current.items.find(
+			(i) => 'key' in i && i.key === 'move',
+		) as {
+			children: { onClick: () => void }[];
+		};
+		move.children[0].onClick();
+		expect(mockMovePanel).toHaveBeenCalledWith({
+			panelId: 'panel-1',
+			fromLayoutIndex: 1,
+			toLayoutIndex: 0,
+		});
+	});
+
+	it('an ungrouped panel (in the root) can move into each titled section', () => {
+		const { result } = renderHook(() =>
+			usePanelActionItems({
+				...baseArgs,
+				panelActions: { currentLayoutIndex: 0, sections: ROOT_AND_TWO_TITLED },
+			}),
+		);
+		const move = result.current.items.find(
+			(i) => 'key' in i && i.key === 'move',
+		) as { children: { key: string; label: string }[] };
+		expect(move.children.map((c) => c.key)).toStrictEqual(['move-1', 'move-2']);
+		expect(move.children.map((c) => c.label)).toStrictEqual(['A', 'B']);
+	});
+
+	it('a panel in a titled section can move to the root and the other titled sections', () => {
+		const { result } = renderHook(() =>
+			usePanelActionItems({
+				...baseArgs,
+				panelActions: { currentLayoutIndex: 1, sections: ROOT_AND_TWO_TITLED },
+			}),
+		);
+		const move = result.current.items.find(
+			(i) => 'key' in i && i.key === 'move',
+		) as { children: { key: string; label: string }[] };
+		// Root leads, then the other titled section — never the current one (A).
+		expect(move.children.map((c) => c.key)).toStrictEqual([
+			'move-to-root',
+			'move-2',
+		]);
+		expect(move.children.map((c) => c.label)).toStrictEqual([
+			'Dashboard (root)',
+			'B',
+		]);
+	});
+
+	it('moves between titled sections even when the board has no untitled root', () => {
+		const { result } = renderHook(() =>
+			usePanelActionItems({
+				...baseArgs,
+				panelActions: { currentLayoutIndex: 0, sections: TWO_TITLED_SECTIONS },
+			}),
+		);
+		const move = result.current.items.find(
+			(i) => 'key' in i && i.key === 'move',
+		) as { children: { key: string; onClick: () => void }[] };
+		expect(move.children.map((c) => c.key)).toStrictEqual(['move-1']);
 		move.children[0].onClick();
 		expect(mockMovePanel).toHaveBeenCalledWith({
 			panelId: 'panel-1',
@@ -249,47 +322,14 @@ describe('usePanelActionItems', () => {
 		});
 	});
 
-	it('offers "Move out of section" for a panel in a titled section when an untitled root exists', () => {
+	it('hides "Move to section" when the board has no sections (only the root)', () => {
 		const { result } = renderHook(() =>
 			usePanelActionItems({
 				...baseArgs,
-				panelActions: { currentLayoutIndex: 1, sections: TITLED_WITH_ROOT },
+				panelActions: { currentLayoutIndex: 0, sections: ONLY_ROOT },
 			}),
 		);
-		expect(itemKeys(result.current)).toContain('move-to-root');
-	});
-
-	it('"Move out of section" moves the panel to the untitled root section', () => {
-		const { result } = renderHook(() =>
-			usePanelActionItems({
-				...baseArgs,
-				panelActions: { currentLayoutIndex: 1, sections: TITLED_WITH_ROOT },
-			}),
-		);
-		const moveOut = result.current.items.find(
-			(i) => 'key' in i && i.key === 'move-to-root',
-		);
-		(moveOut as { onClick: () => void }).onClick();
-		expect(mockMovePanel).toHaveBeenCalledWith({
-			panelId: 'panel-1',
-			fromLayoutIndex: 1,
-			toLayoutIndex: 0,
-		});
-	});
-
-	it('hides "Move out of section" when the panel already sits in the root section', () => {
-		const { result } = renderHook(() =>
-			usePanelActionItems({
-				...baseArgs,
-				panelActions: { currentLayoutIndex: 0, sections: TITLED_WITH_ROOT },
-			}),
-		);
-		expect(itemKeys(result.current)).not.toContain('move-to-root');
-	});
-
-	it('hides "Move out of section" when every section is titled (no root)', () => {
-		const { result } = renderHook(() => usePanelActionItems(baseArgs));
-		expect(itemKeys(result.current)).not.toContain('move-to-root');
+		expect(itemKeys(result.current)).not.toContain('move');
 	});
 
 	it('delete defers to a confirmation: the item opens the dialog, confirm runs the mutation', async () => {
@@ -312,7 +352,7 @@ describe('usePanelActionItems', () => {
 		});
 		expect(mockDeletePanel).toHaveBeenCalledWith({
 			panelId: 'panel-1',
-			layoutIndex: 0,
+			layoutIndex: 1,
 		});
 		expect(result.current.deleteConfirm.open).toBe(false);
 	});
@@ -325,7 +365,7 @@ describe('usePanelActionItems', () => {
 		(clone as { onClick: () => void }).onClick();
 		expect(mockClonePanel).toHaveBeenCalledWith({
 			panelId: 'panel-1',
-			layoutIndex: 0,
+			layoutIndex: 1,
 		});
 	});
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader.module.scss

@@ -5,6 +5,7 @@
 	padding: 8px 12px;
 	border-bottom: 1px solid var(--l2-border);
 	cursor: grab;
+	min-height: 32px;
 }
 
 .headerLeft {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import { Info, Loader } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
 import type {
@@ -74,6 +74,14 @@ function PanelHeader({
 		[warning],
 	);
 
+	/**
+	 * Hide the entire header when there's no title, description, or status to show,
+	 * and the actions menu is suppressed (editor preview).
+	 */
+	if (!name && !description && !errorDetail && !warningDetail && hideActions) {
+		return <Fragment />;
+	}
+
 	return (
 		<div className={cx(styles.header, 'panel-drag-handle')}>
 			<div className={styles.headerLeft}>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModal.module.scss

@@ -1,9 +1,8 @@
 @use '../../../../../../styles/scrollbar' as *;
 
-.modal {
-	:global(.ant-modal-body) {
-		padding: 0px;
-	}
+.dialog[data-width] {
+	max-width: 85%;
+	width: 85%;
 }
 
 // Truncate a long panel name so the header stays on one line; the wrapping tooltip

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModal.tsx

@@ -1,7 +1,15 @@
+import {
+	Dialog,
+	DialogCloseButton,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+} from '@signozhq/ui/dialog';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import { Modal } from 'antd';
+import { ConfigProvider } from 'antd';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { useRef } from 'react';
 
 import ViewPanelModalContent from './ViewPanelModalContent';
 import styles from './ViewPanelModal.module.scss';
@@ -25,27 +33,48 @@ function ViewPanelModal({
 }: ViewPanelModalProps): JSX.Element {
 	const name = panel?.spec.display.name ?? '';
 
+	// Render antd popups into the dialog (not document.body) so they stay inside the
+	// modal's interactive, focus-trapped layer instead of being blocked by Radix.
+	const contentRef = useRef<HTMLDivElement>(null);
+
 	return (
-		<Modal
+		<Dialog
 			open={open}
-			onCancel={onClose}
-			footer={null}
-			centered
-			width="85%"
-			destroyOnClose
-			className={styles.modal}
-			title={
-				<TooltipSimple title={name} arrow>
-					<Typography.Text className={styles.title}>
-						{name} - (View mode)
-					</Typography.Text>
-				</TooltipSimple>
-			}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
 		>
-			{open && panel && panelId && (
-				<ViewPanelModalContent panel={panel} panelId={panelId} onClose={onClose} />
-			)}
-		</Modal>
+			<DialogContent
+				ref={contentRef}
+				position="center"
+				width="extra-wide"
+				className={styles.dialog}
+			>
+				<DialogHeader>
+					<DialogTitle>
+						<TooltipSimple title={name} arrow>
+							<Typography.Text className={styles.title}>
+								{name ? `${name} - (View mode)` : 'View mode'}
+							</Typography.Text>
+						</TooltipSimple>
+					</DialogTitle>
+				</DialogHeader>
+				<DialogCloseButton />
+				{open && panel && panelId && (
+					<ConfigProvider
+						getPopupContainer={(): HTMLElement => contentRef.current ?? document.body}
+					>
+						<ViewPanelModalContent
+							panel={panel}
+							panelId={panelId}
+							onClose={onClose}
+						/>
+					</ConfigProvider>
+				)}
+			</DialogContent>
+		</Dialog>
 	);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModalContent.tsx

@@ -3,6 +3,7 @@ import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schem
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import ContextMenu from 'periscope/components/ContextMenu';
+import ListColumnsEditor from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/ListColumnsEditor';
 import PanelEditorQueryBuilder from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder';
 import PreviewPane from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane';
 import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
@@ -44,6 +45,7 @@ function ViewPanelModalContent({
 
 	const {
 		draft,
+		setSpec,
 		panelDefinition,
 		signal,
 		queryType,
@@ -54,7 +56,17 @@ function ViewPanelModalContent({
 		buildSaveSpec,
 		applyDrilldownQuery,
 	} = useViewPanelMode({ panel, panelId, time: timeOverride });
-	const { data, isFetching, error, refetch, cancelQuery, pagination } = query;
+	const {
+		data,
+		isFetching,
+		isPreviousData,
+		error,
+		refetch,
+		cancelQuery,
+		pagination,
+	} = query;
+
+	const isListPanel = draft.spec.plugin.kind === 'signoz/ListPanel';
 
 	// Grid drill-down, but filter-by-value / breakout refine this view in place. Drills the draft
 	// so it reflects in-modal edits (and the click's time range follows the per-view window).
@@ -119,6 +131,16 @@ function ViewPanelModalContent({
 					isLoadingQueries={isFetching}
 					onStageRunQuery={runQuery}
 					onCancelQuery={cancelQuery}
+					stickyHeader={false}
+					footer={
+						isListPanel ? (
+							<ListColumnsEditor
+								spec={draft.spec}
+								onChangeSpec={setSpec}
+								signal={signal}
+							/>
+						) : undefined
+					}
 				/>
 			</div>
 			<div className={styles.body}>
@@ -128,6 +150,7 @@ function ViewPanelModalContent({
 					panelDefinition={panelDefinition}
 					data={data}
 					isFetching={isFetching}
+					isPreviousData={isPreviousData}
 					error={error}
 					refetch={refetch}
 					onDragSelect={onDragSelect}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/useViewPanelMode.ts

@@ -35,6 +35,8 @@ interface UseViewPanelModeArgs {
 export interface UseViewPanelModeReturn {
 	/** Local editable copy of the panel — the preview renders this, not the saved panel. */
 	draft: DashboardtypesPanelDTO;
+	/** Update the draft's spec in place (e.g. the List columns editor). */
+	setSpec: (next: DashboardtypesPanelSpecDTO) => void;
 	/** Resolved renderer for the draft's current kind (registry always resolves a kind). */
 	panelDefinition: RenderablePanelDefinition;
 	/**
@@ -159,6 +161,7 @@ export function useViewPanelMode({
 
 	return {
 		draft,
+		setSpec,
 		panelDefinition,
 		signal,
 		queryType: currentQuery.queryType,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useDrilldownDashboardVariables.test.tsx

@@ -68,7 +68,7 @@ jest.mock(
 	}),
 );
 jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/VariablesBar/useVariableSelection',
+	'pages/DashboardPageV2/DashboardContainer/VariablesBar/variablesUrlState',
 	() => ({
 		ALL_SELECTED: '__ALL__',
 		variablesUrlParser: { withOptions: (): unknown => ({}) },

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/__tests__/useClonePanel.test.ts

@@ -1,6 +1,7 @@
 import { renderHook } from '@testing-library/react';
 
 import { useDashboardStore } from '../../../../store/useDashboardStore';
+import { useScrollIntoViewStore } from '../../../../store/useScrollIntoViewStore';
 import type { DashboardSection } from '../../../../utils';
 import { useClonePanel } from '../useClonePanel';
 
@@ -47,6 +48,7 @@ describe('useClonePanel', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		useDashboardStore.setState({ dashboardId: 'dash-1' });
+		useScrollIntoViewStore.setState({ scrollTargetId: null });
 	});
 
 	it('patches an add of the deep-copied spec + a new item under the same section', async () => {
@@ -132,6 +134,21 @@ describe('useClonePanel', () => {
 		);
 	});
 
+	it('records the cloned panel as the scroll target when the toast auto-closes', async () => {
+		const { result } = renderHook(() => useClonePanel({ sections: sections() }));
+
+		await result.current({ panelId: 'p1', layoutIndex: 0 });
+
+		// The reveal is deferred to the toast's auto-close, not fired inline.
+		expect(useScrollIntoViewStore.getState().scrollTargetId).toBeNull();
+		const { onAutoClose } = mockToastPromise.mock.calls[0][1] as {
+			onAutoClose: () => void;
+		};
+		onAutoClose();
+
+		expect(useScrollIntoViewStore.getState().scrollTargetId).toBe('cloned-id');
+	});
+
 	it('swallows a patch rejection (toast owns the error UX) — does not throw', async () => {
 		mockPatchAsync.mockRejectedValueOnce(new Error('boom'));
 		const { result } = renderHook(() => useClonePanel({ sections: sections() }));

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useClonePanel.ts

@@ -10,6 +10,7 @@ import {
 	panelRef,
 } from '../../../patchOps';
 import { useDashboardStore } from '../../../store/useDashboardStore';
+import { useScrollIntoViewStore } from '../../../store/useScrollIntoViewStore';
 import type { DashboardSection } from '../../../utils';
 
 interface Params {
@@ -32,6 +33,7 @@ export function useClonePanel({
 }: Params): (args: ClonePanelArgs) => Promise<void> {
 	const dashboardId = useDashboardStore((s) => s.dashboardId);
 	const { patchAsync } = useOptimisticPatch();
+	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
 
 	return useCallback(
 		async ({ panelId, layoutIndex }: ClonePanelArgs): Promise<void> => {
@@ -64,6 +66,9 @@ export function useClonePanel({
 				success: 'Panel cloned',
 				error: 'Failed to clone panel',
 				position: 'top-center',
+				duration: 2000,
+				// Defer the reveal to the toast's auto-close so the confirmation shows first.
+				onAutoClose: () => setScrollTargetId(newPanelId),
 			});
 
 			// toast.promise owns the error UX; swallow here to avoid an unhandled
@@ -74,6 +79,6 @@ export function useClonePanel({
 				// no-op
 			}
 		},
-		[sections, dashboardId, patchAsync],
+		[sections, dashboardId, patchAsync, setScrollTargetId],
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldownDashboardVariables.tsx

@@ -21,7 +21,7 @@ import type { VariableSelection } from 'pages/DashboardPageV2/DashboardContainer
 import {
 	ALL_SELECTED,
 	variablesUrlParser,
-} from 'pages/DashboardPageV2/DashboardContainer/VariablesBar/useVariableSelection';
+} from 'pages/DashboardPageV2/DashboardContainer/VariablesBar/variablesUrlState';
 
 interface UseDrilldownDashboardVariablesArgs {
 	/** Group-by field filters from the clicked point (empty when the click has no group-by). */

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useMovePanelToSection.ts

@@ -4,7 +4,7 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
 import { useOptimisticPatch } from '../../../hooks/useOptimisticPatch';
-import { movePanelBetweenSectionsOps } from '../../../patchOps';
+import { bottomRowSlot, movePanelBetweenSectionsOps } from '../../../patchOps';
 import { useDashboardStore } from '../../../store/useDashboardStore';
 import type { DashboardSection } from '../../../utils';
 
@@ -20,8 +20,8 @@ interface Params {
 
 /**
  * Relocates a panel's item ref from one section to another. The panel itself
- * stays in `spec.panels`; only the grid item moves, dropped into a free row at
- * the bottom of the target section. Persisted as one atomic patch.
+ * stays in `spec.panels`; only the grid item moves, dropped into a fresh row at
+ * the bottom of the target section (`bottomRowSlot`). Persisted as one atomic patch.
  */
 export function useMovePanelToSection({
 	sections,
@@ -52,12 +52,10 @@ export function useMovePanelToSection({
 			}
 
 			const sourceItems = source.items.filter((i) => i.id !== panelId);
-			// Place at a fresh row at the bottom of the target section.
-			const nextY = target.items.reduce(
-				(max, i) => Math.max(max, i.y + i.height),
-				0,
-			);
-			const targetItems = [...target.items, { ...moved, x: 0, y: nextY }];
+			// Land at the section bottom, not backfilled into a gap — least disruptive
+			// to the arrangement the user already made in the target section.
+			const { x, y } = bottomRowSlot(target.items);
+			const targetItems = [...target.items, { ...moved, x, y }];
 
 			try {
 				await patchAsync(

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/utils/buildMoveItems.tsx

@@ -1,9 +1,12 @@
-import { FolderInput, FolderOutput } from '@signozhq/icons';
+import { FolderInput } from '@signozhq/icons';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 
 import { findRootSection, type DashboardSection } from '../../../utils';
 import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
 
+// Matches the root option label in the New Panel picker (SectionPicker).
+const ROOT_LABEL = 'Dashboard (root)';
+
 interface MoveItemsArgs {
 	sections: DashboardSection[];
 	currentLayoutIndex: number;
@@ -12,9 +15,11 @@ interface MoveItemsArgs {
 }
 
 /**
- * The "Move to section" submenu plus a direct "Move out of section" to the
- * untitled root, shown only when the panel sits in a titled section and a root
- * section exists to receive it.
+ * "Move to section" submenu listing every section the panel can move to — the
+ * dashboard root (untitled top level, labelled "Dashboard (root)") plus every
+ * titled section, minus the one the panel already sits in. Hidden entirely when
+ * there is nowhere to move: an ungrouped board with no titled sections, or a
+ * panel that is alone in the only section.
  */
 export function buildMoveItems({
 	sections,
@@ -22,44 +27,38 @@ export function buildMoveItems({
 	panelId,
 	movePanel,
 }: MoveItemsArgs): MenuItem[] {
+	const rootSection = findRootSection(sections);
+
+	// Sections are already in layout order, so the root (index 0, when present)
+	// naturally leads. Untitled non-root layouts are never a move target.
 	const targets = sections.filter(
-		(s) => s.title && s.layoutIndex !== currentLayoutIndex,
+		(section) =>
+			section.layoutIndex !== currentLayoutIndex &&
+			(section === rootSection || Boolean(section.title)),
 	);
-	const items: MenuItem[] = [
+
+	if (targets.length === 0) {
+		return [];
+	}
+
+	return [
 		{
 			key: 'move',
 			label: 'Move to section',
 			icon: <FolderInput size={14} />,
-			...(targets.length === 0
-				? { disabled: true }
-				: {
-						children: targets.map((s) => ({
-							key: `move-${s.layoutIndex}`,
-							label: s.title,
-							onClick: (): void =>
-								void movePanel({
-									panelId,
-									fromLayoutIndex: currentLayoutIndex,
-									toLayoutIndex: s.layoutIndex,
-								}),
-						})),
-					}),
+			children: targets.map((section) => {
+				const isRoot = section === rootSection;
+				return {
+					key: isRoot ? 'move-to-root' : `move-${section.layoutIndex}`,
+					label: isRoot ? ROOT_LABEL : (section.title as string),
+					onClick: (): void =>
+						void movePanel({
+							panelId,
+							fromLayoutIndex: currentLayoutIndex,
+							toLayoutIndex: section.layoutIndex,
+						}),
+				};
+			}),
 		},
 	];
-
-	const rootSection = findRootSection(sections);
-	if (rootSection && rootSection.layoutIndex !== currentLayoutIndex) {
-		items.push({
-			key: 'move-to-root',
-			label: 'Move out of section',
-			icon: <FolderOutput size={14} />,
-			onClick: (): void =>
-				void movePanel({
-					panelId,
-					fromLayoutIndex: currentLayoutIndex,
-					toLayoutIndex: rootSection.layoutIndex,
-				}),
-		});
-	}
-	return items;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -2,8 +2,6 @@ import { useCallback, useRef, useState } from 'react';
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 
-import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-
 import ConfirmDeleteDialog from '../../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import DisabledControlTooltip from '../../../components/DisabledControlTooltip/DisabledControlTooltip';
 import { DASHBOARD_LOCKED_REASON } from '../../../hooks/useDashboardEditGuard';
@@ -14,6 +12,7 @@ import { useDashboardStore } from '../../../store/useDashboardStore';
 import { useCloneSection } from '../hooks/useCloneSection';
 import { useDeleteSection } from '../hooks/useDeleteSection';
 import { useRenameSection } from '../hooks/useRenameSection';
+import { useScrollIntoView } from '../hooks/useScrollIntoView';
 import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
 import SectionTitleModal from '../SectionTitleModal';
 import SectionGrid from '../SectionGrid/SectionGrid';
@@ -41,12 +40,6 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 		targetLayoutIndex,
 	} = useCreatePanel();
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
-	const containerRef = useRef<HTMLDivElement>(null);
-	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
-	// true once the section scrolls into (or near) the viewport.
-	const isVisible = useIntersectionObserver(containerRef, {
-		rootMargin: '200px',
-	});
 
 	const { open, toggle } = useToggleSectionCollapse({ sectionId: section.id });
 
@@ -73,21 +66,22 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 
 	const cloneSection = useCloneSection();
 
+	const sectionRef = useRef<HTMLDivElement>(null);
+	useScrollIntoView(section.id, sectionRef);
+
 	const grid = (
 		<SectionGrid
 			items={section.items}
 			layoutIndex={section.layoutIndex}
-			isVisible={isVisible}
 			sections={sections}
 		/>
 	);
 
 	if (!section.title) {
-		// Untitled section — just the grid (no header chrome), but still observed
-		// for the viewport signal.
+		// Untitled section — just the grid, no header chrome.
 		return (
 			<div
-				ref={containerRef}
+				ref={sectionRef}
 				data-testid={`dashboard-section-${section.id}`}
 				data-section-layout-index={section.layoutIndex}
 			>
@@ -98,7 +92,7 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 
 	return (
 		<div
-			ref={containerRef}
+			ref={sectionRef}
 			className={styles.section}
 			data-testid={`dashboard-section-${section.id}`}
 			data-section-layout-index={section.layoutIndex}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.module.scss

@@ -20,3 +20,9 @@
 		}
 	}
 }
+
+// Lazy-load observer boundary (SectionGridItem); fills the grid cell.
+.panelWrapper {
+	height: 100%;
+	width: 100%;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.tsx

@@ -2,9 +2,9 @@ import { useMemo } from 'react';
 import GridLayout, { WidthProvider, type Layout } from 'react-grid-layout';
 
 import type { DashboardSection } from '../../../utils';
-import Panel from '../../Panel/Panel';
 import { useDashboardStore } from '../../../store/useDashboardStore';
 import { usePersistLayout } from '../hooks/usePersistLayout';
+import SectionGridItem from './SectionGridItem';
 import styles from './SectionGrid.module.scss';
 
 const ResponsiveGridLayout = WidthProvider(GridLayout);
@@ -12,8 +12,6 @@ const ResponsiveGridLayout = WidthProvider(GridLayout);
 interface SectionGridProps {
 	items: DashboardSection['items'];
 	layoutIndex: number;
-	/** Forwarded to panels — true when the parent section is in the viewport. */
-	isVisible?: boolean;
 	/** All sections — layout context for the panel menu's move/delete actions. */
 	sections?: DashboardSection[];
 }
@@ -21,7 +19,6 @@ interface SectionGridProps {
 function SectionGrid({
 	items,
 	layoutIndex,
-	isVisible,
 	sections,
 }: SectionGridProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
@@ -61,10 +58,9 @@ function SectionGrid({
 				// panel with no content.
 				<div key={item.id}>
 					{item.panel && (
-						<Panel
+						<SectionGridItem
 							panel={item.panel}
 							panelId={item.id}
-							isVisible={isVisible}
 							panelActions={
 								isEditable
 									? {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGridItem.tsx

@@ -0,0 +1,49 @@
+import { useRef } from 'react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
+
+import Panel, { type PanelActionsConfig } from '../../Panel/Panel';
+import { useScrollIntoView } from '../hooks/useScrollIntoView';
+import styles from './SectionGrid.module.scss';
+
+const VIEWPORT_OBSERVER_OPTIONS: IntersectionObserverInit = {
+	rootMargin: '200px',
+};
+
+interface SectionGridItemProps {
+	panel: DashboardtypesPanelDTO;
+	panelId: string;
+	panelActions?: PanelActionsConfig;
+}
+
+/**
+ * Lazy-loads a single panel: watches its own viewport intersection (latched) and
+ * passes it to the presentational Panel as `isVisible`, so a board of many panels
+ * only fetches what's on screen.
+ */
+function SectionGridItem({
+	panel,
+	panelId,
+	panelActions,
+}: SectionGridItemProps): JSX.Element {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const isVisible = useIntersectionObserver(
+		containerRef,
+		VIEWPORT_OBSERVER_OPTIONS,
+		true,
+	);
+	useScrollIntoView(panelId, containerRef);
+
+	return (
+		<div ref={containerRef} className={styles.panelWrapper}>
+			<Panel
+				panel={panel}
+				panelId={panelId}
+				isVisible={isVisible}
+				panelActions={panelActions}
+			/>
+		</div>
+	);
+}
+
+export default SectionGridItem;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/__tests__/useScrollIntoView.test.ts

@@ -0,0 +1,69 @@
+import type { RefObject } from 'react';
+import { renderHook } from '@testing-library/react';
+
+import { useScrollIntoViewStore } from '../../../../store/useScrollIntoViewStore';
+import { useScrollIntoView } from '../useScrollIntoView';
+
+function refWithScroll(scrollIntoView: jest.Mock): RefObject<HTMLElement> {
+	return {
+		current: { scrollIntoView } as unknown as HTMLElement,
+	} as RefObject<HTMLElement>;
+}
+
+describe('useScrollIntoView', () => {
+	beforeEach(() => {
+		useScrollIntoViewStore.setState({ scrollTargetId: null });
+	});
+
+	it('scrolls into view and clears the request when the store targets this id', () => {
+		const scrollIntoView = jest.fn();
+		useScrollIntoViewStore.setState({ scrollTargetId: 'p1' });
+
+		renderHook(() => useScrollIntoView('p1', refWithScroll(scrollIntoView)));
+
+		expect(scrollIntoView).toHaveBeenCalledWith({
+			behavior: 'smooth',
+			block: 'start',
+		});
+		expect(useScrollIntoViewStore.getState().scrollTargetId).toBeNull();
+	});
+
+	it('reveals a section id the same way (one hook for panels and sections)', () => {
+		const scrollIntoView = jest.fn();
+		useScrollIntoViewStore.setState({ scrollTargetId: 'sec-empty-1' });
+
+		renderHook(() =>
+			useScrollIntoView('sec-empty-1', refWithScroll(scrollIntoView)),
+		);
+
+		expect(scrollIntoView).toHaveBeenCalledWith({
+			behavior: 'smooth',
+			block: 'start',
+		});
+		expect(useScrollIntoViewStore.getState().scrollTargetId).toBeNull();
+	});
+
+	it('honours the caller-provided block alignment', () => {
+		const scrollIntoView = jest.fn();
+		useScrollIntoViewStore.setState({ scrollTargetId: 'p1' });
+
+		renderHook(() =>
+			useScrollIntoView('p1', refWithScroll(scrollIntoView), 'center'),
+		);
+
+		expect(scrollIntoView).toHaveBeenCalledWith({
+			behavior: 'smooth',
+			block: 'center',
+		});
+	});
+
+	it('does nothing when the store targets a different id', () => {
+		const scrollIntoView = jest.fn();
+		useScrollIntoViewStore.setState({ scrollTargetId: 'other' });
+
+		renderHook(() => useScrollIntoView('p1', refWithScroll(scrollIntoView)));
+
+		expect(scrollIntoView).not.toHaveBeenCalled();
+		expect(useScrollIntoViewStore.getState().scrollTargetId).toBe('other');
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useAddSection.ts

@@ -11,27 +11,8 @@ import {
 	reorderLayoutsOp,
 } from '../../../patchOps';
 import { useDashboardStore } from '../../../store/useDashboardStore';
-
-const SECTION_SELECTOR = '[data-testid^="dashboard-section-"]';
-
-/**
- * Waits (via rAF) for the appended section to render, then scrolls it into view.
- * Polls because the optimistic cache write commits to the DOM a frame or two after
- * the patch call; bails after ~40 frames.
- */
-function scrollToNewSection(prevCount: number, attempts = 40): void {
-	const sections = document.querySelectorAll(SECTION_SELECTOR);
-	if (sections.length > prevCount) {
-		sections[sections.length - 1]?.scrollIntoView({
-			behavior: 'smooth',
-			block: 'center',
-		});
-		return;
-	}
-	if (attempts > 0) {
-		requestAnimationFrame(() => scrollToNewSection(prevCount, attempts - 1));
-	}
-}
+import { useScrollIntoViewStore } from '../../../store/useScrollIntoViewStore';
+import { getSectionStableId } from '../../../utils';
 
 interface Params {
 	layouts: DashboardtypesLayoutDTO[] | undefined | null;
@@ -52,6 +33,7 @@ export function useAddSection({ layouts }: Params): Result {
 	const { patchAsync } = useOptimisticPatch();
 	const [isSaving, setIsSaving] = useState(false);
 	const { showErrorModal } = useErrorModal();
+	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
 
 	const addSection = useCallback(
 		async (title: string): Promise<void> => {
@@ -59,22 +41,24 @@ export function useAddSection({ layouts }: Params): Result {
 			if (!dashboardId || !trimmed) {
 				return;
 			}
-			const op =
-				!layouts || layouts.length === 0
-					? reorderLayoutsOp([newGridLayout(trimmed)])
-					: addSectionOp(trimmed);
-			const prevSectionCount = document.querySelectorAll(SECTION_SELECTOR).length;
+			const isFirstSection = !layouts || layouts.length === 0;
+			const op = isFirstSection
+				? reorderLayoutsOp([newGridLayout(trimmed)])
+				: addSectionOp(trimmed);
 			try {
 				setIsSaving(true);
 				await patchAsync([op]);
-				scrollToNewSection(prevSectionCount);
+				// The new empty section is appended, so its layout index is the prior count;
+				// key it the way `getSectionStableId` does so it reveals itself on render.
+				const newIndex = isFirstSection ? 0 : layouts.length;
+				setScrollTargetId(getSectionStableId([], newIndex));
 			} catch (error) {
 				showErrorModal(error as APIError);
 			} finally {
 				setIsSaving(false);
 			}
 		},
-		[layouts, dashboardId, patchAsync, showErrorModal],
+		[layouts, dashboardId, patchAsync, showErrorModal, setScrollTargetId],
 	);
 
 	return { addSection, isSaving };

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useScrollIntoView.ts

@@ -0,0 +1,24 @@
+import { RefObject, useEffect } from 'react';
+
+import { useScrollIntoViewStore } from '../../../store/useScrollIntoViewStore';
+
+/**
+ * Scrolls this panel/section into view when the store targets its id, then clears the
+ * request so it fires once. Runs on mount, so it catches the element as the grid renders it.
+ */
+export function useScrollIntoView(
+	id: string,
+	ref: RefObject<HTMLElement>,
+	block: ScrollLogicalPosition = 'start',
+): void {
+	const scrollTargetId = useScrollIntoViewStore((s) => s.scrollTargetId);
+	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
+
+	useEffect(() => {
+		if (scrollTargetId !== id) {
+			return;
+		}
+		ref.current?.scrollIntoView({ behavior: 'smooth', block });
+		setScrollTargetId(null);
+	}, [scrollTargetId, id, ref, block, setScrollTargetId]);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariablesBar.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { ChevronLeft } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
@@ -6,6 +5,7 @@ import cx from 'classnames';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 import { useInlineOverflowCount } from 'hooks/useInlineOverflowCount';
 
+import { selectVariablesExpanded } from '../store/slices/collapseSlice';
 import { useDashboardStore } from '../store/useDashboardStore';
 import AddVariableFull from './AddVariableFull';
 import AddVariableIcon from './AddVariableIcon';
@@ -45,10 +45,13 @@ interface VariablesBarProps {
  * either way so auto-selection and option fetching keep driving the panels.
  */
 function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
+	const dashboardId = dashboard.id ?? '';
 	const { variables, selection, setSelection, autoSelect } =
 		useVariableSelection(dashboard);
 	const isEditable = useDashboardStore((s) => s.isEditable);
-	const [expanded, setExpanded] = useState(false);
+	// Persisted per dashboard so the full/collapsed view survives reloads.
+	const expanded = useDashboardStore(selectVariablesExpanded(dashboardId));
+	const setVariablesExpanded = useDashboardStore((s) => s.setVariablesExpanded);
 	const { containerRef, visibleCount, overflowCount } = useInlineOverflowCount({
 		itemCount: variables.length,
 		gap: 8,
@@ -75,7 +78,7 @@ function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
 			prefix={expanded ? <ChevronLeft size={14} /> : undefined}
 			aria-expanded={expanded}
 			testId="dashboard-variables-more"
-			onClick={(): void => setExpanded((prev) => !prev)}
+			onClick={(): void => setVariablesExpanded(dashboardId, !expanded)}
 		>
 			{expanded ? 'Less' : `+${overflowCount}`}
 		</Button>
@@ -120,7 +123,7 @@ function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
 					</div>
 				))}
 
-				{hasOverflow && (
+				{(expanded || hasOverflow) && (
 					<span className={styles.moreButton}>
 						{expanded ? (
 							moreButton

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/useSeedVariableSelection.test.tsx

@@ -0,0 +1,135 @@
+import { renderHook } from '@testing-library/react';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import {
+	emptyVariableFormModel,
+	type VariableFormModel,
+} from '../../DashboardSettings/Variables/variableFormModel';
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { useSeedVariableSelection } from '../useSeedVariableSelection';
+
+const mockSetUrlValues = jest.fn();
+let mockUrlValues: Record<string, unknown> | null = null;
+
+jest.mock('nuqs', () => ({
+	parseAsJson: (): unknown => ({ withOptions: (): unknown => ({}) }),
+	useQueryState: (): unknown => [mockUrlValues, mockSetUrlValues],
+}));
+
+// The hook maps spec DTOs through dtoToFormModel; identity lets tests pass form
+// models directly as `spec.variables`.
+jest.mock('../../DashboardSettings/Variables/variableAdapters', () => ({
+	dtoToFormModel: (dto: unknown): unknown => dto,
+}));
+
+function model(overrides: Partial<VariableFormModel>): VariableFormModel {
+	return { ...emptyVariableFormModel(), ...overrides };
+}
+
+function dashboard(
+	id: string,
+	variables: VariableFormModel[],
+): DashboardtypesGettableDashboardV2DTO {
+	return {
+		id,
+		spec: { variables },
+	} as unknown as DashboardtypesGettableDashboardV2DTO;
+}
+
+function seededValue(dashboardId: string, name: string): unknown {
+	return useDashboardStore.getState().variableValues[dashboardId]?.[name];
+}
+
+describe('useSeedVariableSelection', () => {
+	afterEach(() => {
+		mockUrlValues = null;
+		mockSetUrlValues.mockClear();
+		useDashboardStore.setState({
+			variableValues: {},
+			variableFetchStates: {},
+			variableFetchContext: null,
+		});
+	});
+
+	it('seeds from the URL over the stored value and the default', () => {
+		mockUrlValues = { env: 'from-url' };
+		useDashboardStore
+			.getState()
+			.setVariableValues('d1', { env: { value: 'stored', allSelected: false } });
+		const dash = dashboard('d1', [
+			model({ name: 'env', type: 'TEXT', defaultValue: 'default' }),
+		]);
+
+		renderHook(() => useSeedVariableSelection(dash));
+
+		expect(seededValue('d1', 'env')).toStrictEqual({
+			value: 'from-url',
+			allSelected: false,
+		});
+	});
+
+	it('falls back to the stored value when the URL has no entry', () => {
+		useDashboardStore
+			.getState()
+			.setVariableValues('d1', { env: { value: 'stored', allSelected: false } });
+		const dash = dashboard('d1', [
+			model({ name: 'env', type: 'TEXT', defaultValue: 'default' }),
+		]);
+
+		renderHook(() => useSeedVariableSelection(dash));
+
+		expect(seededValue('d1', 'env')).toStrictEqual({
+			value: 'stored',
+			allSelected: false,
+		});
+	});
+
+	it('falls back to the default when neither URL nor store has a value', () => {
+		const dash = dashboard('d1', [
+			model({ name: 'env', type: 'TEXT', defaultValue: 'default' }),
+		]);
+
+		renderHook(() => useSeedVariableSelection(dash));
+
+		expect(seededValue('d1', 'env')).toStrictEqual({
+			value: 'default',
+			allSelected: false,
+		});
+	});
+
+	it('initializes the fetch context with idle states for every variable', () => {
+		const dash = dashboard('d1', [
+			model({ name: 'env', type: 'TEXT' }),
+			model({ name: 'service', type: 'CUSTOM', customValue: 'a,b' }),
+		]);
+
+		renderHook(() => useSeedVariableSelection(dash));
+
+		const state = useDashboardStore.getState();
+		expect(state.variableFetchContext?.variableTypes).toStrictEqual({
+			env: 'TEXT',
+			service: 'CUSTOM',
+		});
+		expect(state.variableFetchStates).toStrictEqual({
+			env: 'idle',
+			service: 'idle',
+		});
+	});
+
+	it('prunes URL entries for variables that no longer exist', () => {
+		mockUrlValues = { env: 'prod', removed: 'stale' };
+		const dash = dashboard('d1', [model({ name: 'env', type: 'TEXT' })]);
+
+		renderHook(() => useSeedVariableSelection(dash));
+
+		expect(mockSetUrlValues).toHaveBeenCalledWith({ env: 'prod' });
+	});
+
+	it('writes nothing while the dashboard is still loading', () => {
+		renderHook(() => useSeedVariableSelection(undefined));
+
+		const state = useDashboardStore.getState();
+		expect(state.variableValues).toStrictEqual({});
+		expect(state.variableFetchContext).toBeNull();
+	});
+});