test(query-builder): deflake recent-searches click test

userEvent.click awaits between pointer events, leaving gaps where the
completion can close before the tooltip's mousedown handler runs (it
destructures a null `open`), and its selection handling needs Range
APIs the CodeMirror DOM mocks don't provide. Apply the recent via a
synchronous fireEvent.mouseDown located and dispatched in a single
waitFor pass, and fold the repeated label assertions into a helper
that re-opens the popup on each retry.

Assisted-by: Claude Fable 5

.github/workflows/integrationci.yaml

@@ -61,6 +61,7 @@ jobs:
           - querierauthz
           - role
           - rootuser
+          - savedview
           - serviceaccount
           - spanmapper
           - querier_json_body

docs/contributing/go/handler.md

@@ -349,7 +349,7 @@ func (Step) JSONSchema() (jsonschema.Schema, error) {
 
 ### `oneOf` with a discriminator
 
-For a sum type whose variants are keyed by a property (e.g. `kind`), expose the variants via `JSONSchemaOneOf()` and add a discriminator. Without it, code generators intersect the variants (`A & B & C`) instead of producing a clean discriminated union (`A | B | C`).
+For a sum type whose variants are keyed by a property (e.g. `kind`), expose the variants via `JSONSchemaOneOf()` and add a discriminator. Without it, code generators intersect the variants (`A & B & C`) instead of producing a clean discriminated union (`A | B | C`). How to model the sum type itself is covered in [types.md](types.md#sum-types-the-kindspec-envelope) — this section is only about its schema.
 
 The parent keeps its `JSONSchemaOneOf()` (the `oneOf` itself) and *additionally* tags it via `PrepareJSONSchema` with the `x-signoz-discriminator` extension; `signoz.attachDiscriminators` then promotes that marker to a real OpenAPI 3 `discriminator` (and strips the duplicate parent properties) after reflection.
 

docs/contributing/go/types.md

@@ -99,6 +99,69 @@ Each flavor exists for a concrete reason:
 
 The core `AuthDomain` holds the two live halves — `storableAuthDomain` and `authDomainConfig` — and owns business methods such as `Update(config)`. Conversions use the `New<Output>From<Input>` form: `NewAuthDomainFromConfig`, `NewAuthDomainFromStorableAuthDomain`, `NewGettableAuthDomainFromAuthDomain`.
 
+## Sum types: the kind/spec envelope
+
+When a domain type is a *sum type* — exactly one of several variants, selected by a discriminator — model it as an envelope with a `kind` and a `spec`:
+
+```go
+type FooConfig struct {
+    Kind FooKind `json:"kind" required:"true"`
+    Spec any     `json:"spec" required:"true"`
+}
+```
+
+```json
+{ "kind": "bar", "spec": { "url": "...", "timeout": "30s" } }
+```
+
+`Kind` is a `valuer.String` enum implementing `Enum()`; `Spec` holds exactly one concrete variant type (`BarSpec`, `BazSpec`, …). `RuleThresholdData` and `EvaluationEnvelope` in `pkg/types/ruletypes/` are the canonical in-tree examples; the dashboard panel/query/variable plugins in `pkg/types/dashboardtypes/` are the same pattern behind generics. (`QueryEnvelope` in querybuildertypes uses `type` as the discriminator key for historical reasons; new envelopes use `kind`.)
+
+### The envelope goes at the point of variance, not the resource root
+
+Put the envelope on the field that actually varies. The resource root is almost never a sum type — a `Foo` has a `name` and an `enabled` flag regardless of which kind it is configured with; only its configuration varies, so the envelope is the `config` field:
+
+```json
+{ "name": "my-foo", "enabled": true, "config": { "kind": "bar", "spec": { "...": "..." } } }
+```
+
+Hoisting `kind`/`spec` to the root would turn the whole resource into a `oneOf`: every flavor (`PostableFoo`, `UpdatableFoo`, `GettableFoo`) then needs one variant schema per kind, each repeating the common fields; every new common field has to be added to all of them; and generated clients get unions of large objects instead of one small union that narrows on `config.kind`. A root-level `kind` also collides with the resource-model meaning of the word — root `kind` conventionally answers "what resource is this" (`Dashboard`), never "which flavor of config does it hold".
+
+The existing domains already follow this placement:
+
+- **Rules** — plain root; envelopes on the varying fields: `thresholds: {kind, spec}` and `evaluation: {kind, spec}`.
+- **Dashboards** — metadata at the root plus one typed `spec`; the unions sit deep inside, at each panel/query/variable plugin (`{kind, spec}` in `perses_plugin_wrappers.go`).
+- **Saved views** — root `{schemaVersion, spec}`, where `spec` is a *versioning* envelope holding one fixed type, not a union; the unions are inside it (`spec.queries: [{type, spec}]`). Same word, different job — a versioned body is not a discriminated union.
+
+### Why this tagging style
+
+Of the union encodings in common use, the envelope is the *adjacently tagged* one — tag and payload side by side. Variant payloads stay collision-free, and each kind maps to a named wrapper schema that carries the discriminator, which is exactly what OpenAPI generators need. The alternatives lose on those points: *internally tagged* (`{"kind": "bar", ...fields flattened}`) mixes common and variant fields, admits cross-variant key collisions, and forces every variant schema to redeclare the discriminator; *sibling optional fields* (`{"kind": "bar", "barConfig": {}, "bazConfig": {}}`) is the anti-pattern the first rule below exists to prevent.
+
+The rules that make the envelope work:
+
+- **Never model variants as sibling fields.** A struct with `Bar *BarSpec`, `Baz *BazSpec` next to a discriminator cannot be expressed as an OpenAPI discriminated union, forces nilability checks on every consumer, and silently admits contradictory payloads (kind=bar with a baz spec). The chosen variant *is* the payload.
+- **The envelope owns `UnmarshalJSON`.** Decode `kind` first, then switch on it to decode and validate the matching concrete type into `Spec`. Unknown kinds and missing specs are rejected at the boundary:
+
+    ```go
+    func (typ *FooConfig) UnmarshalJSON(data []byte) error {
+        var raw map[string]json.RawMessage
+        // ... unmarshal raw, decode raw["kind"] ...
+        switch kind {
+        case FooKindBar:
+            spec := BarSpec{}
+            if err := json.Unmarshal(raw["spec"], &spec); err != nil {
+                return err
+            }
+            typ.Spec = spec
+        // ... one case per kind, default rejects ...
+        }
+        typ.Kind = kind
+        return nil
+    }
+    ```
+- **Consumers type-assert on `Spec`** (`config.Spec.(BarSpec)`) after switching on `Kind`. If assertion sites multiply, add typed accessors on the envelope (see `EvaluationEnvelope.GetEvaluation()`).
+- **OpenAPI needs one unexported variant struct per kind** (`fooConfigBar{Kind; Spec BarSpec}`), exposed via `JSONSchemaOneOf()` and mapped via `PrepareJSONSchema` with the `x-signoz-discriminator` extension. The schema mechanics are covered in [handler.md](handler.md#oneof-with-a-discriminator).
+- **A legacy persisted shape gets a data migration or a `StorableX`.** When rows were written before the envelope existed, prefer an idempotent `sqlmigration` that rewrites them into the new shape, so the storable type simply nests the envelope. Only when the old shape must keep being written (external writers, rollback windows) keep it in a storable twin and convert at the type boundary.
+
 ## Conventions that tie the flavors together
 
 - **Conversions** use either a `New<Output>From<Input>` constructor — e.g. `NewChannelFromReceiver`, `NewGettableAuthDomainFromAuthDomain` — or a receiver-style `ToY()` method. Both forms coexist in the codebase; use whichever fits the call site.
@@ -139,6 +202,8 @@ Both are optional. Do not introduce them if `PostableX` already covers the case.
 
 - Every domain package defines the core type `X`. Only `X` is mandatory.
 - Add `PostableX` / `GettableX` / `UpdatableX` / `StorableX` one at a time, only when the shape actually diverges from `X`.
+- Model sum types as a `{kind, spec}` envelope with a validating `UnmarshalJSON` — never as sibling variant fields next to a discriminator.
+- The envelope goes on the field that varies, never at the resource root — common fields stay on the resource, outside the union.
 - Domain logic lives on `X`, not on the flavor types.
 - Conversions can be a `New<Output>From<Input>` constructor or a receiver-style `ToY()` method — pick whichever reads best at the call site.
 - Use a type alias when two shapes are truly identical.

ee/query-service/app/api/featureFlags.go

@@ -98,14 +98,6 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
-	if constants.IsDotMetricsEnabled {
-		for idx, feature := range featureSet {
-			if feature.Name == licensetypes.DotMetricsEnabled {
-				featureSet[idx].Active = true
-			}
-		}
-	}
-
 	ah.Respond(w, featureSet)
 }
 

ee/query-service/app/server.go

@@ -183,7 +183,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterLogsRoutes(r, am)
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
-	apiHandler.RegisterInfraMetricsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
 	apiHandler.RegisterWebSocketPaths(r, am)
 	apiHandler.RegisterMessagingQueuesRoutes(r, am)

ee/query-service/constants/constants.go

@@ -17,15 +17,3 @@ func GetOrDefaultEnv(key string, fallback string) string {
 	}
 	return v
 }
-
-// constant functions that override env vars
-
-const DotMetricsEnabled = "DOT_METRICS_ENABLED"
-
-var IsDotMetricsEnabled = false
-
-func init() {
-	if GetOrDefaultEnv(DotMetricsEnabled, "true") == "true" {
-		IsDotMetricsEnabled = true
-	}
-}

frontend/.oxlintrc.json

@@ -487,8 +487,11 @@
     // Simplifies boolean returns
     "sonarjs/prefer-while": "error",
     // Suggests while loops over for loops
-    "sonarjs/elseif-without-else": "off"
+    "sonarjs/elseif-without-else": "off",
     // Requires final else in if-else-if chains (was disabled)
+    "signoz/no-conditional-text-nodes-with-siblings": "warn",
+    // Vendored from eslint-plugin-react-google-translate
+    "signoz/no-return-text-nodes": "warn"
   },
   "ignorePatterns": [
     "src/parser/*.ts",

frontend/package.json

@@ -16,6 +16,7 @@
     "lint:generated": "oxlint ./src/api/generated --fix",
     "lint:fix": "oxlint ./src --fix",
     "lint:styles": "stylelint \"src/**/*.scss\"",
+    "test:plugins": "node --test \"plugins/__tests__/*.test.mjs\"",
     "jest": "jest",
     "jest:coverage": "jest --coverage",
     "jest:watch": "jest --watch",
@@ -125,6 +126,7 @@
     "rrule": "2.8.1",
     "styled-components": "^5.3.11",
     "timestamp-nano": "^1.0.0",
+    "translation-resilience": "^0.2.0",
     "typescript": "5.9.3",
     "uplot": "1.6.31",
     "uuid": "14.0.1",

frontend/plugins/__tests__/README.md

@@ -0,0 +1,130 @@
+# Plugin rule tests
+
+Tests for the custom oxlint rules in `plugins/rules/`.
+
+```bash
+pnpm test:plugins
+```
+
+Runs on `node --test` rather than jest. The jest config is built for application
+code — jsdom, ts-jest ESM transforms, a large `transformIgnorePatterns` wall —
+and none of it applies to a suite whose only job is to shell out to the linter.
+
+## Why it drives the real binary
+
+Each case is written to a temp file and linted by the actual `oxlint` binary,
+with every builtin category switched off so the only diagnostics that can appear
+belong to the rule under test. Assertions therefore describe what CI enforces.
+
+The alternative — walking the AST in-process — would need a stand-in for
+oxlint's JS plugin AST. That AST is ESTree-shaped but not ESTree, and it carries
+no type information, so a stand-in would drift from the runtime it claims to
+model and the tests would certify behaviour that never happens.
+
+All cases in a suite share one `oxlint` invocation and are mapped back by
+filename. Per-case spawning costs roughly 80ms each; batching keeps both suites
+together at around 250ms.
+
+## Adding a suite
+
+```js
+import { ruleTester } from './rule-tester.mjs';
+
+await ruleTester({
+	rule: 'no-navigator-clipboard',
+	valid: ['const x = 1;'],
+	invalid: [
+		{
+			code: 'navigator.clipboard.writeText("x");',
+			errors: [{ message: 'useCopyToClipboard', line: 1, column: 1 }],
+		},
+	],
+});
+```
+
+`ruleTester` must be awaited at the top level — it loads the plugin and runs
+`oxlint` before declaring the tests.
+
+- `rule` — the key the plugin exports it under. `plugin` defaults to
+  `plugins/signoz.mjs`; pass a path relative to `frontend/` for another plugin.
+- Cases are `.tsx` unless a `filename` gives another extension.
+- `errors` takes a count or an array. Each entry may assert `message` (substring
+  or `RegExp`), `line` and `column`; omitted fields are not checked.
+- `name` labels the case in the output and defaults to its first line of code.
+- `output` asserts the source after suggestions are applied — see below.
+- `todo` marks a case as a known defect — see below.
+
+## Suggestions
+
+Both Google Translate rules attach their wrap as a *suggestion*, not a fix, so
+`--fix` leaves the code alone and `--fix-suggestions` applies it. The wrap is
+`<span className="translate-safe">`, and `.translate-safe` is `display: contents`
+in `src/styles.scss`: React owns an element that absorbs Translate's `<font>`
+swap, while the box tree stays as it was, so a flex or grid parent still sees one
+contiguous text run rather than a new item with its own `gap`.
+
+It stays a suggestion because the element is still a DOM child even with no box:
+`> *`, `:nth-child` and sibling selectors still count it, and a component that
+inspects its children — `React.Children.map`, antd `Tooltip`, `Space` — sees an
+element where a string used to be. That is what oxlint means by "May change
+program behavior" in `--fix-suggestions --help`.
+
+An invalid case carrying `output` is linted twice: once for diagnostics, and
+once with `--fix-suggestions` over an untouched copy of the same files. The
+second run costs one extra `oxlint` spawn per suite and only happens when at
+least one case asks for it.
+
+```js
+{
+	code: "export const A = () => <div>{f ? 'a' : 'b'}<b/></div>;",
+	errors: 2,
+	output:
+		'export const A = () => <div>{f ? <span className="translate-safe">a</span> : <span className="translate-safe">b</span>}<b/></div>;',
+}
+```
+
+Suggestions do not reformat, so a real run is `oxlint --fix-suggestions` then
+`oxfmt`.
+
+## Known defects
+
+A case carrying `todo` asserts what the rule *should* do. It still runs, but a
+failure is reported as a todo rather than failing the suite, so a bug can be
+pinned as an executable spec instead of prose. Fixing the rule turns the todo
+green; deleting the flag then makes it a regression guard.
+
+Cases are prefixed `FP:` where the rule reports something it should not, `GAP:`
+where it misses something it should catch, and `TYPE-AWARE:` where the miss is
+only fixable once the linter can resolve types. Everything without a flag is a
+characterisation test recording current behaviour.
+
+The current todos:
+
+**Gaps — constructs the rules never visit.** `isProblematicConditional` requires
+a `JSXElement` parent, so a conditional inside a fragment is never inspected even
+though the failure does not care about the parent's kind. `no-return-text-nodes`
+listens only for `FunctionDeclaration` and reads the name off `node.id`, so
+arrow-function components and anonymous default exports are invisible — this
+codebase writes components as arrow functions, which is why that rule reports
+nothing across `src`.
+
+Class components are left out deliberately rather than pinned as a gap: there
+are none in `src`.
+
+**Type-aware gaps.** Upstream resolves branch types through
+`@typescript-eslint/utils` and reports anything typed `string` or `number`.
+oxlint's JS plugin runtime exposes no type information — `sourceCode.parserServices`
+is always `{}` — so those code paths were removed rather than left dormant. The
+`TYPE-AWARE:` todos record what they used to catch, and become the acceptance
+criteria if oxlint ever hands types to JS plugins.
+
+## Not a defect
+
+Without types, `no-conditional-text-nodes-with-siblings` falls back to a callee
+allowlist (`t`, `formatMessage`, `toString`, `toLocaleString`). Cases around
+that allowlist pin its edges; widening it is the supported way to catch more
+call expressions.
+
+Both branches of a ternary are reported separately, so one fix can clear two
+diagnostics. That inflates the count but every reported node is genuinely a text
+node, so the cases assert both.

frontend/plugins/__tests__/no-conditional-text-nodes-with-siblings.test.mjs

@@ -0,0 +1,302 @@
+import { ruleTester } from './rule-tester.mjs';
+
+const CONDITIONAL = 'Conditionally rendered text nodes with siblings';
+const PRECEDED = 'Text nodes which are preceded by a conditional expression';
+
+await ruleTester({
+	rule: 'no-conditional-text-nodes-with-siblings',
+	valid: [
+		{
+			name: 'conditional text node without siblings',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? 'yes' : 'no'}\n\t</div>\n);",
+		},
+		{
+			name: 'boolean branches are not text',
+			code:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? true : false}\n\t\t<span>x</span>\n\t</div>\n);',
+		},
+		{
+			name: 'null branches are not text',
+			code:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? null : null}\n\t\t<span>x</span>\n\t</div>\n);',
+		},
+		{
+			name: 'element branches are already wrapped',
+			code:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? <b>y</b> : <i>n</i>}\n\t\t<span>x</span>\n\t</div>\n);',
+		},
+		{
+			name: 'text node before the conditional is safe',
+			code:
+				'export const A = () => (\n\t<div>\n\t\tleading text\n\t\t{flag && <b>y</b>}\n\t</div>\n);',
+		},
+		{
+			name: 'member expression on the condition side is not rendered',
+			code:
+				'export const A = () => (\n\t<div>\n\t\t{obj.name && <b>y</b>}\n\t\t<span>x</span>\n\t</div>\n);',
+		},
+		{
+			name: 'binary comparison on the condition side is not rendered',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{obj.name === 'x' && <b>y</b>}\n\t\t<span>x</span>\n\t</div>\n);",
+		},
+		// An empty string renders no text node at all, so there is nothing for
+		// Google Translate to wrap and nothing for React to lose. Reporting it used
+		// to be the rule's most common false positive.
+		{
+			name: 'element branch with an empty-string fallback',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? <b>Free Trial</b> : ''}\n\t\t<span>s</span>\n\t</div>\n);",
+		},
+		{
+			name: 'both branches empty',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? '' : ''}\n\t\t<span>s</span>\n\t</div>\n);",
+		},
+		{
+			name: 'logical and with an empty-string right-hand side',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag && ''}\n\t\t<span>s</span>\n\t</div>\n);",
+		},
+
+		// A template literal is checked the same way as the quoted form, so `{' '}`
+		// and ``{` `}`` agree.
+		{
+			name: 'empty template literal branch',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? `` : ''}\n\t\t<span>s</span>\n\t</div>\n);",
+		},
+		{
+			name: 'whitespace-only template literal branch is skipped',
+			code:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? ` ` : <b>x</b>}\n\t\t<span>s</span>\n\t</div>\n);',
+		},
+	],
+	invalid: [
+		{
+			name: 'string literal branches with an element sibling',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? 'yes' : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 19 },
+			],
+			output:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? <span className="translate-safe">yes</span> : <span className="translate-safe">no</span>}\n\t\t<span>x</span>\n\t</div>\n);',
+		},
+		{
+			name: 'logical and with a string right-hand side',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag && 'yes'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [{ message: CONDITIONAL, line: 3, column: 12 }],
+		},
+		{
+			name: 'numeric literals render as text',
+			code:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? 1 : 2}\n\t\t<span>x</span>\n\t</div>\n);',
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 15 },
+			],
+			output:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? <span className="translate-safe">{1}</span> : <span className="translate-safe">{2}</span>}\n\t\t<span>x</span>\n\t</div>\n);',
+		},
+		{
+			name: 'template literal branch',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? `yes ${n}` : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 24 },
+			],
+			output:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? <span className="translate-safe">{`yes ${n}`}</span> : <span className="translate-safe">no</span>}\n\t\t<span>x</span>\n\t</div>\n);',
+		},
+		{
+			name: 'member expression branch',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? obj.name : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 22 },
+			],
+			output:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? <span className="translate-safe">{obj.name}</span> : <span className="translate-safe">no</span>}\n\t\t<span>x</span>\n\t</div>\n);',
+		},
+		{
+			name: 'a string needing escapes stays inside braces',
+			code:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? "it\'s" : <b>x</b>}\n\t\t<span>s</span>\n\t</div>\n);',
+			errors: [{ message: CONDITIONAL, line: 3, column: 11 }],
+			output:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? <span className="translate-safe">{"it\'s"}</span> : <b>x</b>}\n\t\t<span>s</span>\n\t</div>\n);',
+		},
+		{
+			name: 'optional chaining branch',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? obj?.deep?.name : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 29 },
+			],
+		},
+		{
+			name: 'nested ternary reports every text branch',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{a ? (b ? 'x' : 'y') : 'z'}\n\t\t<span>s</span>\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 13 },
+				{ message: CONDITIONAL, line: 3, column: 19 },
+				{ message: CONDITIONAL, line: 3, column: 26 },
+			],
+		},
+		{
+			name: 'static text following a conditional',
+			code:
+				'export const A = () => (\n\t<div>\n\t\t{flag && <b>y</b>}\n\t\ttrailing text\n\t</div>\n);',
+			errors: [{ message: PRECEDED, line: 3, column: 21 }],
+			// Only the visible run is wrapped; the surrounding newlines and tabs are
+			// formatting and must stay outside the element.
+			output:
+				'export const A = () => (\n\t<div>\n\t\t{flag && <b>y</b>}\n\t\t<span className="translate-safe">trailing text</span>\n\t</div>\n);',
+		},
+		{
+			name: 'conditional text plus trailing static text reports both kinds',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? 'a' : 'b'}\n\t\tliteral tail\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 17 },
+				{ message: PRECEDED, line: 3, column: 21 },
+			],
+		},
+
+		// The callee allowlist below is the untyped fallback. Without type
+		// information the rule can only recognise known string-returning helpers,
+		// so `t()` and `formatMessage()` are reported while an arbitrary call is
+		// not. These cases pin that boundary.
+		{
+			name: 't() branch is reported via the callee allowlist',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? t('key') : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 22 },
+			],
+		},
+		{
+			name: 'formatMessage() branch is reported via the callee allowlist',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? formatMessage({id:'k'}) : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 37 },
+			],
+		},
+		{
+			name: 'arbitrary call is not recognised, only the literal branch reports',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? getString() : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [{ message: CONDITIONAL, line: 3, column: 25 }],
+		},
+		{
+			name: 'bare identifier is not recognised, only the literal branch reports',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? name : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [{ message: CONDITIONAL, line: 3, column: 18 }],
+		},
+		{
+			name: 'toString() branch is reported',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? val.toString() : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 28 },
+			],
+		},
+		{
+			name: 'toLocaleString() branch is reported',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? val.toLocaleString() : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 34 },
+			],
+		},
+		{
+			name: 't() in its own container following a conditional',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag && <b>y</b>}\n\t\t{t('key')}\n\t</div>\n);",
+			errors: [{ message: PRECEDED, line: 4, column: 4 }],
+		},
+		{
+			name: 'toString() in its own container following a conditional',
+			code:
+				'export const A = () => (\n\t<div>\n\t\t{flag && <b>y</b>}\n\t\t{val.toString()}\n\t</div>\n);',
+			errors: [{ message: PRECEDED, line: 4, column: 4 }],
+			// The whole container is replaced, so the result is not `{<span>{…}</span>}`.
+			output:
+				'export const A = () => (\n\t<div>\n\t\t{flag && <b>y</b>}\n\t\t<span className="translate-safe">{val.toString()}</span>\n\t</div>\n);',
+		},
+		{
+			name: 'whitespace-only string branch is skipped, the other branch reports',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? ' ' : 'x'}\n\t\t<span>s</span>\n\t</div>\n);",
+			errors: [{ message: CONDITIONAL, line: 3, column: 17 }],
+		},
+		{
+			name: 'template literal holding an expression is not blank',
+			code:
+				'export const A = () => (\n\t<div>\n\t\t{flag ? `${n}` : <b>x</b>}\n\t\t<span>s</span>\n\t</div>\n);',
+			errors: [{ message: CONDITIONAL, line: 3, column: 11 }],
+		},
+
+		// Upstream resolves branch types through `@typescript-eslint/utils` and
+		// reports anything typed `string` or `number`. oxlint's JS plugin runtime
+		// exposes no type information, so those paths were dropped and only the
+		// callee allowlist remains. Kept as todos: if oxlint ever hands types to JS
+		// plugins these become the acceptance criteria.
+		{
+			todo: 'needs type information to know the call returns a string',
+			name: 'TYPE-AWARE: call returning a string',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? getString() : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 25 },
+			],
+		},
+		{
+			todo: 'needs type information to know the identifier is a string',
+			name: 'TYPE-AWARE: identifier holding a string',
+			code:
+				"export const A = () => (\n\t<div>\n\t\t{flag ? name : 'no'}\n\t\t<span>x</span>\n\t</div>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 18 },
+			],
+		},
+		{
+			todo: 'needs type information to know the identifier is a string',
+			name: 'TYPE-AWARE: string identifier following a conditional',
+			code:
+				'export const A = () => (\n\t<div>\n\t\t{flag && <b>y</b>}\n\t\t{label}\n\t</div>\n);',
+			errors: [{ message: PRECEDED, line: 4, column: 4 }],
+		},
+
+		// `isChildOfJSXElement` matches only `JSXElement`, so a fragment parent is
+		// never inspected. The Google Translate failure does not care whether the
+		// parent is an element or a fragment.
+		{
+			todo: 'fragment parents are never inspected',
+			name: 'GAP: conditional text with a sibling inside a fragment',
+			code:
+				"export const A = () => (\n\t<>\n\t\t{flag ? 'yes' : 'no'}\n\t\t<span>x</span>\n\t</>\n);",
+			errors: [
+				{ message: CONDITIONAL, line: 3, column: 11 },
+				{ message: CONDITIONAL, line: 3, column: 19 },
+			],
+		},
+	],
+});

frontend/plugins/__tests__/no-return-text-nodes.test.mjs

@@ -0,0 +1,162 @@
+import { ruleTester } from './rule-tester.mjs';
+
+const RETURNS_TEXT = 'React components should avoid returning text nodes';
+
+await ruleTester({
+	rule: 'no-return-text-nodes',
+	valid: [
+		{
+			name: 'lowercase function is not a component',
+			code: "export function foo() {\n\treturn 'text';\n}",
+		},
+		{
+			name: 'returning JSX',
+			code: 'export function Foo() {\n\treturn <div>hi</div>;\n}',
+		},
+		{
+			name: 'returning null',
+			code: 'export function Foo() {\n\treturn null;\n}',
+		},
+		{
+			name: 'returning boolean',
+			code: 'export function Foo() {\n\treturn true;\n}',
+		},
+		{ name: 'bare return', code: 'export function Foo() {\n\treturn;\n}' },
+		{
+			name: 'returning a variable is not a literal',
+			code: "export function Foo() {\n\tconst s = 'x';\n\treturn s;\n}",
+		},
+		{
+			name: 'lowercase nested function inside a component',
+			code:
+				"export function Foo() {\n\tfunction helper() {\n\t\treturn 'x';\n\t}\n\treturn <div/>;\n}",
+		},
+
+		{
+			// The repo has no class components, so this is out of scope rather than
+			// a gap worth closing.
+			name: 'class method',
+			code: "export class Foo {\n\trender() {\n\t\treturn 'text';\n\t}\n}",
+		},
+	],
+	invalid: [
+		{
+			name: 'string literal',
+			code: "export function Foo() {\n\treturn 'text';\n}",
+			errors: [{ message: RETURNS_TEXT, line: 2, column: 2 }],
+			output:
+				'export function Foo() {\n\treturn <span className="translate-safe">{\'text\'}</span>;\n}',
+		},
+		{
+			// JSX does not parse in a `.ts` file, so no suggestion is offered there.
+			name: 'string literal in a non-JSX file',
+			filename: 'case.ts',
+			code: "export function Foo() {\n\treturn 'text';\n}",
+			errors: [{ message: RETURNS_TEXT, line: 2, column: 2 }],
+			output: "export function Foo() {\n\treturn 'text';\n}",
+		},
+		{
+			name: 'numeric literal',
+			code: 'export function Foo() {\n\treturn 42;\n}',
+			errors: [{ message: RETURNS_TEXT, line: 2, column: 2 }],
+		},
+		{
+			name: 'template literal',
+			code: 'export function Foo() {\n\treturn `text ${x}`;\n}',
+			errors: [{ message: RETURNS_TEXT, line: 2, column: 2 }],
+		},
+		{
+			name: 'inside an if consequent',
+			code:
+				"export function Foo() {\n\tif (a) {\n\t\treturn 'x';\n\t}\n\treturn <div/>;\n}",
+			errors: [{ message: RETURNS_TEXT, line: 3, column: 3 }],
+		},
+		{
+			name: 'inside an else block',
+			code:
+				"export function Foo() {\n\tif (a) {\n\t\treturn <div/>;\n\t} else {\n\t\treturn 'x';\n\t}\n}",
+			errors: [{ message: RETURNS_TEXT, line: 5, column: 3 }],
+		},
+		{
+			name: 'inside an else-if chain',
+			code:
+				"export function Foo() {\n\tif (a) {\n\t\treturn <div/>;\n\t} else if (b) {\n\t\treturn 'x';\n\t}\n\treturn null;\n}",
+			errors: [{ message: RETURNS_TEXT, line: 5, column: 3 }],
+		},
+		{
+			name: 'inside a switch case',
+			code:
+				"export function Foo() {\n\tswitch (a) {\n\t\tcase 1:\n\t\t\treturn 'x';\n\t\tdefault:\n\t\t\treturn <div/>;\n\t}\n}",
+			errors: [{ message: RETURNS_TEXT, line: 4, column: 4 }],
+		},
+		{
+			name: 'inside try, catch and finally',
+			code:
+				"export function Foo() {\n\ttry {\n\t\treturn 'a';\n\t} catch {\n\t\treturn 'b';\n\t} finally {\n\t\treturn 'c';\n\t}\n}",
+			errors: [
+				{ message: RETURNS_TEXT, line: 3, column: 3 },
+				{ message: RETURNS_TEXT, line: 5, column: 3 },
+				{ message: RETURNS_TEXT, line: 7, column: 3 },
+			],
+		},
+		{
+			name: 'inside a for loop',
+			code:
+				"export function Foo() {\n\tfor (let i = 0; i < 3; i++) {\n\t\treturn 'x';\n\t}\n\treturn <div/>;\n}",
+			errors: [{ message: RETURNS_TEXT, line: 3, column: 3 }],
+		},
+		{
+			name: 'inside a for-of loop',
+			code:
+				"export function Foo() {\n\tfor (const i of list) {\n\t\treturn 'x';\n\t}\n\treturn <div/>;\n}",
+			errors: [{ message: RETURNS_TEXT, line: 3, column: 3 }],
+		},
+		{
+			name: 'inside a for-in loop',
+			code:
+				"export function Foo() {\n\tfor (const k in obj) {\n\t\treturn 'x';\n\t}\n\treturn <div/>;\n}",
+			errors: [{ message: RETURNS_TEXT, line: 3, column: 3 }],
+		},
+		{
+			name: 'inside a while loop',
+			code:
+				"export function Foo() {\n\twhile (a) {\n\t\treturn 'x';\n\t}\n\treturn <div/>;\n}",
+			errors: [{ message: RETURNS_TEXT, line: 3, column: 3 }],
+		},
+		{
+			name: 'inside a do-while loop',
+			code: "export function Foo() {\n\tdo {\n\t\treturn 'x';\n\t} while (a);\n}",
+			errors: [{ message: RETURNS_TEXT, line: 3, column: 3 }],
+		},
+		{
+			name: 'capitalised nested function is treated as a component',
+			code:
+				"export function Foo() {\n\tfunction Helper() {\n\t\treturn 'x';\n\t}\n\treturn <div/>;\n}",
+			errors: [{ message: RETURNS_TEXT, line: 3, column: 3 }],
+		},
+
+		// The rule listens only for `FunctionDeclaration` and reads the component
+		// name off `node.id`. Everything below returns a text node from something
+		// React renders as a component, and none of it is reported. This codebase
+		// writes components as arrow functions, which is why the rule currently
+		// finds nothing in `src`.
+		{
+			todo: 'arrow function components are never visited',
+			name: 'GAP: arrow component with an expression body',
+			code: "export const Foo = () => 'text';",
+			errors: 1,
+		},
+		{
+			todo: 'arrow function components are never visited',
+			name: 'GAP: arrow component with a block body',
+			code: "export const Foo = () => {\n\treturn 'text';\n};",
+			errors: [{ message: RETURNS_TEXT, line: 2, column: 2 }],
+		},
+		{
+			todo: 'anonymous declarations have no node.id to read a name from',
+			name: 'GAP: anonymous default-exported component',
+			code: "export default function () {\n\treturn 'text';\n}",
+			errors: [{ message: RETURNS_TEXT, line: 2, column: 2 }],
+		},
+	],
+});

frontend/plugins/__tests__/rule-tester.mjs

@@ -0,0 +1,257 @@
+/**
+ * Test harness for oxlint JS plugins.
+ *
+ * Rules are exercised through the real `oxlint` binary rather than a hand-rolled
+ * AST walker, so what the tests assert is exactly what CI enforces. oxlint's JS
+ * plugin AST is close to ESTree but not identical, and it exposes no type
+ * information, so any in-process fake would drift from the real runtime.
+ *
+ * All cases in a suite are written to one temp directory and linted in a single
+ * oxlint invocation, then mapped back by filename. Spawning per case costs ~80ms
+ * each; batching keeps a full suite under a second.
+ */
+
+import assert from 'node:assert/strict';
+import { execFileSync } from 'node:child_process';
+import {
+	mkdirSync,
+	mkdtempSync,
+	readFileSync,
+	rmSync,
+	writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import test from 'node:test';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const FRONTEND_DIR = path.resolve(fileURLToPath(import.meta.url), '../../..');
+const OXLINT_BIN = path.join(FRONTEND_DIR, 'node_modules/.bin/oxlint');
+
+// oxlint enables its default categories unless every one is switched off, and a
+// stray builtin diagnostic would be indistinguishable from the rule under test.
+const CATEGORIES_OFF = {
+	correctness: 'off',
+	suspicious: 'off',
+	pedantic: 'off',
+	perf: 'off',
+	style: 'off',
+	restriction: 'off',
+	nursery: 'off',
+};
+
+function normaliseCase(entry, index) {
+	const testCase = typeof entry === 'string' ? { code: entry } : entry;
+	const extension = testCase.filename
+		? path.extname(testCase.filename).slice(1)
+		: 'tsx';
+	return {
+		...testCase,
+		index,
+		basename: `case-${String(index).padStart(3, '0')}.${extension}`,
+	};
+}
+
+function diagnosticFilename(diagnostic) {
+	const raw = diagnostic.filename ?? '';
+	const asPath = raw.startsWith('file://') ? fileURLToPath(raw) : raw;
+	return path.basename(asPath);
+}
+
+function toError(diagnostic) {
+	const span = diagnostic.labels?.[0]?.span;
+	return {
+		message: diagnostic.message,
+		line: span?.line,
+		column: span?.column,
+	};
+}
+
+function runOxlint(dir, configPath, extraArgs = []) {
+	const args = ['--config', configPath, '--format', 'json', ...extraArgs, '.'];
+	try {
+		return execFileSync(OXLINT_BIN, args, {
+			cwd: dir,
+			encoding: 'utf8',
+			// A rule that reports on every case can produce a lot of output.
+			maxBuffer: 64 * 1024 * 1024,
+		});
+	} catch (error) {
+		// oxlint exits non-zero whenever it reports a diagnostic, which is the
+		// expected outcome for every `invalid` case.
+		if (typeof error.stdout === 'string' && error.stdout.trim() !== '') {
+			return error.stdout;
+		}
+		throw new Error(`oxlint failed to run:\n${error.stderr || error.message}`, {
+			cause: error,
+		});
+	}
+}
+
+function writeSuite(dir, cases, { pluginPath, ruleId }) {
+	for (const testCase of cases) {
+		const target = path.join(dir, testCase.basename);
+		mkdirSync(path.dirname(target), { recursive: true });
+		writeFileSync(target, testCase.code);
+	}
+
+	const configPath = path.join(dir, '.oxlintrc.json');
+	writeFileSync(
+		configPath,
+		JSON.stringify({
+			jsPlugins: [pluginPath],
+			categories: CATEGORIES_OFF,
+			rules: { [ruleId]: 'error' },
+		}),
+	);
+	return configPath;
+}
+
+/**
+ * Lints every case in one pass, and applies suggestions in a second pass over an
+ * untouched copy when any case declares `output`.
+ *
+ * @returns {{errors: Map<string, object[]>, outputs: Map<string, string>}}
+ */
+function lintCases(cases, options) {
+	const root = mkdtempSync(path.join(tmpdir(), 'oxlint-rule-tester-'));
+	try {
+		const lintDir = path.join(root, 'lint');
+		mkdirSync(lintDir);
+		const report = JSON.parse(
+			runOxlint(lintDir, writeSuite(lintDir, cases, options)),
+		);
+
+		const errors = new Map(cases.map((testCase) => [testCase.basename, []]));
+		for (const diagnostic of report.diagnostics ?? []) {
+			const bucket = errors.get(diagnosticFilename(diagnostic));
+			// oxlint reports config-level problems without a filename; surfacing
+			// them as a suite failure beats silently testing nothing.
+			if (!bucket) {
+				throw new Error(`Unexpected diagnostic: ${diagnostic.message}`);
+			}
+			bucket.push(toError(diagnostic));
+		}
+
+		const outputs = new Map();
+		if (cases.some((testCase) => testCase.output !== undefined)) {
+			const fixDir = path.join(root, 'fix');
+			mkdirSync(fixDir);
+			runOxlint(fixDir, writeSuite(fixDir, cases, options), ['--fix-suggestions']);
+			for (const testCase of cases) {
+				outputs.set(
+					testCase.basename,
+					readFileSync(path.join(fixDir, testCase.basename), 'utf8'),
+				);
+			}
+		}
+
+		return { errors, outputs };
+	} finally {
+		rmSync(root, { recursive: true, force: true });
+	}
+}
+
+function assertMessage(actual, expected, label) {
+	if (expected instanceof RegExp) {
+		assert.match(actual, expected, label);
+	} else {
+		assert.ok(
+			actual.includes(expected),
+			`${label}\n  expected message to contain: ${expected}\n  actual: ${actual}`,
+		);
+	}
+}
+
+function assertErrors(actual, expected, code) {
+	const context = `\n--- code ---\n${code}\n--- reported ---\n${JSON.stringify(actual, null, 2)}`;
+
+	if (typeof expected === 'number') {
+		assert.equal(actual.length, expected, `error count${context}`);
+		return;
+	}
+
+	assert.equal(actual.length, expected.length, `error count${context}`);
+	expected.forEach((want, i) => {
+		const got = actual[i];
+		if (want.message !== undefined) {
+			assertMessage(got.message, want.message, `error[${i}] message${context}`);
+		}
+		if (want.line !== undefined) {
+			assert.equal(got.line, want.line, `error[${i}] line${context}`);
+		}
+		if (want.column !== undefined) {
+			assert.equal(got.column, want.column, `error[${i}] column${context}`);
+		}
+	});
+}
+
+/**
+ * Declares a suite for one rule.
+ *
+ * A case carrying `todo` asserts the behaviour the rule *should* have. It still
+ * runs, but a failure is reported as a todo instead of failing the suite, so a
+ * known bug can be pinned as an executable spec. Delete the flag once the rule
+ * is fixed and the case starts guarding the fix.
+ *
+ * An invalid case carrying `output` also asserts the source after
+ * `--fix-suggestions` has been applied.
+ *
+ * @param {object} options
+ * @param {string} options.rule - rule name as exported by the plugin
+ * @param {string} [options.plugin] - path to the plugin, relative to `frontend/`
+ * @param {Array<string | {code: string, name?: string, filename?: string, todo?: string}>} options.valid
+ * @param {Array<{code: string, name?: string, filename?: string, todo?: string, output?: string, errors: number | Array<{message?: string | RegExp, line?: number, column?: number}>}>} options.invalid
+ */
+export async function ruleTester({
+	rule,
+	plugin = 'plugins/signoz.mjs',
+	valid = [],
+	invalid = [],
+}) {
+	const pluginPath = path.join(FRONTEND_DIR, plugin);
+	const { default: pluginModule } = await import(pathToFileURL(pluginPath));
+
+	assert.ok(
+		pluginModule.rules?.[rule],
+		`plugin ${plugin} does not export a rule named "${rule}"`,
+	);
+
+	const ruleId = `${pluginModule.meta.name}/${rule}`;
+	const validCases = valid.map(normaliseCase);
+	const invalidCases = invalid.map((entry, i) =>
+		normaliseCase(entry, valid.length + i),
+	);
+	const { errors, outputs } = lintCases([...validCases, ...invalidCases], {
+		pluginPath,
+		ruleId,
+	});
+
+	const declare = (t, testCase, expected) => {
+		const label = testCase.name ?? testCase.code.trim().split('\n')[0];
+		return t.test(label, { todo: testCase.todo }, () => {
+			assertErrors(errors.get(testCase.basename), expected, testCase.code);
+			if (testCase.output !== undefined) {
+				assert.equal(
+					outputs.get(testCase.basename),
+					testCase.output,
+					`suggestion output\n--- code ---\n${testCase.code}`,
+				);
+			}
+		});
+	};
+
+	test(ruleId, async (t) => {
+		await t.test('valid', async (t) => {
+			for (const testCase of validCases) {
+				await declare(t, testCase, 0);
+			}
+		});
+
+		await t.test('invalid', async (t) => {
+			for (const testCase of invalidCases) {
+				await declare(t, testCase, testCase.errors);
+			}
+		});
+	});
+}

frontend/plugins/rules/no-conditional-text-nodes-with-siblings.mjs

@@ -0,0 +1,313 @@
+/**
+ * Rule: no-conditional-text-nodes-with-siblings
+ *
+ * Conditionally rendered text nodes with siblings should be wrapped in an
+ * element (for example a `<span>`), otherwise Google Translate causes a browser
+ * error. Translate replaces the text node with a `<font>` wrapper, React still
+ * holds a reference to the original node, and the next render throws on
+ * `removeChild`.
+ *
+ * Adapted from https://github.com/getcouped/eslint-plugin-react-google-translate
+ * (v1.0.4). The upstream rule resolves branch types through
+ * `@typescript-eslint/utils`; oxlint's JS plugin runtime exposes no type
+ * information, so those paths are dropped and call expressions are matched
+ * against the allowlist below instead.
+ */
+
+// Calls known to render as text. Without types this is the only way to
+// recognise a string-returning call; widen it to catch more helpers.
+const TEXT_RETURNING_CALLEES = new Set(['formatMessage', 't']);
+const STRINGIFY_METHODS = new Set(['toString', 'toLocaleString']);
+
+function calleeName(node) {
+	return node.type === 'Identifier' ? node.name : null;
+}
+
+function isTextReturningCall(node) {
+	const { callee } = node;
+
+	if (TEXT_RETURNING_CALLEES.has(calleeName(callee))) {
+		return node.arguments.length > 0;
+	}
+
+	if (callee.type === 'MemberExpression' && !callee.computed) {
+		return STRINGIFY_METHODS.has(calleeName(callee.property));
+	}
+
+	return STRINGIFY_METHODS.has(calleeName(callee));
+}
+
+/**
+ * True when the node renders no visible text. An empty or whitespace-only value
+ * produces no DOM text node, so Google Translate has nothing to wrap and React
+ * nothing to lose.
+ */
+function isBlankText(node) {
+	if (node.type === 'Literal' || node.type === 'JSXText') {
+		return typeof node.value === 'string' && node.value.trim() === '';
+	}
+	if (node.type === 'TemplateLiteral') {
+		return (
+			node.expressions.length === 0 &&
+			node.quasis.every((quasi) => (quasi.value.cooked ?? '').trim() === '')
+		);
+	}
+	return false;
+}
+
+function isConditionallyRendered(node) {
+	const parent = node.parent;
+	return (
+		parent?.type === 'ConditionalExpression' ||
+		parent?.type === 'LogicalExpression'
+	);
+}
+
+function isRenderedConditional(node) {
+	return (
+		node.type === 'JSXExpressionContainer' &&
+		(node.expression?.type === 'ConditionalExpression' ||
+			node.expression?.type === 'LogicalExpression')
+	);
+}
+
+/** Children that produce output, i.e. everything but formatting whitespace. */
+function renderedChildren(node) {
+	const children = node?.children;
+	if (!children) {
+		return null;
+	}
+	return children.filter((child) => !isBlankText(child));
+}
+
+/** True when `node` is a JSX child rendered alongside at least one other child. */
+function hasSiblings(node) {
+	if (!(node?.parent?.children?.length > 1)) {
+		return false;
+	}
+	return renderedChildren(node.parent).some((child) => child !== node);
+}
+
+function isPrecededByConditional(node) {
+	const children = renderedChildren(node?.parent);
+	if (!children) {
+		return false;
+	}
+	return children.some(
+		(child) => child.start < node.start && isRenderedConditional(child),
+	);
+}
+
+/** Walk out of nested conditionals so nested branches report against the outer container. */
+function getOutermostConditional(node) {
+	let current = node;
+	while (isConditionallyRendered(current)) {
+		current = current.parent;
+	}
+	return current;
+}
+
+/** True when `node` is a conditional branch rendered directly beside other JSX children. */
+function isProblematicConditional(node) {
+	if (!isConditionallyRendered(node)) {
+		return false;
+	}
+
+	const container = getOutermostConditional(node);
+	return (
+		container.parent?.type === 'JSXExpressionContainer' &&
+		container.parent.parent?.type === 'JSXElement' &&
+		hasSiblings(container.parent)
+	);
+}
+
+/** True when `node` renders after a sibling conditional, i.e. the DOM order Translate breaks. */
+function followsConditionalSibling(node) {
+	return (
+		node.parent?.parent?.type === 'JSXElement' &&
+		hasSiblings(node.parent) &&
+		isPrecededByConditional(node.parent)
+	);
+}
+
+/**
+ * `A && B` and the test of a ternary are conditions, not rendered output.
+ */
+function isCondition(node) {
+	let current = node;
+	while (current.parent?.type === 'LogicalExpression') {
+		if (current.parent.left === current) {
+			return true;
+		}
+		current = current.parent;
+	}
+	if (current.parent?.type === 'ConditionalExpression') {
+		return current.parent.test === current;
+	}
+	return false;
+}
+
+function isConditionOperand(node) {
+	if (node.parent?.type === 'BinaryExpression') {
+		return isCondition(node.parent);
+	}
+	return isCondition(node);
+}
+
+// A string may only be inlined as JSX text when it needs no escaping and no
+// whitespace of its own: JSX collapses leading and trailing whitespace, and
+// these characters would either close the element or start an entity.
+const NEEDS_BRACES = /['"{}<>&\r\n]/;
+
+// `display: contents`, declared in src/styles.scss. React owns the element so
+// Translate's `<font>` swap is absorbed, while the box tree stays as it was and
+// a flex or grid parent still sees one contiguous text run.
+const OPEN = '<span className="translate-safe">';
+const CLOSE = '</span>';
+
+/** Wraps the reported expression so React owns an element Translate cannot replace. */
+function wrapExpression(fixer, sourceCode, node) {
+	// A call reported on its own already sits in a container. Replacing the
+	// container yields `<span …>{expr}</span>` rather than `{<span …>{expr}</span>}`.
+	const target =
+		node.parent?.type === 'JSXExpressionContainer' ? node.parent : node;
+
+	if (
+		node.type === 'Literal' &&
+		typeof node.value === 'string' &&
+		!NEEDS_BRACES.test(node.value) &&
+		node.value.trim() === node.value
+	) {
+		return fixer.replaceText(target, `${OPEN}${node.value}${CLOSE}`);
+	}
+
+	return fixer.replaceText(
+		target,
+		`${OPEN}{${sourceCode.getText(node)}}${CLOSE}`,
+	);
+}
+
+/**
+ * Wraps static JSX text. Only the visible run is wrapped: the node also spans
+ * the formatting whitespace around it, which has to stay outside the element.
+ */
+function wrapJsxText(fixer, node) {
+	const raw = node.value;
+	const leading = raw.length - raw.trimStart().length;
+	const trailing = raw.length - raw.trimEnd().length;
+	return fixer.replaceTextRange(
+		[node.start + leading, node.end - trailing],
+		`${OPEN}${raw.trim()}${CLOSE}`,
+	);
+}
+
+export default {
+	meta: {
+		type: 'problem',
+		docs: {
+			description:
+				'Conditionally rendered text nodes should be wrapped in an element (for example a `<span>`), otherwise Google Translate can cause a browser error.',
+			url: 'https://github.com/getcouped/eslint-plugin-react-google-translate#eslint-plugin-react-google-translate',
+		},
+		schema: [],
+		// Wrapping adds a DOM element, which can turn into a flex/grid item or
+		// break `> *` and `:nth-child` selectors, so it is offered as a suggestion
+		// (`--fix-suggestions`) rather than applied by a bare `--fix`.
+		hasSuggestions: true,
+		messages: {
+			'conditional-text-node':
+				'Conditionally rendered text nodes with siblings, rendered as a direct child of a JSX element, must be wrapped so Google Translate cannot break React\'s DOM: `<span className="translate-safe">{value}</span>`. Translate replaces the bare text node with a `<font>` element and React then throws on `removeChild`. This also applies to values returned from functions, so `getString()` becomes `<span className="translate-safe">{getString()}</span>`.',
+			'text-node-preceded-by-conditional':
+				'Text nodes which are preceded by a conditional expression, rendered as a direct child of a JSX element, must be wrapped so Google Translate cannot break React\'s DOM: `<span className="translate-safe">text</span>`. Translate replaces the bare text node with a `<font>` element and React then throws on `removeChild`.',
+		},
+	},
+
+	createOnce(context) {
+		const suggestWrap = (build) => [{ desc: 'Wrap in a <span>', fix: build }];
+
+		const wrap = (fixer, node) => wrapExpression(fixer, context.sourceCode, node);
+
+		const reportConditional = (node) => {
+			context.report({
+				node,
+				messageId: 'conditional-text-node',
+				suggest: suggestWrap((fixer) => wrap(fixer, node)),
+			});
+		};
+
+		const reportPreceded = (node, build) => {
+			context.report({
+				node,
+				messageId: 'text-node-preceded-by-conditional',
+				suggest: suggestWrap(build),
+			});
+		};
+
+		return {
+			// String and numeric branches: `{flag ? 'yes' : 'no'}`
+			Literal(node) {
+				if (node.value === null || typeof node.value === 'boolean') {
+					return;
+				}
+				if (isBlankText(node)) {
+					return;
+				}
+				if (isProblematicConditional(node)) {
+					reportConditional(node);
+				}
+			},
+
+			TemplateLiteral(node) {
+				if (isBlankText(node)) {
+					return;
+				}
+				if (isProblematicConditional(node)) {
+					reportConditional(node);
+				}
+			},
+
+			// Static text rendered after a conditional: `{flag && <b/>}trailing`
+			JSXText(node) {
+				if (isBlankText(node)) {
+					return;
+				}
+				if (hasSiblings(node) && isPrecededByConditional(node)) {
+					reportPreceded(node, (fixer) => wrapJsxText(fixer, node));
+				}
+			},
+
+			CallExpression(node) {
+				if (isCondition(node) || !isTextReturningCall(node)) {
+					return;
+				}
+
+				if (isProblematicConditional(node)) {
+					reportConditional(node);
+				}
+				if (followsConditionalSibling(node)) {
+					reportPreceded(node, (fixer) => wrap(fixer, node));
+				}
+			},
+
+			// Values read off an object: `{flag ? user.name : 'anonymous'}`
+			MemberExpression(node) {
+				if (isConditionOperand(node)) {
+					return;
+				}
+				if (isProblematicConditional(node)) {
+					reportConditional(node);
+				}
+			},
+
+			// Optional chaining wraps the member expression: `{flag ? a?.b?.c : 'x'}`
+			ChainExpression(node) {
+				if (isConditionOperand(node)) {
+					return;
+				}
+				if (isProblematicConditional(node)) {
+					reportConditional(node);
+				}
+			},
+		};
+	},
+};

frontend/plugins/rules/no-return-text-nodes.mjs

@@ -0,0 +1,115 @@
+/**
+ * Rule: no-return-text-nodes
+ *
+ * React components should not return a bare text node. Google Translate keeps
+ * displaying the stale translated text after a state change and nothing throws,
+ * which makes the bug very hard to track down. Numbers count too: JSX renders
+ * them as text.
+ *
+ * Adapted from https://github.com/getcouped/eslint-plugin-react-google-translate
+ * (v1.0.4). Upstream walks the function body statement by statement; this
+ * version visits `ReturnStatement` directly and walks up to the enclosing
+ * function, which covers the same constructs without enumerating them.
+ */
+
+const FUNCTION_TYPES = new Set([
+	'FunctionDeclaration',
+	'FunctionExpression',
+	'ArrowFunctionExpression',
+]);
+
+function isTextNode(node) {
+	if (!node) {
+		return false;
+	}
+	if (node.type === 'TemplateLiteral') {
+		return true;
+	}
+	return (
+		node.type === 'Literal' &&
+		(typeof node.value === 'string' || typeof node.value === 'number')
+	);
+}
+
+function getEnclosingFunction(node) {
+	let current = node.parent;
+	while (current) {
+		if (FUNCTION_TYPES.has(current.type)) {
+			return current;
+		}
+		current = current.parent;
+	}
+	return null;
+}
+
+function isComponentName(name) {
+	return (
+		typeof name === 'string' && name !== '' && name[0] === name[0].toUpperCase()
+	);
+}
+
+// The suggestion introduces JSX, which only parses in a JSX-enabled file.
+function allowsJsx(filename) {
+	return filename.endsWith('.tsx') || filename.endsWith('.jsx');
+}
+
+export default {
+	meta: {
+		type: 'problem',
+		docs: {
+			description:
+				'React components should avoid returning text nodes directly (or numerical values which will be rendered as text). When a React component returns values other than JSX / null, Google Translate can continue to display stale values after state changes, without any error being thrown. Since this is very hard to debug it is better to avoid it altogether.',
+			url: 'https://github.com/getcouped/eslint-plugin-react-google-translate#eslint-plugin-react-google-translate',
+		},
+		schema: [],
+		// Wrapping changes what the component renders, so it is offered as a
+		// suggestion (`--fix-suggestions`) rather than applied by a bare `--fix`.
+		hasSuggestions: true,
+		messages: {
+			'return-value-is-text-node':
+				'React components should avoid returning text nodes directly (or numerical values which will be rendered as text). When a React component returns values other than JSX / null, Google Translate can continue to display stale values after state changes, without any error being thrown. Since this is very hard to debug it is better to avoid it altogether.',
+		},
+	},
+
+	createOnce(context) {
+		const buildSuggestion = (node) => {
+			if (!allowsJsx(context.filename)) {
+				return undefined;
+			}
+			return [
+				{
+					desc: 'Wrap in a <span>',
+					fix: (fixer) =>
+						fixer.replaceText(
+							node.argument,
+							`<span className="translate-safe">{${context.sourceCode.getText(node.argument)}}</span>`,
+						),
+				},
+			];
+		};
+
+		return {
+			ReturnStatement(node) {
+				if (!isTextNode(node.argument)) {
+					return;
+				}
+
+				// Only named function declarations are recognised as components, so a
+				// text return from a nested helper or a class method is left alone.
+				const fn = getEnclosingFunction(node);
+				if (fn?.type !== 'FunctionDeclaration') {
+					return;
+				}
+				if (!isComponentName(fn.id?.name)) {
+					return;
+				}
+
+				context.report({
+					node,
+					messageId: 'return-value-is-text-node',
+					suggest: buildSuggestion(node),
+				});
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -13,6 +13,8 @@ import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
 import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
 import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
+import noConditionalTextNodesWithSiblings from './rules/no-conditional-text-nodes-with-siblings.mjs';
+import noReturnTextNodes from './rules/no-return-text-nodes.mjs';
 
 export default {
 	meta: {
@@ -27,5 +29,7 @@ export default {
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
 		'no-css-module-bracket-access': noCssModuleBracketAccess,
 		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
+		'no-conditional-text-nodes-with-siblings': noConditionalTextNodesWithSiblings,
+		'no-return-text-nodes': noReturnTextNodes,
 	},
 };

frontend/pnpm-lock.yaml

@@ -294,6 +294,9 @@ importers:
       timestamp-nano:
         specifier: ^1.0.0
         version: 1.0.1
+      translation-resilience:
+        specifier: ^0.2.0
+        version: 0.2.0
       typescript:
         specifier: 5.9.3
         version: 5.9.3
@@ -8475,6 +8478,9 @@ packages:
     resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
     engines: {node: '>=12'}
 
+  translation-resilience@0.2.0:
+    resolution: {integrity: sha512-IxTjhpHGp1SJxVEEPBu/YbBaHnymMRJdYxUY1i5qtYADuz9b8fdWhZSE/EeRS2aVIiuQjRqtYDk69ruS/3fzTg==}
+
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
@@ -18232,6 +18238,8 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  translation-resilience@0.2.0: {}
+
   trim-lines@3.0.1: {}
 
   trough@2.1.0: {}

frontend/src/AppRoutes/index.tsx

@@ -376,7 +376,23 @@ function App(): JSX.Element {
 					tracesSampleRate: 0, // Ref: https://github.com/SigNoz/platform-pod/issues/2393#issuecomment-4603658055
 					replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
 					replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-					beforeSend(event) {
+					beforeSend(event, hint) {
+						const error = hint?.originalException as
+							| { name?: string; code?: string | number }
+							| undefined;
+
+						// Ignore benign aborted/cancelled requests (axios + fetch).
+						if (error?.code === 'ERR_CANCELED' || error?.code === 'ECONNABORTED') {
+							return null;
+						}
+						if (error?.name === 'AbortError') {
+							return null;
+						}
+						// Ignore benign Monaco cancellation errors (name 'Canceled').
+						if (error?.name === 'Canceled') {
+							return null;
+						}
+
 						// Drop the event if its level is 'warning' or 'info'
 						if (event.level === 'warning' || event.level === 'info') {
 							return null;

frontend/src/AppRoutes/routes.ts

@@ -527,6 +527,13 @@ const routes: AppRoutes[] = [
 		key: 'AI_OBSERVABILITY_OVERVIEW',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.AI_OBSERVABILITY_EXPLORER,
+		exact: true,
+		component: LLMObservabilityPage,
+		key: 'AI_OBSERVABILITY_EXPLORER',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_CONFIGURATION,
 		exact: true,

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

@@ -2818,6 +2818,7 @@ export enum CloudintegrationtypesServiceIDDTO {
 	computeengine = 'computeengine',
 	gke = 'gke',
 	cloudstorage = 'cloudstorage',
+	cloudsql_mysql = 'cloudsql_mysql',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -5648,6 +5649,47 @@ export interface InframonitoringtypesChecksDTO {
 	type: InframonitoringtypesCheckTypeDTO;
 }
 
+export enum InframonitoringtypesNodeConditionDTO {
+	ready = 'ready',
+	not_ready = 'not_ready',
+	no_data = 'no_data',
+}
+export enum InframonitoringtypesPodStatusDTO {
+	pending = 'pending',
+	running = 'running',
+	failed = 'failed',
+	unknown = 'unknown',
+	crashloopbackoff = 'crashloopbackoff',
+	imagepullbackoff = 'imagepullbackoff',
+	errimagepull = 'errimagepull',
+	createcontainerconfigerror = 'createcontainerconfigerror',
+	containercreating = 'containercreating',
+	oomkilled = 'oomkilled',
+	completed = 'completed',
+	error = 'error',
+	containercannotrun = 'containercannotrun',
+	evicted = 'evicted',
+	nodeaffinity = 'nodeaffinity',
+	nodelost = 'nodelost',
+	shutdown = 'shutdown',
+	unexpectedadmissionerror = 'unexpectedadmissionerror',
+	no_data = 'no_data',
+}
+export interface InframonitoringtypesClusterFilterDTO {
+	/**
+	 * @type string
+	 */
+	expression?: string;
+	/**
+	 * @type array,null
+	 */
+	filterByNodeReadiness?: InframonitoringtypesNodeConditionDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	filterByPodStatus?: InframonitoringtypesPodStatusDTO[] | null;
+}
+
 export type InframonitoringtypesClusterRecordDTOCounts = {
 	/**
 	 * @type integer
@@ -5923,21 +5965,6 @@ export interface InframonitoringtypesContainerCountsByStatusDTO {
 	waiting: number;
 }
 
-export enum InframonitoringtypesContainerReadyDTO {
-	ready = 'ready',
-	not_ready = 'not_ready',
-	no_data = 'no_data',
-}
-export type InframonitoringtypesContainerRecordDTOMetaAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type InframonitoringtypesContainerRecordDTOMeta =
-	InframonitoringtypesContainerRecordDTOMetaAnyOf | null;
-
 export enum InframonitoringtypesContainerStatusDTO {
 	running = 'running',
 	waiting = 'waiting',
@@ -5954,6 +5981,32 @@ export enum InframonitoringtypesContainerStatusDTO {
 	unknown = 'unknown',
 	no_data = 'no_data',
 }
+export interface InframonitoringtypesContainerFilterDTO {
+	/**
+	 * @type string
+	 */
+	expression?: string;
+	/**
+	 * @type array,null
+	 */
+	filterByContainerStatus?: InframonitoringtypesContainerStatusDTO[] | null;
+}
+
+export enum InframonitoringtypesContainerReadyDTO {
+	ready = 'ready',
+	not_ready = 'not_ready',
+	no_data = 'no_data',
+}
+export type InframonitoringtypesContainerRecordDTOMetaAnyOf = {
+	[key: string]: string;
+};
+
+/**
+ * @nullable
+ */
+export type InframonitoringtypesContainerRecordDTOMeta =
+	InframonitoringtypesContainerRecordDTOMetaAnyOf | null;
+
 export interface InframonitoringtypesContainerRecordDTO {
 	containerCountsByReady: InframonitoringtypesContainerCountsByReadyDTO;
 	containerCountsByStatus: InframonitoringtypesContainerCountsByStatusDTO;
@@ -6025,6 +6078,17 @@ export interface InframonitoringtypesContainersDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
+export interface InframonitoringtypesDaemonSetFilterDTO {
+	/**
+	 * @type string
+	 */
+	expression?: string;
+	/**
+	 * @type array,null
+	 */
+	filterByPodStatus?: InframonitoringtypesPodStatusDTO[] | null;
+}
+
 export type InframonitoringtypesDaemonSetRecordDTOMetaAnyOf = {
 	[key: string]: string;
 };
@@ -6110,6 +6174,17 @@ export interface InframonitoringtypesDaemonSetsDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
+export interface InframonitoringtypesDeploymentFilterDTO {
+	/**
+	 * @type string
+	 */
+	expression?: string;
+	/**
+	 * @type array,null
+	 */
+	filterByPodStatus?: InframonitoringtypesPodStatusDTO[] | null;
+}
+
 export type InframonitoringtypesDeploymentRecordDTOMetaAnyOf = {
 	[key: string]: string;
 };
@@ -6272,6 +6347,17 @@ export interface InframonitoringtypesHostsDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
+export interface InframonitoringtypesJobFilterDTO {
+	/**
+	 * @type string
+	 */
+	expression?: string;
+	/**
+	 * @type array,null
+	 */
+	filterByPodStatus?: InframonitoringtypesPodStatusDTO[] | null;
+}
+
 export type InframonitoringtypesJobRecordDTOMetaAnyOf = {
 	[key: string]: string;
 };
@@ -6357,6 +6443,17 @@ export interface InframonitoringtypesJobsDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
+export interface InframonitoringtypesNamespaceFilterDTO {
+	/**
+	 * @type string
+	 */
+	expression?: string;
+	/**
+	 * @type array,null
+	 */
+	filterByPodStatus?: InframonitoringtypesPodStatusDTO[] | null;
+}
+
 export type InframonitoringtypesNamespaceRecordDTOCounts = {
 	/**
 	 * @type integer
@@ -6433,11 +6530,21 @@ export interface InframonitoringtypesNamespacesDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
-export enum InframonitoringtypesNodeConditionDTO {
-	ready = 'ready',
-	not_ready = 'not_ready',
-	no_data = 'no_data',
+export interface InframonitoringtypesNodeFilterDTO {
+	/**
+	 * @type string
+	 */
+	expression?: string;
+	/**
+	 * @type array,null
+	 */
+	filterByNodeReadiness?: InframonitoringtypesNodeConditionDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	filterByPodStatus?: InframonitoringtypesPodStatusDTO[] | null;
 }
+
 export type InframonitoringtypesNodeRecordDTOMetaAnyOf = {
 	[key: string]: string;
 };
@@ -6499,6 +6606,17 @@ export interface InframonitoringtypesNodesDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
+export interface InframonitoringtypesPodFilterDTO {
+	/**
+	 * @type string
+	 */
+	expression?: string;
+	/**
+	 * @type array,null
+	 */
+	filterByPodStatus?: InframonitoringtypesPodStatusDTO[] | null;
+}
+
 export type InframonitoringtypesPodRecordDTOMetaAnyOf = {
 	[key: string]: string;
 };
@@ -6509,27 +6627,6 @@ export type InframonitoringtypesPodRecordDTOMetaAnyOf = {
 export type InframonitoringtypesPodRecordDTOMeta =
 	InframonitoringtypesPodRecordDTOMetaAnyOf | null;
 
-export enum InframonitoringtypesPodStatusDTO {
-	pending = 'pending',
-	running = 'running',
-	failed = 'failed',
-	unknown = 'unknown',
-	crashloopbackoff = 'crashloopbackoff',
-	imagepullbackoff = 'imagepullbackoff',
-	errimagepull = 'errimagepull',
-	createcontainerconfigerror = 'createcontainerconfigerror',
-	containercreating = 'containercreating',
-	oomkilled = 'oomkilled',
-	completed = 'completed',
-	error = 'error',
-	containercannotrun = 'containercannotrun',
-	evicted = 'evicted',
-	nodeaffinity = 'nodeaffinity',
-	nodelost = 'nodelost',
-	shutdown = 'shutdown',
-	unexpectedadmissionerror = 'unexpectedadmissionerror',
-	no_data = 'no_data',
-}
 export interface InframonitoringtypesPodRecordDTO {
 	/**
 	 * @type object,null
@@ -6606,7 +6703,7 @@ export interface InframonitoringtypesPostableClustersDTO {
 	 * @format int64
 	 */
 	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
+	filter?: InframonitoringtypesClusterFilterDTO;
 	/**
 	 * @type array,null
 	 */
@@ -6633,7 +6730,7 @@ export interface InframonitoringtypesPostableContainersDTO {
 	 * @format int64
 	 */
 	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
+	filter?: InframonitoringtypesContainerFilterDTO;
 	/**
 	 * @type array,null
 	 */
@@ -6660,7 +6757,7 @@ export interface InframonitoringtypesPostableDaemonSetsDTO {
 	 * @format int64
 	 */
 	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
+	filter?: InframonitoringtypesDaemonSetFilterDTO;
 	/**
 	 * @type array,null
 	 */
@@ -6687,7 +6784,7 @@ export interface InframonitoringtypesPostableDeploymentsDTO {
 	 * @format int64
 	 */
 	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
+	filter?: InframonitoringtypesDeploymentFilterDTO;
 	/**
 	 * @type array,null
 	 */
@@ -6741,7 +6838,7 @@ export interface InframonitoringtypesPostableJobsDTO {
 	 * @format int64
 	 */
 	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
+	filter?: InframonitoringtypesJobFilterDTO;
 	/**
 	 * @type array,null
 	 */
@@ -6768,7 +6865,7 @@ export interface InframonitoringtypesPostableNamespacesDTO {
 	 * @format int64
 	 */
 	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
+	filter?: InframonitoringtypesNamespaceFilterDTO;
 	/**
 	 * @type array,null
 	 */
@@ -6795,7 +6892,7 @@ export interface InframonitoringtypesPostableNodesDTO {
 	 * @format int64
 	 */
 	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
+	filter?: InframonitoringtypesNodeFilterDTO;
 	/**
 	 * @type array,null
 	 */
@@ -6822,7 +6919,7 @@ export interface InframonitoringtypesPostablePodsDTO {
 	 * @format int64
 	 */
 	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
+	filter?: InframonitoringtypesPodFilterDTO;
 	/**
 	 * @type array,null
 	 */
@@ -6843,13 +6940,24 @@ export interface InframonitoringtypesPostablePodsDTO {
 	start: number;
 }
 
+export interface InframonitoringtypesStatefulSetFilterDTO {
+	/**
+	 * @type string
+	 */
+	expression?: string;
+	/**
+	 * @type array,null
+	 */
+	filterByPodStatus?: InframonitoringtypesPodStatusDTO[] | null;
+}
+
 export interface InframonitoringtypesPostableStatefulSetsDTO {
 	/**
 	 * @type integer
 	 * @format int64
 	 */
 	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
+	filter?: InframonitoringtypesStatefulSetFilterDTO;
 	/**
 	 * @type array,null
 	 */
@@ -8884,8 +8992,17 @@ export enum SavedviewtypesPanelTypeDTO {
 	list = 'list',
 	trace = 'trace',
 }
+export enum SavedviewtypesSchemaVersionDTO {
+	v2 = 'v2',
+}
+export enum SavedviewtypesSourceDTO {
+	traces = 'traces',
+	logs = 'logs',
+	metrics = 'metrics',
+	meter = 'meter',
+}
 export interface SavedviewtypesSavedViewSpecDTO {
-	display: SavedviewtypesDisplayDTO;
+	display?: SavedviewtypesDisplayDTO;
 	/**
 	 * @type string
 	 */
@@ -8895,28 +9012,14 @@ export interface SavedviewtypesSavedViewSpecDTO {
 	 * @type array
 	 */
 	queries: Querybuildertypesv5QueryEnvelopeDTO[];
+	requestType: Querybuildertypesv5RequestTypeDTO;
 	/**
 	 * @type array
 	 */
-	selectedFields: TelemetrytypesTelemetryFieldKeyDTO[];
+	selectedFields?: TelemetrytypesTelemetryFieldKeyDTO[];
 }
 
-export interface SavedviewtypesSavedViewDataDTO {
-	/**
-	 * @type string
-	 */
-	schemaVersion: string;
-	spec: SavedviewtypesSavedViewSpecDTO;
-}
-
-export enum SavedviewtypesSourceDTO {
-	traces = 'traces',
-	logs = 'logs',
-	metrics = 'metrics',
-	meter = 'meter',
-}
 export interface SavedviewtypesPostableSavedViewDTO {
-	data: SavedviewtypesSavedViewDataDTO;
 	/**
 	 * @type boolean
 	 */
@@ -8925,7 +9028,9 @@ export interface SavedviewtypesPostableSavedViewDTO {
 	 * @type string
 	 */
 	name?: string;
+	schemaVersion: SavedviewtypesSchemaVersionDTO;
 	source: SavedviewtypesSourceDTO;
+	spec: SavedviewtypesSavedViewSpecDTO;
 }
 
 export interface SavedviewtypesSavedViewDTO {
@@ -8938,7 +9043,6 @@ export interface SavedviewtypesSavedViewDTO {
 	 * @type string
 	 */
 	createdBy?: string;
-	data?: SavedviewtypesSavedViewDataDTO;
 	/**
 	 * @type string
 	 */
@@ -8947,7 +9051,9 @@ export interface SavedviewtypesSavedViewDTO {
 	 * @type string
 	 */
 	name?: string;
+	schemaVersion: SavedviewtypesSchemaVersionDTO;
 	source?: SavedviewtypesSourceDTO;
+	spec: SavedviewtypesSavedViewSpecDTO;
 	/**
 	 * @type string
 	 * @format date-time
@@ -8960,8 +9066,9 @@ export interface SavedviewtypesSavedViewDTO {
 }
 
 export interface SavedviewtypesUpdatableSavedViewDTO {
-	data: SavedviewtypesSavedViewDataDTO;
+	schemaVersion: SavedviewtypesSchemaVersionDTO;
 	source: SavedviewtypesSourceDTO;
+	spec: SavedviewtypesSavedViewSpecDTO;
 }
 
 export interface ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO {
@@ -9827,47 +9934,6 @@ export interface TypesChangePasswordRequestDTO {
 	oldPassword?: string;
 }
 
-export interface TypesDeprecatedUserDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	displayName?: string;
-	/**
-	 * @type string
-	 */
-	email?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type boolean
-	 */
-	isRoot?: boolean;
-	/**
-	 * @type string
-	 */
-	orgId?: string;
-	/**
-	 * @type string
-	 */
-	role?: string;
-	/**
-	 * @type string
-	 */
-	status?: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-}
-
 export interface TypesIdentifiableDTO {
 	/**
 	 * @type string
@@ -9875,47 +9941,6 @@ export interface TypesIdentifiableDTO {
 	id: string;
 }
 
-export interface TypesInviteDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	email?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	inviteLink?: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	orgId?: string;
-	/**
-	 * @type string
-	 */
-	role?: string;
-	/**
-	 * @type string
-	 */
-	token?: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-}
-
 export interface TypesOrganizationDTO {
 	/**
 	 * @type string
@@ -9950,32 +9975,6 @@ export interface TypesOrganizationDTO {
 	updatedAt?: string;
 }
 
-export interface TypesPostableInviteDTO {
-	/**
-	 * @type string
-	 */
-	email?: string;
-	/**
-	 * @type string
-	 */
-	frontendBaseUrl?: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	role?: string;
-}
-
-export interface TypesPostableBulkInviteRequestDTO {
-	/**
-	 * @type array
-	 */
-	invites: TypesPostableInviteDTO[];
-}
-
 export interface TypesPostableForgotPasswordDTO {
 	/**
 	 * @type string
@@ -10002,13 +10001,6 @@ export interface TypesPostableResetPasswordDTO {
 	token?: string;
 }
 
-export interface TypesPostableRoleDTO {
-	/**
-	 * @type string
-	 */
-	name: string;
-}
-
 export interface TypesPostableVerifyResetPasswordTokenDTO {
 	/**
 	 * @type string
@@ -10651,17 +10643,6 @@ export type GetFieldsValues200 = {
 	status: string;
 };
 
-export type GetResetPasswordTokenDeprecatedPathParameters = {
-	id: string;
-};
-export type GetResetPasswordTokenDeprecated200 = {
-	data: TypesResetPasswordTokenDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetGlobalConfig200 = {
 	data: GlobaltypesConfigDTO;
 	/**
@@ -10670,14 +10651,6 @@ export type GetGlobalConfig200 = {
 	status: string;
 };
 
-export type CreateInvite201 = {
-	data: TypesInviteDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListLLMPricingRulesParams = {
 	/**
 	 * @type integer
@@ -11090,50 +11063,6 @@ export type GetTraceAggregations200 = {
 	status: string;
 };
 
-export type ListUsersDeprecated200 = {
-	/**
-	 * @type array
-	 */
-	data: TypesDeprecatedUserDTO[];
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteUserDeprecatedPathParameters = {
-	id: string;
-};
-export type GetUserDeprecatedPathParameters = {
-	id: string;
-};
-export type GetUserDeprecated200 = {
-	data: TypesDeprecatedUserDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateUserDeprecatedPathParameters = {
-	id: string;
-};
-export type UpdateUserDeprecated200 = {
-	data: TypesDeprecatedUserDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetMyUserDeprecated200 = {
-	data: TypesDeprecatedUserDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListUserPreferences200 = {
 	/**
 	 * @type array
@@ -12328,13 +12257,6 @@ export type GetRolesByUserID200 = {
 	status: string;
 };
 
-export type SetRoleByUserIDPathParameters = {
-	id: string;
-};
-export type RemoveUserRoleByUserIDAndRoleIDPathParameters = {
-	id: string;
-	roleId: string;
-};
 export type GetMyUser200 = {
 	data: AuthtypesUserWithRolesDTO;
 	/**

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -1,82 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-export interface HostListPayload {
-	filters: TagFilter;
-	groupBy: BaseAutocompleteData[];
-	offset?: number;
-	limit?: number;
-	orderBy?: {
-		columnName: string;
-		order: 'asc' | 'desc';
-	} | null;
-	start?: number;
-	end?: number;
-}
-
-export interface TimeSeriesValue {
-	timestamp: number;
-	value: string;
-}
-
-export interface TimeSeries {
-	labels: Record<string, string>;
-	labelsArray: Array<Record<string, string>>;
-	values: TimeSeriesValue[];
-}
-
-export interface HostData {
-	hostName: string;
-	active: boolean;
-	os: string;
-	/** Present when the list API returns grouped rows or extra resource attributes. */
-	meta?: Record<string, string>;
-	cpu: number;
-	cpuTimeSeries: TimeSeries;
-	memory: number;
-	memoryTimeSeries: TimeSeries;
-	wait: number;
-	waitTimeSeries: TimeSeries;
-	load15: number;
-	load15TimeSeries: TimeSeries;
-}
-
-export interface HostListResponse {
-	status: string;
-	data: {
-		type: string;
-		records: HostData[];
-		groups: null;
-		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
-		endTimeBeforeRetention: boolean;
-	};
-}
-
-export const getHostLists = async (
-	props: HostListPayload,
-	signal?: AbortSignal,
-	headers?: Record<string, string>,
-): Promise<SuccessResponse<HostListResponse> | ErrorResponse> => {
-	try {
-		const response = await axios.post('/hosts/list', props, {
-			signal,
-			headers,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data,
-			params: props,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};

frontend/src/api/utils.ts

@@ -24,19 +24,3 @@ export const Logout = async (): Promise<void> => {
 	window.dispatchEvent(new CustomEvent('LOGOUT'));
 	history.push(ROUTES.LOGIN);
 };
-
-export const UnderscoreToDotMap: Record<string, string> = {
-	k8s_cluster_name: 'k8s.cluster.name',
-	k8s_cluster_uid: 'k8s.cluster.uid',
-	k8s_namespace_name: 'k8s.namespace.name',
-	k8s_node_name: 'k8s.node.name',
-	k8s_node_uid: 'k8s.node.uid',
-	k8s_pod_name: 'k8s.pod.name',
-	k8s_pod_uid: 'k8s.pod.uid',
-	k8s_deployment_name: 'k8s.deployment.name',
-	k8s_daemonset_name: 'k8s.daemonset.name',
-	k8s_statefulset_name: 'k8s.statefulset.name',
-	k8s_cronjob_name: 'k8s.cronjob.name',
-	k8s_job_name: 'k8s.job.name',
-	k8s_persistentvolumeclaim_name: 'k8s.persistentvolumeclaim.name',
-};

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

@@ -1,31 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/resetPassword';
-
-/**
- * @deprecated Use the generated `useResetPassword` hook (or `resetPassword` fetcher) from
- * `api/generated/services/users` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const resetPassword = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>(`/resetPassword`, {
-			...props,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default resetPassword;

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

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { UsersProps } from 'types/api/user/inviteUsers';
-
-/**
- * @deprecated Use the generated `useCreateBulkInvite` hook (or `createBulkInvite` fetcher) from
- * `api/generated/services/users` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const inviteUsers = async (
-	users: UsersProps,
-): Promise<SuccessResponseV2<null>> => {
-	try {
-		const response = await axios.post(`/invite/bulk`, users);
-		return {
-			httpStatusCode: response.status,
-			data: null,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default inviteUsers;

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

@@ -1,31 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/setInvite';
-
-/**
- * @deprecated Use the generated `useCreateInvite` hook (or `createInvite` fetcher) from
- * `api/generated/services/users` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const sendInvite = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>(`/invite`, {
-			...props,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default sendInvite;

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/EditMemberDrawer/__tests__/EditMemberDrawer.test.tsx

@@ -5,10 +5,9 @@ import {
 	useCreateResetPasswordToken,
 	useDeleteUser,
 	useGetResetPasswordToken,
-	useGetRolesByUserID,
+	useCreateUserRole,
+	useDeleteUserRole,
 	useGetUser,
-	useRemoveUserRoleByUserIDAndRoleID,
-	useSetRoleByUserID,
 	useUpdateMyUserV2,
 	useUpdateUser,
 } from 'api/generated/services/users';
@@ -25,15 +24,14 @@ import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
 jest.mock('api/generated/services/users', () => ({
 	useDeleteUser: jest.fn(),
 	useGetUser: jest.fn(),
-	useGetRolesByUserID: jest.fn(),
-	useRemoveUserRoleByUserIDAndRoleID: jest.fn(),
+	useDeleteUserRole: jest.fn(),
 	useUpdateUser: jest.fn(),
 	useUpdateMyUserV2: jest.fn(),
-	useSetRoleByUserID: jest.fn(),
+	useCreateUserRole: jest.fn(),
 	useGetResetPasswordToken: jest.fn(),
 	useCreateResetPasswordToken: jest.fn(),
-	getGetRolesByUserIDQueryKey: ({ id }: { id: string }): string[] => [
-		`/api/v2/users/${id}/roles`,
+	getGetUserQueryKey: ({ id }: { id: string }): string[] => [
+		`/api/v2/users/${id}`,
 	],
 }));
 
@@ -194,11 +192,7 @@ describe('EditMemberDrawer', () => {
 			isLoading: false,
 			refetch: jest.fn(),
 		});
-		(useGetRolesByUserID as jest.Mock).mockReturnValue({
-			data: { data: [managedRoles[0]] },
-			isLoading: false,
-		});
-		(useRemoveUserRoleByUserIDAndRoleID as jest.Mock).mockReturnValue({
+		(useDeleteUserRole as jest.Mock).mockReturnValue({
 			mutateAsync: mockRemoveMutateAsync.mockResolvedValue({}),
 			isLoading: false,
 		});
@@ -210,7 +204,7 @@ describe('EditMemberDrawer', () => {
 			mutateAsync: jest.fn().mockResolvedValue({}),
 			isLoading: false,
 		});
-		(useSetRoleByUserID as jest.Mock).mockReturnValue({
+		(useCreateUserRole as jest.Mock).mockReturnValue({
 			mutateAsync: jest.fn().mockResolvedValue({}),
 			isLoading: false,
 		});
@@ -312,12 +306,12 @@ describe('EditMemberDrawer', () => {
 		expect(onClose).not.toHaveBeenCalled();
 	});
 
-	it('adding a new role calls setRole without removing existing ones', async () => {
+	it('adding a new role creates a user role without removing existing ones', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const mockSet = jest.fn().mockResolvedValue({});
 
-		(useSetRoleByUserID as jest.Mock).mockReturnValue({
+		(useCreateUserRole as jest.Mock).mockReturnValue({
 			mutateAsync: mockSet,
 			isLoading: false,
 		});
@@ -334,15 +328,14 @@ describe('EditMemberDrawer', () => {
 
 		await waitFor(() => {
 			expect(mockSet).toHaveBeenCalledWith({
-				pathParams: { id: 'user-1' },
-				data: { name: 'signoz-editor' },
+				data: { userId: 'user-1', roleId: managedRoles[1].id },
 			});
 			expect(mockRemoveMutateAsync).not.toHaveBeenCalled();
 			expect(onComplete).toHaveBeenCalled();
 		});
 	});
 
-	it('deselecting a role calls removeRole with the role id', async () => {
+	it('deselecting a role deletes the user role by its assignment id', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -361,7 +354,7 @@ describe('EditMemberDrawer', () => {
 
 		await waitFor(() => {
 			expect(mockRemoveMutateAsync).toHaveBeenCalledWith({
-				pathParams: { id: 'user-1', roleId: managedRoles[0].id },
+				pathParams: { id: 'ur-1' },
 			});
 			expect(onComplete).toHaveBeenCalled();
 		});

frontend/src/components/InviteMembers/InviteMembers.tsx

@@ -80,7 +80,7 @@ function InviteMembers({
 							weight="semibold"
 							className={styles.headerCellRole}
 						>
-							Role
+							Roles
 						</Typography.Text>
 						<div className={styles.headerCellAction} />
 					</div>
@@ -108,11 +108,10 @@ function InviteMembers({
 
 							<div className={styles.cellRole}>
 								<RolesSelect
-									mode="single"
-									value={row.roleId || undefined}
-									onChange={(roleId): void => updateRole(row.id, roleId)}
-									placeholder="Select role"
-									allowClear={false}
+									mode="multiple"
+									value={row.roleIds}
+									onChange={(roleIds): void => updateRole(row.id, roleIds)}
+									placeholder="Select roles"
 									id={`invite-role-${row.id}`}
 								/>
 							</div>

frontend/src/components/InviteMembers/__tests__/InviteMembers.edgeCases.test.tsx

@@ -68,8 +68,8 @@ describe('InviteMembers - Edge Cases', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 			await expect(
@@ -100,8 +100,8 @@ describe('InviteMembers - Edge Cases', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 			await expect(
@@ -132,17 +132,17 @@ describe('InviteMembers - Edge Cases', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 			await expect(
 				screen.findByTestId('invite-api-error'),
 			).resolves.toBeInTheDocument();
 
-			const viewerElements = screen.getAllByText('Viewer');
+			const viewerElements = screen.getAllByTitle('Viewer');
 			await user.click(viewerElements[0]);
-			const editorOptions = await screen.findAllByText('Editor');
+			const editorOptions = await screen.findAllByTitle('Editor');
 			await user.click(editorOptions[editorOptions.length - 1]);
 
 			await waitFor(() => {
@@ -189,8 +189,8 @@ describe('InviteMembers - Edge Cases', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			const submitBtn = screen.getByTestId('submit-btn');
 			await user.click(submitBtn);
@@ -226,8 +226,8 @@ describe('InviteMembers - Edge Cases', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], '  alice@signoz.io  ');
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 

frontend/src/components/InviteMembers/__tests__/InviteMembers.rendering.test.tsx

@@ -32,14 +32,14 @@ describe('InviteMembers - Rendering', () => {
 		render(<InviteMembers />);
 
 		expect(screen.getByText('Email address')).toBeInTheDocument();
-		expect(screen.getByText('Role')).toBeInTheDocument();
+		expect(screen.getByText('Roles')).toBeInTheDocument();
 	});
 
 	it('hides header when showHeader is false', () => {
 		render(<InviteMembers showHeader={false} />);
 
 		expect(screen.queryByText('Email address')).not.toBeInTheDocument();
-		expect(screen.queryByText('Role')).not.toBeInTheDocument();
+		expect(screen.queryByText('Roles')).not.toBeInTheDocument();
 	});
 
 	it('renders add button by default', () => {
@@ -89,7 +89,7 @@ describe('InviteMembers - Rendering', () => {
 	it('renders role select for each row', () => {
 		render(<InviteMembers initialRowCount={2} />);
 
-		const roleSelects = screen.getAllByText('Select role');
+		const roleSelects = screen.getAllByText('Select roles');
 		expect(roleSelects).toHaveLength(2);
 	});
 });

frontend/src/components/InviteMembers/__tests__/InviteMembers.submission.test.tsx

@@ -40,8 +40,8 @@ describe('InviteMembers - Submission', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], 'alice@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 
@@ -73,17 +73,17 @@ describe('InviteMembers - Submission', () => {
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 
 			await user.type(emailInputs[0], 'alice@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.type(emailInputs[1], 'bob@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			const editorOptions = await screen.findAllByText('Editor');
+			await user.click(screen.getAllByText('Select roles')[0]);
+			const editorOptions = await screen.findAllByTitle('Editor');
 			await user.click(editorOptions[editorOptions.length - 1]);
 
 			await user.type(emailInputs[2], 'charlie@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			const adminOptions = await screen.findAllByText('Admin');
+			await user.click(screen.getAllByText('Select roles')[0]);
+			const adminOptions = await screen.findAllByTitle('Admin');
 			await user.click(adminOptions[adminOptions.length - 1]);
 
 			await user.click(screen.getByTestId('submit-btn'));
@@ -125,8 +125,8 @@ describe('InviteMembers - Submission', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 
@@ -154,8 +154,8 @@ describe('InviteMembers - Submission', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 
@@ -218,12 +218,12 @@ describe('InviteMembers - Submission', () => {
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 
 			await user.type(emailInputs[0], 'alice@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.type(emailInputs[1], 'bob@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			const editorOptions = await screen.findAllByText('Editor');
+			await user.click(screen.getAllByText('Select roles')[0]);
+			const editorOptions = await screen.findAllByTitle('Editor');
 			await user.click(editorOptions[editorOptions.length - 1]);
 
 			await user.click(screen.getByTestId('submit-btn'));
@@ -276,8 +276,8 @@ describe('InviteMembers - Submission', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 
@@ -303,8 +303,8 @@ describe('InviteMembers - Submission', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 

frontend/src/components/InviteMembers/__tests__/InviteMembers.validation.test.tsx

@@ -35,8 +35,8 @@ describe('InviteMembers - Validation', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], INVALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 
@@ -60,8 +60,8 @@ describe('InviteMembers - Validation', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], INVALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 
@@ -85,8 +85,8 @@ describe('InviteMembers - Validation', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], INVALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 			await user.click(screen.getByTestId('submit-btn'));
 
 			await expect(
@@ -149,8 +149,8 @@ describe('InviteMembers - Validation', () => {
 				screen.findByText('Please select roles for team members'),
 			).resolves.toBeInTheDocument();
 
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await waitFor(() => {
 				expect(
@@ -204,8 +204,8 @@ describe('InviteMembers - Validation', () => {
 
 			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
 			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByTitle('Viewer'));
 
 			await user.click(screen.getByTestId('submit-btn'));
 

frontend/src/components/InviteMembers/types.ts

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 export interface InviteMemberRow {
 	id: string;
 	email: string;
-	roleId: string;
+	roleIds: string[];
 }
 
 export interface InviteResult {
@@ -38,7 +38,7 @@ export interface UseInviteMembersReturn {
 	addRow: () => void;
 	removeRow: (id: string) => void;
 	updateEmail: (id: string, email: string) => void;
-	updateRole: (id: string, roleId: string | undefined) => void;
+	updateRole: (id: string, roleIds: string[]) => void;
 	reset: () => void;
 	submit: () => Promise<InviteResult[]>;
 

frontend/src/components/InviteMembers/useInviteMembers.ts

@@ -18,11 +18,11 @@ import {
 const createEmptyRow = (): InviteMemberRow => ({
 	id: uuid(),
 	email: '',
-	roleId: '',
+	roleIds: [],
 });
 
 const isRowTouched = (row: InviteMemberRow): boolean =>
-	row.email.trim() !== '' || row.roleId !== '';
+	row.email.trim() !== '' || row.roleIds.length > 0;
 
 export function useInviteMembers(
 	options: UseInviteMembersOptions = {},
@@ -78,7 +78,7 @@ export function useInviteMembers(
 
 		touched.forEach((row) => {
 			const emailValid = EMAIL_REGEX.test(row.email);
-			const roleValid = row.roleId !== '';
+			const roleValid = row.roleIds.length > 0;
 
 			if (!emailValid || !row.email) {
 				isValid = false;
@@ -139,12 +139,12 @@ export function useInviteMembers(
 	);
 
 	const updateRole = useCallback(
-		(id: string, roleId: string | undefined): void => {
+		(id: string, roleIds: string[]): void => {
 			setRows((prev) => {
 				const updated = cloneDeep(prev);
 				const row = updated.find((r) => r.id === id);
 				if (row) {
-					row.roleId = roleId ?? '';
+					row.roleIds = roleIds;
 				}
 				return updated;
 			});
@@ -187,7 +187,7 @@ export function useInviteMembers(
 				await createUser({
 					email: row.email.trim(),
 					frontendBaseUrl: getBaseUrl(),
-					userRoles: [{ id: row.roleId }],
+					userRoles: row.roleIds.map((id) => ({ id })),
 				});
 				results.push({ email: row.email, success: true });
 			} catch (err) {

frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.module.scss

@@ -0,0 +1,49 @@
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	gap: 8px;
+}
+
+.tooltipContent {
+	--tooltip-z-index: 2100;
+}
+
+.dropdownContent {
+	--dropdown-menu-content-z-index: 2100;
+}
+
+.leftSection {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.divider {
+	height: 16px;
+	margin: 0;
+}
+
+.timestamp {
+	font-family: 'Geist Mono', monospace;
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-normal);
+	color: var(--l1-foreground);
+	letter-spacing: -0.07px;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.arrows {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	padding: 2px 6px;
+	border-radius: 6px;
+	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+}

frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.tsx

@@ -0,0 +1,153 @@
+import { Button } from '@signozhq/ui/button';
+import { Divider } from '@signozhq/ui/divider';
+import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
+import { Typography } from '@signozhq/ui/typography';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
+import { toast } from '@signozhq/ui/sonner';
+import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import {
+	ChevronDown,
+	ChevronUp,
+	Compass,
+	Copy,
+	Ellipsis,
+	Link,
+} from '@signozhq/icons';
+import { useTimezone } from 'providers/Timezone';
+import { ILog } from 'types/api/logs/log';
+import { MouseEvent, MouseEventHandler } from 'react';
+import { useCopyToClipboard } from 'react-use';
+
+import styles from './LogDetailsHeader.module.scss';
+
+const TOOLTIP_CONTENT_PROPS = { className: styles.tooltipContent };
+
+interface LogDetailsHeaderProps {
+	log: ILog;
+	onNavigatePrev: () => void;
+	onNavigateNext: () => void;
+	isPrevDisabled: boolean;
+	isNextDisabled: boolean;
+	showOpenInExplorer?: boolean;
+	onOpenInExplorer?: MouseEventHandler;
+}
+
+function LogDetailsHeader({
+	log,
+	onNavigatePrev,
+	onNavigateNext,
+	isPrevDisabled,
+	isNextDisabled,
+	showOpenInExplorer = false,
+	onOpenInExplorer,
+}: LogDetailsHeaderProps): JSX.Element {
+	const [, copyToClipboard] = useCopyToClipboard();
+	const { onLogCopy } = useCopyLogLink(log?.id);
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const handleCopyLog = (): void => {
+		copyToClipboard(aggregateAttributesResourcesToString(log));
+		toast.success('Copied to clipboard', { position: 'bottom-right' });
+	};
+
+	const menuItems = [
+		{
+			key: 'copy-log',
+			label: 'Copy log',
+			icon: <Copy size={14} />,
+			onClick: handleCopyLog,
+		},
+		{
+			key: 'copy-link',
+			label: 'Copy link to log',
+			icon: <Link size={14} />,
+			onClick: (): void => onLogCopy(),
+		},
+	];
+
+	return (
+		<div className={styles.header} data-log-detail-ignore="true">
+			<div className={styles.leftSection}>
+				<Divider type="vertical" className={styles.divider} />
+				<Typography.Text
+					className={styles.timestamp}
+					data-testid="log-details-header-timestamp"
+				>
+					{formatTimezoneAdjustedTimestamp(
+						log.date ?? log.timestamp,
+						DATE_TIME_FORMATS.DASH_DATETIME,
+					)}
+				</Typography.Text>
+			</div>
+
+			<div className={styles.actions}>
+				{showOpenInExplorer && (
+					<Button
+						variant="outlined"
+						color="secondary"
+						prefix={<Compass size={16} />}
+						onClick={onOpenInExplorer}
+					>
+						Open in Explorer
+					</Button>
+				)}
+
+				<Dropdown
+					menu={{ items: menuItems }}
+					align="end"
+					className={styles.dropdownContent}
+					onClick={(e: MouseEvent): void => e.stopPropagation()}
+				>
+					<Button
+						variant="link"
+						color="secondary"
+						prefix={<Ellipsis size={16} />}
+						data-testid="log-details-header-menu"
+					/>
+				</Dropdown>
+
+				<div className={styles.arrows}>
+					<TooltipSimple
+						title="Move to previous log"
+						side="top"
+						open={isPrevDisabled ? false : undefined}
+						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
+					>
+						<Button
+							variant="outlined"
+							color="secondary"
+							prefix={<ChevronUp size={14} />}
+							disabled={isPrevDisabled}
+							onClick={onNavigatePrev}
+							data-testid="log-details-header-prev"
+						/>
+					</TooltipSimple>
+					<TooltipSimple
+						title="Move to next log"
+						side="top"
+						open={isNextDisabled ? false : undefined}
+						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
+					>
+						<Button
+							variant="outlined"
+							color="secondary"
+							prefix={<ChevronDown size={14} />}
+							disabled={isNextDisabled}
+							onClick={onNavigateNext}
+							data-testid="log-details-header-next"
+						/>
+					</TooltipSimple>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+LogDetailsHeader.defaultProps = {
+	showOpenInExplorer: false,
+	onOpenInExplorer: undefined,
+};
+
+export default LogDetailsHeader;

frontend/src/components/LogDetail/LogDetailsHeader/useLogNavigation.ts

@@ -0,0 +1,52 @@
+import { useCallback, useMemo } from 'react';
+import { ILog } from 'types/api/logs/log';
+
+interface UseLogNavigationParams {
+	logs?: ILog[];
+	activeLogId: string;
+	onNavigateLog?: (log: ILog) => void;
+	onScrollToLog?: (id: string) => void;
+}
+
+interface UseLogNavigationReturn {
+	goToPrev: () => void;
+	goToNext: () => void;
+	isPrevDisabled: boolean;
+	isNextDisabled: boolean;
+}
+
+export function useLogNavigation({
+	logs,
+	activeLogId,
+	onNavigateLog,
+	onScrollToLog,
+}: UseLogNavigationParams): UseLogNavigationReturn {
+	const currentIndex = useMemo(
+		() => logs?.findIndex((l) => l.id === activeLogId) ?? -1,
+		[logs, activeLogId],
+	);
+
+	const canNavigate = !!logs?.length && !!onNavigateLog && currentIndex !== -1;
+	const isPrevDisabled = !canNavigate || currentIndex <= 0;
+	const isNextDisabled = !canNavigate || currentIndex >= (logs?.length ?? 0) - 1;
+
+	const goToPrev = useCallback((): void => {
+		if (isPrevDisabled || !logs) {
+			return;
+		}
+		const prev = logs[currentIndex - 1];
+		onNavigateLog?.(prev);
+		onScrollToLog?.(prev.id);
+	}, [isPrevDisabled, logs, currentIndex, onNavigateLog, onScrollToLog]);
+
+	const goToNext = useCallback((): void => {
+		if (isNextDisabled || !logs) {
+			return;
+		}
+		const next = logs[currentIndex + 1];
+		onNavigateLog?.(next);
+		onScrollToLog?.(next.id);
+	}, [isNextDisabled, logs, currentIndex, onNavigateLog, onScrollToLog]);
+
+	return { goToPrev, goToNext, isPrevDisabled, isNextDisabled };
+}

frontend/src/components/LogDetail/LogHighlights/LogHighlights.module.scss

@@ -0,0 +1,46 @@
+.highlights {
+	display: grid;
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+	gap: 12px 16px;
+	padding: 12px 0;
+
+	// Constrain each KeyValueLabel (the grid items) to its cell.
+	:global(.key-value-label) {
+		width: auto;
+		min-width: 0;
+		overflow: hidden;
+	}
+}
+
+.valueBadge {
+	--badge-font-size: 13px;
+	box-sizing: border-box;
+	max-width: 100%;
+	min-width: 0;
+}
+
+// Truncating text inside a badge
+.badgeText {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.serviceDot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--accent-forest);
+	flex-shrink: 0;
+	margin-right: 4px;
+}
+
+.traceLink {
+	display: inline-block;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--accent-primary);
+}

frontend/src/components/LogDetail/LogHighlights/LogHighlights.tsx

@@ -0,0 +1,36 @@
+import KeyValueLabel from 'periscope/components/KeyValueLabel';
+import { ILog } from 'types/api/logs/log';
+
+import { LOG_HIGHLIGHTS } from './config';
+import styles from './LogHighlights.module.scss';
+
+interface LogHighlightsProps {
+	log: ILog;
+}
+
+function LogHighlights({ log }: LogHighlightsProps): JSX.Element | null {
+	const fields = LOG_HIGHLIGHTS.map((field) => ({
+		key: field.key,
+		label: field.label,
+		value: field.render(log),
+	})).filter((field) => field.value != null);
+
+	if (fields.length === 0) {
+		return null;
+	}
+
+	return (
+		<div className={styles.highlights} data-testid="log-details-highlights">
+			{fields.map((field) => (
+				<KeyValueLabel
+					key={field.key}
+					badgeKey={field.label}
+					badgeValue={field.value}
+					direction="column"
+				/>
+			))}
+		</div>
+	);
+}
+
+export default LogHighlights;

frontend/src/components/LogDetail/LogHighlights/TraceIdField.tsx

@@ -0,0 +1,23 @@
+import { Link } from 'react-router-dom';
+
+import styles from './LogHighlights.module.scss';
+
+interface TraceIdFieldProps {
+	traceId: string;
+}
+
+function TraceIdField({ traceId }: TraceIdFieldProps): JSX.Element {
+	return (
+		<Link
+			to={{ pathname: `/trace/${traceId}` }}
+			target="_blank"
+			rel="noreferrer"
+			className={styles.traceLink}
+			title={traceId}
+		>
+			{traceId}
+		</Link>
+	);
+}
+
+export default TraceIdField;

frontend/src/components/LogDetail/LogHighlights/config.tsx

@@ -0,0 +1,102 @@
+import { ReactNode } from 'react';
+import { Badge, BadgeColor } from '@signozhq/ui/badge';
+import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
+import { ILog } from 'types/api/logs/log';
+
+import styles from './LogHighlights.module.scss';
+import TraceIdField from './TraceIdField';
+
+// Severity badge color mirrors the LogStateIndicator bar
+const SEVERITY_COLOR: Record<string, BadgeColor> = {
+	[LogType.TRACE]: 'forest',
+	[LogType.DEBUG]: 'aqua',
+	[LogType.INFO]: 'robin',
+	[LogType.WARN]: 'amber',
+	[LogType.ERROR]: 'cherry',
+	[LogType.FATAL]: 'sakura',
+};
+
+export interface LogHighlightConfig {
+	key: string;
+	label: string;
+	render: (log: ILog) => ReactNode | null;
+}
+
+// Resource/attribute lookup (keys like `service.name` live in resources_string,
+// occasionally attributes_string). Typed loosely as these are string maps.
+const getAttr = (log: ILog, key: string): string =>
+	(log.resources_string as unknown as Record<string, string>)?.[key] ||
+	(log.attributes_string as unknown as Record<string, string>)?.[key] ||
+	'';
+
+const valueBadge = (
+	value: string,
+	options?: { prefix?: ReactNode; color?: BadgeColor },
+): ReactNode => (
+	<Badge color={options?.color ?? 'vanilla'} className={styles.valueBadge}>
+		{options?.prefix}
+		<span className={styles.badgeText} title={value}>
+			{value}
+		</span>
+	</Badge>
+);
+
+export const LOG_HIGHLIGHTS: LogHighlightConfig[] = [
+	{
+		key: 'service',
+		label: 'SERVICE',
+		render: (log): ReactNode | null => {
+			const value = getAttr(log, 'service.name');
+			return value
+				? valueBadge(value, {
+						prefix: <span className={styles.serviceDot} />,
+					})
+				: null;
+		},
+	},
+	{
+		key: 'severity',
+		label: 'SEVERITY',
+		render: (log): ReactNode | null => {
+			if (!log.severity_text) {
+				return null;
+			}
+			return valueBadge(log.severity_text, {
+				color: SEVERITY_COLOR[getLogIndicatorType(log)] ?? 'vanilla',
+			});
+		},
+	},
+	{
+		key: 'namespace',
+		label: 'NAMESPACE',
+		render: (log): ReactNode | null => {
+			const value = getAttr(log, 'service.namespace');
+			return value ? valueBadge(value) : null;
+		},
+	},
+	{
+		key: 'environment',
+		label: 'ENVIRONMENT',
+		render: (log): ReactNode | null => {
+			const value = getAttr(log, 'deployment.environment');
+			return value ? valueBadge(value) : null;
+		},
+	},
+	{
+		key: 'traceId',
+		label: 'TRACE ID',
+		render: (log): ReactNode | null => {
+			const traceId = log.trace_id || log.traceId;
+			return traceId ? <TraceIdField traceId={traceId} /> : null;
+		},
+	},
+	{
+		key: 'spanId',
+		label: 'SPAN ID',
+		render: (log): ReactNode | null => {
+			const spanId = log.span_id || log.spanID;
+			return spanId ? valueBadge(spanId) : null;
+		},
+	},
+];

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

@@ -0,0 +1,200 @@
+import { toast } from '@signozhq/ui/sonner';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { render, screen, userEvent } from 'tests/test-utils';
+import { ILog } from 'types/api/logs/log';
+
+import LogDetail from '..';
+import { VIEW_TYPES } from '../constants';
+import { LogDetailProps } from '../LogDetail.interfaces';
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+// The flag to be removed later
+jest.mock('../constants', () => ({
+	...jest.requireActual('../constants'),
+	isLogDetailsV2: true,
+}));
+
+const mockLog: ILog = {
+	id: 'log-1',
+	timestamp: '2024-01-15T09:45:30Z',
+	date: '2024-01-15T09:45:30Z',
+	body: 'test log body',
+	severityText: 'INFO',
+	severityNumber: 9,
+	traceFlags: 0,
+	traceId: '',
+	spanID: '',
+	attributesString: {},
+	attributesInt: {},
+	attributesFloat: {},
+	resources_string: {},
+	scope_string: {},
+	attributes_string: {},
+	severity_text: 'INFO',
+	severity_number: 9,
+};
+
+const makeLog = (id: string): ILog => ({ ...mockLog, id });
+
+function renderDrawer(props: Partial<LogDetailProps> = {}): void {
+	render(
+		<LogDetail
+			log={mockLog}
+			selectedTab={VIEW_TYPES.OVERVIEW}
+			onAddToQuery={jest.fn()}
+			onClickActionItem={jest.fn()}
+			onClose={jest.fn()}
+			{...props}
+		/>,
+	);
+}
+
+describe('LogDetail drawer — header (isLogDetailsV2)', () => {
+	afterEach(() => {
+		jest.clearAllMocks();
+		localStorage.clear();
+	});
+
+	it('renders the revamped header when a log is provided', () => {
+		renderDrawer();
+
+		expect(screen.getByTestId('log-details-header-menu')).toBeInTheDocument();
+		expect(screen.getByTestId('log-details-header-prev')).toBeInTheDocument();
+		expect(screen.getByTestId('log-details-header-next')).toBeInTheDocument();
+	});
+
+	it('shows the log timestamp formatted (DASH_DATETIME) in the header', () => {
+		// Pin the timezone to UTC so the formatted output is deterministic across
+		// machines/CI (Jest doesn't fix a TZ).
+		localStorage.setItem(LOCALSTORAGE.PREFERRED_TIMEZONE, 'UTC');
+
+		renderDrawer();
+
+		// mockLog date is 2024-01-15T09:45:30Z → DASH_DATETIME in UTC.
+		expect(screen.getByTestId('log-details-header-timestamp')).toHaveTextContent(
+			'Jan 15, 2024 ⎯ 09:45:30',
+		);
+	});
+
+	it('copies the log link from the ⋯ menu', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		renderDrawer();
+
+		await user.click(screen.getByTestId('log-details-header-menu'));
+		await user.click(await screen.findByText('Copy link to log'));
+
+		expect(toast.success).toHaveBeenCalled();
+	});
+
+	it('copies the log from the ⋯ menu', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		renderDrawer();
+
+		await user.click(screen.getByTestId('log-details-header-menu'));
+		await user.click(await screen.findByText('Copy log'));
+
+		expect(toast.success).toHaveBeenCalledWith('Copied to clipboard', {
+			position: 'bottom-right',
+		});
+	});
+
+	it('shows "Open in Explorer" when a handleOpenInExplorer handler is provided', () => {
+		renderDrawer({ handleOpenInExplorer: jest.fn() });
+
+		expect(screen.getByText('Open in Explorer')).toBeInTheDocument();
+	});
+
+	it('hides "Open in Explorer" when no handleOpenInExplorer handler is provided', () => {
+		renderDrawer();
+
+		expect(screen.queryByText('Open in Explorer')).not.toBeInTheDocument();
+	});
+
+	it('renders Highlights for fields present on the log, omitting absent ones', () => {
+		const logWithMeta = {
+			...mockLog,
+			severity_text: 'ERROR',
+			trace_id: 'trace-abc',
+			resources_string: {
+				'service.name': 'checkout',
+				'deployment.environment': 'production',
+			},
+		} as unknown as ILog;
+
+		renderDrawer({ log: logWithMeta });
+
+		const highlights = screen.getByTestId('log-details-highlights');
+		expect(highlights).toHaveTextContent('SEVERITY');
+		expect(highlights).toHaveTextContent('ERROR');
+		expect(highlights).toHaveTextContent('SERVICE');
+		expect(highlights).toHaveTextContent('checkout');
+		expect(highlights).toHaveTextContent('ENVIRONMENT');
+		expect(highlights).toHaveTextContent('production');
+		expect(highlights).toHaveTextContent('TRACE ID');
+		// Absent fields are omitted (no namespace / span id on this log).
+		expect(highlights).not.toHaveTextContent('NAMESPACE');
+		expect(highlights).not.toHaveTextContent('SPAN ID');
+	});
+
+	it('links the trace id highlight to the trace detail in a new tab', () => {
+		const logWithTrace = {
+			...mockLog,
+			trace_id: 'trace-abc',
+		} as unknown as ILog;
+
+		renderDrawer({ log: logWithTrace });
+
+		const link = screen.getByRole('link', { name: 'trace-abc' });
+		expect(link).toHaveAttribute('target', '_blank');
+		expect(link.getAttribute('href')).toContain('/trace/trace-abc');
+	});
+
+	it('navigates to the next / previous log with the Down / Up arrow keys', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const logs = [makeLog('log-0'), makeLog('log-1'), makeLog('log-2')];
+		const onNavigateLog = jest.fn();
+		const onScrollToLog = jest.fn();
+
+		// Active log is the middle one so both directions are available.
+		renderDrawer({ log: logs[1], logs, onNavigateLog, onScrollToLog });
+
+		await user.keyboard('{ArrowDown}');
+		expect(onNavigateLog).toHaveBeenLastCalledWith(logs[2]);
+		expect(onScrollToLog).toHaveBeenLastCalledWith('log-2');
+
+		await user.keyboard('{ArrowUp}');
+		expect(onNavigateLog).toHaveBeenLastCalledWith(logs[0]);
+		expect(onScrollToLog).toHaveBeenLastCalledWith('log-0');
+	});
+
+	it('does not navigate past the first log on ArrowUp', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const logs = [makeLog('log-0'), makeLog('log-1')];
+		const onNavigateLog = jest.fn();
+
+		renderDrawer({ log: logs[0], logs, onNavigateLog });
+
+		await user.keyboard('{ArrowUp}');
+		expect(onNavigateLog).not.toHaveBeenCalled();
+	});
+
+	it('navigates via the header up / down buttons and disables them at boundaries', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const logs = [makeLog('log-0'), makeLog('log-1')];
+		const onNavigateLog = jest.fn();
+
+		// Active log is the first one.
+		renderDrawer({ log: logs[0], logs, onNavigateLog });
+
+		expect(screen.getByTestId('log-details-header-prev')).toBeDisabled();
+		expect(screen.getByTestId('log-details-header-next')).toBeEnabled();
+
+		await user.click(screen.getByTestId('log-details-header-next'));
+		expect(onNavigateLog).toHaveBeenLastCalledWith(logs[1]);
+	});
+});

frontend/src/components/LogDetail/constants.ts

@@ -1,3 +1,10 @@
+import getLocalStorage from 'api/browser/localstorage/get';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+// Temp feature flag before actual roll-out
+export const isLogDetailsV2 =
+	getLocalStorage(LOCALSTORAGE.LOG_DETAILS_V2) === 'true';
+
 export const VIEW_TYPES = {
 	OVERVIEW: 'OVERVIEW',
 	JSON: 'JSON',

frontend/src/components/LogDetail/index.tsx

@@ -8,7 +8,9 @@ import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import LogStateIndicator, {
+	LogType,
+} from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
@@ -23,6 +25,7 @@ import {
 } from 'container/LogDetailedView/utils';
 import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
 import { useOptionsMenu } from 'container/OptionsMenu';
+import { FontSize } from 'container/OptionsMenu/types';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -48,8 +51,11 @@ import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
-import { RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
+import { isLogDetailsV2, RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
+import LogDetailsHeader from './LogDetailsHeader/LogDetailsHeader';
+import { useLogNavigation } from './LogDetailsHeader/useLogNavigation';
+import LogHighlights from './LogHighlights/LogHighlights';
 
 import './LogDetails.styles.scss';
 
@@ -96,7 +102,8 @@ function LogDetailInner({
 				target.closest('[data-log-detail-ignore="true"]') ||
 				target.closest('.cm-tooltip-autocomplete') ||
 				target.closest('.drawer-popover') ||
-				target.closest('.query-status-popover')
+				target.closest('.query-status-popover') ||
+				target.closest('[data-radix-popper-content-wrapper]')
 			) {
 				return;
 			}
@@ -112,49 +119,30 @@ function LogDetailInner({
 		};
 	}, [onClose]);
 
-	// Keyboard navigation - handle up/down arrow keys
-	// Only listen when in OVERVIEW tab
-	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const { goToPrev, goToNext, isPrevDisabled, isNextDisabled } =
+		useLogNavigation({
+			logs,
+			activeLogId: log.id,
+			onNavigateLog,
+			onScrollToLog,
+		});
+
+	// Keyboard navigation - handle up/down arrow keys. Only listen in the OVERVIEW
+	// tab so we don't hijack arrow keys from the JSON editor / context view.
 	useEffect(() => {
-		if (
-			!logs ||
-			!onNavigateLog ||
-			logs.length === 0 ||
-			selectedView !== VIEW_TYPES.OVERVIEW
-		) {
-			return;
+		if (selectedView !== VIEW_TYPES.OVERVIEW) {
+			return undefined;
 		}
 
 		const handleKeyDown = (e: KeyboardEvent): void => {
-			const currentIndex = logs.findIndex((l) => l.id === log.id);
-			if (currentIndex === -1) {
-				return;
-			}
-
 			if (e.key === 'ArrowUp') {
 				e.preventDefault();
 				e.stopPropagation();
-				// Navigate to previous log
-				if (currentIndex > 0) {
-					const prevLog = logs[currentIndex - 1];
-					onNavigateLog(prevLog);
-					// Trigger scroll to the log element
-					if (onScrollToLog) {
-						onScrollToLog(prevLog.id);
-					}
-				}
+				goToPrev();
 			} else if (e.key === 'ArrowDown') {
 				e.preventDefault();
 				e.stopPropagation();
-				// Navigate to next log
-				if (currentIndex < logs.length - 1) {
-					const nextLog = logs[currentIndex + 1];
-					onNavigateLog(nextLog);
-					// Trigger scroll to the log element
-					if (onScrollToLog) {
-						onScrollToLog(nextLog.id);
-					}
-				}
+				goToNext();
 			}
 		};
 
@@ -162,7 +150,7 @@ function LogDetailInner({
 		return (): void => {
 			document.removeEventListener('keydown', handleKeyDown);
 		};
-	}, [log.id, logs, onNavigateLog, onScrollToLog, selectedView]);
+	}, [selectedView, goToPrev, goToNext]);
 
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) {
@@ -303,33 +291,6 @@ function LogDetailInner({
 	};
 
 	const logType = log?.attributes_string?.log_level || LogType.INFO;
-	const currentLogIndex = logs ? logs.findIndex((l) => l.id === log.id) : -1;
-	const isPrevDisabled =
-		!logs || !onNavigateLog || logs.length === 0 || currentLogIndex <= 0;
-	const isNextDisabled =
-		!logs ||
-		!onNavigateLog ||
-		logs.length === 0 ||
-		currentLogIndex === logs.length - 1;
-
-	type HandleNavigateLogParams = {
-		direction: 'next' | 'previous';
-	};
-
-	const handleNavigateLog = ({ direction }: HandleNavigateLogParams): void => {
-		if (!logs || !onNavigateLog || currentLogIndex === -1) {
-			return;
-		}
-		if (direction === 'previous' && !isPrevDisabled) {
-			const prevLog = logs[currentLogIndex - 1];
-			onNavigateLog(prevLog);
-			onScrollToLog?.(prevLog.id);
-		} else if (direction === 'next' && !isNextDisabled) {
-			const nextLog = logs[currentLogIndex + 1];
-			onNavigateLog(nextLog);
-			onScrollToLog?.(nextLog.id);
-		}
-	};
 
 	return (
 		<Drawer
@@ -338,57 +299,69 @@ function LogDetailInner({
 			maskClosable={false}
 			getContainer={getContainer}
 			title={
-				<div className="log-detail-drawer__title" data-log-detail-ignore="true">
-					<div className="log-detail-drawer__title-left">
-						<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
-						<Typography.Text className="title">Log details</Typography.Text>
-					</div>
-					<div className="log-detail-drawer__title-right">
-						<div className="log-arrows">
-							<Tooltip
-								title={isPrevDisabled ? '' : 'Move to previous log'}
-								placement="top"
-								mouseLeaveDelay={0}
-							>
-								<Button
-									variant="outlined"
-									color="secondary"
-									prefix={<ChevronUp size={14} />}
-									className="log-arrow-btn log-arrow-btn-up"
-									disabled={isPrevDisabled}
-									onClick={(): void => handleNavigateLog({ direction: 'previous' })}
-								/>
-							</Tooltip>
-							<Tooltip
-								title={isNextDisabled ? '' : 'Move to next log'}
-								placement="top"
-								mouseLeaveDelay={0}
-							>
-								<Button
-									variant="outlined"
-									color="secondary"
-									prefix={<ChevronDown size={14} />}
-									className="log-arrow-btn log-arrow-btn-down"
-									disabled={isNextDisabled}
-									onClick={(): void => handleNavigateLog({ direction: 'next' })}
-								/>
-							</Tooltip>
+				isLogDetailsV2 ? (
+					<LogDetailsHeader
+						log={log}
+						onNavigatePrev={goToPrev}
+						onNavigateNext={goToNext}
+						isPrevDisabled={isPrevDisabled}
+						isNextDisabled={isNextDisabled}
+						showOpenInExplorer={!!handleOpenInExplorer}
+						onOpenInExplorer={handleOpenInExplorer}
+					/>
+				) : (
+					<div className="log-detail-drawer__title" data-log-detail-ignore="true">
+						<div className="log-detail-drawer__title-left">
+							<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
+							<Typography.Text className="title">Log details</Typography.Text>
 						</div>
-						{handleOpenInExplorer && (
-							<div>
-								<Button
-									variant="outlined"
-									color="secondary"
-									prefix={<Compass size={16} />}
-									className="open-in-explorer-btn"
-									onClick={handleOpenInExplorer}
+						<div className="log-detail-drawer__title-right">
+							<div className="log-arrows">
+								<Tooltip
+									title={isPrevDisabled ? '' : 'Move to previous log'}
+									placement="top"
+									mouseLeaveDelay={0}
 								>
-									Open in Explorer
-								</Button>
+									<Button
+										variant="outlined"
+										color="secondary"
+										prefix={<ChevronUp size={14} />}
+										className="log-arrow-btn log-arrow-btn-up"
+										disabled={isPrevDisabled}
+										onClick={goToPrev}
+									/>
+								</Tooltip>
+								<Tooltip
+									title={isNextDisabled ? '' : 'Move to next log'}
+									placement="top"
+									mouseLeaveDelay={0}
+								>
+									<Button
+										variant="outlined"
+										color="secondary"
+										prefix={<ChevronDown size={14} />}
+										className="log-arrow-btn log-arrow-btn-down"
+										disabled={isNextDisabled}
+										onClick={goToNext}
+									/>
+								</Tooltip>
 							</div>
-						)}
+							{handleOpenInExplorer && (
+								<div>
+									<Button
+										variant="outlined"
+										color="secondary"
+										prefix={<Compass size={16} />}
+										className="open-in-explorer-btn"
+										onClick={handleOpenInExplorer}
+									>
+										Open in Explorer
+									</Button>
+								</div>
+							)}
+						</div>
 					</div>
-				</div>
+				)
 			}
 			placement="right"
 			onClose={drawerCloseHandler}
@@ -407,7 +380,15 @@ function LogDetailInner({
 				data-testid="log-detail-drawer"
 			>
 				<div className="log-detail-drawer__log">
-					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
+					{isLogDetailsV2 ? (
+						<LogStateIndicator
+							severityText={log.severity_text}
+							severityNumber={log.severity_number}
+							fontSize={options?.fontSize ?? FontSize.MEDIUM}
+						/>
+					) : (
+						<Divider type="vertical" className={cx('log-type-indicator', logType)} />
+					)}
 					<Tooltip
 						title={removeEscapeCharacters(logBody)}
 						placement="left"
@@ -419,6 +400,8 @@ function LogDetailInner({
 					<div className="log-overflow-shadow">&nbsp;</div>
 				</div>
 
+				{isLogDetailsV2 && <LogHighlights log={log} />}
+
 				<div className="tabs-and-search">
 					<ToggleGroupSimple
 						type="single"
@@ -483,22 +466,25 @@ function LogDetailInner({
 							</Tooltip>
 						)}
 
-						<Tooltip
-							title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
-							placement="topLeft"
-							aria-label={
-								selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
-							}
-							mouseLeaveDelay={0}
-						>
-							<Button
-								variant="link"
-								color="secondary"
-								size="sm"
-								prefix={<Copy size={12} />}
-								onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
-							/>
-						</Tooltip>
+						{/* V2 moves copy actions into the header ⋯ menu */}
+						{!isLogDetailsV2 && (
+							<Tooltip
+								title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
+								placement="topLeft"
+								aria-label={
+									selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
+								}
+								mouseLeaveDelay={0}
+							>
+								<Button
+									variant="link"
+									color="secondary"
+									size="sm"
+									prefix={<Copy size={12} />}
+									onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
+								/>
+							</Tooltip>
+						)}
 					</div>
 				</div>
 				{isFilterVisible && contextQuery?.builder.queryData[0] && (

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

@@ -10,6 +10,10 @@ jest.mock('providers/Timezone', () => ({
 	}),
 }));
 
+jest.mock('providers/App/App', () => ({
+	useAppContext: (): { featureFlags: [] } => ({ featureFlags: [] }),
+}));
+
 const field = (name: string, type = ''): IField => ({
 	name,
 	type,

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

@@ -2,13 +2,15 @@ import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { FeatureKeys } from 'constants/features';
 import {
 	getBodyDisplayString,
 	getSanitizedLogBody,
 } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import { FlatLogData } from 'lib/logs/flatLogData';
+import { getLogFieldValue } from 'lib/logs/flatLogData';
+import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
@@ -26,6 +28,10 @@ export function useLogsTableColumns({
 	fontSize,
 }: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const { featureFlags } = useAppContext();
+	const isBodyJsonEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
+			?.active || false;
 
 	return useMemo<TableColumnDef<ILog>[]>(() => {
 		const stateIndicatorCol: TableColumnDef<ILog> = {
@@ -88,7 +94,8 @@ export function useLogsTableColumns({
 		const makeUserFieldCol = (f: IField): TableColumnDef<ILog> => ({
 			id: buildCompositeKey(f.name, f.type),
 			header: f.name,
-			accessorFn: (log): unknown => FlatLogData(log)[f.name],
+			accessorFn: (log): unknown =>
+				getLogFieldValue(log, f.name, isBodyJsonEnabled),
 			enableRemove: true,
 			width: { min: 192 },
 			cell: ({ value }): ReactElement => (
@@ -115,5 +122,5 @@ export function useLogsTableColumns({
 			.filter((c): c is TableColumnDef<ILog> => c !== null);
 
 		return [stateIndicatorCol, ...fieldCols];
-	}, [fields, fontSize, formatTimezoneAdjustedTimestamp]);
+	}, [fields, fontSize, formatTimezoneAdjustedTimestamp, isBodyJsonEnabled]);
 }

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

@@ -59,6 +59,7 @@ import {
 	dedupeOptionsByLabel,
 	getFieldContextPrefix,
 	getRecentOptions,
+	isSupportedFunction,
 	renderRecentDeleteButton,
 } from './utils';
 
@@ -183,15 +184,14 @@ function QuerySearch({
 				isProgrammaticChangeRef.current = true;
 			}
 
+			const changes = view.state.changes({
+				from: 0,
+				to: currentValue.length,
+				insert: value,
+			});
 			view.dispatch({
-				changes: {
-					from: 0,
-					to: currentValue.length,
-					insert: value,
-				},
-				selection: {
-					anchor: value.length,
-				},
+				changes,
+				selection: { anchor: changes.newLength },
 			});
 		},
 		[],
@@ -1276,11 +1276,13 @@ function QuerySearch({
 		}
 
 		if (queryContext.isInFunction) {
-			options = Object.values(QUERY_BUILDER_FUNCTIONS).map((option) => ({
-				label: option,
-				apply: `${option}()`,
-				type: 'function',
-			}));
+			options = Object.values(QUERY_BUILDER_FUNCTIONS)
+				.filter((option) => isSupportedFunction(option, dataSource))
+				.map((option) => ({
+					label: option,
+					apply: `${option}()`,
+					type: 'function',
+				}));
 
 			// Add space after selection for functions
 			const optionsWithSpace = addSpaceToOptions(options);

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/utils.test.ts

@@ -1,8 +1,12 @@
+import { QUERY_BUILDER_FUNCTIONS } from 'constants/antlrQueryConstants';
+import { DataSource } from 'types/common/queryBuilder';
+
 import {
 	combineInitialAndUserExpression,
 	dedupeOptionsByLabel,
 	getFieldContextPrefix,
 	getUserExpressionFromCombined,
+	isSupportedFunction,
 } from '../utils';
 
 describe('entityLogsExpression', () => {
@@ -118,3 +122,19 @@ describe('dedupeOptionsByLabel', () => {
 		expect(dedupeOptionsByLabel([])).toStrictEqual([]);
 	});
 });
+
+describe('isSupportedFunction', () => {
+	const { HASANY, SEARCH } = QUERY_BUILDER_FUNCTIONS;
+
+	it('allows the has family on every signal', () => {
+		[DataSource.LOGS, DataSource.TRACES, DataSource.METRICS].forEach((signal) => {
+			expect(isSupportedFunction(HASANY, signal)).toBe(true);
+		});
+	});
+
+	it('allows search on logs only', () => {
+		expect(isSupportedFunction(SEARCH, DataSource.LOGS)).toBe(true);
+		expect(isSupportedFunction(SEARCH, DataSource.TRACES)).toBe(false);
+		expect(isSupportedFunction(SEARCH, DataSource.METRICS)).toBe(false);
+	});
+});

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

@@ -1,6 +1,7 @@
 import { closeCompletion, startCompletion } from '@codemirror/autocomplete';
 import type { Completion } from '@codemirror/autocomplete';
 import type { EditorView } from '@uiw/react-codemirror';
+import { QUERY_BUILDER_FUNCTIONS } from 'constants/antlrQueryConstants';
 import dayjs from 'dayjs';
 import { normalizeFilterExpression } from 'lib/recentQueries/normalize';
 import * as recentQueriesStore from 'lib/recentQueries/recentQueriesStore';
@@ -15,6 +16,15 @@ import {
 	RECENTS_SECTION,
 } from './constants';
 
+// search() lives in the logs condition builder only; traces and metrics reject it
+// as an unsupported operator. Every other function is implemented for all signals.
+export function isSupportedFunction(
+	functionName: string,
+	signal: SignalType,
+): boolean {
+	return functionName !== QUERY_BUILDER_FUNCTIONS.SEARCH || signal === 'logs';
+}
+
 export interface FieldContextPrefixMatch {
 	context: string;
 	remainder: string;

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

@@ -301,6 +301,66 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		dispatchSpy.mockRestore();
 	});
 
+	it('does not crash when the expression contains CRLF line breaks (issue #5869)', async () => {
+		const dispatchSpy = jest.spyOn(EditorView.prototype, 'dispatch');
+		const onChange = jest.fn() as jest.MockedFunction<(v: string) => void>;
+		const initialExpression = "service.name = 'frontend'";
+		// Filtering on a multi-line log value (CRLF) used to throw
+		// "RangeError: Selection points outside of document".
+		const crlfExpression = "body CONTAINS 'line1\r\nline2\r\nline3'";
+
+		const baseQueryData = {
+			...initialQueriesMap.logs.builder.queryData[0],
+			filter: { expression: initialExpression },
+		};
+
+		const { rerender } = render(
+			<QuerySearch
+				onChange={onChange}
+				queryData={baseQueryData}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		await waitFor(
+			() => {
+				const editorContent = document.querySelector(
+					CM_EDITOR_SELECTOR,
+				) as HTMLElement;
+				expect(editorContent.textContent || '').toBe(initialExpression);
+			},
+			{ timeout: 3000 },
+		);
+
+		rerender(
+			<QuerySearch
+				onChange={onChange}
+				queryData={{ ...baseQueryData, filter: { expression: crlfExpression } }}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		// The programmatic replace dispatched without throwing, and the selection anchor
+		// stayed within the CRLF-normalized document (the bug set it past the end).
+		await waitFor(() => {
+			const spec = dispatchSpy.mock.calls
+				.map(
+					(call) =>
+						call[0] as {
+							selection?: { anchor?: number };
+							changes?: { newLength?: number };
+						},
+				)
+				.find((s) => s?.selection?.anchor != null && s?.changes?.newLength != null);
+			expect(spec).toBeDefined();
+			expect(spec?.selection?.anchor).toBeLessThanOrEqual(
+				spec?.changes?.newLength as number,
+			);
+		});
+
+		dispatchSpy.mockRestore();
+	});
+
 	it('fetches key suggestions for metrics even without aggregateAttribute.key when showFilterSuggestionsWithoutMetric is true', async () => {
 		const mockedGetKeys = getKeySuggestions as jest.MockedFunction<
 			typeof getKeySuggestions

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/RecentSearches.test.tsx

@@ -0,0 +1,268 @@
+import {
+	completionStatus,
+	currentCompletions,
+	startCompletion,
+} from '@codemirror/autocomplete';
+import { EditorView } from '@uiw/react-codemirror';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import * as recentQueriesStore from 'lib/recentQueries/recentQueriesStore';
+import { fireEvent, render, userEvent, waitFor } from 'tests/test-utils';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { RECENTS_DISPLAY_CAP, RECENTS_SECTION } from '../QuerySearch/constants';
+import QuerySearch from '../QuerySearch/QuerySearch';
+import { mockCodeMirrorDomApis } from './codemirrorDomMocks';
+
+const CM_ROOT_SELECTOR = '.cm-editor';
+const CM_EDITOR_SELECTOR = '.cm-editor .cm-content';
+const TOOLTIP_SELECTOR = '.cm-tooltip-autocomplete';
+const COMPLETION_LABEL_SELECTOR = '.cm-completionLabel';
+const DELETE_BUTTON_SELECTOR = '.cm-recent-delete';
+
+const FRONTEND_FILTER = "service.name = 'frontend'";
+const STATUS_CODE_FILTER = "http.status_code = '500'";
+const TRACES_FILTER = "name = 'HTTP GET'";
+
+beforeAll(() => {
+	mockCodeMirrorDomApis();
+});
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
+jest.mock('api/querySuggestions/getKeySuggestions', () => ({
+	getKeySuggestions: jest.fn().mockResolvedValue({
+		data: { data: { keys: {} } },
+	}),
+}));
+
+jest.mock('api/querySuggestions/getValueSuggestion', () => ({
+	getValueSuggestions: jest.fn().mockResolvedValue({
+		data: { data: { values: { stringValues: [], numberValues: [] } } },
+	}),
+}));
+
+function renderLogsSearch(onChange: (value: string) => void = jest.fn()): void {
+	render(
+		<QuerySearch
+			onChange={onChange}
+			queryData={initialQueriesMap.logs.builder.queryData[0]}
+			dataSource={DataSource.LOGS}
+		/>,
+	);
+}
+
+function saveLogsRecent(expression: string): void {
+	recentQueriesStore.save({ signal: 'logs', filter: { expression } });
+}
+
+function getEditorView(): EditorView | null {
+	const root = document.querySelector<HTMLElement>(CM_ROOT_SELECTOR);
+	return root ? EditorView.findFromDOM(root) : null;
+}
+
+function getDocText(): string {
+	return getEditorView()?.state.doc.toString() ?? '';
+}
+
+function isCompletionOpen(): boolean {
+	const view = getEditorView();
+	return !!view && completionStatus(view.state) === 'active';
+}
+
+// Reads recents from completion state, not the tooltip: the tooltip is a later render
+// pass over this same state, so going to the source drops a layer of timing.
+function getRecentLabels(): string[] {
+	const view = getEditorView();
+	if (!view) {
+		return [];
+	}
+	return currentCompletions(view.state)
+		.filter((completion) => completion.section === RECENTS_SECTION)
+		.map((completion) => completion.label);
+}
+
+async function renderAndFocus(
+	onChange: (value: string) => void = jest.fn(),
+): Promise<HTMLElement> {
+	renderLogsSearch(onChange);
+
+	const editor = await waitFor(
+		() => {
+			const element = document.querySelector(CM_EDITOR_SELECTOR);
+			expect(element).toBeInTheDocument();
+			return element as HTMLElement;
+		},
+		{ timeout: 2000 },
+	);
+
+	await userEvent.click(editor);
+	return editor;
+}
+
+function ensureCompletionOpen(): void {
+	const view = getEditorView();
+	if (view && !isCompletionOpen()) {
+		startCompletion(view);
+	}
+}
+
+function openRecents(): Promise<void> {
+	return waitFor(
+		() => {
+			ensureCompletionOpen();
+			expect(getRecentLabels().length).toBeGreaterThan(0);
+		},
+		{ timeout: 3000 },
+	);
+}
+
+// userEvent.type can close the popup (jsdom blur / closeOnBlur). Re-open on each
+// retry so we assert filtered recents, not "dropdown still closed".
+function waitForRecentLabels(expected: string[]): Promise<void> {
+	return waitFor(
+		() => {
+			ensureCompletionOpen();
+			expect(getRecentLabels()).toStrictEqual(expected);
+		},
+		{ timeout: 3000 },
+	);
+}
+
+describe('QuerySearch recent searches', () => {
+	beforeEach(() => {
+		recentQueriesStore.useRecentQueriesStore.setState({ buckets: {} });
+		localStorage.clear();
+	});
+
+	it('shows a saved recent query under "Recent searches" on focus', async () => {
+		saveLogsRecent(FRONTEND_FILTER);
+
+		await renderAndFocus();
+		await waitForRecentLabels([FRONTEND_FILTER]);
+
+		const view = getEditorView() as EditorView;
+		const [recent] = currentCompletions(view.state);
+		expect(recent.section).toBe(RECENTS_SECTION);
+	});
+
+	it('filters recents by substring as the user types', async () => {
+		saveLogsRecent(FRONTEND_FILTER);
+		saveLogsRecent(STATUS_CODE_FILTER);
+
+		const editor = await renderAndFocus();
+		await openRecents();
+		await userEvent.type(editor, 'status_code');
+		await waitForRecentLabels([STATUS_CODE_FILTER]);
+	});
+
+	it('does not surface recents saved under a different signal', async () => {
+		recentQueriesStore.save({
+			signal: 'traces',
+			filter: { expression: TRACES_FILTER },
+		});
+		saveLogsRecent(FRONTEND_FILTER);
+
+		await renderAndFocus();
+		await waitForRecentLabels([FRONTEND_FILTER]);
+	});
+
+	it('excludes a recent that exactly matches the current editor text', async () => {
+		const supersetFilter = `${FRONTEND_FILTER} AND ${STATUS_CODE_FILTER}`;
+		saveLogsRecent(FRONTEND_FILTER);
+		saveLogsRecent(supersetFilter);
+
+		const editor = await renderAndFocus();
+		await openRecents();
+		await userEvent.type(editor, FRONTEND_FILTER);
+		await waitForRecentLabels([supersetFilter]);
+	});
+
+	it('caps the dropdown at RECENTS_DISPLAY_CAP entries, newest first', async () => {
+		const filters = Array.from(
+			{ length: RECENTS_DISPLAY_CAP + 1 },
+			(_, index) => `attribute_${index + 1} = 'v'`,
+		);
+		filters.forEach((filter) => saveLogsRecent(filter));
+		const expectedLabels = [...filters].reverse().slice(0, RECENTS_DISPLAY_CAP);
+
+		await renderAndFocus();
+		await waitForRecentLabels(expectedLabels);
+	});
+
+	it('applies the full expression to the editor when a recent is clicked', async () => {
+		saveLogsRecent(FRONTEND_FILTER);
+
+		const onChange = jest.fn();
+		await renderAndFocus(onChange);
+		await openRecents();
+
+		// Locate and mousedown in one synchronous waitFor pass. userEvent.click awaits
+		// between pointer events, leaving gaps where the completion can close (its
+		// tooltip mousedown handler then throws on a null `open`), and its selection
+		// handling needs Range APIs the CodeMirror DOM mocks don't provide. CodeMirror
+		// applies the completion on mousedown alone.
+		await waitFor(
+			() => {
+				ensureCompletionOpen();
+				const node = Array.from(
+					document.querySelectorAll<HTMLElement>(COMPLETION_LABEL_SELECTOR),
+				).find((element) => element.textContent === FRONTEND_FILTER);
+				expect(node).toBeDefined();
+				fireEvent.mouseDown(node as HTMLElement);
+			},
+			{ timeout: 3000 },
+		);
+
+		await waitFor(
+			() => {
+				expect(getDocText()).toBe(FRONTEND_FILTER);
+			},
+			{ timeout: 2000 },
+		);
+
+		expect(onChange).toHaveBeenCalledWith(FRONTEND_FILTER);
+
+		await waitFor(
+			() => {
+				expect(document.querySelector(TOOLTIP_SELECTOR)).not.toBeInTheDocument();
+			},
+			{ timeout: 2000 },
+		);
+	});
+
+	it('removes a recent from the dropdown and the store when delete is clicked', async () => {
+		saveLogsRecent(FRONTEND_FILTER);
+
+		await renderAndFocus();
+		await openRecents();
+
+		const deleteButton = await waitFor(
+			() => {
+				const button = document.querySelector(DELETE_BUTTON_SELECTOR);
+				expect(button).toBeInTheDocument();
+				return button as HTMLElement;
+			},
+			{ timeout: 3000 },
+		);
+
+		// fireEvent: the button preventDefaults pointerdown, which makes userEvent.click drop the mouse chain.
+		fireEvent.click(deleteButton);
+
+		await waitFor(
+			() => {
+				expect(recentQueriesStore.list('logs')).toHaveLength(0);
+				expect(getRecentLabels()).not.toContain(FRONTEND_FILTER);
+			},
+			{ timeout: 2000 },
+		);
+		expect(getDocText()).toBe('');
+	});
+});

frontend/src/constants/antlrQueryConstants.ts

@@ -41,6 +41,7 @@ export const QUERY_BUILDER_FUNCTIONS = {
 	HASANY: 'hasAny',
 	HASALL: 'hasAll',
 	HASTOKEN: 'hasToken',
+	SEARCH: 'search',
 };
 
 export function negateOperator(operatorOrFunction: string): string {

frontend/src/constants/features.ts

@@ -7,7 +7,6 @@ export enum FeatureKeys {
 	GATEWAY = 'gateway',
 	PREMIUM_SUPPORT = 'premium_support',
 	ANOMALY_DETECTION = 'anomaly_detection',
-	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 	USE_JSON_BODY = 'use_json_body',
 	ENABLE_AI_OBSERVABILITY = 'enable_ai_observability',
 	ENABLE_METRICS_REDUCTION = 'enable_metrics_reduction',

frontend/src/constants/localStorage.ts

@@ -13,6 +13,7 @@ export enum LOCALSTORAGE {
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
 	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
+	LOG_DETAILS_V2 = 'LOG_DETAILS_V2',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',
 	LOGGED_IN_USER_EMAIL = 'LOGGED_IN_USER_EMAIL',
 	CHAT_SUPPORT = 'CHAT_SUPPORT',

frontend/src/constants/routes.ts

@@ -92,6 +92,7 @@ const ROUTES = {
 	AI_OBSERVABILITY_ATTRIBUTE_MAPPING: '/ai-observability/attribute-mapping',
 	AI_OBSERVABILITY_BASE: '/ai-observability',
 	AI_OBSERVABILITY_OVERVIEW: '/ai-observability/overview',
+	AI_OBSERVABILITY_EXPLORER: '/ai-observability/explorer',
 	AI_OBSERVABILITY_CONFIGURATION: '/ai-observability/configuration',
 } as const;
 

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx

@@ -437,6 +437,17 @@ describe('Create Alert Channel', () => {
 				render(<CreateAlertChannels preType={ChannelType.GoogleChat} />);
 			});
 
+			// paste instead of type: a per-keystroke re-render of the whole form
+			// pushes these tests past the 5s jest timeout on slower CI runners
+			async function fillField(
+				user: ReturnType<typeof userEvent.setup>,
+				testId: string,
+				value: string,
+			): Promise<void> {
+				await user.click(screen.getByTestId(testId));
+				await user.paste(value);
+			}
+
 			it('Should check if the selected item in the type dropdown has text "Google Chat"', () => {
 				expect(screen.getByText('Google Chat')).toBeInTheDocument();
 			});
@@ -463,14 +474,8 @@ describe('Create Alert Channel', () => {
 			it('Should check if saving with a webhook url outside chat.googleapis.com displays error notification', async () => {
 				const user = userEvent.setup();
 
-				await user.type(
-					screen.getByTestId('channel-name-textbox'),
-					'gchat-channel',
-				);
-				await user.type(
-					screen.getByTestId('webhook-url-textbox'),
-					'https://example.com/webhook',
-				);
+				await fillField(user, 'channel-name-textbox', 'gchat-channel');
+				await fillField(user, 'webhook-url-textbox', 'https://example.com/webhook');
 
 				await user.click(screen.getByTestId('save-channel-button'));
 
@@ -496,11 +501,8 @@ describe('Create Alert Channel', () => {
 
 				const user = userEvent.setup();
 
-				await user.type(
-					screen.getByTestId('channel-name-textbox'),
-					'gchat-channel',
-				);
-				await user.type(screen.getByTestId('webhook-url-textbox'), validWebhookUrl);
+				await fillField(user, 'channel-name-textbox', 'gchat-channel');
+				await fillField(user, 'webhook-url-textbox', validWebhookUrl);
 
 				await user.click(screen.getByTestId('save-channel-button'));
 

frontend/src/container/AllError/index.tsx

@@ -37,8 +37,6 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Exception, PayloadProps } from 'types/api/errors/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { FeatureKeys } from '../../constants/features';
-import { useAppContext } from '../../providers/App/App';
 import { FilterDropdownExtendsProps } from './types';
 import {
 	extractFilterValues,
@@ -418,11 +416,6 @@ function AllErrors(): JSX.Element {
 		},
 	];
 
-	const { featureFlags } = useAppContext();
-	const dotMetricsEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
-			?.active || false;
-
 	const onChangeHandler: TableProps<Exception>['onChange'] = useCallback(
 		(
 			paginations: TablePaginationConfig,
@@ -458,7 +451,7 @@ function AllErrors(): JSX.Element {
 	useEffect(() => {
 		if (!isUndefined(errorCountResponse.data?.payload)) {
 			const selectedEnvironments = queries.find(
-				(val) => val.tagKey === getResourceDeploymentKeys(dotMetricsEnabled),
+				(val) => val.tagKey === getResourceDeploymentKeys(),
 			)?.tagValue;
 
 			logEvent('Exception: List page visited', {

frontend/src/container/CreateAlertV2/Footer/__tests__/utils.test.ts

@@ -130,6 +130,28 @@ describe('Footer utils', () => {
 			};
 			expect(validateCreateAlertState(currentArgs)).toBeNull();
 		});
+
+		it('when threshold channels are null', () => {
+			const currentArgs: BuildCreateAlertRulePayloadArgs = {
+				...args,
+				basicAlertState: {
+					...args.basicAlertState,
+					name: 'test name',
+				},
+				thresholdState: {
+					...args.thresholdState,
+					thresholds: [
+						{
+							...args.thresholdState.thresholds[0],
+							channels: null as unknown as string[],
+						},
+					],
+				},
+			};
+			expect(validateCreateAlertState(currentArgs)).toBe(
+				'Please select at least one channel for each threshold or enable routing policies',
+			);
+		});
 	});
 
 	describe('getNotificationSettingsProps', () => {

frontend/src/container/CreateAlertV2/Footer/utils.tsx

@@ -44,7 +44,8 @@ export function validateCreateAlertState(
 		if (!threshold.label) {
 			return 'Please enter a label for each threshold';
 		}
-		if (!notificationSettings.routingPolicies && !threshold.channels.length) {
+		// this runs during render, so a throw here takes down the whole page
+		if (!notificationSettings.routingPolicies && !threshold.channels?.length) {
 			return 'Please select at least one channel for each threshold or enable routing policies';
 		}
 	}

frontend/src/container/CreateAlertV2/__tests__/utils.test.tsx

@@ -316,6 +316,34 @@ describe('CreateAlertV2 utils', () => {
 		});
 	});
 
+	describe('getThresholdStateFromAlertDef null channels', () => {
+		it('falls back to an empty array so downstream consumers never see null', () => {
+			const def: PostableAlertRuleV2 = {
+				...defaultPostableAlertRuleV2,
+				condition: {
+					...defaultPostableAlertRuleV2.condition,
+					thresholds: {
+						kind: 'basic',
+						spec: [
+							{
+								name: 'critical',
+								target: 1,
+								targetUnit: UniversalYAxisUnit.MINUTES,
+								channels: null as unknown as string[],
+								matchType: AlertThresholdMatchType.AT_LEAST_ONCE,
+								op: AlertThresholdOperator.IS_ABOVE,
+							},
+						],
+					},
+				},
+			};
+
+			expect(
+				getThresholdStateFromAlertDef(def).thresholds[0].channels,
+			).toStrictEqual([]);
+		});
+	});
+
 	describe('normalizeOperator', () => {
 		it.each([
 			['1', AlertThresholdOperator.IS_ABOVE],

frontend/src/container/CreateAlertV2/utils.tsx

@@ -258,7 +258,9 @@ export function getThresholdStateFromAlertDef(
 				recoveryThresholdValue: null,
 				unit: threshold.targetUnit,
 				color: getColorForThreshold(threshold.name),
-				channels: threshold.channels,
+				// rules created outside the UI can come back with a null channels
+				// field; drop the guard once the API enforces the schema
+				channels: threshold.channels ?? [],
 			})) || [],
 		selectedQuery: alertDef.condition.selectedQueryName || '',
 		operator:

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -35,7 +35,6 @@ import { openInNewTab } from 'utils/navigation';
 
 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
 
-import { FeatureKeys } from '../../../constants/features';
 import { DOCS_LINKS } from '../constants';
 import { columns, TIME_PICKER_OPTIONS } from './constants';
 
@@ -212,19 +211,13 @@ function ServiceMetrics({
 
 	const topLevelOperations = useMemo(() => Object.entries(data || {}), [data]);
 
-	const { featureFlags } = useAppContext();
-	const dotMetricsEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
-			?.active || false;
-
 	const queryRangeRequestData = useMemo(
 		() =>
 			getQueryRangeRequestData({
 				topLevelOperations,
 				globalSelectedInterval,
-				dotMetricsEnabled,
 			}),
-		[globalSelectedInterval, topLevelOperations, dotMetricsEnabled],
+		[globalSelectedInterval, topLevelOperations],
 	);
 
 	const dataQueries = useGetQueriesRange(

frontend/src/container/InfraMonitoringK8sV2/Base/types.ts

@@ -64,6 +64,8 @@ export interface K8sDetailsFilters {
 export interface K8sDetailsWidgetInfo {
 	title: string;
 	yAxisUnit: string;
+	docPath?: string;
+	description?: string;
 }
 
 export type GetEntityQueryPayload<T> = (

frontend/src/container/InfraMonitoringK8sV2/Clusters/constants.ts

@@ -94,43 +94,59 @@ export const clusterWidgetInfo = [
 		yAxisUnit: '',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/clusters/#cpu-usage-allocatable',
+		description:
+			'Avg, max and min pod CPU usage across the cluster against total allocatable CPU.',
 	},
 	{
 		title: 'Memory Usage, allocatable',
 		yAxisUnit: 'bytes',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/clusters/#memory-usage-allocatable',
+		description:
+			'Avg, max and min pod memory usage against allocatable memory; usage closing in on it risks evictions.',
 	},
 	{
 		title: 'Ready Nodes',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/clusters/#ready-nodes',
+		description:
+			'Nodes currently reporting Ready; a line dropping out means that node stopped accepting pods.',
 	},
 	{
 		title: 'NotReady Nodes',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/clusters/#notready-nodes',
+		description:
+			'Nodes whose kubelet reports unhealthy; their pods are evicted after the toleration window.',
 	},
 	{
 		title: 'Deployments available and desired',
 		yAxisUnit: '',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/clusters/#deployments-available-and-desired',
+		description:
+			'Desired replicas versus pods available past minReadySeconds; a persistent gap means a stuck rollout.',
 	},
 	{
 		title: 'Statefulset pods',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/clusters/#statefulset-pods',
+		description:
+			'Desired, current, ready and updated pod counts per StatefulSet; ready below desired means readiness failures.',
 	},
 	{
 		title: 'Daemonset nodes',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/clusters/#daemonset-nodes',
+		description:
+			'Desired, current and ready node counts per DaemonSet; gaps mean node agents are missing.',
 	},
 	{
 		title: 'Jobs',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/clusters/#jobs',
+		description:
+			'Active, succeeded, failed and desired successful pod counts per Job; non-zero failed needs triage.',
 	},
 ];
 
@@ -562,13 +578,9 @@ export const getClusterMetricsQueryPayload = (
 									type: 'tag',
 								},
 							],
-							having: [
-								{
-									columnName: `MAX(${INFRA_MONITORING_ATTR_KEYS.K8S_NODE_CONDITION_READY})`,
-									op: '=',
-									value: 1,
-								},
-							],
+							having: {
+								expression: `max(${INFRA_MONITORING_ATTR_KEYS.K8S_NODE_CONDITION_READY}) = 1`,
+							},
 							legend: `{{${INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME}}}`,
 							limit: null,
 							orderBy: [],
@@ -648,13 +660,9 @@ export const getClusterMetricsQueryPayload = (
 									type: 'tag',
 								},
 							],
-							having: [
-								{
-									columnName: `MAX(${INFRA_MONITORING_ATTR_KEYS.K8S_NODE_CONDITION_READY})`,
-									op: '=',
-									value: 0,
-								},
-							],
+							having: {
+								expression: `max(${INFRA_MONITORING_ATTR_KEYS.K8S_NODE_CONDITION_READY}) = 0`,
+							},
 							legend: `{{${INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME}}}`,
 							limit: null,
 							orderBy: [],

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/constants.ts

@@ -76,23 +76,31 @@ export const daemonSetWidgetInfo = [
 		yAxisUnit: '',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/daemonsets/#cpu-usage-request-limits',
+		description:
+			'Total CPU usage of the DaemonSet pods against their aggregate CPU requests and limits.',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/daemonsets/#memory-usage-request-limits',
+		description:
+			'Total memory usage of the DaemonSet pods against their aggregate memory requests and limits.',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
 		docPath: '/infrastructure-monitoring/kubernetes/daemonsets/#network-io',
+		description:
+			'Transmit and receive throughput per interface across all pods of the DaemonSet.',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/daemonsets/#network-errors-count',
+		description:
+			'Per-pod-interface network error counts by direction and interface, reported by the kubelet.',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/Deployments/constants.ts

@@ -76,23 +76,31 @@ export const deploymentWidgetInfo = [
 		yAxisUnit: '',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/deployments/#cpu-usage-request-limits',
+		description:
+			'Total CPU usage of the Deployment pods against their aggregate CPU requests and limits.',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/deployments/#memory-usage-request-limits',
+		description:
+			'Total memory usage of the Deployment pods against their aggregate memory requests and limits.',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
 		docPath: '/infrastructure-monitoring/kubernetes/deployments/#network-io',
+		description:
+			'Transmit and receive throughput per interface across all pods of the Deployment.',
 	},
 	{
 		title: 'Network error count',
 		yAxisUnit: '',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/deployments/#network-error-count',
+		description:
+			'Per-pod-interface network error counts by direction and interface, reported by the kubelet.',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/EntityEvents.tsx

@@ -22,6 +22,7 @@ import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants'
 import LoadingContainer from 'container/InfraMonitoringK8sV2/LoadingContainer';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import { saveRecentQueryByExpression } from 'lib/recentQueries/saveRecentQuery';
 import { useQueryState } from 'nuqs';
 import { DataSource } from 'types/common/queryBuilder';
 import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
@@ -116,6 +117,7 @@ function EntityEventsContent({
 					: newUserExpression || '',
 			);
 			if (validation.isValid) {
+				saveRecentQueryByExpression(DataSource.LOGS, newUserExpression);
 				querySearchOnRun(newUserExpression || '');
 
 				void logEvent(InfraMonitoringEvents.FilterApplied, {

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/EntityLogs.tsx

@@ -29,6 +29,7 @@ import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { generateFilterQuery } from 'lib/logs/generateFilterQuery';
+import { saveRecentQueryByExpression } from 'lib/recentQueries/saveRecentQuery';
 import { ILog } from 'types/api/logs/log';
 import { DataSource } from 'types/common/queryBuilder';
 import { validateQuery } from 'utils/queryValidationUtils';
@@ -132,6 +133,7 @@ function EntityLogsContent({
 			);
 
 			if (validation.isValid) {
+				saveRecentQueryByExpression(DataSource.LOGS, newUserExpression);
 				querySearchOnRun(newUserExpression);
 
 				void logEvent(InfraMonitoringEvents.FilterApplied, {

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx

@@ -24,6 +24,7 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { getMetricsExplorerUrl } from 'utils/explorerUtils';
 
 import { getDrawerDurationMs } from 'container/InfraMonitoringK8sV2/Base/useDrawerLifecycleStore';
+import { K8sDetailsWidgetInfo } from 'container/InfraMonitoringK8sV2/Base/types';
 
 import { buildEntityMetricsChartConfig } from './configBuilder';
 import ChartHeader from './ChartHeader';
@@ -41,11 +42,7 @@ import ChartTooltipFooter from './ChartTooltipFooter';
 interface EntityMetricsProps<T> {
 	entity: T;
 	eventEntity: string;
-	entityWidgetInfo: {
-		title: string;
-		yAxisUnit: string;
-		docPath?: string;
-	}[];
+	entityWidgetInfo: K8sDetailsWidgetInfo[];
 	getEntityQueryPayload: (
 		node: T,
 		start: number,
@@ -219,6 +216,7 @@ function EntityMetrics<T>({
 						<ChartHeader
 							title={entityWidgetInfo[idx].title}
 							docPath={entityWidgetInfo[idx].docPath}
+							tooltip={entityWidgetInfo[idx].description}
 							metricsExplorerUrl={
 								queryPayloads[idx] && queryPayloads[idx].graphType !== PANEL_TYPES.TABLE
 									? getMetricsExplorerUrl({

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/__tests__/EntityMetrics.test.tsx

@@ -121,12 +121,6 @@ jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 			plan_version: 'test-plan-version',
 		},
 	},
-	featureFlags: [
-		{
-			name: 'DOT_METRICS_ENABLED',
-			active: false,
-		},
-	],
 } as any);
 
 const mockEntity = {

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/EntityTraces.tsx

@@ -22,6 +22,7 @@ import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants'
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
 import { TracesLoading } from 'container/TracesExplorer/TraceLoading/TraceLoading';
+import { saveRecentQueryByExpression } from 'lib/recentQueries/saveRecentQuery';
 import { useQueryState } from 'nuqs';
 import { DataSource } from 'types/common/queryBuilder';
 import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
@@ -98,6 +99,7 @@ function EntityTracesContent({
 					: newUserExpression || '',
 			);
 			if (validation.isValid) {
+				saveRecentQueryByExpression(DataSource.TRACES, newUserExpression);
 				querySearchOnRun(newUserExpression || '');
 
 				void logEvent(InfraMonitoringEvents.FilterApplied, {

frontend/src/container/InfraMonitoringK8sV2/Jobs/constants.ts

@@ -74,21 +74,27 @@ export const jobWidgetInfo = [
 		title: 'CPU usage',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/jobs/#cpu-usage',
+		description: 'CPU consumption in cores summed across the pods of the Job.',
 	},
 	{
 		title: 'Memory Usage',
 		yAxisUnit: 'bytes',
 		docPath: '/infrastructure-monitoring/kubernetes/jobs/#memory-usage',
+		description: 'Memory consumption in bytes summed across the pods of the Job.',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
 		docPath: '/infrastructure-monitoring/kubernetes/jobs/#network-io',
+		description:
+			'Transmit and receive throughput per interface across all pods of the Job.',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/jobs/#network-errors-count',
+		description:
+			'Per-pod-interface network error counts by direction and interface, reported by the kubelet.',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/Namespaces/constants.ts

@@ -113,53 +113,73 @@ export const namespaceWidgetInfo = [
 		yAxisUnit: '',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/namespaces/#cpu-usage-cores-1',
+		description:
+			'Avg, max and min pod CPU usage in the namespace against the sum of container CPU requests.',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/namespaces/#memory-usage-bytes',
+		description:
+			'Pod memory usage, working set and RSS in the namespace against the sum of container memory requests.',
 	},
 	{
 		title: 'Pods CPU (top 10)',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#pods-cpu-top-10',
+		description:
+			'CPU consumption in cores for the ten highest-consuming pods in the namespace.',
 	},
 	{
 		title: 'Pods Memory (top 10)',
 		yAxisUnit: 'bytes',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/namespaces/#pods-memory-top-10',
+		description:
+			'Memory consumption in bytes for the ten highest-consuming pods in the namespace.',
 	},
 	{
 		title: 'Network rate',
 		yAxisUnit: 'binBps',
 		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#network-rate',
+		description:
+			'Transmit and receive throughput per interface across the pods of the namespace.',
 	},
 	{
 		title: 'Network errors',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#network-errors',
+		description:
+			'Per-pod-interface network error counts by direction and interface, reported by the kubelet.',
 	},
 	{
 		title: 'StatefulSets (pods)',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#statefulsets',
+		description:
+			'Desired, current and updated pod counts per StatefulSet in the namespace, revealing stalled rollouts.',
 	},
 	{
 		title: 'ReplicaSets (pods)',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#replicasets',
+		description:
+			'Desired versus available replicas per ReplicaSet in the namespace, revealing pods stuck pending.',
 	},
 	{
 		title: 'DaemonSets (nodes)',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#daemonsets',
+		description:
+			'Desired, current, ready and misscheduled node counts per DaemonSet in the namespace.',
 	},
 	{
 		title: 'Deployments (pods)',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#deployments',
+		description:
+			'Desired and available replicas with utilization percentage per Deployment in the namespace.',
 	},
 ];
 
@@ -1208,13 +1228,9 @@ export const getNamespaceMetricsQueryPayload = (
 									type: 'tag',
 								},
 							],
-							having: [
-								{
-									columnName: `MAX(${INFRA_MONITORING_ATTR_KEYS.K8S_REPLICASET_DESIRED})`,
-									op: '>',
-									value: 0,
-								},
-							],
+							having: {
+								expression: `max(${INFRA_MONITORING_ATTR_KEYS.K8S_REPLICASET_DESIRED}) > 0`,
+							},
 							legend: 'desired',
 							limit: null,
 							orderBy: [],
@@ -1261,13 +1277,9 @@ export const getNamespaceMetricsQueryPayload = (
 									type: 'tag',
 								},
 							],
-							having: [
-								{
-									columnName: `MAX(${INFRA_MONITORING_ATTR_KEYS.K8S_REPLICASET_DESIRED})`,
-									op: '>',
-									value: 0,
-								},
-							],
+							having: {
+								expression: `max(${INFRA_MONITORING_ATTR_KEYS.K8S_REPLICASET_AVAILABLE}) > 0`,
+							},
 							legend: 'available',
 							limit: null,
 							orderBy: [],
@@ -1625,13 +1637,13 @@ export const getNamespaceMetricsQueryPayload = (
 							reduceTo: ReduceOperators.LAST,
 							spaceAggregation: 'max',
 							stepInterval: 60,
-							timeAggregation: 'avg',
+							timeAggregation: 'latest',
 						},
 					],
 					queryFormulas: [
 						{
 							disabled: false,
-							expression: 'A/B',
+							expression: '(B/A) * 100',
 							legend: 'util %',
 							queryName: 'F1',
 						},

frontend/src/container/InfraMonitoringK8sV2/Nodes/constants.ts

@@ -58,52 +58,71 @@ export const nodeWidgetInfo = [
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/nodes/#cpu-usage-cores-1',
+		description:
+			'Avg, max and min node CPU usage against allocatable capacity and the CPU requests scheduled on the node.',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
 		docPath: '/infrastructure-monitoring/kubernetes/nodes/#memory-usage-bytes',
+		description:
+			'Node memory usage, working set and RSS against allocatable memory and scheduled memory requests.',
 	},
 	{
 		title: 'CPU Usage (%)',
 		yAxisUnit: 'percentunit',
 		docPath: '/infrastructure-monitoring/kubernetes/nodes/#cpu-usage-',
+		description:
+			'Node CPU usage as a percentage of allocatable capacity and of the CPU requests scheduled on the node.',
 	},
 	{
 		title: 'Memory Usage (%)',
 		yAxisUnit: 'percentunit',
 		docPath: '/infrastructure-monitoring/kubernetes/nodes/#memory-usage-',
+		description:
+			'Node memory usage as a percentage of allocatable memory and of the memory requests scheduled on the node.',
 	},
 	{
 		title: 'Pods by CPU (top 10)',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/nodes/#pods-by-cpu-top-10',
+		description:
+			'CPU consumption in cores for the ten highest-consuming pods on this node.',
 	},
 	{
 		title: 'Pods by Memory (top 10)',
 		yAxisUnit: 'bytes',
 		docPath: '/infrastructure-monitoring/kubernetes/nodes/#pods-by-memory-top-10',
+		description:
+			'Memory consumption in bytes for the ten highest-consuming pods on this node.',
 	},
 	{
 		title: 'Network error count',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/nodes/#network-error-count',
+		description:
+			'Per-interface network error counts by direction, from the kubelet error counters.',
 	},
 	{
 		title: 'Network IO rate',
 		yAxisUnit: 'binBps',
 		docPath: '/infrastructure-monitoring/kubernetes/nodes/#network-io-rate',
+		description:
+			'Transmit and receive throughput per network interface on the node.',
 	},
 	{
 		title: 'Filesystem usage (bytes)',
 		yAxisUnit: 'bytes',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/nodes/#filesystem-usage-bytes',
+		description:
+			'Capacity, available and used bytes for the primary filesystem of the node.',
 	},
 	{
 		title: 'Filesystem usage (%)',
 		yAxisUnit: 'percentunit',
 		docPath: '/infrastructure-monitoring/kubernetes/nodes/#filesystem-usage-',
+		description: 'Percentage of the nodefs filesystem currently consumed.',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/Pods/constants.ts

@@ -68,73 +68,97 @@ export const podWidgetInfo = [
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/pods/#cpu-usage-cores-1',
+		description:
+			'Avg, max and min CPU consumption of the pod in cores, showing how volatile it is.',
 	},
 	{
 		title: 'CPU Request, Limit Utilization',
 		yAxisUnit: 'percentunit',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/pods/#cpu-request-limit-utilization',
+		description:
+			'Pod CPU usage as a fraction of its total container CPU requests and limits, to spot throttling.',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
 		docPath: '/infrastructure-monitoring/kubernetes/pods/#memory-usage-bytes',
+		description:
+			'Avg, max and min memory consumption of the pod, including reclaimable page cache.',
 	},
 	{
 		title: 'Memory Request, Limit Utilization',
 		yAxisUnit: 'percentunit',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/pods/#memory-request-limit-utilization',
+		description:
+			'Pod memory usage as a fraction of its total container memory requests and limits.',
 	},
 	{
 		title: 'Memory by State',
 		yAxisUnit: 'bytes',
 		docPath: '/infrastructure-monitoring/kubernetes/pods/#memory-by-state',
+		description:
+			'RSS, working set and cache memory of the pod, separating heap growth from file cache.',
 	},
 	{
 		title: 'Memory Major Page Faults',
 		yAxisUnit: '',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/pods/#memory-major-page-faults',
+		description:
+			'Major page fault rate of the pod; sustained values mean the working set is paging to disk.',
 	},
 	{
 		title: 'CPU Usage by Container (cores)',
 		yAxisUnit: '',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/pods/#cpu-usage-by-container-cores',
+		description:
+			'CPU consumption in cores per container, showing which container drives the pod CPU.',
 	},
 	{
 		title: 'CPU Request, Limit Utilization by Container',
 		yAxisUnit: 'percentunit',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/pods/#cpu-request-limit-utilization-by-container',
+		description:
+			'Each container CPU usage as a fraction of its own request and limit, to find the throttled one.',
 	},
 	{
 		title: 'Memory Usage by Container (bytes)',
 		yAxisUnit: 'bytes',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/pods/#memory-usage-by-container-bytes',
+		description: 'Usage, working set and RSS memory per container of the pod.',
 	},
 	{
 		title: 'Memory Request, Limit Utilization by Container',
 		yAxisUnit: 'percentunit',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/pods/#memory-request-limit-utilization-by-container',
+		description:
+			'Each container memory usage as a fraction of its own request and limit; near 100% risks an OOMKill.',
 	},
 	{
 		title: 'Network rate',
 		yAxisUnit: 'binBps',
 		docPath: '/infrastructure-monitoring/kubernetes/pods/#network-rate',
+		description: 'Pod network throughput in bytes/s by direction and interface.',
 	},
 	{
 		title: 'Network errors',
 		yAxisUnit: '',
 		docPath: '/infrastructure-monitoring/kubernetes/pods/#network-errors',
+		description:
+			'Network error counts on the pod interfaces; sustained non-zero values point to CNI or MTU issues.',
 	},
 	{
 		title: 'File system (bytes)',
 		yAxisUnit: 'bytes',
 		docPath: '/infrastructure-monitoring/kubernetes/pods/#file-system-bytes',
+		description:
+			'Capacity, available and used bytes of the local filesystem of the pod.',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/constants.ts

@@ -77,35 +77,47 @@ export const statefulSetWidgetInfo = [
 		yAxisUnit: '',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/statefulsets/#cpu-usage-request-limits',
+		description:
+			'Total CPU usage of the StatefulSet pods against their aggregate CPU requests and limits.',
 	},
 	{
 		title: 'CPU request, limit util (%)',
 		yAxisUnit: 'percentunit',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/statefulsets/#cpu-request-limit-utilization-',
+		description:
+			'Average CPU usage of the StatefulSet as a percentage of its requests and of its limits.',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/statefulsets/#memory-usage-request-limits',
+		description:
+			'Total memory usage of the StatefulSet pods against their aggregate memory requests and limits.',
 	},
 	{
 		title: 'Memory request, limit util (%)',
 		yAxisUnit: 'percentunit',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/statefulsets/#memory-request-limit-utilization-',
+		description:
+			'Average memory usage as a percentage of requests and limits; above 100% of request means it exceeds its reservation.',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
 		docPath: '/infrastructure-monitoring/kubernetes/statefulsets/#network-io',
+		description:
+			'Transmit and receive throughput per interface across all pods of the StatefulSet.',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/statefulsets/#network-errors-count',
+		description:
+			'Per-pod-interface network error counts by direction and interface, reported by the kubelet.',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/Volumes/constants.ts

@@ -70,28 +70,38 @@ export const volumeWidgetInfo = [
 		title: 'Volume available',
 		yAxisUnit: 'bytes',
 		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-available-1',
+		description:
+			'Free bytes on the volume over time; a steady decline forecasts when the volume fills up.',
 	},
 	{
 		title: 'Volume capacity',
 		yAxisUnit: 'bytes',
 		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-capacity-1',
+		description:
+			'Total provisioned capacity of the volume in bytes, which steps up only when the PVC is resized.',
 	},
 	{
 		title: 'Volume inodes used',
 		yAxisUnit: 'short',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-used-1',
+		description:
+			'Inodes consumed on the volume filesystem; a rising line means many small files are being created.',
 	},
 	{
 		title: 'Volume inodes',
 		yAxisUnit: 'short',
 		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-1',
+		description:
+			'Total inodes available on the volume filesystem, the reference for spotting inode exhaustion.',
 	},
 	{
 		title: 'Volume inodes free',
 		yAxisUnit: 'short',
 		docPath:
 			'/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-free-1',
+		description:
+			'Unallocated inodes on the volume; near zero, file creation fails with ENOSPC even with free bytes.',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/constants.ts

@@ -800,26 +800,36 @@ export const podUtilizationByPodWidgetInfo = [
 		title: 'CPU Limit Utilization By Pod Name',
 		yAxisUnit: 'percentunit',
 		docPath: '#cpu-limit-utilization-by-pod-name',
+		description:
+			'CPU usage against the CPU limit for each pod; near 100% means the kernel is throttling that pod.',
 	},
 	{
 		title: 'CPU Request Utilization By Pod Name',
 		yAxisUnit: 'percentunit',
 		docPath: '#cpu-request-utilization-by-pod-name',
+		description:
+			'CPU usage against the CPU request for each pod; above 100% means the pod uses more than it reserved.',
 	},
 	{
 		title: 'Memory Limit Utilization By Pod Name',
 		yAxisUnit: 'percentunit',
 		docPath: '#memory-limit-utilization-by-pod-name',
+		description:
+			'Memory usage against the memory limit for each pod; near 100% means that pod is close to an OOMKill.',
 	},
 	{
 		title: 'Memory Request Utilization By Pod Name',
 		yAxisUnit: 'percentunit',
 		docPath: '#memory-request-utilization-by-pod-name',
+		description:
+			'Memory usage against the memory request for each pod; above 100% means the pod exceeds its reservation.',
 	},
 	{
 		title: 'FileSystem Usage Percentage By Pod Name',
 		yAxisUnit: 'percentunit',
 		docPath: '#filesystem-usage-percentage-by-pod-name',
+		description:
+			'Local and ephemeral filesystem fill level as a percentage of capacity for each pod.',
 	},
 ];
 

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({
@@ -162,10 +187,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 +502,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,288 @@
+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 SetupGuideCallout from './SetupGuideCallout';
+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} />
+			<SetupGuideCallout />
+			<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.
+					</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/SetupGuideCallout.module.scss

@@ -0,0 +1,13 @@
+.guideLink {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	color: var(--callout-primary-title);
+	font-size: var(--periscope-font-size-base);
+	text-decoration: none;
+
+	&:hover {
+		color: var(--accent-primary);
+		text-decoration: underline;
+	}
+}

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

@@ -0,0 +1,31 @@
+import { ArrowUpRight, KeyRound } from '@signozhq/icons';
+import { Callout } from '@signozhq/ui/callout';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './SetupGuideCallout.module.scss';
+
+const GCP_INTEGRATION_DOCS_URL =
+	'https://signoz.io/docs/integrations/gcp/gcp-integration/';
+
+function SetupGuideCallout(): JSX.Element {
+	return (
+		<Callout icon={<KeyRound />} testId="gcp-setup-guide-callout">
+			<Typography.Text as="span" size="base">
+				Please go through our GCP integration guide, which covers all prerequisites
+				— service account, IAM roles, and resource setup.
+			</Typography.Text>
+			<a
+				className={styles.guideLink}
+				href={GCP_INTEGRATION_DOCS_URL}
+				target="_blank"
+				rel="noopener noreferrer"
+				data-testid="gcp-setup-guide-link"
+			>
+				GCP integration guide
+				<ArrowUpRight size={12} />
+			</a>
+		</Callout>
+	);
+}
+
+export default SetupGuideCallout;

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