test(charts): add Pie chart + usePieInteractions tests

Cover the shared Pie chart and its helpers/hook:
- utils: scaled font size, arc geometry, colour lighten/fill dimming
- usePieInteractions: marker toggle, label isolate/reset, hover focus,
  hidden-slice guard, localStorage persistence + rehydration
- PieArc: leader-label threshold, label truncation, enter/leave/click
- PieCenterLabel: numeric/unit split
- Pie: no-data state, arc-per-slice rendering, legend, layout per position,
  hide-on-marker-click

Adds a global ResizeObserver polyfill to jest.setup.ts (alongside the existing
IntersectionObserver one) since visx's useTooltipInPortal requires it.

docs/api/openapi.yml

@@ -870,6 +870,14 @@ components:
       - timestampMillis
       - data
       type: object
+    CloudintegrationtypesAssets:
+      properties:
+        dashboards:
+          items:
+            $ref: '#/components/schemas/CloudintegrationtypesDashboard'
+          nullable: true
+          type: array
+      type: object
     CloudintegrationtypesAzureAccountConfig:
       properties:
         deploymentRegion:
@@ -1017,6 +1025,17 @@ components:
       - ingestionUrl
       - ingestionKey
       type: object
+    CloudintegrationtypesDashboard:
+      properties:
+        definition:
+          $ref: '#/components/schemas/DashboardtypesStorableDashboardData'
+        description:
+          type: string
+        id:
+          type: string
+        title:
+          type: string
+      type: object
     CloudintegrationtypesDataCollected:
       properties:
         logs:
@@ -1190,7 +1209,7 @@ components:
     CloudintegrationtypesService:
       properties:
         assets:
-          $ref: '#/components/schemas/CloudintegrationtypesServiceAssets'
+          $ref: '#/components/schemas/CloudintegrationtypesAssets'
         cloudIntegrationService:
           $ref: '#/components/schemas/CloudintegrationtypesCloudIntegrationService'
         dataCollected:
@@ -1203,6 +1222,8 @@ components:
           type: string
         supportedSignals:
           $ref: '#/components/schemas/CloudintegrationtypesSupportedSignals'
+        telemetryCollectionStrategy:
+          $ref: '#/components/schemas/CloudintegrationtypesTelemetryCollectionStrategy'
         title:
           type: string
       required:
@@ -1213,17 +1234,9 @@ components:
       - assets
       - supportedSignals
       - dataCollected
+      - telemetryCollectionStrategy
       - cloudIntegrationService
       type: object
-    CloudintegrationtypesServiceAssets:
-      properties:
-        dashboards:
-          items:
-            $ref: '#/components/schemas/CloudintegrationtypesServiceDashboard'
-          type: array
-      required:
-      - dashboards
-      type: object
     CloudintegrationtypesServiceConfig:
       properties:
         aws:
@@ -1231,18 +1244,6 @@ components:
         azure:
           $ref: '#/components/schemas/CloudintegrationtypesAzureServiceConfig'
       type: object
-    CloudintegrationtypesServiceDashboard:
-      properties:
-        description:
-          type: string
-        integrationDashboard:
-          $ref: '#/components/schemas/CloudintegrationtypesStorableIntegrationDashboard'
-        title:
-          type: string
-      required:
-      - title
-      - description
-      type: object
     CloudintegrationtypesServiceID:
       enum:
       - alb
@@ -1277,30 +1278,6 @@ components:
       - icon
       - enabled
       type: object
-    CloudintegrationtypesStorableIntegrationDashboard:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        dashboardId:
-          type: string
-        id:
-          type: string
-        provider:
-          type: string
-        slug:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - dashboardId
-      - provider
-      - slug
-      - createdAt
-      - updatedAt
-      type: object
     CloudintegrationtypesSupportedSignals:
       properties:
         logs:
@@ -1308,6 +1285,13 @@ components:
         metrics:
           type: boolean
       type: object
+    CloudintegrationtypesTelemetryCollectionStrategy:
+      properties:
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureTelemetryCollectionStrategy'
+      type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
@@ -2661,30 +2645,6 @@ components:
         legend:
           $ref: '#/components/schemas/DashboardtypesLegend'
       type: object
-    DashboardtypesJSONPatchOperation:
-      properties:
-        from:
-          description: Source JSON Pointer for move/copy ops; ignored for other ops.
-          type: string
-        op:
-          $ref: '#/components/schemas/DashboardtypesPatchOp'
-        path:
-          description: JSON Pointer (RFC 6901) into the dashboard's postable shape
-            — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0,
-            /tags/-.
-          type: string
-        value:
-          description: 'Value to add/replace/test against. The expected type depends
-            on the path. Common shapes (see referenced schemas for the exact field
-            set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N
-            (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable;
-            /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a
-            TagtypesPostableTag; /spec/display/name and other leaf string fields take
-            a string. Required for add/replace/test; ignored for remove/move/copy.'
-      required:
-      - op
-      - path
-      type: object
     DashboardtypesLayout:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec'
@@ -2900,20 +2860,6 @@ components:
             $ref: '#/components/schemas/DashboardtypesQuery'
           type: array
       type: object
-    DashboardtypesPatchOp:
-      enum:
-      - add
-      - remove
-      - replace
-      - move
-      - copy
-      - test
-      type: string
-    DashboardtypesPatchableDashboardV2:
-      items:
-        $ref: '#/components/schemas/DashboardtypesJSONPatchOperation'
-      nullable: true
-      type: array
     DashboardtypesPieChartPanelSpec:
       properties:
         formatting:
@@ -3201,27 +3147,6 @@ components:
         timePreference:
           $ref: '#/components/schemas/DashboardtypesTimePreference'
       type: object
-    DashboardtypesUpdatableDashboardV2:
-      properties:
-        image:
-          type: string
-        name:
-          type: string
-        schemaVersion:
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesDashboardSpec'
-        tags:
-          items:
-            $ref: '#/components/schemas/TagtypesPostableTag'
-          nullable: true
-          type: array
-      required:
-      - schemaVersion
-      - name
-      - tags
-      - spec
-      type: object
     DashboardtypesUpdatablePublicDashboard:
       properties:
         defaultTimeRange:
@@ -12899,12 +12824,6 @@ paths:
                 - data
                 type: object
           description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
         "401":
           content:
             application/json:
@@ -12957,12 +12876,6 @@ paths:
                 - data
                 type: object
           description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
         "401":
           content:
             application/json:
@@ -12975,12 +12888,6 @@ paths:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
         "500":
           content:
             application/json:
@@ -12995,262 +12902,6 @@ paths:
       summary: Get dashboard (v2)
       tags:
       - dashboard
-    patch:
-      deprecated: false
-      description: 'This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard.
-        The patch is applied against the postable view of the dashboard (metadata,
-        data, tags), so individual panels, queries, variables, layouts, or tags can
-        be updated without re-sending the rest of the dashboard. Apply is lenient:
-        `remove` on a missing path is a no-op (idempotent) and `add` creates any missing
-        parent objects, rather than failing as strict RFC 6902 would. The resulting
-        dashboard is still validated. Locked dashboards are rejected.'
-      operationId: PatchDashboardV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/DashboardtypesPatchableDashboardV2'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Patch dashboard (v2)
-      tags:
-      - dashboard
-    put:
-      deprecated: false
-      description: This endpoint updates a v2-shape dashboard's metadata, data, and
-        tag set. Locked dashboards are rejected.
-      operationId: UpdateDashboardV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/DashboardtypesUpdatableDashboardV2'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Update dashboard (v2)
-      tags:
-      - dashboard
-  /api/v2/dashboards/{id}/lock:
-    delete:
-      deprecated: false
-      description: This endpoint unlocks a v2-shape dashboard. Only the dashboard's
-        creator or an org admin may lock or unlock.
-      operationId: UnlockDashboardV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          content:
-            application/json:
-              schema:
-                type: string
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Unlock dashboard (v2)
-      tags:
-      - dashboard
-    put:
-      deprecated: false
-      description: This endpoint locks a v2-shape dashboard. Only the dashboard's
-        creator or an org admin may lock or unlock.
-      operationId: LockDashboardV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          content:
-            application/json:
-              schema:
-                type: string
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Lock dashboard (v2)
-      tags:
-      - dashboard
   /api/v2/factor_password/forgot:
     post:
       deprecated: false

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -355,32 +355,26 @@ func (module *module) GetService(ctx context.Context, orgID valuer.UUID, service
 
 	var integrationService *cloudintegrationtypes.CloudIntegrationService
 
-	if cloudIntegrationID.IsZero() {
-		return cloudintegrationtypes.NewService(provider, serviceDefinition, nil, nil), nil
+	if !cloudIntegrationID.IsZero() {
+		storedService, err := module.store.GetServiceByServiceID(ctx, cloudIntegrationID, serviceID)
+		if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+			return nil, err
+		}
+		if storedService != nil {
+			serviceConfig, err := cloudintegrationtypes.NewServiceConfigFromJSON(provider, storedService.Config)
+			if err != nil {
+				return nil, err
+			}
+
+			integrationService = cloudintegrationtypes.NewCloudIntegrationServiceFromStorable(storedService, serviceConfig)
+		}
+
+		if err := module.enrichDashboardIDs(ctx, orgID, provider, serviceID, serviceDefinition); err != nil {
+			return nil, err
+		}
 	}
 
-	storedService, err := module.store.GetServiceByServiceID(ctx, cloudIntegrationID, serviceID)
-	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
-		return nil, err
-	}
-	if storedService == nil {
-		return cloudintegrationtypes.NewService(provider, serviceDefinition, nil, nil), nil
-	}
-
-	serviceConfig, err := cloudintegrationtypes.NewServiceConfigFromJSON(provider, storedService.Config)
-	if err != nil {
-		return nil, err
-	}
-
-	integrationService = cloudintegrationtypes.NewCloudIntegrationServiceFromStorable(storedService, serviceConfig)
-
-	slugPrefix := cloudintegrationtypes.CloudIntegrationDashboardSlugPrefix(provider, serviceID)
-	integrationDashboards, err := module.store.ListIntegrationDashboardsBySlugPrefix(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slugPrefix)
-	if err != nil {
-		return nil, err
-	}
-
-	return cloudintegrationtypes.NewService(provider, serviceDefinition, integrationService, integrationDashboards), nil
+	return cloudintegrationtypes.NewService(*serviceDefinition, integrationService), nil
 }
 
 func (module *module) CreateService(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, service *cloudintegrationtypes.CloudIntegrationService, provider cloudintegrationtypes.CloudProviderType) error {
@@ -589,3 +583,20 @@ func (module *module) deprovisionDashboards(ctx context.Context, orgID valuer.UU
 	}
 	return nil
 }
+
+// enrichDashboardIDs replaces the raw dashboard name in each Dashboard.ID with the provisioned UUID.
+// TODO: remove this hack and send idiomatic response to client.
+func (module *module) enrichDashboardIDs(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType, serviceID cloudintegrationtypes.ServiceID, serviceDefinition *cloudintegrationtypes.ServiceDefinition) error {
+	for i, d := range serviceDefinition.Assets.Dashboards {
+		slug := cloudintegrationtypes.CloudIntegrationDashboardSlug(provider, serviceID, d.ID)
+		row, err := module.store.GetIntegrationDashboardBySlug(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slug)
+		if err != nil {
+			if errors.Ast(err, errors.TypeNotFound) {
+				continue
+			}
+			return err
+		}
+		serviceDefinition.Assets.Dashboards[i].ID = row.DashboardID
+	}
+	return nil
+}

ee/modules/dashboard/impldashboard/module.go

@@ -221,18 +221,6 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }
 
-func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
-	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updatable)
-}
-
-func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
-	return module.pkgDashboardModule.PatchV2(ctx, orgID, id, updatedBy, patch)
-}
-
-func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
-	return module.pkgDashboardModule.LockUnlockV2(ctx, orgID, id, updatedBy, isAdmin, lock)
-}
-
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }

frontend/jest.setup.ts

@@ -41,6 +41,15 @@ if (typeof window.IntersectionObserver === 'undefined') {
 	(window as any).IntersectionObserver = IntersectionObserverMock;
 }
 
+if (typeof window.ResizeObserver === 'undefined') {
+	class ResizeObserverMock {
+		observe(): void {}
+		unobserve(): void {}
+		disconnect(): void {}
+	}
+	(window as any).ResizeObserver = ResizeObserverMock;
+}
+
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

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

@@ -21,10 +21,8 @@ import type {
 	CreateDashboardV2201,
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
-	DashboardtypesPatchableDashboardV2DTO,
 	DashboardtypesPostableDashboardV2DTO,
 	DashboardtypesPostablePublicDashboardDTO,
-	DashboardtypesUpdatableDashboardV2DTO,
 	DashboardtypesUpdatablePublicDashboardDTO,
 	DeletePublicDashboardPathParameters,
 	GetDashboardV2200,
@@ -35,13 +33,7 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
-	LockDashboardV2PathParameters,
-	PatchDashboardV2200,
-	PatchDashboardV2PathParameters,
 	RenderErrorResponseDTO,
-	UnlockDashboardV2PathParameters,
-	UpdateDashboardV2200,
-	UpdateDashboardV2PathParameters,
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
@@ -824,360 +816,3 @@ export const invalidateGetDashboardV2 = async (
 
 	return queryClient;
 };
-
-/**
- * This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard. The patch is applied against the postable view of the dashboard (metadata, data, tags), so individual panels, queries, variables, layouts, or tags can be updated without re-sending the rest of the dashboard. Apply is lenient: `remove` on a missing path is a no-op (idempotent) and `add` creates any missing parent objects, rather than failing as strict RFC 6902 would. The resulting dashboard is still validated. Locked dashboards are rejected.
- * @summary Patch dashboard (v2)
- */
-export const patchDashboardV2 = (
-	{ id }: PatchDashboardV2PathParameters,
-	dashboardtypesPatchableDashboardV2DTONull?: BodyType<DashboardtypesPatchableDashboardV2DTO | null> | null,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PatchDashboardV2200>({
-		url: `/api/v2/dashboards/${id}`,
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		data: dashboardtypesPatchableDashboardV2DTONull,
-		signal,
-	});
-};
-
-export const getPatchDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchDashboardV2>>,
-		TError,
-		{
-			pathParams: PatchDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof patchDashboardV2>>,
-	TError,
-	{
-		pathParams: PatchDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
-	},
-	TContext
-> => {
-	const mutationKey = ['patchDashboardV2'];
-	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 patchDashboardV2>>,
-		{
-			pathParams: PatchDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return patchDashboardV2(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PatchDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof patchDashboardV2>>
->;
-export type PatchDashboardV2MutationBody =
-	| BodyType<DashboardtypesPatchableDashboardV2DTO | null>
-	| undefined;
-export type PatchDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Patch dashboard (v2)
- */
-export const usePatchDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchDashboardV2>>,
-		TError,
-		{
-			pathParams: PatchDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof patchDashboardV2>>,
-	TError,
-	{
-		pathParams: PatchDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
-	},
-	TContext
-> => {
-	return useMutation(getPatchDashboardV2MutationOptions(options));
-};
-/**
- * This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.
- * @summary Update dashboard (v2)
- */
-export const updateDashboardV2 = (
-	{ id }: UpdateDashboardV2PathParameters,
-	dashboardtypesUpdatableDashboardV2DTO?: BodyType<DashboardtypesUpdatableDashboardV2DTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<UpdateDashboardV2200>({
-		url: `/api/v2/dashboards/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: dashboardtypesUpdatableDashboardV2DTO,
-		signal,
-	});
-};
-
-export const getUpdateDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateDashboardV2>>,
-		TError,
-		{
-			pathParams: UpdateDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateDashboardV2>>,
-	TError,
-	{
-		pathParams: UpdateDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateDashboardV2'];
-	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 updateDashboardV2>>,
-		{
-			pathParams: UpdateDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateDashboardV2(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateDashboardV2>>
->;
-export type UpdateDashboardV2MutationBody =
-	| BodyType<DashboardtypesUpdatableDashboardV2DTO>
-	| undefined;
-export type UpdateDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update dashboard (v2)
- */
-export const useUpdateDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateDashboardV2>>,
-		TError,
-		{
-			pathParams: UpdateDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateDashboardV2>>,
-	TError,
-	{
-		pathParams: UpdateDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
-	},
-	TContext
-> => {
-	return useMutation(getUpdateDashboardV2MutationOptions(options));
-};
-/**
- * This endpoint unlocks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
- * @summary Unlock dashboard (v2)
- */
-export const unlockDashboardV2 = (
-	{ id }: UnlockDashboardV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v2/dashboards/${id}/lock`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getUnlockDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof unlockDashboardV2>>,
-		TError,
-		{ pathParams: UnlockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof unlockDashboardV2>>,
-	TError,
-	{ pathParams: UnlockDashboardV2PathParameters },
-	TContext
-> => {
-	const mutationKey = ['unlockDashboardV2'];
-	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 unlockDashboardV2>>,
-		{ pathParams: UnlockDashboardV2PathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return unlockDashboardV2(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UnlockDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof unlockDashboardV2>>
->;
-
-export type UnlockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Unlock dashboard (v2)
- */
-export const useUnlockDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof unlockDashboardV2>>,
-		TError,
-		{ pathParams: UnlockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof unlockDashboardV2>>,
-	TError,
-	{ pathParams: UnlockDashboardV2PathParameters },
-	TContext
-> => {
-	return useMutation(getUnlockDashboardV2MutationOptions(options));
-};
-/**
- * This endpoint locks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
- * @summary Lock dashboard (v2)
- */
-export const lockDashboardV2 = (
-	{ id }: LockDashboardV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v2/dashboards/${id}/lock`,
-		method: 'PUT',
-		signal,
-	});
-};
-
-export const getLockDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof lockDashboardV2>>,
-		TError,
-		{ pathParams: LockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof lockDashboardV2>>,
-	TError,
-	{ pathParams: LockDashboardV2PathParameters },
-	TContext
-> => {
-	const mutationKey = ['lockDashboardV2'];
-	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 lockDashboardV2>>,
-		{ pathParams: LockDashboardV2PathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return lockDashboardV2(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type LockDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof lockDashboardV2>>
->;
-
-export type LockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Lock dashboard (v2)
- */
-export const useLockDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof lockDashboardV2>>,
-		TError,
-		{ pathParams: LockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof lockDashboardV2>>,
-	TError,
-	{ pathParams: LockDashboardV2PathParameters },
-	TContext
-> => {
-	return useMutation(getLockDashboardV2MutationOptions(options));
-};

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

@@ -2457,6 +2457,33 @@ export interface CloudintegrationtypesAccountDTO {
 	updatedAt?: string;
 }
 
+export interface DashboardtypesStorableDashboardDataDTO {
+	[key: string]: unknown;
+}
+
+export interface CloudintegrationtypesDashboardDTO {
+	definition?: DashboardtypesStorableDashboardDataDTO;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	id?: string;
+	/**
+	 * @type string
+	 */
+	title?: string;
+}
+
+export interface CloudintegrationtypesAssetsDTO {
+	/**
+	 * @type array,null
+	 */
+	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
+}
+
 export interface CloudintegrationtypesAzureConnectionArtifactDTO {
 	/**
 	 * @type string
@@ -2839,54 +2866,6 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	providerAccountId?: string;
 }
 
-export interface CloudintegrationtypesStorableIntegrationDashboardDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt: string;
-	/**
-	 * @type string
-	 */
-	dashboardId: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	provider: string;
-	/**
-	 * @type string
-	 */
-	slug: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt: string;
-}
-
-export interface CloudintegrationtypesServiceDashboardDTO {
-	/**
-	 * @type string
-	 */
-	description: string;
-	integrationDashboard?: CloudintegrationtypesStorableIntegrationDashboardDTO;
-	/**
-	 * @type string
-	 */
-	title: string;
-}
-
-export interface CloudintegrationtypesServiceAssetsDTO {
-	/**
-	 * @type array
-	 */
-	dashboards: CloudintegrationtypesServiceDashboardDTO[];
-}
-
 export interface CloudintegrationtypesSupportedSignalsDTO {
 	/**
 	 * @type boolean
@@ -2898,8 +2877,13 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 	metrics?: boolean;
 }
 
+export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
+	aws?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
+	azure?: CloudintegrationtypesAzureTelemetryCollectionStrategyDTO;
+}
+
 export interface CloudintegrationtypesServiceDTO {
-	assets: CloudintegrationtypesServiceAssetsDTO;
+	assets: CloudintegrationtypesAssetsDTO;
 	cloudIntegrationService: CloudintegrationtypesCloudIntegrationServiceDTO | null;
 	dataCollected: CloudintegrationtypesDataCollectedDTO;
 	/**
@@ -2915,6 +2899,7 @@ export interface CloudintegrationtypesServiceDTO {
 	 */
 	overview: string;
 	supportedSignals: CloudintegrationtypesSupportedSignalsDTO;
+	telemetryCollectionStrategy: CloudintegrationtypesTelemetryCollectionStrategyDTO;
 	/**
 	 * @type string
 	 */
@@ -3720,10 +3705,6 @@ export interface DashboardtypesCustomVariableSpecDTO {
 	customValue: string;
 }
 
-export interface DashboardtypesStorableDashboardDataDTO {
-	[key: string]: unknown;
-}
-
 export enum DashboardtypesSourceDTO {
 	user = 'user',
 	system = 'system',
@@ -4672,32 +4653,6 @@ export interface DashboardtypesGettablePublicDashboardDataDTO {
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
 }
 
-export enum DashboardtypesPatchOpDTO {
-	add = 'add',
-	remove = 'remove',
-	replace = 'replace',
-	move = 'move',
-	copy = 'copy',
-	test = 'test',
-}
-export interface DashboardtypesJSONPatchOperationDTO {
-	/**
-	 * @type string
-	 * @description Source JSON Pointer for move/copy ops; ignored for other ops.
-	 */
-	from?: string;
-	op: DashboardtypesPatchOpDTO;
-	/**
-	 * @type string
-	 * @description JSON Pointer (RFC 6901) into the dashboard's postable shape — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0, /tags/-.
-	 */
-	path: string;
-	/**
-	 * @description Value to add/replace/test against. The expected type depends on the path. Common shapes (see referenced schemas for the exact field set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable; /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a TagtypesPostableTag; /spec/display/name and other leaf string fields take a string. Required for add/replace/test; ignored for remove/move/copy.
-	 */
-	value?: unknown;
-}
-
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
@@ -4707,13 +4662,6 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
 }
-/**
- * @nullable
- */
-export type DashboardtypesPatchableDashboardV2DTO =
-	| DashboardtypesJSONPatchOperationDTO[]
-	| null;
-
 export interface DashboardtypesPostableDashboardV2DTO {
 	/**
 	 * @type boolean
@@ -4757,26 +4705,6 @@ export enum DashboardtypesQueryPluginKindDTO {
 	'signoz/ClickHouseSQL' = 'signoz/ClickHouseSQL',
 	'signoz/TraceOperator' = 'signoz/TraceOperator',
 }
-export interface DashboardtypesUpdatableDashboardV2DTO {
-	/**
-	 * @type string
-	 */
-	image?: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	schemaVersion: string;
-	spec: DashboardtypesDashboardSpecDTO;
-	/**
-	 * @type array,null
-	 */
-	tags: TagtypesPostableTagDTO[] | null;
-}
-
 export interface DashboardtypesUpdatablePublicDashboardDTO {
 	/**
 	 * @type string
@@ -9548,34 +9476,6 @@ export type GetDashboardV2200 = {
 	status: string;
 };
 
-export type PatchDashboardV2PathParameters = {
-	id: string;
-};
-export type PatchDashboardV2200 = {
-	data: DashboardtypesGettableDashboardV2DTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateDashboardV2PathParameters = {
-	id: string;
-};
-export type UpdateDashboardV2200 = {
-	data: DashboardtypesGettableDashboardV2DTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UnlockDashboardV2PathParameters = {
-	id: string;
-};
-export type LockDashboardV2PathParameters = {
-	id: string;
-};
 export type GetFeatures200 = {
 	/**
 	 * @type array

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef } from 'react';
 import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
-import Legend from 'lib/uPlotV2/components/Legend/Legend';
+import UPlotLegend from 'lib/uPlotV2/components/Legend/UPlotLegend';
 import {
 	LegendPosition,
 	TooltipRenderArgs,
@@ -47,7 +47,7 @@ export default function ChartWrapper({
 				return null;
 			}
 			return (
-				<Legend
+				<UPlotLegend
 					config={config}
 					position={legendConfig.position}
 					averageLegendWidth={averageLegendWidth}

frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.module.scss

@@ -0,0 +1,67 @@
+.pieChartWrapper {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+}
+
+.pieChartNoData {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	font-size: 14px;
+}
+
+// Size is set inline from the computed chart dimensions (mirrors the uPlot
+// chart/legend split); this just centres the donut within that box.
+.pieChartContainer {
+	flex: 0 0 auto;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.pieChartTooltip {
+	padding: 8px 12px;
+	border-radius: 4px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+	background-color: var(--l2-background) !important;
+	border: 1px solid var(--l2-border) !important;
+	z-index: 9999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.pieTooltipContent {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+}
+
+.pieChartIndicator {
+	width: 12px;
+	height: 12px;
+	border-radius: 2px;
+	margin-right: 8px;
+	display: inline-block;
+}
+
+.tooltipValue {
+	font-weight: bold;
+	margin-top: 4px;
+}
+
+// Wraps the shared chart Legend. Its width/height are set inline from the
+// computed chart dimensions, so the VirtuosoGrid inside gets the same bounded
+// box (right column / bottom rows) the uPlot charts use.
+.pieLegend {
+	flex: 0 0 auto;
+	min-height: 0;
+	min-width: 0;
+	padding: 8px;
+}

frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.tsx

@@ -0,0 +1,241 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { Group } from '@visx/group';
+import { Pie as VisxPie } from '@visx/shape';
+import { defaultStyles, useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { useResizeObserver } from 'hooks/useDimensions';
+import Legend from 'lib/uPlotV2/components/Legend/Legend';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+
+import { PieChartProps, PieSlice } from '../types';
+import { calculateChartDimensions } from '../utils';
+
+import PieArc from './PieArc';
+import PieCenterLabel from './PieCenterLabel';
+import styles from './Pie.module.scss';
+import { usePieInteractions } from './usePieInteractions';
+import { getFillColor } from './utils';
+
+interface PieTooltipData {
+	label: string;
+	value: string;
+	color: string;
+}
+
+/**
+ * Donut chart rendered with @visx. Splits its area into chart + legend with the
+ * same `calculateChartDimensions` logic as the uPlot charts (right column /
+ * up-to-two bottom rows), renders the shared chart Legend, and delegates the
+ * arcs, centre total and interaction state to PieArc / PieCenterLabel /
+ * usePieInteractions. Pure presentation — slices are pre-resolved by the caller.
+ */
+export default function Pie({
+	data,
+	yAxisUnit,
+	decimalPrecision,
+	isDarkMode,
+	position = LegendPosition.BOTTOM,
+	id,
+	onSliceClick,
+	'data-testid': testId,
+}: PieChartProps): JSX.Element {
+	const {
+		active,
+		setActive,
+		visibleData,
+		legendItems,
+		focusedSeriesIndex,
+		onLegendClick,
+		onLegendMouseMove,
+		onLegendMouseLeave,
+	} = usePieInteractions(data, id);
+
+	const {
+		tooltipOpen,
+		tooltipLeft,
+		tooltipTop,
+		tooltipData,
+		hideTooltip,
+		showTooltip,
+	} = useTooltip<PieTooltipData>();
+
+	const { containerRef, TooltipInPortal } = useTooltipInPortal({
+		scroll: true,
+		detectBounds: true,
+	});
+
+	const wrapperRef = useRef<HTMLDivElement>(null);
+	const { width: containerWidth, height: containerHeight } =
+		useResizeObserver(wrapperRef);
+
+	// Reuse the uPlot chart/legend split so the donut + legend get the same area
+	// allocation (right column, or up-to-two bottom rows) as every other panel.
+	const dimensions = useMemo(
+		() =>
+			calculateChartDimensions({
+				containerWidth,
+				containerHeight,
+				legendConfig: { position },
+				seriesLabels: data.map((slice) => slice.label),
+			}),
+		[containerWidth, containerHeight, position, data],
+	);
+
+	const size = Math.min(dimensions.width, dimensions.height);
+	const radius = size * 0.35;
+	const innerRadius = radius * 0.6;
+	const totalValue = visibleData.reduce((sum, slice) => sum + slice.value, 0);
+	const labelColor = isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400;
+	const activeColor = active?.color ?? null;
+
+	const handleSliceEnter = useCallback(
+		(slice: PieSlice, centroidX: number, centroidY: number): void => {
+			showTooltip({
+				tooltipData: {
+					label: slice.label,
+					value: getYAxisFormattedValue(
+						slice.value.toString(),
+						yAxisUnit || 'none',
+						decimalPrecision,
+					),
+					color: slice.color,
+				},
+				tooltipTop: centroidY + dimensions.height / 2,
+				tooltipLeft: centroidX + dimensions.width / 2,
+			});
+			setActive(slice);
+		},
+		[
+			showTooltip,
+			setActive,
+			yAxisUnit,
+			decimalPrecision,
+			dimensions.height,
+			dimensions.width,
+		],
+	);
+
+	const handleSliceLeave = useCallback((): void => {
+		hideTooltip();
+		setActive(null);
+	}, [hideTooltip, setActive]);
+
+	if (!data.length) {
+		return (
+			<div
+				ref={wrapperRef}
+				className={styles.pieChartWrapper}
+				data-testid={testId}
+			>
+				<div className={styles.pieChartNoData}>No data</div>
+			</div>
+		);
+	}
+
+	const isRightLegend = position === LegendPosition.RIGHT;
+
+	return (
+		<div
+			ref={wrapperRef}
+			className={styles.pieChartWrapper}
+			style={{ flexDirection: isRightLegend ? 'row' : 'column' }}
+			data-testid={testId}
+		>
+			<div
+				className={styles.pieChartContainer}
+				style={{ width: dimensions.width, height: dimensions.height }}
+			>
+				{size > 0 && (
+					<svg
+						width={dimensions.width}
+						height={dimensions.height}
+						ref={containerRef}
+					>
+						<Group top={dimensions.height / 2} left={dimensions.width / 2}>
+							<VisxPie
+								data={visibleData}
+								pieValue={(slice: PieSlice): number => slice.value}
+								outerRadius={radius}
+								innerRadius={innerRadius}
+								padAngle={0.01}
+								cornerRadius={3}
+								width={size}
+								height={size}
+							>
+								{(pie): JSX.Element[] =>
+									pie.arcs.map((arc) => (
+										<PieArc
+											key={`arc-${arc.data.label}-${arc.data.value}-${arc.startAngle.toFixed(
+												6,
+											)}`}
+											slice={arc.data}
+											arcPath={pie.path(arc) || ''}
+											centroid={pie.path.centroid(arc)}
+											startAngle={arc.startAngle}
+											endAngle={arc.endAngle}
+											radius={radius}
+											totalValue={totalValue}
+											yAxisUnit={yAxisUnit}
+											decimalPrecision={decimalPrecision}
+											labelColor={labelColor}
+											fill={getFillColor(arc.data.color, activeColor)}
+											onEnter={handleSliceEnter}
+											onLeave={handleSliceLeave}
+											onClick={onSliceClick}
+										/>
+									))
+								}
+							</VisxPie>
+							<PieCenterLabel
+								total={totalValue}
+								yAxisUnit={yAxisUnit}
+								decimalPrecision={decimalPrecision}
+								radius={radius}
+								innerRadius={innerRadius}
+								color={labelColor}
+							/>
+						</Group>
+					</svg>
+				)}
+				{tooltipOpen && tooltipData && (
+					<TooltipInPortal
+						top={tooltipTop}
+						left={tooltipLeft}
+						className={styles.pieChartTooltip}
+						style={{
+							...defaultStyles,
+							color: labelColor,
+						}}
+					>
+						<div
+							className={styles.pieChartIndicator}
+							style={{ background: tooltipData.color }}
+						/>
+						<div className={styles.pieTooltipContent}>
+							<span>{tooltipData.label}</span>
+							<span className={styles.tooltipValue}>{tooltipData.value}</span>
+						</div>
+					</TooltipInPortal>
+				)}
+			</div>
+			<div
+				className={styles.pieLegend}
+				style={{
+					width: dimensions.legendWidth,
+					height: dimensions.legendHeight,
+				}}
+			>
+				<Legend
+					items={legendItems}
+					position={position}
+					averageLegendWidth={dimensions.averageLegendWidth}
+					focusedSeriesIndex={focusedSeriesIndex}
+					onClick={onLegendClick}
+					onMouseMove={onLegendMouseMove}
+					onMouseLeave={onLegendMouseLeave}
+				/>
+			</div>
+		</div>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/Pie/PieArc.tsx

@@ -0,0 +1,123 @@
+import type { PrecisionOption } from 'components/Graph/types';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+
+import { PieSlice } from '../types';
+
+import { getArcGeometry } from './utils';
+
+// Slices below this share of the total don't get a leader label (too cramped).
+const MIN_LABEL_SHARE = 0.03;
+const MAX_LABEL_LENGTH = 15;
+
+interface PieArcProps {
+	slice: PieSlice;
+	/** SVG path `d` for the arc, from the visx pie generator. */
+	arcPath: string;
+	/** Arc centroid `[x, y]`, used to anchor the leader line and tooltip. */
+	centroid: [number, number];
+	startAngle: number;
+	endAngle: number;
+	radius: number;
+	/** Sum of visible slice values — drives the show-label threshold. */
+	totalValue: number;
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
+	labelColor: string;
+	/** Resolved fill (already dimmed if another slice is active). */
+	fill: string;
+	onEnter: (slice: PieSlice, centroidX: number, centroidY: number) => void;
+	onLeave: () => void;
+	onClick?: (slice: PieSlice) => void;
+}
+
+/**
+ * A single donut slice: the arc path plus, for non-tiny slices, a leader line
+ * out to an external label + value. Pure presentation — interaction is
+ * delegated to the `onEnter`/`onLeave`/`onClick` callbacks.
+ */
+export default function PieArc({
+	slice,
+	arcPath,
+	centroid,
+	startAngle,
+	endAngle,
+	radius,
+	totalValue,
+	yAxisUnit,
+	decimalPrecision,
+	labelColor,
+	fill,
+	onEnter,
+	onLeave,
+	onClick,
+}: PieArcProps): JSX.Element {
+	const { label, value } = slice;
+	const [centroidX, centroidY] = centroid;
+	const { labelX, labelY, lineEndX, lineEndY, textAnchor } = getArcGeometry(
+		startAngle,
+		endAngle,
+		radius,
+	);
+
+	const displayValue = getYAxisFormattedValue(
+		value.toString(),
+		yAxisUnit || 'none',
+		decimalPrecision,
+	);
+	const shortenedLabel =
+		label.length > MAX_LABEL_LENGTH ? `${label.substring(0, 12)}...` : label;
+	const shouldShowLabel = value / totalValue > MIN_LABEL_SHARE;
+
+	return (
+		<g
+			onMouseEnter={(): void => onEnter(slice, centroidX, centroidY)}
+			onMouseLeave={onLeave}
+			onClick={(): void => onClick?.(slice)}
+		>
+			<path d={arcPath} fill={fill} />
+			{shouldShowLabel && (
+				<>
+					<line
+						x1={centroidX}
+						y1={centroidY}
+						x2={lineEndX}
+						y2={lineEndY}
+						stroke={labelColor}
+						strokeWidth={1}
+					/>
+					<line
+						x1={lineEndX}
+						y1={lineEndY}
+						x2={labelX}
+						y2={labelY}
+						stroke={labelColor}
+						strokeWidth={1}
+					/>
+					<text
+						x={labelX}
+						y={labelY - 8}
+						dy=".33em"
+						fill={labelColor}
+						fontSize={10}
+						textAnchor={textAnchor}
+						pointerEvents="none"
+					>
+						{shortenedLabel}
+					</text>
+					<text
+						x={labelX}
+						y={labelY + 8}
+						dy=".33em"
+						fill={labelColor}
+						fontSize={10}
+						fontWeight="bold"
+						textAnchor={textAnchor}
+						pointerEvents="none"
+					>
+						{displayValue}
+					</text>
+				</>
+			)}
+		</g>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/Pie/PieCenterLabel.tsx

@@ -0,0 +1,57 @@
+import type { PrecisionOption } from 'components/Graph/types';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+
+import { getScaledFontSize } from './utils';
+
+interface PieCenterLabelProps {
+	/** Sum of the visible slice values, shown in the donut hole. */
+	total: number;
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
+	radius: number;
+	innerRadius: number;
+	color: string;
+}
+
+/**
+ * The total shown in the centre of the donut. Splits the formatted value into
+ * its numeric part and unit so each can be sized independently, and scales the
+ * numeric font down for long values so it never overflows the hole.
+ */
+export default function PieCenterLabel({
+	total,
+	yAxisUnit,
+	decimalPrecision,
+	radius,
+	innerRadius,
+	color,
+}: PieCenterLabelProps): JSX.Element {
+	const formattedTotal = getYAxisFormattedValue(
+		total.toString(),
+		yAxisUnit || 'none',
+		decimalPrecision,
+	);
+	const matches = formattedTotal.match(/([\d.]+[KMB]?)(.*)$/);
+	const numericTotal = matches?.[1] || formattedTotal;
+	const unitTotal = matches?.[2]?.trim() || '';
+
+	const numericFontSize = getScaledFontSize({
+		text: numericTotal,
+		baseSize: radius * 0.3,
+		innerRadius,
+	});
+	const unitFontSize = numericFontSize * 0.5;
+
+	return (
+		<text textAnchor="middle" dominantBaseline="central" fill={color}>
+			<tspan fontSize={numericFontSize} fontWeight="bold">
+				{numericTotal}
+			</tspan>
+			{unitTotal && (
+				<tspan fontSize={unitFontSize} opacity={0.9} dx={2}>
+					{unitTotal}
+				</tspan>
+			)}
+		</text>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/Pie.test.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { LegendItem } from 'lib/uPlotV2/config/types';
+
+import { PieSlice } from '../../types';
+import Pie from '../Pie';
+
+jest.mock('hooks/useDimensions', () => ({
+	useResizeObserver: jest.fn().mockReturnValue({ width: 400, height: 300 }),
+}));
+
+jest.mock('components/Graph/yAxisConfig', () => ({
+	getYAxisFormattedValue: jest.fn((value: string) => value),
+}));
+
+// VirtuosoGrid only renders a window in jsdom; render every item so we can
+// assert on legend entries.
+jest.mock('react-virtuoso', () => ({
+	VirtuosoGrid: ({
+		data,
+		itemContent,
+	}: {
+		data: LegendItem[];
+		itemContent: (index: number, item: LegendItem) => React.ReactNode;
+	}): JSX.Element => (
+		<div data-testid="virtuoso-grid">
+			{data.map((item, index) => (
+				<div key={item.seriesIndex ?? index}>{itemContent(index, item)}</div>
+			))}
+		</div>
+	),
+}));
+
+const DATA: PieSlice[] = [
+	{ label: 'frontend', value: 100, color: '#aa0000' },
+	{ label: 'cart', value: 60, color: '#00aa00' },
+	{ label: 'checkout', value: 40, color: '#0000aa' },
+];
+
+function renderPie(
+	props: Partial<React.ComponentProps<typeof Pie>> = {},
+): void {
+	render(
+		<TooltipProvider>
+			<Pie data={DATA} isDarkMode={false} data-testid="pie" {...props} />
+		</TooltipProvider>,
+	);
+}
+
+describe('Pie', () => {
+	it('renders the "No data" state for empty data', () => {
+		render(
+			<TooltipProvider>
+				<Pie data={[]} isDarkMode={false} data-testid="pie" />
+			</TooltipProvider>,
+		);
+		expect(screen.getByText('No data')).toBeInTheDocument();
+	});
+
+	it('renders one arc per slice plus the legend entries and centre total', () => {
+		renderPie();
+
+		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
+		expect(svg.querySelectorAll('path')).toHaveLength(DATA.length);
+
+		const legend = screen.getByTestId('virtuoso-grid');
+		expect(within(legend).getByText('frontend')).toBeInTheDocument();
+		expect(within(legend).getByText('cart')).toBeInTheDocument();
+		expect(within(legend).getByText('checkout')).toBeInTheDocument();
+
+		// Centre total = 100 + 60 + 40 (formatter mocked to echo the value).
+		expect(screen.getByText('200')).toBeInTheDocument();
+	});
+
+	it('lays the legend out in a row for the right position and a column for bottom', () => {
+		const { rerender } = render(
+			<TooltipProvider>
+				<Pie
+					data={DATA}
+					isDarkMode={false}
+					position={LegendPosition.RIGHT}
+					data-testid="pie"
+				/>
+			</TooltipProvider>,
+		);
+		expect(screen.getByTestId('pie')).toHaveStyle({ flexDirection: 'row' });
+
+		rerender(
+			<TooltipProvider>
+				<Pie
+					data={DATA}
+					isDarkMode={false}
+					position={LegendPosition.BOTTOM}
+					data-testid="pie"
+				/>
+			</TooltipProvider>,
+		);
+		expect(screen.getByTestId('pie')).toHaveStyle({ flexDirection: 'column' });
+	});
+
+	it('hides a slice when its legend marker is clicked', () => {
+		renderPie();
+		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
+		expect(svg.querySelectorAll('path')).toHaveLength(3);
+
+		const marker = document.querySelector(
+			'[data-legend-item-id="1"] [data-is-legend-marker="true"]',
+		) as HTMLElement;
+		fireEvent.click(marker);
+
+		// One slice hidden → one fewer arc drawn.
+		expect(svg.querySelectorAll('path')).toHaveLength(2);
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/PieArc.test.tsx

@@ -0,0 +1,85 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { PieSlice } from '../../types';
+import PieArc from '../PieArc';
+
+jest.mock('components/Graph/yAxisConfig', () => ({
+	// Echo the raw value so assertions are deterministic.
+	getYAxisFormattedValue: jest.fn((value: string) => value),
+}));
+
+const SLICE: PieSlice = { label: 'frontend', value: 50, color: '#f00' };
+
+function renderArc(props: Partial<React.ComponentProps<typeof PieArc>> = {}): {
+	onEnter: jest.Mock;
+	onLeave: jest.Mock;
+	onClick: jest.Mock;
+	container: HTMLElement;
+} {
+	const onEnter = jest.fn();
+	const onLeave = jest.fn();
+	const onClick = jest.fn();
+	const { container } = render(
+		<svg>
+			<PieArc
+				slice={SLICE}
+				arcPath="M0,0L1,1"
+				centroid={[10, 20]}
+				startAngle={0}
+				endAngle={Math.PI}
+				radius={100}
+				totalValue={100}
+				labelColor="#fff"
+				fill="#f00"
+				onEnter={onEnter}
+				onLeave={onLeave}
+				onClick={onClick}
+				{...props}
+			/>
+		</svg>,
+	);
+	return { onEnter, onLeave, onClick, container };
+}
+
+describe('PieArc', () => {
+	it('renders the arc path with the resolved fill', () => {
+		const { container } = renderArc();
+		const path = container.querySelector('path');
+		expect(path).toHaveAttribute('d', 'M0,0L1,1');
+		expect(path).toHaveAttribute('fill', '#f00');
+	});
+
+	it('shows the leader label + value for a slice above the threshold', () => {
+		renderArc(); // 50 / 100 = 0.5
+		expect(screen.getByText('frontend')).toBeInTheDocument();
+		expect(screen.getByText('50')).toBeInTheDocument();
+	});
+
+	it('hides the leader label for a slice below the 3% threshold', () => {
+		renderArc({ totalValue: 10000 }); // 50 / 10000 = 0.005
+		expect(screen.queryByText('frontend')).not.toBeInTheDocument();
+		// the arc path itself still renders
+		expect(screen.queryByText('50')).not.toBeInTheDocument();
+	});
+
+	it('truncates labels longer than 15 chars', () => {
+		renderArc({
+			slice: { label: 'a-really-long-service-name', value: 50, color: '#f00' },
+		});
+		expect(screen.getByText('a-really-lon...')).toBeInTheDocument();
+	});
+
+	it('fires onEnter with the slice + centroid, and onLeave / onClick', () => {
+		const { onEnter, onLeave, onClick, container } = renderArc();
+		const g = container.querySelector('g') as SVGGElement;
+
+		fireEvent.mouseEnter(g);
+		expect(onEnter).toHaveBeenCalledWith(SLICE, 10, 20);
+
+		fireEvent.mouseLeave(g);
+		expect(onLeave).toHaveBeenCalledTimes(1);
+
+		fireEvent.click(g);
+		expect(onClick).toHaveBeenCalledWith(SLICE);
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/PieCenterLabel.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+
+import PieCenterLabel from '../PieCenterLabel';
+
+jest.mock('components/Graph/yAxisConfig', () => ({
+	getYAxisFormattedValue: jest.fn(),
+}));
+
+const mockFormat = getYAxisFormattedValue as jest.MockedFunction<
+	typeof getYAxisFormattedValue
+>;
+
+function renderInSvg(node: JSX.Element): ReturnType<typeof render> {
+	// PieCenterLabel returns an SVG <text>, so it needs an <svg> host.
+	return render(<svg>{node}</svg>);
+}
+
+describe('PieCenterLabel', () => {
+	const baseProps = {
+		total: 3700,
+		radius: 100,
+		innerRadius: 60,
+		color: '#fff',
+	};
+
+	it('renders the formatted total (numeric + unit suffix) as one numeric tspan when there is no separate unit', () => {
+		mockFormat.mockReturnValue('3.7K');
+		renderInSvg(<PieCenterLabel {...baseProps} />);
+		expect(screen.getByText('3.7K')).toBeInTheDocument();
+	});
+
+	it('splits the numeric part and the trailing unit into separate tspans', () => {
+		mockFormat.mockReturnValue('1.2 MB');
+		renderInSvg(<PieCenterLabel {...baseProps} />);
+		expect(screen.getByText('1.2')).toBeInTheDocument();
+		expect(screen.getByText('MB')).toBeInTheDocument();
+	});
+
+	it('passes the unit + precision through to the formatter', () => {
+		mockFormat.mockReturnValue('100');
+		renderInSvg(<PieCenterLabel {...baseProps} total={100} yAxisUnit="bytes" />);
+		expect(mockFormat).toHaveBeenCalledWith('100', 'bytes', undefined);
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/usePieInteractions.test.tsx

@@ -0,0 +1,147 @@
+import { act, renderHook } from '@testing-library/react';
+import {
+	getStoredSeriesVisibility,
+	updateSeriesVisibilityToLocalStorage,
+} from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
+import type { MouseEvent } from 'react';
+
+import { PieSlice } from '../../types';
+import { usePieInteractions } from '../usePieInteractions';
+
+jest.mock(
+	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
+);
+
+const mockGetStored = getStoredSeriesVisibility as jest.MockedFunction<
+	typeof getStoredSeriesVisibility
+>;
+const mockUpdateStored =
+	updateSeriesVisibilityToLocalStorage as jest.MockedFunction<
+		typeof updateSeriesVisibilityToLocalStorage
+	>;
+
+const DATA: PieSlice[] = [
+	{ label: 'frontend', value: 100, color: '#a' },
+	{ label: 'cart', value: 60, color: '#b' },
+	{ label: 'checkout', value: 40, color: '#c' },
+];
+
+// Builds a fake legend click/move event: `e.target.closest('[data-legend-item-id]')`
+// resolves to the item at `index`, and `e.target.dataset.isLegendMarker` flags marker clicks.
+function legendEvent(
+	index: number | null,
+	isMarker = false,
+): MouseEvent<HTMLDivElement> {
+	const itemEl =
+		index == null ? null : { dataset: { legendItemId: String(index) } };
+	return {
+		target: {
+			closest: (): unknown => itemEl,
+			dataset: { isLegendMarker: isMarker ? 'true' : undefined },
+		},
+	} as unknown as MouseEvent<HTMLDivElement>;
+}
+
+describe('usePieInteractions', () => {
+	beforeEach(() => {
+		mockGetStored.mockReturnValue(null);
+		mockUpdateStored.mockReset();
+	});
+
+	it('starts with everything visible and nothing focused', () => {
+		const { result } = renderHook(() => usePieInteractions(DATA));
+
+		expect(result.current.visibleData).toStrictEqual(DATA);
+		expect(result.current.legendItems.map((i) => i.show)).toStrictEqual([
+			true,
+			true,
+			true,
+		]);
+		expect(result.current.focusedSeriesIndex).toBeNull();
+		expect(result.current.active).toBeNull();
+	});
+
+	describe('marker click (toggle one)', () => {
+		it('hides then unhides the clicked slice', () => {
+			const { result } = renderHook(() => usePieInteractions(DATA, 'panel-1'));
+
+			act(() => result.current.onLegendClick(legendEvent(1, true)));
+
+			expect(result.current.visibleData).toStrictEqual([DATA[0], DATA[2]]);
+			expect(result.current.legendItems[1].show).toBe(false);
+			expect(mockUpdateStored).toHaveBeenLastCalledWith('panel-1', [
+				{ label: 'frontend', show: true },
+				{ label: 'cart', show: false },
+				{ label: 'checkout', show: true },
+			]);
+
+			act(() => result.current.onLegendClick(legendEvent(1, true)));
+
+			expect(result.current.visibleData).toStrictEqual(DATA);
+			expect(result.current.legendItems[1].show).toBe(true);
+		});
+	});
+
+	describe('label click (isolate / reset)', () => {
+		it('isolates the clicked slice, then resets on a second click', () => {
+			const { result } = renderHook(() => usePieInteractions(DATA));
+
+			act(() => result.current.onLegendClick(legendEvent(0, false)));
+
+			expect(result.current.visibleData).toStrictEqual([DATA[0]]);
+			expect(result.current.legendItems.map((i) => i.show)).toStrictEqual([
+				true,
+				false,
+				false,
+			]);
+
+			act(() => result.current.onLegendClick(legendEvent(0, false)));
+
+			expect(result.current.visibleData).toStrictEqual(DATA);
+		});
+	});
+
+	describe('hover', () => {
+		it('focuses the hovered slice and clears on leave', () => {
+			const { result } = renderHook(() => usePieInteractions(DATA));
+
+			act(() => result.current.onLegendMouseMove(legendEvent(2)));
+			expect(result.current.active).toStrictEqual(DATA[2]);
+			expect(result.current.focusedSeriesIndex).toBe(2);
+
+			act(() => result.current.onLegendMouseLeave());
+			expect(result.current.active).toBeNull();
+			expect(result.current.focusedSeriesIndex).toBeNull();
+		});
+
+		it('does not focus a hidden slice', () => {
+			const { result } = renderHook(() => usePieInteractions(DATA));
+
+			act(() => result.current.onLegendClick(legendEvent(1, true))); // hide cart
+			act(() => result.current.onLegendMouseMove(legendEvent(1)));
+
+			expect(result.current.active).toBeNull();
+		});
+	});
+
+	describe('persistence', () => {
+		it('does not write to storage when no id is provided', () => {
+			const { result } = renderHook(() => usePieInteractions(DATA));
+			act(() => result.current.onLegendClick(legendEvent(0, true)));
+			expect(mockUpdateStored).not.toHaveBeenCalled();
+		});
+
+		it('rehydrates hidden slices from storage on mount (matched by label)', () => {
+			mockGetStored.mockReturnValue([
+				{ label: 'frontend', show: true },
+				{ label: 'cart', show: false },
+				{ label: 'checkout', show: true },
+			]);
+
+			const { result } = renderHook(() => usePieInteractions(DATA, 'panel-1'));
+
+			expect(result.current.visibleData).toStrictEqual([DATA[0], DATA[2]]);
+			expect(result.current.legendItems[1].show).toBe(false);
+		});
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/utils.test.ts

@@ -0,0 +1,101 @@
+import {
+	getArcGeometry,
+	getFillColor,
+	getScaledFontSize,
+	lightenColor,
+} from '../utils';
+
+describe('Pie utils', () => {
+	describe('getScaledFontSize', () => {
+		it('returns the base size for empty text', () => {
+			expect(getScaledFontSize({ text: '', baseSize: 30, innerRadius: 100 })).toBe(
+				30,
+			);
+		});
+
+		it('does not scale short text (length <= 3)', () => {
+			// scaleFactor = max(0.3, 1) = 1 → baseSize, capped by innerRadius * 0.9.
+			expect(
+				getScaledFontSize({ text: '3.7', baseSize: 30, innerRadius: 100 }),
+			).toBe(30);
+		});
+
+		it('scales longer text down', () => {
+			// length 8 → scaleFactor = max(0.3, 1 - 5 * 0.09) = 0.55 → 30 * 0.55.
+			expect(
+				getScaledFontSize({ text: '12345678', baseSize: 30, innerRadius: 100 }),
+			).toBeCloseTo(16.5);
+		});
+
+		it('floors the scale factor at 0.3 for very long text', () => {
+			// length 20 → 1 - 17 * 0.09 < 0.3 → floored to 0.3 → 100 * 0.3.
+			expect(
+				getScaledFontSize({
+					text: '12345678901234567890',
+					baseSize: 100,
+					innerRadius: 1000,
+				}),
+			).toBeCloseTo(30);
+		});
+
+		it('caps the size at 90% of the inner radius', () => {
+			expect(
+				getScaledFontSize({ text: '3.7', baseSize: 200, innerRadius: 10 }),
+			).toBeCloseTo(9);
+		});
+	});
+
+	describe('getArcGeometry', () => {
+		it('places the label below for a slice centred at the top (angle 0)', () => {
+			const g = getArcGeometry(0, 0, 100);
+			expect(g.labelX).toBeCloseTo(0);
+			expect(g.labelY).toBeCloseTo(-130);
+			expect(g.lineEndX).toBeCloseTo(0);
+			expect(g.lineEndY).toBeCloseTo(-110);
+			// sin(0) is not > 0 → anchor end.
+			expect(g.textAnchor).toBe('end');
+		});
+
+		it('anchors to the start on the right half (angle pi/2)', () => {
+			const g = getArcGeometry(0, Math.PI, 100);
+			expect(g.labelX).toBeCloseTo(130);
+			expect(g.labelY).toBeCloseTo(0);
+			expect(g.textAnchor).toBe('start');
+		});
+
+		it('anchors to the end on the left half (angle 3pi/2)', () => {
+			const g = getArcGeometry(Math.PI, 2 * Math.PI, 100);
+			expect(g.labelX).toBeCloseTo(-130);
+			expect(g.textAnchor).toBe('end');
+		});
+	});
+
+	describe('lightenColor', () => {
+		it('converts a #rrggbb hex to rgba at the given opacity', () => {
+			expect(lightenColor('#ff0000', 0.4)).toBe('rgba(255, 0, 0, 0.4)');
+		});
+
+		it('accepts hex without a leading #', () => {
+			expect(lightenColor('00ff00', 0.4)).toBe('rgba(0, 255, 0, 0.4)');
+		});
+
+		it('returns the original colour when it is not parseable hex', () => {
+			expect(lightenColor('rgba(0,0,0,1)', 0.4)).toBe('rgba(0,0,0,1)');
+			expect(lightenColor('red', 0.4)).toBe('red');
+		});
+	});
+
+	describe('getFillColor', () => {
+		it('returns the colour unchanged when nothing is active', () => {
+			expect(getFillColor('#ff0000', null)).toBe('#ff0000');
+		});
+
+		it('returns the colour unchanged for the active slice', () => {
+			expect(getFillColor('#ff0000', '#ff0000')).toBe('#ff0000');
+		});
+
+		it('dims non-active slices to 40% opacity', () => {
+			expect(getFillColor('#00ff00', '#ff0000')).toBe('rgba(0, 255, 0, 0.4)');
+		});
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/Pie/usePieInteractions.ts

@@ -0,0 +1,168 @@
+import { LegendItem } from 'lib/uPlotV2/config/types';
+import type { Dispatch, MouseEvent, SetStateAction } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import {
+	getStoredSeriesVisibility,
+	updateSeriesVisibilityToLocalStorage,
+} from '../../panels/utils/legendVisibilityUtils';
+import { PieSlice } from '../types';
+
+export interface UsePieInteractionsResult {
+	/** The hovered/focused slice (drives donut dimming + tooltip). */
+	active: PieSlice | null;
+	setActive: Dispatch<SetStateAction<PieSlice | null>>;
+	/** Slices currently shown (hidden ones removed). */
+	visibleData: PieSlice[];
+	/** Legend item per slice (`show` reflects hide state). */
+	legendItems: LegendItem[];
+	/** Index of the active slice for the legend's focus highlight, or null. */
+	focusedSeriesIndex: number | null;
+	onLegendClick: (e: MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseMove: (e: MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseLeave: () => void;
+}
+
+// Reads the slice index off the nearest `[data-legend-item-id]` ancestor of the
+// event target (the shared Legend tags each item with its seriesIndex).
+function getLegendIndex(e: MouseEvent<HTMLDivElement>): number | null {
+	const el = (e.target as HTMLElement | null)?.closest<HTMLElement>(
+		'[data-legend-item-id]',
+	);
+	const id = el?.dataset.legendItemId;
+	return id != null ? Number(id) : null;
+}
+
+/**
+ * Pie interaction + derived state: hover/focus, slice hide/unhide (mirroring the
+ * uPlot legend — marker toggles one, label isolates), and persistence of the
+ * hidden set to localStorage (keyed by `id`, matched by label) so it survives
+ * reloads. Returns the visible slices, legend items, focus index, and the
+ * legend container handlers.
+ */
+export function usePieInteractions(
+	data: PieSlice[],
+	id?: string,
+): UsePieInteractionsResult {
+	const [active, setActive] = useState<PieSlice | null>(null);
+	const [hiddenIndices, setHiddenIndices] = useState<Set<number>>(
+		() => new Set(),
+	);
+	const isolatedIndexRef = useRef<number | null>(null);
+
+	const legendItems = useMemo<LegendItem[]>(
+		() =>
+			data.map((slice, index) => ({
+				seriesIndex: index,
+				label: slice.label,
+				color: slice.color,
+				show: !hiddenIndices.has(index),
+			})),
+		[data, hiddenIndices],
+	);
+
+	// Hidden slices drop out so the remaining arcs + centre total recompute.
+	const visibleData = useMemo(
+		() => data.filter((_, index) => !hiddenIndices.has(index)),
+		[data, hiddenIndices],
+	);
+
+	// Rehydrate hide/unhide from localStorage (matched by label) whenever the
+	// data set changes — including first load and every refetch, since the store
+	// is the source of truth and toggles write back to it.
+	useEffect(() => {
+		if (!id || !data.length) {
+			return;
+		}
+		const stored = getStoredSeriesVisibility(id);
+		if (!stored) {
+			return;
+		}
+		const hidden = new Set<number>();
+		data.forEach((slice, index) => {
+			if (stored.find((s) => s.label === slice.label)?.show === false) {
+				hidden.add(index);
+			}
+		});
+		setHiddenIndices(hidden);
+	}, [id, data]);
+
+	// Apply a new hidden set and persist it (label + show) to localStorage.
+	const applyHidden = useCallback(
+		(hidden: Set<number>): void => {
+			setHiddenIndices(hidden);
+			if (id) {
+				updateSeriesVisibilityToLocalStorage(
+					id,
+					data.map((slice, index) => ({
+						label: slice.label,
+						show: !hidden.has(index),
+					})),
+				);
+			}
+		},
+		[id, data],
+	);
+
+	const onLegendMouseMove = useCallback(
+		(e: MouseEvent<HTMLDivElement>): void => {
+			const index = getLegendIndex(e);
+			// Don't focus/dim for hidden slices — they aren't on the donut.
+			setActive(index != null && !hiddenIndices.has(index) ? data[index] : null);
+		},
+		[data, hiddenIndices],
+	);
+
+	// Marker click toggles just that slice on/off; label click isolates it
+	// (clicking the isolated one again resets to all) — mirrors the uPlot legend.
+	const onLegendClick = useCallback(
+		(e: MouseEvent<HTMLDivElement>): void => {
+			const index = getLegendIndex(e);
+			if (index == null) {
+				return;
+			}
+			const isMarker = (e.target as HTMLElement).dataset.isLegendMarker;
+
+			if (isMarker) {
+				const next = new Set(hiddenIndices);
+				if (next.has(index)) {
+					next.delete(index);
+				} else {
+					next.add(index);
+				}
+				applyHidden(next);
+				return;
+			}
+
+			const isReset = isolatedIndexRef.current === index;
+			isolatedIndexRef.current = isReset ? null : index;
+			if (isReset) {
+				applyHidden(new Set());
+				return;
+			}
+			const next = new Set<number>();
+			data.forEach((_, i) => {
+				if (i !== index) {
+					next.add(i);
+				}
+			});
+			applyHidden(next);
+		},
+		[data, hiddenIndices, applyHidden],
+	);
+
+	const onLegendMouseLeave = useCallback((): void => setActive(null), []);
+
+	const focusedIndex = active ? data.indexOf(active) : -1;
+
+	return {
+		active,
+		setActive,
+		visibleData,
+		legendItems,
+		focusedSeriesIndex: focusedIndex >= 0 ? focusedIndex : null,
+		onLegendClick,
+		onLegendMouseMove,
+		onLegendMouseLeave,
+	};
+}

frontend/src/container/DashboardContainer/visualization/charts/Pie/utils.ts

@@ -0,0 +1,110 @@
+/**
+ * Pure presentation helpers for the Pie chart. Kept out of the component file
+ * so the renderer stays declarative (per the one-component-per-file rule).
+ */
+
+interface ScaledFontSizeArgs {
+	text: string;
+	baseSize: number;
+	innerRadius: number;
+}
+
+/**
+ * Shrinks the centre-total font as the text gets longer so it never overflows
+ * the donut hole. Ported from the V1 PiePanelWrapper.
+ */
+export function getScaledFontSize({
+	text,
+	baseSize,
+	innerRadius,
+}: ScaledFontSizeArgs): number {
+	if (!text) {
+		return baseSize;
+	}
+
+	const { length } = text;
+	// More aggressive scaling for very long numbers.
+	const scaleFactor = Math.max(0.3, 1 - (length - 3) * 0.09);
+	// Don't use more than 90% of the inner radius.
+	const maxSize = innerRadius * 0.9;
+
+	return Math.min(baseSize * scaleFactor, maxSize);
+}
+
+export interface ArcGeometry {
+	/** Outer point where the leader label sits. */
+	labelX: number;
+	labelY: number;
+	/** Elbow point where the leader line bends toward the label. */
+	lineEndX: number;
+	lineEndY: number;
+	/** Anchor the label left/right depending on which half of the circle it's in. */
+	textAnchor: 'start' | 'end';
+}
+
+/**
+ * Computes the leader-line / label geometry for one arc from its angular span.
+ * Pulled out of the render prop so the SVG markup stays declarative.
+ */
+export function getArcGeometry(
+	startAngle: number,
+	endAngle: number,
+	radius: number,
+): ArcGeometry {
+	const angle = (startAngle + endAngle) / 2;
+	const labelRadius = radius * 1.3;
+	const lineEndRadius = radius * 1.1;
+	return {
+		labelX: Math.sin(angle) * labelRadius,
+		labelY: -Math.cos(angle) * labelRadius,
+		lineEndX: Math.sin(angle) * lineEndRadius,
+		lineEndY: -Math.cos(angle) * lineEndRadius,
+		textAnchor: Math.sin(angle) > 0 ? 'start' : 'end',
+	};
+}
+
+interface ParsedRgb {
+	r: number;
+	g: number;
+	b: number;
+}
+
+// Parses `#rrggbb` into its components. Returns null for anything else (e.g. an
+// already-rgba string), letting callers fall back to the original colour.
+function hexToRgb(color: string): ParsedRgb | null {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+	return result
+		? {
+				r: parseInt(result[1], 16),
+				g: parseInt(result[2], 16),
+				b: parseInt(result[3], 16),
+			}
+		: null;
+}
+
+/**
+ * Returns an rgba() string for `color` at the given opacity. Used to dim the
+ * non-hovered slices. Falls back to the original colour if it can't be parsed.
+ */
+export function lightenColor(color: string, opacity: number): string {
+	const rgb = hexToRgb(color);
+	if (!rgb) {
+		return color;
+	}
+	return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+}
+
+/**
+ * Resolves the fill for a slice given the currently-hovered slice colour:
+ * everything but the active slice dims to 40% opacity. With nothing hovered
+ * (`activeColor === null`) every slice keeps its full colour.
+ */
+export function getFillColor(
+	color: string,
+	activeColor: string | null,
+): string {
+	if (activeColor === null) {
+		return color;
+	}
+	return activeColor === color ? color : lightenColor(color, 0.4);
+}

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -3,13 +3,14 @@ import { PrecisionOption } from 'components/Graph/types';
 import {
 	IRenderTooltipFooterArgs,
 	LegendConfig,
+	LegendPosition,
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import {
 	DashboardCursorSync,
 	SyncTooltipFilterMode,
-	TooltipClickData,
+	ChartClickData,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
@@ -22,10 +23,10 @@ interface BaseChartProps {
 	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
 	pinKey?: string;
 	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
-	onClick?: (clickData: TooltipClickData) => void;
+	onClick?: (clickData: ChartClickData) => void;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
+	pinnedTooltipElement?: (clickData: ChartClickData) => React.ReactNode;
 	renderTooltipFooter?: (args: IRenderTooltipFooterArgs) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
@@ -69,3 +70,36 @@ export type ChartProps =
 	| TimeSeriesChartProps
 	| BarChartProps
 	| HistogramChartProps;
+
+/**
+ * One resolved pie/donut slice: a display label, its (already parsed) positive
+ * numeric value, and the colour used for the arc + legend swatch.
+ */
+export interface PieSlice {
+	label: string;
+	value: number;
+	color: string;
+}
+
+/**
+ * Props for the Pie chart. Unlike the others above, Pie is NOT uPlot-based
+ * (it renders with @visx), so it deliberately does not extend BaseChartProps /
+ * UPlotBasedChartProps — it takes pre-resolved slices and self-measures its
+ * draw area rather than receiving a uPlot config + aligned data.
+ */
+export interface PieChartProps {
+	data: PieSlice[];
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
+	isDarkMode: boolean;
+	/** Legend placement. Drives the chart-vs-legend layout. Default BOTTOM. */
+	position?: LegendPosition;
+	/**
+	 * Widget id used to persist per-slice hide/unhide state to localStorage
+	 * (shared GRAPH_VISIBILITY_STATES, keyed by label). Omit to disable persistence.
+	 */
+	id?: string;
+	/** Fired when a slice (or its legend entry) is clicked. */
+	onSliceClick?: (slice: PieSlice) => void;
+	'data-testid'?: string;
+}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/mockData.ts

@@ -55,6 +55,7 @@ const buildServiceDetailsResponse = (
 				},
 			},
 		},
+		telemetryCollectionStrategy: { aws: {} },
 	},
 });
 

frontend/src/container/Integrations/CloudIntegration/ServiceDashboards/DashboardCard.tsx

@@ -1,68 +0,0 @@
-import type { KeyboardEvent, MouseEvent } from 'react';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { CloudintegrationtypesServiceDashboardDTO } from 'api/generated/services/sigNoz.schemas';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { openInNewTab } from 'utils/navigation';
-
-const DISABLED_TOOLTIP =
-	'Enable metrics collection for this service to view this dashboard.';
-
-function DashboardCard({
-	dashboard,
-	isInteractive,
-}: {
-	dashboard: CloudintegrationtypesServiceDashboardDTO;
-	isInteractive: boolean;
-}): JSX.Element {
-	const dashboardId = dashboard.integrationDashboard?.dashboardId;
-	const isClickable = Boolean(dashboardId) && isInteractive;
-	const dashboardUrl = dashboardId ? `/dashboard/${dashboardId}` : '';
-
-	const { safeNavigate } = useSafeNavigate();
-
-	const interactiveProps = isClickable
-		? {
-				role: 'button',
-				tabIndex: 0,
-				onClick: (event: MouseEvent<HTMLDivElement>): void => {
-					if (event.metaKey || event.ctrlKey) {
-						openInNewTab(dashboardUrl);
-						return;
-					}
-					safeNavigate(dashboardUrl);
-				},
-				onKeyDown: (event: KeyboardEvent<HTMLDivElement>): void => {
-					if (event.key === 'Enter' || event.key === ' ') {
-						event.preventDefault();
-						safeNavigate(dashboardUrl);
-					}
-				},
-			}
-		: {};
-
-	const card = (
-		<div
-			className={`aws-service-dashboard-item ${
-				isClickable
-					? 'aws-service-dashboard-item-clickable'
-					: 'aws-service-dashboard-item-disabled'
-			} `}
-			{...interactiveProps}
-		>
-			<div className="aws-service-dashboard-item-content">
-				<div className="aws-service-dashboard-item-title">{dashboard.title}</div>
-				<div className="aws-service-dashboard-item-description">
-					{dashboard.description}
-				</div>
-			</div>
-		</div>
-	);
-
-	if (!dashboardId) {
-		return <TooltipSimple title={DISABLED_TOOLTIP}>{card}</TooltipSimple>;
-	}
-
-	return card;
-}
-
-export default DashboardCard;

frontend/src/container/Integrations/CloudIntegration/ServiceDashboards/ServiceDashboards.styles.scss

@@ -53,11 +53,6 @@
 				}
 			}
 
-			&.aws-service-dashboard-item-disabled {
-				cursor: not-allowed;
-				opacity: 0.6;
-			}
-
 			.aws-service-dashboard-item-content {
 				display: flex;
 				flex-direction: column;

frontend/src/container/Integrations/CloudIntegration/ServiceDashboards/ServiceDashboards.tsx

@@ -1,9 +1,11 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import {
-	CloudintegrationtypesServiceDashboardDTO,
+	CloudintegrationtypesDashboardDTO,
 	CloudintegrationtypesServiceDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { withBasePath } from 'utils/basePath';
 
-import DashboardCard from './DashboardCard';
 import './ServiceDashboards.styles.scss';
 
 function ServiceDashboards({
@@ -14,6 +16,7 @@ function ServiceDashboards({
 	isInteractive?: boolean;
 }): JSX.Element {
 	const dashboards = service?.assets?.dashboards || [];
+	const { safeNavigate } = useSafeNavigate();
 	if (!dashboards.length) {
 		return <></>;
 	}
@@ -22,20 +25,68 @@ function ServiceDashboards({
 		<div className="aws-service-dashboards">
 			<div className="aws-service-dashboards-title">Dashboards</div>
 			<div className="aws-service-dashboards-items">
-				{dashboards.map(
-					(dashboard: CloudintegrationtypesServiceDashboardDTO, index: number) => {
-						const key =
-							dashboard.integrationDashboard?.dashboardId ||
-							`${dashboard.title}-${index}`;
-						return (
-							<DashboardCard
-								key={key}
-								dashboard={dashboard}
-								isInteractive={isInteractive}
-							/>
-						);
-					},
-				)}
+				{dashboards.map((dashboard: CloudintegrationtypesDashboardDTO) => {
+					if (!dashboard.id) {
+						return null;
+					}
+
+					const dashboardUrl = `/dashboard/${dashboard.id}`;
+
+					return (
+						<div
+							key={dashboard.id}
+							className={`aws-service-dashboard-item ${
+								isInteractive ? 'aws-service-dashboard-item-clickable' : ''
+							}`}
+							role={isInteractive ? 'button' : undefined}
+							tabIndex={isInteractive ? 0 : -1}
+							onClick={(event): void => {
+								if (!isInteractive) {
+									return;
+								}
+								if (event.metaKey || event.ctrlKey) {
+									window.open(
+										withBasePath(dashboardUrl),
+										'_blank',
+										'noopener,noreferrer',
+									);
+									return;
+								}
+								safeNavigate(dashboardUrl);
+							}}
+							onAuxClick={(event): void => {
+								if (!isInteractive) {
+									return;
+								}
+								if (event.button === 1) {
+									window.open(
+										withBasePath(dashboardUrl),
+										'_blank',
+										'noopener,noreferrer',
+									);
+								}
+							}}
+							onKeyDown={(event): void => {
+								if (!isInteractive) {
+									return;
+								}
+								if (event.key === 'Enter' || event.key === ' ') {
+									event.preventDefault();
+									safeNavigate(dashboardUrl);
+								}
+							}}
+						>
+							<div className="aws-service-dashboard-item-content">
+								<div className="aws-service-dashboard-item-title">
+									{dashboard.title}
+								</div>
+								<div className="aws-service-dashboard-item-description">
+									{dashboard.description}
+								</div>
+							</div>
+						</div>
+					);
+				})}
 			</div>
 		</div>
 	);

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -171,17 +171,20 @@
 	}
 
 	.legend-copy-button {
-		display: none;
+		// Always laid out (space reserved) but transparent, so revealing it on
+		// hover fades the icon in without reflowing the row / shifting the label.
+		display: flex;
+		opacity: 0;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
 		padding: 2px;
 		margin: 0;
 		border: none;
+		background: transparent;
 		color: var(--l2-foreground);
 		cursor: pointer;
 		border-radius: 4px;
-		opacity: 1;
 		transition:
 			opacity 0.15s ease,
 			color 0.15s ease;
@@ -192,9 +195,8 @@
 	}
 
 	&:hover {
-		background: color-mix(in srgb, var(--l1-foreground) 5%, transparent);
+		background: var(--l3-background);
 		.legend-copy-button {
-			display: flex;
 			opacity: 1;
 		}
 	}

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -1,39 +1,40 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
-import { Input, Tooltip as AntdTooltip } from 'antd';
+import { Input } from 'antd';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import cx from 'classnames';
 import { useCopyToClipboard } from 'hooks/useCopyToClipboard';
 import { LegendItem } from 'lib/uPlotV2/config/types';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
 import { Check, Copy } from '@signozhq/icons';
 
-import { useLegendActions } from '../../hooks/useLegendActions';
 import { LegendPosition, LegendProps } from '../types';
 
 import './Legend.styles.scss';
 
 export const MAX_LEGEND_WIDTH = 240;
 
+/**
+ * Presentational legend. Renders the supplied `items` (markers + labels, an
+ * optional copy button, and a search box for the RIGHT position) and delegates
+ * all interaction to the container handlers. Source-agnostic — the uPlot
+ * charts feed it via UPlotLegend; Pie feeds it directly.
+ */
 export default function Legend({
+	items,
 	position = LegendPosition.BOTTOM,
-	config,
 	averageLegendWidth = MAX_LEGEND_WIDTH,
+	focusedSeriesIndex = null,
+	onClick,
+	onMouseMove,
+	onMouseLeave,
+	showCopy = true,
+	showSearch,
 }: LegendProps): JSX.Element {
-	const { legendItemsMap, focusedSeriesIndex, setFocusedSeriesIndex } =
-		useLegendsSync({ config });
-	const { onLegendClick, onLegendMouseMove, onLegendMouseLeave } =
-		useLegendActions({
-			setFocusedSeriesIndex,
-			focusedSeriesIndex,
-		});
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
 	const [legendSearchQuery, setLegendSearchQuery] = useState('');
 	const { copyToClipboard, id: copiedId } = useCopyToClipboard();
 
-	const legendItems = useMemo(
-		() => Object.values(legendItemsMap),
-		[legendItemsMap],
-	);
+	const searchEnabled = showSearch ?? position === LegendPosition.RIGHT;
 
 	const isSingleRow = useMemo(() => {
 		if (!legendContainerRef.current || position !== LegendPosition.BOTTOM) {
@@ -41,21 +42,19 @@ export default function Legend({
 		}
 		const containerWidth = legendContainerRef.current.clientWidth;
 
-		const totalLegendWidth = legendItems.length * (averageLegendWidth + 16);
+		const totalLegendWidth = items.length * (averageLegendWidth + 16);
 		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
 		return totalRows <= 1;
-	}, [averageLegendWidth, legendContainerRef, legendItems.length, position]);
+	}, [averageLegendWidth, items.length, position]);
 
 	const visibleLegendItems = useMemo(() => {
-		if (position !== LegendPosition.RIGHT || !legendSearchQuery.trim()) {
-			return legendItems;
+		if (!searchEnabled || !legendSearchQuery.trim()) {
+			return items;
 		}
 
 		const query = legendSearchQuery.trim().toLowerCase();
-		return legendItems.filter((item) =>
-			item.label?.toLowerCase().includes(query),
-		);
-	}, [position, legendSearchQuery, legendItems]);
+		return items.filter((item) => item.label?.toLowerCase().includes(query));
+	}, [searchEnabled, legendSearchQuery, items]);
 
 	const handleCopyLegendItem = useCallback(
 		(e: React.MouseEvent, seriesIndex: number, label: string): void => {
@@ -68,6 +67,9 @@ export default function Legend({
 	const renderLegendItem = useCallback(
 		(item: LegendItem): JSX.Element => {
 			const isCopied = copiedId === item.seriesIndex;
+			// `color` is uPlot's stroke union (string | fn | gradient); only a string
+			// is a usable CSS colour for the marker.
+			const markerColor = typeof item.color === 'string' ? item.color : undefined;
 			return (
 				<div
 					key={item.seriesIndex}
@@ -77,54 +79,56 @@ export default function Legend({
 						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
 					})}
 				>
-					<AntdTooltip title={item.label}>
+					<TooltipSimple title={item.label} arrow side="top">
 						<div className="legend-item-label-trigger">
 							<div
 								className="legend-marker"
-								style={{ borderColor: String(item.color) }}
+								style={{ borderColor: markerColor }}
 								data-is-legend-marker={true}
 							/>
 							<span className="legend-label">{item.label}</span>
 						</div>
-					</AntdTooltip>
-					<AntdTooltip title={isCopied ? 'Copied' : 'Copy'}>
-						<button
-							type="button"
-							className="legend-copy-button"
-							onClick={(e): void =>
-								handleCopyLegendItem(e, item.seriesIndex, item.label ?? '')
-							}
-							aria-label={`Copy ${item.label}`}
-							data-testid="legend-copy"
-						>
-							{isCopied ? <Check size={12} /> : <Copy size={12} />}
-						</button>
-					</AntdTooltip>
+					</TooltipSimple>
+					{showCopy && (
+						<TooltipSimple title={isCopied ? 'Copied' : 'Copy'} arrow side="top">
+							<button
+								type="button"
+								className="legend-copy-button"
+								onClick={(e): void =>
+									handleCopyLegendItem(e, item.seriesIndex, item.label ?? '')
+								}
+								aria-label={`Copy ${item.label}`}
+								data-testid="legend-copy"
+							>
+								{isCopied ? <Check size={12} /> : <Copy size={12} />}
+							</button>
+						</TooltipSimple>
+					)}
 				</div>
 			);
 		},
-		[copiedId, focusedSeriesIndex, handleCopyLegendItem, position],
+		[copiedId, focusedSeriesIndex, handleCopyLegendItem, position, showCopy],
 	);
 
 	const isEmptyState = useMemo(() => {
-		if (position !== LegendPosition.RIGHT || !legendSearchQuery.trim()) {
+		if (!searchEnabled || !legendSearchQuery.trim()) {
 			return false;
 		}
 		return visibleLegendItems.length === 0;
-	}, [position, legendSearchQuery, visibleLegendItems]);
+	}, [searchEnabled, legendSearchQuery, visibleLegendItems]);
 
 	return (
 		<div
 			ref={legendContainerRef}
 			className="legend-container"
-			onClick={onLegendClick}
-			onMouseMove={onLegendMouseMove}
-			onMouseLeave={onLegendMouseLeave}
+			onClick={onClick}
+			onMouseMove={onMouseMove}
+			onMouseLeave={onMouseLeave}
 			style={{
 				['--legend-average-width' as string]: `${averageLegendWidth + 16}px`, // 16px is the marker width
 			}}
 		>
-			{position === LegendPosition.RIGHT && (
+			{searchEnabled && (
 				<div className="legend-search-container">
 					<Input
 						allowClear

frontend/src/lib/uPlotV2/components/Legend/UPlotLegend.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
+
+import { useLegendActions } from '../../hooks/useLegendActions';
+import { LegendPosition, UPlotLegendProps } from '../types';
+
+import Legend from './Legend';
+
+/**
+ * uPlot legend controller. Derives the legend items + focus/visibility state
+ * from the chart config (useLegendsSync) and the toggle/focus interactions from
+ * the plot context (useLegendActions), then renders the presentational Legend.
+ * Must be rendered inside a PlotContextProvider.
+ */
+export default function UPlotLegend({
+	position = LegendPosition.BOTTOM,
+	config,
+	averageLegendWidth,
+}: UPlotLegendProps): JSX.Element {
+	const { legendItemsMap, focusedSeriesIndex, setFocusedSeriesIndex } =
+		useLegendsSync({ config });
+	const { onLegendClick, onLegendMouseMove, onLegendMouseLeave } =
+		useLegendActions({
+			setFocusedSeriesIndex,
+			focusedSeriesIndex,
+		});
+
+	const items = useMemo(() => Object.values(legendItemsMap), [legendItemsMap]);
+
+	return (
+		<Legend
+			items={items}
+			position={position}
+			averageLegendWidth={averageLegendWidth}
+			focusedSeriesIndex={focusedSeriesIndex}
+			onClick={onLegendClick}
+			onMouseMove={onLegendMouseMove}
+			onMouseLeave={onLegendMouseLeave}
+		/>
+	);
+}

frontend/src/lib/uPlotV2/components/__tests__/UPlotLegend.test.tsx

@@ -7,11 +7,12 @@ import {
 	within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
 
 import { useLegendActions } from '../../hooks/useLegendActions';
-import Legend from '../Legend/Legend';
+import UPlotLegend from '../Legend/UPlotLegend';
 import { LegendPosition } from '../types';
 
 const mockWriteText = jest.fn().mockResolvedValue(undefined);
@@ -47,7 +48,7 @@ const mockUseLegendActions = useLegendActions as jest.MockedFunction<
 	typeof useLegendActions
 >;
 
-describe('Legend', () => {
+describe('UPlotLegend', () => {
 	beforeAll(() => {
 		// JSDOM does not define navigator.clipboard; add it so we can spy on writeText
 		Object.defineProperty(navigator, 'clipboard', {
@@ -115,11 +116,13 @@ describe('Legend', () => {
 
 	const renderLegend = (position?: LegendPosition): RenderResult =>
 		render(
-			<Legend
-				position={position}
-				// config is not used directly in the component, it's consumed by the mocked hook
-				config={{} as any}
-			/>,
+			<TooltipProvider>
+				<UPlotLegend
+					position={position}
+					// config is consumed by the mocked useLegendsSync hook, not directly
+					config={{} as any}
+				/>
+			</TooltipProvider>,
 		);
 
 	describe('layout and position', () => {

frontend/src/lib/uPlotV2/components/types.ts

@@ -1,9 +1,10 @@
-import { ReactNode } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
+import { LegendItem } from '../config/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -109,7 +110,33 @@ export enum LegendPosition {
 export interface LegendConfig {
 	position: LegendPosition;
 }
+/**
+ * Presentational legend props. Source-agnostic: it renders whatever
+ * `items` it's given and delegates interaction to the container handlers, so
+ * it serves both uPlot charts (via UPlotLegend) and non-uPlot charts (Pie).
+ */
 export interface LegendProps {
+	items: LegendItem[];
+	position?: LegendPosition;
+	averageLegendWidth?: number;
+	/** Series index to highlight (hovered/focused). */
+	focusedSeriesIndex?: number | null;
+	/**
+	 * Container-delegated handlers. Items carry `data-legend-item-id`, so the
+	 * handler reads the target's id rather than binding per item.
+	 */
+	onClick?: MouseEventHandler<HTMLDivElement>;
+	onMouseMove?: MouseEventHandler<HTMLDivElement>;
+	onMouseLeave?: () => void;
+	/** Show the per-item copy button. Default true. */
+	showCopy?: boolean;
+	/** Show the filter search box. Default: only for the RIGHT position. */
+	showSearch?: boolean;
+}
+
+/** Props for the uPlot legend controller, which derives items + interaction
+ * from the chart config and renders the presentational Legend. */
+export interface UPlotLegendProps {
 	position?: LegendPosition;
 	config: UPlotConfigBuilder;
 	averageLegendWidth?: number;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -37,7 +37,7 @@ export interface TooltipViewState {
 	isHovering: boolean;
 	isPinned: boolean;
 	dismiss: () => void;
-	clickData: TooltipClickData | null;
+	clickData: ChartClickData | null;
 	contents?: ReactNode;
 }
 
@@ -59,17 +59,17 @@ export interface TooltipPluginProps {
 	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
 	pinKey?: string;
 	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
-	onClick?: (clickData: TooltipClickData) => void;
+	onClick?: (clickData: ChartClickData) => void;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	syncMetadata?: TooltipSyncMetadata;
 	render: (args: TooltipRenderArgs) => ReactNode;
-	pinnedTooltipElement?: (clickData: TooltipClickData) => ReactNode;
+	pinnedTooltipElement?: (clickData: ChartClickData) => ReactNode;
 	maxWidth?: number;
 	maxHeight?: number;
 }
 
-export interface TooltipClickData {
+export interface ChartClickData {
 	xValue: number;
 	yValue: number;
 	focusedSeries: {
@@ -101,7 +101,7 @@ export interface TooltipControllerState {
 	hoverActive: boolean;
 	isAnySeriesActive: boolean;
 	pinned: boolean;
-	clickData: TooltipClickData | null;
+	clickData: ChartClickData | null;
 	style: TooltipViewState['style'];
 	horizontalOffset: number;
 	verticalOffset: number;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -2,7 +2,7 @@ import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
 
 import {
 	TOOLTIP_OFFSET,
-	TooltipClickData,
+	ChartClickData,
 	TooltipLayoutInfo,
 	TooltipViewState,
 } from './types';
@@ -167,14 +167,11 @@ export function createLayoutObserver(
 }
 
 /**
- * Resolves a TooltipClickData snapshot from a MouseEvent (real or synthetic)
+ * Resolves a ChartClickData snapshot from a MouseEvent (real or synthetic)
  * and the current uPlot instance. Shared by the overlay click handler and the
  * keyboard-pin handler (which synthesises an event from the cursor position).
  */
-export function buildClickData(
-	event: MouseEvent,
-	plot: uPlot,
-): TooltipClickData {
+export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 	const xValue = plot.posToVal(event.offsetX, 'x');
 	const yValue = plot.posToVal(event.offsetY, 'y');
 	const focusedSeries = getFocusedSeriesAtPosition(event, plot);

go.mod

@@ -18,7 +18,6 @@ require (
 	github.com/dgraph-io/ristretto/v2 v2.3.0
 	github.com/dustin/go-humanize v1.0.1
 	github.com/emersion/go-smtp v0.24.0
-	github.com/evanphx/json-patch/v5 v5.9.11
 	github.com/gin-gonic/gin v1.11.0
 	github.com/go-co-op/gocron v1.30.1
 	github.com/go-openapi/runtime v0.29.2

go.sum

@@ -311,8 +311,6 @@ github.com/envoyproxy/go-control-plane/envoy v1.37.0/go.mod h1:DReE9MMrmecPy+YvQ
 github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
 github.com/envoyproxy/protoc-gen-validate v1.3.3 h1:MVQghNeW+LZcmXe7SY1V36Z+WFMDjpqGAGacLe2T0ds=
 github.com/envoyproxy/protoc-gen-validate v1.3.3/go.mod h1:TsndJ/ngyIdQRhMcVVGDDHINPLWB7C82oDArY51KfB0=
-github.com/evanphx/json-patch/v5 v5.9.11 h1:/8HVnzMq13/3x9TPvjG08wUGqBTmZBsCWzjTM0wiaDU=
-github.com/evanphx/json-patch/v5 v5.9.11/go.mod h1:3j+LviiESTElxA4p3EMKAB9HXj3/XEtnUf6OZxqIQTM=
 github.com/facette/natsort v0.0.0-20181210072756-2cd4dd1e2dcb h1:IT4JYU7k4ikYg1SCxNI1/Tieq/NFvh6dzLdgi7eu0tM=
 github.com/facette/natsort v0.0.0-20181210072756-2cd4dd1e2dcb/go.mod h1:bH6Xx7IW64qjjJq8M2u4dxNaBiDfKK+z/3eGDpXEQhc=
 github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=

pkg/apiserver/signozapiserver/dashboard.go

@@ -24,10 +24,9 @@ func (provider *provider) addDashboardRoutes(router *mux.Router) error {
 		Response:            new(dashboardtypes.GettableDashboardV2),
 		ResponseContentType: "application/json",
 		SuccessStatusCode:   http.StatusCreated,
-		// TODO: add http.StatusConflict once the dashboard name unique index is added.
-		ErrorStatusCodes: []int{http.StatusBadRequest},
-		Deprecated:       false,
-		SecuritySchemes:  newSecuritySchemes(types.RoleEditor),
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
 	})).Methods(http.MethodPost).GetError(); err != nil {
 		return err
 	}
@@ -42,87 +41,13 @@ func (provider *provider) addDashboardRoutes(router *mux.Router) error {
 		Response:            new(dashboardtypes.GettableDashboardV2),
 		ResponseContentType: "application/json",
 		SuccessStatusCode:   http.StatusOK,
-		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		ErrorStatusCodes:    []int{},
 		Deprecated:          false,
 		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
 	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/dashboards/{id}", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.UpdateV2), handler.OpenAPIDef{
-		ID:                  "UpdateDashboardV2",
-		Tags:                []string{"dashboard"},
-		Summary:             "Update dashboard (v2)",
-		Description:         "This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.",
-		Request:             new(dashboardtypes.UpdatableDashboardV2),
-		RequestContentType:  "application/json",
-		Response:            new(dashboardtypes.GettableDashboardV2),
-		ResponseContentType: "application/json",
-		SuccessStatusCode:   http.StatusOK,
-		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
-		Deprecated:          false,
-		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
-	})).Methods(http.MethodPut).GetError(); err != nil {
-		return err
-	}
-
-	if err := router.Handle("/api/v2/dashboards/{id}", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.PatchV2), handler.OpenAPIDef{
-		ID:          "PatchDashboardV2",
-		Tags:        []string{"dashboard"},
-		Summary:     "Patch dashboard (v2)",
-		Description: "This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard. The patch is applied against the postable view of the dashboard (metadata, data, tags), so individual panels, queries, variables, layouts, or tags can be updated without re-sending the rest of the dashboard. Apply is lenient: `remove` on a missing path is a no-op (idempotent) and `add` creates any missing parent objects, rather than failing as strict RFC 6902 would. The resulting dashboard is still validated. Locked dashboards are rejected.",
-		Request:     new(dashboardtypes.PatchableDashboardV2),
-		// Strictly per RFC 6902 the content type is `application/json-patch+json`,
-		// but our OpenAPI generator only reflects schemas for content types it
-		// understands (application/json, form-urlencoded, multipart) — anything
-		// else degrades to `type: string`. Declaring application/json here keeps
-		// the array-of-ops schema visible to spec consumers; the runtime decoder
-		// parses JSON regardless of the request's actual Content-Type header.
-		RequestContentType:  "application/json",
-		Response:            new(dashboardtypes.GettableDashboardV2),
-		ResponseContentType: "application/json",
-		SuccessStatusCode:   http.StatusOK,
-		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
-		Deprecated:          false,
-		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
-	})).Methods(http.MethodPatch).GetError(); err != nil {
-		return err
-	}
-
-	if err := router.Handle("/api/v2/dashboards/{id}/lock", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.LockV2), handler.OpenAPIDef{
-		ID:                  "LockDashboardV2",
-		Tags:                []string{"dashboard"},
-		Summary:             "Lock dashboard (v2)",
-		Description:         "This endpoint locks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.",
-		Request:             nil,
-		RequestContentType:  "",
-		Response:            nil,
-		ResponseContentType: "application/json",
-		SuccessStatusCode:   http.StatusNoContent,
-		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
-		Deprecated:          false,
-		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
-	})).Methods(http.MethodPut).GetError(); err != nil {
-		return err
-	}
-
-	if err := router.Handle("/api/v2/dashboards/{id}/lock", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.UnlockV2), handler.OpenAPIDef{
-		ID:                  "UnlockDashboardV2",
-		Tags:                []string{"dashboard"},
-		Summary:             "Unlock dashboard (v2)",
-		Description:         "This endpoint unlocks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.",
-		Request:             nil,
-		RequestContentType:  "",
-		Response:            nil,
-		ResponseContentType: "application/json",
-		SuccessStatusCode:   http.StatusNoContent,
-		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
-		Deprecated:          false,
-		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
-	})).Methods(http.MethodDelete).GetError(); err != nil {
-		return err
-	}
-
 	if err := router.Handle("/api/v1/dashboards/{id}/public", handler.New(provider.authzMiddleware.AdminAccess(provider.dashboardHandler.CreatePublic), handler.OpenAPIDef{
 		ID:                  "CreatePublicDashboard",
 		Tags:                []string{"dashboard"},

pkg/modules/cloudintegration/implcloudintegration/handler.go

@@ -440,3 +440,4 @@ func (handler *handler) AgentCheckIn(rw http.ResponseWriter, r *http.Request) {
 
 	render.Success(rw, http.StatusOK, cloudintegrationtypes.NewGettableAgentCheckIn(provider, resp))
 }
+

pkg/modules/dashboard/dashboard.go

@@ -60,12 +60,6 @@ type Module interface {
 	CreateV2(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, postable dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error)
 
 	GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error)
-
-	UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error)
-
-	LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error
-
-	PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error)
 }
 
 type Handler interface {
@@ -95,12 +89,4 @@ type Handler interface {
 	CreateV2(http.ResponseWriter, *http.Request)
 
 	GetV2(http.ResponseWriter, *http.Request)
-
-	UpdateV2(http.ResponseWriter, *http.Request)
-
-	LockV2(http.ResponseWriter, *http.Request)
-
-	UnlockV2(http.ResponseWriter, *http.Request)
-
-	PatchV2(http.ResponseWriter, *http.Request)
 }

pkg/modules/dashboard/impldashboard/store.go

@@ -153,7 +153,7 @@ func (store *store) ListPublic(ctx context.Context, orgID valuer.UUID) ([]*dashb
 func (store *store) Update(ctx context.Context, orgID valuer.UUID, storableDashboard *dashboardtypes.StorableDashboard) error {
 	_, err := store.
 		sqlstore.
-		BunDBCtx(ctx).
+		BunDB().
 		NewUpdate().
 		Model(storableDashboard).
 		WherePK().

pkg/modules/dashboard/impldashboard/v2_handler.go

@@ -9,7 +9,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/http/binding"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/gorilla/mux"
@@ -73,135 +72,3 @@ func (handler *handler) GetV2(rw http.ResponseWriter, r *http.Request) {
 
 	render.Success(rw, http.StatusOK, dashboard.ToGettableDashboardV2())
 }
-
-func (handler *handler) LockV2(rw http.ResponseWriter, r *http.Request) {
-	handler.lockUnlockV2(rw, r, true)
-}
-
-func (handler *handler) UnlockV2(rw http.ResponseWriter, r *http.Request) {
-	handler.lockUnlockV2(rw, r, false)
-}
-
-func (handler *handler) lockUnlockV2(rw http.ResponseWriter, r *http.Request, lock bool) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID := valuer.MustNewUUID(claims.OrgID)
-
-	id := mux.Vars(r)["id"]
-	if id == "" {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
-		return
-	}
-	dashboardID, err := valuer.NewUUID(id)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	isAdmin := false
-	selectors := []coretypes.Selector{
-		coretypes.TypeRole.MustSelector(authtypes.SigNozAdminRoleName),
-	}
-	err = handler.authz.CheckWithTupleCreation(
-		ctx,
-		claims,
-		orgID,
-		authtypes.Relation{Verb: coretypes.VerbAssignee},
-		coretypes.NewResourceRole(),
-		selectors,
-		selectors,
-	)
-	if err == nil {
-		isAdmin = true
-	}
-
-	if err := handler.module.LockUnlockV2(ctx, orgID, dashboardID, claims.Email, isAdmin, lock); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusNoContent, nil)
-}
-
-func (handler *handler) UpdateV2(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID := valuer.MustNewUUID(claims.OrgID)
-
-	id := mux.Vars(r)["id"]
-	if id == "" {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
-		return
-	}
-	dashboardID, err := valuer.NewUUID(id)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	req := dashboardtypes.UpdatableDashboardV2{}
-	if err := binding.JSON.BindBody(r.Body, &req); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	dashboard, err := handler.module.UpdateV2(ctx, orgID, dashboardID, claims.Email, req)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusOK, dashboard.ToGettableDashboardV2())
-}
-
-func (handler *handler) PatchV2(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID := valuer.MustNewUUID(claims.OrgID)
-
-	id := mux.Vars(r)["id"]
-	if id == "" {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
-		return
-	}
-	dashboardID, err := valuer.NewUUID(id)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	req := dashboardtypes.PatchableDashboardV2{}
-	if err := binding.JSON.BindBody(r.Body, &req); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	dashboard, err := handler.module.PatchV2(ctx, orgID, dashboardID, claims.Email, req)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusOK, dashboard.ToGettableDashboardV2())
-}

pkg/modules/dashboard/impldashboard/v2_module.go

@@ -55,97 +55,3 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 
 	return storable.ToDashboardV2(tags)
 }
-
-func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
-	if err := updatable.Validate(); err != nil {
-		return nil, err
-	}
-
-	existing, err := module.GetV2(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-	// Locked-dashboard / state gate — independent of tags, so run it before the tx.
-	if err := existing.CanUpdate(); err != nil {
-		return nil, err
-	}
-
-	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
-		resolvedTags, err := module.tagModule.SyncTags(ctx, orgID, coretypes.KindDashboard, id, updatable.Tags)
-		if err != nil {
-			return err
-		}
-
-		err = existing.Update(updatable, updatedBy, resolvedTags)
-		if err != nil {
-			return err
-		}
-
-		storable, err := existing.ToStorableDashboard()
-		if err != nil {
-			return err
-		}
-
-		return module.store.Update(ctx, orgID, storable)
-	})
-	if err != nil {
-		return nil, err
-	}
-
-	return existing, nil
-}
-
-func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
-	existing, err := module.GetV2(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-	// Locked-dashboard / state gate — independent of tags, so run it before the tx.
-	if err := existing.CanUpdate(); err != nil {
-		return nil, err
-	}
-
-	updateable, err := patch.Apply(existing)
-	if err != nil {
-		return nil, err
-	}
-
-	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
-		resolvedTags, err := module.tagModule.SyncTags(ctx, orgID, coretypes.KindDashboard, id, updateable.Tags)
-		if err != nil {
-			return err
-		}
-
-		err = existing.Update(*updateable, updatedBy, resolvedTags)
-		if err != nil {
-			return err
-		}
-
-		storable, err := existing.ToStorableDashboard()
-		if err != nil {
-			return err
-		}
-
-		return module.store.Update(ctx, orgID, storable)
-	})
-	if err != nil {
-		return nil, err
-	}
-
-	return existing, nil
-}
-
-func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
-	existing, err := module.GetV2(ctx, orgID, id)
-	if err != nil {
-		return err
-	}
-	if err := existing.LockUnlock(lock, isAdmin, updatedBy); err != nil {
-		return err
-	}
-	storable, err := existing.ToStorableDashboard()
-	if err != nil {
-		return err
-	}
-	return module.store.Update(ctx, orgID, storable)
-}

pkg/types/cloudintegrationtypes/integration_dashboard.go

@@ -18,16 +18,14 @@ var (
 type StorableIntegrationDashboard struct {
 	bun.BaseModel `bun:"table:integration_dashboard"`
 
-	ID          string                           `json:"id" bun:"id,pk,type:text" required:"true"`
-	DashboardID string                           `json:"dashboardId" bun:"dashboard_id,type:text" required:"true"`
-	Provider    IntegrationDashboardProviderType `json:"provider" bun:"provider,type:text" required:"true"`
-	Slug        string                           `json:"slug" bun:"slug,type:text" required:"true"`
-	CreatedAt   time.Time                        `json:"createdAt" bun:"created_at" required:"true"`
-	UpdatedAt   time.Time                        `json:"updatedAt" bun:"updated_at" required:"true"`
+	ID          string                           `bun:"id,pk,type:text"`
+	DashboardID string                           `bun:"dashboard_id,type:text"`
+	Provider    IntegrationDashboardProviderType `bun:"provider,type:text"`
+	Slug        string                           `bun:"slug,type:text"`
+	CreatedAt   time.Time                        `bun:"created_at"`
+	UpdatedAt   time.Time                        `bun:"updated_at"`
 }
 
-type IntegrationDashboard = StorableIntegrationDashboard
-
 func NewStorableIntegrationDashboard(dashboardID string, provider IntegrationDashboardProviderType, slug string) *StorableIntegrationDashboard {
 	now := time.Now()
 	return &StorableIntegrationDashboard{

pkg/types/cloudintegrationtypes/service.go

@@ -50,18 +50,10 @@ type ListServicesMetadataParams struct {
 // Service represents a cloud integration service with its definition,
 // cloud integration service is non nil only when the service entry exists in DB with ANY config (enabled or disabled).
 type Service struct {
-	ServiceDefinitionMetadata
-	Overview                string                   `json:"overview" required:"true"` // markdown
-	ServiceAssets           ServiceAssets            `json:"assets" required:"true"`
-	SupportedSignals        SupportedSignals         `json:"supportedSignals" required:"true"`
-	DataCollected           DataCollected            `json:"dataCollected" required:"true"`
+	ServiceDefinition
 	CloudIntegrationService *CloudIntegrationService `json:"cloudIntegrationService" required:"true" nullable:"true"`
 }
 
-type ServiceAssets struct {
-	Dashboards []*ServiceDashboard `json:"dashboards" required:"true" nullable:"false"`
-}
-
 type GetServiceParams struct {
 	CloudIntegrationID valuer.UUID `query:"cloud_integration_id" required:"false"`
 }
@@ -129,12 +121,6 @@ type Dashboard struct {
 	Definition  dashboardtypes.StorableDashboardData `json:"definition,omitempty"`
 }
 
-type ServiceDashboard struct {
-	Title                string                `json:"title" required:"true"`
-	Description          string                `json:"description" required:"true"`
-	IntegrationDashboard *IntegrationDashboard `json:"integrationDashboard,omitempty" required:"false"`
-}
-
 func NewCloudIntegrationService(serviceID ServiceID, cloudIntegrationID valuer.UUID, provider CloudProviderType, config *ServiceConfig) (*CloudIntegrationService, error) {
 	switch provider {
 	case CloudProviderTypeAWS:
@@ -178,41 +164,11 @@ func NewServiceMetadata(definition ServiceDefinition, enabled bool) *ServiceMeta
 	}
 }
 
-func NewService(provider CloudProviderType, def *ServiceDefinition, integrationService *CloudIntegrationService, integrationDashboards []*StorableIntegrationDashboard) *Service {
-	service := &Service{
-		ServiceDefinitionMetadata: def.ServiceDefinitionMetadata,
-		Overview:                  def.Overview,
-		SupportedSignals:          def.SupportedSignals,
-		DataCollected:             def.DataCollected,
-		CloudIntegrationService:   integrationService,
-		ServiceAssets:             ServiceAssets{Dashboards: make([]*ServiceDashboard, 0, len(def.Assets.Dashboards))},
+func NewService(def ServiceDefinition, storableService *CloudIntegrationService) *Service {
+	return &Service{
+		ServiceDefinition:       def,
+		CloudIntegrationService: storableService,
 	}
-
-	integrationDashboardsMap := make(map[string]*IntegrationDashboard)
-	for _, d := range integrationDashboards {
-		integrationDashboardsMap[d.Slug] = d
-	}
-
-	for _, d := range def.Assets.Dashboards {
-		dashboard := &ServiceDashboard{
-			Title:       d.Title,
-			Description: d.Description,
-		}
-
-		if integrationService != nil {
-			slug := CloudIntegrationDashboardSlug(provider, integrationService.Type, d.ID)
-
-			if integrationDashboard, exists := integrationDashboardsMap[slug]; exists {
-				if integrationDashboard != nil {
-					dashboard.IntegrationDashboard = integrationDashboard
-				}
-			}
-		}
-
-		service.ServiceAssets.Dashboards = append(service.ServiceAssets.Dashboards, dashboard)
-	}
-
-	return service
 }
 
 func NewGettableServicesMetadata(services []*ServiceMetadata) *GettableServicesMetadata {

pkg/types/dashboardtypes/dashboard.go

@@ -21,7 +21,6 @@ var (
 	ErrCodeDashboardInvalidWidgetQuery = errors.MustNewCode("dashboard_invalid_widget_query")
 	ErrCodeDashboardInvalidSource      = errors.MustNewCode("dashboard_invalid_source")
 	ErrCodeDashboardImmutable          = errors.MustNewCode("dashboard_immutable")
-	ErrCodeDashboardInvalidPatch       = errors.MustNewCode("dashboard_invalid_patch")
 )
 
 type StorableDashboard struct {

pkg/types/dashboardtypes/perses_dashboard.go

@@ -62,54 +62,6 @@ type DashboardV2 struct {
 	Spec DashboardSpec   `json:"spec" required:"true"`
 }
 
-func (d *DashboardV2) CanUpdate() error {
-	if d.Source == SourceIntegration {
-		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "integration dashboards cannot be modified")
-	}
-	if d.Locked {
-		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "cannot update a locked dashboard, please unlock the dashboard to update")
-	}
-	return nil
-}
-
-func (d *DashboardV2) Update(updatable UpdatableDashboardV2, updatedBy string, resolvedTags []*tagtypes.Tag) error {
-	if err := d.CanUpdate(); err != nil {
-		return err
-	}
-	if updatable.Name != d.Name {
-		return errors.NewInvalidInputf(ErrCodeDashboardImmutable, "name is immutable; cannot change from %q to %q", d.Name, updatable.Name)
-	}
-	d.DashboardV2MetadataBase = updatable.DashboardV2MetadataBase
-	d.Tags = resolvedTags
-	d.Spec = updatable.Spec
-	d.UpdatedBy = updatedBy
-	d.UpdatedAt = time.Now()
-	return nil
-}
-
-func (d *DashboardV2) CanLockUnlock(isAdmin bool, updatedBy string) error {
-	if d.Source == SourceIntegration {
-		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "integration dashboards cannot be locked or unlocked")
-	}
-	if d.Source == SourceSystem {
-		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "system dashboards cannot be locked or unlocked")
-	}
-	if d.CreatedBy != updatedBy && !isAdmin {
-		return errors.Newf(errors.TypeForbidden, errors.CodeForbidden, "you are not authorized to lock/unlock this dashboard")
-	}
-	return nil
-}
-
-func (d *DashboardV2) LockUnlock(lock bool, isAdmin bool, updatedBy string) error {
-	if err := d.CanLockUnlock(isAdmin, updatedBy); err != nil {
-		return err
-	}
-	d.Locked = lock
-	d.UpdatedBy = updatedBy
-	d.UpdatedAt = time.Now()
-	return nil
-}
-
 type DashboardV2MetadataBase struct {
 	SchemaVersion string `json:"schemaVersion" required:"true"`
 	Image         string `json:"image,omitempty"`
@@ -174,7 +126,7 @@ func (p *PostableDashboardV2) Validate() error {
 	if err := p.validateName(); err != nil {
 		return err
 	}
-	if err := validateDashboardTags(p.Tags); err != nil {
+	if err := p.validateTags(); err != nil {
 		return err
 	}
 	return p.Spec.Validate()
@@ -241,11 +193,11 @@ func generateDashboardName(displayName string) string {
 	return prefix + "-" + string(suffix)
 }
 
-func validateDashboardTags(tags []tagtypes.PostableTag) error {
-	if len(tags) > MaxTagsPerDashboard {
+func (p *PostableDashboardV2) validateTags() error {
+	if len(p.Tags) > MaxTagsPerDashboard {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "a dashboard can have at most %d tags", MaxTagsPerDashboard)
 	}
-	for _, tag := range tags {
+	for _, tag := range p.Tags {
 		if _, reserved := reservedDSLKeys[DSLKey(strings.ToLower(strings.TrimSpace(tag.Key)))]; reserved {
 			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "tag key %q is reserved", tag.Key)
 		}
@@ -311,57 +263,6 @@ func (s StorableDashboardV2Data) toStorableDashboardData() (StorableDashboardDat
 
 type StorableDashboardV2Metadata = DashboardV2MetadataBase
 
-// ════════════════════════════════════════════════════════════════════════
-// Updatable
-// ════════════════════════════════════════════════════════════════════════
-
-type UpdatableDashboardV2 struct {
-	DashboardV2MetadataBase
-	Name string                 `json:"name" required:"true"`
-	Tags []tagtypes.PostableTag `json:"tags" required:"true"`
-	Spec DashboardSpec          `json:"spec" required:"true"`
-}
-
-func (u *UpdatableDashboardV2) UnmarshalJSON(data []byte) error {
-	dec := json.NewDecoder(bytes.NewReader(data))
-	dec.DisallowUnknownFields()
-	type alias UpdatableDashboardV2
-	var tmp alias
-	if err := dec.Decode(&tmp); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s", err.Error())
-	}
-	*u = UpdatableDashboardV2(tmp)
-	if u.Spec.Display == nil {
-		u.Spec.Display = &common.Display{}
-	}
-	if u.Spec.Display.Name == "" {
-		u.Spec.Display.Name = u.Name
-	}
-	return u.Validate()
-}
-
-func (u *UpdatableDashboardV2) Validate() error {
-	if u.SchemaVersion != SchemaVersion {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "schemaVersion must be %q, got %q", SchemaVersion, u.SchemaVersion)
-	}
-	if err := validateDashboardName(u.Name); err != nil {
-		return err
-	}
-	if err := validateDashboardTags(u.Tags); err != nil {
-		return err
-	}
-	return u.Spec.Validate()
-}
-
-func (d DashboardV2) toUpdatableDashboardV2() UpdatableDashboardV2 {
-	return UpdatableDashboardV2{
-		DashboardV2MetadataBase: d.DashboardV2MetadataBase,
-		Name:                    d.Name,
-		Tags:                    tagtypes.NewPostableTagsFromTags(d.Tags),
-		Spec:                    d.Spec,
-	}
-}
-
 // ════════════════════════════════════════════════════════════════════════
 // Convertors
 // ════════════════════════════════════════════════════════════════════════

pkg/types/dashboardtypes/perses_dashboard_patch.go

@@ -1,83 +0,0 @@
-package dashboardtypes
-
-import (
-	"encoding/json"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/valuer"
-	jsonpatch "github.com/evanphx/json-patch/v5"
-	"github.com/swaggest/jsonschema-go"
-)
-
-// PatchableDashboardV2 is an RFC 6902 patch request.
-type PatchableDashboardV2 struct {
-	// Ops shapes the OpenAPI schema; tagged so swaggest reflects it.
-	Ops []JSONPatchOperation `json:"ops"`
-	// patch holds the decoded payload, set by UnmarshalJSON.
-	patch jsonpatch.Patch
-}
-
-// PrepareJSONSchema collapses the struct's object schema into the bare ops array.
-func (PatchableDashboardV2) PrepareJSONSchema(s *jsonschema.Schema) error {
-	// Called on several passes; only the one with built properties carries `ops`.
-	ops, ok := s.Properties["ops"]
-	if !ok || ops.TypeObject == nil {
-		return nil
-	}
-	*s = *ops.TypeObject
-	return nil
-}
-
-type JSONPatchOperation struct {
-	Op   PatchOp `json:"op" required:"true"`
-	Path string  `json:"path" required:"true" description:"JSON Pointer (RFC 6901) into the dashboard's postable shape — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0, /tags/-."`
-	// `value` is required for add/replace/test.
-	Value any `json:"value,omitempty" description:"Value to add/replace/test against. The expected type depends on the path. Common shapes (see referenced schemas for the exact field set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable; /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a TagtypesPostableTag; /spec/display/name and other leaf string fields take a string. Required for add/replace/test; ignored for remove/move/copy."`
-	// `from` is required for move/copy.
-	From string `json:"from,omitempty" description:"Source JSON Pointer for move/copy ops; ignored for other ops."`
-}
-
-// PatchOp covers the six RFC 6902 JSON Patch verbs.
-type PatchOp struct{ valuer.String }
-
-var (
-	PatchOpAdd     = PatchOp{valuer.NewString("add")}
-	PatchOpRemove  = PatchOp{valuer.NewString("remove")}
-	PatchOpReplace = PatchOp{valuer.NewString("replace")}
-	PatchOpMove    = PatchOp{valuer.NewString("move")}
-	PatchOpCopy    = PatchOp{valuer.NewString("copy")}
-	PatchOpTest    = PatchOp{valuer.NewString("test")}
-)
-
-func (PatchOp) Enum() []any {
-	return []any{PatchOpAdd, PatchOpRemove, PatchOpReplace, PatchOpMove, PatchOpCopy, PatchOpTest}
-}
-
-func (p *PatchableDashboardV2) UnmarshalJSON(data []byte) error {
-	patch, err := jsonpatch.DecodePatch(data)
-	if err != nil {
-		return errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "request body is not a valid RFC 6902 JSON Patch document").WithAdditional(err.Error())
-	}
-	if err := json.Unmarshal(data, &p.Ops); err != nil {
-		return errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "request body is not a valid RFC 6902 JSON Patch document").WithAdditional(err.Error())
-	}
-	p.patch = patch
-	return nil
-}
-
-func (p PatchableDashboardV2) Apply(existing *DashboardV2) (*UpdatableDashboardV2, error) {
-	existingAsUpdatable := existing.toUpdatableDashboardV2()
-	raw, err := json.Marshal(existingAsUpdatable)
-	if err != nil {
-		return nil, errors.WrapInternalf(err, errors.CodeInternal, "marshal existing dashboard for patch")
-	}
-	patched, err := p.patch.ApplyWithOptions(raw, &jsonpatch.ApplyOptions{AllowMissingPathOnRemove: true, EnsurePathExistsOnAdd: true})
-	if err != nil {
-		return nil, errors.Wrap(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "JSON Patch could not be applied to the target dashboard")
-	}
-	out := &UpdatableDashboardV2{}
-	if err := json.Unmarshal(patched, out); err != nil {
-		return nil, err
-	}
-	return out, nil
-}

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -1,569 +0,0 @@
-package dashboardtypes
-
-import (
-	"encoding/json"
-	"strings"
-	"testing"
-
-	"github.com/SigNoz/signoz/pkg/types/tagtypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-)
-
-// basePostableJSON is the postable shape of a small but realistic v2
-// dashboard used as the base document for patch tests. Each panel carries
-// one builder query in the same shape production dashboards use
-// (aggregations, filter, groupBy populated), and the dashboard has one
-// variable — the variable is not patched in any test here, that's
-// covered in a separate variable-focused suite.
-const basePostableJSON = `{
-	"schemaVersion": "v6",
-	"name": "service-overview",
-	"tags": [{"key": "team", "value": "alpha"}, {"key": "env", "value": "prod"}],
-	"spec": {
-		"display": {"name": "Service overview"},
-		"variables": [
-			{
-				"kind": "ListVariable",
-				"spec": {
-					"name": "service",
-					"allowAllValue": true,
-					"allowMultiple": false,
-					"plugin": {
-						"kind": "signoz/DynamicVariable",
-						"spec": {"name": "service.name", "signal": "metrics"}
-					}
-				}
-			}
-		],
-		"panels": {
-			"p1": {
-				"kind": "Panel",
-				"spec": {
-					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
-					"queries": [
-						{
-							"kind": "TimeSeriesQuery",
-							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
-								"name": "A",
-								"signal": "metrics",
-								"aggregations": [{
-									"metricName": "signoz_calls_total",
-									"temporality": "cumulative",
-									"timeAggregation": "rate",
-									"spaceAggregation": "sum"
-								}],
-								"filter": {"expression": "service.name IN $service"},
-								"groupBy": [{"name": "service.name", "fieldDataType": "string", "fieldContext": "tag"}]
-							}}}
-						}
-					]
-				}
-			},
-			"p2": {
-				"kind": "Panel",
-				"spec": {
-					"plugin": {"kind": "signoz/NumberPanel", "spec": {}},
-					"queries": [
-						{
-							"kind": "TimeSeriesQuery",
-							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
-								"name": "X",
-								"signal": "metrics",
-								"aggregations": [{
-									"metricName": "signoz_latency_count",
-									"temporality": "cumulative",
-									"timeAggregation": "rate",
-									"spaceAggregation": "sum"
-								}]
-							}}}
-						}
-					]
-				}
-			}
-		},
-		"layouts": [
-			{
-				"kind": "Grid",
-				"spec": {
-					"display": {"title": "Row 1"},
-					"items": [
-						{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
-						{"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}}
-					]
-				}
-			}
-		],
-		"duration": "1h"
-	}
-}`
-
-func TestPatchableDashboardV2_Apply(t *testing.T) {
-	// Apply doesn't mutate the input *DashboardV2 — it marshals it to
-	// JSON, applies the patch, and unmarshals the result into a fresh
-	// struct. Sharing one base across subtests is safe.
-	var p PostableDashboardV2
-	require.NoError(t, json.Unmarshal([]byte(basePostableJSON), &p), "base postable JSON must validate")
-	testOrgID := valuer.GenerateUUID()
-	base := p.NewDashboardV2(testOrgID, "somecreatedthisiguess@signoz.io", SourceUser)
-	base.Tags = []*tagtypes.Tag{
-		{Key: "team", Value: "alpha"},
-		{Key: "env", Value: "prod"},
-	}
-
-	decode := func(t *testing.T, body string) PatchableDashboardV2 {
-		t.Helper()
-		var patch PatchableDashboardV2
-		require.NoError(t, json.Unmarshal([]byte(body), &patch))
-		return patch
-	}
-
-	// jsonOf marshals the patched dashboard back to JSON so subtests can
-	// assert on field values without reaching into the typed plugin specs.
-	jsonOf := func(t *testing.T, out *UpdatableDashboardV2) string {
-		t.Helper()
-		raw, err := json.Marshal(out)
-		require.NoError(t, err)
-		return string(raw)
-	}
-
-	// ─────────────────────────────────────────────────────────────────
-	// Successful patches
-	// ─────────────────────────────────────────────────────────────────
-
-	t.Run("no-op preserves all fields", func(t *testing.T) {
-		out, err := decode(t, `[]`).Apply(base)
-		require.NoError(t, err)
-		assert.Equal(t, base.DashboardV2MetadataBase, out.DashboardV2MetadataBase)
-		assert.Equal(t, tagtypes.NewPostableTagsFromTags(base.Tags), out.Tags)
-		assert.Equal(t, base.Spec.Display.Name, out.Spec.Display.Name)
-		require.Equal(t, len(base.Spec.Panels), len(out.Spec.Panels))
-		for k, panel := range base.Spec.Panels {
-			require.Contains(t, out.Spec.Panels, k)
-			assert.Equal(t, panel.Spec.Plugin.Kind, out.Spec.Panels[k].Spec.Plugin.Kind)
-		}
-		assert.Len(t, out.Tags, len(base.Tags))
-		assert.Len(t, out.Spec.Variables, len(base.Spec.Variables))
-		assert.Len(t, out.Spec.Layouts, len(base.Spec.Layouts))
-	})
-
-	t.Run("add metadata image", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "add", "path": "/image", "value": "https://example.com/img.png"}]`).Apply(base)
-		require.NoError(t, err)
-		assert.Equal(t, "https://example.com/img.png", out.Image)
-		assert.Equal(t, SchemaVersion, out.SchemaVersion, "schemaVersion preserved")
-	})
-
-	t.Run("replace display name", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/display/name", "value": "Renamed"}]`).Apply(base)
-		require.NoError(t, err)
-		assert.Equal(t, "Renamed", out.Spec.Display.Name)
-	})
-
-	// Per RFC 6902 § 4.1, `add` on an existing object member replaces the
-	// existing value rather than erroring — same effect as `replace`.
-	t.Run("add overwrites existing display name", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "add", "path": "/spec/display/name", "value": "Overwritten"}]`).Apply(base)
-		require.NoError(t, err)
-		assert.Equal(t, "Overwritten", out.Spec.Display.Name)
-	})
-
-	t.Run("add data refreshInterval", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "add", "path": "/spec/refreshInterval", "value": "30s"}]`).Apply(base)
-		require.NoError(t, err)
-		assert.Equal(t, "30s", string(out.Spec.RefreshInterval))
-	})
-
-	t.Run("add panel leaves others untouched", func(t *testing.T) {
-		out, err := decode(t, `[{
-			"op": "add",
-			"path": "/spec/panels/p3",
-			"value": {
-				"kind": "Panel",
-				"spec": {
-					"plugin": {"kind": "signoz/TablePanel", "spec": {}},
-					"queries": [{
-						"kind": "TimeSeriesQuery",
-						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
-							"name": "A",
-							"signal": "logs",
-							"aggregations": [{"expression": "count()"}]
-						}}}
-					}]
-				}
-			}
-		}]`).Apply(base)
-		require.NoError(t, err)
-		assert.Len(t, out.Spec.Panels, 3)
-		assert.Contains(t, out.Spec.Panels, "p3")
-		// Plugin specs round-trip through MarshalJSON which resolves defaults
-		// (e.g. timePreference → "global_time"), so compare the serialized
-		// shape rather than the in-memory structs to skip that normalization.
-		for _, id := range []string{"p1", "p2"} {
-			wantJSON, err := json.Marshal(base.Spec.Panels[id])
-			require.NoError(t, err)
-			gotJSON, err := json.Marshal(out.Spec.Panels[id])
-			require.NoError(t, err)
-			assert.JSONEq(t, string(wantJSON), string(gotJSON), "panel %s untouched", id)
-		}
-	})
-
-	t.Run("replace single panel", func(t *testing.T) {
-		out, err := decode(t, `[{
-			"op": "replace",
-			"path": "/spec/panels/p2",
-			"value": {
-				"kind": "Panel",
-				"spec": {
-					"plugin": {"kind": "signoz/BarChartPanel", "spec": {}},
-					"queries": [{
-						"kind": "TimeSeriesQuery",
-						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
-							"name": "A",
-							"signal": "metrics",
-							"aggregations": [{
-								"metricName": "signoz_calls_total",
-								"temporality": "cumulative",
-								"timeAggregation": "rate",
-								"spaceAggregation": "sum"
-							}]
-						}}}
-					}]
-				}
-			}
-		}]`).Apply(base)
-		require.NoError(t, err)
-		assert.Equal(t, PanelPluginKind("signoz/BarChartPanel"), out.Spec.Panels["p2"].Spec.Plugin.Kind)
-		assert.Equal(t, PanelPluginKind("signoz/TimeSeriesPanel"), out.Spec.Panels["p1"].Spec.Plugin.Kind, "p1 untouched")
-	})
-
-	// Removing a panel realistically also drops its layout item — exercise
-	// the multi-op shape the UI sends.
-	t.Run("remove panel and its layout item", func(t *testing.T) {
-		out, err := decode(t, `[
-			{"op": "remove", "path": "/spec/panels/p2"},
-			{"op": "remove", "path": "/spec/layouts/0/spec/items/1"}
-		]`).Apply(base)
-		require.NoError(t, err)
-		assert.Len(t, out.Spec.Panels, 1)
-		assert.Contains(t, out.Spec.Panels, "p1")
-		assert.NotContains(t, out.Spec.Panels, "p2")
-		raw := jsonOf(t, out)
-		assert.NotContains(t, raw, `"$ref":"#/spec/panels/p2"`)
-		assert.Contains(t, raw, `"$ref":"#/spec/panels/p1"`)
-	})
-
-	// The headline use case: edit a single field of a single query inside
-	// one panel without re-sending any other part of the dashboard.
-	t.Run("rename single query inside panel", func(t *testing.T) {
-		out, err := decode(t, `[{
-			"op": "replace",
-			"path": "/spec/panels/p1/spec/queries/0/spec/plugin/spec/name",
-			"value": "renamed"
-		}]`).Apply(base)
-		require.NoError(t, err)
-
-		require.Len(t, out.Spec.Panels["p1"].Spec.Queries, 1)
-		assert.Contains(t, jsonOf(t, out), `"name":"renamed"`)
-	})
-
-	// Replace a query at a specific index — swaps query "A" out for "B"
-	// without re-sending the rest of the panel.
-	t.Run("replace query at index", func(t *testing.T) {
-		out, err := decode(t, `[{
-			"op": "replace",
-			"path": "/spec/panels/p1/spec/queries/0",
-			"value": {
-				"kind": "TimeSeriesQuery",
-				"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
-					"name": "B",
-					"signal": "metrics",
-					"aggregations": [{
-						"metricName": "signoz_db_calls_total",
-						"temporality": "cumulative",
-						"timeAggregation": "rate",
-						"spaceAggregation": "sum"
-					}]
-				}}}
-			}
-		}]`).Apply(base)
-		require.NoError(t, err)
-		require.Len(t, out.Spec.Panels["p1"].Spec.Queries, 1)
-		raw := jsonOf(t, out)
-		assert.Contains(t, raw, `"name":"B"`)
-		assert.NotContains(t, raw, `"name":"A"`)
-	})
-
-	// ─────────────────────────────────────────────────────────────────
-	// Layout edits
-	// ─────────────────────────────────────────────────────────────────
-
-	t.Run("move panel by editing layout x coordinate", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/x", "value": 6}]`).Apply(base)
-		require.NoError(t, err)
-		raw := jsonOf(t, out)
-		// The first item used to live at x=0, now lives at x=6.
-		assert.Contains(t, raw, `"x":6,"y":0,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
-	})
-
-	t.Run("resize panel by editing layout width", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/width", "value": 12}]`).Apply(base)
-		require.NoError(t, err)
-		raw := jsonOf(t, out)
-		assert.Contains(t, raw, `"width":12`)
-	})
-
-	t.Run("rename layout row title", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/display/title", "value": "Latency"}]`).Apply(base)
-		require.NoError(t, err)
-		assert.Contains(t, jsonOf(t, out), `"title":"Latency"`)
-	})
-
-	t.Run("append layout item", func(t *testing.T) {
-		out, err := decode(t, `[{
-			"op": "add",
-			"path": "/spec/layouts/0/spec/items/-",
-			"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
-		}]`).Apply(base)
-		require.NoError(t, err)
-		// Item count went 2 → 3.
-		raw := jsonOf(t, out)
-		assert.Equal(t, 3, strings.Count(raw, `"$ref":"#/spec/panels/`))
-	})
-
-	// Composing add-panel + add-layout-item is the realistic shape of the
-	// "add a new chart to my dashboard" UI flow — exercise it end-to-end.
-	t.Run("add panel and corresponding layout item", func(t *testing.T) {
-		out, err := decode(t, `[
-			{
-				"op": "add",
-				"path": "/spec/panels/p3",
-				"value": {
-					"kind": "Panel",
-					"spec": {
-						"plugin": {"kind": "signoz/TablePanel", "spec": {}},
-						"queries": [{
-							"kind": "TimeSeriesQuery",
-							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
-								"name": "A",
-								"signal": "logs",
-								"aggregations": [{"expression": "count()"}]
-							}}}
-						}]
-					}
-				}
-			},
-			{
-				"op": "add",
-				"path": "/spec/layouts/0/spec/items/-",
-				"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p3"}}
-			}
-		]`).Apply(base)
-		require.NoError(t, err)
-		assert.Len(t, out.Spec.Panels, 3)
-		raw := jsonOf(t, out)
-		assert.Contains(t, raw, `"$ref":"#/spec/panels/p3"`)
-	})
-
-	t.Run("append tag", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "add", "path": "/tags/-", "value": {"key": "env", "value": "staging"}}]`).Apply(base)
-		require.NoError(t, err)
-		require.Len(t, out.Tags, 3)
-		assert.Equal(t, "env", out.Tags[2].Key)
-		assert.Equal(t, "staging", out.Tags[2].Value)
-	})
-
-	t.Run("append tag when none exist", func(t *testing.T) {
-		noTagsBase := &DashboardV2{
-			DashboardV2MetadataBase: base.DashboardV2MetadataBase,
-			Name:                    base.Name,
-			Tags:                    nil,
-			Spec:                    base.Spec,
-		}
-		out, err := decode(t, `[{"op": "add", "path": "/tags/-", "value": {"key": "team", "value": "new"}}]`).Apply(noTagsBase)
-		require.NoError(t, err)
-		require.Len(t, out.Tags, 1)
-		assert.Equal(t, "team", out.Tags[0].Key)
-		assert.Equal(t, "new", out.Tags[0].Value)
-	})
-
-	t.Run("replace tag value", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/tags/0/value", "value": "beta"}]`).Apply(base)
-		require.NoError(t, err)
-		require.Len(t, out.Tags, 2)
-		assert.Equal(t, "team", out.Tags[0].Key)
-		assert.Equal(t, "beta", out.Tags[0].Value)
-		assert.Equal(t, "env", out.Tags[1].Key, "tag at index 1 untouched")
-		assert.Equal(t, "prod", out.Tags[1].Value, "tag at index 1 untouched")
-		for _, tag := range out.Tags {
-			assert.NotEqual(t, "alpha", tag.Value, "old tag value must be gone")
-		}
-	})
-
-	t.Run("multiple ops applied in order", func(t *testing.T) {
-		out, err := decode(t, `[
-			{"op": "replace", "path": "/spec/display/name", "value": "Multi-step"},
-			{"op": "remove",  "path": "/spec/panels/p2"},
-			{"op": "add",     "path": "/tags/-", "value": {"key": "env", "value": "staging"}}
-		]`).Apply(base)
-		require.NoError(t, err)
-		assert.Equal(t, "Multi-step", out.Spec.Display.Name)
-		assert.Len(t, out.Spec.Panels, 1)
-		assert.Len(t, out.Tags, 3)
-	})
-
-	// `test` is an RFC 6902 precondition op: aborts the patch if the value
-	// at the path doesn't equal the supplied value. Used for optimistic
-	// concurrency. Here it matches, so the subsequent ops apply.
-	t.Run("test op passes", func(t *testing.T) {
-		out, err := decode(t, `[
-			{"op": "test",    "path": "/spec/display/name", "value": "Service overview"},
-			{"op": "replace", "path": "/spec/display/name", "value": "Confirmed"}
-		]`).Apply(base)
-		require.NoError(t, err)
-		assert.Equal(t, "Confirmed", out.Spec.Display.Name)
-	})
-
-	// ─────────────────────────────────────────────────────────────────
-	// Failure cases
-	// ─────────────────────────────────────────────────────────────────
-
-	t.Run("decode rejects non-array body", func(t *testing.T) {
-		var patch PatchableDashboardV2
-		err := json.Unmarshal([]byte(`{"op": "replace"}`), &patch)
-		require.Error(t, err)
-	})
-
-	t.Run("decode rejects malformed JSON", func(t *testing.T) {
-		var patch PatchableDashboardV2
-		// Outer json.Unmarshal rejects non-JSON before PatchableDashboardV2's
-		// UnmarshalJSON runs, so the error is a stdlib SyntaxError rather
-		// than the InvalidInput-classified wrap.
-		err := json.Unmarshal([]byte(`not json`), &patch)
-		require.Error(t, err)
-	})
-
-	// `test` precondition fails — the whole patch is rejected, including
-	// the subsequent replace.
-	t.Run("test op failure rejected", func(t *testing.T) {
-		_, err := decode(t, `[
-			{"op": "test", "path": "/spec/display/name", "value": "Wrong"},
-			{"op": "replace", "path": "/spec/display/name", "value": "Should not apply"}
-		]`).Apply(base)
-		require.Error(t, err)
-	})
-
-	// Lenient apply (AllowMissingPathOnRemove): removing a path that doesn't
-	// exist is a no-op rather than an error, so removes are idempotent.
-	t.Run("remove at missing path is a no-op", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "remove", "path": "/spec/panels/does-not-exist"}]`).Apply(base)
-		require.NoError(t, err)
-		assert.Equal(t, len(base.Spec.Panels), len(out.Spec.Panels), "existing panels untouched")
-	})
-
-	t.Run("remove schemaVersion rejected", func(t *testing.T) {
-		_, err := decode(t, `[{"op": "remove", "path": "/schemaVersion"}]`).Apply(base)
-		require.Error(t, err)
-	})
-
-	t.Run("wrong schemaVersion rejected", func(t *testing.T) {
-		_, err := decode(t, `[{"op": "replace", "path": "/schemaVersion", "value": "v5"}]`).Apply(base)
-		require.Error(t, err)
-		require.Contains(t, err.Error(), SchemaVersion)
-	})
-
-	t.Run("empty display name defaults to dashboard name", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/display/name", "value": ""}]`).Apply(base)
-		require.NoError(t, err)
-		assert.Equal(t, base.Name, out.Spec.Display.Name, "empty display.name should default from name")
-	})
-
-	t.Run("unknown top-level field rejected", func(t *testing.T) {
-		_, err := decode(t, `[{"op": "add", "path": "/bogus", "value": 42}]`).Apply(base)
-		require.Error(t, err)
-		require.Contains(t, err.Error(), "bogus")
-	})
-
-	t.Run("invalid panel kind rejected", func(t *testing.T) {
-		_, err := decode(t, `[{
-			"op": "replace",
-			"path": "/spec/panels/p1",
-			"value": {
-				"kind": "Panel",
-				"spec": {"plugin": {"kind": "signoz/NotAPanel", "spec": {}}}
-			}
-		}]`).Apply(base)
-		require.Error(t, err)
-		require.Contains(t, err.Error(), "NotAPanel")
-	})
-
-	t.Run("query kind incompatible with panel rejected", func(t *testing.T) {
-		// PromQLQuery is not allowed on ListPanel — verify the cross-check
-		// in Validate still runs after a patch.
-		_, err := decode(t, `[{
-			"op": "replace",
-			"path": "/spec/panels/p2",
-			"value": {
-				"kind": "Panel",
-				"spec": {
-					"plugin": {"kind": "signoz/ListPanel", "spec": {}},
-					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
-				}
-			}
-		}]`).Apply(base)
-		require.Error(t, err)
-	})
-
-	t.Run("removing the only query rejected", func(t *testing.T) {
-		// Validate requires exactly one query per panel — leaving zero is rejected.
-		_, err := decode(t, `[{"op": "remove", "path": "/spec/panels/p2/spec/queries/0"}]`).Apply(base)
-		require.Error(t, err)
-		require.Contains(t, err.Error(), "panel must have one query")
-	})
-
-	t.Run("two direct queries rejected", func(t *testing.T) {
-		// Validate requires exactly one query per panel. To display multiple
-		// data sources in one panel, wrap them in a CompositeQuery (see the
-		// "replace query with composite" subtest below).
-		_, err := decode(t, `[{
-			"op": "replace",
-			"path": "/spec/panels/p1",
-			"value": {
-				"kind": "Panel",
-				"spec": {
-					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
-					"queries": [
-						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
-							"name": "A", "signal": "metrics",
-							"aggregations": [{"metricName": "signoz_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
-						}}}},
-						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
-							"name": "B", "signal": "metrics",
-							"aggregations": [{"metricName": "signoz_db_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
-						}}}}
-					]
-				}
-			}
-		}]`).Apply(base)
-		require.Error(t, err)
-		require.Contains(t, err.Error(), "panel must have one query")
-	})
-
-	t.Run("too many tags rejected", func(t *testing.T) {
-		// Base already has 2 tags; add 9 more to exceed MaxTagsPerDashboard (10).
-		_, err := decode(t, `[
-			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "1"}},
-			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "2"}},
-			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "3"}},
-			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "4"}},
-			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "5"}},
-			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "6"}},
-			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "7"}},
-			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "8"}},
-			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "9"}}
-		]`).Apply(base)
-		require.Error(t, err)
-		require.Contains(t, err.Error(), "at most")
-	})
-}