feat(prometheus): add the Prometheus query API under a /prometheus prefix

New GET|POST /prometheus/api/v1/query_range and /prometheus/api/v1/query
endpoints (pkg/prometheus/promapi), following the Prometheus HTTP API:
float-unix or RFC3339 times, float-seconds or duration-string durations,
the {status, data, errorType, error, warnings, infos} envelope with
Prometheus' status codes, and the 11,000-point cap. Wired through
signoz.Handlers like the other domain handlers. Range queries serve
through the RangeExecutor capability when the provider has it, so a
clickhousev2-serving deployment transpiles through these endpoints too.

The promapiconformance suite replays the frozen promqltest corpus against
these endpoints with clickhousev2 as the serving provider - the two paths
nothing else exercises. Instant cases go through /query with a real time
parameter. Its ledger holds the seven known Kahan-class divergences of
transpiled coarse-step serving.

Purely additive: the existing GET /api/v1/query_range and /api/v1/query
handlers are untouched.

Assisted-by: Claude Fable 5

.github/CODEOWNERS

@@ -152,21 +152,32 @@ go.mod @therealpandey
 
 ## Dashboard Types
 
-/frontend/src/types/api/dashboard/ @SigNoz/pulse-frontend
-/frontend/src/types/api/widgets/ @SigNoz/pulse-frontend
+/frontend/src/api/types/dashboard/ @SigNoz/pulse-frontend
 
-## Widget Card
+## Dashboard List
 
-/frontend/src/container/WidgetCard/ @SigNoz/pulse-frontend
+/frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
+/frontend/src/container/ListOfDashboard/ @SigNoz/pulse-frontend
+
+# Dashboard Widget Page
+
+/frontend/src/pages/DashboardWidget/ @SigNoz/pulse-frontend
+/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
+
+## Dashboard Page
+
+/frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
+/frontend/src/container/DashboardContainer/ @SigNoz/pulse-frontend
+/frontend/src/container/GridCardLayout/ @SigNoz/pulse-frontend
 
 ## Public Dashboard Page
 
 /frontend/src/pages/PublicDashboard/ @SigNoz/pulse-frontend
+/frontend/src/container/PublicDashboardContainer/ @SigNoz/pulse-frontend
 
 ## Dashboard Libs + Components
 
 /frontend/src/lib/uPlotV2/ @SigNoz/pulse-frontend
-/frontend/src/lib/visualization/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboard/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboardVariables/ @SigNoz/pulse-frontend
 /frontend/src/components/NewSelect/ @SigNoz/pulse-frontend

.github/workflows/integrationci.yaml

@@ -58,6 +58,7 @@ jobs:
           - querierai
           - rawexportdata
           - promqlconformance
+          - promapiconformance
           - querierauthz
           - role
           - rootuser

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

ee/query-service/app/server.go

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

frontend/.oxlintrc.json

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

frontend/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/package.json

@@ -16,7 +16,6 @@
     "lint:generated": "oxlint ./src/api/generated --fix",
     "lint:fix": "oxlint ./src --fix",
     "lint:styles": "stylelint \"src/**/*.scss\"",
-    "test:plugins": "node --test \"plugins/__tests__/*.test.mjs\"",
     "jest": "jest",
     "jest:coverage": "jest --coverage",
     "jest:watch": "jest --watch",
@@ -88,7 +87,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",
@@ -127,7 +125,6 @@
     "rrule": "2.8.1",
     "styled-components": "^5.3.11",
     "timestamp-nano": "^1.0.0",
-    "translation-resilience": "^0.2.0",
     "typescript": "5.9.3",
     "uplot": "1.6.31",
     "uuid": "14.0.1",
@@ -197,7 +194,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",
@@ -238,4 +235,4 @@
     "tmp@<0.2.6": ">=0.2.6 <0.3.0",
     "yaml@>=1.0.0 <1.10.3": ">=1.10.3 <2"
   }
-}
+}

frontend/plugins/__tests__/README.md

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

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

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

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

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

frontend/plugins/__tests__/rule-tester.mjs

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

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

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

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

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

frontend/plugins/signoz.mjs

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

frontend/pnpm-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/AppRoutes/pageComponents.ts

@@ -94,12 +94,17 @@ export const OnboardingV2 = Loadable(
 export const DashboardsListPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "DashboardsListPage" */ 'pages/DashboardsListPageV2'
+			/* webpackChunkName: "DashboardsListPage" */ 'pages/DashboardsListPage'
 		),
 );
 
 export const DashboardPage = Loadable(
-	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardPageV2'),
+	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardPage'),
+);
+
+export const DashboardWidget = Loadable(
+	() =>
+		import(/* webpackChunkName: "DashboardWidgetPage" */ 'pages/DashboardWidget'),
 );
 
 export const DashboardPanelEditorPage = Loadable(

frontend/src/AppRoutes/routes.ts

@@ -13,6 +13,7 @@ import {
 	DashboardPage,
 	DashboardPanelEditorPage,
 	DashboardsListPage,
+	DashboardWidget,
 	EditRulesPage,
 	ErrorDetails,
 	ForgotPassword,
@@ -182,6 +183,13 @@ const routes: AppRoutes[] = [
 		isPrivate: false,
 		key: 'PUBLIC_DASHBOARD',
 	},
+	{
+		path: ROUTES.DASHBOARD_WIDGET,
+		exact: true,
+		component: DashboardWidget,
+		isPrivate: true,
+		key: 'DASHBOARD_WIDGET',
+	},
 	{
 		path: ROUTES.DASHBOARD_PANEL_EDITOR,
 		exact: true,

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

@@ -0,0 +1,36 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
+import { ErrorV2Resp, 	 SuccessResponseV2 } from 'types/api';
+import { CreatePublicDashboardProps } from 'types/api/dashboard/public/create';
+
+/**
+ * @deprecated Use the generated `useCreatePublicDashboard` hook (or `createPublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const createPublicDashboard = async (
+	props: CreatePublicDashboardProps,
+): Promise<SuccessResponseV2<CreatePublicDashboardProps>> => {
+
+    const { dashboardId, timeRangeEnabled = false, defaultTimeRange = DEFAULT_TIME_RANGE } = props;
+
+	try {
+		const response = await axios.post(
+			`/dashboards/${dashboardId}/public`,
+			{ timeRangeEnabled, defaultTimeRange },
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default createPublicDashboard;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,36 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
+import {  ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { UpdatePublicDashboardProps } from 'types/api/dashboard/public/update';
+
+/**
+ * @deprecated Use the generated `useUpdatePublicDashboard` hook (or `updatePublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const updatePublicDashboard = async (
+	props: UpdatePublicDashboardProps,
+): Promise<SuccessResponseV2<UpdatePublicDashboardProps>> => {
+
+    const { dashboardId, timeRangeEnabled = false, defaultTimeRange = DEFAULT_TIME_RANGE } = props;
+
+	try {
+		const response = await axios.put(
+			`/dashboards/${dashboardId}/public`,
+			{ timeRangeEnabled, defaultTimeRange },
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default updatePublicDashboard;

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
@@ -9948,6 +9934,47 @@ export interface TypesChangePasswordRequestDTO {
 	oldPassword?: string;
 }
 
+export interface TypesDeprecatedUserDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	displayName?: string;
+	/**
+	 * @type string
+	 */
+	email?: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type boolean
+	 */
+	isRoot?: boolean;
+	/**
+	 * @type string
+	 */
+	orgId?: string;
+	/**
+	 * @type string
+	 */
+	role?: string;
+	/**
+	 * @type string
+	 */
+	status?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
 export interface TypesIdentifiableDTO {
 	/**
 	 * @type string
@@ -9955,6 +9982,47 @@ export interface TypesIdentifiableDTO {
 	id: string;
 }
 
+export interface TypesInviteDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	email?: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	inviteLink?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	orgId?: string;
+	/**
+	 * @type string
+	 */
+	role?: string;
+	/**
+	 * @type string
+	 */
+	token?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
 export interface TypesOrganizationDTO {
 	/**
 	 * @type string
@@ -10004,6 +10072,25 @@ export interface TypesPostableForgotPasswordDTO {
 	orgId: string;
 }
 
+export interface TypesPostableInviteDTO {
+	/**
+	 * @type string
+	 */
+	email?: string;
+	/**
+	 * @type string
+	 */
+	frontendBaseUrl?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	role?: string;
+}
+
 export interface TypesPostableResetPasswordDTO {
 	/**
 	 * @type string
@@ -10015,6 +10102,13 @@ export interface TypesPostableResetPasswordDTO {
 	token?: string;
 }
 
+export interface TypesPostableRoleDTO {
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
 export interface TypesPostableVerifyResetPasswordTokenDTO {
 	/**
 	 * @type string
@@ -10169,93 +10263,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 +10525,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
@@ -10708,6 +10751,17 @@ export type GetFieldsValues200 = {
 	status: string;
 };
 
+export type GetResetPasswordTokenDeprecatedPathParameters = {
+	id: string;
+};
+export type GetResetPasswordTokenDeprecated200 = {
+	data: TypesResetPasswordTokenDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetGlobalConfig200 = {
 	data: GlobaltypesConfigDTO;
 	/**
@@ -10716,6 +10770,14 @@ export type GetGlobalConfig200 = {
 	status: string;
 };
 
+export type CreateInvite201 = {
+	data: TypesInviteDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListLLMPricingRulesParams = {
 	/**
 	 * @type integer
@@ -11013,6 +11075,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;
 	/**
@@ -11113,6 +11190,25 @@ export type GetTraceAggregations200 = {
 	status: string;
 };
 
+export type ListUsersDeprecated200 = {
+	/**
+	 * @type array
+	 */
+	data: TypesDeprecatedUserDTO[];
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetMyUserDeprecated200 = {
+	data: TypesDeprecatedUserDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListUserPreferences200 = {
 	/**
 	 * @type array
@@ -11138,42 +11234,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;
 	/**
@@ -12343,6 +12403,13 @@ export type GetRolesByUserID200 = {
 	status: string;
 };
 
+export type SetRoleByUserIDPathParameters = {
+	id: string;
+};
+export type RemoveUserRoleByUserIDAndRoleIDPathParameters = {
+	id: string;
+	roleId: string;
+};
 export type GetMyUser200 = {
 	data: AuthtypesUserWithRolesDTO;
 	/**

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

@@ -20,6 +20,7 @@ import type {
 import type {
 	AuthtypesPostableUserDTO,
 	AuthtypesPostableUserRoleDTO,
+	CreateInvite201,
 	CreateResetPasswordToken201,
 	CreateResetPasswordTokenPathParameters,
 	CreateUser201,
@@ -27,7 +28,10 @@ import type {
 	DeleteUserPathParameters,
 	DeleteUserRolePathParameters,
 	GetMyUser200,
+	GetMyUserDeprecated200,
 	GetResetPasswordToken200,
+	GetResetPasswordTokenDeprecated200,
+	GetResetPasswordTokenDeprecatedPathParameters,
 	GetResetPasswordTokenPathParameters,
 	GetRolesByUserID200,
 	GetRolesByUserIDPathParameters,
@@ -38,10 +42,15 @@ import type {
 	GetUsersByRoleID200,
 	GetUsersByRoleIDPathParameters,
 	ListUsers200,
+	ListUsersDeprecated200,
+	RemoveUserRoleByUserIDAndRoleIDPathParameters,
 	RenderErrorResponseDTO,
+	SetRoleByUserIDPathParameters,
 	TypesChangePasswordRequestDTO,
 	TypesPostableForgotPasswordDTO,
+	TypesPostableInviteDTO,
 	TypesPostableResetPasswordDTO,
+	TypesPostableRoleDTO,
 	TypesPostableVerifyResetPasswordTokenDTO,
 	TypesUpdatableUserDTO,
 	UpdateUserPathParameters,
@@ -51,12 +60,379 @@ import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
 /**
- * This endpoint is deprecated and always fails. Use GET /api/v2/users/me instead.
+ * This endpoint returns the reset password token by id
+ * @deprecated
+ * @summary Get reset password token
+ */
+export const getResetPasswordTokenDeprecated = (
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetResetPasswordTokenDeprecated200>({
+		url: `/api/v1/getResetPasswordToken/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetResetPasswordTokenDeprecatedQueryKey = ({
+	id,
+}: GetResetPasswordTokenDeprecatedPathParameters) => {
+	return [`/api/v1/getResetPasswordToken/${id}`] as const;
+};
+
+export const getGetResetPasswordTokenDeprecatedQueryOptions = <
+	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetResetPasswordTokenDeprecatedQueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
+	> = ({ signal }) => getResetPasswordTokenDeprecated({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetResetPasswordTokenDeprecatedQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
+>;
+export type GetResetPasswordTokenDeprecatedQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Get reset password token
+ */
+
+export function useGetResetPasswordTokenDeprecated<
+	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetResetPasswordTokenDeprecatedQueryOptions(
+		{ id },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @deprecated
+ * @summary Get reset password token
+ */
+export const invalidateGetResetPasswordTokenDeprecated = async (
+	queryClient: QueryClient,
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetResetPasswordTokenDeprecatedQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates an invite for a user
+ * @deprecated
+ * @summary Create invite
+ */
+export const createInvite = (
+	typesPostableInviteDTO?: BodyType<TypesPostableInviteDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateInvite201>({
+		url: `/api/v1/invite`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: typesPostableInviteDTO,
+		signal,
+	});
+};
+
+export const getCreateInviteMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createInvite>>,
+		TError,
+		{ data?: BodyType<TypesPostableInviteDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createInvite>>,
+	TError,
+	{ data?: BodyType<TypesPostableInviteDTO> },
+	TContext
+> => {
+	const mutationKey = ['createInvite'];
+	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 createInvite>>,
+		{ data?: BodyType<TypesPostableInviteDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createInvite(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateInviteMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createInvite>>
+>;
+export type CreateInviteMutationBody =
+	| BodyType<TypesPostableInviteDTO>
+	| undefined;
+export type CreateInviteMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Create invite
+ */
+export const useCreateInvite = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createInvite>>,
+		TError,
+		{ data?: BodyType<TypesPostableInviteDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createInvite>>,
+	TError,
+	{ data?: BodyType<TypesPostableInviteDTO> },
+	TContext
+> => {
+	return useMutation(getCreateInviteMutationOptions(options));
+};
+/**
+ * This endpoint resets the password by token
+ * @deprecated
+ * @summary Reset password
+ */
+export const resetPasswordDeprecated = (
+	typesPostableResetPasswordDTO?: BodyType<TypesPostableResetPasswordDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/resetPassword`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: typesPostableResetPasswordDTO,
+		signal,
+	});
+};
+
+export const getResetPasswordDeprecatedMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof resetPasswordDeprecated>>,
+		TError,
+		{ data?: BodyType<TypesPostableResetPasswordDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof resetPasswordDeprecated>>,
+	TError,
+	{ data?: BodyType<TypesPostableResetPasswordDTO> },
+	TContext
+> => {
+	const mutationKey = ['resetPasswordDeprecated'];
+	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 resetPasswordDeprecated>>,
+		{ data?: BodyType<TypesPostableResetPasswordDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return resetPasswordDeprecated(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ResetPasswordDeprecatedMutationResult = NonNullable<
+	Awaited<ReturnType<typeof resetPasswordDeprecated>>
+>;
+export type ResetPasswordDeprecatedMutationBody =
+	| BodyType<TypesPostableResetPasswordDTO>
+	| undefined;
+export type ResetPasswordDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Reset password
+ */
+export const useResetPasswordDeprecated = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof resetPasswordDeprecated>>,
+		TError,
+		{ data?: BodyType<TypesPostableResetPasswordDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof resetPasswordDeprecated>>,
+	TError,
+	{ data?: BodyType<TypesPostableResetPasswordDTO> },
+	TContext
+> => {
+	return useMutation(getResetPasswordDeprecatedMutationOptions(options));
+};
+/**
+ * This endpoint lists all users
+ * @deprecated
+ * @summary List users
+ */
+export const listUsersDeprecated = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListUsersDeprecated200>({
+		url: `/api/v1/user`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListUsersDeprecatedQueryKey = () => {
+	return [`/api/v1/user`] as const;
+};
+
+export const getListUsersDeprecatedQueryOptions = <
+	TData = Awaited<ReturnType<typeof listUsersDeprecated>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listUsersDeprecated>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListUsersDeprecatedQueryKey();
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof listUsersDeprecated>>
+	> = ({ signal }) => listUsersDeprecated(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listUsersDeprecated>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListUsersDeprecatedQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listUsersDeprecated>>
+>;
+export type ListUsersDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary List users
+ */
+
+export function useListUsersDeprecated<
+	TData = Awaited<ReturnType<typeof listUsersDeprecated>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listUsersDeprecated>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListUsersDeprecatedQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @deprecated
+ * @summary List users
+ */
+export const invalidateListUsersDeprecated = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListUsersDeprecatedQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint returns the user I belong to
  * @deprecated
  * @summary Get my user
  */
 export const getMyUserDeprecated = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<GetMyUserDeprecated200>({
 		url: `/api/v1/user/me`,
 		method: 'GET',
 		signal,
@@ -1458,6 +1834,189 @@ export const invalidateGetRolesByUserID = async (
 	return queryClient;
 };
 
+/**
+ * This endpoint assigns the role to the user roles by user id
+ * @deprecated
+ * @summary Set user roles
+ */
+export const setRoleByUserID = (
+	{ id }: SetRoleByUserIDPathParameters,
+	typesPostableRoleDTO?: BodyType<TypesPostableRoleDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/users/${id}/roles`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: typesPostableRoleDTO,
+		signal,
+	});
+};
+
+export const getSetRoleByUserIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof setRoleByUserID>>,
+		TError,
+		{
+			pathParams: SetRoleByUserIDPathParameters;
+			data?: BodyType<TypesPostableRoleDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof setRoleByUserID>>,
+	TError,
+	{
+		pathParams: SetRoleByUserIDPathParameters;
+		data?: BodyType<TypesPostableRoleDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['setRoleByUserID'];
+	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 setRoleByUserID>>,
+		{
+			pathParams: SetRoleByUserIDPathParameters;
+			data?: BodyType<TypesPostableRoleDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return setRoleByUserID(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type SetRoleByUserIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof setRoleByUserID>>
+>;
+export type SetRoleByUserIDMutationBody =
+	| BodyType<TypesPostableRoleDTO>
+	| undefined;
+export type SetRoleByUserIDMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Set user roles
+ */
+export const useSetRoleByUserID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof setRoleByUserID>>,
+		TError,
+		{
+			pathParams: SetRoleByUserIDPathParameters;
+			data?: BodyType<TypesPostableRoleDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof setRoleByUserID>>,
+	TError,
+	{
+		pathParams: SetRoleByUserIDPathParameters;
+		data?: BodyType<TypesPostableRoleDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getSetRoleByUserIDMutationOptions(options));
+};
+/**
+ * This endpoint removes a role from the user by user id and role id
+ * @deprecated
+ * @summary Remove a role from user
+ */
+export const removeUserRoleByUserIDAndRoleID = (
+	{ id, roleId }: RemoveUserRoleByUserIDAndRoleIDPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/users/${id}/roles/${roleId}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getRemoveUserRoleByUserIDAndRoleIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof removeUserRoleByUserIDAndRoleID>>,
+		TError,
+		{ pathParams: RemoveUserRoleByUserIDAndRoleIDPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof removeUserRoleByUserIDAndRoleID>>,
+	TError,
+	{ pathParams: RemoveUserRoleByUserIDAndRoleIDPathParameters },
+	TContext
+> => {
+	const mutationKey = ['removeUserRoleByUserIDAndRoleID'];
+	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 removeUserRoleByUserIDAndRoleID>>,
+		{ pathParams: RemoveUserRoleByUserIDAndRoleIDPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return removeUserRoleByUserIDAndRoleID(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type RemoveUserRoleByUserIDAndRoleIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof removeUserRoleByUserIDAndRoleID>>
+>;
+
+export type RemoveUserRoleByUserIDAndRoleIDMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Remove a role from user
+ */
+export const useRemoveUserRoleByUserIDAndRoleID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof removeUserRoleByUserIDAndRoleID>>,
+		TError,
+		{ pathParams: RemoveUserRoleByUserIDAndRoleIDPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof removeUserRoleByUserIDAndRoleID>>,
+	TError,
+	{ pathParams: RemoveUserRoleByUserIDAndRoleIDPathParameters },
+	TContext
+> => {
+	return useMutation(getRemoveUserRoleByUserIDAndRoleIDMutationOptions(options));
+};
 /**
  * This endpoint returns the user I belong to
  * @summary Get my user v2

frontend/src/api/infraMonitoring/getHostLists.ts

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

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

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/dashboard/create';
+import { Dashboard } from 'types/api/dashboard/getAll';
+
+const create = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/dashboards', {
+			...props,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default create;

frontend/src/api/v1/dashboards/getAll.ts

@@ -0,0 +1,19 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Dashboard, PayloadProps } from 'types/api/dashboard/getAll';
+
+const getAll = async (): Promise<SuccessResponseV2<Dashboard[]>> => {
+	try {
+		const response = await axios.get<PayloadProps>('/dashboards');
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getAll;

frontend/src/api/v1/dashboards/id/delete.ts

@@ -0,0 +1,21 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/dashboard/delete';
+
+const deleteDashboard = async (
+	props: Props,
+): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.delete<PayloadProps>(`/dashboards/${props.id}`);
+		return {
+			httpStatusCode: response.status,
+			data: null,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default deleteDashboard;

frontend/src/api/v1/dashboards/id/get.ts

@@ -0,0 +1,20 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/dashboard/get';
+import { Dashboard } from 'types/api/dashboard/getAll';
+
+const get = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/dashboards/${props.id}`);
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default get;

frontend/src/api/v1/dashboards/id/lock.ts

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/dashboard/lockUnlock';
+
+const lock = async (props: Props): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.put<PayloadProps>(
+			`/dashboards/${props.id}/lock`,
+			{ lock: props.lock },
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default lock;

frontend/src/api/v1/dashboards/id/update.ts

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Dashboard } from 'types/api/dashboard/getAll';
+import { PayloadProps, Props } from 'types/api/dashboard/update';
+
+const update = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/dashboards/${props.id}`, {
+			...props.data,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default update;

frontend/src/assets/CustomIcons/ApacheIcon.tsx

@@ -0,0 +1,176 @@
+export default function ApacheIcon(): JSX.Element {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M8.7112 1.05739C8.3796 1.30831 8.08524 1.60498 7.83691 1.93853L8.17977 2.58567C8.40218 2.26279 8.64677 1.95576 8.91177 1.66681C8.93063 1.64581 8.94091 1.63596 8.94091 1.63596L8.91177 1.66681C8.66003 1.95965 8.43081 2.27111 8.22606 2.59853C8.67305 2.56672 9.11808 2.51165 9.55934 2.43353C9.60936 2.25525 9.62374 2.06886 9.60168 1.88502C9.57962 1.70118 9.52154 1.52349 9.43077 1.3621C9.43077 1.3621 9.09991 0.828957 8.7112 1.05739Z"
+				fill="url(#paint0_linear_2061_4195)"
+			/>
+			<path
+				d="M7.55932 6.49365L7.42432 6.51722L7.49332 6.50651C7.51432 6.50265 7.53703 6.49837 7.55932 6.49365Z"
+				fill="#BE202E"
+			/>
+			<path
+				opacity="0.35"
+				d="M7.55932 6.49365L7.42432 6.51722L7.49332 6.50651C7.51432 6.50265 7.53703 6.49837 7.55932 6.49365Z"
+				fill="#BE202E"
+			/>
+			<path
+				d="M7.67407 5.92858L7.6955 5.92558C7.72464 5.9213 7.75336 5.91616 7.78122 5.91016L7.67493 5.92816L7.67407 5.92858Z"
+				fill="#BE202E"
+			/>
+			<path
+				opacity="0.35"
+				d="M7.67407 5.92858L7.6955 5.92558C7.72464 5.9213 7.75336 5.91616 7.78122 5.91016L7.67493 5.92816L7.67407 5.92858Z"
+				fill="#BE202E"
+			/>
+			<path
+				d="M7.16872 4.25736C7.273 4.0625 7.37858 3.87221 7.48543 3.6865C7.59629 3.49393 7.70829 3.3075 7.82143 3.12721L7.84115 3.09507C7.95315 2.91793 8.066 2.74779 8.17972 2.58464L7.83686 1.9375L7.75886 2.03393C7.65986 2.15736 7.55743 2.29107 7.452 2.43036C7.33329 2.58893 7.21115 2.75779 7.08729 2.93564C6.97286 3.09979 6.85672 3.27164 6.74058 3.44993C6.64158 3.60121 6.54258 3.75721 6.444 3.91707L6.43286 3.93507L6.879 4.8145C6.97443 4.62707 7.071 4.44136 7.16872 4.25736Z"
+				fill="url(#paint1_linear_2061_4195)"
+			/>
+			<path
+				d="M5.13606 9.22519C5.07692 9.38748 5.01763 9.55305 4.95821 9.72191L4.95563 9.72919L4.93035 9.80076C4.89049 9.91476 4.85535 10.015 4.77563 10.2503C4.92444 10.3467 5.0416 10.4847 5.11249 10.6472C5.10283 10.4581 5.01907 10.2804 4.87935 10.1526C5.16043 10.1981 5.44862 10.1654 5.71236 10.0581C5.97609 9.95074 6.20521 9.77291 6.37463 9.54405C6.40102 9.50088 6.42464 9.45607 6.44535 9.40991C6.37459 9.49741 6.28141 9.56408 6.17575 9.6028C6.07008 9.64152 5.95589 9.65084 5.84535 9.62976C6.20937 9.49539 6.51802 9.24316 6.72221 8.91319C6.76978 8.83691 6.81563 8.75376 6.86278 8.66162C6.6974 8.84328 6.48756 8.97872 6.25393 9.05463C6.02029 9.13053 5.77091 9.14426 5.53035 9.09448L5.16949 9.13391C5.15706 9.16434 5.14721 9.19476 5.13606 9.22519Z"
+				fill="url(#paint2_linear_2061_4195)"
+			/>
+			<path
+				d="M5.30448 8.417C5.38248 8.21528 5.46276 8.01157 5.54533 7.80586C5.62419 7.60871 5.70519 7.41057 5.78833 7.21143C5.87148 7.01228 5.95633 6.81228 6.0429 6.61143C6.1309 6.40828 6.22076 6.20557 6.31248 6.00328C6.40419 5.801 6.49633 5.60257 6.5889 5.408C6.62262 5.33714 6.65662 5.26643 6.6909 5.19586C6.75005 5.07414 6.80962 4.95343 6.86962 4.83371C6.87262 4.82728 6.87605 4.82086 6.87948 4.81443L6.4329 3.93457L6.41105 3.97014C6.30733 4.14157 6.20362 4.313 6.10205 4.49128C6.00048 4.66957 5.89848 4.853 5.80205 5.03814C5.7189 5.19443 5.63776 5.35157 5.55862 5.50957L5.51148 5.606C5.41419 5.80614 5.32633 5.99943 5.24705 6.18543C5.15705 6.396 5.07762 6.59686 5.00876 6.788C4.9629 6.91357 4.92305 7.03486 4.88362 7.151C4.85233 7.25043 4.82276 7.34986 4.79448 7.451C4.72762 7.68471 4.67048 7.91771 4.62305 8.15L5.07133 9.035C5.13076 8.87671 5.19162 8.71614 5.2539 8.55328L5.30448 8.417Z"
+				fill="url(#paint3_linear_2061_4195)"
+			/>
+			<path
+				d="M4.615 8.18082C4.55868 8.46014 4.51975 8.74268 4.49843 9.02682C4.49843 9.03668 4.49843 9.04653 4.49629 9.05639C4.3547 8.8778 4.1801 8.72808 3.982 8.61539C4.24526 8.95089 4.41819 9.34823 4.48429 9.76953C4.28982 9.78674 4.0942 9.75338 3.91643 9.67268C4.05057 9.80984 4.21714 9.91096 4.40072 9.96668C4.14974 10.0146 3.9168 10.1307 3.72743 10.3022C3.97375 10.178 4.25059 10.1271 4.525 10.1557C4.21858 11.024 3.91129 11.9827 3.604 13.0001C3.64664 12.988 3.6856 12.9655 3.71739 12.9346C3.74918 12.9037 3.7728 12.8654 3.78615 12.8231C3.841 12.6388 4.20443 11.4298 4.77443 9.84068L4.82372 9.70439L4.83743 9.66625C4.89772 9.49968 4.96015 9.32968 5.02472 9.15625L5.06758 9.03753V9.03539L4.62143 8.15039C4.61929 8.16025 4.61672 8.17053 4.615 8.18082Z"
+				fill="url(#paint4_linear_2061_4195)"
+			/>
+			<path
+				d="M6.94843 4.89059L6.90986 4.96987C6.87129 5.04959 6.83214 5.13102 6.79243 5.21416C6.74957 5.30416 6.70671 5.3963 6.66386 5.49059C6.64157 5.53816 6.621 5.58573 6.59743 5.63416C6.53057 5.7793 6.46286 5.92916 6.39429 6.08373C6.30857 6.27402 6.22286 6.47173 6.13714 6.67687C6.054 6.87259 5.96971 7.07516 5.88429 7.28459C5.80314 7.48459 5.721 7.68973 5.63786 7.90002C5.56386 8.08888 5.48914 8.28273 5.41371 8.48159C5.40986 8.49145 5.40643 8.50087 5.403 8.51073C5.32814 8.70873 5.25257 8.91187 5.17629 9.12016L5.17114 9.1343L5.532 9.09487L5.51057 9.09102C6.039 8.98351 6.52026 8.7126 6.88629 8.31659C7.0686 8.1182 7.22683 7.89896 7.35771 7.66345C7.47147 7.46033 7.57252 7.25036 7.66029 7.03473C7.74386 6.83245 7.824 6.61387 7.90114 6.37645C7.79448 6.43086 7.68084 6.47037 7.56343 6.49388C7.54157 6.49859 7.52057 6.50287 7.49657 6.50673C7.47257 6.51059 7.45071 6.51445 7.42757 6.51745C7.80325 6.36305 8.10458 6.06924 8.26843 5.69759C8.12155 5.79773 7.95733 5.86966 7.78414 5.90973C7.75586 5.91616 7.72757 5.92087 7.69843 5.92516L7.677 5.92816C7.80484 5.87656 7.92565 5.80903 8.03657 5.72716C8.05843 5.71087 8.07943 5.69373 8.1 5.67573C8.13129 5.64873 8.16086 5.62045 8.18914 5.59002C8.20714 5.57116 8.22471 5.55145 8.24186 5.53087C8.28293 5.48179 8.32059 5.42996 8.35457 5.37573C8.36529 5.35859 8.376 5.34145 8.38629 5.32345C8.39957 5.29773 8.41243 5.27245 8.42486 5.24716C8.481 5.13402 8.526 5.03288 8.56157 4.94459C8.57957 4.90173 8.595 4.85888 8.60829 4.82116C8.61386 4.80616 8.619 4.79116 8.62371 4.7783C8.63786 4.73545 8.64943 4.69816 8.65843 4.66473C8.66941 4.62595 8.67828 4.58661 8.685 4.54688C8.67015 4.5586 8.65454 4.56934 8.63829 4.57902C8.4822 4.66169 8.31419 4.71953 8.14029 4.75045H8.13257L8.08157 4.75859L8.09057 4.75473L6.957 4.87902L6.94843 4.89059Z"
+				fill="url(#paint5_linear_2061_4195)"
+			/>
+			<path
+				d="M8.22475 2.59871C8.12404 2.75343 8.01389 2.92914 7.89561 3.12843L7.87675 3.16014C7.77446 3.33157 7.66604 3.52114 7.55147 3.72886C7.45261 3.90771 7.34989 4.10014 7.24332 4.30614C7.15018 4.48586 7.05418 4.67671 6.95532 4.87871L8.08889 4.75443C8.33914 4.65567 8.55501 4.48583 8.70989 4.26586C8.74804 4.211 8.78618 4.15357 8.82432 4.09443C8.94089 3.91271 9.05489 3.71257 9.15689 3.51371C9.25018 3.33322 9.33429 3.14813 9.40889 2.95914C9.44758 2.86102 9.48092 2.76087 9.50875 2.65914C9.52932 2.58028 9.54561 2.50571 9.55804 2.43457C9.11675 2.51236 8.67172 2.56715 8.22475 2.59871Z"
+				fill="url(#paint6_linear_2061_4195)"
+			/>
+			<path
+				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
+				fill="#BE202E"
+			/>
+			<path
+				opacity="0.35"
+				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
+				fill="#BE202E"
+			/>
+			<path
+				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
+				fill="url(#paint7_linear_2061_4195)"
+			/>
+			<defs>
+				<linearGradient
+					id="paint0_linear_2061_4195"
+					x1="7.26579"
+					y1="1.16584"
+					x2="9.7782"
+					y2="0.46843"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#F69923" />
+					<stop offset="0.312" stopColor="#F79A23" />
+					<stop offset="0.838" stopColor="#E97826" />
+				</linearGradient>
+				<linearGradient
+					id="paint1_linear_2061_4195"
+					x1="1.76109"
+					y1="12.4382"
+					x2="6.87606"
+					y2="1.48267"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.323" stopColor="#9E2064" />
+					<stop offset="0.63" stopColor="#C92037" />
+					<stop offset="0.751" stopColor="#CD2335" />
+					<stop offset="1" stopColor="#E97826" />
+				</linearGradient>
+				<linearGradient
+					id="paint2_linear_2061_4195"
+					x1="3.47784"
+					y1="11.6287"
+					x2="6.5258"
+					y2="5.10046"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#282662" />
+					<stop offset="0.095" stopColor="#662E8D" />
+					<stop offset="0.788" stopColor="#9F2064" />
+					<stop offset="0.949" stopColor="#CD2032" />
+				</linearGradient>
+				<linearGradient
+					id="paint3_linear_2061_4195"
+					x1="1.94596"
+					y1="11.7748"
+					x2="7.06094"
+					y2="0.819304"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.323" stopColor="#9E2064" />
+					<stop offset="0.63" stopColor="#C92037" />
+					<stop offset="0.751" stopColor="#CD2335" />
+					<stop offset="1" stopColor="#E97826" />
+				</linearGradient>
+				<linearGradient
+					id="paint4_linear_2061_4195"
+					x1="2.46768"
+					y1="11.0455"
+					x2="5.15578"
+					y2="5.28798"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#282662" />
+					<stop offset="0.095" stopColor="#662E8D" />
+					<stop offset="0.788" stopColor="#9F2064" />
+					<stop offset="0.949" stopColor="#CD2032" />
+				</linearGradient>
+				<linearGradient
+					id="paint5_linear_2061_4195"
+					x1="3.08048"
+					y1="12.3044"
+					x2="8.19546"
+					y2="1.3489"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.323" stopColor="#9E2064" />
+					<stop offset="0.63" stopColor="#C92037" />
+					<stop offset="0.751" stopColor="#CD2335" />
+					<stop offset="1" stopColor="#E97826" />
+				</linearGradient>
+				<linearGradient
+					id="paint6_linear_2061_4195"
+					x1="2.70679"
+					y1="12.9581"
+					x2="7.82195"
+					y2="2.00223"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.323" stopColor="#9E2064" />
+					<stop offset="0.63" stopColor="#C92037" />
+					<stop offset="0.751" stopColor="#CD2335" />
+					<stop offset="1" stopColor="#E97826" />
+				</linearGradient>
+				<linearGradient
+					id="paint7_linear_2061_4195"
+					x1="3.41759"
+					y1="12.4619"
+					x2="8.53277"
+					y2="1.50629"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.323" stopColor="#9E2064" />
+					<stop offset="0.63" stopColor="#C92037" />
+					<stop offset="0.751" stopColor="#CD2335" />
+					<stop offset="1" stopColor="#E97826" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

frontend/src/assets/CustomIcons/DockerIcon.tsx

@@ -0,0 +1,28 @@
+export default function DockerIcon(): JSX.Element {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<g clipPath="url(#clip0_2061_4220)">
+				<path
+					d="M13.574 5.82107C13.2652 5.60679 12.5575 5.52644 12.0042 5.63358C11.9398 5.09788 11.6439 4.62915 11.1292 4.21399L10.8332 3.99971L10.6274 4.30774C10.37 4.70951 10.2413 5.27198 10.2799 5.80768C10.2928 5.99517 10.3571 6.32998 10.5502 6.62461C10.37 6.73175 9.99686 6.86567 9.50789 6.86567H0.204685L0.17895 6.97281C0.0888774 7.5085 0.0888774 9.18254 1.14401 10.4682C1.9418 11.4458 3.12561 11.9414 4.68258 11.9414C8.05386 11.9414 10.5502 10.3209 11.7211 7.38797C12.1843 7.40136 13.1751 7.38797 13.677 6.38354C13.6898 6.35676 13.7156 6.30319 13.8056 6.10231L13.8571 5.99517L13.574 5.82107ZM7.6421 2.04443H6.22668V3.38367H7.6421V2.04443ZM7.6421 3.65151H6.22668V4.99074H7.6421V3.65151ZM5.96933 3.65151H4.5539V4.99074H5.96933V3.65151ZM4.29655 3.65151H2.88113V4.99074H4.29655V3.65151ZM2.62378 5.25859H1.20835V6.59782H2.62378V5.25859ZM4.29655 5.25859H2.88113V6.59782H4.29655V5.25859ZM5.96933 5.25859H4.5539V6.59782H5.96933V5.25859ZM7.6421 5.25859H6.22668V6.59782H7.6421V5.25859ZM9.31488 5.25859H7.89945V6.59782H9.31488V5.25859Z"
+					fill="#2396ED"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_2061_4220">
+					<rect
+						width="13.7143"
+						height="13.7143"
+						fill="white"
+						transform="translate(0.142822 0.143066)"
+					/>
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}

frontend/src/assets/CustomIcons/ElasticSearchIcon.tsx

@@ -0,0 +1,36 @@
+export default function ElasticSearchIcon(): JSX.Element {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M6.38041 6.94508L9.70241 8.45858L13.0524 5.52158C13.1019 5.27892 13.1255 5.03171 13.1229 4.78408C13.1236 3.9846 12.8681 3.20592 12.3941 2.56216C11.92 1.9184 11.2522 1.44339 10.4885 1.20675C9.72487 0.970101 8.9055 0.984259 8.15047 1.24714C7.39544 1.51003 6.74446 2.00782 6.29291 2.66758L5.73291 5.56008L6.38041 6.94508Z"
+				fill="#FED10A"
+			/>
+			<path
+				d="M2.943 10.4593C2.89356 10.7062 2.86994 10.9575 2.8725 11.2093C2.87361 12.012 3.13177 12.7932 3.60915 13.4385C4.08654 14.0838 4.75804 14.5592 5.52528 14.7952C6.29252 15.0311 7.11514 15.0151 7.87262 14.7495C8.63009 14.4839 9.28259 13.9827 9.7345 13.3193L10.2845 10.4398L9.55 9.02928L6.215 7.50928L2.943 10.4593Z"
+				fill="#24BBB1"
+			/>
+			<path
+				d="M2.92394 4.71302L5.19994 5.25002L5.69994 2.66552C5.39077 2.43015 5.01365 2.30134 4.62509 2.29839C4.23654 2.29544 3.8575 2.41852 3.54479 2.64916C3.23208 2.8798 3.00256 3.20559 2.89063 3.57768C2.77869 3.94978 2.79039 4.34813 2.92394 4.71302Z"
+				fill="#EF5098"
+			/>
+			<path
+				d="M2.72503 5.2583C2.23266 5.42016 1.80253 5.73058 1.49379 6.14687C1.18505 6.56317 1.01286 7.0649 1.00091 7.58305C0.988962 8.1012 1.13784 8.61033 1.42706 9.04041C1.71628 9.4705 2.13164 9.80042 2.61603 9.9848L5.81003 7.0998L5.22653 5.8498L2.72503 5.2583Z"
+				fill="#17A8E0"
+			/>
+			<path
+				d="M10.312 13.3197C10.6209 13.5543 10.9975 13.6825 11.3853 13.6851C11.7732 13.6877 12.1514 13.5646 12.4634 13.3342C12.7755 13.1038 13.0044 12.7785 13.116 12.407C13.2276 12.0356 13.2159 11.6379 13.0825 11.2737L10.812 10.7412L10.312 13.3197Z"
+				fill="#93C83E"
+			/>
+			<path
+				d="M10.7735 10.145L13.2735 10.7285C13.7666 10.5672 14.1976 10.257 14.507 9.84058C14.8165 9.42415 14.9891 8.922 15.0013 8.40333C15.0134 7.88467 14.8643 7.375 14.5747 6.94457C14.2851 6.51414 13.8691 6.18413 13.384 6L10.1135 8.8665L10.7735 10.145Z"
+				fill="#0779A1"
+			/>
+		</svg>
+	);
+}

frontend/src/assets/CustomIcons/HerokuIcon.tsx

@@ -0,0 +1,27 @@
+function HerokuIcon(): JSX.Element {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<g clipPath="url(#clip0_2061_4245)">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M13.6285 0H2.10787C1.31283 0 0.666748 0.644312 0.666748 1.44112V14.5602C0.666748 15.3557 1.31283 16 2.10787 16H13.6285C14.4237 16 15.0678 15.3557 15.0678 14.5602V1.44112C15.0678 0.644312 14.4237 0 13.6285 0ZM14.2677 14.5602C14.2677 14.9135 13.9815 15.1994 13.6285 15.1994H2.10787C1.75506 15.1994 1.46688 14.9135 1.46688 14.5602V1.44112C1.46688 1.08654 1.75506 0.800133 2.10787 0.800133H13.6285C13.9815 0.800133 14.2677 1.08654 14.2677 1.44112V14.5602ZM4.26699 13.6009L6.06823 12.0002L4.26699 10.3999V13.6009ZM10.7719 7.11485C10.4481 6.78927 9.8569 6.40038 8.86819 6.40038C7.78342 6.40038 6.66611 6.68302 5.86752 6.94177V2.40082H4.26704V9.33907L5.39807 8.82667C5.41688 8.81826 7.24025 8.00086 8.86819 8.00086C9.68027 8.00086 9.86022 8.44796 9.86885 8.82158V13.6009H11.4676V8.801C11.4693 8.6983 11.4592 7.81051 10.7719 7.11485ZM8.66761 5.00027H10.2681C10.9912 4.1811 11.3597 3.30903 11.4677 2.40066H9.86881C9.69063 3.30726 9.29643 4.17424 8.66761 5.00027Z"
+					fill="#6762A6"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_2061_4245">
+					<rect width="16" height="16" fill="white" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}
+
+export default HerokuIcon;

frontend/src/assets/CustomIcons/MongoDBIcon.tsx

@@ -0,0 +1,68 @@
+export default function MongoDBIcon(): JSX.Element {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M7.26568 13.0004L6.94382 12.8937C6.94382 12.8937 6.98668 11.2651 6.39739 11.1507C6.01168 10.7015 6.45439 -8.02403 7.86439 11.0868C7.59687 11.2225 7.39217 11.4564 7.29311 11.7395C7.24001 12.1577 7.23082 12.5803 7.26568 13.0004Z"
+				fill="url(#paint0_linear_2061_4238)"
+			/>
+			<path
+				d="M7.43957 11.4272C8.29654 10.7821 8.95282 9.90701 9.33214 8.90369C9.71147 7.90037 9.79826 6.81 9.58243 5.75931C8.95243 2.98002 7.46058 2.06631 7.29986 1.71745C7.1612 1.50022 7.04284 1.27068 6.94629 1.03174L7.065 8.7756C7.065 8.7756 6.819 11.1422 7.43957 11.4272Z"
+				fill="url(#paint1_linear_2061_4238)"
+			/>
+			<path
+				d="M6.78015 11.5296C6.78015 11.5296 4.15687 9.74286 4.30858 6.58214C4.32273 5.62928 4.54121 4.69054 4.94926 3.82935C5.3573 2.96816 5.94542 2.20456 6.67387 1.59014C6.759 1.51782 6.82663 1.42715 6.87168 1.32493C6.91674 1.22272 6.93805 1.11163 6.93401 1C7.0973 1.35143 7.07072 6.247 7.08787 6.81957C7.1543 9.04686 6.96401 11.1091 6.78015 11.5296Z"
+				fill="url(#paint2_linear_2061_4238)"
+			/>
+			<defs>
+				<linearGradient
+					id="paint0_linear_2061_4238"
+					x1="5.1021"
+					y1="7.10853"
+					x2="8.80138"
+					y2="8.36386"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.231" stopColor="#999875" />
+					<stop offset="0.563" stopColor="#9B9977" />
+					<stop offset="0.683" stopColor="#A09F7E" />
+					<stop offset="0.768" stopColor="#A9A889" />
+					<stop offset="0.837" stopColor="#B7B69A" />
+					<stop offset="0.896" stopColor="#C9C7B0" />
+					<stop offset="0.948" stopColor="#DEDDCB" />
+					<stop offset="0.994" stopColor="#F8F6EB" />
+					<stop offset="1" stopColor="#FBF9EF" />
+				</linearGradient>
+				<linearGradient
+					id="paint1_linear_2061_4238"
+					x1="6.45855"
+					y1="0.976404"
+					x2="8.09399"
+					y2="11.1888"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#48A547" />
+					<stop offset="1" stopColor="#3F9143" />
+				</linearGradient>
+				<linearGradient
+					id="paint2_linear_2061_4238"
+					x1="4.08293"
+					y1="6.89501"
+					x2="8.47176"
+					y2="5.42519"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#41A247" />
+					<stop offset="0.352" stopColor="#4BA74B" />
+					<stop offset="0.956" stopColor="#67B554" />
+					<stop offset="1" stopColor="#69B655" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

frontend/src/assets/CustomIcons/NginxIcon.tsx

@@ -0,0 +1,22 @@
+function NginxIcon(): JSX.Element {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M6.97775 1H7.00561C7.14837 1.068 7.28743 1.14353 7.42218 1.22629C8.97332 2.11829 10.5245 3.01057 12.0756 3.90314C12.1356 3.93517 12.1846 3.9845 12.2163 4.04472C12.2479 4.10493 12.2607 4.17327 12.253 4.24086C12.2496 6.12186 12.253 8.00243 12.2509 9.88257C12.2307 9.9723 12.1759 10.0504 12.0983 10.0999C10.4489 11.0496 8.79932 11.9987 7.14961 12.9473C7.10963 12.9778 7.06144 12.9956 7.01125 12.9984C6.96106 13.0012 6.91118 12.9889 6.86803 12.9631C5.21661 12.0163 3.56675 11.0677 1.91846 10.1174C1.86489 10.0921 1.82003 10.0515 1.78952 10.0007C1.75901 9.94988 1.74423 9.89119 1.74703 9.832C1.74703 7.95143 1.74703 6.071 1.74703 4.19071C1.74299 4.13178 1.75661 4.07299 1.78616 4.02184C1.8157 3.97069 1.85983 3.92951 1.91289 3.90357C3.46203 3.01271 5.01118 2.12129 6.56032 1.22929C6.69832 1.15043 6.83375 1.06686 6.97775 1Z"
+				fill="#019639"
+			/>
+			<path
+				d="M3.90007 4.65924C3.90007 6.21039 3.90007 7.76167 3.90007 9.3131C3.89809 9.39901 3.91326 9.48446 3.94468 9.56445C3.9761 9.64444 4.02315 9.71736 4.08307 9.77896C4.19794 9.89243 4.34824 9.96309 4.5089 9.97916C4.66956 9.99522 4.83087 9.95572 4.96593 9.86724C5.05634 9.80581 5.13035 9.72321 5.18152 9.62662C5.23269 9.53003 5.25946 9.4224 5.2595 9.3131C5.2595 8.19024 5.25736 7.06739 5.2595 5.94453C6.28322 7.17024 7.30907 8.39424 8.33707 9.61653C8.4799 9.76122 8.65676 9.86772 8.85145 9.92628C9.04614 9.98484 9.25242 9.99357 9.45136 9.95167C9.59184 9.924 9.71973 9.85198 9.81624 9.74622C9.91275 9.64045 9.97278 9.50652 9.9875 9.3641C9.98979 7.78096 9.98979 6.19796 9.9875 4.6151C9.97275 4.44614 9.8952 4.28884 9.77016 4.17425C9.64512 4.05966 9.48168 3.99609 9.31207 3.99609C9.14247 3.99609 8.97902 4.05966 8.85399 4.17425C8.72895 4.28884 8.6514 4.44614 8.63665 4.6151C8.63665 5.75596 8.62979 6.89553 8.63665 8.03596C7.63122 6.85053 6.63822 5.65481 5.63665 4.4651C5.5046 4.29578 5.32979 4.16474 5.13023 4.08549C4.93067 4.00624 4.71359 3.98165 4.50136 4.01424C4.34059 4.03214 4.19154 4.10704 4.08124 4.22536C3.97093 4.34369 3.90666 4.49761 3.90007 4.65924Z"
+				fill="white"
+			/>
+		</svg>
+	);
+}
+
+export default NginxIcon;

frontend/src/assets/CustomIcons/RedisIcon.tsx

@@ -0,0 +1,60 @@
+export default function RedisIcon(): JSX.Element {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<g clipPath="url(#clip0_2061_4282)">
+				<path
+					d="M13.3198 10.158C12.5879 10.5395 8.79654 12.0984 7.98938 12.5192C7.18221 12.94 6.73382 12.936 6.09616 12.6312C5.45855 12.3263 1.42388 10.6966 0.697072 10.3492C0.333858 10.1756 0.142822 10.029 0.142822 9.8906V8.50438C0.142822 8.50438 5.3955 7.3609 6.24348 7.05667C7.09141 6.75244 7.38563 6.74145 8.10723 7.00578C8.82895 7.2702 13.1439 8.0487 13.8571 8.30992L13.8568 9.67653C13.8569 9.81356 13.6923 9.96388 13.3198 10.158Z"
+					fill="#912626"
+				/>
+				<path
+					d="M13.3195 8.77972C12.5877 9.16104 8.79642 10.72 7.98926 11.1407C7.18215 11.5616 6.73376 11.5575 6.09615 11.2527C5.45849 10.9481 1.42397 9.31805 0.697221 8.97086C-0.029529 8.62345 -0.0447433 8.38436 0.66915 8.10482C1.38304 7.82518 5.39544 6.25098 6.24353 5.94675C7.09145 5.64263 7.38561 5.63154 8.10722 5.89597C8.82888 6.16029 12.5975 7.66034 13.3106 7.9215C14.024 8.18298 14.0513 8.39829 13.3195 8.77972Z"
+					fill="#C6302B"
+				/>
+				<path
+					d="M13.3198 7.91483C12.5879 8.29637 8.79654 9.85519 7.98938 10.2762C7.18221 10.6968 6.73382 10.6928 6.09616 10.388C5.4585 10.0833 1.42388 8.45338 0.697072 8.10597C0.333858 7.9324 0.142822 7.78604 0.142822 7.64756V6.26119C0.142822 6.26119 5.3955 5.11776 6.24348 4.81353C7.09141 4.50929 7.38563 4.49826 8.10723 4.76263C8.829 5.02701 13.144 5.80535 13.8571 6.06661L13.8568 7.43338C13.8569 7.57036 13.6923 7.72069 13.3198 7.91483Z"
+					fill="#912626"
+				/>
+				<path
+					d="M13.3195 6.53701C12.5877 6.91844 8.79642 8.47726 7.98926 8.89817C7.18215 9.31892 6.73376 9.3148 6.09615 9.00998C5.45849 8.70537 1.42397 7.07541 0.697221 6.72816C-0.029529 6.38085 -0.0447433 6.14171 0.66915 5.86207C1.38304 5.58258 5.39549 4.00828 6.24353 3.7041C7.09145 3.39992 7.38561 3.38889 8.10722 3.65326C8.82888 3.91758 12.5975 5.41753 13.3106 5.6788C14.024 5.94023 14.0513 6.15558 13.3195 6.53701Z"
+					fill="#C6302B"
+				/>
+				<path
+					d="M13.3198 5.58855C12.5879 5.96998 8.79654 7.5289 7.98938 7.94987C7.18221 8.37062 6.73382 8.36649 6.09616 8.06167C5.4585 7.75701 1.42388 6.12705 0.697072 5.7798C0.333858 5.60607 0.142822 5.45965 0.142822 5.32133V3.9349C0.142822 3.9349 5.3955 2.79153 6.24348 2.48735C7.09141 2.18307 7.38563 2.17214 8.10723 2.43646C8.829 2.70083 13.144 3.47917 13.8571 3.74044L13.8568 5.10715C13.8569 5.24403 13.6923 5.39435 13.3198 5.58855Z"
+					fill="#912626"
+				/>
+				<path
+					d="M13.3195 4.21078C12.5876 4.59221 8.79639 6.15113 7.98923 6.57188C7.18212 6.99263 6.73373 6.98851 6.09612 6.68385C5.45852 6.37903 1.42394 4.74917 0.697248 4.40187C-0.0295558 4.05462 -0.0447165 3.81542 0.669123 3.53583C1.38302 3.2563 5.39546 1.68221 6.2435 1.37792C7.09143 1.07369 7.38559 1.06276 8.1072 1.32714C8.82886 1.59151 12.5975 3.09146 13.3106 3.35272C14.0239 3.61394 14.0513 3.82935 13.3195 4.21078Z"
+					fill="#C6302B"
+				/>
+				<path
+					d="M8.67572 2.86218L7.49661 2.9846L7.23267 3.61974L6.80635 2.91099L5.44483 2.78863L6.46076 2.42226L6.15594 1.85986L7.1071 2.23186L8.00378 1.93829L7.76142 2.51981L8.67572 2.86218ZM7.16228 5.94351L4.96172 5.03081L8.11494 4.54679L7.16228 5.94351ZM4.11138 3.21522C5.04219 3.21522 5.79674 3.50772 5.79674 3.86847C5.79674 4.22933 5.04219 4.52177 4.11138 4.52177C3.18058 4.52177 2.42603 4.22927 2.42603 3.86847C2.42603 3.50772 3.18058 3.21522 4.11138 3.21522Z"
+					fill="white"
+				/>
+				<path
+					d="M10.0693 3.0357L11.9355 3.77316L10.0709 4.50993L10.0693 3.0357Z"
+					fill="#621B1C"
+				/>
+				<path
+					d="M8.00464 3.85234L10.0693 3.03564L10.0709 4.50988L9.86844 4.58906L8.00464 3.85234Z"
+					fill="#9A2928"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_2061_4282">
+					<rect
+						width="13.7143"
+						height="13.7143"
+						fill="white"
+						transform="translate(0.142822 0.143066)"
+					/>
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}

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/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -8,7 +8,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { X } from '@signozhq/icons';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -5,16 +5,16 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -5,15 +5,15 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { UpdateTimeInterval } from 'store/actions';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { Card } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { CardContainer } from 'container/WidgetCard/styles';
+import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronUp } from '@signozhq/icons';
 import { AppState } from 'store/reducers';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts

@@ -1,7 +1,7 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 as uuidv4 } from 'uuid';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -6,9 +6,9 @@ import { Col, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { Button } from 'container/MetricsApplication/Tabs/styles';
 import { useGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
 import { useIsDarkMode } from 'hooks/useDarkMode';

frontend/src/components/CeleryTask/CeleryTaskGraph/useGetValueFromWidget.ts

@@ -8,7 +8,7 @@ import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getQueryPayloadFromWidgetsData } from 'pages/Celery/CeleryOverview/CeleryOverviewUtils';
 import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 import { History, Location } from 'history';
 import getRenderer from 'lib/uPlotLib/utils/getRenderer';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuidv4 } from 'uuid';

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -4,9 +4,10 @@ import { useSelector } from 'react-redux';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import useUpdatedQuery from 'container/WidgetCard/hooks/useResolveQuery';
+import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
+import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
@@ -79,6 +80,7 @@ export function useNavigateToExplorer(): (
 	);
 
 	const { getUpdatedQuery } = useUpdatedQuery();
+	const { dashboardData } = useDashboardStore();
 	const { notifications } = useNotifications();
 
 	return useCallback(
@@ -110,6 +112,7 @@ export function useNavigateToExplorer(): (
 						panelTypes: PANEL_TYPES.TIME_SERIES,
 						timePreferance: 'GLOBAL_TIME',
 					},
+					dashboardData,
 				})
 					.then((query) => {
 						preparedQuery = query;
@@ -133,6 +136,13 @@ export function useNavigateToExplorer(): (
 
 			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
-		[prepareQuery, minTime, maxTime, getUpdatedQuery, notifications],
+		[
+			prepareQuery,
+			minTime,
+			maxTime,
+			getUpdatedQuery,
+			dashboardData,
+			notifications,
+		],
 	);
 }

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/Graph/index.tsx

@@ -28,7 +28,7 @@ import {
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { generateGridTitle } from 'utils/generateGridTitle';
+import { generateGridTitle } from 'container/GridPanelSwitch/utils';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import isEqual from 'lodash-es/isEqual';

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/NewSelect/__test__/VariableItem.integration.test.tsx

@@ -0,0 +1,585 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import configureStore from 'redux-mock-store';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import VariableItem from '../../../container/DashboardContainer/DashboardVariablesSelection/VariableItem';
+
+// Mock the dashboard variables query
+jest.mock('api/dashboard/variables/dashboardVariablesQuery', () => ({
+	__esModule: true,
+	default: jest.fn(() =>
+		Promise.resolve({
+			payload: {
+				variableValues: ['option1', 'option2', 'option3', 'option4'],
+			},
+		}),
+	),
+}));
+
+// Mock scrollIntoView which isn't available in JSDOM
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+// Constants
+const TEST_VARIABLE_NAME = 'test_variable';
+const TEST_VARIABLE_ID = 'test-var-id';
+
+// Create a mock store
+const mockStore = configureStore([])({
+	globalTime: {
+		minTime: Date.now() - 3600000, // 1 hour ago
+		maxTime: Date.now(),
+	},
+});
+
+// Test data
+const createMockVariable = (
+	overrides: Partial<IDashboardVariable> = {},
+): IDashboardVariable => ({
+	id: TEST_VARIABLE_ID,
+	name: TEST_VARIABLE_NAME,
+	description: 'Test variable description',
+	type: 'QUERY',
+	queryValue: 'SELECT DISTINCT value FROM table',
+	customValue: '',
+	sort: 'ASC',
+	multiSelect: false,
+	showALLOption: true,
+	selectedValue: [],
+	allSelected: false,
+	...overrides,
+});
+
+function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: { retry: false },
+		},
+	});
+
+	return (
+		<Provider store={mockStore}>
+			<QueryClientProvider client={queryClient}>
+				<VirtuosoMockContext.Provider
+					value={{ viewportHeight: 300, itemHeight: 40 }}
+				>
+					{children}
+				</VirtuosoMockContext.Provider>
+			</QueryClientProvider>
+		</Provider>
+	);
+}
+
+describe('VariableItem Integration Tests', () => {
+	let user: ReturnType<typeof userEvent.setup>;
+	let mockOnValueUpdate: jest.Mock;
+
+	beforeEach(() => {
+		user = userEvent.setup();
+		mockOnValueUpdate = jest.fn();
+		jest.clearAllMocks();
+	});
+
+	// ===== 1. INTEGRATION WITH CUSTOMSELECT =====
+	describe('CustomSelect Integration (VI)', () => {
+		it('VI-01: Single select variable integration', async () => {
+			const variable = createMockVariable({
+				multiSelect: false,
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should render with CustomSelect
+			const combobox = screen.getByRole('combobox');
+			expect(combobox).toBeInTheDocument();
+
+			await user.click(combobox);
+
+			await waitFor(() => {
+				expect(screen.getByText('option1')).toBeInTheDocument();
+				expect(screen.getByText('option2')).toBeInTheDocument();
+				expect(screen.getByText('option3')).toBeInTheDocument();
+			});
+
+			// Select an option
+			const option1 = screen.getByText('option1');
+			await user.click(option1);
+
+			expect(mockOnValueUpdate).toHaveBeenCalledWith(
+				TEST_VARIABLE_NAME,
+				TEST_VARIABLE_ID,
+				'option1',
+				false,
+			);
+		});
+	});
+
+	// ===== 2. INTEGRATION WITH CUSTOMMULTISELECT =====
+	describe('CustomMultiSelect Integration (VI)', () => {
+		it('VI-02: Multi select variable integration', async () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3,option4',
+				showALLOption: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should render with CustomMultiSelect
+			const combobox = screen.getByRole('combobox');
+			expect(combobox).toBeInTheDocument();
+
+			await user.click(combobox);
+
+			await waitFor(() => {
+				// Should show ALL option
+				expect(screen.getByText('ALL')).toBeInTheDocument();
+			});
+
+			// Wait for Virtuoso to render the custom options
+			await waitFor(
+				() => {
+					expect(screen.getByText('option1')).toBeInTheDocument();
+					expect(screen.getByText('option2')).toBeInTheDocument();
+					expect(screen.getByText('option3')).toBeInTheDocument();
+					expect(screen.getByText('option4')).toBeInTheDocument();
+				},
+				{ timeout: 5000 },
+			);
+		});
+	});
+
+	// ===== 3. TEXTBOX VARIABLE TYPE =====
+	describe('Textbox Variable Integration', () => {
+		it('VI-03: Textbox variable handling', async () => {
+			const variable = createMockVariable({
+				type: 'TEXTBOX',
+				selectedValue: 'initial-value',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should render a regular input
+			const textInput = screen.getByDisplayValue('initial-value');
+			expect(textInput).toBeInTheDocument();
+			expect(textInput.tagName).toBe('INPUT');
+
+			// Clear and type new value
+			await user.clear(textInput);
+			await user.type(textInput, 'new-text-value');
+
+			// Blur the input to trigger the value update
+			await user.tab();
+
+			// Should call onValueUpdate after blur
+			await waitFor(
+				() => {
+					expect(mockOnValueUpdate).toHaveBeenCalledWith(
+						TEST_VARIABLE_NAME,
+						TEST_VARIABLE_ID,
+						'new-text-value',
+						false,
+					);
+				},
+				{ timeout: 1000 },
+			);
+		});
+	});
+
+	// ===== 4. VALUE PERSISTENCE AND STATE MANAGEMENT =====
+	describe('Value Persistence and State Management', () => {
+		it('VI-04: All selected state handling', () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'service1,service2,service3',
+				selectedValue: ['service1', 'service2', 'service3'],
+				allSelected: true,
+				showALLOption: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should show "ALL" instead of individual values
+			expect(screen.getByText('ALL')).toBeInTheDocument();
+		});
+
+		it('VI-05: Dropdown behavior with temporary selections', async () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'item1,item2,item3',
+				selectedValue: ['item1'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			// Wait for dropdown to open
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toBeInTheDocument();
+			});
+
+			// Verify the component renders without crashing
+			expect(combobox).toBeInTheDocument();
+		});
+	});
+
+	// ===== 6. ACCESSIBILITY AND USER EXPERIENCE =====
+	describe('Accessibility and User Experience', () => {
+		it('VI-06: Variable description tooltip', async () => {
+			const variable = createMockVariable({
+				description: 'This variable controls the service selection',
+				type: 'CUSTOM',
+				customValue: 'service1,service2',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should show info icon
+			const infoIcon = document.querySelector('.info-icon');
+			expect(infoIcon).toBeInTheDocument();
+
+			// Hover to show tooltip
+			if (infoIcon) {
+				await user.hover(infoIcon);
+			}
+
+			await waitFor(() => {
+				expect(
+					screen.getByText('This variable controls the service selection'),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('VI-07: Variable name display', () => {
+			const variable = createMockVariable({
+				name: 'service_name',
+				type: 'CUSTOM',
+				customValue: 'service1,service2',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should show variable name with $ prefix
+			expect(screen.getByText('$service_name')).toBeInTheDocument();
+		});
+
+		it('VI-08: Max tag count behavior', async () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'tag1,tag2,tag3,tag4,tag5,tag6,tag7',
+				selectedValue: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6', 'tag7'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Wait for component to render
+			await waitFor(() => {
+				const combobox = screen.getByRole('combobox');
+				expect(combobox).toBeInTheDocument();
+			});
+
+			// Should show limited number of tags with "+ X more"
+			const tags = document.querySelectorAll('.ant-select-selection-item');
+
+			// The component should render without crashing
+			expect(tags.length).toBeGreaterThanOrEqual(0);
+		});
+	});
+
+	// ===== 8. SEARCH INTERACTION TESTS =====
+	describe('Search Interaction Tests', () => {
+		it('VI-14: Search persistence across dropdown open/close', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+				multiSelect: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			await waitFor(() => {
+				expect(screen.getByText('ALL')).toBeInTheDocument();
+			});
+
+			const searchInput = document.querySelector(
+				'.ant-select-selection-search-input',
+			);
+			expect(searchInput).toBeInTheDocument();
+
+			if (searchInput) {
+				await user.type(searchInput, 'search-text');
+			}
+
+			// Verify search text is in input
+			await waitFor(() => {
+				expect(searchInput).toHaveValue('search-text');
+			});
+
+			// Press Escape to close dropdown
+			await user.keyboard('{Escape}');
+
+			// Dropdown should close and search text should be cleared
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
+				expect(searchInput).toHaveValue('');
+			});
+		});
+	});
+
+	// ===== 9. ADVANCED KEYBOARD NAVIGATION =====
+	describe('Advanced Keyboard Navigation (VI)', () => {
+		it('VI-15: Shift + Arrow + Del chip deletion in multiselect', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+				multiSelect: true,
+				selectedValue: ['option1', 'option2', 'option3'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			// Navigate to chips using arrow keys
+			await user.keyboard('{ArrowLeft}');
+
+			// Use Shift + Arrow to navigate between chips
+			await user.keyboard('{Shift>}{ArrowLeft}{/Shift}');
+
+			// Use Del to delete the active chip
+			await user.keyboard('{Delete}');
+
+			// Note: The component may not immediately call onValueUpdate
+			// This test verifies the chip deletion behavior
+			await waitFor(() => {
+				// Check if a chip was removed from the selection
+				const selectionItems = document.querySelectorAll(
+					'.ant-select-selection-item',
+				);
+				expect(selectionItems.length).toBeLessThan(3);
+			});
+		});
+	});
+
+	// ===== 11. ADVANCED UI STATES =====
+	describe('Advanced UI States (VI)', () => {
+		it('VI-19: No data with previous value selected in variable', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: '',
+				multiSelect: true,
+				selectedValue: ['previous-value'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Wait for component to initialize
+			await waitFor(() => {
+				const combobox = screen.getByRole('combobox');
+				expect(combobox).toBeInTheDocument();
+			});
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			// Should show no data message (the component may not show this exact text)
+			await waitFor(() => {
+				// Check if dropdown is empty or shows no data indication
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toBeInTheDocument();
+			});
+
+			// Verify the component renders without crashing
+			expect(combobox).toBeInTheDocument();
+		});
+
+		it('VI-20: Always editable accessibility in variable', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2',
+				multiSelect: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+
+			// Should be editable
+			expect(combobox).not.toBeDisabled();
+			await user.click(combobox);
+			expect(combobox).toHaveFocus();
+
+			// Should still be interactive
+			expect(combobox).not.toBeDisabled();
+		});
+	});
+
+	// ===== 13. DROPDOWN PERSISTENCE =====
+	describe('Dropdown Persistence (VI)', () => {
+		it('VI-24: Dropdown stays open for non-save actions in variable', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+				multiSelect: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Wait for component to initialize
+			await waitFor(() => {
+				const combobox = screen.getByRole('combobox');
+				expect(combobox).toBeInTheDocument();
+			});
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			await waitFor(() => {
+				expect(screen.getByText('ALL')).toBeInTheDocument();
+			});
+
+			// Navigate with arrow keys (non-save action)
+			await user.keyboard('{ArrowDown}');
+			await user.keyboard('{ArrowDown}');
+
+			// Dropdown should still be open
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toBeInTheDocument();
+			});
+
+			// Verify the component renders without crashing
+			expect(combobox).toBeInTheDocument();
+
+			// Only ESC should close the dropdown
+			await user.keyboard('{Escape}');
+
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
+			});
+		});
+	});
+});

frontend/src/components/NewSelect/utils.ts

@@ -1,26 +1,11 @@
+import { uniqueOptions } from 'container/DashboardContainer/DashboardVariablesSelection/util';
+
 import { OptionData } from './types';
 
 export const SPACEKEY = ' ';
 
 export const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
 
-/** De-duplicate options by `value`, keeping the first occurrence. */
-export const uniqueOptions = (options: OptionData[]): OptionData[] => {
-	const deduped: OptionData[] = [];
-	const seenValues = new Set<string>();
-
-	options.forEach((option) => {
-		const value = option.value || '';
-		if (seenValues.has(value)) {
-			return;
-		}
-		seenValues.add(value);
-		deduped.push(option);
-	});
-
-	return deduped;
-};
-
 export const prioritizeOrAddOptionForSingleSelect = (
 	options: OptionData[],
 	value: string,

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

@@ -17,6 +17,12 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
 // Shrink the suggestion-fetch debounce (300ms in prod) so these integration
 // tests aren't paced by it; coalescing semantics stay intact.
 jest.mock('../QuerySearch/constants', () => ({

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

@@ -21,6 +21,12 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
 	const handleRunQuery = jest.fn();
 	return {
@@ -146,16 +152,15 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 			/>,
 		);
 
-		// Wait for the mount fetch specifically. A debounced fetch from an earlier test
-		// can still land after mockClear(), so waiting on "any call" would let this
-		// assert against that one instead and make the result order-dependent.
-		await waitFor(
-			() =>
-				expect(mockedGetKeysOnMount).toHaveBeenCalledWith(
-					expect.objectContaining({ signal: DataSource.LOGS, searchText: '' }),
-				),
-			{ timeout: 2000 },
-		);
+		// Wait for debounced API call (300ms debounce + some buffer)
+		await waitFor(() => expect(mockedGetKeysOnMount).toHaveBeenCalled(), {
+			timeout: 2000,
+		});
+
+		const lastArgs = mockedGetKeysOnMount.mock.calls[
+			mockedGetKeysOnMount.mock.calls.length - 1
+		]?.[0] as { signal: unknown; searchText: string };
+		expect(lastArgs).toMatchObject({ signal: DataSource.LOGS, searchText: '' });
 	});
 
 	it('calls provided onRun on Mod-Enter', async () => {

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

@@ -1,274 +0,0 @@
-import {
-	completionStatus,
-	currentCompletions,
-	startCompletion,
-} from '@codemirror/autocomplete';
-import { EditorView } from '@uiw/react-codemirror';
-import { initialQueriesMap } from 'constants/queryBuilder';
-import * as recentQueriesStore from 'lib/recentQueries/recentQueriesStore';
-import { fireEvent, render, userEvent, waitFor } from 'tests/test-utils';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { RECENTS_DISPLAY_CAP, RECENTS_SECTION } from '../QuerySearch/constants';
-import QuerySearch from '../QuerySearch/QuerySearch';
-import { mockCodeMirrorDomApis } from './codemirrorDomMocks';
-
-const CM_ROOT_SELECTOR = '.cm-editor';
-const CM_EDITOR_SELECTOR = '.cm-editor .cm-content';
-const TOOLTIP_SELECTOR = '.cm-tooltip-autocomplete';
-const COMPLETION_LABEL_SELECTOR = '.cm-completionLabel';
-const DELETE_BUTTON_SELECTOR = '.cm-recent-delete';
-
-const FRONTEND_FILTER = "service.name = 'frontend'";
-const STATUS_CODE_FILTER = "http.status_code = '500'";
-const TRACES_FILTER = "name = 'HTTP GET'";
-
-beforeAll(() => {
-	mockCodeMirrorDomApis();
-});
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('api/querySuggestions/getKeySuggestions', () => ({
-	getKeySuggestions: jest.fn().mockResolvedValue({
-		data: { data: { keys: {} } },
-	}),
-}));
-
-jest.mock('api/querySuggestions/getValueSuggestion', () => ({
-	getValueSuggestions: jest.fn().mockResolvedValue({
-		data: { data: { values: { stringValues: [], numberValues: [] } } },
-	}),
-}));
-
-function renderLogsSearch(onChange: (value: string) => void = jest.fn()): void {
-	render(
-		<QuerySearch
-			onChange={onChange}
-			queryData={initialQueriesMap.logs.builder.queryData[0]}
-			dataSource={DataSource.LOGS}
-		/>,
-	);
-}
-
-function saveLogsRecent(expression: string): void {
-	recentQueriesStore.save({ signal: 'logs', filter: { expression } });
-}
-
-function getEditorView(): EditorView | null {
-	const root = document.querySelector<HTMLElement>(CM_ROOT_SELECTOR);
-	return root ? EditorView.findFromDOM(root) : null;
-}
-
-function getDocText(): string {
-	return getEditorView()?.state.doc.toString() ?? '';
-}
-
-function isCompletionOpen(): boolean {
-	const view = getEditorView();
-	return !!view && completionStatus(view.state) === 'active';
-}
-
-// Reads recents from completion state, not the tooltip: the tooltip is a later render
-// pass over this same state, so going to the source drops a layer of timing.
-function getRecentLabels(): string[] {
-	const view = getEditorView();
-	if (!view) {
-		return [];
-	}
-	return currentCompletions(view.state)
-		.filter((completion) => completion.section === RECENTS_SECTION)
-		.map((completion) => completion.label);
-}
-
-async function renderAndFocus(
-	onChange: (value: string) => void = jest.fn(),
-): Promise<HTMLElement> {
-	renderLogsSearch(onChange);
-
-	const editor = await waitFor(
-		() => {
-			const element = document.querySelector(CM_EDITOR_SELECTOR);
-			expect(element).toBeInTheDocument();
-			return element as HTMLElement;
-		},
-		{ timeout: 2000 },
-	);
-
-	await userEvent.click(editor);
-	return editor;
-}
-
-// Re-requests completions while waiting: typing and the async fetches can close the popup.
-function waitForRecents(
-	assertLabels: (labels: string[]) => void,
-): Promise<void> {
-	return waitFor(
-		() => {
-			const view = getEditorView();
-			if (view && !isCompletionOpen()) {
-				startCompletion(view);
-			}
-			assertLabels(getRecentLabels());
-		},
-		{ timeout: 3000 },
-	);
-}
-
-function openRecents(): Promise<void> {
-	return waitForRecents((labels) => expect(labels.length).toBeGreaterThan(0));
-}
-
-function waitForPopupElement(
-	find: () => HTMLElement | null | undefined,
-): Promise<HTMLElement> {
-	return waitFor(
-		() => {
-			const view = getEditorView();
-			if (view && !isCompletionOpen()) {
-				startCompletion(view);
-			}
-			const node = find();
-			expect(node).toBeTruthy();
-			return node as HTMLElement;
-		},
-		{ timeout: 3000 },
-	);
-}
-
-describe('QuerySearch recent searches', () => {
-	beforeEach(() => {
-		recentQueriesStore.useRecentQueriesStore.setState({ buckets: {} });
-		localStorage.clear();
-	});
-
-	it('shows a saved recent query under "Recent searches" on focus', async () => {
-		saveLogsRecent(FRONTEND_FILTER);
-
-		await renderAndFocus();
-		await openRecents();
-
-		await waitForRecents((labels) =>
-			expect(labels).toStrictEqual([FRONTEND_FILTER]),
-		);
-
-		const view = getEditorView() as EditorView;
-		const [recent] = currentCompletions(view.state);
-		expect(recent.section).toBe(RECENTS_SECTION);
-	});
-
-	it('filters recents by substring as the user types', async () => {
-		saveLogsRecent(FRONTEND_FILTER);
-		saveLogsRecent(STATUS_CODE_FILTER);
-
-		const editor = await renderAndFocus();
-		await openRecents();
-		await userEvent.type(editor, 'status_code');
-
-		await waitForRecents((labels) =>
-			expect(labels).toStrictEqual([STATUS_CODE_FILTER]),
-		);
-	});
-
-	it('does not surface recents saved under a different signal', async () => {
-		recentQueriesStore.save({
-			signal: 'traces',
-			filter: { expression: TRACES_FILTER },
-		});
-		saveLogsRecent(FRONTEND_FILTER);
-
-		await renderAndFocus();
-		await openRecents();
-
-		await waitForRecents((labels) =>
-			expect(labels).toStrictEqual([FRONTEND_FILTER]),
-		);
-	});
-
-	it('excludes a recent that exactly matches the current editor text', async () => {
-		const supersetFilter = `${FRONTEND_FILTER} AND ${STATUS_CODE_FILTER}`;
-		saveLogsRecent(FRONTEND_FILTER);
-		saveLogsRecent(supersetFilter);
-
-		const editor = await renderAndFocus();
-		await openRecents();
-		await userEvent.type(editor, FRONTEND_FILTER);
-
-		await waitForRecents((labels) =>
-			expect(labels).toStrictEqual([supersetFilter]),
-		);
-	});
-
-	it('caps the dropdown at RECENTS_DISPLAY_CAP entries, newest first', async () => {
-		const filters = Array.from(
-			{ length: RECENTS_DISPLAY_CAP + 1 },
-			(_, index) => `attribute_${index + 1} = 'v'`,
-		);
-		filters.forEach((filter) => saveLogsRecent(filter));
-		const expectedLabels = [...filters].reverse().slice(0, RECENTS_DISPLAY_CAP);
-
-		await renderAndFocus();
-		await openRecents();
-
-		await waitForRecents((labels) =>
-			expect(labels).toStrictEqual(expectedLabels),
-		);
-	});
-
-	it('applies the full expression to the editor when a recent is clicked', async () => {
-		saveLogsRecent(FRONTEND_FILTER);
-
-		const onChange = jest.fn();
-		await renderAndFocus(onChange);
-		await openRecents();
-
-		const option = await waitForPopupElement(() =>
-			Array.from(
-				document.querySelectorAll<HTMLElement>(COMPLETION_LABEL_SELECTOR),
-			).find((element) => element.textContent === FRONTEND_FILTER),
-		);
-		// fireEvent: userEvent's pointerdown blurs the editor, closing the popup before CM's mousedown apply.
-		fireEvent.mouseDown(option);
-
-		await waitFor(
-			() => {
-				expect(getDocText()).toBe(FRONTEND_FILTER);
-			},
-			{ timeout: 2000 },
-		);
-
-		expect(onChange).toHaveBeenCalledWith(FRONTEND_FILTER);
-
-		await waitFor(
-			() => {
-				expect(document.querySelector(TOOLTIP_SELECTOR)).not.toBeInTheDocument();
-			},
-			{ timeout: 2000 },
-		);
-	});
-
-	it('removes a recent from the dropdown and the store when delete is clicked', async () => {
-		saveLogsRecent(FRONTEND_FILTER);
-
-		await renderAndFocus();
-		await openRecents();
-
-		const deleteButton = await waitForPopupElement(() =>
-			document.querySelector<HTMLElement>(DELETE_BUTTON_SELECTOR),
-		);
-
-		// fireEvent: the button preventDefaults pointerdown, which makes userEvent.click drop the mouse chain.
-		fireEvent.click(deleteButton);
-
-		await waitFor(
-			() => {
-				expect(recentQueriesStore.list('logs')).toHaveLength(0);
-				expect(getRecentLabels()).not.toContain(FRONTEND_FILTER);
-			},
-			{ timeout: 2000 },
-		);
-		expect(getDocText()).toBe('');
-	});
-});

frontend/src/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/__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/components/TimePreferenceDropDown/config.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@signozhq/ui/typography';
-import { timeItems } from 'constants/timePreference';
+import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
 
 export const menuItems = timeItems.map((item) => ({
 	key: item.enum,

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -6,7 +6,7 @@ import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,
-} from 'constants/timePreference';
+} from 'container/NewWidget/RightContainer/timeItems';
 
 import { menuItems } from './config';
 

frontend/src/components/ValueGraph/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleAlert } from '@signozhq/icons';
-import { ThresholdProps } from 'types/api/widgets/threshold';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';
 

frontend/src/components/ValueGraph/utils.ts

@@ -1,5 +1,5 @@
-import { evaluateThresholdWithConvertedValue } from 'container/WidgetCard/TablePanel/utils';
-import { ThresholdProps } from 'types/api/widgets/threshold';
+import { evaluateThresholdWithConvertedValue } from 'container/GridTableComponent/utils';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 function doesValueSatisfyThreshold(
 	rawValue: number,

frontend/src/constants/localStorage.ts

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

frontend/src/constants/panelTypes.ts

@@ -1,6 +1,6 @@
 import Uplot from 'components/Uplot';
-import GridTableComponent from 'container/WidgetCard/TablePanel';
-import GridValueComponent from 'container/WidgetCard/ValuePanel';
+import GridTableComponent from 'container/GridTableComponent';
+import GridValueComponent from 'container/GridValueComponent';
 import LogsPanelComponent from 'container/LogsPanelTable/LogsPanelComponent';
 import TracesTableComponent from 'container/TracesTableComponent/TracesTableComponent';
 import { DataSource } from 'types/common/queryBuilder';