fix: checkbox issue

.github/CODEOWNERS

@@ -188,7 +188,3 @@ go.mod @therealpandey
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
 /frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend
-
-## OpenAPI Schema - Generated
-/frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv
-/docs/api/openapi.yml @therealpandey @vikrantgupta25 @srikanthccv

.github/workflows/build-enterprise.yaml

@@ -69,8 +69,6 @@ jobs:
           echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
           echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
           echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> frontend/.env
-          echo 'VITE_ENVIRONMENT="production"' >> frontend/.env
-          echo 'VITE_VERSION="${{ steps.build-info.outputs.version }}"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:

.github/workflows/build-staging.yaml

@@ -70,8 +70,6 @@ jobs:
           echo 'VITE_APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
           echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
           echo 'VITE_DOCS_BASE_URL="https://staging.signoz.io"' >> frontend/.env
-          echo 'VITE_ENVIRONMENT="staging"' >> frontend/.env
-          echo 'VITE_VERSION="${{ steps.build-info.outputs.version }}"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:

.github/workflows/gor-signoz.yaml

@@ -35,8 +35,6 @@ jobs:
           echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
           echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
           echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> .env
-          echo 'VITE_ENVIRONMENT="production"' >> .env
-          echo 'VITE_VERSION="${{ github.ref_name }}"' >> .env
       - name: node-setup
         uses: actions/setup-node@v5
         with:

.github/workflows/integrationci.yaml

@@ -39,12 +39,10 @@ jobs:
       matrix:
         suite:
           - alerts
-          - basepath
           - callbackauthn
           - cloudintegrations
           - dashboard
           - ingestionkeys
-          - inframonitoring
           - logspipelines
           - passwordauthn
           - preference
@@ -54,7 +52,6 @@ jobs:
           - rootuser
           - serviceaccount
           - querier_json_body
-          - querier_skip_resource_fingerprint
           - ttl
         sqlstore-provider:
           - postgres
@@ -85,7 +82,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

@@ -432,7 +432,7 @@ cloudintegration:
     version: v0.0.8
 
 ##################### Trace Detail #####################
-traces:
+tracedetail:
   waterfall:
     # Number of spans returned per request when the trace is too large to show all at once.
     span_page_size: 500
@@ -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:

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.127.1
+    image: signoz/signoz:v0.126.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -213,7 +213,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.127.1
+    image: signoz/signoz:v0.126.1
     ports:
       - "8080:8080" # signoz port
     volumes:
@@ -139,7 +139,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.1}
+    image: signoz/signoz:${VERSION:-v0.126.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -204,7 +204,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -229,7 +229,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.1}
+    image: signoz/signoz:${VERSION:-v0.126.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -132,7 +132,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -157,7 +157,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

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.

ee/modules/cloudintegration/implcloudintegration/module.go

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

ee/modules/dashboard/impldashboard/module.go

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

frontend/__mocks__/useSafeNavigate.ts

@@ -0,0 +1,28 @@
+// Mock for useSafeNavigate hook to avoid React Router version conflicts in tests
+interface SafeNavigateOptions {
+	replace?: boolean;
+	state?: unknown;
+	newTab?: boolean;
+}
+
+interface SafeNavigateTo {
+	pathname?: string;
+	search?: string;
+	hash?: string;
+}
+
+type SafeNavigateToType = string | SafeNavigateTo;
+
+interface UseSafeNavigateReturn {
+	safeNavigate: jest.MockedFunction<
+		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
+	>;
+}
+
+export const useSafeNavigate = (): UseSafeNavigateReturn => ({
+	safeNavigate: jest.fn(
+		(_to: SafeNavigateToType, _options?: SafeNavigateOptions) => {},
+	) as jest.MockedFunction<
+		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
+	>,
+});

frontend/jest.config.ts

@@ -1,8 +1,6 @@
 import type { Config } from '@jest/types';
 
-const USE_SAFE_NAVIGATE_MOCK_PATH =
-	'<rootDir>/src/__tests__/safeNavigateMock.ts';
-const LOG_EVENT_MOCK_PATH = '<rootDir>/src/__tests__/logEventMock.ts';
+const USE_SAFE_NAVIGATE_MOCK_PATH = '<rootDir>/__mocks__/useSafeNavigate.ts';
 
 const config: Config.InitialOptions = {
 	silent: true,
@@ -24,8 +22,6 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
-		'^api/common/logEvent$': LOG_EVENT_MOCK_PATH,
-		'^src/api/common/logEvent$': LOG_EVENT_MOCK_PATH,
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',

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/AppRoutes/index.tsx

@@ -351,18 +351,19 @@ function App(): JSX.Element {
 				Sentry.init({
 					dsn: process.env.SENTRY_DSN,
 					tunnel: process.env.TUNNEL_URL,
-					environment: process.env.ENVIRONMENT,
-					release: process.env.VERSION,
+					environment: 'production',
 					integrations: [
-						// Kept for the `transaction` tag used in routing, even though
-						// tracing is disabled. Ref: https://github.com/SigNoz/platform-pod/issues/2393#issuecomment-4603658055
 						Sentry.browserTracingIntegration(),
 						Sentry.replayIntegration({
 							maskAllText: false,
 							blockAllMedia: false,
 						}),
 					],
-					tracesSampleRate: 0, // Ref: https://github.com/SigNoz/platform-pod/issues/2393#issuecomment-4603658055
+					// Performance Monitoring
+					tracesSampleRate: 1.0, //  Capture 100% of the transactions
+					// Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+					tracePropagationTargets: [],
+					// Session Replay
 					replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
 					replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
 					beforeSend(event) {

frontend/src/__tests__/logEventMock.ts

@@ -1,11 +0,0 @@
-// Shared mock for `api/common/logEvent`.
-// Wired into jest.config.ts moduleNameMapper, so any import of
-// `api/common/logEvent` in test code resolves to this file.
-// Tests can import `logEventMock` to assert analytics calls — Jest's
-// `clearMocks: true` resets call history between tests.
-
-export const logEventMock: jest.MockedFunction<
-	(eventName: string, attributes?: Record<string, unknown>) => void
-> = jest.fn();
-
-export default logEventMock;

frontend/src/__tests__/safeNavigateMock.ts

@@ -1,29 +0,0 @@
-// Shared mock for `hooks/useSafeNavigate`.
-// Wired into jest.config.ts moduleNameMapper, so any import of
-// `hooks/useSafeNavigate` in test code resolves to this file.
-// Tests can import `safeNavigateMock` to assert navigation calls — Jest's
-// `clearMocks: true` resets call history between tests.
-
-interface SafeNavigateOptions {
-	replace?: boolean;
-	state?: unknown;
-	newTab?: boolean;
-}
-
-interface SafeNavigateTo {
-	pathname?: string;
-	search?: string;
-	hash?: string;
-}
-
-type SafeNavigateToType = string | SafeNavigateTo;
-
-export const safeNavigateMock: jest.MockedFunction<
-	(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
-> = jest.fn();
-
-export const useSafeNavigate = (): {
-	safeNavigate: typeof safeNavigateMock;
-} => ({
-	safeNavigate: safeNavigateMock,
-});

frontend/src/api/billing/getUsage.ts

@@ -3,36 +3,13 @@ import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
-export interface DayBreakdownEntry {
-	timestamp: number;
-	total: number;
-	quantity: number;
-	count: number;
-	size: number;
-}
-
-export interface TierEntry {
-	quantity: number;
-	unitPrice: number;
-	tierCost: number;
-}
-
-export interface BreakdownEntry {
-	type: string;
-	unit: string;
-	dayWiseBreakdown: {
-		breakdown: DayBreakdownEntry[];
-	};
-	tiers?: TierEntry[];
-}
-
 export interface UsageResponsePayloadProps {
-	billingPeriodStart: number;
-	billingPeriodEnd: number;
+	billingPeriodStart: Date;
+	billingPeriodEnd: Date;
 	details: {
 		total: number;
 		baseFee: number;
-		breakdown: BreakdownEntry[];
+		breakdown: [];
 		billTotal: number;
 	};
 	discount: number;

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

@@ -19,7 +19,7 @@ import type {
 
 import type {
 	AlertmanagertypesPostableChannelDTO,
-	AlertmanagertypesReceiverDTO,
+	ConfigReceiverDTO,
 	CreateChannel201,
 	DeleteChannelByIDPathParameters,
 	GetChannelByID200,
@@ -385,14 +385,14 @@ export const invalidateGetChannelByID = async (
  */
 export const updateChannelByID = (
 	{ id }: UpdateChannelByIDPathParameters,
-	alertmanagertypesReceiverDTO?: BodyType<AlertmanagertypesReceiverDTO>,
+	configReceiverDTO?: BodyType<ConfigReceiverDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/channels/${id}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesReceiverDTO,
+		data: configReceiverDTO,
 		signal,
 	});
 };
@@ -406,7 +406,7 @@ export const getUpdateChannelByIDMutationOptions = <
 		TError,
 		{
 			pathParams: UpdateChannelByIDPathParameters;
-			data?: BodyType<AlertmanagertypesReceiverDTO>;
+			data?: BodyType<ConfigReceiverDTO>;
 		},
 		TContext
 	>;
@@ -415,7 +415,7 @@ export const getUpdateChannelByIDMutationOptions = <
 	TError,
 	{
 		pathParams: UpdateChannelByIDPathParameters;
-		data?: BodyType<AlertmanagertypesReceiverDTO>;
+		data?: BodyType<ConfigReceiverDTO>;
 	},
 	TContext
 > => {
@@ -432,7 +432,7 @@ export const getUpdateChannelByIDMutationOptions = <
 		Awaited<ReturnType<typeof updateChannelByID>>,
 		{
 			pathParams: UpdateChannelByIDPathParameters;
-			data?: BodyType<AlertmanagertypesReceiverDTO>;
+			data?: BodyType<ConfigReceiverDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -447,7 +447,7 @@ export type UpdateChannelByIDMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateChannelByID>>
 >;
 export type UpdateChannelByIDMutationBody =
-	| BodyType<AlertmanagertypesReceiverDTO>
+	| BodyType<ConfigReceiverDTO>
 	| undefined;
 export type UpdateChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
 
@@ -463,7 +463,7 @@ export const useUpdateChannelByID = <
 		TError,
 		{
 			pathParams: UpdateChannelByIDPathParameters;
-			data?: BodyType<AlertmanagertypesReceiverDTO>;
+			data?: BodyType<ConfigReceiverDTO>;
 		},
 		TContext
 	>;
@@ -472,7 +472,7 @@ export const useUpdateChannelByID = <
 	TError,
 	{
 		pathParams: UpdateChannelByIDPathParameters;
-		data?: BodyType<AlertmanagertypesReceiverDTO>;
+		data?: BodyType<ConfigReceiverDTO>;
 	},
 	TContext
 > => {
@@ -483,14 +483,14 @@ export const useUpdateChannelByID = <
  * @summary Test notification channel
  */
 export const testChannel = (
-	alertmanagertypesReceiverDTO?: BodyType<AlertmanagertypesReceiverDTO>,
+	configReceiverDTO?: BodyType<ConfigReceiverDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/channels/test`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesReceiverDTO,
+		data: configReceiverDTO,
 		signal,
 	});
 };
@@ -502,13 +502,13 @@ export const getTestChannelMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannel>>,
 		TError,
-		{ data?: BodyType<AlertmanagertypesReceiverDTO> },
+		{ data?: BodyType<ConfigReceiverDTO> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof testChannel>>,
 	TError,
-	{ data?: BodyType<AlertmanagertypesReceiverDTO> },
+	{ data?: BodyType<ConfigReceiverDTO> },
 	TContext
 > => {
 	const mutationKey = ['testChannel'];
@@ -522,7 +522,7 @@ export const getTestChannelMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof testChannel>>,
-		{ data?: BodyType<AlertmanagertypesReceiverDTO> }
+		{ data?: BodyType<ConfigReceiverDTO> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -535,9 +535,7 @@ export const getTestChannelMutationOptions = <
 export type TestChannelMutationResult = NonNullable<
 	Awaited<ReturnType<typeof testChannel>>
 >;
-export type TestChannelMutationBody =
-	| BodyType<AlertmanagertypesReceiverDTO>
-	| undefined;
+export type TestChannelMutationBody = BodyType<ConfigReceiverDTO> | undefined;
 export type TestChannelMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -550,13 +548,13 @@ export const useTestChannel = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannel>>,
 		TError,
-		{ data?: BodyType<AlertmanagertypesReceiverDTO> },
+		{ data?: BodyType<ConfigReceiverDTO> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof testChannel>>,
 	TError,
-	{ data?: BodyType<AlertmanagertypesReceiverDTO> },
+	{ data?: BodyType<ConfigReceiverDTO> },
 	TContext
 > => {
 	return useMutation(getTestChannelMutationOptions(options));
@@ -567,14 +565,14 @@ export const useTestChannel = <
  * @summary Test notification channel (deprecated)
  */
 export const testChannelDeprecated = (
-	alertmanagertypesReceiverDTO?: BodyType<AlertmanagertypesReceiverDTO>,
+	configReceiverDTO?: BodyType<ConfigReceiverDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/testChannel`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesReceiverDTO,
+		data: configReceiverDTO,
 		signal,
 	});
 };
@@ -586,13 +584,13 @@ export const getTestChannelDeprecatedMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannelDeprecated>>,
 		TError,
-		{ data?: BodyType<AlertmanagertypesReceiverDTO> },
+		{ data?: BodyType<ConfigReceiverDTO> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof testChannelDeprecated>>,
 	TError,
-	{ data?: BodyType<AlertmanagertypesReceiverDTO> },
+	{ data?: BodyType<ConfigReceiverDTO> },
 	TContext
 > => {
 	const mutationKey = ['testChannelDeprecated'];
@@ -606,7 +604,7 @@ export const getTestChannelDeprecatedMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof testChannelDeprecated>>,
-		{ data?: BodyType<AlertmanagertypesReceiverDTO> }
+		{ data?: BodyType<ConfigReceiverDTO> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -620,7 +618,7 @@ export type TestChannelDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof testChannelDeprecated>>
 >;
 export type TestChannelDeprecatedMutationBody =
-	| BodyType<AlertmanagertypesReceiverDTO>
+	| BodyType<ConfigReceiverDTO>
 	| undefined;
 export type TestChannelDeprecatedMutationError =
 	ErrorType<RenderErrorResponseDTO>;
@@ -636,13 +634,13 @@ export const useTestChannelDeprecated = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannelDeprecated>>,
 		TError,
-		{ data?: BodyType<AlertmanagertypesReceiverDTO> },
+		{ data?: BodyType<ConfigReceiverDTO> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof testChannelDeprecated>>,
 	TError,
-	{ data?: BodyType<AlertmanagertypesReceiverDTO> },
+	{ data?: BodyType<ConfigReceiverDTO> },
 	TContext
 > => {
 	return useMutation(getTestChannelDeprecatedMutationOptions(options));

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

@@ -31,15 +31,11 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
-	GetAccountService200,
-	GetAccountServicePathParameters,
 	GetConnectionCredentials200,
 	GetConnectionCredentialsPathParameters,
 	GetService200,
 	GetServiceParams,
 	GetServicePathParameters,
-	ListAccountServicesMetadata200,
-	ListAccountServicesMetadataPathParameters,
 	ListAccounts200,
 	ListAccountsPathParameters,
 	ListServicesMetadata200,
@@ -635,227 +631,6 @@ export const useUpdateAccount = <
 > => {
 	return useMutation(getUpdateAccountMutationOptions(options));
 };
-/**
- * This endpoint lists the services metadata for the specified account and cloud provider
- * @summary List account services metadata
- */
-export const listAccountServicesMetadata = (
-	{ cloudProvider, id }: ListAccountServicesMetadataPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListAccountServicesMetadata200>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListAccountServicesMetadataQueryKey = ({
-	cloudProvider,
-	id,
-}: ListAccountServicesMetadataPathParameters) => {
-	return [
-		`/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services`,
-	] as const;
-};
-
-export const getListAccountServicesMetadataQueryOptions = <
-	TData = Awaited<ReturnType<typeof listAccountServicesMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ cloudProvider, id }: ListAccountServicesMetadataPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listAccountServicesMetadata>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getListAccountServicesMetadataQueryKey({ cloudProvider, id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listAccountServicesMetadata>>
-	> = ({ signal }) => listAccountServicesMetadata({ cloudProvider, id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!(cloudProvider && id),
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof listAccountServicesMetadata>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListAccountServicesMetadataQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listAccountServicesMetadata>>
->;
-export type ListAccountServicesMetadataQueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List account services metadata
- */
-
-export function useListAccountServicesMetadata<
-	TData = Awaited<ReturnType<typeof listAccountServicesMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ cloudProvider, id }: ListAccountServicesMetadataPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listAccountServicesMetadata>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListAccountServicesMetadataQueryOptions(
-		{ cloudProvider, id },
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary List account services metadata
- */
-export const invalidateListAccountServicesMetadata = async (
-	queryClient: QueryClient,
-	{ cloudProvider, id }: ListAccountServicesMetadataPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListAccountServicesMetadataQueryKey({ cloudProvider, id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint gets a service and its configuration for the specified cloud integration account
- * @summary Get service for account
- */
-export const getAccountService = (
-	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetAccountService200>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetAccountServiceQueryKey = ({
-	cloudProvider,
-	id,
-	serviceId,
-}: GetAccountServicePathParameters) => {
-	return [
-		`/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
-	] as const;
-};
-
-export const getGetAccountServiceQueryOptions = <
-	TData = Awaited<ReturnType<typeof getAccountService>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getAccountService>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getGetAccountServiceQueryKey({ cloudProvider, id, serviceId });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getAccountService>>
-	> = ({ signal }) =>
-		getAccountService({ cloudProvider, id, serviceId }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!(cloudProvider && id && serviceId),
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getAccountService>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetAccountServiceQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getAccountService>>
->;
-export type GetAccountServiceQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get service for account
- */
-
-export function useGetAccountService<
-	TData = Awaited<ReturnType<typeof getAccountService>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getAccountService>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetAccountServiceQueryOptions(
-		{ cloudProvider, id, serviceId },
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get service for account
- */
-export const invalidateGetAccountService = async (
-	queryClient: QueryClient,
-	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetAccountServiceQueryKey({ cloudProvider, id, serviceId }) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
  * This endpoint updates a service for the specified cloud provider
  * @summary Update service

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

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

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

@@ -12,14 +12,13 @@ import type {
 } from 'react-query';
 
 import type {
-	GetFlamegraph200,
-	GetFlamegraphPathParameters,
 	GetTraceAggregations200,
 	GetTraceAggregationsPathParameters,
+	GetWaterfall200,
+	GetWaterfallPathParameters,
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
-	SpantypesPostableFlamegraphDTO,
 	SpantypesPostableTraceAggregationsDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
@@ -128,46 +127,46 @@ 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
+ * 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
  */
-export const getFlamegraph = (
-	{ traceID }: GetFlamegraphPathParameters,
-	spantypesPostableFlamegraphDTO?: BodyType<SpantypesPostableFlamegraphDTO>,
+export const getWaterfall = (
+	{ traceID }: GetWaterfallPathParameters,
+	spantypesPostableWaterfallDTO?: BodyType<SpantypesPostableWaterfallDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<GetFlamegraph200>({
-		url: `/api/v3/traces/${traceID}/flamegraph`,
+	return GeneratedAPIInstance<GetWaterfall200>({
+		url: `/api/v3/traces/${traceID}/waterfall`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: spantypesPostableFlamegraphDTO,
+		data: spantypesPostableWaterfallDTO,
 		signal,
 	});
 };
 
-export const getGetFlamegraphMutationOptions = <
+export const getGetWaterfallMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getFlamegraph>>,
+		Awaited<ReturnType<typeof getWaterfall>>,
 		TError,
 		{
-			pathParams: GetFlamegraphPathParameters;
-			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+			pathParams: GetWaterfallPathParameters;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		},
 		TContext
 	>;
 }): UseMutationOptions<
-	Awaited<ReturnType<typeof getFlamegraph>>,
+	Awaited<ReturnType<typeof getWaterfall>>,
 	TError,
 	{
-		pathParams: GetFlamegraphPathParameters;
-		data?: BodyType<SpantypesPostableFlamegraphDTO>;
+		pathParams: GetWaterfallPathParameters;
+		data?: BodyType<SpantypesPostableWaterfallDTO>;
 	},
 	TContext
 > => {
-	const mutationKey = ['getFlamegraph'];
+	const mutationKey = ['getWaterfall'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
 			'mutationKey' in options.mutation &&
@@ -177,54 +176,54 @@ export const getGetFlamegraphMutationOptions = <
 		: { mutation: { mutationKey } };
 
 	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof getFlamegraph>>,
+		Awaited<ReturnType<typeof getWaterfall>>,
 		{
-			pathParams: GetFlamegraphPathParameters;
-			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+			pathParams: GetWaterfallPathParameters;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
 
-		return getFlamegraph(pathParams, data);
+		return getWaterfall(pathParams, data);
 	};
 
 	return { mutationFn, ...mutationOptions };
 };
 
-export type GetFlamegraphMutationResult = NonNullable<
-	Awaited<ReturnType<typeof getFlamegraph>>
+export type GetWaterfallMutationResult = NonNullable<
+	Awaited<ReturnType<typeof getWaterfall>>
 >;
-export type GetFlamegraphMutationBody =
-	| BodyType<SpantypesPostableFlamegraphDTO>
+export type GetWaterfallMutationBody =
+	| BodyType<SpantypesPostableWaterfallDTO>
 	| undefined;
-export type GetFlamegraphMutationError = ErrorType<RenderErrorResponseDTO>;
+export type GetWaterfallMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @summary Get flamegraph view for a trace
+ * @summary Get waterfall view for a trace
  */
-export const useGetFlamegraph = <
+export const useGetWaterfall = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getFlamegraph>>,
+		Awaited<ReturnType<typeof getWaterfall>>,
 		TError,
 		{
-			pathParams: GetFlamegraphPathParameters;
-			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+			pathParams: GetWaterfallPathParameters;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		},
 		TContext
 	>;
 }): UseMutationResult<
-	Awaited<ReturnType<typeof getFlamegraph>>,
+	Awaited<ReturnType<typeof getWaterfall>>,
 	TError,
 	{
-		pathParams: GetFlamegraphPathParameters;
-		data?: BodyType<SpantypesPostableFlamegraphDTO>;
+		pathParams: GetWaterfallPathParameters;
+		data?: BodyType<SpantypesPostableWaterfallDTO>;
 	},
 	TContext
 > => {
-	return useMutation(getGetFlamegraphMutationOptions(options));
+	return useMutation(getGetWaterfallMutationOptions(options));
 };
 /**
  * Returns the waterfall view of spans including all spans if total spans are under a limit, a max count otherwise. Aggregations are dropped compared to v3

frontend/src/api/trace/getTraceV3.tsx

@@ -1,14 +1,15 @@
-import { getWaterfallV4 } from 'api/generated/services/tracedetail';
+import { ApiV3Instance as axios } from 'api';
+import { omit } from 'lodash-es';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
-	GetTraceV4PayloadProps,
-	GetTraceV4SuccessResponse,
+	GetTraceV3PayloadProps,
+	GetTraceV3SuccessResponse,
 	SpanV3,
 } from 'types/api/trace/getTraceV3';
 
-const getTraceV4 = async (
-	props: GetTraceV4PayloadProps,
-): Promise<SuccessResponse<GetTraceV4SuccessResponse> | ErrorResponse> => {
+const getTraceV3 = async (
+	props: GetTraceV3PayloadProps,
+): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
 	let uncollapsedSpans = [...props.uncollapsedSpans];
 	if (!props.isSelectedSpanIDUnCollapsed) {
 		uncollapsedSpans = uncollapsedSpans.filter(
@@ -18,36 +19,31 @@ const getTraceV4 = async (
 		props.selectedSpanId &&
 		!uncollapsedSpans.includes(props.selectedSpanId)
 	) {
-		// Backend only uses the uncollapsedSpans list (unlike V2 which also interprets
+		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
 		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
 		uncollapsedSpans.push(props.selectedSpanId);
 	}
-	const response = await getWaterfallV4(
-		{ traceID: props.traceId },
-		{
-			selectedSpanId: props.selectedSpanId,
-			uncollapsedSpans,
-		},
+	const postData: GetTraceV3PayloadProps = {
+		...props,
+		uncollapsedSpans,
+		limit: 10000,
+	};
+	const response = await axios.post<GetTraceV3SuccessResponse>(
+		`/traces/${props.traceId}/waterfall`,
+		omit(postData, 'traceId'),
 	);
 
-	// Generated client unwraps the axios response; .data is the waterfall payload.
-	// Wire spans carry time_unix; SpanV3's timestamp + 'service.name' are derived below.
-	type WireSpan = Omit<SpanV3, 'timestamp' | 'service.name'> & {
-		time_unix: number;
-	};
-	const rawPayload = response.data as unknown as Omit<
-		GetTraceV4SuccessResponse,
-		'spans'
-	> & { spans: WireSpan[] | null };
+	// V3 API wraps response in { status, data }
+	const rawPayload = (response.data as any).data || response.data;
 
 	// Derive 'service.name' from resource for convenience — only derived field
-	const spans: SpanV3[] = (rawPayload.spans || []).map((span) => ({
+	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
 		...span,
 		'service.name': span.resource?.['service.name'] || '',
 		timestamp: span.time_unix,
 	}));
 
-	// API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
+	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
 	// not absolute unix millis like V2. The span timestamps are absolute unix millis.
 	// Convert by using the first span's timestamp as the base if there's a mismatch.
 	let { startTimestampMillis, endTimestampMillis } = rawPayload;
@@ -74,4 +70,4 @@ const getTraceV4 = async (
 	};
 };
 
-export default getTraceV4;
+export default getTraceV3;

frontend/src/api/v5/queryRange/convertV5Response.ts

@@ -349,7 +349,7 @@ function convertV5DataByType(
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function convertV5ResponseToLegacy(
-	v5Response: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5>,
+	v5Response: SuccessResponse<MetricRangePayloadV5>,
 	legendMap: Record<string, string>,
 	formatForWeb?: boolean,
 ): SuccessResponse<MetricRangePayloadV3> & { warning?: Warning } {
@@ -357,7 +357,7 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		params?.compositeQuery?.queries
+		(params as QueryRangeRequestV5)?.compositeQuery?.queries
 			?.filter((query) => query.type === 'builder_query')
 			.reduce(
 				(acc, query) => {

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -359,7 +359,8 @@ function CustomTimePickerPopoverContent({
 						<Clock
 							color={Color.BG_ROBIN_400}
 							className="timezone-container__clock-icon"
-							size={14}
+							height={12}
+							width={12}
 						/>
 
 						<span className="timezone__name">{timezone.name}</span>

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -144,7 +144,10 @@ function AddedFields({
 										field={field}
 										onRemove={handleRemove}
 										allowDrag={allowDrag}
-										isRequired={requiredFields.includes(field.key as string)}
+										isRequired={
+											requiredFields.includes(field.name) ||
+											requiredFields.includes(field.key as string)
+										}
 									/>
 								))}
 							</SortableContext>

frontend/src/components/FieldsSelector/__tests__/AddedFields.test.tsx

@@ -25,7 +25,7 @@ describe('AddedFields — requiredFields', () => {
 		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(3);
 	});
 
-	it('hides the Remove button for fields whose composite key is in requiredFields', () => {
+	it('hides the Remove button for fields whose name is in requiredFields', () => {
 		const fields = [makeField('a'), makeField('b'), makeField('c')];
 
 		render(
@@ -33,7 +33,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log.a', 'log.c']}
+				requiredFields={['a', 'c']}
 			/>,
 		);
 
@@ -50,7 +50,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log.a']}
+				requiredFields={['a']}
 			/>,
 		);
 
@@ -58,26 +58,9 @@ describe('AddedFields — requiredFields', () => {
 		expect(screen.getByText('b')).toBeInTheDocument();
 	});
 
-	it('locks ONLY the canonical variant — a same-name field from another context stays removable', () => {
-		// Two `body` fields with different contexts. requiredFields holds the
-		// canonical composite key only, so the attribute variant is deletable.
-		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.body']}
-			/>,
-		);
-
-		// One Remove button: the attribute variant. log variant is locked.
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
-	});
-
-	it('does not lock anything when a bare name is passed (composite key required)', () => {
-		// Bare `body` no longer matches — matching is composite-key only now.
+	it('locks all variants of a required name regardless of fieldContext', () => {
+		// Two `body` fields with different contexts — both should lock when
+		// `body` is in requiredFields.
 		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
 
 		render(
@@ -89,11 +72,11 @@ describe('AddedFields — requiredFields', () => {
 			/>,
 		);
 
-		// Neither variant locked → both removable.
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(2);
+		// Both 'body' variants locked → zero Remove buttons.
+		expect(screen.queryAllByRole('button', { name: /remove/i })).toHaveLength(0);
 	});
 
-	it('treats requiredFields as exact composite-key match (substring does not lock)', () => {
+	it('treats requiredFields as exact-name match (substring does not lock)', () => {
 		const fields = [makeField('body'), makeField('body_extra')];
 
 		render(
@@ -101,11 +84,30 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
+				requiredFields={['body']}
+			/>,
+		);
+
+		// 'body' locked, 'body_extra' removable.
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
+	});
+
+	it('also accepts composite IDs in requiredFields (locks a specific variant)', () => {
+		// Two `body` fields with different contexts.
+		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				// Composite ID — locks ONLY the log variant, attribute variant stays
+				// removable.
 				requiredFields={['log.body']}
 			/>,
 		);
 
-		// 'log.body' locked, 'log.body_extra' removable.
+		// One Remove button: the attribute variant. log variant is locked.
 		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
 	});
 });

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -3,12 +3,17 @@ import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import FeedbackModal from '../FeedbackModal';
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(() => Promise.resolve()),
+}));
+
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -30,6 +35,7 @@ jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 
+const mockLogEvent = logEvent as jest.MockedFunction<typeof logEvent>;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 const mockHandleContactSupport = handleContactSupport as jest.Mock;
@@ -44,7 +50,6 @@ const mockLocation = {
 describe('FeedbackModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		logEventMock.mockReturnValue(Promise.resolve() as never);
 		mockUseLocation.mockReturnValue(mockLocation);
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: false,
@@ -111,7 +116,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'feedback',
 			page: mockLocation.pathname,
@@ -144,7 +149,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'reportBug',
 			page: mockLocation.pathname,
@@ -177,7 +182,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'featureRequest',
 			page: mockLocation.pathname,

frontend/src/components/HeaderRightSection/__tests__/HeaderRightSection.test.tsx

@@ -2,11 +2,16 @@
 import { useLocation } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import HeaderRightSection from '../HeaderRightSection';
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -45,6 +50,7 @@ jest.mock('hooks/useIsAIAssistantEnabled', () => ({
 	useIsAIAssistantEnabled: (): boolean => false,
 }));
 
+const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 
@@ -114,7 +120,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(feedbackButton!);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
@@ -127,7 +133,7 @@ describe('HeaderRightSection', () => {
 		const shareButton = screen.getByRole('button', { name: /share/i });
 		await user.click(shareButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Share: Clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Share: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('share-modal')).toBeInTheDocument();
@@ -144,7 +150,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(announcementsButton!);
 
-		expect(logEventMock).toHaveBeenCalledWith('Announcements: Clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Announcements: Clicked', {
 			page: mockLocation.pathname,
 		});
 	});

frontend/src/components/HeaderRightSection/__tests__/ShareURLModal.test.tsx

@@ -5,13 +5,18 @@ import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 
 import ShareURLModal from '../ShareURLModal';
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -48,6 +53,7 @@ Object.defineProperty(window, 'location', {
 	writable: true,
 });
 
+const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseUrlQuery = useUrlQuery as jest.Mock;
 const mockUseSelector = useSelector as jest.Mock;
@@ -119,7 +125,7 @@ describe('ShareURLModal', () => {
 		await user.click(copyButton);
 
 		expect(mockHandleCopyToClipboard).toHaveBeenCalled();
-		expect(logEventMock).toHaveBeenCalledWith('Share: Copy link clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Share: Copy link clicked', {
 			page: TEST_PATH,
 			URL: expect.any(String),
 		});

frontend/src/components/Logs/TableView/__tests__/useLogsTableColumns.test.tsx

@@ -10,9 +10,9 @@ jest.mock('providers/Timezone', () => ({
 	}),
 }));
 
-const field = (name: string, type = ''): IField => ({
+const field = (name: string): IField => ({
 	name,
-	type,
+	type: '',
 	dataType: 'string',
 });
 
@@ -38,16 +38,18 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 			useLogsTableColumns({
 				fields: [
 					field('service.name'),
-					field('body', 'log'),
+					field('body'),
 					field('request.id'),
-					field('timestamp', 'log'),
+					field('timestamp'),
 				],
 				fontSize: FontSize.SMALL,
 			}),
 		);
 
-		// body/timestamp appear where the caller placed them, keyed by their
-		// composite IDs ('log.*'); contextless user fields collapse to bare name.
+		// body/timestamp are NOT pinned to fixed positions — they appear where the
+		// caller placed them in `fields`. body/timestamp use composite IDs
+		// ('log.body', 'log.timestamp') since their fieldContext is fixed; user
+		// fields here have empty `type` so their composite collapses to bare name.
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
 			'service.name',
@@ -57,43 +59,6 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		]);
 	});
 
-	it('renders a same-name field from another context as a DISTINCT column (no collision)', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('body', 'log'), field('body', 'attribute')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// Attribute variant is its own column, not a duplicate 'log.body'.
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'log.body',
-			'attribute.body',
-		]);
-		expect(byId.get('log.body')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.body')?.enableRemove).toBe(true);
-	});
-
-	it('applies the same distinct-column treatment to timestamp variants', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('timestamp', 'log'), field('timestamp', 'attribute')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		const byId = new Map(result.current.map((c) => [c.id, c]));
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'log.timestamp',
-			'attribute.timestamp',
-		]);
-		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.timestamp')?.enableRemove).toBe(true);
-	});
-
 	it('skips the synthetic "id" field name', () => {
 		const { result } = renderHook(() =>
 			useLogsTableColumns({
@@ -112,11 +77,7 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 	it('uses the special body/timestamp coldefs (canBeHidden=false), not the generic user field def', () => {
 		const { result } = renderHook(() =>
 			useLogsTableColumns({
-				fields: [
-					field('body', 'log'),
-					field('timestamp', 'log'),
-					field('user_field'),
-				],
+				fields: [field('body'), field('timestamp'), field('user_field')],
 				fontSize: FontSize.SMALL,
 			}),
 		);

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -96,18 +96,15 @@ export function useLogsTableColumns({
 			),
 		});
 
-		// Match body/timestamp by composite key, not bare name — else a variant
-		// like `attribute.body` collapses onto `log.body`, duplicating the column.
 		const fieldCols = fields
 			.map((f): TableColumnDef<ILog> | null => {
 				if (f.name === 'id') {
 					return null;
 				}
-				const compositeKey = buildCompositeKey(f.name, f.type);
-				if (compositeKey === timestampCol.id) {
+				if (f.name === 'timestamp') {
 					return timestampCol;
 				}
-				if (compositeKey === bodyCol.id) {
+				if (f.name === 'body') {
 					return bodyCol;
 				}
 				return makeUserFieldCol(f);

frontend/src/components/NewSelect/styles.scss

@@ -109,16 +109,6 @@ $custom-border-color: #2c3044;
 		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
 	}
 
-	.ant-select-clear {
-		background-color: var(--l2-background);
-		color: var(--l2-foreground);
-		font-size: 12px;
-
-		&:hover {
-			color: var(--l1-foreground);
-		}
-	}
-
 	// Customize tags in multiselect (dark mode by default)
 	.ant-select-selection-item {
 		background-color: var(--l1-border);
@@ -402,9 +392,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	// Tall enough to hold the react-virtuoso list (<=300px) + header/footer
-	// so only the list scrolls (avoids a second scrollbar on this container).
-	max-height: 410px;
+	max-height: 350px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -495,11 +483,8 @@ $custom-border-color: #2c3044;
 		.option-checkbox {
 			width: 100%;
 
-			// @signozhq/ui Checkbox renders children inside a <label> that is
-			// content-sized by default. Make it fill the row (min-width: 0 lets it
-			// shrink) so the option text below can truncate instead of overflowing.
 			> label {
-				flex: 1 1 auto;
+				flex: 1;
 				min-width: 0;
 			}
 
@@ -517,12 +502,7 @@ $custom-border-color: #2c3044;
 				width: 100%;
 
 				.option-label-text {
-					flex: 1 1 auto;
-					min-width: 0;
 					margin-bottom: 0;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
 				}
 
 				.option-badge {
@@ -535,30 +515,26 @@ $custom-border-color: #2c3044;
 				}
 			}
 
-			// Size the buttons to the row's resting content height (20px) and fully
-			// override antd's default 32px Button box, so revealing them on hover
-			// never changes the row height.
-			.only-btn,
+			.only-btn {
+				display: none;
+			}
 			.toggle-btn {
 				display: none;
-				align-items: center;
-				justify-content: center;
-				height: 18px;
-				min-height: 0;
-				padding: 0 6px;
-				font-size: 12px;
-				line-height: 1;
-				border: none;
-				box-shadow: none;
+			}
 
-				&:hover {
-					background-color: unset;
-				}
+			.only-btn:hover {
+				background-color: unset;
+			}
+			.toggle-btn:hover {
+				background-color: unset;
 			}
 
 			.option-content:hover {
 				.only-btn {
 					display: flex;
+					align-items: center;
+					justify-content: center;
+					height: 21px;
 				}
 				.toggle-btn {
 					display: none;
@@ -573,6 +549,9 @@ $custom-border-color: #2c3044;
 		.option-checkbox:hover {
 			.toggle-btn {
 				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 21px;
 			}
 			.option-badge {
 				display: none;

frontend/src/components/QueryBuilderV2/utils.ts

@@ -721,53 +721,6 @@ export const removeKeysFromExpression = (
 	return result?.text ?? '';
 };
 
-const escapeRegExp = (value: string): string =>
-	value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-export const createVariablePlaceholderRegExp = (
-	variableName: string,
-): RegExp => {
-	const escapedName = escapeRegExp(variableName);
-	// (?![\w.]) prevents $env from matching inside $environment or $env.attr
-	return new RegExp(
-		`(\\$${escapedName}(?![\\w.])|\\{\\{\\s*\\.?${escapedName}\\s*\\}\\}|\\[\\[\\s*${escapedName}\\s*\\]\\])`,
-		'g',
-	);
-};
-
-const matchesVariablePlaceholder = (
-	text: string,
-	variableName: string,
-): boolean => createVariablePlaceholderRegExp(variableName).test(text);
-
-export const removeVariableFromExpression = (
-	expression: string | undefined,
-	variableName: string,
-): string => {
-	if (!expression) {
-		return '';
-	}
-
-	const queryPairs = extractQueryPairs(expression);
-
-	const keysToRemove = queryPairs
-		.filter((pair) => {
-			const singleValue = pair.value?.toString() ?? '';
-			const listValues = (pair.valueList ?? []).join(' ');
-			return (
-				matchesVariablePlaceholder(singleValue, variableName) ||
-				matchesVariablePlaceholder(listValues, variableName)
-			);
-		})
-		.map((pair) => pair.key);
-
-	if (keysToRemove.length === 0) {
-		return expression;
-	}
-
-	return removeKeysFromExpression(expression, keysToRemove, `$${variableName}`);
-};
-
 /**
  * Convert old having format to new having format
  * @param having - Array of old having objects with columnName, op, and value

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -1,17 +1,17 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Button, Tooltip } from 'antd';
 import refreshPaymentStatus from 'api/v3/licenses/put';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import cx from 'classnames';
 import { RefreshCcw } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 
 function RefreshPaymentStatus({
+	btnShape,
 	type,
-	className,
 }: {
+	btnShape?: 'default' | 'round' | 'circle';
 	type?: 'button' | 'text' | 'tooltip';
-	className?: string;
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
 	const { activeLicenseRefetch } = useAppContext();
@@ -31,33 +31,26 @@ function RefreshPaymentStatus({
 		setIsLoading(false);
 	};
 
-	const button = (
-		<Button
-			variant="link"
-			color={type === 'text' ? 'none' : 'secondary'}
-			size="md"
-			className={className}
-			onClick={handleRefreshPaymentStatus}
-			prefix={<RefreshCcw size={14} />}
-			loading={isLoading}
-		>
-			{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
-		</Button>
-	);
-
 	return (
 		<span className="refresh-payment-status-btn-wrapper">
-			{type === 'tooltip' ? (
-				<TooltipSimple title={t('refreshPaymentStatus')}>{button}</TooltipSimple>
-			) : (
-				button
-			)}
+			<Tooltip title={type === 'tooltip' ? t('refreshPaymentStatus') : ''}>
+				<Button
+					type={type === 'text' ? 'text' : 'default'}
+					shape={btnShape}
+					className={cx('periscope-btn', { text: type === 'text' })}
+					onClick={handleRefreshPaymentStatus}
+					icon={<RefreshCcw size={14} />}
+					loading={isLoading}
+				>
+					{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
+				</Button>
+			</Tooltip>
 		</span>
 	);
 }
 RefreshPaymentStatus.defaultProps = {
+	btnShape: 'default',
 	type: 'button',
-	className: undefined,
 };
 
 export default RefreshPaymentStatus;

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -139,6 +139,7 @@ jest.mock('react-query', (): unknown => {
 });
 
 // mock other side-effecty modules
+jest.mock('api/common/logEvent', () => jest.fn());
 jest.mock('api/browser/localstorage/set', () => jest.fn());
 jest.mock('utils/error', () => ({ showErrorNotification: jest.fn() }));
 

frontend/src/constants/reactQueryKeys.ts

@@ -33,8 +33,7 @@ export const REACT_QUERY_KEY = {
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
-	GET_TRACE_V4_WATERFALL: 'GET_TRACE_V4_WATERFALL',
-	GET_TRACE_AGGREGATIONS: 'GET_TRACE_AGGREGATIONS',
+	GET_TRACE_V3_WATERFALL: 'GET_TRACE_V3_WATERFALL',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss

@@ -67,8 +67,8 @@
 	gap: 4px;
 
 	&--success {
-		background: color-mix(in srgb, var(--text-forest-500) 10%, transparent);
-		color: var(--text-forest-400);
+		background: color-mix(in srgb, var(--success-background) 10%, transparent);
+		color: var(--success-foreground);
 	}
 
 	&--error {

frontend/src/container/AppLayout/__tests__/sidebar-toggle-shortcut.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import {
@@ -24,6 +24,8 @@ jest.mock('providers/cmdKProvider', () => ({
 	}),
 }));
 
+jest.mock('api/common/logEvent', () => jest.fn());
+
 // Mock the AppContext
 const mockUpdateUserPreferenceInContext = jest.fn();
 
@@ -137,7 +139,7 @@ describe('Sidebar Toggle Shortcut', () => {
 		it('should log the toggle event with correct parameters', async () => {
 			const user = userEvent.setup();
 			const mockHandleShortcut = jest.fn(() => {
-				logEventMock('Global Shortcut: Sidebar Toggle', {
+				logEvent('Global Shortcut: Sidebar Toggle', {
 					previousState: false,
 					newState: true,
 				});
@@ -153,13 +155,10 @@ describe('Sidebar Toggle Shortcut', () => {
 
 			await user.keyboard(SHIFT_B_KEYBOARD_SHORTCUT);
 
-			expect(logEventMock).toHaveBeenCalledWith(
-				'Global Shortcut: Sidebar Toggle',
-				{
-					previousState: false,
-					newState: true,
-				},
-			);
+			expect(logEvent).toHaveBeenCalledWith('Global Shortcut: Sidebar Toggle', {
+				previousState: false,
+				newState: true,
+			});
 		});
 
 		it('should update user preference in context', async () => {

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

@@ -1,199 +0,0 @@
-.billingContainer {
-	margin-bottom: var(--spacing-20);
-	padding-top: 36px;
-	width: 90%;
-	margin: 0 auto;
-
-	.pageHeader {
-		margin-bottom: var(--spacing-8);
-
-		.pageHeaderTitle {
-			font-weight: var(--label-medium-500-font-weight);
-			font-size: var(--label-medium-500-font-size);
-			line-height: 32px;
-			letter-spacing: -0.08px;
-			color: var(--l1-foreground);
-		}
-
-		.pageHeaderSubtitle {
-			font-size: var(--font-size-sm);
-			line-height: var(--line-height-20);
-			letter-spacing: -0.07px;
-			color: var(--l2-foreground);
-		}
-	}
-
-	.pageInfoTitle {
-		margin: 0;
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-20);
-		letter-spacing: -0.07px;
-		color: var(--l1-foreground);
-	}
-
-	.pageInfoSubtitle {
-		margin: 0;
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		line-height: var(--line-height-18);
-		letter-spacing: -0.07px;
-		color: var(--l2-foreground);
-	}
-
-	.pageInfo {
-		:global(.ant-card) {
-			padding: var(--padding-3);
-		}
-
-		.billingManageBtn {
-			background: var(--l3-background);
-
-			&:hover {
-				background: var(--l3-background-hover);
-			}
-		}
-	}
-
-	.billingSummary {
-		margin: var(--spacing-12) var(--spacing-4);
-	}
-
-	.billingDetails {
-		margin: var(--spacing-12) 0;
-		border: 1px solid var(--l1-border);
-		border-radius: 2px;
-		overflow: hidden;
-
-		:global {
-			.ant-table {
-				background: var(--l2-background);
-			}
-
-			.ant-table-thead > tr > th {
-				height: 52px;
-				padding: 0 var(--padding-4);
-				color: var(--l3-foreground);
-				font-size: var(--font-size-xs);
-				font-weight: var(--font-weight-medium);
-				letter-spacing: 0.48px;
-				text-transform: uppercase;
-			}
-
-			.ant-table-tbody > tr > td {
-				height: 52px;
-				padding: 0 var(--padding-4);
-				background: var(--l2-background);
-				border-bottom: 1px solid var(--l1-border);
-				color: var(--l2-foreground);
-				font-size: var(--font-size-sm);
-
-				&:first-child {
-					color: var(--l1-foreground);
-				}
-
-				&:not(:first-child) {
-					font-feature-settings:
-						'zero' 1,
-						'lnum' 1,
-						'tnum' 1;
-				}
-			}
-
-			.ant-table-tbody > tr:last-child > td {
-				border-bottom: none;
-			}
-
-			.ant-table-tbody > tr:hover > td {
-				background: var(--l2-background) !important;
-			}
-		}
-
-		.billingDetailsHeaderCell {
-			position: relative;
-			background: var(--l2-background) !important;
-			border: none !important;
-			border-bottom: 1px solid var(--l1-border) !important;
-			box-shadow: none !important;
-
-			&::after {
-				content: '';
-				position: absolute;
-				inset-block: 0;
-				inset-inline-end: 0;
-				width: 2px;
-				background: var(--l2-background);
-				z-index: 1;
-			}
-		}
-	}
-
-	.upgradePlanBenefits {
-		margin: 0 var(--spacing-4);
-		border: 1px solid var(--l1-border);
-		border-radius: 5px;
-		padding: 0 var(--padding-12);
-
-		.planBenefits {
-			.planBenefit {
-				display: flex;
-				align-items: center;
-				gap: var(--spacing-8);
-				margin: var(--spacing-8) 0;
-			}
-		}
-	}
-
-	.billingGraphSection {
-		border: 1px solid var(--l1-border);
-		border-radius: 4px;
-		overflow: hidden;
-		margin-bottom: var(--spacing-4);
-
-		.billingGraphFooter {
-			display: flex;
-			gap: var(--spacing-4);
-			padding: var(--padding-3) var(--padding-4);
-			border-top: 1px solid var(--l1-border);
-			background: var(--l2-background);
-
-			.billingFooterBtn {
-				background: var(--l3-background);
-
-				&:hover {
-					background: var(--l3-background-hover);
-				}
-			}
-		}
-	}
-
-	.emptyGraphCard {
-		:global(.ant-card-body) {
-			height: 40vh;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	}
-
-	.billingUpdateNote {
-		margin-top: var(--spacing-8);
-		font-family: var(--font-family-inter);
-		font-size: var(--font-size-sm);
-		font-style: normal;
-		font-weight: var(--font-weight-normal);
-		line-height: 22px;
-		letter-spacing: -0.07px;
-	}
-
-	:global {
-		.ant-skeleton.ant-skeleton-element.ant-skeleton-active {
-			width: 100%;
-			min-width: 100%;
-		}
-
-		.ant-skeleton.ant-skeleton-element .ant-skeleton-input {
-			min-width: 100% !important;
-		}
-	}
-}

frontend/src/container/BillingContainer/BillingContainer.styles.scss

@@ -0,0 +1,70 @@
+.billing-container {
+	margin-bottom: 40px;
+	padding-top: 36px;
+	width: 90%;
+	margin: 0 auto;
+
+	.billing-summary {
+		margin: 24px 8px;
+	}
+
+	.billing-details {
+		margin: 24px 0px;
+
+		.ant-table-title {
+			color: var(--l2-foreground);
+			background-color: var(--l3-background);
+		}
+
+		.ant-table-cell {
+			background-color: var(--l1-background);
+			border-color: var(--l1-border);
+		}
+
+		.ant-table-tbody {
+			td {
+				border-color: var(--l1-border);
+			}
+		}
+	}
+
+	.upgrade-plan-benefits {
+		margin: 0px 8px;
+		border: 1px solid var(--l1-border);
+		border-radius: 5px;
+		padding: 0 48px;
+		.plan-benefits {
+			.plan-benefit {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				margin: 16px 0;
+			}
+		}
+	}
+
+	.empty-graph-card {
+		.ant-card-body {
+			height: 40vh;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+
+	.billing-update-note {
+		text-align: left;
+		font-size: 13px;
+		color: var(--l2-foreground);
+		margin-top: 16px;
+	}
+}
+
+.ant-skeleton.ant-skeleton-element.ant-skeleton-active {
+	width: 100%;
+	min-width: 100%;
+}
+
+.ant-skeleton.ant-skeleton-element .ant-skeleton-input {
+	min-width: 100% !important;
+}

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

@@ -38,7 +38,7 @@ describe('BillingContainer', () => {
 		});
 		expect(pricePerUnit).toBeInTheDocument();
 		const cost = await screen.findByRole('columnheader', {
-			name: /cost/i,
+			name: /cost \(billing period to date\)/i,
 		});
 		expect(cost).toBeInTheDocument();
 

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,11 +1,12 @@
-import { Callout } from '@signozhq/ui/callout';
-import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
-import { CircleCheck, Landmark, MonitorDown } from '@signozhq/icons';
+import { CircleCheck, CloudDownload } from '@signozhq/icons';
+import { Color } from '@signozhq/design-tokens';
 import {
+	Alert,
+	Button,
 	Card,
 	Col,
 	Flex,
@@ -15,10 +16,7 @@ import {
 	TableColumnsType as ColumnsType,
 } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
-import getUsage, {
-	BreakdownEntry,
-	UsageResponsePayloadProps,
-} from 'api/billing/getUsage';
+import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import manageCreditCardApi from 'api/v1/portal/create';
@@ -31,7 +29,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEmpty, pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
+import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
@@ -40,7 +38,7 @@ import CancelSubscriptionBanner from './CancelSubscriptionBanner';
 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
 import { prepareCsvData } from './BillingUsageGraph/utils';
 
-import styles from './BillingContainer.module.scss';
+import './BillingContainer.styles.scss';
 import { LicenseState } from 'types/api/licensesV3/getActive';
 
 interface DataType {
@@ -117,7 +115,7 @@ const dummyColumns: ColumnsType<DataType> = [
 		render: renderSkeletonInput,
 	},
 	{
-		title: 'Cost',
+		title: 'Cost (Billing period to date)',
 		dataIndex: 'cost',
 		key: 'cost',
 		render: renderSkeletonInput,
@@ -132,7 +130,7 @@ export default function BillingContainer(): JSX.Element {
 	const [billAmount, setBillAmount] = useState(0);
 	const [daysRemaining, setDaysRemaining] = useState(0);
 	const [isFreeTrial, setIsFreeTrial] = useState(false);
-	const [data, setData] = useState<DataType[]>([]);
+	const [data, setData] = useState<any[]>([]);
 	const [apiResponse, setApiResponse] = useState<
 		Partial<UsageResponsePayloadProps>
 	>({});
@@ -152,7 +150,7 @@ export default function BillingContainer(): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
 	const processUsageData = useCallback(
-		(data: SuccessResponse<UsageResponsePayloadProps> | ErrorResponse): void => {
+		(data: any): void => {
 			if (isEmpty(data?.payload)) {
 				return;
 			}
@@ -160,23 +158,27 @@ export default function BillingContainer(): JSX.Element {
 				details: { breakdown = [], billTotal },
 				billingPeriodStart,
 				billingPeriodEnd,
-			} = (data as SuccessResponse<UsageResponsePayloadProps>).payload;
-			const formattedUsageData: DataType[] = [];
+			} = data?.payload || {};
+			const formattedUsageData: any[] = [];
 
 			if (breakdown && Array.isArray(breakdown)) {
 				for (let index = 0; index < breakdown.length; index += 1) {
-					const element: BreakdownEntry = breakdown[index];
+					const element = breakdown[index];
 
-					element?.tiers?.forEach((tier, i: number) => {
-						formattedUsageData.push({
-							key: `${index}${i}`,
-							name: i === 0 ? element?.type : '',
-							unit: element?.unit ?? '',
-							dataIngested: `${tier.quantity} ${element?.unit}`,
-							pricePerUnit: String(tier.unitPrice),
-							cost: `$ ${tier.tierCost}`,
-						});
-					});
+					element?.tiers.forEach(
+						(
+							tier: { quantity: number; unitPrice: number; tierCost: number },
+							i: number,
+						) => {
+							formattedUsageData.push({
+								key: `${index}${i}`,
+								name: i === 0 ? element?.type : '',
+								dataIngested: `${tier.quantity} ${element?.unit}`,
+								pricePerUnit: tier.unitPrice,
+								cost: `$ ${tier.tierCost}`,
+							});
+						},
+					);
 				}
 			}
 
@@ -249,19 +251,16 @@ export default function BillingContainer(): JSX.Element {
 			title: 'Data Ingested',
 			dataIndex: 'dataIngested',
 			key: 'dataIngested',
-			align: 'right',
 		},
 		{
 			title: 'Price per Unit',
 			dataIndex: 'pricePerUnit',
 			key: 'pricePerUnit',
-			align: 'right',
 		},
 		{
-			title: 'Cost',
+			title: 'Cost (Billing period to date)',
 			dataIndex: 'cost',
 			key: 'cost',
-			align: 'right',
 		},
 	];
 
@@ -346,6 +345,23 @@ export default function BillingContainer(): JSX.Element {
 		updateCreditCard,
 	]);
 
+	const BillingUsageGraphCallback = useCallback(
+		() =>
+			!isLoading && !isFetchingBillingData ? (
+				<>
+					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
+					<div className="billing-update-note">
+						Note: Billing metrics are updated once every 24 hours.
+					</div>
+				</>
+			) : (
+				<Card className="empty-graph-card" bordered={false}>
+					<Spinner size="large" tip="Loading..." height="35vh" />
+				</Card>
+			),
+		[apiResponse, billAmount, isLoading, isFetchingBillingData],
+	);
+
 	const subscriptionPastDueMessage = (): JSX.Element => (
 		<Typography>
 			{`We were not able to process payments for your account. Please update your card details `}
@@ -399,12 +415,12 @@ export default function BillingContainer(): JSX.Element {
 		trialInfo?.gracePeriodEnd;
 
 	return (
-		<div className={styles.billingContainer}>
-			<Flex vertical gap={4} className={styles.pageHeader}>
-				<Typography.Text className={styles.pageHeaderTitle}>
+		<div className="billing-container">
+			<Flex vertical style={{ marginBottom: 16 }}>
+				<Typography.Text style={{ fontWeight: 500, fontSize: 18 }}>
 					{t('billing')}
 				</Typography.Text>
-				<Typography.Text className={styles.pageHeaderSubtitle}>
+				<Typography.Text color="muted">
 					{t('manage_billing_and_costs')}
 				</Typography.Text>
 			</Flex>
@@ -412,36 +428,50 @@ export default function BillingContainer(): JSX.Element {
 			<Card
 				bordered={false}
 				style={{ minHeight: 150, marginBottom: 16 }}
-				className={styles.pageInfo}
+				className="page-info"
 			>
 				<Flex justify="space-between" align="center">
-					<Flex vertical gap={8}>
-						<p className={styles.pageInfoTitle}>
+					<Flex vertical>
+						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
 							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
 							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
-						</p>
+						</Typography.Title>
 
 						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (
-							<p className={styles.pageInfoSubtitle}>
+							<Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}>
 								{daysRemaining} {daysRemainingStr}
-							</p>
+							</Typography.Text>
 						) : null}
 					</Flex>
-					<Button
-						testId="header-billing-button"
-						variant="solid"
-						color="secondary"
-						size="md"
-						loading={isLoadingBilling || isLoadingManageBilling}
-						disabled={isLoading}
-						onClick={handleBilling}
-						prefix={<Landmark size={14} />}
-						className={styles.billingManageBtn}
-					>
-						{trialInfo?.trialConvertedToSubscription
-							? t('manage_billing')
-							: t('upgrade_plan')}
-					</Button>
+					<Flex gap={8}>
+						<Button
+							type="default"
+							size="middle"
+							loading={isLoadingBilling || isLoadingManageBilling}
+							disabled={isLoading || isFetchingBillingData}
+							onClick={handleCsvDownload}
+							className="periscope-btn"
+						>
+							<Flex align="center" justify="center" gap={4}>
+								<CloudDownload size="md" />
+								Download CSV
+							</Flex>
+						</Button>
+						<Button
+							data-testid="header-billing-button"
+							type="primary"
+							size="middle"
+							loading={isLoadingBilling || isLoadingManageBilling}
+							disabled={isLoading}
+							onClick={handleBilling}
+						>
+							{trialInfo?.trialConvertedToSubscription
+								? t('manage_billing')
+								: t('upgrade_plan')}
+						</Button>
+
+						<RefreshPaymentStatus type="tooltip" />
+					</Flex>
 				</Flex>
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
@@ -455,8 +485,8 @@ export default function BillingContainer(): JSX.Element {
 
 				{!isLoading && !isFetchingBillingData && !showGracePeriodMessage
 					? headerText && (
-							<Callout
-								title={headerText}
+							<Alert
+								message={headerText}
 								type="info"
 								showIcon
 								style={{ marginTop: 12 }}
@@ -473,8 +503,8 @@ export default function BillingContainer(): JSX.Element {
 				billingData &&
 				trialInfo?.gracePeriodEnd &&
 				showGracePeriodMessage ? (
-					<Callout
-						title={`Your data is safe with us until ${getFormattedDate(
+					<Alert
+						message={`Your data is safe with us until ${getFormattedDate(
 							trialInfo?.gracePeriodEnd || Date.now(),
 						)}. Please upgrade plan now to retain your data.`}
 						type="info"
@@ -485,69 +515,26 @@ export default function BillingContainer(): JSX.Element {
 
 				{isSubscriptionPastDue &&
 					(!isLoading && !isFetchingBillingData ? (
-						<Callout type="error" showIcon style={{ marginTop: 12 }}>
-							{subscriptionPastDueMessage()}
-						</Callout>
+						<Alert
+							message={subscriptionPastDueMessage()}
+							type="error"
+							showIcon
+							style={{ marginTop: 12 }}
+						/>
 					) : (
 						<Skeleton.Input active style={{ height: 20, marginTop: 20 }} />
 					))}
 			</Card>
 
-			<div className={styles.billingGraphSection}>
-				{!isLoading && !isFetchingBillingData ? (
-					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
-				) : (
-					<Card className={styles.emptyGraphCard} bordered={false}>
-						<Spinner size="large" tip="Loading..." height="35vh" />
-					</Card>
-				)}
-				{!isLoading && !isFetchingBillingData && (
-					<div className={styles.billingGraphFooter}>
-						<Button
-							variant="outlined"
-							color="secondary"
-							size="md"
-							onClick={handleCsvDownload}
-							prefix={<MonitorDown size={14} />}
-							testId="download-csv-button"
-							className={styles.billingFooterBtn}
-						>
-							Download CSV
-						</Button>
-						<RefreshPaymentStatus type="button" className={styles.billingFooterBtn} />
-					</div>
-				)}
-			</div>
-			{!isLoading && !isFetchingBillingData && (
-				<Callout type="info" size="small" className={styles.billingUpdateNote}>
-					Billing metrics are updated once every 24 hours.
-				</Callout>
-			)}
+			<BillingUsageGraphCallback />
 
-			<div className={styles.billingDetails}>
+			<div className="billing-details">
 				{!isLoading && !isFetchingBillingData && (
 					<Table
 						columns={columns}
 						dataSource={data}
 						pagination={false}
 						bordered={false}
-						components={{
-							header: {
-								cell: ({
-									style,
-									...props
-								}: React.ThHTMLAttributes<HTMLTableCellElement>): JSX.Element => {
-									const { background: _, boxShadow: __, ...safeStyle } = style ?? {};
-									return (
-										<th
-											{...props}
-											style={safeStyle}
-											className={`${props.className ?? ''} ${styles.billingDetailsHeaderCell}`}
-										/>
-									);
-								},
-							},
-						}}
 					/>
 				)}
 
@@ -559,7 +546,7 @@ export default function BillingContainer(): JSX.Element {
 			)}
 
 			{!trialInfo?.trialConvertedToSubscription && (
-				<div className={styles.upgradePlanBenefits}>
+				<div className="upgrade-plan-benefits">
 					<Row
 						justify="space-between"
 						align="middle"
@@ -568,16 +555,16 @@ export default function BillingContainer(): JSX.Element {
 						}}
 						gutter={[16, 16]}
 					>
-						<Col span={20} className={styles.planBenefits}>
-							<Typography.Text className={styles.planBenefit}>
+						<Col span={20} className="plan-benefits">
+							<Typography.Text className="plan-benefit">
 								<CircleCheck size="md" />
 								{t('upgrade_now_text')}
 							</Typography.Text>
-							<Typography.Text className={styles.planBenefit}>
+							<Typography.Text className="plan-benefit">
 								<CircleCheck size="md" />
 								{t('Your billing will start only after the trial period')}
 							</Typography.Text>
-							<Typography.Text className={styles.planBenefit}>
+							<Typography.Text className="plan-benefit">
 								<CircleCheck size="md" />
 								<span>
 									{t('checkout_plans')} &nbsp;
@@ -596,10 +583,9 @@ export default function BillingContainer(): JSX.Element {
 						</Col>
 						<Col span={4} style={{ display: 'flex', justifyContent: 'flex-end' }}>
 							<Button
-								testId="upgrade-plan-button"
-								variant="solid"
-								color="primary"
-								size="md"
+								data-testid="upgrade-plan-button"
+								type="primary"
+								size="middle"
 								loading={isLoadingBilling || isLoadingManageBilling}
 								onClick={handleBilling}
 							>

frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.module.scss

@@ -1,9 +0,0 @@
-.headerRow {
-	padding: var(--spacing-8);
-}
-
-.itemList {
-	overflow-y: auto;
-	max-height: 300px;
-	padding: var(--padding-3);
-}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.tsx

@@ -1,95 +0,0 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
-import TooltipHeader from 'lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader';
-import TooltipItem from 'lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getToolTipValue } from 'components/Graph/yAxisConfig';
-import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
-import {
-	TooltipContentItem,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-import TooltipStyles from 'lib/uPlotV2/components/Tooltip/Tooltip.module.scss';
-import Styles from './BillingBarChartTooltip.module.scss';
-
-interface BillingBarChartTooltipProps extends TooltipRenderArgs {
-	billingApiResponse: MetricRangePayloadProps;
-}
-
-const CURRENCY_SYMBOL = '$';
-
-export function BillingBarChartTooltip({
-	billingApiResponse,
-	uPlotInstance,
-	dataIndexes,
-	seriesIndex,
-	isPinned,
-}: BillingBarChartTooltipProps): JSX.Element {
-	const content = useMemo((): TooltipContentItem[] => {
-		const baseItems = buildTooltipContent({
-			data: uPlotInstance.data,
-			series: uPlotInstance.series,
-			dataIndexes,
-			activeSeriesIndex: seriesIndex,
-			uPlotInstance,
-			yAxisUnit: '',
-			isStackedBarChart: true,
-		});
-
-		return baseItems.map((item) => {
-			const match = billingApiResponse.data.result.find(
-				(r) => (r.legend || r.queryName) === item.label,
-			);
-
-			if (!match) {
-				return item;
-			}
-
-			const seriesIdx = uPlotInstance.series.findIndex(
-				(s) => s.label === item.label,
-			);
-			if (seriesIdx === -1) {
-				return item;
-			}
-
-			const dataIndex = dataIndexes[seriesIdx];
-			const quantity = dataIndex != null ? match.quantity?.[dataIndex] : null;
-			const unit = match.unit ?? '';
-			const quantityStr =
-				quantity != null ? ` - ${getToolTipValue(quantity)} ${unit}` : '';
-
-			return {
-				...item,
-				tooltipValue: `${CURRENCY_SYMBOL}${getToolTipValue(item.value, '')}${quantityStr}`,
-			};
-		});
-	}, [uPlotInstance, seriesIndex, dataIndexes, billingApiResponse]);
-
-	const activeItem = content.find((item) => item.isActive) ?? null;
-
-	return (
-		<div
-			className={cx(TooltipStyles.container, {
-				[TooltipStyles.pinned]: isPinned,
-			})}
-			data-testid="uplot-tooltip-container"
-		>
-			<TooltipHeader
-				uPlotInstance={uPlotInstance}
-				showTooltipHeader
-				isPinned={isPinned}
-				activeItem={null}
-				headerRowClassName={Styles.headerRow}
-				dateFormat={DATE_TIME_FORMATS.MONTH_DATE}
-			/>
-			{activeItem != null && <span className={TooltipStyles.divider} />}
-			<div className={Styles.itemList} data-testid="uplot-tooltip-list">
-				{content.map((item) => (
-					<TooltipItem key={item.label} item={item} isItemActive={item.isActive} />
-				))}
-			</div>
-		</div>
-	);
-}

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

@@ -1,37 +0,0 @@
-.graphContainer {
-	height: 100%;
-}
-
-.billingGraphCard {
-	:global {
-		.uplot-no-data {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		.ant-card-body {
-			height: 40vh;
-
-			.uplot-graph-container {
-				padding: 8px;
-			}
-		}
-	}
-
-	.totalSpent {
-		font-family: 'SF Mono', monospace;
-		font-size: 16px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 24px;
-	}
-
-	.totalSpentTitle {
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 22px;
-		letter-spacing: 0.48px;
-		color: var(--l2-foreground);
-	}
-}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.styles.scss

@@ -0,0 +1,23 @@
+.billing-graph-card {
+	.ant-card-body {
+		height: 40vh;
+		.uplot-graph-container {
+			padding: 8px;
+		}
+	}
+	.total-spent {
+		font-family: 'SF Mono' monospace;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 24px;
+	}
+
+	.total-spent-title {
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 22px;
+		letter-spacing: 0.48px;
+		color: var(--l2-foreground);
+	}
+}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -1,146 +1,221 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
+import { Color } from '@signozhq/design-tokens';
 import { Card, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
+import Uplot from 'components/Uplot';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-import {
-	LegendPosition,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import type uPlot from 'uplot';
-import type { UsageResponsePayloadProps } from 'api/billing/getUsage';
+import tooltipPlugin from 'lib/uPlotLib/plugins/tooltipPlugin';
+import getAxes from 'lib/uPlotLib/utils/getAxes';
+import getRenderer from 'lib/uPlotLib/utils/getRenderer';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { getXAxisScale } from 'lib/uPlotLib/utils/getXAxisScale';
+import { getYAxisScale } from 'lib/uPlotLib/utils/getYAxisScale';
+import uPlot from 'uplot';
 
-import { BillingBarChartTooltip } from './BillingBarChartTooltip';
-import { prepareBillingBarConfig } from './prepareBillingBarConfig';
 import {
-	calculateStartEndTime,
 	convertDataToMetricRangePayload,
 	fillMissingValuesForQuantities,
 } from './utils';
 
-import styles from './BillingUsageGraph.module.scss';
+import './BillingUsageGraph.styles.scss';
+import '../../../lib/uPlotLib/uPlotLib.styles.scss';
 
 interface BillingUsageGraphProps {
-	data: Partial<UsageResponsePayloadProps>;
+	data: any;
 	billAmount: number;
 }
+const paths = (
+	u: any,
+	seriesIdx: number,
+	idx0: number,
+	idx1: number,
+	extendGap: boolean,
+	buildClip: boolean,
+): uPlot.Series.PathBuilder => {
+	const s = u.series[seriesIdx];
+	const style = s.drawStyle;
+	const interp = s.lineInterpolation;
 
-const numberFormatter = new Intl.NumberFormat('en-US');
+	const renderer = getRenderer(style, interp);
+
+	return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
+};
+
+const calculateStartEndTime = (
+	data: any,
+): { startTime: number; endTime: number } => {
+	const timestamps: number[] = [];
+	data?.details?.breakdown?.forEach((breakdown: any) => {
+		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry: any) => {
+			timestamps.push(entry?.timestamp);
+		});
+	});
+	const billingTime = [data?.billingPeriodStart, data?.billingPeriodEnd];
+	const startTime: number = Math.min(...timestamps, ...billingTime);
+	const endTime: number = Math.max(...timestamps, ...billingTime);
+	return { startTime, endTime };
+};
 
 export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 	const { data, billAmount } = props;
-
+	// Added this to fix the issue where breakdown with one day data are causing the bars to spread across multiple days
+	data?.details?.breakdown?.forEach((breakdown: any) => {
+		if (breakdown?.dayWiseBreakdown?.breakdown?.length === 1) {
+			const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
+			const nextDay = {
+				...currentDay,
+				timestamp: currentDay.timestamp + 86400,
+				count: 0,
+				size: 0,
+				quantity: 0,
+				total: 0,
+			};
+			breakdown.dayWiseBreakdown.breakdown.push(nextDay);
+		}
+	});
+	const graphCompatibleData = useMemo(
+		() => convertDataToMetricRangePayload(data),
+		[data],
+	);
+	const chartData = getUPlotChartData(graphCompatibleData);
 	const graphRef = useRef<HTMLDivElement>(null);
 	const isDarkMode = useIsDarkMode();
 	const containerDimensions = useResizeObserver(graphRef);
 
-	// Single-day data causes bars to span multiple days — add a synthetic
-	// zero-value next-day entry so uPlot renders a correctly-sized single-day bar.
-	const normalizedData = useMemo(() => {
-		if (!data?.details?.breakdown) {
-			return data;
-		}
-		return {
-			...data,
-			details: {
-				...data.details,
-				breakdown: data.details.breakdown.map((breakdown) => {
-					if (breakdown?.dayWiseBreakdown?.breakdown?.length !== 1) {
-						return breakdown;
-					}
-					const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
-					const nextDay = {
-						...currentDay,
-						timestamp: currentDay.timestamp + 86400,
-						count: 0,
-						size: 0,
-						quantity: 0,
-						total: 0,
-					};
-					return {
-						...breakdown,
-						dayWiseBreakdown: {
-							...breakdown.dayWiseBreakdown,
-							breakdown: [...breakdown.dayWiseBreakdown.breakdown, nextDay],
-						},
-					};
-				}),
-			},
-		};
-	}, [data]);
-
-	const graphCompatibleData = useMemo(
-		() => convertDataToMetricRangePayload(normalizedData),
-		[normalizedData],
-	);
-
-	const chartData = useMemo(
-		() => prepareChartData(graphCompatibleData) as uPlot.AlignedData,
-		[graphCompatibleData],
-	);
-
-	const filledApiResponse = useMemo(
-		(): MetricRangePayloadProps =>
-			fillMissingValuesForQuantities(
-				graphCompatibleData,
-				chartData[0] as number[],
-			),
-		[graphCompatibleData, chartData],
-	);
-
 	const { startTime, endTime } = useMemo(
-		() =>
-			calculateStartEndTime(normalizedData as Partial<UsageResponsePayloadProps>),
-		[normalizedData],
+		() => calculateStartEndTime(data),
+		[data],
 	);
 
-	const config = useMemo(
-		() =>
-			prepareBillingBarConfig({
-				isDarkMode,
-				// Subtract 86400s (one day) from startTime to add a buffer before first bar
-				minTimeScale: startTime !== undefined ? startTime - 86400 : undefined,
-				maxTimeScale: endTime,
-				apiResponse: graphCompatibleData,
-			}),
-		[isDarkMode, startTime, endTime, graphCompatibleData],
+	const getGraphSeries = (color: string, label: string): any => ({
+		drawStyle: 'bars',
+		paths,
+		lineInterpolation: 'spline',
+		show: true,
+		label,
+		fill: color,
+		stroke: color,
+		width: 2,
+		spanGaps: true,
+		points: {
+			size: 5,
+			show: false,
+			stroke: color,
+		},
+	});
+
+	const uPlotSeries: any = useMemo(
+		() => [
+			{ label: 'Timestamp', stroke: 'purple' },
+			getGraphSeries(
+				'#7CEDBE',
+				graphCompatibleData.data.result[0]?.legend as string,
+			),
+			getGraphSeries(
+				'#4E74F8',
+				graphCompatibleData.data.result[1]?.legend as string,
+			),
+			getGraphSeries(
+				'#F24769',
+				graphCompatibleData.data.result[2]?.legend as string,
+			),
+		],
+		[graphCompatibleData.data.result],
 	);
 
-	const renderBillingTooltip = useCallback(
-		(args: TooltipRenderArgs) => (
-			<BillingBarChartTooltip billingApiResponse={filledApiResponse} {...args} />
-		),
-		[filledApiResponse],
+	const axesOptions = getAxes({ isDarkMode, yAxisUnit: '' });
+
+	const optionsForChart: uPlot.Options = useMemo(
+		() => ({
+			id: 'billing-usage-breakdown',
+			series: uPlotSeries,
+			width: containerDimensions.width,
+			height: containerDimensions.height - 30,
+			axes: [
+				{
+					...axesOptions[0],
+					grid: {
+						...axesOptions.grid,
+						show: false,
+						stroke: isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400,
+					},
+				},
+				{
+					...axesOptions[1],
+					stroke: isDarkMode ? Color.BG_SLATE_200 : Color.BG_INK_400,
+				},
+			],
+			scales: {
+				x: {
+					...getXAxisScale(startTime - 86400, endTime), // Minus 86400 from startTime to decrease a day to have a buffer start
+				},
+				y: {
+					...getYAxisScale({
+						series: graphCompatibleData?.data?.newResult?.data?.result,
+						yAxisUnit: '',
+						softMax: null,
+						softMin: null,
+					}),
+				},
+			},
+			legend: {
+				show: true,
+				live: false,
+				isolate: true,
+			},
+			cursor: {
+				lock: false,
+				focus: {
+					prox: 1e6,
+					bias: 1,
+				},
+			},
+			focus: {
+				alpha: 0.3,
+			},
+			padding: [32, 32, 16, 16],
+			plugins: [
+				tooltipPlugin({
+					apiResponse: fillMissingValuesForQuantities(
+						graphCompatibleData,
+						chartData[0],
+					),
+					yAxisUnit: '',
+					isBillingUsageGraphs: true,
+					isDarkMode,
+				}),
+			],
+		}),
+		[
+			axesOptions,
+			chartData,
+			containerDimensions.height,
+			containerDimensions.width,
+			endTime,
+			graphCompatibleData,
+			isDarkMode,
+			startTime,
+			uPlotSeries,
+		],
 	);
 
+	const numberFormatter = new Intl.NumberFormat('en-US');
+
 	return (
-		<Card bordered={false} className={styles.billingGraphCard}>
+		<Card bordered={false} className="billing-graph-card">
 			<Flex justify="space-between">
 				<Flex vertical gap={6}>
-					<Typography.Text className={styles.totalSpentTitle}>
+					<Typography.Text className="total-spent-title">
 						TOTAL SPENT
 					</Typography.Text>
-					<Typography.Text className={styles.totalSpent}>
+					<Typography.Text className="total-spent">
 						${numberFormatter.format(billAmount)}
 					</Typography.Text>
 				</Flex>
 			</Flex>
-			<div ref={graphRef} className={styles.graphContainer}>
-				{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-					<BarChart
-						config={config}
-						data={chartData}
-						isStackedBarChart
-						legendConfig={{ position: LegendPosition.BOTTOM }}
-						customTooltip={renderBillingTooltip}
-						width={containerDimensions.width}
-						height={containerDimensions.height - 30}
-						canPinTooltip
-					/>
-				)}
+			<div ref={graphRef} style={{ height: '100%', paddingBottom: 48 }}>
+				<Uplot data={chartData} options={optionsForChart} />
 			</div>
 		</Card>
 	);

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/BillingBarChartTooltip.test.tsx

@@ -1,165 +0,0 @@
-import React from 'react';
-import { render, screen } from 'tests/test-utils';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import { BillingBarChartTooltip } from '../BillingBarChartTooltip';
-
-// Mock buildTooltipContent so tests don't depend on uPlot stacking math
-jest.mock('lib/uPlotV2/components/Tooltip/utils', () => ({
-	buildTooltipContent: jest.fn().mockReturnValue([
-		{
-			label: 'Logs',
-			value: 100,
-			tooltipValue: '$100.00',
-			color: '#7CEDBE',
-			isActive: true,
-			isHighlighted: false,
-		},
-		{
-			label: 'Traces',
-			value: 50,
-			tooltipValue: '$50.00',
-			color: '#4E74F8',
-			isActive: false,
-			isHighlighted: false,
-		},
-	]),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: jest.fn().mockReturnValue(false),
-}));
-
-function makeUPlotInstance(seriesLabels: string[]): uPlot {
-	return {
-		data: [
-			[1000, 2000],
-			[100, 200],
-			[50, 80],
-		],
-		cursor: { idx: 0 },
-		series: [
-			{ label: 'Timestamp', show: true, stroke: '#000' },
-			...seriesLabels.map((label) => ({
-				label,
-				show: true,
-				stroke: '#aabbcc',
-			})),
-		],
-	} as unknown as uPlot;
-}
-
-function makeBillingApiResponse(
-	entries: { legend: string; quantity: (number | null)[]; unit: string }[],
-): MetricRangePayloadProps {
-	return {
-		data: {
-			result: entries.map((e) => ({
-				legend: e.legend,
-				queryName: e.legend,
-				metric: {},
-				values: [[1000, '10']] as [number, string][],
-				quantity: e.quantity as number[],
-				unit: e.unit,
-			})),
-			resultType: '',
-			newResult: { data: { result: [], resultType: '' } },
-		},
-	};
-}
-
-const baseTooltipArgs = {
-	isPinned: false,
-	dismiss: jest.fn(),
-	viaSync: false,
-	seriesIndex: 1,
-	dataIndexes: [null, 0, 0],
-};
-
-describe('BillingBarChartTooltip', () => {
-	it('augments tooltipValue with quantity and unit for each series', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
-		const billingApiResponse = makeBillingApiResponse([
-			{ legend: 'Logs', quantity: [1.5, 2.0], unit: 'GB' },
-			{ legend: 'Traces', quantity: [500, 800], unit: 'spans' },
-		]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.getAllByText(/1\.5 GB/i).length).toBeGreaterThan(0);
-		expect(screen.getAllByText(/500 spans/i).length).toBeGreaterThan(0);
-	});
-
-	it('omits quantity line when quantity at dataIndex is null', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
-		const billingApiResponse = makeBillingApiResponse([
-			{ legend: 'Logs', quantity: [null, null], unit: 'GB' },
-			{ legend: 'Traces', quantity: [null, null], unit: 'spans' },
-		]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.queryByText(/null GB/i)).not.toBeInTheDocument();
-		expect(screen.queryByText(/null spans/i)).not.toBeInTheDocument();
-		expect(screen.getByTestId('uplot-tooltip-container')).toBeInTheDocument();
-	});
-
-	it('formats dollar value via getToolTipValue — strips trailing zeros (0.3076 → $0.3)', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs']);
-		const { buildTooltipContent } = jest.requireMock(
-			'lib/uPlotV2/components/Tooltip/utils',
-		) as { buildTooltipContent: jest.Mock };
-		buildTooltipContent.mockReturnValueOnce([
-			{
-				label: 'Logs',
-				value: 0.3076171875,
-				tooltipValue: '$0.31',
-				color: '#7CEDBE',
-				isActive: true,
-				isHighlighted: false,
-			},
-		]);
-		const billingApiResponse = makeBillingApiResponse([
-			{ legend: 'Logs', quantity: [1.23], unit: 'GB' },
-		]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.getAllByText(/\$0\.3 -/i).length).toBeGreaterThan(0);
-	});
-
-	it('passes through base tooltipValue when series is not in billingApiResponse', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
-		const billingApiResponse = makeBillingApiResponse([]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.getAllByText('$100.00').length).toBeGreaterThan(0);
-		expect(screen.getAllByText('$50.00').length).toBeGreaterThan(0);
-	});
-});

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/prepareBillingBarConfig.test.ts

@@ -1,101 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-import { prepareBillingBarConfig } from '../prepareBillingBarConfig';
-
-const makeApiResponse = (legends: string[]): MetricRangePayloadProps => ({
-	data: {
-		result: legends.map((legend) => ({
-			legend,
-			queryName: legend,
-			metric: {},
-			values: [[1000, '10']],
-		})),
-		resultType: '',
-		newResult: { data: { result: [], resultType: '' } },
-	},
-});
-
-describe('prepareBillingBarConfig', () => {
-	const baseProps = { isDarkMode: false };
-
-	it('returns a builder with no series when apiResponse is undefined', () => {
-		const builder = prepareBillingBarConfig(baseProps);
-		const config = builder.getConfig();
-		expect(config.series).toHaveLength(1);
-	});
-
-	it('returns a builder with no series when result is empty', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse([]),
-		});
-		const config = builder.getConfig();
-		expect(config.series).toHaveLength(1);
-	});
-
-	it('adds one series per result entry with correct labels and colors', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
-		});
-		const config = builder.getConfig();
-		expect(config.series).toHaveLength(4);
-		expect(config.series?.[1]?.label).toBe('Logs');
-		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
-		expect(config.series?.[2]?.label).toBe('Traces');
-		expect(config.series?.[2]?.stroke).toBe(Color.BG_ROBIN_500);
-		expect(config.series?.[3]?.label).toBe('Metrics');
-		expect(config.series?.[3]?.stroke).toBe(Color.BG_SAKURA_500);
-	});
-
-	it('assigns fallback color (Amber500) for signals beyond the 3-color palette', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse(['A', 'B', 'C', 'D']),
-		});
-		const config = builder.getConfig();
-		expect(config.series?.[4]?.stroke).toBe(Color.BG_AMBER_500);
-	});
-
-	it('sets stacking bands, padding, and focus alpha for behavioral parity', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
-		});
-		const config = builder.getConfig();
-		expect(config.bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
-		expect(config.padding).toStrictEqual([32, 32, 16, 16]);
-		expect(config.focus).toStrictEqual({ alpha: 0.3 });
-	});
-
-	it('sets no bands when result is empty', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse([]),
-		});
-		const config = builder.getConfig();
-		expect(config.bands).toBeUndefined();
-	});
-
-	it('uses queryName as label when legend is undefined', () => {
-		const apiResponse: MetricRangePayloadProps = {
-			data: {
-				result: [
-					{
-						legend: undefined as any,
-						queryName: 'Logs',
-						metric: {},
-						values: [[1000, '10']],
-					},
-				],
-				resultType: '',
-				newResult: { data: { result: [], resultType: '' } },
-			},
-		};
-		const builder = prepareBillingBarConfig({ isDarkMode: false, apiResponse });
-		const config = builder.getConfig();
-		expect(config.series?.[1]?.label).toBe('Logs');
-		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
-	});
-});

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/utils.test.ts

@@ -1,145 +0,0 @@
-import {
-	calculateStartEndTime,
-	convertDataToMetricRangePayload,
-} from '../utils';
-
-const makeData = (
-	timestamps: number[],
-	billingPeriodStart?: number,
-	billingPeriodEnd?: number,
-) => ({
-	billingPeriodStart,
-	billingPeriodEnd,
-	details: {
-		total: 0,
-		baseFee: 0,
-		billTotal: 0,
-		breakdown: [
-			{
-				type: 'Logs',
-				unit: 'GB',
-				dayWiseBreakdown: {
-					breakdown: timestamps.map((timestamp) => ({
-						timestamp,
-						total: 0,
-						quantity: 0,
-						count: 0,
-						size: 0,
-					})),
-				},
-			},
-		],
-	},
-});
-
-describe('convertDataToMetricRangePayload', () => {
-	it('returns empty result when all dayWiseBreakdown.breakdown are null', () => {
-		const data = {
-			billingPeriodStart: 1778763678,
-			billingPeriodEnd: 1781442078,
-			details: {
-				total: 0,
-				baseFee: 49,
-				billTotal: 49,
-				breakdown: [
-					{
-						type: 'Metrics',
-						unit: 'Million',
-						tiers: [],
-						dayWiseBreakdown: { type: '', breakdown: null },
-					},
-					{
-						type: 'Traces',
-						unit: 'GB',
-						tiers: [],
-						dayWiseBreakdown: { type: '', breakdown: null },
-					},
-					{
-						type: 'Logs',
-						unit: 'GB',
-						tiers: [],
-						dayWiseBreakdown: { type: '', breakdown: null },
-					},
-				],
-			},
-		};
-		const result = convertDataToMetricRangePayload(data);
-		expect(result.data.result).toHaveLength(0);
-	});
-
-	it('includes only series that have day-wise data', () => {
-		const data = {
-			details: {
-				breakdown: [
-					{
-						type: 'Metrics',
-						unit: 'Million',
-						dayWiseBreakdown: { breakdown: null },
-					},
-					{
-						type: 'Logs',
-						unit: 'GB',
-						dayWiseBreakdown: {
-							breakdown: [
-								{ timestamp: 1000, total: 5, quantity: 10, count: 0, size: 0 },
-							],
-						},
-					},
-				],
-			},
-		};
-		const result = convertDataToMetricRangePayload(data);
-		expect(result.data.result).toHaveLength(1);
-		expect(result.data.result[0].legend).toBe('Logs');
-	});
-});
-
-describe('calculateStartEndTime', () => {
-	it('returns min/max of all breakdown timestamps', () => {
-		const data = makeData([1000, 3000, 2000]);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: 1000,
-			endTime: 3000,
-		});
-	});
-
-	it('includes billingPeriodStart and billingPeriodEnd in the range', () => {
-		const data = makeData([2000, 3000], 500, 4000);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: 500,
-			endTime: 4000,
-		});
-	});
-
-	it('returns undefined when there are no timestamps and no billing period', () => {
-		expect(calculateStartEndTime({})).toStrictEqual({
-			startTime: undefined,
-			endTime: undefined,
-		});
-	});
-
-	it('returns undefined when breakdown is empty', () => {
-		const data = makeData([]);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: undefined,
-			endTime: undefined,
-		});
-	});
-
-	it('filters out non-finite billingPeriod values', () => {
-		const data = makeData([1000], NaN, Infinity);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: 1000,
-			endTime: 1000,
-		});
-	});
-
-	it('works when details is missing', () => {
-		expect(
-			calculateStartEndTime({ billingPeriodStart: 100, billingPeriodEnd: 200 }),
-		).toStrictEqual({
-			startTime: 100,
-			endTime: 200,
-		});
-	});
-});

frontend/src/container/BillingContainer/BillingUsageGraph/prepareBillingBarConfig.ts

@@ -1,71 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
-import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-const BILLING_SERIES_COLORS = [
-	Color.BG_FOREST_300,
-	Color.BG_ROBIN_500,
-	Color.BG_SAKURA_500,
-];
-
-export interface PrepareBillingBarConfigProps {
-	isDarkMode: boolean;
-	timezone?: Timezone;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-	apiResponse?: MetricRangePayloadProps;
-}
-
-export function prepareBillingBarConfig({
-	isDarkMode,
-	timezone,
-	minTimeScale,
-	maxTimeScale,
-	apiResponse,
-}: PrepareBillingBarConfigProps): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		id: 'billing-usage-breakdown',
-		isDarkMode,
-		timezone,
-		panelType: PANEL_TYPES.BAR,
-		minTimeScale,
-		maxTimeScale,
-	});
-
-	const results = apiResponse?.data?.result;
-	if (!results?.length) {
-		return builder;
-	}
-
-	const labels = results.map((s) => s.legend || s.queryName || '');
-
-	const colorMapping = labels.reduce<Record<string, string>>(
-		(acc, label, index) => {
-			acc[label] = BILLING_SERIES_COLORS[index] ?? Color.BG_AMBER_500;
-			return acc;
-		},
-		{},
-	);
-
-	labels.forEach((label) => {
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			label,
-			colorMapping,
-			isDarkMode,
-			metric: {},
-		});
-	});
-
-	builder.setBands(getInitialStackedBands(results.length));
-	builder.setPadding([32, 32, 16, 16]);
-	builder.setFocus({ alpha: 0.3 });
-
-	return builder;
-}

frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts

@@ -1,7 +1,7 @@
 import { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { isEmpty, isNull } from 'lodash-es';
 import { unparse } from 'papaparse';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -29,25 +29,23 @@ export const convertDataToMetricRangePayload = (
 		return emptyStateData;
 	}
 
-	const payload = breakdown
-		.map((info: any) => {
-			const metric = info.type;
-			const sortedBreakdownData = (info?.dayWiseBreakdown?.breakdown || []).sort(
-				(a: any, b: any) => a.timestamp - b.timestamp,
-			);
-			const values = (sortedBreakdownData || []).map((categoryInfo: any) => [
-				categoryInfo.timestamp,
-				categoryInfo.total,
-			]);
-			const queryName = info.type;
-			const legend = info.type;
-			const { unit } = info;
-			const quantity = sortedBreakdownData.map(
-				(categoryInfo: any) => categoryInfo.quantity,
-			);
-			return { metric, values, queryName, legend, quantity, unit };
-		})
-		.filter((series: any) => series.values.length > 0);
+	const payload = breakdown.map((info: any) => {
+		const metric = info.type;
+		const sortedBreakdownData = (info?.dayWiseBreakdown?.breakdown || []).sort(
+			(a: any, b: any) => a.timestamp - b.timestamp,
+		);
+		const values = (sortedBreakdownData || []).map((categoryInfo: any) => [
+			categoryInfo.timestamp,
+			categoryInfo.total,
+		]);
+		const queryName = info.type;
+		const legend = info.type;
+		const { unit } = info;
+		const quantity = sortedBreakdownData.map(
+			(categoryInfo: any) => categoryInfo.quantity,
+		);
+		return { metric, values, queryName, legend, quantity, unit };
+	});
 
 	const sortedData = payload.sort((a: any, b: any) => {
 		const sumA = a.values.reduce((acc: any, val: any) => acc + val[1], 0);
@@ -122,40 +120,11 @@ export function prepareCsvData(data: Partial<UsageResponsePayloadProps>): {
 	fileName: string;
 } {
 	const graphCompatibleData = convertDataToMetricRangePayload(data);
-	const chartData = prepareChartData(graphCompatibleData);
-	const quantityMapArr = quantityDataArr(
-		graphCompatibleData,
-		chartData[0] as number[],
-	);
+	const chartData = getUPlotChartData(graphCompatibleData);
+	const quantityMapArr = quantityDataArr(graphCompatibleData, chartData[0]);
 
 	return {
 		csvData: unparse(generateCsvData(quantityMapArr)),
 		fileName: csvFileName(quantityMapArr),
 	};
 }
-
-export function calculateStartEndTime(
-	data: Partial<UsageResponsePayloadProps>,
-): { startTime: number | undefined; endTime: number | undefined } {
-	const timestamps: number[] = [];
-	data?.details?.breakdown?.forEach((breakdown) => {
-		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry) => {
-			timestamps.push(entry.timestamp);
-		});
-	});
-
-	const billingTime: number[] = [
-		data?.billingPeriodStart,
-		data?.billingPeriodEnd,
-	].filter((t): t is number => typeof t === 'number' && Number.isFinite(t));
-
-	const allTimes = [...timestamps, ...billingTime];
-	if (allTimes.length === 0) {
-		return { startTime: undefined, endTime: undefined };
-	}
-
-	return {
-		startTime: Math.min(...allTimes),
-		endTime: Math.max(...allTimes),
-	};
-}

frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss

@@ -153,7 +153,6 @@
 				font-size: 10px;
 				color: var(--l2-foreground);
 				margin-top: 4px;
-				display: block;
 			}
 		}
 

frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss

@@ -47,10 +47,18 @@
 		}
 
 		.ant-tabs-tab-active {
-			.overview-btn,
-			.variables-btn,
+			.overview-btn {
+				border-radius: 2px 0px 0px 2px;
+				background: var(--l1-border);
+			}
+
+			.variables-btn {
+				border-radius: 2px 0px 0px 2px;
+				background: var(--l1-border);
+			}
+
 			.public-dashboard-btn {
-				color: var(--primary-background);
+				border-radius: 2px 0px 0px 2px;
 				background: var(--l1-border);
 			}
 		}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -127,15 +127,6 @@
 					align-items: center;
 					justify-content: center;
 					gap: 4px;
-
-					.sidenav-beta-tag {
-						margin-left: 4px;
-					}
-
-					div {
-						display: flex;
-						align-items: center;
-					}
 				}
 
 				.variable-type-btn + .variable-type-btn {
@@ -186,7 +177,6 @@
 
 		.multiple-values-section {
 			justify-content: space-between;
-			align-items: flex-start;
 			margin-bottom: 0;
 
 			.typography-variables {
@@ -203,7 +193,6 @@
 
 		.all-option-section {
 			justify-content: space-between;
-			align-items: flex-start;
 			margin-bottom: 0;
 
 			.typography-variables {

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -518,6 +518,7 @@ function VariableItem({
 										size={14}
 										style={{
 											color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+											marginTop: 1,
 										}}
 									/>
 								}
@@ -613,6 +614,7 @@ function VariableItem({
 												size={14}
 												style={{
 													color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+													marginTop: 1,
 												}}
 											/>
 										}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.test.tsx

@@ -1,328 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource } from 'types/common/queryBuilder';
-import { removeVariableReferencesFromDashboard } from './addTagFiltersToDashboard';
-
-// ---------------------------------------------------------------------------
-// Shared fixture helpers
-// ---------------------------------------------------------------------------
-
-const EMPTY_BUILDER = {
-	queryData: [] as any,
-	queryFormulas: [],
-	queryTraceOperator: [],
-};
-
-const BASE_WIDGET = {
-	opacity: '1',
-	nullZeroValues: 'null',
-	timePreferance: 'GLOBAL_TIME' as const,
-	softMin: null,
-	softMax: null,
-	selectedLogFields: null,
-	selectedTracesFields: null,
-};
-
-const DEFAULT_QUERY_DATA = {
-	queryName: 'q1',
-	// In QB v5, expression holds the query label (A/B/C), not a filter expression
-	expression: 'A',
-	dataSource: DataSource.METRICS,
-	functions: [],
-	groupBy: [],
-	filters: { items: [] as any[], op: 'AND' as const },
-	legend: '',
-	disabled: false,
-	having: [],
-	limit: null,
-	stepInterval: null,
-	orderBy: [],
-	selectColumns: [],
-	source: '' as const,
-};
-
-/**
- * Build a dashboard with a single builder widget.
- * Only supply the fields your test actually cares about.
- */
-const buildBuilderDashboard = (
-	filterExpression: string,
-	queryDataOverrides: Record<string, any> = {},
-): Dashboard => ({
-	id: 'dash1',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'Test Dashboard',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'widget-1',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: 'Widget 1',
-				description: '',
-				query: {
-					id: 'query1',
-					queryType: EQueryType.QUERY_BUILDER,
-					promql: [],
-					clickhouse_sql: [],
-					builder: {
-						queryData: [
-							{
-								...DEFAULT_QUERY_DATA,
-								...queryDataOverrides,
-								filter: { expression: filterExpression },
-							},
-						],
-						queryFormulas: [],
-						queryTraceOperator: [],
-					},
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-const buildClickhouseDashboard = (query: string): Dashboard => ({
-	id: 'dash-ch',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'CH',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'w1',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: '',
-				description: '',
-				query: {
-					id: 'q1',
-					queryType: EQueryType.CLICKHOUSE,
-					promql: [],
-					clickhouse_sql: [{ name: 'A', query, legend: '', disabled: false }],
-					builder: EMPTY_BUILDER,
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-const buildPromqlDashboard = (query: string): Dashboard => ({
-	id: 'dash-prom',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'PromQL Dashboard',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'widget-prom',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: 'PromQL Widget',
-				description: '',
-				query: {
-					id: 'query-prom',
-					queryType: EQueryType.PROM,
-					promql: [{ name: 'A', query, legend: '', disabled: false }],
-					clickhouse_sql: [],
-					builder: EMPTY_BUILDER,
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-/** Run removeVariableReferencesFromDashboard on a single-widget clickhouse dashboard and return the cleaned SQL. */
-const chQuery = (sql: string, varName: string): string => {
-	const result = removeVariableReferencesFromDashboard(
-		buildClickhouseDashboard(sql),
-		varName,
-	);
-	return (result!.data.widgets![0] as any).query.clickhouse_sql[0].query;
-};
-
-/** Extract the first builder queryData from a cleaned dashboard. */
-const firstBuilderQueryData = (dashboard: Dashboard | undefined): any =>
-	(dashboard!.data.widgets![0] as any).query.builder.queryData[0];
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('removeVariableReferencesFromDashboard', () => {
-	describe('builder filter expression cleanup', () => {
-		it('removes a variable clause from filter.expression', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
-		});
-
-		it('leaves no dangling AND/OR after removing a variable clause', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-			const { expression } = firstBuilderQueryData(result).filter;
-
-			expect(expression).toBe("env = 'prod'");
-			expect(expression).not.toMatch(/^\s*(AND|OR)/i);
-			expect(expression).not.toMatch(/(AND|OR)\s*$/i);
-		});
-
-		it('does not remove $environment clause when deleting $env', () => {
-			const dashboard = buildBuilderDashboard(
-				'env = $env AND deployment.environment = $environment',
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'env');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				'deployment.environment = $environment',
-			);
-		});
-
-		it('leaves literal filter expressions untouched when removing a variable', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name = 'api-gateway' AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				"service.name = 'api-gateway' AND env = 'prod'",
-			);
-		});
-
-		it('removes only the variable clause, preserving a literal clause on the same key', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND service.name = 'api-gateway'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				"service.name = 'api-gateway'",
-			);
-		});
-
-		it('returns filter.expression unchanged when the variable has no clauses in it', () => {
-			const dashboard = buildBuilderDashboard("env = 'prod'");
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
-		});
-	});
-
-	describe('PromQL query cleanup', () => {
-		it('removes variable placeholder from a promql query', () => {
-			const result = removeVariableReferencesFromDashboard(
-				buildPromqlDashboard('sum(rate(http_requests_total{$service}[5m]))'),
-				'service',
-			);
-
-			const widget = result!.data.widgets![0] as any;
-			expect(widget.query.promql[0].query).toBe(
-				'sum(rate(http_requests_total{}[5m]))',
-			);
-		});
-
-		it('strips only the variable token inside a PromQL label matcher (token-only path)', () => {
-			const result = removeVariableReferencesFromDashboard(
-				buildPromqlDashboard('up{env="$env", job="api"}'),
-				'env',
-			);
-
-			const widget = result!.data.widgets![0] as any;
-			expect(widget.query.promql[0].query).toBe('up{env="", job="api"}');
-		});
-	});
-
-	describe('ClickHouse SQL query cleanup', () => {
-		it('removes a quoted variable clause and its WHERE keyword', () => {
-			expect(
-				chQuery(
-					"SELECT count() FROM signoz_logs WHERE service_name = '$service'",
-					'service',
-				),
-			).toBe('SELECT count() FROM signoz_logs');
-		});
-
-		it('removes a middle clause: AND env={{.env}} AND', () => {
-			expect(
-				chQuery('SELECT count() FROM t WHERE a=1 AND env={{.env}} AND b=2', 'env'),
-			).toBe('SELECT count() FROM t WHERE a=1 AND b=2');
-		});
-
-		it('removes the first clause: env={{.env}} AND rest', () => {
-			expect(
-				chQuery('SELECT count() FROM t WHERE env={{.env}} AND b=2', 'env'),
-			).toBe('SELECT count() FROM t WHERE b=2');
-		});
-
-		it('removes the last clause: rest AND env=$env', () => {
-			expect(chQuery('SELECT count() FROM t WHERE a=1 AND env=$env', 'env')).toBe(
-				'SELECT count() FROM t WHERE a=1',
-			);
-		});
-
-		it('removes a clause with double-bracket syntax: service=[[svc]]', () => {
-			expect(chQuery('SELECT count() FROM t WHERE service=[[svc]]', 'svc')).toBe(
-				'SELECT count() FROM t',
-			);
-		});
-
-		it('falls back to token-only strip for a bare variable in SELECT', () => {
-			expect(chQuery('SELECT $metric FROM table', 'metric')).toBe(
-				'SELECT FROM table',
-			);
-		});
-	});
-
-	describe('edge cases', () => {
-		it('is idempotent — calling twice produces the same result', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const once = removeVariableReferencesFromDashboard(dashboard, 'service');
-			const twice = removeVariableReferencesFromDashboard(once, 'service');
-
-			expect(twice).toStrictEqual(once);
-		});
-
-		it('handles a dashboard with no widgets without throwing', () => {
-			const dashboard: Dashboard = {
-				id: 'dash-empty',
-				createdAt: '',
-				updatedAt: '',
-				createdBy: '',
-				updatedBy: '',
-				data: { title: 'Empty Dashboard', widgets: undefined, variables: {} },
-			};
-
-			expect(() =>
-				removeVariableReferencesFromDashboard(dashboard, 'service'),
-			).not.toThrow();
-		});
-	});
-});

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.tsx

@@ -1,8 +1,6 @@
 import {
 	convertFiltersToExpressionWithExistingQuery,
-	createVariablePlaceholderRegExp,
 	removeKeysFromExpression,
-	removeVariableFromExpression,
 } from 'components/QueryBuilderV2/utils';
 import { cloneDeep, isArray, isEmpty } from 'lodash-es';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
@@ -159,139 +157,6 @@ const updateAfterRemoval = (
 	};
 };
 
-const removeVariablePlaceholders = (
-	text: string | undefined,
-	variableName: string,
-): string => {
-	if (!text) {
-		return '';
-	}
-
-	const tokenPattern = createVariablePlaceholderRegExp(variableName);
-
-	// Step 1: attempt clause-aware removal for SQL WHERE patterns.
-	// Strips the entire `key op $var` unit plus its adjacent AND/OR so we
-	// never leave a dangling `key = ` in unquoted ClickHouse SQL clauses.
-	// Handles three shapes:
-	//   (a) preceding conjunction:  AND key = $var
-	//   (b) following conjunction:  key = $var AND
-	//   (c) standalone clause:      key = $var  (end of expression)
-	const escapedToken = tokenPattern.source;
-	const clausePattern = new RegExp(
-		// (a) conjunction before the clause
-		`\\s*\\b(?:AND|OR)\\b\\s+[\\w."'\\[\\]]+\\s*(?:=|!=|<>|LIKE|ILIKE|IN|NOT\\s+IN)\\s*'?${escapedToken}'?` +
-			// (b)+(c) clause first, optional conjunction after
-			`|[\\w."'\\[\\]]+\\s*(?:=|!=|<>|LIKE|ILIKE|IN|NOT\\s+IN)\\s*'?${escapedToken}'?(?:\\s*\\b(?:AND|OR)\\b)?`,
-		'gi',
-	);
-
-	const withClauseRemoval = text.replace(clausePattern, '');
-	if (withClauseRemoval !== text) {
-		return withClauseRemoval
-			.replace(/\s{2,}/g, ' ')
-			.replace(/\bWHERE\s*$/i, '')
-			.trim();
-	}
-
-	// Step 2: fallback — bare variable usage outside a key-op-value pattern
-	// (e.g. SELECT $metric, LIMIT $n). Token-only removal is correct here.
-	return text
-		.replace(tokenPattern, '')
-		.replace(/\s{2,}/g, ' ')
-		.trim();
-};
-
-const removeVariableReferencesFromQueryData = (
-	queryData: IBuilderQuery,
-	variableName: string,
-): IBuilderQuery => {
-	const updatedFilter = queryData.filter?.expression
-		? {
-				...queryData.filter,
-				expression: removeVariableFromExpression(
-					queryData.filter.expression,
-					variableName,
-				),
-			}
-		: queryData.filter;
-
-	return { ...queryData, filter: updatedFilter };
-};
-
-const removeVariableReferencesFromWidget = (
-	widget: Widgets,
-	variableName: string,
-): Widgets => {
-	let updatedWidget = { ...widget };
-
-	if (updatedWidget.query?.builder?.queryData) {
-		updatedWidget = {
-			...updatedWidget,
-			query: {
-				...updatedWidget.query,
-				builder: {
-					...updatedWidget.query.builder,
-					queryData: updatedWidget.query.builder.queryData.map((queryData) =>
-						removeVariableReferencesFromQueryData(queryData, variableName),
-					),
-				},
-			},
-		};
-	}
-
-	if (updatedWidget.query?.promql) {
-		updatedWidget = {
-			...updatedWidget,
-			query: {
-				...updatedWidget.query,
-				promql: updatedWidget.query.promql.map((promqlQuery) => ({
-					...promqlQuery,
-					query: removeVariablePlaceholders(promqlQuery.query, variableName),
-				})),
-			},
-		};
-	}
-
-	if (updatedWidget.query?.clickhouse_sql) {
-		updatedWidget = {
-			...updatedWidget,
-			query: {
-				...updatedWidget.query,
-				clickhouse_sql: updatedWidget.query.clickhouse_sql.map((sqlQuery) => ({
-					...sqlQuery,
-					query: removeVariablePlaceholders(sqlQuery.query, variableName),
-				})),
-			},
-		};
-	}
-
-	return updatedWidget;
-};
-
-export const removeVariableReferencesFromDashboard = (
-	dashboard: Dashboard | undefined,
-	variableName: string,
-): Dashboard | undefined => {
-	if (!dashboard || !variableName) {
-		return dashboard;
-	}
-
-	const updatedDashboard = cloneDeep(dashboard);
-
-	if (updatedDashboard.data.widgets) {
-		updatedDashboard.data.widgets = updatedDashboard.data.widgets.map(
-			(widget) => {
-				if ('query' in widget) {
-					return removeVariableReferencesFromWidget(widget as Widgets, variableName);
-				}
-				return widget;
-			},
-		);
-	}
-
-	return updatedDashboard;
-};
-
 /**
  * A function that takes a dashboard configuration and a list of tag filters
  * and returns an updated dashboard with the filters appended to widget queries.

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx

@@ -18,11 +18,10 @@ import { convertVariablesToDbFormat } from 'container/DashboardContainer/Dashboa
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { toast } from '@signozhq/ui/sonner';
+import { useNotifications } from 'hooks/useNotifications';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
-import { removeVariableReferencesFromDashboard } from './addTagFiltersToDashboard';
 
 import { TVariableMode } from './types';
 import VariableItem from './VariableItem/VariableItem';
@@ -93,6 +92,8 @@ function VariablesSettings({
 	const { dashboardData, setDashboardData } = useDashboardStore();
 	const { dashboardVariables } = useDashboardVariables();
 
+	const { notifications } = useNotifications();
+
 	const [variablesTableData, setVariablesTableData] = useState<any>([]);
 	const [variblesOrderArr, setVariablesOrderArr] = useState<number[]>([]);
 	const [existingVariableNamesMap, setExistingVariableNamesMap] = useState<
@@ -200,7 +201,9 @@ function VariablesSettings({
 				onSuccess: (updatedDashboard) => {
 					if (updatedDashboard.data) {
 						setDashboardData(updatedDashboard.data);
-						toast.success(t('variable_updated_successfully'));
+						notifications.success({
+							message: t('variable_updated_successfully'),
+						});
 					}
 				},
 			},
@@ -253,11 +256,6 @@ function VariablesSettings({
 	};
 
 	const handleDeleteConfirm = (): void => {
-		if (!dashboardData || !variableToDelete.current) {
-			setDeleteVariableModal(false);
-			return;
-		}
-
 		const newVariablesArr = variablesTableData.filter(
 			(variable: IDashboardVariable) =>
 				variable.id !== variableToDelete?.current?.id,
@@ -265,31 +263,7 @@ function VariablesSettings({
 
 		const updatedVariables = convertVariablesToDbFormat(newVariablesArr);
 
-		const cleanedDashboard =
-			removeVariableReferencesFromDashboard(
-				dashboardData,
-				variableToDelete.current.name || '',
-			) || dashboardData;
-
-		updateMutation.mutateAsync(
-			{
-				id: dashboardData.id,
-
-				data: {
-					...cleanedDashboard.data,
-					variables: updatedVariables,
-				},
-			},
-			{
-				onSuccess: (updatedDashboard) => {
-					if (updatedDashboard.data) {
-						setDashboardData(updatedDashboard.data);
-						toast.success(t('variable_updated_successfully'));
-					}
-				},
-			},
-		);
-
+		updateVariables(updatedVariables);
 		variableToDelete.current = null;
 		setDeleteVariableModal(false);
 	};
@@ -502,7 +476,6 @@ function VariablesSettings({
 				open={deleteVariableModal}
 				onOk={handleDeleteConfirm}
 				onCancel={handleDeleteCancel}
-				okButtonProps={{ loading: updateMutation.isLoading }}
 			>
 				<Typography.Text>
 					Are you sure you want to delete variable{' '}

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__/usePanelContextMenu.test.ts

@@ -1,7 +1,8 @@
 import { renderHook } from '@testing-library/react';
 import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { usePanelContextMenu } from '../usePanelContextMenu';
 
@@ -46,7 +47,10 @@ const mockWidget = { id: 'w-1', query: {} } as unknown as Widgets;
 const mockQueryResponse = {
 	data: undefined,
 	isLoading: false,
-} as unknown as UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+} as unknown as UseQueryResult<
+	SuccessResponse<MetricRangePayloadProps, unknown>,
+	Error
+>;
 
 describe('usePanelContextMenu', () => {
 	beforeEach(() => {

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/usePanelContextMenu.ts

@@ -10,13 +10,17 @@ import {
 	PopoverPosition,
 	useCoordinates,
 } from 'periscope/components/ContextMenu';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 interface UseTimeSeriesContextMenuParams {
 	widget: Widgets;
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	enableDrillDown?: boolean;
 }
 

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/DashboardContainer/visualization/panels/components/__tests__/TooltipFooter.test.tsx

@@ -1,10 +1,16 @@
-import { logEventMock } from '__tests__/logEventMock';
 import { Events } from 'constants/events';
 import { DEFAULT_PIN_TOOLTIP_KEY } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import TooltipFooter from '../TooltipFooter';
 
+const mockLogEvent = jest.fn();
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: (...args: unknown[]): unknown => mockLogEvent(...args),
+}));
+
 describe('TooltipFooter', () => {
 	const defaultProps = {
 		id: 'panel-123',
@@ -78,7 +84,7 @@ describe('TooltipFooter', () => {
 
 			await user.click(screen.getByTestId('uplot-tooltip-unpin'));
 
-			expect(logEventMock).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
+			expect(mockLogEvent).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
 				id: 'panel-123',
 			});
 			expect(dismiss).toHaveBeenCalledTimes(1);

frontend/src/container/FormAlertRules/QuerySection.styles.scss

@@ -19,7 +19,6 @@
 		}
 		.ant-btn-default {
 			border-color: transparent;
-			box-shadow: none;
 		}
 	}
 	.ant-tabs-tab-active {

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -1,6 +1,7 @@
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
+import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import { DEFAULT_ENTITY_VERSION, ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
@@ -66,6 +67,20 @@ function GridCardGraph({
 	const [errorMessage, setErrorMessage] = useState<string>();
 	const [isInternalServerError, setIsInternalServerError] =
 		useState<boolean>(false);
+	const queryRangeCalledRef = useRef(false);
+
+	useEffect(() => {
+		const timeoutId = setTimeout(() => {
+			if (!queryRangeCalledRef.current) {
+				Sentry.captureEvent({
+					message: `Dashboard query range not called within expected timeframe for widget ${widget?.id}`,
+					level: 'warning',
+				});
+			}
+		}, 120000);
+		return (): void => clearTimeout(timeoutId);
+	}, [widget?.id]);
+
 	const {
 		minTime,
 		maxTime,
@@ -256,12 +271,14 @@ function GridCardGraph({
 						});
 					}
 				}
+				queryRangeCalledRef.current = true;
 			},
 			onSettled: (data) => {
 				dataAvailable?.(
 					isDataAvailableByPanelType(data?.payload?.data, widget?.panelTypes),
 				);
 				getGraphData?.(data?.payload?.data);
+				queryRangeCalledRef.current = true;
 			},
 		},
 	);

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -5,11 +5,9 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import {
-	MetricQueryRangeSuccessResponse,
-	MetricRangePayloadProps,
-} from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 import uPlot from 'uplot';
 
@@ -23,7 +21,10 @@ export interface GraphVisibilityLegendEntryProps {
 
 export interface WidgetGraphComponentProps {
 	widget: Widgets;
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	errorMessage: string | undefined;
 	version?: string;
 	threshold?: ReactNode;

frontend/src/container/GridValueComponent/types.ts

@@ -1,7 +1,8 @@
 import { UseQueryResult } from 'react-query';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
+import { SuccessResponse } from 'types/api';
 import { ContextLinksData, Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 export type GridValueComponentProps = {
@@ -12,7 +13,10 @@ export type GridValueComponentProps = {
 	thresholds?: ThresholdProps[];
 	// Context menu related props
 	widget?: Widgets;
-	queryResponse?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse?: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	contextLinks?: ContextLinksData;
 	enableDrillDown?: boolean;
 };

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/Integrations/CloudIntegration/AmazonWebServices/ServiceDetails/ServiceDetails.tsx

@@ -8,17 +8,16 @@ import { Tabs } from '@signozhq/ui/tabs';
 import { Skeleton } from 'antd';
 import logEvent from 'api/common/logEvent';
 import {
-	getListAccountServicesMetadataQueryKey,
-	invalidateGetAccountService,
-	invalidateListAccountServicesMetadata,
-	useGetAccountService,
+	getListServicesMetadataQueryKey,
+	invalidateGetService,
+	invalidateListServicesMetadata,
 	useGetService,
 	useUpdateService,
 } from 'api/generated/services/cloudintegration';
 import {
 	CloudintegrationtypesServiceConfigDTO,
 	CloudintegrationtypesServiceDTO,
-	ListAccountServicesMetadata200,
+	ListServicesMetadata200,
 } from 'api/generated/services/sigNoz.schemas';
 import CloudServiceDataCollected from 'components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
@@ -119,50 +118,30 @@ function ServiceDetails({
 	const cloudAccountId = urlQuery.get('cloudAccountId');
 	const serviceId = urlQuery.get('service');
 	const isReadOnly = !cloudAccountId;
+	const serviceQueryParams = cloudAccountId
+		? { cloud_integration_id: cloudAccountId }
+		: undefined;
 
 	const {
-		queryKey: _accountServiceQueryKey,
-		data: accountServiceData,
-		isLoading: isAccountServiceLoading,
-	} = useGetAccountService(
-		{
-			cloudProvider: type,
-			id: cloudAccountId || '',
-			serviceId: serviceId || '',
-		},
-		{
-			query: {
-				enabled: !!serviceId && !!cloudAccountId,
-				select: (response): ServiceDetailsData => response.data,
-			},
-		},
-	);
-
-	const {
-		queryKey: _readOnlyServiceQueryKey,
-		data: readOnlyServiceData,
-		isLoading: isReadOnlyServiceLoading,
+		queryKey: _queryKey,
+		data: serviceDetailsData,
+		isLoading: isServiceDetailsLoading,
 	} = useGetService(
 		{
 			cloudProvider: type,
 			serviceId: serviceId || '',
 		},
-		undefined,
+		{
+			...serviceQueryParams,
+		},
 		{
 			query: {
-				enabled: !!serviceId && !cloudAccountId,
+				enabled: !!serviceId,
 				select: (response): ServiceDetailsData => response.data,
 			},
 		},
 	);
 
-	const serviceDetailsData = cloudAccountId
-		? accountServiceData
-		: readOnlyServiceData;
-	const isServiceDetailsLoading = cloudAccountId
-		? isAccountServiceLoading
-		: isReadOnlyServiceLoading;
-
 	const integrationConfig =
 		type === IntegrationType.AWS_SERVICES
 			? serviceDetailsData?.cloudIntegrationService?.config?.aws
@@ -261,12 +240,16 @@ function ServiceDetails({
 							// instead of waiting for the refetch to complete.
 							reset(nextFormValues);
 
-							const servicesListQueryKey = getListAccountServicesMetadataQueryKey({
-								cloudProvider: type,
-								id: cloudAccountId,
-							});
+							const servicesListQueryKey = getListServicesMetadataQueryKey(
+								{
+									cloudProvider: type,
+								},
+								{
+									cloud_integration_id: cloudAccountId,
+								},
+							);
 
-							queryClient.setQueryData<ListAccountServicesMetadata200 | undefined>(
+							queryClient.setQueryData<ListServicesMetadata200 | undefined>(
 								servicesListQueryKey,
 								(prev) => {
 									if (!prev?.data?.services?.length) {
@@ -289,16 +272,26 @@ function ServiceDetails({
 								},
 							);
 
-							invalidateGetAccountService(queryClient, {
-								cloudProvider: type,
-								id: cloudAccountId,
-								serviceId,
-							});
+							invalidateGetService(
+								queryClient,
+								{
+									cloudProvider: type,
+									serviceId,
+								},
+								{
+									cloud_integration_id: cloudAccountId,
+								},
+							);
 
-							invalidateListAccountServicesMetadata(queryClient, {
-								cloudProvider: type,
-								id: cloudAccountId,
-							});
+							invalidateListServicesMetadata(
+								queryClient,
+								{
+									cloudProvider: type,
+								},
+								{
+									cloud_integration_id: cloudAccountId,
+								},
+							);
 
 							logEvent(`${type} Integration: Service settings saved`, {
 								cloudAccountId,

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/ServiceDetailsS3Sync.test.tsx

@@ -64,7 +64,7 @@ describe('ServiceDetails for S3 Sync service', () => {
 				(_req, res, ctx) => res(ctx.json(accountsResponse)),
 			),
 			rest.get(
-				'http://localhost/api/v1/cloud_integrations/aws/accounts/:accountId/services/:serviceId',
+				'http://localhost/api/v1/cloud_integrations/aws/services/:serviceId',
 				(req, res, ctx) =>
 					res(
 						ctx.json(

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

@@ -32,7 +32,7 @@ const accountsResponse: ListAccounts200 = {
 	},
 };
 
-/** Response shape for GET /cloud_integrations/aws/accounts/:accountId/services/:serviceId (used by ServiceDetails). */
+/** Response shape for GET /cloud_integrations/aws/services/:serviceId (used by ServiceDetails). */
 const buildServiceDetailsResponse = (
 	serviceId: string,
 	initialConfigLogsS3Buckets: Record<string, string[]> = {},
@@ -55,6 +55,7 @@ const buildServiceDetailsResponse = (
 				},
 			},
 		},
+		telemetryCollectionStrategy: { aws: {} },
 	},
 });
 

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

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

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

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

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

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

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

@@ -1,11 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { Skeleton } from 'antd';
-import {
-	useListAccounts,
-	useListAccountServicesMetadata,
-	useListServicesMetadata,
-} from 'api/generated/services/cloudintegration';
+import { useListServicesMetadata } from 'api/generated/services/cloudintegration';
 import type { CloudintegrationtypesServiceMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { IntegrationType } from 'container/Integrations/types';
@@ -24,33 +20,17 @@ function ServicesList({
 }: ServicesListProps): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
-	const isAccountConnected = Boolean(cloudAccountId);
-	const { data: listAccountsResponse, isLoading: isAccountsLoading } =
-		useListAccounts({ cloudProvider: type });
-	const hasConnectedAccounts =
-		(listAccountsResponse?.data?.accounts?.length ?? 0) > 0;
+	const hasValidCloudAccountId = Boolean(cloudAccountId);
+	const serviceQueryParams = hasValidCloudAccountId
+		? { cloud_integration_id: cloudAccountId }
+		: undefined;
 
-	const { data: accountServicesMetadata, isLoading: isAccountServicesLoading } =
-		useListAccountServicesMetadata(
-			{ cloudProvider: type, id: cloudAccountId },
-			{ query: { enabled: isAccountConnected } },
-		);
-
-	const {
-		data: providerServicesMetadata,
-		isLoading: isProviderServicesLoading,
-	} = useListServicesMetadata({ cloudProvider: type }, undefined, {
-		query: { enabled: !isAccountsLoading && !hasConnectedAccounts },
-	});
-
-	const servicesMetadata = hasConnectedAccounts
-		? accountServicesMetadata
-		: providerServicesMetadata;
-	const isLoading =
-		isAccountsLoading ||
-		(hasConnectedAccounts
-			? isAccountServicesLoading || !isAccountConnected
-			: isProviderServicesLoading);
+	const { data: servicesMetadata, isLoading } = useListServicesMetadata(
+		{
+			cloudProvider: type,
+		},
+		serviceQueryParams,
+	);
 
 	const awsServices = useMemo(
 		() => servicesMetadata?.data?.services ?? [],

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -89,7 +89,7 @@ export function AlertsEmptyState({
 									onClick={onClickNewAlertHandler}
 									disabled={!addNewAlert}
 									loading={loading}
-									testId="add-alert"
+									data-testid="add-alert"
 								>
 									<span className={styles.buttonContent}>
 										<Plus size="md" />
@@ -97,12 +97,7 @@ export function AlertsEmptyState({
 									</span>
 								</Button>
 								{onRefresh && (
-									<Button
-										onClick={onRefresh}
-										prefix={<RefreshCw />}
-										color="secondary"
-										testId="list-alerts-empty-refresh-button"
-									>
+									<Button onClick={onRefresh} prefix={<RefreshCw />} color="secondary">
 										Refresh
 									</Button>
 								)}