fix: user types and order of update user

* chore: deprecate old user invite apis

* chore: add back validation for pending user in list user apis for integration tests

* fix: allow pending user to be updated

* feat: updated members page with new status response and remove invite endpoint api (#10624)

* feat: updated members page with new status response and remove invite endpoint api

* feat: removed deprecated invite endpoint apis

* feat: delete orphaned type files

* feat: changed text for copy, cancel and ingeneral messaging for invited users

* feat: test case and pagination fix

* feat: feedback, refactor and test mock update

* feat: updated the confirmation dialog description as now the we cant permanently delete the member

* feat: refactored the member status mapping

* feat: used the open api spec hooks in editmember and updated the test cases

* feat: added error handling

---------

Co-authored-by: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Co-authored-by: SagarRajput-7 <sagar@signoz.io>

.github/CODEOWNERS

@@ -1,8 +1,6 @@
 # CODEOWNERS info: https://help.github.com/en/articles/about-code-owners
 
-# Owners are automatically requested for review for PRs that changes code
-
-# that they own.
+# Owners are automatically requested for review for PRs that changes code that they own.
 
 /frontend/ @SigNoz/frontend-maintainers
 
@@ -11,8 +9,10 @@
 /frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json @makeavish
 /frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx @makeavish
 
-/deploy/ @SigNoz/devops
-.github @SigNoz/devops
+# CI
+/deploy/ @therealpandey
+.github @therealpandey
+go.mod @therealpandey
 
 # Scaffold Owners
 
@@ -105,6 +105,10 @@
 /pkg/modules/authdomain/ @vikrantgupta25
 /pkg/modules/role/ @vikrantgupta25
 
+# IdentN Owners 
+/pkg/identn/ @vikrantgupta25
+/pkg/http/middleware/identn.go @vikrantgupta25
+
 # Integration tests
 
 /tests/integration/ @vikrantgupta25
@@ -127,12 +131,15 @@
 /frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
 /frontend/src/container/ListOfDashboard/ @SigNoz/pulse-frontend
 
+# Dashboard Widget Page
+/frontend/src/pages/DashboardWidget/ @SigNoz/pulse-frontend
+/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
+
 ## Dashboard Page
 
 /frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
 /frontend/src/container/DashboardContainer/ @SigNoz/pulse-frontend
 /frontend/src/container/GridCardLayout/ @SigNoz/pulse-frontend
-/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
 
 ## Public Dashboard Page
 

.github/workflows/goci.yaml

@@ -102,13 +102,3 @@ jobs:
         run: |
           go run cmd/enterprise/*.go generate openapi
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in openapi spec. Run go run cmd/enterprise/*.go generate openapi locally and commit."; exit 1)
-      - name: node-install
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
-      - name: install-frontend
-        run: cd frontend && yarn install
-      - name: generate-api-clients
-        run: |
-          cd frontend && yarn generate:api
-          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated api clients. Run yarn generate:api in frontend/ locally and commit."; exit 1)

.github/workflows/integrationci.yaml

@@ -29,6 +29,7 @@ jobs:
       - name: fmt
         run: |
           make py-fmt
+          git diff --exit-code -- tests/integration/
       - name: lint
         run: |
           make py-lint
@@ -49,6 +50,7 @@ jobs:
           - ttl
           - alerts
           - ingestionkeys
+          - rootuser
         sqlstore-provider:
           - postgres
           - sqlite

.github/workflows/jsci.yaml

@@ -52,16 +52,16 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
-  md-languages:
+  languages:
     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: checkout
+      - name: self-checkout
         uses: actions/checkout@v4
-      - name: validate md languages
+      - name: run
         run: bash frontend/scripts/validate-md-languages.sh
   authz:
     if: |
@@ -70,44 +70,55 @@ jobs:
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
+      - name: self-checkout
         uses: actions/checkout@v5
-
-      - name: Set up Node.js
+      - name: node-install
         uses: actions/setup-node@v5
         with:
           node-version: "22"
-
-      - name: Install frontend dependencies
+      - name: deps-install
         working-directory: ./frontend
         run: |
           yarn install
-
-      - name: Install uv
+      - name: uv-install
         uses: astral-sh/setup-uv@v5
-
-      - name: Install Python dependencies
+      - name: uv-deps
         working-directory: ./tests/integration
         run: |
           uv sync
-
-      - name: Start test environment
+      - name: setup-test
         run: |
           make py-test-setup
-
-      - name: Generate permissions.type.ts
+      - name: generate
         working-directory: ./frontend
         run: |
           yarn generate:permissions-type
-
-      - name: Teardown test environment
+      - name: teardown-test
         if: always()
         run: |
           make py-test-teardown
-
-      - name: Check for changes
+      - name: validate
         run: |
           if ! git diff --exit-code frontend/src/hooks/useAuthZ/permissions.type.ts; then
             echo "::error::frontend/src/hooks/useAuthZ/permissions.type.ts is out of date. Please run the generator locally and commit the changes: npm run generate:permissions-type (from the frontend directory)"
             exit 1
           fi
+  openapi:
+    if: |
+      github.event_name == 'merge_group' ||
+      (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: node-install
+        uses: actions/setup-node@v5
+        with:
+          node-version: "22"
+      - name: install-frontend
+        run: cd frontend && yarn install
+      - name: generate-api-clients
+        run: |
+          cd frontend && yarn generate:api
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated api clients. Run yarn generate:api in frontend/ locally and commit."; exit 1)

.github/workflows/mergequeueci.yaml

@@ -0,0 +1,60 @@
+name: mergequeueci
+
+on:
+  pull_request:
+    types:
+      - dequeued
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == false
+    steps:
+      - name: alert
+        uses: slackapi/slack-github-action@v2.1.1
+        with:
+          webhook: ${{ secrets.SLACK_MERGE_QUEUE_WEBHOOK }}
+          webhook-type: incoming-webhook
+          payload: |
+            {
+              "text": ":x: PR removed from merge queue",
+              "blocks": [
+                {
+                  "type": "header",
+                  "text": {
+                    "type": "plain_text",
+                    "text": ":x: PR Removed from Merge Queue"
+                  }
+                },
+                {
+                  "type": "section",
+                  "text": {
+                    "type": "mrkdwn",
+                    "text": "*<${{ github.event.pull_request.html_url }}|PR #${{ github.event.pull_request.number }}: ${{ github.event.pull_request.title }}>*"
+                  }
+                },
+                {
+                  "type": "divider"
+                },
+                {
+                  "type": "section",
+                  "fields": [
+                    {
+                      "type": "mrkdwn",
+                      "text": "*Author*\n@${{ github.event.pull_request.user.login }}"
+                    }
+                  ]
+                }
+              ]
+            }
+      - name: comment
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
+          PR_URL: ${{ github.event.pull_request.html_url }}
+        run: |
+          gh api repos/${{ github.repository }}/issues/$PR_NUMBER/comments \
+            -f body="> :x: **PR removed from merge queue**
+          >
+          > @$PR_AUTHOR your PR was removed from the merge queue. Fix the issue and re-queue when ready."

cmd/community/server.go

@@ -32,14 +32,14 @@ import (
 )
 
 func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
-	var flags signoz.DeprecatedFlags
+	var configFiles []string
 
 	serverCmd := &cobra.Command{
 		Use:                "server",
 		Short:              "Run the SigNoz server",
 		FParseErrWhitelist: cobra.FParseErrWhitelist{UnknownFlags: true},
 		RunE: func(currCmd *cobra.Command, args []string) error {
-			config, err := cmd.NewSigNozConfig(currCmd.Context(), logger, flags)
+			config, err := cmd.NewSigNozConfig(currCmd.Context(), logger, configFiles)
 			if err != nil {
 				return err
 			}
@@ -48,7 +48,7 @@ func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
 		},
 	}
 
-	flags.RegisterFlags(serverCmd)
+	serverCmd.Flags().StringArrayVar(&configFiles, "config", nil, "path to a YAML configuration file (can be specified multiple times, later files override earlier ones)")
 	parentCmd.AddCommand(serverCmd)
 }
 
@@ -73,8 +73,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		},
 		signoz.NewSQLStoreProviderFactories(),
 		signoz.NewTelemetryStoreProviderFactories(),
-		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
-			return signoz.NewAuthNs(ctx, providerSettings, store, licensing)
+		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing, userRoleStore authtypes.UserRoleStore, authz authz.AuthZ) (map[authtypes.AuthNProvider]authn.AuthN, error) {
+			return signoz.NewAuthNs(ctx, providerSettings, store, licensing, userRoleStore, authz)
 		},
 		func(ctx context.Context, sqlstore sqlstore.SQLStore, _ licensing.Licensing, _ dashboard.Module) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx))

cmd/config.go

@@ -10,18 +10,23 @@ import (
 	"github.com/SigNoz/signoz/pkg/signoz"
 )
 
-func NewSigNozConfig(ctx context.Context, logger *slog.Logger, flags signoz.DeprecatedFlags) (signoz.Config, error) {
+func NewSigNozConfig(ctx context.Context, logger *slog.Logger, configFiles []string) (signoz.Config, error) {
+	uris := make([]string, 0, len(configFiles)+1)
+	for _, f := range configFiles {
+		uris = append(uris, "file:"+f)
+	}
+	uris = append(uris, "env:")
+
 	config, err := signoz.NewConfig(
 		ctx,
 		logger,
 		config.ResolverConfig{
-			Uris: []string{"env:"},
+			Uris: uris,
 			ProviderFactories: []config.ProviderFactory{
 				envprovider.NewFactory(),
 				fileprovider.NewFactory(),
 			},
 		},
-		flags,
 	)
 	if err != nil {
 		return signoz.Config{}, err

cmd/config_test.go

@@ -0,0 +1,86 @@
+package cmd
+
+import (
+	"context"
+	"log/slog"
+	"os"
+	"path/filepath"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestNewSigNozConfig_NoConfigFiles(t *testing.T) {
+	logger := slog.New(slog.DiscardHandler)
+	config, err := NewSigNozConfig(context.Background(), logger, nil)
+	require.NoError(t, err)
+	assert.NotZero(t, config)
+}
+
+func TestNewSigNozConfig_SingleConfigFile(t *testing.T) {
+	dir := t.TempDir()
+	configPath := filepath.Join(dir, "config.yaml")
+	err := os.WriteFile(configPath, []byte(`
+cache:
+  provider: "redis"
+`), 0644)
+	require.NoError(t, err)
+
+	logger := slog.New(slog.DiscardHandler)
+	config, err := NewSigNozConfig(context.Background(), logger, []string{configPath})
+	require.NoError(t, err)
+	assert.Equal(t, "redis", config.Cache.Provider)
+}
+
+func TestNewSigNozConfig_MultipleConfigFiles_LaterOverridesEarlier(t *testing.T) {
+	dir := t.TempDir()
+
+	basePath := filepath.Join(dir, "base.yaml")
+	err := os.WriteFile(basePath, []byte(`
+cache:
+  provider: "memory"
+sqlstore:
+  provider: "sqlite"
+`), 0644)
+	require.NoError(t, err)
+
+	overridePath := filepath.Join(dir, "override.yaml")
+	err = os.WriteFile(overridePath, []byte(`
+cache:
+  provider: "redis"
+`), 0644)
+	require.NoError(t, err)
+
+	logger := slog.New(slog.DiscardHandler)
+	config, err := NewSigNozConfig(context.Background(), logger, []string{basePath, overridePath})
+	require.NoError(t, err)
+	// Later file overrides earlier
+	assert.Equal(t, "redis", config.Cache.Provider)
+	// Value from base file that wasn't overridden persists
+	assert.Equal(t, "sqlite", config.SQLStore.Provider)
+}
+
+func TestNewSigNozConfig_EnvOverridesConfigFile(t *testing.T) {
+	dir := t.TempDir()
+	configPath := filepath.Join(dir, "config.yaml")
+	err := os.WriteFile(configPath, []byte(`
+cache:
+  provider: "fromfile"
+`), 0644)
+	require.NoError(t, err)
+
+	t.Setenv("SIGNOZ_CACHE_PROVIDER", "fromenv")
+
+	logger := slog.New(slog.DiscardHandler)
+	config, err := NewSigNozConfig(context.Background(), logger, []string{configPath})
+	require.NoError(t, err)
+	// Env should override file
+	assert.Equal(t, "fromenv", config.Cache.Provider)
+}
+
+func TestNewSigNozConfig_NonexistentFile(t *testing.T) {
+	logger := slog.New(slog.DiscardHandler)
+	_, err := NewSigNozConfig(context.Background(), logger, []string{"/nonexistent/config.yaml"})
+	assert.Error(t, err)
+}

cmd/enterprise/server.go

@@ -9,12 +9,12 @@ import (
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/oidccallbackauthn"
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/samlcallbackauthn"
 	"github.com/SigNoz/signoz/ee/authz/openfgaauthz"
-	eequerier "github.com/SigNoz/signoz/ee/querier"
 	"github.com/SigNoz/signoz/ee/authz/openfgaschema"
 	"github.com/SigNoz/signoz/ee/gateway/httpgateway"
 	enterpriselicensing "github.com/SigNoz/signoz/ee/licensing"
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard"
+	eequerier "github.com/SigNoz/signoz/ee/querier"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
 	"github.com/SigNoz/signoz/ee/sqlschema/postgressqlschema"
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
@@ -42,14 +42,14 @@ import (
 )
 
 func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
-	var flags signoz.DeprecatedFlags
+	var configFiles []string
 
 	serverCmd := &cobra.Command{
 		Use:                "server",
 		Short:              "Run the SigNoz server",
 		FParseErrWhitelist: cobra.FParseErrWhitelist{UnknownFlags: true},
 		RunE: func(currCmd *cobra.Command, args []string) error {
-			config, err := cmd.NewSigNozConfig(currCmd.Context(), logger, flags)
+			config, err := cmd.NewSigNozConfig(currCmd.Context(), logger, configFiles)
 			if err != nil {
 				return err
 			}
@@ -58,7 +58,7 @@ func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
 		},
 	}
 
-	flags.RegisterFlags(serverCmd)
+	serverCmd.Flags().StringArrayVar(&configFiles, "config", nil, "path to a YAML configuration file (can be specified multiple times, later files override earlier ones)")
 	parentCmd.AddCommand(serverCmd)
 }
 
@@ -95,7 +95,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		},
 		sqlstoreFactories,
 		signoz.NewTelemetryStoreProviderFactories(),
-		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
+		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing, userRoleStore authtypes.UserRoleStore, authz authz.AuthZ) (map[authtypes.AuthNProvider]authn.AuthN, error) {
 			samlCallbackAuthN, err := samlcallbackauthn.New(ctx, store, licensing)
 			if err != nil {
 				return nil, err
@@ -106,7 +106,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 				return nil, err
 			}
 
-			authNs, err := signoz.NewAuthNs(ctx, providerSettings, store, licensing)
+			authNs, err := signoz.NewAuthNs(ctx, providerSettings, store, licensing, userRoleStore, authz)
 			if err != nil {
 				return nil, err
 			}

cmd/root.go

@@ -6,7 +6,6 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/spf13/cobra"
-	"go.uber.org/zap" //nolint:depguard
 )
 
 var RootCmd = &cobra.Command{
@@ -19,12 +18,6 @@ var RootCmd = &cobra.Command{
 }
 
 func Execute(logger *slog.Logger) {
-	zapLogger := newZapLogger()
-	zap.ReplaceGlobals(zapLogger)
-	defer func() {
-		_ = zapLogger.Sync()
-	}()
-
 	err := RootCmd.Execute()
 	if err != nil {
 		logger.ErrorContext(RootCmd.Context(), "error running command", "error", err)

cmd/zap.go

@@ -1,110 +0,0 @@
-package cmd
-
-import (
-	"context"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"go.uber.org/zap"         //nolint:depguard
-	"go.uber.org/zap/zapcore" //nolint:depguard
-)
-
-// Deprecated: Use `NewLogger` from `pkg/instrumentation` instead.
-func newZapLogger() *zap.Logger {
-	config := zap.NewProductionConfig()
-	config.EncoderConfig.TimeKey = "timestamp"
-	config.EncoderConfig.EncodeTime = zapcore.ISO8601TimeEncoder
-
-	// Extract sampling config before building the logger.
-	// We need to disable sampling in the config and apply it manually later
-	// to ensure correct core ordering. See filteringCore documentation for details.
-	samplerConfig := config.Sampling
-	config.Sampling = nil
-
-	logger, _ := config.Build()
-
-	// Wrap with custom core wrapping to filter certain log entries.
-	// The order of wrapping is important:
-	//   1. First wrap with filteringCore
-	//   2. Then wrap with sampler
-	//
-	// This creates the call chain: sampler -> filteringCore -> ioCore
-	//
-	// During logging:
-	//   - sampler.Check decides whether to sample the log entry
-	//   - If sampled, filteringCore.Check is called
-	//   - filteringCore adds itself to CheckedEntry.cores
-	//   - All cores in CheckedEntry.cores have their Write method called
-	//   - filteringCore.Write can now filter the entry before passing to ioCore
-	//
-	// If we didn't disable the sampler above, filteringCore would have wrapped
-	// sampler. By calling sampler.Check we would have allowed it to call
-	// ioCore.Check that adds itself to CheckedEntry.cores. Then ioCore.Write
-	// would have bypassed our checks, making filtering impossible.
-	return logger.WithOptions(zap.WrapCore(func(core zapcore.Core) zapcore.Core {
-		core = &filteringCore{core}
-		if samplerConfig != nil {
-			core = zapcore.NewSamplerWithOptions(
-				core,
-				time.Second,
-				samplerConfig.Initial,
-				samplerConfig.Thereafter,
-			)
-		}
-		return core
-	}))
-}
-
-// filteringCore wraps a zapcore.Core to filter out log entries based on a
-// custom logic.
-//
-// Note: This core must be positioned before the sampler in the core chain
-// to ensure Write is called. See newZapLogger for ordering details.
-type filteringCore struct {
-	zapcore.Core
-}
-
-// filter determines whether a log entry should be written based on its fields.
-// Returns false if the entry should be suppressed, true otherwise.
-//
-// Current filters:
-//   - context.Canceled: These are expected errors from cancelled operations,
-//     and create noise in logs.
-func (c *filteringCore) filter(fields []zapcore.Field) bool {
-	for _, field := range fields {
-		if field.Type == zapcore.ErrorType {
-			if loggedErr, ok := field.Interface.(error); ok {
-				// Suppress logs containing context.Canceled errors
-				if errors.Is(loggedErr, context.Canceled) {
-					return false
-				}
-			}
-		}
-	}
-	return true
-}
-
-// With implements zapcore.Core.With
-// It returns a new copy with the added context.
-func (c *filteringCore) With(fields []zapcore.Field) zapcore.Core {
-	return &filteringCore{c.Core.With(fields)}
-}
-
-// Check implements zapcore.Core.Check.
-// It adds this core to the CheckedEntry if the log level is enabled,
-// ensuring that Write will be called for this entry.
-func (c *filteringCore) Check(ent zapcore.Entry, ce *zapcore.CheckedEntry) *zapcore.CheckedEntry {
-	if c.Enabled(ent.Level) {
-		return ce.AddCore(ent, c)
-	}
-	return ce
-}
-
-// Write implements zapcore.Core.Write.
-// It filters log entries based on their fields before delegating to the wrapped core.
-func (c *filteringCore) Write(ent zapcore.Entry, fields []zapcore.Field) error {
-	if !c.filter(fields) {
-		return nil
-	}
-	return c.Core.Write(ent, fields)
-}

conf/example.yaml

@@ -308,6 +308,9 @@ user:
       allow_self: true
       # The duration within which a user can reset their password.
       max_token_lifetime: 6h
+    invite:
+      # The duration within which a user can accept their invite.
+      max_token_lifetime: 48h
   root:
     # Whether to enable the root user. When enabled, a root user is provisioned
     # on startup using the email and password below. The root user cannot be
@@ -321,3 +324,22 @@ user:
     org:
       name: default
       id: 00000000-0000-0000-0000-000000000000
+
+##################### IdentN #####################
+identn:
+  tokenizer:
+    # toggle tokenizer identN
+    enabled: true
+    # headers to use for tokenizer identN resolver
+    headers:
+      - Authorization
+      - Sec-WebSocket-Protocol
+  apikey:
+    # toggle apikey identN
+    enabled: true
+    # headers to use for apikey identN resolver
+    headers:
+      - SIGNOZ-API-KEY
+  impersonation:
+    # toggle impersonation identN, when enabled, all requests will impersonate the root user
+    enabled: false

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.115.0
+    image: signoz/signoz:v0.116.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.115.0
+    image: signoz/signoz:v0.116.1
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker-swarm/generator/hotrod/docker-compose.yaml

@@ -1,38 +0,0 @@
-version: "3"
-x-common: &common
-  networks:
-    - signoz-net
-  extra_hosts:
-    - host.docker.internal:host-gateway
-  logging:
-    options:
-      max-size: 50m
-      max-file: "3"
-  deploy:
-    restart_policy:
-      condition: on-failure
-services:
-  hotrod:
-    <<: *common
-    image: jaegertracing/example-hotrod:1.61.0
-    command: [ "all" ]
-    environment:
-      - OTEL_EXPORTER_OTLP_ENDPOINT=http://host.docker.internal:4318  #
-  load-hotrod:
-    <<: *common
-    image: "signoz/locust:1.2.3"
-    environment:
-      ATTACKED_HOST: http://hotrod:8080
-      LOCUST_MODE: standalone
-      NO_PROXY: standalone
-      TASK_DELAY_FROM: 5
-      TASK_DELAY_TO: 30
-      QUIET_MODE: "${QUIET_MODE:-false}"
-      LOCUST_OPTS: "--headless -u 10 -r 1"
-    volumes:
-      - ../../../common/locust-scripts:/locust
-
-networks:
-  signoz-net:
-    name: signoz-net
-    external: true

deploy/docker-swarm/generator/infra/docker-compose.yaml

@@ -1,69 +0,0 @@
-version: "3"
-x-common: &common
-  networks:
-    - signoz-net
-  extra_hosts:
-    - host.docker.internal:host-gateway
-  logging:
-    options:
-      max-size: 50m
-      max-file: "3"
-  deploy:
-    mode: global
-    restart_policy:
-      condition: on-failure
-services:
-  otel-agent:
-    <<: *common
-    image: otel/opentelemetry-collector-contrib:0.111.0
-    command:
-      - --config=/etc/otel-collector-config.yaml
-    volumes:
-      - ./otel-agent-config.yaml:/etc/otel-collector-config.yaml
-      - /:/hostfs:ro
-    environment:
-      - SIGNOZ_COLLECTOR_ENDPOINT=http://host.docker.internal:4317    # In case of external SigNoz or cloud, update the endpoint and access token
-      - OTEL_RESOURCE_ATTRIBUTES=host.name={{.Node.Hostname}},os.type={{.Node.Platform.OS}}
-      # - SIGNOZ_ACCESS_TOKEN="<your-access-token>"
-    # Before exposing the ports, make sure the ports are not used by other services
-    # ports:
-    #   - "4317:4317"
-    #   - "4318:4318"
-  otel-metrics:
-    <<: *common
-    image: otel/opentelemetry-collector-contrib:0.111.0
-    user: 0:0   #  If you have security concerns, you can replace this with your `UID:GID` that has necessary permissions to docker.sock
-    command:
-      - --config=/etc/otel-collector-config.yaml
-    volumes:
-      - ./otel-metrics-config.yaml:/etc/otel-collector-config.yaml
-      - /var/run/docker.sock:/var/run/docker.sock
-    environment:
-      - SIGNOZ_COLLECTOR_ENDPOINT=http://host.docker.internal:4317    # In case of external SigNoz or cloud, update the endpoint and access token
-      - OTEL_RESOURCE_ATTRIBUTES=host.name={{.Node.Hostname}},os.type={{.Node.Platform.OS}}
-      # - SIGNOZ_ACCESS_TOKEN="<your-access-token>"
-    # Before exposing the ports, make sure the ports are not used by other services
-    # ports:
-    #   - "4317:4317"
-    #   - "4318:4318"
-    deploy:
-      mode: replicated
-      replicas: 1
-      placement:
-        constraints:
-          - node.role == manager
-  logspout:
-    <<: *common
-    image: "gliderlabs/logspout:v3.2.14"
-    command: syslog+tcp://otel-agent:2255
-    user: root
-    volumes:
-      - /etc/hostname:/etc/host_hostname:ro
-      - /var/run/docker.sock:/var/run/docker.sock
-    depends_on:
-      - otel-agent
-
-networks:
-  signoz-net:
-    name: signoz-net
-    external: true

deploy/docker-swarm/generator/infra/otel-agent-config.yaml

@@ -1,102 +0,0 @@
-receivers:
-  hostmetrics:
-    collection_interval: 30s
-    root_path: /hostfs
-    scrapers:
-      cpu: {}
-      load: {}
-      memory: {}
-      disk: {}
-      filesystem: {}
-      network: {}
-  otlp:
-    protocols:
-      grpc:
-        endpoint: 0.0.0.0:4317
-      http:
-        endpoint: 0.0.0.0:4318
-  prometheus:
-    config:
-      global:
-        scrape_interval: 60s
-      scrape_configs:
-        - job_name: otel-agent
-          static_configs:
-          - targets:
-              - localhost:8888
-            labels:
-              job_name: otel-agent
-  tcplog/docker:
-    listen_address: "0.0.0.0:2255"
-    operators:
-      - type: regex_parser
-        regex: '^<([0-9]+)>[0-9]+ (?P<timestamp>[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}(\.[0-9]+)?([zZ]|([\+-])([01]\d|2[0-3]):?([0-5]\d)?)?) (?P<container_id>\S+) (?P<container_name>\S+) [0-9]+ - -( (?P<body>.*))?'
-        timestamp:
-          parse_from: attributes.timestamp
-          layout: '%Y-%m-%dT%H:%M:%S.%LZ'
-      - type: move
-        from: attributes["body"]
-        to: body
-      - type: remove
-        field: attributes.timestamp
-      # please remove names from below if you want to collect logs from them
-      - type: filter
-        id: signoz_logs_filter
-        expr: 'attributes.container_name matches "^(signoz_(logspout|signoz|otel-collector|clickhouse|zookeeper))|(infra_(logspout|otel-agent|otel-metrics)).*"'
-processors:
-  batch:
-    send_batch_size: 10000
-    send_batch_max_size: 11000
-    timeout: 10s
-  resourcedetection:
-    # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
-    detectors:
-      # - ec2
-      # - gcp
-      # - azure
-      - env
-      - system
-    timeout: 2s
-extensions:
-  health_check:
-    endpoint: 0.0.0.0:13133
-  pprof:
-    endpoint: 0.0.0.0:1777
-exporters:
-  otlp:
-    endpoint: ${env:SIGNOZ_COLLECTOR_ENDPOINT}
-    tls:
-      insecure: true
-    headers:
-      signoz-access-token: ${env:SIGNOZ_ACCESS_TOKEN}
-  # debug: {}
-service:
-  telemetry:
-    logs:
-      encoding: json
-    metrics:
-      address: 0.0.0.0:8888
-  extensions:
-    - health_check
-    - pprof
-  pipelines:
-    traces:
-      receivers: [otlp]
-      processors: [resourcedetection, batch]
-      exporters: [otlp]
-    metrics:
-      receivers: [otlp]
-      processors: [resourcedetection, batch]
-      exporters: [otlp]
-    metrics/hostmetrics:
-      receivers: [hostmetrics]
-      processors: [resourcedetection, batch]
-      exporters: [otlp]
-    metrics/prometheus:
-      receivers: [prometheus]
-      processors: [resourcedetection, batch]
-      exporters: [otlp]
-    logs:
-      receivers: [otlp, tcplog/docker]
-      processors: [resourcedetection, batch]
-      exporters: [otlp]

deploy/docker-swarm/generator/infra/otel-metrics-config.yaml

@@ -1,103 +0,0 @@
-receivers:
-  prometheus:
-    config:
-      global:
-        scrape_interval: 60s
-      scrape_configs:
-        - job_name: otel-metrics
-          static_configs:
-          - targets:
-              - localhost:8888
-            labels:
-              job_name: otel-metrics
-        # For Docker daemon metrics to be scraped, it must be configured to expose
-        # Prometheus metrics, as documented here: https://docs.docker.com/config/daemon/prometheus/
-        # - job_name: docker-daemon
-        #   dockerswarm_sd_configs:
-        #     - host: unix:///var/run/docker.sock
-        #       role: nodes
-        #   relabel_configs:
-        #     - source_labels: [__meta_dockerswarm_node_address]
-        #       target_label: __address__
-        #       replacement: $1:9323
-        - job_name: "dockerswarm"
-          dockerswarm_sd_configs:
-            - host: unix:///var/run/docker.sock
-              role: tasks
-          relabel_configs:
-            - action: keep
-              regex: running
-              source_labels:
-                - __meta_dockerswarm_task_desired_state
-            - action: keep
-              regex: true
-              source_labels:
-                - __meta_dockerswarm_service_label_signoz_io_scrape
-            - regex: ([^:]+)(?::\d+)?
-              replacement: $1
-              source_labels:
-                - __address__
-              target_label: swarm_container_ip
-            - separator: .
-              source_labels:
-                - __meta_dockerswarm_service_name
-                - __meta_dockerswarm_task_slot
-                - __meta_dockerswarm_task_id
-              target_label: swarm_container_name
-            - target_label: __address__
-              source_labels:
-                - swarm_container_ip
-                - __meta_dockerswarm_service_label_signoz_io_port
-              separator: ":"
-            - source_labels:
-                - __meta_dockerswarm_service_label_signoz_io_path
-              target_label: __metrics_path__
-            - source_labels:
-              - __meta_dockerswarm_service_label_com_docker_stack_namespace
-              target_label: namespace
-            - source_labels:
-                - __meta_dockerswarm_service_name
-              target_label: service_name
-            - source_labels:
-                - __meta_dockerswarm_task_id
-              target_label: service_instance_id
-            - source_labels:
-                - __meta_dockerswarm_node_hostname
-              target_label: host_name
-processors:
-  batch:
-    send_batch_size: 10000
-    send_batch_max_size: 11000
-    timeout: 10s
-  resourcedetection:
-    detectors:
-      - env
-      - system
-    timeout: 2s
-extensions:
-  health_check:
-    endpoint: 0.0.0.0:13133
-  pprof:
-    endpoint: 0.0.0.0:1777
-exporters:
-  otlp:
-    endpoint: ${env:SIGNOZ_COLLECTOR_ENDPOINT}
-    tls:
-      insecure: true
-    headers:
-      signoz-access-token: ${env:SIGNOZ_ACCESS_TOKEN}
-  # debug: {}
-service:
-  telemetry:
-    logs:
-      encoding: json
-    metrics:
-      address: 0.0.0.0:8888
-  extensions:
-    - health_check
-    - pprof
-  pipelines:
-    metrics:
-      receivers: [prometheus]
-      processors: [resourcedetection, batch]
-      exporters: [otlp]

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.115.0}
+    image: signoz/signoz:${VERSION:-v0.116.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.115.0}
+    image: signoz/signoz:${VERSION:-v0.116.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/generator/hotrod/docker-compose.yaml

@@ -1,39 +0,0 @@
-version: "3"
-x-common: &common
-  networks:
-    - signoz-net
-  extra_hosts:
-    - host.docker.internal:host-gateway
-  logging:
-    options:
-      max-size: 50m
-      max-file: "3"
-  restart: unless-stopped
-services:
-  hotrod:
-    <<: *common
-    image: jaegertracing/example-hotrod:1.61.0
-    container_name: hotrod
-    command: [ "all" ]
-    environment:
-      - OTEL_EXPORTER_OTLP_ENDPOINT=http://host.docker.internal:4318  # In case of external SigNoz or cloud, update the endpoint and access token
-      # - OTEL_OTLP_HEADERS=signoz-access-token=<your-access-token>
-  load-hotrod:
-    <<: *common
-    image: "signoz/locust:1.2.3"
-    container_name: load-hotrod
-    environment:
-      ATTACKED_HOST: http://hotrod:8080
-      LOCUST_MODE: standalone
-      NO_PROXY: standalone
-      TASK_DELAY_FROM: 5
-      TASK_DELAY_TO: 30
-      QUIET_MODE: "${QUIET_MODE:-false}"
-      LOCUST_OPTS: "--headless -u 10 -r 1"
-    volumes:
-      - ../../../common/locust-scripts:/locust
-
-networks:
-  signoz-net:
-    name: signoz-net
-    external: true

deploy/docker/generator/infra/docker-compose.yaml

@@ -1,43 +0,0 @@
-version: "3"
-x-common: &common
-  networks:
-    - signoz-net
-  extra_hosts:
-    - host.docker.internal:host-gateway
-  logging:
-    options:
-      max-size: 50m
-      max-file: "3"
-  restart: unless-stopped
-services:
-  otel-agent:
-    <<: *common
-    image: otel/opentelemetry-collector-contrib:0.111.0
-    command:
-      - --config=/etc/otel-collector-config.yaml
-    volumes:
-      - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
-      - /:/hostfs:ro
-      - /var/run/docker.sock:/var/run/docker.sock
-    environment:
-      - SIGNOZ_COLLECTOR_ENDPOINT=http://host.docker.internal:4317    # In case of external SigNoz or cloud, update the endpoint and access token
-      - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux  # Replace signoz-host with the actual hostname
-      # - SIGNOZ_ACCESS_TOKEN="<your-access-token>"
-    # Before exposing the ports, make sure the ports are not used by other services
-    # ports:
-    #   - "4317:4317"
-    #   - "4318:4318"
-  logspout:
-    <<: *common
-    image: "gliderlabs/logspout:v3.2.14"
-    volumes:
-      - /etc/hostname:/etc/host_hostname:ro
-      - /var/run/docker.sock:/var/run/docker.sock
-    command: syslog+tcp://otel-agent:2255
-    depends_on:
-      - otel-agent
-
-networks:
-  signoz-net:
-    name: signoz-net
-    external: true

deploy/docker/generator/infra/otel-collector-config.yaml

@@ -1,139 +0,0 @@
-receivers:
-  hostmetrics:
-    collection_interval: 30s
-    root_path: /hostfs
-    scrapers:
-      cpu: {}
-      load: {}
-      memory: {}
-      disk: {}
-      filesystem: {}
-      network: {}
-  otlp:
-    protocols:
-      grpc:
-        endpoint: 0.0.0.0:4317
-      http:
-        endpoint: 0.0.0.0:4318
-  prometheus:
-    config:
-      global:
-        scrape_interval: 60s
-      scrape_configs:
-        - job_name: otel-collector
-          static_configs:
-          - targets:
-              - localhost:8888
-            labels:
-              job_name: otel-collector
-        # For Docker daemon metrics to be scraped, it must be configured to expose
-        # Prometheus metrics, as documented here: https://docs.docker.com/config/daemon/prometheus/
-        # - job_name: docker-daemon
-        #   static_configs:
-        #   - targets:
-        #       - host.docker.internal:9323
-        #     labels:
-        #       job_name: docker-daemon
-        - job_name: docker-container
-          docker_sd_configs:
-            - host: unix:///var/run/docker.sock
-          relabel_configs:
-            - action: keep
-              regex: true
-              source_labels:
-                - __meta_docker_container_label_signoz_io_scrape
-            - regex: true
-              source_labels:
-                - __meta_docker_container_label_signoz_io_path
-              target_label: __metrics_path__
-            - regex: (.+)
-              source_labels:
-                - __meta_docker_container_label_signoz_io_path
-              target_label: __metrics_path__
-            - separator: ":"
-              source_labels:
-                - __meta_docker_network_ip
-                - __meta_docker_container_label_signoz_io_port
-              target_label: __address__
-            - regex: '/(.*)'
-              replacement: '$1'
-              source_labels:
-                - __meta_docker_container_name
-              target_label: container_name
-            - regex: __meta_docker_container_label_signoz_io_(.+)
-              action: labelmap
-              replacement: $1
-  tcplog/docker:
-    listen_address: "0.0.0.0:2255"
-    operators:
-      - type: regex_parser
-        regex: '^<([0-9]+)>[0-9]+ (?P<timestamp>[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}(\.[0-9]+)?([zZ]|([\+-])([01]\d|2[0-3]):?([0-5]\d)?)?) (?P<container_id>\S+) (?P<container_name>\S+) [0-9]+ - -( (?P<body>.*))?'
-        timestamp:
-          parse_from: attributes.timestamp
-          layout: '%Y-%m-%dT%H:%M:%S.%LZ'
-      - type: move
-        from: attributes["body"]
-        to: body
-      - type: remove
-        field: attributes.timestamp
-      # please remove names from below if you want to collect logs from them
-      - type: filter
-        id: signoz_logs_filter
-        expr: 'attributes.container_name matches "^signoz|(signoz-(|otel-collector|clickhouse|zookeeper))|(infra-(logspout|otel-agent)-.*)"'
-processors:
-  batch:
-    send_batch_size: 10000
-    send_batch_max_size: 11000
-    timeout: 10s
-  resourcedetection:
-    # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
-    detectors:
-      # - ec2
-      # - gcp
-      # - azure
-      - env
-      - system
-    timeout: 2s
-extensions:
-  health_check:
-    endpoint: 0.0.0.0:13133
-  pprof:
-    endpoint: 0.0.0.0:1777
-exporters:
-  otlp:
-    endpoint: ${env:SIGNOZ_COLLECTOR_ENDPOINT}
-    tls:
-      insecure: true
-    headers:
-      signoz-access-token: ${env:SIGNOZ_ACCESS_TOKEN}
-  # debug: {}
-service:
-  telemetry:
-    logs:
-      encoding: json
-    metrics:
-      address: 0.0.0.0:8888
-  extensions:
-    - health_check
-    - pprof
-  pipelines:
-    traces:
-      receivers: [otlp]
-      processors: [resourcedetection, batch]
-      exporters: [otlp]
-    metrics:
-      receivers: [otlp]
-      processors: [resourcedetection, batch]
-      exporters: [otlp]
-    metrics/hostmetrics:
-      receivers: [hostmetrics]
-      processors: [resourcedetection, batch]
-      exporters: [otlp]
-    metrics/prometheus:
-      receivers: [prometheus]
-      processors: [resourcedetection, batch]
-      exporters: [otlp]
-    logs:
-      receivers: [otlp, tcplog/docker]
-      processors: [resourcedetection, batch]
-      exporters: [otlp]

docs/api/openapi.yml

@@ -220,6 +220,13 @@ components:
       - additions
       - deletions
       type: object
+    AuthtypesPatchableRole:
+      properties:
+        description:
+          type: string
+      required:
+      - description
+      type: object
     AuthtypesPostableAuthDomain:
       properties:
         config:
@@ -236,6 +243,15 @@ components:
         password:
           type: string
       type: object
+    AuthtypesPostableRole:
+      properties:
+        description:
+          type: string
+        name:
+          type: string
+      required:
+      - name
+      type: object
     AuthtypesPostableRotateToken:
       properties:
         refreshToken:
@@ -251,6 +267,31 @@ components:
       - name
       - type
       type: object
+    AuthtypesRole:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        description:
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+        orgId:
+          type: string
+        type:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      - name
+      - description
+      - type
+      - orgId
+      type: object
     AuthtypesRoleMapping:
       properties:
         defaultRole:
@@ -557,6 +598,39 @@ components:
       required:
       - config
       type: object
+    GlobaltypesAPIKeyConfig:
+      properties:
+        enabled:
+          type: boolean
+      type: object
+    GlobaltypesConfig:
+      properties:
+        external_url:
+          type: string
+        identN:
+          $ref: '#/components/schemas/GlobaltypesIdentNConfig'
+        ingestion_url:
+          type: string
+      type: object
+    GlobaltypesIdentNConfig:
+      properties:
+        apikey:
+          $ref: '#/components/schemas/GlobaltypesAPIKeyConfig'
+        impersonation:
+          $ref: '#/components/schemas/GlobaltypesImpersonationConfig'
+        tokenizer:
+          $ref: '#/components/schemas/GlobaltypesTokenizerConfig'
+      type: object
+    GlobaltypesImpersonationConfig:
+      properties:
+        enabled:
+          type: boolean
+      type: object
+    GlobaltypesTokenizerConfig:
+      properties:
+        enabled:
+          type: boolean
+      type: object
     MetricsexplorertypesListMetric:
       properties:
         description:
@@ -1722,47 +1796,6 @@ components:
       - status
       - error
       type: object
-    RoletypesPatchableRole:
-      properties:
-        description:
-          type: string
-      required:
-      - description
-      type: object
-    RoletypesPostableRole:
-      properties:
-        description:
-          type: string
-        name:
-          type: string
-      required:
-      - name
-      type: object
-    RoletypesRole:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        description:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        orgId:
-          type: string
-        type:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - name
-      - description
-      - type
-      - orgId
-      type: object
     ServiceaccounttypesFactorAPIKey:
       properties:
         createdAt:
@@ -1993,6 +2026,31 @@ components:
         userId:
           type: string
       type: object
+    TypesDeprecatedUser:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        displayName:
+          type: string
+        email:
+          type: string
+        id:
+          type: string
+        isRoot:
+          type: boolean
+        orgId:
+          type: string
+        role:
+          type: string
+        status:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      type: object
     TypesGettableAPIKey:
       properties:
         createdAt:
@@ -2030,13 +2088,6 @@ components:
       required:
       - id
       type: object
-    TypesGettableGlobalConfig:
-      properties:
-        external_url:
-          type: string
-        ingestion_url:
-          type: string
-      type: object
     TypesIdentifiable:
       properties:
         id:
@@ -2101,17 +2152,6 @@ components:
         role:
           type: string
       type: object
-    TypesPostableAcceptInvite:
-      properties:
-        displayName:
-          type: string
-        password:
-          type: string
-        sourceUrl:
-          type: string
-        token:
-          type: string
-      type: object
     TypesPostableBulkInviteRequest:
       properties:
         invites:
@@ -2207,8 +2247,6 @@ components:
           type: boolean
         orgId:
           type: string
-        role:
-          type: string
         status:
           type: string
         updatedAt:
@@ -3255,7 +3293,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/TypesGettableGlobalConfig'
+                    $ref: '#/components/schemas/GlobaltypesConfig'
                   status:
                     type: string
                 required:
@@ -3263,80 +3301,16 @@ paths:
                 - data
                 type: object
           description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
         "500":
           content:
             application/json:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
       summary: Get global config
       tags:
       - global
   /api/v1/invite:
-    get:
-      deprecated: false
-      description: This endpoint lists all invites
-      operationId: ListInvite
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    items:
-                      $ref: '#/components/schemas/TypesInvite'
-                    type: array
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: List invites
-      tags:
-      - users
     post:
       deprecated: false
       description: This endpoint creates an invite for a user
@@ -3399,151 +3373,6 @@ paths:
       summary: Create invite
       tags:
       - users
-  /api/v1/invite/{id}:
-    delete:
-      deprecated: false
-      description: This endpoint deletes an invite by id
-      operationId: DeleteInvite
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Delete invite
-      tags:
-      - users
-  /api/v1/invite/{token}:
-    get:
-      deprecated: false
-      description: This endpoint gets an invite by token
-      operationId: GetInvite
-      parameters:
-      - in: path
-        name: token
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesInvite'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      summary: Get invite
-      tags:
-      - users
-  /api/v1/invite/accept:
-    post:
-      deprecated: false
-      description: This endpoint accepts an invite by token
-      operationId: AcceptInvite
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/TypesPostableAcceptInvite'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesUser'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      summary: Accept invite
-      tags:
-      - users
   /api/v1/invite/bulk:
     post:
       deprecated: false
@@ -4234,7 +4063,7 @@ paths:
                 properties:
                   data:
                     items:
-                      $ref: '#/components/schemas/RoletypesRole'
+                      $ref: '#/components/schemas/AuthtypesRole'
                     type: array
                   status:
                     type: string
@@ -4277,7 +4106,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/RoletypesPostableRole'
+              $ref: '#/components/schemas/AuthtypesPostableRole'
       responses:
         "201":
           content:
@@ -4422,7 +4251,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/RoletypesRole'
+                    $ref: '#/components/schemas/AuthtypesRole'
                   status:
                     type: string
                 required:
@@ -4470,7 +4299,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/RoletypesPatchableRole'
+              $ref: '#/components/schemas/AuthtypesPatchableRole'
       responses:
         "204":
           content:
@@ -5271,7 +5100,7 @@ paths:
                 properties:
                   data:
                     items:
-                      $ref: '#/components/schemas/TypesUser'
+                      $ref: '#/components/schemas/TypesDeprecatedUser'
                     type: array
                   status:
                     type: string
@@ -5369,7 +5198,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/TypesUser'
+                    $ref: '#/components/schemas/TypesDeprecatedUser'
                   status:
                     type: string
                 required:
@@ -5423,7 +5252,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/TypesUser'
+              $ref: '#/components/schemas/TypesDeprecatedUser'
       responses:
         "200":
           content:
@@ -5431,7 +5260,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/TypesUser'
+                    $ref: '#/components/schemas/TypesDeprecatedUser'
                   status:
                     type: string
                 required:
@@ -5489,7 +5318,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/TypesUser'
+                    $ref: '#/components/schemas/TypesDeprecatedUser'
                   status:
                     type: string
                 required:
@@ -5814,9 +5643,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - EDITOR
       - tokenizer:
-        - ADMIN
+        - EDITOR
       summary: Get ingestion keys for workspace
       tags:
       - gateway
@@ -5864,9 +5693,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - EDITOR
       - tokenizer:
-        - ADMIN
+        - EDITOR
       summary: Create ingestion key for workspace
       tags:
       - gateway
@@ -5904,9 +5733,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - EDITOR
       - tokenizer:
-        - ADMIN
+        - EDITOR
       summary: Delete ingestion key for workspace
       tags:
       - gateway
@@ -5948,9 +5777,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - EDITOR
       - tokenizer:
-        - ADMIN
+        - EDITOR
       summary: Update ingestion key for workspace
       tags:
       - gateway
@@ -6005,9 +5834,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - EDITOR
       - tokenizer:
-        - ADMIN
+        - EDITOR
       summary: Create limit for the ingestion key
       tags:
       - gateway
@@ -6045,9 +5874,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - EDITOR
       - tokenizer:
-        - ADMIN
+        - EDITOR
       summary: Delete limit for the ingestion key
       tags:
       - gateway
@@ -6089,9 +5918,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - EDITOR
       - tokenizer:
-        - ADMIN
+        - EDITOR
       summary: Update limit for the ingestion key
       tags:
       - gateway
@@ -6149,9 +5978,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - EDITOR
       - tokenizer:
-        - ADMIN
+        - EDITOR
       summary: Search ingestion keys for workspace
       tags:
       - gateway

ee/authz/openfgaauthz/provider.go

@@ -13,7 +13,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/roletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 	openfgapkgtransformer "github.com/openfga/language/pkg/go/transformer"
@@ -23,7 +22,7 @@ type provider struct {
 	pkgAuthzService authz.AuthZ
 	openfgaServer   *openfgaserver.Server
 	licensing       licensing.Licensing
-	store           roletypes.Store
+	store           authtypes.RoleStore
 	registry        []authz.RegisterTypeable
 }
 
@@ -82,23 +81,23 @@ func (provider *provider) Write(ctx context.Context, additions []*openfgav1.Tupl
 	return provider.openfgaServer.Write(ctx, additions, deletions)
 }
 
-func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*roletypes.Role, error) {
+func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.Role, error) {
 	return provider.pkgAuthzService.Get(ctx, orgID, id)
 }
 
-func (provider *provider) GetByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*roletypes.Role, error) {
+func (provider *provider) GetByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*authtypes.Role, error) {
 	return provider.pkgAuthzService.GetByOrgIDAndName(ctx, orgID, name)
 }
 
-func (provider *provider) List(ctx context.Context, orgID valuer.UUID) ([]*roletypes.Role, error) {
+func (provider *provider) List(ctx context.Context, orgID valuer.UUID) ([]*authtypes.Role, error) {
 	return provider.pkgAuthzService.List(ctx, orgID)
 }
 
-func (provider *provider) ListByOrgIDAndNames(ctx context.Context, orgID valuer.UUID, names []string) ([]*roletypes.Role, error) {
+func (provider *provider) ListByOrgIDAndNames(ctx context.Context, orgID valuer.UUID, names []string) ([]*authtypes.Role, error) {
 	return provider.pkgAuthzService.ListByOrgIDAndNames(ctx, orgID, names)
 }
 
-func (provider *provider) ListByOrgIDAndIDs(ctx context.Context, orgID valuer.UUID, ids []valuer.UUID) ([]*roletypes.Role, error) {
+func (provider *provider) ListByOrgIDAndIDs(ctx context.Context, orgID valuer.UUID, ids []valuer.UUID) ([]*authtypes.Role, error) {
 	return provider.pkgAuthzService.ListByOrgIDAndIDs(ctx, orgID, ids)
 }
 
@@ -114,7 +113,7 @@ func (provider *provider) Revoke(ctx context.Context, orgID valuer.UUID, names [
 	return provider.pkgAuthzService.Revoke(ctx, orgID, names, subject)
 }
 
-func (provider *provider) CreateManagedRoles(ctx context.Context, orgID valuer.UUID, managedRoles []*roletypes.Role) error {
+func (provider *provider) CreateManagedRoles(ctx context.Context, orgID valuer.UUID, managedRoles []*authtypes.Role) error {
 	return provider.pkgAuthzService.CreateManagedRoles(ctx, orgID, managedRoles)
 }
 
@@ -136,16 +135,16 @@ func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context,
 	return provider.Write(ctx, tuples, nil)
 }
 
-func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
+func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	return provider.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
+	return provider.store.Create(ctx, authtypes.NewStorableRoleFromRole(role))
 }
 
-func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) (*roletypes.Role, error) {
+func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) (*authtypes.Role, error) {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -159,10 +158,10 @@ func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, ro
 	}
 
 	if existingRole != nil {
-		return roletypes.NewRoleFromStorableRole(existingRole), nil
+		return authtypes.NewRoleFromStorableRole(existingRole), nil
 	}
 
-	err = provider.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
+	err = provider.store.Create(ctx, authtypes.NewStorableRoleFromRole(role))
 	if err != nil {
 		return nil, err
 	}
@@ -217,13 +216,13 @@ func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id
 	return objects, nil
 }
 
-func (provider *provider) Patch(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
+func (provider *provider) Patch(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	return provider.store.Update(ctx, orgID, roletypes.NewStorableRoleFromRole(role))
+	return provider.store.Update(ctx, orgID, authtypes.NewStorableRoleFromRole(role))
 }
 
 func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*authtypes.Object) error {
@@ -232,12 +231,12 @@ func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, n
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	additionTuples, err := roletypes.GetAdditionTuples(name, orgID, relation, additions)
+	additionTuples, err := authtypes.GetAdditionTuples(name, orgID, relation, additions)
 	if err != nil {
 		return err
 	}
 
-	deletionTuples, err := roletypes.GetDeletionTuples(name, orgID, relation, deletions)
+	deletionTuples, err := authtypes.GetDeletionTuples(name, orgID, relation, deletions)
 	if err != nil {
 		return err
 	}
@@ -261,7 +260,7 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 		return err
 	}
 
-	role := roletypes.NewRoleFromStorableRole(storableRole)
+	role := authtypes.NewRoleFromStorableRole(storableRole)
 	err = role.ErrIfManaged()
 	if err != nil {
 		return err
@@ -271,7 +270,7 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 }
 
 func (provider *provider) MustGetTypeables() []authtypes.Typeable {
-	return []authtypes.Typeable{authtypes.TypeableRole, roletypes.TypeableResourcesRoles}
+	return []authtypes.Typeable{authtypes.TypeableRole, authtypes.TypeableResourcesRoles}
 }
 
 func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) ([]*openfgav1.TupleKey, error) {
@@ -283,7 +282,7 @@ func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID va
 		adminSubject,
 		authtypes.RelationAssignee,
 		[]authtypes.Selector{
-			authtypes.MustNewSelector(authtypes.TypeRole, roletypes.SigNozAdminRoleName),
+			authtypes.MustNewSelector(authtypes.TypeRole, authtypes.SigNozAdminRoleName),
 		},
 		orgID,
 	)
@@ -298,7 +297,7 @@ func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID va
 		anonymousSubject,
 		authtypes.RelationAssignee,
 		[]authtypes.Selector{
-			authtypes.MustNewSelector(authtypes.TypeRole, roletypes.SigNozAnonymousRoleName),
+			authtypes.MustNewSelector(authtypes.TypeRole, authtypes.SigNozAnonymousRoleName),
 		},
 		orgID,
 	)

ee/licensing/httplicensing/provider.go

@@ -198,7 +198,10 @@ func (provider *provider) Checkout(ctx context.Context, organizationID valuer.UU
 
 	response, err := provider.zeus.GetCheckoutURL(ctx, activeLicense.Key, body)
 	if err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to generate checkout session")
+		if errors.Ast(err, errors.TypeAlreadyExists) {
+			return nil, errors.WithAdditionalf(err, "checkout has already been completed for this account. Please click 'Refresh Status' to sync your subscription")
+		}
+		return nil, err
 	}
 
 	return &licensetypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
@@ -217,7 +220,7 @@ func (provider *provider) Portal(ctx context.Context, organizationID valuer.UUID
 
 	response, err := provider.zeus.GetPortalURL(ctx, activeLicense.Key, body)
 	if err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to generate portal session")
+		return nil, err
 	}
 
 	return &licensetypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil

ee/modules/dashboard/impldashboard/module.go

@@ -19,7 +19,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	"github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/types/roletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
@@ -224,7 +223,7 @@ func (module *module) MustGetTypeables() []authtypes.Typeable {
 
 func (module *module) MustGetManagedRoleTransactions() map[string][]*authtypes.Transaction {
 	return map[string][]*authtypes.Transaction{
-		roletypes.SigNozAnonymousRoleName: {
+		authtypes.SigNozAnonymousRoleName: {
 			{
 				ID:       valuer.GenerateUUID(),
 				Relation: authtypes.RelationRead,

ee/query-service/anomaly/seasonal.go

@@ -2,6 +2,7 @@ package anomaly
 
 import (
 	"context"
+	"log/slog"
 	"math"
 	"time"
 
@@ -13,7 +14,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"go.uber.org/zap"
 )
 
 var (
@@ -67,7 +67,7 @@ func (p *BaseSeasonalProvider) getResults(ctx context.Context, orgID valuer.UUID
 		instrumentationtypes.CodeNamespace:    "anomaly",
 		instrumentationtypes.CodeFunctionName: "getResults",
 	})
-	zap.L().Info("fetching results for current period", zap.Any("currentPeriodQuery", params.CurrentPeriodQuery))
+	slog.InfoContext(ctx, "fetching results for current period", "current_period_query", params.CurrentPeriodQuery)
 	currentPeriodResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.CurrentPeriodQuery)
 	if err != nil {
 		return nil, err
@@ -78,7 +78,7 @@ func (p *BaseSeasonalProvider) getResults(ctx context.Context, orgID valuer.UUID
 		return nil, err
 	}
 
-	zap.L().Info("fetching results for past period", zap.Any("pastPeriodQuery", params.PastPeriodQuery))
+	slog.InfoContext(ctx, "fetching results for past period", "past_period_query", params.PastPeriodQuery)
 	pastPeriodResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.PastPeriodQuery)
 	if err != nil {
 		return nil, err
@@ -89,7 +89,7 @@ func (p *BaseSeasonalProvider) getResults(ctx context.Context, orgID valuer.UUID
 		return nil, err
 	}
 
-	zap.L().Info("fetching results for current season", zap.Any("currentSeasonQuery", params.CurrentSeasonQuery))
+	slog.InfoContext(ctx, "fetching results for current season", "current_season_query", params.CurrentSeasonQuery)
 	currentSeasonResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.CurrentSeasonQuery)
 	if err != nil {
 		return nil, err
@@ -100,7 +100,7 @@ func (p *BaseSeasonalProvider) getResults(ctx context.Context, orgID valuer.UUID
 		return nil, err
 	}
 
-	zap.L().Info("fetching results for past season", zap.Any("pastSeasonQuery", params.PastSeasonQuery))
+	slog.InfoContext(ctx, "fetching results for past season", "past_season_query", params.PastSeasonQuery)
 	pastSeasonResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.PastSeasonQuery)
 	if err != nil {
 		return nil, err
@@ -111,7 +111,7 @@ func (p *BaseSeasonalProvider) getResults(ctx context.Context, orgID valuer.UUID
 		return nil, err
 	}
 
-	zap.L().Info("fetching results for past 2 season", zap.Any("past2SeasonQuery", params.Past2SeasonQuery))
+	slog.InfoContext(ctx, "fetching results for past 2 season", "past_2_season_query", params.Past2SeasonQuery)
 	past2SeasonResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.Past2SeasonQuery)
 	if err != nil {
 		return nil, err
@@ -122,7 +122,7 @@ func (p *BaseSeasonalProvider) getResults(ctx context.Context, orgID valuer.UUID
 		return nil, err
 	}
 
-	zap.L().Info("fetching results for past 3 season", zap.Any("past3SeasonQuery", params.Past3SeasonQuery))
+	slog.InfoContext(ctx, "fetching results for past 3 season", "past_3_season_query", params.Past3SeasonQuery)
 	past3SeasonResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.Past3SeasonQuery)
 	if err != nil {
 		return nil, err
@@ -235,17 +235,17 @@ func (p *BaseSeasonalProvider) getPredictedSeries(
 		if predictedValue < 0 {
 			// this should not happen (except when the data has extreme outliers)
 			// we will use the moving avg of the previous period series in this case
-			zap.L().Warn("predictedValue is less than 0", zap.Float64("predictedValue", predictedValue), zap.Any("labels", series.Labels))
+			slog.Warn("predicted value is less than 0", "predicted_value", predictedValue, "labels", series.Labels)
 			predictedValue = p.getMovingAvg(prevSeries, movingAvgWindowSize, idx)
 		}
 
-		zap.L().Debug("predictedSeries",
-			zap.Float64("movingAvg", movingAvg),
-			zap.Float64("avg", avg),
-			zap.Float64("mean", mean),
-			zap.Any("labels", series.Labels),
-			zap.Float64("predictedValue", predictedValue),
-			zap.Float64("curr", curr.Value),
+		slog.Debug("predicted series",
+			"moving_avg", movingAvg,
+			"avg", avg,
+			"mean", mean,
+			"labels", series.Labels,
+			"predicted_value", predictedValue,
+			"curr", curr.Value,
 		)
 		predictedSeries.Points = append(predictedSeries.Points, v3.Point{
 			Timestamp: curr.Timestamp,
@@ -418,7 +418,7 @@ func (p *BaseSeasonalProvider) getAnomalies(ctx context.Context, orgID valuer.UU
 
 		for _, series := range result.Series {
 			stdDev := p.getStdDev(series)
-			zap.L().Info("stdDev", zap.Float64("stdDev", stdDev), zap.Any("labels", series.Labels))
+			slog.InfoContext(ctx, "computed standard deviation", "std_dev", stdDev, "labels", series.Labels)
 
 			pastPeriodSeries := p.getMatchingSeries(pastPeriodResult, series)
 			currentSeasonSeries := p.getMatchingSeries(currentSeasonResult, series)
@@ -431,7 +431,7 @@ func (p *BaseSeasonalProvider) getAnomalies(ctx context.Context, orgID valuer.UU
 			pastSeasonSeriesAvg := p.getAvg(pastSeasonSeries)
 			past2SeasonSeriesAvg := p.getAvg(past2SeasonSeries)
 			past3SeasonSeriesAvg := p.getAvg(past3SeasonSeries)
-			zap.L().Info("getAvg", zap.Float64("prevSeriesAvg", prevSeriesAvg), zap.Float64("currentSeasonSeriesAvg", currentSeasonSeriesAvg), zap.Float64("pastSeasonSeriesAvg", pastSeasonSeriesAvg), zap.Float64("past2SeasonSeriesAvg", past2SeasonSeriesAvg), zap.Float64("past3SeasonSeriesAvg", past3SeasonSeriesAvg), zap.Any("labels", series.Labels))
+			slog.InfoContext(ctx, "computed averages", "prev_series_avg", prevSeriesAvg, "current_season_series_avg", currentSeasonSeriesAvg, "past_season_series_avg", pastSeasonSeriesAvg, "past_2_season_series_avg", past2SeasonSeriesAvg, "past_3_season_series_avg", past3SeasonSeriesAvg, "labels", series.Labels)
 
 			predictedSeries := p.getPredictedSeries(
 				series,

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

@@ -10,6 +10,8 @@ import (
 	"strings"
 	"time"
 
+	"log/slog"
+
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/modules/user"
@@ -18,7 +20,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/gorilla/mux"
-	"go.uber.org/zap"
 )
 
 type CloudIntegrationConnectionParamsResponse struct {
@@ -71,7 +72,7 @@ func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseW
 		// Return the API Key (PAT) even if the rest of the params can not be deduced.
 		// Params not returned from here will be requested from the user via form inputs.
 		// This enables gracefully degraded but working experience even for non-cloud deployments.
-		zap.L().Info("ingestion params and signoz api url can not be deduced since no license was found")
+		slog.InfoContext(r.Context(), "ingestion params and signoz api url can not be deduced since no license was found")
 		ah.Respond(w, result)
 		return
 	}
@@ -103,7 +104,7 @@ func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseW
 		result.IngestionKey = ingestionKey
 
 	} else {
-		zap.L().Info("ingestion key can't be deduced since no gateway url has been configured")
+		slog.InfoContext(r.Context(), "ingestion key can't be deduced since no gateway url has been configured")
 	}
 
 	ah.Respond(w, result)
@@ -138,9 +139,8 @@ func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId
 		}
 	}
 
-	zap.L().Info(
-		"no PAT found for cloud integration, creating a new one",
-		zap.String("cloudProvider", cloudProvider),
+	slog.InfoContext(ctx, "no PAT found for cloud integration, creating a new one",
+		"cloud_provider", cloudProvider,
 	)
 
 	newPAT, err := types.NewStorableAPIKey(
@@ -170,14 +170,19 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 	cloudIntegrationUserName := fmt.Sprintf("%s-integration", cloudProvider)
 	email := valuer.MustNewEmail(fmt.Sprintf("%s@signoz.io", cloudIntegrationUserName))
 
-	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, types.RoleViewer, valuer.MustNewUUID(orgId), types.UserStatusActive)
+	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, valuer.MustNewUUID(orgId), types.UserStatusActive)
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
 	}
 
 	password := types.MustGenerateFactorPassword(cloudIntegrationUser.ID.StringValue())
 
-	cloudIntegrationUser, err = ah.Signoz.Modules.User.GetOrCreateUser(ctx, cloudIntegrationUser, user.WithFactorPassword(password))
+	cloudIntegrationUser, err = ah.Signoz.Modules.User.GetOrCreateUser(
+		ctx,
+		cloudIntegrationUser,
+		user.WithFactorPassword(password),
+		user.WithRoleNames([]string{authtypes.SigNozViewerRoleName}),
+	)
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't look for integration user: %w", err))
 	}
@@ -287,9 +292,8 @@ func getOrCreateCloudProviderIngestionKey(
 		}
 	}
 
-	zap.L().Info(
-		"no existing ingestion key found for cloud integration, creating a new one",
-		zap.String("cloudProvider", cloudProvider),
+	slog.InfoContext(ctx, "no existing ingestion key found for cloud integration, creating a new one",
+		"cloud_provider", cloudProvider,
 	)
 	createKeyResult, apiErr := requestGateway[createIngestionKeyResponse](
 		ctx, gatewayUrl, licenseKey, "/v1/workspaces/me/keys",

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

@@ -15,7 +15,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	"github.com/SigNoz/signoz/pkg/types/licensetypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"go.uber.org/zap"
+	"log/slog"
 )
 
 func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
@@ -35,23 +35,23 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 	}
 
 	if constants.FetchFeatures == "true" {
-		zap.L().Debug("fetching license")
+		slog.DebugContext(ctx, "fetching license")
 		license, err := ah.Signoz.Licensing.GetActive(ctx, orgID)
 		if err != nil {
-			zap.L().Error("failed to fetch license", zap.Error(err))
+			slog.ErrorContext(ctx, "failed to fetch license", "error", err)
 		} else if license == nil {
-			zap.L().Debug("no active license found")
+			slog.DebugContext(ctx, "no active license found")
 		} else {
 			licenseKey := license.Key
 
-			zap.L().Debug("fetching zeus features")
+			slog.DebugContext(ctx, "fetching zeus features")
 			zeusFeatures, err := fetchZeusFeatures(constants.ZeusFeaturesURL, licenseKey)
 			if err == nil {
-				zap.L().Debug("fetched zeus features", zap.Any("features", zeusFeatures))
+				slog.DebugContext(ctx, "fetched zeus features", "features", zeusFeatures)
 				// merge featureSet and zeusFeatures in featureSet with higher priority to zeusFeatures
 				featureSet = MergeFeatureSets(zeusFeatures, featureSet)
 			} else {
-				zap.L().Error("failed to fetch zeus features", zap.Error(err))
+				slog.ErrorContext(ctx, "failed to fetch zeus features", "error", err)
 			}
 		}
 	}

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

@@ -14,7 +14,7 @@ import (
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"go.uber.org/zap"
+	"log/slog"
 )
 
 func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
@@ -35,7 +35,7 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 	queryRangeParams, apiErrorObj := baseapp.ParseQueryRangeParams(r)
 
 	if apiErrorObj != nil {
-		zap.L().Error("error parsing metric query range params", zap.Error(apiErrorObj.Err))
+		slog.ErrorContext(r.Context(), "error parsing metric query range params", "error", apiErrorObj.Err)
 		RespondError(w, apiErrorObj, nil)
 		return
 	}
@@ -44,7 +44,7 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 	// add temporality for each metric
 	temporalityErr := aH.PopulateTemporality(r.Context(), orgID, queryRangeParams)
 	if temporalityErr != nil {
-		zap.L().Error("Error while adding temporality for metrics", zap.Error(temporalityErr))
+		slog.ErrorContext(r.Context(), "error while adding temporality for metrics", "error", temporalityErr)
 		RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: temporalityErr}, nil)
 		return
 	}

ee/query-service/app/server.go

@@ -47,7 +47,7 @@ import (
 	baseint "github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/query-service/utils"
-	"go.uber.org/zap"
+	"log/slog"
 )
 
 // Server runs HTTP, Mux and a grpc server
@@ -83,6 +83,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	}
 
 	reader := clickhouseReader.NewReader(
+		signoz.Instrumentation.Logger(),
 		signoz.SQLStore,
 		signoz.TelemetryStore,
 		signoz.Prometheus,
@@ -216,8 +217,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		}),
 		otelmux.WithPublicEndpoint(),
 	))
-	r.Use(middleware.NewAuthN([]string{"Authorization", "Sec-WebSocket-Protocol"}, s.signoz.Sharder, s.signoz.Tokenizer, s.signoz.Instrumentation.Logger()).Wrap)
-	r.Use(middleware.NewAPIKey(s.signoz.SQLStore, []string{"SIGNOZ-API-KEY"}, s.signoz.Instrumentation.Logger(), s.signoz.Sharder).Wrap)
+	r.Use(middleware.NewIdentN(s.signoz.IdentNResolver, s.signoz.Sharder, s.signoz.Instrumentation.Logger()).Wrap)
 	r.Use(middleware.NewTimeout(s.signoz.Instrumentation.Logger(),
 		s.config.APIServer.Timeout.ExcludedRoutes,
 		s.config.APIServer.Timeout.Default,
@@ -278,7 +278,7 @@ func (s *Server) initListeners() error {
 		return err
 	}
 
-	zap.L().Info(fmt.Sprintf("Query server started listening on %s...", s.httpHostPort))
+	slog.Info(fmt.Sprintf("Query server started listening on %s...", s.httpHostPort))
 
 	return nil
 }
@@ -298,31 +298,31 @@ func (s *Server) Start(ctx context.Context) error {
 	}
 
 	go func() {
-		zap.L().Info("Starting HTTP server", zap.Int("port", httpPort), zap.String("addr", s.httpHostPort))
+		slog.Info("Starting HTTP server", "port", httpPort, "addr", s.httpHostPort)
 
 		switch err := s.httpServer.Serve(s.httpConn); err {
 		case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
 			// normal exit, nothing to do
 		default:
-			zap.L().Error("Could not start HTTP server", zap.Error(err))
+			slog.Error("Could not start HTTP server", "error", err)
 		}
 		s.unavailableChannel <- healthcheck.Unavailable
 	}()
 
 	go func() {
-		zap.L().Info("Starting pprof server", zap.String("addr", baseconst.DebugHttpPort))
+		slog.Info("Starting pprof server", "addr", baseconst.DebugHttpPort)
 
 		err = http.ListenAndServe(baseconst.DebugHttpPort, nil)
 		if err != nil {
-			zap.L().Error("Could not start pprof server", zap.Error(err))
+			slog.Error("Could not start pprof server", "error", err)
 		}
 	}()
 
 	go func() {
-		zap.L().Info("Starting OpAmp Websocket server", zap.String("addr", baseconst.OpAmpWsEndpoint))
+		slog.Info("Starting OpAmp Websocket server", "addr", baseconst.OpAmpWsEndpoint)
 		err := s.opampServer.Start(baseconst.OpAmpWsEndpoint)
 		if err != nil {
-			zap.L().Error("opamp ws server failed to start", zap.Error(err))
+			slog.Error("opamp ws server failed to start", "error", err)
 			s.unavailableChannel <- healthcheck.Unavailable
 		}
 	}()
@@ -358,10 +358,9 @@ func makeRulesManager(ch baseint.Reader, cache cache.Cache, alertmanager alertma
 		MetadataStore:       metadataStore,
 		Prometheus:          prometheus,
 		Context:             context.Background(),
-		Logger:              zap.L(),
 		Reader:              ch,
 		Querier:             querier,
-		SLogger:             providerSettings.Logger,
+		Logger:              providerSettings.Logger,
 		Cache:               cache,
 		EvalDelay:           baseconst.GetEvalDelay(),
 		PrepareTaskFunc:     rules.PrepareTaskFunc,
@@ -380,7 +379,7 @@ func makeRulesManager(ch baseint.Reader, cache cache.Cache, alertmanager alertma
 		return nil, fmt.Errorf("rule manager error: %v", err)
 	}
 
-	zap.L().Info("rules manager is ready")
+	slog.Info("rules manager is ready")
 
 	return manager, nil
 }

ee/query-service/rules/anomaly_test.go

@@ -2,6 +2,7 @@ package rules
 
 import (
 	"context"
+	"log/slog"
 	"testing"
 	"time"
 
@@ -116,7 +117,7 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 
 			telemetryStore := telemetrystoretest.New(telemetrystore.Config{}, nil)
 			options := clickhouseReader.NewOptions("primaryNamespace")
-			reader := clickhouseReader.NewReader(nil, telemetryStore, nil, "", time.Second, nil, nil, options)
+			reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, nil, "", time.Second, nil, nil, options)
 
 			rule, err := NewAnomalyRule(
 				"test-anomaly-rule",
@@ -247,7 +248,7 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 
 			telemetryStore := telemetrystoretest.New(telemetrystore.Config{}, nil)
 			options := clickhouseReader.NewOptions("primaryNamespace")
-			reader := clickhouseReader.NewReader(nil, telemetryStore, nil, "", time.Second, nil, nil, options)
+			reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, nil, "", time.Second, nil, nil, options)
 
 			rule, err := NewAnomalyRule("test-anomaly-rule", valuer.GenerateUUID(), &postableRule, reader, nil, logger, nil)
 			require.NoError(t, err)

ee/query-service/rules/manager.go

@@ -13,7 +13,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/google/uuid"
-	"go.uber.org/zap"
+	"log/slog"
 )
 
 func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error) {
@@ -34,7 +34,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 			opts.Rule,
 			opts.Reader,
 			opts.Querier,
-			opts.SLogger,
+			opts.Logger,
 			baserules.WithEvalDelay(opts.ManagerOpts.EvalDelay),
 			baserules.WithSQLStore(opts.SQLStore),
 			baserules.WithQueryParser(opts.ManagerOpts.QueryParser),
@@ -57,7 +57,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 			ruleId,
 			opts.OrgID,
 			opts.Rule,
-			opts.SLogger,
+			opts.Logger,
 			opts.Reader,
 			opts.ManagerOpts.Prometheus,
 			baserules.WithSQLStore(opts.SQLStore),
@@ -82,7 +82,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 			opts.Rule,
 			opts.Reader,
 			opts.Querier,
-			opts.SLogger,
+			opts.Logger,
 			opts.Cache,
 			baserules.WithEvalDelay(opts.ManagerOpts.EvalDelay),
 			baserules.WithSQLStore(opts.SQLStore),
@@ -142,7 +142,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			parsedRule,
 			opts.Reader,
 			opts.Querier,
-			opts.SLogger,
+			opts.Logger,
 			baserules.WithSendAlways(),
 			baserules.WithSendUnmatched(),
 			baserules.WithSQLStore(opts.SQLStore),
@@ -151,7 +151,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 		)
 
 		if err != nil {
-			zap.L().Error("failed to prepare a new threshold rule for test", zap.String("name", alertname), zap.Error(err))
+			slog.Error("failed to prepare a new threshold rule for test", "name", alertname, "error", err)
 			return 0, basemodel.BadRequest(err)
 		}
 
@@ -162,7 +162,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			alertname,
 			opts.OrgID,
 			parsedRule,
-			opts.SLogger,
+			opts.Logger,
 			opts.Reader,
 			opts.ManagerOpts.Prometheus,
 			baserules.WithSendAlways(),
@@ -173,7 +173,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 		)
 
 		if err != nil {
-			zap.L().Error("failed to prepare a new promql rule for test", zap.String("name", alertname), zap.Error(err))
+			slog.Error("failed to prepare a new promql rule for test", "name", alertname, "error", err)
 			return 0, basemodel.BadRequest(err)
 		}
 	} else if parsedRule.RuleType == ruletypes.RuleTypeAnomaly {
@@ -184,7 +184,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			parsedRule,
 			opts.Reader,
 			opts.Querier,
-			opts.SLogger,
+			opts.Logger,
 			opts.Cache,
 			baserules.WithSendAlways(),
 			baserules.WithSendUnmatched(),
@@ -193,7 +193,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			baserules.WithMetadataStore(opts.ManagerOpts.MetadataStore),
 		)
 		if err != nil {
-			zap.L().Error("failed to prepare a new anomaly rule for test", zap.String("name", alertname), zap.Error(err))
+			slog.Error("failed to prepare a new anomaly rule for test", "name", alertname, "error", err)
 			return 0, basemodel.BadRequest(err)
 		}
 	} else {
@@ -205,7 +205,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 
 	alertsFound, err := rule.Eval(ctx, ts)
 	if err != nil {
-		zap.L().Error("evaluating rule failed", zap.String("rule", rule.Name()), zap.Error(err))
+		slog.Error("evaluating rule failed", "rule", rule.Name(), "error", err)
 		return 0, basemodel.InternalError(fmt.Errorf("rule evaluation failed"))
 	}
 	rule.SendAlerts(ctx, ts, 0, time.Minute, opts.NotifyFunc)

ee/query-service/rules/manager_test.go

@@ -80,6 +80,21 @@ func TestManager_TestNotification_SendUnmatched_ThresholdRule(t *testing.T) {
 					alertDataRows := cmock.NewRows(cols, tc.Values)
 
 					mock := telemetryStore.Mock()
+					// Mock metadata queries for FetchTemporalityAndTypeMulti
+					// First query: fetchMetricsTemporalityAndType (from signoz_metrics time series table)
+					metadataCols := []cmock.ColumnType{
+						{Name: "metric_name", Type: "String"},
+						{Name: "temporality", Type: "String"},
+						{Name: "type", Type: "String"},
+						{Name: "is_monotonic", Type: "Bool"},
+					}
+					metadataRows := cmock.NewRows(metadataCols, [][]any{
+						{"probe_success", metrictypes.Unspecified, metrictypes.GaugeType, false},
+					})
+					mock.ExpectQuery("*distributed_time_series_v4*").WithArgs(nil, nil, nil).WillReturnRows(metadataRows)
+					// Second query: fetchMeterSourceMetricsTemporalityAndType (from signoz_meter table)
+					emptyMetadataRows := cmock.NewRows(metadataCols, [][]any{})
+					mock.ExpectQuery("*meter*").WithArgs(nil).WillReturnRows(emptyMetadataRows)
 
 					// Generate query arguments for the metric query
 					evalTime := time.Now().UTC()

ee/query-service/usage/manager.go

@@ -8,12 +8,12 @@ import (
 	"sync/atomic"
 	"time"
 
+	"log/slog"
+
 	"github.com/ClickHouse/clickhouse-go/v2"
 	"github.com/go-co-op/gocron"
 	"github.com/google/uuid"
 
-	"go.uber.org/zap"
-
 	"github.com/SigNoz/signoz/ee/query-service/model"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
@@ -76,19 +76,19 @@ func (lm *Manager) Start(ctx context.Context) error {
 func (lm *Manager) UploadUsage(ctx context.Context) {
 	organizations, err := lm.orgGetter.ListByOwnedKeyRange(ctx)
 	if err != nil {
-		zap.L().Error("failed to get organizations", zap.Error(err))
+		slog.ErrorContext(ctx, "failed to get organizations", "error", err)
 		return
 	}
 	for _, organization := range organizations {
 		// check if license is present or not
 		license, err := lm.licenseService.GetActive(ctx, organization.ID)
 		if err != nil {
-			zap.L().Error("failed to get active license", zap.Error(err))
+			slog.ErrorContext(ctx, "failed to get active license", "error", err)
 			return
 		}
 		if license == nil {
 			// we will not start the usage reporting if license is not present.
-			zap.L().Info("no license present, skipping usage reporting")
+			slog.InfoContext(ctx, "no license present, skipping usage reporting")
 			return
 		}
 
@@ -115,7 +115,7 @@ func (lm *Manager) UploadUsage(ctx context.Context) {
 			dbusages := []model.UsageDB{}
 			err := lm.clickhouseConn.Select(ctx, &dbusages, fmt.Sprintf(query, db, db), time.Now().Add(-(24 * time.Hour)))
 			if err != nil && !strings.Contains(err.Error(), "doesn't exist") {
-				zap.L().Error("failed to get usage from clickhouse: %v", zap.Error(err))
+				slog.ErrorContext(ctx, "failed to get usage from clickhouse", "error", err)
 				return
 			}
 			for _, u := range dbusages {
@@ -125,24 +125,24 @@ func (lm *Manager) UploadUsage(ctx context.Context) {
 		}
 
 		if len(usages) <= 0 {
-			zap.L().Info("no snapshots to upload, skipping.")
+			slog.InfoContext(ctx, "no snapshots to upload, skipping")
 			return
 		}
 
-		zap.L().Info("uploading usage data")
+		slog.InfoContext(ctx, "uploading usage data")
 
 		usagesPayload := []model.Usage{}
 		for _, usage := range usages {
 			usageDataBytes, err := encryption.Decrypt([]byte(usage.ExporterID[:32]), []byte(usage.Data))
 			if err != nil {
-				zap.L().Error("error while decrypting usage data: %v", zap.Error(err))
+				slog.ErrorContext(ctx, "error while decrypting usage data", "error", err)
 				return
 			}
 
 			usageData := model.Usage{}
 			err = json.Unmarshal(usageDataBytes, &usageData)
 			if err != nil {
-				zap.L().Error("error while unmarshalling usage data: %v", zap.Error(err))
+				slog.ErrorContext(ctx, "error while unmarshalling usage data", "error", err)
 				return
 			}
 
@@ -163,13 +163,13 @@ func (lm *Manager) UploadUsage(ctx context.Context) {
 
 		body, errv2 := json.Marshal(payload)
 		if errv2 != nil {
-			zap.L().Error("error while marshalling usage payload: %v", zap.Error(errv2))
+			slog.ErrorContext(ctx, "error while marshalling usage payload", "error", errv2)
 			return
 		}
 
 		errv2 = lm.zeus.PutMeters(ctx, payload.LicenseKey.String(), body)
 		if errv2 != nil {
-			zap.L().Error("failed to upload usage: %v", zap.Error(errv2))
+			slog.ErrorContext(ctx, "failed to upload usage", "error", errv2)
 			// not returning error here since it is captured in the failed count
 			return
 		}
@@ -179,7 +179,7 @@ func (lm *Manager) UploadUsage(ctx context.Context) {
 func (lm *Manager) Stop(ctx context.Context) {
 	lm.scheduler.Stop()
 
-	zap.L().Info("sending usage data before shutting down")
+	slog.InfoContext(ctx, "sending usage data before shutting down")
 	// send usage before shutting down
 	lm.UploadUsage(ctx)
 	atomic.StoreUint32(&locker, stateUnlocked)

ee/sqlschema/postgressqlschema/provider.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"database/sql"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/sqlschema"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
@@ -32,9 +33,9 @@ func New(ctx context.Context, providerSettings factory.ProviderSettings, config
 		fmter:    fmter,
 		settings: settings,
 		operator: sqlschema.NewOperator(fmter, sqlschema.OperatorSupport{
-			DropConstraint:          true,
-			ColumnIfNotExistsExists: true,
-			AlterColumnSetNotNull:   true,
+			SCreateAndDropConstraint:                        true,
+			SAlterTableAddAndDropColumnIfNotExistsAndExists: true,
+			SAlterTableAlterColumnSetAndDrop:                true,
 		}),
 	}, nil
 }
@@ -72,8 +73,9 @@ WHERE
 	if err != nil {
 		return nil, nil, err
 	}
+
 	if len(columns) == 0 {
-		return nil, nil, sql.ErrNoRows
+		return nil, nil, provider.sqlstore.WrapNotFoundErrf(sql.ErrNoRows, errors.CodeNotFound, "table (%s) not found", tableName)
 	}
 
 	sqlschemaColumns := make([]*sqlschema.Column, 0)
@@ -220,7 +222,9 @@ SELECT
     ci.relname AS index_name,
     i.indisunique AS unique,
     i.indisprimary AS primary,
-    a.attname AS column_name
+    a.attname AS column_name,
+    array_position(i.indkey, a.attnum) AS column_position,
+    pg_get_expr(i.indpred, i.indrelid) AS predicate
 FROM
     pg_index i
     LEFT JOIN pg_class ct ON ct.oid = i.indrelid
@@ -231,9 +235,10 @@ WHERE
     a.attnum = ANY(i.indkey)
     AND con.oid IS NULL
     AND ct.relkind = 'r'
-    AND ct.relname = ?`, string(name))
+    AND ct.relname = ?
+ORDER BY index_name, column_position`, string(name))
 	if err != nil {
-		return nil, err
+		return nil, provider.sqlstore.WrapNotFoundErrf(err, errors.CodeNotFound, "no indices for table (%s) found", name)
 	}
 
 	defer func() {
@@ -242,7 +247,12 @@ WHERE
 		}
 	}()
 
-	uniqueIndicesMap := make(map[string]*sqlschema.UniqueIndex)
+	type indexEntry struct {
+		columns   []sqlschema.ColumnName
+		predicate *string
+	}
+
+	uniqueIndicesMap := make(map[string]*indexEntry)
 	for rows.Next() {
 		var (
 			tableName  string
@@ -250,27 +260,53 @@ WHERE
 			unique     bool
 			primary    bool
 			columnName string
+			// starts from 0 and is unused in this function, this is to ensure that the column names are in the correct order
+			columnPosition int
+			predicate      *string
 		)
 
-		if err := rows.Scan(&tableName, &indexName, &unique, &primary, &columnName); err != nil {
+		if err := rows.Scan(&tableName, &indexName, &unique, &primary, &columnName, &columnPosition, &predicate); err != nil {
 			return nil, err
 		}
 
 		if unique {
 			if _, ok := uniqueIndicesMap[indexName]; !ok {
-				uniqueIndicesMap[indexName] = &sqlschema.UniqueIndex{
-					TableName:   name,
-					ColumnNames: []sqlschema.ColumnName{sqlschema.ColumnName(columnName)},
+				uniqueIndicesMap[indexName] = &indexEntry{
+					columns:   []sqlschema.ColumnName{sqlschema.ColumnName(columnName)},
+					predicate: predicate,
 				}
 			} else {
-				uniqueIndicesMap[indexName].ColumnNames = append(uniqueIndicesMap[indexName].ColumnNames, sqlschema.ColumnName(columnName))
+				uniqueIndicesMap[indexName].columns = append(uniqueIndicesMap[indexName].columns, sqlschema.ColumnName(columnName))
 			}
 		}
 	}
 
 	indices := make([]sqlschema.Index, 0)
-	for _, index := range uniqueIndicesMap {
-		indices = append(indices, index)
+	for indexName, entry := range uniqueIndicesMap {
+		if entry.predicate != nil {
+			index := &sqlschema.PartialUniqueIndex{
+				TableName:   name,
+				ColumnNames: entry.columns,
+				Where:       *entry.predicate,
+			}
+
+			if index.Name() == indexName {
+				indices = append(indices, index)
+			} else {
+				indices = append(indices, index.Named(indexName))
+			}
+		} else {
+			index := &sqlschema.UniqueIndex{
+				TableName:   name,
+				ColumnNames: entry.columns,
+			}
+
+			if index.Name() == indexName {
+				indices = append(indices, index)
+			} else {
+				indices = append(indices, index.Named(indexName))
+			}
+		}
 	}
 
 	return indices, nil

ee/sqlstore/postgressqlstore/provider.go

@@ -101,7 +101,7 @@ func (provider *provider) WrapNotFoundErrf(err error, code errors.Code, format s
 
 func (provider *provider) WrapAlreadyExistsErrf(err error, code errors.Code, format string, args ...any) error {
 	var pgErr *pgconn.PgError
-	if errors.As(err, &pgErr) && pgErr.Code == "23505" {
+	if errors.As(err, &pgErr) && (pgErr.Code == "23505" || pgErr.Code == "23503") {
 		return errors.Wrapf(err, errors.TypeAlreadyExists, code, format, args...)
 	}
 

frontend/.eslintrc.cjs

@@ -193,6 +193,16 @@ module.exports = {
 				],
 			},
 		],
+		'no-restricted-syntax': [
+			'error',
+			{
+				selector:
+					// TODO: Make this generic on removal of redux
+					"CallExpression[callee.property.name='getState'][callee.object.name=/^use/]",
+				message:
+					'Avoid calling .getState() directly. Export a standalone action from the store instead.',
+			},
+		],
 	},
 	overrides: [
 		{
@@ -217,5 +227,13 @@ module.exports = {
 				'@typescript-eslint/no-unused-vars': 'warn',
 			},
 		},
+		{
+			// Store definition files are the only place .getState() is permitted —
+			// they are the canonical source for standalone action exports.
+			files: ['**/*Store.{ts,tsx}'],
+			rules: {
+				'no-restricted-syntax': 'off',
+			},
+		},
 	],
 };

frontend/__mocks__/resizableMock.tsx

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+
+type CommonProps = PropsWithChildren<{
+	className?: string;
+	minSize?: number;
+	maxSize?: number;
+	defaultSize?: number;
+	direction?: 'horizontal' | 'vertical';
+	autoSaveId?: string;
+	withHandle?: boolean;
+}>;
+
+export function ResizablePanelGroup({
+	children,
+	className,
+}: CommonProps): JSX.Element {
+	return <div className={className}>{children}</div>;
+}
+
+export function ResizablePanel({
+	children,
+	className,
+}: CommonProps): JSX.Element {
+	return <div className={className}>{children}</div>;
+}
+
+export function ResizableHandle({ className }: CommonProps): JSX.Element {
+	return <div className={className} />;
+}

frontend/jest.config.ts

@@ -14,6 +14,7 @@ const config: Config.InitialOptions = {
 		'\\.(css|less|scss)$': '<rootDir>/__mocks__/cssMock.ts',
 		'\\.md$': '<rootDir>/__mocks__/cssMock.ts',
 		'^uplot$': '<rootDir>/__mocks__/uplotMock.ts',
+		'^@signozhq/resizable$': '<rootDir>/__mocks__/resizableMock.tsx',
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
@@ -23,7 +24,8 @@ const config: Config.InitialOptions = {
 			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
-		'^@signozhq/([^/]+)$': '<rootDir>/node_modules/@signozhq/$1/dist/$1.js',
+		'^@signozhq/(?!ui$)([^/]+)$':
+			'<rootDir>/node_modules/@signozhq/$1/dist/$1.js',
 	},
 	extensionsToTreatAsEsm: ['.ts'],
 	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],

frontend/package.json

@@ -11,6 +11,7 @@
     "prettify": "prettier --write .",
     "fmt": "prettier --check .",
     "lint": "eslint ./src",
+    "lint:generated": "eslint ./src/api/generated --fix",
     "lint:fix": "eslint ./src --fix",
     "jest": "jest",
     "jest:coverage": "jest --coverage",
@@ -64,8 +65,9 @@
     "@signozhq/sonner": "0.1.0",
     "@signozhq/switch": "0.0.2",
     "@signozhq/table": "0.3.7",
-    "@signozhq/toggle-group": "^0.0.1",
+    "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
+    "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.20.6",
     "@tanstack/react-virtual": "3.11.2",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -135,6 +137,7 @@
     "react-full-screen": "1.1.1",
     "react-grid-layout": "^1.3.4",
     "react-helmet-async": "1.3.0",
+    "react-hook-form": "7.71.2",
     "react-i18next": "^11.16.1",
     "react-lottie": "1.2.10",
     "react-markdown": "8.0.7",
@@ -283,4 +286,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

frontend/public/locales/en-GB/routes.json

@@ -15,5 +15,6 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
-	"members": "Members"
+	"members": "Members",
+	"service_accounts": "Service Accounts"
 }

frontend/public/locales/en-GB/titles.json

@@ -50,5 +50,8 @@
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
-	"METER": "SigNoz | Meter"
+	"METER": "SigNoz | Meter",
+	"ROLES_SETTINGS": "SigNoz | Roles",
+	"MEMBERS_SETTINGS": "SigNoz | Members",
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
 }

frontend/public/locales/en/routes.json

@@ -15,5 +15,6 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
-	"members": "Members"
+	"members": "Members",
+	"service_accounts": "Service Accounts"
 }

frontend/public/locales/en/titles.json

@@ -75,5 +75,6 @@
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
-	"MEMBERS_SETTINGS": "SigNoz | Members"
+	"MEMBERS_SETTINGS": "SigNoz | Members",
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
 }

frontend/scripts/post-types-generation.sh

@@ -25,7 +25,7 @@ echo "\n✅ Prettier formatting successful"
 
 # Fix linting issues
 echo "\n\n---\nRunning eslint...\n"
-if ! yarn lint --fix --quiet src/api/generated; then
+if ! yarn lint:generated; then
   echo "ESLint check failed! Please fix linting errors before proceeding."
   exit 1
 fi

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

@@ -21,6 +21,8 @@ import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AuthtypesPatchableObjectsDTO,
+	AuthtypesPatchableRoleDTO,
+	AuthtypesPostableRoleDTO,
 	CreateRole201,
 	DeleteRolePathParameters,
 	GetObjects200,
@@ -31,8 +33,6 @@ import type {
 	PatchObjectsPathParameters,
 	PatchRolePathParameters,
 	RenderErrorResponseDTO,
-	RoletypesPatchableRoleDTO,
-	RoletypesPostableRoleDTO,
 } from '../sigNoz.schemas';
 
 /**
@@ -118,14 +118,14 @@ export const invalidateListRoles = async (
  * @summary Create role
  */
 export const createRole = (
-	roletypesPostableRoleDTO: BodyType<RoletypesPostableRoleDTO>,
+	authtypesPostableRoleDTO: BodyType<AuthtypesPostableRoleDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateRole201>({
 		url: `/api/v1/roles`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: roletypesPostableRoleDTO,
+		data: authtypesPostableRoleDTO,
 		signal,
 	});
 };
@@ -137,13 +137,13 @@ export const getCreateRoleMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRole>>,
 		TError,
-		{ data: BodyType<RoletypesPostableRoleDTO> },
+		{ data: BodyType<AuthtypesPostableRoleDTO> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof createRole>>,
 	TError,
-	{ data: BodyType<RoletypesPostableRoleDTO> },
+	{ data: BodyType<AuthtypesPostableRoleDTO> },
 	TContext
 > => {
 	const mutationKey = ['createRole'];
@@ -157,7 +157,7 @@ export const getCreateRoleMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof createRole>>,
-		{ data: BodyType<RoletypesPostableRoleDTO> }
+		{ data: BodyType<AuthtypesPostableRoleDTO> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -170,7 +170,7 @@ export const getCreateRoleMutationOptions = <
 export type CreateRoleMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createRole>>
 >;
-export type CreateRoleMutationBody = BodyType<RoletypesPostableRoleDTO>;
+export type CreateRoleMutationBody = BodyType<AuthtypesPostableRoleDTO>;
 export type CreateRoleMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -183,13 +183,13 @@ export const useCreateRole = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRole>>,
 		TError,
-		{ data: BodyType<RoletypesPostableRoleDTO> },
+		{ data: BodyType<AuthtypesPostableRoleDTO> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof createRole>>,
 	TError,
-	{ data: BodyType<RoletypesPostableRoleDTO> },
+	{ data: BodyType<AuthtypesPostableRoleDTO> },
 	TContext
 > => {
 	const mutationOptions = getCreateRoleMutationOptions(options);
@@ -370,13 +370,13 @@ export const invalidateGetRole = async (
  */
 export const patchRole = (
 	{ id }: PatchRolePathParameters,
-	roletypesPatchableRoleDTO: BodyType<RoletypesPatchableRoleDTO>,
+	authtypesPatchableRoleDTO: BodyType<AuthtypesPatchableRoleDTO>,
 ) => {
 	return GeneratedAPIInstance<string>({
 		url: `/api/v1/roles/${id}`,
 		method: 'PATCH',
 		headers: { 'Content-Type': 'application/json' },
-		data: roletypesPatchableRoleDTO,
+		data: authtypesPatchableRoleDTO,
 	});
 };
 
@@ -389,7 +389,7 @@ export const getPatchRoleMutationOptions = <
 		TError,
 		{
 			pathParams: PatchRolePathParameters;
-			data: BodyType<RoletypesPatchableRoleDTO>;
+			data: BodyType<AuthtypesPatchableRoleDTO>;
 		},
 		TContext
 	>;
@@ -398,7 +398,7 @@ export const getPatchRoleMutationOptions = <
 	TError,
 	{
 		pathParams: PatchRolePathParameters;
-		data: BodyType<RoletypesPatchableRoleDTO>;
+		data: BodyType<AuthtypesPatchableRoleDTO>;
 	},
 	TContext
 > => {
@@ -415,7 +415,7 @@ export const getPatchRoleMutationOptions = <
 		Awaited<ReturnType<typeof patchRole>>,
 		{
 			pathParams: PatchRolePathParameters;
-			data: BodyType<RoletypesPatchableRoleDTO>;
+			data: BodyType<AuthtypesPatchableRoleDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -429,7 +429,7 @@ export const getPatchRoleMutationOptions = <
 export type PatchRoleMutationResult = NonNullable<
 	Awaited<ReturnType<typeof patchRole>>
 >;
-export type PatchRoleMutationBody = BodyType<RoletypesPatchableRoleDTO>;
+export type PatchRoleMutationBody = BodyType<AuthtypesPatchableRoleDTO>;
 export type PatchRoleMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -444,7 +444,7 @@ export const usePatchRole = <
 		TError,
 		{
 			pathParams: PatchRolePathParameters;
-			data: BodyType<RoletypesPatchableRoleDTO>;
+			data: BodyType<AuthtypesPatchableRoleDTO>;
 		},
 		TContext
 	>;
@@ -453,7 +453,7 @@ export const usePatchRole = <
 	TError,
 	{
 		pathParams: PatchRolePathParameters;
-		data: BodyType<RoletypesPatchableRoleDTO>;
+		data: BodyType<AuthtypesPatchableRoleDTO>;
 	},
 	TContext
 > => {

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

@@ -278,6 +278,13 @@ export interface AuthtypesPatchableObjectsDTO {
 	deletions: AuthtypesGettableObjectsDTO[] | null;
 }
 
+export interface AuthtypesPatchableRoleDTO {
+	/**
+	 * @type string
+	 */
+	description: string;
+}
+
 export interface AuthtypesPostableAuthDomainDTO {
 	config?: AuthtypesAuthDomainConfigDTO;
 	/**
@@ -301,6 +308,17 @@ export interface AuthtypesPostableEmailPasswordSessionDTO {
 	password?: string;
 }
 
+export interface AuthtypesPostableRoleDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
 export interface AuthtypesPostableRotateTokenDTO {
 	/**
 	 * @type string
@@ -319,6 +337,39 @@ export interface AuthtypesResourceDTO {
 	type: string;
 }
 
+export interface AuthtypesRoleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	description: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	/**
+	 * @type string
+	 */
+	type: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+}
+
 /**
  * @nullable
  */
@@ -725,6 +776,45 @@ export interface GatewaytypesUpdatableIngestionKeyLimitDTO {
 	tags?: string[] | null;
 }
 
+export interface GlobaltypesAPIKeyConfigDTO {
+	/**
+	 * @type boolean
+	 */
+	enabled?: boolean;
+}
+
+export interface GlobaltypesConfigDTO {
+	/**
+	 * @type string
+	 */
+	external_url?: string;
+	identN?: GlobaltypesIdentNConfigDTO;
+	/**
+	 * @type string
+	 */
+	ingestion_url?: string;
+}
+
+export interface GlobaltypesIdentNConfigDTO {
+	apikey?: GlobaltypesAPIKeyConfigDTO;
+	impersonation?: GlobaltypesImpersonationConfigDTO;
+	tokenizer?: GlobaltypesTokenizerConfigDTO;
+}
+
+export interface GlobaltypesImpersonationConfigDTO {
+	/**
+	 * @type boolean
+	 */
+	enabled?: boolean;
+}
+
+export interface GlobaltypesTokenizerConfigDTO {
+	/**
+	 * @type boolean
+	 */
+	enabled?: boolean;
+}
+
 export interface MetricsexplorertypesListMetricDTO {
 	/**
 	 * @type string
@@ -2039,57 +2129,6 @@ export interface RenderErrorResponseDTO {
 	status: string;
 }
 
-export interface RoletypesPatchableRoleDTO {
-	/**
-	 * @type string
-	 */
-	description: string;
-}
-
-export interface RoletypesPostableRoleDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-}
-
-export interface RoletypesRoleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	description: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 */
-	type: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-}
-
 export interface ServiceaccounttypesFactorAPIKeyDTO {
 	/**
 	 * @type string
@@ -2345,6 +2384,47 @@ export interface TypesChangePasswordRequestDTO {
 	userId?: string;
 }
 
+export interface TypesDeprecatedUserDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	displayName?: string;
+	/**
+	 * @type string
+	 */
+	email?: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type boolean
+	 */
+	isRoot?: boolean;
+	/**
+	 * @type string
+	 */
+	orgId?: string;
+	/**
+	 * @type string
+	 */
+	role?: string;
+	/**
+	 * @type string
+	 */
+	status?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+}
+
 export interface TypesGettableAPIKeyDTO {
 	/**
 	 * @type string
@@ -2402,17 +2482,6 @@ export interface TypesGettableAPIKeyDTO {
 	userId?: string;
 }
 
-export interface TypesGettableGlobalConfigDTO {
-	/**
-	 * @type string
-	 */
-	external_url?: string;
-	/**
-	 * @type string
-	 */
-	ingestion_url?: string;
-}
-
 export interface TypesIdentifiableDTO {
 	/**
 	 * @type string
@@ -2511,25 +2580,6 @@ export interface TypesPostableAPIKeyDTO {
 	role?: string;
 }
 
-export interface TypesPostableAcceptInviteDTO {
-	/**
-	 * @type string
-	 */
-	displayName?: string;
-	/**
-	 * @type string
-	 */
-	password?: string;
-	/**
-	 * @type string
-	 */
-	sourceUrl?: string;
-	/**
-	 * @type string
-	 */
-	token?: string;
-}
-
 export interface TypesPostableBulkInviteRequestDTO {
 	/**
 	 * @type array
@@ -2673,10 +2723,6 @@ export interface TypesUserDTO {
 	 * @type string
 	 */
 	orgId?: string;
-	/**
-	 * @type string
-	 */
-	role?: string;
 	/**
 	 * @type string
 	 */
@@ -3026,18 +3072,7 @@ export type GetResetPasswordToken200 = {
 };
 
 export type GetGlobalConfig200 = {
-	data: TypesGettableGlobalConfigDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type ListInvite200 = {
-	/**
-	 * @type array
-	 */
-	data: TypesInviteDTO[];
+	data: GlobaltypesConfigDTO;
 	/**
 	 * @type string
 	 */
@@ -3052,28 +3087,6 @@ export type CreateInvite201 = {
 	status: string;
 };
 
-export type DeleteInvitePathParameters = {
-	id: string;
-};
-export type GetInvitePathParameters = {
-	token: string;
-};
-export type GetInvite200 = {
-	data: TypesInviteDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type AcceptInvite201 = {
-	data: TypesUserDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListPromotedAndIndexedPaths200 = {
 	/**
 	 * @type array
@@ -3163,7 +3176,7 @@ export type ListRoles200 = {
 	/**
 	 * @type array
 	 */
-	data: RoletypesRoleDTO[];
+	data: AuthtypesRoleDTO[];
 	/**
 	 * @type string
 	 */
@@ -3185,7 +3198,7 @@ export type GetRolePathParameters = {
 	id: string;
 };
 export type GetRole200 = {
-	data: RoletypesRoleDTO;
+	data: AuthtypesRoleDTO;
 	/**
 	 * @type string
 	 */
@@ -3290,7 +3303,7 @@ export type ListUsers200 = {
 	/**
 	 * @type array
 	 */
-	data: TypesUserDTO[];
+	data: TypesDeprecatedUserDTO[];
 	/**
 	 * @type string
 	 */
@@ -3304,7 +3317,7 @@ export type GetUserPathParameters = {
 	id: string;
 };
 export type GetUser200 = {
-	data: TypesUserDTO;
+	data: TypesDeprecatedUserDTO;
 	/**
 	 * @type string
 	 */
@@ -3315,7 +3328,7 @@ export type UpdateUserPathParameters = {
 	id: string;
 };
 export type UpdateUser200 = {
-	data: TypesUserDTO;
+	data: TypesDeprecatedUserDTO;
 	/**
 	 * @type string
 	 */
@@ -3323,7 +3336,7 @@ export type UpdateUser200 = {
 };
 
 export type GetMyUser200 = {
-	data: TypesUserDTO;
+	data: TypesDeprecatedUserDTO;
 	/**
 	 * @type string
 	 */

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

@@ -20,33 +20,27 @@ import { useMutation, useQuery } from 'react-query';
 import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
-	AcceptInvite201,
 	ChangePasswordPathParameters,
 	CreateAPIKey201,
 	CreateInvite201,
-	DeleteInvitePathParameters,
 	DeleteUserPathParameters,
-	GetInvite200,
-	GetInvitePathParameters,
 	GetMyUser200,
 	GetResetPasswordToken200,
 	GetResetPasswordTokenPathParameters,
 	GetUser200,
 	GetUserPathParameters,
 	ListAPIKeys200,
-	ListInvite200,
 	ListUsers200,
 	RenderErrorResponseDTO,
 	RevokeAPIKeyPathParameters,
 	TypesChangePasswordRequestDTO,
-	TypesPostableAcceptInviteDTO,
+	TypesDeprecatedUserDTO,
 	TypesPostableAPIKeyDTO,
 	TypesPostableBulkInviteRequestDTO,
 	TypesPostableForgotPasswordDTO,
 	TypesPostableInviteDTO,
 	TypesPostableResetPasswordDTO,
 	TypesStorableAPIKeyDTO,
-	TypesUserDTO,
 	UpdateAPIKeyPathParameters,
 	UpdateUser200,
 	UpdateUserPathParameters,
@@ -255,84 +249,6 @@ export const invalidateGetResetPasswordToken = async (
 	return queryClient;
 };
 
-/**
- * This endpoint lists all invites
- * @summary List invites
- */
-export const listInvite = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<ListInvite200>({
-		url: `/api/v1/invite`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListInviteQueryKey = () => {
-	return [`/api/v1/invite`] as const;
-};
-
-export const getListInviteQueryOptions = <
-	TData = Awaited<ReturnType<typeof listInvite>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof listInvite>>, TError, TData>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListInviteQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listInvite>>> = ({
-		signal,
-	}) => listInvite(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listInvite>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListInviteQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listInvite>>
->;
-export type ListInviteQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List invites
- */
-
-export function useListInvite<
-	TData = Awaited<ReturnType<typeof listInvite>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof listInvite>>, TError, TData>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListInviteQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List invites
- */
-export const invalidateListInvite = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListInviteQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
  * This endpoint creates an invite for a user
  * @summary Create invite
@@ -416,257 +332,6 @@ export const useCreateInvite = <
 
 	return useMutation(mutationOptions);
 };
-/**
- * This endpoint deletes an invite by id
- * @summary Delete invite
- */
-export const deleteInvite = ({ id }: DeleteInvitePathParameters) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/invite/${id}`,
-		method: 'DELETE',
-	});
-};
-
-export const getDeleteInviteMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteInvite>>,
-		TError,
-		{ pathParams: DeleteInvitePathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteInvite>>,
-	TError,
-	{ pathParams: DeleteInvitePathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteInvite'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteInvite>>,
-		{ pathParams: DeleteInvitePathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteInvite(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteInviteMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteInvite>>
->;
-
-export type DeleteInviteMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete invite
- */
-export const useDeleteInvite = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteInvite>>,
-		TError,
-		{ pathParams: DeleteInvitePathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteInvite>>,
-	TError,
-	{ pathParams: DeleteInvitePathParameters },
-	TContext
-> => {
-	const mutationOptions = getDeleteInviteMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint gets an invite by token
- * @summary Get invite
- */
-export const getInvite = (
-	{ token }: GetInvitePathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetInvite200>({
-		url: `/api/v1/invite/${token}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetInviteQueryKey = ({ token }: GetInvitePathParameters) => {
-	return [`/api/v1/invite/${token}`] as const;
-};
-
-export const getGetInviteQueryOptions = <
-	TData = Awaited<ReturnType<typeof getInvite>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ token }: GetInvitePathParameters,
-	options?: {
-		query?: UseQueryOptions<Awaited<ReturnType<typeof getInvite>>, TError, TData>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetInviteQueryKey({ token });
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getInvite>>> = ({
-		signal,
-	}) => getInvite({ token }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!token,
-		...queryOptions,
-	} as UseQueryOptions<Awaited<ReturnType<typeof getInvite>>, TError, TData> & {
-		queryKey: QueryKey;
-	};
-};
-
-export type GetInviteQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getInvite>>
->;
-export type GetInviteQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get invite
- */
-
-export function useGetInvite<
-	TData = Awaited<ReturnType<typeof getInvite>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ token }: GetInvitePathParameters,
-	options?: {
-		query?: UseQueryOptions<Awaited<ReturnType<typeof getInvite>>, TError, TData>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetInviteQueryOptions({ token }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get invite
- */
-export const invalidateGetInvite = async (
-	queryClient: QueryClient,
-	{ token }: GetInvitePathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetInviteQueryKey({ token }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint accepts an invite by token
- * @summary Accept invite
- */
-export const acceptInvite = (
-	typesPostableAcceptInviteDTO: BodyType<TypesPostableAcceptInviteDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<AcceptInvite201>({
-		url: `/api/v1/invite/accept`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: typesPostableAcceptInviteDTO,
-		signal,
-	});
-};
-
-export const getAcceptInviteMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof acceptInvite>>,
-		TError,
-		{ data: BodyType<TypesPostableAcceptInviteDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof acceptInvite>>,
-	TError,
-	{ data: BodyType<TypesPostableAcceptInviteDTO> },
-	TContext
-> => {
-	const mutationKey = ['acceptInvite'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof acceptInvite>>,
-		{ data: BodyType<TypesPostableAcceptInviteDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return acceptInvite(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type AcceptInviteMutationResult = NonNullable<
-	Awaited<ReturnType<typeof acceptInvite>>
->;
-export type AcceptInviteMutationBody = BodyType<TypesPostableAcceptInviteDTO>;
-export type AcceptInviteMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Accept invite
- */
-export const useAcceptInvite = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof acceptInvite>>,
-		TError,
-		{ data: BodyType<TypesPostableAcceptInviteDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof acceptInvite>>,
-	TError,
-	{ data: BodyType<TypesPostableAcceptInviteDTO> },
-	TContext
-> => {
-	const mutationOptions = getAcceptInviteMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
 /**
  * This endpoint creates a bulk invite for a user
  * @summary Create bulk invite
@@ -1428,13 +1093,13 @@ export const invalidateGetUser = async (
  */
 export const updateUser = (
 	{ id }: UpdateUserPathParameters,
-	typesUserDTO: BodyType<TypesUserDTO>,
+	typesDeprecatedUserDTO: BodyType<TypesDeprecatedUserDTO>,
 ) => {
 	return GeneratedAPIInstance<UpdateUser200>({
 		url: `/api/v1/user/${id}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
-		data: typesUserDTO,
+		data: typesDeprecatedUserDTO,
 	});
 };
 
@@ -1445,13 +1110,19 @@ export const getUpdateUserMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUser>>,
 		TError,
-		{ pathParams: UpdateUserPathParameters; data: BodyType<TypesUserDTO> },
+		{
+			pathParams: UpdateUserPathParameters;
+			data: BodyType<TypesDeprecatedUserDTO>;
+		},
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof updateUser>>,
 	TError,
-	{ pathParams: UpdateUserPathParameters; data: BodyType<TypesUserDTO> },
+	{
+		pathParams: UpdateUserPathParameters;
+		data: BodyType<TypesDeprecatedUserDTO>;
+	},
 	TContext
 > => {
 	const mutationKey = ['updateUser'];
@@ -1465,7 +1136,10 @@ export const getUpdateUserMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof updateUser>>,
-		{ pathParams: UpdateUserPathParameters; data: BodyType<TypesUserDTO> }
+		{
+			pathParams: UpdateUserPathParameters;
+			data: BodyType<TypesDeprecatedUserDTO>;
+		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
 
@@ -1478,7 +1152,7 @@ export const getUpdateUserMutationOptions = <
 export type UpdateUserMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateUser>>
 >;
-export type UpdateUserMutationBody = BodyType<TypesUserDTO>;
+export type UpdateUserMutationBody = BodyType<TypesDeprecatedUserDTO>;
 export type UpdateUserMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -1491,13 +1165,19 @@ export const useUpdateUser = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUser>>,
 		TError,
-		{ pathParams: UpdateUserPathParameters; data: BodyType<TypesUserDTO> },
+		{
+			pathParams: UpdateUserPathParameters;
+			data: BodyType<TypesDeprecatedUserDTO>;
+		},
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof updateUser>>,
 	TError,
-	{ pathParams: UpdateUserPathParameters; data: BodyType<TypesUserDTO> },
+	{
+		pathParams: UpdateUserPathParameters;
+		data: BodyType<TypesDeprecatedUserDTO>;
+	},
 	TContext
 > => {
 	const mutationOptions = getUpdateUserMutationOptions(options);

frontend/src/api/index.ts

@@ -81,7 +81,8 @@ export const interceptorRejected = async (
 				response.config.url !== '/sessions/email_password' &&
 				!(
 					response.config.url === '/sessions' && response.config.method === 'delete'
-				)
+				) &&
+				response.config.url !== '/authz/check'
 			) {
 				try {
 					const accessToken = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN);

frontend/src/api/interceptors.test.ts

@@ -0,0 +1,152 @@
+import axios, { AxiosHeaders, AxiosResponse } from 'axios';
+
+import { interceptorRejected } from './index';
+
+jest.mock('api/browser/localstorage/get', () => ({
+	__esModule: true,
+	default: jest.fn(() => 'mock-token'),
+}));
+
+jest.mock('api/v2/sessions/rotate/post', () => ({
+	__esModule: true,
+	default: jest.fn(() =>
+		Promise.resolve({
+			data: { accessToken: 'new-token', refreshToken: 'new-refresh' },
+		}),
+	),
+}));
+
+jest.mock('AppRoutes/utils', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('axios', () => {
+	const actualAxios = jest.requireActual('axios');
+	const mockAxios = jest.fn().mockResolvedValue({ data: 'success' });
+
+	return {
+		...actualAxios,
+		default: Object.assign(mockAxios, {
+			...actualAxios.default,
+			isAxiosError: jest.fn().mockReturnValue(true),
+			create: actualAxios.create,
+		}),
+		__esModule: true,
+	};
+});
+
+describe('interceptorRejected', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		((axios as unknown) as jest.Mock).mockResolvedValue({ data: 'success' });
+		((axios.isAxiosError as unknown) as jest.Mock).mockReturnValue(true);
+	});
+
+	it('should preserve array payload structure when retrying a 401 request', async () => {
+		const arrayPayload = [
+			{ relation: 'assignee', object: { resource: { name: 'role' } } },
+			{ relation: 'assignee', object: { resource: { name: 'editor' } } },
+		];
+
+		const error = ({
+			response: {
+				status: 401,
+				config: {
+					url: '/some-endpoint',
+					method: 'POST',
+					baseURL: 'http://localhost/',
+					headers: new AxiosHeaders(),
+					data: JSON.stringify(arrayPayload),
+				},
+			},
+			config: {
+				url: '/some-endpoint',
+				method: 'POST',
+				baseURL: 'http://localhost/',
+				headers: new AxiosHeaders(),
+				data: JSON.stringify(arrayPayload),
+			},
+		} as unknown) as AxiosResponse;
+
+		try {
+			await interceptorRejected(error);
+		} catch {
+			// Expected to reject after retry
+		}
+
+		const mockAxiosFn = (axios as unknown) as jest.Mock;
+		expect(mockAxiosFn.mock.calls.length).toBe(1);
+		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
+		expect(Array.isArray(JSON.parse(retryCallConfig.data))).toBe(true);
+		expect(JSON.parse(retryCallConfig.data)).toEqual(arrayPayload);
+	});
+
+	it('should preserve object payload structure when retrying a 401 request', async () => {
+		const objectPayload = { key: 'value', nested: { data: 123 } };
+
+		const error = ({
+			response: {
+				status: 401,
+				config: {
+					url: '/some-endpoint',
+					method: 'POST',
+					baseURL: 'http://localhost/',
+					headers: new AxiosHeaders(),
+					data: JSON.stringify(objectPayload),
+				},
+			},
+			config: {
+				url: '/some-endpoint',
+				method: 'POST',
+				baseURL: 'http://localhost/',
+				headers: new AxiosHeaders(),
+				data: JSON.stringify(objectPayload),
+			},
+		} as unknown) as AxiosResponse;
+
+		try {
+			await interceptorRejected(error);
+		} catch {
+			// Expected to reject after retry
+		}
+
+		const mockAxiosFn = (axios as unknown) as jest.Mock;
+		expect(mockAxiosFn.mock.calls.length).toBe(1);
+		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
+		expect(JSON.parse(retryCallConfig.data)).toEqual(objectPayload);
+	});
+
+	it('should handle undefined data gracefully when retrying', async () => {
+		const error = ({
+			response: {
+				status: 401,
+				config: {
+					url: '/some-endpoint',
+					method: 'GET',
+					baseURL: 'http://localhost/',
+					headers: new AxiosHeaders(),
+					data: undefined,
+				},
+			},
+			config: {
+				url: '/some-endpoint',
+				method: 'GET',
+				baseURL: 'http://localhost/',
+				headers: new AxiosHeaders(),
+				data: undefined,
+			},
+		} as unknown) as AxiosResponse;
+
+		try {
+			await interceptorRejected(error);
+		} catch {
+			// Expected to reject after retry
+		}
+
+		const mockAxiosFn = (axios as unknown) as jest.Mock;
+		expect(mockAxiosFn.mock.calls.length).toBe(1);
+		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
+		expect(retryCallConfig.data).toBeUndefined();
+	});
+});

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

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

frontend/src/api/v1/invite/id/accept.ts

@@ -1,22 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/accept';
-import { UserResponse } from 'types/api/user/getUser';
-
-const accept = async (
-	props: Props,
-): Promise<SuccessResponseV2<UserResponse>> => {
-	try {
-		const response = await axios.post<PayloadProps>(`/invite/accept`, props);
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default accept;

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

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

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

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import {
-	InviteDetails,
-	PayloadProps,
-	Props,
-} from 'types/api/user/getInviteDetails';
-
-const getInviteDetails = async (
-	props: Props,
-): Promise<SuccessResponseV2<InviteDetails>> => {
-	try {
-		const response = await axios.get<PayloadProps>(
-			`/invite/${props.inviteId}?ref=${window.location.href}`,
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getInviteDetails;

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

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

frontend/src/assets/UnAuthorized.tsx

@@ -1,8 +1,14 @@
-function UnAuthorized(): JSX.Element {
+function UnAuthorized({
+	width = 137,
+	height = 137,
+}: {
+	height?: number;
+	width?: number;
+}): JSX.Element {
 	return (
 		<svg
-			width="137"
-			height="137"
+			width={width}
+			height={height}
 			viewBox="0 0 137 137"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"

frontend/src/auto-import-registry.d.ts

@@ -30,3 +30,4 @@ import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/toggle-group';
 import '@signozhq/tooltip';
+import '@signozhq/ui';

frontend/src/components/AnnouncementBanner/AnnouncementBanner.styles.scss

@@ -0,0 +1,97 @@
+.announcement-banner {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-4);
+	padding: var(--padding-2) var(--padding-4);
+	height: 40px;
+	font-family: var(--font-sans), sans-serif;
+	font-size: var(--label-base-500-font-size);
+	line-height: var(--label-base-500-line-height);
+	font-weight: var(--label-base-500-font-weight);
+	letter-spacing: -0.065px;
+
+	&--warning {
+		background-color: var(--callout-warning-background);
+		color: var(--callout-warning-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-warning-border);
+		}
+	}
+
+	&--info {
+		background-color: var(--callout-primary-background);
+		color: var(--callout-primary-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-primary-border);
+		}
+	}
+
+	&--error {
+		background-color: var(--callout-error-background);
+		color: var(--callout-error-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-error-border);
+		}
+	}
+
+	&--success {
+		background-color: var(--callout-success-background);
+		color: var(--callout-success-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-success-border);
+		}
+	}
+
+	&__body {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__icon {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	&__message {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		line-height: var(--line-height-normal);
+
+		strong {
+			font-weight: var(--font-weight-semibold);
+		}
+	}
+
+	&__action {
+		height: 24px;
+		font-size: var(--label-small-500-font-size);
+		color: currentColor;
+
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+
+	&__dismiss {
+		width: 24px;
+		height: 24px;
+		padding: 0;
+		color: currentColor;
+
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+}

frontend/src/components/AnnouncementBanner/AnnouncementBanner.test.tsx

@@ -0,0 +1,89 @@
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import {
+	AnnouncementBanner,
+	AnnouncementBannerProps,
+	PersistedAnnouncementBanner,
+} from './index';
+
+const STORAGE_KEY = 'test-banner-dismissed';
+
+function renderBanner(props: Partial<AnnouncementBannerProps> = {}): void {
+	render(<AnnouncementBanner message="Test message" {...props} />);
+}
+
+afterEach(() => {
+	localStorage.removeItem(STORAGE_KEY);
+});
+
+describe('AnnouncementBanner', () => {
+	it('renders message and default warning variant', () => {
+		renderBanner({ message: <strong>Heads up</strong> });
+
+		const alert = screen.getByRole('alert');
+		expect(alert).toHaveClass('announcement-banner--warning');
+		expect(alert).toHaveTextContent('Heads up');
+	});
+
+	it.each(['warning', 'info', 'success', 'error'] as const)(
+		'renders %s variant correctly',
+		(type) => {
+			renderBanner({ type, message: 'Test message' });
+			const alert = screen.getByRole('alert');
+			expect(alert).toHaveClass(`announcement-banner--${type}`);
+		},
+	);
+
+	it('calls action onClick when action button is clicked', async () => {
+		const onClick = jest.fn() as jest.MockedFunction<() => void>;
+		renderBanner({ action: { label: 'Go to Settings', onClick } });
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		await user.click(screen.getByRole('button', { name: /go to settings/i }));
+
+		expect(onClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('hides dismiss button when onClose is not provided and hides icon when icon is null', () => {
+		renderBanner({ onClose: undefined, icon: null });
+
+		expect(
+			screen.queryByRole('button', { name: /dismiss/i }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('alert')?.querySelector('.announcement-banner__icon'),
+		).not.toBeInTheDocument();
+	});
+});
+
+describe('PersistedAnnouncementBanner', () => {
+	it('dismisses on click, calls onDismiss, and persists to localStorage', async () => {
+		const onDismiss = jest.fn() as jest.MockedFunction<() => void>;
+		render(
+			<PersistedAnnouncementBanner
+				message="Test message"
+				storageKey={STORAGE_KEY}
+				onDismiss={onDismiss}
+			/>,
+		);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		await user.click(screen.getByRole('button', { name: /dismiss/i }));
+
+		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+		expect(onDismiss).toHaveBeenCalledTimes(1);
+		expect(localStorage.getItem(STORAGE_KEY)).toBe('true');
+	});
+
+	it('does not render when storageKey is already set in localStorage', () => {
+		localStorage.setItem(STORAGE_KEY, 'true');
+		render(
+			<PersistedAnnouncementBanner
+				message="Test message"
+				storageKey={STORAGE_KEY}
+			/>,
+		);
+
+		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+	});
+});

frontend/src/components/AnnouncementBanner/AnnouncementBanner.tsx

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+import { Button } from '@signozhq/button';
+import {
+	CircleAlert,
+	CircleCheckBig,
+	Info,
+	TriangleAlert,
+	X,
+} from '@signozhq/icons';
+import cx from 'classnames';
+
+import './AnnouncementBanner.styles.scss';
+
+export type AnnouncementBannerType = 'warning' | 'info' | 'error' | 'success';
+
+export interface AnnouncementBannerAction {
+	label: string;
+	onClick: () => void;
+}
+
+export interface AnnouncementBannerProps {
+	message: ReactNode;
+	type?: AnnouncementBannerType;
+	icon?: ReactNode | null;
+	action?: AnnouncementBannerAction;
+	onClose?: () => void;
+	className?: string;
+}
+
+const DEFAULT_ICONS: Record<AnnouncementBannerType, ReactNode> = {
+	warning: <TriangleAlert size={14} />,
+	info: <Info size={14} />,
+	error: <CircleAlert size={14} />,
+	success: <CircleCheckBig size={14} />,
+};
+
+export default function AnnouncementBanner({
+	message,
+	type = 'warning',
+	icon,
+	action,
+	onClose,
+	className,
+}: AnnouncementBannerProps): JSX.Element {
+	const resolvedIcon = icon === null ? null : icon ?? DEFAULT_ICONS[type];
+
+	return (
+		<div
+			role="alert"
+			className={cx(
+				'announcement-banner',
+				`announcement-banner--${type}`,
+				className,
+			)}
+		>
+			<div className="announcement-banner__body">
+				{resolvedIcon && (
+					<span className="announcement-banner__icon">{resolvedIcon}</span>
+				)}
+				<span className="announcement-banner__message">{message}</span>
+				{action && (
+					<Button
+						type="button"
+						className="announcement-banner__action"
+						onClick={action.onClick}
+					>
+						{action.label}
+					</Button>
+				)}
+			</div>
+
+			{onClose && (
+				<Button
+					type="button"
+					aria-label="Dismiss"
+					className="announcement-banner__dismiss"
+					onClick={onClose}
+				>
+					<X size={14} />
+				</Button>
+			)}
+		</div>
+	);
+}

frontend/src/components/AnnouncementBanner/PersistedAnnouncementBanner.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+import AnnouncementBanner, {
+	AnnouncementBannerProps,
+} from './AnnouncementBanner';
+
+interface PersistedAnnouncementBannerProps extends AnnouncementBannerProps {
+	storageKey: string;
+	onDismiss?: () => void;
+}
+
+function isDismissed(storageKey: string): boolean {
+	return localStorage.getItem(storageKey) === 'true';
+}
+
+export default function PersistedAnnouncementBanner({
+	storageKey,
+	onDismiss,
+	...props
+}: PersistedAnnouncementBannerProps): JSX.Element | null {
+	const [visible, setVisible] = useState(() => !isDismissed(storageKey));
+
+	if (!visible) {
+		return null;
+	}
+
+	const handleClose = (): void => {
+		localStorage.setItem(storageKey, 'true');
+		setVisible(false);
+		onDismiss?.();
+	};
+
+	return <AnnouncementBanner {...props} onClose={handleClose} />;
+}

frontend/src/components/AnnouncementBanner/index.ts

@@ -0,0 +1,12 @@
+import AnnouncementBanner from './AnnouncementBanner';
+import PersistedAnnouncementBanner from './PersistedAnnouncementBanner';
+
+export type {
+	AnnouncementBannerAction,
+	AnnouncementBannerProps,
+	AnnouncementBannerType,
+} from './AnnouncementBanner';
+
+export { AnnouncementBanner, PersistedAnnouncementBanner };
+
+export default AnnouncementBanner;

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss

@@ -0,0 +1,106 @@
+.create-sa-modal {
+	max-width: 530px;
+	background: var(--popover);
+	border: 1px solid var(--secondary);
+	border-radius: 4px;
+	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
+
+	[data-slot='dialog-header'] {
+		padding: var(--padding-4);
+		border-bottom: 1px solid var(--secondary);
+		flex-shrink: 0;
+		background: transparent;
+		margin: 0;
+	}
+
+	[data-slot='dialog-title'] {
+		font-size: var(--label-base-400-font-size);
+		font-weight: var(--label-base-400-font-weight);
+		line-height: var(--label-base-400-line-height);
+		letter-spacing: -0.065px;
+		color: var(--bg-base-white);
+		margin: 0;
+	}
+
+	[data-slot='dialog-description'] {
+		padding: 0;
+
+		.create-sa-modal__content {
+			padding: var(--padding-4);
+		}
+	}
+}
+
+.create-sa-form {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+
+	&__item {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-1);
+		margin-bottom: var(--spacing-4);
+
+		> label {
+			font-size: var(--paragraph-base-400-font-size);
+			font-weight: var(--paragraph-base-400-font-weight);
+			color: var(--foreground);
+			letter-spacing: -0.07px;
+		}
+	}
+
+	&__input {
+		height: 32px;
+		color: var(--l1-foreground);
+		background-color: var(--l2-background);
+		border-color: var(--border);
+		font-size: var(--paragraph-base-400-font-size);
+		border-radius: 2px;
+		width: 100%;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+
+		&:focus {
+			border-color: var(--primary);
+			box-shadow: none;
+		}
+	}
+
+	&__error {
+		font-size: var(--paragraph-small-400-font-size);
+		color: var(--destructive);
+		line-height: var(--paragraph-small-400-line-height);
+		margin: 0;
+	}
+
+	&__helper {
+		font-size: var(--paragraph-small-400-font-size);
+		color: var(--l3-foreground);
+		margin: calc(var(--spacing-2) * -1) 0 var(--spacing-4) 0;
+		line-height: var(--paragraph-small-400-line-height);
+	}
+}
+
+.create-sa-modal__footer {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 var(--padding-4);
+	height: 56px;
+	min-height: 56px;
+	border-top: 1px solid var(--secondary);
+	gap: var(--spacing-4);
+	flex-shrink: 0;
+}
+
+.lightMode {
+	.create-sa-modal {
+		[data-slot='dialog-title'] {
+			color: var(--bg-base-black);
+		}
+	}
+}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -0,0 +1,230 @@
+import { Controller, useForm } from 'react-hook-form';
+import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { X } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/sonner';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	invalidateListServiceAccounts,
+	useCreateServiceAccount,
+} from 'api/generated/services/serviceaccount';
+import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import RolesSelect, { useRoles } from 'components/RolesSelect';
+import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
+import { parseAsBoolean, useQueryState } from 'nuqs';
+import { EMAIL_REGEX } from 'utils/app';
+
+import './CreateServiceAccountModal.styles.scss';
+
+interface FormValues {
+	name: string;
+	email: string;
+	roles: string[];
+}
+
+function CreateServiceAccountModal(): JSX.Element {
+	const queryClient = useQueryClient();
+	const [isOpen, setIsOpen] = useQueryState(
+		SA_QUERY_PARAMS.CREATE_SA,
+		parseAsBoolean.withDefault(false),
+	);
+
+	const {
+		control,
+		handleSubmit,
+		reset,
+		formState: { isValid, errors },
+	} = useForm<FormValues>({
+		mode: 'onChange',
+		defaultValues: {
+			name: '',
+			email: '',
+			roles: [],
+		},
+	});
+
+	const {
+		mutate: createServiceAccount,
+		isLoading: isSubmitting,
+	} = useCreateServiceAccount({
+		mutation: {
+			onSuccess: async () => {
+				toast.success('Service account created successfully', {
+					richColors: true,
+				});
+				reset();
+				await setIsOpen(null);
+				await invalidateListServiceAccounts(queryClient);
+			},
+			onError: (err) => {
+				const errMessage =
+					convertToApiError(
+						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					)?.getErrorMessage() || 'An error occurred';
+				toast.error(`Failed to create service account: ${errMessage}`, {
+					richColors: true,
+				});
+			},
+		},
+	});
+	const {
+		roles,
+		isLoading: rolesLoading,
+		isError: rolesError,
+		error: rolesErrorObj,
+		refetch: refetchRoles,
+	} = useRoles();
+
+	function handleClose(): void {
+		reset();
+		setIsOpen(null);
+	}
+
+	function handleCreate(values: FormValues): void {
+		createServiceAccount({
+			data: {
+				name: values.name.trim(),
+				email: values.email.trim(),
+				roles: values.roles,
+			},
+		});
+	}
+
+	return (
+		<DialogWrapper
+			title="New Service Account"
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					handleClose();
+				}
+			}}
+			showCloseButton
+			width="narrow"
+			className="create-sa-modal"
+			disableOutsideClick={false}
+		>
+			<div className="create-sa-modal__content">
+				<form
+					id="create-sa-form"
+					className="create-sa-form"
+					onSubmit={handleSubmit(handleCreate)}
+				>
+					<div className="create-sa-form__item">
+						<label htmlFor="sa-name">Name</label>
+						<Controller
+							name="name"
+							control={control}
+							rules={{ required: 'Name is required' }}
+							render={({ field }): JSX.Element => (
+								<Input
+									id="sa-name"
+									placeholder="Enter a name"
+									className="create-sa-form__input"
+									value={field.value}
+									onChange={field.onChange}
+									onBlur={field.onBlur}
+								/>
+							)}
+						/>
+						{errors.name && (
+							<p className="create-sa-form__error">{errors.name.message}</p>
+						)}
+					</div>
+
+					<div className="create-sa-form__item">
+						<label htmlFor="sa-email">Email Address</label>
+						<Controller
+							name="email"
+							control={control}
+							rules={{
+								required: 'Email Address is required',
+								pattern: {
+									value: EMAIL_REGEX,
+									message: 'Please enter a valid email address',
+								},
+							}}
+							render={({ field }): JSX.Element => (
+								<Input
+									id="sa-email"
+									type="email"
+									placeholder="email@example.com"
+									className="create-sa-form__input"
+									value={field.value}
+									onChange={field.onChange}
+									onBlur={field.onBlur}
+								/>
+							)}
+						/>
+						{errors.email && (
+							<p className="create-sa-form__error">{errors.email.message}</p>
+						)}
+					</div>
+					<p className="create-sa-form__helper">
+						Used only for notifications about this service account. It is not used for
+						authentication.
+					</p>
+
+					<div className="create-sa-form__item">
+						<label htmlFor="sa-roles">Roles</label>
+						<Controller
+							name="roles"
+							control={control}
+							rules={{
+								validate: (value): string | true =>
+									value.length > 0 || 'At least one role is required',
+							}}
+							render={({ field }): JSX.Element => (
+								<RolesSelect
+									id="sa-roles"
+									mode="multiple"
+									roles={roles}
+									loading={rolesLoading}
+									isError={rolesError}
+									error={rolesErrorObj}
+									onRefetch={refetchRoles}
+									placeholder="Select roles"
+									value={field.value}
+									onChange={field.onChange}
+								/>
+							)}
+						/>
+						{errors.roles && (
+							<p className="create-sa-form__error">{errors.roles.message}</p>
+						)}
+					</div>
+				</form>
+			</div>
+
+			<DialogFooter className="create-sa-modal__footer">
+				<Button
+					type="button"
+					variant="solid"
+					color="secondary"
+					size="sm"
+					onClick={handleClose}
+				>
+					<X size={12} />
+					Cancel
+				</Button>
+
+				<Button
+					type="submit"
+					form="create-sa-form"
+					variant="solid"
+					color="primary"
+					size="sm"
+					loading={isSubmitting}
+					disabled={!isValid}
+				>
+					Create Service Account
+				</Button>
+			</DialogFooter>
+		</DialogWrapper>
+	);
+}
+
+export default CreateServiceAccountModal;

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

@@ -0,0 +1,179 @@
+import { toast } from '@signozhq/sonner';
+import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
+import { rest, server } from 'mocks-server/server';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import CreateServiceAccountModal from '../CreateServiceAccountModal';
+
+jest.mock('@signozhq/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+const mockToast = jest.mocked(toast);
+
+const ROLES_ENDPOINT = '*/api/v1/roles';
+const SERVICE_ACCOUNTS_ENDPOINT = '*/api/v1/service_accounts';
+
+function renderModal(): ReturnType<typeof render> {
+	return render(
+		<NuqsTestingAdapter searchParams={{ 'create-sa': 'true' }} hasMemory>
+			<CreateServiceAccountModal />
+		</NuqsTestingAdapter>,
+	);
+}
+
+describe('CreateServiceAccountModal', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		server.use(
+			rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+			rest.post(SERVICE_ACCOUNTS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(201), ctx.json({ status: 'success', data: {} })),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('submit button is disabled when form is empty', () => {
+		renderModal();
+
+		expect(
+			screen.getByRole('button', { name: /Create Service Account/i }),
+		).toBeDisabled();
+	});
+
+	it('submit button remains disabled when email is invalid', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		await user.type(screen.getByPlaceholderText('Enter a name'), 'My Bot');
+		await user.type(
+			screen.getByPlaceholderText('email@example.com'),
+			'not-an-email',
+		);
+
+		await user.click(screen.getByText('Select roles'));
+		await user.click(await screen.findByTitle('signoz-admin'));
+
+		await waitFor(() =>
+			expect(
+				screen.getByRole('button', { name: /Create Service Account/i }),
+			).toBeDisabled(),
+		);
+	});
+
+	it('successful submit shows toast.success and closes modal', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		await user.type(screen.getByPlaceholderText('Enter a name'), 'Deploy Bot');
+		await user.type(
+			screen.getByPlaceholderText('email@example.com'),
+			'deploy@acme.io',
+		);
+
+		await user.click(screen.getByText('Select roles'));
+		await user.click(await screen.findByTitle('signoz-admin'));
+
+		const submitBtn = screen.getByRole('button', {
+			name: /Create Service Account/i,
+		});
+		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await user.click(submitBtn);
+
+		await waitFor(() => {
+			expect(mockToast.success).toHaveBeenCalledWith(
+				'Service account created successfully',
+				expect.anything(),
+			);
+		});
+
+		await waitFor(() => {
+			expect(
+				screen.queryByRole('dialog', { name: /New Service Account/i }),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	it('shows toast.error on API error and keeps modal open', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		server.use(
+			rest.post(SERVICE_ACCOUNTS_ENDPOINT, (_, res, ctx) =>
+				res(
+					ctx.status(500),
+					ctx.json({ status: 'error', error: 'Internal Server Error' }),
+				),
+			),
+		);
+
+		renderModal();
+
+		await user.type(screen.getByPlaceholderText('Enter a name'), 'Dupe Bot');
+		await user.type(
+			screen.getByPlaceholderText('email@example.com'),
+			'dupe@acme.io',
+		);
+
+		await user.click(screen.getByText('Select roles'));
+		await user.click(await screen.findByTitle('signoz-admin'));
+
+		const submitBtn = screen.getByRole('button', {
+			name: /Create Service Account/i,
+		});
+		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await user.click(submitBtn);
+
+		await waitFor(() => {
+			expect(mockToast.error).toHaveBeenCalledWith(
+				expect.stringMatching(/Failed to create service account/i),
+				expect.anything(),
+			);
+		});
+
+		expect(
+			screen.getByRole('dialog', { name: /New Service Account/i }),
+		).toBeInTheDocument();
+	});
+
+	it('Cancel button closes modal without submitting', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		await screen.findByRole('dialog', { name: /New Service Account/i });
+		await user.click(screen.getByRole('button', { name: /Cancel/i }));
+
+		expect(
+			screen.queryByRole('dialog', { name: /New Service Account/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('shows "Name is required" after clearing the name field', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		const nameInput = screen.getByPlaceholderText('Enter a name');
+		await user.type(nameInput, 'Bot');
+		await user.clear(nameInput);
+
+		await screen.findByText('Name is required');
+	});
+
+	it('shows "Please enter a valid email address" for a malformed email', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		await user.type(
+			screen.getByPlaceholderText('email@example.com'),
+			'not-an-email',
+		);
+
+		await screen.findByText('Please enter a valid email address');
+	});
+});

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -297,7 +297,11 @@ function CustomTimePicker({
 		resetErrorStatus();
 	};
 
-	const handleInputPressEnter = (): void => {
+	const handleInputPressEnter = (
+		event?: React.KeyboardEvent<HTMLInputElement>,
+	): void => {
+		event?.preventDefault();
+		event?.stopPropagation();
 		// check if the entered time is in the format of 1m, 2h, 3d, 4w
 		const isTimeDurationShortHandFormat = /^(\d+)([mhdw])$/.test(inputValue);
 

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -7,7 +7,6 @@ import {
 	Check,
 	ChevronDown,
 	Copy,
-	Link,
 	LockKeyhole,
 	RefreshCw,
 	Trash2,
@@ -16,18 +15,21 @@ import {
 import { Input } from '@signozhq/input';
 import { toast } from '@signozhq/sonner';
 import { Select } from 'antd';
-import getResetPasswordToken from 'api/v1/factor_password/getResetPasswordToken';
-import sendInvite from 'api/v1/invite/create';
-import cancelInvite from 'api/v1/invite/id/delete';
-import deleteUser from 'api/v1/user/id/delete';
-import update from 'api/v1/user/id/update';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	getResetPasswordToken,
+	useDeleteUser,
+	useUpdateUser,
+} from 'api/generated/services/users';
+import { AxiosError } from 'axios';
 import { MemberRow } from 'components/MembersTable/MembersTable';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
-import { INVITE_PREFIX, MemberStatus } from 'container/MembersSettings/utils';
+import { MemberStatus } from 'container/MembersSettings/utils';
 import { capitalize } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
 import { ROLES } from 'types/roles';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import './EditMemberDrawer.styles.scss';
 
@@ -36,7 +38,6 @@ export interface EditMemberDrawerProps {
 	open: boolean;
 	onClose: () => void;
 	onComplete: () => void;
-	onRefetch?: () => void;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -45,24 +46,62 @@ function EditMemberDrawer({
 	open,
 	onClose,
 	onComplete,
-	onRefetch,
 }: EditMemberDrawerProps): JSX.Element {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
 	const [displayName, setDisplayName] = useState('');
 	const [selectedRole, setSelectedRole] = useState<ROLES>('VIEWER');
-	const [isSaving, setIsSaving] = useState(false);
-	const [isDeleting, setIsDeleting] = useState(false);
 	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 	const [resetLink, setResetLink] = useState<string | null>(null);
 	const [showResetLinkDialog, setShowResetLinkDialog] = useState(false);
 	const [hasCopiedResetLink, setHasCopiedResetLink] = useState(false);
+	const [linkType, setLinkType] = useState<'invite' | 'reset' | null>(null);
 
 	const isInvited = member?.status === MemberStatus.Invited;
-	// Invited member IDs are prefixed with 'invite-'; strip it to get the real invite ID
-	const inviteId =
-		isInvited && member ? member.id.slice(INVITE_PREFIX.length) : null;
+
+	const { mutate: updateUser, isLoading: isSaving } = useUpdateUser({
+		mutation: {
+			onSuccess: (): void => {
+				toast.success('Member details updated successfully', { richColors: true });
+				onComplete();
+				onClose();
+			},
+			onError: (err): void => {
+				const errMessage =
+					convertToApiError(
+						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					)?.getErrorMessage() || 'An error occurred';
+				toast.error(`Failed to update member details: ${errMessage}`, {
+					richColors: true,
+				});
+			},
+		},
+	});
+
+	const { mutate: deleteUser, isLoading: isDeleting } = useDeleteUser({
+		mutation: {
+			onSuccess: (): void => {
+				toast.success(
+					isInvited ? 'Invite revoked successfully' : 'Member deleted successfully',
+					{ richColors: true },
+				);
+				setShowDeleteConfirm(false);
+				onComplete();
+				onClose();
+			},
+			onError: (err): void => {
+				const errMessage =
+					convertToApiError(
+						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					)?.getErrorMessage() || 'An error occurred';
+				const prefix = isInvited
+					? 'Failed to revoke invite'
+					: 'Failed to delete member';
+				toast.error(`${prefix}: ${errMessage}`, { richColors: true });
+			},
+		},
+	});
 
 	useEffect(() => {
 		if (member) {
@@ -73,7 +112,7 @@ function EditMemberDrawer({
 
 	const isDirty =
 		member !== null &&
-		(displayName !== member.name || selectedRole !== member.role);
+		(displayName !== (member.name ?? '') || selectedRole !== member.role);
 
 	const formatTimestamp = useCallback(
 		(ts: string | null | undefined): string => {
@@ -89,106 +128,24 @@ function EditMemberDrawer({
 		[formatTimezoneAdjustedTimestamp],
 	);
 
-	const saveInvitedMember = useCallback(async (): Promise<void> => {
-		if (!member || !inviteId) {
-			return;
-		}
-		await cancelInvite({ id: inviteId });
-		try {
-			await sendInvite({
-				email: member.email,
-				name: displayName,
-				role: selectedRole,
-				frontendBaseUrl: window.location.origin,
-			});
-			toast.success('Invite updated successfully', { richColors: true });
-			onComplete();
-			onClose();
-		} catch {
-			onRefetch?.();
-			onClose();
-			toast.error(
-				'Failed to send the updated invite. Please re-invite this member.',
-				{ richColors: true },
-			);
-		}
-	}, [
-		member,
-		inviteId,
-		displayName,
-		selectedRole,
-		onComplete,
-		onClose,
-		onRefetch,
-	]);
-
-	const saveActiveMember = useCallback(async (): Promise<void> => {
-		if (!member) {
-			return;
-		}
-		await update({
-			userId: member.id,
-			displayName,
-			role: selectedRole,
-		});
-		toast.success('Member details updated successfully', { richColors: true });
-		onComplete();
-		onClose();
-	}, [member, displayName, selectedRole, onComplete, onClose]);
-
-	const handleSave = useCallback(async (): Promise<void> => {
+	const handleSave = useCallback((): void => {
 		if (!member || !isDirty) {
 			return;
 		}
-		setIsSaving(true);
-		try {
-			if (isInvited && inviteId) {
-				await saveInvitedMember();
-			} else {
-				await saveActiveMember();
-			}
-		} catch {
-			toast.error(
-				isInvited ? 'Failed to update invite' : 'Failed to update member details',
-				{ richColors: true },
-			);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [
-		member,
-		isDirty,
-		isInvited,
-		inviteId,
-		saveInvitedMember,
-		saveActiveMember,
-	]);
+		updateUser({
+			pathParams: { id: member.id },
+			data: { id: member.id, displayName, role: selectedRole },
+		});
+	}, [member, isDirty, displayName, selectedRole, updateUser]);
 
-	const handleDelete = useCallback(async (): Promise<void> => {
+	const handleDelete = useCallback((): void => {
 		if (!member) {
 			return;
 		}
-		setIsDeleting(true);
-		try {
-			if (isInvited && inviteId) {
-				await cancelInvite({ id: inviteId });
-				toast.success('Invitation cancelled successfully', { richColors: true });
-			} else {
-				await deleteUser({ userId: member.id });
-				toast.success('Member deleted successfully', { richColors: true });
-			}
-			setShowDeleteConfirm(false);
-			onComplete();
-			onClose();
-		} catch {
-			toast.error(
-				isInvited ? 'Failed to cancel invitation' : 'Failed to delete member',
-				{ richColors: true },
-			);
-		} finally {
-			setIsDeleting(false);
-		}
-	}, [member, isInvited, inviteId, onComplete, onClose]);
+		deleteUser({
+			pathParams: { id: member.id },
+		});
+	}, [member, deleteUser]);
 
 	const handleGenerateResetLink = useCallback(async (): Promise<void> => {
 		if (!member) {
@@ -196,11 +153,12 @@ function EditMemberDrawer({
 		}
 		setIsGeneratingLink(true);
 		try {
-			const response = await getResetPasswordToken({ userId: member.id });
+			const response = await getResetPasswordToken({ id: member.id });
 			if (response?.data?.token) {
 				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
 				setResetLink(link);
 				setHasCopiedResetLink(false);
+				setLinkType(isInvited ? 'invite' : 'reset');
 				setShowResetLinkDialog(true);
 				onClose();
 			} else {
@@ -217,7 +175,7 @@ function EditMemberDrawer({
 		} finally {
 			setIsGeneratingLink(false);
 		}
-	}, [member, onClose]);
+	}, [member, isInvited, setLinkType, onClose]);
 
 	const handleCopyResetLink = useCallback(async (): Promise<void> => {
 		if (!resetLink) {
@@ -227,36 +185,18 @@ function EditMemberDrawer({
 			await navigator.clipboard.writeText(resetLink);
 			setHasCopiedResetLink(true);
 			setTimeout(() => setHasCopiedResetLink(false), 2000);
-			toast.success('Reset link copied to clipboard', { richColors: true });
+			toast.success(
+				linkType === 'invite'
+					? 'Invite link copied to clipboard'
+					: 'Reset link copied to clipboard',
+				{ richColors: true },
+			);
 		} catch {
 			toast.error('Failed to copy link', {
 				richColors: true,
 			});
 		}
-	}, [resetLink]);
-
-	const handleCopyInviteLink = useCallback(async (): Promise<void> => {
-		if (!member?.token) {
-			toast.error('Invite link is not available', {
-				richColors: true,
-				position: 'top-right',
-			});
-			return;
-		}
-		const inviteLink = `${window.location.origin}${ROUTES.SIGN_UP}?token=${member.token}`;
-		try {
-			await navigator.clipboard.writeText(inviteLink);
-			toast.success('Invite link copied to clipboard', {
-				richColors: true,
-				position: 'top-right',
-			});
-		} catch {
-			toast.error('Failed to copy invite link', {
-				richColors: true,
-				position: 'top-right',
-			});
-		}
-	}, [member]);
+	}, [resetLink, linkType]);
 
 	const handleClose = useCallback((): void => {
 		setShowDeleteConfirm(false);
@@ -303,10 +243,7 @@ function EditMemberDrawer({
 						onChange={(role): void => setSelectedRole(role as ROLES)}
 						className="edit-member-drawer__role-select"
 						suffixIcon={<ChevronDown size={14} />}
-						getPopupContainer={(triggerNode): HTMLElement =>
-							(triggerNode?.closest('.edit-member-drawer') as HTMLElement) ||
-							document.body
-						}
+						getPopupContainer={popupContainer}
 					>
 						<Select.Option value="ADMIN">{capitalize('ADMIN')}</Select.Option>
 						<Select.Option value="EDITOR">{capitalize('EDITOR')}</Select.Option>
@@ -348,30 +285,22 @@ function EditMemberDrawer({
 						onClick={(): void => setShowDeleteConfirm(true)}
 					>
 						<Trash2 size={12} />
-						{isInvited ? 'Cancel Invite' : 'Delete Member'}
+						{isInvited ? 'Revoke Invite' : 'Delete Member'}
 					</Button>
 
 					<div className="edit-member-drawer__footer-divider" />
-
-					{isInvited ? (
-						<Button
-							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-							onClick={handleCopyInviteLink}
-							disabled={!member?.token}
-						>
-							<Link size={12} />
-							Copy Invite Link
-						</Button>
-					) : (
-						<Button
-							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-							onClick={handleGenerateResetLink}
-							disabled={isGeneratingLink}
-						>
-							<RefreshCw size={12} />
-							{isGeneratingLink ? 'Generating...' : 'Generate Password Reset Link'}
-						</Button>
-					)}
+					<Button
+						className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
+						onClick={handleGenerateResetLink}
+						disabled={isGeneratingLink}
+					>
+						<RefreshCw size={12} />
+						{isGeneratingLink
+							? 'Generating...'
+							: isInvited
+							? 'Copy Invite Link'
+							: 'Generate Password Reset Link'}
+					</Button>
 				</div>
 
 				<div className="edit-member-drawer__footer-right">
@@ -394,21 +323,21 @@ function EditMemberDrawer({
 		</div>
 	);
 
-	const deleteDialogTitle = isInvited ? 'Cancel Invitation' : 'Delete Member';
+	const deleteDialogTitle = isInvited ? 'Revoke Invite' : 'Delete Member';
 	const deleteDialogBody = isInvited ? (
 		<>
-			Are you sure you want to cancel the invitation for{' '}
+			Are you sure you want to revoke the invite for{' '}
 			<strong>{member?.email}</strong>? They will no longer be able to join the
 			workspace using this invite.
 		</>
 	) : (
 		<>
 			Are you sure you want to delete{' '}
-			<strong>{member?.name || member?.email}</strong>? This will permanently
-			remove their access to the workspace.
+			<strong>{member?.name || member?.email}</strong>? This will remove their
+			access to the workspace.
 		</>
 	);
-	const deleteConfirmLabel = isInvited ? 'Cancel Invite' : 'Delete Member';
+	const deleteConfirmLabel = isInvited ? 'Revoke Invite' : 'Delete Member';
 
 	return (
 		<>
@@ -434,17 +363,19 @@ function EditMemberDrawer({
 				onOpenChange={(isOpen): void => {
 					if (!isOpen) {
 						setShowResetLinkDialog(false);
+						setLinkType(null);
 					}
 				}}
-				title="Password Reset Link"
+				title={linkType === 'invite' ? 'Invite Link' : 'Password Reset Link'}
 				showCloseButton
 				width="base"
 				className="reset-link-dialog"
 			>
 				<div className="reset-link-dialog__content">
 					<p className="reset-link-dialog__description">
-						This creates a one-time link the team member can use to set a new password
-						for their SigNoz account.
+						{linkType === 'invite'
+							? 'Share this one-time link with the team member to complete their account setup.'
+							: 'This creates a one-time link the team member can use to set a new password for their SigNoz account.'}
 					</p>
 					<div className="reset-link-dialog__link-row">
 						<div className="reset-link-dialog__link-text-wrap">

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

@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react';
 import { toast } from '@signozhq/sonner';
-import getResetPasswordToken from 'api/v1/factor_password/getResetPasswordToken';
-import cancelInvite from 'api/v1/invite/id/delete';
-import deleteUser from 'api/v1/user/id/delete';
-import update from 'api/v1/user/id/update';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	getResetPasswordToken,
+	useDeleteUser,
+	useUpdateUser,
+} from 'api/generated/services/users';
 import { MemberStatus } from 'container/MembersSettings/utils';
 import {
 	fireEvent,
@@ -46,11 +48,16 @@ jest.mock('@signozhq/dialog', () => ({
 	),
 }));
 
-jest.mock('api/v1/user/id/update');
-jest.mock('api/v1/user/id/delete');
-jest.mock('api/v1/invite/id/delete');
-jest.mock('api/v1/invite/create');
-jest.mock('api/v1/factor_password/getResetPasswordToken');
+jest.mock('api/generated/services/users', () => ({
+	useDeleteUser: jest.fn(),
+	useUpdateUser: jest.fn(),
+	getResetPasswordToken: jest.fn(),
+}));
+
+jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
+	convertToApiError: jest.fn(),
+}));
+
 jest.mock('@signozhq/sonner', () => ({
 	toast: {
 		success: jest.fn(),
@@ -58,9 +65,8 @@ jest.mock('@signozhq/sonner', () => ({
 	},
 }));
 
-const mockUpdate = jest.mocked(update);
-const mockDeleteUser = jest.mocked(deleteUser);
-const mockCancelInvite = jest.mocked(cancelInvite);
+const mockUpdateMutate = jest.fn();
+const mockDeleteMutate = jest.fn();
 const mockGetResetPasswordToken = jest.mocked(getResetPasswordToken);
 
 const activeMember = {
@@ -74,13 +80,12 @@ const activeMember = {
 };
 
 const invitedMember = {
-	id: 'invite-abc123',
+	id: 'abc123',
 	name: '',
 	email: 'bob@signoz.io',
 	role: 'VIEWER' as ROLES,
 	status: MemberStatus.Invited,
 	joinedOn: '1700000000000',
-	token: 'tok-xyz',
 };
 
 function renderDrawer(
@@ -100,9 +105,14 @@ function renderDrawer(
 describe('EditMemberDrawer', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockUpdate.mockResolvedValue({ httpStatusCode: 200, data: null });
-		mockDeleteUser.mockResolvedValue({ httpStatusCode: 200, data: null });
-		mockCancelInvite.mockResolvedValue({ httpStatusCode: 200, data: null });
+		(useUpdateUser as jest.Mock).mockReturnValue({
+			mutate: mockUpdateMutate,
+			isLoading: false,
+		});
+		(useDeleteUser as jest.Mock).mockReturnValue({
+			mutate: mockDeleteMutate,
+			isLoading: false,
+		});
 	});
 
 	it('renders active member details and disables Save when form is not dirty', () => {
@@ -120,6 +130,13 @@ describe('EditMemberDrawer', () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
+		(useUpdateUser as jest.Mock).mockImplementation((options) => ({
+			mutate: mockUpdateMutate.mockImplementation(() => {
+				options?.mutation?.onSuccess?.();
+			}),
+			isLoading: false,
+		}));
+
 		renderDrawer({ onComplete });
 
 		const nameInput = screen.getByDisplayValue('Alice Smith');
@@ -132,10 +149,10 @@ describe('EditMemberDrawer', () => {
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(mockUpdate).toHaveBeenCalledWith(
+			expect(mockUpdateMutate).toHaveBeenCalledWith(
 				expect.objectContaining({
-					userId: 'user-1',
-					displayName: 'Alice Updated',
+					pathParams: { id: 'user-1' },
+					data: expect.objectContaining({ displayName: 'Alice Updated' }),
 				}),
 			);
 			expect(onComplete).toHaveBeenCalled();
@@ -146,6 +163,13 @@ describe('EditMemberDrawer', () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
+		(useDeleteUser as jest.Mock).mockImplementation((options) => ({
+			mutate: mockDeleteMutate.mockImplementation(() => {
+				options?.mutation?.onSuccess?.();
+			}),
+			isLoading: false,
+		}));
+
 		renderDrawer({ onComplete });
 
 		await user.click(screen.getByRole('button', { name: /delete member/i }));
@@ -158,45 +182,184 @@ describe('EditMemberDrawer', () => {
 		await user.click(confirmBtns[confirmBtns.length - 1]);
 
 		await waitFor(() => {
-			expect(mockDeleteUser).toHaveBeenCalledWith({ userId: 'user-1' });
+			expect(mockDeleteMutate).toHaveBeenCalledWith({
+				pathParams: { id: 'user-1' },
+			});
 			expect(onComplete).toHaveBeenCalled();
 		});
 	});
 
-	it('shows Cancel Invite and Copy Invite Link for invited members; hides Last Modified', () => {
+	it('shows revoke invite and copy invite link for invited members; hides Last Modified', () => {
 		renderDrawer({ member: invitedMember });
 
 		expect(
-			screen.getByRole('button', { name: /cancel invite/i }),
+			screen.getByRole('button', { name: /revoke invite/i }),
 		).toBeInTheDocument();
 		expect(
 			screen.getByRole('button', { name: /copy invite link/i }),
 		).toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /generate password reset link/i }),
+		).not.toBeInTheDocument();
 		expect(screen.getByText('Invited On')).toBeInTheDocument();
 		expect(screen.queryByText('Last Modified')).not.toBeInTheDocument();
 	});
 
-	it('calls cancelInvite after confirming Cancel Invite for invited members', async () => {
+	it('calls deleteUser after confirming revoke invite for invited members', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
+		(useDeleteUser as jest.Mock).mockImplementation((options) => ({
+			mutate: mockDeleteMutate.mockImplementation(() => {
+				options?.mutation?.onSuccess?.();
+			}),
+			isLoading: false,
+		}));
+
 		renderDrawer({ member: invitedMember, onComplete });
 
-		await user.click(screen.getByRole('button', { name: /cancel invite/i }));
+		await user.click(screen.getByRole('button', { name: /revoke invite/i }));
 
 		expect(
-			await screen.findByText(/are you sure you want to cancel the invitation/i),
+			await screen.findByText(/Are you sure you want to revoke the invite/i),
 		).toBeInTheDocument();
 
-		const confirmBtns = screen.getAllByRole('button', { name: /cancel invite/i });
+		const confirmBtns = screen.getAllByRole('button', { name: /revoke invite/i });
 		await user.click(confirmBtns[confirmBtns.length - 1]);
 
 		await waitFor(() => {
-			expect(mockCancelInvite).toHaveBeenCalledWith({ id: 'abc123' });
+			expect(mockDeleteMutate).toHaveBeenCalledWith({
+				pathParams: { id: 'abc123' },
+			});
 			expect(onComplete).toHaveBeenCalled();
 		});
 	});
 
+	it('calls update API when saving changes for an invited member', async () => {
+		const onComplete = jest.fn();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		(useUpdateUser as jest.Mock).mockImplementation((options) => ({
+			mutate: mockUpdateMutate.mockImplementation(() => {
+				options?.mutation?.onSuccess?.();
+			}),
+			isLoading: false,
+		}));
+
+		renderDrawer({ member: { ...invitedMember, name: 'Bob' }, onComplete });
+
+		const nameInput = screen.getByDisplayValue('Bob');
+		await user.clear(nameInput);
+		await user.type(nameInput, 'Bob Updated');
+
+		const saveBtn = screen.getByRole('button', { name: /save member details/i });
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await user.click(saveBtn);
+
+		await waitFor(() => {
+			expect(mockUpdateMutate).toHaveBeenCalledWith(
+				expect.objectContaining({
+					pathParams: { id: 'abc123' },
+					data: expect.objectContaining({ displayName: 'Bob Updated' }),
+				}),
+			);
+			expect(onComplete).toHaveBeenCalled();
+		});
+	});
+
+	describe('error handling', () => {
+		const mockConvertToApiError = jest.mocked(convertToApiError);
+
+		beforeEach(() => {
+			mockConvertToApiError.mockReturnValue({
+				getErrorMessage: (): string => 'Something went wrong on server',
+			} as ReturnType<typeof convertToApiError>);
+		});
+
+		it('shows API error message when updateUser fails', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const mockToast = jest.mocked(toast);
+
+			(useUpdateUser as jest.Mock).mockImplementation((options) => ({
+				mutate: mockUpdateMutate.mockImplementation(() => {
+					options?.mutation?.onError?.({});
+				}),
+				isLoading: false,
+			}));
+
+			renderDrawer();
+
+			const nameInput = screen.getByDisplayValue('Alice Smith');
+			await user.clear(nameInput);
+			await user.type(nameInput, 'Alice Updated');
+
+			const saveBtn = screen.getByRole('button', { name: /save member details/i });
+			await waitFor(() => expect(saveBtn).not.toBeDisabled());
+			await user.click(saveBtn);
+
+			await waitFor(() => {
+				expect(mockToast.error).toHaveBeenCalledWith(
+					'Failed to update member details: Something went wrong on server',
+					expect.anything(),
+				);
+			});
+		});
+
+		it('shows API error message when deleteUser fails for active member', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const mockToast = jest.mocked(toast);
+
+			(useDeleteUser as jest.Mock).mockImplementation((options) => ({
+				mutate: mockDeleteMutate.mockImplementation(() => {
+					options?.mutation?.onError?.({});
+				}),
+				isLoading: false,
+			}));
+
+			renderDrawer();
+
+			await user.click(screen.getByRole('button', { name: /delete member/i }));
+			const confirmBtns = screen.getAllByRole('button', {
+				name: /delete member/i,
+			});
+			await user.click(confirmBtns[confirmBtns.length - 1]);
+
+			await waitFor(() => {
+				expect(mockToast.error).toHaveBeenCalledWith(
+					'Failed to delete member: Something went wrong on server',
+					expect.anything(),
+				);
+			});
+		});
+
+		it('shows API error message when deleteUser fails for invited member', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const mockToast = jest.mocked(toast);
+
+			(useDeleteUser as jest.Mock).mockImplementation((options) => ({
+				mutate: mockDeleteMutate.mockImplementation(() => {
+					options?.mutation?.onError?.({});
+				}),
+				isLoading: false,
+			}));
+
+			renderDrawer({ member: invitedMember });
+
+			await user.click(screen.getByRole('button', { name: /revoke invite/i }));
+			const confirmBtns = screen.getAllByRole('button', {
+				name: /revoke invite/i,
+			});
+			await user.click(confirmBtns[confirmBtns.length - 1]);
+
+			await waitFor(() => {
+				expect(mockToast.error).toHaveBeenCalledWith(
+					'Failed to revoke invite: Something went wrong on server',
+					expect.anything(),
+				);
+			});
+		});
+	});
+
 	describe('Generate Password Reset Link', () => {
 		const mockWriteText = jest.fn().mockResolvedValue(undefined);
 		let clipboardSpy: jest.SpyInstance | undefined;
@@ -215,8 +378,8 @@ describe('EditMemberDrawer', () => {
 				.spyOn(navigator.clipboard, 'writeText')
 				.mockImplementation(mockWriteText);
 			mockGetResetPasswordToken.mockResolvedValue({
-				httpStatusCode: 200,
-				data: { token: 'reset-tok-abc', userId: 'user-1' },
+				status: 'success',
+				data: { token: 'reset-tok-abc', id: 'user-1' },
 			});
 		});
 
@@ -237,7 +400,7 @@ describe('EditMemberDrawer', () => {
 				name: /password reset link/i,
 			});
 			expect(mockGetResetPasswordToken).toHaveBeenCalledWith({
-				userId: 'user-1',
+				id: 'user-1',
 			});
 			expect(dialog).toBeInTheDocument();
 			expect(dialog).toHaveTextContent('reset-tok-abc');
@@ -260,7 +423,6 @@ describe('EditMemberDrawer', () => {
 
 			fireEvent.click(screen.getByRole('button', { name: /^copy$/i }));
 
-			// Verify success path: writeText called with the correct link
 			await waitFor(() => {
 				expect(mockToast.success).toHaveBeenCalledWith(
 					'Reset link copied to clipboard',

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -13,6 +13,7 @@ import { cloneDeep, debounce } from 'lodash-es';
 import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import './InviteMembersModal.styles.scss';
@@ -254,6 +255,8 @@ function InviteMembersModal({
 											value={row.email}
 											onChange={(e): void => updateEmail(row.id, e.target.value)}
 											className="team-member-email-input"
+											name={`invite-email-${row.id}`}
+											autoComplete="email"
 										/>
 										{emailValidity[row.id] === false && row.email.trim() !== '' && (
 											<span className="email-error-message">Invalid email address</span>
@@ -266,10 +269,7 @@ function InviteMembersModal({
 											className="team-member-role-select"
 											placeholder="Select roles"
 											suffixIcon={<ChevronDown size={14} />}
-											getPopupContainer={(triggerNode): HTMLElement =>
-												(triggerNode?.closest('.invite-members-modal') as HTMLElement) ||
-												document.body
-											}
+											getPopupContainer={popupContainer}
 										>
 											<Select.Option value="VIEWER">Viewer</Select.Option>
 											<Select.Option value="EDITOR">Editor</Select.Option>

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -162,7 +162,7 @@
 		font-weight: var(--paragraph-base-400-font-weight);
 		color: var(--foreground);
 		margin: 0;
-		line-height: var(--paragraph-base-400-font-height);
+		line-height: var(--paragraph-base-400-line-height);
 
 		strong {
 			font-weight: var(--font-weight-medium);

frontend/src/components/MembersTable/MembersTable.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { Badge } from '@signozhq/badge';
-import { Pagination, Table, Tooltip } from 'antd';
+import { Table, Tooltip } from 'antd';
 import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { MemberStatus } from 'container/MembersSettings/utils';
@@ -18,7 +18,6 @@ export interface MemberRow {
 	status: MemberStatus;
 	joinedOn: string | null;
 	updatedAt?: string | null;
-	token?: string | null;
 }
 
 interface MembersTableProps {
@@ -64,11 +63,23 @@ function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
 			</Badge>
 		);
 	}
-	return (
-		<Badge color="amber" variant="outline">
-			INVITED
-		</Badge>
-	);
+	if (status === MemberStatus.Deleted) {
+		return (
+			<Badge color="cherry" variant="outline">
+				DELETED
+			</Badge>
+		);
+	}
+
+	if (status === MemberStatus.Invited) {
+		return (
+			<Badge color="amber" variant="outline">
+				INVITED
+			</Badge>
+		);
+	}
+
+	return <Badge color="vanilla">⎯</Badge>;
 }
 
 function MembersEmptyState({
@@ -199,14 +210,30 @@ function MembersTable({
 				dataSource={data}
 				rowKey="id"
 				loading={loading}
-				pagination={false}
+				pagination={{
+					current: currentPage,
+					pageSize,
+					total,
+					showTotal: showPaginationTotal,
+					showSizeChanger: false,
+					onChange: onPageChange,
+					className: 'members-table-pagination',
+					hideOnSinglePage: true,
+				}}
 				rowClassName={(_, index): string =>
 					index % 2 === 0 ? 'members-table-row--tinted' : ''
 				}
-				onRow={(record): React.HTMLAttributes<HTMLElement> => ({
-					onClick: (): void => onRowClick?.(record),
-					style: onRowClick ? { cursor: 'pointer' } : undefined,
-				})}
+				onRow={(record): React.HTMLAttributes<HTMLElement> => {
+					const isClickable = onRowClick && record.status !== MemberStatus.Deleted;
+					return {
+						onClick: (): void => {
+							if (isClickable) {
+								onRowClick(record);
+							}
+						},
+						style: isClickable ? { cursor: 'pointer' } : undefined,
+					};
+				}}
 				onChange={(_, __, sorter): void => {
 					if (onSortChange) {
 						onSortChange(
@@ -220,17 +247,6 @@ function MembersTable({
 				}}
 				className="members-table"
 			/>
-			{total > pageSize && (
-				<Pagination
-					current={currentPage}
-					pageSize={pageSize}
-					total={total}
-					showTotal={showPaginationTotal}
-					showSizeChanger={false}
-					onChange={onPageChange}
-					className="members-table-pagination"
-				/>
-			)}
 		</div>
 	);
 }

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

@@ -24,13 +24,12 @@ const mockActiveMembers: MemberRow[] = [
 ];
 
 const mockInvitedMember: MemberRow = {
-	id: 'invite-abc',
+	id: 'inv-abc',
 	name: '',
 	email: 'charlie@signoz.io',
 	role: 'EDITOR' as ROLES,
 	status: MemberStatus.Invited,
 	joinedOn: null,
-	token: 'tok-123',
 };
 
 const defaultProps = {
@@ -93,6 +92,34 @@ describe('MembersTable', () => {
 		);
 	});
 
+	it('renders DELETED badge and does not call onRowClick when a deleted member row is clicked', async () => {
+		const onRowClick = jest.fn();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const deletedMember: MemberRow = {
+			id: 'user-del',
+			name: 'Dave Deleted',
+			email: 'dave@signoz.io',
+			role: 'VIEWER' as ROLES,
+			status: MemberStatus.Deleted,
+			joinedOn: null,
+		};
+
+		render(
+			<MembersTable
+				{...defaultProps}
+				data={[...mockActiveMembers, deletedMember]}
+				total={3}
+				onRowClick={onRowClick}
+			/>,
+		);
+
+		expect(screen.getByText('DELETED')).toBeInTheDocument();
+		await user.click(screen.getByText('Dave Deleted'));
+		expect(onRowClick).not.toHaveBeenCalledWith(
+			expect.objectContaining({ id: 'user-del' }),
+		);
+	});
+
 	it('shows "No members found" empty state when no data and no search query', () => {
 		render(<MembersTable {...defaultProps} data={[]} total={0} searchQuery="" />);
 

frontend/src/components/RolesSelect/RolesSelect.styles.scss

@@ -0,0 +1,90 @@
+.roles-select {
+	width: 100%;
+
+	// todo: styles should easeup once upgrade to select from periscope
+	.ant-select-selector {
+		min-height: 32px;
+		background-color: var(--l2-background) !important;
+		border: 1px solid var(--border) !important;
+		border-radius: 2px;
+		padding: 2px var(--padding-2) !important;
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.ant-select-selection-overflow {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--spacing-1);
+		padding: 2px 0;
+	}
+
+	.ant-select-selection-overflow-item {
+		display: flex;
+		align-items: center;
+	}
+
+	.ant-select-selection-item {
+		display: flex;
+		align-items: center;
+		height: 22px;
+		font-size: var(--font-size-sm);
+		color: var(--l1-foreground);
+		background: var(--l3-background);
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		padding: 0 var(--padding-1) 0 6px;
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+		margin: 0;
+	}
+
+	.ant-select-selection-item-remove {
+		display: flex;
+		align-items: center;
+		color: var(--foreground);
+		margin-left: 2px;
+	}
+
+	.ant-select-selection-placeholder {
+		font-size: var(--font-size-sm);
+		color: var(--l3-foreground);
+	}
+
+	.ant-select-arrow {
+		color: var(--foreground);
+	}
+
+	&.ant-select-focused .ant-select-selector,
+	&:not(.ant-select-disabled):hover .ant-select-selector {
+		border-color: var(--primary) !important;
+	}
+}
+
+.roles-select-error {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-3);
+	padding: var(--padding-1) var(--padding-2);
+	color: var(--destructive);
+	font-size: var(--font-size-xs);
+
+	&__msg {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-3);
+	}
+
+	&__retry-btn {
+		display: flex;
+		align-items: center;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 2px;
+		color: var(--destructive);
+	}
+}

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -0,0 +1,173 @@
+import { CircleAlert, RefreshCw } from '@signozhq/icons';
+import { Checkbox, Select } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useListRoles } from 'api/generated/services/role';
+import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
+import APIError from 'types/api/error';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import './RolesSelect.styles.scss';
+
+export interface RoleOption {
+	label: string;
+	value: string;
+}
+
+export function useRoles(): {
+	roles: AuthtypesRoleDTO[];
+	isLoading: boolean;
+	isError: boolean;
+	error: APIError | undefined;
+	refetch: () => void;
+} {
+	const { data, isLoading, isError, error, refetch } = useListRoles();
+	return {
+		roles: data?.data ?? [],
+		isLoading,
+		isError,
+		error: convertToApiError(error),
+		refetch,
+	};
+}
+
+export function getRoleOptions(roles: AuthtypesRoleDTO[]): RoleOption[] {
+	return roles.map((role) => ({
+		label: role.name ?? '',
+		value: role.name ?? '',
+	}));
+}
+
+function ErrorContent({
+	error,
+	onRefetch,
+}: {
+	error?: APIError;
+	onRefetch?: () => void;
+}): JSX.Element {
+	const errorMessage = error?.message || 'Failed to load roles';
+
+	return (
+		<div className="roles-select-error">
+			<span className="roles-select-error__msg">
+				<CircleAlert size={12} />
+				{errorMessage}
+			</span>
+			{onRefetch && (
+				<button
+					type="button"
+					onClick={(e): void => {
+						e.stopPropagation();
+						onRefetch();
+					}}
+					className="roles-select-error__retry-btn"
+					title="Retry"
+				>
+					<RefreshCw size={12} />
+				</button>
+			)}
+		</div>
+	);
+}
+
+interface BaseProps {
+	id?: string;
+	placeholder?: string;
+	className?: string;
+	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
+	roles?: AuthtypesRoleDTO[];
+	loading?: boolean;
+	isError?: boolean;
+	error?: APIError;
+	onRefetch?: () => void;
+}
+
+interface SingleProps extends BaseProps {
+	mode?: 'single';
+	value?: string;
+	onChange?: (role: string) => void;
+}
+
+interface MultipleProps extends BaseProps {
+	mode: 'multiple';
+	value?: string[];
+	onChange?: (roles: string[]) => void;
+}
+
+export type RolesSelectProps = SingleProps | MultipleProps;
+
+function RolesSelect(props: RolesSelectProps): JSX.Element {
+	const externalRoles = props.roles;
+
+	const {
+		data,
+		isLoading: internalLoading,
+		isError: internalError,
+		error: internalErrorObj,
+		refetch: internalRefetch,
+	} = useListRoles({
+		query: { enabled: externalRoles === undefined },
+	});
+
+	const roles = externalRoles ?? data?.data ?? [];
+	const options = getRoleOptions(roles);
+
+	const {
+		mode,
+		id,
+		placeholder = 'Select role',
+		className,
+		getPopupContainer = popupContainer,
+		loading = internalLoading,
+		isError = internalError,
+		error = convertToApiError(internalErrorObj),
+		onRefetch = externalRoles === undefined ? internalRefetch : undefined,
+	} = props;
+
+	const notFoundContent = isError ? (
+		<ErrorContent error={error} onRefetch={onRefetch} />
+	) : undefined;
+
+	if (mode === 'multiple') {
+		const { value = [], onChange } = props as MultipleProps;
+		return (
+			<Select
+				id={id}
+				mode="multiple"
+				value={value}
+				onChange={onChange}
+				placeholder={placeholder}
+				className={cx('roles-select', className)}
+				loading={loading}
+				notFoundContent={notFoundContent}
+				options={options}
+				optionRender={(option): JSX.Element => (
+					<Checkbox
+						checked={value.includes(option.value as string)}
+						style={{ pointerEvents: 'none' }}
+					>
+						{option.label}
+					</Checkbox>
+				)}
+				getPopupContainer={getPopupContainer}
+			/>
+		);
+	}
+
+	const { value, onChange } = props as SingleProps;
+	return (
+		<Select
+			id={id}
+			value={value}
+			onChange={onChange}
+			placeholder={placeholder}
+			className={cx('roles-select', className)}
+			loading={loading}
+			notFoundContent={notFoundContent}
+			options={options}
+			getPopupContainer={getPopupContainer}
+		/>
+	);
+}
+
+export default RolesSelect;

frontend/src/components/RolesSelect/index.ts

@@ -0,0 +1,2 @@
+export type { RoleOption, RolesSelectProps } from './RolesSelect';
+export { default, getRoleOptions, useRoles } from './RolesSelect';

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

@@ -0,0 +1,179 @@
+.add-key-modal {
+	[data-slot='dialog-description'] {
+		padding: 0;
+	}
+
+	&__form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+		padding: var(--padding-4);
+	}
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-4);
+	}
+
+	&__label {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+	}
+
+	&__input {
+		height: 32px;
+		background: var(--l2-background);
+		border-color: var(--border);
+		color: var(--l1-foreground);
+		box-shadow: none;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+	}
+
+	&__expiry-toggle {
+		width: 60%;
+		display: flex;
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		overflow: hidden;
+		padding: 0;
+		gap: 0;
+
+		[data-slot='toggle-group'] {
+			width: 100%;
+			display: flex;
+		}
+
+		&-btn {
+			flex: 1;
+			height: 32px;
+			border-radius: 0;
+			font-size: var(--label-small-400-font-size);
+			font-weight: var(--label-small-400-font-weight);
+			line-height: var(--label-small-400-line-height);
+			justify-content: center;
+			background: transparent;
+			border: none;
+			border-right: 1px solid var(--border);
+			color: var(--foreground);
+
+			&:last-child {
+				border-right: none;
+			}
+
+			&[data-state='on'] {
+				background: var(--l2-background);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	&__datepicker {
+		width: 100%;
+		height: 32px;
+
+		.ant-picker {
+			background: var(--l2-background);
+			border-color: var(--border);
+			border-radius: 2px;
+			width: 100%;
+			height: 32px;
+
+			input {
+				color: var(--l1-foreground);
+				font-size: var(--font-size-sm);
+			}
+
+			.ant-picker-suffix {
+				color: var(--foreground);
+			}
+		}
+
+		.add-key-modal-datepicker-popup {
+			border-radius: 4px;
+			border: 1px solid var(--secondary);
+			background: var(--popover);
+			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		}
+	}
+
+	&__key-display {
+		display: flex;
+		align-items: center;
+		height: 32px;
+		background: var(--l2-background);
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		overflow: hidden;
+	}
+
+	&__key-text {
+		flex: 1;
+		min-width: 0;
+		padding: 0 var(--padding-2);
+		font-size: var(--font-size-sm);
+		color: var(--l1-foreground);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-family: monospace;
+	}
+
+	&__copy-btn {
+		flex-shrink: 0;
+		height: 32px;
+		border-radius: 0 2px 2px 0;
+		border-top: none;
+		border-right: none;
+		border-bottom: none;
+		border-left: 1px solid var(--border);
+		min-width: 40px;
+	}
+
+	&__expiry-meta {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+	}
+
+	&__expiry-label {
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-medium);
+		color: var(--foreground);
+		letter-spacing: 0.48px;
+		text-transform: uppercase;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: var(--padding-4);
+		border-top: 1px solid var(--secondary);
+	}
+
+	&__footer-right {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+	}
+
+	&__learn-more {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-1);
+		color: var(--primary);
+		font-size: var(--font-size-sm);
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx

@@ -0,0 +1,52 @@
+import { Badge } from '@signozhq/badge';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
+import { Check, Copy } from '@signozhq/icons';
+import type { ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO } from 'api/generated/services/sigNoz.schemas';
+
+export interface KeyCreatedPhaseProps {
+	createdKey: ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO;
+	hasCopied: boolean;
+	expiryLabel: string;
+	onCopy: () => void;
+}
+
+function KeyCreatedPhase({
+	createdKey,
+	hasCopied,
+	expiryLabel,
+	onCopy,
+}: KeyCreatedPhaseProps): JSX.Element {
+	return (
+		<div className="add-key-modal__form">
+			<div className="add-key-modal__field">
+				<span className="add-key-modal__label">Key</span>
+				<div className="add-key-modal__key-display">
+					<span className="add-key-modal__key-text">{createdKey.key}</span>
+					<Button
+						variant="outlined"
+						color="secondary"
+						size="sm"
+						onClick={onCopy}
+						className="add-key-modal__copy-btn"
+					>
+						{hasCopied ? <Check size={12} /> : <Copy size={12} />}
+					</Button>
+				</div>
+			</div>
+
+			<div className="add-key-modal__expiry-meta">
+				<span className="add-key-modal__expiry-label">Expiration</span>
+				<Badge color="vanilla">{expiryLabel}</Badge>
+			</div>
+
+			<Callout
+				type="info"
+				showIcon
+				message="Store the key securely. This is the only time it will be displayed."
+			/>
+		</div>
+	);
+}
+
+export default KeyCreatedPhase;

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -0,0 +1,130 @@
+import type { Control, UseFormRegister } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+import { Button } from '@signozhq/button';
+import { Input } from '@signozhq/input';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { DatePicker } from 'antd';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { disabledDate } from '../utils';
+import type { FormValues } from './types';
+import { ExpiryMode, FORM_ID } from './types';
+
+export interface KeyFormPhaseProps {
+	register: UseFormRegister<FormValues>;
+	control: Control<FormValues>;
+	expiryMode: ExpiryMode;
+	isSubmitting: boolean;
+	isValid: boolean;
+	onSubmit: () => void;
+	onClose: () => void;
+}
+
+function KeyFormPhase({
+	register,
+	control,
+	expiryMode,
+	isSubmitting,
+	isValid,
+	onSubmit,
+	onClose,
+}: KeyFormPhaseProps): JSX.Element {
+	return (
+		<>
+			<form id={FORM_ID} className="add-key-modal__form" onSubmit={onSubmit}>
+				<div className="add-key-modal__field">
+					<label className="add-key-modal__label" htmlFor="key-name">
+						Name <span style={{ color: 'var(--destructive)' }}>*</span>
+					</label>
+					<Input
+						id="key-name"
+						placeholder="Enter key name e.g.: Service Owner"
+						className="add-key-modal__input"
+						{...register('keyName', {
+							required: true,
+							validate: (v) => !!v.trim(),
+						})}
+					/>
+				</div>
+
+				<div className="add-key-modal__field">
+					<span className="add-key-modal__label">Expiration</span>
+					<Controller
+						name="expiryMode"
+						control={control}
+						render={({ field }): JSX.Element => (
+							<ToggleGroup
+								type="single"
+								value={field.value}
+								onValueChange={(val): void => {
+									if (val) {
+										field.onChange(val);
+									}
+								}}
+								className="add-key-modal__expiry-toggle"
+							>
+								<ToggleGroupItem
+									value={ExpiryMode.NONE}
+									className="add-key-modal__expiry-toggle-btn"
+								>
+									No Expiration
+								</ToggleGroupItem>
+								<ToggleGroupItem
+									value={ExpiryMode.DATE}
+									className="add-key-modal__expiry-toggle-btn"
+								>
+									Set Expiration Date
+								</ToggleGroupItem>
+							</ToggleGroup>
+						)}
+					/>
+				</div>
+
+				{expiryMode === ExpiryMode.DATE && (
+					<div className="add-key-modal__field">
+						<label className="add-key-modal__label" htmlFor="expiry-date">
+							Expiration Date
+						</label>
+						<div className="add-key-modal__datepicker">
+							<Controller
+								name="expiryDate"
+								control={control}
+								render={({ field }): JSX.Element => (
+									<DatePicker
+										id="expiry-date"
+										value={field.value}
+										onChange={field.onChange}
+										popupClassName="add-key-modal-datepicker-popup"
+										getPopupContainer={popupContainer}
+										disabledDate={disabledDate}
+									/>
+								)}
+							/>
+						</div>
+					</div>
+				)}
+			</form>
+
+			<div className="add-key-modal__footer">
+				<div className="add-key-modal__footer-right">
+					<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
+						Cancel
+					</Button>
+					<Button
+						type="submit"
+						form={FORM_ID}
+						variant="solid"
+						color="primary"
+						size="sm"
+						loading={isSubmitting}
+						disabled={!isValid}
+					>
+						Create Key
+					</Button>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default KeyFormPhase;

frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx

@@ -0,0 +1,175 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useQueryClient } from 'react-query';
+import { DialogWrapper } from '@signozhq/dialog';
+import { toast } from '@signozhq/sonner';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	invalidateListServiceAccountKeys,
+	useCreateServiceAccountKey,
+} from 'api/generated/services/serviceaccount';
+import type {
+	RenderErrorResponseDTO,
+	ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
+import { parseAsBoolean, useQueryState } from 'nuqs';
+
+import KeyCreatedPhase from './KeyCreatedPhase';
+import KeyFormPhase from './KeyFormPhase';
+import type { FormValues } from './types';
+import { DEFAULT_FORM_VALUES, ExpiryMode, Phase, PHASE_TITLES } from './types';
+
+import './AddKeyModal.styles.scss';
+
+function AddKeyModal(): JSX.Element {
+	const queryClient = useQueryClient();
+	const [accountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
+	const [isAddKeyOpen, setIsAddKeyOpen] = useQueryState(
+		SA_QUERY_PARAMS.ADD_KEY,
+		parseAsBoolean.withDefault(false),
+	);
+	const open = isAddKeyOpen && !!accountId;
+
+	const [phase, setPhase] = useState<Phase>(Phase.FORM);
+	const [
+		createdKey,
+		setCreatedKey,
+	] = useState<ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO | null>(null);
+	const [hasCopied, setHasCopied] = useState(false);
+
+	const {
+		control,
+		register,
+		handleSubmit,
+		reset,
+		watch,
+		formState: { isValid },
+	} = useForm<FormValues>({
+		mode: 'onChange',
+		defaultValues: DEFAULT_FORM_VALUES,
+	});
+
+	const expiryMode = watch('expiryMode');
+	const expiryDate = watch('expiryDate');
+
+	useEffect(() => {
+		if (open) {
+			setPhase(Phase.FORM);
+			setCreatedKey(null);
+			setHasCopied(false);
+			reset();
+		}
+	}, [open, reset]);
+
+	const {
+		mutate: createKey,
+		isLoading: isSubmitting,
+	} = useCreateServiceAccountKey({
+		mutation: {
+			onSuccess: async (response) => {
+				const keyData = response?.data;
+				if (keyData) {
+					setCreatedKey(keyData);
+					setPhase(Phase.CREATED);
+					if (accountId) {
+						await invalidateListServiceAccountKeys(queryClient, { id: accountId });
+					}
+				}
+			},
+			onError: (error) => {
+				const errMessage =
+					convertToApiError(
+						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					)?.getErrorMessage() || 'Failed to create key';
+				toast.error(errMessage, { richColors: true });
+			},
+		},
+	});
+
+	function handleCreate({
+		keyName,
+		expiryMode: mode,
+		expiryDate: date,
+	}: FormValues): void {
+		if (!accountId) {
+			return;
+		}
+		const expiresAt =
+			mode === ExpiryMode.DATE && date ? date.endOf('day').unix() : 0;
+		createKey({
+			pathParams: { id: accountId },
+			data: { name: keyName.trim(), expiresAt },
+		});
+	}
+
+	const handleCopy = useCallback(async (): Promise<void> => {
+		if (!createdKey?.key) {
+			return;
+		}
+		try {
+			await navigator.clipboard.writeText(createdKey.key);
+			setHasCopied(true);
+			setTimeout(() => setHasCopied(false), 2000);
+			toast.success('Key copied to clipboard', { richColors: true });
+		} catch {
+			toast.error('Failed to copy key', { richColors: true });
+		}
+	}, [createdKey]);
+
+	const handleClose = useCallback((): void => {
+		setIsAddKeyOpen(null);
+	}, [setIsAddKeyOpen]);
+
+	function getExpiryLabel(): string {
+		if (expiryMode === ExpiryMode.NONE || !expiryDate) {
+			return 'Never';
+		}
+		try {
+			return expiryDate.format(DATE_TIME_FORMATS.MONTH_DATE);
+		} catch {
+			return 'Never';
+		}
+	}
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					handleClose();
+				}
+			}}
+			title={PHASE_TITLES[phase]}
+			width="base"
+			className="add-key-modal"
+			showCloseButton
+			disableOutsideClick={false}
+		>
+			{phase === Phase.FORM && (
+				<KeyFormPhase
+					register={register}
+					control={control}
+					expiryMode={expiryMode}
+					isSubmitting={isSubmitting}
+					isValid={isValid}
+					onSubmit={handleSubmit(handleCreate)}
+					onClose={handleClose}
+				/>
+			)}
+
+			{phase === Phase.CREATED && createdKey && (
+				<KeyCreatedPhase
+					createdKey={createdKey}
+					hasCopied={hasCopied}
+					expiryLabel={getExpiryLabel()}
+					onCopy={handleCopy}
+				/>
+			)}
+		</DialogWrapper>
+	);
+}
+
+export default AddKeyModal;

frontend/src/components/ServiceAccountDrawer/AddKeyModal/types.ts

@@ -0,0 +1,30 @@
+import type { Dayjs } from 'dayjs';
+
+export const enum Phase {
+	FORM = 'form',
+	CREATED = 'created',
+}
+
+export const enum ExpiryMode {
+	NONE = 'none',
+	DATE = 'date',
+}
+
+export const FORM_ID = 'add-key-form';
+
+export const PHASE_TITLES: Record<Phase, string> = {
+	[Phase.FORM]: 'Add a New Key',
+	[Phase.CREATED]: 'Key Created Successfully',
+};
+
+export interface FormValues {
+	keyName: string;
+	expiryMode: ExpiryMode;
+	expiryDate: Dayjs | null;
+}
+
+export const DEFAULT_FORM_VALUES: FormValues = {
+	keyName: '',
+	expiryMode: ExpiryMode.NONE,
+	expiryDate: null,
+};

frontend/src/components/ServiceAccountDrawer/DisableAccountModal.tsx

@@ -0,0 +1,109 @@
+import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { PowerOff, X } from '@signozhq/icons';
+import { toast } from '@signozhq/sonner';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	getGetServiceAccountQueryKey,
+	invalidateListServiceAccounts,
+	useUpdateServiceAccountStatus,
+} from 'api/generated/services/serviceaccount';
+import type {
+	RenderErrorResponseDTO,
+	ServiceaccounttypesServiceAccountDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
+import { parseAsBoolean, useQueryState } from 'nuqs';
+
+function DisableAccountModal(): JSX.Element {
+	const queryClient = useQueryClient();
+	const [accountId, setAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
+	const [isDisableOpen, setIsDisableOpen] = useQueryState(
+		SA_QUERY_PARAMS.DISABLE_SA,
+		parseAsBoolean.withDefault(false),
+	);
+	const open = !!isDisableOpen && !!accountId;
+
+	const cachedAccount = accountId
+		? queryClient.getQueryData<{
+				data: ServiceaccounttypesServiceAccountDTO;
+		  }>(getGetServiceAccountQueryKey({ id: accountId }))
+		: null;
+	const accountName = cachedAccount?.data?.name;
+
+	const {
+		mutate: updateStatus,
+		isLoading: isDisabling,
+	} = useUpdateServiceAccountStatus({
+		mutation: {
+			onSuccess: async () => {
+				toast.success('Service account disabled', { richColors: true });
+				await setIsDisableOpen(null);
+				await setAccountId(null);
+				await invalidateListServiceAccounts(queryClient);
+			},
+			onError: (error) => {
+				const errMessage =
+					convertToApiError(
+						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					)?.getErrorMessage() || 'Failed to disable service account';
+				toast.error(errMessage, { richColors: true });
+			},
+		},
+	});
+
+	function handleConfirm(): void {
+		if (!accountId) {
+			return;
+		}
+		updateStatus({
+			pathParams: { id: accountId },
+			data: { status: 'DISABLED' },
+		});
+	}
+
+	function handleCancel(): void {
+		setIsDisableOpen(null);
+	}
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					handleCancel();
+				}
+			}}
+			title={`Disable service account ${accountName ?? ''}?`}
+			width="narrow"
+			className="alert-dialog sa-disable-dialog"
+			showCloseButton={false}
+			disableOutsideClick={false}
+		>
+			<p className="sa-disable-dialog__body">
+				Disabling this service account will revoke access for all its keys. Any
+				systems using this account will lose access immediately.
+			</p>
+			<DialogFooter className="sa-disable-dialog__footer">
+				<Button variant="solid" color="secondary" size="sm" onClick={handleCancel}>
+					<X size={12} />
+					Cancel
+				</Button>
+				<Button
+					variant="solid"
+					color="destructive"
+					size="sm"
+					loading={isDisabling}
+					onClick={handleConfirm}
+				>
+					<PowerOff size={12} />
+					Disable
+				</Button>
+			</DialogFooter>
+		</DialogWrapper>
+	);
+}
+
+export default DisableAccountModal;

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -0,0 +1,165 @@
+import type { Control, UseFormRegister } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+import { Badge } from '@signozhq/badge';
+import { Button } from '@signozhq/button';
+import { LockKeyhole, Trash2, X } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { DatePicker } from 'antd';
+import type { ServiceaccounttypesFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { disabledDate, formatLastObservedAt } from '../utils';
+import type { FormValues } from './types';
+import { ExpiryMode, FORM_ID } from './types';
+
+export interface EditKeyFormProps {
+	register: UseFormRegister<FormValues>;
+	control: Control<FormValues>;
+	expiryMode: ExpiryMode;
+	keyItem: ServiceaccounttypesFactorAPIKeyDTO | null;
+	isSaving: boolean;
+	isDirty: boolean;
+	onSubmit: () => void;
+	onClose: () => void;
+	onRevokeClick: () => void;
+	formatTimezoneAdjustedTimestamp: (ts: string, format: string) => string;
+}
+
+function EditKeyForm({
+	register,
+	control,
+	expiryMode,
+	keyItem,
+	isSaving,
+	isDirty,
+	onSubmit,
+	onClose,
+	onRevokeClick,
+	formatTimezoneAdjustedTimestamp,
+}: EditKeyFormProps): JSX.Element {
+	return (
+		<>
+			<form id={FORM_ID} className="edit-key-modal__form" onSubmit={onSubmit}>
+				<div className="edit-key-modal__field">
+					<label className="edit-key-modal__label" htmlFor="edit-key-name">
+						Name
+					</label>
+					<Input
+						id="edit-key-name"
+						className="edit-key-modal__input"
+						placeholder="Enter key name"
+						{...register('name')}
+					/>
+				</div>
+
+				<div className="edit-key-modal__field">
+					<label className="edit-key-modal__label" htmlFor="edit-key-display">
+						Key
+					</label>
+					<div id="edit-key-display" className="edit-key-modal__key-display">
+						<span className="edit-key-modal__key-text">********************</span>
+						<LockKeyhole size={12} className="edit-key-modal__lock-icon" />
+					</div>
+				</div>
+
+				<div className="edit-key-modal__field">
+					<span className="edit-key-modal__label">Expiration</span>
+					<Controller
+						name="expiryMode"
+						control={control}
+						render={({ field }): JSX.Element => (
+							<ToggleGroup
+								type="single"
+								value={field.value}
+								onValueChange={(val): void => {
+									if (val) {
+										field.onChange(val);
+									}
+								}}
+								className="edit-key-modal__expiry-toggle"
+							>
+								<ToggleGroupItem
+									value={ExpiryMode.NONE}
+									className="edit-key-modal__expiry-toggle-btn"
+								>
+									No Expiration
+								</ToggleGroupItem>
+								<ToggleGroupItem
+									value={ExpiryMode.DATE}
+									className="edit-key-modal__expiry-toggle-btn"
+								>
+									Set Expiration Date
+								</ToggleGroupItem>
+							</ToggleGroup>
+						)}
+					/>
+				</div>
+
+				{expiryMode === ExpiryMode.DATE && (
+					<div className="edit-key-modal__field">
+						<label className="edit-key-modal__label" htmlFor="edit-key-datepicker">
+							Expiration Date
+						</label>
+						<div className="edit-key-modal__datepicker">
+							<Controller
+								name="expiresAt"
+								control={control}
+								render={({ field }): JSX.Element => (
+									<DatePicker
+										value={field.value}
+										id="edit-key-datepicker"
+										onChange={field.onChange}
+										popupClassName="edit-key-modal-datepicker-popup"
+										getPopupContainer={popupContainer}
+										disabledDate={disabledDate}
+									/>
+								)}
+							/>
+						</div>
+					</div>
+				)}
+
+				<div className="edit-key-modal__meta">
+					<span className="edit-key-modal__meta-label">Last Observed At</span>
+					<Badge color="vanilla">
+						{formatLastObservedAt(
+							keyItem?.lastObservedAt ?? null,
+							formatTimezoneAdjustedTimestamp,
+						)}
+					</Badge>
+				</div>
+			</form>
+
+			<div className="edit-key-modal__footer">
+				<Button
+					type="button"
+					className="edit-key-modal__footer-danger"
+					onClick={onRevokeClick}
+				>
+					<Trash2 size={12} />
+					Revoke Key
+				</Button>
+				<div className="edit-key-modal__footer-right">
+					<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
+						<X size={12} />
+						Cancel
+					</Button>
+					<Button
+						type="submit"
+						form={FORM_ID}
+						variant="solid"
+						color="primary"
+						size="sm"
+						loading={isSaving}
+						disabled={!isDirty}
+					>
+						Save Changes
+					</Button>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default EditKeyForm;

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

@@ -0,0 +1,188 @@
+.edit-key-modal {
+	[data-slot='dialog-description'] {
+		padding: 0;
+	}
+
+	&__form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+		padding: var(--padding-4);
+	}
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-4);
+	}
+
+	&__label {
+		font-size: 13px;
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+	}
+
+	&__input {
+		height: 32px;
+		background: var(--l2-background);
+		border-color: var(--border);
+		color: var(--l1-foreground);
+		box-shadow: none;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+	}
+
+	&__key-display {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 32px;
+		padding: 0 var(--padding-2);
+		border-radius: 2px;
+		background: var(--l2-background);
+		border: 1px solid var(--border);
+		cursor: not-allowed;
+		opacity: 0.8;
+	}
+
+	&__key-text {
+		font-size: 13px;
+		font-family: monospace;
+		color: var(--foreground);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex: 1;
+		letter-spacing: 2px;
+	}
+
+	&__lock-icon {
+		color: var(--foreground);
+		flex-shrink: 0;
+		margin-left: 6px;
+		opacity: 0.6;
+	}
+
+	&__expiry-toggle {
+		width: 60%;
+		display: flex;
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		overflow: hidden;
+		padding: 0;
+		gap: 0;
+
+		[data-slot='toggle-group'] {
+			width: 100%;
+			display: flex;
+		}
+
+		&-btn {
+			flex: 1;
+			height: 32px;
+			border-radius: 0;
+			font-size: var(--label-small-400-font-size);
+			font-weight: var(--label-small-400-font-weight);
+			line-height: var(--label-small-400-line-height);
+			justify-content: center;
+			background: transparent;
+			border: none;
+			border-right: 1px solid var(--border);
+			color: var(--foreground);
+			white-space: nowrap;
+
+			&:last-child {
+				border-right: none;
+			}
+
+			&[data-state='on'] {
+				background: var(--l2-background);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	&__datepicker {
+		width: 100%;
+		height: 32px;
+
+		.ant-picker {
+			background: var(--l2-background);
+			border-color: var(--border);
+			border-radius: 2px;
+			width: 100%;
+			height: 32px;
+
+			input {
+				color: var(--l1-foreground);
+				font-size: 13px;
+			}
+
+			.ant-picker-suffix {
+				color: var(--foreground);
+			}
+		}
+
+		.edit-key-modal-datepicker-popup {
+			border-radius: 4px;
+			border: 1px solid var(--secondary);
+			background: var(--popover);
+			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		}
+	}
+
+	&__meta {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+	}
+
+	&__meta-label {
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-medium);
+		color: var(--foreground);
+		letter-spacing: 0.48px;
+		text-transform: uppercase;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--padding-4);
+		border-top: 1px solid var(--secondary);
+	}
+
+	&__footer-right {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+	}
+
+	&__footer-danger {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-2);
+		padding: 0;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		color: var(--destructive);
+		font-size: var(--label-small-400-font-size);
+		font-weight: var(--label-small-400-font-weight);
+		transition: opacity 0.15s ease;
+
+		&:hover {
+			opacity: 0.8;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
+}

frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx

@@ -0,0 +1,189 @@
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useQueryClient } from 'react-query';
+import { DialogWrapper } from '@signozhq/dialog';
+import { toast } from '@signozhq/sonner';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	invalidateListServiceAccountKeys,
+	useRevokeServiceAccountKey,
+	useUpdateServiceAccountKey,
+} from 'api/generated/services/serviceaccount';
+import type {
+	RenderErrorResponseDTO,
+	ServiceaccounttypesFactorAPIKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
+import dayjs from 'dayjs';
+import { parseAsString, useQueryState } from 'nuqs';
+import { useTimezone } from 'providers/Timezone';
+
+import { RevokeKeyContent } from '../RevokeKeyModal';
+import EditKeyForm from './EditKeyForm';
+import type { FormValues } from './types';
+import { DEFAULT_FORM_VALUES, ExpiryMode } from './types';
+
+import './EditKeyModal.styles.scss';
+
+export interface EditKeyModalProps {
+	keyItem: ServiceaccounttypesFactorAPIKeyDTO | null;
+}
+
+function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
+	const queryClient = useQueryClient();
+	const [selectedAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
+	const [editKeyId, setEditKeyId] = useQueryState(
+		SA_QUERY_PARAMS.EDIT_KEY,
+		parseAsString.withDefault(''),
+	);
+
+	const open = !!editKeyId && !!selectedAccountId;
+
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const [isRevokeConfirmOpen, setIsRevokeConfirmOpen] = useState(false);
+
+	const {
+		register,
+		control,
+		reset,
+		watch,
+		formState: { isDirty },
+		handleSubmit,
+	} = useForm<FormValues>({
+		defaultValues: DEFAULT_FORM_VALUES,
+	});
+
+	useEffect(() => {
+		if (keyItem) {
+			reset({
+				name: keyItem.name ?? '',
+				expiryMode: keyItem.expiresAt === 0 ? ExpiryMode.NONE : ExpiryMode.DATE,
+				expiresAt: keyItem.expiresAt === 0 ? null : dayjs.unix(keyItem.expiresAt),
+			});
+		}
+	}, [keyItem?.id, reset]); // eslint-disable-line react-hooks/exhaustive-deps
+
+	const expiryMode = watch('expiryMode');
+
+	const { mutate: updateKey, isLoading: isSaving } = useUpdateServiceAccountKey({
+		mutation: {
+			onSuccess: async () => {
+				toast.success('Key updated successfully', { richColors: true });
+				await setEditKeyId(null);
+				if (selectedAccountId) {
+					await invalidateListServiceAccountKeys(queryClient, {
+						id: selectedAccountId,
+					});
+				}
+			},
+			onError: (error) => {
+				const errMessage =
+					convertToApiError(
+						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					)?.getErrorMessage() || 'Failed to update key';
+				toast.error(errMessage, { richColors: true });
+			},
+		},
+	});
+
+	const {
+		mutate: revokeKey,
+		isLoading: isRevoking,
+	} = useRevokeServiceAccountKey({
+		mutation: {
+			onSuccess: async () => {
+				toast.success('Key revoked successfully', { richColors: true });
+				setIsRevokeConfirmOpen(false);
+				await setEditKeyId(null);
+				if (selectedAccountId) {
+					await invalidateListServiceAccountKeys(queryClient, {
+						id: selectedAccountId,
+					});
+				}
+			},
+			onError: (error) => {
+				const errMessage =
+					convertToApiError(
+						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					)?.getErrorMessage() || 'Failed to revoke key';
+				toast.error(errMessage, { richColors: true });
+			},
+		},
+	});
+
+	function handleClose(): void {
+		setEditKeyId(null);
+		setIsRevokeConfirmOpen(false);
+	}
+
+	const onSubmit = handleSubmit(
+		({ name, expiryMode: mode, expiresAt }): void => {
+			if (!keyItem || !selectedAccountId) {
+				return;
+			}
+			const currentExpiresAt =
+				mode === ExpiryMode.NONE || !expiresAt ? 0 : expiresAt.endOf('day').unix();
+			updateKey({
+				pathParams: { id: selectedAccountId, fid: keyItem.id },
+				data: { name, expiresAt: currentExpiresAt },
+			});
+		},
+	);
+
+	function handleRevoke(): void {
+		if (!keyItem || !selectedAccountId) {
+			return;
+		}
+		revokeKey({ pathParams: { id: selectedAccountId, fid: keyItem.id } });
+	}
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					if (isRevokeConfirmOpen) {
+						setIsRevokeConfirmOpen(false);
+					} else {
+						handleClose();
+					}
+				}
+			}}
+			title={
+				isRevokeConfirmOpen
+					? `Revoke ${keyItem?.name ?? 'key'}?`
+					: 'Edit Key Details'
+			}
+			width={isRevokeConfirmOpen ? 'narrow' : 'base'}
+			className={
+				isRevokeConfirmOpen ? 'alert-dialog delete-dialog' : 'edit-key-modal'
+			}
+			showCloseButton={!isRevokeConfirmOpen}
+			disableOutsideClick={false}
+		>
+			{isRevokeConfirmOpen ? (
+				<RevokeKeyContent
+					isRevoking={isRevoking}
+					onCancel={(): void => setIsRevokeConfirmOpen(false)}
+					onConfirm={handleRevoke}
+				/>
+			) : (
+				<EditKeyForm
+					register={register}
+					control={control}
+					expiryMode={expiryMode}
+					keyItem={keyItem}
+					isSaving={isSaving}
+					isDirty={isDirty}
+					onSubmit={onSubmit}
+					onClose={handleClose}
+					onRevokeClick={(): void => setIsRevokeConfirmOpen(true)}
+					formatTimezoneAdjustedTimestamp={formatTimezoneAdjustedTimestamp}
+				/>
+			)}
+		</DialogWrapper>
+	);
+}
+
+export default EditKeyModal;

frontend/src/components/ServiceAccountDrawer/EditKeyModal/types.ts

@@ -0,0 +1,20 @@
+import type { Dayjs } from 'dayjs';
+
+export const enum ExpiryMode {
+	NONE = 'none',
+	DATE = 'date',
+}
+
+export const FORM_ID = 'edit-key-form';
+
+export interface FormValues {
+	name: string;
+	expiryMode: ExpiryMode;
+	expiresAt: Dayjs | null;
+}
+
+export const DEFAULT_FORM_VALUES: FormValues = {
+	name: '',
+	expiryMode: ExpiryMode.NONE,
+	expiresAt: null,
+};

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -0,0 +1,237 @@
+import { useCallback, useMemo } from 'react';
+import { Button } from '@signozhq/button';
+import { KeyRound, X } from '@signozhq/icons';
+import { Skeleton, Table, Tooltip } from 'antd';
+import type { ColumnsType } from 'antd/es/table/interface';
+import type { ServiceaccounttypesFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
+import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs';
+import { useTimezone } from 'providers/Timezone';
+
+import EditKeyModal from './EditKeyModal';
+import RevokeKeyModal from './RevokeKeyModal';
+import { formatLastObservedAt } from './utils';
+
+interface KeysTabProps {
+	keys: ServiceaccounttypesFactorAPIKeyDTO[];
+	isLoading: boolean;
+	isDisabled?: boolean;
+	currentPage: number;
+	pageSize: number;
+}
+
+interface BuildColumnsParams {
+	isDisabled: boolean;
+	onRevokeClick: (keyId: string) => void;
+	handleformatLastObservedAt: (
+		lastObservedAt: Date | null | undefined,
+	) => string;
+}
+
+function formatExpiry(expiresAt: number): JSX.Element {
+	if (expiresAt === 0) {
+		return <span className="keys-tab__expiry--never">Never</span>;
+	}
+	const expiryDate = dayjs.unix(expiresAt);
+	if (expiryDate.isBefore(dayjs())) {
+		return <span className="keys-tab__expiry--expired">Expired</span>;
+	}
+	return <span>{expiryDate.format(DATE_TIME_FORMATS.MONTH_DATE)}</span>;
+}
+
+function buildColumns({
+	isDisabled,
+	onRevokeClick,
+	handleformatLastObservedAt,
+}: BuildColumnsParams): ColumnsType<ServiceaccounttypesFactorAPIKeyDTO> {
+	return [
+		{
+			title: 'Name',
+			dataIndex: 'name',
+			key: 'name',
+			className: 'keys-tab__name-column',
+			sorter: (a, b): number => (a.name ?? '').localeCompare(b.name ?? ''),
+			render: (_, record): JSX.Element => (
+				<span className="keys-tab__name-text">{record.name ?? '—'}</span>
+			),
+		},
+		{
+			title: 'Expiry',
+			dataIndex: 'expiresAt',
+			key: 'expiry',
+			width: 160,
+			align: 'right' as const,
+			sorter: (a, b): number => {
+				const aVal = a.expiresAt === 0 ? Infinity : a.expiresAt;
+				const bVal = b.expiresAt === 0 ? Infinity : b.expiresAt;
+				return aVal - bVal;
+			},
+			render: (expiresAt: number): JSX.Element => formatExpiry(expiresAt),
+		},
+		{
+			title: 'Last Observed At',
+			dataIndex: 'lastObservedAt',
+			key: 'lastObservedAt',
+			width: 220,
+			align: 'right' as const,
+			sorter: (a, b): number => {
+				const aVal = a.lastObservedAt
+					? new Date(a.lastObservedAt).getTime()
+					: -Infinity;
+				const bVal = b.lastObservedAt
+					? new Date(b.lastObservedAt).getTime()
+					: -Infinity;
+				return aVal - bVal;
+			},
+			render: (lastObservedAt: Date | null | undefined): string =>
+				handleformatLastObservedAt(lastObservedAt),
+		},
+		{
+			title: '',
+			key: 'action',
+			width: 48,
+			align: 'right' as const,
+			render: (_, record): JSX.Element => (
+				<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
+					<Button
+						variant="ghost"
+						size="xs"
+						color="destructive"
+						disabled={isDisabled}
+						onClick={(e): void => {
+							e.stopPropagation();
+							onRevokeClick(record.id);
+						}}
+						className="keys-tab__revoke-btn"
+					>
+						<X size={12} />
+					</Button>
+				</Tooltip>
+			),
+		},
+	];
+}
+
+function KeysTab({
+	keys,
+	isLoading,
+	isDisabled = false,
+	currentPage,
+	pageSize,
+}: KeysTabProps): JSX.Element {
+	const [, setIsAddKeyOpen] = useQueryState(
+		'add-key',
+		parseAsBoolean.withDefault(false),
+	);
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const [editKeyId, setEditKeyId] = useQueryState(
+		'edit-key',
+		parseAsString.withDefault(''),
+	);
+	const [, setRevokeKeyId] = useQueryState(
+		'revoke-key',
+		parseAsString.withDefault(''),
+	);
+	const editKey = keys.find((k) => k.id === editKeyId) ?? null;
+
+	const handleformatLastObservedAt = useCallback(
+		(lastObservedAt: Date | null | undefined): string =>
+			formatLastObservedAt(lastObservedAt, formatTimezoneAdjustedTimestamp),
+		[formatTimezoneAdjustedTimestamp],
+	);
+
+	const onRevokeClick = useCallback(
+		(keyId: string): void => {
+			setRevokeKeyId(keyId);
+		},
+		[setRevokeKeyId],
+	);
+
+	const columns = useMemo(
+		() => buildColumns({ isDisabled, onRevokeClick, handleformatLastObservedAt }),
+		[isDisabled, onRevokeClick, handleformatLastObservedAt],
+	);
+
+	if (isLoading) {
+		return (
+			<div className="keys-tab__loading">
+				<Skeleton active paragraph={{ rows: 4 }} />
+			</div>
+		);
+	}
+
+	if (keys.length === 0) {
+		return (
+			<div className="keys-tab__empty">
+				<KeyRound size={24} className="keys-tab__empty-icon" />
+				<p className="keys-tab__empty-text">No keys. Start by creating one.</p>
+				<Button
+					type="button"
+					className="keys-tab__learn-more"
+					onClick={async (): Promise<void> => {
+						await setIsAddKeyOpen(true);
+					}}
+					disabled={isDisabled}
+				>
+					+ Add your first key
+				</Button>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			{/* Todo: use new table component from periscope when ready */}
+			<Table<ServiceaccounttypesFactorAPIKeyDTO>
+				columns={columns}
+				dataSource={keys}
+				rowKey="id"
+				pagination={{
+					style: { display: 'none' },
+					current: currentPage,
+					pageSize,
+				}}
+				showSorterTooltip={false}
+				className={`keys-tab__table${
+					isDisabled ? ' keys-tab__table--disabled' : ''
+				}`}
+				rowClassName={(_, index): string =>
+					index % 2 === 0 ? 'keys-tab__table-row--alt' : ''
+				}
+				onRow={(
+					record,
+				): {
+					onClick: () => void;
+					onKeyDown: (e: React.KeyboardEvent) => void;
+					role: string;
+					tabIndex: number;
+					'aria-label': string;
+				} => ({
+					onClick: async (): Promise<void> => {
+						if (!isDisabled) {
+							await setEditKeyId(record.id);
+						}
+					},
+					onKeyDown: async (e: React.KeyboardEvent): Promise<void> => {
+						if ((e.key === 'Enter' || e.key === ' ') && !isDisabled) {
+							if (e.key === ' ') {
+								e.preventDefault();
+							}
+							await setEditKeyId(record.id);
+						}
+					},
+					role: 'button',
+					tabIndex: 0,
+					'aria-label': `Edit key ${record.name || 'options'}`,
+				})}
+			/>
+
+			<EditKeyModal keyItem={editKey} />
+
+			<RevokeKeyModal />
+		</>
+	);
+}
+
+export default KeysTab;

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -0,0 +1,150 @@
+import { useCallback } from 'react';
+import { Badge } from '@signozhq/badge';
+import { LockKeyhole } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import RolesSelect from 'components/RolesSelect';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
+import { useTimezone } from 'providers/Timezone';
+import APIError from 'types/api/error';
+
+interface OverviewTabProps {
+	account: ServiceAccountRow;
+	localName: string;
+	onNameChange: (v: string) => void;
+	localRoles: string[];
+	onRolesChange: (v: string[]) => void;
+	isDisabled: boolean;
+	availableRoles: AuthtypesRoleDTO[];
+	rolesLoading?: boolean;
+	rolesError?: boolean;
+	rolesErrorObj?: APIError | undefined;
+	onRefetchRoles?: () => void;
+}
+
+function OverviewTab({
+	account,
+	localName,
+	onNameChange,
+	localRoles,
+	onRolesChange,
+	isDisabled,
+	availableRoles,
+	rolesLoading,
+	rolesError,
+	rolesErrorObj,
+	onRefetchRoles,
+}: OverviewTabProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const formatTimestamp = useCallback(
+		(ts: string | null | undefined): string => {
+			if (!ts) {
+				return '—';
+			}
+			const d = new Date(ts);
+			if (Number.isNaN(d.getTime())) {
+				return '—';
+			}
+			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
+		},
+		[formatTimezoneAdjustedTimestamp],
+	);
+
+	return (
+		<>
+			<div className="sa-drawer__field">
+				<label className="sa-drawer__label" htmlFor="sa-name">
+					Name
+				</label>
+				{isDisabled ? (
+					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
+						<span className="sa-drawer__input-text">{localName || '—'}</span>
+						<LockKeyhole size={14} className="sa-drawer__lock-icon" />
+					</div>
+				) : (
+					<Input
+						id="sa-name"
+						value={localName}
+						onChange={(e): void => onNameChange(e.target.value)}
+						className="sa-drawer__input"
+						placeholder="Enter name"
+					/>
+				)}
+			</div>
+
+			<div className="sa-drawer__field">
+				<label className="sa-drawer__label" htmlFor="sa-email">
+					Email Address
+				</label>
+				<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
+					<span className="sa-drawer__input-text">{account.email || '—'}</span>
+					<LockKeyhole size={14} className="sa-drawer__lock-icon" />
+				</div>
+			</div>
+
+			<div className="sa-drawer__field">
+				<label className="sa-drawer__label" htmlFor="sa-roles">
+					Roles
+				</label>
+				{isDisabled ? (
+					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
+						<div className="sa-drawer__disabled-roles">
+							{localRoles.length > 0 ? (
+								localRoles.map((r) => (
+									<Badge key={r} color="vanilla">
+										{r}
+									</Badge>
+								))
+							) : (
+								<span className="sa-drawer__input-text">—</span>
+							)}
+						</div>
+						<LockKeyhole size={14} className="sa-drawer__lock-icon" />
+					</div>
+				) : (
+					<RolesSelect
+						id="sa-roles"
+						mode="multiple"
+						roles={availableRoles}
+						loading={rolesLoading}
+						isError={rolesError}
+						error={rolesErrorObj}
+						onRefetch={onRefetchRoles}
+						value={localRoles}
+						onChange={onRolesChange}
+						placeholder="Select roles"
+					/>
+				)}
+			</div>
+
+			<div className="sa-drawer__meta">
+				<div className="sa-drawer__meta-item">
+					<span className="sa-drawer__meta-label">Status</span>
+					{account.status?.toUpperCase() === 'ACTIVE' ? (
+						<Badge color="forest" variant="outline">
+							ACTIVE
+						</Badge>
+					) : (
+						<Badge color="vanilla" variant="outline" className="sa-status-badge">
+							DISABLED
+						</Badge>
+					)}
+				</div>
+
+				<div className="sa-drawer__meta-item">
+					<span className="sa-drawer__meta-label">Created At</span>
+					<Badge color="vanilla">{formatTimestamp(account.createdAt)}</Badge>
+				</div>
+
+				<div className="sa-drawer__meta-item">
+					<span className="sa-drawer__meta-label">Updated At</span>
+					<Badge color="vanilla">{formatTimestamp(account.updatedAt)}</Badge>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default OverviewTab;

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -0,0 +1,129 @@
+import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { Trash2, X } from '@signozhq/icons';
+import { toast } from '@signozhq/sonner';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	getListServiceAccountKeysQueryKey,
+	invalidateListServiceAccountKeys,
+	useRevokeServiceAccountKey,
+} from 'api/generated/services/serviceaccount';
+import type {
+	RenderErrorResponseDTO,
+	ServiceaccounttypesFactorAPIKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
+import { parseAsString, useQueryState } from 'nuqs';
+
+export interface RevokeKeyContentProps {
+	isRevoking: boolean;
+	onCancel: () => void;
+	onConfirm: () => void;
+}
+
+export function RevokeKeyContent({
+	isRevoking,
+	onCancel,
+	onConfirm,
+}: RevokeKeyContentProps): JSX.Element {
+	return (
+		<>
+			<p className="delete-dialog__body">
+				Revoking this key will permanently invalidate it. Any systems using this key
+				will lose access immediately.
+			</p>
+			<DialogFooter className="delete-dialog__footer">
+				<Button variant="solid" color="secondary" size="sm" onClick={onCancel}>
+					<X size={12} />
+					Cancel
+				</Button>
+				<Button
+					variant="solid"
+					color="destructive"
+					size="sm"
+					loading={isRevoking}
+					onClick={onConfirm}
+				>
+					<Trash2 size={12} />
+					Revoke Key
+				</Button>
+			</DialogFooter>
+		</>
+	);
+}
+
+function RevokeKeyModal(): JSX.Element {
+	const queryClient = useQueryClient();
+	const [accountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
+	const [revokeKeyId, setRevokeKeyId] = useQueryState(
+		SA_QUERY_PARAMS.REVOKE_KEY,
+		parseAsString.withDefault(''),
+	);
+	const open = !!revokeKeyId && !!accountId;
+
+	const cachedKeys = accountId
+		? queryClient.getQueryData<{ data: ServiceaccounttypesFactorAPIKeyDTO[] }>(
+				getListServiceAccountKeysQueryKey({ id: accountId }),
+		  )
+		: null;
+	const keyName = cachedKeys?.data?.find((k) => k.id === revokeKeyId)?.name;
+
+	const {
+		mutate: revokeKey,
+		isLoading: isRevoking,
+	} = useRevokeServiceAccountKey({
+		mutation: {
+			onSuccess: async () => {
+				toast.success('Key revoked successfully', { richColors: true });
+				await setRevokeKeyId(null);
+				if (accountId) {
+					await invalidateListServiceAccountKeys(queryClient, { id: accountId });
+				}
+			},
+			onError: (error) => {
+				const errMessage =
+					convertToApiError(
+						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					)?.getErrorMessage() || 'Failed to revoke key';
+				toast.error(errMessage, { richColors: true });
+			},
+		},
+	});
+
+	function handleConfirm(): void {
+		if (!revokeKeyId || !accountId) {
+			return;
+		}
+		revokeKey({ pathParams: { id: accountId, fid: revokeKeyId } });
+	}
+
+	function handleCancel(): void {
+		setRevokeKeyId(null);
+	}
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					handleCancel();
+				}
+			}}
+			title={`Revoke ${keyName ?? 'key'}?`}
+			width="narrow"
+			className="alert-dialog delete-dialog"
+			showCloseButton={false}
+			disableOutsideClick={false}
+		>
+			<RevokeKeyContent
+				isRevoking={isRevoking}
+				onCancel={handleCancel}
+				onConfirm={handleConfirm}
+			/>
+		</DialogWrapper>
+	);
+}
+
+export default RevokeKeyModal;

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

@@ -0,0 +1,460 @@
+.sa-drawer {
+	[data-slot='drawer-close'] + div {
+		border-left: 1px solid var(--l1-border);
+		padding-left: var(--padding-4);
+		margin-left: var(--margin-2);
+	}
+
+	&__layout {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 48px);
+	}
+
+	&__tabs {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--padding-3) var(--padding-4) var(--padding-2) var(--padding-4);
+		flex-shrink: 0;
+	}
+
+	&__tab-group {
+		[data-slot='toggle-group'] {
+			height: 32px;
+			border-radius: 2px;
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
+			gap: 0;
+		}
+
+		[data-slot='toggle-group-item'] {
+			height: 32px;
+			border-radius: 0;
+			border-left: 1px solid var(--l1-border);
+			background: transparent;
+			color: var(--l2-foreground);
+			font-size: var(--font-size-xs);
+			font-weight: var(--font-weight-normal);
+			font-family: Inter, sans-serif;
+			padding: 0 var(--padding-7);
+			gap: var(--spacing-3);
+			box-shadow: none;
+
+			&:first-child {
+				border-left: none;
+				border-radius: 2px 0 0 2px;
+			}
+
+			&:last-child {
+				border-radius: 0 2px 2px 0;
+			}
+
+			&:hover {
+				background: rgba(171, 189, 255, 0.04);
+				color: var(--l1-foreground);
+			}
+
+			&[data-state='on'] {
+				background: var(--l1-border);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	&__tab {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-2);
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-normal);
+	}
+
+	&__tab-count {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 20px;
+		padding: 0 6px;
+		border-radius: 50px;
+		background: var(--secondary);
+		font-size: var(--code-small-400-font-size);
+		font-weight: var(--font-weight-normal);
+		line-height: var(--line-height-20);
+		color: var(--foreground);
+		letter-spacing: -0.06px;
+	}
+
+	&__body {
+		flex: 1;
+		overflow-y: auto;
+		padding: var(--padding-5) var(--padding-4);
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+	}
+
+	&__footer {
+		height: 56px;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 var(--padding-4);
+		border-top: 1px solid var(--secondary);
+		background: var(--card);
+	}
+
+	&__keys-pagination {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		width: 100%;
+		padding: var(--padding-2) 0;
+
+		.ant-pagination-total-text {
+			margin-right: auto;
+		}
+	}
+
+	&__pagination-range {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+		font-weight: var(--font-weight-normal);
+	}
+
+	&__pagination-total {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+		opacity: 0.5;
+	}
+
+	&__footer-btn {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	&__footer-right {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-6);
+	}
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-4);
+	}
+
+	&__label {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+		cursor: default;
+	}
+
+	&__input {
+		height: 32px;
+		background: var(--l2-background);
+		border-color: var(--border);
+		color: var(--l1-foreground);
+		box-shadow: none;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+	}
+
+	&__input-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 32px;
+		padding: 0 var(--padding-2);
+		border-radius: 2px;
+		background: var(--l2-background);
+		border: 1px solid var(--border);
+
+		&--disabled {
+			cursor: not-allowed;
+			opacity: 0.8;
+		}
+	}
+
+	&__input-text {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-18);
+		letter-spacing: -0.07px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex: 1;
+	}
+
+	&__lock-icon {
+		color: var(--foreground);
+		flex-shrink: 0;
+		margin-left: 6px;
+		opacity: 0.6;
+	}
+
+	&__disabled-roles {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--spacing-2);
+	}
+
+	&__meta {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+		margin-top: var(--margin-1);
+	}
+
+	&__meta-item {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+
+		[data-slot='badge'] {
+			padding: var(--padding-1) var(--padding-2);
+			align-items: center;
+			font-size: var(--uppercase-small-500-font-size);
+			font-weight: var(--uppercase-small-500-font-weight);
+			line-height: 100%;
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+		}
+	}
+
+	&__meta-label {
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-medium);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: 0.48px;
+		text-transform: uppercase;
+	}
+}
+
+.keys-tab {
+	&__loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--padding-8) var(--padding-4);
+	}
+
+	&__empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: var(--padding-8) var(--padding-4);
+		gap: var(--spacing-4);
+		text-align: center;
+		height: 80%;
+	}
+
+	&__empty-icon {
+		color: var(--l2-foreground);
+	}
+
+	&__empty-text {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--foreground);
+		margin: 0;
+	}
+
+	&__learn-more {
+		background: transparent;
+		border: none;
+		color: var(--primary);
+		font-size: var(--font-size-sm);
+		cursor: pointer;
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	// todo: styles should easeup by upgrading the component with table component from persiscope
+	&__table {
+		.ant-table {
+			background: transparent;
+			border: 1px solid var(--l1-border);
+			border-radius: 4px;
+			overflow: hidden;
+		}
+
+		.ant-table-thead > tr > th,
+		.ant-table-thead > tr > td {
+			height: 38px;
+			padding: 0 var(--padding-4);
+			background: transparent !important;
+			border-bottom: 1px solid var(--l1-border) !important;
+			font-size: var(--uppercase-small-500-font-size);
+			font-weight: var(--uppercase-small-500-font-weight);
+			color: var(--l2-foreground);
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+
+			&::before {
+				display: none !important;
+			}
+
+			.ant-table-column-sorter {
+				color: var(--l2-foreground);
+				opacity: 0.5;
+			}
+
+			&.ant-table-column-sort {
+				background: transparent !important;
+				color: var(--l1-foreground);
+
+				.ant-table-column-sorter {
+					color: var(--l1-foreground);
+					opacity: 1;
+				}
+			}
+
+			&:hover {
+				background: transparent !important;
+				color: var(--l1-foreground);
+
+				.ant-table-column-sorter {
+					opacity: 1;
+				}
+			}
+		}
+
+		.ant-table-tbody > tr > td {
+			height: 38px;
+			padding: 0 var(--padding-4);
+			border-bottom: 1px solid var(--l1-border);
+			font-size: 13px;
+			font-weight: var(--font-weight-normal);
+			color: var(--l2-foreground);
+			letter-spacing: -0.07px;
+			cursor: pointer;
+			background: transparent;
+			transition: none;
+			font-variant-numeric: lining-nums tabular-nums stacked-fractions ordinal
+				slashed-zero;
+
+			&.ant-table-column-sort {
+				background: transparent;
+			}
+		}
+
+		.ant-table-tbody > tr:last-child > td {
+			border-bottom: none;
+		}
+
+		.ant-table-tbody > tr {
+			background: transparent;
+
+			&:hover > td {
+				background: rgba(171, 189, 255, 0.06) !important;
+			}
+
+			&.keys-tab__table-row--alt > td {
+				background: rgba(171, 189, 255, 0.02);
+
+				&:hover {
+					background: rgba(171, 189, 255, 0.06) !important;
+				}
+			}
+		}
+
+		&--disabled {
+			.ant-table-tbody > tr {
+				cursor: not-allowed;
+				opacity: 0.6;
+
+				&:hover > td {
+					background: transparent !important;
+				}
+			}
+		}
+
+		.ant-table-cell-row-hover {
+			background: transparent !important;
+		}
+	}
+
+	&__name-column {
+		.ant-table-column-sorters {
+			justify-content: flex-start;
+			gap: var(--spacing-2);
+		}
+
+		.ant-table-column-title {
+			flex: none;
+		}
+	}
+
+	&__name-text {
+		font-size: 13px;
+		font-weight: var(--font-weight-normal);
+		color: var(--l2-foreground);
+		letter-spacing: -0.07px;
+		text-transform: none;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&__expiry--never {
+		color: var(--l2-foreground);
+	}
+
+	&__expiry--expired {
+		color: var(--l3-foreground);
+	}
+
+	&__revoke-btn {
+		width: 32px;
+		height: 32px;
+		padding: 0;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+.sa-disable-dialog {
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+
+	[data-slot='dialog-title'] {
+		color: var(--l1-foreground);
+	}
+
+	&__body {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--l2-foreground);
+		line-height: var(--paragraph-base-400-line-height);
+		letter-spacing: -0.065px;
+		margin: 0;
+
+		strong {
+			font-weight: var(--font-weight-medium);
+			color: var(--l1-foreground);
+		}
+	}
+
+	&__footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--spacing-4);
+		margin-top: var(--margin-6);
+	}
+}

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -0,0 +1,369 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { DrawerWrapper } from '@signozhq/drawer';
+import { Key, LayoutGrid, Plus, PowerOff, X } from '@signozhq/icons';
+import { toast } from '@signozhq/sonner';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Pagination, Skeleton } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	useGetServiceAccount,
+	useListServiceAccountKeys,
+	useUpdateServiceAccount,
+} from 'api/generated/services/serviceaccount';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import { useRoles } from 'components/RolesSelect';
+import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
+import {
+	ServiceAccountRow,
+	toServiceAccountRow,
+} from 'container/ServiceAccountsSettings/utils';
+import {
+	parseAsBoolean,
+	parseAsInteger,
+	parseAsString,
+	parseAsStringEnum,
+	useQueryState,
+} from 'nuqs';
+import { toAPIError } from 'utils/errorUtils';
+
+import AddKeyModal from './AddKeyModal';
+import DisableAccountModal from './DisableAccountModal';
+import KeysTab from './KeysTab';
+import OverviewTab from './OverviewTab';
+import { ServiceAccountDrawerTab } from './utils';
+
+import './ServiceAccountDrawer.styles.scss';
+
+export interface ServiceAccountDrawerProps {
+	onSuccess: (options?: { closeDrawer?: boolean }) => void;
+}
+
+const PAGE_SIZE = 15;
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function ServiceAccountDrawer({
+	onSuccess,
+}: ServiceAccountDrawerProps): JSX.Element {
+	const [selectedAccountId, setSelectedAccountId] = useQueryState(
+		SA_QUERY_PARAMS.ACCOUNT,
+	);
+	const open = !!selectedAccountId;
+	const [activeTab, setActiveTab] = useQueryState(
+		SA_QUERY_PARAMS.TAB,
+		parseAsStringEnum<ServiceAccountDrawerTab>(
+			Object.values(ServiceAccountDrawerTab),
+		).withDefault(ServiceAccountDrawerTab.Overview),
+	);
+	const [keysPage, setKeysPage] = useQueryState(
+		SA_QUERY_PARAMS.KEYS_PAGE,
+		parseAsInteger.withDefault(1),
+	);
+	const [, setEditKeyId] = useQueryState(
+		SA_QUERY_PARAMS.EDIT_KEY,
+		parseAsString.withDefault(''),
+	);
+	const [, setIsAddKeyOpen] = useQueryState(
+		SA_QUERY_PARAMS.ADD_KEY,
+		parseAsBoolean.withDefault(false),
+	);
+	const [, setIsDisableOpen] = useQueryState(
+		SA_QUERY_PARAMS.DISABLE_SA,
+		parseAsBoolean.withDefault(false),
+	);
+	const [localName, setLocalName] = useState('');
+	const [localRoles, setLocalRoles] = useState<string[]>([]);
+
+	const {
+		data: accountData,
+		isLoading: isAccountLoading,
+		isError: isAccountError,
+		error: accountError,
+		refetch: refetchAccount,
+	} = useGetServiceAccount(
+		{ id: selectedAccountId ?? '' },
+		{ query: { enabled: !!selectedAccountId } },
+	);
+
+	const account = useMemo(
+		(): ServiceAccountRow | null =>
+			accountData?.data ? toServiceAccountRow(accountData.data) : null,
+		[accountData],
+	);
+
+	useEffect(() => {
+		if (account) {
+			setLocalName(account.name ?? '');
+			setLocalRoles(account.roles ?? []);
+			setKeysPage(1);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [account?.id]);
+
+	const isDisabled = account?.status?.toUpperCase() !== 'ACTIVE';
+
+	const isDirty =
+		account !== null &&
+		(localName !== (account.name ?? '') ||
+			JSON.stringify(localRoles) !== JSON.stringify(account.roles ?? []));
+
+	const {
+		roles: availableRoles,
+		isLoading: rolesLoading,
+		isError: rolesError,
+		error: rolesErrorObj,
+		refetch: refetchRoles,
+	} = useRoles();
+
+	const { data: keysData, isLoading: keysLoading } = useListServiceAccountKeys(
+		{ id: selectedAccountId ?? '' },
+		{ query: { enabled: !!selectedAccountId } },
+	);
+	const keys = keysData?.data ?? [];
+
+	useEffect(() => {
+		if (keysLoading) {
+			return;
+		}
+		const maxPage = Math.max(1, Math.ceil(keys.length / PAGE_SIZE));
+		if (keysPage > maxPage) {
+			setKeysPage(maxPage);
+		}
+	}, [keysLoading, keys.length, keysPage, setKeysPage]);
+
+	const { mutate: updateAccount, isLoading: isSaving } = useUpdateServiceAccount(
+		{
+			mutation: {
+				onSuccess: () => {
+					toast.success('Service account updated successfully', {
+						richColors: true,
+					});
+					refetchAccount();
+					onSuccess({ closeDrawer: false });
+				},
+				onError: (error) => {
+					const errMessage =
+						convertToApiError(
+							error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+						)?.getErrorMessage() || 'Failed to update service account';
+					toast.error(errMessage, { richColors: true });
+				},
+			},
+		},
+	);
+
+	function handleSave(): void {
+		if (!account || !isDirty) {
+			return;
+		}
+		updateAccount({
+			pathParams: { id: account.id },
+			data: { name: localName, email: account.email, roles: localRoles },
+		});
+	}
+
+	const handleClose = useCallback((): void => {
+		setIsDisableOpen(null);
+		setIsAddKeyOpen(null);
+		setSelectedAccountId(null);
+		setActiveTab(null);
+		setKeysPage(null);
+		setEditKeyId(null);
+	}, [
+		setSelectedAccountId,
+		setActiveTab,
+		setKeysPage,
+		setEditKeyId,
+		setIsAddKeyOpen,
+		setIsDisableOpen,
+	]);
+
+	const drawerContent = (
+		<div className="sa-drawer__layout">
+			<div className="sa-drawer__tabs">
+				<ToggleGroup
+					type="single"
+					value={activeTab}
+					onValueChange={(val): void => {
+						if (val) {
+							setActiveTab(val as ServiceAccountDrawerTab);
+							if (val !== ServiceAccountDrawerTab.Keys) {
+								setKeysPage(null);
+								setEditKeyId(null);
+							}
+						}
+					}}
+					className="sa-drawer__tab-group"
+				>
+					<ToggleGroupItem
+						value={ServiceAccountDrawerTab.Overview}
+						className="sa-drawer__tab"
+					>
+						<LayoutGrid size={14} />
+						Overview
+					</ToggleGroupItem>
+					<ToggleGroupItem
+						value={ServiceAccountDrawerTab.Keys}
+						className="sa-drawer__tab"
+					>
+						<Key size={14} />
+						Keys
+						{keys.length > 0 && (
+							<span className="sa-drawer__tab-count">{keys.length}</span>
+						)}
+					</ToggleGroupItem>
+				</ToggleGroup>
+				{activeTab === ServiceAccountDrawerTab.Keys && (
+					<Button
+						variant="outlined"
+						size="sm"
+						color="secondary"
+						disabled={isDisabled}
+						onClick={(): void => {
+							setIsAddKeyOpen(true);
+						}}
+					>
+						<Plus size={12} />
+						Add Key
+					</Button>
+				)}
+			</div>
+
+			<div
+				className={`sa-drawer__body${
+					activeTab === ServiceAccountDrawerTab.Keys ? ' sa-drawer__body--keys' : ''
+				}`}
+			>
+				{isAccountLoading && <Skeleton active paragraph={{ rows: 6 }} />}
+				{isAccountError && (
+					<ErrorInPlace
+						error={toAPIError(
+							accountError,
+							'An unexpected error occurred while fetching service account details.',
+						)}
+					/>
+				)}
+				{!isAccountLoading && !isAccountError && (
+					<>
+						{activeTab === ServiceAccountDrawerTab.Overview && account && (
+							<OverviewTab
+								account={account}
+								localName={localName}
+								onNameChange={setLocalName}
+								localRoles={localRoles}
+								onRolesChange={setLocalRoles}
+								isDisabled={isDisabled}
+								availableRoles={availableRoles}
+								rolesLoading={rolesLoading}
+								rolesError={rolesError}
+								rolesErrorObj={rolesErrorObj}
+								onRefetchRoles={refetchRoles}
+							/>
+						)}
+						{activeTab === ServiceAccountDrawerTab.Keys && (
+							<KeysTab
+								keys={keys}
+								isLoading={keysLoading}
+								isDisabled={isDisabled}
+								currentPage={keysPage}
+								pageSize={PAGE_SIZE}
+							/>
+						)}
+					</>
+				)}
+			</div>
+
+			<div className="sa-drawer__footer">
+				{activeTab === ServiceAccountDrawerTab.Keys ? (
+					<Pagination
+						current={keysPage}
+						pageSize={PAGE_SIZE}
+						total={keys.length}
+						showTotal={(total: number, range: number[]): JSX.Element => (
+							<>
+								<span className="sa-drawer__pagination-range">
+									{range[0]} &#8212; {range[1]}
+								</span>
+								<span className="sa-drawer__pagination-total"> of {total}</span>
+							</>
+						)}
+						showSizeChanger={false}
+						hideOnSinglePage
+						onChange={(page): void => {
+							void setKeysPage(page);
+						}}
+						className="sa-drawer__keys-pagination"
+					/>
+				) : (
+					<>
+						{!isDisabled && (
+							<Button
+								variant="ghost"
+								color="destructive"
+								className="sa-drawer__footer-btn"
+								onClick={(): void => {
+									setIsDisableOpen(true);
+								}}
+							>
+								<PowerOff size={12} />
+								Disable Service Account
+							</Button>
+						)}
+						{!isDisabled && (
+							<div className="sa-drawer__footer-right">
+								<Button
+									variant="solid"
+									color="secondary"
+									size="sm"
+									onClick={handleClose}
+								>
+									<X size={14} />
+									Cancel
+								</Button>
+								<Button
+									variant="solid"
+									color="primary"
+									size="sm"
+									loading={isSaving}
+									disabled={!isDirty}
+									onClick={handleSave}
+								>
+									Save Changes
+								</Button>
+							</div>
+						)}
+					</>
+				)}
+			</div>
+		</div>
+	);
+
+	return (
+		<>
+			<DrawerWrapper
+				open={open}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						handleClose();
+					}
+				}}
+				direction="right"
+				type="panel"
+				showCloseButton
+				showOverlay={false}
+				allowOutsideClick
+				header={{ title: 'Service Account Details' }}
+				content={drawerContent}
+				className="sa-drawer"
+			/>
+
+			<DisableAccountModal />
+
+			<AddKeyModal />
+		</>
+	);
+}
+
+export default ServiceAccountDrawer;

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

@@ -0,0 +1,139 @@
+import { toast } from '@signozhq/sonner';
+import { rest, server } from 'mocks-server/server';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import AddKeyModal from '../AddKeyModal';
+
+jest.mock('@signozhq/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+const mockToast = jest.mocked(toast);
+
+const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/sa-1/keys';
+
+const createdKeyResponse = {
+	data: {
+		id: 'key-1',
+		name: 'Deploy Key',
+		key: 'snz_abc123xyz456secret',
+		expiresAt: 0,
+		lastObservedAt: null,
+	},
+};
+
+function renderModal(): ReturnType<typeof render> {
+	return render(
+		<NuqsTestingAdapter
+			searchParams={{ account: 'sa-1', 'add-key': 'true' }}
+			hasMemory
+		>
+			<AddKeyModal />
+		</NuqsTestingAdapter>,
+	);
+}
+
+describe('AddKeyModal', () => {
+	beforeAll(() => {
+		Object.defineProperty(navigator, 'clipboard', {
+			value: { writeText: jest.fn().mockResolvedValue(undefined) },
+			configurable: true,
+			writable: true,
+		});
+	});
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		server.use(
+			rest.post(SA_KEYS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(201), ctx.json(createdKeyResponse)),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('"Create Key" is disabled when name is empty; enabled after typing a name', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		expect(screen.getByRole('button', { name: /Create Key/i })).toBeDisabled();
+
+		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'My Key');
+
+		await waitFor(() =>
+			expect(
+				screen.getByRole('button', { name: /Create Key/i }),
+			).not.toBeDisabled(),
+		);
+	});
+
+	it('successful creation transitions to phase 2 with key displayed and security callout', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'Deploy Key');
+		await waitFor(() =>
+			expect(
+				screen.getByRole('button', { name: /Create Key/i }),
+			).not.toBeDisabled(),
+		);
+		await user.click(screen.getByRole('button', { name: /Create Key/i }));
+
+		await screen.findByText('snz_abc123xyz456secret');
+		expect(screen.getByText(/Store the key securely/i)).toBeInTheDocument();
+		await screen.findByRole('dialog', { name: /Key Created Successfully/i });
+	});
+
+	it('copy button writes key to clipboard and shows toast.success', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const writeTextSpy = jest
+			.spyOn(navigator.clipboard, 'writeText')
+			.mockResolvedValue(undefined);
+
+		renderModal();
+
+		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'Deploy Key');
+		await waitFor(() =>
+			expect(
+				screen.getByRole('button', { name: /Create Key/i }),
+			).not.toBeDisabled(),
+		);
+		await user.click(screen.getByRole('button', { name: /Create Key/i }));
+
+		await screen.findByText('snz_abc123xyz456secret');
+
+		const copyBtn = screen
+			.getAllByRole('button')
+			.find((btn) => btn.querySelector('svg'));
+		if (!copyBtn) {
+			throw new Error('Copy button not found');
+		}
+		await user.click(copyBtn);
+
+		await waitFor(() => {
+			expect(writeTextSpy).toHaveBeenCalledWith('snz_abc123xyz456secret');
+			expect(mockToast.success).toHaveBeenCalledWith(
+				'Key copied to clipboard',
+				expect.anything(),
+			);
+		});
+
+		writeTextSpy.mockRestore();
+	});
+
+	it('Cancel button closes the modal', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		await screen.findByRole('dialog', { name: /Add a New Key/i });
+		await user.click(screen.getByRole('button', { name: /Cancel/i }));
+
+		expect(
+			screen.queryByRole('dialog', { name: /Add a New Key/i }),
+		).not.toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,151 @@
+import { toast } from '@signozhq/sonner';
+import type { ServiceaccounttypesFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import { rest, server } from 'mocks-server/server';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import EditKeyModal from '../EditKeyModal';
+
+jest.mock('@signozhq/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+const mockToast = jest.mocked(toast);
+
+const SA_KEY_ENDPOINT = '*/api/v1/service_accounts/sa-1/keys/key-1';
+
+const mockKey: ServiceaccounttypesFactorAPIKeyDTO = {
+	id: 'key-1',
+	name: 'Original Key Name',
+	expiresAt: 0,
+	lastObservedAt: null as any,
+	key: 'snz_abc123',
+	serviceAccountId: 'sa-1',
+};
+
+function renderModal(
+	keyItem: ServiceaccounttypesFactorAPIKeyDTO | null = mockKey,
+	searchParams: Record<string, string> = {
+		account: 'sa-1',
+		'edit-key': 'key-1',
+	},
+): ReturnType<typeof render> {
+	return render(
+		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
+			<EditKeyModal keyItem={keyItem} />
+		</NuqsTestingAdapter>,
+	);
+}
+
+describe('EditKeyModal (URL-controlled)', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		server.use(
+			rest.put(SA_KEY_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+			),
+			rest.delete(SA_KEY_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders nothing when edit-key param is absent', () => {
+		renderModal(null, { account: 'sa-1' });
+
+		expect(
+			screen.queryByRole('dialog', { name: /Edit Key Details/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders key data from prop when edit-key param is set', async () => {
+		renderModal();
+
+		expect(
+			await screen.findByDisplayValue('Original Key Name'),
+		).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /Save Changes/i })).toBeDisabled();
+	});
+
+	it('save calls update API, shows toast, and closes modal', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		const nameInput = await screen.findByPlaceholderText(/Enter key name/i);
+		await user.clear(nameInput);
+		await user.type(nameInput, 'Updated Key Name');
+
+		await user.click(screen.getByRole('button', { name: /Save Changes/i }));
+
+		await waitFor(() => {
+			expect(mockToast.success).toHaveBeenCalledWith(
+				'Key updated successfully',
+				expect.anything(),
+			);
+		});
+
+		await waitFor(() => {
+			expect(
+				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	it('cancel clears edit-key param and closes modal', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		await screen.findByDisplayValue('Original Key Name');
+		await user.click(screen.getByRole('button', { name: /Cancel/i }));
+
+		expect(
+			screen.queryByRole('dialog', { name: /Edit Key Details/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('revoke flow: clicking Revoke Key shows confirmation inside same dialog', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		await screen.findByDisplayValue('Original Key Name');
+		await user.click(screen.getByRole('button', { name: /Revoke Key/i }));
+
+		// Same dialog, now showing revoke confirmation
+		expect(
+			await screen.findByRole('dialog', { name: /Revoke Original Key Name/i }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByText(/Revoking this key will permanently invalidate it/i),
+		).toBeInTheDocument();
+	});
+
+	it('revoke flow: confirming revoke shows toast and closes modal', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		await screen.findByDisplayValue('Original Key Name');
+		await user.click(screen.getByRole('button', { name: /Revoke Key/i }));
+
+		const confirmBtn = await screen.findByRole('button', {
+			name: /^Revoke Key$/i,
+		});
+		await user.click(confirmBtn);
+
+		await waitFor(() => {
+			expect(mockToast.success).toHaveBeenCalledWith(
+				'Key revoked successfully',
+				expect.anything(),
+			);
+		});
+
+		await waitFor(() => {
+			expect(
+				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
+			).not.toBeInTheDocument();
+		});
+	});
+});

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

@@ -0,0 +1,183 @@
+import { toast } from '@signozhq/sonner';
+import { ServiceaccounttypesFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import { rest, server } from 'mocks-server/server';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import KeysTab from '../KeysTab';
+
+jest.mock('@signozhq/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+const mockToast = jest.mocked(toast);
+
+const SA_KEY_ENDPOINT = '*/api/v1/service_accounts/sa-1/keys/:fid';
+
+const keys: ServiceaccounttypesFactorAPIKeyDTO[] = [
+	{
+		id: 'key-1',
+		name: 'Production Key',
+		expiresAt: 0,
+		lastObservedAt: null as any,
+		key: 'snz_prod_123',
+		serviceAccountId: 'sa-1',
+	},
+	{
+		id: 'key-2',
+		name: 'Staging Key',
+		expiresAt: 1924905600, // 2030-12-31
+		lastObservedAt: new Date('2026-03-10T10:00:00Z'),
+		key: 'snz_stag_456',
+		serviceAccountId: 'sa-1',
+	},
+];
+
+const defaultProps = {
+	keys,
+	isLoading: false,
+	isDisabled: false,
+	currentPage: 1,
+	pageSize: 10,
+};
+
+function renderKeysTab(
+	props: Partial<typeof defaultProps> = {},
+	searchParams: Record<string, string> = { account: 'sa-1' },
+): ReturnType<typeof render> {
+	return render(
+		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
+			<KeysTab {...defaultProps} {...props} />
+		</NuqsTestingAdapter>,
+	);
+}
+
+describe('KeysTab', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		server.use(
+			rest.delete(SA_KEY_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders loading state', () => {
+		renderKeysTab({ isLoading: true });
+		expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+	});
+
+	it('renders empty state when no keys and clicking add sets add-key param', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onUrlUpdate = jest.fn();
+		render(
+			<NuqsTestingAdapter
+				searchParams={{ account: 'sa-1' }}
+				onUrlUpdate={onUrlUpdate}
+			>
+				<KeysTab {...defaultProps} keys={[]} />
+			</NuqsTestingAdapter>,
+		);
+
+		expect(
+			screen.getByText(/No keys. Start by creating one./i),
+		).toBeInTheDocument();
+		const addBtn = screen.getByRole('button', { name: /\+ Add your first key/i });
+		await user.click(addBtn);
+		expect(onUrlUpdate).toHaveBeenCalledWith(
+			expect.objectContaining({
+				queryString: expect.stringContaining('add-key=true'),
+			}),
+		);
+	});
+
+	it('renders table with keys', () => {
+		renderKeysTab();
+
+		expect(screen.getByText('Production Key')).toBeInTheDocument();
+		expect(screen.getByText('Staging Key')).toBeInTheDocument();
+		expect(screen.getByText('Never')).toBeInTheDocument();
+		expect(screen.getByText('Dec 31, 2030')).toBeInTheDocument();
+	});
+
+	it('clicking a row sets the edit-key URL param', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onUrlUpdate = jest.fn();
+
+		render(
+			<NuqsTestingAdapter onUrlUpdate={onUrlUpdate}>
+				<KeysTab {...defaultProps} />
+			</NuqsTestingAdapter>,
+		);
+
+		const row = screen.getByText('Production Key').closest('tr');
+		if (!row) {
+			throw new Error('Row not found');
+		}
+
+		await user.click(row);
+
+		expect(onUrlUpdate).toHaveBeenCalledWith(
+			expect.objectContaining({
+				queryString: expect.stringContaining('edit-key=key-1'),
+			}),
+		);
+	});
+
+	it('clicking revoke icon sets revoke-key URL param', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onUrlUpdate = jest.fn();
+
+		render(
+			<NuqsTestingAdapter onUrlUpdate={onUrlUpdate}>
+				<KeysTab {...defaultProps} />
+			</NuqsTestingAdapter>,
+		);
+
+		const revokeBtns = screen
+			.getAllByRole('button')
+			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
+		await user.click(revokeBtns[0]);
+
+		expect(onUrlUpdate).toHaveBeenCalledWith(
+			expect.objectContaining({
+				queryString: expect.stringContaining('revoke-key=key-1'),
+			}),
+		);
+	});
+
+	it('handles successful key revocation via RevokeKeyModal', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		renderKeysTab();
+
+		// Seed the keys cache so RevokeKeyModal can read the key name
+		const revokeBtns = screen
+			.getAllByRole('button')
+			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
+		await user.click(revokeBtns[0]);
+
+		const confirmBtn = await screen.findByRole('button', { name: /Revoke Key/i });
+		await user.click(confirmBtn);
+
+		await waitFor(() => {
+			expect(mockToast.success).toHaveBeenCalledWith(
+				'Key revoked successfully',
+				expect.anything(),
+			);
+		});
+	});
+
+	it('disables actions when isDisabled is true', () => {
+		renderKeysTab({ isDisabled: true });
+
+		const revokeBtns = screen
+			.getAllByRole('button')
+			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
+		revokeBtns.forEach((btn) => expect(btn).toBeDisabled());
+	});
+});

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

@@ -0,0 +1,250 @@
+import type { ReactNode } from 'react';
+import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
+import { rest, server } from 'mocks-server/server';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import ServiceAccountDrawer from '../ServiceAccountDrawer';
+
+jest.mock('@signozhq/drawer', () => ({
+	DrawerWrapper: ({
+		content,
+		open,
+	}: {
+		content?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null => (open ? <div>{content}</div> : null),
+}));
+
+jest.mock('@signozhq/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+const ROLES_ENDPOINT = '*/api/v1/roles';
+const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
+const SA_ENDPOINT = '*/api/v1/service_accounts/sa-1';
+const SA_STATUS_ENDPOINT = '*/api/v1/service_accounts/sa-1/status';
+
+const activeAccountResponse = {
+	id: 'sa-1',
+	name: 'CI Bot',
+	email: 'ci-bot@signoz.io',
+	roles: ['signoz-admin'],
+	status: 'ACTIVE',
+	createdAt: '2026-01-01T00:00:00Z',
+	updatedAt: '2026-01-02T00:00:00Z',
+};
+
+const disabledAccountResponse = {
+	...activeAccountResponse,
+	id: 'sa-2',
+	status: 'DISABLED',
+};
+
+function renderDrawer(
+	searchParams: Record<string, string> = { account: 'sa-1' },
+): ReturnType<typeof render> {
+	return render(
+		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
+			<ServiceAccountDrawer onSuccess={jest.fn()} />
+		</NuqsTestingAdapter>,
+	);
+}
+
+describe('ServiceAccountDrawer', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		server.use(
+			rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+			rest.get(SA_KEYS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: [] })),
+			),
+			rest.get(SA_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: activeAccountResponse })),
+			),
+			rest.put(SA_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+			),
+			rest.put(SA_STATUS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders Overview tab by default: editable name input, locked email, Save disabled when not dirty', async () => {
+		renderDrawer();
+
+		expect(await screen.findByDisplayValue('CI Bot')).toBeInTheDocument();
+		expect(screen.getByText('ci-bot@signoz.io')).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /Save Changes/i })).toBeDisabled();
+	});
+
+	it('editing name enables Save; clicking Save sends correct payload and calls onSuccess', async () => {
+		const onSuccess = jest.fn();
+		const updateSpy = jest.fn();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		server.use(
+			rest.put(SA_ENDPOINT, async (req, res, ctx) => {
+				updateSpy(await req.json());
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+			}),
+		);
+
+		render(
+			<NuqsTestingAdapter searchParams={{ account: 'sa-1' }} hasMemory>
+				<ServiceAccountDrawer onSuccess={onSuccess} />
+			</NuqsTestingAdapter>,
+		);
+
+		const nameInput = await screen.findByDisplayValue('CI Bot');
+		await user.clear(nameInput);
+		await user.type(nameInput, 'CI Bot Updated');
+
+		const saveBtn = screen.getByRole('button', { name: /Save Changes/i });
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await user.click(saveBtn);
+
+		await waitFor(() => {
+			expect(updateSpy).toHaveBeenCalledWith(
+				expect.objectContaining({
+					name: 'CI Bot Updated',
+					email: 'ci-bot@signoz.io',
+					roles: ['signoz-admin'],
+				}),
+			);
+			expect(onSuccess).toHaveBeenCalledWith({ closeDrawer: false });
+		});
+	});
+
+	it('changing roles enables Save; clicking Save sends updated roles in payload', async () => {
+		const updateSpy = jest.fn();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		server.use(
+			rest.put(SA_ENDPOINT, async (req, res, ctx) => {
+				updateSpy(await req.json());
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+			}),
+		);
+
+		renderDrawer();
+
+		await screen.findByDisplayValue('CI Bot');
+
+		await user.click(screen.getByLabelText('Roles'));
+		await user.click(await screen.findByTitle('signoz-viewer'));
+
+		const saveBtn = screen.getByRole('button', { name: /Save Changes/i });
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await user.click(saveBtn);
+
+		await waitFor(() => {
+			expect(updateSpy).toHaveBeenCalledWith(
+				expect.objectContaining({
+					roles: expect.arrayContaining(['signoz-admin', 'signoz-viewer']),
+				}),
+			);
+		});
+	});
+
+	it('"Disable Service Account" opens confirm dialog; confirming sends correct status payload', async () => {
+		const statusSpy = jest.fn();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		server.use(
+			rest.put(SA_STATUS_ENDPOINT, async (req, res, ctx) => {
+				statusSpy(await req.json());
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+			}),
+		);
+
+		renderDrawer();
+
+		await screen.findByDisplayValue('CI Bot');
+
+		await user.click(
+			screen.getByRole('button', { name: /Disable Service Account/i }),
+		);
+
+		const dialog = await screen.findByRole('dialog', {
+			name: /Disable service account CI Bot/i,
+		});
+		expect(dialog).toBeInTheDocument();
+
+		const confirmBtns = screen.getAllByRole('button', { name: /^Disable$/i });
+		await user.click(confirmBtns[confirmBtns.length - 1]);
+
+		await waitFor(() => {
+			expect(statusSpy).toHaveBeenCalledWith({ status: 'DISABLED' });
+		});
+
+		await waitFor(() => {
+			expect(screen.queryByDisplayValue('CI Bot')).not.toBeInTheDocument();
+		});
+	});
+
+	it('disabled account shows read-only name, no Save button, no Disable button', async () => {
+		server.use(
+			rest.get('*/api/v1/service_accounts/sa-2', (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: disabledAccountResponse })),
+			),
+			rest.get('*/api/v1/service_accounts/sa-2/keys', (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: [] })),
+			),
+		);
+
+		renderDrawer({ account: 'sa-2' });
+
+		await screen.findByText('CI Bot');
+
+		expect(
+			screen.queryByRole('button', { name: /Save Changes/i }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /Disable Service Account/i }),
+		).not.toBeInTheDocument();
+		expect(screen.queryByDisplayValue('CI Bot')).not.toBeInTheDocument();
+	});
+
+	it('switching to Keys tab shows "No keys" empty state', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		renderDrawer();
+
+		await screen.findByDisplayValue('CI Bot');
+
+		await user.click(screen.getByRole('radio', { name: /Keys/i }));
+
+		await screen.findByText(/No keys/i);
+	});
+
+	it('shows skeleton while loading account data', () => {
+		renderDrawer();
+
+		// Skeleton renders while the fetch is in-flight
+		expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+	});
+
+	it('shows error state when account fetch fails', async () => {
+		server.use(
+			rest.get(SA_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(500), ctx.json({ message: 'Server error' })),
+			),
+		);
+
+		renderDrawer();
+
+		expect(
+			await screen.findByText(
+				/An unexpected error occurred while fetching service account details/i,
+			),
+		).toBeInTheDocument();
+	});
+});

frontend/src/components/ServiceAccountDrawer/utils.ts

@@ -0,0 +1,33 @@
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+export enum ServiceAccountDrawerTab {
+	Overview = 'overview',
+	Keys = 'keys',
+}
+
+export function formatLastObservedAt(
+	lastObservedAt: string | Date | null | undefined,
+	formatTimezoneAdjustedTimestamp: (ts: string, format: string) => string,
+): string {
+	if (!lastObservedAt) {
+		return '—';
+	}
+	const str =
+		typeof lastObservedAt === 'string'
+			? lastObservedAt
+			: lastObservedAt.toISOString();
+	// Go zero time means the key has never been used
+	if (str.startsWith('0001-01-01')) {
+		return '—';
+	}
+	const d = new Date(str);
+	if (Number.isNaN(d.getTime())) {
+		return '—';
+	}
+	return formatTimezoneAdjustedTimestamp(str, DATE_TIME_FORMATS.DASH_DATETIME);
+}
+
+export const disabledDate = (current: Dayjs): boolean =>
+	!!current && current < dayjs().startOf('day');

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss

@@ -0,0 +1,217 @@
+.sa-table-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+	border-radius: 4px;
+}
+
+.sa-table {
+	.ant-table {
+		background: transparent;
+		font-size: 13px;
+	}
+
+	.ant-table-container {
+		border-radius: 0 !important;
+		border: none !important;
+	}
+
+	.ant-table-thead {
+		> tr > th,
+		> tr > td {
+			background: var(--background);
+			font-size: var(--paragraph-small-600-font-size);
+			font-weight: var(--paragraph-small-600-font-weight);
+			line-height: var(--paragraph-small-600-line-height);
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+			color: var(--foreground);
+			padding: var(--padding-2) var(--padding-4);
+			border-bottom: none !important;
+			border-top: none !important;
+
+			&::before {
+				display: none !important;
+			}
+		}
+	}
+
+	.ant-table-tbody {
+		> tr > td {
+			border-bottom: none !important;
+			padding: var(--padding-2) var(--padding-4);
+			background: transparent;
+			transition: none;
+		}
+
+		> tr.sa-table-row--tinted > td {
+			background: rgba(171, 189, 255, 0.02);
+		}
+
+		> tr:hover > td {
+			background: rgba(171, 189, 255, 0.04) !important;
+		}
+	}
+
+	.ant-table-wrapper,
+	.ant-table-container,
+	.ant-spin-nested-loading,
+	.ant-spin-container {
+		border: none !important;
+		box-shadow: none !important;
+	}
+
+	.sa-name-column {
+		.ant-table-column-sorters {
+			justify-content: flex-start;
+			gap: var(--spacing-2);
+		}
+
+		.ant-table-column-title {
+			flex: none;
+		}
+	}
+
+	.sa-status-cell {
+		[data-slot='badge'] {
+			padding: var(--padding-1) var(--padding-2);
+			align-items: center;
+			font-size: var(--uppercase-small-500-font-size);
+			font-weight: var(--uppercase-small-500-font-weight);
+			line-height: 100%;
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+		}
+	}
+}
+
+.sa-name-email-cell {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	height: 22px;
+	overflow: hidden;
+
+	.sa-name {
+		font-size: var(--paragraph-base-500-font-size);
+		font-weight: var(--paragraph-base-500-font-weight);
+		color: var(--foreground);
+		line-height: var(--paragraph-base-500-line-height);
+		letter-spacing: -0.07px;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.sa-email {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--l3-foreground-hover);
+		line-height: var(--paragraph-base-400-line-height);
+		letter-spacing: -0.07px;
+		flex: 1 0 0;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.sa-roles-cell {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.sa-dash {
+	font-size: var(--paragraph-base-400-font-size);
+	color: var(--l3-foreground-hover);
+}
+
+.sa-empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: var(--padding-12) var(--padding-4);
+	gap: var(--spacing-4);
+	color: var(--foreground);
+
+	&__icon {
+		color: var(--l2-foreground);
+	}
+
+	&__text {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--foreground);
+		margin: 0;
+		line-height: var(--paragraph-base-400-line-height);
+
+		strong {
+			font-weight: var(--font-weight-medium);
+			color: var(--bg-base-white);
+		}
+	}
+}
+
+.sa-table-pagination {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: var(--padding-2) var(--padding-4);
+
+	.ant-pagination-total-text {
+		margin-right: auto;
+	}
+
+	.sa-pagination-range {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+	}
+
+	.sa-pagination-total {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+		opacity: 0.5;
+	}
+}
+
+.sa-tooltip {
+	.ant-tooltip-inner {
+		background-color: var(--bg-slate-500);
+		color: var(--foreground);
+		font-size: var(--font-size-xs);
+		line-height: normal;
+		padding: var(--padding-2) var(--padding-3);
+		border-radius: 4px;
+		text-align: left;
+	}
+
+	.ant-tooltip-arrow-content {
+		background-color: var(--bg-slate-500);
+	}
+}
+
+.lightMode {
+	.sa-table {
+		.ant-table-tbody {
+			> tr.sa-table-row--tinted > td {
+				background: rgba(0, 0, 0, 0.015);
+			}
+
+			> tr:hover > td {
+				background: rgba(0, 0, 0, 0.03) !important;
+			}
+		}
+	}
+
+	.sa-empty-state {
+		&__text {
+			strong {
+				color: var(--bg-base-black);
+			}
+		}
+	}
+}

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Table } from 'antd';
+import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
+import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
+import { parseAsInteger, parseAsString, useQueryState } from 'nuqs';
+
+import {
+	columns,
+	ServiceAccountsEmptyState,
+	showPaginationTotal,
+} from './utils';
+
+import './ServiceAccountsTable.styles.scss';
+
+export const PAGE_SIZE = 20;
+
+interface ServiceAccountsTableProps {
+	data: ServiceAccountRow[];
+	loading: boolean;
+	onRowClick?: (row: ServiceAccountRow) => void;
+}
+
+function ServiceAccountsTable({
+	data,
+	loading,
+	onRowClick,
+}: ServiceAccountsTableProps): JSX.Element {
+	const [currentPage, setPage] = useQueryState(
+		SA_QUERY_PARAMS.PAGE,
+		parseAsInteger.withDefault(1),
+	);
+	const [searchQuery] = useQueryState(
+		SA_QUERY_PARAMS.SEARCH,
+		parseAsString.withDefault(''),
+	);
+
+	return (
+		<div className="sa-table-wrapper">
+			{/* Todo: use new table component from periscope when ready */}
+			<Table<ServiceAccountRow>
+				columns={columns}
+				dataSource={data}
+				rowKey="id"
+				loading={loading}
+				pagination={
+					data.length > PAGE_SIZE
+						? {
+								current: currentPage,
+								pageSize: PAGE_SIZE,
+								total: data.length,
+								showTotal: showPaginationTotal,
+								showSizeChanger: false,
+								onChange: (page: number): void => void setPage(page),
+								className: 'sa-table-pagination',
+						  }
+						: false
+				}
+				rowClassName={(_, index): string =>
+					index % 2 === 0 ? 'sa-table-row--tinted' : ''
+				}
+				showSorterTooltip={false}
+				locale={{
+					emptyText: <ServiceAccountsEmptyState searchQuery={searchQuery} />,
+				}}
+				className="sa-table"
+				onRow={(
+					record,
+				): {
+					onClick?: () => void;
+					onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+					style?: React.CSSProperties;
+					tabIndex?: number;
+					role?: string;
+					'aria-label'?: string;
+				} => {
+					if (!onRowClick) {
+						return {};
+					}
+
+					return {
+						onClick: (): void => onRowClick(record),
+						onKeyDown: (e: React.KeyboardEvent<HTMLElement>): void => {
+							if (e.key === 'Enter' || e.key === ' ') {
+								e.preventDefault();
+								onRowClick(record);
+							}
+						},
+						style: { cursor: 'pointer' },
+						tabIndex: 0,
+						role: 'button',
+						'aria-label': `View service account ${record.name || record.email}`,
+					};
+				}}
+			/>
+		</div>
+	);
+}
+
+export default ServiceAccountsTable;