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

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

@@ -61,37 +61,31 @@ type Channel struct {
 
 ```go
 type AuthDomain struct {
-    storableAuthDomain       *StorableAuthDomain
-    storableAuthDomainConfig *StorableAuthDomainConfig
+    storableAuthDomain *StorableAuthDomain
+    authDomainConfig   *AuthDomainConfig
 }
 
 type StorableAuthDomain struct {
     bun.BaseModel `bun:"table:auth_domain"`
     types.Identifiable
     Name  string      `bun:"name"`
-    Data  string      `bun:"data"`  // StorableAuthDomainConfig serialized as JSON
+    Data  string      `bun:"data"`  // AuthDomainConfig serialized as JSON
     OrgID valuer.UUID `bun:"org_id"`
     types.TimeAuditable
 }
 
 type PostableAuthDomain struct {
-    Name        string           `json:"name" required:"true"`
-    Enabled     bool             `json:"enabled"`
-    Config      AuthDomainConfig `json:"config" required:"true"`
-    RoleMapping *RoleMapping     `json:"roleMapping"`
+    Config AuthDomainConfig `json:"config"`
+    Name   string           `json:"name"`
 }
 
-type UpdatableAuthDomain struct {
-    Enabled     bool             `json:"enabled"` // Name intentionally absent
-    Config      AuthDomainConfig `json:"config" required:"true"`
-    RoleMapping *RoleMapping     `json:"roleMapping"`
+type UpdateableAuthDomain struct {
+    Config AuthDomainConfig `json:"config"` // Name intentionally absent
 }
 
 type GettableAuthDomain struct {
-    StorableAuthDomain
-    Enabled           bool               `json:"enabled"`
-    Config            AuthDomainConfig   `json:"config"`
-    RoleMapping       *RoleMapping       `json:"roleMapping"`
+    *StorableAuthDomain
+    *AuthDomainConfig
     AuthNProviderInfo *AuthNProviderInfo `json:"authNProviderInfo"`
 }
 ```
@@ -99,11 +93,11 @@ type GettableAuthDomain struct {
 Each flavor exists for a concrete reason:
 
 - `StorableAuthDomain` stores the typed config as an opaque `Data string` column, so the schema does not need to migrate every time a config field is added.
-- `PostableAuthDomain` carries the config as a structured object (not a string) for the request; `AuthDomainConfig` is a kind/spec envelope.
-- `UpdatableAuthDomain` excludes `Name` because a domain's name cannot change after creation.
+- `PostableAuthDomain` carries the config as a structured object (not a string) for the request.
+- `UpdateableAuthDomain` excludes `Name` because a domain's name cannot change after creation.
 - `GettableAuthDomain` adds `AuthNProviderInfo`, which is derived at read time and never persisted.
 
-The core `AuthDomain` holds the two live halves — `storableAuthDomain` and `storableAuthDomainConfig` — and owns business methods such as `Update(updatable)` and `Patch(patchable)`. Conversions use the `New<Output>From<Input>` form: `NewAuthDomainFromPostableAuthDomain`, `NewAuthDomainFromStorableAuthDomain`, `NewGettableAuthDomainFromAuthDomain`.
+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
 

ee/authn/callbackauthn/oidccallbackauthn/authn.go

@@ -53,6 +53,10 @@ func New(store authtypes.AuthNStore, licensing licensing.Licensing, providerSett
 }
 
 func (a *AuthN) LoginURL(ctx context.Context, siteURL *url.URL, authDomain *authtypes.AuthDomain) (string, error) {
+	if authDomain.AuthDomainConfig().AuthNProvider != authtypes.AuthNProviderOIDC {
+		return "", errors.Newf(errors.TypeInternal, authtypes.ErrCodeAuthDomainMismatch, "domain type is not oidc")
+	}
+
 	_, oauth2Config, err := a.oidcProviderAndoauth2Config(ctx, siteURL, authDomain)
 	if err != nil {
 		return "", err
@@ -81,11 +85,6 @@ func (a *AuthN) HandleCallback(ctx context.Context, query url.Values) (*authtype
 		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	oidcConfig, err := authDomain.Config().OIDCConfig()
-	if err != nil {
-		return nil, err
-	}
-
 	oidcProvider, oauth2Config, err := a.oidcProviderAndoauth2Config(ctx, state.URL, authDomain)
 	if err != nil {
 		return nil, err
@@ -107,14 +106,14 @@ func (a *AuthN) HandleCallback(ctx context.Context, query url.Values) (*authtype
 		return nil, err
 	}
 
-	if claims == nil && oidcConfig.GetUserInfo {
+	if claims == nil && authDomain.AuthDomainConfig().OIDC.GetUserInfo {
 		claims, err = a.claimsFromUserInfo(ctx, oidcProvider, token)
 		if err != nil {
 			return nil, err
 		}
 	}
 
-	emailClaim, ok := claims[oidcConfig.ClaimMapping.Email].(string)
+	emailClaim, ok := claims[authDomain.AuthDomainConfig().OIDC.ClaimMapping.Email].(string)
 	if !ok {
 		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "oidc: missing email in claims")
 	}
@@ -124,7 +123,7 @@ func (a *AuthN) HandleCallback(ctx context.Context, query url.Values) (*authtype
 		return nil, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "oidc: failed to parse email").WithAdditional(err.Error())
 	}
 
-	if !oidcConfig.InsecureSkipEmailVerified {
+	if !authDomain.AuthDomainConfig().OIDC.InsecureSkipEmailVerified {
 		emailVerifiedClaim, ok := claims["email_verified"].(bool)
 		if !ok {
 			return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "oidc: missing email_verified in claims")
@@ -136,14 +135,14 @@ func (a *AuthN) HandleCallback(ctx context.Context, query url.Values) (*authtype
 	}
 
 	name := ""
-	if nameClaim := oidcConfig.ClaimMapping.Name; nameClaim != "" {
+	if nameClaim := authDomain.AuthDomainConfig().OIDC.ClaimMapping.Name; nameClaim != "" {
 		if n, ok := claims[nameClaim].(string); ok {
 			name = n
 		}
 	}
 
 	var groups []string
-	if groupsClaim := oidcConfig.ClaimMapping.Groups; groupsClaim != "" {
+	if groupsClaim := authDomain.AuthDomainConfig().OIDC.ClaimMapping.Groups; groupsClaim != "" {
 		if claimValue, exists := claims[groupsClaim]; exists {
 			switch g := claimValue.(type) {
 			case []any:
@@ -162,7 +161,7 @@ func (a *AuthN) HandleCallback(ctx context.Context, query url.Values) (*authtype
 	}
 
 	role := ""
-	if roleClaim := oidcConfig.ClaimMapping.Role; roleClaim != "" {
+	if roleClaim := authDomain.AuthDomainConfig().OIDC.ClaimMapping.Role; roleClaim != "" {
 		if r, ok := claims[roleClaim].(string); ok {
 			role = r
 		}
@@ -178,16 +177,11 @@ func (a *AuthN) ProviderInfo(ctx context.Context, authDomain *authtypes.AuthDoma
 }
 
 func (a *AuthN) oidcProviderAndoauth2Config(ctx context.Context, siteURL *url.URL, authDomain *authtypes.AuthDomain) (*oidc.Provider, *oauth2.Config, error) {
-	oidcConfig, err := authDomain.Config().OIDCConfig()
-	if err != nil {
-		return nil, nil, err
+	if authDomain.AuthDomainConfig().OIDC.IssuerAlias != "" {
+		ctx = oidc.InsecureIssuerURLContext(ctx, authDomain.AuthDomainConfig().OIDC.IssuerAlias)
 	}
 
-	if oidcConfig.IssuerAlias != "" {
-		ctx = oidc.InsecureIssuerURLContext(ctx, oidcConfig.IssuerAlias)
-	}
-
-	oidcProvider, err := oidc.NewProvider(ctx, oidcConfig.Issuer)
+	oidcProvider, err := oidc.NewProvider(ctx, authDomain.AuthDomainConfig().OIDC.Issuer)
 	if err != nil {
 		return nil, nil, err
 	}
@@ -195,13 +189,13 @@ func (a *AuthN) oidcProviderAndoauth2Config(ctx context.Context, siteURL *url.UR
 	scopes := make([]string, len(defaultScopes))
 	copy(scopes, defaultScopes)
 
-	if authDomain.RoleMapping() != nil && len(authDomain.RoleMapping().GroupMappings) > 0 {
+	if authDomain.AuthDomainConfig().RoleMapping != nil && len(authDomain.AuthDomainConfig().RoleMapping.GroupMappings) > 0 {
 		scopes = append(scopes, "groups")
 	}
 
 	return oidcProvider, &oauth2.Config{
-		ClientID:     oidcConfig.ClientID,
-		ClientSecret: oidcConfig.ClientSecret,
+		ClientID:     authDomain.AuthDomainConfig().OIDC.ClientID,
+		ClientSecret: authDomain.AuthDomainConfig().OIDC.ClientSecret,
 		Endpoint:     oidcProvider.Endpoint(),
 		Scopes:       scopes,
 		RedirectURL: (&url.URL{
@@ -218,12 +212,7 @@ func (a *AuthN) claimsFromIDToken(ctx context.Context, authDomain *authtypes.Aut
 		return nil, errors.New(errors.TypeNotFound, errors.CodeNotFound, "oidc: no id_token in token response")
 	}
 
-	oidcConfig, err := authDomain.Config().OIDCConfig()
-	if err != nil {
-		return nil, err
-	}
-
-	verifier := provider.Verifier(&oidc.Config{ClientID: oidcConfig.ClientID})
+	verifier := provider.Verifier(&oidc.Config{ClientID: authDomain.AuthDomainConfig().OIDC.ClientID})
 	idToken, err := verifier.Verify(ctx, rawIDToken)
 	if err != nil {
 		return nil, errors.Newf(errors.TypeForbidden, errors.CodeForbidden, "oidc: failed to verify token").WithAdditional(err.Error())

ee/authn/callbackauthn/samlcallbackauthn/authn.go

@@ -40,6 +40,10 @@ func New(ctx context.Context, store authtypes.AuthNStore, licensing licensing.Li
 }
 
 func (a *AuthN) LoginURL(ctx context.Context, siteURL *url.URL, authDomain *authtypes.AuthDomain) (string, error) {
+	if authDomain.AuthDomainConfig().AuthNProvider != authtypes.AuthNProviderSAML {
+		return "", errors.Newf(errors.TypeInternal, authtypes.ErrCodeAuthDomainMismatch, "saml: domain type is not saml")
+	}
+
 	sp, err := a.serviceProvider(siteURL, authDomain)
 	if err != nil {
 		return "", err
@@ -69,11 +73,6 @@ func (a *AuthN) HandleCallback(ctx context.Context, formValues url.Values) (*aut
 		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	samlConfig, err := authDomain.Config().SamlConfig()
-	if err != nil {
-		return nil, err
-	}
-
 	sp, err := a.serviceProvider(state.URL, authDomain)
 	if err != nil {
 		return nil, err
@@ -102,19 +101,19 @@ func (a *AuthN) HandleCallback(ctx context.Context, formValues url.Values) (*aut
 	}
 
 	name := ""
-	if nameAttribute := samlConfig.AttributeMapping.Name; nameAttribute != "" {
+	if nameAttribute := authDomain.AuthDomainConfig().SAML.AttributeMapping.Name; nameAttribute != "" {
 		if val := assertionInfo.Values.Get(nameAttribute); val != "" {
 			name = val
 		}
 	}
 
 	var groups []string
-	if groupAttribute := samlConfig.AttributeMapping.Groups; groupAttribute != "" {
+	if groupAttribute := authDomain.AuthDomainConfig().SAML.AttributeMapping.Groups; groupAttribute != "" {
 		groups = assertionInfo.Values.GetAll(groupAttribute)
 	}
 
 	role := ""
-	if roleAttribute := samlConfig.AttributeMapping.Role; roleAttribute != "" {
+	if roleAttribute := authDomain.AuthDomainConfig().SAML.AttributeMapping.Role; roleAttribute != "" {
 		if val := assertionInfo.Values.Get(roleAttribute); val != "" {
 			role = val
 		}
@@ -132,12 +131,7 @@ func (a *AuthN) ProviderInfo(ctx context.Context, authDomain *authtypes.AuthDoma
 }
 
 func (a *AuthN) serviceProvider(siteURL *url.URL, authDomain *authtypes.AuthDomain) (*saml2.SAMLServiceProvider, error) {
-	samlConfig, err := authDomain.Config().SamlConfig()
-	if err != nil {
-		return nil, err
-	}
-
-	certStore, err := a.getCertificateStore(samlConfig)
+	certStore, err := a.getCertificateStore(authDomain)
 	if err != nil {
 		return nil, err
 	}
@@ -148,32 +142,32 @@ func (a *AuthN) serviceProvider(siteURL *url.URL, authDomain *authtypes.AuthDoma
 	// The ServiceProviderIssuer is the client id in case of keycloak. Since we set it to the host here, we need to set the client id == host in keycloak.
 	// For AWSSSO, this is the value of Application SAML audience.
 	return &saml2.SAMLServiceProvider{
-		IdentityProviderSSOURL:      samlConfig.Location,
-		IdentityProviderIssuer:      samlConfig.EntityID,
+		IdentityProviderSSOURL:      authDomain.AuthDomainConfig().SAML.SamlIdp,
+		IdentityProviderIssuer:      authDomain.AuthDomainConfig().SAML.SamlEntity,
 		ServiceProviderIssuer:       siteURL.Host,
 		AssertionConsumerServiceURL: acsURL.String(),
-		SignAuthnRequests:           !samlConfig.InsecureSkipAuthNRequestsSigned,
+		SignAuthnRequests:           !authDomain.AuthDomainConfig().SAML.InsecureSkipAuthNRequestsSigned,
 		AllowMissingAttributes:      true,
 		IDPCertificateStore:         certStore,
 		SPKeyStore:                  dsig.RandomKeyStoreForTest(),
 	}, nil
 }
 
-func (a *AuthN) getCertificateStore(samlConfig authtypes.SamlConfig) (dsig.X509CertificateStore, error) {
+func (a *AuthN) getCertificateStore(authDomain *authtypes.AuthDomain) (dsig.X509CertificateStore, error) {
 	certStore := &dsig.MemoryX509CertificateStore{
 		Roots: []*x509.Certificate{},
 	}
 
 	var certBytes []byte
-	if strings.Contains(samlConfig.Certificate, "-----BEGIN CERTIFICATE-----") {
-		block, _ := pem.Decode([]byte(samlConfig.Certificate))
+	if strings.Contains(authDomain.AuthDomainConfig().SAML.SamlCert, "-----BEGIN CERTIFICATE-----") {
+		block, _ := pem.Decode([]byte(authDomain.AuthDomainConfig().SAML.SamlCert))
 		if block == nil {
 			return certStore, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "no valid pem cert found")
 		}
 
 		certBytes = block.Bytes
 	} else {
-		certData, err := base64.StdEncoding.DecodeString(samlConfig.Certificate)
+		certData, err := base64.StdEncoding.DecodeString(authDomain.AuthDomainConfig().SAML.SamlCert)
 		if err != nil {
 			return certStore, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to read certificate: %s", err.Error())
 		}

frontend/jest.config.ts

@@ -56,10 +56,10 @@ const config: Config.InitialOptions = {
 	transformIgnorePatterns: [
 		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
 		// Pattern 1: allow .pnpm virtual store through (handled by pattern 2), plus root-level ESM packages.
-		'node_modules/(?!(\\.pnpm|react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
+		'node_modules/(?!(\\.pnpm|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
 		// Pattern 2: pnpm virtual store — ignore everything except ESM-only packages.
 		// pnpm encodes scoped packages as @scope+name@version, so match on scope prefix.
-		'node_modules/\\.pnpm/(?!(react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
+		'node_modules/\\.pnpm/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/jest.setup.ts

@@ -62,40 +62,6 @@ if (typeof window.ResizeObserver === 'undefined') {
 	(window as any).ResizeObserver = ResizeObserverMock;
 }
 
-if (typeof globalThis.DOMRect === 'undefined') {
-	(globalThis as any).DOMRect = class DOMRect {
-		x = 0;
-		y = 0;
-		width = 0;
-		height = 0;
-		top = 0;
-		right = 0;
-		bottom = 0;
-		left = 0;
-		constructor(x = 0, y = 0, width = 0, height = 0) {
-			this.x = x;
-			this.y = y;
-			this.width = width;
-			this.height = height;
-			this.top = y;
-			this.right = x + width;
-			this.bottom = y + height;
-			this.left = x;
-		}
-		toJSON(): any {
-			return { x: this.x, y: this.y, width: this.width, height: this.height };
-		}
-		static fromRect(rect?: {
-			x?: number;
-			y?: number;
-			width?: number;
-			height?: number;
-		}): DOMRect {
-			return new DOMRect(rect?.x, rect?.y, rect?.width, rect?.height);
-		}
-	};
-}
-
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/package.json

@@ -48,9 +48,9 @@
     "@monaco-editor/react": "^4.7.0",
     "@sentry/react": "10.57.0",
     "@sentry/vite-plugin": "5.3.0",
-    "@signozhq/design-tokens": "2.1.6",
+    "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.1.0",
+    "@signozhq/ui": "0.0.23",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -88,7 +88,6 @@
     "jest": "30.2.0",
     "js-base64": "^3.7.2",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "0.55.1",
     "motion": "12.4.13",
     "nuqs": "2.8.8",
     "overlayscrollbars": "^2.16.0",
@@ -197,7 +196,7 @@
     "oxfmt": "0.54.0",
     "oxlint": "1.69.0",
     "oxlint-tsgolint": "0.23.0",
-    "postcss": "8.5.26",
+    "postcss": "8.5.14",
     "postcss-scss": "4.0.9",
     "react-resizable": "3.0.4",
     "redux-mock-store": "1.5.4",

frontend/pnpm-workspace.yaml

@@ -13,16 +13,7 @@ overrides:
  '@babel/core@<=7.29.0': '>=7.29.6 <8'
  # via: jest > babel-plugin-istanbul > @istanbuljs/load-nyc-config@1.1.0 (js-yaml ^3.13.1)
  # remove: blocked — 1.1.0 is latest and still depends on js-yaml 3.x
- '@istanbuljs/load-nyc-config>js-yaml': '>=4.3.1 <5'
- # via: babel-plugin-istanbul > test-exclude@6 > minimatch@3.1.5 (^1.1.7); also glob@7
- # remove: blocked — babel-plugin-istanbul pins test-exclude@6, which pins minimatch@3
- brace-expansion@<1.1.18: '>=1.1.18 <2'
- # via: jest > glob@10 > minimatch@9.0.9 (^2.0.1); also minimatch@5.1.9 (^2.0.1)
- # remove: blocked — jest 30 resolves glob@10 > minimatch@9 internally
- 'brace-expansion@>=2.0.0 <2.1.4': '>=2.1.4 <3'
- # via: eslint-plugin-sonarjs@4.0.2 (minimatch ^10.2.4) > minimatch@10.2.5 (^5.0.5)
- # remove: blocked — minimatch@10.2.6 (latest) only widens to ^5.0.8, still vulnerable
- 'brace-expansion@>=5.0.0 <5.0.9': '>=5.0.9 <6'
+ '@istanbuljs/load-nyc-config>js-yaml': '>=4.2.0 <5'
  # via: msw@1.3.2 (devDep) > cookie ^0.4.2
  # remove: upgrade msw to >=2 (ships cookie ^1). Do NOT open the cap: cookie >=1 is
  # ESM-only and breaks msw under jest's CJS sandbox (kills every test suite)
@@ -36,26 +27,13 @@ overrides:
  # remove: blocked on rolldown-vite (7.3.1 is latest, still ^0.27.0);
  #         orval >=8.20.0 and ts-jest >=29.4.11 already fixed on their side
  esbuild@>=0.27.3 <0.28.1: '>=0.28.1 <0.29.0'
- # via: @commitlint/cli > @commitlint/config-validator > ajv@8 (fast-uri ^3.0.1)
- # remove: blocked — ajv@8 caps fast-uri at ^3, and only 3.1.5 carries the fix
- fast-uri@<3.1.5: '>=3.1.5 <4'
- # via: direct devDep sass@1.97.3 (immutable ^5.0.2)
- # remove: blocked — plain sass bumps stay within ^5, so the floor is what pulls 5.1.8
- immutable@<5.1.8: '>=5.1.8 <6'
  # via: react-use@17.5.1 (direct, js-cookie ^2.2.1); @grafana/data > react-use@17.6.0
  # remove: bump react-use to >=17.6.1 (js-cookie ^3); @grafana/data side blocked
  js-cookie@<=3.0.5: '>=3.0.7 <4'
  # via: @orval/core@8.9.1 (devDep, js-yaml 4.1.1 EXACT pin — not deletable);
  #      json-schema-to-typescript@15 > @apidevtools/json-schema-ref-parser (^4.1.0)
  # remove: upgrade orval to >=8.20.0 (drops js-yaml dependency entirely)
- 'js-yaml@>=4.0.0 <4.3.1': '>=4.3.1 <5'
- # via: typescript-plugin-css-modules@5.2.0 (less ^4.2.0) > less@4.4.0 (image-size ~0.5.0)
- # remove: bump typescript-plugin-css-modules once it floors less itself; image-size has
- #         no patched release at all, so dropping the dep is the only fix — less@4.5.0 did
- less@<4.5.0: '>=4.5.0 <5'
- # via: direct dep postcss (nanoid ^3.3.17)
- # remove: blocked — postcss 8.5.26 (latest) caps nanoid at ^3, fix landed in 3.3.18
- nanoid@<3.3.18: '>=3.3.18 <4'
+ js-yaml@>=4.0.0 <=4.1.1: '>=4.2.0 <5'
  # via: react-syntax-highlighter@15.5.0 (prismjs ^1.27.0 + refractor@3 ~1.27.0 tilde-pinned)
  # remove: bump react-syntax-highlighter to >=16.1.1 (prismjs ^1.30.0, refractor@5)
  prismjs@<1.30.0: '>=1.30.0 <2'

frontend/src/api/generated/services/ai-observability/index.ts

@@ -1,236 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'pnpm generate:api'
- * SigNoz
- */
-import { useQuery } from 'react-query';
-import type {
-	InvalidateOptions,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-
-import type {
-	GetAIObservabilityFieldsKeys200,
-	GetAIObservabilityFieldsKeysParams,
-	GetAIObservabilityFieldsValues200,
-	GetAIObservabilityFieldsValuesParams,
-	RenderErrorResponseDTO,
-} from '../sigNoz.schemas';
-
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type { ErrorType } from '../../../generatedAPIInstance';
-
-/**
- * This endpoint returns the field keys the AI observability explorer can filter on, including the computed per-trace aggregates
- * @summary Get AI observability field keys
- */
-export const getAIObservabilityFieldsKeys = (
-	params?: GetAIObservabilityFieldsKeysParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetAIObservabilityFieldsKeys200>({
-		url: `/api/v1/ai_observability/fields/keys`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getGetAIObservabilityFieldsKeysQueryKey = (
-	params?: GetAIObservabilityFieldsKeysParams,
-) => {
-	return [
-		`/api/v1/ai_observability/fields/keys`,
-		...(params ? [params] : []),
-	] as const;
-};
-
-export const getGetAIObservabilityFieldsKeysQueryOptions = <
-	TData = Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: GetAIObservabilityFieldsKeysParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetAIObservabilityFieldsKeysQueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>
-	> = ({ signal }) => getAIObservabilityFieldsKeys(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetAIObservabilityFieldsKeysQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>
->;
-export type GetAIObservabilityFieldsKeysQueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get AI observability field keys
- */
-
-export function useGetAIObservabilityFieldsKeys<
-	TData = Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: GetAIObservabilityFieldsKeysParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetAIObservabilityFieldsKeysQueryOptions(
-		params,
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get AI observability field keys
- */
-export const invalidateGetAIObservabilityFieldsKeys = async (
-	queryClient: QueryClient,
-	params?: GetAIObservabilityFieldsKeysParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetAIObservabilityFieldsKeysQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint returns the values the AI observability explorer can filter a field key on
- * @summary Get AI observability field values
- */
-export const getAIObservabilityFieldsValues = (
-	params?: GetAIObservabilityFieldsValuesParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetAIObservabilityFieldsValues200>({
-		url: `/api/v1/ai_observability/fields/values`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getGetAIObservabilityFieldsValuesQueryKey = (
-	params?: GetAIObservabilityFieldsValuesParams,
-) => {
-	return [
-		`/api/v1/ai_observability/fields/values`,
-		...(params ? [params] : []),
-	] as const;
-};
-
-export const getGetAIObservabilityFieldsValuesQueryOptions = <
-	TData = Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: GetAIObservabilityFieldsValuesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetAIObservabilityFieldsValuesQueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>
-	> = ({ signal }) => getAIObservabilityFieldsValues(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetAIObservabilityFieldsValuesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>
->;
-export type GetAIObservabilityFieldsValuesQueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get AI observability field values
- */
-
-export function useGetAIObservabilityFieldsValues<
-	TData = Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: GetAIObservabilityFieldsValuesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetAIObservabilityFieldsValuesQueryOptions(
-		params,
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get AI observability field values
- */
-export const invalidateGetAIObservabilityFieldsValues = async (
-	queryClient: QueryClient,
-	params?: GetAIObservabilityFieldsValuesParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetAIObservabilityFieldsValuesQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -38,14 +38,14 @@ import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
  */
 export const listAuthDomains = (signal?: AbortSignal) => {
 	return GeneratedAPIInstance<ListAuthDomains200>({
-		url: `/api/v2/auth_domains`,
+		url: `/api/v1/domains`,
 		method: 'GET',
 		signal,
 	});
 };
 
 export const getListAuthDomainsQueryKey = () => {
-	return [`/api/v2/auth_domains`] as const;
+	return [`/api/v1/domains`] as const;
 };
 
 export const getListAuthDomainsQueryOptions = <
@@ -125,7 +125,7 @@ export const createAuthDomain = (
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateAuthDomain201>({
-		url: `/api/v2/auth_domains`,
+		url: `/api/v1/domains`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
 		data: authtypesPostableAuthDomainDTO,
@@ -208,7 +208,7 @@ export const deleteAuthDomain = (
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
-		url: `/api/v2/auth_domains/${id}`,
+		url: `/api/v1/domains/${id}`,
 		method: 'DELETE',
 		signal,
 	});
@@ -287,7 +287,7 @@ export const getAuthDomain = (
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetAuthDomain200>({
-		url: `/api/v2/auth_domains/${id}`,
+		url: `/api/v1/domains/${id}`,
 		method: 'GET',
 		signal,
 	});
@@ -296,7 +296,7 @@ export const getAuthDomain = (
 export const getGetAuthDomainQueryKey = ({
 	id,
 }: GetAuthDomainPathParameters) => {
-	return [`/api/v2/auth_domains/${id}`] as const;
+	return [`/api/v1/domains/${id}`] as const;
 };
 
 export const getGetAuthDomainQueryOptions = <
@@ -389,7 +389,7 @@ export const updateAuthDomain = (
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
-		url: `/api/v2/auth_domains/${id}`,
+		url: `/api/v1/domains/${id}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
 		data: authtypesUpdatableAuthDomainDTO,

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

@@ -22,7 +22,10 @@ import type {
 	CreateServiceAccountKey201,
 	CreateServiceAccountKeyPathParameters,
 	CreateServiceAccountRole201,
+	CreateServiceAccountRoleDeprecated201,
+	CreateServiceAccountRoleDeprecatedPathParameters,
 	DeleteServiceAccountPathParameters,
+	DeleteServiceAccountRoleDeprecatedPathParameters,
 	DeleteServiceAccountRolePathParameters,
 	GetMyServiceAccount200,
 	GetServiceAccount200,
@@ -36,6 +39,7 @@ import type {
 	ListServiceAccounts200,
 	RenderErrorResponseDTO,
 	RevokeServiceAccountKeyPathParameters,
+	ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
 	ServiceaccounttypesPostableFactorAPIKeyDTO,
 	ServiceaccounttypesPostableServiceAccountDTO,
 	ServiceaccounttypesPostableServiceAccountRoleDTO,
@@ -1249,6 +1253,194 @@ export const invalidateGetServiceAccountRoles = async (
 	return queryClient;
 };
 
+/**
+ * This endpoint assigns a role to a service account
+ * @deprecated
+ * @summary Create service account role
+ */
+export const createServiceAccountRoleDeprecated = (
+	{ id }: CreateServiceAccountRoleDeprecatedPathParameters,
+	serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateServiceAccountRoleDeprecated201>({
+		url: `/api/v1/service_accounts/${id}/roles`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
+		signal,
+	});
+};
+
+export const getCreateServiceAccountRoleDeprecatedMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
+		TError,
+		{
+			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
+			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
+	TError,
+	{
+		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
+		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['createServiceAccountRoleDeprecated'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
+		{
+			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
+			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return createServiceAccountRoleDeprecated(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateServiceAccountRoleDeprecatedMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>
+>;
+export type CreateServiceAccountRoleDeprecatedMutationBody =
+	| BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>
+	| undefined;
+export type CreateServiceAccountRoleDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Create service account role
+ */
+export const useCreateServiceAccountRoleDeprecated = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
+		TError,
+		{
+			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
+			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
+	TError,
+	{
+		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
+		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
+	},
+	TContext
+> => {
+	return useMutation(
+		getCreateServiceAccountRoleDeprecatedMutationOptions(options),
+	);
+};
+/**
+ * This endpoint revokes a role from service account
+ * @deprecated
+ * @summary Delete service account role
+ */
+export const deleteServiceAccountRoleDeprecated = (
+	{ id, rid }: DeleteServiceAccountRoleDeprecatedPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/service_accounts/${id}/roles/${rid}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteServiceAccountRoleDeprecatedMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
+		TError,
+		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
+	TError,
+	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteServiceAccountRoleDeprecated'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
+		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteServiceAccountRoleDeprecated(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteServiceAccountRoleDeprecatedMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>
+>;
+
+export type DeleteServiceAccountRoleDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Delete service account role
+ */
+export const useDeleteServiceAccountRoleDeprecated = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
+		TError,
+		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
+	TError,
+	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
+	TContext
+> => {
+	return useMutation(
+		getDeleteServiceAccountRoleDeprecatedMutationOptions(options),
+	);
+};
 /**
  * This endpoint gets my service account
  * @summary Gets my service account

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

@@ -1861,19 +1861,8 @@ export interface AuthtypesAttributeMappingDTO {
 	role?: string;
 }
 
-export enum AuthtypesAuthDomainConfigSAMLDTOKind {
-	saml = 'saml',
-}
 export interface AuthtypesSamlConfigDTO {
 	attributeMapping?: AuthtypesAttributeMappingDTO;
-	/**
-	 * @type string
-	 */
-	certificate: string;
-	/**
-	 * @type string
-	 */
-	entityId: string;
 	/**
 	 * @type boolean
 	 */
@@ -1881,21 +1870,17 @@ export interface AuthtypesSamlConfigDTO {
 	/**
 	 * @type string
 	 */
-	location: string;
-}
-
-export interface AuthtypesAuthDomainConfigSAMLDTO {
+	samlCert?: string;
 	/**
 	 * @type string
-	 * @enum saml
 	 */
-	kind: AuthtypesAuthDomainConfigSAMLDTOKind;
-	spec: AuthtypesSamlConfigDTO;
+	samlEntity?: string;
+	/**
+	 * @type string
+	 */
+	samlIdp?: string;
 }
 
-export enum AuthtypesAuthDomainConfigGoogleDTOKind {
-	google = 'google',
-}
 export type AuthtypesGoogleConfigDTODomainToAdminEmail = {
 	[key: string]: string;
 };
@@ -1908,12 +1893,11 @@ export interface AuthtypesGoogleConfigDTO {
 	/**
 	 * @type string
 	 */
-	clientId: string;
+	clientId?: string;
 	/**
 	 * @type string
-	 * @format password
 	 */
-	clientSecret: string;
+	clientSecret?: string;
 	/**
 	 * @type object
 	 */
@@ -1932,34 +1916,24 @@ export interface AuthtypesGoogleConfigDTO {
 	insecureSkipEmailVerified?: boolean;
 	/**
 	 * @type string
-	 * @format password
+	 */
+	redirectURI?: string;
+	/**
+	 * @type string
 	 */
 	serviceAccountJson?: string;
 }
 
-export interface AuthtypesAuthDomainConfigGoogleDTO {
-	/**
-	 * @type string
-	 * @enum google
-	 */
-	kind: AuthtypesAuthDomainConfigGoogleDTOKind;
-	spec: AuthtypesGoogleConfigDTO;
-}
-
-export enum AuthtypesAuthDomainConfigOIDCDTOKind {
-	oidc = 'oidc',
-}
 export interface AuthtypesOIDCConfigDTO {
 	claimMapping?: AuthtypesAttributeMappingDTO;
 	/**
 	 * @type string
 	 */
-	clientId: string;
+	clientId?: string;
 	/**
 	 * @type string
-	 * @format password
 	 */
-	clientSecret: string;
+	clientSecret?: string;
 	/**
 	 * @type boolean
 	 */
@@ -1971,33 +1945,79 @@ export interface AuthtypesOIDCConfigDTO {
 	/**
 	 * @type string
 	 */
-	issuer: string;
+	issuer?: string;
 	/**
 	 * @type string
 	 */
 	issuerAlias?: string;
 }
 
-export interface AuthtypesAuthDomainConfigOIDCDTO {
+export type AuthtypesRoleMappingDTOGroupMappingsAnyOf = {
+	[key: string]: string;
+};
+
+/**
+ * @nullable
+ */
+export type AuthtypesRoleMappingDTOGroupMappings =
+	AuthtypesRoleMappingDTOGroupMappingsAnyOf | null;
+
+export interface AuthtypesRoleMappingDTO {
 	/**
 	 * @type string
-	 * @enum oidc
 	 */
-	kind: AuthtypesAuthDomainConfigOIDCDTOKind;
-	spec: AuthtypesOIDCConfigDTO;
+	defaultRole?: string;
+	/**
+	 * @type object,null
+	 */
+	groupMappings?: AuthtypesRoleMappingDTOGroupMappings;
+	/**
+	 * @type boolean
+	 */
+	useRoleAttribute?: boolean;
 }
 
-export type AuthtypesAuthDomainConfigDTO =
-	| AuthtypesAuthDomainConfigSAMLDTO
-	| AuthtypesAuthDomainConfigGoogleDTO
-	| AuthtypesAuthDomainConfigOIDCDTO;
-
 export enum AuthtypesAuthNProviderDTO {
-	google = 'google',
+	google_auth = 'google_auth',
 	saml = 'saml',
 	email_password = 'email_password',
 	oidc = 'oidc',
 }
+export type AuthtypesAuthDomainConfigDTO =
+	| (AuthtypesSamlConfigDTO & {
+			googleAuthConfig?: AuthtypesGoogleConfigDTO;
+			oidcConfig?: AuthtypesOIDCConfigDTO;
+			roleMapping?: AuthtypesRoleMappingDTO;
+			samlConfig?: AuthtypesSamlConfigDTO;
+			/**
+			 * @type boolean
+			 */
+			ssoEnabled?: boolean;
+			ssoType?: AuthtypesAuthNProviderDTO;
+	  })
+	| (AuthtypesGoogleConfigDTO & {
+			googleAuthConfig?: AuthtypesGoogleConfigDTO;
+			oidcConfig?: AuthtypesOIDCConfigDTO;
+			roleMapping?: AuthtypesRoleMappingDTO;
+			samlConfig?: AuthtypesSamlConfigDTO;
+			/**
+			 * @type boolean
+			 */
+			ssoEnabled?: boolean;
+			ssoType?: AuthtypesAuthNProviderDTO;
+	  })
+	| (AuthtypesOIDCConfigDTO & {
+			googleAuthConfig?: AuthtypesGoogleConfigDTO;
+			oidcConfig?: AuthtypesOIDCConfigDTO;
+			roleMapping?: AuthtypesRoleMappingDTO;
+			samlConfig?: AuthtypesSamlConfigDTO;
+			/**
+			 * @type boolean
+			 */
+			ssoEnabled?: boolean;
+			ssoType?: AuthtypesAuthNProviderDTO;
+	  });
+
 export interface AuthtypesAuthNProviderInfoDTO {
 	/**
 	 * @type string,null
@@ -2035,31 +2055,6 @@ export interface AuthtypesDeprecatedPostableUserRoleDTO {
 	id: string;
 }
 
-export type AuthtypesRoleMappingDTOGroupMappingsAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type AuthtypesRoleMappingDTOGroupMappings =
-	AuthtypesRoleMappingDTOGroupMappingsAnyOf | null;
-
-export interface AuthtypesRoleMappingDTO {
-	/**
-	 * @type string
-	 */
-	defaultRole?: string;
-	/**
-	 * @type object,null
-	 */
-	groupMappings?: AuthtypesRoleMappingDTOGroupMappings;
-	/**
-	 * @type boolean
-	 */
-	useRoleAttribute?: boolean;
-}
-
 export interface AuthtypesGettableAuthDomainDTO {
 	authNProviderInfo?: AuthtypesAuthNProviderInfoDTO;
 	config?: AuthtypesAuthDomainConfigDTO;
@@ -2068,10 +2063,6 @@ export interface AuthtypesGettableAuthDomainDTO {
 	 * @format date-time
 	 */
 	createdAt?: string;
-	/**
-	 * @type boolean
-	 */
-	enabled?: boolean;
 	/**
 	 * @type string
 	 */
@@ -2084,7 +2075,6 @@ export interface AuthtypesGettableAuthDomainDTO {
 	 * @type string
 	 */
 	orgId?: string;
-	roleMapping?: AuthtypesRoleMappingDTO;
 	/**
 	 * @type string
 	 * @format date-time
@@ -2281,16 +2271,11 @@ export interface AuthtypesOrgSessionContextDTO {
 }
 
 export interface AuthtypesPostableAuthDomainDTO {
-	config: AuthtypesAuthDomainConfigDTO;
-	/**
-	 * @type boolean
-	 */
-	enabled?: boolean;
+	config?: AuthtypesAuthDomainConfigDTO;
 	/**
 	 * @type string
 	 */
-	name: string;
-	roleMapping?: AuthtypesRoleMappingDTO;
+	name?: string;
 }
 
 export interface AuthtypesPostableEmailPasswordSessionDTO {
@@ -2423,12 +2408,7 @@ export interface AuthtypesTransactionDTO {
 }
 
 export interface AuthtypesUpdatableAuthDomainDTO {
-	config: AuthtypesAuthDomainConfigDTO;
-	/**
-	 * @type boolean
-	 */
-	enabled?: boolean;
-	roleMapping?: AuthtypesRoleMappingDTO;
+	config?: AuthtypesAuthDomainConfigDTO;
 }
 
 export interface AuthtypesUpdatableRoleDTO {
@@ -3490,7 +3470,6 @@ export enum TelemetrytypesFieldContextDTO {
 	metric = 'metric',
 	log = 'log',
 	span = 'span',
-	trace = 'trace',
 	resource = 'resource',
 	attribute = 'attribute',
 	body = 'body',
@@ -9092,6 +9071,13 @@ export interface SavedviewtypesUpdatableSavedViewDTO {
 	spec: SavedviewtypesSavedViewSpecDTO;
 }
 
+export interface ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO {
+	/**
+	 * @type string
+	 */
+	id: string;
+}
+
 export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	/**
 	 * @type string
@@ -10169,93 +10155,6 @@ export interface ZeustypesPostableProfileDTO {
 	where_did_you_discover_signoz: string;
 }
 
-export type GetAIObservabilityFieldsKeysParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	searchText?: string;
-	/**
-	 * @description undefined
-	 */
-	fieldContext?: TelemetrytypesFieldContextDTO;
-	/**
-	 * @description undefined
-	 */
-	fieldDataType?: TelemetrytypesFieldDataTypeDTO;
-	/**
-	 * @type integer
-	 * @format int64
-	 * @description undefined
-	 */
-	startUnixMilli?: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 * @description undefined
-	 */
-	endUnixMilli?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-};
-
-export type GetAIObservabilityFieldsKeys200 = {
-	data: TelemetrytypesGettableFieldKeysDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetAIObservabilityFieldsValuesParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	searchText?: string;
-	/**
-	 * @description undefined
-	 */
-	fieldContext?: TelemetrytypesFieldContextDTO;
-	/**
-	 * @description undefined
-	 */
-	fieldDataType?: TelemetrytypesFieldDataTypeDTO;
-	/**
-	 * @type integer
-	 * @format int64
-	 * @description undefined
-	 */
-	startUnixMilli?: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 * @description undefined
-	 */
-	endUnixMilli?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	name?: string;
-};
-
-export type GetAIObservabilityFieldsValues200 = {
-	data: TelemetrytypesGettableFieldValuesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetAlerts200 = {
 	/**
 	 * @type array
@@ -10518,6 +10417,42 @@ export type CreatePublicDashboard201 = {
 export type UpdatePublicDashboardPathParameters = {
 	id: string;
 };
+export type ListAuthDomains200 = {
+	/**
+	 * @type array
+	 */
+	data: AuthtypesGettableAuthDomainDTO[];
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type CreateAuthDomain201 = {
+	data: TypesIdentifiableDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteAuthDomainPathParameters = {
+	id: string;
+};
+export type GetAuthDomainPathParameters = {
+	id: string;
+};
+export type GetAuthDomain200 = {
+	data: AuthtypesGettableAuthDomainDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UpdateAuthDomainPathParameters = {
+	id: string;
+};
 export type ListDowntimeSchedulesParams = {
 	/**
 	 * @type boolean,null
@@ -11013,6 +10948,21 @@ export type GetServiceAccountRoles200 = {
 	status: string;
 };
 
+export type CreateServiceAccountRoleDeprecatedPathParameters = {
+	id: string;
+};
+export type CreateServiceAccountRoleDeprecated201 = {
+	data: TypesIdentifiableDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteServiceAccountRoleDeprecatedPathParameters = {
+	id: string;
+	rid: string;
+};
 export type GetMyServiceAccount200 = {
 	data: ServiceaccounttypesServiceAccountWithRolesDTO;
 	/**
@@ -11138,42 +11088,6 @@ export type GetUserPreference200 = {
 export type UpdateUserPreferencePathParameters = {
 	name: string;
 };
-export type ListAuthDomains200 = {
-	/**
-	 * @type array
-	 */
-	data: AuthtypesGettableAuthDomainDTO[];
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateAuthDomain201 = {
-	data: TypesIdentifiableDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteAuthDomainPathParameters = {
-	id: string;
-};
-export type GetAuthDomainPathParameters = {
-	id: string;
-};
-export type GetAuthDomain200 = {
-	data: AuthtypesGettableAuthDomainDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateAuthDomainPathParameters = {
-	id: string;
-};
 export type ListDashboardViews200 = {
 	data: DashboardtypesListableDashboardViewDTO;
 	/**

frontend/src/assets/Logos/azure.svg

@@ -1,3 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#0078D4" d="M22.379 23.343a1.62 1.62 0 0 0 1.536-2.14v.002L17.35 1.76A1.62 1.62 0 0 0 15.816.657H8.184A1.62 1.62 0 0 0 6.65 1.76L.086 21.204a1.62 1.62 0 0 0 1.536 2.139h4.741a1.62 1.62 0 0 0 1.535-1.103l.977-2.892 4.947 3.675c.28.208.618.32.966.32m-3.084-12.531 3.624 10.739a.54.54 0 0 1-.51.713v-.001h-.03a.54.54 0 0 1-.322-.106l-9.287-6.9h4.853m6.313 7.006c.116-.326.13-.694.007-1.058L9.79 1.76a1.722 1.722 0 0 0-.007-.02h6.034a.54.54 0 0 1 .512.366l6.562 19.445a.54.54 0 0 1-.338.684"/>
-</svg>

frontend/src/assets/Logos/dify.svg

@@ -1,5 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-	<title>Dify</title>
-	<path d="M7.043 6.487c1.635 0 2.241-1.003 2.241-2.243S8.681 2 7.044 2C5.405 2 4.801 3.003 4.801 4.244c0 1.24.604 2.243 2.241 2.243z" fill="#03F" />
-	<path d="M14.883 6.97v1.443h-3.679v3.203h3.68v8.012H8.801V8.41h-8v3.203h4.48v8.012H0v3.203h24v-3.203h-5.6v-8.012H24V8.41h-5.6V5.206H24V2.003h-4.161a4.97 4.97 0 00-4.961 4.967h.005z" fill="#03F" />
-</svg>

frontend/src/assets/Logos/from-log-file.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 115.28 122.88"><path d="M25.38 57h64.88V37.34H69.59c-2.17 0-5.19-1.17-6.62-2.6s-2.3-4.01-2.3-6.17V7.64H8.15c-.18 0-.32.09-.41.18-.15.1-.19.23-.19.42v106.45c0 .14.09.32.18.41.09.14.28.18.41.18h81.51c.18 0 .17-.09.27-.18.14-.09.33-.28.33-.41v-11.16H25.38c-4.14 0-7.56-3.4-7.56-7.56V64.55c0-4.15 3.4-7.55 7.56-7.55m4.11 11.38h7.43v18.15h11.63v5.92H29.49zm20.4 12.05c0-3.93 1.09-6.99 3.28-9.17 2.19-2.19 5.24-3.28 9.15-3.28 4.01 0 7.09 1.08 9.26 3.22 2.17 2.15 3.25 5.16 3.25 9.04 0 2.81-.47 5.11-1.42 6.91q-1.425 2.7-4.11 4.2t-6.69 1.5c-2.71 0-4.96-.43-6.74-1.29-1.78-.87-3.22-2.23-4.32-4.11-1.11-1.87-1.66-4.21-1.66-7.02m7.42.01c0 2.43.45 4.17 1.36 5.23s2.14 1.59 3.7 1.59c1.6 0 2.84-.52 3.71-1.56.88-1.04 1.32-2.9 1.32-5.6 0-2.26-.46-3.92-1.37-4.96-.92-1.05-2.16-1.57-3.73-1.57-1.5 0-2.71.53-3.62 1.59-.91 1.08-1.37 2.83-1.37 5.28m33.11 3.3v-5.01h11.49v10.23c-2.2 1.5-4.15 2.53-5.83 3.07-1.69.54-3.7.81-6.02.81-2.86 0-5.19-.49-6.99-1.46s-3.19-2.42-4.18-4.35c-.99-1.92-1.48-4.13-1.48-6.63 0-2.63.54-4.91 1.62-6.85s2.67-3.41 4.76-4.42c1.63-.78 3.83-1.17 6.58-1.17 2.66 0 4.64.24 5.96.72s2.41 1.23 3.28 2.24 1.52 2.3 1.96 3.85l-7.16 1.29c-.3-.91-.8-1.61-1.5-2.09-.71-.49-1.6-.73-2.7-.73-1.62 0-2.92.57-3.89 1.7s-1.45 2.92-1.45 5.37c0 2.6.49 4.46 1.47 5.57.97 1.11 2.34 1.68 4.09 1.68q1.245 0 2.37-.36c.75-.24 1.61-.65 2.59-1.22v-2.25h-4.97zM97.79 57h9.93c4.16 0 7.56 3.41 7.56 7.56v31.42c0 4.15-3.41 7.56-7.56 7.56h-9.93v13.55c0 1.61-.65 3.04-1.7 4.1a5.74 5.74 0 0 1-4.1 1.7H5.81a5.74 5.74 0 0 1-4.1-1.7 5.74 5.74 0 0 1-1.7-4.1V5.85c0-1.61.65-3.04 1.7-4.1a5.8 5.8 0 0 1 4.1-1.7h58.72c.13-.05.27-.05.41-.05.64 0 1.29.28 1.75.69h.09c.09.05.14.09.23.18L97 31.23c.51.51.88 1.2.88 1.98 0 .23-.05.41-.09.65zM67.52 27.97V8.94l21.43 21.7H70.19c-.74 0-1.38-.32-1.89-.78-.46-.46-.78-1.15-.78-1.89" style="fill:#D1D5DB;fill-rule:evenodd;clip-rule:evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 115.28 122.88"><path d="M25.38 57h64.88V37.34H69.59c-2.17 0-5.19-1.17-6.62-2.6s-2.3-4.01-2.3-6.17V7.64H8.15c-.18 0-.32.09-.41.18-.15.1-.19.23-.19.42v106.45c0 .14.09.32.18.41.09.14.28.18.41.18h81.51c.18 0 .17-.09.27-.18.14-.09.33-.28.33-.41v-11.16H25.38c-4.14 0-7.56-3.4-7.56-7.56V64.55c0-4.15 3.4-7.55 7.56-7.55m4.11 11.38h7.43v18.15h11.63v5.92H29.49zm20.4 12.05c0-3.93 1.09-6.99 3.28-9.17 2.19-2.19 5.24-3.28 9.15-3.28 4.01 0 7.09 1.08 9.26 3.22 2.17 2.15 3.25 5.16 3.25 9.04 0 2.81-.47 5.11-1.42 6.91q-1.425 2.7-4.11 4.2t-6.69 1.5c-2.71 0-4.96-.43-6.74-1.29-1.78-.87-3.22-2.23-4.32-4.11-1.11-1.87-1.66-4.21-1.66-7.02m7.42.01c0 2.43.45 4.17 1.36 5.23s2.14 1.59 3.7 1.59c1.6 0 2.84-.52 3.71-1.56.88-1.04 1.32-2.9 1.32-5.6 0-2.26-.46-3.92-1.37-4.96-.92-1.05-2.16-1.57-3.73-1.57-1.5 0-2.71.53-3.62 1.59-.91 1.08-1.37 2.83-1.37 5.28m33.11 3.3v-5.01h11.49v10.23c-2.2 1.5-4.15 2.53-5.83 3.07-1.69.54-3.7.81-6.02.81-2.86 0-5.19-.49-6.99-1.46s-3.19-2.42-4.18-4.35c-.99-1.92-1.48-4.13-1.48-6.63 0-2.63.54-4.91 1.62-6.85s2.67-3.41 4.76-4.42c1.63-.78 3.83-1.17 6.58-1.17 2.66 0 4.64.24 5.96.72s2.41 1.23 3.28 2.24 1.52 2.3 1.96 3.85l-7.16 1.29c-.3-.91-.8-1.61-1.5-2.09-.71-.49-1.6-.73-2.7-.73-1.62 0-2.92.57-3.89 1.7s-1.45 2.92-1.45 5.37c0 2.6.49 4.46 1.47 5.57.97 1.11 2.34 1.68 4.09 1.68q1.245 0 2.37-.36c.75-.24 1.61-.65 2.59-1.22v-2.25h-4.97zM97.79 57h9.93c4.16 0 7.56 3.41 7.56 7.56v31.42c0 4.15-3.41 7.56-7.56 7.56h-9.93v13.55c0 1.61-.65 3.04-1.7 4.1a5.74 5.74 0 0 1-4.1 1.7H5.81a5.74 5.74 0 0 1-4.1-1.7 5.74 5.74 0 0 1-1.7-4.1V5.85c0-1.61.65-3.04 1.7-4.1a5.8 5.8 0 0 1 4.1-1.7h58.72c.13-.05.27-.05.41-.05.64 0 1.29.28 1.75.69h.09c.09.05.14.09.23.18L97 31.23c.51.51.88 1.2.88 1.98 0 .23-.05.41-.09.65zM67.52 27.97V8.94l21.43 21.7H70.19c-.74 0-1.38-.32-1.89-.78-.46-.46-.78-1.15-.78-1.89" style="fill-rule:evenodd;clip-rule:evenodd"/></svg>

frontend/src/assets/Logos/github-copilot.svg

@@ -1,3 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#9CA3AF" d="M23.922 16.997C23.061 18.492 18.063 22.02 12 22.02 5.937 22.02.939 18.492.078 16.997A.641.641 0 0 1 0 16.741v-2.869a.883.883 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.098 10.098 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952C7.255 2.937 9.248 1.98 11.978 1.98c2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.841.841 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256Zm-11.75-5.992h-.344a4.359 4.359 0 0 1-.355.508c-.77.947-1.918 1.492-3.508 1.492-1.725 0-2.989-.359-3.782-1.259a2.137 2.137 0 0 1-.085-.104L4 11.746v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.359 4.359 0 0 1-.355-.508Zm2.328 3.25c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm-5 0c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm3.313-6.185c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"/>
-</svg>

frontend/src/assets/Logos/kong.svg

@@ -1,24 +0,0 @@
-<svg viewBox="0 0 44.8 40" xmlns="http://www.w3.org/2000/svg">
-	<defs>
-		<linearGradient id="kong-a" x1="38.204" x2="8.732" y1="18.417" y2="48.543" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#11A06B" />
-			<stop offset="1" stop-color="#286FEB" />
-		</linearGradient>
-		<linearGradient id="kong-b" x1="38.107" x2="8.635" y1="18.322" y2="48.448" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#11A06B" />
-			<stop offset="1" stop-color="#286FEB" />
-		</linearGradient>
-		<linearGradient id="kong-c" x1="29.439" x2="-0.033" y1="9.842" y2="39.968" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#11A06B" />
-			<stop offset="1" stop-color="#286FEB" />
-		</linearGradient>
-		<linearGradient id="kong-d" x1="30.291" x2="0.819" y1="10.676" y2="40.801" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#11A06B" />
-			<stop offset="1" stop-color="#286FEB" />
-		</linearGradient>
-	</defs>
-	<path d="m14.7 32.9-1.1 1.4 2.5 3.9-.3 1.8h10.6l.7-1.8-4.2-5.3z" fill="url(#kong-a)" />
-	<path d="M20.5 9.4 16.7 16l18.6 22-.5 2h8.5l1.5-7.1L24.9 9.4z" fill="url(#kong-b)" />
-	<path d="m23 4.4-1.8 3.3h4.5l7.7 9.2 4.6-3.8v-2.4l-1.6-2.2 1.2-1.2L28.4 0z" fill="url(#kong-c)" />
-	<path d="M9.1 22.9H6.6L0 31.3V40h7.1l1.3-1.6 5.5-7.1h7.9l2.4-3.7-8.6-10.2z" fill="url(#kong-d)" />
-</svg>

frontend/src/assets/Logos/neon.svg

@@ -1,3 +0,0 @@
-<svg fill="none" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-	<path d="M63 0.018v63.535L38.418 42.25v21.303H0V0l63 .018ZM7.723 55.839h22.972V25.323l24.583 21.725V7.729L7.723 7.716v48.123Z" fill="#37C38F" />
-</svg>

frontend/src/components/ChangelogModal/__test__/ChangelogRenderer.test.tsx

@@ -8,19 +8,12 @@ import {
 
 import ChangelogRenderer from '../components/ChangelogRenderer';
 
-// Mock react-markdown to render children as plain text and a sample
-// anchor through the `components.a` override
+// Mock react-markdown to just render children as plain text
 jest.mock(
 	'react-markdown',
 	() =>
-		function ReactMarkdown({ children, components }: any) {
-			const Anchor = components?.a;
-			return (
-				<div>
-					{children}
-					{Anchor && <Anchor href="https://signoz.io/docs">docs</Anchor>}
-				</div>
-			);
+		function ReactMarkdown({ children }: any) {
+			return <div>{children}</div>;
 		},
 );
 
@@ -69,14 +62,4 @@ describe('ChangelogRenderer', () => {
 		expect(screen.getByAltText('Media')).toBeInTheDocument();
 		expect(screen.getByText('Description for feature 1')).toBeInTheDocument();
 	});
-
-	it('renders markdown links that open in a new tab', () => {
-		render(<ChangelogRenderer changelog={mockChangelog} />);
-		const links = screen.getAllByRole('link', { name: 'docs' });
-		expect(links.length).toBeGreaterThan(0);
-		links.forEach((link) => {
-			expect(link).toHaveAttribute('target', '_blank');
-			expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-		});
-	});
 });

frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx

@@ -13,19 +13,6 @@ interface Props {
 	changelog: ChangelogSchema;
 }
 
-interface LinkProps {
-	href?: string;
-	children?: React.ReactNode;
-}
-
-function Link({ href, children }: LinkProps): JSX.Element {
-	return (
-		<a href={href} target="_blank" rel="noopener noreferrer">
-			{children}
-		</a>
-	);
-}
-
 function renderMedia(media: Media): JSX.Element | null {
 	if (SupportedImageTypes.includes(media.ext)) {
 		return (
@@ -75,9 +62,7 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
 							<div key={feature.id}>
 								<div className="changelog-renderer-section-title">{feature.title}</div>
 								{feature.media && renderMedia(feature.media)}
-								<ReactMarkdown components={{ a: Link }}>
-									{feature.description}
-								</ReactMarkdown>
+								<ReactMarkdown>{feature.description}</ReactMarkdown>
 							</div>
 						))}
 					</div>
@@ -86,9 +71,7 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
 					<div className="changelog-renderer-bug-fixes">
 						<div className="changelog-renderer-section-title">Bug Fixes</div>
 						{changelog.bug_fixes && (
-							<ReactMarkdown components={{ a: Link }}>
-								{changelog.bug_fixes}
-							</ReactMarkdown>
+							<ReactMarkdown>{changelog.bug_fixes}</ReactMarkdown>
 						)}
 					</div>
 				)}
@@ -96,9 +79,7 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
 					<div className="changelog-renderer-maintenance">
 						<div className="changelog-renderer-section-title">Maintenance</div>
 						{changelog.maintenance && (
-							<ReactMarkdown components={{ a: Link }}>
-								{changelog.maintenance}
-							</ReactMarkdown>
+							<ReactMarkdown>{changelog.maintenance}</ReactMarkdown>
 						)}
 					</div>
 				)}

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.styles.scss

@@ -0,0 +1,5 @@
+.client-side-qb-search {
+	.ant-select-selection-search {
+		width: max-content !important;
+	}
+}

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -0,0 +1,661 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+
+import {
+	KeyboardEvent,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { Select, Tooltip } from 'antd';
+import {
+	OPERATORS,
+	QUERY_BUILDER_OPERATORS_BY_TYPES,
+	QUERY_BUILDER_SEARCH_VALUES,
+} from 'constants/queryBuilder';
+import { CustomTagProps } from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
+import { PLACEHOLDER } from 'container/QueryBuilder/filters/QueryBuilderSearch/constant';
+import { TypographyText } from 'container/QueryBuilder/filters/QueryBuilderSearch/style';
+import {
+	checkCommaInValue,
+	getOperatorFromValue,
+	getOperatorValue,
+	getTagToken,
+	isInNInOperator,
+} from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import {
+	DropdownState,
+	ITag,
+	Option,
+} from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
+import Suggestions from 'container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions';
+import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
+import { validationMapper } from 'hooks/queryBuilder/useIsValidTag';
+import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
+import { ChevronDown, ChevronUp } from '@signozhq/icons';
+import type { BaseSelectRef } from 'rc-select';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	IBuilderQuery,
+	TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { popupContainer } from 'utils/selectPopupContainer';
+import { v4 as uuid } from 'uuid';
+
+import './ClientSideQBSearch.styles.scss';
+import { Badge } from '@signozhq/ui/badge';
+
+export interface AttributeKey {
+	key: string;
+}
+
+export interface AttributeValuesMap {
+	[key: string]: AttributeValue;
+}
+
+interface ClientSideQBSearchProps {
+	filters: TagFilter;
+	onChange: (value: TagFilter) => void;
+	whereClauseConfig?: WhereClauseConfig;
+	placeholder?: string;
+	className?: string;
+	suffixIcon?: React.ReactNode;
+	attributeValuesMap?: AttributeValuesMap;
+	attributeKeys: AttributeKey[];
+}
+
+interface AttributeValue {
+	stringAttributeValues: string[] | [];
+	numberAttributeValues: number[] | [];
+	boolAttributeValues: boolean[] | [];
+}
+
+function ClientSideQBSearch(
+	props: ClientSideQBSearchProps,
+): React.ReactElement {
+	const {
+		onChange,
+		placeholder,
+		className,
+		suffixIcon,
+		whereClauseConfig,
+		attributeValuesMap,
+		attributeKeys,
+		filters,
+	} = props;
+
+	const isDarkMode = useIsDarkMode();
+
+	const selectRef = useRef<BaseSelectRef>(null);
+
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+
+	// create the tags from the initial query here, this should only be computed on the first load as post that tags and query will be always in sync.
+	const [tags, setTags] = useState<ITag[]>(filters.items as ITag[]);
+
+	// this will maintain the current state of in process filter item
+	const [currentFilterItem, setCurrentFilterItem] = useState<ITag | undefined>();
+
+	const [currentState, setCurrentState] = useState<DropdownState>(
+		DropdownState.ATTRIBUTE_KEY,
+	);
+
+	// to maintain the current running state until the tokenization happens for the tag
+	const [searchValue, setSearchValue] = useState<string>('');
+
+	const [dropdownOptions, setDropdownOptions] = useState<Option[]>([]);
+
+	const attributeValues = useMemo(() => {
+		if (currentFilterItem?.key?.key) {
+			return attributeValuesMap?.[currentFilterItem.key.key];
+		}
+		return {
+			stringAttributeValues: [],
+			numberAttributeValues: [],
+			boolAttributeValues: [],
+		};
+	}, [attributeValuesMap, currentFilterItem?.key?.key]);
+
+	const handleDropdownSelect = useCallback(
+		(value: string) => {
+			let parsedValue: BaseAutocompleteData | string;
+
+			try {
+				parsedValue = JSON.parse(value);
+			} catch {
+				parsedValue = value;
+			}
+			if (currentState === DropdownState.ATTRIBUTE_KEY) {
+				setCurrentFilterItem((prev) => ({
+					...prev,
+					key: parsedValue as BaseAutocompleteData,
+					op: '',
+					value: '',
+				}));
+				setCurrentState(DropdownState.OPERATOR);
+				setSearchValue((parsedValue as BaseAutocompleteData)?.key);
+			} else if (currentState === DropdownState.OPERATOR) {
+				if (value === OPERATORS.EXISTS || value === OPERATORS.NOT_EXISTS) {
+					setTags((prev) => [
+						...prev,
+						{
+							key: currentFilterItem?.key,
+							op: value,
+							value: '',
+						} as ITag,
+					]);
+					setCurrentFilterItem(undefined);
+					setSearchValue('');
+					setCurrentState(DropdownState.ATTRIBUTE_KEY);
+				} else {
+					setCurrentFilterItem((prev) => ({
+						key: prev?.key as BaseAutocompleteData,
+						op: value as string,
+						value: '',
+					}));
+					setCurrentState(DropdownState.ATTRIBUTE_VALUE);
+					setSearchValue(`${currentFilterItem?.key?.key} ${value}`);
+				}
+			} else if (currentState === DropdownState.ATTRIBUTE_VALUE) {
+				const operatorType =
+					operatorTypeMapper[currentFilterItem?.op || ''] || 'NOT_VALID';
+				const isMulti = operatorType === QUERY_BUILDER_SEARCH_VALUES.MULTIPLY;
+
+				if (isMulti) {
+					const { tagKey, tagOperator, tagValue } = getTagToken(searchValue);
+					// this condition takes care of adding the IN/NIN multi values when pressed enter on an already existing value.
+					// not the best interaction but in sync with what we have today!
+					if (tagValue.includes(String(value))) {
+						setSearchValue('');
+						setCurrentState(DropdownState.ATTRIBUTE_KEY);
+						setCurrentFilterItem(undefined);
+						setTags((prev) => [
+							...prev,
+							{
+								key: currentFilterItem?.key,
+								op: currentFilterItem?.op,
+								value: tagValue,
+							} as ITag,
+						]);
+						return;
+					}
+					// this is for adding subsequent comma seperated values
+					const newSearch = [...tagValue];
+					newSearch[newSearch.length === 0 ? 0 : newSearch.length - 1] = value;
+					const newSearchValue = newSearch.join(',');
+					setSearchValue(`${tagKey} ${tagOperator} ${newSearchValue},`);
+				} else {
+					setSearchValue('');
+					setCurrentState(DropdownState.ATTRIBUTE_KEY);
+					setCurrentFilterItem(undefined);
+					setTags((prev) => [
+						...prev,
+						{
+							key: currentFilterItem?.key,
+							op: currentFilterItem?.op,
+							value,
+						} as ITag,
+					]);
+				}
+			}
+		},
+		[currentFilterItem?.key, currentFilterItem?.op, currentState, searchValue],
+	);
+
+	const handleSearch = useCallback((value: string) => {
+		setSearchValue(value);
+	}, []);
+
+	const onInputKeyDownHandler = useCallback(
+		(event: KeyboardEvent<Element>): void => {
+			if (event.key === 'Backspace' && !searchValue) {
+				event.stopPropagation();
+				setTags((prev) => prev.slice(0, -1));
+			}
+		},
+		[searchValue],
+	);
+
+	const handleOnBlur = useCallback((): void => {
+		if (searchValue) {
+			const operatorType =
+				operatorTypeMapper[currentFilterItem?.op || ''] || 'NOT_VALID';
+			// if key is added and operator is not present then convert to body CONTAINS key
+			if (
+				currentFilterItem?.key &&
+				isEmpty(currentFilterItem?.op) &&
+				whereClauseConfig?.customKey === 'body' &&
+				whereClauseConfig?.customOp === OPERATORS.CONTAINS
+			) {
+				setTags((prev) => [
+					...prev,
+					{
+						key: {
+							key: 'body',
+							dataType: DataTypes.String,
+							type: '',
+							id: 'body--string----true',
+						},
+						op: OPERATORS.CONTAINS,
+						value: currentFilterItem?.key?.key,
+					},
+				]);
+				setCurrentFilterItem(undefined);
+				setSearchValue('');
+				setCurrentState(DropdownState.ATTRIBUTE_KEY);
+			} else if (
+				currentFilterItem?.op === OPERATORS.EXISTS ||
+				currentFilterItem?.op === OPERATORS.NOT_EXISTS
+			) {
+				// is exists and not exists operator is present then convert directly to tag! no need of value here
+				setTags((prev) => [
+					...prev,
+					{
+						key: currentFilterItem?.key,
+						op: currentFilterItem?.op,
+						value: '',
+					},
+				]);
+				setCurrentFilterItem(undefined);
+				setSearchValue('');
+				setCurrentState(DropdownState.ATTRIBUTE_KEY);
+			} else if (
+				// if the current state is in sync with the kind of operator used then convert into a tag
+				validationMapper[operatorType]?.(
+					isArray(currentFilterItem?.value)
+						? currentFilterItem?.value.length || 0
+						: 1,
+				)
+			) {
+				setTags((prev) => [
+					...prev,
+					{
+						key: currentFilterItem?.key as BaseAutocompleteData,
+						op: currentFilterItem?.op as string,
+						value: currentFilterItem?.value || '',
+					},
+				]);
+				setCurrentFilterItem(undefined);
+				setSearchValue('');
+				setCurrentState(DropdownState.ATTRIBUTE_KEY);
+			}
+		}
+	}, [
+		currentFilterItem?.key,
+		currentFilterItem?.op,
+		currentFilterItem?.value,
+		searchValue,
+		whereClauseConfig?.customKey,
+		whereClauseConfig?.customOp,
+	]);
+
+	// this useEffect takes care of tokenisation based on the search state
+	useEffect(() => {
+		// if there is no search value reset to the default state
+		if (!searchValue) {
+			setCurrentFilterItem(undefined);
+			setCurrentState(DropdownState.ATTRIBUTE_KEY);
+		}
+
+		// split the current search value based on delimiters
+		const { tagKey, tagOperator, tagValue } = getTagToken(searchValue);
+
+		if (
+			// Case 1 - if key is defined but the search text doesn't match with the set key,
+			// can happen when user selects from dropdown and then deletes a few characters
+			currentFilterItem?.key &&
+			currentFilterItem?.key?.key !== tagKey.split(' ')[0]
+		) {
+			setCurrentFilterItem(undefined);
+			setCurrentState(DropdownState.ATTRIBUTE_KEY);
+		} else if (tagOperator && isEmpty(currentFilterItem?.op)) {
+			// Case 2 -> key is set and now typing for the operator
+			if (
+				tagOperator === OPERATORS.EXISTS ||
+				tagOperator === OPERATORS.NOT_EXISTS
+			) {
+				setTags((prev) => [
+					...prev,
+					{
+						key: currentFilterItem?.key,
+						op: tagOperator,
+						value: '',
+					} as ITag,
+				]);
+				setCurrentFilterItem(undefined);
+				setSearchValue('');
+				setCurrentState(DropdownState.ATTRIBUTE_KEY);
+			} else {
+				setCurrentFilterItem((prev) => ({
+					key: prev?.key as BaseAutocompleteData,
+					op: tagOperator,
+					value: '',
+				}));
+
+				setCurrentState(DropdownState.ATTRIBUTE_VALUE);
+			}
+		} else if (
+			// Case 3 -> selected operator from dropdown and then erased a part of it
+			!isEmpty(currentFilterItem?.op) &&
+			tagOperator !== currentFilterItem?.op
+		) {
+			setCurrentFilterItem((prev) => ({
+				key: prev?.key as BaseAutocompleteData,
+				op: '',
+				value: '',
+			}));
+			setCurrentState(DropdownState.OPERATOR);
+		} else if (currentState === DropdownState.ATTRIBUTE_VALUE) {
+			// Case 4 -> the final value state where we set the current filter values and the tokenisation happens on either
+			// dropdown click or blur event
+			const currentValue = {
+				key: currentFilterItem?.key as BaseAutocompleteData,
+				op: currentFilterItem?.op as string,
+				value: tagValue,
+			};
+			if (!isEqual(currentValue, currentFilterItem)) {
+				setCurrentFilterItem((prev) => ({
+					key: prev?.key as BaseAutocompleteData,
+					op: prev?.op as string,
+					value: tagValue,
+				}));
+			}
+		}
+	}, [
+		currentFilterItem,
+		currentFilterItem?.key,
+		currentFilterItem?.op,
+		searchValue,
+		currentState,
+	]);
+
+	// the useEffect takes care of setting the dropdown values correctly on change of the current state
+	useEffect(() => {
+		if (currentState === DropdownState.ATTRIBUTE_KEY) {
+			const filteredAttributeKeys = attributeKeys.filter((key) =>
+				key.key.startsWith(searchValue),
+			);
+			setDropdownOptions(
+				filteredAttributeKeys?.map(
+					(key) =>
+						({
+							label: key.key,
+							value: key,
+						}) as Option,
+				) || [],
+			);
+		}
+		if (currentState === DropdownState.OPERATOR) {
+			const keyOperator = searchValue.split(' ');
+			const partialOperator = keyOperator?.[1];
+			const strippedKey = keyOperator?.[0];
+
+			let operatorOptions;
+			if (currentFilterItem?.key?.dataType) {
+				operatorOptions = QUERY_BUILDER_OPERATORS_BY_TYPES[
+					currentFilterItem.key
+						.dataType as keyof typeof QUERY_BUILDER_OPERATORS_BY_TYPES
+				].map((operator) => ({
+					label: operator,
+					value: operator,
+				}));
+
+				if (partialOperator) {
+					operatorOptions = operatorOptions.filter((op) =>
+						op.label.startsWith(partialOperator.toLocaleUpperCase()),
+					);
+				}
+				setDropdownOptions(operatorOptions);
+			} else if (strippedKey.endsWith('[*]') && strippedKey.startsWith('body.')) {
+				operatorOptions = [OPERATORS.HAS, OPERATORS.NHAS].map((operator) => ({
+					label: operator,
+					value: operator,
+				}));
+				setDropdownOptions(operatorOptions);
+			} else {
+				operatorOptions = QUERY_BUILDER_OPERATORS_BY_TYPES.universal.map(
+					(operator) => ({
+						label: operator,
+						value: operator,
+					}),
+				);
+
+				if (partialOperator) {
+					operatorOptions = operatorOptions.filter((op) =>
+						op.label.startsWith(partialOperator.toLocaleUpperCase()),
+					);
+				}
+				setDropdownOptions(operatorOptions);
+			}
+		}
+
+		if (currentState === DropdownState.ATTRIBUTE_VALUE) {
+			const values: Array<string | number | boolean> = [];
+			const { tagValue } = getTagToken(searchValue);
+			if (isArray(tagValue)) {
+				if (!isEmpty(tagValue[tagValue.length - 1])) {
+					values.push(tagValue[tagValue.length - 1]);
+				}
+			} else if (!isEmpty(tagValue)) {
+				values.push(tagValue);
+			}
+
+			const currentAttributeValues =
+				attributeValues?.stringAttributeValues ||
+				attributeValues?.numberAttributeValues ||
+				attributeValues?.boolAttributeValues ||
+				[];
+
+			values.push(...currentAttributeValues);
+
+			if (attributeValuesMap) {
+				setDropdownOptions(
+					values.map(
+						(val) =>
+							({
+								label: checkCommaInValue(String(val)),
+								value: val,
+							}) as Option,
+					),
+				);
+			} else {
+				// If attributeValuesMap is not provided, don't set dropdown options
+				setDropdownOptions([]);
+			}
+		}
+	}, [
+		attributeValues,
+		currentFilterItem?.key?.dataType,
+		currentState,
+		attributeKeys,
+		searchValue,
+		attributeValuesMap,
+	]);
+
+	useEffect(() => {
+		const filterTags: IBuilderQuery['filters'] = {
+			op: 'AND',
+			items: [],
+		};
+		tags.forEach((tag) => {
+			const computedTagValue =
+				tag.value &&
+				Array.isArray(tag.value) &&
+				tag.value[tag.value.length - 1] === ''
+					? tag.value?.slice(0, -1)
+					: (tag.value ?? '');
+			filterTags.items.push({
+				id: tag.id || uuid().slice(0, 8),
+				key: tag.key,
+				op: getOperatorValue(tag.op),
+				value: computedTagValue,
+			});
+		});
+
+		if (!isEqual(filters, filterTags)) {
+			onChange(filterTags);
+			setTags(
+				filterTags.items.map((tag) => ({
+					...tag,
+					op: getOperatorFromValue(tag.op),
+				})) as ITag[],
+			);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [tags]);
+
+	const queryTags = useMemo(
+		() => tags.map((tag) => `${tag.key.key} ${tag.op} ${tag.value}`),
+		[tags],
+	);
+
+	const onTagRender = ({
+		value,
+		closable,
+		onClose,
+	}: CustomTagProps): React.ReactElement => {
+		const { tagOperator } = getTagToken(value);
+		const isInNin = isInNInOperator(tagOperator);
+		const chipValue = isInNin
+			? value?.trim()?.replace(/,\s*$/, '')
+			: value?.trim();
+
+		const indexInQueryTags = queryTags.findIndex((qTag) => isEqual(qTag, value));
+		const tagDetails = tags[indexInQueryTags];
+
+		const onCloseHandler = (): void => {
+			onClose();
+			setSearchValue('');
+			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
+		};
+
+		const tagEditHandler = (value: string): void => {
+			setCurrentFilterItem(tagDetails);
+			setSearchValue(value);
+			setCurrentState(DropdownState.ATTRIBUTE_VALUE);
+			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
+		};
+
+		const isDisabled = !!searchValue;
+
+		return (
+			<span className="qb-search-bar-tokenised-tags">
+				<Badge
+					color="vanilla"
+					className={tagDetails?.key?.type || ''}
+					closable={!searchValue && closable}
+					onClose={(e): void => {
+						e.preventDefault();
+						onCloseHandler();
+					}}
+				>
+					<Tooltip title={chipValue}>
+						<TypographyText
+							$isInNin={isInNin}
+							$isEnabled={!!searchValue}
+							$disabled={isDisabled}
+							onClick={(): void => {
+								if (!isDisabled) {
+									tagEditHandler(value);
+								}
+							}}
+						>
+							{chipValue}
+						</TypographyText>
+					</Tooltip>
+				</Badge>
+			</span>
+		);
+	};
+
+	const suffixIconContent = useMemo(() => {
+		if (suffixIcon) {
+			return suffixIcon;
+		}
+		return isOpen ? (
+			<ChevronUp
+				size={14}
+				color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
+			/>
+		) : (
+			<ChevronDown
+				size={14}
+				color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
+			/>
+		);
+	}, [isDarkMode, isOpen, suffixIcon]);
+
+	return (
+		<div className="query-builder-search-v2 ">
+			<Select
+				ref={selectRef}
+				getPopupContainer={popupContainer}
+				virtual={false}
+				showSearch
+				tagRender={onTagRender}
+				transitionName=""
+				choiceTransitionName=""
+				filterOption={false}
+				open={isOpen}
+				suffixIcon={suffixIconContent}
+				onDropdownVisibleChange={setIsOpen}
+				autoClearSearchValue={false}
+				mode="multiple"
+				placeholder={placeholder}
+				value={queryTags}
+				searchValue={searchValue}
+				className={className}
+				rootClassName="query-builder-search client-side-qb-search"
+				disabled={!attributeKeys.length}
+				style={selectStyle}
+				onSearch={handleSearch}
+				onSelect={handleDropdownSelect}
+				onInputKeyDown={onInputKeyDownHandler}
+				notFoundContent={null}
+				showAction={['focus']}
+				onBlur={handleOnBlur}
+			>
+				{dropdownOptions.map((option) => {
+					let val = option.value;
+					try {
+						if (isObject(option.value)) {
+							val = JSON.stringify(option.value);
+						} else {
+							val = option.value;
+						}
+					} catch {
+						val = option.value;
+					}
+					return (
+						<Select.Option key={isObject(val) ? `select-option` : val} value={val}>
+							<Suggestions
+								label={option.label}
+								value={option.value}
+								option={currentState}
+								searchValue={searchValue}
+							/>
+						</Select.Option>
+					);
+				})}
+			</Select>
+		</div>
+	);
+}
+
+ClientSideQBSearch.defaultProps = {
+	placeholder: PLACEHOLDER,
+	className: '',
+	suffixIcon: null,
+	whereClauseConfig: {},
+	attributeValuesMap: {},
+};
+
+export default ClientSideQBSearch;

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -28,9 +28,6 @@ interface FieldsSelectorProps {
 	signal: DataSource;
 	maxFields?: number;
 	requiredFields?: readonly string[];
-	// Lets users add a free-typed field which
-	// does not show up in the suggestions
-	allowCustomFields?: boolean;
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
@@ -49,7 +46,6 @@ function FieldsSelectorContent({
 	signal,
 	maxFields,
 	requiredFields,
-	allowCustomFields,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
@@ -71,7 +67,7 @@ function FieldsSelectorContent({
 
 	const handleInputChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = e.target.value.trim();
+			const value = e.target.value.trim().toLowerCase();
 			setInputValue(value);
 			debouncedUpdate(value);
 		},
@@ -157,7 +153,6 @@ function FieldsSelectorContent({
 					addedFields={draftFields}
 					onAdd={handleAdd}
 					isAtLimit={isAtLimit}
-					allowCustomFields={allowCustomFields}
 				/>
 
 				{hasUnsavedChanges && (
@@ -197,7 +192,7 @@ function FieldsSelector({
 		() =>
 			fields.map((f) => ({
 				...f,
-				key: buildCompositeKey(f.name, f.fieldContext),
+				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
 			})),
 		[fields],
 	);

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -21,7 +21,6 @@ interface OtherFieldsProps {
 	addedFields: TelemetryFieldKey[];
 	onAdd: (field: TelemetryFieldKey) => void;
 	isAtLimit: boolean;
-	allowCustomFields?: boolean;
 }
 
 function OtherFields({
@@ -30,7 +29,6 @@ function OtherFields({
 	addedFields,
 	onAdd,
 	isAtLimit,
-	allowCustomFields,
 }: OtherFieldsProps): JSX.Element {
 	const { data, isFetching } = useGetQueryKeySuggestions(
 		{
@@ -47,45 +45,25 @@ function OtherFields({
 		},
 	);
 
-	const otherFields = useMemo<TelemetryFieldKey[]>(() => {
-		const rawSuggestions = Object.values(data?.data.data.keys || {}).flat();
+	const otherFields: TelemetryFieldKey[] = useMemo(() => {
+		const suggestions = Object.values(data?.data.data.keys || {}).flat();
 		// Normalize: synthesize `key` once so downstream reads can trust it.
-		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
-			...attr,
-			key: buildCompositeKey(attr.name, attr.fieldContext as string),
-			signal: attr.signal as SignalType,
-			fieldContext: attr.fieldContext as FieldContext,
-			fieldDataType: attr.fieldDataType,
-		}));
-		const addedIds = new Set(
-			addedFields.map((f) => buildCompositeKey(f.name, f.fieldContext)),
+		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.map(
+			(attr) => ({
+				...attr,
+				key: buildCompositeKey(attr.name, attr.fieldContext as string),
+				signal: attr.signal as SignalType,
+				fieldContext: attr.fieldContext as FieldContext,
+				fieldDataType: attr.fieldDataType,
+			}),
 		);
-		const available = suggestions.filter(
+		const addedIds = new Set(
+			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
+		);
+		return normalizedSuggestions.filter(
 			(attr) => !addedIds.has(attr.key as string),
 		);
-
-		// Prepend the custom field when its name is not in suggestions and
-		// not already added.
-		const typed = debouncedInputValue.trim();
-		const nameMatches = (list: TelemetryFieldKey[]): boolean =>
-			list.some((f) => f.name.toLowerCase() === typed.toLowerCase());
-		const showCustom =
-			!!allowCustomFields &&
-			typed.length > 0 &&
-			!nameMatches(suggestions) &&
-			!nameMatches(addedFields);
-
-		if (!showCustom) {
-			return available;
-		}
-		const customField: TelemetryFieldKey = {
-			name: typed,
-			fieldContext: '',
-			fieldDataType: '',
-			key: buildCompositeKey(typed, ''),
-		};
-		return [customField, ...available];
-	}, [data, addedFields, allowCustomFields, debouncedInputValue]);
+	}, [data, addedFields]);
 
 	if (isFetching) {
 		return (

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

@@ -11,7 +11,7 @@ const makeField = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
 	signal: 'logs',
 	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
 	fieldDataType: 'string',
-	key: `${fieldContext}:${name}`,
+	key: `${fieldContext}.${name}`,
 });
 
 describe('AddedFields — requiredFields', () => {
@@ -33,7 +33,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:a', 'log:c']}
+				requiredFields={['log.a', 'log.c']}
 			/>,
 		);
 
@@ -50,7 +50,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:a']}
+				requiredFields={['log.a']}
 			/>,
 		);
 
@@ -68,7 +68,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:body']}
+				requiredFields={['log.body']}
 			/>,
 		);
 
@@ -101,11 +101,11 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:body']}
+				requiredFields={['log.body']}
 			/>,
 		);
 
-		// 'log:body' locked, 'log:body_extra' removable.
+		// 'log.body' locked, 'log.body_extra' removable.
 		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
 	});
 });

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

@@ -1,188 +0,0 @@
-import { act, fireEvent, render, screen } from 'tests/test-utils';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import FieldsSelector from '../FieldsSelector';
-
-jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-// FloatingPanel is a react-rnd/portal shell — presentation only. Render its
-// children directly so the test exercises the column-editing behavior.
-jest.mock('periscope/components/FloatingPanel', () => ({
-	FloatingPanel: ({ children }: { children: React.ReactNode }): JSX.Element => (
-		<div>{children}</div>
-	),
-}));
-
-const mockSuggestions = (names: string[]): void => {
-	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-		data: {
-			data: {
-				data: {
-					keys: {
-						attributeKeys: names.map((name) => ({
-							name,
-							signal: 'logs',
-							fieldDataType: 'string',
-							fieldContext: '',
-						})),
-					},
-				},
-			},
-		},
-		isFetching: false,
-	});
-};
-
-const field = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
-	name,
-	signal: 'logs',
-	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
-	fieldDataType: 'string',
-});
-
-const renderPanel = (
-	props: Partial<React.ComponentProps<typeof FieldsSelector>> = {},
-): { onFieldsChange: jest.Mock } => {
-	const onFieldsChange = jest.fn();
-	render(
-		<FieldsSelector
-			isOpen
-			title="Edit columns"
-			fields={props.fields ?? []}
-			onFieldsChange={onFieldsChange}
-			onClose={jest.fn()}
-			signal={DataSource.LOGS}
-			allowCustomFields
-			{...props}
-		/>,
-	);
-	return { onFieldsChange };
-};
-
-// Type into the search box and flush the 400ms debounce so OtherFields (driven
-// by the debounced value) recomputes.
-const typeSearch = (value: string): void => {
-	const input = screen.getByPlaceholderText('Search for a field...');
-	act(() => {
-		fireEvent.change(input, { target: { value } });
-	});
-	act(() => {
-		jest.advanceTimersByTime(400);
-	});
-};
-
-describe('FieldsSelector — edit columns (integration)', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-		mockSuggestions([]);
-	});
-
-	afterEach(() => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	});
-
-	it('adds a free-typed field end to end and saves the synthesized key', () => {
-		const { onFieldsChange } = renderPanel({ fields: [field('body')] });
-
-		typeSearch('orderId');
-
-		// custom option surfaces in OTHER FIELDS (only Add button, no suggestions)
-		expect(screen.getByText('orderId')).toBeInTheDocument();
-
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
-		});
-
-		// moved into ADDED FIELDS → OTHER FIELDS has nothing left to offer
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-
-		// Save commits the draft
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
-		});
-
-		expect(onFieldsChange).toHaveBeenCalledTimes(1);
-		const saved = onFieldsChange.mock.calls[0][0] as TelemetryFieldKey[];
-		expect(saved).toStrictEqual(
-			expect.arrayContaining([
-				expect.objectContaining({
-					name: 'orderId',
-					fieldContext: '',
-					fieldDataType: '',
-					key: 'orderId',
-				}),
-			]),
-		);
-	});
-
-	it('adds a suggested field: it moves from OTHER FIELDS into ADDED FIELDS', () => {
-		mockSuggestions(['service.name']);
-		const { onFieldsChange } = renderPanel({ fields: [] });
-
-		const addButton = screen.getByRole('button', { name: /^add$/i });
-		act(() => {
-			fireEvent.click(addButton);
-		});
-
-		// now removable in ADDED FIELDS, no longer offered in OTHER FIELDS
-		expect(screen.getByRole('button', { name: /remove/i })).toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /^add$/i }),
-		).not.toBeInTheDocument();
-
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
-		});
-		const saved = onFieldsChange.mock.calls[0][0] as TelemetryFieldKey[];
-		expect(saved.map((f) => f.name)).toContain('service.name');
-	});
-
-	it('hides the custom option when the typed name is already added', () => {
-		renderPanel({ fields: [field('orderId')] });
-
-		typeSearch('ORDERID');
-
-		// exact name already added → nothing left to offer in OTHER FIELDS
-		expect(screen.queryByText('ORDERID')).not.toBeInTheDocument();
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('does not offer a custom option when allowCustomFields is off', () => {
-		renderPanel({ fields: [], allowCustomFields: false });
-
-		typeSearch('unknown.a.b.c');
-
-		// no custom row and nothing addable
-		expect(screen.queryByText('unknown.a.b.c')).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /^add$/i }),
-		).not.toBeInTheDocument();
-	});
-
-	it('discards an added field, reverting the draft', () => {
-		const { onFieldsChange } = renderPanel({ fields: [field('body')] });
-
-		typeSearch('orderId');
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
-		});
-
-		// clear the search so the added list is not filtered
-		typeSearch('');
-
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /discard/i }));
-		});
-
-		expect(screen.queryByText('orderId')).not.toBeInTheDocument();
-		expect(onFieldsChange).not.toHaveBeenCalled();
-	});
-});

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

@@ -1,125 +0,0 @@
-import { fireEvent, render, screen } from 'tests/test-utils';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import OtherFields from '../OtherFields';
-
-jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
-
-const mockSuggestions = (names: string[]): void => {
-	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-		data: {
-			data: {
-				data: {
-					keys: {
-						attributeKeys: names.map((name) => ({
-							name,
-							signal: 'logs',
-							fieldDataType: 'string',
-							fieldContext: '',
-						})),
-					},
-				},
-			},
-		},
-		isFetching: false,
-	});
-};
-
-const renderOtherFields = (
-	props: Partial<React.ComponentProps<typeof OtherFields>> = {},
-): { onAdd: jest.Mock } => {
-	const onAdd = jest.fn();
-	render(
-		<OtherFields
-			signal={DataSource.LOGS}
-			debouncedInputValue=""
-			addedFields={[]}
-			onAdd={onAdd}
-			isAtLimit={false}
-			allowCustomFields
-			{...props}
-		/>,
-	);
-	return { onAdd };
-};
-
-const addedField = (name: string): TelemetryFieldKey => ({
-	name,
-	signal: 'logs',
-	fieldContext: '',
-	fieldDataType: '',
-	key: name,
-});
-
-describe('OtherFields — custom (free-typed) option', () => {
-	beforeEach(() => {
-		mockSuggestions([]);
-	});
-
-	it('shows a custom option for a typed name that is not a suggestion', () => {
-		renderOtherFields({ debouncedInputValue: 'unknown.a.b.c' });
-
-		expect(screen.getByText('unknown.a.b.c')).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
-	});
-
-	it('synthesizes the field with raw name, empty context/type, on add', () => {
-		const { onAdd } = renderOtherFields({ debouncedInputValue: 'orderId' });
-
-		fireEvent.click(screen.getByRole('button', { name: /add/i }));
-
-		expect(onAdd).toHaveBeenCalledWith({
-			name: 'orderId',
-			fieldContext: '',
-			fieldDataType: '',
-			key: 'orderId',
-		});
-	});
-
-	it('hides the custom option when an exact suggestion exists (case-insensitive)', () => {
-		mockSuggestions(['orderId']);
-		renderOtherFields({ debouncedInputValue: 'orderid' });
-
-		// the real suggestion shows, the lowercased custom name does not
-		expect(screen.getByText('orderId')).toBeInTheDocument();
-		expect(screen.queryByText('orderid')).not.toBeInTheDocument();
-	});
-
-	it('hides the custom option when the name is already added (case-insensitive)', () => {
-		renderOtherFields({
-			debouncedInputValue: 'ORDERID',
-			addedFields: [addedField('orderId')],
-		});
-
-		expect(screen.queryByText('ORDERID')).not.toBeInTheDocument();
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('does not show the custom option when allowCustomFields is off', () => {
-		renderOtherFields({
-			debouncedInputValue: 'unknown.a.b.c',
-			allowCustomFields: false,
-		});
-
-		expect(screen.queryByText('unknown.a.b.c')).not.toBeInTheDocument();
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('does not show the custom option for an empty input', () => {
-		renderOtherFields({ debouncedInputValue: '   ' });
-
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('shows the custom option at the field limit but hides its Add button', () => {
-		renderOtherFields({ debouncedInputValue: 'unknown.a.b.c', isAtLimit: true });
-
-		// same as every other row at the limit: name shown, no Add button
-		expect(screen.getByText('unknown.a.b.c')).toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /add/i }),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -19,7 +19,6 @@ export type LogDetailProps = {
 	onScrollToLog?: (logId: string) => void;
 	handleOpenInExplorer?: MouseEventHandler;
 	getContainer?: DrawerProps['getContainer'];
-	onApplyLogFilter?: (expression: string) => void;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -41,7 +41,8 @@
 	.ant-drawer-body {
 		display: flex;
 		flex-direction: column;
-		padding: 0 16px;
+		padding: 16px;
+		padding-bottom: 0;
 	}
 
 	.title {
@@ -78,7 +79,6 @@
 		align-items: center;
 		gap: 4px;
 		position: relative;
-		margin-top: 16px;
 
 		.log-body {
 			font-family: 'SF Mono';
@@ -123,19 +123,6 @@
 		}
 	}
 
-	.log-detail-drawer__section-divider {
-		height: 8px;
-		margin: 12px 0;
-		background-image:
-			radial-gradient(circle, var(--l3-border) 1px, transparent 1px),
-			radial-gradient(circle, var(--l3-border) 1px, transparent 1px);
-		background-size: 6px 2px;
-		background-position:
-			left top,
-			left bottom;
-		background-repeat: repeat-x;
-	}
-
 	.tabs-and-search {
 		display: flex;
 		justify-content: space-between;

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

@@ -16,7 +16,6 @@ import {
 	Link,
 } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
-import { normalizeTimeToMs } from 'utils/timeUtils';
 import { ILog } from 'types/api/logs/log';
 import { MouseEvent, MouseEventHandler } from 'react';
 import { useCopyToClipboard } from 'react-use';
@@ -68,11 +67,6 @@ function LogDetailsHeader({
 		},
 	];
 
-	const rawTimestamp = log.date ?? log.timestamp;
-	const displayTimestamp = Number.isNaN(Number(rawTimestamp))
-		? rawTimestamp
-		: normalizeTimeToMs(rawTimestamp);
-
 	return (
 		<div className={styles.header} data-log-detail-ignore="true">
 			<div className={styles.leftSection}>
@@ -82,7 +76,7 @@ function LogDetailsHeader({
 					data-testid="log-details-header-timestamp"
 				>
 					{formatTimezoneAdjustedTimestamp(
-						displayTimestamp,
+						log.date ?? log.timestamp,
 						DATE_TIME_FORMATS.DASH_DATETIME,
 					)}
 				</Typography.Text>

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

@@ -11,16 +11,10 @@ jest.mock('@signozhq/ui/sonner', () => ({
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
-// DataViewer pulls in react-json-tree (ESM) + Monaco; mock it (as trace's tests
-// do). These drawer tests assert the header/highlights, not the Overview body.
-jest.mock('periscope/components/DataViewer', () => ({
-	__esModule: true,
-	DataViewer: (): JSX.Element => <div data-testid="overview-data-viewer" />,
-}));
-
-// Force v2 for these tests regardless of route.
-jest.mock('../useIsLogDetailsV2', () => ({
-	useIsLogDetailsV2: (): boolean => true,
+// The flag to be removed later
+jest.mock('../constants', () => ({
+	...jest.requireActual('../constants'),
+	isLogDetailsV2: true,
 }));
 
 const mockLog: ILog = {
@@ -72,12 +66,6 @@ describe('LogDetail drawer — header (isLogDetailsV2)', () => {
 		expect(screen.getByTestId('log-details-header-next')).toBeInTheDocument();
 	});
 
-	it('renders the DataViewer in the Overview tab', () => {
-		renderDrawer();
-
-		expect(screen.getByTestId('overview-data-viewer')).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).
@@ -91,24 +79,6 @@ describe('LogDetail drawer — header (isLogDetailsV2)', () => {
 		);
 	});
 
-	it('normalizes a nanosecond-epoch timestamp in the header', () => {
-		localStorage.setItem(LOCALSTORAGE.PREFERRED_TIMEZONE, 'UTC');
-
-		// Same instant as mockLog but as epoch nanoseconds (e.g. dashboard list panel).
-		// Must scale to ms, not render a wildly wrong date.
-		renderDrawer({
-			log: {
-				...mockLog,
-				date: '1705311930000000000',
-				timestamp: 1705311930000000000,
-			},
-		});
-
-		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 });
 

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

@@ -51,12 +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 { useIsLogDetailsV2 } from './useIsLogDetailsV2';
 
 import './LogDetails.styles.scss';
 
@@ -75,7 +74,6 @@ function LogDetailInner({
 	onScrollToLog,
 	handleOpenInExplorer,
 	getContainer,
-	onApplyLogFilter,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -94,8 +92,6 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery } = useQueryBuilder();
 
-	const isLogDetailsV2 = useIsLogDetailsV2();
-
 	// Handle clicks outside to close drawer, except on explicitly ignored regions
 	useEffect(() => {
 		const handleClickOutside = (e: MouseEvent): void => {
@@ -104,7 +100,6 @@ function LogDetailInner({
 			// Don't close if clicking on drawer content, overlays, or portal elements
 			if (
 				target.closest('[data-log-detail-ignore="true"]') ||
-				target.closest('.log-detail-drawer') ||
 				target.closest('.cm-tooltip-autocomplete') ||
 				target.closest('.drawer-popover') ||
 				target.closest('.query-status-popover') ||
@@ -407,8 +402,6 @@ function LogDetailInner({
 
 				{isLogDetailsV2 && <LogHighlights log={log} />}
 
-				{isLogDetailsV2 && <div className="log-detail-drawer__section-divider" />}
-
 				<div className="tabs-and-search">
 					<ToggleGroupSimple
 						type="single"
@@ -425,21 +418,15 @@ function LogDetailInner({
 									</div>
 								),
 							},
-							// V2's DataViewer has its own Pretty/JSON toggle, so the separate
-							// JSON tab is redundant.
-							...(isLogDetailsV2
-								? []
-								: [
-										{
-											value: VIEW_TYPES.JSON,
-											label: (
-												<div className="view-title">
-													<Braces size={14} />
-													JSON
-												</div>
-											),
-										},
-									]),
+							{
+								value: VIEW_TYPES.JSON,
+								label: (
+									<div className="view-title">
+										<Braces size={14} />
+										JSON
+									</div>
+								),
+							},
 							{
 								value: VIEW_TYPES.CONTEXT,
 								label: (
@@ -520,10 +507,9 @@ function LogDetailInner({
 						selectedOptions={options}
 						listViewPanelSelectedFields={listViewPanelSelectedFields}
 						handleChangeSelectedView={handleChangeSelectedView}
-						onApplyLogFilter={onApplyLogFilter}
 					/>
 				)}
-				{!isLogDetailsV2 && selectedView === VIEW_TYPES.JSON && (
+				{selectedView === VIEW_TYPES.JSON && (
 					<JsonView data={LogJsonData} height="68vh" />
 				)}
 

frontend/src/components/LogDetail/useIsLogDetailsV2.ts

@@ -1,11 +0,0 @@
-import ROUTES from 'constants/routes';
-import { useLocation } from 'react-router-dom';
-
-export function useIsLogDetailsV2(): boolean {
-	const { pathname } = useLocation();
-	return (
-		pathname === ROUTES.LOGS_EXPLORER ||
-		pathname.startsWith(ROUTES.INFRASTRUCTURE_MONITORING_BASE) ||
-		pathname.startsWith(`${ROUTES.ALL_DASHBOARD}/`)
-	);
-}

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

@@ -51,13 +51,13 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		);
 
 		// body/timestamp appear where the caller placed them, keyed by their
-		// composite IDs ('log:*'); contextless user fields collapse to bare name.
+		// composite IDs ('log.*'); contextless user fields collapse to bare name.
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
 			'service.name',
-			'log:body',
+			'log.body',
 			'request.id',
-			'log:timestamp',
+			'log.timestamp',
 		]);
 	});
 
@@ -70,14 +70,14 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		);
 
 		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// Attribute variant is its own column, not a duplicate 'log:body'.
+		// Attribute variant is its own column, not a duplicate 'log.body'.
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
-			'log:body',
-			'attribute:body',
+			'log.body',
+			'attribute.body',
 		]);
-		expect(byId.get('log:body')?.enableRemove).toBe(false);
-		expect(byId.get('attribute:body')?.enableRemove).toBe(true);
+		expect(byId.get('log.body')?.enableRemove).toBe(false);
+		expect(byId.get('attribute.body')?.enableRemove).toBe(true);
 	});
 
 	it('applies the same distinct-column treatment to timestamp variants', () => {
@@ -91,11 +91,11 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		const byId = new Map(result.current.map((c) => [c.id, c]));
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
-			'log:timestamp',
-			'attribute:timestamp',
+			'log.timestamp',
+			'attribute.timestamp',
 		]);
-		expect(byId.get('log:timestamp')?.enableRemove).toBe(false);
-		expect(byId.get('attribute:timestamp')?.enableRemove).toBe(true);
+		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
+		expect(byId.get('attribute.timestamp')?.enableRemove).toBe(true);
 	});
 
 	it('skips the synthetic "id" field name', () => {
@@ -127,10 +127,10 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 
 		const byId = new Map(result.current.map((c) => [c.id, c]));
 		// body + timestamp are locked from the table-X removal pathway.
-		expect(byId.get('log:body')?.canBeHidden).toBe(false);
-		expect(byId.get('log:body')?.enableRemove).toBe(false);
-		expect(byId.get('log:timestamp')?.canBeHidden).toBe(false);
-		expect(byId.get('log:timestamp')?.enableRemove).toBe(false);
+		expect(byId.get('log.body')?.canBeHidden).toBe(false);
+		expect(byId.get('log.body')?.enableRemove).toBe(false);
+		expect(byId.get('log.timestamp')?.canBeHidden).toBe(false);
+		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
 		// User-added fields stay removable. User field has type='' so composite
 		// collapses to bare name.
 		expect(byId.get('user_field')?.enableRemove).toBe(true);

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

@@ -107,38 +107,30 @@ async function renderAndFocus(
 	return editor;
 }
 
-// Re-requests completions while waiting: typing and the async fetches can close the popup.
-function waitForRecents(
-	assertLabels: (labels: string[]) => void,
-): Promise<void> {
+function ensureCompletionOpen(): void {
+	const view = getEditorView();
+	if (view && !isCompletionOpen()) {
+		startCompletion(view);
+	}
+}
+
+function openRecents(): Promise<void> {
 	return waitFor(
 		() => {
-			const view = getEditorView();
-			if (view && !isCompletionOpen()) {
-				startCompletion(view);
-			}
-			assertLabels(getRecentLabels());
+			ensureCompletionOpen();
+			expect(getRecentLabels().length).toBeGreaterThan(0);
 		},
 		{ timeout: 3000 },
 	);
 }
 
-function openRecents(): Promise<void> {
-	return waitForRecents((labels) => expect(labels.length).toBeGreaterThan(0));
-}
-
-function waitForPopupElement(
-	find: () => HTMLElement | null | undefined,
-): Promise<HTMLElement> {
+// 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(
 		() => {
-			const view = getEditorView();
-			if (view && !isCompletionOpen()) {
-				startCompletion(view);
-			}
-			const node = find();
-			expect(node).toBeTruthy();
-			return node as HTMLElement;
+			ensureCompletionOpen();
+			expect(getRecentLabels()).toStrictEqual(expected);
 		},
 		{ timeout: 3000 },
 	);
@@ -154,11 +146,7 @@ describe('QuerySearch recent searches', () => {
 		saveLogsRecent(FRONTEND_FILTER);
 
 		await renderAndFocus();
-		await openRecents();
-
-		await waitForRecents((labels) =>
-			expect(labels).toStrictEqual([FRONTEND_FILTER]),
-		);
+		await waitForRecentLabels([FRONTEND_FILTER]);
 
 		const view = getEditorView() as EditorView;
 		const [recent] = currentCompletions(view.state);
@@ -172,10 +160,7 @@ describe('QuerySearch recent searches', () => {
 		const editor = await renderAndFocus();
 		await openRecents();
 		await userEvent.type(editor, 'status_code');
-
-		await waitForRecents((labels) =>
-			expect(labels).toStrictEqual([STATUS_CODE_FILTER]),
-		);
+		await waitForRecentLabels([STATUS_CODE_FILTER]);
 	});
 
 	it('does not surface recents saved under a different signal', async () => {
@@ -186,11 +171,7 @@ describe('QuerySearch recent searches', () => {
 		saveLogsRecent(FRONTEND_FILTER);
 
 		await renderAndFocus();
-		await openRecents();
-
-		await waitForRecents((labels) =>
-			expect(labels).toStrictEqual([FRONTEND_FILTER]),
-		);
+		await waitForRecentLabels([FRONTEND_FILTER]);
 	});
 
 	it('excludes a recent that exactly matches the current editor text', async () => {
@@ -201,10 +182,7 @@ describe('QuerySearch recent searches', () => {
 		const editor = await renderAndFocus();
 		await openRecents();
 		await userEvent.type(editor, FRONTEND_FILTER);
-
-		await waitForRecents((labels) =>
-			expect(labels).toStrictEqual([supersetFilter]),
-		);
+		await waitForRecentLabels([supersetFilter]);
 	});
 
 	it('caps the dropdown at RECENTS_DISPLAY_CAP entries, newest first', async () => {
@@ -216,11 +194,7 @@ describe('QuerySearch recent searches', () => {
 		const expectedLabels = [...filters].reverse().slice(0, RECENTS_DISPLAY_CAP);
 
 		await renderAndFocus();
-		await openRecents();
-
-		await waitForRecents((labels) =>
-			expect(labels).toStrictEqual(expectedLabels),
-		);
+		await waitForRecentLabels(expectedLabels);
 	});
 
 	it('applies the full expression to the editor when a recent is clicked', async () => {
@@ -230,13 +204,22 @@ describe('QuerySearch recent searches', () => {
 		await renderAndFocus(onChange);
 		await openRecents();
 
-		const option = await waitForPopupElement(() =>
-			Array.from(
-				document.querySelectorAll<HTMLElement>(COMPLETION_LABEL_SELECTOR),
-			).find((element) => element.textContent === FRONTEND_FILTER),
+		// 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 },
 		);
-		// fireEvent: userEvent's pointerdown blurs the editor, closing the popup before CM's mousedown apply.
-		fireEvent.mouseDown(option);
 
 		await waitFor(
 			() => {
@@ -261,8 +244,13 @@ describe('QuerySearch recent searches', () => {
 		await renderAndFocus();
 		await openRecents();
 
-		const deleteButton = await waitForPopupElement(() =>
-			document.querySelector<HTMLElement>(DELETE_BUTTON_SELECTOR),
+		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.

frontend/src/components/QueryBuilderV2/utils.ts

@@ -8,7 +8,7 @@ import {
 	OPERATORS,
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import FilterQueryLexer from 'parser/FilterQueryLexer';
 import FilterQueryParser, {
 	AndExpressionContext,

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -5,7 +5,7 @@ import {
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { OPERATORS } from 'constants/antlrQueryConstants';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { cloneDeep, isArray } from 'lodash-es';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.authz.test.tsx

@@ -1,7 +1,4 @@
-import {
-	listRolesSuccessResponse,
-	managedRoles,
-} from 'mocks-server/__mockdata__/roles';
+import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
@@ -21,24 +18,17 @@ const ROLES_ENDPOINT = '*/api/v1/roles';
 const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
 const SA_ENDPOINT = '*/api/v1/service_accounts/sa-1';
 const SA_DELETE_ENDPOINT = '*/api/v1/service_accounts/sa-1';
-const SA_ROLES_ENDPOINT = '*/api/v1/service_account_roles';
-const SA_ROLE_DELETE_ENDPOINT = '*/api/v1/service_account_roles/:id';
+const SA_ROLES_ENDPOINT = '*/api/v1/service_accounts/:id/roles';
+const SA_ROLE_DELETE_ENDPOINT = '*/api/v1/service_accounts/:id/roles/:rid';
 
 const activeAccountResponse = {
 	id: 'sa-1',
 	name: 'CI Bot',
 	email: 'ci-bot@signoz.io',
+	roles: ['signoz-admin'],
 	status: 'ACTIVE',
 	createdAt: '2026-01-01T00:00:00Z',
 	updatedAt: '2026-01-02T00:00:00Z',
-	serviceAccountRoles: [
-		{
-			id: 'sar-admin-1',
-			serviceAccountId: 'sa-1',
-			roleId: managedRoles[0].id,
-			role: { ...managedRoles[0], transactionGroups: [] },
-		},
-	],
 };
 
 function renderDrawer(
@@ -68,13 +58,22 @@ function setupBaseHandlers(): void {
 		rest.delete(SA_DELETE_ENDPOINT, (_, res, ctx) =>
 			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 		),
-		rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+		rest.get(SA_ROLES_ENDPOINT, (_, res, ctx) =>
 			res(
-				ctx.status(201),
-				ctx.json({ status: 'success', data: { id: 'sar-new' } }),
+				ctx.status(200),
+				ctx.json({
+					data: listRolesSuccessResponse.data.filter(
+						(r) => r.name === 'signoz-admin',
+					),
+				}),
 			),
 		),
-		rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => res(ctx.status(204))),
+		rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+		),
+		rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+		),
 	);
 }
 

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

@@ -1,7 +1,4 @@
-import {
-	listRolesSuccessResponse,
-	managedRoles,
-} from 'mocks-server/__mockdata__/roles';
+import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -13,33 +10,23 @@ const ROLES_ENDPOINT = '*/api/v1/roles';
 const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
 const SA_ENDPOINT = '*/api/v1/service_accounts/sa-1';
 const SA_DELETE_ENDPOINT = '*/api/v1/service_accounts/sa-1';
-const SA_ROLES_ENDPOINT = '*/api/v1/service_account_roles';
-const SA_ROLE_DELETE_ENDPOINT = '*/api/v1/service_account_roles/:id';
-
-const ADMIN_ASSIGNMENT_ID = 'sar-admin-1';
+const SA_ROLES_ENDPOINT = '*/api/v1/service_accounts/:id/roles';
+const SA_ROLE_DELETE_ENDPOINT = '*/api/v1/service_accounts/:id/roles/:rid';
 
 const activeAccountResponse = {
 	id: 'sa-1',
 	name: 'CI Bot',
 	email: 'ci-bot@signoz.io',
+	roles: ['signoz-admin'],
 	status: 'ACTIVE',
 	createdAt: '2026-01-01T00:00:00Z',
 	updatedAt: '2026-01-02T00:00:00Z',
-	serviceAccountRoles: [
-		{
-			id: ADMIN_ASSIGNMENT_ID,
-			serviceAccountId: 'sa-1',
-			roleId: managedRoles[0].id,
-			role: { ...managedRoles[0], transactionGroups: [] },
-		},
-	],
 };
 
 const deletedAccountResponse = {
 	...activeAccountResponse,
 	id: 'sa-2',
 	status: 'DELETED',
-	serviceAccountRoles: [],
 };
 
 function renderDrawer(
@@ -71,13 +58,22 @@ describe('ServiceAccountDrawer', () => {
 			rest.delete(SA_DELETE_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
-			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+			rest.get(SA_ROLES_ENDPOINT, (_, res, ctx) =>
 				res(
-					ctx.status(201),
-					ctx.json({ status: 'success', data: { id: 'sar-new' } }),
+					ctx.status(200),
+					ctx.json({
+						data: listRolesSuccessResponse.data.filter(
+							(r) => r.name === 'signoz-admin',
+						),
+					}),
 				),
 			),
-			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => res(ctx.status(204))),
+			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+			),
+			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+			),
 			setupAuthzAdmin(),
 		);
 	});
@@ -140,14 +136,11 @@ describe('ServiceAccountDrawer', () => {
 		server.use(
 			rest.post(SA_ROLES_ENDPOINT, async (req, res, ctx) => {
 				roleSpy(await req.json());
-				return res(
-					ctx.status(201),
-					ctx.json({ status: 'success', data: { id: 'sar-new' } }),
-				);
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
 			}),
 			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => {
 				deleteSpy();
-				return res(ctx.status(204));
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
 			}),
 		);
 
@@ -166,8 +159,7 @@ describe('ServiceAccountDrawer', () => {
 		await waitFor(() => {
 			expect(roleSpy).toHaveBeenCalledWith(
 				expect.objectContaining({
-					serviceAccountId: 'sa-1',
-					roleId: '019c24aa-2248-7585-a129-4188b3473c27',
+					id: '019c24aa-2248-7585-a129-4188b3473c27',
 				}),
 			);
 			expect(deleteSpy).not.toHaveBeenCalled();
@@ -182,14 +174,11 @@ describe('ServiceAccountDrawer', () => {
 		server.use(
 			rest.post(SA_ROLES_ENDPOINT, async (req, res, ctx) => {
 				roleSpy(await req.json());
-				return res(
-					ctx.status(201),
-					ctx.json({ status: 'success', data: { id: 'sar-new' } }),
-				);
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
 			}),
-			rest.delete(SA_ROLE_DELETE_ENDPOINT, (req, res, ctx) => {
-				deleteSpy(req.params.id);
-				return res(ctx.status(204));
+			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => {
+				deleteSpy();
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
 			}),
 		);
 
@@ -209,7 +198,7 @@ describe('ServiceAccountDrawer', () => {
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(deleteSpy).toHaveBeenCalledWith(ADMIN_ASSIGNMENT_ID);
+			expect(deleteSpy).toHaveBeenCalled();
 			expect(roleSpy).not.toHaveBeenCalled();
 		});
 	});
@@ -257,6 +246,9 @@ describe('ServiceAccountDrawer', () => {
 			rest.get('*/api/v1/service_accounts/sa-2/keys', (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ data: [] })),
 			),
+			rest.get('*/api/v1/service_accounts/sa-2/roles', (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: [] })),
+			),
 		);
 
 		renderDrawer({ account: 'sa-2' });
@@ -320,13 +312,22 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 			rest.delete(SA_DELETE_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
-			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+			rest.get(SA_ROLES_ENDPOINT, (_, res, ctx) =>
 				res(
-					ctx.status(201),
-					ctx.json({ status: 'success', data: { id: 'sar-new' } }),
+					ctx.status(200),
+					ctx.json({
+						data: listRolesSuccessResponse.data.filter(
+							(r) => r.name === 'signoz-admin',
+						),
+					}),
 				),
 			),
-			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => res(ctx.status(204))),
+			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+			),
+			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+			),
 			setupAuthzAdmin(),
 		);
 	});
@@ -409,17 +410,14 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		let roleAddCallCount = 0;
 
-		// First call → 429, second call → 201
+		// First call → 429, second call → 200
 		server.use(
 			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) => {
 				roleAddCallCount += 1;
 				if (roleAddCallCount === 1) {
 					return res(ctx.status(429), ctx.json({ message: 'Too Many Requests' }));
 				}
-				return res(
-					ctx.status(201),
-					ctx.json({ status: 'success', data: { id: 'sar-new' } }),
-				);
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
 			}),
 		);
 

frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss

@@ -44,13 +44,6 @@
 			--tanstack-first-column-header-bg,
 			var(--tanstack-table-header-cell-bg, var(--l2-background))
 		) !important;
-		padding-left: var(
-			--tanstack-cell-header-padding-left-first-column,
-			var(
-				--tanstack-cell-header-padding-left-override,
-				var(--tanstack-cell-padding-left, 0.3rem)
-			)
-		);
 	}
 }
 

frontend/src/components/TanStackTableView/TanStackTable.module.scss

@@ -161,7 +161,7 @@
 .tableHeaderCell {
 	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
 		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
-	height: var(--tanstack-table-header-height, 36px);
+	height: 36px;
 	text-align: left;
 	font-size: 14px;
 	font-style: normal;

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -664,7 +664,6 @@ function TanStackTableInner<TData, TItemKey = string>(
 										value={limit?.toString()}
 										defaultValue="10"
 										onChange={(value): void => {
-											value ??= '10';
 											setLimit(+value);
 											pagination.onLimitChange?.(+value);
 											if (page !== 1) {

frontend/src/components/TanStackTableView/__tests__/useRecoverFromEmptyPage.test.ts

@@ -1,280 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import {
-	useRecoverFromEmptyPage,
-	UseRecoverFromEmptyPageParams,
-} from '../useRecoverFromEmptyPage';
-
-const REPLACE = { history: 'replace' };
-
-function renderRecovery(
-	overrides: Partial<UseRecoverFromEmptyPageParams> = {},
-): { setPage: jest.Mock; rerender: (next?: unknown) => void } {
-	const setPage = jest.fn();
-	const props: UseRecoverFromEmptyPageParams = {
-		page: 1,
-		pageSize: 10,
-		rowCount: 10,
-		total: 100,
-		isFetching: false,
-		setPage,
-		...overrides,
-	};
-
-	const { rerender } = renderHook(
-		(next: UseRecoverFromEmptyPageParams) => useRecoverFromEmptyPage(next),
-		{ initialProps: props },
-	);
-
-	return {
-		setPage,
-		rerender: (next?: unknown): void =>
-			rerender({ ...props, ...(next as Partial<UseRecoverFromEmptyPageParams>) }),
-	};
-}
-
-describe('useRecoverFromEmptyPage', () => {
-	it('leaves the page alone while it still holds rows', () => {
-		const { setPage } = renderRecovery({ page: 3, rowCount: 10 });
-
-		expect(setPage).not.toHaveBeenCalled();
-	});
-
-	it('leaves the page alone on page 1 with no rows at all', () => {
-		const { setPage } = renderRecovery({ page: 1, rowCount: 0, total: 0 });
-
-		expect(setPage).not.toHaveBeenCalled();
-	});
-
-	it('jumps to the last page that holds data when the page is out of range', () => {
-		const { setPage } = renderRecovery({
-			page: 7,
-			pageSize: 10,
-			rowCount: 0,
-			total: 25,
-		});
-
-		expect(setPage).toHaveBeenCalledWith(3, REPLACE);
-	});
-
-	it('replaces the history entry so the back button does not return to the empty page', () => {
-		const { setPage } = renderRecovery({ page: 4, rowCount: 0, total: 10 });
-
-		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
-	});
-
-	it('falls back to page 1 when the total is unknown', () => {
-		const { setPage } = renderRecovery({ page: 5, rowCount: 0, total: 0 });
-
-		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
-	});
-
-	it('steps back one page when the total claims the page should have data', () => {
-		// total says 100 rows exist, yet page 5 came back empty — step back rather
-		// than stall on a page the query cannot actually serve.
-		const { setPage } = renderRecovery({
-			page: 5,
-			pageSize: 10,
-			rowCount: 0,
-			total: 100,
-		});
-
-		expect(setPage).toHaveBeenCalledWith(4, REPLACE);
-	});
-
-	it('clamps a page below the first one', () => {
-		const { setPage } = renderRecovery({ page: 0, rowCount: 10 });
-
-		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
-	});
-
-	it('falls back to page 1 when pageSize is zero', () => {
-		const { setPage } = renderRecovery({
-			page: 5,
-			pageSize: 0,
-			rowCount: 0,
-			total: 100,
-		});
-
-		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
-	});
-
-	it('waits for the request to settle before moving the user', () => {
-		const { setPage, rerender } = renderRecovery({
-			page: 3,
-			rowCount: 0,
-			total: 10,
-			isFetching: true,
-		});
-
-		expect(setPage).not.toHaveBeenCalled();
-
-		rerender({ page: 3, rowCount: 0, total: 10, isFetching: false });
-
-		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
-	});
-
-	it('clamps a page below the first one even when the query failed', () => {
-		// A negative offset is what made the request fail (400 "offset cannot be
-		// negative"), so retrying the same page loops forever — clamp regardless.
-		const { setPage } = renderRecovery({
-			page: 0,
-			rowCount: 0,
-			total: 0,
-			isDisabled: true,
-		});
-
-		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
-	});
-
-	it('clamps a page below the first one while the query is still in flight', () => {
-		const { setPage } = renderRecovery({
-			page: -2,
-			rowCount: 0,
-			isFetching: true,
-		});
-
-		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
-	});
-
-	it('keeps the page when the query failed so a retry lands where the user was', () => {
-		const { setPage } = renderRecovery({
-			page: 3,
-			rowCount: 0,
-			total: 0,
-			isDisabled: true,
-		});
-
-		expect(setPage).not.toHaveBeenCalled();
-	});
-
-	it('clamps a page below the first one exactly once while the request settles', () => {
-		// The clamp runs ahead of both gates, so a request settling underneath an
-		// uncorrected page must not re-issue the same history rewrite.
-		const { setPage, rerender } = renderRecovery({
-			page: 0,
-			rowCount: 0,
-			total: 0,
-			isFetching: true,
-		});
-
-		expect(setPage).toHaveBeenCalledTimes(1);
-
-		rerender({ page: 0, rowCount: 0, total: 0, isFetching: false });
-
-		expect(setPage).toHaveBeenCalledTimes(1);
-	});
-
-	it('stops correcting once the corrected page comes back with rows', () => {
-		const { setPage, rerender } = renderRecovery({
-			page: 7,
-			pageSize: 10,
-			rowCount: 0,
-			total: 25,
-		});
-
-		expect(setPage).toHaveBeenCalledWith(3, REPLACE);
-
-		// The correction lands: the query refetches, then resolves with the rows page 3 holds.
-		rerender({ page: 3, pageSize: 10, rowCount: 0, total: 25, isFetching: true });
-		rerender({
-			page: 3,
-			pageSize: 10,
-			rowCount: 5,
-			total: 25,
-			isFetching: false,
-		});
-
-		expect(setPage).toHaveBeenCalledTimes(1);
-	});
-
-	it('does not correct again while the same page is still being observed', () => {
-		const { setPage, rerender } = renderRecovery({
-			page: 5,
-			pageSize: 10,
-			rowCount: 0,
-			total: 100,
-		});
-
-		expect(setPage).toHaveBeenCalledTimes(1);
-
-		// A refetch cycle that leaves the page untouched — the correction is already in flight.
-		rerender({
-			page: 5,
-			pageSize: 10,
-			rowCount: 0,
-			total: 100,
-			isFetching: true,
-		});
-		rerender({
-			page: 5,
-			pageSize: 10,
-			rowCount: 0,
-			total: 100,
-			isFetching: false,
-		});
-
-		expect(setPage).toHaveBeenCalledTimes(1);
-	});
-
-	it('gives up on step-backs and jumps to page 1 when the total keeps lying', () => {
-		// `total` claims 400 rows exist, but every page comes back empty. Walking back one
-		// page at a time would cost a request per hop, so bail out to page 1 instead.
-		const { setPage, rerender } = renderRecovery({
-			page: 40,
-			pageSize: 10,
-			rowCount: 0,
-			total: 400,
-		});
-
-		expect(setPage).toHaveBeenNthCalledWith(1, 39, REPLACE);
-
-		rerender({ page: 39, pageSize: 10, rowCount: 0, total: 400 });
-
-		expect(setPage).toHaveBeenNthCalledWith(2, 38, REPLACE);
-
-		rerender({ page: 38, pageSize: 10, rowCount: 0, total: 400 });
-
-		expect(setPage).toHaveBeenNthCalledWith(3, 1, REPLACE);
-		expect(setPage).toHaveBeenCalledTimes(3);
-	});
-
-	it('corrects again when the user returns to a page that is still empty', () => {
-		const { setPage, rerender } = renderRecovery({
-			page: 3,
-			pageSize: 10,
-			rowCount: 0,
-			total: 10,
-		});
-
-		expect(setPage).toHaveBeenNthCalledWith(1, 1, REPLACE);
-
-		rerender({ page: 1, pageSize: 10, rowCount: 10, total: 10 });
-		rerender({ page: 3, pageSize: 10, rowCount: 0, total: 10 });
-
-		expect(setPage).toHaveBeenNthCalledWith(2, 1, REPLACE);
-	});
-
-	it('does not re-run the correction when setPage is a fresh function each render', () => {
-		// The hook reads setPage through a ref, so an inline arrow must not turn the
-		// ungated `page < 1` clamp into a per-render history rewrite.
-		const setPage = jest.fn();
-		const { rerender } = renderHook(
-			() =>
-				useRecoverFromEmptyPage({
-					page: 0,
-					pageSize: 10,
-					rowCount: 0,
-					total: 0,
-					isFetching: false,
-					setPage: (nextPage, options): void => setPage(nextPage, options),
-				}),
-			{ initialProps: undefined },
-		);
-
-		rerender(undefined);
-		rerender(undefined);
-
-		expect(setPage).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/components/TanStackTableView/__tests__/useStableTotalCount.test.ts

@@ -1,91 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import {
-	useStableTotalCount,
-	UseStableTotalCountParams,
-} from '../useStableTotalCount';
-
-function renderStableTotalCount(initial: UseStableTotalCountParams): {
-	result: { current: number };
-	rerender: (next: UseStableTotalCountParams) => void;
-} {
-	const { result, rerender } = renderHook(
-		(params: UseStableTotalCountParams) => useStableTotalCount(params),
-		{ initialProps: initial },
-	);
-
-	return { result, rerender };
-}
-
-describe('useStableTotalCount', () => {
-	it('reports the total once the load settles', () => {
-		const { result } = renderStableTotalCount({
-			total: 100,
-			isLoading: false,
-			resetKey: 'pods',
-		});
-
-		expect(result.current).toBe(100);
-	});
-
-	it('keeps the last count while the same list refetches', () => {
-		const { result, rerender } = renderStableTotalCount({
-			total: 100,
-			isLoading: false,
-			resetKey: 'pods',
-		});
-
-		rerender({ total: 0, isLoading: true, resetKey: 'pods' });
-
-		expect(result.current).toBe(100);
-	});
-
-	it('forgets the count when the list changes', () => {
-		const { result, rerender } = renderStableTotalCount({
-			total: 100,
-			isLoading: false,
-			resetKey: 'pods',
-		});
-
-		rerender({ total: 0, isLoading: true, resetKey: 'nodes' });
-
-		expect(result.current).toBe(0);
-	});
-
-	it('reports the new list total once it arrives', () => {
-		const { result, rerender } = renderStableTotalCount({
-			total: 100,
-			isLoading: false,
-			resetKey: 'pods',
-		});
-
-		rerender({ total: 0, isLoading: true, resetKey: 'nodes' });
-		rerender({ total: 25, isLoading: false, resetKey: 'nodes' });
-
-		expect(result.current).toBe(25);
-	});
-
-	it('reports zero for a list that is genuinely empty', () => {
-		const { result } = renderStableTotalCount({
-			total: 0,
-			isLoading: false,
-			resetKey: 'pods',
-		});
-
-		expect(result.current).toBe(0);
-	});
-
-	it('holds nothing back when no reset key is given', () => {
-		const { result, rerender } = renderStableTotalCount({
-			total: 100,
-			isLoading: false,
-			resetKey: undefined,
-		});
-
-		// Without a key there is no context to compare, so the cache behaves as it
-		// always did: it survives the refetch.
-		rerender({ total: 0, isLoading: true, resetKey: undefined });
-
-		expect(result.current).toBe(100);
-	});
-});

frontend/src/components/TanStackTableView/index.tsx

@@ -9,7 +9,6 @@ export * from './useCalculatedPageSize';
 export * from './useColumnState';
 export * from './useColumnStore';
 export * from './usePreferredPageSize.store';
-export * from './useRecoverFromEmptyPage';
 export * from './useTableParams';
 
 /**
@@ -286,51 +285,6 @@ export * from './useTableParams';
  *
  * **Pagination shows "Auto" option** when `calculatedPageSize` is passed, allowing users
  * to reset to auto-calculated size.
- *
- * **`setPage` accepts history options**: `setPage(page, { history: 'replace' })` rewrites the
- * current history entry instead of pushing a new one. Use `replace` for corrections the user
- * did not ask for — otherwise the back button walks straight back into the state that was just
- * corrected. Only applies when the page is synced to the URL; local (non-URL) pages ignore it.
- *
- * @example useRecoverFromEmptyPage — send the user back to a page that has data
- *
- * When rows disappear underneath the current page (filters narrowed, time range moved, items
- * deleted), the user is stranded on an empty page they cannot leave by scrolling. This hook
- * watches the fetched result and corrects the page with `history: 'replace'`, so the back
- * button does not return to the empty page.
- *
- * Correction rules:
- * - `page < 1` → jump to page 1, even while fetching or disabled. Such a page usually maps to a
- *   negative offset the API rejects (400 `offset cannot be negative`), so the response can never
- *   confirm the page is empty — deferring to it would strand the user on a permanent error.
- * - Page is empty and not page 1 → go to `min(ceil(total / pageSize), page - 1)`. When `total`
- *   is trustworthy that lands on the last page holding data; when `total` is unknown or zero it
- *   lands on page 1; and when `total` claims this page should have had rows it steps back a
- *   single page. Repeated step-backs give up and jump to page 1 after the second one, so a
- *   badly inflated `total` cannot walk the user down one request at a time.
- * - Page has rows, or the user is already on page 1 → do nothing (an empty page 1 means there
- *   is genuinely nothing to show).
- *
- * Pass `isFetching` so the hook waits for the request to settle, and `isDisabled` so a failed
- * request is not mistaken for an empty page. Neither gate suppresses the `page < 1` clamp.
- *
- * ```tsx
- * import { useRecoverFromEmptyPage, useTableParams } from 'components/TanStackTableView';
- *
- * const { page, limit, setPage } = useTableParams(QUERY_PARAMS, { page: 1, limit: 20 });
- * const { data, isLoading, isFetching, isError } = useListQuery({ page, limit });
- *
- * useRecoverFromEmptyPage({
- *   page,
- *   pageSize: limit,
- *   rowCount: data?.rows.length ?? 0,
- *   total: data?.total ?? 0,
- *   isFetching: isLoading || isFetching,
- *   // Skip correction on errors — no rows there means "request failed", not "page is empty".
- *   isDisabled: isError,
- *   setPage,
- * });
- * ```
  */
 const TanStackTable = Object.assign(TanStackTableBase, {
 	Text: TanStackTableText,

frontend/src/components/TanStackTableView/useRecoverFromEmptyPage.ts

@@ -1,107 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-import { SetPageOptions } from './useTableParams';
-
-const FIRST_PAGE = 1;
-const REPLACE_HISTORY: SetPageOptions = { history: 'replace' };
-
-/**
- * How many single-page step-backs to attempt before giving up and going to page 1.
- *
- * A step-back only happens when `total` claims the current page should hold data but the
- * response came back empty. Each hop costs a request, so an inflated `total` on a high page
- * number would otherwise walk the user down one page at a time behind a spinner.
- */
-const MAX_STEP_BACKS = 2;
-
-type Correction = {
-	from: number;
-	to: number;
-};
-
-export type UseRecoverFromEmptyPageParams = {
-	page: number;
-	pageSize: number;
-	rowCount: number;
-	total: number;
-	isFetching: boolean;
-	isDisabled?: boolean;
-	setPage: (page: number, options?: SetPageOptions) => void;
-};
-
-export function useRecoverFromEmptyPage({
-	page,
-	pageSize,
-	rowCount,
-	total,
-	isFetching,
-	isDisabled = false,
-	setPage,
-}: UseRecoverFromEmptyPageParams): void {
-	const setPageRef = useRef(setPage);
-	const lastCorrectionRef = useRef<Correction | null>(null);
-	const stepBacksRef = useRef(0);
-
-	useEffect(() => {
-		setPageRef.current = setPage;
-	});
-
-	useEffect(() => {
-		if (lastCorrectionRef.current && lastCorrectionRef.current.from !== page) {
-			lastCorrectionRef.current = null;
-		}
-
-		const correctTo = (nextPage: number): boolean => {
-			if (lastCorrectionRef.current?.to === nextPage) {
-				return false;
-			}
-
-			lastCorrectionRef.current = { from: page, to: nextPage };
-			setPageRef.current(nextPage, REPLACE_HISTORY);
-			return true;
-		};
-
-		// A page below the first one is invalid on its own terms — it usually maps to a
-		// negative offset the API rejects outright, so waiting for a response that will
-		// never arrive (or trusting a failed one) would strand the user for good.
-		if (page < FIRST_PAGE) {
-			stepBacksRef.current = 0;
-			void correctTo(FIRST_PAGE);
-			return;
-		}
-
-		if (isFetching || isDisabled) {
-			return;
-		}
-
-		// The page has data, or there is genuinely nothing to show anywhere.
-		if (rowCount > 0 || page === FIRST_PAGE) {
-			stepBacksRef.current = 0;
-			return;
-		}
-
-		const currentPage = Math.floor(page);
-		const lastPageWithData =
-			pageSize > 0 && total > 0 ? Math.ceil(total / pageSize) : FIRST_PAGE;
-		const nextPage = Math.max(
-			FIRST_PAGE,
-			Math.min(lastPageWithData, currentPage - 1),
-		);
-
-		// `total` disagrees with the response: it says this page should have rows, so the
-		// only safe move is one page back. Cap how often that repeats — every hop is a
-		// request, and a badly inflated `total` would otherwise crawl down from page 40.
-		const isStepBack = nextPage === currentPage - 1;
-
-		if (isStepBack && stepBacksRef.current >= MAX_STEP_BACKS) {
-			if (correctTo(FIRST_PAGE)) {
-				stepBacksRef.current = 0;
-			}
-			return;
-		}
-
-		if (correctTo(nextPage) && isStepBack) {
-			stepBacksRef.current += 1;
-		}
-	}, [isFetching, isDisabled, page, pageSize, rowCount, total]);
-}

frontend/src/components/TanStackTableView/useStableTotalCount.ts

@@ -1,35 +0,0 @@
-import { useRef } from 'react';
-
-export type UseStableTotalCountParams = {
-	total: number | undefined;
-	isLoading: boolean;
-	/**
-	 * Identifies the list being counted. When it changes, the cached count is
-	 * dropped so the previous list's page count cannot outlive it.
-	 */
-	resetKey: string | undefined;
-};
-
-/**
- * Holds on to the last non-zero total so the pagination does not flash while the
- * same list refetches, and forgets it as soon as `resetKey` moves to another list.
- */
-export function useStableTotalCount({
-	total,
-	isLoading,
-	resetKey,
-}: UseStableTotalCountParams): number {
-	const prevTotalRef = useRef(total || 0);
-	const prevResetKeyRef = useRef(resetKey);
-
-	if (prevResetKeyRef.current !== resetKey) {
-		prevResetKeyRef.current = resetKey;
-		prevTotalRef.current = 0;
-	}
-
-	if (total && total > 0) {
-		prevTotalRef.current = total;
-	}
-
-	return isLoading ? prevTotalRef.current : total || 0;
-}

frontend/src/components/TanStackTableView/useTableParams.ts

@@ -29,16 +29,12 @@ type Defaults = {
 	cleanupOnUnmount?: boolean;
 };
 
-export type SetPageOptions = {
-	history?: 'push' | 'replace';
-};
-
 export type TableParamsResult = {
 	page: number;
 	limit: number;
 	orderBy: SortState | null;
 	expanded: ExpandedState;
-	setPage: (p: number, options?: SetPageOptions) => void;
+	setPage: (p: number) => void;
 	setLimit: (l: number) => void;
 	setOrderBy: (s: SortState | null) => void;
 	setExpanded: (updaterOrValue: Updater<ExpandedState>) => void;
@@ -253,17 +249,6 @@ export function useTableParams(
 		[],
 	);
 
-	const setUrlPageWithOptions = useCallback(
-		(page: number, options?: SetPageOptions): void => {
-			void setUrlPage(page, options);
-		},
-		[setUrlPage],
-	);
-
-	const setLocalPageValue = useCallback((page: number): void => {
-		setLocalPage(page);
-	}, []);
-
 	const orderByUrlMemoKey = `${urlOrderBy?.columnName}${urlOrderBy?.order}`;
 	const prevOrderByRef = useRef<string | null>(null);
 
@@ -318,7 +303,7 @@ export function useTableParams(
 		limit: useUrlForLimit ? urlLimit : localLimit,
 		orderBy: (useUrlForOrderBy ? urlOrderBy : localOrderBy) as SortState | null,
 		expanded: useUrlForExpanded ? urlExpanded : localExpanded,
-		setPage: useUrlForPage ? setUrlPageWithOptions : setLocalPageValue,
+		setPage: useUrlForPage ? setUrlPage : setLocalPage,
 		setLimit: useUrlForLimit ? setUrlLimit : setLocalLimitWithPersist,
 		setOrderBy: useUrlForOrderBy ? setUrlOrderBy : setLocalOrderBy,
 		setExpanded: useUrlForExpanded ? setUrlExpanded : handleSetLocalExpanded,

frontend/src/constants/localStorage.ts

@@ -11,9 +11,9 @@ export enum LOCALSTORAGE {
 	TRACES_LIST_OPTIONS = 'TRACES_LIST_OPTIONS',
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
-	TRACES_VIEW_COLUMNS = 'TRACES_VIEW_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/container/AlertHistory/Timeline/Table/utils.ts

@@ -9,7 +9,6 @@ const fieldContextToSuggestionMap: Record<
 	[TelemetrytypesFieldContextDTO.span]: 'span',
 	[TelemetrytypesFieldContextDTO.attribute]: 'attribute',
 	// no maps for the following values on suggestion context
-	[TelemetrytypesFieldContextDTO.trace]: undefined,
 	[TelemetrytypesFieldContextDTO.body]: undefined,
 	[TelemetrytypesFieldContextDTO.metric]: undefined,
 	[TelemetrytypesFieldContextDTO.log]: undefined,

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

@@ -5,7 +5,6 @@ import BarChart from 'container/DashboardContainer/visualization/charts/BarChart
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-import { StackMode } from 'lib/uPlotV2/config/types';
 import {
 	LegendPosition,
 	TooltipRenderArgs,
@@ -132,9 +131,9 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 			<div ref={graphRef} className={styles.graphContainer}>
 				{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 					<BarChart
-						stack={StackMode.Normal}
 						config={config}
 						data={chartData}
+						isStackedBarChart
 						legendConfig={{ position: LegendPosition.BOTTOM }}
 						customTooltip={renderBillingTooltip}
 						width={containerDimensions.width}

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

@@ -58,17 +58,26 @@ describe('prepareBillingBarConfig', () => {
 		expect(config.series?.[4]?.stroke).toBe(Color.BG_AMBER_500);
 	});
 
-	it('sets padding and focus alpha for behavioral parity', () => {
+	it('sets stacking bands, padding, and focus alpha for behavioral parity', () => {
 		const builder = prepareBillingBarConfig({
 			...baseProps,
 			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
 		});
 		const config = builder.getConfig();
-		// Stacking bands come from the chart now — see useChartStacking.
+		expect(config.bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
 		expect(config.padding).toStrictEqual([32, 32, 16, 16]);
 		expect(config.focus).toStrictEqual({ alpha: 0.3 });
 	});
 
+	it('sets no bands when result is empty', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse([]),
+		});
+		const config = builder.getConfig();
+		expect(config.bands).toBeUndefined();
+	});
+
 	it('uses queryName as label when legend is undefined', () => {
 		const apiResponse: MetricRangePayloadProps = {
 			data: {

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

@@ -1,6 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
 import { DrawStyle } from 'lib/uPlotV2/config/types';
 import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
@@ -62,6 +63,7 @@ export function prepareBillingBarConfig({
 		});
 	});
 
+	builder.setBands(getInitialStackedBands(results.length));
 	builder.setPadding([32, 32, 16, 16]);
 	builder.setFocus({ alpha: 0.3 });
 

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

@@ -6,24 +6,25 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 
-import { StackMode } from 'lib/uPlotV2/config/types';
-
+import { useBarChartStacking } from '../../hooks/useBarChartStacking';
 import { BarChartProps } from '../types';
 
 export default function BarChart(props: BarChartProps): JSX.Element {
 	const {
 		children,
+		isStackedBarChart,
 		customTooltip,
 		config,
 		data,
-		stack = StackMode.None,
 		pinnedTooltipElement,
 		...rest
 	} = props;
 
-	// Written during render so it lands before UPlotChart's effect reads the config,
-	// which derives the fill bands, percent axis unit and percent range from it.
-	config.setStackMode(stack);
+	const chartData = useBarChartStacking({
+		data,
+		isStackedBarChart,
+		config,
+	});
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
@@ -36,6 +37,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				isStackedBarChart: isStackedBarChart,
 				canPinTooltip: rest.canPinTooltip,
 				renderTooltipFooter: rest.renderTooltipFooter,
 			};
@@ -46,6 +48,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			rest.timezone,
 			rest.yAxisUnit,
 			rest.decimalPrecision,
+			isStackedBarChart,
 			rest.canPinTooltip,
 			rest.renderTooltipFooter,
 		],
@@ -55,7 +58,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 		<ChartWrapper
 			{...rest}
 			config={config}
-			data={data}
+			data={chartData}
 			customTooltip={renderTooltip}
 			pinnedTooltipElement={pinnedTooltipElement}
 		>

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

@@ -6,15 +6,12 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 import UPlotChart from 'lib/uPlotV2/components/UPlotChart/UPlotChart';
-import { StackMode } from 'lib/uPlotV2/config/types';
-import { prepareAlignedData } from 'lib/uPlotV2/components/UPlotChart/utils';
 import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
 import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
 import noop from 'lodash-es/noop';
 import uPlot from 'uplot';
 
-import { ChartWrapperProps } from '../types';
-import { useChartStacking } from './useChartStacking';
+import { ChartProps } from '../types';
 
 const TOOLTIP_WIDTH_PADDING = 120;
 const TOOLTIP_MIN_WIDTH = 300;
@@ -42,20 +39,9 @@ export default function ChartWrapper({
 	pinnedTooltipElement,
 	tooltipPortalRoot,
 	'data-testid': testId,
-}: ChartWrapperProps): JSX.Element {
+}: ChartProps): JSX.Element {
 	const plotInstanceRef = useRef<uPlot | null>(null);
 
-	const stack = config.getStackMode();
-	const chartData = useChartStacking({ data, config });
-
-	// Tooltips need pre-stack values, gap-processed exactly as UPlotChart processes the
-	// plot data — otherwise the cursor's index addresses a shorter array.
-	const unstackedData = useMemo(
-		() =>
-			stack === StackMode.None ? undefined : prepareAlignedData({ data, config }),
-		[data, config, stack],
-	);
-
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
 			if (!showLegend) {
@@ -75,11 +61,11 @@ export default function ChartWrapper({
 	const renderTooltipCallback = useCallback(
 		(args: TooltipRenderArgs): React.ReactNode => {
 			if (customTooltip) {
-				return customTooltip({ ...args, unstackedData });
+				return customTooltip(args);
 			}
 			return null;
 		},
-		[customTooltip, unstackedData],
+		[customTooltip],
 	);
 
 	const syncMetadata = useMemo(
@@ -105,7 +91,7 @@ export default function ChartWrapper({
 				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
 					<UPlotChart
 						config={config}
-						data={chartData}
+						data={data}
 						width={chartWidth}
 						height={chartHeight}
 						plotRef={(plot): void => {

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/__tests__/useChartStacking.test.ts

@@ -1,98 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { StackMode } from 'lib/uPlotV2/config/types';
-import uPlot from 'uplot';
-
-import { useChartStacking } from '../useChartStacking';
-
-type Hooks = Record<string, (...args: unknown[]) => void>;
-
-function createConfig(stack: StackMode): {
-	config: UPlotConfigBuilder;
-	hooks: Hooks;
-} {
-	const hooks: Hooks = {};
-	const config = {
-		getStackMode: (): StackMode => stack,
-		addHook: jest.fn((type: string, hook: (...args: unknown[]) => void) => {
-			hooks[type] = hook;
-			return jest.fn();
-		}),
-	} as unknown as UPlotConfigBuilder;
-	return { config, hooks };
-}
-
-const data = [[1], [30], [10]] as unknown as uPlot.AlignedData;
-
-describe('useChartStacking', () => {
-	it('returns the data untouched and registers nothing when the config says `none`', () => {
-		const { config } = createConfig(StackMode.None);
-		const { result } = renderHook(() => useChartStacking({ data, config }));
-
-		expect(result.current).toBe(data);
-		expect(config.addHook).not.toHaveBeenCalled();
-	});
-
-	it('treats a missing config as unstacked', () => {
-		const { result } = renderHook(() => useChartStacking({ data, config: null }));
-
-		expect(result.current).toBe(data);
-	});
-
-	it('accumulates raw values when the config declares `normal`', () => {
-		const { config } = createConfig(StackMode.Normal);
-		const { result } = renderHook(() => useChartStacking({ data, config }));
-
-		expect(result.current).toStrictEqual([[1], [40], [10]]);
-	});
-
-	it('rescales each column to its total when the config declares `percent`', () => {
-		const { config } = createConfig(StackMode.Percent);
-		const { result } = renderHook(() => useChartStacking({ data, config }));
-
-		expect(result.current).toStrictEqual([[1], [100], [25]]);
-	});
-
-	it('registers the uPlot hooks that re-stack on data and visibility changes', () => {
-		const { config } = createConfig(StackMode.Normal);
-		renderHook(() => useChartStacking({ data, config }));
-
-		expect(
-			(config.addHook as jest.Mock).mock.calls.map(([type]) => type),
-		).toStrictEqual(['setData', 'setSeries']);
-	});
-
-	it('re-stacks from the raw values when the legend hides a series', () => {
-		const { config, hooks } = createConfig(StackMode.Normal);
-		renderHook(() => useChartStacking({ data, config }));
-
-		const plot = {
-			data: [[1]],
-			series: [{}, { show: true }, { show: false }],
-			delBand: jest.fn(),
-			addBand: jest.fn(),
-			setData: jest.fn(),
-		};
-		hooks.setSeries(plot, 2, { show: false });
-
-		// The hidden series keeps its raw value and stops contributing to the total.
-		expect(plot.setData).toHaveBeenCalledWith([[1], [30], [10]]);
-		expect(plot.delBand).toHaveBeenCalledWith(null);
-	});
-
-	it('ignores a focus-only setSeries so hovering does not re-stack', () => {
-		const { config, hooks } = createConfig(StackMode.Normal);
-		renderHook(() => useChartStacking({ data, config }));
-
-		const plot = {
-			data: [[1]],
-			series: [{}, { show: true }, { show: true }],
-			delBand: jest.fn(),
-			addBand: jest.fn(),
-			setData: jest.fn(),
-		};
-		hooks.setSeries(plot, 1, { focus: true });
-
-		expect(plot.setData).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/useChartStacking.ts

@@ -1,132 +0,0 @@
-import {
-	MutableRefObject,
-	useCallback,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from 'react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { StackMode } from 'lib/uPlotV2/config/types';
-import { has } from 'lodash-es';
-import uPlot from 'uplot';
-
-import { stackSeries } from '../utils/stackSeriesUtils';
-
-/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
-function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
-	return !plot.series[seriesIndex]?.show;
-}
-
-function canApplyStacking(
-	unstackedData: uPlot.AlignedData | null,
-	plot: uPlot,
-	isUpdating: boolean,
-): boolean {
-	return (
-		!isUpdating &&
-		!!unstackedData &&
-		!!plot.data &&
-		unstackedData[0]?.length === plot.data[0]?.length
-	);
-}
-
-function setupStackingHooks(
-	config: UPlotConfigBuilder,
-	updateStacksInChart: (plot: uPlot) => void,
-	isUpdatingRef: MutableRefObject<boolean>,
-): () => void {
-	const onDataChange = (plot: uPlot): void => {
-		if (!isUpdatingRef.current) {
-			updateStacksInChart(plot);
-		}
-	};
-
-	const onSeriesVisibilityChange = (
-		plot: uPlot,
-		_seriesIdx: number | null,
-		opts: uPlot.Series,
-	): void => {
-		// uPlot fires setSeries for hover focus too; only visibility changes restack.
-		if (!has(opts, 'focus')) {
-			updateStacksInChart(plot);
-		}
-	};
-
-	const removeSetDataHook = config.addHook('setData', onDataChange);
-	const removeSetSeriesHook = config.addHook(
-		'setSeries',
-		onSeriesVisibilityChange,
-	);
-
-	return (): void => {
-		removeSetDataHook?.();
-		removeSetSeriesHook?.();
-	};
-}
-
-export interface UseChartStackingParams {
-	data: uPlot.AlignedData;
-	config: UPlotConfigBuilder | null;
-}
-
-/**
- * Stacks a chart's data for the mode declared on its config, and re-stacks on data or
- * visibility changes. The pre-stack values live in a ref because the uPlot hooks that
- * read them run outside React's render cycle.
- */
-export function useChartStacking({
-	data,
-	config,
-}: UseChartStackingParams): uPlot.AlignedData {
-	const stack = config?.getStackMode() ?? StackMode.None;
-	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
-	unstackedDataRef.current = stack === 'none' ? null : data;
-
-	// Guards the re-entrant setData below, which would otherwise re-trigger our own hook.
-	const isUpdatingChartRef = useRef(false);
-
-	const chartData = useMemo((): uPlot.AlignedData => {
-		if (stack === StackMode.None || !data || data.length < 2) {
-			return data;
-		}
-		const noSeriesHidden = (): boolean => false; // include all series in initial stack
-		return stackSeries(data, noSeriesHidden, stack).data;
-	}, [data, stack]);
-
-	const updateStacksInChart = useCallback(
-		(plot: uPlot): void => {
-			const unstacked = unstackedDataRef.current;
-			if (
-				!unstacked ||
-				!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
-			) {
-				return;
-			}
-
-			const shouldExcludeSeries = (idx: number): boolean =>
-				isSeriesHidden(plot, idx);
-			const { data: stacked, bands } = stackSeries(
-				unstacked,
-				shouldExcludeSeries,
-				stack,
-			);
-
-			plot.delBand(null);
-			bands.forEach((band: uPlot.Band) => plot.addBand(band));
-
-			isUpdatingChartRef.current = true;
-			plot.setData(stacked);
-			isUpdatingChartRef.current = false;
-		},
-		[stack],
-	);
-
-	useLayoutEffect(() => {
-		if (stack === StackMode.None || !config) {
-			return undefined;
-		}
-		return setupStackingHooks(config, updateStacksInChart, isUpdatingChartRef);
-	}, [stack, config, updateStacksInChart]);
-
-	return chartData;
-}

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

@@ -6,16 +6,10 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 
-import { StackMode } from 'lib/uPlotV2/config/types';
-
 import { TimeSeriesChartProps } from '../types';
 
 export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, customTooltip, stack = StackMode.None, ...rest } = props;
-
-	// Written during render so it lands before UPlotChart's effect reads the config,
-	// which derives the fill bands, percent axis unit and percent range from it.
-	rest.config.setStackMode(stack);
+	const { children, customTooltip, ...rest } = props;
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -14,7 +14,6 @@ import {
 	ChartClickData,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import type { StackMode } from 'lib/uPlotV2/config/types';
 
 interface BaseChartProps {
 	width: number;
@@ -53,26 +52,27 @@ interface UPlotChartDataProps {
 	groupByPerQuery?: Record<string, BaseAutocompleteData[]>;
 }
 
-/** Everything the shared uPlot shell consumes; each chart's props narrow it. */
-export interface ChartWrapperProps
-	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {}
-
-export interface TimeSeriesChartProps extends ChartWrapperProps {
+export interface TimeSeriesChartProps
+	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
 	timezone?: Timezone;
-	/** How series compose. Defaults to `none`, which draws them independently. */
-	stack?: StackMode;
 }
 
-export interface BarChartProps extends ChartWrapperProps {
-	timezone?: Timezone;
-	/** How series compose. Defaults to `none`, which draws them independently. */
-	stack?: StackMode;
-}
-
-export interface HistogramChartProps extends ChartWrapperProps {
+export interface HistogramChartProps
+	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
 	isQueriesMerged?: boolean;
 }
 
+export interface BarChartProps
+	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
+	isStackedBarChart?: boolean;
+	timezone?: Timezone;
+}
+
+export type ChartProps =
+	| TimeSeriesChartProps
+	| BarChartProps
+	| HistogramChartProps;
+
 /**
  * One resolved pie/donut slice: a display label, its (already parsed) positive
  * numeric value, and the colour used for the arc + legend swatch.

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackSeriesUtils.test.ts

@@ -1,158 +0,0 @@
-import { AlignedData } from 'uplot';
-
-import { StackMode } from 'lib/uPlotV2/config/types';
-
-import { stackSeries } from '../stackSeriesUtils';
-
-const includeAll = (): boolean => false;
-
-// Stacking is top-down: the first series carries the column total, the last its own
-// raw value. Every expectation below reads in that order.
-describe('stackSeries', () => {
-	it('is a no-op under `none`, returning the data and no bands', () => {
-		const data: AlignedData = [[1], [30], [10]];
-
-		const { data: result, bands } = stackSeries(data, includeAll, StackMode.None);
-
-		expect(result).toBe(data);
-		expect(bands).toStrictEqual([]);
-	});
-
-	describe('normal', () => {
-		it('accumulates raw values from the bottom series upward', () => {
-			const data: AlignedData = [
-				[1, 2],
-				[10, 20],
-				[1, 2],
-			];
-
-			expect(stackSeries(data, includeAll, StackMode.Normal).data).toStrictEqual([
-				[1, 2],
-				[11, 22],
-				[1, 2],
-			]);
-		});
-
-		it('treats nulls as 0 without breaking the running total', () => {
-			const data: AlignedData = [
-				[1, 2],
-				[10, null],
-				[1, 2],
-			];
-
-			expect(stackSeries(data, includeAll, StackMode.Normal).data).toStrictEqual([
-				[1, 2],
-				[11, 2],
-				[1, 2],
-			]);
-		});
-
-		it('emits one band per adjacent pair of participating series', () => {
-			const data: AlignedData = [[1], [10], [5], [1]];
-
-			expect(stackSeries(data, includeAll, StackMode.Normal).bands).toStrictEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-			]);
-		});
-
-		it('copies omitted series through unstacked and skips their bands', () => {
-			const data: AlignedData = [[1], [10], [5], [1]];
-			const omitMiddle = (seriesIndex: number): boolean => seriesIndex === 2;
-
-			const { data: stacked, bands } = stackSeries(
-				data,
-				omitMiddle,
-				StackMode.Normal,
-			);
-
-			expect(stacked).toStrictEqual([[1], [11], [5], [1]]);
-			expect(bands).toStrictEqual([{ series: [1, 3] }]);
-		});
-	});
-
-	describe('percent', () => {
-		it('rescales each column to its total so the top series reads 100', () => {
-			const data: AlignedData = [
-				[1, 2],
-				[30, 10],
-				[10, 10],
-			];
-
-			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
-				[1, 2],
-				[100, 100],
-				[25, 50],
-			]);
-		});
-
-		it('normalises per column, so an identical series differs across x', () => {
-			const data: AlignedData = [
-				[1, 2],
-				[1, 3],
-				[1, 1],
-			];
-
-			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
-				[1, 2],
-				[100, 100],
-				[50, 25],
-			]);
-		});
-
-		it('excludes omitted series from the total, so the visible ones still reach 100', () => {
-			const data: AlignedData = [[1], [30], [10], [60]];
-			const omitLast = (seriesIndex: number): boolean => seriesIndex === 3;
-
-			expect(stackSeries(data, omitLast, StackMode.Percent).data).toStrictEqual([
-				[1],
-				[100],
-				[25],
-				[60],
-			]);
-		});
-
-		it('yields 0 for a column whose participating series sum to zero', () => {
-			const data: AlignedData = [
-				[1, 2],
-				[0, 5],
-				[0, 5],
-			];
-
-			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
-				[1, 2],
-				[0, 100],
-				[0, 50],
-			]);
-		});
-
-		it('divides by the signed total when a column mixes signs', () => {
-			// 30 + (-10) = 20, so the shares are 150% and -50% and still sum to 100.
-			const data: AlignedData = [[1], [30], [-10]];
-
-			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
-				[1],
-				[100],
-				[-50],
-			]);
-		});
-
-		it('yields 0 across a column whose signed total cancels to zero', () => {
-			const data: AlignedData = [[1], [10], [-10]];
-
-			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
-				[1],
-				[0],
-				[0],
-			]);
-		});
-	});
-
-	it('defaults to normal when no mode is given', () => {
-		const data: AlignedData = [[1], [30], [10]];
-
-		expect(stackSeries(data, includeAll).data).toStrictEqual(
-			stackSeries(data, includeAll, StackMode.Normal).data,
-		);
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackUtils.test.ts

@@ -0,0 +1,117 @@
+import { AlignedData } from 'uplot';
+
+import { getInitialStackedBands, stack } from '../stackUtils';
+
+describe('stackUtils', () => {
+	describe('stack', () => {
+		const neverOmit = (): boolean => false;
+
+		it('preserves time axis as first row', () => {
+			const data: AlignedData = [
+				[100, 200, 300],
+				[1, 2, 3],
+				[4, 5, 6],
+			];
+			const { data: result } = stack(data, neverOmit);
+			expect(result[0]).toStrictEqual([100, 200, 300]);
+		});
+
+		it('stacks value series cumulatively (last = raw, first = total)', () => {
+			// Time, then 3 value series. Stack order: last series stays raw, then we add upward.
+			const data: AlignedData = [
+				[0, 1, 2],
+				[1, 2, 3], // series 1
+				[4, 5, 6], // series 2
+				[7, 8, 9], // series 3
+			];
+			const { data: result } = stack(data, neverOmit);
+			// result[1] = s1+s2+s3, result[2] = s2+s3, result[3] = s3
+			expect(result[1]).toStrictEqual([12, 15, 18]); // 1+4+7, 2+5+8, 3+6+9
+			expect(result[2]).toStrictEqual([11, 13, 15]); // 4+7, 5+8, 6+9
+			expect(result[3]).toStrictEqual([7, 8, 9]);
+		});
+
+		it('treats null values as 0 when stacking', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, null],
+				[null, 10],
+			];
+			const { data: result } = stack(data, neverOmit);
+			expect(result[1]).toStrictEqual([1, 10]); // total
+			expect(result[2]).toStrictEqual([0, 10]); // last series with null→0
+		});
+
+		it('copies omitted series as-is without accumulating', () => {
+			// Omit series 2 (index 2); series 1 and 3 are stacked.
+			const data: AlignedData = [
+				[0, 1],
+				[10, 20], // series 1
+				[100, 200], // series 2 - omitted
+				[1, 2], // series 3
+			];
+			const omitSeries2 = (i: number): boolean => i === 2;
+			const { data: result } = stack(data, omitSeries2);
+			// series 3 raw: [1, 2]; series 2 omitted: [100, 200] as-is; series 1 stacked with s3: [11, 22]
+			expect(result[1]).toStrictEqual([11, 22]); // 10+1, 20+2
+			expect(result[2]).toStrictEqual([100, 200]); // copied, not stacked
+			expect(result[3]).toStrictEqual([1, 2]);
+		});
+
+		it('returns bands between consecutive visible series when none omitted', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, 2],
+				[3, 4],
+				[5, 6],
+			];
+			const { bands } = stack(data, neverOmit);
+			expect(bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
+		});
+
+		it('returns bands only between visible series when some are omitted', () => {
+			// 4 value series; omit index 2. Visible: 1, 3, 4. Bands: [1,3], [3,4]
+			const data: AlignedData = [[0], [1], [2], [3], [4]];
+			const omitSeries2 = (i: number): boolean => i === 2;
+			const { bands } = stack(data, omitSeries2);
+			expect(bands).toStrictEqual([{ series: [1, 3] }, { series: [3, 4] }]);
+		});
+
+		it('returns empty bands when only one value series', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, 2],
+			];
+			const { bands } = stack(data, neverOmit);
+			expect(bands).toStrictEqual([]);
+		});
+	});
+
+	describe('getInitialStackedBands', () => {
+		it('returns one band between each consecutive pair for seriesCount 3', () => {
+			expect(getInitialStackedBands(3)).toStrictEqual([
+				{ series: [1, 2] },
+				{ series: [2, 3] },
+			]);
+		});
+
+		it('returns empty array for seriesCount 0 or 1', () => {
+			expect(getInitialStackedBands(0)).toStrictEqual([]);
+			expect(getInitialStackedBands(1)).toStrictEqual([]);
+		});
+
+		it('returns single band for seriesCount 2', () => {
+			expect(getInitialStackedBands(2)).toStrictEqual([{ series: [1, 2] }]);
+		});
+
+		it('returns bands [1,2], [2,3], ..., [n-1, n] for seriesCount n', () => {
+			const bands = getInitialStackedBands(5);
+			expect(bands).toStrictEqual([
+				{ series: [1, 2] },
+				{ series: [2, 3] },
+				{ series: [3, 4] },
+				{ series: [4, 5] },
+			]);
+		});
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/utils/stackSeriesUtils.ts

@@ -1,20 +1,13 @@
-import { StackMode } from 'lib/uPlotV2/config/types';
 import uPlot, { AlignedData } from 'uplot';
 
 /**
  * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series keeps its raw values and
- * contributes nothing to the total. `None` is a no-op.
+ * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
  */
 export function stackSeries(
 	data: AlignedData,
 	omit: (seriesIndex: number) => boolean,
-	mode: StackMode = StackMode.Normal,
 ): { data: AlignedData; bands: uPlot.Band[] } {
-	if (mode === StackMode.None) {
-		return { data, bands: [] };
-	}
-
 	const timeAxis = data[0];
 	const pointCount = timeAxis.length;
 	const valueSeriesCount = data.length - 1; // exclude time axis
@@ -24,7 +17,6 @@ export function stackSeries(
 		valueSeriesCount,
 		pointCount,
 		omit,
-		mode,
 	});
 	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
 
@@ -39,46 +31,6 @@ interface BuildStackedSeriesParams {
 	valueSeriesCount: number;
 	pointCount: number;
 	omit: (seriesIndex: number) => boolean;
-	mode: StackMode;
-}
-
-/** Per-point total. Mixed-sign columns sum signed, as "share of total" implies. */
-function columnTotals({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: Omit<BuildStackedSeriesParams, 'mode'>): number[] {
-	const totals = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = 1; seriesIndex <= valueSeriesCount; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const rawValues = data[seriesIndex] as (number | null)[];
-		rawValues.forEach((rawValue, pointIndex) => {
-			totals[pointIndex] += rawValue == null ? 0 : Number(rawValue);
-		});
-	}
-
-	return totals;
-}
-
-/** A column whose participating series sum to 0 has no share to divide, so every slice is 0. */
-function toPercent(value: number, total: number): number {
-	return total === 0 ? 0 : (value / total) * 100;
-}
-
-/** What a raw value adds to the stack at a given point. */
-type Contribution = (value: number, pointIndex: number) => number;
-
-function contributionForMode(params: BuildStackedSeriesParams): Contribution {
-	if (params.mode !== StackMode.Percent) {
-		return (value): number => value;
-	}
-	// Resolved up front: totals span series the accumulation below has not reached yet.
-	const totals = columnTotals(params);
-	return (value, pointIndex): number => toPercent(value, totals[pointIndex]);
 }
 
 /**
@@ -90,17 +42,9 @@ function buildStackedSeries({
 	valueSeriesCount,
 	pointCount,
 	omit,
-	mode,
 }: BuildStackedSeriesParams): (number | null)[][] {
 	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
 	const cumulativeSums = Array(pointCount).fill(0) as number[];
-	const contributionOf = contributionForMode({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-		mode,
-	});
 
 	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
 		const rawValues = data[seriesIndex] as (number | null)[];
@@ -110,10 +54,7 @@ function buildStackedSeries({
 		} else {
 			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
 				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += contributionOf(
-					numericValue,
-					pointIndex,
-				));
+				return (cumulativeSums[pointIndex] += numericValue);
 			});
 		}
 	}
@@ -160,3 +101,16 @@ function findNextVisibleSeriesIndex(
 	}
 	return -1;
 }
+
+/**
+ * Returns band indices for initial stacked state (no series omitted).
+ * Top-down: first series at top, band fills between consecutive series.
+ * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
+ */
+export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
+	const bands: uPlot.Band[] = [];
+	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
+		bands.push({ series: [seriesIndex, seriesIndex + 1] });
+	}
+	return bands;
+}

frontend/src/container/DashboardContainer/visualization/charts/utils/stackUtils.ts

@@ -0,0 +1,116 @@
+import uPlot, { AlignedData } from 'uplot';
+
+/**
+ * Stack data cumulatively (top-down: first series = top, last = bottom).
+ * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
+ */
+export function stack(
+	data: AlignedData,
+	omit: (seriesIndex: number) => boolean,
+): { data: AlignedData; bands: uPlot.Band[] } {
+	const timeAxis = data[0];
+	const pointCount = timeAxis.length;
+	const valueSeriesCount = data.length - 1; // exclude time axis
+
+	const stackedSeries = buildStackedSeries({
+		data,
+		valueSeriesCount,
+		pointCount,
+		omit,
+	});
+	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
+
+	return {
+		data: [timeAxis, ...stackedSeries] as AlignedData,
+		bands,
+	};
+}
+
+interface BuildStackedSeriesParams {
+	data: AlignedData;
+	valueSeriesCount: number;
+	pointCount: number;
+	omit: (seriesIndex: number) => boolean;
+}
+
+/**
+ * Accumulate from last series upward: last series = raw values, first = total.
+ * Omitted series are copied as-is (no accumulation).
+ */
+function buildStackedSeries({
+	data,
+	valueSeriesCount,
+	pointCount,
+	omit,
+}: BuildStackedSeriesParams): (number | null)[][] {
+	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
+	const cumulativeSums = Array(pointCount).fill(0) as number[];
+
+	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
+		const rawValues = data[seriesIndex] as (number | null)[];
+
+		if (omit(seriesIndex)) {
+			stackedSeries[seriesIndex - 1] = rawValues;
+		} else {
+			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
+				const numericValue = rawValue == null ? 0 : Number(rawValue);
+				return (cumulativeSums[pointIndex] += numericValue);
+			});
+		}
+	}
+
+	return stackedSeries;
+}
+
+/**
+ * Bands define fill between consecutive visible series for stacked appearance.
+ * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
+ */
+function buildFillBands(
+	seriesLength: number,
+	omit: (seriesIndex: number) => boolean,
+): uPlot.Band[] {
+	const bands: uPlot.Band[] = [];
+
+	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
+		if (omit(seriesIndex)) {
+			continue;
+		}
+		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
+			seriesLength,
+			seriesIndex,
+			omit,
+		);
+		if (nextVisibleSeriesIndex !== -1) {
+			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
+		}
+	}
+
+	return bands;
+}
+
+function findNextVisibleSeriesIndex(
+	seriesLength: number,
+	afterIndex: number,
+	omit: (seriesIndex: number) => boolean,
+): number {
+	for (let i = afterIndex + 1; i < seriesLength; i++) {
+		if (!omit(i)) {
+			return i;
+		}
+	}
+	return -1;
+}
+
+/**
+ * Returns band indices for initial stacked state (no series omitted).
+ * Top-down: first series at top, band fills between consecutive series.
+ * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
+ */
+export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
+	const bands: uPlot.Band[] = [];
+	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
+		bands.push({ series: [seriesIndex, seriesIndex + 1] });
+	}
+	return bands;
+}

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useBarChartStacking.test.ts

@@ -0,0 +1,313 @@
+import { renderHook } from '@testing-library/react';
+import uPlot from 'uplot';
+
+import type { UseBarChartStackingParams } from '../useBarChartStacking';
+import { useBarChartStacking } from '../useBarChartStacking';
+
+type MockConfig = { addHook: jest.Mock };
+
+function asConfig(c: MockConfig): UseBarChartStackingParams['config'] {
+	return c as unknown as UseBarChartStackingParams['config'];
+}
+
+function createMockConfig(): {
+	config: MockConfig;
+	invokeSetData: (plot: uPlot) => void;
+	invokeSetSeries: (
+		plot: uPlot,
+		seriesIndex: number | null,
+		opts: Partial<uPlot.Series> & { focus?: boolean },
+	) => void;
+	removeSetData: jest.Mock;
+	removeSetSeries: jest.Mock;
+} {
+	let setDataHandler: ((plot: uPlot) => void) | null = null;
+	let setSeriesHandler:
+		| ((plot: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
+		| null = null;
+
+	const removeSetData = jest.fn();
+	const removeSetSeries = jest.fn();
+
+	const addHook = jest.fn(
+		(
+			hookName: string,
+			handler: (plot: uPlot, ...args: unknown[]) => void,
+		): (() => void) => {
+			if (hookName === 'setData') {
+				setDataHandler = handler as (plot: uPlot) => void;
+				return removeSetData;
+			}
+			if (hookName === 'setSeries') {
+				setSeriesHandler = handler as (
+					plot: uPlot,
+					seriesIndex: number | null,
+					opts: uPlot.Series,
+				) => void;
+				return removeSetSeries;
+			}
+			return jest.fn();
+		},
+	);
+
+	const config: MockConfig = { addHook };
+
+	const invokeSetData = (plot: uPlot): void => {
+		setDataHandler?.(plot);
+	};
+
+	const invokeSetSeries = (
+		plot: uPlot,
+		seriesIndex: number | null,
+		opts: Partial<uPlot.Series> & { focus?: boolean },
+	): void => {
+		setSeriesHandler?.(plot, seriesIndex, opts as uPlot.Series);
+	};
+
+	return {
+		config,
+		invokeSetData,
+		invokeSetSeries,
+		removeSetData,
+		removeSetSeries,
+	};
+}
+
+function createMockPlot(overrides: Partial<uPlot> = {}): uPlot {
+	return {
+		data: [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+		],
+		series: [{ show: true }, { show: true }, { show: true }],
+		delBand: jest.fn(),
+		addBand: jest.fn(),
+		setData: jest.fn(),
+		...overrides,
+	} as unknown as uPlot;
+}
+
+describe('useBarChartStacking', () => {
+	it('returns data as-is when isStackedBarChart is false', () => {
+		const data: uPlot.AlignedData = [
+			[100, 200],
+			[1, 2],
+			[3, 4],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: false,
+				config: null,
+			}),
+		);
+		expect(result.current).toBe(data);
+	});
+
+	it('returns data as-is when config is null and isStackedBarChart is true', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[4, 5],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		// Still returns stacked data (computed in useMemo); no hooks registered
+		expect(result.current[0]).toStrictEqual([0, 1]);
+		expect(result.current[1]).toStrictEqual([5, 7]); // stacked
+		expect(result.current[2]).toStrictEqual([4, 5]);
+	});
+
+	it('returns stacked data when isStackedBarChart is true and multiple value series', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+			[7, 8, 9],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		expect(result.current[0]).toStrictEqual([0, 1, 2]);
+		expect(result.current[1]).toStrictEqual([12, 15, 18]); // s1+s2+s3
+		expect(result.current[2]).toStrictEqual([11, 13, 15]); // s2+s3
+		expect(result.current[3]).toStrictEqual([7, 8, 9]);
+	});
+
+	it('returns data as-is when only one value series (no stacking needed)', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		expect(result.current).toStrictEqual(data);
+	});
+
+	it('registers setData and setSeries hooks when isStackedBarChart and config provided', () => {
+		const { config } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		expect(config.addHook).toHaveBeenCalledWith('setData', expect.any(Function));
+		expect(config.addHook).toHaveBeenCalledWith(
+			'setSeries',
+			expect.any(Function),
+		);
+	});
+
+	it('does not register hooks when isStackedBarChart is false', () => {
+		const { config } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: false,
+				config: asConfig(config),
+			}),
+		);
+
+		expect(config.addHook).not.toHaveBeenCalled();
+	});
+
+	it('calls cleanup when unmounted', () => {
+		const { config, removeSetData, removeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		const { unmount } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		unmount();
+
+		expect(removeSetData).toHaveBeenCalled();
+		expect(removeSetSeries).toHaveBeenCalled();
+	});
+
+	it('re-stacks and updates plot when setData hook is invoked', () => {
+		const { config, invokeSetData } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+		];
+		const plot = createMockPlot({
+			data: [
+				[0, 1, 2],
+				[5, 7, 9],
+				[4, 5, 6],
+			],
+		});
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		invokeSetData(plot);
+
+		expect(plot.delBand).toHaveBeenCalledWith(null);
+		expect(plot.addBand).toHaveBeenCalled();
+		expect(plot.setData).toHaveBeenCalledWith(
+			expect.arrayContaining([
+				[0, 1, 2],
+				expect.any(Array), // stacked row 1
+				expect.any(Array), // stacked row 2
+			]),
+		);
+	});
+
+	it('re-stacks when setSeries hook is invoked (e.g. legend toggle)', () => {
+		const { config, invokeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[10, 20],
+			[5, 10],
+		];
+		// Plot data must match unstacked length so canApplyStacking passes
+		const plot = createMockPlot({
+			data: [
+				[0, 1],
+				[15, 30],
+				[5, 10],
+			],
+		});
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		invokeSetSeries(plot, 1, { show: false });
+
+		expect(plot.setData).toHaveBeenCalled();
+	});
+
+	it('does not re-stack when setSeries is called with focus option', () => {
+		const { config, invokeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+		const plot = createMockPlot();
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		(plot.setData as jest.Mock).mockClear();
+		invokeSetSeries(plot, 1, { focus: true } as uPlot.Series);
+
+		expect(plot.setData).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/DashboardContainer/visualization/hooks/useBarChartStacking.ts

@@ -0,0 +1,125 @@
+import {
+	MutableRefObject,
+	useCallback,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from 'react';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { has } from 'lodash-es';
+import uPlot from 'uplot';
+
+import { stackSeries } from '../charts/utils/stackSeriesUtils';
+
+/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
+function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
+	return !plot.series[seriesIndex]?.show;
+}
+
+function canApplyStacking(
+	unstackedData: uPlot.AlignedData | null,
+	plot: uPlot,
+	isUpdating: boolean,
+): boolean {
+	return (
+		!isUpdating &&
+		!!unstackedData &&
+		!!plot.data &&
+		unstackedData[0]?.length === plot.data[0]?.length
+	);
+}
+
+function setupStackingHooks(
+	config: UPlotConfigBuilder,
+	applyStackingToChart: (plot: uPlot) => void,
+	isUpdatingRef: MutableRefObject<boolean>,
+): () => void {
+	const onDataChange = (plot: uPlot): void => {
+		if (!isUpdatingRef.current) {
+			applyStackingToChart(plot);
+		}
+	};
+
+	const onSeriesVisibilityChange = (
+		plot: uPlot,
+		_seriesIdx: number | null,
+		opts: uPlot.Series,
+	): void => {
+		if (!has(opts, 'focus')) {
+			applyStackingToChart(plot);
+		}
+	};
+
+	const removeSetDataHook = config.addHook('setData', onDataChange);
+	const removeSetSeriesHook = config.addHook(
+		'setSeries',
+		onSeriesVisibilityChange,
+	);
+
+	return (): void => {
+		removeSetDataHook?.();
+		removeSetSeriesHook?.();
+	};
+}
+
+export interface UseBarChartStackingParams {
+	data: uPlot.AlignedData;
+	isStackedBarChart?: boolean;
+	config: UPlotConfigBuilder | null;
+}
+
+/**
+ * Handles stacking for bar charts: computes initial stacked data and re-stacks
+ * when data or series visibility changes (e.g. legend toggles).
+ */
+export function useBarChartStacking({
+	data,
+	isStackedBarChart = false,
+	config,
+}: UseBarChartStackingParams): uPlot.AlignedData {
+	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
+	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
+	unstackedDataRef.current = isStackedBarChart ? data : null;
+
+	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
+	const isUpdatingChartRef = useRef(false);
+
+	const chartData = useMemo((): uPlot.AlignedData => {
+		if (!isStackedBarChart || !data || data.length < 2) {
+			return data;
+		}
+		const noSeriesHidden = (): boolean => false; // include all series in initial stack
+		const { data: stacked } = stackSeries(data, noSeriesHidden);
+		return stacked;
+	}, [data, isStackedBarChart]);
+
+	const applyStackingToChart = useCallback((plot: uPlot): void => {
+		const unstacked = unstackedDataRef.current;
+		if (
+			!unstacked ||
+			!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
+		) {
+			return;
+		}
+
+		const shouldExcludeSeries = (idx: number): boolean =>
+			isSeriesHidden(plot, idx);
+		const { data: stacked, bands } = stackSeries(unstacked, shouldExcludeSeries);
+
+		plot.delBand(null);
+		bands.forEach((band: uPlot.Band) => plot.addBand(band));
+
+		isUpdatingChartRef.current = true;
+		plot.setData(stacked);
+		isUpdatingChartRef.current = false;
+	}, []);
+
+	useLayoutEffect(() => {
+		if (!isStackedBarChart || !config) {
+			return undefined;
+		}
+		return setupStackingHooks(config, applyStackingToChart, isUpdatingChartRef);
+	}, [isStackedBarChart, config, applyStackingToChart]);
+
+	return chartData;
+}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -22,7 +22,6 @@ import { prepareBarPanelConfig } from './utils';
 import '../Panel.styles.scss';
 import TooltipFooter from '../components/TooltipFooter';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-import { StackMode } from 'lib/uPlotV2/config/types';
 
 function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const {
@@ -148,7 +147,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 				<BarChart
 					key={`${syncMode}-${syncFilterMode}`}
-					stack={widget.stackedBarChart ? StackMode.Normal : StackMode.None}
 					config={config}
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
@@ -161,6 +159,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					groupByPerQuery={groupByPerQuery}
+					isStackedBarChart={widget.stackedBarChart ?? false}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					timezone={timezone}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/__tests__/utils.test.ts

@@ -35,10 +35,20 @@ jest.mock('lib/getLabelName', () => ({
 	),
 }));
 
+jest.mock(
+	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
+	() => ({
+		getInitialStackedBands: jest.fn().mockReturnValue([]),
+	}),
+);
+
 const getLegendMock = jest.requireMock('lib/dashboard/getQueryResults')
 	.getLegend as jest.Mock;
 const getLabelNameMock = jest.requireMock('lib/getLabelName')
 	.default as jest.Mock;
+const getInitialStackedBandsMock = jest.requireMock(
+	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
+).getInitialStackedBands as jest.Mock;
 
 const createApiResponse = (
 	result: MetricRangePayloadProps['data']['result'] = [],
@@ -237,5 +247,36 @@ describe('BarPanel utils', () => {
 			}).getConfig();
 			expect(config.series?.[1]).toMatchObject({ stroke: '#ff0000' });
 		});
+
+		it('calls getInitialStackedBands when widget is stackedBarChart', () => {
+			const widget = createWidget({ stackedBarChart: true });
+			const apiResponse = createApiResponse([
+				{
+					metric: {},
+					queryName: 'Q1',
+					values: [[1000, '1']],
+				} as MetricRangePayloadProps['data']['result'][0],
+				{
+					metric: {},
+					queryName: 'Q2',
+					values: [[1000, '2']],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+			prepareBarPanelConfig({ ...baseParams, widget, apiResponse });
+			// seriesCount = result.length + 1 = 3
+			expect(getInitialStackedBandsMock).toHaveBeenCalledWith(3);
+		});
+
+		it('does not call getInitialStackedBands for non-stacked chart', () => {
+			const apiResponse = createApiResponse([
+				{
+					metric: {},
+					queryName: 'Q1',
+					values: [[1000, '1']],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+			prepareBarPanelConfig({ ...baseParams, apiResponse });
+			expect(getInitialStackedBandsMock).not.toHaveBeenCalled();
+		});
 	});
 });

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -1,6 +1,7 @@
 import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -68,6 +69,11 @@ export function prepareBarPanelConfig({
 		return builder;
 	}
 
+	if (widget.stackedBarChart) {
+		const seriesCount = (apiResponse.data.result.length ?? 0) + 1; // +1 for 1-based uPlot series indices
+		builder.setBands(getInitialStackedBands(seriesCount));
+	}
+
 	apiResponse.data.result.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,

frontend/src/container/ExplorerOrderBy/index.tsx

@@ -2,7 +2,7 @@ import { memo, useMemo } from 'react';
 import { Select, Spin } from 'antd';
 import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
 import { useOrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/useOrderByFilter';
-import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/config';
+import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { StringOperators } from 'types/common/queryBuilder';

frontend/src/container/GridCardLayout/__tests__/useResolveQuery.test.tsx

@@ -1,91 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import useUpdatedQuery from '../useResolveQuery';
-
-const mockGetSubstituteVars = jest.fn();
-const mockDynamicVariables: unknown[] = [];
-
-jest.mock('api/dashboard/substitute_vars', () => ({
-	getSubstituteVars: (...args: unknown[]): unknown =>
-		mockGetSubstituteVars(...args),
-}));
-
-jest.mock('api/v5/v5', () => ({
-	prepareQueryRangePayloadV5: (): { queryPayload: unknown } => ({
-		queryPayload: { start: 0, end: 1 },
-	}),
-}));
-
-jest.mock(
-	'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi',
-	() => ({
-		mapQueryDataFromApi: (): Query => ({ resolved: true }) as unknown as Query,
-	}),
-);
-
-jest.mock('hooks/dashboard/useDashboardVariablesByType', () => ({
-	useDashboardVariablesByType: (): unknown[] => mockDynamicVariables,
-}));
-
-jest.mock('react-redux', () => ({
-	...jest.requireActual('react-redux'),
-	useSelector: (): unknown => ({
-		selectedTime: 'GLOBAL_TIME',
-	}),
-}));
-
-const QUERY = { builder: { queryData: [] } } as unknown as Query;
-
-const WIDGET_CONFIG = {
-	query: QUERY,
-	panelTypes: PANEL_TYPES.TIME_SERIES,
-	timePreferance: 'GLOBAL_TIME' as const,
-};
-
-describe('useResolveQuery', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockDynamicVariables.length = 0;
-	});
-
-	it('skips the substitute_vars round-trip when there are no variables', async () => {
-		const { result } = renderHook(() => useUpdatedQuery(), {
-			wrapper: MockQueryClientProvider,
-		});
-
-		const resolved = await result.current.getUpdatedQuery({
-			widgetConfig: WIDGET_CONFIG,
-		});
-
-		expect(mockGetSubstituteVars).not.toHaveBeenCalled();
-		expect(resolved).toBe(QUERY);
-	});
-
-	it('resolves through substitute_vars when the dashboard has variables', async () => {
-		mockGetSubstituteVars.mockResolvedValue({
-			httpStatusCode: 200,
-			data: { compositeQuery: {} },
-		});
-
-		const { result } = renderHook(() => useUpdatedQuery(), {
-			wrapper: MockQueryClientProvider,
-		});
-
-		const resolved = await result.current.getUpdatedQuery({
-			widgetConfig: WIDGET_CONFIG,
-			dashboardData: {
-				data: {
-					variables: {
-						env: { name: 'env', selectedValue: 'prod' },
-					},
-				},
-			},
-		});
-
-		expect(mockGetSubstituteVars).toHaveBeenCalledTimes(1);
-		expect(resolved).toStrictEqual({ resolved: true });
-	});
-});

frontend/src/container/GridCardLayout/useResolveQuery.ts

@@ -2,7 +2,6 @@ import { useCallback } from 'react';
 import { useMutation } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { isEmpty } from 'lodash-es';
 import { getSubstituteVars } from 'api/dashboard/substitute_vars';
 import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -47,21 +46,13 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 			widgetConfig,
 			dashboardData,
 		}: UseUpdatedQueryOptions): Promise<Query> => {
-			const variables = getDashboardVariables(dashboardData?.data?.variables);
-
-			// `/substitute_vars` only rewrites `$variable` references, so on surfaces with no
-			// dashboard behind them (APM, Celery, API monitoring) the round-trip is a no-op.
-			if (isEmpty(variables) && isEmpty(dashboardDynamicVariables)) {
-				return widgetConfig.query;
-			}
-
 			// Prepare query payload with resolved variables
 			const { queryPayload } = prepareQueryRangePayloadV5({
 				query: widgetConfig.query,
 				graphType: getGraphType(widgetConfig.panelTypes),
 				selectedTime: widgetConfig.timePreferance,
 				globalSelectedInterval,
-				variables,
+				variables: getDashboardVariables(dashboardData?.data?.variables),
 				originalGraphType: widgetConfig.panelTypes,
 				dynamicVariables: dashboardDynamicVariables,
 			});

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx

@@ -7,7 +7,6 @@ import TanStackTable, {
 	TableColumnDef,
 	useCalculatedPageSize,
 	useHiddenColumnIds,
-	useRecoverFromEmptyPage,
 	useTableParams,
 } from 'components/TanStackTableView';
 import { InfraMonitoringEvents } from 'constants/events';
@@ -137,7 +136,6 @@ export function K8sBaseList<
 		page: currentPage,
 		limit: currentPageSize,
 		setLimit,
-		setPage,
 	} = useTableParams(
 		{
 			page: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
@@ -245,16 +243,6 @@ export function K8sBaseList<
 	const totalCount = data?.total || 0;
 	const hasFilters = !!expression?.trim();
 
-	useRecoverFromEmptyPage({
-		page: currentPage,
-		pageSize: currentPageSize,
-		rowCount: pageData.length,
-		total: totalCount,
-		isFetching: isLoading || isFetching,
-		isDisabled: isError || Boolean(data?.error),
-		setPage,
-	});
-
 	const getGroupKeyFn = useCallback(
 		(item: T) => getGroupedByMeta(item, groupBy),
 		[groupBy],

frontend/src/container/InfraMonitoringK8sV2/Base/K8sEmptyState.module.scss

@@ -51,5 +51,4 @@
 	gap: var(--spacing-3);
 	max-width: 500px;
 	padding: 24px;
-	max-height: 100%;
 }

frontend/src/container/InfraMonitoringK8sV2/Base/K8sExpandedRow.tsx

@@ -37,7 +37,7 @@ import { useInfraMonitoringFontSize } from './useInfraMonitoringTablePreferences
 import styles from './K8sExpandedRow.module.scss';
 import { buildExpressionFromGroupMeta } from './utils';
 import { logInfraColumnSortedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
-import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
+import { getUnstableCurrentSearchParams } from 'container/TopNav/DateTimeSelectionV2/utils/getUnstableCurrentSearchParams';
 import { QueryParams } from 'constants/query';
 
 const EXPANDED_ROW_LIMIT = 10;

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseList.test.tsx

@@ -591,14 +591,12 @@ describe('K8sBaseList', () => {
 	});
 
 	describe('with empty data', () => {
-		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
 		const fetchListDataMock = jest.fn<
 			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
 			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
 		>();
 
 		beforeEach(() => {
-			onUrlUpdateMock.mockClear();
 			fetchListDataMock.mockClear();
 			fetchListDataMock.mockResolvedValue({
 				data: [],
@@ -607,7 +605,6 @@ describe('K8sBaseList', () => {
 			});
 
 			renderComponent<TestItem>({
-				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
 				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
@@ -628,177 +625,6 @@ describe('K8sBaseList', () => {
 				expect(fetchListDataMock).toHaveBeenCalled();
 			});
 		});
-
-		it('should not rewrite the page when already on the first page', async () => {
-			await waitFor(() => {
-				expect(fetchListDataMock).toHaveBeenCalled();
-			});
-
-			const pageUpdates = onUrlUpdateMock.mock.calls
-				.map((call) => call[0].searchParams.get('page'))
-				.filter(Boolean);
-
-			expect(pageUpdates).toHaveLength(0);
-		});
-	});
-
-	describe('with a page beyond the end of the list', () => {
-		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
-		const fetchListDataMock = jest.fn<
-			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
-			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
-		>();
-
-		// 25 rows exist, so pages 1-3 serve data and page 7 of 10 comes back empty.
-		const rows: TestItem[] = Array.from({ length: 25 }, (_, index) => ({
-			id: `pod-${index + 1}`,
-		}));
-
-		beforeEach(() => {
-			onUrlUpdateMock.mockClear();
-			fetchListDataMock.mockClear();
-			// Offset-aware on purpose: a mock that answers empty for every offset would let
-			// the assertions pass against a page the recovery has already moved on from.
-			fetchListDataMock.mockImplementation(async ({ offset = 0, limit = 10 }) => ({
-				data: rows.slice(offset, offset + limit),
-				total: rows.length,
-				error: null,
-			}));
-
-			renderComponent<TestItem>({
-				onUrlUpdate: onUrlUpdateMock,
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				queryParams: { page: '7', pageSize: '10' },
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-		});
-
-		it('should send the user back to the last page holding data', async () => {
-			// The rows of page 3 on screen are what proves the recovery settled there,
-			// rather than passing through on its way somewhere else.
-			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
-
-			const pageUpdates = onUrlUpdateMock.mock.calls
-				.map((call) => call[0].searchParams.get('page'))
-				.filter(Boolean);
-
-			expect(pageUpdates).toStrictEqual(['3']);
-		});
-
-		it('should correct the page in a single hop', async () => {
-			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
-
-			// Only the original out-of-range page and the corrected one are requested.
-			expect(
-				fetchListDataMock.mock.calls.map((call) => call[0].offset),
-			).toStrictEqual([60, 20]);
-		});
-
-		it('should replace the history entry instead of pushing the correction', async () => {
-			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
-
-			const pageCorrection = onUrlUpdateMock.mock.calls.find(
-				(call) => call[0].searchParams.get('page') === '3',
-			);
-
-			expect(pageCorrection?.[0].options.history).toBe('replace');
-		});
-	});
-
-	describe('with a page below the first one', () => {
-		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
-		const fetchListDataMock = jest.fn<
-			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
-			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
-		>();
-
-		beforeEach(() => {
-			onUrlUpdateMock.mockClear();
-			fetchListDataMock.mockClear();
-			// page=0 turns into offset=-10, which the API rejects outright — the list
-			// can only recover by clamping the page, never by reading the response.
-			fetchListDataMock.mockImplementation(async ({ offset = 0 }) => {
-				if (offset < 0) {
-					throw new APIError({
-						httpStatusCode: 400,
-						error: {
-							code: 'invalid_input',
-							message: 'offset cannot be negative',
-							url: '',
-							errors: [],
-						},
-					});
-				}
-
-				return { data: [{ id: 'pod-1' }], total: 1, error: null };
-			});
-
-			renderComponent<TestItem>({
-				onUrlUpdate: onUrlUpdateMock,
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				queryParams: { page: '0', pageSize: '10' },
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-		});
-
-		it('should reject the request that carried the negative offset', async () => {
-			await waitFor(() => {
-				expect(
-					fetchListDataMock.mock.calls.some((call) => call[0].offset === -10),
-				).toBe(true);
-			});
-
-			await expect(
-				fetchListDataMock.mock.results[0].value as Promise<unknown>,
-			).rejects.toThrow('offset cannot be negative');
-		});
-
-		it('should clamp the page to the first one even though the request failed', async () => {
-			await waitFor(() => {
-				expect(onUrlUpdateMock).toHaveBeenCalled();
-			});
-
-			// Page 1 is the default, so the correction drops the param rather than
-			// writing `page=1`.
-			const pageCorrection = onUrlUpdateMock.mock.calls.find(
-				(call) => call[0].searchParams.get('page') === null,
-			);
-
-			expect(pageCorrection).toBeDefined();
-			expect(pageCorrection?.[0].queryString).toBe('?pageSize=10');
-		});
-
-		it('should replace the history entry instead of pushing the correction', async () => {
-			await waitFor(() => {
-				expect(onUrlUpdateMock).toHaveBeenCalled();
-			});
-
-			const pageCorrection = onUrlUpdateMock.mock.calls.find(
-				(call) => call[0].searchParams.get('page') === null,
-			);
-
-			expect(pageCorrection?.[0].options.history).toBe('replace');
-		});
-
-		it('should refetch with a non-negative offset after clamping', async () => {
-			await waitFor(() => {
-				expect(
-					fetchListDataMock.mock.calls.some((call) => call[0].offset === 0),
-				).toBe(true);
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('pod-1')).toBeInTheDocument();
-			});
-		});
 	});
 
 	describe('with error response', () => {

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

@@ -82,7 +82,6 @@ function EntityLogsContent({
 	const { activeLog, selectedTab, handleSetActiveLog, handleCloseLogDetail } =
 		useLogDetailHandlers();
 
-	// TODO: Move away from using onAddToQuery after old drawer cleanup
 	const onAddToQuery = useCallback(
 		(fieldKey: string, fieldValue: string, operator: string): void => {
 			handleCloseLogDetail();
@@ -105,21 +104,6 @@ function EntityLogsContent({
 		[userExpression, querySearchOnRun, handleCloseLogDetail, category],
 	);
 
-	const onApplyLogFilter = useCallback(
-		(expression: string): void => {
-			handleCloseLogDetail();
-
-			const newUser = userExpression.trim()
-				? `${userExpression} AND ${expression}`
-				: expression;
-
-			querySearchOnRun(newUser);
-
-			logInfraDrawerFilterCustomizedEvent(category, 'logs', newUser, 'logs');
-		},
-		[userExpression, querySearchOnRun, handleCloseLogDetail, category],
-	);
-
 	const {
 		logs,
 		loadMoreLogs,
@@ -344,7 +328,6 @@ function EntityLogsContent({
 						selectedTab={selectedTab}
 						onAddToQuery={onAddToQuery}
 						onClickActionItem={onAddToQuery}
-						onApplyLogFilter={onApplyLogFilter}
 						onScrollToLog={handleScrollToLog}
 						handleOpenInExplorer={(e) => handleOpenInExplorer(e, activeLog)}
 						getContainer={(): HTMLElement =>

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -47,7 +47,6 @@ import {
 	useInfraMonitoringCategory,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
-	useInfraMonitoringPageListing,
 	useInfraMonitoringSelectedItemParams,
 } from './hooks';
 
@@ -68,7 +67,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
 	const [, setOrderBy] = useInfraMonitoringOrderBy();
 	const [, setSelectedItemParams] = useInfraMonitoringSelectedItemParams();
-	const [, setCurrentPage] = useInfraMonitoringPageListing();
 
 	const compositeQuery = useGetCompositeQueryParam();
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
@@ -220,7 +218,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			void setSelectedCategory(key as string);
 			void setOrderBy(null);
 			void setGroupBy(null);
-			void setCurrentPage(null);
 			setSelectedItemParams(null);
 			redirectWithQueryBuilderData({
 				...currentQuery,

frontend/src/container/InfraMonitoringK8sV2/__tests__/InfraMonitoringK8s.test.tsx

@@ -1,128 +0,0 @@
-import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
-import { MemoryRouter as MemoryRouterV5 } from 'react-router-dom-v5-compat';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { NuqsTestingAdapter, UrlUpdateEvent } from 'nuqs/adapters/testing';
-import { AppProvider } from 'providers/App/App';
-import { QueryBuilderProvider } from 'providers/QueryBuilder';
-import TimezoneProvider from 'providers/Timezone';
-import store from 'store';
-
-import { K8sCategories } from '../constants';
-import InfraMonitoringK8s from '../InfraMonitoringK8s';
-
-// Quick filters fire their own field APIs and are irrelevant to pagination.
-jest.mock('components/QuickFilters/QuickFilters', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="quick-filters" />,
-}));
-
-// The list owns its own page recovery; stubbing it keeps the page param under the
-// sole control of the category handler being tested here.
-jest.mock('../Base/K8sDynamicList', () => ({
-	__esModule: true,
-	K8sDynamicList: (): JSX.Element => <div data-testid="k8s-dynamic-list" />,
-	default: (): JSX.Element => <div data-testid="k8s-dynamic-list" />,
-}));
-
-// Analytics only; jsdom lacks the Performance navigation entries it reads.
-jest.mock('lib/navigation', () => ({
-	getNavigationReferrer: (): string => 'direct',
-}));
-
-function renderPage(
-	queryParams: Record<string, string>,
-	onUrlUpdate: jest.Mock<void, [UrlUpdateEvent]>,
-): void {
-	const queryClient = new QueryClient({
-		defaultOptions: { queries: { retry: false } },
-	});
-
-	render(
-		<MemoryRouter>
-			<MemoryRouterV5>
-				<TimezoneProvider>
-					<QueryClientProvider client={queryClient}>
-						<AppProvider>
-							<Provider store={store}>
-								<NuqsTestingAdapter
-									searchParams={queryParams}
-									onUrlUpdate={onUrlUpdate}
-								>
-									<TooltipProvider>
-										<QueryBuilderProvider>
-											<InfraMonitoringK8s />
-										</QueryBuilderProvider>
-									</TooltipProvider>
-								</NuqsTestingAdapter>
-							</Provider>
-						</AppProvider>
-					</QueryClientProvider>
-				</TimezoneProvider>
-			</MemoryRouterV5>
-		</MemoryRouter>,
-	);
-}
-
-describe('InfraMonitoringK8s', () => {
-	describe('when the category changes from a page other than the first', () => {
-		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
-
-		beforeEach(async () => {
-			onUrlUpdateMock.mockClear();
-
-			renderPage(
-				{ category: K8sCategories.PODS, page: '3', pageSize: '10' },
-				onUrlUpdateMock,
-			);
-
-			await screen.findByTestId(`category-${K8sCategories.NODES}`);
-		});
-
-		it('should drop the page so the new category starts at the first one', async () => {
-			fireEvent.click(screen.getByTestId(`category-${K8sCategories.NODES}`));
-
-			// Page 3 of pods says nothing about nodes — keeping it asks the new entity
-			// for an offset it may not have. The param is cleared rather than set to 1,
-			// since an absent page already means the first one.
-			await waitFor(() => {
-				const categorySwitch = onUrlUpdateMock.mock.calls.find(
-					(call) => call[0].searchParams.get('category') === K8sCategories.NODES,
-				);
-
-				expect(categorySwitch).toBeDefined();
-				expect(categorySwitch?.[0].searchParams.get('page')).toBeNull();
-			});
-		});
-
-		it('should keep the page size, which is not category specific', async () => {
-			fireEvent.click(screen.getByTestId(`category-${K8sCategories.NODES}`));
-
-			await waitFor(() => {
-				const categorySwitch = onUrlUpdateMock.mock.calls.find(
-					(call) => call[0].searchParams.get('category') === K8sCategories.NODES,
-				);
-
-				expect(categorySwitch?.[0].searchParams.get('pageSize')).toBe('10');
-			});
-		});
-
-		it('should leave the page alone when the same category is clicked again', async () => {
-			fireEvent.click(screen.getByTestId(`category-${K8sCategories.PODS}`));
-
-			await waitFor(() => {
-				expect(screen.getByTestId('k8s-dynamic-list')).toBeInTheDocument();
-			});
-
-			const droppedPage = onUrlUpdateMock.mock.calls.some(
-				(call) => !call[0].searchParams.has('page'),
-			);
-
-			expect(droppedPage).toBe(false);
-		});
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/hooks.ts

@@ -34,9 +34,6 @@ export const useInfraMonitoringPageListing = (): UseQueryStateReturn<
 > =>
 	useQueryState(
 		INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
-		// do not use .withDefault here, this can cause bugs when
-		// two hooks of nuqs define default twice, this is also
-		// defined at useTableParams
 		parseAsInteger.withOptions(defaultNuqsOptions),
 	);
 

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss

@@ -4,9 +4,9 @@
 	gap: var(--spacing-4);
 	padding: var(--spacing-2) var(--spacing-2);
 
-	--tabs-content-padding: 0;
-	--tabs-text-color: var(--l1-foreground);
-	--tabs-active-text-color: var(--l1-foreground);
+	--tab-content-padding: 0;
+	--tab-text-color: var(--l1-foreground);
+	--tab-active-text-color: var(--l1-foreground);
 }
 
 .pageError {

frontend/src/container/LLMObservability/LLMObservability.module.scss

@@ -4,8 +4,8 @@
 	height: 100%;
 	margin-top: var(--spacing-2);
 	margin-left: var(--spacing-2);
-	--tabs-text-color: var(--l1-foreground);
-	--tabs-active-text-color: var(--l1-foreground);
+	--tab-text-color: var(--l1-foreground);
+	--tab-active-text-color: var(--l1-foreground);
 	[role='tabpanel'] {
 		margin: 0;
 		padding: var(--spacing-0) var(--spacing-4);

frontend/src/container/LLMObservability/Overview/Overview.tsx

@@ -9,11 +9,7 @@ function Overview(): JSX.Element {
 
 	return (
 		<div className={styles.overview} data-testid="llm-observability-overview">
-			<DashboardContainer
-				dashboard={dashboard}
-				refetch={refetch}
-				canEditDashboardOverride={false}
-			/>
+			<DashboardContainer dashboard={dashboard} refetch={refetch} />
 		</div>
 	);
 }

frontend/src/container/LLMObservability/Overview/json/dashboard.json

@@ -1,7 +1,7 @@
 {
   "id": "llm-observability-overview",
   "orgId": "",
-  "locked": false,
+  "locked": true,
   "name": "AI Observability Overview",
   "schemaVersion": "v6",
   "source": "system",
@@ -1146,4 +1146,4 @@
       }
     ]
   }
-}
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -2,10 +2,10 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
-	--tabs-content-padding: 0;
+	--tab-content-padding: 0;
 	margin-top: var(--spacing-3);
-	--tabs-text-color: var(--l1-foreground);
-	--tabs-active-text-color: var(--l1-foreground);
+	--tab-text-color: var(--l1-foreground);
+	--tab-active-text-color: var(--l1-foreground);
 }
 
 .tabLabel {

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -275,7 +275,6 @@ function LiveLogsContainer({
 					onClose={(): void => setIsFieldsSelectorOpen(false)}
 					signal={DataSource.LOGS}
 					requiredFields={LOGS_REQUIRED_COLUMNS}
-					allowCustomFields
 				/>
 			)}
 		</div>

frontend/src/container/LogDetailedView/InfraMetrics/constants.ts

@@ -2806,8 +2806,8 @@ export const hostWidgetInfo = [
 			'The 1m, 5m and 15m load averages together; 1m above 15m means load is building.',
 	},
 	{
-		title: 'Network usage',
-		yAxisUnit: 'binBps',
+		title: 'Network usage (bytes)',
+		yAxisUnit: 'bytes',
 		docPath: '/infrastructure-monitoring/host-monitoring/#network-usage-bytes',
 		description:
 			'Throughput in bytes/s per interface and direction, to spot NICs nearing rated bandwidth.',
@@ -2841,8 +2841,8 @@ export const hostWidgetInfo = [
 			'Active connection counts per protocol and state (ESTABLISHED, TIME_WAIT, SYN_RECV) to spot leaks and churn.',
 	},
 	{
-		title: 'System disk IO',
-		yAxisUnit: 'binBps',
+		title: 'System disk io (bytes transferred)',
+		yAxisUnit: 'bytes',
 		docPath: '/infrastructure-monitoring/host-monitoring/#system-disk-io-bytes',
 		description:
 			'Disk throughput in bytes/s per device and direction, tracking heavy file I/O or database flushes.',

frontend/src/container/LogDetailedView/Overview.styles.scss

@@ -1,21 +1,4 @@
 .overview-container {
-	.data-viewer {
-		min-height: 500px;
-	}
-
-	.pretty-view__search-wrapper {
-		background: var(--l2-background);
-	}
-
-	.pretty-view__search-input {
-		background: var(--l2-background) !important;
-	}
-
-	.log-body-value {
-		white-space: pre-wrap;
-		overflow-wrap: anywhere;
-	}
-
 	.tag {
 		border-radius: 20px;
 		border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);

frontend/src/container/LogDetailedView/Overview.tsx

@@ -13,35 +13,21 @@ import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { OptionsQuery } from 'container/OptionsMenu/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronRight, Search } from '@signozhq/icons';
-import { useIsLogDetailsV2 } from 'components/LogDetail/useIsLogDetailsV2';
-import { DataViewer } from 'periscope/components/DataViewer';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
 import { ActionItemProps } from './ActionItem';
-import { useLogAttributeActions } from './hooks/useLogAttributeActions';
 import TableView from './TableView';
-import {
-	aggregateAttributesResourcesToObject,
-	buildPrettyViewData,
-	getBodyDisplayString,
-	getSanitizedLogBody,
-	removeEscapeCharacters,
-} from './utils';
+import { getBodyDisplayString, removeEscapeCharacters } from './utils';
 
 import './Overview.styles.scss';
 
-// Skip body sanitization above this size. sanitization is expensive and fails
-// for large bodies
-const MAX_BODY_SANITIZE_CHARS = 64 * 1024;
-
 interface OverviewProps {
 	logData: ILog;
 	isListViewPanel?: boolean;
 	selectedOptions: OptionsQuery;
 	listViewPanelSelectedFields?: IField[] | null;
 	handleChangeSelectedView?: ChangeViewFunctionType;
-	onApplyLogFilter?: (expression: string) => void;
 }
 
 type Props = OverviewProps &
@@ -56,7 +42,6 @@ function Overview({
 	selectedOptions,
 	listViewPanelSelectedFields,
 	handleChangeSelectedView,
-	onApplyLogFilter,
 }: Props): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
 	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(true);
@@ -66,55 +51,6 @@ function Overview({
 
 	const isDarkMode = useIsDarkMode();
 
-	const { actions, visibleActions } = useLogAttributeActions({
-		handleChangeSelectedView,
-		isListViewPanel,
-		onApplyLogFilter,
-	});
-
-	const isLogDetailsV2 = useIsLogDetailsV2();
-
-	if (isLogDetailsV2) {
-		const raw = aggregateAttributesResourcesToObject(logData);
-		const prettyData = buildPrettyViewData(raw);
-		return (
-			<div className="overview-container">
-				<DataViewer
-					data={prettyData}
-					drawerKey="logs-details"
-					fontSize={13}
-					prettyViewProps={{
-						actions,
-						visibleActions,
-						renderLeafValue: (value, keyPath): ReactNode | undefined => {
-							// Sanitize (unescape + ANSI→color) string values under `body`.
-							// Skip huge ones (render raw, still safe) to avoid the sanitize
-							// choke;
-							if (
-								typeof value !== 'string' ||
-								keyPath[keyPath.length - 1] !== 'body' ||
-								value.length > MAX_BODY_SANITIZE_CHARS
-							) {
-								return undefined;
-							}
-							return (
-								<span
-									className="log-body-value"
-									// Safe: getSanitizedLogBody runs the value through dompurify.
-									// eslint-disable-next-line react/no-danger
-									dangerouslySetInnerHTML={{
-										__html: getSanitizedLogBody(value, { shouldEscapeHtml: true }),
-									}}
-								/>
-							);
-						},
-					}}
-					jsonString={JSON.stringify(raw, null, 2)}
-				/>
-			</div>
-		);
-	}
-
 	const options: EditorProps['options'] = {
 		automaticLayout: true,
 		readOnly: true,

frontend/src/container/LogDetailedView/constants.ts

@@ -1,13 +0,0 @@
-export enum LogAttributeBucket {
-	ATTRIBUTES = 'attributes',
-	RESOURCES = 'resource',
-	SCOPE = 'scope',
-}
-
-export enum LogDetailsAction {
-	COPY = 'copy',
-	FILTER_IN = 'filter-in',
-	FILTER_OUT = 'filter-out',
-	GROUP_BY = 'group-by',
-	REPLACE_FILTER = 'replace-filter',
-}

frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx

@@ -1,268 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
-import { CircleMinus, CirclePlus, Layers, RefreshCw } from '@signozhq/icons';
-import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
-import { FeatureKeys } from 'constants/features';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
-import {
-	FieldContext,
-	PrettyViewAction,
-	VisibleActionsConfig,
-} from 'periscope/components/PrettyView/PrettyView';
-import { useAppContext } from 'providers/App/App';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-
-import { LogDetailsAction } from '../constants';
-import {
-	buildLogFilterTarget,
-	getFilterQueryData,
-	getGroupByQueryData,
-	getReplaceFilterQueryData,
-} from '../logAttributeActions.utils';
-
-interface UseLogAttributeActionsParams {
-	handleChangeSelectedView?: ChangeViewFunctionType;
-	isListViewPanel?: boolean;
-	onApplyLogFilter?: (expression: string) => void;
-}
-
-interface UseLogAttributeActionsResult {
-	actions: PrettyViewAction[];
-	visibleActions: VisibleActionsConfig;
-}
-
-const COPY_ONLY_ACTIONS = [LogDetailsAction.COPY];
-const ALL_LEAF_ACTIONS = [
-	LogDetailsAction.COPY,
-	LogDetailsAction.FILTER_IN,
-	LogDetailsAction.FILTER_OUT,
-	LogDetailsAction.GROUP_BY,
-	LogDetailsAction.REPLACE_FILTER,
-];
-
-/**
- * PrettyView filter/group-by/replace actions for the log-details drawer (keys mapped via
- * buildLogFilterTarget). Also owns `visibleActions` (leaf/nested + list-panel copy-only).
- */
-export function useLogAttributeActions({
-	handleChangeSelectedView,
-	isListViewPanel = false,
-	onApplyLogFilter,
-}: UseLogAttributeActionsParams): UseLogAttributeActionsResult {
-	const { pathname } = useLocation();
-	const { stagedQuery, updateQueriesData } = useQueryBuilder();
-	const { featureFlags } = useAppContext();
-	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
-
-	const isBodyJsonQueryEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
-			?.active || false;
-
-	const isOldExplorerOrLive =
-		pathname === ROUTES.OLD_LOGS_EXPLORER || pathname === ROUTES.LIVE_LOGS;
-
-	const filterFor = useCallback(
-		(context: FieldContext, isFilterIn: boolean): void => {
-			const target = buildLogFilterTarget(
-				context.fieldKeyPath,
-				context.fieldValue,
-				isBodyJsonQueryEnabled,
-			);
-			const operator = isFilterIn
-				? target.filterInOperator
-				: target.filterOutOperator;
-
-			// Non-explorer surfaces (infra monitoring, etc.) apply a ready v5
-			// expression fragment to their own query.
-			if (onApplyLogFilter) {
-				const base = {
-					filters: { items: [], op: 'AND' },
-				} as unknown as IBuilderQuery;
-				const nextFilters = getFilterQueryData(
-					base,
-					target,
-					context.fieldValue,
-					operator,
-				).filters ?? { items: [], op: 'AND' };
-				const { expression } = convertFiltersToExpression(nextFilters);
-				if (expression) {
-					onApplyLogFilter(expression);
-				}
-				return;
-			}
-
-			if (!stagedQuery) {
-				return;
-			}
-
-			const updatedQuery = updateQueriesData(
-				stagedQuery,
-				'queryData',
-				(item, index) =>
-					index === 0
-						? getFilterQueryData(item, target, context.fieldValue, operator)
-						: item,
-			);
-
-			const queryData: ICurrentQueryData = {
-				name: viewName,
-				id: updatedQuery.id,
-				query: updatedQuery,
-			};
-			handleChangeSelectedView?.(ExplorerViews.LIST, queryData);
-		},
-		[
-			stagedQuery,
-			isBodyJsonQueryEnabled,
-			updateQueriesData,
-			viewName,
-			handleChangeSelectedView,
-			onApplyLogFilter,
-		],
-	);
-
-	const groupBy = useCallback(
-		(context: FieldContext): void => {
-			if (!stagedQuery) {
-				return;
-			}
-			const target = buildLogFilterTarget(
-				context.fieldKeyPath,
-				context.fieldValue,
-				isBodyJsonQueryEnabled,
-			);
-			if (!target.groupBySupported || !target.groupByKey) {
-				return;
-			}
-
-			const updatedQuery = updateQueriesData(
-				stagedQuery,
-				'queryData',
-				(item, index) => (index === 0 ? getGroupByQueryData(item, target) : item),
-			);
-
-			const queryData: ICurrentQueryData = {
-				name: viewName,
-				id: updatedQuery.id,
-				query: updatedQuery,
-			};
-			handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
-		},
-		[
-			stagedQuery,
-			isBodyJsonQueryEnabled,
-			updateQueriesData,
-			viewName,
-			handleChangeSelectedView,
-		],
-	);
-
-	const replaceFilter = useCallback(
-		(context: FieldContext): void => {
-			if (!stagedQuery) {
-				return;
-			}
-			const target = buildLogFilterTarget(
-				context.fieldKeyPath,
-				context.fieldValue,
-				isBodyJsonQueryEnabled,
-			);
-
-			const updatedQuery = updateQueriesData(
-				stagedQuery,
-				'queryData',
-				(item, index) =>
-					index === 0
-						? getReplaceFilterQueryData(item, target, context.fieldValue)
-						: item,
-			);
-
-			const queryData: ICurrentQueryData = {
-				name: viewName,
-				id: updatedQuery.id,
-				query: updatedQuery,
-			};
-			handleChangeSelectedView?.(ExplorerViews.LIST, queryData);
-		},
-		[
-			stagedQuery,
-			isBodyJsonQueryEnabled,
-			updateQueriesData,
-			viewName,
-			handleChangeSelectedView,
-		],
-	);
-
-	const actions: PrettyViewAction[] = useMemo(() => {
-		const isRestricted = (fieldKeyPath: (string | number)[]): boolean =>
-			buildLogFilterTarget(fieldKeyPath, undefined, isBodyJsonQueryEnabled)
-				.isRestricted;
-
-		// The using surface must provide an apply path.
-		const canApplyFilter = !!handleChangeSelectedView || !!onApplyLogFilter;
-
-		return [
-			{
-				key: LogDetailsAction.FILTER_IN,
-				label: 'Filter for value',
-				icon: <CirclePlus size={12} />,
-				onClick: (context): void => filterFor(context, true),
-				shouldHide: (_key, fieldKeyPath): boolean =>
-					!canApplyFilter || isRestricted(fieldKeyPath),
-			},
-			{
-				key: LogDetailsAction.FILTER_OUT,
-				label: 'Filter out value',
-				icon: <CircleMinus size={12} />,
-				onClick: (context): void => filterFor(context, false),
-				shouldHide: (_key, fieldKeyPath): boolean =>
-					!canApplyFilter || isRestricted(fieldKeyPath),
-			},
-			{
-				key: LogDetailsAction.GROUP_BY,
-				label: 'Group by field',
-				icon: <Layers size={12} />,
-				onClick: groupBy,
-				shouldHide: (_key, fieldKeyPath): boolean =>
-					!handleChangeSelectedView ||
-					!buildLogFilterTarget(fieldKeyPath, undefined, isBodyJsonQueryEnabled)
-						.groupBySupported ||
-					isOldExplorerOrLive,
-			},
-			{
-				key: LogDetailsAction.REPLACE_FILTER,
-				label: 'Replace filters with this value',
-				icon: <RefreshCw size={12} />,
-				onClick: replaceFilter,
-				shouldHide: (_key, fieldKeyPath): boolean =>
-					!handleChangeSelectedView ||
-					isRestricted(fieldKeyPath) ||
-					isOldExplorerOrLive,
-			},
-		];
-	}, [
-		filterFor,
-		groupBy,
-		replaceFilter,
-		isBodyJsonQueryEnabled,
-		isOldExplorerOrLive,
-		handleChangeSelectedView,
-		onApplyLogFilter,
-	]);
-
-	const visibleActions = useMemo<VisibleActionsConfig>(
-		() => ({
-			leaf: isListViewPanel ? COPY_ONLY_ACTIONS : ALL_LEAF_ACTIONS,
-			nested: COPY_ONLY_ACTIONS,
-		}),
-		[isListViewPanel],
-	);
-
-	return { actions, visibleActions };
-}

frontend/src/container/LogDetailedView/logAttributeActions.utils.test.ts

@@ -1,246 +0,0 @@
-import { MetricsType } from 'container/MetricsApplication/constant';
-
-import {
-	buildLogFilterTarget,
-	toTypedFilterValue,
-} from './logAttributeActions.utils';
-
-describe('buildLogFilterTarget', () => {
-	describe('attributes / resources / scope / top-level scalars', () => {
-		it('maps a top-level scalar to its bare key with =/!=, groupable', () => {
-			const t = buildLogFilterTarget(['severity_text'], 'ERROR', true);
-			expect(t).toMatchObject({
-				fieldKey: 'severity_text',
-				filterInOperator: '=',
-				filterOutOperator: '!=',
-				groupBySupported: true,
-				groupByKey: 'severity_text',
-				isRestricted: false,
-			});
-			expect(t.metricsType).toBeUndefined();
-		});
-
-		it('strips the `attributes` root to a bare dotted key + Tag type', () => {
-			expect(
-				buildLogFilterTarget(['attributes', 'http.method'], 'GET', true),
-			).toMatchObject({
-				fieldKey: 'http.method',
-				filterInOperator: '=',
-				metricsType: MetricsType.Tag,
-				groupBySupported: true,
-			});
-		});
-
-		it('maps `resources` with Resource type', () => {
-			expect(
-				buildLogFilterTarget(['resource', 'service.name'], 'api', true),
-			).toMatchObject({
-				fieldKey: 'service.name',
-				metricsType: MetricsType.Resource,
-			});
-		});
-
-		it('maps `scope` with Scope type', () => {
-			expect(
-				buildLogFilterTarget(['scope', 'name'], 'my-scope', true),
-			).toMatchObject({ fieldKey: 'name', metricsType: MetricsType.Scope });
-		});
-
-		it('offers group-by for attributes now', () => {
-			expect(
-				buildLogFilterTarget(['attributes', 'k'], 'v', true).groupBySupported,
-			).toBe(true);
-		});
-	});
-
-	describe('nested attribute values (parsed JSON)', () => {
-		it('marks a sub-field of a parsed attribute copy-only (restricted, no group-by)', () => {
-			const t = buildLogFilterTarget(['attributes', 'payload', 'x'], 1, true);
-			expect(t.isRestricted).toBe(true);
-			expect(t.groupBySupported).toBe(false);
-			expect(t.groupByKey).toBeUndefined();
-		});
-
-		it('leaves a top-level attribute (depth 2) filterable', () => {
-			const t = buildLogFilterTarget(['attributes', 'payload'], 'v', true);
-			expect(t.isRestricted).toBe(false);
-			expect(t.groupBySupported).toBe(true);
-		});
-
-		it('does not restrict nested resource/scope values', () => {
-			expect(
-				buildLogFilterTarget(['resource', 'k8s', 'pod'], 'p', true).isRestricted,
-			).toBe(false);
-			expect(
-				buildLogFilterTarget(['scope', 'a', 'b'], 'v', true).isRestricted,
-			).toBe(false);
-		});
-	});
-
-	describe('restricted fields (timestamp / id)', () => {
-		it.each(['timestamp', 'id'])(
-			'marks %s restricted with no group-by',
-			(key) => {
-				const t = buildLogFilterTarget([key], 'v', true);
-				expect(t.isRestricted).toBe(true);
-				expect(t.groupBySupported).toBe(false);
-				expect(t.groupByKey).toBeUndefined();
-			},
-		);
-	});
-
-	describe('group-by-restricted fields (trace_id)', () => {
-		it('allows filtering but not group-by on top-level trace_id', () => {
-			const t = buildLogFilterTarget(['trace_id'], 'abc123', true);
-			expect(t.isRestricted).toBe(false);
-			expect(t.filterInOperator).toBe('=');
-			expect(t.groupBySupported).toBe(false);
-			expect(t.groupByKey).toBeUndefined();
-		});
-
-		it.each([
-			['resource', ['resource', 'trace_id']],
-			['attributes', ['attributes', 'trace_id']],
-		])(
-			'blocks group-by on a %s field named trace_id, keeping filter',
-			(_bucket, path) => {
-				const t = buildLogFilterTarget(path as string[], 'abc123', true);
-				expect(t.isRestricted).toBe(false);
-				expect(t.filterInOperator).toBe('=');
-				expect(t.groupBySupported).toBe(false);
-				expect(t.groupByKey).toBeUndefined();
-			},
-		);
-	});
-
-	describe('body scalars', () => {
-		it('maps a top-level body scalar to body.<key> with =/!=, groupable when json body on', () => {
-			const t = buildLogFilterTarget(['body', 'message'], 'hello', true);
-			expect(t).toMatchObject({
-				fieldKey: 'body.message',
-				filterInOperator: '=',
-				filterOutOperator: '!=',
-				groupBySupported: true,
-				groupByKey: 'body.message',
-				isRestricted: false,
-			});
-			expect(t.dataType).toBeDefined();
-			expect(t.metricsType).toBeUndefined();
-		});
-
-		it('maps a nested body scalar to a dotted body key', () => {
-			expect(buildLogFilterTarget(['body', 'a', 'b'], 'x', true)).toMatchObject({
-				fieldKey: 'body.a.b',
-				groupBySupported: true,
-				groupByKey: 'body.a.b',
-			});
-		});
-
-		it('does not offer group-by when USE_JSON_BODY is off', () => {
-			const t = buildLogFilterTarget(['body', 'message'], 'hello', false);
-			expect(t.groupBySupported).toBe(false);
-			expect(t.groupByKey).toBeUndefined();
-			expect(t.fieldKey).toBe('body.message');
-		});
-
-		it('filters the whole `body` field when body is an unparsed string leaf', () => {
-			expect(buildLogFilterTarget(['body'], 'raw text', true)).toMatchObject({
-				fieldKey: 'body',
-				filterInOperator: '=',
-				groupBySupported: false,
-			});
-		});
-
-		it('restricts a body leaf named `timestamp` (no filter / group-by)', () => {
-			const t = buildLogFilterTarget(['body', 'timestamp'], '2026-01-01', true);
-			expect(t.fieldKey).toBe('body.timestamp');
-			expect(t.isRestricted).toBe(true);
-			expect(t.groupBySupported).toBe(false);
-			expect(t.groupByKey).toBeUndefined();
-		});
-
-		it('restricts a nested body leaf named `timestamp`', () => {
-			const t = buildLogFilterTarget(['body', 'obj', 'timestamp'], 'x', true);
-			expect(t.isRestricted).toBe(true);
-			expect(t.groupBySupported).toBe(false);
-		});
-
-		it('restricts a body leaf named `id` (uses RESTRICTED_SELECTED_FIELDS)', () => {
-			expect(buildLogFilterTarget(['body', 'id'], 'abc', true).isRestricted).toBe(
-				true,
-			);
-		});
-
-		it('does not restrict an ordinary body leaf', () => {
-			expect(
-				buildLogFilterTarget(['body', 'message'], 'hello', true).isRestricted,
-			).toBe(false);
-		});
-	});
-
-	describe('body arrays', () => {
-		it('uses has()/!has() on the array key for a primitive array element', () => {
-			const t = buildLogFilterTarget(['body', 'tags', 0], 'urgent', true);
-			expect(t).toMatchObject({
-				fieldKey: 'body.tags',
-				filterInOperator: 'has',
-				groupBySupported: false,
-			});
-			expect(t.filterOutOperator).toContain('has');
-			expect(t.filterOutOperator).not.toBe('has');
-		});
-
-		it('collapses deep array-element paths to a []-marked has() key', () => {
-			expect(
-				buildLogFilterTarget(
-					['body', 'config', 'features', 1, 'items', 0, 'variants', 2],
-					'ballpen',
-					true,
-				),
-			).toMatchObject({
-				fieldKey: 'body.config.features[].items[].variants',
-				filterInOperator: 'has',
-			});
-		});
-
-		it('maps a field nested inside an array element with =/!= and a []-marked key, no group-by', () => {
-			expect(
-				buildLogFilterTarget(['body', 'items', 2, 'sku'], 'ABC', true),
-			).toMatchObject({
-				fieldKey: 'body.items[].sku',
-				filterInOperator: '=',
-				filterOutOperator: '!=',
-				groupBySupported: false,
-			});
-		});
-
-		it('uses the [*] string-body marker for an array element when USE_JSON_BODY is off', () => {
-			expect(
-				buildLogFilterTarget(['body', 'tags', 0], 'urgent', false),
-			).toMatchObject({ fieldKey: 'body.tags[*]', filterInOperator: 'has' });
-		});
-
-		it('uses [*] for a field nested inside an array element when USE_JSON_BODY is off', () => {
-			expect(
-				buildLogFilterTarget(['body', 'items', 2, 'sku'], 'ABC', false),
-			).toMatchObject({ fieldKey: 'body.items[*].sku', filterInOperator: '=' });
-		});
-	});
-});
-
-describe('toTypedFilterValue', () => {
-	const run = (value: unknown): unknown => toTypedFilterValue(value);
-
-	it('keeps numbers/booleans as their JS type (so the expression stays unquoted)', () => {
-		expect(run(848)).toBe(848);
-		expect(typeof run(848)).toBe('number');
-		expect(run(1.1)).toBe(1.1);
-		expect(run(true)).toBe(true);
-		expect(typeof run(true)).toBe('boolean');
-	});
-
-	it('passes strings through unchanged (no numeric inference)', () => {
-		expect(run('unknown_service')).toBe('unknown_service');
-		expect(typeof run('12345')).toBe('string');
-	});
-});

frontend/src/container/LogDetailedView/logAttributeActions.utils.ts

@@ -1,241 +0,0 @@
-import { v4 as uuid } from 'uuid';
-import {
-	negateOperator,
-	OPERATORS,
-	QUERY_BUILDER_FUNCTIONS,
-} from 'constants/antlrQueryConstants';
-import { OPERATORS as QUERY_BUILDER_OPERATORS } from 'constants/queryBuilder';
-import {
-	RESTRICTED_GROUP_BY_FIELDS,
-	RESTRICTED_SELECTED_FIELDS,
-} from 'container/LogsFilters/config';
-import { MetricsType } from 'container/MetricsApplication/constant';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
-import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-
-import { LogAttributeBucket } from './constants';
-import { generateFieldKeyForArray, getDataTypes } from './utils';
-
-export const toTypedFilterValue = (value: unknown): string =>
-	typeof value === 'number' || typeof value === 'boolean'
-		? (value as unknown as string)
-		: String(value);
-
-export interface LogFilterTarget {
-	fieldKey: string;
-	filterInOperator: string;
-	filterOutOperator: string;
-	dataType?: DataTypes;
-	metricsType?: MetricsType;
-	groupBySupported: boolean;
-	groupByKey?: string;
-	isRestricted: boolean;
-}
-
-// Collapse a body forward path into the query-builder key segment; array indices become
-// `[]` (json body on) or `[*]` (string body off — a distinct operator/search path).
-//   ['items', 2, 'sku'] -> 'items[].sku' (json on)  / 'items[*].sku' (off)
-//   ['tags', 0]         -> 'tags[]'      (json on)  / 'tags[*]'      (off)
-const collapseBodyPath = (
-	subpath: (string | number)[],
-	isBodyJsonQueryEnabled: boolean,
-): string => {
-	const arrayMarker = isBodyJsonQueryEnabled ? '[]' : '[*]';
-	let out = '';
-	subpath.forEach((seg) => {
-		if (typeof seg === 'number') {
-			out += arrayMarker;
-		} else {
-			out += out ? `.${seg}` : seg;
-		}
-	});
-	return out;
-};
-
-const metricsTypeForRoot = (root: string | number): MetricsType | undefined => {
-	if (root === LogAttributeBucket.ATTRIBUTES) {
-		return MetricsType.Tag;
-	}
-	if (root === LogAttributeBucket.RESOURCES) {
-		return MetricsType.Resource;
-	}
-	if (root === LogAttributeBucket.SCOPE) {
-		return MetricsType.Scope;
-	}
-	return undefined;
-};
-
-/**
- * Map a PrettyView leaf (forward keyPath) to its query-builder filter/group-by target:
- * scalars → `=`/`!=`, body array elements → `has`/`!has`; group-by gated by
- * `groupBySupported`. Attribute/resource/scope carry a `metricsType` (Tag/Resource/Scope).
- */
-export const buildLogFilterTarget = (
-	fieldKeyPath: (string | number)[],
-	value: unknown,
-	isBodyJsonQueryEnabled: boolean,
-): LogFilterTarget => {
-	const root = fieldKeyPath[0];
-
-	// Attributes / resources / scope / top-level scalars: bare dotted key, =/!=.
-	if (root !== 'body') {
-		const fieldKey =
-			fieldKeyPath.length > 1 ? fieldKeyPath.slice(1).join('.') : String(root);
-		// Temporarily removing filter/group-by support for nested attributes.
-		// This will be removed once backend starts to support these actions.
-		const isNestedAttributeValue =
-			root === LogAttributeBucket.ATTRIBUTES && fieldKeyPath.length > 2;
-
-		const isRestricted =
-			RESTRICTED_SELECTED_FIELDS.includes(fieldKey) || isNestedAttributeValue;
-
-		const groupBySupported =
-			!isRestricted && !RESTRICTED_GROUP_BY_FIELDS.includes(fieldKey);
-		return {
-			fieldKey,
-			filterInOperator: OPERATORS['='],
-			filterOutOperator: OPERATORS['!='],
-			dataType: getDataTypes(value),
-			metricsType: metricsTypeForRoot(root),
-			groupBySupported,
-			groupByKey: groupBySupported ? fieldKey : undefined,
-			isRestricted,
-		};
-	}
-
-	const subpath = fieldKeyPath.slice(1);
-
-	// Whole-body leaf (unparsed string body): filter on the `body` field itself.
-	if (subpath.length === 0) {
-		return {
-			fieldKey: 'body',
-			filterInOperator: OPERATORS['='],
-			filterOutOperator: OPERATORS['!='],
-			dataType: getDataTypes(value),
-			groupBySupported: false,
-			isRestricted: false,
-		};
-	}
-
-	const collapsed = collapseBodyPath(subpath, isBodyJsonQueryEnabled);
-	const isArrayElement = typeof subpath[subpath.length - 1] === 'number';
-
-	if (isArrayElement) {
-		// has(body.<array>, value): generateFieldKeyForArray strips the trailing value
-		// segment + `[]` exactly as the old BodyTitleRenderer.filterHandler did.
-		const fieldKey = generateFieldKeyForArray(
-			`${collapsed}.${String(value)}`,
-			getDataTypes(value),
-			isBodyJsonQueryEnabled,
-		);
-		return {
-			fieldKey,
-			filterInOperator: QUERY_BUILDER_FUNCTIONS.HAS,
-			filterOutOperator: negateOperator(QUERY_BUILDER_FUNCTIONS.HAS),
-			dataType: getDataTypes([value]),
-			groupBySupported: false,
-			isRestricted: false,
-		};
-	}
-
-	const fieldKey = `body.${collapsed}`;
-	// Restrict body leaves whose own key is a restricted field (e.g. a JSON body's own
-	// `timestamp`/`id`/`date`) — hides filter / group-by, same as top-level fields.
-	const leafKey = String(subpath[subpath.length - 1]);
-	const isRestricted = RESTRICTED_SELECTED_FIELDS.includes(leafKey);
-	// Group by only for plain body scalars (no array anywhere in the path) with json
-	// body on — mirrors isGroupBySupported in the old BodyTitleRenderer.
-	const groupBySupported =
-		isBodyJsonQueryEnabled && !collapsed.includes('[]') && !isRestricted;
-	return {
-		fieldKey,
-		filterInOperator: OPERATORS['='],
-		filterOutOperator: OPERATORS['!='],
-		dataType: getDataTypes(value),
-		groupBySupported,
-		groupByKey: groupBySupported ? fieldKey : undefined,
-		isRestricted,
-	};
-};
-
-const normalizeDataType = (
-	dataType: DataTypes | undefined,
-): DataTypes | undefined =>
-	dataType && Object.values(DataTypes).includes(dataType) ? dataType : undefined;
-
-// Append a filter item (filter-in / filter-out) to a query-data item. The autocomplete
-// key is fabricated locally (empty source list), so no click-time getAggregateKeys fetch.
-export const getFilterQueryData = (
-	item: IBuilderQuery,
-	target: LogFilterTarget,
-	value: unknown,
-	operator: string,
-): IBuilderQuery => {
-	const filterKey = chooseAutocompleteFromCustomValue(
-		[],
-		target.fieldKey,
-		target.dataType,
-		target.metricsType,
-	);
-	return {
-		...item,
-		filters: {
-			items: [
-				...(item.filters?.items || []),
-				{
-					id: uuid(),
-					key: filterKey,
-					op: getOperatorValue(operator),
-					value: toTypedFilterValue(value),
-				},
-			],
-			op: item.filters?.op || 'AND',
-		},
-	};
-};
-
-// Append a group-by. Caller guards groupBySupported / groupByKey.
-export const getGroupByQueryData = (
-	item: IBuilderQuery,
-	target: LogFilterTarget,
-): IBuilderQuery => {
-	const newGroupByItem: BaseAutocompleteData = {
-		key: target.groupByKey || '',
-		type: target.metricsType || '',
-		dataType: normalizeDataType(target.dataType),
-	};
-	return { ...item, groupBy: [...(item.groupBy || []), newGroupByItem] };
-};
-
-// Replace all filters with a single IN filter on this value.
-export const getReplaceFilterQueryData = (
-	item: IBuilderQuery,
-	target: LogFilterTarget,
-	value: unknown,
-): IBuilderQuery => {
-	const newFilterItem: BaseAutocompleteData = {
-		key: target.fieldKey,
-		type: target.metricsType || '',
-		dataType: normalizeDataType(target.dataType),
-	};
-	return {
-		...item,
-		filters: {
-			items: [
-				{
-					id: '',
-					key: newFilterItem,
-					op: QUERY_BUILDER_OPERATORS.IN,
-					value: [toTypedFilterValue(value)],
-				},
-			],
-			op: 'AND',
-		},
-		filter: { expression: '' },
-	};
-};

frontend/src/container/LogDetailedView/util.test.ts

@@ -1,121 +1,12 @@
-import { ILog } from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import {
-	aggregateAttributesResourcesToObject,
-	buildPrettyViewData,
 	flattenObject,
 	getDataTypes,
 	getSanitizedLogBody,
-	parseJsonStringValue,
 	recursiveParseJSON,
 } from './utils';
 
-describe('parseJsonStringValue', () => {
-	it('parses a JSON-object string into an object', () => {
-		expect(parseJsonStringValue('{"a":1,"b":{"c":2}}')).toStrictEqual({
-			a: 1,
-			b: { c: 2 },
-		});
-	});
-
-	it('parses a JSON-array string into an array', () => {
-		expect(parseJsonStringValue('[1,2,3]')).toStrictEqual([1, 2, 3]);
-	});
-
-	it('returns a plain (non-JSON) string unchanged', () => {
-		expect(parseJsonStringValue('plain log line')).toBe('plain log line');
-	});
-
-	it('returns a string that is not object/array-looking unchanged', () => {
-		expect(parseJsonStringValue('42')).toBe('42');
-	});
-
-	it('returns an invalid JSON string unchanged', () => {
-		expect(parseJsonStringValue('{not valid}')).toBe('{not valid}');
-	});
-
-	it('returns an already-object value unchanged (same reference)', () => {
-		const value = { message: 'hi', a: 1 };
-		expect(parseJsonStringValue(value)).toBe(value);
-	});
-
-	it('leaves a value larger than the 128KB parse guard as a string', () => {
-		const huge = `{"x":"${'a'.repeat(130 * 1024)}"}`;
-		expect(parseJsonStringValue(huge)).toBe(huge);
-	});
-});
-
-describe('buildPrettyViewData', () => {
-	const baseRaw = {
-		id: 'log-1',
-		timestamp: 1234,
-		body: 'hello',
-		attributes: {},
-		resource: {},
-		scope: {},
-	} as any;
-
-	it('parses a JSON-string body into a tree', () => {
-		const result = buildPrettyViewData({ ...baseRaw, body: '{"a":1}' });
-		expect(result.body).toStrictEqual({ a: 1 });
-	});
-
-	it('parses attribute values that are JSON strings, leaves others as-is', () => {
-		const result = buildPrettyViewData({
-			...baseRaw,
-			attributes: { payload: '{"x":1}', name: 'cart', count: 3 },
-		});
-		expect(result.attributes).toStrictEqual({
-			payload: { x: 1 },
-			name: 'cart',
-			count: 3,
-		});
-	});
-
-	it('drops undefined fields so they do not render as empty rows', () => {
-		const result = buildPrettyViewData({ ...baseRaw, trace_id: undefined });
-		expect('trace_id' in result).toBe(false);
-	});
-});
-
-describe('aggregateAttributesResourcesToObject', () => {
-	const mockLog = {
-		id: 'log-1',
-		timestamp: 1234,
-		body: 'hello',
-		severity_text: 'INFO',
-		severity_number: 9,
-		attributes_string: { 'http.method': 'GET' },
-		attributes_int: { retries: 3 },
-		resources_string: { 'service.name': 'cart' },
-		scope_string: { lib: 'otel' },
-	} as unknown as ILog;
-
-	it('merges attributes_/resources_/scope_ maps and keeps scalars + body', () => {
-		const result = aggregateAttributesResourcesToObject(mockLog);
-
-		expect(result.attributes).toStrictEqual({
-			'http.method': 'GET',
-			retries: 3,
-		});
-		expect(result.resource).toStrictEqual({ 'service.name': 'cart' });
-		expect(result.scope).toStrictEqual({ lib: 'otel' });
-		expect(result.body).toBe('hello');
-		expect(result.id).toBe('log-1');
-		expect(result.severity_text).toBe('INFO');
-	});
-
-	it('does not parse a JSON-string body (leaves it raw)', () => {
-		const result = aggregateAttributesResourcesToObject({
-			...mockLog,
-			body: '{"a":1}',
-		} as unknown as ILog);
-
-		expect(result.body).toBe('{"a":1}');
-	});
-});
-
 describe('recursiveParseJSON', () => {
 	it('should return an empty object if the input is not valid JSON', () => {
 		const result = recursiveParseJSON('not valid JSON');

frontend/src/container/LogDetailedView/utils.tsx

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/react';
 import Convert from 'ansi-to-html';
 import type { DataNode } from 'antd/es/tree';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
@@ -263,11 +262,10 @@ export const filterKeyForField = (field: string): string => {
 	return fieldAttribs?.newField || field;
 };
 
-export const aggregateAttributesResourcesToObject = (
-	logData: ILog,
-): ILogAggregateAttributesResources => {
+export const aggregateAttributesResourcesToString = (logData: ILog): string => {
 	const outputJson: ILogAggregateAttributesResources = {
 		body: logData.body,
+		date: logData.date,
 		id: logData.id,
 		severityNumber: logData.severityNumber,
 		severityText: logData.severityText,
@@ -276,94 +274,29 @@ export const aggregateAttributesResourcesToObject = (
 		traceFlags: logData.traceFlags,
 		traceId: logData.traceId,
 		attributes: {},
-		resource: {},
+		resources: {},
 		scope: {},
 		severity_text: logData.severity_text,
 		severity_number: logData.severity_number,
 	};
 
 	Object.keys(logData).forEach((key) => {
-		if (key === 'date') {
-			return;
-		}
 		if (key.startsWith('attributes_')) {
 			outputJson.attributes = outputJson.attributes || {};
 			Object.assign(outputJson.attributes, logData[key as keyof ILog]);
 		} else if (key.startsWith('resources_')) {
-			outputJson.resource = outputJson.resource || {};
-			Object.assign(outputJson.resource, logData[key as keyof ILog]);
+			outputJson.resources = outputJson.resources || {};
+			Object.assign(outputJson.resources, logData[key as keyof ILog]);
 		} else if (key.startsWith('scope_string')) {
 			outputJson.scope = outputJson.scope || {};
 			Object.assign(outputJson.scope, logData[key as keyof ILog]);
 		} else {
-			// @ts-expect-error dynamic top-level copy
+			// @ts-expect-error
 			outputJson[key] = logData[key as keyof ILog];
 		}
 	});
 
-	// Show `timestamp` first and `id` last in the details view.
-	const { timestamp, id, ...rest } = outputJson;
-	return { timestamp, ...rest, id };
-};
-
-export const aggregateAttributesResourcesToString = (logData: ILog): string => {
-	try {
-		return JSON.stringify(aggregateAttributesResourcesToObject(logData), null, 2);
-	} catch (err) {
-		Sentry.captureException(err);
-		return '';
-	}
-};
-
-const MAX_JSON_PARSE_BYTES = 128 * 1024;
-
-// A JSON-encoded object/array string is parsed so DataViewer renders it as a tree
-// instead of one escaped string; non-JSON / plain-text values are returned unchanged.
-// Guarded against very large payloads.
-export const parseJsonStringValue = (value: unknown): unknown => {
-	if (typeof value !== 'string') {
-		return value;
-	}
-	const trimmed = value.trim();
-	const looksLikeJson = trimmed.startsWith('{') || trimmed.startsWith('[');
-	if (!looksLikeJson || trimmed.length > MAX_JSON_PARSE_BYTES) {
-		return value;
-	}
-	try {
-		const parsed = JSON.parse(trimmed);
-		return parsed !== null && typeof parsed === 'object' ? parsed : value;
-	} catch {
-		return value;
-	}
-};
-
-// Parse each attribute value that's a stringified JSON string into an object
-// Non-JSON values are left unchanged.
-const parseAttributeJsonValues = (
-	attributes: Record<string, unknown>,
-): Record<string, unknown> => {
-	const parsed: Record<string, unknown> = {};
-	Object.keys(attributes).forEach((key) => {
-		parsed[key] = parseJsonStringValue(attributes[key]);
-	});
-	return parsed;
-};
-
-export const buildPrettyViewData = (
-	raw: ILogAggregateAttributesResources,
-): Record<string, unknown> => {
-	const prettyData: Record<string, unknown> = { ...raw };
-	prettyData.body = parseJsonStringValue(raw.body);
-	prettyData.attributes = parseAttributeJsonValues(raw.attributes);
-
-	// drop undefined fields so they don't render as empty rows
-	Object.keys(prettyData).forEach((key) => {
-		if (prettyData[key] === undefined) {
-			delete prettyData[key];
-		}
-	});
-
-	return prettyData;
+	return JSON.stringify(outputJson, null, 2);
 };
 
 const isFloat = (num: number): boolean => num % 1 !== 0;

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -113,7 +113,6 @@ function LogsActionsContainer({
 					onClose={(): void => setIsFieldsSelectorOpen(false)}
 					signal={DataSource.LOGS}
 					requiredFields={LOGS_REQUIRED_COLUMNS}
-					allowCustomFields
 				/>
 			)}
 		</div>