fix: tests to use UTC instead of utc

ListPlannedMaintenance now reads the schedule as raw text and parses each
row individually, skipping and logging the bad ones so the rest survive.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.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

@@ -409,10 +409,6 @@ components:
       properties:
         duration:
           type: string
-        endTime:
-          format: date-time
-          nullable: true
-          type: string
         repeatOn:
           items:
             $ref: '#/components/schemas/AlertmanagertypesRepeatOn'
@@ -420,11 +416,7 @@ components:
           type: array
         repeatType:
           $ref: '#/components/schemas/AlertmanagertypesRepeatType'
-        startTime:
-          format: date-time
-          type: string
       required:
-      - startTime
       - duration
       - repeatType
       type: object
@@ -458,6 +450,7 @@ components:
           type: string
       required:
       - timezone
+      - startTime
       type: object
     AuthtypesAttributeMapping:
       properties:
@@ -1360,10 +1353,6 @@ components:
       - sqs
       - storageaccountsblob
       - cdnprofile
-      - virtualmachine
-      - appservice
-      - containerapp
-      - aks
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -6642,70 +6631,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 +6696,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 +20528,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

@@ -413,21 +413,11 @@ export interface AlertmanagertypesRecurrenceDTO {
 	 * @type string
 	 */
 	duration: string;
-	/**
-	 * @type string,null
-	 * @format date-time
-	 */
-	endTime?: string | null;
 	/**
 	 * @type array,null
 	 */
 	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
 	repeatType: AlertmanagertypesRepeatTypeDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime: string;
 }
 
 export interface AlertmanagertypesScheduleDTO {
@@ -441,7 +431,7 @@ export interface AlertmanagertypesScheduleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	startTime?: string;
+	startTime: string;
 	/**
 	 * @type string
 	 */
@@ -2651,10 +2641,6 @@ export enum CloudintegrationtypesServiceIDDTO {
 	sqs = 'sqs',
 	storageaccountsblob = 'storageaccountsblob',
 	cdnprofile = 'cdnprofile',
-	virtualmachine = 'virtualmachine',
-	appservice = 'appservice',
-	containerapp = 'containerapp',
-	aks = 'aks',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -7773,77 +7759,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 +8060,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 +10414,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/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -151,6 +151,11 @@ export function PlannedDowntimeForm(
 
 	const saveHandler = useCallback(
 		async (values: PlannedDowntimeFormData) => {
+			const { startTime, timezone } = values;
+			if (!startTime || !timezone) {
+				// unreachable: required fields should always be present on submitting.
+				return;
+			}
 			const data: AlertmanagertypesPostablePlannedMaintenanceDTO = {
 				alertIds:
 					values.alertRuleScope === 'all'
@@ -161,9 +166,9 @@ export function PlannedDowntimeForm(
 				name: values.name,
 				scope: values.scope,
 				schedule: {
-					startTime: values.startTime?.format(),
+					startTime: startTime.format(),
 					endTime: values.endTime?.format(),
-					timezone: values.timezone!,
+					timezone,
 					recurrence: values.recurrence,
 				},
 			};
@@ -200,25 +205,17 @@ export function PlannedDowntimeForm(
 		],
 	);
 	const onFinish = async (values: PlannedDowntimeFormData): Promise<void> => {
-		const { recurrence } = values;
-		const recurrenceData =
-			!recurrence ||
-			recurrence.repeatType === recurrenceOptions.doesNotRepeat.value
-				? undefined
-				: {
-						duration: recurrence.duration
-							? `${recurrence.duration}${durationUnit}`
-							: '',
-						startTime: values.startTime!.format(),
-						endTime: values.endTime?.format(),
-						repeatOn: recurrence.repeatOn,
-						repeatType: recurrence.repeatType,
-					};
+		const rec = values.recurrence;
+		const recurrence =
+			rec && rec.repeatType !== recurrenceOptions.doesNotRepeat.value
+				? {
+						duration: `${rec.duration}${durationUnit}`,
+						repeatOn: rec.repeatOn,
+						repeatType: rec.repeatType,
+					}
+				: undefined;
 
-		await saveHandler({
-			...values,
-			recurrence: recurrenceData,
-		});
+		await saveHandler({ ...values, recurrence });
 	};
 
 	const handleFormData = (data: Partial<PlannedDowntimeFormData>): void => {
@@ -275,9 +272,6 @@ export function PlannedDowntimeForm(
 
 	const formattedInitialValues = useMemo((): PlannedDowntimeFormData => {
 		const { schedule } = initialValues;
-		const startTime = schedule?.recurrence?.startTime || schedule?.startTime;
-		const endTime = schedule?.recurrence?.endTime || schedule?.endTime;
-
 		const initialAlertIds = initialValues.alertIds || [];
 
 		return {
@@ -285,8 +279,12 @@ export function PlannedDowntimeForm(
 			alertRuleScope:
 				isEditMode && initialAlertIds.length === 0 ? 'all' : 'specific',
 			alertRules: getAlertOptionsFromIds(initialAlertIds, alertOptions),
-			startTime: startTime ? dayjs(startTime).tz(schedule.timezone) : null,
-			endTime: endTime ? dayjs(endTime).tz(schedule.timezone) : null,
+			startTime: schedule?.startTime
+				? dayjs(schedule.startTime).tz(schedule.timezone)
+				: null,
+			endTime: schedule?.endTime
+				? dayjs(schedule.endTime).tz(schedule.timezone)
+				: null,
 			recurrence: {
 				...schedule?.recurrence,
 				repeatType: !isScheduleRecurring(schedule)
@@ -297,7 +295,7 @@ export function PlannedDowntimeForm(
 			timezone: schedule?.timezone as string,
 			scope: initialValues.scope || '',
 		};
-	}, [initialValues, alertOptions]);
+	}, [initialValues, isEditMode, alertOptions]);
 
 	useEffect(() => {
 		setSelectedTags(formattedInitialValues.alertRules);
@@ -341,7 +339,7 @@ export function PlannedDowntimeForm(
 		const formattedEndTime = endTime.format(TIME_FORMAT);
 		const formattedEndDate = endTime.format(DATE_FORMAT);
 		return `Scheduled to end maintenance on ${formattedEndDate} at ${formattedEndTime}.`;
-	}, [formData, recurrenceType]);
+	}, [formData]);
 
 	return (
 		<Modal

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -142,7 +142,6 @@ export function CollapseListContent({
 	updated_by_name?: string;
 	alertOptions?: DefaultOptionType[];
 }): JSX.Element {
-	const repeats = schedule?.recurrence;
 	const renderItems = (title: string, value: ReactNode): JSX.Element => (
 		<div className="render-item-collapse-list">
 			<Typography>{title}</Typography>
@@ -193,10 +192,7 @@ export function CollapseListContent({
 				'Timezone',
 				<Typography>{schedule?.timezone || '-'}</Typography>,
 			)}
-			{renderItems(
-				'Repeats',
-				<Typography>{recurrenceInfo(repeats, schedule?.timezone)}</Typography>,
-			)}
+			{renderItems('Repeats', <Typography>{recurrenceInfo(schedule)}</Typography>)}
 			{renderItems(
 				'Alerts silenced',
 				alertOptions?.length ? (

frontend/src/container/PlannedDowntime/PlannedDowntimeutils.ts

@@ -6,7 +6,7 @@ import type {
 	DeleteDowntimeScheduleByIDPathParameters,
 	RenderErrorResponseDTO,
 	AlertmanagertypesPlannedMaintenanceDTO,
-	AlertmanagertypesRecurrenceDTO,
+	AlertmanagertypesScheduleDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
@@ -66,14 +66,17 @@ export const getAlertOptionsFromIds = (
 	);
 
 export const recurrenceInfo = (
-	recurrence?: AlertmanagertypesRecurrenceDTO | null,
-	timezone?: string,
+	schedule?: AlertmanagertypesScheduleDTO | null,
 ): string => {
+	if (!schedule) {
+		return 'No';
+	}
+	const { startTime, endTime, timezone, recurrence } = schedule;
 	if (!recurrence) {
 		return 'No';
 	}
 
-	const { startTime, duration, repeatOn, repeatType, endTime } = recurrence;
+	const { duration, repeatOn, repeatType } = recurrence;
 
 	const formattedStartTime = startTime
 		? formatDateTime(startTime, timezone)
@@ -95,7 +98,7 @@ export const defaultInitialValues: Partial<AlertmanagertypesPlannedMaintenanceDT
 			timezone: '',
 			endTime: undefined,
 			recurrence: undefined,
-			startTime: undefined,
+			startTime: '',
 		},
 		alertIds: [],
 		createdAt: undefined,

frontend/src/container/PlannedDowntime/__test__/testUtils.ts

@@ -11,7 +11,7 @@ export const buildSchedule = (
 	schedule: Partial<AlertmanagertypesScheduleDTO>,
 ): AlertmanagertypesScheduleDTO => ({
 	timezone: schedule?.timezone ?? '',
-	startTime: schedule?.startTime,
+	startTime: schedule?.startTime ?? '',
 	endTime: schedule?.endTime,
 	recurrence: schedule?.recurrence,
 });

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/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);
 	}
 }