feat(infra-monitoring-logs): add support for query range v5

* feat(infra-monitoring-hosts): use shared component on hosts container

* fix(infra-monitoring): migrate to css modules

* refactor(k8s-base-list): extract empty state component

.github/CODEOWNERS

@@ -16,38 +16,38 @@ go.mod @therealpandey
 
 # Scaffold Owners
 
-/pkg/config/ @therealpandey
-/pkg/errors/ @therealpandey
-/pkg/factory/ @therealpandey
-/pkg/types/ @therealpandey
-/pkg/valuer/ @therealpandey
-/cmd/ @therealpandey
-.golangci.yml @therealpandey
+/pkg/config/ @vikrantgupta25
+/pkg/errors/ @vikrantgupta25
+/pkg/factory/ @vikrantgupta25
+/pkg/types/ @vikrantgupta25
+/pkg/valuer/ @vikrantgupta25
+/cmd/ @vikrantgupta25
+.golangci.yml @vikrantgupta25
 
 # Zeus Owners
 
-/pkg/zeus/ @therealpandey
-/ee/zeus/ @therealpandey
-/pkg/licensing/ @therealpandey
-/ee/licensing/ @therealpandey
+/pkg/zeus/ @vikrantgupta25
+/ee/zeus/ @vikrantgupta25
+/pkg/licensing/ @vikrantgupta25
+/ee/licensing/ @vikrantgupta25
 
 # SQL Owners
 
-/pkg/sqlmigration/ @therealpandey
-/ee/sqlmigration/ @therealpandey
-/pkg/sqlschema/ @therealpandey
-/ee/sqlschema/ @therealpandey
+/pkg/sqlmigration/ @vikrantgupta25
+/ee/sqlmigration/ @vikrantgupta25
+/pkg/sqlschema/ @vikrantgupta25
+/ee/sqlschema/ @vikrantgupta25
 
 # Analytics Owners
 
-/pkg/analytics/ @therealpandey
-/pkg/statsreporter/ @therealpandey
+/pkg/analytics/ @vikrantgupta25
+/pkg/statsreporter/ @vikrantgupta25
 
 # Emailing Owners
 
-/pkg/emailing/ @therealpandey
-/pkg/types/emailtypes/ @therealpandey
-/templates/email/ @therealpandey
+/pkg/emailing/ @vikrantgupta25
+/pkg/types/emailtypes/ @vikrantgupta25
+/templates/email/ @vikrantgupta25
 
 # Querier Owners
 
@@ -97,23 +97,23 @@ go.mod @therealpandey
 
 # AuthN / AuthZ Owners
 
-/pkg/authz/ @therealpandey
-/ee/authz/ @therealpandey
-/pkg/authn/ @therealpandey
-/ee/authn/ @therealpandey
-/pkg/modules/user/ @therealpandey
-/pkg/modules/session/ @therealpandey
-/pkg/modules/organization/ @therealpandey
-/pkg/modules/authdomain/ @therealpandey
-/pkg/modules/role/ @therealpandey
+/pkg/authz/ @vikrantgupta25
+/ee/authz/ @vikrantgupta25
+/pkg/authn/ @vikrantgupta25
+/ee/authn/ @vikrantgupta25
+/pkg/modules/user/ @vikrantgupta25
+/pkg/modules/session/ @vikrantgupta25
+/pkg/modules/organization/ @vikrantgupta25
+/pkg/modules/authdomain/ @vikrantgupta25
+/pkg/modules/role/ @vikrantgupta25
 
 # IdentN Owners
-/pkg/identn/ @therealpandey
-/pkg/http/middleware/identn.go @therealpandey
+/pkg/identn/ @vikrantgupta25
+/pkg/http/middleware/identn.go @vikrantgupta25
 
 # Integration tests
 
-/tests/integration/ @therealpandey
+/tests/integration/ @vikrantgupta25
 
 # OpenAPI types generator
 

cmd/community/server.go

@@ -7,7 +7,6 @@ import (
 	"github.com/spf13/cobra"
 
 	"github.com/SigNoz/signoz/cmd"
-	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/auditor"
 	"github.com/SigNoz/signoz/pkg/authn"
@@ -15,7 +14,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/authz/openfgaauthz"
 	"github.com/SigNoz/signoz/pkg/authz/openfgaschema"
 	"github.com/SigNoz/signoz/pkg/authz/openfgaserver"
-	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/gateway"
@@ -28,20 +26,14 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
-	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
-	"github.com/SigNoz/signoz/pkg/prometheus"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/queryparser"
-	"github.com/SigNoz/signoz/pkg/ruler"
-	"github.com/SigNoz/signoz/pkg/ruler/signozruler"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/sqlschema"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/SigNoz/signoz/pkg/zeus/noopzeus"
@@ -83,7 +75,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
-		signoz.NewWebProviderFactories(config.Global),
+		signoz.NewWebProviderFactories(),
 		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
 			return signoz.NewSQLSchemaProviderFactories(sqlstore)
 		},
@@ -115,9 +107,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ sqlstore.SQLStore, _ global.Global, _ zeus.Zeus, _ gateway.Gateway, _ licensing.Licensing, _ serviceaccount.Module, _ cloudintegration.Config) (cloudintegration.Module, error) {
 			return implcloudintegration.NewModule(), nil
 		},
-		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {
-			return factory.MustNewNamedMap(signozruler.NewFactory(c, am, ss, ts, ms, p, og, rsh, q, qp, nil, nil))
-		},
 	)
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", errors.Attr(err))

cmd/enterprise/server.go

@@ -22,17 +22,14 @@ import (
 	"github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard"
 	eequerier "github.com/SigNoz/signoz/ee/querier"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
-	eerules "github.com/SigNoz/signoz/ee/query-service/rules"
 	"github.com/SigNoz/signoz/ee/sqlschema/postgressqlschema"
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
 	enterprisezeus "github.com/SigNoz/signoz/ee/zeus"
 	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
-	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/auditor"
 	"github.com/SigNoz/signoz/pkg/authn"
 	"github.com/SigNoz/signoz/pkg/authz"
-	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/gateway"
@@ -43,21 +40,15 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
-	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
-	"github.com/SigNoz/signoz/pkg/prometheus"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
-	"github.com/SigNoz/signoz/pkg/ruler"
-	"github.com/SigNoz/signoz/pkg/ruler/signozruler"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/sqlschema"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstorehook"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
 )
@@ -105,7 +96,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
-		signoz.NewWebProviderFactories(config.Global),
+		signoz.NewWebProviderFactories(),
 		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
 			existingFactories := signoz.NewSQLSchemaProviderFactories(sqlstore)
 			if err := existingFactories.Add(postgressqlschema.NewFactory(sqlstore)); err != nil {
@@ -175,9 +166,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return implcloudintegration.NewModule(pkgcloudintegration.NewStore(sqlStore), global, zeus, gateway, licensing, serviceAccount, cloudProvidersMap, config)
 		},
-		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {
-			return factory.MustNewNamedMap(signozruler.NewFactory(c, am, ss, ts, ms, p, og, rsh, q, qp, eerules.PrepareTaskFunc, eerules.TestNotification))
-		},
 	)
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", errors.Attr(err))

conf/example.yaml

@@ -6,8 +6,6 @@
 ##################### Global #####################
 global:
   # the url under which the signoz apiserver is externally reachable.
-  # the path component (e.g. /signoz in https://example.com/signoz) is used
-  # as the base path for all HTTP routes (both API and web frontend).
   external_url: <unset>
   # the url where the SigNoz backend receives telemetry data (traces, metrics, logs) from instrumented applications.
   ingestion_url: <unset>
@@ -52,8 +50,8 @@ pprof:
 web:
   # Whether to enable the web frontend
   enabled: true
-  # The index file to use as the SPA entrypoint.
-  index: index.html
+  # The prefix to serve web on
+  prefix: /
   # The directory containing the static build files.
   directory: /etc/signoz/web
 

docs/contributing/go/readme.md

@@ -20,4 +20,3 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [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
-- [Types](types.md) - Domain types, request/response bodies, and storage rows in `pkg/types/`

docs/contributing/go/types.md

@@ -1,152 +0,0 @@
-# Types
-
-Domain types in `pkg/types/<domain>/` live on three serialization boundaries — inbound HTTP, outbound HTTP, and SQL — on top of an in-memory domain representation. SigNoz's convention is **core-type-first**: every domain defines a single canonical type `X`, and specialized flavors (`PostableX`, `GettableX`, `UpdatableX`, `StorableX`) are introduced **only when they actually differ from `X`**. This guide spells out when each flavor is warranted and how they relate to each other.
-
-Before reading, make sure you have read [abstractions.md](abstractions.md) — the rules here build on its guidance that every new type must earn its place.
-
-## The core type is required
-
-Every domain package in `pkg/types/<domain>/` defines exactly one core type `X`: `AuthDomain`, `Channel`, `Rule`, `Dashboard`, `Role`, `PlannedMaintenance`. This is the canonical in-memory representation of the domain object. Domain methods, validation invariants, and business logic hang off `X` — not off the flavor types.
-
-Two rules shape how the core type behaves:
-
-- **Conversions can be either `New<Output>From<Input>` or a receiver-style `(x *X) ToY()` method.** Either form is fine; pick whichever reads best at the call site:
-
-    ```go
-    // Constructor form
-    func NewGettableAuthDomainFromAuthDomain(d *AuthDomain, info *AuthNProviderInfo) *GettableAuthDomain
-
-    // Receiver form
-    func (m *PlannedMaintenanceWithRules) ToPlannedMaintenance() *PlannedMaintenance
-    ```
-- **`X` can double as the storage row** when the DB shape would be identical. `Channel` embeds `bun.BaseModel` directly, and there is no `StorableChannel`. This is the preferred shape when it works.
-
-Domain packages under `pkg/types/` must not import from other `pkg/` packages. Keep the core type's methods lightweight and push orchestration out to the module layer.
-
-## Add a flavor only when it differs
-
-For each of the four flavors, create it only if its shape diverges from `X`. If a flavor would have the same fields and tags as `X`, reuse `X` directly, or declare a type alias. Every flavor must earn its place per [abstractions.md](abstractions.md) rule 6 ("Wrappers must add semantics, not just rename").
-
-| Flavor       | Create it when it differs in…                                                                                                                                                                                                     |
-| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `PostableX`  | JSON shape differs from `X` — typically no `Id`, no audit fields, no server-computed fields. Often owns input validation via `Validate()` or a custom `UnmarshalJSON`.                                                            |
-| `GettableX`  | Response shape adds server-computed fields that are not persisted — e.g., `GettableAuthDomain` adds `AuthNProviderInfo`, which is resolved at read time.                                                                          |
-| `UpdatableX` | Only a strict subset of `PostableX` is replaceable on PUT. If the updatable shape equals `PostableX`, reuse `PostableX`.                                                                                                          |
-| `StorableX`  | DB row shape differs from `X` — usually `X` carries nested typed config while `StorableX` carries a flat `Data string` JSON column, plus bun tags, audit mixins, and an `OrgID`. If `X` already has those, skip the flavor.       |
-
-The failure mode this rule exists to prevent: minting all four flavors on reflex for every new resource, even when two or three are structurally identical. Each unnecessary flavor is another type contributors must understand and another conversion that can drift.
-
-## Worked examples
-
-### Channel — core type only
-
-```go
-type Channels         = []*Channel
-type GettableChannels = []*Channel
-
-type Channel struct {
-    bun.BaseModel `bun:"table:notification_channel"`
-    types.Identifiable
-    types.TimeAuditable
-    Name  string `json:"name"  required:"true" bun:"name"`
-    Type  string `json:"type"  required:"true" bun:"type"`
-    Data  string `json:"data"  required:"true" bun:"data"`
-    OrgID string `json:"orgId" required:"true" bun:"org_id"`
-}
-```
-
-`Channel` is both the domain type and the bun row. `GettableChannels` is a **type alias** because `*Channel` already serializes correctly as a response. There is no `StorableChannel`, `PostableChannel`, or `UpdatableChannel` — those would be identical to `Channel` and so do not exist. Prefer this shape when it works.
-
-### AuthDomain — all four flavors
-
-```go
-type AuthDomain struct {
-    storableAuthDomain *StorableAuthDomain
-    authDomainConfig   *AuthDomainConfig
-}
-
-type StorableAuthDomain struct {
-    bun.BaseModel `bun:"table:auth_domain"`
-    types.Identifiable
-    Name  string      `bun:"name"`
-    Data  string      `bun:"data"`  // AuthDomainConfig serialized as JSON
-    OrgID valuer.UUID `bun:"org_id"`
-    types.TimeAuditable
-}
-
-type PostableAuthDomain struct {
-    Config AuthDomainConfig `json:"config"`
-    Name   string           `json:"name"`
-}
-
-type UpdateableAuthDomain struct {
-    Config AuthDomainConfig `json:"config"` // Name intentionally absent
-}
-
-type GettableAuthDomain struct {
-    *StorableAuthDomain
-    *AuthDomainConfig
-    AuthNProviderInfo *AuthNProviderInfo `json:"authNProviderInfo"`
-}
-```
-
-Each flavor exists for a concrete reason:
-
-- `StorableAuthDomain` stores the typed config as an opaque `Data string` column, so the schema does not need to migrate every time a config field is added.
-- `PostableAuthDomain` carries the config as a structured object (not a string) for the request.
-- `UpdateableAuthDomain` excludes `Name` because a domain's name cannot change after creation.
-- `GettableAuthDomain` adds `AuthNProviderInfo`, which is derived at read time and never persisted.
-
-The core `AuthDomain` holds the two live halves — `storableAuthDomain` and `authDomainConfig` — and owns business methods such as `Update(config)`. Conversions use the `New<Output>From<Input>` form: `NewAuthDomainFromConfig`, `NewAuthDomainFromStorableAuthDomain`, `NewGettableAuthDomainFromAuthDomain`.
-
-## Conventions that tie the flavors together
-
-- **Conversions** use either a `New<Output>From<Input>` constructor — e.g. `NewChannelFromReceiver`, `NewGettableAuthDomainFromAuthDomain` — or a receiver-style `ToY()` method. Both forms coexist in the codebase; use whichever fits the call site.
-- **Validation belongs on the core type `X`.** Putting it on `X` means every write path — HTTP create, HTTP update, in-process migration, replay — runs the same checks. `Validate()` on `PostableX` is reserved for checks that are specific to the request shape and do not apply to `X`. `UnmarshalJSON` on `PostableX` is a separate tool that lives there because decoding only happens at the HTTP boundary — `PostableAuthDomain.UnmarshalJSON` rejecting a malformed domain name at decode time is the canonical example.
-
-    ```go
-    // Domain invariants: every write path re-runs these.
-    func (x *X) Validate() error { ... }
-
-    // Request-shape-only: checks that do not apply once the value is persisted.
-    func (p *PostableX) Validate() error { ... }
-    ```
-- **Type aliases, not wrappers**, when two shapes are identical. `type GettableChannels = []*Channel` is correct because it adds no semantics beyond the underlying type.
-- **Serialization tags** follow [handler.md](handler.md): `required:"true"` means the JSON key must be present, `nullable:"true"` is required on any slice or map that may serialize as `null`, and types with a fixed value set must implement `Enum() []any`.
-
-## A note on `UpdatableX` and `PatchableX`
-
-- `UpdatableX` — the body for PUT (full replace) when the shape is a strict subset of `PostableX`. If the updatable shape equals `PostableX`, reuse `PostableX`.
-- `PatchableX` — the body for PATCH (partial update); only the fields a client is allowed to patch. For example, `PatchableRole` carries a single `Description` field even though `Role` has many — clients may patch the description but not anything else.
-
-    ```go
-    type PatchableRole struct {
-        Description string `json:"description"`
-    }
-    ```
-
-Both are optional. Do not introduce them if `PostableX` already covers the case.
-
-## What to avoid
-
-- **Do not mint a flavor that mirrors the core type.** If `StorableX` would have the same fields as `X`, use `X` directly with `bun.BaseModel` embedded. `Channel` is the canonical example.
-- **Do not bolt domain methods onto `StorableX`.** Storage types are data carriers. Domain methods live on `X`.
-- **Do not invent new suffixes** (`Creatable`, `Fetchable`, `Savable`). The core type plus `Postable` / `Gettable` / `Updatable` / `Patchable` / `Storable` covers every case that exists today.
-- **Spelling — `Updatable`, not `Updateable`.** `Updateable` is a common typo. Prefer the shorter form when introducing new types, and rename any stragglers you come across.
-- **Spelling — `Storable`, not `Storeable`.** `Storeable` is a common typo. Prefer the shorter form when introducing new types, and rename any stragglers you come across.
-
-## What should I remember?
-
-- Every domain package defines the core type `X`. Only `X` is mandatory.
-- Add `PostableX` / `GettableX` / `UpdatableX` / `StorableX` one at a time, only when the shape actually diverges from `X`.
-- Domain logic lives on `X`, not on the flavor types.
-- Conversions can be a `New<Output>From<Input>` constructor or a receiver-style `ToY()` method — pick whichever reads best at the call site.
-- Use a type alias when two shapes are truly identical.
-- `pkg/types/<domain>/` must not import from other `pkg/` packages.
-
-## Further reading
-
-- [abstractions.md](abstractions.md) — when to introduce a new type at all.
-- [handler.md](handler.md) — struct tag rules at the HTTP boundary.
-- [packages.md](packages.md) — where types live under `pkg/types/`.
-- [sql.md](sql.md) — star-schema requirements for `StorableX`.

ee/modules/cloudintegration/implcloudintegration/implcloudprovider/awscloudprovider.go

@@ -19,11 +19,11 @@ func NewAWSCloudProvider(defStore cloudintegrationtypes.ServiceDefinitionStore)
 }
 
 func (provider *awscloudprovider) GetConnectionArtifact(ctx context.Context, account *cloudintegrationtypes.Account, req *cloudintegrationtypes.GetConnectionArtifactRequest) (*cloudintegrationtypes.ConnectionArtifact, error) {
-	baseURL := fmt.Sprintf(cloudintegrationtypes.CloudFormationQuickCreateBaseURL.StringValue(), req.Config.AWS.DeploymentRegion)
+	baseURL := fmt.Sprintf(cloudintegrationtypes.CloudFormationQuickCreateBaseURL.StringValue(), req.Config.Aws.DeploymentRegion)
 	u, _ := url.Parse(baseURL)
 
 	q := u.Query()
-	q.Set("region", req.Config.AWS.DeploymentRegion)
+	q.Set("region", req.Config.Aws.DeploymentRegion)
 	u.Fragment = "/stacks/quickcreate"
 
 	u.RawQuery = q.Encode()
@@ -39,7 +39,9 @@ func (provider *awscloudprovider) GetConnectionArtifact(ctx context.Context, acc
 	q.Set("param_IngestionKey", req.Credentials.IngestionKey)
 
 	return &cloudintegrationtypes.ConnectionArtifact{
-		AWS: cloudintegrationtypes.NewAWSConnectionArtifact(u.String() + "?&" + q.Encode()), // this format is required by AWS
+		Aws: &cloudintegrationtypes.AWSConnectionArtifact{
+			ConnectionURL: u.String() + "?&" + q.Encode(), // this format is required by AWS
+		},
 	}, nil
 }
 
@@ -122,6 +124,9 @@ func (provider *awscloudprovider) BuildIntegrationConfig(
 	}
 
 	return &cloudintegrationtypes.ProviderIntegrationConfig{
-		AWS: cloudintegrationtypes.NewAWSIntegrationConfig(account.Config.AWS.Regions, collectionStrategy),
+		AWS: &cloudintegrationtypes.AWSIntegrationConfig{
+			EnabledRegions:              account.Config.AWS.Regions,
+			TelemetryCollectionStrategy: collectionStrategy,
+		},
 	}, nil
 }

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

@@ -14,6 +14,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
+	rules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/version"
@@ -22,6 +23,7 @@ import (
 
 type APIHandlerOptions struct {
 	DataConnector                 interfaces.Reader
+	RulesManager                  *rules.Manager
 	UsageManager                  *usage.Manager
 	IntegrationsController        *integrations.Controller
 	CloudIntegrationsController   *cloudintegrations.Controller
@@ -41,6 +43,7 @@ type APIHandler struct {
 func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.Config) (*APIHandler, error) {
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
+		RuleManager:                   opts.RulesManager,
 		IntegrationsController:        opts.IntegrationsController,
 		CloudIntegrationsController:   opts.CloudIntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
@@ -61,6 +64,10 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 	return ah, nil
 }
 
+func (ah *APIHandler) RM() *rules.Manager {
+	return ah.opts.RulesManager
+}
+
 func (ah *APIHandler) UM() *usage.Manager {
 	return ah.opts.UsageManager
 }

ee/query-service/app/server.go

@@ -12,6 +12,10 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/cache/memorycache"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/queryparser"
+	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 
 	"github.com/gorilla/handlers"
 
@@ -19,10 +23,18 @@ import (
 	"github.com/soheilhy/cmux"
 
 	"github.com/SigNoz/signoz/ee/query-service/app/api"
+	"github.com/SigNoz/signoz/ee/query-service/rules"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
+	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
+	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
+	"github.com/SigNoz/signoz/pkg/prometheus"
+	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/signoz"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/web"
 
 	"log/slog"
@@ -37,6 +49,7 @@ import (
 	opAmpModel "github.com/SigNoz/signoz/pkg/query-service/app/opamp/model"
 	baseconst "github.com/SigNoz/signoz/pkg/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/query-service/healthcheck"
+	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/query-service/utils"
 )
 
@@ -44,6 +57,7 @@ import (
 type Server struct {
 	config      signoz.Config
 	signoz      *signoz.SigNoz
+	ruleManager *baserules.Manager
 
 	// public http router
 	httpConn     net.Listener
@@ -83,6 +97,24 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		nil,
 	)
 
+	rm, err := makeRulesManager(
+		signoz.Cache,
+		signoz.Alertmanager,
+		signoz.SQLStore,
+		signoz.TelemetryStore,
+		signoz.TelemetryMetadataStore,
+		signoz.Prometheus,
+		signoz.Modules.OrgGetter,
+		signoz.Modules.RuleStateHistory,
+		signoz.Querier,
+		signoz.Instrumentation.ToProviderSettings(),
+		signoz.QueryParser,
+	)
+
+	if err != nil {
+		return nil, err
+	}
+
 	// initiate opamp
 	opAmpModel.Init(signoz.SQLStore, signoz.Instrumentation.Logger(), signoz.Modules.OrgGetter)
 
@@ -120,7 +152,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	}
 
 	// start the usagemanager
-	usageManager, err := usage.New(signoz.Licensing, signoz.TelemetryStore.ClickhouseDB(), signoz.Zeus, signoz.Modules.OrgGetter, signoz.Flagger)
+	usageManager, err := usage.New(signoz.Licensing, signoz.TelemetryStore.ClickhouseDB(), signoz.Zeus, signoz.Modules.OrgGetter)
 	if err != nil {
 		return nil, err
 	}
@@ -131,6 +163,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 
 	apiOpts := api.APIHandlerOptions{
 		DataConnector:                 reader,
+		RulesManager:                  rm,
 		UsageManager:                  usageManager,
 		IntegrationsController:        integrationsController,
 		CloudIntegrationsController:   cloudIntegrationsController,
@@ -147,7 +180,8 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 
 	s := &Server{
 		config:             config,
-		signoz:       signoz,
+		signoz:             signoz,
+		ruleManager:        rm,
 		httpHostPort:       baseconst.HTTPHostPort,
 		unavailableChannel: make(chan healthcheck.Status),
 		usageManager:       usageManager,
@@ -228,20 +262,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		return nil, err
 	}
 
-	routePrefix := s.config.Global.ExternalPath()
-	if routePrefix != "" {
-		prefixed := http.StripPrefix(routePrefix, handler)
-		handler = http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
-			switch req.URL.Path {
-			case "/api/v1/health", "/api/v2/healthz", "/api/v2/readyz", "/api/v2/livez":
-				r.ServeHTTP(w, req)
-				return
-			}
-
-			prefixed.ServeHTTP(w, req)
-		})
-	}
-
 	return &http.Server{
 		Handler: handler,
 	}, nil
@@ -268,6 +288,8 @@ func (s *Server) initListeners() error {
 
 // Start listening on http and private http port concurrently
 func (s *Server) Start(ctx context.Context) error {
+	s.ruleManager.Start(ctx)
+
 	err := s.initListeners()
 	if err != nil {
 		return err
@@ -311,9 +333,47 @@ func (s *Server) Stop(ctx context.Context) error {
 
 	s.opampServer.Stop()
 
+	if s.ruleManager != nil {
+		s.ruleManager.Stop(ctx)
+	}
+
 	// stop usage manager
 	s.usageManager.Stop(ctx)
 
 	return nil
 }
 
+func makeRulesManager(cache cache.Cache, alertmanager alertmanager.Alertmanager, sqlstore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, metadataStore telemetrytypes.MetadataStore, prometheus prometheus.Prometheus, orgGetter organization.Getter, ruleStateHistoryModule rulestatehistory.Module, querier querier.Querier, providerSettings factory.ProviderSettings, queryParser queryparser.QueryParser) (*baserules.Manager, error) {
+	ruleStore := sqlrulestore.NewRuleStore(sqlstore, queryParser, providerSettings)
+	maintenanceStore := sqlrulestore.NewMaintenanceStore(sqlstore)
+	// create manager opts
+	managerOpts := &baserules.ManagerOptions{
+		TelemetryStore:         telemetryStore,
+		MetadataStore:          metadataStore,
+		Prometheus:             prometheus,
+		Context:                context.Background(),
+		Querier:                querier,
+		Logger:                 providerSettings.Logger,
+		Cache:                  cache,
+		EvalDelay:              baseconst.GetEvalDelay(),
+		PrepareTaskFunc:        rules.PrepareTaskFunc,
+		PrepareTestRuleFunc:    rules.TestNotification,
+		Alertmanager:           alertmanager,
+		OrgGetter:              orgGetter,
+		RuleStore:              ruleStore,
+		MaintenanceStore:       maintenanceStore,
+		SQLStore:               sqlstore,
+		QueryParser:            queryParser,
+		RuleStateHistoryModule: ruleStateHistoryModule,
+	}
+
+	// create Manager
+	manager, err := baserules.NewManager(managerOpts)
+	if err != nil {
+		return nil, fmt.Errorf("rule manager error: %v", err)
+	}
+
+	slog.Info("rules manager is ready")
+
+	return manager, nil
+}

ee/query-service/usage/manager.go

@@ -16,11 +16,9 @@ import (
 
 	"github.com/SigNoz/signoz/ee/query-service/model"
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/encryption"
-	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	"github.com/SigNoz/signoz/pkg/zeus"
 )
 
@@ -45,18 +43,15 @@ type Manager struct {
 	zeus zeus.Zeus
 
 	orgGetter organization.Getter
-
-	flagger flagger.Flagger
 }
 
-func New(licenseService licensing.Licensing, clickhouseConn clickhouse.Conn, zeus zeus.Zeus, orgGetter organization.Getter, flagger flagger.Flagger) (*Manager, error) {
+func New(licenseService licensing.Licensing, clickhouseConn clickhouse.Conn, zeus zeus.Zeus, orgGetter organization.Getter) (*Manager, error) {
 	m := &Manager{
 		clickhouseConn: clickhouseConn,
 		licenseService: licenseService,
 		scheduler:      gocron.NewScheduler(time.UTC).Every(1).Day().At("00:00"), // send usage every at 00:00 UTC
 		zeus:           zeus,
 		orgGetter:      orgGetter,
-		flagger:        flagger,
 	}
 	return m, nil
 }
@@ -173,14 +168,7 @@ func (lm *Manager) UploadUsage(ctx context.Context) {
 			return
 		}
 
-		evalCtx := featuretypes.NewFlaggerEvaluationContext(organization.ID)
-		useZeus := lm.flagger.BooleanOrEmpty(ctx, flagger.FeaturePutMetersInZeus, evalCtx)
-
-		if useZeus {
-			errv2 = lm.zeus.PutMetersV2(ctx, payload.LicenseKey.String(), body)
-		} else {
-			errv2 = lm.zeus.PutMeters(ctx, payload.LicenseKey.String(), body)
-		}
+		errv2 = lm.zeus.PutMeters(ctx, payload.LicenseKey.String(), body)
 		if errv2 != nil {
 			slog.ErrorContext(ctx, "failed to upload usage", errors.Attr(errv2))
 			// not returning error here since it is captured in the failed count

ee/zeus/httpzeus/provider.go

@@ -136,18 +136,6 @@ func (provider *Provider) PutMeters(ctx context.Context, key string, data []byte
 	return err
 }
 
-func (provider *Provider) PutMetersV2(ctx context.Context, key string, data []byte) error {
-	_, err := provider.do(
-		ctx,
-		provider.config.URL.JoinPath("/v1/meters"),
-		http.MethodPost,
-		key,
-		data,
-	)
-
-	return err
-}
-
 func (provider *Provider) PutProfile(ctx context.Context, key string, profile *zeustypes.PostableProfile) error {
 	body, err := json.Marshal(profile)
 	if err != nil {

frontend/.eslintrc.cjs

@@ -66,8 +66,6 @@ module.exports = {
 	rules: {
 		// Asset migration — base-path safety
 		'rulesdir/no-unsupported-asset-pattern': 'error',
-		// Base-path safety — window.open and origin-concat patterns; upgrade to error coming PR
-		'rulesdir/no-raw-absolute-path': 'warn',
 
 		// Code quality rules
 		'prefer-const': 'error', // Enforces const for variables never reassigned

frontend/eslint-rules/no-raw-absolute-path.js

@@ -1,153 +0,0 @@
-'use strict';
-
-/**
- * ESLint rule: no-raw-absolute-path
- *
- * Catches patterns that break at runtime when the app is served from a
- * sub-path (e.g. /signoz/):
- *
- *   1. window.open(path, '_blank')
- *      → use openInNewTab(path) which calls withBasePath internally
- *
- *   2. window.location.origin + path  /  `${window.location.origin}${path}`
- *      → use getAbsoluteUrl(path)
- *
- *   3. frontendBaseUrl: window.location.origin  (bare origin usage)
- *      → use getBaseUrl() to include the base path
- *
- *   4. window.location.href = path
- *      → use withBasePath(path) or navigate() for internal navigation
- *
- * External URLs (first arg starts with "http") are explicitly allowed.
- */
-
-function isOriginAccess(node) {
-	return (
-		node.type === 'MemberExpression' &&
-		!node.computed &&
-		node.property.name === 'origin' &&
-		node.object.type === 'MemberExpression' &&
-		!node.object.computed &&
-		node.object.property.name === 'location' &&
-		node.object.object.type === 'Identifier' &&
-		node.object.object.name === 'window'
-	);
-}
-
-function isHrefAccess(node) {
-	return (
-		node.type === 'MemberExpression' &&
-		!node.computed &&
-		node.property.name === 'href' &&
-		node.object.type === 'MemberExpression' &&
-		!node.object.computed &&
-		node.object.property.name === 'location' &&
-		node.object.object.type === 'Identifier' &&
-		node.object.object.name === 'window'
-	);
-}
-
-function isExternalUrl(node) {
-	if (node.type === 'Literal' && typeof node.value === 'string') {
-		return node.value.startsWith('http://') || node.value.startsWith('https://');
-	}
-	if (node.type === 'TemplateLiteral' && node.quasis.length > 0) {
-		const raw = node.quasis[0].value.raw;
-		return raw.startsWith('http://') || raw.startsWith('https://');
-	}
-	return false;
-}
-
-// window.open(withBasePath(x)) and window.open(getAbsoluteUrl(x)) are already safe.
-function isSafeHelperCall(node) {
-	return (
-		node.type === 'CallExpression' &&
-		node.callee.type === 'Identifier' &&
-		(node.callee.name === 'withBasePath' || node.callee.name === 'getAbsoluteUrl')
-	);
-}
-
-module.exports = {
-	meta: {
-		type: 'suggestion',
-		docs: {
-			description:
-				'Disallow raw window.open and origin-concatenation patterns that miss the runtime base path',
-			category: 'Base Path Safety',
-		},
-		schema: [],
-		messages: {
-			windowOpen:
-				'Use openInNewTab(path) instead of window.open(path, "_blank") — openInNewTab prepends the base path automatically.',
-			originConcat:
-				'Use getAbsoluteUrl(path) instead of window.location.origin + path — getAbsoluteUrl prepends the base path automatically.',
-			originDirect:
-				'Use getBaseUrl() instead of window.location.origin — getBaseUrl includes the base path.',
-			hrefAssign:
-				'Use withBasePath(path) or navigate() instead of window.location.href = path — ensures the base path is included.',
-		},
-	},
-
-	create(context) {
-		return {
-			// window.open(path, ...) — allow only external first-arg URLs
-			CallExpression(node) {
-				const { callee, arguments: args } = node;
-				if (
-					callee.type !== 'MemberExpression' ||
-					callee.object.type !== 'Identifier' ||
-					callee.object.name !== 'window' ||
-					callee.property.name !== 'open'
-				)
-					return;
-				if (args.length < 1) return;
-				if (isExternalUrl(args[0])) return;
-				if (isSafeHelperCall(args[0])) return;
-
-				context.report({ node, messageId: 'windowOpen' });
-			},
-
-			// window.location.origin + path
-			BinaryExpression(node) {
-				if (node.operator !== '+') return;
-				if (isOriginAccess(node.left) || isOriginAccess(node.right)) {
-					context.report({ node, messageId: 'originConcat' });
-				}
-			},
-
-			// `${window.location.origin}${path}`
-			TemplateLiteral(node) {
-				if (node.expressions.some(isOriginAccess)) {
-					context.report({ node, messageId: 'originConcat' });
-				}
-			},
-
-			// window.location.origin used directly (not in concatenation)
-			// Catches: frontendBaseUrl: window.location.origin
-			MemberExpression(node) {
-				if (!isOriginAccess(node)) return;
-
-				const parent = node.parent;
-				// Skip if parent is BinaryExpression with + (handled by BinaryExpression visitor)
-				if (parent.type === 'BinaryExpression' && parent.operator === '+') return;
-				// Skip if inside TemplateLiteral (handled by TemplateLiteral visitor)
-				if (parent.type === 'TemplateLiteral') return;
-
-				context.report({ node, messageId: 'originDirect' });
-			},
-
-			// window.location.href = path
-			AssignmentExpression(node) {
-				if (node.operator !== '=') return;
-				if (!isHrefAccess(node.left)) return;
-
-				// Allow external URLs
-				if (isExternalUrl(node.right)) return;
-				// Allow safe helper calls
-				if (isSafeHelperCall(node.right)) return;
-
-				context.report({ node, messageId: 'hrefAssign' });
-			},
-		};
-	},
-};

frontend/index.html

@@ -2,7 +2,6 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="[[.BaseHref]]" />
 		<meta
 			http-equiv="Cache-Control"
 			content="no-cache, no-store, must-revalidate, max-age: 0"
@@ -60,7 +59,7 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="favicon.ico" />
+		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
 	</head>
 	<body data-theme="default">
 		<script>
@@ -137,7 +136,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="css/uPlot.min.css" />
+		<link rel="stylesheet" href="/css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>

frontend/package.json

@@ -48,23 +48,22 @@
     "@radix-ui/react-tooltip": "1.0.7",
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
-    "@signozhq/button": "0.0.5",
-    "@signozhq/calendar": "0.1.1",
-    "@signozhq/callout": "0.0.4",
-    "@signozhq/checkbox": "0.0.4",
-    "@signozhq/combobox": "0.0.4",
-    "@signozhq/command": "0.0.2",
+    "@signozhq/button": "0.0.2",
+    "@signozhq/calendar": "0.0.0",
+    "@signozhq/callout": "0.0.2",
+    "@signozhq/checkbox": "0.0.2",
+    "@signozhq/combobox": "0.0.2",
+    "@signozhq/command": "0.0.0",
     "@signozhq/design-tokens": "2.1.4",
-    "@signozhq/dialog": "0.0.4",
-    "@signozhq/drawer": "0.0.6",
+    "@signozhq/dialog": "^0.0.2",
+    "@signozhq/drawer": "0.0.4",
     "@signozhq/icons": "0.1.0",
-    "@signozhq/input": "0.0.4",
-    "@signozhq/popover": "0.1.2",
-    "@signozhq/radio-group": "0.0.4",
-    "@signozhq/resizable": "0.0.2",
-    "@signozhq/tabs": "0.0.11",
-    "@signozhq/table": "0.3.8",
-    "@signozhq/toggle-group": "0.0.3",
+    "@signozhq/input": "0.0.2",
+    "@signozhq/popover": "0.0.0",
+    "@signozhq/radio-group": "0.0.2",
+    "@signozhq/resizable": "0.0.0",
+    "@signozhq/table": "0.3.7",
+    "@signozhq/toggle-group": "0.0.1",
     "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",

frontend/src/AppRoutes/pageComponents.ts

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

frontend/src/AppRoutes/routes.ts

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

frontend/src/ReactI18/index.tsx

@@ -2,7 +2,6 @@ import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
-import { getBasePath } from 'utils/basePath';
 
 import cacheBursting from '../../i18n-translations-hash.json';
 
@@ -25,7 +24,7 @@ i18n
 				const ns = namespace[0];
 				const pathkey = `/${language}/${ns}`;
 				const hash = cacheBursting[pathkey as keyof typeof cacheBursting] || '';
-				return `${getBasePath()}locales/${language}/${namespace}.json?h=${hash}`;
+				return `/locales/${language}/${namespace}.json?h=${hash}`;
 			},
 		},
 		react: {

frontend/src/__tests__/query_range_v5.util.ts

@@ -0,0 +1,125 @@
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest, RestRequest } from 'msw';
+import { MetricRangePayloadV5 } from 'types/api/v5/queryRange';
+
+const QUERY_RANGE_URL = `${ENVIRONMENT.baseURL}/api/v5/query_range`;
+
+export type MockLogsOptions = {
+	offset?: number;
+	pageSize?: number;
+	hasMore?: boolean;
+	delay?: number;
+	onReceiveRequest?: (
+		req: RestRequest,
+	) =>
+		| undefined
+		| void
+		| Omit<MockLogsOptions, 'onReceiveRequest'>
+		| Promise<Omit<MockLogsOptions, 'onReceiveRequest'>>
+		| Promise<void>;
+};
+
+const createLogsResponse = ({
+	offset = 0,
+	pageSize = 100,
+	hasMore = true,
+}: MockLogsOptions): MetricRangePayloadV5 => {
+	const itemsForThisPage = hasMore ? pageSize : pageSize / 2;
+
+	return {
+		data: {
+			type: 'raw',
+			data: {
+				results: [
+					{
+						queryName: 'A',
+						rows: Array.from({ length: itemsForThisPage }, (_, index) => {
+							const cumulativeIndex = offset + index;
+							const baseTimestamp = new Date('2024-02-15T21:20:22Z').getTime();
+							const currentTimestamp = new Date(
+								baseTimestamp - cumulativeIndex * 1000,
+							);
+							const timestampString = currentTimestamp.toISOString();
+							const id = `log-id-${cumulativeIndex}`;
+							const logLevel = ['INFO', 'WARN', 'ERROR'][cumulativeIndex % 3];
+							const service = ['frontend', 'backend', 'database'][cumulativeIndex % 3];
+
+							return {
+								timestamp: timestampString,
+								data: {
+									attributes_bool: {},
+									attributes_float64: {},
+									attributes_int64: {},
+									attributes_string: {
+										host_name: 'test-host',
+										log_level: logLevel,
+										service,
+									},
+									body: `${timestampString} ${logLevel} ${service} Log message ${cumulativeIndex}`,
+									id,
+									resources_string: {
+										'host.name': 'test-host',
+									},
+									severity_number: [9, 13, 17][cumulativeIndex % 3],
+									severity_text: logLevel,
+									span_id: `span-${cumulativeIndex}`,
+									trace_flags: 0,
+									trace_id: `trace-${cumulativeIndex}`,
+								},
+							};
+						}),
+					},
+				],
+			},
+			meta: {
+				bytesScanned: 0,
+				durationMs: 0,
+				rowsScanned: 0,
+				stepIntervals: {},
+			},
+		},
+	};
+};
+
+export function mockQueryRangeV5WithLogsResponse({
+	hasMore = true,
+	offset = 0,
+	pageSize = 100,
+	delay = 0,
+	onReceiveRequest,
+}: MockLogsOptions = {}): void {
+	server.use(
+		rest.post(QUERY_RANGE_URL, async (req, res, ctx) =>
+			res(
+				...(delay ? [ctx.delay(delay)] : []),
+				ctx.status(200),
+				ctx.json(
+					createLogsResponse(
+						(await onReceiveRequest?.(req)) ?? {
+							hasMore,
+							pageSize,
+							offset,
+						},
+					),
+				),
+			),
+		),
+	);
+}
+
+export function mockQueryRangeV5WithError(
+	error: string,
+	statusCode = 500,
+): void {
+	server.use(
+		rest.post(QUERY_RANGE_URL, (_, res, ctx) =>
+			res(
+				ctx.status(statusCode),
+				ctx.json({
+					error,
+				}),
+			),
+		),
+	);
+}

frontend/src/api/Integrations/removeAwsIntegrationAccount.ts

@@ -0,0 +1,19 @@
+import axios from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+const removeAwsIntegrationAccount = async (
+	accountId: string,
+): Promise<SuccessResponse<Record<string, never>> | ErrorResponse> => {
+	const response = await axios.post(
+		`/cloud-integrations/aws/accounts/${accountId}/disconnect`,
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default removeAwsIntegrationAccount;

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

@@ -1,496 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useMutation, useQuery } from 'react-query';
-
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type {
-	CreateDowntimeSchedule201,
-	DeleteDowntimeScheduleByIDPathParameters,
-	GetDowntimeScheduleByID200,
-	GetDowntimeScheduleByIDPathParameters,
-	ListDowntimeSchedules200,
-	ListDowntimeSchedulesParams,
-	RenderErrorResponseDTO,
-	RuletypesPostablePlannedMaintenanceDTO,
-	UpdateDowntimeScheduleByIDPathParameters,
-} from '../sigNoz.schemas';
-
-/**
- * This endpoint lists all planned maintenance / downtime schedules
- * @summary List downtime schedules
- */
-export const listDowntimeSchedules = (
-	params?: ListDowntimeSchedulesParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListDowntimeSchedules200>({
-		url: `/api/v1/downtime_schedules`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getListDowntimeSchedulesQueryKey = (
-	params?: ListDowntimeSchedulesParams,
-) => {
-	return [`/api/v1/downtime_schedules`, ...(params ? [params] : [])] as const;
-};
-
-export const getListDowntimeSchedulesQueryOptions = <
-	TData = Awaited<ReturnType<typeof listDowntimeSchedules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	params?: ListDowntimeSchedulesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listDowntimeSchedules>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getListDowntimeSchedulesQueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listDowntimeSchedules>>
-	> = ({ signal }) => listDowntimeSchedules(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listDowntimeSchedules>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListDowntimeSchedulesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listDowntimeSchedules>>
->;
-export type ListDowntimeSchedulesQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List downtime schedules
- */
-
-export function useListDowntimeSchedules<
-	TData = Awaited<ReturnType<typeof listDowntimeSchedules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	params?: ListDowntimeSchedulesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listDowntimeSchedules>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListDowntimeSchedulesQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List downtime schedules
- */
-export const invalidateListDowntimeSchedules = async (
-	queryClient: QueryClient,
-	params?: ListDowntimeSchedulesParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListDowntimeSchedulesQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint creates a new planned maintenance / downtime schedule
- * @summary Create downtime schedule
- */
-export const createDowntimeSchedule = (
-	ruletypesPostablePlannedMaintenanceDTO: BodyType<RuletypesPostablePlannedMaintenanceDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateDowntimeSchedule201>({
-		url: `/api/v1/downtime_schedules`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: ruletypesPostablePlannedMaintenanceDTO,
-		signal,
-	});
-};
-
-export const getCreateDowntimeScheduleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createDowntimeSchedule>>,
-		TError,
-		{ data: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createDowntimeSchedule>>,
-	TError,
-	{ data: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
-	TContext
-> => {
-	const mutationKey = ['createDowntimeSchedule'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createDowntimeSchedule>>,
-		{ data: BodyType<RuletypesPostablePlannedMaintenanceDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createDowntimeSchedule(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateDowntimeScheduleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createDowntimeSchedule>>
->;
-export type CreateDowntimeScheduleMutationBody = BodyType<RuletypesPostablePlannedMaintenanceDTO>;
-export type CreateDowntimeScheduleMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create downtime schedule
- */
-export const useCreateDowntimeSchedule = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createDowntimeSchedule>>,
-		TError,
-		{ data: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createDowntimeSchedule>>,
-	TError,
-	{ data: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
-	TContext
-> => {
-	const mutationOptions = getCreateDowntimeScheduleMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint deletes a downtime schedule by ID
- * @summary Delete downtime schedule
- */
-export const deleteDowntimeScheduleByID = ({
-	id,
-}: DeleteDowntimeScheduleByIDPathParameters) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/downtime_schedules/${id}`,
-		method: 'DELETE',
-	});
-};
-
-export const getDeleteDowntimeScheduleByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
-		TError,
-		{ pathParams: DeleteDowntimeScheduleByIDPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
-	TError,
-	{ pathParams: DeleteDowntimeScheduleByIDPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteDowntimeScheduleByID'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
-		{ pathParams: DeleteDowntimeScheduleByIDPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteDowntimeScheduleByID(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteDowntimeScheduleByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>
->;
-
-export type DeleteDowntimeScheduleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete downtime schedule
- */
-export const useDeleteDowntimeScheduleByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
-		TError,
-		{ pathParams: DeleteDowntimeScheduleByIDPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
-	TError,
-	{ pathParams: DeleteDowntimeScheduleByIDPathParameters },
-	TContext
-> => {
-	const mutationOptions = getDeleteDowntimeScheduleByIDMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint returns a downtime schedule by ID
- * @summary Get downtime schedule by ID
- */
-export const getDowntimeScheduleByID = (
-	{ id }: GetDowntimeScheduleByIDPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetDowntimeScheduleByID200>({
-		url: `/api/v1/downtime_schedules/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetDowntimeScheduleByIDQueryKey = ({
-	id,
-}: GetDowntimeScheduleByIDPathParameters) => {
-	return [`/api/v1/downtime_schedules/${id}`] as const;
-};
-
-export const getGetDowntimeScheduleByIDQueryOptions = <
-	TData = Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetDowntimeScheduleByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetDowntimeScheduleByIDQueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getDowntimeScheduleByID>>
-	> = ({ signal }) => getDowntimeScheduleByID({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetDowntimeScheduleByIDQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getDowntimeScheduleByID>>
->;
-export type GetDowntimeScheduleByIDQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get downtime schedule by ID
- */
-
-export function useGetDowntimeScheduleByID<
-	TData = Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetDowntimeScheduleByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetDowntimeScheduleByIDQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get downtime schedule by ID
- */
-export const invalidateGetDowntimeScheduleByID = async (
-	queryClient: QueryClient,
-	{ id }: GetDowntimeScheduleByIDPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetDowntimeScheduleByIDQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint updates a downtime schedule by ID
- * @summary Update downtime schedule
- */
-export const updateDowntimeScheduleByID = (
-	{ id }: UpdateDowntimeScheduleByIDPathParameters,
-	ruletypesPostablePlannedMaintenanceDTO: BodyType<RuletypesPostablePlannedMaintenanceDTO>,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/downtime_schedules/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: ruletypesPostablePlannedMaintenanceDTO,
-	});
-};
-
-export const getUpdateDowntimeScheduleByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
-		TError,
-		{
-			pathParams: UpdateDowntimeScheduleByIDPathParameters;
-			data: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
-	TError,
-	{
-		pathParams: UpdateDowntimeScheduleByIDPathParameters;
-		data: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateDowntimeScheduleByID'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
-		{
-			pathParams: UpdateDowntimeScheduleByIDPathParameters;
-			data: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateDowntimeScheduleByID(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateDowntimeScheduleByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateDowntimeScheduleByID>>
->;
-export type UpdateDowntimeScheduleByIDMutationBody = BodyType<RuletypesPostablePlannedMaintenanceDTO>;
-export type UpdateDowntimeScheduleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update downtime schedule
- */
-export const useUpdateDowntimeScheduleByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
-		TError,
-		{
-			pathParams: UpdateDowntimeScheduleByIDPathParameters;
-			data: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
-	TError,
-	{
-		pathParams: UpdateDowntimeScheduleByIDPathParameters;
-		data: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateDowntimeScheduleByIDMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

@@ -6,24 +6,17 @@
  */
 import type {
 	InvalidateOptions,
-	MutationFunction,
 	QueryClient,
 	QueryFunction,
 	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
+import { useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
-	CreateRule201,
-	DeleteRuleByIDPathParameters,
-	GetRuleByID200,
-	GetRuleByIDPathParameters,
 	GetRuleHistoryFilterKeys200,
 	GetRuleHistoryFilterKeysParams,
 	GetRuleHistoryFilterKeysPathParameters,
@@ -42,548 +35,9 @@ import type {
 	GetRuleHistoryTopContributors200,
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
-	ListRules200,
-	PatchRuleByID200,
-	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
-	RuletypesPostableRuleDTO,
-	TestRule200,
-	UpdateRuleByIDPathParameters,
 } from '../sigNoz.schemas';
 
-/**
- * This endpoint lists all alert rules with their current evaluation state
- * @summary List alert rules
- */
-export const listRules = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<ListRules200>({
-		url: `/api/v2/rules`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListRulesQueryKey = () => {
-	return [`/api/v2/rules`] as const;
-};
-
-export const getListRulesQueryOptions = <
-	TData = Awaited<ReturnType<typeof listRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof listRules>>, TError, TData>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListRulesQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRules>>> = ({
-		signal,
-	}) => listRules(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listRules>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListRulesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listRules>>
->;
-export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List alert rules
- */
-
-export function useListRules<
-	TData = Awaited<ReturnType<typeof listRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof listRules>>, TError, TData>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListRulesQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List alert rules
- */
-export const invalidateListRules = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListRulesQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint creates a new alert rule
- * @summary Create alert rule
- */
-export const createRule = (
-	ruletypesPostableRuleDTO: BodyType<RuletypesPostableRuleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateRule201>({
-		url: `/api/v2/rules`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: ruletypesPostableRuleDTO,
-		signal,
-	});
-};
-
-export const getCreateRuleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createRule>>,
-		TError,
-		{ data: BodyType<RuletypesPostableRuleDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createRule>>,
-	TError,
-	{ data: BodyType<RuletypesPostableRuleDTO> },
-	TContext
-> => {
-	const mutationKey = ['createRule'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createRule>>,
-		{ data: BodyType<RuletypesPostableRuleDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createRule(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateRuleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createRule>>
->;
-export type CreateRuleMutationBody = BodyType<RuletypesPostableRuleDTO>;
-export type CreateRuleMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create alert rule
- */
-export const useCreateRule = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createRule>>,
-		TError,
-		{ data: BodyType<RuletypesPostableRuleDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createRule>>,
-	TError,
-	{ data: BodyType<RuletypesPostableRuleDTO> },
-	TContext
-> => {
-	const mutationOptions = getCreateRuleMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint deletes an alert rule by ID
- * @summary Delete alert rule
- */
-export const deleteRuleByID = ({ id }: DeleteRuleByIDPathParameters) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/rules/${id}`,
-		method: 'DELETE',
-	});
-};
-
-export const getDeleteRuleByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteRuleByID>>,
-		TError,
-		{ pathParams: DeleteRuleByIDPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteRuleByID>>,
-	TError,
-	{ pathParams: DeleteRuleByIDPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteRuleByID'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteRuleByID>>,
-		{ pathParams: DeleteRuleByIDPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteRuleByID(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteRuleByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteRuleByID>>
->;
-
-export type DeleteRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete alert rule
- */
-export const useDeleteRuleByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteRuleByID>>,
-		TError,
-		{ pathParams: DeleteRuleByIDPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteRuleByID>>,
-	TError,
-	{ pathParams: DeleteRuleByIDPathParameters },
-	TContext
-> => {
-	const mutationOptions = getDeleteRuleByIDMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint returns an alert rule by ID
- * @summary Get alert rule by ID
- */
-export const getRuleByID = (
-	{ id }: GetRuleByIDPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetRuleByID200>({
-		url: `/api/v2/rules/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetRuleByIDQueryKey = ({ id }: GetRuleByIDPathParameters) => {
-	return [`/api/v2/rules/${id}`] as const;
-};
-
-export const getGetRuleByIDQueryOptions = <
-	TData = Awaited<ReturnType<typeof getRuleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetRuleByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getRuleByID>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetRuleByIDQueryKey({ id });
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getRuleByID>>> = ({
-		signal,
-	}) => getRuleByID({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getRuleByID>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetRuleByIDQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getRuleByID>>
->;
-export type GetRuleByIDQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get alert rule by ID
- */
-
-export function useGetRuleByID<
-	TData = Awaited<ReturnType<typeof getRuleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetRuleByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getRuleByID>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetRuleByIDQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get alert rule by ID
- */
-export const invalidateGetRuleByID = async (
-	queryClient: QueryClient,
-	{ id }: GetRuleByIDPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetRuleByIDQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint applies a partial update to an alert rule by ID
- * @summary Patch alert rule
- */
-export const patchRuleByID = (
-	{ id }: PatchRuleByIDPathParameters,
-	ruletypesPostableRuleDTO: BodyType<RuletypesPostableRuleDTO>,
-) => {
-	return GeneratedAPIInstance<PatchRuleByID200>({
-		url: `/api/v2/rules/${id}`,
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		data: ruletypesPostableRuleDTO,
-	});
-};
-
-export const getPatchRuleByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchRuleByID>>,
-		TError,
-		{
-			pathParams: PatchRuleByIDPathParameters;
-			data: BodyType<RuletypesPostableRuleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof patchRuleByID>>,
-	TError,
-	{
-		pathParams: PatchRuleByIDPathParameters;
-		data: BodyType<RuletypesPostableRuleDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['patchRuleByID'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof patchRuleByID>>,
-		{
-			pathParams: PatchRuleByIDPathParameters;
-			data: BodyType<RuletypesPostableRuleDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return patchRuleByID(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PatchRuleByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof patchRuleByID>>
->;
-export type PatchRuleByIDMutationBody = BodyType<RuletypesPostableRuleDTO>;
-export type PatchRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Patch alert rule
- */
-export const usePatchRuleByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchRuleByID>>,
-		TError,
-		{
-			pathParams: PatchRuleByIDPathParameters;
-			data: BodyType<RuletypesPostableRuleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof patchRuleByID>>,
-	TError,
-	{
-		pathParams: PatchRuleByIDPathParameters;
-		data: BodyType<RuletypesPostableRuleDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getPatchRuleByIDMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint updates an alert rule by ID
- * @summary Update alert rule
- */
-export const updateRuleByID = (
-	{ id }: UpdateRuleByIDPathParameters,
-	ruletypesPostableRuleDTO: BodyType<RuletypesPostableRuleDTO>,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/rules/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: ruletypesPostableRuleDTO,
-	});
-};
-
-export const getUpdateRuleByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateRuleByID>>,
-		TError,
-		{
-			pathParams: UpdateRuleByIDPathParameters;
-			data: BodyType<RuletypesPostableRuleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateRuleByID>>,
-	TError,
-	{
-		pathParams: UpdateRuleByIDPathParameters;
-		data: BodyType<RuletypesPostableRuleDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateRuleByID'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateRuleByID>>,
-		{
-			pathParams: UpdateRuleByIDPathParameters;
-			data: BodyType<RuletypesPostableRuleDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateRuleByID(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateRuleByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateRuleByID>>
->;
-export type UpdateRuleByIDMutationBody = BodyType<RuletypesPostableRuleDTO>;
-export type UpdateRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update alert rule
- */
-export const useUpdateRuleByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateRuleByID>>,
-		TError,
-		{
-			pathParams: UpdateRuleByIDPathParameters;
-			data: BodyType<RuletypesPostableRuleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateRuleByID>>,
-	TError,
-	{
-		pathParams: UpdateRuleByIDPathParameters;
-		data: BodyType<RuletypesPostableRuleDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateRuleByIDMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
 /**
  * Returns distinct label keys from rule history entries for the selected range.
  * @summary Get rule history filter keys
@@ -1288,87 +742,3 @@ export const invalidateGetRuleHistoryTopContributors = async (
 
 	return queryClient;
 };
-
-/**
- * This endpoint fires a test notification for the given rule definition
- * @summary Test alert rule
- */
-export const testRule = (
-	ruletypesPostableRuleDTO: BodyType<RuletypesPostableRuleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<TestRule200>({
-		url: `/api/v2/rules/test`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: ruletypesPostableRuleDTO,
-		signal,
-	});
-};
-
-export const getTestRuleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testRule>>,
-		TError,
-		{ data: BodyType<RuletypesPostableRuleDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof testRule>>,
-	TError,
-	{ data: BodyType<RuletypesPostableRuleDTO> },
-	TContext
-> => {
-	const mutationKey = ['testRule'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof testRule>>,
-		{ data: BodyType<RuletypesPostableRuleDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return testRule(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type TestRuleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof testRule>>
->;
-export type TestRuleMutationBody = BodyType<RuletypesPostableRuleDTO>;
-export type TestRuleMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Test alert rule
- */
-export const useTestRule = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testRule>>,
-		TError,
-		{ data: BodyType<RuletypesPostableRuleDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof testRule>>,
-	TError,
-	{ data: BodyType<RuletypesPostableRuleDTO> },
-	TContext
-> => {
-	const mutationOptions = getTestRuleMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

@@ -4529,20 +4529,6 @@ export interface RulestatehistorytypesGettableRuleStateWindowDTO {
 	state: RuletypesAlertStateDTO;
 }
 
-export interface RuletypesAlertCompositeQueryDTO {
-	panelType: RuletypesPanelTypeDTO;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	queries: Querybuildertypesv5QueryEnvelopeDTO[] | null;
-	queryType: RuletypesQueryTypeDTO;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-}
-
 export enum RuletypesAlertStateDTO {
 	inactive = 'inactive',
 	pending = 'pending',
@@ -4551,513 +4537,6 @@ export enum RuletypesAlertStateDTO {
 	nodata = 'nodata',
 	disabled = 'disabled',
 }
-export enum RuletypesAlertTypeDTO {
-	METRIC_BASED_ALERT = 'METRIC_BASED_ALERT',
-	TRACES_BASED_ALERT = 'TRACES_BASED_ALERT',
-	LOGS_BASED_ALERT = 'LOGS_BASED_ALERT',
-	EXCEPTIONS_BASED_ALERT = 'EXCEPTIONS_BASED_ALERT',
-}
-export interface RuletypesBasicRuleThresholdDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	channels?: string[] | null;
-	matchType: RuletypesMatchTypeDTO;
-	/**
-	 * @type string
-	 */
-	name: string;
-	op: RuletypesCompareOperatorDTO;
-	/**
-	 * @type number
-	 * @nullable true
-	 */
-	recoveryTarget?: number | null;
-	/**
-	 * @type number
-	 * @nullable true
-	 */
-	target: number | null;
-	/**
-	 * @type string
-	 */
-	targetUnit?: string;
-}
-
-/**
- * @nullable
- */
-export type RuletypesBasicRuleThresholdsDTO =
-	| RuletypesBasicRuleThresholdDTO[]
-	| null;
-
-export enum RuletypesCompareOperatorDTO {
-	above = 'above',
-	below = 'below',
-	equal = 'equal',
-	not_equal = 'not_equal',
-	outside_bounds = 'outside_bounds',
-}
-export interface RuletypesCumulativeScheduleDTO {
-	/**
-	 * @type integer
-	 * @nullable true
-	 */
-	day?: number | null;
-	/**
-	 * @type integer
-	 * @nullable true
-	 */
-	hour?: number | null;
-	/**
-	 * @type integer
-	 * @nullable true
-	 */
-	minute?: number | null;
-	type: RuletypesScheduleTypeDTO;
-	/**
-	 * @type integer
-	 * @nullable true
-	 */
-	weekday?: number | null;
-}
-
-export interface RuletypesCumulativeWindowDTO {
-	/**
-	 * @type string
-	 */
-	frequency: string;
-	schedule: RuletypesCumulativeScheduleDTO;
-	/**
-	 * @type string
-	 */
-	timezone: string;
-}
-
-export interface RuletypesEvaluationCumulativeDTO {
-	kind?: RuletypesEvaluationKindDTO;
-	spec?: RuletypesCumulativeWindowDTO;
-}
-
-export type RuletypesEvaluationEnvelopeDTO =
-	| (RuletypesEvaluationRollingDTO & {
-			kind: RuletypesEvaluationKindDTO;
-			spec: unknown;
-	  })
-	| (RuletypesEvaluationCumulativeDTO & {
-			kind: RuletypesEvaluationKindDTO;
-			spec: unknown;
-	  });
-
-export enum RuletypesEvaluationKindDTO {
-	rolling = 'rolling',
-	cumulative = 'cumulative',
-}
-export interface RuletypesEvaluationRollingDTO {
-	kind?: RuletypesEvaluationKindDTO;
-	spec?: RuletypesRollingWindowDTO;
-}
-
-export interface RuletypesGettableTestRuleDTO {
-	/**
-	 * @type integer
-	 */
-	alertCount?: number;
-	/**
-	 * @type string
-	 */
-	message?: string;
-}
-
-export enum RuletypesMaintenanceKindDTO {
-	fixed = 'fixed',
-	recurring = 'recurring',
-}
-export enum RuletypesMaintenanceStatusDTO {
-	active = 'active',
-	upcoming = 'upcoming',
-	expired = 'expired',
-}
-export enum RuletypesMatchTypeDTO {
-	at_least_once = 'at_least_once',
-	all_the_times = 'all_the_times',
-	on_average = 'on_average',
-	in_total = 'in_total',
-	last = 'last',
-}
-export interface RuletypesNotificationSettingsDTO {
-	/**
-	 * @type array
-	 */
-	groupBy?: string[];
-	/**
-	 * @type string
-	 */
-	newGroupEvalDelay?: string;
-	renotify?: RuletypesRenotifyDTO;
-	/**
-	 * @type boolean
-	 */
-	usePolicy?: boolean;
-}
-
-export enum RuletypesPanelTypeDTO {
-	value = 'value',
-	table = 'table',
-	graph = 'graph',
-}
-export interface RuletypesPlannedMaintenanceDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	alertIds?: string[] | null;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	kind: RuletypesMaintenanceKindDTO;
-	/**
-	 * @type string
-	 */
-	name: string;
-	schedule: RuletypesScheduleDTO;
-	status: RuletypesMaintenanceStatusDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
-export interface RuletypesPostablePlannedMaintenanceDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	alertIds?: string[] | null;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	schedule: RuletypesScheduleDTO;
-}
-
-export type RuletypesPostableRuleDTOAnnotations = { [key: string]: string };
-
-export type RuletypesPostableRuleDTOLabels = { [key: string]: string };
-
-export interface RuletypesPostableRuleDTO {
-	/**
-	 * @type string
-	 */
-	alert: string;
-	alertType?: RuletypesAlertTypeDTO;
-	/**
-	 * @type object
-	 */
-	annotations?: RuletypesPostableRuleDTOAnnotations;
-	condition: RuletypesRuleConditionDTO;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type boolean
-	 */
-	disabled?: boolean;
-	/**
-	 * @type string
-	 */
-	evalWindow?: string;
-	evaluation?: RuletypesEvaluationEnvelopeDTO;
-	/**
-	 * @type string
-	 */
-	frequency?: string;
-	/**
-	 * @type object
-	 */
-	labels?: RuletypesPostableRuleDTOLabels;
-	notificationSettings?: RuletypesNotificationSettingsDTO;
-	/**
-	 * @type array
-	 */
-	preferredChannels?: string[];
-	ruleType: RuletypesRuleTypeDTO;
-	/**
-	 * @type string
-	 */
-	schemaVersion?: string;
-	/**
-	 * @type string
-	 */
-	source?: string;
-	/**
-	 * @type string
-	 */
-	version?: string;
-}
-
-export enum RuletypesQueryTypeDTO {
-	builder = 'builder',
-	clickhouse_sql = 'clickhouse_sql',
-	promql = 'promql',
-}
-export interface RuletypesRecurrenceDTO {
-	/**
-	 * @type string
-	 */
-	duration: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 * @nullable true
-	 */
-	endTime?: Date | null;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	repeatOn?: RuletypesRepeatOnDTO[] | null;
-	repeatType: RuletypesRepeatTypeDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime: Date;
-}
-
-export interface RuletypesRenotifyDTO {
-	/**
-	 * @type array
-	 */
-	alertStates?: RuletypesAlertStateDTO[];
-	/**
-	 * @type boolean
-	 */
-	enabled?: boolean;
-	/**
-	 * @type string
-	 */
-	interval?: string;
-}
-
-export enum RuletypesRepeatOnDTO {
-	sunday = 'sunday',
-	monday = 'monday',
-	tuesday = 'tuesday',
-	wednesday = 'wednesday',
-	thursday = 'thursday',
-	friday = 'friday',
-	saturday = 'saturday',
-}
-export enum RuletypesRepeatTypeDTO {
-	daily = 'daily',
-	weekly = 'weekly',
-	monthly = 'monthly',
-}
-export interface RuletypesRollingWindowDTO {
-	/**
-	 * @type string
-	 */
-	evalWindow: string;
-	/**
-	 * @type string
-	 */
-	frequency: string;
-}
-
-export type RuletypesRuleDTOAnnotations = { [key: string]: string };
-
-export type RuletypesRuleDTOLabels = { [key: string]: string };
-
-export interface RuletypesRuleDTO {
-	/**
-	 * @type string
-	 */
-	alert: string;
-	alertType?: RuletypesAlertTypeDTO;
-	/**
-	 * @type object
-	 */
-	annotations?: RuletypesRuleDTOAnnotations;
-	condition: RuletypesRuleConditionDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type boolean
-	 */
-	disabled?: boolean;
-	/**
-	 * @type string
-	 */
-	evalWindow?: string;
-	evaluation?: RuletypesEvaluationEnvelopeDTO;
-	/**
-	 * @type string
-	 */
-	frequency?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type object
-	 */
-	labels?: RuletypesRuleDTOLabels;
-	notificationSettings?: RuletypesNotificationSettingsDTO;
-	/**
-	 * @type array
-	 */
-	preferredChannels?: string[];
-	ruleType: RuletypesRuleTypeDTO;
-	/**
-	 * @type string
-	 */
-	schemaVersion?: string;
-	/**
-	 * @type string
-	 */
-	source?: string;
-	state: RuletypesAlertStateDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-	/**
-	 * @type string
-	 */
-	version?: string;
-}
-
-export interface RuletypesRuleConditionDTO {
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	absentFor?: number;
-	/**
-	 * @type boolean
-	 */
-	alertOnAbsent?: boolean;
-	/**
-	 * @type string
-	 */
-	algorithm?: string;
-	compositeQuery: RuletypesAlertCompositeQueryDTO;
-	matchType: RuletypesMatchTypeDTO;
-	op: RuletypesCompareOperatorDTO;
-	/**
-	 * @type boolean
-	 */
-	requireMinPoints?: boolean;
-	/**
-	 * @type integer
-	 */
-	requiredNumPoints?: number;
-	seasonality?: RuletypesSeasonalityDTO;
-	/**
-	 * @type string
-	 */
-	selectedQueryName?: string;
-	/**
-	 * @type number
-	 * @nullable true
-	 */
-	target?: number | null;
-	/**
-	 * @type string
-	 */
-	targetUnit?: string;
-	thresholds?: RuletypesRuleThresholdDataDTO;
-}
-
-export type RuletypesRuleThresholdDataDTO = RuletypesThresholdBasicDTO & {
-	kind: RuletypesThresholdKindDTO;
-	spec: unknown;
-};
-
-export enum RuletypesRuleTypeDTO {
-	threshold_rule = 'threshold_rule',
-	promql_rule = 'promql_rule',
-	anomaly_rule = 'anomaly_rule',
-}
-export interface RuletypesScheduleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	endTime?: Date;
-	recurrence?: RuletypesRecurrenceDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime?: Date;
-	/**
-	 * @type string
-	 */
-	timezone: string;
-}
-
-export enum RuletypesScheduleTypeDTO {
-	hourly = 'hourly',
-	daily = 'daily',
-	weekly = 'weekly',
-	monthly = 'monthly',
-}
-export enum RuletypesSeasonalityDTO {
-	hourly = 'hourly',
-	daily = 'daily',
-	weekly = 'weekly',
-}
-export interface RuletypesThresholdBasicDTO {
-	kind?: RuletypesThresholdKindDTO;
-	spec?: RuletypesBasicRuleThresholdsDTO;
-}
-
-export enum RuletypesThresholdKindDTO {
-	basic = 'basic',
-}
 export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	/**
 	 * @type string
@@ -5977,57 +5456,6 @@ export type DeleteAuthDomainPathParameters = {
 export type UpdateAuthDomainPathParameters = {
 	id: string;
 };
-export type ListDowntimeSchedulesParams = {
-	/**
-	 * @type boolean
-	 * @nullable true
-	 * @description undefined
-	 */
-	active?: boolean | null;
-	/**
-	 * @type boolean
-	 * @nullable true
-	 * @description undefined
-	 */
-	recurring?: boolean | null;
-};
-
-export type ListDowntimeSchedules200 = {
-	/**
-	 * @type array
-	 */
-	data: RuletypesPlannedMaintenanceDTO[];
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateDowntimeSchedule201 = {
-	data: RuletypesPlannedMaintenanceDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteDowntimeScheduleByIDPathParameters = {
-	id: string;
-};
-export type GetDowntimeScheduleByIDPathParameters = {
-	id: string;
-};
-export type GetDowntimeScheduleByID200 = {
-	data: RuletypesPlannedMaintenanceDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateDowntimeScheduleByIDPathParameters = {
-	id: string;
-};
 export type HandleExportRawDataPOSTParams = {
 	/**
 	 * @enum csv,jsonl
@@ -6825,53 +6253,6 @@ export type GetUsersByRoleID200 = {
 	status: string;
 };
 
-export type ListRules200 = {
-	/**
-	 * @type array
-	 */
-	data: RuletypesRuleDTO[];
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateRule201 = {
-	data: RuletypesRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteRuleByIDPathParameters = {
-	id: string;
-};
-export type GetRuleByIDPathParameters = {
-	id: string;
-};
-export type GetRuleByID200 = {
-	data: RuletypesRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type PatchRuleByIDPathParameters = {
-	id: string;
-};
-export type PatchRuleByID200 = {
-	data: RuletypesRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateRuleByIDPathParameters = {
-	id: string;
-};
 export type GetRuleHistoryFilterKeysPathParameters = {
 	id: string;
 };
@@ -7142,14 +6523,6 @@ export type GetRuleHistoryTopContributors200 = {
 	status: string;
 };
 
-export type TestRule200 = {
-	data: RuletypesGettableTestRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetSessionContext200 = {
 	data: AuthtypesSessionContextDTO;
 	/**

frontend/src/api/generatedAPIInstance.ts

@@ -1,6 +1,5 @@
 import {
 	interceptorRejected,
-	interceptorsRequestBasePath,
 	interceptorsRequestResponse,
 	interceptorsResponse,
 } from 'api';
@@ -18,7 +17,6 @@ export const GeneratedAPIInstance = <T>(
 	return generatedAPIAxiosInstance({ ...config }).then(({ data }) => data);
 };
 
-generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
 generatedAPIAxiosInstance.interceptors.response.use(
 	interceptorsResponse,

frontend/src/api/index.ts

@@ -11,7 +11,6 @@ import axios, {
 import { ENVIRONMENT } from 'constants/env';
 import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
 
 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
@@ -68,39 +67,6 @@ export const interceptorsRequestResponse = (
 	return value;
 };
 
-// Strips the leading '/' from path and joins with base — idempotent if already prefixed.
-// e.g. prependBase('/signoz/', '/api/v1/') → '/signoz/api/v1/'
-function prependBase(base: string, path: string): string {
-	return path.startsWith(base) ? path : base + path.slice(1);
-}
-
-// Prepends the runtime base path to outgoing requests so API calls work under
-// a URL prefix (e.g. /signoz/api/v1/…). No-op for root deployments and dev
-// (dev baseURL is a full http:// URL, not an absolute path).
-export const interceptorsRequestBasePath = (
-	value: InternalAxiosRequestConfig,
-): InternalAxiosRequestConfig => {
-	const basePath = getBasePath();
-	if (basePath === '/') {
-		return value;
-	}
-
-	if (value.baseURL?.startsWith('/')) {
-		// Production relative baseURL: '/api/v1/' → '/signoz/api/v1/'
-		value.baseURL = prependBase(basePath, value.baseURL);
-	} else if (value.baseURL?.startsWith('http')) {
-		// Dev absolute baseURL (VITE_FRONTEND_API_ENDPOINT): 'https://host/api/v1/' → 'https://host/signoz/api/v1/'
-		const url = new URL(value.baseURL);
-		url.pathname = prependBase(basePath, url.pathname);
-		value.baseURL = url.toString();
-	} else if (!value.baseURL && value.url?.startsWith('/')) {
-		// Orval-generated client (empty baseURL, path in url): '/api/signoz/v1/rules' → '/signoz/api/signoz/v1/rules'
-		value.url = prependBase(basePath, value.url);
-	}
-
-	return value;
-};
-
 export const interceptorRejected = async (
 	value: AxiosResponse<any>,
 ): Promise<AxiosResponse<any>> => {
@@ -167,7 +133,6 @@ const instance = axios.create({
 });
 
 instance.interceptors.request.use(interceptorsRequestResponse);
-instance.interceptors.request.use(interceptorsRequestBasePath);
 instance.interceptors.response.use(interceptorsResponse, interceptorRejected);
 
 export const AxiosAlertManagerInstance = axios.create({
@@ -182,7 +147,6 @@ ApiV2Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
-ApiV2Instance.interceptors.request.use(interceptorsRequestBasePath);
 
 // axios V3
 export const ApiV3Instance = axios.create({
@@ -194,7 +158,6 @@ ApiV3Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
-ApiV3Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V4
@@ -207,7 +170,6 @@ ApiV4Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
-ApiV4Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V5
@@ -220,7 +182,6 @@ ApiV5Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
-ApiV5Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios Base
@@ -233,7 +194,6 @@ LogEventAxiosInstance.interceptors.response.use(
 	interceptorRejectedBase,
 );
 LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
-LogEventAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 AxiosAlertManagerInstance.interceptors.response.use(
@@ -241,7 +201,6 @@ AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorRejected,
 );
 AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestResponse);
-AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestBasePath);
 
 export { apiV1 };
 export default instance;

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

@@ -0,0 +1,88 @@
+import axios from 'api';
+import {
+	CloudAccount,
+	Service,
+	ServiceData,
+	UpdateServiceConfigPayload,
+	UpdateServiceConfigResponse,
+} from 'container/CloudIntegrationPage/ServicesSection/types';
+import {
+	AccountConfigPayload,
+	AccountConfigResponse,
+	ConnectionParams,
+	ConnectionUrlResponse,
+} from 'types/api/integrations/aws';
+
+export const getAwsAccounts = async (): Promise<CloudAccount[]> => {
+	const response = await axios.get('/cloud-integrations/aws/accounts');
+
+	return response.data.data.accounts;
+};
+
+export const getAwsServices = async (
+	cloudAccountId?: string,
+): Promise<Service[]> => {
+	const params = cloudAccountId
+		? { cloud_account_id: cloudAccountId }
+		: undefined;
+	const response = await axios.get('/cloud-integrations/aws/services', {
+		params,
+	});
+
+	return response.data.data.services;
+};
+
+export const getServiceDetails = async (
+	serviceId: string,
+	cloudAccountId?: string,
+): Promise<ServiceData> => {
+	const params = cloudAccountId
+		? { cloud_account_id: cloudAccountId }
+		: undefined;
+	const response = await axios.get(
+		`/cloud-integrations/aws/services/${serviceId}`,
+		{ params },
+	);
+	return response.data.data;
+};
+
+export const generateConnectionUrl = async (params: {
+	agent_config: { region: string };
+	account_config: { regions: string[] };
+	account_id?: string;
+}): Promise<ConnectionUrlResponse> => {
+	const response = await axios.post(
+		'/cloud-integrations/aws/accounts/generate-connection-url',
+		params,
+	);
+	return response.data.data;
+};
+
+export const updateAccountConfig = async (
+	accountId: string,
+	payload: AccountConfigPayload,
+): Promise<AccountConfigResponse> => {
+	const response = await axios.post<AccountConfigResponse>(
+		`/cloud-integrations/aws/accounts/${accountId}/config`,
+		payload,
+	);
+	return response.data;
+};
+
+export const updateServiceConfig = async (
+	serviceId: string,
+	payload: UpdateServiceConfigPayload,
+): Promise<UpdateServiceConfigResponse> => {
+	const response = await axios.post<UpdateServiceConfigResponse>(
+		`/cloud-integrations/aws/services/${serviceId}/config`,
+		payload,
+	);
+	return response.data;
+};
+
+export const getConnectionParams = async (): Promise<ConnectionParams> => {
+	const response = await axios.get(
+		'/cloud-integrations/aws/accounts/generate-connection-params',
+	);
+	return response.data.data;
+};

frontend/src/assets/svgs/dotted-double-line.svg

@@ -1,9 +0,0 @@
-<svg width="929" height="8" viewBox="0 0 929 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <pattern id="dotted-double-line-pattern" x="0" y="0" width="6" height="8" patternUnits="userSpaceOnUse">
-      <rect width="2" height="2" rx="1" fill="#242834" />
-      <rect y="6" width="2" height="2" rx="1" fill="#242834" />
-    </pattern>
-  </defs>
-  <rect width="929" height="8" fill="url(#dotted-double-line-pattern)" />
-</svg>

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

@@ -24,7 +24,6 @@ import '@signozhq/input';
 import '@signozhq/popover';
 import '@signozhq/radio-group';
 import '@signozhq/resizable';
-import '@signozhq/tabs';
 import '@signozhq/table';
 import '@signozhq/toggle-group';
 import '@signozhq/ui';

frontend/src/components/AuthPageContainer/AuthHeader.styles.scss

@@ -42,7 +42,6 @@
 	height: 32px;
 	padding: 10px 16px;
 	background: var(--l2-background);
-	color: var(--l2-foreground);
 	border: none;
 	border-radius: 2px;
 	cursor: pointer;
@@ -66,3 +65,10 @@
 		opacity: 0.8;
 	}
 }
+
+.lightMode {
+	.auth-header-help-button {
+		background: var(--l2-background);
+		border: 1px solid var(--l1-border);
+	}
+}

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -12,8 +12,6 @@ import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { withBasePath } from 'utils/basePath';
-import { openInNewTab } from 'utils/navigation';
 
 export interface NavigateToExplorerProps {
 	filters: TagFilterItem[];
@@ -135,11 +133,7 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;
 
-			if (sameTab) {
-				window.location.href = withBasePath(newExplorerPath);
-			} else {
-				openInNewTab(newExplorerPath);
-			}
+			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
 		},
 		[
 			prepareQuery,

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

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

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui';
 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/ShareURLModal.tsx

@@ -13,7 +13,6 @@ import GetMinMax from 'lib/getMinMax';
 import { Check, Info, Link2 } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { getAbsoluteUrl } from 'utils/basePath';
 
 const routesToBeSharedWithTime = [
 	ROUTES.LOGS_EXPLORER,
@@ -81,13 +80,17 @@ function ShareURLModal(): JSX.Element {
 
 				urlQuery.delete(QueryParams.relativeTime);
 
-				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
+				currentUrl = `${window.location.origin}${
+					location.pathname
+				}?${urlQuery.toString()}`;
 			} else {
 				urlQuery.delete(QueryParams.startTime);
 				urlQuery.delete(QueryParams.endTime);
 
 				urlQuery.set(QueryParams.relativeTime, selectedTime);
-				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
+				currentUrl = `${window.location.origin}${
+					location.pathname
+				}?${urlQuery.toString()}`;
 			}
 		}
 

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

@@ -4,8 +4,8 @@ import { toast } from '@signozhq/ui';
 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';
 
@@ -31,7 +31,7 @@ jest.mock('hooks/useGetTenantLicense', () => ({
 	useGetTenantLicense: jest.fn(),
 }));
 
-jest.mock('container/Integrations/utils', () => ({
+jest.mock('pages/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -100,19 +100,16 @@ function MarkdownRenderer({
 	variables,
 	trackCopyAction,
 	elementDetails,
-	className,
 }: {
 	markdownContent: any;
 	variables: any;
 	trackCopyAction?: boolean;
 	elementDetails?: Record<string, unknown>;
-	className?: string;
 }): JSX.Element {
 	const interpolatedMarkdown = interpolateMarkdown(markdownContent, variables);
 
 	return (
 		<ReactMarkdown
-			className={className}
 			rehypePlugins={[rehypeRaw as any]}
 			components={{
 				// @ts-ignore

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

@@ -11,6 +11,13 @@
 		display: flex;
 		flex-direction: row;
 
+		.query-search-initial-scope-label {
+			position: absolute;
+			left: 8px;
+			top: 10px;
+			z-index: 10;
+		}
+
 		.query-where-clause-editor {
 			flex: 1;
 			min-width: 400px;
@@ -45,6 +52,10 @@
 				}
 			}
 		}
+
+		&.hasInitialExpression .cm-editor .cm-content {
+			padding-left: 22px !important;
+		}
 	}
 
 	.cm-editor {

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

@@ -30,7 +30,7 @@ import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariabl
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
-import { Info, TriangleAlert } from 'lucide-react';
+import { Filter, Info, TriangleAlert } from 'lucide-react';
 import {
 	IDetailedError,
 	IQueryContext,
@@ -85,6 +85,23 @@ interface QuerySearchProps {
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
 	showFilterSuggestionsWithoutMetric?: boolean;
+	/** When set, the editor shows only the user expression; API/filter uses `initial AND (user)`. */
+	initialExpression?: string;
+}
+
+function combineInitialAndUserExpression(
+	initial: string,
+	user: string,
+): string {
+	const trimmedInitial = initial.trim();
+	const trimmedUser = user.trim();
+	if (!trimmedInitial) {
+		return trimmedUser;
+	}
+	if (!trimmedUser) {
+		return trimmedInitial;
+	}
+	return `${trimmedInitial} AND (${trimmedUser})`;
 }
 
 function QuerySearch({
@@ -96,6 +113,7 @@ function QuerySearch({
 	signalSource,
 	hardcodedAttributeKeys,
 	showFilterSuggestionsWithoutMetric,
+	initialExpression,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -112,18 +130,26 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
-	const handleQueryValidation = useCallback((newExpression: string): void => {
-		try {
-			const validationResponse = validateQuery(newExpression);
-			setValidation(validationResponse);
-		} catch (error) {
-			setValidation({
-				isValid: false,
-				message: 'Failed to process query',
-				errors: [error as IDetailedError],
-			});
-		}
-	}, []);
+	const isScopedFilter = initialExpression !== undefined;
+
+	const validateExpressionForEditor = useCallback(
+		(editorDoc: string): void => {
+			const toValidate = isScopedFilter
+				? combineInitialAndUserExpression(initialExpression ?? '', editorDoc)
+				: editorDoc;
+			try {
+				const validationResponse = validateQuery(toValidate);
+				setValidation(validationResponse);
+			} catch (error) {
+				setValidation({
+					isValid: false,
+					message: 'Failed to process query',
+					errors: [error as IDetailedError],
+				});
+			}
+		},
+		[initialExpression, isScopedFilter],
+	);
 
 	const getCurrentExpression = useCallback(
 		(): string => editorRef.current?.state.doc.toString() || '',
@@ -177,9 +203,9 @@ function QuerySearch({
 			// Do not update codemirror editor if the expression is the same
 			if (newExpression !== currentExpression && !isFocused) {
 				updateEditorValue(newExpression, { skipOnChange: true });
-				if (newExpression) {
-					handleQueryValidation(newExpression);
-				}
+			}
+			if (!isFocused) {
+				validateExpressionForEditor(newExpression);
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -616,7 +642,7 @@ function QuerySearch({
 
 	const handleBlur = (): void => {
 		const currentExpression = getCurrentExpression();
-		handleQueryValidation(currentExpression);
+		validateExpressionForEditor(currentExpression);
 		setIsFocused(false);
 	};
 
@@ -634,7 +660,6 @@ function QuerySearch({
 	);
 
 	const handleExampleClick = (exampleQuery: string): void => {
-		// If there's an existing query, append the example with AND
 		const currentExpression = getCurrentExpression();
 		const newExpression = currentExpression
 			? `${currentExpression} AND ${exampleQuery}`
@@ -1319,6 +1344,19 @@ function QuerySearch({
 			)}
 
 			<div className="query-where-clause-editor-container">
+				{isScopedFilter ? (
+					<Tooltip title={initialExpression || ''} placement="topLeft">
+						<div className="query-search-initial-scope-label">
+							<Filter
+								size={14}
+								style={{
+									opacity: 0.9,
+									color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+								}}
+							/>
+						</div>
+					</Tooltip>
+				) : null}
 				<Tooltip
 					title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
 					placement="left"
@@ -1358,6 +1396,7 @@ function QuerySearch({
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
+						hasInitialExpression: isScopedFilter,
 					})}
 					extensions={[
 						autocompletion({
@@ -1392,7 +1431,12 @@ function QuerySearch({
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
-											onRun(getCurrentExpression());
+											const user = getCurrentExpression();
+											onRun(
+												isScopedFilter
+													? combineInitialAndUserExpression(initialExpression ?? '', user)
+													: user,
+											);
 										}
 										return true;
 									},
@@ -1557,6 +1601,7 @@ QuerySearch.defaultProps = {
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
 	showFilterSuggestionsWithoutMetric: false,
+	initialExpression: undefined,
 };
 
 export default QuerySearch;

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

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

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

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

frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/AnnouncementTooltip.styles.scss

@@ -46,8 +46,8 @@
 	}
 
 	&__button {
-		background: var(--secondary-background);
-		color: var(--secondary-foreground);
+		background: var(--card);
+		color: var(--accent-primary);
 		border: none;
 		padding: 6px 12px;
 		border-radius: 4px;

frontend/src/components/cmdKPalette/cmdKPalette.scss

@@ -7,14 +7,6 @@
 [data-slot='dialog-content'] {
 	position: fixed;
 	z-index: 60;
-	background: var(--l1-background);
-	color: var(--l1-foreground);
-
-	/* Override the background and color of the dialog content from the theme */
-	> div {
-		background: var(--l1-background);
-		color: var(--l1-foreground);
-	}
 }
 
 .cmdk-section-heading [cmdk-group-heading] {
@@ -51,22 +43,6 @@
 
 .cmdk-item {
 	cursor: pointer;
-	color: var(--l1-foreground);
-
-	font-family: Inter;
-	font-size: 13px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 18px;
-
-	&:hover {
-		background: var(--l1-background-hover);
-	}
-
-	&[data-selected='true'] {
-		background: var(--l3-background);
-		color: var(--l1-foreground);
-	}
 }
 
 [cmdk-item] svg {

frontend/src/constants/routes.ts

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

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

@@ -9,7 +9,6 @@ import {
 } from 'container/ApiMonitoring/utils';
 import { UnfoldVertical } from 'lucide-react';
 import { SuccessResponse } from 'types/api';
-import { openInNewTab } from 'utils/navigation';
 
 import emptyStateUrl from '@/assets/Icons/emptyState.svg';
 
@@ -95,14 +94,20 @@ function DependentServices({
 					}}
 					onRow={(record): { onClick: () => void; className: string } => ({
 						onClick: (): void => {
-							const serviceName =
-								record.serviceData.serviceName && record.serviceData.serviceName !== '-'
-									? record.serviceData.serviceName
-									: '';
+							const url = new URL(
+								`/services/${
+									record.serviceData.serviceName &&
+									record.serviceData.serviceName !== '-'
+										? record.serviceData.serviceName
+										: ''
+								}`,
+								window.location.origin,
+							);
 							const urlQuery = new URLSearchParams();
 							urlQuery.set(QueryParams.startTime, timeRange.startTime.toString());
 							urlQuery.set(QueryParams.endTime, timeRange.endTime.toString());
-							openInNewTab(`/services/${serviceName}?${urlQuery.toString()}`);
+							url.search = urlQuery.toString();
+							window.open(url.toString(), '_blank');
 						},
 						className: 'clickable-row',
 					})}

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

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

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

@@ -3,7 +3,7 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 8px 18px;
-	border-bottom: 1px solid var(--border);
+	border-bottom: 1px solid var(--l1-border);
 
 	&__navigation {
 		display: flex;
@@ -18,7 +18,7 @@
 	}
 
 	&__breadcrumb-title {
-		color: var(--l1-foreground);
+		color: var(--l2-foreground);
 		font-size: 14px;
 		line-height: 20px; /* 142.857% */
 		letter-spacing: -0.07px;
@@ -30,8 +30,8 @@
 		justify-content: center;
 		padding: 6px;
 		gap: 6px;
-		border: 1px solid var(--border);
-		background: var(--card);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 		border-radius: 2px;
 		font-size: 12px;
 		line-height: 10px;
@@ -39,11 +39,9 @@
 		width: 113px;
 		height: 32px;
 		cursor: pointer;
-		color: var(--l1-foreground);
-
+		&,
 		&:hover {
-			border-color: var(--l2-border);
-			color: var(--l1-foreground);
+			color: var(--l2-foreground);
 		}
 	}
 }

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

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

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

@@ -1,10 +1,8 @@
 .hero-section {
-	padding: 16px;
-
+	height: 308px;
+	padding: 26px 16px;
 	display: flex;
-	flex-direction: column;
-	gap: 16px;
-
+	gap: 24px;
 	position: relative;
 	overflow: hidden;
 	background-position: right;
@@ -32,36 +30,7 @@
 		flex-direction: column;
 		gap: 12px;
 
-		&-header {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			gap: 16px;
-
-			&__icon {
-				height: fit-content;
-				background-color: var(--l1-background);
-				padding: 12px;
-				border: 1px solid var(--l2-background);
-				border-radius: 6px;
-				width: 60px;
-				height: 60px;
-			}
-
-			&__title {
-				color: var(--l1-foreground);
-				font-size: 24px;
-				font-weight: 500;
-				line-height: 20px;
-				letter-spacing: -0.12px;
-			}
-		}
-
-		&__description {
-			color: var(--l2-foreground);
-		}
-
-		&-title {
+		.title {
 			color: var(--l1-foreground);
 			font-size: 24px;
 			font-weight: 500;
@@ -69,7 +38,7 @@
 			letter-spacing: -0.12px;
 		}
 
-		&-description {
+		.description {
 			color: var(--l2-foreground);
 			font-size: 12px;
 			font-weight: 400;

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

@@ -0,0 +1,37 @@
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import integrationsHeroBgUrl from '@/assets/Images/integrations-hero-bg.png';
+import awsDarkUrl from '@/assets/Logos/aws-dark.svg';
+
+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('${integrationsHeroBgUrl}')`,
+					  }
+					: {}
+			}
+		>
+			<div className="hero-section__icon">
+				<img src={awsDarkUrl} alt="aws-logo" />
+			</div>
+			<div className="hero-section__details">
+				<div className="title">Amazon Web Services</div>
+				<div className="description">
+					One-click setup for AWS monitoring with SigNoz
+				</div>
+				<AccountActions />
+			</div>
+		</div>
+	);
+}
+
+export default HeroSection;

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

@@ -4,57 +4,14 @@
 
 		&-with-account {
 			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-			flex-wrap: wrap;
-			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(--l2-foreground);
-					font-size: 12px;
-					font-weight: 400;
-					line-height: 16px;
-					padding: 8px 16px;
-				}
-
-				.account-selector {
-					.ant-select {
-						background-color: transparent !important;
-						border: none !important;
-						box-shadow: none !important;
-
-						.ant-select-selector {
-							background: transparent !important;
-							border: none !important;
-							box-shadow: none !important;
-						}
-					}
-				}
-			}
+			flex-direction: column;
+			gap: 10px;
 		}
 	}
 
 	&__input-skeleton {
 		width: 300px;
+		margin-bottom: 16px;
 	}
 
 	&__new-account-button-skeleton {
@@ -65,13 +22,11 @@
 	&__account-settings-button-skeleton {
 		width: 140px;
 	}
-
 	&__action-buttons {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 	}
-
 	&__action-button {
 		font-family: 'Inter';
 		border-radius: 2px;
@@ -90,16 +45,11 @@
 		&.secondary {
 			display: flex;
 			align-items: center;
-			border: 1px solid var(--l1-border);
-			border-radius: 2px;
-			background: var(--l1-background);
-			box-shadow: none;
+			border: 1px solid var(--l3-background);
 			color: var(--l1-foreground);
-
-			&:hover {
-				border-color: var(--l1-border);
-				color: var(--l1-foreground);
-			}
+			border-radius: 2px;
+			background: var(--l1-border);
+			box-shadow: none;
 		}
 	}
 }
@@ -107,30 +57,25 @@
 .cloud-account-selector {
 	border-radius: 2px;
 	border: 1px solid var(--l3-background);
-	background: var(--l1-background);
+	background: linear-gradient(
+		139deg,
+		color-mix(in srgb, var(--card) 80%, transparent) 0%,
+		color-mix(in srgb, var(--card) 90%, transparent) 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(--l1-border) !important;
-		background: var(--l1-background) !important;
-		padding: 6px 8px !important;
-		min-width: 140px !important;
-	}
-
-	.ant-select-item-option-active {
 		background: var(--l3-background) !important;
+		padding: 6px 8px !important;
 	}
 	.ant-select-selection-item {
-		color: var(--l1-foreground);
+		color: var(--l2-foreground);
 		font-size: 12px;
 		font-weight: 400;
 		line-height: 16px;
 	}
-	&:hover {
-		.ant-select-selector {
-			border-color: var(--l1-border) !important;
-		}
-	}
 
 	.account-option-item {
 		display: flex;
@@ -142,8 +87,60 @@
 			justify-content: center;
 			height: 14px;
 			width: 14px;
-			background-color: color-mix(in srgb, var(--border) 20%, transparent);
+			background-color: color-mix(
+				in srgb,
+				var(--border) 20%,
+				transparent
+			); /* #C0C1C3 with 0.2 opacity */
 			border-radius: 2px;
 		}
 	}
 }
+.lightMode {
+	.hero-section__action-button {
+		&.primary {
+			background: var(--primary-background);
+			color: var(--primary-foreground);
+		}
+
+		&.secondary {
+			border-color: var(--l1-border);
+			color: var(--l1-foreground);
+			background: var(--l1-background);
+
+			&:hover {
+				border-color: var(--l1-border);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	.cloud-account-selector {
+		background: var(--l1-background);
+		.ant-select-selector {
+			background: var(--l1-background) !important;
+			border-color: var(--l1-border) !important;
+		}
+		.ant-select-item-option-active {
+			background: var(--l3-background) !important;
+		}
+
+		.ant-select-selection-item {
+			color: var(--l1-foreground);
+		}
+
+		&:hover {
+			.ant-select-selector {
+				border-color: var(--l1-border) !important;
+			}
+		}
+	}
+
+	.account-option-item {
+		color: var(--l1-foreground);
+
+		&__selected {
+			background: var(--primary-background);
+		}
+	}
+}

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

@@ -1,23 +1,58 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import { Select, Skeleton } from 'antd';
-import { SelectProps } from 'antd/lib';
+import { Button, Select, Skeleton } from 'antd';
+import type { SelectProps } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
-import { useListAccounts } from 'api/generated/services/cloudintegration';
-import { getAccountById } from 'container/Integrations/CloudIntegration/utils';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { ChevronDown, Dot, PencilLine, Plug, Plus } from 'lucide-react';
+import { Check, ChevronDown } from 'lucide-react';
 
-import { mapAccountDtoToAwsCloudAccount } from '../../mapAwsCloudAccountFromDto';
-import { CloudAccount } from '../../types';
+import { CloudAccount } from '../../ServicesSection/types';
 import AccountSettingsModal from './AccountSettingsModal';
 import CloudAccountSetupModal from './CloudAccountSetupModal';
 
 import './AccountActions.style.scss';
 
+interface AccountOptionItemProps {
+	label: React.ReactNode;
+	isSelected: boolean;
+}
+
+function AccountOptionItem({
+	label,
+	isSelected,
+}: AccountOptionItemProps): JSX.Element {
+	return (
+		<div className="account-option-item">
+			{label}
+			{isSelected && (
+				<div className="account-option-item__selected">
+					<Check size={12} color={Color.BG_VANILLA_100} />
+				</div>
+			)}
+		</div>
+	);
+}
+
+function renderOption(
+	option: any,
+	activeAccountId: string | undefined,
+): JSX.Element {
+	return (
+		<AccountOptionItem
+			label={option.label}
+			isSelected={option.value === activeAccountId}
+		/>
+	);
+}
+
+const getAccountById = (
+	accounts: CloudAccount[],
+	accountId: string,
+): CloudAccount | null =>
+	accounts.find((account) => account.cloud_account_id === accountId) || null;
+
 function AccountActionsRenderer({
 	accounts,
 	isLoading,
@@ -38,52 +73,55 @@ function AccountActionsRenderer({
 	if (isLoading) {
 		return (
 			<div className="hero-section__actions-with-account">
-				<Skeleton.Input active block className="hero-section__input-skeleton" />
+				<Skeleton.Input
+					active
+					size="large"
+					block
+					className="hero-section__input-skeleton"
+				/>
+				<div className="hero-section__action-buttons">
+					<Skeleton.Button
+						active
+						size="large"
+						className="hero-section__new-account-button-skeleton"
+					/>
+					<Skeleton.Button
+						active
+						size="large"
+						className="hero-section__account-settings-button-skeleton"
+					/>
+				</div>
 			</div>
 		);
 	}
-
 	if (accounts?.length) {
 		return (
 			<div className="hero-section__actions-with-account">
-				<div className="hero-section__actions-with-account-selector-container">
-					<div className="selected-cloud-integration-account-status">
-						<Dot size={24} color={Color.BG_FOREST_500} />
-					</div>
-
-					<div className="account-selector-label">Account:</div>
-
-					<span className="account-selector">
-						<Select
-							value={activeAccount?.providerAccountId}
-							options={selectOptions}
-							rootClassName="cloud-account-selector"
-							popupMatchSelectWidth={false}
-							placeholder="Select AWS Account"
-							suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
-							onChange={onAccountChange}
-						/>
-					</span>
-				</div>
+				<Select
+					value={`Account: ${activeAccount?.cloud_account_id}`}
+					options={selectOptions}
+					rootClassName="cloud-account-selector"
+					placeholder="Select AWS Account"
+					suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
+					optionRender={(option): JSX.Element =>
+						renderOption(option, activeAccount?.cloud_account_id)
+					}
+					onChange={onAccountChange}
+				/>
 				<div className="hero-section__action-buttons">
 					<Button
-						variant="link"
-						size="sm"
-						color="secondary"
-						prefixIcon={<PencilLine size={14} />}
+						type="primary"
+						className="hero-section__action-button primary"
+						onClick={onIntegrationModalOpen}
+					>
+						Add New AWS Account
+					</Button>
+					<Button
+						type="default"
+						className="hero-section__action-button secondary"
 						onClick={onAccountSettingsModalOpen}
 					>
-						Edit Account
-					</Button>
-
-					<Button
-						variant="link"
-						size="sm"
-						color="secondary"
-						onClick={onIntegrationModalOpen}
-						prefixIcon={<Plus size={14} />}
-					>
-						Add New Account
+						Account Settings
 					</Button>
 				</div>
 			</div>
@@ -91,11 +129,8 @@ function AccountActionsRenderer({
 	}
 	return (
 		<Button
-			variant="solid"
-			color="primary"
-			prefixIcon={<Plug size={14} />}
+			className="hero-section__action-button primary"
 			onClick={onIntegrationModalOpen}
-			size="sm"
 		>
 			Integrate Now
 		</Button>
@@ -105,18 +140,7 @@ function AccountActionsRenderer({
 function AccountActions(): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
-	const { data: listAccountsResponse, isLoading } = useListAccounts({
-		cloudProvider: INTEGRATION_TYPES.AWS,
-	});
-	const accounts = useMemo((): CloudAccount[] | undefined => {
-		const raw = listAccountsResponse?.data?.accounts;
-		if (!raw) {
-			return undefined;
-		}
-		return raw
-			.map(mapAccountDtoToAwsCloudAccount)
-			.filter((account): account is CloudAccount => account !== null);
-	}, [listAccountsResponse]);
+	const { data: accounts, isLoading } = useAwsAccounts();
 
 	const initialAccount = useMemo(
 		() =>
@@ -138,13 +162,7 @@ function AccountActions(): JSX.Element {
 			const latestUrlQuery = new URLSearchParams(window.location.search);
 			latestUrlQuery.set('cloudAccountId', initialAccount.cloud_account_id);
 			navigate({ search: latestUrlQuery.toString() });
-			return;
 		}
-
-		setActiveAccount(null);
-		const latestUrlQuery = new URLSearchParams(window.location.search);
-		latestUrlQuery.delete('cloudAccountId');
-		navigate({ search: latestUrlQuery.toString() });
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [initialAccount]);
 
@@ -180,7 +198,7 @@ function AccountActions(): JSX.Element {
 			accounts?.length
 				? accounts.map((account) => ({
 						value: account.cloud_account_id,
-						label: account.providerAccountId,
+						label: account.cloud_account_id,
 				  }))
 				: [],
 		[accounts],
@@ -210,10 +228,10 @@ function AccountActions(): JSX.Element {
 				/>
 			)}
 
-			{isAccountSettingsModalOpen && activeAccount && (
+			{isAccountSettingsModalOpen && (
 				<AccountSettingsModal
 					onClose={(): void => setIsAccountSettingsModalOpen(false)}
-					account={activeAccount}
+					account={activeAccount as CloudAccount}
 					setActiveAccount={setActiveAccount}
 				/>
 			)}

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

@@ -14,13 +14,8 @@
 		border-radius: 3px;
 		border: 1px solid var(--l1-border);
 		padding: 14px;
-
 		&-account-info {
 			&-connected-account-details {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-
 				&-title {
 					color: var(--l1-foreground);
 					font-size: 14px;
@@ -43,12 +38,10 @@
 				}
 			}
 		}
-
-		&-region-selector {
+		&-regions-switch {
 			display: flex;
 			flex-direction: column;
-			gap: 4px;
-
+			gap: 10px;
 			&-title {
 				color: var(--l1-foreground);
 				font-size: 14px;
@@ -56,14 +49,6 @@
 				line-height: 20px;
 				letter-spacing: -0.07px;
 			}
-
-			&-description {
-				color: var(--l2-foreground);
-				font-size: 12px;
-				line-height: 18px;
-				letter-spacing: -0.06px;
-			}
-
 			&-switch {
 				display: flex;
 				align-items: center;
@@ -81,17 +66,15 @@
 				}
 			}
 		}
+		&-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(--l1-foreground);
 			font-family: Inter;
 			font-size: 12px;
 			font-weight: 500;
@@ -100,31 +83,18 @@
 		}
 		&-close-button {
 			border-radius: 2px;
-			background: var(--l1-background);
-			border: 1px solid var(--l1-border);
-			color: var(--l1-foreground);
-
-			&:hover {
-				border-color: var(--l1-border);
-				color: var(--l1-foreground);
-			}
+			background: var(--l1-border);
+			border: none;
 		}
 		&-save-button {
-			background: var(--primary-background);
-			color: var(--primary-foreground);
-			border: none;
-			border-radius: 2px;
-			margin: 0 !important;
-
 			&:disabled {
 				background: var(--primary-background);
 				color: var(--primary-foreground);
 				opacity: 0.6;
+				border: none;
 			}
-
-			&:not(:disabled):hover {
-				background: var(--primary-background-hover);
-			}
+			border-radius: 2px;
+			margin: 0 !important;
 		}
 	}
 	.ant-modal-body {
@@ -139,3 +109,81 @@
 		margin: 0;
 	}
 }
+
+.lightMode {
+	.account-settings-modal {
+		&__title-account-id {
+			color: var(--l1-foreground);
+		}
+
+		&__body {
+			border-color: var(--l1-border);
+
+			&-account-info {
+				&-connected-account-details {
+					&-title {
+						color: var(--l1-foreground);
+					}
+
+					&-account-id {
+						color: var(--l1-foreground);
+
+						&-account-id {
+							color: var(--l1-foreground);
+						}
+					}
+				}
+			}
+
+			&-regions-switch {
+				&-title {
+					color: var(--l1-foreground);
+				}
+
+				&-switch {
+					&-label {
+						color: var(--l1-foreground);
+
+						&:hover {
+							color: var(--l1-foreground);
+						}
+					}
+				}
+			}
+		}
+
+		&__footer {
+			&-close-button,
+			&-save-button {
+				color: var(--l1-background);
+			}
+
+			&-close-button {
+				background: var(--l1-background);
+				border: 1px solid var(--l1-border);
+				color: var(--l1-foreground);
+
+				&:hover {
+					border-color: var(--l1-border);
+					color: var(--l1-foreground);
+				}
+			}
+
+			&-save-button {
+				// Keep primary button same as dark mode
+				background: var(--primary-background);
+				color: var(--primary-foreground);
+
+				&:disabled {
+					background: var(--primary-background);
+					color: var(--primary-foreground);
+					opacity: 0.6;
+				}
+
+				&:not(:disabled):hover {
+					background: var(--bg-robin-400);
+				}
+			}
+		}
+	}
+}

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

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

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

@@ -1,33 +1,4 @@
 .cloud-account-setup-modal {
-	background: var(--l1-background);
-	color: var(--l1-foreground);
-
-	[data-slot='drawer-title'] {
-		color: var(--l1-foreground);
-	}
-
-	> 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(--primary-background);
@@ -39,24 +10,16 @@
 			font-family: 'Geist Mono';
 		}
 		&__close-button {
-			background: var(--l1-background);
-			border: 1px solid var(--l1-border);
+			background: var(--l1-border);
 			border-radius: 2px;
 			color: var(--l1-foreground);
 			font-family: 'Inter';
 			font-size: 12px;
 			font-weight: 500;
-
-			&:hover {
-				border-color: var(--l1-border);
-				color: var(--l1-foreground);
-			}
 		}
 	}
 
 	.cloud-account-setup-form {
-		padding: 16px;
-
 		.disabled {
 			opacity: 0.4;
 		}
@@ -93,8 +56,6 @@
 				display: flex;
 				align-items: center;
 				gap: 8px;
-				color: var(--l1-foreground);
-
 				.retry-time {
 					font-family: 'Geist Mono';
 					font-size: 14px;
@@ -155,7 +116,7 @@
 		}
 		&__note {
 			padding: 12px;
-			color: var(--callout-primary-description);
+			color: var(--bg-robin-400);
 			font-size: 12px;
 			line-height: 22px;
 			letter-spacing: -0.06px;
@@ -183,3 +144,87 @@
 		}
 	}
 }
+
+.lightMode {
+	.cloud-account-setup-modal {
+		.account-setup-modal-footer {
+			&__confirm-button {
+				background: var(--primary-background);
+				color: var(--primary-foreground);
+			}
+
+			&__close-button {
+				background: var(--l1-background);
+				border: 1px solid var(--l1-border);
+				color: var(--l1-foreground);
+
+				&:hover {
+					border-color: var(--l1-border);
+					color: var(--l1-foreground);
+				}
+			}
+		}
+
+		.cloud-account-setup-form {
+			&__title {
+				color: var(--l1-foreground);
+			}
+
+			&__description {
+				color: var(--l1-foreground);
+			}
+
+			&__select {
+				.ant-select-selection-item {
+					color: var(--l1-foreground);
+				}
+			}
+
+			&__include-all-regions-switch {
+				color: var(--l1-foreground);
+
+				&-label {
+					color: var(--l1-foreground);
+
+					&:hover {
+						color: var(--l1-foreground);
+					}
+				}
+			}
+
+			&__note {
+				color: var(--primary-foreground);
+				border: 1px solid
+					color-mix(in srgb, var(--primary-background) 20%, transparent);
+				background: color-mix(in srgb, var(--primary-background) 10%, transparent);
+			}
+
+			&__submit-button {
+				background: var(--primary-background);
+				color: var(--primary-foreground);
+			}
+
+			&__alert {
+				&.ant-alert-error {
+					color: var(--danger-foreground);
+					border: 1px solid
+						color-mix(in srgb, var(--danger-background) 20%, transparent);
+					background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+				}
+
+				&.ant-alert-warning {
+					color: var(--warning-foreground);
+					border: 1px solid
+						color-mix(in srgb, var(--warning-background) 20%, transparent);
+					background: color-mix(in srgb, var(--warning-background) 10%, transparent);
+				}
+
+				&-message {
+					.retry-time {
+						color: var(--l1-foreground);
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
-import { Button } from '@signozhq/button';
+import { useQueryClient } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { DrawerWrapper } from '@signozhq/drawer';
+import SignozModal from 'components/SignozModal/SignozModal';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useIntegrationModal } from 'hooks/integration/aws/useIntegrationModal';
 import { SquareArrowOutUpRight } from 'lucide-react';
 
@@ -11,15 +12,19 @@ import {
 	ModalStateEnum,
 } from '../types';
 import { RegionForm } from './RegionForm';
+import { RegionSelector } from './RegionSelector';
+import { SuccessView } from './SuccessView';
 
 import './CloudAccountSetupModal.style.scss';
 
 function CloudAccountSetupModal({
 	onClose,
 }: IntegrationModalProps): JSX.Element {
+	const queryClient = useQueryClient();
 	const {
 		form,
 		modalState,
+		setModalState,
 		isLoading,
 		activeView,
 		selectedRegions,
@@ -27,86 +32,97 @@ function CloudAccountSetupModal({
 		isGeneratingUrl,
 		setSelectedRegions,
 		setIncludeAllRegions,
+		handleIncludeAllRegionsChange,
 		handleRegionSelect,
 		handleSubmit,
 		handleClose,
 		setActiveView,
+		allRegions,
 		accountId,
+		selectedDeploymentRegion,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
-		handleConnectionSuccess,
-		handleConnectionTimeout,
-		handleConnectionError,
 	} = useIntegrationModal({ onClose });
 
 	const renderContent = useCallback(() => {
-		return (
-			<div className="cloud-account-setup-modal__content">
-				<RegionForm
-					form={form}
-					modalState={modalState}
+		if (modalState === ModalStateEnum.SUCCESS) {
+			return <SuccessView />;
+		}
+
+		if (activeView === ActiveViewEnum.SELECT_REGIONS) {
+			return (
+				<RegionSelector
 					selectedRegions={selectedRegions}
-					includeAllRegions={includeAllRegions}
-					onRegionSelect={handleRegionSelect}
-					onSubmit={handleSubmit}
-					accountId={accountId}
-					handleRegionChange={handleRegionChange}
-					connectionParams={connectionParams}
-					isConnectionParamsLoading={isConnectionParamsLoading}
 					setSelectedRegions={setSelectedRegions}
 					setIncludeAllRegions={setIncludeAllRegions}
-					onConnectionSuccess={handleConnectionSuccess}
-					onConnectionTimeout={handleConnectionTimeout}
-					onConnectionError={handleConnectionError}
 				/>
+			);
+		}
 
-				<div className="cloud-account-setup-modal__footer">
-					<Button
-						variant="solid"
-						color="primary"
-						prefixIcon={
-							<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />
-						}
-						onClick={handleSubmit}
-						disabled={
-							selectedRegions.length === 0 ||
-							isLoading ||
-							isGeneratingUrl ||
-							modalState === ModalStateEnum.WAITING
-						}
-					>
-						Launch Cloud Formation Template
-					</Button>
-				</div>
-			</div>
+		return (
+			<RegionForm
+				form={form}
+				modalState={modalState}
+				setModalState={setModalState}
+				selectedRegions={selectedRegions}
+				includeAllRegions={includeAllRegions}
+				onIncludeAllRegionsChange={handleIncludeAllRegionsChange}
+				onRegionSelect={handleRegionSelect}
+				onSubmit={handleSubmit}
+				accountId={accountId}
+				selectedDeploymentRegion={selectedDeploymentRegion}
+				handleRegionChange={handleRegionChange}
+				connectionParams={connectionParams}
+				isConnectionParamsLoading={isConnectionParamsLoading}
+			/>
 		);
 	}, [
 		modalState,
+		activeView,
 		form,
+		setModalState,
 		selectedRegions,
 		includeAllRegions,
+		handleIncludeAllRegionsChange,
 		handleRegionSelect,
 		handleSubmit,
 		accountId,
+		selectedDeploymentRegion,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
 		setSelectedRegions,
 		setIncludeAllRegions,
-		isLoading,
-		isGeneratingUrl,
-		handleConnectionSuccess,
-		handleConnectionTimeout,
-		handleConnectionError,
 	]);
 
 	const getSelectedRegionsCount = useCallback(
-		(): number => selectedRegions.length,
-		[selectedRegions],
+		(): number =>
+			selectedRegions.includes('all') ? allRegions.length : selectedRegions.length,
+		[selectedRegions, allRegions],
 	);
 
 	const getModalConfig = useCallback(() => {
+		// Handle success state first
+		if (modalState === ModalStateEnum.SUCCESS) {
+			return {
+				title: 'AWS Integration',
+				okText: (
+					<div className="cloud-account-setup-success-view__footer-button">
+						Continue
+					</div>
+				),
+				block: true,
+				onOk: (): void => {
+					queryClient.invalidateQueries([REACT_QUERY_KEY.AWS_ACCOUNTS]);
+					handleClose();
+				},
+				cancelButtonProps: { style: { display: 'none' } },
+				disabled: false,
+			};
+		}
+
+		// Handle other views
 		const viewConfigs = {
 			[ActiveViewEnum.FORM]: {
 				title: 'Add AWS Account',
@@ -139,30 +155,35 @@ function CloudAccountSetupModal({
 		isLoading,
 		isGeneratingUrl,
 		activeView,
+		handleClose,
 		setActiveView,
+		queryClient,
 	]);
 
 	const modalConfig = getModalConfig();
 
-	const handleDrawerOpenChange = (open: boolean): void => {
-		if (!open) {
-			handleClose();
-		}
-	};
-
 	return (
-		<DrawerWrapper
-			open={true}
-			type="panel"
+		<SignozModal
+			open
 			className="cloud-account-setup-modal"
-			content={renderContent()}
-			onOpenChange={handleDrawerOpenChange}
-			direction="right"
-			showCloseButton
-			header={{
-				title: modalConfig.title,
+			title={modalConfig.title}
+			onCancel={handleClose}
+			onOk={modalConfig.onOk}
+			okText={modalConfig.okText}
+			okButtonProps={{
+				loading: isLoading,
+				disabled: selectedRegions.length === 0 || modalConfig.disabled,
+				className:
+					activeView === ActiveViewEnum.FORM
+						? 'cloud-account-setup-form__submit-button'
+						: 'account-setup-modal-footer__confirm-button',
+				block: activeView === ActiveViewEnum.FORM,
 			}}
-		/>
+			cancelButtonProps={modalConfig.cancelButtonProps}
+			width={672}
+		>
+			{renderContent()}
+		</SignozModal>
 	);
 }
 

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

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

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

@@ -0,0 +1,109 @@
+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 { regions } from 'utils/regions';
+
+import logEvent from '../../../../api/common/logEvent';
+import { ModalStateEnum, RegionFormProps } from '../types';
+import AlertMessage from './AlertMessage';
+import {
+	ComplianceNote,
+	MonitoringRegionsSection,
+	RegionDeploymentSection,
+} 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,
+}: 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) {
+				setModalState(ModalStateEnum.ERROR);
+				logEvent('AWS Integration: Account connection attempt timed out', {
+					id: accountId,
+				});
+			}
+		},
+		onError: () => {
+			setModalState(ModalStateEnum.ERROR);
+		},
+	});
+
+	const isFormDisabled =
+		modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
+
+	return (
+		<Form
+			form={form}
+			className="cloud-account-setup-form"
+			layout="vertical"
+			onFinish={onSubmit}
+		>
+			<AlertMessage modalState={modalState} />
+
+			<div
+				className={cx(`cloud-account-setup-form__content`, {
+					disabled: isFormDisabled,
+				})}
+			>
+				<RegionDeploymentSection
+					regions={regions}
+					handleRegionChange={handleRegionChange}
+					isFormDisabled={isFormDisabled}
+					selectedDeploymentRegion={selectedDeploymentRegion}
+				/>
+				<MonitoringRegionsSection
+					includeAllRegions={includeAllRegions}
+					selectedRegions={selectedRegions}
+					onIncludeAllRegionsChange={onIncludeAllRegionsChange}
+					getRegionPreviewText={getRegionPreviewText}
+					onRegionSelect={onRegionSelect}
+					isFormDisabled={isFormDisabled}
+				/>
+				<ComplianceNote />
+				<RenderConnectionFields
+					isConnectionParamsLoading={isConnectionParamsLoading}
+					connectionParams={connectionParams}
+					isFormDisabled={isFormDisabled}
+				/>
+			</div>
+		</Form>
+	);
+}

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

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

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

@@ -28,12 +28,10 @@ export function RegionSelector({
 		<div className="region-selector">
 			<div className="select-all">
 				<Checkbox
-					checked={
-						allRegionIds.length > 0 &&
-						allRegionIds.every((regionId) => selectedRegions.includes(regionId))
-					}
+					checked={selectedRegions.includes('all')}
 					indeterminate={
-						selectedRegions.length > 0 && selectedRegions.length < allRegionIds.length
+						selectedRegions.length > 20 &&
+						selectedRegions.length < allRegionIds.length
 					}
 					onChange={(e): void => handleSelectAll(e.target.checked)}
 				>
@@ -48,7 +46,10 @@ export function RegionSelector({
 						{region.subRegions.map((subRegion) => (
 							<Checkbox
 								key={subRegion.id}
-								checked={selectedRegions.includes(subRegion.id)}
+								checked={
+									selectedRegions.includes('all') ||
+									selectedRegions.includes(subRegion.id)
+								}
 								onChange={(): void => handleRegionSelect(subRegion.id)}
 							>
 								{subRegion.name}

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

@@ -0,0 +1,47 @@
+.remove-integration-account {
+	display: flex;
+	justify-content: space-between;
+	padding: 16px;
+	border-radius: 4px;
+	border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
+	background: color-mix(in srgb, var(--bg-sakura-500) 6%, transparent);
+	&__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(--l1-foreground);
+		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(--l2-foreground) !important;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { useMutation } from 'react-query';
+import { Button, Modal } from 'antd';
+import logEvent from 'api/common/logEvent';
+import removeAwsIntegrationAccount from 'api/Integrations/removeAwsIntegrationAccount';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { useNotifications } from 'hooks/useNotifications';
+import { X } from 'lucide-react';
+import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils';
+
+import './RemoveIntegrationAccount.scss';
+
+function RemoveIntegrationAccount({
+	accountId,
+	onRemoveIntegrationAccountSuccess,
+}: {
+	accountId: string;
+	onRemoveIntegrationAccountSuccess: () => void;
+}): JSX.Element {
+	const { notifications } = useNotifications();
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	const showModal = (): void => {
+		setIsModalOpen(true);
+	};
+
+	const {
+		mutate: removeIntegration,
+		isLoading: isRemoveIntegrationLoading,
+	} = useMutation(removeAwsIntegrationAccount, {
+		onSuccess: () => {
+			onRemoveIntegrationAccountSuccess?.();
+			setIsModalOpen(false);
+		},
+		onError: () => {
+			notifications.error({
+				message: SOMETHING_WENT_WRONG,
+			});
+		},
+	});
+	const handleOk = (): void => {
+		logEvent(INTEGRATION_TELEMETRY_EVENTS.AWS_INTEGRATION_ACCOUNT_REMOVED, {
+			accountId,
+		});
+		removeIntegration(accountId);
+	};
+
+	const handleCancel = (): void => {
+		setIsModalOpen(false);
+	};
+
+	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>
+			<Button
+				className="remove-integration-account__button"
+				icon={<X size={14} />}
+				onClick={(): void => showModal()}
+			>
+				Remove
+			</Button>
+			<Modal
+				className="remove-integration-modal"
+				open={isModalOpen}
+				title="Remove integration"
+				onOk={handleOk}
+				onCancel={handleCancel}
+				okText="Remove Integration"
+				okButtonProps={{
+					danger: true,
+					disabled: 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>
+			</Modal>
+		</div>
+	);
+}
+
+export default RemoveIntegrationAccount;

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

@@ -1,5 +1,5 @@
 import { Form, Input } from 'antd';
-import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
+import { ConnectionParams } from 'types/api/integrations/aws';
 
 function RenderConnectionFields({
 	isConnectionParamsLoading,
@@ -7,51 +7,51 @@ function RenderConnectionFields({
 	isFormDisabled,
 }: {
 	isConnectionParamsLoading?: boolean;
-	connectionParams?: CloudintegrationtypesCredentialsDTO | null;
+	connectionParams?: ConnectionParams | null;
 	isFormDisabled?: boolean;
 }): JSX.Element | null {
 	if (
 		isConnectionParamsLoading ||
-		(!!connectionParams?.ingestionUrl &&
-			!!connectionParams?.ingestionKey &&
-			!!connectionParams?.sigNozApiUrl &&
-			!!connectionParams?.sigNozApiKey)
+		(!!connectionParams?.ingestion_url &&
+			!!connectionParams?.ingestion_key &&
+			!!connectionParams?.signoz_api_url &&
+			!!connectionParams?.signoz_api_key)
 	) {
 		return null;
 	}
 
 	return (
-		<Form.Item name="connectionParams">
-			{!connectionParams?.ingestionUrl && (
+		<Form.Item name="connection_params">
+			{!connectionParams?.ingestion_url && (
 				<Form.Item
-					name="ingestionUrl"
+					name="ingestion_url"
 					label="Ingestion URL"
 					rules={[{ required: true, message: 'Please enter ingestion URL' }]}
 				>
 					<Input placeholder="Enter ingestion URL" disabled={isFormDisabled} />
 				</Form.Item>
 			)}
-			{!connectionParams?.ingestionKey && (
+			{!connectionParams?.ingestion_key && (
 				<Form.Item
-					name="ingestionKey"
+					name="ingestion_key"
 					label="Ingestion Key"
 					rules={[{ required: true, message: 'Please enter ingestion key' }]}
 				>
 					<Input placeholder="Enter ingestion key" disabled={isFormDisabled} />
 				</Form.Item>
 			)}
-			{!connectionParams?.sigNozApiUrl && (
+			{!connectionParams?.signoz_api_url && (
 				<Form.Item
-					name="sigNozApiUrl"
+					name="signoz_api_url"
 					label="SigNoz API URL"
 					rules={[{ required: true, message: 'Please enter SigNoz API URL' }]}
 				>
 					<Input placeholder="Enter SigNoz API URL" disabled={isFormDisabled} />
 				</Form.Item>
 			)}
-			{!connectionParams?.sigNozApiKey && (
+			{!connectionParams?.signoz_api_key && (
 				<Form.Item
-					name="sigNozApiKey"
+					name="signoz_api_key"
 					label="SigNoz API KEY"
 					rules={[{ required: true, message: 'Please enter SigNoz API Key' }]}
 				>

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

@@ -0,0 +1,162 @@
+.cloud-account-setup-success-view {
+	display: flex;
+	flex-direction: column;
+	gap: 40px;
+	text-align: center;
+	padding-top: 34px;
+	p,
+	h3,
+	h4 {
+		margin: 0;
+	}
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 14px;
+		.cloud-account-setup-success-view {
+			&__title {
+				h3 {
+					color: var(--l1-foreground);
+					font-size: 20px;
+					font-weight: 500;
+					line-height: 32px;
+				}
+			}
+			&__description {
+				color: var(--l2-foreground);
+				font-size: 14px;
+				font-weight: 400;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+		}
+	}
+	&__what-next {
+		display: flex;
+		flex-direction: column;
+		gap: 18px;
+		text-align: left;
+		&-title {
+			color: var(--muted-foreground);
+			font-size: 11px;
+			font-weight: 500;
+			line-height: 18px;
+			letter-spacing: 0.88px;
+			text-transform: uppercase;
+		}
+		.what-next-items-wrapper {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+			&__item {
+				display: flex;
+				gap: 10px;
+				align-items: baseline;
+
+				&.ant-alert {
+					padding: 14px;
+					border-radius: 8px;
+					font-size: 14px;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.21px;
+				}
+
+				&.ant-alert-info {
+					border: 1px solid color-mix(in srgb, var(--bg-robin-600) 50%, transparent);
+					background: color-mix(in srgb, var(--primary-background) 20%, transparent);
+					color: var(--primary-foreground);
+				}
+
+				.what-next-item {
+					color: var(--bg-robin-400);
+					&-bullet-icon {
+						font-size: 20px;
+						line-height: 20px;
+					}
+					&-text {
+						font-size: 14px;
+						font-weight: 500;
+						line-height: 20px;
+						letter-spacing: -0.21px;
+					}
+				}
+			}
+		}
+	}
+	&__footer {
+		padding-top: 18px;
+		.ant-btn {
+			background: var(--primary-background);
+			color: var(--primary-foreground);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			height: 36px;
+		}
+	}
+}
+.lottie-container {
+	position: absolute;
+	width: 743.5px;
+	height: 990.342px;
+	top: -100px;
+	left: -36px;
+	z-index: 1;
+}
+
+.lightMode {
+	.cloud-account-setup-success-view {
+		&__content {
+			.cloud-account-setup-success-view {
+				&__title {
+					h3 {
+						color: var(--l1-foreground);
+					}
+				}
+
+				&__description {
+					color: var(--l1-foreground);
+				}
+			}
+		}
+
+		&__what-next {
+			&-title {
+				color: var(--l1-foreground);
+			}
+
+			.what-next-items-wrapper {
+				&__item {
+					&.ant-alert-info {
+						border: 1px solid color-mix(in srgb, var(--bg-robin-600) 20%, transparent);
+						background: color-mix(
+							in srgb,
+							var(--primary-background) 10%,
+							transparent
+						);
+						color: var(--primary-foreground);
+					}
+
+					.what-next-item {
+						color: var(--primary-foreground);
+
+						&-text {
+							color: var(--primary-foreground);
+						}
+					}
+				}
+			}
+		}
+
+		&__footer {
+			.ant-btn {
+				background: var(--primary-background);
+				color: var(--primary-foreground);
+
+				&:hover {
+					background: var(--primary-background-hover);
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import Lottie from 'react-lottie';
+import { Alert } from 'antd';
+import integrationsSuccess from 'assets/Lotties/integrations-success.json';
+
+import solidCheckCircleUrl from '@/assets/Icons/solid-check-circle.svg';
+
+import './SuccessView.style.scss';
+
+export function SuccessView(): JSX.Element {
+	const [isAnimationComplete, setIsAnimationComplete] = useState(false);
+
+	const defaultOptions = {
+		loop: false,
+		autoplay: true,
+		animationData: integrationsSuccess,
+		rendererSettings: {
+			preserveAspectRatio: 'xMidYMid slice',
+		},
+	};
+
+	return (
+		<>
+			{!isAnimationComplete && (
+				<div className="lottie-container">
+					<Lottie
+						options={defaultOptions}
+						height={990.342}
+						width={743.5}
+						eventListeners={[
+							{
+								eventName: 'complete',
+								callback: (): void => setIsAnimationComplete(true),
+							},
+						]}
+					/>
+				</div>
+			)}
+			<div className="cloud-account-setup-success-view">
+				<div className="cloud-account-setup-success-view__icon">
+					<img src={solidCheckCircleUrl} alt="Success" />
+				</div>
+				<div className="cloud-account-setup-success-view__content">
+					<div className="cloud-account-setup-success-view__title">
+						<h3>🎉 Success! </h3>
+						<h3>Your AWS Web Service integration is all set.</h3>
+					</div>
+					<div className="cloud-account-setup-success-view__description">
+						<p>Your observability journey is off to a great start. </p>
+						<p>Now that your data is flowing, here’s what you can do next:</p>
+					</div>
+				</div>
+				<div className="cloud-account-setup-success-view__what-next">
+					<h4 className="cloud-account-setup-success-view__what-next-title">
+						WHAT NEXT
+					</h4>
+					<div className="what-next-items-wrapper">
+						<Alert
+							message={
+								<div className="what-next-items-wrapper__item">
+									<div className="what-next-item-bullet-icon">•</div>
+									<div className="what-next-item-text">
+										Set up your AWS services effortlessly under your enabled account.
+									</div>
+								</div>
+							}
+							type="info"
+							className="what-next-items-wrapper__item"
+						/>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}

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

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { FormInstance } from 'antd';
-import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
+import { ConnectionParams } from 'types/api/integrations/aws';
 
 export enum ActiveViewEnum {
 	SELECT_REGIONS = 'select-regions',
@@ -11,27 +11,23 @@ export enum ModalStateEnum {
 	FORM = 'form',
 	WAITING = 'waiting',
 	ERROR = 'error',
+	SUCCESS = 'success',
 }
 
 export interface RegionFormProps {
 	form: FormInstance;
 	modalState: ModalStateEnum;
+	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?: CloudintegrationtypesCredentialsDTO;
+	connectionParams?: ConnectionParams;
 	isConnectionParamsLoading?: boolean;
-	setSelectedRegions: Dispatch<SetStateAction<string[]>>;
-	setIncludeAllRegions: Dispatch<SetStateAction<boolean>>;
-	onConnectionSuccess: (payload: {
-		cloudAccountId: string;
-		status?: unknown;
-	}) => void;
-	onConnectionTimeout: (payload: { id?: string }) => void;
-	onConnectionError: () => void;
 }
 
 export interface IntegrationModalProps {

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

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

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

@@ -1,18 +1,13 @@
 import { Table } from 'antd';
-import {
-	CloudintegrationtypesCollectedLogAttributeDTO,
-	CloudintegrationtypesCollectedMetricDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { BarChart2, ScrollText } from 'lucide-react';
 
-import './CloudServiceDataCollected.styles.scss';
+import { ServiceData } from './types';
 
 function CloudServiceDataCollected({
 	logsData,
 	metricsData,
 }: {
-	logsData: CloudintegrationtypesCollectedLogAttributeDTO[] | null | undefined;
-	metricsData: CloudintegrationtypesCollectedMetricDTO[] | null | undefined;
+	logsData: ServiceData['data_collected']['logs'];
+	metricsData: ServiceData['data_collected']['metrics'];
 }): JSX.Element {
 	const logsColumns = [
 		{
@@ -66,30 +61,24 @@ function CloudServiceDataCollected({
 	return (
 		<div className="cloud-service-data-collected">
 			{logsData && logsData.length > 0 && (
-				<div className="cloud-service-data-collected-table">
-					<div className="cloud-service-data-collected-table-heading">
-						<ScrollText size={14} />
-						Logs
-					</div>
+				<div className="cloud-service-data-collected__table">
+					<div className="cloud-service-data-collected__table-heading">Logs</div>
 					<Table
 						columns={logsColumns}
 						dataSource={logsData}
 						{...tableProps}
-						className="cloud-service-data-collected-table-logs"
+						className="cloud-service-data-collected__table-logs"
 					/>
 				</div>
 			)}
 			{metricsData && metricsData.length > 0 && (
-				<div className="cloud-service-data-collected-table">
-					<div className="cloud-service-data-collected-table-heading">
-						<BarChart2 size={14} />
-						Metrics
-					</div>
+				<div className="cloud-service-data-collected__table">
+					<div className="cloud-service-data-collected__table-heading">Metrics</div>
 					<Table
 						columns={metricsColumns}
 						dataSource={metricsData}
 						{...tableProps}
-						className="cloud-service-data-collected-table-metrics"
+						className="cloud-service-data-collected__table-metrics"
 					/>
 				</div>
 			)}

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

@@ -0,0 +1,89 @@
+.configure-service-modal {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		border-radius: 3px;
+		border: 1px solid var(--l1-border);
+		padding: 14px;
+
+		&-regions-switch-switch {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			&-label {
+				color: var(--l1-foreground);
+				font-size: 14px;
+				font-weight: 500;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+		}
+
+		&-switch-description {
+			margin-top: 4px;
+			color: var(--l2-foreground);
+			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(--l1-border);
+
+			&-regions-switch-switch {
+				&-label {
+					color: var(--l1-foreground);
+				}
+			}
+
+			&-switch-description {
+				color: var(--l1-foreground);
+			}
+		}
+
+		.ant-btn {
+			&.ant-btn-default {
+				background: var(--l1-background);
+				border: 1px solid var(--l1-border);
+				color: var(--l1-foreground);
+
+				&:hover {
+					border-color: var(--l1-border);
+					color: var(--l1-foreground);
+				}
+			}
+
+			&.ant-btn-primary {
+				// Keep primary button same as dark mode
+				background: var(--primary-background);
+				color: var(--l1-background);
+
+				&:hover {
+					background: var(--bg-robin-400);
+				}
+
+				&:disabled {
+					opacity: 0.6;
+				}
+			}
+		}
+	}
+}

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

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

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

@@ -1,18 +1,13 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Select, Skeleton } from 'antd';
-import { useListAccounts } from 'api/generated/services/cloudintegration';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { useCallback, useMemo, useState } from 'react';
+import { Form, Select, Skeleton, Typography } from 'antd';
+import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
 import useUrlQuery from 'hooks/useUrlQuery';
 
-import { mapAccountDtoToAwsCloudAccount } from '../mapAwsCloudAccountFromDto';
-import { CloudAccount } from '../types';
-
-import './S3BucketsSelector.styles.scss';
+const { Title } = Typography;
 
 interface S3BucketsSelectorProps {
 	onChange?: (bucketsByRegion: Record<string, string[]>) => void;
 	initialBucketsByRegion?: Record<string, string[]>;
-	disabled?: boolean;
 }
 
 /**
@@ -22,29 +17,13 @@ interface S3BucketsSelectorProps {
 function S3BucketsSelector({
 	onChange,
 	initialBucketsByRegion = {},
-	disabled: isSelectorDisabled = false,
 }: S3BucketsSelectorProps): JSX.Element {
 	const cloudAccountId = useUrlQuery().get('cloudAccountId');
-	const { data: listAccountsResponse, isLoading } = useListAccounts({
-		cloudProvider: INTEGRATION_TYPES.AWS,
-	});
-	const accounts = useMemo((): CloudAccount[] | undefined => {
-		const raw = listAccountsResponse?.data?.accounts;
-		if (!raw) {
-			return undefined;
-		}
-		return raw
-			.map(mapAccountDtoToAwsCloudAccount)
-			.filter((account): account is CloudAccount => account !== null);
-	}, [listAccountsResponse]);
+	const { data: accounts, isLoading } = useAwsAccounts();
 	const [bucketsByRegion, setBucketsByRegion] = useState<
 		Record<string, string[]>
 	>(initialBucketsByRegion);
 
-	useEffect(() => {
-		setBucketsByRegion(initialBucketsByRegion);
-	}, [initialBucketsByRegion]);
-
 	// Find the active AWS account based on the URL query parameter
 	const activeAccount = useMemo(
 		() =>
@@ -102,41 +81,37 @@ function S3BucketsSelector({
 
 	return (
 		<div className="s3-buckets-selector">
-			<div className="s3-buckets-selector-title">Select S3 Buckets by Region</div>
-			<div className="s3-buckets-selector-content">
-				{allRegions.map((region) => {
-					const isRegionUnavailable = isRegionDisabled(region);
+			<Title level={5}>Select S3 Buckets by Region</Title>
 
-					return (
-						<div key={region} className="s3-buckets-selector-region">
-							<div className="s3-buckets-selector-region-header">
-								<div className="s3-buckets-selector-region-label">{region}</div>
-								{isRegionUnavailable && (
-									<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={isSelectorDisabled || isRegionUnavailable}
-									suffixIcon={null}
-									notFoundContent={null}
-									filterOption={false}
-									showSearch
-								/>
-							</div>
-						</div>
-					);
-				})}
-			</div>
+			{allRegions.map((region) => {
+				const disabled = isRegionDisabled(region);
+
+				return (
+					<Form.Item
+						key={region}
+						label={region}
+						{...(disabled && {
+							help:
+								'Region disabled in account settings; S3 buckets here will not be synced.',
+							validateStatus: 'warning',
+						})}
+					>
+						<Select
+							mode="tags"
+							placeholder={`Enter S3 bucket names for ${region}`}
+							value={bucketsByRegion[region] || []}
+							onChange={(value): void => handleRegionBucketsChange(region, value)}
+							tokenSeparators={[',']}
+							allowClear
+							disabled={disabled}
+							suffixIcon={null}
+							notFoundContent={null}
+							filterOption={false}
+							showSearch
+						/>
+					</Form.Item>
+				);
+			})}
 		</div>
 	);
 }

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

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

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

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

frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.style.scss

@@ -1,8 +1,4 @@
 .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;
@@ -22,60 +18,21 @@
 		background: var(--primary-background);
 	}
 }
-
 .services-section {
 	display: flex;
-	flex: 1;
-	min-height: 0;
-
+	gap: 10px;
 	&__sidebar {
-		width: 240px;
-		border-right: 1px solid var(--l2-border);
-		height: 100%;
+		width: 16%;
+		padding: 0 16px;
 	}
 
 	&__content {
-		flex: 1;
-		height: 100%;
+		width: 84%;
+		padding: 16px;
 	}
 }
-
-.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(--muted);
-	}
-}
-
-.services-list-empty-message {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-
-	padding: 12px;
-	color: var(--l2-foreground);
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 20px; /* 142.857% */
-	letter-spacing: -0.07px;
-
-	.empty-state-svg {
-		height: 20px;
-		width: 20px;
-	}
-}
-
 .services-filter {
-	padding: 12px;
-
+	padding: 16px 0;
 	.ant-select-selector {
 		background-color: var(--l3-background) !important;
 		border: 1px solid var(--l1-border) !important;
@@ -89,111 +46,6 @@
 	}
 }
 
-.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;
-				margin-bottom: 12px;
-			}
-
-			.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-empty-message {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 163.636% */
-				letter-spacing: 0.44px;
-			}
-
-			.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;
@@ -208,22 +60,20 @@
 	}
 
 	&.active {
-		background-color: var(--l3-background);
+		background-color: var(--bg-ink-100); /* keep: no semantic equivalent */
 	}
 	&__icon-wrapper {
-		height: 32px;
-		width: 32px;
+		height: 40px;
+		width: 40px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		background-color: var(--l3-background);
 		border: 1px solid var(--l1-border);
 		border-radius: 4px;
-
 		.service-item__icon {
-			width: 16px;
-			height: 16px;
-			object-fit: contain;
+			width: 24px;
+			height: 24px;
 		}
 	}
 	&__title {
@@ -240,13 +90,11 @@
 	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(--l1-border);
 
 		.service-details__details-title {
@@ -257,7 +105,6 @@
 			letter-spacing: -0.07px;
 			text-align: left;
 		}
-
 		.service-details__right-actions {
 			display: flex;
 			align-items: center;
@@ -273,30 +120,19 @@
 				border-radius: 2px;
 				line-height: normal;
 				&--connected {
-					border: 1px solid
-						color-mix(in srgb, var(--success-background) 10%, transparent);
-					background: color-mix(in srgb, var(--success-background) 10%, transparent);
-					color: var(--callout-success-title);
+					border: 1px solid color-mix(in srgb, var(--bg-forest-500) 10%, transparent);
+					background: color-mix(in srgb, var(--bg-forest-500) 10%, transparent);
+					color: var(--bg-forest-400);
 				}
 				&--stale-data {
-					background: color-mix(
-						in srgb,
-						var(--warning-background-hover) 10%,
-						transparent
-					);
-					border: 1px solid
-						color-mix(in srgb, var(--warning-background-hover) 10%, transparent);
-					color: var(--callout-warning-title);
+					background: color-mix(in srgb, var(--bg-amber-400) 10%, transparent);
+					border: 1px solid color-mix(in srgb, var(--bg-amber-400) 10%, transparent);
+					color: var(--bg-amber-400);
 				}
 				&--no-data {
-					border: 1px solid
-						color-mix(in srgb, var(--danger-background-hover) 10%, transparent);
-					background: color-mix(
-						in srgb,
-						var(--danger-background-hover) 10%,
-						transparent
-					);
-					color: var(--callout-error-description);
+					border: 1px solid color-mix(in srgb, var(--bg-cherry-400) 10%, transparent);
+					background: color-mix(in srgb, var(--bg-cherry-400) 10%, transparent);
+					color: var(--bg-cherry-400);
 				}
 			}
 
@@ -321,28 +157,21 @@
 			}
 		}
 	}
-
 	&__overview {
 		color: var(--l2-foreground);
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px; /* 142.857% */
 		letter-spacing: -0.07px;
-		width: 100%;
-
-		padding: 8px 12px;
+		width: 800px;
 	}
-
 	&__tabs {
-		padding: 0px 12px 12px 8px;
-
 		.ant-tabs {
 			&-ink-bar {
 				background-color: transparent;
 			}
 			&-nav {
-				padding: 0;
-
+				padding: 8px 0 18px;
 				&-wrap {
 					padding: 0;
 				}
@@ -461,3 +290,153 @@
 		}
 	}
 }
+
+.lightMode {
+	.services-tabs {
+		.ant-tabs-tab {
+			&.ant-tabs-tab-active {
+				.ant-tabs-tab-btn {
+					color: var(--l1-foreground);
+				}
+			}
+		}
+	}
+
+	.services-filter {
+		.ant-select-selector {
+			background-color: var(--l1-background) !important;
+			border-color: var(--l1-border) !important;
+			color: var(--l1-foreground) !important;
+		}
+
+		.ant-select-arrow {
+			color: var(--l1-foreground);
+		}
+	}
+
+	.service-item {
+		&:not(:last-child) {
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		&.active {
+			background-color: var(--l3-background);
+		}
+
+		&__icon-wrapper {
+			background-color: var(--l1-background);
+			border-color: var(--l1-border);
+		}
+
+		&__title {
+			color: var(--l1-foreground);
+		}
+	}
+
+	.service-details {
+		&__title-bar {
+			border-bottom: 1px solid var(--l1-border);
+
+			.service-details__details-title {
+				color: var(--l1-foreground);
+			}
+
+			.configure-button {
+				color: var(--l1-foreground);
+				background: var(--l1-background);
+				border-color: var(--l1-border);
+
+				&:hover {
+					border-color: var(--l2-foreground);
+					color: var(--l1-foreground);
+				}
+			}
+
+			.service-status {
+				&--connected {
+					border: 1px solid color-mix(in srgb, var(--bg-forest-500) 20%, transparent);
+					background: color-mix(in srgb, var(--bg-forest-500) 10%, transparent);
+					color: var(--bg-forest-500);
+				}
+
+				&--stale-data {
+					border: 1px solid color-mix(in srgb, var(--bg-amber-400) 20%, transparent);
+					background: color-mix(in srgb, var(--bg-amber-400) 10%, transparent);
+					color: var(--bg-amber-500);
+				}
+
+				&--no-data {
+					border: 1px solid color-mix(in srgb, var(--bg-cherry-400) 20%, transparent);
+					background: color-mix(in srgb, var(--bg-cherry-400) 10%, transparent);
+					color: var(--bg-cherry-500);
+				}
+			}
+		}
+
+		&__overview {
+			color: var(--l1-foreground);
+		}
+
+		&__tabs {
+			.ant-tabs {
+				&-tab {
+					&-btn {
+						color: var(--l1-foreground) !important;
+
+						&[aria-selected='true'] {
+							color: var(--l1-foreground) !important;
+						}
+					}
+
+					&-active {
+						background: var(--l3-background);
+					}
+				}
+
+				&-nav-list {
+					border-color: var(--l1-border);
+					background: var(--l1-background);
+				}
+			}
+		}
+
+		.cloud-service {
+			&-dashboard-item {
+				&__title {
+					color: var(--l1-foreground);
+				}
+			}
+
+			&-data-collected {
+				&__table {
+					.ant-table {
+						border-color: var(--l1-border);
+
+						.ant-table-thead {
+							> tr > th {
+								color: var(--l1-foreground);
+							}
+						}
+
+						.ant-table-tbody {
+							> tr {
+								&:nth-child(odd),
+								&:hover > td {
+									background: var(--l1-background) !important;
+								}
+
+								> td {
+									color: var(--l1-foreground);
+								}
+							}
+						}
+					}
+				}
+
+				&__table-heading {
+					color: var(--l1-foreground);
+				}
+			}
+		}
+	}
+}

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

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

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

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

@@ -0,0 +1,78 @@
+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/CloudIntegrationPage/ServicesSection/types.ts

@@ -1,40 +1,90 @@
-import { ServiceData } from 'container/Integrations/types';
-
 interface Service {
 	id: string;
 	title: string;
 	icon: string;
-	config: AWSServiceConfig;
+	config: ServiceConfig;
 }
 
-interface S3BucketsByRegion {
-	[region: string]: string[];
+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;
+}
+
+interface S3BucketsByRegion {
+	[region: string]: string[];
+}
+
 interface LogsConfig extends ConfigStatus {
 	s3_buckets?: S3BucketsByRegion;
 }
 
-interface AWSServiceConfig {
+interface ServiceConfig {
 	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;
 }
 
-export interface AWSCloudAccountConfig {
+interface CloudAccountConfig {
 	regions: string[];
 }
 
-export interface IntegrationStatus {
+interface IntegrationStatus {
 	last_heartbeat_ts_ms: number;
 }
 
@@ -45,9 +95,8 @@ interface AccountStatus {
 interface CloudAccount {
 	id: string;
 	cloud_account_id: string;
-	config: AWSCloudAccountConfig;
+	config: CloudAccountConfig;
 	status: AccountStatus;
-	providerAccountId: string;
 }
 
 interface CloudAccountsData {
@@ -84,13 +133,15 @@ interface UpdateServiceConfigResponse {
 }
 
 export type {
-	AWSServiceConfig,
 	CloudAccount,
 	CloudAccountsData,
+	IServiceStatus,
 	S3BucketsByRegion,
 	Service,
+	ServiceConfig,
 	ServiceData,
 	ServiceDetailsResponse,
+	SupportedSignals,
 	UpdateServiceConfigPayload,
 	UpdateServiceConfigResponse,
 };

frontend/src/container/CloudIntegrationPage/__tests__/RequestIntegration.test.tsx

@@ -0,0 +1,64 @@
+import { I18nextProvider } from 'react-i18next';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import {
+	IntegrationType,
+	RequestIntegrationBtn,
+} from 'pages/Integrations/RequestIntegrationBtn';
+import i18n from 'ReactI18';
+
+describe('Request AWS integration', () => {
+	it('should render the request integration button', async () => {
+		let capturedPayload: any;
+		server.use(
+			rest.post('http://localhost/api/v1/event', async (req, res, ctx) => {
+				capturedPayload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json({
+						statusCode: 200,
+						error: null,
+						payload: 'Event Processed Successfully',
+					}),
+				);
+			}),
+		);
+		act(() => {
+			render(
+				<I18nextProvider i18n={i18n}>
+					<RequestIntegrationBtn type={IntegrationType.AWS_SERVICES} />{' '}
+				</I18nextProvider>,
+			);
+		});
+
+		expect(
+			screen.getByText(
+				/can't find what you’re looking for\? request more integrations/i,
+			),
+		).toBeInTheDocument();
+
+		await act(() => {
+			fireEvent.change(screen.getByPlaceholderText(/Enter integration name/i), {
+				target: { value: 's3 sync' },
+			});
+
+			const submitButton = screen.getByRole('button', { name: /submit/i });
+
+			expect(submitButton).toBeEnabled();
+
+			fireEvent.click(submitButton);
+		});
+
+		expect(capturedPayload.eventName).toBeDefined();
+		expect(capturedPayload.attributes).toBeDefined();
+
+		expect(capturedPayload.eventName).toBe('AWS service integration requested');
+		expect(capturedPayload.attributes).toEqual({
+			screen: 'AWS integration details',
+			integration: 's3 sync',
+			deployment_url: 'localhost',
+			user_email: null,
+		});
+	});
+});

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -14,7 +14,6 @@ import { IUser } from 'providers/App/types';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { USER_ROLES } from 'types/roles';
-import { openInNewTab } from 'utils/navigation';
 
 import { ROUTING_POLICIES_ROUTE } from './constants';
 import { RoutingPolicyBannerProps } from './types';
@@ -388,7 +387,7 @@ export function NotificationChannelsNotFoundContent({
 							style={{ padding: '0 4px' }}
 							type="link"
 							onClick={(): void => {
-								openInNewTab(ROUTES.CHANNELS_NEW);
+								window.open(ROUTES.CHANNELS_NEW, '_blank');
 							}}
 						>
 							here.

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -15,7 +15,6 @@ import { AlertDef, Labels } from 'types/api/alerts/def';
 import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
-import { openInNewTab } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import ChannelSelect from './ChannelSelect';
@@ -88,7 +87,7 @@ function BasicInfo({
 			dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
 			ruleId: isNewRule ? 0 : alertDef?.id,
 		});
-		openInNewTab(ROUTES.CHANNELS_NEW);
+		window.open(ROUTES.CHANNELS_NEW, '_blank');
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 	const hasLoggedEvent = useRef(false);

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -10,7 +10,6 @@ import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { USER_ROLES } from 'types/roles';
-import { openInNewTab } from 'utils/navigation';
 
 import dialsUrl from '@/assets/Icons/dials.svg';
 
@@ -115,7 +114,7 @@ export default function Dashboards({
 							dashboardName: dashboard.data.title,
 						});
 						if (event.metaKey || event.ctrlKey) {
-							openInNewTab(getLink());
+							window.open(getLink(), '_blank');
 						} else {
 							safeNavigate(getLink());
 						}

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { VerticalAlignTopOutlined } from '@ant-design/icons';
 import { Button, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -29,6 +29,7 @@ import {
 	hostGetSelectedItemFilters,
 	hostInitialEventsFilter,
 	hostInitialLogTracesFilter,
+	hostRenderEmptyState,
 	hostWidgetInfo,
 } from './constants';
 import {
@@ -57,21 +58,11 @@ function Hosts(): JSX.Element {
 		entityVersion: '',
 	});
 
-	// Track previous urlFilters to only sync when the value actually changes
-	// (not when handleChangeQueryData changes due to query updates)
-	const prevUrlFiltersRef = useRef<string | null>(null);
-
 	useEffect(() => {
-		const currentFiltersJson = urlFilters ? JSON.stringify(urlFilters) : null;
-
-		// Only sync if urlFilters value has actually changed
-		if (prevUrlFiltersRef.current !== currentFiltersJson) {
-			prevUrlFiltersRef.current = currentFiltersJson;
-			// Sync filters to query builder, using empty filter when urlFilters is null
-			handleChangeQueryData('filters', urlFilters || { items: [], op: 'and' });
+		if (urlFilters && urlFilters.items) {
+			handleChangeQueryData('filters', urlFilters);
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [urlFilters]); // handleChangeQueryData intentionally omitted - we call the current version but don't re-run when it changes
+	}, [urlFilters, handleChangeQueryData]);
 
 	const handleFilterVisibilityChange = (): void => {
 		setShowFilters(!showFilters);
@@ -79,9 +70,8 @@ function Hosts(): JSX.Element {
 
 	const handleQuickFiltersChange = (query: Query): void => {
 		const filters = query.builder.queryData[0].filters;
-		// Nuqs batches these calls into a single URL update
-		// The useEffect will sync filters to query builder
 		setUrlFilters(filters || null);
+		handleChangeQueryData('filters', filters);
 		setCurrentPage(1);
 		logEvent(InfraMonitoringEvents.FilterApplied, {
 			entity: InfraMonitoringEvents.HostEntity,
@@ -174,6 +164,7 @@ function Hosts(): JSX.Element {
 							tableColumns={hostColumnsConfig}
 							fetchListData={fetchListData}
 							renderRowData={hostRenderRowData}
+							renderEmptyState={hostRenderEmptyState}
 							eventCategory={InfraMonitoringEvents.HostEntity}
 						/>
 					</div>

frontend/src/container/InfraMonitoringHosts/HostsEmptyOrIncorrectMetrics.module.scss

@@ -0,0 +1,41 @@
+.hostsEmptyStateContainer {
+	padding: 16px;
+	height: 40vh;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.hostsEmptyStateContainerContent {
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: fit-content;
+}
+
+.eyesEmoji {
+	height: 32px;
+	width: 32px;
+}
+
+.noHostsMessage {
+	margin-bottom: 16px;
+}
+
+.noHostsMessageTitle {
+	margin-top: 8px;
+	margin-bottom: 4px;
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 1.5;
+}
+
+.messageBody {
+	margin: 0;
+	font-size: 14px;
+	line-height: 1.5715;
+}

frontend/src/container/InfraMonitoringHosts/HostsEmptyOrIncorrectMetrics.tsx

@@ -0,0 +1,54 @@
+import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
+
+import styles from './HostsEmptyOrIncorrectMetrics.module.scss';
+
+export default function HostsEmptyOrIncorrectMetrics({
+	noData,
+	incorrectData,
+}: {
+	noData: boolean;
+	incorrectData: boolean;
+}): JSX.Element {
+	return (
+		<div className={styles.hostsEmptyStateContainer}>
+			<div className={styles.hostsEmptyStateContainerContent}>
+				<img className={styles.eyesEmoji} src={eyesEmojiUrl} alt="eyes emoji" />
+
+				{noData && (
+					<div className={styles.noHostsMessage}>
+						<h5 className={styles.noHostsMessageTitle}>
+							No host metrics data received yet.
+						</h5>
+
+						<p className={styles.messageBody}>
+							Infrastructure monitoring requires the{' '}
+							<a
+								href="https://github.com/open-telemetry/semantic-conventions/blob/main/docs/system/system-metrics.md"
+								target="_blank"
+								rel="noreferrer"
+							>
+								OpenTelemetry system metrics
+							</a>
+							. Please refer to{' '}
+							<a
+								href="https://signoz.io/docs/userguide/hostmetrics"
+								target="_blank"
+								rel="noreferrer"
+							>
+								this
+							</a>{' '}
+							to learn how to send host metrics to SigNoz.
+						</p>
+					</div>
+				)}
+
+				{incorrectData && (
+					<p className={styles.messageBody}>
+						To see host metrics, upgrade to the latest version of SigNoz k8s-infra
+						chart. Please contact support if you need help.
+					</p>
+				)}
+			</div>
+		</div>
+	);
+}

frontend/src/container/InfraMonitoringHosts/__tests__/HostsEmptyOrIncorrectMetrics.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+
+import HostsEmptyOrIncorrectMetrics from '../HostsEmptyOrIncorrectMetrics';
+
+describe('HostsEmptyOrIncorrectMetrics', () => {
+	it('shows no data message when noData is true', () => {
+		render(<HostsEmptyOrIncorrectMetrics noData incorrectData={false} />);
+		expect(
+			screen.getByText('No host metrics data received yet.'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByText(/Infrastructure monitoring requires the/),
+		).toBeInTheDocument();
+	});
+
+	it('shows incorrect data message when incorrectData is true', () => {
+		render(<HostsEmptyOrIncorrectMetrics noData={false} incorrectData />);
+		expect(
+			screen.getByText(
+				'To see host metrics, upgrade to the latest version of SigNoz k8s-infra chart. Please contact support if you need help.',
+			),
+		).toBeInTheDocument();
+	});
+
+	it('does not show no data message when noData is false', () => {
+		render(<HostsEmptyOrIncorrectMetrics noData={false} incorrectData={false} />);
+		expect(
+			screen.queryByText('No host metrics data received yet.'),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByText(/Infrastructure monitoring requires the/),
+		).not.toBeInTheDocument();
+	});
+
+	it('does not show incorrect data message when incorrectData is false', () => {
+		render(<HostsEmptyOrIncorrectMetrics noData={false} incorrectData={false} />);
+		expect(
+			screen.queryByText(
+				'To see host metrics, upgrade to the latest version of SigNoz k8s-infra chart. Please contact support if you need help.',
+			),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/container/InfraMonitoringHosts/constants.tsx

@@ -5,12 +5,14 @@ import {
 	getHostLists,
 	HostData,
 	HostListPayload,
+	HostListResponse,
 } from 'api/infraMonitoring/getHostLists';
 import {
 	createFilterItem,
 	K8sDetailsFilters,
 	K8sDetailsMetadataConfig,
 } from 'container/InfraMonitoringK8s/Base/K8sBaseDetails';
+import type { K8sBaseListEmptyStateContext } from 'container/InfraMonitoringK8s/Base/K8sBaseList';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
 import {
 	getHostQueryPayload,
@@ -21,8 +23,12 @@ import {
 	TagFilterItem,
 } from 'types/api/queryBuilder/queryBuilderData';
 
+import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
+
+import HostsEmptyOrIncorrectMetrics from './HostsEmptyOrIncorrectMetrics';
 import { getHostListsQuery } from './utils';
 
+import hostsEmptyStateStyles from './HostsEmptyOrIncorrectMetrics.module.scss';
 import infraHostsStyles from './InfraMonitoringHosts.module.scss';
 
 export function getProgressColor(percent: number): string {
@@ -187,3 +193,51 @@ export async function fetchHostEntityData(
 		error: response.error,
 	};
 }
+
+function EndTimeBeforeRetentionMessage(): JSX.Element {
+	return (
+		<div className={hostsEmptyStateStyles.hostsEmptyStateContainer}>
+			<div className={hostsEmptyStateStyles.hostsEmptyStateContainerContent}>
+				<img
+					className={hostsEmptyStateStyles.eyesEmoji}
+					src={eyesEmojiUrl}
+					alt="eyes emoji"
+				/>
+				<div className={hostsEmptyStateStyles.noHostsMessage}>
+					<h5 className={hostsEmptyStateStyles.noHostsMessageTitle}>
+						Queried time range is before earliest host metrics
+					</h5>
+					<p className={hostsEmptyStateStyles.messageBody}>
+						Your requested end time is earlier than the earliest detected time of host
+						metrics data, please adjust your end time.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function hostRenderEmptyState(
+	context: K8sBaseListEmptyStateContext,
+): React.ReactNode | null {
+	if (context.isLoading) {
+		return null;
+	}
+
+	const rawData = context.rawData as HostListResponse['data'] | undefined;
+
+	if (!rawData?.sentAnyHostMetricsData || rawData?.isSendingK8SAgentMetrics) {
+		return (
+			<HostsEmptyOrIncorrectMetrics
+				noData={!rawData?.sentAnyHostMetricsData}
+				incorrectData={!!rawData?.isSendingK8SAgentMetrics}
+			/>
+		);
+	}
+
+	if (rawData?.endTimeBeforeRetention) {
+		return <EndTimeBeforeRetentionMessage />;
+	}
+
+	return null;
+}

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx

@@ -18,7 +18,6 @@ import {
 	initialQueryState,
 } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
 import {
 	CustomTimeType,
 	Time,
@@ -36,11 +35,6 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { isCustomTimeRange, useGlobalTimeStore } from 'store/globalTime';
-import {
-	getAutoRefreshQueryKey,
-	NANO_SECOND_MULTIPLIER,
-} from 'store/globalTime/utils';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderQuery,
@@ -51,9 +45,17 @@ import {
 	LogsAggregatorOperator,
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
+import {
+	isCustomTimeRange,
+	useGlobalTimeStore,
+} from '../../../store/globalTime';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from '../../../store/globalTime/utils';
+import { DEFAULT_TIME_RANGE } from '../../TopNav/DateTimeSelectionV2/constants';
 import { filterDuplicateFilters } from '../commonUtils';
 import { InfraMonitoringEntity, VIEW_TYPES, VIEWS } from '../constants';
 import EntityContainers from '../EntityDetailsUtils/EntityContainers';
@@ -206,7 +208,6 @@ function K8sBaseDetails<T>({
 		endTime: endMs,
 	}));
 
-	// TODO(h4ad): Remove this and use context/zustand
 	const lastSelectedInterval = useRef<Time | null>(null);
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
 		lastSelectedInterval.current
@@ -570,7 +571,10 @@ function K8sBaseDetails<T>({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -589,12 +593,25 @@ function K8sBaseDetails<T>({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		}
 	};
 
 	const handleClose = (): void => {
 		lastSelectedInterval.current = null;
+		setSelectedInterval(selectedTime as Time);
+
+		if (selectedTime !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(selectedTime);
+
+			setModalTimeRange({
+				startTime: Math.floor(minTime / TimeRangeOffset),
+				endTime: Math.floor(maxTime / TimeRangeOffset),
+			});
+		}
 
 		setSelectedItem(null);
 		setSelectedView(null);

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseList.tsx

@@ -9,6 +9,7 @@ import {
 	TableColumnType as ColumnType,
 	TablePaginationConfig,
 	TableProps,
+	Typography,
 } from 'antd';
 import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
@@ -370,25 +371,14 @@ export function K8sBaseList<T>({
 
 	const showTableLoadingState = isLoading;
 
-	const emptyStateContext: K8sBaseListEmptyStateContext = {
-		isError: isError || !!data?.error,
+	const emptyTableMessage: React.ReactNode = renderEmptyState?.({
+		isError,
 		error: data?.error,
 		totalCount,
 		hasFilters,
 		isLoading: showTableLoadingState,
 		rawData: data?.rawData,
-	};
-
-	const emptyTableMessage: React.ReactNode = renderEmptyState?.(
-		emptyStateContext,
-	) || (
-		<K8sEmptyState
-			isError={emptyStateContext.isError}
-			error={emptyStateContext.error}
-			isLoading={emptyStateContext.isLoading}
-			rawData={emptyStateContext.rawData}
-		/>
-	);
+	}) || <K8sEmptyState />;
 
 	return (
 		<>
@@ -397,6 +387,10 @@ export function K8sBaseList<T>({
 				entity={entity}
 				showAutoRefresh={!selectedItem}
 			/>
+			{isError && (
+				<Typography>{data?.error?.toString() || 'Something went wrong'}</Typography>
+			)}
+
 			<Table
 				className={styles.k8SListTable}
 				dataSource={showTableLoadingState ? [] : formattedItemsData}

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.module.scss

@@ -1,4 +1,4 @@
-.container {
+.noFilteredHostsMessageContainer {
 	height: 30vh;
 	display: flex;
 	flex-direction: column;
@@ -6,50 +6,21 @@
 	justify-content: center;
 }
 
-.content {
+.noFilteredHostsMessageContent {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: center;
-	gap: var(--spacing-3);
+
 	width: fit-content;
-	max-width: 500px;
 	padding: 24px;
-	text-align: center;
 }
 
-.title {
-	font-weight: 500;
-	margin: 0;
-}
-
-.message {
-	max-width: 400px;
-}
-
-.noDataMessage {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
+.noFilteredHostsMessage {
+	margin-top: var(--spacing-4);
 }
 
 .emptyStateSvg {
 	width: 32px;
 	max-width: 100%;
 }
-
-.eyesEmoji {
-	height: 32px;
-	width: 32px;
-}
-
-.errorIcon {
-	color: var(--bg-cherry-500);
-}
-
-.actions {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-top: 16px;
-}

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.tsx

@@ -1,145 +1,20 @@
-import { useCallback } from 'react';
-import { Button } from '@signozhq/ui';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import history from 'lib/history';
-import { AlertTriangle, LifeBuoy } from 'lucide-react';
-
 import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
-
-import { K8sBaseListEmptyStateContext } from './K8sBaseList';
 
 import styles from './K8sEmptyState.module.scss';
 
-export interface K8sListResponseMetadata {
-	sentAnyHostMetricsData?: boolean;
-	isSendingK8SAgentMetrics?: boolean;
-	endTimeBeforeRetention?: boolean;
-}
-
-type K8sEmptyStateProps = Partial<K8sBaseListEmptyStateContext>;
-
-const handleContactSupport = (isCloudUser: boolean): void => {
-	if (isCloudUser) {
-		history.push('/support');
-	} else {
-		window.open('https://signoz.io/slack', '_blank');
-	}
-};
-
-export function K8sEmptyState({
-	isError,
-	error,
-	isLoading,
-	rawData,
-}: K8sEmptyStateProps): JSX.Element | null {
-	const { isCloudUser } = useGetTenantLicense();
-
-	const handleSupport = useCallback(() => {
-		handleContactSupport(isCloudUser);
-	}, [isCloudUser]);
-
-	if (isLoading) {
-		return null;
-	}
-
-	if (isError || error) {
-		return (
-			<div className={styles.container}>
-				<div className={styles.content}>
-					<AlertTriangle size={32} className={styles.errorIcon} />
-					<span className={styles.message}>
-						{error || 'An error occurred while fetching data.'}
-					</span>
-					<p>
-						Our team is getting on top to resolve this. Please reach out to support if
-						the issue persists.
-					</p>
-					<div className={styles.actions}>
-						<Button
-							onClick={handleSupport}
-							variant="solid"
-							color="secondary"
-							prefix={<LifeBuoy size={14} />}
-						>
-							Contact Support
-						</Button>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	const metadata = rawData as K8sListResponseMetadata | undefined;
-
-	if (metadata?.sentAnyHostMetricsData === false) {
-		return (
-			<div className={styles.container}>
-				<div className={styles.content}>
-					<img className={styles.eyesEmoji} src={eyesEmojiUrl} alt="eyes emoji" />
-					<div className={styles.noDataMessage}>
-						<h5 className={styles.title}>No host metrics data received yet</h5>
-						<span className={styles.message}>
-							Please refer to{' '}
-							<a
-								href="https://signoz.io/docs/userguide/hostmetrics/"
-								target="_blank"
-								rel="noreferrer"
-							>
-								our documentation
-							</a>{' '}
-							to learn how to send host metrics.
-						</span>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	if (metadata?.isSendingK8SAgentMetrics) {
-		return (
-			<div className={styles.container}>
-				<div className={styles.content}>
-					<img className={styles.eyesEmoji} src={eyesEmojiUrl} alt="eyes emoji" />
-					<span className={styles.message}>
-						To see K8s metrics, upgrade to the latest version of SigNoz k8s-infra
-						chart. Please contact support if you need help.
-					</span>
-				</div>
-			</div>
-		);
-	}
-
-	if (metadata?.endTimeBeforeRetention) {
-		return (
-			<div className={styles.container}>
-				<div className={styles.content}>
-					<img className={styles.eyesEmoji} src={eyesEmojiUrl} alt="eyes emoji" />
-					<div className={styles.noDataMessage}>
-						<h5 className={styles.title}>
-							Queried time range is before earliest K8s metrics
-						</h5>
-						<span className={styles.message}>
-							Your requested end time is earlier than the earliest detected time of K8s
-							metrics data, please adjust your end time.
-						</span>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
+export function K8sEmptyState(): JSX.Element {
 	return (
-		<div className={styles.container}>
-			<div className={styles.content}>
+		<div className={styles.noFilteredHostsMessageContainer}>
+			<div className={styles.noFilteredHostsMessageContent}>
 				<img
 					src={emptyStateUrl}
-					alt="empty-state"
+					alt="thinking-emoji"
 					className={styles.emptyStateSvg}
 				/>
-				<span className={styles.message}>
+
+				<p className={styles.noFilteredHostsMessage}>
 					This query had no results. Edit your query and try again!
-				</span>
+				</p>
 			</div>
 		</div>
 	);

frontend/src/container/InfraMonitoringK8s/Base/__tests__/K8sBaseList.test.tsx

@@ -402,10 +402,6 @@ describe('K8sBaseList', () => {
 				data: [],
 				total: 0,
 				error: null,
-				rawData: {
-					sentAnyHostMetricsData: true,
-					isSendingK8SAgentMetrics: false,
-				},
 			});
 
 			renderComponent<{ id: string }>({
@@ -488,180 +484,6 @@ describe('K8sBaseList', () => {
 				expect(fetchListDataMock).toHaveBeenCalled();
 			});
 		});
-
-		it('should display error message when data.error is set', async () => {
-			await waitFor(() => {
-				expect(screen.getByText(/Failed to fetch pods/i)).toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('with no metrics data (sentAnyHostMetricsData=false)', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<{ id: string }>['fetchListData']>,
-			Parameters<K8sBaseListProps<{ id: string }>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [],
-				total: 0,
-				error: null,
-				rawData: {
-					sentAnyHostMetricsData: false,
-					isSendingK8SAgentMetrics: false,
-				},
-			});
-
-			renderComponent<{ id: string }>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				renderRowData: (data) => ({
-					id: data.id,
-					itemKey: data.id,
-					groupedByMeta: {},
-					key: data.id,
-				}),
-				tableColumnsDefinitions: [
-					{
-						id: 'id',
-						label: 'Id',
-						value: 'id',
-						defaultVisibility: true,
-						canBeHidden: false,
-						behavior: 'always-visible',
-					},
-				],
-				tableColumns: [{ key: 'id', title: 'Id', dataIndex: 'id' }],
-			});
-		});
-
-		it('should display no metrics data message', async () => {
-			await waitFor(() => {
-				expect(
-					screen.getByText(/No host metrics data received yet/i),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('should display link to documentation', async () => {
-			await waitFor(() => {
-				const link = screen.getByRole('link', { name: /our documentation/i });
-				expect(link).toBeInTheDocument();
-				expect(link).toHaveAttribute(
-					'href',
-					'https://signoz.io/docs/userguide/hostmetrics/',
-				);
-			});
-		});
-	});
-
-	describe('with incorrect K8s agent metrics (isSendingK8SAgentMetrics=true)', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<{ id: string }>['fetchListData']>,
-			Parameters<K8sBaseListProps<{ id: string }>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [],
-				total: 0,
-				error: null,
-				rawData: {
-					sentAnyHostMetricsData: true,
-					isSendingK8SAgentMetrics: true,
-				},
-			});
-
-			renderComponent<{ id: string }>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				renderRowData: (data) => ({
-					id: data.id,
-					itemKey: data.id,
-					groupedByMeta: {},
-					key: data.id,
-				}),
-				tableColumnsDefinitions: [
-					{
-						id: 'id',
-						label: 'Id',
-						value: 'id',
-						defaultVisibility: true,
-						canBeHidden: false,
-						behavior: 'always-visible',
-					},
-				],
-				tableColumns: [{ key: 'id', title: 'Id', dataIndex: 'id' }],
-			});
-		});
-
-		it('should display upgrade message', async () => {
-			await waitFor(() => {
-				expect(
-					screen.getByText(/upgrade to the latest version of SigNoz k8s-infra/i),
-				).toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('with end time before retention (endTimeBeforeRetention=true)', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<{ id: string }>['fetchListData']>,
-			Parameters<K8sBaseListProps<{ id: string }>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [],
-				total: 0,
-				error: null,
-				rawData: {
-					sentAnyHostMetricsData: true,
-					isSendingK8SAgentMetrics: false,
-					endTimeBeforeRetention: true,
-				},
-			});
-
-			renderComponent<{ id: string }>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				renderRowData: (data) => ({
-					id: data.id,
-					itemKey: data.id,
-					groupedByMeta: {},
-					key: data.id,
-				}),
-				tableColumnsDefinitions: [
-					{
-						id: 'id',
-						label: 'Id',
-						value: 'id',
-						defaultVisibility: true,
-						canBeHidden: false,
-						behavior: 'always-visible',
-					},
-				],
-				tableColumns: [{ key: 'id', title: 'Id', dataIndex: 'id' }],
-			});
-		});
-
-		it('should display time range before retention message', async () => {
-			await waitFor(() => {
-				expect(
-					screen.getByText(/Queried time range is before earliest K8s metrics/i),
-				).toBeInTheDocument();
-				expect(
-					screen.getByText(/please adjust your end time/i),
-				).toBeInTheDocument();
-			});
-		});
 	});
 
 	describe('column visibility based on defaultVisibility', () => {

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -52,7 +52,6 @@ function K8sClustersList({
 				data: response.payload?.data.records || [],
 				total: response.payload?.data.total || 0,
 				error: response.error,
-				rawData: response.payload?.data,
 			};
 		},
 		[dotMetricsEnabled],

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -52,7 +52,6 @@ function K8sDaemonSetsList({
 				data: response.payload?.data.records || [],
 				total: response.payload?.data.total || 0,
 				error: response.error,
-				rawData: response.payload?.data,
 			};
 		},
 		[dotMetricsEnabled],

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -52,7 +52,6 @@ function K8sDeploymentsList({
 				data: response.payload?.data.records || [],
 				total: response.payload?.data.total || 0,
 				error: response.error,
-				rawData: response.payload?.data,
 			};
 		},
 		[dotMetricsEnabled],

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogs.tsx

@@ -1,35 +1,65 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useQuery } from 'react-query';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card } from 'antd';
+import logEvent from 'api/common/logEvent';
 import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import { InfraMonitoringEvents } from 'constants/events';
+import {
+	InfraMonitoringEntity,
+	VIEWS,
+} from 'container/InfraMonitoringK8s/constants';
 import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
-import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
+import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import useDebounce from 'hooks/useDebounce';
+import { generateFilterQuery } from 'lib/logs/generateFilterQuery';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { validateQuery } from 'utils/queryValidationUtils';
 
 import {
-	EntityDetailsEmptyContainer,
-	getEntityEventsOrLogsQueryPayload,
-} from '../utils';
+	getEntityLogsQueryKey,
+	useInfiniteEntityLogs,
+	useInfraMonitoringK8sEntityLogsExpression,
+} from './hooks';
+import NoLogsContainer from './NoLogsContainer';
+import { getEntityLogsQueryPayload } from './utils';
 
-import './entityLogs.styles.scss';
+import styles from './entityLogs.module.scss';
+
+const EXPRESSION_DEBOUNCE_TIME_MS = 300;
 
 interface Props {
 	timeRange: {
 		startTime: number;
 		endTime: number;
 	};
-	filters: IBuilderQuery['filters'];
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	handleChangeLogFilters: (value: IBuilderQuery['filters'], view: VIEWS) => void;
+	logFilters: IBuilderQuery['filters'];
+	selectedInterval: Time;
 	queryKey: string;
 	category: InfraMonitoringEntity;
 	queryKeyFilters: Array<string>;
@@ -37,42 +67,143 @@ interface Props {
 
 function EntityLogs({
 	timeRange,
-	filters,
+	isModalTimeSelection,
+	handleTimeChange,
+	handleChangeLogFilters: _handleChangeLogFilters,
+	logFilters,
+	selectedInterval,
 	queryKey,
 	category,
 	queryKeyFilters,
 }: Props): JSX.Element {
 	const virtuosoRef = useRef<VirtuosoHandle>(null);
+
+	const [
+		filterExpression,
+		setFilterExpression,
+	] = useInfraMonitoringK8sEntityLogsExpression();
+
+	const primaryFiltersOnly = useMemo(
+		() => ({
+			op: 'AND' as const,
+			items:
+				logFilters?.items?.filter((item) =>
+					queryKeyFilters.includes(item.key?.key ?? ''),
+				) ?? [],
+		}),
+		[logFilters?.items, queryKeyFilters],
+	);
+
+	const initialExpression = useMemo(
+		() => convertFiltersToExpression(primaryFiltersOnly).expression,
+		[primaryFiltersOnly],
+	);
+
+	const [userExpression, setUserExpression] = useState('');
+
+	useEffect(() => {
+		if (filterExpression != null) {
+			setUserExpression(
+				getUserExpressionFromCombined(initialExpression, filterExpression),
+			);
+			return;
+		}
+
+		setUserExpression('');
+		if (initialExpression !== '') {
+			setFilterExpression(initialExpression);
+		}
+	}, [filterExpression, initialExpression, setFilterExpression]);
+
+	const debouncedFilterExpression = useDebounce(
+		filterExpression?.trim() || initialExpression,
+		EXPRESSION_DEBOUNCE_TIME_MS,
+	);
+
 	const {
 		activeLog,
-		onAddToQuery,
 		selectedTab,
 		handleSetActiveLog,
 		handleCloseLogDetail,
 	} = useLogDetailHandlers();
 
-	const basePayload = getEntityEventsOrLogsQueryPayload(
-		timeRange.startTime,
-		timeRange.endTime,
-		filters,
+	const onAddToQuery = useCallback(
+		(fieldKey: string, fieldValue: string, operator: string): void => {
+			handleCloseLogDetail();
+
+			const partExpression = generateFilterQuery({
+				fieldKey,
+				fieldValue,
+				type: getOldLogsOperatorFromNew(operator),
+			});
+
+			const newUser = userExpression.trim()
+				? `${userExpression} AND ${partExpression}`
+				: partExpression;
+
+			setUserExpression(newUser);
+			setFilterExpression(
+				combineInitialAndUserExpression(initialExpression, newUser),
+			);
+		},
+		[
+			userExpression,
+			initialExpression,
+			setFilterExpression,
+			handleCloseLogDetail,
+		],
 	);
 
 	const {
 		logs,
-		hasReachedEndOfLogs,
-		isPaginating,
-		currentPage,
-		setIsPaginating,
-		handleNewData,
 		loadMoreLogs,
-		queryPayload,
-	} = useHandleLogsPagination({
+		hasNextPage,
+		isFetchingNextPage,
+		isLoading,
+		isFetching,
+		isError,
+		refetch,
+	} = useInfiniteEntityLogs({
+		queryKey,
 		timeRange,
-		filters,
-		queryKeyFilters,
-		basePayload,
+		expression: debouncedFilterExpression,
 	});
 
+	const handleFilterChange = useCallback((expression: string): void => {
+		setUserExpression(expression);
+	}, []);
+
+	const handleRunQuery = useCallback(
+		(updatedExpression?: string): void => {
+			const combined =
+				updatedExpression ??
+				combineInitialAndUserExpression(initialExpression, userExpression);
+			const validation = validateQuery(combined);
+			if (validation.isValid) {
+				setFilterExpression(combined);
+
+				logEvent(InfraMonitoringEvents.FilterApplied, {
+					entity: InfraMonitoringEvents.K8sEntity,
+					view: InfraMonitoringEvents.LogsView,
+					page: InfraMonitoringEvents.DetailedPage,
+				});
+
+				refetch();
+			}
+		},
+		[userExpression, initialExpression, refetch, setFilterExpression],
+	);
+
+	const queryData = useMemo(
+		() =>
+			getEntityLogsQueryPayload({
+				start: timeRange.startTime,
+				end: timeRange.endTime,
+				expression: userExpression,
+			}).queryData,
+		[timeRange.startTime, timeRange.endTime, userExpression],
+	);
+
 	const handleScrollToLog = useScrollToLog({
 		logs,
 		virtuosoRef,
@@ -109,48 +240,24 @@ function EntityLogs({
 		[activeLog, handleSetActiveLog, handleCloseLogDetail],
 	);
 
-	const { data, isLoading, isFetching, isError } = useQuery({
-		queryKey: [
-			queryKey,
-			timeRange.startTime,
-			timeRange.endTime,
-			filters,
-			currentPage,
-		],
-		queryFn: () => GetMetricQueryRange(queryPayload, DEFAULT_ENTITY_VERSION),
-		enabled: !!queryPayload,
-		keepPreviousData: isPaginating,
-	});
-
-	useEffect(() => {
-		if (data?.payload?.data?.newResult?.data?.result) {
-			handleNewData(data.payload.data.newResult.data.result);
-		}
-	}, [data, handleNewData]);
-
-	useEffect(() => {
-		setIsPaginating(false);
-	}, [data, setIsPaginating]);
-
 	const renderFooter = useCallback(
 		(): JSX.Element | null => (
 			<>
-				{isFetching ? (
-					<div className="logs-loading-skeleton"> Loading more logs ... </div>
-				) : hasReachedEndOfLogs ? (
-					<div className="logs-loading-skeleton"> *** End *** </div>
+				{isFetchingNextPage ? (
+					<div className={styles.logsLoadingSkeleton}> Loading more logs ... </div>
+				) : !hasNextPage && logs.length > 0 ? (
+					<div className={styles.logsLoadingSkeleton}> *** End *** </div>
 				) : null}
 			</>
 		),
-		[isFetching, hasReachedEndOfLogs],
+		[isFetchingNextPage, hasNextPage, logs.length],
 	);
 
 	const renderContent = useMemo(
 		() => (
-			<Card bordered={false} className="entity-logs-list-card">
+			<Card bordered={false} className={styles.listCard}>
 				<OverlayScrollbar isVirtuoso>
 					<Virtuoso
-						className="entity-logs-virtuoso"
 						key="entity-logs-virtuoso"
 						ref={virtuosoRef}
 						data={logs}
@@ -168,30 +275,65 @@ function EntityLogs({
 		[logs, loadMoreLogs, getItemContent, renderFooter],
 	);
 
+	const showInitialLoading = isLoading || (isFetching && logs.length === 0);
+
+	const entityLogsQueryKey = useMemo(
+		() => getEntityLogsQueryKey(queryKey, timeRange, debouncedFilterExpression),
+		[queryKey, timeRange, debouncedFilterExpression],
+	);
+
 	return (
-		<div className="entity-logs">
-			{isLoading && <LogsLoading />}
-			{!isLoading && !isError && logs.length === 0 && (
-				<EntityDetailsEmptyContainer category={category} view="logs" />
-			)}
-			{isError && !isLoading && <LogsError />}
-			{!isLoading && !isError && logs.length > 0 && (
-				<div className="entity-logs-list-container" data-log-detail-ignore="true">
-					{renderContent}
-				</div>
-			)}
-			{selectedTab && activeLog && (
-				<LogDetail
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					logs={logs}
-					onNavigateLog={handleSetActiveLog}
-					selectedTab={selectedTab}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					onScrollToLog={handleScrollToLog}
+		<div className={styles.container}>
+			<div className={styles.header}>
+				<QuerySearch
+					onChange={handleFilterChange}
+					queryData={queryData}
+					dataSource={DataSource.LOGS}
+					onRun={handleRunQuery}
+					initialExpression={
+						initialExpression.trim() ? initialExpression : undefined
+					}
 				/>
-			)}
+				<DateTimeSelectionV2
+					showAutoRefresh
+					showRefreshText={false}
+					hideShareModal
+					isModalTimeSelection={isModalTimeSelection}
+					onTimeChange={handleTimeChange}
+					defaultRelativeTime="5m"
+					modalSelectedInterval={selectedInterval}
+					modalInitialStartTime={timeRange.startTime * 1000}
+					modalInitialEndTime={timeRange.endTime * 1000}
+				/>
+				<RunQueryBtn
+					queryRangeKey={entityLogsQueryKey}
+					onStageRunQuery={(): void => handleRunQuery()}
+				/>
+			</div>
+			<div className={styles.logs}>
+				{showInitialLoading && <LogsLoading />}
+				{!showInitialLoading && !isError && logs.length === 0 && (
+					<NoLogsContainer category={category} />
+				)}
+				{isError && !showInitialLoading && <LogsError />}
+				{!showInitialLoading && !isError && logs.length > 0 && (
+					<div className={styles.listContainer} data-log-detail-ignore="true">
+						{renderContent}
+					</div>
+				)}
+				{selectedTab && activeLog && (
+					<LogDetail
+						log={activeLog}
+						onClose={handleCloseLogDetail}
+						logs={logs}
+						onNavigateLog={handleSetActiveLog}
+						selectedTab={selectedTab}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onAddToQuery}
+						onScrollToLog={handleScrollToLog}
+					/>
+				)}
+			</div>
 		</div>
 	);
 }

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogsDetailedView.tsx

@@ -1,112 +0,0 @@
-import { useMemo } from 'react';
-import { VIEWS } from 'container/InfraMonitoringK8s/constants';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { filterOutPrimaryFilters } from '../utils';
-import EntityLogs from './EntityLogs';
-
-import './entityLogs.styles.scss';
-
-interface Props {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	isModalTimeSelection: boolean;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	handleChangeLogFilters: (value: IBuilderQuery['filters'], view: VIEWS) => void;
-	logFilters: IBuilderQuery['filters'];
-	selectedInterval: Time;
-	queryKey: string;
-	category: InfraMonitoringEntity;
-	queryKeyFilters: Array<string>;
-}
-
-function EntityLogsDetailedView({
-	timeRange,
-	isModalTimeSelection,
-	handleTimeChange,
-	handleChangeLogFilters,
-	logFilters,
-	selectedInterval,
-	queryKey,
-	category,
-	queryKeyFilters,
-}: Props): JSX.Element {
-	const { currentQuery } = useQueryBuilder();
-	const updatedCurrentQuery = useMemo(
-		() => ({
-			...currentQuery,
-			builder: {
-				...currentQuery.builder,
-				queryData: [
-					{
-						...currentQuery.builder.queryData[0],
-						dataSource: DataSource.LOGS,
-						aggregateOperator: 'noop',
-						aggregateAttribute: {
-							...currentQuery.builder.queryData[0].aggregateAttribute,
-						},
-						filters: {
-							items: filterOutPrimaryFilters(logFilters?.items || [], queryKeyFilters),
-							op: 'AND',
-						},
-					},
-				],
-			},
-		}),
-		[currentQuery, logFilters?.items, queryKeyFilters],
-	);
-
-	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
-
-	return (
-		<div className="entity-logs-container">
-			<div className="entity-logs-header">
-				<div className="filter-section">
-					{query && (
-						<QueryBuilderSearch
-							query={query as IBuilderQuery}
-							onChange={(value): void => handleChangeLogFilters(value, VIEWS.LOGS)}
-							disableNavigationShortcuts
-						/>
-					)}
-				</div>
-				<div className="datetime-section">
-					<DateTimeSelectionV2
-						showAutoRefresh
-						showRefreshText={false}
-						hideShareModal
-						isModalTimeSelection={isModalTimeSelection}
-						onTimeChange={handleTimeChange}
-						defaultRelativeTime="5m"
-						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
-					/>
-				</div>
-			</div>
-			<EntityLogs
-				timeRange={timeRange}
-				filters={logFilters}
-				queryKey={queryKey}
-				category={category}
-				queryKeyFilters={queryKeyFilters}
-			/>
-		</div>
-	);
-}
-
-export default EntityLogsDetailedView;