chore(dashboards-v2): tidy panel-editor query helpers

- useLegendSeries: drop redundant optional chaining on panel.spec.
- usePanelTypeSwitch: default null queries to [] for getBuilderQueries.
- Remove the unused getPanelKindLabel util.

.github/workflows/goci.yaml

@@ -140,3 +140,20 @@ jobs:
         run: |
           go run cmd/enterprise/*.go generate config web-settings
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in web settings schema. Run go run cmd/enterprise/*.go generate config web-settings locally and commit."; exit 1)
+  transaction-groups:
+    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-transaction-groups
+        run: |
+          go run cmd/enterprise/*.go generate config transaction-groups
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in transaction groups schema. Run go run cmd/enterprise/*.go generate config transaction-groups locally and commit."; exit 1)

cmd/community/server.go

@@ -29,8 +29,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
-	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule"
-	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule/implmetricreductionrule"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
 	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
@@ -121,9 +119,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ sqlstore.SQLStore, _ dashboard.Module, _ global.Global, _ zeus.Zeus, _ gateway.Gateway, _ licensing.Licensing, _ serviceaccount.Module, _ cloudintegration.Config) (cloudintegration.Module, error) {
 			return implcloudintegration.NewModule(), nil
 		},
-		func(_ sqlstore.SQLStore, _ telemetrystore.TelemetryStore, _ dashboard.Module, _ queryparser.QueryParser, _ licensing.Licensing, _ flagger.Flagger, _ factory.ProviderSettings, _ int) metricreductionrule.Module {
-			return implmetricreductionrule.NewModule()
-		},
 		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {
 			return factory.MustNewNamedMap(signozruler.NewFactory(c, am, ss, ts, ms, p, og, rsh, q, qp, nil, nil))
 		},

cmd/enterprise/server.go

@@ -24,7 +24,6 @@ import (
 	"github.com/SigNoz/signoz/ee/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/ee/modules/cloudintegration/implcloudintegration/implcloudprovider"
 	"github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard"
-	"github.com/SigNoz/signoz/ee/modules/metricreductionrule/implmetricreductionrule"
 	eequerier "github.com/SigNoz/signoz/ee/querier"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
 	eerules "github.com/SigNoz/signoz/ee/query-service/rules"
@@ -47,7 +46,6 @@ import (
 	pkgcloudintegration "github.com/SigNoz/signoz/pkg/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
-	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
 	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
@@ -184,9 +182,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return implcloudintegration.NewModule(pkgcloudintegration.NewStore(sqlStore), dashboardModule, global, zeus, gateway, licensing, serviceAccount, cloudProvidersMap, config)
 		},
-		func(sqlStore sqlstore.SQLStore, ts telemetrystore.TelemetryStore, dashboardModule dashboard.Module, queryParser queryparser.QueryParser, licensing licensing.Licensing, flagger pkgflagger.Flagger, ps factory.ProviderSettings, threads int) metricreductionrule.Module {
-			return implmetricreductionrule.NewModule(sqlStore, ts, dashboardModule, queryParser, licensing, flagger, ps, threads)
-		},
 		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {
 			return factory.MustNewNamedMap(signozruler.NewFactory(c, am, ss, ts, ms, p, og, rsh, q, qp, eerules.PrepareTaskFunc, eerules.TestNotification))
 		},

cmd/genconfig.go

@@ -6,12 +6,15 @@ import (
 	"reflect"
 	"strings"
 
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/web"
 	"github.com/spf13/cobra"
 	"github.com/swaggest/jsonschema-go"
 )
 
-const webSettingsSchemaPath = "docs/config/web-settings.json"
+const webSettingsSchemaPath = "frontend/src/schemas/generated/webSettings.schema.json"
+
+const transactionGroupsSchemaPath = "frontend/src/schemas/generated/transactionGroups.schema.json"
 
 func registerGenerateConfig(parentCmd *cobra.Command) {
 	configCmd := &cobra.Command{
@@ -27,6 +30,14 @@ func registerGenerateConfig(parentCmd *cobra.Command) {
 		},
 	})
 
+	configCmd.AddCommand(&cobra.Command{
+		Use:   "transaction-groups",
+		Short: "Generate JSON Schema for transaction groups",
+		RunE: func(currCmd *cobra.Command, args []string) error {
+			return generateTransactionGroups()
+		},
+	})
+
 	parentCmd.AddCommand(configCmd)
 }
 
@@ -52,6 +63,7 @@ func generateWebSettings() error {
 		return err
 	}
 
+	schema.WithTitle("WebSettings")
 	data, err := json.MarshalIndent(schema, "", "  ")
 	if err != nil {
 		return err
@@ -59,3 +71,31 @@ func generateWebSettings() error {
 
 	return os.WriteFile(webSettingsSchemaPath, append(data, '\n'), 0o600)
 }
+
+func generateTransactionGroups() error {
+	falseVal := false
+	noAdditional := jsonschema.SchemaOrBool{TypeBoolean: &falseVal}
+
+	reflector := jsonschema.Reflector{}
+	reflector.DefaultOptions = append(reflector.DefaultOptions,
+		jsonschema.InterceptSchema(func(params jsonschema.InterceptSchemaParams) (bool, error) {
+			if params.Value.Kind() == reflect.Struct {
+				params.Schema.AdditionalProperties = &noAdditional
+			}
+			return false, nil
+		}),
+	)
+
+	schema, err := reflector.Reflect(authtypes.TransactionGroups{})
+	if err != nil {
+		return err
+	}
+
+	schema.WithTitle("TransactionGroups")
+	data, err := json.MarshalIndent(schema, "", "  ")
+	if err != nil {
+		return err
+	}
+
+	return os.WriteFile(transactionGroupsSchemaPath, append(data, '\n'), 0o600)
+}

deploy/MIGRATION.md

@@ -1,48 +1,76 @@
-# Migrating from the install script to Foundry
+# Migrating from the install script and `deploy/` to Foundry
+
+The install script (`install.sh`) and the bundled Compose and Swarm files
+under `deploy/` are deprecated in favor of [Foundry][foundry], the supported
+way to install and manage SigNoz. This guide moves an existing Docker Compose
+or Docker Swarm deployment to Foundry and reattaches your existing volumes, so
+your data is preserved.
 
 > [!IMPORTANT]
-> The install script is now deprecated and will no longer receive updates.
+> This guide is only for **existing** `install.sh` / `deploy/` deployments.
+> Setting up SigNoz for the first time? Skip migration and install Foundry
+> directly: [SigNoz install docs][install-docs].
 
-This guide walks you through migrating an existing SigNoz deployment running via
-Docker Compose to [Foundry](https://signoz.io/docs/install/docker/).
+## How it works
 
-> [!NOTE]
-> Setting up SigNoz for the first time? You don't need this guide — follow the [SigNoz installation docs](https://signoz.io/docs/install/) instead.
+Foundry splits a deployment into two commands:
 
-## Overview
-To stay up to date on new installation platforms and patterns, please refer to [Foundry](https://github.com/SigNoz/foundry).
+- `foundryctl forge` generates the deployment manifests from a `casting.yaml`.
+  It never touches running containers, so it is safe to re-run while you
+  iterate.
+- `foundryctl cast` applies those manifests: it (re)creates the containers and
+  reuses the volumes you point it at.
 
-Two `foundryctl` commands are used throughout this guide:
-- **`forge`** — generates deployment manifests from your `casting.yaml`. It does not touch running containers, so it is safe to re-run while you iterate.
-- **`cast`** — applies the generated manifests: it creates and starts the containers (and pulls new images).
+You write one `casting.yaml`, point a few patches at your existing data
+volumes, then cast. The steps below are the same for Compose and Swarm; they
+differ only in the casting (step 3) and how you stop the old stack (step 5).
 
 ## Prerequisites
-- [ ] Install Foundry - `curl -fsSL https://signoz.io/foundry.sh | bash`
 
-## Migration Steps
-> [!WARNING]
-> **Before proceeding, back up both:**
-> - **Your docker volumes** — these hold your data.
-> - **Your existing `docker-compose.yaml` (and any config it references)** — keep a copy somewhere safe. The compose manifests are no longer distributed by SigNoz, so this backup is your only way to roll back to your previous setup.
+- An existing SigNoz deployment from `install.sh` or `deploy/` (Compose or
+  Swarm).
+- `foundryctl` (installed in step 1).
 
-1. Make a note of the volume names used by your existing deployment for the following components:
-- ClickHouse
-- SigNoz
-- ZooKeeper
+## Migrate
 
-> If you used the docker compose file we provided, the volumes will be `signoz-clickhouse`, `signoz-sqlite`, and `signoz-zookeeper-1`.
+### 1. Install Foundry
 
-2. Generate your `casting.yaml`. Based on internal testing, the following casting should generate the manifests that mimic the legacy docker compose setup (compare against your backed-up `docker-compose.yaml`). Once created, run `foundryctl forge -f casting.yaml`.
+```bash
+curl -fsSL https://signoz.io/foundry.sh | bash
+```
 
-Foundry has a [Docker Compose example](https://github.com/SigNoz/foundry/tree/main/docs/examples/docker/compose). Please use it as a reference.
+### 2. Keep your rollback path
 
-> [!WARNING]
-> If your deployment had more than 1 shard or replica, you will need to adjust your manifest volumes accordingly.
+This migration reattaches your existing volumes in place; it does not move or
+delete your data. The only destructive action is passing `--volumes` / `-v`
+when you stop the old stack (step 5), so avoid that flag.
 
 > [!IMPORTANT]
-> The `replica` and `shard` macros below are placeholders. Replace them with the values from your existing ClickHouse configuration (check the `macros` section of your current ClickHouse config, e.g. `config.xml`/`metrika.xml`), otherwise the generated manifests will not match your existing data.
+> Keep a copy of your existing `docker-compose.yaml` / stack file (and any
+> config it references). SigNoz no longer distributes these files, so this copy
+> is your only way to roll back.
+
+### 3. Write your `casting.yaml`
+
+Use the casting for your deployment. Both reproduce the legacy single-node
+setup (ClickHouse + ZooKeeper + SQLite) and reattach your existing volumes;
+they differ only in `spec.deployment.flavor` and the volume-reuse patch
+(Compose volumes have a `name` to replace; Swarm volumes are bare, so the whole
+entry is replaced). If your deployment ran more than one shard or replica,
+adjust the volume patches accordingly. The
+[Docker Compose example][compose-example] is a useful reference.
+
+> [!IMPORTANT]
+> The `replica` and `shard` macros are placeholders. Replace them with the
+> values from your existing ClickHouse config (the `macros` section of
+> `config.xml` / `metrika.xml`), or the generated manifests will not match your
+> existing data.
+
+<details>
+<summary><b>Docker Compose</b> casting.yaml</summary>
 
 ```yaml
+# casting.yaml
 apiVersion: v1alpha1
 kind: Installation
 metadata:
@@ -61,8 +89,8 @@ spec:
         data:
           config-0-0.yaml: |
             macros:
-              replica: "example01-01-1" # replace with your existing ClickHouse replica macro (see legacy configuration files for reference)
-              shard: "01"               # replace with your existing ClickHouse shard macro (see legacy configuration files for reference)
+              replica: "example01-01-1" # replace with your replica macro
+              shard: "01" # replace with your shard macro
   patches:
     - target: "deployment/compose.yaml"
       operations:
@@ -80,50 +108,163 @@ spec:
           value: root
 ```
 
-> [!NOTE]
-> The `user: root` patch on the ZooKeeper service is required so the container can read/write the data in your reused ZooKeeper volume, which was created with `root`-owned files by the legacy compose setup. Without it, ZooKeeper may fail to start with permission errors.
+</details>
 
-If you had custom configurations for features like SMTP or additional ingestion processors/receivers, you will need to include those in your casting file via [patches](https://github.com/SigNoz/foundry/blob/main/docs/concepts/patches.md), [custom configuration](https://github.com/SigNoz/foundry/blob/main/docs/concepts/moldings.md#custom-config-files) or [environment variables](https://github.com/SigNoz/foundry/blob/main/docs/reference/casting-file.md#molding-spec) based on your previous configuration.
+<details>
+<summary><b>Docker Swarm</b> casting.yaml</summary>
 
-3. Review your manifests, we suggest executing the following checks on your manifests before proceeding:
-- [ ] Validate the container images match what your deployment had, Foundry uses `latest` on generation by default.
-- [ ] If your signoz version was older than latest, please check the [upgrade path](https://signoz.io/docs/operate/upgrade/) first.
-- [ ] Check the produced manifests in `pours/deployment` match your older configurations. Extra consideration and review needs to be done on `compose.yaml` as this will be the main entry point for your new deployment.
-- [ ] The configuration files for clickhouse are now in YAML so validate your custom settings are present.
+```yaml
+# casting.yaml
+apiVersion: v1alpha1
+kind: Installation
+metadata:
+  name: signoz
+spec:
+  deployment:
+    flavor: swarm
+    mode: docker
+  metastore:
+    kind: sqlite
+  telemetrykeeper:
+    kind: zookeeper
+  telemetrystore:
+    spec:
+      config:
+        data:
+          config-0-0.yaml: |
+            macros:
+              replica: "example01-01-1" # replace with your replica macro
+              shard: "01" # replace with your shard macro
+  patches:
+    - target: "deployment/compose.yaml"
+      operations:
+        - op: replace
+          path: /volumes/signoz-telemetrykeeper-0-data
+          value:
+            name: signoz-zookeeper-1
+        - op: replace
+          path: /volumes/signoz-telemetrystore-0-0-data
+          value:
+            name: signoz-clickhouse
+        - op: replace
+          path: /volumes/signoz-metastore-sqlite-0-data
+          value:
+            name: signoz-sqlite
+        - op: add
+          path: /services/signoz-telemetrykeeper-zookeeper-0/user
+          value: root
+```
 
-4. Execute a `docker compose down`. **Do not** include parameters such as `--volumes` (or `-v`), as it will wipe the volumes we need to maintain and reuse to avoid data loss. 
+</details>
 
 > [!NOTE]
-> This will generate downtime so please plan accordingly.
+> The `user: root` patch on the ZooKeeper service lets the container read and
+> write the data in your reused ZooKeeper volume, whose files the legacy setup
+> created as `root`. Without it, ZooKeeper may fail to start with permission
+> errors.
 
-5. Validate the SigNoz containers are down with `docker ps -a`. Multiple containers cannot bind the same volume.
+If you had custom configuration (SMTP, extra ingestion receivers/processors,
+or custom ClickHouse settings), carry it over via [patches][patches],
+[custom config files][custom-config], or [environment variables][env-vars].
 
-6. Run `foundryctl cast -f casting.yaml`. This will recreate the containers based on the spec. This process will download new container images.
+### 4. Generate and review the manifests
+
+```bash
+foundryctl forge -f casting.yaml
+```
+
+Review `pours/deployment/` before deploying:
+
+- [ ] Container images match your current deployment. Foundry generates with
+  `latest` by default; if your SigNoz version was older than latest, check the
+  [upgrade path][upgrade-path] first.
+- [ ] The generated manifests match your previous configuration, especially
+  `compose.yaml` (the new entry point for your deployment).
+- [ ] The ClickHouse config is now YAML rather than XML; confirm your custom
+  settings carried over (see [ClickHouse configuration files][ch-config] for
+  the XML-to-YAML mapping).
+
+### 5. Stop the old deployment
+
+Use the command for your deployment. Do **not** pass `--volumes` / `-v`; that
+would delete the data you are migrating.
+
+```bash
+docker compose down        # Compose
+docker stack rm signoz     # Swarm
+```
 
 > [!NOTE]
-> When `cast` is run, the migration container will execute its migrations.
+> This causes downtime, so plan accordingly.
 
-## Verifying the Migration
-- SigNoz containers will be up and running.
-- Log in to the SigNoz UI and verify that data is present.
-    - Signoz will run on localhost:8080
-- Validate that your data ingestion is receiving data.
-    - Ingesters will receive data on localhost:4317(grpc) and localhost:4318(http)
-- Review the logs from both ClickHouse and ZooKeeper; no errors should be present.
+Confirm nothing is still bound to the volumes before continuing:
 
-## Rolling Back
-Because step 4 brought the legacy stack down *without* `-v`, your original volumes
-are untouched and still hold your data. To roll back:
+```bash
+docker ps -a
+```
 
-- Stop and remove the containers created by Foundry (`docker compose down`, again without `-v`).
-- Confirm the containers are gone with `docker ps -a` so nothing else is bound to the volumes.
-- Reapply your original docker compose file (`docker compose up -d`). It will reattach to the
-  existing volumes and restore your prior state.
+### 6. Deploy with Foundry
+
+```bash
+foundryctl cast -f casting.yaml
+```
+
+This recreates the containers against your existing volumes and pulls the
+images. The migration container runs the schema migrations as part of `cast`.
+
+**Prefer not to use `cast`?** The manifests in `pours/deployment/` are standard
+Docker artifacts you can apply yourself. Run the command from that directory so
+the relative config paths resolve:
+
+```bash
+cd pours/deployment
+docker compose up -d                        # Compose
+docker stack deploy -c compose.yaml signoz  # Swarm
+```
+
+## Verify
+
+- All SigNoz containers are running.
+- The UI is reachable on `http://localhost:8080`, and OTLP on `4317` (gRPC)
+  and `4318` (HTTP), so already-instrumented apps and saved bookmarks keep
+  working.
+- Your existing data is present in the UI, and new data is being ingested.
+- ClickHouse and ZooKeeper logs show no errors.
+
+## Roll back
+
+Step 5 left your volumes untouched, so your data is intact. To return to the
+previous setup:
+
+1. Bring down the Foundry deployment (`docker compose down` or
+   `docker stack rm signoz`, again without `-v`).
+2. Confirm the containers are gone with `docker ps -a`.
+3. Re-apply your backed-up stack: `docker compose up -d` (Compose) or
+   `docker stack deploy -c docker-compose.yaml signoz` (Swarm). It reattaches
+   the same volumes and restores your prior state.
 
 ## Troubleshooting
-- Please reach out to our community on [Slack](https://signoz.io/slack).
+
+If the migration runs into trouble, reach out on [Slack][slack] or open a
+[Foundry issue][foundry-issues].
 
 ## References
-- [SigNoz Docker installation docs](https://signoz.io/docs/install/docker/)
-- [SigNoz documentation](https://signoz.io/docs)
-- [Foundry](https://github.com/SigNoz/foundry)
+
+- [Foundry][foundry]
+- [Casting file reference][casting-ref]
+- [Custom config files][custom-config]
+- [Patches][patches]
+- [SigNoz documentation][signoz-docs]
+
+[foundry]: https://github.com/SigNoz/foundry
+[install-docs]: https://signoz.io/docs/install/
+[compose-example]: https://github.com/SigNoz/foundry/tree/main/docs/examples/docker/compose
+[patches]: https://github.com/SigNoz/foundry/blob/main/docs/concepts/patches.md
+[custom-config]: https://github.com/SigNoz/foundry/blob/main/docs/concepts/moldings.md#custom-config-files
+[env-vars]: https://github.com/SigNoz/foundry/blob/main/docs/reference/casting-file.md#molding-spec
+[casting-ref]: https://github.com/SigNoz/foundry/blob/main/docs/reference/casting-file.md
+[ch-config]: https://clickhouse.com/docs/operations/configuration-files
+[upgrade-path]: https://signoz.io/docs/operate/upgrade/
+[slack]: https://signoz.io/slack
+[foundry-issues]: https://github.com/SigNoz/foundry/issues
+[signoz-docs]: https://signoz.io/docs

ee/modules/metricreductionrule/implmetricreductionrule/clickhouse.go

@@ -1,521 +0,0 @@
-package implmetricreductionrule
-
-import (
-	"context"
-	"slices"
-	"time"
-
-	sqlbuilder "github.com/huandu/go-sqlbuilder"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
-	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
-	"github.com/SigNoz/signoz/pkg/types/metrictypes"
-)
-
-var (
-	reductionRulesTable = telemetrymetrics.DBName + "." + telemetrymetrics.ReductionRulesTableName
-	metadataTable       = telemetrymetrics.DBName + "." + telemetrymetrics.AttributesMetadataTableName
-	timeseriesTable     = telemetrymetrics.DBName + "." + telemetrymetrics.TimeseriesV4TableName
-)
-
-type volumeRow struct {
-	MetricName string
-	Ingested   uint64
-	Reduced    uint64
-}
-
-type volumePoint struct {
-	TimestampMs int64
-	Ingested    uint64
-	Reduced     uint64
-}
-
-type clickhouse struct {
-	telemetryStore telemetrystore.TelemetryStore
-	threads        int
-}
-
-func newClickhouse(telemetryStore telemetrystore.TelemetryStore, threads int) *clickhouse {
-	return &clickhouse{telemetryStore: telemetryStore, threads: threads}
-}
-
-func (c *clickhouse) withThreads(ctx context.Context) context.Context {
-	return ctxtypes.SetClickhouseMaxThreads(ctx, c.threads)
-}
-
-const timeSeriesBucketMilli = int64(time.Hour / time.Millisecond)
-
-// floorToTimeSeriesBucket rounds the start down to the hour, since unix_milli is hour-bucketed.
-func floorToTimeSeriesBucket(ms int64) int64 {
-	return ms - (ms % timeSeriesBucketMilli)
-}
-
-// effectiveFromGate restricts ingested rows to on/after each metric's effective_from (floored to the
-// hour) so a rule's pre-activation history isn't counted as reduced. A missing entry gates at 0.
-func effectiveFromGate(sb *sqlbuilder.SelectBuilder, metricNames []string, effectiveFrom map[string]int64) string {
-	names := make([]any, 0, len(metricNames))
-	floors := make([]any, 0, len(metricNames))
-	for _, name := range metricNames {
-		names = append(names, name)
-		floors = append(floors, floorToTimeSeriesBucket(effectiveFrom[name]))
-	}
-	return "unix_milli >= transform(metric_name, " + sb.Var(names) + ", " + sb.Var(floors) + ", 0)"
-}
-
-func (c *clickhouse) Sync(ctx context.Context, metricName string, labels []string, matchType string, effectiveFromMs int64, deleted bool, updatedAt time.Time) error {
-	ctx = c.withThreads(ctx)
-
-	ib := sqlbuilder.NewInsertBuilder()
-	ib.InsertInto(reductionRulesTable)
-	ib.Cols("metric_name", "labels", "match_type", "effective_from_unix_milli", "deleted", "updated_at")
-	ib.Values(metricName, labels, matchType, effectiveFromMs, deleted, updatedAt)
-
-	query, args := ib.BuildWithFlavor(sqlbuilder.ClickHouse)
-	if err := c.telemetryStore.ClickhouseDB().Exec(ctx, query, args...); err != nil {
-		return errors.WrapInternalf(err, errors.CodeInternal, "failed to sync reduction rule to clickhouse")
-	}
-	return nil
-}
-
-func (c *clickhouse) MetricExists(ctx context.Context, metricName string) (bool, error) {
-	ctx = c.withThreads(ctx)
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("count(*) > 0")
-	sb.From(metadataTable)
-	sb.Where(sb.E("metric_name", metricName))
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	var exists bool
-	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&exists); err != nil {
-		return false, errors.WrapInternalf(err, errors.CodeInternal, "failed to check metric existence")
-	}
-	return exists, nil
-}
-
-func (c *clickhouse) IsExponentialHistogram(ctx context.Context, metricName string) (bool, error) {
-	ctx = c.withThreads(ctx)
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("count(*) > 0")
-	sb.From(timeseriesTable)
-	sb.Where(sb.E("metric_name", metricName), sb.E("type", metrictypes.ExpHistogramType.StringValue()))
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	var isExpHist bool
-	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&isExpHist); err != nil {
-		return false, errors.WrapInternalf(err, errors.CodeInternal, "failed to check metric type")
-	}
-	return isExpHist, nil
-}
-
-func (c *clickhouse) AttributeKeys(ctx context.Context, metricName string, startMs, endMs int64) ([]string, error) {
-	ctx = c.withThreads(ctx)
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("attr_name")
-	sb.Distinct()
-	sb.From(metadataTable)
-	sb.Where(
-		sb.E("metric_name", metricName),
-		"NOT startsWith(attr_name, '__')",
-		sb.GE("last_reported_unix_milli", startMs),
-		sb.LE("first_reported_unix_milli", endMs),
-	)
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
-	if err != nil {
-		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to fetch metric attribute keys")
-	}
-	defer rows.Close()
-
-	keys := make([]string, 0)
-	for rows.Next() {
-		var key string
-		if err := rows.Scan(&key); err != nil {
-			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan attribute key")
-		}
-		keys = append(keys, key)
-	}
-	return keys, rows.Err()
-}
-
-func (c *clickhouse) tableExists(ctx context.Context, distributedTableName string) bool {
-	var exists bool
-	query := "SELECT count() > 0 FROM system.tables WHERE database = ? AND name = ?"
-	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, telemetrymetrics.DBName, distributedTableName).Scan(&exists); err != nil {
-		return false
-	}
-	return exists
-}
-
-func (c *clickhouse) originalSeriesSource(ctx context.Context) (table string, originalOnly bool) {
-	if c.tableExists(ctx, telemetrymetrics.TimeseriesV4BufferTableName) {
-		return telemetrymetrics.DBName + "." + telemetrymetrics.TimeseriesV4BufferTableName, true
-	}
-	return telemetrymetrics.DBName + "." + telemetrymetrics.TimeseriesV4TableName, false
-}
-
-func (c *clickhouse) EstimateCardinality(ctx context.Context, metricName string, keptLabels []string, startMs, endMs int64) (uint64, uint64, error) {
-	ctx = c.withThreads(ctx)
-	table, originalOnly := c.originalSeriesSource(ctx)
-	startMs = floorToTimeSeriesBucket(startMs)
-
-	sb := sqlbuilder.NewSelectBuilder()
-
-	reducedExpr := "1"
-	if len(keptLabels) > 0 {
-		reducedExpr = "uniq(("
-		for i, label := range keptLabels {
-			if i > 0 {
-				reducedExpr += ", "
-			}
-			reducedExpr += "JSONExtractString(labels, " + sb.Var(label) + ")"
-		}
-		reducedExpr += "))"
-	}
-
-	sb.Select("uniq(fingerprint)", reducedExpr)
-	sb.From(table)
-	conds := []string{
-		sb.E("metric_name", metricName),
-		sb.GE("unix_milli", startMs),
-		sb.LT("unix_milli", endMs),
-	}
-	if originalOnly {
-		conds = append(conds, sb.E("is_reduced", false))
-	}
-	sb.Where(conds...)
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	var current, reduced uint64
-	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&current, &reduced); err != nil {
-		return 0, 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to estimate reduction impact")
-	}
-	if len(keptLabels) == 0 && current == 0 {
-		reduced = 0
-	}
-	if reduced > current {
-		reduced = current
-	}
-	return current, reduced, nil
-}
-
-func (c *clickhouse) VolumeByMetric(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]volumeRow, error) {
-	if len(metricNames) == 0 {
-		return map[string]volumeRow{}, nil
-	}
-	ctx = c.withThreads(ctx)
-
-	ingestedTable, originalOnly := c.originalSeriesSource(ctx)
-	ingested, err := c.countSeries(ctx, ingestedTable, originalOnly, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	reduced := ingested
-	if c.tableExists(ctx, telemetrymetrics.TimeseriesV4ReducedTableName) {
-		reduced, err = c.countSeries(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.TimeseriesV4ReducedTableName, false, metricNames, effectiveFrom, startMs, endMs)
-		if err != nil {
-			return nil, err
-		}
-	}
-
-	out := make(map[string]volumeRow, len(metricNames))
-	for metricName, count := range ingested {
-		out[metricName] = volumeRow{MetricName: metricName, Ingested: count, Reduced: out[metricName].Reduced}
-	}
-	for metricName, count := range reduced {
-		row := out[metricName]
-		row.MetricName = metricName
-		row.Reduced = count
-		out[metricName] = row
-	}
-	return out, nil
-}
-
-func (c *clickhouse) countSeries(ctx context.Context, table string, originalOnly bool, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]uint64, error) {
-	startMs = floorToTimeSeriesBucket(startMs)
-	names := make([]any, len(metricNames))
-	for i, name := range metricNames {
-		names[i] = name
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("metric_name", "uniq(fingerprint)")
-	sb.From(table)
-	conds := []string{
-		sb.In("metric_name", names...),
-		sb.GE("unix_milli", startMs),
-		sb.LT("unix_milli", endMs),
-	}
-	if originalOnly {
-		conds = append(conds, sb.E("is_reduced", false))
-	}
-	if len(effectiveFrom) > 0 {
-		conds = append(conds, effectiveFromGate(sb, metricNames, effectiveFrom))
-	}
-	sb.Where(conds...)
-	sb.GroupBy("metric_name")
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
-	if err != nil {
-		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to count metric series")
-	}
-	defer rows.Close()
-
-	out := make(map[string]uint64, len(metricNames))
-	for rows.Next() {
-		var (
-			metricName string
-			count      uint64
-		)
-		if err := rows.Scan(&metricName, &count); err != nil {
-			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan series count")
-		}
-		out[metricName] = count
-	}
-	return out, rows.Err()
-}
-
-func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, orderBy metricreductionruletypes.ReductionRuleOrderBy, order metricreductionruletypes.Order, startMs, endMs int64, offset, limit int) ([]volumeRow, error) {
-	if len(metricNames) == 0 {
-		return []volumeRow{}, nil
-	}
-	ctx = c.withThreads(ctx)
-
-	ingestedTable, originalOnly := c.originalSeriesSource(ctx)
-	reducedPresent := c.tableExists(ctx, telemetrymetrics.TimeseriesV4ReducedTableName)
-	startMs = floorToTimeSeriesBucket(startMs)
-
-	orderExpr := "ingested"
-	switch orderBy {
-	case metricreductionruletypes.OrderByReducedVolume:
-		orderExpr = "reduced"
-	case metricreductionruletypes.OrderByReduction:
-		orderExpr = "if(ingested = 0, 0, (toFloat64(ingested) - toFloat64(reduced)) / toFloat64(ingested))"
-	}
-	direction := "ASC"
-	if order == metricreductionruletypes.OrderDesc {
-		direction = "DESC"
-	}
-
-	ingestedFilter := ""
-	if originalOnly {
-		ingestedFilter = "is_reduced = false AND "
-	}
-	reducedSelect := "ifNull(i.cnt, 0) AS reduced"
-	if reducedPresent {
-		reducedSelect = "ifNull(d.cnt, 0) AS reduced"
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("base.metric_name AS metric_name", "ifNull(i.cnt, 0) AS ingested", reducedSelect)
-	sb.From("(SELECT arrayJoin(" + sb.Var(metricNames) + ") AS metric_name) AS base")
-	sb.JoinWithOption(
-		sqlbuilder.LeftJoin,
-		"(SELECT metric_name, uniq(fingerprint) AS cnt FROM "+ingestedTable+" WHERE has("+sb.Var(metricNames)+", metric_name) AND "+ingestedFilter+"unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+effectiveFromGate(sb, metricNames, effectiveFrom)+" GROUP BY metric_name) AS i",
-		"base.metric_name = i.metric_name",
-	)
-	if reducedPresent {
-		reducedTable := telemetrymetrics.DBName + "." + telemetrymetrics.TimeseriesV4ReducedTableName
-		sb.JoinWithOption(
-			sqlbuilder.LeftJoin,
-			"(SELECT metric_name, uniq(fingerprint) AS cnt FROM "+reducedTable+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+effectiveFromGate(sb, metricNames, effectiveFrom)+" GROUP BY metric_name) AS d",
-			"base.metric_name = d.metric_name",
-		)
-	}
-	sb.OrderBy(orderExpr + " " + direction)
-	if limit > 0 {
-		sb.Limit(limit).Offset(offset)
-	}
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
-	if err != nil {
-		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to rank reduction rules by volume")
-	}
-	defer rows.Close()
-
-	out := make([]volumeRow, 0, len(metricNames))
-	for rows.Next() {
-		var row volumeRow
-		if err := rows.Scan(&row.MetricName, &row.Ingested, &row.Reduced); err != nil {
-			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan volume row")
-		}
-		out = append(out, row)
-	}
-	return out, rows.Err()
-}
-
-func (c *clickhouse) SampleVolume(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, uint64, error) {
-	if len(metricNames) == 0 {
-		return 0, 0, nil
-	}
-	if !c.tableExists(ctx, telemetrymetrics.SamplesV4BufferTableName) ||
-		!c.tableExists(ctx, telemetrymetrics.SamplesV4ReducedLastTableName) ||
-		!c.tableExists(ctx, telemetrymetrics.SamplesV4ReducedSumTableName) {
-		return 0, 0, nil
-	}
-	ctx = c.withThreads(ctx)
-
-	ingested, err := c.countRawSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4BufferTableName, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return 0, 0, err
-	}
-
-	last, err := c.countReducedSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedLastTableName, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return 0, 0, err
-	}
-	sum, err := c.countReducedSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedSumTableName, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return 0, 0, err
-	}
-
-	return ingested, min(last+sum, ingested), nil
-}
-
-func (c *clickhouse) countRawSamples(ctx context.Context, table string, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, error) {
-	names := make([]any, len(metricNames))
-	for i, name := range metricNames {
-		names[i] = name
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("count()")
-	sb.From(table)
-	conds := []string{sb.In("metric_name", names...), sb.E("reduced_fingerprint", 0), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
-	if len(effectiveFrom) > 0 {
-		conds = append(conds, effectiveFromGate(sb, metricNames, effectiveFrom))
-	}
-	sb.Where(conds...)
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	var count uint64
-	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&count); err != nil {
-		return 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to count ingested samples")
-	}
-	return count, nil
-}
-
-func (c *clickhouse) countReducedSamples(ctx context.Context, table string, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, error) {
-	names := make([]any, len(metricNames))
-	for i, name := range metricNames {
-		names[i] = name
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	// Reduced tables key the series on reduced_fingerprint (not fingerprint); dedupe ReplacingMergeTree recomputes.
-	sb.Select("uniq(reduced_fingerprint, unix_milli)")
-	sb.From(table)
-	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
-	if len(effectiveFrom) > 0 {
-		conds = append(conds, effectiveFromGate(sb, metricNames, effectiveFrom))
-	}
-	sb.Where(conds...)
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	var count uint64
-	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&count); err != nil {
-		return 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to count reduced samples")
-	}
-	return count, nil
-}
-
-// SeriesTimeseries returns ingested vs reduced series per hourly bucket; ingested is gated to each
-// metric's effective_from (see effectiveFromGate).
-func (c *clickhouse) SeriesTimeseries(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) ([]volumePoint, error) {
-	if len(metricNames) == 0 {
-		return []volumePoint{}, nil
-	}
-	ctx = c.withThreads(ctx)
-	startMs = floorToTimeSeriesBucket(startMs)
-
-	ingestedTable, originalOnly := c.originalSeriesSource(ctx)
-	ingested, err := c.seriesByBucket(ctx, ingestedTable, originalOnly, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	reduced := ingested
-	if c.tableExists(ctx, telemetrymetrics.TimeseriesV4ReducedTableName) {
-		reduced, err = c.seriesByBucket(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.TimeseriesV4ReducedTableName, false, metricNames, effectiveFrom, startMs, endMs)
-		if err != nil {
-			return nil, err
-		}
-	}
-
-	return mergeVolumePoints(ingested, reduced), nil
-}
-
-// mergeVolumePoints unions two per-bucket maps into a single time-ordered series of points.
-func mergeVolumePoints(ingested, reduced map[int64]uint64) []volumePoint {
-	buckets := make(map[int64]struct{}, len(ingested))
-	for ts := range ingested {
-		buckets[ts] = struct{}{}
-	}
-	for ts := range reduced {
-		buckets[ts] = struct{}{}
-	}
-	timestamps := make([]int64, 0, len(buckets))
-	for ts := range buckets {
-		timestamps = append(timestamps, ts)
-	}
-	slices.Sort(timestamps)
-
-	points := make([]volumePoint, 0, len(timestamps))
-	for _, ts := range timestamps {
-		points = append(points, volumePoint{
-			TimestampMs: ts,
-			Ingested:    ingested[ts],
-			Reduced:     reduced[ts],
-		})
-	}
-	return points
-}
-
-func (c *clickhouse) seriesByBucket(ctx context.Context, table string, originalOnly bool, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
-	names := make([]any, len(metricNames))
-	for i, name := range metricNames {
-		names[i] = name
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("unix_milli", "uniq(fingerprint)")
-	sb.From(table)
-	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
-	if originalOnly {
-		conds = append(conds, sb.E("is_reduced", false))
-	}
-	if len(effectiveFrom) > 0 {
-		conds = append(conds, effectiveFromGate(sb, metricNames, effectiveFrom))
-	}
-	sb.Where(conds...)
-	sb.GroupBy("unix_milli")
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
-	if err != nil {
-		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to bucket series by time")
-	}
-	defer rows.Close()
-
-	out := make(map[int64]uint64)
-	for rows.Next() {
-		var (
-			ts    int64
-			count uint64
-		)
-		if err := rows.Scan(&ts, &count); err != nil {
-			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan series bucket")
-		}
-		out[ts] = count
-	}
-	return out, rows.Err()
-}

ee/modules/metricreductionrule/implmetricreductionrule/module.go

@@ -1,613 +0,0 @@
-package implmetricreductionrule
-
-import (
-	"context"
-	"log/slog"
-	"sort"
-	"strings"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/flagger"
-	"github.com/SigNoz/signoz/pkg/licensing"
-	"github.com/SigNoz/signoz/pkg/modules/dashboard"
-	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule"
-	"github.com/SigNoz/signoz/pkg/queryparser"
-	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/types/featuretypes"
-	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
-	"github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/types/ruletypes"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-const (
-	// effectiveFromMargin delays effective_from so the collector picks up the synced rule before it
-	// goes live; it must be >= the collector's rule-refresh interval (signoz-otel-collector#839).
-	effectiveFromMargin    = 5 * time.Minute
-	defaultPreviewLookback = 24 * time.Hour
-
-	// pricePerMillionSamplesUSD is the metrics list price (samples are the billed unit).
-	pricePerMillionSamplesUSD = 0.1
-	monthDuration             = 30 * 24 * time.Hour
-)
-
-type module struct {
-	store     metricreductionruletypes.Store
-	ch        *clickhouse
-	dashboard dashboard.Module
-	ruleStore ruletypes.RuleStore
-	licensing licensing.Licensing
-	flagger   flagger.Flagger
-	logger    *slog.Logger
-}
-
-func NewModule(sqlStore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, dashboardModule dashboard.Module, queryParser queryparser.QueryParser, licensing licensing.Licensing, flagger flagger.Flagger, providerSettings factory.ProviderSettings, threads int) metricreductionrule.Module {
-	scoped := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/ee/modules/metricreductionrule/implmetricreductionrule")
-	return &module{
-		store:     NewStore(sqlStore),
-		ch:        newClickhouse(telemetryStore, threads),
-		dashboard: dashboardModule,
-		ruleStore: sqlrulestore.NewRuleStore(sqlStore, queryParser, providerSettings),
-		licensing: licensing,
-		flagger:   flagger,
-		logger:    scoped.Logger(),
-	}
-}
-
-func (m *module) checkAccess(ctx context.Context, orgID valuer.UUID) error {
-	if !m.flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableMetricsReduction, featuretypes.NewFlaggerEvaluationContext(orgID)) {
-		return errors.Newf(errors.TypeUnsupported, metricreductionruletypes.ErrCodeMetricReductionRuleUnsupported, "metric volume control is not enabled")
-	}
-	return nil
-	if _, err := m.licensing.GetActive(ctx, orgID); err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "metric volume control requires a valid license").WithAdditional(err.Error())
-	}
-	return nil
-}
-
-func (m *module) List(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams) (*metricreductionruletypes.GettableReductionRules, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-	if err := params.Validate(); err != nil {
-		return nil, err
-	}
-
-	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
-	endMs := now.UnixMilli()
-
-	switch params.OrderBy {
-	case metricreductionruletypes.OrderByMetricName, metricreductionruletypes.OrderByLastUpdated:
-		return m.listSortedByColumn(ctx, orgID, params, startMs, endMs)
-	default:
-		return m.listSortedByVolume(ctx, orgID, params, startMs, endMs)
-	}
-}
-
-func (m *module) listSortedByColumn(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams, startMs, endMs int64) (*metricreductionruletypes.GettableReductionRules, error) {
-	domainRules, total, err := m.store.List(ctx, orgID, params)
-	if err != nil {
-		return nil, err
-	}
-
-	metricNames := make([]string, len(domainRules))
-	effectiveFrom := make(map[string]int64, len(domainRules))
-	for i, rule := range domainRules {
-		metricNames[i] = rule.MetricName
-		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
-	}
-	volumes, err := m.ch.VolumeByMetric(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	rules := make([]metricreductionruletypes.GettableReductionRule, 0, len(domainRules))
-	for _, rule := range domainRules {
-		rules = append(rules, withVolume(toGettableReductionRule(rule), volumes[rule.MetricName]))
-	}
-
-	return &metricreductionruletypes.GettableReductionRules{Rules: rules, Total: total}, nil
-}
-
-func (m *module) listSortedByVolume(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams, startMs, endMs int64) (*metricreductionruletypes.GettableReductionRules, error) {
-	allRules, total, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{Search: params.Search})
-	if err != nil {
-		return nil, err
-	}
-	if total == 0 {
-		return &metricreductionruletypes.GettableReductionRules{Rules: []metricreductionruletypes.GettableReductionRule{}, Total: 0}, nil
-	}
-
-	metricNames := make([]string, len(allRules))
-	effectiveFrom := make(map[string]int64, len(allRules))
-	ruleByMetric := make(map[string]*metricreductionruletypes.StorableReductionRule, len(allRules))
-	for i, rule := range allRules {
-		metricNames[i] = rule.MetricName
-		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
-		ruleByMetric[rule.MetricName] = rule
-	}
-
-	ranked, err := m.ch.RankByVolume(ctx, metricNames, effectiveFrom, params.OrderBy, params.Order, startMs, endMs, params.Offset, params.Limit)
-	if err != nil {
-		return nil, err
-	}
-
-	rules := make([]metricreductionruletypes.GettableReductionRule, 0, len(ranked))
-	for _, row := range ranked {
-		rule, ok := ruleByMetric[row.MetricName]
-		if !ok {
-			continue
-		}
-		rules = append(rules, withVolume(toGettableReductionRule(rule), row))
-	}
-
-	return &metricreductionruletypes.GettableReductionRules{Rules: rules, Total: total}, nil
-}
-
-func (m *module) Get(ctx context.Context, orgID valuer.UUID, metricName string) (*metricreductionruletypes.GettableReductionRule, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-	if metricName == "" {
-		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "metricName is required")
-	}
-
-	rule, err := m.store.Get(ctx, orgID, metricName)
-	if err != nil {
-		return nil, err
-	}
-
-	now := time.Now()
-	current, reduced, reductionPercent, _, err := m.estimateVolume(ctx, rule.MetricName, rule.MatchType, rule.Labels, now.Add(-defaultPreviewLookback).UnixMilli(), now.UnixMilli())
-	if err != nil {
-		return nil, err
-	}
-	gettable := toGettableReductionRule(rule)
-	gettable.IngestedSeries = current
-	gettable.ReducedSeries = reduced
-	gettable.ReductionPercent = reductionPercent
-	return &gettable, nil
-}
-
-func (m *module) Upsert(ctx context.Context, orgID valuer.UUID, userEmail string, req *metricreductionruletypes.PostableReductionRule) (*metricreductionruletypes.GettableReductionRule, error) {
-	return m.writeRule(ctx, orgID, userEmail, req, false)
-}
-
-// writeRule validates, persists (create inserts, else upserts), and syncs the rule to ClickHouse.
-func (m *module) writeRule(ctx context.Context, orgID valuer.UUID, userEmail string, req *metricreductionruletypes.PostableReductionRule, create bool) (*metricreductionruletypes.GettableReductionRule, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-	if err := req.Validate(); err != nil {
-		return nil, err
-	}
-	// Reducibility is only checked when creating; an existing rule stays editable even if its metric stopped reporting.
-	needsMetricCheck := create
-	if !create {
-		if _, err := m.store.Get(ctx, orgID, req.MetricName); err != nil {
-			needsMetricCheck = true
-		}
-	}
-	if needsMetricCheck {
-		if err := m.validateMetricForReduction(ctx, req.MetricName); err != nil {
-			return nil, err
-		}
-	}
-	now := time.Now()
-	rule := metricreductionruletypes.NewReductionRule(orgID, req.MetricName, req.MatchType, req.Labels, now.Add(effectiveFromMargin), userEmail)
-
-	persist := m.store.Upsert
-	if create {
-		persist = m.store.Create
-	}
-	if err := m.store.RunInTx(ctx, func(ctx context.Context) error {
-		if err := persist(ctx, rule); err != nil {
-			return err
-		}
-		return m.ch.Sync(ctx, rule.MetricName, rule.Labels, rule.MatchType.StringValue(), rule.EffectiveFrom.UnixMilli(), false, rule.UpdatedAt)
-	}); err != nil {
-		return nil, err
-	}
-
-	gettable := toGettableReductionRule(rule)
-	return &gettable, nil
-}
-
-func (m *module) Delete(ctx context.Context, orgID valuer.UUID, metricName string) error {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return err
-	}
-	if metricName == "" {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "metricName is required")
-	}
-
-	now := time.Now()
-	effectiveFromMs := now.Add(effectiveFromMargin).UnixMilli()
-	return m.store.RunInTx(ctx, func(ctx context.Context) error {
-		if err := m.store.Delete(ctx, orgID, metricName); err != nil {
-			return err
-		}
-		return m.ch.Sync(ctx, metricName, []string{}, metricreductionruletypes.MatchTypeDrop.StringValue(), effectiveFromMs, true, now)
-	})
-}
-
-// Create inserts a new rule (Terraform/operators), returning AlreadyExists if the metric already has one.
-func (m *module) Create(ctx context.Context, orgID valuer.UUID, userEmail string, req *metricreductionruletypes.PostableReductionRule) (*metricreductionruletypes.GettableReductionRule, error) {
-	return m.writeRule(ctx, orgID, userEmail, req, true)
-}
-
-func (m *module) GetByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*metricreductionruletypes.GettableReductionRule, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-	rule, err := m.store.GetByID(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-	gettable := toGettableReductionRule(rule)
-	return &gettable, nil
-}
-
-func (m *module) UpdateByID(ctx context.Context, orgID valuer.UUID, userEmail string, id valuer.UUID, req *metricreductionruletypes.PostableReductionRule) (*metricreductionruletypes.GettableReductionRule, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-	existing, err := m.store.GetByID(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-	// metricName is immutable; an id always addresses the same metric.
-	req.MetricName = existing.MetricName
-	if err := req.Validate(); err != nil {
-		return nil, err
-	}
-	// Update in place to preserve the id and create-audit; the metric isn't re-validated so a rule
-	// stays editable even if its metric stopped reporting.
-	now := time.Now()
-	existing.MatchType = req.MatchType
-	existing.Labels = metricreductionruletypes.LabelList(req.Labels)
-	existing.EffectiveFrom = now.Add(effectiveFromMargin)
-	existing.UpdatedAt = now
-	existing.UpdatedBy = userEmail
-
-	if err := m.store.RunInTx(ctx, func(ctx context.Context) error {
-		if err := m.store.Upsert(ctx, existing); err != nil {
-			return err
-		}
-		return m.ch.Sync(ctx, existing.MetricName, existing.Labels, existing.MatchType.StringValue(), existing.EffectiveFrom.UnixMilli(), false, existing.UpdatedAt)
-	}); err != nil {
-		return nil, err
-	}
-
-	gettable := toGettableReductionRule(existing)
-	return &gettable, nil
-}
-
-func (m *module) DeleteByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return err
-	}
-	rule, err := m.store.GetByID(ctx, orgID, id)
-	if err != nil {
-		return err
-	}
-
-	now := time.Now()
-	effectiveFromMs := now.Add(effectiveFromMargin).UnixMilli()
-	return m.store.RunInTx(ctx, func(ctx context.Context) error {
-		if err := m.store.DeleteByID(ctx, orgID, id); err != nil {
-			return err
-		}
-		return m.ch.Sync(ctx, rule.MetricName, []string{}, metricreductionruletypes.MatchTypeDrop.StringValue(), effectiveFromMs, true, now)
-	})
-}
-
-func (m *module) Preview(ctx context.Context, orgID valuer.UUID, req *metricreductionruletypes.PostableReductionRulePreview) (*metricreductionruletypes.GettableReductionRulePreview, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-	if err := req.Validate(); err != nil {
-		return nil, err
-	}
-	if err := m.validateMetricForReduction(ctx, req.MetricName); err != nil {
-		return nil, err
-	}
-	lookback := time.Duration(req.LookbackMs) * time.Millisecond
-	if lookback <= 0 {
-		lookback = defaultPreviewLookback
-	}
-	now := time.Now()
-	startMs := now.Add(-lookback).UnixMilli()
-	endMs := now.UnixMilli()
-	current, reduced, reductionPercent, dropped, err := m.estimateVolume(ctx, req.MetricName, req.MatchType, req.Labels, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	// Baseline is what the metric keeps today (its current rule, or raw if none) so the preview reads
-	// as current -> proposed.
-	currentReduced := current
-	if existing, gerr := m.store.Get(ctx, orgID, req.MetricName); gerr == nil {
-		if _, existingReduced, _, _, eerr := m.estimateVolume(ctx, req.MetricName, existing.MatchType, existing.Labels, startMs, endMs); eerr == nil {
-			currentReduced = existingReduced
-		}
-	}
-
-	return &metricreductionruletypes.GettableReductionRulePreview{
-		IngestedSeries:       current,
-		CurrentReducedSeries: currentReduced,
-		ReducedSeries:        reduced,
-		ReductionPercent:     reductionPercent,
-		DroppedLabels:        dropped,
-		AffectedAssets:       m.relatedAssetImpact(ctx, orgID, req.MetricName, dropped),
-		EffectiveFrom:        now.Add(effectiveFromMargin),
-	}, nil
-}
-
-func (m *module) Stats(ctx context.Context, orgID valuer.UUID) (*metricreductionruletypes.GettableReductionRuleStats, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-
-	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
-	endMs := now.UnixMilli()
-
-	allRules, total, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
-	if err != nil {
-		return nil, err
-	}
-	if total == 0 {
-		return &metricreductionruletypes.GettableReductionRuleStats{}, nil
-	}
-
-	metricNames := make([]string, len(allRules))
-	effectiveFrom := make(map[string]int64, len(allRules))
-	for i, rule := range allRules {
-		metricNames[i] = rule.MetricName
-		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
-	}
-
-	volumes, err := m.ch.VolumeByMetric(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-	var ingestedSeries, reducedSeries uint64
-	for _, volume := range volumes {
-		ingestedSeries += volume.Ingested
-		reducedSeries += volume.Reduced
-	}
-
-	ingestedSamples, reducedSamples, err := m.ch.SampleVolume(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	return &metricreductionruletypes.GettableReductionRuleStats{
-		IngestedSeries:             ingestedSeries,
-		ReducedSeries:              reducedSeries,
-		EstimatedMonthlySavingsUsd: monthlySavingsUSD(ingestedSamples, reducedSamples, startMs, endMs),
-	}, nil
-}
-
-// monthlySavingsUSD extrapolates the windowed sample reduction to a monthly figure at the per-sample
-// list price. Ingested is gated to effective_from upstream, so pre-activation hours don't inflate it.
-func monthlySavingsUSD(ingestedSamples, reducedSamples uint64, startMs, endMs int64) float64 {
-	if reducedSamples >= ingestedSamples || endMs <= startMs {
-		return 0
-	}
-	savedSamples := float64(ingestedSamples - reducedSamples)
-	monthlySamples := savedSamples * float64(monthDuration.Milliseconds()) / float64(endMs-startMs)
-	return monthlySamples / 1_000_000 * pricePerMillionSamplesUSD
-}
-
-func (m *module) Timeseries(ctx context.Context, orgID valuer.UUID) (*querybuildertypesv5.QueryRangeResponse, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-
-	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
-	endMs := now.UnixMilli()
-
-	allRules, _, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
-	if err != nil {
-		return nil, err
-	}
-	metricNames := make([]string, len(allRules))
-	effectiveFrom := make(map[string]int64, len(allRules))
-	for i, rule := range allRules {
-		metricNames[i] = rule.MetricName
-		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
-	}
-
-	points, err := m.ch.SeriesTimeseries(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	return buildVolumeTimeseries(points), nil
-}
-
-func buildVolumeTimeseries(points []volumePoint) *querybuildertypesv5.QueryRangeResponse {
-	ingested := make([]*querybuildertypesv5.TimeSeriesValue, 0, len(points))
-	reduced := make([]*querybuildertypesv5.TimeSeriesValue, 0, len(points))
-	for _, point := range points {
-		ingested = append(ingested, &querybuildertypesv5.TimeSeriesValue{Timestamp: point.TimestampMs, Value: float64(point.Ingested)})
-		reduced = append(reduced, &querybuildertypesv5.TimeSeriesValue{Timestamp: point.TimestampMs, Value: float64(point.Reduced)})
-	}
-
-	return &querybuildertypesv5.QueryRangeResponse{
-		Type: querybuildertypesv5.RequestTypeTimeSeries,
-		Data: querybuildertypesv5.QueryData{
-			Results: []any{
-				&querybuildertypesv5.TimeSeriesData{
-					QueryName: "reduction_volume",
-					Aggregations: []*querybuildertypesv5.AggregationBucket{
-						{
-							Series: []*querybuildertypesv5.TimeSeries{
-								{Labels: []*querybuildertypesv5.Label{{Key: telemetrytypes.TelemetryFieldKey{Name: "series"}, Value: "ingested"}}, Values: ingested},
-								{Labels: []*querybuildertypesv5.Label{{Key: telemetrytypes.TelemetryFieldKey{Name: "series"}, Value: "reduced"}}, Values: reduced},
-							},
-						},
-					},
-				},
-			},
-		},
-	}
-}
-
-func (m *module) validateMetricForReduction(ctx context.Context, metricName string) error {
-	exists, err := m.ch.MetricExists(ctx, metricName)
-	if err != nil {
-		return err
-	}
-	if !exists {
-		return errors.NewNotFoundf(errors.CodeNotFound, "metric not found: %q", metricName)
-	}
-
-	isExpHist, err := m.ch.IsExponentialHistogram(ctx, metricName)
-	if err != nil {
-		return err
-	}
-	if isExpHist {
-		return errors.Newf(errors.TypeInvalidInput, metricreductionruletypes.ErrCodeMetricReductionRuleUnsupportedMetricType,
-			"exponential histogram metrics cannot be reduced in v1")
-	}
-	return nil
-}
-
-func (m *module) relatedAssetImpact(ctx context.Context, orgID valuer.UUID, metricName string, dropped []string) []metricreductionruletypes.AffectedAsset {
-	affected := make([]metricreductionruletypes.AffectedAsset, 0)
-	droppedSet := make(map[string]struct{}, len(dropped))
-	for _, label := range dropped {
-		droppedSet[label] = struct{}{}
-	}
-
-	if dashboards, err := m.dashboard.GetByMetricNames(ctx, orgID, []string{metricName}); err != nil {
-		m.logger.WarnContext(ctx, "failed to fetch related dashboards for reduction preview", slog.String("metric_name", metricName), errors.Attr(err))
-	} else {
-		for _, item := range dashboards[metricName] {
-			usedLabels := append(splitCSV(item["group_by"]), splitCSV(item["filter_by"])...)
-			affected = append(affected, metricreductionruletypes.AffectedAsset{
-				Type:           metricreductionruletypes.AssetTypeDashboard,
-				ID:             item["dashboard_id"],
-				Name:           item["dashboard_name"],
-				Widget:         item["widget_name"],
-				WidgetID:       item["widget_id"],
-				ImpactedLabels: intersectLabels(usedLabels, droppedSet),
-			})
-		}
-	}
-
-	if alerts, err := m.ruleStore.GetStoredRulesByMetricName(ctx, orgID.String(), metricName); err != nil {
-		m.logger.WarnContext(ctx, "failed to fetch related alerts for reduction preview", slog.String("metric_name", metricName), errors.Attr(err))
-	} else {
-		for _, a := range alerts {
-			affected = append(affected, metricreductionruletypes.AffectedAsset{
-				Type: metricreductionruletypes.AssetTypeAlert,
-				ID:   a.AlertID,
-				Name: a.AlertName,
-			})
-		}
-	}
-
-	return affected
-}
-
-func toGettableReductionRule(rule *metricreductionruletypes.StorableReductionRule) metricreductionruletypes.GettableReductionRule {
-	return metricreductionruletypes.GettableReductionRule{
-		Identifiable:  rule.Identifiable,
-		TimeAuditable: rule.TimeAuditable,
-		UserAuditable: rule.UserAuditable,
-		MetricName:    rule.MetricName,
-		MatchType:     rule.MatchType,
-		Labels:        rule.Labels,
-		EffectiveFrom: rule.EffectiveFrom,
-		Active:        !rule.EffectiveFrom.After(time.Now()),
-	}
-}
-
-func withVolume(rule metricreductionruletypes.GettableReductionRule, volume volumeRow) metricreductionruletypes.GettableReductionRule {
-	rule.IngestedSeries = volume.Ingested
-	rule.ReducedSeries = volume.Reduced
-	if volume.Ingested > 0 && volume.Reduced <= volume.Ingested {
-		rule.ReductionPercent = (1 - float64(volume.Reduced)/float64(volume.Ingested)) * 100
-	}
-	return rule
-}
-
-func intersectLabels(keys []string, droppedSet map[string]struct{}) []string {
-	seen := make(map[string]struct{})
-	var out []string
-	for _, key := range keys {
-		if _, ok := droppedSet[key]; !ok {
-			continue
-		}
-		if _, dup := seen[key]; dup {
-			continue
-		}
-		seen[key] = struct{}{}
-		out = append(out, key)
-	}
-	return out
-}
-
-// splitCSV splits a comma-joined label list, returning nil for the empty string.
-func splitCSV(s string) []string {
-	if s == "" {
-		return nil
-	}
-	return strings.Split(s, ",")
-}
-
-func resolveDroppedKept(matchType metricreductionruletypes.MatchType, ruleLabels, keys []string) (dropped, kept []string) {
-	ruleSet := make(map[string]struct{}, len(ruleLabels))
-	for _, l := range ruleLabels {
-		ruleSet[l] = struct{}{}
-	}
-
-	for _, k := range keys {
-		if metricreductionruletypes.IsProtectedLabel(k) {
-			kept = append(kept, k)
-			continue
-		}
-		_, listed := ruleSet[k]
-		drop := listed
-		if matchType == metricreductionruletypes.MatchTypeKeep {
-			drop = !listed
-		}
-		if drop {
-			dropped = append(dropped, k)
-		} else {
-			kept = append(kept, k)
-		}
-	}
-
-	sort.Strings(dropped)
-	sort.Strings(kept)
-	return dropped, kept
-}
-
-func (m *module) estimateVolume(ctx context.Context, metricName string, matchType metricreductionruletypes.MatchType, labels []string, startMs, endMs int64) (current uint64, reduced uint64, reductionPercent float64, dropped []string, err error) {
-	keys, err := m.ch.AttributeKeys(ctx, metricName, startMs, endMs)
-	if err != nil {
-		return 0, 0, 0, nil, err
-	}
-	dropped, kept := resolveDroppedKept(matchType, labels, keys)
-
-	current, reduced, err = m.ch.EstimateCardinality(ctx, metricName, kept, startMs, endMs)
-	if err != nil {
-		return 0, 0, 0, nil, err
-	}
-	if current > 0 && reduced <= current {
-		reductionPercent = (1 - float64(reduced)/float64(current)) * 100
-	}
-	return current, reduced, reductionPercent, dropped, nil
-}

ee/modules/metricreductionrule/implmetricreductionrule/store.go

@@ -1,164 +0,0 @@
-package implmetricreductionrule
-
-import (
-	"context"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-type store struct {
-	sqlstore sqlstore.SQLStore
-}
-
-func NewStore(sqlstore sqlstore.SQLStore) metricreductionruletypes.Store {
-	return &store{sqlstore: sqlstore}
-}
-
-func (s *store) List(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams) ([]*metricreductionruletypes.StorableReductionRule, int, error) {
-	column := "metric_name"
-	if params.OrderBy == metricreductionruletypes.OrderByLastUpdated {
-		column = "updated_at"
-	}
-	direction := "ASC"
-	if params.Order == metricreductionruletypes.OrderDesc {
-		direction = "DESC"
-	}
-
-	rules := make([]*metricreductionruletypes.StorableReductionRule, 0)
-	query := s.sqlstore.
-		BunDBCtx(ctx).
-		NewSelect().
-		Model(&rules).
-		Where("org_id = ?", orgID).
-		Order(column + " " + direction)
-	if params.Search != "" {
-		query = query.Where("metric_name LIKE ?", "%"+params.Search+"%")
-	}
-	if params.Limit > 0 {
-		query = query.Limit(params.Limit).Offset(params.Offset)
-	}
-
-	total, err := query.ScanAndCount(ctx)
-	if err != nil {
-		return nil, 0, err
-	}
-	return rules, total, nil
-}
-
-func (s *store) Get(ctx context.Context, orgID valuer.UUID, metricName string) (*metricreductionruletypes.StorableReductionRule, error) {
-	rule := new(metricreductionruletypes.StorableReductionRule)
-	err := s.sqlstore.
-		BunDBCtx(ctx).
-		NewSelect().
-		Model(rule).
-		Where("org_id = ?", orgID).
-		Where("metric_name = ?", metricName).
-		Scan(ctx)
-	if err != nil {
-		return nil, s.sqlstore.WrapNotFoundErrf(err, metricreductionruletypes.ErrCodeMetricReductionRuleNotFound, "no reduction rule found for metric %q", metricName)
-	}
-	return rule, nil
-}
-
-func (s *store) GetByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*metricreductionruletypes.StorableReductionRule, error) {
-	rule := new(metricreductionruletypes.StorableReductionRule)
-	err := s.sqlstore.
-		BunDBCtx(ctx).
-		NewSelect().
-		Model(rule).
-		Where("org_id = ?", orgID).
-		Where("id = ?", id).
-		Scan(ctx)
-	if err != nil {
-		return nil, s.sqlstore.WrapNotFoundErrf(err, metricreductionruletypes.ErrCodeMetricReductionRuleNotFound, "no reduction rule found with id %q", id.String())
-	}
-	return rule, nil
-}
-
-func (s *store) Create(ctx context.Context, rule *metricreductionruletypes.StorableReductionRule) error {
-	res, err := s.sqlstore.
-		BunDBCtx(ctx).
-		NewInsert().
-		Model(rule).
-		On("CONFLICT (org_id, metric_name) DO NOTHING").
-		Exec(ctx)
-	if err != nil {
-		return err
-	}
-
-	rowsAffected, err := res.RowsAffected()
-	if err != nil {
-		return err
-	}
-	if rowsAffected == 0 {
-		return errors.Newf(errors.TypeAlreadyExists, metricreductionruletypes.ErrCodeMetricReductionRuleAlreadyExists,
-			"a reduction rule for metric %q already exists", rule.MetricName)
-	}
-	return nil
-}
-
-func (s *store) Upsert(ctx context.Context, rule *metricreductionruletypes.StorableReductionRule) error {
-	_, err := s.sqlstore.
-		BunDBCtx(ctx).
-		NewInsert().
-		Model(rule).
-		On("CONFLICT (org_id, metric_name) DO UPDATE").
-		Set("match_type = EXCLUDED.match_type").
-		Set("labels = EXCLUDED.labels").
-		Set("effective_from = EXCLUDED.effective_from").
-		Set("updated_at = EXCLUDED.updated_at").
-		Set("updated_by = EXCLUDED.updated_by").
-		Exec(ctx)
-	return err
-}
-
-func (s *store) Delete(ctx context.Context, orgID valuer.UUID, metricName string) error {
-	res, err := s.sqlstore.
-		BunDBCtx(ctx).
-		NewDelete().
-		Model((*metricreductionruletypes.StorableReductionRule)(nil)).
-		Where("org_id = ?", orgID).
-		Where("metric_name = ?", metricName).
-		Exec(ctx)
-	if err != nil {
-		return err
-	}
-
-	rowsAffected, err := res.RowsAffected()
-	if err != nil {
-		return err
-	}
-	if rowsAffected == 0 {
-		return errors.Newf(errors.TypeNotFound, metricreductionruletypes.ErrCodeMetricReductionRuleNotFound, "no reduction rule found for metric %q", metricName)
-	}
-	return nil
-}
-
-func (s *store) DeleteByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
-	res, err := s.sqlstore.
-		BunDBCtx(ctx).
-		NewDelete().
-		Model((*metricreductionruletypes.StorableReductionRule)(nil)).
-		Where("org_id = ?", orgID).
-		Where("id = ?", id).
-		Exec(ctx)
-	if err != nil {
-		return err
-	}
-
-	rowsAffected, err := res.RowsAffected()
-	if err != nil {
-		return err
-	}
-	if rowsAffected == 0 {
-		return errors.Newf(errors.TypeNotFound, metricreductionruletypes.ErrCodeMetricReductionRuleNotFound, "no reduction rule found with id %q", id.String())
-	}
-	return nil
-}
-
-func (s *store) RunInTx(ctx context.Context, cb func(ctx context.Context) error) error {
-	return s.sqlstore.RunInTxCtx(ctx, nil, cb)
-}

ee/modules/metricreductionrule/implmetricreductionrule/store_test.go

@@ -1,170 +0,0 @@
-package implmetricreductionrule
-
-import (
-	"context"
-	"path/filepath"
-	"testing"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/factory/factorytest"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/sqlstore/sqlitesqlstore"
-	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-)
-
-func newTestStore(t *testing.T) sqlstore.SQLStore {
-	t.Helper()
-	dbPath := filepath.Join(t.TempDir(), "test.db")
-	store, err := sqlitesqlstore.New(context.Background(), factorytest.NewSettings(), sqlstore.Config{
-		Provider: "sqlite",
-		Connection: sqlstore.ConnectionConfig{
-			MaxOpenConns:    1,
-			MaxConnLifetime: 0,
-		},
-		Sqlite: sqlstore.SqliteConfig{
-			Path:            dbPath,
-			Mode:            "wal",
-			BusyTimeout:     5 * time.Second,
-			TransactionMode: "deferred",
-		},
-	})
-	require.NoError(t, err)
-
-	_, err = store.BunDB().NewCreateTable().
-		Model((*metricreductionruletypes.StorableReductionRule)(nil)).
-		IfNotExists().
-		Exec(context.Background())
-	require.NoError(t, err)
-
-	_, err = store.BunDB().Exec(`CREATE UNIQUE INDEX IF NOT EXISTS uq_metric_reduction_rule_org_metric ON metric_reduction_rule (org_id, metric_name)`)
-	require.NoError(t, err)
-	return store
-}
-
-func newRule(orgID valuer.UUID, metricName string, matchType metricreductionruletypes.MatchType, labels []string, by string) *metricreductionruletypes.StorableReductionRule {
-	return metricreductionruletypes.NewReductionRule(orgID, metricName, matchType, labels, time.Now(), by)
-}
-
-func TestStore_UpsertGetListDelete(t *testing.T) {
-	ctx := context.Background()
-	s := NewStore(newTestStore(t))
-	orgID := valuer.GenerateUUID()
-
-	empty, _, err := s.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
-	require.NoError(t, err)
-	assert.Empty(t, empty)
-
-	require.NoError(t, s.Upsert(ctx, newRule(orgID, "http_requests_total", metricreductionruletypes.MatchTypeDrop, []string{"pod", "container"}, "creator@x.com")))
-
-	got, err := s.Get(ctx, orgID, "http_requests_total")
-	require.NoError(t, err)
-	assert.Equal(t, metricreductionruletypes.MatchTypeDrop, got.MatchType)
-	assert.Equal(t, []string{"pod", "container"}, []string(got.Labels))
-	assert.Equal(t, "creator@x.com", got.CreatedBy)
-
-	list, _, err := s.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
-	require.NoError(t, err)
-	require.Len(t, list, 1)
-}
-
-func TestStore_UpsertReplacesAndPreservesCreator(t *testing.T) {
-	ctx := context.Background()
-	s := NewStore(newTestStore(t))
-	orgID := valuer.GenerateUUID()
-
-	require.NoError(t, s.Upsert(ctx, newRule(orgID, "cpu_usage", metricreductionruletypes.MatchTypeDrop, []string{"pod"}, "creator@x.com")))
-	require.NoError(t, s.Upsert(ctx, newRule(orgID, "cpu_usage", metricreductionruletypes.MatchTypeKeep, []string{"le"}, "editor@x.com")))
-
-	list, _, err := s.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
-	require.NoError(t, err)
-	require.Len(t, list, 1, "upsert on the same (org, metric) replaces, it does not duplicate")
-
-	got, err := s.Get(ctx, orgID, "cpu_usage")
-	require.NoError(t, err)
-	assert.Equal(t, metricreductionruletypes.MatchTypeKeep, got.MatchType)
-	assert.Equal(t, []string{"le"}, []string(got.Labels))
-	assert.Equal(t, "creator@x.com", got.CreatedBy, "created_by is preserved on update")
-	assert.Equal(t, "editor@x.com", got.UpdatedBy, "updated_by reflects the latest editor")
-}
-
-func TestStore_DeleteMissingRuleErrors(t *testing.T) {
-	ctx := context.Background()
-	s := NewStore(newTestStore(t))
-	orgID := valuer.GenerateUUID()
-
-	require.NoError(t, s.Upsert(ctx, newRule(orgID, "mem_usage", metricreductionruletypes.MatchTypeDrop, []string{"pod"}, "creator@x.com")))
-	require.NoError(t, s.Delete(ctx, orgID, "mem_usage"))
-
-	_, err := s.Get(ctx, orgID, "mem_usage")
-	require.Error(t, err)
-
-	require.Error(t, s.Delete(ctx, orgID, "mem_usage"), "deleting a non-existent rule returns an error")
-}
-
-func TestStore_ScopedByOrg(t *testing.T) {
-	ctx := context.Background()
-	s := NewStore(newTestStore(t))
-	orgA := valuer.GenerateUUID()
-	orgB := valuer.GenerateUUID()
-
-	require.NoError(t, s.Upsert(ctx, newRule(orgA, "shared_metric", metricreductionruletypes.MatchTypeDrop, []string{"pod"}, "a@x.com")))
-
-	_, err := s.Get(ctx, orgB, "shared_metric")
-	require.Error(t, err, "a rule in org A must not be visible to org B")
-
-	list, _, err := s.List(ctx, orgB, &metricreductionruletypes.ListReductionRulesParams{})
-	require.NoError(t, err)
-	assert.Empty(t, list)
-}
-
-func TestStore_ListSortsAndPaginates(t *testing.T) {
-	ctx := context.Background()
-	s := NewStore(newTestStore(t))
-	orgID := valuer.GenerateUUID()
-
-	for _, name := range []string{"c_metric", "a_metric", "b_metric"} {
-		require.NoError(t, s.Upsert(ctx, newRule(orgID, name, metricreductionruletypes.MatchTypeDrop, []string{"pod"}, "x@x.com")))
-	}
-
-	page, total, err := s.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{
-		OrderBy: metricreductionruletypes.OrderByMetricName,
-		Order:   metricreductionruletypes.OrderAsc,
-		Offset:  0,
-		Limit:   2,
-	})
-	require.NoError(t, err)
-	assert.Equal(t, 3, total, "total reflects all rows, not the page size")
-	require.Len(t, page, 2)
-	assert.Equal(t, "a_metric", page[0].MetricName)
-	assert.Equal(t, "b_metric", page[1].MetricName)
-
-	page, _, err = s.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{
-		OrderBy: metricreductionruletypes.OrderByMetricName,
-		Order:   metricreductionruletypes.OrderDesc,
-		Offset:  2,
-		Limit:   2,
-	})
-	require.NoError(t, err)
-	require.Len(t, page, 1)
-	assert.Equal(t, "a_metric", page[0].MetricName, "desc order with offset 2 lands on the smallest name")
-}
-
-func TestStore_RunInTxRollsBackOnError(t *testing.T) {
-	ctx := context.Background()
-	s := NewStore(newTestStore(t))
-	orgID := valuer.GenerateUUID()
-
-	err := s.RunInTx(ctx, func(ctx context.Context) error {
-		if err := s.Upsert(ctx, newRule(orgID, "rolled_back", metricreductionruletypes.MatchTypeDrop, []string{"pod"}, "creator@x.com")); err != nil {
-			return err
-		}
-		return assert.AnError
-	})
-	require.ErrorIs(t, err, assert.AnError)
-
-	_, err = s.Get(ctx, orgID, "rolled_back")
-	require.Error(t, err, "the upsert must not persist when the transaction callback fails")
-}

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

@@ -107,15 +107,6 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
-	metricsReduction := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableMetricsReduction, evalCtx)
-	featureSet = append(featureSet, &licensetypes.Feature{
-		Name:       valuer.NewString(flagger.FeatureEnableMetricsReduction.String()),
-		Active:     metricsReduction,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	})
-
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {

ee/query-service/app/server.go

@@ -90,8 +90,12 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 
 	// initiate agent config handler
 	agentConfMgr, err := agentConf.Initiate(&agentConf.ManagerOptions{
-		Store:         signoz.SQLStore,
-		AgentFeatures: []agentConf.AgentFeature{logParsingPipelineController},
+		Store: signoz.SQLStore,
+		AgentFeatures: []agentConf.AgentFeature{
+			logParsingPipelineController,
+			signoz.Modules.SpanMapper,
+			signoz.Modules.LLMPricingRule,
+		},
 	})
 	if err != nil {
 		return nil, err

frontend/package.json

@@ -25,7 +25,7 @@
     "test": "jest",
     "test:changedsince": "jest --changedSince=main --coverage --silent",
     "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
-    "generate:config:web-settings": "json2ts ../docs/config/web-settings.json -o src/types/generated/webSettings.ts --style.useTabs --style.tabWidth=1 --style.singleQuote --bannerComment '/* AUTO GENERATED FILE - DO NOT EDIT - GENERATED FROM docs/config/web-settings.json */'"
+    "generate:config:web-settings": "json2ts ./src/schemas/generated/webSettings.schema.json -o src/types/generated/webSettings.ts --style.useTabs --style.tabWidth=1 --style.singleQuote --bannerComment '/* AUTO GENERATED FILE - DO NOT EDIT - GENERATED FROM frontend/src/schemas/generated/webSettings.schema.json */'"
   },
   "engines": {
     "node": ">=22.0.0",

frontend/public/locales/en/routes.json

@@ -15,6 +15,8 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
+	"role_edit": "Edit Role",
+	"role_create": "Create Role",
 	"members": "Members",
 	"service_accounts": "Service Accounts",
 	"mcp_server": "MCP Server"

frontend/public/locales/en/titles.json

@@ -82,6 +82,8 @@
 	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
 	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
 	"ROLE_DETAILS": "SigNoz | Role Details",
+	"ROLE_CREATE": "SigNoz | Create Role",
+	"ROLE_EDIT": "SigNoz | Edit Role",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"

frontend/src/AppRoutes/routes.ts

@@ -477,13 +477,6 @@ const routes: AppRoutes[] = [
 		key: 'METRICS_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
-	{
-		path: ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
-		exact: true,
-		component: MetricsExplorer,
-		key: 'METRICS_EXPLORER_VOLUME_CONTROL',
-		isPrivate: true,
-	},
 
 	{
 		path: ROUTES.METER,

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

@@ -4,14 +4,22 @@
  * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
-import { useMutation } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import type {
+	InvalidateOptions,
 	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
 	UseMutationOptions,
 	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
 } from 'react-query';
 
 import type {
+	GetChecks200,
+	GetChecksParams,
 	InframonitoringtypesPostableClustersDTO,
 	InframonitoringtypesPostableDaemonSetsDTO,
 	InframonitoringtypesPostableDeploymentsDTO,
@@ -39,7 +47,94 @@ import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
 /**
- * Returns a paginated list of Kubernetes clusters with key aggregated metrics derived by summing per-node values within the group: CPU usage, CPU allocatable, memory working set, memory allocatable. Each row also reports per-group nodeCountsByReadiness ({ ready, notReady } from each node's latest k8s.node.condition_ready value) and per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value). Each cluster includes metadata attributes (k8s.cluster.name). The response type is 'list' for the default k8s.cluster.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates nodes and pods in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_allocatable / memory / memory_allocatable, and pagination via offset/limit. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (clusterCPU, clusterCPUAllocatable, clusterMemory, clusterMemoryAllocatable) return -1 as a sentinel when no data is available for that field.
+ * Checks whether the metrics and attributes required to power the infra-monitoring section selected by the 'type' query parameter (hosts, processes, pods, nodes, deployments, daemonsets, statefulsets, jobs, namespaces, clusters, volumes) are being received. For each collector receiver or processor that contributes required metrics or attributes, lists what is present and what is missing, with a prebuilt user-facing message and a docs link per missing component. Default-enabled metrics are those expected as soon as the receiver is configured; optional metrics require 'enabled: true' in receiver config. 'ready' is true only when every missing list is empty.
+ * @summary Run Infra Monitoring Setup Checks
+ */
+export const getChecks = (params: GetChecksParams, signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetChecks200>({
+		url: `/api/v2/infra_monitoring/checks`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetChecksQueryKey = (params?: GetChecksParams) => {
+	return [
+		`/api/v2/infra_monitoring/checks`,
+		...(params ? [params] : []),
+	] as const;
+};
+
+export const getGetChecksQueryOptions = <
+	TData = Awaited<ReturnType<typeof getChecks>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params: GetChecksParams,
+	options?: {
+		query?: UseQueryOptions<Awaited<ReturnType<typeof getChecks>>, TError, TData>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetChecksQueryKey(params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getChecks>>> = ({
+		signal,
+	}) => getChecks(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getChecks>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetChecksQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getChecks>>
+>;
+export type GetChecksQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Run Infra Monitoring Setup Checks
+ */
+
+export function useGetChecks<
+	TData = Awaited<ReturnType<typeof getChecks>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params: GetChecksParams,
+	options?: {
+		query?: UseQueryOptions<Awaited<ReturnType<typeof getChecks>>, TError, TData>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetChecksQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Run Infra Monitoring Setup Checks
+ */
+export const invalidateGetChecks = async (
+	queryClient: QueryClient,
+	params: GetChecksParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetChecksQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Returns a paginated list of Kubernetes clusters with key aggregated metrics derived by summing per-node values within the group: CPU usage, CPU allocatable, memory working set, memory allocatable. Each row also reports per-group nodeCountsByReadiness ({ ready, notReady } from each node's latest k8s.node.condition_ready value) and per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value). Each cluster includes metadata attributes (k8s.cluster.name). The response type is 'list' for the default k8s.cluster.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates nodes and pods in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_allocatable / memory / memory_allocatable, and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (clusterCPU, clusterCPUAllocatable, clusterMemory, clusterMemoryAllocatable) return -1 as a sentinel when no data is available for that field.
  * @summary List Clusters for Infra Monitoring
  */
 export const listClusters = (
@@ -122,7 +217,7 @@ export const useListClusters = <
 	return useMutation(getListClustersMutationOptions(options));
 };
 /**
- * Returns a paginated list of Kubernetes DaemonSets with key aggregated pod metrics: CPU usage and memory working set summed across pods owned by the daemonset, plus average CPU/memory request and limit utilization (daemonSetCPURequest, daemonSetCPULimit, daemonSetMemoryRequest, daemonSetMemoryLimit). Each row also reports the latest known node-level counters from kube-state-metrics: desiredNodes (k8s.daemonset.desired_scheduled_nodes, the number of nodes the daemonset wants to run on) and currentNodes (k8s.daemonset.current_scheduled_nodes, the number of nodes the daemonset currently runs on) — note these are node counts, not pod counts. It also reports per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value). Each daemonset includes metadata attributes (k8s.daemonset.name, k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.daemonset.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods owned by daemonsets in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_request / cpu_limit / memory / memory_request / memory_limit / desired_nodes / current_nodes, and pagination via offset/limit. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (daemonSetCPU, daemonSetCPURequest, daemonSetCPULimit, daemonSetMemory, daemonSetMemoryRequest, daemonSetMemoryLimit, desiredNodes, currentNodes) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes DaemonSets with key aggregated pod metrics: CPU usage and memory working set summed across pods owned by the daemonset, plus average CPU/memory request and limit utilization (daemonSetCPURequest, daemonSetCPULimit, daemonSetMemoryRequest, daemonSetMemoryLimit). Each row also reports the latest known node-level counters from kube-state-metrics: desiredNodes (k8s.daemonset.desired_scheduled_nodes, the number of nodes the daemonset wants to run on) and currentNodes (k8s.daemonset.current_scheduled_nodes, the number of nodes the daemonset currently runs on) — note these are node counts, not pod counts. It also reports per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value). Each daemonset includes metadata attributes (k8s.daemonset.name, k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.daemonset.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods owned by daemonsets in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_request / cpu_limit / memory / memory_request / memory_limit / desired_nodes / current_nodes, and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (daemonSetCPU, daemonSetCPURequest, daemonSetCPULimit, daemonSetMemory, daemonSetMemoryRequest, daemonSetMemoryLimit, desiredNodes, currentNodes) return -1 as a sentinel when no data is available for that field.
  * @summary List DaemonSets for Infra Monitoring
  */
 export const listDaemonSets = (
@@ -205,7 +300,7 @@ export const useListDaemonSets = <
 	return useMutation(getListDaemonSetsMutationOptions(options));
 };
 /**
- * Returns a paginated list of Kubernetes Deployments with key aggregated pod metrics: CPU usage and memory working set summed across pods owned by the deployment, plus average CPU/memory request and limit utilization (deploymentCPURequest, deploymentCPULimit, deploymentMemoryRequest, deploymentMemoryLimit). Each row also reports the latest known desiredPods (k8s.deployment.desired) and availablePods (k8s.deployment.available) replica counts and per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value). Each deployment includes metadata attributes (k8s.deployment.name, k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.deployment.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods owned by deployments in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_request / cpu_limit / memory / memory_request / memory_limit / desired_pods / available_pods, and pagination via offset/limit. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (deploymentCPU, deploymentCPURequest, deploymentCPULimit, deploymentMemory, deploymentMemoryRequest, deploymentMemoryLimit, desiredPods, availablePods) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes Deployments with key aggregated pod metrics: CPU usage and memory working set summed across pods owned by the deployment, plus average CPU/memory request and limit utilization (deploymentCPURequest, deploymentCPULimit, deploymentMemoryRequest, deploymentMemoryLimit). Each row also reports the latest known desiredPods (k8s.deployment.desired) and availablePods (k8s.deployment.available) replica counts and per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value). Each deployment includes metadata attributes (k8s.deployment.name, k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.deployment.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods owned by deployments in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_request / cpu_limit / memory / memory_request / memory_limit / desired_pods / available_pods, and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (deploymentCPU, deploymentCPURequest, deploymentCPULimit, deploymentMemory, deploymentMemoryRequest, deploymentMemoryLimit, desiredPods, availablePods) return -1 as a sentinel when no data is available for that field.
  * @summary List Deployments for Infra Monitoring
  */
 export const listDeployments = (
@@ -288,7 +383,7 @@ export const useListDeployments = <
 	return useMutation(getListDeploymentsMutationOptions(options));
 };
 /**
- * Returns a paginated list of hosts with key infrastructure metrics: CPU usage (%), memory usage (%), I/O wait (%), disk usage (%), and 15-minute load average. Each host includes its current status (active/inactive based on metrics reported in the last 10 minutes) and metadata attributes (e.g., os.type). Supports filtering via a filter expression, filtering by host status, custom groupBy to aggregate hosts by any attribute, ordering by any of the five metrics, and pagination via offset/limit. The response type is 'list' for the default host.name grouping or 'grouped_list' for custom groupBy keys. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (cpu, memory, wait, load15, diskUsage) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of hosts with key infrastructure metrics: CPU usage (%), memory usage (%), I/O wait (%), disk usage (%), and 15-minute load average. Each host includes its current status (active/inactive based on metrics reported in the last 10 minutes) and metadata attributes (e.g., os.type). Supports filtering via a filter expression, filtering by host status, custom groupBy to aggregate hosts by any attribute, ordering by any of the five metrics, and pagination via offset/limit. The response type is 'list' for the default host.name grouping or 'grouped_list' for custom groupBy keys. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (cpu, memory, wait, load15, diskUsage) return -1 as a sentinel when no data is available for that field.
  * @summary List Hosts for Infra Monitoring
  */
 export const listHosts = (
@@ -371,7 +466,7 @@ export const useListHosts = <
 	return useMutation(getListHostsMutationOptions(options));
 };
 /**
- * Returns a paginated list of Kubernetes Jobs with key aggregated pod metrics: CPU usage and memory working set summed across pods owned by the job, plus average CPU/memory request and limit utilization (jobCPURequest, jobCPULimit, jobMemoryRequest, jobMemoryLimit). Each row also reports the latest known job-level counters from kube-state-metrics: desiredSuccessfulPods (k8s.job.desired_successful_pods, the target completion count), activePods (k8s.job.active_pods), failedPods (k8s.job.failed_pods, cumulative across the lifetime of the job), and successfulPods (k8s.job.successful_pods, cumulative). It also reports per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value); note podCountsByPhase.failed (current pod-phase) is distinct from failedPods (cumulative job kube-state-metric). Each job includes metadata attributes (k8s.job.name, k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.job.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods owned by jobs in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_request / cpu_limit / memory / memory_request / memory_limit / desired_successful_pods / active_pods / failed_pods / successful_pods, and pagination via offset/limit. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (jobCPU, jobCPURequest, jobCPULimit, jobMemory, jobMemoryRequest, jobMemoryLimit, desiredSuccessfulPods, activePods, failedPods, successfulPods) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes Jobs with key aggregated pod metrics: CPU usage and memory working set summed across pods owned by the job, plus average CPU/memory request and limit utilization (jobCPURequest, jobCPULimit, jobMemoryRequest, jobMemoryLimit). Each row also reports the latest known job-level counters from kube-state-metrics: desiredSuccessfulPods (k8s.job.desired_successful_pods, the target completion count), activePods (k8s.job.active_pods), failedPods (k8s.job.failed_pods, cumulative across the lifetime of the job), and successfulPods (k8s.job.successful_pods, cumulative). It also reports per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value); note podCountsByPhase.failed (current pod-phase) is distinct from failedPods (cumulative job kube-state-metric). Each job includes metadata attributes (k8s.job.name, k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.job.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods owned by jobs in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_request / cpu_limit / memory / memory_request / memory_limit / desired_successful_pods / active_pods / failed_pods / successful_pods, and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (jobCPU, jobCPURequest, jobCPULimit, jobMemory, jobMemoryRequest, jobMemoryLimit, desiredSuccessfulPods, activePods, failedPods, successfulPods) return -1 as a sentinel when no data is available for that field.
  * @summary List Jobs for Infra Monitoring
  */
 export const listJobs = (
@@ -454,7 +549,7 @@ export const useListJobs = <
 	return useMutation(getListJobsMutationOptions(options));
 };
 /**
- * Returns a paginated list of Kubernetes namespaces with key aggregated pod metrics: CPU usage and memory working set (summed across pods in the group), plus per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value in the window). Each namespace includes metadata attributes (k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.namespace.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / memory, and pagination via offset/limit. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (namespaceCPU, namespaceMemory) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes namespaces with key aggregated pod metrics: CPU usage and memory working set (summed across pods in the group), plus per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value in the window). Each namespace includes metadata attributes (k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.namespace.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / memory, and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (namespaceCPU, namespaceMemory) return -1 as a sentinel when no data is available for that field.
  * @summary List Namespaces for Infra Monitoring
  */
 export const listNamespaces = (
@@ -537,7 +632,7 @@ export const useListNamespaces = <
 	return useMutation(getListNamespacesMutationOptions(options));
 };
 /**
- * Returns a paginated list of Kubernetes nodes with key metrics: CPU usage, CPU allocatable, memory working set, memory allocatable, per-group nodeCountsByReadiness ({ ready, notReady } from each node's latest k8s.node.condition_ready in the window) and per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } for pods scheduled on the listed nodes). Each node includes metadata attributes (k8s.node.uid, k8s.cluster.name). The response type is 'list' for the default k8s.node.name grouping (each row is one node with its current condition string: ready / not_ready / no_data) or 'grouped_list' for custom groupBy keys (each row aggregates nodes in the group; condition stays no_data). Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_allocatable / memory / memory_allocatable, and pagination via offset/limit. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (nodeCPU, nodeCPUAllocatable, nodeMemory, nodeMemoryAllocatable) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes nodes with key metrics: CPU usage, CPU allocatable, memory working set, memory allocatable, per-group nodeCountsByReadiness ({ ready, notReady } from each node's latest k8s.node.condition_ready in the window) and per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } for pods scheduled on the listed nodes). Each node includes metadata attributes (k8s.node.uid, k8s.cluster.name). The response type is 'list' for the default k8s.node.name grouping (each row is one node with its current condition string: ready / not_ready / no_data) or 'grouped_list' for custom groupBy keys (each row aggregates nodes in the group; condition stays no_data). Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_allocatable / memory / memory_allocatable, and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (nodeCPU, nodeCPUAllocatable, nodeMemory, nodeMemoryAllocatable) return -1 as a sentinel when no data is available for that field.
  * @summary List Nodes for Infra Monitoring
  */
 export const listNodes = (
@@ -620,7 +715,7 @@ export const useListNodes = <
 	return useMutation(getListNodesMutationOptions(options));
 };
 /**
- * Returns a paginated list of Kubernetes pods with key metrics: CPU usage, CPU request/limit utilization, memory working set, memory request/limit utilization, current pod phase (pending/running/succeeded/failed/unknown/no_data), and pod age (ms since start time). Each pod includes metadata attributes (namespace, node, workload owner such as deployment/statefulset/daemonset/job/cronjob, cluster). Supports filtering via a filter expression, custom groupBy to aggregate pods by any attribute, ordering by any of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit. The response type is 'list' for the default k8s.pod.uid grouping (each row is one pod with its current phase) or 'grouped_list' for custom groupBy keys (each row aggregates pods in the group with per-phase counts under podCountsByPhase: { pending, running, succeeded, failed, unknown } derived from each pod's latest phase in the window). Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory, podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes pods with key metrics: CPU usage, CPU request/limit utilization, memory working set, memory request/limit utilization, current pod phase (pending/running/succeeded/failed/unknown/no_data), and pod age (ms since start time). Each pod includes metadata attributes (namespace, node, workload owner such as deployment/statefulset/daemonset/job/cronjob, cluster). Supports filtering via a filter expression, custom groupBy to aggregate pods by any attribute, ordering by any of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit. The response type is 'list' for the default k8s.pod.uid grouping (each row is one pod with its current phase) or 'grouped_list' for custom groupBy keys (each row aggregates pods in the group with per-phase counts under podCountsByPhase: { pending, running, succeeded, failed, unknown } derived from each pod's latest phase in the window). Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory, podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no data is available for that field.
  * @summary List Pods for Infra Monitoring
  */
 export const listPods = (
@@ -703,7 +798,7 @@ export const useListPods = <
 	return useMutation(getListPodsMutationOptions(options));
 };
 /**
- * Returns a paginated list of Kubernetes persistent volume claims (PVCs) with key volume metrics: available bytes, capacity bytes, usage (capacity - available), inodes, free inodes, and used inodes. Each row also includes metadata attributes (k8s.persistentvolumeclaim.name, k8s.pod.uid, k8s.pod.name, k8s.namespace.name, k8s.node.name, k8s.statefulset.name, k8s.cluster.name). Supports filtering via a filter expression, custom groupBy to aggregate volumes by any attribute, ordering by any of the six metrics (available, capacity, usage, inodes, inodes_free, inodes_used), and pagination via offset/limit. The response type is 'list' for the default k8s.persistentvolumeclaim.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates volumes in the group. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (volumeAvailable, volumeCapacity, volumeUsage, volumeInodes, volumeInodesFree, volumeInodesUsed) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes persistent volume claims (PVCs) with key volume metrics: available bytes, capacity bytes, usage (capacity - available), inodes, free inodes, and used inodes. Each row also includes metadata attributes (k8s.persistentvolumeclaim.name, k8s.pod.uid, k8s.pod.name, k8s.namespace.name, k8s.node.name, k8s.statefulset.name, k8s.cluster.name). Supports filtering via a filter expression, custom groupBy to aggregate volumes by any attribute, ordering by any of the six metrics (available, capacity, usage, inodes, inodes_free, inodes_used), and pagination via offset/limit. The response type is 'list' for the default k8s.persistentvolumeclaim.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates volumes in the group. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (volumeAvailable, volumeCapacity, volumeUsage, volumeInodes, volumeInodesFree, volumeInodesUsed) return -1 as a sentinel when no data is available for that field.
  * @summary List Volumes for Infra Monitoring
  */
 export const listVolumes = (
@@ -786,7 +881,7 @@ export const useListVolumes = <
 	return useMutation(getListVolumesMutationOptions(options));
 };
 /**
- * Returns a paginated list of Kubernetes StatefulSets with key aggregated pod metrics: CPU usage and memory working set summed across pods owned by the statefulset, plus average CPU/memory request and limit utilization (statefulSetCPURequest, statefulSetCPULimit, statefulSetMemoryRequest, statefulSetMemoryLimit). Each row also reports the latest known desiredPods (k8s.statefulset.desired_pods) and currentPods (k8s.statefulset.current_pods) replica counts and per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value). Each statefulset includes metadata attributes (k8s.statefulset.name, k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.statefulset.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods owned by statefulsets in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_request / cpu_limit / memory / memory_request / memory_limit / desired_pods / current_pods, and pagination via offset/limit. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (statefulSetCPU, statefulSetCPURequest, statefulSetCPULimit, statefulSetMemory, statefulSetMemoryRequest, statefulSetMemoryLimit, desiredPods, currentPods) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes StatefulSets with key aggregated pod metrics: CPU usage and memory working set summed across pods owned by the statefulset, plus average CPU/memory request and limit utilization (statefulSetCPURequest, statefulSetCPULimit, statefulSetMemoryRequest, statefulSetMemoryLimit). Each row also reports the latest known desiredPods (k8s.statefulset.desired_pods) and currentPods (k8s.statefulset.current_pods) replica counts and per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value). Each statefulset includes metadata attributes (k8s.statefulset.name, k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.statefulset.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods owned by statefulsets in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_request / cpu_limit / memory / memory_request / memory_limit / desired_pods / current_pods, and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (statefulSetCPU, statefulSetCPURequest, statefulSetCPULimit, statefulSetMemory, statefulSetMemoryRequest, statefulSetMemoryLimit, desiredPods, currentPods) return -1 as a sentinel when no data is available for that field.
  * @summary List StatefulSets for Infra Monitoring
  */
 export const listStatefulSets = (

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

@@ -2094,6 +2094,45 @@ export interface AuthtypesGettableTokenDTO {
 	tokenType?: string;
 }
 
+export enum CoretypesKindDTO {
+	anonymous = 'anonymous',
+	organization = 'organization',
+	role = 'role',
+	serviceaccount = 'serviceaccount',
+	user = 'user',
+	'notification-channel' = 'notification-channel',
+	'route-policy' = 'route-policy',
+	'apdex-setting' = 'apdex-setting',
+	'auth-domain' = 'auth-domain',
+	session = 'session',
+	'cloud-integration' = 'cloud-integration',
+	'cloud-integration-service' = 'cloud-integration-service',
+	integration = 'integration',
+	dashboard = 'dashboard',
+	'public-dashboard' = 'public-dashboard',
+	'ingestion-key' = 'ingestion-key',
+	'ingestion-limit' = 'ingestion-limit',
+	pipeline = 'pipeline',
+	'user-preference' = 'user-preference',
+	'org-preference' = 'org-preference',
+	'quick-filter' = 'quick-filter',
+	'ttl-setting' = 'ttl-setting',
+	rule = 'rule',
+	'planned-maintenance' = 'planned-maintenance',
+	'saved-view' = 'saved-view',
+	'trace-funnel' = 'trace-funnel',
+	'factor-password' = 'factor-password',
+	'factor-api-key' = 'factor-api-key',
+	license = 'license',
+	subscription = 'subscription',
+	logs = 'logs',
+	traces = 'traces',
+	metrics = 'metrics',
+	'audit-logs' = 'audit-logs',
+	'meter-metrics' = 'meter-metrics',
+	'logs-field' = 'logs-field',
+	'traces-field' = 'traces-field',
+}
 export enum CoretypesTypeDTO {
 	user = 'user',
 	serviceaccount = 'serviceaccount',
@@ -2104,10 +2143,7 @@ export enum CoretypesTypeDTO {
 	telemetryresource = 'telemetryresource',
 }
 export interface CoretypesResourceRefDTO {
-	/**
-	 * @type string
-	 */
-	kind: string;
+	kind: CoretypesKindDTO;
 	type: CoretypesTypeDTO;
 }
 
@@ -2243,12 +2279,12 @@ export interface AuthtypesPostableRoleDTO {
 	/**
 	 * @type string
 	 */
-	description: string;
+	description?: string;
 	/**
 	 * @type string
 	 */
 	name: string;
-	transactionGroups: AuthtypesTransactionGroupsDTO;
+	transactionGroups?: AuthtypesTransactionGroupsDTO;
 }
 
 export interface AuthtypesPostableRotateTokenDTO {
@@ -5422,6 +5458,121 @@ export interface GlobaltypesConfigDTO {
 	mcp_url: string | null;
 }
 
+export enum InframonitoringtypesCheckComponentTypeDTO {
+	receiver = 'receiver',
+	processor = 'processor',
+}
+export interface InframonitoringtypesAssociatedComponentDTO {
+	/**
+	 * @type string
+	 */
+	name: string;
+	type: InframonitoringtypesCheckComponentTypeDTO;
+}
+
+export interface InframonitoringtypesAttributesComponentEntryDTO {
+	associatedComponent: InframonitoringtypesAssociatedComponentDTO;
+	/**
+	 * @type array,null
+	 */
+	attributes: string[] | null;
+}
+
+export enum InframonitoringtypesCheckTypeDTO {
+	hosts = 'hosts',
+	processes = 'processes',
+	pods = 'pods',
+	nodes = 'nodes',
+	deployments = 'deployments',
+	daemonsets = 'daemonsets',
+	statefulsets = 'statefulsets',
+	jobs = 'jobs',
+	namespaces = 'namespaces',
+	clusters = 'clusters',
+	volumes = 'volumes',
+}
+export interface InframonitoringtypesMissingMetricsComponentEntryDTO {
+	associatedComponent: InframonitoringtypesAssociatedComponentDTO;
+	/**
+	 * @type string
+	 */
+	documentationLink: string;
+	/**
+	 * @type string
+	 */
+	message: string;
+	/**
+	 * @type array,null
+	 */
+	metrics: string[] | null;
+}
+
+export interface InframonitoringtypesMissingAttributesComponentEntryDTO {
+	associatedComponent: InframonitoringtypesAssociatedComponentDTO;
+	/**
+	 * @type array,null
+	 */
+	attributes: string[] | null;
+	/**
+	 * @type string
+	 */
+	documentationLink: string;
+	/**
+	 * @type string
+	 */
+	message: string;
+}
+
+export interface InframonitoringtypesMetricsComponentEntryDTO {
+	associatedComponent: InframonitoringtypesAssociatedComponentDTO;
+	/**
+	 * @type array,null
+	 */
+	metrics: string[] | null;
+}
+
+export interface InframonitoringtypesChecksDTO {
+	/**
+	 * @type array,null
+	 */
+	missingDefaultEnabledMetrics:
+		| InframonitoringtypesMissingMetricsComponentEntryDTO[]
+		| null;
+	/**
+	 * @type array,null
+	 */
+	missingOptionalMetrics:
+		| InframonitoringtypesMissingMetricsComponentEntryDTO[]
+		| null;
+	/**
+	 * @type array,null
+	 */
+	missingRequiredAttributes:
+		| InframonitoringtypesMissingAttributesComponentEntryDTO[]
+		| null;
+	/**
+	 * @type array,null
+	 */
+	presentDefaultEnabledMetrics:
+		| InframonitoringtypesMetricsComponentEntryDTO[]
+		| null;
+	/**
+	 * @type array,null
+	 */
+	presentOptionalMetrics: InframonitoringtypesMetricsComponentEntryDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	presentRequiredAttributes:
+		| InframonitoringtypesAttributesComponentEntryDTO[]
+		| null;
+	/**
+	 * @type boolean
+	 */
+	ready: boolean;
+	type: InframonitoringtypesCheckTypeDTO;
+}
+
 export type InframonitoringtypesClusterRecordDTOMetaAnyOf = {
 	[key: string]: string;
 };
@@ -5499,13 +5650,6 @@ export interface InframonitoringtypesClusterRecordDTO {
 	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
 }
 
-export interface InframonitoringtypesRequiredMetricsCheckDTO {
-	/**
-	 * @type array,null
-	 */
-	missingMetrics: string[] | null;
-}
-
 export enum InframonitoringtypesResponseTypeDTO {
 	list = 'list',
 	grouped_list = 'grouped_list',
@@ -5541,7 +5685,6 @@ export interface InframonitoringtypesClustersDTO {
 	 * @type array
 	 */
 	records: InframonitoringtypesClusterRecordDTO[];
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
 	 */
@@ -5619,7 +5762,6 @@ export interface InframonitoringtypesDaemonSetsDTO {
 	 * @type array
 	 */
 	records: InframonitoringtypesDaemonSetRecordDTO[];
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
 	 */
@@ -5697,7 +5839,6 @@ export interface InframonitoringtypesDeploymentsDTO {
 	 * @type array
 	 */
 	records: InframonitoringtypesDeploymentRecordDTO[];
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
 	 */
@@ -5783,7 +5924,6 @@ export interface InframonitoringtypesHostsDTO {
 	 * @type array
 	 */
 	records: InframonitoringtypesHostRecordDTO[];
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
 	 */
@@ -5869,7 +6009,6 @@ export interface InframonitoringtypesJobsDTO {
 	 * @type array
 	 */
 	records: InframonitoringtypesJobRecordDTO[];
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
 	 */
@@ -5919,7 +6058,6 @@ export interface InframonitoringtypesNamespacesDTO {
 	 * @type array
 	 */
 	records: InframonitoringtypesNamespaceRecordDTO[];
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
 	 */
@@ -5986,7 +6124,6 @@ export interface InframonitoringtypesNodesDTO {
 	 * @type array
 	 */
 	records: InframonitoringtypesNodeRecordDTO[];
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
 	 */
@@ -6070,7 +6207,6 @@ export interface InframonitoringtypesPodsDTO {
 	 * @type array
 	 */
 	records: InframonitoringtypesPodRecordDTO[];
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
 	 */
@@ -6418,7 +6554,6 @@ export interface InframonitoringtypesStatefulSetsDTO {
 	 * @type array
 	 */
 	records: InframonitoringtypesStatefulSetRecordDTO[];
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
 	 */
@@ -6487,7 +6622,6 @@ export interface InframonitoringtypesVolumesDTO {
 	 * @type array
 	 */
 	records: InframonitoringtypesVolumeRecordDTO[];
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
 	 */
@@ -6653,201 +6787,6 @@ export interface LlmpricingruletypesUpdatableLLMPricingRulesDTO {
 	rules: LlmpricingruletypesUpdatableLLMPricingRuleDTO[] | null;
 }
 
-export enum MetricreductionruletypesAssetTypeDTO {
-	dashboard = 'dashboard',
-	alert_rule = 'alert_rule',
-}
-export interface MetricreductionruletypesAffectedAssetDTO {
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type array,null
-	 */
-	impactedLabels: string[] | null;
-	/**
-	 * @type string
-	 */
-	name: string;
-	type: MetricreductionruletypesAssetTypeDTO;
-	/**
-	 * @type string
-	 */
-	widget?: string;
-	/**
-	 * @type string
-	 */
-	widgetId?: string;
-}
-
-export enum MetricreductionruletypesMatchTypeDTO {
-	drop = 'drop',
-	keep = 'keep',
-}
-export interface MetricreductionruletypesGettableReductionRuleDTO {
-	/**
-	 * @type boolean
-	 */
-	active: boolean;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	effectiveFrom: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	ingestedSeries: number;
-	/**
-	 * @type array,null
-	 */
-	labels: string[] | null;
-	matchType: MetricreductionruletypesMatchTypeDTO;
-	/**
-	 * @type string
-	 */
-	metricName: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	reducedSeries: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	reductionPercent: number;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
-export interface MetricreductionruletypesGettableReductionRulePreviewDTO {
-	/**
-	 * @type array,null
-	 */
-	affectedAssets: MetricreductionruletypesAffectedAssetDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	currentReducedSeries: number;
-	/**
-	 * @type array,null
-	 */
-	droppedLabels: string[] | null;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	effectiveFrom: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	ingestedSeries: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	reducedSeries: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	reductionPercent: number;
-}
-
-export interface MetricreductionruletypesGettableReductionRuleStatsDTO {
-	/**
-	 * @type number
-	 * @format double
-	 */
-	estimatedMonthlySavingsUsd: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	ingestedSeries: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	reducedSeries: number;
-}
-
-export interface MetricreductionruletypesGettableReductionRulesDTO {
-	/**
-	 * @type array,null
-	 */
-	rules: MetricreductionruletypesGettableReductionRuleDTO[] | null;
-	/**
-	 * @type integer
-	 */
-	total: number;
-}
-
-export enum MetricreductionruletypesOrderDTO {
-	asc = 'asc',
-	desc = 'desc',
-}
-export interface MetricreductionruletypesPostableReductionRuleDTO {
-	/**
-	 * @type array,null
-	 */
-	labels: string[] | null;
-	matchType: MetricreductionruletypesMatchTypeDTO;
-	/**
-	 * @type string
-	 */
-	metricName?: string;
-}
-
-export interface MetricreductionruletypesPostableReductionRulePreviewDTO {
-	/**
-	 * @type array,null
-	 */
-	labels: string[] | null;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	lookbackMs?: number;
-	matchType: MetricreductionruletypesMatchTypeDTO;
-	/**
-	 * @type string
-	 */
-	metricName: string;
-}
-
-export enum MetricreductionruletypesReductionRuleOrderByDTO {
-	metric = 'metric',
-	ingested_volume = 'ingested_volume',
-	reduced_volume = 'reduced_volume',
-	reduction = 'reduction',
-	last_updated = 'last_updated',
-}
 export interface MetricsexplorertypesInspectMetricsRequestDTO {
 	/**
 	 * @type integer
@@ -7009,10 +6948,6 @@ export interface MetricsexplorertypesMetricDashboardDTO {
 	 * @type string
 	 */
 	dashboardName: string;
-	/**
-	 * @type array
-	 */
-	groupBy?: string[];
 	/**
 	 * @type string
 	 */
@@ -10409,6 +10344,21 @@ export type Healthz503 = {
 	status: string;
 };
 
+export type GetChecksParams = {
+	/**
+	 * @description undefined
+	 */
+	type: InframonitoringtypesCheckTypeDTO;
+};
+
+export type GetChecks200 = {
+	data: InframonitoringtypesChecksDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListClusters200 = {
 	data: InframonitoringtypesClustersDTO;
 	/**
@@ -10533,9 +10483,14 @@ export type ListMetrics200 = {
 	status: string;
 };
 
-export type GetMetricAlertsPathParameters = {
+export type GetMetricAlertsParams = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
 	metricName: string;
 };
+
 export type GetMetricAlerts200 = {
 	data: MetricsexplorertypesMetricAlertsResponseDTO;
 	/**
@@ -10544,18 +10499,20 @@ export type GetMetricAlerts200 = {
 	status: string;
 };
 
-export type GetMetricAttributesPathParameters = {
-	metricName: string;
-};
 export type GetMetricAttributesParams = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
+	metricName: string;
 	/**
 	 * @type integer,null
-	 * @description undefined
+	 * @description Start of the time range as a Unix timestamp in milliseconds.
 	 */
 	start?: number | null;
 	/**
 	 * @type integer,null
-	 * @description undefined
+	 * @description End of the time range as a Unix timestamp in milliseconds.
 	 */
 	end?: number | null;
 };
@@ -10568,9 +10525,14 @@ export type GetMetricAttributes200 = {
 	status: string;
 };
 
-export type GetMetricDashboardsPathParameters = {
+export type GetMetricDashboardsParams = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
 	metricName: string;
 };
+
 export type GetMetricDashboards200 = {
 	data: MetricsexplorertypesMetricDashboardsResponseDTO;
 	/**
@@ -10579,9 +10541,14 @@ export type GetMetricDashboards200 = {
 	status: string;
 };
 
-export type GetMetricHighlightsPathParameters = {
+export type GetMetricHighlightsParams = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
 	metricName: string;
 };
+
 export type GetMetricHighlights200 = {
 	data: MetricsexplorertypesMetricHighlightsResponseDTO;
 	/**
@@ -10590,45 +10557,6 @@ export type GetMetricHighlights200 = {
 	status: string;
 };
 
-export type GetMetricMetadataPathParameters = {
-	metricName: string;
-};
-export type GetMetricMetadata200 = {
-	data: MetricsexplorertypesMetricMetadataDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateMetricMetadataPathParameters = {
-	metricName: string;
-};
-export type DeleteMetricReductionRulePathParameters = {
-	metricName: string;
-};
-export type GetMetricReductionRulePathParameters = {
-	metricName: string;
-};
-export type GetMetricReductionRule200 = {
-	data: MetricreductionruletypesGettableReductionRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpsertMetricReductionRulePathParameters = {
-	metricName: string;
-};
-export type UpsertMetricReductionRule200 = {
-	data: MetricreductionruletypesGettableReductionRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type InspectMetrics200 = {
 	data: MetricsexplorertypesInspectMetricsResponseDTO;
 	/**
@@ -10637,6 +10565,22 @@ export type InspectMetrics200 = {
 	status: string;
 };
 
+export type GetMetricMetadataParams = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
+	metricName: string;
+};
+
+export type GetMetricMetadata200 = {
+	data: MetricsexplorertypesMetricMetadataDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetMetricsOnboardingStatus200 = {
 	data: MetricsexplorertypesMetricsOnboardingResponseDTO;
 	/**
@@ -10645,97 +10589,6 @@ export type GetMetricsOnboardingStatus200 = {
 	status: string;
 };
 
-export type ListMetricReductionRulesParams = {
-	/**
-	 * @description undefined
-	 */
-	orderBy?: MetricreductionruletypesReductionRuleOrderByDTO;
-	/**
-	 * @description undefined
-	 */
-	order?: MetricreductionruletypesOrderDTO;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	search?: string;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	offset?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-};
-
-export type ListMetricReductionRules200 = {
-	data: MetricreductionruletypesGettableReductionRulesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateMetricReductionRule201 = {
-	data: MetricreductionruletypesGettableReductionRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteMetricReductionRuleByIDPathParameters = {
-	id: string;
-};
-export type GetMetricReductionRuleByIDPathParameters = {
-	id: string;
-};
-export type GetMetricReductionRuleByID200 = {
-	data: MetricreductionruletypesGettableReductionRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateMetricReductionRuleByIDPathParameters = {
-	id: string;
-};
-export type UpdateMetricReductionRuleByID200 = {
-	data: MetricreductionruletypesGettableReductionRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type PreviewMetricReductionRule200 = {
-	data: MetricreductionruletypesGettableReductionRulePreviewDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetMetricReductionRuleStats200 = {
-	data: MetricreductionruletypesGettableReductionRuleStatsDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetMetricReductionRuleTimeseries200 = {
-	data: Querybuildertypesv5QueryRangeResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetMetricsStats200 = {
 	data: MetricsexplorertypesStatsResponseDTO;
 	/**

frontend/src/components/ErrorInPlace/ErrorInPlace.tsx

@@ -21,6 +21,8 @@ interface ErrorInPlaceProps {
 	width?: string | number;
 	/** Custom content instead of ErrorContent */
 	children?: ReactNode;
+	/** Test ID for testing */
+	'data-testid'?: string;
 }
 
 /**
@@ -44,6 +46,7 @@ function ErrorInPlace({
 	height = '100%',
 	width = '100%',
 	children,
+	'data-testid': dataTestId,
 }: ErrorInPlaceProps): JSX.Element {
 	const containerStyle: React.CSSProperties = {
 		display: 'flex',
@@ -59,7 +62,11 @@ function ErrorInPlace({
 	};
 
 	return (
-		<div className={`error-in-place ${className}`.trim()} style={containerStyle}>
+		<div
+			className={`error-in-place ${className}`.trim()}
+			style={containerStyle}
+			data-testid={dataTestId}
+		>
 			{children || <ErrorContent error={error} />}
 		</div>
 	);

frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx

@@ -5,13 +5,9 @@ describe('PermissionDeniedFullPage', () => {
 	it('renders the title and subtitle with the permissionName interpolated', () => {
 		render(<PermissionDeniedFullPage permissionName="serviceaccount:list" />);
 
-		expect(
-			screen.getByText("Uh-oh! You don't have permission to view this page."),
-		).toBeInTheDocument();
+		expect(screen.getByText('Uh-oh! You are not authorized')).toBeInTheDocument();
 		expect(screen.getByText(/serviceaccount:list/)).toBeInTheDocument();
-		expect(
-			screen.getByText(/Please ask your SigNoz administrator to grant access/),
-		).toBeInTheDocument();
+		expect(screen.getByText(/is not authorized to perform/)).toBeInTheDocument();
 	});
 
 	it('renders with a different permissionName', () => {

frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx

@@ -2,6 +2,7 @@ import { CircleSlash2 } from '@signozhq/icons';
 
 import styles from './PermissionDeniedFullPage.module.scss';
 import { Style } from '@signozhq/design-tokens';
+import { useAppContext } from 'providers/App/App';
 
 interface PermissionDeniedFullPageProps {
 	permissionName: string;
@@ -10,18 +11,18 @@ interface PermissionDeniedFullPageProps {
 function PermissionDeniedFullPage({
 	permissionName,
 }: PermissionDeniedFullPageProps): JSX.Element {
+	const { user } = useAppContext();
+
 	return (
 		<div className={styles.container}>
 			<div className={styles.content}>
 				<span className={styles.icon}>
 					<CircleSlash2 color={Style.CALLOUT_WARNING_TITLE} size={14} />
 				</span>
-				<p className={styles.title}>
-					Uh-oh! You don&apos;t have permission to view this page.
-				</p>
+				<p className={styles.title}>Uh-oh! You are not authorized</p>
 				<p className={styles.subtitle}>
-					You need <code className={styles.permission}>{permissionName}</code> to
-					view this page. Please ask your SigNoz administrator to grant access.
+					<code className={styles.permission}>user/{user.id}</code> is not authorized
+					to perform <code className={styles.permission}>{permissionName}</code>
 				</p>
 			</div>
 		</div>

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -1,7 +1,9 @@
-import { useCallback } from 'react';
-import { LockKeyhole } from '@signozhq/icons';
+import { useCallback, useEffect, useState } from 'react';
+import { Check, Copy, LockKeyhole } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
+import { useCopyToClipboard } from 'react-use';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import RolesSelect from 'components/RolesSelect';
@@ -46,6 +48,23 @@ function OverviewTab({
 	saveErrors = [],
 }: OverviewTabProps): JSX.Element {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const [, copyToClipboard] = useCopyToClipboard();
+	const [hasCopiedId, setHasCopiedId] = useState(false);
+
+	const handleCopyId = useCallback((): void => {
+		if (account.id) {
+			copyToClipboard(account.id);
+			setHasCopiedId(true);
+		}
+	}, [account.id, copyToClipboard]);
+
+	useEffect(() => {
+		if (hasCopiedId) {
+			const timer = setTimeout(() => setHasCopiedId(false), 2000);
+			return (): void => clearTimeout(timer);
+		}
+		return undefined;
+	}, [hasCopiedId]);
 
 	const formatTimestamp = useCallback(
 		(ts: string | null | undefined): string => {
@@ -93,6 +112,17 @@ function OverviewTab({
 				</label>
 				<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
 					<span className="sa-drawer__input-text">{account.id || '—'}</span>
+					{account.id && (
+						<Button
+							variant="link"
+							color="secondary"
+							onClick={handleCopyId}
+							className="sa-drawer__copy-btn"
+							data-testid="copy-id-btn"
+						>
+							{hasCopiedId ? <Check size={14} /> : <Copy size={14} />}
+						</Button>
+					)}
 					<LockKeyhole size={14} className="sa-drawer__lock-icon" />
 				</div>
 			</div>

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss

@@ -203,6 +203,19 @@
 		opacity: 0.6;
 	}
 
+	&__copy-btn {
+		flex-shrink: 0;
+		padding: 0;
+		height: auto;
+		min-height: auto;
+		color: var(--foreground);
+		opacity: 0.6;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+
 	&__disabled-roles {
 		display: flex;
 		flex-wrap: wrap;

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -16,7 +16,6 @@ import {
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import { GuardAuthZ } from 'components/GuardAuthZ/GuardAuthZ';
 import PermissionDeniedCallout from 'components/PermissionDeniedCallout/PermissionDeniedCallout';
 import { useRoles } from 'components/RolesSelect';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
@@ -477,15 +476,9 @@ function ServiceAccountDrawer({
 					!isAccountLoading &&
 					!isAccountError &&
 					selectedAccountId && (
-						<GuardAuthZ
-							relation="read"
-							object={`serviceaccount:${selectedAccountId}`}
-							fallbackOnNoPermissions={(): JSX.Element => (
-								<PermissionDeniedCallout permissionName="serviceaccount:read" />
-							)}
-						>
-							<>
-								{activeTab === ServiceAccountDrawerTab.Overview && account && (
+						<>
+							{activeTab === ServiceAccountDrawerTab.Overview &&
+								(canRead && account ? (
 									<OverviewTab
 										account={account}
 										localName={localName}
@@ -504,23 +497,24 @@ function ServiceAccountDrawer({
 										onRefetchRoles={refetchRoles}
 										saveErrors={saveErrors}
 									/>
-								)}
-								{activeTab === ServiceAccountDrawerTab.Keys &&
-									(canListKeys ? (
-										<KeysTab
-											keys={keys}
-											isLoading={keysLoading}
-											isDisabled={isDeleted}
-											canUpdate={canUpdate}
-											accountId={selectedAccountId}
-											currentPage={keysPage}
-											pageSize={PAGE_SIZE}
-										/>
-									) : (
-										<PermissionDeniedCallout permissionName="factor-api-key:list" />
-									))}
-							</>
-						</GuardAuthZ>
+								) : (
+									<PermissionDeniedCallout permissionName="serviceaccount:read" />
+								))}
+							{activeTab === ServiceAccountDrawerTab.Keys &&
+								(canListKeys ? (
+									<KeysTab
+										keys={keys}
+										isLoading={keysLoading}
+										isDisabled={isDeleted}
+										canUpdate={canUpdate}
+										accountId={selectedAccountId}
+										currentPage={keysPage}
+										pageSize={PAGE_SIZE}
+									/>
+								) : (
+									<PermissionDeniedCallout permissionName="factor-api-key:list" />
+								))}
+						</>
 					)}
 			</div>
 		</div>

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

@@ -22,6 +22,7 @@ jest.mock('providers/Timezone', () => ({
 		},
 		updateTimezone: jest.fn(),
 		formatTimezoneAdjustedTimestamp: jest.fn(() => 'mock-date'),
+		formatTimezoneAdjustedTimestampOptional: jest.fn(() => 'mock-date'),
 		isAdaptationEnabled: true,
 		setIsAdaptationEnabled: jest.fn(),
 	}),

frontend/src/constants/features.ts

@@ -13,5 +13,4 @@ export enum FeatureKeys {
 	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
 	USE_DASHBOARD_V2 = 'use_dashboard_v2',
 	EMABLE_AI_OBSERVABILITY = 'enable_ai_observability',
-	ENABLE_METRICS_REDUCTION = 'enable_metrics_reduction',
 }

frontend/src/constants/routes.ts

@@ -56,7 +56,9 @@ const ROUTES = {
 	TRACE_EXPLORER: '/trace-explorer',
 	BILLING: '/settings/billing',
 	ROLES_SETTINGS: '/settings/roles',
+	ROLE_CREATE: '/settings/roles/new',
 	ROLE_DETAILS: '/settings/roles/:roleId',
+	ROLE_EDIT: '/settings/roles/:roleId/edit',
 	MEMBERS_SETTINGS: '/settings/members',
 	SUPPORT: '/support',
 	LOGS_SAVE_VIEWS: '/logs/saved-views',
@@ -79,7 +81,6 @@ const ROUTES = {
 	METRICS_EXPLORER: '/metrics-explorer/summary',
 	METRICS_EXPLORER_EXPLORER: '/metrics-explorer/explorer',
 	METRICS_EXPLORER_VIEWS: '/metrics-explorer/views',
-	METRICS_EXPLORER_VOLUME_CONTROL: '/metrics-explorer/volume-control',
 	API_MONITORING_BASE: '/api-monitoring',
 	API_MONITORING: '/api-monitoring/explorer',
 	METRICS_EXPLORER_BASE: '/metrics-explorer',

frontend/src/container/MembersSettings/MembersSettings.styles.scss

@@ -1,10 +1,12 @@
-.members-settings {
+.members-settings-page {
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
 	padding: var(--padding-4) var(--padding-2) var(--padding-6) var(--padding-4);
 	height: 100%;
+}
 
+.members-settings {
 	&__header {
 		display: flex;
 		flex-direction: column;

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -160,7 +160,7 @@ function MembersSettings(): JSX.Element {
 	}, [refetchUsers]);
 
 	return (
-		<>
+		<div className="members-settings-page">
 			<div className="members-settings">
 				<div className="members-settings__header">
 					<h1 className="members-settings__title">Members</h1>
@@ -231,7 +231,7 @@ function MembersSettings(): JSX.Element {
 				onClose={handleDrawerClose}
 				onComplete={handleMemberEditComplete}
 			/>
-		</>
+		</div>
 	);
 }
 

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -191,9 +191,6 @@ function TimeSeries({
 		if (metrics[0] && yAxisUnit) {
 			updateMetricMetadata(
 				{
-					pathParams: {
-						metricName: metricNames[0],
-					},
 					data: buildUpdateMetricYAxisUnitPayload(
 						metricNames[0],
 						metrics[0],

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -48,18 +48,14 @@ function AllAttributes({
 		isLoading: isLoadingAttributes,
 		isError: isErrorAttributes,
 		refetch: refetchAttributes,
-	} = useGetMetricAttributes(
-		{
-			metricName,
-		},
-		{
-			start: minTime ? Math.floor(minTime / 1000000) : undefined,
-			end: maxTime ? Math.floor(maxTime / 1000000) : undefined,
-		},
-	);
+	} = useGetMetricAttributes({
+		metricName,
+		start: minTime ? Math.floor(minTime / 1000000) : undefined,
+		end: maxTime ? Math.floor(maxTime / 1000000) : undefined,
+	});
 
 	const attributes = useMemo(
-		() => attributesData?.data?.attributes ?? [],
+		() => attributesData?.data.attributes ?? [],
 		[attributesData],
 	);
 

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -237,9 +237,6 @@ function Metadata({
 	const handleSave = useCallback(() => {
 		updateMetricMetadata(
 			{
-				pathParams: {
-					metricName,
-				},
 				data: transformUpdateMetricMetadataRequest(metricName, metricMetadataState),
 			},
 			{

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss

@@ -516,11 +516,6 @@
 	--tooltip-z-index: 1000;
 }
 
-// Lift the volume-control config drawer above the MetricDetails drawer (z-index 1000).
-.volume-control-config-drawer {
-	z-index: 1100 !important;
-}
-
 @keyframes fade-in-out {
 	0% {
 		opacity: 0;

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -21,7 +21,6 @@ import AllAttributes from './AllAttributes';
 import DashboardsAndAlertsPopover from './DashboardsAndAlertsPopover';
 import Highlights from './Highlights';
 import Metadata from './Metadata';
-import VolumeControlSection from './VolumeControl/VolumeControlSection';
 import { MetricDetailsProps } from './types';
 import { getMetricDetailsQuery } from './utils';
 
@@ -57,7 +56,7 @@ function MetricDetails({
 	);
 
 	const metadata = useMemo(() => {
-		if (!metricMetadataResponse?.data) {
+		if (!metricMetadataResponse) {
 			return null;
 		}
 		const { type, description, unit, temporality, isMonotonic } =
@@ -191,7 +190,6 @@ function MetricDetails({
 					isLoadingMetricMetadata={isLoadingMetricMetadata}
 					refetchMetricMetadata={refetchMetricMetadata}
 				/>
-				<VolumeControlSection metricName={metricName} />
 				<AllAttributes
 					metricName={metricName}
 					metricType={metadata?.type}

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/ImpactPanel.tsx

@@ -1,72 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { Spin } from 'antd';
-import { MetricreductionruletypesGettableReductionRulePreviewDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { formatCompact } from './configUtils';
-import { RuleMode } from './types';
-import styles from './VolumeControlConfig.module.scss';
-
-interface ImpactPanelProps {
-	mode: RuleMode;
-	preview?: MetricreductionruletypesGettableReductionRulePreviewDTO;
-	isLoading: boolean;
-}
-
-function ImpactPanel({
-	mode,
-	preview,
-	isLoading,
-}: ImpactPanelProps): JSX.Element {
-	if (mode === 'all') {
-		return (
-			<div className={styles.impact} data-testid="volume-control-impact">
-				<Typography.Text className={styles.impactNote}>
-					All attributes remain queryable, no reduction.
-				</Typography.Text>
-			</div>
-		);
-	}
-
-	// "Current" is what the metric keeps today (its rule, or raw if none); reduction is current -> proposed.
-	const current = preview?.currentReducedSeries ?? 0;
-	const proposed = preview?.reducedSeries ?? 0;
-	const deltaPct = current > 0 ? (1 - proposed / current) * 100 : 0;
-	const reductionLabel = `${deltaPct >= 0 ? '−' : '+'}${Math.round(
-		Math.abs(deltaPct),
-	)}%`;
-
-	return (
-		<div className={styles.impact} data-testid="volume-control-impact">
-			{isLoading && <Spin size="small" />}
-			{!isLoading && preview && (
-				<div className={styles.meters}>
-					<div className={styles.meter}>
-						<span className={styles.meterLabel}>Current series</span>
-						<span className={styles.meterValue}>{formatCompact(current)}</span>
-					</div>
-					<div className={styles.meter}>
-						<span className={styles.meterLabel}>Proposed series</span>
-						<span className={styles.meterValue}>{formatCompact(proposed)}</span>
-					</div>
-					<div className={styles.meter}>
-						<span className={styles.meterLabel}>Reduction</span>
-						<span
-							className={`${styles.meterValue} ${
-								deltaPct >= 0 ? styles.meterValueGood : ''
-							}`}
-						>
-							{reductionLabel}
-						</span>
-					</div>
-				</div>
-			)}
-			{!isLoading && !preview && (
-				<Typography.Text className={styles.impactNote}>
-					Select attributes to preview the impact.
-				</Typography.Text>
-			)}
-		</div>
-	);
-}
-
-export default ImpactPanel;

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/LabelSelector.tsx

@@ -1,47 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { Select } from 'antd';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { RuleMode } from './types';
-import styles from './VolumeControlConfig.module.scss';
-
-interface LabelSelectorProps {
-	mode: RuleMode;
-	options: string[];
-	value: string[];
-	onChange: (labels: string[]) => void;
-	loading?: boolean;
-}
-
-function LabelSelector({
-	mode,
-	options,
-	value,
-	onChange,
-	loading,
-}: LabelSelectorProps): JSX.Element {
-	const helpText =
-		mode === 'include'
-			? 'Only the selected attributes will remain queryable.'
-			: 'The selected attributes will be aggregated away; all others stay queryable.';
-
-	return (
-		<div className={styles.field} data-testid="volume-control-label-selector">
-			<Typography.Text className={styles.fieldLabel}>Attributes</Typography.Text>
-			<Typography.Text className={styles.fieldHint}>{helpText}</Typography.Text>
-			<Select
-				mode="multiple"
-				className={styles.labelSelect}
-				placeholder="Select attributes"
-				value={value}
-				onChange={onChange}
-				loading={loading}
-				options={options.map((key) => ({ label: key, value: key }))}
-				getPopupContainer={popupContainer}
-				data-testid="volume-control-label-select"
-			/>
-		</div>
-	);
-}
-
-export default LabelSelector;

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/ModeSelector.tsx

@@ -1,60 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-
-import { RuleMode } from './types';
-import styles from './VolumeControlConfig.module.scss';
-
-interface ModeOption {
-	mode: RuleMode;
-	title: string;
-	description: string;
-}
-
-const MODE_OPTIONS: ModeOption[] = [
-	{
-		mode: 'all',
-		title: 'Allow all attributes',
-		description: 'All attributes stay queryable. Removes any existing rule.',
-	},
-	{
-		mode: 'include',
-		title: 'Include attributes',
-		description: 'Allowlist: only the selected attributes stay queryable.',
-	},
-	{
-		mode: 'exclude',
-		title: 'Exclude attributes',
-		description: 'Blocklist: the selected attributes are aggregated away.',
-	},
-];
-
-interface ModeSelectorProps {
-	mode: RuleMode;
-	onChange: (mode: RuleMode) => void;
-}
-
-function ModeSelector({ mode, onChange }: ModeSelectorProps): JSX.Element {
-	return (
-		<div className={styles.modeCards} data-testid="volume-control-mode-selector">
-			{MODE_OPTIONS.map((option) => (
-				<button
-					type="button"
-					key={option.mode}
-					className={`${styles.modeCard} ${
-						mode === option.mode ? styles.modeCardActive : ''
-					}`}
-					onClick={(): void => onChange(option.mode)}
-					data-testid={`volume-control-mode-${option.mode}`}
-				>
-					<Typography.Text className={styles.modeTitle}>
-						{option.title}
-					</Typography.Text>
-					<Typography.Text className={styles.modeDesc}>
-						{option.description}
-					</Typography.Text>
-				</button>
-			))}
-		</div>
-	);
-}
-
-export default ModeSelector;

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/RelatedAssetsWarning.tsx

@@ -1,86 +0,0 @@
-import { Info } from '@signozhq/icons';
-import {
-	MetricreductionruletypesAffectedAssetDTO,
-	MetricreductionruletypesAssetTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import ROUTES from 'constants/routes';
-
-import styles from './VolumeControlConfig.module.scss';
-
-const AssetType = MetricreductionruletypesAssetTypeDTO;
-
-function assetHref(
-	asset: MetricreductionruletypesAffectedAssetDTO,
-): string | undefined {
-	if (!asset.id) {
-		return undefined;
-	}
-	if (asset.type === AssetType.dashboard) {
-		const base = `/dashboard/${asset.id}`;
-		return asset.widgetId ? `${base}/${asset.widgetId}` : base;
-	}
-	if (asset.type === AssetType.alert_rule) {
-		return `${ROUTES.EDIT_ALERTS}?ruleId=${asset.id}`;
-	}
-	return undefined;
-}
-
-interface RelatedAssetsWarningProps {
-	affectedAssets?: MetricreductionruletypesAffectedAssetDTO[] | null;
-}
-
-function RelatedAssetsWarning({
-	affectedAssets,
-}: RelatedAssetsWarningProps): JSX.Element | null {
-	// Dashboards are flagged only when they use a dropped label (group-by or filter); alerts are
-	// flagged whenever they reference the metric, since we don't yet resolve their impacted labels.
-	const impacted = (affectedAssets ?? []).filter(
-		(asset) =>
-			asset.type === AssetType.alert_rule ||
-			(asset.impactedLabels ?? []).length > 0,
-	);
-	if (impacted.length === 0) {
-		return null;
-	}
-
-	const impactedLabels = Array.from(
-		new Set(impacted.flatMap((asset) => asset.impactedLabels ?? [])),
-	);
-
-	return (
-		<div className={styles.warning} data-testid="volume-control-warning">
-			<Info size={14} />
-			<div>
-				<div className={styles.warningTitle}>
-					This rule affects {impacted.length} related asset
-					{impacted.length > 1 ? 's' : ''}.
-				</div>
-				{impactedLabels.length > 0 && (
-					<div className={styles.warningDetail}>
-						{impactedLabels.join(', ')} will no longer be queryable; affected panels
-						fall back to aggregated data once the rule applies.
-					</div>
-				)}
-				<ul className={styles.assetList}>
-					{impacted.map((asset) => {
-						const href = assetHref(asset);
-						const label = `${asset.name}${asset.widget ? ` · ${asset.widget}` : ''}`;
-						return (
-							<li key={`${asset.type}-${asset.id}-${asset.widgetId ?? ''}`}>
-								{href ? (
-									<a href={href} target="_blank" rel="noopener noreferrer">
-										{label}
-									</a>
-								) : (
-									label
-								)}
-							</li>
-						);
-					})}
-				</ul>
-			</div>
-		</div>
-	);
-}
-
-export default RelatedAssetsWarning;

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/VolumeControlConfig.module.scss

@@ -1,172 +0,0 @@
-.body {
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-	padding: 4px 2px;
-}
-
-.title {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-}
-
-.admin-tag {
-	font-size: 10px;
-	font-weight: 600;
-	letter-spacing: 0.03em;
-	color: var(--bg-amber-400, #ffd778);
-	border: 1px solid var(--bg-amber-500, #ffcc56);
-	border-radius: 99px;
-	padding: 1px 8px;
-}
-
-/* mode cards */
-.mode-cards {
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	gap: 10px;
-}
-
-.mode-card {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	text-align: left;
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	border-radius: 6px;
-	background: var(--bg-ink-300, #16181d);
-	padding: 12px;
-	cursor: pointer;
-	transition:
-		border-color 0.12s ease,
-		background 0.12s ease;
-}
-
-.mode-card:hover {
-	border-color: var(--bg-slate-200, #2c3140);
-}
-
-.mode-card-active {
-	border-color: var(--bg-robin-500, #4e74f8);
-	background: rgba(78, 116, 248, 0.08);
-}
-
-.mode-title {
-	font-size: 12.5px;
-	font-weight: 600;
-	color: var(--bg-vanilla-100, #fff);
-}
-
-.mode-desc {
-	font-size: 11px;
-	color: var(--bg-vanilla-400, #c0c1c3);
-	line-height: 1.45;
-}
-
-/* label selector */
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-}
-
-.field-label {
-	font-size: 12.5px;
-	font-weight: 600;
-	color: var(--bg-vanilla-100, #fff);
-}
-
-.field-hint {
-	font-size: 11px;
-	color: var(--bg-vanilla-400, #c0c1c3);
-}
-
-.label-select {
-	width: 100%;
-	margin-top: 4px;
-}
-
-/* impact panel */
-.impact {
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	border-radius: 6px;
-	background: var(--bg-ink-300, #16181d);
-	padding: 14px;
-}
-
-.impact-note {
-	font-size: 12px;
-	color: var(--bg-vanilla-400, #c0c1c3);
-}
-
-.meters {
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	gap: 12px;
-}
-
-.meter {
-	display: flex;
-	flex-direction: column;
-	gap: 5px;
-}
-
-.meter-label {
-	font-size: 10px;
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	color: var(--bg-vanilla-400, #c0c1c3);
-}
-
-.meter-value {
-	font-family: 'Geist Mono', monospace;
-	font-size: 18px;
-	color: var(--bg-vanilla-100, #fff);
-}
-
-.meter-value-good {
-	color: var(--bg-forest-400, #50e7a7);
-}
-
-/* related-asset warning */
-.warning {
-	display: flex;
-	gap: 10px;
-	padding: 11px 13px;
-	border-radius: 6px;
-	background: rgba(255, 204, 86, 0.07);
-	border: 1px solid rgba(255, 204, 86, 0.3);
-	color: var(--bg-amber-400, #ffd778);
-}
-
-.warning-title {
-	font-size: 12px;
-	font-weight: 600;
-	color: var(--bg-vanilla-100, #fff);
-}
-
-.warning-detail {
-	font-size: 11.5px;
-	color: var(--bg-vanilla-300, #e9e9e9);
-	margin-top: 4px;
-}
-
-.asset-list {
-	margin: 6px 0 0;
-	padding-left: 16px;
-	font-size: 11.5px;
-	color: var(--bg-vanilla-300, #e9e9e9);
-}
-
-/* footer */
-.footer {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	width: 100%;
-}
-
-.footer-spacer {
-	flex: 1;
-}

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/VolumeControlConfigDrawer.tsx

@@ -1,115 +0,0 @@
-import { Button } from '@signozhq/ui/button';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { MetricreductionruletypesGettableReductionRuleDTO } from 'api/generated/services/sigNoz.schemas';
-
-import ImpactPanel from './ImpactPanel';
-import LabelSelector from './LabelSelector';
-import ModeSelector from './ModeSelector';
-import RelatedAssetsWarning from './RelatedAssetsWarning';
-import { useVolumeControlConfig } from './useVolumeControlConfig';
-import styles from './VolumeControlConfig.module.scss';
-
-interface VolumeControlConfigDrawerProps {
-	metricName: string;
-	existingRule: MetricreductionruletypesGettableReductionRuleDTO | null;
-	open: boolean;
-	onClose: () => void;
-}
-
-function VolumeControlConfigDrawer({
-	metricName,
-	existingRule,
-	open,
-	onClose,
-}: VolumeControlConfigDrawerProps): JSX.Element {
-	const {
-		mode,
-		setMode,
-		labels,
-		setLabels,
-		attributeKeys,
-		isLoadingAttributes,
-		preview,
-		isPreviewLoading,
-		save,
-		remove,
-		isSaving,
-		isRemoving,
-		hasExistingRule,
-		isSaveDisabled,
-	} = useVolumeControlConfig({ metricName, existingRule, open, onClose });
-
-	const footer = (
-		<div className={styles.footer}>
-			<Button
-				variant="outlined"
-				color="secondary"
-				onClick={onClose}
-				data-testid="volume-control-cancel"
-			>
-				Cancel
-			</Button>
-			<div className={styles.footerSpacer} />
-			{hasExistingRule && (
-				<Button
-					variant="ghost"
-					color="destructive"
-					onClick={remove}
-					loading={isRemoving}
-					data-testid="volume-control-remove"
-				>
-					Remove rule
-				</Button>
-			)}
-			<Button
-				variant="solid"
-				color="primary"
-				onClick={save}
-				disabled={isSaveDisabled}
-				loading={isSaving}
-				data-testid="volume-control-save"
-			>
-				Save rule
-			</Button>
-		</div>
-	);
-
-	return (
-		<DrawerWrapper
-			open={open}
-			onOpenChange={(next: boolean): void => {
-				if (!next) {
-					onClose();
-				}
-			}}
-			title={`Manage attributes · ${metricName}`}
-			direction="right"
-			showCloseButton
-			width="wide"
-			footer={footer}
-			showOverlay={false}
-			className="volume-control-config-drawer"
-			style={{ zIndex: 1100 }}
-		>
-			<div className={styles.body} data-testid="volume-control-config-drawer">
-				<div className={styles.title}>
-					<span className={styles.adminTag}>Admin only</span>
-				</div>
-				<ModeSelector mode={mode} onChange={setMode} />
-				{mode !== 'all' && (
-					<LabelSelector
-						mode={mode}
-						options={attributeKeys}
-						value={labels}
-						onChange={setLabels}
-						loading={isLoadingAttributes}
-					/>
-				)}
-				<ImpactPanel mode={mode} preview={preview} isLoading={isPreviewLoading} />
-				<RelatedAssetsWarning affectedAssets={preview?.affectedAssets} />
-			</div>
-		</DrawerWrapper>
-	);
-}
-
-export default VolumeControlConfigDrawer;

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/VolumeControlSection.module.scss

@@ -1,114 +0,0 @@
-.section {
-	margin-top: 16px;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-bottom: 10px;
-	color: var(--bg-vanilla-400, #c0c1c3);
-}
-
-.title {
-	font-size: 11px;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-}
-
-.card {
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	border-radius: 6px;
-	padding: 12px 14px;
-	background: var(--bg-ink-300, #16181d);
-}
-
-.card-row {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-bottom: 8px;
-}
-
-.status-dot {
-	width: 7px;
-	height: 7px;
-	border-radius: 50%;
-	flex: 0 0 auto;
-}
-
-.status-active {
-	background: var(--bg-forest-500, #25e192);
-}
-
-.status-pending {
-	background: var(--bg-amber-500, #ffcc56);
-}
-
-.card-title {
-	font-weight: 600;
-}
-
-.mode {
-	display: block;
-	font-size: 12px;
-	color: var(--bg-vanilla-400, #c0c1c3);
-	margin-bottom: 8px;
-}
-
-.chips {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 6px;
-}
-
-.chip {
-	font-family: 'Geist Mono', monospace;
-	font-size: 11px;
-	padding: 2px 8px;
-	border-radius: 4px;
-	background: var(--bg-ink-200, #23262e);
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	color: var(--bg-vanilla-100, #fff);
-}
-
-.empty {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	border: 1px dashed var(--bg-slate-300, #242834);
-	border-radius: 6px;
-	padding: 14px;
-}
-
-.empty-text {
-	font-size: 12px;
-	color: var(--bg-vanilla-400, #c0c1c3);
-}
-
-.setup-button {
-	margin-top: 12px;
-}
-
-.edit-button {
-	margin-left: auto;
-}
-
-.pending-banner {
-	display: flex;
-	align-items: flex-start;
-	gap: 8px;
-	padding: 9px 12px;
-	margin-bottom: 10px;
-	border-radius: 6px;
-	background: rgba(35, 196, 248, 0.07);
-	border: 1px solid rgba(35, 196, 248, 0.25);
-	color: var(--bg-aqua-400, #4bcff9);
-}
-
-.pending-text {
-	font-size: 11.5px;
-	color: var(--bg-vanilla-300, #e9e9e9);
-	line-height: 1.45;
-}

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/VolumeControlSection.tsx

@@ -1,136 +0,0 @@
-import { Gauge, Info } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import { Skeleton } from 'antd';
-import { useGetMetricReductionRule } from 'api/generated/services/metrics';
-import { useVolumeControlFeatureGate } from 'hooks/metricsExplorer/useVolumeControlFeatureGate';
-import { useState } from 'react';
-
-import { getLabelVerb, getMatchTypeLabel } from './utils';
-import VolumeControlConfigDrawer from './VolumeControlConfigDrawer';
-import styles from './VolumeControlSection.module.scss';
-
-interface VolumeControlSectionProps {
-	metricName: string;
-}
-
-function VolumeControlSection({
-	metricName,
-}: VolumeControlSectionProps): JSX.Element | null {
-	const { isVolumeControlEnabled, canManageVolumeControl } =
-		useVolumeControlFeatureGate();
-	const [isConfigOpen, setIsConfigOpen] = useState(false);
-
-	const { data, isLoading, error } = useGetMetricReductionRule(
-		{ metricName },
-		{
-			query: {
-				enabled: isVolumeControlEnabled && !!metricName,
-				retry: false,
-			},
-		},
-	);
-
-	if (!isVolumeControlEnabled) {
-		return null;
-	}
-
-	const rule = data?.data;
-	const hasRule = !!rule && !error;
-
-	const openConfig = (): void => setIsConfigOpen(true);
-	const closeConfig = (): void => setIsConfigOpen(false);
-
-	return (
-		<div className={styles.section} data-testid="volume-control-section">
-			<div className={styles.header}>
-				<Gauge size={14} />
-				<Typography.Text className={styles.title}>Volume control</Typography.Text>
-			</div>
-
-			{isLoading && <Skeleton active title={false} paragraph={{ rows: 2 }} />}
-
-			{!isLoading && hasRule && rule && !rule.active && (
-				<div
-					className={styles.pendingBanner}
-					data-testid="volume-control-pending-banner"
-				>
-					<Info size={13} />
-					<Typography.Text className={styles.pendingText}>
-						This metric&apos;s configuration was recently updated. Reduced volumes
-						will take effect within a few minutes.
-					</Typography.Text>
-				</div>
-			)}
-
-			{!isLoading && hasRule && rule && (
-				<div className={styles.card} data-testid="volume-control-active">
-					<div className={styles.cardRow}>
-						<span
-							className={`${styles.statusDot} ${
-								rule.active ? styles.statusActive : styles.statusPending
-							}`}
-						/>
-						<Typography.Text className={styles.cardTitle}>
-							{rule.active
-								? 'Aggregation rule active'
-								: 'Aggregation rule pending activation'}
-						</Typography.Text>
-						{canManageVolumeControl && (
-							<Button
-								variant="ghost"
-								color="secondary"
-								className={styles.editButton}
-								onClick={openConfig}
-								data-testid="volume-control-edit"
-							>
-								Edit
-							</Button>
-						)}
-					</div>
-					<Typography.Text className={styles.mode}>
-						{getMatchTypeLabel(rule.matchType)}
-					</Typography.Text>
-					<div className={styles.chips}>
-						{(rule.labels ?? []).map((label) => (
-							<span className={styles.chip} key={label}>
-								{getLabelVerb(rule.matchType)} {label}
-							</span>
-						))}
-					</div>
-				</div>
-			)}
-
-			{!isLoading && !hasRule && (
-				<div className={styles.empty} data-testid="volume-control-empty">
-					<Typography.Text className={styles.emptyText}>
-						No volume control rule. All series are retained. Aggregate away
-						high-cardinality attributes to reduce cost.
-					</Typography.Text>
-					{canManageVolumeControl && (
-						<Button
-							variant="solid"
-							color="primary"
-							className={styles.setupButton}
-							onClick={openConfig}
-							data-testid="volume-control-setup"
-						>
-							Set up volume control
-						</Button>
-					)}
-				</div>
-			)}
-
-			{canManageVolumeControl && isConfigOpen && (
-				<VolumeControlConfigDrawer
-					metricName={metricName}
-					existingRule={rule ?? null}
-					open={isConfigOpen}
-					onClose={closeConfig}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default VolumeControlSection;

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/configUtils.ts

@@ -1,49 +0,0 @@
-import {
-	MetricreductionruletypesMatchTypeDTO,
-	MetricreductionruletypesGettableReductionRuleDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { RuleMode } from './types';
-
-export function modeFromRule(
-	rule: MetricreductionruletypesGettableReductionRuleDTO | null | undefined,
-): { mode: RuleMode; labels: string[] } {
-	if (!rule) {
-		return { mode: 'all', labels: [] };
-	}
-	return {
-		mode:
-			rule.matchType === MetricreductionruletypesMatchTypeDTO.keep
-				? 'include'
-				: 'exclude',
-		labels: rule.labels ?? [],
-	};
-}
-
-export function matchTypeForMode(
-	mode: RuleMode,
-): MetricreductionruletypesMatchTypeDTO {
-	return mode === 'include'
-		? MetricreductionruletypesMatchTypeDTO.keep
-		: MetricreductionruletypesMatchTypeDTO.drop;
-}
-
-export function formatCompact(value: number): string {
-	if (value >= 1e9) {
-		return `${(value / 1e9).toFixed(1)}B`;
-	}
-	if (value >= 1e6) {
-		return `${(value / 1e6).toFixed(1)}M`;
-	}
-	if (value >= 1e3) {
-		return `${(value / 1e3).toFixed(1)}K`;
-	}
-	return `${value}`;
-}
-
-export function formatUsd(value: number): string {
-	if (value >= 1e3) {
-		return `$${(value / 1e3).toFixed(1)}K`;
-	}
-	return `$${value.toFixed(2)}`;
-}

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/types.ts

@@ -1 +0,0 @@
-export type RuleMode = 'all' | 'include' | 'exclude';

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/useVolumeControlConfig.ts

@@ -1,182 +0,0 @@
-import {
-	invalidateGetMetricReductionRule,
-	invalidateListMetricReductionRules,
-	invalidateListMetrics,
-	useDeleteMetricReductionRule,
-	useGetMetricAttributes,
-	usePreviewMetricReductionRule,
-	useUpsertMetricReductionRule,
-} from 'api/generated/services/metrics';
-import {
-	MetricreductionruletypesGettableReductionRulePreviewDTO,
-	MetricreductionruletypesGettableReductionRuleDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { useNotifications } from 'hooks/useNotifications';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { matchTypeForMode, modeFromRule } from './configUtils';
-import { RuleMode } from './types';
-
-interface UseVolumeControlConfigParams {
-	metricName: string;
-	existingRule: MetricreductionruletypesGettableReductionRuleDTO | null;
-	open: boolean;
-	onClose: () => void;
-}
-
-export interface UseVolumeControlConfigResult {
-	mode: RuleMode;
-	setMode: (mode: RuleMode) => void;
-	labels: string[];
-	setLabels: (labels: string[]) => void;
-	attributeKeys: string[];
-	isLoadingAttributes: boolean;
-	preview?: MetricreductionruletypesGettableReductionRulePreviewDTO;
-	isPreviewLoading: boolean;
-	save: () => void;
-	remove: () => void;
-	isSaving: boolean;
-	isRemoving: boolean;
-	hasExistingRule: boolean;
-	isSaveDisabled: boolean;
-}
-
-const PREVIEW_DEBOUNCE_MS = 400;
-const SAVE_ERROR_MESSAGE = 'Failed to save volume control rule';
-const REMOVE_ERROR_MESSAGE = 'Failed to remove volume control rule';
-
-export function useVolumeControlConfig({
-	metricName,
-	existingRule,
-	open,
-	onClose,
-}: UseVolumeControlConfigParams): UseVolumeControlConfigResult {
-	const { notifications } = useNotifications();
-	const queryClient = useQueryClient();
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const initial = useMemo(() => modeFromRule(existingRule), [existingRule]);
-	const [mode, setMode] = useState<RuleMode>(initial.mode);
-	const [labels, setLabels] = useState<string[]>(initial.labels);
-
-	const attributesQuery = useGetMetricAttributes(
-		{ metricName },
-		{
-			start: minTime ? Math.floor(minTime / 1000000) : undefined,
-			end: maxTime ? Math.floor(maxTime / 1000000) : undefined,
-		},
-		{ query: { enabled: open && !!metricName } },
-	);
-	const attributeKeys = useMemo(
-		() => (attributesQuery.data?.data.attributes ?? []).map((attr) => attr.key),
-		[attributesQuery.data],
-	);
-
-	const previewMutation = usePreviewMetricReductionRule();
-	const { mutate: previewMutate, reset: previewReset } = previewMutation;
-	const [isPreviewPending, setIsPreviewPending] = useState(false);
-
-	useEffect(() => {
-		if (!open || mode === 'all' || labels.length === 0) {
-			previewReset();
-			setIsPreviewPending(false);
-			return undefined;
-		}
-		setIsPreviewPending(true);
-		const timer = setTimeout(() => {
-			previewMutate(
-				{ data: { metricName, matchType: matchTypeForMode(mode), labels } },
-				{ onSettled: () => setIsPreviewPending(false) },
-			);
-		}, PREVIEW_DEBOUNCE_MS);
-		return (): void => clearTimeout(timer);
-	}, [open, mode, labels, metricName, previewMutate, previewReset]);
-
-	const upsertMutation = useUpsertMetricReductionRule();
-	const deleteMutation = useDeleteMetricReductionRule();
-
-	const invalidate = useCallback((): void => {
-		void invalidateGetMetricReductionRule(queryClient, { metricName });
-		void invalidateListMetricReductionRules(queryClient);
-		void invalidateListMetrics(queryClient);
-	}, [queryClient, metricName]);
-
-	const removeRule = useCallback((): void => {
-		deleteMutation.mutate(
-			{ pathParams: { metricName } },
-			{
-				onSuccess: () => {
-					notifications.success({ message: 'Volume control rule removed' });
-					invalidate();
-					onClose();
-				},
-				onError: (error) =>
-					notifications.error({
-						message: error.response?.data?.error?.message ?? REMOVE_ERROR_MESSAGE,
-					}),
-			},
-		);
-	}, [deleteMutation, metricName, notifications, invalidate, onClose]);
-
-	const save = useCallback((): void => {
-		if (mode === 'all') {
-			if (!existingRule) {
-				onClose();
-				return;
-			}
-			removeRule();
-			return;
-		}
-		upsertMutation.mutate(
-			{
-				pathParams: { metricName },
-				data: { matchType: matchTypeForMode(mode), labels },
-			},
-			{
-				onSuccess: () => {
-					notifications.success({ message: 'Volume control rule saved' });
-					invalidate();
-					onClose();
-				},
-				onError: (error) =>
-					notifications.error({
-						message: error.response?.data?.error?.message ?? SAVE_ERROR_MESSAGE,
-					}),
-			},
-		);
-	}, [
-		mode,
-		labels,
-		metricName,
-		existingRule,
-		upsertMutation,
-		removeRule,
-		notifications,
-		invalidate,
-		onClose,
-	]);
-
-	return {
-		mode,
-		setMode,
-		labels,
-		setLabels,
-		attributeKeys,
-		isLoadingAttributes: attributesQuery.isLoading,
-		preview: previewMutation.data?.data,
-		isPreviewLoading: isPreviewPending,
-		save,
-		remove: removeRule,
-		isSaving: upsertMutation.isLoading || deleteMutation.isLoading,
-		isRemoving: deleteMutation.isLoading,
-		hasExistingRule: !!existingRule,
-		isSaveDisabled: mode !== 'all' && labels.length === 0,
-	};
-}

frontend/src/container/MetricsExplorer/MetricDetails/VolumeControl/utils.ts

@@ -1,19 +0,0 @@
-import { MetricreductionruletypesMatchTypeDTO } from 'api/generated/services/sigNoz.schemas';
-
-export function isKeepMode(
-	matchType: MetricreductionruletypesMatchTypeDTO,
-): boolean {
-	return matchType === MetricreductionruletypesMatchTypeDTO.keep;
-}
-
-export function getMatchTypeLabel(
-	matchType: MetricreductionruletypesMatchTypeDTO,
-): string {
-	return isKeepMode(matchType) ? 'Include attributes' : 'Exclude attributes';
-}
-
-export function getLabelVerb(
-	matchType: MetricreductionruletypesMatchTypeDTO,
-): string {
-	return isKeepMode(matchType) ? 'include' : 'exclude';
-}

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/Metadata.test.tsx

@@ -195,14 +195,12 @@ describe('Metadata', () => {
 		expect(mockUseUpdateMetricMetadata).toHaveBeenCalledWith(
 			expect.objectContaining({
 				data: expect.objectContaining({
+					metricName: MOCK_METRIC_NAME,
 					type: MetrictypesTypeDTO.sum,
 					temporality: MetrictypesTemporalityDTO.cumulative,
 					unit: 'By',
 					isMonotonic: true,
 				}),
-				pathParams: {
-					metricName: MOCK_METRIC_NAME,
-				},
 			}),
 			expect.objectContaining({
 				onSuccess: expect.any(Function),

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/MetricDetails.test.tsx

@@ -77,14 +77,6 @@ jest.mock(
 		},
 );
 
-jest.mock(
-	'container/MetricsExplorer/MetricDetails/VolumeControl/VolumeControlSection',
-	() =>
-		function MockVolumeControlSection(): JSX.Element {
-			return <div data-testid="volume-control-section-mock">Volume Control</div>;
-		},
-);
-
 const useGetMetricMetadataMock = jest.spyOn(
 	metricsExplorerHooks,
 	'useGetMetricMetadata',

frontend/src/container/MetricsExplorer/Summary/utils.tsx

@@ -1,5 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
-import { TableColumnType as ColumnType, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { TableColumnType as ColumnType } from 'antd';
 import {
 	MetricsexplorertypesStatDTO,
 	MetricsexplorertypesTreemapEntryDTO,

frontend/src/container/MetricsExplorer/VolumeControlTab/VolumeControlBadge.module.scss

@@ -1,27 +0,0 @@
-.badge {
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	height: 20px;
-	padding: 0 8px;
-	border-radius: 99px;
-	font-size: 11px;
-	font-weight: 600;
-}
-
-.active {
-	color: var(--bg-forest-400, #50e7a7);
-	background: rgba(37, 225, 146, 0.1);
-	border: 1px solid rgba(37, 225, 146, 0.22);
-}
-
-.pending {
-	color: var(--bg-amber-400, #ffd778);
-	background: rgba(255, 204, 86, 0.1);
-	border: 1px solid rgba(255, 204, 86, 0.25);
-}
-
-.none {
-	color: var(--bg-vanilla-400, #c0c1c3);
-	font-size: 12px;
-}

frontend/src/container/MetricsExplorer/VolumeControlTab/VolumeControlBadge.tsx

@@ -1,29 +0,0 @@
-import { Gauge } from '@signozhq/icons';
-import { MetricreductionruletypesGettableReductionRuleDTO } from 'api/generated/services/sigNoz.schemas';
-
-import styles from './VolumeControlBadge.module.scss';
-
-interface VolumeControlBadgeProps {
-	rule?: MetricreductionruletypesGettableReductionRuleDTO;
-}
-
-function VolumeControlBadge({ rule }: VolumeControlBadgeProps): JSX.Element {
-	if (!rule) {
-		return (
-			<span className={styles.none} data-testid="vc-badge-none">
-				—
-			</span>
-		);
-	}
-	return (
-		<span
-			className={`${styles.badge} ${rule.active ? styles.active : styles.pending}`}
-			data-testid="vc-badge-active"
-		>
-			<Gauge size={11} />
-			{rule.active ? 'Active' : 'Pending'}
-		</span>
-	);
-}
-
-export default VolumeControlBadge;

frontend/src/container/MetricsExplorer/VolumeControlTab/VolumeControlChart.tsx

@@ -1,90 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { Typography } from '@signozhq/ui/typography';
-import { useGetMetricReductionRuleTimeseries } from 'api/generated/services/metrics';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
-import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { useTimezone } from 'providers/Timezone';
-import { useMemo, useRef } from 'react';
-
-import { buildVolumeChartPayload } from './utils';
-import styles from './VolumeControlTab.module.scss';
-
-// Kept volume is neutral; saved volume gets the positive/green tone used for reduction elsewhere.
-const COLOR_MAPPING: Record<string, string> = {
-	'Reduced (kept)': Color.BG_ROBIN_500,
-	Saved: Color.BG_FOREST_500,
-};
-
-interface VolumeControlChartProps {
-	enabled: boolean;
-}
-
-function VolumeControlChart({ enabled }: VolumeControlChartProps): JSX.Element {
-	const { data } = useGetMetricReductionRuleTimeseries({ query: { enabled } });
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const dimensions = useResizeObserver(graphRef);
-
-	const payload = useMemo(
-		() => buildVolumeChartPayload(data?.data).payload,
-		[data],
-	);
-	const chartData = useMemo(() => getUPlotChartData(payload), [payload]);
-
-	const config = useMemo(() => {
-		const timestamps = (chartData[0] as number[]) ?? [];
-		const builder = buildBaseConfig({
-			id: 'metric-volume-control',
-			isDarkMode,
-			apiResponse: payload,
-			timezone,
-			panelType: PANEL_TYPES.BAR,
-			yAxisUnit: 'short',
-			onDragSelect: (): void => {},
-			minTimeScale: timestamps[0],
-			maxTimeScale: timestamps[timestamps.length - 1],
-		});
-		(payload.data.result ?? []).forEach((series) => {
-			builder.addSeries({
-				scaleKey: 'y',
-				drawStyle: DrawStyle.Bar,
-				label: series.legend ?? series.queryName,
-				colorMapping: COLOR_MAPPING,
-				isDarkMode,
-			});
-		});
-		return builder;
-	}, [payload, chartData, isDarkMode, timezone]);
-
-	return (
-		<div className={styles.chart} data-testid="volume-control-chart">
-			<Typography.Text className={styles.chartTitle}>
-				Series volume over time · kept vs saved
-			</Typography.Text>
-			<div className={styles.chartBody} ref={graphRef}>
-				{dimensions.width > 0 && (
-					<BarChart
-						config={config}
-						data={chartData}
-						width={dimensions.width}
-						height={dimensions.height}
-						isStackedBarChart
-						yAxisUnit="short"
-						timezone={timezone}
-						legendConfig={{ position: LegendPosition.BOTTOM }}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default VolumeControlChart;

frontend/src/container/MetricsExplorer/VolumeControlTab/VolumeControlTab.module.scss

@@ -1,153 +0,0 @@
-.tab {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	padding: 16px 0;
-}
-
-.header {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.title-row {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	color: var(--bg-robin-400, #7190f9);
-}
-
-.title {
-	margin: 0 !important;
-}
-
-.subtitle {
-	font-size: 13px;
-	color: var(--bg-vanilla-400, #c0c1c3);
-	max-width: 680px;
-}
-
-.stats {
-	display: flex;
-	gap: 12px;
-}
-
-.search {
-	max-width: 320px;
-}
-
-.chart {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	border-radius: 6px;
-	padding: 12px 16px;
-}
-
-.chart-title {
-	font-size: 11px;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	color: var(--bg-vanilla-400, #c0c1c3);
-}
-
-.chart-body {
-	height: 340px;
-}
-
-.toolbar {
-	display: flex;
-	justify-content: flex-end;
-}
-
-.stats {
-	flex-wrap: wrap;
-}
-
-.stat {
-	display: flex;
-	flex: 1 1 0;
-	flex-direction: column;
-	gap: 6px;
-	min-width: 150px;
-	padding: 12px 16px;
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	border-radius: 6px;
-	background: var(--bg-ink-400, #121317);
-}
-
-.stat-hero {
-	border-color: rgba(80, 231, 167, 0.4);
-	background: rgba(80, 231, 167, 0.06);
-}
-
-.stat-label {
-	font-size: 11px;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	color: var(--bg-vanilla-400, #c0c1c3);
-}
-
-.stat-value {
-	display: flex;
-	align-items: baseline;
-	gap: 6px;
-	font-family: 'Geist Mono', monospace;
-	font-size: 22px;
-	font-weight: 600;
-	color: var(--bg-vanilla-100, #fff);
-}
-
-.stat-value-good {
-	color: var(--bg-forest-400, #50e7a7);
-}
-
-.stat-delta {
-	font-size: 13px;
-	font-weight: 600;
-	color: var(--bg-forest-400, #50e7a7);
-}
-
-.stat-unit {
-	font-size: 13px;
-	font-weight: 500;
-	color: var(--bg-vanilla-400, #c0c1c3);
-}
-
-.metric-name {
-	font-family: 'Geist Mono', monospace;
-	font-size: 12.5px;
-	color: var(--bg-vanilla-100, #fff);
-}
-
-.attributes {
-	font-family: 'Geist Mono', monospace;
-	font-size: 12px;
-	color: var(--bg-vanilla-300, #e9e9e9);
-}
-
-.muted {
-	font-size: 12px;
-	color: var(--bg-vanilla-400, #c0c1c3);
-}
-
-.reduction {
-	font-family: 'Geist Mono', monospace;
-	font-size: 12px;
-	font-weight: 600;
-	color: var(--bg-forest-400, #50e7a7);
-}
-
-.empty {
-	padding: 32px 16px;
-	text-align: center;
-	color: var(--bg-vanilla-400, #c0c1c3);
-}
-
-.unavailable {
-	padding: 48px 16px;
-	text-align: center;
-	color: var(--bg-vanilla-400, #c0c1c3);
-}

frontend/src/container/MetricsExplorer/VolumeControlTab/VolumeControlTab.tsx

@@ -1,339 +0,0 @@
-import { Gauge } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import { Input, Table } from 'antd';
-import type { TableColumnsType, TableProps } from 'antd';
-import {
-	useGetMetricReductionRuleStats,
-	useListMetricReductionRules,
-} from 'api/generated/services/metrics';
-import {
-	ListMetricReductionRulesParams,
-	MetricreductionruletypesGettableReductionRuleDTO,
-	MetricreductionruletypesOrderDTO,
-	MetricreductionruletypesReductionRuleOrderByDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import dayjs from 'dayjs';
-import { useVolumeControlFeatureGate } from 'hooks/metricsExplorer/useVolumeControlFeatureGate';
-import useDebounce from 'hooks/useDebounce';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import {
-	formatCompact,
-	formatUsd,
-} from '../MetricDetails/VolumeControl/configUtils';
-import {
-	getLabelVerb,
-	getMatchTypeLabel,
-} from '../MetricDetails/VolumeControl/utils';
-import VolumeControlConfigDrawer from '../MetricDetails/VolumeControl/VolumeControlConfigDrawer';
-import VolumeControlBadge from './VolumeControlBadge';
-import VolumeControlChart from './VolumeControlChart';
-import styles from './VolumeControlTab.module.scss';
-
-const OrderBy = MetricreductionruletypesReductionRuleOrderByDTO;
-const SortOrder = MetricreductionruletypesOrderDTO;
-const DEFAULT_PAGE_SIZE = 10;
-
-const DEFAULT_PARAMS: Required<ListMetricReductionRulesParams> = {
-	orderBy: OrderBy.reduction,
-	order: SortOrder.desc,
-	search: '',
-	offset: 0,
-	limit: DEFAULT_PAGE_SIZE,
-};
-
-function VolumeControlTab(): JSX.Element {
-	const { isVolumeControlEnabled, canManageVolumeControl } =
-		useVolumeControlFeatureGate();
-	const [selectedRule, setSelectedRule] =
-		useState<MetricreductionruletypesGettableReductionRuleDTO | null>(null);
-	const [params, setParams] =
-		useState<Required<ListMetricReductionRulesParams>>(DEFAULT_PARAMS);
-
-	const [searchInput, setSearchInput] = useState('');
-	const debouncedSearch = useDebounce(searchInput, 400);
-	useEffect(() => {
-		setParams((prev) =>
-			prev.search === debouncedSearch
-				? prev
-				: { ...prev, search: debouncedSearch, offset: 0 },
-		);
-	}, [debouncedSearch]);
-
-	const { data, isLoading } = useListMetricReductionRules(params, {
-		query: { enabled: isVolumeControlEnabled },
-	});
-
-	const { data: statsData } = useGetMetricReductionRuleStats({
-		query: { enabled: isVolumeControlEnabled },
-	});
-	const stats = statsData?.data;
-	const overallReduction =
-		stats && stats.ingestedSeries > 0
-			? Math.round((1 - stats.reducedSeries / stats.ingestedSeries) * 100)
-			: 0;
-
-	const rules = data?.data.rules ?? [];
-	const total = data?.data.total ?? 0;
-
-	const sortOrderFor = useCallback(
-		(
-			key: MetricreductionruletypesReductionRuleOrderByDTO,
-		): 'ascend' | 'descend' | undefined => {
-			if (params.orderBy !== key) {
-				return undefined;
-			}
-			return params.order === SortOrder.desc ? 'descend' : 'ascend';
-		},
-		[params],
-	);
-
-	const columns: TableColumnsType<MetricreductionruletypesGettableReductionRuleDTO> =
-		useMemo(
-			() => [
-				{
-					title: 'METRIC',
-					dataIndex: 'metricName',
-					key: OrderBy.metric,
-					sorter: true,
-					sortOrder: sortOrderFor(OrderBy.metric),
-					render: (metricName: string): JSX.Element => (
-						<span className={styles.metricName}>{metricName}</span>
-					),
-				},
-				{
-					title: 'STATUS',
-					key: 'status',
-					width: 130,
-					render: (
-						_value: unknown,
-						rule: MetricreductionruletypesGettableReductionRuleDTO,
-					): JSX.Element => <VolumeControlBadge rule={rule} />,
-				},
-				{
-					title: 'MODE',
-					key: 'mode',
-					width: 160,
-					render: (
-						_value: unknown,
-						rule: MetricreductionruletypesGettableReductionRuleDTO,
-					): JSX.Element => <span>{getMatchTypeLabel(rule.matchType)}</span>,
-				},
-				{
-					title: 'ATTRIBUTES',
-					key: 'attributes',
-					render: (
-						_value: unknown,
-						rule: MetricreductionruletypesGettableReductionRuleDTO,
-					): JSX.Element => (
-						<span className={styles.attributes}>
-							{getLabelVerb(rule.matchType)} {(rule.labels ?? []).join(', ') || '—'}
-						</span>
-					),
-				},
-				{
-					title: 'INGESTED',
-					key: OrderBy.ingested_volume,
-					width: 130,
-					sorter: true,
-					sortOrder: sortOrderFor(OrderBy.ingested_volume),
-					render: (
-						_value: unknown,
-						rule: MetricreductionruletypesGettableReductionRuleDTO,
-					): JSX.Element => (
-						<span className={styles.muted}>{formatCompact(rule.ingestedSeries)}</span>
-					),
-				},
-				{
-					title: 'REDUCED',
-					key: OrderBy.reduced_volume,
-					width: 130,
-					sorter: true,
-					sortOrder: sortOrderFor(OrderBy.reduced_volume),
-					render: (
-						_value: unknown,
-						rule: MetricreductionruletypesGettableReductionRuleDTO,
-					): JSX.Element => <span>{formatCompact(rule.reducedSeries)}</span>,
-				},
-				{
-					title: 'CHANGE',
-					key: OrderBy.reduction,
-					width: 110,
-					sorter: true,
-					sortOrder: sortOrderFor(OrderBy.reduction),
-					render: (
-						_value: unknown,
-						rule: MetricreductionruletypesGettableReductionRuleDTO,
-					): JSX.Element => {
-						if (rule.reductionPercent <= 0) {
-							return <span className={styles.muted}>—</span>;
-						}
-						return (
-							<span className={styles.reduction}>
-								−{Math.round(rule.reductionPercent)}%
-							</span>
-						);
-					},
-				},
-				{
-					title: 'LAST CONFIGURED',
-					key: OrderBy.last_updated,
-					width: 240,
-					sorter: true,
-					sortOrder: sortOrderFor(OrderBy.last_updated),
-					render: (
-						_value: unknown,
-						rule: MetricreductionruletypesGettableReductionRuleDTO,
-					): JSX.Element => (
-						<span className={styles.muted}>
-							{dayjs(rule.updatedAt).format('MMM D, YYYY · h:mm A')}
-							{rule.updatedBy ? ` · ${rule.updatedBy}` : ''}
-						</span>
-					),
-				},
-				...(canManageVolumeControl
-					? ([
-							{
-								title: '',
-								key: 'action',
-								width: 110,
-								render: (
-									_value: unknown,
-									rule: MetricreductionruletypesGettableReductionRuleDTO,
-								): JSX.Element => (
-									<Button
-										variant="ghost"
-										color="secondary"
-										onClick={(): void => setSelectedRule(rule)}
-										data-testid={`vc-manage-${rule.metricName}`}
-									>
-										Manage
-									</Button>
-								),
-							},
-						] as TableColumnsType<MetricreductionruletypesGettableReductionRuleDTO>)
-					: []),
-			],
-			[canManageVolumeControl, sortOrderFor],
-		);
-
-	const handleTableChange: TableProps<MetricreductionruletypesGettableReductionRuleDTO>['onChange'] =
-		(pagination, _filters, sorter): void => {
-			const active = Array.isArray(sorter) ? sorter[0] : sorter;
-			const pageSize = pagination.pageSize ?? DEFAULT_PAGE_SIZE;
-			const current = pagination.current ?? 1;
-
-			setParams((prev) => ({
-				...prev,
-				orderBy: active?.order
-					? (active.columnKey as MetricreductionruletypesReductionRuleOrderByDTO)
-					: DEFAULT_PARAMS.orderBy,
-				order: active?.order === 'descend' ? SortOrder.desc : SortOrder.asc,
-				limit: pageSize,
-				offset: (current - 1) * pageSize,
-			}));
-		};
-
-	if (!isVolumeControlEnabled) {
-		return (
-			<div className={styles.unavailable} data-testid="volume-control-unavailable">
-				<Typography.Text>
-					Volume control is available on enterprise and cloud plans.
-				</Typography.Text>
-			</div>
-		);
-	}
-
-	return (
-		<div className={styles.tab} data-testid="volume-control-tab">
-			<div className={styles.header}>
-				<div className={styles.titleRow}>
-					<Gauge size={18} />
-					<Typography.Title level={4} className={styles.title}>
-						Volume Control
-					</Typography.Title>
-				</div>
-				<Typography.Text className={styles.subtitle}>
-					Aggregate away high-cardinality attributes to reduce stored metric volume
-					and cost.
-				</Typography.Text>
-			</div>
-
-			<div className={styles.stats}>
-				<div className={styles.stat}>
-					<span className={styles.statLabel}>Active rules</span>
-					<span className={styles.statValue}>{total}</span>
-				</div>
-				<div className={styles.stat}>
-					<span className={styles.statLabel}>Ingested series</span>
-					<span className={styles.statValue}>
-						{formatCompact(stats?.ingestedSeries ?? 0)}
-					</span>
-				</div>
-				<div className={styles.stat}>
-					<span className={styles.statLabel}>Reduced series</span>
-					<span className={styles.statValue}>
-						{formatCompact(stats?.reducedSeries ?? 0)}
-						{overallReduction > 0 && (
-							<span className={styles.statDelta}>−{overallReduction}%</span>
-						)}
-					</span>
-				</div>
-				<div className={`${styles.stat} ${styles.statHero}`}>
-					<span className={styles.statLabel}>Est. monthly savings</span>
-					<span className={`${styles.statValue} ${styles.statValueGood}`}>
-						{formatUsd(stats?.estimatedMonthlySavingsUsd ?? 0)}
-						<span className={styles.statUnit}>/mo</span>
-					</span>
-				</div>
-			</div>
-
-			<VolumeControlChart enabled={isVolumeControlEnabled} />
-
-			<div className={styles.toolbar}>
-				<Input
-					className={styles.search}
-					placeholder="Search metrics"
-					allowClear
-					value={searchInput}
-					onChange={(e): void => setSearchInput(e.target.value)}
-					data-testid="volume-control-search"
-				/>
-			</div>
-
-			<Table<MetricreductionruletypesGettableReductionRuleDTO>
-				rowKey="metricName"
-				loading={isLoading}
-				dataSource={rules}
-				columns={columns}
-				onChange={handleTableChange}
-				pagination={{
-					current: Math.floor(params.offset / params.limit) + 1,
-					pageSize: params.limit,
-					total,
-					showSizeChanger: false,
-				}}
-				locale={{
-					emptyText: (
-						<div className={styles.empty} data-testid="volume-control-tab-empty">
-							No volume control rules yet. Open a metric and set one up to start
-							reducing its series volume.
-						</div>
-					),
-				}}
-			/>
-
-			{canManageVolumeControl && selectedRule && (
-				<VolumeControlConfigDrawer
-					metricName={selectedRule.metricName}
-					existingRule={selectedRule}
-					open={!!selectedRule}
-					onClose={(): void => setSelectedRule(null)}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default VolumeControlTab;

frontend/src/container/MetricsExplorer/VolumeControlTab/utils.ts

@@ -1,77 +0,0 @@
-import {
-	Querybuildertypesv5QueryRangeResponseDTO,
-	Querybuildertypesv5TimeSeriesDataDTO,
-	Querybuildertypesv5TimeSeriesDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { SuccessResponse } from 'types/api';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-function findSeries(
-	series: Querybuildertypesv5TimeSeriesDTO[] | null | undefined,
-	label: string,
-): Querybuildertypesv5TimeSeriesDTO | undefined {
-	return series?.find((entry) =>
-		(entry.labels ?? []).some((value) => value.value === label),
-	);
-}
-
-// query-range chart values are [unixSeconds, valueString]; our points carry unix millis.
-function toSeconds(timestampMs: number): number {
-	return Math.floor(timestampMs / 1000);
-}
-
-// buildVolumeChartPayload adapts the v5 query-range timeseries into the chart payload as a kept + saved
-// part-to-whole stack (kept + saved = original ingested volume).
-export function buildVolumeChartPayload(
-	response?: Querybuildertypesv5QueryRangeResponseDTO,
-): SuccessResponse<MetricRangePayloadProps> {
-	const result = response?.data?.results?.[0] as
-		| Querybuildertypesv5TimeSeriesDataDTO
-		| undefined;
-	const series = result?.aggregations?.[0]?.series;
-
-	const ingested = findSeries(series, 'ingested')?.values ?? [];
-	const reduced = findSeries(series, 'reduced')?.values ?? [];
-	const reducedByTs = new Map<number, number>();
-	reduced.forEach((point) =>
-		reducedByTs.set(point.timestamp ?? 0, point.value ?? 0),
-	);
-
-	const keptValues: [number, string][] = reduced.map((point) => [
-		toSeconds(point.timestamp ?? 0),
-		String(point.value ?? 0),
-	]);
-	const savedValues: [number, string][] = ingested.map((point) => {
-		const saved = Math.max(
-			0,
-			(point.value ?? 0) - (reducedByTs.get(point.timestamp ?? 0) ?? 0),
-		);
-		return [toSeconds(point.timestamp ?? 0), String(saved)];
-	});
-
-	return {
-		statusCode: 200,
-		message: 'Success',
-		error: null,
-		payload: {
-			data: {
-				resultType: 'matrix',
-				result: [
-					{
-						queryName: 'reduced',
-						legend: 'Reduced (kept)',
-						metric: {},
-						values: keptValues,
-					},
-					{
-						queryName: 'saved',
-						legend: 'Saved',
-						metric: {},
-						values: savedValues,
-					},
-				],
-				newResult: { data: { result: [], resultType: 'matrix' } },
-			},
-		},
-	};
-}

frontend/src/container/RolesSettings/CreateEditRolePage/CreateEditRolePage.module.scss

@@ -0,0 +1,107 @@
+.createEditRolePage {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	padding: var(--spacing-8);
+	width: 100%;
+	max-width: 1400px;
+	margin: 0 auto;
+	height: 100%;
+	min-height: 0;
+}
+
+.createEditRolePageHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-8);
+}
+
+.createEditRolePageHeaderLeft {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-6);
+}
+
+.backButton {
+	--button-padding: var(--spacing-3);
+}
+
+.createEditRolePageActions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-6);
+}
+
+.unsavedIndicator {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	margin-right: var(--spacing-4);
+}
+
+.unsavedDot {
+	display: block;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--primary);
+	box-shadow: 0px 0px 6px 0px
+		color-mix(in srgb, var(--primary-background) 40%, transparent);
+	flex-shrink: 0;
+}
+
+.unsavedText {
+	color: var(--primary);
+}
+
+.createEditRolePageContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	flex: 1;
+	min-height: 0;
+}
+
+.createEditRolePageForm {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+}
+
+.formRow {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: var(--spacing-8);
+}
+
+.formField {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+
+	--input-background: var(--l2-background);
+	--input-hover-background: var(--l2-background);
+	--input-focus-background: var(--l2-background);
+	--input-disabled-background: var(--l2-background);
+
+	input::placeholder {
+		color: var(--l3-foreground);
+	}
+}
+
+.formLabel {
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-20);
+	letter-spacing: 0.48px;
+	text-transform: uppercase;
+	color: var(--l2-foreground);
+}
+
+.createEditRolePageDivider {
+	width: 100%;
+	height: 1px;
+	background: var(--l1-border);
+}

frontend/src/container/RolesSettings/CreateEditRolePage/CreateEditRolePage.tsx

@@ -0,0 +1,291 @@
+import { useCallback, useState } from 'react';
+import { matchPath, useHistory, useLocation } from 'react-router-dom';
+import { ArrowLeft, SolidAlertTriangle } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { ConfirmDialog } from '@signozhq/ui/dialog';
+import { Input } from '@signozhq/ui/input';
+import { Typography } from '@signozhq/ui/typography';
+import { Skeleton } from 'antd';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import ROUTES from 'constants/routes';
+import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
+import useUrlQuery from 'hooks/useUrlQuery';
+import APIError from 'types/api/error';
+
+import PermissionEditor from './components/PermissionEditor';
+import { useCreateEditRolePageActions } from './useCreateEditRolePageActions';
+import { useNavigationBlocker } from '../../../hooks/useNavigationBlocker';
+
+import styles from './CreateEditRolePage.module.scss';
+
+function CreateEditRolePage(): JSX.Element {
+	const history = useHistory();
+	const { pathname } = useLocation();
+	const urlQuery = useUrlQuery();
+	const match = matchPath<{ roleId: string }>(pathname, {
+		path: ROUTES.ROLE_DETAILS,
+	});
+	const roleId = match?.params?.roleId ?? 'new';
+	const roleName = urlQuery.get('name') ?? '';
+	const [hasJsonError, setHasJsonError] = useState(false);
+	const { isRolesEnabled, isLoading: isFeatureGateLoading } =
+		useRolesFeatureGate();
+
+	const {
+		formData,
+		editorMode,
+		setEditorMode,
+		resources,
+		setResources,
+		isLoading,
+		isSaving,
+		hasUnsavedChanges,
+		handleSave,
+		handleCancel,
+		handleFormChange,
+		saveError,
+		validationErrors,
+		isCreateMode,
+		hasRequiredPermission,
+		isAuthZLoading,
+		deniedPermission,
+		loadError,
+	} = useCreateEditRolePageActions(roleId, roleName);
+
+	const { isBlocked, confirmNavigation, cancelNavigation, allowNextNavigation } =
+		useNavigationBlocker(hasUnsavedChanges);
+
+	const handleSaveAndNavigate = useCallback(async (): Promise<void> => {
+		if (hasJsonError) {
+			return;
+		}
+
+		const success = await handleSave();
+		if (success) {
+			allowNextNavigation();
+			if (isCreateMode) {
+				history.push(ROUTES.ROLES_SETTINGS);
+			} else {
+				const viewUrl = `${ROUTES.ROLE_DETAILS.replace(':roleId', roleId)}?name=${encodeURIComponent(roleName)}`;
+				history.push(viewUrl);
+			}
+		}
+	}, [
+		handleSave,
+		allowNextNavigation,
+		history,
+		hasJsonError,
+		isCreateMode,
+		roleId,
+		roleName,
+	]);
+
+	if (!hasRequiredPermission && !isAuthZLoading) {
+		return <PermissionDeniedFullPage permissionName={deniedPermission} />;
+	}
+
+	if (!isRolesEnabled && !isFeatureGateLoading) {
+		return (
+			<div
+				className={styles.createEditRolePage}
+				data-testid="create-edit-role-page"
+			>
+				<div className={styles.createEditRolePageHeader}>
+					<div className={styles.createEditRolePageHeaderLeft}>
+						<Button
+							variant="ghost"
+							color="secondary"
+							onClick={handleCancel}
+							data-testid="cancel-button"
+							className={styles.backButton}
+						>
+							<ArrowLeft size={16} />
+						</Button>
+						<Typography.Title level={3}>
+							{isCreateMode ? 'Create Role' : 'Edit Role'}
+						</Typography.Title>
+					</div>
+				</div>
+
+				<ErrorInPlace
+					error={
+						new APIError({
+							httpStatusCode: 403,
+							error: {
+								code: 'FEATURE_DISABLED',
+								message:
+									'Custom roles feature is not available. Please check your license or feature configuration.',
+								url: '',
+								errors: [],
+							},
+						})
+					}
+					data-testid="feature-gate-error-banner"
+				/>
+			</div>
+		);
+	}
+
+	if (isAuthZLoading || (isLoading && !isCreateMode) || isFeatureGateLoading) {
+		return (
+			<div className={styles.createEditRolePage}>
+				<Skeleton active paragraph={{ rows: 8 }} />
+			</div>
+		);
+	}
+
+	if (loadError) {
+		return (
+			<div
+				className={styles.createEditRolePage}
+				data-testid="create-edit-role-page"
+			>
+				<div className={styles.createEditRolePageHeader}>
+					<div className={styles.createEditRolePageHeaderLeft}>
+						<Button
+							variant="ghost"
+							color="secondary"
+							onClick={handleCancel}
+							disabled={isSaving}
+							data-testid="cancel-button"
+							className={styles.backButton}
+						>
+							<ArrowLeft size={16} />
+						</Button>
+						<Typography.Title level={3}>Failed to load role</Typography.Title>
+					</div>
+				</div>
+
+				<ErrorInPlace error={loadError} data-testid="role-load-error-banner" />
+			</div>
+		);
+	}
+
+	return (
+		<div
+			className={styles.createEditRolePage}
+			data-testid="create-edit-role-page"
+		>
+			<div className={styles.createEditRolePageHeader}>
+				<div className={styles.createEditRolePageHeaderLeft}>
+					<Button
+						variant="ghost"
+						color="secondary"
+						onClick={handleCancel}
+						disabled={isSaving}
+						data-testid="cancel-button"
+						className={styles.backButton}
+					>
+						<ArrowLeft size={16} />
+					</Button>
+					<Typography.Title level={3}>
+						{isCreateMode
+							? 'Create Role'
+							: `Role - ${formData.name || 'Loading role...'}`}
+					</Typography.Title>
+				</div>
+
+				<div className={styles.createEditRolePageActions}>
+					{hasUnsavedChanges && (
+						<div className={styles.unsavedIndicator}>
+							<span className={styles.unsavedDot} />
+							<Typography as="span" size="base" className={styles.unsavedText}>
+								Unsaved changes
+							</Typography>
+						</div>
+					)}
+					<Button
+						variant="solid"
+						color="primary"
+						onClick={handleSaveAndNavigate}
+						loading={isSaving}
+						disabled={!hasUnsavedChanges || hasJsonError}
+						data-testid="save-button"
+					>
+						{isCreateMode ? 'Create role' : 'Save changes'}
+					</Button>
+				</div>
+			</div>
+
+			{saveError && (
+				<ErrorInPlace
+					error={saveError}
+					height="auto"
+					bordered
+					data-testid="save-error-banner"
+				/>
+			)}
+
+			<div className={styles.createEditRolePageContent}>
+				<div className={styles.createEditRolePageForm}>
+					<div className={styles.formRow}>
+						{isCreateMode ? (
+							<div className={styles.formField}>
+								<label htmlFor="role-name" className={styles.formLabel}>
+									Name
+								</label>
+								<Input
+									id="role-name"
+									value={formData.name}
+									onChange={(e): void => handleFormChange('name', e.target.value)}
+									placeholder="my-custom-role"
+									data-testid="role-name-input"
+								/>
+							</div>
+						) : null}
+						<div className={styles.formField}>
+							<label htmlFor="role-description" className={styles.formLabel}>
+								Description
+							</label>
+							<Input
+								id="role-description"
+								value={formData.description}
+								onChange={(e): void => handleFormChange('description', e.target.value)}
+								placeholder="Custom role for the support team"
+								data-testid="role-description-input"
+							/>
+						</div>
+					</div>
+				</div>
+
+				<div className={styles.createEditRolePageDivider} />
+
+				<PermissionEditor
+					resources={resources}
+					mode={editorMode}
+					onModeChange={setEditorMode}
+					onResourceChange={setResources}
+					onJsonValidityChange={setHasJsonError}
+					isLoading={isLoading}
+					validationErrors={validationErrors}
+				/>
+			</div>
+
+			<ConfirmDialog
+				open={isBlocked}
+				onOpenChange={(next): void => {
+					if (!next) {
+						cancelNavigation();
+					}
+				}}
+				title="Discard unsaved changes?"
+				titleIcon={<SolidAlertTriangle size={14} color="#fdd600" />}
+				confirmText="Discard"
+				confirmColor="destructive"
+				cancelText="Keep editing"
+				onConfirm={confirmNavigation}
+				onCancel={cancelNavigation}
+				data-testid="discard-changes-dialog"
+			>
+				<Typography>
+					{isCreateMode
+						? 'This new role will not be created.'
+						: 'Your unsaved changes will be lost.'}
+				</Typography>
+			</ConfirmDialog>
+		</div>
+	);
+}
+
+export default CreateEditRolePage;

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateEditRolePage.featureGate.test.tsx

@@ -0,0 +1,139 @@
+import { Route, Switch } from 'react-router-dom';
+import ROUTES from 'constants/routes';
+import { FeatureKeys } from 'constants/features';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
+import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+
+import CreateEditRolePage from '../CreateEditRolePage';
+
+jest.mock('hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
+beforeEach(() => {
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
+});
+
+afterEach(() => {
+	jest.clearAllMocks();
+});
+
+function renderCreatePage(
+	appContextOverrides?: Record<string, unknown>,
+): ReturnType<typeof render> {
+	return render(
+		<Switch>
+			<Route path={ROUTES.ROLES_SETTINGS} exact>
+				<div data-testid="roles-list-redirect" />
+			</Route>
+			<Route path={ROUTES.ROLE_CREATE}>
+				<CreateEditRolePage />
+			</Route>
+		</Switch>,
+		undefined,
+		{ initialRoute: '/settings/roles/new', appContextOverrides },
+	);
+}
+
+function renderEditPage(
+	roleId: string,
+	roleName: string,
+	appContextOverrides?: Record<string, unknown>,
+): ReturnType<typeof render> {
+	return render(
+		<Switch>
+			<Route path={ROUTES.ROLES_SETTINGS} exact>
+				<div data-testid="roles-list-redirect" />
+			</Route>
+			<Route path={ROUTES.ROLE_EDIT}>
+				<CreateEditRolePage />
+			</Route>
+		</Switch>,
+		undefined,
+		{
+			initialRoute: `/settings/roles/${roleId}/edit?name=${encodeURIComponent(roleName)}`,
+			appContextOverrides,
+		},
+	);
+}
+
+describe('CreateEditRolePage - Feature Gate', () => {
+	describe('create mode - feature disabled', () => {
+		it('shows error when fine-grained authz flag is inactive', async () => {
+			renderCreatePage({
+				featureFlags: defaultFeatureFlags.map((f) =>
+					f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
+						? { ...f, active: false }
+						: f,
+				),
+			});
+
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
+			await expect(
+				screen.findByText(/Custom roles feature is not available/i),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('shows error when license is invalid', async () => {
+			renderCreatePage({ activeLicense: invalidLicense });
+
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
+			await expect(
+				screen.findByText(/Custom roles feature is not available/i),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('shows Create Role title when feature disabled in create mode', async () => {
+			renderCreatePage({ activeLicense: invalidLicense });
+
+			await expect(screen.findByText('Create Role')).resolves.toBeInTheDocument();
+		});
+
+		it('shows back button when feature disabled', () => {
+			renderCreatePage({ activeLicense: invalidLicense });
+
+			expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
+		});
+
+		it('back button is enabled when feature disabled', () => {
+			renderCreatePage({ activeLicense: invalidLicense });
+
+			expect(screen.getByTestId('cancel-button')).not.toBeDisabled();
+		});
+	});
+
+	describe('edit mode - feature disabled', () => {
+		const ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
+		const ROLE_NAME = 'test-role';
+
+		it('shows error when fine-grained authz flag is inactive', async () => {
+			renderEditPage(ROLE_ID, ROLE_NAME, {
+				featureFlags: defaultFeatureFlags.map((f) =>
+					f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
+						? { ...f, active: false }
+						: f,
+				),
+			});
+
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
+			await expect(
+				screen.findByText(/Custom roles feature is not available/i),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('shows error when license is invalid', async () => {
+			renderEditPage(ROLE_ID, ROLE_NAME, { activeLicense: invalidLicense });
+
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
+			await expect(
+				screen.findByText(/Custom roles feature is not available/i),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('shows Edit Role title when feature disabled in edit mode', async () => {
+			renderEditPage(ROLE_ID, ROLE_NAME, { activeLicense: invalidLicense });
+
+			await expect(screen.findByText('Edit Role')).resolves.toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.authz.test.tsx

@@ -0,0 +1,59 @@
+import { Route, Switch } from 'react-router-dom';
+import ROUTES from 'constants/routes';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { render, screen } from 'tests/test-utils';
+import { mockUseAuthZDenyAll } from 'tests/authz-test-utils';
+
+import CreateEditRolePage from '../CreateEditRolePage';
+
+jest.mock('hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
+afterEach(() => {
+	jest.clearAllMocks();
+});
+
+function renderCreatePage(): ReturnType<typeof render> {
+	return render(
+		<Switch>
+			<Route path={ROUTES.ROLES_SETTINGS} exact>
+				<div data-testid="roles-list-redirect" />
+			</Route>
+			<Route path={ROUTES.ROLE_CREATE}>
+				<CreateEditRolePage />
+			</Route>
+		</Switch>,
+		undefined,
+		{ initialRoute: '/settings/roles/new' },
+	);
+}
+
+describe('CreateRolePage - AuthZ', () => {
+	describe('permission denied', () => {
+		it('shows PermissionDeniedFullPage when create permission denied', async () => {
+			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+
+			renderCreatePage();
+
+			await expect(
+				screen.findByText(/You are not authorized/i),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('loading state', () => {
+		it('shows skeleton while checking permissions', () => {
+			mockUseAuthZ.mockReturnValue({
+				isLoading: true,
+				isFetching: true,
+				error: null,
+				permissions: null,
+				refetchPermissions: jest.fn(),
+			});
+
+			renderCreatePage();
+
+			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.test.tsx

@@ -0,0 +1,284 @@
+import { Route, Switch } from 'react-router-dom';
+import ROUTES from 'constants/routes';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+
+import CreateEditRolePage from '../CreateEditRolePage';
+
+jest.mock('hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
+const rolesApiBase = '*/api/v1/roles';
+
+beforeEach(() => {
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
+});
+
+afterEach(() => {
+	jest.clearAllMocks();
+	server.resetHandlers();
+});
+
+function renderCreatePage(): ReturnType<typeof render> {
+	return render(
+		<Switch>
+			<Route path={ROUTES.ROLES_SETTINGS} exact>
+				<div data-testid="roles-list-redirect" />
+			</Route>
+			<Route path={ROUTES.ROLE_CREATE}>
+				<CreateEditRolePage />
+			</Route>
+		</Switch>,
+		undefined,
+		{ initialRoute: '/settings/roles/new' },
+	);
+}
+
+describe('CreateRolePage', () => {
+	describe('initial render', () => {
+		it('renders create role page with testId', () => {
+			renderCreatePage();
+
+			expect(screen.getByTestId('create-edit-role-page')).toBeInTheDocument();
+		});
+
+		it('shows breadcrumb with "Create role" as current page', () => {
+			renderCreatePage();
+
+			const page = screen.getByTestId('create-edit-role-page');
+			const breadcrumbs = within(page).getAllByText('Create role');
+			expect(breadcrumbs.length).toBeGreaterThanOrEqual(1);
+		});
+
+		it('renders empty name input', () => {
+			renderCreatePage();
+
+			const nameInput = screen.getByTestId('role-name-input');
+			expect(nameInput).toHaveValue('');
+		});
+
+		it('renders empty description input', () => {
+			renderCreatePage();
+
+			const descInput = screen.getByTestId('role-description-input');
+			expect(descInput).toHaveValue('');
+		});
+
+		it('name input is enabled in create mode', () => {
+			renderCreatePage();
+
+			const nameInput = screen.getByTestId('role-name-input');
+			expect(nameInput).not.toBeDisabled();
+		});
+
+		it('save button shows "Create role" text', () => {
+			renderCreatePage();
+
+			const saveBtn = screen.getByTestId('save-button');
+			expect(saveBtn).toHaveTextContent('Create role');
+		});
+
+		it('save button is disabled when no changes', () => {
+			renderCreatePage();
+
+			const saveBtn = screen.getByTestId('save-button');
+			expect(saveBtn).toBeDisabled();
+		});
+
+		it('does not show unsaved indicator initially', () => {
+			renderCreatePage();
+
+			expect(screen.queryByText('Unsaved changes')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('form interactions', () => {
+		it('enables save button when name is entered', async () => {
+			const user = userEvent.setup();
+			renderCreatePage();
+
+			const nameInput = screen.getByTestId('role-name-input');
+			await user.type(nameInput, 'test-role');
+
+			const saveBtn = screen.getByTestId('save-button');
+			expect(saveBtn).not.toBeDisabled();
+		});
+
+		it('shows unsaved indicator when form modified', async () => {
+			const user = userEvent.setup();
+			renderCreatePage();
+
+			const nameInput = screen.getByTestId('role-name-input');
+			await user.type(nameInput, 'my-role');
+
+			await expect(
+				screen.findByText('Unsaved changes'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('enables save button when description is entered', async () => {
+			const user = userEvent.setup();
+			renderCreatePage();
+
+			const descInput = screen.getByTestId('role-description-input');
+			await user.type(descInput, 'Some description');
+
+			const saveBtn = screen.getByTestId('save-button');
+			expect(saveBtn).not.toBeDisabled();
+		});
+	});
+
+	describe('cancel action', () => {
+		it('navigates to roles list on cancel', async () => {
+			const user = userEvent.setup();
+			renderCreatePage();
+
+			const cancelBtn = screen.getByTestId('cancel-button');
+			await user.click(cancelBtn);
+
+			await expect(
+				screen.findByTestId('roles-list-redirect'),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('create success flow', () => {
+		it('calls create API with form data and redirects', async () => {
+			const createSpy = jest.fn();
+
+			server.use(
+				rest.post(rolesApiBase, async (req, res, ctx) => {
+					createSpy(await req.json());
+					return res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: { id: 'new-role-id', name: 'my-custom-role' },
+						}),
+					);
+				}),
+			);
+
+			const user = userEvent.setup();
+			renderCreatePage();
+
+			const nameInput = screen.getByTestId('role-name-input');
+			await user.type(nameInput, 'my-custom-role');
+
+			const descInput = screen.getByTestId('role-description-input');
+			await user.type(descInput, 'Role for testing');
+
+			const saveBtn = screen.getByTestId('save-button');
+			await user.click(saveBtn);
+
+			await waitFor(() => {
+				expect(createSpy).toHaveBeenCalledWith(
+					expect.objectContaining({
+						name: 'my-custom-role',
+						description: 'Role for testing',
+					}),
+				);
+			});
+
+			await expect(
+				screen.findByTestId('roles-list-redirect'),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('create error flows', () => {
+		it('does not call API when name is empty', async () => {
+			const createSpy = jest.fn();
+			server.use(
+				rest.post(rolesApiBase, async (req, res, ctx) => {
+					createSpy();
+					return res(ctx.status(200), ctx.json({ status: 'success' }));
+				}),
+			);
+
+			const user = userEvent.setup();
+			renderCreatePage();
+
+			const descInput = screen.getByTestId('role-description-input');
+			await user.type(descInput, 'Description only');
+
+			const saveBtn = screen.getByTestId('save-button');
+			await user.click(saveBtn);
+
+			await waitFor(
+				() => {
+					expect(createSpy).not.toHaveBeenCalled();
+				},
+				{ timeout: 500 },
+			);
+		});
+
+		it('shows error banner when API fails', async () => {
+			server.use(
+				rest.post(rolesApiBase, (_req, res, ctx) =>
+					res(
+						ctx.status(400),
+						ctx.json({
+							error: { message: 'Role name already exists' },
+						}),
+					),
+				),
+			);
+
+			const user = userEvent.setup();
+			renderCreatePage();
+
+			const nameInput = screen.getByTestId('role-name-input');
+			await user.type(nameInput, 'duplicate-role');
+
+			const saveBtn = screen.getByTestId('save-button');
+			await user.click(saveBtn);
+
+			await expect(
+				screen.findByTestId('save-error-banner'),
+			).resolves.toBeInTheDocument();
+
+			await expect(
+				screen.findByText('Role name already exists'),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('validation errors', () => {
+		it('shows validation error when Only Selected has no items', async () => {
+			const user = userEvent.setup();
+			renderCreatePage();
+
+			const nameInput = screen.getByTestId('role-name-input');
+			await user.type(nameInput, 'valid-role');
+
+			const apiKeysCard = screen.getByTestId('resource-card-factor-api-key');
+			const header = within(apiKeysCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+			await user.click(header);
+
+			const readToggle = within(apiKeysCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+			const onlySelectedBtn = await within(readToggle).findByText('Only selected');
+			await user.click(onlySelectedBtn);
+
+			const saveBtn = screen.getByTestId('save-button');
+			await user.click(saveBtn);
+
+			await expect(
+				screen.findByTestId('save-error-banner'),
+			).resolves.toBeInTheDocument();
+
+			await expect(
+				screen.findByText(
+					'Please add at least one selector for each "Only selected" permission.',
+				),
+			).resolves.toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/EditRolePage.authz.test.tsx

@@ -0,0 +1,88 @@
+import { Route, Switch } from 'react-router-dom';
+import ROUTES from 'constants/routes';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { render, screen } from 'tests/test-utils';
+import {
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantByPrefix,
+} from 'tests/authz-test-utils';
+
+import CreateEditRolePage from '../CreateEditRolePage';
+
+jest.mock('hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
+const EDIT_ROLE_ID = 'test-role-123';
+const EDIT_ROLE_NAME = 'test-role';
+
+afterEach(() => {
+	jest.clearAllMocks();
+});
+
+function renderEditPage(): ReturnType<typeof render> {
+	return render(
+		<Switch>
+			<Route path={ROUTES.ROLES_SETTINGS} exact>
+				<div data-testid="roles-list-redirect" />
+			</Route>
+			<Route path={ROUTES.ROLE_DETAILS}>
+				<CreateEditRolePage />
+			</Route>
+		</Switch>,
+		undefined,
+		{ initialRoute: `/settings/roles/${EDIT_ROLE_ID}?name=${EDIT_ROLE_NAME}` },
+	);
+}
+
+describe('EditRolePage - AuthZ', () => {
+	describe('permission denied', () => {
+		it('shows PermissionDeniedFullPage when read permission denied', async () => {
+			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+
+			renderEditPage();
+
+			await expect(
+				screen.findByText(/You are not authorized/i),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('shows PermissionDeniedFullPage when update permission denied but read granted', async () => {
+			mockUseAuthZ.mockImplementation(mockUseAuthZGrantByPrefix('read'));
+
+			renderEditPage();
+
+			await expect(
+				screen.findByText(/You are not authorized/i),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('checks both read and update permissions for edit mode', () => {
+			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+
+			renderEditPage();
+
+			expect(mockUseAuthZ).toHaveBeenCalledWith(
+				expect.arrayContaining([
+					expect.stringContaining('read'),
+					expect.stringContaining('update'),
+				]),
+			);
+		});
+	});
+
+	describe('loading state', () => {
+		it('shows skeleton while checking permissions', () => {
+			mockUseAuthZ.mockReturnValue({
+				isLoading: true,
+				isFetching: true,
+				error: null,
+				permissions: null,
+				refetchPermissions: jest.fn(),
+			});
+
+			renderEditPage();
+
+			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/EditRolePage.test.tsx

@@ -0,0 +1,398 @@
+import { Route, Switch } from 'react-router-dom';
+import ROUTES from 'constants/routes';
+import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+
+import CreateEditRolePage from '../CreateEditRolePage';
+
+jest.mock('hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
+const CUSTOM_ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
+const rolesApiBase = '*/api/v1/roles';
+
+const roleWithTransactionGroups = {
+	status: 'success',
+	data: {
+		...customRoleResponse.data,
+		transactionGroups: [
+			{
+				objectGroup: {
+					resource: { kind: 'role', type: 'role' },
+					selectors: ['*'],
+				},
+				relation: 'read',
+			},
+		],
+	},
+};
+
+beforeEach(() => {
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
+	server.use(
+		rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(roleWithTransactionGroups)),
+		),
+	);
+});
+
+afterEach(() => {
+	jest.clearAllMocks();
+	server.resetHandlers();
+});
+
+function renderEditPage(roleId = CUSTOM_ROLE_ID): ReturnType<typeof render> {
+	return render(
+		<Switch>
+			<Route path={ROUTES.ROLES_SETTINGS} exact>
+				<div data-testid="roles-list-redirect" />
+			</Route>
+			<Route path={ROUTES.ROLE_DETAILS} exact>
+				<div data-testid="role-details-redirect" />
+			</Route>
+			<Route path={ROUTES.ROLE_EDIT}>
+				<CreateEditRolePage />
+			</Route>
+		</Switch>,
+		undefined,
+		{ initialRoute: `/settings/roles/${roleId}/edit?name=Custom%20Role` },
+	);
+}
+
+describe('EditRolePage', () => {
+	describe('loading state', () => {
+		it('shows skeleton while fetching role data', () => {
+			server.use(
+				rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
+					res(ctx.delay(200), ctx.status(200), ctx.json(roleWithTransactionGroups)),
+				),
+			);
+
+			renderEditPage();
+
+			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+		});
+	});
+
+	describe('load error state', () => {
+		it('shows error banner when role load fails', async () => {
+			server.use(
+				rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
+					res(ctx.status(500), ctx.json({ error: { message: 'Server error' } })),
+				),
+			);
+
+			renderEditPage();
+
+			await waitFor(() => {
+				expect(document.querySelector('.error-in-place')).toBeInTheDocument();
+			});
+		});
+
+		it('shows Failed to load role title on load error', async () => {
+			server.use(
+				rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
+					res(ctx.status(404), ctx.json({ error: { message: 'Not found' } })),
+				),
+			);
+
+			renderEditPage();
+
+			await expect(
+				screen.findByText('Failed to load role'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('shows back button on load error', async () => {
+			server.use(
+				rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
+					res(ctx.status(500), ctx.json({ error: { message: 'Server error' } })),
+				),
+			);
+
+			renderEditPage();
+
+			await waitFor(() => {
+				expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
+			});
+		});
+
+		it('navigates to view page when cancel clicked in error state', async () => {
+			const user = userEvent.setup();
+
+			server.use(
+				rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
+					res(ctx.status(500), ctx.json({ error: { message: 'Server error' } })),
+				),
+			);
+
+			renderEditPage();
+
+			await waitFor(async () => {
+				const cancelButton = await screen.findByTestId('cancel-button');
+				await user.click(cancelButton);
+			});
+
+			await expect(
+				screen.findByTestId('role-details-redirect'),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('initial render with loaded data', () => {
+		it('shows role name in page title', async () => {
+			renderEditPage();
+
+			await expect(
+				screen.findByText('Role - billing-manager'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('name input is not shown in edit mode', async () => {
+			renderEditPage();
+
+			await waitFor(() => {
+				expect(screen.queryByTestId('role-name-input')).not.toBeInTheDocument();
+			});
+		});
+
+		it('populates description input with existing value', async () => {
+			renderEditPage();
+
+			await waitFor(async () => {
+				const descInput = await screen.findByTestId('role-description-input');
+				expect(descInput).toHaveValue(
+					'Custom role for managing billing and invoices.',
+				);
+			});
+		});
+
+		it('description input is enabled in edit mode', async () => {
+			renderEditPage();
+
+			const descInput = await screen.findByTestId('role-description-input');
+			expect(descInput).not.toBeDisabled();
+		});
+
+		it('save button shows "Save changes" text', async () => {
+			renderEditPage();
+
+			const saveBtn = await screen.findByTestId('save-button');
+			expect(saveBtn).toHaveTextContent('Save changes');
+		});
+
+		it('save button is disabled when no unsaved changes', async () => {
+			renderEditPage();
+
+			await waitFor(async () => {
+				const descInput = await screen.findByTestId('role-description-input');
+				expect(descInput).toHaveValue(
+					'Custom role for managing billing and invoices.',
+				);
+			});
+
+			const saveBtn = screen.getByTestId('save-button');
+			expect(saveBtn).toBeDisabled();
+		});
+	});
+
+	describe('form interactions', () => {
+		it('enables save button when description is modified', async () => {
+			const user = userEvent.setup();
+			renderEditPage();
+
+			const descInput = await screen.findByTestId('role-description-input');
+			await user.clear(descInput);
+			await user.type(descInput, 'New description');
+
+			const saveBtn = screen.getByTestId('save-button');
+			expect(saveBtn).not.toBeDisabled();
+		});
+
+		it('shows unsaved indicator when description modified', async () => {
+			const user = userEvent.setup();
+			renderEditPage();
+
+			const descInput = await screen.findByTestId('role-description-input');
+			await user.type(descInput, ' updated');
+
+			await expect(
+				screen.findByText('Unsaved changes'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('disables save when changes reverted to original', async () => {
+			const user = userEvent.setup();
+			renderEditPage();
+
+			const descInput = await screen.findByTestId('role-description-input');
+			const originalValue = 'Custom role for managing billing and invoices.';
+
+			await user.clear(descInput);
+			await user.type(descInput, 'Temporary change');
+			expect(screen.getByTestId('save-button')).not.toBeDisabled();
+
+			await user.clear(descInput);
+			await user.type(descInput, originalValue);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('save-button')).toBeDisabled();
+			});
+		});
+	});
+
+	describe('cancel action', () => {
+		it('navigates to view role page on cancel', async () => {
+			const user = userEvent.setup();
+			renderEditPage();
+
+			await screen.findByTestId('role-description-input');
+
+			const cancelBtn = screen.getByTestId('cancel-button');
+			await user.click(cancelBtn);
+
+			await expect(
+				screen.findByTestId('role-details-redirect'),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('update success flow', () => {
+		it('redirects to view page after successful update', async () => {
+			server.use(
+				rest.put(`${rolesApiBase}/:id`, (_req, res, ctx) =>
+					res(ctx.status(200), ctx.json({ status: 'success' })),
+				),
+			);
+
+			const user = userEvent.setup();
+			renderEditPage();
+
+			const descInput = await screen.findByTestId('role-description-input');
+			await user.clear(descInput);
+			await user.type(descInput, 'Updated description');
+
+			const saveBtn = screen.getByTestId('save-button');
+			await user.click(saveBtn);
+
+			await expect(
+				screen.findByTestId('role-details-redirect'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('calls update API when save clicked', async () => {
+			const updateSpy = jest.fn();
+
+			server.use(
+				rest.put(`${rolesApiBase}/:id`, async (req, res, ctx) => {
+					updateSpy();
+					return res(ctx.status(200), ctx.json({ status: 'success' }));
+				}),
+			);
+
+			const user = userEvent.setup();
+			renderEditPage();
+
+			const descInput = await screen.findByTestId('role-description-input');
+			await user.type(descInput, ' edited');
+
+			const saveBtn = screen.getByTestId('save-button');
+			await user.click(saveBtn);
+
+			await waitFor(() => {
+				expect(updateSpy).toHaveBeenCalled();
+			});
+		});
+	});
+
+	describe('update error flow', () => {
+		it('shows error banner when update fails with 500', async () => {
+			server.use(
+				rest.put(`${rolesApiBase}/:id`, (_req, res, ctx) => res(ctx.status(500))),
+			);
+
+			const user = userEvent.setup();
+			renderEditPage();
+
+			const descInput = await screen.findByTestId('role-description-input');
+			await user.type(descInput, ' changed');
+
+			const saveBtn = screen.getByTestId('save-button');
+			await user.click(saveBtn);
+
+			await expect(
+				screen.findByTestId('save-error-banner'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('shows error banner when update fails with 403', async () => {
+			server.use(
+				rest.put(`${rolesApiBase}/:id`, (_req, res, ctx) => res(ctx.status(403))),
+			);
+
+			const user = userEvent.setup();
+			renderEditPage();
+
+			const descInput = await screen.findByTestId('role-description-input');
+			await user.type(descInput, ' test');
+
+			const saveBtn = screen.getByTestId('save-button');
+			await user.click(saveBtn);
+
+			await expect(
+				screen.findByTestId('save-error-banner'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('shows error banner when update fails with 400', async () => {
+			server.use(
+				rest.put(`${rolesApiBase}/:id`, (_req, res, ctx) => res(ctx.status(400))),
+			);
+
+			const user = userEvent.setup();
+			renderEditPage();
+
+			const descInput = await screen.findByTestId('role-description-input');
+			await user.type(descInput, ' x');
+
+			const saveBtn = screen.getByTestId('save-button');
+			await user.click(saveBtn);
+
+			await expect(
+				screen.findByTestId('save-error-banner'),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('permission changes', () => {
+		it('detects permission change as unsaved', async () => {
+			const user = userEvent.setup();
+			renderEditPage();
+
+			await screen.findByTestId('permission-editor');
+
+			const apiKeysCard = await screen.findByTestId(
+				'resource-card-factor-api-key',
+			);
+			const header = within(apiKeysCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+			await user.click(header);
+
+			const createToggle = within(apiKeysCard).getByTestId(
+				'action-toggle-factor-api-key-create',
+			);
+			const allBtn = await within(createToggle).findByText('All');
+			await user.click(allBtn);
+
+			await expect(
+				screen.findByText('Unsaved changes'),
+			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('save-button')).not.toBeDisabled();
+		});
+	});
+});

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/JsonEditor.test.tsx

@@ -0,0 +1,218 @@
+import { Route, Switch } from 'react-router-dom';
+import ROUTES from 'constants/routes';
+import { render, screen, userEvent, within } from 'tests/test-utils';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+
+import CreateEditRolePage from '../CreateEditRolePage';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+
+jest.mock('hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
+beforeEach(() => {
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
+});
+
+afterEach(() => {
+	jest.clearAllMocks();
+});
+
+function renderPage(): ReturnType<typeof render> {
+	return render(
+		<TooltipProvider>
+			<Switch>
+				<Route path={ROUTES.ROLES_SETTINGS} exact>
+					<div data-testid="roles-list-redirect" />
+				</Route>
+				<Route path={ROUTES.ROLE_CREATE}>
+					<CreateEditRolePage />
+				</Route>
+			</Switch>
+		</TooltipProvider>,
+		undefined,
+		{ initialRoute: '/settings/roles/new' },
+	);
+}
+
+async function switchToJsonMode(): Promise<void> {
+	const user = userEvent.setup();
+	const jsonRadio = screen.getByTestId('permission-editor-mode-json');
+	await user.click(jsonRadio);
+}
+
+async function switchToInteractiveMode(): Promise<void> {
+	const user = userEvent.setup();
+	const interactiveRadio = screen.getByTestId(
+		'permission-editor-mode-interactive',
+	);
+	await user.click(interactiveRadio);
+}
+
+describe('JsonEditor', () => {
+	describe('initial render', () => {
+		it('renders JSON editor when JSON mode selected', async () => {
+			renderPage();
+			await switchToJsonMode();
+
+			expect(screen.getByTestId('json-editor')).toBeInTheDocument();
+		});
+
+		it('renders JSON editor container div', async () => {
+			renderPage();
+			await switchToJsonMode();
+
+			const jsonEditor = screen.getByTestId('json-editor');
+			expect(jsonEditor.querySelector('div')).toBeInTheDocument();
+		});
+	});
+
+	describe('sync with interactive mode', () => {
+		it('syncs changes from interactive mode when switching to JSON', async () => {
+			const user = userEvent.setup();
+			renderPage();
+
+			await screen.findByTestId('permission-editor');
+			await switchToInteractiveMode();
+
+			const apiKeyCard = await screen.findByTestId('resource-card-factor-api-key');
+			const header = within(apiKeyCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+			await user.click(header);
+
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-create',
+			);
+			await user.click(await within(createToggle).findByText('All'));
+
+			await switchToJsonMode();
+
+			const jsonEditor = screen.getByTestId('json-editor');
+			expect(jsonEditor).toBeInTheDocument();
+		});
+
+		it('preserves changes when switching back to interactive', async () => {
+			const user = userEvent.setup();
+			renderPage();
+
+			await screen.findByTestId('permission-editor');
+			await switchToInteractiveMode();
+
+			const apiKeyCard = await screen.findByTestId('resource-card-factor-api-key');
+			const header = within(apiKeyCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+			await user.click(header);
+
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-create',
+			);
+			await user.click(await within(createToggle).findByText('All'));
+
+			await switchToJsonMode();
+
+			const interactiveRadio = screen.getByTestId(
+				'permission-editor-mode-interactive',
+			);
+			await user.click(interactiveRadio);
+
+			const scopeToggle = within(
+				screen.getByTestId('action-toggle-factor-api-key-create'),
+			).getByTestId('action-toggle-scope-factor-api-key-create');
+			expect(
+				within(scopeToggle).getByRole('radio', { name: 'All' }),
+			).toBeChecked();
+		});
+	});
+
+	describe('error handling', () => {
+		it('no error shown initially with valid JSON', async () => {
+			renderPage();
+			await switchToJsonMode();
+
+			expect(screen.queryByTestId('json-editor-error')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('JSON structure', () => {
+		it('produces valid transactionGroups format', async () => {
+			const user = userEvent.setup();
+			renderPage();
+
+			await screen.findByTestId('permission-editor');
+			await switchToInteractiveMode();
+
+			const apiKeyCard = await screen.findByTestId('resource-card-factor-api-key');
+			const header = within(apiKeyCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+			await user.click(header);
+
+			const readToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+			await user.click(await within(readToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId('item-input-selector-input');
+			await user.type(input, 'test-key-123{enter}');
+
+			await switchToJsonMode();
+
+			expect(screen.getByTestId('json-editor')).toBeInTheDocument();
+		});
+
+		it('handles wildcard selector for All scope', async () => {
+			const user = userEvent.setup();
+			renderPage();
+
+			await screen.findByTestId('permission-editor');
+			await switchToInteractiveMode();
+
+			const apiKeyCard = await screen.findByTestId('resource-card-factor-api-key');
+			const header = within(apiKeyCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+			await user.click(header);
+
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-create',
+			);
+			await user.click(await within(createToggle).findByText('All'));
+
+			await switchToJsonMode();
+
+			expect(screen.getByTestId('json-editor')).toBeInTheDocument();
+		});
+	});
+
+	describe('mode switching', () => {
+		it('reinitializes JSON buffer on switch from interactive to JSON', async () => {
+			const user = userEvent.setup();
+			renderPage();
+
+			await screen.findByTestId('permission-editor');
+			await switchToJsonMode();
+
+			const interactiveRadio = screen.getByTestId(
+				'permission-editor-mode-interactive',
+			);
+			await user.click(interactiveRadio);
+
+			const apiKeyCard = await screen.findByTestId('resource-card-factor-api-key');
+			const header = within(apiKeyCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+			await user.click(header);
+
+			const readToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+			await user.click(await within(readToggle).findByText('All'));
+
+			await switchToJsonMode();
+
+			expect(screen.getByTestId('json-editor')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/PermissionEditor.test.tsx

@@ -0,0 +1,523 @@
+import { Route, Switch } from 'react-router-dom';
+import ROUTES from 'constants/routes';
+import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+
+import CreateEditRolePage from '../CreateEditRolePage';
+
+jest.mock('hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
+async function expandAllCards(): Promise<void> {
+	const user = userEvent.setup();
+	const expandButton = screen.getByTestId('expand-all-button');
+	await user.click(expandButton);
+}
+
+beforeEach(() => {
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
+});
+
+afterEach(() => {
+	jest.clearAllMocks();
+});
+
+function renderPage(): ReturnType<typeof render> {
+	return render(
+		<TooltipProvider>
+			<Switch>
+				<Route path={ROUTES.ROLES_SETTINGS} exact>
+					<div data-testid="roles-list-redirect" />
+				</Route>
+				<Route path={ROUTES.ROLE_CREATE}>
+					<CreateEditRolePage />
+				</Route>
+			</Switch>
+		</TooltipProvider>,
+		undefined,
+		{ initialRoute: '/settings/roles/new' },
+	);
+}
+
+describe('PermissionEditor', () => {
+	describe('mode toggle', () => {
+		it('renders permission editor with testId', () => {
+			renderPage();
+
+			expect(screen.getByTestId('permission-editor')).toBeInTheDocument();
+		});
+
+		it('defaults to interactive mode', () => {
+			renderPage();
+
+			const interactiveRadio = screen.getByTestId(
+				'permission-editor-mode-interactive',
+			);
+			expect(interactiveRadio).toBeChecked();
+		});
+
+		it('switches to JSON mode when clicked', async () => {
+			const user = userEvent.setup();
+			renderPage();
+
+			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
+			await user.click(jsonRadio);
+
+			expect(jsonRadio).toBeChecked();
+			expect(screen.getByTestId('json-editor')).toBeInTheDocument();
+		});
+
+		it('switches back to interactive mode', async () => {
+			const user = userEvent.setup();
+			renderPage();
+
+			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
+			await user.click(jsonRadio);
+
+			const interactiveRadio = screen.getByTestId(
+				'permission-editor-mode-interactive',
+			);
+			await user.click(interactiveRadio);
+
+			expect(interactiveRadio).toBeChecked();
+			expect(screen.queryByTestId('json-editor')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('resource cards', () => {
+		it('renders all resource cards', () => {
+			renderPage();
+
+			expect(
+				screen.getByTestId('resource-card-factor-api-key'),
+			).toBeInTheDocument();
+			expect(screen.getByTestId('resource-card-role')).toBeInTheDocument();
+			expect(
+				screen.getByTestId('resource-card-serviceaccount'),
+			).toBeInTheDocument();
+		});
+
+		it('resource cards are collapsed by default', () => {
+			renderPage();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const header = within(apiKeyCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+
+			expect(header).toHaveAttribute('aria-expanded', 'false');
+		});
+
+		it('expands resource card when header clicked', async () => {
+			const user = userEvent.setup();
+			renderPage();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const header = within(apiKeyCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+
+			await user.click(header);
+
+			expect(header).toHaveAttribute('aria-expanded', 'true');
+		});
+
+		it('collapses expanded resource card when header clicked again', async () => {
+			const user = userEvent.setup();
+			renderPage();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const header = within(apiKeyCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+
+			await user.click(header);
+			await user.click(header);
+
+			expect(header).toHaveAttribute('aria-expanded', 'false');
+		});
+
+		it('shows granted count in resource card header', async () => {
+			renderPage();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			await expect(
+				within(apiKeyCard).findByText(/0 \/ \d+ granted/),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('action toggles', () => {
+		it('renders action toggles for each available action', async () => {
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			expect(
+				within(apiKeyCard).getByTestId('action-toggle-factor-api-key-read'),
+			).toBeInTheDocument();
+			expect(
+				within(apiKeyCard).getByTestId('action-toggle-factor-api-key-read'),
+			).toBeInTheDocument();
+			expect(
+				within(apiKeyCard).getByTestId('action-toggle-factor-api-key-update'),
+			).toBeInTheDocument();
+			expect(
+				within(apiKeyCard).getByTestId('action-toggle-factor-api-key-delete'),
+			).toBeInTheDocument();
+		});
+
+		it('defaults all actions to None scope', async () => {
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			const scopeToggle = within(createToggle).getByTestId(
+				'action-toggle-scope-factor-api-key-read',
+			);
+			expect(
+				within(scopeToggle).getByRole('radio', { name: 'None' }),
+			).toBeChecked();
+		});
+
+		it('changes scope to All when clicked', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			const allBtn = await within(createToggle).findByText('All');
+			await user.click(allBtn);
+
+			const scopeToggle = within(createToggle).getByTestId(
+				'action-toggle-scope-factor-api-key-read',
+			);
+			expect(
+				within(scopeToggle).getByRole('radio', { name: 'All' }),
+			).toBeChecked();
+		});
+
+		it('updates granted count when scope changed', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('All'));
+
+			await expect(
+				within(apiKeyCard).findByText(/1 \/ \d+ granted/),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('Only Selected scope', () => {
+		it('shows item input selector when Only Selected is chosen', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			const onlySelectedBtn =
+				await within(createToggle).findByText('Only selected');
+			await user.click(onlySelectedBtn);
+
+			expect(screen.getByTestId('item-input-selector')).toBeInTheDocument();
+		});
+
+		it('adds item when typed and Enter pressed', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId('item-input-selector-input');
+			await user.type(input, 'api-key-001{enter}');
+
+			await expect(screen.findByText('api-key-001')).resolves.toBeInTheDocument();
+		});
+
+		it('adds item when Add button clicked', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId('item-input-selector-input');
+			await user.type(input, 'api-key-002');
+
+			const addBtn = screen.getByTestId('item-input-selector-add-btn');
+			await user.click(addBtn);
+
+			await expect(screen.findByText('api-key-002')).resolves.toBeInTheDocument();
+		});
+
+		it('adds multiple items separated by comma', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId('item-input-selector-input');
+			await user.type(input, 'key-a, key-b, key-c{enter}');
+
+			await expect(screen.findByText('key-a')).resolves.toBeInTheDocument();
+			await expect(screen.findByText('key-b')).resolves.toBeInTheDocument();
+			await expect(screen.findByText('key-c')).resolves.toBeInTheDocument();
+		});
+
+		it('adds multiple items separated by space', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId('item-input-selector-input');
+			await user.type(input, 'key-x key-y key-z{enter}');
+
+			await expect(screen.findByText('key-x')).resolves.toBeInTheDocument();
+			await expect(screen.findByText('key-y')).resolves.toBeInTheDocument();
+			await expect(screen.findByText('key-z')).resolves.toBeInTheDocument();
+		});
+
+		it('does not add duplicate items', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId('item-input-selector-input');
+			await user.type(input, 'same-key{enter}');
+			await user.type(input, 'same-key{enter}');
+
+			const badges = screen.getAllByText('same-key');
+			expect(badges).toHaveLength(1);
+		});
+
+		it('removes item when X clicked', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId('item-input-selector-input');
+			await user.type(input, 'removable-key{enter}');
+
+			const removeBtn = screen.getByRole('button', {
+				name: /remove removable-key/i,
+			});
+			await user.click(removeBtn);
+
+			expect(screen.queryByText('removable-key')).not.toBeInTheDocument();
+		});
+
+		it('shows Add button disabled when input is empty', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('Only selected'));
+
+			const addBtn = screen.getByTestId('item-input-selector-add-btn');
+			expect(addBtn).toBeDisabled();
+		});
+	});
+
+	describe('scope change confirmation dialog', () => {
+		it('shows confirm dialog when leaving Only Selected with items', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId('item-input-selector-input');
+			await user.type(input, 'will-be-cleared{enter}');
+
+			await user.click(await within(createToggle).findByText('All'));
+
+			await expect(
+				screen.findByText('Change permission scope?'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('clears items when confirmed', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId('item-input-selector-input');
+			await user.type(input, 'to-be-cleared{enter}');
+
+			await user.click(await within(createToggle).findByText('All'));
+
+			const dialog = await screen.findByRole('dialog');
+			await user.click(
+				within(dialog).getByRole('button', { name: /change scope/i }),
+			);
+
+			await waitFor(() => {
+				expect(screen.queryByText('to-be-cleared')).not.toBeInTheDocument();
+			});
+		});
+
+		it('keeps items when cancelled', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId('item-input-selector-input');
+			await user.type(input, 'preserved-key{enter}');
+
+			await user.click(await within(createToggle).findByText('None'));
+
+			const dialog = await screen.findByRole('dialog');
+			await user.click(within(dialog).getByRole('button', { name: /cancel/i }));
+
+			await expect(
+				screen.findByText('preserved-key'),
+			).resolves.toBeInTheDocument();
+
+			expect(screen.getByTestId('item-input-selector')).toBeInTheDocument();
+		});
+
+		it('does not show dialog when leaving Only Selected with no items', async () => {
+			const user = userEvent.setup();
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const createToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			await user.click(await within(createToggle).findByText('Only selected'));
+			await user.click(await within(createToggle).findByText('All'));
+
+			expect(
+				screen.queryByText('Change permission scope?'),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	describe('verbs without Only Selected option', () => {
+		it('does not show Only Selected for list verb', async () => {
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const listToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-list',
+			);
+
+			expect(
+				within(listToggle).queryByText('Only selected'),
+			).not.toBeInTheDocument();
+			await expect(
+				within(listToggle).findByText('None'),
+			).resolves.toBeInTheDocument();
+			await expect(
+				within(listToggle).findByText('All'),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('collapse/expand all resources', () => {
+		it('shows expand/collapse toggle group', () => {
+			renderPage();
+
+			expect(screen.getByTestId('toggle-all-group')).toBeInTheDocument();
+			expect(screen.getByTestId('expand-all-button')).toBeInTheDocument();
+			expect(screen.getByTestId('collapse-all-button')).toBeInTheDocument();
+		});
+
+		it('expands all cards when expand button clicked', async () => {
+			renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const header = within(apiKeyCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+			expect(header).toHaveAttribute('aria-expanded', 'true');
+		});
+	});
+});

frontend/src/container/RolesSettings/CreateEditRolePage/components/ActionToggle.module.scss

@@ -0,0 +1,65 @@
+.actionToggle {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	padding: var(--spacing-6) var(--spacing-8);
+
+	&::after {
+		content: '';
+		position: absolute;
+		right: var(--spacing-8);
+		bottom: 0;
+		left: var(--spacing-8);
+		height: 1px;
+		background: var(--l2-border);
+	}
+
+	&:last-child::after {
+		display: none;
+	}
+}
+
+.actionToggleHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-8);
+}
+
+.actionToggleScopeToggle {
+	flex-shrink: 0;
+	width: fit-content;
+
+	--toggle-group-item-size: 1.4rem;
+	--toggle-group-item-padding-right: 0.4rem;
+	--toggle-group-item-border-style: none;
+	--toggle-group-secondary-active-bg: var(--bg-robin-800);
+	--toggle-group-item-align-items: baseline;
+
+	gap: var(--spacing-2);
+	padding: var(--spacing-2);
+
+	button {
+		min-width: 46px;
+		font-weight: bold;
+
+		&[data-state='on'] {
+			color: var(--bg-robin-200);
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--bg-robin-500);
+			outline-offset: 2px;
+			border-radius: var(--radius-2);
+		}
+	}
+}
+
+.actionToggleSelectorWrapper {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+
+	--divider-color: var(--l2-border);
+}

frontend/src/container/RolesSettings/CreateEditRolePage/components/ActionToggle.tsx

@@ -0,0 +1,160 @@
+import { useCallback, useMemo, useState } from 'react';
+import { ConfirmDialog } from '@signozhq/ui/dialog';
+import { Divider } from '@signozhq/ui/divider';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { Typography } from '@signozhq/ui/typography';
+
+import { PermissionScope } from '../../types';
+import { getResourcePanel } from '../../permissions.config';
+import ItemInputSelector from './ItemInputSelector';
+
+import styles from './ActionToggle.module.scss';
+import { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import { getActionLabel } from 'container/RolesSettings/ViewRolePage/components/permissionDisplay.utils';
+
+const SCOPE_LABELS: Record<PermissionScope, string> = {
+	[PermissionScope.NONE]: 'None',
+	[PermissionScope.ALL]: 'All',
+	[PermissionScope.ONLY_SELECTED]: 'Only selected',
+};
+
+interface ActionToggleProps {
+	action: AuthZVerb;
+	scope: string;
+	selectedIds: string[];
+	resource: AuthZResource;
+	canSelectIndividually: boolean;
+	onScopeChange: (scope: PermissionScope) => void;
+	onSelectedIdsChange: (ids: string[]) => void;
+	hasError?: boolean;
+}
+
+function ActionToggle({
+	action,
+	scope,
+	selectedIds,
+	resource,
+	canSelectIndividually,
+	onScopeChange,
+	onSelectedIdsChange,
+	hasError = false,
+}: ActionToggleProps): JSX.Element {
+	const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+	const [pendingScope, setPendingScope] = useState<PermissionScope | null>(null);
+
+	const displayLabel = getActionLabel(action);
+
+	const scopeItems: Array<{ value: PermissionScope; label: string }> =
+		useMemo(() => {
+			const items = [
+				{ value: PermissionScope.NONE, label: SCOPE_LABELS[PermissionScope.NONE] },
+				{ value: PermissionScope.ALL, label: SCOPE_LABELS[PermissionScope.ALL] },
+			];
+			if (canSelectIndividually) {
+				items.push({
+					value: PermissionScope.ONLY_SELECTED,
+					label: SCOPE_LABELS[PermissionScope.ONLY_SELECTED],
+				});
+			}
+			return items;
+		}, [canSelectIndividually]);
+
+	const handleToggleChange = useCallback(
+		(value: string): void => {
+			if (!value) {
+				return;
+			}
+
+			const isLeavingOnlySelected =
+				scope === PermissionScope.ONLY_SELECTED &&
+				value !== PermissionScope.ONLY_SELECTED;
+			const hasSelectedItems = selectedIds.length > 0;
+
+			if (isLeavingOnlySelected && hasSelectedItems) {
+				setPendingScope(value as PermissionScope);
+				setConfirmDialogOpen(true);
+				return;
+			}
+
+			onScopeChange(value as PermissionScope);
+		},
+		[scope, selectedIds.length, onScopeChange],
+	);
+
+	const handleConfirmScopeChange = useCallback((): void => {
+		if (pendingScope) {
+			onSelectedIdsChange([]);
+			onScopeChange(pendingScope);
+		}
+		setConfirmDialogOpen(false);
+		setPendingScope(null);
+	}, [pendingScope, onSelectedIdsChange, onScopeChange]);
+
+	const handleCancelScopeChange = useCallback((): void => {
+		setConfirmDialogOpen(false);
+		setPendingScope(null);
+	}, []);
+
+	return (
+		<>
+			<div
+				className={styles.actionToggle}
+				data-testid={`action-toggle-${resource}-${action}`}
+			>
+				<div className={styles.actionToggleHeader}>
+					<Typography as="span" size="base">
+						{displayLabel}
+					</Typography>
+					<ToggleGroupSimple
+						type="single"
+						size="sm"
+						value={scope}
+						onChange={handleToggleChange}
+						items={scopeItems}
+						className={styles.actionToggleScopeToggle}
+						testId={`action-toggle-scope-${resource}-${action}`}
+					/>
+				</div>
+
+				{scope === PermissionScope.ONLY_SELECTED && (
+					<div className={styles.actionToggleSelectorWrapper}>
+						<Divider />
+
+						<ItemInputSelector
+							placeholder={getResourcePanel(resource).selectorPlaceholder}
+							selectedIds={selectedIds}
+							onChange={onSelectedIdsChange}
+							docsAnchor={getResourcePanel(resource).docsAnchor}
+							hasError={hasError}
+						/>
+					</div>
+				)}
+			</div>
+
+			<ConfirmDialog
+				open={confirmDialogOpen}
+				onOpenChange={(next): void => {
+					if (!next) {
+						handleCancelScopeChange();
+					}
+				}}
+				title="Change permission scope?"
+				confirmText="Change scope"
+				cancelText="Cancel"
+				onConfirm={handleConfirmScopeChange}
+				onCancel={handleCancelScopeChange}
+			>
+				<Typography>
+					You have {selectedIds.length} item{selectedIds.length > 1 ? 's' : ''}{' '}
+					selected. Changing the scope will clear your current items.
+					<br />
+					<br />
+					Don&apos;t worry, this doesn&apos;t update this role yet, it only confirms
+					that you want to clear the items.
+				</Typography>
+			</ConfirmDialog>
+		</>
+	);
+}
+
+export default ActionToggle;

frontend/src/container/RolesSettings/CreateEditRolePage/components/ItemInputSelector.module.scss

@@ -0,0 +1,105 @@
+.itemInputSelector {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	background: var(--l1-background);
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	padding: var(--spacing-4);
+
+	--input-suffix-padding: var(--spacing-2);
+}
+
+.itemInputSelectorError {
+	border-color: var(--destructive);
+}
+
+.itemInputSelectorFooter {
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	gap: var(--spacing-3);
+	padding-top: var(--spacing-3);
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		background: var(--l1-border);
+	}
+}
+
+.itemInputSelectorBadges {
+	flex: 1;
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing-2);
+	max-height: 60px;
+	overflow-y: auto;
+}
+
+.itemInputSelectorInfoIcon {
+	flex-shrink: 0;
+	color: var(--l2-foreground);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--l1-foreground);
+	}
+}
+
+.itemInputSelectorBadge {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	max-width: 140px;
+	padding: 2px 4px 2px 6px;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+}
+
+.itemInputSelectorBadgeLabel {
+	flex: 1;
+	min-width: 0;
+}
+
+.itemInputSelectorBadgeRemove {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 14px;
+	height: 14px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: 2px;
+	color: var(--l2-foreground);
+	cursor: pointer;
+	transition:
+		background 0.15s ease,
+		color 0.15s ease;
+
+	&:hover {
+		background: var(--l1-background);
+		color: var(--l1-foreground);
+	}
+}
+
+.itemInputSelectorHint {
+	margin: 0;
+	color: var(--l2-foreground);
+
+	a {
+		color: var(--primary);
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}

frontend/src/container/RolesSettings/CreateEditRolePage/components/ItemInputSelector.tsx

@@ -0,0 +1,206 @@
+import { useCallback, useRef, useState } from 'react';
+import { Info, Plus, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { Typography } from '@signozhq/ui/typography';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import cx from 'classnames';
+
+import styles from './ItemInputSelector.module.scss';
+
+const BASE_DOCS_URL =
+	'https://signoz.io/docs/manage/administrator-guide/iam/permissions/';
+
+export interface ItemInputSelectorProps {
+	placeholder: string;
+	selectedIds: string[];
+	onChange: (ids: string[]) => void;
+	docsAnchor?: string;
+	hasError?: boolean;
+}
+
+function parseInputValues(input: string): string[] {
+	return input
+		.split(/[\s,]+/)
+		.map((v) => v.trim())
+		.filter(Boolean);
+}
+
+function ItemInputSelector({
+	placeholder,
+	selectedIds,
+	onChange,
+	docsAnchor = 'role',
+	hasError = false,
+}: ItemInputSelectorProps): JSX.Element {
+	const [inputValue, setInputValue] = useState('');
+	const footerRef = useRef<HTMLDivElement>(null);
+
+	const addValues = useCallback(
+		(input: string): void => {
+			const values = parseInputValues(input);
+			if (values.length === 0) {
+				return;
+			}
+
+			const existingSet = new Set(selectedIds);
+			const newIds = values.filter((v) => !existingSet.has(v));
+
+			if (newIds.length > 0) {
+				onChange([...selectedIds, ...newIds]);
+			}
+
+			setInputValue('');
+		},
+		[selectedIds, onChange],
+	);
+
+	const handleInputChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>): void => {
+			setInputValue(e.target.value);
+		},
+		[],
+	);
+
+	const handleInputKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLInputElement>): void => {
+			if (e.key === 'Enter') {
+				e.preventDefault();
+				addValues(inputValue);
+			}
+		},
+		[inputValue, addValues],
+	);
+
+	const handleInputBlur = useCallback((): void => {
+		addValues(inputValue);
+	}, [inputValue, addValues]);
+
+	const handleAddClick = useCallback((): void => {
+		addValues(inputValue);
+	}, [inputValue, addValues]);
+
+	const handleRemove = useCallback(
+		(itemId: string): void => {
+			onChange(selectedIds.filter((id) => id !== itemId));
+		},
+		[selectedIds, onChange],
+	);
+
+	const handleBadgeKeyDown = useCallback(
+		(
+			e: React.KeyboardEvent<HTMLButtonElement>,
+			itemId: string,
+			index: number,
+		): void => {
+			if (e.key !== 'Enter' && e.key !== ' ') {
+				return;
+			}
+
+			e.preventDefault();
+			handleRemove(itemId);
+
+			const targetIndex = index > 0 ? index - 1 : 0;
+			requestAnimationFrame(() => {
+				const buttons = footerRef.current?.querySelectorAll('button');
+				const targetButton = buttons?.[targetIndex] as
+					| HTMLButtonElement
+					| undefined;
+				targetButton?.focus();
+			});
+		},
+		[handleRemove],
+	);
+
+	const showError = hasError && selectedIds.length === 0;
+
+	return (
+		<div
+			className={cx(
+				styles.itemInputSelector,
+				showError ? styles.itemInputSelectorError : '',
+			)}
+			data-testid="item-input-selector"
+		>
+			<Input
+				placeholder={placeholder}
+				value={inputValue}
+				onChange={handleInputChange}
+				onKeyDown={handleInputKeyDown}
+				onBlur={handleInputBlur}
+				data-testid="item-input-selector-input"
+				suffix={
+					<Button
+						variant="solid"
+						size="sm"
+						onClick={handleAddClick}
+						disabled={!inputValue.trim()}
+						data-testid="item-input-selector-add-btn"
+					>
+						<Plus size={14} />
+						Add
+					</Button>
+				}
+			/>
+
+			{selectedIds.length > 0 ? (
+				<div ref={footerRef} className={styles.itemInputSelectorFooter}>
+					<div className={styles.itemInputSelectorBadges}>
+						{selectedIds.map((id, index) => (
+							<span key={id} className={styles.itemInputSelectorBadge} title={id}>
+								<Typography
+									as="span"
+									size="small"
+									truncate={1}
+									className={styles.itemInputSelectorBadgeLabel}
+								>
+									{id}
+								</Typography>
+								<button
+									type="button"
+									className={styles.itemInputSelectorBadgeRemove}
+									onClick={(): void => handleRemove(id)}
+									onKeyDown={(e): void => handleBadgeKeyDown(e, id, index)}
+									aria-label={`Remove ${id}`}
+								>
+									<X size={10} />
+								</button>
+							</span>
+						))}
+					</div>
+					<TooltipSimple
+						title={
+							<Typography align="left">
+								Still not sure on how to add selectors? <br />
+								<Typography.Link
+									href={`${BASE_DOCS_URL}#${docsAnchor}`}
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									Check the docs
+								</Typography.Link>{' '}
+								to understand selectors for this resource.
+							</Typography>
+						}
+					>
+						<Info size={16} className={styles.itemInputSelectorInfoIcon} />
+					</TooltipSimple>
+				</div>
+			) : (
+				<Typography className={styles.itemInputSelectorHint}>
+					Not sure what to type here?{' '}
+					<Typography.Link
+						href={`${BASE_DOCS_URL}#${docsAnchor}`}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						Check the docs
+					</Typography.Link>{' '}
+					to understand selectors for this resource.
+				</Typography>
+			)}
+		</div>
+	);
+}
+
+export default ItemInputSelector;

frontend/src/container/RolesSettings/CreateEditRolePage/components/JsonEditor.module.scss

@@ -0,0 +1,44 @@
+.jsonEditor {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	flex: 1;
+	min-height: 0;
+}
+
+.jsonEditorContainer {
+	position: relative;
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+	overflow: hidden;
+	flex: 1;
+	min-height: 200px;
+}
+
+.copyButton {
+	position: absolute;
+	top: 8px;
+	right: 24px;
+	z-index: 10;
+}
+
+.jsonEditorErrorWrapper {
+	min-height: 52px;
+}
+
+.jsonEditorError {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--spacing-2);
+	padding: var(--spacing-4) var(--spacing-6);
+	background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+	border: 1px solid var(--danger-background);
+	border-radius: 4px;
+}
+
+.jsonEditorErrorMessage {
+	font-family:
+		Geist Mono,
+		monospace;
+	word-break: break-word;
+}

frontend/src/container/RolesSettings/CreateEditRolePage/components/JsonEditor.tsx

@@ -0,0 +1,234 @@
+import {
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useState,
+	useRef,
+} from 'react';
+import { useCopyToClipboard } from 'react-use';
+import MEditor, { Monaco, OnMount } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+import { Check, Copy } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import type { AuthtypesTransactionGroupDTO } from 'api/generated/services/sigNoz.schemas';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import {
+	defineJsonTheme,
+	EDITABLE_EDITOR_OPTIONS,
+	JSON_THEME_DARK,
+} from '../../monaco.config';
+import {
+	transformResourcePermissionsToTransactionGroups,
+	transformTransactionGroupsToResourcePermissions,
+} from '../../hooks/useRolePermissions';
+import {
+	registerCompletionProvider,
+	registerJsonSchema,
+	ROLE_PERMISSIONS_MODEL_PATH,
+} from './jsonSchema.config';
+
+import styles from './JsonEditor.module.scss';
+import { JsonEditorProps, JsonEditorRef } from './JsonEditor.types';
+
+type MonacoEditor = Parameters<OnMount>[0];
+
+const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
+	function JsonEditor({ resources, mode, onChange, onValidityChange }, ref) {
+		const isDarkMode = useIsDarkMode();
+		const [copyState, copyToClipboard] = useCopyToClipboard();
+		const [copied, setCopied] = useState(false);
+		const [parseError, setParseError] = useState<string | null>(null);
+		const [schemaErrors, setSchemaErrors] = useState<string[]>([]);
+		const [jsonBuffer, setJsonBuffer] = useState<string>(() => {
+			const transactionGroups =
+				transformResourcePermissionsToTransactionGroups(resources);
+			return JSON.stringify(transactionGroups, null, 2);
+		});
+		const prevModeRef = useRef(mode);
+		const completionDisposableRef = useRef<{ dispose(): void } | null>(null);
+		const editorRef = useRef<MonacoEditor | null>(null);
+		const markersListenerRef = useRef<{ dispose(): void } | null>(null);
+
+		const hasError = parseError !== null || schemaErrors.length > 0;
+
+		useImperativeHandle(ref, () => ({
+			hasParseError: (): boolean => hasError,
+		}));
+
+		useEffect(() => {
+			onValidityChange?.(hasError);
+		}, [hasError, onValidityChange]);
+
+		// Reinitialize buffer when switching from interactive to json mode
+		useEffect(() => {
+			const wasInteractive = prevModeRef.current === 'interactive';
+			const isNowJson = mode === 'json';
+
+			if (wasInteractive && isNowJson) {
+				const transactionGroups =
+					transformResourcePermissionsToTransactionGroups(resources);
+				setJsonBuffer(JSON.stringify(transactionGroups, null, 2));
+				setParseError(null);
+			}
+
+			prevModeRef.current = mode;
+		}, [mode, resources]);
+
+		const handleEditorChange = useCallback(
+			(value: string | undefined): void => {
+				if (!value) {
+					return;
+				}
+
+				setJsonBuffer(value);
+
+				try {
+					const parsed = JSON.parse(value) as AuthtypesTransactionGroupDTO[];
+					const resourcePermissions =
+						transformTransactionGroupsToResourcePermissions(parsed);
+					setParseError(null);
+					onChange(resourcePermissions);
+				} catch (err) {
+					setParseError(err instanceof Error ? err.message : 'Invalid JSON format');
+				}
+			},
+			[onChange],
+		);
+
+		const configureMonaco = useCallback((monaco: Monaco): void => {
+			defineJsonTheme(monaco);
+			registerJsonSchema(monaco);
+			completionDisposableRef.current = registerCompletionProvider(monaco);
+		}, []);
+
+		const handleEditorMount: OnMount = useCallback((editorInstance, monaco) => {
+			editorRef.current = editorInstance;
+
+			type MonacoMarker = ReturnType<typeof monaco.editor.getModelMarkers>[number];
+
+			markersListenerRef.current = monaco.editor.onDidChangeMarkers(
+				(uris: readonly Parameters<typeof monaco.Uri.parse>[0][]) => {
+					const model = editorInstance.getModel();
+					if (!model) {
+						return;
+					}
+
+					const modelUri = model.uri.toString();
+					const hasRelevantChange = uris.some((uri) => uri.toString() === modelUri);
+					if (!hasRelevantChange) {
+						return;
+					}
+
+					const markers = monaco.editor.getModelMarkers({ resource: model.uri });
+					const errors = markers
+						.filter(
+							(marker: MonacoMarker) =>
+								marker.severity === monaco.MarkerSeverity.Error,
+						)
+						.map(
+							(marker: MonacoMarker) =>
+								`Line ${marker.startLineNumber}: ${marker.message}`,
+						);
+
+					setSchemaErrors(errors);
+				},
+			);
+		}, []);
+
+		useEffect(
+			() => (): void => {
+				completionDisposableRef.current?.dispose();
+				markersListenerRef.current?.dispose();
+			},
+			[],
+		);
+
+		useEffect(() => {
+			if (copyState.value) {
+				setCopied(true);
+				const timer = setTimeout(() => setCopied(false), 1500);
+				return (): void => clearTimeout(timer);
+			}
+			return undefined;
+		}, [copyState]);
+
+		const handleCopy = useCallback((): void => {
+			copyToClipboard(jsonBuffer);
+		}, [copyToClipboard, jsonBuffer]);
+
+		return (
+			<div className={styles.jsonEditor} data-testid="json-editor">
+				<div className={styles.jsonEditorContainer}>
+					<TooltipSimple title={copied ? 'Copied!' : 'Copy JSON'}>
+						<Button
+							variant="ghost"
+							size="sm"
+							className={styles.copyButton}
+							onClick={handleCopy}
+						>
+							{copied ? (
+								<Check size={14} color={Color.BG_FOREST_400} />
+							) : (
+								<Copy
+									size={14}
+									color={isDarkMode ? Color.BG_VANILLA_400 : Color.TEXT_INK_400}
+								/>
+							)}
+						</Button>
+					</TooltipSimple>
+					<MEditor
+						value={jsonBuffer}
+						language="json"
+						path={ROLE_PERMISSIONS_MODEL_PATH}
+						options={EDITABLE_EDITOR_OPTIONS}
+						onChange={handleEditorChange}
+						onMount={handleEditorMount}
+						height="100%"
+						theme={isDarkMode ? JSON_THEME_DARK : 'light'}
+						beforeMount={configureMonaco}
+					/>
+				</div>
+				<div className={styles.jsonEditorErrorWrapper}>
+					{parseError && (
+						<div className={styles.jsonEditorError} data-testid="json-editor-error">
+							<Typography as="span" size="base" weight="medium">
+								Parse Error:
+							</Typography>
+							<Typography
+								as="span"
+								size="base"
+								className={styles.jsonEditorErrorMessage}
+							>
+								{parseError}
+							</Typography>
+						</div>
+					)}
+					{!parseError && schemaErrors.length > 0 && (
+						<div
+							className={styles.jsonEditorError}
+							data-testid="json-editor-schema-error"
+						>
+							<Typography as="span" size="base" weight="medium">
+								Schema Error:
+							</Typography>
+							<Typography
+								as="span"
+								size="base"
+								className={styles.jsonEditorErrorMessage}
+							>
+								{schemaErrors[0]}
+								{schemaErrors.length > 1 && ` (+${schemaErrors.length - 1} more)`}
+							</Typography>
+						</div>
+					)}
+				</div>
+			</div>
+		);
+	},
+);
+
+export default JsonEditor;

frontend/src/container/RolesSettings/CreateEditRolePage/components/JsonEditor.types.ts

@@ -0,0 +1,14 @@
+import { ResourcePermissions } from '../../types';
+
+export type EditorMode = 'interactive' | 'json';
+
+export interface JsonEditorProps {
+	resources: ResourcePermissions[];
+	mode: EditorMode;
+	onChange: (resources: ResourcePermissions[]) => void;
+	onValidityChange?: (hasError: boolean) => void;
+}
+
+export interface JsonEditorRef {
+	hasParseError: () => boolean;
+}

frontend/src/container/RolesSettings/CreateEditRolePage/components/PermissionEditor.module.scss

@@ -0,0 +1,155 @@
+.permissionEditor {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	flex: 1;
+	min-height: 0;
+}
+
+.permissionEditorHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.permissionEditorTitle {
+	letter-spacing: 0.48px;
+	text-transform: uppercase;
+	position: relative;
+}
+
+.permissionEditorDivider {
+	height: 7px;
+	flex: 1 1 0%;
+	border-width: medium medium;
+	border-style: none none;
+	border-color: currentcolor currentcolor;
+	border-image: initial;
+	border-top: 2px dotted var(--l1-border);
+	border-bottom: 2px dotted var(--l1-border);
+	margin: 0px var(--spacing-4);
+}
+
+.permissionEditorModeToggle {
+	display: inline-flex;
+	grid-auto-flow: column;
+	gap: 0;
+	flex-shrink: 0;
+	border: 1px solid var(--l2-border);
+	border-radius: 2px;
+}
+
+.permissionEditorModeItem {
+	position: relative;
+	display: flex;
+	align-items: center;
+
+	&:not(:last-child) {
+		border-right: 1px solid var(--l2-border);
+	}
+
+	label {
+		display: flex;
+		align-items: center;
+		min-height: 24px;
+		padding: var(--spacing-3) var(--spacing-6);
+		font-family: Inter;
+		font-size: var(--periscope-font-size-base);
+		line-height: var(--line-height-20);
+		color: var(--l2-foreground);
+		white-space: nowrap;
+		cursor: pointer;
+		user-select: none;
+	}
+}
+
+.permissionEditorModeInput {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+
+	* {
+		display: none;
+	}
+
+	&[data-state='checked'] + label {
+		background: var(--l3-background);
+		color: var(--l1-foreground);
+		font-weight: var(--font-weight-medium);
+	}
+}
+
+.permissionEditorContent {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+
+.permissionEditorResourceList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	padding-bottom: var(--spacing-8);
+}
+
+.permissionEditorCollapsedSection {
+	display: flex;
+	flex-direction: column;
+}
+
+.permissionEditorCollapsedHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	width: 100%;
+	padding: var(--spacing-4) var(--spacing-6);
+	background: var(--l3-background);
+	border: 1px dashed var(--l2-border);
+	border-radius: 4px;
+	cursor: pointer;
+	transition: background 0.15s ease;
+	text-align: left;
+
+	&:hover {
+		background: var(--l2-background);
+	}
+
+	&:focus {
+		outline: 2px solid var(--primary);
+		outline-offset: -2px;
+	}
+}
+
+.permissionEditorCollapsedLabel {
+	font-family: Inter;
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--line-height-20);
+	color: var(--l2-foreground);
+	flex: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.permissionEditorCollapsedCount {
+	font-family: Inter;
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-20);
+	color: var(--primary);
+	flex-shrink: 0;
+}
+
+.permissionEditorCollapseAction {
+	display: flex;
+	justify-content: flex-start;
+	padding-bottom: var(--spacing-4);
+}

frontend/src/container/RolesSettings/CreateEditRolePage/components/PermissionEditor.tsx

@@ -0,0 +1,252 @@
+import { useCallback, useRef, useState } from 'react';
+import { SolidAlertTriangle } from '@signozhq/icons';
+import { Button, ButtonGroup } from '@signozhq/ui/button';
+import { ConfirmDialog } from '@signozhq/ui/dialog';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Typography } from '@signozhq/ui/typography';
+import { Skeleton } from 'antd';
+import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+
+import { PermissionScope, ResourcePermissions } from '../../types';
+import type { EditorMode, JsonEditorRef } from './JsonEditor.types';
+import JsonEditor from './JsonEditor';
+import ResourceCard from './ResourceCard';
+
+import styles from './PermissionEditor.module.scss';
+
+interface PermissionEditorProps {
+	resources: ResourcePermissions[];
+	mode: EditorMode;
+	onModeChange: (mode: EditorMode) => void;
+	onResourceChange: (resources: ResourcePermissions[]) => void;
+	onJsonValidityChange?: (hasError: boolean) => void;
+	isLoading?: boolean;
+	validationErrors?: Set<string>;
+}
+
+function PermissionEditor({
+	resources,
+	mode,
+	onModeChange,
+	onResourceChange,
+	onJsonValidityChange,
+	isLoading = false,
+	validationErrors,
+}: PermissionEditorProps): JSX.Element {
+	const jsonEditorRef = useRef<JsonEditorRef>(null);
+
+	const handleJsonValidityChange = useCallback(
+		(hasError: boolean): void => {
+			onJsonValidityChange?.(mode === 'json' && hasError);
+		},
+		[mode, onJsonValidityChange],
+	);
+	const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
+	const [expandedResources, setExpandedResources] = useState<Set<string>>(
+		new Set(),
+	);
+
+	const handleExpandAll = useCallback((): void => {
+		setExpandedResources(new Set(resources.map((r) => r.resourceId)));
+	}, [resources]);
+
+	const handleCollapseAll = useCallback((): void => {
+		setExpandedResources(new Set());
+	}, []);
+
+	const handleExpandChange = useCallback(
+		(resourceId: string) =>
+			(expanded: boolean): void => {
+				setExpandedResources((prev) => {
+					const next = new Set(prev);
+					if (expanded) {
+						next.add(resourceId);
+					} else {
+						next.delete(resourceId);
+					}
+					return next;
+				});
+			},
+		[],
+	);
+
+	const handleActionChange = useCallback(
+		(
+			resourceId: AuthZResource,
+			action: AuthZVerb,
+			scope: PermissionScope,
+			selectedIds: string[],
+		): void => {
+			const updatedResources = resources.map((r) => {
+				if (r.resourceId !== resourceId) {
+					return r;
+				}
+				return {
+					...r,
+					actions: {
+						...r.actions,
+						[action]: {
+							scope: scope,
+							selectedIds,
+						},
+					},
+				};
+			});
+			onResourceChange(updatedResources);
+		},
+		[resources, onResourceChange],
+	);
+
+	const handleJsonChange = useCallback(
+		(updatedResources: ResourcePermissions[]): void => {
+			onResourceChange(updatedResources);
+		},
+		[onResourceChange],
+	);
+
+	const handleModeChange = useCallback(
+		(value: string): void => {
+			const newMode = value as EditorMode;
+
+			if (
+				newMode === 'interactive' &&
+				mode === 'json' &&
+				jsonEditorRef.current?.hasParseError()
+			) {
+				setShowDiscardConfirm(true);
+				return;
+			}
+
+			if (newMode === 'interactive') {
+				onJsonValidityChange?.(false);
+			}
+
+			onModeChange(newMode);
+		},
+		[mode, onModeChange, onJsonValidityChange],
+	);
+
+	const handleDiscardConfirm = useCallback(async (): Promise<boolean> => {
+		onJsonValidityChange?.(false);
+		onModeChange('interactive');
+		setShowDiscardConfirm(false);
+		return true;
+	}, [onModeChange, onJsonValidityChange]);
+
+	const handleDiscardCancel = useCallback((): void => {
+		setShowDiscardConfirm(false);
+	}, []);
+
+	if (isLoading) {
+		return (
+			<div className={styles.permissionEditor}>
+				<Skeleton active paragraph={{ rows: 6 }} />
+			</div>
+		);
+	}
+
+	return (
+		<div className={styles.permissionEditor} data-testid="permission-editor">
+			<div className={styles.permissionEditorHeader}>
+				<Typography
+					as="span"
+					size="small"
+					weight="medium"
+					color="muted"
+					className={styles.permissionEditorTitle}
+				>
+					Transaction Groups
+				</Typography>
+				<hr className={styles.permissionEditorDivider} />
+				<RadioGroup
+					className={styles.permissionEditorModeToggle}
+					value={mode}
+					onChange={handleModeChange}
+					testId="permission-editor-mode"
+				>
+					<RadioGroupItem
+						value="interactive"
+						containerClassName={styles.permissionEditorModeItem}
+						className={styles.permissionEditorModeInput}
+						testId="permission-editor-mode-interactive"
+					>
+						Interactive
+					</RadioGroupItem>
+					<RadioGroupItem
+						value="json"
+						containerClassName={styles.permissionEditorModeItem}
+						className={styles.permissionEditorModeInput}
+						testId="permission-editor-mode-json"
+					>
+						JSON
+					</RadioGroupItem>
+				</RadioGroup>
+			</div>
+
+			<div className={styles.permissionEditorContent}>
+				{mode === 'interactive' ? (
+					<>
+						<div className={styles.permissionEditorCollapseAction}>
+							<ButtonGroup
+								variant="outlined"
+								color="secondary"
+								size="sm"
+								testId="toggle-all-group"
+							>
+								<Button onClick={handleExpandAll} data-testid="expand-all-button">
+									Expand all
+								</Button>
+								<Button onClick={handleCollapseAll} data-testid="collapse-all-button">
+									Collapse all
+								</Button>
+							</ButtonGroup>
+						</div>
+						<div className={styles.permissionEditorResourceList}>
+							{resources.map((resource) => (
+								<ResourceCard
+									key={resource.resourceId}
+									resource={resource}
+									onActionChange={handleActionChange}
+									isExpanded={expandedResources.has(resource.resourceId)}
+									onExpandChange={handleExpandChange(resource.resourceId)}
+									validationErrors={validationErrors}
+								/>
+							))}
+						</div>
+					</>
+				) : (
+					<JsonEditor
+						ref={jsonEditorRef}
+						resources={resources}
+						mode={mode}
+						onChange={handleJsonChange}
+						onValidityChange={handleJsonValidityChange}
+					/>
+				)}
+			</div>
+
+			<ConfirmDialog
+				open={showDiscardConfirm}
+				onOpenChange={(next): void => {
+					if (!next) {
+						handleDiscardCancel();
+					}
+				}}
+				title="Discard JSON changes?"
+				titleIcon={<SolidAlertTriangle size={14} color="#fdd600" />}
+				confirmText="Discard"
+				confirmColor="destructive"
+				cancelText="Stay in JSON"
+				onConfirm={handleDiscardConfirm}
+				onCancel={handleDiscardCancel}
+			>
+				<Typography>
+					The JSON contains errors and cannot be parsed. Switching to Interactive
+					mode will discard your changes.
+				</Typography>
+			</ConfirmDialog>
+		</div>
+	);
+}
+
+export default PermissionEditor;

frontend/src/container/RolesSettings/CreateEditRolePage/components/ResourceCard.module.scss

@@ -0,0 +1,64 @@
+.resourceCard {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+	overflow: hidden;
+	background: var(--l2-background);
+	transition: border-color 0.15s ease;
+}
+
+.resourceCardHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	padding: var(--spacing-6) var(--spacing-8);
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	transition: background 0.15s ease;
+	text-align: left;
+
+	&:hover {
+		background: var(--l1-background-hover);
+	}
+
+	&:focus {
+		outline: 2px solid var(--primary);
+		outline-offset: -2px;
+	}
+}
+
+.resourceCardHeaderLeft {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+}
+
+.resourceCardChevron {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 16px;
+	height: 16px;
+	color: var(--l2-foreground);
+	flex-shrink: 0;
+}
+
+.resourceCardHeaderRight {
+	display: flex;
+	align-items: center;
+}
+
+.resourceCardBody {
+	display: flex;
+	flex-direction: column;
+
+	&::before {
+		content: '';
+		height: 1px;
+		margin: 0 var(--spacing-8);
+		background: var(--l2-border);
+	}
+}

frontend/src/container/RolesSettings/CreateEditRolePage/components/ResourceCard.tsx

@@ -0,0 +1,132 @@
+import { useCallback, useState } from 'react';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+
+import { Typography } from '@signozhq/ui/typography';
+
+import { useRoleGrantedCount } from '../../hooks/useRoleGrantedCount';
+import { supportsOnlySelected } from '../../permissions.config';
+import ActionToggle from './ActionToggle';
+
+import styles from './ResourceCard.module.scss';
+import { PermissionScope, ResourcePermissions } from '../../types';
+
+interface ResourceCardProps {
+	resource: ResourcePermissions;
+	onActionChange: (
+		resourceId: AuthZResource,
+		action: AuthZVerb,
+		scope: PermissionScope,
+		selectedIds: string[],
+	) => void;
+	defaultExpanded?: boolean;
+	isExpanded?: boolean;
+	onExpandChange?: (expanded: boolean) => void;
+	validationErrors?: Set<string>;
+}
+
+function ResourceCard({
+	resource,
+	onActionChange,
+	defaultExpanded = false,
+	isExpanded: controlledExpanded,
+	onExpandChange,
+	validationErrors,
+}: ResourceCardProps): JSX.Element {
+	const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+	const isControlled = controlledExpanded !== undefined;
+	const isExpanded = isControlled ? controlledExpanded : internalExpanded;
+
+	const handleToggleExpand = useCallback((): void => {
+		if (isControlled) {
+			onExpandChange?.(!controlledExpanded);
+		} else {
+			setInternalExpanded((prev) => !prev);
+		}
+	}, [isControlled, controlledExpanded, onExpandChange]);
+
+	const handleScopeChange = useCallback(
+		(action: AuthZVerb) =>
+			(scope: PermissionScope): void => {
+				const currentConfig = resource.actions[action];
+				const selectedIds =
+					scope === PermissionScope.ONLY_SELECTED
+						? (currentConfig?.selectedIds ?? [])
+						: [];
+				onActionChange(resource.resourceId, action, scope, selectedIds);
+			},
+		[resource.resourceId, resource.actions, onActionChange],
+	);
+
+	const handleSelectedIdsChange = useCallback(
+		(action: AuthZVerb) =>
+			(ids: string[]): void => {
+				const currentConfig = resource.actions[action];
+				onActionChange(
+					resource.resourceId,
+					action,
+					currentConfig?.scope ?? PermissionScope.ONLY_SELECTED,
+					ids,
+				);
+			},
+		[resource.resourceId, resource.actions, onActionChange],
+	);
+
+	const [grantedCount, totalCount] = useRoleGrantedCount(resource);
+
+	return (
+		<div
+			className={styles.resourceCard}
+			data-testid={`resource-card-${resource.resourceId}`}
+		>
+			<button
+				type="button"
+				className={styles.resourceCardHeader}
+				onClick={handleToggleExpand}
+				aria-expanded={isExpanded}
+				aria-label={`${resource.resourceLabel}: ${grantedCount} of ${totalCount} permissions granted`}
+				data-testid={`resource-card-header-${resource.resourceId}`}
+			>
+				<div className={styles.resourceCardHeaderLeft}>
+					<span className={styles.resourceCardChevron}>
+						{isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+					</span>
+					<Typography as="span" size="base" weight="medium">
+						{resource.resourceLabel}
+					</Typography>
+				</div>
+				<div className={styles.resourceCardHeaderRight}>
+					<Typography as="span" size="base" color="muted">
+						{grantedCount} / {totalCount} granted
+					</Typography>
+				</div>
+			</button>
+
+			{isExpanded && (
+				<div className={styles.resourceCardBody}>
+					{resource.availableActions.map((action) => {
+						const actionConfig = resource.actions[action] ?? {
+							scope: PermissionScope.NONE,
+							selectedIds: [],
+						};
+						return (
+							<ActionToggle
+								key={action}
+								action={action}
+								scope={actionConfig.scope}
+								selectedIds={actionConfig.selectedIds}
+								resource={resource.resourceId}
+								canSelectIndividually={supportsOnlySelected(action)}
+								onScopeChange={handleScopeChange(action)}
+								onSelectedIdsChange={handleSelectedIdsChange(action)}
+								hasError={validationErrors?.has(`${resource.resourceId}:${action}`)}
+							/>
+						);
+					})}
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default ResourceCard;

frontend/src/container/RolesSettings/CreateEditRolePage/components/__tests__/jsonSchema.config.test.ts

@@ -0,0 +1,97 @@
+import {
+	ROLE_PERMISSIONS_MODEL_PATH,
+	shouldProvideCompletions,
+} from '../jsonSchema.config';
+
+describe('shouldProvideCompletions', () => {
+	const validPath = `/some/path/${ROLE_PERMISSIONS_MODEL_PATH}`;
+	const invalidPath = '/some/other/file.json';
+
+	describe('model path validation', () => {
+		it('returns false when model path does not end with ROLE_PERMISSIONS_MODEL_PATH', () => {
+			expect(shouldProvideCompletions(invalidPath, '[')).toBe(false);
+		});
+
+		it('returns true when model path ends with ROLE_PERMISSIONS_MODEL_PATH and at array position', () => {
+			expect(shouldProvideCompletions(validPath, '[')).toBe(true);
+		});
+	});
+
+	describe('cursor position validation', () => {
+		it('returns true when cursor is after opening bracket', () => {
+			expect(shouldProvideCompletions(validPath, '[')).toBe(true);
+		});
+
+		it('returns true when cursor is after comma at root level', () => {
+			expect(shouldProvideCompletions(validPath, '[{},\n')).toBe(true);
+		});
+
+		it('returns true with whitespace before bracket', () => {
+			expect(shouldProvideCompletions(validPath, '  \n  [')).toBe(true);
+		});
+
+		it('returns true with whitespace before comma', () => {
+			expect(shouldProvideCompletions(validPath, '[{}  ,  ')).toBe(true);
+		});
+
+		it('returns false when cursor is in middle of text', () => {
+			expect(shouldProvideCompletions(validPath, '[{"foo"')).toBe(false);
+		});
+
+		it('returns false when cursor is after closing bracket', () => {
+			expect(shouldProvideCompletions(validPath, '[]')).toBe(false);
+		});
+
+		it('returns false when cursor is after colon', () => {
+			expect(shouldProvideCompletions(validPath, '[{"key":')).toBe(false);
+		});
+	});
+
+	describe('brace depth validation', () => {
+		it('returns false when cursor is inside an object', () => {
+			expect(shouldProvideCompletions(validPath, '[{')).toBe(false);
+		});
+
+		it('returns false when cursor is inside nested object', () => {
+			const text = '[{"objectGroup": {"resource": {';
+			expect(shouldProvideCompletions(validPath, text)).toBe(false);
+		});
+
+		it('returns true when all objects are closed and at comma', () => {
+			const text = '[{"objectGroup": {"resource": {}}}],';
+			expect(shouldProvideCompletions(validPath, text)).toBe(true);
+		});
+
+		it('returns true after complete object with comma', () => {
+			const text = `[{
+  "objectGroup": {
+    "resource": { "kind": "dashboard", "type": "object" },
+    "selectors": ["*"]
+  },
+  "relation": "read"
+},`;
+			expect(shouldProvideCompletions(validPath, text)).toBe(true);
+		});
+
+		it('returns false inside partial object after comma', () => {
+			const text = `[{
+  "objectGroup": {
+    "resource": { "kind": "dashboard", "type": "object" },`;
+			expect(shouldProvideCompletions(validPath, text)).toBe(false);
+		});
+	});
+
+	describe('edge cases', () => {
+		it('handles empty string', () => {
+			expect(shouldProvideCompletions(validPath, '')).toBe(false);
+		});
+
+		it('handles only whitespace', () => {
+			expect(shouldProvideCompletions(validPath, '   \n\t  ')).toBe(false);
+		});
+
+		it('handles unbalanced braces (more closing) - no completions for malformed JSON', () => {
+			expect(shouldProvideCompletions(validPath, '[{}}},')).toBe(false);
+		});
+	});
+});

frontend/src/container/RolesSettings/CreateEditRolePage/components/jsonSchema.config.ts

@@ -0,0 +1,207 @@
+import type { Monaco } from '@monaco-editor/react';
+import permissionsType from 'hooks/useAuthZ/permissions.type';
+import transactionGroupSchema from 'schemas/generated/transactionGroups.schema.json';
+
+export const TRANSACTION_GROUP_SCHEMA = transactionGroupSchema;
+
+const SCHEMA_URI = 'inmemory://model/transaction-groups-schema.json';
+export const ROLE_PERMISSIONS_MODEL_PATH = 'role-permissions.json';
+
+export function registerJsonSchema(monaco: Monaco): void {
+	monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+		validate: true,
+		schemaValidation: 'error',
+		schemas: [
+			{
+				uri: SCHEMA_URI,
+				fileMatch: [ROLE_PERMISSIONS_MODEL_PATH],
+				schema: TRANSACTION_GROUP_SCHEMA,
+			},
+		],
+	});
+}
+
+interface SnippetDef {
+	label: string;
+	insertText: string;
+	documentation: string;
+}
+
+type BasePermissionTypeDataResourcesType =
+	(typeof permissionsType.data)['resources'][number];
+
+function createGrantAllPermissionSnippet(
+	kind: BasePermissionTypeDataResourcesType['kind'],
+	allowedVerbs: BasePermissionTypeDataResourcesType['allowedVerbs'],
+	type: BasePermissionTypeDataResourcesType['type'],
+): SnippetDef {
+	return {
+		label: `${kind}:all`,
+		insertText: allowedVerbs
+			.map(
+				(verb) => `{
+  "objectGroup": {
+    "resource": { "kind": "${kind}", "type": "${type}" },
+    "selectors": ["*"]
+  },
+  "relation": "${verb}"
+}`,
+			)
+			.join(',\n'),
+		documentation: `Grant all permissions (${allowedVerbs.join(', ')}) on ${kind}`,
+	};
+}
+
+function createGrantPermissionToVerbAndKind(
+	kind: BasePermissionTypeDataResourcesType['kind'],
+	verb: string,
+	type: BasePermissionTypeDataResourcesType['type'],
+): SnippetDef {
+	return {
+		label: `${kind}:${verb}`,
+		insertText: `{
+  "objectGroup": {
+    "resource": { "kind": "${kind}", "type": "${type}" },
+    "selectors": ["*"]
+  },
+  "relation": "${verb}"
+}`,
+		documentation: `${verb} permission on ${kind}`,
+	};
+}
+
+function createGrantPermissionAsReadonly(
+	resources: (typeof permissionsType.data)['resources'],
+): SnippetDef {
+	return {
+		label: 'readonly',
+		insertText: resources
+			.filter(
+				(r) => r.allowedVerbs.includes('read') || r.allowedVerbs.includes('list'),
+			)
+			.flatMap((r) => {
+				const verbs = r.allowedVerbs.filter((v) => v === 'read' || v === 'list');
+				return verbs.map(
+					(verb) => `{
+  "objectGroup": {
+    "resource": { "kind": "${r.kind}", "type": "${r.type}" },
+    "selectors": ["*"]
+  },
+  "relation": "${verb}"
+}`,
+				);
+			})
+			.join(',\n'),
+		documentation: 'Read-only access to all resources (read + list)',
+	};
+}
+
+function buildResourceSnippets(): SnippetDef[] {
+	const { resources } = permissionsType.data;
+	const snippets: SnippetDef[] = [];
+
+	for (const resource of resources) {
+		const { kind, type, allowedVerbs } = resource;
+
+		snippets.push(createGrantAllPermissionSnippet(kind, allowedVerbs, type));
+
+		for (const verb of allowedVerbs) {
+			snippets.push(createGrantPermissionToVerbAndKind(kind, verb, type));
+		}
+	}
+
+	snippets.push(createGrantPermissionAsReadonly(resources));
+
+	return snippets;
+}
+
+const SNIPPETS = buildResourceSnippets();
+
+type MonacoModel = Parameters<
+	Parameters<
+		Monaco['languages']['registerCompletionItemProvider']
+	>[1]['provideCompletionItems']
+>[0];
+type MonacoPosition = Parameters<
+	Parameters<
+		Monaco['languages']['registerCompletionItemProvider']
+	>[1]['provideCompletionItems']
+>[1];
+
+interface Disposable {
+	dispose(): void;
+}
+
+/**
+ * Check if completions should be provided based on model path and cursor position.
+ * Pure function for testability.
+ */
+export function shouldProvideCompletions(
+	modelPath: string,
+	textBeforeCursor: string,
+): boolean {
+	if (!modelPath.endsWith(ROLE_PERMISSIONS_MODEL_PATH)) {
+		return false;
+	}
+
+	const trimmed = textBeforeCursor.trim();
+	const endsAtArrayPosition = trimmed.endsWith('[') || trimmed.endsWith(',');
+
+	if (!endsAtArrayPosition) {
+		return false;
+	}
+
+	let braceDepth = 0;
+	for (const char of textBeforeCursor) {
+		if (char === '{') {
+			braceDepth++;
+		} else if (char === '}') {
+			braceDepth--;
+		}
+	}
+
+	return braceDepth === 0;
+}
+
+/**
+ * Register completion provider for smart snippets.
+ * Returns disposable to clean up on unmount.
+ */
+export function registerCompletionProvider(monaco: Monaco): Disposable {
+	return monaco.languages.registerCompletionItemProvider('json', {
+		triggerCharacters: ['"', '{', '['],
+		provideCompletionItems(model: MonacoModel, position: MonacoPosition) {
+			const textBeforeCursor = model.getValueInRange({
+				startLineNumber: 1,
+				startColumn: 1,
+				endLineNumber: position.lineNumber,
+				endColumn: position.column,
+			});
+
+			if (!shouldProvideCompletions(model.uri.path, textBeforeCursor)) {
+				return { suggestions: [] };
+			}
+
+			const word = model.getWordUntilPosition(position);
+			const range = {
+				startLineNumber: position.lineNumber,
+				endLineNumber: position.lineNumber,
+				startColumn: word.startColumn,
+				endColumn: word.endColumn,
+			};
+
+			const suggestions = SNIPPETS.map((snippet, index) => ({
+				label: snippet.label,
+				kind: monaco.languages.CompletionItemKind.Snippet,
+				insertText: snippet.insertText,
+				insertTextRules:
+					monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+				documentation: snippet.documentation,
+				range,
+				sortText: String(index).padStart(3, '0'),
+			}));
+
+			return { suggestions };
+		},
+	});
+}

frontend/src/container/RolesSettings/CreateEditRolePage/index.tsx

@@ -0,0 +1 @@
+export { default } from './CreateEditRolePage';

frontend/src/container/RolesSettings/CreateEditRolePage/useCreateEditRolePageActions.ts

@@ -0,0 +1,256 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { toast } from '@signozhq/ui/sonner';
+import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import type { ErrorType } from 'api/generatedAPIInstance';
+import ROUTES from 'constants/routes';
+import { parseAsStringLiteral, useQueryState } from 'nuqs';
+import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
+
+import type { ResourcePermissions } from '../types';
+import type { EditorMode } from './components/JsonEditor.types';
+import {
+	createEmptyRolePermissions,
+	useCreateRolePermissions,
+	useRolePermissions,
+	useUpdateRolePermissions,
+} from '../hooks/useRolePermissions';
+import { useRoleAuthZ } from '../hooks/useRoleAuthZ';
+import {
+	useRoleUnsavedChanges,
+	type RoleFormData,
+} from './useRoleUnsavedChanges';
+import { useRoleFormValidation } from './useRoleFormValidation';
+
+const EDITOR_MODES: EditorMode[] = ['interactive', 'json'];
+
+interface UseCreateEditRolePageCallbacksResult {
+	formData: RoleFormData;
+	setFormData: React.Dispatch<React.SetStateAction<RoleFormData>>;
+	editorMode: EditorMode;
+	setEditorMode: (mode: EditorMode) => void;
+	resources: ResourcePermissions[];
+	setResources: (resources: ResourcePermissions[]) => void;
+	isLoading: boolean;
+	isSaving: boolean;
+	hasUnsavedChanges: boolean;
+	handleSave: () => Promise<boolean>;
+	handleCancel: () => void;
+	handleFormChange: (field: keyof RoleFormData, value: string) => void;
+	isCreateMode: boolean;
+	loadError: APIError | null;
+	saveError: APIError | null;
+	clearSaveError: () => void;
+	validationErrors: Set<string>;
+	hasRequiredPermission: boolean;
+	isAuthZLoading: boolean;
+	deniedPermission: string;
+}
+
+export function useCreateEditRolePageActions(
+	roleId: string,
+	roleName: string,
+): UseCreateEditRolePageCallbacksResult {
+	const history = useHistory();
+	const isCreateMode = roleId === 'new';
+
+	const {
+		hasCreatePermission,
+		hasReadPermission,
+		hasUpdatePermission,
+		isAuthZLoading,
+	} = useRoleAuthZ(roleName);
+
+	const deniedPermission = useMemo(() => {
+		if (isCreateMode) {
+			return 'role:create';
+		}
+		if (roleName) {
+			return `role:${roleName}:update`;
+		}
+		return `role:<missing-rule-name>:update`;
+	}, [isCreateMode, roleName]);
+
+	const [formData, setFormData] = useState<RoleFormData>({
+		name: '',
+		description: '',
+	});
+	const [editorMode, setEditorMode] = useQueryState(
+		'viewMode',
+		parseAsStringLiteral(EDITOR_MODES).withDefault('interactive'),
+	);
+	const emptyResources = useMemo(() => createEmptyRolePermissions(), []);
+	const [localResources, setLocalResources] = useState<ResourcePermissions[]>(
+		() => (isCreateMode ? createEmptyRolePermissions() : []),
+	);
+	const [isInitialized, setIsInitialized] = useState(false);
+	const [saveError, setSaveError] = useState<APIError | null>(null);
+
+	const { validationErrors, validateResources, clearValidationErrors } =
+		useRoleFormValidation();
+
+	const {
+		data: rolePermissionsData,
+		isLoading: isLoadingPermissions,
+		error: rolePermissionsError,
+	} = useRolePermissions(roleId, {
+		enabled: !isCreateMode,
+	});
+
+	const loadError = rolePermissionsError
+		? toAPIError(rolePermissionsError, 'Failed to load role')
+		: null;
+
+	const { mutateAsync: createRole, isLoading: isCreating } =
+		useCreateRolePermissions();
+	const { mutateAsync: updateRole, isLoading: isUpdating } =
+		useUpdateRolePermissions();
+	const isSaving = isCreating || isUpdating;
+
+	useEffect(() => {
+		if (rolePermissionsData && !isInitialized) {
+			setFormData({
+				name: rolePermissionsData.roleName,
+				description: rolePermissionsData.roleDescription,
+			});
+			setLocalResources(JSON.parse(JSON.stringify(rolePermissionsData.resources)));
+			setIsInitialized(true);
+		}
+	}, [rolePermissionsData, isInitialized]);
+
+	const handleFormChange = useCallback(
+		(field: keyof RoleFormData, value: string): void => {
+			setFormData((prev) => ({
+				...prev,
+				[field]: value,
+			}));
+		},
+		[],
+	);
+
+	const handleModeChange = useCallback(
+		(mode: EditorMode): void => {
+			void setEditorMode(mode);
+		},
+		[setEditorMode],
+	);
+
+	const handleResourcesChange = useCallback(
+		(resources: ResourcePermissions[]): void => {
+			setLocalResources(resources);
+		},
+		[],
+	);
+
+	const hasUnsavedChanges = useRoleUnsavedChanges(
+		isCreateMode,
+		formData,
+		localResources,
+		rolePermissionsData,
+		emptyResources,
+	);
+
+	const handleSave = useCallback(async (): Promise<boolean> => {
+		if (!formData.name.trim()) {
+			toast.error('Role name is required', { position: 'bottom-center' });
+			return false;
+		}
+
+		const validationError = validateResources(localResources);
+		if (validationError) {
+			setSaveError(
+				new APIError({
+					httpStatusCode: 400,
+					error: {
+						code: 'VALIDATION_ERROR',
+						message: validationError,
+						url: '',
+						errors: [],
+					},
+				}),
+			);
+			return false;
+		}
+
+		clearValidationErrors();
+		setSaveError(null);
+
+		try {
+			if (isCreateMode) {
+				await createRole({
+					name: formData.name,
+					description: formData.description,
+					resources: localResources,
+				});
+			} else {
+				await updateRole({
+					roleId,
+					description: formData.description,
+					resources: localResources,
+				});
+			}
+			toast.success(
+				isCreateMode ? 'Role created successfully' : 'Role updated successfully',
+				{ position: 'bottom-center' },
+			);
+			return true;
+		} catch (error) {
+			setSaveError(
+				toAPIError(
+					error as ErrorType<RenderErrorResponseDTO>,
+					'Failed to save role',
+				),
+			);
+			return false;
+		}
+	}, [
+		formData.name,
+		formData.description,
+		isCreateMode,
+		roleId,
+		localResources,
+		createRole,
+		updateRole,
+		validateResources,
+		clearValidationErrors,
+	]);
+
+	const clearSaveError = useCallback((): void => {
+		setSaveError(null);
+	}, []);
+
+	const handleCancel = useCallback((): void => {
+		if (isCreateMode) {
+			history.push(ROUTES.ROLES_SETTINGS);
+		} else {
+			const viewUrl = `${ROUTES.ROLE_DETAILS.replace(':roleId', roleId)}?name=${encodeURIComponent(roleName)}`;
+			history.push(viewUrl);
+		}
+	}, [history, isCreateMode, roleId, roleName]);
+
+	return {
+		formData,
+		setFormData,
+		editorMode,
+		setEditorMode: handleModeChange,
+		resources: localResources,
+		setResources: handleResourcesChange,
+		isLoading: isLoadingPermissions,
+		isSaving,
+		hasUnsavedChanges,
+		handleSave,
+		handleCancel,
+		handleFormChange,
+		isCreateMode,
+		loadError,
+		saveError,
+		clearSaveError,
+		validationErrors,
+		hasRequiredPermission: isCreateMode
+			? hasCreatePermission
+			: hasReadPermission && hasUpdatePermission,
+		isAuthZLoading,
+		deniedPermission,
+	};
+}

frontend/src/container/RolesSettings/CreateEditRolePage/useRoleFormValidation.ts

@@ -0,0 +1,50 @@
+import { useCallback, useState } from 'react';
+import { PermissionScope, ResourcePermissions } from '../types';
+
+interface UseRoleFormValidationResult {
+	validationErrors: Set<string>;
+	validateResources: (resources: ResourcePermissions[]) => string | null;
+	clearValidationErrors: () => void;
+}
+
+export function useRoleFormValidation(): UseRoleFormValidationResult {
+	const [validationErrors, setValidationErrors] = useState<Set<string>>(
+		() => new Set(),
+	);
+
+	const validateResources = useCallback(
+		(resources: ResourcePermissions[]): string | null => {
+			const errors = new Set<string>();
+
+			for (const resource of resources) {
+				for (const [action, config] of Object.entries(resource.actions)) {
+					if (
+						config?.scope === PermissionScope.ONLY_SELECTED &&
+						config.selectedIds.length === 0
+					) {
+						errors.add(`${resource.resourceId}:${action}`);
+					}
+				}
+			}
+
+			if (errors.size > 0) {
+				setValidationErrors(errors);
+				return 'Please add at least one selector for each "Only selected" permission.';
+			}
+
+			setValidationErrors(new Set());
+			return null;
+		},
+		[],
+	);
+
+	const clearValidationErrors = useCallback((): void => {
+		setValidationErrors(new Set());
+	}, []);
+
+	return {
+		validationErrors,
+		validateResources,
+		clearValidationErrors,
+	};
+}

frontend/src/container/RolesSettings/CreateEditRolePage/useRoleUnsavedChanges.ts

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+import type { ResourcePermissions } from '../types';
+
+export interface RoleFormData {
+	name: string;
+	description: string;
+}
+
+interface RolePermissionsData {
+	roleName: string;
+	roleDescription: string;
+	resources: ResourcePermissions[];
+}
+
+export function useRoleUnsavedChanges(
+	isCreateMode: boolean,
+	formData: RoleFormData,
+	localResources: ResourcePermissions[],
+	rolePermissionsData: RolePermissionsData | undefined,
+	emptyResources: ResourcePermissions[],
+): boolean {
+	return useMemo(() => {
+		if (isCreateMode) {
+			return (
+				formData.name.trim() !== '' ||
+				formData.description.trim() !== '' ||
+				JSON.stringify(localResources) !== JSON.stringify(emptyResources)
+			);
+		}
+
+		if (!rolePermissionsData) {
+			return false;
+		}
+
+		const nameChanged = formData.name !== rolePermissionsData.roleName;
+		const descriptionChanged =
+			formData.description !== rolePermissionsData.roleDescription;
+		const resourcesChanged =
+			JSON.stringify(localResources) !==
+			JSON.stringify(rolePermissionsData.resources);
+
+		return nameChanged || descriptionChanged || resourcesChanged;
+	}, [
+		isCreateMode,
+		formData,
+		localResources,
+		rolePermissionsData,
+		emptyResources,
+	]);
+}

frontend/src/container/RolesSettings/DeleteRoleModal/DeleteRoleModal.module.scss

@@ -0,0 +1,3 @@
+.errorCallout {
+	margin-top: var(--spacing-4);
+}

frontend/src/container/RolesSettings/DeleteRoleModal/DeleteRoleModal.tsx

@@ -0,0 +1,58 @@
+import { Trash2 } from '@signozhq/icons';
+import { ConfirmDialog } from '@signozhq/ui/dialog';
+import { Typography } from '@signozhq/ui/typography';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import APIError from 'types/api/error';
+import styles from './DeleteRoleModal.module.scss';
+import { Callout } from '@signozhq/ui/callout';
+
+interface DeleteRoleModalProps {
+	isOpen: boolean;
+	roleName: string;
+	error: APIError | null;
+	onCancel: () => void;
+	onConfirm: () => Promise<boolean>;
+}
+
+function DeleteRoleModal({
+	isOpen,
+	roleName,
+	error,
+	onCancel,
+	onConfirm,
+}: DeleteRoleModalProps): JSX.Element {
+	return (
+		<ConfirmDialog
+			open={isOpen}
+			onOpenChange={(next): void => {
+				if (!next) {
+					onCancel();
+				}
+			}}
+			title="Delete Role"
+			titleIcon={<Trash2 size={14} />}
+			confirmText="Delete Role"
+			confirmColor="destructive"
+			cancelText="Cancel"
+			onConfirm={onConfirm}
+			onCancel={onCancel}
+			disableOutsideClick
+		>
+			<Typography>
+				Are you sure you want to delete the role <strong>{roleName}</strong>? This
+				action cannot be undone.
+			</Typography>
+			{error && (
+				<Callout
+					title="Failed to delete role"
+					color="cherry"
+					className={styles.errorCallout}
+				>
+					<ErrorInPlace error={error} height="auto" padding={0} />
+				</Callout>
+			)}
+		</ConfirmDialog>
+	);
+}
+
+export default DeleteRoleModal;

frontend/src/container/RolesSettings/DeleteRoleModal/useDeleteRoleModal.ts

@@ -0,0 +1,97 @@
+import { useCallback, useState } from 'react';
+import { useQueryClient } from 'react-query';
+import {
+	invalidateGetRole,
+	invalidateListRoles,
+	useDeleteRole,
+} from 'api/generated/services/role';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import APIError from 'types/api/error';
+
+interface UseDeleteRoleModalProps {
+	roleId?: string | null;
+	isManaged: boolean;
+	hasDeletePermission: boolean;
+	onDeleteSuccess?: () => void;
+}
+
+interface UseDeleteRoleModalResult {
+	isDeleteModalOpen: boolean;
+	isDeleteDisabled: boolean;
+	deleteDisabledReason: string;
+	isDeleting: boolean;
+	deleteError: APIError | null;
+	handleOpenDeleteModal: () => void;
+	handleCloseDeleteModal: () => void;
+	handleConfirmDelete: () => Promise<boolean>;
+}
+
+export function useDeleteRoleModal(
+	props: UseDeleteRoleModalProps,
+): UseDeleteRoleModalResult {
+	const { roleId, isManaged, hasDeletePermission, onDeleteSuccess } = props;
+	const queryClient = useQueryClient();
+
+	const [deleteTargetRoleId, setDeleteTargetRoleId] = useState<string | null>(
+		null,
+	);
+	const [isDeleting, setIsDeleting] = useState(false);
+	const [deleteError, setDeleteError] = useState<APIError | null>(null);
+
+	const { mutateAsync: deleteRole } = useDeleteRole();
+
+	const handleOpenDeleteModal = useCallback((): void => {
+		setDeleteTargetRoleId(roleId ?? null);
+	}, [roleId]);
+
+	const handleCloseDeleteModal = useCallback((): void => {
+		setDeleteTargetRoleId(null);
+		setDeleteError(null);
+	}, []);
+
+	const handleConfirmDelete = useCallback(async (): Promise<boolean> => {
+		if (!deleteTargetRoleId) {
+			return false;
+		}
+
+		setIsDeleting(true);
+		setDeleteError(null);
+
+		try {
+			await deleteRole({ pathParams: { id: deleteTargetRoleId } });
+			await invalidateListRoles(queryClient);
+			await invalidateGetRole(queryClient, { id: deleteTargetRoleId });
+			setDeleteTargetRoleId(null);
+			onDeleteSuccess?.();
+			return true;
+		} catch (error) {
+			const apiError = convertToApiError(
+				error as AxiosError<RenderErrorResponseDTO>,
+			);
+			setDeleteError(apiError ?? null);
+			return false;
+		} finally {
+			setIsDeleting(false);
+		}
+	}, [deleteRole, deleteTargetRoleId, queryClient, onDeleteSuccess]);
+
+	const isDeleteModalOpen = deleteTargetRoleId !== null;
+
+	const isDeleteDisabled = isManaged || !hasDeletePermission;
+	const deleteDisabledReason = isManaged
+		? 'Managed roles cannot be deleted'
+		: 'You do not have permission to delete this role';
+
+	return {
+		isDeleteModalOpen,
+		isDeleteDisabled,
+		deleteDisabledReason,
+		isDeleting,
+		deleteError,
+		handleOpenDeleteModal,
+		handleCloseDeleteModal,
+		handleConfirmDelete,
+	};
+}

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.styles.scss

@@ -1,271 +0,0 @@
-.permission-side-panel-backdrop {
-	position: fixed;
-	inset: 0;
-	z-index: 100;
-	background: transparent;
-}
-
-.permission-side-panel {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 101;
-	width: 720px;
-	display: flex;
-	flex-direction: column;
-	background: var(--l2-background);
-	border-left: 1px solid var(--l1-border);
-	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-	&__header {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-		flex-shrink: 0;
-		height: 48px;
-		padding: 0 16px;
-		background: var(--l2-background);
-		border-bottom: 1px solid var(--l1-border);
-	}
-
-	&__header-divider {
-		display: block;
-		width: 1px;
-		height: 16px;
-		background: var(--l1-border);
-		flex-shrink: 0;
-	}
-
-	&__title {
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		color: var(--foreground);
-	}
-
-	&__content {
-		flex: 1;
-		overflow-y: auto;
-		padding: 12px 15px;
-	}
-
-	&__resource-list {
-		display: flex;
-		flex-direction: column;
-		border: 1px solid var(--l1-border);
-		border-radius: 4px;
-		overflow: hidden;
-	}
-
-	&__footer {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		flex-shrink: 0;
-		height: 56px;
-		padding: 0 16px;
-		gap: 12px;
-		background: var(--l2-background);
-		border-top: 1px solid var(--l1-border);
-	}
-
-	&__unsaved {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		margin-right: auto;
-	}
-
-	&__unsaved-dot {
-		display: block;
-		width: 6px;
-		height: 6px;
-		border-radius: 50px;
-		background: var(--primary);
-		box-shadow: 0px 0px 6px 0px
-			color-mix(in srgb, var(--primary-background) 40%, transparent);
-		flex-shrink: 0;
-	}
-
-	&__unsaved-text {
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 24px;
-		letter-spacing: -0.07px;
-		color: var(--primary);
-	}
-
-	&__footer-actions {
-		display: flex;
-		align-items: center;
-		gap: 12px;
-	}
-}
-
-.psp-resource {
-	display: flex;
-	flex-direction: column;
-	border-bottom: 1px solid var(--l1-border);
-
-	&:last-child {
-		border-bottom: none;
-	}
-
-	&__row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 12px 16px;
-		cursor: pointer;
-		transition: background 0.15s ease;
-
-		&--expanded {
-			background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-		}
-
-		&:hover {
-			background: color-mix(in srgb, var(--bg-robin-200) 3%, transparent);
-		}
-	}
-
-	&__left {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-	}
-
-	&__chevron {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 14px;
-		height: 14px;
-		color: var(--foreground);
-		flex-shrink: 0;
-	}
-
-	&__label {
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		color: var(--l1-foreground);
-	}
-
-	&__body {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		padding: 8px 0 8px 44px;
-		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-	}
-
-	&__radio-group {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
-
-	&__radio-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 6px 0;
-
-		label {
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.07px;
-			color: var(--l1-foreground);
-			cursor: pointer;
-		}
-	}
-
-	&__select-wrapper {
-		padding: 6px 16px 4px 24px;
-	}
-
-	&__select {
-		width: 100%;
-
-		// todo: https://github.com/SigNoz/components/issues/116
-		.ant-select-selector {
-			background: var(--l2-background) !important;
-			border: 1px solid var(--border) !important;
-			border-radius: 2px !important;
-			padding: 4px 6px !important;
-			min-height: 32px !important;
-			box-shadow: none !important;
-
-			&:hover,
-			&:focus-within {
-				border-color: var(--input) !important;
-				box-shadow: none !important;
-			}
-		}
-
-		.ant-select-selection-placeholder {
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			color: var(--foreground);
-			opacity: 0.4;
-		}
-
-		.ant-select-selection-item {
-			background: var(--input) !important;
-			border: none !important;
-			border-radius: 2px !important;
-			padding: 0 6px !important;
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 20px;
-			color: var(--l1-foreground) !important;
-			height: auto !important;
-		}
-
-		.ant-select-selection-item-remove {
-			color: var(--foreground) !important;
-			display: flex;
-			align-items: center;
-		}
-
-		.ant-select-arrow {
-			color: var(--foreground);
-		}
-	}
-
-	&__select-popup {
-		.ant-select-item {
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			color: var(--foreground);
-			background: var(--l2-background);
-
-			&-option-selected {
-				background: var(--border) !important;
-				color: var(--l1-foreground) !important;
-			}
-
-			&-option-active {
-				background: var(--l2-background-hover) !important;
-			}
-		}
-
-		.ant-select-dropdown {
-			background: var(--l2-background);
-			border: 1px solid var(--l1-border);
-			border-radius: 2px;
-			padding: 4px 0;
-		}
-	}
-}

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.tsx

@@ -1,300 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { ChevronDown, ChevronRight, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import {
-	RadioGroup,
-	RadioGroupItem,
-	RadioGroupLabel,
-} from '@signozhq/ui/radio-group';
-import { Select, Skeleton } from 'antd';
-
-import {
-	buildConfig,
-	configsEqual,
-	DEFAULT_RESOURCE_CONFIG,
-	isResourceConfigEqual,
-} from '../utils';
-import type {
-	PermissionConfig,
-	PermissionSidePanelProps,
-	ResourceConfig,
-	ResourceDefinition,
-	ScopeType,
-} from './PermissionSidePanel.types';
-import { PermissionScope } from './PermissionSidePanel.types';
-
-import './PermissionSidePanel.styles.scss';
-
-const RELATIONS_ALL_ONLY = new Set(['list', 'create']);
-
-interface ResourceRowProps {
-	resource: ResourceDefinition;
-	config: ResourceConfig;
-	isExpanded: boolean;
-	relation: string;
-	onToggleExpand: (id: string) => void;
-	onScopeChange: (id: string, scope: ScopeType) => void;
-	onSelectedIdsChange: (id: string, ids: string[]) => void;
-}
-
-function ResourceRow({
-	resource,
-	config,
-	isExpanded,
-	relation,
-	onToggleExpand,
-	onScopeChange,
-	onSelectedIdsChange,
-}: ResourceRowProps): JSX.Element {
-	const showOnlySelected = !RELATIONS_ALL_ONLY.has(relation);
-	return (
-		<div className="psp-resource">
-			<div
-				className={`psp-resource__row${
-					isExpanded ? ' psp-resource__row--expanded' : ''
-				}`}
-				role="button"
-				tabIndex={0}
-				onClick={(): void => onToggleExpand(resource.id)}
-				onKeyDown={(e): void => {
-					if (e.key === 'Enter' || e.key === ' ') {
-						onToggleExpand(resource.id);
-					}
-				}}
-			>
-				<div className="psp-resource__left">
-					<span className="psp-resource__chevron">
-						{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-					</span>
-					<span className="psp-resource__label">{resource.label}</span>
-				</div>
-			</div>
-
-			{isExpanded && (
-				<div className="psp-resource__body">
-					<RadioGroup
-						value={config.scope}
-						onChange={(val): void => onScopeChange(resource.id, val as ScopeType)}
-						color="robin"
-						className="psp-resource__radio-group"
-					>
-						<div className="psp-resource__radio-item">
-							<RadioGroupItem value={PermissionScope.ALL} id={`${resource.id}-all`} />
-							<RadioGroupLabel htmlFor={`${resource.id}-all`}>All</RadioGroupLabel>
-						</div>
-
-						{showOnlySelected && (
-							<div className="psp-resource__radio-item">
-								<RadioGroupItem
-									value={PermissionScope.ONLY_SELECTED}
-									id={`${resource.id}-only-selected`}
-								/>
-								<RadioGroupLabel htmlFor={`${resource.id}-only-selected`}>
-									Only selected
-								</RadioGroupLabel>
-							</div>
-						)}
-
-						<div className="psp-resource__radio-item">
-							<RadioGroupItem
-								value={PermissionScope.NONE}
-								id={`${resource.id}-none`}
-							/>
-							<RadioGroupLabel htmlFor={`${resource.id}-none`}>None</RadioGroupLabel>
-						</div>
-					</RadioGroup>
-
-					{config.scope === PermissionScope.ONLY_SELECTED && showOnlySelected && (
-						<div className="psp-resource__select-wrapper">
-							<Select
-								mode="tags"
-								open={false}
-								allowClear
-								suffixIcon={null}
-								value={config.selectedIds}
-								onChange={(vals: string[]): void =>
-									onSelectedIdsChange(resource.id, vals)
-								}
-								placeholder="Type and press Enter to add..."
-								className="psp-resource__select"
-							/>
-						</div>
-					)}
-				</div>
-			)}
-		</div>
-	);
-}
-
-function PermissionSidePanel({
-	open,
-	onClose,
-	permissionLabel,
-	relation,
-	resources,
-	initialConfig,
-	isLoading = false,
-	isSaving = false,
-	canEdit = true,
-	onSave,
-}: PermissionSidePanelProps): JSX.Element | null {
-	const [config, setConfig] = useState<PermissionConfig>(() =>
-		buildConfig(resources, initialConfig),
-	);
-	const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
-
-	useEffect(() => {
-		if (open) {
-			setConfig(buildConfig(resources, initialConfig));
-			setExpandedIds(new Set());
-		}
-	}, [open, resources, initialConfig]);
-
-	const savedConfig = useMemo(
-		() => buildConfig(resources, initialConfig),
-		[resources, initialConfig],
-	);
-
-	const unsavedCount = useMemo(() => {
-		if (configsEqual(config, savedConfig)) {
-			return 0;
-		}
-		return Object.keys(config).filter(
-			(id) => !isResourceConfigEqual(config[id], savedConfig[id]),
-		).length;
-	}, [config, savedConfig]);
-
-	const updateResource = useCallback(
-		(id: string, patch: Partial<ResourceConfig>): void => {
-			setConfig((prev) => ({
-				...prev,
-				[id]: { ...prev[id], ...patch },
-			}));
-		},
-		[],
-	);
-
-	const handleToggleExpand = useCallback((id: string): void => {
-		setExpandedIds((prev) => {
-			const next = new Set(prev);
-			if (next.has(id)) {
-				next.delete(id);
-			} else {
-				next.add(id);
-			}
-			return next;
-		});
-	}, []);
-
-	const handleScopeChange = useCallback(
-		(id: string, scope: ScopeType): void => {
-			updateResource(id, { scope, selectedIds: [] });
-		},
-		[updateResource],
-	);
-
-	const handleSelectedIdsChange = useCallback(
-		(id: string, ids: string[]): void => {
-			updateResource(id, { selectedIds: ids });
-		},
-		[updateResource],
-	);
-
-	const handleSave = useCallback((): void => {
-		onSave(config);
-	}, [config, onSave]);
-
-	const handleDiscard = useCallback((): void => {
-		setConfig(buildConfig(resources, initialConfig));
-		setExpandedIds(new Set());
-	}, [resources, initialConfig]);
-
-	if (!open) {
-		return null;
-	}
-
-	return (
-		<>
-			<div
-				className="permission-side-panel-backdrop"
-				role="presentation"
-				onClick={onClose}
-			/>
-
-			<div className="permission-side-panel">
-				<div className="permission-side-panel__header">
-					<Button
-						variant="link"
-						color="secondary"
-						size="icon"
-						onClick={onClose}
-						aria-label="Close panel"
-					>
-						<X size={14} />
-					</Button>
-					<span className="permission-side-panel__header-divider" />
-					<span className="permission-side-panel__title">
-						Edit {permissionLabel} Permissions
-					</span>
-				</div>
-
-				<div className="permission-side-panel__content">
-					{isLoading ? (
-						<Skeleton active paragraph={{ rows: 6 }} />
-					) : (
-						<div className="permission-side-panel__resource-list">
-							{resources.map((resource) => (
-								<ResourceRow
-									key={resource.id}
-									resource={resource}
-									config={config[resource.id] ?? DEFAULT_RESOURCE_CONFIG}
-									isExpanded={expandedIds.has(resource.id)}
-									relation={relation}
-									onToggleExpand={handleToggleExpand}
-									onScopeChange={handleScopeChange}
-									onSelectedIdsChange={handleSelectedIdsChange}
-								/>
-							))}
-						</div>
-					)}
-				</div>
-
-				<div className="permission-side-panel__footer">
-					{unsavedCount > 0 && (
-						<div className="permission-side-panel__unsaved">
-							<span className="permission-side-panel__unsaved-dot" />
-							<span className="permission-side-panel__unsaved-text">
-								{unsavedCount} unsaved change{unsavedCount !== 1 ? 's' : ''}
-							</span>
-						</div>
-					)}
-
-					<div className="permission-side-panel__footer-actions">
-						<Button
-							variant="solid"
-							color="secondary"
-							prefix={<X size={14} />}
-							onClick={unsavedCount > 0 ? handleDiscard : onClose}
-							size="sm"
-							disabled={isSaving}
-						>
-							{unsavedCount > 0 ? 'Discard' : 'Cancel'}
-						</Button>
-						<Button
-							variant="solid"
-							color="primary"
-							size="sm"
-							onClick={handleSave}
-							loading={isSaving}
-							disabled={isLoading || unsavedCount === 0 || !canEdit}
-						>
-							Save Changes
-						</Button>
-					</div>
-				</div>
-			</div>
-		</>
-	);
-}
-
-export default PermissionSidePanel;

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.types.ts

@@ -1,40 +0,0 @@
-export interface ResourceOption {
-	value: string;
-	label: string;
-}
-
-export interface ResourceDefinition {
-	id: string;
-	kind: string;
-	type: string;
-	label: string;
-	options?: ResourceOption[];
-}
-
-export enum PermissionScope {
-	ALL = 'all',
-	ONLY_SELECTED = 'only_selected',
-	NONE = 'none',
-}
-
-export type ScopeType = PermissionScope;
-
-export interface ResourceConfig {
-	scope: ScopeType;
-	selectedIds: string[];
-}
-
-export type PermissionConfig = Record<string, ResourceConfig>;
-
-export interface PermissionSidePanelProps {
-	open: boolean;
-	onClose: () => void;
-	permissionLabel: string;
-	relation: string;
-	resources: ResourceDefinition[];
-	initialConfig?: PermissionConfig;
-	isLoading?: boolean;
-	isSaving?: boolean;
-	canEdit?: boolean;
-	onSave: (config: PermissionConfig) => void;
-}

frontend/src/container/RolesSettings/PermissionSidePanel/index.tsx

@@ -1,10 +0,0 @@
-export { default } from './PermissionSidePanel';
-export type {
-	PermissionConfig,
-	PermissionSidePanelProps,
-	ResourceConfig,
-	ResourceDefinition,
-	ResourceOption,
-	ScopeType,
-} from './PermissionSidePanel.types';
-export { PermissionScope } from './PermissionSidePanel.types';

frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.styles.scss

@@ -1,325 +0,0 @@
-.role-details-page {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	padding: 16px;
-	width: 100%;
-	max-width: 60vw;
-	margin: 0 auto;
-
-	.role-details-header {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.role-details-title {
-		color: var(--l1-foreground);
-		font-family: Inter;
-		font-size: 18px;
-		font-weight: 500;
-		line-height: 28px;
-		letter-spacing: -0.09px;
-	}
-
-	.role-details-permission-item--readonly {
-		cursor: default !important;
-		pointer-events: none;
-		opacity: 0.55;
-	}
-
-	.role-details-actions {
-		display: flex;
-		align-items: center;
-		gap: 12px;
-	}
-
-	.role-details-overview {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-	}
-
-	.role-details-meta {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-	}
-
-	.role-details-section-label {
-		font-family: Inter;
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 20px;
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-		color: var(--foreground);
-	}
-
-	.role-details-description-text {
-		font-family: Inter;
-		font-size: 13px;
-		font-weight: 500;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		color: var(--foreground);
-	}
-
-	.role-details-info-row {
-		display: flex;
-		gap: 16px;
-		align-items: flex-start;
-	}
-
-	.role-details-info-col {
-		flex: 1;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	.role-details-info-value {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.role-details-info-name {
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 500;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		color: var(--foreground);
-	}
-
-	.role-details-permissions {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-		padding-top: 8px;
-	}
-
-	.role-details-permissions-header {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-		height: 20px;
-	}
-
-	.role-details-permissions-divider {
-		flex: 1;
-		border: none;
-		border-top: 2px dotted var(--l1-border);
-		border-bottom: 2px dotted var(--l1-border);
-		height: 7px;
-		margin: 0;
-	}
-
-	.role-details-permissions-learn-more {
-		color: var(--primary);
-		font-size: var(--font-size-xs);
-		text-decoration: none;
-		white-space: nowrap;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
-	.role-details-permission-list {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-	}
-
-	.role-details-permission-item {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 44px;
-		padding: 0 12px;
-		background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
-		border: 1px solid var(--secondary);
-		border-radius: 4px;
-		cursor: pointer;
-		transition: background 0.15s ease;
-
-		&:hover {
-			background: color-mix(in srgb, var(--bg-robin-200) 12%, transparent);
-		}
-	}
-
-	.role-details-permission-item-left {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.role-details-permission-item-label {
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		color: var(--l1-foreground);
-	}
-
-	.role-details-members {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-	}
-
-	.role-details-members-search {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		height: 32px;
-		padding: 6px 6px 6px 8px;
-		background: var(--l2-background);
-		border: 1px solid var(--secondary);
-		border-radius: 2px;
-
-		.role-details-members-search-icon {
-			flex-shrink: 0;
-			color: var(--foreground);
-			opacity: 0.5;
-		}
-
-		.role-details-members-search-input {
-			flex: 1;
-			height: 100%;
-			background: transparent;
-			border: none;
-			outline: none;
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 18px;
-			letter-spacing: -0.07px;
-			color: var(--foreground);
-
-			&::placeholder {
-				color: var(--foreground);
-				opacity: 0.4;
-			}
-		}
-	}
-
-	.role-details-members-content {
-		display: flex;
-		flex-direction: column;
-		min-height: 420px;
-		border: 1px dashed var(--secondary);
-		border-radius: 3px;
-		margin-top: -1px;
-	}
-
-	.role-details-members-empty-state {
-		display: flex;
-		flex: 1;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: 4px;
-		padding: 48px 0;
-		flex-grow: 1;
-
-		.role-details-members-empty-emoji {
-			font-size: 32px;
-			line-height: 1;
-		}
-
-		.role-details-members-empty-text {
-			font-family: Inter;
-			font-size: 14px;
-			line-height: 18px;
-			letter-spacing: -0.07px;
-
-			&--bold {
-				font-weight: 500;
-				color: var(--l1-foreground);
-			}
-
-			&--muted {
-				font-weight: 400;
-				color: var(--foreground);
-			}
-		}
-	}
-
-	.role-details-skeleton {
-		padding: 16px 0;
-	}
-}
-
-.role-details-delete-modal {
-	width: calc(100% - 30px) !important;
-	max-width: 384px;
-
-	.ant-modal-content {
-		padding: 0;
-		border-radius: 4px;
-		border: 1px solid var(--secondary);
-		background: var(--l2-background);
-		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-
-		.ant-modal-header {
-			padding: 16px;
-			background: var(--l2-background);
-			margin-bottom: 0;
-		}
-
-		.ant-modal-body {
-			padding: 0 16px 28px 16px;
-		}
-
-		.ant-modal-footer {
-			display: flex;
-			justify-content: flex-end;
-			padding: 16px;
-			margin: 0;
-
-			.cancel-btn {
-				display: flex;
-				align-items: center;
-				border: none;
-				border-radius: 2px;
-			}
-
-			.delete-btn {
-				display: flex;
-				align-items: center;
-				border: none;
-				border-radius: 2px;
-				margin-left: 12px;
-			}
-		}
-	}
-
-	.title {
-		color: var(--l1-foreground);
-		font-family: Inter;
-		font-size: 13px;
-		font-weight: 400;
-		line-height: 1;
-		letter-spacing: -0.065px;
-	}
-
-	.delete-text {
-		color: var(--foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-
-		strong {
-			font-weight: 600;
-			color: var(--l1-foreground);
-		}
-	}
-}

frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx

@@ -1,309 +0,0 @@
-import { useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
-import { Redirect, useHistory, useLocation } from 'react-router-dom';
-import { Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { toast } from '@signozhq/ui/sonner';
-import { Skeleton } from 'antd';
-import {
-	getGetObjectsQueryKey,
-	useDeleteRole,
-	useGetObjects,
-	useGetRole,
-	usePatchObjects,
-} from 'api/generated/services/role';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
-import permissionsType from 'hooks/useAuthZ/permissions.type';
-import {
-	buildRoleDeletePermission,
-	buildRoleReadPermission,
-	buildRoleUpdatePermission,
-} from 'hooks/useAuthZ/permissions/role.permissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
-
-import type { AuthzResources } from '../utils';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import ROUTES from 'constants/routes';
-import { capitalize } from 'lodash-es';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import { RoleType } from 'types/roles';
-import { handleApiError, toAPIError } from 'utils/errorUtils';
-
-import type { PermissionConfig } from '../PermissionSidePanel';
-import PermissionSidePanel from '../PermissionSidePanel';
-import CreateRoleModal from '../RolesComponents/CreateRoleModal';
-import DeleteRoleModal from '../RolesComponents/DeleteRoleModal';
-import {
-	buildPatchPayload,
-	derivePermissionTypes,
-	deriveResourcesForRelation,
-	objectsToPermissionConfig,
-} from '../utils';
-import OverviewTab from './components/OverviewTab';
-import { ROLE_ID_REGEX } from './constants';
-
-import './RoleDetailsPage.styles.scss';
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function RoleDetailsPage(): JSX.Element {
-	const { pathname, search } = useLocation();
-	const history = useHistory();
-
-	const queryClient = useQueryClient();
-	const { showErrorModal } = useErrorModal();
-	const { isRolesEnabled, isLoading: isRolesGateLoading } =
-		useRolesFeatureGate();
-
-	const authzResources: AuthzResources = permissionsType.data;
-
-	// Extract roleId from URL pathname since useParams doesn't work in nested routing
-	const roleIdMatch = pathname.match(ROLE_ID_REGEX);
-	const roleId = roleIdMatch ? roleIdMatch[1] : '';
-
-	// Role name passed as query param by the listing page — used to check read permission
-	// before the role details API resolves. Absent when navigating directly (e.g. deep link),
-	// in which case we skip the FGA check and fall back to the BE guard.
-	const nameFromQuery = useMemo(
-		() => new URLSearchParams(search).get('name') ?? '',
-		[search],
-	);
-
-	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-	const [activePermission, setActivePermission] = useState<string | null>(null);
-
-	const { data, isLoading, isFetching, isError, error } = useGetRole(
-		{ id: roleId },
-		{ query: { enabled: !!roleId } },
-	);
-	const role = data?.data;
-	const isTransitioning = isFetching && role?.id !== roleId;
-	const isManaged = role?.type === RoleType.MANAGED;
-
-	const roleName = role?.name ?? '';
-
-	// Read check — fires immediately using the name query param so we can gate the page
-	// before the role details API resolves. Skipped when name is absent.
-	const { permissions: readPerms, isLoading: isReadAuthZLoading } = useAuthZ(
-		nameFromQuery ? [buildRoleReadPermission(nameFromQuery)] : [],
-		{ enabled: !!nameFromQuery },
-	);
-	const hasReadPermission = nameFromQuery
-		? (readPerms?.[buildRoleReadPermission(nameFromQuery)]?.isGranted ?? true)
-		: true;
-
-	// Update check uses role name once loaded
-	const { permissions: updatePerms, isLoading: isAuthZLoading } = useAuthZ(
-		roleName && !isManaged ? [buildRoleUpdatePermission(roleName)] : [],
-		{ enabled: !!roleName && !isManaged },
-	);
-	const hasUpdatePermission = isAuthZLoading
-		? false
-		: (updatePerms?.[buildRoleUpdatePermission(roleName)]?.isGranted ?? false);
-
-	const permissionTypes = useMemo(
-		() => derivePermissionTypes(authzResources?.relations ?? null),
-		[authzResources],
-	);
-
-	const resourcesForActivePermission = useMemo(
-		() =>
-			activePermission
-				? deriveResourcesForRelation(authzResources ?? null, activePermission)
-				: [],
-		[authzResources, activePermission],
-	);
-
-	const { data: objectsData, isLoading: isLoadingObjects } = useGetObjects(
-		{ id: roleId, relation: activePermission ?? '' },
-		{
-			query: {
-				enabled: !!activePermission && !!roleId && !isManaged,
-			},
-		},
-	);
-
-	const initialConfig = useMemo(() => {
-		if (!objectsData?.data || !activePermission) {
-			return;
-		}
-		return objectsToPermissionConfig(
-			objectsData.data,
-			resourcesForActivePermission,
-		);
-	}, [objectsData, activePermission, resourcesForActivePermission]);
-
-	const handleSaveSuccess = (): void => {
-		toast.success('Permissions saved successfully');
-		if (activePermission) {
-			queryClient.removeQueries(
-				getGetObjectsQueryKey({ id: roleId, relation: activePermission }),
-			);
-		}
-	};
-
-	const { mutate: patchObjects, isLoading: isSaving } = usePatchObjects({
-		mutation: {
-			onSuccess: handleSaveSuccess,
-			onError: (err) => handleApiError(err, showErrorModal),
-		},
-	});
-
-	const { mutate: deleteRole, isLoading: isDeleting } = useDeleteRole({
-		mutation: {
-			onSuccess: (): void => {
-				toast.success('Role deleted successfully');
-				history.push(ROUTES.ROLES_SETTINGS);
-			},
-			onError: (err) => handleApiError(err, showErrorModal),
-		},
-	});
-
-	if (isRolesGateLoading) {
-		return (
-			<div className="role-details-page">
-				<Skeleton
-					active
-					paragraph={{ rows: 8 }}
-					className="role-details-skeleton"
-				/>
-			</div>
-		);
-	}
-
-	if (!isRolesEnabled) {
-		return <Redirect to={ROUTES.ROLES_SETTINGS} />;
-	}
-
-	if (!hasReadPermission && readPerms !== null) {
-		return <PermissionDeniedFullPage permissionName="role:read" />;
-	}
-
-	if (isLoading || isTransitioning || (!!nameFromQuery && isReadAuthZLoading)) {
-		return (
-			<div className="role-details-page">
-				<Skeleton
-					active
-					paragraph={{ rows: 8 }}
-					className="role-details-skeleton"
-				/>
-			</div>
-		);
-	}
-
-	if (isError) {
-		return (
-			<div className="role-details-page">
-				<ErrorInPlace
-					error={toAPIError(
-						error,
-						'An unexpected error occurred while fetching role details.',
-					)}
-				/>
-			</div>
-		);
-	}
-
-	if (!role) {
-		return (
-			<div className="role-details-page">
-				<Skeleton
-					active
-					paragraph={{ rows: 8 }}
-					className="role-details-skeleton"
-				/>
-			</div>
-		);
-	}
-
-	const handleSave = (config: PermissionConfig): void => {
-		if (!activePermission || !authzResources) {
-			return;
-		}
-		patchObjects({
-			pathParams: { id: roleId, relation: activePermission },
-			data: buildPatchPayload({
-				newConfig: config,
-				initialConfig: initialConfig ?? {},
-				resources: resourcesForActivePermission,
-				authzRes: authzResources,
-			}),
-		});
-	};
-
-	return (
-		<div className="role-details-page">
-			<div className="role-details-header">
-				<h2 className="role-details-title">Role — {role.name}</h2>
-				{!isManaged && (
-					<div className="role-details-actions">
-						<AuthZTooltip checks={[buildRoleDeletePermission(role.name)]}>
-							<Button
-								variant="link"
-								color="destructive"
-								onClick={(): void => setIsDeleteModalOpen(true)}
-								aria-label="Delete role"
-							>
-								<Trash2 size={12} />
-							</Button>
-						</AuthZTooltip>
-						<AuthZTooltip checks={[buildRoleUpdatePermission(role.name)]}>
-							<Button
-								variant="solid"
-								color="secondary"
-								onClick={(): void => setIsEditModalOpen(true)}
-							>
-								Edit Role Details
-							</Button>
-						</AuthZTooltip>
-					</div>
-				)}
-			</div>
-
-			<OverviewTab
-				role={role || null}
-				isManaged={isManaged}
-				permissionTypes={permissionTypes}
-				onPermissionClick={(key): void => setActivePermission(key)}
-			/>
-			{!isManaged && (
-				<>
-					<PermissionSidePanel
-						open={activePermission !== null}
-						onClose={(): void => setActivePermission(null)}
-						permissionLabel={activePermission ? capitalize(activePermission) : ''}
-						relation={activePermission ?? ''}
-						resources={resourcesForActivePermission}
-						initialConfig={initialConfig}
-						isLoading={isLoadingObjects}
-						isSaving={isSaving}
-						canEdit={hasUpdatePermission}
-						onSave={handleSave}
-					/>
-
-					<CreateRoleModal
-						isOpen={isEditModalOpen}
-						onClose={(): void => setIsEditModalOpen(false)}
-						initialData={{
-							id: roleId,
-							name: role.name || '',
-							description: role.description || '',
-						}}
-					/>
-				</>
-			)}
-
-			<DeleteRoleModal
-				isOpen={isDeleteModalOpen}
-				roleName={role.name || ''}
-				isDeleting={isDeleting}
-				onCancel={(): void => setIsDeleteModalOpen(false)}
-				onConfirm={(): void => deleteRole({ pathParams: { id: roleId } })}
-			/>
-		</div>
-	);
-}
-
-export default RoleDetailsPage;

frontend/src/container/RolesSettings/RoleDetails/__tests__/RoleDetailsPage.authz.test.tsx

@@ -1,536 +0,0 @@
-import * as roleApi from 'api/generated/services/role';
-import {
-	customRoleResponse,
-	managedRoleResponse,
-} from 'mocks-server/__mockdata__/roles';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { Route, Switch } from 'react-router-dom';
-import {
-	defaultFeatureFlags,
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	within,
-} from 'tests/test-utils';
-import { FeatureKeys } from 'constants/features';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import {
-	invalidLicense,
-	mockUseAuthZDenyAll,
-	mockUseAuthZGrantAll,
-} from 'tests/authz-test-utils';
-import RoleDetailsPage from '../RoleDetailsPage';
-
-jest.mock('hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
-const CUSTOM_ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
-const MANAGED_ROLE_ID = '019c24aa-2248-756f-9833-984f1ab63819';
-
-const rolesApiBase = 'http://localhost/api/v1/roles';
-
-const emptyObjectsResponse = { status: 'success', data: [] };
-
-const allScopeObjectsResponse = {
-	status: 'success',
-	data: [
-		{
-			resource: { kind: 'role', type: 'role' },
-			selectors: ['*'],
-		},
-	],
-};
-
-function setupDefaultHandlers(roleId = CUSTOM_ROLE_ID): void {
-	const roleResponse =
-		roleId === MANAGED_ROLE_ID ? managedRoleResponse : customRoleResponse;
-
-	server.use(
-		rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(roleResponse)),
-		),
-	);
-}
-
-beforeEach(() => {
-	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
-});
-
-afterEach(() => {
-	jest.clearAllMocks();
-	server.resetHandlers();
-});
-
-describe('RoleDetailsPage', () => {
-	it('renders custom role header, tabs, description, permissions, and action buttons', async () => {
-		setupDefaultHandlers();
-
-		render(<RoleDetailsPage />, undefined, {
-			initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-		});
-
-		await expect(
-			screen.findByText('Role — billing-manager'),
-		).resolves.toBeInTheDocument();
-
-		expect(
-			screen.getByText('Custom role for managing billing and invoices.'),
-		).toBeInTheDocument();
-
-		expect(screen.getByText('Create')).toBeInTheDocument();
-		expect(screen.getByText('Read')).toBeInTheDocument();
-
-		expect(
-			screen.getByRole('button', { name: /edit role details/i }),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /delete role/i }),
-		).toBeInTheDocument();
-	});
-
-	it('shows managed-role warning callout and hides edit/delete buttons', async () => {
-		setupDefaultHandlers(MANAGED_ROLE_ID);
-
-		render(<RoleDetailsPage />, undefined, {
-			initialRoute: `/settings/roles/${MANAGED_ROLE_ID}`,
-		});
-
-		await expect(
-			screen.findByText(/Role — signoz-admin/),
-		).resolves.toBeInTheDocument();
-
-		expect(
-			screen.getByText(
-				'This is a managed role. Permissions and settings are view-only and cannot be modified.',
-			),
-		).toBeInTheDocument();
-
-		expect(screen.queryByText('Edit Role Details')).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /delete role/i }),
-		).not.toBeInTheDocument();
-	});
-
-	it('edit flow: modal opens pre-filled and calls PATCH on save', async () => {
-		const patchSpy = jest.fn();
-		let description = customRoleResponse.data.description;
-		server.use(
-			rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						...customRoleResponse,
-						data: { ...customRoleResponse.data, description },
-					}),
-				),
-			),
-			rest.patch(`${rolesApiBase}/:id`, async (req, res, ctx) => {
-				const body = await req.json();
-				patchSpy(body);
-				description = body.description;
-				return res(
-					ctx.status(200),
-					ctx.json({
-						...customRoleResponse,
-						data: { ...customRoleResponse.data, description },
-					}),
-				);
-			}),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<RoleDetailsPage />, undefined, {
-			initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-		});
-
-		await screen.findByText('Role — billing-manager');
-
-		await user.click(screen.getByRole('button', { name: /edit role details/i }));
-		await expect(
-			screen.findByText('Edit Role Details', { selector: '.ant-modal-title' }),
-		).resolves.toBeInTheDocument();
-
-		const nameInput = screen.getByPlaceholderText(
-			'Enter role name e.g. : Service Owner',
-		);
-		expect(nameInput).toBeDisabled();
-
-		const descField = screen.getByPlaceholderText(
-			'A helpful description of the role',
-		);
-		await user.clear(descField);
-		await user.type(descField, 'Updated description');
-		await user.click(screen.getByRole('button', { name: /save changes/i }));
-
-		await waitFor(() =>
-			expect(patchSpy).toHaveBeenCalledWith({
-				description: 'Updated description',
-			}),
-		);
-
-		await waitFor(() =>
-			expect(
-				screen.queryByText('Edit Role Details', { selector: '.ant-modal-title' }),
-			).not.toBeInTheDocument(),
-		);
-
-		await expect(
-			screen.findByText('Updated description'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('delete flow: modal shows role name, DELETE called on confirm', async () => {
-		const deleteSpy = jest.fn();
-
-		setupDefaultHandlers();
-		server.use(
-			rest.delete(`${rolesApiBase}/:id`, (_req, res, ctx) => {
-				deleteSpy();
-				return res(ctx.status(200), ctx.json({ status: 'success' }));
-			}),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<RoleDetailsPage />, undefined, {
-			initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-		});
-
-		await screen.findByText('Role — billing-manager');
-
-		await user.click(screen.getByRole('button', { name: /delete role/i }));
-
-		await expect(
-			screen.findByText(/Are you sure you want to delete the role/),
-		).resolves.toBeInTheDocument();
-
-		const dialog = await screen.findByRole('dialog');
-		await user.click(
-			within(dialog).getByRole('button', { name: /delete role/i }),
-		);
-
-		await waitFor(() => expect(deleteSpy).toHaveBeenCalled());
-
-		await waitFor(() =>
-			expect(
-				screen.queryByText(/Are you sure you want to delete the role/),
-			).not.toBeInTheDocument(),
-		);
-	});
-
-	it('shows PermissionDeniedFullPage when read permission is denied via query param', async () => {
-		mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
-
-		render(<RoleDetailsPage />, undefined, {
-			initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}?name=billing-manager`,
-		});
-
-		await expect(
-			screen.findByText(/you don't have permission to view this page/i),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('redirects to the roles list when license is not valid', async () => {
-		render(
-			<Switch>
-				<Route path="/settings/roles/:roleId">
-					<RoleDetailsPage />
-				</Route>
-				<Route path="/settings/roles" exact>
-					<div data-testid="roles-list-redirect-target" />
-				</Route>
-			</Switch>,
-			undefined,
-			{
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-				appContextOverrides: { activeLicense: invalidLicense },
-			},
-		);
-
-		await expect(
-			screen.findByTestId('roles-list-redirect-target'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('redirects to the roles list when fine-grained authz flag is inactive', async () => {
-		render(
-			<Switch>
-				<Route path="/settings/roles/:roleId">
-					<RoleDetailsPage />
-				</Route>
-				<Route path="/settings/roles" exact>
-					<div data-testid="roles-list-redirect-target" />
-				</Route>
-			</Switch>,
-			undefined,
-			{
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-				appContextOverrides: {
-					featureFlags: defaultFeatureFlags.map((f) =>
-						f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
-							? { ...f, active: false }
-							: f,
-					),
-				},
-			},
-		);
-
-		await expect(
-			screen.findByTestId('roles-list-redirect-target'),
-		).resolves.toBeInTheDocument();
-	});
-
-	describe('permission side panel', () => {
-		beforeEach(() => {
-			// Both hooks mocked so data renders synchronously — no React Query scheduler or MSW round-trip.
-			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-				data: customRoleResponse,
-				isLoading: false,
-				isFetching: false,
-				isError: false,
-				error: null,
-			} as any);
-			jest
-				.spyOn(roleApi, 'useGetObjects')
-				.mockReturnValue({ data: emptyObjectsResponse, isLoading: false } as any);
-		});
-
-		afterEach(() => {
-			jest.restoreAllMocks();
-		});
-
-		async function openCreatePanel(): Promise<HTMLElement> {
-			await screen.findByText('Role — billing-manager');
-			fireEvent.click(screen.getByText('Create'));
-			await screen.findByText('Edit Create Permissions');
-			const panel = document.querySelector(
-				'.permission-side-panel',
-			) as HTMLElement;
-			await within(panel).findByRole('button', { name: 'role' });
-			return panel;
-		}
-
-		async function openReadPanel(): Promise<HTMLElement> {
-			await screen.findByText('Role — billing-manager');
-			fireEvent.click(screen.getByText('Read'));
-			await screen.findByText('Edit Read Permissions');
-			const panel = document.querySelector(
-				'.permission-side-panel',
-			) as HTMLElement;
-			await within(panel).findByRole('button', { name: 'role' });
-			return panel;
-		}
-
-		it('Save Changes is disabled until a resource scope is changed', async () => {
-			render(<RoleDetailsPage />, undefined, {
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-			});
-
-			const panel = await openCreatePanel();
-
-			expect(
-				within(panel).getByRole('button', { name: /save changes/i }),
-			).toBeDisabled();
-
-			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
-			fireEvent.click(screen.getByText('All'));
-
-			expect(
-				within(panel).getByRole('button', { name: /save changes/i }),
-			).not.toBeDisabled();
-			expect(screen.getByText('1 unsaved change')).toBeInTheDocument();
-		});
-
-		it('set scope to All → patchObjects additions: ["*"], deletions: null', async () => {
-			const patchSpy = jest.fn();
-
-			server.use(
-				rest.patch(
-					`${rolesApiBase}/:id/relations/:relation/objects`,
-					async (req, res, ctx) => {
-						patchSpy(await req.json());
-						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
-					},
-				),
-			);
-
-			render(<RoleDetailsPage />, undefined, {
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-			});
-
-			const panel = await openCreatePanel();
-
-			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
-			fireEvent.click(screen.getByText('All'));
-			fireEvent.click(
-				within(panel).getByRole('button', { name: /save changes/i }),
-			);
-
-			await waitFor(() =>
-				expect(patchSpy).toHaveBeenCalledWith({
-					additions: [
-						{
-							resource: { kind: 'role', type: 'role' },
-							selectors: ['*'],
-						},
-					],
-					deletions: null,
-				}),
-			);
-		});
-
-		it('set scope to Only selected with IDs → patchObjects additions contain those IDs', async () => {
-			const patchSpy = jest.fn();
-
-			server.use(
-				rest.patch(
-					`${rolesApiBase}/:id/relations/:relation/objects`,
-					async (req, res, ctx) => {
-						patchSpy(await req.json());
-						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
-					},
-				),
-			);
-
-			render(<RoleDetailsPage />, undefined, {
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-			});
-
-			const panel = await openReadPanel();
-
-			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
-			// Default is NONE, so switch to Only selected first to reveal the combobox
-			fireEvent.click(screen.getByText('Only selected'));
-
-			const combobox = within(panel).getByRole('combobox');
-			fireEvent.change(combobox, { target: { value: 'role-001' } });
-			fireEvent.keyDown(combobox, { key: 'Enter', keyCode: 13 });
-
-			fireEvent.click(
-				within(panel).getByRole('button', { name: /save changes/i }),
-			);
-
-			await waitFor(() =>
-				expect(patchSpy).toHaveBeenCalledWith({
-					additions: [
-						{
-							resource: { kind: 'role', type: 'role' },
-							selectors: ['role-001'],
-						},
-					],
-					deletions: null,
-				}),
-			);
-		});
-
-		it('set scope to None on create panel (existing All) → patchObjects deletions: ["*"], additions: null', async () => {
-			const patchSpy = jest.fn();
-
-			jest.spyOn(roleApi, 'useGetObjects').mockReturnValue({
-				data: allScopeObjectsResponse,
-				isLoading: false,
-			} as any);
-			server.use(
-				rest.patch(
-					`${rolesApiBase}/:id/relations/:relation/objects`,
-					async (req, res, ctx) => {
-						patchSpy(await req.json());
-						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
-					},
-				),
-			);
-
-			render(<RoleDetailsPage />, undefined, {
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-			});
-
-			const panel = await openCreatePanel();
-
-			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
-			fireEvent.click(screen.getByText('None'));
-			fireEvent.click(
-				within(panel).getByRole('button', { name: /save changes/i }),
-			);
-
-			await waitFor(() =>
-				expect(patchSpy).toHaveBeenCalledWith({
-					additions: null,
-					deletions: [
-						{
-							resource: { kind: 'role', type: 'role' },
-							selectors: ['*'],
-						},
-					],
-				}),
-			);
-		});
-
-		it('existing All scope changed to Only selected (empty) → patchObjects deletions: ["*"], additions: null', async () => {
-			const patchSpy = jest.fn();
-
-			jest.spyOn(roleApi, 'useGetObjects').mockReturnValue({
-				data: allScopeObjectsResponse,
-				isLoading: false,
-			} as any);
-			server.use(
-				rest.patch(
-					`${rolesApiBase}/:id/relations/:relation/objects`,
-					async (req, res, ctx) => {
-						patchSpy(await req.json());
-						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
-					},
-				),
-			);
-
-			render(<RoleDetailsPage />, undefined, {
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-			});
-
-			const panel = await openReadPanel();
-
-			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
-			fireEvent.click(screen.getByText('Only selected'));
-			fireEvent.click(
-				within(panel).getByRole('button', { name: /save changes/i }),
-			);
-
-			await waitFor(() =>
-				expect(patchSpy).toHaveBeenCalledWith({
-					additions: null,
-					deletions: [
-						{
-							resource: { kind: 'role', type: 'role' },
-							selectors: ['*'],
-						},
-					],
-				}),
-			);
-		});
-
-		it('unsaved changes counter shown on scope change, Discard resets it', async () => {
-			render(<RoleDetailsPage />, undefined, {
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-			});
-
-			const panel = await openCreatePanel();
-
-			expect(screen.queryByText(/unsaved change/)).not.toBeInTheDocument();
-
-			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
-			fireEvent.click(screen.getByText('All'));
-
-			expect(screen.getByText('1 unsaved change')).toBeInTheDocument();
-
-			fireEvent.click(within(panel).getByRole('button', { name: /discard/i }));
-
-			expect(screen.queryByText(/unsaved change/)).not.toBeInTheDocument();
-			expect(
-				within(panel).getByRole('button', { name: /save changes/i }),
-			).toBeDisabled();
-		});
-	});
-});

frontend/src/container/RolesSettings/RoleDetails/components/MembersTab.tsx

@@ -1,44 +0,0 @@
-import { useState } from 'react';
-import { Search } from '@signozhq/icons';
-
-function MembersTab(): JSX.Element {
-	const [searchQuery, setSearchQuery] = useState('');
-
-	return (
-		<div className="role-details-members">
-			<div className="role-details-members-search">
-				<Search size={12} className="role-details-members-search-icon" />
-				<input
-					type="text"
-					className="role-details-members-search-input"
-					placeholder="Search and add members..."
-					value={searchQuery}
-					onChange={(e): void => setSearchQuery(e.target.value)}
-				/>
-			</div>
-
-			{/* Todo: Right now we are only adding the empty state in this cut */}
-			<div className="role-details-members-content">
-				<div className="role-details-members-empty-state">
-					<span
-						className="role-details-members-empty-emoji"
-						role="img"
-						aria-label="monocle face"
-					>
-						🧐
-					</span>
-					<p className="role-details-members-empty-text">
-						<span className="role-details-members-empty-text--bold">
-							No members added.
-						</span>{' '}
-						<span className="role-details-members-empty-text--muted">
-							Start adding members to this role.
-						</span>
-					</p>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default MembersTab;

frontend/src/container/RolesSettings/RoleDetails/components/OverviewTab.tsx

@@ -1,87 +0,0 @@
-import { Callout } from '@signozhq/ui/callout';
-
-import { PermissionType, TimestampBadge } from '../../utils';
-import PermissionItem from './PermissionItem';
-import { AuthtypesRelationDTO } from 'api/generated/services/sigNoz.schemas';
-
-interface OverviewTabProps {
-	role: {
-		description?: string;
-		createdAt?: Date | string;
-		updatedAt?: Date | string;
-	} | null;
-	isManaged: boolean;
-	permissionTypes: PermissionType[];
-	onPermissionClick: (relationKey: string) => void;
-}
-
-function OverviewTab({
-	role,
-	isManaged,
-	permissionTypes,
-	onPermissionClick,
-}: OverviewTabProps): JSX.Element {
-	return (
-		<div className="role-details-overview">
-			{isManaged && (
-				<Callout
-					type="warning"
-					showIcon
-					title="This is a managed role. Permissions and settings are view-only and cannot be modified."
-				/>
-			)}
-
-			<div className="role-details-meta">
-				<div>
-					<p className="role-details-section-label">Description</p>
-					<p className="role-details-description-text">{role?.description || '—'}</p>
-				</div>
-
-				<div className="role-details-info-row">
-					<div className="role-details-info-col">
-						<p className="role-details-section-label">Created At</p>
-						<div className="role-details-info-value">
-							<TimestampBadge date={role?.createdAt} />
-						</div>
-					</div>
-					<div className="role-details-info-col">
-						<p className="role-details-section-label">Last Modified At</p>
-						<div className="role-details-info-value">
-							<TimestampBadge date={role?.updatedAt} />
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<div className="role-details-permissions">
-				<div className="role-details-permissions-header">
-					<span className="role-details-section-label">Permissions</span>
-					<a
-						href="https://signoz.io/docs/manage/administrator-guide/iam/permissions/"
-						target="_blank"
-						rel="noopener noreferrer"
-						className="role-details-permissions-learn-more"
-					>
-						Learn more
-					</a>
-					<hr className="role-details-permissions-divider" />
-				</div>
-
-				<div className="role-details-permission-list">
-					{permissionTypes
-						.filter((p) => p.key !== AuthtypesRelationDTO.assignee)
-						.map((permissionType) => (
-							<PermissionItem
-								key={permissionType.key}
-								permissionType={permissionType}
-								isManaged={isManaged}
-								onPermissionClick={onPermissionClick}
-							/>
-						))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default OverviewTab;

frontend/src/container/RolesSettings/RoleDetails/components/PermissionItem.tsx

@@ -1,54 +0,0 @@
-import { ChevronRight } from '@signozhq/icons';
-
-import { PermissionType } from '../../utils';
-
-interface PermissionItemProps {
-	permissionType: PermissionType;
-	isManaged: boolean;
-	onPermissionClick: (key: string) => void;
-}
-
-function PermissionItem({
-	permissionType,
-	isManaged,
-	onPermissionClick,
-}: PermissionItemProps): JSX.Element {
-	const { key, label, icon } = permissionType;
-
-	if (isManaged) {
-		return (
-			<div
-				key={key}
-				className="role-details-permission-item role-details-permission-item--readonly"
-			>
-				<div className="role-details-permission-item-left">
-					{icon}
-					<span className="role-details-permission-item-label">{label}</span>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div
-			key={key}
-			className="role-details-permission-item"
-			role="button"
-			tabIndex={0}
-			onClick={(): void => onPermissionClick(key)}
-			onKeyDown={(e): void => {
-				if (e.key === 'Enter' || e.key === ' ') {
-					onPermissionClick(key);
-				}
-			}}
-		>
-			<div className="role-details-permission-item-left">
-				{icon}
-				<span className="role-details-permission-item-label">{label}</span>
-			</div>
-			<ChevronRight size={14} color="var(--foreground)" />
-		</div>
-	);
-}
-
-export default PermissionItem;

frontend/src/container/RolesSettings/RoleDetails/constants.ts

@@ -1,22 +0,0 @@
-import {
-	BadgePlus,
-	Eye,
-	LayoutList,
-	PencilRuler,
-	Settings,
-	Trash2,
-} from '@signozhq/icons';
-
-export const ROLE_ID_REGEX = /\/settings\/roles\/([^/]+)/;
-
-export type IconComponent = React.ComponentType<any>;
-
-export const PERMISSION_ICON_MAP: Record<string, IconComponent> = {
-	create: BadgePlus,
-	list: LayoutList,
-	read: Eye,
-	update: PencilRuler,
-	delete: Trash2,
-};
-
-export const FALLBACK_PERMISSION_ICON: IconComponent = Settings;

frontend/src/container/RolesSettings/RoleDetails/index.tsx

@@ -1 +0,0 @@
-export { default } from './RoleDetailsPage';

frontend/src/container/RolesSettings/RolesComponents/CreateRoleModal.tsx

@@ -1,189 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useQueryClient } from 'react-query';
-import { generatePath, useHistory } from 'react-router-dom';
-import { X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { toast } from '@signozhq/ui/sonner';
-import { Form, Modal } from 'antd';
-import {
-	invalidateGetRole,
-	invalidateListRoles,
-	useCreateRole,
-	usePatchRole,
-} from 'api/generated/services/role';
-import {
-	AuthtypesPostableRoleDTO,
-	RenderErrorResponseDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
-import ROUTES from 'constants/routes';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import { handleApiError } from 'utils/errorUtils';
-
-import '../RolesSettings.styles.scss';
-
-export interface CreateRoleModalInitialData {
-	id: string;
-	name: string;
-	description?: string;
-}
-
-interface CreateRoleModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-	initialData?: CreateRoleModalInitialData;
-}
-
-interface CreateRoleFormValues {
-	name: string;
-	description?: string;
-}
-
-function CreateRoleModal({
-	isOpen,
-	onClose,
-	initialData,
-}: CreateRoleModalProps): JSX.Element {
-	const [form] = Form.useForm<CreateRoleFormValues>();
-	const queryClient = useQueryClient();
-	const history = useHistory();
-	const { showErrorModal } = useErrorModal();
-
-	const isEditMode = !!initialData?.id;
-	const prevIsOpen = useRef(isOpen);
-
-	useEffect(() => {
-		if (isOpen && !prevIsOpen.current) {
-			if (isEditMode && initialData) {
-				form.setFieldsValue({
-					name: initialData.name,
-					description: initialData.description || '',
-				});
-			} else {
-				form.resetFields();
-			}
-		}
-		prevIsOpen.current = isOpen;
-	}, [isOpen, isEditMode, initialData, form]);
-
-	const handleSuccess = async (
-		message: string,
-		redirectPath?: string,
-	): Promise<void> => {
-		await invalidateListRoles(queryClient);
-		if (isEditMode && initialData?.id) {
-			await invalidateGetRole(queryClient, { id: initialData.id });
-		}
-		toast.success(message);
-		form.resetFields();
-		onClose();
-		if (redirectPath) {
-			history.push(redirectPath);
-		}
-	};
-
-	const handleError = (error: ErrorType<RenderErrorResponseDTO>): void => {
-		handleApiError(error, showErrorModal);
-	};
-
-	const { mutate: createRole, isLoading: isCreating } = useCreateRole({
-		mutation: {
-			onSuccess: (res) =>
-				handleSuccess(
-					'Role created successfully',
-					generatePath(ROUTES.ROLE_DETAILS, { roleId: res.data.id }),
-				),
-			onError: handleError,
-		},
-	});
-
-	const { mutate: patchRole, isLoading: isPatching } = usePatchRole({
-		mutation: {
-			onSuccess: () => handleSuccess('Role updated successfully'),
-			onError: handleError,
-		},
-	});
-
-	const onSubmit = useCallback(async (): Promise<void> => {
-		try {
-			const values = await form.validateFields();
-			if (isEditMode && initialData?.id) {
-				patchRole({
-					pathParams: { id: initialData.id },
-					data: { description: values.description || '' },
-				});
-			} else {
-				const data: AuthtypesPostableRoleDTO = {
-					name: values.name,
-					description: values.description || '',
-					transactionGroups: [],
-				};
-				createRole({ data });
-			}
-		} catch {
-			// form validation failed; antd handles inline error display
-		}
-	}, [form, createRole, patchRole, isEditMode, initialData]);
-
-	const onCancel = useCallback((): void => {
-		form.resetFields();
-		onClose();
-	}, [form, onClose]);
-
-	const isLoading = isCreating || isPatching;
-
-	return (
-		<Modal
-			open={isOpen}
-			onCancel={onCancel}
-			title={isEditMode ? 'Edit Role Details' : 'Create a New Role'}
-			footer={[
-				<Button
-					key="cancel"
-					variant="solid"
-					color="secondary"
-					onClick={onCancel}
-					size="sm"
-				>
-					<X size={14} />
-					Cancel
-				</Button>,
-				<Button
-					key="submit"
-					variant="solid"
-					color="primary"
-					onClick={onSubmit}
-					loading={isLoading}
-					size="sm"
-				>
-					{isEditMode ? 'Save Changes' : 'Create Role'}
-				</Button>,
-			]}
-			destroyOnClose
-			className="create-role-modal"
-			width={530}
-		>
-			<Form form={form} layout="vertical" className="create-role-form">
-				<Form.Item
-					name="name"
-					label="Name"
-					rules={[{ required: true, message: 'Role name is required' }]}
-				>
-					<Input
-						disabled={isEditMode}
-						placeholder="Enter role name e.g. : Service Owner"
-					/>
-				</Form.Item>
-				<Form.Item name="description" label="Description">
-					<textarea
-						className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-						placeholder="A helpful description of the role"
-					/>
-				</Form.Item>
-			</Form>
-		</Modal>
-	);
-}
-
-export default CreateRoleModal;

frontend/src/container/RolesSettings/RolesComponents/DeleteRoleModal.tsx

@@ -1,60 +0,0 @@
-import { Trash2, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Modal } from 'antd';
-
-interface DeleteRoleModalProps {
-	isOpen: boolean;
-	roleName: string;
-	isDeleting: boolean;
-	onCancel: () => void;
-	onConfirm: () => void;
-}
-
-function DeleteRoleModal({
-	isOpen,
-	roleName,
-	isDeleting,
-	onCancel,
-	onConfirm,
-}: DeleteRoleModalProps): JSX.Element {
-	return (
-		<Modal
-			open={isOpen}
-			onCancel={onCancel}
-			title={<span className="title">Delete Role</span>}
-			closable
-			footer={[
-				<Button
-					key="cancel"
-					className="cancel-btn"
-					prefix={<X size={14} />}
-					onClick={onCancel}
-					variant="solid"
-					color="secondary"
-				>
-					Cancel
-				</Button>,
-				<Button
-					key="delete"
-					className="delete-btn"
-					prefix={<Trash2 size={14} />}
-					onClick={onConfirm}
-					loading={isDeleting}
-					variant="solid"
-					color="destructive"
-				>
-					Delete Role
-				</Button>,
-			]}
-			destroyOnClose
-			className="role-details-delete-modal"
-		>
-			<p className="delete-text">
-				Are you sure you want to delete the role <strong>{roleName}</strong>? This
-				action cannot be undone.
-			</p>
-		</Modal>
-	);
-}
-
-export default DeleteRoleModal;

frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.module.scss

@@ -0,0 +1,167 @@
+.rolesListingTable {
+	margin-top: 12px;
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.scrollContainer {
+	overflow-x: auto;
+}
+
+.tableInner {
+	min-width: 850px;
+}
+
+.tableHeader {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	gap: 24px;
+}
+
+.headerCell {
+	font-family: Inter;
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.44px;
+	color: var(--foreground);
+	line-height: 16px;
+}
+
+.headerCellName {
+	flex: 0 0 180px;
+}
+
+.headerCellDescription {
+	flex: 1;
+	min-width: 0;
+}
+
+.headerCellCreatedAt {
+	flex: 0 0 180px;
+	text-align: right;
+}
+
+.headerCellUpdatedAt {
+	flex: 0 0 180px;
+	text-align: right;
+}
+
+.sectionHeader {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	height: 32px;
+	padding: 0 16px;
+	background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+	border-top: 1px solid var(--secondary);
+	border-bottom: 1px solid var(--secondary);
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 400;
+	color: var(--foreground);
+	line-height: 16px;
+	margin: 0;
+}
+
+.sectionHeaderCount {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 20px;
+	height: 18px;
+	padding: 0 6px;
+	border-radius: 9px;
+	background: var(--l3-background);
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--foreground);
+	line-height: 1;
+}
+
+.tableRow {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	background: color-mix(in srgb, var(--bg-robin-200) 2%, transparent);
+	border-bottom: 1px solid var(--secondary);
+	gap: 24px;
+}
+
+.tableRowClickable {
+	cursor: pointer;
+
+	&:hover {
+		background: color-mix(in srgb, var(--bg-robin-200) 5%, transparent);
+	}
+}
+
+.tableCell {
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	color: var(--foreground);
+	line-height: 20px;
+}
+
+.tableCellName {
+	flex: 0 0 180px;
+	font-weight: 500;
+}
+
+.tableCellDescription {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.tableCellCreatedAt {
+	flex: 0 0 180px;
+	text-align: right;
+	white-space: nowrap;
+}
+
+.tableCellUpdatedAt {
+	flex: 0 0 180px;
+	text-align: right;
+	white-space: nowrap;
+}
+
+.emptyState {
+	padding: 24px 16px;
+	text-align: center;
+	color: var(--foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+}
+
+.pagination {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 8px 16px;
+
+	:global(.ant-pagination-total-text) {
+		margin-right: auto;
+
+		.numbers {
+			font-family: Inter;
+			font-size: 12px;
+			color: var(--foreground);
+		}
+
+		.total {
+			font-family: Inter;
+			font-size: 12px;
+			color: var(--foreground);
+			opacity: 0.5;
+		}
+	}
+}
+
+.descriptionTooltip {
+	max-height: none;
+	overflow-y: visible;
+}