fix(uplot-chart-data): ensure anomaly response does not crash chart

* feat(infra-monitoring): single component to be reused across pages

* feat(pod-details): extract to a common generic component

* refactor(k8s-filters-panel): use our components & css modules

* refactor(k8s-pods): split pod new components into more config files

* refactor(list): split expanded row into own component & change how the selected item is rendered

* refactor(infra-monitoring): add tests & migrate all css to css modules

* fix(empty-state): rendering svg too big

* fix(css): use more semantic tokens

* fix(prettify): ensure all components are correct formatted

* fix(dead-code): remove unused code

* fix(table.tsx): ensure all classes are on css modules

* test(k8s-base-list): add more details why the test fails

* fix(k8s-base-details): remove eslint ignore

* chore(k8s-base-list): cleaning up comments

* refactor(infra-monitoring): create hook for selected item

* refactor(base-details): move close to inside component

* chore(table.scss): fix prettify

* fix(k8s-base-details): auto-refresh causing the entire modal to refresh

* feat(global-time-adapter): adopt new global time adapter

* fix(css): table with wrong background color

* test(k8s-base-list): fix count of fetch times

* fix(table-module): css of the group header not correct

* refactor(utils): better organization for common code

* fix(k8s-base): not showing ellipsis

* fix(k8s-base-list): ensure loading always appear when loading data

* fix(k8s-base-details): issue with floating division

* refactor(infra-k8s): use constant for NANO_SECOND_MULTIPLIER

* fix(k8s): fallback to rawKey when meta via dot to under is not found

* fix(k8s-base-list): not rendering correctly when keys are duplicated

* chore(utils): change no value label to be consistent with previous behavior

* fix(k8s-base-list): add min size for columns

* fix(k8s-base-list): adjust size of first cell on group

* refactor(k8s-base-list): create const for max items to fetch on group by

* feat(infra-monitoring): migrate nodes to shared component (#10850)

* feat(infra-monitoring): migrate clusters to shared component (#10851)

* feat(infra-monitoring): migrate namespaces to shared component (#10852)

* feat(infra-monitoring): migrate deployments to shared component (#10854)

* feat(infra-monitoring): migrate deployments to shared component

* fix(table): ensure widths do not wrap text

* feat(infra-monitoring): migrate jobs to shared component (#10857)

* feat(infra-monitoring): migrate daemonsets to shared component (#10858)

* feat(infra-monitoring): migrate daemonsets to shared component

* fix(infra-monitoring-k8s): included more code change than needed

* feat(infra-monitoring): migrate volumes to shared component (#10859)

* feat(infra-monitoring): migrate volumes to shared component

* fix(infra-monitoring-k8s): missing code change than needed

* feat(infra-monitoring): migrate statefulsets to shared component (#10853)

* refactor(infra-monitoring): remove dead-code (#10865)

* refactor(infra-monitoring-k8s): code cleanup (#10867)

* refactor(expanded-row): move to own component file

* refactor(filters): use correct type for filters

* refactor(api): add deprecate comments

* refactor(table): rename to config

* refactor(k8s-empty): remove unused file

* fix(k8s-expanded-row): fix prettify

* fix(css): broken css due to update on css modules config

* feat(infra-monitoring-hosts): migrate to use shared component (#10874)

* 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

* fix(img): to correct import

* fix(infra-monitoring): state + url desync on quick filters (#10930)

* test(k8s-base-list): fix flaky test

* refactor(infra-monitoring): better error feedback and fix custom range (#10991)

* fix(infra-monitoring): not being able to set custom date

* refactor(infra-monitoring): ensure error message is displayed correctly & empty states

* fix(infra-monitoring): ensure we can close modal when custom date is defined by parent

* refactor(k8s-empty-state): add better error message

* fix(k8s-empty-state): try fix issue with import

.github/CODEOWNERS

@@ -16,38 +16,38 @@ go.mod @therealpandey
 
 # Scaffold Owners
 
-/pkg/config/ @vikrantgupta25
-/pkg/errors/ @vikrantgupta25
-/pkg/factory/ @vikrantgupta25
-/pkg/types/ @vikrantgupta25
-/pkg/valuer/ @vikrantgupta25
-/cmd/ @vikrantgupta25
-.golangci.yml @vikrantgupta25
+/pkg/config/ @therealpandey
+/pkg/errors/ @therealpandey
+/pkg/factory/ @therealpandey
+/pkg/types/ @therealpandey
+/pkg/valuer/ @therealpandey
+/cmd/ @therealpandey
+.golangci.yml @therealpandey
 
 # Zeus Owners
 
-/pkg/zeus/ @vikrantgupta25
-/ee/zeus/ @vikrantgupta25
-/pkg/licensing/ @vikrantgupta25
-/ee/licensing/ @vikrantgupta25
+/pkg/zeus/ @therealpandey
+/ee/zeus/ @therealpandey
+/pkg/licensing/ @therealpandey
+/ee/licensing/ @therealpandey
 
 # SQL Owners
 
-/pkg/sqlmigration/ @vikrantgupta25
-/ee/sqlmigration/ @vikrantgupta25
-/pkg/sqlschema/ @vikrantgupta25
-/ee/sqlschema/ @vikrantgupta25
+/pkg/sqlmigration/ @therealpandey
+/ee/sqlmigration/ @therealpandey
+/pkg/sqlschema/ @therealpandey
+/ee/sqlschema/ @therealpandey
 
 # Analytics Owners
 
-/pkg/analytics/ @vikrantgupta25
-/pkg/statsreporter/ @vikrantgupta25
+/pkg/analytics/ @therealpandey
+/pkg/statsreporter/ @therealpandey
 
 # Emailing Owners
 
-/pkg/emailing/ @vikrantgupta25
-/pkg/types/emailtypes/ @vikrantgupta25
-/templates/email/ @vikrantgupta25
+/pkg/emailing/ @therealpandey
+/pkg/types/emailtypes/ @therealpandey
+/templates/email/ @therealpandey
 
 # Querier Owners
 
@@ -97,23 +97,23 @@ go.mod @therealpandey
 
 # AuthN / AuthZ Owners
 
-/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
+/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
 
 # IdentN Owners
-/pkg/identn/ @vikrantgupta25
-/pkg/http/middleware/identn.go @vikrantgupta25
+/pkg/identn/ @therealpandey
+/pkg/http/middleware/identn.go @therealpandey
 
 # Integration tests
 
-/tests/integration/ @vikrantgupta25
+/tests/integration/ @therealpandey
 
 # OpenAPI types generator
 

cmd/community/server.go

@@ -7,6 +7,7 @@ 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"
@@ -14,6 +15,7 @@ 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"
@@ -26,14 +28,20 @@ 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"
@@ -75,7 +83,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
-		signoz.NewWebProviderFactories(),
+		signoz.NewWebProviderFactories(config.Global),
 		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
 			return signoz.NewSQLSchemaProviderFactories(sqlstore)
 		},
@@ -107,6 +115,9 @@ 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,14 +22,17 @@ 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"
@@ -40,15 +43,21 @@ 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"
 )
@@ -96,7 +105,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
-		signoz.NewWebProviderFactories(),
+		signoz.NewWebProviderFactories(config.Global),
 		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 {
@@ -166,6 +175,9 @@ 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,6 +6,8 @@
 ##################### 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>
@@ -50,8 +52,8 @@ pprof:
 web:
   # Whether to enable the web frontend
   enabled: true
-  # The prefix to serve web on
-  prefix: /
+  # The index file to use as the SPA entrypoint.
+  index: index.html
   # The directory containing the static build files.
   directory: /etc/signoz/web
 

docs/contributing/go/readme.md

@@ -20,3 +20,4 @@ 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

@@ -0,0 +1,152 @@
+# 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,9 +39,7 @@ func (provider *awscloudprovider) GetConnectionArtifact(ctx context.Context, acc
 	q.Set("param_IngestionKey", req.Credentials.IngestionKey)
 
 	return &cloudintegrationtypes.ConnectionArtifact{
-		Aws: &cloudintegrationtypes.AWSConnectionArtifact{
-			ConnectionURL: u.String() + "?&" + q.Encode(), // this format is required by AWS
-		},
+		AWS: cloudintegrationtypes.NewAWSConnectionArtifact(u.String() + "?&" + q.Encode()), // this format is required by AWS
 	}, nil
 }
 
@@ -124,9 +122,6 @@ func (provider *awscloudprovider) BuildIntegrationConfig(
 	}
 
 	return &cloudintegrationtypes.ProviderIntegrationConfig{
-		AWS: &cloudintegrationtypes.AWSIntegrationConfig{
-			EnabledRegions:              account.Config.AWS.Regions,
-			TelemetryCollectionStrategy: collectionStrategy,
-		},
+		AWS: cloudintegrationtypes.NewAWSIntegrationConfig(account.Config.AWS.Regions, collectionStrategy),
 	}, nil
 }

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

@@ -14,7 +14,6 @@ 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"
@@ -23,7 +22,6 @@ import (
 
 type APIHandlerOptions struct {
 	DataConnector                 interfaces.Reader
-	RulesManager                  *rules.Manager
 	UsageManager                  *usage.Manager
 	IntegrationsController        *integrations.Controller
 	CloudIntegrationsController   *cloudintegrations.Controller
@@ -43,7 +41,6 @@ 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,
@@ -64,10 +61,6 @@ 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,10 +12,6 @@ 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"
 
@@ -23,18 +19,10 @@ 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"
@@ -49,7 +37,6 @@ 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"
 )
 
@@ -57,7 +44,6 @@ import (
 type Server struct {
 	config      signoz.Config
 	signoz      *signoz.SigNoz
-	ruleManager *baserules.Manager
 
 	// public http router
 	httpConn     net.Listener
@@ -97,24 +83,6 @@ 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)
 
@@ -152,7 +120,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)
+	usageManager, err := usage.New(signoz.Licensing, signoz.TelemetryStore.ClickhouseDB(), signoz.Zeus, signoz.Modules.OrgGetter, signoz.Flagger)
 	if err != nil {
 		return nil, err
 	}
@@ -163,7 +131,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 
 	apiOpts := api.APIHandlerOptions{
 		DataConnector:                 reader,
-		RulesManager:                  rm,
 		UsageManager:                  usageManager,
 		IntegrationsController:        integrationsController,
 		CloudIntegrationsController:   cloudIntegrationsController,
@@ -180,8 +147,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 
 	s := &Server{
 		config:             config,
-		signoz:             signoz,
-		ruleManager:        rm,
+		signoz:       signoz,
 		httpHostPort:       baseconst.HTTPHostPort,
 		unavailableChannel: make(chan healthcheck.Status),
 		usageManager:       usageManager,
@@ -262,6 +228,20 @@ 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
@@ -288,8 +268,6 @@ 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
@@ -333,47 +311,9 @@ 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,9 +16,11 @@ 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"
 )
 
@@ -43,15 +45,18 @@ 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) (*Manager, error) {
+func New(licenseService licensing.Licensing, clickhouseConn clickhouse.Conn, zeus zeus.Zeus, orgGetter organization.Getter, flagger flagger.Flagger) (*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
 }
@@ -168,7 +173,14 @@ func (lm *Manager) UploadUsage(ctx context.Context) {
 			return
 		}
 
-		errv2 = lm.zeus.PutMeters(ctx, payload.LicenseKey.String(), body)
+		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)
+		}
 		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,6 +136,18 @@ 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/package.json

@@ -48,22 +48,23 @@
     "@radix-ui/react-tooltip": "1.0.7",
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
-    "@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/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/design-tokens": "2.1.4",
-    "@signozhq/dialog": "^0.0.2",
-    "@signozhq/drawer": "0.0.4",
+    "@signozhq/dialog": "0.0.4",
+    "@signozhq/drawer": "0.0.6",
     "@signozhq/icons": "0.1.0",
-    "@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/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/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",

frontend/src/AppRoutes/pageComponents.ts

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

frontend/src/AppRoutes/routes.ts

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

frontend/src/__tests__/query_range_v5.util.ts

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

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

@@ -0,0 +1,496 @@
+/**
+ * ! 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,17 +6,24 @@
  */
 import type {
 	InvalidateOptions,
+	MutationFunction,
 	QueryClient,
 	QueryFunction,
 	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
-import type { ErrorType } from '../../../generatedAPIInstance';
+import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
+	CreateRule201,
+	DeleteRuleByIDPathParameters,
+	GetRuleByID200,
+	GetRuleByIDPathParameters,
 	GetRuleHistoryFilterKeys200,
 	GetRuleHistoryFilterKeysParams,
 	GetRuleHistoryFilterKeysPathParameters,
@@ -35,9 +42,548 @@ 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
@@ -742,3 +1288,87 @@ 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,6 +4529,20 @@ 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',
@@ -4537,6 +4551,513 @@ 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
@@ -5456,6 +5977,57 @@ 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
@@ -6253,6 +6825,53 @@ 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;
 };
@@ -6523,6 +7142,14 @@ export type GetRuleHistoryTopContributors200 = {
 	status: string;
 };
 
+export type TestRule200 = {
+	data: RuletypesGettableTestRuleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetSessionContext200 = {
 	data: AuthtypesSessionContextDTO;
 	/**

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

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

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

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

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

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

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

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

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -100,16 +100,19 @@ 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,13 +11,6 @@
 		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;
@@ -52,10 +45,6 @@
 				}
 			}
 		}
-
-		&.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 { Filter, Info, TriangleAlert } from 'lucide-react';
+import { Info, TriangleAlert } from 'lucide-react';
 import {
 	IDetailedError,
 	IQueryContext,
@@ -85,23 +85,6 @@ 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({
@@ -113,7 +96,6 @@ function QuerySearch({
 	signalSource,
 	hardcodedAttributeKeys,
 	showFilterSuggestionsWithoutMetric,
-	initialExpression,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -130,26 +112,18 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
-	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 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 getCurrentExpression = useCallback(
 		(): string => editorRef.current?.state.doc.toString() || '',
@@ -203,9 +177,9 @@ function QuerySearch({
 			// Do not update codemirror editor if the expression is the same
 			if (newExpression !== currentExpression && !isFocused) {
 				updateEditorValue(newExpression, { skipOnChange: true });
-			}
-			if (!isFocused) {
-				validateExpressionForEditor(newExpression);
+				if (newExpression) {
+					handleQueryValidation(newExpression);
+				}
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -642,7 +616,7 @@ function QuerySearch({
 
 	const handleBlur = (): void => {
 		const currentExpression = getCurrentExpression();
-		validateExpressionForEditor(currentExpression);
+		handleQueryValidation(currentExpression);
 		setIsFocused(false);
 	};
 
@@ -660,6 +634,7 @@ 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}`
@@ -1344,19 +1319,6 @@ 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"
@@ -1396,7 +1358,6 @@ function QuerySearch({
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
-						hasInitialExpression: isScopedFilter,
 					})}
 					extensions={[
 						autocompletion({
@@ -1431,12 +1392,7 @@ function QuerySearch({
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
-											const user = getCurrentExpression();
-											onRun(
-												isScopedFilter
-													? combineInitialAndUserExpression(initialExpression ?? '', user)
-													: user,
-											);
+											onRun(getCurrentExpression());
 										}
 										return true;
 									},
@@ -1601,7 +1557,6 @@ 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

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

@@ -1,40 +0,0 @@
-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(--card);
-		color: var(--accent-primary);
+		background: var(--secondary-background);
+		color: var(--secondary-foreground);
 		border: none;
 		padding: 6px 12px;
 		border-radius: 4px;

frontend/src/components/cmdKPalette/cmdKPalette.scss

@@ -7,6 +7,14 @@
 [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] {
@@ -43,6 +51,22 @@
 
 .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,6 +65,7 @@ const ROUTES = {
 	WORKSPACE_SUSPENDED: '/workspace-suspended',
 	SHORTCUTS: '/settings/shortcuts',
 	INTEGRATIONS: '/integrations',
+	INTEGRATIONS_DETAIL: '/integrations/:integrationId',
 	MESSAGING_QUEUES_BASE: '/messaging-queues',
 	MESSAGING_QUEUES_KAFKA: '/messaging-queues/kafka',
 	MESSAGING_QUEUES_KAFKA_DETAIL: '/messaging-queues/kafka/detail',

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

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

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

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

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

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

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

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

@@ -1,94 +0,0 @@
-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/SuccessView.style.scss

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

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

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

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

@@ -1,89 +0,0 @@
-.configure-service-modal {
-	&__body {
-		display: flex;
-		flex-direction: column;
-		border-radius: 3px;
-		border: 1px solid var(--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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,64 +0,0 @@
-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/InfraMonitoringHosts/Hosts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { VerticalAlignTopOutlined } from '@ant-design/icons';
 import { Button, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -29,7 +29,6 @@ import {
 	hostGetSelectedItemFilters,
 	hostInitialEventsFilter,
 	hostInitialLogTracesFilter,
-	hostRenderEmptyState,
 	hostWidgetInfo,
 } from './constants';
 import {
@@ -58,11 +57,21 @@ 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(() => {
-		if (urlFilters && urlFilters.items) {
-			handleChangeQueryData('filters', urlFilters);
+		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' });
 		}
-	}, [urlFilters, handleChangeQueryData]);
+		// 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
 
 	const handleFilterVisibilityChange = (): void => {
 		setShowFilters(!showFilters);
@@ -70,8 +79,9 @@ 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,
@@ -164,7 +174,6 @@ function Hosts(): JSX.Element {
 							tableColumns={hostColumnsConfig}
 							fetchListData={fetchListData}
 							renderRowData={hostRenderRowData}
-							renderEmptyState={hostRenderEmptyState}
 							eventCategory={InfraMonitoringEvents.HostEntity}
 						/>
 					</div>

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

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

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

@@ -1,43 +0,0 @@
-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,14 +5,12 @@ 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,
@@ -23,12 +21,8 @@ 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 {
@@ -193,51 +187,3 @@ 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,6 +18,7 @@ import {
 	initialQueryState,
 } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
+import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
 import {
 	CustomTimeType,
 	Time,
@@ -35,6 +36,11 @@ 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,
@@ -47,15 +53,6 @@ import {
 } from 'types/common/queryBuilder';
 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';
@@ -208,6 +205,7 @@ 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
@@ -602,16 +600,6 @@ function K8sBaseDetails<T>({
 
 	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,7 +9,6 @@ import {
 	TableColumnType as ColumnType,
 	TablePaginationConfig,
 	TableProps,
-	Typography,
 } from 'antd';
 import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
@@ -371,14 +370,25 @@ export function K8sBaseList<T>({
 
 	const showTableLoadingState = isLoading;
 
-	const emptyTableMessage: React.ReactNode = renderEmptyState?.({
-		isError,
+	const emptyStateContext: K8sBaseListEmptyStateContext = {
+		isError: isError || !!data?.error,
 		error: data?.error,
 		totalCount,
 		hasFilters,
 		isLoading: showTableLoadingState,
 		rawData: data?.rawData,
-	}) || <K8sEmptyState />;
+	};
+
+	const emptyTableMessage: React.ReactNode = renderEmptyState?.(
+		emptyStateContext,
+	) || (
+		<K8sEmptyState
+			isError={emptyStateContext.isError}
+			error={emptyStateContext.error}
+			isLoading={emptyStateContext.isLoading}
+			rawData={emptyStateContext.rawData}
+		/>
+	);
 
 	return (
 		<>
@@ -387,10 +397,6 @@ 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 @@
-.noFilteredHostsMessageContainer {
+.container {
 	height: 30vh;
 	display: flex;
 	flex-direction: column;
@@ -6,21 +6,50 @@
 	justify-content: center;
 }
 
-.noFilteredHostsMessageContent {
+.content {
 	display: flex;
 	flex-direction: column;
-	align-items: flex-start;
+	align-items: center;
 	justify-content: center;
-
+	gap: var(--spacing-3);
 	width: fit-content;
+	max-width: 500px;
 	padding: 24px;
+	text-align: center;
 }
 
-.noFilteredHostsMessage {
-	margin-top: var(--spacing-4);
+.title {
+	font-weight: 500;
+	margin: 0;
+}
+
+.message {
+	max-width: 400px;
+}
+
+.noDataMessage {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
 }
 
 .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,20 +1,145 @@
+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 function K8sEmptyState(): JSX.Element {
+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>
+		);
+	}
+
 	return (
-		<div className={styles.noFilteredHostsMessageContainer}>
-			<div className={styles.noFilteredHostsMessageContent}>
+		<div className={styles.container}>
+			<div className={styles.content}>
 				<img
 					src={emptyStateUrl}
-					alt="thinking-emoji"
+					alt="empty-state"
 					className={styles.emptyStateSvg}
 				/>
-
-				<p className={styles.noFilteredHostsMessage}>
+				<span className={styles.message}>
 					This query had no results. Edit your query and try again!
-				</p>
+				</span>
 			</div>
 		</div>
 	);

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

@@ -402,6 +402,10 @@ describe('K8sBaseList', () => {
 				data: [],
 				total: 0,
 				error: null,
+				rawData: {
+					sentAnyHostMetricsData: true,
+					isSendingK8SAgentMetrics: false,
+				},
 			});
 
 			renderComponent<{ id: string }>({
@@ -484,6 +488,180 @@ 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,6 +52,7 @@ 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,6 +52,7 @@ 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,6 +52,7 @@ 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,65 +1,35 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useQuery } from 'react-query';
 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 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 { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
 import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
-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 { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
-import useDebounce from 'hooks/useDebounce';
-import { generateFilterQuery } from 'lib/logs/generateFilterQuery';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 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 {
-	getEntityLogsQueryKey,
-	useInfiniteEntityLogs,
-	useInfraMonitoringK8sEntityLogsExpression,
-} from './hooks';
-import NoLogsContainer from './NoLogsContainer';
-import { getEntityLogsQueryPayload } from './utils';
+	EntityDetailsEmptyContainer,
+	getEntityEventsOrLogsQueryPayload,
+} from '../utils';
 
-import styles from './entityLogs.module.scss';
-
-const EXPRESSION_DEBOUNCE_TIME_MS = 300;
+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;
+	filters: IBuilderQuery['filters'];
 	queryKey: string;
 	category: InfraMonitoringEntity;
 	queryKeyFilters: Array<string>;
@@ -67,143 +37,42 @@ interface Props {
 
 function EntityLogs({
 	timeRange,
-	isModalTimeSelection,
-	handleTimeChange,
-	handleChangeLogFilters: _handleChangeLogFilters,
-	logFilters,
-	selectedInterval,
+	filters,
 	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 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 basePayload = getEntityEventsOrLogsQueryPayload(
+		timeRange.startTime,
+		timeRange.endTime,
+		filters,
 	);
 
 	const {
 		logs,
+		hasReachedEndOfLogs,
+		isPaginating,
+		currentPage,
+		setIsPaginating,
+		handleNewData,
 		loadMoreLogs,
-		hasNextPage,
-		isFetchingNextPage,
-		isLoading,
-		isFetching,
-		isError,
-		refetch,
-	} = useInfiniteEntityLogs({
-		queryKey,
+		queryPayload,
+	} = useHandleLogsPagination({
 		timeRange,
-		expression: debouncedFilterExpression,
+		filters,
+		queryKeyFilters,
+		basePayload,
 	});
 
-	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,
@@ -240,24 +109,48 @@ 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 => (
 			<>
-				{isFetchingNextPage ? (
-					<div className={styles.logsLoadingSkeleton}> Loading more logs ... </div>
-				) : !hasNextPage && logs.length > 0 ? (
-					<div className={styles.logsLoadingSkeleton}> *** End *** </div>
+				{isFetching ? (
+					<div className="logs-loading-skeleton"> Loading more logs ... </div>
+				) : hasReachedEndOfLogs ? (
+					<div className="logs-loading-skeleton"> *** End *** </div>
 				) : null}
 			</>
 		),
-		[isFetchingNextPage, hasNextPage, logs.length],
+		[isFetching, hasReachedEndOfLogs],
 	);
 
 	const renderContent = useMemo(
 		() => (
-			<Card bordered={false} className={styles.listCard}>
+			<Card bordered={false} className="entity-logs-list-card">
 				<OverlayScrollbar isVirtuoso>
 					<Virtuoso
+						className="entity-logs-virtuoso"
 						key="entity-logs-virtuoso"
 						ref={virtuosoRef}
 						data={logs}
@@ -275,65 +168,30 @@ 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={styles.container}>
-			<div className={styles.header}>
-				<QuerySearch
-					onChange={handleFilterChange}
-					queryData={queryData}
-					dataSource={DataSource.LOGS}
-					onRun={handleRunQuery}
-					initialExpression={
-						initialExpression.trim() ? initialExpression : undefined
-					}
+		<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}
 				/>
-				<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

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

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

@@ -1,20 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import { Ghost } from 'lucide-react';
-
-import styles from './entityLogs.module.scss';
-
-export default function NoLogsContainer({
-	category,
-}: {
-	category: InfraMonitoringEntity;
-}): React.ReactElement {
-	return (
-		<div className={styles.noLogsFound}>
-			<p>
-				<Ghost size={24} color={Color.BG_AMBER_500} />
-				{`No logs found for this ${category} in the selected time range.`}
-			</p>
-		</div>
-	);
-}

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

@@ -1,7 +1,10 @@
 import { VirtuosoMockContext } from 'react-virtuoso';
-import { mockQueryRangeV5WithLogsResponse } from '__tests__/query_range_v5.util';
+import { ENVIRONMENT } from 'constants/env';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { verifyFiltersAndOrderBy } from 'container/LogsExplorerViews/tests/LogsExplorerPagination.test';
+import { logsPaginationQueryRangeSuccessResponse } from 'mocks-server/__mockdata__/logs_query_range';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import {
 	act,
 	fireEvent,
@@ -10,34 +13,36 @@ import {
 	screen,
 	waitFor,
 } from 'tests/test-utils';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
+import { QueryRangePayload } from 'types/api/metrics/getQueryRange';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import EntityLogs from '../EntityLogs';
-import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../hooks';
 
-function verifyEntityLogsV5Request({
+// Custom verifyPayload function for EntityLogs that works with the correct payload structure
+const verifyEntityLogsPayload = ({
 	payload,
 	expectedOffset,
 	initialTimeRange,
 }: {
-	payload: QueryRangePayloadV5;
+	payload: QueryRangePayload;
 	expectedOffset: number;
 	initialTimeRange?: { start: number; end: number };
-}): void {
-	const spec = payload.compositeQuery.queries[0]?.spec as {
-		offset?: number;
-		order?: Array<{ key: { name: string }; direction: string }>;
-	};
-	expect(spec.offset).toBe(expectedOffset);
+}): IBuilderQuery => {
+	// Extract the builder query data from the correct path
+	const queryData = payload?.compositeQuery?.builderQueries?.A as IBuilderQuery;
+
+	expect(queryData).toBeDefined();
+	// Assert that the offset in the payload matches the expected offset
+	expect(queryData.offset).toBe(expectedOffset);
+
+	// If initial time range is provided, assert that the payload start and end match
 	if (initialTimeRange) {
 		expect(payload.start).toBe(initialTimeRange.start);
 		expect(payload.end).toBe(initialTimeRange.end);
 	}
-	const orderKeys = spec.order?.map((o) => o.key.name) ?? [];
-	expect(orderKeys).toContain('timestamp');
-	expect(orderKeys).toContain('id');
-}
+
+	return queryData;
+};
 
 jest.mock(
 	'components/OverlayScrollbar/OverlayScrollbar',
@@ -51,38 +56,32 @@ jest.mock(
 		},
 );
 
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
-	__esModule: true,
-	default: ({
-		onTimeChange,
-	}: {
-		onTimeChange?: (interval: string, dateTimeRange?: [number, number]) => void;
-	}): JSX.Element => (
-		<button
-			type="button"
-			data-testid="mock-datetime-selection"
-			onClick={(): void => {
-				onTimeChange?.('5m');
-			}}
-		>
-			Select Time
-		</button>
-	),
-}));
-
 describe('EntityLogs', () => {
-	let capturedQueryRangePayloads: QueryRangePayloadV5[] = [];
+	let capturedQueryRangePayloads: QueryRangePayload[] = [];
 	const itemHeight = 100;
 
 	beforeEach(() => {
+		server.use(
+			rest.post(
+				`${ENVIRONMENT.baseURL}/api/v3/query_range`,
+				async (req, res, ctx) => {
+					capturedQueryRangePayloads.push(await req.json());
+
+					const lastPayload =
+						capturedQueryRangePayloads[capturedQueryRangePayloads.length - 1];
+
+					const queryData = (lastPayload as any)?.compositeQuery?.builderQueries
+						?.A as IBuilderQuery;
+
+					const offset = queryData?.offset ?? 0;
+					return res(
+						ctx.status(200),
+						ctx.json(logsPaginationQueryRangeSuccessResponse({ offset })),
+					);
+				},
+			),
+		);
 		capturedQueryRangePayloads = [];
-		mockQueryRangeV5WithLogsResponse({
-			onReceiveRequest: async (req) => {
-				const body = (await req.json()) as QueryRangePayloadV5;
-				capturedQueryRangePayloads.push(body);
-				return {};
-			},
-		});
 	});
 	it('should check if k8s logs pagination flows work properly', async () => {
 		let renderResult: RenderResult;
@@ -90,38 +89,15 @@ describe('EntityLogs', () => {
 
 		act(() => {
 			renderResult = render(
-				<NuqsTestingAdapter
-					searchParams={`${K8S_ENTITY_LOGS_EXPRESSION_KEY}=k8s.pod.name+%3D+%22x%22`}
-				>
-					<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight }}>
-						<EntityLogs
-							timeRange={{ startTime: 1, endTime: 2 }}
-							isModalTimeSelection={false}
-							handleTimeChange={jest.fn()}
-							handleChangeLogFilters={jest.fn()}
-							logFilters={{
-								op: 'AND',
-								items: [
-									{
-										id: '1',
-										key: {
-											key: 'k8s.pod.name',
-											dataType: DataTypes.String,
-											type: 'resource',
-											id: 'k8s.pod.name--string--resource--false',
-										},
-										op: '=',
-										value: 'x',
-									},
-								],
-							}}
-							selectedInterval="5m"
-							queryKey="test"
-							category={InfraMonitoringEntity.PODS}
-							queryKeyFilters={['k8s.pod.name']}
-						/>
-					</VirtuosoMockContext.Provider>
-				</NuqsTestingAdapter>,
+				<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight }}>
+					<EntityLogs
+						timeRange={{ startTime: 1, endTime: 2 }}
+						filters={{ items: [], op: 'AND' }}
+						queryKey="test"
+						category={InfraMonitoringEntity.PODS}
+						queryKeyFilters={[]}
+					/>
+				</VirtuosoMockContext.Provider>,
 			);
 		});
 
@@ -136,13 +112,16 @@ describe('EntityLogs', () => {
 		});
 
 		await waitFor(async () => {
+			// Find the Virtuoso scroller element by its data-test-id
 			scrollableElement = renderResult.container.querySelector(
 				'[data-test-id="virtuoso-scroller"]',
 			) as HTMLElement;
 
+			// Ensure the element exists
 			expect(scrollableElement).not.toBeNull();
 
 			if (scrollableElement) {
+				// Set the scrollTop property to simulate scrolling to the calculated end position
 				scrollableElement.scrollTop = 99 * itemHeight;
 
 				act(() => {
@@ -156,31 +135,36 @@ describe('EntityLogs', () => {
 		});
 
 		const firstPayload = capturedQueryRangePayloads[0];
-		verifyEntityLogsV5Request({
+		verifyEntityLogsPayload({
 			payload: firstPayload,
 			expectedOffset: 0,
 		});
 
+		// Store the time range from the first payload, which should be consistent in subsequent requests
 		const initialTimeRange = {
 			start: firstPayload.start,
 			end: firstPayload.end,
 		};
 
 		const secondPayload = capturedQueryRangePayloads[1];
-		verifyEntityLogsV5Request({
+		const secondQueryData = verifyEntityLogsPayload({
 			payload: secondPayload,
 			expectedOffset: 100,
 			initialTimeRange,
 		});
+		verifyFiltersAndOrderBy(secondQueryData);
 
 		await waitFor(async () => {
+			// Find the Virtuoso scroller element by its data-test-id
 			scrollableElement = renderResult.container.querySelector(
 				'[data-test-id="virtuoso-scroller"]',
 			) as HTMLElement;
 
+			// Ensure the element exists
 			expect(scrollableElement).not.toBeNull();
 
 			if (scrollableElement) {
+				// Set the scrollTop property to simulate scrolling to the calculated end position
 				scrollableElement.scrollTop = 199 * itemHeight;
 
 				act(() => {
@@ -194,10 +178,11 @@ describe('EntityLogs', () => {
 		});
 
 		const thirdPayload = capturedQueryRangePayloads[2];
-		verifyEntityLogsV5Request({
+		const thirdQueryData = verifyEntityLogsPayload({
 			payload: thirdPayload,
 			expectedOffset: 200,
 			initialTimeRange,
 		});
+		verifyFiltersAndOrderBy(thirdQueryData);
 	});
 });

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/__tests__/hooks.test.tsx

@@ -1,186 +0,0 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { act, renderHook, waitFor } from '@testing-library/react';
-
-import {
-	mockQueryRangeV5WithError,
-	mockQueryRangeV5WithLogsResponse,
-} from '../../../../../__tests__/query_range_v5.util';
-import { useInfiniteEntityLogs } from '../hooks';
-
-const createWrapper = (): React.FC<{ children: React.ReactNode }> => {
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: {
-				retry: false,
-			},
-		},
-	});
-
-	return function Wrapper({
-		children,
-	}: {
-		children: React.ReactNode;
-	}): JSX.Element {
-		return (
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		);
-	};
-};
-
-describe('useInfiniteEntityLogs', () => {
-	const defaultParams = {
-		queryKey: 'entityLogsTest',
-		timeRange: { startTime: 1708000000, endTime: 1708003600 },
-		expression: 'k8s.pod.name = "test"',
-	};
-
-	describe('initial state', () => {
-		it('should return initial loading state', () => {
-			mockQueryRangeV5WithLogsResponse({
-				delay: 100,
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			expect(result.current.isLoading).toBe(true);
-			expect(result.current.logs).toEqual([]);
-		});
-	});
-
-	describe('successful data fetching', () => {
-		it('should return logs after successful fetch', async () => {
-			mockQueryRangeV5WithLogsResponse({
-				pageSize: 5,
-				hasMore: true,
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isLoading).toBe(false);
-			});
-
-			expect(result.current.error).toBeFalsy();
-			expect(result.current.logs.length).toBe(5);
-			expect(result.current.isError).toBe(false);
-		});
-
-		it('should set hasNextPage based on response size', async () => {
-			mockQueryRangeV5WithLogsResponse({
-				pageSize: 100,
-				hasMore: true,
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isLoading).toBe(false);
-			});
-
-			expect(result.current.hasNextPage).toBe(true);
-		});
-
-		it('should not have next page when response is smaller than page size', async () => {
-			mockQueryRangeV5WithLogsResponse({
-				pageSize: 100,
-				hasMore: false,
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isLoading).toBe(false);
-			});
-
-			expect(result.current.hasNextPage).toBe(false);
-		});
-	});
-
-	describe('empty state', () => {
-		it('should return empty logs array when no data', async () => {
-			mockQueryRangeV5WithLogsResponse({
-				pageSize: 0,
-				hasMore: false,
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isLoading).toBe(false);
-			});
-
-			expect(result.current.logs).toEqual([]);
-			expect(result.current.hasNextPage).toBe(false);
-		});
-	});
-
-	describe('error handling', () => {
-		it('should set isError on API failure', async () => {
-			mockQueryRangeV5WithError('Internal Server Error');
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isError).toBe(true);
-			});
-
-			expect(result.current.logs).toEqual([]);
-		});
-	});
-
-	describe('load more functionality', () => {
-		it('should fetch next page when loadMoreLogs is called', async () => {
-			const requestCount = { count: 0 };
-
-			mockQueryRangeV5WithLogsResponse({
-				pageSize: 100,
-				offset: 0,
-				hasMore: true,
-				onReceiveRequest: () => {
-					requestCount.count += 1;
-
-					if (requestCount.count > 1) {
-						return { offset: 100, pageSize: 100, hasMore: false };
-					}
-
-					return undefined;
-				},
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isLoading).toBe(false);
-			});
-
-			expect(result.current.logs.length).toBe(100);
-			expect(result.current.hasNextPage).toBe(true);
-			expect(requestCount.count).toBe(1);
-
-			act(() => {
-				result.current.loadMoreLogs();
-			});
-
-			await waitFor(() => {
-				expect(result.current.logs.length).toBe(150);
-			});
-
-			expect(result.current.hasNextPage).toBe(false);
-			expect(requestCount.count).toBe(2);
-		});
-	});
-});

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/entityLogs.module.scss

@@ -1,106 +0,0 @@
-.container {
-	margin-top: 1rem;
-}
-
-.header {
-	display: flex;
-	justify-content: space-between;
-	gap: 8px;
-	padding: 12px;
-	border-radius: 3px;
-	border: 1px solid var(--border);
-
-	:global(.timeSelection-input),
-	:global(.run-query-btn),
-	:global(.cancel-query-btn) {
-		height: 2.25rem !important;
-	}
-}
-
-.logs {
-	border: 1px solid var(--border);
-	margin-top: 1rem;
-
-	:global(.virtuoso-list) {
-		overflow-y: hidden !important;
-
-		&::-webkit-scrollbar {
-			width: 0.3rem;
-			height: 0.3rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--primary);
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background: var(--primary);
-		}
-
-		:global(.ant-row) {
-			width: fit-content;
-		}
-	}
-
-	.skeletonContainer {
-		height: 100%;
-		padding: 16px;
-	}
-}
-
-.listContainer {
-	flex: 1;
-	height: calc(100vh - 278px) !important;
-	display: flex;
-	height: 100%;
-
-	:global(.raw-log-content) {
-		width: 100%;
-		text-wrap: inherit;
-		word-wrap: break-word;
-	}
-}
-
-.listCard {
-	width: 100%;
-	margin-top: 12px;
-
-	:global(.ant-card-body) {
-		padding: 0;
-		height: 100%;
-		width: 100%;
-	}
-}
-
-.logsLoadingSkeleton {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	padding: 8px 0;
-
-	:global(.ant-skeleton-input-sm) {
-		height: 18px;
-	}
-}
-
-.noLogsFound {
-	height: 50vh;
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding: 24px;
-	box-sizing: border-box;
-
-	p {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-	}
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/entityLogs.styles.scss

@@ -0,0 +1,120 @@
+.entity-logs-container {
+	margin-top: 1rem;
+
+	.filter-section {
+		flex: 1;
+
+		.ant-select-selector {
+			border-radius: 2px;
+			border: 1px solid var(--l1-border) !important;
+			background-color: var(--l3-background) !important;
+
+			input {
+				font-size: 12px;
+			}
+
+			.ant-tag .ant-typography {
+				font-size: 12px;
+			}
+		}
+	}
+
+	.entity-logs-header {
+		display: flex;
+		justify-content: space-between;
+		gap: 8px;
+
+		padding: 12px;
+		border-radius: 3px;
+		border: 1px solid var(--l1-border);
+	}
+
+	.entity-logs {
+		margin-top: 1rem;
+
+		.virtuoso-list {
+			overflow-y: hidden !important;
+
+			&::-webkit-scrollbar {
+				width: 0.3rem;
+				height: 0.3rem;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: var(--l3-background);
+			}
+
+			&::-webkit-scrollbar-thumb:hover {
+				background: var(--l3-background);
+			}
+
+			.ant-row {
+				width: fit-content;
+			}
+		}
+
+		.skeleton-container {
+			height: 100%;
+			padding: 16px;
+		}
+	}
+}
+
+.entity-logs-list-container {
+	flex: 1;
+	height: calc(100vh - 272px) !important;
+	display: flex;
+	height: 100%;
+
+	.raw-log-content {
+		width: 100%;
+		text-wrap: inherit;
+		word-wrap: break-word;
+	}
+}
+
+.entity-logs-list-card {
+	width: 100%;
+	margin-top: 12px;
+
+	.ant-card-body {
+		padding: 0;
+
+		height: 100%;
+		width: 100%;
+	}
+}
+
+.logs-loading-skeleton {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	padding: 8px 0;
+
+	.ant-skeleton-input-sm {
+		height: 18px;
+	}
+}
+
+.no-logs-found {
+	height: 50vh;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	padding: 24px;
+	box-sizing: border-box;
+
+	.ant-typography {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/hooks.ts

@@ -1,117 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { QueryKey, useInfiniteQuery } from 'react-query';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { parseAsString, useQueryState, UseQueryStateReturn } from 'nuqs';
-import { ILog } from 'types/api/logs/log';
-
-import { getEntityLogsQueryPayload } from './utils';
-
-export const K8S_ENTITY_LOGS_EXPRESSION_KEY = 'k8sEntityLogsExpression';
-
-export function getEntityLogsQueryKey(
-	queryKey: string,
-	timeRange: { startTime: number; endTime: number },
-	expression: string,
-): QueryKey {
-	return [queryKey, timeRange.startTime, timeRange.endTime, expression];
-}
-
-export function useInfraMonitoringK8sEntityLogsExpression(): UseQueryStateReturn<
-	string,
-	undefined
-> {
-	return useQueryState(K8S_ENTITY_LOGS_EXPRESSION_KEY, parseAsString);
-}
-
-export function useInfiniteEntityLogs({
-	queryKey,
-	timeRange,
-	expression,
-}: {
-	queryKey: string;
-	timeRange: { startTime: number; endTime: number };
-	expression: string;
-}): {
-	logs: ILog[];
-	isLoading: boolean;
-	isFetching: boolean;
-	isFetchingNextPage: boolean;
-	isError: boolean;
-	error?: unknown;
-	hasNextPage: boolean;
-	loadMoreLogs: () => void;
-	refetch: () => void;
-} {
-	const {
-		data,
-		isLoading,
-		isFetching,
-		isFetchingNextPage,
-		isError,
-		error,
-		hasNextPage,
-		fetchNextPage,
-		refetch,
-	} = useInfiniteQuery({
-		queryKey: getEntityLogsQueryKey(queryKey, timeRange, expression),
-		queryFn: async ({ pageParam = 0 }) => {
-			const { query } = getEntityLogsQueryPayload({
-				start: timeRange.startTime,
-				end: timeRange.endTime,
-				expression,
-				offset: pageParam as number,
-				pageSize: DEFAULT_PER_PAGE_VALUE,
-			});
-			return GetMetricQueryRange(query, ENTITY_VERSION_V5);
-		},
-		getNextPageParam: (lastPage, allPages) => {
-			const list = lastPage?.payload?.data?.newResult?.data?.result?.[0]?.list;
-			if (!list || list.length < DEFAULT_PER_PAGE_VALUE) {
-				return undefined;
-			}
-			return allPages.length * DEFAULT_PER_PAGE_VALUE;
-		},
-		enabled: !!expression?.trim(),
-	});
-
-	const logs = useMemo<ILog[]>(() => {
-		if (!data?.pages) {
-			return [];
-		}
-
-		return data.pages.flatMap((page) => {
-			const list = page.payload.data.newResult.data.result?.[0]?.list;
-			if (!list) {
-				return [];
-			}
-
-			return list.map(
-				(item) =>
-					({
-						...item.data,
-						timestamp: item.timestamp,
-					} as ILog),
-			);
-		});
-	}, [data?.pages]);
-
-	const loadMoreLogs = useCallback(() => {
-		if (hasNextPage && !isFetchingNextPage) {
-			fetchNextPage();
-		}
-	}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
-
-	return {
-		logs,
-		isLoading,
-		isFetching,
-		isFetchingNextPage,
-		isError,
-		error,
-		hasNextPage: !!hasNextPage,
-		loadMoreLogs,
-		refetch,
-	};
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/index.ts

@@ -1,3 +1,3 @@
-import EntityLogs from './EntityLogs';
+import EntityLogs from './EntityLogsDetailedView';
 
 export default EntityLogs;

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/utils.ts

@@ -1,108 +0,0 @@
-import {
-	initialQueryBuilderFormValuesMap,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
-import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-import {
-	DataSource,
-	LogsAggregatorOperator,
-	ReduceOperators,
-} from 'types/common/queryBuilder';
-import { v4 as uuidv4 } from 'uuid';
-
-export interface EntityLogsQueryParams {
-	start: number;
-	end: number;
-	expression: string;
-	offset?: number;
-	pageSize?: number;
-}
-
-function buildEntityLogsQueryData(
-	expression: string,
-	{
-		offset,
-		pageSize,
-	}: {
-		offset: number;
-		pageSize: number;
-	},
-): IBuilderQuery {
-	return {
-		...initialQueryBuilderFormValuesMap.logs,
-		queryName: 'A',
-		dataSource: DataSource.LOGS,
-		aggregateOperator: LogsAggregatorOperator.NOOP,
-		aggregateAttribute: {
-			id: '------false',
-			dataType: DataTypes.String,
-			key: '',
-			type: '',
-		},
-		timeAggregation: 'rate',
-		spaceAggregation: 'sum',
-		functions: [],
-		aggregations: [],
-		filter: { expression },
-		expression,
-		having: {
-			expression: '',
-		},
-		disabled: false,
-		stepInterval: 60,
-		limit: null,
-		orderBy: [
-			{
-				columnName: 'timestamp',
-				order: 'desc',
-			},
-			{
-				columnName: 'id',
-				order: 'desc',
-			},
-		],
-		groupBy: [],
-		legend: '',
-		reduceTo: ReduceOperators.AVG,
-		offset,
-		pageSize,
-	};
-}
-
-export function getEntityLogsQueryPayload({
-	start,
-	end,
-	expression,
-	offset = 0,
-	pageSize = DEFAULT_PER_PAGE_VALUE,
-}: EntityLogsQueryParams): {
-	query: GetQueryResultsProps;
-	queryData: IBuilderQuery;
-} {
-	const queryData = buildEntityLogsQueryData(expression, { offset, pageSize });
-
-	return {
-		query: {
-			graphType: PANEL_TYPES.LIST,
-			selectedTime: 'GLOBAL_TIME',
-			query: {
-				clickhouse_sql: [],
-				promql: [],
-				builder: {
-					queryData: [queryData],
-					queryFormulas: [],
-					queryTraceOperator: [],
-				},
-				id: uuidv4(),
-				queryType: EQueryType.QUERY_BUILDER,
-			},
-			start,
-			end,
-		},
-		queryData,
-	};
-}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -76,14 +76,21 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		entityVersion: '',
 	});
 
-	const handleChangeQueryDataRef = useRef(handleChangeQueryData);
-	handleChangeQueryDataRef.current = handleChangeQueryData;
+	// 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(() => {
-		if (urlFilters && urlFilters.items) {
-			handleChangeQueryDataRef.current('filters', urlFilters);
+		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' });
 		}
-	}, [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
 
 	const { featureFlags } = useAppContext();
 	const dotMetricsEnabled =
@@ -94,8 +101,8 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		// update the current query with the new filters
 		// in infra monitoring k8s, we are using only one query, hence updating the 0th index of queryData
 		const filters = query.builder.queryData[0].filters;
+		// The useEffect will sync filters to query builder, avoiding double state updates
 		setUrlFilters(filters || null);
-		handleChangeQueryData('filters', filters);
 
 		logEvent(InfraMonitoringEvents.FilterApplied, {
 			entity: InfraMonitoringEvents.K8sEntity,

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

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

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

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

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

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

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

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

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

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

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

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

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

@@ -1,8 +1,10 @@
 .hero-section {
-	height: 308px;
-	padding: 26px 16px;
+	padding: 16px;
+
 	display: flex;
-	gap: 24px;
+	flex-direction: column;
+	gap: 16px;
+
 	position: relative;
 	overflow: hidden;
 	background-position: right;
@@ -30,7 +32,36 @@
 		flex-direction: column;
 		gap: 12px;
 
-		.title {
+		&-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 {
 			color: var(--l1-foreground);
 			font-size: 24px;
 			font-weight: 500;
@@ -38,7 +69,7 @@
 			letter-spacing: -0.12px;
 		}
 
-		.description {
+		&-description {
 			color: var(--l2-foreground);
 			font-size: 12px;
 			font-weight: 400;

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

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

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

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

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

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

@@ -14,8 +14,13 @@
 		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;
@@ -38,10 +43,12 @@
 				}
 			}
 		}
-		&-regions-switch {
+
+		&-region-selector {
 			display: flex;
 			flex-direction: column;
-			gap: 10px;
+			gap: 4px;
+
 			&-title {
 				color: var(--l1-foreground);
 				font-size: 14px;
@@ -49,6 +56,14 @@
 				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;
@@ -66,15 +81,17 @@
 				}
 			}
 		}
-		&-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;
@@ -83,18 +100,31 @@
 		}
 		&-close-button {
 			border-radius: 2px;
-			background: var(--l1-border);
-			border: none;
+			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 {
+			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;
 			}
-			border-radius: 2px;
-			margin: 0 !important;
+
+			&:not(:disabled):hover {
+				background: var(--primary-background-hover);
+			}
 		}
 	}
 	.ant-modal-body {
@@ -109,81 +139,3 @@
 		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/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountSettingsModal.tsx

@@ -0,0 +1,166 @@
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DrawerWrapper } from '@signozhq/drawer';
+import { Form } from 'antd';
+import { invalidateListAccounts } from 'api/generated/services/cloudintegration';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { useAccountSettingsModal } from 'hooks/integration/aws/useAccountSettingsModal';
+import useUrlQuery from 'hooks/useUrlQuery';
+import history from 'lib/history';
+import { Save } from 'lucide-react';
+
+import logEvent from '../../../../../../api/common/logEvent';
+import { CloudAccount } from '../../types';
+import { RegionSelector } from './RegionSelector';
+import RemoveIntegrationAccount from './RemoveIntegrationAccount';
+
+import './AccountSettingsModal.style.scss';
+
+interface AccountSettingsModalProps {
+	onClose: () => void;
+	account: CloudAccount;
+	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
+}
+
+function AccountSettingsModal({
+	onClose,
+	account,
+	setActiveAccount,
+}: AccountSettingsModalProps): JSX.Element {
+	const {
+		form,
+		isLoading,
+		selectedRegions,
+		includeAllRegions,
+		isSaveDisabled,
+		setSelectedRegions,
+		setIncludeAllRegions,
+		handleSubmit,
+		handleClose,
+	} = useAccountSettingsModal({ onClose, account, setActiveAccount });
+
+	const queryClient = useQueryClient();
+	const urlQuery = useUrlQuery();
+
+	const handleRemoveIntegrationAccountSuccess = useCallback((): void => {
+		void invalidateListAccounts(queryClient, {
+			cloudProvider: INTEGRATION_TYPES.AWS,
+		});
+		urlQuery.delete('cloudAccountId');
+		setActiveAccount(null);
+		handleClose();
+		history.replace({ search: urlQuery.toString() });
+
+		logEvent('AWS Integration: Account removed', {
+			id: account?.id,
+			cloudAccountId: account?.cloud_account_id,
+		});
+	}, [
+		queryClient,
+		urlQuery,
+		setActiveAccount,
+		handleClose,
+		account?.id,
+		account?.cloud_account_id,
+	]);
+
+	const renderAccountDetails = useCallback(() => {
+		return (
+			<Form
+				form={form}
+				layout="vertical"
+				initialValues={{
+					selectedRegions,
+					includeAllRegions,
+				}}
+			>
+				<div className="account-settings-modal__body">
+					<div className="account-settings-modal__body-account-info">
+						<div className="account-settings-modal__body-account-info-connected-account-details">
+							<div className="account-settings-modal__body-account-info-connected-account-details-title">
+								Connected Account details
+							</div>
+							<div className="account-settings-modal__body-account-info-connected-account-details-account-id">
+								AWS Account:{' '}
+								<span className="account-settings-modal__body-account-info-connected-account-details-account-id-account-id">
+									{account?.providerAccountId}
+								</span>
+							</div>
+						</div>
+					</div>
+
+					<div className="account-settings-modal__body-region-selector">
+						<div className="account-settings-modal__body-region-selector-title">
+							Which regions do you want to monitor?
+						</div>
+						<div className="account-settings-modal__body-region-selector-description">
+							Choose only the regions you want SigNoz to monitor.
+						</div>
+
+						<RegionSelector
+							selectedRegions={selectedRegions}
+							setSelectedRegions={setSelectedRegions}
+							setIncludeAllRegions={setIncludeAllRegions}
+						/>
+					</div>
+				</div>
+
+				<div className="account-settings-modal__footer">
+					<RemoveIntegrationAccount
+						accountId={account?.id}
+						onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
+					/>
+
+					<Button
+						variant="solid"
+						color="secondary"
+						disabled={isSaveDisabled}
+						onClick={handleSubmit}
+						loading={isLoading}
+						prefixIcon={<Save size={14} />}
+					>
+						Update Changes
+					</Button>
+				</div>
+			</Form>
+		);
+	}, [
+		form,
+		selectedRegions,
+		includeAllRegions,
+		account?.id,
+		handleRemoveIntegrationAccountSuccess,
+		isSaveDisabled,
+		handleSubmit,
+		isLoading,
+		setSelectedRegions,
+		setIncludeAllRegions,
+	]);
+
+	const handleDrawerOpenChange = useCallback(
+		(open: boolean): void => {
+			if (!open) {
+				handleClose();
+			}
+		},
+		[handleClose],
+	);
+
+	return (
+		<DrawerWrapper
+			open={true}
+			type="panel"
+			className="account-settings-modal"
+			header={{
+				title: 'Account Settings',
+			}}
+			direction="right"
+			showCloseButton
+			content={renderAccountDetails()}
+			onOpenChange={handleDrawerOpenChange}
+		/>
+	);
+}
+
+export default AccountSettingsModal;

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

@@ -1,4 +1,33 @@
 .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);
@@ -10,16 +39,24 @@
 			font-family: 'Geist Mono';
 		}
 		&__close-button {
-			background: var(--l1-border);
+			background: var(--l1-background);
+			border: 1px solid 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;
 		}
@@ -56,6 +93,8 @@
 				display: flex;
 				align-items: center;
 				gap: 8px;
+				color: var(--l1-foreground);
+
 				.retry-time {
 					font-family: 'Geist Mono';
 					font-size: 14px;
@@ -116,7 +155,7 @@
 		}
 		&__note {
 			padding: 12px;
-			color: var(--bg-robin-400);
+			color: var(--callout-primary-description);
 			font-size: 12px;
 			line-height: 22px;
 			letter-spacing: -0.06px;
@@ -144,87 +183,3 @@
 		}
 	}
 }
-
-.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/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/CloudAccountSetupModal.tsx

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

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

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

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

@@ -0,0 +1,105 @@
+import { useRef } from 'react';
+import { Form } from 'antd';
+import { useGetAccount } from 'api/generated/services/cloudintegration';
+import cx from 'classnames';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { regions } from 'utils/regions';
+
+import { ModalStateEnum, RegionFormProps } from '../types';
+import AlertMessage from './AlertMessage';
+import {
+	ComplianceNote,
+	MonitoringRegionsSection,
+	RegionDeploymentSection,
+} from './IntegrateNowFormSections';
+import RenderConnectionFields from './RenderConnectionParams';
+
+export function RegionForm({
+	form,
+	modalState,
+	selectedRegions,
+	onSubmit,
+	accountId,
+	handleRegionChange,
+	connectionParams,
+	isConnectionParamsLoading,
+	setSelectedRegions,
+	setIncludeAllRegions,
+	onConnectionSuccess,
+	onConnectionTimeout,
+	onConnectionError,
+}: RegionFormProps): JSX.Element {
+	const startTimeRef = useRef(Date.now());
+	const refetchInterval = 10 * 1000;
+	const errorTimeout = 10 * 60 * 1000;
+
+	const { isLoading: isAccountStatusLoading } = useGetAccount(
+		{
+			cloudProvider: INTEGRATION_TYPES.AWS,
+			id: accountId ?? '',
+		},
+		{
+			query: {
+				refetchInterval,
+				enabled: !!accountId && modalState === ModalStateEnum.WAITING,
+				onSuccess: (response) => {
+					const isConnected =
+						Boolean(response.data.providerAccountId) &&
+						response.data.removedAt === null;
+
+					if (isConnected) {
+						const cloudAccountId =
+							response.data.providerAccountId ?? response.data.id;
+
+						onConnectionSuccess({
+							cloudAccountId,
+							status: response.data.agentReport,
+						});
+					} else if (Date.now() - startTimeRef.current >= errorTimeout) {
+						onConnectionTimeout({ id: accountId });
+					}
+				},
+				onError: () => {
+					onConnectionError();
+				},
+			},
+		},
+	);
+
+	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}
+				/>
+				<MonitoringRegionsSection
+					selectedRegions={selectedRegions}
+					setSelectedRegions={setSelectedRegions}
+					setIncludeAllRegions={setIncludeAllRegions}
+				/>
+				<ComplianceNote />
+				<RenderConnectionFields
+					isConnectionParamsLoading={isConnectionParamsLoading}
+					connectionParams={connectionParams}
+					isFormDisabled={isFormDisabled}
+				/>
+			</div>
+		</Form>
+	);
+}

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

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

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

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

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

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

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

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Modal } from 'antd/lib';
+import logEvent from 'api/common/logEvent';
+import { useDisconnectAccount } from 'api/generated/services/cloudintegration';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { INTEGRATION_TELEMETRY_EVENTS } from 'container/Integrations/constants';
+import { useNotifications } from 'hooks/useNotifications';
+import { Unlink } from 'lucide-react';
+
+import './RemoveIntegrationAccount.scss';
+
+function RemoveIntegrationAccount({
+	accountId,
+	onRemoveIntegrationAccountSuccess,
+}: {
+	accountId: string;
+	onRemoveIntegrationAccountSuccess: () => void;
+}): JSX.Element {
+	const { notifications } = useNotifications();
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	const handleDisconnect = (): void => {
+		setIsModalOpen(true);
+	};
+
+	const {
+		mutate: disconnectAccount,
+		isLoading: isRemoveIntegrationLoading,
+	} = useDisconnectAccount({
+		mutation: {
+			onSuccess: () => {
+				onRemoveIntegrationAccountSuccess?.();
+				setIsModalOpen(false);
+			},
+			onError: () => {
+				notifications.error({
+					message: SOMETHING_WENT_WRONG,
+				});
+			},
+		},
+	});
+	const handleOk = (): void => {
+		logEvent(INTEGRATION_TELEMETRY_EVENTS.AWS_INTEGRATION_ACCOUNT_REMOVED, {
+			accountId,
+		});
+		disconnectAccount({
+			pathParams: {
+				cloudProvider: 'aws',
+				id: accountId,
+			},
+		});
+	};
+
+	const handleCancel = (): void => {
+		setIsModalOpen(false);
+	};
+
+	return (
+		<div className="remove-integration-account-container">
+			<Button
+				variant="solid"
+				color="destructive"
+				prefixIcon={<Unlink size={14} />}
+				size="sm"
+				onClick={handleDisconnect}
+				disabled={isRemoveIntegrationLoading}
+			>
+				Disconnect
+			</Button>
+
+			<Modal
+				className="remove-integration-account-modal"
+				open={isModalOpen}
+				title="Remove integration"
+				onOk={handleOk}
+				onCancel={handleCancel}
+				okText="Remove Account"
+				okButtonProps={{
+					danger: true,
+					loading: isRemoveIntegrationLoading,
+				}}
+			>
+				Removing this account will remove all components created for sending
+				telemetry to SigNoz in your AWS account within the next ~15 minutes
+				(cloudformation stacks named signoz-integration-telemetry-collection in
+				enabled regions). <br />
+				<br />
+				After that, you can delete the cloudformation stack that was created
+				manually when connecting this account.
+			</Modal>
+		</div>
+	);
+}
+
+export default RemoveIntegrationAccount;