chore: minor cleanup

* refactor: move authtypes to coretypes

* refactor: migrate downstream consumers to coretypes Kind/Type/Relation

Wire all consumers of the typeable infrastructure through coretypes:
- Replace authtypes.Name/Type/Relation references with coretypes equivalents
- Switch Typeable singletons to constructor calls (authtypes.NewTypeableUser
  etc.), with the embedded coretypes.Typeable populated so Kind/Type/Prefix/
  Scope dispatch correctly through the embed
- Update dashboardtypes meta-resource declarations to use authtypes
  constructors so they expose Tuples (authz callers need it)
- Rename Resource.Name field accesses to Resource.Kind to match the field
  rename in authtypes.Resource
- Fix typeable_metaresource.go calling the plural NewTypeableMetaResources
  helper — should be the singular NewTypeableMetaResource

go build ./... and go vet ./... clean (parser-generated unreachable-code
warnings are pre-existing). Authz unit tests pass.

* refactor(audittypes): unify Action with coretypes.Relation

Drop the duplicate Action enum from audittypes — the verbs (create/update/
delete) match coretypes.Relation exactly. Move PastTense onto Relation so
audit EventName derivation continues to work without a parallel hierarchy.

Also retypes AuditDef.ResourceKind from string to coretypes.Kind so audit
declarations get the same regex validation that authz already enforces.

* refactor(retentiontypes): extract TTLSetting into its own package

TTLSetting is the bun model for ClickHouse TTL settings — has nothing to do
with the Organization domain it was previously co-located with in
pkg/types/organization.go. Moved to pkg/types/retentiontypes/ alongside the
ClickHouse reader that's its sole consumer.

No schema change; the bun table tag (table:ttl_setting) is unchanged.

* chore(openapi): regenerate spec for coretypes.Relation and Resource.Kind

* chore(frontend): regenerate API client and migrate Resource.name → Resource.kind

Regenerated TypeScript API types after the AuthtypesResource field rename
and the new CoretypesRelation enum. Updated:

- frontend/scripts/generate-permissions-type.cjs to read `r.kind` from the
  /api/v1/authz/resources response and emit `kind:` in the static
  permissions.type.ts file.
- frontend/src/hooks/useAuthZ/{permissions.type,types,utils,useAuthZ}.tsx:
  Resource.name → Resource.kind throughout.
- frontend/src/container/RolesSettings/{utils.tsx,__tests__/utils.test.ts}:
  same field migration.
- frontend/src/components/createGuardedRoute/createGuardedRoute.test.tsx:
  same.
- useAuthZ/utils.ts: cast string relations to CoretypesRelationDTO at the
  AuthtypesTransactionDTO boundary now that relation is an enum, not a raw
  string.

yarn generate:api passes (orval generation + lint + typecheck).

* refactor: migrate downstream consumers to Resource/Verb rename

* chore(openapi): regenerate spec for Resource/Verb rename

* feat(coretypes): add ListResources accessor with stable sort

* feat(cmd): add 'generate authz' subcommand for permissions type

* refactor(authz): drop runtime authz/resources endpoint

* refactor(frontend): consume static permissions.type.ts directly

* chore(frontend): regenerate Orval client without authz/resources

* ci: move authz schema check from jsci to goci

* refactor(coretypes): move Selector/Object/Transaction from authtypes

* feat(coretypes): add managed role names and permission policy

* feat(coretypes): add Registry assembling resources, types, and managed-role transactions

* refactor(authz): wire *coretypes.Registry; drop RegisterTypeable

* refactor(cmd): wire coretypes.NewRegistry into server bootstraps

* chore: regenerate openapi spec for authtypes -> coretypes type moves

* chore(frontend): regenerate API client for Authtypes -> Coretypes type moves

* refactor(coretypes): rename GettableResource to ResourceRef

* refactor(authz): collapse Registry around static data; bridge once at construction

* refactor(coretypes): tighten Registry, restore anonymous public-dashboard grant

Drops passthrough fields from coretypes.Registry; adds an O(1) lookup map
for NewResourceFromTypeAndKind; replaces stringly-typed Type compares with
Type.Equals; removes the now-redundant getUniqueTypes helper. Restores the
signoz-anonymous read grant on metaresource/public-dashboard that was
silently dropped, and removes the invalid signoz-admin/VerbCreate/TypeUser
entry that panicked at startup.

* chore: regenerate openapi spec for coretypes -> authtypes type moves

* chore(frontend): regenerate API client for Coretypes -> Authtypes type moves

* fix(authz): disambiguate kind→type by relation, preserve multi-part selectors

permissions.type.ts now lists the same kind (dashboard, role,
public-dashboard) under both metaresource and metaresources, so the prior
kind→type map silently overwrote one with the other. Resolve the type
using the requesting relation's allowed types, and slice the selector at
the first colon so multi-part selectors (e.g. id:version) round-trip
correctly. Updates useAuthZ.test.tsx to use the regenerated kind field.

* refactor(authtypes): introduce Relation wrapper over coretypes.Verb

The authz layer modeled relations as raw coretypes.Verb everywhere, which
forced authz-level concepts (action, role-binding) to share a type with
schema-level enumerations. Introduce authtypes.Relation as a thin wrapper
over coretypes.Verb so the authz APIs (CheckWithTupleCreation, ListObjects,
GetObjects, PatchObjects, NewTuples, Transaction.Relation, etc.) can grow
authz-specific affordances without leaking back into coretypes.

Also reshuffles the static coretypes data into dedicated registry_*.go files
(types, kinds, verbs, resources, managed roles) to keep the schema declarations
isolated from the value types they configure.

* refactor(authtypes): expose Relation.Enum() and regenerate openapi spec

Without an Enum() method on Relation the openapi generator emitted an
empty AuthtypesRelation schema (no allowed values). Forward the enum
from the embedded coretypes.Verb so the wire contract is faithful.

* refactor(ee/authz): drop always-nil error returns from managed-role tuple helpers

getManagedRoleGrantTuples and getManagedRoleTransactionTuples never
returned a non-nil error, which the linter (unparam) had flagged. Drop
the unused error return; callers no longer need the err check either.

* chore(frontend): regenerate API client for authtypes.Relation

* fix(authz): satisfy go-lint — keyed Relation literal, drop redundant Verb selector

* refactor(coretypes): sync Kinds slice with full registry_kind declarations

* feat(coretypes): register metaresource and metaresources for all new kinds

Adds 21 metaresource and 21 metaresources entries (covering notification-channel,
route-policy, apdex-setting, auth-domain, session, cloud-integration,
cloud-integration-service, ingestion-key, ingestion-limit, pipeline,
user-preference, org-preference, quick-filter, ttl-setting, rule,
planned-maintenance, saved-view, trace-funnel, factor-password, factor-api-key,
license) so the authz schema covers every resource Kind declared in
registry_kind. Regenerates the static frontend permissions.type.ts to match.

* feat(coretypes): populate ManagedRoleToTransactions from signozapiserver routes

Enumerates every (verb, resource) tuple each managed role holds, derived
from the AdminAccess/EditAccess/ViewAccess middleware on routes in
pkg/apiserver/signozapiserver and the legacy http_handler in
pkg/query-service/app. Admin gets 123 transactions, editor 53, viewer 25,
anonymous keeps the single public-dashboard read.

* feat(coretypes): add integration kind with full CRUD for viewer/editor/admin

Install/uninstall/list integration routes (legacy /api/v1/integrations) all
sit behind ViewAccess, so every authenticated role gets the full CRUD
surface on (metaresource, integration) and (metaresources, integration).
Regenerates the static frontend permissions.type.ts to match.

* feat(coretypes): add subscription kind alongside license, document LCRUD shape

License covers the in-product license resource (Activate/Refresh/GetActive).
Subscription is the billing lifecycle (checkout/portal/billing) served by
ee/query-service routes. Both are admin-only and modeled with a uniform
LCRUD shape; comments call out which verbs actually map to routes versus
which are placeholders for shape parity (e.g. cancellation flows through
Stripe's portal, not an in-process delete).

* feat(coretypes): model telemetryresource for logs, traces, metrics

Mirrors the telemetryresource type from ee/authz/openfgaschema/base.fga
into coretypes: a read-only Type with three Kinds (logs, traces, metrics)
matching telemetrytypes.Signal. Selector is wildcard-only for v1; future
work can narrow per-service or per-environment when the use case lands.
Every managed role (admin/editor/viewer) gets read on each signal,
matching the schema's role#assignee grant. Anonymous stays unchanged.
Regenerates the static frontend permissions.type.ts.

* feat(coretypes): add audit-logs and meter-metrics kinds under telemetryresource

Audit logs (signal=logs, source=audit) and meter metrics (signal=metrics,
source=meter) are sensitive source-qualified telemetry streams that don't
belong under the broad read-grant every role gets on regular logs/traces/
metrics. Modeled as distinct Kinds so they can be permissioned
independently. Admin-only read for now; widen on explicit ask (e.g. an
auditor flow that needs viewer access to audit-logs). Regenerates the
static frontend permissions.type.ts.

* feat(coretypes): add logs-field and traces-field kinds for stored field config

GET/POST /logs/fields and /api/v2/traces/fields manage stored, mutable
field metadata (indexed/promoted columns) over each signal. They're
configuration, not telemetry data, so they sit under metaresource rather
than telemetryresource. Viewer reads, editor/admin update; no
create/delete since POST overwrites. Plural prefix (logs-field /
traces-field) matches the signal naming.

* chore(frontend): regenerate permissions.type.ts to match generate authz output

* feat(authz): add attach permissions to fga model

* fix(tests): use role permissions instead of dashboards

* fix(authz): couple of issues with register flow

* fix(authz): public dashboard read should be anomymous

* fix(tests): integration test for public dashboard access

---------

Co-authored-by: vikrantgupta25 <vikrant@signoz.io>

.github/CODEOWNERS

@@ -107,6 +107,7 @@ go.mod @therealpandey
 /pkg/modules/organization/ @therealpandey
 /pkg/modules/authdomain/ @therealpandey
 /pkg/modules/role/ @therealpandey
+/pkg/types/coretypes/ @therealpandey @vikrantgupta25
 
 # IdentN Owners
 

.github/workflows/goci.yaml

@@ -102,3 +102,20 @@ jobs:
         run: |
           go run cmd/enterprise/*.go generate openapi
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in openapi spec. Run go run cmd/enterprise/*.go generate openapi locally and commit."; exit 1)
+  authz:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: self-checkout
+        uses: actions/checkout@v4
+      - name: go-install
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.24"
+      - name: generate-authz
+        run: |
+          go run cmd/enterprise/*.go generate authz
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in authz permissions. Run go run cmd/enterprise/*.go generate authz locally and commit."; exit 1)

.github/workflows/jsci.yaml

@@ -63,46 +63,6 @@ jobs:
         uses: actions/checkout@v4
       - name: run
         run: bash frontend/scripts/validate-md-languages.sh
-  authz:
-    if: |
-      github.event_name == 'merge_group' ||
-      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    runs-on: ubuntu-latest
-    steps:
-      - name: self-checkout
-        uses: actions/checkout@v5
-      - name: node-install
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
-      - name: deps-install
-        working-directory: ./frontend
-        run: |
-          yarn install
-      - name: uv-install
-        uses: astral-sh/setup-uv@v5
-      - name: uv-deps
-        working-directory: ./tests/integration
-        run: |
-          uv sync
-      - name: setup-test
-        run: |
-          make py-test-setup
-      - name: generate
-        working-directory: ./frontend
-        run: |
-          yarn generate:permissions-type
-      - name: teardown-test
-        if: always()
-        run: |
-          make py-test-teardown
-      - name: validate
-        run: |
-          if ! git diff --exit-code frontend/src/hooks/useAuthZ/permissions.type.ts; then
-            echo "::error::frontend/src/hooks/useAuthZ/permissions.type.ts is out of date. Please run the generator locally and commit the changes: npm run generate:permissions-type (from the frontend directory)"
-            exit 1
-          fi
   openapi:
     if: |
       github.event_name == 'merge_group' ||

cmd/authz.go

@@ -0,0 +1,117 @@
+package cmd
+
+import (
+	"bytes"
+	"context"
+	"os"
+	"sort"
+	"text/template"
+
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/spf13/cobra"
+)
+
+const permissionsTypePath = "frontend/src/hooks/useAuthZ/permissions.type.ts"
+
+var permissionsTypeTemplate = template.Must(template.New("permissions").Parse(
+	`// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY cmd/enterprise/*.go generate authz
+export default {
+	status: 'success',
+	data: {
+		resources: [
+{{- range .Resources }}
+			{
+				kind: '{{ .Kind }}',
+				type: '{{ .Type }}',
+			},
+{{- end }}
+		],
+		relations: {
+{{- range .Relations }}
+			{{ .Verb }}: [{{ range $i, $t := .Types }}{{ if $i }}, {{ end }}'{{ $t }}'{{ end }}],
+{{- end }}
+		},
+	},
+} as const;
+`))
+
+type permissionsTypeRelation struct {
+	Verb  string
+	Types []string
+}
+
+type permissionsTypeResource struct {
+	Kind string
+	Type string
+}
+
+type permissionsTypeData struct {
+	Resources []permissionsTypeResource
+	Relations []permissionsTypeRelation
+}
+
+func registerGenerateAuthz(parentCmd *cobra.Command) {
+	authzCmd := &cobra.Command{
+		Use:   "authz",
+		Short: "Generate authz permissions for the frontend",
+		RunE: func(currCmd *cobra.Command, args []string) error {
+			return runGenerateAuthz(currCmd.Context())
+		},
+	}
+
+	parentCmd.AddCommand(authzCmd)
+}
+
+func runGenerateAuthz(_ context.Context) error {
+	registry := coretypes.NewRegistry()
+
+	allowedResources := map[string]bool{
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():    true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():              true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourcesRole).String(): true,
+	}
+
+	allowedTypes := map[string]bool{}
+
+	refs := registry.ResourceRefs()
+	resources := make([]permissionsTypeResource, 0, len(refs))
+	for _, ref := range refs {
+		if !allowedResources[ref.String()] {
+			continue
+		}
+		allowedTypes[ref.Type.StringValue()] = true
+		resources = append(resources, permissionsTypeResource{
+			Kind: ref.Kind.String(),
+			Type: ref.Type.StringValue(),
+		})
+	}
+
+	typesByVerb := registry.TypesByVerb()
+	verbs := make([]coretypes.Verb, 0, len(typesByVerb))
+	for verb := range typesByVerb {
+		verbs = append(verbs, verb)
+	}
+	sort.Slice(verbs, func(i, j int) bool { return verbs[i].StringValue() < verbs[j].StringValue() })
+
+	relations := make([]permissionsTypeRelation, 0, len(verbs))
+	for _, verb := range verbs {
+		types := make([]string, 0, len(typesByVerb[verb]))
+		for _, t := range typesByVerb[verb] {
+			if !allowedTypes[t.StringValue()] {
+				continue
+			}
+			types = append(types, t.StringValue())
+		}
+		relations = append(relations, permissionsTypeRelation{
+			Verb:  verb.StringValue(),
+			Types: types,
+		})
+	}
+
+	var buf bytes.Buffer
+	if err := permissionsTypeTemplate.Execute(&buf, permissionsTypeData{Resources: resources, Relations: relations}); err != nil {
+		return err
+	}
+
+	return os.WriteFile(permissionsTypePath, buf.Bytes(), 0o600)
+}

cmd/community/server.go

@@ -92,13 +92,13 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
 			return signoz.NewAuthNs(ctx, providerSettings, store, licensing)
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, _ licensing.Licensing, _ []authz.OnBeforeRoleDelete, _ dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
-			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore)
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, config authz.Config, _ licensing.Licensing, _ []authz.OnBeforeRoleDelete) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
+			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore, config)
 			if err != nil {
 				return nil, err
 			}
 
-			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore), nil
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, authtypes.NewRegistry()), nil
 		},
 		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser)

cmd/enterprise/server.go

@@ -137,12 +137,12 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return authNs, nil
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, dashboardModule dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
-			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore)
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, config authz.Config, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
+			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore, config)
 			if err != nil {
 				return nil, err
 			}
-			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, dashboardModule), nil
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, authtypes.NewRegistry()), nil
 		},
 		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing)

cmd/generate.go

@@ -16,6 +16,7 @@ func RegisterGenerate(parentCmd *cobra.Command, logger *slog.Logger) {
 	}
 
 	registerGenerateOpenAPI(generateCmd)
+	registerGenerateAuthz(generateCmd)
 
 	parentCmd.AddCommand(generateCmd)
 }

conf/example.yaml

@@ -13,6 +13,8 @@ global:
   ingestion_url: <unset>
   # the url of the SigNoz MCP server. when unset, the MCP settings page is hidden in the frontend.
   # mcp_url: <unset>
+  # the url of the SigNoz AI Assistant server. when unset, the AI Assistant is hidden in the frontend.
+  # ai_assistant_url: <unset>
 
 ##################### Version #####################
 version:
@@ -426,4 +428,4 @@ authz:
   provider: openfga
   openfga:
     # maximum tuples allowed per openfga write operation.
-    max_tuples_per_write: 100
+    max_tuples_per_write: 300

docs/api/openapi.yml

@@ -96,6 +96,122 @@ components:
       - createdAt
       - updatedAt
       type: object
+    AlertmanagertypesPostableChannel:
+      oneOf:
+      - required:
+        - discord_configs
+      - required:
+        - email_configs
+      - required:
+        - incidentio_configs
+      - required:
+        - pagerduty_configs
+      - required:
+        - slack_configs
+      - required:
+        - webhook_configs
+      - required:
+        - opsgenie_configs
+      - required:
+        - wechat_configs
+      - required:
+        - pushover_configs
+      - required:
+        - victorops_configs
+      - required:
+        - sns_configs
+      - required:
+        - telegram_configs
+      - required:
+        - webex_configs
+      - required:
+        - msteams_configs
+      - required:
+        - msteamsv2_configs
+      - required:
+        - jira_configs
+      - required:
+        - rocketchat_configs
+      - required:
+        - mattermost_configs
+      properties:
+        discord_configs:
+          items:
+            $ref: '#/components/schemas/ConfigDiscordConfig'
+          type: array
+        email_configs:
+          items:
+            $ref: '#/components/schemas/ConfigEmailConfig'
+          type: array
+        incidentio_configs:
+          items:
+            $ref: '#/components/schemas/ConfigIncidentioConfig'
+          type: array
+        jira_configs:
+          items:
+            $ref: '#/components/schemas/ConfigJiraConfig'
+          type: array
+        mattermost_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMattermostConfig'
+          type: array
+        msteams_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMSTeamsConfig'
+          type: array
+        msteamsv2_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMSTeamsV2Config'
+          type: array
+        name:
+          type: string
+        opsgenie_configs:
+          items:
+            $ref: '#/components/schemas/ConfigOpsGenieConfig'
+          type: array
+        pagerduty_configs:
+          items:
+            $ref: '#/components/schemas/ConfigPagerdutyConfig'
+          type: array
+        pushover_configs:
+          items:
+            $ref: '#/components/schemas/ConfigPushoverConfig'
+          type: array
+        rocketchat_configs:
+          items:
+            $ref: '#/components/schemas/ConfigRocketchatConfig'
+          type: array
+        slack_configs:
+          items:
+            $ref: '#/components/schemas/ConfigSlackConfig'
+          type: array
+        sns_configs:
+          items:
+            $ref: '#/components/schemas/ConfigSNSConfig'
+          type: array
+        telegram_configs:
+          items:
+            $ref: '#/components/schemas/ConfigTelegramConfig'
+          type: array
+        victorops_configs:
+          items:
+            $ref: '#/components/schemas/ConfigVictorOpsConfig'
+          type: array
+        webex_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWebexConfig'
+          type: array
+        webhook_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWebhookConfig'
+          type: array
+        wechat_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWechatConfig'
+          type: array
+      required:
+      - name
+      type: object
     AlertmanagertypesPostableRoutePolicy:
       properties:
         channels:
@@ -133,6 +249,10 @@ components:
           type: string
       type: object
     AuthtypesAuthDomainConfig:
+      oneOf:
+      - $ref: '#/components/schemas/AuthtypesSamlConfig'
+      - $ref: '#/components/schemas/AuthtypesGoogleConfig'
+      - $ref: '#/components/schemas/AuthtypesOIDCConfig'
       properties:
         googleAuthConfig:
           $ref: '#/components/schemas/AuthtypesGoogleConfig'
@@ -145,8 +265,15 @@ components:
         ssoEnabled:
           type: boolean
         ssoType:
-          type: string
+          $ref: '#/components/schemas/AuthtypesAuthNProvider'
       type: object
+    AuthtypesAuthNProvider:
+      enum:
+      - google_auth
+      - saml
+      - email_password
+      - oidc
+      type: string
     AuthtypesAuthNProviderInfo:
       properties:
         relayStatePath:
@@ -169,7 +296,7 @@ components:
     AuthtypesCallbackAuthNSupport:
       properties:
         provider:
-          type: string
+          $ref: '#/components/schemas/AuthtypesAuthNProvider'
         url:
           type: string
       type: object
@@ -177,62 +304,23 @@ components:
       properties:
         authNProviderInfo:
           $ref: '#/components/schemas/AuthtypesAuthNProviderInfo'
+        config:
+          $ref: '#/components/schemas/AuthtypesAuthDomainConfig'
         createdAt:
           format: date-time
           type: string
-        googleAuthConfig:
-          $ref: '#/components/schemas/AuthtypesGoogleConfig'
         id:
           type: string
         name:
           type: string
-        oidcConfig:
-          $ref: '#/components/schemas/AuthtypesOIDCConfig'
         orgId:
           type: string
-        roleMapping:
-          $ref: '#/components/schemas/AuthtypesRoleMapping'
-        samlConfig:
-          $ref: '#/components/schemas/AuthtypesSamlConfig'
-        ssoEnabled:
-          type: boolean
-        ssoType:
-          type: string
         updatedAt:
           format: date-time
           type: string
       required:
       - id
       type: object
-    AuthtypesGettableObjects:
-      properties:
-        resource:
-          $ref: '#/components/schemas/AuthtypesResource'
-        selectors:
-          items:
-            type: string
-          type: array
-      required:
-      - resource
-      - selectors
-      type: object
-    AuthtypesGettableResources:
-      properties:
-        relations:
-          additionalProperties:
-            items:
-              type: string
-            type: array
-          nullable: true
-          type: object
-        resources:
-          items:
-            $ref: '#/components/schemas/AuthtypesResource'
-          type: array
-      required:
-      - resources
-      - relations
-      type: object
     AuthtypesGettableToken:
       properties:
         accessToken:
@@ -249,9 +337,9 @@ components:
         authorized:
           type: boolean
         object:
-          $ref: '#/components/schemas/AuthtypesObject'
+          $ref: '#/components/schemas/CoretypesObject'
         relation:
-          type: string
+          $ref: '#/components/schemas/AuthtypesRelation'
       required:
       - relation
       - object
@@ -299,16 +387,6 @@ components:
         issuerAlias:
           type: string
       type: object
-    AuthtypesObject:
-      properties:
-        resource:
-          $ref: '#/components/schemas/AuthtypesResource'
-        selector:
-          type: string
-      required:
-      - resource
-      - selector
-      type: object
     AuthtypesOrgSessionContext:
       properties:
         authNSupport:
@@ -323,23 +401,7 @@ components:
     AuthtypesPasswordAuthNSupport:
       properties:
         provider:
-          type: string
-      type: object
-    AuthtypesPatchableObjects:
-      properties:
-        additions:
-          items:
-            $ref: '#/components/schemas/AuthtypesGettableObjects'
-          nullable: true
-          type: array
-        deletions:
-          items:
-            $ref: '#/components/schemas/AuthtypesGettableObjects'
-          nullable: true
-          type: array
-      required:
-      - additions
-      - deletions
+          $ref: '#/components/schemas/AuthtypesAuthNProvider'
       type: object
     AuthtypesPatchableRole:
       properties:
@@ -378,16 +440,15 @@ components:
         refreshToken:
           type: string
       type: object
-    AuthtypesResource:
-      properties:
-        name:
-          type: string
-        type:
-          type: string
-      required:
-      - name
-      - type
-      type: object
+    AuthtypesRelation:
+      enum:
+      - create
+      - read
+      - update
+      - delete
+      - list
+      - assignee
+      type: string
     AuthtypesRole:
       properties:
         createdAt:
@@ -451,14 +512,14 @@ components:
     AuthtypesTransaction:
       properties:
         object:
-          $ref: '#/components/schemas/AuthtypesObject'
+          $ref: '#/components/schemas/CoretypesObject'
         relation:
-          type: string
+          $ref: '#/components/schemas/AuthtypesRelation'
       required:
       - relation
       - object
       type: object
-    AuthtypesUpdateableAuthDomain:
+    AuthtypesUpdatableAuthDomain:
       properties:
         config:
           $ref: '#/components/schemas/AuthtypesAuthDomainConfig'
@@ -2088,6 +2149,64 @@ components:
         to_user:
           type: string
       type: object
+    CoretypesObject:
+      properties:
+        resource:
+          $ref: '#/components/schemas/CoretypesResourceRef'
+        selector:
+          type: string
+      required:
+      - resource
+      - selector
+      type: object
+    CoretypesObjectGroup:
+      properties:
+        resource:
+          $ref: '#/components/schemas/CoretypesResourceRef'
+        selectors:
+          items:
+            type: string
+          type: array
+      required:
+      - resource
+      - selectors
+      type: object
+    CoretypesPatchableObjects:
+      properties:
+        additions:
+          items:
+            $ref: '#/components/schemas/CoretypesObjectGroup'
+          nullable: true
+          type: array
+        deletions:
+          items:
+            $ref: '#/components/schemas/CoretypesObjectGroup'
+          nullable: true
+          type: array
+      required:
+      - additions
+      - deletions
+      type: object
+    CoretypesResourceRef:
+      properties:
+        kind:
+          type: string
+        type:
+          $ref: '#/components/schemas/CoretypesType'
+      required:
+      - type
+      - kind
+      type: object
+    CoretypesType:
+      enum:
+      - user
+      - serviceaccount
+      - anonymous
+      - role
+      - organization
+      - metaresource
+      - metaresources
+      type: string
     DashboardtypesDashboard:
       properties:
         createdAt:
@@ -2363,6 +2482,9 @@ components:
       type: object
     GlobaltypesConfig:
       properties:
+        ai_assistant_url:
+          nullable: true
+          type: string
         external_url:
           type: string
         identN:
@@ -2376,6 +2498,7 @@ components:
       - external_url
       - ingestion_url
       - mcp_url
+      - ai_assistant_url
       type: object
     GlobaltypesIdentNConfig:
       properties:
@@ -5200,6 +5323,9 @@ components:
         sub_tree_node_count:
           minimum: 0
           type: integer
+        time_unix:
+          minimum: 0
+          type: integer
         trace_id:
           type: string
         trace_state:
@@ -5580,35 +5706,6 @@ paths:
       summary: Check permissions
       tags:
       - authz
-  /api/v1/authz/resources:
-    get:
-      deprecated: false
-      description: Gets all the available resources
-      operationId: AuthzResources
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/AuthtypesGettableResources'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      summary: Get resources
-      tags:
-      - authz
   /api/v1/channels:
     get:
       deprecated: false
@@ -5665,7 +5762,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ConfigReceiver'
+              $ref: '#/components/schemas/AlertmanagertypesPostableChannel'
       responses:
         "201":
           content:
@@ -6944,20 +7041,20 @@ paths:
             schema:
               $ref: '#/components/schemas/AuthtypesPostableAuthDomain'
       responses:
-        "200":
+        "201":
           content:
             application/json:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/AuthtypesGettableAuthDomain'
+                    $ref: '#/components/schemas/TypesIdentifiable'
                   status:
                     type: string
                 required:
                 - status
                 - data
                 type: object
-          description: OK
+          description: Created
         "400":
           content:
             application/json:
@@ -7042,6 +7139,63 @@ paths:
       summary: Delete auth domain
       tags:
       - authdomains
+    get:
+      deprecated: false
+      description: This endpoint returns an auth domain by ID
+      operationId: GetAuthDomain
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/AuthtypesGettableAuthDomain'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get auth domain by ID
+      tags:
+      - authdomains
     put:
       deprecated: false
       description: This endpoint updates an auth domain
@@ -7056,7 +7210,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/AuthtypesUpdateableAuthDomain'
+              $ref: '#/components/schemas/AuthtypesUpdatableAuthDomain'
       responses:
         "204":
           description: No Content
@@ -8775,7 +8929,7 @@ paths:
                 properties:
                   data:
                     items:
-                      $ref: '#/components/schemas/AuthtypesGettableObjects'
+                      $ref: '#/components/schemas/CoretypesObjectGroup'
                     type: array
                   status:
                     type: string
@@ -8848,7 +9002,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/AuthtypesPatchableObjects'
+              $ref: '#/components/schemas/CoretypesPatchableObjects'
       responses:
         "204":
           content:

ee/authz/openfgaauthz/provider.go

@@ -2,7 +2,6 @@ package openfgaauthz
 
 import (
 	"context"
-	"slices"
 
 	"github.com/SigNoz/signoz/ee/authz/openfgaserver"
 	"github.com/SigNoz/signoz/pkg/authz"
@@ -13,6 +12,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 	openfgapkgtransformer "github.com/openfga/language/pkg/go/transformer"
@@ -25,19 +25,19 @@ type provider struct {
 	openfgaServer      *openfgaserver.Server
 	licensing          licensing.Licensing
 	store              authtypes.RoleStore
-	registry           []authz.RegisterTypeable
+	registry           *authtypes.Registry
 	settings           factory.ScopedProviderSettings
 	onBeforeRoleDelete []authz.OnBeforeRoleDelete
 }
 
-func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry ...authz.RegisterTypeable) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry *authtypes.Registry) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("openfga"), func(ctx context.Context, ps factory.ProviderSettings, config authz.Config) (authz.AuthZ, error) {
 		return newOpenfgaProvider(ctx, ps, config, sqlstore, openfgaSchema, openfgaDataStore, licensing, onBeforeRoleDelete, registry)
 	})
 }
 
-func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry []authz.RegisterTypeable) (authz.AuthZ, error) {
-	pkgOpenfgaAuthzProvider := pkgopenfgaauthz.NewProviderFactory(sqlstore, openfgaSchema, openfgaDataStore)
+func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry *authtypes.Registry) (authz.AuthZ, error) {
+	pkgOpenfgaAuthzProvider := pkgopenfgaauthz.NewProviderFactory(sqlstore, openfgaSchema, openfgaDataStore, registry)
 	pkgAuthzService, err := pkgOpenfgaAuthzProvider.New(ctx, settings, config)
 	if err != nil {
 		return nil, err
@@ -74,11 +74,11 @@ func (provider *provider) Stop(ctx context.Context) error {
 	return provider.openfgaServer.Stop(ctx)
 }
 
-func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
+func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, roleSelectors []coretypes.Selector) error {
 	return provider.openfgaServer.CheckWithTupleCreation(ctx, claims, orgID, relation, typeable, selectors, roleSelectors)
 }
 
-func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
+func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, roleSelectors []coretypes.Selector) error {
 	return provider.openfgaServer.CheckWithTupleCreationWithoutClaims(ctx, orgID, relation, typeable, selectors, roleSelectors)
 }
 
@@ -108,7 +108,7 @@ func (provider *provider) CheckTransactions(ctx context.Context, subject string,
 	return results, nil
 }
 
-func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType authtypes.Type) ([]*authtypes.Object, error) {
+func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
 	return provider.openfgaServer.ListObjects(ctx, subject, relation, objectType)
 }
 
@@ -159,16 +159,10 @@ func (provider *provider) CreateManagedRoles(ctx context.Context, orgID valuer.U
 func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context, orgID valuer.UUID, userID valuer.UUID) error {
 	tuples := make([]*openfgav1.TupleKey, 0)
 
-	grantTuples, err := provider.getManagedRoleGrantTuples(orgID, userID)
-	if err != nil {
-		return err
-	}
+	grantTuples := provider.getManagedRoleGrantTuples(orgID, userID)
 	tuples = append(tuples, grantTuples...)
 
-	managedRoleTuples, err := provider.getManagedRoleTransactionTuples(orgID)
-	if err != nil {
-		return err
-	}
+	managedRoleTuples := provider.getManagedRoleTransactionTuples(orgID)
 	tuples = append(tuples, managedRoleTuples...)
 
 	return provider.Write(ctx, tuples, nil)
@@ -208,21 +202,7 @@ func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, ro
 	return role, nil
 }
 
-func (provider *provider) GetResources(_ context.Context) []*authtypes.Resource {
-	resources := make([]*authtypes.Resource, 0)
-	for _, register := range provider.registry {
-		for _, typeable := range register.MustGetTypeables() {
-			resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
-		}
-	}
-	for _, typeable := range provider.MustGetTypeables() {
-		resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
-	}
-
-	return resources
-}
-
-func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*authtypes.Object, error) {
+func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*coretypes.Object, error) {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -233,16 +213,16 @@ func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id
 		return nil, err
 	}
 
-	objects := make([]*authtypes.Object, 0)
-	for _, objectType := range provider.getUniqueTypes() {
-		if !slices.Contains(authtypes.TypeableRelations[objectType], relation) {
+	objects := make([]*coretypes.Object, 0)
+	for _, objectType := range provider.registry.Types() {
+		if coretypes.ErrIfVerbNotValidForType(relation.Verb, objectType) != nil {
 			continue
 		}
 
 		resourceObjects, err := provider.
 			ListObjects(
 				ctx,
-				authtypes.MustNewSubject(authtypes.TypeableRole, storableRole.Name, orgID, &authtypes.RelationAssignee),
+				authtypes.MustNewSubject(coretypes.NewResourceRole(), storableRole.Name, orgID, &coretypes.VerbAssignee),
 				relation,
 				objectType,
 			)
@@ -265,7 +245,7 @@ func (provider *provider) Patch(ctx context.Context, orgID valuer.UUID, role *au
 	return provider.store.Update(ctx, orgID, role)
 }
 
-func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*authtypes.Object) error {
+func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*coretypes.Object) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -318,84 +298,63 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 	return provider.store.Delete(ctx, orgID, id)
 }
 
-func (provider *provider) MustGetTypeables() []authtypes.Typeable {
-	return []authtypes.Typeable{authtypes.TypeableRole, authtypes.TypeableResourcesRoles}
-}
-
-func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) ([]*openfgav1.TupleKey, error) {
+func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) []*openfgav1.TupleKey {
 	tuples := []*openfgav1.TupleKey{}
 
 	// Grant the admin role to the user
-	adminSubject := authtypes.MustNewSubject(authtypes.TypeableUser, userID.String(), orgID, nil)
-	adminTuple, err := authtypes.TypeableRole.Tuples(
+	adminSubject := authtypes.MustNewSubject(coretypes.NewResourceUser(), userID.String(), orgID, nil)
+	adminTuple := authtypes.NewTuples(
+		coretypes.NewResourceRole(),
 		adminSubject,
-		authtypes.RelationAssignee,
-		[]authtypes.Selector{
-			authtypes.MustNewSelector(authtypes.TypeRole, authtypes.SigNozAdminRoleName),
-		},
+		authtypes.Relation{Verb: coretypes.VerbAssignee},
+		[]coretypes.Selector{coretypes.TypeRole.MustSelector(authtypes.SigNozAdminRoleName)},
 		orgID,
 	)
-	if err != nil {
-		return nil, err
-	}
 	tuples = append(tuples, adminTuple...)
 
 	// Grant the admin role to the anonymous user
-	anonymousSubject := authtypes.MustNewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
-	anonymousTuple, err := authtypes.TypeableRole.Tuples(
+	anonymousSubject := authtypes.MustNewSubject(coretypes.NewResourceAnonymous(), coretypes.AnonymousUser.String(), orgID, nil)
+	anonymousTuple := authtypes.NewTuples(
+		coretypes.NewResourceRole(),
 		anonymousSubject,
-		authtypes.RelationAssignee,
-		[]authtypes.Selector{
-			authtypes.MustNewSelector(authtypes.TypeRole, authtypes.SigNozAnonymousRoleName),
-		},
+		authtypes.Relation{Verb: coretypes.VerbAssignee},
+		[]coretypes.Selector{coretypes.TypeRole.MustSelector(authtypes.SigNozAnonymousRoleName)},
 		orgID,
 	)
-	if err != nil {
-		return nil, err
-	}
 	tuples = append(tuples, anonymousTuple...)
 
-	return tuples, nil
+	return tuples
 }
 
-func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
-	transactionsByRole := make(map[string][]*authtypes.Transaction)
-	for _, register := range provider.registry {
-		for roleName, txns := range register.MustGetManagedRoleTransactions() {
-			transactionsByRole[roleName] = append(transactionsByRole[roleName], txns...)
-		}
-	}
-
+func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) []*openfgav1.TupleKey {
 	tuples := make([]*openfgav1.TupleKey, 0)
-	for roleName, transactions := range transactionsByRole {
+	for roleName, transactions := range provider.registry.ManagedRoleTransactions() {
 		for _, txn := range transactions {
-			typeable := authtypes.MustNewTypeableFromType(txn.Object.Resource.Type, txn.Object.Resource.Name)
-			txnTuples, err := typeable.Tuples(
+			resource := coretypes.MustNewResourceFromTypeAndKind(txn.Object.Resource.Type, txn.Object.Resource.Kind)
+			txnTuples := authtypes.NewTuples(
+				resource,
 				authtypes.MustNewSubject(
-					authtypes.TypeableRole,
+					coretypes.NewResourceRole(),
 					roleName,
 					orgID,
-					&authtypes.RelationAssignee,
+					&coretypes.VerbAssignee,
 				),
 				txn.Relation,
-				[]authtypes.Selector{txn.Object.Selector},
+				[]coretypes.Selector{txn.Object.Selector},
 				orgID,
 			)
-			if err != nil {
-				return nil, err
-			}
 			tuples = append(tuples, txnTuples...)
 		}
 	}
 
-	return tuples, nil
+	return tuples
 }
 
 func (provider *provider) deleteTuples(ctx context.Context, roleName string, orgID valuer.UUID) error {
-	subject := authtypes.MustNewSubject(authtypes.TypeableRole, roleName, orgID, &authtypes.RelationAssignee)
+	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)
 
 	tuples := make([]*openfgav1.TupleKey, 0)
-	for _, objectType := range provider.getUniqueTypes() {
+	for _, objectType := range provider.registry.Types() {
 		typeTuples, err := provider.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
 			User:   subject,
 			Object: objectType.StringValue() + ":",
@@ -424,28 +383,3 @@ func (provider *provider) deleteTuples(ctx context.Context, roleName string, org
 
 	return nil
 }
-
-func (provider *provider) getUniqueTypes() []authtypes.Type {
-	seen := make(map[string]struct{})
-	uniqueTypes := make([]authtypes.Type, 0)
-	for _, register := range provider.registry {
-		for _, typeable := range register.MustGetTypeables() {
-			typeKey := typeable.Type().StringValue()
-			if _, ok := seen[typeKey]; ok {
-				continue
-			}
-			seen[typeKey] = struct{}{}
-			uniqueTypes = append(uniqueTypes, typeable.Type())
-		}
-	}
-	for _, typeable := range provider.MustGetTypeables() {
-		typeKey := typeable.Type().StringValue()
-		if _, ok := seen[typeKey]; ok {
-			continue
-		}
-		seen[typeKey] = struct{}{}
-		uniqueTypes = append(uniqueTypes, typeable.Type())
-	}
-
-	return uniqueTypes
-}

ee/authz/openfgaschema/base.fga

@@ -1,6 +1,6 @@
 module base
 
-type organisation 
+type organization 
   relations
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
@@ -10,12 +10,14 @@ type user
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
     define delete: [user, serviceaccount, role#assignee]
+    define attach: [user, serviceaccount, role#assignee]
 
-type serviceaccount 
+type serviceaccount
   relations
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
-    define delete: [user, serviceaccount, role#assignee]  
+    define delete: [user, serviceaccount, role#assignee]
+    define attach: [user, serviceaccount, role#assignee]
 
 type anonymous
 
@@ -26,6 +28,7 @@ type role
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
     define delete: [user, serviceaccount, role#assignee]
+    define attach: [user, serviceaccount, role#assignee]
 
 type metaresources
   relations

ee/authz/openfgaserver/server.go

@@ -7,6 +7,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 )
@@ -33,18 +34,18 @@ func (server *Server) Stop(ctx context.Context) error {
 	return server.pkgAuthzService.Stop(ctx)
 }
 
-func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
+func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, _ []coretypes.Selector) error {
 	subject := ""
 	switch claims.Principal {
 	case authtypes.PrincipalUser:
-		user, err := authtypes.NewSubject(authtypes.TypeableUser, claims.UserID, orgID, nil)
+		user, err := authtypes.NewSubject(coretypes.NewResourceUser(), claims.UserID, orgID, nil)
 		if err != nil {
 			return err
 		}
 
 		subject = user
 	case authtypes.PrincipalServiceAccount:
-		serviceAccount, err := authtypes.NewSubject(authtypes.TypeableServiceAccount, claims.ServiceAccountID, orgID, nil)
+		serviceAccount, err := authtypes.NewSubject(coretypes.NewResourceServiceAccount(), claims.ServiceAccountID, orgID, nil)
 		if err != nil {
 			return err
 		}
@@ -52,10 +53,7 @@ func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtyp
 		subject = serviceAccount
 	}
 
-	tupleSlice, err := typeable.Tuples(subject, relation, selectors, orgID)
-	if err != nil {
-		return err
-	}
+	tupleSlice := authtypes.NewTuples(typeable, subject, relation, selectors, orgID)
 
 	tuples := make(map[string]*openfgav1.TupleKey, len(tupleSlice))
 	for idx, tuple := range tupleSlice {
@@ -76,16 +74,13 @@ func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtyp
 	return errors.Newf(errors.TypeForbidden, authtypes.ErrCodeAuthZForbidden, "subjects are not authorized for requested access")
 }
 
-func (server *Server) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
-	subject, err := authtypes.NewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
+func (server *Server) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, _ []coretypes.Selector) error {
+	subject, err := authtypes.NewSubject(coretypes.NewResourceAnonymous(), coretypes.AnonymousUser.String(), orgID, nil)
 	if err != nil {
 		return err
 	}
 
-	tupleSlice, err := typeable.Tuples(subject, relation, selectors, orgID)
-	if err != nil {
-		return err
-	}
+	tupleSlice := authtypes.NewTuples(typeable, subject, relation, selectors, orgID)
 
 	tuples := make(map[string]*openfgav1.TupleKey, len(tupleSlice))
 	for idx, tuple := range tupleSlice {
@@ -110,7 +105,7 @@ func (server *Server) BatchCheck(ctx context.Context, tupleReq map[string]*openf
 	return server.pkgAuthzService.BatchCheck(ctx, tupleReq)
 }
 
-func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType authtypes.Type) ([]*authtypes.Object, error) {
+func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
 	return server.pkgAuthzService.ListObjects(ctx, subject, relation, objectType)
 }
 

ee/authz/openfgaserver/sqlstore.go

@@ -2,6 +2,7 @@ package openfgaserver
 
 import (
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
+	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/openfga/openfga/pkg/storage"
@@ -10,11 +11,11 @@ import (
 	"github.com/openfga/openfga/pkg/storage/sqlite"
 )
 
-func NewSQLStore(store sqlstore.SQLStore) (storage.OpenFGADatastore, error) {
+func NewSQLStore(store sqlstore.SQLStore, config authz.Config) (storage.OpenFGADatastore, error) {
 	switch store.BunDB().Dialect().Name().String() {
 	case "sqlite":
 		return sqlite.NewWithDB(store.SQLDB(), &sqlcommon.Config{
-			MaxTuplesPerWriteField: 100,
+			MaxTuplesPerWriteField: config.OpenFGA.MaxTuplesPerWrite,
 			MaxTypesPerModelField:  100,
 		})
 	case "pg":
@@ -24,7 +25,7 @@ func NewSQLStore(store sqlstore.SQLStore) (storage.OpenFGADatastore, error) {
 		}
 
 		return postgres.NewWithDB(pgStore.Pool(), nil, &sqlcommon.Config{
-			MaxTuplesPerWriteField: 100,
+			MaxTuplesPerWriteField: config.OpenFGA.MaxTuplesPerWrite,
 			MaxTypesPerModelField:  100,
 		})
 	}

ee/modules/dashboard/impldashboard/module.go

@@ -14,7 +14,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
@@ -88,7 +88,7 @@ func (module *module) GetDashboardByPublicID(ctx context.Context, id valuer.UUID
 	return dashboardtypes.NewDashboardFromStorableDashboard(storableDashboard), nil
 }
 
-func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id valuer.UUID, orgs []*types.Organization) ([]authtypes.Selector, valuer.UUID, error) {
+func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id valuer.UUID, orgs []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
 	orgIDs := make([]string, len(orgs))
 	for idx, org := range orgs {
 		orgIDs[idx] = org.ID.StringValue()
@@ -99,9 +99,9 @@ func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id
 		return nil, valuer.UUID{}, err
 	}
 
-	return []authtypes.Selector{
-		authtypes.MustNewSelector(authtypes.TypeMetaResource, id.StringValue()),
-		authtypes.MustNewSelector(authtypes.TypeMetaResource, authtypes.WildCardSelectorString),
+	return []coretypes.Selector{
+		coretypes.TypeMetaResource.MustSelector(id.StringValue()),
+		coretypes.TypeMetaResource.MustSelector(coretypes.WildCardSelectorString),
 	}, storableDashboard.OrgID, nil
 }
 
@@ -217,28 +217,6 @@ func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valu
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
 }
 
-func (module *module) MustGetTypeables() []authtypes.Typeable {
-	return module.pkgDashboardModule.MustGetTypeables()
-}
-
-func (module *module) MustGetManagedRoleTransactions() map[string][]*authtypes.Transaction {
-	return map[string][]*authtypes.Transaction{
-		authtypes.SigNozAnonymousRoleName: {
-			{
-				ID:       valuer.GenerateUUID(),
-				Relation: authtypes.RelationRead,
-				Object: *authtypes.MustNewObject(
-					authtypes.Resource{
-						Type: authtypes.TypeMetaResource,
-						Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
-					},
-					authtypes.MustNewSelector(authtypes.TypeMetaResource, "*"),
-				),
-			},
-		},
-	}
-}
-
 func (module *module) deletePublic(ctx context.Context, _ valuer.UUID, dashboardID valuer.UUID) error {
 	return module.store.DeletePublic(ctx, dashboardID.StringValue())
 }

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

@@ -6,6 +6,8 @@ import (
 	"io"
 	"net/http"
 
+	"log/slog"
+
 	"github.com/SigNoz/signoz/ee/query-service/anomaly"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
@@ -15,7 +17,6 @@ import (
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"log/slog"
 )
 
 func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
@@ -137,4 +138,3 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 		aH.QueryRangeV4(w, r)
 	}
 }
-

ee/query-service/app/server.go

@@ -42,8 +42,8 @@ import (
 
 // Server runs HTTP, Mux and a grpc server
 type Server struct {
-	config      signoz.Config
-	signoz      *signoz.SigNoz
+	config signoz.Config
+	signoz *signoz.SigNoz
 
 	// public http router
 	httpConn     net.Listener
@@ -148,7 +148,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 
 	s := &Server{
 		config:             config,
-		signoz:       signoz,
+		signoz:             signoz,
 		httpHostPort:       baseconst.HTTPHostPort,
 		unavailableChannel: make(chan healthcheck.Status),
 		usageManager:       usageManager,
@@ -317,4 +317,3 @@ func (s *Server) Stop(ctx context.Context) error {
 
 	return nil
 }
-

frontend/.oxfmtrc.json

@@ -23,6 +23,11 @@
     "**/*.md",
     "**/*.json",
     "src/parser/**",
-    "src/TraceOperator/parser/**"
+    "src/TraceOperator/parser/**",
+    ".claude",
+    ".opencode",
+    "dist",
+    "playwright-report",
+    ".temp_cache"
   ]
 }

frontend/knip.json

@@ -1,5 +1,5 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "project": ["src/**/*.ts", "src/**/*.tsx"],
-  "ignore": ["src/api/generated/**/*.ts"]
+  "ignore": ["src/api/generated/**/*.ts", "src/typings/*.ts"]
 }

frontend/package.json

@@ -23,8 +23,7 @@
     "commitlint": "commitlint --edit $1",
     "test": "jest",
     "test:changedsince": "jest --changedSince=main --coverage --silent",
-    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
-    "generate:permissions-type": "node scripts/generate-permissions-type.cjs"
+    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
   },
   "engines": {
     "node": ">=22.0.0"
@@ -198,6 +197,7 @@
     "@types/redux-mock-store": "1.0.4",
     "@types/styled-components": "^5.1.4",
     "@types/uuid": "^8.3.1",
+    "@typescript/native-preview": "7.0.0-dev.20260421.2",
     "autoprefixer": "10.4.19",
     "babel-plugin-styled-components": "^1.12.0",
     "eslint-plugin-sonarjs": "4.0.2",
@@ -231,6 +231,7 @@
     "ts-jest": "29.4.6",
     "ts-node": "^10.2.1",
     "typescript-plugin-css-modules": "5.2.0",
+    "use-sync-external-store": "1.6.0",
     "vite-plugin-checker": "0.12.0",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-image-optimizer": "2.0.3",
@@ -240,7 +241,7 @@
     "*.(js|jsx|ts|tsx)": [
       "oxlint --fix",
       "oxfmt --write",
-      "sh scripts/typecheck-staged.sh"
+      "sh -c tsgo --noEmit"
     ],
     "*.(scss|css)": [
       "stylelint"
@@ -266,4 +267,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

frontend/scripts/generate-permissions-type.cjs

@@ -1,199 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-const axios = require('axios');
-
-const PERMISSIONS_TYPE_FILE = path.join(
-	__dirname,
-	'../src/hooks/useAuthZ/permissions.type.ts',
-);
-
-const SIGNOZ_INTEGRATION_IMAGE = 'signoz:integration';
-const LOCAL_BACKEND_URL = 'http://localhost:8080';
-
-function log(message) {
-	console.log(`[generate-permissions-type] ${message}`);
-}
-
-function getBackendUrlFromDocker() {
-	try {
-		const output = execSync(
-			`docker ps --filter "ancestor=${SIGNOZ_INTEGRATION_IMAGE}" --format "{{.Ports}}"`,
-			{ encoding: 'utf8', stdio: ['pipe', 'pipe', 'pipe'] },
-		).trim();
-
-		if (!output) {
-			return null;
-		}
-
-		const portMatch = output.match(/0\.0\.0\.0:(\d+)->8080\/tcp/);
-		if (portMatch) {
-			return `http://localhost:${portMatch[1]}`;
-		}
-
-		const ipv6Match = output.match(/:::(\d+)->8080\/tcp/);
-		if (ipv6Match) {
-			return `http://localhost:${ipv6Match[1]}`;
-		}
-	} catch (err) {
-		log(`Warning: Could not get port from docker: ${err.message}`);
-	}
-	return null;
-}
-
-async function checkBackendHealth(url, maxAttempts = 3, delayMs = 1000) {
-	for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-		try {
-			await axios.get(`${url}/api/v1/health`, {
-				timeout: 5000,
-				validateStatus: (status) => status === 200,
-			});
-			return true;
-		} catch (err) {
-			if (attempt < maxAttempts) {
-				await new Promise((r) => setTimeout(r, delayMs));
-			}
-		}
-	}
-	return false;
-}
-
-async function discoverBackendUrl() {
-	const dockerUrl = getBackendUrlFromDocker();
-	if (dockerUrl) {
-		log(`Found ${SIGNOZ_INTEGRATION_IMAGE} container, trying ${dockerUrl}...`);
-		if (await checkBackendHealth(dockerUrl)) {
-			log(`Backend found at ${dockerUrl} (from py-test-setup)`);
-			return dockerUrl;
-		}
-		log(`Backend at ${dockerUrl} is not responding`);
-	}
-
-	log(`Trying local backend at ${LOCAL_BACKEND_URL}...`);
-	if (await checkBackendHealth(LOCAL_BACKEND_URL)) {
-		log(`Backend found at ${LOCAL_BACKEND_URL}`);
-		return LOCAL_BACKEND_URL;
-	}
-
-	return null;
-}
-
-async function fetchResources(backendUrl) {
-	log('Fetching resources from API...');
-	const resourcesUrl = `${backendUrl}/api/v1/authz/resources`;
-
-	const { data: response } = await axios.get(resourcesUrl);
-
-	return response;
-}
-
-function transformResponse(apiResponse) {
-	if (!apiResponse.data) {
-		throw new Error('Invalid API response: missing data field');
-	}
-
-	const { resources, relations } = apiResponse.data;
-
-	return {
-		status: apiResponse.status || 'success',
-		data: {
-			resources: resources,
-			relations: relations,
-		},
-	};
-}
-
-function generateTypeScriptFile(data) {
-	const resourcesStr = data.data.resources
-		.map(
-			(r) =>
-				`\t\t\t{\n\t\t\t\tname: '${r.name}',\n\t\t\t\ttype: '${r.type}',\n\t\t\t},`,
-		)
-		.join('\n');
-
-	const relationsStr = Object.entries(data.data.relations)
-		.map(
-			([type, relations]) =>
-				`\t\t\t${type}: [${relations.map((r) => `'${r}'`).join(', ')}],`,
-		)
-		.join('\n');
-
-	return `// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY scripts/generate-permissions-type
-export default {
-\tstatus: '${data.status}',
-\tdata: {
-\t\tresources: [
-${resourcesStr}
-\t\t],
-\t\trelations: {
-${relationsStr}
-\t\t},
-\t},
-} as const;
-`;
-}
-
-async function main() {
-	try {
-		log('Starting permissions type generation...');
-
-		const backendUrl = await discoverBackendUrl();
-
-		if (!backendUrl) {
-			console.error('\n' + '='.repeat(80));
-			console.error('ERROR: No running SigNoz backend found!');
-			console.error('='.repeat(80));
-			console.error(
-				'\nThe permissions type generator requires a running SigNoz backend.',
-			);
-			console.error('\nFor local development, start the backend with:');
-			console.error('  make go-run-enterprise');
-			console.error(
-				'\nFor CI or integration testing, start the test environment with:',
-			);
-			console.error('  make py-test-setup');
-			console.error(
-				'\nIf running in CI and seeing this error, check that the py-test-setup',
-			);
-			console.error('step completed successfully before this step runs.');
-			console.error('='.repeat(80) + '\n');
-			process.exit(1);
-		}
-
-		log('Fetching resources...');
-		const apiResponse = await fetchResources(backendUrl);
-
-		log('Transforming response...');
-		const transformed = transformResponse(apiResponse);
-
-		log('Generating TypeScript file...');
-		const content = generateTypeScriptFile(transformed);
-
-		log(`Writing to ${PERMISSIONS_TYPE_FILE}...`);
-		fs.writeFileSync(PERMISSIONS_TYPE_FILE, content, 'utf8');
-
-		const rootDir = path.join(__dirname, '../..');
-		const relativePath = path.relative(
-			path.join(rootDir, 'frontend'),
-			PERMISSIONS_TYPE_FILE,
-		);
-		log('Linting generated file...');
-		execSync(`cd frontend && yarn oxlint ${relativePath}`, {
-			cwd: rootDir,
-			stdio: 'inherit',
-		});
-
-		log('Successfully generated permissions.type.ts');
-	} catch (error) {
-		log(`Error: ${error.message}`);
-		process.exit(1);
-	}
-}
-
-if (require.main === module) {
-	main();
-}
-
-module.exports = { main };

frontend/scripts/typecheck-staged.sh

@@ -1,25 +0,0 @@
-files="";
-
-# lint-staged will pass all files in $1 $2 $3 etc. iterate and concat.
-for var in "$@"
-do
-    files="$files \"$var\","
-done
-
-# create temporary tsconfig which includes only passed files
-str="{
-  \"extends\": \"./tsconfig.json\",
-  \"include\": [ \"src/typings/**/*.ts\",\"src/**/*.d.ts\", \"./babel.config.js\", \"./jest.config.ts\", \"./.eslintrc.js\",\"./__mocks__\",\"./public\",\"./tests\",\"./commitlint.config.ts\",\"./webpack.config.js\",\"./webpack.config.prod.js\",\"./jest.setup.ts\",\"./**/*.d.ts\",$files]
-}"
-echo $str > tsconfig.tmp
-
-# run typecheck using temp config
-tsc -p ./tsconfig.tmp
-
-# capture exit code of tsc
-code=$?
-
-# delete temp config
-rm ./tsconfig.tmp
-
-exit $code

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

@@ -19,9 +19,11 @@ import type {
 
 import type {
 	AuthtypesPostableAuthDomainDTO,
-	AuthtypesUpdateableAuthDomainDTO,
-	CreateAuthDomain200,
+	AuthtypesUpdatableAuthDomainDTO,
+	CreateAuthDomain201,
 	DeleteAuthDomainPathParameters,
+	GetAuthDomain200,
+	GetAuthDomainPathParameters,
 	ListAuthDomains200,
 	RenderErrorResponseDTO,
 	UpdateAuthDomainPathParameters,
@@ -124,7 +126,7 @@ export const createAuthDomain = (
 	authtypesPostableAuthDomainDTO: BodyType<AuthtypesPostableAuthDomainDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<CreateAuthDomain200>({
+	return GeneratedAPIInstance<CreateAuthDomain201>({
 		url: `/api/v1/domains`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
@@ -277,19 +279,122 @@ export const useDeleteAuthDomain = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint returns an auth domain by ID
+ * @summary Get auth domain by ID
+ */
+export const getAuthDomain = (
+	{ id }: GetAuthDomainPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetAuthDomain200>({
+		url: `/api/v1/domains/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetAuthDomainQueryKey = ({
+	id,
+}: GetAuthDomainPathParameters) => {
+	return [`/api/v1/domains/${id}`] as const;
+};
+
+export const getGetAuthDomainQueryOptions = <
+	TData = Awaited<ReturnType<typeof getAuthDomain>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetAuthDomainPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAuthDomain>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetAuthDomainQueryKey({ id });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getAuthDomain>>> = ({
+		signal,
+	}) => getAuthDomain({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getAuthDomain>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetAuthDomainQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getAuthDomain>>
+>;
+export type GetAuthDomainQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get auth domain by ID
+ */
+
+export function useGetAuthDomain<
+	TData = Awaited<ReturnType<typeof getAuthDomain>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetAuthDomainPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAuthDomain>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetAuthDomainQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get auth domain by ID
+ */
+export const invalidateGetAuthDomain = async (
+	queryClient: QueryClient,
+	{ id }: GetAuthDomainPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetAuthDomainQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint updates an auth domain
  * @summary Update auth domain
  */
 export const updateAuthDomain = (
 	{ id }: UpdateAuthDomainPathParameters,
-	authtypesUpdateableAuthDomainDTO: BodyType<AuthtypesUpdateableAuthDomainDTO>,
+	authtypesUpdatableAuthDomainDTO: BodyType<AuthtypesUpdatableAuthDomainDTO>,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/domains/${id}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
-		data: authtypesUpdateableAuthDomainDTO,
+		data: authtypesUpdatableAuthDomainDTO,
 	});
 };
 
@@ -302,7 +407,7 @@ export const getUpdateAuthDomainMutationOptions = <
 		TError,
 		{
 			pathParams: UpdateAuthDomainPathParameters;
-			data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+			data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 		},
 		TContext
 	>;
@@ -311,7 +416,7 @@ export const getUpdateAuthDomainMutationOptions = <
 	TError,
 	{
 		pathParams: UpdateAuthDomainPathParameters;
-		data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+		data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 	},
 	TContext
 > => {
@@ -328,7 +433,7 @@ export const getUpdateAuthDomainMutationOptions = <
 		Awaited<ReturnType<typeof updateAuthDomain>>,
 		{
 			pathParams: UpdateAuthDomainPathParameters;
-			data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+			data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -343,7 +448,7 @@ export type UpdateAuthDomainMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateAuthDomain>>
 >;
 export type UpdateAuthDomainMutationBody =
-	BodyType<AuthtypesUpdateableAuthDomainDTO>;
+	BodyType<AuthtypesUpdatableAuthDomainDTO>;
 export type UpdateAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -358,7 +463,7 @@ export const useUpdateAuthDomain = <
 		TError,
 		{
 			pathParams: UpdateAuthDomainPathParameters;
-			data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+			data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 		},
 		TContext
 	>;
@@ -367,7 +472,7 @@ export const useUpdateAuthDomain = <
 	TError,
 	{
 		pathParams: UpdateAuthDomainPathParameters;
-		data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+		data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 	},
 	TContext
 > => {

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

@@ -4,23 +4,16 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
+import { useMutation } from 'react-query';
 import type {
-	InvalidateOptions,
 	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
 	UseMutationOptions,
 	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
 } from 'react-query';
 
 import type {
 	AuthtypesTransactionDTO,
 	AuthzCheck200,
-	AuthzResources200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
@@ -110,88 +103,3 @@ export const useAuthzCheck = <
 
 	return useMutation(mutationOptions);
 };
-/**
- * Gets all the available resources
- * @summary Get resources
- */
-export const authzResources = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<AuthzResources200>({
-		url: `/api/v1/authz/resources`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getAuthzResourcesQueryKey = () => {
-	return [`/api/v1/authz/resources`] as const;
-};
-
-export const getAuthzResourcesQueryOptions = <
-	TData = Awaited<ReturnType<typeof authzResources>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof authzResources>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getAuthzResourcesQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof authzResources>>> = ({
-		signal,
-	}) => authzResources(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof authzResources>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type AuthzResourcesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof authzResources>>
->;
-export type AuthzResourcesQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get resources
- */
-
-export function useAuthzResources<
-	TData = Awaited<ReturnType<typeof authzResources>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof authzResources>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getAuthzResourcesQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get resources
- */
-export const invalidateAuthzResources = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getAuthzResourcesQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -18,6 +18,7 @@ import type {
 } from 'react-query';
 
 import type {
+	AlertmanagertypesPostableChannelDTO,
 	ConfigReceiverDTO,
 	CreateChannel201,
 	DeleteChannelByIDPathParameters,
@@ -122,14 +123,14 @@ export const invalidateListChannels = async (
  * @summary Create notification channel
  */
 export const createChannel = (
-	configReceiverDTO: BodyType<ConfigReceiverDTO>,
+	alertmanagertypesPostableChannelDTO: BodyType<AlertmanagertypesPostableChannelDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateChannel201>({
 		url: `/api/v1/channels`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
+		data: alertmanagertypesPostableChannelDTO,
 		signal,
 	});
 };
@@ -141,13 +142,13 @@ export const getCreateChannelMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
 		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
+		{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof createChannel>>,
 	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
+	{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 	TContext
 > => {
 	const mutationKey = ['createChannel'];
@@ -161,7 +162,7 @@ export const getCreateChannelMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof createChannel>>,
-		{ data: BodyType<ConfigReceiverDTO> }
+		{ data: BodyType<AlertmanagertypesPostableChannelDTO> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -174,7 +175,8 @@ export const getCreateChannelMutationOptions = <
 export type CreateChannelMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createChannel>>
 >;
-export type CreateChannelMutationBody = BodyType<ConfigReceiverDTO>;
+export type CreateChannelMutationBody =
+	BodyType<AlertmanagertypesPostableChannelDTO>;
 export type CreateChannelMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -187,13 +189,13 @@ export const useCreateChannel = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
 		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
+		{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof createChannel>>,
 	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
+	{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 	TContext
 > => {
 	const mutationOptions = getCreateChannelMutationOptions(options);

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

@@ -18,9 +18,9 @@ import type {
 } from 'react-query';
 
 import type {
-	AuthtypesPatchableObjectsDTO,
 	AuthtypesPatchableRoleDTO,
 	AuthtypesPostableRoleDTO,
+	CoretypesPatchableObjectsDTO,
 	CreateRole201,
 	DeleteRolePathParameters,
 	GetObjects200,
@@ -571,13 +571,13 @@ export const invalidateGetObjects = async (
  */
 export const patchObjects = (
 	{ id, relation }: PatchObjectsPathParameters,
-	authtypesPatchableObjectsDTO: BodyType<AuthtypesPatchableObjectsDTO>,
+	coretypesPatchableObjectsDTO: BodyType<CoretypesPatchableObjectsDTO>,
 ) => {
 	return GeneratedAPIInstance<string>({
 		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
 		method: 'PATCH',
 		headers: { 'Content-Type': 'application/json' },
-		data: authtypesPatchableObjectsDTO,
+		data: coretypesPatchableObjectsDTO,
 	});
 };
 
@@ -590,7 +590,7 @@ export const getPatchObjectsMutationOptions = <
 		TError,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<AuthtypesPatchableObjectsDTO>;
+			data: BodyType<CoretypesPatchableObjectsDTO>;
 		},
 		TContext
 	>;
@@ -599,7 +599,7 @@ export const getPatchObjectsMutationOptions = <
 	TError,
 	{
 		pathParams: PatchObjectsPathParameters;
-		data: BodyType<AuthtypesPatchableObjectsDTO>;
+		data: BodyType<CoretypesPatchableObjectsDTO>;
 	},
 	TContext
 > => {
@@ -616,7 +616,7 @@ export const getPatchObjectsMutationOptions = <
 		Awaited<ReturnType<typeof patchObjects>>,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<AuthtypesPatchableObjectsDTO>;
+			data: BodyType<CoretypesPatchableObjectsDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -630,7 +630,7 @@ export const getPatchObjectsMutationOptions = <
 export type PatchObjectsMutationResult = NonNullable<
 	Awaited<ReturnType<typeof patchObjects>>
 >;
-export type PatchObjectsMutationBody = BodyType<AuthtypesPatchableObjectsDTO>;
+export type PatchObjectsMutationBody = BodyType<CoretypesPatchableObjectsDTO>;
 export type PatchObjectsMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -645,7 +645,7 @@ export const usePatchObjects = <
 		TError,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<AuthtypesPatchableObjectsDTO>;
+			data: BodyType<CoretypesPatchableObjectsDTO>;
 		},
 		TContext
 	>;
@@ -654,7 +654,7 @@ export const usePatchObjects = <
 	TError,
 	{
 		pathParams: PatchObjectsPathParameters;
-		data: BodyType<AuthtypesPatchableObjectsDTO>;
+		data: BodyType<CoretypesPatchableObjectsDTO>;
 	},
 	TContext
 > => {

frontend/src/components/Common/Common.styles.scss

@@ -1,33 +0,0 @@
-.error-state-container {
-	height: 240px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-
-	border-radius: 3px;
-
-	.error-state-container-content {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		.error-state-text {
-			font-size: 14px;
-			font-weight: 500;
-		}
-
-		.error-state-additional-messages {
-			margin-top: 8px;
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-
-			.error-state-additional-text {
-				font-size: 12px;
-				font-weight: 400;
-				margin-left: 8px;
-			}
-		}
-	}
-}

frontend/src/components/Common/ErrorStateComponent.tsx

@@ -1,59 +0,0 @@
-import { Typography } from 'antd';
-
-import APIError from '../../types/api/error';
-
-import './Common.styles.scss';
-
-interface ErrorStateComponentProps {
-	message?: string;
-	error?: APIError;
-}
-
-const defaultProps: Partial<ErrorStateComponentProps> = {
-	message: undefined,
-	error: undefined,
-};
-
-function ErrorStateComponent({
-	message,
-	error,
-}: ErrorStateComponentProps): JSX.Element {
-	// Handle API Error object
-	if (error) {
-		const mainMessage = error.getErrorMessage();
-		const additionalErrors = error.getErrorDetails().error.errors || [];
-
-		return (
-			<div className="error-state-container">
-				<div className="error-state-container-content">
-					<Typography className="error-state-text">{mainMessage}</Typography>
-					{additionalErrors.length > 0 && (
-						<div className="error-state-additional-messages">
-							{additionalErrors.map((additionalError) => (
-								<Typography
-									key={`error-${additionalError.message}`}
-									className="error-state-additional-text"
-								>
-									• {additionalError.message}
-								</Typography>
-							))}
-						</div>
-					)}
-				</div>
-			</div>
-		);
-	}
-
-	// Handle simple string message (backwards compatibility)
-	return (
-		<div className="error-state-container">
-			<div className="error-state-container-content">
-				<Typography className="error-state-text">{message}</Typography>
-			</div>
-		</div>
-	);
-}
-
-ErrorStateComponent.defaultProps = defaultProps;
-
-export default ErrorStateComponent;

frontend/src/components/CustomTimePicker/RangePickerModal.styles.scss

@@ -1,4 +0,0 @@
-.custom-date-picker {
-	display: flex;
-	flex-direction: column;
-}

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

@@ -1,105 +0,0 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { DatePicker } from 'antd';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
-import {
-	CustomTimeType,
-	LexicalContext,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import dayjs, { Dayjs } from 'dayjs';
-import { useTimezone } from 'providers/Timezone';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import './RangePickerModal.styles.scss';
-
-interface RangePickerModalProps {
-	setCustomDTPickerVisible: Dispatch<SetStateAction<boolean>>;
-	setIsOpen: Dispatch<SetStateAction<boolean>>;
-	onCustomDateHandler: (
-		dateTimeRange: DateTimeRangeType,
-		lexicalContext?: LexicalContext | undefined,
-	) => void;
-	selectedTime: string;
-	onTimeChange?: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-}
-
-function RangePickerModal(props: RangePickerModalProps): JSX.Element {
-	const {
-		setCustomDTPickerVisible,
-		setIsOpen,
-		onCustomDateHandler,
-		selectedTime,
-		onTimeChange,
-	} = props;
-	const { RangePicker } = DatePicker;
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	// Using any type here because antd's DatePicker expects its own internal Dayjs type
-	// which conflicts with our project's Dayjs type that has additional plugins (tz, utc etc).
-	const disabledDate = (current: any): boolean => {
-		const currentDay = dayjs(current);
-		return currentDay.isAfter(dayjs());
-	};
-
-	const onPopoverClose = (visible: boolean): void => {
-		if (!visible) {
-			setCustomDTPickerVisible(false);
-		}
-		setIsOpen(visible);
-	};
-
-	const onModalOkHandler = (date_time: any): void => {
-		if (date_time?.[1]) {
-			onPopoverClose(false);
-		}
-		onCustomDateHandler(date_time, LexicalContext.CUSTOM_DATE_PICKER);
-	};
-	const { timezone } = useTimezone();
-
-	const rangeValue: [Dayjs, Dayjs] = useMemo(
-		() => [
-			dayjs(minTime / 1000_000).tz(timezone.value),
-			dayjs(maxTime / 1000_000).tz(timezone.value),
-		],
-		[maxTime, minTime, timezone.value],
-	);
-
-	return (
-		<div className="custom-date-picker">
-			<RangePicker
-				disabledDate={disabledDate}
-				allowClear
-				showTime
-				format={(date: Dayjs): string =>
-					date.tz(timezone.value).format(DATE_TIME_FORMATS.ISO_DATETIME)
-				}
-				onOk={onModalOkHandler}
-				data-1p-ignore
-				{...(selectedTime === 'custom' &&
-					!onTimeChange && {
-						value: rangeValue,
-					})}
-				// use default value if onTimeChange is provided
-				{...(selectedTime === 'custom' &&
-					onTimeChange && {
-						defaultValue: rangeValue,
-					})}
-			/>
-		</div>
-	);
-}
-
-RangePickerModal.defaultProps = {
-	onTimeChange: undefined,
-};
-
-export default RangePickerModal;

frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss

@@ -1,93 +0,0 @@
-.details-drawer {
-	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--l1-border);
-	}
-	.ant-drawer-header {
-		background: var(--l2-background);
-		border-bottom: 1px solid var(--l1-border);
-
-		.ant-drawer-header-title {
-			display: flex;
-			align-items: center;
-
-			.ant-drawer-close {
-				margin-inline-end: 0px;
-				padding: 0px;
-				padding-right: 16px;
-				border-right: 1px solid var(--l1-border);
-			}
-
-			.ant-drawer-title {
-				padding-left: 16px;
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-	.ant-drawer-body {
-		padding: 16px;
-		background: var(--l2-background);
-
-		&::-webkit-scrollbar {
-			width: 0.1rem;
-		}
-	}
-
-	.details-drawer-tabs {
-		margin-top: 32px;
-
-		.ant-tabs-tab {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 114px;
-			height: 32px;
-			flex-shrink: 0;
-			padding: 7px 20px;
-			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-
-			color: var(--l1-foreground);
-			font-family: Inter;
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 150% */
-			letter-spacing: -0.06px;
-
-			.ant-btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 0px;
-			}
-
-			.ant-btn:hover {
-				background: unset;
-			}
-		}
-
-		.ant-tabs-tab-active {
-			background: var(--l3-background);
-		}
-
-		.ant-tabs-tab + .ant-tabs-tab {
-			margin-left: 0px;
-		}
-
-		.ant-tabs-nav::before {
-			border-bottom: 0px;
-		}
-
-		.ant-tabs-ink-bar {
-			background: none;
-		}
-	}
-}

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

@@ -1,57 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Drawer, Tabs, TabsProps } from 'antd';
-import cx from 'classnames';
-
-import './DetailsDrawer.styles.scss';
-
-interface IDetailsDrawerProps {
-	open: boolean;
-	setOpen: Dispatch<SetStateAction<boolean>>;
-	title: string;
-	descriptiveContent: JSX.Element;
-	defaultActiveKey: string;
-	items: TabsProps['items'];
-	detailsDrawerClassName?: string;
-	tabBarExtraContent?: JSX.Element;
-}
-
-function DetailsDrawer(props: IDetailsDrawerProps): JSX.Element {
-	const {
-		open,
-		setOpen,
-		title,
-		descriptiveContent,
-		defaultActiveKey,
-		detailsDrawerClassName,
-		items,
-		tabBarExtraContent,
-	} = props;
-	return (
-		<Drawer
-			width="60%"
-			open={open}
-			afterOpenChange={setOpen}
-			mask={false}
-			title={title}
-			onClose={(): void => setOpen(false)}
-			className="details-drawer"
-		>
-			<div>{descriptiveContent}</div>
-			<Tabs
-				items={items}
-				addIcon
-				defaultActiveKey={defaultActiveKey}
-				animated
-				className={cx('details-drawer-tabs', detailsDrawerClassName)}
-				tabBarExtraContent={tabBarExtraContent}
-			/>
-		</Drawer>
-	);
-}
-
-DetailsDrawer.defaultProps = {
-	detailsDrawerClassName: '',
-	tabBarExtraContent: null,
-};
-
-export default DetailsDrawer;

frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.example.tsx

@@ -1,143 +0,0 @@
-import { useState } from 'react';
-import { Button } from 'antd';
-
-import { withErrorBoundary } from './index';
-
-/**
- * Example component that can throw errors
- */
-function ProblematicComponent(): JSX.Element {
-	const [shouldThrow, setShouldThrow] = useState(false);
-
-	if (shouldThrow) {
-		throw new Error('This is a test error from ProblematicComponent!');
-	}
-
-	return (
-		<div style={{ padding: '20px' }}>
-			<h3>Problematic Component</h3>
-			<p>This component can throw errors when the button is clicked.</p>
-			<Button type="primary" onClick={(): void => setShouldThrow(true)} danger>
-				Trigger Error
-			</Button>
-		</div>
-	);
-}
-
-/**
- * Basic usage - wraps component with default error boundary
- */
-export const SafeProblematicComponent = withErrorBoundary(ProblematicComponent);
-
-/**
- * Usage with custom fallback component
- */
-function CustomErrorFallback(): JSX.Element {
-	return (
-		<div
-			style={{ padding: '20px', border: '1px solid red', borderRadius: '4px' }}
-		>
-			<h4 style={{ color: 'red' }}>Custom Error Fallback</h4>
-			<p>Something went wrong in this specific component!</p>
-			<Button onClick={(): void => window.location.reload()}>Reload Page</Button>
-		</div>
-	);
-}
-
-export const SafeProblematicComponentWithCustomFallback = withErrorBoundary(
-	ProblematicComponent,
-	{
-		fallback: <CustomErrorFallback />,
-	},
-);
-
-/**
- * Usage with custom error handler
- */
-export const SafeProblematicComponentWithErrorHandler = withErrorBoundary(
-	ProblematicComponent,
-	{
-		onError: (error, errorInfo) => {
-			console.error('Custom error handler:', error);
-			console.error('Error info:', errorInfo);
-			// You could also send to analytics, logging service, etc.
-		},
-		sentryOptions: {
-			tags: {
-				section: 'dashboard',
-				priority: 'high',
-			},
-			level: 'error',
-		},
-	},
-);
-
-/**
- * Example of wrapping an existing component from the codebase
- */
-function ExistingComponent({
-	title,
-	data,
-}: {
-	title: string;
-	data: any[];
-}): JSX.Element {
-	// This could be any existing component that might throw errors
-	return (
-		<div>
-			<h4>{title}</h4>
-			<ul>
-				{data.map((item, index) => (
-					// eslint-disable-next-line react/no-array-index-key
-					<li key={index}>{item.name}</li>
-				))}
-			</ul>
-		</div>
-	);
-}
-
-export const SafeExistingComponent = withErrorBoundary(ExistingComponent, {
-	sentryOptions: {
-		tags: {
-			component: 'ExistingComponent',
-			feature: 'data-display',
-		},
-	},
-});
-
-/**
- * Usage examples in a container component
- */
-export function ErrorBoundaryExamples(): JSX.Element {
-	const sampleData = [
-		{ name: 'Item 1' },
-		{ name: 'Item 2' },
-		{ name: 'Item 3' },
-	];
-
-	return (
-		<div style={{ padding: '20px' }}>
-			<h2>Error Boundary HOC Examples</h2>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>1. Basic Usage</h3>
-				<SafeProblematicComponent />
-			</div>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>2. With Custom Fallback</h3>
-				<SafeProblematicComponentWithCustomFallback />
-			</div>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>3. With Custom Error Handler</h3>
-				<SafeProblematicComponentWithErrorHandler />
-			</div>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>4. Wrapped Existing Component</h3>
-				<SafeExistingComponent title="Sample Data" data={sampleData} />
-			</div>
-		</div>
-	);
-}

frontend/src/components/GuardAuthZ/GuardAuthZ.test.tsx

@@ -55,7 +55,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		render(
-			<GuardAuthZ relation="read" object="dashboard:*">
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -79,7 +79,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="read"
-				object="dashboard:*"
+				object="role:*"
 				fallbackOnLoading={<LoadingFallback />}
 			>
 				<TestChild />
@@ -102,7 +102,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -121,11 +121,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		render(
-			<GuardAuthZ
-				relation="read"
-				object="dashboard:*"
-				fallbackOnError={ErrorFallback}
-			>
+			<GuardAuthZ relation="read" object="role:*" fallbackOnError={ErrorFallback}>
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -155,7 +151,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="read"
-				object="dashboard:*"
+				object="role:*"
 				fallbackOnError={errorFallbackWithCapture}
 			>
 				<TestChild />
@@ -178,7 +174,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -201,7 +197,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="update"
-				object="dashboard:123"
+				object="role:123"
 				fallbackOnNoPermissions={NoPermissionFallback}
 			>
 				<TestChild />
@@ -224,7 +220,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		const { container } = render(
-			<GuardAuthZ relation="update" object="dashboard:123">
+			<GuardAuthZ relation="update" object="role:123">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -244,7 +240,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -257,7 +253,7 @@ describe('GuardAuthZ', () => {
 	});
 
 	it('should pass requiredPermissionName to fallbackOnNoPermissions', async () => {
-		const permission = buildPermission('update', 'dashboard:123');
+		const permission = buildPermission('update', 'role:123');
 
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
@@ -269,7 +265,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="update"
-				object="dashboard:123"
+				object="role:123"
 				fallbackOnNoPermissions={NoPermissionFallbackWithSuggestions}
 			>
 				<TestChild />
@@ -299,7 +295,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		const { rerender } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -309,7 +305,7 @@ describe('GuardAuthZ', () => {
 		});
 
 		rerender(
-			<GuardAuthZ relation="delete" object="dashboard:456">
+			<GuardAuthZ relation="delete" object="role:456">
 				<TestChild />
 			</GuardAuthZ>,
 		);

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

@@ -1,13 +0,0 @@
-.query-builder-search-wrapper {
-	margin-top: 10px;
-	border: 1px solid var(--l1-border);
-	border-bottom: none;
-
-	.ant-select-selector {
-		border: none !important;
-
-		input {
-			font-size: 12px;
-		}
-	}
-}

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.tsx

@@ -1,79 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
-import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import { ILog } from 'types/api/logs/log';
-import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-import './QueryBuilderSearchWrapper.styles.scss';
-
-function QueryBuilderSearchWrapper({
-	log,
-	filters,
-	contextQuery,
-	isEdit,
-	suffixIcon,
-	setFilters,
-	setContextQuery,
-}: QueryBuilderSearchWraperProps): JSX.Element {
-	const initialContextQuery = useInitialQuery(log);
-
-	useEffect(() => {
-		setContextQuery(initialContextQuery);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	const handleSearch = (tagFilters: TagFilter): void => {
-		const tagFiltersLength = tagFilters.items.length;
-
-		if (
-			(!tagFiltersLength && (!filters || !filters.items.length)) ||
-			tagFiltersLength === filters?.items.length ||
-			!contextQuery
-		) {
-			return;
-		}
-
-		const nextQuery: Query = {
-			...contextQuery,
-			builder: {
-				...contextQuery.builder,
-				queryData: contextQuery.builder.queryData.map((item) => ({
-					...item,
-					filters: tagFilters,
-				})),
-			},
-		};
-
-		setFilters({ ...tagFilters });
-		setContextQuery({ ...nextQuery });
-	};
-
-	if (!contextQuery || !isEdit) {
-		return <></>;
-	}
-
-	return (
-		<QueryBuilderSearch
-			query={contextQuery?.builder.queryData[0]}
-			onChange={handleSearch}
-			className="query-builder-search-wrapper"
-			suffixIcon={suffixIcon}
-		/>
-	);
-}
-
-interface QueryBuilderSearchWraperProps {
-	log: ILog;
-	isEdit: boolean;
-	contextQuery: Query | undefined;
-	setContextQuery: Dispatch<SetStateAction<Query | undefined>>;
-	filters: TagFilter | null;
-	setFilters: Dispatch<SetStateAction<TagFilter | null>>;
-	suffixIcon?: React.ReactNode;
-}
-
-QueryBuilderSearchWrapper.defaultProps = {
-	suffixIcon: undefined,
-};
-
-export default QueryBuilderSearchWrapper;

frontend/src/components/Logs/RawLogView/config.ts

@@ -1,3 +0,0 @@
-import { CSSProperties } from 'react';
-
-export const rawLineStyle: CSSProperties = {};

frontend/src/components/Logs/styles.ts

@@ -1,8 +0,0 @@
-import { Button } from 'antd';
-import styled from 'styled-components';
-
-export const ButtonContainer = styled(Button)`
-	&&& {
-		padding-left: 0;
-	}
-`;

frontend/src/components/NewSelect/CustomMultiSelect.scss

@@ -1,13 +0,0 @@
-.custom-multiselect-dropdown {
-	.divider {
-		height: 1px;
-		background-color: #e8e8e8;
-		margin: 4px 0;
-	}
-
-	.all-option {
-		font-weight: 500;
-		border-bottom: 1px solid #f0f0f0;
-		margin-bottom: 8px;
-	}
-}

frontend/src/components/PanelDataLoading/PanelDataLoading.styles.scss

@@ -1,19 +0,0 @@
-.loading-panel-data {
-	padding: 24px 0;
-	height: 240px;
-
-	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-
-	.loading-panel-data-content {
-		display: flex;
-		align-items: flex-start;
-		flex-direction: column;
-
-		.loading-gif {
-			height: 72px;
-			margin-left: -24px;
-		}
-	}
-}

frontend/src/components/PanelDataLoading/PanelDataLoading.tsx

@@ -1,17 +0,0 @@
-import { Typography } from 'antd';
-
-import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
-
-import './PanelDataLoading.styles.scss';
-
-export function PanelDataLoading(): JSX.Element {
-	return (
-		<div className="loading-panel-data">
-			<div className="loading-panel-data-content">
-				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
-
-				<Typography.Text>Fetching data...</Typography.Text>
-			</div>
-		</div>
-	);
-}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.provider.tsx

@@ -0,0 +1,126 @@
+import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+import { parseAsString, useQueryState } from 'nuqs';
+import { useStore } from 'zustand';
+
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from '../utils';
+import { QuerySearchV2Context } from './context';
+import type { QuerySearchV2ContextValue } from './QuerySearchV2.store';
+import { createExpressionStore } from './QuerySearchV2.store';
+
+export interface QuerySearchV2ProviderProps {
+	queryParamKey: string;
+	initialExpression?: string;
+	/**
+	 * @default false
+	 */
+	persistOnUnmount?: boolean;
+	children: ReactNode;
+}
+
+/**
+ * Provider component that creates a scoped zustand store and exposes
+ * expression state to children via context.
+ */
+export function QuerySearchV2Provider({
+	initialExpression = '',
+	persistOnUnmount = false,
+	queryParamKey,
+	children,
+}: QuerySearchV2ProviderProps): JSX.Element {
+	const storeRef = useRef(createExpressionStore());
+	const store = storeRef.current;
+
+	const [urlExpression, setUrlExpression] = useQueryState(
+		queryParamKey,
+		parseAsString,
+	);
+
+	const committedExpression = useStore(store, (s) => s.committedExpression);
+	const setInputExpression = useStore(store, (s) => s.setInputExpression);
+	const commitExpression = useStore(store, (s) => s.commitExpression);
+	const initializeFromUrl = useStore(store, (s) => s.initializeFromUrl);
+	const resetExpression = useStore(store, (s) => s.resetExpression);
+
+	const isInitialized = useRef(false);
+	useEffect(() => {
+		if (!isInitialized.current && urlExpression) {
+			const cleanedExpression = getUserExpressionFromCombined(
+				initialExpression,
+				urlExpression,
+			);
+			initializeFromUrl(cleanedExpression);
+			isInitialized.current = true;
+		}
+	}, [urlExpression, initialExpression, initializeFromUrl]);
+
+	useEffect(() => {
+		if (isInitialized.current || !urlExpression) {
+			setUrlExpression(committedExpression || null);
+		}
+	}, [committedExpression, setUrlExpression, urlExpression]);
+
+	useEffect(() => {
+		return (): void => {
+			if (!persistOnUnmount) {
+				setUrlExpression(null);
+				resetExpression();
+			}
+		};
+	}, [persistOnUnmount, setUrlExpression, resetExpression]);
+
+	const handleChange = useCallback(
+		(expression: string): void => {
+			const userOnly = getUserExpressionFromCombined(
+				initialExpression,
+				expression,
+			);
+			setInputExpression(userOnly);
+		},
+		[initialExpression, setInputExpression],
+	);
+
+	const handleRun = useCallback(
+		(expression: string): void => {
+			const userOnly = getUserExpressionFromCombined(
+				initialExpression,
+				expression,
+			);
+			commitExpression(userOnly);
+		},
+		[initialExpression, commitExpression],
+	);
+
+	const combinedExpression = useMemo(
+		() => combineInitialAndUserExpression(initialExpression, committedExpression),
+		[initialExpression, committedExpression],
+	);
+
+	const contextValue = useMemo<QuerySearchV2ContextValue>(
+		() => ({
+			expression: combinedExpression,
+			userExpression: committedExpression,
+			initialExpression,
+			querySearchProps: {
+				initialExpression: initialExpression.trim() ? initialExpression : undefined,
+				onChange: handleChange,
+				onRun: handleRun,
+			},
+		}),
+		[
+			combinedExpression,
+			committedExpression,
+			initialExpression,
+			handleChange,
+			handleRun,
+		],
+	);
+
+	return (
+		<QuerySearchV2Context.Provider value={contextValue}>
+			{children}
+		</QuerySearchV2Context.Provider>
+	);
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.store.ts

@@ -0,0 +1,60 @@
+import { createStore, StoreApi } from 'zustand';
+
+export type QuerySearchV2Store = {
+	/**
+	 * User-typed expression (local state, updates on typing)
+	 */
+	inputExpression: string;
+	/**
+	 * Committed expression (synced to URL, updates on submit)
+	 */
+	committedExpression: string;
+	setInputExpression: (expression: string) => void;
+	commitExpression: (expression: string) => void;
+	resetExpression: () => void;
+	initializeFromUrl: (urlExpression: string) => void;
+};
+
+export interface QuerySearchProps {
+	initialExpression: string | undefined;
+	onChange: (expression: string) => void;
+	onRun: (expression: string) => void;
+}
+
+export interface QuerySearchV2ContextValue {
+	/**
+	 * Combined expression: "initialExpression AND (userExpression)"
+	 */
+	expression: string;
+	userExpression: string;
+	initialExpression: string;
+	querySearchProps: QuerySearchProps;
+}
+
+export function createExpressionStore(): StoreApi<QuerySearchV2Store> {
+	return createStore<QuerySearchV2Store>((set) => ({
+		inputExpression: '',
+		committedExpression: '',
+		setInputExpression: (expression: string): void => {
+			set({ inputExpression: expression });
+		},
+		commitExpression: (expression: string): void => {
+			set({
+				inputExpression: expression,
+				committedExpression: expression,
+			});
+		},
+		resetExpression: (): void => {
+			set({
+				inputExpression: '',
+				committedExpression: '',
+			});
+		},
+		initializeFromUrl: (urlExpression: string): void => {
+			set({
+				inputExpression: urlExpression,
+				committedExpression: urlExpression,
+			});
+		},
+	}));
+}

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

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+import { act, renderHook } from '@testing-library/react';
+
+import { useQuerySearchV2Context } from '../context';
+import {
+	QuerySearchV2Provider,
+	QuerySearchV2ProviderProps,
+} from '../QuerySearchV2.provider';
+
+const mockSetQueryState = jest.fn();
+let mockUrlValue: string | null = null;
+
+jest.mock('nuqs', () => ({
+	parseAsString: {},
+	useQueryState: jest.fn(() => [mockUrlValue, mockSetQueryState]),
+}));
+
+function createWrapper(
+	props: Partial<QuerySearchV2ProviderProps> = {},
+): ({ children }: { children: ReactNode }) => JSX.Element {
+	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
+		return (
+			<QuerySearchV2Provider queryParamKey="testExpression" {...props}>
+				{children}
+			</QuerySearchV2Provider>
+		);
+	};
+}
+
+describe('QuerySearchExpressionProvider', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUrlValue = null;
+	});
+
+	it('should provide initial context values', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.expression).toBe('');
+		expect(result.current.userExpression).toBe('');
+		expect(result.current.initialExpression).toBe('');
+	});
+
+	it('should combine initialExpression with userExpression', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper({ initialExpression: 'k8s.pod.name = "my-pod"' }),
+		});
+
+		expect(result.current.expression).toBe('k8s.pod.name = "my-pod"');
+		expect(result.current.initialExpression).toBe('k8s.pod.name = "my-pod"');
+
+		act(() => {
+			result.current.querySearchProps.onChange('service = "api"');
+		});
+		act(() => {
+			result.current.querySearchProps.onRun('service = "api"');
+		});
+
+		expect(result.current.expression).toBe(
+			'k8s.pod.name = "my-pod" AND (service = "api")',
+		);
+		expect(result.current.userExpression).toBe('service = "api"');
+	});
+
+	it('should provide querySearchProps with correct callbacks', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper({ initialExpression: 'initial' }),
+		});
+
+		expect(result.current.querySearchProps.initialExpression).toBe('initial');
+		expect(typeof result.current.querySearchProps.onChange).toBe('function');
+		expect(typeof result.current.querySearchProps.onRun).toBe('function');
+	});
+
+	it('should initialize from URL value on mount', () => {
+		mockUrlValue = 'status = 500';
+
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.userExpression).toBe('status = 500');
+		expect(result.current.expression).toBe('status = 500');
+	});
+
+	it('should throw error when used outside provider', () => {
+		expect(() => {
+			renderHook(() => useQuerySearchV2Context());
+		}).toThrow(
+			'useQuerySearchV2Context must be used within a QuerySearchV2Provider',
+		);
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/__tests__/store.test.ts

@@ -0,0 +1,61 @@
+import { createExpressionStore } from '../QuerySearchV2.store';
+
+describe('createExpressionStore', () => {
+	it('should create a store with initial state', () => {
+		const store = createExpressionStore();
+		const state = store.getState();
+
+		expect(state.inputExpression).toBe('');
+		expect(state.committedExpression).toBe('');
+	});
+
+	it('should update inputExpression via setInputExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+
+		expect(store.getState().inputExpression).toBe('service.name = "api"');
+		expect(store.getState().committedExpression).toBe('');
+	});
+
+	it('should update both expressions via commitExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+		store.getState().commitExpression('service.name = "api"');
+
+		expect(store.getState().inputExpression).toBe('service.name = "api"');
+		expect(store.getState().committedExpression).toBe('service.name = "api"');
+	});
+
+	it('should reset all state via resetExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+		store.getState().commitExpression('service.name = "api"');
+		store.getState().resetExpression();
+
+		expect(store.getState().inputExpression).toBe('');
+		expect(store.getState().committedExpression).toBe('');
+	});
+
+	it('should initialize from URL value', () => {
+		const store = createExpressionStore();
+
+		store.getState().initializeFromUrl('status = 500');
+
+		expect(store.getState().inputExpression).toBe('status = 500');
+		expect(store.getState().committedExpression).toBe('status = 500');
+	});
+
+	it('should create isolated store instances', () => {
+		const store1 = createExpressionStore();
+		const store2 = createExpressionStore();
+
+		store1.getState().setInputExpression('expr1');
+		store2.getState().setInputExpression('expr2');
+
+		expect(store1.getState().inputExpression).toBe('expr1');
+		expect(store2.getState().inputExpression).toBe('expr2');
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/context.ts

@@ -0,0 +1,17 @@
+// eslint-disable-next-line no-restricted-imports -- React Context required for scoped store pattern
+import { createContext, useContext } from 'react';
+
+import type { QuerySearchV2ContextValue } from './QuerySearchV2.store';
+
+export const QuerySearchV2Context =
+	createContext<QuerySearchV2ContextValue | null>(null);
+
+export function useQuerySearchV2Context(): QuerySearchV2ContextValue {
+	const context = useContext(QuerySearchV2Context);
+	if (!context) {
+		throw new Error(
+			'useQuerySearchV2Context must be used within a QuerySearchV2Provider',
+		);
+	}
+	return context;
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/index.ts

@@ -0,0 +1,8 @@
+export { useQuerySearchV2Context } from './context';
+export type { QuerySearchV2ProviderProps } from './QuerySearchV2.provider';
+export { QuerySearchV2Provider } from './QuerySearchV2.provider';
+export type {
+	QuerySearchProps,
+	QuerySearchV2ContextValue,
+	QuerySearchV2Store,
+} from './QuerySearchV2.store';

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

@@ -19,6 +19,13 @@
 		display: flex;
 		flex-direction: row;
 
+		.query-search-initial-scope-label {
+			position: absolute;
+			left: 8px;
+			top: 10px;
+			z-index: 10;
+		}
+
 		.query-where-clause-editor {
 			flex: 1;
 			min-width: 400px;
@@ -53,6 +60,10 @@
 				}
 			}
 		}
+
+		&.hasInitialExpression .cm-editor .cm-content {
+			padding-left: 22px !important;
+		}
 	}
 
 	.cm-editor {
@@ -68,7 +79,6 @@
 			border-radius: 2px;
 			border: 1px solid var(--l1-border);
 			padding: 0px !important;
-			background-color: var(--l1-background) !important;
 
 			&:focus-within {
 				border-color: var(--l1-border);

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

@@ -30,7 +30,7 @@ import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariabl
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
-import { Info, TriangleAlert } from 'lucide-react';
+import { Filter, Info, TriangleAlert } from 'lucide-react';
 import {
 	IDetailedError,
 	IQueryContext,
@@ -47,6 +47,7 @@ import { validateQuery } from 'utils/queryValidationUtils';
 import { unquote } from 'utils/stringUtils';
 
 import { queryExamples } from './constants';
+import { combineInitialAndUserExpression } from './utils';
 
 import './QuerySearch.styles.scss';
 
@@ -85,6 +86,8 @@ interface QuerySearchProps {
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
 	showFilterSuggestionsWithoutMetric?: boolean;
+	/** When set, the editor shows only the user expression; API/filter uses `initial AND (user)`. */
+	initialExpression?: string;
 }
 
 function QuerySearch({
@@ -96,6 +99,7 @@ function QuerySearch({
 	signalSource,
 	hardcodedAttributeKeys,
 	showFilterSuggestionsWithoutMetric,
+	initialExpression,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -112,18 +116,26 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
-	const handleQueryValidation = useCallback((newExpression: string): void => {
-		try {
-			const validationResponse = validateQuery(newExpression);
-			setValidation(validationResponse);
-		} catch (error) {
-			setValidation({
-				isValid: false,
-				message: 'Failed to process query',
-				errors: [error as IDetailedError],
-			});
-		}
-	}, []);
+	const isScopedFilter = initialExpression !== undefined;
+
+	const validateExpressionForEditor = useCallback(
+		(editorDoc: string): void => {
+			const toValidate = isScopedFilter
+				? combineInitialAndUserExpression(initialExpression ?? '', editorDoc)
+				: editorDoc;
+			try {
+				const validationResponse = validateQuery(toValidate);
+				setValidation(validationResponse);
+			} catch (error) {
+				setValidation({
+					isValid: false,
+					message: 'Failed to process query',
+					errors: [error as IDetailedError],
+				});
+			}
+		},
+		[initialExpression, isScopedFilter],
+	);
 
 	const getCurrentExpression = useCallback(
 		(): string => editorRef.current?.state.doc.toString() || '',
@@ -165,6 +177,8 @@ function QuerySearch({
 		setIsEditorReady(true);
 	}, []);
 
+	const prevQueryDataExpressionRef = useRef<string | undefined>();
+
 	useEffect(
 		() => {
 			if (!isEditorReady) {
@@ -173,13 +187,22 @@ function QuerySearch({
 
 			const newExpression = queryData.filter?.expression || '';
 			const currentExpression = getCurrentExpression();
+			const prevExpression = prevQueryDataExpressionRef.current;
 
-			// Do not update codemirror editor if the expression is the same
-			if (newExpression !== currentExpression && !isFocused) {
+			// Only sync editor when queryData.filter?.expression actually changed from external source
+			// Not when focus changed (which would reset uncommitted user input)
+			const queryDataExpressionChanged = prevExpression !== newExpression;
+			prevQueryDataExpressionRef.current = newExpression;
+
+			if (
+				queryDataExpressionChanged &&
+				newExpression !== currentExpression &&
+				!isFocused
+			) {
 				updateEditorValue(newExpression, { skipOnChange: true });
-				if (newExpression) {
-					handleQueryValidation(newExpression);
-				}
+			}
+			if (!isFocused) {
+				validateExpressionForEditor(currentExpression);
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -284,7 +307,7 @@ function QuerySearch({
 						}
 					});
 				}
-				setKeySuggestions(Array.from(merged.values()));
+				setKeySuggestions([...merged.values()]);
 
 				// Force reopen the completion if editor is available and focused
 				if (editorRef.current) {
@@ -337,7 +360,7 @@ function QuerySearch({
 		// If value contains single quotes, escape them and wrap in single quotes
 		if (value.includes("'")) {
 			// Replace single quotes with escaped single quotes
-			const escapedValue = value.replace(/'/g, "\\'");
+			const escapedValue = value.replaceAll(/'/g, "\\'");
 			return `'${escapedValue}'`;
 		}
 
@@ -614,7 +637,7 @@ function QuerySearch({
 
 	const handleBlur = (): void => {
 		const currentExpression = getCurrentExpression();
-		handleQueryValidation(currentExpression);
+		validateExpressionForEditor(currentExpression);
 		setIsFocused(false);
 	};
 
@@ -632,7 +655,6 @@ function QuerySearch({
 	);
 
 	const handleExampleClick = (exampleQuery: string): void => {
-		// If there's an existing query, append the example with AND
 		const currentExpression = getCurrentExpression();
 		const newExpression = currentExpression
 			? `${currentExpression} AND ${exampleQuery}`
@@ -897,12 +919,12 @@ function QuerySearch({
 
 			// If we have previous pairs, we can prioritize keys that haven't been used yet
 			if (queryContext.queryPairs && queryContext.queryPairs.length > 0) {
-				const usedKeys = queryContext.queryPairs.map((pair) => pair.key);
+				const usedKeys = new Set(queryContext.queryPairs.map((pair) => pair.key));
 
 				// Add boost to unused keys to prioritize them
 				options = options.map((option) => ({
 					...option,
-					boost: usedKeys.includes(option.label) ? -10 : 10,
+					boost: usedKeys.has(option.label) ? -10 : 10,
 				}));
 			}
 
@@ -1317,6 +1339,19 @@ function QuerySearch({
 			)}
 
 			<div className="query-where-clause-editor-container">
+				{isScopedFilter ? (
+					<Tooltip title={initialExpression || ''} placement="left">
+						<div className="query-search-initial-scope-label">
+							<Filter
+								size={14}
+								style={{
+									opacity: 0.9,
+									color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+								}}
+							/>
+						</div>
+					</Tooltip>
+				) : null}
 				<Tooltip
 					title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
 					placement="left"
@@ -1356,6 +1391,7 @@ function QuerySearch({
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
+						hasInitialExpression: isScopedFilter,
 					})}
 					extensions={[
 						autocompletion({
@@ -1390,7 +1426,12 @@ function QuerySearch({
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
-											onRun(getCurrentExpression());
+											const user = getCurrentExpression();
+											onRun(
+												isScopedFilter
+													? combineInitialAndUserExpression(initialExpression ?? '', user)
+													: user,
+											);
 										}
 										return true;
 									},
@@ -1555,6 +1596,7 @@ QuerySearch.defaultProps = {
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
 	showFilterSuggestionsWithoutMetric: false,
+	initialExpression: undefined,
 };
 
 export default QuerySearch;

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

@@ -0,0 +1,58 @@
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from '../utils';
+
+describe('entityLogsExpression', () => {
+	describe('combineInitialAndUserExpression', () => {
+		it('returns user when initial is empty', () => {
+			expect(combineInitialAndUserExpression('', 'body contains error')).toBe(
+				'body contains error',
+			);
+		});
+
+		it('returns initial when user is empty', () => {
+			expect(combineInitialAndUserExpression('k8s.pod.name = "x"', '')).toBe(
+				'k8s.pod.name = "x"',
+			);
+		});
+
+		it('wraps user in parentheses with AND', () => {
+			expect(
+				combineInitialAndUserExpression('k8s.pod.name = "x"', 'body = "a"'),
+			).toBe('k8s.pod.name = "x" AND (body = "a")');
+		});
+	});
+
+	describe('getUserExpressionFromCombined', () => {
+		it('returns empty when combined equals initial', () => {
+			expect(
+				getUserExpressionFromCombined('k8s.pod.name = "x"', 'k8s.pod.name = "x"'),
+			).toBe('');
+		});
+
+		it('extracts user from wrapped form', () => {
+			expect(
+				getUserExpressionFromCombined(
+					'k8s.pod.name = "x"',
+					'k8s.pod.name = "x" AND (body = "a")',
+				),
+			).toBe('body = "a"');
+		});
+
+		it('extracts user from legacy AND without parens', () => {
+			expect(
+				getUserExpressionFromCombined(
+					'k8s.pod.name = "x"',
+					'k8s.pod.name = "x" AND body = "a"',
+				),
+			).toBe('body = "a"');
+		});
+
+		it('returns full combined when initial is empty', () => {
+			expect(getUserExpressionFromCombined('', 'service.name = "a"')).toBe(
+				'service.name = "a"',
+			);
+		});
+	});
+});

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

@@ -0,0 +1,40 @@
+export function combineInitialAndUserExpression(
+	initial: string,
+	user: string,
+): string {
+	const i = initial.trim();
+	const u = user.trim();
+	if (!i) {
+		return u;
+	}
+	if (!u) {
+		return i;
+	}
+	return `${i} AND (${u})`;
+}
+
+export function getUserExpressionFromCombined(
+	initial: string,
+	combined: string | null | undefined,
+): string {
+	const i = initial.trim();
+	const c = (combined ?? '').trim();
+	if (!c) {
+		return '';
+	}
+	if (!i) {
+		return c;
+	}
+	if (c === i) {
+		return '';
+	}
+	const wrappedPrefix = `${i} AND (`;
+	if (c.startsWith(wrappedPrefix) && c.endsWith(')')) {
+		return c.slice(wrappedPrefix.length, -1);
+	}
+	const plainPrefix = `${i} AND `;
+	if (c.startsWith(plainPrefix)) {
+		return c.slice(plainPrefix.length);
+	}
+	return c;
+}

frontend/src/components/QueryBuilderV2/index.ts

@@ -0,0 +1,14 @@
+export type {
+	QuerySearchProps,
+	QuerySearchV2ContextValue,
+	QuerySearchV2ProviderProps,
+} from './QueryV2/QuerySearch/Provider';
+export {
+	QuerySearchV2Provider,
+	useQuerySearchV2Context,
+} from './QueryV2/QuerySearch/Provider';
+export { QueryBuilderV2 } from './QueryBuilderV2';
+export {
+	QueryBuilderV2Provider,
+	useQueryBuilderV2Context,
+} from './QueryBuilderV2Context';

frontend/src/components/Styled/styles.ts

@@ -1,41 +0,0 @@
-import { css, FlattenSimpleInterpolation } from 'styled-components';
-
-const cssProperty = (key: any, value: any): FlattenSimpleInterpolation =>
-	key &&
-	value &&
-	css`
-		${key}: ${value};
-	`;
-
-interface IFlexProps {
-	flexDirection?: string; // Need to replace this with exact css props. Not able to find any :(
-	flex?: number | string;
-}
-export const Flex = ({
-	flexDirection,
-	flex,
-}: IFlexProps): FlattenSimpleInterpolation => css`
-	${cssProperty('flex-direction', flexDirection)}
-	${cssProperty('flex', flex)}
-`;
-
-interface IDisplayProps {
-	display?: string;
-}
-export const Display = ({
-	display,
-}: IDisplayProps): FlattenSimpleInterpolation => css`
-	${cssProperty('display', display)}
-`;
-
-interface ISpacingProps {
-	margin?: string;
-	padding?: string;
-}
-export const Spacing = ({
-	margin,
-	padding,
-}: ISpacingProps): FlattenSimpleInterpolation => css`
-	${cssProperty('margin', margin)}
-	${cssProperty('padding', padding)}
-`;

frontend/src/components/TabLabel/TabLabel.interfaces.ts

@@ -1,5 +0,0 @@
-export type TabLabelProps = {
-	isDisabled: boolean;
-	label: string;
-	tooltipText?: string;
-};

frontend/src/components/TabLabel/index.tsx

@@ -1,29 +0,0 @@
-import { memo } from 'react';
-import { Tooltip } from 'antd';
-
-import { TabLabelProps } from './TabLabel.interfaces';
-
-function TabLabel({
-	label,
-	isDisabled,
-	tooltipText,
-}: TabLabelProps): JSX.Element {
-	const currentLabel = <span data-testid={`${label}`}>{label}</span>;
-
-	if (isDisabled) {
-		return (
-			<Tooltip
-				trigger="hover"
-				autoAdjustOverflow
-				placement="top"
-				title={tooltipText}
-			>
-				{currentLabel}
-			</Tooltip>
-		);
-	}
-
-	return currentLabel;
-}
-
-export default memo(TabLabel);

frontend/src/components/TabsAndFilters/Tabs/Tabs.styles.scss

@@ -1,5 +0,0 @@
-.tab-title {
-	display: flex;
-	gap: 4px;
-	align-items: center;
-}

frontend/src/components/TabsAndFilters/Tabs/Tabs.tsx

@@ -1,41 +0,0 @@
-import { useState } from 'react';
-import { Radio } from 'antd';
-import type { RadioChangeEvent } from 'antd/lib';
-import { History, Table } from 'lucide-react';
-
-import { ALERT_TABS } from '../constants';
-
-import './Tabs.styles.scss';
-
-export function Tabs(): JSX.Element {
-	const [selectedTab, setSelectedTab] = useState('overview');
-
-	const handleTabChange = (e: RadioChangeEvent): void => {
-		setSelectedTab(e.target.value);
-	};
-
-	return (
-		<Radio.Group className="tabs" onChange={handleTabChange} value={selectedTab}>
-			<Radio.Button
-				className={
-					selectedTab === ALERT_TABS.OVERVIEW ? 'selected_view tab' : 'tab'
-				}
-				value={ALERT_TABS.OVERVIEW}
-			>
-				<div className="tab-title">
-					<Table size={14} />
-					Overview
-				</div>
-			</Radio.Button>
-			<Radio.Button
-				className={selectedTab === ALERT_TABS.HISTORY ? 'selected_view tab' : 'tab'}
-				value={ALERT_TABS.HISTORY}
-			>
-				<div className="tab-title">
-					<History size={14} />
-					History
-				</div>
-			</Radio.Button>
-		</Radio.Group>
-	);
-}

frontend/src/components/TabsAndFilters/TabsAndFilters.styles.scss

@@ -1,18 +0,0 @@
-@mixin flex-center {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.tabs-and-filters {
-	@include flex-center;
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	.filters {
-		@include flex-center;
-		gap: 16px;
-		.reset-button {
-			@include flex-center;
-		}
-	}
-}

frontend/src/components/TabsAndFilters/TabsAndFilters.tsx

@@ -1,16 +0,0 @@
-import { Filters } from 'components/AlertDetailsFilters/Filters';
-
-import { Tabs } from './Tabs/Tabs';
-
-import './TabsAndFilters.styles.scss';
-
-function TabsAndFilters(): JSX.Element {
-	return (
-		<div className="tabs-and-filters">
-			<Tabs />
-			<Filters />
-		</div>
-	);
-}
-
-export default TabsAndFilters;

frontend/src/components/TabsAndFilters/constants.ts

@@ -1,5 +0,0 @@
-export const ALERT_TABS = {
-	OVERVIEW: 'OVERVIEW',
-	HISTORY: 'HISTORY',
-	ACTIVITY: 'ACTIVITY',
-} as const;

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -47,10 +47,16 @@ function TanStackCustomTableRow<TData>({
 	const isActive = context?.isRowActive?.(rowData) ?? false;
 	const extraClass = context?.getRowClassName?.(rowData) ?? '';
 	const rowStyle = context?.getRowStyle?.(rowData);
+	const enableAlternatingRowColors =
+		context?.enableAlternatingRowColors ?? false;
 
 	const rowClassName = cx(
 		tableStyles.tableRow,
 		isActive && tableStyles.tableRowActive,
+		enableAlternatingRowColors &&
+			(item.row.index % 2 === 0
+				? tableStyles.tableRowEven
+				: tableStyles.tableRowOdd),
 		extraClass,
 	);
 
@@ -105,6 +111,12 @@ function areTableRowPropsEqual<TData>(
 	if (prev.context?.columnVisibilityKey !== next.context?.columnVisibilityKey) {
 		return false;
 	}
+	if (
+		prev.context?.enableAlternatingRowColors !==
+		next.context?.enableAlternatingRowColors
+	) {
+		return false;
+	}
 
 	if (prev.context !== next.context) {
 		const prevActive = prev.context?.isRowActive?.(prevData) ?? false;

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

@@ -2,7 +2,10 @@
 	position: sticky;
 	top: 0;
 	z-index: 2;
-	padding: 0.3rem;
+	padding: var(--tanstack-cell-padding-top, 0.3rem)
+		var(--tanstack-cell-padding-right, 0.3rem)
+		var(--tanstack-cell-padding-bottom, 0.3rem)
+		var(--tanstack-cell-padding-left, 0.3rem);
 	transform: translate3d(
 		var(--tanstack-header-translate-x, 0px),
 		var(--tanstack-header-translate-y, 0px),
@@ -19,7 +22,17 @@
 	}
 
 	border: none !important;
-	background-color: var(--l2-background) !important;
+	background-color: var(
+		--tanstack-table-header-cell-bg,
+		var(--l2-background)
+	) !important;
+
+	&:first-child {
+		background-color: var(
+			--tanstack-first-column-header-bg,
+			var(--tanstack-table-header-cell-bg, var(--l2-background))
+		) !important;
+	}
 }
 
 .tanstackHeaderContent {
@@ -61,7 +74,7 @@
 	width: 12px;
 	height: 12px;
 	cursor: grab;
-	color: var(--l2-foreground);
+	color: var(--tanstack-table-header-cell-color, var(--l2-foreground));
 	opacity: 1;
 	touch-action: none;
 }
@@ -74,7 +87,7 @@
 	height: 20px;
 	cursor: pointer;
 	flex-shrink: 0;
-	color: var(--l2-foreground);
+	color: var(--tanstack-table-header-cell-color, var(--l2-foreground));
 
 	margin-left: auto;
 }
@@ -82,8 +95,9 @@
 .tanstackColumnActionsContent {
 	width: 140px;
 	padding: 0;
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
+	background: var(--tanstack-table-header-cell-bg, var(--l2-background));
+	border: 1px solid
+		var(--tanstack-table-header-cell-actions-border-color, var(--l2-border));
 	border-radius: 4px;
 	box-shadow: none;
 }
@@ -137,7 +151,7 @@
 }
 
 .tanstackHeaderCell.isResizing .cursorColResize {
-	background: var(--bg-robin-300);
+	background: var(--tanstack-table-resize-active-bg, var(--bg-robin-300));
 }
 
 .tanstackResizeHandleLine {
@@ -147,7 +161,7 @@
 	left: 50%;
 	width: 4px;
 	transform: translateX(-50%);
-	background: var(--l2-background);
+	background: var(--tanstack-table-resize-handle-bg, var(--l2-background));
 	opacity: 1;
 	pointer-events: none;
 	transition:
@@ -155,13 +169,34 @@
 		width 120ms ease;
 }
 
+.tanstackHeaderCell:first-child .tanstackResizeHandleLine {
+	background: var(
+		--tanstack-first-column-header-bg,
+		var(--tanstack-table-resize-handle-bg, var(--l2-background))
+	);
+}
+
 .cursorColResize:hover .tanstackResizeHandleLine {
-	background: var(--l2-border);
+	background: var(--tanstack-table-resize-handle-hover-bg, var(--l2-border));
+}
+
+.tanstackHeaderCell:first-child
+	.cursorColResize:hover
+	.tanstackResizeHandleLine {
+	background: color-mix(
+		in srgb,
+		var(
+				--tanstack-first-column-header-bg,
+				var(--tanstack-table-resize-handle-bg, var(--l2-background))
+			)
+			60%,
+		black
+	);
 }
 
 .tanstackHeaderCell.isResizing .tanstackResizeHandleLine {
 	width: 2px;
-	background: var(--bg-robin-500);
+	background: var(--tanstack-table-resize-handle-active-bg, var(--bg-robin-500));
 	transition: none;
 }
 
@@ -213,7 +248,12 @@
 	flex-shrink: 0;
 	width: 14px;
 	height: 14px;
-	color: var(--l2-foreground);
+	color: var(--l3-foreground);
+
+	&[data-sort-direction='asc'],
+	&[data-sort-direction='desc'] {
+		color: var(--primary);
+	}
 }
 
 .isSortable {

frontend/src/components/TanStackTableView/TanStackHeaderRow.tsx

@@ -9,7 +9,7 @@ import { useSortable } from '@dnd-kit/sortable';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui';
 import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
 import cx from 'classnames';
-import { ChevronDown, ChevronUp, GripVertical } from 'lucide-react';
+import { ArrowDown, ArrowUp, ArrowUpDown, GripVertical } from 'lucide-react';
 
 import { SortState, TableColumnDef } from './types';
 
@@ -177,12 +177,17 @@ function TanStackHeaderRow<TData>({
 									? column.header()
 									: String(column.header || '').replace(/^\w/, (c) => c.toUpperCase())}
 						</span>
-						<span className={headerStyles.tanstackSortIndicator}>
+						<span
+							className={headerStyles.tanstackSortIndicator}
+							data-sort-direction={currentSortDirection || 'none'}
+						>
 							{currentSortDirection === 'asc' ? (
-								<ChevronUp size={SORT_ICON_SIZE} />
+								<ArrowUp size={SORT_ICON_SIZE} />
 							) : currentSortDirection === 'desc' ? (
-								<ChevronDown size={SORT_ICON_SIZE} />
-							) : null}
+								<ArrowDown size={SORT_ICON_SIZE} />
+							) : (
+								<ArrowUpDown size={SORT_ICON_SIZE} />
+							)}
 						</span>
 					</button>
 				) : (

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

@@ -1,4 +1,22 @@
 .tanStackTable {
+	--tanstack-cell-padding: var(--tanstack-cell-padding-override, 0.3rem);
+	--tanstack-cell-padding-left: var(
+		--tanstack-cell-padding-left-override,
+		var(--tanstack-cell-padding)
+	);
+	--tanstack-cell-padding-right: var(
+		--tanstack-cell-padding-right-override,
+		var(--tanstack-cell-padding)
+	);
+	--tanstack-cell-padding-top: var(
+		--tanstack-cell-padding-top-override,
+		var(--tanstack-cell-padding)
+	);
+	--tanstack-cell-padding-bottom: var(
+		--tanstack-cell-padding-bottom-override,
+		var(--tanstack-cell-padding)
+	);
+
 	width: 100%;
 	border-collapse: separate;
 	border-spacing: 0;
@@ -26,7 +44,7 @@
 	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
 	font-size: var(--tanstack-plain-cell-font-size, 14px);
 	line-height: var(--tanstack-plain-cell-line-height, 18px);
-	color: var(--l2-foreground);
+	color: var(--tanstack-table-cell-color, var(--l2-foreground));
 	max-width: 100%;
 	word-break: break-all;
 }
@@ -42,13 +60,35 @@
 }
 
 .tableCell {
-	padding: 0.3rem;
+	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
+		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
+	height: var(--tanstack-table-row-height, auto);
 	font-style: normal;
 	font-weight: 400;
 	letter-spacing: -0.07px;
 	font-size: var(--tanstack-plain-cell-font-size, 14px);
 	line-height: var(--tanstack-plain-cell-line-height, 18px);
-	color: var(--l2-foreground);
+	color: var(--tanstack-table-cell-color, var(--l2-foreground));
+	background-color: var(--tanstack-table-cell-bg, transparent);
+
+	&:first-child {
+		padding: var(
+				--tanstack-cell-padding-top-first-column,
+				var(--tanstack-cell-padding-top)
+			)
+			var(
+				--tanstack-cell-padding-right-first-column,
+				var(--tanstack-cell-padding-right)
+			)
+			var(
+				--tanstack-cell-padding-bottom-first-column,
+				var(--tanstack-cell-padding-bottom)
+			)
+			var(
+				--tanstack-cell-padding-left-first-column,
+				var(--tanstack-cell-padding-left)
+			);
+	}
 }
 
 .tableRow {
@@ -58,19 +98,69 @@
 
 	&:hover {
 		.tableCell {
-			background-color: var(--row-hover-bg) !important;
+			background-color: var(
+				--tanstack-table-row-hover-bg,
+				var(--row-hover-bg)
+			) !important;
 		}
 	}
 
 	&.tableRowActive {
 		.tableCell {
-			background-color: var(--row-active-bg) !important;
+			background-color: var(
+				--tanstack-table-row-active-bg,
+				var(--row-active-bg)
+			) !important;
 		}
 	}
+
+	&.tableRowOdd {
+		.tableCell {
+			background-color: var(--tanstack-table-row-odd-bg, transparent);
+		}
+	}
+
+	&.tableRowEven {
+		.tableCell {
+			background-color: var(--tanstack-table-row-even-bg, transparent);
+		}
+	}
+
+	.tableCell:first-child {
+		background-color: var(
+			--tanstack-first-column-bg,
+			var(--tanstack-table-cell-bg, transparent)
+		);
+		color: var(
+			--tanstack-first-column-color,
+			var(--tanstack-table-cell-color, var(--l2-foreground))
+		);
+	}
+
+	&.tableRowOdd .tableCell:first-child {
+		background-color: var(
+			--tanstack-first-column-odd-bg,
+			var(
+				--tanstack-first-column-bg,
+				var(--tanstack-table-row-odd-bg, transparent)
+			)
+		);
+	}
+
+	&.tableRowEven .tableCell:first-child {
+		background-color: var(
+			--tanstack-first-column-even-bg,
+			var(
+				--tanstack-first-column-bg,
+				var(--tanstack-table-row-even-bg, transparent)
+			)
+		);
+	}
 }
 
 .tableHeaderCell {
-	padding: 0.3rem;
+	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
+		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
 	height: 36px;
 	text-align: left;
 	font-size: 14px;
@@ -78,20 +168,40 @@
 	font-weight: 400;
 	line-height: 18px;
 	letter-spacing: -0.07px;
-	color: var(--l1-foreground);
-
-	// TODO: Remove this once background color (l1) is matching the actual background color of the page
-	&[data-dark-mode='true'] {
-		background: #0b0c0d;
-	}
-
-	&[data-dark-mode='false'] {
-		background: #fdfdfd;
-	}
+	color: var(--tanstack-table-header-cell-color, var(--l1-foreground));
+	background: var(--tanstack-table-header-cell-bg, var(--l1-background));
+	border-bottom: 1px solid var(--tanstack-table-header-border-color, transparent);
 }
 
 .tableRowExpansion {
 	display: table-row;
+
+	.tableCellExpansion {
+		background-color: var(--tanstack-table-header-cell-bg, var(--l1-background));
+		color: var(--tanstack-table-header-cell-color, var(--l1-foreground));
+	}
+
+	& > td {
+		padding: 0;
+	}
+
+	& thead th:first-child {
+		padding-left: var(
+			--tanstack-expansion-first-col-padding-left,
+			calc(var(--spacing-3) - 1px)
+		);
+	}
+
+	& tbody td:first-child {
+		padding-left: var(
+			--tanstack-expansion-first-col-padding-left,
+			calc(var(--spacing-20) + var(--spacing-4))
+		);
+	}
+
+	:global(thead) {
+		position: unset !important;
+	}
 }
 
 .tableCellExpansion {

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -90,6 +90,7 @@ function TanStackTableInner<TData>(
 		skeletonRowCount = 10,
 		enableQueryParams,
 		pagination,
+		paginationClassname,
 		onEndReached,
 		getRowKey,
 		getItemKey,
@@ -112,9 +113,17 @@ function TanStackTableInner<TData>(
 		testId,
 		prefixPaginationContent,
 		suffixPaginationContent,
+		enableAlternatingRowColors,
+		disableVirtualScroll,
 	}: TanStackTableProps<TData>,
 	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
 ): JSX.Element {
+	if (disableVirtualScroll && onEndReached) {
+		throw new Error(
+			'TanStackTable: Cannot use onEndReached with disableVirtualScroll. Infinite scroll requires virtualization.',
+		);
+	}
+
 	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
 	const isDarkMode = useIsDarkMode();
 
@@ -221,6 +230,15 @@ function TanStackTableInner<TData>(
 		[getRowCanExpand],
 	);
 
+	const isExpandEnabled = Boolean(renderExpandedRow);
+	useEffect(() => {
+		const hasExpanded =
+			typeof expanded === 'boolean' ? expanded : Object.keys(expanded).length > 0;
+		if (!isExpandEnabled && hasExpanded) {
+			setExpanded({});
+		}
+	}, [isExpandEnabled, expanded, setExpanded]);
+
 	const table = useReactTable({
 		data: effectiveData,
 		columns: tanstackColumns,
@@ -229,7 +247,7 @@ function TanStackTableInner<TData>(
 		columnResizeMode: 'onChange',
 		getCoreRowModel: getCoreRowModel(),
 		getRowId,
-		enableExpanding: Boolean(renderExpandedRow),
+		enableExpanding: isExpandEnabled,
 		getRowCanExpand: renderExpandedRow ? tableGetRowCanExpand : undefined,
 		onColumnSizingChange: handleColumnSizingChange,
 		onColumnVisibilityChange: noopColumnVisibility,
@@ -333,6 +351,7 @@ function TanStackTableInner<TData>(
 			hasSingleColumn,
 			columnOrderKey,
 			columnVisibilityKey,
+			enableAlternatingRowColors,
 		}),
 		[
 			getRowStyle,
@@ -350,6 +369,7 @@ function TanStackTableInner<TData>(
 			hasSingleColumn,
 			columnOrderKey,
 			columnVisibilityKey,
+			enableAlternatingRowColors,
 		],
 	);
 
@@ -500,7 +520,10 @@ function TanStackTableInner<TData>(
 	);
 
 	return (
-		<div className={cx(viewStyles.tanstackTableViewWrapper, className)}>
+		<div
+			className={cx(viewStyles.tanstackTableViewWrapper, className)}
+			data-has-group-by={(groupBy?.length || 0) > 0}
+		>
 			<TanStackTableStateProvider>
 				<TableLoadingSync
 					isLoading={isLoading}
@@ -508,23 +531,53 @@ function TanStackTableInner<TData>(
 				/>
 				<ColumnVisibilitySync visibility={effectiveVisibility} />
 				<TooltipProvider>
-					<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
-						className={virtuosoClassName}
-						ref={virtuosoRef}
-						{...restTableScrollerProps}
-						data={flatItems}
-						totalCount={flatItems.length}
-						context={virtuosoContext}
-						increaseViewportBy={INCREASE_VIEWPORT_BY}
-						initialTopMostItemIndex={
-							flatIndexForActiveRow >= 0 ? flatIndexForActiveRow : 0
-						}
-						fixedHeaderContent={tableHeader}
-						style={virtuosoTableStyle}
-						components={virtuosoComponents}
-						endReached={onEndReached ? handleEndReached : undefined}
-						data-testid={testId}
-					/>
+					{disableVirtualScroll ? (
+						<div
+							className={virtuosoClassName}
+							{...restTableScrollerProps}
+							data-testid={testId}
+						>
+							<table className={tableStyles.tanStackTable} style={virtuosoTableStyle}>
+								<VirtuosoTableColGroup columns={effectiveColumns} table={table} />
+								<thead>{tableHeader()}</thead>
+								<tbody>
+									{(isLoading && data.length === 0
+										? flatItems.slice(0, skeletonRowCount)
+										: flatItems
+									).map((item, index) => (
+										<TanStackCustomTableRow
+											key={
+												item.kind === 'expansion' ? `${item.row.id}-expansion` : item.row.id
+											}
+											item={item}
+											context={virtuosoContext}
+											data-index={index}
+											data-item-index={index}
+											data-known-size={0}
+										/>
+									))}
+								</tbody>
+							</table>
+						</div>
+					) : (
+						<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
+							className={virtuosoClassName}
+							ref={virtuosoRef}
+							{...restTableScrollerProps}
+							data={flatItems}
+							totalCount={flatItems.length}
+							context={virtuosoContext}
+							increaseViewportBy={INCREASE_VIEWPORT_BY}
+							initialTopMostItemIndex={
+								flatIndexForActiveRow >= 0 ? flatIndexForActiveRow : 0
+							}
+							fixedHeaderContent={tableHeader}
+							style={virtuosoTableStyle}
+							components={virtuosoComponents}
+							endReached={onEndReached ? handleEndReached : undefined}
+							data-testid={testId}
+						/>
+					)}
 					{showInfiniteScrollLoader && (
 						<div
 							className={viewStyles.tanstackLoadingOverlay}
@@ -534,7 +587,7 @@ function TanStackTableInner<TData>(
 						</div>
 					)}
 					{showPagination && pagination && (
-						<div className={viewStyles.paginationContainer}>
+						<div className={cx(viewStyles.paginationContainer, paginationClassname)}>
 							{prefixPaginationContent}
 							<Pagination
 								current={page}

frontend/src/components/TanStackTableView/TanStackTableSkeleton.tsx

@@ -1,73 +0,0 @@
-import { useMemo } from 'react';
-import type { ColumnSizingState } from '@tanstack/react-table';
-import { Skeleton } from 'antd';
-
-import { TableColumnDef } from './types';
-import { getColumnWidthStyle } from './utils';
-
-import tableStyles from './TanStackTable.module.scss';
-import styles from './TanStackTableSkeleton.module.scss';
-
-type TanStackTableSkeletonProps<TData> = {
-	columns: TableColumnDef<TData>[];
-	rowCount: number;
-	isDarkMode: boolean;
-	columnSizing?: ColumnSizingState;
-};
-
-export function TanStackTableSkeleton<TData>({
-	columns,
-	rowCount,
-	isDarkMode,
-	columnSizing,
-}: TanStackTableSkeletonProps<TData>): JSX.Element {
-	const rows = useMemo(
-		() => Array.from({ length: rowCount }, (_, i) => i),
-		[rowCount],
-	);
-
-	return (
-		<table className={tableStyles.tanStackTable}>
-			<colgroup>
-				{columns.map((column, index) => (
-					<col
-						key={column.id}
-						style={getColumnWidthStyle(
-							column,
-							columnSizing?.[column.id],
-							index === columns.length - 1,
-						)}
-					/>
-				))}
-			</colgroup>
-			<thead>
-				<tr>
-					{columns.map((column) => (
-						<th
-							key={column.id}
-							className={tableStyles.tableHeaderCell}
-							data-dark-mode={isDarkMode}
-						>
-							{typeof column.header === 'function' ? (
-								<Skeleton.Input active size="small" className={styles.headerSkeleton} />
-							) : (
-								column.header
-							)}
-						</th>
-					))}
-				</tr>
-			</thead>
-			<tbody>
-				{rows.map((rowIndex) => (
-					<tr key={rowIndex} className={tableStyles.tableRow}>
-						{columns.map((column) => (
-							<td key={column.id} className={tableStyles.tableCell}>
-								<Skeleton.Input active size="small" className={styles.cellSkeleton} />
-							</td>
-						))}
-					</tr>
-				))}
-			</tbody>
-		</table>
-	);
-}

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

@@ -49,7 +49,8 @@
 	width: 100%;
 	overflow-x: auto;
 	scrollbar-width: thin;
-	scrollbar-color: var(--bg-slate-300) transparent;
+	scrollbar-color: var(--tanstack-table-scrollbar-color, var(--bg-slate-300))
+		transparent;
 
 	&::-webkit-scrollbar {
 		width: 4px;
@@ -65,12 +66,12 @@
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--bg-slate-300);
+		background: var(--tanstack-table-scrollbar-color, var(--bg-slate-300));
 		border-radius: 9999px;
 	}
 
 	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-slate-200);
+		background: var(--tanstack-table-scrollbar-hover-color, var(--bg-slate-200));
 	}
 
 	&.cellTypographySmall {
@@ -135,18 +136,25 @@
 	z-index: 3;
 	border-radius: 8px;
 	padding: 8px 16px;
-	background: var(--l1-background);
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	background: var(--tanstack-table-loading-overlay-bg, var(--l1-background));
+	box-shadow: var(
+		--tanstack-table-loading-overlay-shadow,
+		0 2px 8px rgba(0, 0, 0, 0.15)
+	);
 }
 
 :global(.lightMode) .tanstackTableVirtuosoScroll {
-	scrollbar-color: var(--bg-vanilla-300) transparent;
+	scrollbar-color: var(--tanstack-table-scrollbar-color, var(--bg-vanilla-300))
+		transparent;
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--bg-vanilla-300);
+		background: var(--tanstack-table-scrollbar-color, var(--bg-vanilla-300));
 	}
 
 	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-vanilla-100);
+		background: var(
+			--tanstack-table-scrollbar-hover-color,
+			var(--bg-vanilla-100)
+		);
 	}
 }

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

@@ -389,6 +389,101 @@ describe('TanStackTableView Integration', () => {
 			// by checking the table renders without errors
 			expect(screen.getByRole('table')).toBeInTheDocument();
 		});
+
+		it('renders without errors when expanded state exists but expansion is disabled', async () => {
+			// This tests that the table handles the case where URL has expanded state
+			// but renderExpandedRow is undefined (expansion disabled).
+			// The table's useEffect should reset expanded state automatically.
+			renderTanStackTable({
+				props: {
+					enableQueryParams: true,
+					// renderExpandedRow is undefined - expansion disabled
+				},
+				queryParams: { expanded: '["1"]' },
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			// Table should render without any expanded rows
+			expect(screen.queryByTestId('expanded-content')).not.toBeInTheDocument();
+		});
+
+		it('renders expanded rows with unique keys in non-virtualized mode', async () => {
+			// This tests that row and expansion items have unique keys to avoid
+			// React's "duplicate key" warning when disableVirtualScroll is true
+			renderTanStackTable({
+				props: {
+					disableVirtualScroll: true,
+					enableQueryParams: true,
+					renderExpandedRow: (row) => (
+						<div data-testid={`expanded-${row.id}`}>Expanded: {row.name}</div>
+					),
+					getRowCanExpand: () => true,
+					getRowKey: (row) => row.id,
+				},
+				queryParams: { expanded: '["1"]' },
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			// Both the row and its expansion content should be rendered
+			expect(screen.getByTestId('expanded-1')).toBeInTheDocument();
+			expect(screen.getByText('Expanded: Item 1')).toBeInTheDocument();
+
+			// Verify all 3 data rows plus 1 expansion row = 4 tr elements in tbody
+			const tbody = screen.getByRole('table').querySelector('tbody');
+			expect(tbody?.querySelectorAll('tr')).toHaveLength(4);
+		});
+	});
+
+	describe('disableVirtualScroll', () => {
+		it('throws error when used with onEndReached', () => {
+			expect(() => {
+				renderTanStackTable({
+					props: {
+						disableVirtualScroll: true,
+						onEndReached: jest.fn(),
+					},
+				});
+			}).toThrow(
+				'TanStackTable: Cannot use onEndReached with disableVirtualScroll. Infinite scroll requires virtualization.',
+			);
+		});
+
+		it('renders all rows without virtualization', async () => {
+			renderTanStackTable({
+				props: {
+					disableVirtualScroll: true,
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+				expect(screen.getByText('Item 2')).toBeInTheDocument();
+				expect(screen.getByText('Item 3')).toBeInTheDocument();
+			});
+
+			// Verify table structure exists
+			expect(screen.getByRole('table')).toBeInTheDocument();
+		});
+
+		it('renders column headers without virtualization', async () => {
+			renderTanStackTable({
+				props: {
+					disableVirtualScroll: true,
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('ID')).toBeInTheDocument();
+				expect(screen.getByText('Name')).toBeInTheDocument();
+				expect(screen.getByText('Value')).toBeInTheDocument();
+			});
+		});
 	});
 
 	describe('infinite scroll', () => {

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

@@ -138,7 +138,10 @@ describe('useTableParams (URL mode — enableQueryParams set)', () => {
 
 	it('reads initial page from URL params', () => {
 		const wrapper = createNuqsWrapper({ page: '3' });
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
+		// Pass matching default to prevent reset on mount (page resets when orderBy changes)
+		const { result } = renderHook(() => useTableParams(true, { page: 3 }), {
+			wrapper,
+		});
 		expect(result.current.page).toBe(3);
 	});
 
@@ -249,3 +252,294 @@ describe('useTableParams (URL mode — enableQueryParams set)', () => {
 		expect(result.current.orderBy).toBeNull();
 	});
 });
+
+describe('useTableParams (selective URL mode — partial config object)', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('syncs only page to URL when only page is configured', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+		const { result } = renderHook(() => useTableParams({ page: 'myPage' }), {
+			wrapper,
+		});
+
+		// Update page - should sync to URL
+		act(() => {
+			result.current.setPage(5);
+			jest.runAllTimers();
+		});
+		expect(result.current.page).toBe(5);
+		const lastPage = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('myPage'))
+			.filter(Boolean)
+			.pop();
+		expect(lastPage).toBe('5');
+
+		// Update limit - should stay local (not in URL)
+		act(() => {
+			result.current.setLimit(100);
+			jest.runAllTimers();
+		});
+		expect(result.current.limit).toBe(100);
+		const limitInUrl = onUrlUpdate.mock.calls.some(
+			(call) => call[0].searchParams.get('limit') !== null,
+		);
+		expect(limitInUrl).toBe(false);
+
+		// Update orderBy - should stay local (not in URL)
+		act(() => {
+			result.current.setOrderBy({ columnName: 'test', order: 'asc' });
+			jest.runAllTimers();
+		});
+		expect(result.current.orderBy).toStrictEqual({
+			columnName: 'test',
+			order: 'asc',
+		});
+		const orderByInUrl = onUrlUpdate.mock.calls.some(
+			(call) => call[0].searchParams.get('order_by') !== null,
+		);
+		expect(orderByInUrl).toBe(false);
+	});
+
+	it('syncs only orderBy to URL when only orderBy is configured', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+		const { result } = renderHook(() => useTableParams({ orderBy: 'mySort' }), {
+			wrapper,
+		});
+
+		// Update orderBy - should sync to URL
+		act(() => {
+			result.current.setOrderBy({ columnName: 'cpu', order: 'desc' });
+			jest.runAllTimers();
+		});
+		expect(result.current.orderBy).toStrictEqual({
+			columnName: 'cpu',
+			order: 'desc',
+		});
+		const lastOrderBy = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('mySort'))
+			.filter(Boolean)
+			.pop();
+		expect(lastOrderBy).toBeDefined();
+		expect(JSON.parse(lastOrderBy!)).toStrictEqual({
+			columnName: 'cpu',
+			order: 'desc',
+		});
+
+		// Update page - should stay local
+		act(() => {
+			result.current.setPage(3);
+			jest.runAllTimers();
+		});
+		expect(result.current.page).toBe(3);
+		const pageInUrl = onUrlUpdate.mock.calls.some(
+			(call) => call[0].searchParams.get('page') !== null,
+		);
+		expect(pageInUrl).toBe(false);
+	});
+
+	it('syncs only limit to URL when only limit is configured', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+		const { result } = renderHook(() => useTableParams({ limit: 'myLimit' }), {
+			wrapper,
+		});
+
+		// Update limit - should sync to URL
+		act(() => {
+			result.current.setLimit(25);
+			jest.runAllTimers();
+		});
+		expect(result.current.limit).toBe(25);
+		const lastLimit = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('myLimit'))
+			.filter(Boolean)
+			.pop();
+		expect(lastLimit).toBe('25');
+
+		// Update page - should stay local
+		act(() => {
+			result.current.setPage(2);
+			jest.runAllTimers();
+		});
+		expect(result.current.page).toBe(2);
+		const pageInUrl = onUrlUpdate.mock.calls.some(
+			(call) => call[0].searchParams.get('page') !== null,
+		);
+		expect(pageInUrl).toBe(false);
+	});
+
+	it('syncs only expanded to URL when only expanded is configured', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+		const { result } = renderHook(
+			() => useTableParams({ expanded: 'myExpanded' }),
+			{ wrapper },
+		);
+
+		// Update expanded - should sync to URL
+		act(() => {
+			result.current.setExpanded({ 'row-1': true, 'row-2': true });
+			jest.runAllTimers();
+		});
+		expect(result.current.expanded).toStrictEqual({
+			'row-1': true,
+			'row-2': true,
+		});
+		const lastExpanded = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('myExpanded'))
+			.filter(Boolean)
+			.pop();
+		expect(lastExpanded).toBeDefined();
+		expect(JSON.parse(lastExpanded!)).toEqual(
+			expect.arrayContaining(['row-1', 'row-2']),
+		);
+
+		// Update page - should stay local
+		act(() => {
+			result.current.setPage(4);
+			jest.runAllTimers();
+		});
+		expect(result.current.page).toBe(4);
+		const pageInUrl = onUrlUpdate.mock.calls.some(
+			(call) => call[0].searchParams.get('page') !== null,
+		);
+		expect(pageInUrl).toBe(false);
+	});
+
+	it('syncs page and orderBy to URL but keeps limit and expanded local', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+		const { result } = renderHook(
+			() => useTableParams({ page: 'p', orderBy: 'sort' }),
+			{ wrapper },
+		);
+
+		// Update limit and expanded first (should stay local)
+		act(() => {
+			result.current.setLimit(75);
+			result.current.setExpanded({ 'row-5': true });
+			jest.runAllTimers();
+		});
+
+		expect(result.current.limit).toBe(75);
+		expect(result.current.expanded).toStrictEqual({ 'row-5': true });
+
+		// Update page (should sync to URL)
+		act(() => {
+			result.current.setPage(2);
+			jest.runAllTimers();
+		});
+
+		expect(result.current.page).toBe(2);
+		const lastPage = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('p'))
+			.filter(Boolean)
+			.pop();
+		expect(lastPage).toBe('2');
+
+		// Update orderBy (should sync to URL, and resets page to default)
+		act(() => {
+			result.current.setOrderBy({ columnName: 'name', order: 'asc' });
+			jest.runAllTimers();
+		});
+
+		expect(result.current.orderBy).toStrictEqual({
+			columnName: 'name',
+			order: 'asc',
+		});
+		const lastOrderBy = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('sort'))
+			.filter(Boolean)
+			.pop();
+		expect(lastOrderBy).toBeDefined();
+
+		// limit should NOT be in URL
+		const limitInUrl = onUrlUpdate.mock.calls.some(
+			(call) =>
+				call[0].searchParams.get('limit') !== null ||
+				call[0].searchParams.get('myLimit') !== null,
+		);
+		expect(limitInUrl).toBe(false);
+
+		// expanded should NOT be in URL
+		const expandedInUrl = onUrlUpdate.mock.calls.some(
+			(call) =>
+				call[0].searchParams.get('expanded') !== null ||
+				call[0].searchParams.get('myExpanded') !== null,
+		);
+		expect(expandedInUrl).toBe(false);
+	});
+
+	it('reads initial values from URL for configured params only', () => {
+		const wrapper = createNuqsWrapper({
+			customPage: '7',
+			limit: '999', // This should be ignored since limit is not configured
+		});
+		const { result } = renderHook(
+			// Pass page default matching URL to prevent reset on mount
+			() => useTableParams({ page: 'customPage' }, { page: 7 }),
+			{ wrapper },
+		);
+
+		// Page should come from URL
+		expect(result.current.page).toBe(7);
+		// Limit should be default (not from URL since it's not configured)
+		expect(result.current.limit).toBe(50);
+	});
+
+	it('supports updater function for expanded state', () => {
+		const wrapper = createNuqsWrapper();
+		const { result } = renderHook(() => useTableParams({ expanded: 'exp' }), {
+			wrapper,
+		});
+
+		// Set initial expanded state
+		act(() => {
+			result.current.setExpanded({ 'row-1': true });
+		});
+		expect(result.current.expanded).toStrictEqual({ 'row-1': true });
+
+		// Use updater function to add another row
+		act(() => {
+			result.current.setExpanded((prev) => ({
+				...(typeof prev === 'boolean' ? {} : prev),
+				'row-2': true,
+			}));
+		});
+		expect(result.current.expanded).toStrictEqual({
+			'row-1': true,
+			'row-2': true,
+		});
+	});
+
+	it('supports updater function for local expanded state', () => {
+		const wrapper = createNuqsWrapper();
+		const { result } = renderHook(() => useTableParams(), { wrapper });
+
+		// Set initial expanded state
+		act(() => {
+			result.current.setExpanded({ 'row-a': true });
+		});
+		expect(result.current.expanded).toStrictEqual({ 'row-a': true });
+
+		// Use updater function
+		act(() => {
+			result.current.setExpanded((prev) => ({
+				...(typeof prev === 'boolean' ? {} : prev),
+				'row-b': true,
+			}));
+		});
+		expect(result.current.expanded).toStrictEqual({
+			'row-a': true,
+			'row-b': true,
+		});
+	});
+});

frontend/src/components/TanStackTableView/index.tsx

@@ -171,6 +171,27 @@ export * from './useTableParams';
  *   tableScrollerProps={{ className: 'my-table-scroll', 'data-testid': 'logs-scroller' }}
  * />
  * ```
+ *
+ * @example Disable virtual scroll — useful for nested tables inside expanded rows.
+ * Virtual scroll requires a fixed height container, which is problematic for nested tables
+ * that need dynamic height. Use `disableVirtualScroll` when rendering tables inside
+ * `renderExpandedRow` to allow the nested table to grow based on content.
+ * Note: Cannot be combined with `onEndReached` (infinite scroll requires virtualization).
+ * ```tsx
+ * // Parent table with expandable rows
+ * <TanStackTable
+ *   data={parentData}
+ *   columns={parentColumns}
+ *   renderExpandedRow={(row) => (
+ *     // Nested table without virtualization — height adapts to content
+ *     <TanStackTable
+ *       data={row.children}
+ *       columns={childColumns}
+ *       disableVirtualScroll
+ *     />
+ *   )}
+ * />
+ * ```
  */
 const TanStackTable = Object.assign(TanStackTableBase, {
 	Text: TanStackTableText,

frontend/src/components/TanStackTableView/types.ts

@@ -107,6 +107,8 @@ export type TableRowContext<TData> = {
 	columnOrderKey: string;
 	/** Column visibility key for memo invalidation on visibility change */
 	columnVisibilityKey: string;
+	/** Enable alternating row background colors (zebra striping) */
+	enableAlternatingRowColors?: boolean;
 };
 
 export type PaginationProps = {
@@ -116,10 +118,10 @@ export type PaginationProps = {
 };
 
 export type TanstackTableQueryParamsConfig = {
-	page: string;
-	limit: string;
-	orderBy: string;
-	expanded: string;
+	page?: string;
+	limit?: string;
+	orderBy?: string;
+	expanded?: string;
 };
 
 export type TanStackTableProps<TData> = {
@@ -137,6 +139,7 @@ export type TanStackTableProps<TData> = {
 	skeletonRowCount?: number;
 	enableQueryParams?: boolean | string | TanstackTableQueryParamsConfig;
 	pagination?: PaginationProps;
+	paginationClassname?: string;
 	onEndReached?: (index: number) => void;
 	/** Function to get the unique key for a row (before duplicate handling).
 	 * When set, enables automatic duplicate key detection and group-aware key composition. */
@@ -176,6 +179,10 @@ export type TanStackTableProps<TData> = {
 	prefixPaginationContent?: ReactNode;
 	/** Content rendered after the pagination controls */
 	suffixPaginationContent?: ReactNode;
+	/** Enable alternating row background colors (zebra striping) */
+	enableAlternatingRowColors?: boolean;
+	/** Disable virtual scrolling and render all rows at once. Cannot be used with onEndReached. */
+	disableVirtualScroll?: boolean;
 };
 
 export type TanStackTableHandle = TableVirtuosoHandle & {

frontend/src/components/TanStackTableView/useTableParams.ts

@@ -8,6 +8,12 @@ import { SortState, TanstackTableQueryParamsConfig } from './types';
 const NUQS_OPTIONS = { history: 'push' as const };
 const DEFAULT_PAGE = 1;
 const DEFAULT_LIMIT = 50;
+const URL_KEYS_DEFAULT = {
+	page: 'page',
+	limit: 'limit',
+	orderBy: 'order_by',
+	expanded: 'expanded',
+} as const;
 
 type Defaults = {
 	page?: number;
@@ -49,30 +55,49 @@ export function useTableParams(
 	enableQueryParams?: boolean | string | TanstackTableQueryParamsConfig,
 	defaults?: Defaults,
 ): TableParamsResult {
+	// Determine which params should sync to URL vs use local state
+	const isObjectConfig = typeof enableQueryParams === 'object';
+	const useUrlForPage =
+		enableQueryParams === true ||
+		typeof enableQueryParams === 'string' ||
+		(isObjectConfig && enableQueryParams.page !== undefined);
+	const useUrlForLimit =
+		enableQueryParams === true ||
+		typeof enableQueryParams === 'string' ||
+		(isObjectConfig && enableQueryParams.limit !== undefined);
+	const useUrlForOrderBy =
+		enableQueryParams === true ||
+		typeof enableQueryParams === 'string' ||
+		(isObjectConfig && enableQueryParams.orderBy !== undefined);
+	const useUrlForExpanded =
+		enableQueryParams === true ||
+		typeof enableQueryParams === 'string' ||
+		(isObjectConfig && enableQueryParams.expanded !== undefined);
+
 	const pageQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_page`
-			: typeof enableQueryParams === 'object'
-				? enableQueryParams.page
-				: 'page';
+			? `${enableQueryParams}_${URL_KEYS_DEFAULT.page}`
+			: isObjectConfig
+				? (enableQueryParams.page ?? URL_KEYS_DEFAULT.page)
+				: URL_KEYS_DEFAULT.page;
 	const limitQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_limit`
-			: typeof enableQueryParams === 'object'
-				? enableQueryParams.limit
-				: 'limit';
+			? `${enableQueryParams}_${URL_KEYS_DEFAULT.limit}`
+			: isObjectConfig
+				? (enableQueryParams.limit ?? URL_KEYS_DEFAULT.limit)
+				: URL_KEYS_DEFAULT.limit;
 	const orderByQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_order_by`
-			: typeof enableQueryParams === 'object'
-				? enableQueryParams.orderBy
-				: 'order_by';
+			? `${enableQueryParams}_${URL_KEYS_DEFAULT.orderBy}`
+			: isObjectConfig
+				? (enableQueryParams.orderBy ?? URL_KEYS_DEFAULT.orderBy)
+				: URL_KEYS_DEFAULT.orderBy;
 	const expandedQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_expanded`
-			: typeof enableQueryParams === 'object'
-				? enableQueryParams.expanded
-				: 'expanded';
+			? `${enableQueryParams}_${URL_KEYS_DEFAULT.expanded}`
+			: isObjectConfig
+				? (enableQueryParams.expanded ?? URL_KEYS_DEFAULT.expanded)
+				: URL_KEYS_DEFAULT.expanded;
 	const pageDefault = defaults?.page ?? DEFAULT_PAGE;
 	const limitDefault = defaults?.limit ?? DEFAULT_LIMIT;
 	const orderByDefault = defaults?.orderBy ?? null;
@@ -149,45 +174,29 @@ export function useTableParams(
 
 	const orderByDefaultMemoKey = `${orderByDefault?.columnName}${orderByDefault?.order}`;
 	const orderByUrlMemoKey = `${urlOrderBy?.columnName}${urlOrderBy?.order}`;
-	const isEnabledQueryParams =
-		typeof enableQueryParams === 'string' ||
-		typeof enableQueryParams === 'object';
 
 	useEffect(() => {
-		if (isEnabledQueryParams) {
+		if (useUrlForPage) {
 			setUrlPage(pageDefault);
 		} else {
 			setLocalPage(pageDefault);
 		}
 	}, [
-		isEnabledQueryParams,
+		useUrlForPage,
 		orderByDefaultMemoKey,
 		orderByUrlMemoKey,
 		pageDefault,
 		setUrlPage,
 	]);
 
-	if (enableQueryParams) {
-		return {
-			page: urlPage,
-			limit: urlLimit,
-			orderBy: urlOrderBy as SortState | null,
-			expanded: urlExpanded,
-			setPage: setUrlPage,
-			setLimit: setUrlLimit,
-			setOrderBy: setUrlOrderBy,
-			setExpanded: setUrlExpanded,
-		};
-	}
-
 	return {
-		page: localPage,
-		limit: localLimit,
-		orderBy: localOrderBy,
-		expanded: localExpanded,
-		setPage: setLocalPage,
-		setLimit: setLocalLimit,
-		setOrderBy: setLocalOrderBy,
-		setExpanded: handleSetLocalExpanded,
+		page: useUrlForPage ? urlPage : localPage,
+		limit: useUrlForLimit ? urlLimit : localLimit,
+		orderBy: (useUrlForOrderBy ? urlOrderBy : localOrderBy) as SortState | null,
+		expanded: useUrlForExpanded ? urlExpanded : localExpanded,
+		setPage: useUrlForPage ? setUrlPage : setLocalPage,
+		setLimit: useUrlForLimit ? setUrlLimit : setLocalLimit,
+		setOrderBy: useUrlForOrderBy ? setUrlOrderBy : setLocalOrderBy,
+		setExpanded: useUrlForExpanded ? setUrlExpanded : handleSetLocalExpanded,
 	};
 }

frontend/src/components/TanStackTableView/utils.ts

@@ -35,7 +35,10 @@ export const getColumnWidthStyle = <TData>(
 ): CSSProperties => {
 	// Last column always fills remaining space
 	if (isLastColumn) {
-		return { width: '100%' };
+		return {
+			width: '100%',
+			minWidth: persistedWidth ?? column?.width?.min,
+		};
 	}
 
 	const { width } = column;
@@ -59,10 +62,19 @@ export const getColumnWidthStyle = <TData>(
 	};
 };
 
+const isSkeletonRow = (row: unknown): boolean => {
+	const r = row as Record<string, unknown>;
+	return typeof r?.id === 'string' && r.id.startsWith('skeleton-');
+};
+
 const buildAccessorFn = <TData>(
 	colDef: TableColumnDef<TData>,
 ): ((row: TData) => unknown) => {
 	return (row: TData): unknown => {
+		// Skip accessor for skeleton rows to avoid errors with missing properties
+		if (isSkeletonRow(row)) {
+			return undefined;
+		}
 		if (colDef.accessorFn) {
 			return colDef.accessorFn(row);
 		}

frontend/src/components/TimePreferenceDropDown/styles.ts

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-interface TextContainerProps {
-	noButtonMargin?: boolean;
-}
-
-export const TextContainer = styled.div<TextContainerProps>`
-	display: flex;
-
-	> button {
-		margin-left: ${({ noButtonMargin }): string =>
-			noButtonMargin ? '0' : '0.5rem'}
-`;

frontend/src/components/WelcomeLeftContainer/index.tsx

@@ -1,42 +0,0 @@
-import { ReactChild } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Card, Space, Typography } from 'antd';
-
-import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
-
-import { Container, LeftContainer, Logo } from './styles';
-
-const { Title } = Typography;
-
-function WelcomeLeftContainer({
-	version,
-	children,
-}: WelcomeLeftContainerProps): JSX.Element {
-	const { t } = useTranslation();
-
-	return (
-		<Container>
-			<LeftContainer direction="vertical">
-				<Space align="center">
-					<Logo src={signozBrandLogoUrl} alt="logo" />
-					<Title style={{ fontSize: '46px', margin: 0 }}>SigNoz</Title>
-				</Space>
-				<Typography>{t('monitor_signup')}</Typography>
-				<Card
-					style={{ width: 'max-content' }}
-					bodyStyle={{ padding: '1px 8px', width: '100%' }}
-				>
-					SigNoz {version}
-				</Card>
-			</LeftContainer>
-			{children}
-		</Container>
-	);
-}
-
-interface WelcomeLeftContainerProps {
-	version: string;
-	children: ReactChild;
-}
-
-export default WelcomeLeftContainer;

frontend/src/components/WelcomeLeftContainer/styles.ts

@@ -1,23 +0,0 @@
-import { Space } from 'antd';
-import styled from 'styled-components';
-
-export const LeftContainer = styled(Space)`
-	flex: 1;
-`;
-
-export const Logo = styled.img`
-	width: 60px;
-`;
-
-export const Container = styled.div`
-	&&& {
-		display: flex;
-		justify-content: center;
-		gap: 16px;
-		align-items: center;
-		min-height: 100vh;
-
-		max-width: 1024px;
-		margin: 0 auto;
-	}
-`;

frontend/src/components/createGuardedRoute/createGuardedRoute.test.tsx

@@ -41,11 +41,7 @@ describe('createGuardedRoute', () => {
 			}),
 		);
 
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:*',
-		);
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
 
 		const mockMatch = {
 			params: {},
@@ -79,7 +75,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'read',
-			'dashboard:{id}',
+			'role:{id}',
 		);
 
 		const mockMatch = {
@@ -113,7 +109,7 @@ describe('createGuardedRoute', () => {
 						relation: txn.relation,
 						object: {
 							resource: {
-								name: txn.object.resource.name,
+								kind: txn.object.resource.kind,
 								type: txn.object.resource.type,
 							},
 							selector: '123:456',
@@ -131,7 +127,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'update',
-			'dashboard:{id}:{version}',
+			'role:{id}:{version}',
 		);
 
 		const mockMatch = {
@@ -166,7 +162,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'read',
-			'dashboard:{id}',
+			'role:{id}',
 		);
 
 		const mockMatch = {
@@ -201,11 +197,7 @@ describe('createGuardedRoute', () => {
 			}),
 		);
 
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:*',
-		);
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
 
 		const mockMatch = {
 			params: {},
@@ -236,11 +228,7 @@ describe('createGuardedRoute', () => {
 			}),
 		);
 
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:*',
-		);
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
 
 		const mockMatch = {
 			params: {},
@@ -278,7 +266,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'update',
-			'dashboard:{id}',
+			'role:{id}',
 		);
 
 		const mockMatch = {
@@ -304,7 +292,7 @@ describe('createGuardedRoute', () => {
 		});
 
 		expect(screen.getByText('update')).toBeInTheDocument();
-		expect(screen.getByText('dashboard:123')).toBeInTheDocument();
+		expect(screen.getByText('role:123')).toBeInTheDocument();
 		expect(
 			screen.queryByText('Test Component: test-value'),
 		).not.toBeInTheDocument();
@@ -335,7 +323,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			ComponentWithMultipleProps,
 			'read',
-			'dashboard:*',
+			'role:*',
 		);
 
 		const mockMatch = {
@@ -370,10 +358,10 @@ describe('createGuardedRoute', () => {
 				requestCount++;
 				const payload = (await req.json()) as AuthtypesTransactionDTO[];
 				const obj = payload[0]?.object;
-				const name = obj?.resource?.name;
+				const kind = obj?.resource?.kind;
 				const selector = obj?.selector ?? '*';
 				const objectStr =
-					obj?.resource?.type === 'metaresources' ? name : `${name}:${selector}`;
+					obj?.resource?.type === 'metaresources' ? kind : `${kind}:${selector}`;
 				requestedObjects.push(objectStr ?? '');
 
 				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
@@ -383,7 +371,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'read',
-			'dashboard:{id}',
+			'role:{id}',
 		);
 
 		const mockMatch1 = {
@@ -407,7 +395,7 @@ describe('createGuardedRoute', () => {
 		});
 
 		expect(requestCount).toBe(1);
-		expect(requestedObjects).toContain('dashboard:123');
+		expect(requestedObjects).toContain('role:123');
 
 		unmount();
 
@@ -432,7 +420,7 @@ describe('createGuardedRoute', () => {
 		});
 
 		expect(requestCount).toBe(2);
-		expect(requestedObjects).toContain('dashboard:456');
+		expect(requestedObjects).toContain('role:456');
 	});
 
 	it('should handle different relation types', async () => {
@@ -446,7 +434,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'delete',
-			'dashboard:{id}',
+			'role:{id}',
 		);
 
 		const mockMatch = {

frontend/src/constants/events.ts

@@ -6,6 +6,7 @@ export enum Events {
 	TOOLTIP_PINNED = 'TOOLTIP_PINNED',
 	TOOLTIP_UNPINNED = 'TOOLTIP_UNPINNED',
 	TOOLTIP_CONTENT_SCROLLED = 'TOOLTIP_CONTENT_SCROLLED',
+	TOOLTIP_SYNC_MODE_CHANGED = 'TOOLTIP_SYNC_MODE_CHANGED',
 }
 
 export enum InfraMonitoringEvents {

frontend/src/constants/localStorage.ts

@@ -38,4 +38,5 @@ export enum LOCALSTORAGE {
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
+	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 }

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

@@ -1,9 +0,0 @@
-import {
-	AlertRuleTimelineTableResponse,
-	AlertRuleTimelineTableResponsePayload,
-} from 'types/api/alerts/def';
-
-export type TimelineTableProps = {
-	timelineData: AlertRuleTimelineTableResponse[];
-	totalItems: AlertRuleTimelineTableResponsePayload['data']['total'];
-};

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

@@ -1,2 +0,0 @@
-// setting to 25 hours because we want to display the horizontal graph when the user selects 'Last 1 day' from date and time selector
-export const HORIZONTAL_GRAPH_HOURS_THRESHOLD = 25;

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointDetailsZeroState.tsx

@@ -1,42 +0,0 @@
-import { UseQueryResult } from 'react-query';
-import { SuccessResponse } from 'types/api';
-
-import noDataUrl from '@/assets/Icons/no-data.svg';
-
-import EndPointsDropDown from './EndPointsDropDown';
-
-function EndPointDetailsZeroState({
-	setSelectedEndPointName,
-	endPointDropDownDataQuery,
-}: {
-	setSelectedEndPointName: (endPointName: string) => void;
-	endPointDropDownDataQuery: UseQueryResult<SuccessResponse<any>>;
-}): JSX.Element {
-	return (
-		<div className="end-point-details-zero-state-wrapper">
-			<div className="end-point-details-zero-state-content">
-				<img
-					src={noDataUrl}
-					alt="no-data"
-					width={32}
-					height={32}
-					className="end-point-details-zero-state-icon"
-				/>
-				<div className="end-point-details-zero-state-content-wrapper">
-					<div className="end-point-details-zero-state-text-content">
-						<div className="title">No endpoint selected yet</div>
-						<div className="description">Select an endpoint to see the details</div>
-					</div>
-					<EndPointsDropDown
-						setSelectedEndPointName={setSelectedEndPointName}
-						endPointDropDownDataQuery={endPointDropDownDataQuery}
-						parentContainerDiv=".end-point-details-zero-state-wrapper"
-						dropdownStyle={{ width: '60%' }}
-					/>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default EndPointDetailsZeroState;

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ExpandedRow.tsx

@@ -1,136 +0,0 @@
-import { useMemo } from 'react';
-import { useQueries } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { LoadingOutlined } from '@ant-design/icons';
-import { Spin, Table } from 'antd';
-import type { ColumnType } from 'antd/lib/table';
-import logEvent from 'api/common/logEvent';
-import { ENTITY_VERSION_V4 } from 'constants/app';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import {
-	createFiltersForSelectedRowData,
-	EndPointsTableRowData,
-	formatEndPointsDataForTable,
-	getEndPointsColumnsConfig,
-	getEndPointsQueryPayload,
-} from 'container/ApiMonitoring/utils';
-import LoadingContainer from 'container/InfraMonitoringK8s/LoadingContainer';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { AppState } from 'store/reducers';
-import { SuccessResponse } from 'types/api';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { VIEW_TYPES, VIEWS } from '../constants';
-
-function ExpandedRow({
-	domainName,
-	selectedRowData,
-	setSelectedEndPointName,
-	setSelectedView,
-	orderBy,
-}: {
-	domainName: string;
-	selectedRowData: EndPointsTableRowData;
-	setSelectedEndPointName: (name: string) => void;
-	setSelectedView: (view: VIEWS) => void;
-	orderBy: OrderByPayload | null;
-}): JSX.Element {
-	const nestedColumns = useMemo(() => getEndPointsColumnsConfig(false, []), []);
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const groupedByRowDataQueryPayload = useMemo(() => {
-		if (!selectedRowData) {
-			return null;
-		}
-
-		const filters = createFiltersForSelectedRowData(selectedRowData);
-
-		const baseQueryPayload = getEndPointsQueryPayload(
-			[],
-			domainName,
-			Math.floor(minTime / 1e9),
-			Math.floor(maxTime / 1e9),
-		);
-
-		return baseQueryPayload.map((currentQueryPayload) => ({
-			...currentQueryPayload,
-			query: {
-				...currentQueryPayload.query,
-				builder: {
-					...currentQueryPayload.query.builder,
-					queryData: currentQueryPayload.query.builder.queryData.map(
-						(queryData) => ({
-							...queryData,
-							filters: {
-								items: [...(queryData.filters?.items || []), ...(filters?.items || [])],
-								op: 'AND',
-							},
-						}),
-					),
-				},
-			},
-		}));
-	}, [domainName, minTime, maxTime, selectedRowData]);
-
-	const groupedByRowQueries = useQueries(
-		groupedByRowDataQueryPayload
-			? groupedByRowDataQueryPayload.map((payload) => ({
-					queryKey: [
-						`${REACT_QUERY_KEY.GET_NESTED_ENDPOINTS_LIST}-${domainName}-${selectedRowData?.key}`,
-						payload,
-						ENTITY_VERSION_V4,
-						selectedRowData?.key,
-					],
-					queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-						GetMetricQueryRange(payload, ENTITY_VERSION_V4),
-					enabled: !!payload && !!selectedRowData,
-				}))
-			: [],
-	);
-
-	const groupedByRowQuery = groupedByRowQueries[0];
-	return (
-		<div className="expanded-table-container">
-			{groupedByRowQuery?.isFetching || groupedByRowQuery?.isLoading ? (
-				<LoadingContainer />
-			) : (
-				<div className="expanded-table">
-					<Table
-						columns={nestedColumns as ColumnType<EndPointsTableRowData>[]}
-						dataSource={
-							groupedByRowQuery?.data
-								? formatEndPointsDataForTable(
-										groupedByRowQuery.data?.payload.data.result[0].table?.rows,
-										[],
-										orderBy,
-									)
-								: []
-						}
-						pagination={false}
-						scroll={{ x: true }}
-						tableLayout="fixed"
-						showHeader={false}
-						loading={{
-							spinning: groupedByRowQuery?.isFetching || groupedByRowQuery?.isLoading,
-							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-						}}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
-								setSelectedEndPointName(record.endpointName);
-								setSelectedView(VIEW_TYPES.ENDPOINT_STATS);
-								logEvent('API Monitoring: Endpoint name row clicked', {});
-							},
-							className: 'expanded-clickable-row',
-						})}
-					/>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default ExpandedRow;

frontend/src/container/BillingContainer/BillingContainer.test.tsx

@@ -107,7 +107,7 @@ describe('BillingContainer', () => {
 			).resolves.toBeInTheDocument();
 
 			await expect(
-				screen.findByText('Cancel Subscription', { selector: 'span' }),
+				screen.findByText('Cancel your subscription', { selector: 'span' }),
 			).resolves.toBeInTheDocument();
 		});
 
@@ -150,7 +150,7 @@ describe('BillingContainer', () => {
 			expect(dayRemainingInBillingPeriod).toBeInTheDocument();
 
 			await expect(
-				screen.findByText('Cancel Subscription', { selector: 'span' }),
+				screen.findByText('Cancel your subscription', { selector: 'span' }),
 			).resolves.toBeInTheDocument();
 		});
 	});
@@ -162,7 +162,7 @@ describe('BillingContainer', () => {
 		it('should render when license is ACTIVATED and platform is CLOUD', async () => {
 			render(<BillingContainer />);
 			await expect(
-				screen.findByText('Cancel Subscription', { selector: 'span' }),
+				screen.findByText('Cancel your subscription', { selector: 'span' }),
 			).resolves.toBeInTheDocument();
 		});
 
@@ -186,7 +186,7 @@ describe('BillingContainer', () => {
 			);
 			await screen.findByText('billing');
 			expect(
-				screen.queryByText('Cancel Subscription', { selector: 'span' }),
+				screen.queryByText('Cancel your subscription', { selector: 'span' }),
 			).not.toBeInTheDocument();
 		});
 
@@ -225,7 +225,7 @@ describe('BillingContainer', () => {
 			render(<BillingContainer />, {}, { appContextOverrides: overrides });
 			await screen.findByText('billing');
 			expect(
-				screen.queryByText('Cancel Subscription', { selector: 'span' }),
+				screen.queryByText('Cancel your subscription', { selector: 'span' }),
 			).not.toBeInTheDocument();
 		});
 	});

frontend/src/container/BillingContainer/CancelSubscriptionBanner.module.scss

@@ -1,11 +1,11 @@
 .banner {
 	display: flex;
 	justify-content: space-between;
-	align-items: center;
+	align-items: flex-start;
 	padding: var(--padding-4);
 	border-radius: 4px;
-	border: 1px solid var(--callout-error-border);
-	background-color: var(--callout-error-background);
+	border: 1px solid var(--l1-border);
+	background-color: var(--l2-background);
 	margin: var(--spacing-4) 0 var(--spacing-12);
 }
 
@@ -15,21 +15,55 @@
 	gap: var(--spacing-2);
 }
 
+.titleRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+}
+
 .title {
-	font-size: var(--font-size-sm);
-	font-weight: var(--font-weight-medium);
-	color: var(--callout-error-title);
+	font-size: var(--paragraph-base-500-font-size);
+	font-weight: var(--paragraph-base-500-font-weight);
+	line-height: var(--paragraph-base-500-line-height);
+	color: var(--l1-foreground);
 }
 
 .subtitle {
 	font-size: var(--paragraph-base-400-font-size);
 	font-weight: var(--paragraph-base-400-font-weight);
 	line-height: var(--paragraph-base-400-line-height);
-	color: var(--callout-error-icon);
+	color: var(--l2-foreground);
+	padding-left: 20px;
 }
 
 .dialogBody {
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-relaxed);
-	color: var(--l2-foreground);
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+}
+
+.dialogDescription {
+	font-size: var(--paragraph-base-400-font-size);
+	font-weight: var(--paragraph-base-400-font-weight);
+	line-height: var(--paragraph-base-400-line-height);
+	color: var(--l2-foreground);
+	margin: 0;
+}
+
+.dialogConfirmLabel {
+	font-size: var(--paragraph-base-400-font-size);
+	font-weight: var(--paragraph-base-400-font-weight);
+	line-height: var(--paragraph-base-400-line-height);
+	color: var(--l2-foreground);
+	margin: 0;
+
+	code {
+		font-family: var(--font-mono);
+		color: var(--l1-foreground);
+	}
+}
+
+.cancelButton {
+	background: var(--secondary-background);
+	border: 1px solid var(--l1-border);
 }

frontend/src/container/BillingContainer/CancelSubscriptionBanner.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, userEvent } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CancelSubscriptionBanner from './CancelSubscriptionBanner';
 
@@ -13,14 +13,16 @@ describe('CancelSubscriptionBanner', () => {
 	it('renders banner with title and subtitle', () => {
 		render(<CancelSubscriptionBanner />);
 		expect(
-			screen.getByText('Cancel Subscription', { selector: 'span' }),
+			screen.getByText('Cancel your subscription', { selector: 'span' }),
 		).toBeInTheDocument();
 		expect(
-			screen.getByText('Cancel your SigNoz subscription.'),
+			screen.getByText(
+				/When you cancel your SigNoz subscription, all your data will be deleted/i,
+			),
 		).toBeInTheDocument();
 	});
 
-	it('opens dialog with correct content when Cancel Subscription is clicked', async () => {
+	it('opens dialog with content when Cancel Subscription is clicked', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
@@ -30,17 +32,62 @@ describe('CancelSubscriptionBanner', () => {
 
 		expect(screen.getByRole('dialog')).toBeInTheDocument();
 		expect(
-			screen.getByText(/reach out to our support team/i),
+			screen.getByText(/Cancelling your subscription would stop your data/i),
 		).toBeInTheDocument();
+		expect(screen.getByText(/Type/i)).toBeInTheDocument();
 		expect(
-			screen.getByRole('button', { name: /keep subscription/i }),
+			screen.getByPlaceholderText(/Enter the word cancel/i),
 		).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /go back/i })).toBeInTheDocument();
 		expect(
-			screen.getByRole('button', { name: /contact support/i }),
+			screen.getByRole('button', { name: /cancel subscription/i }),
 		).toBeInTheDocument();
 	});
 
-	it('sends mailto to cloud-support with correct subject on Contact Support', async () => {
+	it('keeps Cancel subscription button disabled until "cancel" is typed', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<CancelSubscriptionBanner />);
+
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
+
+		const confirmButton = screen.getByRole('button', {
+			name: /cancel subscription/i,
+		});
+		expect(confirmButton).toBeDisabled();
+
+		const input = screen.getByPlaceholderText(/Enter the word cancel/i);
+		await user.type(input, 'canc');
+		expect(confirmButton).toBeDisabled();
+
+		await user.type(input, 'el');
+		expect(confirmButton).toBeEnabled();
+	});
+
+	it('closes dialog and resets input when Go back is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<CancelSubscriptionBanner />);
+
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
+
+		const input = screen.getByPlaceholderText(/Enter the word cancel/i);
+		await user.type(input, 'cancel');
+
+		await user.click(screen.getByRole('button', { name: /go back/i }));
+		await waitFor(() =>
+			expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+		);
+
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
+		expect(screen.getByPlaceholderText(/Enter the word cancel/i)).toHaveValue('');
+	});
+
+	it('sends mailto to cloud-support with correct subject after typing "cancel"', async () => {
 		const realCreateElement = document.createElement.bind(document);
 		const mockClick = jest.fn();
 		const mockAnchor = { href: '', click: mockClick };
@@ -57,7 +104,13 @@ describe('CancelSubscriptionBanner', () => {
 		await user.click(
 			screen.getByRole('button', { name: /cancel subscription/i }),
 		);
-		await user.click(screen.getByRole('button', { name: /contact support/i }));
+
+		const input = screen.getByPlaceholderText(/Enter the word cancel/i);
+		await user.type(input, 'cancel');
+
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
 
 		expect(mockAnchor.href).toContain('mailto:cloud-support@signoz.io');
 		expect(mockAnchor.href).toContain('Cancel%20My%20SigNoz%20Subscription');

frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx

@@ -1,15 +1,17 @@
 import { useState } from 'react';
-import { X } from '@signozhq/icons';
-import { Button, DialogWrapper } from '@signozhq/ui';
+import { SolidInfoCircle, Undo2, X } from '@signozhq/icons';
+import { Button, DialogWrapper, Input } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { getBaseUrl } from 'utils/basePath';
 
 import styles from './CancelSubscriptionBanner.module.scss';
+import { Color } from '@signozhq/design-tokens';
 
 function CancelSubscriptionBanner(): JSX.Element {
 	const [open, setOpen] = useState(false);
+	const [confirmText, setConfirmText] = useState('');
 	const { user, org } = useAppContext();
 
 	const handleOpenCancelDialog = (): void => {
@@ -53,6 +55,12 @@ function CancelSubscriptionBanner(): JSX.Element {
 		link.href = `mailto:cloud-support@signoz.io?subject=${subject}&body=${body}`;
 		link.click();
 		setOpen(false);
+		setConfirmText('');
+	};
+
+	const handleClose = (): void => {
+		setOpen(false);
+		setConfirmText('');
 	};
 
 	const footer = (
@@ -60,12 +68,19 @@ function CancelSubscriptionBanner(): JSX.Element {
 			<Button
 				variant="solid"
 				color="secondary"
-				onClick={(): void => setOpen(false)}
+				prefix={<Undo2 size={14} />}
+				onClick={handleClose}
 			>
-				Keep Subscription
+				Go back
 			</Button>
-			<Button variant="solid" color="destructive" onClick={handleContactSupport}>
-				Contact Support
+			<Button
+				variant="solid"
+				color="destructive"
+				prefix={<X size={14} />}
+				disabled={confirmText !== 'cancel'}
+				onClick={handleContactSupport}
+			>
+				Cancel subscription
 			</Button>
 		</>
 	);
@@ -74,30 +89,47 @@ function CancelSubscriptionBanner(): JSX.Element {
 		<>
 			<div className={styles.banner}>
 				<div className={styles.info}>
-					<span className={styles.title}>Cancel Subscription</span>
-					<span className={styles.subtitle}>Cancel your SigNoz subscription.</span>
+					<div className={styles.titleRow}>
+						<SolidInfoCircle color={Color.BG_SAKURA_500} size={12} />
+						<span className={styles.title}>Cancel your subscription</span>
+					</div>
+					<span className={styles.subtitle}>
+						When you cancel your SigNoz subscription, all your data will be deleted
+						immediately and removed from our servers.
+					</span>
 				</div>
 				<Button
 					variant="solid"
-					color="destructive"
+					color="secondary"
 					prefix={<X size={12} />}
 					onClick={handleOpenCancelDialog}
+					className={styles.cancelButton}
 				>
 					Cancel Subscription
 				</Button>
 			</div>
 			<DialogWrapper
 				open={open}
-				onOpenChange={setOpen}
-				title="Cancel your subscription"
+				onOpenChange={handleClose}
+				title="Cancel your subscription?"
 				width="narrow"
 				showCloseButton={false}
 				footer={footer}
 			>
-				<p className={styles.dialogBody}>
-					To cancel your SigNoz subscription, please reach out to our support team.
-					We&apos;ll be happy to assist you.
-				</p>
+				<div className={styles.dialogBody}>
+					<p className={styles.dialogDescription}>
+						Cancelling your subscription would stop your data from being ingested to
+						SigNoz. All the data that has been already sent will also be deleted.
+					</p>
+					<p className={styles.dialogConfirmLabel}>
+						Type <code>cancel</code> to confirm the cancellation.
+					</p>
+					<Input
+						placeholder="Enter the word cancel..."
+						value={confirmText}
+						onChange={(e): void => setConfirmText(e.target.value)}
+					/>
+				</div>
 			</DialogWrapper>
 		</>
 	);

frontend/src/container/ConfigDropdown/Config/ErrorLink.tsx

@@ -1,33 +0,0 @@
-import { PureComponent } from 'react';
-
-interface State {
-	hasError: boolean;
-}
-
-interface Props {
-	children: JSX.Element;
-}
-
-class ErrorLink extends PureComponent<Props, State> {
-	constructor(props: Props) {
-		super(props);
-		this.state = { hasError: false };
-	}
-
-	static getDerivedStateFromError(): State {
-		return { hasError: true };
-	}
-
-	render(): JSX.Element {
-		const { children } = this.props;
-		const { hasError } = this.state;
-
-		if (hasError) {
-			return <div />;
-		}
-
-		return children;
-	}
-}
-
-export default ErrorLink;

frontend/src/container/ConfigDropdown/Config/Link.tsx

@@ -1,23 +0,0 @@
-import { ReactNode } from 'react';
-import { Link } from 'react-router-dom';
-
-function LinkContainer({ children, href }: LinkContainerProps): JSX.Element {
-	const isInternalLink = href.startsWith('/');
-
-	if (isInternalLink) {
-		return <Link to={href}>{children}</Link>;
-	}
-
-	return (
-		<a rel="noreferrer" target="_blank" href={href}>
-			{children}
-		</a>
-	);
-}
-
-interface LinkContainerProps {
-	children: ReactNode;
-	href: string;
-}
-
-export default LinkContainer;

frontend/src/container/ConfigDropdown/Config/index.tsx

@@ -1,49 +0,0 @@
-import { lazy, Suspense, useMemo } from 'react';
-import { Menu, Space } from 'antd';
-import Spinner from 'components/Spinner';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
-import { lazyRetry } from 'utils/lazyWithRetries';
-
-import ErrorLink from './ErrorLink';
-import LinkContainer from './Link';
-
-function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
-	const sortedConfig = useMemo(
-		() => config.components.sort((a, b) => a.position - b.position),
-		[config.components],
-	);
-
-	const isDarkMode = useIsDarkMode();
-
-	const items = sortedConfig.map((item) => {
-		const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`;
-
-		const Component = lazy(() =>
-			lazyRetry(() => import(`@ant-design/icons/es/icons/${iconName}.js`)),
-		);
-		return {
-			key: item.text + item.href,
-			label: (
-				<ErrorLink key={item.text + item.href}>
-					<Suspense fallback={<Spinner height="5vh" />}>
-						<LinkContainer href={item.href}>
-							<Space size="small" align="start">
-								<Component />
-								{item.text}
-							</Space>
-						</LinkContainer>
-					</Suspense>
-				</ErrorLink>
-			),
-		};
-	});
-
-	return <Menu items={items} />;
-}
-
-interface HelpToolTipProps {
-	config: ConfigProps;
-}
-
-export default HelpToolTip;

frontend/src/container/ConfigDropdown/index.tsx

@@ -1,76 +0,0 @@
-import { useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import {
-	CaretDownFilled,
-	CaretUpFilled,
-	QuestionCircleFilled,
-	QuestionCircleOutlined,
-} from '@ant-design/icons';
-import { Space } from 'antd';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { AppState } from 'store/reducers';
-import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
-import AppReducer from 'types/reducer/app';
-
-import HelpToolTip from './Config';
-import { ConfigDropdown } from './styles';
-
-function DynamicConfigDropdown({
-	frontendId,
-}: DynamicConfigDropdownProps): JSX.Element {
-	const { configs } = useSelector<AppState, AppReducer>((state) => state.app);
-	const isDarkMode = useIsDarkMode();
-	const [isHelpDropDownOpen, setIsHelpDropDownOpen] = useState<boolean>(false);
-
-	const config = useMemo(
-		() =>
-			Object.values(configs).find(
-				(config) => config.frontendPositionId === frontendId,
-			),
-		[frontendId, configs],
-	);
-
-	const onToggleHandler = (): void => {
-		setIsHelpDropDownOpen(!isHelpDropDownOpen);
-	};
-
-	const menu = useMemo(
-		() => ({
-			items: [
-				{
-					key: '1',
-					label: <HelpToolTip config={config as ConfigProps} />,
-				},
-			],
-		}),
-		[config],
-	);
-
-	if (!config) {
-		return <div />;
-	}
-
-	const Icon = isDarkMode ? QuestionCircleOutlined : QuestionCircleFilled;
-	const DropDownIcon = isHelpDropDownOpen ? CaretUpFilled : CaretDownFilled;
-
-	return (
-		<ConfigDropdown
-			onOpenChange={onToggleHandler}
-			trigger={['click']}
-			menu={menu}
-			open={isHelpDropDownOpen}
-		>
-			<Space align="center">
-				<Icon style={{ fontSize: 26, color: 'white', paddingTop: 26 }} />
-				<DropDownIcon style={{ color: 'white' }} />
-			</Space>
-		</ConfigDropdown>
-	);
-}
-
-interface DynamicConfigDropdownProps {
-	frontendId: string;
-}
-
-export default DynamicConfigDropdown;

frontend/src/container/ConfigDropdown/styles.ts

@@ -1,6 +0,0 @@
-import { Dropdown } from 'antd';
-import styled from 'styled-components';
-
-export const ConfigDropdown = styled(Dropdown)`
-	cursor: pointer;
-`;

frontend/src/container/CreateAlertV2/EvaluationSettings/index.ts

@@ -1,3 +0,0 @@
-import EvaluationSettings from './EvaluationSettings';
-
-export default EvaluationSettings;

frontend/src/container/DashboardContainer/DashboardDescription/DashboardName/index.tsx

@@ -1,27 +0,0 @@
-import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react';
-import Input from 'components/Input';
-
-function DashboardName({ setName, name }: DashboardNameProps): JSX.Element {
-	const onChangeHandler = useCallback(
-		(e: ChangeEvent<HTMLInputElement>) => {
-			setName(e.target.value);
-		},
-		[setName],
-	);
-
-	return (
-		<Input
-			size="middle"
-			placeholder="Title"
-			value={name}
-			onChangeHandler={onChangeHandler}
-		/>
-	);
-}
-
-interface DashboardNameProps {
-	name: string;
-	setName: Dispatch<SetStateAction<string>>;
-}
-
-export default DashboardName;

frontend/src/container/DashboardContainer/DashboardDescription/ShareModal.tsx

@@ -1,100 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useCopyToClipboard } from 'react-use';
-import { CopyFilled, DownloadOutlined } from '@ant-design/icons';
-import { Button, Modal } from 'antd';
-import Editor from 'components/Editor';
-import { useNotifications } from 'hooks/useNotifications';
-import { DashboardData } from 'types/api/dashboard/getAll';
-
-import { downloadObjectAsJson } from './utils';
-
-function ShareModal({
-	isJSONModalVisible,
-	onToggleHandler,
-	selectedData,
-}: ShareModalProps): JSX.Element {
-	const getParsedValue = (): string => JSON.stringify(selectedData, null, 2);
-
-	const [jsonValue, setJSONValue] = useState<string>(getParsedValue());
-	const { t } = useTranslation(['dashboard', 'common']);
-	const [state, setCopy] = useCopyToClipboard();
-	const { notifications } = useNotifications();
-
-	useEffect(() => {
-		if (state.error) {
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-		}
-
-		if (state.value) {
-			notifications.success({
-				message: t('success', {
-					ns: 'common',
-				}),
-			});
-		}
-	}, [state.error, state.value, t, notifications]);
-
-	const GetFooterComponent = useMemo(() => {
-		return (
-			<>
-				<Button
-					style={{
-						marginTop: '16px',
-					}}
-					onClick={(): void => setCopy(jsonValue)}
-					type="primary"
-					size="small"
-				>
-					<CopyFilled /> {t('copy_to_clipboard')}
-				</Button>
-
-				<Button
-					type="primary"
-					size="small"
-					onClick={(): void => {
-						downloadObjectAsJson(selectedData, selectedData.title);
-					}}
-				>
-					<DownloadOutlined /> {t('download_json')}
-				</Button>
-			</>
-		);
-	}, [jsonValue, selectedData, setCopy, t]);
-
-	return (
-		<Modal
-			open={isJSONModalVisible}
-			onCancel={(): void => {
-				onToggleHandler();
-			}}
-			width="80vw"
-			centered
-			title={t('share', {
-				ns: 'common',
-			})}
-			okText={t('download_json')}
-			cancelText={t('cancel')}
-			destroyOnClose
-			footer={GetFooterComponent}
-		>
-			<Editor
-				height="70vh"
-				onChange={(value): void => setJSONValue(value)}
-				value={jsonValue}
-			/>
-		</Modal>
-	);
-}
-
-interface ShareModalProps {
-	isJSONModalVisible: boolean;
-	onToggleHandler: VoidFunction;
-	selectedData: DashboardData;
-}
-
-export default ShareModal;

frontend/src/container/DashboardContainer/DashboardSettings/General/Description/index.tsx

@@ -1,35 +0,0 @@
-import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react';
-import { Input } from 'antd';
-
-import { Container } from './styles';
-
-const { TextArea } = Input;
-
-function Description({
-	description,
-	setDescription,
-}: DescriptionProps): JSX.Element {
-	const onChangeHandler = useCallback(
-		(e: ChangeEvent<HTMLTextAreaElement>) => {
-			setDescription(e.target.value);
-		},
-		[setDescription],
-	);
-
-	return (
-		<Container>
-			<TextArea
-				placeholder="Description of the dashboard"
-				onChange={onChangeHandler}
-				value={description}
-			/>
-		</Container>
-	);
-}
-
-interface DescriptionProps {
-	description: string;
-	setDescription: Dispatch<SetStateAction<string>>;
-}
-
-export default Description;

frontend/src/container/DashboardContainer/DashboardSettings/General/Description/styles.ts

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	margin-top: 1rem;
-`;

frontend/src/container/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss

@@ -0,0 +1,190 @@
+.overviewContent {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.overviewSettings {
+	border-radius: 3px;
+	border: 1px solid var(--l1-border);
+	padding: 16px !important;
+}
+
+.crossPanelSyncGroup {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.crossPanelSyncSectionTitle {
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+}
+
+.crossPanelSyncRow {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 16px;
+
+	& + & {
+		padding-top: 16px;
+		border-top: 1px solid var(--l1-border);
+	}
+}
+
+.crossPanelSyncInfo {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.crossPanelSyncTitle {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.crossPanelSyncDescription {
+	color: var(--l3-foreground);
+	font-family: Inter;
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.nameIconInput {
+	display: flex;
+}
+
+.dashboardImageInput {
+	:global(.ant-select-selector) {
+		display: flex;
+		width: 32px;
+		height: 32px;
+		padding: 6px;
+		justify-content: center;
+		align-items: center;
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--l1-border) !important;
+		background: var(--l3-background) !important;
+
+		:global(.ant-select-selection-item) {
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	&:global(.ant-select-dropdown) {
+		padding: 0px !important;
+	}
+
+	:global(.ant-select-item) {
+		padding: 0px;
+		align-items: center;
+		justify-content: center;
+
+		:global(.ant-select-item-option-content) {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+}
+
+.listItemImage {
+	height: 16px;
+	width: 16px;
+}
+
+.dashboardNameInput {
+	border-radius: 0px 2px 2px 0px;
+	border: 1px solid var(--l1-border);
+	background: var(--l3-background);
+}
+
+.dashboardName {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px;
+	margin-bottom: 0.5rem;
+}
+
+.descriptionTextArea {
+	padding: 6px 6px 6px 8px;
+	border-radius: 2px;
+	border: 1px solid var(--l1-border);
+	background: var(--l3-background);
+}
+
+.overviewSettingsFooter {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: -webkit-fill-available;
+	padding: 12px 16px 12px 0px;
+	position: fixed;
+	bottom: 0;
+	height: 32px;
+	border-top: 1px solid var(--l1-border);
+	background: var(--l2-background);
+}
+
+.unsaved {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.unsavedDot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50px;
+	background: var(--primary-background);
+	box-shadow: 0px 0px 6px 0px
+		color-mix(in srgb, var(--primary-background) 40%, transparent);
+}
+
+.unsavedChanges {
+	color: var(--bg-robin-400);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 24px;
+	letter-spacing: -0.07px;
+}
+
+.footerActionBtns {
+	display: flex;
+	gap: 8px;
+}
+
+.discardBtn {
+	margin: '16px 0';
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}
+
+.saveBtn {
+	margin: 0px !important;
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}

frontend/src/container/DashboardContainer/DashboardSettings/General/GeneralSettings.styles.scss

@@ -1,143 +0,0 @@
-.overview-content {
-	display: flex;
-	flex-direction: column;
-
-	.overview-settings {
-		border-radius: 3px;
-		border: 1px solid var(--l1-border);
-		padding: 16px !important;
-
-		.name-icon-input {
-			display: flex;
-			.dashboard-image-input {
-				.ant-select-selector {
-					display: flex;
-					width: 32px;
-					height: 32px;
-					padding: 6px;
-					justify-content: center;
-					align-items: center;
-					border-radius: 2px 0px 0px 2px;
-					border: 1px solid var(--l1-border);
-					background: var(--l3-background);
-
-					.ant-select-selection-item {
-						display: flex;
-						align-items: center;
-
-						.list-item-image {
-							height: 16px;
-							width: 16px;
-						}
-					}
-				}
-			}
-
-			.dashboard-name-input {
-				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-			}
-		}
-
-		.dashboard-name {
-			color: var(--l2-foreground);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-		}
-
-		.description-text-area {
-			padding: 6px 6px 6px 8px;
-			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
-		}
-	}
-
-	.overview-settings-footer {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		width: -webkit-fill-available;
-		padding: 12px 16px 12px 0px;
-		position: fixed;
-		bottom: 0;
-		height: 32px;
-		border-top: 1px solid var(--l1-border);
-		background: var(--l2-background);
-
-		.unsaved {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-
-			.unsaved-dot {
-				width: 6px;
-				height: 6px;
-				border-radius: 50px;
-				background: var(--primary-background);
-				box-shadow: 0px 0px 6px 0px
-					color-mix(in srgb, var(--primary-background) 40%, transparent);
-			}
-			.unsaved-changes {
-				color: var(--bg-robin-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 24px; /* 171.429% */
-				letter-spacing: -0.07px;
-			}
-		}
-		.footer-action-btns {
-			display: flex;
-			gap: 8px;
-
-			.discard-btn {
-				margin: '16px 0';
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 24px;
-			}
-
-			.save-btn {
-				margin: 0px !important;
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 24px;
-			}
-		}
-	}
-}
-
-.dashboard-image-input {
-	&.ant-select-dropdown {
-		padding: 0px !important;
-	}
-
-	.ant-select-item {
-		padding: 0px;
-		align-items: center;
-		justify-content: center;
-
-		.ant-select-item-option-content {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			.list-item-image {
-				height: 16px;
-				width: 16px;
-			}
-		}
-	}
-}