feat(empty-state): add org context API for contextual empty states

Adds GET /api/v1/empty_state/org_context returning raw org-level
observability signals (ingestion presence per signal, infra metrics,
alert/dashboard/saved-view counts, firing and recently-fired alerts,
raw license state) consumed by the AI assistant to render contextual
empty-state chips. Includes unit tests and an integration test suite.

.github/CODEOWNERS

@@ -188,3 +188,7 @@ 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,6 +69,8 @@ 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

@@ -64,12 +64,18 @@ jobs:
         run: |
           mkdir -p frontend
           echo 'CI=1' > frontend/.env
+          echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
+          echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
+          echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
+          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
           echo 'VITE_TUNNEL_URL="${{ secrets.NP_TUNNEL_URL }}"' >> frontend/.env
           echo 'VITE_TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
           echo 'VITE_PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env
           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,6 +35,8 @@ 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,10 +39,13 @@ jobs:
       matrix:
         suite:
           - alerts
+          - basepath
           - callbackauthn
           - cloudintegrations
           - dashboard
+          - emptystate
           - ingestionkeys
+          - inframonitoring
           - logspipelines
           - passwordauthn
           - preference
@@ -83,7 +86,7 @@ jobs:
         run: |
           cd tests && uv sync
       - name: webdriver
-        if: matrix.suite == 'callbackauthn'
+        if: matrix.suite == 'callbackauthn' || matrix.suite == 'basepath'
         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

.gitignore

@@ -40,6 +40,8 @@ frontend/src/constants/env.ts
 **/__debug_bin
 
 .env
+# sqlite db created at repo root by `make go-run-community` / `make go-run-enterprise`
+/signoz.db
 pkg/query-service/signoz.db
 
 pkg/query-service/tests/test-deploy/data/

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)
+			return signoz.NewAuthNs(ctx, providerSettings, store, licensing, config.Global)
 		},
 		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)
+			samlCallbackAuthN, err := samlcallbackauthn.New(ctx, store, licensing, config.Global)
 			if err != nil {
 				return nil, err
 			}
 
-			oidcCallbackAuthN, err := oidccallbackauthn.New(store, licensing, providerSettings)
+			oidcCallbackAuthN, err := oidccallbackauthn.New(store, licensing, providerSettings, config.Global)
 			if err != nil {
 				return nil, err
 			}
 
-			authNs, err := signoz.NewAuthNs(ctx, providerSettings, store, licensing)
+			authNs, err := signoz.NewAuthNs(ctx, providerSettings, store, licensing, config.Global)
 			if err != nil {
 				return nil, err
 			}

conf/example.yaml

@@ -440,6 +440,17 @@ 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.0
+    image: signoz/signoz:v0.128.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

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.0
+    image: signoz/signoz:v0.128.0
     ports:
       - "8080:8080" # signoz port
     volumes:

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.0}
+    image: signoz/signoz:${VERSION:-v0.128.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

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.0}
+    image: signoz/signoz:${VERSION:-v0.128.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

ee/authn/callbackauthn/oidccallbackauthn/authn.go

@@ -5,10 +5,12 @@ 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"
@@ -26,13 +28,14 @@ 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
+	settings     factory.ScopedProviderSettings
+	store        authtypes.AuthNStore
+	licensing    licensing.Licensing
+	httpClient   *client.Client
+	globalConfig global.Config
 }
 
-func New(store authtypes.AuthNStore, licensing licensing.Licensing, providerSettings factory.ProviderSettings) (*AuthN, error) {
+func New(store authtypes.AuthNStore, licensing licensing.Licensing, providerSettings factory.ProviderSettings, globalConfig global.Config) (*AuthN, error) {
 	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/ee/authn/callbackauthn/oidccallbackauthn")
 
 	httpClient, err := client.New(providerSettings.Logger, providerSettings.TracerProvider, providerSettings.MeterProvider)
@@ -41,10 +44,11 @@ func New(store authtypes.AuthNStore, licensing licensing.Licensing, providerSett
 	}
 
 	return &AuthN{
-		settings:   settings,
-		store:      store,
-		licensing:  licensing,
-		httpClient: httpClient,
+		settings:     settings,
+		store:        store,
+		licensing:    licensing,
+		httpClient:   httpClient,
+		globalConfig: globalConfig,
 	}, nil
 }
 
@@ -197,7 +201,7 @@ func (a *AuthN) oidcProviderAndoauth2Config(ctx context.Context, siteURL *url.UR
 		RedirectURL: (&url.URL{
 			Scheme: siteURL.Scheme,
 			Host:   siteURL.Host,
-			Path:   redirectPath,
+			Path:   path.Join(a.globalConfig.ExternalPath(), redirectPath),
 		}).String(),
 	}, nil
 }

ee/authn/callbackauthn/samlcallbackauthn/authn.go

@@ -6,10 +6,12 @@ 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"
@@ -24,14 +26,16 @@ const (
 var _ authn.CallbackAuthN = (*AuthN)(nil)
 
 type AuthN struct {
-	store     authtypes.AuthNStore
-	licensing licensing.Licensing
+	store        authtypes.AuthNStore
+	licensing    licensing.Licensing
+	globalConfig global.Config
 }
 
-func New(ctx context.Context, store authtypes.AuthNStore, licensing licensing.Licensing) (*AuthN, error) {
+func New(ctx context.Context, store authtypes.AuthNStore, licensing licensing.Licensing, globalConfig global.Config) (*AuthN, error) {
 	return &AuthN{
-		store:     store,
-		licensing: licensing,
+		store:        store,
+		licensing:    licensing,
+		globalConfig: globalConfig,
 	}, nil
 }
 
@@ -132,7 +136,7 @@ func (a *AuthN) serviceProvider(siteURL *url.URL, authDomain *authtypes.AuthDoma
 		return nil, err
 	}
 
-	acsURL := &url.URL{Scheme: siteURL.Scheme, Host: siteURL.Host, Path: redirectPath}
+	acsURL := &url.URL{Scheme: siteURL.Scheme, Host: siteURL.Host, Path: path.Join(a.globalConfig.ExternalPath(), 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,26 +355,32 @@ func (module *module) GetService(ctx context.Context, orgID valuer.UUID, service
 
 	var integrationService *cloudintegrationtypes.CloudIntegrationService
 
-	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
-		}
+	if cloudIntegrationID.IsZero() {
+		return cloudintegrationtypes.NewService(provider, serviceDefinition, nil, nil), nil
 	}
 
-	return cloudintegrationtypes.NewService(*serviceDefinition, integrationService), nil
+	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
 }
 
 func (module *module) CreateService(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, service *cloudintegrationtypes.CloudIntegrationService, provider cloudintegrationtypes.CloudProviderType) error {
@@ -583,20 +589,3 @@ 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,6 +221,18 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }
 
+func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updatable)
+}
+
+func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.PatchV2(ctx, orgID, id, updatedBy, patch)
+}
+
+func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	return module.pkgDashboardModule.LockUnlockV2(ctx, orgID, id, updatedBy, isAdmin, lock)
+}
+
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }

frontend/jest.setup.ts

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

frontend/src/AppRoutes/index.tsx

@@ -351,19 +351,18 @@ function App(): JSX.Element {
 				Sentry.init({
 					dsn: process.env.SENTRY_DSN,
 					tunnel: process.env.TUNNEL_URL,
-					environment: 'production',
+					environment: process.env.ENVIRONMENT,
+					release: process.env.VERSION,
 					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,
 						}),
 					],
-					// 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
+					tracesSampleRate: 0, // Ref: https://github.com/SigNoz/platform-pod/issues/2393#issuecomment-4603658055
 					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/api/alerts/getTriggered.ts

@@ -5,6 +5,13 @@ import convertObjectIntoParams from 'lib/query/convertObjectIntoParams';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/alerts/getTriggered';
 
+/**
+ * @deprecated Use the generated `useGetAlerts` hook (or `getAlerts` fetcher) from
+ * `api/generated/services/alerts` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const getTriggered = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {

frontend/src/api/billing/getUsage.ts

@@ -3,13 +3,36 @@ 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: Date;
-	billingPeriodEnd: Date;
+	billingPeriodStart: number;
+	billingPeriodEnd: number;
 	details: {
 		total: number;
 		baseFee: number;
-		breakdown: [];
+		breakdown: BreakdownEntry[];
 		billTotal: number;
 	};
 	discount: number;

frontend/src/api/channels/createEmail.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createEmail';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/createMsTeams.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createMsTeams';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/createOpsgenie.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/createPager.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createPager';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/createSlack.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createSlack';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/createWebhook.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createWebhook';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/delete.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/delete';
 
+/**
+ * @deprecated Use the generated `useDeleteChannelByID` hook (or `deleteChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const deleteChannel = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/editEmail.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editEmail';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editEmail = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/editMsTeams.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editMsTeams';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editMsTeams = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/editOpsgenie.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorResponse, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editOpsgenie';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editOpsgenie = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps> | ErrorResponse> => {

frontend/src/api/channels/editPager.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editPager';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editPager = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/editSlack.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editSlack';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editSlack = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/editWebhook.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editWebhook';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editWebhook = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/get.ts

@@ -5,6 +5,13 @@ import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/get';
 import { Channels } from 'types/api/channels/getAll';
 
+/**
+ * @deprecated Use the generated `useGetChannelByID` hook (or `getChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const get = async (props: Props): Promise<SuccessResponseV2<Channels>> => {
 	try {
 		const response = await axios.get<PayloadProps>(`/channels/${props.id}`);

frontend/src/api/channels/getAll.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { Channels, PayloadProps } from 'types/api/channels/getAll';
 
+/**
+ * @deprecated Use the generated `useListChannels` hook (or `listChannels` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const getAll = async (): Promise<SuccessResponseV2<Channels[]>> => {
 	try {
 		const response = await axios.get<PayloadProps>('/channels');

frontend/src/api/dashboard/public/createPublicDashboard.ts

@@ -5,6 +5,13 @@ import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constan
 import { ErrorV2Resp, 	 SuccessResponseV2 } from 'types/api';
 import { CreatePublicDashboardProps } from 'types/api/dashboard/public/create';
 
+/**
+ * @deprecated Use the generated `useCreatePublicDashboard` hook (or `createPublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const createPublicDashboard = async (
 	props: CreatePublicDashboardProps,
 ): Promise<SuccessResponseV2<CreatePublicDashboardProps>> => {

frontend/src/api/dashboard/public/getPublicDashboardData.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { GetPublicDashboardDataProps, PayloadProps,PublicDashboardDataProps } from 'types/api/dashboard/public/get';
 
+/**
+ * @deprecated Use the generated `useGetPublicDashboardData` hook (or `getPublicDashboardData` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const getPublicDashboardData = async (props: GetPublicDashboardDataProps): Promise<SuccessResponseV2<PublicDashboardDataProps>> => {
 	try {
 		const response = await axios.get<PayloadProps>(`/public/dashboards/${props.id}`);

frontend/src/api/dashboard/public/getPublicDashboardMeta.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { GetPublicDashboardMetaProps, PayloadProps,PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
 
+/**
+ * @deprecated Use the generated `useGetPublicDashboard` hook (or `getPublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const getPublicDashboardMeta = async (props: GetPublicDashboardMetaProps): Promise<SuccessResponseV2<PublicDashboardMetaProps>> => {
 	try {
 		const response = await axios.get<PayloadProps>(`/dashboards/${props.id}/public`);

frontend/src/api/dashboard/public/getPublicDashboardWidgetData.ts

@@ -6,6 +6,13 @@ import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { GetPublicDashboardWidgetDataProps } from 'types/api/dashboard/public/getWidgetData';
 
 
+/**
+ * @deprecated Use the generated `useGetPublicDashboardWidgetQueryRange` hook (or `getPublicDashboardWidgetQueryRange` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const getPublicDashboardWidgetData = async (props: GetPublicDashboardWidgetDataProps): Promise<SuccessResponseV2<MetricRangePayloadV5>> => {
 	try {
 		const response = await axios.get(`/public/dashboards/${props.id}/widgets/${props.index}/query_range`, {

frontend/src/api/dashboard/public/revokePublicDashboardAccess.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps,RevokePublicDashboardAccessProps } from 'types/api/dashboard/public/delete';
 
+/**
+ * @deprecated Use the generated `useDeletePublicDashboard` hook (or `deletePublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const revokePublicDashboardAccess = async (
 	props: RevokePublicDashboardAccessProps,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/dashboard/public/updatePublicDashboard.ts

@@ -5,6 +5,13 @@ import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constan
 import {  ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { UpdatePublicDashboardProps } from 'types/api/dashboard/public/update';
 
+/**
+ * @deprecated Use the generated `useUpdatePublicDashboard` hook (or `updatePublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const updatePublicDashboard = async (
 	props: UpdatePublicDashboardProps,
 ): Promise<SuccessResponseV2<UpdatePublicDashboardProps>> => {

frontend/src/api/dashboard/substitute_vars.ts

@@ -9,6 +9,13 @@ interface ISubstituteVars {
 	compositeQuery: ICompositeMetricQuery;
 }
 
+/**
+ * @deprecated Use the generated `useReplaceVariables` hook (or `replaceVariables` fetcher) from
+ * `api/generated/services/querier` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 export const getSubstituteVars = async (
 	props?: Partial<QueryRangePayloadV5>,
 	signal?: AbortSignal,

frontend/src/api/dynamicVariables/getFieldKeys.ts

@@ -8,6 +8,12 @@ import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
  * Get field keys for a given signal type
  * @param signal Type of signal (traces, logs, metrics)
  * @param name Optional search text
+ *
+ * @deprecated Use the generated `useGetFieldsKeys` hook (or `getFieldsKeys` fetcher) from
+ * `api/generated/services/fields` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
  */
 export const getFieldKeys = async (
 	signal?: 'traces' | 'logs' | 'metrics',

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -11,6 +11,12 @@ import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
  * @param name Name of the attribute for which values are being fetched
  * @param value Optional search text
  * @param existingQuery Optional existing query - across all present dynamic variables
+ *
+ * @deprecated Use the generated `useGetFieldsValues` hook (or `getFieldsValues` fetcher) from
+ * `api/generated/services/fields` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
  */
 export const getFieldValues = async (
 	signal?: 'traces' | 'logs' | 'metrics',

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

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

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

@@ -31,11 +31,15 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
+	GetAccountService200,
+	GetAccountServicePathParameters,
 	GetConnectionCredentials200,
 	GetConnectionCredentialsPathParameters,
 	GetService200,
 	GetServiceParams,
 	GetServicePathParameters,
+	ListAccountServicesMetadata200,
+	ListAccountServicesMetadataPathParameters,
 	ListAccounts200,
 	ListAccountsPathParameters,
 	ListServicesMetadata200,
@@ -631,6 +635,227 @@ 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,8 +21,10 @@ import type {
 	CreateDashboardV2201,
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
+	DashboardtypesPatchableDashboardV2DTO,
 	DashboardtypesPostableDashboardV2DTO,
 	DashboardtypesPostablePublicDashboardDTO,
+	DashboardtypesUpdatableDashboardV2DTO,
 	DashboardtypesUpdatablePublicDashboardDTO,
 	DeletePublicDashboardPathParameters,
 	GetDashboardV2200,
@@ -33,7 +35,13 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
+	LockDashboardV2PathParameters,
+	PatchDashboardV2200,
+	PatchDashboardV2PathParameters,
 	RenderErrorResponseDTO,
+	UnlockDashboardV2PathParameters,
+	UpdateDashboardV2200,
+	UpdateDashboardV2PathParameters,
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
@@ -816,3 +824,360 @@ 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/emptystate/index.ts

@@ -0,0 +1,107 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'pnpm generate:api'
+ * SigNoz
+ */
+import { useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	GetOrgContext200,
+	RenderErrorResponseDTO,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
+/**
+ * This endpoint returns raw org-level observability signals used to render contextual empty states
+ * @summary Get org context for empty states
+ */
+export const getOrgContext = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetOrgContext200>({
+		url: `/api/v1/empty_state/org_context`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetOrgContextQueryKey = () => {
+	return [`/api/v1/empty_state/org_context`] as const;
+};
+
+export const getGetOrgContextQueryOptions = <
+	TData = Awaited<ReturnType<typeof getOrgContext>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getOrgContext>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetOrgContextQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getOrgContext>>> = ({
+		signal,
+	}) => getOrgContext(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getOrgContext>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetOrgContextQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getOrgContext>>
+>;
+export type GetOrgContextQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get org context for empty states
+ */
+
+export function useGetOrgContext<
+	TData = Awaited<ReturnType<typeof getOrgContext>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getOrgContext>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetOrgContextQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get org context for empty states
+ */
+export const invalidateGetOrgContext = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetOrgContextQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};

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

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

@@ -5,6 +5,13 @@ import {
 	QueryKeySuggestionsResponseProps,
 } from 'types/api/querySuggestions/types';
 
+/**
+ * @deprecated Use the generated `useGetFieldsKeys` hook (or `getFieldsKeys` fetcher) from
+ * `api/generated/services/fields` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 export const getKeySuggestions = (
 	props: QueryKeyRequestProps,
 ): Promise<AxiosResponse<QueryKeySuggestionsResponseProps>> => {

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -5,6 +5,13 @@ import {
 	QueryKeyValueSuggestionsResponseProps,
 } from 'types/api/querySuggestions/types';
 
+/**
+ * @deprecated Use the generated `useGetFieldsValues` hook (or `getFieldsValues` fetcher) from
+ * `api/generated/services/fields` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 export const getValueSuggestions = (
 	props: QueryKeyValueRequestProps,
 ): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> => {

frontend/src/api/routingPolicies/createRoutingPolicy.ts

@@ -15,6 +15,13 @@ export interface CreateRoutingPolicyResponse {
 	message: string;
 }
 
+/**
+ * @deprecated Use the generated `useCreateRoutePolicy` hook (or `createRoutePolicy` fetcher) from
+ * `api/generated/services/routepolicies` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const createRoutingPolicy = async (
 	props: CreateRoutingPolicyBody,
 ): Promise<

frontend/src/api/routingPolicies/deleteRoutingPolicy.ts

@@ -8,6 +8,13 @@ export interface DeleteRoutingPolicyResponse {
 	message: string;
 }
 
+/**
+ * @deprecated Use the generated `useDeleteRoutePolicyByID` hook (or `deleteRoutePolicyByID` fetcher) from
+ * `api/generated/services/routepolicies` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const deleteRoutingPolicy = async (
 	routingPolicyId: string,
 ): Promise<

frontend/src/api/routingPolicies/getRoutingPolicies.ts

@@ -20,6 +20,13 @@ export interface GetRoutingPoliciesResponse {
 	data?: ApiRoutingPolicy[];
 }
 
+/**
+ * @deprecated Use the generated `useGetAllRoutePolicies` hook (or `getAllRoutePolicies` fetcher) from
+ * `api/generated/services/routepolicies` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 export const getRoutingPolicies = async (
 	signal?: AbortSignal,
 	headers?: Record<string, string>,

frontend/src/api/routingPolicies/updateRoutingPolicy.ts

@@ -15,6 +15,13 @@ export interface UpdateRoutingPolicyResponse {
 	message: string;
 }
 
+/**
+ * @deprecated Use the generated `useUpdateRoutePolicy` hook (or `updateRoutePolicy` fetcher) from
+ * `api/generated/services/routepolicies` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const updateRoutingPolicy = async (
 	id: string,
 	props: UpdateRoutingPolicyBody,

frontend/src/api/trace/getTraceV4.tsx

@@ -1,15 +1,14 @@
-import { ApiV3Instance as axios } from 'api';
-import { omit } from 'lodash-es';
+import { getWaterfallV4 } from 'api/generated/services/tracedetail';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
-	GetTraceV3PayloadProps,
-	GetTraceV3SuccessResponse,
+	GetTraceV4PayloadProps,
+	GetTraceV4SuccessResponse,
 	SpanV3,
 } from 'types/api/trace/getTraceV3';
 
-const getTraceV3 = async (
-	props: GetTraceV3PayloadProps,
-): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
+const getTraceV4 = async (
+	props: GetTraceV4PayloadProps,
+): Promise<SuccessResponse<GetTraceV4SuccessResponse> | ErrorResponse> => {
 	let uncollapsedSpans = [...props.uncollapsedSpans];
 	if (!props.isSelectedSpanIDUnCollapsed) {
 		uncollapsedSpans = uncollapsedSpans.filter(
@@ -19,31 +18,36 @@ const getTraceV3 = async (
 		props.selectedSpanId &&
 		!uncollapsedSpans.includes(props.selectedSpanId)
 	) {
-		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
+		// Backend only uses the uncollapsedSpans list (unlike V2 which also interprets
 		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
 		uncollapsedSpans.push(props.selectedSpanId);
 	}
-	const postData: GetTraceV3PayloadProps = {
-		...props,
-		uncollapsedSpans,
-		limit: 10000,
-	};
-	const response = await axios.post<GetTraceV3SuccessResponse>(
-		`/traces/${props.traceId}/waterfall`,
-		omit(postData, 'traceId'),
+	const response = await getWaterfallV4(
+		{ traceID: props.traceId },
+		{
+			selectedSpanId: props.selectedSpanId,
+			uncollapsedSpans,
+		},
 	);
 
-	// V3 API wraps response in { status, data }
-	const rawPayload = (response.data as any).data || response.data;
+	// 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 };
 
 	// Derive 'service.name' from resource for convenience — only derived field
-	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
+	const spans: SpanV3[] = (rawPayload.spans || []).map((span) => ({
 		...span,
 		'service.name': span.resource?.['service.name'] || '',
 		timestamp: span.time_unix,
 	}));
 
-	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
+	// 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;
@@ -70,4 +74,4 @@ const getTraceV3 = async (
 	};
 };
 
-export default getTraceV3;
+export default getTraceV4;

frontend/src/api/v1/factor_password/resetPassword.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/user/resetPassword';
 
+/**
+ * @deprecated Use the generated `useResetPassword` hook (or `resetPassword` fetcher) from
+ * `api/generated/services/users` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const resetPassword = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/v1/invite/bulk/create.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { UsersProps } from 'types/api/user/inviteUsers';
 
+/**
+ * @deprecated Use the generated `useCreateBulkInvite` hook (or `createBulkInvite` fetcher) from
+ * `api/generated/services/users` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const inviteUsers = async (
 	users: UsersProps,
 ): Promise<SuccessResponseV2<null>> => {

frontend/src/api/v1/invite/create.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/user/setInvite';
 
+/**
+ * @deprecated Use the generated `useCreateInvite` hook (or `createInvite` fetcher) from
+ * `api/generated/services/users` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const sendInvite = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/v1/org/preferences/list.ts

@@ -5,6 +5,13 @@ import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps } from 'types/api/preferences/list';
 import { OrgPreference } from 'types/api/preferences/preference';
 
+/**
+ * @deprecated Use the generated `useListOrgPreferences` hook (or `listOrgPreferences` fetcher) from
+ * `api/generated/services/preferences` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const listPreference = async (): Promise<
 	SuccessResponseV2<OrgPreference[]>
 > => {

frontend/src/api/v1/org/preferences/name/update.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { Props } from 'types/api/preferences/update';
 
+/**
+ * @deprecated Use the generated `useUpdateOrgPreference` hook (or `updateOrgPreference` fetcher) from
+ * `api/generated/services/preferences` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const update = async (props: Props): Promise<SuccessResponseV2<null>> => {
 	try {
 		const response = await axios.put(`/org/preferences/${props.name}`, {

frontend/src/api/v1/user/preferences/list.ts

@@ -5,6 +5,13 @@ import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps } from 'types/api/preferences/list';
 import { UserPreference } from 'types/api/preferences/preference';
 
+/**
+ * @deprecated Use the generated `useListUserPreferences` hook (or `listUserPreferences` fetcher) from
+ * `api/generated/services/preferences` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const list = async (): Promise<SuccessResponseV2<UserPreference[]>> => {
 	try {
 		const response = await axios.get<PayloadProps>(`/user/preferences`);

frontend/src/api/v1/user/preferences/name/get.ts

@@ -5,6 +5,13 @@ import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/preferences/get';
 import { UserPreference } from 'types/api/preferences/preference';
 
+/**
+ * @deprecated Use the generated `useGetUserPreference` hook (or `getUserPreference` fetcher) from
+ * `api/generated/services/preferences` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const get = async (
 	props: Props,
 ): Promise<SuccessResponseV2<UserPreference>> => {

frontend/src/api/v1/user/preferences/name/update.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { Props } from 'types/api/preferences/update';
 
+/**
+ * @deprecated Use the generated `useUpdateUserPreference` hook (or `updateUserPreference` fetcher) from
+ * `api/generated/services/preferences` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const update = async (props: Props): Promise<SuccessResponseV2<null>> => {
 	try {
 		const response = await axios.put(`/user/preferences/${props.name}`, {

frontend/src/api/v2/sessions/context/get.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
 import { Props, SessionsContext } from 'types/api/v2/sessions/context/get';
 
+/**
+ * @deprecated Use the generated `useGetSessionContext` hook (or `getSessionContext` fetcher) from
+ * `api/generated/services/sessions` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const get = async (
 	props: Props,
 ): Promise<SuccessResponseV2<SessionsContext>> => {

frontend/src/api/v2/sessions/delete.ts

@@ -3,6 +3,13 @@ import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
 import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
 
+/**
+ * @deprecated Use the generated `useDeleteSession` hook (or `deleteSession` fetcher) from
+ * `api/generated/services/sessions` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const deleteSession = async (): Promise<SuccessResponseV2<null>> => {
 	try {
 		const response = await axios.delete<RawSuccessResponse<null>>('/sessions');

frontend/src/api/v2/sessions/email_password/post.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
 import { Props, Token } from 'types/api/v2/sessions/email_password/post';
 
+/**
+ * @deprecated Use the generated `useCreateSessionByEmailPassword` hook (or `createSessionByEmailPassword` fetcher) from
+ * `api/generated/services/sessions` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const post = async (props: Props): Promise<SuccessResponseV2<Token>> => {
 	try {
 		const response = await axios.post<RawSuccessResponse<Token>>(

frontend/src/api/v2/sessions/rotate/post.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
 import { Props, Token } from 'types/api/v2/sessions/rotate/post';
 
+/**
+ * @deprecated Use the generated `useRotateSession` hook (or `rotateSession` fetcher) from
+ * `api/generated/services/sessions` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const post = async (props: Props): Promise<SuccessResponseV2<Token>> => {
 	try {
 		const response = await axios.post<RawSuccessResponse<Token>>(

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

@@ -8,6 +8,13 @@ import {
 	QueryRangePayloadV5,
 } from 'types/api/v5/queryRange';
 
+/**
+ * @deprecated Use the generated `useQueryRangeV5` hook (or `queryRangeV5` fetcher) from
+ * `api/generated/services/querier` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 export const getQueryRangeV5 = async (
 	props: QueryRangePayloadV5,
 	version: string,

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 cx from 'classnames';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 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,26 +31,33 @@ 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">
-			<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>
+			{type === 'tooltip' ? (
+				<TooltipSimple title={t('refreshPaymentStatus')}>{button}</TooltipSimple>
+			) : (
+				button
+			)}
 		</span>
 	);
 }
 RefreshPaymentStatus.defaultProps = {
-	btnShape: 'default',
 	type: 'button',
+	className: undefined,
 };
 
 export default RefreshPaymentStatus;

frontend/src/constants/reactQueryKeys.ts

@@ -33,7 +33,8 @@ 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_V3_WATERFALL: 'GET_TRACE_V3_WATERFALL',
+	GET_TRACE_V4_WATERFALL: 'GET_TRACE_V4_WATERFALL',
+	GET_TRACE_AGGREGATIONS: 'GET_TRACE_AGGREGATIONS',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',

frontend/src/container/AIAssistant/events.ts

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

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

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

@@ -1,70 +0,0 @@
-.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 \(billing period to date\)/i,
+			name: /cost/i,
 		});
 		expect(cost).toBeInTheDocument();
 

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,12 +1,11 @@
+import { Callout } from '@signozhq/ui/callout';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
-import { CircleCheck, CloudDownload } from '@signozhq/icons';
-import { Color } from '@signozhq/design-tokens';
+import { CircleCheck, Landmark, MonitorDown } from '@signozhq/icons';
 import {
-	Alert,
-	Button,
 	Card,
 	Col,
 	Flex,
@@ -16,7 +15,10 @@ import {
 	TableColumnsType as ColumnsType,
 } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
-import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
+import getUsage, {
+	BreakdownEntry,
+	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';
@@ -29,7 +31,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEmpty, pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
@@ -38,7 +40,7 @@ import CancelSubscriptionBanner from './CancelSubscriptionBanner';
 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
 import { prepareCsvData } from './BillingUsageGraph/utils';
 
-import './BillingContainer.styles.scss';
+import styles from './BillingContainer.module.scss';
 import { LicenseState } from 'types/api/licensesV3/getActive';
 
 interface DataType {
@@ -115,7 +117,7 @@ const dummyColumns: ColumnsType<DataType> = [
 		render: renderSkeletonInput,
 	},
 	{
-		title: 'Cost (Billing period to date)',
+		title: 'Cost',
 		dataIndex: 'cost',
 		key: 'cost',
 		render: renderSkeletonInput,
@@ -130,7 +132,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<any[]>([]);
+	const [data, setData] = useState<DataType[]>([]);
 	const [apiResponse, setApiResponse] = useState<
 		Partial<UsageResponsePayloadProps>
 	>({});
@@ -150,7 +152,7 @@ export default function BillingContainer(): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
 	const processUsageData = useCallback(
-		(data: any): void => {
+		(data: SuccessResponse<UsageResponsePayloadProps> | ErrorResponse): void => {
 			if (isEmpty(data?.payload)) {
 				return;
 			}
@@ -158,27 +160,23 @@ export default function BillingContainer(): JSX.Element {
 				details: { breakdown = [], billTotal },
 				billingPeriodStart,
 				billingPeriodEnd,
-			} = data?.payload || {};
-			const formattedUsageData: any[] = [];
+			} = (data as SuccessResponse<UsageResponsePayloadProps>).payload;
+			const formattedUsageData: DataType[] = [];
 
 			if (breakdown && Array.isArray(breakdown)) {
 				for (let index = 0; index < breakdown.length; index += 1) {
-					const element = breakdown[index];
+					const element: BreakdownEntry = breakdown[index];
 
-					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}`,
-							});
-						},
-					);
+					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}`,
+						});
+					});
 				}
 			}
 
@@ -251,16 +249,19 @@ 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 (Billing period to date)',
+			title: 'Cost',
 			dataIndex: 'cost',
 			key: 'cost',
+			align: 'right',
 		},
 	];
 
@@ -345,23 +346,6 @@ 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 `}
@@ -415,12 +399,12 @@ export default function BillingContainer(): JSX.Element {
 		trialInfo?.gracePeriodEnd;
 
 	return (
-		<div className="billing-container">
-			<Flex vertical style={{ marginBottom: 16 }}>
-				<Typography.Text style={{ fontWeight: 500, fontSize: 18 }}>
+		<div className={styles.billingContainer}>
+			<Flex vertical gap={4} className={styles.pageHeader}>
+				<Typography.Text className={styles.pageHeaderTitle}>
 					{t('billing')}
 				</Typography.Text>
-				<Typography.Text color="muted">
+				<Typography.Text className={styles.pageHeaderSubtitle}>
 					{t('manage_billing_and_costs')}
 				</Typography.Text>
 			</Flex>
@@ -428,50 +412,36 @@ export default function BillingContainer(): JSX.Element {
 			<Card
 				bordered={false}
 				style={{ minHeight: 150, marginBottom: 16 }}
-				className="page-info"
+				className={styles.pageInfo}
 			>
 				<Flex justify="space-between" align="center">
-					<Flex vertical>
-						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
+					<Flex vertical gap={8}>
+						<p className={styles.pageInfoTitle}>
 							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
 							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
-						</Typography.Title>
+						</p>
 
 						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (
-							<Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}>
+							<p className={styles.pageInfoSubtitle}>
 								{daysRemaining} {daysRemainingStr}
-							</Typography.Text>
+							</p>
 						) : null}
 					</Flex>
-					<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>
+					<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>
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
@@ -485,8 +455,8 @@ export default function BillingContainer(): JSX.Element {
 
 				{!isLoading && !isFetchingBillingData && !showGracePeriodMessage
 					? headerText && (
-							<Alert
-								message={headerText}
+							<Callout
+								title={headerText}
 								type="info"
 								showIcon
 								style={{ marginTop: 12 }}
@@ -503,8 +473,8 @@ export default function BillingContainer(): JSX.Element {
 				billingData &&
 				trialInfo?.gracePeriodEnd &&
 				showGracePeriodMessage ? (
-					<Alert
-						message={`Your data is safe with us until ${getFormattedDate(
+					<Callout
+						title={`Your data is safe with us until ${getFormattedDate(
 							trialInfo?.gracePeriodEnd || Date.now(),
 						)}. Please upgrade plan now to retain your data.`}
 						type="info"
@@ -515,26 +485,69 @@ export default function BillingContainer(): JSX.Element {
 
 				{isSubscriptionPastDue &&
 					(!isLoading && !isFetchingBillingData ? (
-						<Alert
-							message={subscriptionPastDueMessage()}
-							type="error"
-							showIcon
-							style={{ marginTop: 12 }}
-						/>
+						<Callout type="error" showIcon style={{ marginTop: 12 }}>
+							{subscriptionPastDueMessage()}
+						</Callout>
 					) : (
 						<Skeleton.Input active style={{ height: 20, marginTop: 20 }} />
 					))}
 			</Card>
 
-			<BillingUsageGraphCallback />
+			<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>
+			)}
 
-			<div className="billing-details">
+			<div className={styles.billingDetails}>
 				{!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}`}
+										/>
+									);
+								},
+							},
+						}}
 					/>
 				)}
 
@@ -546,7 +559,7 @@ export default function BillingContainer(): JSX.Element {
 			)}
 
 			{!trialInfo?.trialConvertedToSubscription && (
-				<div className="upgrade-plan-benefits">
+				<div className={styles.upgradePlanBenefits}>
 					<Row
 						justify="space-between"
 						align="middle"
@@ -555,16 +568,16 @@ export default function BillingContainer(): JSX.Element {
 						}}
 						gutter={[16, 16]}
 					>
-						<Col span={20} className="plan-benefits">
-							<Typography.Text className="plan-benefit">
+						<Col span={20} className={styles.planBenefits}>
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								{t('upgrade_now_text')}
 							</Typography.Text>
-							<Typography.Text className="plan-benefit">
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								{t('Your billing will start only after the trial period')}
 							</Typography.Text>
-							<Typography.Text className="plan-benefit">
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								<span>
 									{t('checkout_plans')} &nbsp;
@@ -583,9 +596,10 @@ export default function BillingContainer(): JSX.Element {
 						</Col>
 						<Col span={4} style={{ display: 'flex', justifyContent: 'flex-end' }}>
 							<Button
-								data-testid="upgrade-plan-button"
-								type="primary"
-								size="middle"
+								testId="upgrade-plan-button"
+								variant="solid"
+								color="primary"
+								size="md"
 								loading={isLoadingBilling || isLoadingManageBilling}
 								onClick={handleBilling}
 							>

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

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

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

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

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

@@ -1,23 +0,0 @@
-.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,221 +1,146 @@
-import { useMemo, useRef } from 'react';
-import { Color } from '@signozhq/design-tokens';
+import { useCallback, useMemo, useRef } from 'react';
 import { Card, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import Uplot from 'components/Uplot';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-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 { 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 { BillingBarChartTooltip } from './BillingBarChartTooltip';
+import { prepareBillingBarConfig } from './prepareBillingBarConfig';
+import {
+	calculateStartEndTime,
 	convertDataToMetricRangePayload,
 	fillMissingValuesForQuantities,
 } from './utils';
 
-import './BillingUsageGraph.styles.scss';
-import '../../../lib/uPlotLib/uPlotLib.styles.scss';
+import styles from './BillingUsageGraph.module.scss';
 
 interface BillingUsageGraphProps {
-	data: any;
+	data: Partial<UsageResponsePayloadProps>;
 	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 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 };
-};
+const numberFormatter = new Intl.NumberFormat('en-US');
 
 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);
 
-	const { startTime, endTime } = useMemo(
-		() => calculateStartEndTime(data),
-		[data],
-	);
-
-	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 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,
+	// 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],
+						},
+					};
 				}),
-			],
-		}),
-		[
-			axesOptions,
-			chartData,
-			containerDimensions.height,
-			containerDimensions.width,
-			endTime,
-			graphCompatibleData,
-			isDarkMode,
-			startTime,
-			uPlotSeries,
-		],
+			},
+		};
+	}, [data]);
+
+	const graphCompatibleData = useMemo(
+		() => convertDataToMetricRangePayload(normalizedData),
+		[normalizedData],
 	);
 
-	const numberFormatter = new Intl.NumberFormat('en-US');
+	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],
+	);
+
+	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 renderBillingTooltip = useCallback(
+		(args: TooltipRenderArgs) => (
+			<BillingBarChartTooltip billingApiResponse={filledApiResponse} {...args} />
+		),
+		[filledApiResponse],
+	);
 
 	return (
-		<Card bordered={false} className="billing-graph-card">
+		<Card bordered={false} className={styles.billingGraphCard}>
 			<Flex justify="space-between">
 				<Flex vertical gap={6}>
-					<Typography.Text className="total-spent-title">
+					<Typography.Text className={styles.totalSpentTitle}>
 						TOTAL SPENT
 					</Typography.Text>
-					<Typography.Text className="total-spent">
+					<Typography.Text className={styles.totalSpent}>
 						${numberFormatter.format(billAmount)}
 					</Typography.Text>
 				</Flex>
 			</Flex>
-			<div ref={graphRef} style={{ height: '100%', paddingBottom: 48 }}>
-				<Uplot data={chartData} options={optionsForChart} />
+			<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>
 		</Card>
 	);

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

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

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

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

@@ -0,0 +1,71 @@
+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 { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 import { isEmpty, isNull } from 'lodash-es';
 import { unparse } from 'papaparse';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -29,23 +29,25 @@ 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 };
-	});
+	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 sortedData = payload.sort((a: any, b: any) => {
 		const sumA = a.values.reduce((acc: any, val: any) => acc + val[1], 0);
@@ -120,11 +122,40 @@ export function prepareCsvData(data: Partial<UsageResponsePayloadProps>): {
 	fileName: string;
 } {
 	const graphCompatibleData = convertDataToMetricRangePayload(data);
-	const chartData = getUPlotChartData(graphCompatibleData);
-	const quantityMapArr = quantityDataArr(graphCompatibleData, chartData[0]);
+	const chartData = prepareChartData(graphCompatibleData);
+	const quantityMapArr = quantityDataArr(
+		graphCompatibleData,
+		chartData[0] as number[],
+	);
 
 	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/BillingContainer/CancelSubscriptionBanner.module.scss

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

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

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

frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx

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

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

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

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

@@ -0,0 +1,67 @@
+.pieChartWrapper {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+}
+
+.pieChartNoData {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	font-size: 14px;
+}
+
+// Size is set inline from the computed chart dimensions (mirrors the uPlot
+// chart/legend split); this just centres the donut within that box.
+.pieChartContainer {
+	flex: 0 0 auto;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.pieChartTooltip {
+	padding: 8px 12px;
+	border-radius: 4px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+	background-color: var(--l2-background) !important;
+	border: 1px solid var(--l2-border) !important;
+	z-index: 9999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.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

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

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

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

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

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

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

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

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

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

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