feat: refactor S3 Sync service tests to remove unnecessary act calls and add ResizeObserver mock

- Moved AWS-related components to a new directory structure for better organization.
- Updated import paths to reflect the new structure.
- Removed unused components and styles related to the previous integration setup.
- Adjusted constants and integration logic to ensure compatibility with the new structure.

.github/workflows/jsci.yaml

@@ -61,13 +61,3 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
-  md-languages:
-    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'))
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-      - name: validate md languages
-        run: bash frontend/scripts/validate-md-languages.sh

docs/contributing/go/abstractions.md

@@ -1,104 +0,0 @@
-# Abstractions
-
-This document provides rules for deciding when a new type, interface, or intermediate representation is warranted in Go code. The goal is to keep the codebase navigable by ensuring every abstraction earns its place.
-
-## The cost of a new abstraction
-
-Every exported type, interface, or wrapper is a permanent commitment. It must be named, documented, tested, and understood by every future contributor. It creates a new concept in the codebase vocabulary. Before introducing one, verify that the cost is justified by a concrete benefit that cannot be achieved with existing mechanisms.
-
-## Before you introduce anything new
-
-Answer these four questions. If writing a PR, include the answers in the description.
-
-1. **What already exists?** Name the specific type, function, interface, or library that covers this ground today.
-2. **What does the new abstraction add?** Name the concrete operation, guarantee, or capability. "Cleaner" or "more reusable" are not sufficient; name what the caller can do that it could not do before.
-3. **What does the new abstraction drop?** If it wraps or mirrors an existing structure, list what it cannot represent. Every gap must be either justified or handled with an explicit error.
-4. **Who consumes it?** List the call sites. If there is only one producer and one consumer in the same call chain, you likely need a function, not a type.
-
-## Rules
-
-### 1. Prefer functions over types
-
-If a piece of logic has one input and one output, write a function. Do not create a struct to hold intermediate state that is built in one place and read in one place. A function is easier to test, easier to inline, and does not expand the vocabulary of the codebase.
-
-```go
-// Prefer this:
-func ConvertConfig(src ExternalConfig) (InternalConfig, error)
-
-// Over this:
-type ConfigAdapter struct { ... }
-func NewConfigAdapter(src ExternalConfig) *ConfigAdapter
-func (a *ConfigAdapter) ToInternal() (InternalConfig, error)
-```
-
-The two-step version is only justified when `ConfigAdapter` has multiple distinct consumers that use it in different ways.
-
-### 2. Do not duplicate structures you do not own
-
-When a library or external package produces a structured output, operate on that output directly. Do not create a parallel type that mirrors a subset of its fields.
-
-A partial copy will:
-- **Silently lose data** when the source has fields or variants the copy does not account for.
-- **Drift** when the source evolves and the copy is not updated in lockstep.
-- **Add a conversion step** that doubles the code surface and the opportunity for bugs.
-
-If you need to shield consumers from a dependency, define a narrow interface over the dependency's type rather than copying its shape into a new struct.
-
-### 3. Never silently discard input
-
-If your code receives structured input and cannot handle part of it, return an error. Do not silently return nil, skip the element, or produce a partial result. Silent data loss is the hardest class of bug to detect because the code appears to work, it just produces wrong results.
-
-```go
-// Wrong: silently ignores the unrecognized case.
-default:
-    return nil
-
-// Right: makes the gap visible.
-default:
-    return nil, fmt.Errorf("unsupported %T value: %v", v, v)
-```
-
-This applies broadly: type switches, format conversions, data migrations, enum mappings, configuration parsing. Anywhere a `default` or `else` branch can swallow input, it should surface an error instead.
-
-### 4. Do not expose methods that lose information
-
-A method on a structured type should not strip meaning from the structure it belongs to. If a caller needs to iterate over elements for a specific purpose (validation, aggregation, logging), write that logic as a standalone function that operates on the structure with full context, rather than adding a method that returns a reduced view.
-
-```go
-// Problematic: callers cannot distinguish how items were related.
-func (o *Order) AllLineItems() []LineItem { ... }
-
-// Better: the validation logic operates on the full structure.
-func ValidateOrder(o *Order) error { ... }
-```
-
-Public methods shape how a type is used. Once a lossy accessor exists, callers will depend on it, and the lost information becomes unrecoverable at those call sites.
-
-### 5. Interfaces should be discovered, not predicted
-
-Do not define an interface before you have at least two concrete implementations that need it. An interface with one implementation is not abstraction; it is indirection that makes it harder to navigate from call site to implementation.
-
-The exception is interfaces required for testing (e.g., for mocking an external dependency). In that case, define the interface in the **consuming** package, not the providing package, following the Go convention of [accepting interfaces and returning structs](https://go.dev/wiki/CodeReviewComments#interfaces).
-
-## When a new type IS warranted
-
-See [Types](types.md#when-a-new-type-is-warranted) for the criteria that justify introducing a new type.
-
-## What should I remember?
-
-- A function is almost always simpler than a type. Start with a function; promote to a type only when you have evidence of need.
-- Never silently drop data. If you cannot handle it, error.
-- If your new type mirrors an existing one, you need a strong reason beyond "nicer to work with".
-- If your type has one producer and one consumer, it is indirection, not abstraction.
-- Interfaces come from need (multiple implementations), not from prediction.
-- When in doubt, do not add it. It is easier to add an abstraction later when the need is clear than to remove one after it has spread through the codebase.
-
-## Further reading
-
-These works and our own lessions shaped the above guidelines
-
-- [The Wrong Abstraction](https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction) - Sandi Metz. The wrong abstraction is worse than duplication. If you find yourself passing parameters and adding conditional paths through shared code, inline it back into every caller and let the duplication show you what the right abstraction is.
-- [Write code that is easy to delete, not easy to extend](https://programmingisterrible.com/post/139222674273/write-code-that-is-easy-to-delete-not-easy-to) - tef. Every abstraction is a bet on the future. Optimize for how cheaply you can remove code when the bet is wrong, not for how easily you can extend it when the bet is right.
-- [Goodbye, Clean Code](https://overreacted.io/goodbye-clean-code/) - Dan Abramov. A refactoring that removes duplication can look cleaner while making the code harder to change. Clean-looking and easy-to-change are not the same thing.
-- [A Philosophy of Software Design](https://www.amazon.com/Philosophy-Software-Design-John-Ousterhout/dp/1732102201) - John Ousterhout. Good abstractions are deep: simple interface, complex implementation. A "false abstraction" omits important details while appearing simple, and is worse than no abstraction at all. ([Summary by Pragmatic Engineer](https://blog.pragmaticengineer.com/a-philosophy-of-software-design-review/))
-- [Simplicity is Complicated](https://go.dev/talks/2015/simplicity-is-complicated.slide) - Rob Pike. Go-specific. Fewer orthogonal concepts that compose predictably beat many overlapping ones. Features were left out of Go deliberately; the same discipline applies to your own code.

docs/contributing/go/packages.md

@@ -1,169 +0,0 @@
-# Packages
-
-All shared Go code in SigNoz lives under `pkg/`. Each package represents a distinct domain concept and exposes a clear public interface. This guide covers the conventions for creating, naming, and organising packages so the codebase stays consistent as it grows.
-
-## How should I name a package?
-
-Use short, lowercase, single-word names. No underscores or camelCase (`querier`, `cache`, `authz`, not `query_builder` or `dataStore`).
-
-Names must be **domain-specific**. A package name should tell you what problem domain it deals with, not what data structure it wraps. Prefer `alertmanager` over `manager`, `licensing` over `checker`.
-
-Avoid generic names like `util`, `helpers`, `common`, `misc`, or `base`. If you can't name it, the code probably belongs in an existing package.
-
-## When should I create a new package?
-
-Create a new package when:
-
-- The functionality represents a **distinct domain concept** (e.g., `authz`, `licensing`, `cache`).
-- Two or more other packages would import it; it serves as shared infrastructure.
-- The code has a clear public interface that can stand on its own.
-
-Do **not** create a new package when:
-
-- There is already a package that covers the same domain. Extend the existing package instead.
-- The code is only used in one place. Keep it local to the caller.
-- You are splitting purely for file size. Use multiple files within the same package instead.
-
-## How should I lay out a package?
-
-A typical package looks like:
-
-```
-pkg/cache/
-├── cache.go            # Public interface + exported types
-├── config.go           # Configuration types if needed
-├── memorycache/        # Implementation sub-package
-├── rediscache/         # Another implementation
-└── cachetest/          # Test helpers for consumers
-```
-
-Follow these rules:
-
-1. **Interface-first file**: The file matching the package name (e.g., `cache.go` in `pkg/cache/`) should define the public interface and core exported types. Keep implementation details out of this file.
-
-2. **One responsibility per file**: Name files after what they contain (`config.go`, `handler.go`, `service.go`), not after the package name. If a package merges two concerns, prefix files to group them (e.g., `memory_store.go`, `redis_store.go` in a storage package).
-
-3. **Sub-packages for implementations**: When a package defines an interface with multiple implementations, put each implementation in its own sub-package (`memorycache/`, `rediscache/`). This keeps the parent package import-free of implementation dependencies.
-
-4. **Test helpers in `{pkg}test/`**: If consumers need test mocks or builders, put them in a `{pkg}test/` sub-package (e.g., `cachetest/`, `sqlstoretest/`). This avoids polluting the main package with test-only code.
-
-5. **Test files stay alongside source**: Unit tests go in `_test.go` files next to the code they test, in the same package.
-
-## How should I order code within a file?
-
-Within a single `.go` file, declarations should follow this order:
-
-1. Constants
-2. Variables
-3. Types (structs, interfaces)
-4. Constructor functions (`New...`)
-5. Exported methods and functions
-6. Unexported methods and functions
-
-```go
-// 1. Constants
-const defaultTimeout = 30 * time.Second
-
-// 2. Variables
-var ErrNotFound = errors.New(errors.TypeNotFound, errors.CodeNotFound, "resource not found")
-
-// 3. Types
-type Store struct {
-    db *sql.DB
-}
-
-// 4. Constructors
-func NewStore(db *sql.DB) *Store {
-    return &Store{db: db}
-}
-
-// 5. Exported methods
-func (s *Store) Get(ctx context.Context, id string) (*Resource, error) { ... }
-
-// 6. Unexported methods
-func (s *Store) buildQuery(id string) string { ... }
-```
-
-This ordering makes files predictable. A reader scanning from top to bottom sees the contract (constants, types, constructors) before the implementation (methods), and exported behavior before internal helpers.
-
-## How should I name symbols?
-
-### Exported symbols
-
-- **Interfaces**: For single-method interfaces, follow the standard `-er` suffix convention (`Reader`, `Writer`, `Closer`). For multi-method interfaces, use clear nouns (`Cache`, `Store`, `Provider`).
-- **Constructors**: `New<Type>(...)` (e.g., `NewMemoryCache()`).
-- **Avoid stutter**: Since callers qualify with the package name, don't repeat it. Write `cache.Cache`, not `cache.CacheInterface`. Write `authz.FromRole`, not `authz.AuthzFromRole`.
-
-### Unexported symbols
-
-- Struct receivers: one or two characters (`c`, `f`, `br`).
-- Helper functions: descriptive lowercase names (`parseToken`, `buildQuery`).
-
-### Constants
-
-- Use `PascalCase` for exported constants.
-- When merging files from different origins into one package, watch out for **name collisions** across files. Prefix to disambiguate when two types share a natural name.
-
-## How should I organise imports?
-
-Group imports in three blocks separated by blank lines:
-
-```go
-import (
-    // 1. Standard library
-    "fmt"
-    "net/http"
-
-    // 2. External dependencies
-    "github.com/gorilla/mux"
-
-    // 3. Internal
-    "github.com/SigNoz/signoz/pkg/errors"
-    "github.com/SigNoz/signoz/pkg/types"
-)
-```
-
-Never introduce circular imports. If package A needs package B and B needs A, extract the shared types into a third package (often under `pkg/types/`).
-
-## Where do shared types go?
-
-See [Types](types.md) for full conventions on type placement, naming variants, composition, and constructors.
-
-## How do I merge or move packages?
-
-When two packages are tightly coupled (one imports the other's constants, they cover the same domain), merge them:
-
-1. Pick a domain-specific name for the combined package.
-2. Prefix files to preserve origin (e.g., `memory_store.go`, `redis_store.go`).
-3. Resolve symbol conflicts explicitly; rename with a prefix rather than silently shadowing.
-4. Update all consumers in a single change.
-5. Delete the old packages. Do not leave behind re-export shims.
-6. Verify with `go build ./...`, `go test ./<new-pkg>/...`, and `go vet ./...`.
-
-## When should I use valuer types?
-
-See [Types](types.md#typed-domain-values-pkgvaluer) for valuer types, when to use them, and the enum pattern using `valuer.String`.
-
-## When should I add documentation?
-
-Add a `doc.go` with a package-level comment for any package that is non-trivial or has multiple consumers. Keep it to 1–3 sentences:
-
-```go
-// Package cache provides a caching interface with pluggable backends
-// for in-memory and Redis-based storage.
-package cache
-```
-
-## What should I remember?
-
-- Package names are domain-specific and lowercase. Never generic names like `util` or `common`.
-- The file matching the package name (e.g., `cache.go`) defines the public interface. Implementation details go elsewhere.
-- Within a file, order declarations: constants, variables, types, constructors, exported functions, unexported functions.
-- Segregate types across files by responsibility. A file with 5 unrelated types is harder to navigate than 5 files with one type each.
-- Use valuer types (`valuer.String`, `valuer.Email`, `valuer.UUID`, `valuer.TextDuration`) for domain values that need validation, normalization, or cross-boundary serialization. See [Types](types.md#typed-domain-values-pkgvaluer) for details.
-- Avoid `init()` functions. If you need to initialize a variable, use a package-level `var` with a function call or a `sync.Once`. `init()` hides execution order, makes testing harder, and has caused subtle bugs in large codebases.
-- Never introduce circular imports. Extract shared types into `pkg/types/` when needed.
-- Watch for symbol name collisions when merging packages, prefix to disambiguate.
-- Put test helpers in a `{pkg}test/` sub-package, not in the main package.
-- Before submitting, verify with `go build ./...`, `go test ./<your-pkg>/...`, and `go vet ./...`.
-- Update all consumers when you rename or move symbols.

docs/contributing/go/readme.md

@@ -8,41 +8,4 @@ We adhere to three primary style guides as our foundation:
 - [Code Review Comments](https://go.dev/wiki/CodeReviewComments) - For understanding common comments in code reviews
 - [Google Style Guide](https://google.github.io/styleguide/go/) - Additional practices from Google
 
-We **recommend** (almost enforce) reviewing these guides before contributing to the codebase. They provide valuable insights into writing idiomatic Go code and will help you understand our approach to backend development.
-
-**Discover before inventing.** Before writing new code, search the codebase for existing solutions. SigNoz has established patterns for common problems: `pkg/valuer` for typed domain values, `pkg/errors` for structured errors, `pkg/factory` for provider wiring, `{pkg}test/` sub-packages for test helpers, and shared fixtures for integration tests. Duplicating what already exists creates drift and maintenance burden. When you find an existing pattern, use it. When you don't find one, check with the maintainers before building your own.
-
-## How to approach a feature
-
-Building a feature is not one task, it is a sequence of concerns that build on each other. Work through them in this order:
-
-1. **Domain design (types).** Define the types that represent your domain. What are the entities, what are their relationships, what are the constraints? This is where you decide your data model. Get this right first because everything else depends on it. See [Packages](packages.md) and [Abstractions](abstractions.md).
-
-2. **Structure (services / modules / handlers).** Place your code in the right layer given the current infrastructure. If the current structure does not work for your feature, that is the time to open a discussion and write a technical document, not to silently reshape things in the same PR. See [Handler](handler.md) and [Provider](provider.md).
-
-3. **HTTP endpoints (paths, status codes, errors).** Pay close attention to detail here. Paths, methods, request/response shapes, status codes, error codes. These are the contract with consumers and are expensive to change after release. See [Endpoint](endpoint.md) and [Handler](handler.md).
-
-4. **Database constraints (org_id, foreign keys, migrations).** Ensure org scoping, schema consistency, and migration correctness. See [SQL](sql.md).
-
-5. **Business logic (module layer).** With the types, structure, endpoints, and storage in place, the focus narrows to the actual logic. This is where review should concentrate on correctness, edge cases, and error handling.
-
-This ordering also gives you a natural way to split PRs. Each layer affects a different area and requires a different lens for review. A PR that mixes refactoring with new feature logic is hard to review and risky to ship. Separate them.
-
-For large refactors or features that touch multiple subsystems, write a short technical document outlining the design and get relevant stakeholders aligned before starting implementation. This saves significant back-and-forth during review.
-
-## Area-specific guides
-
-In addition, we have a few additional rules that make certain areas stricter than the above which can be found in area-specific files in this package:
-
-- [Abstractions](abstractions.md) - When to introduce new types and intermediate representations
-- [Errors](errors.md) - Structured error handling
-- [Endpoint](endpoint.md) - HTTP endpoint patterns
-- [Flagger](flagger.md) - Feature flag patterns
-- [Handler](handler.md) - HTTP handler patterns
-- [Integration](integration.md) - Integration testing
-- [Provider](provider.md) - Dependency injection and provider patterns
-- [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
-- [Service](service.md) - Managed service lifecycle with `factory.Service`
-- [SQL](sql.md) - Database and SQL patterns
-- [Testing](testing.md) - Writing tests that catch bugs without becoming a maintenance burden
-- [Types](types.md) - Type placement, naming variants, composition, and constructors
+We **recommend** (almost enforce) reviewing these guides before contributing to the codebase. They provide valuable insights into writing idiomatic Go code and will help you understand our approach to backend development. In addition, we have a few additional rules that make certain areas stricter than the above which can be found in area-specific files in this package.

docs/contributing/go/service.md

@@ -1,269 +0,0 @@
-# Service
-
-A service is a component with a managed lifecycle: it starts, runs for the lifetime of the application, and stops gracefully.
-
-Services are distinct from [providers](provider.md). A provider adapts an external dependency behind an interface. A service has a managed lifecycle that is tied to the lifetime of the application.
-
-## When do you need a service?
-
-You need a service when your component needs to do work that outlives a single method call:
-
-- **Periodic work**: polling an external system, garbage-collecting expired data, syncing state on an interval.
-- **Graceful shutdown**: holding resources (connections, caches, buffers) that must be flushed or closed before the process exits.
-- **Blocking on readiness**: waiting for an external dependency to become available before the application can proceed.
-
-If your component only responds to calls and holds no state that requires cleanup, it is a provider, not a service. If it does both (responds to calls *and* needs a lifecycle), embed `factory.Service` in the provider interface; see [How to create a service](#how-to-create-a-service).
-
-## The interface
-
-The `factory.Service` interface in `pkg/factory/service.go` defines two methods:
-
-```go
-type Service interface {
-    // Starts a service. It should block and should not return until the service is stopped or it fails.
-    Start(context.Context) error
-    // Stops a service.
-    Stop(context.Context) error
-}
-```
-
-`Start` **must block**. It should not return until the service is stopped (returning `nil`) or something goes wrong (returning an error). If `Start` returns an error, the entire application shuts down.
-
-`Stop` should cause `Start` to unblock and return. It must be safe to call from a different goroutine than the one running `Start`.
-
-## Shutdown coordination
-
-Every service uses a `stopC chan struct{}` to coordinate shutdown:
-
-- **Constructor**: `stopC: make(chan struct{})`
-- **Start**: blocks on `<-stopC` (or uses it in a `select` loop)
-- **Stop**: `close(stopC)` to unblock `Start`
-
-This is the standard pattern. Do not use `context.WithCancel` or other mechanisms for service-level shutdown coordination. See the examples in the next section.
-
-## Service shapes
-
-Two shapes recur across the codebase (these are not exhaustive, if a new shape is needed, bring it up for discussion before going ahead with the implementation), implemented by convention rather than base classes.
-
-### Idle service
-
-The service does work during startup or shutdown but has nothing to do while running. `Start` blocks on `<-stopC`. `Stop` closes `stopC` and optionally does cleanup.
-
-The JWT tokenizer (`pkg/tokenizer/jwttokenizer/provider.go`) is a good example. It validates and creates tokens on demand via method calls, but has no periodic work to do. It still needs the service lifecycle so the registry can manage its lifetime:
-
-```go
-// pkg/tokenizer/jwttokenizer/provider.go
-
-func (provider *provider) Start(ctx context.Context) error {
-    <-provider.stopC
-    return nil
-}
-
-func (provider *provider) Stop(ctx context.Context) error {
-    close(provider.stopC)
-    return nil
-}
-```
-
-The instrumentation SDK (`pkg/instrumentation/sdk.go`) is idle while running but does real cleanup in `Stop` shutting down its OpenTelemetry tracer and meter providers:
-
-```go
-// pkg/instrumentation/sdk.go
-
-func (i *SDK) Start(ctx context.Context) error {
-    <-i.startCh
-    return nil
-}
-
-func (i *SDK) Stop(ctx context.Context) error {
-    close(i.startCh)
-    return errors.Join(
-        i.sdk.Shutdown(ctx),
-        i.meterProviderShutdownFunc(ctx),
-    )
-}
-```
-
-### Scheduled service
-
-The service runs an operation repeatedly on a fixed interval. `Start` runs a ticker loop with a `select` on `stopC` and the ticker channel.
-
-The opaque tokenizer (`pkg/tokenizer/opaquetokenizer/provider.go`) garbage-collects expired tokens and flushes cached last-observed-at timestamps to the database on a configurable interval:
-
-```go
-// pkg/tokenizer/opaquetokenizer/provider.go
-
-func (provider *provider) Start(ctx context.Context) error {
-    ticker := time.NewTicker(provider.config.Opaque.GC.Interval)
-    defer ticker.Stop()
-
-    for {
-        select {
-        case <-provider.stopC:
-            return nil
-        case <-ticker.C:
-            orgs, err := provider.orgGetter.ListByOwnedKeyRange(ctx)
-            if err != nil {
-                provider.settings.Logger().ErrorContext(ctx, "failed to get orgs data", "error", err)
-                continue
-            }
-
-            for _, org := range orgs {
-                if err := provider.gc(ctx, org); err != nil {
-                    provider.settings.Logger().ErrorContext(ctx, "failed to garbage collect tokens", "error", err, "org_id", org.ID)
-                }
-
-                if err := provider.flushLastObservedAt(ctx, org); err != nil {
-                    provider.settings.Logger().ErrorContext(ctx, "failed to flush tokens", "error", err, "org_id", org.ID)
-                }
-            }
-        }
-    }
-}
-```
-
-Its `Stop` does a final gc and flush before returning, so no data is lost on shutdown:
-
-```go
-// pkg/tokenizer/opaquetokenizer/provider.go
-
-func (provider *provider) Stop(ctx context.Context) error {
-    close(provider.stopC)
-
-    orgs, err := provider.orgGetter.ListByOwnedKeyRange(ctx)
-    if err != nil {
-        return err
-    }
-
-    for _, org := range orgs {
-        if err := provider.gc(ctx, org); err != nil {
-            provider.settings.Logger().ErrorContext(ctx, "failed to garbage collect tokens", "error", err, "org_id", org.ID)
-        }
-
-        if err := provider.flushLastObservedAt(ctx, org); err != nil {
-            provider.settings.Logger().ErrorContext(ctx, "failed to flush tokens", "error", err, "org_id", org.ID)
-        }
-    }
-
-    return nil
-}
-```
-
-The key points:
-
-- In the loop, `select` on `stopC` and the ticker. Errors in iterations are logged but do not cause the service to return (which would shut down the application).
-- Only return an error from `Start` if the failure is unrecoverable.
-- Use `Stop` to flush or drain any in-memory state before the process exits.
-
-## How to create a service
-
-There are two cases: a standalone service and a provider that is also a service.
-
-### Standalone service
-
-A standalone service only has the `factory.Service` lifecycle i.e it does not serve as a dependency for other packages. The user reconciliation service is an example.
-
-1. Define the service interface in your package. Embed `factory.Service`:
-
-    ```go
-    // pkg/modules/user/service.go
-    package user
-
-    type Service interface {
-        factory.Service
-    }
-    ```
-
-2. Create the implementation in an `impl` sub-package. Use an unexported struct with an exported constructor that returns the interface:
-
-    ```go
-    // pkg/modules/user/impluser/service.go
-    package impluser
-
-    type service struct {
-        settings factory.ScopedProviderSettings
-        // ... dependencies ...
-        stopC    chan struct{}
-    }
-
-    func NewService(
-        providerSettings factory.ProviderSettings,
-        // ... dependencies ...
-    ) user.Service {
-        return &service{
-            settings: factory.NewScopedProviderSettings(providerSettings, "go.signoz.io/pkg/modules/user"),
-            // ... dependencies ...
-            stopC:    make(chan struct{}),
-        }
-    }
-
-    func (s *service) Start(ctx context.Context) error { ... }
-    func (s *service) Stop(ctx context.Context) error { ... }
-    ```
-
-### Provider that is also a service
-
-Many providers need a managed lifecycle: they poll, sync, or garbage-collect in the background. In this case, embed `factory.Service` in the provider interface. The implementation satisfies both the provider methods and `Start`/`Stop`.
-
-```go
-// pkg/tokenizer/tokenizer.go
-package tokenizer
-
-type Tokenizer interface {
-    factory.Service
-    CreateToken(context.Context, *authtypes.Identity, map[string]string) (*authtypes.Token, error)
-    GetIdentity(context.Context, string) (*authtypes.Identity, error)
-    // ... other methods ...
-}
-```
-
-The implementation (e.g. `pkg/tokenizer/opaquetokenizer/provider.go`) implements `Start`, `Stop`, and all the provider methods on the same struct. See the [provider guide](provider.md) for how to set up the factory, config, and constructor. The `stopC` channel and `Start`/`Stop` methods follow the same patterns described above.
-
-## How to wire it up
-
-Wiring happens in `pkg/signoz/signoz.go`.
-
-### 1. Instantiate the service
-
-For a standalone service, call the constructor directly:
-
-```go
-userService := impluser.NewService(providerSettings, store, module, orgGetter, authz, config.User.Root)
-```
-
-For a provider that is also a service, use `factory.NewProviderFromNamedMap` as described in the [provider guide](provider.md). The returned value already implements `factory.Service`.
-
-### 2. Register in the registry
-
-Wrap the service with `factory.NewNamedService` and pass it to `factory.NewRegistry`:
-
-```go
-registry, err := factory.NewRegistry(
-    instrumentation.Logger(),
-    // ... other services ...
-    factory.NewNamedService(factory.MustNewName("user"), userService),
-)
-```
-
-The name must be unique across all services. The registry handles the rest:
-
-- **Start**: launches all services concurrently in goroutines.
-- **Wait**: blocks until a service returns an error, the context is cancelled, or a SIGINT/SIGTERM is received. Any service error triggers application shutdown.
-- **Stop**: stops all services concurrently, collects errors via `errors.Join`.
-
-You do not call `Start` or `Stop` on individual services. The registry does it.
-
-## What should I remember?
-
-- A service has a managed lifecycle: `Start` blocks, `Stop` unblocks it.
-- Use `stopC chan struct{}` for shutdown coordination. `close(stopC)` in `Stop`, `<-stopC` in `Start`.
-- Service shapes: idle (block on `stopC`) and scheduled (ticker loop with `select`).
-- Unexported struct, exported `NewService` constructor returning the interface.
-- First constructor parameter is `factory.ProviderSettings`. Create scoped settings with `factory.NewScopedProviderSettings`.
-- Register in `factory.Registry` with `factory.NewNamedService`. The registry starts and stops everything.
-- Only return an error from `Start` if the failure is unrecoverable. Log and continue for transient errors in polling loops.
-
-## Further reading
-
-- [Google Guava - ServiceExplained](https://github.com/google/guava/wiki/ServiceExplained) - the service lifecycle pattern takes inspiration from this
-- [OpenTelemetry Collector](https://github.com/open-telemetry/opentelemetry-collector) - Worth studying for its approach to building composable components

docs/contributing/go/testing.md

@@ -1,260 +0,0 @@
-# Testing
-
-This document provides rules for writing tests that catch real bugs and do not become a maintenance burden. It covers both how to write good tests and how to recognize bad ones.
-
-## Why we write tests
-
-Tests exist to give confidence that the system behaves correctly. A good test suite lets you change code and know immediately (or in a reasonable time) whether you broke something. A bad test suite lets you change code (and then spend hours figuring out whether the failures are real) and still lets the bugs slip in.
-
-Every test should be written to answer one question: **if this test fails, does that mean a user-visible behavior is broken?** If the answer is no, reconsider whether the test should exist.
-
-Not all tests are equal. Different scopes serve different purposes, and the balance matters.
-
-- **Unit tests**: Fast, focused, test a single function or type in isolation. These form the foundation. They should run in milliseconds, have no I/O, and be fully deterministic.
-- **Integration tests**: Verify that components work together against real dependencies (ClickHouse, PostgreSQL, etc.). Slower, but catch problems that unit tests cannot: real query behavior, configuration issues, serialization mismatches.
-- **End-to-end tests**: Validate full system behavior from the outside. Expensive to write and maintain, but necessary for critical user flows.
-
-When a test can be written at a smaller scope, prefer the smaller scope. But do not force a unit test where an integration test is the natural fit.
-
-## What to test
-
-### Test behaviors, not implementations
-
-A test should verify what the code does, not how it does it (unless the goal of the test is specifically how something happen). If you can refactor the internals of a function e.g, change a query, rename a variable, restructure the logic and no user-visible behavior changes, no test should break.
-
-```go
-// Good: tests the behavior "given this input, expect this output."
-func TestDiscountApplied(t *testing.T) {
-    order := NewOrder(item("widget", 100))
-    order.ApplyDiscount(10)
-    assert.Equal(t, 90, order.Total())
-}
-
-// Bad: tests the implementation "did it call the right internal method?"
-func TestDiscountApplied(t *testing.T) {
-    mockPricer := new(MockPricer)
-    mockPricer.On("CalculateDiscount", 100, 10).Return(90)
-    order := NewOrder(item("widget", 100), WithPricer(mockPricer))
-    order.ApplyDiscount(10)
-    mockPricer.AssertCalled(t, "CalculateDiscount", 100, 10)
-}
-```
-
-The first test survives a refactoring of how discounts are calculated. The second test breaks the moment you rename the method, change its signature, or inline the logic.
-
-**The refactoring test**: before committing a test, ask if someone refactors the internals tomorrow without changing any behavior, will this test break? If yes, consider updating the test.
-
-### Output format as behavior
-
-Some functions exist specifically to produce a formatted output: a query builder generates SQL, a serializer generates JSON, a code generator produces source code. In these cases, the output string *is* the behavior and asserting on it is valid and necessary. The function's contract is the exact output it produces.
-
-This is different from testing a function that *uses* a query internally. If a function's job is to fetch data from a database, the query it sends is an implementation detail and the returned data is the behavior. If its job is to *build* a query for someone else to execute, the query string is the behavior.
-
-The distinction: **is the formatted output the function's product, or the function's mechanism?** Test the product, not the mechanism.
-
-### Test at the public API boundary
-
-Write tests against the exported functions and methods that consumers actually call. Do not test unexported helpers directly. If an unexported function has complex logic worth testing, that is a signal it should be extracted into its own package with its own public API.
-
-### Test edge cases and error paths
-
-The most valuable tests cover the cases that are easy to get wrong:
-
-- Empty inputs, nil inputs, zero values.
-- Boundary conditions (off-by-one, first element, last element).
-- Error conditions (what happens when the dependency fails?).
-- Concurrent access, if the code is designed for it.
-
-A test for the happy path of a trivial function adds little value. A test for the error path of a complex function prevents real bugs.
-
-### The Beyonce Rule
-
-"If you liked it, then you should have put a test on it." Any behavior you want to preserve such as correctness, performance characteristics, security constraints, error handling should be covered by a test. If it breaks and there is no test, that is not a regression; it is an untested assumption.
-
-## How to write a test
-
-### Structure: arrange, act, assert
-
-Every test should have three clearly separated sections:
-
-```go
-func TestTransferInsufficientFunds(t *testing.T) {
-    // Arrange: set up the preconditions.
-    from := NewAccount(50)
-    to := NewAccount(0)
-
-    // Act: perform the operation being tested.
-    err := Transfer(from, to, 100)
-
-    // Assert: verify the outcome.
-    require.Error(t, err)
-    assert.Equal(t, 50, from.Balance())
-    assert.Equal(t, 0, to.Balance())
-}
-```
-
-Do not interleave setup and assertions. Do not put assertions in helper functions that also perform setup. Keep the three sections visually distinct.
-
-### One behavior per test
-
-Each test function should verify one behavior. If a test name needs "and" in it, split it into two tests.
-
-```go
-// Good: one behavior per test.
-func TestParseValidInput(t *testing.T) { ... }
-func TestParseEmptyInput(t *testing.T) { ... }
-func TestParseMalformedInput(t *testing.T) { ... }
-
-// Bad: multiple behaviors in one test.
-func TestParse(t *testing.T) {
-    // test valid input
-    // test empty input
-    // test malformed input
-}
-```
-
-Table-driven tests are fine when the behavior is the same and only the inputs/outputs vary.
-
-### Name tests after behaviors
-
-Test names should describe the scenario and the expected outcome, not the function being tested.
-
-```go
-// Good: describes the behavior.
-func TestWithdrawal_InsufficientFunds_ReturnsError(t *testing.T)
-func TestWithdrawal_ZeroBalance_ReturnsError(t *testing.T)
-
-// Bad: describes the function.
-func TestWithdraw(t *testing.T)
-func TestWithdrawError(t *testing.T)
-```
-
-### Eliminate logic in tests
-
-Tests should be straight-line code. No `if`, no `for`, no `switch`. If you feel the need to add control flow to a test, either split it into multiple tests or restructure the test data.
-
-A test with logic in it needs its own tests. That is a sign something has gone wrong.
-
-### Write clear failure messages
-
-When a test fails, the failure message should tell you what went wrong without reading the test source.
-
-```go
-// Good: failure message explains the context.
-assert.Equal(t, expected, actual, "discount should be applied to order total")
-
-// Bad: failure message is just the default.
-assert.Equal(t, expected, actual)
-```
-
-Use `require` for preconditions that must hold for the rest of the test to make sense. Use `assert` for the actual verifications. This avoids cascading failures from a single root cause.
-
-## How to recognize a bad test
-
-A bad test costs more to maintain than the bugs it prevents. Learning to identify bad tests is as important as learning to write good ones. Always evaluate a test critically before commiting it.
-
-### Tests that duplicate the implementation
-
-If a test contains the same logic as the code it tests, it verifies nothing. It will pass when the code is wrong in the same way the test is wrong, and it will break whenever the code changes even if the change is correct.
-
-A common form: mocking a database, setting up canned rows, calling a function that queries and scans those rows, then asserting that the function returned exactly those rows. The test encodes the query, the row structure, and the scan logic. The same things the production code does. If the function has no branching logic beyond "query and scan," this test is a mirror of the implementation, not a check on it. An integration test against a real database verifies the actual behavior; the mock-based test verifies that the code matches the test author's expectations of the code.
-
-### Tests for functions with no interesting logic
-
-Not every function needs a test. A function that prepares a query, sends it, and scans the result has no branching, no edge cases, and no logic that could be wrong independently of the query being correct. Unit-testing it means mocking the database, which means the test does not verify the query works. It only verifies the function calls the mock in the expected way.
-
-Ask: **what bug would this test catch that would not be caught by the integration test or by the tests of the calling code?** If the answer is nothing, skip the unit test. A missing test is better than a test that provides false confidence.
-
-### Tests that rebuild the dependency boundary
-
-When a test creates an in-package mock of an external interface (database driver, HTTP client, file system) and that mock contains non-trivial logic (reflection-based scanning, response simulation, state machines), the test is now testing its own mock as much as the production code. Bugs in the mock produce false passes or false failures, and the mock must be maintained alongside the real dependency.
-
-If the mock is complex enough to have its own bugs, you have rebuilt the dependency boundary rather than testing against it. Use the real dependency (via integration test) or use a well-maintained fake provided by the dependency's authors.
-
-### Tests that exist for coverage
-
-A test that exercises a function without meaningfully verifying its output adds coverage without adding confidence. Calling a type-conversion function with every numeric type and asserting it does not panic covers lines but does not catch regressions. The function would need to be rewritten to fail, and any such rewrite would be caught by the callers' tests.
-
-Before writing a test, identify the specific failure mode it guards against. If you cannot name one, the test is not worth writing.
-
-### Tests that test the language
-
-Do not test that language type system, standard library, or well-known third-party libraries work correctly. Testing that `reflect.Kind` returns the right value for each type, that pointer dereferencing works, or that a type switch dispatches correctly adds maintenance burden without catching any plausible bug in your code.
-
-## Brittle tests
-
-A brittle test is one that fails when production code changes without an actual bug being introduced. Brittle tests are expensive: they slow down development, train people to ignore failures, and provide no real safety net. Common sources of brittleness:
-
-- **Asserting on implementation details**: Verifying which internal methods were called, in what order, or with what intermediate values. If the method is renamed or the order changes but the output is the same, the test breaks for no reason.
-- **Asserting on serialized representations when the format is not the contract**: Matching exact SQL strings, JSON output, or log messages produced by a function whose job is not to produce that format.
-- **Over-constrained mocks**: Setting up a mock that expects specific arguments in a specific sequence. Any refactoring of the call pattern breaks the mock setup even if behavior is preserved.
-- **Shared mutable state**: Tests that depend on data left behind by other tests. A change in execution order or a new test case causes unrelated failures.
-- **Time-dependence**: Tests that use `time.Now()`, `time.Sleep()`, or real timers. These produce flaky results and break under load.
-
-When you encounter a brittle test, fix or delete it. Do not work around it.
-
-## DAMP
-
-Test code should prioritize clarity (DAMP: Descriptive And Meaningful Phrases).
-
-```go
-// DAMP: each test is self-contained and readable.
-func TestCreateUser(t *testing.T) {
-    user := User{Name: "Alice", Email: "alice@example.com"}
-    err := store.Create(ctx, user)
-    require.NoError(t, err)
-}
-
-func TestCreateDuplicateUser(t *testing.T) {
-    user := User{Name: "Alice", Email: "alice@example.com"}
-    _ = store.Create(ctx, user)
-    err := store.Create(ctx, user)
-    assert.ErrorIs(t, err, ErrAlreadyExists)
-}
-```
-
-Shared setup helpers are fine for constructing objects with sensible defaults. But each test should explicitly set the values it depends on rather than relying on hidden defaults in a shared fixture.
-
-## Flaky tests
-
-A flaky test is one that sometimes passes and sometimes fails without any code change. Flaky tests erode trust in the entire suite. Once people learn to re-run and ignore failures, real bugs slip through.
-
-Common causes and fixes:
-
-- **Timing and sleeps**: Replace `time.Sleep` with channels, condition variables, or polling with a timeout.
-- **Uncontrolled concurrency**: Use deterministic synchronization rather than relying on goroutine scheduling.
-- **Shared state between tests**: Each test should set up and tear down its own state.
-
-If a test is flaky and you cannot fix the root cause quickly, skip or delete it. A skipped test with an explanation is better than a flaky test that trains everyone to ignore red builds.
-
-## Code coverage
-
-Code coverage measures which lines were executed, not whether the code is correct. A function that is called but whose output is never checked has 100% coverage and 0% verification.
-
-Do not use coverage as a target to hit. Use it as a tool to find gaps such as untested error paths, unreachable branches, dead code. A codebase with 60% meaningful coverage is better than one with 95% coverage achieved by testing trivial getters.
-
-## Tests are code
-
-Tests must be maintained and they are not second-class citizen. You should apply the same standards for readability, naming, and structure that you apply to production code. We do not tolerate complexity in tests just because they are tests.
-
-However, tests should be simpler than production code. If a test requires its own helper library, complex setup, or nested control flow, step back and ask whether you are testing the right thing at the right level. This is not a blanket rule but a prompt to pause, assess the situation, and check whether the complexity is justified.
-
-## What should I remember?
-
-- If refactoring internals breaks your test but no behavior changed, the test is likely bad. Delete it or consider updating it.
-- Test what the code does, not how it does it. Verify outputs and state, not method calls.
-- Output format is behavior when the function's job is to produce that format. It is not behavior when the function uses it internally.
-- Ask what specific bug this test catches. If you cannot name one, do not write it.
-- Always evaluate whether the test adds confidence, not just lines.
-- One behavior per test. Name it after the scenario, not the function.
-- No logic in tests. Straight-line code only.
-- Flaky tests are not acceptable. Fix the root cause or nuke the test code.
-- Coverage measures execution, not correctness.
-
-## Mandatory reading
-
-- What to look for in a code review: Tests - https://google.github.io/eng-practices/review/reviewer/looking-for.html#tests
-- Testing Overview - https://abseil.io/resources/swe-book/html/ch11.html
-- Unit Testing - https://abseil.io/resources/swe-book/html/ch12.html
-- Test Doubles - https://abseil.io/resources/swe-book/html/ch13.html
-- Larger Testing - https://abseil.io/resources/swe-book/html/ch14.html

docs/contributing/go/types.md

@@ -1,272 +0,0 @@
-# Types
-
-This guide covers how types are organised, named, constructed, and composed so you can add new ones consistently.
-
-## Where do types live?
-
-Types live in `pkg/types/` and its sub-packages:
-
-```
-pkg/types/
-├── auditable.go          # TimeAuditable, UserAuditable
-├── identity.go           # Identifiable (UUID primary key)
-├── user.go               # User, PostableRegisterOrgAndAdmin, UserStore
-├── alertmanagertypes/    # Alert manager domain types
-│   ├── channel.go
-│   ├── receiver.go
-│   └── config.go
-├── authtypes/            # Auth domain types
-└── ruletypes/            # Rule domain types
-    └── maintenance.go
-```
-
-Follow these rules:
-
-1. **Embeddable building blocks** go in `pkg/types/` directly `Identifiable`, `TimeAuditable`, `UserAuditable`.
-2. **Domain-specific types** go in a sub-package named `pkg/types/<domain>types/` (e.g., `alertmanagertypes`, `ruletypes`, `authtypes`).
-3. **No domain logic** in type packages. Only data structures, constants, and simple methods. Domain services import from type packages, not the other way around.
-4. **Domain services import types, not vice versa.** If a type needs a service, the design is likely wrong and you should restructure so the service operates on the type.
-
-## Type variants
-
-A domain entity often has multiple representations depending on where it appears in the system. We use naming prefixes to distinguish them:
-
-| Prefix | Purpose | Example |
-|---|---|---|
-| `Postable<Type>` | API request input | `PostableRegisterOrgAndAdmin` |
-| `Gettable<Type>` | API response output | `GettablePlannedMaintenance` |
-| `Storable<Type>` | Database model (embeds `bun.BaseModel`) | `StorablePlannedMaintenance` |
-| Plain `<Type>` | Domain logic type | `User` |
-
-Not every entity needs all four variants. Start with the plain type and add variants only when the API or database representation genuinely differs.
-
-Here is a concrete example from `pkg/types/ruletypes/maintenance.go`:
-
-```go
-// Database model embeds bun.BaseModel and composition types
-type StorablePlannedMaintenance struct {
-    bun.BaseModel `bun:"table:planned_maintenance"`
-    types.Identifiable
-    types.TimeAuditable
-    types.UserAuditable
-    Name        string    `bun:"name,type:text,notnull"`
-    Description string    `bun:"description,type:text"`
-    Schedule    *Schedule `bun:"schedule,type:text,notnull"`
-    OrgID       string    `bun:"org_id,type:text"`
-}
-
-// API response: flat struct with JSON tags, computed fields like Status
-type GettablePlannedMaintenance struct {
-    Id          string    `json:"id"`
-    Name        string    `json:"name"`
-    Description string    `json:"description"`
-    Schedule    *Schedule `json:"schedule"`
-    RuleIDs     []string  `json:"alertIds"`
-    CreatedAt   time.Time `json:"createdAt"`
-    CreatedBy   string    `json:"createdBy"`
-    UpdatedAt   time.Time `json:"updatedAt"`
-    UpdatedBy   string    `json:"updatedBy"`
-    Status      string    `json:"status"`
-    Kind        string    `json:"kind"`
-}
-```
-
-When the API shape exactly matches the domain type, use a type alias instead of duplicating fields:
-
-```go
-// From pkg/types/user.go
-type GettableUser = User
-```
-
-## Composition via embedding
-
-`pkg/types/` provides small, reusable structs that you embed into your domain types:
-
-```go
-// pkg/types/identity.go
-type Identifiable struct {
-    ID valuer.UUID `json:"id" bun:"id,pk,type:text"`
-}
-
-// pkg/types/auditable.go
-type TimeAuditable struct {
-    CreatedAt time.Time `bun:"created_at" json:"createdAt"`
-    UpdatedAt time.Time `bun:"updated_at" json:"updatedAt"`
-}
-
-type UserAuditable struct {
-    CreatedBy string `bun:"created_by,type:text" json:"createdBy"`
-    UpdatedBy string `bun:"updated_by,type:text" json:"updatedBy"`
-}
-```
-
-Compose them in a database model:
-
-```go
-type StorablePlannedMaintenance struct {
-    bun.BaseModel `bun:"table:planned_maintenance"`
-    types.Identifiable    // adds ID (UUID primary key)
-    types.TimeAuditable   // adds CreatedAt, UpdatedAt
-    types.UserAuditable   // adds CreatedBy, UpdatedBy
-    Name        string    `bun:"name,type:text,notnull"`
-    Description string    `bun:"description,type:text"`
-}
-```
-
-See [SQL](sql.md) for full database patterns including migrations and queries.
-
-## Constructors
-
-Constructors validate inputs and return a ready-to-use value:
-
-```go
-// New<Type> validates and returns a pointer + error
-func NewUser(displayName string, email valuer.Email, role Role, orgID valuer.UUID) (*User, error) {
-    if email.IsZero() {
-        return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "email is required")
-    }
-    if role == "" {
-        return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "role is required")
-    }
-    if orgID.IsZero() {
-        return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgID is required")
-    }
-
-    return &User{
-        Identifiable:  Identifiable{ID: valuer.GenerateUUID()},
-        DisplayName:   displayName,
-        Email:         email,
-        Role:          role,
-        OrgID:         orgID,
-        TimeAuditable: TimeAuditable{CreatedAt: time.Now(), UpdatedAt: time.Now()},
-    }, nil
-}
-```
-
-Follow these conventions:
-
-- **`New<Type>(args) (*Type, error)`**: validates inputs, returns an error on failure. Use this in production code.
-- **Validation at construction**: check required fields, format constraints, and invariants in the constructor. Callers should not need to validate after construction.
-- **Generate IDs internally**: constructors call `valuer.GenerateUUID()` callers do not pass IDs in.
-- **Set timestamps internally**: constructors set `CreatedAt` and `UpdatedAt` to `time.Now()`.
-
-## Typed domain values (`pkg/valuer/`)
-
-The `pkg/valuer` package provides typed wrappers for common domain values. These types carry validation, normalization, and consistent serialization (JSON, SQL, text) that raw Go primitives do not.
-
-| Type | Wraps | Invariant |
-|---|---|---|
-| `valuer.UUID` | `google/uuid.UUID` | Valid UUIDv7, generated via `GenerateUUID()` |
-| `valuer.Email` | `string` | Valid email format, lowercased and trimmed |
-| `valuer.String` | `string` | Lowercased and trimmed |
-| `valuer.TextDuration` | `time.Duration` | Valid duration, text-serializable |
-
-### When to use a valuer type
-
-Use a valuer type instead of a raw primitive when the value represents a domain concept with any of:
-
-- **Enums**: All enums in the codebase must be backed by `valuer.String`. Do not use raw `string` constants or `iota`-based `int` enums. A struct embedding `valuer.String` with predefined variables gives you normalization, serialization, and an `Enum()` method for OpenAPI schema generation in one place.
-- **Validation**: emails must match a format, UUIDs must be parseable, durations must be valid.
-- **Normalization**: `valuer.String` lowercases and trims input, so comparisons are consistent throughout the system.
-- **Serialization boundary**: the value is stored in a database, sent over the wire, or bound from an HTTP parameter. Valuer types implement `Scan`, `Value`, `MarshalJSON`, `UnmarshalJSON`, and `UnmarshalParam` consistently.
-
-```go
-// Wrong: raw string constant with no validation or normalization.
-const SignalTraces = "traces"
-
-// Right: valuer-backed type that normalizes and serializes consistently.
-type Signal struct {
-    valuer.String
-}
-
-var SignalTraces = Signal{valuer.NewString("traces")}
-```
-
-Only primitive domain types that serve as shared infrastructure belong in `pkg/valuer`. If you need a new base type (like `Email` or `TextDuration`) that multiple packages will embed for validation and serialization, add it there. Domain-specific types that build on top of a valuer (like `Signal` embedding `valuer.String`) belong in their own domain package, not in `pkg/valuer`.
-
-### The `Valuer` interface
-
-Every valuer type implements the `Valuer` interface, which gives you serialization for free:
-
-```go
-type Valuer interface {
-    IsZero() bool                        // check for zero value
-    StringValue() string                 // raw string representation
-    fmt.Stringer                         // String() for printing
-    json.Marshaler / json.Unmarshaler    // JSON
-    sql.Scanner / driver.Valuer          // database
-    encoding.TextMarshaler / TextUnmarshaler  // text
-    ginbinding.BindUnmarshaler           // HTTP query/path params
-}
-```
-
-Use them in struct fields:
-
-```go
-type User struct {
-    Identifiable
-    Email valuer.Email `bun:"email" json:"email"`
-    OrgID valuer.UUID  `bun:"org_id" json:"orgId"`
-}
-```
-
-## Wrappers must add semantics, not just rename
-
-A wrapper type is justified when it adds meaning, validation, or invariants that the underlying type does not carry. It is not justified when it merely renames fields or reorganizes the same data into a different shape.
-
-```go
-// Justified: adds validation that the underlying string does not carry.
-type OrgID struct{ value string }
-func NewOrgID(s string) (OrgID, error) { /* validates format */ }
-
-// Not justified: renames fields with no new invariant or behavior.
-type UserInfo struct {
-    Name  string // same as source.Name
-    Email string // same as source.Email
-}
-```
-
-Ask: what does the wrapper guarantee that the underlying type does not? If the answer is nothing, use the underlying type directly.
-
-## When a new type IS warranted
-
-A new type earns its place when it meets **at least one** of these criteria:
-
-- **Serialization boundary**: It must be persisted, sent over the wire, or written to config. The source type is unsuitable (unexported fields, function pointers, cycles).
-- **Invariant enforcement**: The constructor or methods enforce constraints that raw data does not carry (e.g., non-empty, validated format, bounded range).
-- **Multiple distinct consumers**: Three or more call sites use the type in meaningfully different ways. The type is the shared vocabulary between them.
-- **Dependency firewall**: The type lives in a lightweight package so that consumers avoid importing a heavy dependency.
-
-See [Abstractions](abstractions.md) for the full set of rules on when abstractions are and aren't justified.
-
-## Store interfaces
-
-Each domain type package defines a store interface for persistence. The store interface lives alongside the types it operates on:
-
-```go
-// From pkg/types/ruletypes/maintenance.go
-type MaintenanceStore interface {
-    CreatePlannedMaintenance(context.Context, GettablePlannedMaintenance) (valuer.UUID, error)
-    DeletePlannedMaintenance(context.Context, valuer.UUID) error
-    GetPlannedMaintenanceByID(context.Context, valuer.UUID) (*GettablePlannedMaintenance, error)
-    EditPlannedMaintenance(context.Context, GettablePlannedMaintenance, valuer.UUID) error
-    GetAllPlannedMaintenance(context.Context, string) ([]*GettablePlannedMaintenance, error)
-}
-```
-
-Conventions:
-
-- Name the interface `<Domain>Store` (e.g., `UserStore`, `MaintenanceStore`).
-- Accept `context.Context` as the first parameter.
-- Use typed values (`valuer.UUID`, `valuer.Email`) instead of raw strings for identifiers.
-- Implementations go in separate packages (e.g., `sqlstore/`), see [SQL](sql.md) for details.
-
-## What should I remember?
-
-- Shared types live in `pkg/types/`, domain types in `pkg/types/<domain>types/`.
-- No domain logic in type packages only data structures, constants, and simple methods.
-- Use `Storable`, `Gettable`, `Postable` prefixes when API or database representation differs from the domain type.
-- Embed `Identifiable`, `TimeAuditable`, and `UserAuditable` for standard fields instead of repeating them.
-- Constructors (`New<Type>`) validate, generate IDs, and set timestamps.
-- Use `pkg/valuer/` types instead of raw strings for domain identifiers like UUIDs and emails.
-- Store interfaces live alongside the types they persist and use `context.Context` as the first parameter.

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

@@ -0,0 +1,77 @@
+---
+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

@@ -0,0 +1,124 @@
+---
+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

@@ -0,0 +1,168 @@
+---
+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/jest.config.ts

@@ -19,8 +19,6 @@ const config: Config.InitialOptions = {
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^@signozhq/icons$':
 			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
-		'^react-syntax-highlighter/dist/esm/(.*)$':
-			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
 	},
 	globals: {
 		extensionsToTreatAsEsm: ['.ts'],

frontend/package.json

@@ -52,6 +52,8 @@
 		"@signozhq/combobox": "0.0.2",
 		"@signozhq/command": "0.0.0",
 		"@signozhq/design-tokens": "2.1.1",
+		"@signozhq/dialog": "0.0.2",
+		"@signozhq/drawer": "0.0.4",
 		"@signozhq/icons": "0.1.0",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
@@ -60,10 +62,12 @@
 		"@signozhq/sonner": "0.1.0",
 		"@signozhq/switch": "0.0.2",
 		"@signozhq/table": "0.3.7",
+		"@signozhq/tabs": "0.0.11",
 		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",
 		"@uiw/codemirror-theme-copilot": "4.23.11",
+		"@uiw/codemirror-theme-dracula": "4.25.4",
 		"@uiw/codemirror-theme-github": "4.24.1",
 		"@uiw/react-codemirror": "4.23.10",
 		"@uiw/react-md-editor": "3.23.5",
@@ -135,6 +139,7 @@
 		"react-full-screen": "1.1.1",
 		"react-grid-layout": "^1.3.4",
 		"react-helmet-async": "1.3.0",
+		"react-hook-form": "7.40.0",
 		"react-i18next": "^11.16.1",
 		"react-lottie": "1.2.10",
 		"react-markdown": "8.0.7",
@@ -214,7 +219,7 @@
 		"@types/react-redux": "^7.1.11",
 		"@types/react-resizable": "3.0.3",
 		"@types/react-router-dom": "^5.1.6",
-		"@types/react-syntax-highlighter": "15.5.13",
+		"@types/react-syntax-highlighter": "15.5.7",
 		"@types/redux-mock-store": "1.0.4",
 		"@types/styled-components": "^5.1.4",
 		"@types/uuid": "^8.3.1",
@@ -289,4 +294,4 @@
 		"on-headers": "^1.1.0",
 		"tmp": "0.2.4"
 	}
-}
+}

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

@@ -0,0 +1,312 @@
+<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/scripts/extract-md-languages.sh

@@ -1,13 +0,0 @@
-#!/usr/bin/env bash
-# Extracts unique fenced code block language identifiers from all .md files under frontend/src/
-# Usage: bash frontend/scripts/extract-md-languages.sh
-
-set -euo pipefail
-
-SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-SRC_DIR="$SCRIPT_DIR/../src"
-
-grep -roh '```[a-zA-Z0-9_+-]*' "$SRC_DIR" --include='*.md' \
-  | sed 's/^```//' \
-  | grep -v '^$' \
-  | sort -u

frontend/scripts/validate-md-languages.sh

@@ -1,35 +0,0 @@
-#!/usr/bin/env bash
-# Validates that all fenced code block languages used in .md files are registered
-# in the syntax highlighter.
-# Usage: bash frontend/scripts/validate-md-languages.sh
-
-set -euo pipefail
-
-SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-SYNTAX_HIGHLIGHTER="$SCRIPT_DIR/../src/components/MarkdownRenderer/syntaxHighlighter.ts"
-
-# Get all languages used in .md files
-md_languages=$("$SCRIPT_DIR/extract-md-languages.sh")
-
-# Get all registered languages from syntaxHighlighter.ts
-registered_languages=$(grep -oP "registerLanguage\('\K[^']+" "$SYNTAX_HIGHLIGHTER" | sort -u)
-
-missing_languages=()
-
-for lang in $md_languages; do
-  if ! echo "$registered_languages" | grep -qx "$lang"; then
-    missing_languages+=("$lang")
-  fi
-done
-
-if [ ${#missing_languages[@]} -gt 0 ]; then
-  echo "Error: The following languages are used in .md files but not registered in syntaxHighlighter.ts:"
-  for lang in "${missing_languages[@]}"; do
-    echo "  - $lang"
-  done
-  echo ""
-  echo "Please add them to: frontend/src/components/MarkdownRenderer/syntaxHighlighter.ts"
-  exit 1
-fi
-
-echo "All markdown code block languages are registered in syntaxHighlighter.ts"

frontend/src/AppRoutes/pageComponents.ts

@@ -253,12 +253,18 @@ export const ShortcutsPage = Loadable(
 	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Settings'),
 );
 
-export const InstalledIntegrations = Loadable(
+export const Integrations = 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,7 +18,8 @@ import {
 	ForgotPassword,
 	Home,
 	InfrastructureMonitoring,
-	InstalledIntegrations,
+	Integrations,
+	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
 	LiveLogs,
@@ -389,10 +390,17 @@ 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: InstalledIntegrations,
+		component: Integrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},

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

@@ -5,13 +5,13 @@ import {
 	ServiceData,
 	UpdateServiceConfigPayload,
 	UpdateServiceConfigResponse,
-} from 'container/CloudIntegrationPage/ServicesSection/types';
+} from 'container/Integrations/CloudIntegration/AmazonWebServices/types';
 import {
-	AccountConfigPayload,
 	AccountConfigResponse,
-	ConnectionParams,
+	AWSAccountConfigPayload,
 	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: AccountConfigPayload,
+	payload: AWSAccountConfigPayload,
 ): Promise<AccountConfigResponse> => {
 	const response = await axios.post<AccountConfigResponse>(
 		`/cloud-integrations/aws/accounts/${accountId}/config`,

frontend/src/api/integration/index.ts

@@ -0,0 +1,122 @@
+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/auto-import-registry.d.ts

@@ -18,6 +18,8 @@ import '@signozhq/checkbox';
 import '@signozhq/combobox';
 import '@signozhq/command';
 import '@signozhq/design-tokens';
+import '@signozhq/dialog';
+import '@signozhq/drawer';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
@@ -26,4 +28,5 @@ import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/switch';
 import '@signozhq/table';
+import '@signozhq/tabs';
 import '@signozhq/tooltip';

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

@@ -0,0 +1,109 @@
+.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

@@ -0,0 +1,165 @@
+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

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

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

@@ -0,0 +1,50 @@
+.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

@@ -0,0 +1,61 @@
+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

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

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

@@ -0,0 +1,34 @@
+.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/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -1,6 +1,8 @@
 import { Table } from 'antd';
+import { ServiceData } from 'container/Integrations/CloudIntegration/AmazonWebServices/types';
+import { BarChart2, ScrollText } from 'lucide-react';
 
-import { ServiceData } from './types';
+import './CloudServiceDataCollected.styles.scss';
 
 function CloudServiceDataCollected({
 	logsData,
@@ -61,24 +63,30 @@ 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">Logs</div>
+				<div className="cloud-service-data-collected-table">
+					<div className="cloud-service-data-collected-table-heading">
+						<ScrollText size={14} />
+						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">Metrics</div>
+				<div className="cloud-service-data-collected-table">
+					<div className="cloud-service-data-collected-table-heading">
+						<BarChart2 size={14} />
+						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/components/CodeBlock/CodeBlock.styles.scss

@@ -0,0 +1,39 @@
+.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

@@ -0,0 +1,145 @@
+import { useCallback, useMemo, useState } from 'react';
+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 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 => {
+		navigator.clipboard.writeText(value).then(() => {
+			setIsCopied(true);
+			onCopy?.(value);
+			setTimeout(() => setIsCopied(false), 2000);
+		});
+	}, [value, onCopy]);
+
+	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

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

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('pages/Integrations/utils', () => ({
+jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -2,12 +2,13 @@
 
 import ReactMarkdown from 'react-markdown';
 import { CodeProps } from 'react-markdown/lib/ast-to-react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import logEvent from 'api/common/logEvent';
 import { isEmpty } from 'lodash-es';
 import rehypeRaw from 'rehype-raw';
 
 import CodeCopyBtn from './CodeCopyBtn/CodeCopyBtn';
-import SyntaxHighlighter, { a11yDark } from './syntaxHighlighter';
 
 interface LinkProps {
 	href: string;

frontend/src/components/MarkdownRenderer/syntaxHighlighter.ts

@@ -1,34 +0,0 @@
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
-import docker from 'react-syntax-highlighter/dist/esm/languages/prism/docker';
-import elixir from 'react-syntax-highlighter/dist/esm/languages/prism/elixir';
-import go from 'react-syntax-highlighter/dist/esm/languages/prism/go';
-import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
-import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
-import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
-import rust from 'react-syntax-highlighter/dist/esm/languages/prism/rust';
-import swift from 'react-syntax-highlighter/dist/esm/languages/prism/swift';
-import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
-import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
-import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
-import a11yDark from 'react-syntax-highlighter/dist/esm/styles/prism/a11y-dark';
-
-SyntaxHighlighter.registerLanguage('bash', bash);
-SyntaxHighlighter.registerLanguage('docker', docker);
-SyntaxHighlighter.registerLanguage('dockerfile', docker);
-SyntaxHighlighter.registerLanguage('elixir', elixir);
-SyntaxHighlighter.registerLanguage('go', go);
-SyntaxHighlighter.registerLanguage('javascript', javascript);
-SyntaxHighlighter.registerLanguage('js', javascript);
-SyntaxHighlighter.registerLanguage('json', json);
-SyntaxHighlighter.registerLanguage('jsx', jsx);
-SyntaxHighlighter.registerLanguage('rust', rust);
-SyntaxHighlighter.registerLanguage('swift', swift);
-SyntaxHighlighter.registerLanguage('ts', typescript);
-SyntaxHighlighter.registerLanguage('tsx', tsx);
-SyntaxHighlighter.registerLanguage('typescript', typescript);
-SyntaxHighlighter.registerLanguage('yaml', yaml);
-SyntaxHighlighter.registerLanguage('yml', yaml);
-
-export default SyntaxHighlighter;
-export { a11yDark };

frontend/src/constants/reactQueryKeys.ts

@@ -1,4 +1,19 @@
 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',
 	GET_PUBLIC_DASHBOARD: 'GET_PUBLIC_DASHBOARD',
 	GET_PUBLIC_DASHBOARD_META: 'GET_PUBLIC_DASHBOARD_META',
 	GET_PUBLIC_DASHBOARD_WIDGET_DATA: 'GET_PUBLIC_DASHBOARD_WIDGET_DATA',

frontend/src/constants/routes.ts

@@ -65,6 +65,7 @@ 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

@@ -1,24 +0,0 @@
-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/HeroSection/HeroSection.tsx

@@ -1,34 +0,0 @@
-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/AccountSettingsModal.tsx

@@ -1,213 +0,0 @@
-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/RemoveIntegrationAccount.scss

@@ -1,47 +0,0 @@
-.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/ServicesSection/CloudServiceDashboards.tsx

@@ -1,50 +0,0 @@
-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/ConfigureServiceModal.styles.scss

@@ -1,89 +0,0 @@
-.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

@@ -1,243 +0,0 @@
-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/ServiceDetails.tsx

@@ -1,189 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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;

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

@@ -1,124 +0,0 @@
-import { useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { Color } from '@signozhq/design-tokens';
-import type { SelectProps, TabsProps } from 'antd';
-import { Select, Tabs } from 'antd';
-import { getAwsServices } from 'api/integration/aws';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { ChevronDown } from 'lucide-react';
-
-import ServiceDetails from './ServiceDetails';
-import ServicesList from './ServicesList';
-
-import './ServicesTabs.style.scss';
-
-export enum ServiceFilterType {
-	ALL_SERVICES = 'all_services',
-	ENABLED = 'enabled',
-	AVAILABLE = 'available',
-}
-
-interface ServicesFilterProps {
-	cloudAccountId: string;
-	onFilterChange: (value: ServiceFilterType) => void;
-}
-
-function ServicesFilter({
-	cloudAccountId,
-	onFilterChange,
-}: ServicesFilterProps): JSX.Element | null {
-	const { data: services, isLoading } = useQuery(
-		[REACT_QUERY_KEY.AWS_SERVICES, cloudAccountId],
-		() => getAwsServices(cloudAccountId),
-	);
-
-	const { enabledCount, availableCount } = useMemo(() => {
-		if (!services) {
-			return { enabledCount: 0, availableCount: 0 };
-		}
-
-		return services.reduce(
-			(acc, service) => {
-				const isEnabled =
-					service?.config?.logs?.enabled || service?.config?.metrics?.enabled;
-				return {
-					enabledCount: acc.enabledCount + (isEnabled ? 1 : 0),
-					availableCount: acc.availableCount + (isEnabled ? 0 : 1),
-				};
-			},
-			{ enabledCount: 0, availableCount: 0 },
-		);
-	}, [services]);
-
-	const selectOptions: SelectProps['options'] = useMemo(
-		() => [
-			{ value: 'all_services', label: `All Services (${services?.length || 0})` },
-			{ value: 'enabled', label: `Enabled (${enabledCount})` },
-			{ value: 'available', label: `Available (${availableCount})` },
-		],
-		[services, enabledCount, availableCount],
-	);
-
-	if (isLoading) {
-		return null;
-	}
-	if (!services?.length) {
-		return null;
-	}
-
-	return (
-		<div className="services-filter">
-			<Select
-				style={{ width: '100%' }}
-				defaultValue={ServiceFilterType.ALL_SERVICES}
-				options={selectOptions}
-				className="services-sidebar__select"
-				suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
-				onChange={onFilterChange}
-			/>
-		</div>
-	);
-}
-
-function ServicesSection(): JSX.Element {
-	const urlQuery = useUrlQuery();
-	const cloudAccountId = urlQuery.get('cloudAccountId') || '';
-
-	const [activeFilter, setActiveFilter] = useState<
-		'all_services' | 'enabled' | 'available'
-	>('all_services');
-
-	return (
-		<div className="services-section">
-			<div className="services-section__sidebar">
-				<ServicesFilter
-					cloudAccountId={cloudAccountId}
-					onFilterChange={setActiveFilter}
-				/>
-				<ServicesList cloudAccountId={cloudAccountId} filter={activeFilter} />
-			</div>
-			<div className="services-section__content">
-				<ServiceDetails />
-			</div>
-		</div>
-	);
-}
-
-function ServicesTabs(): JSX.Element {
-	const tabItems: TabsProps['items'] = [
-		{
-			key: 'services',
-			label: 'Services For Integration',
-			children: <ServicesSection />,
-		},
-	];
-
-	return (
-		<div className="services-tabs">
-			<Tabs defaultActiveKey="services" items={tabItems} />
-		</div>
-	);
-}
-
-export default ServicesTabs;

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/ConfigureServiceModalS3Sync.test.tsx

@@ -1,161 +0,0 @@
-import { act, fireEvent, screen, waitFor } from '@testing-library/react';
-import { server } from 'mocks-server/server';
-import { rest, RestRequest } from 'msw'; // Import RestRequest for req.json() typing
-
-import { UpdateServiceConfigPayload } from '../types';
-import { accountsResponse, CLOUD_ACCOUNT_ID, initialBuckets } from './mockData';
-import {
-	assertGenericModalElements,
-	assertS3SyncSpecificElements,
-	renderModal,
-} from './utils';
-
-// --- MOCKS ---
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: jest.fn(() => ({
-		get: jest.fn((paramName: string) => {
-			if (paramName === 'cloudAccountId') {
-				return CLOUD_ACCOUNT_ID;
-			}
-			return null;
-		}),
-	})),
-}));
-
-// --- TEST SUITE ---
-describe('ConfigureServiceModal for S3 Sync service', () => {
-	jest.setTimeout(10000);
-	beforeEach(() => {
-		server.use(
-			rest.get(
-				'http://localhost/api/v1/cloud-integrations/aws/accounts',
-				(req, res, ctx) => res(ctx.json(accountsResponse)),
-			),
-		);
-	});
-
-	it('should render with logs collection switch and bucket selectors (no buckets initially selected)', async () => {
-		act(() => {
-			renderModal({}); // No initial S3 buckets, defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements(); // Use new generic assertion
-		await assertS3SyncSpecificElements({}); // Use new S3-specific assertion
-	});
-
-	it('should render with logs collection switch and bucket selectors (some buckets initially selected)', async () => {
-		act(() => {
-			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements(); // Use new generic assertion
-		await assertS3SyncSpecificElements(initialBuckets); // Use new S3-specific assertion
-	});
-
-	it('should enable save button after adding a new bucket via combobox', async () => {
-		act(() => {
-			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements();
-		await assertS3SyncSpecificElements(initialBuckets);
-
-		expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
-
-		const targetCombobox = screen.getAllByRole('combobox')[0];
-		const newBucketName = 'a-newly-added-bucket';
-
-		act(() => {
-			fireEvent.change(targetCombobox, { target: { value: newBucketName } });
-			fireEvent.keyDown(targetCombobox, {
-				key: 'Enter',
-				code: 'Enter',
-				keyCode: 13,
-			});
-		});
-
-		await waitFor(() => {
-			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
-			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
-		});
-	});
-
-	it('should send updated bucket configuration on save', async () => {
-		let capturedPayload: UpdateServiceConfigPayload | null = null;
-		const mockUpdateConfigUrl =
-			'http://localhost/api/v1/cloud-integrations/aws/services/s3sync/config';
-
-		// Override POST handler specifically for this test to capture payload
-		server.use(
-			rest.post(mockUpdateConfigUrl, async (req: RestRequest, res, ctx) => {
-				capturedPayload = await req.json();
-				return res(ctx.status(200), ctx.json({ message: 'Config updated' }));
-			}),
-		);
-		act(() => {
-			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements();
-		await assertS3SyncSpecificElements(initialBuckets);
-
-		expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
-
-		const newBucketName = 'another-new-bucket';
-		// As before, targeting the first combobox, assumed to be for 'ap-south-1'.
-		const targetCombobox = screen.getAllByRole('combobox')[0];
-
-		act(() => {
-			fireEvent.change(targetCombobox, { target: { value: newBucketName } });
-			fireEvent.keyDown(targetCombobox, {
-				key: 'Enter',
-				code: 'Enter',
-				keyCode: 13,
-			});
-		});
-
-		await waitFor(() => {
-			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
-			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
-			act(() => {
-				fireEvent.click(screen.getByRole('button', { name: /save/i }));
-			});
-		});
-
-		await waitFor(() => {
-			expect(capturedPayload).not.toBeNull();
-		});
-
-		expect(capturedPayload).toEqual({
-			cloud_account_id: CLOUD_ACCOUNT_ID,
-			config: {
-				logs: {
-					enabled: true,
-					s3_buckets: {
-						'us-east-2': ['first-bucket', 'second-bucket'], // Existing buckets
-						'ap-south-1': [newBucketName], // Newly added bucket for the first region
-					},
-				},
-				metrics: {},
-			},
-		});
-	});
-
-	it('should not render S3 bucket region selector UI for services other than s3sync', async () => {
-		const otherServiceId = 'cloudwatch';
-		act(() => {
-			renderModal({}, otherServiceId);
-		});
-		await assertGenericModalElements();
-
-		await waitFor(() => {
-			expect(
-				screen.queryByRole('heading', { name: /select s3 buckets by region/i }),
-			).not.toBeInTheDocument();
-
-			const regions = accountsResponse.data.accounts[0]?.config?.regions || [];
-			regions.forEach((region) => {
-				expect(
-					screen.queryByText(`Enter S3 bucket names for ${region}`),
-				).not.toBeInTheDocument();
-			});
-		});
-	});
-});

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/mockData.ts

@@ -1,44 +0,0 @@
-import { IConfigureServiceModalProps } from '../ConfigureServiceModal';
-
-const CLOUD_ACCOUNT_ID = '123456789012';
-
-const initialBuckets = { 'us-east-2': ['first-bucket', 'second-bucket'] };
-
-const accountsResponse = {
-	status: 'success',
-	data: {
-		accounts: [
-			{
-				id: 'a1b2c3d4-e5f6-7890-1234-567890abcdef',
-				cloud_account_id: CLOUD_ACCOUNT_ID,
-				config: {
-					regions: ['ap-south-1', 'ap-south-2', 'us-east-1', 'us-east-2'],
-				},
-				status: {
-					integration: {
-						last_heartbeat_ts_ms: 1747114366214,
-					},
-				},
-			},
-		],
-	},
-};
-
-const defaultModalProps: Omit<IConfigureServiceModalProps, 'initialConfig'> = {
-	isOpen: true,
-	onClose: jest.fn(),
-	serviceName: 'S3 Sync',
-	serviceId: 's3sync',
-	cloudAccountId: CLOUD_ACCOUNT_ID,
-	supportedSignals: {
-		logs: true,
-		metrics: false,
-	},
-};
-
-export {
-	accountsResponse,
-	CLOUD_ACCOUNT_ID,
-	defaultModalProps,
-	initialBuckets,
-};

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/utils.tsx

@@ -1,78 +0,0 @@
-import { render, RenderResult, screen, waitFor } from '@testing-library/react';
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
-
-import ConfigureServiceModal from '../ConfigureServiceModal';
-import { accountsResponse, defaultModalProps } from './mockData';
-
-/**
- * Renders the ConfigureServiceModal with specified S3 bucket initial configurations.
- */
-const renderModal = (
-	initialConfigLogsS3Buckets: Record<string, string[]> = {},
-	serviceId = 's3sync',
-): RenderResult => {
-	const initialConfig = {
-		logs: { enabled: true, s3_buckets: initialConfigLogsS3Buckets },
-		metrics: { enabled: false },
-	};
-
-	return render(
-		<MockQueryClientProvider>
-			<ConfigureServiceModal
-				{...defaultModalProps}
-				serviceId={serviceId}
-				initialConfig={initialConfig}
-			/>
-		</MockQueryClientProvider>,
-	);
-};
-
-/**
- * Asserts that generic UI elements of the modal are present.
- */
-const assertGenericModalElements = async (): Promise<void> => {
-	await waitFor(() => {
-		expect(screen.getByRole('switch')).toBeInTheDocument();
-		expect(screen.getByText(/log collection/i)).toBeInTheDocument();
-		expect(
-			screen.getByText(
-				/to ingest logs from your aws services, you must complete several steps/i,
-			),
-		).toBeInTheDocument();
-	});
-};
-
-/**
- * Asserts the state of S3 bucket selectors for each region, specific to S3 Sync.
- */
-const assertS3SyncSpecificElements = async (
-	expectedBucketsByRegion: Record<string, string[]> = {},
-): Promise<void> => {
-	const regions = accountsResponse.data.accounts[0]?.config?.regions || [];
-
-	await waitFor(() => {
-		expect(
-			screen.getByRole('heading', { name: /select s3 buckets by region/i }),
-		).toBeInTheDocument();
-
-		regions.forEach((region) => {
-			expect(screen.getByText(region)).toBeInTheDocument();
-			const bucketsForRegion = expectedBucketsByRegion[region] || [];
-			if (bucketsForRegion.length > 0) {
-				bucketsForRegion.forEach((bucket) => {
-					expect(screen.getByText(bucket)).toBeInTheDocument();
-				});
-			} else {
-				expect(
-					screen.getByText(`Enter S3 bucket names for ${region}`),
-				).toBeInTheDocument();
-			}
-		});
-	});
-};
-
-export {
-	assertGenericModalElements,
-	assertS3SyncSpecificElements,
-	renderModal,
-};

frontend/src/container/Download/Download.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
 import { CloudDownloadOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps } from 'antd';
+import { Excel } from 'antd-table-saveas-excel';
 import { unparse } from 'papaparse';
 
 import { DownloadProps } from './Download.types';
@@ -8,36 +8,25 @@ import { DownloadProps } from './Download.types';
 import './Download.styles.scss';
 
 function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
-	const [isDownloading, setIsDownloading] = useState(false);
-
-	const downloadExcelFile = async (): Promise<void> => {
-		setIsDownloading(true);
-
-		try {
-			const headers = Object.keys(Object.assign({}, ...data)).map((item) => {
-				const updatedTitle = item
-					.split('_')
-					.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-					.join(' ');
-				return {
-					title: updatedTitle,
-					dataIndex: item,
-				};
-			});
-
-			const excelLib = await import('antd-table-saveas-excel');
-
-			const excel = new excelLib.Excel();
-			excel
-				.addSheet(fileName)
-				.addColumns(headers)
-				.addDataSource(data, {
-					str2Percent: true,
-				})
-				.saveAs(`${fileName}.xlsx`);
-		} finally {
-			setIsDownloading(false);
-		}
+	const downloadExcelFile = (): void => {
+		const headers = Object.keys(Object.assign({}, ...data)).map((item) => {
+			const updatedTitle = item
+				.split('_')
+				.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+				.join(' ');
+			return {
+				title: updatedTitle,
+				dataIndex: item,
+			};
+		});
+		const excel = new Excel();
+		excel
+			.addSheet(fileName)
+			.addColumns(headers)
+			.addDataSource(data, {
+				str2Percent: true,
+			})
+			.saveAs(`${fileName}.xlsx`);
 	};
 
 	const downloadCsvFile = (): void => {
@@ -70,7 +59,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 		<Dropdown menu={menu} trigger={['click']}>
 			<Button
 				className="download-button"
-				loading={isLoading || isDownloading}
+				loading={isLoading}
 				size="small"
 				type="link"
 			>

frontend/src/container/DownloadV2/DownloadV2.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
 import { Button, Popover, Typography } from 'antd';
+import { Excel } from 'antd-table-saveas-excel';
 import { FileDigit, FileDown, Sheet } from 'lucide-react';
 import { unparse } from 'papaparse';
 
@@ -8,34 +8,25 @@ import { DownloadProps } from './DownloadV2.types';
 import './DownloadV2.styles.scss';
 
 function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
-	const [isDownloading, setIsDownloading] = useState(false);
-
-	const downloadExcelFile = async (): Promise<void> => {
-		setIsDownloading(true);
-
-		try {
-			const headers = Object.keys(Object.assign({}, ...data)).map((item) => {
-				const updatedTitle = item
-					.split('_')
-					.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-					.join(' ');
-				return {
-					title: updatedTitle,
-					dataIndex: item,
-				};
-			});
-			const excelLib = await import('antd-table-saveas-excel');
-			const excel = new excelLib.Excel();
-			excel
-				.addSheet(fileName)
-				.addColumns(headers)
-				.addDataSource(data, {
-					str2Percent: true,
-				})
-				.saveAs(`${fileName}.xlsx`);
-		} finally {
-			setIsDownloading(false);
-		}
+	const downloadExcelFile = (): void => {
+		const headers = Object.keys(Object.assign({}, ...data)).map((item) => {
+			const updatedTitle = item
+				.split('_')
+				.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+				.join(' ');
+			return {
+				title: updatedTitle,
+				dataIndex: item,
+			};
+		});
+		const excel = new Excel();
+		excel
+			.addSheet(fileName)
+			.addColumns(headers)
+			.addDataSource(data, {
+				str2Percent: true,
+			})
+			.saveAs(`${fileName}.xlsx`);
 	};
 
 	const downloadCsvFile = (): void => {
@@ -63,7 +54,6 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 						type="text"
 						onClick={downloadExcelFile}
 						className="action-btns"
-						loading={isDownloading}
 					>
 						Excel (.xlsx)
 					</Button>

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/HeroSection.style.scss

@@ -1,8 +1,10 @@
 .hero-section {
-	height: 308px;
-	padding: 26px 16px;
+	padding: 16px;
+
 	display: flex;
-	gap: 24px;
+	flex-direction: column;
+	gap: 16px;
+
 	position: relative;
 	overflow: hidden;
 	background-position: right;
@@ -10,35 +12,37 @@
 	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;
 
-		.title {
-			color: var(--bg-vanilla-100);
-			font-size: 24px;
-			font-weight: 500;
-			line-height: 20px;
-			letter-spacing: -0.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;
+			}
 		}
 
-		.description {
+		&__description {
 			color: var(--bg-vanilla-400);
 			font-size: 12px;
 			font-weight: 400;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/HeroSection.tsx

@@ -0,0 +1,26 @@
+import AccountActions from './components/AccountActions';
+
+import './HeroSection.style.scss';
+
+function HeroSection(): JSX.Element {
+	return (
+		<div className="hero-section">
+			<div className="hero-section__details">
+				<div className="hero-section__details-header">
+					<div className="hero-section__icon">
+						<img src="/Logos/aws-dark.svg" alt="AWS" />
+					</div>
+
+					<div className="hero-section__details-title">AWS</div>
+				</div>
+				<div className="hero-section__details-description">
+					AWS is a cloud computing platform that provides a range of services for
+					building and running applications.
+				</div>
+			</div>
+			<AccountActions />
+		</div>
+	);
+}
+
+export default HeroSection;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountActions.style.scss

@@ -4,14 +4,56 @@
 
 		&-with-account {
 			display: flex;
-			flex-direction: column;
-			gap: 10px;
+			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;
+						}
+					}
+				}
+			}
 		}
 	}
 
 	&__input-skeleton {
 		width: 300px;
-		margin-bottom: 16px;
 	}
 
 	&__new-account-button-skeleton {
@@ -22,11 +64,13 @@
 	&__account-settings-button-skeleton {
 		width: 140px;
 	}
+
 	&__action-buttons {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 	}
+
 	&__action-button {
 		font-family: 'Inter';
 		border-radius: 2px;
@@ -54,44 +98,6 @@
 	}
 }
 
-.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/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountActions.tsx

@@ -1,58 +1,21 @@
 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 { Button, Select, Skeleton } from 'antd';
+import { Select, Skeleton } from 'antd';
 import { 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 { Check, ChevronDown } from 'lucide-react';
+import { ChevronDown, Dot, PencilLine, Plug, Plus } from 'lucide-react';
 
-import { CloudAccount } from '../../ServicesSection/types';
+import { CloudAccount } from '../../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,
@@ -73,55 +36,51 @@ function AccountActionsRenderer({
 	if (isLoading) {
 		return (
 			<div className="hero-section__actions-with-account">
-				<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>
+				<Skeleton.Input active block className="hero-section__input-skeleton" />
 			</div>
 		);
 	}
+
 	if (accounts?.length) {
 		return (
 			<div className="hero-section__actions-with-account">
-				<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__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>
 				<div className="hero-section__action-buttons">
 					<Button
-						type="primary"
-						className="hero-section__action-button primary"
-						onClick={onIntegrationModalOpen}
-					>
-						Add New AWS Account
-					</Button>
-					<Button
-						type="default"
-						className="hero-section__action-button secondary"
+						variant="link"
+						size="sm"
+						color="secondary"
+						prefixIcon={<PencilLine size={14} />}
 						onClick={onAccountSettingsModalOpen}
 					>
-						Account Settings
+						Edit Account
+					</Button>
+
+					<Button
+						variant="link"
+						size="sm"
+						color="secondary"
+						onClick={onIntegrationModalOpen}
+						prefixIcon={<Plus size={14} />}
+					>
+						Add New Account
 					</Button>
 				</div>
 			</div>
@@ -129,8 +88,11 @@ function AccountActionsRenderer({
 	}
 	return (
 		<Button
-			className="hero-section__action-button primary"
+			variant="solid"
+			color="primary"
+			prefixIcon={<Plug size={14} />}
 			onClick={onIntegrationModalOpen}
+			size="sm"
 		>
 			Integrate Now
 		</Button>

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountSettingsModal.style.scss

@@ -14,8 +14,13 @@
 		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;
@@ -38,40 +43,36 @@
 				}
 			}
 		}
-		&-regions-switch {
+
+		&-region-selector {
 			display: flex;
 			flex-direction: column;
-			gap: 10px;
+			gap: 4px;
+
 			&-title {
-				color: var(--bg-vanilla-100);
+				color: var(--l1-foreground);
 				font-size: 14px;
 				font-weight: 500;
 				line-height: 20px;
 				letter-spacing: -0.07px;
 			}
-			&-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;
-				}
+
+			&-description {
+				color: var(--l2-foreground);
+				font-size: 12px;
+				line-height: 18px;
+				letter-spacing: -0.06px;
 			}
 		}
-		&-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/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountSettingsModal.tsx

@@ -0,0 +1,172 @@
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DrawerWrapper } from '@signozhq/drawer';
+import { Form } from 'antd';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useAccountSettingsModal } from 'hooks/integration/aws/useAccountSettingsModal';
+import useUrlQuery from 'hooks/useUrlQuery';
+import history from 'lib/history';
+import { Save } from 'lucide-react';
+
+import logEvent from '../../../../../../api/common/logEvent';
+import { CloudAccount } from '../../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,
+		isSaveDisabled,
+		setSelectedRegions,
+		setIncludeAllRegions,
+		handleSubmit,
+		handleClose,
+	} = useAccountSettingsModal({ onClose, account, setActiveAccount });
+
+	const queryClient = useQueryClient();
+	const urlQuery = useUrlQuery();
+
+	const handleRemoveIntegrationAccountSuccess = useCallback((): 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,
+		});
+	}, [
+		queryClient,
+		urlQuery,
+		handleClose,
+		account?.id,
+		account?.cloud_account_id,
+	]);
+
+	const renderAccountDetails = useCallback(() => {
+		return (
+			<Form
+				form={form}
+				layout="vertical"
+				initialValues={{
+					selectedRegions,
+					includeAllRegions,
+				}}
+			>
+				<div className="account-settings-modal__body">
+					<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>
+
+					<div className="account-settings-modal__body-region-selector">
+						<div className="account-settings-modal__body-region-selector-title">
+							Which regions do you want to monitor?
+						</div>
+						<div className="account-settings-modal__body-region-selector-description">
+							Choose only the regions you want SigNoz to monitor.
+						</div>
+
+						<RegionSelector
+							selectedRegions={selectedRegions}
+							setSelectedRegions={setSelectedRegions}
+							setIncludeAllRegions={setIncludeAllRegions}
+						/>
+					</div>
+				</div>
+
+				<div className="account-settings-modal__footer">
+					<RemoveIntegrationAccount
+						accountId={account?.id}
+						onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
+					/>
+
+					<Button
+						variant="solid"
+						color="secondary"
+						disabled={isSaveDisabled}
+						onClick={handleSubmit}
+						loading={isLoading}
+						prefixIcon={<Save size={14} />}
+					>
+						Update Changes
+					</Button>
+				</div>
+			</Form>
+		);
+	}, [
+		form,
+		selectedRegions,
+		includeAllRegions,
+		account?.id,
+		handleRemoveIntegrationAccountSuccess,
+		isSaveDisabled,
+		handleSubmit,
+		isLoading,
+		setSelectedRegions,
+		setIncludeAllRegions,
+	]);
+
+	const handleDrawerOpenChange = useCallback(
+		(open: boolean): void => {
+			if (!open) {
+				handleClose();
+			}
+		},
+		[handleClose],
+	);
+
+	return (
+		<DrawerWrapper
+			open={true}
+			type="panel"
+			className="account-settings-modal"
+			header={{
+				title: 'Account Settings',
+			}}
+			// 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',
+			// }}
+			direction="right"
+			showCloseButton
+			content={renderAccountDetails()}
+			onOpenChange={handleDrawerOpenChange}
+		/>
+	);
+}
+
+export default AccountSettingsModal;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/CloudAccountSetupModal.style.scss

@@ -1,4 +1,26 @@
 .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);
@@ -20,6 +42,8 @@
 	}
 
 	.cloud-account-setup-form {
+		padding: 16px;
+
 		.disabled {
 			opacity: 0.4;
 		}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/CloudAccountSetupModal.tsx

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import SignozModal from 'components/SignozModal/SignozModal';
+import { DrawerWrapper } from '@signozhq/drawer';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useIntegrationModal } from 'hooks/integration/aws/useIntegrationModal';
 import { SquareArrowOutUpRight } from 'lucide-react';
@@ -12,7 +13,6 @@ import {
 	ModalStateEnum,
 } from '../types';
 import { RegionForm } from './RegionForm';
-import { RegionSelector } from './RegionSelector';
 import { SuccessView } from './SuccessView';
 
 import './CloudAccountSetupModal.style.scss';
@@ -32,14 +32,12 @@ function CloudAccountSetupModal({
 		isGeneratingUrl,
 		setSelectedRegions,
 		setIncludeAllRegions,
-		handleIncludeAllRegionsChange,
 		handleRegionSelect,
 		handleSubmit,
 		handleClose,
 		setActiveView,
 		allRegions,
 		accountId,
-		selectedDeploymentRegion,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
@@ -50,45 +48,47 @@ function CloudAccountSetupModal({
 			return <SuccessView />;
 		}
 
-		if (activeView === ActiveViewEnum.SELECT_REGIONS) {
-			return (
-				<RegionSelector
+		return (
+			<div className="cloud-account-setup-modal__content">
+				<RegionForm
+					form={form}
+					modalState={modalState}
+					setModalState={setModalState}
 					selectedRegions={selectedRegions}
+					includeAllRegions={includeAllRegions}
+					onRegionSelect={handleRegionSelect}
+					onSubmit={handleSubmit}
+					accountId={accountId}
+					handleRegionChange={handleRegionChange}
+					connectionParams={connectionParams}
+					isConnectionParamsLoading={isConnectionParamsLoading}
 					setSelectedRegions={setSelectedRegions}
 					setIncludeAllRegions={setIncludeAllRegions}
 				/>
-			);
-		}
 
-		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}
-			/>
+				<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>
 		);
 	}, [
 		modalState,
-		activeView,
 		form,
 		setModalState,
 		selectedRegions,
 		includeAllRegions,
-		handleIncludeAllRegionsChange,
 		handleRegionSelect,
 		handleSubmit,
 		accountId,
-		selectedDeploymentRegion,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
@@ -162,28 +162,39 @@ function CloudAccountSetupModal({
 
 	const modalConfig = getModalConfig();
 
+	const handleDrawerOpenChange = (open: boolean): void => {
+		if (!open) {
+			handleClose();
+		}
+	};
+
 	return (
-		<SignozModal
-			open
+		<DrawerWrapper
+			open={true}
+			type="panel"
 			className="cloud-account-setup-modal"
-			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,
+			// allowOutsideClick={false}
+			content={renderContent()}
+			onOpenChange={handleDrawerOpenChange}
+			direction="right"
+			showCloseButton
+			header={{
+				title: modalConfig.title,
 			}}
-			cancelButtonProps={modalConfig.cancelButtonProps}
-			width={672}
-		>
-			{renderContent()}
-		</SignozModal>
+			// 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}
+		/>
 	);
 }
 

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/IntegrateNowFormSections.tsx

@@ -1,17 +1,19 @@
+import { Dispatch, SetStateAction } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Form, Select, Switch } from 'antd';
+import { Form, Select } 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 {
@@ -33,8 +35,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) => (
@@ -50,19 +52,13 @@ function RegionDeploymentSection({
 }
 
 function MonitoringRegionsSection({
-	includeAllRegions,
 	selectedRegions,
-	onIncludeAllRegionsChange,
-	getRegionPreviewText,
-	onRegionSelect,
-	isFormDisabled,
+	setSelectedRegions,
+	setIncludeAllRegions,
 }: {
-	includeAllRegions: boolean;
 	selectedRegions: string[];
-	onIncludeAllRegionsChange: (checked: boolean) => void;
-	getRegionPreviewText: (regions: string[]) => string[];
-	onRegionSelect: () => void;
-	isFormDisabled: boolean;
+	setSelectedRegions: Dispatch<SetStateAction<string[]>>;
+	setIncludeAllRegions: Dispatch<SetStateAction<boolean>>;
 }): JSX.Element {
 	return (
 		<div className="cloud-account-setup-form__form-group">
@@ -73,51 +69,12 @@ function MonitoringRegionsSection({
 				Choose only the regions you want SigNoz to monitor. You can enable all at
 				once, or pick specific ones:
 			</div>
-			<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>
+
+			<RegionSelector
+				selectedRegions={selectedRegions}
+				setSelectedRegions={setSelectedRegions}
+				setIncludeAllRegions={setIncludeAllRegions}
+			/>
 		</div>
 	);
 }

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RegionForm.tsx

@@ -1,11 +1,12 @@
 import { useRef } from 'react';
 import { Form } from 'antd';
 import cx from 'classnames';
-import { useAccountStatus } from 'hooks/integration/aws/useAccountStatus';
-import { AccountStatusResponse } from 'types/api/integrations/aws';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { useGetAccountStatus } from 'hooks/integration/useGetAccountStatus';
+import { AccountStatusResponse } from 'types/api/integrations/types';
 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 {
@@ -15,56 +16,48 @@ 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 } = 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) {
+	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: () => {
 				setModalState(ModalStateEnum.ERROR);
-				logEvent('AWS Integration: Account connection attempt timed out', {
-					id: accountId,
-				});
-			}
+			},
 		},
-		onError: () => {
-			setModalState(ModalStateEnum.ERROR);
-		},
-	});
+	);
 
 	const isFormDisabled =
 		modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
@@ -87,15 +80,11 @@ export function RegionForm({
 					regions={regions}
 					handleRegionChange={handleRegionChange}
 					isFormDisabled={isFormDisabled}
-					selectedDeploymentRegion={selectedDeploymentRegion}
 				/>
 				<MonitoringRegionsSection
-					includeAllRegions={includeAllRegions}
 					selectedRegions={selectedRegions}
-					onIncludeAllRegionsChange={onIncludeAllRegionsChange}
-					getRegionPreviewText={getRegionPreviewText}
-					onRegionSelect={onRegionSelect}
-					isFormDisabled={isFormDisabled}
+					setSelectedRegions={setSelectedRegions}
+					setIncludeAllRegions={setIncludeAllRegions}
 				/>
 				<ComplianceNote />
 				<RenderConnectionFields

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RegionSelector.style.scss

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

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RemoveIntegrationAccount.scss

@@ -0,0 +1,32 @@
+.remove-integration-account-modal {
+	.ant-modal-content {
+		background-color: var(--l1-background);
+		border: 1px solid var(--l3-background);
+		border-radius: 4px;
+		padding: 12px;
+	}
+
+	.ant-modal-close {
+		color: var(--l1-foreground);
+	}
+
+	.ant-modal-header {
+		background-color: var(--l1-background);
+		color: var(--l1-foreground);
+
+		.ant-modal-title {
+			color: var(--l1-foreground);
+		}
+	}
+
+	.ant-modal-body {
+		margin-top: 16px;
+		color: var(--l1-foreground);
+		background-color: var(--l1-background);
+	}
+
+	.ant-modal-footer {
+		margin-top: 16px;
+		background-color: var(--l1-background);
+	}
+}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RemoveIntegrationAccount.tsx

@@ -1,12 +1,13 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
-import { Button, Modal } from 'antd';
+import { Button } from '@signozhq/button';
+import { Modal } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
-import removeAwsIntegrationAccount from 'api/Integrations/removeAwsIntegrationAccount';
+import removeAwsIntegrationAccount from 'api/integration/aws/removeAwsIntegrationAccount';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { INTEGRATION_TELEMETRY_EVENTS } from 'container/Integrations/constants';
 import { useNotifications } from 'hooks/useNotifications';
-import { X } from 'lucide-react';
-import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils';
+import { Unlink } from 'lucide-react';
 
 import './RemoveIntegrationAccount.scss';
 
@@ -20,7 +21,7 @@ function RemoveIntegrationAccount({
 	const { notifications } = useNotifications();
 	const [isModalOpen, setIsModalOpen] = useState(false);
 
-	const showModal = (): void => {
+	const handleDisconnect = (): void => {
 		setIsModalOpen(true);
 	};
 
@@ -50,42 +51,37 @@ function RemoveIntegrationAccount({
 	};
 
 	return (
-		<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>
+		<div className="remove-integration-account-container">
 			<Button
-				className="remove-integration-account__button"
-				icon={<X size={14} />}
-				onClick={(): void => showModal()}
+				variant="solid"
+				color="destructive"
+				prefixIcon={<Unlink size={14} />}
+				size="sm"
+				onClick={handleDisconnect}
+				disabled={isRemoveIntegrationLoading}
 			>
-				Remove
+				Disconnect
 			</Button>
+
 			<Modal
-				className="remove-integration-modal"
+				className="remove-integration-account-modal"
 				open={isModalOpen}
 				title="Remove integration"
 				onOk={handleOk}
 				onCancel={handleCancel}
-				okText="Remove Integration"
+				okText="Remove Account"
 				okButtonProps={{
 					danger: true,
-					disabled: isRemoveIntegrationLoading,
+					loading: isRemoveIntegrationLoading,
 				}}
 			>
-				<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>
+				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.
 			</Modal>
 		</div>
 	);

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RenderConnectionParams.tsx

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

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/types.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { FormInstance } from 'antd';
-import { ConnectionParams } from 'types/api/integrations/aws';
+import { ConnectionParams } from 'types/api/integrations/types';
 
 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/Integrations/CloudIntegration/AmazonWebServices/S3BucketsSelector/S3BucketsSelector.styles.scss

@@ -0,0 +1,53 @@
+.s3-buckets-selector {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 12px;
+	background: var(--l2-background);
+	border-radius: 4px;
+
+	.s3-buckets-selector-title {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		font-size: 12px;
+		color: var(--l2-foreground);
+	}
+
+	.s3-buckets-selector-content {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+
+		.s3-buckets-selector-region {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			gap: 8px;
+
+			.s3-buckets-selector-region-header {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+			}
+
+			.s3-buckets-selector-region-help {
+				color: var(--l2-foreground);
+				font-size: 12px;
+				line-height: 18px;
+				letter-spacing: -0.06px;
+			}
+
+			.s3-buckets-selector-region-select {
+				flex: 1;
+
+				.ant-select {
+					width: 100%;
+				}
+			}
+		}
+	}
+}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/S3BucketsSelector/S3BucketsSelector.tsx

@@ -1,9 +1,9 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Form, Select, Skeleton, Typography } from 'antd';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Select, Skeleton } from 'antd';
 import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
 import useUrlQuery from 'hooks/useUrlQuery';
 
-const { Title } = Typography;
+import './S3BucketsSelector.styles.scss';
 
 interface S3BucketsSelectorProps {
 	onChange?: (bucketsByRegion: Record<string, string[]>) => void;
@@ -24,6 +24,10 @@ function S3BucketsSelector({
 		Record<string, string[]>
 	>(initialBucketsByRegion);
 
+	useEffect(() => {
+		setBucketsByRegion(initialBucketsByRegion);
+	}, [initialBucketsByRegion]);
+
 	// Find the active AWS account based on the URL query parameter
 	const activeAccount = useMemo(
 		() =>
@@ -81,37 +85,41 @@ function S3BucketsSelector({
 
 	return (
 		<div className="s3-buckets-selector">
-			<Title level={5}>Select S3 Buckets by Region</Title>
+			<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);
 
-			{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>
-				);
-			})}
+					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>
 		</div>
 	);
 }

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards.styles.scss

@@ -0,0 +1,65 @@
+.aws-service-dashboards {
+	border-radius: 6px;
+	border: 1px solid var(--l3-background);
+	background: var(--l1-background);
+
+	.aws-service-dashboards-title {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 8px;
+
+		color: var(--l2-foreground);
+		font-family: Inter;
+		font-size: 13px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+
+		padding: 8px 16px;
+		border-bottom: 1px solid var(--l3-background);
+	}
+
+	.aws-service-dashboards-items {
+		display: flex;
+		flex-direction: column;
+
+		.aws-service-dashboard-item {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			padding: 12px 16px 12px 16px;
+			border-bottom: 1px solid var(--l3-background);
+			&:last-child {
+				border-bottom: none;
+			}
+
+			&.aws-service-dashboard-item-clickable {
+				cursor: pointer;
+				&:hover {
+					background-color: var(--l1-background);
+				}
+			}
+
+			.aws-service-dashboard-item-title {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+
+			.aws-service-dashboard-item-description {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 150% */
+			}
+		}
+	}
+}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards.tsx

@@ -0,0 +1,38 @@
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+
+import { ServiceData } from '../types';
+
+import './ServiceDashboards.styles.scss';
+
+function ServiceDashboards({ service }: { service: ServiceData }): JSX.Element {
+	const dashboards = service?.assets?.dashboards || [];
+	const { safeNavigate } = useSafeNavigate();
+
+	return (
+		<div className="aws-service-dashboards">
+			<div className="aws-service-dashboards-title">Dashboards</div>
+			<div className="aws-service-dashboards-items">
+				{dashboards.map((dashboard) => (
+					<div
+						key={dashboard.id}
+						className={`aws-service-dashboard-item ${
+							dashboard.url ? 'aws-service-dashboard-item-clickable' : ''
+						}`}
+						onClick={(): void => {
+							if (dashboard.url) {
+								safeNavigate(dashboard.url);
+							}
+						}}
+					>
+						<div className="aws-service-dashboard-item-title">{dashboard.title}</div>
+						<div className="aws-service-dashboard-item-description">
+							{dashboard.description}
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+export default ServiceDashboards;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDetails/ServiceDetails.styles.scss

@@ -0,0 +1,209 @@
+.aws-service-details-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+
+	.aws-service-details-tabs {
+		margin-top: 8px;
+
+		// remove the padding left from the first div of the tabs component
+		// this needs to be handled in the tabs component
+		> div:first-child {
+			padding-left: 0;
+		}
+
+		.aws-service-details-data-collected-content-logs,
+		.aws-service-details-data-collected-content-metrics {
+			display: flex;
+			flex-direction: row;
+			gap: 8px;
+
+			.aws-service-details-data-collected-content-title {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				gap: 8px;
+
+				color: var(--l2-foreground);
+
+				/* Bifrost (Ancient)/Content/sm */
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+
+		.aws-service-details-overview {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+
+			.aws-service-details-overview-configuration {
+				display: flex;
+				flex-direction: column;
+
+				border-radius: 4px;
+				border: 1px solid var(--l3-background);
+				background: var(--l1-background);
+
+				.aws-service-details-overview-configuration-title {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					justify-content: space-between;
+					gap: 8px;
+					width: 100%;
+
+					border-radius: 4px 4px 0 0;
+
+					padding: 8px 12px;
+
+					.aws-service-details-overview-configuration-title-text {
+						color: var(--l1-foreground);
+						font-family: Inter;
+						font-size: 13px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: 22px; /* 157.143% */
+						letter-spacing: -0.07px;
+
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						gap: 8px;
+					}
+
+					.configuration-action {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						gap: 8px;
+					}
+				}
+
+				.aws-service-details-overview-configuration-s3-buckets {
+					padding: 12px;
+					background: var(--l1-background);
+				}
+
+				.aws-service-details-overview-configuration-content {
+					display: flex;
+					flex-direction: column;
+					gap: 16px;
+
+					padding: 12px;
+					background: var(--l1-background);
+
+					.aws-service-details-overview-configuration-content-item {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						justify-content: space-between;
+						gap: 8px;
+					}
+				}
+
+				.aws-service-details-overview-configuration-actions {
+					display: flex;
+					flex-direction: row;
+					justify-content: flex-end;
+					gap: 8px;
+					padding: 8px 12px;
+
+					border-top: 1px solid var(--l3-background);
+					background: var(--l1-background);
+
+					.discard-btn {
+						width: 100px;
+					}
+
+					.save-btn {
+						width: 100px;
+					}
+				}
+
+				.aws-service-details-overview-configuration-title-text-select-all {
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 138.462% */
+				}
+			}
+
+			.aws-service-details-actions {
+				display: flex;
+				flex-direction: row;
+				gap: 8px;
+				padding: 12px 0;
+			}
+
+			.aws-service-dashboards {
+				border-radius: 6px;
+				border: 1px solid var(--l3-background);
+				background: var(--l1-background);
+
+				.aws-service-dashboards-title {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					gap: 8px;
+
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+
+					padding: 8px 16px;
+					border-bottom: 1px solid var(--l3-background);
+				}
+
+				.aws-service-dashboards-items {
+					display: flex;
+					flex-direction: column;
+					gap: 16px;
+
+					.aws-service-dashboard-item {
+						display: flex;
+						flex-direction: column;
+						gap: 8px;
+						padding: 12px 16px 12px 16px;
+
+						&.aws-service-dashboard-item-clickable {
+							cursor: pointer;
+							&:hover {
+								background-color: var(--l1-background);
+							}
+						}
+
+						.aws-service-dashboard-item-title {
+							color: var(--l1-foreground);
+							font-family: Inter;
+							font-size: 13px;
+							font-style: normal;
+							font-weight: 500;
+							line-height: 20px; /* 142.857% */
+							letter-spacing: -0.07px;
+						}
+
+						.aws-service-dashboard-item-description {
+							color: var(--l2-foreground);
+							font-family: Inter;
+							font-size: 12px;
+							font-style: normal;
+							font-weight: 400;
+							line-height: 18px; /* 150% */
+						}
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDetails/ServiceDetails.tsx

@@ -0,0 +1,372 @@
+import { useCallback, useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { Color } from '@signozhq/design-tokens';
+import { toast } from '@signozhq/sonner';
+import { Switch } from '@signozhq/switch';
+import Tabs from '@signozhq/tabs';
+import { Popover, Skeleton } from 'antd';
+import logEvent from 'api/common/logEvent';
+import CloudServiceDataCollected from 'components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import ServiceDashboards from 'container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards';
+import { AWSServiceConfig } from 'container/Integrations/CloudIntegration/AmazonWebServices/types';
+import { useServiceDetails } from 'hooks/integration/aws/useServiceDetails';
+import { useUpdateServiceConfig } from 'hooks/integration/aws/useUpdateServiceConfig';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { CheckCircle, Save, TriangleAlert, X } from 'lucide-react';
+
+import { ConfigConnectionStatus } from '../../ConfigConnectionStatus/ConfigConnectionStatus';
+import S3BucketsSelector from '../S3BucketsSelector/S3BucketsSelector';
+
+import './ServiceDetails.styles.scss';
+
+type ServiceConfigFormValues = {
+	logsEnabled: boolean;
+	metricsEnabled: boolean;
+	s3BucketsByRegion: Record<string, string[]>;
+};
+
+function ServiceDetails(): JSX.Element | null {
+	const urlQuery = useUrlQuery();
+	const cloudAccountId = urlQuery.get('cloudAccountId');
+	const serviceId = urlQuery.get('service');
+
+	const {
+		data: serviceDetailsData,
+		isLoading: isServiceDetailsLoading,
+	} = useServiceDetails(serviceId || '', cloudAccountId || undefined);
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	const { config } = serviceDetailsData ?? {};
+
+	const awsConfig = config as AWSServiceConfig | undefined;
+
+	const {
+		control,
+		handleSubmit: handleFormSubmit,
+		reset,
+		watch,
+		formState: { isDirty },
+	} = useForm<ServiceConfigFormValues>({
+		defaultValues: {
+			logsEnabled: awsConfig?.logs?.enabled || false,
+			metricsEnabled: awsConfig?.metrics?.enabled || false,
+			s3BucketsByRegion: awsConfig?.logs?.s3_buckets || {},
+		},
+	});
+
+	const resetToAwsConfig = useCallback((): void => {
+		reset({
+			logsEnabled: awsConfig?.logs?.enabled || false,
+			metricsEnabled: awsConfig?.metrics?.enabled || false,
+			s3BucketsByRegion: awsConfig?.logs?.s3_buckets || {},
+		});
+	}, [awsConfig, reset]);
+
+	useEffect(() => {
+		resetToAwsConfig();
+	}, [resetToAwsConfig]);
+
+	// log telemetry event on visiting details of a service.
+	useEffect(() => {
+		if (serviceId) {
+			logEvent('AWS Integration: Service viewed', {
+				cloudAccountId,
+				serviceId,
+			});
+		}
+	}, [cloudAccountId, serviceId]);
+
+	const {
+		mutate: updateServiceConfig,
+		isLoading: isUpdatingServiceConfig,
+	} = useUpdateServiceConfig();
+
+	const queryClient = useQueryClient();
+
+	const handleDiscard = useCallback((): void => {
+		resetToAwsConfig();
+	}, [resetToAwsConfig]);
+
+	const onSubmit = useCallback(
+		async (values: ServiceConfigFormValues): Promise<void> => {
+			const { logsEnabled, metricsEnabled, s3BucketsByRegion } = values;
+
+			try {
+				if (!serviceId || !cloudAccountId) {
+					return;
+				}
+
+				updateServiceConfig(
+					{
+						serviceId,
+						payload: {
+							cloud_account_id: cloudAccountId,
+							config: {
+								logs: {
+									enabled: logsEnabled,
+									s3_buckets: s3BucketsByRegion,
+								},
+								metrics: {
+									enabled: metricsEnabled,
+								},
+							},
+						},
+					},
+					{
+						onSuccess: () => {
+							// Immediately sync form state to remove dirty flag and hide actions,
+							// instead of waiting for the refetch to complete.
+							reset(values);
+
+							queryClient.invalidateQueries([
+								REACT_QUERY_KEY.AWS_SERVICE_DETAILS,
+								serviceId,
+							]);
+
+							logEvent('AWS Integration: Service settings saved', {
+								cloudAccountId,
+								serviceId,
+								logsEnabled,
+								metricsEnabled,
+							});
+						},
+						onError: (error) => {
+							console.error('Failed to update service config:', error);
+
+							toast.error('Failed to update service config', {
+								description: error?.message,
+							});
+						},
+					},
+				);
+			} catch (error) {
+				console.error('Form submission failed:', error);
+			}
+		},
+		[serviceId, cloudAccountId, updateServiceConfig, queryClient, reset],
+	);
+
+	if (isServiceDetailsLoading) {
+		return (
+			<div className="service-details-loading">
+				<Skeleton active />
+				<Skeleton active />
+			</div>
+		);
+	}
+
+	if (!serviceDetailsData) {
+		return null;
+	}
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const renderOverview = (): JSX.Element => {
+		const logsEnabled = watch('logsEnabled');
+		const metricsEnabled = watch('metricsEnabled');
+		const s3BucketsByRegion = watch('s3BucketsByRegion');
+
+		const isLogsSupported = serviceDetailsData?.supported_signals?.logs || false;
+		const isMetricsSupported =
+			serviceDetailsData?.supported_signals?.metrics || false;
+
+		const logsStatus = serviceDetailsData?.status?.logs || null;
+		const metricsStatus = serviceDetailsData?.status?.metrics || null;
+
+		const logsConnectionStatus = logsStatus?.find(
+			(log) => log.last_received_ts_ms > 0,
+		);
+
+		const metricsConnectionStatus = metricsStatus?.find(
+			(metric) => metric.last_received_ts_ms > 0,
+		);
+
+		const hasUnsavedChanges = isDirty;
+
+		const isS3SyncBucketsMissing =
+			serviceId === 's3sync' &&
+			logsEnabled &&
+			(!s3BucketsByRegion || Object.keys(s3BucketsByRegion).length === 0);
+
+		return (
+			<div className="aws-service-details-overview ">
+				{!isServiceDetailsLoading && (
+					<form
+						className="aws-service-details-overview-configuration"
+						onSubmit={handleFormSubmit(onSubmit)}
+					>
+						{isLogsSupported && (
+							<div className="aws-service-details-overview-configuration-logs">
+								<div className="aws-service-details-overview-configuration-title">
+									<div className="aws-service-details-overview-configuration-title-text">
+										{logsEnabled && (
+											<Popover
+												content={<ConfigConnectionStatus status={logsStatus} />}
+												trigger="hover"
+												placement="right"
+												overlayClassName="config-connection-status-popover"
+											>
+												<div className="aws-service-details-overview-configuration-title-text-icon">
+													{logsConnectionStatus ? (
+														<CheckCircle size={16} color={Color.BG_FOREST_500} />
+													) : (
+														<TriangleAlert size={16} color={Color.BG_AMBER_500} />
+													)}
+												</div>
+											</Popover>
+										)}
+
+										<span>Log Collection</span>
+									</div>
+									<div className="configuration-action">
+										<Controller<ServiceConfigFormValues, 'logsEnabled'>
+											control={control}
+											name="logsEnabled"
+											render={({ field }): JSX.Element => (
+												<Switch
+													checked={field.value}
+													disabled={isUpdatingServiceConfig}
+													onCheckedChange={(checked): void => {
+														field.onChange(checked);
+													}}
+												/>
+											)}
+										/>
+									</div>
+								</div>
+
+								{logsEnabled && serviceId === 's3sync' && (
+									<div className="aws-service-details-overview-configuration-s3-buckets">
+										<Controller<ServiceConfigFormValues, 's3BucketsByRegion'>
+											control={control}
+											name="s3BucketsByRegion"
+											render={({ field }): JSX.Element => (
+												<S3BucketsSelector
+													initialBucketsByRegion={field.value}
+													onChange={field.onChange}
+												/>
+											)}
+										/>
+									</div>
+								)}
+							</div>
+						)}
+
+						{isMetricsSupported && (
+							<div className="aws-service-details-overview-configuration-metrics">
+								<div className="aws-service-details-overview-configuration-title">
+									<div className="aws-service-details-overview-configuration-title-text">
+										{metricsEnabled && (
+											<Popover
+												content={<ConfigConnectionStatus status={metricsStatus} />}
+												trigger="hover"
+												placement="right"
+												overlayClassName="config-connection-status-popover"
+											>
+												<div className="aws-service-details-overview-configuration-title-text-icon">
+													{metricsConnectionStatus ? (
+														<CheckCircle size={16} color={Color.BG_FOREST_500} />
+													) : (
+														<TriangleAlert size={16} color={Color.BG_AMBER_500} />
+													)}
+												</div>
+											</Popover>
+										)}
+
+										<span>Metric Collection</span>
+									</div>
+									<div className="configuration-action">
+										<Controller<ServiceConfigFormValues, 'metricsEnabled'>
+											control={control}
+											name="metricsEnabled"
+											render={({ field }): JSX.Element => (
+												<Switch
+													checked={field.value}
+													disabled={isUpdatingServiceConfig}
+													onCheckedChange={field.onChange}
+												/>
+											)}
+										/>
+									</div>
+								</div>
+							</div>
+						)}
+
+						{hasUnsavedChanges && (
+							<div className="aws-service-details-overview-configuration-actions">
+								<Button
+									variant="solid"
+									color="secondary"
+									onClick={handleDiscard}
+									disabled={isUpdatingServiceConfig}
+									size="xs"
+									prefixIcon={<X size={14} />}
+									className="discard-btn"
+									type="button"
+								>
+									Discard
+								</Button>
+								<Button
+									variant="solid"
+									color="primary"
+									size="xs"
+									className="save-btn"
+									prefixIcon={<Save size={14} />}
+									type="submit"
+									loading={isUpdatingServiceConfig}
+									disabled={isS3SyncBucketsMissing || isUpdatingServiceConfig}
+								>
+									Save
+								</Button>
+							</div>
+						)}
+					</form>
+				)}
+
+				<MarkdownRenderer
+					variables={{}}
+					markdownContent={serviceDetailsData?.overview}
+				/>
+				<ServiceDashboards service={serviceDetailsData} />
+			</div>
+		);
+	};
+
+	const renderDataCollected = (): JSX.Element => {
+		return (
+			<div className="aws-service-details-data-collected-table">
+				<CloudServiceDataCollected
+					logsData={serviceDetailsData?.data_collected?.logs || []}
+					metricsData={serviceDetailsData?.data_collected?.metrics || []}
+				/>
+			</div>
+		);
+	};
+
+	return (
+		<div className="aws-service-details-container">
+			<Tabs
+				defaultValue="overview"
+				className="aws-service-details-tabs"
+				items={[
+					{
+						children: renderOverview(),
+						key: 'overview',
+						label: 'Overview',
+					},
+					{
+						children: renderDataCollected(),
+						key: 'data-collected',
+						label: 'Data Collected',
+					},
+				]}
+				variant="secondary"
+			/>
+		</div>
+	);
+}
+
+export default ServiceDetails;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServicesList.tsx

@@ -0,0 +1,150 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom-v5-compat';
+import { Skeleton } from 'antd';
+import cx from 'classnames';
+import { useGetAccountServices } from 'hooks/integration/aws/useGetAccountServices';
+import useUrlQuery from 'hooks/useUrlQuery';
+
+import { Service } from './types';
+
+interface ServicesListProps {
+	cloudAccountId: string;
+}
+
+/** Service is enabled if even one sub item (log or metric) is enabled */
+function hasAnySubItemEnabled(service: Service): boolean {
+	const logs = service.config?.logs ?? {};
+	const metrics = service.config?.metrics ?? {};
+	return logs.enabled || metrics.enabled;
+}
+
+function ServicesList({ cloudAccountId }: ServicesListProps): JSX.Element {
+	const urlQuery = useUrlQuery();
+	const navigate = useNavigate();
+	const { data: awsServices = [], 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 enabledServices = useMemo(
+		() => awsServices?.filter(hasAnySubItemEnabled) ?? [],
+		[awsServices],
+	);
+
+	// Derive from enabled to guarantee each service is in exactly one list
+	const enabledIds = useMemo(() => new Set(enabledServices.map((s) => s.id)), [
+		enabledServices,
+	]);
+	const notEnabledServices = useMemo(
+		() => awsServices?.filter((s) => !enabledIds.has(s.id)) ?? [],
+		[awsServices, enabledIds],
+	);
+
+	useEffect(() => {
+		const allServices = [...enabledServices, ...notEnabledServices];
+
+		// If a service is already selected and still exists in the refreshed list, keep it
+		if (activeService && allServices.some((s) => s.id === activeService)) {
+			// Update the selected service reference to the fresh object from the new list
+			const freshService = allServices.find((s) => s.id === activeService);
+			if (freshService) {
+				handleActiveService(freshService.id);
+			}
+			return;
+		}
+
+		// No valid selection — pick a default
+		if (enabledServices.length > 0) {
+			handleActiveService(enabledServices[0].id);
+		} else if (notEnabledServices.length > 0) {
+			handleActiveService(notEnabledServices[0].id);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [enabledServices, notEnabledServices]);
+
+	useEffect(() => {
+		if (activeService || !awsServices?.length) {
+			return;
+		}
+
+		handleActiveService(awsServices[0].id);
+	}, [awsServices, activeService, handleActiveService]);
+
+	if (isLoading) {
+		return (
+			<div className="services-list-loading">
+				<Skeleton active />
+				<Skeleton active />
+			</div>
+		);
+	}
+
+	if (!awsServices?.length) {
+		return <div>No services found</div>;
+	}
+
+	const isEnabledServicesEmpty = enabledServices.length === 0;
+	const isNotEnabledServicesEmpty = notEnabledServices.length === 0;
+
+	const renderServiceItem = (service: Service): JSX.Element => {
+		return (
+			<div
+				className={cx('aws-services-list-view-sidebar-content-item', {
+					active: service.id === activeService,
+				})}
+				key={service.id}
+				onClick={(): void => handleActiveService(service.id)}
+			>
+				<img
+					src={service.icon}
+					alt={service.title}
+					className="aws-services-list-view-sidebar-content-item-icon"
+				/>
+				<div className="aws-services-list-view-sidebar-content-item-title">
+					{service.title}
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<div className="aws-services-list-view">
+			<div className="aws-services-list-view-sidebar">
+				<div className="aws-services-list-view-sidebar-content">
+					<div className="aws-services-enabled">
+						<div className="aws-services-list-view-sidebar-content-header">
+							Enabled
+						</div>
+						{enabledServices.map((service) => renderServiceItem(service))}
+
+						{isEnabledServicesEmpty && (
+							<div className="aws-services-list-view-sidebar-content-item-empty-message">
+								No enabled services
+							</div>
+						)}
+					</div>
+
+					{!isNotEnabledServicesEmpty && (
+						<div className="aws-services-not-enabled">
+							<div className="aws-services-list-view-sidebar-content-header">
+								Not Enabled
+							</div>
+							{notEnabledServices.map((service) => renderServiceItem(service))}
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default ServicesList;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServicesTabs.style.scss

@@ -1,4 +1,8 @@
 .services-tabs {
+	display: flex;
+	flex-direction: column;
+	height: calc(100% - 54px); /* 54px is the height of the header */
+
 	.ant-tabs-tab {
 		font-family: 'Inter';
 		padding: 16px 4px 14px;
@@ -18,21 +22,42 @@
 		background: var(--bg-robin-500);
 	}
 }
+
 .services-section {
 	display: flex;
-	gap: 10px;
+	flex: 1;
+	min-height: 0;
+
 	&__sidebar {
-		width: 16%;
-		padding: 0 16px;
+		width: 240px;
+		border-right: 1px solid var(--bg-slate-400);
+		height: 100%;
 	}
 
 	&__content {
-		width: 84%;
-		padding: 16px;
+		flex: 1;
+		height: 100%;
 	}
 }
+
+.service-details-loading,
+.services-list-loading {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	width: 100%;
+	padding: 12px;
+
+	.service-details-loading-item {
+		width: 100%;
+		height: 100%;
+		background-color: var(--bg-slate-400);
+	}
+}
+
 .services-filter {
-	padding: 16px 0;
+	padding: 12px;
+
 	.ant-select-selector {
 		background-color: var(--bg-ink-300) !important;
 		border: 1px solid var(--bg-slate-400) !important;
@@ -46,6 +71,99 @@
 	}
 }
 
+.aws-services-list-view {
+	height: 100%;
+
+	.aws-services-list-view-sidebar {
+		width: 240px;
+		height: 100%;
+		border-right: 1px solid var(--l3-background);
+		padding: 12px;
+
+		.aws-services-list-view-sidebar-content {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			.aws-services-enabled {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+			}
+
+			.aws-services-not-enabled {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+			}
+
+			.aws-services-list-view-sidebar-content-header {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 600;
+				line-height: 18px; /* 163.636% */
+				letter-spacing: 0.44px;
+				text-transform: uppercase;
+			}
+
+			.aws-services-list-view-sidebar-content-item {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				gap: 10px;
+				padding: 4px 12px;
+				border-radius: 4px;
+
+				cursor: pointer;
+
+				.aws-services-list-view-sidebar-content-item-icon {
+					width: 20px;
+					height: 20px;
+				}
+
+				.aws-services-list-view-sidebar-content-item-title {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 128.571% */
+				}
+
+				&:hover {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 128.571% */
+				}
+
+				&.active {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 128.571% */
+
+					background-color: var(--l3-background);
+
+					.aws-services-list-view-sidebar-content-item-title {
+						color: var(--l1-foreground);
+					}
+				}
+			}
+		}
+	}
+
+	.aws-services-list-view-main {
+		flex: 1;
+		padding: 12px;
+	}
+}
+
 .service-item {
 	display: flex;
 	gap: 12px;
@@ -63,17 +181,19 @@
 		background-color: var(--bg-ink-100);
 	}
 	&__icon-wrapper {
-		height: 40px;
-		width: 40px;
+		height: 32px;
+		width: 32px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		background-color: var(--bg-ink-300);
 		border: 1px solid var(--bg-slate-400);
 		border-radius: 4px;
+
 		.service-item__icon {
-			width: 24px;
-			height: 24px;
+			width: 16px;
+			height: 16px;
+			object-fit: contain;
 		}
 	}
 	&__title {
@@ -90,11 +210,13 @@
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
+
 	&__title-bar {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		height: 48px;
+		padding: 8px 12px;
 		border-bottom: 1px solid var(--bg-slate-400);
 
 		.service-details__details-title {
@@ -105,6 +227,7 @@
 			letter-spacing: -0.07px;
 			text-align: left;
 		}
+
 		.service-details__right-actions {
 			display: flex;
 			align-items: center;
@@ -157,21 +280,28 @@
 			}
 		}
 	}
+
 	&__overview {
 		color: var(--bg-vanilla-400);
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px; /* 142.857% */
 		letter-spacing: -0.07px;
-		width: 800px;
+		width: 100%;
+
+		padding: 8px 12px;
 	}
+
 	&__tabs {
+		padding: 0px 12px 12px 8px;
+
 		.ant-tabs {
 			&-ink-bar {
 				background-color: transparent;
 			}
 			&-nav {
-				padding: 8px 0 18px;
+				padding: 0;
+
 				&-wrap {
 					padding: 0;
 				}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServicesTabs.tsx

@@ -0,0 +1,35 @@
+import useUrlQuery from 'hooks/useUrlQuery';
+
+import HeroSection from './HeroSection/HeroSection';
+import ServiceDetails from './ServiceDetails/ServiceDetails';
+import ServicesList from './ServicesList';
+
+import './ServicesTabs.style.scss';
+
+export enum ServiceFilterType {
+	ALL_SERVICES = 'all_services',
+	ENABLED = 'enabled',
+	AVAILABLE = 'available',
+}
+
+function ServicesTabs(): JSX.Element {
+	const urlQuery = useUrlQuery();
+	const cloudAccountId = urlQuery.get('cloudAccountId') || '';
+
+	return (
+		<div className="services-tabs">
+			<HeroSection />
+
+			<div className="services-section">
+				<div className="services-section__sidebar">
+					<ServicesList cloudAccountId={cloudAccountId} />
+				</div>
+				<div className="services-section__content">
+					<ServiceDetails />
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default ServicesTabs;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/ServiceDetailsS3Sync.test.tsx

@@ -0,0 +1,179 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { server } from 'mocks-server/server';
+import { rest, RestRequest } from 'msw';
+
+import { UpdateServiceConfigPayload } from '../types';
+import {
+	accountsResponse,
+	buildServiceDetailsResponse,
+	CLOUD_ACCOUNT_ID,
+	initialBuckets,
+} from './mockData';
+import {
+	assertGenericModalElements,
+	assertS3SyncSpecificElements,
+	renderServiceDetails,
+} from './utils';
+
+// --- RESIZE OBSERVER (required by @radix-ui in Tabs/Switch) ---
+class ResizeObserverMock {
+	observe(): void {}
+
+	unobserve(): void {}
+
+	disconnect(): void {}
+}
+global.ResizeObserver = (ResizeObserverMock as unknown) as typeof ResizeObserver;
+
+// --- MOCKS ---
+jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
+	MarkdownRenderer: (): JSX.Element => <div data-testid="markdown-renderer" />,
+}));
+jest.mock(
+	'container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards',
+	() => ({
+		__esModule: true,
+		default: (): JSX.Element => <div data-testid="service-dashboards" />,
+	}),
+);
+
+let testServiceId = 's3sync';
+let testInitialBuckets: Record<string, string[]> = {};
+const mockGet = jest.fn((param: string) => {
+	if (param === 'cloudAccountId') {
+		return CLOUD_ACCOUNT_ID;
+	}
+	if (param === 'service') {
+		return testServiceId;
+	}
+	return null;
+});
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: (): { get: (param: string) => string | null } => ({ get: mockGet }),
+}));
+
+// --- TEST SUITE ---
+describe('ServiceDetails for S3 Sync service', () => {
+	jest.setTimeout(10000);
+	beforeEach(() => {
+		testServiceId = 's3sync';
+		testInitialBuckets = {};
+		server.use(
+			rest.get(
+				'http://localhost/api/v1/cloud-integrations/aws/accounts',
+				(_req, res, ctx) => res(ctx.json(accountsResponse)),
+			),
+			rest.get(
+				'http://localhost/api/v1/cloud-integrations/aws/services/:serviceId',
+				(req, res, ctx) =>
+					res(
+						ctx.json(
+							buildServiceDetailsResponse(
+								req.params.serviceId as string,
+								testInitialBuckets,
+							),
+						),
+					),
+			),
+		);
+	});
+
+	it('should render with logs collection switch and bucket selectors (no buckets initially selected)', async () => {
+		renderServiceDetails({}); // No initial S3 buckets, defaults to 's3sync' serviceId
+		await assertGenericModalElements();
+		await assertS3SyncSpecificElements({});
+	});
+
+	it('should render with logs collection switch and bucket selectors (some buckets initially selected)', async () => {
+		testInitialBuckets = initialBuckets;
+		renderServiceDetails(initialBuckets);
+		await assertGenericModalElements();
+		await assertS3SyncSpecificElements(initialBuckets);
+	});
+
+	it('should enable save button after adding a new bucket via combobox', async () => {
+		testInitialBuckets = initialBuckets;
+		renderServiceDetails(initialBuckets);
+		await assertGenericModalElements();
+		await assertS3SyncSpecificElements(initialBuckets);
+
+		const targetCombobox = screen.getAllByRole('combobox')[0];
+		const newBucketName = 'a-newly-added-bucket';
+
+		fireEvent.change(targetCombobox, { target: { value: newBucketName } });
+		fireEvent.keyDown(targetCombobox, {
+			key: 'Enter',
+			code: 'Enter',
+			keyCode: 13,
+		});
+
+		await waitFor(() => {
+			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
+			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
+		});
+	});
+
+	it('should send updated bucket configuration on save', async () => {
+		let capturedPayload: UpdateServiceConfigPayload | null = null;
+		const mockUpdateConfigUrl =
+			'http://localhost/api/v1/cloud-integrations/aws/services/s3sync/config';
+
+		// Override POST handler specifically for this test to capture payload
+		server.use(
+			rest.post(mockUpdateConfigUrl, async (req: RestRequest, res, ctx) => {
+				capturedPayload = await req.json();
+				return res(ctx.status(200), ctx.json({ message: 'Config updated' }));
+			}),
+		);
+		testInitialBuckets = initialBuckets;
+		renderServiceDetails(initialBuckets);
+		await assertGenericModalElements();
+		await assertS3SyncSpecificElements(initialBuckets);
+
+		const newBucketName = 'another-new-bucket';
+		const targetCombobox = screen.getAllByRole('combobox')[0];
+
+		fireEvent.change(targetCombobox, { target: { value: newBucketName } });
+		fireEvent.keyDown(targetCombobox, {
+			key: 'Enter',
+			code: 'Enter',
+			keyCode: 13,
+		});
+
+		await waitFor(() => {
+			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
+			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
+		});
+		fireEvent.click(screen.getByRole('button', { name: /save/i }));
+
+		await waitFor(() => {
+			expect(capturedPayload).not.toBeNull();
+		});
+
+		expect(capturedPayload).toEqual({
+			cloud_account_id: CLOUD_ACCOUNT_ID,
+			config: {
+				logs: {
+					enabled: true,
+					s3_buckets: {
+						'us-east-2': ['first-bucket', 'second-bucket'],
+						'ap-south-1': [newBucketName],
+					},
+				},
+				metrics: { enabled: false },
+			},
+		});
+	});
+
+	it('should not render S3 bucket region selector UI for services other than s3sync', async () => {
+		testServiceId = 'cloudwatch';
+		testInitialBuckets = {};
+		renderServiceDetails({}, 'cloudwatch');
+		await waitFor(() => {
+			expect(
+				screen.queryByText(/select s3 buckets by region/i),
+			).not.toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/mockData.ts

@@ -0,0 +1,54 @@
+import { ServiceDetailsResponse } from '../types';
+
+const CLOUD_ACCOUNT_ID = '123456789012';
+
+const initialBuckets = { 'us-east-2': ['first-bucket', 'second-bucket'] };
+
+const accountsResponse = {
+	status: 'success',
+	data: {
+		accounts: [
+			{
+				id: 'a1b2c3d4-e5f6-7890-1234-567890abcdef',
+				cloud_account_id: CLOUD_ACCOUNT_ID,
+				config: {
+					regions: ['ap-south-1', 'ap-south-2', 'us-east-1', 'us-east-2'],
+				},
+				status: {
+					integration: {
+						last_heartbeat_ts_ms: 1747114366214,
+					},
+				},
+			},
+		],
+	},
+};
+
+/** Response shape for GET /cloud-integrations/aws/services/:serviceId (used by ServiceDetails). */
+const buildServiceDetailsResponse = (
+	serviceId: string,
+	initialConfigLogsS3Buckets: Record<string, string[]> = {},
+): ServiceDetailsResponse => ({
+	status: 'success',
+	data: {
+		id: serviceId,
+		title: serviceId === 's3sync' ? 'S3 Sync' : serviceId,
+		icon: '',
+		overview: '',
+		supported_signals: { logs: serviceId === 's3sync', metrics: false },
+		assets: { dashboards: [] },
+		data_collected: { logs: [], metrics: [] },
+		config: {
+			logs: { enabled: true, s3_buckets: initialConfigLogsS3Buckets },
+			metrics: { enabled: false },
+		},
+		status: { logs: null, metrics: null },
+	},
+});
+
+export {
+	accountsResponse,
+	buildServiceDetailsResponse,
+	CLOUD_ACCOUNT_ID,
+	initialBuckets,
+};

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/utils.tsx

@@ -0,0 +1,56 @@
+import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+
+import ServiceDetails from '../ServiceDetails/ServiceDetails';
+import { accountsResponse } from './mockData';
+
+/**
+ * Renders ServiceDetails (inline config form). Tests must register MSW handlers
+ * for GET accounts and GET service details, and mock useUrlQuery (cloudAccountId, service).
+ */
+const renderServiceDetails = (
+	_initialConfigLogsS3Buckets: Record<string, string[]> = {},
+	_serviceId = 's3sync',
+): RenderResult =>
+	render(
+		<MockQueryClientProvider>
+			<ServiceDetails />
+		</MockQueryClientProvider>,
+	);
+
+/**
+ * Asserts generic UI elements of the ServiceDetails config form (Overview tab).
+ */
+const assertGenericModalElements = async (): Promise<void> => {
+	await waitFor(() => {
+		expect(screen.getByRole('switch')).toBeInTheDocument();
+		expect(screen.getByText(/log collection/i)).toBeInTheDocument();
+	});
+};
+
+/**
+ * Asserts S3 bucket selector section: title, region labels, and one combobox per region.
+ * Does not assert placeholder text (antd Select may not expose it as placeholder attribute).
+ */
+const assertS3SyncSpecificElements = async (
+	_expectedBucketsByRegion: Record<string, string[]> = {},
+): Promise<void> => {
+	const regions = accountsResponse.data.accounts[0]?.config?.regions || [];
+
+	await waitFor(() => {
+		expect(screen.getByText(/select s3 buckets by region/i)).toBeInTheDocument();
+
+		regions.forEach((region) => {
+			expect(screen.getByText(region)).toBeInTheDocument();
+		});
+
+		const comboboxes = screen.getAllByRole('combobox');
+		expect(comboboxes.length).toBeGreaterThanOrEqual(regions.length);
+	});
+};
+
+export {
+	assertGenericModalElements,
+	assertS3SyncSpecificElements,
+	renderServiceDetails,
+};

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/types.ts

@@ -1,90 +1,40 @@
+import { ServiceData } from 'container/Integrations/types';
+
 interface Service {
 	id: string;
 	title: string;
 	icon: string;
-	config: ServiceConfig;
-}
-
-interface Dashboard {
-	id: string;
-	url: string;
-	title: string;
-	description: string;
-	image: string;
-}
-
-interface LogField {
-	name: string;
-	path: string;
-	type: string;
-}
-
-interface Metric {
-	name: string;
-	type: string;
-	unit: string;
-}
-
-interface ConfigStatus {
-	enabled: boolean;
-}
-
-interface DataStatus {
-	last_received_ts_ms: number;
-	last_received_from: string;
+	config: AWSServiceConfig;
 }
 
 interface S3BucketsByRegion {
 	[region: string]: string[];
 }
 
+interface ConfigStatus {
+	enabled: boolean;
+}
+
 interface LogsConfig extends ConfigStatus {
 	s3_buckets?: S3BucketsByRegion;
 }
 
-interface ServiceConfig {
+interface AWSServiceConfig {
 	logs: LogsConfig;
 	metrics: ConfigStatus;
 	s3_sync?: LogsConfig;
 }
 
-interface IServiceStatus {
-	logs: DataStatus | null;
-	metrics: DataStatus | null;
-}
-
-interface SupportedSignals {
-	metrics: boolean;
-	logs: boolean;
-}
-
-interface ServiceData {
-	id: string;
-	title: string;
-	icon: string;
-	overview: string;
-	supported_signals: SupportedSignals;
-	assets: {
-		dashboards: Dashboard[];
-	};
-	data_collected: {
-		logs?: LogField[];
-		metrics: Metric[];
-	};
-	config?: ServiceConfig;
-	status?: IServiceStatus;
-}
-
 interface ServiceDetailsResponse {
 	status: 'success';
 	data: ServiceData;
 }
 
-interface CloudAccountConfig {
+export interface AWSCloudAccountConfig {
 	regions: string[];
 }
 
-interface IntegrationStatus {
+export interface IntegrationStatus {
 	last_heartbeat_ts_ms: number;
 }
 
@@ -95,7 +45,7 @@ interface AccountStatus {
 interface CloudAccount {
 	id: string;
 	cloud_account_id: string;
-	config: CloudAccountConfig;
+	config: AWSCloudAccountConfig;
 	status: AccountStatus;
 }
 
@@ -133,15 +83,13 @@ interface UpdateServiceConfigResponse {
 }
 
 export type {
+	AWSServiceConfig,
 	CloudAccount,
 	CloudAccountsData,
-	IServiceStatus,
 	S3BucketsByRegion,
 	Service,
-	ServiceConfig,
 	ServiceData,
 	ServiceDetailsResponse,
-	SupportedSignals,
 	UpdateServiceConfigPayload,
 	UpdateServiceConfigResponse,
 };

frontend/src/container/Integrations/CloudIntegration/AzureServices/AzureAccount/AzureAccount.styles.scss

@@ -0,0 +1,345 @@
+.azure-account-container {
+	padding: 16px 8px;
+
+	.azure-account-title {
+		font-size: 24px;
+		font-weight: 600;
+	}
+
+	.azure-account-prerequisites-step {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		padding: 16px 0px;
+
+		.azure-account-prerequisites-step-description {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+
+			.azure-account-prerequisites-step-description-item {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px;
+
+				display: flex;
+				align-items: center;
+				gap: 8px;
+
+				.azure-account-prerequisites-step-description-item-bullet {
+					color: var(--primary-color);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+				}
+			}
+		}
+
+		.azure-account-prerequisites-step-how-it-works {
+			.azure-account-prerequisites-step-how-it-works-title {
+				display: flex;
+				flex-direction: row;
+				gap: 8px;
+				align-items: center;
+				cursor: pointer;
+
+				padding: 8px 16px;
+
+				border: 1px solid var(--l3-background);
+				border-radius: 4px;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+				background: var(--l1-background);
+
+				.azure-account-prerequisites-step-how-it-works-title-icon {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					width: 20px;
+					height: 20px;
+
+					color: var(--l1-foreground);
+				}
+
+				.azure-account-prerequisites-step-how-it-works-title-text {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 166.667% */
+					letter-spacing: -0.06px;
+				}
+			}
+
+			.azure-account-prerequisites-step-how-it-works-description {
+				padding: 16px;
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 150% */
+				letter-spacing: -0.06px;
+
+				border: 1px solid var(--l3-background);
+				border-top: none;
+				border-radius: 4px;
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+				background: var(--l1-background);
+
+				display: flex;
+				flex-direction: column;
+				gap: 16px;
+			}
+		}
+	}
+
+	.azure-account-configure-agent-step {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		padding: 16px 0px;
+	}
+
+	.azure-account-deploy-agent-step {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		padding: 16px 0px;
+
+		.azure-account-deploy-agent-step-subtitle {
+			color: var(--l2-foreground);
+			font-family: Inter;
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+		}
+
+		.azure-account-deploy-agent-step-commands {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
+			.azure-account-deploy-agent-step-commands-tabs {
+				width: 100%;
+				border-radius: 6px;
+				border: 1px solid var(--l3-background);
+				background: var(--l1-background);
+				padding: 8px;
+
+				// attribute - role="tabpanel"
+
+				[role='tabpanel'] {
+					width: 100%;
+				}
+
+				.azure-account-deploy-agent-step-commands-tabs-content {
+					width: 100%;
+				}
+			}
+		}
+
+		.azure-account-connection-status-container {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+
+			.azure-account-connection-status-content {
+				width: 100%;
+
+				.azure-account-connection-status-callout {
+					width: 100%;
+
+					[data-slot='callout-title'] {
+						font-size: 13px;
+						font-weight: 400 !important;
+						line-height: 22px; /* 157.143% */
+						letter-spacing: -0.07px;
+					}
+				}
+			}
+
+			.azure-account-connection-status-close-disclosure {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+			}
+		}
+	}
+
+	.azure-account-form {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		.azure-account-configure-agent-step-primary-region {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
+			.azure-account-configure-agent-step-primary-region-title {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 150% */
+				letter-spacing: -0.06px;
+			}
+
+			.azure-account-configure-agent-step-primary-region-select {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+
+				.azure-account-form-regions-selector {
+					display: flex;
+					flex-direction: column;
+					gap: 8px;
+
+					.ant-select {
+						width: 100%;
+					}
+
+					.azure-account-form-error {
+						color: var(--destructive);
+						font-family: Inter;
+						font-size: 12px;
+						font-style: normal;
+						font-weight: 400;
+					}
+				}
+			}
+		}
+
+		.azure-account-configure-agent-step-resource-groups {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
+			.azure-account-configure-agent-step-resource-groups-title {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 150% */
+				letter-spacing: -0.06px;
+			}
+
+			.azure-account-form-resource-groups-selector {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+
+				.ant-select {
+					width: 100%;
+				}
+
+				.azure-account-form-error {
+					color: var(--destructive);
+					font-family: Inter;
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+				}
+			}
+		}
+
+		.azure-account-actions-container {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			gap: 8px;
+		}
+	}
+
+	.ant-select {
+		.ant-select-selector {
+			background: var(--l1-background);
+			border: 1px solid var(--l3-background);
+			border-radius: 6px;
+		}
+
+		.ant-select-selection-item {
+			color: var(--l1-foreground);
+		}
+
+		.ant-select-arrow {
+			color: var(--l1-foreground);
+		}
+
+		.ant-select-dropdown {
+			background: var(--l1-background);
+			border: 1px solid var(--l3-background);
+			border-radius: 6px;
+		}
+
+		.ant-select-item {
+			color: var(--l1-foreground);
+		}
+
+		.ant-select-item-option-active {
+			background: var(--l1-background);
+		}
+	}
+
+	.azure-account-disconnect-container {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		gap: 8px;
+
+		padding: 16px 0px;
+	}
+}
+
+.azure-account-disconnect-modal {
+	.ant-modal-content {
+		width: 480px;
+		min-height: 200px;
+		flex-shrink: 0;
+		background: var(--l1-background);
+		color: var(--l1-foreground);
+		border: 1px solid var(--l3-background);
+		border-radius: 4px;
+		padding: 12px;
+	}
+
+	.ant-modal-header {
+		background: var(--l1-background);
+		color: var(--l1-foreground);
+
+		.ant-modal-title {
+			color: var(--l1-foreground);
+		}
+	}
+
+	.ant-modal-body {
+		margin-top: 16px;
+	}
+
+	.ant-modal-close {
+		color: var(--l1-foreground);
+	}
+
+	.ant-modal-footer {
+		margin-top: 32px;
+	}
+}

frontend/src/container/Integrations/CloudIntegration/AzureServices/AzureAccount/AzureAccountForm.tsx

@@ -0,0 +1,245 @@
+import { useCallback, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useMutation, useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { toast } from '@signozhq/sonner';
+import { Select } from 'antd';
+import { Modal } from 'antd/lib';
+import { removeIntegrationAccount } from 'api/integration';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	AZURE_REGIONS,
+	INTEGRATION_TYPES,
+} from 'container/Integrations/constants';
+import {
+	AzureCloudAccountConfig,
+	CloudAccount,
+} from 'container/Integrations/types';
+import { CornerDownRight, Unlink } from 'lucide-react';
+import { ConnectionParams } from 'types/api/integrations/types';
+
+interface AzureAccountFormProps {
+	mode?: 'add' | 'edit';
+	selectedAccount: CloudAccount | null;
+	connectionParams: ConnectionParams;
+	isConnectionParamsLoading: boolean;
+	isLoading: boolean;
+	onSubmit: (values: {
+		primaryRegion: string;
+		resourceGroups: string[];
+	}) => void;
+	submitButtonText?: string;
+	showDisconnectAccountButton?: boolean;
+}
+
+type AzureAccountFormValues = {
+	primaryRegion: string;
+	resourceGroups: string[];
+};
+
+export const AzureAccountForm = ({
+	mode = 'add',
+	selectedAccount,
+	connectionParams,
+	isConnectionParamsLoading,
+	isLoading,
+	onSubmit,
+	submitButtonText = 'Fetch Deployment Command',
+	showDisconnectAccountButton = false,
+}: AzureAccountFormProps): JSX.Element => {
+	const queryClient = useQueryClient();
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	const {
+		control,
+		handleSubmit: handleFormSubmit,
+	} = useForm<AzureAccountFormValues>({
+		defaultValues: {
+			primaryRegion:
+				(selectedAccount?.config as AzureCloudAccountConfig)?.deployment_region ||
+				'',
+			resourceGroups:
+				(selectedAccount?.config as AzureCloudAccountConfig)?.resource_groups || [],
+		},
+	});
+
+	const onFormSubmit = useCallback(
+		(values: AzureAccountFormValues): void => {
+			onSubmit({
+				primaryRegion: values.primaryRegion,
+				resourceGroups: values.resourceGroups,
+			});
+		},
+		[onSubmit],
+	);
+
+	const handleDisconnect = (): void => {
+		setIsModalOpen(true);
+	};
+
+	const {
+		mutate: removeIntegration,
+		isLoading: isRemoveIntegrationLoading,
+	} = useMutation(removeIntegrationAccount, {
+		onSuccess: () => {
+			toast.success('Azure account disconnected successfully', {
+				description: 'Azure account disconnected successfully',
+				position: 'top-right',
+				duration: 3000,
+			});
+
+			queryClient.invalidateQueries([REACT_QUERY_KEY.CLOUD_INTEGRATION_ACCOUNTS]);
+			setIsModalOpen(false);
+		},
+		onError: (error) => {
+			console.error('Failed to remove integration:', error);
+		},
+	});
+
+	const handleOk = (): void => {
+		removeIntegration({
+			cloudServiceId: INTEGRATION_TYPES.AZURE,
+			accountId: selectedAccount?.id as string,
+		});
+	};
+
+	const handleCancel = (): void => {
+		setIsModalOpen(false);
+	};
+
+	return (
+		<form className="azure-account-form">
+			<div className="azure-account-configure-agent-step-primary-region">
+				<div className="azure-account-configure-agent-step-primary-region-title">
+					Select primary region
+				</div>
+				<div className="azure-account-configure-agent-step-primary-region-select">
+					<Controller
+						control={control}
+						name="primaryRegion"
+						rules={{
+							required: 'Please select a primary region',
+						}}
+						render={({ field, fieldState }): JSX.Element => (
+							<div className="azure-account-form-regions-selector">
+								<Select
+									{...field}
+									disabled={mode === 'edit'}
+									placeholder="Select primary region"
+									options={AZURE_REGIONS}
+									showSearch
+									filterOption={(input, option): boolean => {
+										const label = String(option?.label ?? '');
+										const value = String(option?.value ?? '');
+
+										return (
+											label.toLowerCase().includes(input.toLowerCase()) ||
+											value.toLowerCase().includes(input.toLowerCase())
+										);
+									}}
+									notFoundContent={null}
+								/>
+								{fieldState.error && (
+									<div className="azure-account-form-error">
+										{fieldState.error.message}
+									</div>
+								)}
+							</div>
+						)}
+					/>
+				</div>
+			</div>
+
+			<div className="azure-account-configure-agent-step-resource-groups">
+				<div className="azure-account-configure-agent-step-resource-groups-title">
+					Enter resource groups you want to monitor
+				</div>
+
+				<div className="azure-account-configure-agent-step-resource-groups-select">
+					<Controller
+						control={control}
+						name="resourceGroups"
+						rules={{
+							required: 'Please enter resource groups you want to monitor',
+							validate: (value: string[] | undefined): boolean | string =>
+								Array.isArray(value) && value.length > 0
+									? true
+									: 'Please enter resource groups you want to monitor',
+						}}
+						render={({ field, fieldState }): JSX.Element => (
+							<div className="azure-account-form-resource-groups-selector">
+								<Select
+									{...field}
+									placeholder="Enter resource groups you want to monitor"
+									options={[]}
+									mode="tags"
+									notFoundContent={null}
+									filterOption={false}
+									showSearch={false}
+								/>
+								{fieldState.error && (
+									<div className="azure-account-form-error">
+										{fieldState.error.message}
+									</div>
+								)}
+							</div>
+						)}
+					/>
+				</div>
+			</div>
+
+			<div className="azure-account-actions-container">
+				{showDisconnectAccountButton && (
+					<div className="azure-account-disconnect-container">
+						<Button
+							variant="solid"
+							color="destructive"
+							prefixIcon={<Unlink size={14} />}
+							size="sm"
+							onClick={handleDisconnect}
+							disabled={isRemoveIntegrationLoading}
+						>
+							Disconnect
+						</Button>
+					</div>
+				)}
+
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={handleFormSubmit(onFormSubmit)}
+					size="sm"
+					prefixIcon={<CornerDownRight size={12} />}
+					loading={
+						isConnectionParamsLoading || isLoading || isRemoveIntegrationLoading
+					}
+					disabled={
+						isConnectionParamsLoading ||
+						!connectionParams ||
+						isLoading ||
+						isRemoveIntegrationLoading
+					}
+				>
+					{submitButtonText}
+				</Button>
+			</div>
+
+			<Modal
+				className="azure-account-disconnect-modal"
+				open={isModalOpen}
+				title="Remove integration"
+				onOk={handleOk}
+				onCancel={handleCancel}
+				okText="Remove Integration"
+				okButtonProps={{
+					danger: true,
+				}}
+			>
+				<div className="remove-integration-modal-content">
+					Removing this account will remove all components created for sending
+					telemetry to SigNoz in your Azure account within the next ~15 minutes
+				</div>
+			</Modal>
+		</form>
+	);
+};

frontend/src/container/Integrations/CloudIntegration/AzureServices/AzureAccount/ConnectNewAzureAccount.tsx

@@ -0,0 +1,379 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Callout } from '@signozhq/callout';
+import { toast } from '@signozhq/sonner';
+import Tabs from '@signozhq/tabs';
+import { Steps } from 'antd';
+import { StepsProps } from 'antd/lib';
+import logEvent from 'api/common/logEvent';
+import { getAzureDeploymentCommands } from 'api/integration';
+import { CodeBlock } from 'components/CodeBlock';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { useGetAccountStatus } from 'hooks/integration/useGetAccountStatus';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import {
+	AccountStatusResponse,
+	ConnectionParams,
+	IAzureDeploymentCommands,
+} from 'types/api/integrations/types';
+
+import { AzureAccountForm } from './AzureAccountForm';
+
+import './AzureAccount.styles.scss';
+
+interface ConnectNewAzureAccountProps {
+	connectionParams: ConnectionParams;
+	isConnectionParamsLoading: boolean;
+	onAccountConnected: () => void;
+}
+
+const PrerequisitesStep = (): JSX.Element => {
+	const [isHowItWorksOpen, setIsHowItWorksOpen] = useState(false);
+
+	const handleHowItWorksClick = (): void => {
+		setIsHowItWorksOpen(!isHowItWorksOpen);
+	};
+
+	return (
+		<div className="azure-account-prerequisites-step">
+			<div className="azure-account-prerequisites-step-description">
+				<div className="azure-account-prerequisites-step-description-item">
+					<span className="azure-account-prerequisites-step-description-item-bullet">
+						—
+					</span>{' '}
+					Ensure that you’re logged in to the Azure portal or Azure CLI is setup for
+					your subscription
+				</div>
+				<div className="azure-account-prerequisites-step-description-item">
+					<span className="azure-account-prerequisites-step-description-item-bullet">
+						—
+					</span>{' '}
+					Ensure that you either have the OWNER role OR
+				</div>
+				<div className="azure-account-prerequisites-step-description-item">
+					<span className="azure-account-prerequisites-step-description-item-bullet">
+						—
+					</span>{' '}
+					Both the CONTRIBUTOR and USER ACCESS ADMIN roles.
+				</div>
+			</div>
+
+			<div className="azure-account-prerequisites-step-how-it-works">
+				<div
+					className="azure-account-prerequisites-step-how-it-works-title"
+					onClick={handleHowItWorksClick}
+				>
+					<div className="azure-account-prerequisites-step-how-it-works-title-icon">
+						{isHowItWorksOpen ? (
+							<ChevronDown size={16} />
+						) : (
+							<ChevronRight size={16} />
+						)}
+					</div>
+					<div className="azure-account-prerequisites-step-how-it-works-title-text">
+						How it works
+					</div>
+				</div>
+				{isHowItWorksOpen && (
+					<div className="azure-account-prerequisites-step-how-it-works-description">
+						<p>
+							SigNoz will create new resource-group to manage the resources required
+							for this integration. The following steps will create a User-Assigned
+							Managed Identity with the necessary permissions and follows the Principle
+							of Least Privilege.
+						</p>
+						<p>
+							Once the Integration template is deployed, you can enable the services
+							you want to monitor right here in SigNoz dashboard.
+						</p>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+const ConnectionSuccess = {
+	type: 'success' as const,
+	title: 'Agent has been deployed successfully.',
+	description: 'You can now safely close this panel.',
+};
+
+const ConnectionWarning = {
+	type: 'warning' as const,
+	title: 'Listening for data...',
+	description:
+		'Do not close this panel until the agent stack is deployed successfully.',
+};
+
+export const ConfigureAgentStep = ({
+	connectionParams,
+	isConnectionParamsLoading,
+	setDeploymentCommands,
+	setAccountId,
+}: {
+	connectionParams: ConnectionParams;
+	isConnectionParamsLoading: boolean;
+	setDeploymentCommands: (deploymentCommands: IAzureDeploymentCommands) => void;
+	setAccountId: (accountId: string) => void;
+}): JSX.Element => {
+	const [isFetchingDeploymentCommand, setIsFetchingDeploymentCommand] = useState(
+		false,
+	);
+
+	const getDeploymentCommand = async ({
+		primaryRegion,
+		resourceGroups,
+	}: {
+		primaryRegion: string;
+		resourceGroups: string[];
+	}): Promise<IAzureDeploymentCommands> => {
+		setIsFetchingDeploymentCommand(true);
+
+		return await getAzureDeploymentCommands({
+			agent_config: connectionParams,
+			account_config: {
+				deployment_region: primaryRegion,
+				resource_groups: resourceGroups,
+			},
+		});
+	};
+
+	const handleFetchDeploymentCommand = async ({
+		primaryRegion,
+		resourceGroups,
+	}: {
+		primaryRegion: string;
+		resourceGroups: string[];
+	}): Promise<void> => {
+		const deploymentCommands = await getDeploymentCommand({
+			primaryRegion,
+			resourceGroups,
+		});
+
+		setDeploymentCommands(deploymentCommands);
+		if (deploymentCommands.account_id) {
+			setAccountId(deploymentCommands.account_id);
+		}
+		setIsFetchingDeploymentCommand(false);
+	};
+
+	return (
+		<div className="azure-account-configure-agent-step">
+			<AzureAccountForm
+				selectedAccount={null}
+				connectionParams={connectionParams}
+				isConnectionParamsLoading={isConnectionParamsLoading}
+				onSubmit={handleFetchDeploymentCommand}
+				isLoading={isFetchingDeploymentCommand}
+			/>
+		</div>
+	);
+};
+
+const DeployAgentStep = ({
+	deploymentCommands,
+	accountId,
+	onAccountConnected,
+}: {
+	deploymentCommands: IAzureDeploymentCommands | null;
+	accountId: string | null;
+	onAccountConnected: () => void;
+}): JSX.Element => {
+	const [showConnectionStatus, setShowConnectionStatus] = useState(false);
+	const [isAccountConnected, setIsAccountConnected] = useState(false);
+
+	const COMMAND_PLACEHOLDER =
+		'// Select Primary Region and Resource Groups to fetch the deployment commands\n';
+
+	const handleCopyDeploymentCommand = (): void => {
+		setShowConnectionStatus(true);
+	};
+
+	const startTimeRef = useRef(Date.now());
+	const refetchInterval = 10 * 1000;
+	const errorTimeout = 10 * 60 * 1000;
+
+	useGetAccountStatus(INTEGRATION_TYPES.AZURE, accountId ?? undefined, {
+		refetchInterval,
+		enabled: !!accountId,
+		onSuccess: (data: AccountStatusResponse) => {
+			if (data.data.status.integration.last_heartbeat_ts_ms !== null) {
+				setIsAccountConnected(true);
+				setShowConnectionStatus(true);
+				onAccountConnected();
+
+				// setModalState(ModalStateEnum.SUCCESS);
+				toast.success('Azure Integration: Account connected', {
+					description: 'Azure Integration: Account connected',
+					position: 'top-right',
+					duration: 3000,
+				});
+
+				logEvent('Azure Integration: Account connected', {
+					cloudAccountId: data?.data?.cloud_account_id,
+					status: data?.data?.status,
+				});
+			} else if (Date.now() - startTimeRef.current >= errorTimeout) {
+				// setModalState(ModalStateEnum.ERROR);
+
+				toast.error('Azure Integration: Account connection attempt timed out', {
+					description: 'Azure Integration: Account connection attempt timed out',
+					position: 'top-right',
+					duration: 3000,
+				});
+
+				logEvent('Azure Integration: Account connection attempt timed out', {
+					id: deploymentCommands?.account_id,
+				});
+			}
+		},
+		onError: () => {
+			toast.error('Azure Integration: Account connection attempt timed out', {
+				description: 'Azure Integration: Account connection attempt timed out',
+				position: 'top-right',
+				duration: 3000,
+			});
+		},
+	});
+
+	useEffect(() => {
+		if (
+			deploymentCommands &&
+			(deploymentCommands.az_shell_connection_command ||
+				deploymentCommands.az_cli_connection_command)
+		) {
+			setTimeout(() => {
+				setShowConnectionStatus(true);
+			}, 3000);
+		}
+	}, [deploymentCommands]);
+
+	return (
+		<div className="azure-account-deploy-agent-step">
+			<div className="azure-account-deploy-agent-step-subtitle">
+				Copy the command and then use it to create the deployment stack.
+			</div>
+			<div className="azure-account-deploy-agent-step-commands">
+				<Tabs
+					className="azure-account-deploy-agent-step-commands-tabs"
+					defaultValue="azure-shell"
+					items={[
+						{
+							key: 'azure-shell',
+							label: 'Azure Shell',
+							children: (
+								<div className="azure-account-deploy-agent-step-commands-tabs-content">
+									<CodeBlock
+										language="typescript"
+										value={
+											deploymentCommands?.az_shell_connection_command ||
+											COMMAND_PLACEHOLDER
+										}
+										onCopy={handleCopyDeploymentCommand}
+									/>
+								</div>
+							),
+						},
+						{
+							key: 'azure-sdk',
+							label: 'Azure SDK',
+							children: (
+								<div className="azure-account-deploy-agent-step-commands-tabs-content">
+									<CodeBlock
+										language="typescript"
+										value={
+											deploymentCommands?.az_cli_connection_command || COMMAND_PLACEHOLDER
+										}
+										onCopy={handleCopyDeploymentCommand}
+									/>
+								</div>
+							),
+						},
+					]}
+					variant="primary"
+				/>
+			</div>
+
+			{showConnectionStatus && (
+				<div className="azure-account-connection-status-container">
+					<div className="azure-account-connection-status-content">
+						<Callout
+							className="azure-account-connection-status-callout"
+							type={
+								isAccountConnected ? ConnectionSuccess.type : ConnectionWarning.type
+							}
+							size="small"
+							showIcon
+							message={
+								isAccountConnected ? ConnectionSuccess.title : ConnectionWarning.title
+							}
+						/>
+					</div>
+
+					<div className="azure-account-connection-status-close-disclosure">
+						{isAccountConnected
+							? ConnectionSuccess.description
+							: ConnectionWarning.description}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default function ConnectNewAzureAccount({
+	connectionParams,
+	isConnectionParamsLoading,
+	onAccountConnected,
+}: ConnectNewAzureAccountProps): JSX.Element {
+	const [
+		deploymentCommands,
+		setDeploymentCommands,
+	] = useState<IAzureDeploymentCommands | null>(null);
+	const [accountId, setAccountId] = useState<string | null>(null);
+
+	const steps = useMemo(() => {
+		const steps: StepsProps['items'] = [
+			{
+				title: 'Prerequisites',
+				description: <PrerequisitesStep />,
+			},
+			{
+				title: 'Configure Agent',
+				description: (
+					<ConfigureAgentStep
+						connectionParams={connectionParams}
+						isConnectionParamsLoading={isConnectionParamsLoading}
+						setDeploymentCommands={setDeploymentCommands}
+						setAccountId={setAccountId}
+					/>
+				),
+			},
+
+			{
+				title: 'Deploy Agent',
+				description: (
+					<DeployAgentStep
+						deploymentCommands={deploymentCommands}
+						accountId={accountId}
+						onAccountConnected={onAccountConnected}
+					/>
+				),
+			},
+		];
+
+		return steps;
+	}, [
+		connectionParams,
+		isConnectionParamsLoading,
+		deploymentCommands,
+		accountId,
+		onAccountConnected,
+	]);
+
+	return (
+		<div className="azure-account-container">
+			<Steps direction="vertical" current={1} items={steps} />
+		</div>
+	);
+}

frontend/src/container/Integrations/CloudIntegration/AzureServices/AzureAccount/EditAzureAccount.tsx

@@ -0,0 +1,90 @@
+import { useCallback } from 'react';
+import { toast } from '@signozhq/sonner';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { CloudAccount } from 'container/Integrations/types';
+import { useUpdateAccountConfig } from 'hooks/integration/useUpdateAccountConfig';
+import {
+	AzureAccountConfig,
+	ConnectionParams,
+} from 'types/api/integrations/types';
+
+import { AzureAccountForm } from './AzureAccountForm';
+
+import './AzureAccount.styles.scss';
+
+interface EditAzureAccountProps {
+	selectedAccount: CloudAccount;
+	connectionParams: ConnectionParams;
+	isConnectionParamsLoading: boolean;
+	onAccountUpdated: () => void;
+}
+
+function EditAzureAccount({
+	selectedAccount,
+	connectionParams,
+	isConnectionParamsLoading,
+	onAccountUpdated,
+}: EditAzureAccountProps): JSX.Element {
+	const {
+		mutate: updateAzureAccountConfig,
+		isLoading,
+	} = useUpdateAccountConfig();
+
+	const handleSubmit = useCallback(
+		async ({
+			primaryRegion,
+			resourceGroups,
+		}: {
+			primaryRegion: string;
+			resourceGroups: string[];
+		}): Promise<void> => {
+			try {
+				const payload: AzureAccountConfig = {
+					config: {
+						deployment_region: primaryRegion,
+						resource_groups: resourceGroups,
+					},
+				};
+
+				updateAzureAccountConfig(
+					{
+						cloudServiceId: INTEGRATION_TYPES.AZURE,
+						accountId: selectedAccount?.id,
+						payload,
+					},
+					{
+						onSuccess: () => {
+							toast.success('Success', {
+								description: 'Azure account updated successfully',
+								position: 'top-right',
+								duration: 3000,
+							});
+
+							onAccountUpdated();
+						},
+					},
+				);
+			} catch (error) {
+				console.error('Form submission failed:', error);
+			}
+		},
+		[updateAzureAccountConfig, selectedAccount?.id, onAccountUpdated],
+	);
+
+	return (
+		<div className="azure-account-container">
+			<AzureAccountForm
+				mode="edit"
+				selectedAccount={selectedAccount}
+				connectionParams={connectionParams}
+				isConnectionParamsLoading={isConnectionParamsLoading}
+				onSubmit={handleSubmit}
+				isLoading={isLoading}
+				submitButtonText="Save Changes"
+				showDisconnectAccountButton
+			/>
+		</div>
+	);
+}
+
+export default EditAzureAccount;

frontend/src/container/Integrations/CloudIntegration/AzureServices/AzureServiceDetails/AzureServiceDetails.styles.scss

@@ -0,0 +1,201 @@
+.azure-service-details-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+
+	.azure-service-details-tabs {
+		margin-top: 8px;
+
+		// remove the padding left from the first div of the tabs component
+		// this needs to be handled in the tabs component
+		> div:first-child {
+			padding-left: 0;
+		}
+
+		.azure-service-details-data-collected-content-logs,
+		.azure-service-details-data-collected-content-metrics {
+			display: flex;
+			flex-direction: row;
+			gap: 8px;
+
+			.azure-service-details-data-collected-content-title {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				gap: 8px;
+
+				color: var(--l2-foreground);
+
+				/* Bifrost (Ancient)/Content/sm */
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+
+		.azure-service-details-overview {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+
+			.azure-service-details-overview-configuration {
+				display: flex;
+				flex-direction: column;
+
+				border-radius: 4px;
+				border: 1px solid var(--l3-background);
+				background: var(--l1-background);
+
+				.azure-service-details-overview-configuration-metrics {
+					border-top: 1px solid var(--l3-background);
+				}
+
+				.azure-service-details-overview-configuration-title {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					justify-content: space-between;
+					gap: 8px;
+					width: 100%;
+
+					border-radius: 4px 4px 0 0;
+					border-bottom: 1px solid var(--l3-background);
+
+					padding: 8px 12px;
+
+					.azure-service-details-overview-configuration-title-text {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						gap: 8px;
+
+						color: var(--l1-foreground);
+						font-family: Inter;
+						font-size: 13px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: 22px; /* 157.143% */
+						letter-spacing: -0.07px;
+					}
+
+					.configuration-action {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						gap: 8px;
+					}
+				}
+
+				.azure-service-details-overview-configuration-content {
+					display: flex;
+					flex-direction: column;
+					gap: 16px;
+
+					padding: 12px;
+					background: var(--l1-background);
+
+					.azure-service-details-overview-configuration-content-item {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						justify-content: space-between;
+						gap: 8px;
+					}
+				}
+
+				.azure-service-details-overview-configuration-actions {
+					display: flex;
+					flex-direction: row;
+					justify-content: flex-end;
+					gap: 8px;
+					padding: 8px 12px;
+
+					border-top: 1px solid var(--l3-background);
+					background: var(--l1-background);
+				}
+
+				.azure-service-details-overview-configuration-title-text-select-all {
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 138.462% */
+				}
+			}
+
+			.azure-service-details-actions {
+				display: flex;
+				flex-direction: row;
+				gap: 8px;
+				padding: 12px 0;
+			}
+
+			.azure-service-dashboards {
+				border-radius: 6px;
+				border: 1px solid var(--l3-background);
+				background: var(--l1-background);
+
+				.azure-service-dashboards-title {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					gap: 8px;
+
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+
+					padding: 8px 16px;
+					border-bottom: 1px solid var(--l3-background);
+				}
+
+				.azure-service-dashboards-items {
+					display: flex;
+					flex-direction: column;
+					gap: 16px;
+
+					.azure-service-dashboard-item {
+						display: flex;
+						flex-direction: column;
+						gap: 8px;
+						padding: 12px 16px 12px 16px;
+
+						&.azure-service-dashboard-item-clickable {
+							cursor: pointer;
+							&:hover {
+								background-color: var(--l1-background);
+							}
+						}
+
+						.azure-service-dashboard-item-title {
+							color: var(--l1-foreground);
+							font-family: Inter;
+							font-size: 13px;
+							font-style: normal;
+							font-weight: 500;
+							line-height: 20px; /* 142.857% */
+							letter-spacing: -0.07px;
+						}
+
+						.azure-service-dashboard-item-description {
+							color: var(--l2-foreground);
+							font-family: Inter;
+							font-size: 12px;
+							font-style: normal;
+							font-weight: 400;
+							line-height: 18px; /* 150% */
+						}
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/container/Integrations/CloudIntegration/AzureServices/AzureServiceDetails/AzureServiceDetails.tsx

@@ -0,0 +1,461 @@
+import { useEffect, useState } from 'react';
+import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { Color } from '@signozhq/design-tokens';
+import Tabs from '@signozhq/tabs';
+import { Checkbox, Popover, Skeleton } from 'antd';
+import CloudServiceDataCollected from 'components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { AzureConfig, AzureService } from 'container/Integrations/types';
+import { useGetCloudIntegrationServiceDetails } from 'hooks/integration/useServiceDetails';
+import { useUpdateServiceConfig } from 'hooks/integration/useUpdateServiceConfig';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { isEqual } from 'lodash-es';
+import { CheckCircle, Save, TriangleAlert, X } from 'lucide-react';
+
+import { ConfigConnectionStatus } from '../../ConfigConnectionStatus/ConfigConnectionStatus';
+
+import './AzureServiceDetails.styles.scss';
+
+interface AzureServiceDetailsProps {
+	selectedService: AzureService | null;
+	cloudAccountId: string;
+}
+
+function configToMap(
+	config: AzureConfig[] | undefined,
+): { [key: string]: boolean } {
+	return (config || []).reduce(
+		(acc: { [key: string]: boolean }, item: AzureConfig) => {
+			acc[item.name] = item.enabled;
+			return acc;
+		},
+		{},
+	);
+}
+
+export default function AzureServiceDetails({
+	selectedService,
+	cloudAccountId,
+}: AzureServiceDetailsProps): JSX.Element {
+	const queryClient = useQueryClient();
+	const { safeNavigate } = useSafeNavigate();
+
+	const {
+		data: serviceDetailsData,
+		isLoading,
+		refetch: refetchServiceDetails,
+	} = useGetCloudIntegrationServiceDetails(
+		INTEGRATION_TYPES.AZURE,
+		selectedService?.id || '',
+		cloudAccountId || undefined,
+	);
+
+	const {
+		mutate: updateAzureServiceConfig,
+		isLoading: isUpdating,
+	} = useUpdateServiceConfig();
+
+	// Last saved/committed config — updated when data loads and on save success.
+	// Used for hasChanges and Discard so buttons hide immediately after save.
+	const [lastSavedSnapshot, setLastSavedSnapshot] = useState<{
+		logs: { [key: string]: boolean };
+		metrics: { [key: string]: boolean };
+	}>({ logs: {}, metrics: {} });
+
+	// Editable state
+	const [azureLogsEnabledAll, setAzureLogsEnabledAll] = useState<boolean>(false);
+	const [azureMetricsEnabledAll, setAzureMetricsEnabledAll] = useState<boolean>(
+		false,
+	);
+	const [logsConfig, updateLogsConfig] = useState<{ [key: string]: boolean }>(
+		{},
+	);
+	const [metricsConfigs, updateMetricsConfigs] = useState<{
+		[key: string]: boolean;
+	}>({});
+
+	// Sync state when serviceDetailsData loads
+	useEffect(() => {
+		if (!serviceDetailsData?.config) {
+			return;
+		}
+
+		const logs = configToMap(serviceDetailsData.config.logs as AzureConfig[]);
+		const metrics = configToMap(
+			serviceDetailsData.config.metrics as AzureConfig[],
+		);
+
+		if (Object.keys(logs).length > 0) {
+			updateLogsConfig(logs);
+			setAzureLogsEnabledAll(
+				!(serviceDetailsData.config.logs as AzureConfig[])?.some(
+					(log: AzureConfig) => !log.enabled,
+				),
+			);
+		}
+		if (Object.keys(metrics).length > 0) {
+			updateMetricsConfigs(metrics);
+			setAzureMetricsEnabledAll(
+				!(serviceDetailsData.config.metrics as AzureConfig[])?.some(
+					(metric: AzureConfig) => !metric.enabled,
+				),
+			);
+		}
+
+		setLastSavedSnapshot({ logs, metrics });
+	}, [serviceDetailsData]);
+
+	const hasChanges =
+		!isEqual(logsConfig, lastSavedSnapshot.logs) ||
+		!isEqual(metricsConfigs, lastSavedSnapshot.metrics);
+
+	const handleSave = (): void => {
+		if (!selectedService?.id) {
+			return;
+		}
+
+		updateAzureServiceConfig(
+			{
+				cloudServiceId: INTEGRATION_TYPES.AZURE,
+				serviceId: selectedService?.id,
+				payload: {
+					cloud_account_id: cloudAccountId,
+					config: {
+						logs: Object.entries(logsConfig).map(([name, enabled]) => ({
+							name,
+							enabled,
+						})),
+						metrics: Object.entries(metricsConfigs).map(([name, enabled]) => ({
+							name,
+							enabled,
+						})),
+					},
+				},
+			},
+			{
+				onSuccess: (_, variables) => {
+					// Update snapshot immediately from what we saved (not current state)
+					const saved = variables.payload.config;
+					setLastSavedSnapshot({
+						logs: configToMap(saved.logs),
+						metrics: configToMap(saved.metrics),
+					});
+					queryClient.invalidateQueries([
+						REACT_QUERY_KEY.AWS_SERVICE_DETAILS,
+						selectedService?.id,
+						cloudAccountId,
+					]);
+					// Invalidate services list so Enabled/Not Enabled stays in sync
+					queryClient.invalidateQueries([INTEGRATION_TYPES.AZURE]);
+					refetchServiceDetails();
+				},
+			},
+		);
+	};
+
+	const handleDiscard = (): void => {
+		updateLogsConfig(lastSavedSnapshot.logs);
+		updateMetricsConfigs(lastSavedSnapshot.metrics);
+		setAzureLogsEnabledAll(
+			Object.values(lastSavedSnapshot.logs).every(Boolean) &&
+				Object.keys(lastSavedSnapshot.logs).length > 0,
+		);
+		setAzureMetricsEnabledAll(
+			Object.values(lastSavedSnapshot.metrics).every(Boolean) &&
+				Object.keys(lastSavedSnapshot.metrics).length > 0,
+		);
+	};
+
+	const handleAzureLogsEnableAllChange = (checked: boolean): void => {
+		setAzureLogsEnabledAll(checked);
+		updateLogsConfig((prev) =>
+			Object.fromEntries(Object.keys(prev).map((key) => [key, checked])),
+		);
+	};
+
+	const handleAzureMetricsEnableAllChange = (checked: boolean): void => {
+		setAzureMetricsEnabledAll(checked);
+		updateMetricsConfigs((prev) =>
+			Object.fromEntries(Object.keys(prev).map((key) => [key, checked])),
+		);
+	};
+
+	const handleAzureLogsEnabledChange = (
+		logName: string,
+		checked: boolean,
+	): void => {
+		updateLogsConfig((prev) => ({ ...prev, [logName]: checked }));
+	};
+
+	const handleAzureMetricsEnabledChange = (
+		metricName: string,
+		checked: boolean,
+	): void => {
+		updateMetricsConfigs((prev) => ({ ...prev, [metricName]: checked }));
+	};
+
+	// Keep "enable all" in sync when individual items change
+	useEffect(() => {
+		if (Object.keys(logsConfig).length > 0) {
+			const allEnabled = Object.values(logsConfig).every(Boolean);
+			setAzureLogsEnabledAll(allEnabled);
+		}
+	}, [logsConfig]);
+	useEffect(() => {
+		if (Object.keys(metricsConfigs).length > 0) {
+			const allEnabled = Object.values(metricsConfigs).every(Boolean);
+			setAzureMetricsEnabledAll(allEnabled);
+		}
+	}, [metricsConfigs]);
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const renderOverview = (): JSX.Element => {
+		const dashboards = serviceDetailsData?.assets?.dashboards || [];
+
+		const logsStatus = serviceDetailsData?.status?.logs || null;
+		const metricsStatus = serviceDetailsData?.status?.metrics || null;
+
+		// connected if all config items are connected
+		const logsConnectionStatus = logsStatus?.every(
+			(log) => log.last_received_ts_ms > 0,
+		);
+		const metricsConnectionStatus = metricsStatus?.every(
+			(metric) => metric.last_received_ts_ms > 0,
+		);
+
+		if (isLoading) {
+			return (
+				<div className="azure-service-details-overview-loading">
+					<Skeleton active />
+				</div>
+			);
+		}
+
+		return (
+			<div className="azure-service-details-overview">
+				{!isLoading && (
+					<div className="azure-service-details-overview-configuration">
+						<div className="azure-service-details-overview-configuration-logs">
+							<div className="azure-service-details-overview-configuration-title">
+								<div className="azure-service-details-overview-configuration-title-text">
+									{logsStatus && (
+										<Popover
+											content={<ConfigConnectionStatus status={logsStatus} />}
+											trigger="hover"
+											placement="right"
+											overlayClassName="config-connection-status-popover"
+										>
+											<div className="aws-service-details-overview-configuration-title-text-icon">
+												{logsConnectionStatus ? (
+													<CheckCircle size={16} color={Color.BG_FOREST_500} />
+												) : (
+													<TriangleAlert size={16} color={Color.BG_AMBER_500} />
+												)}
+											</div>
+										</Popover>
+									)}
+									Azure Logs
+								</div>
+								<div className="configuration-action">
+									<Checkbox
+										checked={azureLogsEnabledAll}
+										indeterminate={
+											Object.values(logsConfig).some(Boolean) &&
+											!Object.values(logsConfig).every(Boolean)
+										}
+										onChange={(e): void =>
+											handleAzureLogsEnableAllChange(e.target.checked)
+										}
+										disabled={isUpdating}
+									>
+										<span className="azure-service-details-overview-configuration-title-text-select-all">
+											Select All
+										</span>
+									</Checkbox>
+								</div>
+							</div>
+
+							<div className="azure-service-details-overview-configuration-content">
+								{logsConfig &&
+									Object.keys(logsConfig).length > 0 &&
+									Object.keys(logsConfig).map((logName: string) => (
+										<div
+											key={logName}
+											className="azure-service-details-overview-configuration-content-item"
+										>
+											<div className="azure-service-details-overview-configuration-content-item-text">
+												{logName}
+											</div>
+											<Checkbox
+												checked={logsConfig[logName]}
+												onChange={(e): void =>
+													handleAzureLogsEnabledChange(logName, e.target.checked)
+												}
+												disabled={isUpdating}
+											/>
+										</div>
+									))}
+							</div>
+						</div>
+
+						<div className="azure-service-details-overview-configuration-metrics">
+							<div className="azure-service-details-overview-configuration-title">
+								<div className="azure-service-details-overview-configuration-title-text">
+									{metricsStatus && (
+										<Popover
+											content={<ConfigConnectionStatus status={metricsStatus} />}
+											trigger="hover"
+											placement="right"
+											overlayClassName="config-connection-status-popover"
+										>
+											<div className="aws-service-details-overview-configuration-title-text-icon">
+												{metricsConnectionStatus ? (
+													<CheckCircle size={16} color={Color.BG_FOREST_500} />
+												) : (
+													<TriangleAlert size={16} color={Color.BG_AMBER_500} />
+												)}
+											</div>
+										</Popover>
+									)}
+									Azure Metrics
+								</div>
+								<div className="configuration-action">
+									<Checkbox
+										checked={azureMetricsEnabledAll}
+										indeterminate={
+											Object.values(metricsConfigs).some(Boolean) &&
+											!Object.values(metricsConfigs).every(Boolean)
+										}
+										onChange={(e): void =>
+											handleAzureMetricsEnableAllChange(e.target.checked)
+										}
+										disabled={isUpdating}
+									>
+										<span className="azure-service-details-overview-configuration-title-text-select-all">
+											Select All
+										</span>
+									</Checkbox>
+								</div>
+							</div>
+
+							<div className="azure-service-details-overview-configuration-content">
+								{metricsConfigs &&
+									Object.keys(metricsConfigs).length > 0 &&
+									Object.keys(metricsConfigs).map((metricName: string) => (
+										<div
+											key={metricName}
+											className="azure-service-details-overview-configuration-content-item"
+										>
+											<div className="azure-service-details-overview-configuration-content-item-text">
+												{metricName}
+											</div>
+											<Checkbox
+												checked={metricsConfigs[metricName]}
+												onChange={(e): void =>
+													handleAzureMetricsEnabledChange(metricName, e.target.checked)
+												}
+												disabled={isUpdating}
+											/>
+										</div>
+									))}
+							</div>
+						</div>
+						{hasChanges && (
+							<div className="azure-service-details-overview-configuration-actions">
+								<Button
+									variant="solid"
+									color="secondary"
+									onClick={handleDiscard}
+									disabled={isUpdating}
+									size="xs"
+									prefixIcon={<X size={14} />}
+								>
+									Discard
+								</Button>
+
+								<Button
+									variant="solid"
+									color="primary"
+									onClick={handleSave}
+									loading={isUpdating}
+									disabled={isUpdating}
+									size="xs"
+									prefixIcon={<Save size={14} />}
+								>
+									Save
+								</Button>
+							</div>
+						)}
+					</div>
+				)}
+
+				<MarkdownRenderer
+					variables={{}}
+					markdownContent={serviceDetailsData?.overview}
+				/>
+
+				<div className="azure-service-dashboards">
+					<div className="azure-service-dashboards-title">Dashboards</div>
+					<div className="azure-service-dashboards-items">
+						{dashboards.map((dashboard) => (
+							<div
+								key={dashboard.id}
+								className={`azure-service-dashboard-item ${
+									dashboard.url ? 'azure-service-dashboard-item-clickable' : ''
+								}`}
+								onClick={(): void => {
+									if (dashboard.url) {
+										safeNavigate(dashboard.url);
+									}
+								}}
+							>
+								<div className="azure-service-dashboard-item-title">
+									{dashboard.title}
+								</div>
+								<div className="azure-service-dashboard-item-description">
+									{dashboard.description}
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+		);
+	};
+
+	const renderDataCollected = (): JSX.Element => {
+		return (
+			<div className="azure-service-details-data-collected-table">
+				<CloudServiceDataCollected
+					logsData={serviceDetailsData?.data_collected?.logs || []}
+					metricsData={serviceDetailsData?.data_collected?.metrics || []}
+				/>
+			</div>
+		);
+	};
+
+	return (
+		<div className="azure-service-details-container">
+			<Tabs
+				defaultValue="overview"
+				className="azure-service-details-tabs"
+				items={[
+					{
+						children: renderOverview(),
+						key: 'overview',
+						label: 'Overview',
+					},
+					{
+						children: renderDataCollected(),
+						key: 'data-collected',
+						label: 'Data Collected',
+					},
+				]}
+				variant="secondary"
+			/>
+		</div>
+	);
+}

frontend/src/container/Integrations/CloudIntegration/AzureServices/AzureServices.styles.scss

@@ -0,0 +1,182 @@
+.azure-services-container {
+	display: flex;
+	flex-direction: column;
+	height: calc(100% - 52px);
+	position: relative;
+
+	.azure-services-content {
+		height: 100%;
+		position: relative;
+
+		.azure-services-list-header {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			padding: 6px 10px;
+			height: 40px;
+			border-bottom: 1px solid var(--bg-slate-400);
+
+			.azure-services-views-btn-group {
+				border: 1px solid var(--bg-slate-400);
+				border-radius: 4px;
+
+				display: flex;
+				align-items: center;
+
+				.azure-services-views-btn {
+					&:first-child {
+						border-radius: 4px 0px 0px 4px;
+					}
+					&:last-child {
+						border-radius: 0px 4px 4px 0px;
+					}
+
+					&:hover {
+						background-color: var(--bg-slate-400);
+					}
+
+					&.active {
+						background-color: var(--bg-slate-400);
+					}
+				}
+			}
+		}
+
+		.azure-services-list-section {
+			height: 100%;
+			position: relative;
+
+			.azure-services-list-section-content {
+				display: flex;
+				flex-direction: row;
+				width: 100%;
+				height: 100%;
+			}
+
+			.azure-services-list-section-loading-skeleton {
+				display: flex;
+				flex-direction: row;
+				width: 100%;
+
+				.azure-services-list-section-loading-skeleton-sidebar {
+					width: 240px;
+					padding: 12px;
+
+					display: flex;
+					flex-direction: column;
+					gap: 24px;
+				}
+
+				.azure-services-list-section-loading-skeleton-main {
+					flex: 1;
+					padding: 12px;
+
+					display: flex;
+					flex-direction: column;
+					gap: 24px;
+				}
+			}
+
+			.azure-services-list-view {
+				height: 100%;
+
+				.azure-services-list-view-sidebar {
+					width: 240px;
+					height: 100%;
+					border-right: 1px solid var(--l3-background);
+					padding: 12px;
+
+					.azure-services-list-view-sidebar-content {
+						display: flex;
+						flex-direction: column;
+						gap: 8px;
+						.azure-services-enabled {
+							display: flex;
+							flex-direction: column;
+							gap: 8px;
+						}
+
+						.azure-services-not-enabled {
+							display: flex;
+							flex-direction: column;
+							gap: 8px;
+						}
+
+						.azure-services-list-view-sidebar-content-header {
+							color: var(--l2-foreground);
+							font-family: Inter;
+							font-size: 11px;
+							font-style: normal;
+							font-weight: 600;
+							line-height: 18px; /* 163.636% */
+							letter-spacing: 0.44px;
+							text-transform: uppercase;
+						}
+
+						.azure-services-list-view-sidebar-content-item {
+							display: flex;
+							flex-direction: row;
+							align-items: center;
+							gap: 10px;
+							padding: 4px 12px;
+							border-radius: 4px;
+
+							cursor: pointer;
+
+							.azure-services-list-view-sidebar-content-item-icon {
+								width: 20px;
+								height: 20px;
+							}
+
+							.azure-services-list-view-sidebar-content-item-title {
+								color: var(--l1-foreground);
+								font-family: Inter;
+								font-size: 13px;
+								font-style: normal;
+								font-weight: 400;
+								line-height: 18px; /* 128.571% */
+							}
+
+							&:hover {
+								color: var(--l1-foreground);
+								font-family: Inter;
+								font-size: 13px;
+								font-style: normal;
+								font-weight: 400;
+								line-height: 18px; /* 128.571% */
+							}
+
+							&.active {
+								color: var(--l1-foreground);
+								font-family: Inter;
+								font-size: 13px;
+								font-style: normal;
+								font-weight: 400;
+								line-height: 18px; /* 128.571% */
+
+								background-color: var(--l3-background);
+
+								.azure-services-list-view-sidebar-content-item-title {
+									color: var(--l1-foreground);
+								}
+							}
+						}
+					}
+				}
+
+				.azure-services-list-view-main {
+					flex: 1;
+					padding: 12px;
+				}
+			}
+
+			.azure-services-grid-view {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+			}
+		}
+	}
+}

frontend/src/container/Integrations/CloudIntegration/AzureServices/AzureServicesListView.tsx

@@ -0,0 +1,70 @@
+import cx from 'classnames';
+import { AzureService } from 'container/Integrations/types';
+
+interface AzureServicesListViewProps {
+	selectedService: AzureService | null;
+	enabledServices: AzureService[];
+	notEnabledServices: AzureService[];
+	onSelectService: (service: AzureService) => void;
+}
+
+export default function AzureServicesListView({
+	selectedService,
+	enabledServices,
+	notEnabledServices,
+	onSelectService,
+}: AzureServicesListViewProps): JSX.Element {
+	const isEnabledServicesEmpty = enabledServices.length === 0;
+	const isNotEnabledServicesEmpty = notEnabledServices.length === 0;
+
+	const renderServiceItem = (service: AzureService): JSX.Element => {
+		return (
+			<div
+				className={cx('azure-services-list-view-sidebar-content-item', {
+					active: service.id === selectedService?.id,
+				})}
+				key={service.id}
+				onClick={(): void => onSelectService(service)}
+			>
+				<img
+					src={service.icon}
+					alt={service.title}
+					className="azure-services-list-view-sidebar-content-item-icon"
+				/>
+				<div className="azure-services-list-view-sidebar-content-item-title">
+					{service.title}
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<div className="azure-services-list-view">
+			<div className="azure-services-list-view-sidebar">
+				<div className="azure-services-list-view-sidebar-content">
+					<div className="azure-services-enabled">
+						<div className="azure-services-list-view-sidebar-content-header">
+							Enabled
+						</div>
+						{enabledServices.map((service) => renderServiceItem(service))}
+
+						{isEnabledServicesEmpty && (
+							<div className="azure-services-list-view-sidebar-content-item-empty-message">
+								No enabled services
+							</div>
+						)}
+					</div>
+
+					{!isNotEnabledServicesEmpty && (
+						<div className="azure-services-not-enabled">
+							<div className="azure-services-list-view-sidebar-content-header">
+								Not Enabled
+							</div>
+							{notEnabledServices.map((service) => renderServiceItem(service))}
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/container/Integrations/CloudIntegration/AzureServices/index.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Skeleton } from 'antd';
+import CloudIntegrationsHeader from 'components/CloudIntegrations/CloudIntegrationsHeader';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import {
+	AzureConfig,
+	AzureService,
+	CloudAccount,
+	IntegrationType,
+} from 'container/Integrations/types';
+import { useGetAccountServices } from 'hooks/integration/useGetAccountServices';
+import { useGetCloudIntegrationAccounts } from 'hooks/integration/useGetCloudIntegrationAccounts';
+import useUrlQuery from 'hooks/useUrlQuery';
+
+import { getAccountById } from '../utils';
+import AzureServiceDetails from './AzureServiceDetails/AzureServiceDetails';
+import AzureServicesListView from './AzureServicesListView';
+
+import './AzureServices.styles.scss';
+
+/** Service is enabled if even one sub item (log or metric) is enabled */
+function hasAnySubItemEnabled(service: AzureService): boolean {
+	const logs = service.config?.logs ?? [];
+	const metrics = service.config?.metrics ?? [];
+	return (
+		logs.some((log: AzureConfig) => log.enabled) ||
+		metrics.some((metric: AzureConfig) => metric.enabled)
+	);
+}
+
+function AzureServices(): JSX.Element {
+	const urlQuery = useUrlQuery();
+	const [selectedAccount, setSelectedAccount] = useState<CloudAccount | null>(
+		null,
+	);
+	const [selectedService, setSelectedService] = useState<AzureService | null>(
+		null,
+	);
+
+	const {
+		data: accounts = [],
+		isLoading: isLoadingAccounts,
+		isFetching: isFetchingAccounts,
+		refetch: refetchAccounts,
+	} = useGetCloudIntegrationAccounts(INTEGRATION_TYPES.AZURE);
+
+	const initialAccount = useMemo(
+		() =>
+			accounts?.length
+				? getAccountById(accounts, urlQuery.get('cloudAccountId') || '') ||
+				  accounts[0]
+				: null,
+		[accounts, urlQuery],
+	);
+
+	// Sync selectedAccount with initialAccount when accounts load (enables Subscription ID display)
+	// Cast: hook returns AWS-typed CloudAccount[] but AZURE fetch returns Azure-shaped accounts
+	useEffect(() => {
+		setSelectedAccount(initialAccount as CloudAccount | null);
+	}, [initialAccount]);
+
+	const cloudAccountId = initialAccount?.cloud_account_id;
+
+	const {
+		data: azureServices = [],
+		isLoading: isLoadingAzureServices,
+	} = useGetAccountServices(INTEGRATION_TYPES.AZURE, cloudAccountId);
+
+	const enabledServices = useMemo(
+		() => azureServices?.filter(hasAnySubItemEnabled) ?? [],
+		[azureServices],
+	);
+
+	// Derive from enabled to guarantee each service is in exactly one list
+	const enabledIds = useMemo(() => new Set(enabledServices.map((s) => s.id)), [
+		enabledServices,
+	]);
+	const notEnabledServices = useMemo(
+		() => azureServices?.filter((s) => !enabledIds.has(s.id)) ?? [],
+		[azureServices, enabledIds],
+	);
+
+	useEffect(() => {
+		const allServices = [...enabledServices, ...notEnabledServices];
+
+		// If a service is already selected and still exists in the refreshed list, keep it
+		if (selectedService && allServices.some((s) => s.id === selectedService.id)) {
+			// Update the selected service reference to the fresh object from the new list
+			const freshService = allServices.find((s) => s.id === selectedService.id);
+			if (freshService && freshService !== selectedService) {
+				setSelectedService(freshService);
+			}
+			return;
+		}
+
+		// No valid selection — pick a default
+		if (enabledServices.length > 0) {
+			setSelectedService(enabledServices[0]);
+		} else if (notEnabledServices.length > 0) {
+			setSelectedService(notEnabledServices[0]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [enabledServices, notEnabledServices]);
+
+	return (
+		<div className="azure-services-container">
+			<CloudIntegrationsHeader
+				cloudServiceId={IntegrationType.AZURE_SERVICES}
+				selectedAccount={selectedAccount}
+				accounts={accounts}
+				isLoadingAccounts={isLoadingAccounts}
+				onSelectAccount={setSelectedAccount}
+				refetchAccounts={refetchAccounts}
+			/>
+			<div className="azure-services-content">
+				<div className="azure-services-list-section">
+					{(isLoadingAzureServices || isFetchingAccounts) && (
+						<div className="azure-services-list-section-loading-skeleton">
+							<div className="azure-services-list-section-loading-skeleton-sidebar">
+								<Skeleton active />
+								<Skeleton active />
+							</div>
+							<div className="azure-services-list-section-loading-skeleton-main">
+								<Skeleton active />
+								<Skeleton active />
+								<Skeleton active />
+							</div>
+						</div>
+					)}
+
+					{!isLoadingAzureServices && !isFetchingAccounts && (
+						<div className="azure-services-list-section-content">
+							<AzureServicesListView
+								selectedService={selectedService}
+								enabledServices={enabledServices}
+								notEnabledServices={notEnabledServices}
+								onSelectService={setSelectedService}
+							/>
+
+							<AzureServiceDetails
+								selectedService={selectedService}
+								cloudAccountId={selectedAccount?.cloud_account_id || ''}
+							/>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default AzureServices;

frontend/src/container/Integrations/CloudIntegration/CloudIntegration.styles.scss

@@ -0,0 +1,3 @@
+.cloud-integration-container {
+	height: 100%;
+}

frontend/src/container/Integrations/CloudIntegration/CloudIntegration.tsx

@@ -0,0 +1,20 @@
+import { IntegrationType } from 'container/Integrations/types';
+
+import AWSTabs from './AmazonWebServices/ServicesTabs';
+import AzureServices from './AzureServices';
+import Header from './Header/Header';
+
+import './CloudIntegration.styles.scss';
+
+const CloudIntegration = ({ type }: { type: IntegrationType }): JSX.Element => {
+	return (
+		<div className="cloud-integration-container">
+			<Header title={type} />
+
+			{type === IntegrationType.AWS_SERVICES && <AWSTabs />}
+			{type === IntegrationType.AZURE_SERVICES && <AzureServices />}
+		</div>
+	);
+};
+
+export default CloudIntegration;

frontend/src/container/Integrations/CloudIntegration/ConfigConnectionStatus/ConfigConnectionStatus.styles.scss

@@ -0,0 +1,42 @@
+.config-connection-status-popover {
+	.ant-popover-inner {
+		padding: 0;
+		background-color: var(--l2-background);
+		border-radius: 4px;
+		border: 1px solid var(--l3-background);
+		padding: 8px;
+
+		width: 240px;
+
+		.ant-popover-content {
+			padding: 0;
+		}
+	}
+
+	.config-connection-status-item {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+
+		padding: 4px 8px;
+		border-radius: 4px;
+	}
+
+	.config-connection-status-icon {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.config-connection-status-category-display-name {
+		color: var(--l2-foreground);
+		font-family: Inter;
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 18px; /* 138.462% */
+	}
+}

frontend/src/container/Integrations/CloudIntegration/ConfigConnectionStatus/ConfigConnectionStatus.tsx

@@ -0,0 +1,30 @@
+import { Color } from '@signozhq/design-tokens';
+import { IConfigConnectionStatus } from 'container/Integrations/types';
+import { CheckCircle, TriangleAlert } from 'lucide-react';
+
+import './ConfigConnectionStatus.styles.scss';
+
+export function ConfigConnectionStatus({
+	status,
+}: {
+	status: IConfigConnectionStatus[] | null;
+}): JSX.Element {
+	return (
+		<div className="config-connection-status-container">
+			{status?.map((status) => (
+				<div key={status.category} className="config-connection-status-item">
+					<div className="config-connection-status-icon">
+						{status.last_received_ts_ms && status.last_received_ts_ms > 0 ? (
+							<CheckCircle size={16} color={Color.BG_FOREST_500} />
+						) : (
+							<TriangleAlert size={16} color={Color.BG_AMBER_500} />
+						)}
+					</div>
+					<div className="config-connection-status-category-display-name">
+						{status.category_display_name}
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}

frontend/src/container/Integrations/CloudIntegration/Header/Header.styles.scss

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