Merge branch 'main' into nv/11280

.github/workflows/build-staging.yaml

@@ -64,10 +64,6 @@ jobs:
         run: |
           mkdir -p frontend
           echo 'CI=1' > frontend/.env
-          echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
-          echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
-          echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
-          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
           echo 'VITE_TUNNEL_URL="${{ secrets.NP_TUNNEL_URL }}"' >> frontend/.env
           echo 'VITE_TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
           echo 'VITE_PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env

.github/workflows/integrationci.yaml

@@ -39,12 +39,10 @@ jobs:
       matrix:
         suite:
           - alerts
-          - basepath
           - callbackauthn
           - cloudintegrations
           - dashboard
           - ingestionkeys
-          - inframonitoring
           - logspipelines
           - passwordauthn
           - preference
@@ -85,7 +83,7 @@ jobs:
         run: |
           cd tests && uv sync
       - name: webdriver
-        if: matrix.suite == 'callbackauthn' || matrix.suite == 'basepath'
+        if: matrix.suite == 'callbackauthn'
         run: |
           wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
           echo "deb http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee -a /etc/apt/sources.list.d/google-chrome.list

cmd/community/server.go

@@ -91,7 +91,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		sqlstoreProviderFactories(),
 		signoz.NewTelemetryStoreProviderFactories(),
 		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
-			return signoz.NewAuthNs(ctx, providerSettings, store, licensing, config.Global)
+			return signoz.NewAuthNs(ctx, providerSettings, store, licensing)
 		},
 		func(ctx context.Context, sqlstore sqlstore.SQLStore, config authz.Config, _ licensing.Licensing, _ []authz.OnBeforeRoleDelete) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
 			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore, config)

cmd/enterprise/server.go

@@ -107,17 +107,17 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		sqlstoreProviderFactories(),
 		signoz.NewTelemetryStoreProviderFactories(),
 		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
-			samlCallbackAuthN, err := samlcallbackauthn.New(ctx, store, licensing, config.Global)
+			samlCallbackAuthN, err := samlcallbackauthn.New(ctx, store, licensing)
 			if err != nil {
 				return nil, err
 			}
 
-			oidcCallbackAuthN, err := oidccallbackauthn.New(store, licensing, providerSettings, config.Global)
+			oidcCallbackAuthN, err := oidccallbackauthn.New(store, licensing, providerSettings)
 			if err != nil {
 				return nil, err
 			}
 
-			authNs, err := signoz.NewAuthNs(ctx, providerSettings, store, licensing, config.Global)
+			authNs, err := signoz.NewAuthNs(ctx, providerSettings, store, licensing)
 			if err != nil {
 				return nil, err
 			}

conf/example.yaml

@@ -440,17 +440,6 @@ traces:
     max_depth_to_auto_expand: 5
     # Threshold below which all spans are returned without windowing.
     max_limit_to_select_all_spans: 10000
-  flamegraph:
-    # Maximum number of BFS depth levels included in a windowed response.
-    max_selected_levels: 50
-    # Maximum spans per level before sampling is applied.
-    max_spans_per_level: 100
-    # Number of highest-latency spans always included when sampling a level.
-    sampling_top_latency_count: 5
-    # Number of timestamp buckets used for uniform sampling within a level.
-    sampling_bucket_count: 50
-    # Threshold below which all spans are returned without windowing or sampling.
-    select_all_spans_limit: 100000
 
 ##################### Authz #################################
 authz:

docs/api/openapi.yml

@@ -1360,10 +1360,6 @@ components:
       - sqs
       - storageaccountsblob
       - cdnprofile
-      - virtualmachine
-      - appservice
-      - containerapp
-      - aks
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -6642,70 +6638,6 @@ components:
       - attribute
       - resource
       type: string
-    SpantypesFlamegraphSpan:
-      properties:
-        attributes:
-          additionalProperties: {}
-          type: object
-        durationNano:
-          minimum: 0
-          type: integer
-        event:
-          items:
-            $ref: '#/components/schemas/SpantypesEvent'
-          type: array
-        hasError:
-          type: boolean
-        level:
-          format: int64
-          type: integer
-        name:
-          type: string
-        parentSpanId:
-          type: string
-        resource:
-          additionalProperties:
-            type: string
-          type: object
-        spanId:
-          type: string
-        timestamp:
-          minimum: 0
-          type: integer
-      required:
-      - spanId
-      - parentSpanId
-      - timestamp
-      - durationNano
-      - hasError
-      - name
-      - level
-      - event
-      - attributes
-      - resource
-      type: object
-    SpantypesGettableFlamegraphTrace:
-      properties:
-        endTimestampMillis:
-          format: int64
-          type: integer
-        hasMore:
-          type: boolean
-        spans:
-          items:
-            items:
-              $ref: '#/components/schemas/SpantypesFlamegraphSpan'
-            type: array
-          type: array
-        startTimestampMillis:
-          format: int64
-          type: integer
-      required:
-      - spans
-      - startTimestampMillis
-      - endTimestampMillis
-      - hasMore
-      type: object
     SpantypesGettableSpanMapperGroups:
       properties:
         items:
@@ -6771,15 +6703,6 @@ components:
         traceId:
           type: string
       type: object
-    SpantypesPostableFlamegraph:
-      properties:
-        selectFields:
-          items:
-            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-          type: array
-        selectedSpanId:
-          type: string
-      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -20612,75 +20535,6 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
-  /api/v3/traces/{traceID}/flamegraph:
-    post:
-      deprecated: false
-      description: Returns the flamegraph view of spans for a given trace ID.
-      operationId: GetFlamegraph
-      parameters:
-      - in: path
-        name: traceID
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/SpantypesPostableFlamegraph'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/SpantypesGettableFlamegraphTrace'
-                  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:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get flamegraph view for a trace
-      tags:
-      - tracedetail
   /api/v3/traces/{traceID}/waterfall:
     post:
       deprecated: false

ee/authn/callbackauthn/oidccallbackauthn/authn.go

@@ -5,12 +5,10 @@ import (
 	"fmt"
 	"log/slog"
 	"net/url"
-	"path"
 
 	"github.com/SigNoz/signoz/pkg/authn"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/client"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
@@ -28,14 +26,13 @@ var defaultScopes []string = []string{"email", "profile", oidc.ScopeOpenID}
 var _ authn.CallbackAuthN = (*AuthN)(nil)
 
 type AuthN struct {
-	settings     factory.ScopedProviderSettings
-	store        authtypes.AuthNStore
-	licensing    licensing.Licensing
-	httpClient   *client.Client
-	globalConfig global.Config
+	settings   factory.ScopedProviderSettings
+	store      authtypes.AuthNStore
+	licensing  licensing.Licensing
+	httpClient *client.Client
 }
 
-func New(store authtypes.AuthNStore, licensing licensing.Licensing, providerSettings factory.ProviderSettings, globalConfig global.Config) (*AuthN, error) {
+func New(store authtypes.AuthNStore, licensing licensing.Licensing, providerSettings factory.ProviderSettings) (*AuthN, error) {
 	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/ee/authn/callbackauthn/oidccallbackauthn")
 
 	httpClient, err := client.New(providerSettings.Logger, providerSettings.TracerProvider, providerSettings.MeterProvider)
@@ -44,11 +41,10 @@ func New(store authtypes.AuthNStore, licensing licensing.Licensing, providerSett
 	}
 
 	return &AuthN{
-		settings:     settings,
-		store:        store,
-		licensing:    licensing,
-		httpClient:   httpClient,
-		globalConfig: globalConfig,
+		settings:   settings,
+		store:      store,
+		licensing:  licensing,
+		httpClient: httpClient,
 	}, nil
 }
 
@@ -201,7 +197,7 @@ func (a *AuthN) oidcProviderAndoauth2Config(ctx context.Context, siteURL *url.UR
 		RedirectURL: (&url.URL{
 			Scheme: siteURL.Scheme,
 			Host:   siteURL.Host,
-			Path:   path.Join(a.globalConfig.ExternalPath(), redirectPath),
+			Path:   redirectPath,
 		}).String(),
 	}, nil
 }

ee/authn/callbackauthn/samlcallbackauthn/authn.go

@@ -6,12 +6,10 @@ import (
 	"encoding/base64"
 	"encoding/pem"
 	"net/url"
-	"path"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/authn"
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
@@ -26,16 +24,14 @@ const (
 var _ authn.CallbackAuthN = (*AuthN)(nil)
 
 type AuthN struct {
-	store        authtypes.AuthNStore
-	licensing    licensing.Licensing
-	globalConfig global.Config
+	store     authtypes.AuthNStore
+	licensing licensing.Licensing
 }
 
-func New(ctx context.Context, store authtypes.AuthNStore, licensing licensing.Licensing, globalConfig global.Config) (*AuthN, error) {
+func New(ctx context.Context, store authtypes.AuthNStore, licensing licensing.Licensing) (*AuthN, error) {
 	return &AuthN{
-		store:        store,
-		licensing:    licensing,
-		globalConfig: globalConfig,
+		store:     store,
+		licensing: licensing,
 	}, nil
 }
 
@@ -136,7 +132,7 @@ func (a *AuthN) serviceProvider(siteURL *url.URL, authDomain *authtypes.AuthDoma
 		return nil, err
 	}
 
-	acsURL := &url.URL{Scheme: siteURL.Scheme, Host: siteURL.Host, Path: path.Join(a.globalConfig.ExternalPath(), redirectPath)}
+	acsURL := &url.URL{Scheme: siteURL.Scheme, Host: siteURL.Host, Path: redirectPath}
 
 	// Note:
 	// The ServiceProviderIssuer is the client id in case of keycloak. Since we set it to the host here, we need to set the client id == host in keycloak.

frontend/jest.setup.ts

@@ -41,15 +41,6 @@ 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/sigNoz.schemas.ts

@@ -2651,10 +2651,6 @@ export enum CloudintegrationtypesServiceIDDTO {
 	sqs = 'sqs',
 	storageaccountsblob = 'storageaccountsblob',
 	cdnprofile = 'cdnprofile',
-	virtualmachine = 'virtualmachine',
-	appservice = 'appservice',
-	containerapp = 'containerapp',
-	aks = 'aks',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -7773,77 +7769,6 @@ export enum SpantypesFieldContextDTO {
 	attribute = 'attribute',
 	resource = 'resource',
 }
-export type SpantypesFlamegraphSpanDTOAttributes = { [key: string]: unknown };
-
-export type SpantypesFlamegraphSpanDTOResource = { [key: string]: string };
-
-export interface SpantypesFlamegraphSpanDTO {
-	/**
-	 * @type object
-	 */
-	attributes: SpantypesFlamegraphSpanDTOAttributes;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	durationNano: number;
-	/**
-	 * @type array
-	 */
-	event: SpantypesEventDTO[];
-	/**
-	 * @type boolean
-	 */
-	hasError: boolean;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	level: number;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	parentSpanId: string;
-	/**
-	 * @type object
-	 */
-	resource: SpantypesFlamegraphSpanDTOResource;
-	/**
-	 * @type string
-	 */
-	spanId: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	timestamp: number;
-}
-
-export interface SpantypesGettableFlamegraphTraceDTO {
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	endTimestampMillis: number;
-	/**
-	 * @type boolean
-	 */
-	hasMore: boolean;
-	/**
-	 * @type array
-	 */
-	spans: SpantypesFlamegraphSpanDTO[][];
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	startTimestampMillis: number;
-}
-
 export type SpantypesSpanMapperGroupConditionDTOAnyOf = {
 	/**
 	 * @type array,null
@@ -8145,17 +8070,6 @@ export interface SpantypesGettableWaterfallTraceDTO {
 	uncollapsedSpans?: string[] | null;
 }
 
-export interface SpantypesPostableFlamegraphDTO {
-	/**
-	 * @type array
-	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
-	/**
-	 * @type string
-	 */
-	selectedSpanId?: string;
-}
-
 export enum SpantypesSpanMapperOperationDTO {
 	move = 'move',
 	copy = 'copy',
@@ -10510,17 +10424,6 @@ export type GetHosts200 = {
 	status: string;
 };
 
-export type GetFlamegraphPathParameters = {
-	traceID: string;
-};
-export type GetFlamegraph200 = {
-	data: SpantypesGettableFlamegraphTraceDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetWaterfallPathParameters = {
 	traceID: string;
 };

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

@@ -12,8 +12,6 @@ import type {
 } from 'react-query';
 
 import type {
-	GetFlamegraph200,
-	GetFlamegraphPathParameters,
 	GetTraceAggregations200,
 	GetTraceAggregationsPathParameters,
 	GetWaterfall200,
@@ -21,7 +19,6 @@ import type {
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
-	SpantypesPostableFlamegraphDTO,
 	SpantypesPostableTraceAggregationsDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
@@ -129,105 +126,6 @@ export const useGetTraceAggregations = <
 > => {
 	return useMutation(getGetTraceAggregationsMutationOptions(options));
 };
-/**
- * Returns the flamegraph view of spans for a given trace ID.
- * @summary Get flamegraph view for a trace
- */
-export const getFlamegraph = (
-	{ traceID }: GetFlamegraphPathParameters,
-	spantypesPostableFlamegraphDTO?: BodyType<SpantypesPostableFlamegraphDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetFlamegraph200>({
-		url: `/api/v3/traces/${traceID}/flamegraph`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: spantypesPostableFlamegraphDTO,
-		signal,
-	});
-};
-
-export const getGetFlamegraphMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getFlamegraph>>,
-		TError,
-		{
-			pathParams: GetFlamegraphPathParameters;
-			data?: BodyType<SpantypesPostableFlamegraphDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof getFlamegraph>>,
-	TError,
-	{
-		pathParams: GetFlamegraphPathParameters;
-		data?: BodyType<SpantypesPostableFlamegraphDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['getFlamegraph'];
-	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 getFlamegraph>>,
-		{
-			pathParams: GetFlamegraphPathParameters;
-			data?: BodyType<SpantypesPostableFlamegraphDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return getFlamegraph(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type GetFlamegraphMutationResult = NonNullable<
-	Awaited<ReturnType<typeof getFlamegraph>>
->;
-export type GetFlamegraphMutationBody =
-	| BodyType<SpantypesPostableFlamegraphDTO>
-	| undefined;
-export type GetFlamegraphMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get flamegraph view for a trace
- */
-export const useGetFlamegraph = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getFlamegraph>>,
-		TError,
-		{
-			pathParams: GetFlamegraphPathParameters;
-			data?: BodyType<SpantypesPostableFlamegraphDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof getFlamegraph>>,
-	TError,
-	{
-		pathParams: GetFlamegraphPathParameters;
-		data?: BodyType<SpantypesPostableFlamegraphDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getGetFlamegraphMutationOptions(options));
-};
 /**
  * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
  * @summary Get waterfall view for a trace

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -1,11 +1,5 @@
 // TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
 
-$dropdown-base-height: 250px;
-$recents-header-height: 30px;
-$recent-row-height: 36px;
-// how many recents are rendered, this caps how tall the dropdown can grow to fit them.
-$max-recents-shown: 5;
-
 .code-mirror-where-clause {
 	width: 100%;
 	display: flex;
@@ -123,23 +117,7 @@ $max-recents-shown: 5;
 				width: 100% !important;
 				max-width: 100% !important;
 				font-family: 'Space Mono', monospace !important;
-				max-height: $dropdown-base-height !important;
-				overflow-y: auto !important;
-
-				// Recents render at the top of the dropdown ahead of regular suggestions.
-				// At the base max-height, having recents in view would crowd out the
-				// suggestion list below. This loop grows the dropdown by one row's worth
-				// of height for every recent present (up to $max-recents-shown), plus the
-				// section header. `:has(> li:nth-of-type(N) .cm-completionIcon-recent)`
-				// matches when the Nth child of <ul> is a recent — i.e. there are at
-				// least N recents visible.
-				@for $i from 1 through $max-recents-shown {
-					&:has(> li:nth-of-type(#{$i}) .cm-completionIcon-recent) {
-						max-height: $dropdown-base-height +
-							$recents-header-height +
-							($i * $recent-row-height) !important;
-					}
-				}
+				min-height: 200px !important;
 
 				&::-webkit-scrollbar {
 					width: 0.3rem;
@@ -155,19 +133,6 @@ $max-recents-shown: 5;
 					background: transparent;
 				}
 
-				completion-section {
-					display: block;
-					padding: 10px 12px 6px;
-					font-size: 10px !important;
-					font-weight: 700;
-					letter-spacing: 0.08em;
-					text-transform: uppercase;
-					color: var(--l3-foreground, var(--l2-foreground));
-					opacity: 0.7;
-					border-bottom: 0;
-					background-color: transparent;
-				}
-
 				li {
 					width: 100% !important;
 					max-width: 100% !important;
@@ -194,78 +159,11 @@ $max-recents-shown: 5;
 						display: none !important;
 					}
 
-					.cm-completionDetail {
-						margin-left: auto;
-						font-style: normal;
-						font-size: var(--periscope-font-size-small, 11px);
-						font-weight: 600;
-						letter-spacing: 0.06em;
-						text-transform: uppercase;
-						opacity: 0.55;
-					}
-
 					&[aria-selected='true'] {
 						background: var(--l3-background) !important;
 						font-weight: 600 !important;
 					}
 				}
-
-				li:has(.cm-completionIcon-recent) {
-					&:hover .cm-recent-delete,
-					&[aria-selected='true'] .cm-recent-delete {
-						opacity: 1;
-					}
-				}
-
-				li .cm-completionLabel {
-					flex: 1;
-					min-width: 0;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-
-				.cm-recent-delete {
-					margin-left: 8px;
-					display: inline-flex;
-					align-items: center;
-					justify-content: center;
-					width: 20px;
-					height: 20px;
-					padding: 0;
-					border: 0;
-					border-radius: 4px;
-					background: transparent;
-					color: var(--l2-foreground);
-					font-size: 18px;
-					line-height: 1;
-					cursor: pointer;
-					opacity: 0.5;
-					transition:
-						opacity 0.12s ease,
-						background-color 0.12s ease;
-
-					&:hover {
-						opacity: 1;
-						background: color-mix(in srgb, var(--l2-foreground) 18%, transparent);
-					}
-				}
-			}
-
-			&::after {
-				content: '↓↑ to navigate · ↵ to apply · esc to dismiss';
-				display: block;
-				padding: 8px 12px;
-				border-top: 1px solid var(--l1-border);
-				font-family: 'Space Mono', monospace;
-				font-size: 11px;
-				font-weight: 500;
-				letter-spacing: 0.02em;
-				color: var(--l2-foreground);
-				opacity: 0.6;
-				background: color-mix(in srgb, var(--l1-background) 50%, transparent);
-				border-bottom-left-radius: 4px;
-				border-bottom-right-radius: 4px;
 			}
 		}
 

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

@@ -46,15 +46,8 @@ import {
 import { validateQuery } from 'utils/queryValidationUtils';
 import { unquote } from 'utils/stringUtils';
 
-import { getRecentQueries } from 'lib/recentQueries/getRecentQueries';
-import type { SignalType } from 'types/api/v5/queryRange';
-
-import { queryExamples, SUGGESTIONS_SECTION } from './constants';
-import {
-	combineInitialAndUserExpression,
-	getRecentOptions,
-	renderRecentDeleteButton,
-} from './utils';
+import { queryExamples } from './constants';
+import { combineInitialAndUserExpression } from './utils';
 
 import './QuerySearch.styles.scss';
 
@@ -1257,41 +1250,6 @@ function QuerySearch({
 		};
 	}
 
-	const signal = dataSource as SignalType;
-
-	function combinedSuggestions(
-		context: CompletionContext,
-	): CompletionResult | null {
-		const fullDoc = context.state.doc.toString();
-		const recentOptions = getRecentOptions(
-			getRecentQueries(signal, signalSource ?? ''),
-			fullDoc,
-		);
-		const result = autoSuggestions(context);
-
-		const suggestionOptions = (result?.options || []).map((opt) => ({
-			...opt,
-			section: SUGGESTIONS_SECTION,
-		}));
-
-		if (recentOptions.length === 0 && suggestionOptions.length === 0) {
-			return result;
-		}
-
-		if (!result) {
-			return {
-				from: 0,
-				to: fullDoc.length,
-				options: recentOptions,
-			};
-		}
-
-		return {
-			...result,
-			options: [...recentOptions, ...suggestionOptions],
-		};
-	}
-
 	// Effect to handle focus state and trigger suggestions
 	useEffect(() => {
 		const clearTimeout = toggleSuggestions(10);
@@ -1440,12 +1398,11 @@ function QuerySearch({
 					})}
 					extensions={[
 						autocompletion({
-							override: [combinedSuggestions],
+							override: [autoSuggestions],
 							defaultKeymap: true,
 							closeOnBlur: true,
 							activateOnTyping: true,
 							maxRenderedOptions: 50,
-							addToOptions: [{ render: renderRecentDeleteButton, position: 100 }],
 						}),
 						javascript({ jsx: false, typescript: false }),
 						EditorView.lineWrapping,

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/constants.ts

@@ -1,14 +1,3 @@
-export const RECENTS_SECTION = { name: 'Recent searches', rank: 1 } as const;
-export const SUGGESTIONS_SECTION = { name: 'Suggestions', rank: 2 } as const;
-
-// Custom CodeMirror Completion.type for recent-query entries. Used to discriminate
-// recents from regular autocomplete completions in renderers and event handlers.
-export const RECENT_COMPLETION_TYPE = 'recent';
-
-// Max number of recents rendered in the autocomplete dropdown.
-//  Do change $max-recents-shown: in QuerySearch.styles.scss if you change this.
-export const RECENTS_DISPLAY_CAP = 5;
-
 export const queryExamples = [
 	{
 		label: 'Basic Query',

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/utils.ts

@@ -1,19 +1,3 @@
-import { closeCompletion, startCompletion } from '@codemirror/autocomplete';
-import type { Completion } from '@codemirror/autocomplete';
-import type { EditorView } from '@uiw/react-codemirror';
-import dayjs from 'dayjs';
-import { normalizeFilterExpression } from 'lib/recentQueries/normalize';
-import * as recentQueriesStore from 'lib/recentQueries/recentQueriesStore';
-import type { RecentQueryEntry } from 'lib/recentQueries/types';
-import type { SignalType } from 'types/api/v5/queryRange';
-import 'utils/timeUtils';
-
-import {
-	RECENT_COMPLETION_TYPE,
-	RECENTS_DISPLAY_CAP,
-	RECENTS_SECTION,
-} from './constants';
-
 export function combineInitialAndUserExpression(
 	initial: string,
 	user: string,
@@ -54,106 +38,3 @@ export function getUserExpressionFromCombined(
 	}
 	return c;
 }
-
-// Filters and projects a list of recent-query entries into CodeMirror completions.
-// Entries are supplied by the caller (typically via the useRecents hook) so this
-// function stays pure and React doesn't have to re-subscribe inside CodeMirror's
-// autocomplete callback.
-export function getRecentOptions(
-	entries: RecentQueryEntry[],
-	fullDoc: string,
-): Completion[] {
-	const normalizedDoc = normalizeFilterExpression(fullDoc);
-
-	const matches = entries
-		.filter((e) => {
-			const normalizedRecent = normalizeFilterExpression(e.filter.expression);
-			if (normalizedRecent === normalizedDoc) {
-				return false;
-			}
-			if (normalizedDoc === '') {
-				return true;
-			}
-			return normalizedRecent.includes(normalizedDoc);
-		})
-		.slice(0, RECENTS_DISPLAY_CAP);
-
-	return matches.map((entry, index) => ({
-		label: entry.filter.expression,
-		type: RECENT_COMPLETION_TYPE,
-		// CodeMirror sorts within a section by boost desc, then label asc. The store
-		// returns entries newest-first, so we mirror that by giving the newest entry
-		// the highest boost — otherwise CM falls back to alphabetical order and the
-		// "most recently used" expectation breaks. Stays within the recents section
-		// because section.rank keeps recents above suggestions regardless of boost.
-		boost: matches.length - index,
-		section: RECENTS_SECTION,
-		detail: dayjs(entry.lastUsedAt).fromNow(),
-		recentId: entry.id,
-		recentSignal: entry.signal,
-		recentSource: entry.source,
-		apply: (view: EditorView): void => {
-			view.dispatch({
-				changes: {
-					from: 0,
-					to: view.state.doc.length,
-					insert: entry.filter.expression,
-				},
-				selection: { anchor: entry.filter.expression.length },
-			});
-			closeCompletion(view);
-		},
-	}));
-}
-
-export function renderRecentDeleteButton(
-	completion: Completion,
-	_state: unknown,
-	view: EditorView | null,
-): Node | null {
-	if (completion.type !== RECENT_COMPLETION_TYPE) {
-		return null;
-	}
-
-	const c = completion as Completion & {
-		recentId?: string;
-		recentSignal?: SignalType;
-		recentSource?: string;
-	};
-
-	const btn = document.createElement('button');
-	btn.type = 'button';
-	btn.className = 'cm-recent-delete';
-	btn.setAttribute('aria-label', 'Remove from recent searches');
-	btn.title = 'Remove from recent searches';
-	btn.textContent = '×';
-	queueMicrotask(() => {
-		if (btn.parentElement) {
-			btn.parentElement.title = completion.label;
-		}
-	});
-
-	const stop = (e: Event): void => {
-		e.preventDefault();
-		e.stopPropagation();
-	};
-	// CodeMirror's autocomplete closes the popup on pointerdown / mousedown outside
-	// the editor. The delete button lives inside the popup, so we must stop those
-	// events early — otherwise clicking × would dismiss the dropdown before the
-	// click handler fires and the entry wouldn't actually get removed.
-	btn.addEventListener('pointerdown', stop);
-	btn.addEventListener('mousedown', stop);
-	btn.addEventListener('click', (e) => {
-		stop(e);
-		if (!c.recentId || !c.recentSignal) {
-			return;
-		}
-		recentQueriesStore.remove(c.recentId, c.recentSignal, c.recentSource ?? '');
-		if (view) {
-			view.focus();
-			startCompletion(view);
-		}
-	});
-
-	return btn;
-}

frontend/src/container/AIAssistant/events.ts

@@ -70,7 +70,6 @@ export const AIAssistantOpenSource = {
 	Icon: 'icon',
 	Shortcut: 'shortcut',
 	Cmdk: 'cmdk',
-	TraceDetails: 'trace_details',
 } as const;
 export type AIAssistantOpenSource =
 	(typeof AIAssistantOpenSource)[keyof typeof AIAssistantOpenSource];

frontend/src/container/BillingContainer/CancelSubscriptionBanner.module.scss

@@ -67,40 +67,3 @@
 	background: var(--secondary-background);
 	border: 1px solid var(--l1-border);
 }
-
-.fallbackBody {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-}
-
-.fallbackHint {
-	font-size: var(--paragraph-base-400-font-size);
-	font-weight: var(--paragraph-base-400-font-weight);
-	line-height: var(--paragraph-base-400-line-height);
-	color: var(--l2-foreground);
-	margin: 0;
-}
-
-.fallbackEmail {
-	font-size: var(--paragraph-base-500-font-size);
-	font-weight: var(--paragraph-base-500-font-weight);
-	color: var(--l1-foreground);
-	word-break: break-all;
-}
-
-.fallbackActions {
-	display: flex;
-	gap: var(--spacing-3);
-	flex-wrap: wrap;
-	padding-top: var(--padding-4);
-}
-
-.retryLink {
-	box-sizing: border-box;
-	text-decoration: none;
-
-	&:hover {
-		text-decoration: none;
-	}
-}

frontend/src/container/BillingContainer/CancelSubscriptionBanner.test.tsx

@@ -9,37 +9,7 @@ jest.mock('utils/basePath', () => ({
 	getBaseUrl: (): string => 'https://test.signoz.io',
 }));
 
-function mockMailto(): {
-	mockClick: jest.Mock;
-	appendSpy: jest.SpyInstance;
-	removeSpy: jest.SpyInstance;
-} {
-	const mockClick = jest.fn();
-	const realCreateElement = document.createElement.bind(document);
-
-	// Create a real anchor so JSDOM's appendChild/removeChild accept it.
-	// Override its click() so no navigation occurs.
-	jest
-		.spyOn(document, 'createElement')
-		.mockImplementation((tag: string, options?: ElementCreationOptions) => {
-			if (tag === 'a') {
-				const anchor = realCreateElement('a') as HTMLAnchorElement;
-				anchor.click = mockClick;
-				return anchor;
-			}
-			return realCreateElement(tag, options);
-		});
-
-	const appendSpy = jest.spyOn(document.body, 'appendChild');
-	const removeSpy = jest.spyOn(document.body, 'removeChild');
-	return { mockClick, appendSpy, removeSpy };
-}
-
 describe('CancelSubscriptionBanner', () => {
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
 	it('renders banner with title and subtitle', () => {
 		render(<CancelSubscriptionBanner />);
 		expect(
@@ -65,10 +35,12 @@ describe('CancelSubscriptionBanner', () => {
 			screen.getByText(/Cancelling your subscription would stop your data/i),
 		).toBeInTheDocument();
 		expect(screen.getByText(/Type/i)).toBeInTheDocument();
-		expect(screen.getByTestId('cancel-confirm-input')).toBeInTheDocument();
+		expect(
+			screen.getByPlaceholderText(/Enter the word cancel/i),
+		).toBeInTheDocument();
 		expect(screen.getByRole('button', { name: /go back/i })).toBeInTheDocument();
 		expect(
-			screen.getByTestId('cancel-subscription-confirm-btn'),
+			screen.getByRole('button', { name: /cancel subscription/i }),
 		).toBeInTheDocument();
 	});
 
@@ -80,10 +52,12 @@ describe('CancelSubscriptionBanner', () => {
 			screen.getByRole('button', { name: /cancel subscription/i }),
 		);
 
-		const confirmButton = screen.getByTestId('cancel-subscription-confirm-btn');
+		const confirmButton = screen.getByRole('button', {
+			name: /cancel subscription/i,
+		});
 		expect(confirmButton).toBeDisabled();
 
-		const input = screen.getByTestId('cancel-confirm-input');
+		const input = screen.getByPlaceholderText(/Enter the word cancel/i);
 		await user.type(input, 'canc');
 		expect(confirmButton).toBeDisabled();
 
@@ -99,7 +73,7 @@ describe('CancelSubscriptionBanner', () => {
 			screen.getByRole('button', { name: /cancel subscription/i }),
 		);
 
-		const input = screen.getByTestId('cancel-confirm-input');
+		const input = screen.getByPlaceholderText(/Enter the word cancel/i);
 		await user.type(input, 'cancel');
 
 		await user.click(screen.getByRole('button', { name: /go back/i }));
@@ -110,11 +84,19 @@ describe('CancelSubscriptionBanner', () => {
 		await user.click(
 			screen.getByRole('button', { name: /cancel subscription/i }),
 		);
-		expect(screen.getByTestId('cancel-confirm-input')).toHaveValue('');
+		expect(screen.getByPlaceholderText(/Enter the word cancel/i)).toHaveValue('');
 	});
 
-	it('fires mailto via DOM-attached anchor and shows fallback view after confirming', async () => {
-		const { mockClick, appendSpy, removeSpy } = mockMailto();
+	it('sends mailto to cloud-support with correct subject after typing "cancel"', async () => {
+		const realCreateElement = document.createElement.bind(document);
+		const mockClick = jest.fn();
+		const mockAnchor = { href: '', click: mockClick };
+		jest.spyOn(document, 'createElement').mockImplementation((tag: string) => {
+			if (tag === 'a') {
+				return mockAnchor as unknown as HTMLAnchorElement;
+			}
+			return realCreateElement(tag);
+		});
 
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
@@ -122,85 +104,18 @@ describe('CancelSubscriptionBanner', () => {
 		await user.click(
 			screen.getByRole('button', { name: /cancel subscription/i }),
 		);
-		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
-		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 
-		const appendedAnchor = appendSpy.mock.calls
-			.map(([node]) => node)
-			.find(
-				(node): node is HTMLAnchorElement =>
-					node instanceof HTMLAnchorElement && node.href.startsWith('mailto:'),
-			);
-		expect(appendedAnchor).toBeDefined();
+		const input = screen.getByPlaceholderText(/Enter the word cancel/i);
+		await user.type(input, 'cancel');
+
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
+
+		expect(mockAnchor.href).toContain('mailto:cloud-support@signoz.io');
+		expect(mockAnchor.href).toContain('Cancel%20My%20SigNoz%20Subscription');
 		expect(mockClick).toHaveBeenCalledTimes(1);
-		expect(removeSpy.mock.calls.some(([node]) => node === appendedAnchor)).toBe(
-			true,
-		);
 
-		expect(
-			screen.getByText(/An email draft has been opened/i),
-		).toBeInTheDocument();
-		expect(screen.getByText('cloud-support@signoz.io')).toBeInTheDocument();
-		expect(screen.getByTestId('copy-email-template-btn')).toBeInTheDocument();
-		expect(screen.getByTestId('retry-mailto-btn')).toBeInTheDocument();
-	});
-
-	it('copies email template to clipboard when Copy button is clicked', async () => {
-		mockMailto();
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<CancelSubscriptionBanner />);
-
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
-		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
-		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
-
-		await user.click(screen.getByTestId('copy-email-template-btn'));
-
-		await waitFor(() =>
-			expect(screen.getByTestId('copy-email-template-btn')).toHaveTextContent(
-				'Copied!',
-			),
-		);
-	});
-
-	it('retry link is a native anchor with correct mailto href in fallback view', async () => {
-		mockMailto();
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<CancelSubscriptionBanner />);
-
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
-		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
-		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
-
-		const retryLink = screen.getByTestId('retry-mailto-btn');
-		expect(retryLink.tagName).toBe('A');
-		expect(retryLink).toHaveAttribute(
-			'href',
-			expect.stringContaining('mailto:cloud-support@signoz.io'),
-		);
-	});
-
-	it('closes fallback view when Close is clicked and resets state', async () => {
-		mockMailto();
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<CancelSubscriptionBanner />);
-
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
-		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
-		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
-
-		await user.click(screen.getByRole('button', { name: /close/i }));
-		await waitFor(() =>
-			expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
-		);
+		jest.restoreAllMocks();
 	});
 });

frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx

@@ -1,100 +1,27 @@
-import { useEffect, useRef, useState } from 'react';
-import {
-	CircleCheck,
-	Copy,
-	MailOpen,
-	SolidInfoCircle,
-	Undo2,
-	X,
-} from '@signozhq/icons';
+import { useState } from 'react';
+import { SolidInfoCircle, Undo2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
 import { pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { useCopyToClipboard } from 'react-use';
 import { getBaseUrl } from 'utils/basePath';
-import { Color } from '@signozhq/design-tokens';
 
 import styles from './CancelSubscriptionBanner.module.scss';
-
-const SUPPORT_EMAIL = 'cloud-support@signoz.io';
-const MAX_MAILTO_URI_LENGTH = 1800;
-
-type DialogView = 'confirm' | 'fallback';
-
-function buildEmailBody(orgName: string, userEmail: string): string {
-	return [
-		'Hi SigNoz Team,',
-		'',
-		'I would like to cancel my SigNoz Cloud subscription.',
-		'Please find my account details below.',
-		'',
-		'Account Details:',
-		`  • SigNoz URL: ${getBaseUrl()}`,
-		...(orgName ? [`  • Organization: ${orgName}`] : []),
-		`  • Account Email: ${userEmail}`,
-		'',
-		'Reason for Cancellation:',
-		'[Please share the reason for cancellation]',
-		'',
-		'Additional feedback (optional):',
-		'[Any other feedback]',
-		'',
-		'Regards,',
-		'[user name or team name]',
-	].join('\n');
-}
-
-function buildMailtoUri(orgName: string, userEmail: string): string {
-	const subject = encodeURIComponent('Cancel My SigNoz Subscription');
-	const body = encodeURIComponent(buildEmailBody(orgName, userEmail));
-	const full = `mailto:${SUPPORT_EMAIL}?subject=${subject}&body=${body}`;
-	if (full.length <= MAX_MAILTO_URI_LENGTH) {
-		return full;
-	}
-	const shortBody = encodeURIComponent(
-		'Hi SigNoz Team,\n\nI would like to cancel my SigNoz Cloud subscription.\nPlease find my account details and reason for cancellation below.\n\n[Your details here]\n\nRegards,',
-	);
-	return `mailto:${SUPPORT_EMAIL}?subject=${subject}&body=${shortBody}`;
-}
-
-function openMailto(uri: string): void {
-	const link = document.createElement('a');
-	link.href = uri;
-	link.style.display = 'none';
-	document.body.appendChild(link);
-	link.click();
-	document.body.removeChild(link);
-}
+import { Color } from '@signozhq/design-tokens';
 
 function CancelSubscriptionBanner(): JSX.Element {
-	const [dialogView, setDialogView] = useState<DialogView | null>(null);
+	const [open, setOpen] = useState(false);
 	const [confirmText, setConfirmText] = useState('');
-	const [copied, setCopied] = useState(false);
-	const [, copyToClipboard] = useCopyToClipboard();
-	const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const { user, org } = useAppContext();
 
-	useEffect(
-		() => (): void => {
-			if (copyTimerRef.current) {
-				clearTimeout(copyTimerRef.current);
-			}
-		},
-		[],
-	);
-
-	const orgName = org?.[0]?.displayName ?? '';
-	const userEmail = user?.email ?? '';
-
 	const handleOpenCancelDialog = (): void => {
 		void logEvent('Billing : Cancel Subscription Clicked', {
 			user: pick(user, ['email', 'displayName', 'role', 'organization']),
 			role: user?.role,
 		});
-		setDialogView('confirm');
+		setOpen(true);
 	};
 
 	const handleContactSupport = (): void => {
@@ -102,41 +29,43 @@ function CancelSubscriptionBanner(): JSX.Element {
 			user: pick(user, ['email', 'displayName', 'role', 'organization']),
 			role: user?.role,
 		});
-		openMailto(buildMailtoUri(orgName, userEmail));
+		const subject = encodeURIComponent('Cancel My SigNoz Subscription');
+		const orgName = org?.[0]?.displayName ?? '';
+		const body = encodeURIComponent(
+			[
+				'Hi SigNoz Team,',
+				'',
+				'I would like to cancel my SigNoz Cloud subscription.',
+				'Please find my account details below.',
+				'',
+				'Account Details:',
+				`  • SigNoz URL: ${getBaseUrl()}`,
+				...(orgName ? [`  • Organization: ${orgName}`] : []),
+				`  • Account Email: ${user?.email ?? ''}`,
+				'',
+				'Reason for Cancellation:',
+				'[Please share the reason for cancellation]',
+				'',
+				'Additional feedback (optional):',
+				'[Any other feedback]',
+				'',
+				'Regards,',
+				'[user name or team name]',
+			].join('\n'),
+		);
+		const link = document.createElement('a');
+		link.href = `mailto:cloud-support@signoz.io?subject=${subject}&body=${body}`;
+		link.click();
+		setOpen(false);
 		setConfirmText('');
-		setDialogView('fallback');
-	};
-
-	const handleCopyTemplate = (): void => {
-		void logEvent('Billing : Cancel Subscription Email Template Copied', {
-			user: pick(user, ['email', 'displayName', 'role', 'organization']),
-			role: user?.role,
-		});
-		copyToClipboard(buildEmailBody(orgName, userEmail));
-		setCopied(true);
-		if (copyTimerRef.current) {
-			clearTimeout(copyTimerRef.current);
-		}
-		copyTimerRef.current = setTimeout(() => setCopied(false), 2000);
-	};
-
-	const handleRetryMailto = (): void => {
-		void logEvent('Billing : Cancel Subscription Email Client Reopened', {
-			user: pick(user, ['email', 'displayName', 'role', 'organization']),
-			role: user?.role,
-		});
 	};
 
 	const handleClose = (): void => {
-		if (copyTimerRef.current) {
-			clearTimeout(copyTimerRef.current);
-		}
-		setDialogView(null);
+		setOpen(false);
 		setConfirmText('');
-		setCopied(false);
 	};
 
-	const confirmFooter = (
+	const footer = (
 		<>
 			<Button
 				variant="solid"
@@ -152,19 +81,12 @@ function CancelSubscriptionBanner(): JSX.Element {
 				prefix={<X size={14} />}
 				disabled={confirmText !== 'cancel'}
 				onClick={handleContactSupport}
-				data-testid="cancel-subscription-confirm-btn"
 			>
 				Cancel subscription
 			</Button>
 		</>
 	);
 
-	const fallbackFooter = (
-		<Button variant="solid" color="secondary" onClick={handleClose}>
-			Close
-		</Button>
-	);
-
 	return (
 		<>
 			<div className={styles.banner}>
@@ -189,67 +111,27 @@ function CancelSubscriptionBanner(): JSX.Element {
 				</Button>
 			</div>
 			<DialogWrapper
-				open={dialogView !== null}
+				open={open}
 				onOpenChange={handleClose}
 				title="Cancel your subscription?"
 				width="narrow"
 				showCloseButton={false}
-				footer={dialogView === 'confirm' ? confirmFooter : fallbackFooter}
+				footer={footer}
 			>
-				{dialogView === 'confirm' && (
-					<div className={styles.dialogBody}>
-						<p className={styles.dialogDescription}>
-							Cancelling your subscription would stop your data from being ingested to
-							SigNoz. All the data that has been already sent will also be deleted.
-						</p>
-						<p className={styles.dialogConfirmLabel}>
-							Type <code>cancel</code> to confirm the cancellation.
-						</p>
-						<Input
-							placeholder="Enter the word cancel..."
-							value={confirmText}
-							onChange={(e): void => setConfirmText(e.target.value)}
-							data-testid="cancel-confirm-input"
-						/>
-					</div>
-				)}
-				{dialogView === 'fallback' && (
-					<div className={styles.fallbackBody}>
-						<p className={styles.fallbackHint}>
-							An email draft has been opened. If it did not open, send your
-							cancellation request directly to:
-						</p>
-						<span className={styles.fallbackEmail}>{SUPPORT_EMAIL}</span>
-						<div className={styles.fallbackActions}>
-							<Button
-								variant="outlined"
-								color="secondary"
-								prefix={copied ? <CircleCheck size={14} /> : <Copy size={14} />}
-								onClick={handleCopyTemplate}
-								data-testid="copy-email-template-btn"
-							>
-								{copied ? 'Copied!' : 'Copy email template'}
-							</Button>
-							<Button
-								asChild
-								variant="outlined"
-								color="secondary"
-								data-testid="retry-mailto-btn"
-							>
-								<a
-									href={buildMailtoUri(orgName, userEmail)}
-									onClick={handleRetryMailto}
-									className={styles.retryLink}
-									target="_blank"
-									rel="noopener noreferrer"
-								>
-									<MailOpen size={14} />
-									Reopen email client
-								</a>
-							</Button>
-						</div>
-					</div>
-				)}
+				<div className={styles.dialogBody}>
+					<p className={styles.dialogDescription}>
+						Cancelling your subscription would stop your data from being ingested to
+						SigNoz. All the data that has been already sent will also be deleted.
+					</p>
+					<p className={styles.dialogConfirmLabel}>
+						Type <code>cancel</code> to confirm the cancellation.
+					</p>
+					<Input
+						placeholder="Enter the word cancel..."
+						value={confirmText}
+						onChange={(e): void => setConfirmText(e.target.value)}
+					/>
+				</div>
 			</DialogWrapper>
 		</>
 	);

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 UPlotLegend from 'lib/uPlotV2/components/Legend/UPlotLegend';
+import Legend from 'lib/uPlotV2/components/Legend/Legend';
 import {
 	LegendPosition,
 	TooltipRenderArgs,
@@ -47,7 +47,7 @@ export default function ChartWrapper({
 				return null;
 			}
 			return (
-				<UPlotLegend
+				<Legend
 					config={config}
 					position={legendConfig.position}
 					averageLegendWidth={averageLegendWidth}

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

@@ -1,67 +0,0 @@
-.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;
-}
-.pieChartTooltipContent {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-}
-
-.pieChartIndicator {
-	width: 12px;
-	height: 12px;
-	border-radius: 2px;
-	margin-right: 8px;
-	display: inline-block;
-}
-
-.pieChartTooltipValue {
-	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.
-.pieChartLegend {
-	flex: 0 0 auto;
-	min-height: 0;
-	min-width: 0;
-	padding: 8px;
-}

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

@@ -1,235 +0,0 @@
-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 { usePieInteractions } from '../../hooks/usePieInteractions';
-import PieArc from './PieArc';
-import PieCenterLabel from './PieCenterLabel';
-import styles from './Pie.module.scss';
-import { PieTooltipData } from './types';
-import { getFillColor } from './utils';
-
-/**
- * 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 { width, height, legendWidth, legendHeight, averageLegendWidth } =
-		useMemo(
-			() =>
-				calculateChartDimensions({
-					containerWidth,
-					containerHeight,
-					legendConfig: { position },
-					seriesLabels: data.map((slice) => slice.label),
-				}),
-			[containerWidth, containerHeight, position, data],
-		);
-
-	// Donut geometry derived from the allocated chart box.
-	const { size, radius, innerRadius } = useMemo(() => {
-		const nextSize = Math.min(width, height);
-		const nextRadius = nextSize * 0.35;
-		return {
-			size: nextSize,
-			radius: nextRadius,
-			innerRadius: nextRadius * 0.6,
-		};
-	}, [width, height]);
-
-	const totalValue = useMemo(
-		() => visibleData.reduce((sum, slice) => sum + slice.value, 0),
-		[visibleData],
-	);
-
-	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 + height / 2,
-				tooltipLeft: centroidX + width / 2,
-			});
-			setActive(slice);
-		},
-		[showTooltip, setActive, yAxisUnit, decimalPrecision, height, 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, height }}>
-				{size > 0 && (
-					<svg width={width} height={height} ref={containerRef}>
-						<Group top={height / 2} left={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.pieChartTooltipContent}>
-							<span>{tooltipData.label}</span>
-							<span className={styles.pieChartTooltipValue}>{tooltipData.value}</span>
-						</div>
-					</TooltipInPortal>
-				)}
-			</div>
-			<div
-				className={styles.pieChartLegend}
-				style={{
-					width: legendWidth,
-					height: legendHeight,
-				}}
-			>
-				<Legend
-					items={legendItems}
-					position={position}
-					averageLegendWidth={averageLegendWidth}
-					focusedSeriesIndex={focusedSeriesIndex}
-					onClick={onLegendClick}
-					onMouseMove={onLegendMouseMove}
-					onMouseLeave={onLegendMouseLeave}
-				/>
-			</div>
-		</div>
-	);
-}

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

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

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

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

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

@@ -1,45 +0,0 @@
-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__/utils.test.ts

@@ -1,101 +0,0 @@
-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/types.ts

@@ -1,35 +0,0 @@
-/**
- * Pie-local types. Kept out of the component / util files so each stays focused
- * (per the one-component-per-file + dedicated-types rules). Shared chart types
- * (PieSlice, PieChartProps) live in the parent charts/types.ts.
- */
-
-export interface ScaledFontSizeArgs {
-	text: string;
-	baseSize: number;
-	innerRadius: number;
-}
-
-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';
-}
-
-export interface ParsedRgb {
-	r: number;
-	g: number;
-	b: number;
-}
-
-/** Resolved tooltip payload shown when a slice is hovered. */
-export interface PieTooltipData {
-	label: string;
-	value: string;
-	color: string;
-}

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

@@ -1,89 +0,0 @@
-/**
- * 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).
- */
-
-import { ArcGeometry, ParsedRgb, ScaledFontSizeArgs } from './types';
-
-/**
- * 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);
-}
-
-/**
- * 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',
-	};
-}
-
-// 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,14 +3,13 @@ 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,
-	ChartClickData,
+	TooltipClickData,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
@@ -23,10 +22,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: ChartClickData) => void;
+	onClick?: (clickData: TooltipClickData) => void;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	pinnedTooltipElement?: (clickData: ChartClickData) => React.ReactNode;
+	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
 	renderTooltipFooter?: (args: IRenderTooltipFooterArgs) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
@@ -70,36 +69,3 @@ 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/DashboardContainer/visualization/hooks/__tests__/usePieInteractions.test.tsx

@@ -1,147 +0,0 @@
-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 '../../charts/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/hooks/usePieInteractions.ts

@@ -1,168 +0,0 @@
-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 '../charts/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/InfraMonitoringK8s/Deployments/constants.ts

@@ -72,7 +72,7 @@ export const deploymentWidgetInfo = [
 		yAxisUnit: '',
 	},
 	{
-		title: 'Memory usage, request, limits',
+		title: 'Memory usage, request, limits)',
 		yAxisUnit: 'bytes',
 	},
 	{

frontend/src/container/InfraMonitoringK8s/Jobs/constants.ts

@@ -69,7 +69,7 @@ export const jobWidgetInfo = [
 		yAxisUnit: '',
 	},
 	{
-		title: 'Memory Usage',
+		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
 	},
 	{

frontend/src/container/InfraMonitoringK8s/Namespaces/constants.ts

@@ -703,7 +703,7 @@ export const getNamespaceMetricsQueryPayload = (
 							],
 							having: [],
 							legend: `{{${k8sPodNameKey}}}`,
-							limit: 10,
+							limit: 20,
 							orderBy: [],
 							queryName: 'A',
 							reduceTo: ReduceOperators.AVG,
@@ -1014,8 +1014,8 @@ export const getNamespaceMetricsQueryPayload = (
 										id: '5f2a55c5',
 										key: {
 											dataType: DataTypes.String,
-											id: k8sNamespaceNameKey,
-											key: k8sNamespaceNameKey,
+											id: k8sStatefulsetNameKey,
+											key: k8sStatefulsetNameKey,
 											type: 'tag',
 										},
 										op: '=',

frontend/src/container/InfraMonitoringK8s/Volumes/constants.ts

@@ -317,9 +317,9 @@ export const getVolumeMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_volume_inodes_used--float64--Gauge--true',
+								id: 'k8s_volume_inodes_used--float64----true',
 								key: k8sVolumeInodesUsedKey,
-								type: 'Gauge',
+								type: '',
 							},
 							aggregateOperator: 'avg',
 							dataSource: DataSource.METRICS,
@@ -409,9 +409,9 @@ export const getVolumeMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_volume_inodes--float64--Gauge--true',
+								id: 'k8s_volume_inodes--float64----true',
 								key: k8sVolumeInodesKey,
-								type: 'Gauge',
+								type: '',
 							},
 							aggregateOperator: 'avg',
 							dataSource: DataSource.METRICS,
@@ -501,9 +501,9 @@ export const getVolumeMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_volume_inodes_free--float64--Gauge--true',
+								id: 'k8s_volume_inodes_free--float64----true',
 								key: k8sVolumeInodesFreeKey,
-								type: 'Gauge',
+								type: '',
 							},
 							aggregateOperator: 'avg',
 							dataSource: DataSource.METRICS,

frontend/src/container/LogDetailedView/InfraMetrics/constants.ts

@@ -1619,9 +1619,6 @@ export const getHostQueryPayload = (
 	const diskOpTimeKey = dotMetricsEnabled
 		? 'system.disk.operation_time'
 		: 'system_disk_operation_time';
-	const diskOpsKey = dotMetricsEnabled
-		? 'system.disk.operations'
-		: 'system_disk_operations';
 	const diskPendingKey = dotMetricsEnabled
 		? 'system.disk.pending_operations'
 		: 'system_disk_pending_operations';
@@ -2378,24 +2375,9 @@ export const getHostQueryPayload = (
 								op: 'AND',
 							},
 							functions: [],
-							groupBy: [
-								{
-									dataType: DataTypes.String,
-									id: 'direction--string--tag--false',
-
-									key: 'direction',
-									type: 'tag',
-								},
-								{
-									dataType: DataTypes.String,
-									id: 'device--string--tag--false',
-
-									key: 'device',
-									type: 'tag',
-								},
-							],
+							groupBy: [],
 							having: [],
-							legend: '{{device}}::{{direction}}',
+							legend: 'system disk io',
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
@@ -2427,9 +2409,9 @@ export const getHostQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'system_disk_operations--float64--Sum--true',
+								id: 'system_disk_operation_time--float64--Sum--true',
 
-								key: diskOpsKey,
+								key: diskOpTimeKey,
 								type: 'Sum',
 							},
 							aggregateOperator: 'rate',
@@ -2439,7 +2421,7 @@ export const getHostQueryPayload = (
 							filters: {
 								items: [
 									{
-										id: 'diskops_f1',
+										id: 'diskop_f1',
 										key: {
 											dataType: DataTypes.String,
 											id: 'host_name--string--tag--false',
@@ -2472,7 +2454,7 @@ export const getHostQueryPayload = (
 							],
 							having: [
 								{
-									columnName: `SUM(${diskOpsKey})`,
+									columnName: `SUM(${diskOpTimeKey})`,
 									op: '>',
 									value: 0,
 								},
@@ -2575,88 +2557,6 @@ export const getHostQueryPayload = (
 			start,
 			end,
 		},
-		{
-			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TIME_SERIES,
-			query: {
-				builder: {
-					queryData: [
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'system_disk_operation_time--float64--Sum--true',
-
-								key: diskOpTimeKey,
-								type: 'Sum',
-							},
-							aggregateOperator: 'rate',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'A',
-							filters: {
-								items: [
-									{
-										id: 'diskoptime_f1',
-										key: {
-											dataType: DataTypes.String,
-											id: 'host_name--string--tag--false',
-
-											key: hostNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: hostName,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [
-								{
-									dataType: DataTypes.String,
-									id: 'device--string--tag--false',
-
-									key: 'device',
-									type: 'tag',
-								},
-								{
-									dataType: DataTypes.String,
-									id: 'direction--string--tag--false',
-
-									key: 'direction',
-									type: 'tag',
-								},
-							],
-							having: [
-								{
-									columnName: `SUM(${diskOpTimeKey})`,
-									op: '>',
-									value: 0,
-								},
-							],
-							legend: '{{device}}::{{direction}}',
-							limit: null,
-							orderBy: [],
-							queryName: 'A',
-							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'sum',
-							stepInterval: 60,
-							timeAggregation: 'rate',
-						},
-					],
-					queryFormulas: [],
-					queryTraceOperator: [],
-				},
-				clickhouse_sql: [{ disabled: false, legend: '', name: 'A', query: '' }],
-				id: 'a8b3d2e1-4f5c-4a6b-9c8d-7e2f1a0b3c4f',
-				promql: [{ disabled: false, legend: '', name: 'A', query: '' }],
-				queryType: EQueryType.QUERY_BUILDER,
-			},
-			variables: {},
-			formatForWeb: false,
-			start,
-			end,
-		},
 	];
 };
 
@@ -2731,5 +2631,5 @@ export const hostWidgetInfo = [
 	{ title: 'System disk io (bytes transferred)', yAxisUnit: 'bytes' },
 	{ title: 'System disk operations/s', yAxisUnit: 'short' },
 	{ title: 'Queue size', yAxisUnit: 'short' },
-	{ title: 'System disk operation time/s', yAxisUnit: 's' },
+	{ title: 'Disk operations time', yAxisUnit: 's' },
 ];

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -62,7 +62,6 @@ function Explorer(): JSX.Element {
 		handleSetQueryData,
 		redirectWithQueryBuilderData,
 	} = useQueryBuilder();
-
 	const { safeNavigate } = useSafeNavigate();
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();

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

@@ -96,28 +96,14 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 			return undefined;
 		}
 
-		const {
-			domainToAdminEmailList,
-			allowedGroups,
-			serviceAccountJson,
-			domainToAdminEmail: _domainToAdminEmail,
-			fetchTransitiveGroupMembership,
-			...rest
-		} = config;
+		const { domainToAdminEmailList, ...rest } = config;
 		const domainToAdminEmail = convertDomainMappingsToRecord(
 			domainToAdminEmailList,
 		);
 
 		return {
 			...rest,
-			...(rest.fetchGroups
-				? {
-						allowedGroups,
-						serviceAccountJson,
-						domainToAdminEmail: domainToAdminEmail ?? {},
-						fetchTransitiveGroupMembership,
-					}
-				: { domainToAdminEmail: {} }),
+			domainToAdminEmail: domainToAdminEmail ?? {},
 		};
 	}, [form]);
 
@@ -143,7 +129,7 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 
 		return {
 			...rest,
-			groupMappings: rest.useRoleAttribute ? undefined : (groupMappings ?? {}),
+			groupMappings: groupMappings ?? {},
 		};
 	}, [form]);
 

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/CreateEdit.sanitization.test.tsx

@@ -1,195 +0,0 @@
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-import { rest, server } from 'mocks-server/server';
-import { AuthtypesGettableAuthDomainDTO } from 'api/generated/services/sigNoz.schemas';
-
-import CreateEdit from '../CreateEdit/CreateEdit';
-import {
-	AUTH_DOMAINS_UPDATE_ENDPOINT,
-	mockDomainWithRoleMapping,
-	mockGoogleAuthDomain,
-	mockGoogleAuthWithWorkspaceGroups,
-	mockOidcWithClaimMapping,
-	mockSamlWithAttributeMapping,
-	mockUpdateSuccessResponse,
-} from './mocks';
-
-// @signozhq/ui/button internal effects block form.validateFields() in tests
-jest.mock('@signozhq/ui/button', () => ({
-	...jest.requireActual('@signozhq/ui/button'),
-	Button: ({
-		children,
-		onClick,
-		loading,
-		disabled,
-		'aria-label': ariaLabel,
-		prefix,
-		suffix,
-	}: {
-		children?: React.ReactNode;
-		onClick?: React.MouseEventHandler<HTMLButtonElement>;
-		loading?: boolean;
-		disabled?: boolean;
-		'aria-label'?: string;
-		prefix?: React.ReactNode;
-		suffix?: React.ReactNode;
-	}) => (
-		<button
-			type="button"
-			onClick={onClick}
-			disabled={disabled || loading}
-			aria-label={ariaLabel}
-		>
-			{prefix}
-			{children}
-			{suffix}
-		</button>
-	),
-}));
-
-type SavedPayload = {
-	config: {
-		googleAuthConfig?: Record<string, unknown>;
-		samlConfig?: Record<string, unknown>;
-		oidcConfig?: Record<string, unknown>;
-		roleMapping?: Record<string, unknown>;
-	};
-};
-
-async function submitForm(
-	record: AuthtypesGettableAuthDomainDTO,
-): Promise<SavedPayload> {
-	const requests: SavedPayload[] = [];
-
-	server.use(
-		rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, async (req, res, ctx) => {
-			requests.push((await req.json()) as SavedPayload);
-			return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
-		}),
-	);
-
-	render(<CreateEdit isCreate={false} record={record} onClose={jest.fn()} />);
-	fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
-	await waitFor(() => expect(requests).toHaveLength(1));
-
-	return requests[0];
-}
-
-describe('CreateEdit — payload sanitization', () => {
-	afterEach(() => server.resetHandlers());
-
-	describe('Google Auth', () => {
-		it('sends core fields and omits workspace fields when fetchGroups is not set', async () => {
-			const payload = await submitForm(mockGoogleAuthDomain);
-
-			const g = payload.config.googleAuthConfig;
-			expect(g?.clientId).toBe('test-client-id');
-			expect(g?.clientSecret).toBe('test-client-secret');
-			expect(g?.allowedGroups).toBeUndefined();
-			expect(g?.serviceAccountJson).toBeUndefined();
-			expect(g?.fetchTransitiveGroupMembership).toBeUndefined();
-			expect(g?.domainToAdminEmail).toStrictEqual({});
-		});
-
-		it('strips workspace fields when fetchGroups is false', async () => {
-			const payload = await submitForm({
-				...mockGoogleAuthWithWorkspaceGroups,
-				config: {
-					...mockGoogleAuthWithWorkspaceGroups.config,
-					googleAuthConfig: {
-						...mockGoogleAuthWithWorkspaceGroups.config?.googleAuthConfig,
-						fetchGroups: false,
-					},
-				},
-			});
-
-			const g = payload.config.googleAuthConfig;
-			expect(g?.fetchGroups).toBe(false);
-			expect(g?.allowedGroups).toBeUndefined();
-			expect(g?.serviceAccountJson).toBeUndefined();
-			expect(g?.fetchTransitiveGroupMembership).toBeUndefined();
-			expect(g?.domainToAdminEmail).toStrictEqual({});
-		});
-
-		it('includes all workspace fields when fetchGroups is true', async () => {
-			const payload = await submitForm(mockGoogleAuthWithWorkspaceGroups);
-
-			const g = payload.config.googleAuthConfig;
-			expect(g?.fetchGroups).toBe(true);
-			expect(g?.serviceAccountJson).toBe('{"type": "service_account"}');
-			expect(g?.fetchTransitiveGroupMembership).toBe(true);
-			expect(g?.allowedGroups).toStrictEqual([
-				'allowed-group-1',
-				'allowed-group-2',
-			]);
-			expect(g?.domainToAdminEmail).toStrictEqual({
-				'google-groups.com': 'admin@google-groups.com',
-			});
-		});
-	});
-
-	describe('SAML', () => {
-		it('sends core and attributeMapping fields', async () => {
-			const payload = await submitForm(mockSamlWithAttributeMapping);
-
-			const s = payload.config.samlConfig;
-			expect(s?.samlIdp).toBe('https://idp.saml-attrs.com/sso');
-			expect(s?.samlEntity).toBe('urn:saml-attrs:idp');
-			expect(s?.samlCert).toBe('MOCK_CERTIFICATE_ATTRS');
-			expect(s?.insecureSkipAuthNRequestsSigned).toBe(true);
-
-			const attr = s?.attributeMapping as Record<string, unknown>;
-			expect(attr?.name).toBe('user_display_name');
-			expect(attr?.groups).toBe('member_of');
-			expect(attr?.role).toBe('signoz_role');
-		});
-	});
-
-	describe('OIDC', () => {
-		it('sends all fields including claimMapping', async () => {
-			const payload = await submitForm(mockOidcWithClaimMapping);
-
-			const o = payload.config.oidcConfig;
-			expect(o?.issuer).toBe('https://oidc.claims.com');
-			expect(o?.issuerAlias).toBe('https://alias.claims.com');
-			expect(o?.clientId).toBe('claims-client-id');
-			expect(o?.clientSecret).toBe('claims-client-secret');
-			expect(o?.insecureSkipEmailVerified).toBe(true);
-			expect(o?.getUserInfo).toBe(true);
-
-			const claim = o?.claimMapping as Record<string, unknown>;
-			expect(claim?.email).toBe('user_email');
-			expect(claim?.name).toBe('display_name');
-			expect(claim?.groups).toBe('user_groups');
-			expect(claim?.role).toBe('user_role');
-		});
-	});
-
-	describe('Role Mapping', () => {
-		it('strips groupMappings when useRoleAttribute is true', async () => {
-			const payload = await submitForm({
-				...mockDomainWithRoleMapping,
-				config: {
-					...mockDomainWithRoleMapping.config,
-					roleMapping: {
-						...mockDomainWithRoleMapping.config?.roleMapping,
-						useRoleAttribute: true,
-					},
-				},
-			});
-
-			expect(payload.config.roleMapping?.useRoleAttribute).toBe(true);
-			expect(payload.config.roleMapping?.groupMappings).toBeUndefined();
-		});
-
-		it('sends groupMappings when useRoleAttribute is false', async () => {
-			const payload = await submitForm(mockDomainWithRoleMapping);
-
-			expect(payload.config.roleMapping?.useRoleAttribute).toBe(false);
-			expect(payload.config.roleMapping?.groupMappings).toStrictEqual({
-				'admin-group': 'ADMIN',
-				'dev-team': 'EDITOR',
-				viewers: 'VIEWER',
-			});
-		});
-	});
-});

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts

@@ -22,12 +22,11 @@ export const StyledCheckOutlined = styled(Check)`
 	float: right;
 `;
 
-export const TagContainer = styled(Badge).attrs({
-	color: 'secondary',
-	variant: 'outline',
-})`
+export const TagContainer = styled(Badge)`
 	&&& {
 		display: flex;
+		border-radius: 3px;
+		padding: 0.1rem 0.2rem;
 		font-weight: 300;
 		font-size: 0.6rem;
 	}
@@ -39,5 +38,4 @@ export const TagLabel = styled.span`
 
 export const TagValue = styled.span`
 	text-transform: capitalize;
-	font-weight: 400;
 `;

frontend/src/lib/__tests__/getLabelName.test.ts

@@ -0,0 +1,84 @@
+import getLabelName from 'lib/getLabelName';
+
+describe('getLabelName', () => {
+	describe('with a legend template', () => {
+		it('substitutes a single variable that exists on the series', () => {
+			const result = getLabelName(
+				{ 'service.name': 'frontend' },
+				'A',
+				'{{service.name}}',
+			);
+			expect(result).toBe('frontend');
+		});
+
+		it('substitutes a template with surrounding literal text', () => {
+			const result = getLabelName(
+				{ 'service.name': 'frontend' },
+				'A',
+				'rate for {{service.name}}',
+			);
+			expect(result).toBe('rate for frontend');
+		});
+
+		it('substitutes multiple variables when all are present', () => {
+			const result = getLabelName(
+				{ 'service.name': 'frontend', 'http.target': 'GET /api' },
+				'A',
+				'{{service.name}} / {{http.target}}',
+			);
+			expect(result).toBe('frontend / GET /api');
+		});
+
+		it('falls back to query name when a referenced variable is missing', () => {
+			const result = getLabelName(
+				{ 'http.target': 'GET /api' },
+				'F1',
+				'{{service.name}}',
+			);
+			expect(result).toBe('F1');
+		});
+
+		it('falls back to query name even if literal text would still render', () => {
+			const result = getLabelName(
+				{ 'http.target': 'GET /api' },
+				'F1',
+				'label = {{label}}',
+			);
+			expect(result).toBe('F1');
+		});
+
+		it('falls back to query name when any of multiple variables is missing', () => {
+			const result = getLabelName(
+				{ 'service.name': 'frontend' },
+				'F1',
+				'{{service.name}} / {{http.target}}',
+			);
+			expect(result).toBe('F1');
+		});
+
+		it('treats a null label value as missing', () => {
+			const result = getLabelName(
+				{ 'service.name': null } as unknown as Record<string, string>,
+				'F1',
+				'{{service.name}}',
+			);
+			expect(result).toBe('F1');
+		});
+	});
+
+	describe('without a legend template', () => {
+		it('returns key="value" pairs for plain labels', () => {
+			const result = getLabelName(
+				{ 'service.name': 'frontend', 'http.target': 'GET /api' },
+				'A',
+				'',
+			);
+			expect(result).toBe('{service.name="frontend",http.target="GET /api"}');
+		});
+
+		it('returns query name when labels are empty', () => {
+			const result = getLabelName({}, 'A', '');
+			expect(result).toBe('A');
+		});
+	});
+});

frontend/src/lib/getLabelName.ts

@@ -18,6 +18,17 @@ const getLabelName = (
 
 		const results = variables.map((variable) => metric[variable]);
 
+		// Fall back to query name if any `{{var}}` references a label that
+		// isn't on this series — avoids rendering "undefined" in the legend.
+		const hasMissingVariable = variables.some(
+			(variable, index) =>
+				legends.includes(`{{${variable}}}`) &&
+				(results[index] === undefined || results[index] === null),
+		);
+		if (hasMissingVariable) {
+			return query;
+		}
+
 		let endResult = legends;
 
 		variables.forEach((e, index) => {

frontend/src/lib/recentQueries/constants.ts

@@ -1,5 +0,0 @@
-export const STORAGE_KEY_PREFIX = 'qb_recent_v1';
-export const STORAGE_VERSION = 1;
-// Maximum entries kept per (signal, source) bucket. Larger than the UI's
-// RECENTS_DISPLAY_CAP so deleting a visible entry surfaces an older one.
-export const MAX_ENTRIES = 10;

frontend/src/lib/recentQueries/getRecentQueries.test.ts

@@ -1,51 +0,0 @@
-import * as store from './recentQueriesStore';
-import { getRecentQueries } from './getRecentQueries';
-
-describe('getRecentQueries', () => {
-	beforeEach(() => {
-		store.useRecentQueriesStore.setState({ buckets: {} });
-		localStorage.clear();
-	});
-
-	it('returns the entries for a (signal, source) bucket', () => {
-		store.save({
-			signal: 'logs',
-			filter: { expression: "severity_text = 'ERROR'" },
-		});
-
-		const entries = getRecentQueries('logs', '');
-		expect(entries).toHaveLength(1);
-		expect(entries[0].filter.expression).toBe("severity_text = 'ERROR'");
-	});
-
-	it('returns an empty array for a bucket with no entries', () => {
-		expect(getRecentQueries('logs', '')).toHaveLength(0);
-	});
-
-	it('reads the latest entries on each call (non-subscribing)', () => {
-		expect(getRecentQueries('logs', '')).toHaveLength(0);
-
-		store.save({
-			signal: 'logs',
-			filter: { expression: "severity_text = 'ERROR'" },
-		});
-
-		expect(getRecentQueries('logs', '')).toHaveLength(1);
-	});
-
-	it('partitions by signal and source', () => {
-		store.save({
-			signal: 'logs',
-			filter: { expression: "severity_text = 'ERROR'" },
-		});
-		store.save({
-			signal: 'metrics',
-			source: 'meter',
-			filter: { expression: 'cpu_usage > 80' },
-		});
-
-		expect(getRecentQueries('logs', '')).toHaveLength(1);
-		expect(getRecentQueries('metrics', 'meter')).toHaveLength(1);
-		expect(getRecentQueries('metrics', '')).toHaveLength(0);
-	});
-});

frontend/src/lib/recentQueries/getRecentQueries.ts

@@ -1,14 +0,0 @@
-import type { SignalType } from 'types/api/v5/queryRange';
-
-import * as store from './recentQueriesStore';
-import type { RecentQueryEntry } from './types';
-
-// Non-subscribing read of recent searches for a (signal, source) bucket.
-// Deliberately not the zustand hook — subscribing would reconfigure CodeMirror
-// and close the open completion popup on every store change.
-export function getRecentQueries(
-	signal: SignalType,
-	source: string,
-): RecentQueryEntry[] {
-	return store.list(signal, source);
-}

frontend/src/lib/recentQueries/normalize.test.ts

@@ -1,100 +0,0 @@
-import { normalizeFilterExpression } from './normalize';
-
-describe('normalizeFilterExpression', () => {
-	it('returns empty string for empty input', () => {
-		expect(normalizeFilterExpression('')).toBe('');
-	});
-
-	it('returns empty string for whitespace-only input', () => {
-		expect(normalizeFilterExpression('   \t  ')).toBe('');
-	});
-
-	it('strips whitespace around operators', () => {
-		expect(normalizeFilterExpression('  a = 1  ')).toBe('a=1');
-		expect(normalizeFilterExpression('a   =    1')).toBe('a=1');
-		expect(normalizeFilterExpression('a=1')).toBe('a=1');
-	});
-
-	it('lowercases AND / OR / NOT outside quotes', () => {
-		expect(normalizeFilterExpression('A AND B OR NOT C')).toBe('AandBornotC');
-	});
-
-	it('lowercases IN / LIKE / ILIKE / CONTAINS', () => {
-		expect(normalizeFilterExpression('host IN [1, 2] AND name LIKE "foo"')).toBe(
-			'hostin[1,2]andnamelike"foo"',
-		);
-	});
-
-	it('lowercases REGEXP', () => {
-		expect(normalizeFilterExpression('path REGEXP "foo"')).toBe(
-			'pathregexp"foo"',
-		);
-		expect(normalizeFilterExpression('path REGEXP "foo"')).toBe(
-			normalizeFilterExpression('path regexp "foo"'),
-		);
-	});
-
-	it('lowercases HAS / HASANY / HASALL / HASTOKEN function names', () => {
-		expect(normalizeFilterExpression('HAS(tags, "x")')).toBe(
-			normalizeFilterExpression('has(tags, "x")'),
-		);
-		expect(normalizeFilterExpression('HASANY(tags, ["a","b"])')).toBe(
-			normalizeFilterExpression('hasAny(tags, ["a","b"])'),
-		);
-		expect(normalizeFilterExpression('HASALL(tags, ["a","b"])')).toBe(
-			normalizeFilterExpression('hasAll(tags, ["a","b"])'),
-		);
-		expect(normalizeFilterExpression('HASTOKEN(msg, "err")')).toBe(
-			normalizeFilterExpression('hasToken(msg, "err")'),
-		);
-	});
-
-	it('lowercases TRUE / FALSE boolean literals', () => {
-		expect(normalizeFilterExpression('active = TRUE')).toBe(
-			normalizeFilterExpression('active = true'),
-		);
-		expect(normalizeFilterExpression('active = FALSE')).toBe(
-			normalizeFilterExpression('active = false'),
-		);
-	});
-
-	it('preserves whitespace and casing inside single-quoted strings', () => {
-		expect(normalizeFilterExpression("a = 'X  Y'")).toBe("a='X  Y'");
-	});
-
-	it('preserves whitespace and casing inside double-quoted strings', () => {
-		expect(normalizeFilterExpression('a   =   "X  Y"')).toBe('a="X  Y"');
-	});
-
-	it('does not lowercase keyword-looking substrings inside quotes', () => {
-		expect(normalizeFilterExpression("msg = 'AND ERROR'")).toBe(
-			"msg='AND ERROR'",
-		);
-	});
-
-	it('handles escaped quotes inside strings', () => {
-		expect(normalizeFilterExpression("msg = 'a\\'b' AND x = 1")).toBe(
-			"msg='a\\'b'andx=1",
-		);
-	});
-
-	it('treats two formattings of the same expression as identical', () => {
-		const a = normalizeFilterExpression(
-			'service.name = "frontend" AND severity = error',
-		);
-		const b = normalizeFilterExpression(
-			'service.name="frontend"   and  severity=error',
-		);
-		expect(a).toBe(b);
-	});
-
-	it('preserves unquoted value casing (treats them as identifiers)', () => {
-		expect(normalizeFilterExpression('status = OK')).toBe('status=OK');
-	});
-
-	it('handles mixed quotes in one expression', () => {
-		expect(normalizeFilterExpression(`a = 'X' AND b = "Y"`)).toBe(
-			`a='X'andb="Y"`,
-		);
-	});
-});

frontend/src/lib/recentQueries/normalize.ts

@@ -1,56 +0,0 @@
-import {
-	OPERATORS,
-	QUERY_BUILDER_FUNCTIONS,
-	TRACE_OPERATOR_OPERATORS,
-} from 'constants/antlrQueryConstants';
-
-// Reserved keywords sourced from the ANTLR grammar constants so this list stays
-// in sync with the parser. `\b` prevents partial matches inside identifiers
-// (e.g. `OR` inside `originator`). `TRUE`/`FALSE` are BOOL literals, included
-// so case variants of boolean values also dedup.
-const WORD_KEYWORDS = [
-	...Object.keys(OPERATORS).filter((k) => /^[A-Z]+$/.test(k)),
-	...Object.keys(TRACE_OPERATOR_OPERATORS).filter((k) => /^[A-Z]+$/.test(k)),
-	...Object.values(QUERY_BUILDER_FUNCTIONS),
-	'TRUE',
-	'FALSE',
-];
-
-const KEYWORDS_RE = new RegExp(`\\b(${WORD_KEYWORDS.join('|')})\\b`, 'gi');
-
-// Matches single- or double-quoted string literals, supporting escaped quotes
-// (e.g. `'it\'s'` or `"a \" b"`). We preserve quoted spans verbatim during
-// normalisation so user-meaningful whitespace and casing inside string values
-// stays intact: `name = "Foo Bar"` must not collapse to `name="foobar"`.
-const QUOTED_RE = /'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"/g;
-
-// Lowercases reserved keywords and strips ALL whitespace from the unquoted regions
-// of the input. Keywords are normalised so casing variants dedup; whitespace is
-// dropped so formatting variants (`a=1` vs `a = 1`) dedup too.
-function processOutsideQuotes(s: string): string {
-	return s.replace(KEYWORDS_RE, (m) => m.toLowerCase()).replace(/\s+/g, '');
-}
-
-// Produces a canonical form of a filter expression suitable for dedup-key derivation.
-// Walks the input alternating between unquoted regions (where we normalise keywords
-// and whitespace) and quoted regions (which we copy verbatim).
-export function normalizeFilterExpression(input: string): string {
-	if (!input) {
-		return '';
-	}
-
-	let result = '';
-	let lastIndex = 0;
-	QUOTED_RE.lastIndex = 0;
-
-	let match = QUOTED_RE.exec(input);
-	while (match !== null) {
-		result += processOutsideQuotes(input.slice(lastIndex, match.index));
-		result += match[0];
-		lastIndex = QUOTED_RE.lastIndex;
-		match = QUOTED_RE.exec(input);
-	}
-	result += processOutsideQuotes(input.slice(lastIndex));
-
-	return result.trim();
-}

frontend/src/lib/recentQueries/recentQueriesStore.test.ts

@@ -1,247 +0,0 @@
-import { MAX_ENTRIES } from './constants';
-import * as store from './recentQueriesStore';
-import type { RecentQueryInput } from './recentQueriesStore';
-import type { RecentQueryEntry } from './types';
-
-const baseInput = (
-	overrides: Partial<RecentQueryInput> = {},
-): RecentQueryInput => ({
-	signal: 'logs',
-	filter: { expression: "service.name = 'frontend'" },
-	...overrides,
-});
-
-function saveOrThrow(input: RecentQueryInput): RecentQueryEntry {
-	const saved = store.save(input);
-	if (!saved) {
-		throw new Error('expected save to return an entry');
-	}
-	return saved;
-}
-
-describe('recentQueries store', () => {
-	beforeEach(() => {
-		store.useRecentQueriesStore.setState({ buckets: {} });
-		localStorage.clear();
-	});
-
-	describe('save + list', () => {
-		it('saves an entry and lists it', () => {
-			store.save(baseInput());
-			const entries = store.list('logs');
-			expect(entries).toHaveLength(1);
-			expect(entries[0].filter.expression).toBe("service.name = 'frontend'");
-			expect(entries[0].id).toBeTruthy();
-			expect(entries[0].lastUsedAt).toBeGreaterThan(0);
-		});
-
-		it('does not save when the filter expression is empty', () => {
-			const result = store.save(baseInput({ filter: { expression: '' } }));
-			expect(result).toBeNull();
-			expect(store.list('logs')).toHaveLength(0);
-		});
-
-		it('does not save when the filter expression is whitespace only', () => {
-			const result = store.save(baseInput({ filter: { expression: '   ' } }));
-			expect(result).toBeNull();
-			expect(store.list('logs')).toHaveLength(0);
-		});
-	});
-
-	describe('LRU ordering', () => {
-		it('places the most recently saved entry at the front', () => {
-			store.save(baseInput({ filter: { expression: "severity_text = 'ERROR'" } }));
-			store.save(baseInput({ filter: { expression: 'http.status_code >= 500' } }));
-			store.save(baseInput({ filter: { expression: 'attempt = 1' } }));
-
-			const entries = store.list('logs');
-			expect(entries.map((e) => e.filter.expression)).toStrictEqual([
-				'attempt = 1',
-				'http.status_code >= 500',
-				"severity_text = 'ERROR'",
-			]);
-		});
-
-		it('re-saving an existing filter bumps it to the front', () => {
-			store.save(baseInput({ filter: { expression: "severity_text = 'ERROR'" } }));
-			store.save(baseInput({ filter: { expression: 'http.status_code >= 500' } }));
-			store.save(baseInput({ filter: { expression: "severity_text = 'ERROR'" } }));
-
-			const entries = store.list('logs');
-			expect(entries).toHaveLength(2);
-			expect(entries.map((e) => e.filter.expression)).toStrictEqual([
-				"severity_text = 'ERROR'",
-				'http.status_code >= 500',
-			]);
-		});
-	});
-
-	describe('dedup', () => {
-		it('treats formatting variations of the same filter as one entry', () => {
-			store.save(
-				baseInput({
-					filter: { expression: "severity_text = 'ERROR' AND attempt = 1" },
-				}),
-			);
-			store.save(
-				baseInput({
-					filter: { expression: "severity_text='ERROR'   and    attempt=1" },
-				}),
-			);
-
-			expect(store.list('logs')).toHaveLength(1);
-		});
-	});
-
-	describe('signal partitioning', () => {
-		it('saves to the right bucket per signal', () => {
-			store.save(
-				baseInput({
-					signal: 'logs',
-					filter: { expression: "severity_text = 'ERROR'" },
-				}),
-			);
-			store.save(
-				baseInput({
-					signal: 'traces',
-					filter: { expression: "service.name = 'orders-api'" },
-				}),
-			);
-			store.save(
-				baseInput({
-					signal: 'metrics',
-					filter: { expression: 'cpu_usage > 80' },
-				}),
-			);
-
-			expect(store.list('logs')).toHaveLength(1);
-			expect(store.list('traces')).toHaveLength(1);
-			expect(store.list('metrics')).toHaveLength(1);
-			expect(store.list('logs')[0].filter.expression).toBe(
-				"severity_text = 'ERROR'",
-			);
-			expect(store.list('traces')[0].filter.expression).toBe(
-				"service.name = 'orders-api'",
-			);
-			expect(store.list('metrics')[0].filter.expression).toBe('cpu_usage > 80');
-		});
-
-		it('does not leak between signals on dedup', () => {
-			store.save(
-				baseInput({
-					signal: 'logs',
-					filter: { expression: "service.name = 'frontend'" },
-				}),
-			);
-			store.save(
-				baseInput({
-					signal: 'traces',
-					filter: { expression: "service.name = 'frontend'" },
-				}),
-			);
-
-			expect(store.list('logs')).toHaveLength(1);
-			expect(store.list('traces')).toHaveLength(1);
-		});
-	});
-
-	describe('LRU cap', () => {
-		it('caps the bucket at MAX_ENTRIES and evicts the oldest', () => {
-			const total = MAX_ENTRIES + 1;
-			for (let i = 0; i < total; i += 1) {
-				store.save(baseInput({ filter: { expression: `attempt = ${i}` } }));
-			}
-
-			const entries = store.list('logs');
-			expect(entries).toHaveLength(MAX_ENTRIES);
-			expect(entries[0].filter.expression).toBe(`attempt = ${total - 1}`);
-			expect(entries.some((e) => e.filter.expression === 'attempt = 0')).toBe(
-				false,
-			);
-		});
-	});
-
-	describe('remove', () => {
-		it('removes an entry by id', () => {
-			store.save(baseInput({ filter: { expression: "severity_text = 'ERROR'" } }));
-			const saved = saveOrThrow(
-				baseInput({ filter: { expression: 'http.status_code >= 500' } }),
-			);
-			store.remove(saved.id, 'logs');
-
-			const entries = store.list('logs');
-			expect(entries).toHaveLength(1);
-			expect(entries[0].filter.expression).toBe("severity_text = 'ERROR'");
-		});
-
-		it('is a no-op when the id does not exist', () => {
-			store.save(baseInput({ filter: { expression: "severity_text = 'ERROR'" } }));
-			store.remove('does-not-exist', 'logs');
-			expect(store.list('logs')).toHaveLength(1);
-		});
-
-		it('does not touch other signals', () => {
-			const logsEntry = saveOrThrow(
-				baseInput({
-					signal: 'logs',
-					filter: { expression: "service.name = 'frontend'" },
-				}),
-			);
-			store.save(
-				baseInput({
-					signal: 'traces',
-					filter: { expression: "service.name = 'frontend'" },
-				}),
-			);
-
-			store.remove(logsEntry.id, 'logs');
-
-			expect(store.list('logs')).toHaveLength(0);
-			expect(store.list('traces')).toHaveLength(1);
-		});
-	});
-
-	describe('persistence', () => {
-		it('reads back the same entries after the in-memory state is reset', () => {
-			store.save(baseInput({ filter: { expression: "severity_text = 'ERROR'" } }));
-			store.save(baseInput({ filter: { expression: 'http.status_code >= 500' } }));
-
-			store.useRecentQueriesStore.setState({ buckets: {} });
-
-			const entries = store.list('logs');
-			expect(entries.map((e) => e.filter.expression)).toStrictEqual([
-				'http.status_code >= 500',
-				"severity_text = 'ERROR'",
-			]);
-		});
-	});
-
-	describe('reactive subscription via zustand', () => {
-		it('notifies zustand subscribers on save', () => {
-			const cb = jest.fn();
-			const unsubscribe = store.useRecentQueriesStore.subscribe(cb);
-			store.save(baseInput({ filter: { expression: "severity_text = 'ERROR'" } }));
-			expect(cb).toHaveBeenCalledTimes(1);
-			unsubscribe();
-		});
-
-		it('notifies zustand subscribers on remove', () => {
-			const saved = saveOrThrow(
-				baseInput({ filter: { expression: "severity_text = 'ERROR'" } }),
-			);
-			const cb = jest.fn();
-			const unsubscribe = store.useRecentQueriesStore.subscribe(cb);
-			store.remove(saved.id, 'logs');
-			expect(cb).toHaveBeenCalledTimes(1);
-			unsubscribe();
-		});
-
-		it('stops notifying after unsubscribe', () => {
-			const cb = jest.fn();
-			const unsubscribe = store.useRecentQueriesStore.subscribe(cb);
-			unsubscribe();
-			store.save(baseInput({ filter: { expression: "severity_text = 'ERROR'" } }));
-			expect(cb).not.toHaveBeenCalled();
-		});
-	});
-});

frontend/src/lib/recentQueries/recentQueriesStore.ts

@@ -1,144 +0,0 @@
-import get from 'api/browser/localstorage/get';
-import set from 'api/browser/localstorage/set';
-import type { SignalType } from 'types/api/v5/queryRange';
-import { create } from 'zustand';
-
-import { MAX_ENTRIES, STORAGE_VERSION } from './constants';
-import { normalizeFilterExpression } from './normalize';
-import type { RecentQueriesStoreShape, RecentQueryEntry } from './types';
-import { bucketKey, makeId, normalizeSource, storageKeyFor } from './utils';
-
-// Mirrors parsed localStorage so equal raw strings return the same array ref —
-// preserves Object.is for zustand selector bail-out.
-const persistedBucketCache = new Map<
-	string,
-	{ raw: string; parsed: RecentQueryEntry[] }
->();
-
-function loadBucketFromStorage(
-	signal: SignalType,
-	source: string,
-): RecentQueryEntry[] | null {
-	const key = bucketKey(signal, source);
-	try {
-		const raw = get(storageKeyFor(signal, source));
-		if (!raw) {
-			persistedBucketCache.delete(key);
-			return null;
-		}
-		const cached = persistedBucketCache.get(key);
-		if (cached && cached.raw === raw) {
-			return cached.parsed;
-		}
-		const parsedShape = JSON.parse(raw) as RecentQueriesStoreShape;
-		if (
-			parsedShape?.version !== STORAGE_VERSION ||
-			!Array.isArray(parsedShape.entries)
-		) {
-			persistedBucketCache.delete(key);
-			return null;
-		}
-		persistedBucketCache.set(key, { raw, parsed: parsedShape.entries });
-		return parsedShape.entries;
-	} catch {
-		persistedBucketCache.delete(key);
-		return null;
-	}
-}
-
-function saveBucketToStorage(
-	signal: SignalType,
-	source: string,
-	entries: RecentQueryEntry[],
-): void {
-	try {
-		const raw = JSON.stringify({ version: STORAGE_VERSION, entries });
-		if (set(storageKeyFor(signal, source), raw)) {
-			persistedBucketCache.set(bucketKey(signal, source), {
-				raw,
-				parsed: entries,
-			});
-		}
-	} catch {
-		// Ignore storage errors (e.g. quota exceeded, JSON.stringify failure).
-	}
-}
-
-export type RecentQueryInput = Omit<
-	RecentQueryEntry,
-	'id' | 'lastUsedAt' | 'source'
-> & {
-	source?: string;
-};
-
-type RecentQueriesState = {
-	buckets: Record<string, RecentQueryEntry[]>;
-	save: (entry: RecentQueryInput) => RecentQueryEntry | null;
-	remove: (id: string, signal: SignalType, source?: string) => void;
-};
-
-export const useRecentQueriesStore = create<RecentQueriesState>()(
-	(set, get) => ({
-		buckets: {},
-
-		save: (entry): RecentQueryEntry | null => {
-			const normalized = normalizeFilterExpression(entry.filter.expression);
-			if (!normalized) {
-				return null;
-			}
-			const source = normalizeSource(entry.source);
-			const key = bucketKey(entry.signal, source);
-
-			const current =
-				get().buckets[key] ?? loadBucketFromStorage(entry.signal, source) ?? [];
-			const filtered = current.filter(
-				(e) => normalizeFilterExpression(e.filter.expression) !== normalized,
-			);
-
-			const newEntry: RecentQueryEntry = {
-				...entry,
-				source,
-				id: makeId(entry.signal, source, normalized),
-				lastUsedAt: Date.now(),
-			};
-
-			const next = [newEntry, ...filtered].slice(0, MAX_ENTRIES);
-			set({ buckets: { ...get().buckets, [key]: next } });
-			saveBucketToStorage(entry.signal, source, next);
-			return newEntry;
-		},
-
-		remove: (id, signal, source = ''): void => {
-			const key = bucketKey(signal, source);
-			const current = get().buckets[key] ?? loadBucketFromStorage(signal, source);
-			if (!current) {
-				return;
-			}
-			const next = current.filter((e) => e.id !== id);
-			if (next.length === current.length) {
-				return;
-			}
-			set({ buckets: { ...get().buckets, [key]: next } });
-			saveBucketToStorage(signal, source, next);
-		},
-	}),
-);
-
-// Plain-function wrappers for non-React callers — same pattern as useColumnStore.ts.
-export function save(entry: RecentQueryInput): RecentQueryEntry | null {
-	return useRecentQueriesStore.getState().save(entry);
-}
-
-export function remove(id: string, signal: SignalType, source = ''): void {
-	useRecentQueriesStore.getState().remove(id, signal, source);
-}
-
-// Synchronous bucket read with localStorage fallback for non-React callers.
-export function list(signal: SignalType, source = ''): RecentQueryEntry[] {
-	const key = bucketKey(signal, source);
-	const state = useRecentQueriesStore.getState();
-	if (state.buckets[key]) {
-		return state.buckets[key];
-	}
-	return loadBucketFromStorage(signal, source) ?? [];
-}

frontend/src/lib/recentQueries/saveRecentQuery.test.ts

@@ -1,126 +0,0 @@
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource } from 'types/common/queryBuilder';
-import type {
-	IBuilderQuery,
-	Query,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { validateQuery } from 'utils/queryValidationUtils';
-
-import * as store from './recentQueriesStore';
-import { saveRecentQuery } from './saveRecentQuery';
-
-jest.mock('utils/queryValidationUtils', () => ({
-	validateQuery: jest.fn(),
-}));
-
-const mockedValidateQuery = validateQuery as jest.MockedFunction<
-	typeof validateQuery
->;
-
-const buildQuery = (overrides: Partial<IBuilderQuery>[] = [{}]): Query => ({
-	queryType: EQueryType.QUERY_BUILDER,
-	promql: [],
-	clickhouse_sql: [],
-	id: 'q1',
-	builder: {
-		queryFormulas: [],
-		queryTraceOperator: [],
-		queryData: overrides.map((o, i) => ({
-			queryName: `Q${i}`,
-			dataSource: DataSource.LOGS,
-			aggregateOperator: 'count',
-			aggregateAttribute: undefined as never,
-			functions: [],
-			filter: { expression: 'service.name = "frontend"' },
-			groupBy: [],
-			expression: `Q${i}`,
-			disabled: false,
-			having: [],
-			limit: null,
-			stepInterval: null,
-			orderBy: [],
-			legend: '',
-			...o,
-		})) as IBuilderQuery[],
-	},
-});
-
-describe('saveRecentQuery', () => {
-	beforeEach(() => {
-		store.useRecentQueriesStore.setState({ buckets: {} });
-		localStorage.clear();
-		mockedValidateQuery.mockReturnValue({
-			isValid: true,
-			message: '',
-			errors: [],
-		});
-	});
-
-	it('saves the query when validation passes', () => {
-		saveRecentQuery(buildQuery());
-
-		const entries = store.list('logs');
-		expect(entries).toHaveLength(1);
-		expect(entries[0].filter.expression).toBe('service.name = "frontend"');
-	});
-
-	it('does not save when validateQuery rejects the expression', () => {
-		mockedValidateQuery.mockReturnValue({
-			isValid: false,
-			message: 'bad',
-			errors: [],
-		});
-
-		saveRecentQuery(buildQuery());
-
-		expect(store.list('logs')).toHaveLength(0);
-	});
-
-	it('does not save a builder query with an empty filter expression', () => {
-		saveRecentQuery(buildQuery([{ filter: { expression: '' } }]));
-
-		expect(store.list('logs')).toHaveLength(0);
-	});
-
-	it('saves each builder query in the composite separately', () => {
-		saveRecentQuery(
-			buildQuery([
-				{
-					dataSource: DataSource.LOGS,
-					filter: { expression: "service.name = 'frontend'" },
-				},
-				{
-					dataSource: DataSource.TRACES,
-					filter: { expression: "service.name = 'orders-api'" },
-				},
-			]),
-		);
-
-		expect(store.list('logs')).toHaveLength(1);
-		expect(store.list('traces')).toHaveLength(1);
-	});
-
-	it('keeps a single entry when the same query is run again', () => {
-		saveRecentQuery(buildQuery());
-		saveRecentQuery(buildQuery());
-
-		expect(store.list('logs')).toHaveLength(1);
-	});
-
-	it('adds a second entry when the filter changes', () => {
-		saveRecentQuery(
-			buildQuery([{ filter: { expression: "severity_text = 'ERROR'" } }]),
-		);
-		saveRecentQuery(
-			buildQuery([{ filter: { expression: 'http.status_code >= 500' } }]),
-		);
-
-		expect(store.list('logs')).toHaveLength(2);
-	});
-
-	it('is a no-op when the query is null', () => {
-		saveRecentQuery(null);
-
-		expect(store.list('logs')).toHaveLength(0);
-	});
-});

frontend/src/lib/recentQueries/saveRecentQuery.ts

@@ -1,48 +0,0 @@
-import type {
-	IBuilderQuery,
-	Query,
-	QueryState,
-} from 'types/api/queryBuilder/queryBuilderData';
-import type { SignalType } from 'types/api/v5/queryRange';
-import { validateQuery } from 'utils/queryValidationUtils';
-
-import * as store from './recentQueriesStore';
-
-function toSignal(dataSource: IBuilderQuery['dataSource']): SignalType | null {
-	if (
-		dataSource === 'logs' ||
-		dataSource === 'traces' ||
-		dataSource === 'metrics'
-	) {
-		return dataSource;
-	}
-	return null;
-}
-
-// Persists each builder query's filter expression as a recent search, partitioned
-// by signal (and source). Call this on an explicit Stage & Run — not on staged-query
-// changes — so page loads, navigation, and correlation redirects don't pollute recents.
-// The store dedups by normalized filter, so re-running a query just bumps it to the front.
-export function saveRecentQuery(
-	query: Query | QueryState | null | undefined,
-): void {
-	const queryData = query?.builder?.queryData ?? [];
-	queryData.forEach((q) => {
-		const expression = q.filter?.expression?.trim();
-		if (!expression) {
-			return;
-		}
-		if (!validateQuery(expression).isValid) {
-			return;
-		}
-		const signal = toSignal(q.dataSource);
-		if (!signal) {
-			return;
-		}
-		store.save({
-			signal,
-			source: q.source ?? '',
-			filter: q.filter ?? { expression: '' },
-		});
-	});
-}

frontend/src/lib/recentQueries/types.ts

@@ -1,14 +0,0 @@
-import type { Filter, SignalType } from 'types/api/v5/queryRange';
-
-export interface RecentQueryEntry {
-	id: string;
-	signal: SignalType;
-	source: string;
-	filter: Filter;
-	lastUsedAt: number;
-}
-
-export interface RecentQueriesStoreShape {
-	version: 1;
-	entries: RecentQueryEntry[];
-}

frontend/src/lib/recentQueries/utils.ts

@@ -1,24 +0,0 @@
-import type { SignalType } from 'types/api/v5/queryRange';
-
-import { STORAGE_KEY_PREFIX } from './constants';
-
-export function normalizeSource(source: string | undefined): string {
-	return source ?? '';
-}
-
-export function bucketKey(signal: SignalType, source: string): string {
-	return `${signal}:${source}`;
-}
-
-export function storageKeyFor(signal: SignalType, source: string): string {
-	return `${STORAGE_KEY_PREFIX}:${bucketKey(signal, source)}`;
-}
-
-// Same (signal, source, normalized filter) ⇒ same id ⇒ upsert.
-export function makeId(
-	signal: SignalType,
-	source: string,
-	normalizedFilter: string,
-): string {
-	return `${signal}|${source}|${normalizedFilter}`;
-}

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

@@ -171,18 +171,17 @@
 	}
 
 	.legend-copy-button {
-		// Always laid out (space reserved) but transparent, so revealing it on
-		// hover fades the icon in without reflowing the row / shifting the label.
-		// Shrink the shared icon Button (defaults to a 2rem square) to the
-		// compact legend row via its size tokens.
-		--button-height: auto;
-		--button-width: auto;
-		--button-padding: 2px;
-
-		opacity: 0;
+		display: none;
+		align-items: center;
+		justify-content: center;
 		flex-shrink: 0;
+		padding: 2px;
+		margin: 0;
+		border: none;
 		color: var(--l2-foreground);
+		cursor: pointer;
 		border-radius: 4px;
+		opacity: 1;
 		transition:
 			opacity 0.15s ease,
 			color 0.15s ease;
@@ -193,8 +192,9 @@
 	}
 
 	&:hover {
-		background: var(--l3-background);
+		background: color-mix(in srgb, var(--l1-foreground) 5%, transparent);
 		.legend-copy-button {
+			display: flex;
 			opacity: 1;
 		}
 	}

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

@@ -1,41 +1,39 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
-import { Input } from 'antd';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Input, Tooltip as AntdTooltip } from 'antd';
 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,
+	position = LegendPosition.BOTTOM,
+	config,
 	averageLegendWidth = MAX_LEGEND_WIDTH,
-	focusedSeriesIndex,
-	onClick,
-	onMouseMove,
-	onMouseLeave,
-	showCopy = true,
 }: 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();
 
-	// Search is intrinsic to the right-positioned legend.
-	const searchEnabled = position === LegendPosition.RIGHT;
+	const legendItems = useMemo(
+		() => Object.values(legendItemsMap),
+		[legendItemsMap],
+	);
 
 	const isSingleRow = useMemo(() => {
 		if (!legendContainerRef.current || position !== LegendPosition.BOTTOM) {
@@ -43,19 +41,21 @@ export default function Legend({
 		}
 		const containerWidth = legendContainerRef.current.clientWidth;
 
-		const totalLegendWidth = items.length * (averageLegendWidth + 16);
+		const totalLegendWidth = legendItems.length * (averageLegendWidth + 16);
 		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
 		return totalRows <= 1;
-	}, [averageLegendWidth, items.length, position]);
+	}, [averageLegendWidth, legendContainerRef, legendItems.length, position]);
 
 	const visibleLegendItems = useMemo(() => {
-		if (!searchEnabled || !legendSearchQuery.trim()) {
-			return items;
+		if (position !== LegendPosition.RIGHT || !legendSearchQuery.trim()) {
+			return legendItems;
 		}
 
 		const query = legendSearchQuery.trim().toLowerCase();
-		return items.filter((item) => item.label?.toLowerCase().includes(query));
-	}, [searchEnabled, legendSearchQuery, items]);
+		return legendItems.filter((item) =>
+			item.label?.toLowerCase().includes(query),
+		);
+	}, [position, legendSearchQuery, legendItems]);
 
 	const handleCopyLegendItem = useCallback(
 		(e: React.MouseEvent, seriesIndex: number, label: string): void => {
@@ -68,9 +68,6 @@ 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}
@@ -80,68 +77,54 @@ export default function Legend({
 						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
 					})}
 				>
-					<TooltipSimple title={item.label} arrow side="top" disableHoverableContent>
+					<AntdTooltip title={item.label}>
 						<div className="legend-item-label-trigger">
 							<div
 								className="legend-marker"
-								style={{ borderColor: markerColor }}
+								style={{ borderColor: String(item.color) }}
 								data-is-legend-marker={true}
 							/>
 							<span className="legend-label">{item.label}</span>
 						</div>
-					</TooltipSimple>
-					{showCopy && (
-						<TooltipSimple
-							title={isCopied ? 'Copied' : 'Copy'}
-							arrow
-							side="top"
-							disableHoverableContent
+					</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"
 						>
-							<Button
-								type="button"
-								size="icon"
-								variant="ghost"
-								color="secondary"
-								className="legend-copy-button"
-								onClick={(e): void =>
-									handleCopyLegendItem(e, item.seriesIndex, item.label ?? '')
-								}
-								aria-label={`Copy ${item.label}`}
-								// data-testid (not testId): TooltipSimple's trigger injects
-								// data-testid:undefined via Radix Slot, and Button spreads
-								// incoming props after its own testId — so set it as a prop
-								// that wins the Slot merge and survives the spread.
-								data-testid="legend-copy"
-							>
-								{isCopied ? <Check size={12} /> : <Copy size={12} />}
-							</Button>
-						</TooltipSimple>
-					)}
+							{isCopied ? <Check size={12} /> : <Copy size={12} />}
+						</button>
+					</AntdTooltip>
 				</div>
 			);
 		},
-		[copiedId, focusedSeriesIndex, handleCopyLegendItem, position, showCopy],
+		[copiedId, focusedSeriesIndex, handleCopyLegendItem, position],
 	);
 
 	const isEmptyState = useMemo(() => {
-		if (!searchEnabled || !legendSearchQuery.trim()) {
+		if (position !== LegendPosition.RIGHT || !legendSearchQuery.trim()) {
 			return false;
 		}
 		return visibleLegendItems.length === 0;
-	}, [searchEnabled, legendSearchQuery, visibleLegendItems]);
+	}, [position, legendSearchQuery, visibleLegendItems]);
 
 	return (
 		<div
 			ref={legendContainerRef}
 			className="legend-container"
-			onClick={onClick}
-			onMouseMove={onMouseMove}
-			onMouseLeave={onMouseLeave}
+			onClick={onLegendClick}
+			onMouseMove={onLegendMouseMove}
+			onMouseLeave={onLegendMouseLeave}
 			style={{
 				['--legend-average-width' as string]: `${averageLegendWidth + 16}px`, // 16px is the marker width
 			}}
 		>
-			{searchEnabled && (
+			{position === LegendPosition.RIGHT && (
 				<div className="legend-search-container">
 					<Input
 						allowClear

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

@@ -1,41 +0,0 @@
-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__/Legend.test.tsx

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

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

@@ -1,10 +1,9 @@
-import { MouseEventHandler, ReactNode } from 'react';
+import { 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';
 
 /**
@@ -110,33 +109,7 @@ 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). The search
- * box is intrinsic to the RIGHT position (derived from `position`, not a flag).
- */
 export interface LegendProps {
-	items: LegendItem[];
-	/** Legend placement; always supplied by the container. */
-	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;
-}
-
-/** 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: ChartClickData | null;
+	clickData: TooltipClickData | 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: ChartClickData) => void;
+	onClick?: (clickData: TooltipClickData) => void;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	syncMetadata?: TooltipSyncMetadata;
 	render: (args: TooltipRenderArgs) => ReactNode;
-	pinnedTooltipElement?: (clickData: ChartClickData) => ReactNode;
+	pinnedTooltipElement?: (clickData: TooltipClickData) => ReactNode;
 	maxWidth?: number;
 	maxHeight?: number;
 }
 
-export interface ChartClickData {
+export interface TooltipClickData {
 	xValue: number;
 	yValue: number;
 	focusedSeries: {
@@ -101,7 +101,7 @@ export interface TooltipControllerState {
 	hoverActive: boolean;
 	isAnySeriesActive: boolean;
 	pinned: boolean;
-	clickData: ChartClickData | null;
+	clickData: TooltipClickData | 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,
-	ChartClickData,
+	TooltipClickData,
 	TooltipLayoutInfo,
 	TooltipViewState,
 } from './types';
@@ -167,11 +167,14 @@ export function createLayoutObserver(
 }
 
 /**
- * Resolves a ChartClickData snapshot from a MouseEvent (real or synthetic)
+ * Resolves a TooltipClickData 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): ChartClickData {
+export function buildClickData(
+	event: MouseEvent,
+	plot: uPlot,
+): TooltipClickData {
 	const xValue = plot.posToVal(event.offsetX, 'x');
 	const yValue = plot.posToVal(event.offsetY, 'y');
 	const focusedSeries = getFocusedSeriesAtPosition(event, plot);

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

@@ -1,36 +1,29 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { useTranslation } from 'react-i18next';
 import { useCopyToClipboard } from 'react-use';
 import {
 	ClipboardCopy,
-	Configure,
 	Ellipsis,
 	FileJson,
 	Fullscreen,
 	LockKeyhole,
 	PenLine,
 	Plus,
-	Trash2,
 } from '@signozhq/icons';
+import { Popover } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-import ROUTES from 'constants/routes';
+import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import { useDeleteDashboard } from 'hooks/dashboard/useDeleteDashboard';
-import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
-import ConfirmDeleteDialog from '../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
-import DashboardSettings from '../../DashboardSettings';
-import SettingsDrawer from '../SettingsDrawer';
 import styles from '../DashboardDescription.module.scss';
 
-interface DashboardActionsProps {
+interface Props {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	isDashboardLocked: boolean;
@@ -52,19 +45,17 @@ function DashboardActions({
 	onAddPanel,
 	onLockToggle,
 	onOpenRename,
-}: DashboardActionsProps): JSX.Element {
+}: Props): JSX.Element {
 	const { user } = useAppContext();
 	const { t } = useTranslation(['dashboard', 'common']);
 
-	const id = dashboard.id ?? '';
+	const id = dashboard.id;
 	const title = dashboard.spec?.display?.name ?? '';
 
-	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
+	const [isDashboardSettingsOpen, setIsDashboardSettingsOpen] =
 		useState<boolean>(false);
 
 	const [state, setCopy] = useCopyToClipboard();
-	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
-	const deleteDashboardMutation = useDeleteDashboard(id);
 
 	useEffect(() => {
 		if (state.error) {
@@ -75,12 +66,9 @@ function DashboardActions({
 		}
 	}, [state.error, state.value, t]);
 
-	const dashboardDataJSON = useCallback(
-		(): string => JSON.stringify(dashboard, null, 2),
-		[dashboard],
-	);
+	const dashboardDataJSON = (): string => JSON.stringify(dashboard, null, 2);
 
-	const exportJSON = useCallback((): void => {
+	const exportJSON = (): void => {
 		const blob = new Blob([dashboardDataJSON()], { type: 'application/json' });
 		const url = URL.createObjectURL(blob);
 		const link = document.createElement('a');
@@ -90,141 +78,119 @@ function DashboardActions({
 		link.click();
 		document.body.removeChild(link);
 		URL.revokeObjectURL(url);
-	}, [dashboardDataJSON, title]);
-
-	const handleConfirmDelete = useCallback((): void => {
-		deleteDashboardMutation.mutate(undefined, {
-			onSuccess: () => {
-				setIsDeleteOpen(false);
-				history.replace(ROUTES.ALL_DASHBOARD);
-			},
-		});
-	}, [deleteDashboardMutation]);
-
-	const menuItems = useMemo<MenuItem[]>(() => {
-		const editGroup: MenuItem[] = [];
-		if (!isDashboardLocked && editDashboard) {
-			editGroup.push({
-				key: 'rename',
-				label: 'Rename',
-				icon: <PenLine size={14} />,
-				onClick: onOpenRename,
-			});
-		}
-		if (isAuthor || user.role === USER_ROLES.ADMIN) {
-			editGroup.push({
-				key: 'lock',
-				label: isDashboardLocked ? 'Unlock dashboard' : 'Lock dashboard',
-				icon: <LockKeyhole size={14} />,
-				disabled: dashboard.createdBy === 'integration',
-				onClick: onLockToggle,
-			});
-		}
-		editGroup.push({
-			key: 'fullscreen',
-			label: 'Full screen',
-			icon: <Fullscreen size={14} />,
-			onClick: handle.enter,
-		});
-
-		const exportGroup: MenuItem[] = [
-			{
-				key: 'export',
-				label: 'Export JSON',
-				icon: <FileJson size={14} />,
-				onClick: exportJSON,
-			},
-			{
-				key: 'copy',
-				label: 'Copy as JSON',
-				icon: <ClipboardCopy size={14} />,
-				onClick: (): void => setCopy(dashboardDataJSON()),
-			},
-		];
-
-		const dangerGroup: MenuItem[] = [
-			{
-				key: 'delete',
-				label: 'Delete dashboard',
-				icon: <Trash2 size={14} />,
-				danger: true,
-				onClick: (): void => setIsDeleteOpen(true),
-			},
-		];
-
-		return [editGroup, exportGroup, dangerGroup]
-			.filter((group) => group.length > 0)
-			.flatMap((group, index) =>
-				index > 0 ? [{ type: 'divider' } as MenuItem, ...group] : group,
-			);
-	}, [
-		isDashboardLocked,
-		editDashboard,
-		isAuthor,
-		user.role,
-		dashboard.createdBy,
-		onOpenRename,
-		onLockToggle,
-		handle.enter,
-		exportJSON,
-		setCopy,
-		dashboardDataJSON,
-	]);
+	};
 
 	return (
 		<div className={styles.rightSection}>
 			<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-			<DropdownMenuSimple menu={{ items: menuItems }}>
+			<Popover
+				open={isDashboardSettingsOpen}
+				arrow={false}
+				onOpenChange={(visible): void => setIsDashboardSettingsOpen(visible)}
+				rootClassName={styles.dashboardSettings}
+				content={
+					<div className={styles.menuContent}>
+						<section className={styles.section1}>
+							{(isAuthor || user.role === USER_ROLES.ADMIN) && (
+								<TooltipSimple
+									title={
+										dashboard.createdBy === 'integration'
+											? 'Dashboards created by integrations cannot be unlocked'
+											: ''
+									}
+								>
+									<Button
+										variant="ghost"
+										prefix={<LockKeyhole size={14} />}
+										disabled={dashboard.createdBy === 'integration'}
+										onClick={(): void => {
+											setIsDashboardSettingsOpen(false);
+											onLockToggle();
+										}}
+										testId="lock-unlock-dashboard"
+									>
+										{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
+									</Button>
+								</TooltipSimple>
+							)}
+
+							{!isDashboardLocked && editDashboard && (
+								<Button
+									variant="ghost"
+									prefix={<PenLine size={14} />}
+									onClick={(): void => {
+										onOpenRename();
+										setIsDashboardSettingsOpen(false);
+									}}
+								>
+									Rename
+								</Button>
+							)}
+
+							<Button
+								variant="ghost"
+								prefix={<Fullscreen size={14} />}
+								onClick={handle.enter}
+							>
+								Full screen
+							</Button>
+						</section>
+						<section className={styles.section2}>
+							<Button
+								variant="ghost"
+								prefix={<FileJson size={14} />}
+								onClick={(): void => {
+									exportJSON();
+									setIsDashboardSettingsOpen(false);
+								}}
+							>
+								Export JSON
+							</Button>
+							<Button
+								variant="ghost"
+								prefix={<ClipboardCopy size={14} />}
+								onClick={(): void => {
+									setCopy(dashboardDataJSON());
+									setIsDashboardSettingsOpen(false);
+								}}
+							>
+								Copy as JSON
+							</Button>
+						</section>
+						<section className={styles.deleteDashboard}>
+							<DeleteButton
+								createdBy={dashboard.createdBy || ''}
+								name={title}
+								id={id}
+								isLocked={isDashboardLocked}
+								routeToListPage
+							/>
+						</section>
+					</div>
+				}
+				trigger="click"
+				placement="bottomRight"
+			>
 				<Button
 					variant="ghost"
-					color="secondary"
 					size="icon"
 					prefix={<Ellipsis size={14} />}
 					className={styles.icons}
 					testId="options"
 				/>
-			</DropdownMenuSimple>
-			{!isDashboardLocked && editDashboard && (
-				<>
-					<Button
-						variant="solid"
-						color="secondary"
-						prefix={<Configure size="md" />}
-						testId="show-drawer"
-						onClick={(): void => setIsSettingsDrawerOpen(true)}
-						size="md"
-					>
-						Configure
-					</Button>
-					<SettingsDrawer
-						drawerTitle="Dashboard Configuration"
-						isOpen={isSettingsDrawerOpen}
-						onClose={(): void => setIsSettingsDrawerOpen(false)}
-					>
-						<DashboardSettings dashboard={dashboard} />
-					</SettingsDrawer>
-				</>
-			)}
+			</Popover>
 			{!isDashboardLocked && addPanelPermission && (
 				<Button
 					variant="solid"
 					color="primary"
+					className={styles.addPanelBtn}
 					onClick={onAddPanel}
 					prefix={<Plus size="md" />}
 					testId="add-panel-header"
-					size="md"
 				>
 					New Panel
 				</Button>
 			)}
-			<ConfirmDeleteDialog
-				open={isDeleteOpen}
-				title={`Delete dashboard "${title}"?`}
-				description="This action cannot be undone."
-				isLoading={deleteDashboardMutation.isLoading}
-				onConfirm={handleConfirmDelete}
-				onClose={(): void => setIsDeleteOpen(false)}
-			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardDescription.module.scss

@@ -20,7 +20,6 @@
 			align-items: center;
 			gap: 8px;
 			width: 45%;
-			height: 40px;
 
 			.dashboardImg {
 				height: 16px;
@@ -43,35 +42,6 @@
 				overflow: hidden;
 			}
 
-			.clickableTitle {
-				cursor: pointer;
-			}
-
-			.titleEdit {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-				width: 100%;
-				min-width: 0;
-			}
-
-			.titleInput {
-				flex: 1;
-				min-width: 0;
-				max-width: 70%;
-			}
-
-			.titleEditActionButton {
-				--button-height: auto;
-				--button-padding: 4px;
-				flex-shrink: 0;
-			}
-
-			.titleSaveActionButton {
-				--button-border-color: var(--text-forest-700);
-				--button-outlined-foreground: var(--text-forest-700);
-			}
-
 			.publicDashboardIcon {
 				margin-right: 4px;
 			}
@@ -84,7 +54,6 @@
 			flex-wrap: wrap;
 			align-items: center;
 			gap: 14px;
-			height: 40px;
 
 			.icons {
 				display: flex;
@@ -108,6 +77,41 @@
 			.icons:hover {
 				background-color: unset;
 			}
+
+			.configureButton {
+				display: flex;
+				align-items: center;
+				width: 93px;
+				height: 34px;
+				padding: 6px;
+				justify-content: center;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 10px; /* 83.333% */
+				letter-spacing: 0.12px;
+			}
+
+			.addPanelBtn {
+				display: flex;
+				width: 119px;
+				height: 34px;
+				padding: 5.937px 11.875px;
+				justify-content: center;
+				align-items: center;
+				color: var(--primary-foreground);
+				background: var(--primary-background);
+				font-family: Inter;
+				font-size: 11.875px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 17.812px; /* 150% */
+			}
 		}
 	}
 
@@ -205,6 +209,95 @@
 	}
 }
 
-.deleteModal :global(.ant-modal-confirm-body) {
-	align-items: center;
+.renameDashboard {
+	:global(.ant-modal-content) {
+		width: 384px;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		padding: 0px;
+
+		:global(.ant-modal-header) {
+			height: 52px;
+			padding: 16px;
+			background: var(--l2-background);
+			border-bottom: 1px solid var(--l1-border);
+			margin-bottom: 0px;
+
+			:global(.ant-modal-title) {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				width: 349px;
+				height: 20px;
+			}
+		}
+
+		:global(.ant-modal-body) {
+			padding: 16px;
+
+			.dashboardContent {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+
+				.nameText {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 20px; /* 142.857% */
+				}
+
+				.dashboardNameInput {
+					display: flex;
+					padding: 6px 6px 6px 8px;
+					align-items: center;
+					gap: 4px;
+					align-self: stretch;
+					border-radius: 0px 2px 2px 0px;
+					border: 1px solid var(--l1-border);
+					background: var(--l3-background);
+				}
+			}
+		}
+
+		:global(.ant-modal-footer) {
+			padding: 16px;
+			margin-top: 0px;
+
+			.dashboardRename {
+				display: flex;
+				flex-direction: row-reverse;
+				gap: 12px;
+
+				.cancelBtn {
+					display: flex;
+					padding: 4px 8px;
+					justify-content: center;
+					align-items: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--l1-border);
+				}
+
+				.renameBtn {
+					display: flex;
+					align-items: center;
+					width: 169px;
+					padding: 4px 8px;
+					justify-content: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--primary-background);
+				}
+			}
+		}
+	}
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardMeta/DashboardMeta.tsx

@@ -3,12 +3,12 @@ import { isEmpty } from 'lodash-es';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface DashboardMetaProps {
+interface Props {
 	tags: string[];
 	description: string;
 }
 
-function DashboardMeta({ tags, description }: DashboardMetaProps): JSX.Element {
+function DashboardMeta({ tags, description }: Props): JSX.Element {
 	return (
 		<>
 			{tags.length > 0 && (

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/DashboardTitle.tsx

@@ -1,25 +1,14 @@
-import { KeyboardEvent } from 'react';
-import { Check, Globe, LockKeyhole, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
+import { Globe, LockKeyhole } from '@signozhq/icons';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface DashboardTitleProps {
+interface Props {
 	title: string;
 	image: string;
 	isPublicDashboard: boolean;
 	isDashboardLocked: boolean;
-	isEditable: boolean;
-	isEditing: boolean;
-	draft: string;
-	onDraftChange: (value: string) => void;
-	onStartEdit: () => void;
-	onCommit: () => void;
-	onCancel: () => void;
 }
 
 function DashboardTitle({
@@ -27,76 +16,18 @@ function DashboardTitle({
 	image,
 	isPublicDashboard,
 	isDashboardLocked,
-	isEditable,
-	isEditing,
-	draft,
-	onDraftChange,
-	onStartEdit,
-	onCommit,
-	onCancel,
-}: DashboardTitleProps): JSX.Element {
-	const canEdit = isEditable && !isDashboardLocked;
-
-	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
-		if (event.key === 'Enter') {
-			event.preventDefault();
-			onCommit();
-		} else if (event.key === 'Escape') {
-			onCancel();
-		}
-	};
-
+}: Props): JSX.Element {
 	return (
 		<div className={styles.leftSection}>
 			<img src={image} alt="dashboard-img" className={styles.dashboardImg} />
-			{isEditing ? (
-				<div className={styles.titleEdit}>
-					<Input
-						autoFocus
-						value={draft}
-						testId="dashboard-title-input"
-						maxLength={120}
-						className={styles.titleInput}
-						onChange={(e): void => onDraftChange(e.target.value)}
-						onKeyDown={onKeyDown}
-					/>
-					<Button
-						type="button"
-						variant="outlined"
-						size="icon"
-						className={cx(styles.titleEditActionButton, styles.titleSaveActionButton)}
-						aria-label="Save title"
-						testId="dashboard-title-save"
-						onClick={onCommit}
-					>
-						<Check size={14} />
-					</Button>
-					<Button
-						type="button"
-						variant="outlined"
-						color="destructive"
-						size="icon"
-						className={styles.titleEditActionButton}
-						aria-label="Cancel title edit"
-						testId="dashboard-title-cancel"
-						onClick={onCancel}
-					>
-						<X size={14} />
-					</Button>
-				</div>
-			) : (
-				<TooltipSimple title={title.length > 30 ? title : ''}>
-					<Typography.Text
-						className={cx(styles.dashboardTitle, {
-							[styles.clickableTitle]: canEdit,
-						})}
-						data-testid="dashboard-title"
-						onClick={canEdit ? onStartEdit : undefined}
-					>
-						{title}
-					</Typography.Text>
-				</TooltipSimple>
-			)}
+			<TooltipSimple title={title.length > 30 ? title : ''}>
+				<Typography.Text
+					className={styles.dashboardTitle}
+					data-testid="dashboard-title"
+				>
+					{title}
+				</Typography.Text>
+			</TooltipSimple>
 
 			{isPublicDashboard && (
 				<TooltipSimple title="This dashboard is publicly accessible">

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/useEditableTitle.ts

@@ -1,63 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-interface UseEditableTitleArgs {
-	value: string;
-	onSave: (next: string) => void;
-}
-
-interface UseEditableTitleResult {
-	isEditing: boolean;
-	draft: string;
-	setDraft: (next: string) => void;
-	startEdit: () => void;
-	cancel: () => void;
-	commit: () => void;
-}
-
-/**
- * Drives an inline-editable title. The parent owns the canonical `value`; this
- * hook tracks the in-flight `draft` and whether we're editing. `commit` saves
- * only when the trimmed draft is non-empty and actually changed. A `cancelled`
- * ref guards against a blur firing right after Escape from also committing.
- */
-export function useEditableTitle({
-	value,
-	onSave,
-}: UseEditableTitleArgs): UseEditableTitleResult {
-	const [isEditing, setIsEditing] = useState<boolean>(false);
-	const [draft, setDraft] = useState<string>(value);
-	const cancelled = useRef<boolean>(false);
-
-	// Keep the draft in sync with the canonical value while not editing (e.g.
-	// after a refetch updates the title).
-	useEffect(() => {
-		if (!isEditing) {
-			setDraft(value);
-		}
-	}, [value, isEditing]);
-
-	const startEdit = (): void => {
-		cancelled.current = false;
-		setDraft(value);
-		setIsEditing(true);
-	};
-
-	const cancel = (): void => {
-		cancelled.current = true;
-		setIsEditing(false);
-	};
-
-	const commit = (): void => {
-		if (cancelled.current) {
-			cancelled.current = false;
-			return;
-		}
-		const trimmed = draft.trim();
-		if (trimmed && trimmed !== value) {
-			onSave(trimmed);
-		}
-		setIsEditing(false);
-	};
-
-	return { isEditing, draft, setDraft, startEdit, cancel, commit };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/RenameDashboardModal/RenameDashboardModal.tsx

@@ -0,0 +1,70 @@
+import { Input, Modal } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Check, X } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from '../DashboardDescription.module.scss';
+
+interface Props {
+	open: boolean;
+	value: string;
+	isLoading: boolean;
+	onChange: (value: string) => void;
+	onRename: () => void;
+	onClose: () => void;
+}
+
+function RenameDashboardModal({
+	open,
+	value,
+	isLoading,
+	onChange,
+	onRename,
+	onClose,
+}: Props): JSX.Element {
+	return (
+		<Modal
+			open={open}
+			title="Rename Dashboard"
+			onOk={onRename}
+			onCancel={onClose}
+			rootClassName={styles.renameDashboard}
+			footer={
+				<div className={styles.dashboardRename}>
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Check size={14} />}
+						className={styles.renameBtn}
+						onClick={onRename}
+						disabled={isLoading}
+					>
+						Rename Dashboard
+					</Button>
+					<Button
+						variant="ghost"
+						prefix={<X size={14} />}
+						className={styles.cancelBtn}
+						onClick={onClose}
+					>
+						Cancel
+					</Button>
+				</div>
+			}
+		>
+			<div className={styles.dashboardContent}>
+				<Typography.Text className={styles.nameText}>
+					Enter a new name
+				</Typography.Text>
+				<Input
+					data-testid="dashboard-name"
+					className={styles.dashboardNameInput}
+					value={value}
+					onChange={(e): void => onChange(e.target.value)}
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+export default RenameDashboardModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/SettingsDrawer/SettingsDrawer.module.scss

@@ -1,43 +0,0 @@
-.settingsContainerRoot {
-	:global(.ant-drawer-wrapper-body) {
-		border-left: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-		:global(.ant-drawer-header) {
-			height: 48px;
-			border-bottom: 1px solid var(--l1-border);
-			padding: 14px 14px 14px 11px;
-
-			:global(.ant-drawer-header-title) {
-				gap: 16px;
-
-				:global(.ant-drawer-title) {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-					padding-left: 16px;
-					border-left: 1px solid var(--l1-border);
-				}
-
-				:global(.ant-drawer-close) {
-					height: 16px;
-					width: 16px;
-					margin-inline-end: 0px !important;
-				}
-			}
-		}
-
-		:global(.ant-drawer-body) {
-			padding: 16px;
-
-			&::-webkit-scrollbar {
-				width: 0.1rem;
-			}
-		}
-	}
-}

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

@@ -1,34 +0,0 @@
-import { memo, PropsWithChildren, ReactElement } from 'react';
-import { Drawer } from 'antd';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-
-import styles from './SettingsDrawer.module.scss';
-
-type SettingsDrawerProps = PropsWithChildren<{
-	drawerTitle: string;
-	isOpen: boolean;
-	onClose: () => void;
-}>;
-
-function SettingsDrawer({
-	children,
-	drawerTitle,
-	isOpen,
-	onClose,
-}: SettingsDrawerProps): JSX.Element {
-	return (
-		<Drawer
-			title={drawerTitle}
-			placement="right"
-			width="50%"
-			onClose={onClose}
-			open={isOpen}
-			rootClassName={styles.settingsContainerRoot}
-		>
-			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
-			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
-		</Drawer>
-	);
-}
-
-export default memo(SettingsDrawer);

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { Card } from 'antd';
 import { toast } from '@signozhq/ui/sonner';
@@ -15,7 +15,6 @@ import type {
 import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
@@ -23,7 +22,7 @@ import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardMeta from './DashboardMeta/DashboardMeta';
 import DashboardTitle from './DashboardTitle/DashboardTitle';
-import { useEditableTitle } from './DashboardTitle/useEditableTitle';
+import RenameDashboardModal from './RenameDashboardModal/RenameDashboardModal';
 
 import styles from './DashboardDescription.module.scss';
 
@@ -53,9 +52,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const { user } = useAppContext();
 	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
 	const { showErrorModal } = useErrorModal();
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
@@ -63,7 +59,16 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
 	const isPublicDashboard = false;
 
-	const handleLockDashboardToggle = useCallback(async (): Promise<void> => {
+	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
+		useState<boolean>(false);
+	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
+	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
+
+	useEffect(() => {
+		setUpdatedTitle(title);
+	}, [title]);
+
+	const handleLockDashboardToggle = async (): Promise<void> => {
 		if (!id) {
 			return;
 		}
@@ -79,43 +84,41 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		} catch (error) {
 			showErrorModal(error as APIError);
 		}
-	}, [id, isDashboardLocked, refetch, showErrorModal]);
+	};
 
-	const onNameSave = useCallback(
-		async (next: string): Promise<void> => {
-			if (!id) {
-				return;
-			}
-			try {
-				const patch: DashboardtypesJSONPatchOperationDTO[] = [
-					{
-						op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-						path: '/spec/display/name',
-						value: next,
-					},
-				];
-				await patchDashboardV2({ id }, patch);
-				toast.success('Dashboard renamed successfully');
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[id, refetch, showErrorModal],
-	);
+	const onNameChangeHandler = async (): Promise<void> => {
+		const trimmed = updatedTitle.trim();
+		if (!id || !trimmed || trimmed === title) {
+			setIsRenameDashboardOpen(false);
+			return;
+		}
+		try {
+			setIsRenameLoading(true);
+			const patch: DashboardtypesJSONPatchOperationDTO[] = [
+				{
+					op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+					path: '/spec/display/name',
+					value: trimmed,
+				},
+			];
+			await patchDashboardV2({ id }, patch);
+			toast.success('Dashboard renamed successfully');
+			setIsRenameDashboardOpen(false);
+			refetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+			setIsRenameDashboardOpen(true);
+		} finally {
+			setIsRenameLoading(false);
+		}
+	};
 
-	const { isEditing, draft, setDraft, startEdit, cancel, commit } =
-		useEditableTitle({
-			value: title,
-			onSave: onNameSave,
-		});
-
-	const onEmptyWidgetHandler = useCallback((): void => {
+	const onEmptyWidgetHandler = (): void => {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
-		setIsPanelTypeSelectionModalOpen(true);
-	}, [id, setIsPanelTypeSelectionModalOpen]);
+		toast.info('V2 panel editor coming next');
+	};
 
 	return (
 		<Card className={styles.dashboardDescriptionContainer}>
@@ -126,13 +129,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					image={image}
 					isPublicDashboard={isPublicDashboard}
 					isDashboardLocked={isDashboardLocked}
-					isEditable={editDashboard}
-					isEditing={isEditing}
-					draft={draft}
-					onDraftChange={setDraft}
-					onStartEdit={startEdit}
-					onCommit={commit}
-					onCancel={cancel}
 				/>
 				<DashboardActions
 					dashboard={dashboard}
@@ -143,10 +139,19 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					addPanelPermission={addPanelPermission}
 					onAddPanel={onEmptyWidgetHandler}
 					onLockToggle={handleLockDashboardToggle}
-					onOpenRename={startEdit}
+					onOpenRename={(): void => setIsRenameDashboardOpen(true)}
 				/>
 			</section>
 			<DashboardMeta tags={tags} description={description} />
+
+			<RenameDashboardModal
+				open={isRenameDashboardOpen}
+				value={updatedTitle}
+				isLoading={isRenameLoading}
+				onChange={setUpdatedTitle}
+				onRename={onNameChangeHandler}
+				onClose={(): void => setIsRenameDashboardOpen(false)}
+			/>
 		</Card>
 	);
 }

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

@@ -1,11 +0,0 @@
-.placeholder {
-	padding: 24px;
-}
-
-.tabLabel {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	line-height: 1;
-	padding-top: 4px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/CrossPanelSync/CrossPanelSync.tsx

@@ -1,114 +0,0 @@
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
-import { Col, Radio, Tooltip } from 'antd';
-import { ExternalLink, SolidInfoCircle } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import { Events } from 'constants/events';
-import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
-import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
-import {
-	DashboardCursorSync,
-	SyncTooltipFilterMode,
-} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { getAbsoluteUrl } from 'utils/basePath';
-import cx from 'classnames';
-
-import styles from '../GeneralSettings.module.scss';
-
-interface CrossPanelSyncProps {
-	dashboardId: string;
-}
-
-function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
-	const [cursorSyncMode, setCursorSyncMode] =
-		useDashboardCursorSyncMode(dashboardId);
-	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
-		useSyncTooltipFilterMode(dashboardId);
-
-	return (
-		<Col className={cx(styles.overviewSettings, styles.crossPanelSyncGroup)}>
-			<div className={styles.crossPanelSyncSectionHeader}>
-				<Typography.Text className={styles.crossPanelSyncSectionTitle}>
-					Cross-Panel Sync
-				</Typography.Text>
-				<Tooltip
-					title={
-						<div className={styles.crossPanelSyncTooltipContent}>
-							<strong className={styles.crossPanelSyncTooltipTitle}>
-								Cross-Panel Sync
-							</strong>
-							<span className={styles.crossPanelSyncTooltipDescription}>
-								Sync crosshair and tooltip across all the dashboard panels
-							</span>
-							<a
-								href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
-								target="_blank"
-								rel="noopener noreferrer"
-								className={styles.crossPanelSyncTooltipDocLink}
-							>
-								Learn more
-								<ExternalLink size={12} />
-							</a>
-						</div>
-					}
-					placement="top"
-					mouseEnterDelay={0.5}
-				>
-					<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
-				</Tooltip>
-			</div>
-			<div className={styles.crossPanelSyncRow}>
-				<div className={styles.crossPanelSyncInfo}>
-					<Typography.Text className={styles.crossPanelSyncTitle}>
-						Sync Mode
-					</Typography.Text>
-					<Typography.Text className={styles.crossPanelSyncDescription}>
-						Sync crosshair and tooltip across all the dashboard panels
-					</Typography.Text>
-				</div>
-				<Radio.Group
-					value={cursorSyncMode}
-					onChange={(e): void => {
-						setCursorSyncMode(e.target.value as DashboardCursorSync);
-					}}
-				>
-					<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
-					<Radio.Button value={DashboardCursorSync.Crosshair}>
-						Crosshair
-					</Radio.Button>
-					<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
-				</Radio.Group>
-			</div>
-			{cursorSyncMode === DashboardCursorSync.Tooltip && (
-				<div className={styles.crossPanelSyncRow}>
-					<div className={styles.crossPanelSyncInfo}>
-						<Typography.Text className={styles.crossPanelSyncTitle}>
-							Synced Tooltip Series
-						</Typography.Text>
-						<Typography.Text className={styles.crossPanelSyncDescription}>
-							Show only series that intersect on group-by, or every series with the
-							matching ones highlighted
-						</Typography.Text>
-					</div>
-					<Radio.Group
-						value={syncTooltipFilterMode}
-						onChange={(e): void => {
-							void logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
-								path: getAbsoluteUrl(window.location.pathname),
-								mode: e.target.value,
-							});
-							setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
-						}}
-					>
-						<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
-						<Radio.Button value={SyncTooltipFilterMode.Filtered}>
-							Filtered
-						</Radio.Button>
-					</Radio.Group>
-				</div>
-			)}
-		</Col>
-	);
-}
-
-export default CrossPanelSync;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralForm/GeneralForm.tsx

@@ -1,85 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Select/Input to @signozhq/ui
-import { Col, Input, Select, Space } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
-
-import { Base64Icons } from '../utils';
-import styles from '../GeneralSettings.module.scss';
-
-const { Option } = Select;
-
-interface GeneralFormProps {
-	title: string;
-	description: string;
-	image: string;
-	tags: string[];
-	onTitleChange: (value: string) => void;
-	onDescriptionChange: (value: string) => void;
-	onImageChange: (value: string) => void;
-	onTagsChange: Dispatch<SetStateAction<string[]>>;
-}
-
-function GeneralForm({
-	title,
-	description,
-	image,
-	tags,
-	onTitleChange,
-	onDescriptionChange,
-	onImageChange,
-	onTagsChange,
-}: GeneralFormProps): JSX.Element {
-	return (
-		<Col className={styles.overviewSettings}>
-			<Space direction="vertical" className={styles.formSpace}>
-				<div>
-					<Typography className={styles.dashboardName}>Dashboard Name</Typography>
-					<section className={styles.nameIconInput}>
-						<Select
-							defaultActiveFirstOption
-							data-testid="dashboard-image"
-							suffixIcon={null}
-							rootClassName={styles.dashboardImageInput}
-							value={image}
-							onChange={onImageChange}
-						>
-							{Base64Icons.map((icon) => (
-								<Option value={icon} key={icon}>
-									<img
-										src={icon}
-										alt="dashboard-icon"
-										className={styles.listItemImage}
-									/>
-								</Option>
-							))}
-						</Select>
-						<Input
-							data-testid="dashboard-name"
-							className={styles.dashboardNameInput}
-							value={title}
-							onChange={(e): void => onTitleChange(e.target.value)}
-						/>
-					</section>
-				</div>
-
-				<div>
-					<Typography className={styles.dashboardName}>Description</Typography>
-					<Input.TextArea
-						data-testid="dashboard-desc"
-						rows={6}
-						value={description}
-						className={styles.descriptionTextArea}
-						onChange={(e): void => onDescriptionChange(e.target.value)}
-					/>
-				</div>
-				<div>
-					<Typography className={styles.dashboardName}>Tags</Typography>
-					<AddTags tags={tags} setTags={onTagsChange} />
-				</div>
-			</Space>
-		</Col>
-	);
-}
-
-export default GeneralForm;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss

@@ -1,238 +0,0 @@
-.overviewContent {
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-	padding: 20px 16px;
-}
-
-.overviewSettings {
-	padding: 16px;
-	border-radius: 3px;
-	border: 1px solid var(--l1-border);
-}
-
-.crossPanelSyncGroup {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.formSpace {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 21px;
-}
-
-.crossPanelSyncSectionTitle {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.crossPanelSyncSectionHeader {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	align-self: flex-start;
-}
-
-.crossPanelSyncInfoIcon {
-	cursor: help;
-	color: var(--l3-foreground);
-}
-
-.crossPanelSyncTooltipContent {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	max-width: 300px;
-}
-
-.crossPanelSyncTooltipTitle {
-	font-size: 14px;
-}
-
-.crossPanelSyncTooltipDescription {
-	font-size: 12px;
-	line-height: 1.5;
-}
-
-.crossPanelSyncTooltipDocLink {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	color: var(--primary-background);
-	font-size: 12px;
-	margin-top: 4px;
-}
-
-.crossPanelSyncRow {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 16px;
-
-	& + & {
-		padding-top: 16px;
-		border-top: 1px solid var(--l1-border);
-	}
-}
-
-.crossPanelSyncInfo {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.crossPanelSyncTitle {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.crossPanelSyncDescription {
-	color: var(--l3-foreground);
-	font-family: Inter;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.nameIconInput {
-	display: flex;
-}
-
-.dashboardImageInput {
-	:global(.ant-select-selector) {
-		display: flex;
-		width: 32px;
-		height: 32px;
-		padding: 6px;
-		justify-content: center;
-		align-items: center;
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l3-background) !important;
-
-		:global(.ant-select-selection-item) {
-			display: flex;
-			align-items: center;
-		}
-	}
-
-	&:global(.ant-select-dropdown) {
-		padding: 0px !important;
-	}
-
-	:global(.ant-select-item) {
-		padding: 0px;
-		align-items: center;
-		justify-content: center;
-
-		:global(.ant-select-item-option-content) {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-}
-
-.listItemImage {
-	height: 16px;
-	width: 16px;
-}
-
-.dashboardNameInput {
-	border-radius: 0px 2px 2px 0px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.dashboardName {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	margin-bottom: 0.5rem;
-}
-
-.descriptionTextArea {
-	padding: 6px 6px 6px 8px;
-	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.overviewSettingsFooter {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: -webkit-fill-available;
-	padding: 12px 16px 12px 0px;
-	position: fixed;
-	bottom: 0;
-	height: 32px;
-	border-top: 1px solid var(--l1-border);
-	background: var(--l2-background);
-}
-
-.unsaved {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.unsavedDot {
-	width: 6px;
-	height: 6px;
-	border-radius: 50px;
-	background: var(--primary-background);
-	box-shadow: 0px 0px 6px 0px
-		color-mix(in srgb, var(--primary-background) 40%, transparent);
-}
-
-.unsavedChanges {
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 24px;
-	letter-spacing: -0.07px;
-}
-
-.footerActionBtns {
-	display: flex;
-	gap: 8px;
-}
-
-.discardBtn {
-	display: flex;
-	align-items: center;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}
-
-.saveBtn {
-	display: flex;
-	align-items: center;
-	margin: 0px !important;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/UnsavedChangesFooter/UnsavedChangesFooter.tsx

@@ -1,59 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Button } from '@signozhq/ui/button';
-import { Check, X } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from '../GeneralSettings.module.scss';
-
-interface UnsavedChangesFooterProps {
-	count: number;
-	isSaving: boolean;
-	onDiscard: () => void;
-	onSave: () => void;
-}
-
-function UnsavedChangesFooter({
-	count,
-	isSaving,
-	onDiscard,
-	onSave,
-}: UnsavedChangesFooterProps): JSX.Element {
-	const { t } = useTranslation('common');
-
-	return (
-		<div className={styles.overviewSettingsFooter}>
-			<div className={styles.unsaved}>
-				<div className={styles.unsavedDot} />
-				<Typography.Text className={styles.unsavedChanges}>
-					{count} unsaved change
-					{count > 1 && 's'}
-				</Typography.Text>
-			</div>
-			<div className={styles.footerActionBtns}>
-				<Button
-					variant="ghost"
-					disabled={isSaving}
-					prefix={<X size={14} />}
-					onClick={onDiscard}
-					className={styles.discardBtn}
-				>
-					Discard
-				</Button>
-				<Button
-					variant="solid"
-					color="primary"
-					disabled={isSaving}
-					loading={isSaving}
-					prefix={<Check size={14} />}
-					testId="save-dashboard-config"
-					onClick={onSave}
-					className={styles.saveBtn}
-				>
-					{t('save')}
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export default UnsavedChangesFooter;

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

@@ -1,170 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	DashboardtypesJSONPatchOperationDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { toast } from '@signozhq/ui/sonner';
-import { isEqual } from 'lodash-es';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { useDashboardStore } from '../../store/useDashboardStore';
-import CrossPanelSync from './CrossPanelSync/CrossPanelSync';
-import GeneralForm from './GeneralForm/GeneralForm';
-import UnsavedChangesFooter from './UnsavedChangesFooter/UnsavedChangesFooter';
-import { Base64Icons, stringsToTags, tagsToStrings } from './utils';
-import styles from './GeneralSettings.module.scss';
-
-interface GeneralSettingsProps {
-	dashboard: DashboardtypesGettableDashboardV2DTO;
-}
-
-function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
-	const id = dashboard.id;
-
-	const refetch = useDashboardStore((s) => s.refetch);
-
-	const title = dashboard.spec?.display?.name ?? '';
-	const description = dashboard.spec?.display?.description ?? '';
-	const image = dashboard.image || Base64Icons[0];
-	const tagsAsStrings = useMemo(
-		() => tagsToStrings(dashboard.tags ?? []),
-		[dashboard.tags],
-	);
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-	const [updatedTags, setUpdatedTags] = useState<string[]>(tagsAsStrings);
-	const [updatedDescription, setUpdatedDescription] =
-		useState<string>(description);
-	const [updatedImage, setUpdatedImage] = useState<string>(image);
-	const [isSaving, setIsSaving] = useState<boolean>(false);
-	const [numberOfUnsavedChanges, setNumberOfUnsavedChanges] =
-		useState<number>(0);
-
-	const { showErrorModal } = useErrorModal();
-
-	// Sync state when dashboard refetches after a save
-	useEffect(() => {
-		setUpdatedTitle(title);
-		setUpdatedDescription(description);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboard.updatedAt]);
-
-	const buildPatch = useCallback((): DashboardtypesJSONPatchOperationDTO[] => {
-		const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-		const replace = (
-			path: string,
-			value: unknown,
-		): DashboardtypesJSONPatchOperationDTO => ({
-			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-			path,
-			value,
-		});
-
-		if (updatedTitle !== title) {
-			ops.push(replace('/spec/display/name', updatedTitle));
-		}
-		if (updatedDescription !== description) {
-			ops.push(replace('/spec/display/description', updatedDescription));
-		}
-		if (updatedImage !== image) {
-			ops.push(replace('/image', updatedImage));
-		}
-		if (!isEqual(updatedTags, tagsAsStrings)) {
-			ops.push(replace('/tags', stringsToTags(updatedTags)));
-		}
-		return ops;
-	}, [
-		updatedTitle,
-		title,
-		updatedDescription,
-		description,
-		updatedImage,
-		image,
-		updatedTags,
-		tagsAsStrings,
-	]);
-
-	const onSaveHandler = useCallback(async (): Promise<void> => {
-		if (!id) {
-			return;
-		}
-		const ops = buildPatch();
-		if (ops.length === 0) {
-			return;
-		}
-
-		try {
-			setIsSaving(true);
-			await patchDashboardV2({ id }, ops);
-			toast.success('Dashboard updated');
-			refetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [id, buildPatch, refetch, showErrorModal]);
-
-	useEffect(() => {
-		let n = 0;
-		const initialValues = [title, description, tagsAsStrings, image];
-		const updatedValues = [
-			updatedTitle,
-			updatedDescription,
-			updatedTags,
-			updatedImage,
-		];
-		initialValues.forEach((val, index) => {
-			if (!isEqual(val, updatedValues[index])) {
-				n += 1;
-			}
-		});
-		setNumberOfUnsavedChanges(n);
-	}, [
-		description,
-		image,
-		tagsAsStrings,
-		title,
-		updatedDescription,
-		updatedImage,
-		updatedTags,
-		updatedTitle,
-	]);
-
-	const discardHandler = useCallback((): void => {
-		setUpdatedTitle(title);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		setUpdatedDescription(description);
-	}, [title, image, tagsAsStrings, description]);
-
-	return (
-		<div className={styles.overviewContent}>
-			<GeneralForm
-				title={updatedTitle}
-				description={updatedDescription}
-				image={updatedImage}
-				tags={updatedTags}
-				onTitleChange={setUpdatedTitle}
-				onDescriptionChange={setUpdatedDescription}
-				onImageChange={setUpdatedImage}
-				onTagsChange={setUpdatedTags}
-			/>
-			<CrossPanelSync dashboardId={id} />
-			{numberOfUnsavedChanges > 0 && (
-				<UnsavedChangesFooter
-					count={numberOfUnsavedChanges}
-					isSaving={isSaving}
-					onDiscard={discardHandler}
-					onSave={onSaveHandler}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default GeneralSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/utils.ts

@@ -1,24 +0,0 @@
-import type { TagtypesPostableTagDTO } from 'api/generated/services/sigNoz.schemas';
-
-export { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
-
-// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
-// collapsed back to just `x` for display.
-export function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
-	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
-}
-
-export function stringsToTags(tagStrings: string[]): TagtypesPostableTagDTO[] {
-	return tagStrings
-		.map((s) => {
-			const trimmed = s.trim();
-			const idx = trimmed.indexOf(':');
-			if (idx === -1) {
-				return { key: trimmed, value: trimmed };
-			}
-			const key = trimmed.slice(0, idx).trim();
-			const value = trimmed.slice(idx + 1).trim();
-			return { key, value: value || key };
-		})
-		.filter((t) => t.key.length > 0);
-}

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

@@ -1,54 +0,0 @@
-import { useMemo } from 'react';
-
-import { Braces, Globe, Table } from '@signozhq/icons';
-import { Tabs } from '@signozhq/ui/tabs';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import GeneralSettings from './General';
-import { SettingsTabPlaceholder } from './utils';
-
-import styles from './DashboardSettings.module.scss';
-
-interface DashboardSettingsProps {
-	dashboard: DashboardtypesGettableDashboardV2DTO;
-}
-
-function tabLabel(icon: JSX.Element, text: string): JSX.Element {
-	return (
-		<span className={styles.tabLabel}>
-			{icon}
-			{text}
-		</span>
-	);
-}
-
-function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
-	const items = useMemo(
-		() => [
-			{
-				key: 'general',
-				label: tabLabel(<Table size={14} />, 'General'),
-				children: <GeneralSettings dashboard={dashboard} />,
-			},
-			{
-				key: 'variables',
-				label: tabLabel(<Braces size={14} />, 'Variables'),
-				children: (
-					<SettingsTabPlaceholder message="V2 dashboard variables coming next." />
-				),
-			},
-			{
-				key: 'public-dashboard',
-				label: tabLabel(<Globe size={14} />, 'Publish'),
-				children: (
-					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
-				),
-			},
-		],
-		[dashboard],
-	);
-
-	return <Tabs defaultValue="general" items={items} />;
-}
-
-export default DashboardSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/utils.tsx

@@ -1,23 +0,0 @@
-import { Empty } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './DashboardSettings.module.scss';
-
-/**
- * TEMPORARY: stand-in for the not-yet-built Variables / Publish settings tabs.
- * Will be cleaned up later once those tabs ship their real content.
- */
-export function SettingsTabPlaceholder({
-	message,
-}: {
-	message: string;
-}): JSX.Element {
-	return (
-		<div className={styles.placeholder}>
-			<Empty
-				image={Empty.PRESENTED_IMAGE_SIMPLE}
-				description={<Typography.Text>{message}</Typography.Text>}
-			/>
-		</div>
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/DashboardEmptyState/DashboardEmptyState.module.scss

@@ -1,86 +0,0 @@
-.emptyState {
-	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-	padding: 48px 16px;
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-	width: 100%;
-	max-width: 480px;
-}
-
-.heading {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-
-	.emoji {
-		height: 32px;
-		width: 32px;
-	}
-
-	.welcome {
-		color: var(--l1-foreground);
-		font-family: Inter;
-		font-size: 16px;
-		font-weight: 500;
-		line-height: 24px;
-		letter-spacing: -0.08px;
-	}
-
-	.welcomeInfo {
-		color: var(--l3-foreground);
-		font-family: Inter;
-		font-size: 13px;
-		font-weight: 400;
-		line-height: 18px;
-	}
-}
-
-.addPanel {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 16px;
-	padding: 16px;
-	border: 1px dashed var(--l1-border);
-	border-radius: 6px;
-}
-
-.addPanelText {
-	display: flex;
-	align-items: flex-start;
-	gap: 10px;
-
-	.icon {
-		height: 14px;
-		width: 14px;
-		margin-top: 2px;
-	}
-}
-
-.addPanelCopy {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-
-.addPanelTitle {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.addPanelInfo {
-	color: var(--l3-foreground);
-	font-family: Inter;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 18px;
-}

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

@@ -1,63 +0,0 @@
-import { Plus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
-
-import dashboardEmojiUrl from '@/assets/Icons/dashboard_emoji.svg';
-import landscapeUrl from '@/assets/Icons/landscape.svg';
-
-import styles from './DashboardEmptyState.module.scss';
-
-interface DashboardEmptyStateProps {
-	canAddPanel: boolean;
-}
-
-function DashboardEmptyState({
-	canAddPanel,
-}: DashboardEmptyStateProps): JSX.Element {
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
-
-	return (
-		<section className={styles.emptyState}>
-			<div className={styles.content}>
-				<div className={styles.heading}>
-					<img src={dashboardEmojiUrl} alt="" className={styles.emoji} />
-					<Typography.Text className={styles.welcome}>
-						Welcome to your new dashboard
-					</Typography.Text>
-					<Typography.Text className={styles.welcomeInfo}>
-						Follow the steps to populate it with data and share with your teammates
-					</Typography.Text>
-				</div>
-
-				<div className={styles.addPanel}>
-					<div className={styles.addPanelText}>
-						<img src={landscapeUrl} alt="" className={styles.icon} />
-						<div className={styles.addPanelCopy}>
-							<Typography.Text className={styles.addPanelTitle}>
-								Add panels
-							</Typography.Text>
-							<Typography.Text className={styles.addPanelInfo}>
-								Add panels to visualize your data
-							</Typography.Text>
-						</div>
-					</div>
-					{canAddPanel && (
-						<Button
-							color="primary"
-							prefix={<Plus size="md" />}
-							onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
-							testId="add-panel"
-						>
-							New Panel
-						</Button>
-					)}
-				</div>
-			</div>
-		</section>
-	);
-}
-
-export default DashboardEmptyState;

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

@@ -4,7 +4,7 @@
 	height: 100%;
 	width: 100%;
 	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-400, #1d212d);
 	border-radius: 4px;
 	overflow: hidden;
 }
@@ -14,7 +14,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 8px 12px;
-	border-bottom: 1px solid var(--l1-border);
+	border-bottom: 1px solid var(--bg-slate-400, #1d212d);
 	cursor: grab;
 }
 
@@ -42,7 +42,7 @@
 	align-items: center;
 	justify-content: center;
 	padding: 12px;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400, #8993ae);
 	font-size: 12px;
 	text-align: center;
 }

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

@@ -12,15 +12,7 @@ import type { MovePanelArgs } from './hooks/useMovePanelToSection';
 import PanelActionsMenu from './PanelActionsMenu/PanelActionsMenu';
 import styles from './Panel.module.scss';
 
-/** Panel action context — present together only in editable sectioned mode. */
-export interface PanelActionsConfig {
-	currentLayoutIndex: number;
-	sections: DashboardSection[];
-	onMovePanel: (args: MovePanelArgs) => void;
-	onDeletePanel: (args: DeletePanelArgs) => void;
-}
-
-interface PanelProps {
+interface Props {
 	panel: DashboardtypesPanelDTO | undefined;
 	panelId: string;
 	/**
@@ -29,16 +21,22 @@ interface PanelProps {
 	 * data. Currently unused on purpose.
 	 */
 	isVisible?: boolean;
-	/** Move/delete actions — present only in editable sectioned mode. */
-	panelActions?: PanelActionsConfig;
+	/** Section actions — present only in editable sectioned mode. */
+	currentLayoutIndex?: number;
+	sections?: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
 function Panel({
 	panel,
 	panelId,
 	isVisible,
-	panelActions,
-}: PanelProps): JSX.Element {
+	currentLayoutIndex,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: Props): JSX.Element {
 	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
 	const description = panel?.spec?.display?.description;
 	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
@@ -67,13 +65,13 @@ function Panel({
 					</Typography.Text>
 					<Badge className={styles.badge}>{kind}</Badge>
 				</div>
-				{panelActions ? (
+				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
 					<PanelActionsMenu
 						panelId={panelId}
-						currentLayoutIndex={panelActions.currentLayoutIndex}
-						sections={panelActions.sections}
-						onMovePanel={panelActions.onMovePanel}
-						onDeletePanel={panelActions.onDeletePanel}
+						currentLayoutIndex={currentLayoutIndex}
+						sections={sections ?? []}
+						onMovePanel={onMovePanel}
+						onDeletePanel={onDeletePanel}
 					/>
 				) : (
 					<EllipsisVertical size={14} />

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

@@ -6,11 +6,11 @@
 	background: transparent;
 	border: none;
 	border-radius: 2px;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400, #8993ae);
 	cursor: pointer;
 
 	&:hover {
-		color: var(--l1-foreground);
-		background: var(--l2-background);
+		color: var(--bg-vanilla-100, #fff);
+		background: var(--bg-slate-400, #1d212d);
 	}
 }

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

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 
@@ -9,7 +8,7 @@ import type { DeletePanelArgs } from '../hooks/useDeletePanel';
 import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
 import styles from './PanelActionsMenu.module.scss';
 
-interface PanelActionsMenuProps {
+interface Props {
 	panelId: string;
 	currentLayoutIndex: number;
 	sections: DashboardSection[];
@@ -23,7 +22,7 @@ function PanelActionsMenu({
 	sections,
 	onMovePanel,
 	onDeletePanel,
-}: PanelActionsMenuProps): JSX.Element {
+}: Props): JSX.Element {
 	const items = useMemo<MenuItem[]>(() => {
 		const result: MenuItem[] = [];
 
@@ -76,11 +75,8 @@ function PanelActionsMenu({
 
 	return (
 		<DropdownMenuSimple menu={{ items }}>
-			<Button
+			<button
 				type="button"
-				variant="ghost"
-				color="secondary"
-				size="icon"
 				className={styles.trigger}
 				aria-label="Panel actions"
 				data-testid={`panel-actions-${panelId}`}
@@ -91,7 +87,7 @@ function PanelActionsMenu({
 				onClick={(e): void => e.stopPropagation()}
 			>
 				<EllipsisVertical size={14} />
-			</Button>
+			</button>
 		</DropdownMenuSimple>
 	);
 }

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

@@ -10,9 +10,9 @@
 	gap: 8px;
 	padding: 12px;
 	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-400, #1d212d);
 	border-radius: 4px;
-	color: var(--l1-foreground);
+	color: var(--bg-vanilla-100, #fff);
 	cursor: pointer;
 	text-align: left;
 

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

@@ -1,10 +1,48 @@
 import { Modal } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import {
+	BarChart,
+	ChartLine,
+	ChartPie,
+	Hash,
+	List,
+	Table,
+} from '@signozhq/icons';
 
-import { PANEL_TYPES } from './constants';
 import styles from './PanelTypeSelectionModal.module.scss';
 
-interface PanelTypeSelectionModalProps {
+interface PanelType {
+	pluginKind: string;
+	label: string;
+	icon: JSX.Element;
+}
+
+const PANEL_TYPES: PanelType[] = [
+	{
+		pluginKind: 'signoz/TimeSeriesPanel',
+		label: 'Time Series',
+		icon: <ChartLine size={16} />,
+	},
+	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
+	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
+	{
+		pluginKind: 'signoz/BarChartPanel',
+		label: 'Bar Chart',
+		icon: <BarChart size={16} />,
+	},
+	{
+		pluginKind: 'signoz/PieChartPanel',
+		label: 'Pie Chart',
+		icon: <ChartPie size={16} />,
+	},
+	{
+		pluginKind: 'signoz/HistogramPanel',
+		label: 'Histogram',
+		icon: <BarChart size={16} />,
+	},
+	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
+];
+
+interface Props {
 	open: boolean;
 	onClose: () => void;
 	onSelect: (pluginKind: string) => void;
@@ -14,7 +52,7 @@ function PanelTypeSelectionModal({
 	open,
 	onClose,
 	onSelect,
-}: PanelTypeSelectionModalProps): JSX.Element {
+}: Props): JSX.Element {
 	return (
 		<Modal
 			open={open}
@@ -25,17 +63,16 @@ function PanelTypeSelectionModal({
 		>
 			<div className={styles.grid}>
 				{PANEL_TYPES.map((type) => (
-					<Button
+					<button
 						key={type.pluginKind}
 						type="button"
-						variant="ghost"
 						className={styles.typeButton}
 						data-testid={`panel-type-${type.pluginKind}`}
 						onClick={(): void => onSelect(type.pluginKind)}
 					>
 						{type.icon}
 						{type.label}
-					</Button>
+					</button>
 				))}
 			</div>
 		</Modal>

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

@@ -1,36 +0,0 @@
-import {
-	BarChart,
-	ChartLine,
-	ChartPie,
-	Hash,
-	List,
-	Table,
-} from '@signozhq/icons';
-
-import type { PanelType } from './types';
-
-export const PANEL_TYPES: PanelType[] = [
-	{
-		pluginKind: 'signoz/TimeSeriesPanel',
-		label: 'Time Series',
-		icon: <ChartLine size={16} />,
-	},
-	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
-	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
-	{
-		pluginKind: 'signoz/BarChartPanel',
-		label: 'Bar Chart',
-		icon: <BarChart size={16} />,
-	},
-	{
-		pluginKind: 'signoz/PieChartPanel',
-		label: 'Pie Chart',
-		icon: <ChartPie size={16} />,
-	},
-	{
-		pluginKind: 'signoz/HistogramPanel',
-		label: 'Histogram',
-		icon: <BarChart size={16} />,
-	},
-	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
-];

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/types.ts

@@ -1,5 +0,0 @@
-export interface PanelType {
-	pluginKind: string;
-	label: string;
-	icon: JSX.Element;
-}

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

@@ -36,6 +36,9 @@ export function useAddPanelToSection({
 
 	return useCallback(
 		async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise<void> => {
+			if (!dashboardId) {
+				return;
+			}
 			const target = sections.find((s) => s.layoutIndex === layoutIndex);
 			if (!target) {
 				return;

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

@@ -5,13 +5,13 @@
 	margin-top: 8px;
 	padding: 8px 12px;
 	background: transparent;
-	border: 1px dashed var(--l1-border);
+	border: 1px dashed var(--bg-slate-400, #1d212d);
 	border-radius: 4px;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400, #8993ae);
 	cursor: pointer;
 
 	&:hover {
 		border-color: var(--bg-robin-500);
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100, #fff);
 	}
 }

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

@@ -1,6 +1,5 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { Plus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
 
 import type { DashboardSection } from '../../../utils';
@@ -11,7 +10,7 @@ import styles from './AddSectionControl.module.scss';
 
 const DEFAULT_SECTION_TITLE = 'New section';
 
-interface AddSectionControlProps {
+interface Props {
 	sections: DashboardSection[];
 	layouts: DashboardtypesLayoutDTO[] | undefined | null;
 	isSectioned: boolean;
@@ -21,7 +20,7 @@ function AddSectionControl({
 	sections,
 	layouts,
 	isSectioned,
-}: AddSectionControlProps): JSX.Element {
+}: Props): JSX.Element {
 	const [isMigrationOpen, setIsMigrationOpen] = useState(false);
 	const { addSection } = useAddSection({ layouts });
 	const { migrate, isSaving } = useFirstSectionMigration({ sections });
@@ -31,31 +30,30 @@ function AddSectionControl({
 	const needsMigration =
 		!isSectioned && sections.some((s) => s.items.length > 0);
 
-	const handleClick = useCallback((): void => {
+	const handleClick = (): void => {
 		if (needsMigration) {
 			setIsMigrationOpen(true);
 			return;
 		}
 		void addSection(DEFAULT_SECTION_TITLE);
-	}, [needsMigration, addSection]);
+	};
 
-	const handleConfirmMigration = useCallback(async (): Promise<void> => {
+	const handleConfirmMigration = async (): Promise<void> => {
 		await migrate(DEFAULT_SECTION_TITLE);
 		setIsMigrationOpen(false);
-	}, [migrate]);
+	};
 
 	return (
 		<>
-			<Button
+			<button
 				type="button"
-				variant="ghost"
 				className={styles.addButton}
 				onClick={handleClick}
 				data-testid="add-section"
 			>
 				<Plus size={14} />
 				Add section
-			</Button>
+			</button>
 			<FirstSectionMigrationModal
 				open={isMigrationOpen}
 				isSaving={isSaving}

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

@@ -1,7 +1,7 @@
 import { Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
-interface FirstSectionMigrationModalProps {
+interface Props {
 	open: boolean;
 	isSaving: boolean;
 	onClose: () => void;
@@ -18,7 +18,7 @@ function FirstSectionMigrationModal({
 	isSaving,
 	onClose,
 	onConfirm,
-}: FirstSectionMigrationModalProps): JSX.Element {
+}: Props): JSX.Element {
 	return (
 		<Modal
 			open={open}

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

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Modal } from 'antd';
 import { Input } from '@signozhq/ui/input';
 
-interface RenameSectionModalProps {
+interface Props {
 	open: boolean;
 	initialValue: string;
 	isSaving: boolean;
@@ -16,7 +16,7 @@ function RenameSectionModal({
 	isSaving,
 	onClose,
 	onSubmit,
-}: RenameSectionModalProps): JSX.Element {
+}: Props): JSX.Element {
 	const [value, setValue] = useState<string>(initialValue);
 
 	// Reseed the field each time the modal opens.

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

@@ -1,20 +1,9 @@
 .section {
 	margin-bottom: 12px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-500);
 	border-radius: 4px;
 }
 
 .dragging {
 	opacity: 0.8;
 }
-
-.deleteModal :global(.ant-modal-confirm-body) {
-	align-items: center;
-}
-
-.emptySection {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding: 24px 12px;
-}

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

@@ -1,11 +1,8 @@
-import { useCallback, useRef, useState } from 'react';
-import { Plus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
+import { useRef, useState } from 'react';
+import { Modal } from 'antd';
 
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 
-import ConfirmDeleteDialog from '../../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import type { DashboardSection } from '../../../utils';
 import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
 import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
@@ -22,7 +19,7 @@ import SectionHeader, {
 } from '../SectionHeader/SectionHeader';
 import styles from './Section.module.scss';
 
-interface SectionProps {
+interface Props {
 	section: DashboardSection;
 	/** Adds a panel to this section; present only in editable sectioned mode. */
 	onAddPanel?: (args: AddPanelArgs) => void;
@@ -41,12 +38,8 @@ function Section({
 	onMovePanel,
 	onDeletePanel,
 	dragHandle,
-}: SectionProps): JSX.Element {
+}: Props): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
-	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
 	// true once the section scrolls into (or near) the viewport.
@@ -61,30 +54,30 @@ function Section({
 		layoutIndex: section.layoutIndex,
 	});
 
-	const handleRenameSubmit = useCallback(
-		async (title: string): Promise<void> => {
-			const ok = await rename(title);
-			if (ok) {
-				setIsRenaming(false);
-			}
-		},
-		[rename],
-	);
+	const handleRenameSubmit = async (title: string): Promise<void> => {
+		const ok = await rename(title);
+		if (ok) {
+			setIsRenaming(false);
+		}
+	};
 
 	const [isAddingPanel, setIsAddingPanel] = useState(false);
-	const handleSelectPanelType = useCallback(
-		(pluginKind: string): void => {
-			onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
-			setIsAddingPanel(false);
-		},
-		[onAddPanel, section.layoutIndex],
-	);
+	const handleSelectPanelType = (pluginKind: string): void => {
+		onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
+		setIsAddingPanel(false);
+	};
 
 	const { deleteSection } = useDeleteSection({ section });
-	const handleDeleteSection = useCallback((): void => {
-		void deleteSection();
-		setIsDeleteOpen(false);
-	}, [deleteSection]);
+	const confirmDeleteSection = (): void => {
+		Modal.confirm({
+			title: `Delete section "${section.title ?? ''}"?`,
+			content: 'Panels in this section will be removed.',
+			okText: 'Delete',
+			okButtonProps: { danger: true },
+			centered: true,
+			onOk: () => deleteSection(),
+		});
+	};
 
 	const grid = (
 		<SectionGrid
@@ -125,35 +118,13 @@ function Section({
 				onToggle={toggle}
 				repeatVariable={section.repeatVariable}
 				dragHandle={dragHandle}
-				actions={
-					isEditable
-						? {
-								onRename: (): void => setIsRenaming(true),
-								onAddPanel: (): void => setIsAddingPanel(true),
-								onDeleteSection: (): void => setIsDeleteOpen(true),
-							}
-						: undefined
+				onRename={isEditable ? (): void => setIsRenaming(true) : undefined}
+				onAddPanel={
+					isEditable && onAddPanel ? (): void => setIsAddingPanel(true) : undefined
 				}
+				onDeleteSection={isEditable ? confirmDeleteSection : undefined}
 			/>
-			{open &&
-				(section.items.length > 0 ? (
-					grid
-				) : (
-					<div className={styles.emptySection}>
-						{isEditable && (
-							<Button
-								type="button"
-								variant="dashed"
-								color="secondary"
-								prefix={<Plus size="md" />}
-								onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
-								testId={`section-add-panel-${section.id}`}
-							>
-								New Panel
-							</Button>
-						)}
-					</div>
-				))}
+			{open ? grid : null}
 			<RenameSectionModal
 				open={isRenaming}
 				initialValue={section.title}
@@ -166,13 +137,6 @@ function Section({
 				onClose={(): void => setIsAddingPanel(false)}
 				onSelect={handleSelectPanelType}
 			/>
-			<ConfirmDeleteDialog
-				open={isDeleteOpen}
-				title={`Delete section "${section.title ?? ''}"?`}
-				description="Panels in this section will be removed."
-				onConfirm={handleDeleteSection}
-				onClose={(): void => setIsDeleteOpen(false)}
-			/>
 		</div>
 	);
 }

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

@@ -6,11 +6,11 @@
 	background: transparent;
 	border: none;
 	border-radius: 2px;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400, #8993ae);
 	cursor: pointer;
 
 	&:hover {
-		color: var(--l1-foreground);
-		background: var(--l2-background);
+		color: var(--bg-vanilla-100, #fff);
+		background: var(--bg-slate-400, #1d212d);
 	}
 }

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

@@ -1,12 +1,11 @@
 import { useMemo } from 'react';
 import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 
 import styles from './SectionActionsMenu.module.scss';
 
-interface SectionActionsMenuProps {
+interface Props {
 	sectionId: string;
 	onAddPanel?: () => void;
 	onRename?: () => void;
@@ -18,7 +17,7 @@ function SectionActionsMenu({
 	onAddPanel,
 	onRename,
 	onDeleteSection,
-}: SectionActionsMenuProps): JSX.Element {
+}: Props): JSX.Element {
 	const items = useMemo<MenuItem[]>(() => {
 		const result: MenuItem[] = [];
 		if (onAddPanel) {
@@ -54,17 +53,14 @@ function SectionActionsMenu({
 
 	return (
 		<DropdownMenuSimple menu={{ items }}>
-			<Button
+			<button
 				type="button"
-				variant="ghost"
-				color="secondary"
-				size="icon"
 				className={styles.trigger}
 				aria-label="Section actions"
 				data-testid={`dashboard-section-actions-${sectionId}`}
 			>
 				<EllipsisVertical size={14} />
-			</Button>
+			</button>
 		</DropdownMenuSimple>
 	);
 }

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

@@ -2,7 +2,7 @@ import type { DashboardSection } from '../../../utils';
 import SectionHeader from '../SectionHeader/SectionHeader';
 import styles from './SectionDragPreview.module.scss';
 
-interface SectionDragPreviewProps {
+interface Props {
 	section: DashboardSection;
 }
 
@@ -11,7 +11,7 @@ interface SectionDragPreviewProps {
  * dragged. Deliberately header-only (no react-grid-layout) so the overlay is
  * cheap and never triggers RGL width re-measurement.
  */
-function SectionDragPreview({ section }: SectionDragPreviewProps): JSX.Element {
+function SectionDragPreview({ section }: Props): JSX.Element {
 	const panelCount = section.items.length;
 	const title = `${section.title ?? ''} · ${panelCount} ${
 		panelCount === 1 ? 'panel' : 'panels'