test(wal): log the leaky queries

* feat(audit): add telemetry audit query infrastructure

Add pkg/telemetryaudit/ with tables, field mapper, condition builder,
and statement builder for querying audit logs from signoz_audit database.
Add SourceAudit to source enum and integrate audit key resolution
into the metadata store.

* chore: address review comments

Comment out SourceAudit from Enum() until frontend is ready.
Use actual audit table constants in metadata test helpers.

* fix(audit): align field mapper with actual audit DDL schema

Remove resources_string (not in audit table DDL).
Add event_name as intrinsic column.
Resource context resolves only through the resource JSON column.

* feat(audit): add audit field value autocomplete support

Wire distributed_tag_attributes_v2 for signoz_audit into the
metadata store. Add getAuditFieldValues() and route SignalLogs +
SourceAudit to it in GetFieldValues().

* test(audit): add statement builder tests

Cover all three request types (list, time series, scalar) with
audit-specific query patterns: materialized column filters, AND/OR
conditions, limit CTEs, and group-by expressions.

* refactor(audit): inline field key map into test file

Remove test_data.go and inline the audit field key map directly
into statement_builder_test.go with a compact helper function.

* style(audit): move column map to const.go, use sqlbuilder.As in metadata

Move logsV2Columns from field_mapper.go to const.go to colocate all
column definitions. Switch getAuditKeys() to use sb.As() instead of
raw string formatting. Fix FieldContext alignment.

* fix(audit): align table names with schema migration

Migration uses logs/distributed_logs (not logs_v2/distributed_logs_v2).
Rename LogsV2TableName to LogsTableName and LogsV2LocalTableName to
LogsLocalTableName to match the actual signoz_audit DDL.

* feat(audit): add integration test fixture for audit logs

AuditLog fixture inserts into all 5 signoz_audit tables matching
the schema migration DDL: distributed_logs (no resources_string,
has event_name), distributed_logs_resource, distributed_tag_attributes_v2,
distributed_logs_attribute_keys, distributed_logs_resource_keys.

* fix(audit): rename tag_attributes_v2 to tag_attributes

Migration uses tag_attributes/distributed_tag_attributes (no _v2
suffix). Rename constants and update all references including the
integration test fixture.

* feat(audit): wire audit statement builder into querier

Add auditStmtBuilder to querier struct and route LogAggregation
queries with source=audit to it in all three dispatch locations
(main query, live tail, shiftedQuery). Create and wire the full
audit query stack in signozquerier provider.

* test(audit): add integration tests for audit log querying

Cover the documented query patterns: list all events, filter by
principal ID, filter by outcome, filter by resource name+ID,
filter by principal type, scalar count for alerting, and
isolation test ensuring audit data doesn't leak into regular logs.

* fix(audit): revert sb.As in getAuditKeys, fix fixture column_names

Revert getAuditKeys to use raw SQL strings instead of sb.As() which
incorrectly treated string literals as column references. Add explicit
column_names to all ClickHouse insert calls in the audit fixture.

* fix(audit): remove debug assertion from integration test

* feat(audit): internalize resource filter in audit statement builder

Build the resource filter internally pointing at
signoz_audit.distributed_logs_resource. Add LogsResourceTableName
constant. Remove resourceFilterStmtBuilder from constructor params.
Update test expectations to use the audit resource table.

* fix(audit): rename resource.name to resource.kind, move to resource attributes

Align with schema change from SigNoz/signoz#10826:
- signoz.audit.resource.name renamed to signoz.audit.resource.kind
- resource.kind and resource.id moved from event attributes to OTel
  Resource attributes (resource JSON column)
- Materialized columns reduced from 7 to 5 (resource.kind and
  resource.id no longer materialized)

* refactor(audit): use pytest.mark.parametrize for filter integration tests

Consolidate filter test functions into a single parametrized test.
6/8 tests passing; resource kind+ID filter and scalar count need
further investigation (resource filter JSON key extraction with
dotted keys, scalar response format).

* fix(audit): add source to resource filter for correct metadata routing

Add source param to telemetryresourcefilter.New so the resource
filter's key selectors include Source when calling GetKeysMulti.
Without this, audit resource keys route to signoz_logs metadata
tables instead of signoz_audit. Fix scalar test to use table
response format (columns+data, not rows).

* refactor(audit): reuse querier fixtures in integration tests

Add source param to BuilderQuery and build_scalar_query in the
querier fixture. Replace custom _build_audit_query and
_build_audit_ts_query helpers with BuilderQuery and
build_scalar_query from the shared fixtures.

* refactor(audit): remove wrapper helpers, inline make_query_request calls

Remove _query_audit_raw and _query_audit_scalar helpers. Use
make_query_request, BuilderQuery, and build_scalar_query directly.
Compute time window at test execution time via _time_window() to
avoid stale module-level timestamps.

* refactor(audit): inline _time_window into test functions

* style(audit): use snake_case for pytest parametrize IDs

* refactor(audit): inline DEFAULT_ORDER using build_order_by

Use build_order_by from querier fixtures instead of OrderBy/
TelemetryFieldKey dataclasses. Allow BuilderQuery.order to accept
plain dicts alongside OrderBy objects.

* refactor(audit): inline all data setup, use distinct scenarios per test

Remove _insert_standard_audit_events helper. Each test now owns its
data: list_all uses alert-rule/saved-view/user resource types,
scalar_count uses multiple failures from different principals (count=2),
leak test uses a single organization event. Parametrized filter tests
keep the original 5-event dataset.

* fix(audit): remove silent empty-string guards in metadata store

Remove guards that silently returned nil/empty when audit DB params
were empty. All call sites now pass real constants, so misconfiguration
should fail loudly rather than produce silent empty results.

* style(audit): remove module docstring from integration test

* style: formatting fix in tables file

* style: formatting fix in tables file

* fix: add auditStmtBuilder nil param to querier_test.go

* fix: fix fmt

.github/workflows/integrationci.yaml

@@ -56,7 +56,6 @@ jobs:
           - postgres
           - sqlite
         sqlite-mode:
-          - delete
           - wal
         clickhouse-version:
           - 25.5.6
@@ -65,9 +64,6 @@ jobs:
           - v0.142.0
         postgres-version:
           - 15
-        exclude:
-          - sqlstore-provider: postgres
-            sqlite-mode: wal
     if: |
       ((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'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-integrate')

.gitignore

@@ -51,6 +51,8 @@ ee/query-service/tests/test-deploy/data/
 # local data
 *.backup
 *.db
+*.db-shm
+*.db-wal
 **/db
 /deploy/docker/clickhouse-setup/data/
 /deploy/docker-swarm/clickhouse-setup/data/

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.117.1
+    image: signoz/signoz:v0.118.0
     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.117.1
+    image: signoz/signoz:v0.118.0
     ports:
       - "8080:8080" # signoz port
     volumes:

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.117.1}
+    image: signoz/signoz:${VERSION:-v0.118.0}
     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.117.1}
+    image: signoz/signoz:${VERSION:-v0.118.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -327,27 +327,6 @@ components:
           nullable: true
           type: array
       type: object
-    AuthtypesStorableRole:
-      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
-      type: object
     AuthtypesTransaction:
       properties:
         object:
@@ -371,7 +350,7 @@ components:
         id:
           type: string
         role:
-          $ref: '#/components/schemas/AuthtypesStorableRole'
+          $ref: '#/components/schemas/AuthtypesRole'
         roleId:
           type: string
         updatedAt:
@@ -381,6 +360,11 @@ components:
           type: string
       required:
       - id
+      - userId
+      - roleId
+      - createdAt
+      - updatedAt
+      - role
       type: object
     AuthtypesUserWithRoles:
       properties:
@@ -419,27 +403,65 @@ components:
       required:
       - regions
       type: object
-    CloudintegrationtypesAWSCollectionStrategy:
+    CloudintegrationtypesAWSCloudWatchLogsSubscription:
       properties:
-        aws_logs:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSLogsStrategy'
-        aws_metrics:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSMetricsStrategy'
-        s3_buckets:
-          additionalProperties:
-            items:
-              type: string
-            type: array
-          type: object
+        filterPattern:
+          type: string
+        logGroupNamePrefix:
+          type: string
+      required:
+      - logGroupNamePrefix
+      - filterPattern
+      type: object
+    CloudintegrationtypesAWSCloudWatchMetricStreamFilter:
+      properties:
+        metricNames:
+          items:
+            type: string
+          type: array
+        namespace:
+          type: string
+      required:
+      - namespace
       type: object
     CloudintegrationtypesAWSConnectionArtifact:
       properties:
-        connectionURL:
+        connectionUrl:
           type: string
       required:
-      - connectionURL
+      - connectionUrl
       type: object
-    CloudintegrationtypesAWSConnectionArtifactRequest:
+    CloudintegrationtypesAWSIntegrationConfig:
+      properties:
+        enabledRegions:
+          items:
+            type: string
+          type: array
+        telemetryCollectionStrategy:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
+      required:
+      - enabledRegions
+      - telemetryCollectionStrategy
+      type: object
+    CloudintegrationtypesAWSLogsCollectionStrategy:
+      properties:
+        subscriptions:
+          items:
+            $ref: '#/components/schemas/CloudintegrationtypesAWSCloudWatchLogsSubscription'
+          type: array
+      required:
+      - subscriptions
+      type: object
+    CloudintegrationtypesAWSMetricsCollectionStrategy:
+      properties:
+        streamFilters:
+          items:
+            $ref: '#/components/schemas/CloudintegrationtypesAWSCloudWatchMetricStreamFilter'
+          type: array
+      required:
+      - streamFilters
+      type: object
+    CloudintegrationtypesAWSPostableAccountConfig:
       properties:
         deploymentRegion:
           type: string
@@ -451,46 +473,6 @@ components:
       - deploymentRegion
       - regions
       type: object
-    CloudintegrationtypesAWSIntegrationConfig:
-      properties:
-        enabledRegions:
-          items:
-            type: string
-          type: array
-        telemetry:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
-      required:
-      - enabledRegions
-      - telemetry
-      type: object
-    CloudintegrationtypesAWSLogsStrategy:
-      properties:
-        cloudwatch_logs_subscriptions:
-          items:
-            properties:
-              filter_pattern:
-                type: string
-              log_group_name_prefix:
-                type: string
-            type: object
-          nullable: true
-          type: array
-      type: object
-    CloudintegrationtypesAWSMetricsStrategy:
-      properties:
-        cloudwatch_metric_stream_filters:
-          items:
-            properties:
-              MetricNames:
-                items:
-                  type: string
-                type: array
-              Namespace:
-                type: string
-            type: object
-          nullable: true
-          type: array
-      type: object
     CloudintegrationtypesAWSServiceConfig:
       properties:
         logs:
@@ -502,7 +484,7 @@ components:
       properties:
         enabled:
           type: boolean
-        s3_buckets:
+        s3Buckets:
           additionalProperties:
             items:
               type: string
@@ -514,6 +496,19 @@ components:
         enabled:
           type: boolean
       type: object
+    CloudintegrationtypesAWSTelemetryCollectionStrategy:
+      properties:
+        logs:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSLogsCollectionStrategy'
+        metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSMetricsCollectionStrategy'
+        s3Buckets:
+          additionalProperties:
+            items:
+              type: string
+            type: array
+          type: object
+      type: object
     CloudintegrationtypesAccount:
       properties:
         agentReport:
@@ -577,6 +572,26 @@ components:
           nullable: true
           type: array
       type: object
+    CloudintegrationtypesCloudIntegrationService:
+      nullable: true
+      properties:
+        cloudIntegrationId:
+          type: string
+        config:
+          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
+        createdAt:
+          format: date-time
+          type: string
+        id:
+          type: string
+        type:
+          $ref: '#/components/schemas/CloudintegrationtypesServiceID'
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      type: object
     CloudintegrationtypesCollectedLogAttribute:
       properties:
         name:
@@ -597,13 +612,6 @@ components:
         unit:
           type: string
       type: object
-    CloudintegrationtypesCollectionStrategy:
-      properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
-      required:
-      - aws
-      type: object
     CloudintegrationtypesConnectionArtifact:
       properties:
         aws:
@@ -611,12 +619,21 @@ components:
       required:
       - aws
       type: object
-    CloudintegrationtypesConnectionArtifactRequest:
+    CloudintegrationtypesCredentials:
       properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSConnectionArtifactRequest'
+        ingestionKey:
+          type: string
+        ingestionUrl:
+          type: string
+        sigNozApiKey:
+          type: string
+        sigNozApiUrl:
+          type: string
       required:
-      - aws
+      - sigNozApiUrl
+      - sigNozApiKey
+      - ingestionUrl
+      - ingestionKey
       type: object
     CloudintegrationtypesDashboard:
       properties:
@@ -642,7 +659,7 @@ components:
           nullable: true
           type: array
       type: object
-    CloudintegrationtypesGettableAccountWithArtifact:
+    CloudintegrationtypesGettableAccountWithConnectionArtifact:
       properties:
         connectionArtifact:
           $ref: '#/components/schemas/CloudintegrationtypesConnectionArtifact'
@@ -661,7 +678,7 @@ components:
       required:
       - accounts
       type: object
-    CloudintegrationtypesGettableAgentCheckInResponse:
+    CloudintegrationtypesGettableAgentCheckIn:
       properties:
         account_id:
           type: string
@@ -710,12 +727,72 @@ components:
             type: string
           type: array
         telemetry:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSCollectionStrategy'
       required:
       - enabled_regions
       - telemetry
       type: object
-    CloudintegrationtypesPostableAgentCheckInRequest:
+    CloudintegrationtypesOldAWSCollectionStrategy:
+      properties:
+        aws_logs:
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSLogsStrategy'
+        aws_metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSMetricsStrategy'
+        provider:
+          type: string
+        s3_buckets:
+          additionalProperties:
+            items:
+              type: string
+            type: array
+          type: object
+      type: object
+    CloudintegrationtypesOldAWSLogsStrategy:
+      properties:
+        cloudwatch_logs_subscriptions:
+          items:
+            properties:
+              filter_pattern:
+                type: string
+              log_group_name_prefix:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
+    CloudintegrationtypesOldAWSMetricsStrategy:
+      properties:
+        cloudwatch_metric_stream_filters:
+          items:
+            properties:
+              MetricNames:
+                items:
+                  type: string
+                type: array
+              Namespace:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
+    CloudintegrationtypesPostableAccount:
+      properties:
+        config:
+          $ref: '#/components/schemas/CloudintegrationtypesPostableAccountConfig'
+        credentials:
+          $ref: '#/components/schemas/CloudintegrationtypesCredentials'
+      required:
+      - config
+      - credentials
+      type: object
+    CloudintegrationtypesPostableAccountConfig:
+      properties:
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSPostableAccountConfig'
+      required:
+      - aws
+      type: object
+    CloudintegrationtypesPostableAgentCheckIn:
       properties:
         account_id:
           type: string
@@ -743,6 +820,8 @@ components:
       properties:
         assets:
           $ref: '#/components/schemas/CloudintegrationtypesAssets'
+        cloudIntegrationService:
+          $ref: '#/components/schemas/CloudintegrationtypesCloudIntegrationService'
         dataCollected:
           $ref: '#/components/schemas/CloudintegrationtypesDataCollected'
         icon:
@@ -751,12 +830,10 @@ components:
           type: string
         overview:
           type: string
-        serviceConfig:
-          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
-        supported_signals:
+        supportedSignals:
           $ref: '#/components/schemas/CloudintegrationtypesSupportedSignals'
         telemetryCollectionStrategy:
-          $ref: '#/components/schemas/CloudintegrationtypesCollectionStrategy'
+          $ref: '#/components/schemas/CloudintegrationtypesTelemetryCollectionStrategy'
         title:
           type: string
       required:
@@ -765,9 +842,10 @@ components:
       - icon
       - overview
       - assets
-      - supported_signals
+      - supportedSignals
       - dataCollected
       - telemetryCollectionStrategy
+      - cloudIntegrationService
       type: object
     CloudintegrationtypesServiceConfig:
       properties:
@@ -776,6 +854,22 @@ components:
       required:
       - aws
       type: object
+    CloudintegrationtypesServiceID:
+      enum:
+      - alb
+      - api-gateway
+      - dynamodb
+      - ec2
+      - ecs
+      - eks
+      - elasticache
+      - lambda
+      - msk
+      - rds
+      - s3sync
+      - sns
+      - sqs
+      type: string
     CloudintegrationtypesServiceMetadata:
       properties:
         enabled:
@@ -799,6 +893,13 @@ components:
         metrics:
           type: boolean
       type: object
+    CloudintegrationtypesTelemetryCollectionStrategy:
+      properties:
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
+      required:
+      - aws
+      type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
@@ -3097,7 +3198,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckInRequest'
+              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckIn'
       responses:
         "200":
           content:
@@ -3105,7 +3206,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckInResponse'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckIn'
                   status:
                     type: string
                 required:
@@ -3206,7 +3307,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/CloudintegrationtypesConnectionArtifactRequest'
+              $ref: '#/components/schemas/CloudintegrationtypesPostableAccount'
       responses:
         "200":
           content:
@@ -3214,7 +3315,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAccountWithArtifact'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAccountWithConnectionArtifact'
                   status:
                     type: string
                 required:
@@ -3410,6 +3511,61 @@ paths:
       summary: Update account
       tags:
       - cloudintegration
+  /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}:
+    put:
+      deprecated: false
+      description: This endpoint updates a service for the specified cloud provider
+      operationId: UpdateService
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: service_id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
+      responses:
+        "204":
+          description: No Content
+        "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: Update service
+      tags:
+      - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/accounts/check_in:
     post:
       deprecated: false
@@ -3425,7 +3581,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckInRequest'
+              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckIn'
       responses:
         "200":
           content:
@@ -3433,7 +3589,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckInResponse'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckIn'
                   status:
                     type: string
                 required:
@@ -3467,6 +3623,59 @@ paths:
       summary: Agent check-in
       tags:
       - cloudintegration
+  /api/v1/cloud_integrations/{cloud_provider}/credentials:
+    get:
+      deprecated: false
+      description: This endpoint retrieves the connection credentials required for
+        integration
+      operationId: GetConnectionCredentials
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/CloudintegrationtypesCredentials'
+                  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: Get connection credentials
+      tags:
+      - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/services:
     get:
       deprecated: false
@@ -3577,55 +3786,6 @@ paths:
       summary: Get service
       tags:
       - cloudintegration
-    put:
-      deprecated: false
-      description: This endpoint updates a service for the specified cloud provider
-      operationId: UpdateService
-      parameters:
-      - in: path
-        name: cloud_provider
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: service_id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
-      responses:
-        "204":
-          description: No Content
-        "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: Update service
-      tags:
-      - cloudintegration
   /api/v1/complete/google:
     get:
       deprecated: false

ee/query-service/rules/anomaly.go

@@ -5,7 +5,6 @@ import (
 	"encoding/json"
 	"fmt"
 	"log/slog"
-	"strings"
 	"sync"
 	"time"
 
@@ -50,7 +49,6 @@ func NewAnomalyRule(
 	logger *slog.Logger,
 	opts ...baserules.RuleOption,
 ) (*AnomalyRule, error) {
-
 	logger.Info("creating new AnomalyRule", slog.String("rule.id", id))
 
 	opts = append(opts, baserules.WithLogger(logger))
@@ -60,44 +58,44 @@ func NewAnomalyRule(
 		return nil, err
 	}
 
-	t := AnomalyRule{
+	r := AnomalyRule{
 		BaseRule: baseRule,
+		querier:  querier,
+		version:  p.Version,
+		logger:   logger.With(slog.String("rule.id", id)),
 	}
 
-	switch strings.ToLower(p.RuleCondition.Seasonality) {
-	case "hourly":
-		t.seasonality = anomaly.SeasonalityHourly
-	case "daily":
-		t.seasonality = anomaly.SeasonalityDaily
-	case "weekly":
-		t.seasonality = anomaly.SeasonalityWeekly
+	switch p.RuleCondition.Seasonality {
+	case ruletypes.SeasonalityHourly:
+		r.seasonality = anomaly.SeasonalityHourly
+	case ruletypes.SeasonalityDaily:
+		r.seasonality = anomaly.SeasonalityDaily
+	case ruletypes.SeasonalityWeekly:
+		r.seasonality = anomaly.SeasonalityWeekly
 	default:
-		t.seasonality = anomaly.SeasonalityDaily
+		r.seasonality = anomaly.SeasonalityDaily
 	}
 
-	logger.Info("using seasonality", slog.String("rule.id", id), slog.String("rule.seasonality", t.seasonality.StringValue()))
+	r.logger.Info("using seasonality", slog.String("rule.seasonality", r.seasonality.StringValue()))
 
-	if t.seasonality == anomaly.SeasonalityHourly {
-		t.provider = anomaly.NewHourlyProvider(
+	if r.seasonality == anomaly.SeasonalityHourly {
+		r.provider = anomaly.NewHourlyProvider(
 			anomaly.WithQuerier[*anomaly.HourlyProvider](querier),
-			anomaly.WithLogger[*anomaly.HourlyProvider](logger),
+			anomaly.WithLogger[*anomaly.HourlyProvider](r.logger),
 		)
-	} else if t.seasonality == anomaly.SeasonalityDaily {
-		t.provider = anomaly.NewDailyProvider(
+	} else if r.seasonality == anomaly.SeasonalityDaily {
+		r.provider = anomaly.NewDailyProvider(
 			anomaly.WithQuerier[*anomaly.DailyProvider](querier),
-			anomaly.WithLogger[*anomaly.DailyProvider](logger),
+			anomaly.WithLogger[*anomaly.DailyProvider](r.logger),
 		)
-	} else if t.seasonality == anomaly.SeasonalityWeekly {
-		t.provider = anomaly.NewWeeklyProvider(
+	} else if r.seasonality == anomaly.SeasonalityWeekly {
+		r.provider = anomaly.NewWeeklyProvider(
 			anomaly.WithQuerier[*anomaly.WeeklyProvider](querier),
-			anomaly.WithLogger[*anomaly.WeeklyProvider](logger),
+			anomaly.WithLogger[*anomaly.WeeklyProvider](r.logger),
 		)
 	}
 
-	t.querier = querier
-	t.version = p.Version
-	t.logger = logger
-	return &t, nil
+	return &r, nil
 }
 
 func (r *AnomalyRule) Type() ruletypes.RuleType {
@@ -105,8 +103,11 @@ func (r *AnomalyRule) Type() ruletypes.RuleType {
 }
 
 func (r *AnomalyRule) prepareQueryRange(ctx context.Context, ts time.Time) *qbtypes.QueryRangeRequest {
-
-	r.logger.InfoContext(ctx, "prepare query range request", slog.String("rule.id", r.ID()), slog.Int64("ts", ts.UnixMilli()), slog.Int64("eval.window_ms", r.EvalWindow().Milliseconds()), slog.Int64("eval.delay_ms", r.EvalDelay().Milliseconds()))
+	r.logger.InfoContext(
+		ctx, "prepare query range request", slog.Int64("ts", ts.UnixMilli()),
+		slog.Int64("eval.window_ms", r.EvalWindow().Milliseconds()),
+		slog.Int64("eval.delay_ms", r.EvalDelay().Milliseconds()),
+	)
 
 	startTs, endTs := r.Timestamps(ts)
 	start, end := startTs.UnixMilli(), endTs.UnixMilli()
@@ -146,7 +147,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 	}
 
 	if queryResult == nil {
-		r.logger.WarnContext(ctx, "nil qb result", slog.String("rule.id", r.ID()), slog.Int64("ts", ts.UnixMilli()))
+		r.logger.WarnContext(ctx, "nil qb result", slog.Int64("ts", ts.UnixMilli()))
 		return ruletypes.Vector{}, nil
 	}
 
@@ -157,7 +158,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 	if missingDataAlert := r.HandleMissingDataAlert(ctx, ts, hasData); missingDataAlert != nil {
 		return ruletypes.Vector{*missingDataAlert}, nil
 	} else if !hasData {
-		r.logger.WarnContext(ctx, "no anomaly result", slog.String("rule.id", r.ID()))
+		r.logger.WarnContext(ctx, "no anomaly result")
 		return ruletypes.Vector{}, nil
 	}
 
@@ -165,7 +166,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 
 	scoresJSON, _ := json.Marshal(queryResult.Aggregations[0].AnomalyScores)
 	// TODO(srikanthccv): this could be noisy but we do this to answer false alert requests
-	r.logger.InfoContext(ctx, "anomaly scores", slog.String("rule.id", r.ID()), slog.String("anomaly.scores", string(scoresJSON)))
+	r.logger.InfoContext(ctx, "anomaly scores", slog.String("anomaly.scores", string(scoresJSON)))
 
 	// Filter out new series if newGroupEvalDelay is configured
 	seriesToProcess := queryResult.Aggregations[0].AnomalyScores
@@ -173,7 +174,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 		filteredSeries, filterErr := r.BaseRule.FilterNewSeries(ctx, ts, seriesToProcess)
 		// In case of error we log the error and continue with the original series
 		if filterErr != nil {
-			r.logger.ErrorContext(ctx, "error filtering new series", slog.String("rule.id", r.ID()), errors.Attr(filterErr))
+			r.logger.ErrorContext(ctx, "error filtering new series", errors.Attr(filterErr))
 		} else {
 			seriesToProcess = filteredSeries
 		}
@@ -181,7 +182,11 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 
 	for _, series := range seriesToProcess {
 		if !r.Condition().ShouldEval(series) {
-			r.logger.InfoContext(ctx, "not enough data points to evaluate series, skipping", slog.String("rule.id", r.ID()), slog.Int("series.num_points", len(series.Values)), slog.Int("series.required_points", r.Condition().RequiredNumPoints))
+			r.logger.InfoContext(
+				ctx, "not enough data points to evaluate series, skipping",
+				slog.Int("series.num_points", len(series.Values)),
+				slog.Int("series.required_points", r.Condition().RequiredNumPoints),
+			)
 			continue
 		}
 		results, err := r.Threshold.Eval(series, r.Unit(), ruletypes.EvalData{
@@ -205,7 +210,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 	var res ruletypes.Vector
 	var err error
 
-	r.logger.InfoContext(ctx, "running query", slog.String("rule.id", r.ID()))
+	r.logger.InfoContext(ctx, "running query")
 	res, err = r.buildAndRunQuery(ctx, r.OrgID(), ts)
 
 	if err != nil {
@@ -231,7 +236,10 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		}
 		value := valueFormatter.Format(smpl.V, r.Unit())
 		threshold := valueFormatter.Format(smpl.Target, smpl.TargetUnit)
-		r.logger.DebugContext(ctx, "alert template data for rule", slog.String("rule.id", r.ID()), slog.String("formatter.name", valueFormatter.Name()), slog.String("alert.value", value), slog.String("alert.threshold", threshold))
+		r.logger.DebugContext(
+			ctx, "alert template data for rule", slog.String("formatter.name", valueFormatter.Name()),
+			slog.String("alert.value", value), slog.String("alert.threshold", threshold),
+		)
 
 		tmplData := ruletypes.AlertTemplateData(l, value, threshold)
 		// Inject some convenience variables that are easier to remember for users
@@ -251,7 +259,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 			result, err := tmpl.Expand()
 			if err != nil {
 				result = fmt.Sprintf("<error expanding template: %s>", err)
-				r.logger.ErrorContext(ctx, "expanding alert template failed", slog.String("rule.id", r.ID()), errors.Attr(err), slog.Any("alert.template_data", tmplData))
+				r.logger.ErrorContext(ctx, "expanding alert template failed", errors.Attr(err), slog.Any("alert.template_data", tmplData))
 			}
 			return result
 		}
@@ -281,7 +289,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		resultFPs[h] = struct{}{}
 
 		if _, ok := alerts[h]; ok {
-			r.logger.ErrorContext(ctx, "the alert query returns duplicate records", slog.String("rule.id", r.ID()), slog.Any("alert", alerts[h]))
+			r.logger.ErrorContext(ctx, "the alert query returns duplicate records", slog.Any("alert", alerts[h]))
 			err = errors.NewInternalf(errors.CodeInternal, "duplicate alert found, vector contains metrics with the same labelset after applying alert labels")
 			return 0, err
 		}
@@ -300,7 +308,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		}
 	}
 
-	r.logger.InfoContext(ctx, "number of alerts found", slog.String("rule.id", r.ID()), slog.Int("alert.count", len(alerts)))
+	r.logger.InfoContext(ctx, "number of alerts found", slog.Int("alert.count", len(alerts)))
 	// alerts[h] is ready, add or update active list now
 	for h, a := range alerts {
 		// Check whether we already have alerting state for the identifying label set.
@@ -327,7 +335,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 	for fp, a := range r.Active {
 		labelsJSON, err := json.Marshal(a.QueryResultLabels)
 		if err != nil {
-			r.logger.ErrorContext(ctx, "error marshaling labels", slog.String("rule.id", r.ID()), errors.Attr(err), slog.Any("alert.labels", a.Labels))
+			r.logger.ErrorContext(ctx, "error marshaling labels", errors.Attr(err), slog.Any("alert.labels", a.Labels))
 		}
 		if _, ok := resultFPs[fp]; !ok {
 			// If the alert was previously firing, keep it around for a given
@@ -382,7 +390,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 				state = ruletypes.StateFiring
 			}
 			a.State = state
-			r.logger.DebugContext(ctx, "converting alert state", slog.String("rule.id", r.ID()), slog.Any("alert.state", state))
+			r.logger.DebugContext(ctx, "converting alert state", slog.Any("alert.state", state))
 			itemsToAdd = append(itemsToAdd, rulestatehistorytypes.RuleStateHistory{
 				RuleID:       r.ID(),
 				RuleName:     r.Name(),
@@ -405,7 +413,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		itemsToAdd[idx] = item
 	}
 
-	r.RecordRuleStateHistory(ctx, prevState, currentState, itemsToAdd)
+	_ = r.RecordRuleStateHistory(ctx, itemsToAdd)
 
 	return len(r.Active), nil
 }

ee/query-service/rules/anomaly_test.go

@@ -67,7 +67,7 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 				}},
 			},
 			SelectedQuery: "A",
-			Seasonality:   "daily",
+			Seasonality:   ruletypes.SeasonalityDaily,
 			Thresholds: &ruletypes.RuleThresholdData{
 				Kind: ruletypes.BasicThresholdKind,
 				Spec: ruletypes.BasicRuleThresholds{{
@@ -170,7 +170,7 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 				}},
 			},
 			SelectedQuery: "A",
-			Seasonality:   "daily",
+			Seasonality:   ruletypes.SeasonalityDaily,
 			Thresholds: &ruletypes.RuleThresholdData{
 				Kind: ruletypes.BasicThresholdKind,
 				Spec: ruletypes.BasicRuleThresholds{{

frontend/.cursor/rules/jest-mocking-strategy.mdc

@@ -1,77 +0,0 @@
----
-description: Global vs local mock strategy for Jest tests
-globs:
-  - "**/*.test.ts"
-  - "**/*.test.tsx"
-  - "**/__tests__/**/*.ts"
-  - "**/__tests__/**/*.tsx"
-alwaysApply: false
----
-
-# Mock Decision Strategy
-
-## Global Mocks (20+ test files)
-
-- Core infrastructure: react-router-dom, react-query, antd
-- Browser APIs: ResizeObserver, matchMedia, localStorage
-- Utility libraries: date-fns, lodash
-- Available: `uplot` → `__mocks__/uplotMock.ts`
-
-## Local Mocks (5–15 test files)
-
-- Business logic dependencies
-- API endpoints with specific responses
-- Domain-specific components
-- Error scenarios and edge cases
-
-## Decision Tree
-
-```
-Is it used in 20+ test files?
-├─ YES → Use Global Mock
-│   ├─ react-router-dom
-│   ├─ react-query
-│   ├─ antd components
-│   └─ browser APIs
-│
-└─ NO → Is it business logic?
-    ├─ YES → Use Local Mock
-    │   ├─ API endpoints
-    │   ├─ Custom hooks
-    │   └─ Domain components
-    │
-    └─ NO → Is it test-specific?
-        ├─ YES → Use Local Mock
-        │   ├─ Error scenarios
-        │   ├─ Loading states
-        │   └─ Specific data
-        │
-        └─ NO → Consider Global Mock
-            └─ If it becomes frequently used
-```
-
-## Anti-patterns
-
-❌ Don't mock global dependencies locally:
-```ts
-jest.mock('react-router-dom', () => ({ ... }));  // Already globally mocked
-```
-
-❌ Don't create global mocks for test-specific data:
-```ts
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => specificTestData)  // BAD - should be local
-}));
-```
-
-✅ Do use global mocks for infrastructure:
-```ts
-import { useLocation } from 'react-router-dom';
-```
-
-✅ Do create local mocks for business logic:
-```ts
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => mockTracesData)
-}));
-```

frontend/.cursor/rules/jest-test-conventions.mdc

@@ -1,124 +0,0 @@
----
-description: Core Jest/React Testing Library conventions - harness, MSW, interactions, timers
-globs:
-  - "**/*.test.ts"
-  - "**/*.test.tsx"
-  - "**/__tests__/**/*.ts"
-  - "**/__tests__/**/*.tsx"
-alwaysApply: false
----
-
-# Jest Test Conventions
-
-Expert developer with Jest, React Testing Library, MSW, and TypeScript. Focus on critical functionality, mock dependencies before imports, test multiple scenarios, write maintainable tests.
-
-**Auto-detect TypeScript**: Check for TypeScript in the project through tsconfig.json or package.json dependencies. Adjust syntax based on this detection.
-
-## Imports
-
-Always import from our harness:
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-```
-For API mocks:
-```ts
-import { server, rest } from 'mocks-server/server';
-```
-❌ Do not import directly from `@testing-library/react`.
-
-## Router
-
-Use the router built into render:
-```ts
-render(<Page />, undefined, { initialRoute: '/traces-explorer' });
-```
-Only mock `useLocation` / `useParams` if the test depends on them.
-
-## Hook Mocks
-
-```ts
-import useFoo from 'hooks/useFoo';
-jest.mock('hooks/useFoo');
-const mockUseFoo = jest.mocked(useFoo);
-mockUseFoo.mockReturnValue(/* minimal shape */ as any);
-```
-Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
-
-## MSW
-
-Global MSW server runs automatically. Override per-test:
-```ts
-server.use(
-  rest.get('*/api/v1/foo', (_req, res, ctx) => res(ctx.status(200), ctx.json({ ok: true })))
-);
-```
-Keep large responses in `mocks-server/__mockdata__/`.
-
-## Interactions
-
-- Prefer `userEvent` for real user interactions (click, type, select, tab).
-- Use `fireEvent` only for low-level/programmatic events not covered by `userEvent` (e.g., scroll, resize, setting `element.scrollTop` for virtualization). Wrap in `act(...)` if needed.
-- Always await interactions:
-```ts
-const user = userEvent.setup({ pointerEventsCheck: 0 });
-await user.click(screen.getByRole('button', { name: /save/i }));
-```
-
-```ts
-// Example: virtualized list scroll (no userEvent helper)
-const scroller = container.querySelector('[data-test-id="virtuoso-scroller"]') as HTMLElement;
-scroller.scrollTop = targetScrollTop;
-act(() => { fireEvent.scroll(scroller); });
-```
-
-## Timers
-
-❌ No global fake timers. ✅ Per-test only:
-```ts
-jest.useFakeTimers();
-const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
-await user.type(screen.getByRole('textbox'), 'query');
-jest.advanceTimersByTime(400);
-jest.useRealTimers();
-```
-
-## Queries
-
-Prefer accessible queries (`getByRole`, `findByRole`, `getByLabelText`). Fallback: visible text. Last resort: `data-testid`.
-
-## Best Practices
-
-- **Critical Functionality**: Prioritize testing business logic and utilities
-- **Dependency Mocking**: Global mocks for infra, local mocks for business logic
-- **Data Scenarios**: Always test valid, invalid, and edge cases
-- **Descriptive Names**: Make test intent clear
-- **Organization**: Group related tests in describe
-- **Consistency**: Match repo conventions
-- **Edge Cases**: Test null, undefined, unexpected values
-- **Limit Scope**: 3–5 focused tests per file
-- **Use Helpers**: `rqSuccess`, `makeUser`, etc.
-- **No Any**: Enforce type safety
-
-## Anti-patterns
-
-❌ Importing RTL directly | ❌ Global fake timers | ❌ Wrapping render in `act(...)` | ❌ Mocking infra locally
-✅ Use harness | ✅ MSW for API | ✅ userEvent + await | ✅ Pin time only for relative-date tests
-
-## Example
-
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-import MyComponent from '../MyComponent';
-
-describe('MyComponent', () => {
-  it('renders and interacts', async () => {
-    const user = userEvent.setup({ pointerEventsCheck: 0 });
-    server.use(rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 }))));
-    render(<MyComponent />, undefined, { initialRoute: '/foo' });
-    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /refresh/i }));
-    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
-  });
-});
-```

frontend/.cursor/rules/jest-typescript-type-safety.mdc

@@ -1,168 +0,0 @@
----
-description: TypeScript type safety for Jest tests - mocks, interfaces, no any
-globs:
-  - "**/*.test.ts"
-  - "**/*.test.tsx"
-  - "**/__tests__/**/*.ts"
-  - "**/__tests__/**/*.tsx"
-alwaysApply: false
----
-
-# TypeScript Type Safety for Jest Tests
-
-**CRITICAL**: All Jest tests MUST be fully type-safe.
-
-## Requirements
-
-- Use proper TypeScript interfaces for all mock data
-- Type all Jest mock functions with `jest.MockedFunction<T>`
-- Use generic types for React components and hooks
-- Define proper return types for mock functions
-- Use `as const` for literal types when needed
-- Avoid `any` type – use proper typing instead
-
-## Mock Function Typing
-
-```ts
-// ✅ GOOD
-const mockFetchUser = jest.fn() as jest.MockedFunction<(id: number) => Promise<ApiResponse<User>>>;
-const mockEventHandler = jest.fn() as jest.MockedFunction<(event: Event) => void>;
-
-// ❌ BAD
-const mockFetchUser = jest.fn() as any;
-```
-
-## Mock Data with Interfaces
-
-```ts
-interface User { id: number; name: string; email: string; }
-interface ApiResponse<T> { data: T; status: number; message: string; }
-
-const mockUser: User = { id: 1, name: 'John Doe', email: 'john@example.com' };
-mockFetchUser.mockResolvedValue({ data: mockUser, status: 200, message: 'Success' });
-```
-
-## Component Props Typing
-
-```ts
-interface ComponentProps { title: string; data: User[]; onUserSelect: (user: User) => void; }
-
-const mockProps: ComponentProps = {
-  title: 'Test',
-  data: [{ id: 1, name: 'John', email: 'john@example.com' }],
-  onUserSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
-};
-render(<TestComponent {...mockProps} />);
-```
-
-## Hook Testing with Types
-
-```ts
-interface UseUserDataReturn {
-  user: User | null;
-  loading: boolean;
-  error: string | null;
-  refetch: () => void;
-}
-
-describe('useUserData', () => {
-  it('should return user data with proper typing', () => {
-    const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
-    mockFetchUser.mockResolvedValue({ data: mockUser, status: 200, message: 'Success' });
-    const { result } = renderHook(() => useUserData(1));
-    expect(result.current.user).toEqual(mockUser);
-    expect(result.current.loading).toBe(false);
-    expect(result.current.error).toBeNull();
-  });
-});
-```
-
-## Generic Mock Typing
-
-```ts
-interface MockApiResponse<T> { data: T; status: number; }
-
-const mockFetchData = jest.fn() as jest.MockedFunction<
-  <T>(endpoint: string) => Promise<MockApiResponse<T>>
->;
-mockFetchData<User>('/users').mockResolvedValue({ data: { id: 1, name: 'John' }, status: 200 });
-```
-
-## React Testing Library with Types
-
-```ts
-type TestComponentProps = ComponentProps<typeof TestComponent>;
-
-const renderTestComponent = (props: Partial<TestComponentProps> = {}): RenderResult => {
-  const defaultProps: TestComponentProps = { title: 'Test', data: [], onSelect: jest.fn(), ...props };
-  return render(<TestComponent {...defaultProps} />);
-};
-```
-
-## Error Handling with Types
-
-```ts
-interface ApiError { message: string; code: number; details?: Record<string, unknown>; }
-const mockApiError: ApiError = { message: 'API Error', code: 500, details: { endpoint: '/users' } };
-mockFetchUser.mockRejectedValue(new Error(JSON.stringify(mockApiError)));
-```
-
-## Global Mock Type Safety
-
-```ts
-// In __mocks__/routerMock.ts
-export const mockUseLocation = (overrides: Partial<Location> = {}): Location => ({
-  pathname: '/traces',
-  search: '',
-  hash: '',
-  state: null,
-  key: 'test-key',
-  ...overrides,
-});
-// In test files: const location = useLocation(); // Properly typed from global mock
-```
-
-## TypeScript Configuration for Jest
-
-```json
-// jest.config.ts
-{
-  "preset": "ts-jest/presets/js-with-ts-esm",
-  "globals": {
-    "ts-jest": {
-      "useESM": true,
-      "isolatedModules": true,
-      "tsconfig": "<rootDir>/tsconfig.jest.json"
-    }
-  },
-  "extensionsToTreatAsEsm": [".ts", ".tsx"],
-  "moduleFileExtensions": ["ts", "tsx", "js", "json"]
-}
-```
-
-```json
-// tsconfig.jest.json
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "types": ["jest", "@testing-library/jest-dom"],
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node"
-  },
-  "include": ["src/**/*", "**/*.test.ts", "**/*.test.tsx", "__mocks__/**/*"]
-}
-```
-
-## Type Safety Checklist
-
-- [ ] All mock functions use `jest.MockedFunction<T>`
-- [ ] All mock data has proper interfaces
-- [ ] No `any` types in test files
-- [ ] Generic types are used where appropriate
-- [ ] Error types are properly defined
-- [ ] Component props are typed
-- [ ] Hook return types are defined
-- [ ] API response types are defined
-- [ ] Global mocks are type-safe
-- [ ] Test utilities are properly typed

frontend/package.json

@@ -65,14 +65,12 @@
     "@signozhq/sonner": "0.1.0",
     "@signozhq/switch": "0.0.2",
     "@signozhq/table": "0.3.7",
-    "@signozhq/tabs": "0.0.11",
     "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
     "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
-    "@uiw/codemirror-theme-dracula": "4.25.9",
     "@uiw/codemirror-theme-github": "4.24.1",
     "@uiw/react-codemirror": "4.23.10",
     "@uiw/react-md-editor": "3.23.5",

frontend/public/Logos/hasura.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#1eb4d4" viewBox="0 0 24 24"><title>Hasura</title><path d="M23.558 8.172c.707-2.152.282-6.447-1.09-8.032a.42.42 0 0 0-.664.051l-1.69 2.59a1.32 1.32 0 0 1-1.737.276C16.544 1.885 14.354 1.204 12 1.204s-4.544.68-6.378 1.853a1.326 1.326 0 0 1-1.736-.276L2.196.191A.42.42 0 0 0 1.532.14C.16 1.728-.265 6.023.442 8.172c.236.716.3 1.472.16 2.207-.137.73-.276 1.61-.276 2.223C.326 18.898 5.553 24 11.997 24c6.447 0 11.671-5.105 11.671-11.398 0-.613-.138-1.494-.276-2.223a4.47 4.47 0 0 1 .166-2.207m-11.56 13.284c-4.984 0-9.036-3.96-9.036-8.827q0-.239.014-.473c.18-3.316 2.243-6.15 5.16-7.5 1.17-.546 2.481-.848 3.864-.848s2.69.302 3.864.85c2.917 1.351 4.98 4.187 5.16 7.501q.013.236.014.473c-.003 4.864-4.057 8.824-9.04 8.824m3.915-5.43-2.31-3.91-1.98-3.26a.26.26 0 0 0-.223-.125H9.508a.26.26 0 0 0-.227.13.25.25 0 0 0 .003.254l1.895 3.109-2.542 3.787a.25.25 0 0 0-.011.259.26.26 0 0 0 .23.132h1.905a.26.26 0 0 0 .218-.116l1.375-2.096 1.233 2.088a.26.26 0 0 0 .224.127h1.878c.094 0 .18-.049.224-.127a.24.24 0 0 0 0-.251z"/></svg>

frontend/public/Logos/n8n.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#ea4b71" viewBox="0 0 24 24"><title>n8n</title><path d="M21.474 5.684a2.53 2.53 0 0 0-2.447 1.895H16.13a2.526 2.526 0 0 0-2.492 2.11l-.103.624a1.26 1.26 0 0 1-1.246 1.055h-1.001a2.527 2.527 0 0 0-4.893 0H4.973a2.527 2.527 0 1 0 0 1.264h1.422a2.527 2.527 0 0 0 4.894 0h1a1.26 1.26 0 0 1 1.247 1.055l.103.623a2.526 2.526 0 0 0 2.492 2.111h.37a2.527 2.527 0 1 0 0-1.263h-.37a1.26 1.26 0 0 1-1.246-1.056l-.103-.623A2.52 2.52 0 0 0 13.96 12a2.52 2.52 0 0 0 .82-1.48l.104-.622a1.26 1.26 0 0 1 1.246-1.056h2.896a2.527 2.527 0 1 0 2.447-3.158m0 1.263a1.263 1.263 0 0 1 1.263 1.263 1.263 1.263 0 0 1-1.263 1.264A1.263 1.263 0 0 1 20.21 8.21a1.263 1.263 0 0 1 1.264-1.263m-18.948 3.79A1.263 1.263 0 0 1 3.79 12a1.263 1.263 0 0 1-1.264 1.263A1.263 1.263 0 0 1 1.263 12a1.263 1.263 0 0 1 1.263-1.263m6.316 0A1.263 1.263 0 0 1 10.105 12a1.263 1.263 0 0 1-1.263 1.263A1.263 1.263 0 0 1 7.58 12a1.263 1.263 0 0 1 1.263-1.263m10.106 3.79a1.263 1.263 0 0 1 1.263 1.263 1.263 1.263 0 0 1-1.263 1.263 1.263 1.263 0 0 1-1.264-1.263 1.263 1.263 0 0 1 1.263-1.264"/></svg>

frontend/public/svgs/dotted-double-line.svg

@@ -1,312 +0,0 @@
-<svg width="929" height="8" viewBox="0 0 929 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="2" height="2" rx="1" fill="#242834"/>
-<rect x="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="12" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="18" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="24" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="30" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="36" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="42" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="48" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="54" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="60" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="66" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="72" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="78" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="84" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="90" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="96" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="102" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="108" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="114" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="120" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="126" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="132" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="138" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="144" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="150" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="156" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="162" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="168" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="174" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="180" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="186" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="192" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="198" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="204" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="210" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="216" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="222" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="228" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="234" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="240" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="246" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="252" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="258" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="264" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="270" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="276" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="282" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="288" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="294" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="300" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="306" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="312" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="318" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="324" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="330" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="336" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="342" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="348" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="354" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="360" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="366" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="372" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="378" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="384" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="390" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="396" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="402" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="408" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="414" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="420" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="426" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="432" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="438" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="444" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="450" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="456" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="462" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="468" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="474" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="480" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="486" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="492" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="498" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="504" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="510" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="516" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="522" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="528" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="534" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="540" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="546" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="552" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="558" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="564" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="570" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="576" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="582" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="588" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="594" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="600" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="606" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="612" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="618" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="624" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="630" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="636" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="642" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="648" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="654" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="660" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="666" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="672" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="678" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="684" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="690" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="696" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="702" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="708" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="714" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="720" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="726" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="732" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="738" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="744" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="750" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="756" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="762" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="768" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="774" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="780" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="786" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="792" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="798" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="804" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="810" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="816" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="822" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="828" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="834" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="840" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="846" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="852" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="858" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="864" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="870" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="876" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="882" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="888" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="894" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="900" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="906" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="912" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="918" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="924" width="2" height="2" rx="1" fill="#242834"/>
-<rect y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="6" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="12" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="18" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="24" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="30" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="36" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="42" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="48" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="54" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="60" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="66" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="72" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="78" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="84" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="90" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="96" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="102" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="108" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="114" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="120" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="126" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="132" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="138" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="144" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="150" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="156" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="162" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="168" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="174" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="180" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="186" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="192" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="198" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="204" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="210" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="216" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="222" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="228" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="234" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="240" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="246" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="252" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="258" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="264" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="270" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="276" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="282" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="288" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="294" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="300" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="306" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="312" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="318" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="324" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="330" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="336" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="342" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="348" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="354" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="360" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="366" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="372" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="378" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="384" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="390" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="396" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="402" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="408" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="414" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="420" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="426" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="432" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="438" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="444" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="450" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="456" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="462" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="468" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="474" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="480" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="486" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="492" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="498" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="504" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="510" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="516" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="522" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="528" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="534" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="540" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="546" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="552" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="558" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="564" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="570" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="576" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="582" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="588" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="594" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="600" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="606" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="612" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="618" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="624" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="630" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="636" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="642" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="648" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="654" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="660" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="666" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="672" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="678" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="684" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="690" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="696" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="702" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="708" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="714" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="720" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="726" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="732" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="738" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="744" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="750" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="756" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="762" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="768" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="774" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="780" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="786" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="792" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="798" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="804" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="810" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="816" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="822" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="828" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="834" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="840" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="846" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="852" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="858" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="864" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="870" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="876" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="882" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="888" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="894" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="900" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="906" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="912" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="918" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="924" y="6" width="2" height="2" rx="1" fill="#242834"/>
-</svg>

frontend/src/AppRoutes/Private.tsx

@@ -1,23 +1,17 @@
-import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
+import { ReactChild, useCallback, useMemo } from 'react';
 import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import getAll from 'api/v1/user/get';
+import { useListUsers } from 'api/generated/services/users';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { SuccessResponseV2 } from 'types/api';
-import APIError from 'types/api/error';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
-import { Organization } from 'types/api/user/getOrganization';
-import { UserResponse } from 'types/api/user/getUser';
 import { USER_ROLES } from 'types/roles';
 import { routePermission } from 'utils/permission';
 
@@ -29,6 +23,7 @@ import routes, {
 	SUPPORT_ROUTE,
 } from './routes';
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const location = useLocation();
 	const { pathname } = location;
@@ -61,20 +56,17 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const currentRoute = mapRoutes.get('current');
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
-	const [orgData, setOrgData] = useState<Organization | undefined>(undefined);
+	const orgData = useMemo(() => {
+		if (org && org.length > 0 && org[0].id !== undefined) {
+			return org[0];
+		}
+		return undefined;
+	}, [org]);
 
-	const { data: usersData, isFetching: isFetchingUsers } = useQuery<
-		SuccessResponseV2<UserResponse[]> | undefined,
-		APIError
-	>({
-		queryFn: () => {
-			if (orgData && orgData.id !== undefined) {
-				return getAll();
-			}
-			return undefined;
+	const { data: usersData, isFetching: isFetchingUsers } = useListUsers({
+		query: {
+			enabled: !isEmpty(orgData) && user.role === 'ADMIN',
 		},
-		queryKey: ['getOrgUser'],
-		enabled: !isEmpty(orgData) && user.role === 'ADMIN',
 	});
 
 	const checkFirstTimeUser = useCallback((): boolean => {
@@ -87,214 +79,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return remainingUsers.length === 1;
 	}, [usersData?.data]);
 
-	useEffect(() => {
-		if (
-			isCloudUserVal &&
-			!isFetchingOrgPreferences &&
-			orgPreferences &&
-			!isFetchingUsers &&
-			usersData &&
-			usersData.data
-		) {
-			const isOnboardingComplete = orgPreferences?.find(
-				(preference: OrgPreference) =>
-					preference.name === ORG_PREFERENCES.ORG_ONBOARDING,
-			)?.value;
-
-			// Don't redirect to onboarding if workspace has issues (blocked, suspended, or restricted)
-			// User needs access to settings/billing to fix payment issues
-			const isWorkspaceBlocked = trialInfo?.workSpaceBlock;
-			const isWorkspaceSuspended = activeLicense?.state === LicenseState.DEFAULTED;
-			const isWorkspaceAccessRestricted =
-				activeLicense?.state === LicenseState.TERMINATED ||
-				activeLicense?.state === LicenseState.EXPIRED ||
-				activeLicense?.state === LicenseState.CANCELLED;
-
-			const hasWorkspaceIssue =
-				isWorkspaceBlocked || isWorkspaceSuspended || isWorkspaceAccessRestricted;
-
-			if (hasWorkspaceIssue) {
-				return;
-			}
-
-			const isFirstUser = checkFirstTimeUser();
-			if (
-				isFirstUser &&
-				!isOnboardingComplete &&
-				// if the current route is allowed to be overriden by org onboarding then only do the same
-				!ROUTES_NOT_TO_BE_OVERRIDEN.includes(pathname)
-			) {
-				history.push(ROUTES.ONBOARDING);
-			}
-		}
-	}, [
-		checkFirstTimeUser,
-		isCloudUserVal,
-		isFetchingOrgPreferences,
-		isFetchingUsers,
-		orgPreferences,
-		usersData,
-		pathname,
-		trialInfo?.workSpaceBlock,
-		activeLicense?.state,
-	]);
-
-	const navigateToWorkSpaceBlocked = useCallback((): void => {
-		const isRouteEnabledForWorkspaceBlockedState =
-			isAdmin &&
-			(pathname === ROUTES.SETTINGS ||
-				pathname === ROUTES.ORG_SETTINGS ||
-				pathname === ROUTES.MEMBERS_SETTINGS ||
-				pathname === ROUTES.BILLING ||
-				pathname === ROUTES.MY_SETTINGS);
-
-		if (
-			pathname &&
-			pathname !== ROUTES.WORKSPACE_LOCKED &&
-			!isRouteEnabledForWorkspaceBlockedState
-		) {
-			history.push(ROUTES.WORKSPACE_LOCKED);
-		}
-	}, [isAdmin, pathname]);
-
-	const navigateToWorkSpaceAccessRestricted = useCallback((): void => {
-		if (pathname && pathname !== ROUTES.WORKSPACE_ACCESS_RESTRICTED) {
-			history.push(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
-		}
-	}, [pathname]);
-
-	useEffect(() => {
-		if (!isFetchingActiveLicense && activeLicense) {
-			const isTerminated = activeLicense.state === LicenseState.TERMINATED;
-			const isExpired = activeLicense.state === LicenseState.EXPIRED;
-			const isCancelled = activeLicense.state === LicenseState.CANCELLED;
-
-			const isWorkspaceAccessRestricted = isTerminated || isExpired || isCancelled;
-
-			const { platform } = activeLicense;
-
-			if (isWorkspaceAccessRestricted && platform === LicensePlatform.CLOUD) {
-				navigateToWorkSpaceAccessRestricted();
-			}
-		}
-	}, [
-		isFetchingActiveLicense,
-		activeLicense,
-		navigateToWorkSpaceAccessRestricted,
-	]);
-
-	useEffect(() => {
-		if (!isFetchingActiveLicense) {
-			const shouldBlockWorkspace = trialInfo?.workSpaceBlock;
-
-			if (
-				shouldBlockWorkspace &&
-				activeLicense?.platform === LicensePlatform.CLOUD
-			) {
-				navigateToWorkSpaceBlocked();
-			}
-		}
-	}, [
-		isFetchingActiveLicense,
-		trialInfo?.workSpaceBlock,
-		activeLicense?.platform,
-		navigateToWorkSpaceBlocked,
-	]);
-
-	const navigateToWorkSpaceSuspended = useCallback((): void => {
-		if (pathname && pathname !== ROUTES.WORKSPACE_SUSPENDED) {
-			history.push(ROUTES.WORKSPACE_SUSPENDED);
-		}
-	}, [pathname]);
-
-	useEffect(() => {
-		if (!isFetchingActiveLicense && activeLicense) {
-			const shouldSuspendWorkspace =
-				activeLicense.state === LicenseState.DEFAULTED;
-
-			if (
-				shouldSuspendWorkspace &&
-				activeLicense.platform === LicensePlatform.CLOUD
-			) {
-				navigateToWorkSpaceSuspended();
-			}
-		}
-	}, [isFetchingActiveLicense, activeLicense, navigateToWorkSpaceSuspended]);
-
-	useEffect(() => {
-		if (org && org.length > 0 && org[0].id !== undefined) {
-			setOrgData(org[0]);
-		}
-	}, [org]);
-
-	// if the feature flag is enabled and the current route is /get-started then redirect to /get-started-with-signoz-cloud
-	useEffect(() => {
-		if (
-			currentRoute?.path === ROUTES.GET_STARTED &&
-			featureFlags?.find((e) => e.name === FeatureKeys.ONBOARDING_V3)?.active
-		) {
-			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
-		}
-	}, [currentRoute, featureFlags]);
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	useEffect(() => {
-		// if it is an old route navigate to the new route
-		if (isOldRoute) {
-			// this will be handled by the redirect component below
-			return;
-		}
-
-		// if the current route is public dashboard then don't redirect to login
-		const isPublicDashboard = currentRoute?.path === ROUTES.PUBLIC_DASHBOARD;
-
-		if (isPublicDashboard) {
-			return;
-		}
-
-		// if the current route
-		if (currentRoute) {
-			const { isPrivate, key } = currentRoute;
-			if (isPrivate) {
-				if (isLoggedInState) {
-					const route = routePermission[key];
-					if (route && route.find((e) => e === user.role) === undefined) {
-						history.push(ROUTES.UN_AUTHORIZED);
-					}
-				} else {
-					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-					history.push(ROUTES.LOGIN);
-				}
-			} else if (isLoggedInState) {
-				const fromPathname = getLocalStorageApi(
-					LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
-				);
-				if (fromPathname) {
-					history.push(fromPathname);
-					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-				} else if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
-					history.push(ROUTES.HOME);
-				}
-			} else {
-				// do nothing as the unauthenticated routes are LOGIN and SIGNUP and the LOGIN container takes care of routing to signup if
-				// setup is not completed
-			}
-		} else if (isLoggedInState) {
-			const fromPathname = getLocalStorageApi(
-				LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
-			);
-			if (fromPathname) {
-				history.push(fromPathname);
-				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-			} else {
-				history.push(ROUTES.HOME);
-			}
-		} else {
-			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-			history.push(ROUTES.LOGIN);
-		}
-	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
-
+	// Handle old routes - redirect to new routes
 	if (isOldRoute) {
 		const redirectUrl = oldNewRoutesMapping[pathname];
 		return (
@@ -308,7 +93,143 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		);
 	}
 
-	// NOTE: disabling this rule as there is no need to have div
+	// Public dashboard - no redirect needed
+	const isPublicDashboard = currentRoute?.path === ROUTES.PUBLIC_DASHBOARD;
+	if (isPublicDashboard) {
+		return <>{children}</>;
+	}
+
+	// Check for workspace access restriction (cloud only)
+	const isCloudPlatform = activeLicense?.platform === LicensePlatform.CLOUD;
+
+	if (!isFetchingActiveLicense && activeLicense && isCloudPlatform) {
+		const isTerminated = activeLicense.state === LicenseState.TERMINATED;
+		const isExpired = activeLicense.state === LicenseState.EXPIRED;
+		const isCancelled = activeLicense.state === LicenseState.CANCELLED;
+		const isWorkspaceAccessRestricted = isTerminated || isExpired || isCancelled;
+
+		if (
+			isWorkspaceAccessRestricted &&
+			pathname !== ROUTES.WORKSPACE_ACCESS_RESTRICTED
+		) {
+			return <Redirect to={ROUTES.WORKSPACE_ACCESS_RESTRICTED} />;
+		}
+
+		// Check for workspace suspended (DEFAULTED)
+		const shouldSuspendWorkspace = activeLicense.state === LicenseState.DEFAULTED;
+		if (shouldSuspendWorkspace && pathname !== ROUTES.WORKSPACE_SUSPENDED) {
+			return <Redirect to={ROUTES.WORKSPACE_SUSPENDED} />;
+		}
+	}
+
+	// Check for workspace blocked (trial expired)
+	if (!isFetchingActiveLicense && isCloudPlatform && trialInfo?.workSpaceBlock) {
+		const isRouteEnabledForWorkspaceBlockedState =
+			isAdmin &&
+			(pathname === ROUTES.SETTINGS ||
+				pathname === ROUTES.ORG_SETTINGS ||
+				pathname === ROUTES.MEMBERS_SETTINGS ||
+				pathname === ROUTES.BILLING ||
+				pathname === ROUTES.MY_SETTINGS);
+
+		if (
+			pathname !== ROUTES.WORKSPACE_LOCKED &&
+			!isRouteEnabledForWorkspaceBlockedState
+		) {
+			return <Redirect to={ROUTES.WORKSPACE_LOCKED} />;
+		}
+	}
+
+	// Check for onboarding redirect (cloud users, first user, onboarding not complete)
+	if (
+		isCloudUserVal &&
+		!isFetchingOrgPreferences &&
+		orgPreferences &&
+		!isFetchingUsers &&
+		usersData &&
+		usersData.data
+	) {
+		const isOnboardingComplete = orgPreferences?.find(
+			(preference: OrgPreference) =>
+				preference.name === ORG_PREFERENCES.ORG_ONBOARDING,
+		)?.value;
+
+		// Don't redirect to onboarding if workspace has issues
+		const isWorkspaceBlocked = trialInfo?.workSpaceBlock;
+		const isWorkspaceSuspended = activeLicense?.state === LicenseState.DEFAULTED;
+		const isWorkspaceAccessRestricted =
+			activeLicense?.state === LicenseState.TERMINATED ||
+			activeLicense?.state === LicenseState.EXPIRED ||
+			activeLicense?.state === LicenseState.CANCELLED;
+
+		const hasWorkspaceIssue =
+			isWorkspaceBlocked || isWorkspaceSuspended || isWorkspaceAccessRestricted;
+
+		if (!hasWorkspaceIssue) {
+			const isFirstUser = checkFirstTimeUser();
+			if (
+				isFirstUser &&
+				!isOnboardingComplete &&
+				!ROUTES_NOT_TO_BE_OVERRIDEN.includes(pathname) &&
+				pathname !== ROUTES.ONBOARDING
+			) {
+				return <Redirect to={ROUTES.ONBOARDING} />;
+			}
+		}
+	}
+
+	// Check for GET_STARTED → GET_STARTED_WITH_CLOUD redirect (feature flag)
+	if (
+		currentRoute?.path === ROUTES.GET_STARTED &&
+		featureFlags?.find((e) => e.name === FeatureKeys.ONBOARDING_V3)?.active
+	) {
+		return <Redirect to={ROUTES.GET_STARTED_WITH_CLOUD} />;
+	}
+
+	// Main routing logic
+	if (currentRoute) {
+		const { isPrivate, key } = currentRoute;
+		if (isPrivate) {
+			if (isLoggedInState) {
+				const route = routePermission[key];
+				if (route && route.find((e) => e === user.role) === undefined) {
+					return <Redirect to={ROUTES.UN_AUTHORIZED} />;
+				}
+			} else {
+				// Save current path and redirect to login
+				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
+				return <Redirect to={ROUTES.LOGIN} />;
+			}
+		} else if (isLoggedInState) {
+			// Non-private route, but user is logged in
+			const fromPathname = getLocalStorageApi(
+				LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
+			);
+			if (fromPathname) {
+				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
+				return <Redirect to={fromPathname} />;
+			}
+			if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
+				return <Redirect to={ROUTES.HOME} />;
+			}
+		}
+		// Non-private route, user not logged in - let login/signup pages handle it
+	} else if (isLoggedInState) {
+		// Unknown route, logged in
+		const fromPathname = getLocalStorageApi(
+			LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
+		);
+		if (fromPathname) {
+			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
+			return <Redirect to={fromPathname} />;
+		}
+		return <Redirect to={ROUTES.HOME} />;
+	} else {
+		// Unknown route, not logged in
+		setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
+		return <Redirect to={ROUTES.LOGIN} />;
+	}
+
 	return <>{children}</>;
 }
 

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -6,7 +6,6 @@ import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
 import { AppContext } from 'providers/App/App';
 import { IAppContext, IUser } from 'providers/App/types';
 import {
@@ -22,19 +21,6 @@ import { ROLES, USER_ROLES } from 'types/roles';
 
 import PrivateRoute from '../Private';
 
-// Mock history module
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: { pathname: '/', search: '', hash: '' },
-		listen: jest.fn(),
-		createHref: jest.fn(),
-	},
-}));
-
-const mockHistoryPush = history.push as jest.Mock;
-
 // Mock localStorage APIs
 const mockLocalStorage: Record<string, string> = {};
 jest.mock('api/browser/localstorage/get', () => ({
@@ -67,9 +53,12 @@ jest.mock('hooks/useGetTenantLicense', () => ({
 
 // Mock react-query for users fetch
 let mockUsersData: { email: string }[] = [];
-jest.mock('api/v1/user/get', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve({ data: mockUsersData })),
+jest.mock('api/generated/services/users', () => ({
+	...jest.requireActual('api/generated/services/users'),
+	useListUsers: jest.fn(() => ({
+		data: { data: mockUsersData },
+		isFetching: false,
+	})),
 }));
 
 const queryClient = new QueryClient({
@@ -236,20 +225,18 @@ function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
 }
 
 // Generic assertion helpers for navigation behavior
-// Using these allows easier refactoring when switching from history.push to Redirect component
+// Using location-based assertions since Private.tsx now uses Redirect component
 
 async function assertRedirectsTo(targetRoute: string): Promise<void> {
 	await waitFor(() => {
-		expect(mockHistoryPush).toHaveBeenCalledWith(targetRoute);
+		expect(screen.getByTestId('location-display')).toHaveTextContent(targetRoute);
 	});
 }
 
-function assertNoRedirect(): void {
-	expect(mockHistoryPush).not.toHaveBeenCalled();
-}
-
-function assertDoesNotRedirectTo(targetRoute: string): void {
-	expect(mockHistoryPush).not.toHaveBeenCalledWith(targetRoute);
+function assertStaysOnRoute(expectedRoute: string): void {
+	expect(screen.getByTestId('location-display')).toHaveTextContent(
+		expectedRoute,
+	);
 }
 
 function assertRendersChildren(): void {
@@ -347,7 +334,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertNoRedirect();
+			assertStaysOnRoute('/public/dashboard/abc123');
 		});
 
 		it('should render children for public dashboard route when logged in without redirecting', () => {
@@ -359,7 +346,7 @@ describe('PrivateRoute', () => {
 			assertRendersChildren();
 			// Critical: without the isPublicDashboard early return, logged-in users
 			// would be redirected to HOME due to the non-private route handling
-			assertNoRedirect();
+			assertStaysOnRoute('/public/dashboard/abc123');
 		});
 	});
 
@@ -417,7 +404,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should redirect to unauthorized when VIEWER tries to access admin-only route /alerts/new', async () => {
@@ -526,7 +513,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: true },
 			});
 
-			assertDoesNotRedirectTo(ROUTES.HOME);
+			assertStaysOnRoute(ROUTES.SOMETHING_WENT_WRONG);
 		});
 	});
 
@@ -538,7 +525,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should not redirect - login page handles its own routing
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.LOGIN);
 		});
 
 		it('should not redirect when not logged in user visits signup page', () => {
@@ -547,7 +534,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.SIGN_UP);
 		});
 
 		it('should not redirect when not logged in user visits password reset page', () => {
@@ -556,7 +543,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.PASSWORD_RESET);
 		});
 
 		it('should not redirect when not logged in user visits forgot password page', () => {
@@ -565,7 +552,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.FORGOT_PASSWORD);
 		});
 	});
 
@@ -654,7 +641,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Admin should be able to access settings even when workspace is blocked
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.SETTINGS);
 		});
 
 		it('should allow ADMIN to access /settings/billing when workspace is blocked', () => {
@@ -670,7 +657,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.BILLING);
 		});
 
 		it('should allow ADMIN to access /settings/org-settings when workspace is blocked', () => {
@@ -686,7 +673,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.ORG_SETTINGS);
 		});
 
 		it('should allow ADMIN to access /settings/members when workspace is blocked', () => {
@@ -702,7 +689,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.MEMBERS_SETTINGS);
 		});
 
 		it('should allow ADMIN to access /settings/my-settings when workspace is blocked', () => {
@@ -718,7 +705,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.MY_SETTINGS);
 		});
 
 		it('should redirect VIEWER to workspace locked even when trying to access settings', async () => {
@@ -829,7 +816,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should not redirect self-hosted users to workspace locked even when workSpaceBlock is true', () => {
@@ -846,7 +833,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});
 
@@ -916,7 +903,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 
 		it('should not redirect self-hosted users to workspace access restricted when license is terminated', () => {
@@ -933,7 +920,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not redirect when license is ACTIVE', () => {
@@ -950,7 +937,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not redirect when license is EVALUATING', () => {
@@ -967,7 +954,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});
 
@@ -1003,7 +990,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
+			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
 		});
 
 		it('should not redirect self-hosted users to workspace suspended when license is defaulted', () => {
@@ -1020,7 +1007,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});
 
@@ -1040,6 +1027,11 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
+			// Wait for the users query to complete and trigger re-render
+			await act(async () => {
+				await Promise.resolve();
+			});
+
 			await assertRedirectsTo(ROUTES.ONBOARDING);
 		});
 
@@ -1055,7 +1047,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not redirect to onboarding when onboarding is already complete', async () => {
@@ -1081,7 +1073,7 @@ describe('PrivateRoute', () => {
 
 			// Critical: if isOnboardingComplete check is broken (always false),
 			// this test would fail because all other conditions for redirect ARE met
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not redirect to onboarding for non-cloud users', () => {
@@ -1096,7 +1088,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not redirect to onboarding when on /workspace-locked route', () => {
@@ -1111,7 +1103,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should not redirect to onboarding when on /workspace-suspended route', () => {
@@ -1126,7 +1118,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
 		});
 
 		it('should not redirect to onboarding when workspace is blocked and accessing billing', async () => {
@@ -1153,7 +1145,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should NOT redirect to onboarding - user needs to access billing to fix payment
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.BILLING);
 		});
 
 		it('should not redirect to onboarding when workspace is blocked and accessing settings', async () => {
@@ -1177,7 +1169,7 @@ describe('PrivateRoute', () => {
 				await Promise.resolve();
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.SETTINGS);
 		});
 
 		it('should not redirect to onboarding when workspace is suspended (DEFAULTED)', async () => {
@@ -1204,7 +1196,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should redirect to WORKSPACE_SUSPENDED, not ONBOARDING
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_SUSPENDED);
 		});
 
 		it('should not redirect to onboarding when workspace is access restricted (TERMINATED)', async () => {
@@ -1231,7 +1223,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should redirect to WORKSPACE_ACCESS_RESTRICTED, not ONBOARDING
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 
 		it('should not redirect to onboarding when workspace is access restricted (EXPIRED)', async () => {
@@ -1257,7 +1249,7 @@ describe('PrivateRoute', () => {
 				await Promise.resolve();
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 	});
 
@@ -1299,7 +1291,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
+			assertStaysOnRoute(ROUTES.GET_STARTED);
 		});
 
 		it('should not redirect when on GET_STARTED and ONBOARDING_V3 feature flag is not present', () => {
@@ -1311,7 +1303,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
+			assertStaysOnRoute(ROUTES.GET_STARTED);
 		});
 
 		it('should not redirect when on different route even if ONBOARDING_V3 is active', () => {
@@ -1331,7 +1323,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});
 
@@ -1347,7 +1339,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not fetch users when org data is not available', () => {
@@ -1390,9 +1382,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});
 
@@ -1433,22 +1423,40 @@ describe('PrivateRoute', () => {
 			await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
 		});
 
-		it('should allow all roles to access /services route', () => {
-			const roles = [USER_ROLES.ADMIN, USER_ROLES.EDITOR, USER_ROLES.VIEWER];
-
-			roles.forEach((role) => {
-				jest.clearAllMocks();
-
-				renderPrivateRoute({
-					initialRoute: ROUTES.APPLICATION,
-					appContext: {
-						isLoggedIn: true,
-						user: createMockUser({ role: role as ROLES }),
-					},
-				});
-
-				assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
+		it('should allow ADMIN to access /services route', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.APPLICATION,
+				appContext: {
+					isLoggedIn: true,
+					user: createMockUser({ role: USER_ROLES.ADMIN as ROLES }),
+				},
 			});
+
+			assertStaysOnRoute(ROUTES.APPLICATION);
+		});
+
+		it('should allow EDITOR to access /services route', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.APPLICATION,
+				appContext: {
+					isLoggedIn: true,
+					user: createMockUser({ role: USER_ROLES.EDITOR as ROLES }),
+				},
+			});
+
+			assertStaysOnRoute(ROUTES.APPLICATION);
+		});
+
+		it('should allow VIEWER to access /services route', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.APPLICATION,
+				appContext: {
+					isLoggedIn: true,
+					user: createMockUser({ role: USER_ROLES.VIEWER as ROLES }),
+				},
+			});
+
+			assertStaysOnRoute(ROUTES.APPLICATION);
 		});
 
 		it('should redirect VIEWER from /onboarding route (admin only)', async () => {
@@ -1478,7 +1486,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
+			assertStaysOnRoute(ROUTES.CHANNELS_NEW);
 		});
 
 		it('should allow EDITOR to access /get-started route', () => {
@@ -1490,7 +1498,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
+			assertStaysOnRoute(ROUTES.GET_STARTED);
 		});
 	});
 

frontend/src/AppRoutes/index.tsx

@@ -18,7 +18,7 @@ import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { KeyboardHotkeysProvider } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { useThemeConfig } from 'hooks/useDarkMode';
+import { useIsDarkMode, useThemeConfig } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { NotificationProvider } from 'hooks/useNotifications';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
@@ -212,6 +212,12 @@ function App(): JSX.Element {
 		activeLicenseFetchError,
 	]);
 
+	const isDarkMode = useIsDarkMode();
+
+	useEffect(() => {
+		window.Pylon?.('setTheme', isDarkMode ? 'dark' : 'light');
+	}, [isDarkMode]);
+
 	useEffect(() => {
 		if (
 			pathname === ROUTES.ONBOARDING ||

frontend/src/AppRoutes/pageComponents.ts

@@ -244,18 +244,12 @@ export const ShortcutsPage = Loadable(
 	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Settings'),
 );
 
-export const Integrations = Loadable(
+export const InstalledIntegrations = Loadable(
 	() =>
 		import(
 			/* webpackChunkName: "InstalledIntegrations" */ 'pages/IntegrationsModulePage'
 		),
 );
-export const IntegrationsDetailsPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "IntegrationsDetailsPage" */ 'pages/IntegrationsDetailsPage'
-		),
-);
 
 export const MessagingQueuesMainPage = Loadable(
 	() =>

frontend/src/AppRoutes/routes.ts

@@ -18,8 +18,7 @@ import {
 	ForgotPassword,
 	Home,
 	InfrastructureMonitoring,
-	Integrations,
-	IntegrationsDetailsPage,
+	InstalledIntegrations,
 	LicensePage,
 	ListAllALertsPage,
 	LiveLogs,
@@ -390,17 +389,10 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
-	{
-		path: ROUTES.INTEGRATIONS_DETAIL,
-		exact: true,
-		component: IntegrationsDetailsPage,
-		isPrivate: true,
-		key: 'INTEGRATIONS_DETAIL',
-	},
 	{
 		path: ROUTES.INTEGRATIONS,
 		exact: true,
-		component: Integrations,
+		component: InstalledIntegrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},

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

@@ -24,8 +24,8 @@ import type {
 	AgentCheckInDeprecated200,
 	AgentCheckInDeprecatedPathParameters,
 	AgentCheckInPathParameters,
-	CloudintegrationtypesConnectionArtifactRequestDTO,
-	CloudintegrationtypesPostableAgentCheckInRequestDTO,
+	CloudintegrationtypesPostableAccountDTO,
+	CloudintegrationtypesPostableAgentCheckInDTO,
 	CloudintegrationtypesUpdatableAccountDTO,
 	CloudintegrationtypesUpdatableServiceDTO,
 	CreateAccount200,
@@ -33,6 +33,8 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
+	GetConnectionCredentials200,
+	GetConnectionCredentialsPathParameters,
 	GetService200,
 	GetServicePathParameters,
 	ListAccounts200,
@@ -51,14 +53,14 @@ import type {
  */
 export const agentCheckInDeprecated = (
 	{ cloudProvider }: AgentCheckInDeprecatedPathParameters,
-	cloudintegrationtypesPostableAgentCheckInRequestDTO: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>,
+	cloudintegrationtypesPostableAgentCheckInDTO: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<AgentCheckInDeprecated200>({
 		url: `/api/v1/cloud-integrations/${cloudProvider}/agent-check-in`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesPostableAgentCheckInRequestDTO,
+		data: cloudintegrationtypesPostableAgentCheckInDTO,
 		signal,
 	});
 };
@@ -72,7 +74,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 		TError,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		},
 		TContext
 	>;
@@ -81,7 +83,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 	TError,
 	{
 		pathParams: AgentCheckInDeprecatedPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 	},
 	TContext
 > => {
@@ -98,7 +100,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 		Awaited<ReturnType<typeof agentCheckInDeprecated>>,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -112,7 +114,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 export type AgentCheckInDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof agentCheckInDeprecated>>
 >;
-export type AgentCheckInDeprecatedMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+export type AgentCheckInDeprecatedMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 export type AgentCheckInDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -128,7 +130,7 @@ export const useAgentCheckInDeprecated = <
 		TError,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		},
 		TContext
 	>;
@@ -137,7 +139,7 @@ export const useAgentCheckInDeprecated = <
 	TError,
 	{
 		pathParams: AgentCheckInDeprecatedPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 	},
 	TContext
 > => {
@@ -255,14 +257,14 @@ export const invalidateListAccounts = async (
  */
 export const createAccount = (
 	{ cloudProvider }: CreateAccountPathParameters,
-	cloudintegrationtypesConnectionArtifactRequestDTO: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>,
+	cloudintegrationtypesPostableAccountDTO: BodyType<CloudintegrationtypesPostableAccountDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateAccount200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesConnectionArtifactRequestDTO,
+		data: cloudintegrationtypesPostableAccountDTO,
 		signal,
 	});
 };
@@ -276,7 +278,7 @@ export const getCreateAccountMutationOptions = <
 		TError,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
 		},
 		TContext
 	>;
@@ -285,7 +287,7 @@ export const getCreateAccountMutationOptions = <
 	TError,
 	{
 		pathParams: CreateAccountPathParameters;
-		data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAccountDTO>;
 	},
 	TContext
 > => {
@@ -302,7 +304,7 @@ export const getCreateAccountMutationOptions = <
 		Awaited<ReturnType<typeof createAccount>>,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -316,7 +318,7 @@ export const getCreateAccountMutationOptions = <
 export type CreateAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createAccount>>
 >;
-export type CreateAccountMutationBody = BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+export type CreateAccountMutationBody = BodyType<CloudintegrationtypesPostableAccountDTO>;
 export type CreateAccountMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -331,7 +333,7 @@ export const useCreateAccount = <
 		TError,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
 		},
 		TContext
 	>;
@@ -340,7 +342,7 @@ export const useCreateAccount = <
 	TError,
 	{
 		pathParams: CreateAccountPathParameters;
-		data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAccountDTO>;
 	},
 	TContext
 > => {
@@ -628,20 +630,117 @@ export const useUpdateAccount = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint updates a service for the specified cloud provider
+ * @summary Update service
+ */
+export const updateService = (
+	{ cloudProvider, id, serviceId }: UpdateServicePathParameters,
+	cloudintegrationtypesUpdatableServiceDTO: BodyType<CloudintegrationtypesUpdatableServiceDTO>,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: cloudintegrationtypesUpdatableServiceDTO,
+	});
+};
+
+export const getUpdateServiceMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateService>>,
+		TError,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateService>>,
+	TError,
+	{
+		pathParams: UpdateServicePathParameters;
+		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateService'];
+	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 updateService>>,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateService(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateServiceMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateService>>
+>;
+export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update service
+ */
+export const useUpdateService = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateService>>,
+		TError,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateService>>,
+	TError,
+	{
+		pathParams: UpdateServicePathParameters;
+		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getUpdateServiceMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
 /**
  * This endpoint is called by the deployed agent to check in
  * @summary Agent check-in
  */
 export const agentCheckIn = (
 	{ cloudProvider }: AgentCheckInPathParameters,
-	cloudintegrationtypesPostableAgentCheckInRequestDTO: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>,
+	cloudintegrationtypesPostableAgentCheckInDTO: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<AgentCheckIn200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/check_in`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesPostableAgentCheckInRequestDTO,
+		data: cloudintegrationtypesPostableAgentCheckInDTO,
 		signal,
 	});
 };
@@ -655,7 +754,7 @@ export const getAgentCheckInMutationOptions = <
 		TError,
 		{
 			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		},
 		TContext
 	>;
@@ -664,7 +763,7 @@ export const getAgentCheckInMutationOptions = <
 	TError,
 	{
 		pathParams: AgentCheckInPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 	},
 	TContext
 > => {
@@ -681,7 +780,7 @@ export const getAgentCheckInMutationOptions = <
 		Awaited<ReturnType<typeof agentCheckIn>>,
 		{
 			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -695,7 +794,7 @@ export const getAgentCheckInMutationOptions = <
 export type AgentCheckInMutationResult = NonNullable<
 	Awaited<ReturnType<typeof agentCheckIn>>
 >;
-export type AgentCheckInMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+export type AgentCheckInMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 export type AgentCheckInMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -710,7 +809,7 @@ export const useAgentCheckIn = <
 		TError,
 		{
 			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		},
 		TContext
 	>;
@@ -719,7 +818,7 @@ export const useAgentCheckIn = <
 	TError,
 	{
 		pathParams: AgentCheckInPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 	},
 	TContext
 > => {
@@ -727,6 +826,114 @@ export const useAgentCheckIn = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint retrieves the connection credentials required for integration
+ * @summary Get connection credentials
+ */
+export const getConnectionCredentials = (
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetConnectionCredentials200>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/credentials`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetConnectionCredentialsQueryKey = ({
+	cloudProvider,
+}: GetConnectionCredentialsPathParameters) => {
+	return [`/api/v1/cloud_integrations/${cloudProvider}/credentials`] as const;
+};
+
+export const getGetConnectionCredentialsQueryOptions = <
+	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getConnectionCredentials>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ??
+		getGetConnectionCredentialsQueryKey({ cloudProvider });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getConnectionCredentials>>
+	> = ({ signal }) => getConnectionCredentials({ cloudProvider }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!cloudProvider,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getConnectionCredentials>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetConnectionCredentialsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getConnectionCredentials>>
+>;
+export type GetConnectionCredentialsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get connection credentials
+ */
+
+export function useGetConnectionCredentials<
+	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getConnectionCredentials>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetConnectionCredentialsQueryOptions(
+		{ cloudProvider },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get connection credentials
+ */
+export const invalidateGetConnectionCredentials = async (
+	queryClient: QueryClient,
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetConnectionCredentialsQueryKey({ cloudProvider }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint lists the services metadata for the specified cloud provider
  * @summary List services metadata
@@ -941,101 +1148,3 @@ export const invalidateGetService = async (
 
 	return queryClient;
 };
-
-/**
- * This endpoint updates a service for the specified cloud provider
- * @summary Update service
- */
-export const updateService = (
-	{ cloudProvider, serviceId }: UpdateServicePathParameters,
-	cloudintegrationtypesUpdatableServiceDTO: BodyType<CloudintegrationtypesUpdatableServiceDTO>,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesUpdatableServiceDTO,
-	});
-};
-
-export const getUpdateServiceMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateService>>,
-		TError,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateService>>,
-	TError,
-	{
-		pathParams: UpdateServicePathParameters;
-		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateService'];
-	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 updateService>>,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateService(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateServiceMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateService>>
->;
-export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update service
- */
-export const useUpdateService = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateService>>,
-		TError,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateService>>,
-	TError,
-	{
-		pathParams: UpdateServicePathParameters;
-		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateServiceMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

@@ -425,39 +425,6 @@ export interface AuthtypesSessionContextDTO {
 	orgs?: AuthtypesOrgSessionContextDTO[] | null;
 }
 
-export interface AuthtypesStorableRoleDTO {
-	/**
-	 * @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 AuthtypesTransactionDTO {
 	object: AuthtypesObjectDTO;
 	/**
@@ -475,25 +442,25 @@ export interface AuthtypesUserRoleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: Date;
+	createdAt: Date;
 	/**
 	 * @type string
 	 */
 	id: string;
-	role?: AuthtypesStorableRoleDTO;
+	role: AuthtypesRoleDTO;
 	/**
 	 * @type string
 	 */
-	roleId?: string;
+	roleId: string;
 	/**
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: Date;
+	updatedAt: Date;
 	/**
 	 * @type string
 	 */
-	userId?: string;
+	userId: string;
 }
 
 export interface AuthtypesUserWithRolesDTO {
@@ -545,27 +512,58 @@ export interface CloudintegrationtypesAWSAccountConfigDTO {
 	regions: string[];
 }
 
-export type CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets = {
-	[key: string]: string[];
-};
-
-export interface CloudintegrationtypesAWSCollectionStrategyDTO {
-	aws_logs?: CloudintegrationtypesAWSLogsStrategyDTO;
-	aws_metrics?: CloudintegrationtypesAWSMetricsStrategyDTO;
+export interface CloudintegrationtypesAWSCloudWatchLogsSubscriptionDTO {
 	/**
-	 * @type object
+	 * @type string
 	 */
-	s3_buckets?: CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets;
+	filterPattern: string;
+	/**
+	 * @type string
+	 */
+	logGroupNamePrefix: string;
+}
+
+export interface CloudintegrationtypesAWSCloudWatchMetricStreamFilterDTO {
+	/**
+	 * @type array
+	 */
+	metricNames?: string[];
+	/**
+	 * @type string
+	 */
+	namespace: string;
 }
 
 export interface CloudintegrationtypesAWSConnectionArtifactDTO {
 	/**
 	 * @type string
 	 */
-	connectionURL: string;
+	connectionUrl: string;
 }
 
-export interface CloudintegrationtypesAWSConnectionArtifactRequestDTO {
+export interface CloudintegrationtypesAWSIntegrationConfigDTO {
+	/**
+	 * @type array
+	 */
+	enabledRegions: string[];
+	telemetryCollectionStrategy: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
+}
+
+export interface CloudintegrationtypesAWSLogsCollectionStrategyDTO {
+	/**
+	 * @type array
+	 */
+	subscriptions: CloudintegrationtypesAWSCloudWatchLogsSubscriptionDTO[];
+}
+
+export interface CloudintegrationtypesAWSMetricsCollectionStrategyDTO {
+	/**
+	 * @type array
+	 */
+	streamFilters: CloudintegrationtypesAWSCloudWatchMetricStreamFilterDTO[];
+}
+
+export interface CloudintegrationtypesAWSPostableAccountConfigDTO {
 	/**
 	 * @type string
 	 */
@@ -576,56 +574,6 @@ export interface CloudintegrationtypesAWSConnectionArtifactRequestDTO {
 	regions: string[];
 }
 
-export interface CloudintegrationtypesAWSIntegrationConfigDTO {
-	/**
-	 * @type array
-	 */
-	enabledRegions: string[];
-	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
-}
-
-export type CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
-	/**
-	 * @type string
-	 */
-	filter_pattern?: string;
-	/**
-	 * @type string
-	 */
-	log_group_name_prefix?: string;
-};
-
-export interface CloudintegrationtypesAWSLogsStrategyDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	cloudwatch_logs_subscriptions?:
-		| CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
-		| null;
-}
-
-export type CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
-	/**
-	 * @type array
-	 */
-	MetricNames?: string[];
-	/**
-	 * @type string
-	 */
-	Namespace?: string;
-};
-
-export interface CloudintegrationtypesAWSMetricsStrategyDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	cloudwatch_metric_stream_filters?:
-		| CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
-		| null;
-}
-
 export interface CloudintegrationtypesAWSServiceConfigDTO {
 	logs?: CloudintegrationtypesAWSServiceLogsConfigDTO;
 	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
@@ -643,7 +591,7 @@ export interface CloudintegrationtypesAWSServiceLogsConfigDTO {
 	/**
 	 * @type object
 	 */
-	s3_buckets?: CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets;
+	s3Buckets?: CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets;
 }
 
 export interface CloudintegrationtypesAWSServiceMetricsConfigDTO {
@@ -653,6 +601,19 @@ export interface CloudintegrationtypesAWSServiceMetricsConfigDTO {
 	enabled?: boolean;
 }
 
+export type CloudintegrationtypesAWSTelemetryCollectionStrategyDTOS3Buckets = {
+	[key: string]: string[];
+};
+
+export interface CloudintegrationtypesAWSTelemetryCollectionStrategyDTO {
+	logs?: CloudintegrationtypesAWSLogsCollectionStrategyDTO;
+	metrics?: CloudintegrationtypesAWSMetricsCollectionStrategyDTO;
+	/**
+	 * @type object
+	 */
+	s3Buckets?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTOS3Buckets;
+}
+
 export interface CloudintegrationtypesAccountDTO {
 	agentReport: CloudintegrationtypesAgentReportDTO;
 	config: CloudintegrationtypesAccountConfigDTO;
@@ -726,6 +687,32 @@ export interface CloudintegrationtypesAssetsDTO {
 	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
 }
 
+/**
+ * @nullable
+ */
+export type CloudintegrationtypesCloudIntegrationServiceDTO = {
+	/**
+	 * @type string
+	 */
+	cloudIntegrationId?: string;
+	config?: CloudintegrationtypesServiceConfigDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	id: string;
+	type?: CloudintegrationtypesServiceIDDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+} | null;
+
 export interface CloudintegrationtypesCollectedLogAttributeDTO {
 	/**
 	 * @type string
@@ -760,16 +747,27 @@ export interface CloudintegrationtypesCollectedMetricDTO {
 	unit?: string;
 }
 
-export interface CloudintegrationtypesCollectionStrategyDTO {
-	aws: CloudintegrationtypesAWSCollectionStrategyDTO;
-}
-
 export interface CloudintegrationtypesConnectionArtifactDTO {
 	aws: CloudintegrationtypesAWSConnectionArtifactDTO;
 }
 
-export interface CloudintegrationtypesConnectionArtifactRequestDTO {
-	aws: CloudintegrationtypesAWSConnectionArtifactRequestDTO;
+export interface CloudintegrationtypesCredentialsDTO {
+	/**
+	 * @type string
+	 */
+	ingestionKey: string;
+	/**
+	 * @type string
+	 */
+	ingestionUrl: string;
+	/**
+	 * @type string
+	 */
+	sigNozApiKey: string;
+	/**
+	 * @type string
+	 */
+	sigNozApiUrl: string;
 }
 
 export interface CloudintegrationtypesDashboardDTO {
@@ -801,7 +799,7 @@ export interface CloudintegrationtypesDataCollectedDTO {
 	metrics?: CloudintegrationtypesCollectedMetricDTO[] | null;
 }
 
-export interface CloudintegrationtypesGettableAccountWithArtifactDTO {
+export interface CloudintegrationtypesGettableAccountWithConnectionArtifactDTO {
 	connectionArtifact: CloudintegrationtypesConnectionArtifactDTO;
 	/**
 	 * @type string
@@ -816,7 +814,7 @@ export interface CloudintegrationtypesGettableAccountsDTO {
 	accounts: CloudintegrationtypesAccountDTO[];
 }
 
-export interface CloudintegrationtypesGettableAgentCheckInResponseDTO {
+export interface CloudintegrationtypesGettableAgentCheckInDTO {
 	/**
 	 * @type string
 	 */
@@ -864,17 +862,85 @@ export type CloudintegrationtypesIntegrationConfigDTO = {
 	 * @type array
 	 */
 	enabled_regions: string[];
-	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
+	telemetry: CloudintegrationtypesOldAWSCollectionStrategyDTO;
 } | null;
 
+export type CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets = {
+	[key: string]: string[];
+};
+
+export interface CloudintegrationtypesOldAWSCollectionStrategyDTO {
+	aws_logs?: CloudintegrationtypesOldAWSLogsStrategyDTO;
+	aws_metrics?: CloudintegrationtypesOldAWSMetricsStrategyDTO;
+	/**
+	 * @type string
+	 */
+	provider?: string;
+	/**
+	 * @type object
+	 */
+	s3_buckets?: CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets;
+}
+
+export type CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
+	/**
+	 * @type string
+	 */
+	filter_pattern?: string;
+	/**
+	 * @type string
+	 */
+	log_group_name_prefix?: string;
+};
+
+export interface CloudintegrationtypesOldAWSLogsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_logs_subscriptions?:
+		| CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
+		| null;
+}
+
+export type CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
+	/**
+	 * @type array
+	 */
+	MetricNames?: string[];
+	/**
+	 * @type string
+	 */
+	Namespace?: string;
+};
+
+export interface CloudintegrationtypesOldAWSMetricsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_metric_stream_filters?:
+		| CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
+		| null;
+}
+
+export interface CloudintegrationtypesPostableAccountDTO {
+	config: CloudintegrationtypesPostableAccountConfigDTO;
+	credentials: CloudintegrationtypesCredentialsDTO;
+}
+
+export interface CloudintegrationtypesPostableAccountConfigDTO {
+	aws: CloudintegrationtypesAWSPostableAccountConfigDTO;
+}
+
 /**
  * @nullable
  */
-export type CloudintegrationtypesPostableAgentCheckInRequestDTOData = {
+export type CloudintegrationtypesPostableAgentCheckInDTOData = {
 	[key: string]: unknown;
 } | null;
 
-export interface CloudintegrationtypesPostableAgentCheckInRequestDTO {
+export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	/**
 	 * @type string
 	 */
@@ -891,7 +957,7 @@ export interface CloudintegrationtypesPostableAgentCheckInRequestDTO {
 	 * @type object
 	 * @nullable true
 	 */
-	data: CloudintegrationtypesPostableAgentCheckInRequestDTOData;
+	data: CloudintegrationtypesPostableAgentCheckInDTOData;
 	/**
 	 * @type string
 	 */
@@ -904,6 +970,7 @@ export interface CloudintegrationtypesProviderIntegrationConfigDTO {
 
 export interface CloudintegrationtypesServiceDTO {
 	assets: CloudintegrationtypesAssetsDTO;
+	cloudIntegrationService: CloudintegrationtypesCloudIntegrationServiceDTO;
 	dataCollected: CloudintegrationtypesDataCollectedDTO;
 	/**
 	 * @type string
@@ -917,9 +984,8 @@ export interface CloudintegrationtypesServiceDTO {
 	 * @type string
 	 */
 	overview: string;
-	serviceConfig?: CloudintegrationtypesServiceConfigDTO;
-	supported_signals: CloudintegrationtypesSupportedSignalsDTO;
-	telemetryCollectionStrategy: CloudintegrationtypesCollectionStrategyDTO;
+	supportedSignals: CloudintegrationtypesSupportedSignalsDTO;
+	telemetryCollectionStrategy: CloudintegrationtypesTelemetryCollectionStrategyDTO;
 	/**
 	 * @type string
 	 */
@@ -930,6 +996,21 @@ export interface CloudintegrationtypesServiceConfigDTO {
 	aws: CloudintegrationtypesAWSServiceConfigDTO;
 }
 
+export enum CloudintegrationtypesServiceIDDTO {
+	alb = 'alb',
+	'api-gateway' = 'api-gateway',
+	dynamodb = 'dynamodb',
+	ec2 = 'ec2',
+	ecs = 'ecs',
+	eks = 'eks',
+	elasticache = 'elasticache',
+	lambda = 'lambda',
+	msk = 'msk',
+	rds = 'rds',
+	s3sync = 's3sync',
+	sns = 'sns',
+	sqs = 'sqs',
+}
 export interface CloudintegrationtypesServiceMetadataDTO {
 	/**
 	 * @type boolean
@@ -960,6 +1041,10 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 	metrics?: boolean;
 }
 
+export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
+	aws: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
+}
+
 export interface CloudintegrationtypesUpdatableAccountDTO {
 	config: CloudintegrationtypesAccountConfigDTO;
 }
@@ -3483,7 +3568,7 @@ export type AgentCheckInDeprecatedPathParameters = {
 	cloudProvider: string;
 };
 export type AgentCheckInDeprecated200 = {
-	data: CloudintegrationtypesGettableAgentCheckInResponseDTO;
+	data: CloudintegrationtypesGettableAgentCheckInDTO;
 	/**
 	 * @type string
 	 */
@@ -3505,7 +3590,7 @@ export type CreateAccountPathParameters = {
 	cloudProvider: string;
 };
 export type CreateAccount200 = {
-	data: CloudintegrationtypesGettableAccountWithArtifactDTO;
+	data: CloudintegrationtypesGettableAccountWithConnectionArtifactDTO;
 	/**
 	 * @type string
 	 */
@@ -3532,11 +3617,27 @@ export type UpdateAccountPathParameters = {
 	cloudProvider: string;
 	id: string;
 };
+export type UpdateServicePathParameters = {
+	cloudProvider: string;
+	id: string;
+	serviceId: string;
+};
 export type AgentCheckInPathParameters = {
 	cloudProvider: string;
 };
 export type AgentCheckIn200 = {
-	data: CloudintegrationtypesGettableAgentCheckInResponseDTO;
+	data: CloudintegrationtypesGettableAgentCheckInDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetConnectionCredentialsPathParameters = {
+	cloudProvider: string;
+};
+export type GetConnectionCredentials200 = {
+	data: CloudintegrationtypesCredentialsDTO;
 	/**
 	 * @type string
 	 */
@@ -3566,10 +3667,6 @@ export type GetService200 = {
 	status: string;
 };
 
-export type UpdateServicePathParameters = {
-	cloudProvider: string;
-	serviceId: string;
-};
 export type CreateSessionByGoogleCallback303 = {
 	data: AuthtypesGettableTokenDTO;
 	/**

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -13,7 +13,9 @@ export interface HostListPayload {
 	orderBy?: {
 		columnName: string;
 		order: 'asc' | 'desc';
-	};
+	} | null;
+	start?: number;
+	end?: number;
 }
 
 export interface TimeSeriesValue {

frontend/src/api/integration/aws/index.ts

@@ -5,13 +5,13 @@ import {
 	ServiceData,
 	UpdateServiceConfigPayload,
 	UpdateServiceConfigResponse,
-} from 'container/Integrations/CloudIntegration/AmazonWebServices/types';
+} from 'container/CloudIntegrationPage/ServicesSection/types';
 import {
+	AccountConfigPayload,
 	AccountConfigResponse,
-	AWSAccountConfigPayload,
+	ConnectionParams,
 	ConnectionUrlResponse,
 } from 'types/api/integrations/aws';
-import { ConnectionParams } from 'types/api/integrations/types';
 
 export const getAwsAccounts = async (): Promise<CloudAccount[]> => {
 	const response = await axios.get('/cloud-integrations/aws/accounts');
@@ -60,7 +60,7 @@ export const generateConnectionUrl = async (params: {
 
 export const updateAccountConfig = async (
 	accountId: string,
-	payload: AWSAccountConfigPayload,
+	payload: AccountConfigPayload,
 ): Promise<AccountConfigResponse> => {
 	const response = await axios.post<AccountConfigResponse>(
 		`/cloud-integrations/aws/accounts/${accountId}/config`,

frontend/src/api/integration/index.ts

@@ -1,122 +0,0 @@
-import axios from 'api';
-import {
-	CloudAccount,
-	ServiceData,
-} from 'container/Integrations/CloudIntegration/AmazonWebServices/types';
-import {
-	AzureCloudAccountConfig,
-	AzureService,
-	AzureServiceConfigPayload,
-} from 'container/Integrations/types';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	AccountConfigResponse,
-	AWSAccountConfigPayload,
-} from 'types/api/integrations/aws';
-import {
-	AzureAccountConfig,
-	ConnectionParams,
-	IAzureDeploymentCommands,
-} from 'types/api/integrations/types';
-
-export const getCloudIntegrationAccounts = async (
-	cloudServiceId: string,
-): Promise<CloudAccount[]> => {
-	const response = await axios.get(
-		`/cloud-integrations/${cloudServiceId}/accounts`,
-	);
-
-	return response.data.data.accounts;
-};
-
-export const getCloudIntegrationServices = async (
-	cloudServiceId: string,
-	cloudAccountId?: string,
-): Promise<AzureService[]> => {
-	const params = cloudAccountId
-		? { cloud_account_id: cloudAccountId }
-		: undefined;
-
-	const response = await axios.get(
-		`/cloud-integrations/${cloudServiceId}/services`,
-		{
-			params,
-		},
-	);
-
-	return response.data.data.services;
-};
-
-export const getCloudIntegrationServiceDetails = async (
-	cloudServiceId: string,
-	serviceId: string,
-	cloudAccountId?: string,
-): Promise<ServiceData> => {
-	const params = cloudAccountId
-		? { cloud_account_id: cloudAccountId }
-		: undefined;
-	const response = await axios.get(
-		`/cloud-integrations/${cloudServiceId}/services/${serviceId}`,
-		{ params },
-	);
-	return response.data.data;
-};
-
-export const updateAccountConfig = async (
-	cloudServiceId: string,
-	accountId: string,
-	payload: AWSAccountConfigPayload | AzureAccountConfig,
-): Promise<AccountConfigResponse> => {
-	const response = await axios.post<AccountConfigResponse>(
-		`/cloud-integrations/${cloudServiceId}/accounts/${accountId}/config`,
-		payload,
-	);
-	return response.data;
-};
-
-export const updateServiceConfig = async (
-	cloudServiceId: string,
-	serviceId: string,
-	payload: AzureServiceConfigPayload,
-): Promise<AzureServiceConfigPayload> => {
-	const response = await axios.post<AzureServiceConfigPayload>(
-		`/cloud-integrations/${cloudServiceId}/services/${serviceId}/config`,
-		payload,
-	);
-	return response.data;
-};
-
-export const getConnectionParams = async (
-	cloudServiceId: string,
-): Promise<ConnectionParams> => {
-	const response = await axios.get(
-		`/cloud-integrations/${cloudServiceId}/accounts/generate-connection-params`,
-	);
-	return response.data.data;
-};
-
-export const getAzureDeploymentCommands = async (params: {
-	agent_config: ConnectionParams;
-	account_config: AzureCloudAccountConfig;
-}): Promise<IAzureDeploymentCommands> => {
-	const response = await axios.post(
-		`/cloud-integrations/azure/accounts/generate-connection-url`,
-		params,
-	);
-
-	return response.data.data;
-};
-
-export const removeIntegrationAccount = async ({
-	cloudServiceId,
-	accountId,
-}: {
-	cloudServiceId: string;
-	accountId: string;
-}): Promise<SuccessResponse<Record<string, never>> | ErrorResponse> => {
-	const response = await axios.post(
-		`/cloud-integrations/${cloudServiceId}/accounts/${accountId}/disconnect`,
-	);
-
-	return response.data;
-};

frontend/src/api/organization/editOrg.ts

@@ -1,26 +0,0 @@
-import { ApiV2Instance as axios } from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/editOrg';
-
-const editOrg = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.put(`/orgs/me`, {
-			displayName: props.displayName,
-		});
-
-		return {
-			statusCode: 204,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default editOrg;

frontend/src/api/organization/getOrganization.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/user/getOrganization';
-
-const getOrganization = async (
-	token?: string,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.get(`/org`, {
-			headers: {
-				Authorization: `bearer ${token}`,
-			},
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getOrganization;

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

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

frontend/src/api/v1/user/id/get.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, UserResponse } from 'types/api/user/getUser';
-
-const getUser = async (
-	props: Props,
-): Promise<SuccessResponseV2<UserResponse>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/user/${props.userId}`);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getUser;

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

@@ -1,23 +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/editUser';
-
-const update = async (props: Props): Promise<SuccessResponseV2<null>> => {
-	try {
-		const response = await axios.put(`/user/${props.userId}`, {
-			displayName: props.displayName,
-			role: props.role,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: null,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default update;

frontend/src/api/v1/user/me/get.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 { PayloadProps, UserResponse } from 'types/api/user/getUser';
-
-const get = async (): Promise<SuccessResponseV2<UserResponse>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/user/me`);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default get;

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

@@ -28,7 +28,6 @@ import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/switch';
 import '@signozhq/table';
-import '@signozhq/tabs';
 import '@signozhq/toggle-group';
 import '@signozhq/tooltip';
 import '@signozhq/ui';

frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/CloudIntegrationAccounts.styles.scss

@@ -1,109 +0,0 @@
-.cloud-integration-accounts {
-	padding: 0px 16px;
-
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-
-	.selected-cloud-integration-account-section {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-
-		.selected-cloud-integration-account-section-header {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-
-			border-radius: 4px;
-			border: 1px solid var(--l3-background);
-			background: var(--l1-background);
-
-			.selected-cloud-integration-account-section-header-title {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				gap: 8px;
-
-				.selected-cloud-integration-account-status {
-					display: flex;
-					border-right: 1px solid var(--l3-background);
-					border-radius: none;
-					width: 32px;
-					height: 32px;
-
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					border-radius: 4px;
-					line-height: 32px;
-				}
-
-				.selected-cloud-integration-account-section-header-title-text {
-					display: flex;
-					flex-direction: row;
-					align-items: center;
-					gap: 16px;
-
-					.azure-cloud-account-selector {
-						.ant-select {
-							background-color: transparent !important;
-							border: none !important;
-							box-shadow: none !important;
-
-							.ant-select-selector {
-								background: transparent !important;
-								border: none !important;
-								box-shadow: none !important;
-							}
-						}
-					}
-				}
-			}
-
-			.selected-cloud-integration-account-settings {
-				display: flex;
-				flex-direction: row;
-				gap: 16px;
-				line-height: 32px;
-				margin-right: 8px;
-				cursor: pointer;
-			}
-		}
-
-		.account-settings-container {
-			display: flex;
-			flex-direction: column;
-			gap: 16px;
-		}
-
-		.add-new-cloud-integration-account-button {
-			display: flex;
-			flex-direction: row;
-			gap: 16px;
-			line-height: 32px;
-			margin-right: 8px;
-			cursor: pointer;
-		}
-	}
-}
-
-.cloud-integration-accounts-drawer-content {
-	height: 100%;
-	max-height: calc(100vh - 120px); // Account for drawer header and padding
-	overflow-y: auto;
-	overflow-x: hidden;
-	display: flex;
-	flex-direction: column;
-
-	&::-webkit-scrollbar {
-		width: 0.2rem;
-	}
-
-	.edit-account-content,
-	.add-new-account-content {
-		flex: 1;
-		min-height: 0; // Allows flex children to shrink below content size
-	}
-}

frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/CloudIntegrationAccounts.tsx

@@ -1,165 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Color } from '@signozhq/design-tokens';
-import { DrawerWrapper } from '@signozhq/drawer';
-import { Select } from 'antd';
-import ConnectNewAzureAccount from 'container/Integrations/CloudIntegration/AzureServices/AzureAccount/ConnectNewAzureAccount';
-import EditAzureAccount from 'container/Integrations/CloudIntegration/AzureServices/AzureAccount/EditAzureAccount';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
-import { CloudAccount } from 'container/Integrations/types';
-import { useGetConnectionParams } from 'hooks/integration/useGetConnectionParams';
-import useAxiosError from 'hooks/useAxiosError';
-import { Dot, PencilLine, Plus } from 'lucide-react';
-
-import './CloudIntegrationAccounts.styles.scss';
-
-export type DrawerMode = 'edit' | 'add';
-
-export default function CloudIntegrationAccounts({
-	selectedAccount,
-	accounts,
-	isLoadingAccounts,
-	onSelectAccount,
-	refetchAccounts,
-}: {
-	selectedAccount: CloudAccount | null;
-	accounts: CloudAccount[];
-	isLoadingAccounts: boolean;
-	onSelectAccount: (account: CloudAccount) => void;
-	refetchAccounts: () => void;
-}): JSX.Element {
-	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-	const [mode, setMode] = useState<DrawerMode>('add');
-
-	const handleDrawerOpenChange = (open: boolean): void => {
-		setIsDrawerOpen(open);
-	};
-
-	const handleEditAccount = (): void => {
-		setMode('edit');
-		setIsDrawerOpen(true);
-	};
-
-	const handleAddNewAccount = (): void => {
-		setMode('add');
-		setIsDrawerOpen(true);
-	};
-
-	const handleError = useAxiosError();
-
-	const {
-		data: connectionParams,
-		isLoading: isConnectionParamsLoading,
-	} = useGetConnectionParams({
-		cloudServiceId: INTEGRATION_TYPES.AZURE,
-		options: { onError: handleError },
-	});
-
-	const handleSelectAccount = (value: string): void => {
-		const account = accounts.find(
-			(account) => account.cloud_account_id === value,
-		);
-
-		if (account) {
-			onSelectAccount(account);
-		}
-	};
-
-	const handleAccountConnected = (): void => {
-		refetchAccounts();
-	};
-
-	const handleAccountUpdated = (): void => {
-		refetchAccounts();
-	};
-
-	const renderDrawerContent = (): JSX.Element => {
-		return (
-			<div className="cloud-integration-accounts-drawer-content">
-				{mode === 'edit' ? (
-					<div className="edit-account-content">
-						<EditAzureAccount
-							selectedAccount={selectedAccount as CloudAccount}
-							connectionParams={connectionParams || {}}
-							isConnectionParamsLoading={isConnectionParamsLoading}
-							onAccountUpdated={handleAccountUpdated}
-						/>
-					</div>
-				) : (
-					<div className="add-new-account-content">
-						<ConnectNewAzureAccount
-							connectionParams={connectionParams || {}}
-							isConnectionParamsLoading={isConnectionParamsLoading}
-							onAccountConnected={handleAccountConnected}
-						/>
-					</div>
-				)}
-			</div>
-		);
-	};
-
-	return (
-		<div className="cloud-integration-accounts">
-			{selectedAccount && (
-				<div className="selected-cloud-integration-account-section">
-					<div className="selected-cloud-integration-account-section-header">
-						<div className="selected-cloud-integration-account-section-header-title">
-							<div className="selected-cloud-integration-account-status">
-								<Dot size={24} color={Color.BG_FOREST_500} />
-							</div>
-							<div className="selected-cloud-integration-account-section-header-title-text">
-								Subscription ID :
-								<span className="azure-cloud-account-selector">
-									<Select
-										value={selectedAccount?.cloud_account_id}
-										options={accounts.map((account) => ({
-											label: account.cloud_account_id,
-											value: account.cloud_account_id,
-										}))}
-										onChange={handleSelectAccount}
-										loading={isLoadingAccounts}
-										placeholder="Select Account"
-									/>
-								</span>
-							</div>
-						</div>
-						<div className="selected-cloud-integration-account-settings">
-							<Button
-								variant="link"
-								color="secondary"
-								prefixIcon={<PencilLine size={14} />}
-								onClick={handleEditAccount}
-							>
-								Edit Account
-							</Button>
-
-							<Button
-								variant="link"
-								color="secondary"
-								prefixIcon={<Plus size={14} />}
-								onClick={handleAddNewAccount}
-							>
-								Add New Account
-							</Button>
-						</div>
-					</div>
-				</div>
-			)}
-
-			<div className="account-settings-container">
-				<DrawerWrapper
-					open={isDrawerOpen}
-					onOpenChange={handleDrawerOpenChange}
-					type="panel"
-					header={{
-						title: mode === 'add' ? 'Connect with Azure' : 'Edit Azure Account',
-					}}
-					content={renderDrawerContent()}
-					showCloseButton
-					allowOutsideClick={mode === 'edit'}
-					direction="right"
-				/>
-			</div>
-		</div>
-	);
-}

frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/index.tsx

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

frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/CloudIntegrationsHeader.styles.scss

@@ -1,50 +0,0 @@
-.cloud-integrations-header-section {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	border-bottom: 1px solid var(--l3-background);
-
-	.cloud-integrations-header {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		padding: 16px;
-		padding-bottom: 0px;
-		gap: 16px;
-
-		.cloud-integrations-title-section {
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-
-			.cloud-integrations-title {
-				display: flex;
-				align-items: center;
-				gap: 16px;
-
-				.cloud-integrations-icon {
-					width: 40px;
-					height: 40px;
-				}
-
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 16px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 32px; /* 200% */
-				letter-spacing: -0.08px;
-			}
-
-			.cloud-integrations-description {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-}

frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/CloudIntegrationsHeader.tsx

@@ -1,61 +0,0 @@
-import {
-	AWS_INTEGRATION,
-	AZURE_INTEGRATION,
-} from 'container/Integrations/constants';
-import { CloudAccount, IntegrationType } from 'container/Integrations/types';
-
-import CloudIntegrationAccounts from '../CloudIntegrationAccounts';
-
-import './CloudIntegrationsHeader.styles.scss';
-
-export default function CloudIntegrationsHeader({
-	cloudServiceId,
-	selectedAccount,
-	accounts,
-	isLoadingAccounts,
-	onSelectAccount,
-	refetchAccounts,
-}: {
-	selectedAccount: CloudAccount | null;
-	accounts: CloudAccount[] | [];
-	isLoadingAccounts: boolean;
-	onSelectAccount: (account: CloudAccount) => void;
-	cloudServiceId: IntegrationType;
-	refetchAccounts: () => void;
-}): JSX.Element {
-	const INTEGRATION_DATA =
-		cloudServiceId === IntegrationType.AWS_SERVICES
-			? AWS_INTEGRATION
-			: AZURE_INTEGRATION;
-
-	return (
-		<div className="cloud-integrations-header-section">
-			<div className="cloud-integrations-header">
-				<div className="cloud-integrations-title-section">
-					<div className="cloud-integrations-title">
-						<img
-							className="cloud-integrations-icon"
-							src={INTEGRATION_DATA.icon}
-							alt={INTEGRATION_DATA.icon_alt}
-						/>
-
-						{INTEGRATION_DATA.title}
-					</div>
-					<div className="cloud-integrations-description">
-						{INTEGRATION_DATA.description}
-					</div>
-				</div>
-			</div>
-
-			<div className="cloud-integrations-accounts-list">
-				<CloudIntegrationAccounts
-					selectedAccount={selectedAccount}
-					accounts={accounts}
-					isLoadingAccounts={isLoadingAccounts}
-					onSelectAccount={onSelectAccount}
-					refetchAccounts={refetchAccounts}
-				/>
-			</div>
-		</div>
-	);
-}

frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/index.tsx

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

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss

@@ -1,34 +0,0 @@
-.cloud-service-data-collected {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-
-	.cloud-service-data-collected-table {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		.cloud-service-data-collected-table-heading {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			gap: 8px;
-
-			color: var(--l2-foreground);
-
-			/* Bifrost (Ancient)/Content/sm */
-			font-family: Inter;
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-		}
-
-		.cloud-service-data-collected-table-logs {
-			border-radius: 6px;
-			border: 1px solid var(--l3-background);
-			background: var(--l1-background);
-		}
-	}
-}

frontend/src/components/CodeBlock/CodeBlock.styles.scss

@@ -1,39 +0,0 @@
-.code-block-container {
-	position: relative;
-	border-radius: 4px;
-	overflow: hidden;
-
-	.code-block-copy-btn {
-		position: absolute;
-		top: 50%;
-		right: 8px;
-		transform: translateY(-50%);
-		z-index: 10;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 6px 8px;
-		color: var(--bg-vanilla-100);
-		transition: color 0.15s ease;
-
-		&.copied {
-			background-color: var(--bg-robin-500);
-		}
-	}
-
-	// CodeMirror wrapper
-	.code-block-editor {
-		border-radius: 4px;
-
-		.cm-editor {
-			border-radius: 4px;
-			font-size: 13px;
-			line-height: 1.5;
-			font-family: 'Space Mono', monospace;
-		}
-
-		.cm-scroller {
-			font-family: 'Space Mono', monospace;
-		}
-	}
-}

frontend/src/components/CodeBlock/CodeBlock.tsx

@@ -1,146 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
-import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
-import { javascript } from '@codemirror/lang-javascript';
-import { Button } from '@signozhq/button';
-import { dracula } from '@uiw/codemirror-theme-dracula';
-import { githubLight } from '@uiw/codemirror-theme-github';
-import CodeMirror, {
-	EditorState,
-	EditorView,
-	Extension,
-} from '@uiw/react-codemirror';
-import cx from 'classnames';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import './CodeBlock.styles.scss';
-
-export type CodeBlockLanguage =
-	| 'javascript'
-	| 'typescript'
-	| 'js'
-	| 'ts'
-	| 'json'
-	| 'bash'
-	| 'shell'
-	| 'text';
-
-export type CodeBlockTheme = 'light' | 'dark' | 'auto';
-
-interface CodeBlockProps {
-	/** The code content to display */
-	value: string;
-	/** Language for syntax highlighting */
-	language?: CodeBlockLanguage;
-	/** Theme: 'light' | 'dark' | 'auto' (follows app dark mode when 'auto') */
-	theme?: CodeBlockTheme;
-	/** Show line numbers */
-	lineNumbers?: boolean;
-	/** Show copy button */
-	showCopyButton?: boolean;
-	/** Custom class name for the container */
-	className?: string;
-	/** Max height in pixels - enables scrolling when content exceeds */
-	maxHeight?: number | string;
-	/** Callback when copy is clicked */
-	onCopy?: (copiedText: string) => void;
-}
-
-const LANGUAGE_EXTENSION_MAP: Record<
-	CodeBlockLanguage,
-	ReturnType<typeof javascript> | undefined
-> = {
-	javascript: javascript({ jsx: true }),
-	typescript: javascript({ jsx: true }),
-	js: javascript({ jsx: true }),
-	ts: javascript({ jsx: true }),
-	json: javascript(), // JSON is valid JS; proper json() would require @codemirror/lang-json
-	bash: undefined,
-	shell: undefined,
-	text: undefined,
-};
-
-function CodeBlock({
-	value,
-	language = 'text',
-	theme: themeProp = 'auto',
-	lineNumbers = true,
-	showCopyButton = true,
-	className,
-	maxHeight,
-	onCopy,
-}: CodeBlockProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const [isCopied, setIsCopied] = useState(false);
-	const [, copyToClipboard] = useCopyToClipboard();
-
-	const resolvedDark = themeProp === 'auto' ? isDarkMode : themeProp === 'dark';
-	const theme = resolvedDark ? dracula : githubLight;
-
-	const extensions = useMemo((): Extension[] => {
-		const langExtension = LANGUAGE_EXTENSION_MAP[language];
-		return [
-			EditorState.readOnly.of(true),
-			EditorView.editable.of(false),
-			EditorView.lineWrapping,
-			...(langExtension ? [langExtension] : []),
-		];
-	}, [language]);
-
-	const handleCopy = useCallback((): void => {
-		copyToClipboard(value);
-		setIsCopied(true);
-		onCopy?.(value);
-		setTimeout(() => setIsCopied(false), 2000);
-	}, [value, onCopy, copyToClipboard]);
-
-	return (
-		<div className={cx('code-block-container', className)}>
-			{showCopyButton && (
-				<Button
-					variant="solid"
-					size="xs"
-					color="secondary"
-					className={cx('code-block-copy-btn', { copied: isCopied })}
-					onClick={handleCopy}
-					aria-label={isCopied ? 'Copied' : 'Copy code'}
-					title={isCopied ? 'Copied' : 'Copy code'}
-				>
-					{isCopied ? <CheckOutlined /> : <CopyOutlined />}
-				</Button>
-			)}
-			<CodeMirror
-				className="code-block-editor"
-				value={value}
-				theme={theme}
-				readOnly
-				editable={false}
-				extensions={extensions}
-				basicSetup={{
-					lineNumbers,
-					highlightActiveLineGutter: false,
-					highlightActiveLine: false,
-					highlightSelectionMatches: true,
-					drawSelection: true,
-					syntaxHighlighting: true,
-					bracketMatching: true,
-					history: false,
-					foldGutter: false,
-					autocompletion: false,
-					defaultKeymap: false,
-					searchKeymap: true,
-					historyKeymap: false,
-					foldKeymap: false,
-					completionKeymap: false,
-					closeBrackets: false,
-					indentOnInput: false,
-				}}
-				style={{
-					maxHeight: maxHeight ?? 'auto',
-				}}
-			/>
-		</div>
-	);
-}
-
-export default CodeBlock;

frontend/src/components/CodeBlock/index.ts

@@ -1,2 +0,0 @@
-export type { CodeBlockLanguage, CodeBlockTheme } from './CodeBlock';
-export { default as CodeBlock } from './CodeBlock';

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -14,6 +14,8 @@ import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schem
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { parseAsBoolean, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 import './CreateServiceAccountModal.styles.scss';
 
@@ -28,6 +30,8 @@ function CreateServiceAccountModal(): JSX.Element {
 		parseAsBoolean.withDefault(false),
 	);
 
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
+
 	const {
 		control,
 		handleSubmit,
@@ -54,13 +58,10 @@ function CreateServiceAccountModal(): JSX.Element {
 				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 errMessage = convertToApiError(
+					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				);
+				showErrorModal(errMessage as APIError);
 			},
 		},
 	});
@@ -90,7 +91,7 @@ function CreateServiceAccountModal(): JSX.Element {
 			showCloseButton
 			width="narrow"
 			className="create-sa-modal"
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<div className="create-sa-modal__content">
 				<form

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

@@ -11,6 +11,16 @@ jest.mock('@signozhq/sonner', () => ({
 
 const mockToast = jest.mocked(toast);
 
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+		isErrorModalVisible: false,
+	})),
+}));
+
 const SERVICE_ACCOUNTS_ENDPOINT = '*/api/v1/service_accounts';
 
 function renderModal(): ReturnType<typeof render> {
@@ -92,10 +102,13 @@ describe('CreateServiceAccountModal', () => {
 		await user.click(submitBtn);
 
 		await waitFor(() => {
-			expect(mockToast.error).toHaveBeenCalledWith(
-				expect.stringMatching(/Failed to create service account/i),
-				expect.anything(),
+			expect(showErrorModal).toHaveBeenCalledWith(
+				expect.objectContaining({
+					getErrorMessage: expect.any(Function),
+				}),
 			);
+			const passedError = showErrorModal.mock.calls[0][0] as any;
+			expect(passedError.getErrorMessage()).toBe('Internal Server Error');
 		});
 
 		expect(

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -0,0 +1,75 @@
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { Trash2, X } from '@signozhq/icons';
+import { MemberRow } from 'components/MembersTable/MembersTable';
+
+interface DeleteMemberDialogProps {
+	open: boolean;
+	isInvited: boolean;
+	member: MemberRow | null;
+	isDeleting: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+}
+
+function DeleteMemberDialog({
+	open,
+	isInvited,
+	member,
+	isDeleting,
+	onClose,
+	onConfirm,
+}: DeleteMemberDialogProps): JSX.Element {
+	const title = isInvited ? 'Revoke Invite' : 'Delete Member';
+
+	const body = isInvited ? (
+		<>
+			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 remove their
+			access to the workspace.
+		</>
+	);
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			title={title}
+			width="narrow"
+			className="alert-dialog delete-dialog"
+			showCloseButton={false}
+			disableOutsideClick={false}
+		>
+			<p className="delete-dialog__body">{body}</p>
+
+			<DialogFooter className="delete-dialog__footer">
+				<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
+					<X size={12} />
+					Cancel
+				</Button>
+				<Button
+					variant="solid"
+					color="destructive"
+					size="sm"
+					disabled={isDeleting}
+					onClick={onConfirm}
+				>
+					<Trash2 size={12} />
+					{isDeleting ? 'Processing...' : title}
+				</Button>
+			</DialogFooter>
+		</DialogWrapper>
+	);
+}
+
+export default DeleteMemberDialog;

frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss

@@ -45,8 +45,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		height: 32px;
-		padding: 0 var(--padding-2);
+		min-height: 32px;
+		padding: var(--padding-1) var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
 		border: 1px solid var(--border);
@@ -57,6 +57,13 @@
 		}
 	}
 
+	&__disabled-roles {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--spacing-2);
+		flex: 1;
+	}
+
 	&__email-text {
 		font-size: var(--font-size-sm);
 		font-weight: var(--font-weight-normal);
@@ -76,35 +83,6 @@
 		opacity: 0.6;
 	}
 
-	&__role-select {
-		width: 100%;
-		height: 32px;
-
-		.ant-select-selector {
-			background-color: var(--l2-background) !important;
-			border-color: var(--border) !important;
-			border-radius: 2px;
-			padding: 0 var(--padding-2) !important;
-			display: flex;
-			align-items: center;
-		}
-
-		.ant-select-selection-item {
-			font-size: var(--font-size-sm);
-			color: var(--l1-foreground);
-			line-height: 32px;
-			letter-spacing: -0.07px;
-		}
-
-		.ant-select-arrow {
-			color: var(--foreground);
-		}
-
-		&:not(.ant-select-disabled):hover .ant-select-selector {
-			border-color: var(--foreground);
-		}
-	}
-
 	&__meta {
 		display: flex;
 		flex-direction: column;
@@ -168,6 +146,10 @@
 		flex-shrink: 0;
 	}
 
+	&__tooltip-wrapper {
+		display: inline-flex;
+	}
+
 	&__footer-btn {
 		display: inline-flex;
 		align-items: center;

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,39 +1,67 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { DrawerWrapper } from '@signozhq/drawer';
-import {
-	Check,
-	ChevronDown,
-	Copy,
-	LockKeyhole,
-	RefreshCw,
-	Trash2,
-	X,
-} from '@signozhq/icons';
+import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
 import { toast } from '@signozhq/sonner';
-import { Select } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	getResetPasswordToken,
 	useDeleteUser,
-	useUpdateUserDeprecated,
+	useGetUser,
+	useUpdateMyUserV2,
+	useUpdateUser,
 } from 'api/generated/services/users';
 import { AxiosError } from 'axios';
 import { MemberRow } from 'components/MembersTable/MembersTable';
+import RolesSelect, { useRoles } from 'components/RolesSelect';
+import SaveErrorItem from 'components/ServiceAccountDrawer/SaveErrorItem';
+import type { SaveError } from 'components/ServiceAccountDrawer/utils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { MemberStatus } from 'container/MembersSettings/utils';
-import { capitalize } from 'lodash-es';
+import {
+	MemberRoleUpdateFailure,
+	useMemberRoleManager,
+} from 'hooks/member/useMemberRoleManager';
+import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
-import { popupContainer } from 'utils/selectPopupContainer';
+import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
+
+import DeleteMemberDialog from './DeleteMemberDialog';
+import ResetLinkDialog from './ResetLinkDialog';
 
 import './EditMemberDrawer.styles.scss';
 
+const ROOT_USER_TOOLTIP = 'This operation is not supported for the root user';
+const SELF_DELETE_TOOLTIP =
+	'You cannot perform this action on your own account';
+
+function getDeleteTooltip(
+	isRootUser: boolean,
+	isSelf: boolean,
+): string | undefined {
+	if (isRootUser) {
+		return ROOT_USER_TOOLTIP;
+	}
+	if (isSelf) {
+		return SELF_DELETE_TOOLTIP;
+	}
+	return undefined;
+}
+
+function toSaveApiError(err: unknown): APIError {
+	return (
+		convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
+		toAPIError(err as AxiosError<RenderErrorResponseDTO>)
+	);
+}
+
 export interface EditMemberDrawerProps {
 	member: MemberRow | null;
 	open: boolean;
@@ -49,9 +77,12 @@ function EditMemberDrawer({
 	onComplete,
 }: EditMemberDrawerProps): JSX.Element {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const { user: currentUser } = useAppContext();
 
-	const [displayName, setDisplayName] = useState('');
-	const [selectedRole, setSelectedRole] = useState<ROLES>('VIEWER');
+	const [localDisplayName, setLocalDisplayName] = useState('');
+	const [localRole, setLocalRole] = useState('');
+	const [isSaving, setIsSaving] = useState(false);
+	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
 	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 	const [resetLink, setResetLink] = useState<string | null>(null);
@@ -60,92 +91,247 @@ function EditMemberDrawer({
 	const [linkType, setLinkType] = useState<'invite' | 'reset' | null>(null);
 
 	const isInvited = member?.status === MemberStatus.Invited;
+	const isDeleted = member?.status === MemberStatus.Deleted;
+	const isSelf = !!member?.id && member.id === currentUser?.id;
 
-	const { mutate: updateUser, isLoading: isSaving } = useUpdateUserDeprecated({
-		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 { showErrorModal } = useErrorModal();
+
+	const {
+		data: fetchedUser,
+		isLoading: isFetchingUser,
+		refetch: refetchUser,
+	} = useGetUser(
+		{ id: member?.id ?? '' },
+		{ query: { enabled: open && !!member?.id } },
+	);
+
+	const isRootUser = !!fetchedUser?.data?.isRoot;
+
+	const {
+		roles: availableRoles,
+		isLoading: rolesLoading,
+		isError: rolesError,
+		error: rolesErrorObj,
+		refetch: refetchRoles,
+	} = useRoles();
+
+	const {
+		fetchedRoleIds,
+		isLoading: isMemberRolesLoading,
+		applyDiff,
+	} = useMemberRoleManager(member?.id ?? '', open && !!member?.id);
+
+	const fetchedDisplayName =
+		fetchedUser?.data?.displayName ?? member?.name ?? '';
+	const fetchedUserId = fetchedUser?.data?.id;
+	const fetchedUserDisplayName = fetchedUser?.data?.displayName;
+
+	const roleSessionRef = useRef<string | null>(null);
+
+	useEffect(() => {
+		if (fetchedUserId) {
+			setLocalDisplayName(fetchedUserDisplayName ?? member?.name ?? '');
+		}
+	}, [fetchedUserId, fetchedUserDisplayName, member?.name]);
+
+	useEffect(() => {
+		if (fetchedUserId) {
+			setSaveErrors([]);
+		}
+	}, [fetchedUserId]);
+
+	useEffect(() => {
+		if (!member?.id) {
+			roleSessionRef.current = null;
+		} else if (member.id !== roleSessionRef.current && !isMemberRolesLoading) {
+			setLocalRole(fetchedRoleIds[0] ?? '');
+			roleSessionRef.current = member.id;
+		}
+	}, [member?.id, fetchedRoleIds, isMemberRolesLoading]);
+
+	const isDirty =
+		member !== null &&
+		fetchedUser != null &&
+		(localDisplayName !== fetchedDisplayName ||
+			localRole !== (fetchedRoleIds[0] ?? ''));
+
+	const { mutateAsync: updateMyUser } = useUpdateMyUserV2();
+	const { mutateAsync: updateUser } = useUpdateUser();
 
 	const { mutate: deleteUser, isLoading: isDeleting } = useDeleteUser({
 		mutation: {
 			onSuccess: (): void => {
 				toast.success(
 					isInvited ? 'Invite revoked successfully' : 'Member deleted successfully',
-					{ richColors: true },
+					{ richColors: true, position: 'top-right' },
 				);
 				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 });
+				const errMessage = convertToApiError(
+					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				);
+				showErrorModal(errMessage as APIError);
 			},
 		},
 	});
 
-	useEffect(() => {
-		if (member) {
-			setDisplayName(member.name ?? '');
-			setSelectedRole(member.role);
-		}
-	}, [member]);
-
-	const isDirty =
-		member !== null &&
-		(displayName !== (member.name ?? '') || selectedRole !== member.role);
-
-	const formatTimestamp = useCallback(
-		(ts: string | null | undefined): string => {
-			if (!ts) {
-				return '—';
+	const makeRoleRetry = useCallback(
+		(
+			context: string,
+			rawRetry: () => Promise<void>,
+		) => async (): Promise<void> => {
+			try {
+				await rawRetry();
+				setSaveErrors((prev) => prev.filter((e) => e.context !== context));
+				refetchUser();
+			} catch (err) {
+				setSaveErrors((prev) =>
+					prev.map((e) =>
+						e.context === context ? { ...e, apiError: toSaveApiError(err) } : e,
+					),
+				);
 			}
-			const d = new Date(ts);
-			if (Number.isNaN(d.getTime())) {
-				return '—';
-			}
-			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
 		},
-		[formatTimezoneAdjustedTimestamp],
+		[refetchUser],
 	);
 
-	const handleSave = useCallback((): void => {
+	const retryNameUpdate = useCallback(async (): Promise<void> => {
+		if (!member) {
+			return;
+		}
+		try {
+			if (isSelf) {
+				await updateMyUser({ data: { displayName: localDisplayName } });
+			} else {
+				await updateUser({
+					pathParams: { id: member.id },
+					data: { displayName: localDisplayName },
+				});
+			}
+			setSaveErrors((prev) => prev.filter((e) => e.context !== 'Name update'));
+			refetchUser();
+		} catch (err) {
+			setSaveErrors((prev) =>
+				prev.map((e) =>
+					e.context === 'Name update' ? { ...e, apiError: toSaveApiError(err) } : e,
+				),
+			);
+		}
+	}, [member, isSelf, localDisplayName, updateMyUser, updateUser, refetchUser]);
+
+	const handleSave = useCallback(async (): Promise<void> => {
 		if (!member || !isDirty) {
 			return;
 		}
-		updateUser({
-			pathParams: { id: member.id },
-			data: { id: member.id, displayName, role: selectedRole },
-		});
-	}, [member, isDirty, displayName, selectedRole, updateUser]);
+		setSaveErrors([]);
+		setIsSaving(true);
+		try {
+			const nameChanged = localDisplayName !== fetchedDisplayName;
+			const rolesChanged = localRole !== (fetchedRoleIds[0] ?? '');
+
+			const namePromise = nameChanged
+				? isSelf
+					? updateMyUser({ data: { displayName: localDisplayName } })
+					: updateUser({
+							pathParams: { id: member.id },
+							data: { displayName: localDisplayName },
+					  })
+				: Promise.resolve();
+
+			const [nameResult, rolesResult] = await Promise.allSettled([
+				namePromise,
+				rolesChanged
+					? applyDiff([localRole].filter(Boolean), availableRoles)
+					: Promise.resolve([]),
+			]);
+
+			const errors: SaveError[] = [];
+
+			if (nameResult.status === 'rejected') {
+				errors.push({
+					context: 'Name update',
+					apiError: toSaveApiError(nameResult.reason),
+					onRetry: retryNameUpdate,
+				});
+			}
+
+			if (rolesResult.status === 'rejected') {
+				errors.push({
+					context: 'Roles update',
+					apiError: toSaveApiError(rolesResult.reason),
+					onRetry: async (): Promise<void> => {
+						const failures = await applyDiff(
+							[localRole].filter(Boolean),
+							availableRoles,
+						);
+						setSaveErrors((prev) => {
+							const rest = prev.filter((e) => e.context !== 'Roles update');
+							return [
+								...rest,
+								...failures.map((f: MemberRoleUpdateFailure) => {
+									const ctx = `Role '${f.roleName}'`;
+									return {
+										context: ctx,
+										apiError: toSaveApiError(f.error),
+										onRetry: makeRoleRetry(ctx, f.onRetry),
+									};
+								}),
+							];
+						});
+						refetchUser();
+					},
+				});
+			} else {
+				for (const failure of rolesResult.value ?? []) {
+					const context = `Role '${failure.roleName}'`;
+					errors.push({
+						context,
+						apiError: toSaveApiError(failure.error),
+						onRetry: makeRoleRetry(context, failure.onRetry),
+					});
+				}
+			}
+
+			if (errors.length > 0) {
+				setSaveErrors(errors);
+			} else {
+				toast.success('Member details updated successfully', {
+					richColors: true,
+					position: 'top-right',
+				});
+				onComplete();
+			}
+
+			refetchUser();
+		} finally {
+			setIsSaving(false);
+		}
+	}, [
+		member,
+		isDirty,
+		isSelf,
+		localDisplayName,
+		localRole,
+		fetchedDisplayName,
+		fetchedRoleIds,
+		updateMyUser,
+		updateUser,
+		applyDiff,
+		availableRoles,
+		refetchUser,
+		retryNameUpdate,
+		makeRoleRetry,
+		onComplete,
+	]);
 
 	const handleDelete = useCallback((): void => {
 		if (!member) {
 			return;
 		}
-		deleteUser({
-			pathParams: { id: member.id },
-		});
+		deleteUser({ pathParams: { id: member.id } });
 	}, [member, deleteUser]);
 
 	const handleGenerateResetLink = useCallback(async (): Promise<void> => {
@@ -168,37 +354,36 @@ function EditMemberDrawer({
 					position: 'top-right',
 				});
 			}
-		} catch {
-			toast.error('Failed to generate password reset link', {
-				richColors: true,
-				position: 'top-right',
-			});
+		} catch (err) {
+			const errMsg = convertToApiError(
+				err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+			);
+			showErrorModal(errMsg as APIError);
 		} finally {
 			setIsGeneratingLink(false);
 		}
-	}, [member, isInvited, setLinkType, onClose]);
+	}, [member, isInvited, onClose, showErrorModal]);
 
 	const [copyState, copyToClipboard] = useCopyToClipboard();
-	const handleCopyResetLink = useCallback(async (): Promise<void> => {
+	const handleCopyResetLink = useCallback((): void => {
 		if (!resetLink) {
 			return;
 		}
 		copyToClipboard(resetLink);
-
 		setHasCopiedResetLink(true);
 		setTimeout(() => setHasCopiedResetLink(false), 2000);
-		toast.success(
+		const message =
 			linkType === 'invite'
 				? 'Invite link copied to clipboard'
-				: 'Reset link copied to clipboard',
-			{ richColors: true },
-		);
+				: 'Reset link copied to clipboard';
+		toast.success(message, { richColors: true, position: 'top-right' });
 	}, [resetLink, copyToClipboard, linkType]);
 
 	useEffect(() => {
 		if (copyState.error) {
 			toast.error('Failed to copy link', {
 				richColors: true,
+				position: 'top-right',
 			});
 		}
 	}, [copyState.error]);
@@ -210,139 +395,210 @@ function EditMemberDrawer({
 
 	const joinedOnLabel = isInvited ? 'Invited On' : 'Joined On';
 
-	const drawerContent = (
-		<div className="edit-member-drawer__layout">
-			<div className="edit-member-drawer__body">
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-name">
-						Name
-					</label>
-					<Input
-						id="member-name"
-						value={displayName}
-						onChange={(e): void => setDisplayName(e.target.value)}
-						className="edit-member-drawer__input"
-						placeholder="Enter name"
-					/>
-				</div>
-
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-email">
-						Email Address
-					</label>
-					<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
-						<span className="edit-member-drawer__email-text">
-							{member?.email || '—'}
-						</span>
-						<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
-					</div>
-				</div>
-
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-role">
-						Roles
-					</label>
-					<Select
-						id="member-role"
-						value={selectedRole}
-						onChange={(role): void => setSelectedRole(role as ROLES)}
-						className="edit-member-drawer__role-select"
-						suffixIcon={<ChevronDown size={14} />}
-						getPopupContainer={popupContainer}
-					>
-						<Select.Option value="ADMIN">{capitalize('ADMIN')}</Select.Option>
-						<Select.Option value="EDITOR">{capitalize('EDITOR')}</Select.Option>
-						<Select.Option value="VIEWER">{capitalize('VIEWER')}</Select.Option>
-					</Select>
-				</div>
-
-				<div className="edit-member-drawer__meta">
-					<div className="edit-member-drawer__meta-item">
-						<span className="edit-member-drawer__meta-label">Status</span>
-						{member?.status === MemberStatus.Active ? (
-							<Badge color="forest" variant="outline">
-								ACTIVE
-							</Badge>
-						) : (
-							<Badge color="amber" variant="outline">
-								INVITED
-							</Badge>
-						)}
-					</div>
-
-					<div className="edit-member-drawer__meta-item">
-						<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-						<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
-					</div>
-					{!isInvited && (
-						<div className="edit-member-drawer__meta-item">
-							<span className="edit-member-drawer__meta-label">Last Modified</span>
-							<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
-						</div>
-					)}
-				</div>
-			</div>
-
-			<div className="edit-member-drawer__footer">
-				<div className="edit-member-drawer__footer-left">
-					<Button
-						className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
-						onClick={(): void => setShowDeleteConfirm(true)}
-					>
-						<Trash2 size={12} />
-						{isInvited ? 'Revoke Invite' : 'Delete Member'}
-					</Button>
-
-					<div className="edit-member-drawer__footer-divider" />
-					<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">
-					<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
-						<X size={14} />
-						Cancel
-					</Button>
-
-					<Button
-						variant="solid"
-						color="primary"
-						size="sm"
-						disabled={!isDirty || isSaving}
-						onClick={handleSave}
-					>
-						{isSaving ? 'Saving...' : 'Save Member Details'}
-					</Button>
-				</div>
-			</div>
-		</div>
+	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],
 	);
 
-	const deleteDialogTitle = isInvited ? 'Revoke Invite' : 'Delete Member';
-	const deleteDialogBody = isInvited ? (
-		<>
-			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.
-		</>
+	const drawerBody = isFetchingUser ? (
+		<Skeleton active paragraph={{ rows: 6 }} />
 	) : (
 		<>
-			Are you sure you want to delete{' '}
-			<strong>{member?.name || member?.email}</strong>? This will remove their
-			access to the workspace.
+			<div className="edit-member-drawer__field">
+				<label className="edit-member-drawer__label" htmlFor="member-name">
+					Name
+				</label>
+				<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
+					<Input
+						id="member-name"
+						value={localDisplayName}
+						onChange={(e): void => {
+							setLocalDisplayName(e.target.value);
+							setSaveErrors((prev) =>
+								prev.filter((err) => err.context !== 'Name update'),
+							);
+						}}
+						className="edit-member-drawer__input"
+						placeholder="Enter name"
+						disabled={isRootUser || isDeleted}
+					/>
+				</Tooltip>
+			</div>
+
+			<div className="edit-member-drawer__field">
+				<label className="edit-member-drawer__label" htmlFor="member-email">
+					Email Address
+				</label>
+				<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
+					<span className="edit-member-drawer__email-text">
+						{member?.email || '—'}
+					</span>
+					<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
+				</div>
+			</div>
+
+			<div className="edit-member-drawer__field">
+				<label className="edit-member-drawer__label" htmlFor="member-role">
+					Roles
+				</label>
+				{isSelf || isRootUser || isDeleted ? (
+					<Tooltip
+						title={
+							isRootUser
+								? ROOT_USER_TOOLTIP
+								: isDeleted
+								? undefined
+								: 'You cannot modify your own role'
+						}
+					>
+						<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
+							<div className="edit-member-drawer__disabled-roles">
+								{localRole ? (
+									<Badge color="vanilla">
+										{availableRoles.find((r) => r.id === localRole)?.name ?? localRole}
+									</Badge>
+								) : (
+									<span className="edit-member-drawer__email-text">—</span>
+								)}
+							</div>
+							<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
+						</div>
+					</Tooltip>
+				) : (
+					<RolesSelect
+						id="member-role"
+						roles={availableRoles}
+						loading={rolesLoading}
+						isError={rolesError}
+						error={rolesErrorObj}
+						onRefetch={refetchRoles}
+						value={localRole}
+						onChange={(role): void => {
+							setLocalRole(role ?? '');
+							setSaveErrors((prev) =>
+								prev.filter(
+									(err) =>
+										err.context !== 'Roles update' && !err.context.startsWith("Role '"),
+								),
+							);
+						}}
+						placeholder="Select role"
+						allowClear={false}
+					/>
+				)}
+			</div>
+
+			<div className="edit-member-drawer__meta">
+				<div className="edit-member-drawer__meta-item">
+					<span className="edit-member-drawer__meta-label">Status</span>
+					{member?.status === MemberStatus.Active ? (
+						<Badge color="forest" variant="outline">
+							ACTIVE
+						</Badge>
+					) : member?.status === MemberStatus.Deleted ? (
+						<Badge color="cherry" variant="outline">
+							DELETED
+						</Badge>
+					) : (
+						<Badge color="amber" variant="outline">
+							INVITED
+						</Badge>
+					)}
+				</div>
+
+				<div className="edit-member-drawer__meta-item">
+					<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
+					<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
+				</div>
+				{!isInvited && (
+					<div className="edit-member-drawer__meta-item">
+						<span className="edit-member-drawer__meta-label">Last Modified</span>
+						<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
+					</div>
+				)}
+			</div>
+
+			{saveErrors.length > 0 && (
+				<div className="edit-member-drawer__save-errors">
+					{saveErrors.map((e) => (
+						<SaveErrorItem
+							key={e.context}
+							context={e.context}
+							apiError={e.apiError}
+							onRetry={e.onRetry}
+						/>
+					))}
+				</div>
+			)}
 		</>
 	);
-	const deleteConfirmLabel = isInvited ? 'Revoke Invite' : 'Delete Member';
+
+	const drawerContent = (
+		<div className="edit-member-drawer__layout">
+			<div className="edit-member-drawer__body">{drawerBody}</div>
+
+			{!isDeleted && (
+				<div className="edit-member-drawer__footer">
+					<div className="edit-member-drawer__footer-left">
+						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
+							<span className="edit-member-drawer__tooltip-wrapper">
+								<Button
+									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
+									onClick={(): void => setShowDeleteConfirm(true)}
+									disabled={isRootUser || isSelf}
+								>
+									<Trash2 size={12} />
+									{isInvited ? 'Revoke Invite' : 'Delete Member'}
+								</Button>
+							</span>
+						</Tooltip>
+
+						<div className="edit-member-drawer__footer-divider" />
+						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
+							<span className="edit-member-drawer__tooltip-wrapper">
+								<Button
+									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
+									onClick={handleGenerateResetLink}
+									disabled={isGeneratingLink || isRootUser}
+								>
+									<RefreshCw size={12} />
+									{isGeneratingLink && 'Generating...'}
+									{!isGeneratingLink && isInvited && 'Copy Invite Link'}
+									{!isGeneratingLink && !isInvited && 'Generate Password Reset Link'}
+								</Button>
+							</span>
+						</Tooltip>
+					</div>
+
+					<div className="edit-member-drawer__footer-right">
+						<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
+							<X size={14} />
+							Cancel
+						</Button>
+
+						<Button
+							variant="solid"
+							color="primary"
+							size="sm"
+							disabled={!isDirty || isSaving || isRootUser}
+							onClick={handleSave}
+						>
+							{isSaving ? 'Saving...' : 'Save Member Details'}
+						</Button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
 
 	return (
 		<>
@@ -363,82 +619,25 @@ function EditMemberDrawer({
 				className="edit-member-drawer"
 			/>
 
-			<DialogWrapper
+			<ResetLinkDialog
 				open={showResetLinkDialog}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setShowResetLinkDialog(false);
-						setLinkType(null);
-					}
+				linkType={linkType}
+				resetLink={resetLink}
+				hasCopied={hasCopiedResetLink}
+				onClose={(): void => {
+					setShowResetLinkDialog(false);
 				}}
-				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">
-						{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">
-							<span className="reset-link-dialog__link-text">{resetLink}</span>
-						</div>
-						<Button
-							variant="outlined"
-							color="secondary"
-							size="sm"
-							onClick={handleCopyResetLink}
-							prefixIcon={
-								hasCopiedResetLink ? <Check size={12} /> : <Copy size={12} />
-							}
-							className="reset-link-dialog__copy-btn"
-						>
-							{hasCopiedResetLink ? 'Copied!' : 'Copy'}
-						</Button>
-					</div>
-				</div>
-			</DialogWrapper>
+				onCopy={handleCopyResetLink}
+			/>
 
-			<DialogWrapper
+			<DeleteMemberDialog
 				open={showDeleteConfirm}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setShowDeleteConfirm(false);
-					}
-				}}
-				title={deleteDialogTitle}
-				width="narrow"
-				className="alert-dialog delete-dialog"
-				showCloseButton={false}
-				disableOutsideClick={false}
-			>
-				<p className="delete-dialog__body">{deleteDialogBody}</p>
-
-				<DialogFooter className="delete-dialog__footer">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setShowDeleteConfirm(false)}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						size="sm"
-						disabled={isDeleting}
-						onClick={handleDelete}
-					>
-						<Trash2 size={12} />
-						{isDeleting ? 'Processing...' : deleteConfirmLabel}
-					</Button>
-				</DialogFooter>
-			</DialogWrapper>
+				isInvited={isInvited}
+				member={member}
+				isDeleting={isDeleting}
+				onClose={(): void => setShowDeleteConfirm(false)}
+				onConfirm={handleDelete}
+			/>
 		</>
 	);
 }

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -0,0 +1,61 @@
+import { Button } from '@signozhq/button';
+import { DialogWrapper } from '@signozhq/dialog';
+import { Check, Copy } from '@signozhq/icons';
+
+interface ResetLinkDialogProps {
+	open: boolean;
+	linkType: 'invite' | 'reset' | null;
+	resetLink: string | null;
+	hasCopied: boolean;
+	onClose: () => void;
+	onCopy: () => void;
+}
+
+function ResetLinkDialog({
+	open,
+	linkType,
+	resetLink,
+	hasCopied,
+	onClose,
+	onCopy,
+}: ResetLinkDialogProps): JSX.Element {
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			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">
+					{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">
+						<span className="reset-link-dialog__link-text">{resetLink}</span>
+					</div>
+					<Button
+						variant="outlined"
+						color="secondary"
+						size="sm"
+						onClick={onCopy}
+						prefixIcon={hasCopied ? <Check size={12} /> : <Copy size={12} />}
+						className="reset-link-dialog__copy-btn"
+					>
+						{hasCopied ? 'Copied!' : 'Copy'}
+					</Button>
+				</div>
+			</div>
+		</DialogWrapper>
+	);
+}
+
+export default ResetLinkDialog;

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

@@ -4,11 +4,18 @@ import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getResetPasswordToken,
 	useDeleteUser,
-	useUpdateUserDeprecated,
+	useGetUser,
+	useSetRoleByUserID,
+	useUpdateMyUserV2,
+	useUpdateUser,
 } from 'api/generated/services/users';
 import { MemberStatus } from 'container/MembersSettings/utils';
+import {
+	listRolesSuccessResponse,
+	managedRoles,
+} from 'mocks-server/__mockdata__/roles';
+import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { ROLES } from 'types/roles';
 
 import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
 
@@ -44,7 +51,10 @@ jest.mock('@signozhq/dialog', () => ({
 
 jest.mock('api/generated/services/users', () => ({
 	useDeleteUser: jest.fn(),
-	useUpdateUserDeprecated: jest.fn(),
+	useGetUser: jest.fn(),
+	useUpdateUser: jest.fn(),
+	useUpdateMyUserV2: jest.fn(),
+	useSetRoleByUserID: jest.fn(),
 	getResetPasswordToken: jest.fn(),
 }));
 
@@ -69,25 +79,63 @@ jest.mock('react-use', () => ({
 	],
 }));
 
-const mockUpdateMutate = jest.fn();
+const ROLES_ENDPOINT = '*/api/v1/roles';
+
 const mockDeleteMutate = jest.fn();
 const mockGetResetPasswordToken = jest.mocked(getResetPasswordToken);
 
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+		isErrorModalVisible: false,
+	})),
+}));
+
+const mockFetchedUser = {
+	data: {
+		id: 'user-1',
+		displayName: 'Alice Smith',
+		email: 'alice@signoz.io',
+		status: 'active',
+		userRoles: [
+			{
+				id: 'ur-1',
+				roleId: managedRoles[0].id,
+				role: managedRoles[0], // signoz-admin
+			},
+		],
+	},
+};
+
 const activeMember = {
 	id: 'user-1',
 	name: 'Alice Smith',
 	email: 'alice@signoz.io',
-	role: 'ADMIN' as ROLES,
 	status: MemberStatus.Active,
 	joinedOn: '1700000000000',
 	updatedAt: '1710000000000',
 };
 
+const selfMember = {
+	...activeMember,
+	id: 'some-user-id',
+};
+
+const rootMockFetchedUser = {
+	data: {
+		...mockFetchedUser.data,
+		id: 'root-user-1',
+		isRoot: true,
+	},
+};
+
 const invitedMember = {
 	id: 'abc123',
 	name: '',
 	email: 'bob@signoz.io',
-	role: 'VIEWER' as ROLES,
 	status: MemberStatus.Invited,
 	joinedOn: '1700000000000',
 };
@@ -109,8 +157,27 @@ function renderDrawer(
 describe('EditMemberDrawer', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		(useUpdateUserDeprecated as jest.Mock).mockReturnValue({
-			mutate: mockUpdateMutate,
+		showErrorModal.mockClear();
+		server.use(
+			rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+		(useGetUser as jest.Mock).mockReturnValue({
+			data: mockFetchedUser,
+			isLoading: false,
+			refetch: jest.fn(),
+		});
+		(useUpdateUser as jest.Mock).mockReturnValue({
+			mutateAsync: jest.fn().mockResolvedValue({}),
+			isLoading: false,
+		});
+		(useUpdateMyUserV2 as jest.Mock).mockReturnValue({
+			mutateAsync: jest.fn().mockResolvedValue({}),
+			isLoading: false,
+		});
+		(useSetRoleByUserID as jest.Mock).mockReturnValue({
+			mutateAsync: jest.fn().mockResolvedValue({}),
 			isLoading: false,
 		});
 		(useDeleteUser as jest.Mock).mockReturnValue({
@@ -119,6 +186,10 @@ describe('EditMemberDrawer', () => {
 		});
 	});
 
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
 	it('renders active member details and disables Save when form is not dirty', () => {
 		renderDrawer();
 
@@ -130,16 +201,15 @@ describe('EditMemberDrawer', () => {
 		).toBeDisabled();
 	});
 
-	it('enables Save after editing name and calls update API on confirm', async () => {
+	it('enables Save after editing name and calls updateUser on confirm', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockMutateAsync = jest.fn().mockResolvedValue({});
 
-		(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
-			mutate: mockUpdateMutate.mockImplementation(() => {
-				options?.mutation?.onSuccess?.();
-			}),
+		(useUpdateUser as jest.Mock).mockReturnValue({
+			mutateAsync: mockMutateAsync,
 			isLoading: false,
-		}));
+		});
 
 		renderDrawer({ onComplete });
 
@@ -153,12 +223,90 @@ describe('EditMemberDrawer', () => {
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(mockUpdateMutate).toHaveBeenCalledWith(
-				expect.objectContaining({
-					pathParams: { id: 'user-1' },
-					data: expect.objectContaining({ displayName: 'Alice Updated' }),
-				}),
-			);
+			expect(mockMutateAsync).toHaveBeenCalledWith({
+				pathParams: { id: 'user-1' },
+				data: { displayName: 'Alice Updated' },
+			});
+			expect(onComplete).toHaveBeenCalled();
+		});
+	});
+
+	it('does not close the drawer after a successful save', async () => {
+		const onClose = jest.fn();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		renderDrawer({ onClose });
+
+		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(
+				screen.getByRole('button', { name: /save member details/i }),
+			).toBeInTheDocument();
+		});
+		expect(onClose).not.toHaveBeenCalled();
+	});
+
+	it('selecting a different role calls setRole with the new role name', async () => {
+		const onComplete = jest.fn();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockSet = jest.fn().mockResolvedValue({});
+
+		(useSetRoleByUserID as jest.Mock).mockReturnValue({
+			mutateAsync: mockSet,
+			isLoading: false,
+		});
+
+		renderDrawer({ onComplete });
+
+		// Open the roles dropdown and select signoz-editor
+		await user.click(screen.getByLabelText('Roles'));
+		await user.click(await screen.findByTitle('signoz-editor'));
+
+		const saveBtn = screen.getByRole('button', { name: /save member details/i });
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await user.click(saveBtn);
+
+		await waitFor(() => {
+			expect(mockSet).toHaveBeenCalledWith({
+				pathParams: { id: 'user-1' },
+				data: { name: 'signoz-editor' },
+			});
+			expect(onComplete).toHaveBeenCalled();
+		});
+	});
+
+	it('does not call removeRole when the role is changed', async () => {
+		const onComplete = jest.fn();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockSet = jest.fn().mockResolvedValue({});
+
+		(useSetRoleByUserID as jest.Mock).mockReturnValue({
+			mutateAsync: mockSet,
+			isLoading: false,
+		});
+
+		renderDrawer({ onComplete });
+
+		// Switch from signoz-admin to signoz-viewer using single-select
+		await user.click(screen.getByLabelText('Roles'));
+		await user.click(await screen.findByTitle('signoz-viewer'));
+
+		const saveBtn = screen.getByRole('button', { name: /save member details/i });
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await user.click(saveBtn);
+
+		await waitFor(() => {
+			expect(mockSet).toHaveBeenCalledWith({
+				pathParams: { id: 'user-1' },
+				data: { name: 'signoz-viewer' },
+			});
 			expect(onComplete).toHaveBeenCalled();
 		});
 	});
@@ -239,16 +387,33 @@ describe('EditMemberDrawer', () => {
 		});
 	});
 
-	it('calls update API when saving changes for an invited member', async () => {
+	it('calls updateUser when saving name change for an invited member', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockMutateAsync = jest.fn().mockResolvedValue({});
 
-		(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
-			mutate: mockUpdateMutate.mockImplementation(() => {
-				options?.mutation?.onSuccess?.();
-			}),
+		(useGetUser as jest.Mock).mockReturnValue({
+			data: {
+				data: {
+					...mockFetchedUser.data,
+					id: 'abc123',
+					displayName: 'Bob',
+					userRoles: [
+						{
+							id: 'ur-2',
+							roleId: managedRoles[2].id,
+							role: managedRoles[2], // signoz-viewer
+						},
+					],
+				},
+			},
 			isLoading: false,
-		}));
+			refetch: jest.fn(),
+		});
+		(useUpdateUser as jest.Mock).mockReturnValue({
+			mutateAsync: mockMutateAsync,
+			isLoading: false,
+		});
 
 		renderDrawer({ member: { ...invitedMember, name: 'Bob' }, onComplete });
 
@@ -261,12 +426,10 @@ describe('EditMemberDrawer', () => {
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(mockUpdateMutate).toHaveBeenCalledWith(
-				expect.objectContaining({
-					pathParams: { id: 'abc123' },
-					data: expect.objectContaining({ displayName: 'Bob Updated' }),
-				}),
-			);
+			expect(mockMutateAsync).toHaveBeenCalledWith({
+				pathParams: { id: 'abc123' },
+				data: { displayName: 'Bob Updated' },
+			});
 			expect(onComplete).toHaveBeenCalled();
 		});
 	});
@@ -280,16 +443,13 @@ describe('EditMemberDrawer', () => {
 			} as ReturnType<typeof convertToApiError>);
 		});
 
-		it('shows API error message when updateUser fails', async () => {
+		it('shows SaveErrorItem when updateUser fails for name change', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const mockToast = jest.mocked(toast);
 
-			(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
-				mutate: mockUpdateMutate.mockImplementation(() => {
-					options?.mutation?.onError?.({});
-				}),
+			(useUpdateUser as jest.Mock).mockReturnValue({
+				mutateAsync: jest.fn().mockRejectedValue(new Error('server error')),
 				isLoading: false,
-			}));
+			});
 
 			renderDrawer();
 
@@ -302,16 +462,14 @@ describe('EditMemberDrawer', () => {
 			await user.click(saveBtn);
 
 			await waitFor(() => {
-				expect(mockToast.error).toHaveBeenCalledWith(
-					'Failed to update member details: Something went wrong on server',
-					expect.anything(),
-				);
+				expect(
+					screen.getByText('Name update: Something went wrong on server'),
+				).toBeInTheDocument();
 			});
 		});
 
 		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(() => {
@@ -329,16 +487,20 @@ describe('EditMemberDrawer', () => {
 			await user.click(confirmBtns[confirmBtns.length - 1]);
 
 			await waitFor(() => {
-				expect(mockToast.error).toHaveBeenCalledWith(
-					'Failed to delete member: Something went wrong on server',
-					expect.anything(),
+				expect(showErrorModal).toHaveBeenCalledWith(
+					expect.objectContaining({
+						getErrorMessage: expect.any(Function),
+					}),
+				);
+				const passedError = showErrorModal.mock.calls[0][0] as any;
+				expect(passedError.getErrorMessage()).toBe(
+					'Something went wrong on server',
 				);
 			});
 		});
 
 		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(() => {
@@ -356,14 +518,109 @@ describe('EditMemberDrawer', () => {
 			await user.click(confirmBtns[confirmBtns.length - 1]);
 
 			await waitFor(() => {
-				expect(mockToast.error).toHaveBeenCalledWith(
-					'Failed to revoke invite: Something went wrong on server',
-					expect.anything(),
+				expect(showErrorModal).toHaveBeenCalledWith(
+					expect.objectContaining({
+						getErrorMessage: expect.any(Function),
+					}),
+				);
+				const passedError = showErrorModal.mock.calls[0][0] as any;
+				expect(passedError.getErrorMessage()).toBe(
+					'Something went wrong on server',
 				);
 			});
 		});
 	});
 
+	describe('self user (isSelf)', () => {
+		it('disables Delete button when viewing own profile', () => {
+			renderDrawer({ member: selfMember });
+			expect(
+				screen.getByRole('button', { name: /delete member/i }),
+			).toBeDisabled();
+		});
+
+		it('does not open delete confirm dialog when Delete is clicked while disabled (isSelf)', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderDrawer({ member: selfMember });
+
+			await user.click(screen.getByRole('button', { name: /delete member/i }));
+
+			expect(
+				screen.queryByText(/are you sure you want to delete/i),
+			).not.toBeInTheDocument();
+		});
+
+		it('keeps name input enabled when viewing own profile', () => {
+			renderDrawer({ member: selfMember });
+			expect(screen.getByDisplayValue('Alice Smith')).not.toBeDisabled();
+		});
+
+		it('keeps Reset Link button enabled when viewing own profile', () => {
+			renderDrawer({ member: selfMember });
+			expect(
+				screen.getByRole('button', { name: /generate password reset link/i }),
+			).not.toBeDisabled();
+		});
+	});
+
+	describe('root user', () => {
+		beforeEach(() => {
+			(useGetUser as jest.Mock).mockReturnValue({
+				data: rootMockFetchedUser,
+				isLoading: false,
+				refetch: jest.fn(),
+			});
+		});
+
+		it('disables name input for root user', () => {
+			renderDrawer();
+			expect(screen.getByDisplayValue('Alice Smith')).toBeDisabled();
+		});
+
+		it('disables Delete button for root user', () => {
+			renderDrawer();
+			expect(
+				screen.getByRole('button', { name: /delete member/i }),
+			).toBeDisabled();
+		});
+
+		it('disables Reset Link button for root user', () => {
+			renderDrawer();
+			expect(
+				screen.getByRole('button', { name: /generate password reset link/i }),
+			).toBeDisabled();
+		});
+
+		it('disables Save button for root user', () => {
+			renderDrawer();
+			expect(
+				screen.getByRole('button', { name: /save member details/i }),
+			).toBeDisabled();
+		});
+
+		it('does not open delete confirm dialog when Delete is clicked while disabled (root)', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderDrawer();
+
+			await user.click(screen.getByRole('button', { name: /delete member/i }));
+
+			expect(
+				screen.queryByText(/are you sure you want to delete/i),
+			).not.toBeInTheDocument();
+		});
+
+		it('does not call getResetPasswordToken when Reset Link is clicked while disabled (root)', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderDrawer();
+
+			await user.click(
+				screen.getByRole('button', { name: /generate password reset link/i }),
+			);
+
+			expect(mockGetResetPasswordToken).not.toHaveBeenCalled();
+		});
+	});
+
 	describe('Generate Password Reset Link', () => {
 		beforeEach(() => {
 			mockCopyToClipboard.mockClear();

frontend/src/components/ErrorModal/components/ErrorContent.tsx

@@ -10,7 +10,12 @@ import APIError from 'types/api/error';
 import './ErrorContent.styles.scss';
 
 interface ErrorContentProps {
-	error: APIError;
+	error:
+		| APIError
+		| {
+				code: number;
+				message: string;
+		  };
 	icon?: ReactNode;
 }
 
@@ -20,7 +25,15 @@ function ErrorContent({ error, icon }: ErrorContentProps): JSX.Element {
 		errors: errorMessages,
 		code: errorCode,
 		message: errorMessage,
-	} = error?.error?.error || {};
+	} =
+		error && 'error' in error
+			? error?.error?.error || {}
+			: {
+					url: undefined,
+					errors: [],
+					code: error.code || 500,
+					message: error.message || 'Something went wrong',
+			  };
 	return (
 		<section className="error-content">
 			{/* Summary Header */}

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/sonner';
 import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { handleContactSupport } from 'pages/Integrations/utils';
 
 function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	const [activeTab, setActiveTab] = useState('feedback');

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -4,8 +4,8 @@ import { toast } from '@signozhq/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
-import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { handleContactSupport } from 'pages/Integrations/utils';
 
 import FeedbackModal from '../FeedbackModal';
 
@@ -30,7 +30,7 @@ jest.mock('hooks/useGetTenantLicense', () => ({
 	useGetTenantLicense: jest.fn(),
 }));
 
-jest.mock('container/Integrations/utils', () => ({
+jest.mock('pages/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -10,6 +10,7 @@ import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
 import { cloneDeep, debounce } from 'lodash-es';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
@@ -40,6 +41,8 @@ function InviteMembersModal({
 	onClose,
 	onComplete,
 }: InviteMembersModalProps): JSX.Element {
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
+
 	const [rows, setRows] = useState<InviteRow[]>(() => [
 		EMPTY_ROW(),
 		EMPTY_ROW(),
@@ -197,17 +200,18 @@ function InviteMembersModal({
 					})),
 				});
 			}
-			toast.success('Invites sent successfully', { richColors: true });
+			toast.success('Invites sent successfully', {
+				richColors: true,
+				position: 'top-right',
+			});
 			resetAndClose();
 			onComplete?.();
 		} catch (err) {
-			const apiErr = err as APIError;
-			const errorMessage = apiErr?.getErrorMessage?.() ?? 'An error occurred';
-			toast.error(errorMessage, { richColors: true });
+			showErrorModal(err as APIError);
 		} finally {
 			setIsSubmitting(false);
 		}
-	}, [rows, onComplete, resetAndClose, validateAllUsers]);
+	}, [validateAllUsers, rows, resetAndClose, onComplete, showErrorModal]);
 
 	const touchedRows = rows.filter(isRowTouched);
 	const isSubmitDisabled = isSubmitting || touchedRows.length === 0;
@@ -224,7 +228,7 @@ function InviteMembersModal({
 			showCloseButton
 			width="wide"
 			className="invite-members-modal"
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<div className="invite-members-modal__content">
 				<div className="invite-members-modal__table">
@@ -326,6 +330,7 @@ function InviteMembersModal({
 						size="sm"
 						onClick={handleSubmit}
 						disabled={isSubmitDisabled}
+						loading={isSubmitting}
 					>
 						{isSubmitting ? 'Inviting...' : 'Invite Team Members'}
 					</Button>

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

@@ -1,4 +1,3 @@
-import { toast } from '@signozhq/sonner';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
 import { StatusCodes } from 'http-status-codes';
@@ -22,6 +21,16 @@ jest.mock('@signozhq/sonner', () => ({
 	},
 }));
 
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+		isErrorModalVisible: false,
+	})),
+}));
+
 const mockSendInvite = jest.mocked(sendInvite);
 const mockInviteUsers = jest.mocked(inviteUsers);
 
@@ -34,6 +43,7 @@ const defaultProps = {
 describe('InviteMembersModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
+		showErrorModal.mockClear();
 		mockSendInvite.mockResolvedValue({
 			httpStatusCode: 200,
 			data: { data: 'test', status: 'success' },
@@ -154,9 +164,10 @@ describe('InviteMembersModal', () => {
 	describe('error handling', () => {
 		it('shows BE message on single invite 409', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			mockSendInvite.mockRejectedValue(
-				makeApiError('An invite already exists for this email: single@signoz.io'),
+			const error = makeApiError(
+				'An invite already exists for this email: single@signoz.io',
 			);
+			mockSendInvite.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -171,18 +182,16 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(toast.error).toHaveBeenCalledWith(
-					'An invite already exists for this email: single@signoz.io',
-					expect.anything(),
-				);
+				expect(showErrorModal).toHaveBeenCalledWith(error);
 			});
 		});
 
 		it('shows BE message on bulk invite 409', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			mockInviteUsers.mockRejectedValue(
-				makeApiError('An invite already exists for this email: alice@signoz.io'),
+			const error = makeApiError(
+				'An invite already exists for this email: alice@signoz.io',
 			);
+			mockInviteUsers.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -201,18 +210,17 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(toast.error).toHaveBeenCalledWith(
-					'An invite already exists for this email: alice@signoz.io',
-					expect.anything(),
-				);
+				expect(showErrorModal).toHaveBeenCalledWith(error);
 			});
 		});
 
 		it('shows BE message on generic error', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			mockSendInvite.mockRejectedValue(
-				makeApiError('Internal server error', StatusCodes.INTERNAL_SERVER_ERROR),
+			const error = makeApiError(
+				'Internal server error',
+				StatusCodes.INTERNAL_SERVER_ERROR,
 			);
+			mockSendInvite.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -227,10 +235,7 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(toast.error).toHaveBeenCalledWith(
-					'Internal server error',
-					expect.anything(),
-				);
+				expect(showErrorModal).toHaveBeenCalledWith(error);
 			});
 		});
 	});

frontend/src/components/MembersTable/MembersTable.tsx

@@ -4,9 +4,7 @@ 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';
-import { capitalize } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
 
 import './MembersTable.styles.scss';
 
@@ -14,7 +12,6 @@ export interface MemberRow {
 	id: string;
 	name?: string;
 	email: string;
-	role: ROLES;
 	status: MemberStatus;
 	joinedOn: string | null;
 	updatedAt?: string | null;
@@ -141,17 +138,6 @@ function MembersTable({
 				<NameEmailCell name={record.name} email={record.email} />
 			),
 		},
-		{
-			title: 'Roles',
-			dataIndex: 'role',
-			key: 'role',
-			width: 180,
-			sorter: (a, b): number => a.role.localeCompare(b.role),
-			render: (role: ROLES): JSX.Element => (
-				<Badge color="vanilla">{capitalize(role)}</Badge>
-			),
-		},
-
 		{
 			title: 'Status',
 			dataIndex: 'status',
@@ -224,7 +210,7 @@ function MembersTable({
 					index % 2 === 0 ? 'members-table-row--tinted' : ''
 				}
 				onRow={(record): React.HTMLAttributes<HTMLElement> => {
-					const isClickable = onRowClick && record.status !== MemberStatus.Deleted;
+					const isClickable = !!onRowClick;
 					return {
 						onClick: (): void => {
 							if (isClickable) {

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

@@ -1,6 +1,5 @@
 import { MemberStatus } from 'container/MembersSettings/utils';
 import { render, screen, userEvent } from 'tests/test-utils';
-import { ROLES } from 'types/roles';
 
 import MembersTable, { MemberRow } from '../MembersTable';
 
@@ -9,7 +8,6 @@ const mockActiveMembers: MemberRow[] = [
 		id: 'user-1',
 		name: 'Alice Smith',
 		email: 'alice@signoz.io',
-		role: 'ADMIN' as ROLES,
 		status: MemberStatus.Active,
 		joinedOn: '1700000000000',
 	},
@@ -17,7 +15,6 @@ const mockActiveMembers: MemberRow[] = [
 		id: 'user-2',
 		name: 'Bob Jones',
 		email: 'bob@signoz.io',
-		role: 'VIEWER' as ROLES,
 		status: MemberStatus.Active,
 		joinedOn: null,
 	},
@@ -27,7 +24,6 @@ const mockInvitedMember: MemberRow = {
 	id: 'inv-abc',
 	name: '',
 	email: 'charlie@signoz.io',
-	role: 'EDITOR' as ROLES,
 	status: MemberStatus.Invited,
 	joinedOn: null,
 };
@@ -47,12 +43,11 @@ describe('MembersTable', () => {
 		jest.clearAllMocks();
 	});
 
-	it('renders member rows with name, email, role badge, and ACTIVE status', () => {
+	it('renders member rows with name, email, and ACTIVE status', () => {
 		render(<MembersTable {...defaultProps} data={mockActiveMembers} />);
 
 		expect(screen.getByText('Alice Smith')).toBeInTheDocument();
 		expect(screen.getByText('alice@signoz.io')).toBeInTheDocument();
-		expect(screen.getByText('Admin')).toBeInTheDocument();
 		expect(screen.getAllByText('ACTIVE')).toHaveLength(2);
 	});
 
@@ -67,7 +62,6 @@ describe('MembersTable', () => {
 
 		expect(screen.getByText('INVITED')).toBeInTheDocument();
 		expect(screen.getByText('charlie@signoz.io')).toBeInTheDocument();
-		expect(screen.getByText('Editor')).toBeInTheDocument();
 	});
 
 	it('calls onRowClick with the member data when a row is clicked', async () => {
@@ -92,14 +86,13 @@ describe('MembersTable', () => {
 		);
 	});
 
-	it('renders DELETED badge and does not call onRowClick when a deleted member row is clicked', async () => {
+	it('renders DELETED badge and calls 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,
 		};
@@ -115,7 +108,7 @@ describe('MembersTable', () => {
 
 		expect(screen.getByText('DELETED')).toBeInTheDocument();
 		await user.click(screen.getByText('Dave Deleted'));
-		expect(onRowClick).not.toHaveBeenCalledWith(
+		expect(onRowClick).toHaveBeenCalledWith(
 			expect.objectContaining({ id: 'user-del' }),
 		);
 	});

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

@@ -88,3 +88,13 @@
 		color: var(--destructive);
 	}
 }
+
+.roles-single-select {
+	.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;
+	}
+}

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -85,7 +85,8 @@ interface BaseProps {
 interface SingleProps extends BaseProps {
 	mode?: 'single';
 	value?: string;
-	onChange?: (role: string) => void;
+	onChange?: (role: string | undefined) => void;
+	allowClear?: boolean;
 }
 
 interface MultipleProps extends BaseProps {
@@ -154,14 +155,15 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 		);
 	}
 
-	const { value, onChange } = props as SingleProps;
+	const { value, onChange, allowClear = true } = props as SingleProps;
 	return (
 		<Select
 			id={id}
-			value={value}
+			value={value || undefined}
 			onChange={onChange}
 			placeholder={placeholder}
-			className={cx('roles-select', className)}
+			allowClear={allowClear}
+			className={cx('roles-single-select', className)}
 			loading={loading}
 			notFoundContent={notFoundContent}
 			options={options}

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

@@ -17,6 +17,8 @@ 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 { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 import KeyCreatedPhase from './KeyCreatedPhase';
 import KeyFormPhase from './KeyFormPhase';
@@ -27,6 +29,7 @@ import './AddKeyModal.styles.scss';
 
 function AddKeyModal(): JSX.Element {
 	const queryClient = useQueryClient();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [accountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [isAddKeyOpen, setIsAddKeyOpen] = useQueryState(
 		SA_QUERY_PARAMS.ADD_KEY,
@@ -81,11 +84,11 @@ function AddKeyModal(): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to create key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -151,7 +154,7 @@ function AddKeyModal(): JSX.Element {
 			width="base"
 			className="add-key-modal"
 			showCloseButton
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			{phase === Phase.FORM && (
 				<KeyFormPhase

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -16,9 +16,12 @@ import type {
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { parseAsBoolean, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 function DeleteAccountModal(): JSX.Element {
 	const queryClient = useQueryClient();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [accountId, setAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [isDeleteOpen, setIsDeleteOpen] = useQueryState(
 		SA_QUERY_PARAMS.DELETE_SA,
@@ -45,11 +48,11 @@ function DeleteAccountModal(): JSX.Element {
 				await invalidateListServiceAccounts(queryClient);
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to delete service account';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -79,7 +82,7 @@ function DeleteAccountModal(): JSX.Element {
 			width="narrow"
 			className="alert-dialog sa-delete-dialog"
 			showCloseButton={false}
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<p className="sa-delete-dialog__body">
 				Are you sure you want to delete <strong>{accountName}</strong>? This action

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

@@ -17,7 +17,9 @@ import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import dayjs from 'dayjs';
 import { parseAsString, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
+import APIError from 'types/api/error';
 
 import { RevokeKeyContent } from '../RevokeKeyModal';
 import EditKeyForm from './EditKeyForm';
@@ -41,6 +43,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 	const open = !!editKeyId && !!selectedAccountId;
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [isRevokeConfirmOpen, setIsRevokeConfirmOpen] = useState(false);
 
 	const {
@@ -78,11 +81,11 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to update key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -102,12 +105,13 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 					});
 				}
 			},
+			// eslint-disable-next-line sonarjs/no-identical-functions
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to revoke key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -160,7 +164,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 				isRevokeConfirmOpen ? 'alert-dialog delete-dialog' : 'edit-key-modal'
 			}
 			showCloseButton={!isRevokeConfirmOpen}
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			{isRevokeConfirmOpen ? (
 				<RevokeKeyContent

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -16,8 +16,8 @@ interface OverviewTabProps {
 	account: ServiceAccountRow;
 	localName: string;
 	onNameChange: (v: string) => void;
-	localRoles: string[];
-	onRolesChange: (v: string[]) => void;
+	localRole: string;
+	onRoleChange: (v: string | undefined) => void;
 	isDisabled: boolean;
 	availableRoles: AuthtypesRoleDTO[];
 	rolesLoading?: boolean;
@@ -31,8 +31,8 @@ function OverviewTab({
 	account,
 	localName,
 	onNameChange,
-	localRoles,
-	onRolesChange,
+	localRole,
+	onRoleChange,
 	isDisabled,
 	availableRoles,
 	rolesLoading,
@@ -96,15 +96,10 @@ function OverviewTab({
 				{isDisabled ? (
 					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
 						<div className="sa-drawer__disabled-roles">
-							{localRoles.length > 0 ? (
-								localRoles.map((roleId) => {
-									const role = availableRoles.find((r) => r.id === roleId);
-									return (
-										<Badge key={roleId} color="vanilla">
-											{role?.name ?? roleId}
-										</Badge>
-									);
-								})
+							{localRole ? (
+								<Badge color="vanilla">
+									{availableRoles.find((r) => r.id === localRole)?.name ?? localRole}
+								</Badge>
 							) : (
 								<span className="sa-drawer__input-text">—</span>
 							)}
@@ -114,15 +109,14 @@ function OverviewTab({
 				) : (
 					<RolesSelect
 						id="sa-roles"
-						mode="multiple"
 						roles={availableRoles}
 						loading={rolesLoading}
 						isError={rolesError}
 						error={rolesErrorObj}
 						onRefetch={onRefetchRoles}
-						value={localRoles}
-						onChange={onRolesChange}
-						placeholder="Select roles"
+						value={localRole}
+						onChange={onRoleChange}
+						placeholder="Select role"
 					/>
 				)}
 			</div>

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -16,6 +16,8 @@ import type {
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { parseAsString, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 export interface RevokeKeyContentProps {
 	isRevoking: boolean;
@@ -56,6 +58,7 @@ export function RevokeKeyContent({
 
 function RevokeKeyModal(): JSX.Element {
 	const queryClient = useQueryClient();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [accountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [revokeKeyId, setRevokeKeyId] = useQueryState(
 		SA_QUERY_PARAMS.REVOKE_KEY,
@@ -83,11 +86,11 @@ function RevokeKeyModal(): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to revoke key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -115,7 +118,7 @@ function RevokeKeyModal(): JSX.Element {
 			width="narrow"
 			className="alert-dialog delete-dialog"
 			showCloseButton={false}
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<RevokeKeyContent
 				isRevoking={isRevoking}

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { Button } from '@signozhq/button';
 import { DrawerWrapper } from '@signozhq/drawer';
@@ -8,7 +8,9 @@ import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
+	getGetServiceAccountRolesQueryKey,
 	getListServiceAccountsQueryKey,
+	useDeleteServiceAccountRole,
 	useGetServiceAccount,
 	useListServiceAccountKeys,
 	useUpdateServiceAccount,
@@ -23,7 +25,10 @@ import {
 	ServiceAccountStatus,
 	toServiceAccountRow,
 } from 'container/ServiceAccountsSettings/utils';
-import { useServiceAccountRoleManager } from 'hooks/serviceAccount/useServiceAccountRoleManager';
+import {
+	RoleUpdateFailure,
+	useServiceAccountRoleManager,
+} from 'hooks/serviceAccount/useServiceAccountRoleManager';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -32,7 +37,7 @@ import {
 	useQueryState,
 } from 'nuqs';
 import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
+import { retryOn429, toAPIError } from 'utils/errorUtils';
 
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
@@ -49,6 +54,13 @@ export interface ServiceAccountDrawerProps {
 
 const PAGE_SIZE = 15;
 
+function toSaveApiError(err: unknown): APIError {
+	return (
+		convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
+		toAPIError(err as AxiosError<RenderErrorResponseDTO>)
+	);
+}
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function ServiceAccountDrawer({
 	onSuccess,
@@ -80,7 +92,7 @@ function ServiceAccountDrawer({
 		parseAsBoolean.withDefault(false),
 	);
 	const [localName, setLocalName] = useState('');
-	const [localRoles, setLocalRoles] = useState<string[]>([]);
+	const [localRole, setLocalRole] = useState('');
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
 
@@ -103,21 +115,35 @@ function ServiceAccountDrawer({
 		[accountData],
 	);
 
-	const { currentRoles, applyDiff } = useServiceAccountRoleManager(
-		selectedAccountId ?? '',
-	);
+	const {
+		currentRoles,
+		isLoading: isRolesLoading,
+		applyDiff,
+	} = useServiceAccountRoleManager(selectedAccountId ?? '');
+
+	const roleSessionRef = useRef<string | null>(null);
 
 	useEffect(() => {
 		if (account?.id) {
 			setLocalName(account?.name ?? '');
 			setKeysPage(1);
 		}
-		setSaveErrors([]);
 	}, [account?.id, account?.name, setKeysPage]);
 
 	useEffect(() => {
-		setLocalRoles(currentRoles.map((r) => r.id).filter(Boolean) as string[]);
-	}, [currentRoles]);
+		if (account?.id) {
+			setSaveErrors([]);
+		}
+	}, [account?.id]);
+
+	useEffect(() => {
+		if (!account?.id) {
+			roleSessionRef.current = null;
+		} else if (account.id !== roleSessionRef.current && !isRolesLoading) {
+			setLocalRole(currentRoles[0]?.id ?? '');
+			roleSessionRef.current = account.id;
+		}
+	}, [account?.id, currentRoles, isRolesLoading]);
 
 	const isDeleted =
 		account?.status?.toUpperCase() === ServiceAccountStatus.Deleted;
@@ -125,8 +151,7 @@ function ServiceAccountDrawer({
 	const isDirty =
 		account !== null &&
 		(localName !== (account.name ?? '') ||
-			JSON.stringify([...localRoles].sort()) !==
-				JSON.stringify([...currentRoles.map((r) => r.id).filter(Boolean)].sort()));
+			localRole !== (currentRoles[0]?.id ?? ''));
 
 	const {
 		roles: availableRoles,
@@ -154,12 +179,26 @@ function ServiceAccountDrawer({
 
 	// the retry for this mutation is safe due to the api being idempotent on backend
 	const { mutateAsync: updateMutateAsync } = useUpdateServiceAccount();
+	const { mutateAsync: deleteRole } = useDeleteServiceAccountRole({
+		mutation: {
+			retry: retryOn429,
+		},
+	});
 
-	const toSaveApiError = useCallback(
-		(err: unknown): APIError =>
-			convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
-			toAPIError(err as AxiosError<RenderErrorResponseDTO>),
-		[],
+	const executeRolesOperation = useCallback(
+		async (accountId: string): Promise<RoleUpdateFailure[]> => {
+			if (localRole === '' && currentRoles[0]?.id) {
+				await deleteRole({
+					pathParams: { id: accountId, rid: currentRoles[0].id },
+				});
+				await queryClient.invalidateQueries(
+					getGetServiceAccountRolesQueryKey({ id: accountId }),
+				);
+				return [];
+			}
+			return applyDiff([localRole].filter(Boolean), availableRoles);
+		},
+		[localRole, currentRoles, availableRoles, applyDiff, deleteRole, queryClient],
 	);
 
 	const retryNameUpdate = useCallback(async (): Promise<void> => {
@@ -181,14 +220,7 @@ function ServiceAccountDrawer({
 				),
 			);
 		}
-	}, [
-		account,
-		localName,
-		updateMutateAsync,
-		refetchAccount,
-		queryClient,
-		toSaveApiError,
-	]);
+	}, [account, localName, updateMutateAsync, refetchAccount, queryClient]);
 
 	const handleNameChange = useCallback((name: string): void => {
 		setLocalName(name);
@@ -211,26 +243,39 @@ function ServiceAccountDrawer({
 				);
 			}
 		},
-		[toSaveApiError],
+		[],
+	);
+
+	const clearRoleErrors = useCallback((): void => {
+		setSaveErrors((prev) =>
+			prev.filter(
+				(e) => e.context !== 'Roles update' && !e.context.startsWith("Role '"),
+			),
+		);
+	}, []);
+
+	const failuresToSaveErrors = useCallback(
+		(failures: RoleUpdateFailure[]): SaveError[] =>
+			failures.map((f) => {
+				const ctx = `Role '${f.roleName}'`;
+				return {
+					context: ctx,
+					apiError: toSaveApiError(f.error),
+					onRetry: makeRoleRetry(ctx, f.onRetry),
+				};
+			}),
+		[makeRoleRetry],
 	);
 
 	const retryRolesUpdate = useCallback(async (): Promise<void> => {
 		try {
-			const failures = await applyDiff(localRoles, availableRoles);
+			const failures = await executeRolesOperation(selectedAccountId ?? '');
 			if (failures.length === 0) {
 				setSaveErrors((prev) => prev.filter((e) => e.context !== 'Roles update'));
 			} else {
 				setSaveErrors((prev) => {
 					const rest = prev.filter((e) => e.context !== 'Roles update');
-					const roleErrors = failures.map((f) => {
-						const ctx = `Role '${f.roleName}'`;
-						return {
-							context: ctx,
-							apiError: toSaveApiError(f.error),
-							onRetry: makeRoleRetry(ctx, f.onRetry),
-						};
-					});
-					return [...rest, ...roleErrors];
+					return [...rest, ...failuresToSaveErrors(failures)];
 				});
 			}
 		} catch (err) {
@@ -240,7 +285,7 @@ function ServiceAccountDrawer({
 				),
 			);
 		}
-	}, [localRoles, availableRoles, applyDiff, toSaveApiError, makeRoleRetry]);
+	}, [selectedAccountId, executeRolesOperation, failuresToSaveErrors]);
 
 	const handleSave = useCallback(async (): Promise<void> => {
 		if (!account || !isDirty) {
@@ -259,7 +304,7 @@ function ServiceAccountDrawer({
 
 			const [nameResult, rolesResult] = await Promise.allSettled([
 				namePromise,
-				applyDiff(localRoles, availableRoles),
+				executeRolesOperation(account.id),
 			]);
 
 			const errors: SaveError[] = [];
@@ -279,14 +324,7 @@ function ServiceAccountDrawer({
 					onRetry: retryRolesUpdate,
 				});
 			} else {
-				for (const failure of rolesResult.value) {
-					const context = `Role '${failure.roleName}'`;
-					errors.push({
-						context,
-						apiError: toSaveApiError(failure.error),
-						onRetry: makeRoleRetry(context, failure.onRetry),
-					});
-				}
+				errors.push(...failuresToSaveErrors(rolesResult.value));
 			}
 
 			if (errors.length > 0) {
@@ -294,6 +332,7 @@ function ServiceAccountDrawer({
 			} else {
 				toast.success('Service account updated successfully', {
 					richColors: true,
+					position: 'top-right',
 				});
 				onSuccess({ closeDrawer: false });
 			}
@@ -307,17 +346,14 @@ function ServiceAccountDrawer({
 		account,
 		isDirty,
 		localName,
-		localRoles,
-		availableRoles,
 		updateMutateAsync,
-		applyDiff,
+		executeRolesOperation,
 		refetchAccount,
 		onSuccess,
 		queryClient,
-		toSaveApiError,
 		retryNameUpdate,
-		makeRoleRetry,
 		retryRolesUpdate,
+		failuresToSaveErrors,
 	]);
 
 	const handleClose = useCallback((): void => {
@@ -409,8 +445,11 @@ function ServiceAccountDrawer({
 								account={account}
 								localName={localName}
 								onNameChange={handleNameChange}
-								localRoles={localRoles}
-								onRolesChange={setLocalRoles}
+								localRole={localRole}
+								onRoleChange={(role): void => {
+									setLocalRole(role ?? '');
+									clearRoleErrors();
+								}}
 								isDisabled={isDeleted}
 								availableRoles={availableRoles}
 								rolesLoading={rolesLoading}

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

@@ -139,20 +139,20 @@ describe('ServiceAccountDrawer', () => {
 		});
 	});
 
-	it('changing roles enables Save; clicking Save sends updated roles in payload', async () => {
-		const updateSpy = jest.fn();
+	it('changing roles enables Save; clicking Save sends role add request without delete', async () => {
 		const roleSpy = jest.fn();
+		const deleteSpy = 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: {} }));
-			}),
 			rest.post(SA_ROLES_ENDPOINT, async (req, res, ctx) => {
 				roleSpy(await req.json());
 				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
 			}),
+			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => {
+				deleteSpy();
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+			}),
 		);
 
 		renderDrawer();
@@ -167,12 +167,12 @@ describe('ServiceAccountDrawer', () => {
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(updateSpy).not.toHaveBeenCalled();
 			expect(roleSpy).toHaveBeenCalledWith(
 				expect.objectContaining({
 					id: '019c24aa-2248-7585-a129-4188b3473c27',
 				}),
 			);
+			expect(deleteSpy).not.toHaveBeenCalled();
 		});
 	});
 
@@ -350,7 +350,7 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 		).toBeInTheDocument();
 	});
 
-	it('role update failure shows SaveErrorItem with the role name context', async () => {
+	it('role add failure shows SaveErrorItem with the role name context', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		server.use(
@@ -390,6 +390,42 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 		).toBeInTheDocument();
 	});
 
+	it('role add retries on 429 then succeeds without showing an error', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let roleAddCallCount = 0;
+
+		// First call → 429, second call → 200
+		server.use(
+			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) => {
+				roleAddCallCount += 1;
+				if (roleAddCallCount === 1) {
+					return res(ctx.status(429), ctx.json({ message: 'Too Many Requests' }));
+				}
+				return res(ctx.status(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);
+
+		// Retried after 429 — at least 2 calls, no error shown
+		await waitFor(
+			() => {
+				expect(roleAddCallCount).toBeGreaterThanOrEqual(2);
+			},
+			{ timeout: 5000 },
+		);
+		expect(screen.queryByText(/role assign failed/i)).not.toBeInTheDocument();
+	});
+
 	it('clicking Retry on a name-update error re-triggers the request; on success the error item is removed', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 

frontend/src/constants/reactQueryKeys.ts

@@ -1,19 +1,4 @@
 export const REACT_QUERY_KEY = {
-	// Cloud Integration Query Keys
-	CLOUD_INTEGRATION_ACCOUNTS: 'CLOUD_INTEGRATION_ACCOUNTS',
-	CLOUD_INTEGRATION_SERVICES: 'CLOUD_INTEGRATION_SERVICES',
-	CLOUD_INTEGRATION_SERVICE_DETAILS: 'CLOUD_INTEGRATION_SERVICE_DETAILS',
-	CLOUD_INTEGRATION_ACCOUNT_STATUS: 'CLOUD_INTEGRATION_ACCOUNT_STATUS',
-	CLOUD_INTEGRATION_UPDATE_ACCOUNT_CONFIG:
-		'CLOUD_INTEGRATION_UPDATE_ACCOUNT_CONFIG',
-	CLOUD_INTEGRATION_UPDATE_SERVICE_CONFIG:
-		'CLOUD_INTEGRATION_UPDATE_SERVICE_CONFIG',
-	CLOUD_INTEGRATION_GENERATE_CONNECTION_URL:
-		'CLOUD_INTEGRATION_GENERATE_CONNECTION_URL',
-	CLOUD_INTEGRATION_GET_CONNECTION_PARAMS:
-		'CLOUD_INTEGRATION_GET_CONNECTION_PARAMS',
-	CLOUD_INTEGRATION_GET_DEPLOYMENT_COMMANDS:
-		'CLOUD_INTEGRATION_GET_DEPLOYMENT_COMMANDS',
 	/**
 	 * For any query that should support AutoRefresh and min/max time is from DateTimeSelectionV2
 	 * You can prefix the query with this KEY, it will allow the queries to be automatically refreshed

frontend/src/constants/routes.ts

@@ -65,7 +65,6 @@ const ROUTES = {
 	WORKSPACE_SUSPENDED: '/workspace-suspended',
 	SHORTCUTS: '/settings/shortcuts',
 	INTEGRATIONS: '/integrations',
-	INTEGRATIONS_DETAIL: '/integrations/:integrationId',
 	MESSAGING_QUEUES_BASE: '/messaging-queues',
 	MESSAGING_QUEUES_KAFKA: '/messaging-queues/kafka',
 	MESSAGING_QUEUES_KAFKA_DETAIL: '/messaging-queues/kafka/detail',

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

@@ -0,0 +1,24 @@
+import {
+	IntegrationType,
+	RequestIntegrationBtn,
+} from 'pages/Integrations/RequestIntegrationBtn';
+
+import Header from './Header/Header';
+import HeroSection from './HeroSection/HeroSection';
+import ServicesTabs from './ServicesSection/ServicesTabs';
+
+function CloudIntegrationPage(): JSX.Element {
+	return (
+		<div>
+			<Header />
+			<HeroSection />
+			<RequestIntegrationBtn
+				type={IntegrationType.AWS_SERVICES}
+				message="Can't find the AWS service you're looking for? Request more integrations"
+			/>
+			<ServicesTabs />
+		</div>
+	);
+}
+
+export default CloudIntegrationPage;

frontend/src/container/CloudIntegrationPage/Header/Header.styles.scss

@@ -48,7 +48,7 @@
 
 .lightMode {
 	.cloud-header {
-		border-bottom: 1px solid var(--bg-vanilla-300);
+		border-bottom: 1px solid var(--bg-slate-300);
 
 		&__breadcrumb-title {
 			color: var(--bg-ink-400);

frontend/src/container/CloudIntegrationPage/Header/Header.tsx

@@ -1,13 +1,11 @@
 import { Link } from 'react-router-dom';
-import { Button } from '@signozhq/button';
-import Breadcrumb from 'antd/es/breadcrumb';
+import { Breadcrumb } from 'antd';
 import ROUTES from 'constants/routes';
-import { IntegrationType } from 'container/Integrations/types';
 import { Blocks, LifeBuoy } from 'lucide-react';
 
 import './Header.styles.scss';
 
-function Header({ title }: { title: IntegrationType }): JSX.Element {
+function Header(): JSX.Element {
 	return (
 		<div className="cloud-header">
 			<div className="cloud-header__navigation">
@@ -25,26 +23,25 @@ function Header({ title }: { title: IntegrationType }): JSX.Element {
 							),
 						},
 						{
-							title: <div className="cloud-header__breadcrumb-title">{title}</div>,
+							title: (
+								<div className="cloud-header__breadcrumb-title">
+									Amazon Web Services
+								</div>
+							),
 						},
 					]}
 				/>
 			</div>
 			<div className="cloud-header__actions">
-				<Button
-					variant="solid"
-					size="sm"
-					color="secondary"
-					onClick={(): void => {
-						window.open(
-							'https://signoz.io/blog/native-aws-integrations-with-autodiscovery/',
-							'_blank',
-						);
-					}}
-					prefixIcon={<LifeBuoy size={12} />}
+				<a
+					href="https://signoz.io/blog/native-aws-integrations-with-autodiscovery/"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="cloud-header__help"
 				>
+					<LifeBuoy size={12} />
 					Get Help
-				</Button>
+				</a>
 			</div>
 		</div>
 	);

frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.style.scss

@@ -1,10 +1,8 @@
 .hero-section {
-	padding: 16px;
-
+	height: 308px;
+	padding: 26px 16px;
 	display: flex;
-	flex-direction: column;
-	gap: 16px;
-
+	gap: 24px;
 	position: relative;
 	overflow: hidden;
 	background-position: right;
@@ -12,37 +10,35 @@
 	background-repeat: no-repeat;
 	border-bottom: 1px solid var(--bg-slate-500);
 
+	&__icon {
+		height: fit-content;
+		background-color: var(--bg-ink-400);
+		padding: 12px;
+		border: 1px solid var(--bg-ink-300);
+		border-radius: 6px;
+		width: 60px;
+		height: 60px;
+		display: flex;
+		align-items: center;
+		img {
+			width: 100%;
+		}
+	}
+
 	&__details {
 		display: flex;
 		flex-direction: column;
 		gap: 12px;
 
-		&-header {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			gap: 16px;
-
-			&__icon {
-				height: fit-content;
-				background-color: var(--bg-ink-400);
-				padding: 12px;
-				border: 1px solid var(--bg-ink-300);
-				border-radius: 6px;
-				width: 60px;
-				height: 60px;
-			}
-
-			&__title {
-				color: var(--bg-vanilla-100);
-				font-size: 24px;
-				font-weight: 500;
-				line-height: 20px;
-				letter-spacing: -0.12px;
-			}
+		.title {
+			color: var(--bg-vanilla-100);
+			font-size: 24px;
+			font-weight: 500;
+			line-height: 20px;
+			letter-spacing: -0.12px;
 		}
 
-		&__description {
+		.description {
 			color: var(--bg-vanilla-400);
 			font-size: 12px;
 			font-weight: 400;

frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx

@@ -0,0 +1,34 @@
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import AccountActions from './components/AccountActions';
+
+import './HeroSection.style.scss';
+
+function HeroSection(): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	return (
+		<div
+			className="hero-section"
+			style={
+				isDarkMode
+					? {
+							backgroundImage: `url('/Images/integrations-hero-bg.png')`,
+					  }
+					: {}
+			}
+		>
+			<div className="hero-section__icon">
+				<img src="/Logos/aws-dark.svg" alt="aws-logo" />
+			</div>
+			<div className="hero-section__details">
+				<div className="title">Amazon Web Services</div>
+				<div className="description">
+					One-click setup for AWS monitoring with SigNoz
+				</div>
+				<AccountActions />
+			</div>
+		</div>
+	);
+}
+
+export default HeroSection;

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.style.scss

@@ -4,56 +4,14 @@
 
 		&-with-account {
 			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-			gap: 16px;
-
-			border-radius: 4px;
-			border: 1px solid var(--l3-background);
-			background: var(--l1-background);
-
-			.selected-cloud-integration-account-status {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				border-right: 1px solid var(--l3-background);
-				border-radius: none;
-				width: 32px;
-			}
-
-			&-selector-container {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-
-				.account-selector-label {
-					color: var(--bg-vanilla-400);
-					font-size: 12px;
-					font-weight: 400;
-					line-height: 16px;
-					padding: 8px 16px;
-				}
-
-				.account-selector {
-					.ant-select {
-						background-color: transparent !important;
-						border: none !important;
-						box-shadow: none !important;
-
-						.ant-select-selector {
-							background: transparent !important;
-							border: none !important;
-							box-shadow: none !important;
-						}
-					}
-				}
-			}
+			flex-direction: column;
+			gap: 10px;
 		}
 	}
 
 	&__input-skeleton {
 		width: 300px;
+		margin-bottom: 16px;
 	}
 
 	&__new-account-button-skeleton {
@@ -64,13 +22,11 @@
 	&__account-settings-button-skeleton {
 		width: 140px;
 	}
-
 	&__action-buttons {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 	}
-
 	&__action-button {
 		font-family: 'Inter';
 		border-radius: 2px;
@@ -98,6 +54,44 @@
 	}
 }
 
+.cloud-account-selector {
+	border-radius: 2px;
+	border: 1px solid var(--bg-ink-300);
+	background: linear-gradient(
+		139deg,
+		rgba(18, 19, 23, 0.8) 0%,
+		rgba(18, 19, 23, 0.9) 98.68%
+	);
+	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	.ant-select-selector {
+		border-color: var(--bg-slate-400) !important;
+		background: var(--bg-ink-300) !important;
+		padding: 6px 8px !important;
+	}
+	.ant-select-selection-item {
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 16px;
+	}
+
+	.account-option-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		&__selected {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 14px;
+			width: 14px;
+			background-color: rgba(192, 193, 195, 0.2); /* #C0C1C3 with 0.2 opacity */
+			border-radius: 2px;
+		}
+	}
+}
 .lightMode {
 	.hero-section__action-button {
 		&.primary {

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx

@@ -1,21 +1,58 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import { Select, Skeleton } from 'antd';
-import { SelectProps } from 'antd/lib';
+import { Button, Select, Skeleton } from 'antd';
+import type { SelectProps } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
-import { getAccountById } from 'container/Integrations/CloudIntegration/utils';
 import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { ChevronDown, Dot, PencilLine, Plug, Plus } from 'lucide-react';
+import { Check, ChevronDown } from 'lucide-react';
 
-import { CloudAccount } from '../../types';
+import { CloudAccount } from '../../ServicesSection/types';
 import AccountSettingsModal from './AccountSettingsModal';
 import CloudAccountSetupModal from './CloudAccountSetupModal';
 
 import './AccountActions.style.scss';
 
+interface AccountOptionItemProps {
+	label: React.ReactNode;
+	isSelected: boolean;
+}
+
+function AccountOptionItem({
+	label,
+	isSelected,
+}: AccountOptionItemProps): JSX.Element {
+	return (
+		<div className="account-option-item">
+			{label}
+			{isSelected && (
+				<div className="account-option-item__selected">
+					<Check size={12} color={Color.BG_VANILLA_100} />
+				</div>
+			)}
+		</div>
+	);
+}
+
+function renderOption(
+	option: any,
+	activeAccountId: string | undefined,
+): JSX.Element {
+	return (
+		<AccountOptionItem
+			label={option.label}
+			isSelected={option.value === activeAccountId}
+		/>
+	);
+}
+
+const getAccountById = (
+	accounts: CloudAccount[],
+	accountId: string,
+): CloudAccount | null =>
+	accounts.find((account) => account.cloud_account_id === accountId) || null;
+
 function AccountActionsRenderer({
 	accounts,
 	isLoading,
@@ -36,51 +73,55 @@ function AccountActionsRenderer({
 	if (isLoading) {
 		return (
 			<div className="hero-section__actions-with-account">
-				<Skeleton.Input active block className="hero-section__input-skeleton" />
+				<Skeleton.Input
+					active
+					size="large"
+					block
+					className="hero-section__input-skeleton"
+				/>
+				<div className="hero-section__action-buttons">
+					<Skeleton.Button
+						active
+						size="large"
+						className="hero-section__new-account-button-skeleton"
+					/>
+					<Skeleton.Button
+						active
+						size="large"
+						className="hero-section__account-settings-button-skeleton"
+					/>
+				</div>
 			</div>
 		);
 	}
-
 	if (accounts?.length) {
 		return (
 			<div className="hero-section__actions-with-account">
-				<div className="hero-section__actions-with-account-selector-container">
-					<div className="selected-cloud-integration-account-status">
-						<Dot size={24} color={Color.BG_FOREST_500} />
-					</div>
-
-					<div className="account-selector-label">Account:</div>
-
-					<span className="account-selector">
-						<Select
-							value={activeAccount?.cloud_account_id}
-							options={selectOptions}
-							rootClassName="cloud-account-selector"
-							placeholder="Select AWS Account"
-							suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
-							onChange={onAccountChange}
-						/>
-					</span>
-				</div>
+				<Select
+					value={`Account: ${activeAccount?.cloud_account_id}`}
+					options={selectOptions}
+					rootClassName="cloud-account-selector"
+					placeholder="Select AWS Account"
+					suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
+					optionRender={(option): JSX.Element =>
+						renderOption(option, activeAccount?.cloud_account_id)
+					}
+					onChange={onAccountChange}
+				/>
 				<div className="hero-section__action-buttons">
 					<Button
-						variant="link"
-						size="sm"
-						color="secondary"
-						prefixIcon={<PencilLine size={14} />}
+						type="primary"
+						className="hero-section__action-button primary"
+						onClick={onIntegrationModalOpen}
+					>
+						Add New AWS Account
+					</Button>
+					<Button
+						type="default"
+						className="hero-section__action-button secondary"
 						onClick={onAccountSettingsModalOpen}
 					>
-						Edit Account
-					</Button>
-
-					<Button
-						variant="link"
-						size="sm"
-						color="secondary"
-						onClick={onIntegrationModalOpen}
-						prefixIcon={<Plus size={14} />}
-					>
-						Add New Account
+						Account Settings
 					</Button>
 				</div>
 			</div>
@@ -88,11 +129,8 @@ function AccountActionsRenderer({
 	}
 	return (
 		<Button
-			variant="solid"
-			color="primary"
-			prefixIcon={<Plug size={14} />}
+			className="hero-section__action-button primary"
 			onClick={onIntegrationModalOpen}
-			size="sm"
 		>
 			Integrate Now
 		</Button>

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.style.scss

@@ -14,13 +14,8 @@
 		border-radius: 3px;
 		border: 1px solid var(--bg-slate-500);
 		padding: 14px;
-
 		&-account-info {
 			&-connected-account-details {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-
 				&-title {
 					color: var(--bg-vanilla-100);
 					font-size: 14px;
@@ -43,36 +38,40 @@
 				}
 			}
 		}
-
-		&-region-selector {
+		&-regions-switch {
 			display: flex;
 			flex-direction: column;
-			gap: 4px;
-
+			gap: 10px;
 			&-title {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 				font-size: 14px;
 				font-weight: 500;
 				line-height: 20px;
 				letter-spacing: -0.07px;
 			}
-
-			&-description {
-				color: var(--l2-foreground);
-				font-size: 12px;
-				line-height: 18px;
-				letter-spacing: -0.06px;
+			&-switch {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				&-label {
+					color: var(--bg-vanilla-400);
+					background-color: transparent;
+					border: none;
+					font-family: Inter;
+					font-size: 12px;
+					font-weight: 400;
+					line-height: 18px;
+					letter-spacing: -0.005em;
+					cursor: pointer;
+				}
 			}
 		}
+		&-regions-select {
+			margin-top: 8px;
+		}
 	}
 
 	&__footer {
-		padding: 16px;
-		display: flex;
-		flex-direction: row;
-		gap: 10px;
-		justify-content: space-between;
-
 		&-close-button,
 		&-save-button {
 			color: var(--bg-vanilla-100);

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx

@@ -0,0 +1,213 @@
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { Form, Select, Switch } from 'antd';
+import SignozModal from 'components/SignozModal/SignozModal';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	getRegionPreviewText,
+	useAccountSettingsModal,
+} from 'hooks/integration/aws/useAccountSettingsModal';
+import useUrlQuery from 'hooks/useUrlQuery';
+import history from 'lib/history';
+
+import logEvent from '../../../../api/common/logEvent';
+import { CloudAccount } from '../../ServicesSection/types';
+import { RegionSelector } from './RegionSelector';
+import RemoveIntegrationAccount from './RemoveIntegrationAccount';
+
+import './AccountSettingsModal.style.scss';
+
+interface AccountSettingsModalProps {
+	onClose: () => void;
+	account: CloudAccount;
+	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
+}
+
+function AccountSettingsModal({
+	onClose,
+	account,
+	setActiveAccount,
+}: AccountSettingsModalProps): JSX.Element {
+	const {
+		form,
+		isLoading,
+		selectedRegions,
+		includeAllRegions,
+		isRegionSelectOpen,
+		isSaveDisabled,
+		setSelectedRegions,
+		setIncludeAllRegions,
+		setIsRegionSelectOpen,
+		handleIncludeAllRegionsChange,
+		handleSubmit,
+		handleClose,
+	} = useAccountSettingsModal({ onClose, account, setActiveAccount });
+
+	const queryClient = useQueryClient();
+	const urlQuery = useUrlQuery();
+
+	const handleRemoveIntegrationAccountSuccess = (): void => {
+		queryClient.invalidateQueries([REACT_QUERY_KEY.AWS_ACCOUNTS]);
+		urlQuery.delete('cloudAccountId');
+		handleClose();
+		history.replace({ search: urlQuery.toString() });
+
+		logEvent('AWS Integration: Account removed', {
+			id: account?.id,
+			cloudAccountId: account?.cloud_account_id,
+		});
+	};
+
+	const handleRegionDeselect = useCallback(
+		(item: string): void => {
+			if (selectedRegions.includes(item)) {
+				setSelectedRegions(selectedRegions.filter((region) => region !== item));
+				if (includeAllRegions) {
+					setIncludeAllRegions(false);
+				}
+			}
+		},
+		[
+			selectedRegions,
+			includeAllRegions,
+			setSelectedRegions,
+			setIncludeAllRegions,
+		],
+	);
+
+	const renderRegionSelector = useCallback(() => {
+		if (isRegionSelectOpen) {
+			return (
+				<RegionSelector
+					selectedRegions={selectedRegions}
+					setSelectedRegions={setSelectedRegions}
+					setIncludeAllRegions={setIncludeAllRegions}
+				/>
+			);
+		}
+
+		return (
+			<>
+				<div className="account-settings-modal__body-regions-switch-switch ">
+					<Switch
+						checked={includeAllRegions}
+						onChange={handleIncludeAllRegionsChange}
+					/>
+					<button
+						className="account-settings-modal__body-regions-switch-switch-label"
+						type="button"
+						onClick={(): void => handleIncludeAllRegionsChange(!includeAllRegions)}
+					>
+						Include all regions
+					</button>
+				</div>
+				<Select
+					suffixIcon={null}
+					placeholder="Select Region(s)"
+					className="cloud-account-setup-form__select account-settings-modal__body-regions-select integrations-select"
+					onClick={(): void => setIsRegionSelectOpen(true)}
+					mode="multiple"
+					maxTagCount={3}
+					value={getRegionPreviewText(selectedRegions)}
+					open={false}
+					onDeselect={handleRegionDeselect}
+				/>
+			</>
+		);
+	}, [
+		isRegionSelectOpen,
+		includeAllRegions,
+		handleIncludeAllRegionsChange,
+		selectedRegions,
+		handleRegionDeselect,
+		setSelectedRegions,
+		setIncludeAllRegions,
+		setIsRegionSelectOpen,
+	]);
+
+	const renderAccountDetails = useCallback(
+		() => (
+			<div className="account-settings-modal__body-account-info">
+				<div className="account-settings-modal__body-account-info-connected-account-details">
+					<div className="account-settings-modal__body-account-info-connected-account-details-title">
+						Connected Account details
+					</div>
+					<div className="account-settings-modal__body-account-info-connected-account-details-account-id">
+						AWS Account:{' '}
+						<span className="account-settings-modal__body-account-info-connected-account-details-account-id-account-id">
+							{account?.id}
+						</span>
+					</div>
+				</div>
+			</div>
+		),
+		[account?.id],
+	);
+
+	const modalTitle = (
+		<div className="account-settings-modal__title">
+			Account settings for{' '}
+			<span className="account-settings-modal__title-account-id">
+				{account?.id}
+			</span>
+		</div>
+	);
+
+	return (
+		<SignozModal
+			open
+			title={modalTitle}
+			onCancel={handleClose}
+			onOk={handleSubmit}
+			okText="Save"
+			okButtonProps={{
+				disabled: isSaveDisabled,
+				className: 'account-settings-modal__footer-save-button',
+				loading: isLoading,
+			}}
+			cancelButtonProps={{
+				className: 'account-settings-modal__footer-close-button',
+			}}
+			width={672}
+			rootClassName="account-settings-modal"
+		>
+			<Form
+				form={form}
+				layout="vertical"
+				initialValues={{
+					selectedRegions,
+					includeAllRegions,
+				}}
+			>
+				<div className="account-settings-modal__body">
+					{renderAccountDetails()}
+
+					<Form.Item
+						name="selectedRegions"
+						rules={[
+							{
+								validator: async (): Promise<void> => {
+									if (selectedRegions.length === 0) {
+										throw new Error('Please select at least one region to monitor');
+									}
+								},
+								message: 'Please select at least one region to monitor',
+							},
+						]}
+					>
+						{renderRegionSelector()}
+					</Form.Item>
+
+					<div className="integration-detail-content">
+						<RemoveIntegrationAccount
+							accountId={account?.id}
+							onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
+						/>
+					</div>
+				</div>
+			</Form>
+		</SignozModal>
+	);
+}
+
+export default AccountSettingsModal;

frontend/src/container/CloudIntegrationPage/HeroSection/components/CloudAccountSetupModal.style.scss

@@ -1,26 +1,4 @@
 .cloud-account-setup-modal {
-	> div {
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-	}
-
-	&__content {
-		flex: 1;
-		overflow-y: auto;
-		min-height: 0;
-		scrollbar-width: thin;
-
-		&::-webkit-scrollbar {
-			width: 2px;
-		}
-	}
-
-	&__footer {
-		padding: 16px;
-		margin-bottom: 16px;
-	}
-
 	.account-setup-modal-footer {
 		&__confirm-button {
 			background: var(--bg-robin-500);
@@ -42,8 +20,6 @@
 	}
 
 	.cloud-account-setup-form {
-		padding: 16px;
-
 		.disabled {
 			opacity: 0.4;
 		}

frontend/src/container/CloudIntegrationPage/HeroSection/components/CloudAccountSetupModal.tsx

@@ -1,8 +1,7 @@
 import { useCallback } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import { DrawerWrapper } from '@signozhq/drawer';
+import SignozModal from 'components/SignozModal/SignozModal';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useIntegrationModal } from 'hooks/integration/aws/useIntegrationModal';
 import { SquareArrowOutUpRight } from 'lucide-react';
@@ -13,6 +12,7 @@ import {
 	ModalStateEnum,
 } from '../types';
 import { RegionForm } from './RegionForm';
+import { RegionSelector } from './RegionSelector';
 import { SuccessView } from './SuccessView';
 
 import './CloudAccountSetupModal.style.scss';
@@ -32,12 +32,14 @@ function CloudAccountSetupModal({
 		isGeneratingUrl,
 		setSelectedRegions,
 		setIncludeAllRegions,
+		handleIncludeAllRegionsChange,
 		handleRegionSelect,
 		handleSubmit,
 		handleClose,
 		setActiveView,
 		allRegions,
 		accountId,
+		selectedDeploymentRegion,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
@@ -48,47 +50,45 @@ function CloudAccountSetupModal({
 			return <SuccessView />;
 		}
 
-		return (
-			<div className="cloud-account-setup-modal__content">
-				<RegionForm
-					form={form}
-					modalState={modalState}
-					setModalState={setModalState}
+		if (activeView === ActiveViewEnum.SELECT_REGIONS) {
+			return (
+				<RegionSelector
 					selectedRegions={selectedRegions}
-					includeAllRegions={includeAllRegions}
-					onRegionSelect={handleRegionSelect}
-					onSubmit={handleSubmit}
-					accountId={accountId}
-					handleRegionChange={handleRegionChange}
-					connectionParams={connectionParams}
-					isConnectionParamsLoading={isConnectionParamsLoading}
 					setSelectedRegions={setSelectedRegions}
 					setIncludeAllRegions={setIncludeAllRegions}
 				/>
+			);
+		}
 
-				<div className="cloud-account-setup-modal__footer">
-					<Button
-						variant="solid"
-						color="primary"
-						prefixIcon={
-							<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />
-						}
-						onClick={handleSubmit}
-					>
-						Launch Cloud Formation Template
-					</Button>
-				</div>
-			</div>
+		return (
+			<RegionForm
+				form={form}
+				modalState={modalState}
+				setModalState={setModalState}
+				selectedRegions={selectedRegions}
+				includeAllRegions={includeAllRegions}
+				onIncludeAllRegionsChange={handleIncludeAllRegionsChange}
+				onRegionSelect={handleRegionSelect}
+				onSubmit={handleSubmit}
+				accountId={accountId}
+				selectedDeploymentRegion={selectedDeploymentRegion}
+				handleRegionChange={handleRegionChange}
+				connectionParams={connectionParams}
+				isConnectionParamsLoading={isConnectionParamsLoading}
+			/>
 		);
 	}, [
 		modalState,
+		activeView,
 		form,
 		setModalState,
 		selectedRegions,
 		includeAllRegions,
+		handleIncludeAllRegionsChange,
 		handleRegionSelect,
 		handleSubmit,
 		accountId,
+		selectedDeploymentRegion,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
@@ -162,39 +162,28 @@ function CloudAccountSetupModal({
 
 	const modalConfig = getModalConfig();
 
-	const handleDrawerOpenChange = (open: boolean): void => {
-		if (!open) {
-			handleClose();
-		}
-	};
-
 	return (
-		<DrawerWrapper
-			open={true}
-			type="panel"
+		<SignozModal
+			open
 			className="cloud-account-setup-modal"
-			// allowOutsideClick={false}
-			content={renderContent()}
-			onOpenChange={handleDrawerOpenChange}
-			direction="right"
-			showCloseButton
-			header={{
-				title: modalConfig.title,
+			title={modalConfig.title}
+			onCancel={handleClose}
+			onOk={modalConfig.onOk}
+			okText={modalConfig.okText}
+			okButtonProps={{
+				loading: isLoading,
+				disabled: selectedRegions.length === 0 || modalConfig.disabled,
+				className:
+					activeView === ActiveViewEnum.FORM
+						? 'cloud-account-setup-form__submit-button'
+						: 'account-setup-modal-footer__confirm-button',
+				block: activeView === ActiveViewEnum.FORM,
 			}}
-			// onCancel={handleClose}
-			// onOk={modalConfig.onOk}
-			// okText={modalConfig.okText}
-			// okButtonProps={{
-			// 	loading: isLoading,
-			// 	disabled: selectedRegions.length === 0 || modalConfig.disabled,
-			// 	className:
-			// 		activeView === ActiveViewEnum.FORM
-			// 			? 'cloud-account-setup-form__submit-button'
-			// 			: 'account-setup-modal-footer__confirm-button',
-			// 	block: activeView === ActiveViewEnum.FORM,
-			// }}
-			// cancelButtonProps={modalConfig.cancelButtonProps}
-		/>
+			cancelButtonProps={modalConfig.cancelButtonProps}
+			width={672}
+		>
+			{renderContent()}
+		</SignozModal>
 	);
 }
 

frontend/src/container/CloudIntegrationPage/HeroSection/components/IntegrateNowFormSections.tsx

@@ -1,19 +1,17 @@
-import { Dispatch, SetStateAction } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Form, Select } from 'antd';
+import { Form, Select, Switch } from 'antd';
 import { ChevronDown } from 'lucide-react';
 import { Region } from 'utils/regions';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { RegionSelector } from './RegionSelector';
 
 // Form section components
 function RegionDeploymentSection({
 	regions,
+	selectedDeploymentRegion,
 	handleRegionChange,
 	isFormDisabled,
 }: {
 	regions: Region[];
+	selectedDeploymentRegion: string | undefined;
 	handleRegionChange: (value: string) => void;
 	isFormDisabled: boolean;
 }): JSX.Element {
@@ -35,8 +33,8 @@ function RegionDeploymentSection({
 					suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
 					className="cloud-account-setup-form__select integrations-select"
 					onChange={handleRegionChange}
+					value={selectedDeploymentRegion}
 					disabled={isFormDisabled}
-					getPopupContainer={popupContainer}
 				>
 					{regions.flatMap((region) =>
 						region.subRegions.map((subRegion) => (
@@ -52,13 +50,19 @@ function RegionDeploymentSection({
 }
 
 function MonitoringRegionsSection({
+	includeAllRegions,
 	selectedRegions,
-	setSelectedRegions,
-	setIncludeAllRegions,
+	onIncludeAllRegionsChange,
+	getRegionPreviewText,
+	onRegionSelect,
+	isFormDisabled,
 }: {
+	includeAllRegions: boolean;
 	selectedRegions: string[];
-	setSelectedRegions: Dispatch<SetStateAction<string[]>>;
-	setIncludeAllRegions: Dispatch<SetStateAction<boolean>>;
+	onIncludeAllRegionsChange: (checked: boolean) => void;
+	getRegionPreviewText: (regions: string[]) => string[];
+	onRegionSelect: () => void;
+	isFormDisabled: boolean;
 }): JSX.Element {
 	return (
 		<div className="cloud-account-setup-form__form-group">
@@ -69,12 +73,51 @@ function MonitoringRegionsSection({
 				Choose only the regions you want SigNoz to monitor. You can enable all at
 				once, or pick specific ones:
 			</div>
-
-			<RegionSelector
-				selectedRegions={selectedRegions}
-				setSelectedRegions={setSelectedRegions}
-				setIncludeAllRegions={setIncludeAllRegions}
-			/>
+			<Form.Item
+				name="monitorRegions"
+				rules={[
+					{
+						validator: async (): Promise<void> => {
+							if (selectedRegions.length === 0) {
+								return Promise.reject();
+							}
+							return Promise.resolve();
+						},
+						message: 'Please select at least one region to monitor',
+					},
+				]}
+				className="cloud-account-setup-form__form-item"
+			>
+				<div className="cloud-account-setup-form__include-all-regions-switch">
+					<Switch
+						size="small"
+						checked={includeAllRegions}
+						onChange={onIncludeAllRegionsChange}
+						disabled={isFormDisabled}
+					/>
+					<button
+						className="cloud-account-setup-form__include-all-regions-switch-label"
+						type="button"
+						onClick={(): void =>
+							!isFormDisabled
+								? onIncludeAllRegionsChange(!includeAllRegions)
+								: undefined
+						}
+					>
+						Include all regions
+					</button>
+				</div>
+				<Select
+					suffixIcon={null}
+					placeholder="Select Region(s)"
+					className="cloud-account-setup-form__select integrations-select"
+					onClick={!isFormDisabled ? onRegionSelect : undefined}
+					mode="multiple"
+					maxTagCount={3}
+					value={getRegionPreviewText(selectedRegions)}
+					open={false}
+				/>
+			</Form.Item>
 		</div>
 	);
 }

frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionForm.tsx

@@ -1,12 +1,11 @@
 import { useRef } from 'react';
 import { Form } from 'antd';
 import cx from 'classnames';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
-import { useGetAccountStatus } from 'hooks/integration/useGetAccountStatus';
-import { AccountStatusResponse } from 'types/api/integrations/types';
+import { useAccountStatus } from 'hooks/integration/aws/useAccountStatus';
+import { AccountStatusResponse } from 'types/api/integrations/aws';
 import { regions } from 'utils/regions';
 
-import logEvent from '../../../../../../api/common/logEvent';
+import logEvent from '../../../../api/common/logEvent';
 import { ModalStateEnum, RegionFormProps } from '../types';
 import AlertMessage from './AlertMessage';
 import {
@@ -16,48 +15,56 @@ import {
 } from './IntegrateNowFormSections';
 import RenderConnectionFields from './RenderConnectionParams';
 
+const allRegions = (): string[] =>
+	regions.flatMap((r) => r.subRegions.map((sr) => sr.name));
+
+const getRegionPreviewText = (regions: string[]): string[] => {
+	if (regions.includes('all')) {
+		return allRegions();
+	}
+	return regions;
+};
+
 export function RegionForm({
 	form,
 	modalState,
 	setModalState,
 	selectedRegions,
+	includeAllRegions,
+	onIncludeAllRegionsChange,
+	onRegionSelect,
 	onSubmit,
 	accountId,
+	selectedDeploymentRegion,
 	handleRegionChange,
 	connectionParams,
 	isConnectionParamsLoading,
-	setSelectedRegions,
-	setIncludeAllRegions,
 }: RegionFormProps): JSX.Element {
 	const startTimeRef = useRef(Date.now());
 	const refetchInterval = 10 * 1000;
 	const errorTimeout = 10 * 60 * 1000;
 
-	const { isLoading: isAccountStatusLoading } = useGetAccountStatus(
-		INTEGRATION_TYPES.AWS,
-		accountId,
-		{
-			refetchInterval,
-			enabled: !!accountId && modalState === ModalStateEnum.WAITING,
-			onSuccess: (data: AccountStatusResponse) => {
-				if (data.data.status.integration.last_heartbeat_ts_ms !== null) {
-					setModalState(ModalStateEnum.SUCCESS);
-					logEvent('AWS Integration: Account connected', {
-						cloudAccountId: data?.data?.cloud_account_id,
-						status: data?.data?.status,
-					});
-				} else if (Date.now() - startTimeRef.current >= errorTimeout) {
-					setModalState(ModalStateEnum.ERROR);
-					logEvent('AWS Integration: Account connection attempt timed out', {
-						id: accountId,
-					});
-				}
-			},
-			onError: () => {
+	const { isLoading: isAccountStatusLoading } = useAccountStatus(accountId, {
+		refetchInterval,
+		enabled: !!accountId && modalState === ModalStateEnum.WAITING,
+		onSuccess: (data: AccountStatusResponse) => {
+			if (data.data.status.integration.last_heartbeat_ts_ms !== null) {
+				setModalState(ModalStateEnum.SUCCESS);
+				logEvent('AWS Integration: Account connected', {
+					cloudAccountId: data?.data?.cloud_account_id,
+					status: data?.data?.status,
+				});
+			} else if (Date.now() - startTimeRef.current >= errorTimeout) {
 				setModalState(ModalStateEnum.ERROR);
-			},
+				logEvent('AWS Integration: Account connection attempt timed out', {
+					id: accountId,
+				});
+			}
 		},
-	);
+		onError: () => {
+			setModalState(ModalStateEnum.ERROR);
+		},
+	});
 
 	const isFormDisabled =
 		modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
@@ -80,11 +87,15 @@ export function RegionForm({
 					regions={regions}
 					handleRegionChange={handleRegionChange}
 					isFormDisabled={isFormDisabled}
+					selectedDeploymentRegion={selectedDeploymentRegion}
 				/>
 				<MonitoringRegionsSection
+					includeAllRegions={includeAllRegions}
 					selectedRegions={selectedRegions}
-					setSelectedRegions={setSelectedRegions}
-					setIncludeAllRegions={setIncludeAllRegions}
+					onIncludeAllRegionsChange={onIncludeAllRegionsChange}
+					getRegionPreviewText={getRegionPreviewText}
+					onRegionSelect={onRegionSelect}
+					isFormDisabled={isFormDisabled}
 				/>
 				<ComplianceNote />
 				<RenderConnectionFields

frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionSelector.style.scss

@@ -1,6 +1,5 @@
 .select-all {
-	margin-top: 16px;
-	margin-bottom: 16px;
+	margin-bottom: 20px;
 }
 
 .regions-grid {
@@ -20,11 +19,3 @@
 	gap: 10px;
 	align-items: center;
 }
-
-.region-selector-footer {
-	margin-top: 36px;
-
-	display: flex;
-	justify-content: flex-end;
-	gap: 8px;
-}

frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.scss

@@ -0,0 +1,47 @@
+.remove-integration-account {
+	display: flex;
+	justify-content: space-between;
+	padding: 16px;
+	border-radius: 4px;
+	border: 1px solid rgba(218, 85, 101, 0.2);
+	background: rgba(218, 85, 101, 0.06);
+	&__header {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	&__title {
+		color: var(--bg-cherry-500);
+		font-size: 14px;
+		letter-spacing: -0.07px;
+	}
+
+	&__subtitle {
+		color: var(--bg-cherry-300);
+		font-size: 14px;
+		line-height: 22px;
+		letter-spacing: -0.07px;
+	}
+
+	&__button {
+		display: flex;
+		align-items: center;
+		background: var(--bg-cherry-500);
+		border: none;
+		color: var(--bg-vanilla-100);
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 13.3px; /* 110.833% */
+		padding: 9px 13px;
+		.ant-btn-icon {
+			margin-inline-end: 4px !important;
+		}
+
+		&:hover {
+			&.ant-btn-default {
+				color: var(--bg-vanilla-300) !important;
+			}
+		}
+	}
+}

frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.tsx

@@ -1,13 +1,12 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
-import { Button } from '@signozhq/button';
-import { Modal } from 'antd/lib';
+import { Button, Modal } from 'antd';
 import logEvent from 'api/common/logEvent';
-import removeAwsIntegrationAccount from 'api/integration/aws/removeAwsIntegrationAccount';
+import removeAwsIntegrationAccount from 'api/Integrations/removeAwsIntegrationAccount';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { INTEGRATION_TELEMETRY_EVENTS } from 'container/Integrations/constants';
 import { useNotifications } from 'hooks/useNotifications';
-import { Unlink } from 'lucide-react';
+import { X } from 'lucide-react';
+import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils';
 
 import './RemoveIntegrationAccount.scss';
 
@@ -21,7 +20,7 @@ function RemoveIntegrationAccount({
 	const { notifications } = useNotifications();
 	const [isModalOpen, setIsModalOpen] = useState(false);
 
-	const handleDisconnect = (): void => {
+	const showModal = (): void => {
 		setIsModalOpen(true);
 	};
 
@@ -51,37 +50,42 @@ function RemoveIntegrationAccount({
 	};
 
 	return (
-		<div className="remove-integration-account-container">
+		<div className="remove-integration-account">
+			<div className="remove-integration-account__header">
+				<div className="remove-integration-account__title">Remove Integration</div>
+				<div className="remove-integration-account__subtitle">
+					Removing this integration won&apos;t delete any existing data but will stop
+					collecting new data from AWS.
+				</div>
+			</div>
 			<Button
-				variant="solid"
-				color="destructive"
-				prefixIcon={<Unlink size={14} />}
-				size="sm"
-				onClick={handleDisconnect}
-				disabled={isRemoveIntegrationLoading}
+				className="remove-integration-account__button"
+				icon={<X size={14} />}
+				onClick={(): void => showModal()}
 			>
-				Disconnect
+				Remove
 			</Button>
-
 			<Modal
-				className="remove-integration-account-modal"
+				className="remove-integration-modal"
 				open={isModalOpen}
 				title="Remove integration"
 				onOk={handleOk}
 				onCancel={handleCancel}
-				okText="Remove Account"
+				okText="Remove Integration"
 				okButtonProps={{
 					danger: true,
-					loading: isRemoveIntegrationLoading,
+					disabled: isRemoveIntegrationLoading,
 				}}
 			>
-				Removing this account will remove all components created for sending
-				telemetry to SigNoz in your AWS account within the next ~15 minutes
-				(cloudformation stacks named signoz-integration-telemetry-collection in
-				enabled regions). <br />
-				<br />
-				After that, you can delete the cloudformation stack that was created
-				manually when connecting this account.
+				<div className="remove-integration-modal__text">
+					Removing this account will remove all components created for sending
+					telemetry to SigNoz in your AWS account within the next ~15 minutes
+					(cloudformation stacks named signoz-integration-telemetry-collection in
+					enabled regions). <br />
+					<br />
+					After that, you can delete the cloudformation stack that was created
+					manually when connecting this account.
+				</div>
 			</Modal>
 		</div>
 	);

frontend/src/container/CloudIntegrationPage/HeroSection/components/RenderConnectionParams.tsx

@@ -1,5 +1,5 @@
 import { Form, Input } from 'antd';
-import { ConnectionParams } from 'types/api/integrations/types';
+import { ConnectionParams } from 'types/api/integrations/aws';
 
 function RenderConnectionFields({
 	isConnectionParamsLoading,

frontend/src/container/CloudIntegrationPage/HeroSection/types.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { FormInstance } from 'antd';
-import { ConnectionParams } from 'types/api/integrations/types';
+import { ConnectionParams } from 'types/api/integrations/aws';
 
 export enum ActiveViewEnum {
 	SELECT_REGIONS = 'select-regions',
@@ -20,14 +20,14 @@ export interface RegionFormProps {
 	setModalState: Dispatch<SetStateAction<ModalStateEnum>>;
 	selectedRegions: string[];
 	includeAllRegions: boolean;
+	onIncludeAllRegionsChange: (checked: boolean) => void;
 	onRegionSelect: () => void;
 	onSubmit: () => Promise<void>;
 	accountId?: string;
+	selectedDeploymentRegion: string | undefined;
 	handleRegionChange: (value: string) => void;
 	connectionParams?: ConnectionParams;
 	isConnectionParamsLoading?: boolean;
-	setSelectedRegions: Dispatch<SetStateAction<string[]>>;
-	setIncludeAllRegions: Dispatch<SetStateAction<boolean>>;
 }
 
 export interface IntegrationModalProps {

frontend/src/container/CloudIntegrationPage/ServicesSection/CloudServiceDashboards.tsx

@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom';
+
+import { ServiceData } from './types';
+
+function DashboardItem({
+	dashboard,
+}: {
+	dashboard: ServiceData['assets']['dashboards'][number];
+}): JSX.Element {
+	const content = (
+		<>
+			<div className="cloud-service-dashboard-item__title">{dashboard.title}</div>
+			<div className="cloud-service-dashboard-item__preview">
+				<img
+					src={dashboard.image}
+					alt={dashboard.title}
+					className="cloud-service-dashboard-item__preview-image"
+				/>
+			</div>
+		</>
+	);
+
+	return (
+		<div className="cloud-service-dashboard-item">
+			{dashboard.url ? (
+				<Link to={dashboard.url} className="cloud-service-dashboard-item__link">
+					{content}
+				</Link>
+			) : (
+				content
+			)}
+		</div>
+	);
+}
+
+function CloudServiceDashboards({
+	service,
+}: {
+	service: ServiceData;
+}): JSX.Element {
+	return (
+		<>
+			{service.assets.dashboards.map((dashboard) => (
+				<DashboardItem key={dashboard.id} dashboard={dashboard} />
+			))}
+		</>
+	);
+}
+
+export default CloudServiceDashboards;

frontend/src/container/CloudIntegrationPage/ServicesSection/CloudServiceDataCollected.tsx

@@ -1,8 +1,6 @@
 import { Table } from 'antd';
-import { ServiceData } from 'container/Integrations/CloudIntegration/AmazonWebServices/types';
-import { BarChart2, ScrollText } from 'lucide-react';
 
-import './CloudServiceDataCollected.styles.scss';
+import { ServiceData } from './types';
 
 function CloudServiceDataCollected({
 	logsData,
@@ -63,30 +61,24 @@ function CloudServiceDataCollected({
 	return (
 		<div className="cloud-service-data-collected">
 			{logsData && logsData.length > 0 && (
-				<div className="cloud-service-data-collected-table">
-					<div className="cloud-service-data-collected-table-heading">
-						<ScrollText size={14} />
-						Logs
-					</div>
+				<div className="cloud-service-data-collected__table">
+					<div className="cloud-service-data-collected__table-heading">Logs</div>
 					<Table
 						columns={logsColumns}
 						dataSource={logsData}
 						{...tableProps}
-						className="cloud-service-data-collected-table-logs"
+						className="cloud-service-data-collected__table-logs"
 					/>
 				</div>
 			)}
 			{metricsData && metricsData.length > 0 && (
-				<div className="cloud-service-data-collected-table">
-					<div className="cloud-service-data-collected-table-heading">
-						<BarChart2 size={14} />
-						Metrics
-					</div>
+				<div className="cloud-service-data-collected__table">
+					<div className="cloud-service-data-collected__table-heading">Metrics</div>
 					<Table
 						columns={metricsColumns}
 						dataSource={metricsData}
 						{...tableProps}
-						className="cloud-service-data-collected-table-metrics"
+						className="cloud-service-data-collected__table-metrics"
 					/>
 				</div>
 			)}

frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.styles.scss

@@ -0,0 +1,89 @@
+.configure-service-modal {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		border-radius: 3px;
+		border: 1px solid var(--bg-slate-500);
+		padding: 14px;
+
+		&-regions-switch-switch {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			&-label {
+				color: var(--bg-vanilla-100);
+				font-size: 14px;
+				font-weight: 500;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+		}
+
+		&-switch-description {
+			margin-top: 4px;
+			color: var(--bg-vanilla-400);
+			font-size: 12px;
+			font-weight: 400;
+			line-height: 18px;
+			letter-spacing: -0.06px;
+		}
+		&-form-item {
+			&:last-child {
+				margin-bottom: 0px;
+			}
+		}
+	}
+	.ant-modal-body {
+		padding-bottom: 0;
+	}
+	.ant-modal-footer {
+		margin: 0;
+		padding-bottom: 12px;
+	}
+}
+
+.lightMode {
+	.configure-service-modal {
+		&__body {
+			border-color: var(--bg-vanilla-300);
+
+			&-regions-switch-switch {
+				&-label {
+					color: var(--bg-ink-500);
+				}
+			}
+
+			&-switch-description {
+				color: var(--bg-ink-400);
+			}
+		}
+
+		.ant-btn {
+			&.ant-btn-default {
+				background: var(--bg-vanilla-100);
+				border: 1px solid var(--bg-vanilla-300);
+				color: var(--bg-ink-400);
+
+				&:hover {
+					border-color: var(--bg-vanilla-400);
+					color: var(--bg-ink-500);
+				}
+			}
+
+			&.ant-btn-primary {
+				// Keep primary button same as dark mode
+				background: var(--bg-robin-500);
+				color: var(--bg-vanilla-100);
+
+				&:hover {
+					background: var(--bg-robin-400);
+				}
+
+				&:disabled {
+					opacity: 0.6;
+				}
+			}
+		}
+	}
+}

frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx

@@ -0,0 +1,243 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
+import { Form, Switch } from 'antd';
+import SignozModal from 'components/SignozModal/SignozModal';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	ServiceConfig,
+	SupportedSignals,
+} from 'container/CloudIntegrationPage/ServicesSection/types';
+import { useUpdateServiceConfig } from 'hooks/integration/aws/useUpdateServiceConfig';
+import { isEqual } from 'lodash-es';
+
+import logEvent from '../../../api/common/logEvent';
+import S3BucketsSelector from './S3BucketsSelector';
+
+import './ConfigureServiceModal.styles.scss';
+
+export interface IConfigureServiceModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	serviceName: string;
+	serviceId: string;
+	cloudAccountId: string;
+	supportedSignals: SupportedSignals;
+	initialConfig?: ServiceConfig;
+}
+
+function ConfigureServiceModal({
+	isOpen,
+	onClose,
+	serviceName,
+	serviceId,
+	cloudAccountId,
+	initialConfig,
+	supportedSignals,
+}: IConfigureServiceModalProps): JSX.Element {
+	const [form] = Form.useForm();
+	const [isLoading, setIsLoading] = useState(false);
+
+	// Track current form values
+	const initialValues = useMemo(
+		() => ({
+			metrics: initialConfig?.metrics?.enabled || false,
+			logs: initialConfig?.logs?.enabled || false,
+			s3Buckets: initialConfig?.logs?.s3_buckets || {},
+		}),
+		[initialConfig],
+	);
+	const [currentValues, setCurrentValues] = useState(initialValues);
+
+	const isSaveDisabled = useMemo(
+		() =>
+			// disable only if current values are same as the initial config
+			currentValues.metrics === initialValues.metrics &&
+			currentValues.logs === initialValues.logs &&
+			isEqual(currentValues.s3Buckets, initialValues.s3Buckets),
+		[currentValues, initialValues],
+	);
+
+	const handleS3BucketsChange = useCallback(
+		(bucketsByRegion: Record<string, string[]>) => {
+			setCurrentValues((prev) => ({
+				...prev,
+				s3Buckets: bucketsByRegion,
+			}));
+			form.setFieldsValue({ s3Buckets: bucketsByRegion });
+		},
+		[form],
+	);
+
+	const {
+		mutate: updateServiceConfig,
+		isLoading: isUpdating,
+	} = useUpdateServiceConfig();
+
+	const queryClient = useQueryClient();
+
+	const handleSubmit = useCallback(async (): Promise<void> => {
+		try {
+			const values = await form.validateFields();
+			setIsLoading(true);
+
+			updateServiceConfig(
+				{
+					serviceId,
+					payload: {
+						cloud_account_id: cloudAccountId,
+						config: {
+							logs: {
+								enabled: values.logs,
+								s3_buckets: values.s3Buckets,
+							},
+							metrics: {
+								enabled: values.metrics,
+							},
+						},
+					},
+				},
+				{
+					onSuccess: () => {
+						queryClient.invalidateQueries([
+							REACT_QUERY_KEY.AWS_SERVICE_DETAILS,
+							serviceId,
+						]);
+						onClose();
+
+						logEvent('AWS Integration: Service settings saved', {
+							cloudAccountId,
+							serviceId,
+							logsEnabled: values?.logs,
+							metricsEnabled: values?.metrics,
+						});
+					},
+					onError: (error) => {
+						console.error('Failed to update service config:', error);
+					},
+				},
+			);
+		} catch (error) {
+			console.error('Form submission failed:', error);
+		} finally {
+			setIsLoading(false);
+		}
+	}, [
+		form,
+		updateServiceConfig,
+		serviceId,
+		cloudAccountId,
+		queryClient,
+		onClose,
+	]);
+
+	const handleClose = useCallback(() => {
+		form.resetFields();
+		onClose();
+	}, [form, onClose]);
+
+	return (
+		<SignozModal
+			title={
+				<div className="account-settings-modal__title">Configure {serviceName}</div>
+			}
+			centered
+			open={isOpen}
+			okText="Save"
+			okButtonProps={{
+				disabled: isSaveDisabled,
+				className: 'account-settings-modal__footer-save-button',
+				loading: isLoading || isUpdating,
+			}}
+			onCancel={handleClose}
+			onOk={handleSubmit}
+			cancelText="Close"
+			cancelButtonProps={{
+				className: 'account-settings-modal__footer-close-button',
+			}}
+			width={672}
+			rootClassName=" configure-service-modal"
+		>
+			<Form
+				form={form}
+				layout="vertical"
+				initialValues={{
+					metrics: initialConfig?.metrics?.enabled || false,
+					logs: initialConfig?.logs?.enabled || false,
+					s3Buckets: initialConfig?.logs?.s3_buckets || {},
+				}}
+			>
+				<div className=" configure-service-modal__body">
+					{supportedSignals.metrics && (
+						<Form.Item
+							name="metrics"
+							valuePropName="checked"
+							className="configure-service-modal__body-form-item"
+						>
+							<div className="configure-service-modal__body-regions-switch-switch">
+								<Switch
+									checked={currentValues.metrics}
+									onChange={(checked): void => {
+										setCurrentValues((prev) => ({ ...prev, metrics: checked }));
+										form.setFieldsValue({ metrics: checked });
+									}}
+								/>
+								<span className="configure-service-modal__body-regions-switch-switch-label">
+									Metric Collection
+								</span>
+							</div>
+							<div className="configure-service-modal__body-switch-description">
+								Metric Collection is enabled for this AWS account. We recommend keeping
+								this enabled, but you can disable metric collection if you do not want
+								to monitor your AWS infrastructure.
+							</div>
+						</Form.Item>
+					)}
+
+					{supportedSignals.logs && (
+						<>
+							<Form.Item
+								name="logs"
+								valuePropName="checked"
+								className="configure-service-modal__body-form-item"
+							>
+								<div className="configure-service-modal__body-regions-switch-switch">
+									<Switch
+										checked={currentValues.logs}
+										onChange={(checked): void => {
+											setCurrentValues((prev) => ({ ...prev, logs: checked }));
+											form.setFieldsValue({ logs: checked });
+										}}
+									/>
+									<span className="configure-service-modal__body-regions-switch-switch-label">
+										Log Collection
+									</span>
+								</div>
+								<div className="configure-service-modal__body-switch-description">
+									To ingest logs from your AWS services, you must complete several steps
+								</div>
+							</Form.Item>
+
+							{currentValues.logs && serviceId === 's3sync' && (
+								<Form.Item name="s3Buckets" noStyle>
+									<S3BucketsSelector
+										initialBucketsByRegion={currentValues.s3Buckets}
+										onChange={handleS3BucketsChange}
+									/>
+								</Form.Item>
+							)}
+						</>
+					)}
+				</div>
+			</Form>
+		</SignozModal>
+	);
+}
+
+ConfigureServiceModal.defaultProps = {
+	initialConfig: {
+		metrics: { enabled: false },
+		logs: { enabled: false },
+	},
+};
+
+export default ConfigureServiceModal;

frontend/src/container/CloudIntegrationPage/ServicesSection/S3BucketsSelector.tsx

@@ -1,9 +1,9 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Select, Skeleton } from 'antd';
+import { useCallback, useMemo, useState } from 'react';
+import { Form, Select, Skeleton, Typography } from 'antd';
 import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
 import useUrlQuery from 'hooks/useUrlQuery';
 
-import './S3BucketsSelector.styles.scss';
+const { Title } = Typography;
 
 interface S3BucketsSelectorProps {
 	onChange?: (bucketsByRegion: Record<string, string[]>) => void;
@@ -24,10 +24,6 @@ function S3BucketsSelector({
 		Record<string, string[]>
 	>(initialBucketsByRegion);
 
-	useEffect(() => {
-		setBucketsByRegion(initialBucketsByRegion);
-	}, [initialBucketsByRegion]);
-
 	// Find the active AWS account based on the URL query parameter
 	const activeAccount = useMemo(
 		() =>
@@ -85,41 +81,37 @@ function S3BucketsSelector({
 
 	return (
 		<div className="s3-buckets-selector">
-			<div className="s3-buckets-selector-title">Select S3 Buckets by Region</div>
-			<div className="s3-buckets-selector-content">
-				{allRegions.map((region) => {
-					const disabled = isRegionDisabled(region);
+			<Title level={5}>Select S3 Buckets by Region</Title>
 
-					return (
-						<div key={region} className="s3-buckets-selector-region">
-							<div className="s3-buckets-selector-region-header">
-								<div className="s3-buckets-selector-region-label">{region}</div>
-								{disabled && (
-									<div className="s3-buckets-selector-region-help">
-										Region disabled in account settings; S3 buckets here will not be
-										synced.
-									</div>
-								)}
-							</div>
-							<div className="s3-buckets-selector-region-select">
-								<Select
-									mode="tags"
-									placeholder={`Enter S3 bucket names for ${region}`}
-									value={bucketsByRegion[region] || []}
-									onChange={(value): void => handleRegionBucketsChange(region, value)}
-									tokenSeparators={[',']}
-									allowClear
-									disabled={disabled}
-									suffixIcon={null}
-									notFoundContent={null}
-									filterOption={false}
-									showSearch
-								/>
-							</div>
-						</div>
-					);
-				})}
-			</div>
+			{allRegions.map((region) => {
+				const disabled = isRegionDisabled(region);
+
+				return (
+					<Form.Item
+						key={region}
+						label={region}
+						{...(disabled && {
+							help:
+								'Region disabled in account settings; S3 buckets here will not be synced.',
+							validateStatus: 'warning',
+						})}
+					>
+						<Select
+							mode="tags"
+							placeholder={`Enter S3 bucket names for ${region}`}
+							value={bucketsByRegion[region] || []}
+							onChange={(value): void => handleRegionBucketsChange(region, value)}
+							tokenSeparators={[',']}
+							allowClear
+							disabled={disabled}
+							suffixIcon={null}
+							notFoundContent={null}
+							filterOption={false}
+							showSearch
+						/>
+					</Form.Item>
+				);
+			})}
 		</div>
 	);
 }

frontend/src/container/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx

@@ -0,0 +1,189 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Button, Tabs, TabsProps } from 'antd';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
+import Spinner from 'components/Spinner';
+import CloudServiceDashboards from 'container/CloudIntegrationPage/ServicesSection/CloudServiceDashboards';
+import CloudServiceDataCollected from 'container/CloudIntegrationPage/ServicesSection/CloudServiceDataCollected';
+import { IServiceStatus } from 'container/CloudIntegrationPage/ServicesSection/types';
+import dayjs from 'dayjs';
+import { useServiceDetails } from 'hooks/integration/aws/useServiceDetails';
+import useUrlQuery from 'hooks/useUrlQuery';
+
+import logEvent from '../../../api/common/logEvent';
+import ConfigureServiceModal from './ConfigureServiceModal';
+
+const getStatus = (
+	logsLastReceivedTimestamp: number | undefined,
+	metricsLastReceivedTimestamp: number | undefined,
+): { text: string; className: string } => {
+	if (!logsLastReceivedTimestamp && !metricsLastReceivedTimestamp) {
+		return { text: 'No Data Yet', className: 'service-status--no-data' };
+	}
+
+	const latestTimestamp = Math.max(
+		logsLastReceivedTimestamp || 0,
+		metricsLastReceivedTimestamp || 0,
+	);
+
+	const isStale = dayjs().diff(dayjs(latestTimestamp), 'minute') > 30;
+
+	if (isStale) {
+		return { text: 'Stale Data', className: 'service-status--stale-data' };
+	}
+
+	return { text: 'Connected', className: 'service-status--connected' };
+};
+
+function ServiceStatus({
+	serviceStatus,
+}: {
+	serviceStatus: IServiceStatus | undefined;
+}): JSX.Element {
+	const logsLastReceivedTimestamp = serviceStatus?.logs?.last_received_ts_ms;
+	const metricsLastReceivedTimestamp =
+		serviceStatus?.metrics?.last_received_ts_ms;
+
+	const { text, className } = getStatus(
+		logsLastReceivedTimestamp,
+		metricsLastReceivedTimestamp,
+	);
+
+	return <div className={`service-status ${className}`}>{text}</div>;
+}
+
+function getTabItems(serviceDetailsData: any): TabsProps['items'] {
+	const dashboards = serviceDetailsData?.assets.dashboards || [];
+	const dataCollected = serviceDetailsData?.data_collected || {};
+	const items: TabsProps['items'] = [];
+
+	if (dashboards.length) {
+		items.push({
+			key: 'dashboards',
+			label: `Dashboards (${dashboards.length})`,
+			children: <CloudServiceDashboards service={serviceDetailsData} />,
+		});
+	}
+
+	items.push({
+		key: 'data-collected',
+		label: 'Data Collected',
+		children: (
+			<CloudServiceDataCollected
+				logsData={dataCollected.logs || []}
+				metricsData={dataCollected.metrics || []}
+			/>
+		),
+	});
+
+	return items;
+}
+
+function ServiceDetails(): JSX.Element | null {
+	const urlQuery = useUrlQuery();
+	const cloudAccountId = urlQuery.get('cloudAccountId');
+	const serviceId = urlQuery.get('service');
+	const [isConfigureServiceModalOpen, setIsConfigureServiceModalOpen] = useState(
+		false,
+	);
+	const openServiceConfigModal = (): void => {
+		setIsConfigureServiceModalOpen(true);
+		logEvent('AWS Integration: Service settings viewed', {
+			cloudAccountId,
+			serviceId,
+		});
+	};
+
+	const { data: serviceDetailsData, isLoading } = useServiceDetails(
+		serviceId || '',
+		cloudAccountId || undefined,
+	);
+
+	const { config, supported_signals } = serviceDetailsData ?? {};
+
+	const totalSupportedSignals = Object.entries(supported_signals || {}).filter(
+		([, value]) => !!value,
+	).length;
+	const enabledSignals = useMemo(
+		() =>
+			Object.values(config || {}).filter((item) => item && item.enabled).length,
+		[config],
+	);
+
+	const isAnySignalConfigured = useMemo(
+		() => !!config?.logs?.enabled || !!config?.metrics?.enabled,
+		[config],
+	);
+
+	// log telemetry event on visiting details of a service.
+	useEffect(() => {
+		if (serviceId) {
+			logEvent('AWS Integration: Service viewed', {
+				cloudAccountId,
+				serviceId,
+			});
+		}
+	}, [cloudAccountId, serviceId]);
+
+	if (isLoading) {
+		return <Spinner size="large" height="50vh" />;
+	}
+
+	if (!serviceDetailsData) {
+		return null;
+	}
+
+	const tabItems = getTabItems(serviceDetailsData);
+
+	return (
+		<div className="service-details">
+			<div className="service-details__title-bar">
+				<div className="service-details__details-title">Details</div>
+				<div className="service-details__right-actions">
+					{isAnySignalConfigured && (
+						<ServiceStatus serviceStatus={serviceDetailsData.status} />
+					)}
+
+					{!!cloudAccountId &&
+						(isAnySignalConfigured ? (
+							<Button
+								className="configure-button configure-button--default"
+								onClick={openServiceConfigModal}
+							>
+								Configure ({enabledSignals}/{totalSupportedSignals})
+							</Button>
+						) : (
+							<Button
+								type="primary"
+								className="configure-button configure-button--primary"
+								onClick={openServiceConfigModal}
+							>
+								Enable Service
+							</Button>
+						))}
+				</div>
+			</div>
+			<div className="service-details__overview">
+				<MarkdownRenderer
+					variables={{}}
+					markdownContent={serviceDetailsData?.overview}
+				/>
+			</div>
+			<div className="service-details__tabs">
+				<Tabs items={tabItems} />
+			</div>
+			{isConfigureServiceModalOpen && (
+				<ConfigureServiceModal
+					isOpen
+					onClose={(): void => setIsConfigureServiceModalOpen(false)}
+					serviceName={serviceDetailsData.title}
+					serviceId={serviceId || ''}
+					cloudAccountId={cloudAccountId || ''}
+					initialConfig={serviceDetailsData.config}
+					supportedSignals={serviceDetailsData.supported_signals || {}}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default ServiceDetails;

frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom-v5-compat';
+import Spinner from 'components/Spinner';
+import { useGetAccountServices } from 'hooks/integration/aws/useGetAccountServices';
+import useUrlQuery from 'hooks/useUrlQuery';
+
+import ServiceItem from './ServiceItem';
+
+interface ServicesListProps {
+	cloudAccountId: string;
+	filter: 'all_services' | 'enabled' | 'available';
+}
+
+function ServicesList({
+	cloudAccountId,
+	filter,
+}: ServicesListProps): JSX.Element {
+	const urlQuery = useUrlQuery();
+	const navigate = useNavigate();
+	const { data: services = [], isLoading } = useGetAccountServices(
+		cloudAccountId,
+	);
+	const activeService = urlQuery.get('service');
+
+	const handleActiveService = useCallback(
+		(serviceId: string): void => {
+			const latestUrlQuery = new URLSearchParams(window.location.search);
+			latestUrlQuery.set('service', serviceId);
+			navigate({ search: latestUrlQuery.toString() });
+		},
+		[navigate],
+	);
+
+	const filteredServices = useMemo(() => {
+		if (filter === 'all_services') {
+			return services;
+		}
+
+		return services.filter((service) => {
+			const isEnabled =
+				service?.config?.logs?.enabled || service?.config?.metrics?.enabled;
+			return filter === 'enabled' ? isEnabled : !isEnabled;
+		});
+	}, [services, filter]);
+
+	useEffect(() => {
+		if (activeService || !services?.length) {
+			return;
+		}
+
+		handleActiveService(services[0].id);
+	}, [services, activeService, handleActiveService]);
+
+	if (isLoading) {
+		return <Spinner size="large" height="25vh" />;
+	}
+	if (!services) {
+		return <div>No services found</div>;
+	}
+
+	return (
+		<div className="services-list">
+			{filteredServices.map((service) => (
+				<ServiceItem
+					key={service.id}
+					service={service}
+					onClick={handleActiveService}
+					isActive={service.id === activeService}
+				/>
+			))}
+		</div>
+	);
+}
+
+export default ServicesList;