fix(alerts): improve contrast and l1/l2/l3 background colors

* fix(authn): include base path in SSO callback and error-redirect URLs

The SAML ACS URL and the OIDC/Google redirect URLs were built from the
site URL host plus a hardcoded path (e.g. /api/v1/complete/saml), dropping
the base path. When SigNoz is served under a sub-path (global.external_url
with a path, e.g. https://example.com/signoz), the API is served at
<prefix>/api/v1/complete/<provider>, so the identity provider was told to
call back to a path without the prefix and hit a 404.

Thread global.Config into the SAML/OIDC/Google callback providers and the
session handler, and prepend global.Config.ExternalPath() to the callback
paths and the SSO error redirect to /login. Root deployments are
unchanged since ExternalPath() returns "" without a configured sub-path.

* fix(authn): run callbackauthn suite with base path

* refactor(tests): self-contained base-path fixture for callbackauthn

Move the base-path setup out of the shared create_signoz factory and into
a package-scoped signoz fixture in the callbackauthn suite's own conftest
(same pattern as rootuser/conftest.py). When --base-path is set the fixture
appends SIGNOZ_GLOBAL_EXTERNAL__URL and the url-config prefix locally;
without it it behaves exactly like the global fixture. The shared factory
and docker config are left untouched.

* test(authn): add base-path SSO integration suite

Adds a dedicated `basepath` integration suite that serves SigNoz under a
hardcoded /signoz prefix (SIGNOZ_GLOBAL_EXTERNAL__URL) and exercises the SAML
and OIDC happy-path logins end-to-end. Every SigNoz API call is issued under
the prefix and the IdP callback (ACS / redirect URI) is registered with the
prefix, so the flow only passes when the backend builds prefixed callback URLs.

The shared TestContainerUrlConfig and create_signoz factory are left untouched.
The suite's conftest shadows the same-named auth fixtures (create_user_admin,
get_token, get_session_context, apply_license) with base-path-aware variants and
reuses the Keycloak/browser fixtures, which are not under the base path.

Google SSO is not covered: it requires the real accounts.google.com issuer and
a real Google login, so it cannot run against the local Keycloak IdP; it shares
the identical path.Join(ExternalPath, redirectPath) callback logic that SAML
and OIDC validate.

* revert: drop in-place base-path wiring from integration harness

Removes the --base-path flag, TestContainerUrlConfig.base_path, the idp.py and
02_saml.py .get() changes, and the callbackauthn base-path conftest fixture.
Base-path SSO is now covered by the dedicated `basepath` suite, so the shared
harness (TestContainerUrlConfig, create_signoz, callbackauthn) is back to its
original root-only form.

* refactor(test): remove apply_license fixture

* refactor(test): extract base-path-aware auth factories

Extract the session-context / token / token-pair / admin-registration logic
in fixtures/auth.py into reusable factory functions that take an optional
base_path (token_getter, session_context_getter, tokens_getter, register_admin),
with the fixtures delegating to them. Default base_path="" is byte-identical for
existing callers.

The basepath suite's conftest now reuses these factories with the /signoz prefix
as thin one-line fixture overrides instead of duplicating the request logic.

* refactor(test): give base-path admin registration a distinct cache key

register_admin takes an optional cache_key (default "create_user_admin"); the
basepath suite passes a distinct key so that under --reuse the admin marker
cached against the signoz-base-path container is not restored for (or from)
other suites' default signoz instance.

.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

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

.github/workflows/gor-signoz.yaml

@@ -35,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,6 +39,7 @@ jobs:
       matrix:
         suite:
           - alerts
+          - basepath
           - callbackauthn
           - cloudintegrations
           - dashboard
@@ -83,7 +84,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

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
 			}

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.127.1
     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.127.1
     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.127.1}
     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.127.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -96,6 +96,19 @@ components:
       - createdAt
       - updatedAt
       type: object
+    AlertmanagertypesGoogleChatReceiverConfig:
+      properties:
+        http_config:
+          $ref: '#/components/schemas/ConfigHTTPClientConfig'
+        send_resolved:
+          type: boolean
+        text:
+          type: string
+        title:
+          type: string
+        webhook_url:
+          $ref: '#/components/schemas/ConfigSecretURL'
+      type: object
     AlertmanagertypesMaintenanceKind:
       enum:
       - fixed
@@ -147,6 +160,8 @@ components:
       type: object
     AlertmanagertypesPostableChannel:
       oneOf:
+      - required:
+        - googlechat_configs
       - required:
         - discord_configs
       - required:
@@ -192,6 +207,10 @@ components:
           items:
             $ref: '#/components/schemas/ConfigEmailConfig'
           type: array
+        googlechat_configs:
+          items:
+            $ref: '#/components/schemas/AlertmanagertypesGoogleChatReceiverConfig'
+          type: array
         incidentio_configs:
           items:
             $ref: '#/components/schemas/ConfigIncidentioConfig'
@@ -305,6 +324,87 @@ components:
       - channels
       - name
       type: object
+    AlertmanagertypesReceiver:
+      properties:
+        discord_configs:
+          items:
+            $ref: '#/components/schemas/ConfigDiscordConfig'
+          type: array
+        email_configs:
+          items:
+            $ref: '#/components/schemas/ConfigEmailConfig'
+          type: array
+        googlechat_configs:
+          items:
+            $ref: '#/components/schemas/AlertmanagertypesGoogleChatReceiverConfig'
+          type: array
+        incidentio_configs:
+          items:
+            $ref: '#/components/schemas/ConfigIncidentioConfig'
+          type: array
+        jira_configs:
+          items:
+            $ref: '#/components/schemas/ConfigJiraConfig'
+          type: array
+        mattermost_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMattermostConfig'
+          type: array
+        msteams_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMSTeamsConfig'
+          type: array
+        msteamsv2_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMSTeamsV2Config'
+          type: array
+        name:
+          type: string
+        opsgenie_configs:
+          items:
+            $ref: '#/components/schemas/ConfigOpsGenieConfig'
+          type: array
+        pagerduty_configs:
+          items:
+            $ref: '#/components/schemas/ConfigPagerdutyConfig'
+          type: array
+        pushover_configs:
+          items:
+            $ref: '#/components/schemas/ConfigPushoverConfig'
+          type: array
+        rocketchat_configs:
+          items:
+            $ref: '#/components/schemas/ConfigRocketchatConfig'
+          type: array
+        slack_configs:
+          items:
+            $ref: '#/components/schemas/ConfigSlackConfig'
+          type: array
+        sns_configs:
+          items:
+            $ref: '#/components/schemas/ConfigSNSConfig'
+          type: array
+        telegram_configs:
+          items:
+            $ref: '#/components/schemas/ConfigTelegramConfig'
+          type: array
+        victorops_configs:
+          items:
+            $ref: '#/components/schemas/ConfigVictorOpsConfig'
+          type: array
+        webex_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWebexConfig'
+          type: array
+        webhook_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWebhookConfig'
+          type: array
+        wechat_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWechatConfig'
+          type: array
+      type: object
     AlertmanagertypesRecurrence:
       properties:
         duration:
@@ -870,14 +970,6 @@ components:
       - timestampMillis
       - data
       type: object
-    CloudintegrationtypesAssets:
-      properties:
-        dashboards:
-          items:
-            $ref: '#/components/schemas/CloudintegrationtypesDashboard'
-          nullable: true
-          type: array
-      type: object
     CloudintegrationtypesAzureAccountConfig:
       properties:
         deploymentRegion:
@@ -1025,17 +1117,6 @@ components:
       - ingestionUrl
       - ingestionKey
       type: object
-    CloudintegrationtypesDashboard:
-      properties:
-        definition:
-          $ref: '#/components/schemas/DashboardtypesStorableDashboardData'
-        description:
-          type: string
-        id:
-          type: string
-        title:
-          type: string
-      type: object
     CloudintegrationtypesDataCollected:
       properties:
         logs:
@@ -1209,7 +1290,7 @@ components:
     CloudintegrationtypesService:
       properties:
         assets:
-          $ref: '#/components/schemas/CloudintegrationtypesAssets'
+          $ref: '#/components/schemas/CloudintegrationtypesServiceAssets'
         cloudIntegrationService:
           $ref: '#/components/schemas/CloudintegrationtypesCloudIntegrationService'
         dataCollected:
@@ -1222,8 +1303,6 @@ components:
           type: string
         supportedSignals:
           $ref: '#/components/schemas/CloudintegrationtypesSupportedSignals'
-        telemetryCollectionStrategy:
-          $ref: '#/components/schemas/CloudintegrationtypesTelemetryCollectionStrategy'
         title:
           type: string
       required:
@@ -1234,9 +1313,17 @@ components:
       - assets
       - supportedSignals
       - dataCollected
-      - telemetryCollectionStrategy
       - cloudIntegrationService
       type: object
+    CloudintegrationtypesServiceAssets:
+      properties:
+        dashboards:
+          items:
+            $ref: '#/components/schemas/CloudintegrationtypesServiceDashboard'
+          type: array
+      required:
+      - dashboards
+      type: object
     CloudintegrationtypesServiceConfig:
       properties:
         aws:
@@ -1244,6 +1331,18 @@ components:
         azure:
           $ref: '#/components/schemas/CloudintegrationtypesAzureServiceConfig'
       type: object
+    CloudintegrationtypesServiceDashboard:
+      properties:
+        description:
+          type: string
+        integrationDashboard:
+          $ref: '#/components/schemas/CloudintegrationtypesStorableIntegrationDashboard'
+        title:
+          type: string
+      required:
+      - title
+      - description
+      type: object
     CloudintegrationtypesServiceID:
       enum:
       - alb
@@ -1278,6 +1377,30 @@ components:
       - icon
       - enabled
       type: object
+    CloudintegrationtypesStorableIntegrationDashboard:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        dashboardId:
+          type: string
+        id:
+          type: string
+        provider:
+          type: string
+        slug:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      - dashboardId
+      - provider
+      - slug
+      - createdAt
+      - updatedAt
+      type: object
     CloudintegrationtypesSupportedSignals:
       properties:
         logs:
@@ -1285,13 +1408,6 @@ components:
         metrics:
           type: boolean
       type: object
-    CloudintegrationtypesTelemetryCollectionStrategy:
-      properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
-        azure:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureTelemetryCollectionStrategy'
-      type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
@@ -1849,83 +1965,6 @@ components:
         user_key_file:
           type: string
       type: object
-    ConfigReceiver:
-      properties:
-        discord_configs:
-          items:
-            $ref: '#/components/schemas/ConfigDiscordConfig'
-          type: array
-        email_configs:
-          items:
-            $ref: '#/components/schemas/ConfigEmailConfig'
-          type: array
-        incidentio_configs:
-          items:
-            $ref: '#/components/schemas/ConfigIncidentioConfig'
-          type: array
-        jira_configs:
-          items:
-            $ref: '#/components/schemas/ConfigJiraConfig'
-          type: array
-        mattermost_configs:
-          items:
-            $ref: '#/components/schemas/ConfigMattermostConfig'
-          type: array
-        msteams_configs:
-          items:
-            $ref: '#/components/schemas/ConfigMSTeamsConfig'
-          type: array
-        msteamsv2_configs:
-          items:
-            $ref: '#/components/schemas/ConfigMSTeamsV2Config'
-          type: array
-        name:
-          type: string
-        opsgenie_configs:
-          items:
-            $ref: '#/components/schemas/ConfigOpsGenieConfig'
-          type: array
-        pagerduty_configs:
-          items:
-            $ref: '#/components/schemas/ConfigPagerdutyConfig'
-          type: array
-        pushover_configs:
-          items:
-            $ref: '#/components/schemas/ConfigPushoverConfig'
-          type: array
-        rocketchat_configs:
-          items:
-            $ref: '#/components/schemas/ConfigRocketchatConfig'
-          type: array
-        slack_configs:
-          items:
-            $ref: '#/components/schemas/ConfigSlackConfig'
-          type: array
-        sns_configs:
-          items:
-            $ref: '#/components/schemas/ConfigSNSConfig'
-          type: array
-        telegram_configs:
-          items:
-            $ref: '#/components/schemas/ConfigTelegramConfig'
-          type: array
-        victorops_configs:
-          items:
-            $ref: '#/components/schemas/ConfigVictorOpsConfig'
-          type: array
-        webex_configs:
-          items:
-            $ref: '#/components/schemas/ConfigWebexConfig'
-          type: array
-        webhook_configs:
-          items:
-            $ref: '#/components/schemas/ConfigWebhookConfig'
-          type: array
-        wechat_configs:
-          items:
-            $ref: '#/components/schemas/ConfigWechatConfig'
-          type: array
-      type: object
     ConfigRocketchatAttachmentAction:
       properties:
         image_url:
@@ -2380,6 +2419,26 @@ components:
         repeatVariable:
           type: string
       type: object
+    DashboardLink:
+      properties:
+        name:
+          type: string
+        renderVariables:
+          type: boolean
+        targetBlank:
+          type: boolean
+        tooltip:
+          type: string
+        url:
+          type: string
+      type: object
+    DashboardPanelDisplay:
+      properties:
+        description:
+          type: string
+        name:
+          type: string
+      type: object
     DashboardTextVariableSpec:
       properties:
         constant:
@@ -2510,7 +2569,7 @@ components:
           type: array
         links:
           items:
-            $ref: '#/components/schemas/V1Link'
+            $ref: '#/components/schemas/DashboardLink'
           type: array
         panels:
           additionalProperties:
@@ -2671,8 +2730,8 @@ components:
       type: object
     DashboardtypesLayout:
       oneOf:
-      - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec'
-    DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec:
+      - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec'
+    DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec:
       properties:
         kind:
           enum:
@@ -2755,7 +2814,7 @@ components:
     DashboardtypesPanel:
       properties:
         kind:
-          type: string
+          $ref: '#/components/schemas/DashboardtypesPanelKind'
         spec:
           $ref: '#/components/schemas/DashboardtypesPanelSpec'
       type: object
@@ -2766,6 +2825,10 @@ components:
         unit:
           type: string
       type: object
+    DashboardtypesPanelKind:
+      enum:
+      - Panel
+      type: string
     DashboardtypesPanelPlugin:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -2872,10 +2935,10 @@ components:
     DashboardtypesPanelSpec:
       properties:
         display:
-          $ref: '#/components/schemas/V1PanelDisplay'
+          $ref: '#/components/schemas/DashboardPanelDisplay'
         links:
           items:
-            $ref: '#/components/schemas/V1Link'
+            $ref: '#/components/schemas/DashboardLink'
           type: array
         plugin:
           $ref: '#/components/schemas/DashboardtypesPanelPlugin'
@@ -2948,7 +3011,7 @@ components:
     DashboardtypesQuery:
       properties:
         kind:
-          type: string
+          $ref: '#/components/schemas/Querybuildertypesv5RequestType'
         spec:
           $ref: '#/components/schemas/DashboardtypesQuerySpec'
       type: object
@@ -3216,8 +3279,8 @@ components:
     DashboardtypesVariable:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpec'
-    DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpec:
+      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+    DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
       properties:
         kind:
           enum:
@@ -7235,26 +7298,6 @@ components:
       required:
       - id
       type: object
-    V1Link:
-      properties:
-        name:
-          type: string
-        renderVariables:
-          type: boolean
-        targetBlank:
-          type: boolean
-        tooltip:
-          type: string
-        url:
-          type: string
-      type: object
-    V1PanelDisplay:
-      properties:
-        description:
-          type: string
-        name:
-          type: string
-      type: object
     VariableDefaultValue:
       type: object
     VariableDisplay:
@@ -7671,7 +7714,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ConfigReceiver'
+              $ref: '#/components/schemas/AlertmanagertypesReceiver'
       responses:
         "204":
           description: No Content
@@ -7722,7 +7765,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ConfigReceiver'
+              $ref: '#/components/schemas/AlertmanagertypesReceiver'
       responses:
         "204":
           description: No Content
@@ -8087,7 +8130,139 @@ paths:
       summary: Update account
       tags:
       - cloudintegration
+  /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services:
+    get:
+      deprecated: false
+      description: This endpoint lists the services metadata for the specified account
+        and cloud provider
+      operationId: ListAccountServicesMetadata
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableServicesMetadata'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: List account services metadata
+      tags:
+      - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}:
+    get:
+      deprecated: false
+      description: This endpoint gets a service and its configuration for the specified
+        cloud integration account
+      operationId: GetAccountService
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: service_id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/CloudintegrationtypesService'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get service for account
+      tags:
+      - cloudintegration
     put:
       deprecated: false
       description: This endpoint updates a service for the specified cloud provider
@@ -12328,7 +12503,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ConfigReceiver'
+              $ref: '#/components/schemas/AlertmanagertypesReceiver'
       responses:
         "204":
           description: No Content

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
-}

frontend/.oxlintrc.json

@@ -291,8 +291,6 @@
     // Prevents the usage of specific antd components in favor of our lib
     "signoz/no-signozhq-ui-barrel": "error",
     // Forces subpath imports (@signozhq/ui/<component>) instead of the eagerly-loaded barrel
-    "signoz/no-css-module-bracket-access": "warn",
-    // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
     "no-restricted-globals": [
       "error",
       {

frontend/.stylelintrc.cjs

@@ -2,33 +2,9 @@
 const path = require('path');
 
 module.exports = {
-	plugins: [
-		path.join(__dirname, 'stylelint-rules/no-unsupported-asset-url.js'),
-		path.join(__dirname, 'stylelint-rules/css-modules/no-deep-nesting.js'),
-		path.join(__dirname, 'stylelint-rules/css-modules/no-id-selectors.js'),
-		path.join(
-			__dirname,
-			'stylelint-rules/css-modules/no-bare-element-selectors.js',
-		),
-		path.join(__dirname, 'stylelint-rules/css-modules/prefer-css-variables.js'),
-		path.join(__dirname, 'stylelint-rules/css-modules/class-name-pattern.js'),
-	],
+	plugins: [path.join(__dirname, 'stylelint-rules/no-unsupported-asset-url.js')],
 	customSyntax: 'postcss-scss',
 	rules: {
-		// Applies to all SCSS files
 		'local/no-unsupported-asset-url': true,
 	},
-	overrides: [
-		{
-			// CSS module-specific rules
-			files: ['**/*.module.scss'],
-			rules: {
-				'local/no-deep-nesting': [true, { severity: 'warning' }],
-				'local/no-id-selectors': true,
-				'local/no-bare-element-selectors': true,
-				'local/prefer-css-variables': [true, { severity: 'warning' }],
-				'local/class-name-pattern': [true, { severity: 'warning' }],
-			},
-		},
-	],
 };

frontend/AGENTS.md

@@ -23,8 +23,6 @@ You are operating within a constrained context window and strict system prompts.
 - Always add data-testid or testId (if supported) to critical/behavioral components like inputs, buttons, etc...
   - When creating test, these IDs should be used instead of finding by role.
 - Never create barrel files.
-- When writing new css, prefer CSS Modules
-  - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
 
 3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:
 - Run `pnpm tsgo --noEmit`

frontend/docs/css-modules-guide.md

@@ -1,471 +0,0 @@
-# CSS Modules Guide for AI Agents
-
-## Config (vite.config.ts)
-
-```ts
-css: {
-  modules: {
-    localsConvention: 'camelCaseOnly',
-  },
-}
-```
-
-**Critical:** `camelCaseOnly` exports ONLY camelCase keys. Original kebab-case NOT accessible.
-
-## Quick Reference
-
-| CSS Class | JS Access | Works? |
-|-----------|-----------|--------|
-| `.alertHistory` | `styles.alertHistory` | Yes |
-| `.alert-history` | `styles.alertHistory` | Yes |
-| `.alert-history` | `styles['alert-history']` | NO - undefined |
-
-## Bad Patterns
-
-### Class Naming
-
-```scss
-// BAD: Bracket access won't work
-.my-class { }
-// Then in JS: styles['my-class'] -> undefined
-
-// BAD: Collision - both become same key
-.alertHistory { }
-.alert-history { }  // -> styles.alertHistory (conflicts)
-
-// BAD: Underscore inconsistency
-.my_class { }  // -> styles.myClass (confusing)
-
-// GOOD: Direct camelCase
-.alertHistory { }
-.statsCard { }
-```
-
-### Nesting
-
-```scss
-// BAD: Deep nesting - specificity wars, hard to override
-.container {
-  .wrapper {
-    .inner {
-      .content { }
-    }
-  }
-}
-
-// BAD: Nesting creates separate classes you might not expect
-.button {
-  .icon { }  // -> styles.icon (separate class, not scoped under .button)
-}
-
-// GOOD: Flat structure
-.container { }
-.containerWrapper { }
-.containerContent { }
-
-// GOOD: Nesting only for pseudo/states
-.button {
-  &:hover { }
-  &:disabled { }
-  &::before { }
-}
-```
-
-### Global Escapes
-
-```scss
-// BAD: Overusing global
-:global {
-  .everything { }
-  .in-here { }
-  .is-global { }
-}
-
-// BAD: Global without necessity
-:global(.myComponent) { }  // defeats purpose of modules
-
-// GOOD: Targeted global for third-party overrides
-.container {
-  :global(.ant-modal-content) {
-    padding: 0;
-  }
-}
-```
-
-### Selectors
-
-```scss
-// BAD: ID selectors - not reusable
-#myComponent { }
-
-// BAD: Element selectors without scope
-div { }  // affects ALL divs in component
-
-// BAD: Complex selectors
-.container > div + span ~ p { }
-
-// GOOD: Class-only selectors
-.container { }
-.title { }
-```
-
-### Variables & Values
-
-```scss
-// BAD: Hardcoded colors
-.button {
-  background: #1890ff;
-  color: white;
-}
-
-// BAD: Magic numbers
-.container {
-  padding: 17px;
-  margin-left: 43px;
-}
-
-// GOOD: Semantic tokens (theme-aware)
-.button {
-  background: var(--primary-background);
-  color: var(--primary-foreground);
-}
-
-.card {
-  background: var(--l2-background);
-  color: var(--l2-foreground);
-}
-
-// GOOD: Spacing system
-.container {
-  padding: var(--spacing-4);
-  margin-left: var(--spacing-5);
-}
-```
-
-## Design Tokens (@signozhq/design-tokens)
-
-Prefer semantic tokens over hardcoded values.
-
-You can read the ./node_modules/@signozhq/design-tokens/dist/style.css to find complete list of available tokens.
-
-### Spacing
-
-```scss
-// Spacing scale (index -> px):
-// --spacing-0=0    --spacing-1=2    --spacing-2=4    --spacing-3=6    --spacing-4=8
-// --spacing-5=10   --spacing-6=12   --spacing-7=14   --spacing-8=16   --spacing-10=20
-// --spacing-12=24  --spacing-16=32  --spacing-20=40  --spacing-24=48  --spacing-32=64
-// --spacing-40=80  --spacing-48=96  --spacing-56=112 --spacing-64=128
-// (index != px; --spacing-2 is 4px, not 2px)
-.container {
-  padding: var(--spacing-4);      // 8px
-  gap: var(--spacing-6);          // 12px
-  margin-bottom: var(--spacing-8); // 16px
-}
-
-// Also available: --padding-* and --margin-* (rem-based)
-// --padding-1 = 0.25rem, --padding-4 = 1rem, etc.
-```
-
-### Typography
-
-```scss
-// Font sizes (preferred)
-.title {
-  font-size: var(--periscope-font-size-large);   // 18px
-  font-size: var(--periscope-font-size-medium);  // 16px
-  font-size: var(--periscope-font-size-base);    // 13px
-  font-size: var(--periscope-font-size-small);   // 11px
-}
-
-// Alternative scale (rem-based)
-.heading {
-  font-size: var(--font-size-xl);  // 1.25rem
-  font-size: var(--font-size-lg);  // 1.125rem
-  font-size: var(--font-size-base); // 1rem
-  font-size: var(--font-size-sm);  // 0.875rem
-}
-
-// Font weights
-.bold {
-  font-weight: var(--font-weight-semibold); // 600
-  font-weight: var(--font-weight-medium);   // 500
-  font-weight: var(--font-weight-normal);   // 400
-}
-
-// Line heights
-.text {
-  line-height: var(--line-height-20); // 20px
-  line-height: var(--line-height-24); // 24px
-}
-```
-
-### Colors (Prefer Semantic Tokens)
-
-Use L1/L2/L3 semantic tokens - they handle light/dark theme automatically.
-
-```scss
-// BAD: Primitive tokens (fixed value across themes, won't swap on theme change)
-.card {
-  background: var(--bg-ink-400);
-  color: var(--text-vanilla-100);
-}
-
-// GOOD: L1/L2/L3 tokens (theme-aware - swap automatically light/dark)
-.card {
-  background: var(--l1-background);  // base layer
-  color: var(--l1-foreground);       // primary text
-}
-
-.panel {
-  background: var(--l2-background);  // elevated surface
-  color: var(--l2-foreground);       // secondary text
-  border-color: var(--l2-border);
-}
-
-.nested {
-  background: var(--l3-background);  // nested/inset
-  color: var(--l3-foreground);       // tertiary text
-}
-
-// Hover states
-.card:hover {
-  background: var(--l1-background-hover);
-  color: var(--l1-foreground-hover);
-}
-
-// Semantic action colors (also theme-aware)
-.primary {
-  background: var(--primary-background);
-  color: var(--primary-foreground);
-}
-
-.danger {
-  background: var(--danger-background);
-  color: var(--danger-foreground);
-}
-
-.success {
-  background: var(--success-background);
-  color: var(--success-foreground);
-}
-
-.warning {
-  background: var(--warning-background);
-  color: var(--warning-foreground);
-}
-
-// Accent colors (for highlights, badges, etc.)
-.accent {
-  background: var(--accent-primary);        // robin blue
-  background: var(--accent-forest);         // green
-  background: var(--accent-cherry);         // red
-  background: var(--accent-amber);          // yellow
-}
-```
-
-**Token hierarchy:**
-- Primitive tokens (`--bg-*`, `--text-*`, etc.) have fixed values across themes.
-- Semantic tokens (L1/L2/L3, `--primary-*`, `--danger-*`, etc.) automatically swap based on theme.
-- L1 = base/root layer
-- L2 = elevated surfaces (cards, panels)
-- L3 = nested/inset elements
-
-## Overriding @signozhq/ui Components
-
-Components expose CSS variables for customization.
-
-You can ensure they exist by looking at ./node_modules/@signozhq/ui/dist.
-Never write a override without confirm it exists.
-
-Override via:
-
-### Method 1: CSS Variables (Preferred)
-
-Each component exposes `--<component>-<property>` variables:
-
-```scss
-// Override Button
-.customButton {
-  --button-background: var(--success-background);
-  --button-border-radius: var(--radius-2);
-  --button-padding: var(--spacing-4) var(--spacing-8);
-  --button-font-size: var(--periscope-font-size-base);
-}
-
-// Override Input
-.customInput {
-  --input-height: 2.5rem;
-  --input-border-color: var(--l2-border);
-  --input-padding: var(--spacing-2) var(--spacing-6);
-  --input-placeholder-color: var(--l3-foreground);
-}
-
-// Override nested parts
-.customInput {
-  --input-prefix-padding: 0 var(--spacing-4) 0 var(--spacing-6);
-  --input-suffix-color: var(--accent-primary);
-}
-```
-
-### Method 2: Data Attributes
-
-Components use data attributes for variants/states. Target them for state-specific overrides:
-
-```scss
-// Target variant
-.wrapper :global([data-variant="outlined"]) {
-  --button-border-color: var(--accent-primary);
-}
-
-// Target size
-.wrapper :global([data-size="sm"]) {
-  --button-font-size: var(--periscope-font-size-small);
-}
-
-// Target color
-.wrapper :global([data-color="destructive"]) {
-  --button-background: var(--danger-background);
-}
-
-// Target state (Radix patterns)
-.popover :global([data-state="open"]) {
-  opacity: 1;
-}
-
-.tooltip :global([data-side="top"]) {
-  margin-bottom: var(--spacing-2);
-}
-```
-
-### Common Component CSS Variables
-
-**Button:**
-- `--button-background`, `--button-border-radius`, `--button-padding`
-- `--button-font-size`, `--button-height`, `--button-gap`
-- `--button-hover-background`, `--button-disabled-opacity`
-
-**Input:**
-- `--input-height`, `--input-border-color`, `--input-background`
-- `--input-padding`, `--input-font-size`, `--input-placeholder-color`
-- `--input-focus-outline-color`, `--input-hover-border-color`
-- `--input-prefix-*`, `--input-suffix-*` for adornments
-
-**General pattern:** `--<component>-<property>` or `--<component>-<state>-<property>`
-
-## Good Patterns
-
-### Structure
-
-```scss
-// Flat, descriptive, component-scoped
-.alertHistory { }
-.alertHistoryHeader { }
-.alertHistoryContent { }
-.alertHistoryFooter { }
-
-// State modifiers as separate classes
-.alertHistory { }
-.alertHistoryLoading { }
-.alertHistoryEmpty { }
-.alertHistoryError { }
-```
-
-### Composition
-
-```scss
-// GOOD: Composing styles
-.baseButton {
-  padding: var(--spacing-2) var(--spacing-4);
-  border-radius: var(--radius-2);
-}
-
-.primaryButton {
-  composes: baseButton;
-  background: var(--primary-background);
-}
-```
-
-### Pseudo Elements
-
-```scss
-.button {
-  // States
-  &:hover { opacity: 0.9; }
-  &:focus { outline: 2px solid var(--ring); outline-offset: 2px; }
-  &:disabled { opacity: 0.5; cursor: not-allowed; }
-
-  // Pseudo elements
-  &::before { content: ''; }
-  &::after { content: ''; }
-}
-```
-
-### Media Queries
-
-```scss
-.container {
-  display: flex;
-  flex-direction: column;
-  
-  @media (min-width: 768px) {
-    flex-direction: row;
-  }
-}
-```
-
-## JS Import Patterns
-
-```tsx
-// GOOD
-import styles from './Component.module.scss';
-
-<div className={styles.container}>
-  <span className={styles.title}>Title</span>
-</div>
-
-// GOOD: Conditional classes
-<div className={`${styles.button} ${isActive ? styles.buttonActive : ''}`}>
-
-// GOOD: With clsx/classnames
-<div className={clsx(styles.button, { [styles.buttonActive]: isActive })}>
-
-// BAD: Bracket access (may be undefined)
-<div className={styles['button-active']}>  // undefined if CSS has .button-active
-
-// BAD: String interpolation for class names
-<div className={`${styles.button}-active`}>  // won't work
-```
-
-## Checklist Before Committing
-
-- [ ] All class names use camelCase in CSS
-- [ ] No bracket access (`styles['...']`) in JS unless verified
-- [ ] No deep class nesting (max 3 class levels; pseudo-classes/elements and parent-reference selectors like `&.active`, `&#bar` are not counted)
-- [ ] No hardcoded colors - use `--l1/l2/l3-*` semantic tokens (not `--bg-*` primitives)
-- [ ] No magic numbers - use `--spacing-*` tokens
-- [ ] Typography uses `--periscope-font-size-*` or `--font-size-*` tokens
-- [ ] @signozhq/ui overrides use CSS variables, not direct class overrides
-- [ ] Global escapes only for third-party overrides
-- [ ] No ID selectors
-- [ ] No bare element selectors
-
-## Lint Rules
-
-### JS/TS (oxlint)
-
-| Rule | Severity | Catches |
-|------|----------|---------|
-| `signoz/no-css-module-bracket-access` | warn | `styles['kebab-case']`, dynamic access |
-
-### CSS/SCSS (stylelint)
-
-| Rule | Severity | Catches |
-|------|----------|---------|
-| `local/no-deep-nesting` | warning | class nesting >3 levels (pseudo-classes/elements and parent-reference selectors `&.foo`, `&#bar` not counted; configurable via `maxDepth` secondary option) |
-| `local/no-id-selectors` | error | `#id` selectors |
-| `local/no-bare-element-selectors` | error | root-level `div`, `span` etc |
-| `local/prefer-css-variables` | warning | hardcoded colors |
-| `local/class-name-pattern` | warning | kebab-case, snake_case, PascalCase |
-
-Run: `pnpm lint:styles` to check CSS modules.

frontend/plugins/rules/no-css-module-bracket-access.mjs

@@ -1,144 +0,0 @@
-/**
- * Rule: no-css-module-bracket-access
- *
- * Prevents bracket access on CSS module imports that may fail with camelCaseOnly config.
- *
- * With Vite's `localsConvention: 'camelCaseOnly'`, kebab-case class names are
- * converted to camelCase and the original key is NOT exported.
- *
- * This rule catches patterns like:
- *   styles['my-class']     // BAD - undefined if CSS has .my-class
- *   styles['myClass']      // OK but prefer dot notation
- *   styles.myClass         // GOOD
- *
- * Catches:
- * - Bracket access with kebab-case strings (always fails)
- * - Bracket access with any string literal (warn - prefer dot notation)
- * - Dynamic bracket access (warn - risky)
- */
-
-const CSS_MODULE_IMPORT_NAMES = new Set([
-	'styles',
-	'classes',
-	'css',
-	'classNames',
-]);
-
-function looksLikeCssModuleImport(name) {
-	// Common patterns: styles, componentStyles, alertHistoryStyles
-	return (
-		CSS_MODULE_IMPORT_NAMES.has(name) ||
-		name.endsWith('Styles') ||
-		name.endsWith('Classes') ||
-		name.endsWith('Css')
-	);
-}
-
-function isKebabCase(str) {
-	return str.includes('-');
-}
-
-function isSnakeCase(str) {
-	return str.includes('_');
-}
-
-export default {
-	create(context) {
-		return {
-			MemberExpression(node) {
-				// Only check bracket notation: styles['...']
-				if (!node.computed) {
-					return;
-				}
-
-				const object = node.object;
-				if (object.type !== 'Identifier') {
-					return;
-				}
-
-				// Check if this looks like a CSS module import
-				if (!looksLikeCssModuleImport(object.name)) {
-					return;
-				}
-
-				const property = node.property;
-
-				// Dynamic access: styles[variable]
-				if (property.type === 'Identifier') {
-					context.report({
-						node,
-						message: `Dynamic CSS module access '${object.name}[${property.name}]' is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Use dot notation or verify the key exists.`,
-					});
-					return;
-				}
-
-				// Template literal: styles[\`...\`]
-				if (property.type === 'TemplateLiteral') {
-					context.report({
-						node,
-						message: `Template literal CSS module access is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Prefer dot notation.`,
-					});
-					return;
-				}
-
-				// Numeric / boolean / null literal: styles[0]. Not a class lookup; ignore.
-				if (property.type === 'Literal' && typeof property.value !== 'string') {
-					return;
-				}
-
-				// String literal: styles['...']
-				if (property.type === 'Literal' && typeof property.value === 'string') {
-					const className = property.value;
-
-					// Kebab-case will definitely fail
-					if (isKebabCase(className)) {
-						context.report({
-							node,
-							message: `CSS module class '${className}' uses kebab-case which won't work with 'camelCaseOnly' config. Use '${object.name}.${toCamelCase(className)}' instead.`,
-						});
-						return;
-					}
-
-					// Snake_case is suspicious
-					if (isSnakeCase(className)) {
-						context.report({
-							node,
-							message: `CSS module class '${className}' uses snake_case which may not work as expected. Prefer camelCase: '${object.name}.${toCamelCase(className)}'.`,
-						});
-						return;
-					}
-
-					// Valid camelCase but using bracket notation - prefer dot
-					if (/^[a-z][a-zA-Z0-9]*$/.test(className)) {
-						context.report({
-							node,
-							message: `Prefer dot notation: '${object.name}.${className}' instead of '${object.name}['${className}']'.`,
-						});
-					}
-					return;
-				}
-
-				// Catch-all for other dynamic expressions:
-				//   styles['prefix' + suffix]   (BinaryExpression)
-				//   styles[isActive && 'foo']   (LogicalExpression)
-				//   styles[isActive ? 'a' : 'b'] (ConditionalExpression)
-				//   styles[fn()]                (CallExpression)
-				context.report({
-					node,
-					message: `Dynamic CSS module access on '${object.name}' is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Use dot notation or verify each key resolves to an exported camelCase class.`,
-				});
-			},
-		};
-	},
-};
-
-function toCamelCase(str) {
-	return str
-		.split(/[-_]/)
-		.map((part, i) =>
-			i === 0
-				? part.toLowerCase()
-				: part.charAt(0).toUpperCase() + part.slice(1).toLowerCase(),
-		)
-		.join('');
-}

frontend/plugins/signoz.mjs

@@ -11,7 +11,6 @@ import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs'
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
-import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
 
 export default {
 	meta: {
@@ -24,6 +23,5 @@ export default {
 		'no-raw-absolute-path': noRawAbsolutePath,
 		'no-antd-components': noAntdComponents,
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
-		'no-css-module-bracket-access': noCssModuleBracketAccess,
 	},
 };

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/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/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/sigNoz.schemas.ts

@@ -134,113 +134,6 @@ export interface AlertmanagertypesGettableRoutePolicyDTO {
 	updatedBy?: string | null;
 }
 
-export enum AlertmanagertypesMaintenanceKindDTO {
-	fixed = 'fixed',
-	recurring = 'recurring',
-}
-export enum AlertmanagertypesMaintenanceStatusDTO {
-	active = 'active',
-	upcoming = 'upcoming',
-	expired = 'expired',
-}
-export enum AlertmanagertypesRepeatOnDTO {
-	sunday = 'sunday',
-	monday = 'monday',
-	tuesday = 'tuesday',
-	wednesday = 'wednesday',
-	thursday = 'thursday',
-	friday = 'friday',
-	saturday = 'saturday',
-}
-export enum AlertmanagertypesRepeatTypeDTO {
-	daily = 'daily',
-	weekly = 'weekly',
-	monthly = 'monthly',
-}
-export interface AlertmanagertypesRecurrenceDTO {
-	/**
-	 * @type string
-	 */
-	duration: string;
-	/**
-	 * @type string,null
-	 * @format date-time
-	 */
-	endTime?: string | null;
-	/**
-	 * @type array,null
-	 */
-	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
-	repeatType: AlertmanagertypesRepeatTypeDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime: string;
-}
-
-export interface AlertmanagertypesScheduleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	endTime?: string;
-	recurrence?: AlertmanagertypesRecurrenceDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime?: string;
-	/**
-	 * @type string
-	 */
-	timezone: string;
-}
-
-export interface AlertmanagertypesPlannedMaintenanceDTO {
-	/**
-	 * @type array,null
-	 */
-	alertIds?: string[] | null;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	kind: AlertmanagertypesMaintenanceKindDTO;
-	/**
-	 * @type string
-	 */
-	name: string;
-	schedule: AlertmanagertypesScheduleDTO;
-	/**
-	 * @type string
-	 */
-	scope?: string;
-	status: AlertmanagertypesMaintenanceStatusDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
 export interface ConfigAuthorizationDTO {
 	/**
 	 * @type string
@@ -475,6 +368,130 @@ export interface ConfigSecretURLDTO {
 	[key: string]: unknown;
 }
 
+export interface AlertmanagertypesGoogleChatReceiverConfigDTO {
+	http_config?: ConfigHTTPClientConfigDTO;
+	/**
+	 * @type boolean
+	 */
+	send_resolved?: boolean;
+	/**
+	 * @type string
+	 */
+	text?: string;
+	/**
+	 * @type string
+	 */
+	title?: string;
+	webhook_url?: ConfigSecretURLDTO;
+}
+
+export enum AlertmanagertypesMaintenanceKindDTO {
+	fixed = 'fixed',
+	recurring = 'recurring',
+}
+export enum AlertmanagertypesMaintenanceStatusDTO {
+	active = 'active',
+	upcoming = 'upcoming',
+	expired = 'expired',
+}
+export enum AlertmanagertypesRepeatOnDTO {
+	sunday = 'sunday',
+	monday = 'monday',
+	tuesday = 'tuesday',
+	wednesday = 'wednesday',
+	thursday = 'thursday',
+	friday = 'friday',
+	saturday = 'saturday',
+}
+export enum AlertmanagertypesRepeatTypeDTO {
+	daily = 'daily',
+	weekly = 'weekly',
+	monthly = 'monthly',
+}
+export interface AlertmanagertypesRecurrenceDTO {
+	/**
+	 * @type string
+	 */
+	duration: string;
+	/**
+	 * @type string,null
+	 * @format date-time
+	 */
+	endTime?: string | null;
+	/**
+	 * @type array,null
+	 */
+	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
+	repeatType: AlertmanagertypesRepeatTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	startTime: string;
+}
+
+export interface AlertmanagertypesScheduleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	endTime?: string;
+	recurrence?: AlertmanagertypesRecurrenceDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	startTime?: string;
+	/**
+	 * @type string
+	 */
+	timezone: string;
+}
+
+export interface AlertmanagertypesPlannedMaintenanceDTO {
+	/**
+	 * @type array,null
+	 */
+	alertIds?: string[] | null;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	kind: AlertmanagertypesMaintenanceKindDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
+	status: AlertmanagertypesMaintenanceStatusDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
 export interface ConfigDiscordConfigDTO {
 	/**
 	 * @type string
@@ -1634,6 +1651,10 @@ export type AlertmanagertypesPostableChannelDTO = unknown & {
 	 * @type array
 	 */
 	email_configs?: ConfigEmailConfigDTO[];
+	/**
+	 * @type array
+	 */
+	googlechat_configs?: AlertmanagertypesGoogleChatReceiverConfigDTO[];
 	/**
 	 * @type array
 	 */
@@ -1748,6 +1769,89 @@ export interface AlertmanagertypesPostableRoutePolicyDTO {
 	tags?: string[] | null;
 }
 
+export interface AlertmanagertypesReceiverDTO {
+	/**
+	 * @type array
+	 */
+	discord_configs?: ConfigDiscordConfigDTO[];
+	/**
+	 * @type array
+	 */
+	email_configs?: ConfigEmailConfigDTO[];
+	/**
+	 * @type array
+	 */
+	googlechat_configs?: AlertmanagertypesGoogleChatReceiverConfigDTO[];
+	/**
+	 * @type array
+	 */
+	incidentio_configs?: ConfigIncidentioConfigDTO[];
+	/**
+	 * @type array
+	 */
+	jira_configs?: ConfigJiraConfigDTO[];
+	/**
+	 * @type array
+	 */
+	mattermost_configs?: ConfigMattermostConfigDTO[];
+	/**
+	 * @type array
+	 */
+	msteams_configs?: ConfigMSTeamsConfigDTO[];
+	/**
+	 * @type array
+	 */
+	msteamsv2_configs?: ConfigMSTeamsV2ConfigDTO[];
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type array
+	 */
+	opsgenie_configs?: ConfigOpsGenieConfigDTO[];
+	/**
+	 * @type array
+	 */
+	pagerduty_configs?: ConfigPagerdutyConfigDTO[];
+	/**
+	 * @type array
+	 */
+	pushover_configs?: ConfigPushoverConfigDTO[];
+	/**
+	 * @type array
+	 */
+	rocketchat_configs?: ConfigRocketchatConfigDTO[];
+	/**
+	 * @type array
+	 */
+	slack_configs?: ConfigSlackConfigDTO[];
+	/**
+	 * @type array
+	 */
+	sns_configs?: ConfigSNSConfigDTO[];
+	/**
+	 * @type array
+	 */
+	telegram_configs?: ConfigTelegramConfigDTO[];
+	/**
+	 * @type array
+	 */
+	victorops_configs?: ConfigVictorOpsConfigDTO[];
+	/**
+	 * @type array
+	 */
+	webex_configs?: ConfigWebexConfigDTO[];
+	/**
+	 * @type array
+	 */
+	webhook_configs?: ConfigWebhookConfigDTO[];
+	/**
+	 * @type array
+	 */
+	wechat_configs?: ConfigWechatConfigDTO[];
+}
+
 export interface AuthtypesAttributeMappingDTO {
 	/**
 	 * @type string
@@ -2457,33 +2561,6 @@ export interface CloudintegrationtypesAccountDTO {
 	updatedAt?: string;
 }
 
-export interface DashboardtypesStorableDashboardDataDTO {
-	[key: string]: unknown;
-}
-
-export interface CloudintegrationtypesDashboardDTO {
-	definition?: DashboardtypesStorableDashboardDataDTO;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	id?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-}
-
-export interface CloudintegrationtypesAssetsDTO {
-	/**
-	 * @type array,null
-	 */
-	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
-}
-
 export interface CloudintegrationtypesAzureConnectionArtifactDTO {
 	/**
 	 * @type string
@@ -2866,6 +2943,54 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	providerAccountId?: string;
 }
 
+export interface CloudintegrationtypesStorableIntegrationDashboardDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt: string;
+	/**
+	 * @type string
+	 */
+	dashboardId: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	provider: string;
+	/**
+	 * @type string
+	 */
+	slug: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt: string;
+}
+
+export interface CloudintegrationtypesServiceDashboardDTO {
+	/**
+	 * @type string
+	 */
+	description: string;
+	integrationDashboard?: CloudintegrationtypesStorableIntegrationDashboardDTO;
+	/**
+	 * @type string
+	 */
+	title: string;
+}
+
+export interface CloudintegrationtypesServiceAssetsDTO {
+	/**
+	 * @type array
+	 */
+	dashboards: CloudintegrationtypesServiceDashboardDTO[];
+}
+
 export interface CloudintegrationtypesSupportedSignalsDTO {
 	/**
 	 * @type boolean
@@ -2877,13 +3002,8 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 	metrics?: boolean;
 }
 
-export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
-	aws?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
-	azure?: CloudintegrationtypesAzureTelemetryCollectionStrategyDTO;
-}
-
 export interface CloudintegrationtypesServiceDTO {
-	assets: CloudintegrationtypesAssetsDTO;
+	assets: CloudintegrationtypesServiceAssetsDTO;
 	cloudIntegrationService: CloudintegrationtypesCloudIntegrationServiceDTO | null;
 	dataCollected: CloudintegrationtypesDataCollectedDTO;
 	/**
@@ -2899,7 +3019,6 @@ export interface CloudintegrationtypesServiceDTO {
 	 */
 	overview: string;
 	supportedSignals: CloudintegrationtypesSupportedSignalsDTO;
-	telemetryCollectionStrategy: CloudintegrationtypesTelemetryCollectionStrategyDTO;
 	/**
 	 * @type string
 	 */
@@ -2944,85 +3063,6 @@ export interface CommonJSONRefDTO {
 	$ref?: string;
 }
 
-export interface ConfigReceiverDTO {
-	/**
-	 * @type array
-	 */
-	discord_configs?: ConfigDiscordConfigDTO[];
-	/**
-	 * @type array
-	 */
-	email_configs?: ConfigEmailConfigDTO[];
-	/**
-	 * @type array
-	 */
-	incidentio_configs?: ConfigIncidentioConfigDTO[];
-	/**
-	 * @type array
-	 */
-	jira_configs?: ConfigJiraConfigDTO[];
-	/**
-	 * @type array
-	 */
-	mattermost_configs?: ConfigMattermostConfigDTO[];
-	/**
-	 * @type array
-	 */
-	msteams_configs?: ConfigMSTeamsConfigDTO[];
-	/**
-	 * @type array
-	 */
-	msteamsv2_configs?: ConfigMSTeamsV2ConfigDTO[];
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type array
-	 */
-	opsgenie_configs?: ConfigOpsGenieConfigDTO[];
-	/**
-	 * @type array
-	 */
-	pagerduty_configs?: ConfigPagerdutyConfigDTO[];
-	/**
-	 * @type array
-	 */
-	pushover_configs?: ConfigPushoverConfigDTO[];
-	/**
-	 * @type array
-	 */
-	rocketchat_configs?: ConfigRocketchatConfigDTO[];
-	/**
-	 * @type array
-	 */
-	slack_configs?: ConfigSlackConfigDTO[];
-	/**
-	 * @type array
-	 */
-	sns_configs?: ConfigSNSConfigDTO[];
-	/**
-	 * @type array
-	 */
-	telegram_configs?: ConfigTelegramConfigDTO[];
-	/**
-	 * @type array
-	 */
-	victorops_configs?: ConfigVictorOpsConfigDTO[];
-	/**
-	 * @type array
-	 */
-	webex_configs?: ConfigWebexConfigDTO[];
-	/**
-	 * @type array
-	 */
-	webhook_configs?: ConfigWebhookConfigDTO[];
-	/**
-	 * @type array
-	 */
-	wechat_configs?: ConfigWechatConfigDTO[];
-}
-
 export interface CoretypesObjectGroupDTO {
 	resource: CoretypesResourceRefDTO;
 	/**
@@ -3089,6 +3129,40 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
+export interface DashboardLinkDTO {
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type boolean
+	 */
+	renderVariables?: boolean;
+	/**
+	 * @type boolean
+	 */
+	targetBlank?: boolean;
+	/**
+	 * @type string
+	 */
+	tooltip?: string;
+	/**
+	 * @type string
+	 */
+	url?: string;
+}
+
+export interface DashboardPanelDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+}
+
 export interface VariableDisplayDTO {
 	/**
 	 * @type string
@@ -3705,6 +3779,10 @@ export interface DashboardtypesCustomVariableSpecDTO {
 	customValue: string;
 }
 
+export interface DashboardtypesStorableDashboardDataDTO {
+	[key: string]: unknown;
+}
+
 export enum DashboardtypesSourceDTO {
 	user = 'user',
 	system = 'system',
@@ -3786,40 +3864,9 @@ export type DashboardtypesDashboardSpecDTODatasources = {
 	[key: string]: DashboardtypesDatasourceSpecDTO;
 };
 
-export interface V1PanelDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
+export enum DashboardtypesPanelKindDTO {
+	Panel = 'Panel',
 }
-
-export interface V1LinkDTO {
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type boolean
-	 */
-	renderVariables?: boolean;
-	/**
-	 * @type boolean
-	 */
-	targetBlank?: boolean;
-	/**
-	 * @type string
-	 */
-	tooltip?: string;
-	/**
-	 * @type string
-	 */
-	url?: string;
-}
-
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTOKind {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 }
@@ -4061,6 +4108,13 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO;
 
+export enum Querybuildertypesv5RequestTypeDTO {
+	scalar = 'scalar',
+	time_series = 'time_series',
+	raw = 'raw',
+	raw_stream = 'raw_stream',
+	trace = 'trace',
+}
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpecDTOKind {
 	'signoz/BuilderQuery' = 'signoz/BuilderQuery',
 }
@@ -4365,19 +4419,16 @@ export interface DashboardtypesQuerySpecDTO {
 }
 
 export interface DashboardtypesQueryDTO {
-	/**
-	 * @type string
-	 */
-	kind?: string;
+	kind?: Querybuildertypesv5RequestTypeDTO;
 	spec?: DashboardtypesQuerySpecDTO;
 }
 
 export interface DashboardtypesPanelSpecDTO {
-	display?: V1PanelDisplayDTO;
+	display?: DashboardPanelDisplayDTO;
 	/**
 	 * @type array
 	 */
-	links?: V1LinkDTO[];
+	links?: DashboardLinkDTO[];
 	plugin?: DashboardtypesPanelPluginDTO;
 	/**
 	 * @type array
@@ -4386,10 +4437,7 @@ export interface DashboardtypesPanelSpecDTO {
 }
 
 export interface DashboardtypesPanelDTO {
-	/**
-	 * @type string
-	 */
-	kind?: string;
+	kind?: DashboardtypesPanelKindDTO;
 	spec?: DashboardtypesPanelSpecDTO;
 }
 
@@ -4403,20 +4451,20 @@ export type DashboardtypesDashboardSpecDTOPanelsAnyOf = {
 export type DashboardtypesDashboardSpecDTOPanels =
 	DashboardtypesDashboardSpecDTOPanelsAnyOf | null;
 
-export enum DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTOKind {
+export enum DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind {
 	Grid = 'Grid',
 }
-export interface DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTO {
+export interface DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTO {
 	/**
 	 * @enum Grid
 	 * @type string
 	 */
-	kind: DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTOKind;
+	kind: DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind;
 	spec: DashboardGridLayoutSpecDTO;
 }
 
 export type DashboardtypesLayoutDTO =
-	DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTO;
+	DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTO;
 
 export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind {
 	ListVariable = 'ListVariable',
@@ -4520,21 +4568,21 @@ export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDash
 	spec: DashboardtypesListVariableSpecDTO;
 }
 
-export enum DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTOKind {
+export enum DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind {
 	TextVariable = 'TextVariable',
 }
-export interface DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTO {
+export interface DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO {
 	/**
 	 * @enum TextVariable
 	 * @type string
 	 */
-	kind: DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTOKind;
+	kind: DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind;
 	spec: DashboardTextVariableSpecDTO;
 }
 
 export type DashboardtypesVariableDTO =
 	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO
-	| DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTO;
+	| DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO;
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**
@@ -4553,7 +4601,7 @@ export interface DashboardtypesDashboardSpecDTO {
 	/**
 	 * @type array
 	 */
-	links?: V1LinkDTO[];
+	links?: DashboardLinkDTO[];
 	/**
 	 * @type object,null
 	 */
@@ -6935,13 +6983,6 @@ export type Querybuildertypesv5QueryRangeRequestDTOVariables = {
 	[key: string]: Querybuildertypesv5VariableItemDTO;
 };
 
-export enum Querybuildertypesv5RequestTypeDTO {
-	scalar = 'scalar',
-	time_series = 'time_series',
-	raw = 'raw',
-	raw_stream = 'raw_stream',
-	trace = 'trace',
-}
 /**
  * Request body for the v5 query range endpoint. Supports builder queries (traces, logs, metrics), formulas, joins, trace operators, PromQL, and ClickHouse SQL queries.
  */
@@ -8676,6 +8717,31 @@ export type UpdateAccountPathParameters = {
 	cloudProvider: string;
 	id: string;
 };
+export type ListAccountServicesMetadataPathParameters = {
+	cloudProvider: string;
+	id: string;
+};
+export type ListAccountServicesMetadata200 = {
+	data: CloudintegrationtypesGettableServicesMetadataDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetAccountServicePathParameters = {
+	cloudProvider: string;
+	id: string;
+	serviceId: string;
+};
+export type GetAccountService200 = {
+	data: CloudintegrationtypesServiceDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type UpdateServicePathParameters = {
 	cloudProvider: string;
 	id: string;

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,37 @@ 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,
+			limit: 10000,
+		},
 	);
 
-	// 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 +75,4 @@ const getTraceV3 = async (
 	};
 };
 
-export default getTraceV3;
+export default getTraceV4;

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -20,9 +20,9 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-		color: var(--l2-foreground);
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		color: var(--input-with-label-color, var(--l2-foreground));
 
 		display: flex;
 		justify-content: flex-start;
@@ -35,21 +35,54 @@
 		min-width: 150px;
 		font-family: 'Space Mono', monospace !important;
 
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
+		--input-border-radius: 0px;
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		color: var(--input-with-label-color, var(--l2-foreground));
 
-		border-right: none;
-		border-left: none;
-		border-top-right-radius: 0px;
-		border-bottom-right-radius: 0px;
-		border-top-left-radius: 0px;
-		border-bottom-left-radius: 0px;
 		font-size: 12px !important;
-		line-height: 27px;
+		line-height: 25px;
+
+		position: relative;
+
+		&:hover,
+		&:focus {
+			z-index: 1;
+		}
+
+		.ant-select-selector {
+			position: relative;
+			border-radius: inherit;
+		}
+
+		.ant-select:hover .ant-select-selector,
+		.ant-select-focused .ant-select-selector {
+			z-index: 1;
+		}
+
+		&.input__has-label-after {
+			margin-left: -1px;
+
+			.ant-select-selector {
+				margin-left: -1px;
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+		}
+
+		&.input__has-close-button {
+			.ant-select-selector {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			~ .close-btn {
+				margin-left: -1px;
+			}
+		}
 
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--input-with-label-color, var(--l3-foreground)) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -63,25 +96,35 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-		height: 38px;
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		height: 100%;
 		width: 38px;
+		position: relative;
+
+		&:hover,
+		&:focus {
+			z-index: 2;
+		}
 	}
 
 	&.labelAfter {
 		.input {
-			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			border-radius: 2px;
+			border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+			background: var(--input-with-label-background-color, var(--l2-background));
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
+
+			.ant-select-selector {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
 		}
 
 		.label {
 			border-left: none;
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
+			border-radius: 0px 2px 2px 0px;
 		}
 	}
 }

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -45,7 +45,10 @@ function InputWithLabel({
 		>
 			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			<Input
-				className="input"
+				className={cx('input', {
+					'input__has-label-after': !labelAfter,
+					'input__has-close-button': !!onClose,
+				})}
 				placeholder={placeholder}
 				type={type}
 				value={inputValue}

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

@@ -80,8 +80,8 @@
 				width: 1px;
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--l1-border),
-					var(--l1-border) 4px,
+					var(--query-builder-v2-border-color, var(--l2-border)),
+					var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -101,7 +101,8 @@
 					top: 12px;
 					width: 6px;
 					height: 6px;
-					border-left: 6px dotted var(--l1-border);
+					border-left: 6px dotted
+						var(--query-builder-v2-border-color, var(--l2-border));
 				}
 
 				/* Horizontal line pointing from vertical to the item */
@@ -114,8 +115,8 @@
 					height: 1px;
 					background: repeating-linear-gradient(
 						to right,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -241,7 +242,8 @@
 						top: 12px;
 						width: 6px;
 						height: 6px;
-						border-left: 6px dotted var(--l1-border);
+						border-left: 6px dotted
+							var(--query-builder-v2-border-color, var(--l2-border));
 					}
 
 					/* Horizontal line pointing from vertical to the item */
@@ -254,8 +256,8 @@
 						height: 1px;
 						background: repeating-linear-gradient(
 							to right,
-							var(--l1-border),
-							var(--l1-border) 4px,
+							var(--query-builder-v2-border-color, var(--l2-border)),
+							var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 							transparent 4px,
 							transparent 8px
 						);
@@ -273,6 +275,16 @@
 					line-height: 16px; /* 128.571% */
 
 					resize: none;
+
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					);
+					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+
+					&:placeholder {
+						color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
+					}
 				}
 
 				.formula-legend {
@@ -282,15 +294,42 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(--l2-background);
-						color: var(--l2-foreground);
+						background: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						);
+						color: var(--query-builder-v2-color, var(--l2-foreground));
 						font-size: 12px;
 						font-weight: 300;
+
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+						position: relative;
 					}
 
 					.ant-input {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
+
+						height: 36px;
+
+						background-color: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						);
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+
+						position: relative;
+						margin-left: -1px;
+
+						&:hover,
+						&:focus {
+							z-index: 1;
+							border-color: var(--internal-ant-border-color-hover);
+						}
+
+						&:placeholder {
+							color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
+						}
 					}
 				}
 			}
@@ -323,8 +362,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -395,8 +434,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -412,7 +451,7 @@
 				min-width: 120px;
 
 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 				background: var(--l1-background);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
@@ -457,7 +496,7 @@
 
 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border) !important;
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
 			background: var(--l1-background) !important;
 			height: 34px !important;
 			box-sizing: border-box !important;

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -92,6 +92,11 @@
 
 				.ant-select {
 					width: 100%;
+
+					.ant-select-selector {
+						min-height: 36px;
+					}
+
 					.ant-select-selection-search-input {
 						min-width: max-content !important;
 						max-width: 100% !important;
@@ -100,9 +105,12 @@
 
 				.ant-select-selector {
 					border-radius: 2px;
-					border: 1.005px solid var(--l1-border);
-					background: var(--l1-background);
-					color: var(--l1-foreground);
+					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
+					color: var(--query-builder-v2-color, var(--l2-foreground));
 					font-family: 'Geist Mono';
 					font-size: 13px;
 					font-style: normal;
@@ -123,6 +131,7 @@
 					.input {
 						flex: initial;
 						width: 100px !important;
+						min-height: 36px;
 					}
 				}
 			}

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

@@ -8,9 +8,9 @@
 
 	.ant-select-selection-search-input {
 		font-size: 12px !important;
-		line-height: 27px;
+		line-height: 25px;
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 			font-size: 12px !important;
 		}
 	}
@@ -22,9 +22,12 @@
 	.ant-select-selector {
 		width: 100%;
 		border-radius: 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l1-background);
-		color: var(--l1-foreground);
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
+		background-color: var(
+			--query-builder-v2-background-color,
+			var(--l2-background)
+		) !important;
+		color: var(--query-builder-v2-color, var(--l2-foreground));
 		font-family: 'Geist Mono';
 		font-size: 13px;
 		font-style: normal;
@@ -33,36 +36,49 @@
 		min-height: 36px;
 
 		.ant-select-selection-placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(
+				--query-builder-v2-placeholder-color,
+				var(--l3-foreground)
+			) !important;
 			font-size: 12px !important;
 		}
 	}
+}
 
-	.ant-select-dropdown {
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
+.qb-select-popover.ant-select-dropdown {
+	border-radius: 4px;
+	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+	background: var(--query-builder-v2-background-color, var(--l2-background));
+	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+	backdrop-filter: blur(20px);
 
-		.ant-select-item {
-			color: var(--l1-foreground);
-			font-family: 'Geist Mono';
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
+	.ant-select-item {
+		color: var(--query-builder-v2-color, var(--l2-foreground));
+		font-family: 'Geist Mono';
+		font-size: 13px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
 
-			&:hover,
-			&.ant-select-item-option-active {
-				background: var(--l3-background) !important;
-			}
+		&:not(:last-of-type) {
+			margin-bottom: 4px;
+		}
 
-			&.ant-select-item-option-selected {
-				background: var(--l3-background) !important;
-				border: 1px solid var(--l1-border);
-				font-weight: 600;
-			}
+		&:hover,
+		&.ant-select-item-option-active {
+			background: var(
+				--query-builder-v2-selected-background-color,
+				var(--l3-background)
+			) !important;
+		}
+
+		&.ant-select-item-option-selected {
+			background: var(
+				--query-builder-v2-selected-background-color,
+				var(--l3-background)
+			) !important;
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			font-weight: 600;
 		}
 	}
 }

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

@@ -142,6 +142,7 @@ export const MetricsSelect = memo(function MetricsSelect({
 			{signalSourceChangeEnabled && (
 				<Select
 					className="source-selector"
+					popupClassName="qb-select-popover"
 					placeholder="Source"
 					options={SOURCE_OPTIONS}
 					value={source}

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

@@ -1,8 +1,23 @@
-// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
-
 .query-add-ons {
 	width: 100%;
 
+	--toggle-group-secondary-bg: var(
+		--query-builder-v2-toggle-group-background-color,
+		var(--l1-background-hover)
+	);
+	--toggle-group-secondary-border: var(
+		--query-builder-v2-toggle-group-border-color,
+		var(--l2-border)
+	);
+	--toggle-group-secondary-active-bg: var(
+		--query-builder-v2-toggle-group-active-background-color,
+		var(--l1-background)
+	);
+	--toggle-group-secondary-bg-hover: var(
+		--query-builder-v2-toggle-group-background-color-hover,
+		var(--l2-background)
+	);
+
 	.add-on-tab-title {
 		display: flex;
 		align-items: center;
@@ -29,32 +44,33 @@
 			font-style: normal;
 			font-weight: var(--font-weight-normal);
 
-			color: var(--l2-foreground);
+			color: var(--query-builder-v2-color, var(--l2-foreground));
 		}
 
 		> button {
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			border-left: none;
 			min-width: 120px;
 			height: 36px;
 			line-height: 36px;
 
 			&:first-child {
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid
+					var(--query-builder-v2-border-color, var(--l2-border));
 			}
 
 			&::before {
-				background: var(--l1-border);
+				background: var(--query-builder-v2-border-color, var(--l2-border));
 			}
 
 			&[data-state='on'] {
 				color: var(--text-robin-500);
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 
 				display: none;
 
 				&::before {
-					background: var(--l1-border);
+					background: var(--query-builder-v2-border-color, var(--l2-border));
 				}
 			}
 		}
@@ -65,7 +81,7 @@
 		height: 30px;
 
 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 		background: var(--l3-background);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
@@ -78,10 +94,13 @@
 	align-items: center;
 
 	.having-filter-select-container {
+		position: relative;
 		width: 100%;
 		display: flex;
 		flex-direction: row;
-		align-items: center;
+		align-items: flex-start;
+		background: var(--query-builder-v2-background-color, var(--l2-background));
+		padding-right: 38px;
 
 		.having-filter-select-editor {
 			border-radius: 2px;
@@ -106,15 +125,17 @@
 				}
 
 				.cm-content {
-					border-radius: 2px;
-					border: 1px solid var(--l1-border);
-					border-top-right-radius: 0px;
-					border-bottom-right-radius: 0px;
+					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+					border-left-width: 0px;
+					border-right-width: 0px;
 					padding: 0px !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
 
 					&:focus-within {
-						border-color: var(--l1-border);
+						border-color: var(--query-builder-v2-border-color, var(--l2-border));
 					}
 				}
 
@@ -218,17 +239,32 @@
 				}
 
 				.cm-line {
-					line-height: 36px !important;
+					min-height: 34px;
+					line-height: 32px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
+
+					&,
+					.ͼ1a {
+						color: var(--query-builder-v2-color, var(--l2-foreground));
+					}
 
 					::-moz-selection {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}
 
 					::selection {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}
 
@@ -237,8 +273,11 @@
 					}
 
 					.chip-decorator {
-						background: var(--l3-background) !important;
-						color: var(--l1-foreground) !important;
+						background: var(
+							--query-builder-v2-chip-decorator-background-color,
+							var(--l3-background)
+						) !important;
+						color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 						border-radius: 4px;
 						padding: 2px 4px;
 						margin-right: 4px;
@@ -246,34 +285,38 @@
 				}
 
 				.cm-selectionBackground {
-					background: var(--l3-background) !important;
+					background: var(
+						--query-builder-v2-selection-background-color,
+						var(--l3-background)
+					) !important;
 					opacity: 0.5 !important;
 				}
 
 				.cm-activeLine > span {
 					font-size: 12px !important;
 				}
+
+				.cm-placeholder {
+					color: var(
+						--query-builder-v2-placeholder-color,
+						var(--l3-foreground)
+					) !important;
+				}
 			}
 		}
 
 		.close-btn {
+			position: absolute;
+			top: 0;
+			right: 0;
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l2-border);
-			background: var(--l2-background);
-			height: 38px;
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			background: var(--query-builder-v2-background-color, var(--l2-background));
+			height: 100%;
 			width: 38px;
 
-			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
-
-			&:focus:not(:focus-visible),
-			&.ant-btn:focus:not(:focus-visible) {
-				border-color: var(--l2-border);
-				border-left-color: transparent;
-				outline: none;
-				box-shadow: none;
-			}
 		}
 	}
 }
@@ -300,20 +343,8 @@
 			font-size: 12px !important;
 		}
 
-		$add-on-row-height: 38px;
-
-		.periscope-input-with-label {
-			.input {
-				.ant-select {
-					height: $add-on-row-height;
-				}
-			}
-		}
-
-		.input-with-label {
-			.input {
-				height: $add-on-row-height;
-			}
+		input {
+			min-height: 36px;
 		}
 	}
 }

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

@@ -23,7 +23,7 @@
 				flex: 1;
 				min-width: 0;
 				font-size: 12px;
-				color: var(--l2-foreground) !important;
+				color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 
 				&.error {
 					.cm-editor {
@@ -51,14 +51,15 @@
 
 					.cm-content {
 						border-radius: 2px;
-						border: 1px solid var(--l1-border);
-						border-top-right-radius: 0px;
-						border-bottom-right-radius: 0px;
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 						padding: 0px !important;
-						background-color: var(--l1-background) !important;
+						background-color: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						) !important;
 
 						&:focus-within {
-							border-color: var(--l1-border);
+							border-color: var(--query-builder-v2-border-color, var(--l2-border));
 						}
 					}
 
@@ -74,7 +75,7 @@
 						right: 0px !important;
 
 						border-radius: 4px;
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 						background: linear-gradient(
 							139deg,
 							color-mix(in srgb, var(--card) 80%, transparent) 0%,
@@ -118,7 +119,7 @@
 								box-sizing: border-box;
 								overflow: hidden;
 
-								color: var(--l2-foreground) !important;
+								color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 								font-family: 'Space Mono', monospace !important;
 
 								.cm-completionIcon {
@@ -127,7 +128,10 @@
 
 								&:hover,
 								&[aria-selected='true'] {
-									background: var(--l3-background) !important;
+									background: var(
+										--query-builder-v2-selection-background-color,
+										var(--l3-background)
+									) !important;
 									color: var(--l1-foreground) !important;
 									font-weight: 600 !important;
 								}
@@ -142,15 +146,24 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(--l2-background) !important;
+						background-color: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						) !important;
 
 						::-moz-selection {
-							background: var(--l3-background) !important;
+							background: var(
+								--query-builder-v2-selection-background-color,
+								var(--l3-background)
+							) !important;
 							opacity: 0.5 !important;
 						}
 
 						::selection {
-							background: var(--l3-background) !important;
+							background: var(
+								--query-builder-v2-selection-background-color,
+								var(--l3-background)
+							) !important;
 							opacity: 0.5 !important;
 						}
 
@@ -159,8 +172,11 @@
 						}
 
 						.chip-decorator {
-							background: var(--l3-background) !important;
-							color: var(--l1-foreground) !important;
+							background: var(
+								--query-builder-v2-chip-decorator-background-color,
+								var(--l3-background)
+							) !important;
+							color: var(--query-builder-v2-color, var(--l1-foreground)) !important;
 							border-radius: 4px;
 							padding: 2px 4px;
 							margin-right: 4px;
@@ -168,7 +184,10 @@
 					}
 
 					.cm-selectionBackground {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}
 				}
@@ -201,12 +220,11 @@
 
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-background);
-				height: 38px;
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				background: var(--query-builder-v2-background-color, var(--l2-background));
+				height: 100%;
 				width: 38px;
 
-				border-left: transparent;
 				border-top-left-radius: 0px;
 				border-bottom-left-radius: 0px;
 			}
@@ -217,13 +235,13 @@
 			height: 36px;
 			line-height: 36px;
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 			font-family: 'Space Mono', monospace !important;
 
 			&::placeholder {
-				color: var(--l1-foreground);
+				color: var(--query-builder-v2-color, var(--l2-foreground));
 				opacity: 0.5;
 			}
 		}
@@ -238,9 +256,10 @@
 			.query-aggregation-interval-input-container {
 				.query-aggregation-interval-input {
 					input {
+						min-height: 36px;
 						max-width: 120px;
 						&::placeholder {
-							color: var(--l2-foreground);
+							color: var(--query-builder-v2-color, var(--l2-foreground));
 						}
 					}
 				}
@@ -251,8 +270,8 @@
 
 .query-aggregation-error-popover {
 	.ant-popover-inner {
-		background-color: var(--l1-border);
-		border: 1px solid var(--l1-border);
+		background-color: var(--query-builder-v2-border-color, var(--l2-border));
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 		border-radius: 4px;
 		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 	}

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

@@ -1,7 +1,7 @@
 .add-trace-operator-button,
 .add-new-query-button,
 .add-formula-button {
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+	background: var(--query-builder-v2-background-color, var(--l2-background));
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 }

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

@@ -34,11 +34,14 @@
 		.query-status-container {
 			width: 32px;
 
-			background-color: var(--l1-background) !important;
+			background-color: var(
+				--query-builder-v2-background-color,
+				var(--l2-background)
+			) !important;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			border-radius: 2px;
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
@@ -77,16 +80,16 @@
 
 		.cm-content {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			padding: 0px !important;
 
 			&:focus-within {
-				border-color: var(--l1-border);
+				border-color: var(--query-builder-v2-border-color, var(--l2-border));
 			}
 		}
 
 		&.cm-focused {
-			outline: 1px solid var(--l1-border);
+			outline: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 		}
 
 		.cm-tooltip-autocomplete {
@@ -148,11 +151,17 @@
 
 					font-family: 'Space Mono', monospace !important;
 
-					background-color: var(--l1-background) !important;
-					color: var(--l2-foreground) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
+					color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 
 					&:hover {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 					}
 
 					.cm-completionIcon {
@@ -160,7 +169,10 @@
 					}
 
 					&[aria-selected='true'] {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						font-weight: 600 !important;
 					}
 				}
@@ -172,25 +184,49 @@
 		}
 
 		.cm-line {
-			line-height: 34px !important;
+			line-height: 36px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(--l2-background) !important;
+			background-color: var(
+				--query-builder-v2-background-color,
+				var(--l2-background)
+			) !important;
+
+			&,
+			.ͼ1a {
+				color: var(--query-builder-v2-color, var(--l2-foreground));
+			}
 
 			::-moz-selection {
-				background: var(--l3-background) !important;
+				background: var(
+					--query-builder-v2-selection-background-color,
+					var(--l3-background)
+				) !important;
 				opacity: 0.5 !important;
 			}
 
 			::selection {
-				background: var(--l3-background) !important;
+				background: var(
+					--query-builder-v2-selection-background-color,
+					var(--l3-background)
+				) !important;
 				opacity: 0.5 !important;
 			}
 		}
 
 		.cm-selectionBackground {
-			background: var(--l3-background) !important;
+			background: var(
+				--query-builder-v2-selection-background-color,
+				var(--l3-background)
+			) !important;
 			opacity: 0.5 !important;
 		}
+
+		.cm-placeholder {
+			color: var(
+				--query-builder-v2-placeholder-color,
+				var(--l3-foreground)
+			) !important;
+		}
 	}
 
 	.cursor-position {

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

@@ -65,6 +65,14 @@
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
+
+		// Meant to fix the query builder colors
+		--input-background: var(--l2-background);
+		--input-hover-background: var(--l2-background);
+		--input-focus-background: var(--l2-background);
+		--input-border-color: var(--l2-border);
+		--input-hover-border-color: var(--internal-ant-border-color-hover);
+		--input-focus-border-color: var(--internal-ant-border-color-hover);
 	}
 
 	&-aggregation-container {

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/AlertHistory/AlertHistory.module.scss

@@ -1,5 +1,5 @@
-.alert-history {
+.alertHistory {
 	display: flex;
 	flex-direction: column;
-	gap: 24px;
+	gap: var(--spacing-10);
 }

frontend/src/container/AlertHistory/AlertHistory.tsx

@@ -3,13 +3,13 @@ import { useState } from 'react';
 import Statistics from './Statistics/Statistics';
 import Timeline from './Timeline/Timeline';
 
-import './AlertHistory.styles.scss';
+import styles from './AlertHistory.module.scss';
 
 function AlertHistory(): JSX.Element {
 	const [totalCurrentTriggers, setTotalCurrentTriggers] = useState(0);
 
 	return (
-		<div className="alert-history">
+		<div className={styles.alertHistory}>
 			<Statistics
 				totalCurrentTriggers={totalCurrentTriggers}
 				setTotalCurrentTriggers={setTotalCurrentTriggers}

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.module.scss

@@ -0,0 +1,40 @@
+.alertPopoverTriggerAction {
+	cursor: pointer;
+}
+
+.alertHistoryPopover {
+	:global(.ant-popover-inner) {
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background) !important;
+		padding: 0 !important;
+	}
+
+	:global(.ant-popover-arrow) {
+		&::before {
+			background: var(--l1-background);
+		}
+	}
+}
+
+.contributorRowPopoverButtons {
+	display: flex;
+	flex-direction: column;
+}
+
+.contributorRowPopoverButtonsButton {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	padding: var(--spacing-6) var(--spacing-7);
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+	letter-spacing: 0.14px;
+	width: 160px;
+	cursor: pointer;
+	background: var(--l1-background);
+	border-color: var(--l1-border);
+
+	&:hover {
+		background: var(--l2-background);
+	}
+}

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.styles.scss

@@ -1,15 +0,0 @@
-.alert-popover-trigger-action {
-	cursor: pointer;
-}
-
-.alert-history-popover {
-	.ant-popover-inner {
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background) !important;
-	}
-	.ant-popover-arrow {
-		&::before {
-			background: var(--l1-background);
-		}
-	}
-}

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -7,7 +7,7 @@ import ROUTES from 'constants/routes';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { DraftingCompass } from '@signozhq/icons';
 
-import './AlertPopover.styles.scss';
+import styles from './AlertPopover.module.scss';
 
 type Props = {
 	children: React.ReactNode;
@@ -24,30 +24,30 @@ function PopoverContent({
 }): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	return (
-		<div className="contributor-row-popover-buttons">
+		<div className={styles.contributorRowPopoverButtons}>
 			{!!relatedLogsLink && (
 				<Link
 					to={`${ROUTES.LOGS_EXPLORER}?${relatedLogsLink}`}
-					className="contributor-row-popover-buttons__button"
+					className={styles.contributorRowPopoverButtonsButton}
 				>
-					<div className="icon">
+					<div>
 						<LogsIcon />
 					</div>
-					<div className="text">View Logs</div>
+					<div>View Logs</div>
 				</Link>
 			)}
 			{!!relatedTracesLink && (
 				<Link
 					to={`${ROUTES.TRACES_EXPLORER}?${relatedTracesLink}`}
-					className="contributor-row-popover-buttons__button"
+					className={styles.contributorRowPopoverButtonsButton}
 				>
-					<div className="icon">
+					<div>
 						<DraftingCompass
 							size={14}
 							color={isDarkMode ? Color.BG_VANILLA_400 : Color.TEXT_INK_400}
 						/>
 					</div>
-					<div className="text">View Traces</div>
+					<div>View Traces</div>
 				</Link>
 			)}
 		</div>
@@ -64,13 +64,13 @@ function AlertPopover({
 	relatedLogsLink,
 }: Props): JSX.Element {
 	return (
-		<div className="alert-popover-trigger-action">
+		<div className={styles.alertPopoverTriggerAction}>
 			<Popover
 				showArrow={false}
 				placement="bottom"
 				color="linear-gradient(139deg, rgba(18, 19, 23, 1) 0%, rgba(18, 19, 23, 1) 98.68%)"
 				destroyTooltipOnHide
-				rootClassName="alert-history-popover"
+				rootClassName={styles.alertHistoryPopover}
 				content={
 					<PopoverContent
 						relatedTracesLink={relatedTracesLink}
@@ -112,4 +112,3 @@ export function ConditionalAlertPopover({
 	}
 	return <div>{children}</div>;
 }
-export default AlertPopover;

frontend/src/container/AlertHistory/Statistics/Statistics.module.scss

@@ -4,5 +4,5 @@
 	height: 280px;
 	border: 1px solid var(--l1-border);
 	border-radius: 4px;
-	margin: 0 16px;
+	margin: 0 var(--spacing-8);
 }

frontend/src/container/AlertHistory/Statistics/Statistics.tsx

@@ -3,7 +3,7 @@ import { AlertRuleStats } from 'types/api/alerts/def';
 import StatsCardsRenderer from './StatsCardsRenderer/StatsCardsRenderer';
 import TopContributorsRenderer from './TopContributorsRenderer/TopContributorsRenderer';
 
-import './Statistics.styles.scss';
+import styles from './Statistics.module.scss';
 
 function Statistics({
 	setTotalCurrentTriggers,
@@ -13,7 +13,7 @@ function Statistics({
 	totalCurrentTriggers: AlertRuleStats['totalCurrentTriggers'];
 }): JSX.Element {
 	return (
-		<div className="statistics">
+		<div className={styles.statistics}>
 			<StatsCardsRenderer setTotalCurrentTriggers={setTotalCurrentTriggers} />
 			<TopContributorsRenderer totalCurrentTriggers={totalCurrentTriggers} />
 		</div>

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

@@ -0,0 +1,102 @@
+.statsCard {
+	width: 21.7%;
+	border-right: 1px solid var(--l1-border);
+	padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
+}
+
+.statsCardEmpty {
+	justify-content: normal;
+}
+
+.statsCardTitleWrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.title {
+	text-transform: uppercase;
+	font-size: var(--periscope-font-size-base);
+	line-height: 22px;
+	color: var(--l2-foreground);
+	font-weight: var(--font-weight-medium);
+}
+
+.durationIndicator {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.icon {
+	display: flex;
+	align-self: center;
+}
+
+.text {
+	text-transform: uppercase;
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-small);
+	font-weight: var(--font-weight-semibold);
+	letter-spacing: 0.48px;
+}
+
+.statsCardStats {
+	margin-top: var(--spacing-10);
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+}
+
+.countLabel {
+	color: var(--l1-foreground);
+	font-family: var(--periscope-font-family-mono);
+	font-size: var(--font-size-2xl);
+	line-height: 36px;
+}
+
+.statsCardAlertHistoryGraph {
+	margin-top: var(--spacing-16);
+}
+
+.alertHistoryGraph {
+	width: 100%;
+	height: 72px;
+}
+
+.changePercentage {
+	width: max-content;
+	display: flex;
+	padding: var(--spacing-2) var(--spacing-4);
+	border-radius: 20px;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+// TODO(@signozhq/design-tokens): replace --text-forest-* with --success-foreground after release
+.changePercentageSuccess {
+	background: color-mix(in srgb, var(--text-forest-500) 10%, transparent);
+	color: var(--text-forest-400);
+}
+
+.changePercentageError {
+	background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+	color: var(--danger-foreground);
+}
+
+.changePercentageNoPreviousData {
+	color: var(--primary-foreground);
+	background: color-mix(in srgb, var(--primary-background) 10%, transparent);
+	padding: var(--spacing-2) var(--spacing-8);
+}
+
+.changePercentageIcon {
+	display: flex;
+	align-self: center;
+}
+
+.changePercentageLabel {
+	font-size: var(--periscope-font-size-small);
+	font-weight: var(--font-weight-medium);
+	line-height: 16px;
+}

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

@@ -1,94 +0,0 @@
-.stats-card {
-	width: 21.7%;
-	border-right: 1px solid var(--l1-border);
-	padding: 9px 12px 13px;
-
-	&--empty {
-		justify-content: normal;
-	}
-
-	&__title-wrapper {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-
-		.title {
-			text-transform: uppercase;
-			font-size: 13px;
-			line-height: 22px;
-			color: var(--l2-foreground);
-			font-weight: 500;
-		}
-		.duration-indicator {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-			.icon {
-				display: flex;
-				align-self: center;
-			}
-			.text {
-				text-transform: uppercase;
-				color: var(--l3-foreground);
-				font-size: 12px;
-				font-weight: 600;
-				letter-spacing: 0.48px;
-			}
-		}
-	}
-	&__stats {
-		margin-top: 20px;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		.count-label {
-			color: var(--l1-foreground);
-			font-family: 'Geist Mono';
-			font-size: 24px;
-			line-height: 36px;
-		}
-	}
-	&__alert-history-graph {
-		margin-top: 80px;
-
-		.alert-history-graph {
-			width: 100%;
-			height: 72px;
-		}
-	}
-}
-
-.change-percentage {
-	width: max-content;
-	display: flex;
-	padding: 4px 8px;
-	border-radius: 20px;
-	align-items: center;
-	gap: 4px;
-
-	&--success {
-		background: color-mix(in srgb, var(--text-forest-500) 10%, transparent);
-		color: var(--text-forest-400);
-	}
-
-	&--error {
-		background: color-mix(in srgb, var(--error-background) 10%, transparent);
-		color: var(--error-foreground);
-	}
-
-	&--no-previous-data {
-		color: var(--primary-foreground);
-		background: color-mix(in srgb, var(--primary-background) 10%, transparent);
-		padding: 4px 16px;
-	}
-
-	&__icon {
-		display: flex;
-		align-self: center;
-	}
-	&__label {
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 16px;
-	}
-}

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx

@@ -1,3 +1,4 @@
+import cx from 'classnames';
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
 import { QueryParams } from 'constants/query';
@@ -12,7 +13,7 @@ import {
 	extractDayFromTimestamp,
 } from './utils';
 
-import './StatsCard.styles.scss';
+import styles from './StatsCard.module.scss';
 
 type ChangePercentageProps = {
 	percentage: number;
@@ -26,11 +27,11 @@ function ChangePercentage({
 }: ChangePercentageProps): JSX.Element {
 	if (direction > 0) {
 		return (
-			<div className="change-percentage change-percentage--success">
-				<div className="change-percentage__icon">
+			<div className={cx(styles.changePercentage, styles.changePercentageSuccess)}>
+				<div className={styles.changePercentageIcon}>
 					<ArrowDownLeft size={14} color={Color.BG_FOREST_500} />
 				</div>
-				<div className="change-percentage__label">
+				<div className={styles.changePercentageLabel}>
 					{percentage}% vs Last {duration}
 				</div>
 			</div>
@@ -38,11 +39,11 @@ function ChangePercentage({
 	}
 	if (direction < 0) {
 		return (
-			<div className="change-percentage change-percentage--error">
-				<div className="change-percentage__icon">
+			<div className={cx(styles.changePercentage, styles.changePercentageError)}>
+				<div className={styles.changePercentageIcon}>
 					<ArrowUpRight size={14} color={Color.BG_CHERRY_500} />
 				</div>
-				<div className="change-percentage__label">
+				<div className={styles.changePercentageLabel}>
 					{percentage}% vs Last {duration}
 				</div>
 			</div>
@@ -50,8 +51,13 @@ function ChangePercentage({
 	}
 
 	return (
-		<div className="change-percentage change-percentage--no-previous-data">
-			<div className="change-percentage__label">no previous data</div>
+		<div
+			className={cx(
+				styles.changePercentage,
+				styles.changePercentageNoPreviousData,
+			)}
+		>
+			<div className={styles.changePercentageLabel}>no previous data</div>
 		</div>
 	);
 }
@@ -103,27 +109,27 @@ function StatsCard({
 	const formattedEndTimeForTooltip = convertTimestampToLocaleDateString(endTime);
 
 	return (
-		<div className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}>
-			<div className="stats-card__title-wrapper">
-				<div className="title">{title}</div>
-				<div className="duration-indicator">
-					<div className="icon">
+		<div className={cx(styles.statsCard, { [styles.statsCardEmpty]: isEmpty })}>
+			<div className={styles.statsCardTitleWrapper}>
+				<div className={styles.title}>{title}</div>
+				<div className={styles.durationIndicator}>
+					<div className={styles.icon}>
 						<Calendar size={14} color={Color.BG_SLATE_200} />
 					</div>
 					{relativeTime ? (
-						<div className="text">{displayTime}</div>
+						<div className={styles.text}>{displayTime}</div>
 					) : (
 						<Tooltip
 							title={`From ${formattedStartTimeForTooltip} to ${formattedEndTimeForTooltip}`}
 						>
-							<div className="text">{displayTime}</div>
+							<div className={styles.text}>{displayTime}</div>
 						</Tooltip>
 					)}
 				</div>
 			</div>
 
-			<div className="stats-card__stats">
-				<div className="count-label">
+			<div className={styles.statsCardStats}>
+				<div className={styles.countLabel}>
 					{isEmpty ? emptyMessage : displayValue || totalCurrentCount}
 				</div>
 
@@ -134,8 +140,8 @@ function StatsCard({
 				/>
 			</div>
 
-			<div className="stats-card__alert-history-graph">
-				<div className="alert-history-graph">
+			<div className={styles.statsCardAlertHistoryGraph}>
+				<div className={styles.alertHistoryGraph}>
 					{!isEmpty && timeSeries.length > 1 && (
 						<StatsGraph timeSeries={timeSeries} changeDirection={changeDirection} />
 					)}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.module.scss

@@ -0,0 +1,45 @@
+.topContributorsCard {
+	width: 56.6%;
+	overflow: hidden;
+}
+
+.topContributorsCardHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--spacing-4) var(--spacing-6);
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.title {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-medium);
+	line-height: 22px;
+	letter-spacing: 0.52px;
+	text-transform: uppercase;
+}
+
+.viewAll {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	cursor: pointer;
+	padding: 0;
+	height: var(--line-height-20);
+
+	&:hover {
+		background-color: transparent !important;
+	}
+}
+
+.label {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+	line-height: var(--line-height-20);
+	letter-spacing: -0.07px;
+}
+
+.icon {
+	display: flex;
+}

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

@@ -1,163 +0,0 @@
-.top-contributors-card {
-	width: 56.6%;
-	overflow: hidden;
-
-	&--view-all {
-		width: auto;
-	}
-	&__header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 8px 12px;
-
-		border-bottom: 1px solid var(--l1-border);
-		.title {
-			color: var(--l2-foreground);
-			font-size: 13px;
-			font-weight: 500;
-			line-height: 22px;
-			letter-spacing: 0.52px;
-			text-transform: uppercase;
-		}
-		.view-all {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-			cursor: pointer;
-			padding: 0;
-			height: 20px;
-			&:hover {
-				background-color: transparent !important;
-			}
-
-			.label {
-				color: var(--l2-foreground);
-				font-size: 14px;
-				line-height: 20px;
-				letter-spacing: -0.07px;
-			}
-			.icon {
-				display: flex;
-			}
-		}
-	}
-	.contributors-row {
-		height: 80px;
-	}
-	.top-contributors-progress {
-		--progress-background: transparent;
-	}
-
-	&__content {
-		.ant-table {
-			&-cell {
-				padding: 12px !important;
-			}
-		}
-		.contributors-row {
-			background: var(--l1-background);
-
-			td {
-				border: none !important;
-			}
-			&:not(:last-of-type) td {
-				border-bottom: 1px solid var(--l1-border) !important;
-			}
-		}
-		.total-contribution {
-			color: var(--primary-foreground);
-			font-family: 'Geist Mono';
-			font-size: 12px;
-			font-weight: 500;
-			letter-spacing: -0.06px;
-			padding: 4px 8px;
-			background: color-mix(in srgb, var(--primary-background) 10%, transparent);
-			border-radius: 50px;
-			width: max-content;
-		}
-	}
-	.empty-content {
-		margin: 16px 12px;
-		padding: 40px 45px;
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		border: 1px dashed var(--l1-border);
-		border-radius: 6px;
-
-		&__icon {
-			font-family: Inter;
-			font-size: 20px;
-			line-height: 26px;
-			letter-spacing: -0.103px;
-		}
-		&__text {
-			color: var(--l2-foreground);
-			line-height: 18px;
-			.bold-text {
-				color: var(--l1-foreground);
-				font-weight: 500;
-			}
-		}
-		&__button-wrapper {
-			margin-top: 12px;
-			.configure-alert-rule-button {
-				padding: 8px 16px;
-				border-radius: 2px;
-				background: var(--l3-background);
-				border-width: 0;
-				color: var(--l1-foreground);
-				line-height: 24px;
-				font-size: 12px;
-				font-weight: 500;
-				display: flex;
-				align-items: center;
-			}
-		}
-	}
-}
-
-.ant-popover-inner:has(.contributor-row-popover-buttons) {
-	padding: 0 !important;
-}
-.contributor-row-popover-buttons {
-	display: flex;
-	flex-direction: column;
-
-	&__button {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		padding: 12px 15px;
-		color: var(--l2-foreground);
-		font-size: 14px;
-		letter-spacing: 0.14px;
-		width: 160px;
-		cursor: pointer;
-		background: var(--l1-background);
-		border-color: var(--l1-border);
-
-		.text,
-		.icon {
-			color: var(--l1-foreground);
-		}
-
-		&:hover {
-			background: var(--l2-background);
-
-			.text,
-			.icon {
-				color: var(--l1-foreground);
-			}
-		}
-
-		.icon {
-			display: flex;
-		}
-	}
-}
-
-.view-all-drawer {
-	border-radius: 4px;
-}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -10,7 +10,7 @@ import TopContributorsContent from './TopContributorsContent';
 import { TopContributorsCardProps } from './types';
 import ViewAllDrawer from './ViewAllDrawer';
 
-import './TopContributorsCard.styles.scss';
+import styles from './TopContributorsCard.module.scss';
 
 function TopContributorsCard({
 	topContributorsData,
@@ -48,13 +48,17 @@ function TopContributorsCard({
 
 	return (
 		<>
-			<div className="top-contributors-card">
-				<div className="top-contributors-card__header">
-					<div className="title">top contributors</div>
+			<div className={styles.topContributorsCard}>
+				<div className={styles.topContributorsCardHeader}>
+					<div className={styles.title}>top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
-							<div className="label">View all</div>
-							<div className="icon">
+						<Button
+							type="text"
+							className={styles.viewAll}
+							onClick={toggleViewAllDrawer}
+						>
+							<div className={styles.label}>View all</div>
+							<div className={styles.icon}>
 								<ArrowRight
 									size={14}
 									color={isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsContent.module.scss

@@ -0,0 +1,27 @@
+.emptyContent {
+	margin: var(--spacing-8) var(--spacing-6);
+	padding: var(--spacing-20) 45px;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	border: 1px dashed var(--l1-border);
+	border-radius: 6px;
+}
+
+.emptyContentIcon {
+	font-family: var(--font-family-inter);
+	font-size: var(--font-size-xl);
+	line-height: 26px;
+	letter-spacing: -0.103px;
+}
+
+.emptyContentText {
+	color: var(--l2-foreground);
+	line-height: var(--line-height-18);
+}
+
+.topContributorsCardContent {
+	:global(.ant-table-cell) {
+		padding: var(--spacing-6) !important;
+	}
+}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsContent.tsx

@@ -1,3 +1,4 @@
+import styles from './TopContributorsContent.module.scss';
 import TopContributorsRows from './TopContributorsRows';
 import { TopContributorsCardProps } from './types';
 
@@ -9,9 +10,9 @@ function TopContributorsContent({
 
 	if (isEmpty) {
 		return (
-			<div className="empty-content">
-				<div className="empty-content__icon">ℹ️</div>
-				<div className="empty-content__text">
+			<div className={styles.emptyContent}>
+				<div className={styles.emptyContentIcon}>ℹ️</div>
+				<div className={styles.emptyContentText}>
 					Top contributors highlight the most frequently triggering group-by
 					attributes in multi-dimensional alerts
 				</div>
@@ -20,7 +21,7 @@ function TopContributorsContent({
 	}
 
 	return (
-		<div className="top-contributors-card__content">
+		<div className={styles.topContributorsCardContent}>
 			<TopContributorsRows
 				topContributors={topContributorsData.slice(0, 3)}
 				totalCurrentTriggers={totalCurrentTriggers}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.module.scss

@@ -0,0 +1,28 @@
+.contributorsRow {
+	height: 80px;
+	background: var(--l1-background);
+
+	td {
+		border: none !important;
+	}
+
+	&:not(:last-of-type) td {
+		border-bottom: 1px solid var(--l1-border) !important;
+	}
+}
+
+.topContributorsProgress {
+	--progress-background: transparent;
+}
+
+.totalContribution {
+	color: var(--primary-foreground);
+	font-family: var(--periscope-font-family-mono);
+	font-size: var(--periscope-font-size-small);
+	font-weight: var(--font-weight-medium);
+	letter-spacing: -0.06px;
+	padding: var(--spacing-2) var(--spacing-4);
+	background: color-mix(in srgb, var(--primary-background) 10%, transparent);
+	border-radius: 50px;
+	width: max-content;
+}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -12,6 +12,8 @@ import {
 	AlertRuleTopContributors,
 } from 'types/api/alerts/def';
 
+import styles from './TopContributorsRows.module.scss';
+
 function TopContributorsRows({
 	topContributors,
 	totalCurrentTriggers,
@@ -53,7 +55,7 @@ function TopContributorsRows({
 						percent={(count / totalCurrentTriggers) * 100}
 						showInfo={false}
 						strokeColor={Color.BG_ROBIN_500}
-						className="top-contributors-progress"
+						className={styles.topContributorsProgress}
 					/>
 				</ConditionalAlertPopover>
 			),
@@ -68,7 +70,7 @@ function TopContributorsRows({
 					relatedTracesLink={record.relatedTracesLink}
 					relatedLogsLink={record.relatedLogsLink}
 				>
-					<div className="total-contribution">
+					<div className={styles.totalContribution}>
 						{count}/{totalCurrentTriggers}
 					</div>
 				</ConditionalAlertPopover>
@@ -88,7 +90,7 @@ function TopContributorsRows({
 
 	return (
 		<Table
-			rowClassName="contributors-row"
+			rowClassName={styles.contributorsRow}
 			rowKey={(row): string => `top-contributor-${row.fingerprint}`}
 			onRow={handleRowClick}
 			columns={columns}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.module.scss

@@ -0,0 +1,13 @@
+.topContributorsCardViewAll {
+	width: auto;
+}
+
+.topContributorsCardContent {
+	:global(.ant-table-cell) {
+		padding: var(--spacing-6) !important;
+	}
+}
+
+.viewAllDrawer {
+	border-radius: 4px;
+}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx

@@ -3,6 +3,7 @@ import { Drawer } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { AlertRuleStats, AlertRuleTopContributors } from 'types/api/alerts/def';
 
+import styles from './ViewAllDrawer.module.scss';
 import TopContributorsRows from './TopContributorsRows';
 
 function ViewAllDrawer({
@@ -24,15 +25,15 @@ function ViewAllDrawer({
 			onClose={toggleViewAllDrawer}
 			placement="right"
 			width="50%"
-			className="view-all-drawer"
+			className={styles.viewAllDrawer}
 			style={{
 				overscrollBehavior: 'contain',
 				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
 			}}
 			title="Viewing All Contributors"
 		>
-			<div className="top-contributors-card--view-all">
-				<div className="top-contributors-card__content">
+			<div className={styles.topContributorsCardViewAll}>
+				<div className={styles.topContributorsCardContent}>
 					<TopContributorsRows
 						topContributors={topContributorsData}
 						totalCurrentTriggers={totalCurrentTriggers}

frontend/src/container/AlertHistory/Timeline/Graph/Graph.styles.scss

@@ -1,35 +0,0 @@
-.timeline-graph {
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-	background: var(--l2-background);
-	padding: 12px;
-	border-radius: 4px;
-	border: 1px solid var(--l1-border);
-	height: 150px;
-
-	&__title {
-		width: max-content;
-		padding: 2px 8px;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
-		color: var(--l1-foreground);
-		font-size: 12px;
-		line-height: 18px;
-		letter-spacing: -0.06px;
-	}
-	&__chart {
-		.chart-placeholder {
-			width: 100%;
-			height: 52px;
-			background: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			.chart-icon {
-				font-size: 2rem;
-			}
-		}
-	}
-}

frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.module.scss

@@ -0,0 +1,22 @@
+.timelineGraph {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-10);
+	background: var(--l2-background);
+	padding: var(--spacing-6);
+	border-radius: 4px;
+	border: 1px solid var(--l1-border);
+	height: 150px;
+}
+
+.timelineGraphTitle {
+	width: max-content;
+	padding: var(--spacing-1) var(--spacing-4);
+	border-radius: 4px;
+	border: 1px solid var(--l1-border);
+	background: var(--l1-background);
+	color: var(--l1-foreground);
+	font-size: var(--periscope-font-size-small);
+	line-height: var(--line-height-18);
+	letter-spacing: -0.06px;
+}

frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx

@@ -4,7 +4,7 @@ import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateR
 
 import Graph from '../Graph/Graph';
 
-import '../Graph/Graph.styles.scss';
+import styles from './GraphWrapper.module.scss';
 
 function GraphWrapper({
 	totalCurrentTriggers,
@@ -40,11 +40,11 @@ function GraphWrapper({
 	// }, [startTime]);
 
 	return (
-		<div className="timeline-graph">
-			<div className="timeline-graph__title">
+		<div className={styles.timelineGraph}>
+			<div className={styles.timelineGraphTitle}>
 				{totalCurrentTriggers} triggers in {relativeTime}
 			</div>
-			<div className="timeline-graph__chart">
+			<div>
 				<DataStateRenderer
 					isLoading={isLoading}
 					isError={isError || !isValidRuleId || !ruleId}

frontend/src/container/AlertHistory/Timeline/Table/Table.module.scss

@@ -0,0 +1,70 @@
+.timelineTable {
+	border-top: 1px solid var(--l1-border);
+	border-radius: 6px;
+	overflow: hidden;
+	margin-top: var(--spacing-2);
+	min-height: 600px;
+
+	:global(.ant-table) {
+		background: var(--l1-background);
+	}
+
+	:global(.ant-table-cell) {
+		padding: var(--spacing-6) var(--spacing-8) !important;
+		vertical-align: baseline;
+
+		&::before {
+			display: none;
+		}
+	}
+
+	:global(.ant-table-thead) > tr > th {
+		border-color: var(--l1-border);
+		background: var(--l1-background);
+		font-size: var(--periscope-font-size-small);
+		font-weight: var(--font-weight-medium);
+		padding: var(--spacing-6) var(--spacing-8) var(--spacing-4) !important;
+	}
+
+	:global(.ant-table-tbody) > tr > td {
+		border: none;
+	}
+
+	:global(.ant-table.ant-table-middle) {
+		border-bottom: 1px solid var(--l1-border);
+		border-left: 1px solid var(--l1-border);
+		border-right: 1px solid var(--l1-border);
+		border-radius: 6px;
+	}
+
+	:global(.ant-pagination-item-active) {
+		display: flex;
+		width: var(--spacing-10);
+		height: var(--spacing-10);
+		align-items: center;
+		justify-content: center;
+		padding: var(--spacing-0) var(--spacing-4);
+		border-radius: 2px;
+		background: var(--primary-background);
+
+		& > a {
+			color: var(--primary-foreground);
+			line-height: var(--line-height-20);
+			font-weight: var(--font-weight-medium);
+		}
+	}
+}
+
+.alertRuleCreatedAt {
+	font-size: var(--periscope-font-size-base);
+	color: var(--l2-foreground);
+	line-height: var(--line-height-18);
+	letter-spacing: -0.07px;
+}
+
+.alertHistoryLabelSearch {
+	:global(.ant-select-selector) {
+		border: none;
+		background: var(--l2-background);
+	}
+}

frontend/src/container/AlertHistory/Timeline/Table/Table.styles.scss

@@ -1,89 +0,0 @@
-.timeline-table {
-	border-top: 1px solid var(--l1-border);
-	border-radius: 6px;
-	overflow: hidden;
-	margin-top: 4px;
-	min-height: 600px;
-	.ant-table {
-		background: var(--l1-background);
-		&-cell {
-			padding: 12px 16px !important;
-			vertical-align: baseline;
-			&::before {
-				display: none;
-			}
-		}
-		&-thead > tr > th {
-			border-color: var(--l1-border);
-			background: var(--l1-background);
-			font-size: 12px;
-			font-weight: 500;
-			padding: 12px 16px 8px !important;
-		}
-		&-tbody > tr > td {
-			border: none;
-		}
-	}
-
-	.label-filter {
-		padding: 6px 8px;
-		border-radius: 4px;
-		background: var(--l1-foreground);
-		border-width: 0;
-		line-height: 18px;
-		& ::placeholder {
-			color: var(--l2-foreground);
-			font-size: 12px;
-			letter-spacing: 0.6px;
-			text-transform: uppercase;
-			font-weight: 500;
-		}
-	}
-	.alert-rule {
-		&-value,
-		&__created-at {
-			font-size: 14px;
-			color: var(--l2-foreground);
-		}
-		&-value {
-			font-weight: 500;
-			line-height: 20px;
-		}
-		&__created-at {
-			line-height: 18px;
-			letter-spacing: -0.07px;
-		}
-	}
-	.ant-table.ant-table-middle {
-		border-bottom: 1px solid var(--l1-border);
-		border-left: 1px solid var(--l1-border);
-		border-right: 1px solid var(--l1-border);
-
-		border-radius: 6px;
-	}
-	.ant-pagination-item {
-		&-active {
-			display: flex;
-			width: 24px;
-			height: 24px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			padding: 1px 8px;
-			border-radius: 2px;
-			background: var(--primary-background);
-
-			& > a {
-				color: var(--primary-foreground);
-				line-height: 20px;
-				font-weight: 500;
-			}
-		}
-	}
-	.alert-history-label-search {
-		.ant-select-selector {
-			border: none;
-			background: var(--l2-background);
-		}
-	}
-}

frontend/src/container/AlertHistory/Timeline/Table/Table.tsx

@@ -13,7 +13,7 @@ import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
 import { timelineTableColumns } from './useTimelineTable';
 
-import './Table.styles.scss';
+import styles from './Table.module.scss';
 
 function TimelineTable(): JSX.Element {
 	const [filters, setFilters] = useState<TagFilter>(initialFilters);
@@ -54,7 +54,7 @@ function TimelineTable(): JSX.Element {
 	});
 
 	return (
-		<div className="timeline-table">
+		<div className={styles.timelineTable}>
 			<Table
 				rowKey={(row): string => `${row.fingerprint}-${row.value}-${row.unixMilli}`}
 				columns={timelineTableColumns({

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -17,6 +17,8 @@ import AlertState from 'pages/AlertDetails/AlertHeader/AlertState/AlertState';
 import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
+import styles from './Table.module.scss';
+
 const transformLabelsToQbKeys = (
 	labels: AlertRuleTimelineTableResponse['labels'],
 ): AttributeKey[] => Object.keys(labels).flatMap((key) => [{ key }]);
@@ -56,7 +58,7 @@ function LabelFilter({
 		<ClientSideQBSearch
 			onChange={handleSearch}
 			filters={filters}
-			className="alert-history-label-search"
+			className={styles.alertHistoryLabelSearch}
 			attributeKeys={transformedKeys}
 			attributeValuesMap={attributesMap}
 			suffixIcon={
@@ -88,29 +90,21 @@ export const timelineTableColumns = ({
 		dataIndex: 'state',
 		sorter: true,
 		width: 140,
-		render: (value): JSX.Element => (
-			<div className="alert-rule-state">
-				<AlertState state={value} showLabel />
-			</div>
-		),
+		render: (value): JSX.Element => <AlertState state={value} showLabel />,
 	},
 	{
 		title: (
 			<LabelFilter setFilters={setFilters} filters={filters} labels={labels} />
 		),
 		dataIndex: 'labels',
-		render: (labels): JSX.Element => (
-			<div className="alert-rule-labels">
-				<AlertLabels labels={labels} />
-			</div>
-		),
+		render: (labels): JSX.Element => <AlertLabels labels={labels} />,
 	},
 	{
 		title: 'CREATED AT',
 		dataIndex: 'unixMilli',
 		width: 200,
 		render: (value): JSX.Element => (
-			<div className="alert-rule__created-at">
+			<div className={styles.alertRuleCreatedAt}>
 				{formatTimezoneAdjustedTimestamp(value, DATE_TIME_FORMATS.DASH_DATETIME)}
 			</div>
 		),
@@ -125,7 +119,7 @@ export const timelineTableColumns = ({
 				relatedLogsLink={record.relatedLogsLink}
 			>
 				<Button type="text" ghost>
-					<Ellipsis className="dropdown-icon" size="md" />
+					<Ellipsis size="md" />
 				</Button>
 			</ConditionalAlertPopover>
 		),

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.module.scss

@@ -0,0 +1,35 @@
+.timelineTabsAndFilters {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.resetButton,
+.top5Contributors {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-5);
+}
+
+.comingSoon {
+	display: inline-flex;
+	padding: var(--spacing-2) var(--spacing-4);
+	border-radius: 20px;
+	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+	justify-content: center;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.comingSoonText {
+	color: var(--text-sienna-400);
+	font-size: var(--periscope-font-size-small);
+	font-weight: var(--font-weight-medium);
+	letter-spacing: -0.05px;
+	line-height: normal;
+}
+
+.comingSoonIcon {
+	display: flex;
+}

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.styles.scss

@@ -1,32 +0,0 @@
-.timeline-tabs-and-filters {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	.reset-button,
-	.top-5-contributors {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-	}
-	.coming-soon {
-		display: inline-flex;
-		padding: 4px 8px;
-		border-radius: 20px;
-		border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-		background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-		justify-content: center;
-		align-items: center;
-		gap: 5px;
-
-		&__text {
-			color: var(--text-sienna-400);
-			font-size: 10px;
-			font-weight: 500;
-			letter-spacing: -0.05px;
-			line-height: normal;
-		}
-		&__icon {
-			display: flex;
-		}
-	}
-}

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -6,13 +6,13 @@ import history from 'lib/history';
 import { Info } from '@signozhq/icons';
 import Tabs2 from 'periscope/components/Tabs2';
 
-import './TabsAndFilters.styles.scss';
+import styles from './TabsAndFilters.module.scss';
 
 function ComingSoon(): JSX.Element {
 	return (
-		<div className="coming-soon">
-			<div className="coming-soon__text">Coming Soon</div>
-			<div className="coming-soon__icon">
+		<div className={styles.comingSoon}>
+			<div className={styles.comingSoonText}>Coming Soon</div>
+			<div className={styles.comingSoonIcon}>
 				<Info size={10} color={Color.BG_SIENNA_400} />
 			</div>
 		</div>
@@ -27,7 +27,7 @@ function TimelineTabs(): JSX.Element {
 		{
 			value: TimelineTab.TOP_5_CONTRIBUTORS,
 			label: (
-				<div className="top-5-contributors">
+				<div className={styles.top5Contributors}>
 					Top 5 Contributors
 					<ComingSoon />
 				</div>
@@ -80,7 +80,7 @@ function TimelineFilters(): JSX.Element {
 
 function TabsAndFilters(): JSX.Element {
 	return (
-		<div className="timeline-tabs-and-filters">
+		<div className={styles.timelineTabsAndFilters}>
 			<TimelineTabs />
 			<TimelineFilters />
 		</div>

frontend/src/container/AlertHistory/Timeline/Timeline.module.scss

@@ -0,0 +1,14 @@
+.timeline {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	margin: 0 var(--spacing-8);
+}
+
+.timelineTitle {
+	color: var(--l1-foreground);
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-20);
+	letter-spacing: -0.07px;
+}

frontend/src/container/AlertHistory/Timeline/Timeline.styles.scss

@@ -1,14 +0,0 @@
-.timeline {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	margin: 0 16px;
-
-	&__title {
-		color: var(--l1-foreground);
-		font-size: 14px;
-		font-weight: 500;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-	}
-}

frontend/src/container/AlertHistory/Timeline/Timeline.tsx

@@ -2,7 +2,7 @@ import GraphWrapper from './GraphWrapper/GraphWrapper';
 import TimelineTable from './Table/Table';
 import TabsAndFilters from './TabsAndFilters/TabsAndFilters';
 
-import './Timeline.styles.scss';
+import styles from './Timeline.module.scss';
 
 function TimelineTableRenderer(): JSX.Element {
 	return <TimelineTable />;
@@ -14,15 +14,15 @@ function Timeline({
 	totalCurrentTriggers: number;
 }): JSX.Element {
 	return (
-		<div className="timeline">
-			<div className="timeline__title">Timeline</div>
-			<div className="timeline__tabs-and-filters">
+		<div className={styles.timeline}>
+			<div className={styles.timelineTitle}>Timeline</div>
+			<div>
 				<TabsAndFilters />
 			</div>
-			<div className="timeline__graph">
+			<div>
 				<GraphWrapper totalCurrentTriggers={totalCurrentTriggers} />
 			</div>
-			<div className="timeline__table">
+			<div>
 				<TimelineTableRenderer />
 			</div>
 		</div>

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.module.scss

@@ -0,0 +1,183 @@
+.anomalyAlertEvaluationView {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	gap: var(--spacing-4);
+	width: 100%;
+	height: 100%;
+
+	:global(.uplot-tooltip) {
+		background-color: rgb(0 0 0 / 90%);
+		box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+		color: #ddd;
+		font-size: var(--periscope-font-size-base);
+		line-height: 1.4;
+		padding: var(--spacing-4) var(--spacing-6);
+		pointer-events: none;
+		position: absolute;
+		z-index: 100;
+		max-height: 500px;
+		width: 280px;
+		overflow-y: auto;
+		display: none;
+
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-corner {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: rgb(136 136 136);
+			border-radius: 0.625rem;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+	}
+
+	:global(.uplot-tooltip-title) {
+		font-weight: var(--font-weight-semibold);
+		margin-bottom: var(--spacing-2);
+	}
+
+	:global(.uplot-tooltip-series) {
+		display: flex;
+		gap: var(--spacing-2);
+		padding: var(--spacing-2) 0;
+		align-items: center;
+	}
+
+	:global(.uplot-tooltip-series-name) {
+		margin-right: var(--spacing-2);
+	}
+
+	:global(.uplot-tooltip-band) {
+		font-style: italic;
+		color: #666;
+	}
+
+	:global(.uplot-tooltip-marker) {
+		display: inline-block;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		margin-right: var(--spacing-4);
+		vertical-align: middle;
+	}
+
+	:global(.uplot) {
+		:global(.u-title) {
+			text-align: center;
+			font-size: var(--periscope-font-size-base);
+			font-weight: var(--font-weight-normal);
+			display: flex;
+			height: 40px;
+			align-items: center;
+		}
+
+		:global(.u-legend) {
+			display: flex;
+			margin-top: var(--spacing-8);
+
+			tbody {
+				width: 100%;
+
+				:global(.u-series) {
+					display: inline-flex;
+				}
+			}
+		}
+	}
+}
+
+.chartSection {
+	height: 100%;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.chartSectionMultiSeries {
+	composes: chartSection;
+	width: calc(100% - 240px);
+}
+
+.noDataContainer {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: var(--spacing-4);
+}
+
+.seriesSelection {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	width: 240px;
+	padding: 0 var(--spacing-4);
+	height: 100%;
+}
+
+.seriesList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	height: 100%;
+}
+
+.seriesListSearch {
+	margin-bottom: var(--spacing-8);
+}
+
+.seriesListTitle {
+	margin-top: var(--spacing-6);
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-normal);
+}
+
+.seriesListItems {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	height: 100%;
+	overflow-y: auto;
+
+	&::-webkit-scrollbar {
+		width: 0.1rem;
+	}
+
+	&::-webkit-scrollbar-corner {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: rgb(136 136 136);
+		border-radius: 0.625rem;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+}
+
+.seriesListItem {
+	display: flex;
+	flex-direction: row;
+	gap: var(--spacing-4);
+	cursor: pointer;
+}
+
+.seriesListItemColor {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	display: inline-flex;
+	margin-right: var(--spacing-4);
+	vertical-align: middle;
+}

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.styles.scss

@@ -1,180 +0,0 @@
-.anomaly-alert-evaluation-view {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	gap: 8px;
-	width: 100%;
-	height: 100%;
-
-	.anomaly-alert-evaluation-view-chart-section {
-		height: 100%;
-		width: 100%;
-
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		&.has-multi-series-data {
-			width: calc(100% - 240px);
-		}
-
-		.anomaly-alert-evaluation-view-no-data-container {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-			gap: 8px;
-		}
-	}
-
-	.anomaly-alert-evaluation-view-series-selection {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		width: 240px;
-		padding: 0px 8px;
-		height: 100%;
-
-		.anomaly-alert-evaluation-view-series-list {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-			height: 100%;
-
-			.anomaly-alert-evaluation-view-series-list-search {
-				margin-bottom: 16px;
-			}
-
-			.anomaly-alert-evaluation-view-series-list-title {
-				margin-top: 12px;
-				font-size: 13px !important;
-				font-weight: 400;
-			}
-
-			.anomaly-alert-evaluation-view-series-list-items {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-				height: 100%;
-				overflow-y: auto;
-
-				.anomaly-alert-evaluation-view-series-list-item {
-					display: flex;
-					flex-direction: row;
-					gap: 8px;
-
-					.anomaly-alert-evaluation-view-series-list-item-color {
-						width: 6px;
-						height: 6px;
-						border-radius: 50%;
-
-						display: inline-flex;
-						margin-right: 8px;
-						vertical-align: middle;
-					}
-
-					cursor: pointer;
-				}
-
-				&::-webkit-scrollbar {
-					width: 0.1rem;
-				}
-				&::-webkit-scrollbar-corner {
-					background: transparent;
-				}
-				&::-webkit-scrollbar-thumb {
-					background: rgb(136, 136, 136);
-					border-radius: 0.625rem;
-				}
-				&::-webkit-scrollbar-track {
-					background: transparent;
-				}
-			}
-		}
-	}
-
-	.uplot {
-		.u-title {
-			text-align: center;
-			font-size: 18px;
-			font-weight: 400;
-			display: flex;
-			height: 40px;
-			font-size: 13px;
-			align-items: center;
-		}
-
-		.u-legend {
-			display: flex;
-			margin-top: 16px;
-
-			tbody {
-				width: 100%;
-
-				.u-series {
-					display: inline-flex;
-				}
-			}
-		}
-	}
-}
-
-.uplot-tooltip {
-	background-color: rgba(0, 0, 0, 0.9);
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-	color: #ddd;
-	font-size: 13px;
-	line-height: 1.4;
-	padding: 8px 12px;
-	pointer-events: none;
-	position: absolute;
-	z-index: 100;
-	max-height: 500px;
-	width: 280px;
-	overflow-y: auto;
-	display: none; /* Hide tooltip by default */
-
-	&::-webkit-scrollbar {
-		width: 0.3rem;
-	}
-	&::-webkit-scrollbar-corner {
-		background: transparent;
-	}
-	&::-webkit-scrollbar-thumb {
-		background: rgb(136, 136, 136);
-		border-radius: 0.625rem;
-	}
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-}
-
-.uplot-tooltip-title {
-	font-weight: bold;
-	margin-bottom: 4px;
-}
-
-.uplot-tooltip-series {
-	display: flex;
-	gap: 4px;
-	padding: 4px 0px;
-	align-items: center;
-}
-
-.uplot-tooltip-series-name {
-	margin-right: 4px;
-}
-
-.uplot-tooltip-band {
-	font-style: italic;
-	color: #666;
-}
-
-.uplot-tooltip-marker {
-	display: inline-block;
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	margin-right: 8px;
-	vertical-align: middle;
-}

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -15,7 +15,7 @@ import uPlot from 'uplot';
 import tooltipPlugin from './tooltipPlugin';
 
 import 'uplot/dist/uPlot.min.css';
-import './AnomalyAlertEvaluationView.styles.scss';
+import styles from './AnomalyAlertEvaluationView.module.scss';
 
 const { Search } = Input;
 
@@ -284,11 +284,11 @@ function AnomalyAlertEvaluationView({
 	}, 300);
 
 	return (
-		<div className="anomaly-alert-evaluation-view">
+		<div className={styles.anomalyAlertEvaluationView}>
 			<div
-				className={`anomaly-alert-evaluation-view-chart-section ${
-					allSeries.length > 1 ? 'has-multi-series-data' : ''
-				}`}
+				className={
+					allSeries.length > 1 ? styles.chartSectionMultiSeries : styles.chartSection
+				}
 				ref={graphRef}
 			>
 				{allSeries.length > 0 ? (
@@ -298,7 +298,7 @@ function AnomalyAlertEvaluationView({
 						chartRef={chartRef}
 					/>
 				) : (
-					<div className="anomaly-alert-evaluation-view-no-data-container">
+					<div className={styles.noDataContainer}>
 						<ChartLine size={48} strokeWidth={0.5} />
 
 						<Typography>No Data</Typography>
@@ -307,20 +307,20 @@ function AnomalyAlertEvaluationView({
 			</div>
 
 			{allSeries.length > 1 && (
-				<div className="anomaly-alert-evaluation-view-series-selection">
+				<div className={styles.seriesSelection}>
 					{allSeries.length > 1 && (
-						<div className="anomaly-alert-evaluation-view-series-list">
+						<div className={styles.seriesList}>
 							<Search
-								className="anomaly-alert-evaluation-view-series-list-search"
+								className={styles.seriesListSearch}
 								placeholder="Search a series"
 								allowClear
 								onChange={handleSearchValueChange}
 							/>
 
-							<div className="anomaly-alert-evaluation-view-series-list-items">
+							<div className={styles.seriesListItems}>
 								{filteredSeriesKeys.length > 0 && (
 									<Checkbox
-										className="anomaly-alert-evaluation-view-series-list-item"
+										className={styles.seriesListItem}
 										name="series"
 										value={selectedSeries === null}
 										onChange={(): void => handleSeriesChange(null)}
@@ -332,14 +332,14 @@ function AnomalyAlertEvaluationView({
 								{filteredSeriesKeys.map((seriesKey) => (
 									<div key={seriesKey}>
 										<Checkbox
-											className="anomaly-alert-evaluation-view-series-list-item"
+											className={styles.seriesListItem}
 											key={seriesKey}
 											name="series"
 											value={selectedSeries === seriesKey}
 											onChange={(): void => handleSeriesChange(seriesKey)}
 										>
 											<div
-												className="anomaly-alert-evaluation-view-series-list-item-color"
+												className={styles.seriesListItemColor}
 												style={{ backgroundColor: seriesData[seriesKey].color }}
 											/>
 

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/CreateAlertRule/CreateAlertRule.module.scss

@@ -0,0 +1,65 @@
+.createAlertTabsExtra {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-8);
+}
+
+.createAlertWrapper {
+	margin-top: var(--spacing-5);
+
+	:global(.divider) {
+		border-color: var(--l1-border);
+		margin: var(--spacing-8) 0;
+	}
+
+	:global(.breadcrumb-divider) {
+		margin-top: var(--spacing-5);
+	}
+}
+
+.createAlertBreadcrumb {
+	padding-left: var(--spacing-8);
+
+	:global(.breadcrumb-item) {
+		color: var(--l2-foreground);
+		font-size: var(--periscope-font-size-base);
+		line-height: var(--line-height-20);
+		letter-spacing: 0.25px;
+		padding: 0;
+	}
+
+	:global(.ant-breadcrumb-separator),
+	:global(.breadcrumb-item--last) {
+		color: var(--muted-foreground);
+		font-family: var(--periscope-font-family-mono);
+	}
+}
+
+.createAlertBreadcrumb ol {
+	align-items: center;
+}
+
+.alertsContainer {
+	:global(.top-level-tab.periscope-tab) {
+		padding: var(--spacing-1) 0;
+	}
+
+	:global(.ant-tabs-nav) {
+		padding: 0 var(--spacing-4);
+		margin-bottom: 0 !important;
+
+		&::before {
+			border-bottom: 1px solid var(--l1-border) !important;
+		}
+	}
+
+	:global(.ant-tabs-tab) {
+		&[data-node-key='TriggeredAlerts'] {
+			margin-left: var(--spacing-8);
+		}
+	}
+
+	:global(.ant-tabs-tab) [aria-selected='false'] :global(.periscope-tab) {
+		color: var(--l2-foreground);
+	}
+}

frontend/src/container/CreateAlertRule/CreateAlertRule.styles.scss

@@ -1,75 +0,0 @@
-.create-alert-tabs {
-	&__extra {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-	}
-}
-
-.create-alert-wrapper {
-	margin-top: 10px;
-
-	.divider {
-		border-color: var(--l1-border);
-		margin: 16px 0;
-	}
-
-	.breadcrumb-divider {
-		margin-top: 10px;
-	}
-}
-
-.create-alert__breadcrumb {
-	padding-left: 16px;
-
-	ol {
-		align-items: center;
-	}
-
-	.breadcrumb-item {
-		color: var(--l2-foreground);
-		font-size: 14px;
-		line-height: 20px;
-		letter-spacing: 0.25px;
-		padding: 0;
-	}
-
-	.ant-breadcrumb-separator,
-	.breadcrumb-item--last {
-		color: var(--muted-foreground);
-		font-family: 'Geist Mono';
-	}
-}
-
-.alerts-container {
-	.top-level-tab.periscope-tab {
-		padding: 2px 0;
-	}
-
-	.ant-tabs {
-		&-nav {
-			padding: 0 8px;
-			margin-bottom: 0 !important;
-
-			&::before {
-				border-bottom: 1px solid var(--l1-border) !important;
-			}
-		}
-
-		&-tab {
-			&[data-node-key='TriggeredAlerts'] {
-				margin-left: 16px;
-			}
-
-			&:not(:first-of-type) {
-				margin-left: 24px !important;
-			}
-
-			[aria-selected='false'] {
-				.periscope-tab {
-					color: var(--l2-foreground);
-				}
-			}
-		}
-	}
-}

frontend/src/container/CreateAlertRule/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
+import cx from 'classnames';
 import { Form, Tabs, TabsProps } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/AlertHistory/ConfigureIcon';
@@ -22,7 +23,7 @@ import { ALERT_TYPE_VS_SOURCE_MAPPING } from './config';
 import { ALERTS_VALUES_MAP, ALERT_TYPE_BREADCRUMB_TITLE } from './defaults';
 import SelectAlertType from './SelectAlertType';
 
-import './CreateAlertRule.styles.scss';
+import styles from './CreateAlertRule.module.scss';
 
 function CreateRules(): JSX.Element {
 	const [formInstance] = Form.useForm();
@@ -143,9 +144,9 @@ function CreateRules(): JSX.Element {
 			),
 			key: AlertListTabs.ALERT_RULES,
 			children: (
-				<div className="create-alert-wrapper">
+				<div className={styles.createAlertWrapper}>
 					<AlertBreadcrumb
-						className="create-alert__breadcrumb"
+						className={styles.createAlertBreadcrumb}
 						items={
 							isTypeSelectionMode
 								? [
@@ -190,9 +191,9 @@ function CreateRules(): JSX.Element {
 			items={items}
 			activeKey={AlertListTabs.ALERT_RULES}
 			onChange={handleTabChange}
-			className="alerts-container create-alert-tabs"
+			className={cx(styles.alertsContainer, 'create-alert-tabs')}
 			tabBarExtraContent={
-				<div className="create-alert-tabs__extra">
+				<div className={styles.createAlertTabsExtra}>
 					<DateTimeSelector showAutoRefresh />
 					<HeaderRightSection
 						enableAnnouncements={false}

frontend/src/container/CreateAlertV2/AlertCondition/AlertCondition.module.scss

@@ -0,0 +1,66 @@
+.alertConditionContainer {
+	margin: 0 var(--spacing-8);
+	margin-top: var(--spacing-12);
+}
+
+.alertCondition {
+	display: flex;
+	align-items: center;
+	margin-left: var(--spacing-6);
+	margin-top: var(--spacing-12);
+}
+
+.alertConditionTabs {
+	display: flex;
+	border-radius: 2px;
+	border: 1px solid var(--l2-border);
+	background: var(--l2-background);
+	flex-direction: row;
+	border-bottom: none;
+	margin-bottom: -1px;
+}
+
+.explorerViewOption {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: row;
+	border: none;
+	padding: 9px;
+	box-shadow: none;
+	border-radius: 0;
+	border-left: 0.5px solid var(--l2-border);
+	border-bottom: 0.5px solid var(--l2-border);
+	width: 120px;
+	height: 36px;
+	gap: var(--spacing-4);
+
+	&:first-child {
+		border-left: 1px solid transparent;
+	}
+
+	&:hover {
+		background-color: transparent !important;
+		border-left: 1px solid transparent !important;
+		color: var(--l3-foreground);
+	}
+
+	&:disabled {
+		background-color: var(--l2-background);
+		opacity: 0.6;
+	}
+}
+
+.activeTab {
+	background-color: var(--l2-background);
+	border-bottom: none;
+
+	&:hover {
+		background-color: var(--l2-background-hover) !important;
+	}
+}
+
+.condensedAdvancedOptionsContainer {
+	margin-top: var(--spacing-8);
+	width: fit-parent;
+}

frontend/src/container/CreateAlertV2/AlertCondition/AlertCondition.tsx

@@ -15,7 +15,7 @@ import AlertThreshold from './AlertThreshold';
 import AnomalyThreshold from './AnomalyThreshold';
 import { ANOMALY_TAB_TOOLTIP, THRESHOLD_TAB_TOOLTIP } from './constants';
 
-import './styles.scss';
+import styles from './AlertCondition.module.scss';
 
 function AlertCondition(): JSX.Element {
 	const { alertType, setAlertType } = useCreateAlertState();
@@ -67,15 +67,15 @@ function AlertCondition(): JSX.Element {
 	};
 
 	return (
-		<div className="alert-condition-container">
+		<div className={styles.alertConditionContainer}>
 			<Stepper stepNumber={2} label="Set alert conditions" />
-			<div className="alert-condition">
-				<div className="alert-condition-tabs">
+			<div className={styles.alertCondition}>
+				<div className={styles.alertConditionTabs}>
 					{tabs.map((tab) => (
 						<Tooltip key={tab.value} title={getTabTooltip(tab)}>
 							<Button
-								className={classNames('list-view-tab', 'explorer-view-option', {
-									'active-tab': alertType === tab.value,
+								className={classNames(styles.explorerViewOption, {
+									[styles.activeTab]: alertType === tab.value,
 								})}
 								onClick={(): void => {
 									if (alertType !== tab.value) {
@@ -106,7 +106,7 @@ function AlertCondition(): JSX.Element {
 					refreshChannels={refreshChannels}
 				/>
 			)}
-			<div className="condensed-advanced-options-container">
+			<div className={styles.condensedAdvancedOptionsContainer}>
 				<AdvancedOptions />
 			</div>
 		</div>

frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.module.scss

@@ -0,0 +1,85 @@
+.alertThresholdContainer {
+	padding: var(--spacing-12);
+	padding-right: 72px;
+	background-color: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	width: 100%;
+}
+
+.alertConditionSentences {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+}
+
+.alertConditionSentence {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-8);
+	flex-wrap: wrap;
+
+	:global(.ant-select) {
+		width: 240px;
+
+		:global(.ant-select-selector) {
+			background-color: var(--l3-background);
+			border: 1px solid var(--l3-border);
+			color: var(--muted-foreground);
+			font-family: 'Space Mono';
+
+			&:hover {
+				border-color: var(--l1-border);
+			}
+
+			&:focus {
+				border-color: var(--l1-border);
+				box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+			}
+		}
+
+		:global(.ant-select-selection-item) {
+			color: var(--l1-foreground);
+		}
+
+		:global(.ant-select-arrow) {
+			color: var(--muted-foreground);
+		}
+	}
+}
+
+.sentenceText {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+	line-height: 1.5;
+	--typography-text-display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+}
+
+.thresholdsSection {
+	margin-top: var(--spacing-8);
+	margin-left: var(--spacing-12);
+}
+
+.addThresholdBtn {
+	margin-top: var(--spacing-4);
+	border: 1px dashed var(--l3-border);
+	color: var(--l2-foreground);
+	background-color: transparent;
+	border-radius: 4px;
+	height: 32px;
+	padding: 0 var(--spacing-8);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: none;
+
+	&:hover {
+		border-color: var(--l2-border);
+		color: var(--l3-foreground);
+	}
+
+	:global(.anticon) {
+		margin-right: var(--spacing-4);
+	}
+}

frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { Button, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import getRandomColor from 'lib/getRandomColor';
 import { Plus } from '@signozhq/icons';
@@ -32,8 +31,7 @@ import {
 	RoutingPolicyBanner,
 } from './utils';
 
-import './styles.scss';
-import '../EvaluationSettings/styles.scss';
+import styles from './AlertThreshold.module.scss';
 
 function AlertThreshold({
 	channels,
@@ -219,16 +217,11 @@ function AlertThreshold({
 	};
 
 	return (
-		<div
-			className={classNames(
-				'alert-threshold-container',
-				'condensed-alert-threshold-container',
-			)}
-		>
+		<div className={styles.alertThresholdContainer}>
 			{/* Main condition sentence */}
-			<div className="alert-condition-sentences">
-				<div className="alert-condition-sentence">
-					<Typography.Text className="sentence-text">
+			<div className={styles.alertConditionSentences}>
+				<div className={styles.alertConditionSentence}>
+					<Typography.Text className={styles.sentenceText}>
 						Send a notification when
 					</Typography.Text>
 					<Select
@@ -238,7 +231,7 @@ function AlertThreshold({
 						options={queryNames}
 						data-testid="alert-threshold-query-select"
 					/>
-					<Typography.Text className="sentence-text">is</Typography.Text>
+					<Typography.Text className={styles.sentenceText}>is</Typography.Text>
 					<Select
 						value={
 							(normalizeOperator(thresholdState.operator) ??
@@ -254,7 +247,7 @@ function AlertThreshold({
 						options={THRESHOLD_OPERATOR_OPTIONS}
 						data-testid="alert-threshold-operator-select"
 					/>
-					<Typography.Text className="sentence-text">
+					<Typography.Text className={styles.sentenceText}>
 						the threshold(s)
 					</Typography.Text>
 					<Select
@@ -272,13 +265,13 @@ function AlertThreshold({
 						options={matchTypeOptionsWithTooltips}
 						data-testid="alert-threshold-match-type-select"
 					/>
-					<Typography.Text className="sentence-text">
+					<Typography.Text className={styles.sentenceText}>
 						during the <EvaluationSettings />
 					</Typography.Text>
 				</div>
 			</div>
 
-			<div className="thresholds-section">
+			<div className={styles.thresholdsSection}>
 				{thresholdState.thresholds.map((threshold, index) => (
 					<ThresholdItem
 						key={threshold.id}
@@ -297,7 +290,7 @@ function AlertThreshold({
 					type="dashed"
 					icon={<Plus size={16} />}
 					onClick={addThreshold}
-					className="add-threshold-btn"
+					className={styles.addThresholdBtn}
 					data-testid="add-threshold-button"
 				>
 					Add Threshold

frontend/src/container/CreateAlertV2/AlertCondition/AnomalyThreshold.module.scss

@@ -0,0 +1,63 @@
+.anomalyThresholdContainer {
+	padding: var(--spacing-12);
+	padding-right: 72px;
+	background-color: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	width: 100%;
+
+	:global(.ant-select) {
+		:global(.ant-select-selector) {
+			min-width: 150px;
+		}
+	}
+}
+
+.alertConditionSentences {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+}
+
+.alertConditionSentence {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-8);
+	flex-wrap: wrap;
+
+	:global(.ant-select) {
+		width: 240px;
+
+		:global(.ant-select-selector) {
+			background-color: var(--l2-background);
+			border: 1px solid var(--l1-border);
+			color: var(--muted-foreground);
+			font-family: 'Space Mono';
+
+			&:hover {
+				border-color: var(--l1-border);
+			}
+
+			&:focus {
+				border-color: var(--l1-border);
+				box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+			}
+		}
+
+		:global(.ant-select-selection-item) {
+			color: var(--l1-foreground);
+		}
+
+		:global(.ant-select-arrow) {
+			color: var(--muted-foreground);
+		}
+	}
+}
+
+.sentenceText {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+	line-height: 1.5;
+	--typography-text-display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+}

frontend/src/container/CreateAlertV2/AlertCondition/AnomalyThreshold.tsx

@@ -24,6 +24,8 @@ import {
 	RoutingPolicyBanner,
 } from './utils';
 
+import styles from './AnomalyThreshold.module.scss';
+
 function AnomalyThreshold({
 	channels,
 	isLoadingChannels,
@@ -64,11 +66,14 @@ function AnomalyThreshold({
 	};
 
 	return (
-		<div className="anomaly-threshold-container">
-			<div className="alert-condition-sentences">
+		<div className={styles.anomalyThresholdContainer}>
+			<div className={styles.alertConditionSentences}>
 				{/* Sentence 1 */}
-				<div className="alert-condition-sentence">
-					<Typography.Text data-testid="notification-text" className="sentence-text">
+				<div className={styles.alertConditionSentence}>
+					<Typography.Text
+						data-testid="notification-text"
+						className={styles.sentenceText}
+					>
 						Send notification when the observed value for
 					</Typography.Text>
 					<Select
@@ -84,7 +89,7 @@ function AnomalyThreshold({
 					/>
 					<Typography.Text
 						data-testid="evaluation-window-text"
-						className="sentence-text"
+						className={styles.sentenceText}
 					>
 						during the last
 					</Typography.Text>
@@ -100,9 +105,12 @@ function AnomalyThreshold({
 						options={ANOMALY_TIME_DURATION_OPTIONS}
 					/>
 				</div>
-				<div className="alert-condition-sentence">
+				<div className={styles.alertConditionSentence}>
 					{/* Sentence 2 */}
-					<Typography.Text data-testid="threshold-text" className="sentence-text">
+					<Typography.Text
+						data-testid="threshold-text"
+						className={styles.sentenceText}
+					>
 						is
 					</Typography.Text>
 					<Select
@@ -117,7 +125,10 @@ function AnomalyThreshold({
 						}}
 						options={deviationOptions}
 					/>
-					<Typography.Text data-testid="deviations-text" className="sentence-text">
+					<Typography.Text
+						data-testid="deviations-text"
+						className={styles.sentenceText}
+					>
 						deviations
 					</Typography.Text>
 					<Select
@@ -136,7 +147,7 @@ function AnomalyThreshold({
 					/>
 					<Typography.Text
 						data-testid="predicted-data-text"
-						className="sentence-text"
+						className={styles.sentenceText}
 					>
 						the predicted data
 					</Typography.Text>
@@ -156,8 +167,11 @@ function AnomalyThreshold({
 					/>
 				</div>
 				{/* Sentence 3 */}
-				<div className="alert-condition-sentence">
-					<Typography.Text data-testid="using-the-text" className="sentence-text">
+				<div className={styles.alertConditionSentence}>
+					<Typography.Text
+						data-testid="using-the-text"
+						className={styles.sentenceText}
+					>
 						using the
 					</Typography.Text>
 					<Select
@@ -173,7 +187,7 @@ function AnomalyThreshold({
 					/>
 					<Typography.Text
 						data-testid="algorithm-with-text"
-						className="sentence-text"
+						className={styles.sentenceText}
 					>
 						algorithm with
 					</Typography.Text>
@@ -192,7 +206,7 @@ function AnomalyThreshold({
 						<>
 							<Typography.Text
 								data-testid="seasonality-text"
-								className="sentence-text"
+								className={styles.sentenceText}
 							>
 								seasonality to
 							</Typography.Text>
@@ -228,7 +242,10 @@ function AnomalyThreshold({
 							/>
 						</>
 					) : (
-						<Typography.Text data-testid="seasonality-text" className="sentence-text">
+						<Typography.Text
+							data-testid="seasonality-text"
+							className={styles.sentenceText}
+						>
 							seasonality
 						</Typography.Text>
 					)}

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.module.scss

@@ -0,0 +1,108 @@
+.thresholdItem {
+	display: flex;
+	flex-direction: column;
+	gap: 0;
+	margin-bottom: var(--spacing-8);
+}
+
+.thresholdRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-8);
+	margin-bottom: 2px;
+}
+
+.thresholdIndicator {
+	display: flex;
+}
+
+.thresholdDot {
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	flex-shrink: 0;
+}
+
+.thresholdControls {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	flex-wrap: wrap;
+
+	--input-background: var(--l3-background);
+	--input-hover-background: var(--l3-background);
+	--input-focus-background: var(--l3-background);
+	--input-border-color: var(--l3-border);
+	--input-hover-border-color: var(--internal-ant-border-color-hover);
+	--input-focus-border-color: var(--internal-ant-border-color-hover);
+
+	:global(.ant-input),
+	:global(.ant-input-number) {
+		background-color: var(--l3-background);
+		border: 1px solid var(--l3-border);
+		color: var(--l2-foreground);
+		height: 32px;
+
+		&::placeholder {
+			font-family: 'Space Mono';
+		}
+
+		&:hover {
+			border-color: var(--internal-ant-border-color-hover);
+		}
+
+		&:focus {
+			border-color: var(--internal-ant-border-color-focus);
+		}
+	}
+
+	:global(.ant-select) {
+		:global(.ant-select-selector) {
+			background-color: var(--l3-background);
+			border: 1px solid var(--l3-border);
+			color: var(--muted-foreground);
+
+			&:hover {
+				border-color: var(--internal-ant-border-color-hover);
+			}
+
+			&:focus {
+				border-color: var(--internal-ant-border-color-focus);
+			}
+		}
+
+		:global(.ant-select-selection-item) {
+			color: var(--l1-foreground);
+		}
+
+		:global(.ant-select-arrow) {
+			color: var(--muted-foreground);
+		}
+	}
+}
+
+.iconBtn {
+	color: var(--l2-foreground);
+	border: 1px solid var(--l3-border);
+	background-color: var(--l3-background);
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: none;
+}
+
+.sentenceText {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+	line-height: 1.5;
+	--typography-text-display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+}
+
+.highlightedText {
+	font-weight: bold;
+	color: var(--bg-robin-400);
+	margin: 0 4px;
+}

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -11,6 +11,8 @@ import { normalizeOperator } from '../utils';
 import { ThresholdItemProps } from './types';
 import { NotificationChannelsNotFoundContent } from './utils';
 
+import styles from './ThresholdItem.module.scss';
+
 function ThresholdItem({
 	threshold,
 	updateThreshold,
@@ -82,15 +84,16 @@ function ThresholdItem({
 	};
 
 	return (
-		<div key={threshold.id} className="threshold-item">
-			<div className="threshold-row">
-				<div className="threshold-indicator">
+		<div key={threshold.id} className={styles.thresholdItem}>
+			<div className={styles.thresholdRow}>
+				<div className={styles.thresholdIndicator}>
 					<div
-						className="threshold-dot"
+						className={styles.thresholdDot}
 						style={{ backgroundColor: threshold.color }}
+						data-testid="threshold-dot"
 					/>
 				</div>
-				<div className="threshold-controls">
+				<div className={styles.thresholdControls}>
 					<Input
 						placeholder="Enter threshold name"
 						value={threshold.label}
@@ -100,8 +103,10 @@ function ThresholdItem({
 						style={{ width: 200 }}
 						data-testid="threshold-name-input"
 					/>
-					<Typography.Text className="sentence-text">on value</Typography.Text>
-					<Typography.Text className="sentence-text highlighted-text">
+					<Typography.Text className={styles.sentenceText}>on value</Typography.Text>
+					<Typography.Text
+						className={`${styles.sentenceText} ${styles.highlightedText}`}
+					>
 						{getOperatorSymbol()}
 					</Typography.Text>
 					<Input
@@ -117,7 +122,9 @@ function ThresholdItem({
 					{yAxisUnitSelect}
 					{!notificationSettings.routingPolicies && (
 						<>
-							<Typography.Text className="sentence-text">send to</Typography.Text>
+							<Typography.Text className={styles.sentenceText}>
+								send to
+							</Typography.Text>
 							<Select
 								value={threshold.channels}
 								onChange={(value): void =>
@@ -154,7 +161,9 @@ function ThresholdItem({
 					)}
 					{showRecoveryThreshold && (
 						<>
-							<Typography.Text className="sentence-text">recover on</Typography.Text>
+							<Typography.Text className={styles.sentenceText}>
+								recover on
+							</Typography.Text>
 							<Input
 								placeholder="Enter recovery threshold value"
 								value={threshold.recoveryThresholdValue ?? ''}
@@ -170,7 +179,7 @@ function ThresholdItem({
 									type="default"
 									icon={<Trash size={16} />}
 									onClick={removeRecoveryThreshold}
-									className="icon-btn"
+									className={styles.iconBtn}
 									data-testid="remove-recovery-threshold-button"
 								/>
 							</Tooltip>
@@ -194,7 +203,7 @@ function ThresholdItem({
 									type="default"
 									icon={<CircleX size={16} />}
 									onClick={(): void => removeThreshold(threshold.id)}
-									className="icon-btn"
+									className={styles.iconBtn}
 									data-testid="remove-threshold-button"
 								/>
 							</Tooltip>