Merge branch 'main' into feat/gcp-cloud-integration

isOneClickIntegration only listed AWS and Azure, so IntegrationDetailPage
treated GCP as a legacy integration and polled
GET /integrations/gcp/connection_status every 5s via useGetIntegrationStatus.
GCP is a one-click cloud integration like AWS/Azure and has no such legacy
status endpoint, so add it to the allowlist to disable the poll.

.github/workflows/integrationci.yaml

@@ -54,7 +54,6 @@ jobs:
           - querierscalar
           - queriercommon
           - rawexportdata
-          - promqlconformance
           - querierauthz
           - role
           - rootuser

cmd/authz.go

@@ -93,13 +93,9 @@ func runGenerateAuthz(_ context.Context) error {
 	registry := coretypes.NewRegistry()
 
 	allowedResources := map[string]bool{
-		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                true,
-		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():           true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():                     true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String(): true,
 	}
 
 	allowedTypes := map[string]bool{}

cmd/enterprise/Dockerfile.with-web.integration

@@ -38,8 +38,7 @@ COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates
 
 COPY Makefile Makefile
-
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise
+RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
 
 COPY --from=build /opt/build ./web/

cmd/enterprise/meter.go

@@ -2,9 +2,9 @@ package main
 
 import (
 	"github.com/SigNoz/signoz/pkg/metercollector"
-	"github.com/SigNoz/signoz/pkg/telemetryschema/logstelemetryschema"
-	"github.com/SigNoz/signoz/pkg/telemetryschema/metricstelemetryschema"
-	"github.com/SigNoz/signoz/pkg/telemetryschema/tracestelemetryschema"
+	"github.com/SigNoz/signoz/pkg/telemetrylogs"
+	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
+	"github.com/SigNoz/signoz/pkg/telemetrytraces"
 	"github.com/SigNoz/signoz/pkg/types/retentiontypes"
 	"github.com/SigNoz/signoz/pkg/types/zeustypes"
 )
@@ -25,8 +25,8 @@ var meterConfigs = []metercollector.Config{
 			Name:                 zeustypes.MeterLogSize,
 			Unit:                 zeustypes.MeterUnitBytes,
 			Aggregation:          zeustypes.MeterAggregationSum,
-			DBName:               logstelemetryschema.DBName,
-			TableName:            logstelemetryschema.LogsV2LocalTableName,
+			DBName:               telemetrylogs.DBName,
+			TableName:            telemetrylogs.LogsV2LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultLogsRetentionDays,
 		},
 	},
@@ -36,8 +36,8 @@ var meterConfigs = []metercollector.Config{
 			Name:                 zeustypes.MeterSpanSize,
 			Unit:                 zeustypes.MeterUnitBytes,
 			Aggregation:          zeustypes.MeterAggregationSum,
-			DBName:               tracestelemetryschema.DBName,
-			TableName:            tracestelemetryschema.SpanIndexV3LocalTableName,
+			DBName:               telemetrytraces.DBName,
+			TableName:            telemetrytraces.SpanIndexV3LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultTracesRetentionDays,
 		},
 	},
@@ -47,8 +47,8 @@ var meterConfigs = []metercollector.Config{
 			Name:                 zeustypes.MeterDatapointCount,
 			Unit:                 zeustypes.MeterUnitCount,
 			Aggregation:          zeustypes.MeterAggregationSum,
-			DBName:               metricstelemetryschema.DBName,
-			TableName:            metricstelemetryschema.SamplesV4LocalTableName,
+			DBName:               telemetrymetrics.DBName,
+			TableName:            telemetrymetrics.SamplesV4LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultMetricsRetentionDays,
 		},
 	},

docs/api/openapi.yml

@@ -1496,9 +1496,6 @@ components:
       - redis
       - cloudsql_postgres
       - memorystore_redis
-      - computeengine
-      - gke
-      - cloudstorage
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -9937,9 +9934,14 @@ paths:
     get:
       deprecated: false
       description: This endpoint lists the services metadata for the specified cloud
-        provider, without any account context.
+        provider
       operationId: ListServicesMetadata
       parameters:
+      - in: query
+        name: cloud_integration_id
+        required: false
+        schema:
+          type: string
       - in: path
         name: cloud_provider
         required: true
@@ -9989,10 +9991,14 @@ paths:
   /api/v1/cloud_integrations/{cloud_provider}/services/{service_id}:
     get:
       deprecated: false
-      description: This endpoint gets a service definition for the specified cloud
-        provider, without any account context.
+      description: This endpoint gets a service for the specified cloud provider
       operationId: GetService
       parameters:
+      - in: query
+        name: cloud_integration_id
+        required: false
+        schema:
+          type: string
       - in: path
         name: cloud_provider
         required: true

docs/contributing/tests/e2e.md

@@ -227,14 +227,11 @@ cd tests/e2e
 # Single feature dir
 npx playwright test tests/alerts/ --project=chromium
 
-# Single sub-area
-npx playwright test tests/alerts/history/ --project=chromium
-
 # Single file
-npx playwright test tests/alerts/page.spec.ts --project=chromium
+npx playwright test tests/alerts/alerts.spec.ts --project=chromium
 
 # Single test by title grep
-npx playwright test --project=chromium -g "AL-01"
+npx playwright test --project=chromium -g "TC-01"
 ```
 
 ### Iterative modes
@@ -268,14 +265,7 @@ yarn test:staging
 | `SIGNOZ_E2E_PASSWORD` | Admin password. Bootstrap writes the integration-test default. |
 | `SIGNOZ_E2E_SEEDER_URL` | Seeder HTTP base URL — hit by specs that need per-test telemetry. |
 
-Precedence in `playwright.config.ts`, lowest to highest: `.env` (user-provided, staging) → `.env.local` (bootstrap-generated, local mode) → whatever is already in `process.env`. The config parses both files itself and only fills in keys the environment does not already define, so exporting a variable always wins:
-
-```bash
-# runs against a locally served frontend, not whatever .env.local points at
-SIGNOZ_E2E_BASE_URL=http://127.0.0.1:3301 pnpm test tests/alerts
-```
-
-This is deliberately not `dotenv.config({ override: true })`. That flag makes the *file* beat `process.env`, which silently discarded exported values — including the `SIGNOZ_E2E_BASE_URL` in `pnpm test:staging`, whenever a `.env.local` happened to exist.
+Loading order in `playwright.config.ts`: `.env` first (user-provided, staging), then `.env.local` with `override: true` (bootstrap-generated, local mode). Anything already set in `process.env` at yarn-test time wins because dotenv doesn't touch vars that are already present.
 
 ### Playwright options
 

ee/metercollector/telemetrymetercollector/provider.go

@@ -16,7 +16,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/metercollector"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
-	"github.com/SigNoz/signoz/pkg/telemetryschema/metertelemetryschema"
+	"github.com/SigNoz/signoz/pkg/telemetrymeter"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/licensetypes"
 	"github.com/SigNoz/signoz/pkg/types/retentiontypes"
@@ -153,7 +153,7 @@ func (provider *Provider) Collect(
 func buildOriginQuery(meterName string) (string, []any) {
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("toInt64(ifNull(min(unix_milli), 0))")
-	sb.From(metertelemetryschema.DBName + "." + metertelemetryschema.SamplesTableName)
+	sb.From(telemetrymeter.DBName + "." + telemetrymeter.SamplesTableName)
 	sb.Where(sb.Equal("metric_name", meterName))
 	return sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 }
@@ -171,7 +171,7 @@ func buildQuery(meterName string, segment *retentiontypes.RetentionPolicySegment
 
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select(selects...)
-	sb.From(metertelemetryschema.DBName + "." + metertelemetryschema.SamplesTableName)
+	sb.From(telemetrymeter.DBName + "." + telemetrymeter.SamplesTableName)
 	sb.Where(
 		sb.Equal("metric_name", meterName),
 		sb.GTE("unix_milli", segment.StartMs),

ee/modules/metricreductionrule/implmetricreductionrule/clickhouse.go

@@ -8,16 +8,16 @@ import (
 	sqlbuilder "github.com/huandu/go-sqlbuilder"
 
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/telemetryschema/metricstelemetryschema"
+	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
 )
 
 var (
-	reductionRulesTable = metricstelemetryschema.DBName + "." + metricstelemetryschema.ReductionRulesTableName
-	metadataTable       = metricstelemetryschema.DBName + "." + metricstelemetryschema.AttributesMetadataTableName
-	bufferSeriesTable   = metricstelemetryschema.DBName + "." + metricstelemetryschema.TimeseriesV4BufferTableName
+	reductionRulesTable = telemetrymetrics.DBName + "." + telemetrymetrics.ReductionRulesTableName
+	metadataTable       = telemetrymetrics.DBName + "." + telemetrymetrics.AttributesMetadataTableName
+	bufferSeriesTable   = telemetrymetrics.DBName + "." + telemetrymetrics.TimeseriesV4BufferTableName
 )
 
 const timeSeriesBucketMilli = int64(time.Hour / time.Millisecond)
@@ -192,7 +192,7 @@ func (c *clickhouse) ingestedSeriesCount(ctx context.Context, metricNames []stri
 
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("metric_name", "uniq(fingerprint)")
-	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
 	conds := []string{
 		sb.In("metric_name", names...),
 		sb.GE("unix_milli", startMs),
@@ -229,8 +229,8 @@ func (c *clickhouse) ingestedSeriesCount(ctx context.Context, metricNames []stri
 // reduced sample tables.
 func (c *clickhouse) reducedSeriesCount(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]uint64, error) {
 	out := make(map[string]uint64, len(metricNames))
-	for _, table := range []string{metricstelemetryschema.SamplesV4ReducedLastTableName, metricstelemetryschema.SamplesV4ReducedSumTableName} {
-		counts, err := c.reducedSeriesCountForTable(ctx, metricstelemetryschema.DBName+"."+table, metricNames, effectiveFrom, startMs, endMs)
+	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
+		counts, err := c.reducedSeriesCountForTable(ctx, telemetrymetrics.DBName+"."+table, metricNames, effectiveFrom, startMs, endMs)
 		if err != nil {
 			return nil, err
 		}
@@ -300,9 +300,9 @@ func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, eff
 		direction = "DESC"
 	}
 
-	ingestedTable := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName
-	reducedLast := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4ReducedLastTableName
-	reducedSum := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4ReducedSumTableName
+	ingestedTable := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName
+	reducedLast := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4ReducedLastTableName
+	reducedSum := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4ReducedSumTableName
 
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("base.metric_name AS metric_name", "ifNull(i.cnt, 0) AS ingested", "ifNull(d.cnt, 0) AS reduced")
@@ -352,16 +352,16 @@ func (c *clickhouse) SampleVolumeByMetric(ctx context.Context, metricNames []str
 	}
 	ctx = c.withThreads(ctx)
 
-	ingested, err := c.countSamplesByMetric(ctx, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4BufferTableName, "count()", metricNames, effectiveFrom, startMs, endMs)
+	ingested, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4BufferTableName, "count()", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
 
-	last, err := c.countSamplesByMetric(ctx, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4ReducedLastTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
+	last, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedLastTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
-	sum, err := c.countSamplesByMetric(ctx, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4ReducedSumTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
+	sum, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedSumTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
@@ -419,7 +419,7 @@ func (c *clickhouse) TotalVolume(ctx context.Context, startMs, endMs int64) (uin
 
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("uniq(fingerprint)", "count()")
-	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
 	sb.Where(sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs))
 
 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
@@ -470,7 +470,7 @@ func (c *clickhouse) SampleTimeseries(ctx context.Context, ruledMetrics []string
 func (c *clickhouse) totalSamplesByBucket(ctx context.Context, startMs, endMs int64) (map[int64]uint64, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select(sampleBucketExpr, "count()")
-	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
 	sb.Where(sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs))
 	sb.GroupBy("bucket")
 
@@ -485,7 +485,7 @@ func (c *clickhouse) ruledIngestedSamplesByBucket(ctx context.Context, metricNam
 
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select(sampleBucketExpr, "count()")
-	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
 	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
 	if len(effectiveFrom) > 0 {
 		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
@@ -499,7 +499,7 @@ func (c *clickhouse) ruledIngestedSamplesByBucket(ctx context.Context, metricNam
 // reduced 60s rows are versioned by computed_at, so count distinct buckets.
 func (c *clickhouse) ruledRetainedSamplesByBucket(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
 	out := make(map[int64]uint64)
-	for _, table := range []string{metricstelemetryschema.SamplesV4ReducedLastTableName, metricstelemetryschema.SamplesV4ReducedSumTableName} {
+	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
 		names := make([]any, len(metricNames))
 		for i, name := range metricNames {
 			names[i] = name
@@ -507,7 +507,7 @@ func (c *clickhouse) ruledRetainedSamplesByBucket(ctx context.Context, metricNam
 
 		sb := sqlbuilder.NewSelectBuilder()
 		sb.Select(sampleBucketExpr, "uniq(reduced_fingerprint, unix_milli)")
-		sb.From(metricstelemetryschema.DBName + "." + table)
+		sb.From(telemetrymetrics.DBName + "." + table)
 		conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
 		if len(effectiveFrom) > 0 {
 			conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))

frontend/docs/authz-guide.md

@@ -1,136 +0,0 @@
-# AuthZ Guide
-
-How to structure a page so it works with the permission system.
-
-We are migrating from the `ADMIN | EDITOR | VIEWER` roles to per-action checks. Instead of granting `VIEWER` and
-exposing everything, a user can now be granted access to a single resource, eg: `Logs` only.
-
-- [Prerequisites](#prerequisites)
-- [Core rules](#core-rules)
-- [Page patterns](#page-patterns)
-- [What "blocked" means](#what-blocked-means)
-- [Migration checklist](#migration-checklist)
-- [Testing](#testing)
-
-## Prerequisites
-
-Check whether the resource your page represents is supported: see
-[permissions.type.ts](../src/lib/authz/hooks/useAuthZ/permissions.type.ts) for the current resources and their allowed
-verbs.
-
-**If the resource is not listed there, skip authz for now**. The backend does not enforce it yet, so any frontend
-check would be decorative. Revisit once the resource is generated into that file (it is auto-generated from the
-backend).
-
-## Core rules
-
-These hold for every page. The per-pattern sections below only add to them.
-
-1. **A page is always reachable, regardless of permission.** The intended action must be known before permission can
-   be checked, so the route renders first and individual pieces are gated.
-2. **`update` requires both `read` and `update`.** A user who can write but cannot read the current value must not get
-   an edit affordance.
-3. **`delete` is independent of `read`.** Delete controls stay visible for a user who holds `delete` but not `read`.
-4. **Never gate per row.** If a user can `list`, render every row. Check `read` only when the row is opened (drawer or
-   detail route).
-5. **Gate the narrowest thing that works**, a button over a section, a section over a page.
-6. **A resource may be gated while a sub-resource is not.** A user without `read` on Service Accounts can still hold
-   `create` on API Keys, so blocking the outer container would hide work they are allowed to do.
-7. **Verbs not covered here** (`attach`, `detach`, `assignee`) behave like `delete`: gate the control that triggers
-   them, not the surrounding content.
-
-## Page patterns
-
-### List page
-
-![Visual rules for structuring a list page](./assets/list-example.svg)
-
-Without `list`, but with any of `read` / `create` / `update`, only the table is blocked:
-
-- Title, description, search filters and action buttons stay visible.
-- Filters and any control that drives the table are non-interactive.
-- The create button stays enabled if the user holds `create`.
-
-### Edit page
-
-![Visual rules for structuring an edit page](./assets/edit-example.svg)
-
-Without `read`:
-
-- Block the content with `withAuthZContent`, not the whole route.
-- Keep delete visible (rule 3).
-- Keep update blocked (rule 2).
-
-### Drawer
-
-![Visual rules for structuring a drawer](./assets/drawer-example.svg)
-
-Without `read`:
-
-- Block the drawer body, not the drawer itself.
-- Prefer routing that carries the resource ID in the URL, so delete stays reachable without `read`.
-- Keep update blocked (rule 2).
-- Watch for sub-resources the user may still be allowed to act on (rule 6).
-
-### Create
-
-Without `create`:
-
-| Entry point           | Gate with                                                     |
-| --------------------- | ------------------------------------------------------------- |
-| Button                | `AuthZButton`                                                 |
-| Dedicated create page | `withAuthZPage`                                               |
-| Create drawer opened directly (deep link) | `withAuthZContent` on the body + `AuthZButton` on footer actions |
-
-### Delete
-
-Gate the control with `AuthZButton`, or `AuthZTooltip` for a non-button trigger such as an icon or menu item.
-
-### Quick filters
-
-![Visual rules for structuring a page with quick filters](./assets/quick-filters-example.svg)
-
-## What "blocked" means
-
-Blocking is always a visible denial, never a silent removal. Use the components in
-[`lib/authz/components`](../src/lib/authz/components/README.md) rather than hand-rolling a check, they carry the
-denial message and the loading state.
-
-| Scope           | Component                                 | Denied state                                |
-| --------------- | ----------------------------------------- | ------------------------------------------- |
-| Button          | `AuthZButton`                             | Disabled + tooltip                          |
-| Any element      | `AuthZTooltip`                            | Disabled child + tooltip                    |
-| Section         | `withAuthZContent` / `AuthZGuardContent`  | Inline `PermissionDeniedCallout`            |
-| Page / route    | `withAuthZPage` / `AuthZGuardPage`        | `PermissionDeniedFullPage`                  |
-| Custom fallback | `withAuthZ` / `AuthZGuard`                | Whatever you pass as `fallback`             |
-
-Prefer the HOC (`withAuthZ*`); reach for the JSX guard (`AuthZGuard*`) when the gate depends on conditional rendering
-and an HOC cannot express it. The components README has the full decision tree and how to build the `checks` array.
-
-## Migration checklist
-
-Use the existing components. Create a new one only if none fit.
-
-- [ ] Can I apply a `withAuthZ*` variant directly, or must I extract the content into a component first?
-  - If extraction is needed, declare the new content component in the same file to keep the diff small, then move it
-    to its own file in a follow-up commit or PR.
-- [ ] Is the layout structured to respect the [core rules](#core-rules)?
-  - If not, raise it in the frontend Slack channel before reshaping the page.
-- [ ] Am I gating a shared component rather than a page or section?
-  - If so, it must stay functional with no permission. Example: the Query Builder works without field suggestions when
-    the user cannot read them.
-
-## Testing
-
-### Devtool
-
-Press `Cmd + K` (`Ctrl + K` on Windows/Linux) to open the shortcuts, search for `AuthZ`, and pick the first
-result. The devtool simulates granted and denied permissions across the UI.
-
-Available only in local development, it is stripped from production builds.
-
-### Unit tests
-
-[`lib/authz/utils/README.md`](../src/lib/authz/utils/README.md) covers the `*.authz.test.tsx` naming convention, the
-MSW handlers (`setupAuthzAdmin`, `setupAuthzDenyAll`, `setupAuthzDeny`, `setupAuthzAllow`,
-`setupAuthzGrantByPrefix`), and how to test the loading state.

frontend/src/AppRoutes/Private.tsx

@@ -14,10 +14,7 @@ import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
 import { USER_ROLES } from 'types/roles';
-import {
-	routePermission,
-	routeWithInitialAuthZSupport,
-} from 'utils/permission';
+import { routePermission } from 'utils/permission';
 
 import routes, {
 	LIST_LICENSES,
@@ -45,6 +42,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 	const isAIObservabilityEnabled = useIsAIObservabilityEnabled();
+
 	const mapRoutes = useMemo(
 		() =>
 			new Map(
@@ -228,16 +226,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		if (isPrivate) {
 			if (isLoggedInState) {
 				const route = routePermission[key];
-				const hasInitialAuthZSupport = Object.hasOwn(
-					routeWithInitialAuthZSupport,
-					key,
-				);
-
-				if (
-					route &&
-					route.find((e) => e === user.role) === undefined &&
-					hasInitialAuthZSupport === false
-				) {
+				if (route && route.find((e) => e === user.role) === undefined) {
 					return <Redirect to={ROUTES.UN_AUTHORIZED} />;
 				}
 			} else {

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -17,7 +17,6 @@ import {
 } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
 import { ROLES, USER_ROLES } from 'types/roles';
-import { routeWithInitialAuthZSupport } from 'utils/permission';
 
 import PrivateRoute from '../Private';
 
@@ -179,7 +178,6 @@ function createMockAppContext(
 		isFetchingHosts: false,
 		isFetchingFeatureFlags: false,
 		isFetchingOrgPreferences: false,
-		isFetchingUserPreferences: false,
 		userFetchError: null,
 		activeLicenseFetchError: null,
 		hostsFetchError: null,
@@ -200,39 +198,24 @@ function createMockAppContext(
 	};
 }
 
-// Roles that no authz-aware route grants through the legacy routePermission table
-const DENIED_ROLES: ROLES[] = [
-	USER_ROLES.ANONYMOUS as ROLES,
-	USER_ROLES.AUTHOR as ROLES,
-];
-
-const PERMITTED_ROLES: ROLES[] = [
-	USER_ROLES.ADMIN as ROLES,
-	USER_ROLES.EDITOR as ROLES,
-	USER_ROLES.VIEWER as ROLES,
-];
-
-interface AuthzRouteCase {
-	path: string;
-	deniedRoles: ROLES[];
-}
-
 interface RenderPrivateRouteOptions {
 	initialRoute?: string;
 	appContext?: Partial<IAppContext>;
 	isCloudUser?: boolean;
 }
 
-function buildPrivateRouteTree(
-	options: RenderPrivateRouteOptions,
-): ReactElement {
-	const { initialRoute = ROUTES.HOME, appContext = {} } = options;
+function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
+	const {
+		initialRoute = ROUTES.HOME,
+		appContext = {},
+		isCloudUser = true,
+	} = options;
 
-	const contextValue = createMockAppContext({
-		...appContext,
-	});
+	mockIsCloudUser = isCloudUser;
 
-	return (
+	const contextValue = createMockAppContext(appContext);
+
+	render(
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter initialEntries={[initialRoute]}>
 				<AppContext.Provider value={contextValue}>
@@ -246,15 +229,10 @@ function buildPrivateRouteTree(
 					</PrivateRoute>
 				</AppContext.Provider>
 			</MemoryRouter>
-		</QueryClientProvider>
+		</QueryClientProvider>,
 	);
 }
 
-function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
-	mockIsCloudUser = options.isCloudUser ?? true;
-	render(buildPrivateRouteTree(options));
-}
-
 // Generic assertion helpers for navigation behavior
 // Using location-based assertions since Private.tsx now uses Redirect component
 
@@ -1454,25 +1432,6 @@ describe('PrivateRoute', () => {
 
 			assertStaysOnRoute(ROUTES.GET_STARTED_WITH_CLOUD);
 		});
-
-		it.each([...PERMITTED_ROLES, ...DENIED_ROLES])(
-			'should render the unauthorized page for a %s instead of bouncing off it',
-			(role) => {
-				// routePermission.UN_AUTHORIZED must grant every role: a role denied here
-				// is redirected to /un-authorized and then redirected away from it again,
-				// which loops until React bails out with a blank screen.
-				renderPrivateRoute({
-					initialRoute: ROUTES.UN_AUTHORIZED,
-					appContext: {
-						isLoggedIn: true,
-						user: createMockUser({ role }),
-					},
-				});
-
-				assertStaysOnRoute(ROUTES.UN_AUTHORIZED);
-				assertRendersChildren();
-			},
-		);
 	});
 
 	describe('Edge Cases', () => {
@@ -1518,174 +1477,6 @@ describe('PrivateRoute', () => {
 		});
 	});
 
-	describe('AuthZ Support (routeWithInitialAuthZSupport)', () => {
-		// Routes in routeWithInitialAuthZSupport always bypass legacy role check
-		const AUTHZ_ROUTE_CASES: Record<
-			keyof typeof routeWithInitialAuthZSupport,
-			AuthzRouteCase
-		> = {
-			// Everything under /settings resolves to the non-exact SETTINGS route
-			SETTINGS: { path: ROUTES.SETTINGS, deniedRoles: DENIED_ROLES },
-			MY_SETTINGS: { path: ROUTES.MY_SETTINGS, deniedRoles: DENIED_ROLES },
-			ROLES_SETTINGS: { path: ROUTES.ROLES_SETTINGS, deniedRoles: DENIED_ROLES },
-			ROLE_CREATE: { path: ROUTES.ROLE_CREATE, deniedRoles: DENIED_ROLES },
-			ROLE_DETAILS: {
-				path: ROUTES.ROLE_DETAILS.replace(':roleId', 'role-id-1'),
-				deniedRoles: DENIED_ROLES,
-			},
-			ROLE_EDIT: {
-				path: ROUTES.ROLE_EDIT.replace(':roleId', 'role-id-1'),
-				deniedRoles: DENIED_ROLES,
-			},
-			SERVICE_ACCOUNTS_SETTINGS: {
-				path: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
-				deniedRoles: DENIED_ROLES,
-			},
-			TRACES_EXPLORER: { path: ROUTES.TRACES_EXPLORER, deniedRoles: DENIED_ROLES },
-			TRACE: { path: ROUTES.TRACE, deniedRoles: DENIED_ROLES },
-			TRACE_DETAIL: {
-				path: ROUTES.TRACE_DETAIL.replace(':id', 'trace-id-1'),
-				deniedRoles: DENIED_ROLES,
-			},
-			TRACE_DETAIL_OLD: {
-				path: ROUTES.TRACE_DETAIL_OLD.replace(':id', 'trace-id-1'),
-				deniedRoles: DENIED_ROLES,
-			},
-			// LOGS and LOGS_EXPLORER share a path - matchPath resolves it to whichever
-			// route definition comes last, and both keys are authz-aware either way.
-			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
-			LOGS_EXPLORER: { path: ROUTES.LOGS_EXPLORER, deniedRoles: DENIED_ROLES },
-			LIVE_LOGS: { path: ROUTES.LIVE_LOGS, deniedRoles: DENIED_ROLES },
-			OLD_LOGS_EXPLORER: {
-				path: ROUTES.OLD_LOGS_EXPLORER,
-				deniedRoles: DENIED_ROLES,
-			},
-			METRICS_EXPLORER: {
-				path: ROUTES.METRICS_EXPLORER,
-				deniedRoles: DENIED_ROLES,
-			},
-			METRICS_EXPLORER_EXPLORER: {
-				path: ROUTES.METRICS_EXPLORER_EXPLORER,
-				deniedRoles: DENIED_ROLES,
-			},
-			METRICS_EXPLORER_VOLUME_CONTROL: {
-				path: ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
-				deniedRoles: DENIED_ROLES,
-			},
-			METER: { path: ROUTES.METER, deniedRoles: DENIED_ROLES },
-			METER_EXPLORER: { path: ROUTES.METER_EXPLORER, deniedRoles: DENIED_ROLES },
-			// SUPPORT already grants ANONYMOUS in routePermission, so only AUTHOR
-			// exercises the redirect branch here.
-			SUPPORT: {
-				path: ROUTES.SUPPORT,
-				deniedRoles: [USER_ROLES.AUTHOR as ROLES],
-			},
-		};
-
-		const authzRouteRolePairs: [string, string, ROLES][] = Object.entries(
-			AUTHZ_ROUTE_CASES,
-		).flatMap(([name, { path, deniedRoles }]) =>
-			deniedRoles.map((role): [string, string, ROLES] => [name, path, role]),
-		);
-
-		// Routes with no authz check - legacy role check still applies
-		const NON_AUTHZ_ROUTE_CASES: [string, string, ROLES][] = [
-			['ALERTS_NEW', ROUTES.ALERTS_NEW, USER_ROLES.VIEWER as ROLES],
-			['LIST_LICENSES', ROUTES.LIST_LICENSES, USER_ROLES.EDITOR as ROLES],
-			['ONBOARDING', ROUTES.ONBOARDING, USER_ROLES.VIEWER as ROLES],
-			['APPLICATION', ROUTES.APPLICATION, USER_ROLES.ANONYMOUS as ROLES],
-			[
-				'METRICS_EXPLORER_VIEWS',
-				ROUTES.METRICS_EXPLORER_VIEWS,
-				USER_ROLES.ANONYMOUS as ROLES,
-			],
-		];
-
-		it.each(authzRouteRolePairs)(
-			'should not redirect %s (%s) for role %s - authz routes bypass legacy role check',
-			(_name, path, role) => {
-				// Routes in routeWithInitialAuthZSupport always bypass the legacy role check.
-				// Authorization is handled by downstream components via fine-grained authz.
-				renderPrivateRoute({
-					initialRoute: path,
-					appContext: {
-						isLoggedIn: true,
-						user: createMockUser({ role }),
-					},
-				});
-
-				assertStaysOnRoute(path);
-				assertRendersChildren();
-			},
-		);
-
-		it.each([...PERMITTED_ROLES, ...DENIED_ROLES])(
-			'should not redirect a %s from an authz-aware route',
-			(role) => {
-				// All roles pass through - authorization handled downstream
-				renderPrivateRoute({
-					initialRoute: ROUTES.LOGS_EXPLORER,
-					appContext: {
-						isLoggedIn: true,
-						user: createMockUser({ role }),
-					},
-				});
-
-				assertStaysOnRoute(ROUTES.LOGS_EXPLORER);
-				assertRendersChildren();
-			},
-		);
-
-		it.each(NON_AUTHZ_ROUTE_CASES)(
-			'should redirect %s (%s) for role %s - non-authz routes use legacy role check',
-			async (_name, path, role) => {
-				// Routes NOT in routeWithInitialAuthZSupport still use legacy role check
-				renderPrivateRoute({
-					initialRoute: path,
-					appContext: {
-						isLoggedIn: true,
-						user: createMockUser({ role }),
-					},
-				});
-
-				await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
-			},
-		);
-
-		it.each(authzRouteRolePairs)(
-			'should still redirect unauthenticated users away from %s (%s) with role %s',
-			async (_name, path, role) => {
-				// The authz bypass only relaxes the role check, never the login check.
-				renderPrivateRoute({
-					initialRoute: path,
-					appContext: {
-						isLoggedIn: false,
-						user: createMockUser({ role }),
-					},
-				});
-
-				await assertRedirectsTo(ROUTES.LOGIN);
-			},
-		);
-
-		it('should still redirect to workspace locked from an authz-aware route', async () => {
-			// Workspace guards run before the role check and must not be bypassed.
-			renderPrivateRoute({
-				initialRoute: ROUTES.LOGS_EXPLORER,
-				appContext: {
-					isLoggedIn: true,
-					isFetchingActiveLicense: false,
-					activeLicense: createMockLicense({ platform: LicensePlatform.CLOUD }),
-					trialInfo: createMockTrialInfo({ workSpaceBlock: true }),
-					user: createMockUser({ role: USER_ROLES.VIEWER as ROLES }),
-				},
-				isCloudUser: true,
-			});
-
-			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
-		});
-	});
-
 	describe('Old channel route redirects', () => {
 		it.each([
 			['/settings/channels', '/alerts', 'tab=Channels'],

frontend/src/api/ErrorResponseHandlerForGeneratedAPIs.ts

@@ -2,29 +2,6 @@ import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import APIError from 'types/api/error';
 
-// The wire shape these handlers can actually rely on. The generated
-// RenderErrorResponseDTO marks code/message/url/errors as required, but the
-// server omits any of them even on valid errors (e.g. a 400 with just a
-// message), so a present `error` object is all the guard can guarantee.
-type ErrorEnvelope = {
-	error: {
-		code?: string;
-		message?: string;
-		url?: string;
-		errors?: { message?: string }[];
-	};
-};
-
-function isErrorEnvelope(data: unknown): data is ErrorEnvelope {
-	return (
-		typeof data === 'object' &&
-		data !== null &&
-		'error' in data &&
-		typeof (data as ErrorEnvelope).error === 'object' &&
-		(data as ErrorEnvelope).error !== null
-	);
-}
-
 // @deprecated Use convertToApiError instead
 export function ErrorResponseHandlerForGeneratedAPIs(
 	error: AxiosError<RenderErrorResponseDTO>,
@@ -33,29 +10,15 @@ export function ErrorResponseHandlerForGeneratedAPIs(
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
-		// The body isn't guaranteed to be an error envelope — e.g. a gateway 5xx
-		// with an HTML/empty body during a deploy. Verify the shape before reading
-		// it; otherwise synthesize a consistent error from the status.
-		const data: unknown = response.data;
-		if (isErrorEnvelope(data)) {
-			const { code, message, url, errors } = data.error;
-			throw new APIError({
-				httpStatusCode: response.status || 500,
-				error: {
-					code: code ?? '',
-					message: message ?? '',
-					url: url ?? '',
-					errors: (errors ?? []).map((e) => ({ message: e.message ?? '' })),
-				},
-			});
-		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: 'UPSTREAM_UNAVAILABLE',
-				message: error.message || 'Something went wrong',
-				url: '',
-				errors: [],
+				code: response.data.error.code,
+				message: response.data.error.message,
+				url: response.data.error.url ?? '',
+				errors: (response.data.error.errors ?? []).map((e) => ({
+					message: e.message ?? '',
+				})),
 			},
 		});
 	}
@@ -99,7 +62,9 @@ export function convertToApiError(
 	return new APIError({
 		httpStatusCode: response?.status || error.status || 500,
 		error: {
-			code: errorData?.code || 'UPSTREAM_UNAVAILABLE',
+			code:
+				errorData?.code ||
+				String(response?.status || error.code || 'unknown_error'),
 			message:
 				errorData?.message ||
 				response?.statusText ||

frontend/src/api/ErrorResponseHandlerV2.ts

@@ -2,38 +2,19 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
 
-function isErrorV2Resp(data: unknown): data is ErrorV2Resp {
-	return (
-		typeof data === 'object' &&
-		data !== null &&
-		'error' in data &&
-		typeof (data as ErrorV2Resp).error?.code === 'string'
-	);
-}
-
 // reference - https://axios-http.com/docs/handling_errors
 export function ErrorResponseHandlerV2(error: AxiosError<ErrorV2Resp>): never {
 	const { response, request } = error;
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
-		// response.data isn't guaranteed to be a V2 envelope (e.g. a gateway 5xx
-		// with an HTML/empty body during a deploy), so verify the shape first.
-		const data: unknown = response.data;
-		if (isErrorV2Resp(data)) {
-			const { code, message, url, errors } = data.error;
-			throw new APIError({
-				httpStatusCode: response.status || 500,
-				error: { code, message, url, errors },
-			});
-		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: 'UPSTREAM_UNAVAILABLE',
-				message: error.message || 'Something went wrong',
-				url: '',
-				errors: [],
+				code: response.data.error.code,
+				message: response.data.error.message,
+				url: response.data.error.url,
+				errors: response.data.error.errors,
 			},
 		});
 	}

frontend/src/api/__tests__/ErrorResponseHandlerV2.test.ts

@@ -1,126 +0,0 @@
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp } from 'types/api';
-import APIError from 'types/api/error';
-
-function asAxiosError(partial: Partial<AxiosError>): AxiosError<ErrorV2Resp> {
-	return partial as AxiosError<ErrorV2Resp>;
-}
-
-// ErrorResponseHandlerV2 always throws — capture the APIError so assertions stay
-// unconditional.
-function runHandler(error: AxiosError<ErrorV2Resp>): APIError {
-	try {
-		ErrorResponseHandlerV2(error);
-	} catch (thrown) {
-		return thrown as APIError;
-	}
-	throw new Error('expected ErrorResponseHandlerV2 to throw');
-}
-
-type ExpectedError = {
-	httpStatusCode: number;
-	code: string;
-	message: string;
-	errors: { message: string }[];
-};
-
-// One row per response shape the handler must normalize. New shapes (with
-// different bodies) can be added here without a new test block.
-const cases: {
-	name: string;
-	error: AxiosError<ErrorV2Resp>;
-	expected: ExpectedError;
-}[] = [
-	{
-		name: 'well-formed V2 error envelope',
-		error: asAxiosError({
-			message: 'Request failed with status code 400',
-			response: {
-				status: 400,
-				data: {
-					error: {
-						code: 'bad_request',
-						message: 'Invalid dashboard payload',
-						url: 'https://signoz.io/docs',
-						errors: [{ message: 'name is required' }, { message: 'name too long' }],
-					},
-				},
-			} as AxiosError['response'],
-		}),
-		expected: {
-			httpStatusCode: 400,
-			code: 'bad_request',
-			message: 'Invalid dashboard payload',
-			errors: [{ message: 'name is required' }, { message: 'name too long' }],
-		},
-	},
-	{
-		// Regression: during a deployment the gateway returns a 5xx with a
-		// non-envelope body. Reading response.data.error.code used to throw a
-		// TypeError from inside the handler itself. See engineering-pod#5760.
-		name: '5xx with a non-envelope HTML body',
-		error: asAxiosError({
-			message: 'Request failed with status code 503',
-			response: {
-				status: 503,
-				data: '<html><body>503 Service Temporarily Unavailable</body></html>',
-			} as AxiosError['response'],
-		}),
-		expected: {
-			httpStatusCode: 503,
-			code: 'UPSTREAM_UNAVAILABLE',
-			message: 'Request failed with status code 503',
-			errors: [],
-		},
-	},
-	{
-		name: '5xx with an empty body',
-		error: asAxiosError({
-			message: 'Request failed with status code 502',
-			response: {
-				status: 502,
-				data: undefined,
-			} as AxiosError['response'],
-		}),
-		expected: {
-			httpStatusCode: 502,
-			code: 'UPSTREAM_UNAVAILABLE',
-			message: 'Request failed with status code 502',
-			errors: [],
-		},
-	},
-	{
-		name: 'no response received (network error)',
-		error: asAxiosError({
-			message: 'Network Error',
-			code: 'ERR_NETWORK',
-			name: 'AxiosError',
-			request: {},
-		}),
-		expected: {
-			httpStatusCode: 500,
-			code: 'ERR_NETWORK',
-			message: 'Network Error',
-			errors: [],
-		},
-	},
-];
-
-describe('ErrorResponseHandlerV2', () => {
-	it.each(cases)(
-		'normalizes $name into a consistent APIError',
-		({ error, expected }) => {
-			const apiError = runHandler(error);
-
-			expect(apiError).toBeInstanceOf(APIError);
-			expect(apiError.getHttpStatusCode()).toBe(expected.httpStatusCode);
-			expect(apiError.getErrorCode()).toBe(expected.code);
-			expect(apiError.getErrorMessage()).toBe(expected.message);
-			// The sub-error messages feed several parts of the UI, so assert them.
-			expect(apiError.getErrorDetails().error.errors).toStrictEqual(
-				expected.errors,
-			);
-		},
-	);
-});

frontend/src/api/alerts/ruleStats.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleStatsPayload } from 'types/api/alerts/def';
+import { RuleStatsProps } from 'types/api/alerts/ruleStats';
+
+const ruleStats = async (
+	props: RuleStatsProps,
+): Promise<SuccessResponse<AlertRuleStatsPayload> | ErrorResponse> => {
+	try {
+		const response = await axios.post(`/rules/${props.id}/history/stats`, {
+			start: props.start,
+			end: props.end,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default ruleStats;

frontend/src/api/alerts/timelineGraph.ts

@@ -0,0 +1,33 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleTimelineGraphResponsePayload } from 'types/api/alerts/def';
+import { GetTimelineGraphRequestProps } from 'types/api/alerts/timelineGraph';
+
+const timelineGraph = async (
+	props: GetTimelineGraphRequestProps,
+): Promise<
+	SuccessResponse<AlertRuleTimelineGraphResponsePayload> | ErrorResponse
+> => {
+	try {
+		const response = await axios.post(
+			`/rules/${props.id}/history/overall_status`,
+			{
+				start: props.start,
+				end: props.end,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default timelineGraph;

frontend/src/api/alerts/timelineTable.ts

@@ -0,0 +1,36 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleTimelineTableResponsePayload } from 'types/api/alerts/def';
+import { GetTimelineTableRequestProps } from 'types/api/alerts/timelineTable';
+
+const timelineTable = async (
+	props: GetTimelineTableRequestProps,
+): Promise<
+	SuccessResponse<AlertRuleTimelineTableResponsePayload> | ErrorResponse
+> => {
+	try {
+		const response = await axios.post(`/rules/${props.id}/history/timeline`, {
+			start: props.start,
+			end: props.end,
+			offset: props.offset,
+			limit: props.limit,
+			order: props.order,
+			state: props.state,
+			// TODO(shaheer): implement filters
+			filters: props.filters,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default timelineTable;

frontend/src/api/alerts/topContributors.ts

@@ -0,0 +1,33 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleTopContributorsPayload } from 'types/api/alerts/def';
+import { TopContributorsProps } from 'types/api/alerts/topContributors';
+
+const topContributors = async (
+	props: TopContributorsProps,
+): Promise<
+	SuccessResponse<AlertRuleTopContributorsPayload> | ErrorResponse
+> => {
+	try {
+		const response = await axios.post(
+			`/rules/${props.id}/history/top_contributors`,
+			{
+				start: props.start,
+				end: props.end,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default topContributors;

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

@@ -36,12 +36,14 @@ import type {
 	GetConnectionCredentials200,
 	GetConnectionCredentialsPathParameters,
 	GetService200,
+	GetServiceParams,
 	GetServicePathParameters,
 	ListAccountServicesMetadata200,
 	ListAccountServicesMetadataPathParameters,
 	ListAccounts200,
 	ListAccountsPathParameters,
 	ListServicesMetadata200,
+	ListServicesMetadataParams,
 	ListServicesMetadataPathParameters,
 	RenderErrorResponseDTO,
 	UpdateAccountPathParameters,
@@ -1160,24 +1162,30 @@ export const invalidateGetConnectionCredentials = async (
 };
 
 /**
- * This endpoint lists the services metadata for the specified cloud provider, without any account context.
+ * This endpoint lists the services metadata for the specified cloud provider
  * @summary List services metadata
  */
 export const listServicesMetadata = (
 	{ cloudProvider }: ListServicesMetadataPathParameters,
+	params?: ListServicesMetadataParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<ListServicesMetadata200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/services`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getListServicesMetadataQueryKey = ({
-	cloudProvider,
-}: ListServicesMetadataPathParameters) => {
-	return [`/api/v1/cloud_integrations/${cloudProvider}/services`] as const;
+export const getListServicesMetadataQueryKey = (
+	{ cloudProvider }: ListServicesMetadataPathParameters,
+	params?: ListServicesMetadataParams,
+) => {
+	return [
+		`/api/v1/cloud_integrations/${cloudProvider}/services`,
+		...(params ? [params] : []),
+	] as const;
 };
 
 export const getListServicesMetadataQueryOptions = <
@@ -1185,6 +1193,7 @@ export const getListServicesMetadataQueryOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListServicesMetadataPathParameters,
+	params?: ListServicesMetadataParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof listServicesMetadata>>,
@@ -1196,11 +1205,12 @@ export const getListServicesMetadataQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getListServicesMetadataQueryKey({ cloudProvider });
+		queryOptions?.queryKey ??
+		getListServicesMetadataQueryKey({ cloudProvider }, params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof listServicesMetadata>>
-	> = ({ signal }) => listServicesMetadata({ cloudProvider }, signal);
+	> = ({ signal }) => listServicesMetadata({ cloudProvider }, params, signal);
 
 	return {
 		queryKey,
@@ -1228,6 +1238,7 @@ export function useListServicesMetadata<
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListServicesMetadataPathParameters,
+	params?: ListServicesMetadataParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof listServicesMetadata>>,
@@ -1238,6 +1249,7 @@ export function useListServicesMetadata<
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
 	const queryOptions = getListServicesMetadataQueryOptions(
 		{ cloudProvider },
+		params,
 		options,
 	);
 
@@ -1254,10 +1266,11 @@ export function useListServicesMetadata<
 export const invalidateListServicesMetadata = async (
 	queryClient: QueryClient,
 	{ cloudProvider }: ListServicesMetadataPathParameters,
+	params?: ListServicesMetadataParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getListServicesMetadataQueryKey({ cloudProvider }) },
+		{ queryKey: getListServicesMetadataQueryKey({ cloudProvider }, params) },
 		options,
 	);
 
@@ -1265,26 +1278,29 @@ export const invalidateListServicesMetadata = async (
 };
 
 /**
- * This endpoint gets a service definition for the specified cloud provider, without any account context.
+ * This endpoint gets a service for the specified cloud provider
  * @summary Get service
  */
 export const getService = (
 	{ cloudProvider, serviceId }: GetServicePathParameters,
+	params?: GetServiceParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetService200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getGetServiceQueryKey = ({
-	cloudProvider,
-	serviceId,
-}: GetServicePathParameters) => {
+export const getGetServiceQueryKey = (
+	{ cloudProvider, serviceId }: GetServicePathParameters,
+	params?: GetServiceParams,
+) => {
 	return [
 		`/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
+		...(params ? [params] : []),
 	] as const;
 };
 
@@ -1293,6 +1309,7 @@ export const getGetServiceQueryOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, serviceId }: GetServicePathParameters,
+	params?: GetServiceParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getService>>,
@@ -1304,11 +1321,12 @@ export const getGetServiceQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetServiceQueryKey({ cloudProvider, serviceId });
+		queryOptions?.queryKey ??
+		getGetServiceQueryKey({ cloudProvider, serviceId }, params);
 
 	const queryFn: QueryFunction<Awaited<ReturnType<typeof getService>>> = ({
 		signal,
-	}) => getService({ cloudProvider, serviceId }, signal);
+	}) => getService({ cloudProvider, serviceId }, params, signal);
 
 	return {
 		queryKey,
@@ -1334,6 +1352,7 @@ export function useGetService<
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, serviceId }: GetServicePathParameters,
+	params?: GetServiceParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getService>>,
@@ -1344,6 +1363,7 @@ export function useGetService<
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
 	const queryOptions = getGetServiceQueryOptions(
 		{ cloudProvider, serviceId },
+		params,
 		options,
 	);
 
@@ -1360,10 +1380,11 @@ export function useGetService<
 export const invalidateGetService = async (
 	queryClient: QueryClient,
 	{ cloudProvider, serviceId }: GetServicePathParameters,
+	params?: GetServiceParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetServiceQueryKey({ cloudProvider, serviceId }) },
+		{ queryKey: getGetServiceQueryKey({ cloudProvider, serviceId }, params) },
 		options,
 	);
 

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -2815,9 +2815,6 @@ export enum CloudintegrationtypesServiceIDDTO {
 	redis = 'redis',
 	cloudsql_postgres = 'cloudsql_postgres',
 	memorystore_redis = 'memorystore_redis',
-	computeengine = 'computeengine',
-	gke = 'gke',
-	cloudstorage = 'cloudstorage',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -10207,6 +10204,14 @@ export type GetConnectionCredentials200 = {
 export type ListServicesMetadataPathParameters = {
 	cloudProvider: string;
 };
+export type ListServicesMetadataParams = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	cloud_integration_id?: string;
+};
+
 export type ListServicesMetadata200 = {
 	data: CloudintegrationtypesGettableServicesMetadataDTO;
 	/**
@@ -10219,6 +10224,14 @@ export type GetServicePathParameters = {
 	cloudProvider: string;
 	serviceId: string;
 };
+export type GetServiceParams = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	cloud_integration_id?: string;
+};
+
 export type GetService200 = {
 	data: CloudintegrationtypesServiceDTO;
 	/**

frontend/src/assets/Logos/gcp-cloud-storage.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#aecbfa;}.cls-2{fill:#669df6;}.cls-3{fill:#4285f4;}.cls-4{fill:#fff;}</style></defs><title>Icon_24px_CloudStorage_Color</title><g data-name="Product Icons"><rect class="cls-1" x="2" y="4" width="20" height="7"/><rect class="cls-2" x="20" y="4" width="2" height="7"/><polygon class="cls-3" points="22 4 20 4 20 11 22 4"/><rect class="cls-2" x="2" y="4" width="2" height="7"/><rect class="cls-4" x="6" y="7" width="6" height="1"/><rect class="cls-4" x="15" y="6" width="3" height="3" rx="1.5"/><rect class="cls-1" x="2" y="13" width="20" height="7"/><rect class="cls-2" x="20" y="13" width="2" height="7"/><polygon class="cls-3" points="22 13 20 13 20 20 22 13"/><rect class="cls-2" x="2" y="13" width="2" height="7"/><rect class="cls-4" x="6" y="16" width="6" height="1"/><rect class="cls-4" x="15" y="15" width="3" height="3" rx="1.5"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1200" height="800" viewBox="-19.2 -28.483 166.401 170.898"><g transform="translate(0 -7.034)"><linearGradient id="a" x1="64" x2="64" y1="7.034" y2="120.789" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4387fd"/><stop offset="1" stop-color="#4683ea"/></linearGradient><path fill="url(#a)" d="M27.79 115.217 1.54 69.749a11.5 11.5 0 0 1 0-11.499l26.25-45.467a11.5 11.5 0 0 1 9.96-5.75h52.5a11.5 11.5 0 0 1 9.959 5.75l26.25 45.467a11.5 11.5 0 0 1 0 11.5l-26.25 45.466a11.5 11.5 0 0 1-9.959 5.75h-52.5a11.5 11.5 0 0 1-9.96-5.75z"/></g><g transform="translate(0 -7.034)"><defs><path id="b" d="M27.791 115.217 1.541 69.749a11.5 11.5 0 0 1 0-11.499l26.25-45.467a11.5 11.5 0 0 1 9.959-5.75h52.5a11.5 11.5 0 0 1 9.96 5.75l26.25 45.467a11.5 11.5 0 0 1 0 11.5l-26.25 45.466a11.5 11.5 0 0 1-9.96 5.75h-52.5a11.5 11.5 0 0 1-9.959-5.75z"/></defs><clipPath id="c"><use xlink:href="#b" width="100%" height="100%" overflow="visible"/></clipPath><path d="m49.313 53.875-7.01 6.99 5.957 5.958-5.898 10.476 44.635 44.636 10.816.002L118.936 84 85.489 50.55z" clip-path="url(#c)" opacity=".07"/></g><path fill="#fff" d="M84.7 43.236H43.264c-.667 0-1.212.546-1.212 1.214v8.566c0 .666.546 1.212 1.212 1.212H84.7c.667 0 1.213-.546 1.213-1.212v-8.568c0-.666-.545-1.213-1.212-1.213m-6.416 7.976a2.484 2.484 0 0 1-2.477-2.48 2.475 2.475 0 0 1 2.477-2.477c1.37 0 2.48 1.103 2.48 2.477a2.48 2.48 0 0 1-2.48 2.48m6.415 8.491-41.436.002c-.667 0-1.212.546-1.212 1.214v8.565c0 .666.546 1.213 1.212 1.213H84.7c.667 0 1.213-.547 1.213-1.213v-8.567c0-.666-.545-1.214-1.212-1.214m-6.416 7.976a2.483 2.483 0 0 1-2.477-2.48 2.475 2.475 0 0 1 2.477-2.477 2.48 2.48 0 1 1 0 4.956"/></svg>

frontend/src/assets/Logos/gcp-gke.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#4285f4;}.cls-1,.cls-2,.cls-4{fill-rule:evenodd;}.cls-2{fill:#669df6;}.cls-3,.cls-4{fill:#aecbfa;}</style></defs><title>Icon_24px_K8Engine_Color</title><g data-name="Product Icons"><g ><polygon class="cls-1" points="14.68 13.06 19.23 15.69 19.23 16.68 14.29 13.83 14.68 13.06"/><polygon class="cls-2" points="9.98 13.65 4.77 16.66 4.45 15.86 9.53 12.92 9.98 13.65"/><rect class="cls-3" x="11.55" y="3.29" width="0.86" height="5.78"/><path class="cls-4" d="M3.25,7V17L12,22l8.74-5V7L12,2Zm15.63,8.89L12,19.78,5.12,15.89V8.11L12,4.22l6.87,3.89v7.78Z"/><polygon class="cls-4" points="11.98 11.5 15.96 9.21 11.98 6.91 8.01 9.21 11.98 11.5"/><polygon class="cls-2" points="11.52 12.3 7.66 10.01 7.66 14.6 11.52 16.89 11.52 12.3"/><polygon class="cls-1" points="12.48 12.3 12.48 16.89 16.34 14.6 16.34 10.01 12.48 12.3"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M19.73 6.56a1.73 1.73 0 0 0-1.68 1.68 1.83 1.83 0 0 0 .89 1.48v6.9l-5.16 3.06.8 1.28 5.55-3.25a.84.84 0 0 0 .4-.69v-7.3a1.64 1.64 0 0 0 .89-1.48 1.61 1.61 0 0 0-1.69-1.68" style="fill:#aecbfa"/><path d="m18 5.48-5.61-3.16a1.18 1.18 0 0 0-.79 0L5.25 6a1.72 1.72 0 0 0-2.68 1.35A1.73 1.73 0 0 0 4.26 9a1.73 1.73 0 0 0 1.68-1.65L12 3.9l5.15 3ZM11.2 18.5a1.57 1.57 0 0 0-.89.29l-5.16-3V9.92H3.56v6.31a.84.84 0 0 0 .4.69L9.52 20v.09a1.69 1.69 0 0 0 3.37 0 1.65 1.65 0 0 0-1.69-1.59" data-name="Path" style="fill:#aecbfa"/><path d="M16.96 8.63 12.1 5.78 7.13 8.63l4.97 2.77z" data-name="Path" style="fill:#669df6"/><path d="M12.1 12.38 6.84 9.32v2.47l5.26 2.96zM12.1 15.73l-5.26-3.05v2.07l5.26 3.06z" style="fill:#669df6"/><path d="M12.09 12.38v2.37l5.26-3.06V9.33Zm4.32-.94a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76M12.09 15.73v2.07l5.26-3.05v-2.07Zm4.32-1.07a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76" style="fill:#4285f4"/></svg>

frontend/src/assets/Logos/gcp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 128 128"><path fill="#ea4535" d="M80.6 40.3h.4l-.2-.2 14-14v-.3c-11.8-10.4-28.1-14-43.2-9.5C36.5 20.8 24.9 32.8 20.7 48c.2-.1.5-.2.8-.2 5.2-3.4 11.4-5.4 17.9-5.4 2.2 0 4.3.2 6.4.6.1-.1.2-.1.3-.1 9-9.9 24.2-11.1 34.6-2.6h-.1z"/><path fill="#557ebf" d="M108.1 47.8c-2.3-8.5-7.1-16.2-13.8-22.1L80 39.9c6 4.9 9.5 12.3 9.3 20v2.5c16.9 0 16.9 25.2 0 25.2H63.9v20h-.1l.1.2h25.4c14.6.1 27.5-9.3 31.8-23.1 4.3-13.8-1-28.8-13-36.9z"/><path fill="#36a852" d="M39 107.9h26.3V87.7H39c-1.9 0-3.7-.4-5.4-1.1l-15.2 14.6v.2c6 4.3 13.2 6.6 20.7 6.6z"/><path fill="#f9bc15" d="M40.2 41.9c-14.9.1-28.1 9.3-32.9 22.8-4.8 13.6 0 28.5 11.8 37.3l15.6-14.9c-8.6-3.7-10.6-14.5-4-20.8 6.6-6.4 17.8-4.4 21.7 3.8L68 55.2C61.4 46.9 51.1 42 40.2 42.1z"/></svg>

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss

@@ -23,6 +23,13 @@
 			font-weight: 400;
 			line-height: 20px; /* 142.857% */
 			letter-spacing: -0.07px;
+
+			.cloud-service-data-collected-table-heading-info {
+				display: inline-flex;
+				align-items: center;
+				color: var(--l3-foreground);
+				cursor: help;
+			}
 		}
 
 		.cloud-service-data-collected-table-logs {
@@ -32,3 +39,9 @@
 		}
 	}
 }
+
+.cloud-service-data-collected-table-tooltip {
+	max-width: 280px;
+	white-space: normal;
+	word-break: break-word;
+}

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -3,16 +3,19 @@ import {
 	CloudintegrationtypesCollectedLogAttributeDTO,
 	CloudintegrationtypesCollectedMetricDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { BarChart, ScrollText } from '@signozhq/icons';
+import { BarChart, Info, ScrollText } from '@signozhq/icons';
+import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
 
 import './CloudServiceDataCollected.styles.scss';
 
 function CloudServiceDataCollected({
 	logsData,
 	metricsData,
+	metricsInfoTooltip,
 }: {
 	logsData: CloudintegrationtypesCollectedLogAttributeDTO[] | null | undefined;
 	metricsData: CloudintegrationtypesCollectedMetricDTO[] | null | undefined;
+	metricsInfoTooltip?: string;
 }): JSX.Element {
 	const logsColumns = [
 		{
@@ -84,6 +87,25 @@ function CloudServiceDataCollected({
 					<div className="cloud-service-data-collected-table-heading">
 						<BarChart size={14} />
 						Metrics
+						{metricsInfoTooltip && (
+							<TooltipProvider>
+								<TooltipSimple
+									title={metricsInfoTooltip}
+									side="top"
+									tooltipContentProps={{
+										className: 'cloud-service-data-collected-table-tooltip',
+									}}
+								>
+									<span
+										className="cloud-service-data-collected-table-heading-info"
+										aria-label="About the metrics listed below"
+										data-testid="data-collected-metrics-info"
+									>
+										<Info size={12} />
+									</span>
+								</TooltipSimple>
+							</TooltipProvider>
+						)}
 					</div>
 					<Table
 						columns={metricsColumns}
@@ -97,4 +119,8 @@ function CloudServiceDataCollected({
 	);
 }
 
+CloudServiceDataCollected.defaultProps = {
+	metricsInfoTooltip: undefined,
+};
+
 export default CloudServiceDataCollected;

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -8,6 +8,7 @@ import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import {
 	FieldContext,
+	FieldDataType,
 	SignalType,
 	TelemetryFieldKey,
 } from 'types/api/v5/queryRange';
@@ -54,7 +55,7 @@ function OtherFields({
 				key: buildCompositeKey(attr.name, attr.fieldContext as string),
 				signal: attr.signal as SignalType,
 				fieldContext: attr.fieldContext as FieldContext,
-				fieldDataType: attr.fieldDataType,
+				fieldDataType: attr.fieldDataType as FieldDataType,
 			}),
 		);
 		const addedIds = new Set(

frontend/src/components/LogDetail/index.tsx

@@ -438,11 +438,7 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div
-				className="log-detail-drawer__content"
-				data-log-detail-ignore="true"
-				data-testid="log-detail-drawer"
-			>
+			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
 				<div className="log-detail-drawer__log">
 					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
 					<Tooltip

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -25,12 +25,12 @@ import CodeMirror, {
 } from '@uiw/react-codemirror';
 import { Button, Popover, Tooltip } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
 import { tracesAggregateOperatorOptions } from 'constants/queryBuilderOperators';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Info, TriangleAlert } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { FieldDataType } from 'types/api/v5/queryRange';
 import { TracesAggregatorOperator } from 'types/common/queryBuilder';
 
 import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
@@ -323,16 +323,16 @@ function QueryAggregationSelect({
 				TracesAggregatorOperator.RATE,
 			];
 
-			const fieldDataType: FieldDataType | undefined =
+			const fieldDataType =
 				functionContextForFetch &&
 				operatorsWithoutDataType.includes(functionContextForFetch)
 					? undefined
-					: 'number';
+					: QUERY_BUILDER_KEY_TYPES.NUMBER;
 
 			return getKeySuggestions({
 				signal: queryData.dataSource,
 				searchText: '',
-				fieldDataType,
+				fieldDataType: fieldDataType as QUERY_BUILDER_KEY_TYPES,
 			});
 		},
 		{

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

@@ -49,11 +49,7 @@ import { unquote } from 'utils/stringUtils';
 import { getRecentQueries } from 'lib/recentQueries/getRecentQueries';
 import type { SignalType } from 'types/api/v5/queryRange';
 
-import {
-	queryExamples,
-	SUGGESTION_FETCH_DEBOUNCE_MS,
-	SUGGESTIONS_SECTION,
-} from './constants';
+import { queryExamples, SUGGESTIONS_SECTION } from './constants';
 import {
 	combineInitialAndUserExpression,
 	dedupeOptionsByLabel,
@@ -102,15 +98,6 @@ interface QuerySearchProps {
 	showFilterSuggestionsWithoutMetric?: boolean;
 	/** When set, the editor shows only the user expression; API/filter uses `initial AND (user)`. */
 	initialExpression?: string;
-	/** When set, replaces the generic value-suggestion API with a custom fetcher. */
-	valueSuggestionsOverride?: (
-		key: string,
-		searchText: string,
-	) => Promise<{
-		stringValues: string[];
-		numberValues: number[];
-		complete: boolean;
-	}>;
 }
 
 function QuerySearch({
@@ -124,7 +111,6 @@ function QuerySearch({
 	showFilterSuggestionsWithoutMetric,
 	initialExpression,
 	metricNamespace,
-	valueSuggestionsOverride,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -367,7 +353,7 @@ function QuerySearch({
 	);
 
 	const debouncedFetchKeySuggestions = useMemo(
-		() => debounce(fetchKeySuggestions, SUGGESTION_FETCH_DEBOUNCE_MS),
+		() => debounce(fetchKeySuggestions, 300),
 		[fetchKeySuggestions],
 	);
 
@@ -494,24 +480,13 @@ function QuerySearch({
 			const sanitizedSearchText = searchText ? searchText?.trim() : '';
 
 			try {
-				const values = valueSuggestionsOverride
-					? await valueSuggestionsOverride(key, sanitizedSearchText)
-					: await getValueSuggestions({
-							key,
-							searchText: sanitizedSearchText,
-							signal: dataSource,
-							signalSource: signalSource as 'meter' | '',
-							metricName: debouncedMetricName ?? undefined,
-						}).then((response) => {
-							const responseData = response.data as any;
-							const data = responseData.data || {};
-							const values = data.values || {};
-							return {
-								stringValues: values.stringValues || [],
-								numberValues: values.numberValues || [],
-								complete: data.complete ?? false,
-							};
-						});
+				const response = await getValueSuggestions({
+					key,
+					searchText: sanitizedSearchText,
+					signal: dataSource,
+					signalSource: signalSource as 'meter' | '',
+					metricName: debouncedMetricName ?? undefined,
+				});
 
 				// Skip updates if component unmounted or key changed
 				if (
@@ -523,6 +498,8 @@ function QuerySearch({
 				}
 
 				// Process the response data
+				const responseData = response.data as any;
+				const values = responseData.data?.values || {};
 				const stringValues = values.stringValues || [];
 				const numberValues = values.numberValues || [];
 
@@ -603,12 +580,11 @@ function QuerySearch({
 			debouncedMetricName,
 			signalSource,
 			toggleSuggestions,
-			valueSuggestionsOverride,
 		],
 	);
 
 	const debouncedFetchValueSuggestions = useMemo(
-		() => debounce(fetchValueSuggestions, SUGGESTION_FETCH_DEBOUNCE_MS),
+		() => debounce(fetchValueSuggestions, 300),
 		[fetchValueSuggestions],
 	);
 

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

@@ -1,8 +1,6 @@
 export const RECENTS_SECTION = { name: 'Recent searches', rank: 1 } as const;
 export const SUGGESTIONS_SECTION = { name: 'Suggestions', rank: 2 } as const;
 
-export const SUGGESTION_FETCH_DEBOUNCE_MS = 300;
-
 // TODO: move to using TelemetrytypesFieldContextDTO when we migrate getKeySuggestions API (Part of https://github.com/SigNoz/engineering-pod/issues/5289)
 export const FIELD_CONTEXTS = [
 	'attribute',

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.contextSuggestions.test.tsx

@@ -23,13 +23,6 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 	}),
 }));
 
-// Shrink the suggestion-fetch debounce (300ms in prod) so these integration
-// tests aren't paced by it; coalescing semantics stay intact.
-jest.mock('../QuerySearch/constants', () => ({
-	...jest.requireActual('../QuerySearch/constants'),
-	SUGGESTION_FETCH_DEBOUNCE_MS: 30,
-}));
-
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
 	const handleRunQuery = jest.fn();
 	return {

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -92,76 +92,52 @@
 						color: var(--l3-foreground);
 					}
 
-					.only-btn,
+					.only-btn {
+						cursor: not-allowed;
+						color: var(--l3-foreground);
+					}
+
 					.toggle-btn {
 						cursor: not-allowed;
 						color: var(--l3-foreground);
 					}
 				}
 
-				// Stack "Only"/"All" and "Toggle" in a single cell so revealing
-				// one swaps in place instead of shifting the row layout.
-				.value-actions {
-					display: grid;
-					align-items: center;
-					justify-items: end;
-
-					> * {
-						grid-area: 1 / 1;
-					}
+				.only-btn {
+					display: none;
 				}
-
-				.only-btn,
 				.toggle-btn {
 					display: none;
+				}
+
+				.toggle-btn:hover {
+					background-color: unset;
+				}
+
+				.only-btn:hover {
+					background-color: unset;
+				}
+			}
+
+			.checkbox-value-section:hover {
+				.toggle-btn {
+					display: none;
+				}
+				.only-btn {
+					display: flex;
 					align-items: center;
 					justify-content: center;
 					height: 21px;
-					opacity: 0;
-					transform: translateX(4px);
-					// `display` is animated as a discrete property so the button
-					// stays mounted through its fade-out on exit.
-					transition:
-						opacity 0.16s ease,
-						transform 0.16s ease,
-						display 0.16s allow-discrete;
-
-					&:hover {
-						background-color: unset;
-					}
-				}
-			}
-
-			// Hovering the label/value area reveals the "Only"/"All" action.
-			.checkbox-value-section:hover .only-btn {
-				display: flex;
-				opacity: 1;
-				transform: translateX(0);
-
-				// Entry animation start state (fires on the display switch).
-				@starting-style {
-					opacity: 0;
-					transform: translateX(4px);
-				}
-			}
-
-			// Hovering the checkbox reveals the "Toggle" action.
-			.check-box:hover ~ .checkbox-value-section .toggle-btn {
-				display: flex;
-				opacity: 1;
-				transform: translateX(0);
-
-				@starting-style {
-					opacity: 0;
-					transform: translateX(4px);
 				}
 			}
 		}
 
-		@media (prefers-reduced-motion: reduce) {
-			.only-btn,
+		.value:hover {
 			.toggle-btn {
-				transition: none;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 21px;
 			}
 		}
 	}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx

@@ -53,14 +53,12 @@ function CheckboxValueRow({
 						</Typography.Text>
 					</TooltipSimple>
 				)}
-				<div className="value-actions">
-					<Button type="text" className="only-btn">
-						{onlyButtonLabel}
-					</Button>
-					<Button type="text" className="toggle-btn">
-						Toggle
-					</Button>
-				</div>
+				<Button type="text" className="only-btn">
+					{onlyButtonLabel}
+				</Button>
+				<Button type="text" className="toggle-btn">
+					Toggle
+				</Button>
 			</div>
 		</div>
 	);

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -88,7 +88,6 @@ function TanStackCustomTableRow<TData, TItemKey = string>({
 			{...props}
 			className={rowClassName}
 			style={rowStyle}
-			data-testid={context?.getRowTestId?.(rowData)}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={clearHovered}
 		>
@@ -155,12 +154,6 @@ function areTableRowPropsEqual<TData, TItemKey = string>(
 			return false;
 		}
 
-		const prevTestId = prev.context?.getRowTestId?.(prevData) ?? '';
-		const nextTestId = next.context?.getRowTestId?.(nextData) ?? '';
-		if (prevTestId !== nextTestId) {
-			return false;
-		}
-
 		const prevStyle = prev.context?.getRowStyle?.(prevData);
 		const nextStyle = next.context?.getRowStyle?.(nextData);
 		if (prevStyle !== nextStyle) {

frontend/src/components/TanStackTableView/TanStackRow.tsx

@@ -33,6 +33,7 @@ function TanStackRowCellsInner<TData, TItemKey = string>({
 	// Stable references via destructuring, keep them as is
 	const onRowClick = context?.onRowClick;
 	const onRowClickNewTab = context?.onRowClickNewTab;
+	const onRowDeactivate = context?.onRowDeactivate;
 	const isRowActive = context?.isRowActive;
 	const getRowKeyData = context?.getRowKeyData;
 	const rowIndex = row.index;
@@ -51,9 +52,21 @@ function TanStackRowCellsInner<TData, TItemKey = string>({
 			}
 
 			const isActive = isRowActive?.(rowData) ?? false;
-			onRowClick?.(rowData, itemKey, { isActive });
+			if (isActive && onRowDeactivate) {
+				onRowDeactivate();
+			} else {
+				onRowClick?.(rowData, itemKey);
+			}
 		},
-		[isRowActive, onRowClick, onRowClickNewTab, rowData, getRowKeyData, rowIndex],
+		[
+			isRowActive,
+			onRowDeactivate,
+			onRowClick,
+			onRowClickNewTab,
+			rowData,
+			getRowKeyData,
+			rowIndex,
+		],
 	);
 
 	if (itemKind === 'expansion') {
@@ -107,6 +120,7 @@ function areRowCellsPropsEqual<TData>(
 		prev.columnVisibilityKey === next.columnVisibilityKey &&
 		prev.context?.onRowClick === next.context?.onRowClick &&
 		prev.context?.onRowClickNewTab === next.context?.onRowClickNewTab &&
+		prev.context?.onRowDeactivate === next.context?.onRowDeactivate &&
 		prev.context?.isRowActive === next.context?.isRowActive &&
 		prev.context?.getRowKeyData === next.context?.getRowKeyData &&
 		prev.context?.renderRowActions === next.context?.renderRowActions &&

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -92,11 +92,11 @@ function TanStackTableInner<TData, TItemKey = string>(
 		getGroupKey,
 		getRowStyle,
 		getRowClassName,
-		getRowTestId,
 		isRowActive,
 		renderRowActions,
 		onRowClick,
 		onRowClickNewTab,
+		onRowDeactivate,
 		onSort,
 		activeRowIndex,
 		renderExpandedRow,
@@ -378,11 +378,11 @@ function TanStackTableInner<TData, TItemKey = string>(
 		() => ({
 			getRowStyle,
 			getRowClassName,
-			getRowTestId,
 			isRowActive,
 			renderRowActions,
 			onRowClick,
 			onRowClickNewTab,
+			onRowDeactivate,
 			renderExpandedRow,
 			getRowKeyData,
 			colCount: visibleColumnsCount,
@@ -396,11 +396,11 @@ function TanStackTableInner<TData, TItemKey = string>(
 		[
 			getRowStyle,
 			getRowClassName,
-			getRowTestId,
 			isRowActive,
 			renderRowActions,
 			onRowClick,
 			onRowClickNewTab,
+			onRowDeactivate,
 			renderExpandedRow,
 			getRowKeyData,
 			visibleColumnsCount,

frontend/src/components/TanStackTableView/__tests__/TanStackRow.test.tsx

@@ -85,9 +85,7 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1', {
-			isActive: false,
-		});
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
 	});
 
 	it('fires onRowClick with empty itemKey when getRowKeyData is not provided', async () => {
@@ -119,19 +117,17 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '', {
-			isActive: false,
-		});
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '');
 	});
 
-	it('calls onRowClick with isActive: true when the row is active', async () => {
-		// The table no longer owns open/close — it reports the active state and the
-		// consumer routes the click. An active row must still fire onRowClick.
+	it('calls onRowDeactivate instead of onRowClick when row is active', async () => {
 		const user = userEvent.setup();
 		const onRowClick = jest.fn();
+		const onRowDeactivate = jest.fn();
 		const ctx: TableRowContext<Row> = {
 			colCount: 1,
 			onRowClick,
+			onRowDeactivate,
 			isRowActive: () => true,
 			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 			hasSingleColumn: false,
@@ -156,44 +152,8 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1', {
-			isActive: true,
-		});
-	});
-
-	it('calls onRowClick with isActive: false when the row is not active', async () => {
-		const user = userEvent.setup();
-		const onRowClick = jest.fn();
-		const ctx: TableRowContext<Row> = {
-			colCount: 1,
-			onRowClick,
-			isRowActive: () => false,
-			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
-			hasSingleColumn: false,
-			columnOrderKey: '',
-			columnVisibilityKey: '',
-		};
-		const row = buildMockRow([{ id: 'body' }]);
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells<Row>
-							row={row as never}
-							context={ctx}
-							itemKind="row"
-							hasSingleColumn={false}
-							columnOrderKey=""
-							columnVisibilityKey=""
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1', {
-			isActive: false,
-		});
+		expect(onRowDeactivate).toHaveBeenCalled();
+		expect(onRowClick).not.toHaveBeenCalled();
 	});
 
 	it('does not render renderRowActions before hover', () => {

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

@@ -611,7 +611,6 @@ describe('TanStackTableView Integration', () => {
 			expect(onRowClick).toHaveBeenCalledWith(
 				expect.objectContaining({ id: '1', name: 'Item 1' }),
 				'1',
-				{ isActive: false },
 			);
 		});
 
@@ -640,7 +639,6 @@ describe('TanStackTableView Integration', () => {
 			expect(onRowClick).toHaveBeenCalledWith(
 				expect.objectContaining({ id: '1', name: 'Item 1' }),
 				{ id: '1', name: 'Item 1' },
-				{ isActive: false },
 			);
 		});
 
@@ -661,15 +659,15 @@ describe('TanStackTableView Integration', () => {
 			expect(row).toHaveClass('tableRowActive');
 		});
 
-		it('calls onRowClick with isActive: true when clicking the active row', async () => {
-			// The consumer owns open/close routing — the table just reports the
-			// active state via the click context.
+		it('calls onRowDeactivate when clicking active row', async () => {
 			const user = userEvent.setup();
 			const onRowClick = jest.fn();
+			const onRowDeactivate = jest.fn();
 
 			renderTanStackTable({
 				props: {
 					onRowClick,
+					onRowDeactivate,
 					isRowActive: (row) => row.id === '1',
 				},
 			});
@@ -680,11 +678,8 @@ describe('TanStackTableView Integration', () => {
 
 			await user.click(screen.getByText('Item 1'));
 
-			expect(onRowClick).toHaveBeenCalledWith(
-				expect.objectContaining({ id: '1' }),
-				expect.anything(),
-				{ isActive: true },
-			);
+			expect(onRowDeactivate).toHaveBeenCalled();
+			expect(onRowClick).not.toHaveBeenCalled();
 		});
 
 		it('opens in new tab on ctrl+click', async () => {

frontend/src/components/TanStackTableView/index.tsx

@@ -116,11 +116,9 @@ export * from './useTableParams';
  *   getItemKey={(row) => row.id}
  *   isRowActive={(row) => row.id === selectedId}
  *   activeRowIndex={selectedIndex}
- *   // The table reports the click + the row's active state; the consumer owns open/close.
- *   onRowClick={(row, itemKey, { isActive }) =>
- *     setSelectedId(isActive ? undefined : itemKey)
- *   }
+ *   onRowClick={(row, itemKey) => setSelectedId(itemKey)}
  *   onRowClickNewTab={(row, itemKey) => openInNewTab(itemKey)}
+ *   onRowDeactivate={() => setSelectedId(undefined)}
  *   getRowClassName={(row) => (row.severity === 'error' ? 'row-error' : '')}
  *   getRowStyle={(row) => (row.dimmed ? { opacity: 0.5 } : {})}
  *   renderRowActions={(row) => <Button size="small">Open</Button>}

frontend/src/components/TanStackTableView/types.ts

@@ -81,19 +81,15 @@ export type FlatItem<TData> =
 	| { kind: 'row'; row: TanStackRowType<TData> }
 	| { kind: 'expansion'; row: TanStackRowType<TData> };
 
-export type RowClickContext = {
-	isActive: boolean;
-};
-
 export type TableRowContext<TData, TItemKey = string> = {
 	getRowStyle?: (row: TData) => CSSProperties;
 	getRowClassName?: (row: TData) => string;
-	getRowTestId?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: TItemKey, context: RowClickContext) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey) => void;
 	/** Called when ctrl+click or cmd+click on a row */
 	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
+	onRowDeactivate?: () => void;
 	renderExpandedRow?: (
 		row: TData,
 		rowKey: string,
@@ -182,12 +178,12 @@ export type TanStackTableProps<TData, TItemKey = string> = {
 	getGroupKey?: (row: TData) => Record<string, string>;
 	getRowStyle?: (row: TData) => CSSProperties;
 	getRowClassName?: (row: TData) => string;
-	getRowTestId?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: TItemKey, context: RowClickContext) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey) => void;
 	/** Called when ctrl+click or cmd+click on a row */
 	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
+	onRowDeactivate?: () => void;
 	activeRowIndex?: number;
 	renderExpandedRow?: (
 		row: TData,

frontend/src/components/WarningPopover/WarningPopover.styles.scss

@@ -1,11 +1,6 @@
-.warning-popover-overlay {
-	--antd-arrow-background-color: var(--l2-background);
-}
-
 .warning-content {
 	display: flex;
 	flex-direction: column;
-	background-color: var(--l2-background);
 
 	// === SECTION: Summary (Top)
 	&__summary-section {
@@ -15,25 +10,16 @@
 
 	&__summary {
 		display: flex;
-		align-items: flex-start;
 		justify-content: space-between;
-		gap: var(--spacing-8);
 		padding: 16px;
 	}
 
 	&__summary-left {
 		display: flex;
-		align-items: flex-start;
+		align-items: baseline;
 		gap: 8px;
 	}
 
-	&__icon-wrapper {
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-		height: var(--spacing-12);
-	}
-
 	&__summary-text {
 		display: flex;
 		flex-direction: column;

frontend/src/components/WarningPopover/WarningPopover.tsx

@@ -2,7 +2,6 @@ import { ReactNode, useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Popover, PopoverProps } from 'antd';
 import ErrorIcon from 'assets/Error';
-import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { BookOpenText, ChevronsDown, TriangleAlert } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
@@ -31,18 +30,16 @@ export function WarningContent({ warning }: WarningContentProps): JSX.Element {
 			{/* Summary Header */}
 			<section className="warning-content__summary-section">
 				<header className="warning-content__summary">
-					{(warningCode || warningMessage) && (
-						<div className="warning-content__summary-left">
-							<div className="warning-content__icon-wrapper">
-								<ErrorIcon />
-							</div>
-
-							<div className="warning-content__summary-text">
-								<h2 className="warning-content__warning-code">{warningCode}</h2>
-								<p className="warning-content__warning-message">{warningMessage}</p>
-							</div>
+					<div className="warning-content__summary-left">
+						<div className="warning-content__icon-wrapper">
+							<ErrorIcon />
 						</div>
-					)}
+
+						<div className="warning-content__summary-text">
+							<h2 className="warning-content__warning-code">{warningCode}</h2>
+							<p className="warning-content__warning-message">{warningMessage}</p>
+						</div>
+					</div>
 
 					{warningUrl && (
 						<div className="warning-content__summary-right">
@@ -157,10 +154,6 @@ function WarningPopover({
 			overlayInnerStyle={{ padding: 0 }}
 			autoAdjustOverflow
 			{...popoverProps}
-			overlayClassName={cx(
-				'warning-popover-overlay',
-				popoverProps.overlayClassName,
-			)}
 		>
 			{children || (
 				<TriangleAlert

frontend/src/constants/localStorage.ts

@@ -45,5 +45,4 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
-	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -20,6 +20,10 @@ export const REACT_QUERY_KEY = {
 	DELETE_DASHBOARD: 'DELETE_DASHBOARD',
 	LOGS_PIPELINE_PREVIEW: 'LOGS_PIPELINE_PREVIEW',
 	ALERT_RULE_DETAILS: 'ALERT_RULE_DETAILS',
+	ALERT_RULE_STATS: 'ALERT_RULE_STATS',
+	ALERT_RULE_TOP_CONTRIBUTORS: 'ALERT_RULE_TOP_CONTRIBUTORS',
+	ALERT_RULE_TIMELINE_TABLE: 'ALERT_RULE_TIMELINE_TABLE',
+	ALERT_RULE_TIMELINE_GRAPH: 'ALERT_RULE_TIMELINE_GRAPH',
 	GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
 	TOGGLE_ALERT_STATE: 'TOGGLE_ALERT_STATE',
 	GET_ALL_ALERTS: 'GET_ALL_ALERTS',

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

@@ -29,7 +29,6 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.LOGS_EXPLORER}?${relatedLogsLink}`}
 					className="contributor-row-popover-buttons__button"
-					data-testid="alert-popover-view-logs"
 				>
 					<div className="icon">
 						<LogsIcon />
@@ -41,7 +40,6 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.TRACES_EXPLORER}?${relatedTracesLink}`}
 					className="contributor-row-popover-buttons__button"
-					data-testid="alert-popover-view-traces"
 				>
 					<div className="icon">
 						<DraftingCompass

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

@@ -26,10 +26,7 @@ function ChangePercentage({
 }: ChangePercentageProps): JSX.Element {
 	if (direction > 0) {
 		return (
-			<div
-				className="change-percentage change-percentage--success"
-				data-testid="stats-card-change"
-			>
+			<div className="change-percentage change-percentage--success">
 				<div className="change-percentage__icon">
 					<ArrowDownLeft size={14} color={Color.BG_FOREST_500} />
 				</div>
@@ -41,10 +38,7 @@ function ChangePercentage({
 	}
 	if (direction < 0) {
 		return (
-			<div
-				className="change-percentage change-percentage--error"
-				data-testid="stats-card-change"
-			>
+			<div className="change-percentage change-percentage--error">
 				<div className="change-percentage__icon">
 					<ArrowUpRight size={14} color={Color.BG_CHERRY_500} />
 				</div>
@@ -56,10 +50,7 @@ function ChangePercentage({
 	}
 
 	return (
-		<div
-			className="change-percentage change-percentage--no-previous-data"
-			data-testid="stats-card-change"
-		>
+		<div className="change-percentage change-percentage--no-previous-data">
 			<div className="change-percentage__label">no previous data</div>
 		</div>
 	);
@@ -112,12 +103,7 @@ function StatsCard({
 	const formattedEndTimeForTooltip = convertTimestampToLocaleDateString(endTime);
 
 	return (
-		<div
-			className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}
-			data-testid="stats-card"
-			data-stats-title={title}
-			data-empty={isEmpty ? 'true' : 'false'}
-		>
+		<div className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}>
 			<div className="stats-card__title-wrapper">
 				<div className="title">{title}</div>
 				<div className="duration-indicator">
@@ -137,7 +123,7 @@ function StatsCard({
 			</div>
 
 			<div className="stats-card__stats">
-				<div className="count-label" data-testid="stats-card-value">
+				<div className="count-label">
 					{isEmpty ? emptyMessage : displayValue || totalCurrentCount}
 				</div>
 

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

@@ -81,11 +81,7 @@ function StatsGraph({ timeSeries, changeDirection }: Props): JSX.Element {
 	);
 
 	return (
-		<div
-			style={{ height: '100%', width: '100%' }}
-			ref={graphRef}
-			data-testid="stats-card-sparkline"
-		>
+		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
 			<Uplot data={[xData, yData]} options={options} />
 		</div>
 	);

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

@@ -1,7 +1,6 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { useGetAlertRuleDetailsStats } from 'pages/AlertDetails/hooks';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
-import { StatsTimeSeriesItem } from 'types/api/alerts/def';
 
 import AverageResolutionCard from '../AverageResolutionCard/AverageResolutionCard';
 import StatsCard from '../StatsCard/StatsCard';
@@ -26,59 +25,24 @@ type StatsCardsRendererProps = {
 };
 
 // TODO(shaheer): render the DataStateRenderer inside the TotalTriggeredCard/AverageResolutionCard, it should display the title
-type AdaptedStatsData = {
-	totalCurrentTriggers: number;
-	totalPastTriggers: number;
-	currentAvgResolutionTime: string;
-	pastAvgResolutionTime: string;
-	currentTriggersSeries: StatsTimeSeriesItem[];
-	currentAvgResolutionTimeSeries: StatsTimeSeriesItem[];
-};
-
 function StatsCardsRenderer({
 	setTotalCurrentTriggers,
 }: StatsCardsRendererProps): JSX.Element {
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsStats();
 
-	const adaptedData = useMemo((): AdaptedStatsData | null => {
-		if (!data?.data) {
-			return null;
-		}
-		const statsData = data.data;
-
-		const adaptTimeSeries = (
-			series: typeof statsData.currentTriggersSeries,
-		): StatsTimeSeriesItem[] =>
-			series?.values?.map((item) => ({
-				timestamp: item.timestamp ?? 0,
-				value: String(item.value ?? 0),
-			})) ?? [];
-
-		return {
-			totalCurrentTriggers: statsData.totalCurrentTriggers,
-			totalPastTriggers: statsData.totalPastTriggers,
-			currentAvgResolutionTime: String(statsData.currentAvgResolutionTime),
-			pastAvgResolutionTime: String(statsData.pastAvgResolutionTime),
-			currentTriggersSeries: adaptTimeSeries(statsData.currentTriggersSeries),
-			currentAvgResolutionTimeSeries: adaptTimeSeries(
-				statsData.currentAvgResolutionTimeSeries,
-			),
-		};
-	}, [data?.data]);
-
 	useEffect(() => {
-		if (adaptedData?.totalCurrentTriggers !== undefined) {
-			setTotalCurrentTriggers(adaptedData.totalCurrentTriggers);
+		if (data?.payload?.data?.totalCurrentTriggers !== undefined) {
+			setTotalCurrentTriggers(data.payload.data.totalCurrentTriggers);
 		}
-	}, [adaptedData, setTotalCurrentTriggers]);
+	}, [data, setTotalCurrentTriggers]);
 
 	return (
 		<DataStateRenderer
 			isLoading={isLoading}
 			isRefetching={isRefetching}
 			isError={isError || !isValidRuleId || !ruleId}
-			data={adaptedData}
+			data={data?.payload?.data || null}
 		>
 			{(data): JSX.Element => {
 				const {
@@ -96,7 +60,7 @@ function StatsCardsRenderer({
 							<TotalTriggeredCard
 								totalCurrentTriggers={totalCurrentTriggers}
 								totalPastTriggers={totalPastTriggers}
-								timeSeries={currentTriggersSeries}
+								timeSeries={currentTriggersSeries?.values}
 							/>
 						) : (
 							<StatsCard
@@ -113,7 +77,7 @@ function StatsCardsRenderer({
 							<AverageResolutionCard
 								currentAvgResolutionTime={currentAvgResolutionTime}
 								pastAvgResolutionTime={pastAvgResolutionTime}
-								timeSeries={currentAvgResolutionTimeSeries}
+								timeSeries={currentAvgResolutionTimeSeries?.values}
 							/>
 						) : (
 							<StatsCard

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

@@ -48,16 +48,11 @@ function TopContributorsCard({
 
 	return (
 		<>
-			<div className="top-contributors-card" data-testid="top-contributors-card">
+			<div className="top-contributors-card">
 				<div className="top-contributors-card__header">
 					<div className="title">top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button
-							type="text"
-							className="view-all"
-							onClick={toggleViewAllDrawer}
-							data-testid="top-contributors-view-all"
-						>
+						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
 							<div className="label">View all</div>
 							<div className="icon">
 								<ArrowRight

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

@@ -68,10 +68,7 @@ function TopContributorsRows({
 					relatedTracesLink={record.relatedTracesLink}
 					relatedLogsLink={record.relatedLogsLink}
 				>
-					<div
-						className="total-contribution"
-						data-testid="top-contributors-row-count"
-					>
+					<div className="total-contribution">
 						{count}/{totalCurrentTriggers}
 					</div>
 				</ConditionalAlertPopover>
@@ -81,10 +78,7 @@ function TopContributorsRows({
 
 	const handleRowClick = (
 		record: AlertRuleTopContributors,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
-		'data-testid': string;
-	} => ({
-		'data-testid': 'top-contributors-row',
+	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
 		onClick: (): void => {
 			logEvent('Alert history: Top contributors row: Clicked', {
 				labels: record.labels,

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

@@ -31,10 +31,7 @@ function ViewAllDrawer({
 			}}
 			title="Viewing All Contributors"
 		>
-			<div
-				className="top-contributors-card--view-all"
-				data-testid="top-contributors-drawer"
-			>
+			<div className="top-contributors-card--view-all">
 				<div className="top-contributors-card__content">
 					<TopContributorsRows
 						topContributors={topContributorsData}

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

@@ -1,8 +1,6 @@
-import { useMemo } from 'react';
 import { useGetAlertRuleDetailsTopContributors } from 'pages/AlertDetails/hooks';
-import { labelsArrayToObject } from 'container/AlertHistory/utils/labelAdapters';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
-import { AlertRuleStats, AlertRuleTopContributors } from 'types/api/alerts/def';
+import { AlertRuleStats } from 'types/api/alerts/def';
 
 import TopContributorsCard from '../TopContributorsCard/TopContributorsCard';
 
@@ -15,27 +13,15 @@ function TopContributorsRenderer({
 }: TopContributorsRendererProps): JSX.Element {
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsTopContributors();
+	const response = data?.payload?.data;
 
 	// TODO(shaheer): render the DataStateRenderer inside the TopContributorsCard, it should display the title and view all
-	const adaptedData = useMemo((): AlertRuleTopContributors[] | null => {
-		if (!data?.data) {
-			return null;
-		}
-		return data.data.map((contributor) => ({
-			fingerprint: contributor.fingerprint,
-			count: contributor.count,
-			labels: labelsArrayToObject(contributor.labels),
-			relatedLogsLink: contributor.relatedLogsLink ?? '',
-			relatedTracesLink: contributor.relatedTracesLink ?? '',
-		}));
-	}, [data?.data]);
-
 	return (
 		<DataStateRenderer
 			isLoading={isLoading}
 			isRefetching={isRefetching}
 			isError={isError || !isValidRuleId || !ruleId}
-			data={adaptedData}
+			data={response || null}
 		>
 			{(topContributorsData): JSX.Element => (
 				<TopContributorsCard

frontend/src/container/AlertHistory/Timeline/Graph/constants.ts

@@ -1,18 +1,12 @@
 import { Color } from '@signozhq/design-tokens';
-import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
 
-export const ALERT_STATUS: Record<RuletypesAlertStateDTO, number> & {
-	[key: string]: number;
-} = {
-	[RuletypesAlertStateDTO.firing]: 0,
-	[RuletypesAlertStateDTO.inactive]: 1,
+export const ALERT_STATUS: { [key: string]: number } = {
+	firing: 0,
+	inactive: 1,
 	normal: 1,
-	[RuletypesAlertStateDTO.pending]: 2,
-	[RuletypesAlertStateDTO.recovering]: 2,
-	'no-data': 3,
-	[RuletypesAlertStateDTO.nodata]: 3,
-	[RuletypesAlertStateDTO.disabled]: 4,
-	muted: 5,
+	'no-data': 2,
+	disabled: 3,
+	muted: 4,
 };
 
 export const STATE_VS_COLOR: {
@@ -22,10 +16,9 @@ export const STATE_VS_COLOR: {
 	{
 		0: { stroke: Color.BG_CHERRY_500, fill: Color.BG_CHERRY_500 },
 		1: { stroke: Color.BG_FOREST_500, fill: Color.BG_FOREST_500 },
-		2: { stroke: Color.BG_AMBER_500, fill: Color.BG_AMBER_500 },
-		3: { stroke: Color.BG_SIENNA_400, fill: Color.BG_SIENNA_400 },
-		4: { stroke: Color.BG_VANILLA_400, fill: Color.BG_VANILLA_400 },
-		5: { stroke: Color.BG_INK_100, fill: Color.BG_INK_100 },
+		2: { stroke: Color.BG_SIENNA_400, fill: Color.BG_SIENNA_400 },
+		3: { stroke: Color.BG_VANILLA_400, fill: Color.BG_VANILLA_400 },
+		4: { stroke: Color.BG_INK_100, fill: Color.BG_INK_100 },
 	},
 ];
 

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

@@ -1,8 +1,6 @@
-import { useMemo } from 'react';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useGetAlertRuleDetailsTimelineGraphData } from 'pages/AlertDetails/hooks';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
-import { AlertRuleTimelineGraphResponse } from 'types/api/alerts/def';
 
 import Graph from '../Graph/Graph';
 
@@ -20,20 +18,30 @@ function GraphWrapper({
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsTimelineGraphData();
 
-	const adaptedData = useMemo((): AlertRuleTimelineGraphResponse[] | null => {
-		if (!data?.data) {
-			return null;
-		}
-		return data.data.map((item) => ({
-			start: item.start,
-			end: item.end,
-			state: item.state as AlertRuleTimelineGraphResponse['state'],
-		}));
-	}, [data?.data]);
+	// TODO(shaheer): uncomment when the API is ready for
+	// const { startTime } = useAlertHistoryQueryParams();
+
+	// const [isVerticalGraph, setIsVerticalGraph] = useState(false);
+
+	// useEffect(() => {
+	// 	const checkVerticalGraph = (): void => {
+	// 		if (startTime) {
+	// 			const startTimeDate = dayjs(Number(startTime));
+	// 			const twentyFourHoursAgo = dayjs().subtract(
+	// 				HORIZONTAL_GRAPH_HOURS_THRESHOLD,
+	// 				DAYJS_MANIPULATE_TYPES.HOUR,
+	// 			);
+
+	// 			setIsVerticalGraph(startTimeDate.isBefore(twentyFourHoursAgo));
+	// 		}
+	// 	};
+
+	// 	checkVerticalGraph();
+	// }, [startTime]);
 
 	return (
-		<div className="timeline-graph" data-testid="timeline-graph">
-			<div className="timeline-graph__title" data-testid="timeline-graph-title">
+		<div className="timeline-graph">
+			<div className="timeline-graph__title">
 				{totalCurrentTriggers} triggers in {relativeTime}
 			</div>
 			<div className="timeline-graph__chart">
@@ -41,7 +49,7 @@ function GraphWrapper({
 					isLoading={isLoading}
 					isError={isError || !isValidRuleId || !ruleId}
 					isRefetching={isRefetching}
-					data={adaptedData}
+					data={data?.payload?.data || null}
 				>
 					{(data): JSX.Element => <Graph type="horizontal" data={data} />}
 				</DataStateRenderer>

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

@@ -1,35 +1,11 @@
 .timeline-table {
 	border-top: 1px solid var(--l1-border);
 	border-radius: 6px;
+	overflow: hidden;
 	margin-top: 4px;
 	min-height: 600px;
-
-	&__filter {
-		padding: 12px 16px;
-		background: var(--l1-background);
-		border-bottom: 1px solid var(--l1-border);
-	}
-
-	&__filter-row {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	&__filter-search {
-		flex: 1;
-	}
-
-	&__filter--loading,
-	&__filter--loading-skeleton {
-		width: 100% !important;
-	}
-
 	.ant-table {
 		background: var(--l1-background);
-		&-placeholder {
-			background: var(--l1-background) !important;
-		}
 		&-cell {
 			padding: 12px 16px !important;
 			vertical-align: baseline;
@@ -47,9 +23,6 @@
 		&-tbody > tr > td {
 			border: none;
 		}
-		&-footer {
-			background-color: var(--l1-background);
-		}
 	}
 
 	.label-filter {
@@ -113,38 +86,4 @@
 			background: var(--l2-background);
 		}
 	}
-
-	&__error {
-		display: flex;
-		align-self: flex-start;
-		justify-content: flex-start;
-		text-align: left;
-	}
-
-	&__pagination {
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		gap: var(--spacing-4);
-		padding: var(--spacing-6) var(--spacing-8);
-		background: var(--l1-background);
-
-		.pagination-controls {
-			display: flex;
-			gap: 4px;
-
-			.ant-btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 4px;
-				min-width: 24px;
-				height: 24px;
-
-				&:disabled {
-					opacity: 0.4;
-				}
-			}
-		}
-	}
 }

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

@@ -1,129 +1,52 @@
-import { HTMLAttributes, useCallback, useMemo } from 'react';
-import { Button, Skeleton, Table } from 'antd';
-import { ChevronLeft, ChevronRight } from '@signozhq/icons';
+import { HTMLAttributes, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Table } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import ErrorContent from 'components/ErrorModal/components/ErrorContent';
-import {
-	QuerySearchV2Provider,
-	useExpression,
-	useInputExpression,
-	useQuerySearchOnChange,
-	useQuerySearchOnRun,
-} from 'components/QueryBuilderV2';
-import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import { initialQueryBuilderFormValuesMap } from 'constants/queryBuilder';
-import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+import { initialFilters } from 'constants/queryBuilder';
 import {
 	useGetAlertRuleDetailsTimelineTable,
 	useTimelineTable,
 } from 'pages/AlertDetails/hooks';
-import { labelsArrayToObject } from 'container/AlertHistory/utils/labelAdapters';
 import { useTimezone } from 'providers/Timezone';
 import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
-import { DataSource } from 'types/common/queryBuilder';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { useAlertHistoryFilterSuggestions } from './useAlertHistoryFilterSuggestions';
 import { timelineTableColumns } from './useTimelineTable';
 
 import './Table.styles.scss';
 
-export const ALERT_HISTORY_EXPRESSION_KEY = 'alertHistoryExpression';
+function TimelineTable(): JSX.Element {
+	const [filters, setFilters] = useState<TagFilter>(initialFilters);
 
-function TimelineTableContent(): JSX.Element {
-	const expression = useExpression();
-	const inputExpression = useInputExpression();
-	const querySearchOnChange = useQuerySearchOnChange();
-	const querySearchOnRun = useQuerySearchOnRun();
-
-	const {
-		isLoading,
-		isRefetching,
-		isError,
-		data,
-		error,
-		ruleId,
-		refetch,
-		cancel,
-	} = useGetAlertRuleDetailsTimelineTable({ filterExpression: expression });
-
-	const apiError = useMemo(() => convertToApiError(error), [error]);
-
-	const { hardcodedAttributeKeys, valueSuggestionsOverride, isLoadingKeys } =
-		useAlertHistoryFilterSuggestions(ruleId ?? null);
-
-	const { timelineData, totalItems, nextCursor } = useMemo(() => {
-		const response = data?.data;
-		const items: AlertRuleTimelineTableResponse[] | undefined =
-			response?.items?.map((item) => {
-				return {
-					ruleID: item.ruleId,
-					ruleName: item.ruleName,
-					overallState: item.overallState as string,
-					overallStateChanged: item.overallStateChanged,
-					state: item.state as string,
-					stateChanged: item.stateChanged,
-					unixMilli: item.unixMilli,
-					fingerprint: item.fingerprint,
-					value: item.value,
-					labels: labelsArrayToObject(item.labels),
-					relatedLogsLink: item.relatedLogsLink,
-					relatedTracesLink: item.relatedTracesLink,
-				};
-			});
+	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
+		useGetAlertRuleDetailsTimelineTable({ filters });
 
+	const { timelineData, totalItems, labels } = useMemo(() => {
+		const response = data?.payload?.data;
 		return {
-			timelineData: items,
-			totalItems: response?.total ?? 0,
-			nextCursor: response?.nextCursor,
+			timelineData: response?.items,
+			totalItems: response?.total,
+			labels: response?.labels,
 		};
-	}, [data?.data]);
+	}, [data?.payload?.data]);
 
-	const {
-		paginationConfig,
-		onChangeHandler,
-		handleNextPage,
-		handlePrevPage,
-		hasNextPage,
-		hasPrevPage,
-	} = useTimelineTable({
+	const { paginationConfig, onChangeHandler } = useTimelineTable({
 		totalItems: totalItems ?? 0,
-		nextCursor,
 	});
 
+	const { t } = useTranslation('common');
+
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
-	const handleRunQuery = useCallback(
-		(updatedExpression?: string): void => {
-			const nextExpression = updatedExpression ?? inputExpression;
-			querySearchOnRun(nextExpression);
-
-			if (nextExpression === expression) {
-				refetch();
-			}
-		},
-		[querySearchOnRun, refetch, inputExpression, expression],
-	);
-
-	const queryData = useMemo(
-		() => ({
-			...initialQueryBuilderFormValuesMap.logs,
-			queryName: 'A',
-			dataSource: DataSource.LOGS,
-			filter: { expression },
-			expression,
-		}),
-		[expression],
-	);
+	if (isError || !isValidRuleId || !ruleId) {
+		return <div>{t('something_went_wrong')}</div>;
+	}
 
 	const handleRowClick = (
 		record: AlertRuleTimelineTableResponse,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
-		'data-testid': string;
-	} => ({
-		'data-testid': 'timeline-row',
+	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
 		onClick: (): void => {
-			void logEvent('Alert history: Timeline table row: Clicked', {
+			logEvent('Alert history: Timeline table row: Clicked', {
 				ruleId: record.ruleID,
 				labels: record.labels,
 			});
@@ -131,114 +54,24 @@ function TimelineTableContent(): JSX.Element {
 	});
 
 	return (
-		<div className="timeline-table" data-testid="timeline-table">
-			{/* If we don't wait to have the keys, the QuerySearch will not render them at first usage */}
-			{!isLoadingKeys && hardcodedAttributeKeys ? (
-				<div className="timeline-table__filter">
-					<div className="timeline-table__filter-row">
-						<div
-							className="timeline-table__filter-search"
-							data-testid="timeline-filter-search"
-						>
-							<QuerySearch
-								onChange={querySearchOnChange}
-								queryData={queryData}
-								dataSource={DataSource.LOGS}
-								onRun={handleRunQuery}
-								hardcodedAttributeKeys={hardcodedAttributeKeys}
-								valueSuggestionsOverride={valueSuggestionsOverride}
-							/>
-						</div>
-						<RunQueryBtn
-							isLoadingQueries={isLoading || isRefetching}
-							onStageRunQuery={(): void => handleRunQuery()}
-							handleCancelQuery={cancel}
-						/>
-					</div>
-				</div>
-			) : (
-				<div className="timeline-table__filter timeline-table__filter--loading">
-					<Skeleton.Input
-						className="timeline-table__filter--loading-skeleton"
-						active
-						data-testid="timeline-filter-skeleton"
-					/>
-				</div>
-			)}
+		<div className="timeline-table">
 			<Table
 				rowKey={(row): string => `${row.fingerprint}-${row.value}-${row.unixMilli}`}
 				columns={timelineTableColumns({
+					filters,
+					labels: labels ?? {},
+					setFilters,
 					formatTimezoneAdjustedTimestamp,
 				})}
 				onRow={handleRowClick}
 				dataSource={timelineData}
-				pagination={false}
+				pagination={paginationConfig}
 				size="middle"
 				onChange={onChangeHandler}
 				loading={isLoading || isRefetching}
-				locale={{
-					emptyText:
-						isError && apiError ? (
-							<div className="timeline-table__error" data-testid="timeline-error">
-								<ErrorContent error={apiError} />
-							</div>
-						) : undefined,
-				}}
-				footer={(): JSX.Element => (
-					<div className="timeline-table__pagination">
-						<div
-							className="timeline-table__pagination-info"
-							data-testid="timeline-footer-range"
-						>
-							{paginationConfig.showTotal?.(totalItems, [
-								totalItems === 0
-									? 0
-									: ((paginationConfig.current ?? 1) - 1) *
-											(paginationConfig.pageSize ?? 10) +
-										1,
-								Math.min(
-									(paginationConfig.current ?? 1) * (paginationConfig.pageSize ?? 10),
-									totalItems,
-								),
-							])}
-						</div>
-						<div className="pagination-controls">
-							<Button
-								type="text"
-								size="small"
-								disabled={!hasPrevPage}
-								onClick={handlePrevPage}
-								data-testid="timeline-prev-page"
-							>
-								<ChevronLeft size={14} />
-							</Button>
-							<Button
-								type="text"
-								size="small"
-								disabled={!hasNextPage}
-								onClick={handleNextPage}
-								data-testid="timeline-next-page"
-							>
-								<ChevronRight size={14} />
-							</Button>
-						</div>
-					</div>
-				)}
 			/>
 		</div>
 	);
 }
 
-function TimelineTable(): JSX.Element {
-	return (
-		<QuerySearchV2Provider
-			queryParamKey={ALERT_HISTORY_EXPRESSION_KEY}
-			initialExpression=""
-			persistOnUnmount
-		>
-			<TimelineTableContent />
-		</QuerySearchV2Provider>
-	);
-}
-
 export default TimelineTable;

frontend/src/container/AlertHistory/Timeline/Table/useAlertHistoryFilterSuggestions.ts

@@ -1,100 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import {
-	getRuleHistoryFilterValues,
-	useGetRuleHistoryFilterKeys,
-} from 'api/generated/services/rules';
-import { useAlertHistoryQueryParams } from 'pages/AlertDetails/hooks';
-import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
-import { fieldContextToSuggestionContext } from 'container/AlertHistory/Timeline/Table/utils';
-
-export interface AlertHistoryFilterSuggestions {
-	hardcodedAttributeKeys: QueryKeyDataSuggestionsProps[];
-	valueSuggestionsOverride: (
-		key: string,
-		searchText: string,
-	) => Promise<{
-		stringValues: string[];
-		numberValues: number[];
-		complete: boolean;
-	}>;
-	isLoadingKeys: boolean;
-}
-
-export function useAlertHistoryFilterSuggestions(
-	ruleId: string | null,
-): AlertHistoryFilterSuggestions {
-	const { startTime, endTime } = useAlertHistoryQueryParams();
-
-	const { data: filterKeysData, isLoading: isLoadingKeys } =
-		useGetRuleHistoryFilterKeys(
-			{ id: ruleId ?? '' },
-			{ startUnixMilli: startTime, endUnixMilli: endTime },
-			{
-				query: {
-					enabled: !!ruleId,
-					refetchOnMount: false,
-					refetchOnWindowFocus: false,
-				},
-			},
-		);
-
-	const hardcodedAttributeKeys = useMemo((): QueryKeyDataSuggestionsProps[] => {
-		const keys = filterKeysData?.data?.keys;
-		if (!keys) {
-			// by default, when QuerySearch keys fails, we don't render fallback keys
-			// we just return empty to let user write whatever they want with no
-			// key suggestion
-			return [];
-		}
-		return Object.values(keys).flatMap((items) =>
-			items.map(
-				(item) =>
-					({
-						label: item.name,
-						name: item.name,
-						type: item.fieldDataType || 'string',
-						signal: 'logs' as const,
-						fieldDataType: item.fieldDataType,
-						fieldContext: fieldContextToSuggestionContext(item.fieldContext),
-					}) satisfies QueryKeyDataSuggestionsProps,
-			),
-		);
-	}, [filterKeysData]);
-
-	const valueSuggestionsOverride = useCallback(
-		async (
-			key: string,
-			searchText: string,
-		): Promise<{
-			stringValues: string[];
-			numberValues: number[];
-			complete: boolean;
-		}> => {
-			if (!ruleId) {
-				return {
-					stringValues: [],
-					numberValues: [],
-					complete: true,
-				};
-			}
-			const response = await getRuleHistoryFilterValues(
-				{ id: ruleId },
-				{
-					name: key,
-					searchText,
-					startUnixMilli: startTime,
-					endUnixMilli: endTime,
-				},
-			);
-			const values = response.data?.values;
-			return {
-				stringValues: values?.stringValues ?? [],
-				numberValues: values?.numberValues ?? [],
-				complete: response.data?.complete ?? false,
-			};
-		},
-		[ruleId, startTime, endTime],
-	);
-
-	return { hardcodedAttributeKeys, valueSuggestionsOverride, isLoadingKeys };
-}

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

@@ -1,15 +1,83 @@
-import { Ellipsis } from '@signozhq/icons';
-import { Button, TableColumnsType as ColumnsType, Tooltip } from 'antd';
+import { useMemo } from 'react';
+import { Ellipsis, Search } from '@signozhq/icons';
+import { Color } from '@signozhq/design-tokens';
+import { Button, TableColumnsType as ColumnsType } from 'antd';
+import ClientSideQBSearch, {
+	AttributeKey,
+} from 'components/ClientSideQBSearch/ClientSideQBSearch';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
+import { transformKeyValuesToAttributeValuesMap } from 'container/QueryBuilder/filters/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
+import AlertLabels, {
+	AlertLabelsProps,
+} from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
 import AlertState from 'pages/AlertDetails/AlertHeader/AlertState/AlertState';
 import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+const transformLabelsToQbKeys = (
+	labels: AlertRuleTimelineTableResponse['labels'],
+): AttributeKey[] => Object.keys(labels).flatMap((key) => [{ key }]);
+
+function LabelFilter({
+	filters,
+	setFilters,
+	labels,
+}: {
+	setFilters: (filters: TagFilter) => void;
+	filters: TagFilter;
+	labels: AlertLabelsProps['labels'];
+}): JSX.Element | null {
+	const isDarkMode = useIsDarkMode();
+
+	const { transformedKeys, attributesMap } = useMemo(
+		() => ({
+			transformedKeys: transformLabelsToQbKeys(labels || {}),
+			attributesMap: transformKeyValuesToAttributeValuesMap(labels),
+		}),
+		[labels],
+	);
+
+	const handleSearch = (tagFilters: TagFilter): void => {
+		const tagFiltersLength = tagFilters.items.length;
+
+		if (
+			(!tagFiltersLength && (!filters || !filters.items.length)) ||
+			tagFiltersLength === filters?.items.length
+		) {
+			return;
+		}
+		setFilters(tagFilters);
+	};
+
+	return (
+		<ClientSideQBSearch
+			onChange={handleSearch}
+			filters={filters}
+			className="alert-history-label-search"
+			attributeKeys={transformedKeys}
+			attributeValuesMap={attributesMap}
+			suffixIcon={
+				<Search
+					size={14}
+					color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
+				/>
+			}
+		/>
+	);
+}
 
 export const timelineTableColumns = ({
+	filters,
+	labels,
+	setFilters,
 	formatTimezoneAdjustedTimestamp,
 }: {
+	filters: TagFilter;
+	labels: AlertLabelsProps['labels'];
+	setFilters: (filters: TagFilter) => void;
 	formatTimezoneAdjustedTimestamp: (
 		input: TimestampInput,
 		format?: string,
@@ -21,16 +89,18 @@ export const timelineTableColumns = ({
 		sorter: true,
 		width: 140,
 		render: (value): JSX.Element => (
-			<div className="alert-rule-state" data-testid="timeline-row-state">
+			<div className="alert-rule-state">
 				<AlertState state={value} showLabel />
 			</div>
 		),
 	},
 	{
-		title: 'LABELS',
+		title: (
+			<LabelFilter setFilters={setFilters} filters={filters} labels={labels} />
+		),
 		dataIndex: 'labels',
 		render: (labels): JSX.Element => (
-			<div className="alert-rule-labels" data-testid="timeline-row-labels">
+			<div className="alert-rule-labels">
 				<AlertLabels labels={labels} />
 			</div>
 		),
@@ -40,10 +110,7 @@ export const timelineTableColumns = ({
 		dataIndex: 'unixMilli',
 		width: 200,
 		render: (value): JSX.Element => (
-			<div
-				className="alert-rule__created-at"
-				data-testid="timeline-row-created-at"
-			>
+			<div className="alert-rule__created-at">
 				{formatTimezoneAdjustedTimestamp(value, DATE_TIME_FORMATS.DASH_DATETIME)}
 			</div>
 		),
@@ -52,27 +119,15 @@ export const timelineTableColumns = ({
 		title: 'ACTIONS',
 		width: 140,
 		align: 'right',
-		render: (_, record): JSX.Element => {
-			if (!record.relatedTracesLink && !record.relatedLogsLink) {
-				return (
-					<Tooltip title="No links available for this item">
-						<Button type="text" ghost disabled data-testid="timeline-row-actions">
-							<Ellipsis className="dropdown-icon" size="md" />
-						</Button>
-					</Tooltip>
-				);
-			}
-
-			return (
-				<ConditionalAlertPopover
-					relatedTracesLink={record.relatedTracesLink ?? ''}
-					relatedLogsLink={record.relatedLogsLink ?? ''}
-				>
-					<Button type="text" ghost data-testid="timeline-row-actions">
-						<Ellipsis className="dropdown-icon" size="md" />
-					</Button>
-				</ConditionalAlertPopover>
-			);
-		},
+		render: (record): JSX.Element => (
+			<ConditionalAlertPopover
+				relatedTracesLink={record.relatedTracesLink}
+				relatedLogsLink={record.relatedLogsLink}
+			>
+				<Button type="text" ghost>
+					<Ellipsis className="dropdown-icon" size="md" />
+				</Button>
+			</ConditionalAlertPopover>
+		),
 	},
 ];

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTableCursor.ts

@@ -1,53 +0,0 @@
-import {
-	Options,
-	parseAsInteger,
-	parseAsStringLiteral,
-	useQueryState,
-	UseQueryStateReturn,
-} from 'nuqs';
-import { TIMELINE_TABLE_PAGE_SIZE } from 'container/AlertHistory/constants';
-
-const defaultNuqsOptions: Options = {
-	history: 'push',
-};
-
-export const TIMELINE_TABLE_PARAMS = {
-	PAGE: 'page',
-	ORDER: 'order',
-} as const;
-
-const ORDER_VALUES = ['asc', 'desc'] as const;
-export type OrderDirection = (typeof ORDER_VALUES)[number];
-
-export const useTimelineTablePage = (): UseQueryStateReturn<number, number> =>
-	useQueryState(
-		TIMELINE_TABLE_PARAMS.PAGE,
-		parseAsInteger.withDefault(1).withOptions(defaultNuqsOptions),
-	);
-
-export const useTimelineTableOrder = (): UseQueryStateReturn<
-	OrderDirection,
-	OrderDirection
-> =>
-	useQueryState(
-		TIMELINE_TABLE_PARAMS.ORDER,
-		parseAsStringLiteral(ORDER_VALUES)
-			.withDefault('asc')
-			.withOptions(defaultNuqsOptions),
-	);
-
-export function encodeCursor(page: number, limit: number): string | undefined {
-	if (page <= 1) {
-		return undefined;
-	}
-	const offset = (page - 1) * limit;
-	// Backend uses base64.RawURLEncoding (URL-safe, no padding)
-	return btoa(JSON.stringify({ offset, limit }))
-		.replace(/\+/g, '-')
-		.replace(/\//g, '_')
-		.replace(/=+$/, '');
-}
-
-export function computeCursorForPage(page: number): string | undefined {
-	return encodeCursor(page, TIMELINE_TABLE_PAGE_SIZE);
-}

frontend/src/container/AlertHistory/Timeline/Table/utils.ts

@@ -1,26 +0,0 @@
-import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
-import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
-
-const fieldContextToSuggestionMap: Record<
-	TelemetrytypesFieldContextDTO,
-	QueryKeyDataSuggestionsProps['fieldContext']
-> = {
-	[TelemetrytypesFieldContextDTO.resource]: 'resource',
-	[TelemetrytypesFieldContextDTO.span]: 'span',
-	[TelemetrytypesFieldContextDTO.attribute]: 'attribute',
-	// no maps for the following values on suggestion context
-	[TelemetrytypesFieldContextDTO.body]: undefined,
-	[TelemetrytypesFieldContextDTO.metric]: undefined,
-	[TelemetrytypesFieldContextDTO.log]: undefined,
-	[TelemetrytypesFieldContextDTO['']]: undefined,
-};
-
-export function fieldContextToSuggestionContext(
-	fc: TelemetrytypesFieldContextDTO | undefined,
-): QueryKeyDataSuggestionsProps['fieldContext'] {
-	if (fc === undefined) {
-		return undefined;
-	}
-
-	return fieldContextToSuggestionMap[fc];
-}

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

@@ -23,7 +23,6 @@ function TimelineTabs(): JSX.Element {
 		{
 			value: TimelineTab.OVERALL_STATUS,
 			label: 'Overall Status',
-			testId: 'timeline-tab-overall-status',
 		},
 		{
 			value: TimelineTab.TOP_5_CONTRIBUTORS,
@@ -34,7 +33,6 @@ function TimelineTabs(): JSX.Element {
 				</div>
 			),
 			disabled: true,
-			testId: 'timeline-tab-top-contributors',
 		},
 	];
 
@@ -59,17 +57,14 @@ function TimelineFilters(): JSX.Element {
 		{
 			value: TimelineFilter.ALL,
 			label: 'All',
-			testId: 'timeline-filter-all',
 		},
 		{
 			value: TimelineFilter.FIRED,
 			label: 'Fired',
-			testId: 'timeline-filter-fired',
 		},
 		{
 			value: TimelineFilter.RESOLVED,
 			label: 'Resolved',
-			testId: 'timeline-filter-resolved',
 		},
 	];
 

frontend/src/container/AlertHistory/utils/labelAdapters.ts

@@ -1,19 +0,0 @@
-import type { Querybuildertypesv5LabelDTO } from 'api/generated/services/sigNoz.schemas';
-import type { Labels } from 'types/api/alerts/def';
-
-export function labelsArrayToObject(
-	labels: Querybuildertypesv5LabelDTO[] | null | undefined,
-): Labels {
-	if (!labels) {
-		return {};
-	}
-
-	return labels.reduce<Labels>((acc, label) => {
-		const key = label.key?.name ?? '';
-		const value = String(label.value ?? '');
-		if (key) {
-			acc[key] = value;
-		}
-		return acc;
-	}, {});
-}

frontend/src/container/AppLayout/index.tsx

@@ -104,7 +104,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		isFetchingFeatureFlags,
 		featureFlagsFetchError,
 		userPreferences,
-		isFetchingUserPreferences,
 		updateChangelog,
 		toggleChangelogModal,
 		showChangelogModal,
@@ -725,12 +724,12 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		}
 	}, []);
 
-	// Set sidebar as loaded after user preferences fetch completes (success or error)
+	// Set sidebar as loaded after user preferences are fetched
 	useEffect(() => {
-		if (!isFetchingUserPreferences) {
+		if (userPreferences !== null) {
 			setIsSidebarLoaded(true);
 		}
-	}, [isFetchingUserPreferences]);
+	}, [userPreferences]);
 
 	// Use localStorage value as fallback until preferences are loaded
 	const isSideNavPinned = isSidebarLoaded

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/AccountActions/AccountActions.tsx

@@ -17,9 +17,12 @@ import { ChevronDown, Dot, PencilLine, Plug, Plus } from '@signozhq/icons';
 
 import AzureCloudAccountSetupModal from '../../AzureCloudServices/AddNewAccount/CloudAccountSetupModal';
 import AzureAccountSettingsModal from '../../AzureCloudServices/EditAccount/AccountSettingsModal';
+import GcpCloudAccountSetupDrawer from '../../GoogleCloudPlatform/AddNewAccount/CloudAccountSetupDrawer';
+import GcpAccountSettingsDrawer from '../../GoogleCloudPlatform/EditAccount/AccountSettingsDrawer';
 import {
 	mapAccountDtoToAwsCloudAccount,
 	mapAccountDtoToAzureCloudAccount,
+	mapAccountDtoToGcpCloudAccount,
 } from '../../mapCloudAccountFromDto';
 import AwsCloudAccountSetupModal from '../AddNewAccount/CloudAccountSetupModal';
 import AwsAccountSettingsModal from '../EditAccount/AccountSettingsModal';
@@ -156,6 +159,18 @@ function AccountActions({ type }: { type: IntegrationType }): JSX.Element {
 			});
 		}
 
+		if (type === IntegrationType.GCP_SERVICES) {
+			raw.forEach((account) => {
+				if (!account) {
+					return;
+				}
+				const mapped = mapAccountDtoToGcpCloudAccount(account);
+				if (mapped) {
+					mappedAccounts.push(mapped);
+				}
+			});
+		}
+
 		return mappedAccounts;
 	}, [listAccountsResponse, type]);
 
@@ -207,13 +222,23 @@ function AccountActions({ type }: { type: IntegrationType }): JSX.Element {
 	// log telemetry event when an account is viewed.
 	useEffect(() => {
 		if (activeAccount) {
+			const { config } = activeAccount;
+			let enabledRegions: string[];
+			if ('regions' in config) {
+				// AWS
+				enabledRegions = config.regions;
+			} else if ('resource_groups' in config) {
+				// Azure
+				enabledRegions = config.resource_groups;
+			} else {
+				// GCP
+				enabledRegions = config.project_ids;
+			}
+
 			logEvent(`${type} Integration: Account viewed`, {
 				cloudAccountId: activeAccount?.cloud_account_id,
 				status: activeAccount?.status,
-				enabledRegions:
-					'regions' in activeAccount.config
-						? activeAccount.config.regions
-						: activeAccount.config.resource_groups,
+				enabledRegions,
 			});
 		}
 	}, [activeAccount, type]);
@@ -260,6 +285,11 @@ function AccountActions({ type }: { type: IntegrationType }): JSX.Element {
 							onClose={(): void => setIsIntegrationModalOpen(false)}
 						/>
 					)}
+					{type === IntegrationType.GCP_SERVICES && (
+						<GcpCloudAccountSetupDrawer
+							onClose={(): void => setIsIntegrationModalOpen(false)}
+						/>
+					)}
 				</>
 			)}
 
@@ -281,6 +311,13 @@ function AccountActions({ type }: { type: IntegrationType }): JSX.Element {
 							setActiveAccount={setActiveAccount}
 						/>
 					)}
+					{type === IntegrationType.GCP_SERVICES && (
+						<GcpAccountSettingsDrawer
+							onClose={(): void => setIsAccountSettingsModalOpen(false)}
+							account={activeAccount}
+							setActiveAccount={setActiveAccount}
+						/>
+					)}
 				</>
 			)}
 		</div>

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDetails/ServiceDetails.tsx

@@ -46,14 +46,34 @@ const EMPTY_FORM_VALUES: ServiceConfigFormValues = {
 	s3BucketsByRegion: {},
 };
 
+const GCP_METRICS_INFO_TOOLTIP =
+	'These are suggested metrics for your OpenTelemetry Collector Configuration. The metrics you actually receive may vary based on the metrics listed in your collector config.';
+
+function getIntegrationServiceConfig(
+	type: IntegrationType,
+	serviceDetailsData?: ServiceDetailsData,
+):
+	| { logs?: { enabled?: boolean }; metrics?: { enabled?: boolean } }
+	| undefined {
+	const config = serviceDetailsData?.cloudIntegrationService?.config;
+
+	if (type === IntegrationType.AWS_SERVICES) {
+		return config?.aws;
+	}
+	if (type === IntegrationType.GCP_SERVICES) {
+		return config?.gcp;
+	}
+	return config?.azure;
+}
+
 function getInitialFormValues(
 	type: IntegrationType,
 	serviceDetailsData?: ServiceDetailsData,
 ): ServiceConfigFormValues {
-	const integrationConfig =
-		type === IntegrationType.AWS_SERVICES
-			? serviceDetailsData?.cloudIntegrationService?.config?.aws
-			: serviceDetailsData?.cloudIntegrationService?.config?.azure;
+	const integrationConfig = getIntegrationServiceConfig(
+		type,
+		serviceDetailsData,
+	);
 
 	return {
 		logsEnabled: integrationConfig?.logs?.enabled || false,
@@ -98,16 +118,21 @@ function getServiceConfigPayload({
 		};
 	}
 
-	return {
-		azure: {
-			logs: {
-				enabled: isLogsSupported ? logsEnabled : false,
-			},
-			metrics: {
-				enabled: isMetricsSupported ? metricsEnabled : false,
-			},
+	// Azure and GCP share the same simple logs/metrics enable-flag shape.
+	const signalConfig = {
+		logs: {
+			enabled: isLogsSupported ? logsEnabled : false,
+		},
+		metrics: {
+			enabled: isMetricsSupported ? metricsEnabled : false,
 		},
 	};
+
+	if (type === IntegrationType.GCP_SERVICES) {
+		return { gcp: signalConfig };
+	}
+
+	return { azure: signalConfig };
 }
 
 function ServiceDetails({
@@ -147,6 +172,7 @@ function ServiceDetails({
 			cloudProvider: type,
 			serviceId: serviceId || '',
 		},
+		undefined,
 		{
 			query: {
 				enabled: !!serviceId && !cloudAccountId,
@@ -162,10 +188,10 @@ function ServiceDetails({
 		? isAccountServiceLoading
 		: isReadOnlyServiceLoading;
 
-	const integrationConfig =
-		type === IntegrationType.AWS_SERVICES
-			? serviceDetailsData?.cloudIntegrationService?.config?.aws
-			: serviceDetailsData?.cloudIntegrationService?.config?.azure;
+	const integrationConfig = getIntegrationServiceConfig(
+		type,
+		serviceDetailsData,
+	);
 	const isServiceEnabledInPersistedConfig =
 		Boolean(integrationConfig?.logs?.enabled) ||
 		Boolean(integrationConfig?.metrics?.enabled);
@@ -477,6 +503,11 @@ function ServiceDetails({
 				<CloudServiceDataCollected
 					logsData={serviceDetailsData?.dataCollected?.logs || []}
 					metricsData={serviceDetailsData?.dataCollected?.metrics || []}
+					metricsInfoTooltip={
+						type === IntegrationType.GCP_SERVICES
+							? GCP_METRICS_INFO_TOOLTIP
+							: undefined
+					}
 				/>
 			</div>
 		);

frontend/src/container/Integrations/CloudIntegration/AzureCloudServices/EditAccount/AccountSettingsModal.tsx

@@ -36,8 +36,12 @@ function AccountSettingsModal({
 
 	const queryClient = useQueryClient();
 
+	// `account.config` is the shared per-provider union (Azure | AWS | GCP).
+	// Narrow to Azure by `resource_groups` (Azure-only) rather than
+	// `deployment_region`, which GCP also has — so it no longer identifies
+	// Azure uniquely.
 	const azureConfig = useMemo(
-		() => ('deployment_region' in account.config ? account.config : null),
+		() => ('resource_groups' in account.config ? account.config : null),
 		[account.config],
 	);
 

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/CloudAccountSetupDrawer.module.scss

@@ -0,0 +1,142 @@
+.setupDrawer {
+	--dialog-header-padding: var(--spacing-10) var(--spacing-12);
+	--dialog-footer-padding: var(--spacing-8) var(--spacing-12);
+
+	// Input and ComboboxSimple default to --border borders, inherited text and
+	// --muted-foreground placeholders; the drawer wants the dimmer --l2-border with
+	// brighter values and duller placeholders. Backgrounds are left alone — both
+	// components default to transparent and every field sits on an --l2-background
+	// surface already. Focus borders stay at their per-component defaults.
+	--input-border-color: var(--l2-border);
+	--input-hover-border-color: var(--l2-border);
+	--input-foreground: var(--l1-foreground);
+	--input-placeholder-color: var(--l3-foreground);
+	--combobox-trigger-border-color: var(--l2-border);
+
+	// Bounded flex column so the header/footer stay put and only the body
+	// scrolls when content overflows.
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	[data-slot='drawer-header'],
+	[data-slot='drawer-footer'] {
+		flex-shrink: 0;
+	}
+
+	// The drawer body renders inside [data-slot='drawer-description'] — this is
+	// the only region allowed to scroll.
+	[data-slot='drawer-description'] {
+		display: flex;
+		flex: 1 1 auto;
+		flex-direction: column;
+		gap: var(--spacing-10);
+		min-height: 0;
+		padding: var(--spacing-10) var(--spacing-12);
+		overflow-y: auto;
+	}
+
+	[data-slot='select-content'] {
+		width: var(--radix-select-trigger-width);
+	}
+
+	[data-slot='combobox-content'] {
+		z-index: 5;
+		background: var(--l1-background);
+		border: 1px solid var(--l2-border);
+		border-radius: var(--radius-2);
+	}
+
+	// Selected region value: bright, like every other field's text.
+	[data-slot='combobox-value'] {
+		color: var(--l1-foreground);
+	}
+
+	// Empty trigger (.regionEmpty, set from the RHF value): dull the placeholder text.
+	.regionEmpty [data-slot='combobox-value'] {
+		color: var(--l3-foreground);
+	}
+}
+
+.title {
+	h3 {
+		margin: 0;
+		font-size: var(--periscope-font-size-medium);
+		font-weight: var(--font-weight-semibold);
+	}
+}
+
+.footerContainer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	width: 100%;
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	padding: 0;
+}
+
+.drawerSection {
+	composes: drawerSection from './shared.module.scss';
+}
+
+.mono {
+	composes: mono from './shared.module.scss';
+}
+
+.fullWidth {
+	width: 100%;
+}
+
+.fieldError {
+	composes: fieldError from './shared.module.scss';
+}
+
+.projectIdsSelect {
+	:global(.ant-select-selector) {
+		min-height: 36px;
+		background: var(--l2-background);
+		border: 1px solid var(--l2-border) !important;
+	}
+
+	&:hover :global(.ant-select-selector),
+	&:global(.ant-select-focused) :global(.ant-select-selector) {
+		border-color: var(--l2-border);
+		box-shadow: none;
+	}
+
+	// antd defaults to 14px; pin to 13px to line up with the Input/Combobox fields.
+	:global(.ant-select-selection-placeholder),
+	:global(.ant-select-selection-search-input),
+	:global(.ant-select-selection-item) {
+		font-size: var(--periscope-font-size-base);
+	}
+
+	:global(.ant-select-selection-placeholder) {
+		color: var(--l3-foreground);
+	}
+
+	:global(.ant-select-selection-search-input) {
+		color: var(--l1-foreground);
+	}
+
+	:global(.ant-select-selection-item) {
+		color: var(--l1-foreground);
+		background: var(--l2-background);
+		border: 1px solid var(--l2-border);
+		border-radius: var(--radius-2);
+	}
+
+	:global(.ant-select-selection-item-remove) {
+		color: var(--l3-foreground);
+
+		&:hover {
+			color: var(--l1-foreground);
+		}
+	}
+}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/CloudAccountSetupDrawer.tsx

@@ -0,0 +1,286 @@
+import { useEffect, useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Callout } from '@signozhq/ui/callout';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Input } from '@signozhq/ui/input';
+import { Typography } from '@signozhq/ui/typography';
+import { Select } from 'antd';
+import cx from 'classnames';
+import { GCP_REGIONS } from 'container/Integrations/constants';
+import { IntegrationModalProps } from 'container/Integrations/HeroSection/types';
+import { useCloudAccountSetupDrawer } from 'hooks/integration/gcp/useCloudAccountSetupDrawer';
+import { Controller, useForm } from 'react-hook-form';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import ConnectionSecretsFields from './ConnectionSecretsFields';
+import FieldLabel from './FieldLabel';
+import FlowSelector from './FlowSelector';
+import { GcpSetupFormValues, SetupFlow } from './types';
+
+import styles from './CloudAccountSetupDrawer.module.scss';
+
+const REGION_ITEMS = GCP_REGIONS.map((region) => ({
+	value: region.value,
+	label: `${region.label} (${region.value})`,
+}));
+
+const DEFAULT_VALUES: GcpSetupFormValues = {
+	accountName: '',
+	deploymentProjectId: '',
+	deploymentRegion: '',
+	projectIds: [],
+	sigNozApiUrl: '',
+	sigNozApiKey: '',
+	ingestionUrl: '',
+	ingestionKey: '',
+};
+
+function CloudAccountSetupDrawer({
+	onClose,
+}: IntegrationModalProps): JSX.Element {
+	const {
+		isLoading,
+		connectAccount,
+		handleClose,
+		connectionParams,
+		isConnectionParamsLoading,
+		submitError,
+		clearSubmitError,
+	} = useCloudAccountSetupDrawer({ onClose });
+
+	const { control, handleSubmit, setValue } = useForm<GcpSetupFormValues>({
+		defaultValues: DEFAULT_VALUES,
+	});
+
+	const [flow, setFlow] = useState<SetupFlow>('manual');
+
+	// Pre-fill the deployment/ingestion fields with the fetched credentials.
+	useEffect(() => {
+		if (!connectionParams) {
+			return;
+		}
+		setValue('sigNozApiUrl', connectionParams.sigNozApiUrl);
+		setValue('sigNozApiKey', connectionParams.sigNozApiKey);
+		setValue('ingestionUrl', connectionParams.ingestionUrl);
+		setValue('ingestionKey', connectionParams.ingestionKey);
+	}, [connectionParams, setValue]);
+
+	const footer = (
+		<div className={styles.footerContainer}>
+			{submitError && (
+				<Callout
+					type="error"
+					size="small"
+					showIcon
+					action="dismissible"
+					onClick={clearSubmitError}
+					title="Failed to connect GCP account"
+					testId="gcp-connect-error"
+				>
+					{submitError}
+				</Callout>
+			)}
+			<div className={styles.footer}>
+				<Button
+					variant="outlined"
+					color="secondary"
+					onClick={handleClose}
+					testId="gcp-cancel-btn"
+				>
+					Cancel
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={handleSubmit(connectAccount)}
+					loading={isLoading}
+					disabled={isConnectionParamsLoading}
+					testId="gcp-connect-account-btn"
+				>
+					Connect Account
+				</Button>
+			</div>
+		</div>
+	);
+
+	return (
+		<DrawerWrapper
+			open={true}
+			className={styles.setupDrawer}
+			onOpenChange={(open): void => {
+				if (!open) {
+					handleClose();
+				}
+			}}
+			direction="right"
+			showCloseButton
+			title="Connect Google Cloud Platform"
+			width="base"
+			footer={footer}
+			drawerHeaderProps={{ className: styles.title }}
+		>
+			<FlowSelector value={flow} onChange={setFlow} />
+			<div className={styles.drawerSection}>
+				<FieldLabel
+					htmlFor="gcp-account-name-input"
+					label="Account Name"
+					tooltip="A label to identify this group of GCP projects (org ID, billing email, or any descriptive name)"
+					required
+				/>
+				<Controller
+					name="accountName"
+					control={control}
+					rules={{ required: 'Please enter an account name' }}
+					render={({ field, fieldState }): JSX.Element => (
+						<>
+							<Input
+								id="gcp-account-name-input"
+								className={styles.fullWidth}
+								placeholder="e.g. my-org or billing@company.com"
+								value={field.value}
+								onChange={(e): void => field.onChange(e.target.value)}
+								testId="gcp-account-name-input"
+							/>
+							{fieldState.error && (
+								<Typography.Text
+									as="span"
+									size="small"
+									role="alert"
+									className={styles.fieldError}
+								>
+									{fieldState.error.message}
+								</Typography.Text>
+							)}
+						</>
+					)}
+				/>
+			</div>
+			<div className={styles.drawerSection}>
+				<FieldLabel
+					htmlFor="gcp-deployment-project-id-input"
+					label="Deployment Project ID"
+					tooltip="The GCP project that hosts your OTel Collector deployment — often separate from the projects you actually monitor"
+					required
+				/>
+				<Controller
+					name="deploymentProjectId"
+					control={control}
+					rules={{ required: 'Please enter the deployment project ID' }}
+					render={({ field, fieldState }): JSX.Element => (
+						<>
+							<Input
+								id="gcp-deployment-project-id-input"
+								className={cx(styles.fullWidth, styles.mono)}
+								placeholder="e.g. my-deployment-project-123"
+								value={field.value}
+								onChange={(e): void => field.onChange(e.target.value)}
+								testId="gcp-deployment-project-id-input"
+							/>
+							{fieldState.error && (
+								<Typography.Text
+									as="span"
+									size="small"
+									role="alert"
+									className={styles.fieldError}
+								>
+									{fieldState.error.message}
+								</Typography.Text>
+							)}
+						</>
+					)}
+				/>
+			</div>
+			<div className={styles.drawerSection}>
+				<FieldLabel
+					htmlFor="gcp-deployment-region-select"
+					label="Deployment Region"
+					tooltip="The GCP region where your OTel Collector will be deployed"
+					required
+				/>
+				<Controller
+					name="deploymentRegion"
+					control={control}
+					rules={{ required: 'Please select a region' }}
+					render={({ field, fieldState }): JSX.Element => (
+						<>
+							<ComboboxSimple
+								id="gcp-deployment-region-select"
+								className={cx(styles.fullWidth, {
+									[styles.regionEmpty]: !field.value,
+								})}
+								items={REGION_ITEMS}
+								value={field.value}
+								onChange={(value): void => field.onChange(value as string)}
+								placeholder="Select a region..."
+								inputPlaceholder="Search regions…"
+								withPortal={false}
+								testId="gcp-deployment-region-select"
+							/>
+							{fieldState.error && (
+								<Typography.Text
+									as="span"
+									size="small"
+									role="alert"
+									className={styles.fieldError}
+								>
+									{fieldState.error.message}
+								</Typography.Text>
+							)}
+						</>
+					)}
+				/>
+			</div>
+			<div className={styles.drawerSection}>
+				<FieldLabel
+					htmlFor="gcp-project-ids-select"
+					label="Projects to Monitor"
+					tooltip="Enter each GCP project ID then press Enter"
+					required
+				/>
+				<Controller
+					name="projectIds"
+					control={control}
+					rules={{
+						validate: (value): true | string =>
+							value.length > 0 || 'Please add at least one project ID',
+					}}
+					render={({ field, fieldState }): JSX.Element => (
+						<>
+							<Select
+								id="gcp-project-ids-select"
+								className={cx(styles.fullWidth, styles.projectIdsSelect)}
+								mode="tags"
+								value={field.value}
+								onChange={(value): void => field.onChange(value)}
+								placeholder="Add project IDs…"
+								tokenSeparators={[',', ' ']}
+								notFoundContent={null}
+								suffixIcon={null}
+								getPopupContainer={popupContainer}
+								data-testid="gcp-project-ids-select"
+							/>
+							{fieldState.error && (
+								<Typography.Text
+									as="span"
+									size="small"
+									role="alert"
+									className={styles.fieldError}
+								>
+									{fieldState.error.message}
+								</Typography.Text>
+							)}
+						</>
+					)}
+				/>
+			</div>
+			<ConnectionSecretsFields
+				control={control}
+				isLoading={isConnectionParamsLoading}
+				connectionParams={connectionParams}
+			/>
+		</DrawerWrapper>
+	);
+}
+
+export default CloudAccountSetupDrawer;

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/ConnectionSecretsFields.module.scss

@@ -0,0 +1,71 @@
+.drawerSurface {
+	composes: drawerSurface from './shared.module.scss';
+}
+
+.drawerSurfaceHead {
+	composes: drawerSurfaceHead from './shared.module.scss';
+}
+
+.drawerSection {
+	composes: drawerSection from './shared.module.scss';
+}
+
+.headLabel {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.mono {
+	composes: mono from './shared.module.scss';
+}
+
+.fieldError {
+	composes: fieldError from './shared.module.scss';
+}
+
+.fullWidth {
+	width: 100%;
+}
+
+.secretsBody {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+}
+
+.skeletonLabel :global(.ant-skeleton-input) {
+	width: 120px;
+	min-width: 120px;
+	height: 14px;
+}
+
+.skeletonInput :global(.ant-skeleton-input) {
+	width: 100%;
+	min-width: 100%;
+	height: 36px;
+}
+
+.readonlyField {
+	display: flex;
+	gap: var(--spacing-2);
+	align-items: center;
+	height: 36px;
+	padding: 0 var(--spacing-2) 0 var(--spacing-4);
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	border-radius: var(--radius-2);
+}
+
+.readonlyValue {
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow: hidden;
+	// Match the other fields' value text: 13px and the brighter --l1-foreground.
+	font-size: var(--periscope-font-size-base);
+	color: var(--l2-foreground);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	cursor: not-allowed;
+}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/ConnectionSecretsFields.tsx

@@ -0,0 +1,193 @@
+import { Lock } from '@signozhq/icons';
+import { Input } from '@signozhq/ui/input';
+import { toast } from '@signozhq/ui/sonner';
+import { Typography } from '@signozhq/ui/typography';
+import { Skeleton } from 'antd';
+import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
+import CopyButton from 'periscope/components/CopyButton/CopyButton';
+import { Control, Controller } from 'react-hook-form';
+
+import FieldLabel from './FieldLabel';
+import { GcpSetupFormValues } from './types';
+import { SecretFieldType, validateSecretValue } from './validators';
+import styles from './ConnectionSecretsFields.module.scss';
+
+type CredentialField = keyof CloudintegrationtypesCredentialsDTO;
+
+interface FieldConfig {
+	name: CredentialField;
+	label: string;
+	tooltip: string;
+	placeholder: string;
+	testId: string;
+	type: SecretFieldType;
+}
+
+const FIELDS: FieldConfig[] = [
+	{
+		name: 'sigNozApiUrl',
+		label: 'SigNoz API URL',
+		tooltip: 'Base URL of your SigNoz instance the collector reports to',
+		placeholder: 'https://<tenant>.signoz.cloud',
+		testId: 'gcp-signoz-api-url-input',
+		type: 'url',
+	},
+	{
+		name: 'sigNozApiKey',
+		label: 'SigNoz API Key',
+		tooltip: 'API key used to authenticate with your SigNoz instance',
+		placeholder: 'Enter SigNoz API key',
+		testId: 'gcp-signoz-api-key-input',
+		type: 'text',
+	},
+	{
+		name: 'ingestionUrl',
+		label: 'Ingestion URL',
+		tooltip: 'OTLP ingestion endpoint your OTel Collector sends telemetry to',
+		placeholder: 'https://ingest.<region>.signoz.cloud',
+		testId: 'gcp-ingestion-url-input',
+		type: 'url',
+	},
+	{
+		name: 'ingestionKey',
+		label: 'Ingestion Key',
+		tooltip: 'Ingestion key that authorizes telemetry sent to SigNoz',
+		placeholder: 'Enter ingestion key',
+		testId: 'gcp-ingestion-key-input',
+		type: 'text',
+	},
+];
+
+interface ConnectionSecretsFieldsProps {
+	control: Control<GcpSetupFormValues>;
+	isLoading: boolean;
+	connectionParams?: CloudintegrationtypesCredentialsDTO;
+}
+
+function ConnectionSecretsFields({
+	control,
+	isLoading,
+	connectionParams,
+}: ConnectionSecretsFieldsProps): JSX.Element {
+	const hasMissingValue = FIELDS.some(
+		(field) => !connectionParams?.[field.name],
+	);
+
+	return (
+		<div className={styles.drawerSurface}>
+			<div className={styles.drawerSurfaceHead}>
+				<Typography.Text weight="bold" size="base">
+					Deployment details &amp; ingestion secrets
+				</Typography.Text>
+				{!hasMissingValue && (
+					<div className={styles.headLabel}>
+						<Lock size={12} />
+						<Typography.Text as="span" size="small" className={styles.headLabel}>
+							Auto-filled by SigNoz
+						</Typography.Text>
+					</div>
+				)}
+			</div>
+
+			{isLoading ? (
+				<div className={styles.secretsBody} data-testid="gcp-secrets-skeleton">
+					{FIELDS.map((field) => (
+						<div key={field.name} className={styles.drawerSection}>
+							<Skeleton.Input active size="small" className={styles.skeletonLabel} />
+							<Skeleton.Input active block className={styles.skeletonInput} />
+						</div>
+					))}
+				</div>
+			) : (
+				<div className={styles.secretsBody}>
+					{FIELDS.map((field) => {
+						// Backend-provided values are read-only — the user can't edit them, so
+						// show a truncated value with a copy button. Missing values (enterprise)
+						// stay editable inputs with no copy button.
+						const providedValue = connectionParams?.[field.name];
+						if (providedValue) {
+							return (
+								<div key={field.name} className={styles.drawerSection}>
+									<FieldLabel
+										htmlFor={field.testId}
+										label={field.label}
+										tooltip={field.tooltip}
+									/>
+									<div className={styles.readonlyField}>
+										<Typography.Text
+											as="span"
+											id={field.testId}
+											className={cx(styles.readonlyValue, styles.mono)}
+											title={providedValue}
+											testId={field.testId}
+										>
+											{providedValue}
+										</Typography.Text>
+										<CopyButton
+											value={providedValue}
+											size={12}
+											ariaLabel={`Copy ${field.label}`}
+											testId={`${field.testId}-copy`}
+											onCopy={(): void => {
+												toast.success(`${field.label} copied to clipboard`, {
+													position: 'bottom-right',
+												});
+											}}
+										/>
+									</div>
+								</div>
+							);
+						}
+
+						return (
+							<div key={field.name} className={styles.drawerSection}>
+								<FieldLabel
+									htmlFor={field.testId}
+									label={field.label}
+									tooltip={field.tooltip}
+								/>
+								<Controller
+									name={field.name}
+									control={control}
+									rules={{
+										validate: (value): true | string =>
+											validateSecretValue(field.label, field.type, value),
+									}}
+									render={({ field: rhfField, fieldState }): JSX.Element => (
+										<>
+											<Input
+												id={field.testId}
+												className={cx(styles.fullWidth, styles.mono)}
+												placeholder={field.placeholder}
+												value={rhfField.value}
+												onChange={(e): void => rhfField.onChange(e.target.value)}
+												testId={field.testId}
+											/>
+											{fieldState.error && (
+												<Typography.Text
+													as="span"
+													size="small"
+													role="alert"
+													className={styles.fieldError}
+												>
+													{fieldState.error.message}
+												</Typography.Text>
+											)}
+										</>
+									)}
+								/>
+							</div>
+						);
+					})}
+				</div>
+			)}
+		</div>
+	);
+}
+
+ConnectionSecretsFields.defaultProps = {
+	connectionParams: undefined,
+};
+
+export default ConnectionSecretsFields;

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/FieldLabel.module.scss

@@ -0,0 +1,22 @@
+.fieldLabel {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.required {
+	composes: required from './shared.module.scss';
+}
+
+.infoTrigger {
+	display: inline-flex;
+	align-items: center;
+	color: var(--l3-foreground);
+	cursor: help;
+}
+
+.tooltipContent {
+	max-width: 240px;
+	white-space: normal;
+	word-break: break-word;
+}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/FieldLabel.tsx

@@ -0,0 +1,49 @@
+import { Info } from '@signozhq/icons';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+
+import styles from './FieldLabel.module.scss';
+
+interface FieldLabelProps {
+	htmlFor: string;
+	label: string;
+	tooltip: string;
+	required?: boolean;
+}
+
+function FieldLabel({
+	htmlFor,
+	label,
+	tooltip,
+	required,
+}: FieldLabelProps): JSX.Element {
+	return (
+		<label className={styles.fieldLabel} htmlFor={htmlFor}>
+			{label}
+
+			<TooltipSimple
+				title={tooltip}
+				side="top"
+				tooltipContentProps={{ className: styles.tooltipContent }}
+			>
+				<span
+					className={styles.infoTrigger}
+					aria-label={`${label} help`}
+					data-testid={`${htmlFor}-tooltip`}
+				>
+					<Info size={12} />
+				</span>
+			</TooltipSimple>
+			{required && (
+				<span className={styles.required} aria-hidden="true">
+					*
+				</span>
+			)}
+		</label>
+	);
+}
+
+FieldLabel.defaultProps = {
+	required: false,
+};
+
+export default FieldLabel;

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/FlowSelector.module.scss

@@ -0,0 +1,84 @@
+.drawerSection {
+	composes: drawerSection from './shared.module.scss';
+}
+
+.drawerSurface {
+	composes: drawerSurface from './shared.module.scss';
+}
+
+.drawerSurfaceHead {
+	composes: drawerSurfaceHead from './shared.module.scss';
+}
+
+.flowRadioGroup {
+	--radio-group-item-border-color: var(--l2-border);
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	width: 100%;
+
+	.flowRadio {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		justify-content: flex-start;
+		gap: var(--spacing-5);
+		width: 100%;
+		padding: var(--spacing-5) var(--spacing-6);
+		margin: 0;
+		border: 1px solid transparent;
+		border-radius: var(--radius-2);
+		box-sizing: border-box;
+		cursor: pointer;
+		transition:
+			background-color 0.12s ease,
+			border-color 0.12s ease;
+
+		> button[role='radio'] {
+			flex: 0 0 16px;
+			width: 16px;
+			height: 16px;
+			margin-top: 3px;
+		}
+
+		> label {
+			flex: 1 1 auto;
+			min-width: 0;
+			display: block;
+			text-align: left;
+			cursor: pointer;
+			font-size: inherit;
+			font-weight: inherit;
+			color: inherit;
+		}
+
+		&.flowRadioManual:has(button[data-state='checked']) {
+			background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
+			border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
+		}
+
+		&:hover {
+			background: var(--l3-background-hover);
+		}
+
+		&:has(button[disabled]) {
+			cursor: not-allowed;
+			opacity: 0.55;
+
+			&:hover {
+				background: var(--l3-background);
+			}
+		}
+	}
+}
+
+.flowRadioTitle {
+	display: flex;
+	gap: var(--spacing-2);
+	align-items: center;
+}
+
+.flowRadioDesc {
+	margin-top: var(--spacing-2);
+}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/FlowSelector.tsx

@@ -0,0 +1,76 @@
+import { Badge } from '@signozhq/ui/badge';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import { SetupFlow } from './types';
+import styles from './FlowSelector.module.scss';
+
+interface FlowSelectorProps {
+	value: SetupFlow;
+	onChange: (flow: SetupFlow) => void;
+}
+
+function FlowSelector({ value, onChange }: FlowSelectorProps): JSX.Element {
+	return (
+		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
+			<div className={styles.drawerSurfaceHead}>
+				<Typography.Text weight="bold" size="base">
+					Connection method
+				</Typography.Text>
+			</div>
+
+			<RadioGroup
+				value={value}
+				onChange={(next): void => onChange(next as SetupFlow)}
+				className={styles.flowRadioGroup}
+			>
+				<RadioGroupItem
+					value="manual"
+					containerClassName={cx(styles.flowRadio, styles.flowRadioManual)}
+					testId="gcp-flow-manual"
+				>
+					<div className={styles.flowRadioTitle}>
+						<Typography.Text weight="semibold" size="base">
+							Connect Manually
+						</Typography.Text>
+					</div>
+					<Typography.Text
+						as="p"
+						size="small"
+						color="muted"
+						className={styles.flowRadioDesc}
+					>
+						Deploy your own OTel Collector and configure log sinks.
+					</Typography.Text>
+				</RadioGroupItem>
+
+				<RadioGroupItem
+					value="agent"
+					containerClassName={styles.flowRadio}
+					testId="gcp-flow-agent"
+					disabled
+				>
+					<div className={styles.flowRadioTitle}>
+						<Typography.Text weight="semibold" size="base">
+							Connect via Agent
+						</Typography.Text>
+						<Badge color="robin" variant="default">
+							Soon
+						</Badge>
+					</div>
+					<Typography.Text
+						as="p"
+						size="small"
+						color="muted"
+						className={styles.flowRadioDesc}
+					>
+						SigNoz deploys and manages the collector for you.
+					</Typography.Text>
+				</RadioGroupItem>
+			</RadioGroup>
+		</div>
+	);
+}
+
+export default FlowSelector;

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/shared.module.scss

@@ -0,0 +1,36 @@
+.drawerSection {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+}
+
+.drawerSection > label {
+	font-size: var(--periscope-font-size-normal);
+	color: var(--l2-foreground);
+}
+
+.required {
+	color: var(--accent-cherry);
+}
+
+.fieldError {
+	font-size: var(--periscope-font-size-small);
+	color: var(--accent-cherry);
+}
+
+.drawerSurface {
+	padding: var(--spacing-7);
+	border-radius: 6px;
+	border: 1px solid var(--l2-border);
+}
+
+.drawerSurfaceHead {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: var(--spacing-5);
+}
+
+.mono {
+	font-family: var(--font-family-mono);
+}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/types.ts

@@ -0,0 +1,12 @@
+export type SetupFlow = 'manual' | 'agent';
+
+export interface GcpSetupFormValues {
+	accountName: string;
+	deploymentProjectId: string;
+	deploymentRegion: string;
+	projectIds: string[];
+	sigNozApiUrl: string;
+	sigNozApiKey: string;
+	ingestionUrl: string;
+	ingestionKey: string;
+}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/validators.ts

@@ -0,0 +1,24 @@
+export type SecretFieldType = 'url' | 'text';
+
+export function isValidUrl(value: string): boolean {
+	try {
+		return Boolean(new URL(value));
+	} catch {
+		return false;
+	}
+}
+
+export function validateSecretValue(
+	label: string,
+	type: SecretFieldType,
+	value: string | undefined,
+): true | string {
+	const trimmed = value?.trim();
+	if (!trimmed) {
+		return `Please enter the ${label}`;
+	}
+	if (type === 'url' && !isValidUrl(trimmed)) {
+		return `Please enter a valid URL for ${label}`;
+	}
+	return true;
+}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/EditAccount/AccountSettingsDrawer.module.scss

@@ -0,0 +1,64 @@
+.body {
+	display: flex;
+	flex-direction: column;
+	gap: 17px;
+	border-radius: 3px;
+}
+
+.connectedAccountDetails {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+}
+
+.connectedAccountDetailsTitle {
+	color: var(--l1-foreground);
+	font-size: 14px;
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-20);
+	letter-spacing: -0.07px;
+}
+
+.accountId {
+	color: var(--l2-foreground);
+	font-size: 12px;
+	line-height: 18px;
+	letter-spacing: -0.06px;
+}
+
+.accountIdValue {
+	font-family: 'Geist Mono';
+	font-size: 12px;
+	font-weight: var(--font-weight-bold);
+	line-height: 18px;
+	letter-spacing: -0.06px;
+}
+
+.regionSelector {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+}
+
+.regionSelectorTitle {
+	color: var(--l1-foreground);
+	font-size: 14px;
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-20);
+	letter-spacing: -0.07px;
+}
+
+.regionSelectorDescription {
+	color: var(--l2-foreground);
+	font-size: 12px;
+	line-height: 18px;
+	letter-spacing: -0.06px;
+}
+
+.footer {
+	display: flex;
+	flex-direction: row;
+	gap: var(--spacing-5);
+	justify-content: space-between;
+	width: 100%;
+}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/EditAccount/AccountSettingsDrawer.tsx

@@ -0,0 +1,156 @@
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import { useQueryClient } from 'react-query';
+import { Save } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Form, Select } from 'antd';
+import { invalidateListAccounts } from 'api/generated/services/cloudintegration';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { CloudAccount } from 'container/Integrations/types';
+import { useAccountSettingsDrawer } from 'hooks/integration/gcp/useAccountSettingsDrawer';
+
+import RemoveIntegrationAccount from '../../RemoveAccount/RemoveIntegrationAccount';
+
+import styles from './AccountSettingsDrawer.module.scss';
+
+interface AccountSettingsDrawerProps {
+	onClose: () => void;
+	account: CloudAccount;
+	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
+}
+
+function AccountSettingsDrawer({
+	onClose,
+	account,
+	setActiveAccount,
+}: AccountSettingsDrawerProps): JSX.Element {
+	const {
+		form,
+		isLoading,
+		projectIds,
+		isSaveDisabled,
+		setProjectIds,
+		handleSubmit,
+		handleClose,
+	} = useAccountSettingsDrawer({ onClose, account, setActiveAccount });
+
+	const queryClient = useQueryClient();
+
+	const gcpConfig = useMemo(
+		() => ('project_ids' in account.config ? account.config : null),
+		[account.config],
+	);
+
+	return (
+		<DrawerWrapper
+			open={true}
+			title="Account Settings"
+			direction="right"
+			showCloseButton
+			onOpenChange={(open): void => {
+				if (!open) {
+					handleClose();
+				}
+			}}
+			width="wide"
+			footer={
+				<div className={styles.footer}>
+					<RemoveIntegrationAccount
+						accountId={account?.id}
+						onRemoveIntegrationAccountSuccess={(): void => {
+							void invalidateListAccounts(queryClient, {
+								cloudProvider: INTEGRATION_TYPES.GCP,
+							});
+							setActiveAccount(null);
+							handleClose();
+						}}
+						cloudProvider={INTEGRATION_TYPES.GCP}
+					/>
+					<Button
+						variant="solid"
+						color="secondary"
+						disabled={isSaveDisabled}
+						onClick={handleSubmit}
+						loading={isLoading}
+						prefix={<Save size={14} />}
+						data-testid="gcp-update-account-btn"
+					>
+						Update Changes
+					</Button>
+				</div>
+			}
+		>
+			<Form
+				form={form}
+				layout="vertical"
+				initialValues={{
+					projectIds: gcpConfig?.project_ids || [],
+				}}
+			>
+				<div className={styles.body}>
+					<div className={styles.connectedAccountDetails}>
+						<div className={styles.connectedAccountDetailsTitle}>
+							Connected Account details
+						</div>
+						<div className={styles.accountId}>
+							Account Name:{' '}
+							<span className={styles.accountIdValue}>
+								{account?.providerAccountId}
+							</span>
+						</div>
+					</div>
+
+					{gcpConfig?.deployment_project_id && (
+						<div className={styles.regionSelector}>
+							<div className={styles.regionSelectorTitle}>Deployment project ID</div>
+							<div className={styles.regionSelectorDescription}>
+								{gcpConfig.deployment_project_id}
+							</div>
+						</div>
+					)}
+
+					{gcpConfig?.deployment_region && (
+						<div className={styles.regionSelector}>
+							<div className={styles.regionSelectorTitle}>Deployment region</div>
+							<div className={styles.regionSelectorDescription}>
+								{gcpConfig.deployment_region}
+							</div>
+						</div>
+					)}
+
+					<div className={styles.regionSelector}>
+						<div className={styles.regionSelectorTitle}>Projects to monitor</div>
+						<div className={styles.regionSelectorDescription}>
+							Update the GCP project IDs that should be monitored.
+						</div>
+
+						<Form.Item
+							name="projectIds"
+							rules={[
+								{
+									required: true,
+									type: 'array',
+									min: 1,
+									message: 'Please add at least one project ID',
+								},
+							]}
+						>
+							<Select
+								mode="tags"
+								value={projectIds}
+								tokenSeparators={[',']}
+								onChange={(values): void => {
+									setProjectIds(values);
+									form.setFieldValue('projectIds', values);
+								}}
+								data-testid="gcp-edit-project-ids-select"
+							/>
+						</Form.Item>
+					</div>
+				</div>
+			</Form>
+		</DrawerWrapper>
+	);
+}
+
+export default AccountSettingsDrawer;

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/__tests__/AccountSettingsDrawer.test.tsx

@@ -0,0 +1,230 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { toast } from '@signozhq/ui/sonner';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { server } from 'mocks-server/server';
+import { rest, RestRequest } from 'msw';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+
+import AccountSettingsDrawer from '../EditAccount/AccountSettingsDrawer';
+import {
+	GCP_ACCOUNT_ID,
+	GCP_ACCOUNT_URL,
+	GCP_ACCOUNTS_URL,
+	gcpAccount,
+	gcpAccountConfig,
+	listAccountsResponse,
+} from './mockData';
+
+// `useAccountSettingsDrawer` imports logEvent by relative path, which the
+// jest.config moduleNameMapper (keyed on the `api/common/logEvent` alias) does
+// not intercept — so mock the resolved module directly.
+jest.mock('../../../../../api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: jest.fn(),
+		error: jest.fn(),
+	},
+}));
+
+const onClose = jest.fn();
+const setActiveAccount = jest.fn();
+
+const renderDrawer = (): void => {
+	render(
+		<MockQueryClientProvider>
+			<TooltipProvider>
+				<AccountSettingsDrawer
+					onClose={onClose}
+					account={gcpAccount}
+					setActiveAccount={setActiveAccount}
+				/>
+			</TooltipProvider>
+		</MockQueryClientProvider>,
+	);
+};
+
+/** The antd tags Select renders its text input inside the testId wrapper. */
+const getProjectIdsInput = (): HTMLElement =>
+	within(screen.getByTestId('gcp-edit-project-ids-select')).getByRole(
+		'combobox',
+	);
+
+/** Each selected tag carries an antd "close" icon that removes it. */
+const getProjectIdTagRemoveButtons = (): HTMLElement[] =>
+	within(screen.getByTestId('gcp-edit-project-ids-select')).queryAllByLabelText(
+		'close',
+	);
+
+describe('GCP AccountSettingsDrawer', () => {
+	let updatePayload: Record<string, unknown> | null;
+
+	beforeEach(() => {
+		updatePayload = null;
+
+		server.use(
+			rest.get(GCP_ACCOUNTS_URL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listAccountsResponse)),
+			),
+			rest.put(GCP_ACCOUNT_URL, async (req: RestRequest, res, ctx) => {
+				updatePayload = await req.json();
+				return res(ctx.status(204));
+			}),
+		);
+	});
+
+	it('renders the connected account details and existing project IDs', () => {
+		renderDrawer();
+
+		expect(screen.getByText(gcpAccount.providerAccountId)).toBeInTheDocument();
+		expect(
+			screen.getByText(gcpAccountConfig.deployment_project_id),
+		).toBeInTheDocument();
+		expect(
+			screen.getByText(gcpAccountConfig.deployment_region),
+		).toBeInTheDocument();
+
+		gcpAccountConfig.project_ids.forEach((projectId) => {
+			expect(screen.getByTitle(projectId)).toBeInTheDocument();
+		});
+	});
+
+	it('keeps save disabled until the project IDs actually change', async () => {
+		const user = userEvent.setup();
+		renderDrawer();
+
+		expect(screen.getByTestId('gcp-update-account-btn')).toBeDisabled();
+
+		await user.type(getProjectIdsInput(), 'project-c,');
+
+		await waitFor(() => {
+			expect(screen.getByTestId('gcp-update-account-btn')).toBeEnabled();
+		});
+	});
+
+	it('sends the updated project IDs while preserving the immutable deployment fields', async () => {
+		const user = userEvent.setup();
+		renderDrawer();
+
+		await user.type(getProjectIdsInput(), 'project-c,');
+		await waitFor(() => {
+			expect(screen.getByTestId('gcp-update-account-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('gcp-update-account-btn'));
+
+		await waitFor(() => {
+			expect(updatePayload).not.toBeNull();
+		});
+
+		expect(updatePayload).toStrictEqual({
+			config: {
+				gcp: {
+					deploymentRegion: gcpAccountConfig.deployment_region,
+					deploymentProjectId: gcpAccountConfig.deployment_project_id,
+					projectIds: ['project-a', 'project-b', 'project-c'],
+				},
+			},
+		});
+
+		await waitFor(() => {
+			expect(setActiveAccount).toHaveBeenCalledWith({
+				...gcpAccount,
+				config: {
+					deployment_region: gcpAccountConfig.deployment_region,
+					deployment_project_id: gcpAccountConfig.deployment_project_id,
+					project_ids: ['project-a', 'project-b', 'project-c'],
+				},
+			});
+		});
+		expect(onClose).toHaveBeenCalledTimes(1);
+		expect(toast.success).toHaveBeenCalledWith(
+			'Account settings updated successfully',
+			expect.anything(),
+		);
+	});
+
+	it('blocks the update and shows a validation error when every project ID is removed', async () => {
+		const user = userEvent.setup();
+		renderDrawer();
+
+		// Strip every tag via its remove icon; the list shrinks as we go.
+		while (getProjectIdTagRemoveButtons().length > 0) {
+			// eslint-disable-next-line no-await-in-loop
+			await user.click(getProjectIdTagRemoveButtons()[0]);
+		}
+
+		await waitFor(() => {
+			expect(screen.getByTestId('gcp-update-account-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('gcp-update-account-btn'));
+
+		await waitFor(() => {
+			expect(
+				screen.getByText('Please add at least one project ID'),
+			).toBeInTheDocument();
+		});
+		expect(updatePayload).toBeNull();
+		expect(onClose).not.toHaveBeenCalled();
+	});
+
+	it('surfaces a toast and keeps the drawer open when the update fails', async () => {
+		server.use(
+			rest.put(GCP_ACCOUNT_URL, (_req, res, ctx) =>
+				res(
+					ctx.status(500),
+					ctx.json({ status: 'error', error: { message: 'update failed' } }),
+				),
+			),
+		);
+
+		const user = userEvent.setup();
+		renderDrawer();
+
+		await user.type(getProjectIdsInput(), 'project-c,');
+		await waitFor(() => {
+			expect(screen.getByTestId('gcp-update-account-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('gcp-update-account-btn'));
+
+		await waitFor(() => {
+			expect(toast.error).toHaveBeenCalledWith(
+				'Failed to update account settings',
+				expect.anything(),
+			);
+		});
+		expect(setActiveAccount).not.toHaveBeenCalled();
+		expect(onClose).not.toHaveBeenCalled();
+	});
+
+	it('disconnects the account with the GCP-specific confirmation copy', async () => {
+		let disconnectedId: string | null = null;
+		server.use(
+			rest.delete(`${GCP_ACCOUNTS_URL}/:id`, (req, res, ctx) => {
+				disconnectedId = req.params.id as string;
+				return res(ctx.status(204));
+			}),
+		);
+
+		const user = userEvent.setup();
+		renderDrawer();
+
+		await user.click(screen.getByRole('button', { name: /disconnect/i }));
+
+		await expect(
+			screen.findByText(/manually tear down/i),
+		).resolves.toBeInTheDocument();
+
+		await user.click(screen.getByRole('button', { name: /remove account/i }));
+
+		await waitFor(() => {
+			expect(disconnectedId).toBe(GCP_ACCOUNT_ID);
+		});
+		expect(setActiveAccount).toHaveBeenCalledWith(null);
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/__tests__/CloudAccountSetupDrawer.test.tsx

@@ -0,0 +1,210 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { server } from 'mocks-server/server';
+import { rest, RestRequest } from 'msw';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+
+import CloudAccountSetupDrawer from '../AddNewAccount/CloudAccountSetupDrawer';
+import {
+	checkInResponse,
+	CLOUD_INTEGRATION_ID,
+	connectionCredentials,
+	connectionCredentialsResponse,
+	createAccountResponse,
+	GCP_ACCOUNTS_URL,
+	GCP_CHECK_IN_URL,
+	GCP_CREDENTIALS_URL,
+} from './mockData';
+
+// `useCloudAccountSetupDrawer` imports logEvent by relative path, which the
+// jest.config moduleNameMapper (keyed on the `api/common/logEvent` alias) does
+// not intercept — so mock the resolved module directly.
+jest.mock('../../../../../api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const onClose = jest.fn();
+
+const renderDrawer = (): void => {
+	render(
+		<MockQueryClientProvider>
+			<TooltipProvider>
+				<CloudAccountSetupDrawer onClose={onClose} />
+			</TooltipProvider>
+		</MockQueryClientProvider>,
+	);
+};
+
+describe('GCP CloudAccountSetupDrawer', () => {
+	let createAccountPayload: Record<string, unknown> | null;
+	let checkInPayload: Record<string, unknown> | null;
+
+	beforeEach(() => {
+		createAccountPayload = null;
+		checkInPayload = null;
+
+		server.use(
+			rest.get(GCP_CREDENTIALS_URL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(connectionCredentialsResponse)),
+			),
+			// check_in is registered first — it is a more specific path than
+			// /accounts and msw matches handlers in registration order.
+			rest.post(GCP_CHECK_IN_URL, async (req: RestRequest, res, ctx) => {
+				checkInPayload = await req.json();
+				return res(ctx.status(200), ctx.json(checkInResponse));
+			}),
+			rest.post(GCP_ACCOUNTS_URL, async (req: RestRequest, res, ctx) => {
+				createAccountPayload = await req.json();
+				return res(ctx.status(201), ctx.json(createAccountResponse));
+			}),
+		);
+	});
+
+	it('renders SigNoz-provided credentials as read-only fields', async () => {
+		renderDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByTestId('gcp-signoz-api-url-input')).toHaveTextContent(
+				connectionCredentials.sigNozApiUrl,
+			);
+		});
+
+		expect(screen.getByTestId('gcp-signoz-api-key-input')).toHaveTextContent(
+			connectionCredentials.sigNozApiKey,
+		);
+		expect(screen.getByTestId('gcp-ingestion-url-input')).toHaveTextContent(
+			connectionCredentials.ingestionUrl,
+		);
+		expect(screen.getByTestId('gcp-ingestion-key-input')).toHaveTextContent(
+			connectionCredentials.ingestionKey,
+		);
+		expect(screen.getByText('Auto-filled by SigNoz')).toBeInTheDocument();
+	});
+
+	it('blocks submission and surfaces validation errors when the form is empty', async () => {
+		const user = userEvent.setup();
+		renderDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByTestId('gcp-connect-account-btn')).toBeEnabled();
+		});
+
+		await user.click(screen.getByTestId('gcp-connect-account-btn'));
+
+		await waitFor(() => {
+			expect(screen.getByText('Please enter an account name')).toBeInTheDocument();
+		});
+		expect(
+			screen.getByText('Please enter the deployment project ID'),
+		).toBeInTheDocument();
+		expect(screen.getByText('Please select a region')).toBeInTheDocument();
+		expect(
+			screen.getByText('Please add at least one project ID'),
+		).toBeInTheDocument();
+
+		expect(createAccountPayload).toBeNull();
+		expect(onClose).not.toHaveBeenCalled();
+	});
+
+	it('creates the account, checks the agent in, and closes the drawer', async () => {
+		const user = userEvent.setup();
+		renderDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByTestId('gcp-connect-account-btn')).toBeEnabled();
+		});
+
+		await user.type(
+			screen.getByTestId('gcp-account-name-input'),
+			'billing@company.com',
+		);
+		await user.type(
+			screen.getByTestId('gcp-deployment-project-id-input'),
+			'my-deployment-project-123',
+		);
+
+		await user.click(screen.getByTestId('gcp-deployment-region-select'));
+		await user.click(await screen.findByText('Mumbai (asia-south1)'));
+
+		const projectIdsInput = document.querySelector(
+			'#gcp-project-ids-select',
+		) as HTMLInputElement;
+		await user.type(projectIdsInput, 'project-a,project-b,');
+
+		await user.click(screen.getByTestId('gcp-connect-account-btn'));
+
+		await waitFor(() => {
+			expect(createAccountPayload).not.toBeNull();
+		});
+
+		expect(createAccountPayload).toStrictEqual({
+			config: {
+				gcp: {
+					deploymentRegion: 'asia-south1',
+					deploymentProjectId: 'my-deployment-project-123',
+					projectIds: ['project-a', 'project-b'],
+				},
+			},
+			// Backend-provided credentials win over anything in the form.
+			credentials: connectionCredentials,
+		});
+
+		await waitFor(() => {
+			expect(checkInPayload).toStrictEqual({
+				providerAccountId: 'billing@company.com',
+				cloudIntegrationId: CLOUD_INTEGRATION_ID,
+				data: {},
+			});
+		});
+
+		await waitFor(() => {
+			expect(onClose).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	it('shows the backend error inline when account creation fails', async () => {
+		server.use(
+			rest.post(GCP_ACCOUNTS_URL, (_req, res, ctx) =>
+				res(
+					ctx.status(400),
+					ctx.json({
+						status: 'error',
+						error: { message: 'deployment project id is not accessible' },
+					}),
+				),
+			),
+		);
+
+		const user = userEvent.setup();
+		renderDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByTestId('gcp-connect-account-btn')).toBeEnabled();
+		});
+
+		await user.type(screen.getByTestId('gcp-account-name-input'), 'my-org');
+		await user.type(
+			screen.getByTestId('gcp-deployment-project-id-input'),
+			'my-deployment-project-123',
+		);
+		await user.click(screen.getByTestId('gcp-deployment-region-select'));
+		await user.click(await screen.findByText('Mumbai (asia-south1)'));
+
+		const projectIdsInput = document.querySelector(
+			'#gcp-project-ids-select',
+		) as HTMLInputElement;
+		await user.type(projectIdsInput, 'project-a,');
+
+		await user.click(screen.getByTestId('gcp-connect-account-btn'));
+
+		await waitFor(() => {
+			expect(screen.getByTestId('gcp-connect-error')).toHaveTextContent(
+				'deployment project id is not accessible',
+			);
+		});
+		expect(checkInPayload).toBeNull();
+		expect(onClose).not.toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,65 @@
+import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	CloudAccount,
+	GCPCloudAccountConfig,
+} from 'container/Integrations/types';
+
+export const GCP_CREDENTIALS_URL =
+	'http://localhost/api/v1/cloud_integrations/gcp/credentials';
+export const GCP_ACCOUNTS_URL =
+	'http://localhost/api/v1/cloud_integrations/gcp/accounts';
+export const GCP_CHECK_IN_URL =
+	'http://localhost/api/v1/cloud_integrations/gcp/accounts/check_in';
+
+export const CLOUD_INTEGRATION_ID = 'ci-gcp-1234';
+
+export const GCP_ACCOUNT_ID = 'acc-gcp-1';
+export const GCP_ACCOUNT_URL = `${GCP_ACCOUNTS_URL}/${GCP_ACCOUNT_ID}`;
+
+export const gcpAccountConfig: GCPCloudAccountConfig = {
+	deployment_region: 'asia-south1',
+	deployment_project_id: 'my-deployment-project-123',
+	project_ids: ['project-a', 'project-b'],
+};
+
+export const gcpAccount: CloudAccount = {
+	id: GCP_ACCOUNT_ID,
+	cloud_account_id: 'gcp-cloud-1',
+	providerAccountId: 'billing@company.com',
+	config: gcpAccountConfig,
+	status: { integration: { last_heartbeat_ts_ms: 1_700_000_000_000 } },
+};
+
+export const listAccountsResponse = {
+	status: 'success',
+	data: { accounts: [] },
+};
+
+/**
+ * Credentials the backend hands out on SigNoz Cloud. When present the drawer
+ * renders them read-only and sends them back verbatim on submit.
+ */
+export const connectionCredentials: CloudintegrationtypesCredentialsDTO = {
+	sigNozApiUrl: 'https://tenant.signoz.cloud',
+	sigNozApiKey: 'signoz-api-key-abc',
+	ingestionUrl: 'https://ingest.us.signoz.cloud',
+	ingestionKey: 'ingestion-key-xyz',
+};
+
+export const connectionCredentialsResponse = {
+	status: 'success',
+	data: connectionCredentials,
+};
+
+export const createAccountResponse = {
+	status: 'success',
+	data: {
+		id: CLOUD_INTEGRATION_ID,
+		connectionArtifact: {},
+	},
+};
+
+export const checkInResponse = {
+	status: 'success',
+	data: {},
+};

frontend/src/container/Integrations/CloudIntegration/RemoveAccount/RemoveIntegrationAccount.tsx

@@ -60,6 +60,44 @@ function RemoveIntegrationAccount({
 		setIsModalOpen(false);
 	};
 
+	let modalDescription: JSX.Element;
+	if (cloudProvider === INTEGRATION_TYPES.AWS) {
+		modalDescription = (
+			<>
+				Removing this account will remove all components created for sending
+				telemetry to SigNoz in your AWS account within the next ~15 minutes
+				(cloudformation stacks named signoz-integration-telemetry-collection in
+				enabled regions). <br />
+				<br />
+				After that, you can delete the cloudformation stack that was created
+				manually when connecting this account.
+			</>
+		);
+	} else if (cloudProvider === INTEGRATION_TYPES.GCP) {
+		modalDescription = (
+			<>
+				Removing this account will stop SigNoz from monitoring it. <br />
+				<br />
+				Since you manage the GCP resources yourself, remember to manually tear down
+				the OTel collector and Pub/Sub resources you created for this integration if
+				you no longer need them.
+			</>
+		);
+	} else {
+		modalDescription = (
+			<>
+				Removing this account will remove all components created for sending
+				telemetry to SigNoz in your Azure subscription within the next ~15 minutes
+				(deployment stack named signoz-integration-telemetry will be deleted
+				automatically). <br />
+				<br />
+				After that, you have to manually delete &apos;signoz-integration&apos;
+				deployment stack that was created while connecting this account (Takes ~20
+				minutes to delete).
+			</>
+		);
+	}
+
 	return (
 		<div className="remove-integration-account-container">
 			<Button
@@ -84,28 +122,7 @@ function RemoveIntegrationAccount({
 					loading: isRemoveIntegrationLoading,
 				}}
 			>
-				{cloudProvider === INTEGRATION_TYPES.AWS ? (
-					<>
-						Removing this account will remove all components created for sending
-						telemetry to SigNoz in your AWS account within the next ~15 minutes
-						(cloudformation stacks named signoz-integration-telemetry-collection in
-						enabled regions). <br />
-						<br />
-						After that, you can delete the cloudformation stack that was created
-						manually when connecting this account.
-					</>
-				) : (
-					<>
-						Removing this account will remove all components created for sending
-						telemetry to SigNoz in your Azure subscription within the next ~15 minutes
-						(deployment stack named signoz-integration-telemetry will be deleted
-						automatically). <br />
-						<br />
-						After that, you have to manually delete &apos;signoz-integration&apos;
-						deployment stack that was created while connecting this account (Takes ~20
-						minutes to delete).
-					</>
-				)}
+				{modalDescription}
 			</Modal>
 		</div>
 	);

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

@@ -39,12 +39,9 @@ function ServicesList({
 	const {
 		data: providerServicesMetadata,
 		isLoading: isProviderServicesLoading,
-	} = useListServicesMetadata(
-		{ cloudProvider: type },
-		{
-			query: { enabled: !isAccountsLoading && !hasConnectedAccounts },
-		},
-	);
+	} = useListServicesMetadata({ cloudProvider: type }, undefined, {
+		query: { enabled: !isAccountsLoading && !hasConnectedAccounts },
+	});
 
 	const servicesMetadata = hasConnectedAccounts
 		? accountServicesMetadata

frontend/src/container/Integrations/CloudIntegration/mapCloudAccountFromDto.ts

@@ -47,3 +47,27 @@ export function mapAccountDtoToAzureCloudAccount(
 		providerAccountId: account.providerAccountId,
 	};
 }
+
+export function mapAccountDtoToGcpCloudAccount(
+	account: CloudintegrationtypesAccountDTO,
+): IntegrationCloudAccount | null {
+	if (!account.providerAccountId) {
+		return null;
+	}
+
+	return {
+		id: account.id,
+		cloud_account_id: account.id,
+		config: {
+			deployment_region: account.config?.gcp?.deploymentRegion ?? '',
+			deployment_project_id: account.config?.gcp?.deploymentProjectId ?? '',
+			project_ids: account.config?.gcp?.projectIds ?? [],
+		},
+		status: {
+			integration: {
+				last_heartbeat_ts_ms: account.agentReport?.timestampMillis ?? 0,
+			},
+		},
+		providerAccountId: account.providerAccountId,
+	};
+}

frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx

@@ -13,8 +13,8 @@ import { ArrowLeft, MoveUpRight, RotateCw } from '@signozhq/icons';
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 
 import CloudIntegration from '../CloudIntegration/CloudIntegration';
-import { INTEGRATION_TYPES } from '../constants';
 import { IntegrationType } from '../types';
+import { INTEGRATION_TYPES } from '../constants';
 import { handleContactSupport } from '../utils';
 import IntegrationDetailContent from './IntegrationDetailContent';
 import IntegrationDetailHeader from './IntegrationDetailHeader';
@@ -24,6 +24,12 @@ import { getConnectionStatesFromConnectionStatus } from './utils';
 
 import './IntegrationDetailPage.styles.scss';
 
+const cloudIntegrationTypeById: Record<string, IntegrationType> = {
+	[INTEGRATION_TYPES.AWS]: IntegrationType.AWS_SERVICES,
+	[INTEGRATION_TYPES.AZURE]: IntegrationType.AZURE_SERVICES,
+	[INTEGRATION_TYPES.GCP]: IntegrationType.GCP_SERVICES,
+};
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function IntegrationDetailPage(): JSX.Element {
 	const history = useHistory();
@@ -55,19 +61,8 @@ function IntegrationDetailPage(): JSX.Element {
 		),
 	);
 
-	if (
-		integrationId === INTEGRATION_TYPES.AWS ||
-		integrationId === INTEGRATION_TYPES.AZURE
-	) {
-		return (
-			<CloudIntegration
-				type={
-					integrationId === INTEGRATION_TYPES.AWS
-						? IntegrationType.AWS_SERVICES
-						: IntegrationType.AZURE_SERVICES
-				}
-			/>
-		);
+	if (integrationId && cloudIntegrationTypeById[integrationId]) {
+		return <CloudIntegration type={cloudIntegrationTypeById[integrationId]} />;
 	}
 
 	return (

frontend/src/container/Integrations/constants.ts

@@ -1,7 +1,8 @@
 import awsDarkLogo from '@/assets/Logos/aws-dark.svg';
 import azureOpenaiLogo from '@/assets/Logos/azure-openai.svg';
+import gcpLogo from '@/assets/Logos/gcp.svg';
 
-import { AzureRegion } from './types';
+import { AzureRegion, GCPRegion } from './types';
 
 export const INTEGRATION_TELEMETRY_EVENTS = {
 	INTEGRATIONS_LIST_VISITED: 'Integrations Page: Visited the list page',
@@ -21,6 +22,7 @@ export const INTEGRATION_TELEMETRY_EVENTS = {
 export const INTEGRATION_TYPES = {
 	AWS: 'aws',
 	AZURE: 'azure',
+	GCP: 'gcp',
 };
 
 export const AWS_INTEGRATION = {
@@ -53,7 +55,26 @@ export const AZURE_INTEGRATION = {
 	is_new: true,
 };
 
-export const ONE_CLICK_INTEGRATIONS = [AWS_INTEGRATION, AZURE_INTEGRATION];
+export const GCP_INTEGRATION = {
+	id: INTEGRATION_TYPES.GCP,
+	title: 'Google Cloud Platform',
+	description: 'Setup for GCP monitoring with SigNoz',
+	author: {
+		name: 'SigNoz',
+		email: 'integrations@signoz.io',
+		homepage: 'https://signoz.io',
+	},
+	icon: gcpLogo,
+	icon_alt: 'gcp-logo',
+	is_installed: false,
+	is_new: true,
+};
+
+export const ONE_CLICK_INTEGRATIONS = [
+	AWS_INTEGRATION,
+	AZURE_INTEGRATION,
+	GCP_INTEGRATION,
+];
 
 export const AZURE_REGIONS: AzureRegion[] = [
 	{
@@ -165,3 +186,66 @@ export const AZURE_REGIONS: AzureRegion[] = [
 	{ label: 'West US 2', value: 'westus2', geography: 'United States' },
 	{ label: 'West US 3', value: 'westus3', geography: 'United States' },
 ];
+
+// Source of truth: pkg/types/cloudintegrationtypes/regions.go (GCP regions).
+export const GCP_REGIONS: GCPRegion[] = [
+	{ label: 'Johannesburg', value: 'africa-south1', geography: 'Africa' },
+	{ label: 'Changhua County', value: 'asia-east1', geography: 'APAC' },
+	{ label: 'Hong Kong', value: 'asia-east2', geography: 'APAC' },
+	{ label: 'Tokyo', value: 'asia-northeast1', geography: 'APAC' },
+	{ label: 'Osaka', value: 'asia-northeast2', geography: 'APAC' },
+	{ label: 'Seoul', value: 'asia-northeast3', geography: 'APAC' },
+	{ label: 'Mumbai', value: 'asia-south1', geography: 'APAC' },
+	{ label: 'Delhi', value: 'asia-south2', geography: 'APAC' },
+	{ label: 'Singapore', value: 'asia-southeast1', geography: 'APAC' },
+	{ label: 'Jakarta', value: 'asia-southeast2', geography: 'APAC' },
+	{ label: 'Bangkok', value: 'asia-southeast3', geography: 'APAC' },
+	{ label: 'Sydney', value: 'australia-southeast1', geography: 'APAC' },
+	{ label: 'Melbourne', value: 'australia-southeast2', geography: 'APAC' },
+	{ label: 'Warsaw', value: 'europe-central2', geography: 'Europe' },
+	{ label: 'Hamina', value: 'europe-north1', geography: 'Europe' },
+	{ label: 'Stockholm', value: 'europe-north2', geography: 'Europe' },
+	{ label: 'Madrid', value: 'europe-southwest1', geography: 'Europe' },
+	{ label: 'St. Ghislain', value: 'europe-west1', geography: 'Europe' },
+	{ label: 'London', value: 'europe-west2', geography: 'Europe' },
+	{ label: 'Frankfurt', value: 'europe-west3', geography: 'Europe' },
+	{ label: 'Eemshaven', value: 'europe-west4', geography: 'Europe' },
+	{ label: 'Zurich', value: 'europe-west6', geography: 'Europe' },
+	{ label: 'Milan', value: 'europe-west8', geography: 'Europe' },
+	{ label: 'Paris', value: 'europe-west9', geography: 'Europe' },
+	{ label: 'Berlin', value: 'europe-west10', geography: 'Europe' },
+	{ label: 'Turin', value: 'europe-west12', geography: 'Europe' },
+	{ label: 'Doha', value: 'me-central1', geography: 'Middle East' },
+	{ label: 'Dammam', value: 'me-central2', geography: 'Middle East' },
+	{ label: 'Tel Aviv', value: 'me-west1', geography: 'Middle East' },
+	{
+		label: 'Montréal',
+		value: 'northamerica-northeast1',
+		geography: 'North America',
+	},
+	{
+		label: 'Toronto',
+		value: 'northamerica-northeast2',
+		geography: 'North America',
+	},
+	{
+		label: 'Querétaro',
+		value: 'northamerica-south1',
+		geography: 'North America',
+	},
+	{
+		label: 'São Paulo',
+		value: 'southamerica-east1',
+		geography: 'South America',
+	},
+	{ label: 'Santiago', value: 'southamerica-west1', geography: 'South America' },
+	{ label: 'Council Bluffs', value: 'us-central1', geography: 'North America' },
+	{ label: 'Moncks Corner', value: 'us-east1', geography: 'North America' },
+	{ label: 'Ashburn', value: 'us-east4', geography: 'North America' },
+	{ label: 'Columbus', value: 'us-east5', geography: 'North America' },
+	{ label: 'Dallas', value: 'us-south1', geography: 'North America' },
+	{ label: 'The Dalles', value: 'us-west1', geography: 'North America' },
+	{ label: 'Los Angeles', value: 'us-west2', geography: 'North America' },
+	{ label: 'Salt Lake City', value: 'us-west3', geography: 'North America' },
+	{ label: 'Las Vegas', value: 'us-west4', geography: 'North America' },
+];

frontend/src/container/Integrations/types.ts

@@ -6,6 +6,7 @@ import {
 export enum IntegrationType {
 	AWS_SERVICES = 'aws',
 	AZURE_SERVICES = 'azure',
+	GCP_SERVICES = 'gcp',
 }
 
 interface LogField {
@@ -87,7 +88,10 @@ export interface ServiceData {
 export interface CloudAccount {
 	id: string;
 	cloud_account_id: string;
-	config: AzureCloudAccountConfig | AWSCloudAccountConfig;
+	config:
+		| AzureCloudAccountConfig
+		| AWSCloudAccountConfig
+		| GCPCloudAccountConfig;
 	status: AccountStatus | IServiceStatus;
 	providerAccountId: string;
 }
@@ -97,6 +101,12 @@ export interface AzureCloudAccountConfig {
 	resource_groups: string[];
 }
 
+export interface GCPCloudAccountConfig {
+	deployment_region: string;
+	deployment_project_id: string;
+	project_ids: string[];
+}
+
 export interface AccountStatus {
 	integration: IntegrationStatus;
 }
@@ -111,6 +121,12 @@ export interface AzureRegion {
 	value: string;
 }
 
+export interface GCPRegion {
+	label: string;
+	geography: string;
+	value: string;
+}
+
 export interface UpdateServiceConfigPayload {
 	cloud_account_id: string;
 	config: AzureServicesConfig;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/__tests__/AttributeMappingsTab.test.tsx

@@ -15,18 +15,6 @@ jest.mock('@signozhq/ui/sonner', () => ({
 	},
 }));
 
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-import {
-	mockUseAuthZDenyAll,
-	mockUseAuthZGrantAll,
-} from 'lib/authz/utils/authz-test-utils';
-
-// Admin gating on the write controls flows through useAuthZ. Mock it directly
-// (synchronous) so the functional tests stay synchronous; the read-only block
-// below flips it to deny-all.
-jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
-const mockedUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
 import {
 	GROUPS_ENDPOINT,
 	makeGroupsResponse,
@@ -114,8 +102,6 @@ describe('AttributeMappingsTab (integration)', () => {
 	beforeEach(() => {
 		// Reset URL state between tests — jsdom shares window.location across a file.
 		window.history.pushState(null, '', '/');
-		// Default to an admin; the read-only block overrides this.
-		mockedUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 	});
 
 	afterEach(() => {
@@ -521,55 +507,4 @@ describe('AttributeMappingsTab (integration)', () => {
 			).resolves.toBeInTheDocument();
 		});
 	});
-
-	// The write APIs (create/update/delete group & mapper) are Admin-only on the
-	// backend, so a non-admin gets a read-only view: the data renders, but every
-	// write control is hidden.
-	describe('read-only (non-admin)', () => {
-		beforeEach(() => {
-			mockedUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
-		});
-
-		it('hides the "Add a new group" button', async () => {
-			setupGroups();
-			render(<AttributeMappingsTabWithStore />);
-
-			await screen.findByTestId('group-name-group-1');
-			expect(screen.queryByTestId('add-group-row')).not.toBeInTheDocument();
-		});
-
-		it('hides the group enable toggle and actions menu', async () => {
-			setupGroups();
-			render(<AttributeMappingsTabWithStore />);
-
-			await screen.findByTestId('group-name-group-1');
-			expect(
-				screen.queryByTestId('group-enabled-group-1'),
-			).not.toBeInTheDocument();
-			expect(
-				screen.queryByTestId('group-actions-group-1'),
-			).not.toBeInTheDocument();
-		});
-
-		it('renders mappers read-only: no "Add mapping" button or row actions', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			setupGroups();
-			setupMappers([makeMapper({ id: 'mapper-1', name: 'gen_ai.request.model' })]);
-			render(<AttributeMappingsTabWithStore />);
-
-			await screen.findByTestId('group-name-group-1');
-			await expandGroup(user);
-
-			// The mapper still renders...
-			await screen.findByTestId('mapper-target-mapper-1');
-			// ...but every write control is gone.
-			expect(screen.queryByTestId('add-mapper-group-1')).not.toBeInTheDocument();
-			expect(
-				screen.queryByTestId('mapper-enabled-mapper-1'),
-			).not.toBeInTheDocument();
-			expect(
-				screen.queryByRole('button', { name: 'Mapping actions' }),
-			).not.toBeInTheDocument();
-		});
-	});
 });

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/GroupHeaderActions.tsx

@@ -1,7 +1,6 @@
 import { Switch } from '@signozhq/ui/switch';
 
 import { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
-import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import GroupActionsMenu from '../GroupActionsMenu/GroupActionsMenu';
 import styles from './GroupHeaderActions.module.scss';
 
@@ -17,11 +16,7 @@ function GroupHeaderActions({
 	onToggle,
 	onEdit,
 	onRemove,
-}: GroupHeaderActionsProps): JSX.Element | null {
-	const canManage = useCanManageAttributeMapping();
-	if (!canManage) {
-		return null;
-	}
+}: GroupHeaderActionsProps): JSX.Element {
 	return (
 		<div
 			className={styles.actions}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.tsx

@@ -11,7 +11,6 @@ import {
 	Mapper,
 } from 'container/LLMObservability/AttributeMapping/types';
 import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
-import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import { COLUMN_COUNT } from '../constants';
 import MapperRow from '../MapperRow/MapperRow';
 import MapperRowSkeleton from '../MapperRow/MapperRowSkeleton';
@@ -40,7 +39,6 @@ function GroupMappers({
 	onEditMapper,
 }: GroupMappersProps): JSX.Element {
 	const { hydrateGroupMappers, removeMapper, toggleMapper } = editor;
-	const canManage = useCanManageAttributeMapping();
 
 	const hasServerId = group.serverId !== null;
 	const { data, isLoading, isError } = useListSpanMappers(
@@ -146,20 +144,16 @@ function GroupMappers({
 		/>
 	));
 
-	// The add-mapping row trails every non-error state (including loading/empty),
-	// but only for users who can manage mappings — non-admins get a read-only view.
+	// The add-mapping row trails every non-error state (including loading/empty).
 	let rows: JSX.Element[];
 	if (isErrorMappers) {
 		rows = [errorRow];
 	} else if (isLoadingMappers && mapperCount === 0) {
-		rows = [...skeletonRows];
+		rows = [...skeletonRows, addMapperRow];
 	} else if (mapperCount === 0) {
-		rows = [emptyRow];
+		rows = [emptyRow, addMapperRow];
 	} else {
-		rows = [...mapperRows];
-	}
-	if (canManage && !isErrorMappers) {
-		rows.push(addMapperRow);
+		rows = [...mapperRows, addMapperRow];
 	}
 
 	return (

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.tsx

@@ -6,7 +6,6 @@ import cx from 'classnames';
 import { motion } from 'motion/react';
 
 import { DraftMapper } from 'container/LLMObservability/AttributeMapping/types';
-import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import MapperActionsMenu from '../MapperActionsMenu/MapperActionsMenu';
 import styles from './MapperRow.module.scss';
 
@@ -31,7 +30,6 @@ function MapperRow({
 	onRemove,
 	onToggle,
 }: MapperRowProps): JSX.Element {
-	const canManage = useCanManageAttributeMapping();
 	const sources = mapper.sources ?? [];
 	const visibleSources = sources.slice(0, MAX_VISIBLE_SOURCES);
 	const remainingSources = sources.length - visibleSources.length;
@@ -103,16 +101,14 @@ function MapperRow({
 				)}
 			</td>
 			<td className={cx(styles.cell, styles.actionsCell)}>
-				{canManage && (
-					<div className={styles.rowActions}>
-						<Switch
-							value={mapper.enabled}
-							onChange={(checked): void => onToggle(mapper.localId, checked)}
-							testId={`mapper-enabled-${mapper.localId}`}
-						/>
-						<MapperActionsMenu mapper={mapper} onEdit={onEdit} onRemove={onRemove} />
-					</div>
-				)}
+				<div className={styles.rowActions}>
+					<Switch
+						value={mapper.enabled}
+						onChange={(checked): void => onToggle(mapper.localId, checked)}
+						testId={`mapper-enabled-${mapper.localId}`}
+					/>
+					<MapperActionsMenu mapper={mapper} onEdit={onEdit} onRemove={onRemove} />
+				</div>
 			</td>
 		</motion.tr>
 	);

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.tsx

@@ -11,7 +11,6 @@ import {
 	DraftMapper,
 } from 'container/LLMObservability/AttributeMapping/types';
 import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
-import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import GroupHeader from './GroupHeader/GroupHeader';
 import GroupHeaderActions from './GroupHeaderActions/GroupHeaderActions';
 import GroupMappers from './GroupMappers/GroupMappers';
@@ -34,7 +33,6 @@ function MappingsTable({
 	const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
 	const [targetGroupId, setTargetGroupId] = useState<string | null>(null);
 	const drawer = useMapperFormDrawer();
-	const canManage = useCanManageAttributeMapping();
 
 	const { upsertMapper, removeMapper } = editor;
 
@@ -122,20 +120,18 @@ function MappingsTable({
 
 	return (
 		<div className={styles.tableWrapper}>
-			{canManage && (
-				<div className={styles.toolbar}>
-					<Button
-						variant="solid"
-						color="primary"
-						prefix={<Plus size={14} />}
-						onClick={onAddGroup}
-						testId="add-group-row"
-						disabled={editor.isLoading}
-					>
-						Add a new group
-					</Button>
-				</div>
-			)}
+			<div className={styles.toolbar}>
+				<Button
+					variant="link"
+					color="primary"
+					prefix={<Plus size={14} />}
+					onClick={onAddGroup}
+					testId="add-group-row"
+					disabled={editor.isLoading}
+				>
+					Add a new group
+				</Button>
+			</div>
 
 			{isEmpty ? (
 				<div className={styles.tableState} data-testid="mapper-groups-empty">

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -8,18 +8,12 @@ import AttributeMappingsTab from './AttributeMappingsTab/AttributeMappingsTab';
 import DiscardChangesDialog from './components/DiscardChangesDialog/DiscardChangesDialog';
 import GroupFormDrawer from './components/GroupFormDrawer/GroupFormDrawer';
 import styles from './LLMObservabilityAttributeMapping.module.scss';
-import TestTab from './TestTab/TestTab';
 import { useAttributeMappingEditor } from './hooks/useAttributeMappingEditor';
 import { useGroupFormDrawer } from './components/GroupFormDrawer/hooks/useGroupFormDrawer';
-import { useTestSpanMapper } from './TestTab/useTestSpanMapper';
-
-const MAPPINGS_TAB_KEY = 'attribute-mappings';
-const TEST_TAB_KEY = 'test';
 
 function LLMObservabilityAttributeMapping(): JSX.Element {
 	const editor = useAttributeMappingEditor();
 	const groupDrawer = useGroupFormDrawer();
-	const spanTest = useTestSpanMapper(editor.snapshot, editor.groups);
 
 	const { discard } = editor;
 	// Discarding wipes the whole working copy, so gate it behind a confirm
@@ -37,7 +31,7 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 
 	const tabItems = [
 		{
-			key: MAPPINGS_TAB_KEY,
+			key: 'attribute-mappings',
 			label: 'Attribute Mappings',
 			children: (
 				<AttributeMappingsTab
@@ -48,9 +42,11 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 			),
 		},
 		{
-			key: TEST_TAB_KEY,
+			key: 'test',
 			label: 'Test',
-			children: <TestTab spanTest={spanTest} />,
+			disabled: true,
+			disabledReason: 'Coming soon',
+			children: null,
 		},
 	];
 
@@ -75,7 +71,7 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 
 			<Tabs
 				testId="attribute-mapping-tabs"
-				defaultValue={MAPPINGS_TAB_KEY}
+				defaultValue="attribute-mappings"
 				items={tabItems}
 			/>
 			{groupDrawer.isOpen && (

frontend/src/container/LLMObservability/AttributeMapping/TestTab/JsonEditorSkeleton.module.scss

@@ -1,54 +0,0 @@
-.skeleton {
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	background: var(--l1-background);
-}
-
-.line {
-	display: flex;
-	align-items: center;
-	height: 18px;
-}
-
-.lineNumber {
-	flex: 0 0 40px;
-	padding-right: var(--padding-3);
-	text-align: right;
-	font-family: 'Geist Mono', monospace;
-	font-size: var(--font-size-xs);
-	color: var(--l3-foreground);
-	opacity: 0.6;
-	user-select: none;
-}
-
-.lineContent {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	min-width: 0;
-}
-
-.bar {
-	height: 8px;
-	border-radius: var(--radius-1);
-	background: var(--l2-border);
-	animation: jsonSkeletonPulse 1.4s ease-in-out infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.bar {
-		animation: none;
-	}
-}
-
-@keyframes jsonSkeletonPulse {
-	0%,
-	100% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0.45;
-	}
-}

frontend/src/container/LLMObservability/AttributeMapping/TestTab/JsonEditorSkeleton.tsx

@@ -1,56 +0,0 @@
-import styles from './JsonEditorSkeleton.module.scss';
-
-interface SkeletonLine {
-	indent: number;
-	barWidths: number[];
-}
-
-const SKELETON_LINES: SkeletonLine[] = [
-	{ indent: 0, barWidths: [10] },
-	{ indent: 1, barWidths: [90, 10] },
-	{ indent: 2, barWidths: [155, 190] },
-	{ indent: 2, barWidths: [135, 190] },
-	{ indent: 2, barWidths: [150, 50] },
-	{ indent: 2, barWidths: [180, 35] },
-	{ indent: 2, barWidths: [185, 200] },
-	{ indent: 1, barWidths: [14] },
-	{ indent: 1, barWidths: [75, 10] },
-	{ indent: 2, barWidths: [95, 90] },
-	{ indent: 2, barWidths: [170, 85] },
-	{ indent: 1, barWidths: [10] },
-	{ indent: 0, barWidths: [10] },
-];
-
-const INDENT_WIDTH_PX = 14;
-
-function JsonEditorSkeleton(): JSX.Element {
-	return (
-		<div
-			className={styles.skeleton}
-			data-testid="json-editor-skeleton"
-			aria-hidden="true"
-		>
-			{SKELETON_LINES.map((line, lineIndex) => (
-				// eslint-disable-next-line react/no-array-index-key
-				<div key={lineIndex} className={styles.line}>
-					<span className={styles.lineNumber}>{lineIndex + 1}</span>
-					<span
-						className={styles.lineContent}
-						style={{ paddingLeft: line.indent * INDENT_WIDTH_PX }}
-					>
-						{line.barWidths.map((width, barIndex) => (
-							<span
-								// eslint-disable-next-line react/no-array-index-key
-								key={barIndex}
-								className={styles.bar}
-								style={{ width }}
-							/>
-						))}
-					</span>
-				</div>
-			))}
-		</div>
-	);
-}
-
-export default JsonEditorSkeleton;